/* ════════════════════════════════════════════════════
       DIAMOND HEIST — shared game engine styles (scoped under
       #game-overlay). The handheld landing (index.html) zooms
       its console screen into this overlay.
    ════════════════════════════════════════════════════ */
    #game-overlay {
      position: fixed; inset: 0; z-index: 9000;
      color: #fff;
      font-family: 'Brooklyn', sans-serif;
      text-transform: uppercase;
      cursor: none;
      overflow: hidden;
      display: flex; align-items: center; justify-content: center;
      padding: clamp(8px, 2vw, 28px);
      /* Matches the scene photo's flat background so the monitor floats seamlessly */
      background: #FDFFFF;
    }

    #game-overlay[hidden] { display: none; }
    body.game-open { overflow: hidden; }

    /* Touch control is swipe, anywhere on the screen — see the swipe handler in
       js/diamond-game.js. There is deliberately no on-screen D-pad: it covered
       the bottom rows of the maze on a phone, which is exactly where you need
       to see what you are steering into. */

    #flash {
      position: absolute; inset: 0;
      background: #fff; opacity: 0;
      pointer-events: none; z-index: 9998;
    }

    #diamond-banner {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      pointer-events: none; opacity: 0; z-index: 9997;
      transition: opacity 0.3s ease;
    }
    #diamond-banner.on { opacity: 1; }
    #diamond-banner span {
      font-family: 'DrukWideBold', sans-serif;
      font-size: clamp(28px, 6vw, 88px);
      letter-spacing: 0.04em; color: #A8F0FF;
      text-shadow: 0 0 20px #A8F0FF, 0 0 60px rgba(168,240,255,0.6);
      white-space: nowrap; max-width: 92vw;
      animation: diamondPulse 1.1s ease-in-out infinite;
    }
    @keyframes diamondPulse {
      0%,100% { transform: scale(1);    opacity: 0.85; }
      50%     { transform: scale(1.12); opacity: 1; }
    }

    #game-overlay .screen {
      position: absolute; inset: 0;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 4% 6%;
      opacity: 0; pointer-events: none;
      transform: scale(0.985);
      transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                  transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }
    #game-overlay .screen.active { opacity: 1; pointer-events: all; transform: scale(1); }

    @keyframes riseIn {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    #screen3.active .brand-logo {
      animation: riseIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both,
                 logoFlicker 4s infinite 0.9s;
    }
    #screen3.active #s3-tagline { animation: riseIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both; }
    #screen3.active #s3-score   { animation: riseIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.30s both; }
    #screen3.active #s3-btn     { animation: riseIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.44s both; }

    @keyframes logoFlicker {
      0%,19%,21%,23%,25%,54%,56%,100% {
        opacity: 1;
        filter: drop-shadow(0 0 6px #1A1AFF) drop-shadow(0 0 22px #1A1AFF) drop-shadow(0 0 55px rgba(26,26,255,0.75));
      }
      20%,24%,55% { opacity: 0.65; filter: none; }
    }

    .brand-logo {
      width: min(78%, 460px);
      height: auto; display: block;
      filter: drop-shadow(0 0 6px #1A1AFF) drop-shadow(0 0 22px #1A1AFF) drop-shadow(0 0 55px rgba(26,26,255,0.75));
      animation: logoFlicker 4s infinite;
    }
    #screen2 { justify-content: flex-start; padding: 0; }
    #game-hud {
      width: 100%; display: flex;
      justify-content: space-between; align-items: center;
      padding: 10px 20px 6px; flex-shrink: 0;
    }
    .hud-col { text-align: center; }
    .hud-label {
      font-family: 'Brooklyn', sans-serif; font-size: 10px;
      letter-spacing: 0.22em; color: rgba(255,255,255,0.38);
      display: block; line-height: 1;
    }
    .hud-val {
      font-family: 'DrukWideBold', sans-serif;
      font-size: clamp(32px, 5vw, 44px); line-height: 1; color: #fff;
      display: block;
    }
    @keyframes urgentPulse {
      0%, 100% { transform: scale(1); }
      50%      { transform: scale(1.1); }
    }
    #timer-val.urgent {
      color: #FF2020; text-shadow: 0 0 12px #FF2020;
      animation: urgentPulse 0.5s ease-in-out infinite;
    }
    @keyframes scorePop {
      0%   { transform: scale(1); }
      40%  { transform: scale(1.28); }
      100% { transform: scale(1); }
    }
    #score-val.pop { animation: scorePop 0.18s ease-out; }
    #score-val.dbl { color: #A8F0FF; text-shadow: 0 0 14px #A8F0FF; }

    #canvas-wrap {
      flex: 1; display: flex; align-items: center;
      justify-content: center; width: 100%; min-height: 0;
    }
    #game-canvas { display: block; }

    #power-bar-wrap {
      width: 100%; max-width: 600px; height: 6px;
      background: rgba(255,255,255,0.08);
      margin: 6px auto 10px; flex-shrink: 0;
      opacity: 0; transition: opacity 0.2s ease;
    }
    #power-bar {
      height: 100%; width: 0%;
      background: linear-gradient(90deg, #1A1AFF, #A8F0FF);
      box-shadow: 0 0 10px #A8F0FF;
      transition: width 0.08s linear;
    }

    #countdown {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      pointer-events: none; z-index: 10;
    }
    #countdown span {
      font-family: 'DrukWideBold', sans-serif;
      font-size: clamp(36px, 8vw, 110px);
      letter-spacing: 0.06em; color: #A8F0FF;
      text-shadow: 0 0 20px #A8F0FF, 0 0 60px rgba(168,240,255,0.6);
      opacity: 0;
    }
    @keyframes cdWord {
      0%   { opacity: 0; transform: scale(0.7); }
      25%  { opacity: 1; transform: scale(1); }
      78%  { opacity: 1; transform: scale(1); }
      100% { opacity: 0; transform: scale(1.25); }
    }

    #s3-tagline {
      font-family: 'Brooklyn', sans-serif;
      font-size: clamp(12px, 2vw, 18px);
      letter-spacing: 0.25em; color: rgba(255,255,255,0.55);
      margin-top: 16px; text-align: center;
    }
    #s3-score {
      font-family: 'DrukWideBold', sans-serif;
      font-size: clamp(36px, 7vw, 80px);
      letter-spacing: 0.08em; color: #A8F0FF; line-height: 1;
      text-shadow: 0 0 20px #A8F0FF, 0 0 50px rgba(168,240,255,0.4);
      margin-top: 40px; text-align: center;
    }
    #s3-score .s3-gem {
      height: 0.85em; width: auto;
      display: inline-block; vertical-align: -0.08em;
      image-rendering: pixelated;
    }
    /* Exit — always reachable while the overlay is up (the only way out
       mid-round on touch devices) */
    #game-exit {
      position: absolute;
      top: calc(env(safe-area-inset-top, 0px) + 10px); right: 14px;
      z-index: 10003;
      width: 44px; height: 44px;
      display: grid; place-items: center;
      padding: 0; background: none; border: none;
      color: rgba(255,255,255,0.5);
      font-size: 26px; line-height: 1; cursor: pointer;
      transition: color 0.2s ease, transform 0.15s ease;
    }
    #game-exit:hover { color: #A8F0FF; transform: scale(1.12); }
    #game-exit:focus-visible { outline: 2px solid #A8F0FF; outline-offset: 4px; }
    #s3-btn {
      display: inline-block; margin-top: 48px;
      font-family: 'Brooklyn', sans-serif;
      font-size: clamp(13px, 1.6vw, 16px); font-weight: 700;
      letter-spacing: 0.2em; color: #050505;
      background: #fff; border: none;
      padding: 18px 48px;
      text-decoration: none; cursor: none;
      position: relative; overflow: hidden;
      transition: box-shadow 0.2s ease, transform 0.1s ease;
      box-shadow: 0 0 20px rgba(255,255,255,0.4), 0 0 60px rgba(255,255,255,0.15);
    }
    #s3-btn:hover { box-shadow: 0 0 40px rgba(255,255,255,0.7), 0 0 80px rgba(255,255,255,0.3); transform: scale(1.03); }
    #s3-btn:active { transform: scale(0.97); }
    #s3-btn::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.4) 50%, transparent 65%);
      transform: translateX(-100%); transition: transform 0.5s ease;
    }
    #s3-btn:hover::after { transform: translateX(100%); }

    #game-overlay a:focus-visible,
    #game-overlay button:focus-visible {
      outline: 2px solid #A8F0FF; outline-offset: 4px;
    }

    @media (prefers-reduced-motion: reduce) {
      #game-overlay *, #game-overlay *::before, #game-overlay *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
      .brand-logo { animation: none !important; }
      #diamond-banner span { animation: none !important; }
    }