:root{
  --vh: 1vh;
  --truevh: 1vh;

  /* ===== Stats brand tokens (source of truth) ===== */
  --bg: #F7F8FA;            /* page background */
  --text: #2E3A46;          /* primary text */
  --muted: #5E6A78;         /* secondary text */

  /* Panels (stats-style light glass) */
  --panelLight: rgba(255,255,255,0.72);
  --panelLightBorder: rgba(46,58,70,0.12);
  --panelLightShadow: 0 22px 70px rgba(0,0,0,0.10);

  /* Your in-game slider panel (keep dark glass) */
  --panelBg: rgba(0,0,0,0.22);
  --panelBorder: rgba(255,255,255,0.14);
  --panelShadow: 0 16px 44px rgba(0,0,0,0.18);

  /* Name shadow (existing feature) */
  --nameShadow: 0 12px 40px rgba(0,0,0,0.55);

  /* Fonts */
  --font: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --heroText: var(--text);

  /* Footer height reserve (Results only overrides below) */
  --legalFooterH: 0px;

  /* Bottom pad hook (used to lift content up when footer is shown) */
  --iosToolbarPad: 0px;
}

*{ box-sizing:border-box; }

html, body{
  height:100%;
  margin:0;
  font-family: var(--font);
}

body{
  background: var(--bg);
  color: var(--text);
  overflow:hidden; /* keep the page locked; #app handles internal scroll if needed */
  -webkit-overflow-scrolling: touch;
}

/* Stats-like soft background wash (does NOT interfere with reveal overlay) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events:none;
  background:
    radial-gradient(1200px 900px at 50% -10%,
      rgba(46,58,70,0.06),
      rgba(46,58,70,0.00) 60%),
    radial-gradient(900px 700px at 15% 110%,
      rgba(46,58,70,0.04),
      rgba(46,58,70,0.00) 55%),
    linear-gradient(180deg, var(--bg), var(--bg));
  background-repeat:no-repeat;
  background-size:cover;
}

#revealOverlay{
  position: fixed;
  inset: 0;

  /* Use JS-tracked real viewport height */
  height: var(--truevh);

  background: transparent;
  z-index: 0;
  pointer-events: none;

  transform-origin: bottom;
  transform: scaleY(0);
  will-change: transform;
}

#topChromeFill{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top);
  background: transparent;
  z-index: 2; /* above reveal overlay (0), below UI */
  pointer-events: none;
}


#app{
  position:relative;
  z-index:2;

  height: var(--truevh);
  min-height: var(--truevh);

  display:flex;
  flex-direction:column;

  overflow-y:auto;
  -webkit-overflow-scrolling: touch;

  padding:18px 16px calc(18px + env(safe-area-inset-bottom) + var(--iosToolbarPad)) 16px;
}

/* ---------- Name + match block ---------- */
#nameWrap{
  flex:1;
  display:grid;
  place-items:center;
  padding: 8px 0 12px;
  gap: 14px;
}

/* ===== COLOR NAME: update to stats typography/colors, KEEP behaviors ===== */
#colorName{
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;

  font-weight: 990;
  text-transform: uppercase;
  letter-spacing: 1.0px;
  font-size: clamp(44px, 8.5vw, 108px);
  line-height: 0.95;
  color: var(--text);
  text-align: center;
  user-select: none;
  transition: color 0.15s linear, text-shadow 0.15s linear, opacity 0.15s linear;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0.98;
}

/* Reveal-only */
#colorName.revealFit{
  white-space: pre-line;
  width: min(1100px, 100%);
  padding: 0 10px;
  line-height: 0.9;
}

/* Shadow only when toggled by JS */
#colorName.shadowOn{
  text-shadow: var(--nameShadow);
}

/* Desktop hover shadow */
@media (hover: hover) and (pointer: fine){
  #colorName:hover{
    text-shadow: var(--nameShadow);
  }
}

/* -------------------------
   RESULTS SUMMARY (TOP)
   ------------------------- */
.matchBlock{
  display:none;
  width:min(1100px, 100%);
  margin: 0 auto;
  text-align:center;
  gap: 0;
}
.matchBlock.show{ display:grid; }

.matchPct{
  font-weight: 990;
  letter-spacing: 0.6px;
  font-size: clamp(56px, 7.2vw, 104px);
  line-height: 1;
  margin-bottom: 10px;
  color: var(--heroText, var(--text));
}

.answerSummary{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}

/* Reorder (CSS-only, no HTML changes) */
#dirResult{ order: 1; }
#prestigeMsg{ order: 2; }
#answerRGB{ order: 3; }
.answerHexRow{ order: 4; }

#dirResult{
  font-family: var(--mono);
  font-weight: 950;
  font-size: 22px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--heroText, var(--text));
  opacity: 0.92;
  margin: 0;
}

.prestigeText{
  font-family: var(--mono);
  font-weight: 950;
  font-size: 18px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--heroText, var(--text));
  opacity: 0.82;
}

#prestigeMsg{
  margin-top: 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  min-height: 28px;
}

.prestigeBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 7px 14px;
  border-radius: 999px;
  font-weight: 990;
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;

  color: var(--heroText, var(--text));
  border: 1px solid rgba(46,58,70,0.18);
  background: rgba(46,58,70,0.06);
  box-shadow:
    0 12px 34px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.55);
}

.prestigeBadge.gold{
  border-color: rgba(255,230,120,0.50);
  background: linear-gradient(180deg, rgba(255,236,140,0.20), rgba(255,215,80,0.08));
}
.prestigeBadge.silver{
  border-color: rgba(46,58,70,0.22);
  background: linear-gradient(180deg, rgba(255,255,255,0.50), rgba(46,58,70,0.05));
}
.prestigeBadge.bronze{
  border-color: rgba(255,190,135,0.55);
  background: linear-gradient(180deg, rgba(255,190,135,0.18), rgba(190,120,75,0.06));
}

@keyframes savvyPop {
  0% { transform: scale(0.86); filter: brightness(1); }
  55% { transform: scale(1.12); filter: brightness(1.12); }
  100% { transform: scale(1); filter: brightness(1.05); }
}
.prestigeBadge.savvy{
  border-color: rgba(72,255,125,0.40);
  background: linear-gradient(180deg, rgba(72,255,125,0.18), rgba(72,255,125,0.08));
  animation: savvyPop 520ms cubic-bezier(.2, .9, .2, 1) both;
  transform-origin: center;
}

/* These are removed from hero (kept hidden) */
#answerRGB,
.answerHexRow{
  display: none !important;
}

.realHexTag{
  font-family: var(--mono);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-align: center;

  color: rgba(255,255,255,0.78);
  margin: 2px 0 10px;
  user-select: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Controls panel ---------- */
#controls{
  width:min(1100px,100%);
  margin:0 auto calc(10px + env(safe-area-inset-bottom));
  border-radius:22px;
  padding:14px 14px 12px;

  background: var(--panelBg);
  border: 1px solid var(--panelBorder);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--panelShadow);
  color:#fff;
  position: relative;        /* ✅ anchor for .hexHud */
  padding-top: 30px;         /* ✅ gives room for hex without moving anything outside */
}

/* Channel letter cell */
.chan{
  font-weight: 950;
  font-size: 12px;
  letter-spacing: 1.0px;
  opacity: 0.95;
  user-select:none;
  text-align:center;
  width: 22px;
  font-family: var(--mono);
}

/* Rows (DEFAULT = playing) */
.row{
  display:grid;
  grid-template-columns: 22px 1fr 74px;
  gap:12px;
  align-items:center;
  padding: 12px 0;
}

/* Left fit cell */
.fit{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-start;
  font-weight: 950;
  min-width: 0;
}

.fitPct{
  font-size: 20px;
  line-height: 1;
  min-width: 60px;
  font-family: var(--mono);
}

.fitBadge{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1.0px;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.10);
  opacity: 0.95;
  white-space: nowrap;
}

.fitBadge.exact{ background: rgba(72,255,125,0.22); border-color: rgba(72,255,125,0.55); }
.fitBadge.close{ background: rgba(255,215,80,0.22); border-color: rgba(255,215,80,0.55); }
.fitBadge.fair { background: rgba(255,150,80,0.22); border-color: rgba(255,150,80,0.55); }
.fitBadge.off  { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.18); }

/* Track wrapper allows marker overlay */
.trackWrap{
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
  isolation:isolate;
}

/* Slider */
input[type="range"]{
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  height:12px;
  border-radius:999px;
  background: rgba(255,255,255,0.16);
  outline:none;

  position:relative;
  z-index:3;
  -webkit-user-select:none;
  user-select:none;
}

/* Track */
input[type="range"]::-webkit-slider-runnable-track{
  height:12px;
  border-radius:999px;
  background: rgba(255,255,255,0.14);
}
input[type="range"]::-moz-range-track{
  height:12px;
  border-radius:999px;
  background: rgba(255,255,255,0.14);
}

/* Thumb */
input[type="range"]::-webkit-slider-thumb{
  appearance:none;
  -webkit-appearance:none;
  width:22px; height:22px;
  border-radius:999px;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
  margin-top:-5px;
}
input[type="range"]::-moz-range-thumb{
  width:22px; height:22px;
  border:none;
  border-radius:999px;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

/* Answer marker */
.ansMark{
  position:absolute;
  top:50%;
  transform: translate(-50%, -50%);
  width:4px;
  height:24px;
  border-radius: 4px;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 8px 18px rgba(0,0,0,0.22);
  opacity: 0;
  pointer-events:none;
  z-index:2;
}

/* Right-side value display */
.numBox{
  width:74px;
  min-width:74px;

  padding:8px 10px;
  border-radius:14px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  color:#fff;

  font-weight: 900;
  font-size: 18px;
  line-height: 1.2;

  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;

  text-align:center;
  user-select:none;
  pointer-events:none;
}

/* Buttons */
.buttons{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap:10px;
  margin-top:12px;
}

button{
  padding:14px 12px;
  border-radius:18px;
  border:none;
  font-size:18px;
  font-weight:950;
  cursor:pointer;
  font-family: var(--font);
}

#submitBtn{ background: rgba(255,255,255,0.92); color: var(--text); }
button.primary{ background: rgba(255,255,255,0.92); color: var(--text); }
button.secondary{ background: rgba(255,255,255,0.12); color:#fff; }

/* -------------------------
   STATE: PLAYING (default)
   ------------------------- */
body.playing .fit{ display:none; }
body.playing .ansMark{ opacity:0; }

/* PLAYING: make RGB labels match number style */
body.playing .row{
  grid-template-columns: 28px 1fr 74px;
}
body.playing .chan{
  width: 28px;
  font-family: var(--mono);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.8px;
  opacity: 0.98;
  text-transform: uppercase;

  display:flex;
  align-items:center;
  justify-content:center;

  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
body.playing .numBox{
  font-size: 16px;
}

/* -------------------------
   STATE: RESULTS
   ------------------------- */
body.results .chan{ display:none; }
body.results .fit{ display:flex; }
body.results .row{ grid-template-columns: 148px 1fr 74px; }
body.results .ansMark{ opacity:0.95; }

/* Marker colors */
body.results .ansMark.exact{
  background: rgba(72,255,125,0.95);
  box-shadow: 0 10px 22px rgba(72,255,125,0.35), 0 10px 22px rgba(0,0,0,0.18);
}
body.results .ansMark.close{
  background: rgba(255,215,80,0.95);
  box-shadow: 0 10px 22px rgba(255,215,80,0.32), 0 10px 22px rgba(0,0,0,0.18);
}
body.results .ansMark.fair{
  background: rgba(255,150,80,0.95);
  box-shadow: 0 10px 22px rgba(255,150,80,0.30), 0 10px 22px rgba(0,0,0,0.18);
}
body.results .ansMark.off{
  background: rgba(255,255,255,0.85);
  box-shadow: 0 10px 22px rgba(0,0,0,0.20);
}

/* Results mode: right-side value becomes plain text (desktop/tablet) */
body.results .numBox{
  border:none;
  background:transparent;
  padding:0;

  width:74px;
  min-width:74px;

  text-align:right;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
  opacity: 0.98;

  pointer-events:none;
  user-select:none;
}

/* Make disabled ranges look the same */
body.results input[type="range"]:disabled{ opacity:1; }

/* =========================
   RESPONSIVE / MOBILE TUNING
   ========================= */
@media (max-width: 760px){
  #app{
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom) + var(--iosToolbarPad)) 12px;
  }

  #dirResult{ font-size: 18px; }

  #controls{
    padding: 12px 12px 10px;
    border-radius: 20px;

    /* Let #app padding do the lifting; keep a small natural bottom margin */
    margin-bottom: calc(8px + env(safe-area-inset-bottom));
  }

  /* Keep playing layout */
  .row{
    grid-template-columns: 22px 1fr 70px;
    gap:10px;
  }
  .numBox{
    width:70px;
    min-width:70px;
    font-size: 17px;
  }

  /* ==============
     MOBILE RESULTS FIX:
     Put badge + number on the SAME line, directly under the track.
     ============== */
  body.results .fitPct{ display:none; }

  body.results .row{
    display:grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "track track"
      "metaLeft metaRight";
    row-gap: 10px;
    column-gap: 12px;
    padding: 14px 0;
    align-items:center;
  }

  body.results .trackWrap{
    grid-area: track;
    width: 100%;
  }

  body.results .fit{
    grid-area: metaLeft;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap: 10px;
    margin: 0;
  }

  /* Ensure the value sits on the SAME line as the badge */
  body.results .numBox{
    grid-area: metaRight;
    width:auto;
    min-width:0;
    text-align:right;
    font-size: 16px;
    line-height: 1;
    justify-self:end;
    align-self:center;
    white-space: nowrap;
  }
}

body.results .numBox{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

body.results .numBox .guessVal{
  color:#fff;
  opacity: 0.98;
}

/* Answer value color matches tier (same vibe as your markers/badges) */
body.results .numBox .ansVal.exact{ color: rgba(72,255,125,0.95); }
body.results .numBox .ansVal.close{ color: rgba(255,215,80,0.95); }
body.results .numBox .ansVal.fair { color: rgba(255,150,80,0.95); }
body.results .numBox .ansVal.off  { color: rgba(255,255,255,0.70); }

@media (max-width: 760px) and (max-height: 760px){
  #nameWrap{ gap: 10px; padding: 6px 0 8px; }
  .matchPct{ margin-bottom: 6px; }
  .row{ padding: 10px 0; }
  #controls{ padding: 10px 12px 10px; }
  .buttons{ margin-top: 10px; }
}

/* MOBILE: bigger slider thumbs + more spacing while PLAYING */
@media (max-width: 760px){
  body.playing .row{
    padding: 16px 0;
    gap: 12px;
  }

  body.playing input[type="range"]{
    height: 15px;
    touch-action: pan-y;
  }
  body.playing input[type="range"]::-webkit-slider-runnable-track{ height: 15px; }
  body.playing input[type="range"]::-moz-range-track{ height: 15px; }

  body.playing input[type="range"]::-webkit-slider-thumb{
    width: 41px;
    height: 41px;
    margin-top: -13px;
  }
  body.playing input[type="range"]::-moz-range-thumb{
    width: 41px;
    height: 41px;
  }
}

/* =========================
   STATS OVERLAY (Wordle-like) (unchanged)
   ========================= */
.statsOverlay{
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px 14px calc(18px + env(safe-area-inset-bottom));
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.statsOverlay.show{ display: flex; }

.statsPanel{
  width: min(720px, 100%);
  border-radius: 26px;
  padding: 18px 18px 16px;
  background: rgba(16,16,16,0.72);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 20px 70px rgba(0,0,0,0.55);
  color: #fff;
}

/* ... (rest of your stats overlay styles unchanged) ... */

/* =========================
   SPLASH (1.5s)
   ========================= */
#splashScreen{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: grid;
  place-items: center;
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
  pointer-events: none;
  min-height: 100dvh;
  animation: splashOut 1.5s cubic-bezier(.2,.9,.2,1) forwards;
  will-change: opacity, transform, filter;
}

#splashScreen::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 45%,
      rgba(46,58,70,0.06),
      rgba(46,58,70,0) 55%);
  pointer-events:none;
}

.splashLogo{
  width: min(280px, 70vw);
  height: auto;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.18));
  animation: logoInOut 1.5s cubic-bezier(.2,.9,.2,1) forwards;
  will-change: opacity, transform, filter;
}

@keyframes splashOut{
  0%   { opacity: 1; transform: translateY(0); filter: blur(0); visibility: visible; }
  70%  { opacity: 1; transform: translateY(0); filter: blur(0); }
  100% { opacity: 0; transform: translateY(-6px); filter: blur(2px); visibility: hidden; }
}

@keyframes logoInOut{
  0%   { opacity: 0; transform: translateY(12px) scale(0.96); filter: drop-shadow(0 10px 26px rgba(0,0,0,.10)); }
  18%  { opacity: 1; transform: translateY(0) scale(1.00); }
  65%  { opacity: 1; transform: translateY(0) scale(1.00); filter: drop-shadow(0 14px 36px rgba(0,0,0,.18)); }
  100% { opacity: 0; transform: translateY(-8px) scale(0.98); filter: drop-shadow(0 10px 26px rgba(0,0,0,.10)); }
}

@media (prefers-reduced-motion: reduce){
  #splashScreen, .splashLogo{
    animation: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

/* =========================================
   ANSWER STRIP: REMOVE ENTIRELY
   ========================================= */
.answerStrip{
  display:none !important;
  border:none !important;
  padding:0 !important;
  margin:0 !important;
}

/* =========================================
   HEX HUD (Results only)
   - Fixed overlay so it NEVER changes layout
   - Tap/click to copy
   ========================================= */
/* HEX HUD (Results only) - anchored to #controls, not the page */
.hexHud{
  position: absolute;
  left: 50%;
  top: 8px;                 /* tweak this (6–12px usually perfect) */
  transform: translateX(-50%);

  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;

  color: rgba(255,255,255,0.78);  /* matches panel text */
  opacity: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  z-index: 3;
}

body.results .hexHud{
  opacity: 1;
  pointer-events: auto;
}

/* Results: both buttons bright white */
body.results #submitBtn,
body.results button.secondary{
  background: rgba(255,255,255,0.92);
  color: var(--text);
}
body.results #submitBtn{
  box-shadow: 0 16px 40px rgba(0,0,0,0.10);
}
body.results button.secondary{
  opacity: 0.92;
}
body.results button.secondary:hover{
  opacity: 1;
}

/* ===== HEX HUD: force correct mobile behavior ===== */

/* Always anchor within the panel */
#controls{ position: relative; }

/* Only when the game UI exists */
#app #controls{ position: relative; }

#app #controls #hexHud{
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  z-index: 10;

  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}

body.results #app #controls #hexHud{
  opacity: 1;
  pointer-events: auto;
}

body.playing #app #controls #hexHud{
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Mobile: keep room for the HUD (your media query was wiping padding-top) */
@media (max-width: 760px){
  #controls{
    padding-top: 30px; /* IMPORTANT: re-add room for the HUD */
  }
}

.copyToast{
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(8px);
  padding: 10px 18px;
  border-radius: 999px;

  background: rgba(16,16,16,0.85);
  color: #fff;
  font-family: var(--mono);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;

  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 9999;
}

.copyToast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =========================================================
   Unlimited Unlock Splash (3s total)
   ========================================================= */
.unlockSplash{
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: #fff;

  display: none;
  place-items: center;

  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);

  min-height: calc(var(--vh, 1vh) * 100);
  pointer-events: none;
}

.unlockSplash.is-on{
  display: grid;
}

.unlockInner{
  position: relative;
  width: min(420px, 78vw);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;

  background: transparent;
  box-shadow: none;
}

.unlockLogo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  transform: translateY(6px) scale(0.985);
  filter: none;
}

/* Only the glitch logo gets glow + chaos */
.unlockLogo--unlimited{
  filter: drop-shadow(0 14px 34px rgba(0,0,0,.22))
          drop-shadow(0 0 14px rgba(120,0,255,.25));
}


/* =========================================================
   Unlimited Unlock Splash (3s total)
   0–1.0s main logo
   1.0–2.55s unlimited glitch logo
   2.55–3.0s clean UNLIMITED word (optional end)
   ========================================================= */

/* RUN SEQUENCE */
.unlockSplash.is-run #unlockMainLogo{
  animation: unlock_main 2.6s linear forwards;
}

.unlockSplash.is-run #unlockUnlimitedLogo{
  animation: unlock_unlimited 2.6s linear forwards;
}


/* Only animate word via keyframes when we explicitly run */

/* MAIN LOGO: 0–1s */
@keyframes unlock_main{
  0%   { opacity: 0; transform: translateY(10px) scale(0.985); }
  6%   { opacity: 1; transform: translateY(0) scale(1); }
  33%  { opacity: 1; transform: translateY(0) scale(1); }   /* 1.00s */
  40%  { opacity: 0; transform: translateY(-2px) scale(0.998); }
  100% { opacity: 0; }
}

/* UNLIMITED LOGO: 1.0–2.55s glitch band, then hard cut before word */
@keyframes unlock_unlimited{
  0%   { opacity: 0; transform: translateY(0) scale(1); filter:none; }
  32%  { opacity: 0; }
  33%  { opacity: 1; transform: translateY(0) scale(1); }

  /* Aggressive glitch (1.0s → 2.55s) */
  36%  { transform: translateX(-6px) skewX(-14deg) scale(1.01); filter: saturate(1.7) contrast(1.25); }
  38%  { transform: translateX(7px)  skewX(12deg)  scale(0.995); opacity: .85; }
  41%  { transform: translateX(-4px) skewX(-10deg); opacity: 1; }
  44%  { transform: translateX(10px) skewX(18deg); opacity: .70; filter: saturate(2) contrast(1.35); }
  47%  { transform: translateX(-9px) skewX(-18deg); opacity: 1; }
  50%  { transform: translateX(5px)  skewX(10deg)  scale(1.01); opacity: .8; }
  54%  { transform: translateX(-12px) skewX(-20deg); opacity: .60; filter: saturate(1.8) contrast(1.3) blur(.25px); }
  58%  { transform: translateX(8px)  skewX(16deg); opacity: 1; filter: saturate(2.1) contrast(1.4); }
  62%  { transform: translateX(-6px) skewX(-12deg); opacity: .75; }
  66%  { transform: translateX(6px)  skewX(12deg); opacity: 1; filter:none; }
  70%  { transform: translateX(-4px) skewX(-8deg); opacity: .85; }
  74%  { transform: translateX(3px)  skewX(7deg);  opacity: 1; }
  80%  { transform: translateX(-2px) skewX(-5deg); opacity: .85; filter: saturate(1.4) contrast(1.15); }

  /* HARD CUT before word-only phase (prevents “phantom UNLIMITED” bleed) */
  85%  { opacity: 1; }
  86%  { opacity: 0; }
  100% { opacity: 0; }
}

/* WORD: hidden until 2.55s, then clean in */

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .unlockSplash.is-run #unlockMainLogo,
  .unlockSplash.is-run #unlockUnlimitedLogo,
  .unlockSplash.is-on{
    display: none !important;
  }
}

/* =========================================================
   STATS PAGE: Aggressive glitch burst
   Trigger by adding: body.practiceMegaGlitch
   ========================================================= */

body.practiceMegaGlitch{
  animation: megaJitter 520ms steps(2,end);
}

body.practiceMegaGlitch::before,
body.practiceMegaGlitch::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
}

/* Scanlines + dark tearing */
body.practiceMegaGlitch::before{
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0.00) 0px,
      rgba(0,0,0,0.00) 4px,
      rgba(0,0,0,0.10) 5px
    ),
    linear-gradient(transparent 0 42%, rgba(0,0,0,0.14) 42% 58%, transparent 58%);
  mix-blend-mode: multiply;
  animation: scanBurst 520ms steps(2,end) both;
}

/* RGB split + noise bars */
body.practiceMegaGlitch::after{
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,0,90,0.10) 0 2px,
      rgba(0,200,255,0.10) 2px 4px,
      rgba(255,255,255,0.07) 4px 6px,
      rgba(0,0,0,0.00) 6px 12px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 8px,
      rgba(255,255,255,0.06) 9px
    );
  mix-blend-mode: screen;
  animation: tearBurst 520ms steps(1,end) both;
}

/* Hit the page + logo specifically (slices + zoom shake) */
body.practiceMegaGlitch .statsPage{
  animation: sliceGlitch 520ms steps(2,end);
  will-change: transform, filter, clip-path;
}

body.practiceMegaGlitch .statsLogo{
  animation: logoZoomShake 520ms cubic-bezier(.2,.9,.2,1);
  transform-origin: 50% 50%;
  will-change: transform, filter;
}

/* ===== keyframes ===== */

@keyframes megaJitter{
  0%   { transform: translate(0,0); filter:none; }
  10%  { transform: translate(-10px, 6px) skewX(-1deg); filter: contrast(1.25) saturate(1.35); }
  22%  { transform: translate(12px, -7px) skewX(1deg); }
  35%  { transform: translate(-8px, -10px) skewY(-1deg); filter: contrast(1.35) saturate(1.55); }
  50%  { transform: translate(10px, 7px) skewY(1deg); filter: contrast(1.5) saturate(1.8); }
  70%  { transform: translate(-6px, 4px); filter: contrast(1.15) saturate(1.15); }
  100% { transform: translate(0,0); filter:none; }
}

@keyframes sliceGlitch{
  0%   { clip-path: inset(0 0 0 0); transform: translate(0,0); filter:none; }
  14%  { clip-path: polygon(0 3%, 100% 0, 100% 18%, 0 23%); transform: translate(-10px, 0); }
  28%  { clip-path: polygon(0 28%, 100% 24%, 100% 46%, 0 50%); transform: translate(12px, -5px); filter: contrast(1.25) saturate(1.25); }
  42%  { clip-path: polygon(0 54%, 100% 49%, 100% 70%, 0 74%); transform: translate(-12px, 7px); }
  56%  { clip-path: polygon(0 74%, 100% 71%, 100% 88%, 0 92%); transform: translate(9px, -7px); }
  72%  { clip-path: inset(0 0 0 0); transform: translate(0,0); filter:none; }
  100% { clip-path: inset(0 0 0 0); transform: translate(0,0); filter:none; }
}

@keyframes logoZoomShake{
  0%   { transform: scale(1) rotate(0deg); filter: drop-shadow(0 22px 44px rgba(0,0,0,0.10)); }
  18%  { transform: translateY(-6px) scale(1.10) rotate(-1.4deg); filter: drop-shadow(0 36px 80px rgba(0,0,0,0.20)) contrast(1.25); }
  36%  { transform: translate(12px, 4px) scale(1.18) rotate(1.6deg); }
  52%  { transform: translate(-14px, -7px) scale(1.24) rotate(-1.8deg); filter: drop-shadow(0 46px 100px rgba(0,0,0,0.24)) contrast(1.35) saturate(1.25); }
  72%  { transform: translate(8px, -2px) scale(1.10) rotate(0.8deg); }
  100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 22px 44px rgba(0,0,0,0.10)); }
}

@keyframes scanBurst{
  0%   { opacity: 0; transform: translateY(0); }
  12%  { opacity: .95; transform: translateY(-10px); }
  44%  { opacity: .60; transform: translateY(8px); }
  72%  { opacity: .35; transform: translateY(-6px); }
  100% { opacity: 0; transform: translateY(0); }
}

@keyframes tearBurst{
  0%   { opacity: 0; transform: translateX(0); }
  12%  { opacity: .95; transform: translateX(-14px); }
  30%  { opacity: .65; transform: translateX(12px); }
  48%  { opacity: .85; transform: translateX(-18px); }
  72%  { opacity: .35; transform: translateX(8px); }
  100% { opacity: 0; transform: translateX(0); }
}

/* =========================================================
   CLICK TARGET SAFETY
   ========================================================= */

/* Make the brand/logo actually clickable (some browsers can be finicky) */
.statsBrand,
.statsBrand * ,
#statsLogo{
  pointer-events: auto;
}

/* ============================================
   Stats logo micro “tap feedback”
   ============================================ */
.statsLogo{
  will-change: transform;
}

.statsLogo.tapPulse{
  animation: logoTapPulse 180ms cubic-bezier(.3,.7,.3,1);
}

@keyframes logoTapPulse{
  0%   { transform: scale(1) translate(0,0); }
  35%  { transform: scale(1.04) translate(-2px,1px); }
  65%  { transform: scale(0.98) translate(2px,-1px); }
  100% { transform: scale(1) translate(0,0); }
}

/* ============================================
   TRUE iOS FULLSCREEN LAYER (Safari bug killer)
   ============================================ */

:root{
  --truevh: 100vh;
}

@supports (-webkit-touch-callout: none) {
  :root{
    --truevh: calc(var(--vh, 1vh) * 100);
  }
}
:root{
  --vh: 1vh;               /* JS will set this to real innerHeight */
  --truevh: calc(var(--vh) * 100);
}
/* Force HEX inside the results panel (overrides any old fixed #hexHud styles) */
#controls #hexHud{
  position: absolute;
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
}

/* Mobile: keep the reserved space for the hex label */
@media (max-width: 760px){
  #controls{ padding-top: 30px; }
}
#controls{ position: relative; }

#controls .hexHud{
  position: absolute;
  left: 50%;
  top: 10px;              /* adjust 6–14px */
  transform: translateX(-50%);
  margin: 0;

  font-family: var(--mono);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);

  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

body.results #controls .hexHud,
body.unlimited #controls .hexHud{
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 760px){
  #controls{ padding-top: 30px; }
}

/* Never allow HUD to block touches unless in RESULTS */
body.playing #controls > #hexHud{
  pointer-events: none !important;
}

body.results #controls > #hexHud{
  pointer-events: auto;
}
.statsBrand{ touch-action: manipulation; }

.statsPage #hexHud{ display:none !important; pointer-events:none !important; }