/* Täyskymppi — game screen
   Layout: a solid-colour question poster beside (or above) a ladder of ten split-flap tiles,
   two columns of five, read top to bottom. Players sit in a strip above the board. */

.game {
  --accent-c: var(--t-tf);
  --focus: var(--accent-c);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  overflow: hidden;
  background: transparent;
  transition: --accent-c .7s var(--ease);
}
/* generative ambient background (js/ambient.js): one canvas behind the game, one inside the poster */
.amb { display: block; pointer-events: none; }
.amb-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.game > :not(.amb) { position: relative; z-index: 1; }
.qpanel > .amb-poster { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; border-radius: inherit; }
:root[data-ambient="off"] .amb { display: none; }
.game-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px 6px; }
.game-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--fg-3);
  min-width: 0;
}
.game-meta .sep { width: 4px; height: 4px; border-radius: 1px; background: var(--accent-c); transform: rotate(45deg); }
@media (max-width: 520px) { .game-meta .m-mode { display: none; } }
@media (max-width: 420px) { .game-meta .m-level { display: none; } }

.game-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  width: min(1520px, 100%);
  margin: 0 auto;
  padding: 2px 16px 12px;
  min-height: 0;
}

/* ---------- Players strip ---------- */
.players { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 4px; scrollbar-width: none; scroll-snap-type: x proximity; }
.players::-webkit-scrollbar { display: none; }
.pl {
  --pc: #fff;
  position: relative;
  flex: 0 1 230px;
  min-width: 158px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 9px 12px 9px 10px;
  border-radius: var(--r-tile);
  background: var(--surface);
  border: 1px solid var(--line);
  scroll-snap-align: start;
  transition: background .35s, border-color .35s, color .35s, opacity .35s, box-shadow .35s, transform .35s var(--ease);
}
.pl-av {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pc);
  color: var(--on-pc, var(--ink));
  font: 700 14px/1 var(--font-ui);
  transition: background .35s, color .35s;
}
.pl-av svg { width: 17px; height: 17px; }
.pl-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pl-name { font-weight: 650; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-score { font: 800 20px/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.pl-score small { font: 500 11px var(--font-mono); color: var(--fg-3); letter-spacing: 0; margin-left: 1px; }
.pl-bar { height: 4px; margin: 6px 0; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.pl-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--pc); transition: width .9s var(--ease); }
.pl-meta { display: flex; align-items: center; gap: 8px; min-height: 13px; font: 500 11px/1 var(--font-mono); color: var(--fg-3); }
.pips { display: flex; gap: 3px; flex-wrap: wrap; }
.pips i { width: 7px; height: 7px; border-radius: 2px; background: var(--pc); animation: pipIn .4s var(--spring); }
@keyframes pipIn { from { transform: scale(0) rotate(45deg); } to { transform: scale(1); } }
.pl-status { margin-left: auto; white-space: nowrap; font-weight: 600; }
.pl-rp { font: 700 11px/1 var(--font-mono); color: var(--fg); }
.pl-rp:empty { display: none; }
.pl.active .pl-rp { color: inherit; }
.pl-status.out { color: var(--tx-bad, var(--bad)); }
.pl .tok { color: var(--fg-2); }
.pl-shield { color: var(--ok); display: inline-flex; }
.pl-shield svg { width: 13px; height: 13px; }
.pl.out { opacity: .5; }
.pl.active {
  background: var(--pc);
  border-color: transparent;
  color: var(--on-pc);
  box-shadow: 0 14px 34px -18px var(--pc);
  transform: translateY(-1px);
}
.pl.active .pl-av { background: var(--on-pc); color: var(--pc); }
.pl.active .pl-score small, .pl.active .pl-meta, .pl.active .tok, .pl.active .pl-status { color: color-mix(in srgb, var(--on-pc) 66%, transparent); }
.pl.active .tok::before { background: var(--on-pc); }
.pl.active .pl-bar { background: color-mix(in srgb, var(--on-pc) 16%, transparent); }
.pl.active .pl-bar i, .pl.active .pips i { background: var(--on-pc); }
.pl.active .pl-shield { color: var(--on-pc); }
.pl.bump { animation: bump .5s var(--spring); }
@keyframes bump { 40% { transform: scale(1.05); } }
@media (max-width: 560px) {
  .pl { min-width: 150px; padding: 7px 10px 7px 8px; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; }
  .pl-av { width: 28px; height: 28px; font-size: 12px; }
  .pl-score { font-size: 18px; }
  .pl-bar { margin: 4px 0; }
}

/* Solo panel */
.solo-panel {
  flex: 1;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px;
  padding: 10px 16px;
  border-radius: calc(var(--r-tile) + 2px);
  background: var(--surface);
  border: 1px solid var(--line);
}
.solo-score { display: flex; align-items: baseline; gap: 8px; }
.solo-score b { font: 800 40px/.9 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--tx-t-open, var(--t-open)); }
.solo-score > span { color: var(--fg-3); font: 500 11px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.solo-row { display: flex; align-items: center; gap: 14px; font: 500 12px var(--font-mono); color: var(--fg-2); }
.solo-bars { flex: 1; min-width: 140px; display: grid; grid-template-columns: repeat(var(--n, 10), minmax(0, 1fr)); gap: 4px; align-items: end; height: 34px; }
.solo-bars div { position: relative; height: 100%; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.solo-bars div i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--t-open); border-radius: 5px; transition: height .8s var(--ease); }
.solo-bars div.cur { box-shadow: inset 0 0 0 1.5px var(--accent-c); }
.solo-bars div.cur i { background: var(--accent-c); }
.solo-bars div s { position: absolute; left: 2px; right: 2px; height: 2px; background: var(--t-col); border-radius: 2px; text-decoration: none; }
.solo-chal { width: 100%; font-size: 12.5px; color: var(--fg-2); line-height: 1.4; }
.solo-chal b { color: var(--tx-t-col, var(--t-col)); }
@media (max-width: 560px) {
  .solo-panel { gap: 8px 14px; padding: 9px 12px; }
  .solo-score b { font-size: 32px; }
  .solo-bars { height: 26px; min-width: 100%; order: 3; }
}

/* ---------- Board ---------- */
.board { position: relative; display: grid; gap: 14px; min-height: 0; min-width: 0; }
.board.side { grid-template-columns: minmax(0, .95fr) minmax(0, 1.3fr); }
.board.stack { grid-template-rows: auto minmax(0, 1fr); gap: 12px; overflow-y: auto; padding-bottom: 2px; }
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(var(--rowmin, 50px), 1fr));
  grid-auto-flow: column;
  gap: 10px;
  min-height: 0;
}
.board.stack .cards { gap: 8px; }
.board.stack .c-idx { width: auto; min-width: calc(var(--cfs, 15px) * 1.75); padding: 0 4px; font-size: calc(var(--cfs, 15px) * .8); border-radius: 9px; }
.board.stack .face { gap: calc(var(--cfs, 15px) * .6); padding-right: calc(var(--cfs, 15px) * .7); }

/* ---------- Question poster ---------- */
.qpanel {
  position: relative;
  z-index: 1;
  container-type: inline-size;
  min-width: 0;
  display: flex; flex-direction: column;
  padding: clamp(16px, 2.4vw, 32px);
  border-radius: var(--r-poster);
  background: var(--accent-c);
  color: var(--on-accent, var(--ink));
  overflow: hidden;
  box-shadow: 0 30px 70px -40px var(--accent-c);
}
.qpanel::before, .qpanel::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
}
.qpanel::before {
  background:
    radial-gradient(110% 70% at 100% 0%, rgba(255, 255, 255, .34), transparent 55%),
    radial-gradient(80% 60% at 0% 100%, rgba(0, 0, 0, .08), transparent 60%);
}
/* theme pattern, drawn in the poster's text colour and faded out towards the question */
.qpanel::after {
  background: var(--pat-poster);
  opacity: var(--pat-op);
  -webkit-mask-image: linear-gradient(205deg, #000 0%, rgba(0, 0, 0, .55) 38%, transparent 72%);
  mask-image: linear-gradient(205deg, #000 0%, rgba(0, 0, 0, .55) 38%, transparent 72%);
}
:root[data-mono="on"] .game[data-type="tf"] { --pat-poster: var(--pat-tf); }
:root[data-mono="on"] .game[data-type="num"] { --pat-poster: var(--pat-num); }
:root[data-mono="on"] .game[data-type="ord"] { --pat-poster: var(--pat-ord); }
:root[data-mono="on"] .game[data-type="era"] { --pat-poster: var(--pat-era); }
:root[data-mono="on"] .game[data-type="col"] { --pat-poster: var(--pat-col); }
:root[data-mono="on"] .game[data-type="open"] { --pat-poster: var(--pat-open); }
.qpanel > * { position: relative; z-index: 1; }
.q-view { position: relative; display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; }
.q-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.q-type {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font: 650 11px/1.3 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding-top: 4px;
}
.q-dot { width: 9px; height: 9px; border-radius: 2px; background: currentColor; transform: rotate(45deg); flex: none; }
.q-ico { display: inline-grid; place-items: center; width: 22px; height: 22px; margin: -3px 0 -3px -2px; border-radius: 7px; background: color-mix(in srgb, currentColor 14%, transparent); flex: none; }
.q-ico svg { width: 14px; height: 14px; stroke-width: 2; }
.q-cat { display: inline-flex; align-items: center; gap: 6px; opacity: .62; }
.q-cat::before { content: '/'; margin-right: 2px; }
.q-cat svg { width: 13px; height: 13px; stroke-width: 2; flex: none; }
.q-count { display: flex; align-items: baseline; gap: 3px; flex: none; }
.q-count b { font: 800 clamp(34px, 12cqi, 84px)/.78 var(--font-display); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.q-count span { font: 650 12px var(--font-mono); opacity: .55; }
.q-text {
  margin: auto 0;
  font: 750 calc(clamp(22px, 7.6cqi, 56px) * var(--ds, 1))/1.03 var(--font-display);
  overflow-wrap: break-word;
  font-variation-settings: "opsz" 72;
  letter-spacing: calc(-0.032em * var(--dt, 1));
  text-wrap: balance;
}
.q-text.long { font-size: calc(clamp(20px, 6.3cqi, 46px) * var(--ds, 1)); }
.q-foot { display: flex; flex-direction: column; gap: 10px; }
.q-seg { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.q-seg i { height: 7px; border-radius: 3px; background: color-mix(in srgb, currentColor 15%, transparent); transition: background .35s, transform .35s var(--spring); }
.q-seg i.ok { background: currentColor; }
.q-seg i.bad { background: repeating-linear-gradient(-45deg, currentColor 0 2px, color-mix(in srgb, currentColor 25%, transparent) 2px 5px); }
.q-sub { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.35; opacity: .74; min-height: 1.35em; }
.q-fact {
  margin: 0;
  display: flex; align-items: baseline; gap: 9px;
  padding: 10px 13px;
  border-radius: calc(var(--r-tile) * .8);
  background: var(--on-accent, var(--ink));
  color: var(--inv-accent, #F3F5F8);
  font-size: 14px; line-height: 1.38;
}
.q-fact b { color: var(--accent-c); font-weight: 700; white-space: nowrap; }
.q-fact span { min-width: 0; }
.q-fact.swap { animation: qIn .45s var(--ease); }
.board.stack .q-fact { padding: 8px 11px; font-size: 13px; }
.board.stack .q-fact span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.q-seg i.gold { background: currentColor; box-shadow: inset 0 0 0 2px var(--gold); }

/* Kuuma putki: heat meter */
.q-heat {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px;
  border-radius: calc(var(--r-tile) * .75);
  background: color-mix(in srgb, currentColor 12%, transparent);
  font: 600 13px/1.2 var(--font-ui);
  transition: background .35s, color .35s;
}
.heat-bars { display: flex; gap: 3px; align-items: flex-end; height: 18px; }
.heat-bars i { width: 5px; border-radius: 2px; background: color-mix(in srgb, currentColor 20%, transparent); transition: background .3s, transform .3s var(--spring); }
.heat-bars i:nth-child(1) { height: 6px; } .heat-bars i:nth-child(2) { height: 8px; } .heat-bars i:nth-child(3) { height: 10px; }
.heat-bars i:nth-child(4) { height: 13px; } .heat-bars i:nth-child(5) { height: 15px; } .heat-bars i:nth-child(6) { height: 18px; }
.heat-bars i.on { background: currentColor; }
.heat-txt b { font: 800 16px/1 var(--font-display); letter-spacing: -0.02em; }
.heat-gold { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font: 650 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; opacity: .72; }
.heat-gold i { width: 9px; height: 9px; border-radius: 2px; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 0 1.5px currentColor; }
.q-heat.gold-found .heat-gold { opacity: .45; }
.q-heat.hot { background: var(--on-accent, var(--ink)); color: var(--accent-c); }
.q-heat.hot .heat-bars i { background: color-mix(in srgb, var(--accent-c) 22%, transparent); }
.q-heat.hot .heat-bars i.on { background: var(--accent-c); }
.q-heat.hot .heat-gold { opacity: .85; }
.q-heat.bump { animation: heatBump .55s var(--spring); }
@keyframes heatBump { 35% { transform: scale(1.045); } }
.board.stack .q-heat { padding: 6px 10px; font-size: 12px; gap: 8px; }
.board.stack .heat-txt b { font-size: 14px; }
.q-hint {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 13px;
  border-radius: calc(var(--r-tile) * .85);
  background: var(--on-accent, var(--ink));
  color: var(--inv-accent, #F3F5F8);
  font-size: 14px; line-height: 1.4;
  animation: qIn .35s var(--ease);
}
.q-hint svg { width: 17px; height: 17px; flex: none; color: var(--accent-c); margin-top: 1px; }
/* question reveal: header slides in, words rise one by one out of a blur, footer follows */
.qpanel.swap .q-top { animation: qTop .55s cubic-bezier(.2, .8, .2, 1) .05s both; }
.qpanel.swap .q-text .w { display: inline-block; animation: wIn .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.14s + var(--w) * 38ms); }
.qpanel.swap .q-foot { animation: qIn .6s cubic-bezier(.2, .8, .2, 1) .34s both; }
.qpanel.leaving .q-view { animation: qOut .32s cubic-bezier(.7, 0, .84, 0) forwards; }
@keyframes qIn { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes qTop { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes wIn { from { opacity: 0; transform: translateY(.42em) rotate(2deg); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes qOut { to { opacity: 0; transform: translateY(-12px); filter: blur(6px); } }

/* ---------- Card interstitial: a sweep in the next card's colour ----------
   Left: topic icon, "Kortti", the rolling card number, type · category, progress.
   Behind and to the right (below on narrow boards): an abstract composition of shapes and colour. */
.xcard { position: absolute; inset: 0; z-index: 6; display: none; pointer-events: none; container-type: size; }
.xcard.on { display: block; pointer-events: auto; cursor: pointer; }
.xcard.out { pointer-events: none; }
.xcard { --xl: color-mix(in oklab, var(--tc), #fff 42%); --xd: color-mix(in oklab, var(--tc), #000 24%); --xa: var(--xd); --xb: var(--xl); }
.xc-panel {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(22px, 6cqi, 72px);
  border-radius: var(--r-poster);
  background: var(--tc);
  color: var(--on-tc);
  overflow: hidden;
  clip-path: inset(0 100% 0 0 round var(--r-poster));
}
.xc-panel::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(90% 70% at 100% 0%, rgba(255, 255, 255, .26), transparent 60%), radial-gradient(70% 60% at 0% 100%, rgba(0, 0, 0, .1), transparent 60%);
}
.xc-panel::after { content: ''; position: absolute; inset: 0; background: var(--pat-band, none); opacity: .16; display: none; }
:root[data-mono="on"] .xc-panel::after { display: block; }
:root[data-shadow="none"] .xc-panel::before, :root[data-poster="flat"] .xc-panel::before { display: none; }
.xcard.on .xc-panel { animation: xcIn .56s cubic-bezier(.76, 0, .24, 1) forwards; }
.xcard.out .xc-panel { animation: xcOut .62s cubic-bezier(.76, 0, .24, 1) forwards; }
@keyframes xcIn { from { clip-path: inset(0 100% 0 0 round var(--r-poster)); } to { clip-path: inset(0 0 0 0 round var(--r-poster)); } }
@keyframes xcOut { from { clip-path: inset(0 0 0 0 round var(--r-poster)); } to { clip-path: inset(0 0 0 100% round var(--r-poster)); } }

/* colour: two soft fields of the accent colours bloom behind everything */
.xc-mesh { position: absolute; inset: -12%; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(38% 46% at var(--mx1, 80%) var(--my1, 20%), color-mix(in oklab, var(--xa) 60%, transparent), transparent 72%),
              radial-gradient(44% 50% at var(--mx2, 60%) var(--my2, 90%), color-mix(in oklab, var(--xb) 55%, transparent), transparent 72%);
  filter: blur(14px); }
.xcard.on .xc-mesh { animation: xcMesh 2.4s cubic-bezier(.2, .7, .2, 1) .08s both; }
@keyframes xcMesh { from { opacity: 0; transform: scale(1.2) rotate(-6deg); } 35% { opacity: .95; } to { opacity: .8; transform: none; } }

/* shapes: each .xs is placed and springs in; its <i> drifts slowly while the card is read */
.xc-shapes { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.xs { position: absolute; left: var(--x); top: var(--y); width: calc(var(--s) * 1cqmin); aspect-ratio: 1; opacity: var(--o);
  transform: translate(-50%, -50%) rotate(var(--r1)); }
.xs > i { display: block; width: 100%; height: 100%; background: var(--c); }
.xs-disc > i { border-radius: 50%; }
.xs-ring > i, .xs-arc > i { box-sizing: border-box; background: transparent; border-radius: 50%; border: calc(var(--s) * .085cqmin) solid var(--c); }
.xs-arc > i { border-color: var(--c) var(--c) transparent transparent; }
.xs-pill { aspect-ratio: 2.5; }
.xs-pill > i { border-radius: 999px; }
.xs-half > i { border-radius: 50%; clip-path: inset(0 0 50% 0); }
.xs-quarter > i { border-radius: 100% 0 0 0; }
.xs-tri > i { clip-path: polygon(50% 6%, 96% 90%, 4% 90%); }
.xs-square > i { border-radius: 14%; }
.xs-dots > i { background: radial-gradient(circle, var(--c) 0 25%, transparent 28%) 0 0 / 20% 20%; }
.xs-stripes > i { border-radius: 8%; background: repeating-linear-gradient(45deg, var(--c) 0 11%, transparent 11% 22%); }
.xcard.on .xs { animation: xsIn 1s cubic-bezier(.2, 1.3, .35, 1) both; animation-delay: calc(.14s + var(--i) * 75ms); }
.xcard.on .xs > i { animation: xsDrift var(--dur, 3s) ease-in-out calc(1s + var(--i) * 75ms) infinite alternate; }
.xcard.out .xs { animation: xsOut .55s cubic-bezier(.6, 0, .8, .35) both; animation-delay: calc(var(--i) * 18ms); }
@keyframes xsIn {
  from { opacity: 0; transform: translate(-50%, -50%) translate(var(--fx), var(--fy)) rotate(var(--r0)) scale(.2); }
  to { opacity: var(--o); transform: translate(-50%, -50%) rotate(var(--r1)); } }
@keyframes xsDrift { to { transform: translate(var(--dx), var(--dy)) rotate(var(--r2)) scale(1.05); } }
@keyframes xsOut {
  from { opacity: var(--o); transform: translate(-50%, -50%) rotate(var(--r1)); }
  to { opacity: 0; transform: translate(-50%, -50%) translate(var(--ox), var(--oy)) rotate(calc(var(--r1) + 70deg)) scale(1.35); } }

.xc-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(6px, 1.6cqh, 12px); min-width: 0; }
/* the topic icon: small, upright, in a quiet glass chip above the text; its lines draw in */
.xc-ico { display: grid; place-items: center; width: clamp(40px, 6.4cqi, 54px); aspect-ratio: 1; margin-bottom: clamp(4px, 1.4cqh, 12px);
  border-radius: clamp(11px, 1.8cqi, 15px); background: color-mix(in srgb, currentColor 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 24%, transparent); }
.xc-ico svg { width: 50%; height: 50%; stroke-width: 1.7; }
.xc-kicker { font: 650 12px var(--font-mono); letter-spacing: .24em; text-transform: uppercase; opacity: .72; }
.xc-no { display: flex; align-items: baseline; gap: .1em; }
.xc-no b { display: block; font: 800 calc(min(24cqi, 34cqh, 200px) * var(--ds, 1))/1 var(--font-display); letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.xc-no > span { font: 700 calc(min(6cqi, 8.5cqh, 40px) * var(--ds, 1))/1 var(--font-display); opacity: .5; letter-spacing: -0.02em; }
/* rolling counter: each digit a column that slides up and settles, faded at the edges */
.odo { display: inline-flex; }
.odo-d { display: inline-block; height: 1.34em; margin: -.17em 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent 13%, #000 27%, #000 84%, transparent); mask-image: linear-gradient(transparent 13%, #000 27%, #000 84%, transparent); }
/* settled: just the digit, no clipping (serif figures keep their tails) */
.odo-d.done { height: auto; margin: 0; line-height: 1; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.odo-c { display: flex; flex-direction: column; }
.odo-c > span { display: block; height: 1.34em; line-height: 1.34em; text-align: center; }
.xc-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 650 clamp(11px, 2.2cqi, 14px) var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.xc-meta i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .55; }
.xc-type, .xc-cat { display: inline-flex; align-items: center; gap: 8px; }
.xc-meta svg { width: 1.3em; height: 1.3em; stroke-width: 1.8; }
.xc-cat { opacity: .72; }
.xc-prog { display: flex; gap: 5px; width: min(360px, 70cqi); margin-top: 6px; }
.xc-prog[hidden] { display: none; }
.xc-prog i { flex: 1; height: 4px; border-radius: 2px; background: currentColor; opacity: .2; }
.xc-prog i.done { opacity: .55; }
.xc-prog i.now { opacity: 1; transform-origin: left; animation: xcNow .7s cubic-bezier(.2, .8, .2, 1) .45s both; }
@keyframes xcNow { from { transform: scaleX(0); } to { transform: none; } }

.xcard.on .xc-in > * { animation: xcText .7s cubic-bezier(.2, .8, .2, 1) both; }
.xcard.on .xc-in > :nth-child(2) { animation-delay: .18s; }
.xcard.on .xc-in > :nth-child(3) { animation-delay: .22s; }
.xcard.on .xc-in > :nth-child(4) { animation-delay: .3s; }
.xcard.on .xc-in > :nth-child(5) { animation-delay: .36s; }
.xcard.on .xc-in > .xc-ico { animation: xcIco .7s cubic-bezier(.3, 1.4, .45, 1) .12s both; }
.xcard.on .xc-ico svg > * { stroke-dasharray: 100; animation: xcDraw 1.1s cubic-bezier(.45, 0, .25, 1) .3s both; }
.xcard.out .xc-in { animation: xcTextOut .45s cubic-bezier(.7, 0, .84, 0) forwards; }
@keyframes xcText { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes xcIco { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
@keyframes xcDraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes xcTextOut { to { opacity: 0; transform: translateX(72px); } }

/* narrow boards: the composition gathers, smaller, in a band under the text */
@container (max-width: 640px) {
  .xc-panel { justify-content: flex-start; padding-top: clamp(28px, 9cqh, 64px); }
  .xs { left: var(--xn); top: var(--yn); width: calc(var(--s) * .62cqmin); }
}

/* ---------- Game intro ---------- */
.gintro { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gi-bg { position: absolute; inset: 0; background: radial-gradient(900px 620px at 50% 42%, color-mix(in oklab, var(--hi) 15%, transparent), transparent 70%), var(--bg); }
.gi-core { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; padding: 24px; text-align: center; }
.gi-mark { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 6px; }
.gi-mark i { width: clamp(16px, 2.4vw, 24px); aspect-ratio: 1; border-radius: calc(var(--r-tile) * .3); background: var(--c); animation: giTile .75s cubic-bezier(.3, 1.45, .4, 1) both; animation-delay: calc(.05s + var(--k) * 70ms); }
.gi-kicker { font: 650 12px var(--font-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--fg-2); animation: giUp .6s cubic-bezier(.2, .8, .2, 1) .32s both; }
.gi-title { margin: 0; display: flex; justify-content: center; max-width: 100%; overflow: hidden; padding: .04em .04em .12em; font: 800 calc(min(128px, 10.5vw, 150vw / (var(--n, 10) + 2)) * var(--ds, 1))/1 var(--font-logo, var(--font-display)); letter-spacing: calc(-0.045em * var(--dt, 1)); color: var(--fg); white-space: nowrap; }
.gi-title span { display: inline-block; animation: giChar .85s cubic-bezier(.2, .9, .2, 1) both; animation-delay: calc(.42s + var(--i) * 42ms); }
.gi-logo { height: clamp(56px, 11vw, 120px); width: auto; max-width: 80vw; animation: giUp .8s cubic-bezier(.2, .8, .2, 1) .42s both; }
.gi-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 680px; }
.gi-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px 5px 5px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font: 600 13.5px var(--font-ui); color: var(--fg); animation: giUp .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.86s + var(--i) * 70ms); }
.gi-chip i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--pc); color: var(--on-pc); font: 750 11.5px var(--font-ui); font-style: normal; }
.gi-chip i svg { width: 14px; height: 14px; }
.gi-note { font: 600 11px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); animation: giUp .55s cubic-bezier(.2, .8, .2, 1) 1.02s both; }
.gi-bar { width: 96px; height: 2px; margin-top: 6px; border-radius: 2px; background: var(--line-2); overflow: hidden; animation: giUp .4s 1.1s both; }
.gi-bar::after { content: ''; display: block; height: 100%; background: var(--fg-2); transform-origin: left; animation: giBar 2.3s linear both; }
.gi-strips { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(10, 1fr); pointer-events: none; }
.gi-strips i { margin: 0 -1px; background: var(--c); transform: scaleY(0); }
.gintro.out { pointer-events: none; cursor: default; }
.gintro.out .gi-strips i {
  animation: giCover .46s cubic-bezier(.76, 0, .24, 1) calc(var(--k) * 40ms) both,
             giReveal .52s cubic-bezier(.76, 0, .24, 1) calc(.86s + var(--k) * 40ms) forwards;
}
.gintro.out .gi-core { animation: giCoreOut .6s cubic-bezier(.7, 0, .84, 0) forwards; }
.gintro.out .gi-bg { animation: giGone .01s linear .84s forwards; }
@keyframes giTile { from { opacity: 0; transform: scale(0) rotate(-90deg); } to { opacity: 1; transform: none; } }
@keyframes giChar { from { opacity: 0; transform: translateY(105%); } to { opacity: 1; transform: none; } }
@keyframes giUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes giBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes giCover { from { transform: scaleY(0); transform-origin: 50% 100%; } to { transform: scaleY(1); transform-origin: 50% 100%; } }
@keyframes giReveal { from { transform: scaleY(1); transform-origin: 50% 0%; } to { transform: scaleY(0); transform-origin: 50% 0%; } }
@keyframes giCoreOut { to { opacity: 0; transform: translateY(-36px) scale(.98); } }
@keyframes giGone { to { opacity: 0; visibility: hidden; } }

.board.stack .qpanel { padding: 16px 16px 14px; border-radius: calc(var(--r-poster) * .85); }
.board.stack .q-view { gap: 10px; }
.board.stack .q-text { margin: 2px 0; font-size: calc(clamp(20px, 5.6vw, 30px) * var(--ds, 1)); }
.board.stack .q-text.long { font-size: calc(clamp(18px, 4.9vw, 26px) * var(--ds, 1)); }
.board.stack .q-count b { font-size: 34px; }

/* Round summary inside the poster */
.qsum { position: relative; display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; animation: qIn .45s var(--ease); }
.qsum-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.qsum-title { margin: 0; font: 800 calc(clamp(24px, 8cqi, 46px) * var(--ds, 1))/1 var(--font-display); letter-spacing: -0.03em; }
.qsum .eyebrow { color: color-mix(in srgb, currentColor 60%, transparent); }
.qsum-list { display: flex; flex-direction: column; gap: 5px; min-height: 0; overflow: auto; }
.board.stack .qsum-list { max-height: 34vh; }
.qsum-row {
  display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-radius: calc(var(--r-tile) * .75);
  background: color-mix(in srgb, currentColor 10%, transparent);
  font-size: 14.5px;
}
.qsum-row i { width: 12px; height: 12px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 2px currentColor; }
.qsum-row .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 650; }
.qsum-row .st { font: 500 11px var(--font-mono); opacity: .65; }
.qsum-row .g { font: 800 18px var(--font-display); font-variant-numeric: tabular-nums; min-width: 36px; text-align: right; }
.qsum-row .g.zero { opacity: .45; }
.qsum-note { margin: 0; font-size: 14px; font-weight: 600; opacity: .78; }
.qsum-tip { margin: auto 0 0; font: 600 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; opacity: .55; }
.qsum-big + .qsum-note + .qsum-tip { margin-top: 0; }

/* Fact sheet */
.fx-answer { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 0 12px; border-bottom: 1px solid var(--line); }
.fx-answer b { font: 800 26px/1.1 var(--font-display); letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 8px; text-align: right; }
.fx-who { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 14px; font-weight: 600; }
.fx-who svg { width: 18px; height: 18px; stroke-width: 2.6; }
.fx-who.ok svg { color: var(--tx-ok, var(--ok)); } .fx-who.bad svg { color: var(--tx-bad, var(--bad)); }
:root[data-mono="on"] .fx-who.ok svg, :root[data-mono="on"] .fx-who.bad svg { color: var(--fg); }
.fx-fact { margin: 14px 0 0; font: 600 19px/1.4 var(--font-display); letter-spacing: -0.01em; text-wrap: pretty; }
.fx-close { width: 100%; margin-top: 20px; }
.qsum-big { font: 800 clamp(64px, 24cqi, 150px)/.85 var(--font-display); letter-spacing: -0.06em; margin: auto 0 0; }
.qsum-big.zero { opacity: .35; }
.board.stack .qsum-big { font-size: 64px; }

/* ---------- Split-flap tiles ---------- */
.card {
  position: relative;
  appearance: none; border: 0; padding: 0; margin: 0;
  background: none; color: var(--fg); font: inherit; text-align: left;
  cursor: pointer;
  perspective: 700px;
  border-radius: var(--r-tile);
  min-width: 0; min-height: 0;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .3s var(--spring), opacity .3s;
  outline-offset: 3px;
}
.card-inner {
  position: relative; display: block;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .62s cubic-bezier(.3, .75, .25, 1.12);
}
.card.flipped .card-inner { transform: rotateX(-180deg); }
/* tile feel: a plain wrapper by default; with the theme option feel = 'tilt' it leans towards the mouse
   and sinks a little when pressed, and a soft glare follows the pointer */
.card-tilt { position: relative; display: block; width: 100%; height: 100%; border-radius: var(--r-tile); transform-style: preserve-3d; }
.c-glare { display: none; }
:root[data-feel="tilt"] .card-tilt {
  --rx: calc(var(--ny, 0) * -6deg); --ry: calc(var(--nx, 0) * 8deg);
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--tz, 0px)) scale(var(--ps, 1));
  transition: transform .6s cubic-bezier(.2, 1.3, .3, 1); }
:root[data-feel="tilt"] .card.tilting .card-tilt { transition: transform .14s ease-out; }
:root[data-feel="tilt"] .card.pressing .card-tilt { --ps: .955; --tz: -4px; transition: transform .09s ease-out; }
:root[data-feel="tilt"]:not([data-shadow="hard"]):not([data-shadow="none"]) .card.tilting:not(.flipped) .front { box-shadow: calc(var(--nx, 0) * -7px) calc(var(--ny, 0) * -7px + 14px) 28px -16px var(--shade); }
:root[data-feel="tilt"] .c-glare { display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .3s;
  background: radial-gradient(70% 120% at calc(50% + var(--nx, 0) * 50%) calc(50% + var(--ny, 0) * 50%), rgba(255, 255, 255, .16), transparent 60%); }
:root[data-feel="tilt"] .card.tilting .c-glare { opacity: 1; }
:root[data-feel="tilt"][data-scheme="light"] .c-glare { background: radial-gradient(70% 120% at calc(50% + var(--nx, 0) * 50%) calc(50% + var(--ny, 0) * 50%), rgba(255, 255, 255, .7), transparent 60%); }
.board.no-anim .card-tilt { transition: none !important; }
:root[data-motion="soft"] .card-tilt { transform-style: flat; }
@media (prefers-reduced-motion: reduce) { .card-tilt { transform: none !important; } }
.face {
  position: absolute; inset: 0;
  display: flex; align-items: center; gap: calc(var(--cfs, 15px) * .75);
  padding: 7px calc(var(--cfs, 15px) * .95) 7px 7px;
  border-radius: var(--r-tile);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  overflow: hidden;
}
/* split-flap seam notches at the tile's waist (themes can turn them off) */
.face::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; margin-top: -1px;
  background: linear-gradient(90deg, var(--seam) 0 5px, transparent 5px calc(100% - 5px), var(--seam) calc(100% - 5px));
  pointer-events: none;
}
:root[data-seams="off"] .face::after { display: none; }
.front { isolation: isolate; background: var(--surface); border: 1px solid var(--line); transition: background .25s, border-color .25s, color .25s, box-shadow .3s; }
.front::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--pat-tiles); opacity: calc(var(--pat-op) * .55); }
:root[data-tiles="outline"] .front { background: transparent; border-color: var(--line-2); }
:root[data-tiles="outline"] .back { background: transparent; }
.c-idx {
  flex: none; align-self: stretch;
  width: calc(var(--cfs, 15px) * 2.35);
  display: grid; place-items: center;
  border-radius: calc(var(--r-tile) * .7);
  background: var(--accent-c);
  color: var(--on-accent, var(--ink));
  font: 700 calc(var(--cfs, 15px) * .92)/1 var(--font-mono);
  letter-spacing: -0.03em;
  transition: background .3s, color .3s;
}
.c-label {
  min-width: 0;
  font: 640 var(--cfs, 15px)/1.15 var(--font-ui);
  letter-spacing: -0.012em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
:root[data-badge="outline"] .c-idx { background: transparent; color: var(--accent-c); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent-c) 70%, transparent); }
:root[data-badge="none"] .c-idx { display: none; }
:root[data-badge="none"] .front { padding-left: calc(var(--cfs, 15px) * .95); }
.card.lw1 .c-label { font-size: calc(var(--cfs, 15px) * .9); }
.card.lw2 .c-label { font-size: calc(var(--cfs, 15px) * .8); }
.card.lw3 .c-label { font-size: calc(var(--cfs, 15px) * .7); }
@media (hover: hover) {
  .card:not(.flipped):not(:disabled):hover { transform: translateY(-2px); }
  .card:not(.flipped):not(:disabled):hover .front { border-color: var(--accent-c); background: var(--surface-2); }
}
.card.selected { transform: scale(1.03) !important; z-index: 3; }
.card.selected .front { background: var(--accent-c); color: var(--on-accent, var(--ink)); border-color: transparent; box-shadow: 0 18px 44px -16px var(--accent-c); }
.card.selected .c-idx { background: var(--on-accent, var(--ink)); color: var(--accent-c); box-shadow: none; }
.board.dim .card:not(.selected):not(.flipped) { opacity: .42; }
.card.flipped, .card:disabled { cursor: default; }

.back {
  transform: rotateX(180deg);
  justify-content: space-between;
  padding-left: calc(var(--cfs, 15px) * .95);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  transition: background .35s, border-color .35s, color .35s;
}
.c-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.c-val {
  display: flex; align-items: center; gap: 7px;
  font: 800 calc(var(--cfs, 15px) * 1.38 * var(--ds, 1))/1 var(--font-display);
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}
.card.vl1 .c-val { font-size: calc(var(--cfs, 15px) * 1.15); }
.card.vl2 .c-val { font-size: calc(var(--cfs, 15px) * 1); }
.card.vl3 .c-val { font-size: calc(var(--cfs, 15px) * .88); }
/* ---------- Split-flap answer letters ---------- */
.flapped { flex-wrap: wrap; row-gap: .12em; column-gap: .22em; }
.flw { display: inline-flex; white-space: nowrap; }
.fl {
  position: relative; display: inline-block;
  margin: 0 .018em; padding: .09em .035em .07em;
  border-radius: .13em;
  background: color-mix(in srgb, currentColor 13%, transparent);
  box-shadow: inset 0 -.05em 0 rgba(0, 0, 0, .12);
  line-height: 1; text-align: center;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.fl.fx { background: none; box-shadow: none; padding-left: 0; padding-right: 0; }
.fl-sz { display: inline-block; min-width: .48em; visibility: hidden; }
.fl-r { position: absolute; inset: 0; display: grid; place-items: center; padding-top: .02em; }
/* the seam across the middle of every flap */
.fl:not(.fx)::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: max(1px, .05em); margin-top: -.025em; background: rgba(0, 0, 0, .3); }
/* the upper flap falling on each step */
.fl::before { content: ''; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 50%; background: linear-gradient(rgba(255, 255, 255, .16), rgba(0, 0, 0, .22)); transform-origin: 50% 100%; transform: scaleY(0); pointer-events: none; }
.fl.fa::before { animation: flDropA 46ms linear; }
.fl.fb::before { animation: flDropB 46ms linear; }
.fl.rolling.fa .fl-r { animation: flTextA 46ms linear; }
.fl.rolling.fb .fl-r { animation: flTextB 46ms linear; }
@keyframes flDropA { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes flDropB { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes flTextA { from { transform: scaleY(.55) translateY(-.06em); opacity: .7; } to { transform: none; opacity: 1; } }
@keyframes flTextB { from { transform: scaleY(.55) translateY(-.06em); opacity: .7; } to { transform: none; opacity: 1; } }
.fl.rolling { background: color-mix(in srgb, currentColor 17%, transparent); }
.c-sub { font: 560 max(11px, calc(var(--cfs, 15px) * .72))/1.2 var(--font-ui); opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-given { font: 650 max(10px, calc(var(--cfs, 15px) * .66))/1.2 var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-given:empty { display: none; }
.c-fact { display: none; }
.board.roomy .c-fact:not(:empty) {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 5px;
  max-width: 34em;
  font: 500 max(11.5px, calc(var(--cfs, 15px) * .64))/1.32 var(--font-ui);
  opacity: .86;
}
.card.flipped { cursor: pointer; }
@media (hover: hover) { .card.flipped:hover .back { filter: brightness(1.06); } }
.c-end { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.c-res { display: inline-flex; }
.c-res svg { width: calc(var(--cfs, 15px) * 1.3); height: calc(var(--cfs, 15px) * 1.3); stroke-width: 2.6; }
.c-by { width: 10px; height: 10px; border-radius: 50%; background: var(--pc, transparent); }
.c-by:not([style]) { display: none; }
.card.is-ok .back { background: var(--ok); color: var(--on-ok); border-color: transparent; }
.card.is-bad .back { background: var(--bad); color: var(--on-bad); border-color: transparent; }
.card.is-ok .c-by, .card.is-bad .c-by { box-shadow: 0 0 0 2px currentColor; }
.card.is-reveal .back { background: transparent; border: 1.5px dashed color-mix(in oklab, var(--accent-c) 60%, transparent); }
.card.is-reveal .c-val { color: var(--accent-tx, var(--accent-c)); }
.card.is-pending .back { background: var(--surface-2); border: 2px solid var(--accent-c); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent-c) 25%, transparent); }
.card.is-pending .c-val { color: var(--accent-tx, var(--accent-c)); }
/* Kultakortti */
.c-gold {
  display: inline-grid; place-items: center;
  min-width: 2.3em; height: 1.55em; padding: 0 .45em;
  border-radius: 999px;
  background: var(--ink);
  color: var(--gold);
  font: 800 max(10px, calc(var(--cfs, 15px) * .7))/1 var(--font-mono);
  letter-spacing: -0.02em;
}
.card.gold-tile.is-ok .back {
  background: linear-gradient(115deg,
    color-mix(in oklab, var(--gold) 86%, #000) 0%, var(--gold) 30%, color-mix(in oklab, var(--gold) 38%, #fff) 45%,
    var(--gold) 60%, color-mix(in oklab, var(--gold) 86%, #000) 100%);
  background-size: 250% 100%;
  animation: goldShine 2.6s linear infinite;
  color: var(--on-gold);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--gold) 60%, transparent), 0 18px 44px -18px var(--gold);
}
@keyframes goldShine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.card.gold-tile.is-bad .back { box-shadow: inset 0 0 0 3px var(--gold); }
.card.gold-tile.is-reveal .back { border-color: var(--gold); }
.card.gold-tile.is-pending .back { border-color: var(--gold); box-shadow: 0 0 0 4px color-mix(in oklab, var(--gold) 30%, transparent); }
.card.shake { animation: shake .5s var(--ease); }
@keyframes shake {
  15% { transform: translateX(-7px) rotate(-1.5deg); } 30% { transform: translateX(6px) rotate(1deg); }
  45% { transform: translateX(-5px); } 60% { transform: translateX(4px); } 75% { transform: translateX(-2px); }
}
.card.pulse { animation: cardPulse .7s var(--spring); }
@keyframes cardPulse { 35% { transform: scale(1.06); } }
.board.no-anim .card, .board.no-anim .card-inner, .board.no-anim .face { transition: none !important; }

/* ---------- Flip styles (theme motion) ----------
   flap: split-flap, tiles tip over their horizontal axis (default)
   card: playing cards, turned over sideways
   pop:  sideways turn with a springy overshoot
   soft: no 3D, the answer fades in over the label */
:root[data-motion="card"] .card.flipped .card-inner,
:root[data-motion="pop"] .card.flipped .card-inner { transform: rotateY(180deg); }
:root[data-motion="card"] .back, :root[data-motion="pop"] .back { transform: rotateY(180deg); }
:root[data-motion="card"] .card-inner { transition: transform .7s cubic-bezier(.3, .7, .2, 1); }
:root[data-motion="pop"] .card-inner { transition: transform .58s cubic-bezier(.34, 1.56, .64, 1); }
:root[data-motion="soft"] .card.flipped .card-inner { transform: none; }
:root[data-motion="soft"] .card-inner { transform-style: flat; }
:root[data-motion="soft"] .face { transition: opacity .45s var(--ease), transform .55s var(--ease), background .35s, border-color .35s, color .35s; }
:root[data-motion="soft"] .back { transform: scale(.96); opacity: 0; }
:root[data-motion="soft"] .card.flipped .back { transform: none; opacity: 1; }
:root[data-motion="soft"] .card.flipped .front { opacity: 0; transform: scale(1.02); }

.val-col { display: inline-flex; align-items: center; gap: 7px; }
.sw { display: inline-block; width: 1em; height: 1em; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25), 0 0 0 1.5px rgba(0, 0, 0, .22); flex: none; }

/* ---------- Action bar ---------- */
.actionbar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 74px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}
:root[data-bg="rich"] .actionbar { background: color-mix(in oklab, var(--bg-2) 80%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.turn { display: flex; align-items: center; gap: 12px; min-width: 0; }
.turn-av {
  width: 40px; height: 40px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pc);
  color: var(--on-pc, var(--ink));
  font: 700 15px var(--font-ui);
}
.turn-av svg { width: 18px; height: 18px; }
.turn-txt { min-width: 0; }
.turn-txt small { display: block; font: 500 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.turn-txt b { display: block; font: 800 20px/1.15 var(--font-display); letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.turn.swap { animation: qIn .4s var(--ease); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.thinking { display: inline-flex; gap: 5px; align-items: center; color: var(--fg-2); font: 500 13px var(--font-mono); }
.thinking i { width: 7px; height: 7px; border-radius: 2px; background: var(--accent-c); animation: think 1s infinite ease-in-out; }
.thinking i:nth-child(2) { animation-delay: .15s; } .thinking i:nth-child(3) { animation-delay: .3s; }
@keyframes think { 0%, 100% { opacity: .3; transform: translateY(0) rotate(45deg); } 50% { opacity: 1; transform: translateY(-3px) rotate(45deg); } }
@media (max-width: 560px) {
  .actionbar { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 14px 12px; min-height: 0; }
  .turn-av { width: 30px; height: 30px; font-size: 13px; }
  .turn-txt b { font-size: 17px; }
  .turn-txt { display: flex; align-items: baseline; gap: 8px; }
  .actions { flex-wrap: nowrap; }
  .actions .btn { flex: 1; padding: 0 10px; min-width: 0; }
  .actions .btn .lbl-long { display: none; }
}
@media (min-width: 561px) { .actions .btn .lbl-short { display: none; } }

/* ---------- Answer sheet ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 40; }
.sheet-backdrop { position: absolute; inset: 0; background: var(--backdrop); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); animation: fade .2s; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: calc(100% - 24px);
  overflow-y: auto;
  padding: 0 18px calc(18px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-radius: var(--r-poster) var(--r-poster) 0 0;
  box-shadow: 0 -20px 60px -20px var(--shade);
  animation: sheetUp .34s var(--ease);
}
.sheet-handle { display: none; }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
@media (min-width: 760px) and (min-height: 620px) {
  .sheet {
    left: 50%; top: 50%; right: auto; bottom: auto;
    width: 460px;
    max-height: calc(100% - 40px);
    transform: translate(-50%, -50%);
    border-radius: var(--r-poster);
    padding: 0 22px 22px;
    animation: sheetPop .3s var(--ease);
  }
}
@keyframes sheetPop { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } to { opacity: 1; transform: translate(-50%, -50%); } }

.sh-band {
  margin: 0 -18px 16px;
  padding: 16px 18px 20px;
  background: var(--tc);
  color: var(--on-tc, var(--ink));
  position: relative;
  overflow: hidden;
}
.sh-band > * { position: relative; z-index: 1; }
.sh-band::after { content: ''; position: absolute; inset: 0; pointer-events: none; display: none; opacity: var(--pat-op);
  -webkit-mask-image: linear-gradient(200deg, #000, transparent 75%); mask-image: linear-gradient(200deg, #000, transparent 75%); }
:root[data-mono="on"] .sh-band::after { display: block; background: var(--pat-band); }
@media (min-width: 760px) and (min-height: 620px) { .sh-band { margin: 0 -22px 18px; padding: 18px 22px 22px; } }
.sh-band::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(90% 90% at 100% 0%, rgba(255, 255, 255, .3), transparent 60%);
  pointer-events: none;
}
.sh-head { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.type-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 11px 6px 9px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--tc) 14%, transparent);
  color: color-mix(in oklab, var(--tc), var(--fg) var(--tx-mix));
  font: 650 11px/1 var(--font-mono);
  letter-spacing: .1em; text-transform: uppercase;
}
.type-chip i { width: 7px; height: 7px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
.type-chip svg { width: 14px; height: 14px; stroke-width: 2; margin: -2px 0; }
.sh-band .type-chip { background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; }
.sh-band .icon-btn { color: inherit; border-color: color-mix(in srgb, currentColor 22%, transparent); }
.sh-band .icon-btn:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.sh-q { position: relative; margin: 14px 0 4px; font-size: 14px; line-height: 1.4; font-weight: 550; opacity: .74; }
.sh-opt { position: relative; margin: 0; font: 800 calc(clamp(28px, 7.5vw, 38px) * var(--ds, 1))/1.02 var(--font-display); letter-spacing: calc(-0.03em * var(--dt, 1)); text-wrap: balance; }
.sh-hint {
  display: flex; gap: 9px; align-items: flex-start;
  margin: 14px 0 0; padding: 11px 13px;
  border-radius: calc(var(--r-tile) * .85);
  background: color-mix(in oklab, var(--t-num) 14%, transparent);
  font-size: 14px; line-height: 1.4;
  animation: qIn .35s var(--ease);
}
.sh-hint svg { width: 17px; height: 17px; flex: none; color: var(--tx-t-num, var(--t-num)); margin-top: 1px; }
.sh-tips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.sh-wallet { margin-left: auto; color: var(--fg-2); }
.tip-btn.used { border-color: var(--t-num); color: var(--tx-t-num, var(--t-num)); }

.in-tf { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 6px 0 2px; }
/* true / false: two equal, quiet choices in the theme's own colours; the question colour lights up the one you point at */
.tf-btn {
  position: relative;
  height: 128px;
  border-radius: calc(var(--r-tile) + 2px);
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--fg);
  font: 750 21px/1 var(--font-display);
  letter-spacing: -0.015em;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  cursor: pointer;
  transition: transform .15s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .3s;
}
.tf-btn svg { width: 40px; height: 40px; stroke-width: 1.5; transition: transform .35s var(--spring); }
.tf-btn kbd { position: absolute; top: 10px; right: 12px; font: 600 10.5px var(--font-mono); color: var(--fg-3); padding: 2px 6px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line-2); }
@media (hover: none) { .tf-btn kbd { display: none; } }
@media (hover: hover) {
  .tf-btn:hover { background: var(--accent-c); color: var(--on-accent, var(--ink)); border-color: transparent; box-shadow: 0 18px 40px -22px var(--accent-c); }
  .tf-btn:hover svg { transform: scale(1.08); }
  .tf-btn:hover kbd { color: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent); }
}
.tf-btn:active { background: var(--accent-c); color: var(--on-accent, var(--ink)); border-color: transparent; }
.tf-btn:focus-visible { outline: 2px solid var(--accent-c); outline-offset: 3px; }
.tf-btn:active, .opt:active, .kp-key:active { transform: scale(.96); }

.opt-grid { display: grid; grid-template-columns: repeat(var(--oc, 2), minmax(0, 1fr)); gap: 8px; }
.opt-grid.ord { --oc: 5; }
.opt-grid.era { --oc: 3; }
.opt-grid.col { --oc: 4; }
.opt-grid.open { --oc: 1; }
@media (min-width: 420px) { .opt-grid.open { --oc: 2; } }
.opt {
  min-height: 54px;
  padding: 8px 10px;
  border-radius: calc(var(--r-tile) * .85);
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--fg);
  font: 650 16px/1.2 var(--font-ui);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; text-align: center;
  transition: background .2s, border-color .2s, color .2s, transform .15s var(--ease), opacity .2s;
  animation: optIn .35s var(--ease) backwards;
}
.opt:hover { background: var(--accent-c); border-color: transparent; color: var(--on-accent, var(--ink)); }
.opt.known { opacity: .3; }
.opt.known .opt-l { text-decoration: line-through; }
.opt-grid.ord .opt { font: 800 19px var(--font-display); }
.opt-grid.era .opt { font-size: 15px; }
.opt-grid.col .opt { flex-direction: column; min-height: 76px; gap: 7px; font-size: 12.5px; font-weight: 550; color: var(--fg-2); }
.opt-grid.col .opt:hover { color: var(--on-accent, var(--ink)); }
.opt-grid.col .sw { width: 32px; height: 32px; }
.opt-grid.two .opt, .opt-grid.big .opt { min-height: 76px; font: 800 28px var(--font-display); }
@keyframes optIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.in-num { display: flex; flex-direction: column; gap: 10px; }
.kp-disp {
  display: flex; align-items: center; justify-content: center; gap: 2px;
  height: 66px;
  border-radius: var(--r-tile);
  background: var(--bg-2);
  border: 1px solid var(--line);
  font: 800 40px/1 var(--font-display);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.kp-disp.empty .kp-val::before { content: '?'; color: var(--fg-3); }
.kp-caret { width: 3px; height: 34px; border-radius: 2px; background: var(--accent-c); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.kp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kp-key {
  height: 54px;
  border-radius: calc(var(--r-tile) * .85);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--fg);
  font: 650 22px var(--font-ui);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .15s, transform .12s var(--ease);
}
.kp-key:hover { background: var(--surface-3); }
.kp-key.del { color: var(--fg-2); }
.kp-key svg { width: 22px; height: 22px; }
.kp-ok { height: 54px; border-radius: calc(var(--r-tile) * .85); font-size: 16px; background: var(--accent-c); color: var(--on-accent, var(--ink)); }
.kp-ok:hover { background-color: var(--accent-c); background-image: linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)); }
@media (max-height: 660px) { .kp-key, .kp-ok { height: 46px; } .kp-disp { height: 54px; font-size: 32px; } .sh-band { padding-bottom: 14px; } .tf-btn { height: 104px; } }

/* Free-text answer (advanced level) */
.in-text { display: flex; flex-direction: column; gap: 10px; }
.txt-row { display: flex; gap: 8px; }
.txt-in {
  flex: 1; min-width: 0;
  height: 60px;
  padding: 0 16px;
  border-radius: var(--r-tile);
  border: 2px solid var(--line-2);
  background: var(--bg-2);
  color: var(--fg);
  font: 700 22px/1 var(--font-display);
  letter-spacing: -0.01em;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.txt-in::placeholder { color: var(--fg-3); font-weight: 600; }
.txt-in:focus { border-color: var(--accent-c); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent-c) 22%, transparent); }
.in-text .kp-ok { height: 60px; padding: 0 20px; flex: none; }
.in-note { margin: 0; font-size: 12.5px; color: var(--fg-3); }

/* ---------- Float points ---------- */
.float-pt {
  position: fixed; z-index: 70;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  background: var(--ok);
  color: var(--on-ok);
  font: 800 22px/1 var(--font-display);
  pointer-events: none;
  box-shadow: 0 10px 30px -10px var(--shade);
}
.float-pt.gold { background: var(--gold); color: var(--on-gold); font-size: 26px; }

/* ---------- End & challenge screens ---------- */
.end, .chal { display: grid; place-items: start center; padding: 28px 20px 32px; }
.end-inner, .chal-inner { width: min(760px, 100%); display: flex; flex-direction: column; gap: 22px; }
.eyebrow { font: 600 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.end-title { margin: 0; font: 800 calc(clamp(42px, 9.5vw, 92px) * var(--ds, 1))/.92 var(--font-display); letter-spacing: -0.045em; text-wrap: balance; }
.end-title em {
  font-style: normal;
  color: var(--on-wc, var(--ink));
  background: var(--wc, var(--accent-c));
  padding: 0 .14em .04em;
  border-radius: .14em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.end-lead { margin: 0; color: var(--fg-2); font-size: 17px; max-width: 46ch; }
.rank { display: flex; flex-direction: column; gap: 6px; }
.rank-row {
  display: grid; grid-template-columns: 28px 36px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-radius: var(--r-tile);
  background: var(--surface);
  border: 1px solid var(--line);
  animation: rowIn .45s var(--ease) backwards;
}
.rank-row .pl-av { width: 36px; height: 36px; }
.rank-row.win { background: var(--pc); color: var(--on-pc); border-color: transparent; }
.rank-row.win .pl-av { background: var(--on-pc); color: var(--pc); }
.rank-row.win .rank-pos, .rank-row.win .rank-stats { color: color-mix(in srgb, var(--on-pc) 65%, transparent); }
.rank-pos { font: 600 13px var(--font-mono); color: var(--fg-3); }
.rank-name { font-weight: 650; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-stats { display: block; font: 500 11px var(--font-mono); color: var(--fg-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-score { font: 800 30px/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.end-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.end-actions .btn { flex: 1; min-width: 160px; }

.big-score { display: flex; align-items: baseline; gap: 12px; }
.big-score b { font: 800 clamp(100px, 23vw, 176px)/.8 var(--font-display); letter-spacing: -0.06em; font-variant-numeric: tabular-nums; color: var(--bs-tx, var(--tx-t-open, var(--t-open))); }
.big-score span { font: 500 13px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font: 650 12px var(--font-mono); letter-spacing: .03em; background: var(--surface-2); color: var(--fg-2); }
.chip.hot { background: var(--t-num); color: var(--on-t-num); }
.chip.ok { background: var(--ok); color: var(--on-ok); }
.chip.bad { background: var(--bad); color: var(--on-bad); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }

.cmp { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.cmp-bars { display: grid; grid-template-columns: repeat(var(--n, 10), minmax(0, 1fr)); gap: 6px; align-items: end; height: 120px; }
.cmp-col { display: flex; gap: 2px; align-items: end; height: 100%; position: relative; }
.cmp-col i { flex: 1; border-radius: 5px 5px 2px 2px; background: var(--t-open); min-height: 3px; transform-origin: bottom; animation: grow .7s var(--ease) backwards; }
.cmp-col i.them { background: var(--t-col); }
.cmp-col i.zero { background: var(--surface-3); }
.cmp-axis { display: grid; grid-template-columns: repeat(var(--n, 10), minmax(0, 1fr)); gap: 6px; font: 500 10px var(--font-mono); color: var(--fg-3); text-align: center; }
.cmp-legend { display: flex; gap: 16px; flex-wrap: wrap; font: 500 12px var(--font-mono); color: var(--fg-2); }
.cmp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cmp-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--t-open); }
.cmp-legend i.them { background: var(--t-col); }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.share {
  display: flex; flex-direction: column; gap: 12px;
  padding: 22px;
  border-radius: var(--r-lg);
  background: var(--t-col);
  color: var(--on-t-col);
}
.share h3 { margin: 0; font: 800 26px/1.05 var(--font-display); letter-spacing: -0.025em; }
.share p { margin: 0; font-size: 14.5px; font-weight: 550; opacity: .78; }
.code-box {
  font: 500 12.5px/1.45 var(--font-mono);
  color: var(--t-col);
  padding: 10px 12px;
  border-radius: var(--r-btn);
  background: var(--on-t-col);
  word-break: break-all;
  user-select: all;
  max-height: 84px; overflow: auto;
}
.share .row .btn { flex: 1; min-width: 150px; }
.share .btn.primary { background: var(--on-t-col); color: var(--t-col); }
.share .btn:not(.primary) { background: color-mix(in srgb, var(--on-t-col) 12%, transparent); color: var(--on-t-col); border-color: color-mix(in srgb, var(--on-t-col) 25%, transparent); }

/* ---------- Landscape phones: players to the side, compact chrome ---------- */
@media (max-height: 520px) and (min-width: 600px) {
  .game-top { padding: 6px 12px 2px; }
  .game-top .icon-btn { width: 34px; height: 34px; }
  .game-main { grid-template-columns: 172px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 12px; padding: 2px 12px 6px; }
  .players { flex-direction: column; overflow-x: hidden; overflow-y: auto; }
  .pl { flex: none; min-width: 0; padding: 7px 9px 7px 8px; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; }
  .pl-av { width: 26px; height: 26px; font-size: 12px; }
  .pl-score { font-size: 17px; }
  .pl-bar { margin: 4px 0; }
  .solo-panel { flex-direction: column; align-items: stretch; padding: 10px 12px; gap: 8px; }
  .solo-score b { font-size: 34px; }
  .solo-bars { height: 26px; min-width: 0; }
  .board.side { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 10px; }
  .qpanel { padding: 14px; border-radius: calc(var(--r-poster) * .7); }
  .q-text { font-size: calc(clamp(17px, 8cqi, 26px) * var(--ds, 1)); }
  .q-text.long { font-size: calc(clamp(16px, 7cqi, 22px) * var(--ds, 1)); }
  .q-count b { font-size: 30px; }
  .q-sub { font-size: 12.5px; }
  .cards { gap: 6px; }
  .face { border-radius: calc(var(--r-tile) * .75); }
  .c-idx { border-radius: calc(var(--r-tile) * .5); }
  .actionbar { min-height: 0; padding: 7px 12px; flex-direction: row; align-items: center; }
  .turn-av { width: 30px; height: 30px; }
  .turn-txt b { font-size: 16px; }
  .actions .btn { height: 38px; flex: none; }
  .actions .btn .lbl-long { display: inline; }
  .actions .btn .lbl-short { display: none; }
}
@keyframes sheetUpX { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }
@media (max-height: 520px) and (min-width: 600px) {
  .sheet {
    left: 50%; right: auto;
    width: min(780px, calc(100% - 24px));
    transform: translateX(-50%);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    animation: sheetUpX .3s var(--ease);
  }
  #sheet-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 16px; align-items: start; }
  #sheet-body > * { grid-column: 1; }
  #sheet-body > .sh-input { grid-column: 2; grid-row: 1 / span 6; }
  .sh-band { margin: 0 0 10px; padding: 14px; border-radius: var(--r-tile); }
  .sh-opt { font-size: 24px; }
  .sh-q { margin-top: 10px; }
  .kp-key, .kp-ok { height: 40px; }
  .kp-disp { height: 46px; font-size: 28px; }
  .kp-caret { height: 24px; }
  .tf-btn { height: 84px; gap: 8px; } .tf-btn svg { width: 30px; height: 30px; }
  .opt { min-height: 44px; }
  .opt-grid.col .opt { min-height: 54px; gap: 4px; }
  .opt-grid.col .sw { width: 22px; height: 22px; }
}

/* ---------- Shadow styles (theme shape.shadow) ----------
   soft: default depth · none: flat, no shadows or sheen · hard: ink outlines and offset block shadows */
:root[data-shadow="none"] .qpanel, :root[data-shadow="none"] .mode, :root[data-shadow="none"] .mode:hover,
:root[data-shadow="none"] .pl.active, :root[data-shadow="none"] .card.selected .front, :root[data-shadow="none"] .sheet,
:root[data-shadow="none"] .modal, :root[data-shadow="none"] .banner, :root[data-shadow="none"] .float-pt,
:root[data-shadow="none"] .card.gold-tile.is-ok .back, :root[data-shadow="none"] .flap { box-shadow: none !important; }
:root[data-shadow="none"] .qpanel::before, :root[data-shadow="hard"] .qpanel::before, :root[data-shadow="hard"] .sh-band::before { display: none; }

:root[data-shadow="hard"] {
  --hard: calc(var(--bw) + 3px) calc(var(--bw) + 3px) 0 var(--fg);
  --hard-sm: calc(var(--bw) + 1px) calc(var(--bw) + 1px) 0 var(--fg);
}
:root[data-shadow="hard"] .qpanel, :root[data-shadow="hard"] .mode, :root[data-shadow="hard"] .banner,
:root[data-shadow="hard"] .toast, :root[data-shadow="hard"] .float-pt, :root[data-shadow="hard"] .share,
:root[data-shadow="hard"] .sheet, :root[data-shadow="hard"] .modal { border: var(--bw) solid var(--fg); box-shadow: var(--hard); }
:root[data-shadow="hard"] .mode:hover { transform: translate(-2px, -2px); box-shadow: calc(var(--bw) + 6px) calc(var(--bw) + 6px) 0 var(--fg); }
:root[data-shadow="hard"] .mode-go { box-shadow: none; }
:root[data-shadow="hard"] .card { box-shadow: var(--hard-sm); }
:root[data-shadow="hard"] .card.selected { box-shadow: var(--hard); }
:root[data-shadow="hard"] .card.selected .front, :root[data-shadow="hard"] .card.gold-tile.is-ok .back { box-shadow: none; }
:root[data-shadow="hard"] .front, :root[data-shadow="hard"] .back,
:root[data-shadow="hard"] .card.is-ok .back, :root[data-shadow="hard"] .card.is-bad .back, :root[data-shadow="hard"] .card.selected .front { border: var(--bw) solid var(--fg); }
:root[data-shadow="hard"] .card.is-reveal .back { border: var(--bw) dashed var(--fg); }
:root[data-shadow="hard"] .card.is-pending .back { border: var(--bw) solid var(--fg); box-shadow: inset 0 0 0 3px var(--accent-c); }
:root[data-shadow="hard"] .c-idx { box-shadow: inset 0 0 0 var(--bw) var(--fg); }
:root[data-shadow="hard"] .pl, :root[data-shadow="hard"] .rank-row, :root[data-shadow="hard"] .solo-panel,
:root[data-shadow="hard"] .prow, :root[data-shadow="hard"] .seg, :root[data-shadow="hard"] .cmp,
:root[data-shadow="hard"] .theme-opt, :root[data-shadow="hard"] .pack-row, :root[data-shadow="hard"] .opt,
:root[data-shadow="hard"] .kp-key, :root[data-shadow="hard"] .kp-disp, :root[data-shadow="hard"] .txt-in,
:root[data-shadow="hard"] .input, :root[data-shadow="hard"] .tf-btn, :root[data-shadow="hard"] .q-fact,
:root[data-shadow="hard"] .q-hint, :root[data-shadow="hard"] .type-legend > div, :root[data-shadow="hard"] .dropzone { border: var(--bw) solid var(--fg); box-shadow: var(--hard-sm); }
:root[data-shadow="hard"] .pl.active, :root[data-shadow="hard"] .rank-row.win { border-color: var(--fg); box-shadow: var(--hard); }
:root[data-shadow="hard"] .btn { border: var(--bw) solid var(--fg); box-shadow: var(--hard-sm); }
:root[data-shadow="hard"] .btn.ghost { box-shadow: none; }
:root[data-shadow="hard"] .btn:active, :root[data-shadow="hard"] .opt:active, :root[data-shadow="hard"] .kp-key:active, :root[data-shadow="hard"] .tf-btn:active { transform: translate(2px, 2px); box-shadow: none; }
:root[data-shadow="hard"] .icon-btn { border: var(--bw) solid var(--fg); color: var(--fg); }
:root[data-shadow="hard"] .flap { box-shadow: inset 0 0 0 var(--bw) var(--fg), var(--hard-sm); }
:root[data-shadow="hard"] .q-seg i { box-shadow: inset 0 0 0 1px currentColor; }

/* host judging buttons follow the same quiet style */
.btn.judge svg { width: 20px; height: 20px; stroke-width: 1.6; }
.btn.judge.yes { background-color: var(--accent-c); color: var(--on-accent, var(--ink)); border-color: transparent; }
.btn.judge.no { background: var(--surface-2); color: var(--fg); }
.sh-tips { margin-top: 20px; }

/* ---------- Question card surface (theme poster) ---------- */
:root[data-poster="flat"] .qpanel::before { display: none; }
:root[data-poster="foil"] .qpanel::before { background: radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, .22), transparent 50%); }
:root[data-poster="foil"] .qpanel, :root[data-poster="foil"] .sh-band {
  background: linear-gradient(118deg,
    color-mix(in oklab, var(--accent-c, var(--tc)) 70%, #000) 0%, var(--accent-c, var(--tc)) 24%,
    color-mix(in oklab, var(--accent-c, var(--tc)) 58%, #fff) 44%, var(--accent-c, var(--tc)) 60%,
    color-mix(in oklab, var(--accent-c, var(--tc)) 76%, #000) 100%);
}
:root[data-poster="foil"] .sh-band { background: linear-gradient(118deg, color-mix(in oklab, var(--tc) 70%, #000) 0%, var(--tc) 30%, color-mix(in oklab, var(--tc) 60%, #fff) 52%, var(--tc) 70%, color-mix(in oklab, var(--tc) 78%, #000) 100%); }
:root[data-poster="foil"] .mode {
  background: linear-gradient(118deg, color-mix(in oklab, var(--mc) 72%, #000) 0%, var(--mc) 26%, color-mix(in oklab, var(--mc) 60%, #fff) 46%, var(--mc) 62%, color-mix(in oklab, var(--mc) 78%, #000) 100%);
}

/* ---------- Kartta (map question) ---------- */
.tkmap { display: block; width: 100%; height: 100%; }
/* sea tinted with the type colour, land a clear step lighter (dark themes) or white (light themes) */
.tkmap { --m-sea: color-mix(in oklab, var(--accent-c) 22%, var(--bg)); --m-land: color-mix(in oklab, var(--fg) 21%, var(--surface)); --m-nb: color-mix(in oklab, var(--fg) 9%, var(--surface)); }
:root[data-scheme="light"] .tkmap { --m-sea: color-mix(in oklab, var(--accent-c) 26%, var(--surface)); --m-land: var(--surface); --m-nb: color-mix(in oklab, var(--fg) 7%, var(--surface-2)); }
.tkmap .m-sea, .tkmap .m-lakes { fill: var(--m-sea); }
.tkmap .m-nb { fill: var(--m-nb); stroke: color-mix(in oklab, var(--fg) 14%, transparent); stroke-width: .5; vector-effect: non-scaling-stroke; }
.tkmap .m-land { fill: var(--m-land); stroke: color-mix(in oklab, var(--fg) 32%, transparent); stroke-width: .7; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tkmap .m-lakes { stroke: color-mix(in oklab, var(--fg) 16%, transparent); stroke-width: .4; vector-effect: non-scaling-stroke; }
.tkmap .m-borders { fill: none; stroke: color-mix(in oklab, var(--fg) 22%, transparent); stroke-width: .55; vector-effect: non-scaling-stroke; }
.m-pin-dot { fill: var(--accent-c); stroke: var(--surface); stroke-width: 2.4; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
.m-pin-ring { fill: color-mix(in oklab, var(--accent-c) 24%, transparent); transform-box: fill-box; transform-origin: center; }
.m-pin.drop .m-pin-dot { animation: pinPop .42s cubic-bezier(.3, 1.6, .4, 1); }
.m-pin.drop .m-pin-ring { animation: pinRing .9s cubic-bezier(.2, .7, .2, 1); }
@keyframes pinPop { from { transform: scale(0); } to { transform: none; } }
@keyframes pinRing { from { transform: scale(.2); opacity: 0; } 40% { opacity: 1; } to { transform: none; } }
.m-tol { fill: color-mix(in oklab, var(--accent-c) 10%, transparent); stroke: var(--accent-c); stroke-width: 1.3; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.in-map { display: flex; flex-direction: column; gap: 10px; }
.mp-stage {
  position: relative; overflow: hidden;
  height: min(50vh, 500px);
  border-radius: var(--r-tile);
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--accent-c) 22%, var(--bg));
  cursor: crosshair; touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.tkmap.pick.zoomed { cursor: crosshair; }
.tkmap.pick.panning { cursor: grabbing; }
.in-map-world .mp-stage { height: clamp(220px, 72vw, 380px); }
/* the world map gets a wide sheet on larger screens */
@media (min-width: 760px) and (min-height: 620px) {
  .sheet.wide { width: min(1040px, calc(100vw - 48px)); }
  .sheet.wide .in-map-world .mp-stage { height: clamp(300px, calc(100vh - 360px), 640px); }
}
/* zoom control under the map (never over a place you may need to tap): − slider + | whole map */
.mz { flex: none; display: flex; align-items: center; gap: 4px; padding: 3px; order: 0;
  border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); touch-action: manipulation; }
.mz > i { width: 1px; height: 18px; margin: 0 2px; background: var(--line-2); }
.mz-btn { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--fg); cursor: pointer; transition: background .15s, opacity .15s; }
.mz-btn:hover:not(:disabled) { background: var(--surface-3); }
.mz-btn:disabled { opacity: .35; cursor: default; }
.mz-btn svg { width: 16px; height: 16px; stroke-width: 2; }
.mz-range { -webkit-appearance: none; appearance: none; width: clamp(70px, 14vw, 140px); height: 30px; margin: 0; background: transparent; cursor: pointer; }
.mz-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent-c) var(--v, 0%), var(--surface-3) var(--v, 0%)); }
.mz-range::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent-c) var(--v, 0%), var(--surface-3) var(--v, 0%)); }
.mz-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--fg); border: 3px solid var(--surface); box-shadow: 0 1px 4px var(--shade); }
.mz-range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--fg); border: 3px solid var(--surface); }
.mz-range:focus-visible { outline: 2px solid var(--accent-c); outline-offset: 2px; border-radius: 4px; }
.mp-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mp-status { flex: 1 1 100%; min-width: 0; order: 3; font-size: 13px; line-height: 1.35; color: var(--fg-3); }
.mp-ok { flex: 0 0 auto; min-width: 140px; order: 2; margin-left: auto; }
/* the small result map on the back of a tile: tucked to the right, the place name in split-flap letters */
.val-map { display: inline-flex; align-items: center; gap: .45em; min-width: 0; }
.tkmap.mini { width: auto; height: 2.4em; flex: none; overflow: visible; }
.tkmap-world.mini { height: 1.9em; }
.card.t-map .back { padding-right: calc(var(--cfs, 15px) * 1.2); }
.card.t-map .c-txt { padding-right: 34%; }
.card.t-map .c-sub { display: none; }
.card.t-map .val-map .tkmap.mini { position: absolute; z-index: -1; right: calc(var(--cfs, 15px) * 2.6); top: 6px; bottom: 6px; height: calc(100% - 12px); width: 30%; }
.card.t-map .c-end { position: relative; z-index: 1; }
.tkmap.mini .m-sea, .tkmap.mini .m-nb, .tkmap.mini .m-borders, .tkmap.mini .m-lakes { display: none; }
.tkmap.mini .m-land { fill: color-mix(in srgb, currentColor 28%, transparent); stroke: none; }
.tkmap.mini .m-pin-ring { fill: color-mix(in srgb, currentColor 30%, transparent); }
.tkmap.mini .m-pin-dot { fill: currentColor; stroke: none; }
.tkmap.mini .m-pin.guess .m-pin-dot { fill: none; stroke: currentColor; stroke-width: 1.6; }
.tkmap.mini .m-pin.guess .m-pin-ring { display: none; }
.tkmap.mini .m-line { stroke: currentColor; stroke-width: 1.1; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; opacity: .75; }
.vm-n { min-width: 0; }
.fx-val .tkmap.mini, .sheet .tkmap.mini { height: 120px; }

/* ---------- Aikajana (timeline question) ---------- */
.in-time { display: flex; flex-direction: column; gap: 16px; padding-top: 2px; }
.tl-read { display: flex; align-items: baseline; justify-content: center; gap: 12px; }
.tl-val { font: 800 calc(clamp(52px, 12vw, 86px) * var(--ds, 1))/1 var(--font-display); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; color: var(--accent-tx, var(--fg)); min-width: 3.2ch; text-align: center; }
.tl-tol { font: 650 12px var(--font-mono); letter-spacing: .04em; padding: 5px 9px; border-radius: 999px; background: color-mix(in oklab, var(--accent-c) 16%, transparent); color: var(--fg-2); }
.tl-track { position: relative; height: 66px; }
.tl-rail { position: absolute; left: 0; right: 0; top: 18px; height: 8px; border-radius: 999px; background: var(--surface-3); }
.tl-band { position: absolute; top: 12px; height: 20px; border-radius: 999px; left: calc(15px + (100% - 30px) * var(--l, 0)); width: calc((100% - 30px) * var(--w, 0)); min-width: 6px; background: color-mix(in oklab, var(--accent-c) 38%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent-c) 60%, transparent); pointer-events: none; transition: left .06s linear; }
.tl-range { position: absolute; left: 0; top: 4px; width: 100%; height: 36px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; touch-action: pan-y; }
.tl-range::-webkit-slider-runnable-track { height: 36px; background: transparent; }
.tl-range::-moz-range-track { height: 36px; background: transparent; }
.tl-range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: 3px; border-radius: 50%; background: var(--accent-c); border: 3px solid var(--surface); box-shadow: 0 8px 18px -8px var(--accent-c), 0 0 0 1px var(--line-2); }
.tl-range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--accent-c); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--line-2); }
.tl-range:focus { outline: none; }
.tl-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--fg); }
.tl-ticks { position: absolute; left: 15px; right: 15px; top: 36px; height: 30px; pointer-events: none; }
.tl-tick { position: absolute; top: 0; left: calc(var(--x) * 100%); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; }
.tl-tick i { width: 1px; height: 6px; background: var(--line-2); }
.tl-tick.major i { height: 10px; background: var(--fg-3); }
.tl-tick em { font: 600 10.5px var(--font-mono); font-style: normal; color: var(--fg-3); white-space: nowrap; }
.tl-row { display: flex; gap: 8px; }
.tl-n { flex: none; min-width: 50px; height: 50px; border-radius: var(--r-btn); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--fg); font: 650 14px var(--font-mono); cursor: pointer; }
.tl-n:hover { background: var(--surface-3); }
.tl-ok { flex: 1; height: 50px; min-width: 0; }
@media (max-width: 420px) { .tl-n { min-width: 42px; } }

/* ---------- Points flying to the score ---------- */
.pt-fly { position: fixed; left: 0; top: 0; z-index: 35; width: 16px; height: 16px; pointer-events: none; will-change: transform; }
.pt-fly i { display: block; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0 14%, color-mix(in oklab, var(--pc), #fff 30%) 30%, var(--pc) 70%);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--pc) 35%, transparent), 0 0 16px 2px color-mix(in oklab, var(--pc) 70%, transparent); }
.solo-score b, .pl-score { display: inline-block; transform-origin: 20% 60%; }
.pt-hit { animation: ptHit .42s cubic-bezier(.3, 1.6, .4, 1); }
@keyframes ptHit { 0% { transform: scale(1); } 35% { transform: scale(1.18); filter: brightness(1.25); } 100% { transform: none; } }

/* ---------- Optional time limit: a ring countdown pinned to the top, above the answer sheet ---------- */
.tmr { position: fixed; z-index: 45; top: calc(env(safe-area-inset-top, 0px) + 8px); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border-radius: 999px;
  background: color-mix(in oklab, var(--surface) 88%, transparent); border: 1px solid var(--line);
  box-shadow: 0 10px 30px -12px var(--shade); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: tmrIn .35s var(--spring, cubic-bezier(.3, 1.4, .5, 1)); pointer-events: none; }
.tmr[hidden] { display: none; }
.tmr-ring, .tmr-ring svg { display: block; width: 34px; height: 34px; }
.tmr-ring svg { transform: rotate(-90deg); }
.tmr-bg { fill: none; stroke: var(--surface-3); stroke-width: 3.2; }
.tmr-fg { fill: none; stroke: var(--pc, var(--accent-c)); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke .2s; }
.tmr b { min-width: 2ch; font: 800 20px/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--fg); }
.tmr.low .tmr-fg { stroke: var(--bad); }
.tmr.low b { color: var(--tx-bad, var(--bad)); animation: tmrBeat 1s ease-in-out infinite; }
.tmr.out { animation: tmrOut .6s ease-in forwards; }
@keyframes tmrIn { from { opacity: 0; transform: translate(-50%, -12px) scale(.9); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes tmrOut { 0% { transform: translateX(-50%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -10px) scale(.9); } }
@keyframes tmrBeat { 0%, 100% { transform: none; } 15% { transform: scale(1.2); } }

/* child / assisted player marker and the free 50/50 */
.pl-kid { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; vertical-align: -2px; color: var(--gold, var(--fg-2)); font: 600 11px var(--font-mono); }
.pl-kid svg { width: 15px; height: 15px; stroke-width: 1.9; }
.tip-btn .cost.free { padding: 2px 7px; border-radius: 999px; background: color-mix(in oklab, var(--ok) 22%, transparent); color: var(--tx-ok, var(--ok)); font: 650 10.5px var(--font-mono); letter-spacing: .02em; }
.tip-btn.free { border-color: color-mix(in oklab, var(--ok) 55%, var(--line)); }