/* ============================================================
   ذَهين — Dhaheen categories game
   Lite design: flat surfaces, hairline borders, minimal shadow.
   Palette: warm cream / off-white + deep green accent.
   ============================================================ */

:root{
  /* Night palette, tuned to the rendered icon art: deep navy ground,
     indigo panels, violet accents, gold highlight. The ramp keeps its old
     LIGHTNESS ladder (900 deepest -> 200 lightest) so every existing
     `var(--green-*)` still means the same thing, only the hue moved. */
  --bg:#070B1E;         /* deep navy page */
  --bg-2:#0B1132;       /* bars (topbar / setup / score) */
  --surface:#141B3F;    /* cards */
  --surface-2:#1D2657;  /* hovered / selected surface */
  --line:#2E3878;       /* indigo hairline */
  --line-soft:#232C61;

  /* indigo/violet ramp — 300/400 = accent text on dark, 500/600 = fills */
  --green-900:#0D1236;
  --green-800:#161E52;
  --green-700:#222D78;
  --green-600:#3B4BC4;  /* primary button bg */
  --green-500:#5163DE;
  --green-400:#8E9CFF;  /* accent text */
  --green-300:#AEB8FF;  /* accent text, brightest */
  --green-200:#CDD4FF;  /* light tint */

  --ink:#EDF0FF;        /* near-white text */
  --ink-soft:#A9B3DD;
  --ink-dim:#7580AE;

  --ok:#3FBF6A;
  --warn:#F0A93C;       /* amber for the timer warning */

  --radius:14px;
  /* deeper, cooler shadows so cards lift off the navy ground */
  --shadow:0 1px 2px rgba(0,0,0,.34), 0 6px 18px rgba(0,0,0,.40);
  --shadow-lg:0 2px 6px rgba(0,0,0,.36), 0 16px 40px rgba(0,0,0,.50);
  --font:"Tajawal","Dubai","Segoe UI",Tahoma,"Noto Naskh Arabic",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
/* stop mobile engines from auto-inflating text and breaking the type scale */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{
  margin:0;font-family:var(--font);
  background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  /* faint warm wash so the cream page has some depth behind the cards */
  background-image:
    radial-gradient(900px 520px at 12% -8%, rgba(31,163,74,.07), transparent 62%),
    radial-gradient(760px 460px at 92% 4%, rgba(212,168,67,.10), transparent 60%);
  background-attachment:fixed;
}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;}
input{font-family:inherit;}
h1,h2,h3,h4,p{margin:0;}

::selection{background:var(--green-600);color:#fff;}

/* keyboard users get a visible ring; mouse users never see it */
:focus-visible{outline:3px solid var(--green-500);outline-offset:2px;border-radius:6px;}

/* honour the OS "reduce motion" setting — no transforms, no sliding */
/* Motion is gated by html[data-motion], which JS seeds from the OS preference.
   Because Windows' "show animations" switch turns the whole site static, the
   player can override it from the toggle in the hero. */
html[data-motion="off"]{scroll-behavior:auto;}
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after{
  animation-duration:.01ms !important;animation-iteration-count:1 !important;
  transition-duration:.01ms !important;scroll-behavior:auto !important;
}
html[data-motion="off"] .cat-card:hover,
html[data-motion="off"] .vs-card:hover{transform:none;}

/* ---------- chrome ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 18px;
  background:var(--bg-2);
  border-bottom:1px solid var(--line);
  color:var(--ink);
}
.topbar .brand{
  position:absolute;left:0;right:0;margin:auto;width:max-content;pointer-events:none;
  font-size:24px;font-weight:800;letter-spacing:1px;color:var(--ink);
}
.topbar .brand b{color:var(--green-400);font-weight:800;}
.topbar .side{display:flex;align-items:center;gap:8px;z-index:1;}

.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:999px;
  border:1px solid var(--line);background:transparent;
  color:var(--ink-soft);font-weight:700;font-size:14px;transition:.15s;
}
.pill:hover{border-color:var(--green-600);color:var(--ink);}
.pill.solid{background:var(--green-600);border-color:var(--green-600);color:#fff;}
.pill.solid:hover{background:var(--green-500);}
.icon-btn{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--ink-soft);font-size:18px;line-height:1;transition:.15s;
}
.icon-btn:hover{border-color:var(--green-600);color:var(--green-300);}

/* ============================================================
   SETUP
   ============================================================ */
.setup-wrap{max-width:1400px;margin:0 auto;padding:20px 20px 280px;}

.hero{text-align:center;padding:34px 16px 26px;}
.hero h1{
  font-size:clamp(38px,6vw,64px);font-weight:900;letter-spacing:2px;
  color:var(--ink);
}
.hero h1 b{color:var(--green-500);font-weight:900;}
.hero p{margin-top:10px;color:var(--ink-soft);font-size:15px;font-weight:600;letter-spacing:.3px;}

.search-row{display:flex;gap:10px;justify-content:center;margin:4px auto 20px;max-width:560px;}
.search-row input{
  flex:1;padding:12px 18px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-size:15px;font-weight:600;outline:none;transition:.15s;
}
.search-row input::placeholder{color:var(--ink-dim);}
.search-row input:focus{border-color:var(--green-600);}

.group-label{display:flex;align-items:center;gap:14px;margin:32px 0 14px;}
.group-label::before,.group-label::after{content:"";height:1px;flex:1;background:var(--line);}
.group-label span{
  padding:5px 18px;border-radius:999px;
  border:1px solid var(--line);color:var(--green-300);
  font-weight:800;font-size:13px;white-space:nowrap;
}

.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;}

.cat-card{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);
  aspect-ratio:3/4;display:flex;flex-direction:column;text-align:center;color:var(--ink);
  transition:border-color .15s, transform .15s, background .15s;
}
.cat-card:hover{
  border-color:var(--green-600);transform:translateY(-3px);
  background:var(--surface-2);box-shadow:var(--shadow-lg);
}
.cat-card.on{box-shadow:var(--shadow);}
.cat-card .cat-title{
  padding:10px 8px 8px;font-size:13.5px;font-weight:800;line-height:1.3;
  min-height:36px;display:grid;place-items:center;position:relative;z-index:3;
  color:var(--ink);
}
.cat-card .cat-art{flex:1;display:grid;place-items:center;padding:4px 10px 10px;min-height:0;}
/* Drawn icons and photo cards share one tile: same panel, radius and border,
   so a card reads the same whether its art is SVG or a photograph. */
.cat-card .cat-art svg,
.cat-card .cat-art img.cat-photo{
  width:100%;height:100%;display:block;
  border-radius:9px;border:1px solid var(--line-soft);
}
.cat-card .cat-art svg{background:linear-gradient(165deg,#FBF8EF 0%,#F0EADA 100%);padding:6px;}
.cat-card .cat-art img.cat-photo{object-fit:cover;}
.cat-card .cat-count{
  position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  color:var(--ink-dim);font-size:11px;font-weight:700;white-space:nowrap;
  transition:opacity .15s;z-index:2;
}
.cat-card .tag-special{
  position:absolute;top:8px;inset-inline-end:8px;z-index:2;
  border:1px solid var(--green-700);color:var(--green-300);
  padding:2px 8px;border-radius:999px;font-size:10px;font-weight:800;
  transition:opacity .15s;
}
.cat-card .cat-desc{
  position:absolute;inset:36px 0 0 0;z-index:2;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:14px 13px;background:var(--bg-2);
  color:var(--ink-soft);font-size:12.5px;font-weight:600;line-height:1.75;
  opacity:0;transition:opacity .15s;pointer-events:none;
}
.cat-card:hover .cat-desc{opacity:1;}
.cat-card:hover .cat-count,.cat-card:hover .tag-special{opacity:0;}

.cat-card.selected{border-color:var(--green-500);background:var(--surface-2);}
.cat-card.selected::after{
  content:"";position:absolute;inset:0;border-radius:var(--radius);
  border:1px solid var(--green-500);pointer-events:none;
}
.cat-card .check{
  position:absolute;top:8px;inset-inline-start:8px;z-index:4;
  width:24px;height:24px;border-radius:50%;
  background:var(--green-500);color:#fff;display:none;place-items:center;
  font-size:14px;font-weight:900;
}
.cat-card.selected .check{display:grid;}
.cat-card.dimmed{opacity:.34;}

/* setup footer — slim by default, names panel expands on demand */
.setup-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:60;
  background:var(--bg-2);border-top:1px solid var(--line);
  padding:10px 20px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -4px 16px rgba(60,52,20,.10);
}
.setup-bar .inner{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:9px;}

/* the always-visible "tap to edit names" strip */
.names-toggle{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 14px;border-radius:10px;
  border:1px dashed var(--green-600);background:var(--surface);
  color:var(--ink);font-weight:700;font-size:13.5px;text-align:start;
}
.names-toggle .nt-ic{font-size:15px;flex:0 0 auto;}
.names-toggle .nt-txt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-soft);}
.names-toggle .nt-txt b{color:var(--ink);}
.names-toggle .nt-hint{flex:0 0 auto;color:var(--green-600);font-weight:800;white-space:nowrap;}
.names-toggle .nt-chev{flex:0 0 auto;color:var(--green-600);font-weight:900;transition:transform .2s;}
.setup-bar.open .names-toggle{border-style:solid;}
.setup-bar.open .names-toggle .nt-chev{transform:rotate(180deg);}
.setup-bar.open .names-toggle .nt-hint{display:none;}

.sb-body{overflow:hidden;max-height:0;opacity:0;transition:max-height .24s ease, opacity .18s;}
.setup-bar.open .sb-body{max-height:260px;opacity:1;}
.sb-note{font-size:12.5px;font-weight:700;color:var(--ink-dim);margin:2px 2px 8px;}

.sb-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.setup-bar .counter{
  display:flex;align-items:center;gap:10px;
  font-weight:700;color:var(--ink-soft);font-size:14px;flex:0 0 auto;
}
.dots{display:flex;gap:5px;}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--line);transition:.18s;}
.dots i.on{background:var(--green-500);}

.fields{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px;margin-bottom:2px;}
.fields input{
  width:100%;padding:12px 14px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-size:14.5px;font-weight:700;outline:none;transition:.15s;
}
.fields input::placeholder{color:var(--ink-dim);}
.fields input:focus{border-color:var(--green-600);}
.dice-btn{
  padding:0 16px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);font-size:18px;line-height:1;transition:.15s;
  display:grid;place-items:center;
}
.dice-btn:hover{border-color:var(--green-600);}

.btn-primary{
  width:100%;padding:14px;border-radius:10px;
  background:var(--green-600);color:#fff;font-size:17px;font-weight:800;transition:.15s;
}
.sb-actions .btn-primary{flex:1;width:auto;min-width:220px;}
.btn-primary:hover:not(:disabled){background:var(--green-500);}
.btn-primary:disabled{background:var(--surface);color:var(--ink-dim);cursor:not-allowed;border:1px solid var(--line);}

.btn-ghost{
  padding:11px 22px;border-radius:10px;border:1px solid var(--line);
  font-weight:700;color:var(--ink-soft);background:transparent;transition:.15s;
}
.btn-ghost:hover{border-color:var(--green-600);color:var(--ink);}

/* ============================================================
   BOARD
   ============================================================ */
.board-screen{min-height:100vh;display:flex;flex-direction:column;background:var(--bg);}
.board-body{flex:1;padding:20px 20px 92px;max-width:1500px;margin:0 auto;width:100%;}
.board-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 20px;}
@media(max-width:1050px){.board-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:680px){.board-grid{grid-template-columns:1fr;}}

.cat-block{display:flex;flex-direction:column;align-items:center;}
.cat-block .head{
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-bottom:0;
  padding:7px 24px;border-radius:10px 10px 0 0;
  font-weight:800;font-size:14px;text-align:center;min-width:56%;position:relative;z-index:2;
}
.cat-block .row{display:grid;grid-template-columns:1fr 112px 1fr;gap:8px;align-items:stretch;width:100%;}
.cat-block .thumb{
  border-radius:0 0 10px 10px;background:var(--surface);
  border:1px solid var(--line);border-top:0;
  overflow:hidden;display:grid;place-items:center;padding:8px;
}
.cat-block .thumb svg,
.cat-block .thumb img.cat-photo{width:100%;height:100%;display:block;border-radius:6px;}
.cat-block .thumb svg{background:linear-gradient(165deg,#FBF8EF 0%,#F0EADA 100%);}
.cat-block .thumb img.cat-photo{object-fit:cover;}
.cat-block .col{display:flex;flex-direction:column;gap:8px;justify-content:space-between;padding-top:6px;}

.cell{
  flex:1;min-height:44px;border-radius:10px;
  background:var(--surface);border:1px solid var(--line);
  color:var(--green-300);font-size:20px;font-weight:800;
  display:grid;place-items:center;transition:.14s;
}
.cell:hover:not(.used){border-color:var(--green-500);color:var(--green-800);background:var(--surface-2);}
.cell.used{background:transparent;border-color:var(--line-soft);color:var(--ink-dim);cursor:default;position:relative;}
.cell.used span{opacity:.25;}
.cell.used::after{content:"✓";position:absolute;font-size:13px;color:var(--ink-dim);}
.cell.d3{color:var(--green-500);}
.cell.d3.used{color:var(--ink-dim);}

/* scoreboard */
.scorebar{
  position:fixed;bottom:0;left:0;right:0;z-index:40;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;
  padding:10px 20px calc(10px + env(safe-area-inset-bottom));
  background:var(--bg-2);border-top:1px solid var(--line);color:var(--ink);
}
.team-chip{
  display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:999px;
  border:1px solid var(--line);font-weight:700;max-width:340px;
}
.team-chip.right{justify-self:end;flex-direction:row-reverse;}
.team-chip .nm{padding-inline:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px;color:var(--ink-soft);}
.team-chip .sc{
  min-width:52px;text-align:center;padding:3px 10px;border-radius:999px;
  background:var(--surface);color:var(--ink);font-size:16px;font-weight:800;
}
.team-chip.active{border-color:var(--green-500);}
.team-chip.active .nm{color:var(--ink);}
.team-chip.active .sc{background:var(--green-600);color:#fff;}
.team-chip .adj{
  width:24px;height:24px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;font-size:14px;font-weight:800;line-height:1;
  color:var(--ink-soft);transition:.14s;
}
.team-chip .adj:hover{border-color:var(--green-600);color:var(--green-300);}
.game-title-mid{font-weight:700;color:var(--ink-dim);text-align:center;font-size:13px;}

/* ============================================================
   QUESTION
   ============================================================ */
.q-screen{min-height:100vh;display:flex;flex-direction:column;background:var(--bg);}
.q-card{
  flex:1;margin:14px;border-radius:16px;
  border:1px solid var(--line);background:var(--bg-2);
  display:flex;flex-direction:column;padding:18px;position:relative;overflow:hidden;
}
.q-card.answer-mode{border-color:var(--green-600);}
.q-top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.badge{
  padding:8px 20px;border-radius:999px;
  border:1px solid var(--line);color:var(--ink-soft);font-weight:800;font-size:15px;
}
.badge.pts{min-width:74px;text-align:center;color:var(--green-300);border-color:var(--green-800);}

.timer{
  display:flex;align-items:center;gap:14px;
  background:var(--surface);border:1px solid var(--line);
  color:var(--ink);padding:7px 16px;border-radius:999px;
}
.timer .t{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;min-width:72px;text-align:center;letter-spacing:1px;}
.timer button{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--ink-soft);transition:.14s;}
.timer button:hover{color:var(--green-300);}
.timer.warn{border-color:var(--warn);color:var(--warn);animation:pulseWarn 1s infinite;}
.timer.done{border-color:var(--warn);background:var(--warn);color:#fff;}
@keyframes pulseWarn{0%,100%{opacity:1;}50%{opacity:.55;}}

.q-body{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;padding:18px 10px;text-align:center;min-height:0;
}
.q-text{font-size:clamp(21px,3.2vw,38px);font-weight:700;line-height:1.6;max-width:1100px;color:var(--ink);}
.q-sub{font-size:15px;font-weight:600;color:var(--ink-soft);}
.a-text{font-size:clamp(26px,4.2vw,48px);font-weight:900;color:var(--green-300);line-height:1.4;max-width:1100px;}
.a-note{font-size:16px;font-weight:600;color:var(--ink-soft);max-width:820px;line-height:1.8;}

.q-media{max-width:min(540px,72vw);width:100%;}
.q-media svg{width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--line);}

.q-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.btn-action{
  padding:14px 42px;border-radius:999px;background:var(--green-600);
  color:#fff;font-size:18px;font-weight:800;transition:.15s;
}
.btn-action:hover{background:var(--green-500);}
.btn-action.wide{padding-inline:56px;}
.btn-back{
  padding:14px 38px;border-radius:999px;
  border:1px solid var(--line);color:var(--ink-soft);font-size:17px;font-weight:800;transition:.15s;
}
.btn-back:hover{border-color:var(--green-600);color:var(--ink);}

/* who answered */
.who-grid{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;}
.who-btn{
  min-width:220px;padding:18px 32px;border-radius:999px;
  background:var(--green-600);color:#fff;font-size:21px;font-weight:800;transition:.15s;
}
.who-btn:hover{background:var(--green-500);}
.who-btn.none{background:transparent;border:1px solid var(--line);color:var(--ink-soft);}
.who-btn.none:hover{border-color:var(--green-600);color:var(--ink);}
.who-hint{font-size:14px;font-weight:600;color:var(--ink-soft);}

/* honeycomb */
.hive{display:flex;flex-direction:column;align-items:center;gap:2px;}
.hive .hrow{display:flex;gap:4px;}
.hive .hrow:nth-child(even){margin-inline-start:26px;}
.hex{
  width:50px;height:56px;display:grid;place-items:center;
  background:var(--surface);color:var(--ink-soft);
  font-size:21px;font-weight:800;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  transition:.18s;
}
.hex.lit{background:var(--green-600);color:#fff;transform:scale(1.12);}

/* charades */
.charade-wrap{display:flex;flex-wrap:wrap;gap:30px;align-items:center;justify-content:center;}
.qr-box{background:#fff;padding:12px;border-radius:12px;}
.qr-box svg{display:block;width:min(250px,50vw);height:auto;image-rendering:pixelated;}
.qr-cap{margin-top:8px;font-size:12.5px;font-weight:700;color:var(--ink-soft);text-align:center;line-height:1.7;}
.qr-cap b{color:var(--green-300);}
.peek{display:flex;flex-direction:column;align-items:center;gap:12px;}
.peek-btn{
  padding:24px 40px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line);
  color:var(--ink);font-size:18px;font-weight:800;
  user-select:none;-webkit-user-select:none;touch-action:none;min-width:270px;transition:.15s;
}
.peek-btn:hover{border-color:var(--green-600);}
.peek-btn:active{background:var(--surface-2);}
.peek-media{font-size:64px;line-height:1.1;display:block;margin-bottom:6px;}
.peek-word{font-size:clamp(26px,4.4vw,46px);font-weight:900;color:var(--green-300);display:block;}
.secret-note{
  font-size:13px;font-weight:700;color:var(--green-300);
  border:1px dashed var(--green-800);border-radius:10px;padding:8px 16px;
}
.charade-kind{
  font-size:13.5px;font-weight:700;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:999px;padding:6px 18px;
}

/* reversed word — reversed in JS, rendered with normal RTL shaping.
   Do NOT add direction:ltr here: it cancels the reversal out. */
.rev-word{
  font-size:clamp(32px,5.6vw,66px);font-weight:900;color:var(--green-300);letter-spacing:6px;
  background:var(--surface);padding:16px 36px;border-radius:14px;border:1px solid var(--line);
}

/* choices */
.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(820px,94%);}
@media(max-width:620px){.choices{grid-template-columns:1fr;}}
.choice{
  padding:15px 20px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  font-size:18px;font-weight:700;text-align:start;transition:.15s;
}
.choice:hover{border-color:var(--green-600);}
.choice .k{
  display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--line);color:var(--ink-soft);font-weight:800;margin-inline-end:12px;font-size:15px;
}
.choice.right{border-color:var(--ok);}
.choice.right .k{background:var(--ok);color:#fff;border-color:var(--ok);}
.choice.wrong{opacity:.32;}

.swatch{width:min(280px,58vw);aspect-ratio:1;border-radius:16px;border:1px solid var(--line);}

/* ---- كذبة من ثلاث (lie) ---- */
.lie-list{display:flex;flex-direction:column;gap:11px;width:min(760px,94%);}
.lie-item{
  display:flex;align-items:center;gap:13px;text-align:start;
  padding:15px 18px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  font-size:17px;font-weight:700;line-height:1.6;transition:.15s;
}
.lie-item:hover{border-color:var(--green-600);}
.lie-item .k{
  flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--line);color:var(--ink-soft);font-weight:800;font-size:15px;
}
.lie-item.is-true{border-color:var(--ok);background:#EFF7F0;}
.lie-item.is-true .k{background:var(--ok);color:#fff;border-color:var(--ok);}
.lie-item.is-lie{border-color:#C2410C;background:#FDF1E9;}
.lie-item.is-lie .k{background:#C2410C;color:#fff;border-color:#C2410C;}
.lie-item.is-lie::after{content:"كذب";margin-inline-start:auto;font-size:13px;font-weight:900;color:#C2410C;}

/* ---- أكبر ولا أصغر (compare) ---- */
.vs-wrap{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;width:100%;}
.vs-card{
  flex:1 1 240px;max-width:340px;min-height:120px;
  display:grid;place-items:center;padding:22px 18px;border-radius:16px;
  background:var(--surface);border:2px solid var(--line);color:var(--ink);
  font-size:clamp(19px,2.6vw,27px);font-weight:900;line-height:1.4;transition:.15s;
}
.vs-card:hover{border-color:var(--green-600);transform:translateY(-2px);}
.vs-card.right{border-color:var(--ok);background:#EFF7F0;color:var(--green-900);}
.vs-card.wrong{opacity:.4;}
.vs-mid{
  flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--green-600);color:#fff;font-weight:900;font-size:15px;
}

/* ---- رتّب صح (order) ---- */
.order-list{display:flex;flex-direction:column;gap:9px;width:min(620px,94%);}
.order-item{
  display:flex;align-items:center;gap:12px;
  padding:13px 18px;border-radius:11px;
  background:var(--surface);border:1px dashed var(--line);
  font-size:17px;font-weight:700;color:var(--ink);
}
.order-list.solved .order-item{border-style:solid;border-color:var(--green-600);background:#EFF7F0;}
.order-item .k{
  flex:none;display:grid;place-items:center;width:27px;height:27px;border-radius:50%;
  background:var(--green-600);color:#fff;font-weight:900;font-size:14px;
}

/* ---- خمن الصورة (rebus) ----------------------------------
   The answer lives in the layout, so the board is a plain
   left-to-right canvas and every modifier below is load-bearing:
   size, stacking, repetition and orientation all encode meaning. */
.rebus-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;}

.rb-board{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:6px 18px;width:min(880px,96%);min-height:150px;
  padding:26px 28px;border-radius:18px;
  background:
    linear-gradient(#FFFDF7,#FFFDF7) padding-box,
    repeating-linear-gradient(45deg,var(--line-soft) 0 8px,transparent 8px 16px) border-box;
  border:3px solid transparent;
  box-shadow:inset 0 2px 10px rgba(60,52,20,.06);
}

.rb-w{
  font-family:"Tajawal","Segoe UI",Arial,sans-serif;
  font-size:clamp(30px,5.4vw,58px);font-weight:900;letter-spacing:1px;
  color:var(--ink);line-height:1.12;text-align:center;white-space:pre-wrap;
}
.rb-tiny {font-size:clamp(11px,1.5vw,16px);letter-spacing:.5px;}
.rb-small{font-size:clamp(17px,2.4vw,25px);}
.rb-big  {font-size:clamp(46px,8vw,86px);}
.rb-huge {font-size:clamp(58px,11vw,120px);letter-spacing:3px;}
.rb-flip {transform:rotate(180deg);}
.rb-spread{letter-spacing:clamp(8px,2vw,22px);}
.rb-down {line-height:.98;font-size:clamp(24px,4vw,44px);}
.rb-faint{opacity:.32;}

/* a word sitting between two rules — "reading between the lines" */
.rb-ruled{
  border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);
  padding:10px 18px;
}

/* vertical stack: the top word is literally over the bottom one */
.rb-stack{display:flex;flex-direction:column;align-items:center;gap:6px;}
.rb-stack-ruled{border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);padding:10px 16px;}
.rb-rule{width:clamp(90px,16vw,190px);height:4px;background:var(--ink);border-radius:2px;}

/* pieces butted together so a digit inside a word reads as one word */
.rb-joined{display:flex;align-items:baseline;gap:0;}
.rb-emoji{font-size:clamp(40px,7vw,80px);line-height:1;}
.rb-op{font-size:clamp(26px,4vw,44px);font-weight:900;color:var(--ink-dim);}

/* compact version reused on the reveal screen */
.rb-scale-sm{margin-top:12px;width:100%;display:flex;justify-content:center;}
.rb-scale-sm .rb-board{min-height:0;padding:14px 16px;gap:4px 12px;width:auto;max-width:100%;}
.rb-scale-sm .rb-w{font-size:clamp(18px,3vw,30px);}
.rb-scale-sm .rb-tiny{font-size:10px;}
.rb-scale-sm .rb-small{font-size:14px;}
.rb-scale-sm .rb-big{font-size:clamp(26px,4.4vw,44px);}
.rb-scale-sm .rb-huge{font-size:clamp(32px,5.5vw,56px);}
.rb-scale-sm .rb-emoji{font-size:clamp(24px,4vw,40px);}
.rb-scale-sm .rb-down{font-size:16px;}
.rb-scale-sm .rb-rule{width:70px;height:3px;}

.rebus-footer{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;}
.rebus-tag{font-size:13px;font-weight:800;border-radius:999px;padding:6px 16px;border:1.5px solid;}
.rebus-tag--en{background:#EAF1FB;color:#1B4A82;border-color:#7FA8D8;}
.rebus-tag--ar{background:#EAF5EC;color:#1a5c28;border-color:var(--green-600);}
.rebus-hint{font-size:14px;color:var(--ink-soft);font-weight:600;}
.rebus-tip{font-size:13px;color:var(--ink-dim);font-weight:600;text-align:center;max-width:560px;line-height:1.7;}

/* ---- بوسترات ألعاب (poster) ---- */
.poster-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;}
.poster-frame{position:relative;width:min(260px,72vw);aspect-ratio:5/7;border-radius:14px;
  overflow:hidden;border:2px solid var(--line);box-shadow:0 6px 24px rgba(0,0,0,.35);}
.poster-frame svg{width:100%;height:100%;display:block;}
.poster-frame--sm{width:min(160px,44vw);}
.poster-placeholder{font-size:80px;display:flex;align-items:center;justify-content:center;height:100%;background:var(--surface);}

/* real poster photo + the blur patches that hide its printed title */
.poster-frame--photo{background:#0d0d0d;}
.poster-photo{width:100%;height:100%;object-fit:cover;display:block;}
.poster-mask{
  position:absolute;
  backdrop-filter:blur(15px) saturate(.5);
  -webkit-backdrop-filter:blur(15px) saturate(.5);
  background:rgba(20,20,20,.35);
  border-radius:5px;
}
/* browsers without backdrop-filter get an opaque patch instead, so the title
   is still completely unreadable rather than merely tinted */
@supports not (backdrop-filter: blur(2px)){
  .poster-mask{background:#141414;}
}
.poster-fallback{position:absolute;inset:0;}
.poster-fallback[hidden]{display:none;}
.poster-fallback svg{width:100%;height:100%;}
.poster-hint{font-size:13px;font-weight:700;color:var(--ink-soft);
  background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:6px 18px;}

/* ============================================================
   RESULTS
   ============================================================ */
.result-screen{
  min-height:100vh;display:grid;place-items:center;padding:30px 20px;
  background:var(--bg);color:var(--ink);text-align:center;position:relative;overflow:hidden;
}
.result-card{
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:18px;padding:38px 34px;max-width:720px;width:100%;z-index:2;
}
.result-card h2{font-size:clamp(26px,4.6vw,42px);font-weight:900;margin-bottom:6px;}
.result-card h2 b{color:var(--green-400);}
.crown{font-size:48px;line-height:1;}
.final-scores{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:26px 0 8px;}
.final-team{
  flex:1;min-width:180px;background:var(--surface);
  border-radius:14px;padding:20px 16px;border:1px solid var(--line);
}
.final-team.win{border-color:var(--green-500);}
.final-team .n{font-size:17px;font-weight:700;margin-bottom:8px;word-break:break-word;color:var(--ink-soft);}
.final-team .s{font-size:40px;font-weight:900;color:var(--green-400);}
.final-team.win .n{color:var(--ink);}
.result-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px;}
.result-actions button{padding:13px 28px;border-radius:999px;font-weight:800;font-size:15px;transition:.15s;}
.ra-1{background:var(--green-600);color:#fff;}
.ra-1:hover{background:var(--green-500);}
.ra-2{background:transparent;color:var(--ink-soft);border:1px solid var(--line);}
.ra-2:hover{border-color:var(--green-600);color:var(--ink);}

.confetti{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;}
.confetti i{position:absolute;top:-14px;width:7px;height:12px;opacity:.85;animation:fall linear forwards;}
@keyframes fall{to{transform:translateY(105vh) rotate(760deg);opacity:.1;}}

/* ============================================================
   MISC
   ============================================================ */
.toast{
  position:fixed;bottom:92px;left:50%;transform:translate(-50%,22px);
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  padding:11px 22px;border-radius:999px;font-weight:700;font-size:14px;
  opacity:0;pointer-events:none;transition:.22s;z-index:200;max-width:88vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0);}

.modal-back{
  position:fixed;inset:0;background:rgba(4,8,5,.80);
  display:grid;place-items:center;z-index:300;padding:20px;animation:fadeOnly .16s;
}
.modal{
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:16px;padding:28px;max-width:520px;width:100%;text-align:center;
}
.modal h3{font-size:21px;font-weight:800;margin-bottom:10px;}
.modal p{color:var(--ink-soft);font-weight:600;line-height:1.8;margin-bottom:20px;font-size:14.5px;}
.modal .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

.rules{text-align:start;font-size:14px;line-height:2.1;color:var(--ink-soft);font-weight:600;}
.rules b{color:var(--green-300);}
.rules ul{margin:6px 0;padding-inline-start:20px;}

.empty{text-align:center;padding:70px 20px;color:var(--ink-soft);font-weight:600;}

/* Screen-level containers must never animate `transform`: a transformed
   element becomes the containing block for its position:fixed children,
   which tears the scoreboard away from the viewport. */
.fade-in{animation:fadeOnly .2s ease-out;}
@keyframes fadeOnly{from{opacity:0;}to{opacity:1;}}
.rise-in{animation:fadeUp .26s cubic-bezier(.2,.8,.3,1);}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

@media(max-width:720px){
  .fields{grid-template-columns:1fr 1fr auto;gap:8px;}
  .fields #f-game{grid-column:1 / -1;}
  .dice-btn{padding:0 14px;font-size:17px;}
  .topbar .brand{font-size:19px;}
  .cat-grid{grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:10px;}
  .cat-card .cat-desc{font-size:11.5px;padding:10px;line-height:1.6;}
  .cat-block .row{grid-template-columns:1fr 88px 1fr;}
  .cell{font-size:17px;min-height:38px;}
  .q-card{margin:8px;padding:12px;}
  .btn-action,.btn-back{padding:12px 24px;font-size:15px;}
  .scorebar{grid-template-columns:1fr 1fr;gap:8px;}
  .game-title-mid{display:none;}
  .hex{width:38px;height:43px;font-size:16px;}
  .hive .hrow:nth-child(even){margin-inline-start:19px;}
  .qr-box svg{width:min(210px,60vw);}
  .peek-media{font-size:52px;}
}

/* ============================================================
   GAME FEEL — a tactile layer over the flat base.
   Stays inside the cream/green palette; the only extra hues are
   the amber and burnt-orange already used for the timer warning,
   here reused to give each point tier its own identity.
   ============================================================ */

:root{
  --tier1:#4FD98A;   /* 200 — mint       */
  --tier2:#F0C24A;   /* 400 — gold       */
  --tier3:#FF8A5C;   /* 600 — warm coral */
  --tier1-soft:#17361F;
  --tier2-soft:#3A2E12;
  --tier3-soft:#3A1F14;
}

/* ---- point cells read as pressable chips, coloured by tier ---- */
.cell{
  background:linear-gradient(180deg,#FFFDF7,#F4EFDF);
  border-width:1.5px;
  box-shadow:0 2px 0 var(--line-soft), 0 3px 9px rgba(60,52,20,.07);
  font-variant-numeric:tabular-nums;letter-spacing:.5px;
  transition:transform .12s, box-shadow .12s, border-color .12s, color .12s, background .12s;
}
.cell.d1{color:var(--tier1);}
.cell.d2{color:var(--tier2);}
.cell.d3{color:var(--tier3);}

.cell:hover:not(.used){transform:translateY(-2px);}
.cell.d1:hover:not(.used){border-color:var(--tier1);box-shadow:0 4px 0 var(--tier1-soft),0 9px 18px rgba(21,128,58,.17);}
.cell.d2:hover:not(.used){border-color:#C79A2E;box-shadow:0 4px 0 var(--tier2-soft),0 9px 18px rgba(154,100,16,.17);}
.cell.d3:hover:not(.used){border-color:var(--tier3);box-shadow:0 4px 0 var(--tier3-soft),0 9px 18px rgba(180,83,27,.17);}
/* press: the chip sinks onto the board */
.cell:active:not(.used){transform:translateY(1px);box-shadow:0 1px 0 var(--line-soft);}

.cell.used{
  background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(60,52,20,.045) 6px 12px);
  box-shadow:none;transform:none;
}

/* ---- toolbar and category banners get a little dimension ---- */
.topbar{
  background:linear-gradient(180deg,#F0E9D6,#E5DEC9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), 0 2px 12px rgba(60,52,20,.07);
}
.topbar .brand{text-shadow:0 1px 0 rgba(255,255,255,.7);}

.cat-block .head{
  /* This block overrides the plate to a dark gradient but used to leave
     `color` at the default dark --ink, so the category name sat almost
     invisible on it. */
  background:linear-gradient(180deg,var(--green-600),var(--green-800));
  color:#FFFFFF;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 2px 10px rgba(0,0,0,.32);
  letter-spacing:.3px;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}

/* ---- the points badge on a question reads as a token ---- */
.badge.pts{
  background:linear-gradient(180deg,#FFF6DC,#F0DFAE);
  border-color:#D8B45E;color:#7A5410;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 2px 6px rgba(122,84,16,.18);
  font-variant-numeric:tabular-nums;
}

/* ---- the reveal lands instead of just appearing ---- */
.a-text{animation:answerPop .34s cubic-bezier(.2,.9,.3,1.25) both;}
@keyframes answerPop{
  from{opacity:0;transform:scale(.94) translateY(6px);}
  to  {opacity:1;transform:none;}
}

/* ---- primary action gets a subtle raised edge ---- */
.btn-action{
  background:linear-gradient(180deg,var(--green-500),var(--green-700));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 3px 0 var(--green-900), 0 6px 14px rgba(8,61,27,.22);
  transition:transform .12s, box-shadow .12s, filter .12s;
}
.btn-action:hover{filter:brightness(1.06);}
.btn-action:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 1px 0 var(--green-900);}

/* ---- leading team is obvious at a glance ---- */
.team-chip.lead{position:relative;}
.team-chip.lead .sc{color:var(--green-300);}
.team-chip.lead::before{
  content:"👑";position:absolute;top:-11px;inset-inline-start:50%;
  transform:translateX(-50%);font-size:15px;line-height:1;pointer-events:none;
}

/* motion-sensitive users keep the colour work, lose the movement */
html[data-motion="off"] .cell:hover:not(.used),
html[data-motion="off"] .cell:active:not(.used),
html[data-motion="off"] .btn-action:active{transform:none;}
html[data-motion="off"] .a-text{animation:none;}

/* ============================================================
   FRONT-END REFRESH
   Livelier surfaces, a real countdown ring, and a little motion —
   all built from the existing cream / green / amber palette.
   ============================================================ */

/* paper grain: warmth and texture without introducing any colour */
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
#app{position:relative;z-index:2;}

/* ---- hero gets a wordmark flourish ---- */
.hero{padding:42px 16px 28px;}
.hero h1{font-size:clamp(42px,7vw,72px);}
.hero h1::after{
  content:"";display:block;width:96px;height:5px;margin:16px auto 0;border-radius:3px;
  background:linear-gradient(90deg,var(--green-600),#D4A843);
  box-shadow:0 1px 3px rgba(60,52,20,.2);
}

/* ---- group headers read as tabs on the page ---- */
.group-label span{
  background:var(--surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 1px 3px rgba(60,52,20,.07);
}

/* ---- categories deal themselves out on the first paint only ---- */
.cat-grid.deal .cat-card{
  animation:dealIn .38s cubic-bezier(.2,.8,.3,1) backwards;
  animation-delay:calc(var(--i,0) * 26ms);
}
@keyframes dealIn{
  from{opacity:0;transform:translateY(16px) scale(.96);}
  to  {opacity:1;transform:none;}
}
.cat-card{transition:border-color .15s, transform .15s, background .15s, box-shadow .15s;}
.cat-card.selected{
  border-color:var(--green-600);
  box-shadow:0 0 0 3px rgba(21,128,58,.15), var(--shadow);
}
.cat-card.selected .cat-title{color:var(--green-800);}

/* ---- the question card carries a soft spotlight ---- */
.q-card{
  background:
    radial-gradient(620px 260px at 14% -6%, rgba(31,163,74,.07), transparent 60%),
    radial-gradient(560px 240px at 88% 0%, rgba(212,168,67,.09), transparent 58%),
    var(--bg-2);
  box-shadow:var(--shadow);
}
.q-card.answer-mode{
  box-shadow:0 0 0 2px rgba(21,128,58,.18), var(--shadow-lg);
}

/* ---- countdown ring ------------------------------------- */
.timer{
  display:flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 2px 8px rgba(60,52,20,.08);
}
.t-ring{position:relative;width:74px;height:74px;display:grid;place-items:center;flex:none;}
.t-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);}
.t-track{fill:none;stroke:var(--line-soft);stroke-width:4;}
.t-prog{
  fill:none;stroke:var(--green-500);stroke-width:4;stroke-linecap:round;
  transition:stroke-dashoffset .95s linear, stroke .35s ease;
}
.timer .t{
  position:relative;z-index:1;min-width:0;
  font-size:18px;font-weight:900;letter-spacing:.5px;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.timer button{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--ink-soft);font-size:13px;transition:.14s;
}
.timer button:hover{border-color:var(--green-600);color:var(--green-300);}

/* paused reads as "on hold", not as an error */
.timer.paused .t-prog{stroke:var(--ink-dim);}
.timer.paused .t{color:var(--ink-soft);}

/* the whole box no longer blinks — only the ring and the digits do */
.timer.warn{border-color:var(--warn);animation:none;}
.timer.warn .t-prog{stroke:var(--warn);}
.timer.warn .t{color:var(--warn);animation:tick 1s steps(2,end) infinite;}
@keyframes tick{0%,100%{opacity:1;}50%{opacity:.45;}}

.timer.done{border-color:var(--warn);background:#FBEDE4;animation:none;}
.timer.done .t-prog{stroke:var(--warn);}
.timer.done .t{color:var(--warn);animation:none;}

/* ---- scoreboard chips sit on the board rather than in it ---- */
.team-chip{
  background:var(--surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 2px 8px rgba(60,52,20,.09);
  transition:box-shadow .18s, border-color .18s;
}
.team-chip.active{box-shadow:0 0 0 2px rgba(21,128,58,.2), 0 3px 10px rgba(60,52,20,.12);}
.team-chip .sc{font-variant-numeric:tabular-nums;transition:background .2s, color .2s;}

/* ---- board columns feel stacked ---- */
.cat-block .thumb{box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 2px 8px rgba(60,52,20,.08);}

html[data-motion="off"] .cat-grid.deal .cat-card{animation:none;}
html[data-motion="off"] .timer.warn .t{animation:none;}
html[data-motion="off"] .t-prog{transition:none;}

@media(max-width:720px){
  .t-ring{width:60px;height:60px;}
  .timer .t{font-size:15px;}
  .timer{gap:6px;padding:5px 9px;}
  .hero h1::after{width:70px;height:4px;margin-top:12px;}
}

/* ============================================================
   HOME PAGE
   A proper landing band: animated mascot, drifting shapes and a
   stat line, built only from the existing palette.
   ============================================================ */

.hero{
  position:relative;overflow:hidden;text-align:start;
  margin:8px 0 26px;padding:34px 34px 30px;
  border-radius:26px;
  border:1px solid var(--line);
  background:
    radial-gradient(760px 300px at 88% -18%, rgba(31,163,74,.13), transparent 62%),
    radial-gradient(620px 280px at 8% 108%, rgba(212,168,67,.16), transparent 60%),
    linear-gradient(150deg,#FDFBF3,#F3EEDD);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), var(--shadow);
}

/* drifting confetti dots behind everything */
.hero-deco{position:absolute;inset:0;pointer-events:none;}
.hero-deco i{
  position:absolute;left:var(--x);top:var(--y);
  width:calc(58px * var(--s));height:calc(58px * var(--s));
  border-radius:34% 66% 58% 42% / 46% 38% 62% 54%;
  background:linear-gradient(140deg,rgba(31,163,74,.16),rgba(212,168,67,.16));
  animation:drift 13s ease-in-out infinite;animation-delay:var(--d);
}
@keyframes drift{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg);}
  50%    {transform:translate3d(0,-24px,0) rotate(28deg);}
}

.hero-inner{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:26px;
  max-width:1180px;margin:0 auto;
}
.hero-text{flex:1 1 340px;min-width:0;}

.hero-badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 17px;border-radius:999px;margin-bottom:14px;
  background:var(--surface);border:1px solid var(--line);
  color:var(--green-300);font-size:13px;font-weight:800;
  box-shadow:0 1px 3px rgba(60,52,20,.08);
}
.hero-badge .dot{
  width:8px;height:8px;border-radius:50%;background:var(--green-500);
  box-shadow:0 0 0 0 rgba(28,147,69,.55);animation:ping 2.4s ease-out infinite;
}
@keyframes ping{
  0%  {box-shadow:0 0 0 0 rgba(28,147,69,.5);}
  70% {box-shadow:0 0 0 9px rgba(28,147,69,0);}
  100%{box-shadow:0 0 0 0 rgba(28,147,69,0);}
}

.hero h1{
  font-size:clamp(46px,7.5vw,86px);font-weight:900;letter-spacing:2px;
  line-height:1.1;color:var(--ink);
}
.hero h1::after{
  margin:14px 0 0;                 /* flush start, not centred any more */
  background:linear-gradient(90deg,var(--green-600),#D4A843);
}
.hero p{margin-top:12px;font-size:clamp(14px,1.6vw,17px);max-width:44ch;}

.hero-facts{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px;}
.hero-facts span{
  padding:8px 16px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line-soft);
  font-size:13px;font-weight:700;color:var(--ink-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.hero-facts b{color:var(--green-300);font-size:15px;font-weight:900;margin-inline-end:4px;}

/* ---- the mascot ---- */
.hero-mascot{flex:0 0 auto;width:clamp(190px,24vw,290px);}
.mascot-svg{width:100%;height:auto;display:block;overflow:visible;}

.m-float{animation:bob 5s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-11px);}}

/* two rings turn in opposite directions; each chip spins back so it stays upright */
.m-ring-a{transform-box:fill-box;transform-origin:center;animation:spin 34s linear infinite;}
.m-ring-b{transform-box:fill-box;transform-origin:center;animation:spinBack 24s linear infinite;}
.m-chip  {transform-box:fill-box;transform-origin:center;animation:spinBack 34s linear infinite;}
@keyframes spin    {to{transform:rotate(360deg);}}
@keyframes spinBack{to{transform:rotate(-360deg);}}

.m-lattice{animation:latticeGlow 6s ease-in-out infinite;}
@keyframes latticeGlow{0%,100%{opacity:.34;}50%{opacity:.62;}}

.m-spark{animation:sparkle 3.2s ease-in-out infinite;}
@keyframes sparkle{0%,100%{opacity:.35;}50%{opacity:1;}}

/* ---- search sits in the hero's shadow ---- */
.search-row{position:relative;max-width:620px;margin:0 auto 22px;}
.search-ic{
  position:absolute;inset-inline-start:18px;top:50%;transform:translateY(-50%);
  font-size:15px;opacity:.5;pointer-events:none;
}
.search-row input{
  padding-inline-start:46px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 2px 8px rgba(60,52,20,.07);
}
.search-row input:focus{box-shadow:0 0 0 3px rgba(21,128,58,.14), 0 2px 8px rgba(60,52,20,.08);}

@media(max-width:860px){
  .hero{padding:26px 20px 24px;border-radius:20px;}
  .hero-inner{flex-direction:column-reverse;text-align:center;gap:8px;}
  .hero-text{flex:1 1 auto;}
  /* pinned rather than left to clamp(): mobile text auto-sizing was inflating
     the vw term and pushing the title to its maximum */
  .hero h1{font-size:clamp(38px,11vw,54px);}
  .hero h1::after{margin-inline:auto;}
  .hero p{margin-inline:auto;}
  .hero-facts{justify-content:center;gap:7px;margin-top:14px;}
  .hero-facts span{padding:6px 12px;font-size:12px;}
  .hero-badge{margin-inline:auto;margin-bottom:8px;}
  .hero p{margin-top:8px;}
  /* keep the mascot a garnish here so the categories stay near the fold */
  .hero-mascot{width:min(148px,38vw);margin-bottom:-6px;}
}

html[data-motion="off"] .hero-deco i,
html[data-motion="off"] .m-float,
html[data-motion="off"] .m-ring-a,
html[data-motion="off"] .m-ring-b,
html[data-motion="off"] .m-chip,
html[data-motion="off"] .m-lattice,
html[data-motion="off"] .m-spark,
html[data-motion="off"] .hero-badge .dot{animation:none;}

/* ============================================================
   SCORE IN THE TOP BAR · SETUP TRAY · LIFELINES
   ============================================================ */

/* ---- both scores stay on screen through question and reveal ---- */
.mini-scores{display:flex;align-items:center;gap:8px;}
.ms-team{
  display:flex;align-items:center;gap:8px;
  padding:5px 12px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);
  font-weight:800;font-size:13px;color:var(--ink-soft);
  max-width:190px;transition:.15s;
}
.ms-nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:104px;}
.ms-sc{
  min-width:40px;text-align:center;padding:2px 8px;border-radius:999px;
  background:var(--bg-2);color:var(--ink);font-variant-numeric:tabular-nums;font-size:14px;
}
.ms-team.turn{border-color:var(--green-600);color:var(--ink);box-shadow:0 0 0 2px rgba(21,128,58,.16);}
.ms-team.turn .ms-sc{background:var(--green-600);color:#fff;}
.ms-team.lead .ms-sc{box-shadow:inset 0 0 0 1.5px var(--green-500);}

/* ---- picked categories: remove any of them from one place ---- */
.pick-tray{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:9px;}
.pick-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 8px 6px 13px;border-radius:999px;
  background:var(--surface);border:1px solid var(--green-600);
  color:var(--ink);font-size:12.5px;font-weight:800;transition:.15s;
}
.pick-chip .pc-nm{white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis;}
.pick-chip .pc-x{
  display:grid;place-items:center;width:19px;height:19px;border-radius:50%;
  background:var(--bg-2);color:var(--ink-soft);font-size:11px;font-weight:900;transition:.15s;
}
.pick-chip:hover{border-color:#C2410C;background:#FDF1E9;}
.pick-chip:hover .pc-x{background:#C2410C;color:#fff;}

/* ---- names now sit in the page flow, not over the cards ---- */
.names-section{
  max-width:760px;margin:34px auto 0;
  border:1px solid var(--line);border-radius:14px;
  background:var(--surface);padding:10px;
}
.names-section .sb-body{overflow:hidden;max-height:0;opacity:0;transition:max-height .24s ease,opacity .18s;}
.names-section.open .sb-body{max-height:280px;opacity:1;}
.names-section.open .names-toggle{border-style:solid;}
.names-section.open .names-toggle .nt-chev{transform:rotate(180deg);}
.names-section.open .names-toggle .nt-hint{display:none;}

/* the bottom bar is just the tray, the counter and Start now */
.setup-bar{padding:10px 20px calc(10px + env(safe-area-inset-bottom));}

/* ---- lifeline picker ---- */
.tools-panel{
  max-width:1100px;margin:38px auto 0;padding:22px;
  border-radius:20px;border:1px solid var(--line);
  background:
    radial-gradient(600px 220px at 88% -20%, rgba(31,163,74,.09), transparent 62%),
    linear-gradient(150deg,#FDFBF3,#F2EDDC);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), var(--shadow);
}
.tp-head h3{font-size:20px;font-weight:900;color:var(--ink);}
.tp-head p{margin-top:7px;font-size:13.5px;font-weight:600;color:var(--ink-soft);line-height:1.8;max-width:70ch;}
.tp-head p b{color:var(--green-300);}
.tp-teams{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px;}
@media(max-width:860px){.tp-teams{grid-template-columns:1fr;}}
.tp-name{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 14px;border-radius:10px;margin-bottom:10px;
  background:var(--bg-2);border:1px solid var(--line);
  font-weight:900;font-size:14px;color:var(--ink);
}
.tp-name b{color:var(--ink-soft);font-size:13px;font-variant-numeric:tabular-nums;}
.tp-name b.full{color:var(--green-300);}
.tp-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
@media(max-width:420px){.tp-grid{grid-template-columns:1fr;}}
.tool-card{
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  padding:13px 10px;border-radius:13px;
  background:var(--surface);border:1.5px solid var(--line);
  transition:.15s;
}
.tool-card:hover{border-color:var(--green-600);transform:translateY(-2px);}
.tool-card .tc-ic{font-size:22px;line-height:1;}
.tool-card .tc-nm{font-size:13px;font-weight:900;color:var(--ink);}
.tool-card .tc-ds{font-size:11px;font-weight:600;color:var(--ink-dim);line-height:1.5;}
.tool-card.on{
  border-color:var(--green-600);background:#EFF7F0;
  box-shadow:0 0 0 3px rgba(21,128,58,.14);
}
.tool-card.on .tc-nm{color:var(--green-800);}
.tool-card.on::after{content:"✓";position:absolute;}

/* ---- lifeline bar during a question ---- */
.tool-bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;
  padding:10px 8px 2px;border-top:1px dashed var(--line);margin-top:6px;
}
.tb-label{font-size:12px;font-weight:800;color:var(--ink-dim);margin-inline-end:4px;}
.tool-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:999px;
  background:var(--surface);border:1.5px solid var(--green-600);
  color:var(--green-800);font-size:13px;font-weight:800;transition:.15s;
}
.tool-btn:hover:not(.spent){background:#EFF7F0;transform:translateY(-1px);}
.tool-btn .tb-ic{font-size:15px;line-height:1;}
.tool-btn.spent{border-color:var(--line);color:var(--ink-dim);opacity:.5;cursor:default;
  text-decoration:line-through;}

.tool-out{
  margin-top:6px;padding:11px 18px;border-radius:12px;
  background:#FFF8E6;border:1px solid #D8B45E;
  color:#7A5410;font-size:15px;font-weight:700;line-height:1.7;max-width:760px;
}
.tool-out b{color:#5C3D08;}
.tool-out .to-opt{
  display:inline-block;padding:2px 12px;margin:0 3px;border-radius:8px;
  background:#fff;border:1px solid #D8B45E;font-weight:900;color:var(--ink);
}

@media(max-width:720px){
  .ms-nm{display:none;}
  .ms-team{padding:5px 8px;}
  .mini-scores{gap:6px;}
}

/* ---- حقيقة أو كذب · صحّح الجملة ---- */
.tf-grid{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;width:100%;}
.tf-btn{
  flex:1 1 200px;max-width:290px;min-height:82px;
  display:grid;place-items:center;padding:18px 20px;border-radius:16px;
  background:var(--surface);border:2px solid var(--line);color:var(--ink);
  font-size:clamp(18px,2.4vw,24px);font-weight:900;transition:.15s;
}
.tf-btn:hover{border-color:var(--green-600);transform:translateY(-2px);}
.tf-btn.right{border-color:var(--ok);background:#EFF7F0;color:var(--green-900);}
.tf-btn.wrong{opacity:.38;}

/* ---- صحّح الجملة: the wrong word is called out, no verdict offered ---- */
.fix-bad{
  display:inline-block;padding:2px 14px;margin:0 4px;border-radius:9px;
  background:#FDF1E9;border:2px dashed #C2410C;color:#C2410C;
  font-weight:900;text-decoration:line-through;text-decoration-thickness:2px;
}
.fix-ask{
  margin-top:6px;font-size:16px;font-weight:700;color:var(--ink-soft);
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;
}
.fix-ask .fix-bad{text-decoration:none;font-size:15px;padding:1px 10px;}
.fix-ask b{color:var(--green-300);}

/* ---- ready gate: the clock waits for the actors ---- */
.ready-gate{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  margin-top:14px;padding:16px 20px;border-radius:16px;
  background:#FFF8E6;border:2px dashed #D8B45E;
}
.ready-gate.gone{display:none;}
.rg-note{font-size:14px;font-weight:700;color:#7A5410;text-align:center;line-height:1.7;}

/* ---- blocking a square from the board ---- */
.block-bar{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin:0 auto 12px;padding:9px 18px;border-radius:999px;max-width:640px;
  background:var(--surface);border:1.5px solid var(--line);
  font-size:13.5px;font-weight:700;color:var(--ink-soft);
}
.block-bar b{color:var(--ink);}
.block-bar.on{border-color:#C2410C;background:#FDF1E9;color:#C2410C;}
.block-bar.spent{opacity:.55;border-style:dashed;}
.btn-block{
  padding:7px 18px;border-radius:999px;
  background:var(--green-600);color:#fff;font-size:13px;font-weight:800;transition:.15s;
}
.btn-block:hover{background:var(--green-500);}
.block-bar.on .btn-block{background:#C2410C;}

/* while arming, the open squares invite a tap */
.board-grid.arming .cell:not(.used):not(.locked){
  border-color:#C2410C;box-shadow:0 0 0 2px rgba(194,65,12,.18);cursor:crosshair;
}
.cell.locked{
  background:repeating-linear-gradient(135deg,#FDF1E9 0 7px,#F7E2D4 7px 14px);
  border-color:#C2410C;color:#C2410C;cursor:not-allowed;
}
.cell.locked span{opacity:1;}

/* ============================================================
   HOME PAGE v2 — a dark hero anchoring poster-style cards.
   Same two-colour palette, but the page finally has contrast
   instead of cream on cream.
   ============================================================ */

.hero.on-dark{
  text-align:start;overflow:visible;
  margin:8px 0 46px;padding:38px 38px 0;
  border-radius:28px;border:0;
  background:
    radial-gradient(760px 320px at 86% -22%, rgba(79,181,110,.30), transparent 62%),
    radial-gradient(620px 300px at 6% 112%, rgba(212,168,67,.22), transparent 60%),
    linear-gradient(155deg,#0C5325 0%,#083D1B 55%,#052D14 100%);
  box-shadow:0 20px 50px rgba(8,61,27,.30), inset 0 1px 0 rgba(255,255,255,.10);
  color:#F3EFE2;
}
.hero.on-dark .hero-deco i{
  background:linear-gradient(140deg,rgba(255,255,255,.10),rgba(212,168,67,.14));
}
.hero.on-dark h1{
  color:#FFFDF5;font-size:clamp(48px,8vw,92px);letter-spacing:3px;
  text-shadow:0 4px 22px rgba(0,0,0,.30);
}
.hero.on-dark h1::after{
  background:linear-gradient(90deg,#4FB56E,#E8C255);
  width:120px;height:6px;box-shadow:0 2px 12px rgba(232,194,85,.4);
}
.hero.on-dark p{color:#CFE0D3;font-size:clamp(15px,1.7vw,18px);}
.hero.on-dark .hero-badge{
  background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);
  color:#DCEFE1;backdrop-filter:blur(6px);
}
.hero.on-dark .hero-badge .dot{background:#7BE39C;}
.hero.on-dark .hero-facts span{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);
  color:#CFE0D3;box-shadow:none;
}
.hero.on-dark .hero-facts b{color:#F0D68A;}
.hero.on-dark .hero-inner{padding-bottom:34px;}

/* the mascot has to hold up on a dark ground */
.hero.on-dark .m-lattice{stroke:#7BE39C;}
.hero.on-dark .m-ring-a circle{stroke:#7BE39C;opacity:.55;}
.hero.on-dark .m-ring-b circle{stroke:#E8C255;opacity:.55;}

/* search straddles the hero's bottom edge */
.hero.on-dark .search-row{
  position:relative;z-index:3;max-width:660px;
  margin:0 auto;transform:translateY(50%);
}
.hero.on-dark .search-row input{
  padding:16px 22px 16px 52px;font-size:16px;border:0;
  background:#FFFDF7;color:var(--ink);
  box-shadow:0 12px 30px rgba(5,45,20,.30);
}
.hero.on-dark .search-row input:focus{box-shadow:0 0 0 4px rgba(79,181,110,.35), 0 12px 30px rgba(5,45,20,.30);}
.hero.on-dark .search-ic{opacity:.55;}

/* ---- section headers ---- */
.group-label{gap:12px;margin:38px 0 16px;}
.group-label::before{display:none;}
.group-label span{
  order:-1;background:var(--green-900);border-color:var(--green-900);color:#F3EFE2;
  font-size:13.5px;padding:7px 20px;box-shadow:0 3px 10px rgba(8,61,27,.20);
}

/* ---- category cards become little posters ---- */
.cat-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;}
.cat-card{
  aspect-ratio:4/5;border-radius:18px;border-width:1px;
  background:var(--surface);
}
.cat-card .cat-art{
  position:absolute;inset:0;padding:0;z-index:0;
}
.cat-card .cat-art svg,
.cat-card .cat-art img.cat-photo{border-radius:0;border:0;padding:0;}
.cat-card .cat-art svg{background:linear-gradient(165deg,#FBF8EF,#EDE6D3);padding:14px;}

/* A scrim so the title reads over any artwork. Kept shorter and with a
   later ramp than before so more of the icon survives underneath — the
   title still sits on near-opaque ground where the text actually is. */
.cat-card::after{
  content:"";position:absolute;inset:auto 0 0 0;height:46%;z-index:1;
  background:linear-gradient(to top,
    rgba(6,32,15,.93) 14%, rgba(6,32,15,.55) 52%, rgba(6,32,15,.14) 80%, transparent 100%);
  pointer-events:none;
}
.cat-card .cat-title{
  position:absolute;inset:auto 0 0 0;z-index:3;
  padding:0 12px 13px;min-height:0;text-align:start;
  font-size:14.5px;font-weight:900;color:#FFFDF5;line-height:1.35;
  text-shadow:0 2px 8px rgba(0,0,0,.5);
}
.cat-card .cat-count{
  top:9px;bottom:auto;left:auto;inset-inline-start:9px;transform:none;
  z-index:3;background:rgba(6,32,15,.72);color:#DCEFE1;
  padding:3px 10px;border-radius:999px;font-size:10.5px;backdrop-filter:blur(4px);
}
.cat-card .tag-special{
  top:9px;z-index:3;background:rgba(232,194,85,.92);border-color:transparent;
  color:#3D2B05;font-weight:900;
}
.cat-card .cat-desc{
  inset:0;z-index:4;background:rgba(8,61,27,.94);color:#DCEFE1;
  font-size:12.5px;padding:16px;backdrop-filter:blur(3px);
}
.cat-card:hover{transform:translateY(-5px) scale(1.015);}

/* selection reads instantly: gold ring plus a filled check */
.cat-card.selected{
  border-color:transparent;
  box-shadow:0 0 0 4px #E8C255, 0 14px 30px rgba(60,52,20,.25);
}
.cat-card.selected .check{
  display:grid;place-items:center;position:absolute;z-index:5;
  top:9px;inset-inline-end:9px;width:30px;height:30px;border-radius:50%;
  background:#E8C255;color:#3D2B05;font-size:16px;font-weight:900;
  box-shadow:0 3px 10px rgba(0,0,0,.28);
}
.cat-card:not(.selected) .check{display:none;}
.cat-card.selected .tag-special{display:none;}
.cat-card.dimmed{opacity:.42;filter:grayscale(.5);}

.admin-pill{text-decoration:none;}

@media(max-width:860px){
  .hero.on-dark{padding:28px 20px 0;border-radius:22px;margin-bottom:44px;}
  .hero.on-dark .hero-inner{padding-bottom:26px;}
  .hero.on-dark h1{font-size:clamp(40px,11vw,56px);}
  .cat-grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px;}
  .cat-card .cat-title{font-size:12.5px;padding:0 10px 11px;}
}

/* The old "selected" rule turned the title dark green, which is unreadable now
   that the title sits on a dark scrim. Keep it cream in every state. */
.cat-card .cat-title,
.cat-card.selected .cat-title{color:#FFFDF5;}

/* ============================================================
   HERO DEMO BOARD — a self-playing miniature of the real game
   ============================================================ */
.hero-mascot{position:relative;}
.hero-board{
  position:absolute;inset-inline-start:-18px;bottom:-6px;
  width:150px;padding:10px;border-radius:16px;
  background:rgba(4,26,12,.72);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 14px 34px rgba(0,0,0,.38);
  animation:hbIn .6s .4s cubic-bezier(.2,.9,.3,1.2) backwards;
}
@keyframes hbIn{from{opacity:0;transform:translateY(14px) scale(.92);}to{opacity:1;transform:none;}}

.hb-scores{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:8px;}
.hb-team{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:900;color:#EAF3EC;}
.hb-team i{width:8px;height:8px;border-radius:50%;display:block;}
.hb-team.a i{background:#7BE39C;}
.hb-team.b i{background:#E8C255;}
.hb-team b{font-variant-numeric:tabular-nums;min-width:22px;text-align:center;transition:.2s;}
.hb-team b.bump{transform:scale(1.45);color:#FFF;}
.hb-vs{font-size:9px;font-weight:900;color:rgba(255,255,255,.4);letter-spacing:1px;}

.hb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;}
.hb-cell{
  display:grid;place-items:center;height:30px;border-radius:8px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);
  font-size:11px;font-weight:900;color:#DCEFE1;font-variant-numeric:tabular-nums;
  transition:transform .25s, background .35s, color .35s, box-shadow .3s;
}
.hb-cell.v400{color:#F0D68A;}
.hb-cell.v600{color:#F2B48A;}
/* the moment of being chosen */
.hb-cell.pick{
  transform:scale(1.22);background:rgba(255,255,255,.28);color:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.28), 0 6px 16px rgba(0,0,0,.35);
}
.hb-cell.taken{transform:scale(.94);}
.hb-cell.taken.a{background:rgba(123,227,156,.85);color:#04250F;border-color:transparent;}
.hb-cell.taken.b{background:rgba(232,194,85,.85);color:#3D2B05;border-color:transparent;}

@media(max-width:860px){
  .hero-board{position:relative;inset:auto;width:min(230px,72vw);margin:14px auto 0;}
}
html[data-motion="off"] .hero-board{animation:none;}
html[data-motion="off"] .hb-cell{transition:none;}

/* ============================================================
   FINAL WAGER ROUND
   ============================================================ */
.final-card{
  background:
    radial-gradient(620px 260px at 50% -10%, rgba(212,168,67,.16), transparent 62%),
    var(--bg-2);
  box-shadow:0 0 0 2px rgba(212,168,67,.30), var(--shadow-lg);
}
.final-hero{display:flex;flex-direction:column;align-items:center;gap:8px;}
.fh-ic{font-size:52px;line-height:1;animation:fhPulse 2.4s ease-in-out infinite;}
@keyframes fhPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}}

.bet-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:min(720px,96%);margin-top:6px;}
@media(max-width:620px){.bet-grid{grid-template-columns:1fr;}}
.bet-card{
  padding:16px;border-radius:16px;text-align:center;
  background:var(--surface);border:2px solid var(--line);
}
.bc-name{font-size:16px;font-weight:900;color:var(--ink);}
.bc-have{font-size:12.5px;font-weight:700;color:var(--ink-soft);margin:4px 0 10px;}
.bc-have b{color:var(--green-300);font-variant-numeric:tabular-nums;}
.bc-input{
  width:100%;padding:12px;border-radius:11px;text-align:center;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);
  font-size:22px;font-weight:900;font-variant-numeric:tabular-nums;outline:none;
}
.bc-input:focus{border-color:#D4A843;box-shadow:0 0 0 3px rgba(212,168,67,.22);}
.bc-quick{display:flex;gap:6px;margin-top:9px;}
.bq{
  flex:1;padding:7px 4px;border-radius:9px;font-size:11.5px;font-weight:800;
  background:var(--bg-2);border:1px solid var(--line);color:var(--ink-soft);transition:.14s;
}
.bq:hover{border-color:#D4A843;color:#7A5410;}

.bet-strip{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;font-size:13px;
  font-weight:700;color:var(--ink-soft);}
.bet-strip b{color:var(--ink);}

.final-judge{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:min(720px,96%);margin-top:8px;}
@media(max-width:620px){.final-judge{grid-template-columns:1fr;}}
.fj-team{padding:12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);}
.fj-name{font-size:13px;font-weight:900;text-align:center;margin-bottom:9px;color:var(--ink);}
.fj-btns{display:flex;gap:8px;}
.fj{
  flex:1;padding:11px 6px;border-radius:10px;font-size:13px;font-weight:800;
  border:1.5px solid var(--line);background:var(--bg);color:var(--ink-soft);transition:.14s;
}
.fj b{font-variant-numeric:tabular-nums;}
.fj.ok:hover,.fj.ok.chosen{border-color:var(--ok);background:#EFF7F0;color:var(--green-900);}
.fj.bad:hover,.fj.bad.chosen{border-color:#C2410C;background:#FDF1E9;color:#C2410C;}
.fj.chosen{box-shadow:0 0 0 3px rgba(21,128,58,.14);}
.fj.bad.chosen{box-shadow:0 0 0 3px rgba(194,65,12,.14);}

html[data-motion="off"] .fh-ic{animation:none;}

/* ---- pictures attached to ordinary questions (set in the dashboard) ---- */
.q-pic{
  width:min(360px,68vw);border-radius:16px;overflow:hidden;
  border:2px solid var(--line);box-shadow:var(--shadow);background:var(--surface);
}
.q-pic img{width:100%;height:auto;display:block;}
.q-pic--sm{width:min(210px,44vw);margin-top:10px;}
.q-glyph{font-size:clamp(64px,12vw,120px);line-height:1;}
.q-glyph.q-pic--sm{font-size:clamp(40px,7vw,64px);margin-top:8px;}

/* ---- jump-to-lifelines strip in the fixed setup bar ---- */
.tools-jump{
  display:flex;align-items:center;gap:11px;width:100%;margin-bottom:9px;
  padding:10px 15px;border-radius:12px;text-align:start;
  background:linear-gradient(100deg,#FFF6DC,#F6ECCF);
  border:1.5px solid #D8B45E;color:#5C3D08;
  font-size:13px;font-weight:800;transition:.15s;
  animation:tjIn .35s cubic-bezier(.2,.9,.3,1.2) backwards;
}
@keyframes tjIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.tools-jump:hover{border-color:#B8912F;background:linear-gradient(100deg,#FFF9E8,#F2E5C0);}
.tj-ic{font-size:17px;line-height:1;flex:none;}
.tj-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;}
.tj-txt b{color:#3D2B05;font-weight:900;}
.tj-go{
  flex:none;padding:5px 13px;border-radius:999px;
  background:var(--green-600);color:#fff;font-size:12px;font-weight:900;
}
.tools-jump:hover .tj-go{background:var(--green-500);}

/* make the panel itself announce that it arrived */
.tools-panel{scroll-margin-top:80px;}
.tools-panel::before{
  content:"";position:absolute;inset:-3px;border-radius:22px;
  border:2px solid #D8B45E;opacity:0;animation:tpFlash 1.6s ease-out .3s 1;
  pointer-events:none;
}
.tools-panel{position:relative;}
@keyframes tpFlash{0%{opacity:0;}25%{opacity:.9;}100%{opacity:0;}}

@media(max-width:620px){
  .tj-txt{display:none;}
  .tools-jump{justify-content:center;}
}
html[data-motion="off"] .tools-jump{animation:none;}
html[data-motion="off"] .tools-panel::before{animation:none;}

/* ============================================================
   HERO MOTION — richer, and controllable from the toggle
   ============================================================ */
.motion-btn{
  padding:8px 16px;border-radius:12px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  color:#DCEFE1;font-size:13px;font-weight:800;transition:.15s;
}
.motion-btn:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4);}

/* a slow light sweep across the whole hero */
.hero.on-dark::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.10) 48%,
             rgba(255,255,255,.18) 51%,rgba(255,255,255,.10) 54%,transparent 64%);
  background-size:260% 100%;
  animation:heroSweep 7s ease-in-out infinite;
}
@keyframes heroSweep{
  0%,100%{background-position:170% 0;}
  55%    {background-position:-70% 0;}
}

/* drifting motes above the dark panel */
.hero.on-dark .hero-deco::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(2.5px 2.5px at 14% 30%, rgba(255,255,255,.55), transparent),
    radial-gradient(2px 2px  at 38% 68%, rgba(232,194,85,.65), transparent),
    radial-gradient(2.5px 2.5px at 66% 22%, rgba(123,227,156,.55), transparent),
    radial-gradient(2px 2px  at 84% 58%, rgba(255,255,255,.45), transparent),
    radial-gradient(2px 2px  at 52% 88%, rgba(232,194,85,.5), transparent);
  animation:moteRise 16s linear infinite;
}
@keyframes moteRise{
  0%  {transform:translateY(14px);opacity:.25;}
  50% {opacity:.9;}
  100%{transform:translateY(-26px);opacity:.25;}
}

/* the title breathes very slightly so the block never looks frozen */
.hero.on-dark h1{animation:titleGlow 5.5s ease-in-out infinite;}
@keyframes titleGlow{
  0%,100%{text-shadow:0 4px 22px rgba(0,0,0,.30);}
  50%    {text-shadow:0 4px 30px rgba(123,227,156,.35), 0 4px 22px rgba(0,0,0,.30);}
}

/* the gold underline stretches and relaxes */
.hero.on-dark h1::after{animation:ruleGrow 5.5s ease-in-out infinite;transform-origin:center;}
@keyframes ruleGrow{0%,100%{transform:scaleX(1);}50%{transform:scaleX(1.22);}}

/* mascot ring pulse on top of the rotation */
.m-ring-b{animation:spinBack 24s linear infinite, ringBreath 6s ease-in-out infinite;}
@keyframes ringBreath{0%,100%{opacity:.45;}50%{opacity:.95;}}

html[data-motion="off"] .hero.on-dark::after,
html[data-motion="off"] .hero.on-dark .hero-deco::after,
html[data-motion="off"] .hero.on-dark h1,
html[data-motion="off"] .hero.on-dark h1::after,
html[data-motion="off"] .m-ring-b{animation:none;}

/* ---- +18 confirmation sheet -------------------------------------------
   Replaces confirm(), which some browsers answer with a silent false and
   so made the category unpickable. */
.adult-modal{
  position:fixed;inset:0;z-index:80;padding:22px;
  background:rgba(12,10,4,.62);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
  animation:adultIn .16s ease-out;
}
@keyframes adultIn{from{opacity:0}to{opacity:1}}
.adult-card{
  background:var(--surface);border:1.5px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow-lg);padding:26px 24px;max-width:430px;width:100%;text-align:center;
}
.adult-badge{
  width:64px;height:64px;margin:0 auto 14px;border-radius:50%;
  display:grid;place-items:center;font-size:20px;font-weight:900;
  background:#1B1216;color:#FFD9E0;border:3px solid #8E1B32;
}
.adult-card h3{margin:0 0 10px;font-size:21px;font-weight:900;color:var(--ink);}
.adult-card p{margin:0 0 20px;font-size:14.5px;line-height:1.95;color:var(--ink-soft);}
.adult-btns{display:flex;gap:10px;}
.adult-btns button{
  flex:1;padding:13px;border-radius:12px;border:1.5px solid transparent;
  font-family:var(--font);font-size:15px;font-weight:900;cursor:pointer;
}
.adult-btns .adult-no{background:var(--surface-2);color:var(--ink-soft);border-color:var(--line);}
.adult-btns .adult-yes{background:#8E1B32;color:#fff;}
.adult-btns button:hover{filter:brightness(1.07);}

/* ============================================================
   NIGHT-THEME CORRECTIONS
   The layout was built for a cream page, so a handful of parts
   hard-code light plates or deep-ink text. These re-point them
   at the night palette. Appended last so it wins without having
   to touch 300 individual declarations above.
   ============================================================ */

/* page + chrome ------------------------------------------------ */
body{background:
  radial-gradient(1100px 620px at 78% -8%, #17205A 0%, transparent 60%),
  radial-gradient(900px 520px at 6% 4%, #241A5E 0%, transparent 55%),
  var(--bg);
  background-attachment:fixed;}

.topbar,.setup-bar{background:rgba(11,17,50,.90);border-color:var(--line-soft);
  backdrop-filter:blur(10px);}
.setup-bar .inner{background:transparent;}
.pill{background:var(--surface);color:var(--ink-soft);border-color:var(--line);}
.pill.solid{background:var(--green-600);color:#fff;border-color:transparent;}
.brand{color:var(--ink);}

/* category cards ---------------------------------------------- */
.cat-card{background:var(--surface);border-color:var(--line);}
.cat-card:hover{border-color:var(--green-500);}
.cat-card.selected{background:var(--surface-2);border-color:var(--green-400);}
.cat-card.selected .cat-title{color:#fff;}
.cat-card .cat-art svg{background:linear-gradient(165deg,#151C42,#0D1236);}
.cat-card .cat-art svg,
.cat-card .cat-art img.cat-photo{border-color:transparent;}
/* the icons are dark artwork already — a heavy scrim only muddies them */
.cat-card::after{height:38%;
  background:linear-gradient(to top,
    rgba(5,8,24,.94) 12%, rgba(5,8,24,.55) 55%, transparent 100%);}
.cat-card .cat-desc{background:rgba(10,15,44,.96);color:var(--ink-soft);}
.cat-card .cat-count{color:var(--ink-soft);}
.cat-card .tag-special{border-color:var(--green-400);color:var(--green-300);
  background:rgba(59,75,196,.22);}
.group-label span{background:var(--green-700);color:#fff;}

/* board -------------------------------------------------------- */
.cat-block .thumb svg{background:linear-gradient(165deg,#151C42,#0D1236);}
.cell{background:linear-gradient(180deg,#1A2250,#121838);color:var(--ink);
  border-color:var(--line);}
.cell:hover:not(.used){background:var(--surface-2);color:#fff;
  border-color:var(--green-400);}
.cell.used{background:#0E1330;color:var(--ink-dim);border-color:var(--line-soft);}
.cell.d1{color:var(--tier1);} .cell.d2{color:var(--tier2);} .cell.d3{color:var(--tier3);}

/* question / answer surfaces ----------------------------------- */
.q-screen,.a-screen,.who-screen,.final-screen{color:var(--ink);}
.q-text,.a-text{color:var(--ink);}
.vs-card,.tf-btn,.fj,.order-item,.choice{background:var(--surface);
  color:var(--ink);border-color:var(--line);}
.vs-card.right,.tf-btn.right,.fj.ok:hover,.fj.ok.chosen{
  background:rgba(63,191,106,.18);border-color:var(--ok);color:#BFF3D0;}
.vs-card.wrong,.tf-btn.wrong{background:rgba(224,90,74,.16);
  border-color:#E05A4A;color:#FFC5BC;}

/* forms + misc ------------------------------------------------- */
input,select,textarea{background:#0E1436;color:var(--ink);border-color:var(--line);}
input::placeholder{color:var(--ink-dim);}
.search-row input{background:#0E1436;color:var(--ink);}
.modal{background:var(--surface);color:var(--ink);}
.toast{background:var(--green-700);color:#fff;}
.empty{color:var(--ink-soft);}

/* The hero paints itself through `.hero.on-dark`, which outranks a bare
   `.hero`, so the override has to match that specificity. */
.hero.on-dark{
  background:
    radial-gradient(760px 300px at 88% -18%, rgba(110,130,255,.20), transparent 62%),
    radial-gradient(620px 280px at 8% 108%, rgba(217,164,65,.16), transparent 60%),
    linear-gradient(135deg,#141B4A 0%,#222C86 52%,#3B2C8E 100%);
  border-color:var(--line);
}
.hero.on-dark p{color:#C7CEFF;}
.hero.on-dark .hero-badge{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);}
.hero.on-dark .hero-badge .dot{background:#8E9CFF;}
.hero.on-dark .hero-facts span{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18);}

/* A quiet placeholder under every icon: with 47 lazy images a card would
   otherwise flash as an empty box while its art streams in. */
.cat-card .cat-art img.cat-photo,
.cat-block .thumb img.cat-photo{
  background:linear-gradient(165deg,#1B2350,#0E1436);
}

/* `.hero.on-dark .search-row input` outranks a bare `.search-row input`,
   so the dark field has to be set at that specificity too. */
.hero.on-dark .search-row input{
  background:rgba(9,14,42,.92);color:var(--ink);
  border:1px solid rgba(255,255,255,.16);
}
.hero.on-dark .search-row input::placeholder{color:var(--ink-dim);}
.hero.on-dark .search-ic{opacity:.75;}