/* Trivia overrides + fluid UX on top of superold_css.css */

/* ── Full-page themes: CSS vars set by JS. Defaults = Classic blue. */
body {
  --page-bg: rgba(198, 210, 230, 0.42);
  --headline-bg: #3e465c;
  --headline-muted: #c5cde0;
  --scorebar-bg: rgba(244, 246, 250, 0.96);
  --scorebar-border: #b7c0d0;
  --scorebar-fg: #243048;
  --chrome-bg: #eef1f6;
  --chrome-hover: #dce3ec;
  --chrome-muted: #6b7585;
  --accent: #2c4a6e;
  --accent-soft: #e6ecf3;
  --accent-border: #a8b9c9;
  --accent-rgb: 44, 74, 110;
  --empty-bg: #f4f6fa;
  --empty-active-bg: #e3eaf2;
  --ribbon-bg: linear-gradient(0deg, #e8edf3 0%, rgba(232, 237, 243, 0.92) 100%);
  --ribbon-fg: #2d3a4a;
  --ribbon-border: rgba(44, 74, 110, 0.16);
  --badge-bg: #f3f6fa;
  --badge-fg: #3d4a6b;
  --badge-border: #b4c0d0;
  --solved-fg: #006600;
  --solved-bg-from: rgb(220, 246, 218);
  --solved-bg-to: #a1db9c;
  --solved-border: #006600;
  --swatch-a: #48516a;
  --swatch-b: #b1c0fb;
  --btn-bg: #2c3a52;
  --btn-bg-hover: #1f2a3d;
  /* Grid zoom (JS sets --snake-zoom; cells a bit wider than tall) */
  --snake-zoom: 1;
  --cell-size: calc(112px * var(--snake-zoom));
  --cell-h: calc(96px * var(--snake-zoom));
  --board-gap: calc(8px * var(--snake-zoom));
  background-color: var(--page-bg) !important;
  transition: background-color 0.25s ease;
}
body .headline {
  background-color: var(--headline-bg) !important;
  color: #fff !important;
  transition: background-color 0.25s ease;
  z-index: 2147482500;
}
body .headline .headline-sub {
  color: var(--headline-muted) !important;
  font-size: 0.8em;
}
body .menu-link {
  color: #fff !important;
}
body .headline .menu-sep {
  color: var(--headline-muted) !important;
  opacity: 0.75;
  margin: 0 0.5em;
}
.headline-settings-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.settings-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 2147482600;
  min-width: 196px;
  padding: 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--accent-border, #a8b9c9);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
  color: #243048;
}
.settings-panel[hidden] {
  display: none !important;
}
.settings-panel-title {
  font-family: "Fira Sans Condensed", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #6b7585;
  margin: 0 0 8px;
}
.settings-progress-title {
  margin-top: 14px;
}
.settings-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--accent-border, #a8b9c9);
  background: var(--accent-soft, #e6ecf3);
  color: var(--accent, #2c4a6e);
  font-family: "Fira Sans Condensed", sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.settings-save-btn:hover {
  background: var(--chrome-hover, #dce3ec);
}
.settings-toggle-btn.active {
  background: var(--accent, #2c4a6e);
  color: #fff;
  border-color: var(--accent, #2c4a6e);
}
.settings-toggle-btn.active:hover {
  background: var(--btn-bg-hover, #1f2a3d);
  color: #fff;
}
.trivia-save-modal {
  z-index: 2147483000;
}
.trivia-save-modal-content h2 {
  font-family: "Fira Sans Condensed", sans-serif;
}
.trivia-save-modal-close:hover {
  color: #333;
}
.headline-settings-wrap .palette-panel {
  top: calc(100% + 6px);
  right: 0;
}

/* ═══════════════════════════════════════════════════════════
   STAGE mode — concurso / velvet / spotlights (toggle "Stage")
   Solved cells stay green; FOD stays gold.
   ═══════════════════════════════════════════════════════════ */
body.snake-stage {
  background-color: #0a0406 !important;
  background-image:
    /* Velvet curtains L/R */
    linear-gradient(
      90deg,
      #2c0a12 0%,
      #4a1220 6%,
      #3a0e18 11%,
      transparent 20%
    ),
    linear-gradient(
      270deg,
      #2c0a12 0%,
      #4a1220 6%,
      #3a0e18 11%,
      transparent 20%
    ),
    /* Stage floor glow */
    radial-gradient(
      ellipse 90% 45% at 50% 110%,
      rgba(80, 20, 30, 0.9) 0%,
      rgba(20, 6, 10, 0.5) 40%,
      transparent 70%
    ),
    /* Deep velvet fill */
    radial-gradient(
      ellipse 120% 80% at 50% 40%,
      #1c0a10 0%,
      #0c0408 55%,
      #050203 100%
    );
  background-attachment: fixed;
  color: #f5e6c8;
}
/* Dim falling emoji so it doesn't fight the stage */
body.snake-stage::before {
  opacity: 0.05 !important;
  filter: sepia(0.6) hue-rotate(-20deg);
}
/* Spotlights from the top + soft sweep */
body.snake-stage::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* Main center cone */
    radial-gradient(
      ellipse 28% 55% at 50% -5%,
      rgba(255, 230, 150, 0.38) 0%,
      rgba(255, 200, 80, 0.12) 35%,
      transparent 68%
    ),
    /* Left spotlight */
    radial-gradient(
      ellipse 22% 50% at 18% -8%,
      rgba(255, 220, 140, 0.32) 0%,
      rgba(255, 190, 70, 0.1) 40%,
      transparent 70%
    ),
    /* Right spotlight */
    radial-gradient(
      ellipse 22% 50% at 82% -8%,
      rgba(255, 220, 140, 0.32) 0%,
      rgba(255, 190, 70, 0.1) 40%,
      transparent 70%
    ),
    /* Floor catch light */
    radial-gradient(
      ellipse 55% 22% at 50% 95%,
      rgba(255, 210, 100, 0.1) 0%,
      transparent 70%
    );
  animation: stageLights 7s ease-in-out infinite alternate;
}
@keyframes stageLights {
  0% {
    opacity: 0.85;
    filter: brightness(0.95);
  }
  50% {
    opacity: 1;
    filter: brightness(1.08);
  }
  100% {
    opacity: 0.9;
    filter: brightness(1);
  }
}
/* Keep UI above spotlight layer — never demote fixed modals/dimmer */
body.snake-stage .snake-prev,
body.snake-stage .alpha-track,
body.snake-stage .toaster,
body.snake-stage .palette-panel {
  position: relative;
  z-index: 2;
}
/* Same stack as Flagdoku index (grid 2147482000, chrome 2147482500, modals 2147483000) */
body.snake-stage .grid-container {
  z-index: 2147482000;
}
body.snake-stage .search-dimmer {
  position: fixed !important;
  z-index: 2147483000 !important;
}
body.snake-stage #modal.modal,
body.snake-stage #modalarchive.modal,
body.snake-stage .modal-solved,
body.snake-stage .modalq,
body.snake-stage .modalhelp {
  position: fixed !important;
  z-index: 2147483000 !important;
}
body.snake-stage .headline {
  z-index: 2147482500;
  background: linear-gradient(
    180deg,
    #2a0a12 0%,
    #1a050a 100%
  ) !important;
  border-bottom: 1px solid rgba(212, 160, 23, 0.45);
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 215, 120, 0.15) inset;
}
body.snake-stage .headline .headline-sub {
  color: #e8c87a !important;
  text-shadow: 0 0 8px rgba(255, 200, 80, 0.35);
}
body.snake-stage .snake-scorebar {
  z-index: 999;
  background: linear-gradient(
    180deg,
    rgba(36, 10, 16, 0.96) 0%,
    rgba(22, 6, 10, 0.94) 100%
  ) !important;
  border-bottom: 1px solid rgba(212, 160, 23, 0.4);
  color: #f5e6c8 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
body.snake-stage .snake-scorebar b {
  color: #f0d060 !important;
}
body.snake-stage .opt-btn.active,
body.snake-stage .mode-btn.active {
  background: linear-gradient(180deg, #d4a017, #a67c00) !important;
  color: #1a0a05 !important;
}
body.snake-stage .palette-open-btn,
body.snake-stage .palette-random-btn,
body.snake-stage .zoom-toggle,
body.snake-stage .opt-toggle,
body.snake-stage .mode-toggle {
  border-color: rgba(212, 160, 23, 0.45) !important;
  background: #2a1018 !important;
}
body.snake-stage .palette-open-btn,
body.snake-stage .palette-random-btn,
body.snake-stage .zoom-btn,
body.snake-stage .opt-btn:not(.active) {
  color: #e8c87a !important;
}
body.snake-stage .snake-puzzle-num,
body.snake-stage .snake-puzzle-num.puzzle-badge,
body.snake-stage button.snake-puzzle-num {
  background: linear-gradient(180deg, #3a1820, #2a1018) !important;
  color: #f0d060 !important;
  border-color: #8a6a28 !important;
  box-shadow: 0 0 12px rgba(212, 160, 23, 0.2) !important;
}
body.snake-stage .snake-scorebar .score-pill {
  background: color-mix(in srgb, #1a050a 22%, #ffffff 78%) !important;
  border-color: color-mix(in srgb, #d4a017 28%, #ffffff 72%) !important;
  color: color-mix(in srgb, #1a050a 55%, #8a6a28 45%) !important;
}
body.snake-stage .snake-scorebar .score-pill b,
body.snake-stage .snake-scorebar #scoreValue {
  color: color-mix(in srgb, #1a050a 40%, #a67c00 60%) !important;
}
body.snake-stage .grid-playercell.word-mode-empty {
  background: linear-gradient(160deg, #2e141c, #1a0c12) !important;
  border: 1px solid rgba(212, 160, 23, 0.22) !important;
  color: #e8c87a !important;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.35);
}
body.snake-stage .grid-playercell.word-mode-empty .word-cat-face {
  color: #d4b878 !important;
}
body.snake-stage .grid-playercell.word-mode-empty.snake-active,
body.snake-stage .grid-playercell.snake-active {
  background: linear-gradient(160deg, #4a2030, #2a1018) !important;
  border-color: #d4a017 !important;
  box-shadow:
    0 0 0 2px rgba(212, 160, 23, 0.35),
    0 0 18px rgba(255, 200, 80, 0.25) !important;
}
/* Soft gold rim around the board under lights */
body.snake-stage .snake-board {
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 20px rgba(212, 160, 23, 0.12));
}
body.snake-stage .snake-menu-btn,
body.snake-stage .snake-clear-btn,
body.snake-stage .grid-container.snake-grid-3x3 .puzzle-giveup-btn {
  background: linear-gradient(180deg, #1a080c, #0a0305) !important;
  border: 1px solid rgba(212, 160, 23, 0.5) !important;
  color: #f0d060 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
body.snake-stage .snake-menu-btn:hover,
body.snake-stage .snake-clear-btn:hover,
body.snake-stage .grid-container.snake-grid-3x3 .puzzle-giveup-btn:hover {
  background: linear-gradient(180deg, #2a1018, #12060a) !important;
  border-color: #d4a017 !important;
}
/* Fixed chrome must keep fixed positioning despite z-index rule */
body.snake-stage .headline {
  position: fixed !important;
}
body.snake-stage .snake-scorebar {
  position: fixed !important;
}
body.snake-stage .snake-prev,
body.snake-stage .alpha-track {
  position: fixed !important;
  z-index: 998;
}
body.snake-stage .snake-menu-btn,
body.snake-stage .snake-clear-btn {
  position: absolute !important;
  z-index: 5;
}

/* Score strip under the fixed headline */
.snake-scorebar {
  position: fixed;
  top: 52px;
  left: 0;
  right: 0;
  z-index: 2147482500;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  padding: 6px 10px;
  background: var(--scorebar-bg);
  border-bottom: 1px solid var(--scorebar-border);
  font-family: "Fira Sans Condensed", sans-serif;
  font-size: 13px;
  color: var(--scorebar-fg);
  backdrop-filter: blur(6px);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.snake-scorebar .sep { color: var(--chrome-muted); opacity: 0.7; }
.snake-scorebar b {
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
/* Score pill — light tint of headline / bars (follows theme) */
.snake-scorebar .score-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--headline-bg) 16%, #ffffff 84%);
  border: 1px solid color-mix(in srgb, var(--headline-bg) 32%, #ffffff 68%);
  font-size: 12px;
  font-weight: 700;
  color: color-mix(in srgb, var(--headline-bg) 72%, #000000 28%);
  line-height: 1.2;
}
.snake-scorebar .score-pill[hidden] {
  display: none !important;
}
.snake-scorebar .score-pill b,
.snake-scorebar #scoreValue {
  font-size: 13px;
  color: color-mix(in srgb, var(--headline-bg) 78%, #000000 22%) !important;
}
.snake-scorebar .score-pill #scoreUnit {
  color: color-mix(in srgb, var(--headline-bg) 55%, #666666 45%);
  font-weight: 600;
}

.mode-toggle {
  display: inline-flex;
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--chrome-bg);
}
.mode-btn {
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border: none;
  background: transparent;
  color: var(--chrome-muted);
  padding: 4px 10px;
  cursor: pointer;
  line-height: 1.2;
}
.mode-btn.active {
  background: var(--accent);
  color: #fff;
}
.mode-btn:not(.active):hover {
  background: var(--chrome-hover);
}

/* Score / Tags option toggles */
.opt-toggle {
  display: inline-flex;
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--chrome-bg);
}
.opt-btn {
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border: none;
  background: transparent;
  color: var(--chrome-muted);
  padding: 4px 8px;
  cursor: pointer;
  line-height: 1.2;
}
.opt-btn.active {
  background: var(--accent);
  color: #fff;
}
/* Theme picker — compact button + 50-swatch popover */
.palette-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.palette-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border: 1px solid var(--accent-border);
  border-radius: 999px 0 0 999px;
  background: var(--chrome-bg);
  color: var(--accent);
  padding: 3px 8px 3px 5px;
  cursor: pointer;
  line-height: 1.2;
}
.palette-open-btn:hover {
  background: var(--chrome-hover);
}
.palette-random-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 12px;
  border: 1px solid var(--accent-border);
  border-left: none;
  border-radius: 0 999px 999px 0;
  background: var(--chrome-bg);
  color: var(--accent);
  padding: 3px 9px;
  cursor: pointer;
  line-height: 1.2;
  margin-left: 0;
}
.palette-random-btn:hover {
  background: var(--chrome-hover);
}
.palette-random-btn:active {
  transform: scale(0.96);
}
.palette-open-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.2);
  background: linear-gradient(
    135deg,
    var(--swatch-a, #1f4d2a) 0 50%,
    var(--swatch-b, #a1db9c) 50% 100%
  );
  flex-shrink: 0;
}
.palette-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1100;
  width: min(280px, 88vw);
  padding: 10px;
  border-radius: 12px;
  background: var(--scorebar-bg, #fff);
  border: 1px solid var(--accent-border);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(8px);
}
.palette-panel[hidden] {
  display: none !important;
}
.palette-panel-title {
  font-family: "Fira Sans Condensed", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--chrome-muted);
  margin: 0 2px 8px;
}
.palette-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
  max-height: min(52vh, 340px);
  overflow-y: auto;
  padding-right: 2px;
}
.palette-section {
  grid-column: 1 / -1;
  font-family: "Fira Sans Condensed", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  color: var(--chrome-muted);
  margin: 6px 2px 2px;
  opacity: 0.9;
}
.palette-section:first-child {
  margin-top: 0;
}
.palette-swatch {
  width: 100%;
  aspect-ratio: 1;
  min-width: 0;
  min-height: 0;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.16);
  padding: 0;
  cursor: pointer;
  background: linear-gradient(
    135deg,
    var(--swatch-a) 0 50%,
    var(--swatch-b) 50% 100%
  );
  box-shadow: none;
  line-height: 0;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.palette-swatch:hover {
  transform: scale(1.14);
  z-index: 1;
}
.palette-swatch.active {
  border-color: #111;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--accent);
  transform: scale(1.08);
}

.opt-btn:not(.active):hover {
  background: var(--chrome-hover);
  color: var(--accent);
}

/* Grid zoom − / + */
.zoom-toggle {
  display: inline-flex;
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--chrome-bg);
}
.zoom-btn {
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  border: none;
  background: transparent;
  color: var(--accent);
  padding: 2px 10px;
  cursor: pointer;
  min-width: 28px;
}
.zoom-btn + .zoom-btn {
  border-left: 1px solid var(--accent-border);
}
.zoom-btn:hover:not(:disabled) {
  background: var(--chrome-hover);
}
.zoom-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.opt-btn[hidden] {
  display: none !important;
}

.alpha-track {
  position: fixed;
  top: 108px;
  left: 0;
  right: 0;
  z-index: 998;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  padding: 4px 8px 6px;
  background: var(--scorebar-bg);
  border-bottom: 1px solid var(--scorebar-border);
  font-family: Roboto, monospace;
  pointer-events: none;
}
.alpha-track[hidden] { display: none !important; }
.alpha-ch {
  width: 15px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  border-radius: 3px;
  color: #bbb;
  background: #f0f0f0;
}
.alpha-ch.on {
  color: #fff;
  background: var(--accent);
}
.snake-prev .letters.missing {
  max-width: min(280px, 70vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.snake-prev .letters.need-letter {
  font-weight: 800;
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent);
  font-size: 13px;
  min-width: 1.4em;
  text-align: center;
}

/* Tighter mode pills with many modes */
.mode-btn {
  padding: 4px 4px;
  font-size: 9px;
}
@media (min-width: 420px) {
  .mode-btn {
    padding: 4px 6px;
    font-size: 10px;
  }
}
@media (min-width: 560px) {
  .mode-btn {
    padding: 4px 8px;
    font-size: 11px;
  }
}

/* Place mode headers — match classic Flagdoku Trivia .grid-puzzlecell */
.grid-puzzlecell.place-axis {
  font-family: "Fira Sans Condensed", sans-serif !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  color: #555 !important;
  line-height: 1.15 !important;
  padding: 2px 1px !important;
  text-align: center;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: none !important;
  background: transparent;
  word-break: break-word;
  overflow: hidden;
}
.grid-puzzlecell.place-axis:hover {
  filter: brightness(0.96);
}

/* Word/place rule chip on empty cells (place mode still uses this) */
.snake-rule-hint {
  display: block;
  margin-top: 4px;
  padding: 1px 4px;
  max-width: 92%;
  font-family: "Fira Sans Condensed", sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.15;
  text-align: center;
  color: #555;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.snake-rule-hint.place-hint {
  font-size: 11px;
  letter-spacing: 0;
}
.snake-active .snake-rule-hint {
  background: rgba(var(--accent-rgb, 44, 74, 110), 0.18);
  border-color: var(--accent);
  color: var(--accent);
}
.snake-locked .snake-rule-hint {
  opacity: 0.55;
}

/* ── Word mode: category is the cell (no 1–8 numbers) ── */
/* Cell size driven by --snake-zoom (base 96px) */
.grid-container .grid-playercell,
.grid-container .grid-cellsolved,
.grid-container .grid-cellfod {
  overflow: hidden !important;
  box-sizing: border-box !important;
  width: var(--cell-size) !important;
  height: var(--cell-h) !important;
  max-width: var(--cell-size) !important;
  max-height: var(--cell-h) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  position: relative;
  z-index: 0;
  margin-left: 0 !important;
  border-radius: 4px !important;
  /* Slightly smaller than classic so names fit cleanly in the cell */
  font-size: calc(13px * var(--snake-zoom)) !important;
}

/* Solved cells — always Flagdoku green (theme does not change these) */
.grid-cellsolved {
  color: #006600 !important;
  background: linear-gradient(45deg, rgb(220, 246, 218), #a1db9c) !important;
  border: 2px solid #006600 !important;
  box-shadow: 0 2px 4px #006600 !important;
}

/*
 * Flag + name: absolute geometry from the CELL top edge.
 * Same coords on every filled cell (solved, FOD, with/without cat bar).
 * Never soft-hyphenate mid-word (no "hairdress-er").
 */
.grid-cellsolved,
.grid-cellfod {
  position: relative !important;
}
.snake-cell-inner {
  position: absolute;
  inset: 0;
  /* Room for floating cat-bar chip */
  bottom: calc(20px * var(--snake-zoom));
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  pointer-events: none;
}
.word-bars-off .snake-cell-inner,
.fod-center-cell.word-bars-off .snake-cell-inner {
  bottom: 0;
  /* Vertically center flag + answer when cat bar is hidden */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(4px * var(--snake-zoom));
  padding: calc(4px * var(--snake-zoom)) calc(2px * var(--snake-zoom));
}
.snake-cell-flag {
  position: absolute;
  top: calc(12px * var(--snake-zoom));
  left: 50%;
  transform: translateX(-50%);
  width: calc(20px * var(--snake-zoom));
  height: calc(14px * var(--snake-zoom));
  border: 1px solid #000;
  border-radius: 3px;
  display: block;
  margin: 0;
  object-fit: fill;
  box-sizing: content-box;
  z-index: 1;
  flex: 0 0 auto;
}
/* Flagdoku Index ratios, scaled to the 20px slot */
.snake-cell-flag.flag-sq {
  /* Switzerland / Vatican City — 35×35 */
  width: calc(14px * var(--snake-zoom));
  height: calc(14px * var(--snake-zoom));
}
.snake-cell-flag.flag-niger {
  /* Niger — 45×38 */
  width: calc(18px * var(--snake-zoom));
  height: calc(15px * var(--snake-zoom));
}
.snake-cell-flag.flag-nepal {
  /* Nepal — 30×35.34 */
  width: calc(12px * var(--snake-zoom));
  height: calc(14px * var(--snake-zoom));
}
.snake-cell-flag-empty {
  border-color: transparent;
  background: transparent;
}
/* Search / possible-answers chips: same 4px radius as grid cells */
#nameList li img,
#nameElement li img {
  width: 16px !important;
  height: 11px !important;
  border-radius: 4px !important;
}
.snake-cell-name {
  position: absolute;
  top: calc(32px * var(--snake-zoom));
  left: calc(3px * var(--snake-zoom));
  right: calc(3px * var(--snake-zoom));
  height: calc(31px * var(--snake-zoom));
  font-family: "Fira Sans Condensed", sans-serif;
  font-size: calc(13px * var(--snake-zoom)) !important;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.2px;
  margin: 0;
  padding: 0;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  white-space: normal;
  z-index: 1;
  pointer-events: none;
}
/* Cat bar off: drop absolute coords so flexbox can center the stack */
.word-bars-off .snake-cell-flag,
.fod-center-cell.word-bars-off .snake-cell-flag {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
}
.word-bars-off .snake-cell-name,
.fod-center-cell.word-bars-off .snake-cell-name {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  height: auto;
  max-height: calc(40px * var(--snake-zoom));
  width: 100%;
}

.grid-playercell.word-mode-empty {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 4px 3px !important;
  background: var(--empty-bg, #f7f8fb) !important;
  /* No lift-on-hover (classic hover transform causes visual overlap) */
  transform: none !important;
}
.grid-playercell.word-mode-empty:hover {
  transform: none !important;
}
.grid-playercell.word-mode-empty.snake-active {
  background: var(--empty-active-bg, #eef2ff) !important;
  /* Soft ring that stays inside the cell, not a 3px outer glow */
  box-shadow: inset 0 0 0 2px var(--accent), 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid var(--accent) !important;
  z-index: 1;
}
.grid-playercell.word-mode-empty.snake-active:hover {
  background: var(--chrome-hover) !important;
  transform: none !important;
}

.word-cat-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  flex: 1 1 auto;
  min-height: 0;
  padding: calc(16px * var(--snake-zoom)) 3px 3px;
  box-sizing: border-box;
  /* Text: Fira; emoji: Apple first (native iPhone), never Noto/tweetmoji web fonts */
  font-family: "Fira Sans Condensed", "Apple Color Emoji", "Segoe UI Emoji",
    sans-serif;
  font-size: calc(14px * var(--snake-zoom));
  font-weight: 600;
  color: #555;
  line-height: 1.12;
  text-align: center;
  word-break: break-word;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  gap: 1px;
}
/* Big emoji on top — native Apple Color Emoji on iPhone (not Noto/tweetmoji) */
.word-cat-face .wcf-emoji,
.grid-playercell .wcf-emoji,
.snake-cat-modal-face .wcf-emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: calc(26px * var(--snake-zoom));
  min-height: calc(26px * var(--snake-zoom));
  font-size: calc(19px * var(--snake-zoom));
  line-height: 1;
  margin: 0 0 calc(3px * var(--snake-zoom));
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant-emoji: emoji;
  flex: 0 0 calc(26px * var(--snake-zoom));
}
/* 2-line: sit between 1-line (default) and 3-line */
.word-cat-face.wcf-2 {
  padding: calc(12px * var(--snake-zoom)) 3px 3px;
}
/* 3-line labels: nudge up so the last line isn't clipped */
.word-cat-face.wcf-3 {
  padding: calc(8px * var(--snake-zoom)) 3px 2px;
}
.word-cat-face.wcf-3 .wcf-emoji {
  margin-bottom: calc(2px * var(--snake-zoom));
}
.neg-emoji {
  position: relative;
  display: inline-block;
  line-height: 1;
}
.neg-emoji::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.05em;
  height: 2px;
  margin: 0;
  background: #dc2626;
  transform: translate(-50%, -50%) rotate(-32deg);
  border-radius: 2px;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
}
.word-cat-ribbon .neg-emoji {
  font-size: 1.05em;
  margin-right: 2px;
  vertical-align: -0.12em;
}
.word-cat-face .wcf-line {
  display: block;
  width: 100%;
  max-width: 100%;
  font-size: calc(13.5px * var(--snake-zoom));
  font-weight: 600;
  line-height: 1.15;
  color: #555;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Scale emoji / multi-line Flagdoku labels to fit the cell */
.word-cat-face br {
  content: "";
  display: block;
  margin-top: 1px;
}

/* Filled word cell: category under the answer */
.grid-cellsolved.word-mode-cell {
  display: block !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
/* Category label: compact chip — single line + ellipsis */
.word-cat-ribbon {
  position: absolute;
  left: calc(5px * var(--snake-zoom));
  right: calc(5px * var(--snake-zoom));
  bottom: calc(4px * var(--snake-zoom));
  z-index: 3;
  width: auto;
  height: calc(15px * var(--snake-zoom));
  margin: 0;
  font-family: "Fira Sans Condensed", sans-serif;
  font-size: calc(10.5px * var(--snake-zoom));
  font-weight: 700;
  letter-spacing: 0.02px;
  text-align: center;
  text-transform: uppercase;
  padding: 0 calc(3px * var(--snake-zoom));
  line-height: calc(15px * var(--snake-zoom));
  border-radius: calc(3px * var(--snake-zoom));
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  color: var(--ribbon-fg, #3a4558);
  background: var(--ribbon-bg, #eef1f7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  pointer-events: auto;
  box-sizing: border-box;
}
.word-cat-ribbon:hover {
  filter: brightness(0.96);
}
/* Solved cells: solid deeper green chip — different from soft cell lime */
.grid-cellsolved .word-cat-ribbon {
  color: #f3fff5 !important;
  background: #1a6b3a !important;
  border: 1px solid #0f4d28 !important;
  box-shadow: 0 1px 2px rgba(15, 77, 40, 0.28) !important;
}
.grid-cellsolved .word-cat-ribbon:hover {
  background: #155a31 !important;
  color: #ffffff !important;
  filter: none;
}
/* Points top-left again — free of the bottom category bar */
.grid-cellsolved.word-mode-cell .snake-pts {
  top: 2px;
  bottom: auto;
  left: 2px;
  right: auto;
  z-index: 4;
}

/* Word mode with category bars hidden — centered stack, slightly larger type */
.grid-cellsolved.word-mode-cell.word-bars-off .snake-cell-name,
.fod-center-cell.word-bars-off .snake-cell-name {
  font-size: calc(12.5px * var(--snake-zoom)) !important;
}

/* Word mode: cell no longer satisfies its rule (e.g. longest beaten later) */
.grid-cellsolved.word-cell-invalid {
  /* Darker red, matching classic Flagdoku index's wrong-cell tone
     (index also darkens via filter, not just the gradient stops) */
  background: linear-gradient(45deg, #f8cccc, #ffb8b8, #ffa5a5, #ff9292) !important;
  border: 2px solid #990000 !important;
  box-shadow: 0 2px 4px rgba(102, 0, 0, 0.5) !important;
  color: #660000 !important;
  filter: brightness(0.7) !important;
}
.grid-cellsolved.word-cell-invalid:not(.just-filled) {
  animation: none !important;
}
.grid-cellsolved.word-cell-invalid .word-cat-ribbon,
.word-cat-ribbon.invalid {
  background: #c44 !important;
  border: 1px solid #992222 !important;
  color: #fff5f5 !important;
  box-shadow: 0 1px 2px rgba(120, 20, 20, 0.25) !important;
}
.snake-pts.invalid {
  background: #b33 !important;
  color: #fff !important;
}


#scoreValue.score-bump {
  animation: scoreBump 0.22s ease-out;
}
@keyframes scoreBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.2); color: #1b6b3a; }
  100% { transform: scale(1); }
}

.snake-prev {
  position: fixed;
  /* Falls back if JS hasn't measured scorebar height yet */
  top: var(--snake-chrome-bottom, 82px);
  left: 0;
  right: 0;
  z-index: 998;
  text-align: center;
  font-family: "Fira Sans Condensed", sans-serif;
  font-size: 12px;
  color: #555;
  padding: 4px 10px 2px;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.snake-prev[hidden] {
  display: none !important;
}
body:has(#alphaTrack:not([hidden])) {
  padding-top: calc(var(--snake-chrome-bottom, 82px) + 50px) !important;
}
body:has(#alphaTrack:not([hidden])) .grid-container {
  top: 22% !important;
}
.snake-prev.prev-fade { opacity: 0.35; }
.snake-prev .letters {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid #ccc;
  font-family: Roboto, monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--accent);
}

/* Push page content under the headline (JS sets --snake-chrome-pad) */
body {
  padding-top: var(--snake-chrome-pad, 72px) !important;
}

.grid-container,
.grid-container.snake-grid-3x3 {
  /* Below FLAGDOKU header + a little air — namelist modal follows this box */
  top: calc(var(--snake-chrome-bottom, 52px) + 20px) !important;
  z-index: 2147482000;
}

/* ── Snake: 3×3 board (no category headers), larger cells ── */
.grid-container.snake-grid-3x3 {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: auto !important;
  height: auto !important;
  min-width: 0;
  padding: 14px 20px 56px !important;
  /* kill classic 4×4 template */
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  /* keep board truly centered (transform already on .grid-container) */
  left: 50% !important;
  transform: translateX(-50%) !important;
}
.snake-grid-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  width: 100%;
}
.snake-board {
  display: grid;
  grid-template-columns: repeat(3, var(--cell-size));
  grid-template-rows: repeat(3, var(--cell-h));
  gap: var(--board-gap);
  margin: 0 auto;
  transition: gap 0.15s ease;
}
body.trivia-in-archive .snake-board {
  gap: calc(var(--board-gap) + 3px);
  background: #fff;
  padding: 3px;
  border-radius: 8px;
}
/* Brief circular delay shown in #nameList right before an answer is judged (flagdoku-style) */
.snk-answer-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 0;
}
.snk-answer-loader-ball {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #999;
  animation: snkBallPulse 0.5s ease-in-out infinite;
}
.snk-answer-loader-ball:nth-child(1) { animation-delay: 0s; }
.snk-answer-loader-ball:nth-child(2) { animation-delay: 0.15s; }
.snk-answer-loader-ball:nth-child(3) { animation-delay: 0.3s; }
@keyframes snkBallPulse {
  0%, 100% { transform: scale(0.6); opacity: 0.5; }
  50% { transform: scale(1); opacity: 1; }
}

/* Two chips above board: #N (Archive) · CATEGORY (info) */
.snake-badge-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  max-width: min(92vw, calc(var(--cell-size) * 3 + var(--board-gap) * 2));
  width: 100%;
  box-sizing: border-box;
}
.snake-badge-row.snake-badge-loading {
  opacity: 0.55;
  pointer-events: none;
}
/* Connect-style subtitle between the badge row and the board */
.snake-subtitle {
  margin: -4px 0 10px;
  max-width: min(92vw, calc(var(--cell-size) * 3 + var(--board-gap) * 2));
  color: #64748b;
  font-family: "Fira Sans Condensed", sans-serif;
  font-size: 0.82rem;
  text-align: center;
  line-height: 1.3;
}
.snake-puzzle-num,
.snake-puzzle-num.puzzle-badge,
button.snake-puzzle-num {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
  height: auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 12px;
  font-family: "Fira Sans Condensed", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.2px;
  text-transform: none;
  color: var(--badge-fg) !important;
  background: var(--badge-bg) !important;
  border: 1px solid var(--badge-border) !important;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  box-shadow: none !important;
  white-space: nowrap;
  overflow: hidden;
  transition: all 0.15s ease-in-out;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  line-height: 1.2;
}
button.puzzle-badge-num-btn {
  flex: 0 0 auto;
}
.puzzle-badge-num-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

/* --- 'TRIVIA #' + 'EXIT ARCHIVE' — Connect's exact gray (.puzzle-badge palette) --- */
#puzzle-badge-num,
#puzzle-badge-exit {
  background-color: #f8fafc !important;
  color: #64748b !important;
  padding: 6px 16px !important;
  border-radius: 8px !important;
  font-size: 1rem !important;
  font-weight: bold !important;
  cursor: pointer;
  border: 1px solid #cbd5e1 !important;
  box-shadow: none !important;
  transition: all 0.2s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
#puzzle-badge-num {
  min-width: 160px;
  position: relative;
  z-index: 5;
}
#puzzle-badge-num:hover,
#puzzle-badge-exit:hover {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  border-color: #94a3b8 !important;
}
#puzzle-badge-num:active,
#puzzle-badge-exit:active {
  transform: scale(0.98);
}
/* Connect's "Exit Archive" is deliberately narrower than the main badge */
#puzzle-badge-exit {
  flex: 0 0 auto;
  font-size: 0.8rem !important;
  padding: 6px 12px !important;
}

/* --- Category card — soft Trivia blue, no hover shift --- */
.puzzle-category-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: 6px 10px !important;
  background: #e4eef8 !important;
  border-radius: 7px !important;
  box-shadow: 0 1px 3px rgba(44, 74, 110, 0.14), 0 0 0 1px #8eabc8 inset !important;
  border: none;
  cursor: pointer;
  text-align: center;
  flex: 0 0 auto;
  width: 92px;
  max-width: 32%;
}
.puzzle-category-card:hover {
  transform: none;
  background: #e4eef8 !important;
}
.puzzle-category-card-label {
  margin: 0 0 4px 0 !important;
  font-family: "Fira Sans Condensed", sans-serif;
  font-weight: 900 !important;
  color: #2c4a6e !important;
  text-transform: uppercase !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.4px !important;
}
.puzzle-category-card-emoji {
  display: block;
  font-size: 1.4rem;
  line-height: 1;
}
.puzzle-category-card-name {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 4px 0 0 0 !important;
}
.puzzle-category-card-name-line {
  display: block;
  max-width: 100%;
  font-family: "Fira Sans Condensed", sans-serif;
  font-weight: bold !important;
  color: #1e334d !important;
  font-size: 0.78rem !important;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.snake-stage .puzzle-category-card,
body.snake-stage .puzzle-category-card:hover {
  background: linear-gradient(180deg, #1e334d, #16283c) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 0 0 1px #6b8cb0 inset !important;
}
body.snake-stage .puzzle-category-card-label {
  color: #b8cce0 !important;
}
body.snake-stage .puzzle-category-card-name-line {
  color: #e8eef6 !important;
}

.snake-puzzle-num .bi {
  font-size: 1rem;
  flex-shrink: 0;
  opacity: 0.85;
}
.snake-puzzle-num .puzzle-badge-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
  flex-shrink: 0;
}
.snake-puzzle-num:hover,
.snake-puzzle-num.puzzle-badge:hover,
button.snake-puzzle-num:hover {
  background: var(--chrome-hover) !important;
  color: var(--accent) !important;
  border-color: var(--accent-border) !important;
  transform: none;
}
.snake-puzzle-num:active,
.snake-puzzle-num.puzzle-badge:active,
button.snake-puzzle-num:active {
  transform: scale(0.98);
  background: var(--accent-soft) !important;
}

/* Archive — Flagdoku-index style overlay + tall panel */
.snake-archive-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.25s ease;
  cursor: pointer;
}
.snake-archive-overlay.show {
  opacity: 1;
}
#modalarchive.snake-archive-modal,
.modalarchive.snake-archive-modal,
#modalarchive.modal {
  box-sizing: border-box !important;
  z-index: 2147483001 !important;
  border: 1px solid #ccc !important;
  width: min(400px, 92vw) !important;
  max-width: 400px !important;
  font-family: "Fira Sans", sans-serif !important;
}
#modalarchive .modal-header h2,
#modalarchive #modal-headline-arc {
  font-size: 17px !important;
  font-family: "Fira Sans", sans-serif !important;
}
#modalarchive .dateTable,
#modalarchive .snake-arc-table,
#snake-arc-table {
  border: none !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background: #fff !important;
  font-family: "Fira Sans", sans-serif !important;
  font-size: 12.5px !important;
}
#modalarchive .dateTable th,
#modalarchive .dateTable td,
#snake-arc-table th,
#snake-arc-table td {
  border: none !important;
  border-top: 0.5px solid #000 !important;
  border-bottom: 1px solid #6f6f6f !important;
  font-family: "Fira Sans", sans-serif !important;
  font-size: 12.5px !important;
  line-height: 1.25 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 8px !important;
  padding-right: 6px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#modalarchive .arc-num,
#modalarchive .arc-score,
#modalarchive .arc-cat-emoji-col {
  width: 1% !important;
  white-space: nowrap !important;
}
#modalarchive .arc-score {
  padding-left: 6px !important;
  padding-right: 10px !important;
}
#modalarchive .arc-cat-emoji-col {
  text-align: center !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}
#modalarchive .arc-cat {
  padding-left: 12px !important;
}
#modalarchive .arc-cat-emoji {
  display: inline-block;
  font-size: 13px;
  line-height: 1;
  vertical-align: -1px;
}
#modalarchive .arc-cat-label {
  vertical-align: middle;
}
#modalarchive .hover-row {
  border: none !important;
  border-width: 0 !important;
  height: 26px !important;
  font-size: 16px !important;
  font-family: "Fira Sans", sans-serif !important;
}
/* Vertical divider lines between every column */
#modalarchive .dateTable th:not(:last-child),
#modalarchive .dateTable td:not(:last-child),
#snake-arc-table th:not(:last-child),
#snake-arc-table td:not(:last-child) {
  border-right: 1px solid #d9d9d9 !important;
}

/* MENU / CLEAR overlays must sit above .grid-container (z-index 2147482000) */
.puzzle-modal-overlay {
  z-index: 2147483640 !important;
}
.puzzle-modal-dialog {
  z-index: 2147483641 !important;
}
.puzzle-option-btn.trivia-share-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 8px);
  box-sizing: border-box;
}
.puzzle-option-btn.trivia-share-opt i {
  font-size: 1.05rem;
  width: 1.2em;
  text-align: center;
  flex-shrink: 0;
}

/* MENU / CLEAR — under the grid; darker than headline (follows theme) */
.snake-menu-btn,
.snake-clear-btn,
.grid-container.snake-grid-3x3 .puzzle-giveup-btn {
  position: absolute !important;
  bottom: -46px !important;
  z-index: 5;
  background-color: var(--btn-bg, #163820) !important;
  color: #fff !important;
  border: none !important;
  transition: background-color 0.2s ease, filter 0.15s ease;
}
.snake-menu-btn {
  left: 0 !important;
  margin-left: 0 !important;
}
.snake-clear-btn,
.grid-container.snake-grid-3x3 .puzzle-giveup-btn {
  right: 0 !important;
  margin-right: 2px !important;
}
.snake-menu-btn:hover,
.snake-clear-btn:hover,
.grid-container.snake-grid-3x3 .puzzle-giveup-btn:hover {
  background-color: var(--btn-bg-hover, #0f2817) !important;
  filter: none;
}

/* Active snake head */
.grid-playercell.snake-active {
  border: 2.5px solid var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 44, 74, 110), 0.28), 0 2px 6px rgba(0, 0, 0, 0.12) !important;
  background: var(--empty-active-bg) !important;
  cursor: pointer !important;
  transition: background 0.1s ease !important;
}
.grid-playercell.snake-active:hover {
  background: var(--chrome-hover) !important;
}

.grid-playercell.snake-locked {
  opacity: 0.48;
  cursor: not-allowed !important;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.snake-step {
  font-family: "Fira Sans Condensed", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #888;
  transition: color 0.2s, transform 0.2s;
}
.snake-active .snake-step {
  color: var(--accent);
}

/* Points badge (+2, +10…) — always dark green, slightly larger */
.snake-pts {
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: calc(11.5px * var(--snake-zoom));
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
  background: #004d00;
  color: #f3fff5;
  z-index: 2;
  font-family: "Fira Sans Condensed", sans-serif;
  pointer-events: none;
  letter-spacing: 0.2px;
}
.snake-pts.zero {
  background: #2a4a2a;
  color: #d0e8d0;
}
.snake-pts.pts-pop {
  animation: ptsPop 0.5s cubic-bezier(0.34, 1.6, 0.64, 1);
}
@keyframes ptsPop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); }
}

/*
 * Classic trivia_css .grid-cellsolved uses starAnimation ending at scale(0.92),
 * which left Snake solved cells permanently smaller. We:
 *  - suppress animation on repaints (no-anim)
 *  - pop-in on fresh fill (snakeCellPop) ending at scale(1) full size
 *  - JS removes just-filled after animationend
 */
.grid-cellsolved.no-anim,
.grid-cellfod.no-anim {
  animation: none !important;
  transform: none !important;
}
.grid-cellsolved.just-filled,
.grid-cellfod.just-filled,
.grid-playercell.just-filled,
.giveup-dash-cell.just-filled,
.fod-mystery-cell.just-filled,
.grid-cellsolved.word-cell-invalid.just-filled {
  animation: snakeCellPop 1s cubic-bezier(0.34, 1.35, 0.64, 1) forwards !important;
}
@keyframes snakeCellPop {
  0% {
    opacity: 0;
    transform: scale(0.35);
  }
  55% {
    opacity: 1;
    transform: scale(1.06);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* Ensure filled cells never inherit a stuck scale from classic starAnimation */
.grid-container .grid-cellsolved,
.grid-container .grid-cellfod {
  transform-origin: center center;
}

/* Center: Answer of the day — gold look; same flag geometry as solved cells */
.fod-center-cell {
  display: block !important;
  padding: 0 !important;
  /* Reinforce gold FOD look (classic trivia_css .grid-cellfod) */
  color: #b8860b !important;
  background: linear-gradient(45deg, #ffd700, #ffec8b) !important;
  border: 2px solid #b8860b !important;
  box-shadow: 0 2px 4px rgba(184, 134, 11, 0.5) !important;
  overflow: hidden !important;
}
.fod-center-cell .snake-cell-name {
  color: #8a6508;
}

/* Mystery center: blue like empty cells, only "?" until guessed */
.fod-center-cell.fod-mystery-cell,
.grid-container .fod-mystery-cell {
  color: #1e3a5f !important;
  /* Same family as empty path cells / chrome blue */
  background: var(--empty-bg, #b1c0fb) !important;
  border: 2px solid var(--accent-border, #7a8fd4) !important;
  box-shadow: 0 1px 3px rgba(44, 74, 110, 0.22) !important;
  border-style: solid !important;
  transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease,
    box-shadow 0.15s ease !important;
}
.fod-center-cell.fod-mystery-cell:not(.just-filled),
.grid-container .fod-mystery-cell:not(.just-filled) {
  animation: none !important; /* no gold starAnimation */
}
/* Kill classic gold shimmer pseudo on mystery */
.fod-center-cell.fod-mystery-cell::before,
.grid-container .fod-mystery-cell::before {
  display: none !important;
  content: none !important;
}
/* Hover stays blue (override .grid-cellfod:hover gold / brightness) */
.fod-center-cell.fod-mystery-cell:hover,
.grid-container .fod-mystery-cell:hover,
.grid-container .grid-cellfod.fod-mystery-cell:hover {
  color: #1e3a5f !important;
  background: var(--empty-active-bg, #9aaff5) !important;
  border-color: var(--accent, #2c4a6e) !important;
  box-shadow: 0 3px 8px rgba(44, 74, 110, 0.28) !important;
  filter: none !important;
  transform: translateY(-1px);
}
.fod-mystery-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  width: 100% !important;
  padding: 4px 5px 16px !important; /* room for Guess ribbon */
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.fod-mystery-q {
  font-family: 'Fira Sans Condensed', 'Fira Sans', sans-serif !important;
  font-size: clamp(28px, 7vw, 40px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: #2c4a6e !important;
  opacity: 0.95;
  user-select: none;
}
.fod-center-cell.fod-mystery-cell:hover .fod-mystery-q {
  color: #1e3a5f !important;
}
.fod-center-cell.fod-mystery-cell .word-cat-ribbon.fod-mystery-ribbon {
  color: #1e3a5f !important;
  background: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid rgba(44, 74, 110, 0.25) !important;
  box-shadow: none !important;
}
.fod-center-cell.fod-mystery-cell .word-cat-ribbon.fod-mystery-ribbon:hover,
.fod-center-cell.fod-mystery-cell .word-cat-ribbon.fod-ribbon:hover {
  color: #0f2744 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(44, 74, 110, 0.4) !important;
  filter: none !important;
}

/* AOTD clue — lives inside the namelist modal, under the headline */
.fod-clue-modal {
  position: relative;
  z-index: auto;
  width: 100%;
  margin: 8px 0 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff8e1;
  border: 1px solid #f0c94a;
  box-shadow: 0 1px 4px rgba(160, 120, 0, 0.12);
  font-family: 'Fira Sans Condensed', 'Fira Sans', sans-serif;
  max-height: 22vh;
  overflow: auto;
  box-sizing: border-box;
  pointer-events: auto;
}
.fod-clue-modal[hidden] {
  display: none !important;
}
.fod-guess-clue-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8a6508;
  margin-bottom: 4px;
}
.fod-guess-clue-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: #3d3400;
  white-space: pre-wrap;
}
/* Cat bar under Answer of the day — gold rectangle chip (same inset geometry) */
.fod-center-cell .word-cat-ribbon.fod-ribbon {
  color: #5c4e00 !important;
  background: #f0c94a !important;
  border: 1px solid #c9a000 !important;
  box-shadow: 0 1px 2px rgba(160, 120, 0, 0.28) !important;
}
.fod-center-cell .word-cat-ribbon.fod-ribbon:hover {
  background: #e6b820 !important;
  color: #3d3400 !important;
  filter: none;
}
.fod-center-cell.word-bars-off .word-cat-ribbon {
  display: none !important;
}

/* iOS: prevent auto-zoom on search focus (needs ≥16px) */
#textInput {
  font-size: 16px !important;
  line-height: 1.3;
  -webkit-text-size-adjust: 100%;
}
#modal.modal input[type="text"] {
  font-size: 16px !important;
}

.grid-puzzlecell.snake-path {
  border: none !important;
  font-size: 12px;
  color: #666;
  line-height: 1.2;
}

/* Don't let path styles shrink classic place headers */
.grid-puzzlecell.place-axis.snake-path {
  font-size: 14px !important;
  color: #555 !important;
  font-weight: 600 !important;
}

.snake-actions {
  display: none; /* replaced by MENU / CLEAR like other games */
}

/* Results */
.snake-results {
  font-family: "Fira Sans Condensed", sans-serif;
}
.snake-results .big-score {
  text-align: center;
  font-size: 40px;
  font-weight: 800;
  color: var(--accent);
  margin: 8px 0 4px;
  animation: scoreBump 0.55s cubic-bezier(0.34, 1.5, 0.64, 1);
}
.snake-results .sub {
  text-align: center;
  font-size: 12px;
  color: #666;
  margin-bottom: 10px;
}
.snake-results .res-list {
  list-style: none;
  margin: 0;
  padding: 0 8px;
}
.snake-results .res-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  border-bottom: 1px solid #eee;
  font-size: 13px;
  border-radius: 6px;
  transition: background 0.12s;
}
.snake-results .res-row:hover { background: var(--accent-soft); }
.snake-results .res-left {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.snake-results .pts {
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* Card dismiss */
#cardOverlay.card-out,
#cardModal.card-out {
  animation: cardOut 0.16s ease forwards;
}
@keyframes cardOut {
  to { opacity: 0; }
}

/* Item card layout */
#cardOverlay {
  z-index: 2147483010;
}
#cardModal {
  /* Same anchor as the namelist modal (play-card center), set in JS */
  position: fixed !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 2147483011;
  display: flex !important;
  flex-direction: column !important;
  max-height: min(78vh, 560px) !important;
  overflow: hidden !important;
  text-align: left !important;
  /* Darker halo around the card, matching Dueldoku's #cardModal */
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4) !important;
  box-sizing: border-box !important;
  cursor: default;
}
@keyframes cardModalPop {
  from { transform: translate(-50%, -50%) scale(0.95); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* Whole-card border, same family as the tinted Answers/Remove buttons but a
   shade darker so it reads as a frame instead of blending into the tint. */
#cardModal.card-modal-panel--wrong {
  border: 2.5px solid #b37d7d !important;
}
#cardModal.card-modal-panel--correct {
  border: 2.5px solid #7da88f !important;
}
#cardModal.card-modal-panel--fod {
  border: 2.5px solid #b89a58 !important;
}

/* Bleeds through #cardModal's own 14px/16px padding so the tint reaches the
   card's rounded top edges instead of sitting as an inset rectangle
   (same structure as Dueldoku/Wildlife). */
#cardModal .card-modal-header-zone {
  flex-shrink: 0;
  margin: -14px -16px 0;
  padding: 14px 16px 4px;
  border-radius: 12px 12px 0 0;
  background: transparent;
  text-align: left;
  border-bottom: none;
  margin-bottom: 0;
}

/* Wrong / correct / Answer of the day — same palette as Dueldoku */
#cardModal .card-modal-header-zone--wrong {
  background-color: #fdf0f0;
  border-bottom: none;
}
#cardModal .card-modal-header-zone--wrong .card-rule-row {
  border-bottom-color: #e0c0c0;
}
#cardModal .card-modal-header-zone--wrong .card-cell-rule-title,
#cardModal .card-modal-header-zone--wrong .card-title {
  color: #6b3030;
}
#cardModal .card-modal-header-zone--wrong .card-action-btn {
  border-color: #e0c0c0;
  background-color: #fffafa;
  color: #6b3030;
}

#cardModal .card-modal-header-zone--correct {
  background-color: #f0f7f2;
  border-bottom: none;
}
#cardModal .card-modal-header-zone--correct .card-rule-row {
  border-bottom-color: #c0d8c8;
}
#cardModal .card-modal-header-zone--correct .card-cell-rule-title,
#cardModal .card-modal-header-zone--correct .card-title {
  color: #2a4a32;
}
#cardModal .card-modal-header-zone--correct .card-action-btn {
  border-color: #c0d8c8;
  background-color: #fafcfb;
  color: #2a4a32;
}

#cardModal .card-modal-header-zone--fod {
  background-color: #fdf8ec;
  border-bottom: none;
}
#cardModal .card-modal-header-zone--fod .card-rule-row {
  border-bottom-color: #e0d4a8;
}
#cardModal .card-modal-header-zone--fod .card-cell-rule-title,
#cardModal .card-modal-header-zone--fod .card-title {
  color: #5c4a20;
}
#cardModal .card-modal-header-zone--fod .card-action-btn {
  border-color: #e0d4a8;
  background-color: #fffdf6;
  color: #5c4a20;
}

/* Rule row: "Contains: A" (same size as Answers modal h2) + Answers/Remove */
#cardModal .card-rule-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 28px 10px 0; /* room for × */
  padding: 0 0 10px 0;
  border-bottom: 1px solid #ddd;
  text-align: left;
}
#cardModal .card-cell-rule-line {
  display: flex;
  flex-direction: column;
  margin: 0;
  text-align: left;
  flex: 1 1 auto;
  min-width: 0;
}
#cardModal .card-cell-rule-title {
  /* Match .snake-possible-head h2 */
  font-family: "Fira Sans Condensed", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.3;
  color: #222;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
#cardModal .card-cell-rule-detail {
  font-family: "Fira Sans Condensed", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  color: #8b98a8;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
#cardModal .card-actions-headline {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
#cardModal .card-actions-headline .card-action-compact {
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
  white-space: nowrap;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 6px 8px !important;
  line-height: 1.15 !important;
  text-align: center !important;
  border-radius: 6px !important;
}

/* Boarding pass + description under rule */
#cardModal .card-item-block {
  margin: 12px 28px 14px 0;
  text-align: left;
}
#cardModal .card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px 0;
  text-align: left;
}
#cardModal .card-title-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
#cardModal .card-title-emoji {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}
#cardModal .card-title {
  margin: 0 !important;
  text-align: left !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  text-transform: uppercase;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: text;
  cursor: text;
}
#cardModal .card-item-desc {
  font-family: "Fira Sans Condensed", sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: #333;
  text-align: justify;
  word-break: break-word;
  user-select: text;
  cursor: text;
}

/* Row in the details list, between Popularity and Labels — left-aligned,
   just "Wikipedia" (no item name / no "Search on" wording). */
#cardModal .card-wiki-link {
  color: #1a5fb4;
  font-weight: 600;
  text-decoration: none;
}
#cardModal .card-wiki-link:hover {
  text-decoration: underline;
}

/* Line between description and flag/country — the wrong/correct/fod tint
   stops right here; everything below is neutral (see the white-background
   override below). */
#cardModal .card-mid-sep {
  height: 0;
  border: none;
  border-top: 1px solid #ddd;
  margin: 4px 28px 0 0;
}

/* Country fact: flag left, text right (same as trivia-search info) */
#cardModal .card-country-block {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  margin: 0 28px 0 0;
}
#cardModal .card-flag-img {
  display: block !important;
  margin: 0 !important;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid #ccc;
}
#cardModal .card-country-fact,
#cardModal .card-country-fact-solo {
  font-family: "Fira Sans Condensed", sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: #333;
  text-align: left;
  word-break: break-word;
  margin-top: 0;
  flex: 1;
  min-width: 0;
  user-select: text;
  cursor: text;
}
#cardModal .card-country-fact-solo {
  margin: 0 28px 0 0;
}
/* The wrong/correct/fod tint only marks the answer title/description up top —
   the country info at the bottom of the card stays neutral, never tinted. */
#cardModal .card-modal-header-zone--wrong .card-country-block,
#cardModal .card-modal-header-zone--correct .card-country-block,
#cardModal .card-modal-header-zone--fod .card-country-block,
#cardModal .card-modal-header-zone--wrong .card-country-fact-solo,
#cardModal .card-modal-header-zone--correct .card-country-fact-solo,
#cardModal .card-modal-header-zone--fod .card-country-fact-solo {
  background-color: #fff;
  margin-left: -16px;
  margin-right: -16px;
  padding: 18px 16px 2px;
}
#cardModal .card-image-left {
  display: block !important;
  margin: 0 0 8px 0 !important;
}

#cardModal .card-modal-actions,
#cardModal .card-actions.puzzle-options-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px;
  margin: 6px 0 2px !important;
  padding: 0 !important;
  border: none !important;
  width: 100%;
  box-sizing: border-box;
}
#cardModal .card-modal-actions .card-action-btn,
#cardModal .card-actions.puzzle-options-row .card-action-btn {
  flex: 1 1 0;
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
  white-space: nowrap;
  font-size: 11px !important;
  padding: 9px 6px !important;
  text-align: center !important;
}
#cardModal .card-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: 8px;
  /* Separation from header is on .card-modal-header-zone border-bottom */
  border-top: none;
  background: #fdfdfd;
  text-align: left;
}
#cardModal .card-details-list li {
  margin-bottom: 6px;
  user-select: text;
  cursor: text;
}
#cardModal .card-details-list li.card-labels-block {
  margin-top: 2px;
  line-height: 1.3em;
}
#cardModal .card-emoji-line,
#cardModal .card-emoji-corner {
  display: none !important;
}

/* ── Possible answers list (browse only — not write modal) ── */
.snake-possible-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483010;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.2s ease;
  cursor: pointer;
}
.snake-possible-overlay.show {
  opacity: 1;
}
.snake-possible-modal {
  position: fixed;
  z-index: 2147483011;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.96);
  transition: opacity 0.18s ease, transform 0.18s ease;
  overflow: hidden;
  font-family: "Fira Sans Condensed", sans-serif;
  max-width: 340px;
}
.snake-possible-modal.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.snake-possible-head {
  position: relative;
  flex: 0 0 auto;
  padding: 12px 36px 8px 14px;
  border-bottom: 1px solid #e8e8e8;
  background: #fff;
}
.snake-possible-head h2 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: none;
  color: #222;
  line-height: 1.3;
  padding-right: 8px;
}
.snake-possible-count {
  margin: 0;
  font-size: 12px;
  opacity: 0.7;
  font-family: "Fira Sans Condensed", sans-serif;
}
.snake-possible-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
}
.snake-possible-footer {
  flex-shrink: 0;
  padding: 8px 12px 12px;
  background: #fff;
  border-top: 1px solid #eee;
}
.snake-possible-load-more {
  width: 100%;
  min-height: 40px;
  font-family: "Fira Sans Condensed", sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  color: #222;
  cursor: pointer;
}
.snake-possible-load-more:hover:not(:disabled) {
  background: #f0f0f0;
}
.snake-possible-load-more:disabled {
  cursor: wait;
  opacity: 0.9;
}
.snake-possible-close {
  position: absolute;
  top: 6px;
  right: 8px;
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: #888;
  cursor: pointer;
  padding: 2px 6px;
}
.snake-possible-close:hover {
  color: #111;
}
.snake-possible-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
}
/* nameList-style rows: normal flow (no flex) so flags keep radius/spacing */
.snake-possible-item {
  display: block;
  padding: 10px 8px 10px 16px !important;
  line-height: 1.8 !important;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
  font-size: 12px !important;
  font-family: "Fira Sans", sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #333;
  background: #fff;
  transition: background-color 0.3s ease;
  list-style: none;
}
.snake-possible-item:hover {
  background: #f0f0f0;
}
.snake-possible-item.snake-possible-used {
  opacity: 0.55;
}
/* Do not force flex/display on flag imgs — only the inline styles from JS */
.snake-possible-item img {
  /* keep JS inline: 18×12.6, radius 1.8, margin-right 5 */
  vertical-align: middle;
}
.snake-possible-emoji {
  margin-right: 5px;
  font-size: 14px;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  vertical-align: middle;
}
.snake-possible-used-tag {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: #888;
  background: #eee;
  border-radius: 4px;
  padding: 1px 5px;
  vertical-align: middle;
}
.snake-possible-empty {
  padding: 24px 16px;
  text-align: center;
  opacity: 0.7;
  font-size: 13px;
  list-style: none;
}

/*
 * Boot loader lives INSIDE the empty 3×3 grid (Futdoku style).
 * No full-screen blue overlay — page chrome stays visible.
 */
.snake-badge-loading {
  opacity: 0.55;
  pointer-events: none;
  cursor: default !important;
}
.snake-load-cell {
  pointer-events: none !important;
  cursor: default !important;
  box-shadow: none !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}
.snake-load-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
.snake-loading-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.snake-loading-dots span {
  font-size: 16px;
  line-height: 1;
  opacity: 0.3;
  animation: snakeLoadBlink 0.9s ease-in-out infinite;
}
.snake-loading-dots span:nth-child(2) {
  animation-delay: 0.3s;
}
.snake-loading-dots span:nth-child(3) {
  animation-delay: 0.6s;
}
@keyframes snakeLoadBlink {
  0%,
  60% {
    opacity: 0.3;
  }
  20% {
    opacity: 1;
  }
}
.snake-load-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px;
  font-family: "Fira Sans Condensed", sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #555;
  text-align: center;
  line-height: 1.25;
}
.snake-load-error .coolButton {
  font-size: 11px !important;
  padding: 4px 10px !important;
}

/* Filled / FOD cells feel clickable */
.grid-cellsolved,
.grid-cellfod {
  transition: transform 0.15s ease, filter 0.15s ease !important;
}
.grid-cellsolved:hover,
.grid-cellfod:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* Dimmer under search modal */
.search-dimmer {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.search-dimmer.show {
  opacity: 1;
  pointer-events: auto;
}
.search-dimmer[hidden] {
  display: none !important;
}

/* Search modal — same geometry as Flagdoku index .modal + showModal */
#modal.modal {
  z-index: 2147483000 !important;
  position: fixed !important;
  top: 0;
  left: 0;
  transform: translate(-70%, -50%);
}
#help-modal.modalhelp,
.modalhelp {
  z-index: 2147483000 !important;
}

/* Help — fitted card, not the old 111%×180% superold box */
#help-modal.trivia-help-modal {
  display: none;
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: max(12px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom)) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: rgba(20, 24, 32, 0.48) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-radius: 0 !important;
  z-index: 2147483010 !important;
}
#help-modal.trivia-help-modal .trivia-help-card,
#help-modal.trivia-help-modal .modalhelp-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100vw - 28px)) !important;
  max-width: 400px !important;
  height: auto !important;
  max-height: min(88dvh, 640px) !important;
  margin: 0 auto !important;
  top: 50% !important;
  transform: translateY(-50%);
  padding: 18px 16px 14px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  background: #fffefb !important;
  border: 1px solid #c8cdd4 !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
  font-family: "Fira Sans Condensed", "Fira Sans", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  color: #243048 !important;
  opacity: 1 !important;
}
#help-modal .trivia-help-close {
  position: absolute;
  top: 6px;
  right: 8px;
  float: none;
  z-index: 2;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: transparent;
  color: #8a93a0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
#help-modal .trivia-help-close:hover {
  color: #1a1a1a;
}
#help-modal .trivia-help-card h2 {
  margin: 0 32px 6px 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: var(--accent, #2c4a6e);
}
#help-modal .trivia-help-lead {
  margin: 0 0 10px;
  font-size: 13.5px;
  color: #4a5564;
}
#help-modal .trivia-help-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
#help-modal .trivia-help-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 8px 0;
  border-top: 1px solid #eceff3;
}
#help-modal .trivia-help-list li:first-child {
  border-top: none;
  padding-top: 2px;
}
#help-modal .trivia-help-emo {
  flex: 0 0 26px;
  width: 26px;
  text-align: center;
  font-size: 18px;
  line-height: 1.3;
}
#help-modal .trivia-help-list div {
  min-width: 0;
  flex: 1 1 auto;
}
#help-modal .trivia-help-foot {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px dashed #d5dae1;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  color: var(--accent, #2c4a6e);
}
#modalsolved.modal-solved,
.modal-solved {
  z-index: 2147483000 !important;
}
#modal.modal.snake-search-modal {
  background: white !important;
  border: 1px solid #a0a0a0 !important;
  border-radius: 5px !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1) !important;
  padding: 6px 16px 14px !important;
  overflow: hidden auto !important;
  transform: none !important;
  z-index: 2147483001 !important;
}
#modal.modal .modal-header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding-right: 4px;
  margin-bottom: 4px;
}
#modal.modal #close-ans {
  order: 2;
  float: none;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  padding: 2px 6px;
  color: #64748b;
  border-radius: 8px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s, background 0.15s;
}
#modal.modal #close-ans:hover {
  color: #0f172a;
  background: var(--accent-soft, #e6ecf3);
}
#modal.modal #modal-headline {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding-right: 4px;
  color: var(--accent, #2c4a6e);
  font-size: 18px !important;
  font-weight: 650 !important;
  line-height: 1.2;
}
#modal.modal .modal-headline-textwrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}
#modal.modal .modal-headline-label .neg-emoji {
  font-size: 1.15em;
  margin-right: 4px;
  vertical-align: -0.12em;
}
#modal.modal .modal-headline-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.2;
}
#modal.modal .modal-headline-detail,
#modal.modal .modal-headline-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.25;
  color: #8b98a8;
}
@media (max-width: 430px) {
  #modal.modal.snake-search-modal {
    padding: 6px 10px 12px !important;
  }
  #modal.modal #modal-headline,
  #modal.modal .modal-headline-label {
    font-size: 17px !important;
  }
  #modal.modal .modal-headline-desc {
    font-size: 12px;
  }
}
/* Connect-style (i) — bi-info-circle, no green pill */
#modal.modal .cat-info-btn {
  flex: 0 0 auto;
  border: none;
  background: none;
  color: #94a3b8;
  width: auto;
  height: auto;
  border-radius: 0;
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}
#modal.modal .cat-info-btn:hover {
  color: var(--accent, #0369a1);
  background: none;
}
#modal.modal .cat-info-btn i {
  font-size: 1.15rem;
  line-height: 1;
}
#modal.modal #nameList {
  list-style-type: none;
  padding: 0;
  margin: 0;
  max-height: 230px !important;
  min-height: 230px;
  height: 230px;
  overflow-y: auto;
  background-color: white;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border-radius: 0;
}
#modal.modal #nameList li {
  padding: 15px 12px !important;
  line-height: 1.45 !important;
  min-height: 0 !important;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-family: "Roboto", sans-serif !important;
  font-size: 12.5px !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #333;
  border-bottom: 1px solid #ccc;
}
#modal.modal #nameList li:last-child {
  border-bottom: none;
}
#modal.modal #nameList li:hover {
  background-color: #f0f0f0;
}
#modal.modal #nameList li.name-list-header {
  font-size: 0.7em !important;
  font-weight: 700 !important;
  color: #a3a3a3 !important;
  letter-spacing: 0.08em;
  padding: 8px 12px 4px !important;
  pointer-events: none;
  cursor: default;
  border-bottom: none !important;
  background: #fafafa;
}
#modal.modal #nameList li.name-list-header:hover {
  background: #fafafa;
}

/* Search + lightbulb hint row (Futdoku layout) */
#modal.modal #search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 6px 0 4px;
  box-sizing: border-box;
}
#modal.modal #hint-button-wrap {
  display: flex;
  flex-shrink: 0;
}
#modal.modal .snake-hint-btn,
#modal.modal #hint-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  flex-shrink: 0;
  padding: 8px 11px;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  border: 1.5px solid var(--accent-border, #c5d0dc);
  border-radius: 10px;
  background: var(--accent-soft, #eef2f8);
  color: var(--accent, #2c4a6e);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#modal.modal .snake-hint-btn:hover,
#modal.modal #hint-button:hover {
  background: var(--chrome-hover, #e2e8f0);
  border-color: var(--accent, #2c4a6e);
  color: var(--accent, #1e3a5f);
}
#modal.modal .snake-hint-btn:active,
#modal.modal #hint-button:active {
  transform: scale(0.96);
}
#modal.modal .hint-display-box {
  width: 100%;
  box-sizing: border-box;
  margin: 4px 0 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--accent-soft, #eef2f8);
  border: 1px solid var(--accent-border, #c5d0dc);
  font-family: "Fira Sans Condensed", sans-serif;
  font-size: 14px;
  text-align: center;
  line-height: 1.45;
}
#modal.modal .hint-display-box .hint-label {
  color: #666;
  font-weight: 500;
  margin-right: 4px;
}
#modal.modal .hint-display-box .hint-masked {
  letter-spacing: 2px;
  font-size: 15px;
  font-weight: 700;
}
#modal.modal .hint-display-box .hint-char {
  color: rgb(72, 57, 90);
  font-weight: 700;
}
#modal.modal .hint-display-box .hint-blank {
  color: #a0a0a0;
  font-weight: 700;
}
#modal.modal #textInput {
  width: 85%;
  box-sizing: border-box;
  border-radius: 3px !important;
  border: 2px solid #ccc !important;
  padding: 10px !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  font-family: "Roboto", sans-serif;
  background: #fff;
  box-shadow: none !important;
}
#modal.modal #search-row #textInput {
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
#modal.modal #textInput:focus {
  outline: none;
  border-color: #ccc !important;
  box-shadow: none !important;
}
.modalq-archive-btn {
  font-family: "Fira Sans Condensed", sans-serif !important;
  font-size: 13px !important;
  padding: 8px 18px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background: var(--btn-bg, #2c3a52) !important;
  border-radius: 10px !important;
}

/* ── Category modal — Wildlife layout: blur overlay + card on grid center ── */
.modalq-overlay.snake-cat-overlay,
#modalq-overlay.snake-cat-overlay {
  display: block;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 2147483000;
  opacity: 0;
  transition: opacity 0.2s ease-out;
  cursor: pointer;
  box-sizing: border-box;
}
.modalq-overlay.snake-cat-overlay.show,
#modalq-overlay.snake-cat-overlay.show {
  opacity: 1;
}

/* Card itself: left/top set in JS (px) to board center.
   Do NOT use top/left !important — that would beat inline JS coords.
   Override only transform from trivia_css .modalq { translate(-70%,-50%) }. */
#modalq.modalq.snake-cat-modal,
#modalq.snake-cat-modal {
  display: none;
  position: fixed !important;
  right: auto !important;
  bottom: auto !important;
  width: min(320px, 88vw) !important;
  max-width: 320px !important;
  height: auto !important;
  max-height: min(85vh, 90%) !important;
  margin: 0 !important;
  padding: 12px 16px 18px !important;
  /* JS sets left/top in px; transform centers the box on that point */
  transform: translate(-50%, -50%);
  z-index: 2147483001 !important;
  background: #ffffff !important;
  border: 1.5px solid var(--accent-border, #c5d0dc) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.32) !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  opacity: 0;
  font-family: "Fira Sans Condensed", sans-serif !important;
  /* no full-screen flex shell */
  align-items: stretch;
  justify-content: flex-start;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#modalq.snake-cat-modal.snake-cat-modal-in {
  animation: snakeCatPop 0.22s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes snakeCatPop {
  from {
    transform: translate(-50%, -46%) scale(0.92);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}
#modalq.snake-cat-modal .modal-header {
  position: relative !important;
  width: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  box-sizing: border-box;
  display: block !important;
}
#modalq.snake-cat-modal #close-modalq {
  position: absolute !important;
  top: -4px !important;
  right: 0 !important;
  float: none !important;
  font-size: 1.4rem !important;
  line-height: 1 !important;
  color: #64748b !important;
  cursor: pointer;
  padding: 2px 6px;
  z-index: 2;
  transition: color 0.15s;
}
#modalq.snake-cat-modal #close-modalq:hover {
  color: #0f172a !important;
}
#modalq.snake-cat-modal #modal-headlineq,
#modalq.snake-cat-modal .snake-cat-modal-head {
  margin: 0 !important;
  padding: 4px 28px 0 0 !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important;
}
.snake-cat-modal-face {
  display: flex;
  justify-content: center;
  margin: 4px 0 10px;
}
.snake-cat-modal-face .word-cat-face {
  max-width: 100%;
  font-size: 14px;
}
.snake-cat-modal-face .wcf-emoji {
  font-size: 28px !important;
}
.snake-cat-modal-title {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--accent, #2c4a6e);
  margin: 0 0 8px;
  line-height: 1.25;
  text-align: center;
}
.snake-cat-modal-body {
  font-size: 0.92rem !important;
  font-weight: 400 !important;
  color: #334155 !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  text-align: left !important;
}
.snake-cat-modal-body br {
  display: block;
  content: "";
  margin-top: 0.35em;
}
.snake-cat-modal-actions {
  margin-top: 14px !important;
  display: flex !important;
  justify-content: center !important;
}

/* ── Snackbar: never blocks the grid ──
   Overrides the huge centered #toaster from superold_css.css.
   z-index above search dimmer (9990) + search modal (10000) so
   error messages stay readable over the blur backdrop. */
#toaster,
.toaster {
  visibility: hidden;
  position: fixed !important;
  top: auto !important;
  bottom: 22px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) translateY(12px) !important;
  width: auto !important;
  max-width: min(340px, calc(100vw - 24px)) !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  background: rgba(39, 45, 51, 0.96) !important;
  color: #fff !important;
  border-radius: 14px !important;
  font-family: "Fira Sans Condensed", sans-serif !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  text-align: center !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35) !important;
  z-index: 2147483000 !important;
  opacity: 0 !important;
  pointer-events: none !important; /* clicks pass through to the grid */
  cursor: default !important;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s !important;
  white-space: normal;
  overflow: hidden;
  /* Keep toast itself crisp (not affected by parent filters) */
  filter: none !important;
  -webkit-filter: none !important;
  isolation: isolate;
}

#toaster.show,
.toaster.show {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* Letter-match snackbar content */
#toaster .snk-toast {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  max-width: 100%;
}
#toaster .snk-toast-pts {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: #9fefc0;
  flex-shrink: 0;
}
#toaster .snk-toast-pts.zero {
  color: #ffb4b4;
}
#toaster .snk-toast-label {
  opacity: 0.75;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
#toaster .snk-toast-letters {
  display: inline-flex;
  gap: 3px;
  flex-wrap: nowrap;
  overflow: hidden;
}
#toaster .snk-toast-letters b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  font-family: Roboto, monospace;
}
#toaster .snk-toast-plain {
  opacity: 0.95;
}

/* Fail note under the board — discreet (not a loud modal) */
.snk-fail-bubble {
  position: fixed;
  /* left/top set in JS under .snake-board / #gridContainer */
  left: 50%;
  top: auto;
  bottom: 18%;
  transform: translateX(-50%) scale(0.98);
  z-index: 2147483000;
  max-width: min(280px, 88vw);
  padding: 6px 11px;
  border-radius: 8px;
  background: rgba(40, 40, 48, 0.72);
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  font-family: "Fira Sans Condensed", sans-serif;
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-sizing: border-box;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.snk-fail-bubble.show {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
.snk-fail-bubble-title {
  font-weight: 600;
  font-size: 11.5px;
  margin-bottom: 2px;
  color: #ffc9c9;
}
.snk-fail-bubble-detail {
  opacity: 0.78;
  font-size: 10.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
}

/* ── showModal5 (Flagdoku index summary) ── */
.h5modal {
  --h5-cs: calc(112px * var(--snake-zoom) * 0.905);
  --h5-ch: calc(96px * var(--snake-zoom) * 0.905);
  --h5-gap: calc(8px * var(--snake-zoom) * 0.905);
  --h5-board-w: calc(var(--h5-cs) * 3 + var(--h5-gap) * 2);
  position: fixed;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border-radius: 12px;
  padding: 12px;
  z-index: 2147483001;
  box-sizing: border-box;
  /* Board + GLOBAL box pad (10+10) + modal pad (12+12) */
  width: calc(var(--h5-board-w) + 44px);
  min-width: calc(var(--h5-board-w) + 44px);
  max-width: 98vw;
  max-height: min(74vh, 620px);
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  font-family: "Fira Sans Condensed", sans-serif;
}
.h5-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2147483000;
}
.h5-overlay.h5-in {
  animation: h5OverlayIn 0.22s ease forwards;
}
.h5modal.h5-in {
  animation: h5ModalPop 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes h5OverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes h5ModalPop {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-14px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}
/* Global board: allow the cell pop to scale without being clipped */
.h5-global-board .grid-cellsolved.just-filled,
.h5-global-board .grid-cellfod.just-filled,
.h5-global-board .grid-cellunsolved.just-filled {
  overflow: visible !important;
  z-index: 2;
}
.h5-close-button {
  position: sticky;
  top: 5px;
  right: 5px;
  float: right;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  z-index: 10;
}
.h5title { font-weight: bold; font-size: 20px; }
.h5puzzlenum { font-weight: normal; font-size: 18px; }
.h5-card-wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 10px;
}
.h5-card {
  flex: 1;
  min-width: 0;
  max-width: 150px;
  padding: 8px 6px;
  text-align: center;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.h5-card-title { font-weight: bold; font-size: 14px; margin-bottom: 4px; }
.h5-card-body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 52px;
  height: 60px;
  margin-bottom: 4px;
}
.completed-success { background-color: #e3f9e5; }
.completed-fail { background-color: #ffe5e5; }
.h5-card-info { font-size: 14px; margin-bottom: 4px; min-height: 20px; }
.h5-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #0047ff;
  font-size: 14px;
}
.h5-flag-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 60px;
  height: 60px;
}
.h5-flag-grid span {
  font-size: 14px;
  margin: 2px;
  width: 16px;
  height: 16px;
  text-align: center;
}
.h5-flag-img {
  height: 32px;
  width: auto;
  max-width: 72px;
  max-height: 32px;
  border: 1px solid #000;
  border-radius: 4px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.h5-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  margin: 6px 0;
  color: #444;
}
.h5-stars i { color: #f5c518; font-size: 11.25px; margin-right: 2px; }
.h5-score { font-size: 13px; color: #444; margin-left: 4px; }
.h5-global-box,
.h5-stats-box,
.h5-rate-box {
  padding: 10px 10px;
  margin: 8px auto 0;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  width: 100%;
}
.h5-global-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.h5-global-title-row .h5-global-title {
  margin-bottom: 0;
}
.h5-toggle-switch {
  display: inline-flex;
  border: 1px solid #90caf9;
  border-radius: 999px;
  overflow: hidden;
  font-family: "Fira Sans", sans-serif;
  font-size: 12px;
  font-weight: 500;
  background: #e3f2fd;
  height: 24px;
  flex-shrink: 0;
  line-height: 1;
}
.h5-toggle-option {
  padding: 0 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: #e3f2fd;
  user-select: none;
}
.h5-toggle-option.active {
  background: #bbdefb;
}
.h5-global-title,
.h5-stats-title,
.h5-rate-title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 4px;
}
.h5-global-subtitle,
.h5-rate-subtitle { font-size: 13px; color: #555; margin-bottom: 6px; }
.h5-global-board-wrap {
  display: flex;
  justify-content: center;
  padding: 4px 0 6px;
}
/* ~9.5% smaller than the live play board — sizes from .h5modal */
.h5-global-board {
  --cell-size: var(--h5-cs);
  --cell-h: var(--h5-ch);
  --board-gap: var(--h5-gap);
  display: grid;
  grid-template-columns: repeat(3, var(--cell-size));
  grid-template-rows: repeat(3, var(--cell-h));
  gap: var(--board-gap);
  margin: 0 auto;
  width: var(--h5-board-w);
  flex-shrink: 0;
}
.h5-global-board .grid-cellsolved,
.h5-global-board .grid-cellfod,
.h5-global-board .grid-cellunsolved,
.h5-global-board .grid-playercell {
  width: var(--cell-size) !important;
  height: var(--cell-h) !important;
  max-width: var(--cell-size) !important;
  max-height: var(--cell-h) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  position: relative;
  overflow: hidden !important;
  border-radius: 4px;
  font-size: calc(13px * var(--snake-zoom)) !important;
  cursor: pointer;
}
.h5-global-board .grid-playercell.word-mode-empty {
  background: var(--empty-bg, #b1c0fb) !important;
  border: 1px solid var(--accent-border, #7a8fd4) !important;
}
.h5-global-board .grid-cellsolved.h5-rarity-unique {
  color: #ad1457 !important;
  background: linear-gradient(45deg, #f48fb1, #ec407a) !important;
  border: 2px solid #ad1457 !important;
  box-shadow: 0 2px 4px rgba(173, 20, 87, 0.4) !important;
}
.h5-global-board .grid-cellsolved.h5-rarity-rare {
  color: #d84315 !important;
  background: linear-gradient(45deg, #ffcc80, #fb8c00) !important;
  border: 2px solid #ef6c00 !important;
  box-shadow: 0 2px 4px rgba(239, 108, 0, 0.4) !important;
}
.h5-global-board .grid-cellsolved.h5-rarity-frequent {
  color: #145218 !important;
  background: linear-gradient(45deg, #9ed89a, #5aad56) !important;
  border: 2px solid #145218 !important;
  box-shadow: 0 2px 4px rgba(20, 82, 24, 0.4) !important;
}
/* Category bars follow the cell: pink Unique / orange Rare / green Frequent */
.h5-global-board .grid-cellsolved.h5-rarity-unique .word-cat-ribbon {
  color: #fff5f8 !important;
  background: #ad1457 !important;
  border: 1px solid #880e4f !important;
  box-shadow: 0 1px 2px rgba(136, 14, 79, 0.28) !important;
}
.h5-global-board .grid-cellsolved.h5-rarity-unique .word-cat-ribbon:hover {
  background: #880e4f !important;
  color: #ffffff !important;
  filter: none;
}
.h5-global-board .grid-cellsolved.h5-rarity-rare .word-cat-ribbon {
  color: #fff8f0 !important;
  background: #e65100 !important;
  border: 1px solid #bf360c !important;
  box-shadow: 0 1px 2px rgba(191, 54, 12, 0.28) !important;
}
.h5-global-board .grid-cellsolved.h5-rarity-rare .word-cat-ribbon:hover {
  background: #bf360c !important;
  color: #ffffff !important;
  filter: none;
}
.h5-global-board .grid-cellsolved.h5-rarity-frequent .word-cat-ribbon {
  color: #f3fff5 !important;
  background: #145218 !important;
  border: 1px solid #0d3b12 !important;
  box-shadow: 0 1px 2px rgba(20, 82, 24, 0.28) !important;
}
.h5-global-board .grid-cellsolved.h5-rarity-frequent .word-cat-ribbon:hover {
  background: #0d3b12 !important;
  color: #ffffff !important;
  filter: none;
}
/* GLOBAL mode cells (no rarity class) — trivia's own periwinkle/indigo blue instead of Flagdoku's shared green solved-cell style */
.h5-global-board
  .grid-cellsolved:not(.h5-rarity-unique):not(.h5-rarity-rare):not(.h5-rarity-frequent) {
  color: #2f3a8f !important;
  background: linear-gradient(45deg, #c3cbfd, #8b97ee) !important;
  border: 2px solid #2f3a8f !important;
  box-shadow: 0 2px 4px rgba(47, 58, 143, 0.4) !important;
}
.h5-global-board
  .grid-cellsolved:not(.h5-rarity-unique):not(.h5-rarity-rare):not(.h5-rarity-frequent)
  .word-cat-ribbon {
  color: #f2f3ff !important;
  background: #2f3a8f !important;
  border: 1px solid #232a68 !important;
  box-shadow: 0 1px 2px rgba(35, 42, 104, 0.28) !important;
}
.h5-global-board
  .grid-cellsolved:not(.h5-rarity-unique):not(.h5-rarity-rare):not(.h5-rarity-frequent)
  .word-cat-ribbon:hover {
  background: #232a68 !important;
  color: #ffffff !important;
  filter: none;
}
.h5-global-board .snake-cell-flag {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* Tiny corner chip — reset superold .cell-label { bottom:4px } or it stretches */
.h5-global-board .cell-label {
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: auto;
  left: auto;
  width: auto;
  height: auto;
  max-width: none;
  z-index: 4;
  font-family: "Fira Sans Condensed", sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: #222;
  background: #fff;
  padding: 2px 4px;
  border-radius: 3px;
  box-shadow: none;
  white-space: nowrap;
  pointer-events: none;
}
.flag-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-family: "Fira Sans Condensed", sans-serif;
  font-size: 13px;
  cursor: pointer;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  padding: 3px 12px 3px 6px;
  border-radius: 6px;
}
.flag-item img {
  width: 24px;
  height: 17px;
  border-radius: 4px;
  border: 1px solid #ccc;
  flex-shrink: 0;
  object-fit: fill;
}
.flag-item .flag-name {
  flex: 0 1 122px;
  min-width: 0;
  max-width: 122px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.flag-item .bar-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 8px;
  padding-right: 8px;
}
.flag-item .bar-container {
  flex: 0 0 110px;
  width: 110px;
  height: 14px;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
}
.flag-item .bar { height: 100%; }
.flag-item .percent-label {
  font-size: 12px;
  font-weight: bold;
  flex-shrink: 0;
}
/* Beat superold .highlighted-answer { display:inline-block; max-width:310px } */
.flag-item.highlighted-answer {
  background-color: rgba(255, 183, 77, 0.25);
  display: flex;
  max-width: none;
  width: 100%;
  margin-right: 0;
  box-sizing: border-box;
}
.flag-item.highlighted-answer.hl-frequent {
  background-color: rgba(161, 219, 156, 0.42);
}
.flag-item.highlighted-answer.hl-rare {
  background-color: rgba(255, 183, 77, 0.28);
}
.flag-item.highlighted-answer.hl-unique {
  background-color: rgba(244, 143, 177, 0.38);
}
.flag-item .flag-emoji-fallback,
.flag-item .flag-item-ph {
  width: 24px;
  height: 17px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}
.flag-list { padding-right: 12px; overflow-x: hidden; }
.h5-stats-list {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 20px;
  font-size: 14px;
}
.h5-rating-stars { display: flex; gap: 6px; margin: 6px 0; }
.h5-rating-stars i { font-size: 22px; cursor: pointer; color: gold; }
.h5-rate-comment {
  width: 90%;
  max-width: 300px;
  height: 50px;
  resize: vertical;
  font-family: inherit;
  font-size: 16px;
  transform: scale(0.8125);
  transform-origin: left;
  padding: 8px;
  margin: 6px 0;
  border-radius: 6px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
.h5-rate-submit {
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  color: #ffffff;
  background-color: #4b5563;
  border: 1px solid #374151;
  border-radius: 6px;
  padding: 10px 20px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: background-color 0.2s ease, border-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  margin: 6px auto;
}
.h5-rate-submit:hover:not(:disabled) {
  background-color: #374151;
  border-color: #1f2937;
}
.h5-rate-submit:active:not(:disabled) {
  background-color: #1f2937;
}
.h5-rate-submit:disabled {
  background-color: #e5e7eb;
  color: #9ca3af;
  border-color: #d1d5db;
  box-shadow: none;
  cursor: not-allowed;
}
.h5-difficulty-wrapper { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.h5-difficulty-label { font-weight: bold; font-size: 0.95em; }
.h5-difficulty-select {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
}
.h5-comments-title { font-weight: 600; margin: 8px 0 4px; font-size: 14px; }
.h5-comment-bubble {
  background: #eef3f8;
  padding: 10px;
  border-radius: 12px;
  margin-bottom: 6px;
  font-size: 13px;
  border-left: 4px solid #ccddee;
  overflow-wrap: anywhere;
  word-break: break-word;
  overflow: hidden;
  box-sizing: border-box;
  max-width: 100%;
}
.h5-comment-bubble a,
.h5-comment-link {
  color: #1a4fd8;
  text-decoration: underline;
  overflow-wrap: anywhere;
  word-break: break-word;
  pointer-events: auto;
}

.h5-admin-reply {
  margin-left: 2em;
  background-color: #e0f0ff;
  border-left: 4px solid #3399ff;
  font-size: 0.95em;
  padding: 0.5em;
  border-radius: 4px;
}
.h5loader { font-size: 13px; color: #666; padding: 8px 0; }

.giveup-dash-cell {
  /* Same red as a wrong placement (word-cell-invalid) */
  background: linear-gradient(45deg, #f8cccc, #ffb8b8, #ffa5a5, #ff9292) !important;
  border: 2px solid #990000 !important;
  box-shadow: 0 2px 4px rgba(102, 0, 0, 0.5) !important;
  color: #660000 !important;
  filter: brightness(0.7) !important;
}
.giveup-dash-cell .giveup-dash {
  font-size: 28px;
  font-weight: 600;
  color: #660000;
  line-height: 1;
}

/* Shorter white board underneath: MENU / GIVE UP sit closer to the grid. */
.grid-container.snake-grid-3x3 {
  padding-bottom: 14px !important;
}