html {
      background: #000;
      color-scheme: dark;
    }

    html,
    body {
      height: 100%;
    }

    /* ✅ iOS “site shifted right” fix: prevent tiny horizontal overflow */
    html,
    body {
      width: 100%;
      overflow-x: hidden;
    }

    /* make sizing predictable everywhere */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      background: #000;
      color: #fff;
    }

    /* ✅ Make the HTML hidden attribute actually win */
    .modal-overlay[hidden] {
      display: none !important;
    }

    /* ✅ Mobile: Parkle ignores the ticker offset completely */
    @media (max-width: 899px) {
      :root {
        --ticker-offset: 0px;
      }

      /* seatbelt */
      body {
        padding-top: 0 !important;
      }
    }

    [hidden] {
      display: none !important;
    }

    /* ---------- Topbar stats button ---------- */
    .top-icon-btn {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      border: 2px solid rgba(255, 255, 255, 0.22);
      background: rgba(0, 0, 0, 0.25);
      display: grid;
      place-items: center;
      cursor: pointer;
      padding: 0;
      opacity: 0.95;
    }

    .top-icon-btn:active {
      transform: translateY(1px);
    }

    .stats-glyph {
      font-size: 18px;
    }

    .stats-icon {
      display: block;
    }

    /* ✅ Report Card icon button = NO pill, NO border, NO background */
    /* ✅ Icon buttons in the topbar (hamburger, hint, stats, help) */
    .topbar .stats-btn {
      all: unset;
      cursor: pointer;

      width: clamp(26px, 7.5vw, 44px);
      height: clamp(26px, 7.5vw, 44px);

      display: grid;
      place-items: center;

      -webkit-tap-highlight-color: transparent;
      line-height: 0;
      /* 🔥 fixes inline svg baseline drift */
    }


    /* If your global CSS applies outlines/shadows on focus, keep it clean */
    .topbar .stats-btn:focus {
      outline: none;
    }

    .topbar .stats-btn:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28);
      border-radius: 12px;
      /* optional; remove if you want zero focus styling */
    }

    /* Icon image sizing */
    .topbar .stats-btn img {
      width: 42px;
      /* tweak */
      height: 42px;
      display: block;
    }

    /* Help icon slightly smaller than report card */
    .topbar .help-btn img {
      transform: scale(0.75);
    }

    .topbar .hint-btn img {
      transform: scale(1.25);
    }

    .topbar .report-card-btn img {
      transform: scale(0.75);
    }

    /* ✅ Mobile hamburger color = Park Professor yellow */
    .mobile-nav-btn {
      color: var(--pp-yellow);
    }
/* Desktop Parkle logo (hidden by default) */
.parkle-desktop-logo{
  display: none;
  height: 28px;
  width: auto;
}
@media (min-width: 900px){
  /* Hide hamburger on desktop */
  .menu-btn{
    display: none !important;
  }

  /* Show Parkle icon instead */
  .parkle-desktop-logo{
    display: block;
  }
}

    /* =========================================================
   MOBILE NAV OVERLAY (match other pages)
   ========================================================= */

    .mobile-nav-overlay {
      position: fixed;
      inset: 0;
      z-index: 99998;

      /* ✅ lighter dim behind (more transparent) */
      background: rgba(0, 0, 0, 0.25);
      backdrop-filter: blur(5px);

      /* ✅ place the card slightly below topbar */
      display: none;
      align-items: flex-start;
      justify-content: center;
      padding:
        calc(env(safe-area-inset-top) + 64px) 14px calc(env(safe-area-inset-bottom) + 14px);
    }

    .mobile-nav-overlay.is-open {
      display: flex;
    }

    .mobile-nav-card {
      width: max-content;
      /* 🔑 key change */
      min-width: 220px;
      /* keeps it from getting too small */
      max-width: 90vw;
      /* safety on tiny phones */


      /* ✅ anchor toward left instead of centered */
      margin-left: 8px;
      margin-right: auto;

      border-radius: 18px;
      overflow: hidden;

      border: 3px solid rgba(255, 255, 255, 0.88);
      background: rgba(0, 0, 0, 0.50);
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    }


    .mobile-nav-links {
      padding: 12px 14px 14px;
      gap: 15px;
    }

    .mobile-nav-links a {
      display: block;
      padding: 10px 12px;
      border-radius: 10px;
      color: var(--fg);
      text-decoration: none;
      font-family: "League Spartan", system-ui, -apple-system, sans-serif;
      font-weight: 800;
      letter-spacing: .2px;
      transition: color .12s ease, text-shadow .12s ease, filter .12s ease;

      white-space: nowrap;

    }




    .mobile-nav-links a:active {
      transform: translateY(1px);
    }

    @media (min-width: 900px) {
      .mobile-nav-overlay {
        display: none !important;
      }
    }

    /* ---------- Modal (overlay scrolls, modal grows) ---------- */
    .modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 99999;

      /* ✅ overlay becomes the scroller */
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;

      /* ✅ keep the same positioning intent */
      display: grid;
      place-items: start center;

      /* ✅ keep your safe-area padding, but add a little bottom breathing room */
      padding: calc(env(safe-area-inset-top) + 18px) 14px calc(env(safe-area-inset-bottom) + 18px);

      background: rgba(0, 0, 0, 0.62);
      backdrop-filter: blur(6px);
    }


    .modal-card {
      width: min(720px, 94vw);
      background: rgba(0, 0, 0, 0.92);
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 18px;
      padding: 18px 16px 16px;
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.10),
        0 18px 60px rgba(0, 0, 0, 0.70);
      font-family: "League Spartan", system-ui, -apple-system, sans-serif;
    }

    .modal-close {
      position: absolute;
      top: 12px;
      right: 12px;
      /* ✅ move to right */
      width: 35px;
      /* ✅ slightly bigger */
      height: 35px;
      aspect-ratio: 1 / 1;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.25);
      background: rgba(255, 255, 255, 0.14);
      color: rgba(255, 255, 255, 0.95);
      cursor: pointer;

      font-size: 25px;
      /* ✅ more substantial X */
      font-weight: 700;
      line-height: 1;

      display: grid;
      place-items: center;
    }

    /* 🔥 Force ALL modal close buttons to be true circles (iOS-proof) */
 .modal-overlay .modal-card .modal-close{
  /* ✅ Big, reliable click target */
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;

  /* ✅ Keep the visible circle smaller */
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;

  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;

  -webkit-appearance: none !important;
  appearance: none !important;

  line-height: 1 !important;

  /* ✅ Make sure nothing sits on top of it */
  position: absolute;
  z-index: 10;
  pointer-events: auto;
}

/* ✅ Draw the actual circle inside the 44x44 hitbox */
.modal-overlay .modal-card .modal-close::after{
  content: "";
  position: absolute;
  inset: 7px; /* 44 - 14 = 30px visual circle */
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.14);
}

/* ✅ Keep the X above the circle */
.modal-overlay .modal-card .modal-close{
  color: rgba(255,255,255,0.95);
  font-size: 25px;
  font-weight: 700;
}


    /* Kill the weird iOS focus “oval” ring */
    .modal-overlay .modal-card .modal-close:focus {
      outline: none !important;
      box-shadow: none !important;
    }

    /* Keep an accessible focus style, but circular */
    .modal-overlay .modal-card .modal-close:focus-visible {
      outline: none !important;
      box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35) !important;
      border-radius: 999px !important;
    }

    .modal-close:active {
      transform: scale(0.96);
    }

    @media (hover:hover) {
      .modal-close:hover {
        background: rgba(255, 255, 255, 0.22);
      }
    }

    .modal-card {
      position: relative;
    }

    .modal-title {
      margin: 6px 0 12px;
      font-weight: 800;
      letter-spacing: 0.08em;
      font-size: 24px;
      /* ✅ smaller */
      text-align: center;
      /* ✅ centered */
      text-transform: uppercase;
    }

    .today-grade-row {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 12px;
      margin: 6px 2px 12px;
    }

    .today-grade-label {
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      opacity: 0.82;
    }

    .today-grade {
      min-width: 54px;
      height: 34px;
      padding: 0 12px;
      border-radius: 12px;
      display: inline-grid;
      place-items: center;
      font-weight: 900;
      letter-spacing: 0.06em;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: rgba(255, 255, 255, 0.08);
    }

    /* pulsing glow (uses --pulse color) */
    .today-grade.is-pulsing {
      animation: ppPulseGlow 1.35s ease-in-out infinite;
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--pulse) 35%, transparent);
    }

    @keyframes ppPulseGlow {

      0%,
      100% {
        box-shadow:
          0 0 0 2px color-mix(in srgb, var(--pulse) 22%, transparent),
          0 0 10px color-mix(in srgb, var(--pulse) 18%, transparent);
        transform: translateZ(0) scale(1);
      }

      50% {
        box-shadow:
          0 0 0 2px color-mix(in srgb, var(--pulse) 40%, transparent),
          0 0 18px color-mix(in srgb, var(--pulse) 30%, transparent),
          0 0 28px color-mix(in srgb, var(--pulse) 18%, transparent);
        transform: translateZ(0) scale(1.02);
      }
    }


    /* ✅ keep 4 stats on one line like Wordle */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      padding-bottom: 10px;
    }

    .stat {
      text-align: center;
    }

    .stat-num {
      font-size: 26px;
      /* ✅ shrink numbers slightly */
      font-weight: 500;
      line-height: 1;
    }

    .stat-label {
      margin-top: 4px;
      font-size: 14px;
      /* ✅ smaller labels */
      opacity: 0.85;
      line-height: 1.05;
    }

    .modal-divider {
      height: 2.5px;
      background: rgba(255, 255, 255, 0.45);
      margin: 10px 0 14px;
    }

    .modal-subtitle {
      margin: 0 0 10px;
      font-size: 18px;
      /* ✅ smaller */
      font-weight: 900;
      letter-spacing: 0.07em;
      text-align: center;
      /* ✅ centered */
      text-transform: uppercase;
    }

    /* ---------- Grade distribution rows ---------- */
    .dist-list {
      display: grid;
      gap: 6px;
    }

    .dist-row {
      display: grid;
      grid-template-columns: 52px 1fr 42px;
      align-items: center;
      gap: 8px;
    }

    .grade-pill {
      height: 30px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      font-weight: 900;
      letter-spacing: 0.04em;
      border: 1px solid rgba(255, 255, 255, 0.16);
      background: rgba(255, 255, 255, 0.08);
    }

    /* bar */
    .dist-bar-wrap {
      height: 22px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.10);
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.10);
    }

    .dist-bar {
      height: 100%;
      width: 0%;
      transition: width 520ms cubic-bezier(.2, .9, .2, 1);
      border-right: 1px solid rgba(0, 0, 0, 0.25);
    }

    .dist-count {
      text-align: right;
      font-weight: 900;
      opacity: 0.9;
    }

    /* ✅ a little breathing room like Wordle */
    .dist-list {
      padding: 2px 6px;
    }

    /* ✅ Brand grade colors */
    .dist-bar--A {
      background-color: #0AE567 !important;
      box-shadow: 0 0 14px rgba(10, 229, 103, 0.25);
    }

    .dist-bar--B {
      background-color: #C3FA4E !important;
      box-shadow: 0 0 14px rgba(195, 250, 78, 0.25);
    }

    .dist-bar--C {
      background-color: #F5DB2D !important;
      box-shadow: 0 0 14px rgba(245, 219, 45, 0.25);
    }

    .dist-bar--D {
      background-color: #EC720F !important;
      box-shadow: 0 0 14px rgba(236, 114, 15, 0.25);
    }

    .dist-bar--F {
      background-color: #CE271C !important;
      box-shadow: 0 0 14px rgba(206, 39, 28, 0.25);
    }

    /* highlight the grade for today's result */
    .dist-row.is-today .grade-pill {
      background: color-mix(in srgb, var(--pulse) 22%, rgba(255, 255, 255, 0.08));
      border-color: color-mix(in srgb, var(--pulse) 55%, rgba(255, 255, 255, 0.16));
      box-shadow:
        0 0 0 2px color-mix(in srgb, var(--pulse) 20%, transparent),
        0 0 16px color-mix(in srgb, var(--pulse) 18%, transparent);
    }

    /* pulse both the pill and the bar */
    .dist-row.is-today .grade-pill,
    .dist-row.is-today .dist-bar {
      animation: distPulse 1.35s ease-in-out infinite;
    }

    @keyframes distPulse {

      0%,
      100% {
        filter: drop-shadow(0 0 0px transparent);
        box-shadow:
          0 0 0 2px color-mix(in srgb, var(--pulse) 18%, transparent),
          0 0 12px color-mix(in srgb, var(--pulse) 14%, transparent);
        transform: translateZ(0) scale(1);
      }

      50% {
        filter: drop-shadow(0 0 10px color-mix(in srgb, var(--pulse) 22%, transparent));
        box-shadow:
          0 0 0 2px color-mix(in srgb, var(--pulse) 34%, transparent),
          0 0 18px color-mix(in srgb, var(--pulse) 26%, transparent),
          0 0 28px color-mix(in srgb, var(--pulse) 16%, transparent);
        transform: translateZ(0) scale(1.02);
      }
    }

    /* accessibility: respect reduced motion */
    @media (prefers-reduced-motion: reduce) {

      .dist-row.is-today .grade-pill,
      .dist-row.is-today .dist-bar {
        animation: none !important;
      }
    }


    /* Today grade pill */
    .today-grade {
      display: inline-grid;
      place-items: center;
      padding: 8px 12px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: rgba(255, 255, 255, 0.08);
      font-weight: 900;
      letter-spacing: .06em;
    }

    /* pulsing glow */
    .today-grade.is-pulsing {
      animation: ppPulseGlow 1.35s ease-in-out infinite;
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--pulse) 35%, transparent);
    }

    @keyframes ppPulseGlow {

      0%,
      100% {
        box-shadow:
          0 0 0 2px color-mix(in srgb, var(--pulse) 22%, transparent),
          0 0 10px color-mix(in srgb, var(--pulse) 18%, transparent);
        transform: translateZ(0) scale(1);
      }

      50% {
        box-shadow:
          0 0 0 2px color-mix(in srgb, var(--pulse) 40%, transparent),
          0 0 18px color-mix(in srgb, var(--pulse) 30%, transparent),
          0 0 28px color-mix(in srgb, var(--pulse) 18%, transparent);
        transform: translateZ(0) scale(1.02);
      }
    }


    /* Mobile: stack stats grid nicer */
    @media (max-width: 360px) {
      .stat-num {
        font-size: 26px;
      }

      .stat-label {
        font-size: 13px;
      }
    }

    /* Denser distribution block without resizing pills/bars */
    .dist-list.is-compact {
      gap: 6px;
      padding: 2px 6px;
    }

    .dist-list.is-compact .dist-row {
      gap: 8px;
    }

    /* =========================================================
   TOAST
   ========================================================= */

    /* Base toast */
    .pp-toast {
      position: absolute;
      left: 50%;
      top: 42%;
      transform: translate(-50%, -50%) scale(0.92);
      z-index: 50;
      pointer-events: none;

      /* layout */
      display: inline-flex;
      align-items: center;
      flex-wrap: nowrap;
      gap: clamp(8px, 1.2vw, 10px);

      /* sizing (phone-first) */
      max-width: min(92vw, 520px);
      font-size: clamp(14px, 3.6vw, 18px);
      padding: clamp(8px, 1.4vw, 12px) clamp(10px, 1.8vw, 16px);
      border-radius: clamp(10px, 1.4vw, 14px);

      /* single-line behavior */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      /* look */
      background: rgba(255, 255, 255, 0.96);
      color: rgba(0, 0, 0, 0.92);
      border: 1.5px solid rgba(0, 0, 0, 0.9);
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);

      /* typography */
      font-family: "League Spartan", system-ui, -apple-system, sans-serif;
      font-weight: 700;
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;

      /* animation */
      opacity: 0;
      transition:
        transform 240ms cubic-bezier(.2, .9, .2, 1),
        opacity 160ms ease;
      will-change: transform, opacity;
    }

    /* Show / Hide */
    .pp-toast.is-showing {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    .pp-toast.is-hiding {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0);
    }

    /* Badge */
    .pp-toast .toast-badge {
      width: clamp(24px, 3.2vw, 30px);
      height: clamp(24px, 3.2vw, 30px);
      font-size: clamp(11px, 1.4vw, 13px);

      border: 1.5px solid #000;
      border-radius: 999px;

      display: grid;
      place-items: center;

      font-weight: 800;
      line-height: 1;

      color: #000;
      background: var(--pulse);
      flex: 0 0 auto;
    }

    /* Text */
    .pp-toast .toast-text {
      font-size: 1em;
      /* inherits toast size */
      min-width: 0;
      /* required for ellipsis inside flex */
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Big phones (Plus/Max-ish) */
    @media (min-width: 430px) and (max-width: 899px) {
      .pp-toast {
        font-size: clamp(15px, 2.2vw, 20px);
        padding: clamp(10px, 1.0vw, 14px) clamp(12px, 1.4vw, 18px);
      }
    }

    /* iPad / tablet */
    /* iPad / tablet */
    @media (min-width: 768px) and (max-width: 899px) {
      .pp-toast {
        font-size: clamp(20px, 2.0vw, 28px);
        /* ✅ bigger */
        padding: clamp(14px, 1.2vw, 18px) clamp(18px, 1.6vw, 28px);
        /* ✅ roomier */
        border-radius: clamp(14px, 1.1vw, 20px);
        gap: clamp(12px, 1.2vw, 16px);
        max-width: min(70vw, 720px);
        /* ✅ less cramped */
      }

      .pp-toast .toast-badge {
        width: clamp(36px, 2.6vw, 46px);
        /* ✅ bigger badge */
        height: clamp(36px, 2.6vw, 46px);
        font-size: clamp(15px, 1.4vw, 18px);
        border-width: 2px;
        /* ✅ slightly bolder ring */
      }
    }
/* Multiline toast mode (loss message) */
.pp-toast.is-multiline{
  white-space: normal;     /* override nowrap */
  overflow: visible;       /* no clipping */
  text-overflow: clip;
  align-items: flex-start;
}

.pp-toast.is-multiline .toast-text{
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.15;
}

    /* ✅ Stats modal “congrats line” (only when auto-opened) */
    .modal-congrats {
      margin: 6px 0 14px;
      text-align: center;

      font-family: "League Spartan", system-ui, -apple-system, sans-serif;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;

      /* ✅ bigger, responsive */
      font-size: clamp(32px, 3.6vw, 48px);

      opacity: 0.96;

      /* ✅ glow in grade color */
      color: #fff;
      /* 🔥 STRONGER, LAYERED CHALK GLOW */
      text-shadow:
        0 0 4px rgba(255, 255, 255, 0.85),
        /* chalk core */
        0 0 10px color-mix(in srgb, var(--pulse) 55%, transparent),
        0 0 22px color-mix(in srgb, var(--pulse) 45%, transparent),
        0 0 40px color-mix(in srgb, var(--pulse) 30%, transparent),
        0 0 64px color-mix(in srgb, var(--pulse) 18%, transparent);

      animation: congrats-in 260ms ease-out both;
    }
@media (max-height: 740px) {
  .modal-congrats{
    font-size: clamp(24px, 4.2vw, 34px);
    margin: 4px 0 10px;
  }
}


    /* ---------------------------------------------------------
     1) MOBILE-FIRST: “Wordle-style” full-screen app
     --------------------------------------------------------- */

    :root {
      /* A little bigger by default, still constrained by height */
      --tile: clamp(46px, min(13.4vw, 8.4svh), 86px);
      --gap: clamp(6px, 1.2vw, 12px);

      --chalk-bg: url("/images/parkle-chalk-bg.png");
      --frame-border: rgba(255, 255, 255, 0.90);

      --divider: rgba(255, 255, 255, 0.18);

      /* ✅ NEW: tile scaling */
      --tile-scale: 1;
      --tile-effective: calc(var(--tile) * var(--tile-scale));

      /* ✅ Tile letter tuning defaults (baseline = Max/Plus)
   Use multipliers so the offset scales with tile size */
      --tile-letter-x-mult: 0.008;
      /* → right (0.8% of tile) */
      --tile-letter-y-mult: 0.045;
      /* ↓ down  (4.5% of tile) */

      --tile-font-mult: 0.32;
      --tile-font-min: 13px;
      --tile-font-max: 32px;

      --tile-letter-spacing: 0.055em;

    }

    :root {
      /* Default (normal) palette */
      --pp-green: #0AE567;
      --pp-yellowgreen: #C3FA4E;
      --pp-yellow: #F5DB2D;
      --pp-orange: #EC720F;
      --pp-red: #CE271C;
      --pp-gray: #8B8F8D; 
      --pp-blue: #3FA6F6;

      /* ✅ Contrast system (normal defaults) */
      --tile-fill-correct: url("/images/mickey-fill-green.svg");
      --tile-fill-present: url("/images/mickey-fill-yellow.svg");
      --tile-fill-absent: url("/images/mickey-fill-gray.svg");
      --tile-fill-neutral: url("/images/mickey-fill-neutral.svg");

      --key-fill-correct: var(--pp-green);
      --key-fill-present: var(--pp-yellow);
      --key-fill-absent: var(--pp-gray);

      --kb-cushion: 18px;
      /* default space between last row and keyboard */

      /* Letter colors */
      --letter-on-dark: rgba(255, 255, 255, 0.96);
      /* neutral/absent */
      --letter-on-bright: rgba(255, 255, 255, 0.96);
      /* correct/present in normal mode */
    }

    /* ✅ High-contrast / color-blind mode (blue + orange, black letters) */
 body[data-contrast="high"] {
  --tile-fill-correct: url("/images/mickey-fill-blue.svg");
  --tile-fill-present: url("/images/mickey-fill-orange.svg");

  --key-fill-correct: #2F80ED; /* blue */
  --key-fill-present: #F2994A; /* orange */

  --letter-on-bright: rgba(0, 0, 0, 0.92);

  /* ✅ NEW: glow colors match the high-contrast palette */
  --tile-glow-correct: rgba(47, 128, 237, 0.55);  /* blue glow */
  --tile-glow-present: rgba(242, 153, 74, 0.55);  /* orange glow */
}


    /* Hide the normal Park Professor chrome on mobile */
    .daily-snapshot-ticker,
    .pp-nav,
    .site-header,
    .site-footer {
      display: none;
    }

    /* Full-screen stage */
    :root {
      --vvh: 100svh;
    }

    /* fallback */

    .parkle-stage {
      height: var(--vvh);
      width: 100%;

      background-image: var(--chalk-bg);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      position: relative;
      overflow: hidden;
    }

    /* iOS Safari safety: if viewport math shifts, don't clip the keyboard */
    @supports (-webkit-touch-callout: none) {
      .parkle-stage {
        overflow-y: auto;
      }
    }

    /* Darken chalk slightly for readability */
    .parkle-stage::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.05);
      pointer-events: none;
    }

    /* App layout: top logo row, middle board, bottom keyboard */
    .parkle-app {
      position: relative;
      z-index: 1;
      height: 100%;
      display: flex;
      flex-direction: column;

      /* Slightly tighter top so everything shifts up */
      padding:
        calc(env(safe-area-inset-top) + 8px) 12px calc(env(safe-area-inset-bottom) + 10px);

      box-sizing: border-box;
    }

    /* TOP BAR */
    .topbar {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      gap: 10px;

      /* Wordle-esque divider line */
      padding-bottom: 12px;
      margin-bottom: 12px;
      border-bottom: 1.5px solid rgba(255, 255, 255, 0.92);

    }

    /* Left-side icon cluster (Hamburger + Hint) */
    .topbar .top-left {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      justify-self: start;
    }

    /* Right-side icon cluster (Report Card + Help) */
    .topbar .top-actions {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      justify-self: end;
    }

    .top-slot {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      border: 2px solid rgba(255, 255, 255, 0.22);
      background: rgba(0, 0, 0, 0.25);
      opacity: 0.9;
    }

    .parkle-logo {
      display: grid;
      place-items: center;
    }

    /* ~50% bigger */
    .parkle-logo img {
      height: clamp(46px, 8.2svh, 92px);
      max-width: min(420px, 86vw);
      width: auto;
      display: block;
    }
/* =========================================================
   DESKTOP: hide hamburger + let left items shift over
   ========================================================= */

/* default: hide the desktop logo unless we’re on desktop */
.parkle-desktop-logo{
  display: none;
}

@media (min-width: 900px){
  /* ✅ remove the hamburger from layout entirely */
  .topbar .mobile-nav-btn{
    display: none !important;
  }

  /* ✅ show the parkle icon on desktop */
  .parkle-desktop-logo{
    display: block;
    height: 28px;          /* tweak to taste */
    width: auto;
    margin-right: 2px;     /* tweak spacing */
  }

  /* (optional) if you want to tighten spacing on desktop */
  .topbar .top-left{
    gap: 10px;
  }
}
@media (min-width: 900px){
  #hintIcon{
    width: 32px;   /* tweak to taste */
    height: auto;
  }
}

    /* BOARD AREA */
    .board-wrap {
      flex: 1;
      display: grid;
      place-items: start center;
      min-height: 0;
      padding-bottom: calc(var(--kb-cushion) + env(safe-area-inset-bottom, 0px));
    }

    .board {
      display: grid;
      grid-template-rows: repeat(6, 1fr);
      column-gap: var(--gap);
      row-gap: calc(var(--gap) - 2px);

      width: calc((var(--tile-effective) * 5) + (var(--gap) * 4));
      max-width: 100%;
    }

  @media (max-height: 850px) {
    .board{
      row-gap: calc(var(--gap) * 0.75);
      }
    }
    .row {
      display: grid;
      grid-template-columns: repeat(5, var(--tile-effective));
      gap: var(--gap);
      justify-content: center;
    }



    /* =========================
       Intro polish: board + keyboard reveal
       (no gameplay logic changes)
       ========================= */

    /* Board + keyboard fade/slide in once JS is ready */
    .board,
    .keyboard {
      will-change: opacity, transform;
    }

    html:not(.ui-ready) .board {
      opacity: 0;
      transform: translateY(8px);
    }

    html.ui-ready .board {
      opacity: 1;
      transform: translateY(0);
      transition: opacity 220ms ease, transform 260ms ease;
    }

    /* keyboard is already hidden until js-ready; we add motion polish */
    html:not(.ui-ready) .keyboard {
      opacity: 0;
      transform: translateY(10px);
    }

    html.ui-ready .keyboard {
      opacity: 1;
      transform: translateY(0);
      transition: opacity 160ms ease, transform 220ms ease;
    }

    @keyframes tileEnter {
      from {
        opacity: 0;
        transform: translateY(10px) scale(0.985);
      }

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

    /* Tile cascade (we only add .is-enter on first paint) */
    html.ui-ready .tile.is-enter {
      animation: tileEnter 420ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
      animation-delay: var(--enter-delay, 0ms);
    }

    /* Accessibility: respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
      html:not(.ui-ready) .board,
      html:not(.ui-ready) .keyboard {
        opacity: 1;
        transform: none;
      }

      html.ui-ready .board,
      html.ui-ready .keyboard {
        transition: none;
      }

      html.ui-ready .tile.is-enter {
        animation: none;
      }
    }

    /* --- invalid guess shake --- */
    @keyframes parkle-shake {

      0%,
      100% {
        transform: translateX(0);
      }

      20% {
        transform: translateX(-6px);
      }

      40% {
        transform: translateX(6px);
      }

      60% {
        transform: translateX(-4px);
      }

      80% {
        transform: translateX(4px);
      }
    }

    .row.shake {
      animation: parkle-shake 220ms ease;
    }

/* =========================
   4-letter mode: hard remove 5th tile
   ========================= */
.board.cols-4 .tile:nth-child(5n) {
  display: none !important;
}

    /* Small phones */
    @media (max-width: 359px) {
      :root {
        --kb-cushion: 16px;
      }
    }

    /* Standard phones */
    @media (min-width: 360px) and (max-width: 389px) {
      :root {
        --kb-cushion: 20px;
      }
    }

    /* iPhone 15 class (390–429) */
    @media (min-width: 390px) and (max-width: 429px) {
      :root {
        --kb-cushion: 26px;
      }
    }

    /* Larger phones */
    @media (min-width: 430px) and (max-width: 499px) {
      :root {
        --kb-cushion: 28px;
      }
    }

    /* Tablets */
    @media (min-width: 768px) {
      :root {
        --kb-cushion: 34px;
      }
    }

    /* ===== Tile fill states (outline stays the same) ===== */
    /* match JS: .correct / .present / .absent (and data-state for clarity) */

    /* =========================
   TILE FLIP SYSTEM (single source of truth)
   ========================= */

    /* tile provides perspective only */
    .tile {
      position: relative;
      width: var(--tile-effective);
      height: var(--tile-effective);
      perspective: 900px;
      perspective-origin: 50% 55%;
    }

    /* inner rotates */
    .tile .tile-inner {
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transition: transform 520ms ease;
    }

    /* flipped state (we KEEP this after reveal) */
    .tile.is-flipped .tile-inner {
      transform: rotateY(180deg);
    }

    .tile .tile-face {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;

      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      pointer-events: none;

      /* Mickey paint: outline + fill */
      background-repeat: no-repeat, no-repeat;
      background-position: center, center;
      background-size: contain, contain;
      background-image:
        url("/images/mickey-outline.svg"),
        url("/images/mickey-fill-neutral.svg");

      /* ✅ REMOVE translate here so Mickey doesn't move */
      /* transform: translate(var(--tile-letter-x), var(--tile-letter-y)); */

      font-family: "League Spartan", system-ui, -apple-system, sans-serif;
      font-weight: 900;
      text-transform: uppercase;

      line-height: 1;
      letter-spacing: var(--tile-letter-spacing);
      color: var(--letter-on-dark);
    }

    /* ✅ back face rotates only */
    .tile .tile-face.tile-back {
      transform: rotateY(180deg);
    }

    .tile .tile-letter {
      display: inline-block;
      transform: translate(calc(var(--tile-effective) * var(--tile-letter-x-mult)),
          calc(var(--tile-effective) * var(--tile-letter-y-mult)));


      font-family: "League Spartan", system-ui, -apple-system, sans-serif;
      font-weight: 900;
      text-transform: uppercase;

      font-size: clamp(var(--tile-font-min),
          calc(var(--tile-effective) * var(--tile-font-mult)),
          var(--tile-font-max));

      line-height: 1;
      letter-spacing: var(--tile-letter-spacing);
      color: var(--letter-on-dark);
    }

    @keyframes tilePop {
      0% {
        transform: scale(1);
      }

      45% {
        transform: scale(1.07);
      }

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

    .tile.pop {
      animation: tilePop 120ms ease-out;
    }

    /* =========================
   Tile Wave on Win
   ========================= */
    @keyframes winWave {
      0% {
        transform: translateY(0);
      }

      35% {
        transform: translateY(-12px);
      }

      70% {
        transform: translateY(2px);
      }

      100% {
        transform: translateY(0);
      }
    }

    .tile.win-wave {
      animation: winWave 320ms ease-in-out both;
    }


    /* =========================
   RESULT STATES (paint BOTH faces the same)
   ========================= */

    .tile.correct .tile-face {
      background-image:
        url("/images/mickey-outline-bright.svg"),
        var(--tile-fill-correct);
    }

    .tile.present .tile-face {
      background-image:
        url("/images/mickey-outline-bright.svg"),
        var(--tile-fill-present);
    }

    .tile.absent .tile-face {
      background-image:
        url("/images/mickey-outline.svg"),
        var(--tile-fill-absent);
    }
    :root {
  --tile-glow-correct: rgba(10, 229, 103, 0.45);   /* green */
  --tile-glow-present: rgba(245, 219, 45, 0.40);  /* yellow */
}


    /* Optional glow (subtle) */
.tile.correct {
  filter: drop-shadow(0 0 12px var(--tile-glow-correct));
}

.tile.present {
  filter: drop-shadow(0 0 12px var(--tile-glow-present));
}


    .tile.absent {
      opacity: 0.75;
      filter: none;
    }


    /* ✅ Letter color rules:
   - dark tiles (neutral/absent): white
   - bright tiles (correct/present): white in normal mode, black in high-contrast mode */
    .tile.correct .tile-letter,
    .tile.present .tile-letter {
      color: var(--letter-on-bright);
    }


    /* keyboard states */
    .key.correct {
      background: color-mix(in srgb, var(--key-fill-correct) 78%, rgba(0, 0, 0, 0.18));
      border-color: rgba(255, 255, 255, 0.40);
      box-shadow: 0 0 14px color-mix(in srgb, var(--key-fill-correct) 70%, transparent);
      color: var(--letter-on-dark);
    }

    .key.present {
      background: color-mix(in srgb, var(--key-fill-present) 78%, rgba(0, 0, 0, 0.18));
      border-color: rgba(255, 255, 255, 0.40);
      box-shadow: 0 0 14px color-mix(in srgb, var(--key-fill-present) 70%, transparent);
      color: var(--letter-on-dark);
    }

    .key.absent {
      background: color-mix(in srgb, var(--key-fill-absent) 75%, rgba(0, 0, 0, 0.22));
      border-color: rgba(255, 255, 255, 0.26);
      box-shadow: 0 0 10px color-mix(in srgb, var(--key-fill-absent) 35%, transparent);
      opacity: 1;
    }

    body[data-contrast="high"] .key.correct,
    body[data-contrast="high"] .key.present {
      color: var(--letter-on-bright);
    }

    .key {
      transition: transform 80ms ease, background-color 90ms ease, box-shadow 90ms ease;
    }

    .key.flash-green {
      background-color: rgba(10, 229, 103, 0.72) !important;
      box-shadow: 0 0 0 2px rgba(10, 229, 103, 0.30), 0 0 10px rgba(10, 229, 103, 0.18);
      color: rgba(0, 0, 0, 0.85) !important;
    }

    .key.flash-lime {
      background-color: rgba(195, 250, 78, 0.72) !important;
      box-shadow: 0 0 0 2px rgba(195, 250, 78, 0.30), 0 0 10px rgba(195, 250, 78, 0.18);
      color: rgba(0, 0, 0, 0.85) !important;
    }

    .key.flash-yellow {
      background-color: rgba(245, 219, 45, 0.72) !important;
      box-shadow: 0 0 0 2px rgba(245, 219, 45, 0.30), 0 0 10px rgba(245, 219, 45, 0.18);
      color: rgba(0, 0, 0, 0.85) !important;
    }

    .key.flash-orange {
      background-color: rgba(236, 114, 15, 0.72) !important;
      box-shadow: 0 0 0 2px rgba(236, 114, 15, 0.30), 0 0 10px rgba(236, 114, 15, 0.18);
      color: rgba(0, 0, 0, 0.90) !important;
    }

    .key.flash-red {
      background-color: rgba(206, 39, 28, 0.72) !important;
      box-shadow: 0 0 0 2px rgba(206, 39, 28, 0.30), 0 0 10px rgba(206, 39, 28, 0.18);
      color: rgba(255, 255, 255, 0.95) !important;
    }

    .key.flash-enter {
      background-color: rgba(10, 229, 103, 0.75) !important;
      box-shadow:
        0 0 0 2px rgba(10, 229, 103, 0.35),
        0 0 12px rgba(10, 229, 103, 0.22);
      color: rgba(0, 0, 0, 0.9) !important;
    }

    .key.flash-delete {
      background-color: rgba(206, 39, 28, 0.75) !important;
      box-shadow:
        0 0 0 2px rgba(206, 39, 28, 0.35),
        0 0 12px rgba(206, 39, 28, 0.22);
      color: rgba(255, 255, 255, 0.95) !important;
    }


    /* =========================
   KEYBOARD (flex-based, Wordle-like)
   Fixes:
   - ENTER can’t collapse + overlap neighbors
   - perfect centering for all glyphs (W, etc.)
   - slightly bigger keys by reducing gaps
   - stays centered and never clips
   ========================= */

    :root {
      --k-gap: clamp(6px, 1.1vw, 10px);
      --k-h: clamp(44px, 7.2vh, 56px);
      --k-font: clamp(14px, 2.7vw, 16px);
    }

    .keyboard {
      width: 100%;
      max-width: 640px;
      margin: 0 auto;
      padding-top: 10px;

      /* Wordle gets close to edges but not flush */
      padding-inline: clamp(6px, 2.4vw, 14px);
      box-sizing: border-box;

      display: grid;
      gap: var(--k-gap);
      background: rgba(0, 0, 0, 0.42);
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 18px;
      padding: 12px 10px 12px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    }

    /* Seatbelt: postgame is NEVER visible unless done mode */
    .keyboard #postGame {
      display: none;
    }

    html.is-done .keyboard #postGame {
      display: grid;
    }

    /* Hide keyboard region until JS decides state (prevents refresh flash) */
    html:not(.js-ready) .keyboard {
      opacity: 0;
      transform: translateY(10px);
    }

    /* Keys wrapper: normal mode shows keys */
    .keyboard .keys {
      display: grid;
      gap: var(--k-gap);
    }

    /* Postgame fills the keyboard shell exactly */
    .keyboard .postgame {
      position: absolute;
      inset: 0;
      margin: 0;
      width: 100%;
      height: 100%;

      /* let the keyboard shell provide border/background */
      border: 0;
      background: none;
      box-shadow: none;

      place-items: center;
      padding: 8px;
      text-align: center;
    }

    .keyboard {
      position: relative;
      /* needed for the absolute postgame */
    }

    /* Make the inner content scale nicely */
    .keyboard .postgame-inner {
      width: min(520px, 100%);
      display: grid;
      gap: 10px;
      justify-items: center;
    }

    /* Done mode: hide keys but keep keyboard shell height identical */
    html.is-done .keyboard .keys {
      visibility: hidden;
      /* IMPORTANT: keeps height, prevents board shift */
      pointer-events: none;
    }

    html.is-done .keyboard .postgame {
      display: grid;
    }

    @media (max-width: 380px) {

      .keyboard .postgame-inner {
        gap: 8px;
      }

      .keyboard .postgame-title {
        font-size: 16px;
        letter-spacing: 0.05em;
      }

      .keyboard .postgame-sub {
        font-size: 14px;
      }

      .keyboard .postgame-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }

      .keyboard .postgame-btn {
        padding: 8px 8px;
        /* smaller tap target but still comfy */
        font-size: 12px;
        border-radius: 12px;
      }
    }

    .kb-row {
      display: flex;
      justify-content: center;
      gap: var(--k-gap);
      width: 100%;
      box-sizing: border-box;
    }

    /* Slight indent like Wordle, but safe on small phones */
    .kb-row.row-2 {
      padding-inline: clamp(6px, 4vw, 22px);
    }

    /* Keys */
    .key {
      flex: 1 1 0;
      min-width: 0;

      height: var(--k-h);
      padding: 0;
      /* IMPORTANT: stops text from drifting */
      border-radius: 14px;
      background: rgba(0, 0, 0, 0.38);
      /* less transparent */
      border: 2px solid rgba(255, 255, 255, 0.26);
      /* a hair clearer */
      color: rgba(255, 255, 255, 0.95);

      display: flex;
      /* IMPORTANT: perfect centering */
      align-items: center;
      justify-content: center;

      font-family: "League Spartan", system-ui, -apple-system, sans-serif;
      font-weight: 900;
      /* bolder letters */
      letter-spacing: .02em;
      font-size: var(--k-font);
      line-height: 1;
      letter-spacing: .03em;

      -webkit-appearance: none;
      appearance: none;
      user-select: none;
      white-space: nowrap;
      /* keeps ENTER on one line */
      overflow: hidden;
      text-overflow: ellipsis;
      text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.45),
        0 0 0.6px rgba(255, 255, 255, 0.25);



      text-rendering: geometricPrecision;
      -webkit-font-smoothing: antialiased;
    }

    /* Prevent double-tap zoom on game controls (pinch-to-zoom still works) */
    .key,
    .tile {
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }

    .key:not(.key-wide) {
      font-size: calc(var(--k-font) * 1.25);
    }

    .key:active {
      transform: translateY(1px);
    }

    /* Row 3: rebalance ENTER vs BACKSPACE */
    .kb-row.row-3 .key:first-child {
      flex: 1.8;
      /* ENTER gets more room */
    }

    .kb-row.row-3 .key:last-child {
      flex: 1.2;
      /* BACKSPACE shrinks ~20% */
    }

    /* ENTER key — slightly smaller label, guaranteed no clipping */
    .kb-row.row-3 .key:first-child {
      font-size: clamp(10px, 2.6vw, 13px);
      letter-spacing: .005em;
    }

    /* Always pin keyboard to bottom of the flex column */
    .keyboard {
      margin-top: auto;
      flex: 0 0 auto;
    }

    /* Extra safety for very small phones (SE) */
    @media (max-width: 360px) {
      .kb-row.row-3 .key:first-child {
        font-size: 8.5px;
        letter-spacing: 0;
      }
    }

    /* On very small widths, reduce letter spacing slightly so glyphs stay centered-looking */
    @media (max-width: 360px) {
      .key {
        letter-spacing: .02em;
      }
    }

    /* Small / short phones: slightly smaller tiles + logo */
    @media (max-height: 700px) {
      :root {
        --tile: clamp(42px, min(12.2vw, 7.6svh), 74px);

      }

      .top-slot {
        width: 40px;
        height: 40px;
      }

      .topbar {
        grid-template-columns: 40px 1fr 40px;
      }

      .parkle-logo img {
        height: clamp(40px, 7.2svh, 78px);
        max-width: min(380px, 84vw);
      }
    }

    /* Small / short phones: slightly smaller tiles + logo */
    @media (max-width: 429px) {
      :root {
        --tile-letter-x-mult: 0.0075;
        --tile-letter-y-mult: 0.059;
        --tile-font-mult: 0.315;
      }
    }

    @media (max-width: 360px) {
      :root {
        --tile-letter-x-mult: 0.0070;
        --tile-letter-y-mult: 0.040;
        --tile-font-mult: 0.305;
        --tile-letter-spacing: 0.050em;
      }

    }


    @media (min-width: 768px) and (max-width: 899px) {
      .topbar .stats-btn img {
        width: 56px;
        height: 56px;
      }
    }

    @media (max-width: 380px) {
      .topbar .stats-btn img {
        width: 32px;
        height: 32px;
      }
    }

    @media (min-width: 900px) {
      .modal-close {
        width: 26px;
        height: 26px;
        font-size: 16px;
        /* was ~25 */
      }

      .topbar .stats-btn img {
        width: 40px;
        height: 40px;
      }

    }

    /* ---------- Postgame Modal ---------- */

    .postgame-title {
      font-weight: 900;
      font-size: 20px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: 2px;
    }

    .postgame-sub {
      font-size: 18px;
      opacity: 0.9;
      margin-bottom: 8px;
    }

    #nextPuzzleCountdown {
      display: inline-block;
      width: 7ch;
      text-align: left;

      font-variant-numeric: tabular-nums;
      font-feature-settings: "tnum";
    }

    /* ✅ Hard-force CTA stack (even if a 2-col rule exists somewhere) */
    .postgame-actions {
      display: grid;
      grid-template-columns: 1fr !important;
      grid-auto-flow: row;
      justify-items: center;
      gap: 8px;
    }

    .postgame-cta-text {
      grid-column: 1 / -1;
    }

    #postgameCtaBtn {
      grid-column: 1 / -1;
      justify-self: center;
    }

    .postgame-btn {
      display: inline-grid;
      place-items: center;
      padding: 12px 10px;
      border-radius: 14px;
      text-decoration: none;
      font-weight: 900;
      letter-spacing: 0.04em;
      border: 2px solid rgba(255, 255, 255, 0.20);
      background: rgba(0, 0, 0, 0.20);
      color: #fff;
    }

    .postgame-btn--primary {
      border-color: rgba(255, 215, 0, 0.45);
      background: rgba(255, 215, 0, 0.14);
    }

    .postgame-cta-text {
        max-width: 42ch;     /* controls line length nicely */
  width: 100%;
  padding-inline: 6px; /* tiny breathing room on mobile */
      text-align: center;
      font-size: 14px;
      /* ⬅️ smaller */
      font-weight: 700;
      line-height: 1.25;
      color: rgba(255, 255, 255, 0.92);
      margin-bottom: 2px;
    }

    @media (max-width: 380px) {
      .postgame-actions {
        grid-template-columns: 1fr;
      }
    }

    /* ---------- Help / How To Play ---------- */
    .modal-body {
      padding: 0 6px 2px;
    }

    .help-lede {
      margin: 0 8px 10px;
      font-size: 16px;
      line-height: 1.35;
      opacity: 0.92;
      text-align: center;
    }

    .help-list {
      list-style: none;
      margin: 0;
      padding: 0 12px 4px;
      display: grid;
      gap: 10px;
      font-size: 16px;
      line-height: 1.2;
    }

    .help-list li {
      display: grid;
      grid-template-columns: 18px 1fr;
      gap: 10px;
      align-items: center;
    }

    .help-dot {
      width: 14px;
      height: 14px;
      border-radius: 999px;
      /* ✅ circle */
      border: 1px solid rgba(255, 255, 255, 0.25);
      background: rgba(255, 255, 255, 0.12);
    }

    .help-dot.correct {
      background: var(--key-fill-correct);
    }

    .help-dot.present {
      background: var(--key-fill-present);
    }

    .help-dot.absent {
      background: var(--key-fill-absent);
    }

    /* ---------- Help / How To Play ---------- */
    .howto-body {
      display: grid;
      gap: 12px;
      font-size: 15px;
      line-height: 1.25;
      opacity: 0.96;
    }

    .howto-lede {
      margin: 0;
      font-weight: 800;
      text-align: center;
    }

    .howto-bullets {
      margin: 0;
      padding-left: 18px;
      display: grid;
      gap: 8px;
    }

    .howto-subhead {
      margin: 6px 0 2px;
      font-size: 16px;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
      text-align: left;
      opacity: 0.92;
    }

    .howto-example {
      display: grid;
      gap: 6px;

    }

    .ex-row {
      display: inline-flex;
      gap: 8px;
      align-items: center;
    }

    .ex-tile {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;

      /* Use the same Mickey tile art system */
      background-repeat: no-repeat, no-repeat;
      background-position: center, center;
      background-size: contain, contain;
      background-image:
        url("/images/mickey-outline.svg"),
        url("/images/mickey-fill-neutral.svg");

    }

    .ex-tile.absent {
      background-image:
        url("/images/mickey-outline-bright.svg"),
        var(--tile-fill-absent);
    }

    .ex-tile.present {
      background-image:
        url("/images/mickey-outline-bright.svg"),
        var(--tile-fill-present);
    }

    .ex-tile.correct {
      background-image:
        url("/images/mickey-outline-bright.svg"),
        var(--tile-fill-correct);
    }


    .ex-letter {
      font-family: "League Spartan", system-ui, -apple-system, sans-serif;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--letter-on-dark);
      line-height: 1;
      /* ✅ smaller + slightly lower */
      font-size: 18px;
      /* was 22px */
      transform: translateY(3px);
      /* move down a touch */
    }

    body[data-contrast="high"] .ex-tile.correct .ex-letter,
    body[data-contrast="high"] .ex-tile.present .ex-letter {
      color: var(--letter-on-bright);
    }

    .ex-caption {
      font-size: 14px;
      opacity: 0.88;
    }

    .howto-hint {
      margin-top: 6px;
      font-size: 15px;
      opacity: 0.9;
      text-align: center;
    }

    .hint-lede {
      margin: 0 8px 0;
      font-weight: 800;
      text-align: center;
    }

    /* ---------- Help modal: accessibility toggle ---------- */
    .howto-toggle {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: rgba(255, 255, 255, 0.08);
    }

    .howto-toggle .toggle-label {
      font-weight: 900;
      letter-spacing: .05em;
      text-transform: uppercase;
      font-size: 13px;
      opacity: 0.95;
    }

    .howto-toggle .toggle-sub {
      margin-top: 4px;
      font-size: 13px;
      opacity: 0.85;
      text-transform: none;
      letter-spacing: 0;
      font-weight: 600;
    }

    .howto-toggle input[type="checkbox"] {
      width: 46px;
      height: 28px;
      border-radius: 999px;
      appearance: none;
      -webkit-appearance: none;
      background: rgba(0, 0, 0, 0.35);
      border: 2px solid rgba(255, 255, 255, 0.28);
      position: relative;
      cursor: pointer;
      flex: 0 0 auto;
    }

    .howto-toggle input[type="checkbox"]::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 4px;
      width: 20px;
      height: 20px;
      border-radius: 999px;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.92);
      transition: left 160ms ease;
    }

    .howto-toggle input[type="checkbox"]:checked {
      border-color: rgba(255, 255, 255, 0.45);
      box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
    }

    .howto-toggle input[type="checkbox"]:checked::after {
      left: 20px;
    }

    /* Default: not ready */
    .hint-btn {
      opacity: 0.55;
      pointer-events: none;
    }

    /* Ready state: clickable, but NO animation by default */
    .hint-btn.is-ready {
      opacity: 1;
      pointer-events: auto;
    }

    #showHintBtn:disabled{
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.25);
  transform: none;
}

    /* One-time attention animation */
    @keyframes hintAttention {

      /* --- burst 1: shake-shake-shake --- */
      0% {
        transform: translateX(0);
      }

      4% {
        transform: translateX(-2px) rotate(-1deg);
      }

      8% {
        transform: translateX(2px) rotate(1deg);
      }

      12% {
        transform: translateX(-2px) rotate(-1deg);
      }

      16% {
        transform: translateX(2px) rotate(1deg);
      }

      20% {
        transform: translateX(0);
      }

      /* --- pause --- */
      60% {
        transform: translateX(0);
      }

      /* --- burst 2: shake-shake-shake --- */
      64% {
        transform: translateX(-2px) rotate(-1deg);
      }

      68% {
        transform: translateX(2px) rotate(1deg);
      }

      72% {
        transform: translateX(-2px) rotate(-1deg);
      }

      76% {
        transform: translateX(2px) rotate(1deg);
      }

      80% {
        transform: translateX(0);
      }

      /* settle */
      100% {
        transform: translateX(0);
      }
    }

    .hint-btn.just-ready {
      animation: hintAttention 2.1s ease-in-out 1 both;
    }

    /* Small phones: shrink example tiles a bit */
    @media (max-width: 380px) {
      .ex-tile {
        width: 38px;
        height: 38px;
      }

      .ex-letter {
        font-size: 16px;
        transform: translateY(2px);
      }
    }

    /* Tablets: a touch bigger */
    @media (min-width: 768px) {
      .ex-tile {
        width: 50px;
        height: 50px;
      }

      .ex-letter {
        font-size: 22px;
      }
    }

    /* ✅ allow the overlay itself to scroll on short screens */
    .modal-overlay {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }

    /* ✅ keep modal card within viewport so content can scroll */
    /* ✅ let the card grow; overlay handles scrolling */
    .modal-card {
      max-height: none;
      overflow: visible;
    }

    .modal-card {
      width: min(640px, 100%);
      margin-bottom: 18px;
      /* so you can scroll past the bottom comfortably */
      max-height: none;
      overflow: visible;
    }

    /* iPhone 15 class: keep board from drifting into keyboard space */
    @media (min-width: 390px) and (max-width: 429px) {
      .board-wrap {
        place-items: start center;
        /* was centered; start keeps it higher */
        padding-top: 6px;
      }
    }

    /* 16e / standard phones: make the whole BOARD bigger by raising the base tile clamp */
    @media (min-width: 390px) and (max-width: 429px) {
      :root {
        --tile: clamp(50px, min(14.0vw, 8.6svh), 90px);
      }
    }

    /* Max / Plus phones: slightly bigger board (ONLY phones/tablets) */
    @media (min-width: 430px) and (max-width: 899px) {
      :root {
        --tile: clamp(60px, min(15.8vw, 10.0svh), 112px);
      }
    }

    /* ✅ Mobile (incl. iOS Safari): never clip the keyboard */
    @media (max-width: 899px) {
      .parkle-stage {
        overflow-y: auto;
        /* allow reaching keyboard if Safari mis-measures height */
        -webkit-overflow-scrolling: touch;
      }
    }

    /* Make SVG icons inside stats-btn behave like images */
    .topbar .stats-btn svg {
      width: 42px;
      height: 42px;
      display: block;
    }

    /* match breakpoints */
    @media (min-width: 768px) and (max-width: 899px) {
      .topbar .stats-btn svg {
        width: 56px;
        height: 56px;
      }
    }

    @media (max-width: 380px) {
      .topbar .stats-btn svg {
        width: 32px;
        height: 32px;
      }
    }

    @media (min-width: 900px) {
      .topbar .stats-btn svg {
        width: 40px;
        height: 40px;
      }
    }


    /* ---------------------------------------------------------
   2) DESKTOP: keep your normal site chrome + frame the game
   --------------------------------------------------------- */
    @media (min-width: 900px) {

      :root {
        --gap: 10px;
        --tile: clamp(56px, 7.0vh, 74px);
      }

      /* Show normal Park Professor chrome on desktop */
      .daily-snapshot-ticker,
      .pp-nav,
      .site-header,
      .site-footer {
        display: block;
      }

      /* ✅ DESKTOP ONLY: remove Park Professor header logo + subtitle */
      .site-header .logo,
      .site-header .subtitle {
        display: none !important;
      }

      /* Optional: keep the header from taking extra vertical space */
      .site-header {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
      }

      /* Make header a simple horizontal row */
      .site-header {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
      }

      /* Keep subtitle on the right */
      .site-header .subtitle {
        margin-left: auto !important;
      }

      /* Parkle: nav becomes “in-flow” like the back button */
      .pp-nav {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        z-index: 5000 !important;
      }

      /* Dropdown anchors to the burger and can scroll */
      .pp-nav__menu {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 0 !important;

        max-height: calc(100vh - 160px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
      }

      .parkle-page .site-header .pp-nav {
        transform: translate(-12px, -4px);
        /* left, up — tweak */
      }

      body {
        padding-top: var(--ticker-offset) !important;
      }

      /* ✅ DESKTOP ONLY: restore full-page chalk background */
      body {
        background-image: url("/images/chalk-bg.jpg") !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-attachment: fixed !important;
      }

      /* Desktop shell stays centered */
      .parkle-shell {
        min-height: calc(100vh - var(--ticker-offset));
        display: grid;
        place-items: center;
        padding: 28px 16px 48px;
      }

      /* ✅ LOCKED “PHONE” SIZE */
      .parkle-stage {
        width: 440px !important;
        /* pick your favorite */
        height: 840px !important;
        /* stable height */
        aspect-ratio: auto !important;

        max-height: none !important;
        max-width: none !important;

        /* ✅ chalk frame */
        border: 3px solid rgba(255, 255, 255, 0.92) !important;
        box-shadow:
          0 0 0 1px rgba(255, 255, 255, 0.12),
          /* tiny crisp edge */
          0 0 16px rgba(255, 255, 255, 0.14),
          /* chalk haze */
          0 0 34px rgba(255, 255, 255, 0.08) !important;
        /* softer outer glow */

        border-radius: 26px;
        overflow: hidden;
      }

      /* Inside the phone: make flex layout behave */
      .parkle-app {
        min-height: 0;
        /* allows children to shrink correctly */
        padding: 14px 12px 14px;
        gap: 10px;
        /* consistent spacing between sections */
      }

      .parkle-app {
        height: 100% !important;
      }

      /* Board: do NOT vertically center into keyboard space */
      .board-wrap {
        min-height: 0;
        place-items: start center;
      }

      .board-wrap {
        position: relative;
      }

      .board {
        max-width: 100%;
        overflow: visible;
      }

      /* Keyboard must keep its space (prevents overlap) */
      .keyboard {
        flex: 0 0 auto;
        margin-top: 0;
        padding-top: 8px;
      }

      /* ✅ Chrome-only nudge for tile letter position */
      .is-chrome {
        --tile-letter-x-mult: 0.015;
        /* was 0.008 */
        --tile-letter-y-mult: 0.095;
        /* was 0.045 */
      }

      /* Optional: slightly tighten the divider spacing on desktop */
      .topbar {
        padding-bottom: 10px;
        margin-bottom: 10px;
      }

      .game,
      .game * {
        box-shadow: none !important;
        filter: none !important;

      }

      html,
      body {
        overflow-y: auto !important;
      }


    }

    .pp-toast[hidden],
    .modal-congrats[hidden] {
      display: none !important;
    }

    /* ---------- Share block ---------- */
    .share-wrap {
      padding: 0 10px;
      display: grid;
      gap: 10px;
      padding-bottom: 8px;
    }

    .share-actions {
      display: flex;
      gap: 10px;
      justify-content: center;
    }

    .share-btn {
      border: 2px solid rgba(255, 255, 255, 0.26);
      background: rgba(255, 255, 255, 0.10);
      color: rgba(255, 255, 255, 0.95);
      border-radius: 14px;
      padding: 10px 14px;
      font-family: "League Spartan", system-ui, -apple-system, sans-serif;
      font-weight: 900;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .share-btn:active {
      transform: translateY(1px);
    }

    .share-btn--ghost {
      background: rgba(0, 0, 0, 0.10);
    }

    .share-box {
      margin: 0;
      padding: 12px 12px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.18);
      overflow: auto;
      white-space: pre;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size: 13px;
      line-height: 1.25;
      color: rgba(255, 255, 255, 0.92);
    }

    .share-copied {
      text-align: center;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      opacity: 0.9;
      color: rgba(255, 255, 255, 0.92);
      min-height: 8px;
      visibility: hidden;
    }

    .share-copied.is-visible {
      visibility: visible;
    }

    .share-copied {
      transition: opacity .18s ease;
      opacity: 0;
    }

    .share-copied.is-visible {
      opacity: 1;
    }


    /* ---------------------------------------------------------
   PARKLE ONLY: fix pp-nav dropdown alignment
   --------------------------------------------------------- */
    .parkle-page .pp-nav__menu {
      text-align: left;
      /* undo centering */
    }

    .parkle-page .pp-nav__link {
      text-align: left;
      /* ensure links are left-aligned */
    }

    /* =========================================================
   ROTATE OVERLAY (Park Professor style)
   ========================================================= */

    .rotate-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 99999;
      place-items: center;
      padding: 22px;

      /* Park Professor chalk vibe */
      background: var(--chalk-bg, #0a0a0a);
      background-size: cover;
      background-position: center;

      /* soften it a touch */
      backdrop-filter: blur(0px);
      pointer-events: auto;
    }

    body.rotate-locked .rotate-overlay {
      display: grid;
      /* only show when we explicitly say so */
    }

    .rotate-card {
      width: min(560px, 100%);
      border-radius: 22px;
      overflow: hidden;

      /* chalk frame */
      border: 3px solid rgba(255, 255, 255, 0.85);
      box-shadow: 0 18px 55px rgba(0, 0, 0, 0.55);
      background: rgba(0, 0, 0, 0.55);
    }

    .rotate-head {
      padding: 14px 16px;
      text-align: center;

      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;

      color: var(--yellow, #F5DB2D);
      border-bottom: 1px solid rgba(255, 255, 255, 0.18);
      background: rgba(0, 0, 0, 0.35);
    }

    .rotate-body {
      padding: 18px 18px 20px;
      text-align: center;
    }

    .rotate-text {
      color: rgba(255, 255, 255, 0.92);
      line-height: 1.35;
      font-size: 14px;
    }

    .rotate-strong {
      font-weight: 900;
      color: var(--yellow, #F5DB2D);
    }

    .rotate-icon-wrap {
      margin-top: 14px;
      display: flex;
      justify-content: center;
    }

    .rotate-icon {
      border-radius: 18px;
      border: 2px solid rgba(255, 255, 255, 0.18);
      background: rgba(0, 0, 0, 0.35);
      padding: 12px 16px;
      font-size: 40px;
      color: rgba(255, 255, 255, 0.95);
    }
.answer-explain{
  margin-top: 6px;
  font-size: 16px;
  font-weight: 600;
  opacity: 0.92;
  line-height: 1.15;
   text-align: center; 
}
.answer-explain strong{
  font-weight: 900;
}
.postgame-explain{
  margin-top: 6px;
  margin-bottom: 9px;

  font-size: 16px;     /* smaller than modal */
  font-weight: 600;
  opacity: 0.75;

  text-align: center;
  line-height: 1.2;
}
.coming-soon{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.72);
  padding: 18px;
}

.coming-soon-card{
  width: min(560px, 92vw);
  border-radius: 18px;
  padding: 18px 18px 16px;
  background: rgba(12,12,12,0.92);
  border: 2px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.95);
  text-align: center;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}

.coming-soon-title{
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 22px;
  margin-bottom: 6px;
}

.coming-soon-sub{
  opacity: 0.9;
  font-size: 16px;
}

@media (max-width: 420px){
  .coming-soon-actions{ grid-template-columns: 1fr; }
}