/* ============ MINE-WORD ============ */
:root {
  --bg: #0a0e14;
  --panel: #0f1520;
  --panel-border: #1e2a3a;
  --text: #cdd6e4;
  --text-dim: #5b6b80;
  --green: #22c55e;
  --green-dark: #15803d;
  --blue: #38bdf8;
  --blue-dark: #0369a1;
  --red: #ef4444;
  --red-dark: #991b1b;
  --yellow: #eab308;
  --yellow-dark: #854d0e;
  --gray: #313d4f;
  --tile-size: 62px;
  --font: "SF Mono", ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  touch-action: manipulation; /* kill double-tap zoom on game controls */
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  overflow: hidden;
}

body {
  background-image:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(56, 189, 248, 0.06), transparent),
    radial-gradient(ellipse 60% 50% at 90% 110%, rgba(239, 68, 68, 0.05), transparent);
}

body.daily-mode { --chrome-extra: 48px; }

#app {
  /* if a board still can't fit (unusually short window), scroll instead of
     letting panels overlap the footer */
  overflow-y: auto;
  height: 100vh;
  height: 100dvh;
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#app.shake { animation: screenshake 0.3s linear; }
@keyframes screenshake {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-9px, 4px); }
  25%  { transform: translate(8px, -6px); }
  40%  { transform: translate(-7px, -3px); }
  55%  { transform: translate(6px, 5px); }
  70%  { transform: translate(-5px, 2px); }
  85%  { transform: translate(3px, -2px); }
  100% { transform: translate(0, 0); }
}

/* ============ HEADER ============ */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--panel-border);
  padding-bottom: 12px;
  position: relative;
}

h1 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 28px;
  letter-spacing: 8px;
  font-weight: 700;
  color: #e8eef7;
  text-shadow: 0 0 18px rgba(56, 189, 248, 0.45);
}
h1 .dash { color: var(--red); text-shadow: 0 0 14px rgba(239, 68, 68, 0.7); }

.hud-btn {
  background: transparent;
  border: 1px solid var(--panel-border);
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 13px;
  letter-spacing: 2px;
  padding: 8px 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.hud-btn:hover {
  color: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}

.menu-wrap { position: relative; z-index: 30; }
#menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 190px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
}
#menu-dropdown button {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--panel-border);
  color: var(--text);
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-align: left;
  padding: 11px 14px;
  cursor: pointer;
}
#menu-dropdown button:last-child { border-bottom: none; }
#menu-dropdown button:hover { background: rgba(56, 189, 248, 0.08); color: var(--blue); }

.lives-wrap { display: flex; align-items: center; gap: 10px; }
.lives-label { font-size: 13px; letter-spacing: 2px; color: var(--text-dim); }
#lives { display: flex; gap: 6px; }
.life {
  width: 22px;
  height: 22px;
  background: var(--green);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.55), inset 0 0 4px rgba(255, 255, 255, 0.25);
  transition: all 0.3s;
}
.life.lost {
  background: #1c2431;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.8);
}
.life.losing { animation: lifepop 0.5s ease-out; }
@keyframes lifepop {
  0% { background: var(--red); box-shadow: 0 0 24px rgba(239, 68, 68, 1); transform: scale(1.6); }
  100% { transform: scale(1); }
}

/* ============ LAYOUT ============ */
main {
  flex: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  min-height: 0;
}

section, #defuse-panel, #log-panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
}

.panel-title {
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--text-dim);
  padding: 12px 16px 0;
}

#grid-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 18px;
}
#grid-panel .panel-title { align-self: flex-start; }

/* ============ GRID ============ */
#grid {
  flex: 1;
  display: grid;
  /* 10 rows must fit the viewport on desktop — tiles shrink on short windows */
  --tile-size: min(62px, calc((100dvh - 324px - var(--chrome-extra, 0px)) / 10));
  grid-template-rows: repeat(10, var(--tile-size));
  gap: 8px;
  align-content: center;
  padding: 12px 28px;
}
.grid-row {
  display: grid;
  grid-template-columns: repeat(5, var(--tile-size));
  gap: 8px;
}
.grid-row.invalid { animation: rowshake 0.35s; }
@keyframes rowshake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

.tile {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  border: 2px solid #202b3b;
  background: #0c111a;
  text-transform: uppercase;
  transform-style: preserve-3d;
}
.tile.filled {
  border-color: #3b4c63;
  animation: tilepop 0.09s ease-out;
}
@keyframes tilepop {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.tile.flipping { animation: tileflip 0.5s ease-in-out; }
@keyframes tileflip {
  0% { transform: rotateX(0deg); }
  50% { transform: rotateX(90deg); }
  100% { transform: rotateX(0deg); }
}

.tile.hit {
  background: var(--green-dark);
  border-color: var(--green);
  color: #fff;
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.35);
}
.tile.prox, .tile.hot {
  background: var(--blue-dark);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.35);
}
.tile.shift {
  background: var(--yellow-dark);
  border-color: var(--yellow);
  color: #fff;
  box-shadow: 0 0 14px rgba(234, 179, 8, 0.3);
}
.tile .count {
  position: absolute;
  top: 2px;
  right: 5px;
  font-size: 12px;
  font-weight: 700;
  opacity: 0.9;
  color: #e0f2fe;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}
.tile.dead {
  background: var(--gray);
  border-color: #445468;
  color: #b6c2d4;
}
.tile.mine {
  background: var(--red-dark);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.6);
  animation: minethrob 1.6s ease-in-out infinite;
}
@keyframes minethrob {
  0%, 100% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.4); }
  50% { box-shadow: 0 0 22px rgba(239, 68, 68, 0.85); }
}
/* detonated mine whose buried letter was recovered by solving its row */
.tile.mine.recovered {
  animation: none;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.35);
}
.tile.boom {
  background: #14090b;
  border-color: var(--red-dark);
  font-size: 24px;
}
.tile.pencil {
  color: #5b8bb0;
  font-style: italic;
  border-style: dashed;
}
.tile.pencil-sel {
  border-color: var(--blue);
  border-style: dashed;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
  cursor: text;
}
.tile.win { animation: winbounce 0.6s ease; }
@keyframes winbounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-16px); }
  65% { transform: translateY(4px); }
}

/* ---- WORD FIELD (4×4 mode) ---- */
.mode-tag {
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--blue);
  vertical-align: middle;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
}
#grid.field4 {
  --tile-size: 72px;
  grid-template-rows: repeat(4, var(--tile-size));
}
#grid.field4 .grid-row { grid-template-columns: repeat(4, var(--tile-size)); }
#grid.rows6 {
  --tile-size: min(62px, calc((100dvh - 324px - var(--chrome-extra, 0px)) / 6));
  grid-template-rows: repeat(6, var(--tile-size));
}
#grid.cols6w .grid-row { grid-template-columns: repeat(6, var(--tile-size)); }

/* ---- CHAIN REACTION ---- */
#grid.chain {
  --tile-size: min(50px, calc((100dvh - 420px - var(--chrome-extra, 0px)) / 10));
  grid-template-rows: repeat(10, var(--tile-size));
  gap: 6px;
}
#grid.chain .grid-row { grid-template-columns: repeat(4, var(--tile-size)); gap: 6px; }
#grid.chain .tile { font-size: 20px; }
.tile.curword { border-color: var(--blue); box-shadow: 0 0 10px rgba(56, 189, 248, 0.3); }
.goal-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0 16px;
}
.goal-label { font-size: 11px; letter-spacing: 2px; color: var(--text-dim); }
#goal { display: flex; gap: 6px; }
.tile.goal {
  width: 40px;
  height: 40px;
  font-size: 18px;
  border-color: var(--green-dark);
  color: var(--green);
  text-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

/* ---- SWEEP ---- */
#grid.sweep.rows6 { --tile-size: min(56px, calc((100dvh - 380px - var(--chrome-extra, 0px)) / 6)); }
#grid.sweep {
  --tile-size: min(64px, calc((100dvh - 360px - var(--chrome-extra, 0px)) / 5));
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
}
.sweep-row { display: flex; align-items: center; gap: 8px; }
.sweep-row .tile {
  width: var(--tile-size);
  height: var(--tile-size);
  flex: none;
}
.sweep-row.invalid { animation: rowshake 0.35s; }
.sweep-row.selrow .tile.facedown {
  border-color: var(--blue);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
}
.row-solve {
  width: 34px;
  height: var(--tile-size);
  flex: none;
  background: transparent;
  border: 1px solid var(--panel-border);
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.row-solve:hover { color: var(--blue); border-color: var(--blue); }
.sweep-row.selrow .row-solve { color: var(--blue); border-color: var(--blue); }
.tile.facedown {
  background: #131c2c;
  border-color: #2a3b55;
  cursor: pointer;
  user-select: none;
  -webkit-touch-callout: none;
}
.tile.facedown:hover { border-color: #3b5578; }
.tile.revealed { background: #0c111a; border-color: #3b4c63; }
.tile .sensor {
  position: absolute;
  bottom: 2px;
  right: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--red);
  text-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
}
/* every mine this sensor counts is already visible (☢/✓) — threat over */
.tile .sensor.cleared {
  color: #5b6b80;
  text-shadow: none;
}
.tile .defused-mark {
  position: absolute;
  top: 1px;
  left: 4px;
  font-size: 13px;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.8));
}

/* ---- SHORT FUSE ---- */
.fuse-time {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--green);
  text-shadow: 0 0 10px rgba(34, 197, 94, 0.4);
}
.fuse-time.low {
  color: var(--red);
  text-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
  animation: minethrob 1s ease-in-out infinite;
}
.field-row { cursor: pointer; }
.field-row .tile { transition: border-color 0.12s, box-shadow 0.12s; }
.field-row:hover .tile:not(.hit) { border-color: #3b5578; }
.field-row.selrow .tile:not(.hit) {
  border-color: var(--blue);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
}
.field-row.selrow .tile.hit { box-shadow: 0 0 12px rgba(34, 197, 94, 0.4); }

/* scan: spotlight the tiles a blue-pinged letter could be hiding in */
#grid .tile.scan {
  border-style: dashed;
  border-color: var(--blue);
  animation: scanthrob 1.1s ease-in-out infinite;
}
#grid .tile.scan-src {
  border-color: #bae6fd;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.8);
}
@keyframes scanthrob {
  0%, 100% { box-shadow: 0 0 6px rgba(56, 189, 248, 0.3); }
  50% { box-shadow: 0 0 18px rgba(56, 189, 248, 0.75); }
}

.tripped-flash { animation: redflash 0.3s ease-out 2; }
@keyframes redflash {
  0%, 100% { background: #0c111a; }
  50% { background: rgba(239, 68, 68, 0.35); }
}

.particle {
  position: fixed;
  width: 5px;
  height: 5px;
  pointer-events: none;
  z-index: 100;
}

.confetti {
  position: fixed;
  pointer-events: none;
  z-index: 100;
}

/* ============ SIDE PANEL ============ */
#side-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: transparent;
  border: none;
  min-height: 0;
}

#defuse-panel { padding-bottom: 14px; }

#keyboard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  padding: 16px 12px 10px;
}
.kb-row { display: flex; gap: 8px; }

.key {
  position: relative;
  width: 46px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  background: #182234;
  border: 1px solid #263752;
  cursor: pointer;
  transition: background 0.12s, box-shadow 0.12s, border-color 0.12s;
  user-select: none;
}
.key:hover { background: #223048; border-color: #3b5578; }
.key:active { transform: translateY(1px); }
.key { -webkit-touch-callout: none; }

.key.key-wide {
  width: 74px;
  font-size: 11px;
  letter-spacing: 1px;
  color: #9fb2c8;
}

.key.hit { background: var(--green-dark); border-color: var(--green); color: #fff; }
.key.prox, .key.hot { background: var(--blue-dark); border-color: var(--blue); color: #fff; }
.key.shift { background: var(--yellow-dark); border-color: var(--yellow); color: #fff; }
.key.dead { background: #202835; border-color: #2a3644; color: #62738c; }
.key.mine {
  background: var(--red-dark);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.45);
}
.key .flag {
  position: absolute;
  top: -7px;
  right: -5px;
  font-size: 14px;
  filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.8));
}
.key.flagged { border-color: var(--red); }

.board-hint {
  text-align: center;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  padding-top: 4px;
}

/* ============ SYSTEM LOG ============ */
#log-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#log {
  flex: 1;
  overflow-y: auto;
  padding: 10px 16px 14px;
  font-size: 12.5px;
  line-height: 1.85;
  min-height: 0;
}
#log::-webkit-scrollbar { width: 6px; }
#log::-webkit-scrollbar-thumb { background: var(--panel-border); }

.log-entry { color: var(--text-dim); animation: logfade 0.3s ease-out; }
.log-entry::before { content: "> "; color: #34506e; }
.log-entry.info { color: #9fb2c8; }
.log-entry.good { color: var(--green); }
.log-entry.ping { color: var(--blue); }
.log-entry.warn {
  color: var(--red);
  font-weight: 700;
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}
@keyframes logfade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============ MODALS ============ */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 7, 12, 0.82);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.hidden { display: none !important; }

.modal {
  width: min(560px, 92vw);
  max-height: 88vh;
  max-height: 88dvh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  box-shadow: 0 0 60px rgba(56, 189, 248, 0.12), 0 20px 60px rgba(0, 0, 0, 0.7);
  padding: 28px 32px;
  animation: modalin 0.25s ease-out;
}
@keyframes modalin {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal h2 {
  font-size: 18px;
  letter-spacing: 4px;
  margin-bottom: 16px;
  color: #e8eef7;
  text-shadow: 0 0 14px rgba(56, 189, 248, 0.4);
}
.modal h2.lost { text-shadow: 0 0 14px rgba(239, 68, 68, 0.6); color: #fecaca; }
.modal-body { font-size: 13.5px; line-height: 1.75; color: #a9b8cc; }
.modal-body p { margin-bottom: 12px; }
.modal-body ul { list-style: none; margin: 14px 0; display: flex; flex-direction: column; gap: 10px; }
.modal-body strong { color: #dde6f2; }
.danger-text { color: var(--red); }

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  margin-right: 8px;
  vertical-align: middle;
}
.chip sup { font-size: 9px; margin-left: 1px; }
.chip-green { background: var(--green-dark); border: 1px solid var(--green); }
.chip-yellow { background: var(--yellow-dark); border: 1px solid var(--yellow); }
.chip-blue { background: var(--blue-dark); border: 1px solid var(--blue); }
.chip-gray { background: var(--gray); border: 1px solid #445468; }
.chip-red { background: var(--red-dark); border: 1px solid var(--red); }

.modal-close { margin-top: 20px; width: 100%; }
.modal-close + .modal-close { margin-top: 10px; }

.reveal-row { display: flex; align-items: center; gap: 14px; margin: 14px 0; }
.reveal-label { font-size: 11px; letter-spacing: 2px; color: var(--text-dim); width: 110px; }
.reveal-tiles { display: flex; gap: 6px; }
.reveal-tiles.reveal-stack { flex-wrap: wrap; }
.reveal-tiles .chip { margin-right: 0; }
.chip-word {
  width: auto;
  padding: 0 8px;
  letter-spacing: 2px;
}

/* ============ FOOTER ============ */
#site-footer {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-dim);
  border-top: 1px solid var(--panel-border);
  padding-top: 10px;
}
.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.footer-legal {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
  font-size: 9.5px;
  letter-spacing: 0.5px;
  color: #46566c;
}
#site-footer a {
  color: #7a92b0;
  text-decoration: none;
}
#site-footer a:hover { color: var(--blue); }
#site-footer .sep { margin: 0 6px; }

/* ============ LEGAL BANNER ============ */
#legal-banner {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(720px, 94vw);
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--panel);
  border: 1px solid var(--blue-dark);
  box-shadow: 0 0 30px rgba(56, 189, 248, 0.15), 0 10px 40px rgba(0, 0, 0, 0.6);
  padding: 14px 18px;
  z-index: 40;
  font-size: 12px;
  line-height: 1.6;
  color: #a9b8cc;
  animation: modalin 0.3s ease-out;
}
#legal-banner a { color: var(--blue); }
#legal-banner .hud-btn { white-space: nowrap; flex-shrink: 0; }

/* ============ TUTORIAL COACH ============ */
.menu-wrap { display: flex; gap: 8px; align-items: center; }
#coach {
  position: fixed;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%);
  width: min(640px, 92vw);
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--panel);
  border: 1px solid var(--green-dark);
  box-shadow: 0 0 26px rgba(34, 197, 94, 0.18), 0 10px 40px rgba(0, 0, 0, 0.6);
  padding: 13px 17px;
  z-index: 35;
  font-size: 12.5px;
  line-height: 1.65;
  color: #b9c8da;
  animation: modalin 0.3s ease-out;
}
#coach p::before { content: "▸ "; color: var(--green); }
#coach .hud-btn { white-space: nowrap; flex-shrink: 0; }

/* ============ CHILL PORTAL THEME (hub/daily/section pages) ============ */
body.chill {
  --bg: #1a1626;
  --panel: #241f36;
  --panel-border: #3b3458;
  --text: #ece8f8;
  --text-dim: #9a92b8;
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Segoe UI", system-ui, sans-serif;
  background-image:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(251, 146, 60, 0.10), transparent),
    radial-gradient(ellipse 70% 55% at 85% 115%, rgba(129, 140, 248, 0.12), transparent);
}
body.chill h1 { letter-spacing: 3px; text-shadow: 0 0 22px rgba(167, 139, 250, 0.45); }
body.chill h1 .dash { color: #fb923c; text-shadow: 0 0 14px rgba(251, 146, 60, 0.7); }
body.chill .tagline { text-transform: none; letter-spacing: 0.4px; font-size: 13.5px; color: #b6aed6; }
body.chill .game-card, body.chill .daily-hero, body.chill .ds-head, body.chill .daily-links a,
body.chill .hud-btn, body.chill .operative, body.chill #legal-banner, body.chill .daily-band {
  border-radius: 16px;
}
body.chill .game-card { overflow: hidden; }
body.chill .game-card:hover { border-color: #fb923c; box-shadow: 0 6px 30px rgba(251, 146, 60, 0.18); }
body.chill .card-cta { color: #fbbf24; letter-spacing: 1px; }
body.chill .hub-section-title { text-transform: none; letter-spacing: 1px; font-size: 15px; text-shadow: none; color: #cfc7ea; }
body.chill .daily-hero {
  animation: none;
  border-color: #4c4478;
  box-shadow: 0 4px 26px rgba(129, 140, 248, 0.16);
  background: linear-gradient(180deg, rgba(129, 140, 248, 0.07), rgba(129, 140, 248, 0.02)), var(--panel);
}
body.chill .daily-head h2 { color: #a5b4fc; text-shadow: none; letter-spacing: 1.5px; }
body.chill .daily-date, body.chill .daily-all { color: #c7d2fe; }
body.chill .ds-count { color: #a5b4fc; }
body.chill .footer-legal { color: #6d6590; }
body.chill .section-back a:hover { color: #fbbf24; }

/* ---- portal flavor: physics section page ---- */
body.theme-physics {
  --bg: #17133a;
  --panel: #221c53;
  --panel-border: #4c4899;
  --text: #e2e0ff;
  --text-dim: #8b87c8;
  background-image:
    radial-gradient(ellipse 85% 55% at 50% -10%, rgba(167, 139, 250, 0.15), transparent),
    radial-gradient(ellipse 65% 50% at 90% 115%, rgba(251, 146, 60, 0.10), transparent);
}
body.theme-physics h1 .dash { color: #fb923c; }
body.theme-physics .card-cta, body.theme-physics .hub-section-title { color: #fbbf24; }
body.theme-physics .game-card:hover { border-color: #a78bfa; box-shadow: 0 6px 30px rgba(167, 139, 250, 0.22); }

/* ---- QUOTE MATCH: library ink & gold ---- */
body.quotes-theme {
  --bg: #191410;
  --panel: #241d15;
  --panel-border: #4a3b26;
  --text: #f0e7d5;
  --text-dim: #a5937a;
  background-image:
    radial-gradient(ellipse 85% 55% at 50% -10%, rgba(212, 175, 55, 0.09), transparent),
    radial-gradient(ellipse 60% 50% at 88% 112%, rgba(146, 100, 47, 0.10), transparent);
}
body.quotes-theme h1 .dash { color: #d4af37; text-shadow: 0 0 12px rgba(212, 175, 55, 0.7); }
body.quotes-theme .mode-tag { color: #d4af37; text-shadow: 0 0 10px rgba(212, 175, 55, 0.6); }
body.quotes-theme .hud-btn:hover, body.quotes-theme #menu-dropdown button:hover {
  color: #d4af37;
  border-color: #d4af37;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.3);
}
body.quotes-theme .qm-item { background: #1d1710; border-color: #4a3b26; border-radius: 10px; }
body.quotes-theme .qm-quote {
  font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  font-style: italic;
  font-size: 14px;
}
body.quotes-theme .qm-item:hover:not(:disabled) { border-color: #d4af37; }
body.quotes-theme .qm-quote.sel { border-color: #d4af37; box-shadow: 0 0 12px rgba(212, 175, 55, 0.4); }
body.quotes-theme .qm-item.done { border-color: #d4af37; color: #f3e5b8; background: rgba(120, 90, 20, 0.22); }

.section-quotes:hover, body.chill .section-quotes:hover { border-color: #d4af37; box-shadow: 0 6px 30px rgba(212, 175, 55, 0.2); }
.section-quotes .card-chips a:hover { border-color: #d4af37; color: #e8cf7a; }

/* ---- /daily: horizontal bands themed per section ---- */
.daily-band {
  margin-top: 20px;
  padding: 16px 18px 18px;
  border: 1px solid var(--panel-border);
  border-radius: 16px;
}
.daily-band h2 {
  font-size: 14px;
  letter-spacing: 2px;
  margin-bottom: 12px;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
}
.daily-band .daily-links { margin-top: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.band-words {
  background: linear-gradient(180deg, #0f1520, #0c111a);
  border-color: #1e2a3a;
}
.band-words h2 { color: #22c55e; text-shadow: 0 0 10px rgba(34, 197, 94, 0.4); }
.band-words .daily-links a { border-radius: 6px; background: rgba(10, 14, 20, 0.6); }
.band-words .daily-links a:hover { border-color: #38bdf8; box-shadow: 0 0 12px rgba(56, 189, 248, 0.3); }
.band-physics {
  background: linear-gradient(180deg, #2a2465, #1e1b4b);
  border-color: #4c4899;
}
.band-physics h2 { color: #fbbf24; text-shadow: 0 0 10px rgba(251, 191, 36, 0.4); }
.band-physics .daily-links a { border-radius: 12px; background: rgba(23, 19, 58, 0.6); border-color: #4c4899; }
.band-physics .daily-links a:hover { border-color: #fb923c; box-shadow: 0 0 12px rgba(251, 146, 60, 0.35); }
.band-quotes {
  background: linear-gradient(180deg, #241d15, #191410);
  border-color: #4a3b26;
}
.band-quotes h2 { color: #d4af37; text-shadow: 0 0 10px rgba(212, 175, 55, 0.4); font-family: Georgia, serif; font-style: italic; letter-spacing: 1px; }
.band-quotes .daily-links a { border-radius: 10px; background: rgba(25, 20, 16, 0.6); border-color: #4a3b26; }
.band-quotes .daily-links a:hover { border-color: #d4af37; box-shadow: 0 0 12px rgba(212, 175, 55, 0.35); }
.daily-topline { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 13px; color: var(--text-dim); }

/* ============ GAME HUB ============ */
#app.hub { overflow-y: auto; }
/* flex children must keep natural height — otherwise the card grid gets
   compressed into the viewport and paints over the blurb/footer */
#app.hub > * { flex-shrink: 0; }
.daily-hero {
  margin-top: 20px;
  margin-bottom: 22px;
  padding: 18px 20px 16px;
  background: linear-gradient(180deg, rgba(129, 140, 248, 0.09), rgba(129, 140, 248, 0.02)), var(--panel);
  border: 1px solid #6366f1;
  animation: dailyglow 2.4s ease-in-out infinite;
}
@keyframes dailyglow {
  0%, 100% { box-shadow: 0 0 14px rgba(129, 140, 248, 0.18); }
  50% { box-shadow: 0 0 30px rgba(129, 140, 248, 0.4); }
}
.daily-head h2 {
  font-size: 16px;
  letter-spacing: 3px;
  color: #a5b4fc;
  text-shadow: 0 0 12px rgba(129, 140, 248, 0.6);
}
.daily-all { float: right; font-size: 11px; letter-spacing: 1.5px; color: #c7d2fe; text-decoration: none; }
.daily-all:hover { color: #fff; }
.daily-date {
  font-size: 12px;
  letter-spacing: 2px;
  color: #c7d2fe;
  margin-left: 8px;
}
.daily-sub {
  margin-top: 7px;
  font-size: 11.5px;
  letter-spacing: 0.5px;
  color: #9fb2c8;
}
.daily-links {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.daily-sec { flex: 1; min-width: 240px; }
.ds-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--panel-border);
  background: rgba(10, 14, 20, 0.5);
  font-size: 12px;
  letter-spacing: 2px;
  color: #e8eef7;
  cursor: pointer;
  user-select: none;
}
.ds-count { font-size: 10px; color: #a5b4fc; letter-spacing: 1px; }
.ds-arrow { margin-left: auto; color: var(--text-dim); transition: transform 0.2s; }
.daily-sec:hover .ds-arrow, .daily-sec.open .ds-arrow, .daily-sec:focus-within .ds-arrow { transform: rotate(180deg); }
.ds-games {
  display: none;
  margin-top: 8px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.daily-sec:hover .ds-games, .daily-sec.open .ds-games, .daily-sec:focus-within .ds-games { display: grid; }
.daily-links a {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid var(--panel-border);
  background: rgba(10, 14, 20, 0.5);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.daily-links a:hover {
  border-color: #818cf8;
  box-shadow: 0 0 14px rgba(129, 140, 248, 0.35);
}
.dl-name { font-size: 12px; letter-spacing: 2px; color: #e8eef7; }
.dl-status { font-size: 10px; letter-spacing: 1.5px; color: var(--blue); }
.dl-status.dl-won { color: var(--green); }
.dl-status.dl-lost { color: var(--red); }
.daily-links a.dl-done { opacity: 0.75; }
.dl-global { font-size: 9px; letter-spacing: 1px; color: var(--text-dim); }

.hub-blurb {
  margin: 0 auto 18px;
  max-width: 720px;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.7;
  color: #7a92b0;
}

/* in-game banner: you are playing the daily */
.daily-flag {
  text-align: center;
  padding: 8px 12px;
  font-size: 11px;
  letter-spacing: 2px;
  color: #a5b4fc;
  background: rgba(129, 140, 248, 0.07);
  border: 1px solid #6366f1;
  animation: dailyglow 2.4s ease-in-out infinite;
}
.hub-header {
  display: block;
  text-align: center;
  padding: 26px 0 20px;
  border-bottom: 1px solid var(--panel-border);
}
.hub-header .hub-motto, .hub-header .tagline { max-width: 640px; margin-left: auto; margin-right: auto; }
.hub-header h1 {
  position: static;
  transform: none;
  font-size: 34px;
}
.tagline {
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--text-dim);
}
.hub-main { flex: none; display: block; }
.hub-home { color: inherit; text-decoration: none; }
.hub-logo { height: 40px; vertical-align: -9px; margin-right: 6px; }
.section-back { margin-top: 18px; font-size: 11px; letter-spacing: 2px; }
.section-back a { color: var(--text-dim); text-decoration: none; }
.section-back a:hover { color: var(--blue); }
.section-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); padding-top: 26px; }
.section-card img { height: 230px; }
.card-main { display: block; color: inherit; text-decoration: none; }
.card-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 2px 16px 15px; }
.card-chips a {
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 5px 11px;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  color: #cfc7ea;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.card-chips a:hover { border-color: #fb923c; color: #fbbf24; }
.section-card .card-body h2 { font-size: 17px; }
.hub-section-title {
  margin-top: 24px;
  font-size: 13px;
  letter-spacing: 3px;
  color: #e8eef7;
  text-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
}
.hub-section-title + .hub-grid { padding-top: 14px; }
.hub-grid {
  flex: none; /* cancel the game-page `main { flex: 1 }` — basis 0 pins the
                 grid to leftover viewport height and its cards overflow */
  display: grid;
  /* auto-fill keeps card width stable even in a one-card section */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 26px 0;
}
.game-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.game-card:hover {
  border-color: var(--blue);
  box-shadow: 0 0 26px rgba(56, 189, 248, 0.2);
  transform: translateY(-3px);
}
.game-card img {
  display: block;
  width: 100%;
  /* fixed height, not aspect-ratio: %-width + aspect-ratio inside auto grid
     tracks sizes cyclically and collapses the second row */
  height: 185px;
  object-fit: cover;
  object-position: top;
  border-bottom: 1px solid var(--panel-border);
  background: var(--bg);
}
.card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 15px 16px 16px;
}
.card-body h2 {
  font-size: 15px;
  letter-spacing: 3px;
  color: #e8eef7;
}
.card-sub {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--blue);
}
.card-body p {
  flex: 1;
  font-size: 12px;
  line-height: 1.65;
  color: #9fb2c8;
}
.card-cta {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--blue);
}

/* ---- GEARWORKS (its own colorful workshop theme) ---- */
body.gears-theme {
  --bg: #17133a;
  --panel: #221c53;
  --panel-border: #4c4899;
  --text: #e2e0ff;
  --text-dim: #8b87c8;
}
body.gears-theme {
  background-image:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(167, 139, 250, 0.14), transparent),
    radial-gradient(ellipse 60% 50% at 90% 110%, rgba(251, 146, 60, 0.10), transparent);
}
body.gears-theme h1 { text-shadow: 0 0 18px rgba(167, 139, 250, 0.65); }
body.gears-theme h1 .dash { color: #fb923c; text-shadow: 0 0 14px rgba(251, 146, 60, 0.8); }
body.gears-theme .mode-tag { color: #fbbf24; text-shadow: 0 0 10px rgba(251, 191, 36, 0.7); }
body.gears-theme .hud-btn:hover, body.gears-theme #menu-dropdown button:hover {
  color: #fbbf24;
  border-color: #fbbf24;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.3);
}
.gears-main { flex: none; display: block; }
#gears-panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  /* the canvas (JS-sized to fit both viewport axes) decides the width */
  width: fit-content;
  min-width: min(100%, 300px);
  max-width: 100%;
  margin: 0 auto;
  padding-bottom: 8px;
}
#gcanvas {
  display: block;
  width: 100%;
  touch-action: none; /* the canvas owns its gestures — dragging must not scroll */
  cursor: grab;
  margin-top: 10px;
}
.gstatus {
  min-height: 20px;
  padding: 6px 16px 8px;
  font-size: 11.5px;
  letter-spacing: 0.5px;
  color: #9fb2c8;
}
.gstatus.warn { color: var(--red); }
.glevel { font-size: 12px; letter-spacing: 1.5px; color: var(--text-dim); }
.gstatus.win { color: #22d3ee; }
/* --- Suitcase theme --- */
body.suitcase-theme {
  --bg: #0b1622;
  --panel: #10202f;
  --panel-border: #2b4356;
  --text: #e2ecff;
  --text-dim: #7c93a8;
}
body.suitcase-theme {
  background-image:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(34, 211, 238, 0.12), transparent),
    radial-gradient(ellipse 60% 50% at 90% 110%, rgba(251, 191, 36, 0.08), transparent);
}
body.suitcase-theme h1 { text-shadow: 0 0 18px rgba(34, 211, 238, 0.5); }
body.suitcase-theme .mode-tag { color: #fbbf24; text-shadow: 0 0 10px rgba(251, 191, 36, 0.6); }
body.suitcase-theme .hud-btn:hover, body.suitcase-theme #menu-dropdown button:hover {
  color: #22d3ee; border-color: #22d3ee; box-shadow: 0 0 12px rgba(34, 211, 238, 0.3);
}
#sccanvas { display: block; width: 100%; touch-action: none; cursor: grab; margin-top: 10px; }
.sc-controls { text-align: center; padding: 6px 0 2px; }
.sc-controls .hud-btn { font-size: 13px; }
.suitcase-theme .level-cell {
  padding: 14px 0; border: 1px solid var(--panel-border); border-radius: 9px;
  background: var(--panel); color: var(--text); font: inherit; font-size: 15px; cursor: pointer;
}
.suitcase-theme .level-cell:not(.locked):hover { border-color: #22d3ee; color: #22d3ee; }
.suitcase-theme .level-cell.locked { opacity: 0.4; cursor: default; }
/* --- Marble Machine theme --- */
body.marble-theme {
  --bg: #0a0e17;
  --panel: #0f1626;
  --panel-border: #2b3a58;
  --text: #e8edf6;
  --text-dim: #6b7a8f;
}
body.marble-theme {
  background-image:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(80, 150, 240, 0.13), transparent),
    radial-gradient(ellipse 60% 50% at 90% 110%, rgba(255, 210, 63, 0.08), transparent);
}
body.marble-theme h1 { text-shadow: 0 0 18px rgba(79, 123, 214, 0.6); }
body.marble-theme .mode-tag { color: #ffd23f; text-shadow: 0 0 10px rgba(255, 210, 63, 0.6); }
body.marble-theme .hud-btn:hover, body.marble-theme #menu-dropdown button:hover {
  color: #ffd23f; border-color: #ffd23f; box-shadow: 0 0 12px rgba(255, 210, 63, 0.3);
}
#mcanvas { display: block; width: 100%; touch-action: none; cursor: grab; margin-top: 10px; }
.marble-theme .level-cell {
  padding: 12px 0; border: 1px solid var(--panel-border); border-radius: 9px;
  background: var(--panel); color: var(--text); font: inherit; font-size: 14px; cursor: pointer;
}
.marble-theme .level-cell:not(.locked):hover { border-color: #ffd23f; color: #ffd23f; }
.marble-theme .level-cell.locked { opacity: 0.4; cursor: default; }
/* --- Game-nav: clean text category buttons; flyouts hold circular game marks --- */
.game-nav {
  display: flex; gap: 8px; padding: 9px 12px 5px; justify-content: center; flex-wrap: wrap;
  position: relative; z-index: 60;
}
.gn-cat { position: relative; }
.gn-btn {
  font: inherit; font-size: 10.5px; letter-spacing: 0.14em; cursor: pointer;
  color: #93a3ba; background: transparent; border: 1px solid #2b3a58;
  border-radius: 999px; padding: 6px 14px; transition: color 0.15s, border-color 0.15s;
}
.gn-cat:hover .gn-btn, .gn-cat.open .gn-btn, .gn-cat.gn-here .gn-btn { color: #e8edf6; border-color: #4b5f82; }
.gn-cat.gn-here .gn-btn { border-color: #22d3ee; color: #22d3ee; }
.gn-fly {
  position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 2px; z-index: 90;
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity 0.15s ease, visibility 0s linear 0.3s;   /* grace period on leave */
  background: rgba(15, 22, 38, 0.97); border: 1px solid #2b3a58; border-radius: 14px;
  padding: 8px; min-width: 200px; box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.85);
}
.gn-fly::before {                                   /* invisible bridge over the hover gap */
  content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
.gn-cat:first-child .gn-fly { left: 0; transform: none; }
.gn-cat:last-child .gn-fly { left: auto; right: 0; transform: none; }
.gn-cat:hover .gn-fly, .gn-cat.open .gn-fly {
  visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s;
}
.gn-game {
  display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 10px;
  color: #cdd8e6; text-decoration: none; font-size: 12.5px; letter-spacing: 0.03em;
}
.gn-game:hover { background: #1a2338; color: #fff; }
.gn-game { flex-wrap: wrap; }
.gn-game .gn-desc {
  flex: 1 0 100%; font-style: normal; font-size: 10.5px; line-height: 1.4;
  color: #7e90a6; max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
  transition: max-height 0.18s ease, opacity 0.18s, margin-top 0.18s;
}
.gn-game:hover .gn-desc { max-height: 3.4em; opacity: 1; margin-top: 4px; }
.gn-game img {
  width: 38px; height: 38px; border-radius: 50%;
  box-shadow: 0 3px 9px -3px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s;
}
.gn-game:hover img { border-radius: 10px; transform: scale(1.06); }
.gn-game.gn-allrow span { color: #22d3ee; font-weight: 700; }
.gn-game.gn-cur { background: rgba(34, 211, 238, 0.1); }
.gn-game.gn-cur span { color: #22d3ee; }
/* --- Hub section cards: unified game grid — large mark, name beneath,
       metallic shine + morph on hover --- */
.game-card .card-games {
  display: flex; flex-wrap: wrap; gap: 16px 20px; justify-content: center;
  padding: 24px 14px 10px; min-height: 150px; align-items: flex-start; align-content: center;
  background: radial-gradient(ellipse 70% 60% at 50% 32%, rgba(34, 211, 238, 0.06), transparent 75%);
}
.section-card { overflow: visible; }
.cg { position: relative; width: 88px; text-align: center; text-decoration: none; display: block; }
.cg .ci {
  position: relative; display: block; width: 78px; height: 78px; margin: 0 auto;
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 6px 16px -5px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: border-radius 0.32s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s;
}
.cg .ci img { width: 100%; height: 100%; display: block; }
.cg .ci::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.38) 50%, transparent 62%);
  transform: translateX(-120%);
}
.cg:hover .ci { border-radius: 14px; transform: translateY(-4px); }
.cg:hover .ci::after { animation: cg-shine 0.7s ease; }
@keyframes cg-shine { to { transform: translateX(120%); } }
.cg .cn {
  display: block; margin-top: 8px; font-size: 10.5px; letter-spacing: 0.08em;
  color: #93a3ba; line-height: 1.3; transition: color 0.15s;
}
.cg:hover .cn {
  background: linear-gradient(180deg, #f4f8fc, #8fa2b8 55%, #e2ebf4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* hover tagline — the one-line hook for each game */
.cg .tag {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px); width: 190px;
  background: linear-gradient(180deg, rgba(30, 40, 58, 0.98), rgba(15, 22, 38, 0.98));
  border: 1px solid #3a4d70; border-radius: 11px; padding: 8px 11px;
  font-size: 11px; line-height: 1.45; color: #dbe5f0; text-align: center;
  opacity: 0; pointer-events: none; z-index: 95;
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: opacity 0.18s, transform 0.18s;
}
.cg:hover .tag { opacity: 1; transform: translateX(-50%) translateY(0); }
/* --- Today's CTA row: two equal buttons --- */
.daily-cta { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 2px; }
.daily-cta .hud-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 150px; padding: 10px 18px; font-size: 13px; letter-spacing: 0.1em;
  text-decoration: none; cursor: pointer;
}
.daily-cta .daily-more { color: #22d3ee; border-color: #2b4356; }
.daily-cta .daily-more:hover { border-color: #22d3ee; }
/* --- Browse block: category pills live OUTSIDE the today section --- */
.browse-all { margin-top: 26px; }
.browse-label {
  text-align: center; font-size: 10px; letter-spacing: 0.24em; color: #56677d;
  font-weight: 600; margin: 0 0 4px;
}
html { scroll-behavior: smooth; }
.all-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 10px; }
.all-link {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font-size: 13px; letter-spacing: 0.06em; font-weight: 600; color: #cdd8e6;
  border: 1px solid #2b4356; border-radius: 999px; padding: 10px 18px;
  transition: color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.all-link .al-glyph { color: #22d3ee; font-size: 12px; }
.all-link:hover { color: #22d3ee; border-color: #22d3ee; box-shadow: 0 0 14px rgba(34, 211, 238, 0.25); }
/* --- Today's CTA row: two equal buttons --- */
.daily-cta { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 2px; }
.daily-cta .hud-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 150px; padding: 10px 18px; font-size: 13px; letter-spacing: 0.1em;
  text-decoration: none; cursor: pointer;
}
.daily-cta .daily-more { color: #22d3ee; border-color: #2b4356; }
.daily-cta .daily-more:hover { border-color: #22d3ee; }
/* --- Hub live demo: a real Marble Machine level solving itself --- */
.hub-demo {
  display: flex; gap: 22px; align-items: center; margin: 24px 0 4px;
  padding: 18px; border: 1px solid #22314e; border-radius: 18px;
  background:
    radial-gradient(ellipse 70% 90% at 18% 40%, rgba(79, 123, 214, 0.10), transparent 70%),
    linear-gradient(170deg, #0d1526, #0a0e17);
}
.hd-stage { flex: 0 0 236px; display: block; }
.hd-stage canvas { display: block; width: 100%; border-radius: 12px; }
.hd-body { flex: 1; min-width: 0; }
.hd-kicker { font-size: 10px; letter-spacing: 0.26em; color: #ffd23f; font-weight: 700; margin: 0 0 6px; }
.hd-title { font-size: 21px; margin: 0 0 8px; color: #e8edf6; }
.hd-sub { font-size: 13px; line-height: 1.65; color: #93a3ba; margin: 0 0 14px; max-width: 460px; }
.hd-cta { display: inline-flex; align-items: center; padding: 10px 18px; letter-spacing: 0.1em; text-decoration: none; }
@media (max-width: 620px) {
  .hub-demo { flex-direction: column; }
  .hd-stage { flex: 0 0 auto; width: min(236px, 70vw); }
  .hd-body { text-align: center; }
  .hd-sub { margin-left: auto; margin-right: auto; }
}
/* --- Browse block: category pills live OUTSIDE the today section --- */
.browse-all { margin-top: 26px; }
.browse-label {
  text-align: center; font-size: 10px; letter-spacing: 0.24em; color: #56677d;
  font-weight: 600; margin: 0 0 4px;
}
html { scroll-behavior: smooth; }
.all-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 10px; }
.all-link {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font-size: 13px; letter-spacing: 0.06em; font-weight: 600; color: #cdd8e6;
  border: 1px solid #2b4356; border-radius: 999px; padding: 10px 18px;
  transition: color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.all-link .al-glyph { color: #22d3ee; font-size: 12px; }
.all-link:hover { color: #22d3ee; border-color: #22d3ee; box-shadow: 0 0 14px rgba(34, 211, 238, 0.25); }
/* --- slow marquee carousel of XL game icons --- */
.icon-carousel { overflow: hidden; margin: 22px 0 0; padding: 14px 0 72px;   /* bottom band hosts the tooltips */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ic-track { display: flex; gap: 30px; width: max-content; animation: ic-scroll 90s linear infinite; }
.icon-carousel:hover .ic-track { animation-play-state: paused; }
@keyframes ic-scroll { to { transform: translateX(-50%); } }
.icar { position: relative; width: 158px; text-align: center; text-decoration: none; flex: 0 0 auto; }
.icar .icimg {
  position: relative; display: block; width: 146px; height: 146px; margin: 0 auto;
  border-radius: 32px; overflow: hidden;
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.2s, border-radius 0.3s;
}
.icar .icimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.icar .icimg .sh { opacity: 0; transition: opacity 0.35s; }
.icar:hover .icimg { transform: translateY(-5px); border-radius: 18px; }
.icar:hover .icimg .sh { opacity: 1; }          /* the mark dissolves into the real game */
.icar .icn { display: block; margin-top: 10px; font-size: 12px; letter-spacing: 0.07em; color: #93a3ba; }
.icar:hover .icn { color: #e8edf6; }
.icar .tag {
  position: absolute; top: calc(100% + 4px); left: 50%;
  transform: translateX(-50%) translateY(-3px); width: 220px;
  background: linear-gradient(180deg, rgba(30, 40, 58, 0.98), rgba(15, 22, 38, 0.98));
  border: 1px solid #3a4d70; border-radius: 11px; padding: 8px 11px;
  font-size: 11px; line-height: 1.45; color: #dbe5f0; text-align: center;
  opacity: 0; pointer-events: none; z-index: 95;
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.9);
  transition: opacity 0.18s, transform 0.18s;
}
.icar:hover .tag { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .ic-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } }
/* touch: finger-scrollable carousel (JS drifts it; CSS marquee off) */
.icon-carousel.touchmode { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.icon-carousel.touchmode::-webkit-scrollbar { display: none; }
.icon-carousel.touchmode .ic-track { animation: none; }
/* touch: no hover — name AND tagline always visible under each tile */
@media (pointer: coarse) {
  .icon-carousel { padding-bottom: 16px; }
  .icar { width: 168px; }
  .icar .tag {
    position: static; opacity: 1; transform: none; width: auto; pointer-events: none;
    background: transparent; border: none; box-shadow: none; padding: 4px 6px 0;
    color: #7e90a6; font-size: 10.5px; line-height: 1.4;
  }
}

.level-grid { display: flex; flex-direction: column; gap: 14px; }
.level-set-name {
  font-size: 11px;
  letter-spacing: 2px;
  color: #fbbf24;
}
.level-set-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
}
.level-btn { font-size: 14px; padding: 12px 0; }
.level-btn:disabled { opacity: 0.35; cursor: default; }

.love-btn { color: #f472b6; border-color: #f472b6aa; }
.love-btn.loved { background: rgba(244, 114, 182, 0.12); box-shadow: 0 0 10px rgba(244, 114, 182, 0.3); }
.card-love {
  margin-left: 10px;
  font-size: 11px;
  letter-spacing: 1px;
  color: #f472b6;
}
.operative {
  background: transparent;
  border: 1px dashed var(--panel-border);
  color: var(--blue);
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: 1px;
  padding: 4px 9px;
  cursor: pointer;
  white-space: nowrap;
}
.operative:hover { border-color: var(--blue); }
.toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--panel);
  border: 1px solid var(--blue);
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.25);
  padding: 10px 18px;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--text);
  z-index: 120;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- CANNONBALL CIRCUS: big-top crimson & gold ---- */
body.circus-theme {
  --bg: #1d0812;
  --panel: #2b0d18;
  --panel-border: #6b1d2e;
  --text: #fbeee0;
  --text-dim: #b08585;
  background-image:
    radial-gradient(ellipse 85% 55% at 50% -10%, rgba(251, 191, 36, 0.12), transparent),
    radial-gradient(ellipse 60% 50% at 88% 112%, rgba(220, 38, 38, 0.12), transparent);
}
body.circus-theme h1 .dash { color: #fbbf24; text-shadow: 0 0 12px rgba(251, 191, 36, 0.7); }
body.circus-theme .mode-tag { color: #fbbf24; text-shadow: 0 0 10px rgba(251, 191, 36, 0.6); }
body.circus-theme .hud-btn:hover, body.circus-theme #menu-dropdown button:hover {
  color: #fbbf24;
  border-color: #fbbf24;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.3);
}

body.circus-theme #ccanvas { display: block; width: 100%; touch-action: none; cursor: crosshair; margin-top: 10px; }

/* ---- QUOTE MATCH ---- */
.qm-main { flex: none; display: block; }
#qm-panel { background: var(--panel); border: 1px solid var(--panel-border); max-width: 900px; margin: 0 auto; padding-bottom: 16px; }
.qm-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; padding: 14px 16px 4px; }
.qm-col { display: flex; flex-direction: column; gap: 10px; }
.qm-item {
  background: #0c111a;
  border: 1px solid #2a3b55;
  color: var(--text);
  font-family: var(--font);
  font-size: 12.5px;
  line-height: 1.55;
  text-align: left;
  padding: 12px 13px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.qm-item:hover:not(:disabled) { border-color: var(--blue); }
.qm-quote.sel { border-color: var(--blue); box-shadow: 0 0 12px rgba(56, 189, 248, 0.35); }
.qm-item.done {
  border-color: var(--yellow);
  color: #fde68a;
  background: rgba(133, 77, 14, 0.25);
  cursor: default;
}
.qm-author { font-size: 13px; letter-spacing: 0.5px; }
.qm-item.shake { animation: rowshake 0.35s; }
.qm-reveal { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.qm-reveal em { color: #9fb2c8; }
@media (max-width: 700px) {
  .qm-grid { grid-template-columns: 1fr; }
}

/* ============ MOBILE / SMALL SCREENS ============ */
@media (max-width: 960px) {
  :root {
    --tile-size: min(56px, calc((100vw - 78px) / 5));
  }
  /* stacked layout scrolls vertically, so width is the only constraint here */
  #grid, #grid.rows6 { --tile-size: min(56px, calc((100vw - 78px) / 5)); }
  #grid.cols6w { --tile-size: min(56px, calc((100vw - 86px) / 6)); }
  #grid.field4 { --tile-size: min(72px, calc((100vw - 74px) / 4)); }
  #grid.chain { --tile-size: min(50px, calc((100vw - 70px) / 4)); }
  #grid.sweep { --tile-size: min(56px, calc((100vw - 116px) / 5)); padding: 10px 8px; }
  #grid.sweep.cols6 { --tile-size: min(48px, calc((100vw - 112px) / 6)); }

  /* stacked layout is taller than the screen — let the page scroll */
  html, body { overflow: auto; }
  #app {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 10px 10px 20px;
    gap: 10px;
  }

  header { padding-bottom: 8px; gap: 8px; }
  h1 {
    position: static;
    transform: none;
    font-size: 17px;
    letter-spacing: 3px;
    white-space: nowrap;
  }
  .hud-btn { font-size: 11px; letter-spacing: 1px; padding: 7px 8px; white-space: nowrap; }
  .mode-tag { display: block; font-size: 10px; letter-spacing: 2px; }
  .menu-wrap { gap: 5px; }
  .lives-label { display: none; }
  .life { width: 16px; height: 16px; }

  main { grid-template-columns: 1fr; gap: 10px; }

  #grid-panel { padding-bottom: 10px; }
  #grid { padding: 10px 8px 4px; gap: 6px; }
  .grid-row { gap: 6px; }
  .tile { font-size: 20px; }
  .tile .count { font-size: 10px; top: 1px; right: 3px; }

  #side-panel { gap: 10px; }
  #keyboard { gap: 5px; padding: 10px 4px 8px; }
  .kb-row { gap: 4px; }
  .key {
    width: clamp(24px, calc((100vw - 66px) / 11.2), 46px);
    height: 46px;
    font-size: 14px;
  }
  .key.key-wide {
    width: clamp(38px, calc((100vw - 66px) / 11.2 * 1.6), 74px);
    font-size: 9px;
  }
  .key .flag { top: -6px; right: -4px; font-size: 12px; }

  #log-panel { flex: none; }
  #log { flex: none; height: 130px; font-size: 11.5px; }

  .board-hint { padding: 4px 8px 0; }

  .modal { padding: 20px 16px; }
  .modal-body { font-size: 12.5px; }
  .reveal-label { width: 84px; font-size: 10px; }

  /* the Defuse Board is the phone's keyboard — keep it pinned on screen */
  #defuse-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 28;
    margin: 0;
    border-top: 1px solid #2a3b55;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.55);
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  #app { padding-bottom: 205px; } /* room for the pinned keyboard */
  #coach { bottom: 212px; }
  #legal-banner { bottom: 212px; }

  #site-footer { font-size: 9px; }
  .footer-row {
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }

  .glevel { font-size: 10px; letter-spacing: 0.5px; }
  .hub-header { padding: 16px 0 14px; }
  .hub-header h1 { font-size: 22px; letter-spacing: 5px; }
  .tagline { font-size: 9px; padding: 0 10px; }
  .hub-grid { gap: 14px; padding: 16px 0; }
}


/* menu groups: THIS GAME vs CHILL PLAYS */
.menu-label {
  padding: 8px 14px 4px;
  font-size: 10px;
  letter-spacing: 0.18em;
  opacity: 0.55;
  user-select: none;
}
.menu-label + button { border-top: none; }
.menu-label:not(:first-child) {
  margin-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 10px;
}


/* the motto */
.hub-motto {
  margin: 2px 0 0;
  text-align: center;
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: #b9aee0;
}


/* circus performer wardrobe */
#artist-preview { display: block; margin: 0 auto 10px; background: rgba(0, 0, 0, 0.25); border-radius: 10px; }
.artist-row { display: flex; align-items: center; gap: 9px; margin: 10px 0; }
.artist-row span { width: 62px; font-size: 10px; letter-spacing: 0.15em; opacity: 0.7; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25); cursor: pointer; padding: 0; }
.swatch.sel { border-color: #fbbf24; box-shadow: 0 0 8px rgba(251, 191, 36, 0.7); }


/* ================= PATTERN NINE ================= */
body.pattern-theme {
  --bg: #0b1a21;
  --panel: #10242e;
  --panel-border: #1e4552;
  --text: #d9f2f8;
  --text-dim: #7fa8b5;
  background-image:
    radial-gradient(ellipse 85% 55% at 50% -10%, rgba(34, 211, 238, 0.10), transparent),
    radial-gradient(ellipse 60% 50% at 88% 112%, rgba(244, 114, 182, 0.08), transparent);
}
body.pattern-theme h1 .dash { color: #22d3ee; text-shadow: 0 0 12px rgba(34, 211, 238, 0.7); }
body.pattern-theme .mode-tag { color: #22d3ee; text-shadow: 0 0 10px rgba(34, 211, 238, 0.6); }
body.pattern-theme .hud-btn:hover, body.pattern-theme #menu-dropdown button:hover {
  color: #22d3ee;
  border-color: #22d3ee;
}
.pn-main { flex: none; display: block; }
#pn-panel { background: var(--panel); border: 1px solid var(--panel-border); max-width: 560px; margin: 0 auto; padding: 12px 14px 18px; border-radius: 12px; }
.pn-grid, .pn-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px auto 0; max-width: 420px; }
.pn-opts { grid-template-columns: repeat(4, 1fr); max-width: 420px; }
.pn-tile {
  aspect-ratio: 1;
  background: #0c2c38;
  border: 1.5px solid #1e4552;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6%;
  min-width: 0;
}
.pn-tile svg { width: 100%; height: 100%; }
.pn-q { font-size: clamp(26px, 8vw, 44px); color: #22d3ee; text-shadow: 0 0 14px rgba(34, 211, 238, 0.8); animation: pnPulse 1.6s ease-in-out infinite; }
@keyframes pnPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.pn-solved { border-color: #4ade80; box-shadow: 0 0 12px rgba(74, 222, 128, 0.4); }
button.pn-opt { cursor: pointer; transition: transform 0.1s, border-color 0.1s; }
button.pn-opt:hover:not(:disabled) { border-color: #22d3ee; transform: translateY(-2px); }
button.pn-opt.right { border-color: #4ade80; box-shadow: 0 0 12px rgba(74, 222, 128, 0.5); }
button.pn-opt.wrong { border-color: #f87171; box-shadow: 0 0 12px rgba(248, 113, 113, 0.5); animation: pnShake 0.3s; opacity: 0.45; }
@keyframes pnShake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.pn-status { text-align: center; margin: 12px 4px 2px; font-size: 13px; color: var(--text-dim); min-height: 18px; }
@media (max-width: 520px) {
  .pn-opts { grid-template-columns: repeat(4, 1fr); max-width: 420px; }
  .pn-status { font-size: 12px; }
  #pn-panel { padding: 8px 8px 14px; }
}

.band-logic { background: linear-gradient(135deg, #0b1a21, #10242e); border-color: #1e4552; }
.band-logic h2 { color: #22d3ee; }


/* end-of-round card: keep the board visible and let players move the card */
#end-overlay { background: transparent; backdrop-filter: none; pointer-events: none; align-items: flex-end; padding-bottom: 5vh; }
#end-overlay .modal { pointer-events: auto; cursor: grab; touch-action: none; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.7); }
#end-overlay .modal:active { cursor: grabbing; }


/* circus: landscape nudge */
#rotate-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(10, 3, 8, 0.94);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 24px; font-size: 19px; line-height: 1.5;
}
#rotate-overlay.hidden { display: none; }

/* hub: pinned favorites */
.fav-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  max-width: 980px; margin: 14px auto 0; padding: 0 16px;
}
.fav-label { font-size: 12px; letter-spacing: 0.12em; color: #f472b6; }
.fav-row a {
  padding: 5px 12px; border-radius: 999px; font-size: 13px; text-decoration: none;
  background: rgba(244, 114, 182, 0.12); border: 1px solid rgba(244, 114, 182, 0.4); color: inherit;
}
.fav-row a:hover { border-color: #f472b6; }

.swatch.swatch-text { width: auto; border-radius: 9px; font-size: 10px; letter-spacing: 0.1em; padding: 5px 11px; background: rgba(255, 255, 255, 0.08); color: inherit; }

.bm-btn.bm-on { color: #fbbf24; border-color: #fbbf24; }


/* ================= MATCHSTICK MATH ================= */
body.matchstick-theme {
  --bg: #17120a;
  --panel: #211a0e;
  --panel-border: #4a3a1c;
  --text: #f5ead2;
  --text-dim: #b09c72;
  background-image:
    radial-gradient(ellipse 85% 55% at 50% -10%, rgba(251, 191, 36, 0.10), transparent),
    radial-gradient(ellipse 60% 50% at 88% 112%, rgba(239, 68, 68, 0.07), transparent);
}
body.matchstick-theme h1 .dash { color: #fbbf24; text-shadow: 0 0 12px rgba(251, 191, 36, 0.7); }
body.matchstick-theme .mode-tag { color: #fbbf24; text-shadow: 0 0 10px rgba(251, 191, 36, 0.6); }
body.matchstick-theme .hud-btn:hover, body.matchstick-theme #menu-dropdown button:hover {
  color: #fbbf24;
  border-color: #fbbf24;
}
.ms-main { flex: none; display: block; }
#ms-panel { background: var(--panel); border: 1px solid var(--panel-border); max-width: 600px; margin: max(4vh, 18px) auto 0; padding: 18px 14px 22px; border-radius: 14px; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45); }
.ms-board { display: flex; justify-content: center; gap: 2vw; margin: 22px auto 8px; max-width: 500px; position: relative; transition: opacity 0.25s; }
.ms-board.fading { opacity: 0; }
.ms-board.solved .ms-stick line { stroke: #4ade80; filter: drop-shadow(0 0 7px rgba(74, 222, 128, 0.8)); transition: stroke 0.2s; }
.ms-board.solved .ms-stick circle { fill: #86efac; transition: fill 0.2s; }
.ms-true {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
  font-size: 30px; letter-spacing: 0.25em; color: #4ade80; font-weight: bold;
  text-shadow: 0 0 18px rgba(74, 222, 128, 0.9);
  animation: msTrue 1s ease-out forwards; pointer-events: none;
}
@keyframes msTrue {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -110%) scale(1); }
}
.ms-stick:hover line { stroke: #ffd166; }
.ms-sub { text-align: center; font-size: 11.5px; letter-spacing: 0.12em; color: var(--text-dim); opacity: 0.85; margin-top: 6px; }
.ms-cell { width: 17%; max-width: 76px; }
.ms-cell svg { width: 100%; height: auto; display: block; overflow: visible; }
.ms-stick line { stroke: #e7b04a; stroke-width: 7; stroke-linecap: round; }
.ms-stick circle { fill: #d94f2b; }
.ms-stick { cursor: pointer; }
.ms-stick.fixed { cursor: default; opacity: 0.92; }
.ms-stick.held line { stroke: #fde68a; filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.9)); }
.ms-stick.held circle { fill: #f97316; }
.ms-ghost line { stroke: rgba(231, 176, 74, 0.22); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 5 6; }
.ms-ghost circle { fill: rgba(217, 79, 43, 0.2); }
.ms-ghost { cursor: pointer; }
.ms-ghost:hover line { stroke: rgba(231, 176, 74, 0.45); }
.ms-status { text-align: center; margin: 12px 4px 2px; font-size: 13px; color: var(--text-dim); min-height: 18px; }
@media (max-width: 520px) {
  .ms-board { gap: 6px; }
  .ms-status { font-size: 12px; }
}


/* language picker */
.lang-pick {
  background: transparent;
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  font: inherit;
  font-size: 11px;
  padding: 2px 4px;
  margin-left: 10px;
  cursor: pointer;
}
.lang-pick option { color: #111; }

.rotate-sub { font-size: 13px; opacity: 0.65; }

.pn-rules { list-style: none; margin: 12px 0 0; padding: 10px 12px; font-size: 12.5px; line-height: 1.55; background: rgba(34, 211, 238, 0.07); border: 1px solid rgba(34, 211, 238, 0.25); border-radius: 8px; }
.pn-rules li:first-child { color: #22d3ee; letter-spacing: 0.08em; margin-bottom: 4px; }


/* fullscreen game mode (circus, gears) */
.fs-btn { position: fixed; right: 10px; bottom: 12px; z-index: 96; opacity: 0.75; padding: 6px 10px; }
.fs-btn:hover { opacity: 1; }
@media (pointer: coarse) {
  .fs-btn {
    opacity: 1;
    padding: 10px 14px;
    font-size: 14px;
    letter-spacing: 0.06em;
    border: 1.5px solid #22d3ee;
    border-radius: 10px;
    background: rgba(8, 15, 26, 0.92);
    color: #a5f3fc;
    box-shadow: 0 0 14px rgba(34, 211, 238, 0.55);
  }
}
body.fs-mode { overflow: hidden; }
body.fs-mode header,
body.fs-mode #site-footer,
body.fs-mode .daily-flag,
body.fs-mode #coach,
body.fs-mode .panel-title { display: none !important; }
body.fs-mode main {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
}
body.fs-mode #gears-panel { max-width: none; margin: 0 auto; padding: 0; border: none; background: transparent; }
body.fs-mode canvas { margin: 0 auto; }
#gears-panel canvas { display: block; margin: 0 auto; }

.card-chips a.chip-featured {
  border-color: #fbbf24;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.10);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.25);
}
.card-chips a.chip-featured:hover { background: rgba(251, 191, 36, 0.2); }


/* fullscreen offer on phones */
.fs-ask { position: fixed; inset: 0; z-index: 95; background: rgba(8, 4, 10, 0.82); display: flex; align-items: center; justify-content: center; padding: 20px; }
.fs-ask-card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 12px; padding: 22px 20px; text-align: center; max-width: 320px; }
.fs-ask-card p { margin: 0 0 6px; font-size: 15px; line-height: 1.45; }
.fs-ask-card .hud-btn { display: block; width: 100%; margin-top: 10px; }


/* guest-name picker */
.name-pick { position: fixed; inset: 0; z-index: 97; background: rgba(8, 4, 10, 0.8); display: flex; align-items: center; justify-content: center; padding: 20px; }
.name-pick-card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 12px; padding: 20px 18px; text-align: center; max-width: 320px; width: 100%; }
.name-pick-card p { margin: 0 0 10px; letter-spacing: 0.08em; }
.name-opt { display: block; width: 100%; margin-top: 8px; font-size: 15px; }
.name-more { display: block; width: 100%; margin-top: 12px; opacity: 0.8; font-size: 12px; }

.stats-table { border-collapse: collapse; margin: 10px 0 22px; font-size: 13px; }
.stats-table th, .stats-table td { border: 1px solid var(--panel-border); padding: 5px 12px; text-align: right; }
.stats-table th:first-child, .stats-table td:first-child { text-align: left; }
.stats-table th { color: var(--text-dim); letter-spacing: 0.08em; font-weight: normal; }


/* ================= NEON HUB SKIN ================= */
body.neon {
  background: #0a1120;
  background-image:
    radial-gradient(ellipse 80% 40% at 50% -6%, rgba(34, 211, 238, 0.09), transparent),
    radial-gradient(ellipse 55% 45% at 92% 110%, rgba(217, 70, 239, 0.07), transparent);
  --panel: #0d1830;
  --panel-border: #14304a;
}
body.neon .hub-header { border-bottom: none; padding: 34px 0 8px; }
body.neon .hub-header h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #e6feff;
  font-size: clamp(30px, 5vw, 46px);
  letter-spacing: 9px;
  text-shadow: 0 0 8px rgba(94, 234, 212, 0.85), 0 0 30px rgba(34, 211, 238, 0.5);
}
body.neon .hub-header h1:has(.hub-logo-mid) .dash { display: none; }
body.neon .hub-logo-mid { width: 48px; height: 48px; filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.85)); }
body.neon .hub-motto {
  color: #7ee8f5;
  font-size: 19px;
  font-style: normal;
  letter-spacing: 1px;
  margin-top: 10px;
  text-shadow: 0 0 14px rgba(34, 211, 238, 0.65);
}
body.neon .tagline {
  display: table;
  margin: 16px auto 0;
  background: rgba(28, 54, 92, 0.55);
  border-radius: 12px;
  padding: 11px 24px;
  font-size: 14px;
  letter-spacing: 0.4px;
  color: #cfe4ff;
  text-transform: none;
}
body.neon .daily-hero { background: transparent; border: none; box-shadow: none; max-width: 1240px; }
body.neon .daily-head h2 { color: #f2f8ff; font-size: 26px; font-weight: 700; letter-spacing: 0.4px; }
body.neon .daily-date { color: #9fb6d4; font-weight: 400; }
body.neon .daily-all { color: #7ee8f5; text-decoration: underline; }
body.neon .daily-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
body.neon .daily-sec {
  min-width: 0;
  border: 2px solid #d946ef;
  border-radius: 999px;
  background: #0c1526;
  box-shadow: 0 0 14px rgba(217, 70, 239, 0.35), inset 0 0 16px rgba(217, 70, 239, 0.06);
  padding: 13px 22px;
}
body.neon .daily-sec:first-child {
  border-color: #22d3ee;
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.45), inset 0 0 16px rgba(34, 211, 238, 0.06);
}
body.neon .ds-head { display: flex; align-items: center; gap: 10px; color: #f2f8ff; font-size: 17px; font-weight: 700; }
body.neon .ds-count { display: inline-block; color: #9fb6d4; font-weight: 400; font-size: 13px; }
body.neon .ds-glyph { margin-left: auto; color: #d946ef; font-size: 15px; letter-spacing: 2px; }
body.neon .daily-sec:first-child .ds-glyph { color: #22d3ee; }
body.neon .ds-arrow { color: #9fb6d4; }
body.neon .ds-games { background: #0d1830; border: 1px solid #1d3a5f; border-radius: 14px; }
body.neon .section-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; max-width: 1240px; }
body.neon .section-card {
  border: 2px solid #22d3ee;
  border-radius: 18px;
  background: #0c1526;
  box-shadow: 0 0 16px rgba(34, 211, 238, 0.22);
  overflow: hidden;
}
body.neon .section-card img { border-radius: 12px; }
body.neon .card-body h2 {
  color: #67e8f9;
  font-size: 22px;
  letter-spacing: 0.4px;
  text-shadow: 0 0 12px rgba(34, 211, 238, 0.5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
body.neon .card-sub {
  background: #d946ef;
  color: #fff;
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 11.5px;
  letter-spacing: 0.6px;
  text-shadow: none;
}
body.neon .card-body p { color: #c3d6ee; }
body.neon .card-chips a {
  border: 1.5px solid #22d3ee;
  border-radius: 999px;
  background: transparent;
  color: #a5f3fc;
  padding: 6px 15px;
}
body.neon .card-chips a:hover { background: rgba(34, 211, 238, 0.14); }
body.neon .card-chips a.chip-featured { border-color: #fbbf24; color: #fbbf24; }
body.neon #site-footer { border-top: 1px solid rgba(34, 211, 238, 0.15); }
body.neon .fav-row a { border-color: #d946ef; background: rgba(217, 70, 239, 0.1); color: #f0c8fb; }
@media (max-width: 1080px) {
  body.neon .daily-links { grid-template-columns: repeat(2, 1fr); }
  body.neon .section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  body.neon .daily-links { grid-template-columns: 1fr; }
  body.neon .section-grid { grid-template-columns: 1fr; }
  body.neon .hub-header h1 { letter-spacing: 5px; }
}


/* mine word: hovering a slot shows its possible letters on the keyboard */
.key.kb-poss { box-shadow: inset 0 0 0 2px #4ade80; }
.key.kb-dim { opacity: 0.28; }

body.neon .tagline { font-size: 17px; color: #7ee8f5; text-shadow: 0 0 12px rgba(34, 211, 238, 0.5); letter-spacing: 0.8px; }


/* featured-four daily capsules */
body.neon .daily-sec.ds-link:hover { transform: translateY(-2px); transition: transform 0.12s; }
body.neon .daily-sec.ds-done { border-color: #4ade80; box-shadow: 0 0 14px rgba(74, 222, 128, 0.4), inset 0 0 16px rgba(74, 222, 128, 0.06); }
.dl-feat .dl-name { color: #fbbf24; }

body.neon .daily-sec .ds-head { background: transparent; border: none; padding: 0; box-shadow: none; }

.daily-run { margin-left: 14px; font-size: 12.5px; vertical-align: middle; border-color: #4ade80; color: #4ade80; border-radius: 999px; padding: 6px 14px; }
.daily-run:hover { background: rgba(74, 222, 128, 0.12); }
#daily-next { border-color: #4ade80; color: #4ade80; }


/* daily capsules: uniform cyan, magenta only on hover */
body.neon .daily-sec,
body.neon .daily-sec:first-child {
  border-color: #22d3ee;
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.35), inset 0 0 16px rgba(34, 211, 238, 0.05);
}
body.neon .ds-glyph, body.neon .daily-sec:first-child .ds-glyph { color: #22d3ee; }
body.neon .daily-sec.ds-link:hover {
  border-color: #d946ef;
  box-shadow: 0 0 16px rgba(217, 70, 239, 0.5), inset 0 0 16px rgba(217, 70, 239, 0.08);
}
body.neon .daily-sec.ds-link:hover .ds-glyph { color: #d946ef; }
body.neon .daily-sec.ds-done,
body.neon .daily-sec.ds-done:hover {
  border-color: #4ade80;
  box-shadow: 0 0 14px rgba(74, 222, 128, 0.4), inset 0 0 16px rgba(74, 222, 128, 0.06);
}

/* the logo must pop */
body.neon .hub-logo-mid {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.55), 0 0 20px rgba(34, 211, 238, 0.85);
  background: #f7f2e2;
}


/* the neon hammock badge */
body.neon .hub-logo-mid {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.55);
  object-fit: cover;
}
@media (max-width: 560px) {
  body.neon .hub-logo-mid { width: 64px; height: 64px; }
}


/* daily leaderboards */
.boards { max-width: 1100px; margin: 8px auto 26px; padding: 0 16px; }
.boards h2 { color: #fbbf24; font-size: 20px; letter-spacing: 0.4px; margin-bottom: 12px; }
.boards-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.board-card { background: var(--panel); border: 1.5px solid #fbbf24; border-radius: 14px; padding: 12px 16px; box-shadow: 0 0 12px rgba(251, 191, 36, 0.18); }
.board-card h3 { color: #fde68a; font-size: 14px; letter-spacing: 0.1em; margin: 0 0 8px; }
.board-card ol { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.75; }
.board-empty { list-style: none; margin-left: -20px; color: var(--text-dim); }


/* the small neon hammock dot in every page header */
.logo-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: -8px;
  margin: 0 4px;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.55);
}
@media (hover: hover) and (pointer: fine) {
  .logo-dot {
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    position: relative;
    z-index: 5;
    cursor: zoom-in;
  }
  .logo-dot:hover {
    transform: scale(2.2);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.5), 0 0 30px rgba(34, 211, 238, 0.9);
  }
}


/* desktop: the hammock badge grows on hover */
@media (hover: hover) and (pointer: fine) {
  body.neon .hub-logo-mid {
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    position: relative;
    z-index: 5;
    cursor: zoom-in;
  }
  body.neon .hub-logo-mid:hover {
    transform: scale(2.4);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.5), 0 0 44px rgba(34, 211, 238, 0.95);
  }
}


/* ============ /daily page in the neon system ============ */
body.neon .daily-band {
  background: #0c1526;
  border: 2px solid #22d3ee;
  border-radius: 18px;
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.18);
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
body.neon .daily-band h2 { color: #67e8f9; font-family: inherit; font-style: normal; text-shadow: 0 0 12px rgba(34, 211, 238, 0.5); }
body.neon .daily-band .daily-links a {
  background: transparent;
  border: 1.5px solid #1d3a5f;
  border-radius: 12px;
  min-height: 74px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
body.neon .daily-band .daily-links a:hover { border-color: #d946ef; box-shadow: 0 0 12px rgba(217, 70, 239, 0.35); }
body.neon .daily-band .dl-feat { border-color: rgba(251, 191, 36, 0.55); }
body.neon .boards { max-width: 1100px; }
body.neon .daily-topline { max-width: 1100px; margin: 6px auto 4px; }
body.neon .section-back { max-width: 1100px; margin: 12px auto 0; }
body.neon .ds-count { color: #9fb6d4; }

/* ---- page-notes: crawlable how-to-play + FAQ under each game ---- */
.page-notes {
  max-width: 720px;
  margin: 28px auto 8px;
  padding: 0 16px;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.6;
}
.page-notes h2 {
  color: var(--text);
  font-size: 14px;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.page-notes > p { margin-bottom: 12px; }
.page-notes .faq-item {
  border: 1px solid var(--panel-border);
  background: var(--panel);
  border-radius: 4px;
  margin-bottom: 6px;
  padding: 8px 12px;
}
.page-notes .faq-item summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 600;
}
.page-notes .faq-item summary:hover { color: var(--blue); }
.page-notes .faq-item p { margin-top: 8px; }

/* --- LIVE ARCADE: live gameplay tiles with hover info overlays --- */
.live-strip-wrap { margin: 24px 0 4px; }
.hd-kicker { font-size: 10px; letter-spacing: 0.26em; color: #ffd23f; font-weight: 700; margin: 0 0 6px; text-align: center; }
.hd-title { font-size: 20px; margin: 0 0 14px; color: #e8edf6; text-align: center; }
.lg-title {
  font-size: 11px; letter-spacing: 0.22em; color: #56677d; font-weight: 700;
  margin: 20px 0 10px; display: flex; align-items: center; gap: 12px;
}
.lg-title::after { content: ''; flex: 1; height: 1px; background: #1c2740; }
.live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 6px; }
.ld { position: relative; display: block; border: 1px solid #22314e; border-radius: 14px; overflow: hidden;
  background: #0b1220; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; }
.ld:hover { transform: translateY(-3px); box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.9); }
.ld canvas { display: block; width: 100%; }
.ld-bar { display: flex; justify-content: space-between; align-items: center; gap: 6px;
  padding: 7px 10px; border-top: 1px solid #1c2740; }
.ld-bar b { font-size: 11.5px; color: #cdd8e6; letter-spacing: 0.04em; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-bar .ld-play { font-style: normal; font-size: 10.5px; color: #54e6a0; flex: 0 0 auto; }
.ld-over { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 9px; padding: 14px; text-align: center;
  background: rgba(8, 12, 20, 0.88); opacity: 0; transition: opacity 0.18s; pointer-events: none; }
.ld:hover .ld-over { opacity: 1; }
.ld-over img { width: 56px; height: 56px; border-radius: 50%;
  box-shadow: 0 5px 14px -4px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.ld-over b { color: #e8edf6; font-size: 13px; letter-spacing: 0.04em; }
.ld-over .ld-tag { font-style: normal; font-size: 11px; line-height: 1.55; color: #93a3ba; max-width: 200px; }

/* --- compact Today's strip: one highlighted row --- */
.daily-hero.dh-compact { padding: 12px 16px; margin-bottom: 4px;
  border: 1px solid rgba(84, 230, 160, 0.35); border-radius: 16px;
  box-shadow: 0 0 18px -8px rgba(84, 230, 160, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.dh-compact .daily-head { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.dh-compact .daily-head h2 { margin: 0; font-size: 15px; letter-spacing: 0.03em; display: inline-flex;
  align-items: baseline; gap: 9px; white-space: nowrap; }
.dh-compact .daily-date { font-size: 11px; color: #56677d; }
.dh-compact .daily-cta { margin: 0; }
.dh-compact .daily-cta .hud-btn { min-width: 0; padding: 8px 14px; font-size: 12px; }
.dh-compact .operative { margin-left: auto; }