/* ════════════════════════════════════════════════════════════
       NEON CITY OVERHAUL — responsive, hover polish & accessibility
       ════════════════════════════════════════════════════════════ */

    /* Keyboard focus — luminous ring, visible on dark surfaces */
    :focus-visible {
      outline: 3px solid var(--cyan);
      outline-offset: 2px;
      border-radius: 6px;
    }

    /* Desktop / tablet: cap readable overlay content & center it.
       The game scene stays full-bleed (canvas sizes to the viewport). */
    .work-wrap,
    .reports-wrap {
      max-width: 640px;
      margin-inline: auto;
      width: 100%;
    }

    .chat-interface,
    .menu-list,
    .menu-head,
    #goal-slot {
      max-width: 680px;
      margin-inline: auto;
      width: 100%;
    }

    .drive-body {
      max-width: 560px;
      margin-inline: auto;
      width: 100%;
    }

    @media (min-width: 720px) {
      .overlay {
        justify-content: center;
      }

      .sheet {
        max-width: 560px;
        border-radius: 28px 28px 0 0;
      }

      .top-nav-bar {
        padding: 5px;
      }

      .top-nav-btn {
        font-size: 14px;
        padding: 7px 18px;
      }
    }

    /* Pointer-capable devices: gentle hover lift on primary actions.
       Transform/opacity only — GPU-accelerated, no layout thrash. */
    @media (hover: hover) and (pointer: fine) {

      .actbtn,
      .auth-main-btn,
      .auth-submit-btn,
      .levelup-continue-btn,
      #intro #play {
        transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
      }

      .actbtn:hover,
      .auth-main-btn:hover,
      .auth-submit-btn:hover,
      .levelup-continue-btn:hover,
      #intro #play:hover {
        transform: translateY(-2px);
        filter: brightness(1.06);
      }

      .nav-arrow-btn {
        transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
      }

      .nav-arrow-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 0 #2274a5, 0 8px 22px rgba(0, 0, 0, .3);
      }

      .buybtn {
        transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
      }

      .buybtn:hover {
        transform: translateY(-1px);
        filter: brightness(1.08);
      }

      .menu-card,
      .work-job-card,
      .tx-row {
        transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
      }

      .menu-card:hover,
      .tx-row:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm), 0 0 0 1px var(--border-strong);
      }

      .edu-opt:not(:disabled):hover {
        border-color: var(--violet);
        background: var(--surface-2);
      }


      .closeb:hover {
        background: rgba(255, 255, 255, .4) !important;
      }
    }

    /* Coin pulse — subtle arcade energy on the primary CTA */
    #enter-now.show {
      animation: enterGlow 2.4s var(--ease-out) infinite;
    }

    @keyframes enterGlow {

      0%,
      100% {
        box-shadow: 0 5px 0 #2e7a3c, 0 8px 24px rgba(0, 0, 0, .28);
      }

      50% {
        box-shadow: 0 5px 0 #2e7a3c, 0 8px 24px rgba(0, 0, 0, .28), 0 0 26px rgba(70, 214, 126, .55);
      }
    }

    @keyframes shopBgPop {
      0% {
        opacity: 0;
        transform: scale(.96);
      }

      100% {
        opacity: 1;
        transform: scale(1);
      }
    }

    /* Very small phones — keep stat labels legible */
    @media (max-width: 360px) {
      .stat .lab {
        font-size: 10.5px;
      }

      .coinbox {
        font-size: 16px;
        padding: 6px 11px;
      }
    }

    /* REDUCED MOTION — respect user preference */
    @media (prefers-reduced-motion: reduce) {

      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    /* ── CARTOON ANIMATIONS ── */
    @keyframes mgPopIn {
      0% {
        transform: scale(.8) translateY(24px);
        opacity: 0;
      }

      70% {
        transform: scale(1.04) translateY(-3px);
        opacity: 1;
      }

      100% {
        transform: scale(1) translateY(0);
        opacity: 1;
      }
    }

    @keyframes shopBgPop {
      0% {
        opacity: 0;
        transform: scale(.96);
      }

      100% {
        opacity: 1;
        transform: scale(1);
      }
    }