/* GTA-style radial quick-launcher (see radialMenu.js) - a full-viewport dim
   overlay so the wheel/popup read clearly above the chart regardless of
   where on it they were summoned. Positions are all set inline by JS
   (radialMenu.js computes them from the touch point/trig), only look and
   feel live here. z-index 800: above every gag below (Lion, Hammer, bullet
   holes, callouts, the Nuke's flash - 599-720) and the multiplayer effects
   (605-630, multiplayer.css), so none of them ever covers the open wheel;
   still below toasts (900) and overlays (1000). */
.radial-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 800;
    background: rgba(0, 0, 0, 0.35);
    /* Only .radial-wheel itself (below) opts back into receiving pointer
       events - everywhere else on screen stays fully interactive while the
       wheel is shown but not yet engaged (see radialMenu.js's "armed"
       phase), so summoning it never blocks normal chart use. */
    pointer-events: none;
}

/* The left drawing panel stays usable (and undimmed) while the wheel is
   shown - just above the overlay's 800. See radialMenu.js's
   onOutsidePointerDown, which leaves the wheel open for presses there. */
body.radial-menu-open .drawing-panel,
body.radial-menu-open .trash-confirm {
    z-index: 810;
}

.radial-wheel {
    position: fixed;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: auto;
    touch-action: none;
    /* Thin dividers at each sector boundary over a plain dark fill - 60deg
       apart on the right half (radialMenu.js's RIGHT_CATEGORIES, three
       equal categories), but the left half is sized by importance instead:
       the TP/Entry/SL cycle slot is a bigger 90deg wedge, the Gewehr/Nuke/
       Magnet cycle slot and Lion (LEFT_LEAVES) a smaller 45deg one each,
       none of them with a divider inside - not a uniform repeating
       pattern, so each stop is spelled out explicitly. Which sector is
       "hot" is communicated by its label lighting up (.radial-wheel-label
       .hot below), not by recoloring the wedge itself. */
    background:
        conic-gradient(from 0deg,
            rgba(255, 255, 255, 0.3) 0deg 1.5deg, transparent 1.5deg 60deg,
            rgba(255, 255, 255, 0.3) 60deg 61.5deg, transparent 61.5deg 120deg,
            rgba(255, 255, 255, 0.3) 120deg 121.5deg, transparent 121.5deg 180deg,
            rgba(255, 255, 255, 0.3) 180deg 181.5deg, transparent 181.5deg 225deg,
            rgba(255, 255, 255, 0.3) 225deg 226.5deg, transparent 226.5deg 315deg,
            rgba(255, 255, 255, 0.3) 315deg 316.5deg, transparent 316.5deg 360deg),
        rgba(19, 23, 34, 0.88);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Punches out the center into a ring - the dead zone (radialMenu.js's
   DEAD_ZONE_PX) where no sector registers, same idea as a GTA wheel's own
   empty middle. */
.radial-wheel-hole {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 38%;
    height: 38%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(19, 23, 34, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* 🎡 - click: tool settings window (radialMenu.js / ui/toolSettings.js) */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.radial-wheel-hole:hover {
    border-color: rgba(255, 255, 255, 0.35);
}

.radial-wheel-label {
    position: absolute;
    transform: translate(-50%, -50%);
    color: #b9c0d4;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* The weapons slot's anvil (ui/anvilIcon.js) - sits like a glyph, a bit
   bigger than the text it stands in for (like the emoji slots). */
.anvil-icon {
    display: block;
    width: 1.4em;
    height: 1.4em;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

.radial-wheel-label.hot {
    color: #fff;
    text-shadow: 0 0 8px #2962FF, 0 0 16px #2962FF;
}

/* The anvil's own colours don't follow the label's - it glows instead. */
.radial-wheel-label.hot .anvil-icon,
.rd-wheel-label.hot .anvil-icon {
    filter: drop-shadow(0 0 4px #2962FF) drop-shadow(0 0 8px #2962FF);
}

/* Zero-size anchor pinned at the wheel's own center (radialMenu.js sets
   left/top inline) - each chip's own left/top ("calc(50% + Npx)") then
   resolves relative to it (50% of a 0-width box is just 0), landing exactly
   at centerX/centerY + its computed offset in viewport coordinates. */
.radial-popup {
    position: fixed;
    width: 0;
    height: 0;
}

.radial-popup-chip {
    position: absolute;
    transform: translate(-50%, -50%);
    background: rgba(19, 23, 34, 0.92);
    border: 1px solid rgba(41, 98, 255, 0.5);
    border-radius: 999px;
    padding: 0.5em 0.9em;
    color: #d1d4dc;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

/* Small screens: radialMenu.js pulls the chips closer to the wheel
   (CHIP_RADII.small, same media query) - slimmer chips keep four of them
   in one 60deg category from touching at that shorter distance. */
@media (max-width: 768px), (max-height: 500px) {
    .radial-popup-chip {
        padding: 0.35em 0.7em;
        font-size: 11px;
    }
}

/* Gewehr/Nuke/Lion's real anchor elements (see index.html's #tool-gun/
   #tool-nuke/#tool-lion) - reachable ONLY from the radial menu, never
   shown in this panel at all, but still real, connected DOM elements the
   wheel's synthetic-pointerdown hand-off can target and setPointerCapture
   on. Zero-size and non-interactive rather than display:none - an element
   that's never actually rendered at all is a real risk for pointer
   capture (see wallet/hyperliquid's exchange-line handling elsewhere in
   this app, which works around the exact same concern by activating a hidden tab first
   instead - this one's simpler, it just never needs to be visible in the
   first place). */
.gag-hidden-anchor {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Follows the pointer while dragging the Lion gag, then just stays exactly
   where it's dropped ("wird einfach gezeichnet" - it just gets drawn) -
   unlike Gewehr/Nuke's own decorations above, nothing here ever fades or
   removes it again (see gunNukeGag.js). */
.gag-lion-icon {
    position: fixed;
    font-size: 34px;
    line-height: 1;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 600;
}

/* Follows the pointer while dragging the Hammer gag (see gunNukeGag.js) -
   the pointer holds the HANDLE END (bottom right of the 🔨 glyph, ~36.6px/
   30.6px into it at 34px), so what hits the candles is the head
   (HAMMER_TIP_DX/DY there). Swings around that same handle end: raise the
   head (clockwise), then bring it down (counter-clockwise). */
/* --hammer-scale: the Hammer's size setting (gunNukeGag.js's HAMMER_SIZES),
   set inline - scales the glyph and its handle-end offset/pivot alike. */
.gag-hammer-icon {
    --hammer-scale: 1;
    --hammer-dx: calc(-36.6px * var(--hammer-scale));
    --hammer-dy: calc(-30.6px * var(--hammer-scale));
    position: fixed;
    font-size: calc(34px * var(--hammer-scale));
    line-height: 1;
    transform: translate(var(--hammer-dx), var(--hammer-dy));
    transform-origin: calc(36.6px * var(--hammer-scale)) calc(30.6px * var(--hammer-scale));
    pointer-events: none;
    z-index: 600;
}
.gag-hammer-icon.gag-hammer-strike {
    animation: gag-hammer-swing 0.22s ease-in;
}
@keyframes gag-hammer-swing {
    0%   { transform: translate(var(--hammer-dx), var(--hammer-dy)) rotate(0deg); }
    40%  { transform: translate(var(--hammer-dx), var(--hammer-dy)) rotate(28deg); }
    75%  { transform: translate(var(--hammer-dx), var(--hammer-dy)) rotate(-10deg); }
    100% { transform: translate(var(--hammer-dx), var(--hammer-dy)) rotate(0deg); }
}

/* Follows the pointer while dragging the Magnet gag (see gunNukeGag.js). */
.gag-magnet-icon {
    position: fixed;
    font-size: 34px;
    line-height: 1;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 600;
}

/* A cosmetic stand-in for one of the chart's own candles, anchored exactly
   on top of the real one - Magnet: only its CLOSE edge chases the gag's
   vertical position while it's dragged (see gunNukeGag.js's
   tick()/renderMagnetCandle), stretching/shrinking the wick/body below
   it; Hammer: the whole sprite is knocked down and glides back (its
   transform, see knockCandleDown). The real candle is hidden meanwhile (see chart.js's
   setLastCandleHidden) and shown again unchanged afterward. Zero size itself; .gag-magnet-candle-wick/-body
   below are positioned relative to it via their own top/height, recomputed
   every frame instead of moving as a group. */
.gag-magnet-candle {
    position: fixed;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 599;
}
.gag-magnet-candle-wick {
    position: absolute;
    left: -0.5px;
    width: 1px;
}
/* width/left set inline to match the real candle's (see realCandleBodyWidth). */
.gag-magnet-candle-body {
    position: absolute;
}

/* Follows the pointer while dragging the Gewehr gag (see gunNukeGag.js) -
   a plain inline SVG crosshair, red to read clearly against the chart. */
.gag-crosshair {
    position: fixed;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 600;
}

/* Left behind where the Gewehr gag was fired - a soft dark roundel
   standing in for a bullet hole, fading out very slowly on its own. */
.gag-bullet-hole {
    position: fixed;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(15, 15, 15, 0.9) 0%, rgba(15, 15, 15, 0.55) 45%, transparent 72%);
    pointer-events: none;
    z-index: 600;
    animation: gagTraceFade 90s linear forwards;
}

/* A weapon's damage (bullet hole, paint splat, laser burn - gunNukeGag.js's
   TRACE_MS) fading out very slowly. */
@keyframes gagTraceFade {
    0%, 15% { opacity: 1; }
    100% { opacity: 0; }
}

/* Gewehr's other variants (gunNukeGag.js's GUN_VARIANTS/fireGun) - each
   element removes itself once its animation is done. */
.gag-water-splash,
.gag-water-drop,
.gag-steam,
.gag-nerf-dart,
.gag-paint-splat,
.gag-laser-scorch,
.gag-laser-burn,
.gag-laser-beam {
    position: fixed;
    pointer-events: none;
    z-index: 600;
}

/* Wasserpistole: a splash, drops running down from it. */
.gag-water-splash {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(120, 200, 255, 0.75) 0%, rgba(59, 180, 255, 0.45) 45%, transparent 70%);
    animation: gagWaterSplash 2.5s ease-out forwards;
}
@keyframes gagWaterSplash {
    0% { transform: translate(-50%, -50%) scale(0.3); opacity: 1; }
    15% { transform: translate(-50%, -50%) scale(1.15); }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
.gag-water-drop {
    width: 6px;
    height: 9px;
    border-radius: 50% 50% 50% 50% / 35% 35% 65% 65%;
    background: rgba(90, 190, 255, 0.85);
    transform: translate(-50%, -50%);
    animation: gagWaterDrop 2.4s ease-in forwards;
}
@keyframes gagWaterDrop {
    0% { transform: translate(-50%, -50%); opacity: 1; }
    100% { transform: translate(-50%, 90px); opacity: 0; }
}

/* Steam rising off a red candle the water pistol hit (--steam-drift: sideways). */
.gag-steam {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(235, 240, 245, 0.7) 0%, rgba(235, 240, 245, 0.3) 50%, transparent 72%);
    filter: blur(1px);
    animation: gagSteam 1.9s ease-out forwards;
}
@keyframes gagSteam {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    15% { opacity: 0.9; }
    100% { transform: translate(calc(-50% + var(--steam-drift, 0px)), calc(-50% - 55px)) scale(2.2); opacity: 0; }
}

/* Nerf: a foam dart stuck where it hit - wobbles, then drops off. */
.gag-nerf-dart {
    width: 30px;
    height: 8px;
    margin-top: -4px;
    border-radius: 2px 4px 4px 2px;
    background: linear-gradient(90deg, #ff9800 0 70%, #1e88e5 70% 100%);
    transform-origin: 100% 50%;
    translate: -100% 0;
    rotate: var(--dart-angle, -25deg);
    animation: gagNerfWobble 0.5s ease-out, gagNerfFall 0.9s 2.4s ease-in forwards;
}
@keyframes gagNerfWobble {
    0% { rotate: calc(var(--dart-angle, -25deg) - 14deg); }
    35% { rotate: calc(var(--dart-angle, -25deg) + 9deg); }
    70% { rotate: calc(var(--dart-angle, -25deg) - 4deg); }
    100% { rotate: var(--dart-angle, -25deg); }
}
@keyframes gagNerfFall {
    to { transform: translateY(160px); rotate: 80deg; opacity: 0; }
}

/* Paintball: a splat in one random color (--paint), fading slowly. */
.gag-paint-splat {
    width: 46px;
    height: 46px;
    transform: translate(-50%, -50%) rotate(var(--paint-rot, 0deg));
    border-radius: 48% 52% 40% 60% / 55% 42% 58% 45%;
    background:
        radial-gradient(circle at 85% 20%, var(--paint) 0 5px, transparent 6px),
        radial-gradient(circle at 10% 80%, var(--paint) 0 4px, transparent 5px),
        radial-gradient(circle at 50% 50%, var(--paint) 0 55%, transparent 58%);
    opacity: 0.85;
    animation: gagPaintSplat 0.9s ease-out, gagTraceFade 90s linear forwards;
}
@keyframes gagPaintSplat {
    0% { scale: 0.2; }
    60% { scale: 1.1; }
    100% { scale: 1; }
}
/* The paint a hit Lion keeps (a child of the .gag-lion-icon). */
.gag-lion-paint {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 45% 55% 40% 60%;
    transform: translate(-50%, -50%);
    background: var(--paint);
    opacity: 0.9;
    pointer-events: none;
}

/* Laser: a short beam from the chart's bottom-left, a glowing scorch mark. */
.gag-laser-beam {
    height: 3px;
    transform-origin: 0 50%;
    background: #ff1744;
    box-shadow: 0 0 6px 2px rgba(255, 23, 68, 0.9), 0 0 16px 4px rgba(255, 23, 68, 0.5);
    border-radius: 2px;
    animation: gagLaserBeam 0.4s ease-out forwards;
}
@keyframes gagLaserBeam {
    0%, 40% { opacity: 1; }
    100% { opacity: 0; }
}
.gag-laser-scorch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, #fff 0 15%, #ff1744 35%, rgba(60, 0, 0, 0.7) 60%, transparent 72%);
    box-shadow: 0 0 12px 3px rgba(255, 23, 68, 0.7);
    animation: gagLaserScorch 2.5s ease-out forwards;
}
@keyframes gagLaserScorch {
    0% { opacity: 1; }
    20% { box-shadow: 0 0 4px 1px rgba(255, 23, 68, 0.3); }
    100% { opacity: 0; box-shadow: none; }
}
/* What the scorch leaves behind - a dark burn, fading very slowly. */
.gag-laser-burn {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(20, 5, 5, 0.85) 0 30%, rgba(60, 10, 10, 0.5) 55%, transparent 72%);
    z-index: 599;
    animation: gagTraceFade 90s linear forwards;
}
/* A green candle set on fire by the laser (gunNukeGag.js's igniteCandle):
   laid over its body each frame, glowing, with three flames licking up
   from its top. */
.gag-candle-fire {
    position: fixed;
    pointer-events: none;
    z-index: 600;
    border-radius: 2px;
    background: linear-gradient(to top, rgba(255, 60, 0, 0.75), rgba(255, 170, 0, 0.55));
    box-shadow: 0 0 10px 3px rgba(255, 110, 0, 0.6);
    animation: gagFireGlow 0.35s ease-in-out infinite alternate;
    transition: opacity 0.6s ease-out;
}
.gag-candle-fire.gag-candle-fire-out {
    opacity: 0;
}
.gag-candle-fire span {
    position: absolute;
    bottom: 100%;
    width: 60%;
    min-width: 6px;
    aspect-ratio: 1 / 1.8;
    margin-bottom: -4px;
    border-radius: 50% 50% 35% 35% / 65% 65% 35% 35%;
    background: radial-gradient(ellipse at 50% 80%, #fff6a0 0%, #ffb300 35%, #ff5722 65%, transparent 80%);
    transform-origin: 50% 100%;
    animation: gagFireFlame 0.5s ease-in-out infinite alternate;
}
.gag-candle-fire span:nth-child(1) { left: -15%; animation-delay: -0.2s; scale: 0.8; }
.gag-candle-fire span:nth-child(2) { left: 20%; animation-duration: 0.4s; scale: 1.3; }
.gag-candle-fire span:nth-child(3) { left: 55%; animation-delay: -0.35s; scale: 0.9; }
@keyframes gagFireGlow {
    from { box-shadow: 0 0 8px 2px rgba(255, 110, 0, 0.5); }
    to { box-shadow: 0 0 16px 5px rgba(255, 140, 0, 0.8); }
}
@keyframes gagFireFlame {
    from { transform: scaleY(0.85) skewX(-6deg); opacity: 0.85; }
    to { transform: scaleY(1.2) skewX(6deg); opacity: 1; }
}
/* A Lion hit by the laser. */
.gag-lion-icon.gag-vaporize {
    animation: gagVaporize 0.6s ease-in forwards;
}
@keyframes gagVaporize {
    0% { filter: none; }
    30% { filter: brightness(2) drop-shadow(0 0 10px #ff1744); transform: translate(-50%, -50%) scale(1.15); }
    100% { filter: brightness(3) blur(4px); transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
}

/* Follows the pointer while dragging the Nuke gag, then animates down to
   the chart's own bottom edge on drop (see gunNukeGag.js, which sets
   .top/.transform itself for that part - this only supplies the
   transition timing it animates along). */
.gag-nuke-icon {
    position: fixed;
    font-size: 40px;
    line-height: 1;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 600;
}

/* Brief full-screen flash right as the Nuke gag "detonates" (see
   gunNukeGag.js) - starts fully opaque, JS flips it to 0 a beat later so
   this transition carries it out quickly. */
.gag-black-flash {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 700;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.6s ease-out;
}

/* Left "leichtgrün versifft" (slightly green and grimy) after the Nuke
   gag's flash fades - JS flips this to opacity 0 right after adding it, so
   this transition alone stretches that fade out over ~10s+. mix-blend-mode
   keeps it looking like a tint over the chart rather than a flat green
   sheet. */
.gag-green-tint {
    position: fixed;
    inset: 0;
    background: rgba(40, 120, 40, 0.32);
    mix-blend-mode: multiply;
    z-index: 650;
    pointer-events: none;
    opacity: 1;
    transition: opacity 12s linear;
}

/* Brief "Bildschirm ruckelt" (screen shake) for both gags (gunshot
   recoil / nuke impact) - toggled onto <body> for a short burst
   (gunNukeGag.js removes the class again once the animation ends).
   --shake-amp / --shake-repeat: set inline by shakeScreen (the Nuke's
   size - a bigger one shakes harder and longer, repeating the jolt). */
@keyframes gagShake {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(calc(-6px * var(--shake-amp, 1)), calc(4px * var(--shake-amp, 1))); }
    40% { transform: translate(calc(6px * var(--shake-amp, 1)), calc(-5px * var(--shake-amp, 1))); }
    60% { transform: translate(calc(-5px * var(--shake-amp, 1)), calc(-3px * var(--shake-amp, 1))); }
    80% { transform: translate(calc(4px * var(--shake-amp, 1)), calc(3px * var(--shake-amp, 1))); }
}

.gag-screen-shake {
    animation: gagShake 0.4s ease-in-out;
    animation-iteration-count: var(--shake-repeat, 1);
}

/* Generic pop-in/hold/fade-out text callout, shared by every gag that just
   flashes a short message and goes away - "LIQ HUNT" (Gewehr shooting a
   Lion sticker, or Nuke wiping all of them at once) and "JUICE!" (dropping
   the Juice gag - see gunNukeGag.js's showTextCallout/huntLionAt/
   huntAllLions/initGunNukeGag). JS just appends the element with whatever
   text it wants and removes it on animationend, no JS-driven opacity
   toggling needed like the other gags' effects above. */
@keyframes gagCalloutPop {
    0% { opacity: 0; transform: translate(-50%, -40%) scale(0.7); }
    15% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
    25% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    75% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -70%) scale(1); }
}

.gag-callout-text {
    position: fixed;
    color: #ff3b3b;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 1.5px;
    white-space: nowrap;
    text-shadow: 0 0 8px rgba(255, 59, 59, 0.85), 0 2px 5px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    z-index: 620;
    animation: gagCalloutPop 1s ease-out forwards;
}

/* SL hit callouts - "But you said, you said..." and "K1m6a Airlines
   Roundtrip" (see slHitGags.js): same callout, held longer for the longer
   text. */
.gag-callout-long {
    animation-duration: 2.4s;
}

/* The plane landing on that SL's line - moved by the Web Animations API
   (slHitGags.js), so it only needs to sit fixed at the origin. */
.gag-be-plane {
    position: fixed;
    left: 0;
    top: 0;
    width: 64px;
    height: 32px;
    pointer-events: none;
    z-index: 620;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
}

.gag-be-plane svg {
    display: block;
}

/* The home airport at the left end of a "SL to BE" line (see
   beTerminalMarker.js) - positioned by transform, above the chart canvas
   like .trade-zone but not blocking it. */
.be-terminal-marker {
    position: absolute;
    left: 0;
    top: 0;
    width: 44px;
    height: 26px;
    pointer-events: none;
    z-index: 3;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.be-terminal-marker svg {
    display: block;
}

/* Nuke's own "LIQ HUNT" uses this - bigger and above its own black flash
   (z-index 700, see .gag-black-flash) so it reads clearly against the
   blackout instead of being hidden underneath it, and holds a beat longer. */
.gag-callout-text-big {
    font-size: 40px;
    z-index: 720;
    animation-duration: 1.8s;
}

/* Waiting for the tap that places a tool picked with 👆 in the 🎡 window
   (chart/tools/tapToPlace.js) - a clear layer catching that press, at the
   wheel's own level. touch-action: none so the browser doesn't turn the
   press into a pan and cancel it once handed to the tool. */
.tap-to-place-layer {
    position: fixed;
    inset: 0;
    z-index: 800;
    cursor: crosshair;
    touch-action: none;
}

.tap-to-place-hint {
    position: fixed;
    top: 72px;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100vw - 32px);
    padding: 0.55em 0.9em;
    background: rgba(19, 23, 34, 0.92);
    border: 1px solid rgba(41, 98, 255, 0.6);
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    color: #d1d4dc;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    pointer-events: none;
}

/* Long-hold info for a wheel section (radialMenu.js's SECTOR_INFO) -
   positioned by JS clear of the wheel and its tool chips. */
.radial-info {
    position: fixed;
    z-index: 620;
    max-width: min(300px, calc(100vw - 16px));
    padding: 0.55em 0.8em;
    background: #1b1530;
    border: 1px solid rgba(156, 39, 176, 0.7);
    border-radius: 0.6em;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    color: #e6e1f0;
    font-size: 13px;
    line-height: 1.4;
    pointer-events: none;
    animation: radial-info-in 0.15s ease-out;
}

.radial-info[hidden] {
    display: none;
}

@keyframes radial-info-in {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: none; }
}