*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #1c1208; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; }
:root {
  /* defaults = the Sunny theme (ivory); src/themes.js sets these from the picked theme */
  --ink: #1c1d24;
  --on-ink: #fff;
  --panel: #fffaf0;
  --panel-line: #f6dc8f;
  --surface: #fff;
  --hl: #fff3c4;
  --accent: #1E9E7A;
  --table: #ffe78f;
  --table-2: #f7be3c;
  --table-ink: #1c1d24;
  --rack: #1E9E7A;
  --tile-face: #fffaee;
  --tile-seam: #efe4cc;
  --tile-font: 'Nunito', 'Open Sans', Arial, sans-serif;
  --kk-yellow: #f9b61a;
  --kk-purple: #8b5ba8;
  --kk-orange: #f47521;
  /* the play buttons (themes.js sets these per theme) */
  --cta: #1E9E7A; --cta-deep: #127256; --go: #F47521; --go-deep: #B8520F;
  /* the joker is always the brand's three colours */
  --joker: linear-gradient(135deg, #f47521 0 34%, #8b5ba8 34% 67%, #d99a00 67%);
  /* the tabletop behind the HTML screens */
  --tabletop:
    radial-gradient(ellipse at 50% 35%, rgba(255,255,255,0.45), transparent 60%),
    linear-gradient(var(--table), var(--table-2));
}
html[data-dark="1"] {
  --tabletop:
    radial-gradient(ellipse at 50% 35%, rgba(255,255,255,0.12), transparent 60%),
    linear-gradient(var(--table), var(--table-2));
}
/* the felt table: lit in the middle and deeper at the rim, with the cloth's
   grain (an SVG noise tile), like the board's */
html[data-theme="felt"] {
  --tabletop:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.45 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 40%, rgba(255,255,255,0.10), transparent 60%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,0.28)),
    linear-gradient(var(--table), var(--table-2));
}
canvas { display: block; touch-action: none; position: relative; z-index: 1; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; }

#landing {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  padding: 24px 16px;
  overflow: hidden;
  font-family: 'Baloo 2', system-ui, sans-serif;
  background: var(--tabletop);
}
#landing.hidden { display: none; }

/* The wordmark is two hands of Kelime Kıran cards, as on gizmolabz.com:
   KELİME in orange over KIRAN in purple, fanned from a pivot below. */
.brand { margin-bottom: 8px; }
.logo { display: flex; flex-direction: column; align-items: center; user-select: none; }
.hand {
  --step: 9deg;
  position: relative;
  display: flex; justify-content: center;
  height: 150px;
}
.hand-top { margin-left: -40px; }
.hand-bottom { margin-left: 50px; margin-top: -10px; }
/* the staggered offsets suit KELİME / KIRAN; WORD / PUNBLE sit centred */
html[lang="en"] .hand-top, html[lang="en"] .hand-bottom { margin-left: 0; }

/* The card after its print sheets: a white line just inside the edge, two
   tilted blocks in the middle, the letter in two opposite corners. */
.kk-card {
  --w: 74px;
  position: relative;
  width: var(--w); height: calc(var(--w) * 1.433);
  margin: 0 calc(var(--w) * -0.42);
  border-radius: 9px;
  border: 2px solid #fff;
  background: var(--suit);
  box-shadow: inset 0 0 0 3px var(--suit), inset 0 0 0 5px #fff, 0 6px 14px rgba(28,29,36,0.22);
  transform-origin: 50% 260%;
  transform: rotate(0deg);
  animation: kk-fan 0.7s cubic-bezier(.2,.8,.25,1.1) 0.1s forwards;
  overflow: hidden;
}
.kk-card::before, .kk-card::after {
  content: '';
  position: absolute;
  border-radius: 3px;
  background: rgba(0,0,0,0.1);
  transform: rotate(-15deg);
}
.kk-card::before { left: 18%; top: 30%; width: 26%; height: 27%; }
.kk-card::after  { left: 52%; top: 40%; width: 20%; height: 23%; }
.kk-card.orange { --suit: var(--kk-orange); }
.kk-card.purple { --suit: var(--kk-purple); }
.kk-card.yellow { --suit: var(--kk-yellow); }
.kk-card b {
  position: absolute;
  left: 10%; top: 8%;
  font: 800 calc(var(--w) * 0.36)/1 'Open Sans', system-ui, sans-serif;
  color: #fff;
  -webkit-text-stroke: calc(var(--w) * 0.03) #3a3a3a;
  paint-order: stroke fill;
}
.kk-card b + b { left: auto; top: auto; right: 10%; bottom: 8%; transform: rotate(180deg); }

/* first card on the left; each opens to (middle − i) × step */
.hand .kk-card:nth-child(1) { --i: 0; z-index: 1; }
.hand .kk-card:nth-child(2) { --i: 1; z-index: 2; }
.hand .kk-card:nth-child(3) { --i: 2; z-index: 3; }
.hand .kk-card:nth-child(4) { --i: 3; z-index: 4; }
.hand .kk-card:nth-child(5) { --i: 4; z-index: 5; }
.hand .kk-card:nth-child(6) { --i: 5; z-index: 6; }
.hand-top    { --mid: 2.5; }
.hand-bottom { --mid: 2; }
.hand-bottom .kk-card { animation-delay: 0.25s; }
@keyframes kk-fan {
  to { transform: rotate(calc((var(--i) - var(--mid)) * var(--step))); }
}
@media (prefers-reduced-motion: reduce) {
  .kk-card { animation-duration: 0s; animation-delay: 0s; }
}

.subtitle {
  font-size: 18px; font-weight: 600;
  color: var(--table-ink);
  opacity: 0.74;
  margin: 8px 0 36px;
  user-select: none;
}
#landing .start-btn,
#landing .play-solo-btn,
#landing .join-btn {
  padding: 14px 40px;
  min-width: 220px;
  color: var(--on-ink);
  background: var(--ink);
  border: none;
  border-radius: 999px;
  font: 600 20px/1.2 'Baloo 2', system-ui, sans-serif;
  letter-spacing: 1px;
  box-shadow: 0 5px 0 rgba(28,29,36,0.3);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
#landing .join-btn {
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--ink);
  font-size: 17px;
  padding: 11px 36px;
}
#landing .start-btn:hover,
#landing .play-solo-btn:hover,
#landing .join-btn:hover { transform: translateY(3px); box-shadow: 0 2px 0 rgba(28,29,36,0.3); }

@media (max-width: 420px) {
  .kk-card { --w: 58px; }
  .hand { height: 118px; }
  .hand-top { margin-left: -30px; }
  .hand-bottom { margin-left: 40px; }
}

/* ---------- Lobby panels (Kelime Kıran style) ----------
   Every screen between the landing page and the first deal uses the same
   cream "card" panel on the yellow tabletop, ink outlines and pill buttons. */
.kk-overlay {
  position: fixed; inset: 0; z-index: 3000;
  display: none;
  align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(28,29,36,0.55);
  font-family: 'Baloo 2', system-ui, sans-serif;
  color: var(--ink);
}
.kk-overlay.visible { display: flex; }
/* the waiting table replaces the board entirely, so it sits on the tabletop */
.kk-overlay.table { background: var(--tabletop); }

.kk-panel {
  position: relative;
  width: 100%; max-width: 440px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  scrollbar-width: none;      /* scrolls on short screens, without a side bar */
  padding: 28px 24px 24px;
  text-align: center;
  background: var(--panel);
  border: 3px solid var(--ink);
  border-radius: 22px;
  box-shadow: inset 0 0 0 5px var(--panel), inset 0 0 0 7px var(--panel-line), 0 8px 0 rgba(28,29,36,0.35);
  animation: kk-deal-in 0.45s cubic-bezier(.2,.9,.3,1.25) both;
}
@keyframes kk-deal-in {
  from { opacity: 0; transform: translateY(40px) rotate(-4deg) scale(0.9); }
  to   { opacity: 1; transform: none; }
}
.kk-title {
  font: 700 26px/1.15 'Baloo 2', system-ui, sans-serif;
  margin-bottom: 18px;
}
.kk-hint {
  font-size: 15px; font-weight: 500;
  opacity: 0.7;
  margin-bottom: 14px;
}
.kk-close {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--surface);
  color: var(--ink);
  font: 700 15px/1 'Baloo 2', system-ui, sans-serif;
  cursor: pointer;
}
.kk-close:hover { background: var(--hl); }

.kk-btn {
  padding: 12px 28px;
  min-width: 150px;
  color: var(--on-ink);
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font: 600 17px/1.2 'Baloo 2', system-ui, sans-serif;
  letter-spacing: 0.5px;
  box-shadow: 0 5px 0 rgba(28,29,36,0.3);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, opacity 0.15s;
}
.kk-btn:hover:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 rgba(28,29,36,0.3); }
.kk-btn:active:not(:disabled) { transform: translateY(5px); box-shadow: none; }
.kk-btn:disabled { opacity: 0.35; cursor: default; }
.kk-btn.ghost { color: var(--ink); background: var(--surface); }
.kk-btn.small { min-width: 0; padding: 8px 16px; font-size: 15px; }
/* "start with bots": the theme's accent, apart from the ink buttons */
.kk-btn.bots { background: var(--accent); border-color: var(--accent); color: #fff; }
.kk-btn.success { background: #2f9e5b; border-color: #2f9e5b; color: #fff; }

.popup-btn-row { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.btn-row { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.popup-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* small Kelime Kıran card: suit colour, white inner line, white letter */
.kk-mini {
  --w: 34px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--w); height: calc(var(--w) * 1.433);
  border-radius: calc(var(--w) * 0.14);
  border: 2px solid #fff;
  background: var(--suit);
  box-shadow: inset 0 0 0 2px var(--suit), inset 0 0 0 3.5px #fff, 0 3px 8px rgba(28,29,36,0.25);
  font-style: normal;
}
.kk-mini.orange { --suit: var(--kk-orange); }
.kk-mini.purple { --suit: var(--kk-purple); }
.kk-mini.yellow { --suit: var(--kk-yellow); }
.kk-mini b {
  font: 800 calc(var(--w) * 0.55)/1 'Open Sans', system-ui, sans-serif;
  color: #fff;
  -webkit-text-stroke: calc(var(--w) * 0.05) #3a3a3a;
  paint-order: stroke fill;
}
.kk-mini.tilt { transform: rotate(-8deg); }
/* Open Sans' J hangs below the baseline: lift it and widen it a touch */
.kk-mini b.j { display: inline-block; transform: translateY(-0.08em) scaleX(1.12); }

/* The HTML tiles follow the theme's tiles (src/themes.js sets data-face and
   the --tile-* variables on <html>): its font everywhere ('solid' keeps the
   suit-coloured card), and for 'frame' / 'stone' the letter in the suit
   colour on the tile face. The joker stays three-coloured. */
html[data-face] .kk-card b, html[data-face] .kk-mini b { font-family: var(--tile-font); }
html[data-face] .kk-mini b.j { transform: none; }
html[data-face="frame"] .kk-card:not(.joker) {
  background: var(--tile-face);
  border-color: var(--suit);
  box-shadow: inset 0 0 0 3px var(--tile-face), inset 0 0 0 5px var(--suit), 0 6px 14px rgba(28,29,36,0.22);
}
html[data-face="frame"] .kk-mini:not(.joker) {
  background: var(--tile-face);
  border-color: var(--suit);
  box-shadow: inset 0 0 0 2px var(--tile-face), inset 0 0 0 3.5px var(--suit), 0 3px 8px rgba(28,29,36,0.25);
}
html[data-face="stone"] .kk-card:not(.joker),
html[data-face="stone"] .kk-mini:not(.joker) {
  background: var(--tile-face);
  border-color: var(--tile-seam);
  box-shadow: 0 3px 0 var(--tile-seam), 0 5px 10px rgba(0,0,0,0.25);
}
html[data-face="frame"] :is(.kk-card, .kk-mini):not(.joker) b,
html[data-face="stone"] :is(.kk-card, .kk-mini):not(.joker) b {
  color: var(--suit);
  -webkit-text-stroke: 0;
}
/* landing wordmark, suit-coloured cards: a single white frame (the outer
   edge only, no inner ring) */
html[data-face="solid"] #landing .kk-card:not(.joker) {
  border-width: 3px;
  box-shadow: 0 6px 14px rgba(28,29,36,0.22);
}
/* colour-blind safe: the suit shape pressed in under the letter, like the
   board's stones (the wordmark cards trade their print blocks for it); the
   bright gold letter keeps its dark edge */
html[data-theme="colorblind"] .kk-card:not(.joker)::before { display: none; }
html[data-theme="colorblind"] .kk-card:not(.joker)::after,
html[data-theme="colorblind"] .kk-mini:not(.joker)::before {
  position: absolute; left: 0; right: 0; top: auto; bottom: 40%;
  width: auto; height: auto; background: none; transform: none;
  text-align: center; line-height: 1;
  font-size: calc(var(--w) * 0.26);
  color: var(--suit);
  text-shadow: 0 1px 0 #fff;
}
html[data-theme="colorblind"] .kk-mini:not(.joker)::before { bottom: 6%; font-size: calc(var(--w) * 0.24); }
html[data-theme="colorblind"] .kk-card.purple::after, html[data-theme="colorblind"] .kk-mini.purple::before { content: '●'; }
html[data-theme="colorblind"] .kk-card.orange::after, html[data-theme="colorblind"] .kk-mini.orange::before { content: '▲'; }
html[data-theme="colorblind"] .kk-card.yellow::after, html[data-theme="colorblind"] .kk-mini.yellow::before { content: '◆'; }
html[data-theme="colorblind"] :is(.kk-card, .kk-mini).yellow b { -webkit-text-stroke: calc(var(--w) * 0.03) #5c4000; }
html[data-theme="colorblind"] .kk-mini.yellow::before { -webkit-text-stroke: 1px #5c4000; }

/* ---------- Player count: each option is a hand of N cards ---------- */
.player-count-options {
  display: flex; gap: 10px; justify-content: center;
  margin-bottom: 20px;
}
.player-count-card, .level-card {
  flex: 1 1 0; max-width: 118px;
  padding: 14px 6px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--surface);
  border: 2px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 16px;
  color: var(--ink);
  font-family: 'Baloo 2', system-ui, sans-serif;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(.2,.9,.3,1.4), border-color 0.15s, box-shadow 0.15s;
}
:is(.player-count-card, .level-card):hover { transform: translateY(-3px); }
:is(.player-count-card, .level-card).selected {
  border-color: var(--ink);
  background: var(--hl);
  box-shadow: 0 5px 0 rgba(28,29,36,0.3);
  transform: translateY(-6px);
}
.mini-hand {
  position: relative;
  display: flex; justify-content: center;
  height: 64px; width: 100%;
  margin-bottom: 6px;
}
.mini-hand .kk-mini {
  position: absolute; bottom: 0; left: 50%;
  margin-left: calc(var(--w) * -0.5);
  transform-origin: 50% 140%;
  transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 8deg));
  transition: transform 0.25s cubic-bezier(.2,.9,.3,1.4);
}
.player-count-card.selected .mini-hand .kk-mini,
.player-count-card:hover .mini-hand .kk-mini {
  transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 15deg));
}
.mini-hand .kk-mini:nth-child(1) { --i: 0; }
.mini-hand .kk-mini:nth-child(2) { --i: 1; }
.mini-hand .kk-mini:nth-child(3) { --i: 2; }
.mini-hand .kk-mini:nth-child(4) { --i: 3; }
.player-count-card .label, .level-card .label { font-size: 18px; font-weight: 700; }
.player-count-card .flavor, .level-card .flavor { font-size: 13px; font-weight: 500; opacity: 0.6; }
.level-card .em { font-size: 40px; line-height: 1.2; margin-bottom: 2px; }
#bot-level-popup .player-count-options { margin-bottom: 4px; }

/* table option (turn time): a quiet box under the player count,
   the popup's main choice, so the eye goes count → settings → buttons */
.opt-group {
  margin: 0 0 18px; padding: 10px 12px 12px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border-radius: 16px;
  text-align: left;
}
.opt-row-label { font: 700 13px/1.2 'Baloo 2', system-ui, sans-serif; opacity: 0.75; margin: 0 0 4px 2px; color: var(--ink); }
.opt-chips { display: flex; gap: 6px; }
.opt-chip {
  flex: 1 1 0; max-width: 118px;
  padding: 5px 4px 6px;
  display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto;
  column-gap: 6px; align-items: center; justify-content: center;
  background: var(--surface);
  border: 2px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 10px;
  color: var(--ink);
  font-family: 'Baloo 2', system-ui, sans-serif;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.opt-chip b { font-size: 14px; font-weight: 800; line-height: 1.05; text-align: left; }
.opt-chip.one { display: block; padding: 6px 4px; }
.opt-chip.one b { text-align: center; }
.opt-chip:hover { transform: translateY(-2px); }
.opt-chip.selected { border-color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--ink); }

/* buttons: one filled primary, the other way to play outlined, solo below "or" */
.play-actions { gap: 8px; }
.play-actions .kk-btn:not(.small) { width: 100%; max-width: 300px; }
.play-actions .join-or { width: 100%; max-width: 300px; margin: 2px 0 0; }

/* join popup: "or" divider before the random-room button */
.join-or { display: flex; align-items: center; gap: 10px; margin: 18px 0 14px; font: 700 13px/1 'Baloo 2', system-ui, sans-serif; color: var(--ink); opacity: 0.55; }
.join-or::before, .join-or::after { content: ''; flex: 1; height: 2px; background: currentColor; opacity: 0.35; border-radius: 2px; }
.kk-panel::-webkit-scrollbar { display: none; }
.join-random-msg { margin-top: 10px; }
.join-random-msg:empty { display: none; }

/* waiting table: the "not full yet" question and the public switch */
.lobby-ask {
  margin: 4px 0 14px; padding: 12px 10px 8px;
  border: 2px dashed color-mix(in srgb, var(--ink) 30%, transparent);
  border-radius: 14px;
  animation: kk-win-pop 0.35s cubic-bezier(.2,.9,.3,1.3) both;
}
.lobby-ask[hidden] { display: none; }
.lobby-ask-title { font: 800 16px/1.2 'Baloo 2', system-ui, sans-serif; color: var(--ink); margin-bottom: 10px; }
.lobby-ask-wait {
  margin-top: 8px; background: none; border: 0; cursor: pointer;
  font: 700 13px/1.2 'Baloo 2', system-ui, sans-serif; color: var(--ink); opacity: 0.6; text-decoration: underline;
}
.lobby-public {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 0 12px; cursor: pointer;
  font: 700 14px/1.2 'Baloo 2', system-ui, sans-serif; color: var(--ink);
}
.lobby-public input { width: 18px; height: 18px; accent-color: var(--ink); }
.lobby-public[hidden] { display: none; }
.match-fill { font: 700 14px/1.3 'Baloo 2', system-ui, sans-serif; color: var(--ink); margin: 0 0 14px; }
.match-fill:empty { display: none; }

/* player pool: one seat per player at the table, filled as they arrive */
.match-seats { display: flex; gap: 10px; justify-content: center; margin: 10px 0 6px; }
.match-seats i {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 24px;
  border: 2px dashed color-mix(in srgb, var(--ink) 30%, transparent);
  background: var(--surface);
  animation: kk-seat 1.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.2s);
}
.match-seats i.on { border: 2px solid var(--ink); background: var(--hl); animation: none; }
@keyframes kk-seat { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .match-seats i { animation: none; } }

/* ---------- Join: the code is typed into four card slots ---------- */
.code-slots {
  position: relative;
  display: flex; gap: 10px; justify-content: center;
  margin: 4px 0 24px;
  cursor: text;
}
.code-slot {
  width: 52px; height: 74px;
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed rgba(28,29,36,0.3);
  border-radius: 10px;
  background: rgba(255,255,255,0.6);
}
.code-slot.caret { border-style: solid; border-color: var(--ink); animation: kk-caret 1s ease-in-out infinite; }
@keyframes kk-caret { 50% { background: var(--hl); } }
.code-slot .kk-mini { --w: 52px; animation: kk-drop 0.3s cubic-bezier(.2,.9,.3,1.4) both; }
@keyframes kk-drop {
  from { transform: translateY(-24px) rotate(-12deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.code-input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  font-size: 16px; /* no iOS zoom on focus */
  border: none;
  cursor: text;
}

/* ---------- Waiting table ---------- */
/* above the in-game score strip, which appears as soon as the first state lands */
#lobby { z-index: 20002; }
.lobby-panel { max-width: 460px; overflow: visible; }
.code-hand {
  display: flex; justify-content: center; gap: 6px;
  margin-bottom: 22px;
}
.code-hand .kk-mini { --w: 46px; animation: kk-drop 0.35s cubic-bezier(.2,.9,.3,1.4) both; }
.code-hand .kk-mini:nth-child(1) { transform: rotate(-6deg); animation-delay: 0.05s; }
.code-hand .kk-mini:nth-child(2) { transform: rotate(-2deg); animation-delay: 0.12s; }
.code-hand .kk-mini:nth-child(3) { transform: rotate(2deg);  animation-delay: 0.19s; }
.code-hand .kk-mini:nth-child(4) { transform: rotate(6deg);  animation-delay: 0.26s; }

.seats {
  display: flex; gap: 10px; justify-content: center;
  margin-bottom: 10px;
}
.seat {
  position: relative;
  flex: 1 1 0; max-width: 96px;
  padding: 10px 4px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border-radius: 14px;
  border: 2px dashed rgba(28,29,36,0.3);
  background: rgba(255,255,255,0.5);
}
.seat .avatar {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 26px;
  background: rgba(28,29,36,0.08);
}
.seat .name {
  max-width: 100%;
  font-size: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seat .badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--ink); color: var(--on-ink);
  font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
  white-space: nowrap;
}
.seat.filled {
  border-style: solid; border-color: var(--ink);
  background: var(--surface);
  box-shadow: 0 4px 0 rgba(28,29,36,0.25);
}
.seat.filled .avatar { background: var(--hl); border: 2px solid var(--ink); }
.seat.me .avatar { background: var(--kk-orange); }
.seat.pop { animation: kk-pop 0.5s cubic-bezier(.2,.9,.3,1.5); }
@keyframes kk-pop {
  0% { transform: scale(0.6) rotate(-8deg); }
  60% { transform: scale(1.12) rotate(3deg); }
  100% { transform: none; }
}
/* empty seat: three dots bouncing while we wait */
.seat .dots { display: flex; gap: 4px; height: 48px; align-items: center; }
.seat .dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(28,29,36,0.35);
  animation: kk-bounce 1.2s ease-in-out infinite;
}
.seat .dots i:nth-child(2) { animation-delay: 0.15s; }
.seat .dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes kk-bounce { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-8px); } }
.seat:not(.filled) .name { opacity: 0.55; font-weight: 500; }

.lobby-status { font-size: 16px; font-weight: 600; margin: 12px 0 16px; }
.lobby-invite {
  display: flex; align-items: center; gap: 14px;
  margin: 0 auto 20px; max-width: 340px;
  text-align: left;
}
.lobby-invite .kk-hint { margin: 0; }
#qrcode img {
  display: block;
  width: 104px; height: 104px;
  border-radius: 10px;
  border: 2px solid var(--ink);
  background: var(--surface);
}

.lobby-toast {
  position: absolute; top: -22px; left: 50%;
  transform: translate(-50%, -10px);
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--ink); color: var(--on-ink);
  font-size: 15px; font-weight: 600;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.3s cubic-bezier(.2,.9,.3,1.4);
}
.lobby-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* everyone is seated: seats jump, then the panel is swept off the table */
/* every seat is taken (people or bots): the room code, QR, share link,
   public switch and leave button have nothing left to do */
:is(#lobby.full, #lobby.all-in) .lobby-invite-only { display: none; }
#lobby.all-in .seat.filled { animation: kk-cheer 0.6s ease-in-out 2; }
#lobby.all-in .seat:nth-child(2) { animation-delay: 0.08s; }
#lobby.all-in .seat:nth-child(3) { animation-delay: 0.16s; }
#lobby.all-in .seat:nth-child(4) { animation-delay: 0.24s; }
@keyframes kk-cheer { 40% { transform: translateY(-12px) rotate(-4deg); } 70% { transform: translateY(0) rotate(2deg); } }
#lobby.leaving { transition: opacity 0.45s; opacity: 0; }
#lobby.leaving .kk-panel { transition: transform 0.45s cubic-bezier(.5,0,.8,.4); transform: translateY(-120vh) rotate(12deg); }

/* ---------- Profile ---------- */
#profile-btn {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 20001;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink);
  transition: background 0.15s, border-color 0.15s;
}
#profile-btn:hover { background: var(--hl); }
#profile-btn .avatar { font-size: 20px; line-height: 1; }
#profile-btn .pname {
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 600;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-panel { max-width: 400px; }
.profile-stage {
  position: relative;
  display: flex; justify-content: center;
  margin: 4px 0 14px;
}
/* the avatar sits on a big yellow Kelime Kıran card */
.profile-card {
  width: 96px; height: 137px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 13px;
  border: 3px solid #fff;
  background: var(--kk-yellow);
  box-shadow: inset 0 0 0 4px var(--kk-yellow), inset 0 0 0 6px #fff, 0 6px 0 rgba(28,29,36,0.25), 0 0 0 2px var(--ink);
  transform: rotate(-5deg);
}
.profile-avatar-big { font-size: 58px; line-height: 1; }
.profile-card.rolling { animation: kk-roll 0.14s linear infinite; }
@keyframes kk-roll {
  0% { transform: rotate(-5deg) scaleX(1); }
  50% { transform: rotate(-5deg) scaleX(0.15); }
  100% { transform: rotate(-5deg) scaleX(1); }
}
.profile-card.land { animation: kk-land 0.5s cubic-bezier(.2,.9,.3,1.5); }
@keyframes kk-land {
  0% { transform: rotate(-5deg) scale(0.8); }
  60% { transform: rotate(4deg) scale(1.12); }
  100% { transform: rotate(-5deg); }
}
.profile-card.cheer { animation: kk-cheer-card 0.6s ease-in-out; }
@keyframes kk-cheer-card {
  30% { transform: translateY(-18px) rotate(6deg); }
  60% { transform: translateY(0) rotate(-8deg); }
  100% { transform: rotate(-5deg); }
}
.dice-btn {
  position: absolute; right: calc(50% - 96px); bottom: 2px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--surface);
  font-size: 22px; line-height: 1;
  box-shadow: 0 4px 0 rgba(28,29,36,0.25);
  cursor: pointer;
  transition: transform 0.15s;
}
.dice-btn:hover { transform: rotate(-20deg) scale(1.08); }
.dice-btn:active { transform: rotate(200deg) scale(0.95); transition-duration: 0.3s; }
.dice-btn.small {
  position: static;
  flex: 0 0 auto;
  width: 46px; height: 46px; font-size: 20px;
}

/* the name, spelled out live as small cards */
.name-cards {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 3px;
  min-height: 40px;
  margin-bottom: 10px;
}
.name-cards .kk-mini { --w: 26px; }
.name-cards .kk-mini.new { animation: kk-drop 0.28s cubic-bezier(.2,.9,.3,1.4) both; }
.name-cards .gap { width: 10px; }
.name-cards .more { align-self: center; font-weight: 700; opacity: 0.6; }

.name-row { display: flex; gap: 8px; margin-bottom: 14px; }
.profile-name-input {
  flex: 1 1 auto; min-width: 0;
  padding: 11px 14px;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 14px;
  color: var(--ink);
  font: 600 18px/1.2 'Baloo 2', system-ui, sans-serif;
  text-align: center;
  outline: none;
}
.profile-name-input:focus { box-shadow: 0 0 0 4px rgba(249,182,26,0.5); }

.emoji-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px;
  max-height: 128px; overflow-y: auto;
  padding: 6px;
  margin-bottom: 20px;
  border-radius: 14px;
  background: rgba(28,29,36,0.05);
}
.emoji-grid button {
  aspect-ratio: 1;
  border: 2px solid transparent;
  border-radius: 10px;
  background: none;
  font-size: 22px; line-height: 1;
  cursor: pointer;
  transition: transform 0.12s;
}
.emoji-grid button:hover { transform: scale(1.2); }
.emoji-grid button.selected { border-color: var(--ink); background: var(--hl); }

/* ---------- Language switch (landing only) ---------- */
#lang-switch {
  position: fixed; top: 12px; left: 12px; z-index: 20001;
  display: flex;
  padding: 3px;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-family: 'Baloo 2', system-ui, sans-serif;
}
#lang-switch button {
  min-width: 44px; padding: 4px 12px;
  border: none; border-radius: 999px;
  background: none; color: var(--ink);
  font: 700 14px/1.2 'Baloo 2', system-ui, sans-serif;
  cursor: pointer;
}
#lang-switch button.active { background: var(--ink); color: var(--on-ink); }

/* letters the deck doesn't have: only a joker could play them */
.kk-mini.joker {
  --suit: transparent;
  background: var(--joker);
}

/* ---------- How to play (src/Tutorial.js) ---------- */
#landing .how-to-btn {
  background: none; border: 0; cursor: pointer;
  font: 700 15px/1.2 'Baloo 2', system-ui, sans-serif; color: var(--table-ink);
  text-decoration: underline; text-underline-offset: 3px; opacity: 0.8;
}
#landing .how-to-btn:hover { opacity: 1; }
#tutorial { z-index: 20004; }
.tut-panel { max-width: 380px; padding-bottom: 22px; }
.tut-panel .kk-title { margin-bottom: 12px; }
.tut-rules { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.tut-rules li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--surface);
  border: 2px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 14px;
}
.tut-icon { font-size: 22px; line-height: 1; flex: none; }
.tut-rule { display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 600; line-height: 1.3; }
.tut-tiles { display: inline-flex; gap: 2px; }
.tut-tiles .kk-mini { --w: 22px; }
.tut-gap { width: 10px; }
#tut-ok { min-width: 180px; }

/* ---------- Error ---------- */
.error-tile { margin-bottom: 10px; }
.error-tile .kk-mini { --w: 54px; animation: kk-pop 0.5s cubic-bezier(.2,.9,.3,1.5); }

@media (max-width: 420px) {
  .kk-panel { padding: 24px 16px 20px; }
  .kk-title { font-size: 23px; }
  .kk-btn { min-width: 128px; padding: 11px 20px; font-size: 16px; }
  .seat .avatar { width: 40px; height: 40px; font-size: 22px; }
  .seat .dots { height: 40px; }
  .emoji-grid button { font-size: 19px; }
  .code-slot, .code-slot .kk-mini { width: 46px; }
  .code-slot { height: 66px; }
  .code-slot .kk-mini { --w: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .kk-panel, .seat.pop, .code-slot .kk-mini, .code-hand .kk-mini, .error-tile .kk-mini,
  #lobby.all-in .seat.filled, .seat .dots i, .code-slot.caret,
  .profile-card.rolling, .profile-card.land, .profile-card.cheer, .name-cards .kk-mini.new { animation: none; }
}

/* ---------- End-of-round / match overlays (Kelime Kıran style) ----------
   Same cream card panel, ink outline and pill buttons as the lobby. */
#round-result-overlay, #leaderboard-overlay, #gameover-overlay {
  position: fixed; inset: 0; z-index: 3000;
  display: none;
  align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(28,29,36,0.62);
  font-family: 'Baloo 2', system-ui, sans-serif;
  color: var(--ink);
  overflow: hidden;
}
.round-result-box::-webkit-scrollbar,
.leaderboard-box::-webkit-scrollbar, .gameover-box::-webkit-scrollbar { display: none; }
#round-result-overlay.visible,
#leaderboard-overlay.visible, #gameover-overlay.visible { display: flex; }

.round-result-box, .leaderboard-box, .gameover-box {
  position: relative;
  width: 100%; max-width: 420px;
  max-height: calc(100vh - 32px);
  overflow-x: hidden; overflow-y: auto;
  scrollbar-width: none;
  padding: 26px 22px 22px;
  text-align: center;
  background: var(--panel);
  border: 3px solid var(--ink);
  border-radius: 22px;
  box-shadow: inset 0 0 0 5px var(--panel), inset 0 0 0 7px var(--panel-line), 0 8px 0 rgba(28,29,36,0.35);
  animation: kk-deal-in 0.45s cubic-bezier(.2,.9,.3,1.25) both;
}
.round-result-box h2, .leaderboard-box h2, .gameover-box h2 {
  font: 800 28px/1.15 'Baloo 2', system-ui, sans-serif;
  margin-bottom: 8px;
}
.round-result-deduction, .gameover-detail, .leaderboard-reason, .vote-status {
  font-size: 15px; font-weight: 600;
  opacity: 0.75;
  margin-bottom: 16px;
}
.round-result-deduction.joker, .gameover-detail.joker {
  opacity: 1;
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  color: #fff;
  background: var(--joker);
}
.gameover-detail:empty { display: none; }

/* score rows: one pill per player */
.scores-table, .leaderboard-table, .vote-players {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 20px;
}
.scores-table .score-row, .leaderboard-row, .vote-player-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 14px;
  background: var(--surface);
  border: 2px solid color-mix(in srgb, var(--ink) 15%, transparent);
  border-radius: 14px;
  font-size: 16px; font-weight: 600;
}
.scores-table .score-row.me, .leaderboard-row.first {
  border-color: var(--ink);
  background: var(--hl);
  box-shadow: 0 3px 0 rgba(28,29,36,0.2);
}
.scores-table .player-info { display: flex; align-items: center; gap: 8px; min-width: 0; }
.scores-table .player-info span:last-child,
.leaderboard-name, .vote-player-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scores-table .score-emoji { font-size: 20px; }
.scores-table .player-score, .leaderboard-score { font-weight: 800; font-size: 18px; white-space: nowrap; }
.scores-table .player-score.positive { color: var(--ink); }
.scores-table .player-score.zero { color: #e5484d; }
.scores-table .delta { margin-left: 6px; font-size: 14px; font-weight: 700; color: #e5484d; }
.leaderboard-rank { width: 28px; font-size: 20px; }
.leaderboard-name { flex: 1; text-align: left; }
.vote-player-status { font-size: 18px; }
.vote-player-status.voted-yes { color: var(--accent); }
.vote-player-status.voted-no { color: #e5484d; }
.vote-player-status.waiting { opacity: 0.5; }

.vote-btn-row { display: flex; gap: 12px; justify-content: center; }
.vote-btn, .leaderboard-back-btn, .gameover-btn {
  padding: 12px 26px;
  min-width: 140px;
  color: var(--on-ink);
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font: 700 17px/1.2 'Baloo 2', system-ui, sans-serif;
  box-shadow: 0 5px 0 rgba(28,29,36,0.3);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}
.vote-btn.leave { color: var(--ink); background: var(--surface); }
.vote-btn:hover:not(:disabled), .leaderboard-back-btn:hover, .gameover-btn:hover {
  transform: translateY(3px); box-shadow: 0 2px 0 rgba(28,29,36,0.3);
}
.vote-btn:disabled { opacity: 0.4; cursor: default; }

/* the next-round vote, at the bottom of the round result: a question, one
   small chip per player (✓ / ✗ / ⏳), the count and the two buttons */
.round-vote {
  margin-top: 18px; padding-top: 16px;
  border-top: 2px dashed color-mix(in srgb, var(--ink) 20%, transparent);
}
.round-vote-q { font: 800 18px/1.2 'Baloo 2', system-ui, sans-serif; margin-bottom: 10px; }
.round-vote .vote-players { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 8px; }
.round-vote .vote-player-row { padding: 3px 10px; gap: 6px; font-size: 13px; border-radius: 999px; max-width: 48%; }
.round-vote .vote-player-status { font-size: 14px; }
.round-vote .vote-status { margin-bottom: 12px; font-size: 13px; }

/* the buttons that keep you playing (play, continue, next round): bright
   instead of ink, so they invite the tap. Each theme picks its pair
   (themes.js ui.cta / ui.go → --cta / --go); the landing page's "continue"
   takes the second colour to stand apart from "play" beside it. */
#landing .start-btn.cta, #landing .play-solo-btn.cta, .kk-btn.cta, .vote-btn.cta {
  color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cta) 82%, #fff), var(--cta));
  border: 2px solid var(--cta-deep);
  box-shadow: 0 5px 0 var(--cta-deep), 0 8px 18px color-mix(in srgb, var(--cta) 35%, transparent);
  text-shadow: 0 1px 0 rgba(0,0,0,0.18);
}
#landing .play-solo-btn.cta.go { --cta: var(--go); --cta-deep: var(--go-deep); }
#landing .start-btn.cta:hover, #landing .play-solo-btn.cta:hover, .kk-btn.cta:hover:not(:disabled), .vote-btn.cta:hover:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--cta-deep), 0 4px 10px color-mix(in srgb, var(--cta) 30%, transparent);
}
.vote-btn.cta:disabled { opacity: 0.5; }
/* the landing page's play button glows softly on and off (the glow only:
   the button itself stays put, so it is always easy to hit) */
#landing .start-btn.cta { animation: kk-cta-glow 2.4s ease-in-out 1.2s infinite; }
@keyframes kk-cta-glow {
  0%, 100% { box-shadow: 0 5px 0 var(--cta-deep), 0 8px 18px color-mix(in srgb, var(--cta) 35%, transparent); }
  50% { box-shadow: 0 5px 0 var(--cta-deep), 0 8px 30px 6px color-mix(in srgb, var(--cta) 60%, transparent); }
}
@media (prefers-reduced-motion: reduce) { #landing .start-btn.cta { animation: none; } }

/* text kept for screen readers only (e.g. the win title the cards spell) */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Win celebration (full screen) ----------
   Sunburst on the yellow table, the title spelled as a fan of Kelime Kıran
   cards (like the logo), a stamped result, score chips and confetti. */
#gameover-overlay {
  z-index: 20003;   /* over the score strip: the celebration shows full standings */
  flex-direction: column;
  color: var(--ink);
  background: rgba(28,29,36,0.62);   /* a dark veil: the table shows faintly under the window */
}
#gameover-overlay .confetti { z-index: 0; }   /* falls behind the panel */
/* the round I won in a room: the result panel with confetti,
   under a smaller "you win" fan */
#round-win-hand { display: none; }
#round-result-overlay.celebrate { flex-direction: column; }
#round-result-overlay.celebrate #round-win-hand { display: flex; position: relative; z-index: 1; height: 112px; --step: 8deg; flex: none; }
#round-win-hand .kk-card { --w: 48px; }
#round-result-overlay.celebrate .round-result-box { max-height: calc(100vh - 150px); }
/* the panel sits over the rays and the confetti (which falls behind it) */
#round-result-overlay .round-result-box { position: relative; z-index: 3; }

/* the round result's head: a small kicker, then who finished */
.round-kicker {
  font: 800 13px/1 'Baloo 2', system-ui, sans-serif;
  letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.55;
  margin-bottom: 10px;
}
.round-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 16px; }
.hero-avatar {
  position: relative;
  width: 76px; height: 76px; margin-top: 12px;
  display: grid; place-items: center;
  font-size: 44px; line-height: 1;
  background: var(--hl);
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 4px 0 rgba(28,29,36,0.25), 0 0 0 8px color-mix(in srgb, var(--accent) 25%, transparent);
  animation: kk-hero-pop 0.6s cubic-bezier(.2,.9,.3,1.5) both;
}
.hero-crown {
  position: absolute; top: -26px; left: 50%;
  font-size: 30px;
  transform: translateX(-50%) rotate(-12deg);
  animation: kk-crown 0.5s cubic-bezier(.2,.9,.3,1.6) 0.45s both;
}
.hero-name { font: 800 24px/1.15 'Baloo 2', system-ui, sans-serif; animation: kk-win-pop 0.45s cubic-bezier(.2,.9,.3,1.3) 0.2s both; }
.hero-pts {
  display: inline-block; padding: 4px 14px;
  font: 800 17px/1.2 'Baloo 2', system-ui, sans-serif;
  color: #fff; background: var(--accent);
  border-radius: 999px;
  box-shadow: 0 3px 0 rgba(28,29,36,0.25);
  animation: kk-hero-pop 0.45s cubic-bezier(.2,.9,.3,1.6) 0.4s both;
}
.hero-cheer { font-size: 14px; font-weight: 600; opacity: 0.7; animation: kk-win-pop 0.45s ease-out 0.6s both; }
@keyframes kk-hero-pop { 0% { opacity: 0; transform: scale(0.3); } 100% { opacity: 1; transform: none; } }
@keyframes kk-crown {
  0% { opacity: 0; transform: translate(-50%, -30px) rotate(-40deg); }
  100% { opacity: 1; transform: translateX(-50%) rotate(-12deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-avatar, .hero-crown, .hero-name, .hero-pts, .hero-cheer { animation: none; }
}
/* the result sits in a plain panel, like the round result in a room. Won:
   the "you win" fan heads it, with confetti. Lost: the winner under a crown
   leads it. */
#gameover-overlay.lost :is(#gameover-hand, #gameover-title, #gameover-sub, #gameover-detail) { display: none; }
#gameover-overlay .win-sub { color: var(--ink); }
#gameover-overlay .win-fan { height: 112px; --step: 8deg; flex: none; }
#gameover-overlay .win-fan .kk-card { --w: 48px; }
#gameover-overlay .win-stage {
  max-width: 420px; max-height: calc(100vh - 32px);
  padding: 22px 22px 22px;
  background: var(--panel);
  border: 3px solid var(--ink);
  border-radius: 22px;
  box-shadow: inset 0 0 0 5px var(--panel), inset 0 0 0 7px var(--panel-line), 0 8px 0 rgba(28,29,36,0.35);
  animation: kk-deal-in 0.45s cubic-bezier(.2,.9,.3,1.25) both;
}
#gameover-overlay:not(.lost) #gameover-hero { display: none; }

.win-stage {
  position: relative; z-index: 1;
  width: 100%; max-width: 560px;
  /* many players = a long page: scroll inside instead of cutting off the
     top, but without a scroll bar down the side (the media queries below
     shrink the page to fit first) */
  max-height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none;
  padding: 4px 6px 10px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.win-fan {
  --step: 7deg;
  height: 170px;
  margin: 0 0 6px;
  animation: kk-win-pop 0.7s cubic-bezier(.2,.9,.3,1.35) both;
}
.win-fan .kk-card {
  --w: 70px;
  z-index: var(--z, 1);
  animation-delay: calc(0.25s + var(--i) * 0.05s);
  box-shadow: inset 0 0 0 3px var(--suit), inset 0 0 0 5px #fff, 0 10px 22px rgba(28,29,36,0.3);
}
.kk-card.joker {
  --suit: transparent;
  background: var(--joker);
}
@keyframes kk-win-pop {
  0% { opacity: 0; transform: translateY(80px) scale(0.4); }
  100% { opacity: 1; transform: none; }
}
.win-sub {
  font: 800 26px/1.15 'Baloo 2', system-ui, sans-serif;
  color: var(--table-ink);
  margin-bottom: 10px;
  animation: kk-win-pop 0.5s cubic-bezier(.2,.9,.3,1.3) 0.55s both;
}
.win-stamp {
  display: inline-block;
  margin: 2px 0 20px;
  padding: 8px 20px;
  font: 800 19px/1.2 'Baloo 2', system-ui, sans-serif;
  color: var(--ink);
  background: var(--surface);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 6px 0 rgba(28,29,36,0.3);
  transform: rotate(-5deg);
  animation: kk-stamp 0.45s cubic-bezier(.2,.9,.3,1.25) 0.95s both;
}
.win-stamp.joker {
  color: #fff;
  text-shadow: 0 2px 0 rgba(28,29,36,0.45);
  background: var(--joker);
}
.win-stamp:empty { display: none; }
@keyframes kk-stamp {
  0% { opacity: 0; transform: scale(2.8) rotate(-16deg); }
  70% { opacity: 1; transform: scale(0.94) rotate(-4deg); }
  100% { opacity: 1; transform: rotate(-5deg); }
}

.win-scores {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-bottom: 24px;
}
.win-score {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 6px;
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 4px 0 rgba(28,29,36,0.25);
  font: 700 16px/1 'Baloo 2', system-ui, sans-serif;
  animation: kk-win-pop 0.45s cubic-bezier(.2,.9,.3,1.3) both;
  animation-delay: calc(1.2s + var(--i) * 0.12s);
}
.win-score.me { background: var(--ink); color: var(--on-ink); }
.win-score .av {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--hl);
  border: 2px solid var(--ink);
  font-size: 19px;
}
.win-score.me .av { border-color: var(--on-ink); }
.win-score .pts { font-size: 20px; font-weight: 800; }
.win-score .delta {
  position: absolute; top: -12px; right: -8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #e5484d; color: #fff;
  font-size: 13px; font-weight: 800;
  border: 2px solid #fff;
  animation: kk-pop 0.5s cubic-bezier(.2,.9,.3,1.5) both;
  animation-delay: calc(1.5s + var(--i) * 0.12s);
}
#gameover-overlay .popup-actions { animation: kk-win-pop 0.4s ease-out 1.5s both; }

/* confetti: two cannons from the bottom corners, then a shower from the top */
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.confetti i {
  position: absolute;
  width: var(--w, 10px); height: var(--h, 16px);
  border-radius: var(--br, 3px);
}
.confetti i.rain {
  top: -24px;
  animation: kk-rain var(--d, 3s) linear var(--delay, 0s) forwards;
}
@keyframes kk-rain {
  to { transform: translate(var(--dx, 0), 115vh) rotate(var(--rot, 720deg)); }
}
.confetti i.shot {
  top: 100%;
  animation: kk-shot var(--d, 2.6s) var(--delay, 0s) forwards;
}
@keyframes kk-shot {
  0% { transform: translate(0, 0) rotate(0); animation-timing-function: cubic-bezier(.1,.7,.3,1); }
  32% { transform: translate(var(--px), var(--py)) rotate(calc(var(--rot) * 0.4)); animation-timing-function: cubic-bezier(.5,0,.9,.6); }
  100% { transform: translate(calc(var(--px) * 1.35), 30vh) rotate(var(--rot)); }
}

.win-stage::-webkit-scrollbar { display: none; }
@media (max-height: 760px) {
  .win-fan { height: 120px; --step: 8deg; }
  .win-fan .kk-card { --w: 50px; }
  .win-sub { font-size: 22px; margin-bottom: 6px; }
  .win-stamp { margin-bottom: 12px; }
  .win-words { margin-bottom: 10px; }
  .standings { margin-bottom: 12px; gap: 4px; }
  .standing { padding: 4px 12px 4px 8px; }
}
@media (max-height: 600px) {
  .win-fan { height: 82px; --step: 9deg; }
  .win-fan .kk-card { --w: 34px; }
  .win-sub { font-size: 18px; margin-bottom: 4px; }
  .win-stamp { font-size: 15px; padding: 5px 14px; margin-bottom: 8px; }
}
@media (max-width: 480px) {
  .win-fan { height: 120px; --step: 8deg; }
  .win-fan .kk-card { --w: 48px; }
  .win-sub { font-size: 22px; }
  .win-stamp { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .win-fan, .win-sub, .win-stamp, .win-score, .win-score .delta,
  #gameover-overlay .popup-actions { animation: none; }
}


/* scored words: the winner's hand laid out on a rack in the theme's rack
   colour (as on their ıstaka), each word followed by its score in a small
   dark tag that reads on any rack */
/* one word per line: the tiles in one column, their scores lined up in the
   next (each row is a subgrid of the rack's two columns) */
.win-words {
  display: grid; grid-template-columns: max-content max-content; justify-content: center;
  align-items: center; gap: 4px 10px;
  margin: 0 0 14px; padding: 9px 12px 15px;
  /* as the board draws the ıstaka: dark rim, base, light top, deep lip */
  background:
    linear-gradient(rgba(255,255,255,0.12), rgba(255,255,255,0.12)) top / 100% 22% no-repeat,
    var(--rack);
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  box-shadow: inset 0 0 0 4px var(--rack-dark), inset 0 -10px 0 var(--rack-deep), 0 4px 0 rgba(28,29,36,0.25);
}
/* wooden racks (data-grain) keep their grain */
html[data-grain="1"] .win-words {
  background:
    linear-gradient(rgba(255,255,255,0.12), rgba(255,255,255,0.12)) top / 100% 22% no-repeat,
    repeating-linear-gradient(178deg, transparent 0 4px, color-mix(in srgb, var(--rack-deep) 22%, transparent) 4px 5px, transparent 5px 9px),
    var(--rack);
}
/* each tile in a rack slot; the empty ones show as on the board */
.word-cards .slot {
  display: grid; place-items: center;
  width: calc(var(--w) + 4px); height: calc(var(--w) * 1.433 + 4px);
  border-radius: 5px;
  background: rgba(255,255,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
}
.win-words:empty { display: none; }
.word-row {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: subgrid; align-items: center;
  font: 700 12px/1 'Baloo 2', system-ui, sans-serif;
  animation: kk-win-pop 0.4s cubic-bezier(.2,.9,.3,1.3) both;
  animation-delay: calc(0.3s + var(--i) * 0.12s);
}
.word-cards { --w: 21px; display: flex; gap: 3px; }
.word-cards .kk-mini { --w: 21px; }
.word-cards .kk-mini small { min-width: 11px; height: 11px; font-size: 8px; line-height: 8px; }
.word-maths {
  justify-self: start;
  display: inline-flex; align-items: baseline; gap: 2px;
  white-space: nowrap;
  padding: 3px 7px;
  color: #fff; background: rgba(28,29,36,0.82);
  border-radius: 999px;
}
.word-maths b { font-size: 14px; }
.word-maths small { font-size: 10px; opacity: 0.8; }
.word-row.joker-row {
  display: block; justify-self: center;
  padding: 6px 14px;
  color: #fff;
  background: var(--joker);
  border-radius: 999px;
}

/* standings: ranked rows with a progress bar towards the target */
.standings {
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column; gap: 6px;
  margin: 0 auto 20px;
}
.standings:empty { display: none; }
.standings-title { font-size: 13px; font-weight: 700; opacity: 0.65; margin-bottom: 2px; }
.standing {
  position: relative;
  display: grid; grid-template-columns: 26px 34px minmax(0, 1fr) 70px 42px; align-items: center; gap: 8px;
  padding: 6px 12px 6px 8px;
  background: var(--surface);
  border: 2px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 14px;
  font: 700 15px/1 'Baloo 2', system-ui, sans-serif;
  color: var(--ink);
  text-align: left;
  animation: kk-win-pop 0.4s cubic-bezier(.2,.9,.3,1.3) both;
  animation-delay: calc(1.3s + var(--i) * 0.1s);
}
.standing.me { border-color: var(--ink); background: var(--hl); box-shadow: 0 3px 0 rgba(28,29,36,0.2); }
.standing .medal { font-size: 18px; text-align: center; }
.standing .av {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--hl); border: 2px solid var(--ink);
  font-size: 16px;
}
.standing .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.standing .bar { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.standing .bar i { display: block; height: 100%; width: var(--pct); border-radius: 99px; background: var(--accent); }
.standing .pts { font-size: 19px; font-weight: 800; text-align: right; }
.standing .gain {
  position: absolute; top: -10px; right: -6px;
  padding: 1px 8px; border-radius: 99px;
  background: var(--accent); color: #fff; border: 2px solid #fff;
  font-size: 13px; font-weight: 800;
  animation: kk-pop 0.5s cubic-bezier(.2,.9,.3,1.5) both;
  animation-delay: calc(1.6s + var(--i) * 0.1s);
}
@media (max-width: 420px) {
  .standing { grid-template-columns: 22px 30px minmax(0, 1fr) 44px 36px; gap: 6px; }
}

/* ---------- Scores: a corner button, the ranking opens under it ---------- */
#score-btn {
  position: fixed;
  top: 12px; right: 12px;
  z-index: 20001;
  display: none;
  align-items: center; gap: 6px;
  padding: 7px 14px;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 3px 0 rgba(28,29,36,0.25);
  cursor: pointer;
  font: 700 14px/1 'Baloo 2', system-ui, sans-serif;
  color: var(--ink);
}
#score-btn.visible { display: flex; }
/* leave the game: same pill as the scores button, top-left */
/* a round just ended (reveal, result, celebration): no top buttons */
body.round-over :is(#hud-left, #score-btn, #score-display, #game-theme-pop) { display: none !important; }

/* top-left in the game: leave, and the look */
#hud-left {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 20001;
  display: none; gap: 8px;
}
#hud-left.visible { display: flex; }
.hud-icon {
  display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 3px 0 rgba(28,29,36,0.25);
  cursor: pointer;
  color: var(--ink);
  transition: transform 0.12s, box-shadow 0.12s;
}
.hud-icon svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.hud-icon:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(28,29,36,0.25); }
#exit-btn:hover, #game-theme-btn:hover, #game-theme-btn[aria-expanded="true"] { background: var(--hl); }
#game-theme-pop {
  position: fixed;
  top: 58px; left: 12px;
  z-index: 20001;
  display: none;
  padding: 10px 12px;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 4px 0 rgba(28,29,36,0.25);
  color: var(--ink);
  animation: kk-score-in 0.18s ease-out;
}
#game-theme-pop.visible { display: block; }
.theme-dots { display: flex; gap: 10px; }
.th-dot {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--ink) 25%, transparent);
  cursor: pointer; padding: 0;
  transition: transform 0.15s cubic-bezier(.2,.9,.3,1.4);
}
.th-dot:hover { transform: scale(1.1); }
.th-dot.active { border-color: var(--surface); outline: 3px solid var(--ink); }
#exit-popup { z-index: 20002; }
/* the bot level is also asked from the waiting table (#lobby, 20002) */
#bot-level-popup { z-index: 20003; }
#score-btn:hover, #score-btn[aria-expanded="true"] { background: var(--hl); }
#score-display {
  position: fixed;
  top: 58px; right: 12px;
  z-index: 20001;
  min-width: 220px; max-width: calc(100vw - 24px);
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 16px;
  box-shadow: 0 4px 0 rgba(28,29,36,0.25);
  padding: 10px 10px 8px;
  display: none;
  flex-direction: column;
  gap: 4px;
  animation: kk-score-in 0.18s ease-out;
}
#score-display.visible { display: flex; }
@keyframes kk-score-in { from { opacity: 0; transform: translateY(-6px); } }
.score-title { font: 700 12px/1.25 'Baloo 2', system-ui, sans-serif; color: var(--ink); opacity: 0.6; margin: 0 4px 4px; }
.score-item {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: 14px;
  color: var(--ink);
}
.score-item.me { background: var(--hl); }
.score-item .score-medal { font-size: 14px; }
.score-item .score-emoji { font-size: 16px; }
.score-item .score-name { flex: 1; font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-item .score-value { font-weight: 800; margin-left: auto; padding-left: 10px; }
/* ---------- Theme picker (landing page, under the buttons) ----------
   One small table per theme; picking one repaints the page at once. */
.theme-row {
  margin-top: 30px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--table-ink);
}
.theme-row-label { font-size: 15px; font-weight: 600; }
.theme-row-label span { opacity: 0.74; }
.theme-row-label b { font-weight: 800; }
.theme-row-ux { min-height: 1.3em; font-size: 13px; font-weight: 500; opacity: 0.74; text-align: center; }
.theme-opts { display: flex; justify-content: center; gap: 8px; }
.th-opt {
  width: 66px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 4px 2px 5px;
  background: none; color: inherit;
  border: 2px solid transparent; border-radius: 14px;
  font: 700 12px/1.1 'Baloo 2', system-ui, sans-serif;
  cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s cubic-bezier(.2,.9,.3,1.4);
}
.th-opt:hover { transform: translateY(-2px); }
.th-opt.active { border-color: var(--table-ink); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.th-opt:focus-visible { outline: 3px solid var(--table-ink); outline-offset: 2px; }
.th-name { min-height: 2.2em; display: flex; align-items: flex-start; text-align: center; }
.th-swatch {
  flex: none; display: flex; gap: 3px; align-items: center; justify-content: center;
  width: 58px; height: 40px; border-radius: 9px;
  border: 1.5px solid rgba(28,29,36,0.25);
  box-shadow: 0 3px 0 rgba(28,29,36,0.18);
}
.th-swatch i {
  display: grid; place-items: center;
  width: 15px; height: 21px;
  border: 1.5px solid; border-radius: 4px;
  box-shadow: 0 2px 0 var(--back);
  font-style: normal; font-size: 12px; line-height: 1;
}
@media (max-width: 360px) {
  .theme-opts { gap: 4px; }
  .th-opt { width: 60px; }
}
/* short screens: tighten the landing page so the picker still fits */
@media (max-height: 740px) {
  .subtitle { margin: 4px 0 22px; }
  .theme-row { margin-top: 18px; }
  #landing .hand { height: 118px; }
  #landing .kk-card { --w: 58px; }
}
@media (max-height: 620px) {
  #landing .hand { height: 96px; }
  #landing .kk-card { --w: 48px; }
}

/* ---------- Finish or play on? ---------- */
#finish-ask { z-index: 20002; background: rgba(28,29,36,0.4); }
.finish-ask-panel { max-width: 360px; padding-top: 22px; animation: kk-pop 0.3s cubic-bezier(.2,.9,.3,1.4); }
.finish-ask-panel h2 { margin: 6px 0 2px; font-size: 24px; line-height: 1.15; }
.finish-ask-panel .fa-tile { display: flex; justify-content: center; }
.finish-ask-panel .fa-tile .kk-mini { --w: 48px; transform: rotate(-6deg); }
.finish-ask-panel .fa-pts { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.finish-ask-panel .fa-tip:empty { display: none; }
.finish-ask-panel .fa-tip {
  margin: 0 0 14px; padding: 8px 12px;
  font-size: 14px; line-height: 1.35;
  border-radius: 12px; background: var(--hl);
}
.finish-ask-panel .fa-cancel {
  background: none; border: none; color: var(--ink); opacity: 0.65;
  font: 600 15px 'Baloo 2', system-ui, sans-serif; text-decoration: underline; cursor: pointer;
}

/* ---------- Opened hands (end of round) ---------- */
/* a standings row that opens its player's hand */
.standing.peek, .leaderboard-row.peek { cursor: pointer; }
.standing.peek:hover, .leaderboard-row.peek:hover { border-color: var(--ink); }
.standing.peek .nm::after, .leaderboard-row.peek .leaderboard-name::after { content: ' 👀'; font-size: 0.85em; opacity: 0.75; }

/* the popup with a single opened hand */
#hand-popup { z-index: 20005; background: rgba(28,29,36,0.45); }
.hand-popup-panel { width: auto; max-width: min(96vw, 460px); padding: 18px 18px 20px; animation: kk-pop 0.25s cubic-bezier(.2,.9,.3,1.4); }
.hand-popup-panel .hp-name { margin: 0 28px 12px; font: 800 20px/1.2 'Baloo 2', system-ui, sans-serif; }
.hand-popup-panel .hp-close {
  position: absolute; top: 10px; right: 10px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--ink); background: var(--surface); color: var(--ink);
  font: 800 15px/1 'Baloo 2', system-ui, sans-serif; cursor: pointer;
}
.hp-rack { display: inline-flex; padding: 8px; border-radius: 12px; }
.hp-rack .kk-mini, .hp-rack .slot { --w: clamp(26px, 9.5vw, 42px); }
.hp-rack .kk-mini small { min-width: 15px; height: 15px; font-size: 11px; line-height: 12px; border-radius: 8px; }

/* an opened hand, laid out like its owner's rack */
.hand-rack { display: flex; flex-direction: column; gap: 2px; background: var(--rack); }
.rack-row { display: flex; gap: 4px; padding-bottom: 3px; }
.hand-rack .slot { display: block; width: var(--w); height: calc(var(--w) * 1.433); border-radius: 4px; background: rgba(255,255,255,0.14); }

/* turn countdown inside the finish question: a ring like the table's timer */
.fa-timer {
  --p: 1;
  position: absolute; top: 14px; right: 14px;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--fa-col, var(--accent)) calc(var(--p) * 360deg), rgba(28,29,36,0.12) 0);
  font: 800 17px/1 'Baloo 2', system-ui, sans-serif; color: var(--ink);
}
.fa-timer::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--panel); }
.fa-timer span { position: relative; }
.fa-timer.low { --fa-col: #e5484d; animation: kk-bounce 0.6s ease-in-out infinite; }
.fa-timer[hidden] { display: none; }
.fa-auto { margin: 10px 0 0; font-size: 12.5px; opacity: 0.65; }
.fa-auto:empty { display: none; }

/* The long entry delays above wait for the win screen's card fan. The round
   result and the match leaderboard have no fan: rows come in right away. */
.round-result-box .word-row, .round-result-box .standing {
  animation-delay: calc(0.15s + var(--i) * 0.07s);
}
.round-result-box .standing { animation-delay: calc(0.35s + var(--i) * 0.07s); }
.round-result-box .standing .gain { animation-delay: 0.8s; }

/* tile points on the small cards (scored words, opened hands) */
.kk-mini small {
  position: absolute; right: -4px; bottom: -4px;
  min-width: 12px; height: 12px; padding: 0 2px;
  border-radius: 6px; border: 1.5px solid var(--ink);
  background: var(--surface); color: var(--ink);
  font: 800 9px/9px 'Baloo 2', system-ui, sans-serif;
  text-align: center;
}
/* an opened hand, laid out like its owner's rack */