/* ===== Hex rain, slow vertical fall of icon hexes =====
     The IIFE at the end of the page hydrates this with icon-bearing
     hexes that fall finite cycles (one pass each) and get garbage-
     collected on `animationend` so the spawn loop can ramp without
     stacking density. Each hex carries an app id 0-11 in dataset.app
     and clicking it toggles that app's collection state in the game.
     Always pointy-top per huisstijl. */
  .hex-rain {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 520px;
    overflow: hidden;
  }
  .hex-rain .h {
    position: absolute;
    top: 0;
    left: var(--rain-x, 50%);
    width: var(--rain-size, 80px);
    height: calc(var(--rain-size, 80px) * 1.1547);
    clip-path: var(--hex-pointy-top);
    background: var(--c-blue-cobalt);
    color: white;
    display: flex; align-items: center; justify-content: center;
    will-change: transform, opacity;
    cursor: pointer;
    animation: hex-rain-fall var(--rain-dur, 28s) linear var(--rain-delay, 0s) 1 forwards;
  }
  .hex-rain .h.alt    { background: var(--c-cobalt-700); }
  .hex-rain .h.accent { background: var(--c-orange-knvb); }
  .hex-rain .h.clicking { pointer-events: none; }
  .hex-rain .h svg {
    width: 44%; height: 44%;
    stroke: currentColor;
    stroke-width: 1.6;
    fill: none;
    pointer-events: none;
  }
  @keyframes hex-rain-fall {
    0%   { transform: translate(-50%, calc(-1 * var(--rain-size, 80px) - 24px)); opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { transform: translate(-50%, var(--rain-end, 600px)); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hex-rain .h { animation: none; transform: translate(-50%, 50%); opacity: 1; }
  }

  /* Game HUD that fades in on first hex click. Counter (apps / 12),
     timer (60s) and a row of 12 mini app-hex icons that light orange
     as the player collects each app. Cobalt-on-white card per the
     GameModal styling so the HUD reads cleanly over a falling-hex
     background instead of fighting with white-on-cobalt shadows. */
  .hex-rain .rain-hud {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 2;
    pointer-events: none;
    font-family: var(--conduction-typography-font-family-code);
    color: var(--c-cobalt-900);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(4px);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    box-shadow: 0 4px 16px -4px rgba(11, 32, 73, 0.18);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 240ms ease, transform 240ms ease;
    text-align: right;
  }
  .hex-rain .rain-hud.active { opacity: 1; transform: translateY(0); }
  .hex-rain .rain-hud .hud-top {
    display: flex; gap: 22px; justify-content: flex-end;
  }
  .hex-rain .rain-hud .hud-block { text-align: right; }
  .hex-rain .rain-hud .hud-num {
    display: block;
    font-size: 28px; font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--c-cobalt-900);
  }
  .hex-rain .rain-hud .hud-label {
    display: block;
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-cobalt-400);
    margin-top: 4px;
  }
  .hex-rain .rain-hud .hud-block.hud-tick   .hud-num { animation: rain-tick 420ms ease; }
  .hex-rain .rain-hud .hud-block.hud-untick .hud-num { animation: rain-untick 420ms ease; }
  @keyframes rain-tick   { 0% { transform: scale(1); color: var(--c-cobalt-900); } 35% { transform: scale(1.4);  color: var(--c-orange-knvb); } 100% { transform: scale(1); color: var(--c-cobalt-900); } }
  @keyframes rain-untick { 0% { transform: scale(1); color: var(--c-cobalt-900); } 35% { transform: scale(0.85); color: #d64633; }            100% { transform: scale(1); color: var(--c-cobalt-900); } }
  .hex-rain .rain-hud .hud-timer.urgent .hud-num {
    color: #d64633;
    animation: rain-pulse 800ms ease infinite;
  }
  @keyframes rain-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
  .hex-rain .rain-hud .hud-icons {
    display: flex; gap: 3px; margin-top: 12px; justify-content: flex-end;
  }
  .hex-rain .rain-hud .hud-icon {
    width: 22px; height: 26px;
    clip-path: var(--hex-pointy-top);
    background: var(--c-cobalt-100);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--c-cobalt-400);
    transition: background 220ms, color 220ms;
  }
  .hex-rain .rain-hud .hud-icon.collected {
    background: var(--c-orange-knvb);
    color: var(--c-cobalt-900);
  }
  .hex-rain .rain-hud .hud-icon.collected.just { animation: rain-icon-pop 380ms ease; }
  @keyframes rain-icon-pop {
    0%   { transform: scale(0.6); }
    60%  { transform: scale(1.2); }
    100% { transform: scale(1); }
  }
  .hex-rain .rain-hud .hud-icon svg {
    width: 60%; height: 60%;
    stroke: currentColor; stroke-width: 1.7; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
  }