/* ── Quicksand, bundled so it works with no internet ──
   Quicksand by Andrew Paglinawan, SIL Open Font License 1.1.
   Licence text: assets/fonts/LICENSE-Quicksand.txt            */
@font-face{
  font-family:"Quicksand"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../assets/fonts/quicksand-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Quicksand"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../assets/fonts/quicksand-latin-500-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Quicksand"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../assets/fonts/quicksand-latin-700-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Quicksand"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../assets/fonts/quicksand-latin-ext-400-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Quicksand"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../assets/fonts/quicksand-latin-ext-500-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Quicksand"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../assets/fonts/quicksand-latin-ext-700-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ============================================================
   Word Wings  —  Teacher Cris

   Every colour comes from a theme token below, so a theme is
   just a handful of values. All seven themes are taken from the
   Teacher Cris badge: the navy cap, the gold bulb, the parchment
   coin, the orange ribbon, the bronze rim and the blue sparks.
   ============================================================ */

:root,
[data-theme="royal"]{
  /* Royal Navy — the cap and the yellow of the brand */
  --bg:#0A2240;     --bg-rgb:10 34 64;
  --bg-2:#123059;   --bg-3:#1b4274;
  --accent:#FFCC00; --accent-rgb:255 204 0;
  --accent-2:#e07b1a;
  --on-accent:#0A2240;
  --text:#fbf5ea;   --text-rgb:251 245 234;
  --muted:#ead9bc;
  --font:"Quicksand","Segoe UI",system-ui,-apple-system,sans-serif;
  --r-sm:8px;
  --r-md:16px;
  --r-lg:24px;
  --r-pill:999px;
  color-scheme:dark;
}
[data-theme="parchment"]{
  /* Parchment — the coin itself, a light theme for bright rooms */
  --bg:#f4e7cd;     --bg-rgb:244 231 205;
  --bg-2:#ecdcbc;   --bg-3:#dfc89f;
  --accent:#1f3f8a; --accent-rgb:31 63 138;
  --accent-2:#c27a12;
  --on-accent:#ffffff;
  --text:#1b2a52;   --text-rgb:27 42 82;
  --muted:#6b5531;
  color-scheme:light;
}
[data-theme="golden"]{
  /* Golden Bulb — the bronze rim and the gold lettering */
  --bg:#2a1b0b;     --bg-rgb:42 27 11;
  --bg-2:#3d2912;   --bg-3:#56401d;
  --accent:#f2c14e; --accent-rgb:242 193 78;
  --accent-2:#e88a2a;
  --on-accent:#2a1b0b;
  --text:#fdf3de;   --text-rgb:253 243 222;
  --muted:#e4cb94;
  color-scheme:dark;
}
[data-theme="ignite"]{
  /* Ignite Orange — the ribbon on deep navy */
  --bg:#0f1d36;     --bg-rgb:15 29 54;
  --bg-2:#192f55;   --bg-3:#244274;
  --accent:#f5892a; --accent-rgb:245 137 42;
  --accent-2:#ffcc00;
  --on-accent:#1a0d02;
  --text:#fff6ec;   --text-rgb:255 246 236;
  --muted:#f3d7b5;
  color-scheme:dark;
}
[data-theme="scholar"]{
  /* Scholar Blue — the graduation cap, bright and friendly */
  --bg:#1d3c88;     --bg-rgb:29 60 136;
  --bg-2:#26499e;   --bg-3:#3159b6;
  --accent:#f6c945; --accent-rgb:246 201 69;
  --accent-2:#7cc8ff;
  --on-accent:#132a5e;
  --text:#ffffff;   --text-rgb:255 255 255;
  --muted:#d9e3ff;
  color-scheme:dark;
}
[data-theme="spark"]{
  /* Sky Spark — the little blue squares beside the bulb */
  --bg:#072a3e;     --bg-rgb:7 42 62;
  --bg-2:#0d3b56;   --bg-3:#134d6f;
  --accent:#56c8f5; --accent-rgb:86 200 245;
  --accent-2:#ffcc00;
  --on-accent:#04202e;
  --text:#f0fbff;   --text-rgb:240 251 255;
  --muted:#bfe6f7;
  color-scheme:dark;
}
[data-theme="contrast"]{
  /* High contrast — for the back row and sunny classrooms */
  --bg:#000000;     --bg-rgb:0 0 0;
  --bg-2:#141414;   --bg-3:#262626;
  --accent:#ffe100; --accent-rgb:255 225 0;
  --accent-2:#ff8a00;
  --on-accent:#000000;
  --text:#ffffff;   --text-rgb:255 255 255;
  --muted:#f0f0f0;
  color-scheme:dark;
}

/* Professional themes that do not follow the badge: plain colours and
   squarer corners, still in Quicksand like every other theme. */
[data-theme="formal"]{
  /* Formal Slate — charcoal, white and a quiet steel blue */
  --bg:#1e2530;     --bg-rgb:30 37 48;
  --bg-2:#273140;   --bg-3:#344155;
  --accent:#f2f4f7; --accent-rgb:242 244 247;
  --accent-2:#8fb3e8;
  --on-accent:#1e2530;
  --text:#f2f4f7;   --text-rgb:242 244 247;
  --muted:#b7c0cc;
  --r-sm:4px; --r-md:8px; --r-lg:12px;
  color-scheme:dark;
}
[data-theme="formalLight"]{
  /* Formal Light — white and grey with a deep navy */
  --bg:#f5f6f8;     --bg-rgb:245 246 248;
  --bg-2:#e9ecf1;   --bg-3:#d9dee6;
  --accent:#1f3a5f; --accent-rgb:31 58 95;
  --accent-2:#6b7a90;
  --on-accent:#ffffff;
  --text:#1d2733;   --text-rgb:29 39 51;
  --muted:#5b6675;
  --r-sm:4px; --r-md:8px; --r-lg:12px;
  color-scheme:light;
}
[data-theme="corporate"]{
  /* Corporate Blue — clean white with a confident blue */
  --bg:#ffffff;     --bg-rgb:255 255 255;
  --bg-2:#f0f4f9;   --bg-3:#dde6f1;
  --accent:#0b5cad; --accent-rgb:11 92 173;
  --accent-2:#2a9d8f;
  --on-accent:#ffffff;
  --text:#14243a;   --text-rgb:20 36 58;
  --muted:#52627a;
  --r-sm:6px; --r-md:10px; --r-lg:14px;
  color-scheme:light;
}
[data-theme="teal"]{
  /* Midnight Teal — deep blue-black with a fresh teal */
  --bg:#10202a;     --bg-rgb:16 32 42;
  --bg-2:#172d3a;   --bg-3:#21404f;
  --accent:#2ec4b6; --accent-rgb:46 196 182;
  --accent-2:#e9edf0;
  --on-accent:#08161d;
  --text:#e9edf0;   --text-rgb:233 237 240;
  --muted:#a9bcc6;
  --r-sm:6px; --r-md:10px; --r-lg:14px;
  color-scheme:dark;
}
[data-theme="burgundy"]{
  /* Burgundy & Gold — an awards-night look */
  --bg:#2b1219;     --bg-rgb:43 18 25;
  --bg-2:#3a1a23;   --bg-3:#4f2430;
  --accent:#d9b56b; --accent-rgb:217 181 107;
  --accent-2:#c86a7e;
  --on-accent:#2b1219;
  --text:#f7efe6;   --text-rgb:247 239 230;
  --muted:#dcc4b0;
  --r-sm:6px; --r-md:10px; --r-lg:14px;
  color-scheme:dark;
}
[data-theme="graphite"]{
  /* Graphite — dark grey with a single orange highlight */
  --bg:#2b2d31;     --bg-rgb:43 45 49;
  --bg-2:#35383d;   --bg-3:#43474d;
  --accent:#ff8a3d; --accent-rgb:255 138 61;
  --accent-2:#c9ccd1;
  --on-accent:#1f1f22;
  --text:#f1f2f4;   --text-rgb:241 242 244;
  --muted:#b9bdc3;
  --r-sm:6px; --r-md:10px; --r-lg:14px;
  color-scheme:dark;
}

:root{
  --good:#2f9e5e;
  --bad:#d8453c;
  --bad-soft:#ff9a93;

  /* Surfaces that work on light and dark themes alike */
  --fill:rgb(var(--text-rgb) / .07);
  --fill-2:rgb(var(--text-rgb) / .12);
  --line:rgb(var(--accent-rgb) / .35);
  --panel:rgb(var(--bg-rgb) / .94);

  --hud-h:clamp(76px, 9.5vh, 112px);
  --buddy-d:clamp(84px, 9.5vw, 132px);
  --clue-scale:1;

  --shadow-soft:0 6px 20px rgb(0 0 0 / .22);
  --shadow-hard:0 12px 36px rgb(0 0 0 / .38);

  --ease:cubic-bezier(.22,.8,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{ box-sizing:border-box; }

/* The hidden attribute must always win. Several components below set
   display:flex or display:grid, which would otherwise override it. */
[hidden]{ display:none !important; }

html,body{
  margin:0; padding:0;
  width:100%; height:100%;
  overflow:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  overscroll-behavior:none;
  touch-action:manipulation;
  user-select:none; -webkit-user-select:none;
}

button,input,textarea,select{ font:inherit; color:inherit; }
button{ cursor:pointer; touch-action:manipulation; }
input,textarea{ user-select:text; -webkit-user-select:text; }
img{ -webkit-user-drag:none; }
:focus-visible{ outline:4px solid var(--accent); outline-offset:3px; }
:focus:not(:focus-visible){ outline:none; }

/* ──────────────── Stage & background reveal ──────────────── */

.stage{
  position:fixed; inset:0;
  width:100vw; height:100vh;
  height:100dvh;
  overflow:hidden;
  isolation:isolate;
  /* No browser panning, zooming or pull-to-refresh on the board */
  touch-action:none;
}

.scene{
  position:absolute; inset:0;
  background-image:var(--bg-image, url("../assets/kingdom.svg"));
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* Bottom layer shows in full colour. The veil on top is the same
   picture in grey, cut into tiles; burning a tile away reveals colour. */
.scene--veil{
  display:grid;
  grid-template-columns:repeat(var(--cols,8), 1fr);
  grid-template-rows:repeat(var(--rows,5), 1fr);
  background:none;
}

.tile{
  position:relative;
  /* Sized and positioned in pixels by app.js so every tile is an exact window
     onto the same "cover"-scaled picture as the colour layer underneath. */
  background-image:var(--bg-image, url("../assets/kingdom.svg"));
  background-repeat:no-repeat;
  margin:-0.5px;           /* overlap by a hair: no seams on fractional pixels */
  filter:grayscale(1) contrast(.78) brightness(.62);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.tile::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgb(var(--bg-rgb) / .42), rgb(var(--bg-rgb) / .16));
}
body.show-grid .tile::after{ box-shadow:inset 0 0 0 1px rgb(255 255 255 / .09); }
.tile.is-gone{ opacity:0; transform:scale(1.08); pointer-events:none; }

/* ──────────────── Scoreboard ──────────────── */

.hud{
  position:absolute; top:0; left:0; right:0;
  height:var(--hud-h);
  z-index:50;
  display:flex; align-items:center; gap:clamp(8px,1.2vw,20px);
  padding:0 clamp(10px,1.3vw,20px);
  padding-top:env(safe-area-inset-top,0);
  background:linear-gradient(180deg, var(--bg) 0%, rgb(var(--bg-rgb) / .97) 70%, rgb(var(--bg-rgb) / .86) 100%);
  border-bottom:3px solid var(--accent);
  box-shadow:var(--shadow-hard);
}

.hud__brand{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.hud__logo{ width:clamp(46px,6.2vh,72px); height:auto; display:block; }
.hud__titles{ display:flex; flex-direction:column; line-height:1; }
.hud__title{
  margin:0;
  font-size:clamp(17px,2.3vh,28px);
  font-weight:700; letter-spacing:.01em;
  color:var(--accent);
}
.hud__tagline{
  margin:4px 0 0;
  font-size:clamp(9px,1.1vh,12px);
  text-transform:uppercase; letter-spacing:.12em;
  color:var(--muted); opacity:.8;
}
@media (max-width:1100px){ .hud__titles{ display:none; } }

/* team tiles */
.teams{
  flex:1 1 auto;
  display:flex; align-items:stretch; justify-content:center;
  gap:clamp(5px,.7vw,12px);
  min-width:0;
  height:calc(var(--hud-h) - 22px);
}

.team{
  position:relative;
  flex:1 1 0; min-width:0;
  max-width:clamp(110px,13vw,200px);
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:6px;
  padding:clamp(4px,.7vh,9px) clamp(8px,.9vw,14px);
  padding-left:clamp(12px,1.1vw,18px);
  border:3px solid var(--fill-2);
  border-radius:var(--r-md);
  background:var(--fill);
  color:var(--text);
  overflow:hidden;
  transition:transform .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease), opacity .2s var(--ease);
}
.team::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:6px;
  background:var(--team-colour, var(--accent));
}
.team:active{ transform:scale(.97); }
.team__name{
  grid-column:1; grid-row:1;
  font-size:clamp(11px,1.5vh,17px); font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-align:left;
}
.team__pips{
  grid-column:1; grid-row:2;
  font-size:clamp(9px,1.2vh,13px); letter-spacing:-1px; opacity:.9; text-align:left;
  min-height:1em;
}
.team__score{
  grid-column:2; grid-row:1 / span 2;
  font-size:clamp(20px,3vh,36px); font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--accent); line-height:1;
}
.team.is-active{
  border-color:var(--team-colour, var(--accent));
  background:rgb(var(--accent-rgb) / .16);
  box-shadow:0 0 0 3px rgb(var(--accent-rgb) / .18);
}
.team.is-waiting{ opacity:.42; }
.team[disabled]{ cursor:default; }
.team.just-scored{ animation:pop .5s var(--spring); }
.team.just-lost{ animation:nudge .45s var(--ease); }
@keyframes pop{ 0%{transform:scale(1)} 35%{transform:scale(1.14)} 100%{transform:scale(1)} }
@keyframes nudge{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }

/* Seven or more teams: two compact rows, so twelve still fit */
.teams--many{
  display:grid; grid-auto-flow:column; grid-template-rows:1fr 1fr;
  grid-auto-columns:minmax(0, 1fr);
  gap:4px clamp(4px,.5vw,8px);
}
.teams--many .team{
  max-width:none;
  grid-template-rows:auto;
  padding:0 clamp(6px,.6vw,10px) 0 12px;
  border-width:2px; border-radius:var(--r-sm);
}
.teams--many .team::before{ width:5px; }
.teams--many .team__pips{ display:none; }
.teams--many .team__name{ font-size:clamp(10px,1.3vh,15px); }
.teams--many .team__score{ grid-row:1; font-size:clamp(14px,2vh,24px); }

/* tools */
.hud__tools{ display:flex; align-items:center; gap:clamp(5px,.6vw,10px); flex:0 0 auto; }
.hud__sep{ width:2px; height:60%; min-height:30px; background:var(--fill-2); border-radius:2px; margin:0 2px; }
.icon-btn{
  position:relative;
  width:clamp(44px,5.6vh,62px); height:clamp(44px,5.6vh,62px);
  display:grid; place-items:center;
  font-size:clamp(18px,2.4vh,27px);
  border:3px solid var(--line);
  border-radius:var(--r-md);
  background:var(--fill);
  color:var(--accent);
  overflow:hidden;
  transition:transform .14s var(--ease), background .14s var(--ease), border-color .14s var(--ease);
}
.icon-btn > span{ position:relative; z-index:1; }
.icon-btn--main{
  width:clamp(56px,7vh,80px); height:clamp(56px,7vh,80px);
  font-size:clamp(22px,3vh,34px);
  background:var(--accent); color:var(--on-accent); border-color:var(--accent);
  box-shadow:0 4px 14px rgb(var(--accent-rgb) / .35);
}
.icon-btn:active{ transform:scale(.92); }
.icon-btn.is-on{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.icon-btn--main.is-on{ background:var(--fill); color:var(--accent); box-shadow:none; }
.icon-btn--main.is-nudge{ animation:nudgeBtn .5s var(--spring); }
@keyframes nudgeBtn{ 0%,100%{ transform:scale(1); } 40%{ transform:scale(1.18); } }

@media (hover:hover){
  .icon-btn:hover{ background:rgb(var(--accent-rgb) / .2); border-color:var(--accent); }
  .icon-btn--main:hover{ background:var(--accent); filter:brightness(1.08); }
}

/* Press-and-hold progress, for the teacher lock */
.is-holdable::after{
  content:""; position:absolute; inset:0;
  background:rgb(var(--accent-rgb) / .45);
  transform:scaleY(0); transform-origin:bottom;
}
.is-holding::after{ transform:scaleY(1); transition:transform var(--hold-ms,700ms) linear; }

/* ──────────────── Clue bar ──────────────── */

.clue{
  position:absolute;
  top:calc(var(--hud-h) + 12px);
  left:50%; transform:translateX(-50%);
  z-index:45;
  width:min(74vw, 1180px);
  padding:clamp(8px,1.4vh,16px) clamp(16px,2.4vw,34px);
  text-align:center;
  background:linear-gradient(180deg, rgb(var(--bg-rgb) / .95), rgb(var(--bg-rgb) / .9));
  border:3px solid var(--accent);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-hard);
  pointer-events:none;
}
.clue__label{
  margin:0 0 4px;
  font-size:clamp(10px,1.15vh,13px); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); opacity:.9;
}
body.no-tagline .clue__label{ display:none; }
.clue__text{
  margin:0;
  font-size:calc(clamp(18px,3.1vh,38px) * var(--clue-scale));
  font-weight:700; line-height:1.18;
  color:var(--text);
  text-wrap:balance;
}
.clue__text.is-new{ animation:clueIn .45s var(--ease); }
@keyframes clueIn{ from{ opacity:0; transform:translateY(8px); } }
.clue__text .answer{
  color:var(--accent);
  text-decoration:underline;
  text-decoration-color:rgb(var(--accent-rgb) / .5);
  text-underline-offset:4px;
}
.clue__meta{
  display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:8px;
}
body.no-chips .clue__meta .chip:not(.chip--match){ display:none; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  font-size:clamp(10px,1.2vh,14px); font-weight:700;
  padding:3px 12px; border-radius:var(--r-pill);
  background:var(--fill-2);
  color:var(--muted);
  letter-spacing:.03em;
}
.chip--match{ background:var(--accent); color:var(--on-accent); }
.chip--timer b{ min-width:1.6em; text-align:right; font-variant-numeric:tabular-nums; color:var(--text); }
.chip--timer .chip__bar i{ transition:none; }
.chip--timer.is-low{ background:var(--bad); color:#fff; animation:timerPulse .5s ease-in-out infinite alternate; }
.chip--timer.is-low b{ color:#fff; }
.chip--timer.is-low .chip__bar i{ background:#fff; }
@keyframes timerPulse{ from{ box-shadow:0 0 0 0 rgb(216 69 60 / .6); } to{ box-shadow:0 0 0 6px rgb(216 69 60 / .15); } }
body.no-chips .clue__meta .chip--timer{ display:inline-flex; }
.chip__bar{
  display:block; width:clamp(50px,6vw,90px); height:8px; border-radius:var(--r-pill);
  background:var(--fill-2); overflow:hidden;
}
.chip__bar i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--accent-2), var(--accent));
  border-radius:inherit;
  transition:width .6s var(--ease);
}

/* ──────────────── Birds ──────────────── */

/* The field is the one touch surface. app.js hit-tests every tap
   against the birds, with a little forgiveness for small hands. */
.field{ position:absolute; inset:0; z-index:30; touch-action:none; }

.bubble{
  position:absolute; top:0; left:0;
  width:var(--d); height:var(--d);
  pointer-events:none;
  /* app.js writes transform directly every frame */
  will-change:transform;
  contain:layout style;
}

/* Entry, shake, burst and exit play here, so they never fight the
   position transform on the parent. */
.bubble__fx{
  position:absolute; inset:0;
  animation:bubbleIn .42s var(--spring) backwards;
}
.bubble.is-wrong .bubble__fx{ animation:shake .46s var(--ease); }
.bubble.is-burst .bubble__fx{ animation:burst .36s var(--ease) forwards; }
.bubble.is-leaving .bubble__fx{ animation:fadeOut .3s var(--ease) forwards; }
/* The right bird, revealed: it grows, glows and pulses so the whole room sees it */
.bubble.is-hint{ z-index:5; }
.bubble.is-hint .bubble__fx{ animation:hintGrow .5s var(--spring) forwards; }
.bubble.is-hint .bubble__body{
  border-color:#fff;
  box-shadow:0 0 0 6px var(--accent), 0 0 0 12px rgb(var(--accent-rgb) / .35), 0 0 50px rgb(var(--accent-rgb) / .9);
  animation:hintPulse 1s ease-in-out infinite alternate;
}
@keyframes hintGrow{ to{ transform:scale(1.35); } }
@keyframes hintPulse{
  from{ box-shadow:0 0 0 6px var(--accent), 0 0 0 12px rgb(var(--accent-rgb) / .35), 0 0 40px rgb(var(--accent-rgb) / .7); }
  to  { box-shadow:0 0 0 8px var(--accent), 0 0 0 20px rgb(var(--accent-rgb) / .25), 0 0 70px rgb(var(--accent-rgb) / 1); }
}

@keyframes bubbleIn{ from{ transform:scale(.2); opacity:0; } to{ transform:scale(1); opacity:1; } }
@keyframes shake{
  0%,100%{ transform:translateX(0) rotate(0); }
  15%{ transform:translateX(-14px) rotate(-7deg); }
  35%{ transform:translateX(14px) rotate(7deg); }
  55%{ transform:translateX(-10px) rotate(-5deg); }
  78%{ transform:translateX(7px) rotate(3deg); }
}
@keyframes burst{
  0%  { transform:scale(1); opacity:1; }
  40% { transform:scale(1.35); opacity:1; }
  100%{ transform:scale(.1); opacity:0; }
}
@keyframes fadeOut{ to{ transform:scale(.55); opacity:0; } }

/* Everything inside bobs gently, so the bird rides on its flight path. */
.bubble__in{
  position:absolute; inset:0;
  animation:bob var(--bob,2.4s) ease-in-out infinite alternate;
}
@keyframes bob{ from{ transform:translateY(-4%); } to{ transform:translateY(4%); } }

/* The round body carries the word. */
.bubble__body{
  position:absolute; inset:0;
  display:grid; place-items:center;
  padding:6px;
  border-radius:50%;
  border:4px solid rgb(255 255 255 / .5);
  background:
    radial-gradient(circle at 32% 26%, rgb(255 255 255 / .45), rgb(255 255 255 / 0) 48%),
    var(--bubble-colour, #2b4c9b);
  box-shadow:0 10px 24px rgb(0 0 0 / .35), inset 0 -10px 22px rgb(0 0 0 / .2);
  overflow:hidden;
  z-index:2;
  /* app.js sizes --fs per word so the longest one still fills the body */
  font-size:var(--fs);
  font-weight:700;
  line-height:1.1;
  color:#fff;
  text-align:center;
  text-shadow:0 2px 4px rgb(0 0 0 / .5);
  transition:box-shadow .3s var(--ease);
}
.bubble__word{ padding:0 2px; white-space:nowrap; position:relative; z-index:3; display:inline-block; }

/* ── The drawn bird around it ── */
.bird{
  position:absolute; left:50%; top:50%;
  width:190%; height:190%;
  transform:translate(-50%,-50%) scaleX(var(--face,1));
  color:var(--bubble-colour, #2b4c9b);
  z-index:1;
}
.bird svg{ width:100%; height:100%; display:block; overflow:visible; }
.bird__back{ fill:currentColor; filter:brightness(.72); }
.bird__beak{ fill:#f6a21a; }
.bird__wing{
  transform-box:fill-box;
  animation:flap var(--flap,560ms) ease-in-out infinite alternate;
}
.bird__wing--l{ transform-origin:100% 50%; }
.bird__wing--r{ transform-origin:0% 50%; animation-name:flapR; }
@keyframes flap { from{ transform:rotate(20deg); }  to{ transform:rotate(-26deg); } }
@keyframes flapR{ from{ transform:rotate(-20deg); } to{ transform:rotate(26deg); } }

/* ── Picture birds: the word rides on a pill below the bird ── */
.birdpic{
  position:absolute;
  left:50%; bottom:30%; top:auto;
  /* cropped to the bird, so height drives the size and the aspect follows */
  height:76%; width:auto; max-width:112%;
  transform:translateX(-50%) scaleX(var(--face,1));
  pointer-events:none;
  z-index:1;
}
body.birds-photo .bubble__body{
  top:auto;
  height:38%;
  border-radius:var(--r-pill);
  padding:2px 10px;
  border-width:3px;
  box-shadow:0 7px 16px rgb(0 0 0 / .4);
}
body.birds-photo .bird{ display:none; }
body.birds-drawn .birdpic{ display:none; }

/* ──────────────── Particles ──────────────── */

.particles{ position:absolute; inset:0; z-index:48; pointer-events:none; }
.spark{
  position:absolute;
  width:var(--s,14px); height:var(--s,14px);
  margin:calc(var(--s,14px) / -2) 0 0 calc(var(--s,14px) / -2);
  border-radius:4px;
  background:var(--c,var(--accent));
  animation:fly var(--t,760ms) var(--ease) forwards;
  will-change:transform,opacity;
}
@keyframes fly{
  from{ transform:translate3d(0,0,0) rotate(0) scale(1); opacity:1; }
  to  { transform:translate3d(var(--dx),var(--dy),0) rotate(var(--rot,320deg)) scale(.2); opacity:0; }
}

/* ──────────────── Buddy buttons ──────────────── */

.buddy{
  position:absolute; bottom:calc(clamp(12px,2.4vh,30px) + env(safe-area-inset-bottom,0px));
  z-index:55;
  width:var(--buddy-d); height:var(--buddy-d);
  display:grid; place-content:center; justify-items:center; gap:0;
  border-radius:50%;
  border:6px solid var(--accent);
  background:radial-gradient(circle at 34% 28%, var(--bg-3), var(--bg) 66%);
  color:var(--accent);
  box-shadow:var(--shadow-hard), 0 0 0 6px rgb(var(--accent-rgb) / .14);
  transition:transform .14s var(--ease), box-shadow .2s var(--ease), opacity .2s var(--ease);
}
.buddy--left{ left:clamp(12px,2vw,34px); }
.buddy--right{ right:clamp(12px,2vw,34px); }
.buddy:active{ transform:scale(.93); }
.buddy__emoji{ font-size:calc(var(--buddy-d) * .42); line-height:1; }
.buddy__text{
  font-size:calc(var(--buddy-d) * .13);
  font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  margin-top:2px;
}
.buddy.is-spent{ opacity:.45; }
body.no-buddy .buddy{ display:none; }

/* ── Buddy break: the whole screen goes black while a teammate swaps in ── */
.buddy-break{
  position:absolute; inset:0; z-index:95;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(10px,2vh,24px);
  padding:24px; text-align:center;
  background:#000; color:#fff;
  cursor:pointer; touch-action:none;
  animation:fadeIn .25s var(--ease);
}
.buddy-break__emoji{ margin:0; font-size:clamp(64px,14vh,160px); line-height:1; }
.buddy-break__title{ margin:0; font-size:clamp(28px,6vh,72px); color:var(--accent); line-height:1.15; }
.buddy-break__hint{ margin:0; font-size:clamp(16px,2.6vh,28px); color:#ccc; }

/* ──────────────── Toast ──────────────── */

.toast{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) scale(.6);
  z-index:70;
  max-width:88vw;
  padding:clamp(14px,2.4vh,30px) clamp(26px,4vw,64px);
  border-radius:var(--r-lg);
  border:5px solid var(--accent);
  background:rgb(var(--bg-rgb) / .96);
  color:#fff;
  font-size:clamp(26px,6.5vh,76px);
  font-weight:700;
  letter-spacing:.01em;
  text-align:center;
  text-shadow:0 3px 0 rgb(0 0 0 / .3);
  box-shadow:var(--shadow-hard);
  opacity:0; pointer-events:none;
}
.toast.is-on{ animation:toastIn 1.1s var(--ease) forwards; }
.toast.is-good{ border-color:var(--accent); background:rgb(20 112 66 / .96); }
.toast.is-bad{ border-color:#ffb3ae; background:rgb(140 38 32 / .96); }
.toast.is-info{ background:rgb(var(--bg-rgb) / .96); color:var(--text); text-shadow:none; }
.toast.is-big{ animation-duration:2.4s; }
@keyframes toastIn{
  0%  { opacity:0; transform:translate(-50%,-50%) scale(.5) rotate(-5deg); }
  20% { opacity:1; transform:translate(-50%,-50%) scale(1.08) rotate(2deg); }
  34% { transform:translate(-50%,-50%) scale(1) rotate(0); }
  82% { opacity:1; transform:translate(-50%,-50%) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(.92); }
}

/* ──────────────── Shared buttons ──────────────── */

.btn{
  min-height:52px;
  padding:12px 22px;
  border:3px solid var(--accent);
  border-radius:var(--r-md);
  background:var(--fill);
  color:var(--accent);
  font-weight:700; font-size:clamp(14px,1.8vh,18px);
  transition:transform .14s var(--ease), background .14s var(--ease), filter .14s var(--ease);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn:active{ transform:scale(.96); }
.btn--primary{ background:var(--accent); color:var(--on-accent); }
.btn--ghost{ border-color:var(--fill-2); color:var(--text); }
.btn--warn{ border-color:var(--bad-soft); color:var(--bad-soft); }
[data-theme="parchment"] .btn--warn,
[data-theme="formalLight"] .btn--warn,
[data-theme="corporate"] .btn--warn{ border-color:var(--bad); color:var(--bad); }
.btn--file{ cursor:pointer; }
.btn--big{ font-size:clamp(16px,2.6vh,26px); padding:clamp(12px,2vh,20px) clamp(24px,4vw,56px); }
.btn--huge{ width:100%; font-size:clamp(22px,3.6vh,38px); min-height:clamp(70px,10vh,110px); border-radius:var(--r-lg); }
@media (hover:hover){
  .btn:hover{ background:rgb(var(--accent-rgb) / .2); }
  .btn--primary:hover{ background:var(--accent); filter:brightness(1.08); }
  .btn--warn:hover{ background:rgb(216 69 60 / .16); }
}
.btn-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

/* ──────────────── Pause menu ──────────────── */

.pause{
  position:absolute; inset:0; z-index:90;
  display:grid; place-items:center;
  padding:16px;
  background:rgb(var(--bg-rgb) / .72);
  animation:fadeIn .2s var(--ease);
}
@keyframes fadeIn{ from{ opacity:0; } }
.pause__box{
  width:min(92vw, 640px);
  display:flex; flex-direction:column; gap:clamp(12px,2vh,20px);
  padding:clamp(18px,3vh,34px);
  background:var(--bg);
  border:4px solid var(--accent);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-hard);
  animation:modalIn .26s var(--spring);
}
.pause__title{ margin:0; text-align:center; font-size:clamp(26px,4.4vh,48px); color:var(--accent); }
.pause__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:10px; }

.tile-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  min-height:clamp(84px,11vh,116px);
  padding:10px;
  border:3px solid var(--fill-2);
  border-radius:var(--r-md);
  background:var(--fill);
  color:var(--text);
  font-weight:700; font-size:clamp(14px,1.8vh,18px);
  transition:transform .14s var(--ease), background .14s var(--ease), border-color .14s var(--ease);
}
.tile-btn > span{ font-size:clamp(24px,3.4vh,36px); line-height:1; }
.tile-btn:active{ transform:scale(.95); }
.tile-btn--warn{ color:var(--bad-soft); }
.tile-btn.is-on{ border-color:var(--accent); color:var(--accent); }
[data-theme="parchment"] .tile-btn--warn,
[data-theme="formalLight"] .tile-btn--warn,
[data-theme="corporate"] .tile-btn--warn{ color:var(--bad); }
/* Armed for a second tap: it glows, but never moves under the finger */
.tile-btn.is-armed{ background:var(--bad); border-color:var(--bad-soft); color:#fff; animation:armed .7s ease-in-out infinite alternate; }
@keyframes armed{ from{ box-shadow:0 0 0 0 rgb(216 69 60 / .6); } to{ box-shadow:0 0 0 8px rgb(216 69 60 / .25); } }
@media (hover:hover){ .tile-btn:hover{ border-color:var(--accent); background:rgb(var(--accent-rgb) / .14); } }

/* ──────────────── "Team got it!" ──────────────── */

.gotit{
  position:absolute; inset:0; z-index:85;
  display:grid; place-items:center;
  padding:16px;
  background:rgb(var(--bg-rgb) / .62);
  animation:fadeIn .2s var(--ease);
}
.gotit__box{
  position:relative;
  width:min(92vw, 820px);
  display:flex; flex-direction:column; align-items:center; gap:clamp(8px,1.6vh,16px);
  padding:clamp(22px,4vh,46px) clamp(20px,3vw,44px) clamp(18px,3vh,32px);
  text-align:center;
  background:var(--bg);
  border:6px solid var(--team-colour, var(--accent));
  border-radius:var(--r-lg);
  box-shadow:0 0 0 8px rgb(var(--accent-rgb) / .15), var(--shadow-hard);
  overflow:hidden;
  animation:gotitIn .45s var(--spring);
}
@keyframes gotitIn{ from{ opacity:0; transform:scale(.7) translateY(30px); } }
.gotit__burst{ margin:0; font-size:clamp(46px,8vh,90px); line-height:1; animation:pop .7s var(--spring); }
.gotit.is-miss .gotit__box{ border-color:var(--bad); }
.gotit.is-miss .gotit__team{ color:var(--bad-soft); }
[data-theme="parchment"] .gotit.is-miss .gotit__team,
[data-theme="formalLight"] .gotit.is-miss .gotit__team,
[data-theme="corporate"] .gotit.is-miss .gotit__team{ color:var(--bad); }
.gotit__team{
  margin:0;
  font-size:clamp(34px,7vh,84px); line-height:1.05; font-weight:700;
  color:var(--team-colour, var(--accent));
  text-shadow:0 3px 0 rgb(0 0 0 / .15);
}
.gotit__word{ margin:0; font-size:clamp(18px,2.8vh,30px); color:var(--muted); font-weight:600; }
.gotit__word b{ color:var(--text); }
.gotit__next{
  margin:4px 0 6px;
  padding:clamp(10px,1.6vh,16px) clamp(16px,2vw,26px);
  border-radius:var(--r-md);
  background:var(--fill-2);
  font-size:clamp(20px,3.4vh,38px); font-weight:700; color:var(--text);
}
.gotit .btn--huge{ max-width:520px; }
.gotit__timer{
  position:absolute; left:0; right:0; bottom:0; height:8px;
  background:var(--fill-2);
}
.gotit__timer i{ display:block; height:100%; width:100%; background:var(--team-colour, var(--accent)); transition:width .1s linear; }

/* ──────────────── Home ──────────────── */

.home{
  position:fixed; inset:0; z-index:400;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(16px,3vh,40px) 16px;
  overflow-y:auto;
  background:
    radial-gradient(ellipse at 50% 0%, rgb(var(--accent-rgb) / .22), transparent 60%),
    linear-gradient(180deg, rgb(var(--bg-rgb) / .78), rgb(var(--bg-rgb) / .94));
  animation:fadeIn .35s var(--ease);
  touch-action:pan-y;
}
body:not(.is-home) .home{ display:none; }
/* Nothing from the game shows through the home screen */
body.is-home .hud,
body.is-home .clue,
body.is-home .buddy,
body.is-home .banner,
body.is-home .field,
body.is-home .bracket{ visibility:hidden; }

.home__inner{
  width:min(100%, 1180px);
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(16px,3.2vh,38px);
  margin:auto 0;
}
.home__hero{ display:flex; align-items:center; gap:clamp(16px,3vw,44px); }
.home__logo{
  width:clamp(120px,22vh,250px); height:auto;
  filter:drop-shadow(0 12px 28px rgb(0 0 0 / .45));
  animation:logoIn .7s var(--spring) both, float 5s ease-in-out .7s infinite;
}
@keyframes logoIn{ from{ opacity:0; transform:scale(.6) rotate(-12deg); } }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
.home__title{
  margin:0;
  font-size:clamp(46px,10vh,120px); font-weight:700; line-height:.95;
  color:var(--accent);
  letter-spacing:-.01em;
  text-shadow:0 5px 0 rgb(0 0 0 / .18);
}
.home__sub{ margin:12px 0 0; font-size:clamp(16px,2.4vh,26px); font-weight:600; color:var(--text); max-width:30ch; line-height:1.3; }
.home__facts{ margin:12px 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.home__facts .chip{ font-size:clamp(12px,1.6vh,16px); padding:5px 14px; }

.home__modes{
  width:100%;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:clamp(12px,1.8vw,24px);
}
.mode-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  min-height:clamp(150px,24vh,250px);
  padding:clamp(14px,2.4vh,28px) 18px;
  border:4px solid var(--line);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--bg-2), var(--bg));
  color:var(--text);
  box-shadow:var(--shadow-hard);
  text-align:center;
  transition:transform .18s var(--spring), border-color .18s var(--ease), box-shadow .18s var(--ease);
  animation:cardIn .5s var(--spring) backwards;
}
.mode-card:nth-child(2){ animation-delay:.06s; }
.mode-card:nth-child(3){ animation-delay:.12s; }
@keyframes cardIn{ from{ opacity:0; transform:translateY(24px); } }
.mode-card:active{ transform:scale(.97); }
.mode-card__icon{ font-size:clamp(40px,7vh,76px); line-height:1; }
.mode-card__name{ font-size:clamp(22px,3.8vh,40px); font-weight:700; color:var(--accent); }
.mode-card__desc{ font-size:clamp(13px,1.8vh,18px); font-weight:600; color:var(--muted); max-width:26ch; line-height:1.3; }
.mode-card--practice{ border-style:dashed; border-color:var(--good); }
.mode-card--practice .mode-card__name{ color:var(--good); }
.mode-card--continue{
  background:var(--accent); border-color:var(--accent);
}
.mode-card--continue .mode-card__name,
.mode-card--continue .mode-card__desc,
.mode-card--continue .mode-card__icon{ color:var(--on-accent); }
@media (hover:hover){
  .mode-card:hover{ border-color:var(--accent); transform:translateY(-4px); }
}

/* Theme picker: one tidy group in the lower right corner */
.home__theme{
  position:fixed; right:clamp(12px,1.6vw,24px); bottom:clamp(12px,2vh,24px);
  z-index:2;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
.theme-btn{
  display:flex; align-items:center; gap:12px;
  min-height:60px;
  padding:8px 16px 8px 8px;
  border:3px solid var(--fill-2);
  border-radius:var(--r-pill);
  background:rgb(var(--bg-rgb) / .92);
  color:var(--text);
  box-shadow:var(--shadow-soft);
  transition:border-color .15s var(--ease), transform .12s var(--ease);
}
.theme-btn:active{ transform:scale(.96); }
.theme-btn[aria-expanded="true"]{ border-color:var(--accent); }
@media (hover:hover){ .theme-btn:hover{ border-color:var(--accent); } }
.theme-btn__chips{
  display:flex; width:42px; height:42px; border-radius:50%; overflow:hidden;
  box-shadow:inset 0 0 0 2px rgb(0 0 0 / .15);
}
.theme-btn__chips i{ flex:1; }
.theme-btn__chips i:first-child{ flex:2; }
.theme-btn__text{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.15; }
.theme-btn__text small{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.theme-btn__text b{ font-size:16px; color:var(--accent); }
.theme-btn__caret{ font-size:14px; color:var(--muted); transition:transform .2s var(--ease); }
.theme-btn[aria-expanded="true"] .theme-btn__caret{ transform:rotate(180deg); }

.theme-pop{
  width:min(92vw, 560px);
  max-height:70vh; overflow-y:auto;
  padding:14px;
  border:3px solid var(--accent);
  border-radius:var(--r-lg);
  background:var(--bg);
  box-shadow:var(--shadow-hard);
  transform-origin:bottom right;
  animation:popIn .22s var(--spring);
  touch-action:pan-y;
}
.theme-pop .home__label{ margin:0 0 8px; }
@keyframes popIn{ from{ opacity:0; transform:scale(.85) translateY(10px); } }
.swatches--pop{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); margin:0; }
@media (max-width:900px), (max-height:640px){
  .home__theme{ position:static; margin-top:16px; align-self:center; align-items:center; }
}
.home__label{ font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

.home__bar{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.pill-btn{
  min-height:54px;
  padding:10px 22px;
  border:3px solid var(--fill-2);
  border-radius:var(--r-pill);
  background:var(--fill);
  color:var(--text);
  font-weight:700; font-size:clamp(14px,1.9vh,19px);
  transition:transform .14s var(--ease), border-color .14s var(--ease);
}
.pill-btn:active{ transform:scale(.95); }
.pill-btn.is-on{ border-color:var(--accent); color:var(--accent); }
.pill-btn[aria-expanded="true"]{ border-color:var(--accent); color:var(--accent); }
@media (hover:hover){ .pill-btn:hover{ border-color:var(--accent); } }

.howto{
  list-style:none; margin:0; padding:0;
  width:100%;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:12px;
  counter-reset:step;
  animation:paneIn .25s var(--ease);
}
.howto li{
  counter-increment:step;
  position:relative;
  padding:16px 18px 16px 62px;
  border-radius:var(--r-md);
  background:var(--fill);
  font-size:clamp(14px,1.9vh,18px); line-height:1.4;
}
.howto li::before{
  content:counter(step);
  position:absolute; left:16px; top:14px;
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--accent); color:var(--on-accent); font-weight:700;
}
.howto b{ color:var(--accent); }
.home__credit{ margin:18px 0 0; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); opacity:.7; }

@media (max-width:760px){
  .home__hero{ flex-direction:column; text-align:center; }
  .home__facts{ justify-content:center; }
  .home__sub{ margin-left:auto; margin-right:auto; }
}

/* ──────────────── Theme swatches ──────────────── */

.swatches{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; margin-top:8px; }
.swatch{
  display:flex; flex-direction:column; gap:8px;
  padding:10px;
  border:3px solid var(--fill-2);
  border-radius:var(--r-md);
  background:var(--fill);
  color:var(--text);
  font-weight:700; font-size:14px; text-align:left;
  transition:transform .14s var(--ease), border-color .14s var(--ease);
}
.swatch:active{ transform:scale(.96); }
.swatch[aria-checked="true"]{ border-color:var(--accent); box-shadow:0 0 0 3px rgb(var(--accent-rgb) / .25); }
.swatch__chips{
  display:flex; height:42px; border-radius:var(--r-sm); overflow:hidden;
  box-shadow:inset 0 0 0 1px rgb(0 0 0 / .15);
}
.swatch__chips i{ flex:1; }
.swatch__chips i:first-child{ flex:2; }
.swatches--mini{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0; }
.swatches--mini .swatch{ padding:5px; border-radius:50%; }
.swatches--mini .swatch__chips{ width:46px; height:46px; border-radius:50%; }
.swatches--mini .swatch__name{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ──────────────── Settings modal ──────────────── */

.modal{ position:fixed; inset:0; z-index:500; display:grid; place-items:center; padding:12px; }
.modal__scrim{ position:absolute; inset:0; background:rgb(0 0 0 / .62); }
.modal__box{
  position:relative;
  width:min(96vw, 1080px);
  height:min(92vh, 880px);
  display:flex; flex-direction:column;
  background:var(--bg);
  border:4px solid var(--accent);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-hard);
  overflow:hidden;
  animation:modalIn .26s var(--ease);
}
@keyframes modalIn{ from{ opacity:0; transform:translateY(22px) scale(.97); } }

.modal__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(10px,1.8vh,18px) clamp(16px,2.4vw,28px);
  border-bottom:2px solid var(--line);
  background:var(--bg-2);
}
.modal__head h2{ margin:0; font-size:clamp(20px,2.8vh,30px); color:var(--accent); }
.icon-btn--close{ border-color:var(--fill-2); color:var(--text); }

.modal__main{ flex:1 1 auto; display:flex; min-height:0; }

.tabs{
  flex:0 0 auto;
  display:flex; flex-direction:column; gap:6px;
  width:clamp(170px,18vw,220px);
  padding:14px 12px;
  background:var(--bg-2);
  border-right:2px solid var(--line);
  overflow-y:auto;
}
.tab{
  display:flex; align-items:center; gap:12px;
  min-height:54px;
  padding:10px 14px;
  border:3px solid transparent;
  border-radius:var(--r-md);
  background:transparent;
  color:var(--text);
  font-weight:700; font-size:clamp(15px,1.9vh,18px);
  text-align:left;
  transition:background .14s var(--ease), border-color .14s var(--ease);
}
.tab > span{ font-size:1.25em; width:1.4em; text-align:center; }
.tab.is-active{ background:rgb(var(--accent-rgb) / .16); border-color:var(--accent); color:var(--accent); }
@media (hover:hover){ .tab:not(.is-active):hover{ background:var(--fill); } }

.modal__body{
  flex:1 1 auto;
  padding:clamp(14px,2.4vh,26px) clamp(16px,2.6vw,32px);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}
.pane{ display:none; }
.pane.is-active{ display:block; animation:paneIn .2s var(--ease); }
@keyframes paneIn{ from{ opacity:0; transform:translateY(8px); } }
.pane__title{ margin:0 0 16px; font-size:clamp(20px,2.6vh,28px); color:var(--accent); }

.group{
  padding:clamp(12px,1.8vh,18px) clamp(14px,1.6vw,20px);
  margin-bottom:14px;
  border-radius:var(--r-md);
  background:var(--fill);
  display:flex; flex-direction:column; gap:14px;
}
.group > .hint{ margin:-6px 0 0; }

.hint{ margin:6px 0 0; font-size:clamp(13px,1.6vh,15px); color:var(--muted); opacity:.9; line-height:1.5; }
.hint code{
  background:var(--fill-2); padding:1px 6px; border-radius:6px;
  font-size:.92em; color:var(--accent);
}
.hint:empty{ display:none; }

.row{ display:block; }
.row__label{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  font-weight:700; font-size:clamp(14px,1.8vh,17px); margin-bottom:9px;
}
.row__label output{
  margin-left:auto;
  min-width:2.4em; text-align:center;
  color:var(--on-accent); background:var(--accent);
  padding:2px 12px; border-radius:var(--r-pill);
  font-variant-numeric:tabular-nums; font-weight:700;
}
.row__unit{ font-weight:600; color:var(--muted); font-size:.9em; margin-left:-4px; }

/* Segmented control: big, finger-friendly choices instead of drop-downs */
.seg{
  display:flex; flex-wrap:wrap; gap:6px;
  padding:5px;
  border-radius:var(--r-md);
  background:var(--fill-2);
}
.seg button{
  flex:1 1 0; min-width:90px; min-height:50px;
  padding:8px 12px;
  border:none; border-radius:calc(var(--r-md) - 4px);
  background:transparent;
  color:var(--text);
  font-weight:700; font-size:clamp(14px,1.8vh,17px);
  transition:background .15s var(--ease), color .15s var(--ease), transform .12s var(--ease);
}
.seg button:active{ transform:scale(.96); }
.seg button.is-on{ background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow-soft); }

input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:14px; border-radius:var(--r-pill);
  background:var(--fill-2);
  margin:12px 0;
  touch-action:pan-y;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:38px; height:38px; border-radius:50%;
  background:var(--accent); border:5px solid var(--bg);
  box-shadow:0 2px 8px rgb(0 0 0 / .4); cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:30px; height:30px; border-radius:50%;
  background:var(--accent); border:5px solid var(--bg);
  box-shadow:0 2px 8px rgb(0 0 0 / .4); cursor:pointer;
}

.switches{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px; margin-bottom:14px; }
.group .switches{ margin-bottom:0; }
.switch{
  display:flex; align-items:center; gap:14px;
  min-height:58px;
  padding:10px 14px; border-radius:var(--r-md);
  background:var(--fill);
  border:3px solid transparent;
  font-size:clamp(14px,1.7vh,16px); font-weight:600;
  cursor:pointer;
  transition:border-color .15s var(--ease), background .15s var(--ease);
}
.group > .switch{ background:var(--fill); }
/* A real toggle, which reads better than a tick box from across the room */
.switch input{
  appearance:none; -webkit-appearance:none;
  position:relative;
  width:56px; height:32px; flex:0 0 auto;
  margin:0;
  border-radius:var(--r-pill);
  background:var(--fill-2);
  box-shadow:inset 0 0 0 2px rgb(var(--text-rgb) / .2);
  cursor:pointer;
  transition:background .18s var(--ease);
}
.switch input::after{
  content:""; position:absolute; top:4px; left:4px;
  width:24px; height:24px; border-radius:50%;
  background:var(--text);
  transition:transform .2s var(--spring);
}
.switch input:checked{ background:var(--accent); box-shadow:none; }
.switch input:checked::after{ transform:translateX(24px); background:var(--on-accent); }
.switch:has(input:checked){ border-color:rgb(var(--accent-rgb) / .5); }

.vocab, .text-input{
  width:100%;
  min-height:52px;
  padding:12px 14px;
  border:3px solid var(--line);
  border-radius:var(--r-md);
  background:rgb(var(--bg-rgb) / .6);
  color:var(--text);
  font-size:clamp(14px,1.8vh,17px);
  line-height:1.6;
}
.vocab{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; resize:vertical; min-height:300px; }
.vocab:focus, .text-input:focus{ border-color:var(--accent); outline:none; }
.vocab__count{ margin:8px 0 14px; font-size:14px; font-weight:600; color:var(--muted); }
.vocab__count.is-bad{ color:var(--bad-soft); }

select.text-input{
  appearance:none; -webkit-appearance:none;
  font-weight:600;
  background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),
                   linear-gradient(135deg,var(--accent) 50%,transparent 50%);
  background-position:calc(100% - 22px) calc(50% - 2px), calc(100% - 15px) calc(50% - 2px);
  background-size:7px 7px, 7px 7px;
  background-repeat:no-repeat;
  padding-right:46px;
  cursor:pointer;
}
select.text-input option{ background:var(--bg); color:var(--text); }

.team-names{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:10px; margin-bottom:14px; }
.team-name{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px 8px 8px;
  border-radius:var(--r-md);
  background:var(--fill);
}
.team-name__dot{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--team-colour); color:#fff; font-weight:700;
}
.team-name .text-input{ min-height:46px; padding:8px 12px; }
.team-name__del{
  flex:0 0 auto; width:46px; height:46px;
  border:2px solid var(--fill-2); border-radius:var(--r-md);
  background:transparent; color:var(--muted); font-size:18px; font-weight:700;
}
.team-name__del:disabled{ opacity:.3; cursor:default; }
@media (hover:hover){ .team-name__del:not(:disabled):hover{ border-color:var(--bad-soft); color:var(--bad-soft); } }
.btn:disabled{ opacity:.4; cursor:default; }

/* The music player lives off screen: only its sound is wanted */
.music-box{ position:fixed; left:-10000px; top:0; width:320px; height:180px; overflow:hidden; pointer-events:none; opacity:0; }
.music-box iframe{ width:320px; height:180px; border:0; }

.keys{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px 16px; font-size:14px; color:var(--muted); }
kbd{
  display:inline-block; min-width:28px; padding:2px 8px; margin-right:4px;
  border-radius:6px; border:2px solid var(--fill-2); border-bottom-width:4px;
  background:var(--fill); color:var(--text); font:inherit; font-weight:700; font-size:13px; text-align:center;
}

.modal__foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:clamp(10px,1.6vh,16px) clamp(16px,2.4vw,28px);
  border-top:2px solid var(--line);
  background:var(--bg-2);
}
.modal__credit{ margin:0; font-size:12px; color:var(--muted); opacity:.75; letter-spacing:.06em; text-transform:uppercase; }

@media (max-width:760px){
  .modal__main{ flex-direction:column; }
  .tabs{
    flex-direction:row; width:auto; overflow-x:auto; overflow-y:hidden;
    border-right:none; border-bottom:2px solid var(--line);
    padding:8px; touch-action:pan-x;
  }
  .tab{ flex:0 0 auto; min-height:46px; }
  .modal__credit{ display:none; }
}

/* ──────────────── Calm mode / reduced motion ──────────────── */

body.calm .tile{ transition-duration:.3s; }
body.calm .bubble__fx{ animation-duration:.2s; }
body.calm .bird__wing{ animation-duration:1.4s; }
body.calm .bubble__in{ animation:none; }
body.calm .spark{ display:none; }
body.calm .home__logo{ animation:none; }
body.calm .banner.is-up{ animation:none; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.08s !important; }
}

/* ──────────────── Narrow screens ──────────────── */

@media (max-width:760px){
  .clue{ width:min(94vw, 680px); }
  .team__name{ font-size:10px; }
  .buddy__text{ display:none; }
  .hud__sep{ display:none; }
}
@media (max-height:520px){
  .clue__meta{ display:none; }
}

/* ============================================================
   Duel mode: split screen, side banners, bracket
   ============================================================ */

/* ── Centre divider ── */
.divider{
  position:absolute; top:0; bottom:0; left:50%;
  width:0; z-index:28;
  opacity:0; pointer-events:none;
  border-left:4px dashed rgb(var(--accent-rgb) / .6);
  transform:translateX(-2px);
  transition:opacity .3s var(--ease);
}
body.is-split .divider{ opacity:1; }

/* ── A locked-out half after a wrong tap ── */
.lockout{
  position:absolute; top:0; bottom:0; width:50%;
  z-index:44; pointer-events:none;
  background:repeating-linear-gradient(135deg,
    rgb(216 69 60 / .28) 0 22px, rgb(216 69 60 / .12) 22px 44px);
  animation:lockFade var(--lock-ms,2000ms) linear forwards;
}
.lockout--0{ left:0; }
.lockout--1{ right:0; }
@keyframes lockFade{ from{ opacity:1; } to{ opacity:0; } }

/* ── Side banners: one each side of the question, on the same level, so
   the whole field below is left free for the birds ── */
:root{ --banner-w:clamp(104px,14vw,230px); --banner-gap:clamp(8px,1.2vw,20px); }
body.is-duel .clue{ width:calc(100vw - 2 * var(--banner-w) - 4 * var(--banner-gap)); }
.banner{
  position:absolute; top:calc(var(--hud-h) + 12px);
  z-index:46; pointer-events:none;
  width:var(--banner-w);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(4px,.8vh,8px);
  padding:clamp(6px,1.1vh,12px) 8px;
  border-radius:var(--r-lg);
  border:4px solid var(--team-colour,var(--accent));
  background:rgb(var(--bg-rgb) / .92);
  box-shadow:var(--shadow-hard);
  overflow:hidden;
}
.banner--left{ left:var(--banner-gap); }
.banner--right{ right:var(--banner-gap); }
.banner__name{
  font-size:clamp(12px,1.9vh,22px); font-weight:700; color:var(--text);
  line-height:1.15; text-align:center; overflow-wrap:anywhere; max-width:100%;
}
.banner__pips{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(4px,.8vh,8px); }
.banner .pip{ width:clamp(14px,2.4vh,26px); height:clamp(14px,2.4vh,26px); }
.banner__buddy{
  font-size:clamp(11px,1.5vh,16px); color:var(--muted); opacity:.9;
  text-align:center; line-height:1.2; overflow-wrap:anywhere; max-width:100%;
}
.banner__buddy:empty{ display:none; }
.banner.is-up{ animation:upPulse 1.4s ease-in-out infinite; }
@keyframes upPulse{
  0%,100%{ box-shadow:0 0 0 4px rgb(var(--accent-rgb) / .35), var(--shadow-hard); }
  50%    { box-shadow:0 0 0 9px rgb(var(--accent-rgb) / .6), var(--shadow-hard); }
}

/* ── Score pips ── */
.pip{
  width:clamp(13px,1.8vh,22px); height:clamp(13px,1.8vh,22px);
  border-radius:50%;
  border:3px solid rgb(var(--text-rgb) / .4);
  transition:background .25s var(--ease), transform .25s var(--spring);
}
.pip.is-on{ background:var(--accent); border-color:var(--accent); transform:scale(1.12); }

/* ── Bracket overlay ── */
.bracket{
  position:fixed; inset:0; z-index:300;
  display:grid; place-items:center;
  padding:12px;
  background:rgb(var(--bg-rgb) / .9);
}
.bracket__box{
  width:min(96vw,1400px); max-height:94vh;
  display:flex; flex-direction:column;
  background:var(--bg);
  border:4px solid var(--accent);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-hard);
  overflow:hidden;
  animation:modalIn .3s var(--ease);
}
.bracket__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:clamp(14px,2.4vh,26px) clamp(18px,2.6vw,32px);
  border-bottom:2px solid var(--line);
  background:var(--bg-2);
}
.bracket__title{ margin:0; font-size:clamp(24px,4.2vh,46px); color:var(--accent); line-height:1.1; }
.bracket__sub{ margin:6px 0 0; font-size:clamp(14px,2vh,20px); color:var(--muted); }
.bracket__sub:empty{ display:none; }

.bracket__body{
  flex:1 1 auto; overflow:auto;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(14px,3vw,52px);
  padding:clamp(16px,3vh,36px) clamp(18px,2.6vw,32px);
  touch-action:pan-x pan-y;
}
.bcol{ display:flex; flex-direction:column; gap:clamp(10px,2vh,22px); min-width:clamp(150px,16vw,230px); }
.bcol__head{
  margin:0 0 4px; text-align:center;
  font-size:clamp(11px,1.4vh,15px); letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); opacity:.75;
}
.bcol.is-now .bcol__head{ color:var(--accent); opacity:1; }

.bmatch{
  display:flex; flex-direction:column; gap:5px;
  padding:9px; border-radius:var(--r-md);
  background:var(--fill);
  border:2px solid transparent;
}
.bcol.is-now .bmatch:not(.is-done){ border-color:rgb(var(--accent-rgb) / .5); background:rgb(var(--accent-rgb) / .08); }
.bmatch.is-next{ box-shadow:0 0 0 4px rgb(var(--accent-rgb) / .35); }
.bmatch__v{ text-align:center; font-size:11px; color:var(--muted); opacity:.6; letter-spacing:.1em; }
.bmatch__bye{
  text-align:center; font-size:clamp(10px,1.3vh,13px);
  color:var(--accent); letter-spacing:.1em; text-transform:uppercase;
}
.bmatch.is-champ{ background:none; border:none; padding:0; }

.bchip{
  display:flex; align-items:center; justify-content:space-between; gap:9px;
  padding:clamp(8px,1.4vh,14px) clamp(10px,1.1vw,16px);
  border-radius:var(--r-sm);
  border-left:8px solid var(--team-colour,var(--muted));
  background:var(--fill-2);
  font-size:clamp(13px,1.9vh,20px); font-weight:700; color:var(--text);
}
.bchip__name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bchip__score{ font-variant-numeric:tabular-nums; font-weight:700; color:var(--accent); flex:0 0 auto; }
.bchip.is-win{ background:rgb(var(--accent-rgb) / .2); box-shadow:inset 0 0 0 2px rgb(var(--accent-rgb) / .55); }
.bchip.is-out{ opacity:.38; }
.bchip.is-empty{
  border-left-color:var(--fill-2);
  color:var(--muted); opacity:.5; font-weight:600; font-style:italic;
  justify-content:center;
}
.bcol--champ .bchip.is-win{
  font-size:clamp(16px,2.8vh,30px);
  padding:clamp(12px,2vh,22px) clamp(12px,1.4vw,22px);
  animation:champGlow 1.8s ease-in-out infinite;
}
@keyframes champGlow{
  0%,100%{ box-shadow:inset 0 0 0 2px rgb(var(--accent-rgb) / .5), 0 0 16px rgb(var(--accent-rgb) / .3); }
  50%    { box-shadow:inset 0 0 0 3px var(--accent), 0 0 42px rgb(var(--accent-rgb) / .65); }
}

.bracket__foot{
  display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap;
  padding:clamp(12px,2vh,22px);
  border-top:2px solid var(--line);
  background:var(--bg-2);
}

@media (max-width:900px){
  .bracket__body{ gap:14px; justify-content:flex-start; }
  .bcol{ min-width:130px; }
}

/* ── Final ranking ── */
.bracket__body.is-ranking{ flex-direction:column; justify-content:flex-start; gap:clamp(16px,3vh,32px); }
.podium{
  display:flex; align-items:flex-end; justify-content:center;
  gap:clamp(8px,1.4vw,20px);
  width:100%; max-width:900px;
  padding-top:8px;
}
.podium__step{
  flex:1 1 0; max-width:260px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  animation:cardIn .6s var(--spring) backwards;
}
.podium__step--1{ animation-delay:.25s; }
.podium__step--3{ animation-delay:.12s; }
.podium__medal{ font-size:clamp(34px,6vh,64px); line-height:1; }
.podium__name{
  max-width:100%;
  font-size:clamp(16px,2.6vh,30px); font-weight:700; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.podium__stat{ font-size:clamp(12px,1.6vh,17px); color:var(--muted); font-weight:600; }
.podium__block{
  width:100%;
  display:grid; place-items:center;
  margin-top:6px;
  border-radius:var(--r-md) var(--r-md) 0 0;
  border-top:8px solid var(--team-colour);
  background:linear-gradient(180deg, rgb(var(--accent-rgb) / .28), rgb(var(--accent-rgb) / .08));
  font-size:clamp(22px,4vh,46px); font-weight:700; color:var(--accent);
}
.podium__step--1 .podium__block{ height:clamp(110px,18vh,190px); }
.podium__step--2 .podium__block{ height:clamp(80px,13vh,140px); }
.podium__step--3 .podium__block{ height:clamp(60px,9vh,100px); }
.podium__step--1 .podium__name{ font-size:clamp(20px,3.2vh,38px); color:var(--accent); }

.ranks{
  list-style:none; margin:0; padding:0;
  width:100%; max-width:900px;
  display:flex; flex-direction:column; gap:6px;
}
.ranks__row{
  display:grid;
  grid-template-columns:minmax(80px,auto) 1fr auto auto minmax(46px,auto);
  align-items:center; gap:clamp(8px,1.4vw,22px);
  padding:clamp(8px,1.2vh,12px) clamp(12px,1.4vw,20px);
  border-radius:var(--r-sm);
  border-left:8px solid var(--team-colour);
  background:var(--fill);
  font-size:clamp(14px,2vh,21px); font-weight:700;
}
.ranks__row.is-top{ background:rgb(var(--accent-rgb) / .12); }
.ranks__place{ color:var(--accent); white-space:nowrap; }
.ranks__name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ranks__stat{ color:var(--muted); font-weight:600; font-size:.88em; white-space:nowrap; text-align:right; }
@media (max-width:760px){
  .ranks__row{ grid-template-columns:auto 1fr auto; }
  .ranks__row .ranks__stat:nth-child(4), .ranks__row .ranks__stat:nth-child(5){ display:none; }
}

/* ── Restart dialog ── */
.restart{
  position:fixed; inset:0; z-index:450;
  display:grid; place-items:center;
  padding:16px;
  background:rgb(0 0 0 / .6);
  animation:fadeIn .2s var(--ease);
}
.restart__box{
  width:min(94vw, 720px);
  max-height:92vh; overflow-y:auto;
  display:flex; flex-direction:column; gap:16px;
  padding:clamp(18px,3vh,32px) clamp(18px,2.6vw,32px);
  background:var(--bg);
  border:4px solid var(--accent);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-hard);
  animation:modalIn .26s var(--spring);
  touch-action:pan-y;
}
.restart__box .hint{ margin:0; }
.restart__title{ margin:0; font-size:clamp(24px,3.6vh,38px); color:var(--accent); }
.restart__actions{ justify-content:flex-end; margin-top:4px; }
.first-picks{ display:flex; flex-wrap:wrap; gap:8px; }
.first-pick{
  min-height:52px; padding:8px 16px;
  border:3px solid var(--fill-2);
  border-left:8px solid var(--team-colour, var(--accent));
  border-radius:var(--r-md);
  background:var(--fill);
  color:var(--text);
  font-weight:700; font-size:clamp(14px,1.8vh,17px);
  transition:transform .12s var(--ease), background .15s var(--ease);
}
.first-pick:active{ transform:scale(.96); }
.first-pick.is-on{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); border-left-color:var(--team-colour, var(--on-accent)); }

/* ── Question editor ── */
.qhead, .qrow{
  display:grid;
  grid-template-columns:36px minmax(120px, 1fr) minmax(200px, 2.2fr) minmax(150px, 1.4fr) 46px;
  gap:8px; align-items:center;
}
.qhead{
  padding:0 4px 6px;
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
}
.qlist{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.qrow{ padding:6px 4px; border-radius:var(--r-md); background:var(--fill); }
.qrow .text-input{ min-height:46px; padding:8px 12px; font-size:clamp(14px,1.7vh,16px); }
.qrow__word{ font-weight:700; }
.qrow__wrong{ font-size:14px !important; color:var(--muted); }
.qrow__num{ text-align:center; font-weight:700; color:var(--accent); }
.qrow__del{
  width:46px; height:46px;
  border:2px solid var(--fill-2); border-radius:var(--r-md);
  background:transparent; color:var(--muted); font-size:18px; font-weight:700;
}
@media (hover:hover){ .qrow__del:hover{ border-color:var(--bad-soft); color:var(--bad-soft); } }
.vocab--short{ min-height:90px; font-family:inherit; }
.paste{ margin-top:12px; }
.paste .vocab{ min-height:160px; }
@media (max-width:900px){
  .qhead{ display:none; }
  .qrow{ grid-template-columns:30px 1fr 46px; }
  .qrow__word{ grid-column:2; }
  .qrow__del{ grid-column:3; grid-row:1; }
  .qrow__clue, .qrow__wrong{ grid-column:2 / span 2; }
}

/* ── Solo: no teams, just a ✓ / ✗ tally ── */
.solo-tally{ display:none; }
body.is-solo .teams{ display:none; }
body.is-solo .buddy{ display:none; }
body.is-solo #btnBracket{ display:none; }
body.is-solo .solo-tally{
  flex:1 1 auto;
  display:flex; align-items:center; justify-content:center; gap:clamp(10px,1.6vw,26px);
  font-weight:700;
}
.solo-tally__label{
  font-size:clamp(12px,1.5vh,16px); letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.solo-tally__ok, .solo-tally__no{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px clamp(14px,1.6vw,24px);
  border-radius:var(--r-pill);
  font-size:clamp(20px,3vh,34px);
  font-variant-numeric:tabular-nums;
}
.solo-tally__ok{ background:rgb(47 158 94 / .2); color:#5fd38f; box-shadow:inset 0 0 0 2px rgb(47 158 94 / .55); }
.solo-tally__no{ background:rgb(216 69 60 / .18); color:var(--bad-soft); box-shadow:inset 0 0 0 2px rgb(216 69 60 / .5); }
[data-theme="parchment"] .solo-tally__ok, [data-theme="formalLight"] .solo-tally__ok, [data-theme="corporate"] .solo-tally__ok{ color:#1d7a46; }
[data-theme="parchment"] .solo-tally__no, [data-theme="formalLight"] .solo-tally__no, [data-theme="corporate"] .solo-tally__no{ color:var(--bad); }

.gotit__actions{ display:flex; gap:12px; width:100%; max-width:720px; justify-content:center; }
.gotit__actions .btn--huge{ flex:1 1 0; max-width:none; }
.gotit:not(.is-miss) .gotit__team{ color:var(--team-colour, var(--accent)); }

/* ── Lesson picker on the home screen ── */
.lesson-pick{ position:relative; margin-top:14px; display:inline-block; }
.lesson-btn{
  display:flex; align-items:center; gap:12px;
  min-height:58px;
  padding:8px 18px 8px 14px;
  border:3px solid var(--line);
  border-radius:var(--r-pill);
  background:rgb(var(--bg-rgb) / .85);
  color:var(--text);
  font-size:22px;
  transition:border-color .15s var(--ease), transform .12s var(--ease);
}
.lesson-btn:active{ transform:scale(.97); }
.lesson-btn[aria-expanded="true"]{ border-color:var(--accent); }
@media (hover:hover){ .lesson-btn:hover{ border-color:var(--accent); } }
.lesson-btn__text{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.15; text-align:left; }
.lesson-btn__text small{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.lesson-btn__text b{ font-size:clamp(16px,2.1vh,21px); color:var(--accent); max-width:32ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lesson-btn__count{ font-size:13px; font-weight:700; color:var(--muted); padding:3px 10px; border-radius:var(--r-pill); background:var(--fill-2); }
.lesson-pop{
  position:absolute; left:0; top:calc(100% + 8px); z-index:5;
  width:min(92vw, 460px);
  max-height:50vh; overflow-y:auto;
  display:flex; flex-direction:column; gap:10px;
  padding:12px;
  border:3px solid var(--accent);
  border-radius:var(--r-lg);
  background:var(--bg);
  box-shadow:var(--shadow-hard);
  animation:popIn .2s var(--spring);
  transform-origin:top left;
  touch-action:pan-y;
}
.lesson-pop__list{ display:flex; flex-direction:column; gap:6px; }
.lesson-item{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:54px; padding:8px 14px;
  border:3px solid transparent;
  border-radius:var(--r-md);
  background:var(--fill);
  color:var(--text);
  font-weight:700; font-size:clamp(15px,1.9vh,18px); text-align:left;
}
.lesson-item.is-on{ border-color:var(--accent); background:rgb(var(--accent-rgb) / .14); }
.lesson-item.is-on .lesson-item__name::before{ content:"▶ "; color:var(--accent); }
.lesson-item:disabled{ opacity:.45; cursor:default; }
.lesson-item__count{ font-size:13px; color:var(--muted); white-space:nowrap; }
@media (hover:hover){ .lesson-item:not(:disabled):hover{ border-color:var(--line); } }
@media (max-width:760px){ .lesson-pop{ left:50%; transform-origin:top center; translate:-50% 0; } }

/* ── Lesson bar in the question editor ── */
.lessonbar__row{ display:grid; grid-template-columns:70px 1fr; align-items:center; gap:10px; }
.lessonbar__row .row__label{ margin:0; }
.lessonbar .hint{ margin:0; }

/* ── Question photos ── */
.clue.has-photo{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:clamp(12px,1.6vw,24px);
  align-items:center;
  text-align:left;
}
.clue.has-photo > :not(.clue__photo){ grid-column:2; }
.clue.has-photo .clue__meta{ justify-content:flex-start; }
.clue__photo{
  grid-column:1; grid-row:1 / span 3;
  position:relative;
  padding:0; border:3px solid var(--accent);
  border-radius:var(--r-md);
  background:#fff;
  overflow:hidden;
  pointer-events:auto;
  cursor:zoom-in;
  box-shadow:var(--shadow-soft);
}
.clue__photo img{
  display:block;
  height:clamp(110px, 20vh, 240px); width:auto; max-width:min(34vw, 380px);
  object-fit:contain;
}
.clue__zoom{
  position:absolute; right:6px; bottom:6px;
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  background:rgb(0 0 0 / .55); font-size:16px;
}
.photo-zoom{
  position:absolute; inset:0; z-index:95;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  padding:clamp(16px,4vh,48px);
  background:rgb(0 0 0 / .82);
  cursor:zoom-out;
  animation:fadeIn .2s var(--ease);
}
.photo-zoom img{
  max-width:100%; max-height:calc(100% - 40px);
  border-radius:var(--r-lg);
  border:6px solid #fff;
  background:#fff;
  box-shadow:0 20px 60px rgb(0 0 0 / .6);
  animation:modalIn .3s var(--spring);
}
.photo-zoom__hint{ margin:0; color:#fff; font-weight:700; opacity:.8; }

/* Editor photo cell */
.qhead, .qrow{ grid-template-columns:36px 64px minmax(110px, 1fr) minmax(180px, 2.2fr) minmax(140px, 1.3fr) 46px; }
.qrow__photo{ position:relative; width:56px; height:46px; }
.qphoto{
  width:56px; height:46px; padding:0;
  border:2px dashed var(--line); border-radius:var(--r-sm);
  background:transparent; color:var(--text); font-size:20px;
  overflow:hidden;
}
.qphoto.has-photo{ border-style:solid; border-color:var(--accent); background:#fff; }
.qphoto img{ width:100%; height:100%; object-fit:cover; display:block; }
.qphoto__off{
  position:absolute; top:-8px; right:-8px;
  width:24px; height:24px; padding:0; border-radius:50%;
  border:2px solid var(--bg); background:var(--bad); color:#fff; font-size:12px; font-weight:700;
}
@media (max-width:900px){
  .qrow{ grid-template-columns:30px 64px 1fr 46px; }
  .qrow__photo{ grid-column:2; grid-row:1; }
  .qrow__word{ grid-column:3; }
  .qrow__del{ grid-column:4; grid-row:1; }
  .qrow__clue, .qrow__wrong{ grid-column:2 / span 3; }
}

/* ── The answer, big and clear ── */
.gotit__word{
  display:flex; align-items:center; justify-content:center; gap:clamp(12px,2vw,28px);
  margin:4px 0;
}
.gotit__answer-wrap{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.gotit__answer-label{
  font-size:clamp(13px,1.8vh,18px); font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
}
.gotit__answer{
  display:inline-block;
  padding:clamp(8px,1.4vh,16px) clamp(22px,3vw,46px);
  border-radius:var(--r-lg);
  background:var(--accent);
  color:var(--on-accent);
  font-size:clamp(40px,8.5vh,104px); font-weight:700; line-height:1.05;
  letter-spacing:.01em;
  box-shadow:0 0 0 6px rgb(var(--accent-rgb) / .25), 0 10px 30px rgb(0 0 0 / .35);
}
.gotit__word.is-pop .gotit__answer{ animation:answerPop .6s var(--spring); }
@keyframes answerPop{ 0%{ transform:scale(.4); opacity:0; } 60%{ transform:scale(1.12); opacity:1; } 100%{ transform:scale(1); } }
.gotit__photo{
  height:clamp(100px,18vh,200px); width:auto; max-width:30vw;
  border-radius:var(--r-md); border:4px solid #fff; background:#fff;
  box-shadow:var(--shadow-soft);
  object-fit:contain;
}

/* Skipped word: the answer as a big card */
.toast.is-answer{
  background:var(--accent); color:var(--on-accent); border-color:#fff;
  font-size:clamp(44px,10vh,120px);
  text-shadow:none;
  padding-top:clamp(40px,6vh,64px);
}
.toast.is-answer::before{
  content:"The answer is";
  position:absolute; left:0; right:0; top:clamp(10px,1.6vh,18px);
  font-size:clamp(13px,1.8vh,18px); font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  opacity:.75;
}

/* ---------- Settings that belong to a lesson ---------- */
.lessonscope{
  position:sticky; top:calc(-1 * clamp(14px,2.4vh,26px)); z-index:2;
  margin:calc(-1 * clamp(14px,2.4vh,26px)) calc(-1 * clamp(16px,2.6vw,32px)) 16px;
  padding:12px clamp(16px,2.6vw,32px);
  background:var(--bg-2);
  border-bottom:2px solid var(--line);
}
.lessonscope__row{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px; }
.lessonscope__row .row__label{ margin:0; color:var(--accent); }
.lessonscope .hint{ margin:6px 0 0; }
@media (max-width:560px){ .lessonscope__row{ grid-template-columns:1fr; gap:6px; } }

.group__title{
  font-weight:700; font-size:clamp(15px,1.9vh,18px);
  color:var(--accent); letter-spacing:.01em;
}
.hint--note{
  padding:10px 14px; border-radius:var(--r-md);
  background:var(--fill-2); color:var(--text);
}

/* Home: the game type this lesson is set up for */
.mode-card.is-lesson-mode{ border-color:var(--accent); position:relative; }
.mode-card.is-lesson-mode::after{
  content:'This lesson';
  position:absolute; top:10px; right:12px;
  padding:3px 10px; border-radius:999px;
  background:var(--accent); color:var(--on-accent);
  font-size:clamp(11px,1.4vh,14px); font-weight:700;
}
.mode-card--continue.is-lesson-mode::after{ display:none; }