/* =====================================================================
   ސުވާލު — Maldivian traditional quiz UI
   Palette: lacquer (liyelaa jehun) red/black/gold, sea turquoise, palm green
   ===================================================================== */

/* Faruma (Thaana). Uses a system-installed Faruma if present; otherwise a
   local file at assets/fonts/Faruma.ttf; then graceful Thaana fallbacks. */
@font-face {
  font-family: 'FarumaLocal';
  src: url('../fonts/Faruma.ttf') format('truetype');
  font-display: swap;
}

:root {
  /* Lacquer work */
  --lac-red:      #a8121b;
  --lac-red-deep: #7d0d15;
  --lac-black:    #170f0b;
  --lac-black-2:  #241812;
  --gold:         #e7b73b;
  --gold-soft:    #f4d98a;
  --gold-deep:    #b6841c;

  /* Sea */
  --sea:          #0e7c7b;
  --sea-deep:     #063d47;
  --sea-light:    #17b3ab;
  --lagoon:       #23c9c0;

  /* Palm & sand */
  --palm:         #1f7a3d;
  --palm-deep:    #0f4d27;
  --coco:         #6b4423;
  --sand:         #f3e4c2;
  --sand-deep:    #e3cca0;

  --ink:          #fdf3dd;
  --panel:        #201512;

  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --font: 'FarumaLocal', 'Faruma', 'MV Faseyha', 'MV Boli', 'A_Faruma', 'Noto Sans Thaana', Tahoma, sans-serif;
}

* { box-sizing: border-box; }

html { direction: rtl; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(35,201,192,.25), transparent 60%),
    linear-gradient(180deg, var(--sea) 0%, var(--sea-deep) 55%, #042027 100%);
  overflow-x: hidden;
  position: relative;
}

/* Moving sea shimmer behind everything */
body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(65deg, rgba(255,255,255,.04) 0 2px, transparent 2px 34px);
  animation: seaDrift 24s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes seaDrift { to { background-position: 400px 0, -400px 0; } }

/* ---------- Full-width sticky top stack (nav bar + score strip) ---------- */
.topstack { position: sticky; top: 0; z-index: 40; width: 100%; }
.appbar {
  position: relative; width: 100%;
  background: linear-gradient(180deg, var(--lac-black-2), var(--lac-black));
  border-bottom: 2px solid var(--gold-deep);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .55), inset 0 -3px 0 rgba(231, 183, 59, .25);
  padding-top: env(safe-area-inset-top, 0px);
}
.appbar-inner {
  max-width: none; margin: 0 auto;
  padding: 8px clamp(12px, 2.2vw, 30px);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: nowrap;
}
.appbar .brand { flex-shrink: 0; }
.appbar .tools { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; flex-shrink: 0; }

/* ---------- Lacquer frame / body ---------- */
.app {
  position: relative; z-index: 2;
  max-width: 1320px; margin: 0 auto; padding: 16px clamp(12px, 3vw, 22px) 54px;
}
/* The board spans the full width: info panel hugs the left, control hugs the
   right, and the grid sits centred between them. */
.app--board { max-width: 100%; padding: 12px clamp(14px, 2.4vw, 30px) 16px; }

/* No underlines on links / buttons anywhere */
a { text-decoration: none; }
.btn, .tab-btn, .link { text-decoration: none; border-bottom: none; }

/* ---------- Tabs (admin) ---------- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 16px; }
.tab-btn {
  flex: 1 1 auto; min-width: 130px; cursor: pointer; border: none;
  font-family: var(--font); font-size: 16px; color: var(--sand);
  padding: 12px 16px; border-radius: 14px 14px 0 0;
  background: rgba(0, 0, 0, .32); box-shadow: inset 0 0 0 2px rgba(231, 183, 59, .28);
  transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.tab-btn:hover { transform: translateY(-2px); color: var(--gold-soft); }
.tab-btn.active {
  color: #fff; background: linear-gradient(180deg, var(--lac-red), var(--lac-red-deep));
  box-shadow: inset 0 0 0 2px var(--gold), 0 -4px 16px rgba(231, 183, 59, .35);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn .3s ease; }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 22px; margin-bottom: 18px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, var(--lac-black-2), var(--lac-black));
  border: 3px solid transparent;
  background-clip: padding-box;
  box-shadow: var(--shadow), inset 0 0 0 2px rgba(231,183,59,.25);
  position: relative;
}
.topbar::before {
  content: ''; position: absolute; inset: 0; border-radius: 18px; padding: 3px;
  background: linear-gradient(135deg, var(--gold), var(--lac-red), var(--gold-deep), var(--gold));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

.brand { display: flex; align-items: center; gap: 14px; }
.brand .seal {
  width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-soft), var(--lac-red) 55%, var(--lac-red-deep) 100%);
  box-shadow: inset 0 0 0 3px var(--gold), 0 4px 12px rgba(0,0,0,.5);
  display: grid; place-items: center;
  animation: sealSpin 18s linear infinite;
}
.brand .seal span { color: var(--lac-black); font-size: 26px; font-weight: 700; }
.brand .seal.has-img { background: none; animation: none; overflow: hidden; }
.brand .seal.has-img span { display: none; }
.brand .seal img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
@keyframes sealSpin { to { transform: rotate(360deg); } }

.brand h1 { margin: 0; font-size: 30px; color: var(--gold-soft); letter-spacing: .5px;
  text-shadow: 0 2px 0 var(--lac-red-deep), 0 0 18px rgba(231,183,59,.4); }
.brand .sub { margin: 0; font-size: 15px; color: var(--lagoon); opacity: .9; }

.topbar .tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Connection / sync pill */
.sync-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px; font-size: 14px;
  background: rgba(0,0,0,.35); border: 1px solid rgba(231,183,59,.4);
}
.sync-pill .dot { width: 10px; height: 10px; border-radius: 50%; background: #888; }
.sync-pill.online  .dot { background: #3ee08a; box-shadow: 0 0 10px #3ee08a; }
.sync-pill.offline .dot { background: #ff6b5e; box-shadow: 0 0 10px #ff6b5e; }
.sync-pill.saving  .dot { background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .3; } }

/* ---------- Buttons (lacquer) ---------- */
.btn {
  font-family: var(--font); cursor: pointer; border: none;
  padding: 11px 20px; border-radius: 12px; font-size: 16px; color: var(--ink);
  background: linear-gradient(180deg, var(--lac-red), var(--lac-red-deep));
  box-shadow: inset 0 0 0 2px rgba(231,183,59,.55), 0 6px 14px rgba(0,0,0,.4);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn.gold { background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color: var(--lac-black); }
.btn.sea  { background: linear-gradient(180deg, var(--sea-light), var(--sea)); }
.btn.ghost { background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 2px rgba(231,183,59,.4); }
.btn.sm { padding: 7px 13px; font-size: 14px; border-radius: 9px; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; filter: grayscale(.4); }

.link { color: var(--gold-soft); text-decoration: none; border-bottom: 1px dashed rgba(231,183,59,.5); }

/* =====================================================================
   GAME BOARD LAYOUT
   ===================================================================== */
/* [ control (right) ] [ grid (center) ] [ dynamic info (left) ] — RTL places col 1 at the right */
/* The centre track is sized to the grid's square side (--g), so the grid fills it
   exactly (no gaps beside it) and the two panels grow to fill the rest, sitting at
   the screen edges. --g is capped by viewport height so the whole grid stays on screen. */
.board-wrap {
  --g: min(calc(100dvh - 168px), calc(100vw - 520px));
  display: grid;
  grid-template-columns: minmax(220px, 1fr) var(--g) minmax(220px, 1fr);
  gap: 16px; align-items: start;
}
@media (max-width: 1240px) { .board-wrap { gap: 12px; --g: min(calc(100dvh - 168px), calc(100vw - 470px)); } }
@media (max-width: 1024px) {
  .board-wrap { grid-template-columns: 1fr; }
  .info-panel, .side { grid-column: auto; }
}

/* ---------- Scoreboard / control side panel ---------- */
.side, .info-panel {
  background: linear-gradient(180deg, rgba(23,15,11,.92), rgba(10,6,4,.92));
  border-radius: 16px; padding: 16px;
  box-shadow: var(--shadow), inset 0 0 0 2px rgba(231,183,59,.22);
}
.side h2, .panel h2, .info-panel h2 { margin: 4px 0 12px; color: var(--gold-soft); font-size: 20px;
  border-bottom: 2px solid rgba(231,183,59,.3); padding-bottom: 8px; }

/* ---------- Dynamic left info panel (mirrors the right-panel selection) ---------- */
.info-panel .placeholder { text-align: center; color: var(--sand-deep); opacity: .8; padding: 24px 8px; line-height: 1.9; }
.info-head {
  border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.25));
  box-shadow: inset 0 0 0 2px rgba(231,183,59,.3);
  border-right: 7px solid var(--tc, var(--gold));
}
.info-head .ih-team { font-size: 22px; color: var(--gold-soft); }
.info-head .ih-score { float: left; font-size: 30px; font-weight: 700; color: #fff; line-height: 1; }
.info-head .ih-sub { display: block; margin-top: 6px; font-size: 13px; color: var(--lagoon); }
.info-sec-title { font-size: 14px; color: var(--lagoon); margin: 14px 0 8px; border-bottom: 1px dashed rgba(231,183,59,.3); padding-bottom: 5px; }

/* Members wrap into columns automatically when there are many. */
.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.member-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-radius: 10px;
  background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(231,183,59,.18);
}
.member-row.sel { box-shadow: inset 0 0 0 2px var(--gold), 0 0 12px rgba(231,183,59,.3); background: rgba(231,183,59,.08); }
.member-row .mr-name { font-size: 15px; color: var(--sand); }
.member-row .mr-name .you { font-size: 11px; color: var(--lac-black); background: var(--gold); border-radius: 999px; padding: 1px 7px; margin-inline-start: 6px; }
.member-row .mr-stat { font-size: 13px; color: var(--lagoon); white-space: nowrap; }
.member-row .mr-stat b { color: #fff; font-size: 16px; }

.q-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.q-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px;
  font-size: 13px; box-shadow: inset 0 0 0 1px rgba(231,183,59,.3); background: rgba(0,0,0,.3);
}
.q-chip.ok  { border-inline-start: 4px solid var(--palm); }
.q-chip.no  { border-inline-start: 4px solid var(--lac-red); }
.q-chip .qn { color: var(--gold-soft); font-weight: 700; }
.tallies { display: flex; gap: 8px; margin-top: 10px; }
.tally { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 13px; box-shadow: inset 0 0 0 1px rgba(231,183,59,.3); }
.tally.ok { background: linear-gradient(180deg, rgba(31,122,61,.5), rgba(15,77,39,.55)); }
.tally.no { background: linear-gradient(180deg, rgba(168,18,27,.45), rgba(125,13,21,.55)); }
.tally .n { font-size: 16px; font-weight: 700; color: #fff; }
.tally .l { font-size: 11px; color: var(--sand-deep); }

.round-chip {
  display: inline-block; padding: 6px 14px; border-radius: 999px; margin-bottom: 12px;
  background: linear-gradient(180deg, var(--sea-light), var(--sea));
  color: #fff; font-size: 15px; box-shadow: inset 0 0 0 2px rgba(231,183,59,.4);
}

.pick-row { margin: 10px 0; }
.pick-row label { display: block; font-size: 14px; color: var(--lagoon); margin-bottom: 5px; }
select, input, textarea {
  font-family: var(--font); width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 2px solid rgba(231,183,59,.4); background: rgba(0,0,0,.35); color: var(--ink);
  font-size: 15px; outline: none;
}
select:focus, input:focus, textarea:focus { border-color: var(--gold); }
select option { background: var(--panel); }

/* team score cards */
.scores { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.team-card {
  border-radius: 12px; padding: 10px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.2));
  box-shadow: inset 0 0 0 2px rgba(231,183,59,.25);
  border-right: 6px solid var(--tc, var(--gold));
}
.team-card.finalist { box-shadow: inset 0 0 0 2px var(--gold), 0 0 16px rgba(231,183,59,.35); }
.team-card .t-top { display: flex; justify-content: space-between; align-items: baseline; }
.team-card .t-name { font-size: 17px; color: var(--gold-soft); }
.team-card .t-score { font-size: 24px; color: #fff; font-weight: 700; }
.team-card .t-members { margin-top: 6px; font-size: 13px; color: var(--sand-deep); line-height: 1.7; }
.team-card .t-members .m { display: inline-flex; gap: 4px; margin-inline-start: 8px; }
.team-card .t-members .m b { color: var(--lagoon); }
.badge { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: var(--gold); color: var(--lac-black); margin-inline-start: 6px; }

/* event log feed */
.feed { margin-top: 14px; max-height: 220px; overflow: auto; }
.feed .row { font-size: 13px; padding: 6px 8px; border-radius: 8px; margin-bottom: 5px;
  background: rgba(255,255,255,.04); }
.feed .row.correct { border-inline-start: 4px solid var(--palm); }
.feed .row.wrong { border-inline-start: 4px solid var(--lac-red); }

/* =====================================================================
   THE 100-MEDALLION GRID (cowrie / lacquer discs floating on the lagoon)
   ===================================================================== */
.grid-stage { position: relative; }
/* Title hidden so the grid's top border lines up with the panel tops. */
.grid-title { display: none; }

/* Square 10x10 board, sized to the SMALLER of (space left beside the panels) and
   (viewport height minus the sticky nav + score strip + title), so it is as large
   as possible while staying fully on screen. Centred by the auto grid track. */
.grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  gap: clamp(4px, 0.9vmin, 13px);
  padding: clamp(7px, 1.1vmin, 16px);
  width: var(--g);                      /* == centre track: no gaps beside the grid */
  height: var(--g);                     /* square -> circular medallions */
  margin-inline: auto;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 0, var(--grid-glow, rgba(35,201,192,.18)), transparent 60%),
    linear-gradient(180deg, var(--grid-a, rgba(6,61,71,.6)), var(--grid-b, rgba(4,32,39,.6)));
  box-shadow: inset 0 0 0 3px rgba(231,183,59,.25), var(--shadow);
}
/* Stacked layout: revert to a square that fills the width. */
@media (max-width: 1024px) { .grid { height: auto; aspect-ratio: 1 / 1; width: min(96vw, calc(100dvh - 150px)); } }

.cell {
  position: relative; border: none; cursor: pointer; min-width: 0; padding: 0;
  border-radius: 50%; font-family: var(--font); color: var(--gold-soft);
  font-size: clamp(9px, 1.9vmin, 24px); font-weight: 700;
  background:
    radial-gradient(circle at 34% 28%, var(--gold-soft) 0 6%, rgba(231,183,59,.15) 7%, transparent 30%),
    radial-gradient(circle at 50% 50%, var(--lac-red) 0 54%, var(--lac-red-deep) 55% 100%);
  box-shadow: inset 0 0 0 2px var(--gold-deep), inset 0 -4px 10px rgba(0,0,0,.32), 0 4px 9px rgba(0,0,0,.38);
  display: grid; place-items: center;
  transition: transform .18s ease, box-shadow .25s ease, filter .25s ease;
  animation: floatDisc 4.5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.045s);
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
/* gold shimmer sweep across each disc */
.cell::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,246,214,.45) 50%, transparent 60%);
  background-size: 250% 250%; background-position: 150% 0;
  animation: shimmer 5s ease-in-out infinite; animation-delay: calc(var(--i,0) * 0.08s);
  pointer-events: none; mix-blend-mode: screen;
}
.cell:hover { transform: translateY(-4px) scale(1.06); filter: brightness(1.12);
  box-shadow: inset 0 0 0 3px var(--gold), 0 0 22px rgba(231,183,59,.6), 0 10px 18px rgba(0,0,0,.5); z-index: 3; }

@keyframes floatDisc {
  0%,100% { transform: translateY(0) rotate(-1.5deg); }
  50%     { transform: translateY(-7px) rotate(1.5deg); }
}
@keyframes shimmer { 0% { background-position: 150% 0; } 55%,100% { background-position: -80% 0; } }

/* alternating lacquer tone for a woven-mat rhythm */
.cell.alt {
  background:
    radial-gradient(circle at 34% 28%, var(--gold-soft) 0 6%, rgba(231,183,59,.12) 7%, transparent 30%),
    radial-gradient(circle at 50% 50%, var(--lac-black-2) 0 54%, var(--lac-black) 55% 100%);
}

/* answered cell -> vanishes, leaving an empty carved socket */
.cell.answered {
  cursor: default; pointer-events: none;
  animation: dissolve .7s forwards;
}
@keyframes dissolve {
  to { transform: scale(.2) rotate(90deg); opacity: 0; }
}
.cell.empty {
  background: radial-gradient(circle at 50% 45%, rgba(0,0,0,.45), rgba(0,0,0,.15));
  box-shadow: inset 0 4px 10px rgba(0,0,0,.6), inset 0 0 0 2px rgba(231,183,59,.12);
  animation: none; color: transparent; cursor: default; pointer-events: none;
}
.cell.empty::after { display: none; }

/* a cell with no question assigned (blank slot) */
.cell.void { opacity: .28; filter: grayscale(.6); cursor: not-allowed; animation-duration: 7s; }

/* highlight the currently open cell */
.cell.active-open { box-shadow: inset 0 0 0 3px var(--gold), 0 0 30px rgba(231,183,59,.8); }

/* =====================================================================
   HOURGLASS TIMER (top-right, appears with question)
   ===================================================================== */
.hourglass-wrap {
  position: fixed; top: 18px; left: 22px;   /* rtl: visually top-right for reader; see note */
  z-index: 60; display: none; flex-direction: column; align-items: center; gap: 6px;
}
/* keep it visually at the top-right of the viewport regardless of RTL */
html[dir="rtl"] .hourglass-wrap { left: auto; right: 22px; }
.hourglass-wrap.show { display: flex; animation: hgIn .5s ease; }
.hourglass-wrap.hide { animation: hgOut .4s ease forwards; }
@keyframes hgIn { from { transform: translateY(-30px) scale(.7); opacity: 0; } }
@keyframes hgOut { to { transform: translateY(-30px) scale(.7); opacity: 0; } }

.hourglass {
  width: 92px; height: 126px; position: relative;
  padding: 8px; border-radius: 14px;
  background: linear-gradient(180deg, var(--lac-black-2), var(--lac-black));
  box-shadow: inset 0 0 0 2px var(--gold), var(--shadow);
}
/* wooden caps */
.hourglass .cap { position: absolute; left: 10px; right: 10px; height: 10px; border-radius: 4px;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep)); }
.hourglass .cap.top { top: 6px; } .hourglass .cap.bot { bottom: 6px; }

.glass { position: absolute; top: 16px; bottom: 16px; left: 14px; right: 14px; }
.bulb { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden;
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 2px rgba(231,183,59,.4); }
.bulb.top { top: 0; border-radius: 40px 40px 6px 6px; clip-path: polygon(0 0,100% 0,58% 100%,42% 100%); }
.bulb.bot { bottom: 0; border-radius: 6px 6px 40px 40px; clip-path: polygon(42% 0,58% 0,100% 100%,0 100%); }

/* sand fills */
.sand-top { position: absolute; left: 0; right: 0; top: 0; background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  height: 100%; transform-origin: top; transition: transform .5s linear; }
.sand-bot { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, var(--gold-deep), var(--gold));
  height: 0%; transition: height .5s linear; }
/* the trickling stream */
.hourglass .stream { position: absolute; left: 50%; top: 40px; bottom: 40px; width: 3px; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--gold-soft), transparent); animation: sandFall .5s linear infinite; }
@keyframes sandFall { from { background-position: 0 0; } to { background-position: 0 8px; } }

.timer-num { font-size: 20px; color: var(--gold-soft); font-weight: 700; text-shadow: 0 0 10px rgba(231,183,59,.5); }

/* completion glow */
.hourglass.done { animation: hgGlow 1.4s ease-in-out infinite; }
@keyframes hgGlow {
  0%,100% { box-shadow: inset 0 0 0 2px var(--gold), 0 0 12px rgba(231,183,59,.5); }
  50%     { box-shadow: inset 0 0 0 3px var(--gold-soft), 0 0 42px rgba(231,183,59,1), 0 0 70px rgba(231,183,59,.7); }
}

/* =====================================================================
   QUESTION PANEL (carved lacquer plaque)
   ===================================================================== */
.overlay {
  position: fixed; inset: 0; z-index: 50; display: none;
  background: radial-gradient(circle at 50% 40%, rgba(4,32,39,.7), rgba(0,0,0,.85));
  backdrop-filter: blur(3px);
  align-items: center; justify-content: center; padding: 24px;
}
.overlay.show { display: flex; animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity: 0; } }

.plaque {
  position: relative; width: min(760px, 94vw); max-height: 86vh; overflow: auto;
  border-radius: 22px; padding: 30px 34px 26px;
  background:
    radial-gradient(120% 100% at 50% 0, rgba(255,255,255,.08), transparent 55%),
    linear-gradient(180deg, var(--lac-red), var(--lac-red-deep));
  box-shadow: 0 0 0 3px var(--lac-black), 0 0 0 6px var(--gold-deep), var(--shadow);
  animation: plaqueIn .5s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes plaqueIn { from { transform: translateY(40px) scale(.85); opacity: 0; } }
/* carved gold corner motifs */
.plaque::before, .plaque::after {
  content: '❁'; position: absolute; color: var(--gold-soft); font-size: 26px; opacity: .8;
}
.plaque::before { top: 12px; right: 16px; } .plaque::after { bottom: 10px; left: 16px; }

.plaque .q-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  color: var(--gold-soft); font-size: 15px; margin-bottom: 14px; }
.plaque .q-no {
  min-width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, var(--gold-soft), var(--gold-deep));
  color: var(--lac-black); font-weight: 700; font-size: 20px; box-shadow: 0 3px 8px rgba(0,0,0,.5);
}
.plaque .who { font-size: 15px; color: var(--sand); }
.plaque .who b { color: #fff; }

.q-text { font-size: clamp(22px, 3.4vw, 34px); line-height: 1.7; color: #fff; margin: 8px 0 18px;
  text-shadow: 0 2px 0 rgba(0,0,0,.35); }

.answer-box {
  margin: 14px 0; padding: 16px 18px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(15,77,39,.6), rgba(6,40,20,.8));
  box-shadow: inset 0 0 0 2px rgba(231,183,59,.4);
  font-size: clamp(18px, 2.6vw, 26px); color: var(--gold-soft); display: none;
}
.answer-box.show { display: block; animation: fadeIn .3s ease; }
.answer-box .lbl { font-size: 14px; color: var(--lagoon); display: block; margin-bottom: 6px; }

/* judge action buttons */
.judge {
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 18px;
}
.judge .big {
  flex: 1; min-width: 150px; padding: 18px 20px; font-size: 22px; border-radius: 16px;
  position: relative; overflow: hidden;
}
.btn-correct { background: linear-gradient(180deg, #2fae5b, var(--palm-deep));
  box-shadow: inset 0 0 0 3px var(--gold), 0 8px 18px rgba(0,0,0,.45); }
.btn-wrong  { background: linear-gradient(180deg, #c9313a, var(--lac-red-deep));
  box-shadow: inset 0 0 0 3px var(--gold), 0 8px 18px rgba(0,0,0,.45); }
.judge .big:hover { transform: translateY(-3px) scale(1.02); }
.judge .big .ic { font-size: 26px; margin-inline-end: 8px; }

.reveal-btn { display: block; margin: 6px auto 0; }

.hint { text-align: center; font-size: 13px; color: var(--sand-deep); margin-top: 10px; opacity: .85; }

/* =====================================================================
   RESULTS / WINNER screen
   ===================================================================== */
.results {
  text-align: center; padding: 20px;
}
.crown { font-size: 60px; animation: floatDisc 3s ease-in-out infinite; }
.winner-name { font-size: 40px; color: var(--gold-soft); text-shadow: 0 0 24px rgba(231,183,59,.6); margin: 6px 0; }
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 14px; margin: 24px 0; }
.podium .step { border-radius: 12px 12px 0 0; padding: 14px 16px; min-width: 120px;
  background: linear-gradient(180deg, var(--lac-red), var(--lac-red-deep));
  box-shadow: inset 0 0 0 2px var(--gold); }
.podium .step.p1 { height: 190px; background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color: var(--lac-black); }
.podium .step.p2 { height: 150px; }
.podium .step.p3 { height: 120px; }
.podium .rank { font-size: 30px; font-weight: 700; }
.podium .nm { font-size: 17px; margin-top: 6px; }
.podium .sc { font-size: 14px; opacity: .9; }

.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; text-align: start; }
@media (max-width: 620px){ .result-grid { grid-template-columns: 1fr; } }
.result-card { background: rgba(0,0,0,.35); border-radius: 12px; padding: 14px 16px;
  box-shadow: inset 0 0 0 2px rgba(231,183,59,.3); }
.result-card h3 { margin: 0 0 8px; color: var(--lagoon); font-size: 16px; }
.result-card .v { font-size: 20px; color: #fff; }

/* confetti-ish floating lacquer flakes */
.flakes span { position: fixed; top: -20px; font-size: 18px; color: var(--gold); z-index: 70;
  animation: fall linear infinite; pointer-events: none; }
@keyframes fall { to { transform: translateY(105vh) rotate(360deg); opacity: .2; } }

/* =====================================================================
   ADMIN
   ===================================================================== */
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px){ .admin-grid { grid-template-columns: 1fr; } }
.panel { background: linear-gradient(180deg, rgba(23,15,11,.94), rgba(10,6,4,.94));
  border-radius: 16px; padding: 18px; box-shadow: var(--shadow), inset 0 0 0 2px rgba(231,183,59,.22); }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 14px; color: var(--lagoon); margin-bottom: 5px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.list { margin-top: 14px; }
.list-item { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 10px; margin-bottom: 8px;
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(231,183,59,.2); }
.list-item .qtxt { font-size: 15px; }
.list-item .qtxt small { color: var(--lagoon); }
.pos-pill { min-width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, var(--gold-soft), var(--gold-deep)); color: var(--lac-black);
  font-weight: 700; }
.member-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: rgba(35,201,192,.15); box-shadow: inset 0 0 0 1px rgba(231,183,59,.3); margin: 3px; font-size: 14px; }
.member-chip .x { cursor: pointer; color: var(--lac-red); font-weight: 700; }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--lac-black); color: var(--ink); padding: 12px 22px; border-radius: 12px;
  box-shadow: var(--shadow), inset 0 0 0 2px var(--gold); z-index: 200; opacity: 0; transition: opacity .3s, transform .3s; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-6px); }
.toast.err { box-shadow: var(--shadow), inset 0 0 0 2px var(--lac-red); }

.empty-note { text-align: center; color: var(--sand-deep); padding: 22px; opacity: .8; }
.divider { border: none; border-top: 1px dashed rgba(231,183,59,.3); margin: 16px 0; }

/* =====================================================================
   COLOUR THEMES — set on <html data-theme="…">. Default "lacquer" = base :root.
   Each keeps gold as the traditional accent and re-tints medallion + sea.
   ===================================================================== */
:root[data-theme="sea"] {
  --lac-red: #15607f; --lac-red-deep: #0c3d54;
  --sea: #0a6b74; --sea-deep: #04333a; --sea-light: #17b3ab; --lagoon: #29d3c9;
}
:root[data-theme="palm"] {
  --lac-red: #2f8a49; --lac-red-deep: #14572c;
  --sea: #0e6b5e; --sea-deep: #05372f; --sea-light: #1fb98f; --lagoon: #46d6a6;
}
:root[data-theme="royal"] {
  --lac-red: #6a2e93; --lac-red-deep: #431c64;
  --sea: #281c50; --sea-deep: #120c2a; --sea-light: #7d5cc0; --lagoon: #b79bff;
}
:root[data-theme="sunset"] {
  --lac-red: #cf5a1e; --lac-red-deep: #8c380f;
  --sea: #5a2946; --sea-deep: #29102e; --sea-light: #e0894b; --lagoon: #f3b06b;
}
:root[data-theme="night"] {
  --lac-red: #3a4a5f; --lac-red-deep: #223042; --lac-black: #0a1119; --lac-black-2: #111c28;
  --sea: #102433; --sea-deep: #060f19; --sea-light: #3f7f93; --lagoon: #6fb7c9;
}

/* ---- Lighter themes (light body + grid, dark cards keep text legible) ---- */
:root[data-theme="pearl"] {
  --sea: #efe4c9; --sea-deep: #dcc79a; --sea-light: #c79a3f; --lagoon: #a87a1c;
  --grid-a: rgba(245,232,205,.55); --grid-b: rgba(222,202,163,.6); --grid-glow: rgba(199,154,63,.2);
  --lac-red: #9c3b1e; --lac-red-deep: #6e2712;
}
:root[data-theme="sky"] {
  --sea: #d3e9f6; --sea-deep: #a9d0ea; --sea-light: #4f93c9; --lagoon: #2f6ea0;
  --grid-a: rgba(200,228,246,.55); --grid-b: rgba(160,202,232,.6); --grid-glow: rgba(79,147,201,.22);
  --lac-red: #1f6192; --lac-red-deep: #123f60;
}
:root[data-theme="mint"] {
  --sea: #d6f0e2; --sea-deep: #a9dcc3; --sea-light: #2fa579; --lagoon: #1e7d5a;
  --grid-a: rgba(206,238,222,.55); --grid-b: rgba(160,214,188,.6); --grid-glow: rgba(47,165,121,.22);
  --lac-red: #2f7d4d; --lac-red-deep: #1c5433;
}
:root[data-theme="rose"] {
  --sea: #f6dfe6; --sea-deep: #e6b9c8; --sea-light: #c65b7e; --lagoon: #a03a5c;
  --grid-a: rgba(246,222,230,.55); --grid-b: rgba(230,185,200,.6); --grid-glow: rgba(198,91,126,.22);
  --lac-red: #a83a5b; --lac-red-deep: #7a2740;
}
:root[data-theme="lavender"] {
  --sea: #e7ddf3; --sea-deep: #cabbe4; --sea-light: #7d5cc0; --lagoon: #5e3f93;
  --grid-a: rgba(231,221,243,.55); --grid-b: rgba(202,187,228,.6); --grid-glow: rgba(125,92,192,.22);
  --lac-red: #6a3e93; --lac-red-deep: #472a63;
}
:root[data-theme="slate"] {
  --sea: #cfd6dd; --sea-deep: #a7b2bd; --sea-light: #5a6b7d; --lagoon: #3f5060;
  --grid-a: rgba(207,214,221,.55); --grid-b: rgba(167,178,189,.6); --grid-glow: rgba(90,107,125,.2);
  --lac-red: #46586b; --lac-red-deep: #2b3947;
}

/* ---- Vivid / deep themes ---- */
:root[data-theme="turquoise"] {
  --sea: #0e9aa0; --sea-deep: #075357; --sea-light: #35d0c6; --lagoon: #4fe0d4;
  --lac-red: #b3121a; --lac-red-deep: #7d0d15;
}
:root[data-theme="amber"] {
  --sea: #7a4a12; --sea-deep: #3d2408; --sea-light: #e0a03b; --lagoon: #f3c06b;
  --lac-red: #c8891b; --lac-red-deep: #8f5f10;
}
:root[data-theme="ruby"] {
  --sea: #5a1020; --sea-deep: #2c0610; --sea-light: #c8455f; --lagoon: #e07a90;
  --lac-red: #c31432; --lac-red-deep: #8a0e23;
}
:root[data-theme="ocean"] {
  --sea: #0a3d62; --sea-deep: #051f33; --sea-light: #3c8dbc; --lagoon: #5fb3d6;
  --lac-red: #12557e; --lac-red-deep: #0a3a58;
}

/* Admin: theme swatches + logo preview */
.theme-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.theme-swatch {
  cursor: pointer; border: none; border-radius: 12px; padding: 10px 8px 8px; width: 92px; text-align: center;
  background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 2px rgba(231, 183, 59, .25);
  font-family: var(--font); color: var(--sand); font-size: 13px; transition: transform .15s ease, box-shadow .2s ease;
}
.theme-swatch:hover { transform: translateY(-2px); }
.theme-swatch.active { box-shadow: inset 0 0 0 2px var(--gold), 0 0 14px rgba(231, 183, 59, .45); color: var(--gold-soft); }
.theme-swatch .sw { display: flex; gap: 4px; justify-content: center; margin-bottom: 7px; }
.theme-swatch .sw i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.logo-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.logo-preview {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  box-shadow: inset 0 0 0 2px var(--gold), 0 4px 10px rgba(0, 0, 0, .4); background: rgba(0, 0, 0, .35);
}

/* =====================================================================
   Turn flow: ordered team cards, member shuffle, tie-break, start overlay
   ===================================================================== */
.ctl-label { font-size: 13px; color: var(--lagoon); margin: 12px 0 6px; }
.team-cards { display: flex; flex-direction: column; gap: 8px; }
.team-pick {
  position: relative; display: flex; align-items: center; gap: 10px; cursor: pointer;
  border: none; text-align: start; width: 100%; font-family: var(--font);
  padding: 10px 12px; border-radius: 12px; color: var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.25));
  box-shadow: inset 0 0 0 2px rgba(231,183,59,.22);
  border-right: 6px solid var(--tc, var(--gold));
  transition: transform .15s ease, box-shadow .25s ease, filter .2s ease;
}
.team-pick:hover { transform: translateY(-2px); }
.team-pick .tp-order {
  min-width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, var(--gold-soft), var(--gold-deep));
  color: var(--lac-black); font-weight: 700; font-size: 16px;
}
.team-pick .tp-name { flex: 1; font-size: 16px; color: var(--gold-soft); }
.team-pick .tp-score { font-size: 20px; font-weight: 700; color: #fff; }
.team-pick .tp-rem { font-size: 12px; color: var(--sand-deep); }
.team-pick.current { box-shadow: inset 0 0 0 2px var(--gold); }
.team-pick.done { opacity: .5; filter: grayscale(.4); cursor: not-allowed; }
.team-pick.glow { animation: cardGlow 1.6s ease-in-out infinite; z-index: 1; }
@keyframes cardGlow {
  0%,100% { box-shadow: inset 0 0 0 2px var(--gold), 0 0 8px rgba(231,183,59,.4); }
  50%     { box-shadow: inset 0 0 0 2px var(--gold-soft), 0 0 26px rgba(231,183,59,.9), 0 0 46px rgba(231,183,59,.5); }
}

.member-area { margin-top: 4px; min-height: 52px; display: flex; flex-direction: column; gap: 8px; }
.ma-empty { font-size: 13px; color: var(--sand-deep); opacity: .85; padding: 12px; text-align: center;
  border-radius: 10px; background: rgba(0,0,0,.2); }
.ma-member { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-radius: 10px; background: rgba(231,183,59,.1); box-shadow: inset 0 0 0 2px var(--gold); }
.ma-member .ma-name { font-size: 18px; color: var(--gold-soft); }
.ma-member .ma-team { font-size: 13px; color: var(--lagoon); }
.ma-roll { text-align: center; font-size: 22px; padding: 12px; border-radius: 10px; color: var(--gold-soft);
  background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 2px rgba(231,183,59,.35); }
.ma-roll.landed { animation: pop .4s ease; box-shadow: inset 0 0 0 2px var(--gold), 0 0 24px rgba(231,183,59,.6); }
@keyframes pop { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

.tiebreak-box { border-radius: 12px; padding: 10px 12px; margin-bottom: 10px;
  background: linear-gradient(180deg, rgba(168,18,27,.4), rgba(125,13,21,.5));
  box-shadow: inset 0 0 0 2px var(--gold); }
.tiebreak-box .tb-title { font-size: 16px; color: var(--gold-soft); }
.tiebreak-box .tb-teams { font-size: 15px; color: #fff; margin-top: 3px; }
.tiebreak-box .tb-turn { font-size: 13px; color: var(--lagoon); margin-top: 3px; }

.start-plaque { text-align: center; width: min(560px, 94vw); }
.shuffle-display { font-size: clamp(30px, 6vw, 52px); font-weight: 700; color: #fff; margin: 12px 0;
  min-height: 60px; text-shadow: 0 0 20px rgba(231,183,59,.6); letter-spacing: 1px; }
.start-order { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 10px 0; }
.start-card { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.25));
  box-shadow: inset 0 0 0 2px rgba(231,183,59,.4); border-right: 5px solid var(--tc, var(--gold));
  font-size: 17px; color: var(--gold-soft); animation: pop .4s ease; }
.start-card .sc-order { min-width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, var(--gold-soft), var(--gold-deep)); color: var(--lac-black); font-weight: 700; }
.btn.big { padding: 14px 26px; font-size: 20px; }

/* Main background image (stretched full, dimmed for text contrast) */
.app-bg { position: fixed; inset: 0; z-index: 0; background-size: 100% 100%; background-position: center; display: none; }
.app-bg.on { display: block; }
.app-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,32,39,.7), rgba(3,18,24,.82)); }

/* Question-card background image (selected crop, dimmed under the text) */
.plaque.has-bg {
  background:
    linear-gradient(180deg, rgba(125,13,21,.72), rgba(90,8,14,.8)),
    var(--card-bg, none) center / cover no-repeat;
}

/* Admin image cropper */
.crop-view { position: relative; width: min(420px, 84vw); aspect-ratio: 16 / 9; margin: 12px auto;
  overflow: hidden; border-radius: 12px; box-shadow: inset 0 0 0 2px var(--gold); background: #000; cursor: grab; touch-action: none; }
.crop-view.dragging { cursor: grabbing; }
.crop-view img { position: absolute; top: 0; left: 0; user-select: none; pointer-events: none; max-width: none; }

/* Start / Next-turn button + manual-select-off state */
.next-turn-btn { width: 100%; margin: 4px 0 12px; box-shadow: inset 0 0 0 2px var(--gold), 0 0 18px rgba(231,183,59,.4); }
.team-cards.no-click .team-pick { cursor: default; }
.team-cards.no-click .team-pick:hover { transform: none; filter: none; }

/* Slot-roll reels (team + member shuffle) */
.reel { overflow: hidden; position: relative; }
.reel-strip { display: flex; flex-direction: column; will-change: transform; }
.reel-item { display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.reel-strip.rolling { animation: reelRoll var(--dur, 800ms) linear infinite; }
@keyframes reelRoll { to { transform: translateY(var(--roll, 0)); } }
.shuffle-display .reel-item { font-size: clamp(28px, 5.5vw, 48px); font-weight: 700; color: #fff; text-shadow: 0 0 20px rgba(231,183,59,.6); }
.member-area .reel { border-radius: 10px; background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 2px rgba(231,183,59,.35); }
.member-area .reel-item { font-size: 20px; font-weight: 700; color: var(--gold-soft); }

/* "Now answering" banner in the nav-bar centre */
.now-answering { flex: 1 1 auto; text-align: center; min-width: 0; overflow: hidden; }
.now-answering[hidden] { display: none !important; }
.na-inner { display: inline-flex; align-items: center; gap: 14px; padding: 7px 22px; border-radius: 999px; max-width: 100%; overflow: hidden; white-space: nowrap;
  background: linear-gradient(180deg, rgba(231,183,59,.16), rgba(0,0,0,.25));
  box-shadow: inset 0 0 0 2px var(--gold), 0 0 18px rgba(231,183,59,.3); animation: pop .4s ease; }
.na-inner .na-lbl { font-size: 12px; color: var(--lagoon); }
.na-inner .na-member { font-size: clamp(18px, 2.1vw, 26px); font-weight: 700; color: var(--gold-soft); text-shadow: 0 0 12px rgba(231,183,59,.5); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.na-inner .na-team { font-size: 14px; color: #fff; padding: 2px 11px; border-radius: 999px; background: var(--nc, rgba(255,255,255,.14)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); flex-shrink: 0; }
@media (max-width: 640px){ .now-answering { display: none; } }  /* keep the nav one row on small screens */

/* Horizontal team scoreboard strip (team totals only) below the nav bar */
.scorebar { width: 100%; position: relative; z-index: 3;
  background: linear-gradient(180deg, rgba(23,15,11,.94), rgba(10,6,4,.86));
  border-bottom: 2px solid var(--gold-deep); box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.sb-inner { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap;
  padding: 7px clamp(12px, 2.4vw, 26px); }
.score-chip { display: inline-flex; align-items: center; gap: 12px; border-radius: 999px; padding: 5px 6px 5px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.25));
  box-shadow: inset 0 0 0 2px rgba(231,183,59,.24); border-right: 5px solid var(--tc, var(--gold)); }
.score-chip.fin { box-shadow: inset 0 0 0 2px var(--gold), 0 0 14px rgba(231,183,59,.35); }
.score-chip .sc-name { font-size: 16px; color: var(--gold-soft); white-space: nowrap; }
.score-chip .sc-pts { min-width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, var(--gold-soft), var(--gold-deep)); color: var(--lac-black); font-weight: 700; font-size: 18px; }
.sb-empty { padding: 8px; text-align: center; color: var(--sand-deep); font-size: 13px; }

.labels-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }

.ma-member .ma-left { font-size: 13px; color: var(--lagoon); font-weight: 400; }

/* Pagination + inline-editable names */
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
.pager .pg-info { font-size: 15px; color: var(--gold-soft); min-width: 70px; text-align: center; }
.edit-name { cursor: text; border-bottom: 1px dashed transparent; }
.edit-name:hover { border-bottom-color: rgba(231,183,59,.6); }