/* ==========================================================
   Tooltip (js/tooltip.js): replaces the browser's title tooltip on every page, game and site.
   Dark glass with a gold edge and glow, a gold heading for "Label: text" titles, an arrow pointing
   at the element, and a short fade and lift in. Sits above everything, including the arena.
========================================================== */
.game-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5000;
    display: grid;
    gap: .2rem;
    max-width: min(18rem, calc(100vw - 16px));
    padding: .5rem .75rem;
    border: 1px solid rgba(247, 211, 122, .45);
    border-radius: .7rem;
    color: #e9eef8;
    background: linear-gradient(180deg, rgba(247, 211, 122, .1), transparent 70%), rgba(6, 8, 22, .94);
    box-shadow: 0 .6rem 1.6rem rgba(0, 0, 0, .55), 0 0 1.1rem rgba(247, 211, 122, .16), inset 0 1px 0 rgba(255, 242, 184, .12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px) scale(.97);
    transition: opacity .14s ease, transform .14s ease;
}

    .game-tooltip.is-below {
        transform: translateY(-4px) scale(.97);
    }

    .game-tooltip.is-visible {
        opacity: 1;
        transform: none;
    }

.game-tooltip-head {
    white-space: pre-line;
    color: #f7d37a;
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

    .game-tooltip-head[hidden] {
        display: none;
    }

.game-tooltip-body {
    white-space: pre-line;
}

/* A small rotated square, bordered on the two sides that face out, on the edge nearest the element. */
.game-tooltip-arrow {
    position: absolute;
    top: 100%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-right: 1px solid rgba(247, 211, 122, .45);
    border-bottom: 1px solid rgba(247, 211, 122, .45);
    background: rgb(8, 10, 24);
    transform: rotate(45deg);
}

.game-tooltip.is-below .game-tooltip-arrow {
    top: 0;
    border: 0;
    border-left: 1px solid rgba(247, 211, 122, .45);
    border-top: 1px solid rgba(247, 211, 122, .45);
}

@media (prefers-reduced-motion: reduce) {
    .game-tooltip,
    .game-tooltip.is-below {
        transform: none;
        transition: opacity .1s linear;
    }
}