/* ── Reset & base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand */
  --brand:               #7c4dff;
  --brand-dark:          #5e35b1;
  --brand-light:         #ede7f6;

  /* Layout backgrounds */
  --board-bg:            #f2f2f7;
  --page-bg:             #f2f2f7;
  --card-bg:             #ffffff;
  --sheet-bg:            #f2f2f7;
  --word-box-bg:         #f0f0ec;
  --stat-box-bg:         #f7f7f5;

  /* Text */
  --text-primary:        #1c1c1e;
  --text-secondary:      #6e6e73;
  --text-muted:          #9ca3af;
  --prompt-color:        #9ca3af;

  /* Icons & action buttons */
  --icon-color:          #6e6e73;
  --board-fg:            rgba(28,28,30,0.65);

  /* Leaderboard */
  --lb-row-border:       #f0f0ec;

  /* Tile states */
  --tile-neutral:        #ffffff;
  --tile-neutral-stroke: #e5e7eb;
  --tile-blank:          #f3f0eb;
  --tile-text:           #1f2937;
  --tile-selected:       #7c4dff;
  --tile-selected-stroke:#5e35b1;
  --tile-valid:          #22c55e;
  --tile-valid-stroke:   #16a34a;
  --tile-invalid:        #ef4444;
  --tile-invalid-stroke: #dc2626;
  --tile-played:         #4ade80;
  --tile-played-stroke:  #16a34a;
  --tile-text-light:     #ffffff;

  /* ── Dark mode counterparts (--dk-* vars, applied by html[data-theme="dark"]) */
  --dk-brand:                  #a78bfa;
  --dk-brand-dark:             #7c4dff;
  --dk-board-bg:               #1c1c1e;
  --dk-card-bg:                #2c2c2e;
  --dk-sheet-bg:               #1c1c1e;
  --dk-word-box-bg:            #2c2c2e;
  --dk-stat-box-bg:            #3a3a3c;
  --dk-text-primary:           #f2f2f7;
  --dk-text-secondary:         #aeaeb2;
  --dk-text-muted:             #636366;
  --dk-prompt-color:           #636366;
  --dk-icon-color:             #aeaeb2;
  --dk-lb-row-border:          #3a3a3c;
  --dk-tile-neutral:           #3a3a3c;
  --dk-tile-neutral-stroke:    #48484a;
  --dk-tile-blank:             #333334;
  --dk-tile-text:              #f2f2f7;
  --dk-tile-selected:          #7c4dff;
  --dk-tile-selected-stroke:   #5e35b1;
  --dk-tile-valid:             #22c55e;
  --dk-tile-valid-stroke:      #16a34a;
  --dk-tile-invalid:           #ef4444;
  --dk-tile-invalid-stroke:    #dc2626;
  --dk-tile-played:            #4ade80;
  --dk-tile-played-stroke:     #16a34a;
  --dk-tile-text-light:        #ffffff;

  /* Legacy aliases */
  --tile-default: var(--tile-neutral);
  --tile-stroke:  var(--tile-neutral-stroke);
  --tile-yellow:  var(--tile-selected);
  --tile-green:   var(--tile-valid);
  --tile-red:     var(--tile-invalid);
  --text-dark:    var(--tile-text);
  --text-light:   var(--tile-text-light);
  --answer-bg:    rgba(0,0,0,0.08);
  --radius:       16px;
}

/* Prevent CSS display rules from overriding HTML hidden attribute */
[hidden] { display: none !important; }

/* Screen-reader only — visually hidden but announced */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

html, body {
  min-height: 100%;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--board-bg);
  color: var(--tile-text);
  overflow: hidden;
}

/* When the back panel is open, iOS home-indicator zone must show sheet-bg */
html[data-floor="sheet"] body {
  background: var(--sheet-bg) !important;
}
html[data-floor="sheet"] #app {
  background: var(--sheet-bg);
}

/* ── Font scale ────────────────────────────────────────────────────── */
:root {
  --fs-xs:   1.0625rem;
  --fs-sm:   1.0625rem;
  --fs-base: 1.0625rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.1rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;
  --fs-3xl:  2.4rem;
}

/* ── Text size overrides ────────────────────────────────────────────── */
html[data-textsize="large"] {
  --fs-xs:   1.1875rem;
  --fs-sm:   1.1875rem;
  --fs-base: 1.1875rem;
  --fs-md:   1.1875rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.4rem;
  --fs-2xl:  1.75rem;
  --fs-3xl:  2.75rem;
}
html[data-textsize="xl"] {
  --fs-xs:   1.375rem;
  --fs-sm:   1.375rem;
  --fs-base: 1.375rem;
  --fs-md:   1.375rem;
  --fs-lg:   1.5rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.1rem;
  --fs-3xl:  3.2rem;
}


:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── App shell ──────────────────────────────────────────────────────── */
#app {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100dvh;
  background: var(--board-bg);
  overflow: hidden;
}

#card-scene {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

#game-card {
  width: 100%;
  height: 100%;
  position: relative;
}

#game-card.flipped { }
.card-face { width: 100%; }
.card-face.back { }

/* ── Game front — light background ─────────────────────────────────── */
#game-front {
  background: var(--board-bg);
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-top: env(safe-area-inset-top, 0px);
}

/* ── Game header ────────────────────────────────────────────────────── */
#game-header {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  padding: 10px 12px 8px;
  flex-shrink: 0;
}

#header-center {
  text-align: center;
}

#header-label {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
}

#puzzle-date {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--tile-text);
  line-height: 1.1;
  letter-spacing: -0.3px;
  cursor: pointer;
}
#puzzle-date:hover { opacity: 0.75; }

#info-btn {
  background: var(--card-bg);
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--brand);
  box-shadow: 0 1px 6px rgba(0,0,0,0.10);
  transition: box-shadow 0.2s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
#info-btn:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.15); }
#info-btn:active { transform: scale(0.94); }

#header-tickets {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 38px;
  justify-content: flex-end;
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--brand);
  letter-spacing: -0.2px;
}

/* ── Word display area ───────────────────────────────────────────────── */
#word-box {
  margin: 4px 14px 6px;
  height: 52px;
  display: block;
  line-height: 52px;
  position: relative;
  flex-shrink: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  background: var(--word-box-bg);
  border-radius: 26px;
  text-align: center;
  white-space: nowrap;
}
#word-box::-webkit-scrollbar { display: none; }

#game-prompt {
  font-size: var(--fs-sm);
  color: var(--prompt-color);
  letter-spacing: 0.1px;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  padding: 0 44px;
  transition: opacity 0.5s ease;
}

#answer-text {
  font-family: "Inter", sans-serif;
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--tile-text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  padding: 0 44px;
}

@keyframes checking-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
#answer-text.checking {
  animation: checking-pulse 0.7s ease-in-out infinite;
}

#reset-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.07);
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(0,0,0,0.5);
  transition: background 0.15s;
}
#reset-btn:hover { background: rgba(0,0,0,0.13); }

/* ── Word level bar — inset to align with flat section of pill base ─── */
#word-level-bar {
  margin: 0 40px 4px;
  height: 2px;
  position: relative;
  background: transparent;
  flex-shrink: 0;
}

#word-level-fill {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: 0%;
  background-color: #ef4444;
  transition: width 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.35s ease;
}

/* ── Board group: board + controls sit together ──────────────────── */
#board-group {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-top: 10px;
}

/* ── Board container ───────────────────────────────────────────────── */
#board-container {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 8px;
  user-select: none;
  -webkit-user-select: none;
}

#hex-board {
  width: 100%;
  height: auto;
  display: block;
  touch-action: none;
}


/* ── Stats row ─────────────────────────────────────────────────────── */
#stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin: 0 14px 8px;
  flex-shrink: 0;
}

.stat-card {
  background: var(--card-bg);
  border-radius: 14px;
  padding: 10px 8px;
  text-align: center;
  box-shadow: 0 1px 6px rgba(0,0,0,0.07);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.stat-card-center {
  box-shadow: 0 2px 12px rgba(124,77,255,0.15);
}

.stat-card-label {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.stat-card-value {
  font-size: var(--fs-3xl);
  font-weight: 800;
  color: var(--tile-text);
  line-height: 1;
}

.stat-card-value.accent {
  color: var(--brand);
}

.stat-card-value.valid { color: #22c55e; }
.stat-card-value.invalid { color: #ef4444; }

.stat-card-sub {
  font-size: 1.0625rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#score-level {
  font-size: 1.0625rem;
  color: var(--brand);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-align: center;
  line-height: 1.3;
}

/* ── Board controls row (action icons + share) ───────────────────────── */
#board-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 12px;   /* JS overrides horizontal via alignBoardControls() */
  flex-shrink: 0;
}

/* ── Share button — outline pill, throbs after valid word ────────────── */
#share-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 7px 14px;
  background: transparent;
  border: 1.5px solid var(--brand);
  border-radius: 20px;
  color: var(--brand);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 700;
  font-family: inherit;
  flex-shrink: 0;
  transition: opacity 0.2s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}
#share-btn:hover { opacity: 0.75; }
#share-btn:active { transform: scale(0.96); }

#share-btn.all-found {
  background: var(--brand);
  color: #ffffff;
  border-color: var(--brand);
}

@keyframes shareGentleThrob {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.09); filter: drop-shadow(0 0 8px rgba(124,77,255,0.45)); }
}
.share-gentle-throb {
  animation: shareGentleThrob 0.9s ease-in-out forwards;
}

#share-ticket-badge {
  font-size: var(--fs-sm);
  font-weight: 800;
}

@keyframes sharePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  45%       { transform: scale(1.10); opacity: 0.82; }
}
.share-pulse {
  animation: sharePulse 0.75s ease-in-out 3;
}

/* ── Bottom nav pill ────────────────────────────────────────────────── */
#bottom-nav {
  display: flex;
  justify-content: center;
  padding: 4px 16px calc(4px + env(safe-area-inset-bottom, 0px));
  flex-shrink: 0;
}

#nav-pill {
  display: flex;
  align-items: center;
  background: var(--card-bg);
  border-radius: 40px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.13);
  padding: 5px;
  gap: 2px;
}

.nav-btn {
  background: none;
  border: none;
  border-radius: 34px;
  width: 60px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--icon-color);
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.nav-btn.active {
  background: var(--brand);
  color: white;
}
.nav-btn:not(.active):hover {
  background: rgba(124,77,255,0.08);
  color: var(--brand);
}
.nav-btn:not(.active):active { color: var(--brand); }

/* ── Action bar (Undo / Clear / Hint) ──────────────────────────────── */
#action-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 12px;
  color: var(--icon-color);
  transition: color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.action-btn:hover { color: var(--brand); background: rgba(124,77,255,0.06); }
.action-btn:active { color: var(--brand); }
.action-btn svg { flex-shrink: 0; }

/* Hint button stays active regardless of game state */

/* ── Float animation ─────────────────────────────────────────────── */
.float-anim-wrapper {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
}

.float-anim-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  animation: floatUp 3s ease-out forwards;
  text-align: center;
}

@keyframes floatUp {
  0%   { opacity: 0; transform: translateY(20px) scale(0.55); }
  12%  { opacity: 1; transform: translateY(-6px) scale(1.08); }
  20%  { transform: translateY(0) scale(1.0); }
  72%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-70px); }
}

@keyframes shakeFloat {
  0%   { opacity: 0; transform: translateY(20px) scale(0.55); }
  10%  { opacity: 1; transform: translateY(-6px) scale(1.08); }
  16%  { transform: translateY(0) scale(1.0); }
  20%  { transform: translateX(-10px); }
  24%  { transform: translateX(10px); }
  28%  { transform: translateX(-10px); }
  32%  { transform: translateX(10px); }
  36%  { transform: translateX(-8px); }
  40%  { transform: translateX(8px); }
  44%  { transform: translateX(-5px); }
  48%  { transform: translateX(5px); }
  52%  { transform: translateX(0); }
  72%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-70px); }
}
.float-already .float-anim-inner { animation: shakeFloat 2.8s ease-out forwards; }

.float-hex-svg {
  display: block;
  overflow: visible;
}

.float-level {
  font-size: 17px;
  font-weight: 800;
  color: rgba(255,255,255,0.95);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}

.float-cheer {
  font-size: 17px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}

/* ── Throb animation ────────────────────────────────────────────────── */
@keyframes throb {
  0%, 100% { transform: scale(1); filter: none; }
  50%       { transform: scale(1.22); filter: drop-shadow(0 0 6px rgba(124,77,255,0.6)); }
}
.is-throbbing { animation: throb 0.75s ease-in-out infinite; }

/* ── Tile pulse — fill animation on polygon (matches tile-hint-poly pattern) */
/* Applied directly to <polygon> elements, not <g>, so fill animation works   */
:root            { --tile-pulse-fill: #d4d4d4; } /* slightly darker than white  */
html[data-theme="dark"] { --tile-pulse-fill: #585859; } /* lighter than #3a3a3c */

@keyframes tilePulse {
  0%, 100% { fill: var(--tile-neutral); }
  45%       { fill: var(--pulse-color, var(--tile-pulse-fill)); }
}
/* Opening board animation (neutral tile polygons, staggered by JS) */
.tile-pulse {
  animation: tilePulse 0.5s ease-in-out forwards;
}
/* Idle hint (2-3 adjacent neutral tile polygons, gentle opacity dip) */
@keyframes tileHintGentlePulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}
.tile-hint {
  animation: tileHintGentlePulse 1.6s ease-in-out forwards;
}
/* Opening animation for non-neutral tiles (played/selected) — opacity only */
@keyframes tilePulseAny {
  0%, 100% { opacity: 1; }
  45%       { opacity: 0.45; }
}
.tile-pulse-any {
  animation: tilePulseAny 0.5s ease-in-out forwards;
}

/* ── Swipe-to-browse-days hint ───────────────────────────────────── */
/* Overlays #submit-area (position: relative) — centred in the gap   */
/* between board controls and nav pill, equidistant from both edges. */
#swipe-day-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
#swipe-day-hint.visible { opacity: 1; }
.swipe-hint-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--board-fg);
}
/* Pointing finger sweeps left → right, eases out, fades, snaps back, repeats */
.swipe-hint-icon {
  display: block;
  animation: swipeFinger 2s ease-out infinite;
}
.swipe-hint-hand {
  display: block;
  transform: rotate(90deg);
}
@keyframes swipeFinger {
  0%   { transform: translateX(-22px); opacity: 0; }
  10%  { opacity: 1; }
  72%  { transform: translateX(18px);  opacity: 1; }
  88%  { transform: translateX(22px);  opacity: 0; }
  89%  { transform: translateX(-22px); opacity: 0; }
  100% { transform: translateX(-22px); opacity: 0; }
}
.swipe-hint-text {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.07em;
  color: inherit;
  text-align: center;
}

/* ── Manual HINT button — still uses a more prominent fill throb ─── */
@keyframes hintThrob {
  0%, 100% { fill: var(--tile-neutral); }
  50%       { fill: #f0c87a; }
}
.tile-hint-poly {
  animation: hintThrob 2.5s ease-in-out infinite !important;
}

/* ── Tap-to-select hint ─────────────────────────────────────────────── */
@keyframes tileSubmitHint {
  0%, 100% { opacity: 1; filter: none; }
  35%       { opacity: 0.55; filter: brightness(1.45); }
  70%       { opacity: 1; filter: brightness(1.12); }
}
.tile-submit-hint { animation: tileSubmitHint 0.8s ease-in-out; }


/* ── Reduce Motion: OS preference or in-app toggle ─────────────────── */
/* Suppresses decorative/distracting animations; leaves functional ones  */
@media (prefers-reduced-motion: reduce) {
  .float-anim-wrapper    { display: none !important; }
  .is-throbbing          { animation: none !important; }
  .share-pulse           { animation: none !important; }
  .tile-hint             { animation: none !important; fill: var(--tile-pulse-fill); }
  .tile-hint-poly        { animation: none !important; fill: var(--tile-pulse-fill); }
}
html[data-reduce-motion] .float-anim-wrapper { display: none !important; }
html[data-reduce-motion] .is-throbbing       { animation: none !important; }
html[data-reduce-motion] .share-pulse        { animation: none !important; }
html[data-reduce-motion] .tile-hint          { animation: none !important; fill: var(--tile-pulse-fill); }
html[data-reduce-motion] .tile-hint-poly     { animation: none !important; fill: var(--tile-pulse-fill); }
html[data-reduce-motion] .swipe-hint-icon    { animation: none !important; transform: translateX(0) !important; }

/* ── Tomorrow board — tile explosion on midnight ────────────────────── */
@keyframes tile-explode {
  to {
    transform: translate(var(--ex, 0px), var(--ey, 0px)) scale(0) rotate(var(--er, 0deg));
    opacity: 0;
  }
}
.tile-exploding {
  animation: tile-explode 0.7s cubic-bezier(0.55, 0, 1, 0.45) forwards;
  transform-origin: center;
}

/* ── Past game banner ───────────────────────────────────────────────── */
#past-game-banner {
  background: rgba(124,77,255,0.08);
  color: var(--brand);
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 8px;
  margin: 0 14px 4px;
  flex-shrink: 0;
}

/* ── Version tag ────────────────────────────────────────────────────── */
#version-tag {
  text-align: center;
  font-size: 1.0625rem;
  color: rgba(0,0,0,0.2);
  padding: 2px 0 4px;
  cursor: pointer;
  letter-spacing: 0.06em;
  transition: color 0.15s;
  user-select: none;
  flex-shrink: 0;
}
#version-tag:hover, #version-tag:focus { color: var(--brand); outline: none; }

/* ── Toast — positioned over the word text area (game-topbar) by JS ─── */
#toast {
  position: fixed;
  top: 50%; /* fallback; JS overrides with topbar centre */
  left: 50%;
  transform: translateX(-50%) translateY(calc(-50% - 12px));
  max-width: min(320px, calc(100vw - 32px));
  width: max-content;
  background: rgba(28, 28, 32, 0.94);
  color: #fff;
  padding: 11px 18px;
  border-radius: 14px;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.01em;
  white-space: normal;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.32), 0 2px 8px rgba(0,0,0,0.18);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.34, 1.3, 0.64, 1);
  z-index: 9000;
}
#toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(-50%);
}

/* ── Pull-to-refresh ────────────────────────────────────────────────── */
#ptr-indicator {
  position: absolute;
  top: -44px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
#ptr-spinner {
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(124,77,255,0.3);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Slide-up sheet ─────────────────────────────────────────────────── */
#game-back {
  position: fixed;
  left: 0; right: 0;
  top: 40%;
  bottom: 0;
  background: var(--sheet-bg);
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 150;
  transform: translateY(105%);
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1), top 0.32s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.32s;
}

#game-back.open {
  transform: translateY(0);
}

#game-back.full-screen {
  top: 0;
  border-radius: 0;
  background: var(--brand);
}

#panel-backdrop {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 149;
  pointer-events: none;
}

#back-header {
  background: var(--brand);
  color: white;
  flex-shrink: 0;
}

/* Safe-area top padding only needed when sheet covers the status bar */
#game-back.full-screen #back-header {
  padding-top: env(safe-area-inset-top, 0px);
}

#panel-drag-handle {
  width: 36px;
  height: 4px;
  background: rgba(255,255,255,0.35);
  border-radius: 2px;
  margin: 8px auto 4px;
}

/* Compact drag handle and title row in half-page mode */
#game-back:not(.full-screen) #panel-drag-handle {
  margin: 5px auto 2px;
}

#back-header-row {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  padding: 6px 0 10px;
  position: relative;
}

#game-back:not(.full-screen) #back-header-row {
  padding: 2px 0 6px;
}

#back-panel-title {
  grid-column: 2;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: white;
  text-align: center;
}

#back-btn {
  grid-column: 3;
  background: transparent;
  border: none;
  border-radius: 50%;
  width: 30px; height: 30px;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0 auto;
}
#back-btn:hover { background: rgba(255,255,255,0.18); }

/* Sheet tabs */
#back-tabs {
  display: flex;
  padding: 6px 10px 0;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#back-tabs::-webkit-scrollbar { display: none; }

.back-tab {
  flex-shrink: 0;
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 20px 20px 0 0;
  padding: 6px 14px;
  font-size: 1.0625rem;
  font-weight: 600;
  font-family: inherit;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: 0.02em;
}
.back-tab.active {
  background: #ffffff;
  color: var(--brand);
}
.back-tab:not(.active):hover {
  background: rgba(255,255,255,0.25);
  color: white;
}

#back-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--sheet-bg);
}

/* ── How to play ────────────────────────────────────────────────────── */
.how-section { margin-bottom: 16px; }
.how-section h3 {
  font-size: 1.0625rem;
  color: var(--brand);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
}
.how-section p, .how-section ul {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: #444;
}
.how-section ul { padding-left: 16px; }
.how-section li { margin-bottom: 3px; }

/* Rules: colour utility classes that reference CSS vars (no hard-coded hex) */
.how-clr-brand   { color: var(--brand); }
.how-clr-valid   { color: var(--tile-valid); }
.how-clr-invalid { color: var(--tile-invalid); }

/* Rules: SHUKUMA logo tiles */
.rsl-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 22px 0 26px;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,0.18));
}
.rsl-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 48px;
  background: var(--brand, #7c4dff);
  clip-path: path('M 3.5,10 Q 0,12 0,16 L 0,32 Q 0,36 3.5,38 L 17.5,46 Q 21,48 24.5,46 L 38.5,38 Q 42,36 42,32 L 42,16 Q 42,12 38.5,10 L 24.5,2 Q 21,0 17.5,2 Z');
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--brand, #7c4dff);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  transform: rotate(var(--rsl-r, 0deg));
  margin-left: -10px;
  position: relative;
  flex-shrink: 0;
}
/* Inner fill cut-out: card-bg fills the inner hex, leaving a brand-colour ring.
   z-index:-1 keeps it below the text content (which paints above negative-z positioned elements
   within the stacking context created by the nth-child z-index rules below). */
.rsl-tile::before {
  content: '';
  position: absolute;
  inset: 4px;
  background: var(--card-bg, #fff);
  clip-path: path('M 2.83,8.33 Q 0,10 0,13.33 L 0,26.67 Q 0,30 2.83,31.67 L 14.17,38.33 Q 17,40 19.83,38.33 L 31.17,31.67 Q 34,30 34,26.67 L 34,13.33 Q 34,10 31.17,8.33 L 19.83,1.67 Q 17,0 14.17,1.67 Z');
  z-index: -1;
}
.rsl-tile:nth-child(1) { z-index: 7; margin-left: 0; }
.rsl-tile:nth-child(2) { z-index: 6; }
.rsl-tile:nth-child(3) { z-index: 5; }
.rsl-tile:nth-child(4) { z-index: 4; }
.rsl-tile:nth-child(5) { z-index: 3; }
.rsl-tile:nth-child(6) { z-index: 2; }
.rsl-tile:nth-child(7) { z-index: 1; }

/* Rules: mini board demo animation */
.rules-demo-wrap {
  position: relative;
  height: 120px;
  margin: 2px 0 20px;
  overflow: hidden;
}
.rules-demo-stage {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 149px;
  height: 106px;
}
.rd-tile {
  width: 35px;
  height: 40px;
  position: absolute;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--rd-base, #d4d4d4);
  transition: background 0.1s;
}
html[data-theme="dark"] .rd-tile { background: #484848; }
.rd-tile.rd-lit { background: var(--brand); }
@keyframes rdTileFlash {
  0%   { background: var(--brand); transform: scale(1); }
  22%  { background: #fff; transform: scale(1.22); }
  50%  { background: var(--brand); transform: scale(1.1); }
  75%  { background: var(--brand); transform: scale(1.04); }
  100% { background: var(--rd-base, #d4d4d4); transform: scale(1); }
}
.rd-tile.rd-flash { animation: rdTileFlash 1s ease-out forwards; }
.rd-finger {
  position: absolute;
  font-size: 28px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

/* Rules: inline ticket icon */
.rules-tc {
  height: 1em;
  width: auto;
  display: inline-block;
  vertical-align: -0.12em;
  position: relative;
  margin-left: 1px;
}
/* Rules: hint cost badge next to hint name */
.rules-hint-cost {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--brand);
  margin-left: 4px;
  white-space: nowrap;
}

/* Rules: feedback section */
.how-section-feedback { text-align: center; }
.how-feedback-btn {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.6rem 1.6rem;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.how-feedback-btn:active { opacity: 0.82; }

/* ── Locale toggle ──────────────────────────────────────────────────── */
#locale-toggle {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.locale-btn {
  flex: 1;
  padding: 8px 10px;
  border: 1.5px solid rgba(0,0,0,0.15);
  border-radius: 8px;
  background: rgba(0,0,0,0.04);
  color: #666;
  font-size: 1.0625rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  font-family: inherit;
}
.locale-btn.active {
  background: var(--brand);
  border-color: var(--brand-dark);
  color: #fff;
  font-weight: 600;
}
.locale-btn:hover:not(.active) { background: rgba(0,0,0,0.09); color: #333; }

/* ── Answers panel ──────────────────────────────────────────────────── */
#answers-section { margin-top: 12px; }
#answers-reveal-btn { display: none !important; }

.answer-eye-btn {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: #ccc;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: color 0.2s;
  border-radius: 50%;
  min-width: 32px;
  min-height: 32px;
  justify-content: center;
}
.answer-eye-btn.revealed { color: var(--brand); }
.answer-eye-btn:hover { color: var(--brand); }

#answers-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.answer-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 1.0625rem;
}

.answer-word {
  min-width: 100px;
  font-weight: 700;
  color: var(--text-primary);
  font-size: 1.0625rem;
  letter-spacing: 0.5px;
  cursor: default;
  user-select: none;
  transition: filter 0.25s ease;
}
.answer-blurred {
  filter: blur(6px);
  color: var(--text-secondary);
}
.answer-blurred:hover,
.answer-blurred:active { filter: none; }
.answer-target .answer-word { color: var(--brand); }
.answer-target {
  background: rgba(124,77,255,0.06);
  border-radius: 6px;
  padding: 2px 4px;
  margin: 0 -4px;
}
.answer-mine .answer-word { color: #2a7a4f; text-decoration: underline dotted; }
.answer-mine {
  background: rgba(42,122,79,0.07);
  border-radius: 6px;
  padding: 2px 4px;
  margin: 0 -4px;
}

.def-btn {
  background: none;
  border: 1.5px solid rgba(0,0,0,0.25);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #666;
  cursor: pointer;
  padding: 0;
  line-height: 18px;
  text-align: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.def-btn:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

.def-box {
  font-size: 1.0625rem;
  color: #444;
  margin-top: 5px;
  padding: 6px 8px;
  background: rgba(0,0,0,0.05);
  border-radius: 6px;
  line-height: 1.4;
  width: 100%;
  grid-column: 1 / -1;
}

.answer-bar {
  flex: 1;
  background: #eee;
  border-radius: 4px;
  height: 8px;
  overflow: hidden;
}
.answer-fill {
  display: block;
  height: 100%;
  background: var(--brand);
  border-radius: 4px;
  transition: width 0.5s ease;
}
.answer-pct {
  min-width: 36px;
  text-align: right;
  color: #666;
  font-size: 1.0625rem;
}

/* ── Word list (found / locked / unlock) ─────────────────────────── */
#answers-scratchcard {
  margin-bottom: 12px;
}
.wl-section-hdr {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  padding: 10px 0 4px;
}
.wl-row {
  display: grid;
  grid-template-columns: 22px 1fr 130px 38px;
  grid-template-rows: 40px auto;
  column-gap: 6px;
  align-items: center;
  padding: 0;
  border-bottom: 1px solid var(--lb-row-border);
  transition: background 0.12s;
}
.wl-row.wl-found,
.wl-row.wl-revealed { cursor: pointer; }
.wl-row.wl-found:active,
.wl-row.wl-revealed:active { background: var(--brand-light); }
.wl-word {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.03em;
}
.wl-locked .wl-word {
  filter: blur(5px);
  user-select: none;
  -webkit-user-select: none;
}
.wl-locked.wl-admin-peek .wl-word {
  filter: none;
  user-select: text;
  -webkit-user-select: text;
}
.wl-len {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  text-align: center;
  font-variant-numeric: tabular-nums;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}
.wl-word {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  white-space: nowrap;
}
.wl-bar-track {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
}
.wl-pct {
  grid-column: 4;
  grid-row: 1;
  align-self: center;
}
.wl-pct-note {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-tertiary, #8e8e93);
  margin: 16px 0 4px;
  padding: 0;
}
.wl-reveal-wrapper {
  grid-column: 1 / -1;
  grid-row: 2;
  padding: 4px 0 10px;
}
.wl-unlock-row {
  padding: 10px 0 4px;
}
.wl-unlock-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border: 1.5px solid var(--brand);
  border-radius: 20px;
  background: transparent;
  color: var(--brand);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.wl-unlock-btn:active { opacity: 0.7; }

.sc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.sc-row:last-child { border-bottom: none; }

.sc-avatars {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 60px;
}

.sc-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  margin-left: -8px;
  flex-shrink: 0;
}

.sc-avatar:first-child { margin-left: 0; }

.sc-avatar-overflow {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e0e0e0;
  color: #666;
  font-size: 1.0625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  margin-left: -8px;
  flex-shrink: 0;
}

.sc-avatar-placeholder {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.07);
  flex-shrink: 0;
}

.sc-avatars[data-tappable="true"] { cursor: pointer; }

.sc-word {
  flex: 1;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tile-text);
  transition: filter 0.3s ease;
  pointer-events: none;
}

.sc-blurred { filter: blur(5px); }

.sc-pct {
  font-size: 1.0625rem;
  color: #bbb;
  flex-shrink: 0;
  min-width: 30px;
  text-align: right;
  pointer-events: none;
}

.sc-target .sc-word { color: var(--brand); }
.sc-mine .sc-word { color: #22c55e; }
.sc-empty { text-align: center; color: #bbb; font-size: 1.0625rem; padding: 14px 0; }

/* ── Scratchcard: today view ─────────────────────────────────────────── */
.sc-tomorrow-msg {
  text-align: center;
  color: var(--text-secondary);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.45;
  padding: 16px 12px 8px;
}
.sc-my-words-header {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 4px 8px;
}
.sc-my-word-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 4px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.sc-my-word-text {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--brand);
}
.sc-my-word-len {
  font-size: 1.0625rem;
  color: var(--text-muted);
}
.sc-no-word-msg {
  text-align: center;
  color: var(--text-muted);
  font-size: 1.0625rem;
  padding: 12px 0;
  font-style: italic;
}

/* ── Scratchcard: past-date rub-to-reveal ────────────────────────────── */
.sc-rub-hint {
  text-align: center;
  color: var(--text-muted);
  font-size: 1.0625rem;
  padding: 10px 12px 6px;
  font-style: italic;
}

/* ── Word list (found / locked) ────────────────────────────────────────────────────────────── */
.wl-section-hdr {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 10px 0 4px;
}
/* duplicate block — kept minimal to avoid conflicts with primary rules above */
.wl-locked .wl-len { display: none; }
.wl-unlock-row {
  padding: 10px 0 6px;
}
.wl-unlock-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border: 1.5px solid var(--brand);
  border-radius: 20px;
  background: transparent;
  color: var(--brand);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.wl-unlock-btn:active { opacity: 0.75; }

/* ── Generic ticket-spend confirmation modal ─────────────────────── */
#ticket-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#ticket-confirm-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}
#ticket-confirm-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: var(--card-bg, #fff);
  border-radius: 20px 20px 0 0;
  padding: 24px 24px 36px;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
}
#ticket-confirm-title {
  font-size: 1.15rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 8px;
  color: var(--text-primary);
}
#ticket-confirm-desc {
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: 1.45;
  margin-bottom: 18px;
}
#ticket-confirm-balance {
  background: var(--stat-box-bg, #f7f7f5);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tc-bal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-sm);
}
.tc-bal-label { color: var(--text-secondary); }
.tc-bal-val {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  color: var(--text-primary);
}
.tc-bal-val svg { stroke: var(--brand); flex-shrink: 0; }
.tc-cost-row { border-top: 1px solid var(--lb-row-border); padding-top: 8px; }
.tc-cost-val { color: #ef4444; }
.tc-after-row { border-top: 1px solid var(--lb-row-border); padding-top: 8px; }
#ticket-confirm-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hint-cancel-btn {
  background: none;
  border: none;
  font-size: 1.0625rem;
  color: rgba(0,0,0,0.4);
  padding: 8px;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
}

/* ── Scores tab: compact date nav ────────────────────────────────── */
/* ── Scores date header (no arrows — swipe or tap date to navigate) ─── */
#scores-date-hdr {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 4px 2px;
  position: relative;
}
.scores-sort-hdr-btn {
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  border-radius: 50%;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  margin: 0 auto;
}
.scores-sort-hdr-btn:active { opacity: 0.6; }
.scores-hdr-sort-popup {
  top: 100%;
  left: 0;
}
.admin-word-reveal-display {
  margin-top: 12px;
  padding: 16px;
  background: rgba(0,0,0,0.12);
  border-radius: 10px;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  font-family: monospace;
  color: var(--text-primary);
  user-select: none;
}
.scores-date-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 20px;
  color: var(--text-primary);
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
.scores-date-btn:hover { background: rgba(0,0,0,0.05); }
.scores-date-btn:active { background: rgba(0,0,0,0.09); }
#lb-date-label {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--tile-text);
  letter-spacing: -0.3px;
}

/* ── Scores tab: word row enhancements ───────────────────────────── */
.wl-row-right {  /* legacy compat */
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
/* New left/right columns for word rows */
.wl-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wl-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.wl-bar-track {
  width: 100%;
  flex-shrink: 0;
  height: 5px;
  background: rgba(0,0,0,0.09);
  border-radius: 3px;
  overflow: hidden;
}
.wl-bar-fill {
  height: 100%;
  background: rgba(0,0,0,0.18);
  border-radius: 3px;
  min-width: 2px;
  transition: width 0.4s ease;
}
.wl-bar-fill.wl-bar-found { background: var(--brand); }
@keyframes wl-shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}
.wl-bar-fill.wl-bar-loading {
  width: 55% !important;
  background: linear-gradient(90deg, rgba(0,0,0,0.10) 25%, rgba(0,0,0,0.22) 50%, rgba(0,0,0,0.10) 75%);
  background-size: 400px 100%;
  animation: wl-shimmer 1.4s infinite linear;
  transition: none;
}
.wl-pct.wl-pct-loading {
  color: transparent;
  background: linear-gradient(90deg, rgba(0,0,0,0.10) 25%, rgba(0,0,0,0.22) 50%, rgba(0,0,0,0.10) 75%);
  background-size: 400px 100%;
  animation: wl-shimmer 1.4s infinite linear;
  border-radius: 4px;
  display: inline-block;
  pointer-events: none;
  user-select: none;
}
.wl-pct {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-secondary);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wl-stats {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}
.wl-stats-muted { color: var(--text-secondary); }
.wl-tag {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: middle;
}
.wl-tag-revealed { background: rgba(251,191,36,0.15); color: #b45309; }
.wl-reveal-row { margin-top: 4px; }
.wl-reveal-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 2px solid var(--brand);
  border-radius: 20px;
  background: transparent;
  color: var(--brand);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.wl-reveal-btn:active { opacity: 0.7; }
/* Sort controls */
.wl-sort-bar {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px 0 10px;
}
.wl-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1.5px solid var(--lb-row-border);
  border-radius: 20px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wl-sort-btn:active { opacity: 0.7; }
.wl-sort-label { color: var(--text-primary); }
.wl-sort-popup {
  position: absolute;
  top: calc(100% - 4px);
  left: 0;
  z-index: 200;
  background: var(--card-bg, #fff);
  border: 1.5px solid var(--lb-row-border);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.14);
  overflow: hidden;
  min-width: 180px;
}
.wl-sort-opt {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--lb-row-border);
  padding: 12px 14px;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
}
.wl-sort-opt:last-child { border-bottom: none; }
.wl-sort-opt:active { background: var(--brand-light, rgba(0,0,0,0.04)); }
.wl-sort-opt.wl-sort-opt-active { font-weight: 700; color: var(--brand); }
/* My stats card */
.my-stats-card {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 8px 0;
  box-shadow: 0 1px 6px rgba(0,0,0,0.07);
}
.my-stats-hdr, .friends-found-hdr {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  padding-bottom: 6px;
}
.my-stats-hdr { margin-bottom: 2px; }
.my-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.my-stat-val {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.my-stat-lbl { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: 2px; }
.my-stats-cell { display: flex; flex-direction: column; align-items: flex-start; }
.friends-found-hdr { padding-top: 12px; }
.friends-found-sublabel {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  padding: 6px 0 2px;
  font-weight: 600;
}
.friends-send-all-row { padding: 6px 0 10px; }
.friends-send-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border: 1.5px solid var(--brand);
  border-radius: 20px;
  background: transparent;
  color: var(--brand);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.friends-send-all-btn:active { opacity: 0.7; }
.wl-def-btn {
  background: none;
  border: 1.5px solid var(--lb-row-border);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0;
  flex-shrink: 0;
}
.wl-def-btn:active { opacity: 0.6; }
.wl-def-panel {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.45;
  padding: 6px 8px 10px;
  background: var(--stat-box-bg, rgba(0,0,0,0.03));
  border-radius: 0 0 6px 6px;
  margin-top: -1px;
  border: 1px solid var(--lb-row-border);
  border-top: none;
}
.wl-def-entry { margin-bottom: 4px; }
.wl-def-entry:last-child { margin-bottom: 0; }
.wl-def-pos {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--brand);
  margin-right: 5px;
}
.wl-def-panel em { color: var(--text-muted); font-style: italic; }
.wl-def-via { display: block; font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 4px; }
/* Blank-tile substitute letter shown underlined in the word text */
.wl-blank-letter { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }

/* ── Scores tab: players section ─────────────────────────────────── */
.scores-players-hdr {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  padding: 14px 0 6px;
}
.player-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--lb-row-border);
}
.player-row:last-child { border-bottom: none; }
.player-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.player-info { flex: 1; min-width: 0; }
.player-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-best-word {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--brand);
  margin-top: 1px;
}
.player-meta {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: 1px;
}
.player-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}
.player-score-badge {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--brand);
}
.player-found-badge {
  font-size: var(--fs-sm);
  font-weight: 700;
  background: #22c55e;
  color: white;
  border-radius: 10px;
  padding: 1px 6px;
  letter-spacing: 0.04em;
}
.player-hint-btn {
  font-size: var(--fs-sm);
  font-weight: 600;
  background: none;
  border: 1.5px solid var(--brand);
  border-radius: 10px;
  padding: 2px 8px;
  color: var(--brand);
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 3px;
}
.player-hint-btn:active { opacity: 0.7; }
.scores-empty { text-align: center; color: var(--text-muted); font-size: var(--fs-sm); padding: 16px 0; }

/* ── Player list modal ───────────────────────────────────────────────── */
#player-modal,
#player-profile-modal {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

#player-modal-overlay,
#ppm-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.42);
}

#player-modal-card,
#ppm-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 72vh;
  background: #fff;
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

#player-modal-header,
#ppm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  flex-shrink: 0;
}

#player-modal-word,
#ppm-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--tile-text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex: 1;
  text-align: center;
}

#ppm-header #ppm-title { text-transform: none; }

#player-modal-close,
#ppm-close,
#ppm-back {
  background: rgba(0,0,0,0.07);
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #666;
  flex-shrink: 0;
  transition: background 0.15s;
}

#player-modal-close:hover,
#ppm-close:hover,
#ppm-back:hover { background: rgba(0,0,0,0.12); }

#player-modal-body,
#ppm-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}

.pm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  cursor: pointer;
  transition: background 0.12s;
}

.pm-row:hover { background: rgba(0,0,0,0.03); }
.pm-row:last-child { border-bottom: none; }

.pm-rank {
  font-weight: 700;
  font-size: 1.0625rem;
  color: #aaa;
  min-width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.pm-rank.pm-top3 { color: #d4a96a; }

.pm-avatar {
  width: 36px;
  height: 42px;  /* W:H = √3:2 pointy-top hex */
  clip-path: url(#hex-clip-rounded);
  color: #fff;
  font-size: 1.0rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pm-info { flex: 1; overflow: hidden; }

.pm-name {
  font-weight: 600;
  font-size: 1.0625rem;
  color: #222;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-meta {
  font-size: 1.0625rem;
  color: #999;
  margin-top: 1px;
}

.pm-word {
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--brand);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* ── Player profile ──────────────────────────────────────────────────── */
.ppm-avatar-lg {
  width: 68px;
  height: 78px;  /* W:H = √3:2 pointy-top hex */
  clip-path: url(#hex-clip-rounded);
  color: #fff;
  font-size: 1.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px auto 10px;
}

.ppm-name {
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 16px;
}

.ppm-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 16px 20px;
}

.ppm-stat-box {
  background: #f7f7fa;
  border-radius: 12px;
  padding: 12px 10px;
  text-align: center;
}

.ppm-stat-val {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--brand);
  letter-spacing: -0.3px;
}

.ppm-stat-lbl {
  font-size: 1.0625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #999;
  margin-top: 2px;
}

/* ── Admin palettes ──────────────────────────────────────────────────── */
#admin-palette-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
  max-height: 200px;
  overflow-y: auto;
}

.admin-palette-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.04);
  border-radius: 8px;
  border: 1.5px solid transparent;
  transition: border-color 0.15s;
}

.admin-palette-swatches {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}

.admin-palette-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.12);
}

.admin-palette-name-input {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 1.0625rem;
  color: #333;
  font-family: inherit;
  min-width: 0;
  cursor: pointer;
}

.admin-palette-name-input:focus {
  outline: none;
  cursor: text;
}

.admin-palette-apply-btn {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 11px;
  font-size: 1.0625rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
}

.admin-palette-apply-btn:hover { opacity: 0.85; }

.admin-palette-delete-btn {
  background: none;
  border: none;
  color: #ccc;
  cursor: pointer;
  font-size: 1.0625rem;
  padding: 4px;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.15s;
}

.admin-palette-delete-btn:hover { color: #ef4444; }

.admin-palette-save-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  align-items: center;
}

#admin-palette-name {
  flex: 1;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 1.0625rem;
  font-family: inherit;
  background: #f8f8f8;
  min-width: 0;
}

#admin-palette-name:focus { outline: 2px solid var(--brand); outline-offset: 1px; }

#admin-save-palette-btn {
  flex-shrink: 0;
  padding: 9px 14px;
  font-size: 1.0625rem;
  min-height: 38px;
}

/* ── Difficulty badge ────────────────────────────────────────────────── */
#difficulty-badge {
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  margin: 2px auto;
  width: fit-content;
  flex-shrink: 0;
  background: rgba(124,77,255,0.08);
  color: var(--brand);
  border: 1px solid rgba(124,77,255,0.2);
}
#difficulty-badge[data-difficulty="hard"] {
  background: rgba(230,150,30,0.12);
  color: #d97706;
  border-color: rgba(230,150,30,0.3);
}
#difficulty-badge[data-difficulty="extra-hard"] {
  background: rgba(239,68,68,0.10);
  color: #dc2626;
  border-color: rgba(239,68,68,0.3);
}

/* ── Shared section label ────────────────────────────────────────────── */
.section-label {
  font-size: 1.0625rem;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: bold;
  margin: 14px 0 8px;
}

/* ── Stats tab ───────────────────────────────────────────────────────── */
#stats-logged-out {
  text-align: center;
  padding: 24px 16px;
}
.stats-cta-icon { font-size: 2.5rem; margin-bottom: 10px; }
.stats-cta-text {
  font-size: 1.0625rem;
  color: #555;
  line-height: 1.5;
  margin-bottom: 16px;
}

.brand-btn {
  background: var(--brand);
  color: white;
  border: none;
  border-radius: 22px;
  padding: 10px 24px;
  font-size: 1.0625rem;
  font-weight: bold;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s;
}
.brand-btn:hover { background: var(--brand-dark); }

#user-profile-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0 12px;
  border-bottom: 1px solid #eee;
  margin-bottom: 14px;
}
#user-avatar {
  width: 64px;
  height: 74px;
  clip-path: url(#hex-clip-rounded);
  background: var(--brand);
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#user-info-col { flex: 1; min-width: 0; }
#user-display-name {
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.1;
}
#user-email-text {
  font-size: 1.0625rem;
  color: #888;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#user-locale-text {
  font-size: 1.0625rem;
  color: #999;
  margin-top: 2px;
}
#signout-btn {
  background: none;
  border: 1px solid #ddd;
  border-radius: 14px;
  padding: 6px 12px;
  font-size: 1.0625rem;
  color: #666;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
#signout-btn:hover { border-color: var(--brand); color: var(--brand); }

#stats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
#stats-grid .stat-box {
  flex: 1 1 calc(33% - 6px);
  min-width: 0;
}
#stats-grid .stat-box-wide {
  flex: 1 1 calc(50% - 4px);
}
.stat-box {
  background: var(--stat-box-bg);
  border-radius: 12px;
  padding: 14px 4px 10px;
  text-align: center;
}
.stat-val {
  font-size: 1.9rem;
  font-weight: bold;
  color: var(--brand);
  line-height: 1;
}
.stat-lbl {
  font-size: 1.0625rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 5px;
}

/* ── Badges grid ─────────────────────────────────────────────────────── */
#badges-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px 6px;
  margin-bottom: 8px;
}
.badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 6px 2px;
  border-radius: 12px;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.badge-item:hover, .badge-item:focus-visible { background: rgba(0,0,0,0.04); }
.badge-hex {
  width: 54px;
  height: 62px;  /* W:H = √3:2 ≈ 0.866 — matches game board pointy-top hex */
  clip-path: url(#hex-clip-rounded);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.badge-hex svg {
  width: 26px;
  height: 26px;
  color: #c8c8c8;
}
.badge-item.earned .badge-hex { background: #ffffff; }
.badge-item.earned .badge-hex svg { color: var(--brand); }
.badge-item.locked .badge-hex { filter: none; opacity: 1; }
.badge-name {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.2;
  overflow-wrap: break-word;
  hyphens: none;
}
.badge-item.locked .badge-name { color: #bbb; }
.badge-item.earned .badge-name { color: var(--brand); font-weight: 600; }

/* ── Stats grid extension ────────────────────────────────────────────── */
.stat-box-wide {
  flex: 0 0 calc(50% - 4px);
  width: calc(50% - 4px);
}

/* ── Streak widget ───────────────────────────────────────────────────── */
#streak-widget {
  background: var(--word-box-bg);
  border-radius: 16px;
  padding: 16px 12px 12px;
  margin-bottom: 16px;
}
.streak-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.streak-hero-icon svg {
  width: 40px;
  height: 40px;
  color: #f97316;
}
.streak-hero-count {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}
.streak-hero-label {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.streak-best {
  margin-left: auto;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  background: rgba(0,0,0,0.06);
  padding: 4px 10px;
  border-radius: 20px;
}
.streak-days {
  display: flex;
  justify-content: space-between;
  gap: 4px;
}
.streak-day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.streak-day-flame {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
}
.streak-day.played .streak-day-flame {
  border-color: #f97316;
  background: #fff7ed;
}
.streak-day.today .streak-day-flame {
  border-width: 2.5px;
}
.streak-day.played .streak-day-flame svg {
  width: 18px;
  height: 18px;
  color: #f97316;
}
.streak-day-name {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: uppercase;
}
.streak-day.today .streak-day-name {
  color: var(--brand);
  font-weight: 700;
}

/* ── Streak freeze inventory ─────────────────────────────────────────── */
.streak-freeze-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.07);
}
.streak-freeze-label {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-weight: 600;
  flex: 1;
}
.streak-freeze-icons {
  display: flex;
  gap: 6px;
}
.streak-freeze-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e0f2fe;
  color: #0284c7;
}
.streak-freeze-icon.used {
  background: rgba(0,0,0,0.06);
  color: #aaa;
}
.streak-freeze-icon svg { width: 18px; height: 18px; }

/* ── Streak extended UI ──────────────────────────────────────────────── */
.streak-perfect {
  font-size: var(--fs-sm);
  color: #7c3aed;
  font-weight: 700;
  background: rgba(124,58,237,0.08);
  border-radius: 20px;
  padding: 5px 12px;
  margin-bottom: 10px;
  display: inline-block;
}
.streak-at-risk-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: var(--fs-sm);
  color: #92400e;
  font-weight: 500;
  flex-wrap: wrap;
}
@media (prefers-color-scheme: dark) {
  .streak-at-risk-banner { background: #422006; border-color: #92400e; color: #fde68a; }
}
:root[data-theme="dark"] .streak-at-risk-banner { background: #422006; border-color: #92400e; color: #fde68a; }
:root[data-theme="light"] .streak-at-risk-banner { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.streak-freeze-btn {
  background: #f97316;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.streak-freeze-btn:active { opacity: 0.8; }
.streak-no-freeze {
  font-size: var(--fs-xs, 12px);
  color: #b45309;
  font-style: italic;
}
.streak-bonus-info {
  font-size: var(--fs-sm);
  color: #16a34a;
  font-weight: 600;
  background: rgba(22,163,74,0.08);
  border-radius: 20px;
  padding: 5px 12px;
  margin-bottom: 10px;
  display: inline-block;
}
.streak-holiday-info {
  font-size: var(--fs-sm);
  color: #0369a1;
  font-weight: 600;
  background: rgba(3,105,161,0.08);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 10px;
}
.streak-shop {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.07);
}
.streak-shop-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  margin-top: 10px;
}
.streak-shop-label:first-child { margin-top: 0; }
.streak-shop-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.streak-shop-btn {
  flex: 1;
  min-width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--word-box-bg);
  border: 1.5px solid rgba(0,0,0,0.1);
  border-radius: 10px;
  padding: 8px 6px;
  font-size: var(--fs-base, 17px);
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.15s;
}
.streak-shop-btn:active { background: rgba(0,0,0,0.06); }
.streak-shop-cost {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-secondary);
}
.streak-holiday-btn { border-color: #0369a1; color: #0369a1; }
.streak-holiday-btn .streak-shop-cost { color: #0369a1; }

/* ── Pending gift cards ──────────────────────────────────────────────── */
#pending-gifts-container { margin-bottom: 12px; }
.pending-gifts-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.pending-gift-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--word-box-bg);
  border: 1.5px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  transition: opacity 0.2s;
}
.pgc-icon { font-size: 1.5rem; line-height: 1; }
.pgc-info { flex: 1; }
.pgc-from { font-size: var(--fs-sm); font-weight: 700; color: var(--text-primary); }
.pgc-desc { font-size: var(--fs-sm); color: var(--text-secondary); }
.pgc-accept-btn {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  min-height: 36px;
  white-space: nowrap;
}
.pgc-accept-btn:disabled { opacity: 0.5; cursor: default; }

/* ── Gift modal ──────────────────────────────────────────────────────── */
#gift-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#gift-modal[hidden] { display: none; }
#gift-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}
#gift-modal-panel {
  position: relative;
  background: var(--panel-bg, #fff);
  border-radius: 20px 20px 0 0;
  padding: 20px 20px 36px;
  width: 100%;
  max-width: 480px;
  z-index: 1;
  box-shadow: 0 -4px 32px rgba(0,0,0,0.15);
}
.gift-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.gift-modal-heading {
  font-size: var(--fs-base);
  font-weight: 800;
  color: var(--text-primary);
}
.gift-modal-close {
  background: rgba(0,0,0,0.06);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gift-section {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.gift-section:last-child { border-bottom: none; margin-bottom: 0; }
.gift-section-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.gift-ticket-row {
  display: flex;
  gap: 8px;
}
.gift-ticket-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: var(--word-box-bg);
  border: 1.5px solid rgba(0,0,0,0.1);
  border-radius: 10px;
  padding: 10px 6px;
  font-size: var(--fs-base);
  font-weight: 800;
  color: var(--text-primary);
  cursor: pointer;
  min-height: 60px;
}
.gift-ticket-btn:active { opacity: 0.7; }
.gift-action-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--word-box-bg);
  border: 1.5px solid rgba(0,0,0,0.1);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  min-height: 48px;
}
.gift-action-btn:active { opacity: 0.7; }
.gift-cost {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

/* ── Friend row gift button ───────────────────────────────────────────── */
.friend-gift-btn {
  background: none;
  border: none;
  font-size: 1.3rem;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 8px;
  line-height: 1;
  flex-shrink: 0;
}
.friend-gift-btn:active { opacity: 0.6; }

/* ── Admin notification config ───────────────────────────────────────── */
.admin-notif-block {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
  background: var(--word-box-bg);
}
.admin-notif-header { margin-bottom: 8px; }
.admin-notif-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.an-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-primary);
}
.admin-notif-note {
  font-size: var(--fs-sm);
  color: #0369a1;
  background: rgba(3,105,161,0.07);
  border-radius: 6px;
  padding: 5px 8px;
  margin-bottom: 8px;
}
.admin-notif-fields { display: flex; flex-direction: column; gap: 6px; }
.an-field-label {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-weight: 600;
  margin-top: 4px;
}
.an-body { resize: vertical; min-height: 52px; }

/* ── Friends section ─────────────────────────────────────────────────── */
#friends-section { margin-top: 4px; }
.section-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  margin-top: 20px;
}
.friends-invite-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--brand);
  background: transparent;
  color: var(--brand);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
#friends-list { display: flex; flex-direction: column; gap: 2px; }
.friend-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.12s;
}
.friend-row:hover { background: rgba(0,0,0,0.04); }
.friend-avatar {
  width: 40px;
  height: 46px;  /* W:H = √3:2 pointy-top hex */
  clip-path: url(#hex-clip-rounded);
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.friend-info { flex: 1; }
.friend-name { font-weight: 600; font-size: var(--fs-sm); color: var(--text-primary); }
.friend-words { font-size: var(--fs-sm); color: var(--text-secondary); }
.friend-chevron { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; }
.friends-empty { font-size: var(--fs-sm); color: var(--text-secondary); text-align: center; padding: 16px 0; }
.friends-loading { font-size: var(--fs-sm); color: var(--text-secondary); padding: 12px 0; }

/* ── Badge info modal ────────────────────────────────────────────────── */
#badge-info-modal {
  position: fixed;
  inset: 0;
  z-index: 1800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#badge-info-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
#badge-info-card {
  position: relative;
  background: var(--card-bg);
  border-radius: 24px;
  padding: 28px 24px 24px;
  width: 100%;
  max-width: 300px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
#badge-info-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 4px;
}
.bim-icon {
  width: 72px;
  height: 72px;
  clip-path: url(#hex-clip-rounded);
  background: #ede7f6;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.bim-icon svg {
  width: 36px;
  height: 36px;
  color: var(--brand);
}
.bim-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
}
.bim-desc {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}
.bim-status {
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 20px;
  margin-top: 4px;
}
.bim-status.earned { background: #ede7f6; color: var(--brand); }
.bim-status.locked { background: rgba(0,0,0,0.06); color: var(--text-secondary); }

/* ── Leaderboard ─────────────────────────────────────────────────────── */
/* #lb-date-nav removed — date nav now lives in #scores-date-nav (see above) */
.lb-meta {
  display: block;
  font-size: 1.0625rem;
  color: #aaa;
  margin-top: 1px;
  grid-column: 1 / -1;
}

/* #lb-filter-row, #lb-loading, #lb-noauth, #lb-list removed — replaced by #scores-players */
.lb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--lb-row-border);
  font-size: 1.0625rem;
}
.lb-row-me { background: rgba(124,77,255,0.06); border-radius: 6px; padding: 10px 6px; }
.lb-rank { min-width: 22px; font-weight: bold; color: #aaa; text-align: center; }
.lb-rank.top3 { color: #d4a96a; }
.lb-name { flex: 1; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score { font-weight: bold; color: var(--brand); min-width: 24px; text-align: right; }
.lb-level { color: #888; font-size: 1.0625rem; min-width: 80px; text-align: right; }
.lb-empty { text-align: center; color: #aaa; padding: 20px 0; font-size: 1.0625rem; }

/* ── Word distribution ───────────────────────────────────────────────── */
.wd-section { margin-bottom: 18px; }
.wd-section-title {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #999;
  padding: 12px 0 6px;
}
.wd-section-title:first-child { padding-top: 2px; }
.wd-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid #f0f0ec;
  font-size: 1.0625rem;
}
.wd-word {
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.06em;
  color: #1f2937;
  min-width: 90px;
  text-transform: uppercase;
}
.wd-bar-wrap {
  flex: 1;
  background: #f0ede6;
  border-radius: 3px;
  height: 10px;
  overflow: hidden;
}
.wd-bar {
  height: 100%;
  background: var(--brand);
  border-radius: 3px;
  min-width: 6px;
  transition: width 0.4s ease;
}
.wd-bar.is-target { background: var(--tile-played); }
.wd-count {
  font-weight: 700;
  color: var(--brand);
  min-width: 20px;
  text-align: right;
  font-size: 1.0625rem;
}
.wd-level {
  color: #999;
  font-size: 1.0625rem;
  min-width: 62px;
  text-align: right;
}

/* ── Auth modal ──────────────────────────────────────────────────────── */
#auth-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#auth-modal[hidden] { display: none; }

#auth-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}
#auth-card {
  position: relative;
  background: white;
  width: 100%;
  max-width: 480px;
  border-radius: 20px 20px 0 0;
  padding: 20px 20px 36px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 1;
}
#auth-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #f0f0ec;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 1.0625rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
}
#auth-icon { font-size: 2rem; text-align: center; }
#auth-title {
  font-size: 1.15rem;
  font-weight: bold;
  text-align: center;
  color: #222;
  margin: 0;
}
#auth-subtitle {
  font-size: 1.0625rem;
  color: #888;
  text-align: center;
  line-height: 1.45;
  margin: 0;
}
#auth-error {
  background: #fff0f0;
  border: 1px solid #ffcccc;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 1.0625rem;
  color: #c00;
}
#auth-card input {
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 1.0625rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
}
#auth-card input:focus { border-color: var(--brand); }
.auth-primary-btn {
  background: var(--brand);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 13px;
  font-size: 1.0625rem;
  font-weight: bold;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s;
}
.auth-primary-btn:hover { background: var(--brand-dark); }
.auth-primary-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.auth-or {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ccc;
  font-size: 1.0625rem;
}
.auth-or::before, .auth-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #eee;
}
.auth-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: white;
  border: 1.5px solid #e0e0e0;
  border-radius: 12px;
  padding: 12px;
  font-size: 1.0625rem;
  font-family: inherit;
  font-weight: bold;
  color: #444;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.auth-google-btn:hover { border-color: #aaa; background: #fafafa; }
#auth-guest {
  background: none;
  border: none;
  color: #aaa;
  font-size: 1.0625rem;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  padding: 4px 0;
  text-decoration: underline;
}
.auth-switch-row {
  text-align: center;
  font-size: 1.0625rem;
  color: #888;
  margin: 0;
}
.auth-link-btn {
  background: none;
  border: none;
  color: var(--brand);
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

/* ── Changelog modal ─────────────────────────────────────────────────── */
#changelog-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#changelog-modal[hidden] { display: none; }
#changelog-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}
#changelog-card {
  position: relative;
  background: #fff;
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
}
#changelog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 10px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}
#changelog-header h2 { margin: 0; font-size: 1.0625rem; color: #222; }
#changelog-close {
  background: none;
  border: none;
  font-size: 1.1rem;
  color: #888;
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
}
#force-update-btn {
  margin: 10px 14px 4px;
  padding: 10px;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  font-size: 1.0625rem;
  color: #555;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
#force-update-btn:hover { background: #ececec; }
#changelog-list {
  overflow-y: auto;
  flex: 1;
  padding: 8px 14px 20px;
}
.cl-entry {
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}
.cl-entry:last-child { border-bottom: none; }
.cl-version-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.cl-version { font-weight: 700; font-size: 1.0625rem; color: #222; }
.cl-badge {
  background: var(--brand);
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cl-date { margin-left: auto; font-size: 1.0625rem; color: #aaa; }
.cl-changes { margin: 0; padding-left: 18px; }
.cl-changes li {
  font-size: 1.0625rem;
  color: #555;
  line-height: 1.5;
  margin-bottom: 2px;
}
.cl-latest .cl-changes li { color: #333; }

/* ── Settings tab ────────────────────────────────────────────────────── */
.settings-section {
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.settings-section:last-child { border-bottom: none; }
.settings-section-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  cursor: pointer;
  min-height: 44px;
}
.settings-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 10px;
}
.settings-label {
  font-size: var(--fs-base);
  color: var(--text-primary);
  font-weight: 500;
}
.settings-toggle {
  appearance: none;
  -webkit-appearance: none;
  width: 48px;
  height: 28px;
  border-radius: 14px;
  background: #c7c7cc;
  cursor: pointer;
  position: relative;
  transition: background 0.22s;
  flex-shrink: 0;
}
.settings-toggle::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transition: transform 0.22s;
}
.settings-toggle:checked { background: var(--brand); }
.settings-toggle:checked::after { transform: translateX(20px); }
html[data-theme="dark"] .settings-toggle { background: #48484a; }

/* ── Text size selector ─────────────────────────────────────────────── */
.text-size-grid {
  display: flex;
  gap: 8px;
}
.text-size-btn {
  flex: 1;
  padding: 10px;
  border-radius: 12px;
  border: 2px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.04);
  color: rgba(0,0,0,0.6);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  min-height: 48px;
}
.text-size-btn:nth-child(1) { font-size: var(--fs-sm); }
.text-size-btn:nth-child(2) { font-size: 1.25rem; }
.text-size-btn:nth-child(3) { font-size: 1.6rem; }
.text-size-btn.active { border-color: var(--brand); color: var(--brand); }

.tile-font-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.tile-font-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 6px 8px;
  border-radius: 12px;
  border: 2px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.04);
  color: rgba(0,0,0,0.6);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  min-height: 58px;
}
.tile-font-sample {
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1;
}
.tile-font-name {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.75;
}
.tile-font-btn.active {
  border-color: var(--brand);
  color: var(--brand);
}
.tile-font-btn.active .tile-font-name { opacity: 1; }

/* Override the SVG presentation attribute so the CSS tile-font-family var wins */
.hex-tile text {
  font-family: var(--tile-font-family, 'Arial Black', 'Arial Bold', Arial, 'Helvetica Neue', sans-serif);
}

/* ── Submit button ──────────────────────────────────────────────────── */
/* Submit area fills the flex gap between board-controls and nav pill;
   the button inside is automatically vertically centred in that space. */
#submit-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  pointer-events: none;
  position: relative;
}
/* Hex submit button — same footprint as a game tile */
#submit-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center;
}
#submit-btn:active { transform: scale(0.93); }

@keyframes submitPop {
  0%   { transform: scale(1);    opacity: 1; }
  28%  { transform: scale(1.38); opacity: 1; }
  100% { transform: scale(0.12); opacity: 0; }
}
#submit-btn.submit-pop {
  animation: submitPop 0.38s cubic-bezier(0.3, 0, 0.7, 1) forwards;
  pointer-events: none;
}

/* High-contrast light mode: checkmark must be black on yellow */
html[data-colour="highcontrast"]:not([data-theme="dark"]) #submit-btn polyline {
  stroke: #000;
}


/* ── Dark mode 3-way selector ───────────────────────────────────────── */
.theme-mode-picker {
  display: flex;
  border: 1.5px solid var(--lb-row-border);
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}
.theme-mode-btn {
  flex: 1;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.theme-mode-btn + .theme-mode-btn {
  border-left: 1.5px solid var(--lb-row-border);
}
.theme-mode-btn.active {
  background: var(--brand);
  color: #fff;
}
.theme-mode-btn:not(.active):active { opacity: 0.7; }

/* ── Topbar cheer ticker ────────────────────────────────────────────── */
#cheer-ticker {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.82);
  border-radius: 26px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
#cheer-ticker[hidden] { display: none; }
#cheer-ticker-text {
  display: block;
  white-space: nowrap;
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  animation: tickerScroll 4.2s ease-in forwards;
}
@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  55%  { transform: translateX(0); }
  100% { transform: translateX(-160%); }
}

/* Keep me colourful sublabel */
.settings-sublabel {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 2px;
}

/* Theme picker — category groups */
.theme-category { margin-top: 12px; }
.theme-category:first-child { margin-top: 4px; }
.theme-cat-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* Theme button grid — 3-column on all screen sizes */
.colour-theme-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.colour-theme-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 6px 8px;
  border-radius: 10px;
  border: 2px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.03);
  color: rgba(0,0,0,0.65);
  font-size: var(--fs-sm);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  min-height: 52px;
  text-align: center;
}
.colour-theme-btn.active {
  border-color: var(--brand);
  background: rgba(124,77,255,0.06);
  color: var(--brand);
}
.theme-btn-label { font-size: var(--fs-sm); line-height: 1.25; }
.theme-btn-emoji { font-size: 1.1rem; line-height: 1; }

/* Pride theme button — gradient outline when selected */
.colour-theme-btn[data-theme="pride"].active {
  border-color: transparent;
  background:
    linear-gradient(var(--card-bg, #fff), var(--card-bg, #fff)) padding-box,
    linear-gradient(135deg, #E40303 0%, #FF8C00 20%, #FFED00 40%, #008026 60%, #004DFF 80%, #750787 100%) border-box;
  color: #750787;
}
html[data-theme="dark"] .colour-theme-btn[data-theme="pride"].active {
  border-color: transparent;
  background:
    linear-gradient(var(--card-bg, #1c1c1e), var(--card-bg, #1c1c1e)) padding-box,
    linear-gradient(135deg, #E40303 0%, #FF8C00 20%, #FFED00 40%, #008026 60%, #004DFF 80%, #750787 100%) border-box;
  color: #C084FC;
}

/* Gradient colour swatch strip at top of each theme button */
.theme-gradient-swatch {
  display: block;
  width: 100%;
  height: 22px;
  border-radius: 5px;
  flex-shrink: 0;
}

/* Legacy — keep swatch dots working for any inline use */
.theme-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

/* ── Theme colour dropdown ─────────────────────────────────────────── */
#theme-picker { position: relative; }

.theme-dd-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: var(--card-bg, #fff);
  border: 1.5px solid rgba(0,0,0,0.1);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  text-align: left;
  transition: border-color 0.15s;
}
.theme-dd-trigger:hover { border-color: var(--brand); }
.theme-dd-trigger.is-open {
  border-color: var(--brand);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}
.theme-dd-chevron {
  margin-left: auto;
  font-size: 0.85em;
  color: var(--text-secondary);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.theme-dd-trigger.is-open .theme-dd-chevron { transform: rotate(180deg); }

.theme-dd-panel {
  position: absolute;
  left: 0; right: 0; top: 100%;
  z-index: 120;
  background: var(--card-bg, #fff);
  border: 1.5px solid var(--brand);
  border-top: none;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  overflow-y: auto;
  max-height: 300px;
  padding: 4px 0 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.tdp-cat-label {
  padding: 10px 14px 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tdp-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 14px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  text-align: left;
  transition: background 0.1s;
}
.tdp-item:hover { background: var(--brand-light, #ede7f6); }
.tdp-item.is-active { background: var(--brand-light, #ede7f6); }

.tdp-swatch {
  width: 28px;
  height: 20px;
  border-radius: 4px;
  flex-shrink: 0;
}
.theme-dd-trigger .tdp-swatch {
  width: 34px;
  height: 22px;
  border-radius: 5px;
}
.tdp-emoji { font-size: 1.1em; line-height: 1; flex-shrink: 0; }
.tdp-name { flex: 1; font-weight: 500; }
.tdp-check {
  margin-left: auto;
  color: var(--brand);
  font-weight: 700;
  font-size: 0.9em;
  opacity: 0;
  flex-shrink: 0;
}
.tdp-item.is-active .tdp-check { opacity: 1; }

/* Dark mode */
html[data-theme="dark"] .theme-dd-trigger { border-color: rgba(255,255,255,0.12); }
html[data-theme="dark"] .theme-dd-trigger:hover,
html[data-theme="dark"] .theme-dd-trigger.is-open { border-color: var(--dk-brand, #a78bfa); }
html[data-theme="dark"] .theme-dd-panel {
  border-color: var(--dk-brand, #a78bfa);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
html[data-theme="dark"] .tdp-item:hover,
html[data-theme="dark"] .tdp-item.is-active { background: rgba(167,139,250,0.15); }
html[data-theme="dark"] .tdp-check { color: var(--dk-brand, #a78bfa); }
html[data-theme="dark"] .tdp-cat-label { color: rgba(255,255,255,0.35); }

/* High contrast overrides */
html[data-colour="highcontrast"] .theme-dd-trigger { border-color: rgba(255,255,255,0.5); }
html[data-colour="highcontrast"] .theme-dd-trigger:hover,
html[data-colour="highcontrast"] .theme-dd-trigger.is-open { border-color: #FFFF00; }
html[data-colour="highcontrast"] .theme-dd-panel { border-color: #FFFF00; }
html[data-colour="highcontrast"] .tdp-item:hover,
html[data-colour="highcontrast"] .tdp-item.is-active { background: rgba(255,255,0,0.12); }
html[data-colour="highcontrast"] .tdp-check { color: #FFFF00; }
html[data-colour="highcontrast"] .tdp-cat-label { color: rgba(255,255,255,0.5); }

#locale-toggle-settings {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.settings-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.settings-action-btn {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.03);
  color: rgba(0,0,0,0.75);
  font-size: var(--fs-base);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
  min-height: 44px;
}
.settings-action-btn:hover { background: rgba(0,0,0,0.07); }
.settings-danger-btn {
  border-color: rgba(239,68,68,0.3);
  color: #dc2626;
}
.settings-danger-btn:hover { background: rgba(239,68,68,0.06); }

.settings-footer {
  text-align: center;
  padding: 16px 0 8px;
}
#settings-version-label {
  font-size: var(--fs-xs);
  color: rgba(0,0,0,0.3);
}

/* ── Push notification prompt banner ─────────────────────────────────── */
#push-prompt-banner {
  margin: 0 16px 4px;
}
.push-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--brand);
  color: #fff;
  border-radius: 14px;
  padding: 14px 14px 12px;
}
.push-banner-denied {
  background: rgba(0,0,0,0.06);
  color: var(--text-primary);
}
html[data-theme="dark"] .push-banner-denied {
  background: rgba(255,255,255,0.07);
}
.push-banner-icon-wrap {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.push-banner-denied .push-banner-icon-wrap {
  background: rgba(0,0,0,0.08);
  color: var(--text-secondary);
}
html[data-theme="dark"] .push-banner-denied .push-banner-icon-wrap {
  background: rgba(255,255,255,0.1);
}
.push-banner-body {
  flex: 1;
  min-width: 0;
}
.push-banner-title {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 3px;
}
.push-banner-sub {
  font-size: var(--fs-xs);
  line-height: 1.4;
  margin: 0 0 10px;
  opacity: 0.9;
}
.push-banner-denied .push-banner-sub {
  opacity: 0.75;
  margin-bottom: 0;
}
.push-banner-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.push-banner-enable {
  background: #fff;
  color: var(--brand);
  border: none;
  border-radius: 20px;
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 6px 14px;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
}
.push-banner-enable:active { opacity: 0.75; }
.push-banner-later {
  background: none;
  border: none;
  color: rgba(255,255,255,0.75);
  font-size: var(--fs-xs);
  font-family: inherit;
  cursor: pointer;
  padding: 6px 4px;
  -webkit-tap-highlight-color: transparent;
}
.push-banner-later:active { opacity: 0.6; }

/* ── Admin panel ─────────────────────────────────────────────────────── */
#admin-panel {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #f2f2f7;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#admin-header {
  background: #1a1a1a;
  color: white;
  padding-top: env(safe-area-inset-top, 0px);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
#admin-header-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
}
#admin-menu-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 4px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
#admin-section-title {
  flex: 1;
  font-size: var(--fs-lg);
  font-weight: 700;
  margin: 0;
}
#admin-close {
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 50%;
  width: 32px; height: 32px;
  color: white;
  font-size: 1.0625rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
/* ── Admin sidebar drawer ───────────────────────────────────────────── */
#admin-nav {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 230px;
  background: #111;
  z-index: 2100;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
#admin-nav.open { transform: translateX(0); }
#admin-sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 2050;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s;
}
#admin-sidebar-overlay.open { opacity: 1; pointer-events: auto; }
.admin-nav-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 15px 20px;
  border: none;
  border-left: 3px solid transparent;
  background: transparent;
  color: rgba(255,255,255,0.65);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-left-color 0.15s;
  white-space: nowrap;
}
.admin-nav-btn:active { background: rgba(255,255,255,0.08); }
.admin-nav-btn.active {
  background: rgba(255,255,255,0.1);
  border-left-color: var(--brand, #7c4dff);
  color: #fff;
}
#admin-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
/* ── Preset theme pills ──────────────────────────────────────────────── */
.admin-presets h3 { margin-bottom: 10px; }
.theme-preset-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.theme-preset {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1.5px solid #e0e0e0;
  border-radius: 20px;
  background: #fff;
  font-size: var(--fs-sm);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  color: #333;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.theme-preset:hover { border-color: var(--brand); }
.theme-preset.active {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, white);
  color: var(--brand-dark, #333);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 20%, transparent);
}
.preset-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ── Side-by-side palette grid ────────────────────────────────────────── */
.palette-header {
  display: grid;
  grid-template-columns: 1fr 40px 28px 40px;
  gap: 4px;
  align-items: center;
  margin-bottom: 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}
.palette-mode-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #999;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.palette-group-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #bbb;
  margin: 11px 0 3px;
}
.palette-row2 {
  display: grid;
  grid-template-columns: 1fr 40px 28px 40px;
  gap: 4px;
  align-items: center;
  padding: 2px 0;
}
.palette-row2.prow-sub { opacity: 0.72; }
.prow-label {
  font-size: var(--fs-sm);
  color: rgba(0,0,0,0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.palette-row2 input[type="color"] {
  width: 40px;
  height: 34px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  padding: 2px 3px;
  background: none;
}
.palette-row2 input[type="color"]:hover { border-color: var(--brand); }
.suggest-dark {
  font-size: var(--fs-sm);
  background: none;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  color: #aaa;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s;
}
.suggest-dark:hover { border-color: var(--brand); color: var(--brand); }

/* Advanced collapsible */
.admin-advanced {
  margin-top: 10px;
}
.admin-advanced summary {
  font-size: var(--fs-sm);
  color: #aaa;
  cursor: pointer;
  padding: 6px 2px;
  user-select: none;
  list-style: none;
}
.admin-advanced summary::-webkit-details-marker { display: none; }
.admin-advanced summary::before { content: "▸ "; }
.admin-advanced[open] summary::before { content: "▾ "; }

/* keep old pane classes inert */
.admin-mode-pane { display: none; }
.admin-section {
  background: white;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}
.admin-section h3 {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: rgba(0,0,0,0.4);
  margin: 0 0 14px;
}
.admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  gap: 12px;
  min-height: 44px;
}
.admin-row:last-child { border-bottom: none; }
.admin-row label {
  font-size: var(--fs-base);
  color: rgba(0,0,0,0.8);
  font-weight: 500;
}
.admin-row input[type="color"] {
  width: 44px; height: 32px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  cursor: pointer;
  padding: 2px;
  background: none;
}
.admin-row select, .admin-row input[type="range"] {
  flex: 1;
  max-width: 180px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: var(--fs-sm);
  font-family: inherit;
  background: white;
}
.admin-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-btn {
  padding: 13px 16px;
  border-radius: 12px;
  border: none;
  background: var(--brand);
  color: white;
  font-size: var(--fs-base);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  min-height: 44px;
  transition: opacity 0.15s;
}
.admin-btn:hover { opacity: 0.85; }
.admin-btn-secondary {
  background: rgba(0,0,0,0.06);
  color: rgba(0,0,0,0.75);
}
.admin-btn-danger {
  background: rgba(220,60,60,0.08);
  color: #c0392b;
  border: 1px solid rgba(220,60,60,0.2);
}

/* ── Admin action button (generic) ─────────────────────────────────────── */
.admin-action-btn {
  padding: 11px 18px;
  border-radius: 10px;
  border: none;
  background: var(--brand);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  min-height: 44px;
  transition: opacity 0.15s;
}
.admin-action-btn:disabled { opacity: 0.55; cursor: default; }

/* ── Admin streak config tables ─────────────────────────────────────────── */
.admin-streak-heading {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin: 16px 0 8px;
}
.admin-streak-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  margin-bottom: 4px;
}
.admin-streak-table th {
  text-align: left;
  padding: 4px 6px;
  color: var(--text-secondary);
  font-weight: 600;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.admin-streak-table td {
  padding: 4px 6px;
}
.admin-streak-input {
  width: 100%;
  padding: 5px 7px;
  border: 1.5px solid rgba(0,0,0,0.12);
  border-radius: 7px;
  font-size: var(--fs-sm);
  font-family: inherit;
  background: var(--word-box-bg);
  color: var(--text-primary);
  box-sizing: border-box;
}

/* ── Game Card Audit table ────────────────────────────────────────────── */
.audit-th {
  padding: 7px 8px;
  text-align: center;
  border-bottom: 1.5px solid #e5e7eb;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b7280;
  white-space: nowrap;
}
.audit-td {
  padding: 5px 8px;
  border-bottom: 1px solid #f3f4f6;
}
.audit-flag {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 1px 5px;
}
.audit-flag-short  { background: #fee2e2; color: #b91c1c; }
.audit-flag-longer { background: #fef3c7; color: #92400e; }
.audit-flag-tied   { background: #e0f2fe; color: #0369a1; }
.audit-flag-few5   { background: #fce7f3; color: #9d174d; }
.audit-flag-many5  { background: #fce7f3; color: #9d174d; }
.audit-flag-few4   { background: #ede9fe; color: #5b21b6; }
.audit-flag-many4  { background: #ede9fe; color: #5b21b6; }

/* ── Backlog form (full-width, larger inputs) ───────────────────────────── */
#admin-backlog-form {
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px;
  margin-top: 14px;
}
#admin-backlog-form .admin-row {
  flex-wrap: wrap;
  gap: 8px;
  min-height: unset;
  padding: 10px 0;
}
#admin-backlog-form label {
  min-width: 68px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #444;
}
#admin-backlog-form input[type="text"],
#admin-backlog-form textarea,
#admin-backlog-form select {
  flex: 1;
  padding: 8px 10px;
  border: 1.5px solid #ddd;
  border-radius: 7px;
  font-size: var(--fs-sm);
  font-family: inherit;
  min-width: 0;
}
#admin-backlog-form textarea {
  min-height: 100px;
  resize: vertical;
  line-height: 1.45;
}
#admin-backlog-form .admin-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
#admin-backlog-form .admin-btn {
  flex: 1;
  padding: 12px;
  font-size: var(--fs-sm);
}

/* ── Development Backlog ────────────────────────────────────────────────── */
.admin-backlog-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.admin-backlog-select {
  padding: 5px 8px;
  border: 1.5px solid #ddd;
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-family: inherit;
  background: #fff;
  color: #1a1a2e;
}
.admin-backlog-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 6px;
  background: #fff;
}
.admin-backlog-item.is-done {
  opacity: 0.5;
  background: #f9fafb;
}
.admin-backlog-item-body { flex: 1; min-width: 0; }
.admin-backlog-item-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: 4px;
  color: #1a1a2e;
}
.admin-backlog-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 3px;
}
.admin-backlog-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 20px;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.badge-status-open       { background:#dbeafe; color:#1d4ed8; }
.badge-status-in-progress{ background:#fef3c7; color:#92400e; }
.badge-status-blocked    { background:#fee2e2; color:#b91c1c; }
.badge-status-done       { background:#d1fae5; color:#065f46; }
.badge-cat-bug           { background:#fce7f3; color:#9d174d; }
.badge-cat-improvement   { background:#ede9fe; color:#5b21b6; }
.badge-cat-feature       { background:#e0f2fe; color:#0c4a6e; }
.badge-priority-high     { background:#fee2e2; color:#991b1b; }
.badge-priority-medium   { background:#fff7ed; color:#92400e; }
.badge-priority-low      { background:#f1f5f9; color:#475569; }
.admin-backlog-blocked-note {
  font-size: var(--fs-sm);
  color: #b91c1c;
  margin-top: 3px;
}
.admin-backlog-branch {
  font-size: var(--fs-sm);
  color: #6b7280;
  font-family: monospace;
  margin-top: 2px;
}
.admin-backlog-notes-text {
  font-size: var(--fs-sm);
  color: #6b7280;
  margin-top: 3px;
  line-height: 1.4;
}
.admin-backlog-item-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.admin-backlog-action-btn {
  padding: 3px 9px;
  border-radius: 5px;
  font-size: var(--fs-sm);
  font-family: inherit;
  border: 1.5px solid #ddd;
  background: #f9fafb;
  cursor: pointer;
  color: #374151;
  white-space: nowrap;
}
.admin-backlog-action-btn:hover { background: #e5e7eb; }
.admin-backlog-action-btn.done-btn { border-color: #a7f3d0; color: #065f46; }
.admin-backlog-action-btn.done-btn:hover { background: #d1fae5; }
.admin-backlog-action-btn.danger { border-color: #fca5a5; color: #b91c1c; }
.admin-backlog-action-btn.danger:hover { background: #fee2e2; }

/* ── Colour-blind themes ─────────────────────────────────────────────── */
html[data-colour="protanopia"] {
  --tile-valid:          #4a90d9;
  --tile-valid-stroke:   #2a6aad;
  --tile-invalid:        #f5a623;
  --tile-invalid-stroke: #c07800;
  --tile-selected:       #8b5cf6;
  --tile-selected-stroke:#6d3fd1;
}
html[data-colour="highcontrast"] {
  /* Board / page surfaces */
  --board-bg:            #000000;
  --page-bg:             #000000;
  --card-bg:             #111111;
  --sheet-bg:            #000000;
  --word-box-bg:         #111111;
  --stat-box-bg:         #111111;
  /* Text — all white; no grey or muted tones in HC */
  --text-primary:        #ffffff;
  --text-secondary:      #ffffff;
  --text-muted:          #ffffff;
  --prompt-color:        #ffffff;
  /* Icons */
  --icon-color:          #ffffff;
  /* Brand */
  --brand:               #ffff00;
  --brand-dark:          #cccc00;
  --brand-light:         #333300;
  /* Leaderboard */
  --lb-row-border:       #333333;
  /* Tiles */
  --tile-neutral:        #ffffff;
  --tile-neutral-stroke: #000000;
  --tile-blank:          #eeeeee;
  --tile-text:           #000000;
  --tile-valid:          #00cc00;
  --tile-valid-stroke:   #007700;
  --tile-invalid:        #ff0000;
  --tile-invalid-stroke: #880000;
  --tile-selected:       #ffff00;
  --tile-selected-stroke:#aaaa00;
  --tile-played:         #00ff00;
  --tile-played-stroke:  #007700;
  --tile-text-light:     #000000;
  /* Dark-mode counterpart overrides — html[data-colour] (0,1,1) beats :root (0,1,0)
     for --dk-* vars, so dark-mode's var(--dk-...) references resolve to HC values. */
  --dk-brand:            #ffff00;
  --dk-brand-dark:       #cccc00;
  --dk-board-bg:         #000000;
  --dk-card-bg:          #111111;
  --dk-sheet-bg:         #000000;
  --dk-word-box-bg:      #111111;
  --dk-stat-box-bg:      #111111;
  --dk-text-primary:     #ffffff;
  --dk-text-secondary:   #ffffff;
  --dk-text-muted:       #ffffff;
  --dk-prompt-color:     #ffffff;
  --dk-icon-color:       #ffffff;
  --dk-lb-row-border:    #333333;
}

/* HC-specific component fixes — override base styles for maximum legibility */

/* 1. Header: settings title and X button must be black on yellow */
html[data-colour="highcontrast"] #back-panel-title,
html[data-colour="highcontrast"] #back-btn { color: #000000; }
html[data-colour="highcontrast"] #panel-drag-handle { background: rgba(0,0,0,0.35); }

/* 2. Toggles: ON state = bright green (not yellow) */
html[data-colour="highcontrast"] .settings-toggle:checked { background: #00CC00; }

/* 3. Text-size buttons: white outline + text on black; active = bright green */
html[data-colour="highcontrast"] .text-size-btn {
  border-color: rgba(255,255,255,0.80);
  color: #ffffff;
  background: transparent;
}
html[data-colour="highcontrast"] .text-size-btn.active {
  border-color: #00CC00;
  color: #00CC00;
  background: rgba(0,204,0,0.10);
}
html[data-colour="highcontrast"] .tile-font-btn {
  border-color: rgba(255,255,255,0.80);
  color: #ffffff;
  background: transparent;
}
html[data-colour="highcontrast"] .tile-font-btn.active {
  border-color: #00CC00;
  color: #00CC00;
  background: rgba(0,204,0,0.10);
}

/* 4. Theme buttons: visible on dark card background */
html[data-colour="highcontrast"] .colour-theme-btn {
  border-color: rgba(255,255,255,0.70);
  background: rgba(255,255,255,0.10);
  color: #ffffff;
}
html[data-colour="highcontrast"] .colour-theme-btn.active {
  border-color: #FFFF00;
  background: rgba(255,255,0,0.14);
  color: #FFFF00;
}
html[data-colour="highcontrast"] .theme-cat-label { color: #FFFFFF; }

/* 5. Nav pill: white outline, white icons for inactive; black icon on yellow for active */
html[data-colour="highcontrast"] #nav-pill {
  border: 2px solid #FFFFFF;
  background: #111111;
  box-shadow: none;
}
html[data-colour="highcontrast"] .nav-btn { color: #FFFF00; }
html[data-colour="highcontrast"] .nav-btn.active {
  background: #FFFF00;
  color: #000000;
}
html[data-colour="highcontrast"] .theme-mode-btn.active {
  background: #FFFF00;
  color: #000000;
}
html[data-colour="highcontrast"] .nav-btn:not(.active):hover { background: rgba(255,255,0,0.12); color: #FFFF00; }

/* 6. Word box: answer text and reset button must be white on dark box */
html[data-colour="highcontrast"] #answer-text { color: #FFFFFF; }
html[data-colour="highcontrast"] #game-prompt { color: #FFFFFF; font-size: 1.0625rem; }
html[data-colour="highcontrast"] #reset-btn {
  color: #FFFFFF;
  background: rgba(255,255,255,0.15);
}
html[data-colour="highcontrast"] #reset-btn:hover { background: rgba(255,255,255,0.20); }

/* 7. Game header: "TODAY'S PUZZLE" label and date both white */
html[data-colour="highcontrast"] #header-label { color: #FFFFFF; }
html[data-colour="highcontrast"] #puzzle-date  { color: #FFFFFF; }

/* 8. Action bar: yellow = selectable; red = disabled; icons 24 px */
html[data-colour="highcontrast"] .action-btn { color: #FFFF00; }
html[data-colour="highcontrast"] .action-btn svg { width: 24px; height: 24px; }
html[data-colour="highcontrast"] .action-btn:hover { color: #FFFF00; background: rgba(255,255,0,0.12); }

/* 9. Swipe-to-browse hint: brighter and minimum 17 pt */
html[data-colour="highcontrast"] .swipe-hint-text { color: #FFFFFF; font-size: 1.0625rem; }

/* 10. Settings: section dividers, sub-labels, version label */
html[data-colour="highcontrast"] .settings-section          { border-bottom-color: rgba(255,255,255,0.35); }
html[data-colour="highcontrast"] .settings-section-title    { color: #FFFFFF; }
html[data-colour="highcontrast"] .settings-sub              { color: #FFFFFF; }
html[data-colour="highcontrast"] #settings-version-label    { color: rgba(255,255,255,0.55); }

/* 11. Settings action buttons: white outline on black; danger = red */
html[data-colour="highcontrast"] .settings-action-btn {
  border-color: rgba(255,255,255,0.70);
  background: transparent;
  color: #FFFFFF;
  font-size: 1.0625rem;
}
html[data-colour="highcontrast"] .settings-action-btn:hover { background: rgba(255,255,255,0.08); }
html[data-colour="highcontrast"] .settings-danger-btn       { border-color: #FF4444; color: #FF4444; }
html[data-colour="highcontrast"] .settings-danger-btn:hover { background: rgba(255,68,68,0.10); }

/* 12. Locale buttons: inactive = white outline; active = black text on yellow */
html[data-colour="highcontrast"] .locale-btn {
  border-color: rgba(255,255,255,0.70);
  background: transparent;
  color: #FFFFFF;
  font-size: 1.0625rem;
}
html[data-colour="highcontrast"] .locale-btn.active {
  background: #FFFF00;
  border-color: #CCCC00;
  color: #000000;
}
html[data-colour="highcontrast"] .locale-btn:hover:not(.active) { background: rgba(255,255,255,0.08); color: #FFFFFF; }

/* 13. Profile page: stat labels, user info row, sign-out button */
html[data-colour="highcontrast"] .stat-lbl         { color: #FFFFFF; }
html[data-colour="highcontrast"] .stat-val          { color: #FFFF00; }
html[data-colour="highcontrast"] #user-locale-text  { color: #FFFFFF; }
html[data-colour="highcontrast"] #user-profile-row  { border-bottom-color: rgba(255,255,255,0.35); }
html[data-colour="highcontrast"] #user-email-text   { color: #FFFFFF; }
html[data-colour="highcontrast"] #signout-btn       { border-color: #FFFFFF; color: #FFFFFF; }
html[data-colour="highcontrast"] #signout-btn:hover { border-color: #FFFF00; color: #FFFF00; }

/* 14. Badges: earned = yellow hex+icon; locked = red (HC disabled colour) */
html[data-colour="highcontrast"] .badge-hex {
  background: #111111;
  box-shadow: inset 0 0 0 2px rgba(255,68,68,0.55);
}
html[data-colour="highcontrast"] .badge-hex svg { color: #FF4444; }
html[data-colour="highcontrast"] .badge-item.earned .badge-hex {
  background: rgba(255,255,0,0.08);
  box-shadow: inset 0 0 0 3px #FFFF00;
}
html[data-colour="highcontrast"] .badge-item.earned .badge-hex svg  { color: #FFFF00; }
html[data-colour="highcontrast"] .badge-item.locked .badge-hex       { filter: none; opacity: 1; }
html[data-colour="highcontrast"] .badge-name                         { color: #FF4444; }
html[data-colour="highcontrast"] .badge-item.earned .badge-name      { color: #FFFF00; font-weight: 700; }
html[data-colour="highcontrast"] .badge-item:hover                   { background: rgba(255,255,0,0.07); }

/* 15. Streak widget: hero label, day names, best text */
html[data-colour="highcontrast"] #streak-widget          { background: #111111; }
html[data-colour="highcontrast"] .streak-hero-label      { color: #FFFFFF; }
html[data-colour="highcontrast"] .streak-day-name        { color: #FFFFFF; }
html[data-colour="highcontrast"] .streak-day.today .streak-day-name { color: #FFFF00; }
html[data-colour="highcontrast"] .streak-best            { color: #FFFFFF; }

/* 16. Streak freeze row: divider, label, icons */
html[data-colour="highcontrast"] .streak-freeze-row      { border-top-color: rgba(255,255,255,0.30); }
html[data-colour="highcontrast"] .streak-freeze-label    { color: #FFFFFF; }
html[data-colour="highcontrast"] .streak-freeze-icon     {
  background: #222222;
  border: 2px solid #FFFFFF;
  color: #FFFFFF;
}
html[data-colour="highcontrast"] .streak-freeze-icon.used {
  background: #111111;
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.30);
}

/* 17. Leaderboard: rank/level/empty text hardcoded grey */
html[data-colour="highcontrast"] .lb-rank  { color: #FFFFFF; }
html[data-colour="highcontrast"] .lb-level { color: #FFFFFF; }
html[data-colour="highcontrast"] .lb-empty { color: rgba(255,255,255,0.55); }

/* 18. Streak flame: remove white/cream background from played day circles */
html[data-colour="highcontrast"] .streak-day.played .streak-day-flame { background: transparent; }

/* 19. Badge popup card (badge-info-modal): dark hex, yellow icon, proper pills */
html[data-colour="highcontrast"] .bim-icon {
  background: #111111;
  box-shadow: inset 0 0 0 3px #FFFF00;
}
html[data-colour="highcontrast"] .bim-icon svg         { color: #FFFF00; }
html[data-colour="highcontrast"] .bim-name             { color: #FFFFFF; }
html[data-colour="highcontrast"] .bim-desc             { color: #FFFFFF; }
html[data-colour="highcontrast"] .bim-status.earned    { background: #111111; color: #FFFF00; border: 1.5px solid #FFFF00; }
html[data-colour="highcontrast"] .bim-status.locked    { background: #111111; color: #FF4444; border: 1.5px solid #FF4444; }
html[data-colour="highcontrast"] #badge-info-close     { color: #FFFFFF; }

/* 20. Player profile modal (friend card): dark card, dark stat boxes */
html[data-colour="highcontrast"] #player-modal-card,
html[data-colour="highcontrast"] #ppm-card             { background: #111111; }
html[data-colour="highcontrast"] #player-modal-header,
html[data-colour="highcontrast"] #ppm-header           { border-bottom-color: rgba(255,255,255,0.20); }
html[data-colour="highcontrast"] #player-modal-word,
html[data-colour="highcontrast"] #ppm-title            { color: #FFFFFF; }
html[data-colour="highcontrast"] .ppm-stat-box         { background: #1a1a1a; border: 1px solid #333333; }
html[data-colour="highcontrast"] .ppm-stat-val         { color: #FFFF00; }
html[data-colour="highcontrast"] .ppm-stat-lbl         { color: #FFFFFF; }
html[data-colour="highcontrast"] .ppm-name             { color: #FFFFFF; }
html[data-colour="highcontrast"] .ppm-avatar-lg        { box-shadow: 0 0 0 3px #FFFF00; }

/* Back arrow not needed — X closes the card */
#ppm-back { display: none !important; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 360px) {
  #answer-text { font-size: var(--fs-xl); }
  .action-btn { padding: 8px; }
  .stat-card-value { font-size: 2rem; }
}

/* ── Tester reset notice modal ───────────────────────────────────────── */
#tester-reset-modal {
  position: fixed;
  inset: 0;
  z-index: 1800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#tester-reset-modal[hidden] { display: none; }
#tester-reset-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
#tester-reset-card {
  position: relative;
  background: white;
  border-radius: 20px;
  padding: 32px 24px 24px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
#tester-reset-icon {
  font-size: 2.5rem;
  margin-bottom: 14px;
  line-height: 1;
}
#tester-reset-message {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: #1a1a2e;
  margin: 0 0 24px;
}
.tester-reset-cta {
  display: block;
  width: 100%;
  padding: 15px 20px;
  background: var(--brand, #7c4dff);
  color: white;
  border: none;
  border-radius: 14px;
  font-size: var(--fs-sm);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: opacity 0.15s;
}
.tester-reset-cta:active { opacity: 0.8; }

/* ── Calendar date picker modal ──────────────────────────────────────── */
#calendar-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
}
#calendar-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}
#calendar-card {
  position: relative;
  background: var(--card-bg);
  border-radius: 20px;
  padding: 20px;
  width: min(340px, 90vw);
  z-index: 1;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
#cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
#cal-month-label {
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--text-primary);
}
#cal-prev, #cal-next {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--icon-color);
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
#cal-prev:disabled, #cal-next:disabled { opacity: 0.3; cursor: default; }
#cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-bottom: 14px;
}
.cal-day-header {
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 4px 0 6px;
}
.cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.0625rem;
  cursor: pointer;
  color: var(--text-primary);
  border: none;
  background: none;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.cal-day:disabled { color: var(--text-muted); cursor: default; opacity: 0.35; }
.cal-day.cal-today { background: var(--brand); color: white; font-weight: bold; }
.cal-day.cal-past:hover { background: var(--brand-light); }
#cal-cancel {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: none;
  font-family: inherit;
  font-size: 1.0625rem;
  color: var(--text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#cal-cancel:hover { border-color: var(--brand); color: var(--brand); }

/* ── Dark mode ───────────────────────────────────────────────────────── */
/* Semantic vars flip to their --dk-* counterparts; elements that use vars need no override */
html[data-theme="dark"] {
  --rd-base:             #484848;
  --brand:               var(--dk-brand);
  --brand-dark:          var(--dk-brand-dark);
  --board-bg:            var(--dk-board-bg);
  --page-bg:             var(--dk-board-bg);
  --card-bg:             var(--dk-card-bg);
  --sheet-bg:            var(--dk-sheet-bg);
  --word-box-bg:         var(--dk-word-box-bg);
  --stat-box-bg:         var(--dk-stat-box-bg);
  --text-primary:        var(--dk-text-primary);
  --text-secondary:      var(--dk-text-secondary);
  --text-muted:          var(--dk-text-muted);
  --prompt-color:        var(--dk-prompt-color);
  --icon-color:          var(--dk-icon-color);
  --board-fg:            rgba(242,242,247,0.70);
  --lb-row-border:       var(--dk-lb-row-border);
  --tile-neutral:        var(--dk-tile-neutral);
  --tile-neutral-stroke: var(--dk-tile-neutral-stroke);
  --tile-blank:          var(--dk-tile-blank);
  --tile-text:           var(--dk-tile-text);
  --tile-selected:       var(--dk-tile-selected);
  --tile-selected-stroke:var(--dk-tile-selected-stroke);
  --tile-valid:          var(--dk-tile-valid);
  --tile-valid-stroke:   var(--dk-tile-valid-stroke);
  --tile-invalid:        var(--dk-tile-invalid);
  --tile-invalid-stroke: var(--dk-tile-invalid-stroke);
  --tile-played:         var(--dk-tile-played);
  --tile-played-stroke:  var(--dk-tile-played-stroke);
  --tile-text-light:     var(--dk-tile-text-light);
}
html[data-theme="dark"] body {
  background: var(--board-bg);
  color: var(--tile-text);
}
/* Elements whose colours are not yet variable-driven */
html[data-theme="dark"] #nav-pill { box-shadow: 0 4px 24px rgba(0,0,0,0.45); }
html[data-theme="dark"] .nav-btn { color: rgba(255,255,255,0.28); }
html[data-theme="dark"] .nav-btn:not(.active):hover { background: rgba(124,77,255,0.18); }

/* Pride theme — rainbow gradient on nav pill border and active button */
html[data-colour="pride"] #nav-pill {
  border: 2.5px solid transparent;
  background:
    linear-gradient(var(--card-bg, #fff), var(--card-bg, #fff)) padding-box,
    linear-gradient(135deg, #E40303 0%, #FF8C00 20%, #FFED00 40%, #008026 60%, #004DFF 80%, #750787 100%) border-box;
}
html[data-colour="pride"] .nav-btn.active {
  background: linear-gradient(135deg, #E40303 0%, #FF8C00 20%, #FFED00 40%, #008026 60%, #004DFF 80%, #750787 100%);
  color: #FFFFFF;
}
html[data-theme="dark"] #reset-btn { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); }
html[data-theme="dark"] .stat-card { box-shadow: 0 1px 6px rgba(0,0,0,0.3); }
html[data-theme="dark"] .action-btn:hover { background: rgba(124,77,255,0.15); }
html[data-theme="dark"] .how-section p,
html[data-theme="dark"] .how-section ul,
html[data-theme="dark"] .how-section li { color: rgba(255,255,255,0.75); }
html[data-theme="dark"] .how-section h3 { color: var(--brand); }
html[data-theme="dark"] #lb-date-prev,
html[data-theme="dark"] #lb-date-next {
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.75);
}
html[data-theme="dark"] .settings-section { border-bottom-color: rgba(255,255,255,0.08); }
/* settings-toggle dark OFF state handled via base rule above */
html[data-theme="dark"] .colour-theme-btn { border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.60); background: rgba(255,255,255,0.04); }
html[data-theme="dark"] .colour-theme-btn.active { border-color: var(--brand); background: rgba(167,139,250,0.12); color: var(--brand); }
html[data-theme="dark"] .theme-cat-label { color: rgba(255,255,255,0.35); }
html[data-theme="dark"] .text-size-btn { border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.65); background: rgba(255,255,255,0.05); }
html[data-theme="dark"] .text-size-btn.active { border-color: var(--brand); color: var(--brand); }
html[data-theme="dark"] .tile-font-btn { border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.65); background: rgba(255,255,255,0.05); }
html[data-theme="dark"] .tile-font-btn.active { border-color: var(--brand); color: var(--brand); }
html[data-theme="dark"] .settings-action-btn { border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.05); }
html[data-theme="dark"] .settings-action-btn:hover { background: rgba(255,255,255,0.1); }
html[data-theme="dark"] #settings-version-label { color: rgba(255,255,255,0.25); }
html[data-theme="dark"] #user-profile-row { border-bottom-color: rgba(255,255,255,0.1); }
html[data-theme="dark"] #user-email-text { color: rgba(255,255,255,0.5); }
html[data-theme="dark"] #signout-btn { border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.55); }
html[data-theme="dark"] #past-game-banner { background: rgba(124,77,255,0.15); color: var(--brand); }
html[data-theme="dark"] #version-tag { color: rgba(255,255,255,0.2); }
html[data-theme="dark"] #version-tag:hover { color: var(--brand); }
html[data-theme="dark"] .hex-tile polygon:not(.hatch-overlay) {
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.4));
}
html[data-theme="dark"] .float-type-wrong .float-cheer { color: #f87171; }

/* ── Avatar photo ──────────────────────────────────────────────────────── */
.avatar-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

/* ── User avatar as edit button ────────────────────────────────────────── */
.user-avatar-btn {
  position: relative;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  width: 64px;
  height: 74px;
}
.user-avatar-btn #user-avatar {
  width: 64px;
  height: 74px;
}
.avatar-edit-dot {
  position: absolute;
  bottom: 0;
  right: -1px;
  width: 20px;
  height: 20px;
  background: var(--brand);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
  pointer-events: none;
}

/* ── Short name below username handle ──────────────────────────────────── */
#user-username-text {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-top: 2px;
}
html[data-theme="dark"] #user-username-text { color: rgba(255,255,255,0.5); }

/* ── Email not verified banner ─────────────────────────────────────────── */
#user-verify-banner {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-size: var(--fs-sm);
  color: #b45309;
  line-height: 1.2;
}
#user-resend-verify-btn {
  background: none;
  border: none;
  color: var(--brand);
  font-size: var(--fs-sm);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  font-family: inherit;
}

/* ── Auth verify screen ────────────────────────────────────────────────── */
#auth-form-content { display: flex; flex-direction: column; gap: 10px; }
#auth-verify-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 0 8px;
  gap: 12px;
}
.auth-verify-icon { color: var(--brand); }
.auth-verify-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary, #222);
  margin: 0;
}
.auth-verify-text {
  font-size: var(--fs-sm);
  color: #666;
  line-height: 1.5;
  margin: 0;
}
#auth-verify-resend {
  background: none;
  border: none;
  color: var(--brand);
  font-size: var(--fs-sm);
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  padding: 4px 0;
}
#auth-verify-done { width: 100%; }

/* ── Edit Profile Modal ────────────────────────────────────────────────── */
#edit-profile-modal {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#edit-profile-modal[hidden] { display: none; }
#ep-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
#ep-card {
  position: relative;
  background: var(--page-bg, #f5f5f0);
  border-radius: 22px 22px 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 92dvh;
  overflow-y: auto;
  padding: 0 0 env(safe-area-inset-bottom, 20px);
  z-index: 1;
}
#ep-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 0;
  margin-bottom: 20px;
}
#ep-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}
#ep-close {
  background: rgba(0,0,0,0.06);
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: var(--fs-sm);
  cursor: pointer;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
}
#ep-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 20px 20px;
}
#ep-avatar {
  width: 88px;
  height: 102px;
  clip-path: url(#hex-clip-rounded);
  background: var(--brand);
  color: white;
  font-size: 2rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#ep-avatar-actions { display: flex; gap: 10px; }
#ep-change-photo, #ep-remove-photo {
  background: none;
  border: 1.5px solid var(--brand);
  border-radius: 20px;
  padding: 7px 16px;
  font-size: var(--fs-sm);
  cursor: pointer;
  font-family: inherit;
  color: var(--brand);
  font-weight: 600;
}
#ep-remove-photo { border-color: #dc2626; color: #dc2626; }
#ep-form, #ep-pwd-form { padding: 0 20px; }
.ep-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 16px 0 5px;
}
#ep-displayname-input {
  width: 100%;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  padding: 11px 13px;
  font-size: var(--fs-sm);
  font-family: inherit;
  box-sizing: border-box;
  background: white;
  color: var(--text-primary, #222);
  outline: none;
}
#ep-displayname-input:focus { border-color: var(--brand); }
.ep-username-wrap {
  display: flex;
  align-items: center;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  background: white;
}
.ep-username-wrap:focus-within { border-color: var(--brand); }
.ep-at {
  padding: 11px 10px 11px 13px;
  background: #f7f7f5;
  color: #aaa;
  font-size: var(--fs-sm);
  font-weight: 600;
  border-right: 1.5px solid #e0e0e0;
  flex-shrink: 0;
}
#ep-username-input {
  border: none;
  flex: 1;
  padding: 11px 10px;
  font-size: var(--fs-sm);
  font-family: inherit;
  outline: none;
  background: transparent;
  min-width: 0;
  color: var(--text-primary, #222);
}
#ep-username-status {
  padding: 0 12px;
  font-size: var(--fs-sm);
  font-weight: 700;
  flex-shrink: 0;
}
#ep-username-status.ok { color: #16a34a; }
#ep-username-status.taken { color: #dc2626; }
#ep-username-status.checking { color: #aaa; }
.ep-field-group { margin-top: 16px; }
#ep-email-display {
  font-size: var(--fs-sm);
  color: var(--text-primary, #222);
  padding: 6px 0 4px;
}
#ep-email-verified-badge {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  margin-top: 2px;
}
#ep-email-verified-badge.verified { background: #dcfce7; color: #15803d; }
#ep-email-verified-badge.unverified { background: #fef9c3; color: #854d0e; }
#ep-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 9px 13px;
  font-size: var(--fs-sm);
  color: #dc2626;
  margin-top: 12px;
}
.ep-save-btn {
  display: block;
  width: 100%;
  background: var(--brand);
  color: white;
  border: none;
  border-radius: 14px;
  padding: 14px;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  margin-top: 22px;
  font-family: inherit;
}
.ep-save-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.ep-link-btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--brand);
  font-size: var(--fs-sm);
  cursor: pointer;
  padding: 12px 0 4px;
  font-family: inherit;
  text-align: center;
}
#ep-pwd-form {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid #eee;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 20px;
}
#ep-pwd-form input {
  width: 100%;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  padding: 11px 13px;
  font-size: var(--fs-sm);
  font-family: inherit;
  box-sizing: border-box;
  outline: none;
  background: white;
  color: var(--text-primary, #222);
}
#ep-pwd-form input:focus { border-color: var(--brand); }
#ep-pwd-save {
  background: var(--board-bg, #3d1a24);
  color: white;
  border: none;
  border-radius: 14px;
  padding: 13px;
  font-size: var(--fs-sm);
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
}
#ep-pwd-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 9px 13px;
  font-size: var(--fs-sm);
  color: #dc2626;
}
html[data-theme="dark"] #ep-card { background: #1a1a1a; }
html[data-theme="dark"] #ep-displayname-input,
html[data-theme="dark"] #ep-username-input,
html[data-theme="dark"] #ep-pwd-form input { background: #2a2a2a; border-color: #3a3a3a; color: white; }
html[data-theme="dark"] .ep-username-wrap { background: #2a2a2a; border-color: #3a3a3a; }
html[data-theme="dark"] .ep-at { background: #222; border-color: #3a3a3a; color: #888; }
html[data-theme="dark"] #ep-email-display { color: rgba(255,255,255,0.8); }
html[data-theme="dark"] #ep-header h3 { color: white; }

/* ── Score card (Scores tab, above word list) ────────────────────── */
#my-score-card { margin: 0 0 10px; }
.sc-score-card {
  background: var(--card-bg, #fff);
  border-radius: 14px;
  padding: 14px 16px 12px;
  box-shadow: 0 1px 8px rgba(0,0,0,0.08);
}
.sc-score-card-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  padding: 14px 0;
  background: none;
  box-shadow: none;
}
.sc-card-word {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: 3px;
  text-align: center;
}
.sc-card-rank {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--brand);
  margin-bottom: 10px;
  text-align: center;
}
.sc-score-card-defeated .sc-card-rank { color: var(--text-muted); }
.sc-card-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.sc-card-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.sc-stat-val {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sc-stat-lbl {
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-top: 1px;
}
.sc-stat-dimmed .sc-stat-val,
.sc-stat-dimmed .sc-stat-lbl { opacity: 0.38; }

/* ── Word list definition panel update ──────────────────────────── */
.wl-def-text { margin-bottom: 6px; }
.wl-def-avatars {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--lb-row-border);
  margin-top: 6px;
}
.wl-def-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.wl-def-avatar:active { opacity: 0.75; }

/* ── Hint picker bottom sheet ────────────────────────────────────── */
#hint-picker-modal {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#hint-picker-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.42);
}
#hint-picker-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  background: var(--card-bg, #fff);
  border-radius: 20px 20px 0 0;
  padding: 0 0 calc(16px + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}
.hint-picker-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 10px;
  border-bottom: 1px solid var(--lb-row-border);
}
.hint-picker-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-primary);
}
.hint-picker-balance {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.hint-picker-options {
  padding: 10px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hint-pick-btn {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  background: rgba(0,0,0,0.04);
  border: 1.5px solid transparent;
  border-radius: 14px;
  padding: 14px 16px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, border-color 0.12s, opacity 0.12s;
}
.hint-pick-btn:active { background: rgba(0,0,0,0.10); }
.hint-pick-btn:disabled { opacity: 0.40; cursor: default; }
.hint-pick-btn.hint-pick-danger { border-color: rgba(239,68,68,0.25); background: rgba(239,68,68,0.05); }
.hint-pick-btn.hint-pick-unaffordable { opacity: 0.55; }
.hpc-cost {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--brand);
  min-width: 46px;
  justify-content: flex-end;
  flex-shrink: 0;
  line-height: 1;
}
.hpc-cost-num { font-variant-numeric: tabular-nums; }
.hint-pick-danger .hpc-cost { color: #dc2626; }
.hpc-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.hpc-name {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-primary);
}
.hint-pick-danger .hpc-name { color: #dc2626; }
.hpc-desc {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* ── Easy Mode hint button — same shape, different accent ────────── */
.hint-pick-easy-btn {
  background: rgba(52,199,89,0.06);
  border-color: rgba(52,199,89,0.22);
}
.hint-pick-easy-btn:active { background: rgba(52,199,89,0.14); }
.hpc-cost-free {
  font-size: var(--fs-sm);
  font-weight: 800;
  color: #34c759;
  min-width: 46px;
  text-align: right;
  flex-shrink: 0;
}
html[data-theme="dark"] .hint-pick-easy-btn {
  background: rgba(52,199,89,0.09);
  border-color: rgba(52,199,89,0.28);
}

/* ── Easy Mode confirmation modal ────────────────────────────────── */
#easy-mode-modal {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#easy-mode-modal[hidden] { display: none; }
#easy-mode-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}
#easy-mode-card {
  position: relative;
  background: var(--sheet-bg);
  border-radius: 20px 20px 0 0;
  padding: 28px 24px calc(44px + env(safe-area-inset-bottom, 0px));
  width: 100%;
  max-width: 480px;
  z-index: 1;
}
.em-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--text-primary);
}
.em-body {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 24px;
}
.em-actions {
  display: flex;
  gap: 10px;
}
.em-cancel {
  flex: 1;
  padding: 14px;
  border: 1.5px solid var(--lb-row-border);
  border-radius: 12px;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.em-confirm {
  flex: 2;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.em-confirm:active { opacity: 0.85; }

/* ── Easy Mode word list ─────────────────────────────────────────── */
.wl-row.wl-easy-visible .wl-word {
  filter: none;
  color: var(--text-secondary);
  font-style: italic;
}
.wl-row.wl-easy-visible .wl-len { display: block; }
.wl-row.wl-easy-visible { cursor: default; }
/* Hide percentage column in easy mode */
.wl-easy-mode-list .wl-bar-track,
.wl-easy-mode-list .wl-pct { visibility: hidden; }

/* ── Easy Mode score card ────────────────────────────────────────── */
.sc-card-easy-count {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  padding: 10px 0 2px;
  font-weight: 500;
}

/* ── Define-hint modal ───────────────────────────────────────────── */
#define-hint-modal {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#define-hint-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}
#define-hint-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  background: var(--card-bg, #fff);
  border-radius: 18px;
  padding: 22px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#define-hint-body {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  min-height: 48px;
}
#define-hint-close { align-self: stretch; }

/* ── Defeat reveal modal ─────────────────────────────────────────── */
#defeat-modal {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#defeat-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}
#defeat-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background: var(--card-bg, #fff);
  border-radius: 20px;
  padding: 28px 24px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.defeat-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-muted);
}
.defeat-letters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
  transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.defeat-letters.defeat-expand { transform: scale(1.22); }
.defeat-letter {
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.defeat-letter.defeat-letter-show { opacity: 1; transform: translateY(0); }
#defeat-close { align-self: stretch; }

/* ── Flying ticket animation ─────────────────────────────────────── */
.ticket-fly {
  position: fixed;
  z-index: 9999;
  width: 20px;
  height: 20px;
  pointer-events: none;
  color: var(--brand);
  opacity: 1;
  transition: none;
}
.ticket-fly-out {
  animation: ticket-drain 0.85s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}
@keyframes ticket-drain {
  0%   { transform: translate(0,0) scale(1);    opacity: 1; }
  60%  { transform: translate(0,30px) scale(0.9); opacity: 0.8; }
  100% { transform: translate(0,55px) scale(0.6); opacity: 0; }
}

/* ── Defeated board overlay ──────────────────────────────────────── */
#defeated-board-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
#defeated-board-overlay.dbo-show {
  opacity: 1;
  pointer-events: auto;
}
.dbo-hex { width: 110px; height: 127px; }
.dbo-label {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-top: 14px;
}

/* ── Dark mode for new elements ──────────────────────────────────── */
html[data-theme="dark"] #hint-picker-card,
html[data-theme="dark"] #define-hint-card,
html[data-theme="dark"] #defeat-card { background: #1c1c1e; }
html[data-theme="dark"] .hint-pick-btn { background: rgba(255,255,255,0.07); }
html[data-theme="dark"] .hint-pick-btn:active { background: rgba(255,255,255,0.12); }
html[data-theme="dark"] .wl-sort-popup { background: #1c1c1e; border-color: rgba(255,255,255,0.1); }
html[data-theme="dark"] .wl-sort-opt { color: rgba(255,255,255,0.9); border-bottom-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .sc-score-card { background: #1c1c1e; }

/* ── Bug report modal ────────────────────────────────────────────────── */
#bug-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#bug-modal[hidden] { display: none; }
#bug-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}
#bug-modal-card {
  position: relative;
  background: #fff;
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
#bug-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 10px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}
#bug-modal-header h2 { margin: 0; font-size: 1.0625rem; color: #222; }
#bug-modal-close {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
  display: flex;
  align-items: center;
}
#bug-modal-form {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}
#bug-modal-thanks {
  padding: 32px 16px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
#bug-modal-thanks[hidden] { display: none; }
.bug-field { margin-bottom: 14px; }
.bug-field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #444;
  margin-bottom: 5px;
}
.bug-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
  color: #222;
  background: #fafafa;
}
.bug-field textarea:focus { outline: 2px solid var(--brand); border-color: transparent; background: #fff; }
.bug-meta-note { font-size: 0.73rem; color: #aaa; margin: 0 0 16px; }
.bug-thanks-icon { margin-bottom: 4px; }
.bug-thanks-title { margin: 0; font-size: 1.1rem; color: #222; }
.bug-thanks-body { font-size: 0.87rem; color: #666; margin: 0 0 8px; }

/* ── Admin feedback table ─────────────────────────────────────────── */
.admin-feedback-row {
  border-bottom: 1px solid #f0f0f0;
  padding: 10px 0;
}
.admin-feedback-row:last-child { border-bottom: none; }
.admin-feedback-meta { font-size: 0.72rem; color: #aaa; margin-bottom: 3px; }
.admin-feedback-happened { font-size: 0.84rem; color: #222; margin-bottom: 3px; font-weight: 500; }
.admin-feedback-expected { font-size: 0.82rem; color: #666; font-style: italic; margin-bottom: 3px; }
.admin-feedback-detail { font-size: 0.72rem; color: #aaa; }

/* ── Admin testers list ──────────────────────────────────────────── */
.admin-tester-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 0.84rem;
  color: #333;
}
.admin-tester-row:last-child { border-bottom: none; }
.admin-tester-email { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-tester-revoke {
  background: #fff3f3;
  color: #c0392b;
  border: 1px solid #f5c6c6;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.75rem;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition: background 0.15s;
}
.admin-tester-revoke:active { background: #fde8e8; }
.admin-tester-grant {
  background: #f0faf4;
  color: #1a7a3c;
  border: 1px solid #b2dfca;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.75rem;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition: background 0.15s;
}
.admin-tester-grant:active { background: #d8f5e5; }

/* ── Admin user rows ─────────────────────────────────────────────── */
.admin-user-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid #f0f0f0;
}
.admin-user-row:last-child { border-bottom: none; }
.admin-user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.admin-user-name {
  font-size: 0.84rem;
  font-weight: 600;
  color: #222;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-user-email {
  font-size: 0.72rem;
  color: #888;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-user-meta {
  font-size: 0.7rem;
  color: #aaa;
}

/* ── 4-Letter Words challenge section ─────────────────────────────────────── */
.four-words-section {
  margin: 4px 0 12px;
  border-top: 1px solid var(--lb-row-border);
  padding-top: 10px;
}
.four-words-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.four-words-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
}
.four-words-count {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.four-words-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
}
.four-word-chip {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary);
  background: var(--tile-neutral, #e8dfc8);
  border-radius: 5px;
  padding: 3px 8px;
}
.four-word-chip.four-word-chip-unfound {
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--lb-row-border);
  font-weight: 500;
}

/* ── Score icon equaliser animation ─────────────────────────────────── */
@keyframes sb-bounce1 {
  0%   { transform: scaleY(1); }
  12%  { transform: scaleY(0.1); }
  30%  { transform: scaleY(3.0); }
  48%  { transform: scaleY(0.15); }
  65%  { transform: scaleY(2.6); }
  82%  { transform: scaleY(0.4); }
  100% { transform: scaleY(1); }
}
@keyframes sb-bounce2 {
  0%   { transform: scaleY(1); }
  10%  { transform: scaleY(3.0); }
  28%  { transform: scaleY(0.1); }
  46%  { transform: scaleY(2.8); }
  64%  { transform: scaleY(0.2); }
  82%  { transform: scaleY(2.0); }
  100% { transform: scaleY(1); }
}
@keyframes sb-bounce3 {
  0%   { transform: scaleY(1); }
  18%  { transform: scaleY(0.15); }
  36%  { transform: scaleY(2.5); }
  54%  { transform: scaleY(0.1); }
  72%  { transform: scaleY(2.8); }
  88%  { transform: scaleY(0.5); }
  100% { transform: scaleY(1); }
}
@keyframes sb-color {
  0%,100% { stroke: currentColor; }
  5%,95%  { stroke: var(--brand); }
}
.score-icon-bounce .sb1 {
  transform-box: fill-box; transform-origin: bottom;
  animation: sb-bounce1 1.6s ease-in-out, sb-color 1.6s ease-in-out;
}
.score-icon-bounce .sb2 {
  transform-box: fill-box; transform-origin: bottom;
  animation: sb-bounce2 1.6s ease-in-out, sb-color 1.6s ease-in-out;
}
.score-icon-bounce .sb3 {
  transform-box: fill-box; transform-origin: bottom;
  animation: sb-bounce3 1.6s ease-in-out, sb-color 1.6s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .score-icon-bounce .sb1,
  .score-icon-bounce .sb2,
  .score-icon-bounce .sb3 { animation: none; }
}

/* ── Mosher Butts theme: text on dark-green backgrounds uses cream ──────── */
/* tile-text is dark green (for cream tiles); override places where background is also dark green */
html[data-colour="mosherbutts"] #answer-text,
html[data-colour="mosherbutts"] #puzzle-date,
html[data-colour="mosherbutts"] .swipe-hint-inner {
  color: var(--tile-neutral);
}

/* ── Mosher Butts: fix rgba(0,0,0) elements that are invisible on dark green ── */
html[data-colour="mosherbutts"] .colour-theme-btn:not(.active) {
  color: var(--text-secondary);
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.13);
}
html[data-colour="mosherbutts"] .settings-action-btn {
  color: var(--text-primary);
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.13);
}
html[data-colour="mosherbutts"] .settings-action-btn:hover {
  background: rgba(255,255,255,0.12);
}
html[data-colour="mosherbutts"] .settings-section {
  border-bottom-color: rgba(255,255,255,0.10);
}
html[data-colour="mosherbutts"] .text-size-btn {
  color: var(--text-secondary);
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.13);
}
html[data-colour="mosherbutts"] .theme-mode-btn:not(.active) {
  color: var(--text-secondary);
}
html[data-colour="mosherbutts"] .theme-mode-picker {
  border-color: rgba(255,255,255,0.13);
}
html[data-colour="mosherbutts"] .theme-mode-btn + .theme-mode-btn {
  border-left-color: rgba(255,255,255,0.13);
}
html[data-colour="mosherbutts"] #settings-version-label {
  color: var(--text-muted);
}
html[data-colour="mosherbutts"] .cl-date { color: var(--text-muted); }
html[data-colour="mosherbutts"] .cl-changes li { color: var(--text-secondary); }
html[data-colour="mosherbutts"] .cl-latest .cl-changes li { color: var(--text-primary); }

/* ══════════════════════════════════════════════════════════════════════════
   Pride theme overrides
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Game board background: very light tint of the same hue as the blob ─── */
@keyframes pride-bg-cycle {
  0%   { background-color: #FFEBED; } /* light pink   — same hue as red blob   */
  14%  { background-color: #FFF2E8; } /* light peach  — same hue as orange blob */
  28%  { background-color: #FFFDE5; } /* light cream  — same hue as yellow blob */
  43%  { background-color: #ECFAE9; } /* light mint   — same hue as green blob  */
  57%  { background-color: #E8F8FD; } /* light sky    — same hue as blue blob   */
  71%  { background-color: #EEEAFB; } /* light lavender — same hue as purple blob */
  86%  { background-color: #FFEBED; }
  100% { background-color: #FFEBED; }
}

/* ── Animated background blob ──────────────────────────────────────────── */
@keyframes pride-blob-drift {
  0%   { transform: translate(  5%,   5%); border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; background-color: rgba(239, 64, 86, 0.30); }
  14%  { transform: translate( 46%,  12%); border-radius: 45% 55% 38% 62% / 62% 38% 57% 43%; background-color: rgba(244,123, 32, 0.30); }
  28%  { transform: translate( 34%,  58%); border-radius: 54% 46% 62% 38% / 44% 56% 44% 56%; background-color: rgba(253,207,  0, 0.30); }
  43%  { transform: translate(  7%,  62%); border-radius: 38% 62% 43% 57% / 57% 43% 62% 38%; background-color: rgba( 90,191, 74, 0.30); }
  57%  { transform: translate( 56%,  44%); border-radius: 50% 50% 57% 43% / 62% 38% 50% 50%; background-color: rgba( 71,189,212, 0.30); }
  71%  { transform: translate( 54%,   7%); border-radius: 62% 38% 50% 50% / 43% 57% 38% 62%; background-color: rgba(107, 91,197, 0.30); }
  86%  { transform: translate( 17%,  32%); border-radius: 43% 57% 57% 43% / 50% 50% 43% 57%; background-color: rgba(239, 64, 86, 0.30); }
  100% { transform: translate(  5%,   5%); border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; background-color: rgba(239, 64, 86, 0.30); }
}

/* html + body + game-front all cycle so the background floods every pixel,
   including the OS safe-area band below the nav pill */
html[data-colour="pride"],
html[data-colour="pride"] body,
html[data-colour="pride"] #game-front {
  animation: pride-bg-cycle 52s ease-in-out infinite;
}

/* game-front creates its own stacking context so z-index:-1 blob sits
   between the page background and the game content */
html[data-colour="pride"] #game-front {
  isolation: isolate;
}

/* Dark mode: deep background with screen-blend blob — no pastel cycle */
html[data-theme="dark"][data-colour="pride"],
html[data-theme="dark"][data-colour="pride"] body,
html[data-theme="dark"][data-colour="pride"] #game-front {
  animation: none;
  background-color: var(--board-bg);
}

#pride-bg-blob {
  position: absolute;
  top: 0;
  left: 0;
  width: 78%;
  height: 78%;
  pointer-events: none;
  z-index: -1;
  filter: blur(90px);
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
  background-color: rgba(239,64,86,0.30);
  animation: pride-blob-drift 52s ease-in-out infinite;
}

html[data-theme="dark"] #pride-bg-blob {
  mix-blend-mode: screen;
}

@media (prefers-reduced-motion: reduce) {
  #pride-bg-blob { animation: none; }
  html[data-colour="pride"] #game-front { animation: none; }
  html[data-colour="pride"] #back-header { animation: none; }
}
html[data-reduce-motion] #pride-bg-blob { animation: none; }
html[data-reduce-motion][data-colour="pride"] #game-front { animation: none; }
html[data-reduce-motion][data-colour="pride"] #back-header { animation: none; }

/* ── Back panel header: solid colour cycling through all six flag stripes ── */
/* Applies to Score, Profile, Settings and How to pages — not the game board */
@keyframes pride-header-cycle {
  0%     { background-color: #EF4056; } /* red    */
  16.67% { background-color: #F47B20; } /* orange */
  33.33% { background-color: #FDCF00; } /* yellow */
  50%    { background-color: #5ABF4A; } /* green  */
  66.67% { background-color: #47BDD4; } /* blue   */
  83.33% { background-color: #6B5BC5; } /* purple */
  100%   { background-color: #EF4056; } /* red    */
}

html[data-colour="pride"] #back-header {
  animation: pride-header-cycle 48s ease-in-out infinite;
}

/* ── Rainbow share button border ────────────────────────────────────────── */
html[data-colour="pride"] #share-btn {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--page-bg, #fff), var(--page-bg, #fff)) padding-box,
    linear-gradient(135deg, #EF4056 0%, #F47B20 20%, #FDCF00 40%, #5ABF4A 60%, #47BDD4 80%, #6B5BC5 100%) border-box;
  color: var(--text-primary);
}

html[data-colour="pride"] #share-btn.all-found {
  background: linear-gradient(135deg, #EF4056 0%, #F47B20 20%, #FDCF00 40%, #5ABF4A 60%, #47BDD4 80%, #6B5BC5 100%);
  color: #FFFFFF;
}

/* ── Dark mode: restore readable text colours ───────────────────────────── */
html[data-theme="dark"][data-colour="pride"] body {
  color: var(--dk-text-primary);
}

html[data-theme="dark"][data-colour="pride"] #answer-text,
html[data-theme="dark"][data-colour="pride"] #puzzle-date {
  color: var(--dk-text-primary);
}

/* ══════════════════════════════════════════════════════════════════════════
   Trans theme: background cycles gently between sky blue and blush pink
   ══════════════════════════════════════════════════════════════════════════ */

@keyframes trans-bg-cycle {
  0%   { background-color: #E8F8FD; } /* light sky blue  */
  50%  { background-color: #FEF0F8; } /* light blush pink */
  100% { background-color: #E8F8FD; }
}

html[data-colour="trans"],
html[data-colour="trans"] body,
html[data-colour="trans"] #game-front {
  animation: trans-bg-cycle 10s ease-in-out infinite;
}

html[data-colour="trans"] #game-front {
  isolation: isolate;
}

html[data-theme="dark"][data-colour="trans"],
html[data-theme="dark"][data-colour="trans"] body,
html[data-theme="dark"][data-colour="trans"] #game-front {
  animation: none;
  background-color: var(--board-bg);
}

@media (prefers-reduced-motion: reduce) {
  html[data-colour="trans"] #game-front { animation: none; }
}
html[data-reduce-motion][data-colour="trans"] #game-front { animation: none; }

/* ── Inline SVG icon helpers ─────────────────────────────────────────────── */
/* Cap-height ticket, freeze-flame, and gift icons used inline in text/labels. */
.ic-ticket {
  display: inline-block;
  height: 0.72em;
  width: auto;
  vertical-align: 0em;
}
.ic-freeze {
  display: inline-block;
  height: 1.1em;
  width: auto;
  vertical-align: -0.22em;
}
.ic-gift {
  display: inline-block;
  height: 1.1em;
  width: auto;
  vertical-align: -0.22em;
}

/* ── Add-to-home-screen banner ───────────────────────────────────────────── */
#a2hs-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  z-index: 200;
  background: var(--card-bg);
  border-radius: 18px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.22);
  padding: 14px 12px 14px 14px;
  transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px) + 32px));
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events: none;
}
#a2hs-banner.a2hs-in {
  transform: translateY(0);
  pointer-events: auto;
}
#a2hs-inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
#a2hs-hex-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 9px;
}
#a2hs-body {
  flex: 1;
  min-width: 0;
  padding-top: 1px;
}
#a2hs-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
#a2hs-instructions {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.45;
}
#a2hs-instructions b { color: var(--text-primary); font-weight: 600; }
#a2hs-instructions svg { display: inline; vertical-align: -3px; }
#a2hs-close {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 0;
  margin-top: -2px;
}
#a2hs-close:hover { background: rgba(128,128,128,0.12); }
#a2hs-install-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-top: 12px;
  padding: 11px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
#a2hs-install-btn:active { opacity: 0.85; }
@media (prefers-reduced-motion: reduce) {
  #a2hs-banner { transition: none; }
}
html[data-reduce-motion] #a2hs-banner { transition: none; }

/* ══════════════════════════════════════════════════════════════════════════
   Splash screen
   Full-screen animated intro: hex tiles fan out from centre spelling SHUKUMA,
   tagline writes in underneath, then the splash fades away.
   ══════════════════════════════════════════════════════════════════════════ */

/* While the splash is visible, body background matches the brand colour so
   the iOS safe-area strip at the bottom is covered (iOS uses body, not html,
   for the canvas colour that shows behind the home indicator). */
html[data-splashing] body {
  background: var(--splash-bg, #7c4dff) !important;
}

#splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--splash-bg, #7c4dff);
  transition: opacity 0.35s ease-in;
}

#splash.splash-out {
  opacity: 0;
  pointer-events: none;
}

/* ── Tile container ── */
#splash-tiles {
  position: relative;
  width: 316px;
  height: 60px;
}

/* ── Individual hex tile — transparent outer wrapper (holds fan animation) ── */
.splash-tile {
  position: absolute;
  left: 132px; /* (316px - 52px) / 2 = 132px */
  top: 0;
  width: 52px;
  height: 60px;
  transform: translateX(var(--tx, 0));
  animation: splash-fan 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both;
}
/* Inner body: rounded hex outline with jaunty per-tile rotation and scale */
.splash-tile-body {
  position: absolute;
  width: 52px;
  height: 60px;
  background: white;
  clip-path: path('M 4.33,12.5 Q 0,15 0,20 L 0,40 Q 0,45 4.33,47.5 L 21.67,57.5 Q 26,60 30.33,57.5 L 47.67,47.5 Q 52,45 52,40 L 52,20 Q 52,15 47.67,12.5 L 30.33,2.5 Q 26,0 21.67,2.5 Z');
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(var(--st-ty, 0)) rotate(var(--st-r, 0deg)) scale(var(--st-s, 1));
}
/* Inner fill: brand colour, leaving only the white border ring visible */
.splash-tile-body::before {
  content: '';
  position: absolute;
  inset: 4px;
  background: var(--splash-bg, #7c4dff);
  clip-path: path('M 3.38,11 Q 0,13 0,17 L 0,35 Q 0,39 3.38,41 L 18.62,50 Q 22,52 25.38,50 L 40.62,41 Q 44,39 44,35 L 44,17 Q 44,13 40.62,11 L 25.38,2 Q 22,0 18.62,2 Z');
}
/* Letter sits above the inner fill */
.splash-tile-body span {
  position: relative;
  z-index: 1;
  font-family: Inter, sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: white;
}

@keyframes splash-fan {
  from {
    transform: translateX(0);
    opacity: 0;
  }
  to {
    transform: translateX(var(--tx));
    opacity: 1;
  }
}

/* ── Tagline ── */
#splash-tagline {
  font-family: 'Caveat', cursive;
  font-size: clamp(1.5rem, 8vw, 1.9rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
  animation: splash-write 0.55s ease-out 1.05s both;
}

@keyframes splash-shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  18%       { transform: translateX(-7px) rotate(-1.2deg); }
  36%       { transform: translateX(7px)  rotate(1.2deg);  }
  54%       { transform: translateX(-5px) rotate(-0.6deg); }
  72%       { transform: translateX(5px)  rotate(0.6deg);  }
  90%       { transform: translateX(-2px); }
}
#splash-tiles.is-shaking {
  animation: splash-shake 0.30s ease-in-out;
}

#admin-check-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 5px 12px 3px;
  font-size: var(--fs-sm);
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.01em;
}
.acb-future-badge {
  background: var(--brand, #7c4dff);
  color: #fff;
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 0.8rem;
  letter-spacing: 0.07em;
  font-weight: 700;
}
.acb-dot { color: rgba(0,0,0,0.2); }
.acb-item { color: rgba(0,0,0,0.45); }
.acb-ok   { color: #16a34a !important; }
.acb-fail { color: #dc2626 !important; }
html[data-theme="dark"] .acb-dot { color: rgba(255,255,255,0.2); }
html[data-theme="dark"] .acb-item { color: rgba(255,255,255,0.4); }
html[data-theme="dark"] .acb-ok   { color: #4ade80 !important; }
html[data-theme="dark"] .acb-fail { color: #f87171 !important; }

/* ─── Difficulty badge ───────────────────────────────────────────────────────── */
#difficulty-badge {
  display: inline-block;
  margin-top: 2px;
  border-radius: 5px;
  padding: 1px 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: middle;
}
#difficulty-badge.diff-hard {
  background: #f59e0b;
  color: #fff;
}
#difficulty-badge.diff-superhard {
  background: #dc2626;
  color: #fff;
  animation: diff-pulse 2.4s ease-in-out infinite;
}
@keyframes diff-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
@media (prefers-color-scheme: dark) {
  #difficulty-badge.diff-hard { background: #d97706; }
  #difficulty-badge.diff-superhard { background: #b91c1c; }
}

/* ─── Calendar difficulty & completion indicators ───────────────────────────── */
.cal-day.cal-hard { outline: 2px solid #f59e0b; outline-offset: -2px; border-radius: 50%; }
.cal-day.cal-superhard { outline: 2px solid #dc2626; outline-offset: -2px; border-radius: 50%; }
.cal-day.cal-upcoming {
  color: var(--text-secondary);
  opacity: 0.75;
}
.cal-day.cal-upcoming:hover { background: var(--surface-2); opacity: 1; }
.cal-day.cal-complete::after,
.cal-day.cal-played::after {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin: 1px auto 0;
}
.cal-day.cal-complete::after { background: #16a34a; }
.cal-day.cal-played::after   { background: #f59e0b; }
@media (prefers-color-scheme: dark) {
  .cal-day.cal-hard { outline-color: #d97706; }
  .cal-day.cal-superhard { outline-color: #f87171; }
  .cal-day.cal-complete::after { background: #4ade80; }
  .cal-day.cal-played::after   { background: #fbbf24; }
  .cal-day.cal-upcoming { color: var(--text-muted); }
}

@keyframes splash-write {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

/* ── Version number at base of splash ── */
#splash-version {
  position: absolute;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  font-family: Inter, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.06em;
}

@media (prefers-reduced-motion: reduce) {
  .splash-tile { animation: none; transform: translateX(var(--tx)); }
  .splash-tile-body { transform: none; }
  #splash-tagline { animation: none; clip-path: none; }
}