/* =====================================================================
   PARTY HAVOC — doodly, minimal, bubbly
   ===================================================================== */

@font-face {
  font-family: 'Short Stack';
  src: url('../assets/fonts/short-stack.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Patrick Hand';
  src: url('../assets/fonts/patrick-hand.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Patrick Hand';
  src: url('../assets/fonts/patrick-hand-ext.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #fdf0a6;
  --bg-deep: #f6e48a;
  --ink: #2a2522;
  --ink-2: #554c44;
  --muted: #8a7d6e;
  --paper: #fffcf2;
  --paper-2: #fff7dc;

  --blue: #5cc8ff;   --blue-d: #2b8fcf;   --blue-s: #dcf3ff;
  --pink: #f7a1e8;   --pink-d: #c45fb3;   --pink-s: #fde6f8;
  --green: #8ee38f;  --green-d: #45a55b;  --green-s: #e3f9df;
  --orange: #ffbc5e; --orange-d: #d4872a; --orange-s: #fff0d6;
  --purple: #b7a5ff; --purple-d: #7a63d9; --purple-s: #ece7ff;
  --teal: #7fdcc9; --teal-d: #36a891; --teal-s: #dcf6ef;
  --red: #ff8a7a;    --red-d: #cf4f42;    --red-s: #ffe3df;
  --cobalt: #8fa8ff; --cobalt-d: #4d6bd6; --cobalt-s: #e4eaff;
  --mint: #7fe0b5;   --mint-d: #2f9e6e;   --mint-s: #dcf7ea;
  --gold: #ffd34d;   --gold-d: #c4921a;   --gold-s: #fff3c8;
  --lime: #c5e86c;   --lime-d: #7ea52a;   --lime-s: #f1fadb;
  --coal: #a39dbb;   --coal-d: #5d5674;   --coal-s: #eeecf4;
  --flame: #ff9a6b;  --flame-d: #d6612f;  --flame-s: #ffe9de;
  --sun: #ffe36e;    --sun-d: #c9a316;    --sun-s: #fff8d2;
  --grape: #c9a0f0;  --grape-d: #8e5bc4;  --grape-s: #f3e8ff;
  --stone: #d3c9b5;  --stone-d: #7d7262;  --stone-s: #f4f0e8;
  --cherry: #ff86a6; --cherry-d: #d4466d; --cherry-s: #ffe4ec;
  --aqua: #6fd8e2;   --aqua-d: #1d8f9e;   --aqua-s: #dbf6f8;

  --display: 'Short Stack', 'Comic Sans MS', 'Chalkboard SE', system-ui, sans-serif;
  --hand: 'Patrick Hand', 'Comic Sans MS', 'Chalkboard SE', system-ui, sans-serif;

  --radius-wobble: 18px 24px 17px 22px / 22px 17px 24px 18px;
  --radius-wobble-2: 24px 16px 22px 18px / 16px 22px 18px 24px;
  --line: 2.5px;
  --shadow-ink: 3px 4px 0 rgba(42, 37, 34, 0.14);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--hand);
  font-size: 20px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
button { font: inherit; color: inherit; }
button:not(:disabled) { cursor: pointer; }
img, svg { display: block; }
code { font-family: ui-monospace, Menlo, monospace; font-size: .8em; background: rgba(42,37,34,.07); padding: 1px 6px; border-radius: 6px; }
em { font-style: normal; color: var(--muted); }
b { font-weight: 400; font-family: var(--display); font-size: .92em; }

::selection { background: var(--pink); }
:focus-visible { outline: 3px dashed var(--ink); outline-offset: 3px; border-radius: 8px; }

/* no visible scrollbars anywhere (scrolling still works) */
html, body, * { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.muted { color: var(--muted); }
.small { font-size: 17px; }
.center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.row-gap { display: flex; flex-direction: row; justify-content: center; gap: 14px; flex-wrap: wrap; }
.row-end { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }

#app { min-height: 100vh; min-height: 100dvh; }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn {
  --c: var(--blue); --cd: var(--blue-d);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 24px 12px;
  min-height: 48px;
  border: 0;
  border-radius: 12px 14px 11px 15px;
  background: var(--c);
  color: var(--ink);
  font-family: var(--display);
  font-size: 18px;
  line-height: 1;
  white-space: nowrap;
  transform: rotate(-1.6deg);
  box-shadow: -4px 5px 0 var(--cd);
  transition: transform .18s var(--ease-pop), box-shadow .12s ease, filter .2s;
  user-select: none;
}
.btn:nth-of-type(2n) { transform: rotate(1.4deg); }
.btn:hover:not(:disabled) { transform: rotate(0.6deg) translateY(-2px); box-shadow: -5px 7px 0 var(--cd); }
.btn:active:not(:disabled) { transform: rotate(0deg) translate(-2px, 3px); box-shadow: -2px 2px 0 var(--cd); transition-duration: .06s; }
.btn:disabled { --c: #f1e8cf; --cd: #ddd0ac; color: rgba(42,37,34,.45); border-color: rgba(42,37,34,.35); cursor: not-allowed; transform: rotate(-1deg); }
.btn:disabled svg { opacity: .55; }
.btn .icon { flex: none; }
.btn.is-busy { filter: none; opacity: 1; cursor: progress; }
.btn.is-busy span { opacity: .55; }
.btn.is-busy::after {
  content: ''; width: 16px; height: 16px; border-radius: 50%;
  border: 2.5px solid var(--ink); border-right-color: transparent;
  animation: spin .7s linear infinite; margin-left: 4px;
}
.btn-blue   { --c: var(--blue);   --cd: var(--blue-d); }
.btn-pink   { --c: var(--pink);   --cd: var(--pink-d); }
.btn-green  { --c: var(--green);  --cd: var(--green-d); }
.btn-orange { --c: var(--orange); --cd: var(--orange-d); }
.btn-purple { --c: var(--purple); --cd: var(--purple-d); }
.btn-teal   { --c: var(--teal);   --cd: var(--teal-d); }
.btn-red    { --c: var(--red);    --cd: var(--red-d); }
.btn-cobalt { --c: var(--cobalt); --cd: var(--cobalt-d); }
.btn-mint { --c: var(--mint); --cd: var(--mint-d); }
.btn-gold { --c: var(--gold); --cd: var(--gold-d); }
.btn-lime { --c: var(--lime); --cd: var(--lime-d); }
.btn-yellow { --c: var(--paper);  --cd: #d9c67a; }
.btn-flame { --c: var(--flame); --cd: var(--flame-d); }
.btn-grape { --c: var(--grape); --cd: var(--grape-d); }
.btn-cherry { --c: var(--cherry); --cd: var(--cherry-d); }
.btn-aqua { --c: var(--aqua); --cd: var(--aqua-d); }
.btn-sm { min-height: 40px; padding: 8px 16px; font-size: 16px; box-shadow: -3px 4px 0 var(--cd); }
.btn-lg { min-height: 56px; padding: 14px 30px 15px; font-size: 20px; }
.btn-xl { min-height: 64px; padding: 16px 38px 17px; font-size: 23px; box-shadow: -5px 6px 0 var(--cd); }

.link-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 8px 10px;
  font-family: var(--display); font-size: 16px; color: var(--ink-2);
  border-radius: 10px;
}
.link-btn:hover:not(:disabled) { color: var(--ink); background: rgba(42,37,34,.06); }
.link-btn:disabled { opacity: .4; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
  border: 0; background: transparent; border-radius: 12px;
  color: var(--ink-2);
  transition: background .15s, transform .15s var(--ease-pop);
}
.icon-btn:hover { background: rgba(42,37,34,.08); color: var(--ink); transform: rotate(-6deg); }

/* ---------------------------------------------------------------------
   Inputs
   --------------------------------------------------------------------- */
.line-input {
  width: 100%;
  border: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 40 3, 70 8, 110 5 S 190 3, 230 6 S 280 7, 298 4' fill='none' stroke='%232a2522' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") bottom / 100% 10px no-repeat;
  padding: 10px 6px 12px;
  font-family: var(--display);
  font-size: 20px;
  color: var(--ink);
  text-align: center;
  outline: none;
  border-radius: 0;
}
.line-input::placeholder { color: var(--muted); opacity: .85; }
.line-input:focus { background-color: transparent; }
.line-input[readonly] { color: var(--ink-2); }

/* ---------------------------------------------------------------------
   Cards & bits
   --------------------------------------------------------------------- */
.card {
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-wobble);
  padding: 22px 24px;
  box-shadow: var(--shadow-ink);
}
.card h4 { font-size: 16px; color: var(--muted); margin-bottom: 10px; letter-spacing: .02em; }
.kicker { display: block; font-family: var(--display); font-size: 15px; color: var(--muted); margin-bottom: 6px; }

.badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 9px 3px; border-radius: 999px;
  font-family: var(--display); font-size: 13px; line-height: 1.3;
  border: 2px solid var(--ink); background: var(--paper);
}
.badge-host { background: var(--orange); }
.badge-away { background: #eee6d6; color: var(--muted); border-color: var(--muted); }
.badge-imp { background: var(--pink); }

.dots { display: inline-flex; gap: 4px; vertical-align: middle; margin-left: 2px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: bounce 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }

.loading { text-align: center; padding: 80px 20px; font-family: var(--display); color: var(--ink-2); }

.avatar { overflow: visible; flex: none; }

/* tints per game */
.tint-pink   { --tint: var(--pink);   --tint-d: var(--pink-d);   --tint-s: var(--pink-s); }
.tint-blue   { --tint: var(--blue);   --tint-d: var(--blue-d);   --tint-s: var(--blue-s); }
.tint-green  { --tint: var(--green);  --tint-d: var(--green-d);  --tint-s: var(--green-s); }
.tint-orange { --tint: var(--orange); --tint-d: var(--orange-d); --tint-s: var(--orange-s); }
.tint-purple { --tint: var(--purple); --tint-d: var(--purple-d); --tint-s: var(--purple-s); }
.tint-teal   { --tint: var(--teal);   --tint-d: var(--teal-d);   --tint-s: var(--teal-s); }
.tint-red    { --tint: var(--red);    --tint-d: var(--red-d);    --tint-s: var(--red-s); }
.tint-cobalt { --tint: var(--cobalt); --tint-d: var(--cobalt-d); --tint-s: var(--cobalt-s); }
.tint-mint { --tint: var(--mint); --tint-d: var(--mint-d); --tint-s: var(--mint-s); }
.tint-gold { --tint: var(--gold); --tint-d: var(--gold-d); --tint-s: var(--gold-s); }
.tint-lime { --tint: var(--lime); --tint-d: var(--lime-d); --tint-s: var(--lime-s); }
.tint-coal { --tint: var(--coal); --tint-d: var(--coal-d); --tint-s: var(--coal-s); }
.tint-flame { --tint: var(--flame); --tint-d: var(--flame-d); --tint-s: var(--flame-s); }
.tint-sun { --tint: var(--sun); --tint-d: var(--sun-d); --tint-s: var(--sun-s); }
.tint-grape { --tint: var(--grape); --tint-d: var(--grape-d); --tint-s: var(--grape-s); }
.tint-stone { --tint: var(--stone); --tint-d: var(--stone-d); --tint-s: var(--stone-s); }
.tint-cherry { --tint: var(--cherry); --tint-d: var(--cherry-d); --tint-s: var(--cherry-s); }
.tint-aqua { --tint: var(--aqua); --tint-d: var(--aqua-d); --tint-s: var(--aqua-s); }

/* ---------------------------------------------------------------------
   Page shells
   --------------------------------------------------------------------- */
.page { max-width: 1060px; margin: 0 auto; padding: 18px 20px 80px; }
.page.narrow { max-width: 560px; }
.center-page { display: grid; place-items: center; min-height: 60vh; }

.logo {
  font-family: var(--display);
  font-size: clamp(44px, 9vw, 72px);
  letter-spacing: -0.02em;
  text-align: center;
  line-height: 1;
}

/* ---------------------------------------------------------------------
   Home
   --------------------------------------------------------------------- */
.home { max-width: 820px; margin: 0 auto; padding: 56px 22px 40px; }
.hero { text-align: center; }
.tagline { color: var(--ink-2); margin-top: 12px; font-size: 21px; }
.hero-art { position: relative; margin: 20px auto 0; max-width: 520px; }
.hero-doodle { width: 100%; height: auto; max-height: 220px; }
.hero-doodle .draw path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1s ease forwards; animation-delay: var(--d); fill-opacity: 0; }
.hero-doodle .draw path[fill] { animation: draw 1s ease forwards, fillin .5s ease forwards; animation-delay: var(--d), calc(var(--d) + .6s); }
.hero-doodle .pop > * { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: popin .45s var(--ease-pop) forwards; animation-delay: var(--d); }
.ticker {
  display: block; min-height: 22px; margin: 2px auto 0;
  font-family: var(--display); font-size: 15px; color: var(--ink-2);
  text-align: center; transform: rotate(-2deg);
}
.tick-in { display: inline-block; animation: tickin .5s var(--ease-pop); }
.hl-cobalt { color: #3f5fcf; } .hl-mint { color: #23875b; } .hl-pink { color: #d0479f; } .hl-blue { color: #1f86c9; } .hl-green { color: #2f9a4a; } .hl-orange { color: #d4761a; } .hl-gold { color: #a87a0c; }

.start { margin: 26px auto 0; max-width: 560px; display: flex; flex-direction: column; align-items: center; }
.who { display: flex; align-items: center; gap: 16px; width: 100%; max-width: 380px; }
.who-avatar {
  position: relative; border: 0; background: none; padding: 0; flex: none;
  transition: transform .2s var(--ease-pop);
}
.who-avatar:hover { transform: rotate(-6deg) scale(1.05); }
.who-edit {
  position: absolute; right: -2px; bottom: 2px;
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--ink);
}
.name-field { flex: 1; }
.name-field .line-input { font-size: 24px; }
.form-error { color: var(--red-d); font-family: var(--display); font-size: 17px; animation: shake .4s; }
.has-error .line-input::placeholder { color: var(--red-d); }
.shake { animation: shake .4s; }

.av-pop { margin-top: 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; animation: dropin .3s var(--ease-pop); }

.start-actions { margin-top: 34px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 26px; width: 100%; max-width: 520px; }
.start-col { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.start-col .btn { width: 100%; max-width: 210px; }
.or { font-family: var(--display); color: var(--muted); font-size: 16px; padding-bottom: 16px; }
.code-input { width: 100%; max-width: 210px; font-size: 18px; letter-spacing: .04em; }
.code-input:not(:placeholder-shown) { letter-spacing: .32em; font-size: 24px; }

.section-h { text-align: center; font-size: 28px; margin: 80px 0 26px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.squiggle { width: 120px; height: 12px; color: var(--pink-d); }

.game-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.game-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 11px); }
.game-card {
  position: relative;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-wobble);
  transform: rotate(var(--tilt));
  transition: transform .25s var(--ease-pop), box-shadow .2s;
  box-shadow: -5px 6px 0 var(--tint);
  overflow: hidden;
}
.game-card:hover { transform: rotate(0deg) translateY(-3px); box-shadow: -6px 9px 0 var(--tint); }
.game-hot {
  position: absolute; z-index: 2; top: 9px; right: 10px;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px 3px; border: 1.7px solid var(--ink); border-radius: 999px;
  background: var(--sun); box-shadow: -2px 2px 0 rgba(42,37,34,.16);
  font: 13px/1.2 var(--display); transform: rotate(2deg);
}
.game-hot svg { color: var(--orange-d); }
.lobby-game-hot { top: 4px; right: 4px; gap: 2px; padding: 1px 5px 2px; font-size: 10px; }
.lobby-game-hot svg { width: 10px; height: 10px; }
.game-card-btn { display: flex; gap: 14px; align-items: center; width: 100%; border: 0; background: none; text-align: left; padding: 18px 18px 18px 14px; }
.game-card-art { flex: none; width: 96px; }
.game-card-art .doodle { width: 100%; height: auto; }
.game-card h3 { font-size: 21px; margin-bottom: 4px; }
.game-card p { font-size: 18px; color: var(--ink-2); line-height: 1.25; }
.meta { display: inline-block; margin-top: 8px; font-family: var(--display); font-size: 13px; color: var(--muted); }
.game-card .rules { margin: 0 20px 18px; }
.hint-line { text-align: center; color: var(--muted); font-size: 17px; margin-top: 18px; }

.rules { margin: 10px 0 0; padding-left: 26px; font-size: 18px; color: var(--ink-2); display: grid; gap: 4px; }
.rules li::marker { font-family: var(--display); color: var(--ink); }

.how .steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.steps li { display: flex; gap: 12px; align-items: flex-start; }
.steps .num {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  font-family: var(--display); font-size: 20px;
  border: var(--line) solid var(--ink); border-radius: 50% 46% 52% 48%;
  background: var(--paper);
}
.steps li:nth-child(1) .num { background: var(--blue); }
.steps li:nth-child(2) .num { background: var(--pink); }
.steps li:nth-child(3) .num { background: var(--green); }
.steps b { font-size: 18px; }
.steps p { font-size: 18px; color: var(--ink-2); margin-top: 2px; }

.foot { margin-top: 80px; text-align: center; color: var(--muted); font-size: 17px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }

/* setup page */
.setup .card { margin-top: 30px; }
.setup h2 { font-size: 22px; margin-bottom: 12px; }
.setup ol { padding-left: 24px; display: grid; gap: 6px; margin: 0 0 16px; }

/* ---------------------------------------------------------------------
   Avatar editor
   --------------------------------------------------------------------- */
.av-editor { display: flex; align-items: center; gap: 22px; justify-content: center; flex-wrap: wrap; }
.av-stage { position: relative; padding: 8px; }
.av-stage .avatar { animation: wobble 3s ease-in-out infinite; }
.av-random {
  position: absolute; right: -6px; bottom: -2px; width: 40px; height: 40px;
  display: grid; place-items: center; border-radius: 12px;
  background: var(--orange); border: 0; box-shadow: -2px 3px 0 var(--orange-d);
  transform: rotate(8deg); transition: transform .2s var(--ease-pop);
}
.av-random:hover { transform: rotate(-12deg) scale(1.08); }
.av-rows { display: grid; gap: 2px; }
.av-row { display: grid; grid-template-columns: 34px 70px 34px; align-items: center; text-align: center; font-family: var(--display); font-size: 15px; }
.av-arrow { width: 34px; height: 34px; display: grid; place-items: center; border: 0; background: none; border-radius: 10px; color: var(--ink-2); }
.av-arrow:hover { background: rgba(42,37,34,.08); color: var(--ink); }

/* ---------------------------------------------------------------------
   Room header
   --------------------------------------------------------------------- */
.room-top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  max-width: 1060px; margin: 0 auto; padding: 14px 20px 0;
}
.mini-logo { justify-self: start; border: 0; background: none; padding: 4px 0; font-family: var(--display); font-size: 20px; transition: transform .2s var(--ease-pop); }
.mini-logo:hover { transform: rotate(-3deg); }
.room-code {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 6px 4px 14px; border-radius: 14px;
  background: var(--paper); border: 2px solid var(--ink);
  transform: rotate(-1deg);
}
.room-code-label { font-family: var(--display); font-size: 13px; color: var(--muted); }
.room-code b { font-size: 20px; letter-spacing: .14em; }
.room-code .icon-btn { width: 32px; height: 32px; }
.leave-btn { justify-self: end; }
.room-right { justify-self: end; display: flex; align-items: center; gap: 4px; }
.sound-btn { width: 38px; height: 38px; color: var(--ink-2); }
.sound-btn.is-off { color: var(--muted); opacity: .7; }
.conn-banner {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 50;
  background: var(--ink); color: var(--paper); padding: 6px 16px; border-radius: 999px;
  font-family: var(--display); font-size: 15px;
}

.join-page { padding-top: 40px; }
.join-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.join-card h2 { font-size: 24px; }
.code-tag { display: inline-block; padding: 0 8px; background: var(--pink); border-radius: 8px; letter-spacing: .12em; transform: rotate(-2deg); }
.join-room-form { display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; max-width: 320px; margin-top: 8px; }
.empty-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 460px; margin: 0 auto; }
.empty-card h2 { font-size: 26px; }

/* ---------------------------------------------------------------------
   Lobby
   --------------------------------------------------------------------- */
.lobby { padding-top: 10px; }
.invite { text-align: center; margin: 8px 0 26px; }
.invite-label { font-family: var(--display); font-size: 15px; color: var(--muted); }
.big-code { display: flex; justify-content: center; gap: 10px; margin: 8px 0 14px; }
.big-code span {
  display: grid; place-items: center; width: 62px; height: 70px;
  font-family: var(--display); font-size: 40px;
  background: var(--paper); border: var(--line) solid var(--ink);
  border-radius: 14px 18px 13px 17px; transform: rotate(var(--r));
  box-shadow: -3px 4px 0 rgba(42,37,34,.18);
}

.lobby-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 26px; align-items: start; min-width: 0; }
.lobby-main, .players-card, .game-panel, .game-panel-head > div, .settings, .setting { min-width: 0; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.card-head h3 { font-size: 20px; }
.count { font-family: var(--display); color: var(--muted); font-size: 15px; }
.player-list { list-style: none; width: calc(100% + 16px); min-width: 0; margin: 0 -8px; padding: 0; display: grid; gap: 2px; }
.player-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); align-items: center; gap: 6px; min-width: 0; padding: 4px 8px; border-radius: 14px; animation: slidein .35s var(--ease-pop); }
.player-row.is-me { background: rgba(255, 227, 107, .45); }
.player-row.is-away .avatar, .player-row.is-away .player-name { opacity: .45; }
.players-card .player-row { display: flex; align-items: center; gap: 7px; }
.players-card .player-me { display: flex; align-items: center; gap: 9px; width: auto; max-width: 100%; min-width: 0; flex: 1 1 0; overflow: hidden; border: 0; background: none; padding: 0; text-align: left; }
.players-card button.player-me:hover .edit-hint { opacity: 1; }
.players-card .player-name { flex: 1 1 auto; min-width: 0; font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.players-card .player-badges .badge { max-width: 100%; padding-inline: 6px; font-size: 11px; white-space: nowrap; }
.edit-hint { opacity: .45; color: var(--ink-2); transition: opacity .2s; }
.players-card .player-badges { display: flex; align-items: center; justify-content: flex-end; align-content: center; flex: 0 1 auto; flex-wrap: wrap; gap: 3px; width: max-content; min-width: 0; max-width: min(46%, 132px); }
.players-card .player-badges > * { flex: 0 0 auto; }
.players-card .kick { flex: 0 0 30px; width: 30px; height: 30px; }
.kick { width: 30px; height: 30px; opacity: .5; }
.kick:hover { opacity: 1; color: var(--red-d); }
.players-card .small { margin-top: 10px; }

.lobby-chat {
  margin-top: 16px; padding: 12px;
  background: var(--paper-2); border: 2px dashed rgba(42,37,34,.28);
  border-radius: 16px 20px 15px 19px; min-width: 0;
}
.lobby-chat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.lobby-chat-head h4 { font-size: 16px; }
.lobby-chat-head .count { font-size: 12px; }
.lobby-chat-list {
  list-style: none; margin: 0; padding: 2px 2px 4px; display: flex; flex-direction: column; gap: 7px;
  max-height: 230px; overflow-y: auto; min-width: 0;
}
.lobby-chat-message { min-width: 0; max-width: 100%; padding: 7px 9px; background: var(--paper); border-radius: 12px 14px 11px 13px; overflow-wrap: anywhere; }
.lobby-chat-message.is-self { background: #fff0b8; }
.lobby-chat-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; color: var(--ink-2); font-size: 14px; line-height: 1.15; }
.lobby-chat-meta strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--display); font-weight: 400; }
.lobby-chat-meta time { flex: none; color: var(--muted); font-size: 12px; }
.lobby-chat-message p { margin-top: 3px; font-size: 17px; line-height: 1.2; white-space: pre-wrap; overflow-wrap: anywhere; }
.lobby-chat-empty { padding: 8px 5px; color: var(--muted); font-size: 16px; text-align: center; }
.lobby-chat-form { display: flex; align-items: stretch; gap: 7px; margin-top: 9px; min-width: 0; }
.lobby-chat-input { min-width: 0; width: 100%; height: 40px; padding: 6px 10px; border: 2px solid rgba(42,37,34,.48); border-radius: 11px 13px 10px 12px; background: var(--paper); color: var(--ink); font: 17px var(--hand); }
.lobby-chat-input:focus { outline: 2px dashed var(--ink); outline-offset: 2px; }
.lobby-chat-send { flex: none; min-width: 54px; padding: 5px 10px; border: 2px solid var(--ink); border-radius: 11px 13px 10px 12px; background: var(--yellow, #ffe36e); font: 14px var(--display); box-shadow: -2px 3px 0 rgba(42,37,34,.14); }
.lobby-chat-send:hover:not(:disabled) { transform: rotate(-2deg); }
.lobby-chat-send:disabled { opacity: .5; cursor: progress; }

.pick-head h3 { font-size: 20px; margin-bottom: 12px; }
.game-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.game-tile {
  position: relative;
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 8px 12px; border-radius: var(--radius-wobble-2);
  background: var(--paper); border: var(--line) solid transparent;
  transition: transform .2s var(--ease-pop), background .2s, border-color .2s, box-shadow .2s;
}
.game-tile.is-hot { padding-top: 20px; }
.game-tile:hover:not(:disabled) { transform: translateY(-3px) rotate(-1.5deg); border-color: var(--ink); }
.game-tile.is-on { background: var(--tint-s); border-color: var(--ink); box-shadow: -4px 5px 0 var(--tint); transform: rotate(-1.5deg); }
.game-tile:disabled { cursor: default; }
.game-tile:disabled:not(.is-on) { opacity: .55; }
.game-tile-art { width: 60px; }
.game-tile-art .doodle { width: 100%; height: auto; }
.game-tile-name { font-family: var(--display); font-size: 14px; text-align: center; line-height: 1.15; }

.game-panel { box-shadow: -5px 6px 0 var(--tint); }
.game-panel-head { display: flex; gap: 16px; align-items: center; }
.game-panel-art { flex: none; width: 92px; }
.game-panel-head h3 { font-size: 24px; }
.game-panel-head p { color: var(--ink-2); font-size: 18px; }
.howto { margin-top: 14px; }
.howto summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 15px; color: var(--ink-2); cursor: pointer; padding: 4px 8px; margin-left: -8px; border-radius: 10px; }
.howto summary::-webkit-details-marker { display: none; }
.howto summary:hover { background: rgba(42,37,34,.06); }

.settings { margin-top: 16px; border-top: 2px dashed rgba(42,37,34,.18); padding-top: 14px; display: grid; gap: 14px; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.setting-label { font-family: var(--display); font-size: 15px; display: flex; flex-direction: column; }
.setting-label small { font-family: var(--hand); font-size: 15px; color: var(--muted); }
.seg { display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; }
.seg-btn {
  padding: 6px 13px 7px; border-radius: 11px 13px 10px 12px;
  border: 2px solid var(--ink); background: var(--paper);
  font-family: var(--display); font-size: 14px;
  transition: transform .15s var(--ease-pop), background .15s;
}
.seg-btn:hover:not(:disabled) { transform: rotate(-2deg); }
.seg-btn.is-on { background: var(--tint, var(--blue)); box-shadow: -2px 2px 0 var(--ink); }
.seg-btn:disabled { cursor: default; }
.seg-btn:disabled:not(.is-on) { opacity: .45; border-color: var(--muted); }
.seg-btn.is-capped { border-style: dashed; opacity: .35; cursor: not-allowed; }
.setting-packs { flex-direction: column; align-items: flex-start; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px 6px; border-radius: 999px;
  border: 2px dashed var(--muted); background: transparent; color: var(--ink-2);
  font-family: var(--display); font-size: 14px;
  transition: transform .15s var(--ease-pop), background .15s;
}
.chip:hover:not(:disabled) { transform: rotate(-2deg); }
.chip.is-on { border-style: solid; border-color: var(--ink); background: var(--tint-s, var(--paper)); color: var(--ink); }
.chip-spicy.is-on { background: #ffd9d3; }
.chip:disabled { cursor: default; }
.chip:disabled:not(.is-on) { opacity: .5; }

.start-row { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.start-row .btn { max-width: 100%; white-space: normal; text-align: center; }
.waiting-host { font-family: var(--display); font-size: 18px; color: var(--ink-2); text-align: center; }

/* ---------------------------------------------------------------------
   In-game shared
   --------------------------------------------------------------------- */
.game { padding-top: 8px; max-width: 760px; margin: 0 auto; }
.game.offthemap { max-width: 1000px; }
.game.fakeartist { max-width: 1020px; }
.stack { display: flex; flex-direction: column; gap: 18px; }
.stack.center { align-items: center; }
.stage-h { font-size: 26px; text-align: center; }

.game-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 18px; padding: 8px 10px 8px 12px;
  border-bottom: 2.5px dashed rgba(42,37,34,.2);
}
.game-bar-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.game-bar-art { width: 46px; flex: none; }
.game-bar-title b { display: block; font-size: 17px; }
.game-bar-stage { display: block; font-size: 16px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-bar-right { display: flex; align-items: center; gap: 4px; }
.host-tools { display: flex; gap: 2px; margin-left: 4px; padding-left: 6px; border-left: 2px dashed rgba(42,37,34,.2); }
.howto-pop { margin: -6px 0 18px; animation: dropin .25s var(--ease-pop); }
.howto-pop .rules { margin-top: 0; }

.timer { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--paper); border: 2px solid var(--ink); }
.timer-ring { width: 30px; height: 30px; transform: rotate(-90deg); }
.timer-bg { fill: none; stroke: rgba(42,37,34,.12); stroke-width: 5; }
.timer-fg { fill: none; stroke: var(--green-d); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 100; transition: stroke-dashoffset .3s linear, stroke .3s; }
.timer-text { font-family: var(--display); font-size: 17px; min-width: 2.2ch; text-align: center; font-variant-numeric: tabular-nums; }
.timer.is-urgent { background: #ffe2dd; animation: pulse 1s infinite; }
.timer.is-urgent .timer-fg { stroke: var(--red-d); }
.timer.is-paused .timer-fg { stroke: var(--muted); }

.ptag { display: inline-flex; align-items: center; gap: 8px; }

.waiting { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 4px; }
.waiting-avatars { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.wa { position: relative; opacity: .5; transition: opacity .3s, transform .3s var(--ease-pop); }
.wa.is-done { opacity: 1; transform: translateY(-3px); }
.wa.is-away { filter: grayscale(1); }
.wa-check {
  position: absolute; right: -4px; bottom: -2px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; background: var(--green); border: 2px solid var(--ink);
  animation: popin .3s var(--ease-pop);
}
.waiting-text { color: var(--muted); font-size: 17px; }

.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; }
.picker-sm { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.pick {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px 10px; border-radius: var(--radius-wobble-2);
  border: var(--line) solid transparent; background: var(--paper);
  transition: transform .18s var(--ease-pop), border-color .15s, background .15s, box-shadow .15s;
}
.picker-sm .pick { padding: 8px 4px; }
.picker-sm .pick .avatar { width: 50px; height: 50px; }
.pick:hover:not(:disabled) { transform: translateY(-3px) rotate(-2deg); border-color: var(--ink); }
.pick.is-selected { border-color: var(--ink); background: var(--pink-s); box-shadow: -4px 5px 0 var(--pink); transform: rotate(-2deg); }
.pick.is-selected::after {
  content: ''; position: absolute; top: -9px; right: -7px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a2522' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.8c1.8 1.6 3.3 3.3 4.7 5.2 3.1-4.9 6.4-8.9 10.3-12.4'/%3E%3C/svg%3E") center / 16px no-repeat;
  border: 2px solid var(--ink); animation: popin .3s var(--ease-pop);
}
.pick:disabled { opacity: .35; cursor: not-allowed; }
.pick-name { font-family: var(--display); font-size: 15px; text-align: center; line-height: 1.15; word-break: break-word; }

.banner { text-align: center; padding: 6px 10px 2px; }
.banner h2 { font-size: clamp(28px, 6vw, 40px); display: inline-block; position: relative; animation: popin .45s var(--ease-pop); }
.banner h2::after { content: ''; position: absolute; left: -4%; right: -4%; bottom: -2px; height: 14px; z-index: -1; border-radius: 6px; transform: rotate(-1.2deg); opacity: .9; }
.banner-pink h2::after { background: var(--pink); }
.banner-green h2::after { background: var(--green); }
.banner-blue h2::after { background: var(--blue); }
.banner-orange h2::after { background: var(--orange); }
.banner-yellow h2::after { background: #ffe36b; }
.banner-purple h2::after { background: var(--purple); }
.banner-teal h2::after { background: var(--teal); }
.banner-red h2::after { background: var(--red); }
.banner-cobalt h2::after { background: var(--cobalt); }
.banner-mint h2::after { background: var(--mint); }
.banner-flame h2::after { background: var(--flame); }
.banner-sun h2::after { background: var(--sun); }
.banner-grape h2::after { background: var(--grape); }
.banner-stone h2::after { background: var(--stone); }
.banner-cherry h2::after { background: var(--cherry); }
.banner-aqua h2::after { background: var(--aqua); }
.banner-gold h2::after { background: var(--gold); }
.banner p { margin-top: 10px; color: var(--ink-2); font-size: 20px; }

.note { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 8px 14px; border-radius: 12px; background: rgba(255,255,255,.5); color: var(--ink-2); font-size: 18px; }
.big-note { font-family: var(--display); font-size: 19px; text-align: center; }

.end-row { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 12px; }

/* flip card */
.flip { width: 290px; height: 360px; perspective: 1200px; border: 0; background: none; padding: 0; }
.flip-inner { position: relative; display: block; width: 100%; height: 100%; transition: transform .6s var(--ease-pop); transform-style: preserve-3d; }
.flip.is-flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 24px; text-align: center; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: var(--line) solid var(--ink); border-radius: var(--radius-wobble); box-shadow: -6px 7px 0 rgba(42,37,34,.2);
}
.flip-front { background: var(--pink); background-image: radial-gradient(rgba(42,37,34,.12) 1.6px, transparent 1.8px); background-size: 18px 18px; }
.flip-back { background: var(--paper); transform: rotateY(180deg); }
.flip-q { font-family: var(--display); font-size: 120px; line-height: 1; transform: rotate(-6deg); }
.flip-hint { font-family: var(--display); font-size: 17px; background: var(--paper); padding: 4px 12px; border-radius: 999px; border: 2px solid var(--ink); }
.flip:not(.is-flipped):hover .flip-inner { transform: rotate(-2deg) scale(1.02); }

.role-kicker { font-family: var(--display); font-size: 15px; color: var(--muted); }
.role-word { font-family: var(--display); font-size: clamp(30px, 6vw, 40px); line-height: 1.1; word-break: break-word; }
.role-imp { color: #c23d8f; }
.role-sub { font-size: 18px; color: var(--ink-2); }

.peek {
  align-self: center; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px 8px; border-radius: 999px; border: 2px dashed var(--ink-2);
  background: transparent; font-size: 18px; color: var(--ink-2);
}
.peek.is-open { border-style: solid; background: var(--paper); color: var(--ink); }
.peek.is-imp { background: var(--pink-s); }

.turn-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.turn-card h2 { font-size: 22px; }
.turn-card.is-mine { background: var(--pink-s); box-shadow: -5px 6px 0 var(--pink); }
.inline-form { display: flex; align-items: center; gap: 16px; width: 100%; max-width: 440px; }
.inline-form .line-input { flex: 1; }
.bob { animation: bob 1.6s ease-in-out infinite; }

.options { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.option {
  padding: 14px 10px; border-radius: var(--radius-wobble-2); border: var(--line) solid var(--ink); background: var(--paper);
  font-family: var(--display); font-size: 17px; transition: transform .18s var(--ease-pop), background .15s;
}
.option:hover:not(:disabled) { transform: rotate(-2deg) translateY(-2px); background: var(--green-s); }
.option:disabled { cursor: default; opacity: .8; }

.reveal-card { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: center; }
.reveal-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.reveal-col + .reveal-col { border-left: 2px dashed rgba(42,37,34,.18); }
.reveal-people { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.reveal-person { display: flex; flex-direction: column; align-items: center; gap: 2px; }

/* clue board */
.clue-board ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.clue-row { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 12px; transition: background .2s; }
.clue-row.is-turn { background: var(--pink-s); }
.clue-row.is-out { opacity: .45; }
.clue-row.is-out .clue-who > span:not(.badge) { text-decoration: line-through; }
.clue-row.is-imp { background: var(--pink-s); opacity: 1; }
.clue-row.is-imp .clue-who > span:not(.badge) { text-decoration: none; }
.clue-who { display: flex; align-items: center; gap: 8px; width: 170px; flex: none; font-size: 18px; min-width: 0; }
.clue-who > span:not(.badge) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 2.5em; }
.clue-who { flex-wrap: wrap; row-gap: 2px; }
.clue-who .badge { font-size: 12px; padding: 1px 7px 2px; }
.clue-list { display: flex; flex-wrap: wrap; gap: 6px; }
.clue { padding: 2px 11px 3px; border-radius: 10px; background: var(--paper-2); border: 2px solid var(--ink); font-family: var(--display); font-size: 15px; animation: popin .3s var(--ease-pop); }
.clue.is-skip { border-style: dashed; color: var(--muted); border-color: var(--muted); }
.clue.is-typing { border-style: dashed; color: var(--muted); }
.clue-none { color: var(--muted); }

.breakdown { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.breakdown li { display: flex; align-items: center; gap: 10px; padding: 4px 6px; border-radius: 12px; }
.breakdown li.is-out { background: var(--pink-s); }
.bd-target { display: flex; align-items: center; gap: 8px; width: 170px; flex: none; }
.bd-arrow { color: var(--muted); }
.bd-voters { display: flex; flex-wrap: wrap; gap: 2px; flex: 1; }
.bd-count { font-family: var(--display); font-size: 20px; }

/* ---------------------------------------------------------------------
   Most likely to
   --------------------------------------------------------------------- */
.prompt-card { text-align: center; background: var(--orange-s); box-shadow: -5px 6px 0 var(--orange); }
.prompt-card h2 { font-size: clamp(26px, 5vw, 36px); }
.prompt-card.is-small h2 { font-size: 22px; }
.prompt-card.is-small { padding: 14px 20px; }
.winner { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.winner h2 { font-size: 34px; }
.winner-art { position: relative; margin-top: 34px; }
.winner-art.multi { display: flex; gap: 10px; }
.winner-crown { position: absolute; top: -26px; left: 50%; transform: translateX(-50%) rotate(-8deg); color: var(--ink); animation: dropin .5s .2s var(--ease-pop) both; }
.winner-crown .icon { fill: #ffe36b; }
.pop-in { animation: popin .5s var(--ease-pop); }

.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 150px 1fr 30px; gap: 10px; align-items: center; }
.bar-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bar-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { position: relative; height: 34px; border-radius: 10px; background: rgba(42,37,34,.06); overflow: hidden; }
.bar-fill { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--blue); border-right: 2.5px solid var(--ink); animation: grow .7s calc(var(--i) * .08s) var(--ease-pop) both; }
.bar-row.is-win .bar-fill { background: var(--orange); }
.bar-voters { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); display: flex; gap: 2px; }
.bar-count { font-family: var(--display); font-size: 20px; text-align: right; }

.leaderboard { list-style: none; margin: 0; padding: 14px 18px; display: grid; gap: 6px; }
.leaderboard li { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 12px; animation: slidein .4s calc(var(--i) * .06s) var(--ease-pop) both; }
.leaderboard li.is-champ { background: var(--orange-s); }
.lb-rank { font-family: var(--display); width: 26px; text-align: center; color: var(--muted); }
.lb-art { position: relative; }
.lb-crown { position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(-10deg); }
.lb-crown .icon { fill: #ffe36b; }
.lb-name { flex: 1; font-size: 18px; }
.lb-score { font-family: var(--display); font-size: 16px; color: var(--ink-2); }

.history ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.history li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 2px dashed rgba(42,37,34,.12); }
.history li:last-child { border-bottom: 0; padding-bottom: 0; }
.h-prompt { color: var(--ink-2); }
.h-win { display: flex; gap: 10px; flex-wrap: wrap; }
.h-person { display: inline-flex; align-items: center; gap: 4px; font-family: var(--display); font-size: 15px; }

/* ---------------------------------------------------------------------
   Off the map
   --------------------------------------------------------------------- */
.otm-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.role-card { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 140px; justify-content: center; }
.role-card.is-agent { background: var(--green-s); box-shadow: -5px 6px 0 var(--green); }
.role-card.is-spy { background: var(--pink-s); box-shadow: -5px 6px 0 var(--pink); }
.role-card.is-hidden { background: var(--paper); box-shadow: var(--shadow-ink); }
.role-hide { position: absolute; top: 8px; right: 8px; }
.role-hidden-text { color: var(--muted); }
.ask-card { display: flex; align-items: center; gap: 14px; }
.ask-card.is-mine { flex-direction: column; align-items: stretch; background: var(--blue-s); box-shadow: -5px 6px 0 var(--blue); }
.ask-card.is-mine h3 { font-size: 22px; }
.ask-card p b { font-size: 1em; }
.action-row { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; padding: 4px 0; }
.locs-card { position: sticky; top: 14px; }
.locs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.loc {
  padding: 5px 11px 6px; border-radius: 10px 12px 9px 11px; border: 2px solid var(--ink); background: var(--paper);
  font-family: var(--display); font-size: 14px; transition: transform .15s var(--ease-pop), opacity .2s, background .15s;
}
.loc:hover { transform: rotate(-2deg); }
.loc.is-crossed { opacity: .4; text-decoration: line-through; text-decoration-thickness: 2px; border-style: dashed; }
.loc.is-selected { background: var(--green); box-shadow: -2px 3px 0 var(--ink); }
.loc.is-answer { background: var(--green); opacity: 1; text-decoration: none; border-style: solid; box-shadow: -2px 3px 0 var(--ink); transform: rotate(-2deg) scale(1.04); }
.qlog ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-height: 320px; overflow-y: auto; }
.qlog li { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; border-bottom: 2px dashed rgba(42,37,34,.1); }
.qlog li:last-child { border-bottom: 0; padding-bottom: 0; }
.ql-who { display: flex; align-items: center; gap: 5px; color: var(--ink-2); }
.ql-who b { font-size: 14px; }
.ql-q { font-size: 18px; padding-left: 2px; }

/* question cards */
.qcard {
  position: relative; display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 112px; padding: 26px 18px 18px;
  background: var(--paper); border: var(--line) solid var(--ink);
  border-radius: 14px 16px 13px 17px;
  box-shadow: -4px 5px 0 var(--green);
  font-family: var(--display); font-size: 18px; line-height: 1.25; color: var(--ink);
  transform: rotate(-1.2deg);
  transition: transform .2s var(--ease-pop), box-shadow .2s, background .2s;
  overflow: hidden;
}
.qcard::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: var(--green); border-bottom: 2px solid var(--ink); }
.qcard-mark { position: absolute; right: 10px; bottom: 2px; font-family: var(--display); font-size: 40px; line-height: 1; color: rgba(42,37,34,.08); transform: rotate(12deg); }
.qcard-text { position: relative; }
.hand { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; padding: 4px 4px 8px; }
.hand .qcard:nth-child(2n) { transform: rotate(1.4deg); }
.hand .qcard:nth-child(3n) { transform: rotate(-.4deg); }
.qcard.is-pickable { cursor: pointer; }
.qcard.is-pickable:hover { transform: rotate(0) translateY(-3px); box-shadow: -5px 8px 0 var(--green); }
.qcard.is-selected, .qcard.is-selected:hover { background: var(--green-s); transform: rotate(0) translateY(-4px) scale(1.03); box-shadow: -5px 8px 0 var(--green-d); }
.qcard.is-small { min-height: 84px; font-size: 16px; padding: 20px 14px 12px; box-shadow: -3px 4px 0 rgba(42,37,34,.14); }
.qcard.is-small::before { height: 9px; background: var(--green-s); }
.qcard.is-live { font-size: clamp(21px, 4vw, 27px); min-height: 140px; margin: 4px auto 6px; max-width: 460px; width: 100%; animation: dealin .45s var(--ease-pop); }
@keyframes dealin { from { transform: translateY(-14px) rotate(-8deg) scale(.9); opacity: 0; } to { transform: rotate(-1.2deg); opacity: 1; } }
.hand-card h4 { margin-bottom: 8px; }
.ask-card.is-question { flex-direction: column; align-items: stretch; gap: 10px; }
.q-who { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; color: var(--ink-2); font-size: 17px; }
.q-who b { color: var(--ink); }
.q-status { text-align: center; margin: 0; }

/* turn order */
.turn-order { list-style: none; margin: 0; padding: 2px 0; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.turn-order li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 8px 5px; border-radius: 14px; border: 2px solid transparent; min-width: 64px; transition: background .2s, transform .2s var(--ease-pop); }
.turn-order li.is-now { background: var(--paper); border-color: var(--ink); transform: rotate(-2deg) translateY(-2px); box-shadow: -3px 4px 0 var(--green); }
.turn-order li.is-away { opacity: .45; }
.to-name { font-size: 14px; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.to-cards { display: flex; gap: 3px; }
.to-cards i { width: 9px; height: 12px; border-radius: 2px; border: 1.5px solid rgba(42,37,34,.3); }
.to-cards i.is-left { background: var(--green); border-color: var(--ink); }
.accuse-hero { display: flex; align-items: center; gap: 16px; margin-top: 6px; }
.accuse-arrow { transform: rotate(-10deg); }
.shake-soft { animation: shake 2.4s ease-in-out infinite; }
.vote-yn { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.final-order { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.final-order li { display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: var(--display); font-size: 13px; opacity: .55; padding: 6px; border-radius: 12px; }
.final-order li.is-done { opacity: .3; }
.final-order li.is-now { opacity: 1; background: var(--paper); border: 2px solid var(--ink); transform: rotate(-2deg); }
.roles-list ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.roles-list li { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 12px; }
.roles-list li span { color: var(--ink-2); font-size: 17px; margin-left: auto; text-align: right; }
.roles-list li.is-spy { background: var(--pink-s); }

/* ---------------------------------------------------------------------
   Telephone pictionary
   --------------------------------------------------------------------- */
.steps-dots { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.sd { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(42,37,34,.25); color: rgba(42,37,34,.35); }
.sd.is-done { background: var(--paper); border-color: var(--ink); color: var(--ink); }
.sd.is-now { background: var(--blue); border-color: var(--ink); color: var(--ink); transform: scale(1.15); }
.task-card { text-align: center; background: var(--blue-s); box-shadow: -5px 6px 0 var(--blue); }
.task-prompt { font-size: clamp(22px, 4.5vw, 30px); }
.task-drawing { margin: 8px auto 0; width: min(100%, max(280px, calc((100svh - 470px) * 4 / 3))); }
.task-card.is-compact { padding: 12px 20px 14px; }
.task-card.is-compact .task-prompt { font-size: clamp(20px, 4vw, 26px); }
.write-card { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.write-card .inline-form { max-width: 560px; }
.write-card.is-locked { opacity: .75; }
.dice { width: 46px; height: 46px; background: var(--orange); box-shadow: -2px 3px 0 var(--orange-d); transform: rotate(6deg); }
.dice:hover { background: var(--orange); transform: rotate(-10deg); }

.pad { display: flex; flex-direction: column; gap: 10px; }
.pad-tools { display: flex; flex-direction: column; gap: 8px; }
.pad-colors { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.swatch { width: 32px; height: 32px; border-radius: 50% 46% 52% 48%; border: 2px solid var(--ink); background: var(--c); padding: 0; transition: transform .15s var(--ease-pop); }
.swatch:hover { transform: scale(1.12) rotate(-6deg); }
.swatch.is-on { transform: scale(1.18); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5.5px var(--ink); }
.pad-row { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; align-items: center; }
.pad-sizes, .pad-modes { display: flex; gap: 4px; align-items: center; background: var(--paper); border: 2px solid var(--ink); border-radius: 14px; padding: 3px; }
.size-btn, .tool-btn { width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; border-radius: 10px; color: var(--ink); }
.size-btn span { width: var(--s); height: var(--s); border-radius: 50%; background: var(--ink); }
.size-btn:hover, .tool-btn:hover { background: rgba(42,37,34,.07); }
.size-btn.is-on, .tool-btn.is-on { background: var(--blue); }
.tool-sep { width: 2px; height: 26px; background: rgba(42,37,34,.15); margin: 0 2px; }
.pad-frame { position: relative; border: var(--line) solid var(--ink); border-radius: 16px 20px 15px 19px; overflow: hidden; background: #fff; box-shadow: -5px 6px 0 rgba(42,37,34,.16); }
.pad-host { aspect-ratio: 4 / 3; width: 100%; }
.pad-frame { width: min(100%, max(300px, calc((100svh - 330px) * 4 / 3))); margin: 0 auto; }
@media (min-width: 861px) {
  .game:has(.pad) { max-width: 900px; }
  .pad { display: grid; grid-template-columns: auto auto; justify-content: center; gap: 18px; align-items: start; }
  .pad-tools { gap: 10px; position: sticky; top: 12px; }
  .pad-colors { display: grid; grid-template-columns: repeat(3, 30px); gap: 7px; background: var(--paper); border: 2px solid var(--ink); border-radius: 16px; padding: 9px; justify-content: center; }
  .pad-colors .swatch { width: 30px; height: 30px; }
  .pad-row { flex-direction: column; gap: 10px; align-items: stretch; }
  .pad-sizes { display: grid; grid-template-columns: repeat(2, 40px); justify-content: center; }
  .pad-modes { display: grid; grid-template-columns: repeat(3, 34px); justify-content: center; }
  .pad-modes .tool-btn { width: 34px; }
  .pad-modes .tool-sep { display: none; }
  .pad-frame { width: min(760px, max(420px, calc((100svh - 410px) * 4 / 3))); margin: 0; }
}
.pad-canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.pad.is-locked .pad-tools { opacity: .4; pointer-events: none; }
.pad-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255,252,242,.55); }
.pad-overlay span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 22px; background: var(--green); padding: 8px 20px; border-radius: 14px; border: 2px solid var(--ink); transform: rotate(-3deg); animation: popin .35s var(--ease-pop); }

.drawing { border: 2px solid var(--ink); border-radius: 14px; overflow: hidden; background: #fff; aspect-ratio: 4 / 3; }
.drawing img { width: 100%; height: 100%; object-fit: contain; user-select: none; }
.drawing.is-blank { display: grid; place-items: center; color: var(--muted); padding: 20px; text-align: center; }

.album-head { display: flex; align-items: center; gap: 12px; justify-content: center; }
.album-head h2 { font-size: 26px; }
.album { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.entry { position: relative; display: flex; flex-direction: column; gap: 6px; }
.entry.is-new { animation: dropin .5s var(--ease-pop); }
.entry-who { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.entry-who .muted { font-size: 16px; }
.entry-draw .drawing { max-width: 560px; width: 100%; box-shadow: -4px 5px 0 rgba(42,37,34,.14); }
.entry:nth-child(4n+2) .drawing { transform: rotate(.8deg); }
.entry:nth-child(4n) .drawing { transform: rotate(-.8deg); }
.bubble { align-self: flex-start; max-width: 560px; background: var(--paper); border: var(--line) solid var(--ink); border-radius: 6px 20px 20px 20px; padding: 12px 18px; font-family: var(--display); font-size: 20px; box-shadow: -3px 4px 0 var(--blue); }
.dl { position: absolute; top: 46px; left: 8px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--paper); border: 2px solid var(--ink); color: var(--ink); opacity: 0; transition: opacity .2s; }
.entry:hover .dl, .dl:focus-visible { opacity: 1; }
.reveal-controls { display: flex; align-items: center; justify-content: center; gap: 18px; position: sticky; bottom: 14px; padding: 10px; }
.album-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.album-tab { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 999px; border: 2px solid transparent; background: var(--paper); font-family: var(--display); font-size: 14px; }
.album-tab.is-on { border-color: var(--ink); background: var(--blue-s); box-shadow: -2px 3px 0 var(--blue); }

/* spectate */
.spectate { padding-top: 30px; }
.spectate-art { width: 110px; }
.spectate-players { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }

/* ---------------------------------------------------------------------
   Overlays
   --------------------------------------------------------------------- */
#toasts { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.toast {
  padding: 10px 18px 11px; border-radius: 14px 16px 13px 15px; background: var(--ink); color: var(--paper);
  font-family: var(--display); font-size: 16px; text-align: center;
  transform: translateY(16px) rotate(-1deg); opacity: 0; transition: transform .3s var(--ease-pop), opacity .25s;
}
.toast.in { transform: translateY(0) rotate(-1deg); opacity: 1; }
.toast.out { transform: translateY(8px); opacity: 0; }
.toast-error { background: var(--red); color: var(--ink); box-shadow: -3px 4px 0 var(--red-d); }
.toast-success { background: var(--green); color: var(--ink); box-shadow: -3px 4px 0 var(--green-d); }

.modal-wrap, .sheet-wrap { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; }
.modal-backdrop, .sheet-backdrop { position: absolute; inset: 0; background: rgba(42,37,34,.35); }
.modal-wrap { opacity: 0; transition: opacity .18s; }
.modal-wrap.in { opacity: 1; }
.modal-wrap.out { opacity: 0; }
.modal { position: relative; width: min(420px, 100%); text-align: center; transform: scale(.9) rotate(-1deg); transition: transform .25s var(--ease-pop); }
.modal-wrap.in .modal { transform: scale(1) rotate(-1deg); }
.modal h3 { font-size: 24px; }
.modal p { margin-top: 8px; color: var(--ink-2); }
.modal-actions { display: flex; justify-content: center; gap: 16px; margin-top: 22px; }

.sheet-backdrop { animation: fadein .2s; }
.sheet { position: relative; width: min(640px, 100%); max-height: calc(100dvh - 40px); overflow: auto; animation: dropin .3s var(--ease-pop); }
.sheet h3 { font-size: 24px; margin-bottom: 6px; }
.sheet .picker { margin-top: 14px; }
.sheet-form { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 16px; }
.sheet-form .line-input { max-width: 320px; }
.sheet-form .row-end { width: 100%; }
.sheet .av-editor { margin-top: 10px; }

/* ---------------------------------------------------------------------
   Animations
   --------------------------------------------------------------------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-5px); opacity: 1; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fillin { to { fill-opacity: 1; } }
@keyframes popin { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes tickin { from { transform: translateY(8px) rotate(2deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dropin { from { transform: translateY(-12px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slidein { from { transform: translateX(-10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fadein { from { opacity: 0; } }
@keyframes grow { from { width: 0; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px) rotate(-2deg); } 40% { transform: translateX(5px) rotate(2deg); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes wobble { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
  .game-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lobby-grid { grid-template-columns: minmax(0, 1fr); }
  .otm-grid { grid-template-columns: 1fr; }
  .locs-card { position: static; }
  .ticker { position: static; margin: 4px auto 0; transform: rotate(-2deg); text-align: center; max-width: none; }
}

@media (max-width: 640px) {
  .pad-colors { display: grid; grid-template-columns: repeat(7, 30px); gap: 7px 9px; }
  .swatch { width: 30px; height: 30px; }
  .pad-row { gap: 8px; flex-wrap: nowrap; }
  .pad-sizes, .pad-modes { gap: 1px; padding: 2px; border-radius: 12px; }
  .size-btn, .tool-btn { width: 33px; height: 34px; }
  .tool-sep { margin: 0; }
  body { font-size: 19px; }
  .home { padding-top: 34px; }
  .game-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .game-card:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 6px); justify-self: center; }
  .game-card-btn { flex-direction: column; align-items: stretch; gap: 7px; padding: 12px 10px; }
  .game-card-art { width: 54px; align-self: center; }
  .game-card h3 { font-size: 16px; }
  .game-card p { font-size: 14px; line-height: 1.2; }
  .game-card .meta { margin-top: 5px; font-size: 11px; }
  .how .steps { grid-template-columns: 1fr; }
  .start-actions { grid-template-columns: 1fr; gap: 14px; justify-items: center; }
  .start-col { width: 100%; max-width: 300px; }
  .start-col .btn, .code-input { max-width: none; }
  .or { padding: 0; }
  .section-h { margin-top: 60px; }
  .room-top { grid-template-columns: auto 1fr auto; padding: 10px 14px 0; }
  .mini-logo { font-size: 16px; }
  .room-code { justify-self: center; padding-left: 10px; }
  .room-code-label { display: none; }
  .leave-btn span { display: none; }
  .page { padding: 12px 14px 70px; }
  .big-code span { width: 52px; height: 60px; font-size: 32px; }
  .game-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .game-tile { padding: 8px 6px 10px; }
  .game-tile-art { width: 50px; }
  .game-tile-name { font-size: 13px; }
  .game-panel-art { width: 70px; }
  .card { padding: 18px 16px; }
  .setting { flex-direction: column; align-items: flex-start; gap: 6px; }
  .game-bar { padding: 6px 2px; }
  .game-bar-art { width: 38px; }
  .flip { width: 260px; height: 320px; }
  .picker { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
  .pick .avatar { width: 54px; height: 54px; }
  .clue-who { width: 120px; font-size: 17px; }
  .bd-target { width: 120px; }
  .bar-row { grid-template-columns: 110px 1fr 26px; }
  .reveal-card { grid-template-columns: 1fr; }
  .reveal-col + .reveal-col { border-left: 0; border-top: 2px dashed rgba(42,37,34,.18); padding-top: 14px; }
  .swatch { width: 29px; height: 29px; }
  .size-btn, .tool-btn { width: 36px; height: 36px; }
  .inline-form { gap: 10px; }
  .inline-form .btn { padding-left: 16px; padding-right: 16px; }
  .btn-xl { font-size: 20px; padding: 14px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero-doodle .draw path { stroke-dashoffset: 0; fill-opacity: 1; }
  .hero-doodle .pop > * { transform: none; }
  /* the boom has to stay readable without motion: hold it, then fade */
  .bp-kaboom { animation: bp-kaboom-soft 1.2s ease-out forwards !important; }
  .bp-kaboom-sparks, .pyl-fx-sparks, .pyl-click-burst { display: none; }
  .bp-kaboom-burst, .bp-kaboom-flash, .bp-kaboom-word, .bp-kaboom-who, .pyl-fx-burst, .pyl-pop-badge { animation: none !important; opacity: 1; }
  .bp-kaboom-flash { display: none; }
}
@keyframes bp-kaboom-soft { 0%, 72% { opacity: 1; } 100% { opacity: 0; } }

/* =====================================================================
   SECRET QUEEN — board, strips, bracket
   ===================================================================== */
.sq-layout { display: grid; grid-template-columns: auto minmax(260px, 1fr); gap: 26px; align-items: start; }
/* the board never pushes the page into a scroll: it shrinks with the viewport height */
.sq-board-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; width: min(560px, max(300px, calc(100dvh - 372px))); }
.sq-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.board-wrap { position: relative; }
.board {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); aspect-ratio: 1;
  border: var(--line) solid var(--ink); border-radius: 16px; overflow: hidden;
  box-shadow: -6px 7px 0 var(--purple); background: var(--paper);
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
  position: relative;
}
.sqr {
  position: relative; margin: 0; padding: 0; border: 0; border-radius: 0; min-width: 0; min-height: 0; aspect-ratio: 1;
  display: grid; place-items: center; cursor: pointer; background: #fff7dc;
  -webkit-tap-highlight-color: transparent;
}
.sqr.is-dark { background: #cfc3f7; }
.board.is-static .sqr { cursor: default; }
.sqr::before, .sqr::after { content: ''; position: absolute; pointer-events: none; }
.sqr.is-last::before { inset: 0; background: rgba(255, 216, 77, .5); }
.sqr.is-sel::before { inset: 0; background: rgba(255, 188, 94, .78); }
.sqr.is-check::before { inset: 0; background: radial-gradient(circle, rgba(255, 110, 96, .95) 0 34%, rgba(255, 110, 96, .45) 58%, transparent 74%); }
.sqr .piece { position: absolute; inset: 5%; z-index: 1; width: 90%; height: 90%; pointer-events: none; filter: drop-shadow(0 2px 0 rgba(42, 37, 34, .16)); }
.sqr.is-target::after { z-index: 2; width: 30%; height: 30%; border-radius: 50%; background: rgba(42, 37, 34, .3); }
.sqr.is-target.is-capture::after { width: 84%; height: 84%; background: none; border: 4px solid rgba(42, 37, 34, .32); }
.sqr.is-reveal::after { background: var(--purple-d); opacity: .75; }
.sqr.is-reveal.is-capture::after { background: none; border-color: var(--purple-d); }
.sqr.is-pickable { cursor: pointer; }
.sqr.is-pickable::after { inset: 8%; border-radius: 50%; border: 3px dashed var(--purple-d); animation: sq-spin 6s linear infinite; }
.sqr.is-picked::before { inset: 0; background: var(--purple); opacity: .55; }
.sqr.is-picked::after { border-style: solid; animation: none; }
.sqr.is-pickable:hover .piece { transform: translateY(-3px) rotate(-4deg); transition: transform .15s var(--ease-pop); }
.coord { position: absolute; z-index: 3; font-family: var(--display); font-size: 11px; line-height: 1; color: var(--ink); opacity: .55; pointer-events: none; }
.coord-r { top: 4px; left: 4px; }
.coord-f { bottom: 3px; right: 5px; }
.sq-crown {
  position: absolute; z-index: 3; top: 3%; right: 3%; width: 36%; aspect-ratio: 1; max-width: 26px;
  display: grid; place-items: center; border-radius: 50%;
  background: #ffe066; border: 2px solid var(--ink); color: var(--ink);
}
.sq-crown .icon { width: 70%; height: 70%; }
@keyframes sq-spin { to { transform: rotate(360deg); } }

.promo-pop {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); z-index: 5;
  background: var(--paper); border: var(--line) solid var(--ink); border-radius: var(--radius-wobble);
  box-shadow: -5px 6px 0 var(--purple); padding: 14px 18px 10px; text-align: center;
}
.promo-pop p { margin: 0 0 8px; font-family: var(--display); }
.promo-row { display: flex; gap: 8px; margin-bottom: 4px; }
.promo-btn { width: 62px; height: 62px; border: 2px solid var(--ink); border-radius: 14px; background: var(--purple-s); padding: 4px; }
.promo-btn:hover { background: var(--purple); transform: rotate(-3deg); }
.promo-btn .piece { width: 100%; height: 100%; }

.sq-strip {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 8px 10px 8px 12px; background: var(--paper);
  border: 2px solid var(--ink); border-radius: 16px;
  transition: box-shadow .2s;
}
.sq-strip.is-turn { box-shadow: -4px 5px 0 var(--purple); }
.sq-strip.is-away { opacity: .7; }
.sq-who { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.sq-name { display: flex; align-items: center; gap: 7px; font-family: var(--display); font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-name em { font-style: normal; color: var(--muted); }
.color-dot { flex: none; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--ink); }
.color-dot.is-w { background: var(--paper); }
.color-dot.is-b { background: var(--ink); }
.sq-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 16px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-chip .icon { flex: none; color: var(--purple-d); }
.sq-chip.is-out { color: var(--purple-d); }
.sq-chip.is-gone { color: var(--muted); text-decoration: line-through; }
.sq-chip.is-wait { color: var(--muted); }
.sq-check { font-family: var(--display); font-size: 14px; color: var(--paper); background: var(--red-d); border-radius: 10px; padding: 3px 9px; transform: rotate(-4deg); }
.cclock {
  flex: none; min-width: 74px; text-align: center; font-family: var(--display); font-size: 21px; font-variant-numeric: tabular-nums;
  padding: 4px 10px; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper-2); color: var(--ink-2);
}
.cclock.is-running { background: var(--ink); color: var(--paper); }
.cclock.is-running.is-low { background: var(--red); color: var(--ink); }

.sq-status { display: flex; flex-direction: column; gap: 8px; }
.sq-status h3 { font-size: 21px; margin: 0; }
.sq-status p { margin: 0; font-size: 18px; color: var(--ink-2); line-height: 1.3; }
.sq-status.is-pick, .sq-status.is-turn { background: var(--purple-s); box-shadow: -5px 6px 0 var(--purple); }
.sq-status.is-good { background: var(--green-s); box-shadow: -5px 6px 0 var(--green); }
.sq-status.is-bad { background: var(--paper-2); }
.sq-status .btn { align-self: flex-start; margin-top: 4px; }
.sq-status-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sq-last { font-size: 16px !important; color: var(--muted) !important; }
.sq-alert { color: var(--red-d) !important; font-family: var(--display); font-size: 17px !important; display: flex; align-items: center; gap: 6px; }
.sq-picks { display: flex; align-items: flex-start; gap: 6px; }
.sq-picks .icon { flex: none; margin-top: 3px; color: var(--purple-d); }
.sq-controls { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0 4px; }
.sq-status .row-gap { justify-content: flex-start; gap: 10px; margin-top: 4px; }
.sq-status .row-gap .btn { margin-top: 0; }

.watch-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.watch-tab {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border: 2px solid var(--ink); border-radius: 999px; background: var(--paper);
  font-family: var(--display); font-size: 14px;
}
.watch-tab.is-on { background: var(--purple-s); box-shadow: -3px 3px 0 var(--purple); }

.bracket-card .card-title { display: flex; align-items: center; gap: 8px; font-size: 18px; margin: 0 0 10px; }
.bracket { display: flex; gap: 10px; overflow-x: auto; padding: 10px 2px 6px; }
.bk-round { display: flex; flex-direction: column; flex: 1 0 116px; min-width: 116px; }
.bk-round h4 { margin: 0 0 8px; text-align: center; font-family: var(--display); font-size: 13px; font-weight: 400; color: var(--muted); }
.bk-matches { display: flex; flex-direction: column; justify-content: space-around; flex: 1; gap: 10px; }
.bk-match {
  position: relative; display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  padding: 5px 8px; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper); font: inherit; color: inherit;
}
button.bk-match { cursor: pointer; }
button.bk-match:hover { transform: rotate(-1deg); }
.bk-match.is-bye { border-style: dashed; opacity: .75; }
.bk-match.is-live { box-shadow: -3px 4px 0 var(--purple); }
.bk-match.is-watching { background: var(--purple-s); }
.bk-p { display: flex; align-items: center; gap: 6px; font-size: 16px; line-height: 1.2; min-width: 0; }
.bk-p span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-p .icon { flex: none; color: var(--green-d); }
.bk-p.is-out { opacity: .45; }
.bk-p.is-out span { text-decoration: line-through; }
.bk-p.is-me span { font-family: var(--display); font-size: 14px; }
.bk-p.is-empty { color: var(--muted); padding-left: 2px; }
.bk-bye { margin-left: auto; flex: none; font-style: normal; font-size: 13px; color: var(--muted); }
.bk-live {
  display: inline-flex; align-items: center; gap: 4px; font-family: var(--display); font-size: 11px;
  color: var(--paper); background: var(--purple-d); border-radius: 8px; padding: 1px 7px;
}
.bk-match .bk-live { position: absolute; top: -9px; right: 8px; }

.sq-result .winner { margin-bottom: 4px; }
/* move history + arrows */
.sq-marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: visible; }
/* squares are clicked, not tabbed to: no focus ring (holding shift for arrow colours, or using the arrow keys, would otherwise light one up) */
.board .sqr:focus, .board .sqr:focus-visible { outline: none; }
.board.is-history { box-shadow: -6px 7px 0 var(--orange); }
.sq-nav { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 2px 4px 0; }
.sq-nav-btns { display: flex; gap: 2px; padding: 2px; border: 2px solid var(--ink); border-radius: 14px 12px 15px 11px; background: var(--paper); }
.sq-nav-btns .icon-btn { width: 36px; height: 34px; color: var(--ink); }
.sq-nav-btns .icon-btn:disabled { opacity: .3; cursor: default; }
.sq-nav-label { flex: 1; min-width: 0; font-family: var(--display); font-size: 16px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-nav.is-history .sq-nav-label { color: var(--orange-d); }
.sq-live-btn {
  flex: none; font-family: var(--display); font-size: 14px; padding: 4px 11px 5px; border: 2px solid var(--ink); border-radius: 10px;
  background: var(--orange); color: var(--ink); box-shadow: -2px 3px 0 var(--ink); transform: rotate(-2deg); animation: pulse 1.6s ease-in-out infinite;
}
.sq-moves-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.sq-moves-head .card-title { margin: 0 !important; }
.sq-share { flex: none; font-size: 16px; }
.sq-moves .card-title { font-size: 18px; margin: 0 0 8px; }
.sq-movelist {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr); gap: 2px 4px; align-items: center;
  max-height: 210px; overflow-y: auto; overscroll-behavior: contain; position: relative;
}
.mv-num { font-family: var(--display); font-size: 14px; color: var(--muted); text-align: right; padding-right: 2px; }
.mv {
  text-align: left; padding: 3px 8px; border: 2px solid transparent; border-radius: 9px; background: none;
  font-family: var(--display); font-size: 16px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mv:hover { background: rgba(42, 37, 34, .07); }
.mv.is-on { background: var(--purple-s); border-color: var(--ink); }
.mv.is-reveal { color: var(--purple-d); }
.mv.is-empty { color: var(--muted); pointer-events: none; }
.mv-result { grid-column: 1 / -1; text-align: center; font-family: var(--display); font-size: 16px; padding-top: 4px; }
.sq-hint { margin-top: 8px; font-size: 14px; color: var(--muted); }
@media (pointer: coarse) { .sq-hint { display: none; } }

/* share dialog */
.modal.is-wide { width: min(560px, 100%); text-align: left; }
.modal-x { position: absolute; top: 10px; right: 10px; }
.share-block { display: grid; gap: 8px; margin-top: 16px; }
.share-block label { font-family: var(--display); font-size: 17px; }
.share-block label .muted { font-size: 14px; }
.share-row { display: flex; gap: 10px; align-items: center; }
.share-field {
  width: 100%; min-width: 0; padding: 9px 11px; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper-2);
  font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); resize: none;
}
textarea.share-field { max-height: 34dvh; }
.share-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.share-link { justify-self: start; }
.share-note { font-size: 15px !important; color: var(--muted) !important; margin-top: 0 !important; }

.sq-final { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 430px); gap: 24px; justify-content: center; align-items: start; }
.sq-final.is-solo { grid-template-columns: minmax(0, 460px); }
.sq-final .sq-board-col { width: 100%; }
.bracket-note { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; padding-top: 12px; border-top: 2px dashed rgba(42, 37, 34, .18); color: var(--ink-2); font-size: 17px; }
.bracket-note .icon { flex: none; margin-top: 2px; }

@media (max-width: 860px) {
  .sq-layout { grid-template-columns: 1fr; gap: 18px; }
  .sq-board-col { width: min(100%, 560px); margin: 0 auto; }
  .sq-final { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .board { border-radius: 12px; box-shadow: -4px 5px 0 var(--purple); }
  .coord { font-size: 9px; }
  .sq-strip { padding: 6px 8px 6px 10px; gap: 8px; }
  .sq-name { font-size: 16px; }
  .sq-chip { font-size: 15px; }
  .cclock { min-width: 62px; font-size: 18px; padding: 3px 8px; }
  .bracket { gap: 8px; }
  .bk-round { flex-basis: 92px; min-width: 92px; }
  .bk-match { padding: 4px 6px; }
  .bk-p { font-size: 15px; gap: 4px; }
  .bk-p .avatar { width: 18px; height: 18px; }
}

/* =====================================================================
   FAKE ARTIST — shared canvas, turn card, artists list
   ===================================================================== */
.fa-layout { display: grid; grid-template-columns: auto minmax(260px, 1fr); gap: 26px; align-items: start; }
/* the canvas shrinks with the viewport height so the page never has to scroll mid-turn */
.fa-canvas-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; width: min(560px, max(300px, calc(100dvh - 300px))); }
.fa-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.fa-pad {
  position: relative; aspect-ratio: 1; border: var(--line) solid var(--ink); border-radius: 18px; overflow: hidden;
  background: var(--paper); box-shadow: -6px 7px 0 var(--teal); transition: box-shadow .2s, transform .2s var(--ease-pop);
}
.fa-pad.is-live { box-shadow: -6px 7px 0 var(--pen, var(--teal)); transform: rotate(-.6deg); cursor: crosshair; }
.fa-pad-host, .fa-canvas { display: block; width: 100%; height: 100%; }
.fa-canvas { touch-action: auto; }
.fa-pad.is-live .fa-canvas { touch-action: none; }

.fa-turn {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 16px;
}
.fa-turn > div { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.2; }
.fa-turn b { font-family: var(--display); font-weight: 400; font-size: 19px; }
.fa-turn span { color: var(--ink-2); font-size: 17px; }
.fa-turn.is-mine { background: var(--teal-s); box-shadow: -4px 5px 0 var(--teal); }
.fa-pen {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--pen); color: var(--paper); border: 2px solid var(--ink); transform: rotate(-8deg);
}
.pen-dot { flex: none; display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--pen); border: 2px solid var(--ink); }
.fa-turn .pen-dot { width: 18px; height: 18px; }

.fa-artists h4, .fa-final h4 { margin: 0 0 8px; font-size: 18px; }
.fa-artists ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fa-artist { display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 12px; min-width: 0; }
.fa-artist.is-turn { background: var(--teal-s); box-shadow: inset 0 0 0 2px var(--ink); }
.fa-artist.is-away { opacity: .55; }
.fa-artist-name { flex: 1; min-width: 0; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-artist-name em { font-style: normal; color: var(--muted); }
.fa-ticks { display: flex; gap: 4px; flex: none; }
.fa-tick { width: 18px; height: 6px; border-radius: 4px; border: 1.5px solid rgba(42, 37, 34, .35); }
.fa-tick.is-done { background: var(--pen); border-color: var(--ink); }
.fa-tick.is-skip { border-style: dashed; }
.fa-watching { text-align: center; color: var(--muted); font-size: 17px; margin: 0; }

.fa-h { margin: 0; text-align: left; }
.fa-picker { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.fa-picker .pick { position: relative; }
.fa-picker .pen-dot { position: absolute; top: 8px; right: 8px; }

.fa-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.fa-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 7px; font-size: 16px;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; color: var(--ink);
  transition: opacity .15s, transform .15s var(--ease-pop);
}
.fa-chip.is-on { background: var(--teal-s); transform: rotate(-2deg); box-shadow: -2px 3px 0 var(--teal); }
.fa-chip.is-dim { opacity: .5; }
.fa-legend-hint { margin: -4px 0 0; color: var(--muted); font-size: 15px; }

.fa-final { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 420px); gap: 24px; justify-content: center; align-items: start; }
.fa-final .fa-canvas-col { width: 100%; }
.fa-final > .fa-pad { width: 100%; }

@media (max-width: 860px) {
  .fa-layout { grid-template-columns: 1fr; gap: 18px; }
  .fa-canvas-col { width: min(100%, 560px); margin: 0 auto; }
  .fa-final { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .fa-pad { border-radius: 14px; box-shadow: -4px 5px 0 var(--teal); }
  .fa-pad.is-live { box-shadow: -4px 5px 0 var(--pen, var(--teal)); }
  .fa-turn { min-height: 56px; padding: 8px 12px; }
  .fa-turn b { font-size: 17px; }
  .fa-turn span { font-size: 15px; }
}

/* ---------------------------------------------------------------------
   LIEABILITY — fact card, lie form, answer cards, reveal
   --------------------------------------------------------------------- */
.lieability .stack { max-width: 760px; margin: 0 auto; }
.fact-card { text-align: center; background: var(--red-s); box-shadow: -5px 6px 0 var(--red); }
.fact-card h2 { font-size: clamp(24px, 4.6vw, 34px); line-height: 1.25; }
.fact-card.is-small { padding: 14px 20px; }
.fact-card.is-small h2 { font-size: clamp(19px, 3.4vw, 23px); }
.blank {
  display: inline-block; min-width: 3.4em; height: .95em; margin: 0 .12em; vertical-align: -.08em;
  border-bottom: 3px solid var(--ink); border-radius: 0 0 3px 3px;
}
.blank.is-filled {
  height: auto; min-width: 0; padding: 0 .3em; border: var(--line) solid var(--ink); border-radius: 9px 12px 10px 11px;
  background: var(--green); transform: rotate(-1.5deg); animation: lie-pop .4s var(--ease-pop) both;
}
.mult-badge {
  align-self: center; display: flex; align-items: baseline; gap: 10px; padding: 6px 18px 8px;
  border: var(--line) solid var(--ink); border-radius: 14px 18px 12px 16px; background: #ffe36b;
  box-shadow: -3px 4px 0 var(--ink); transform: rotate(-2deg); font-family: var(--display); animation: lie-in .4s var(--ease-pop) both;
}
.mult-badge b { font-size: 20px; }
.mult-badge span { font-size: 15px; color: var(--ink-2); }
.mult-badge.is-triple { background: var(--red); }

.lie-form { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.lie-form h3 { font-size: 22px; }
.lie-form .inline-form { max-width: 520px; margin-top: 4px; }
.lie-form-foot { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.my-lie { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.my-lie-text { font-family: var(--display); font-size: 26px; margin-bottom: 4px; }

.pick-title { font-size: 22px; margin-top: 2px; }
.lie-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lie-opt {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 74px; padding: 12px 16px; text-align: center;
  border: var(--line) solid var(--ink); border-radius: var(--radius-wobble-2); background: var(--paper);
  font-family: var(--display); font-size: 20px; line-height: 1.2; color: var(--ink);
  box-shadow: -4px 5px 0 var(--ink); transform: rotate(var(--tilt));
  transition: transform .18s var(--ease-pop), box-shadow .18s, background .15s;
  animation: lie-in .35s var(--ease-pop) both;
}
.lie-opt:hover:not(:disabled) { transform: rotate(0deg) translateY(-2px); box-shadow: -5px 7px 0 var(--ink); }
.lie-opt.is-on { background: var(--red); transform: rotate(0deg) scale(1.03); }
.lie-opt.is-mine { opacity: .55; border-style: dashed; box-shadow: none; cursor: not-allowed; }
.lie-opt em { font-style: normal; font-size: 13px; color: var(--muted); }
.lie-check {
  position: absolute; top: -10px; right: -8px; display: grid; place-items: center; width: 28px; height: 28px;
  border: 2.5px solid var(--ink); border-radius: 50%; background: var(--green); animation: popin .3s var(--ease-pop);
}

.reveal-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding-top: 22px; padding-bottom: 22px; animation: dropin .4s var(--ease-pop) both; }
.reveal-card.is-truth { background: var(--green-s); box-shadow: -5px 6px 0 var(--green); }
.rv-who { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; color: var(--ink-2); font-size: 18px; }
.rv-text { font-family: var(--display); font-size: clamp(28px, 6vw, 44px); line-height: 1.1; }
.rv-late { display: flex; flex-direction: column; align-items: center; gap: 8px; animation: dropin .45s 1.1s var(--ease-pop) both; }
.rv-stamp {
  font-family: var(--display); font-size: 26px; padding: 4px 18px 6px; color: var(--red-d);
  border: 3px solid currentColor; border-radius: 12px 16px 11px 15px; transform: rotate(-6deg); letter-spacing: .5px;
}
.rv-stamp.is-truth { color: var(--green-d); }
.rv-author { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; font-family: var(--display); font-size: 19px; }
.rv-points { font-family: var(--display); font-size: 17px; }
.rv-dots { display: flex; justify-content: center; gap: 8px; }
.rv-dots span { width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--paper); }
.rv-dots span.is-done { background: var(--ink); }
.rv-dots span.is-on { background: var(--red); transform: scale(1.25); }
.face { display: inline-flex; }
@keyframes lie-in { from { translate: 0 -12px; opacity: 0; } }
@keyframes lie-pop { from { scale: 0; } }

.lie-board li { gap: 10px; }
.lb-gain { font-family: var(--display); font-size: 14px; padding: 2px 9px; border: 2px solid var(--ink); border-radius: 9px; background: var(--green); transform: rotate(-3deg); animation: lie-pop .4s calc(.3s + var(--i) * .06s) var(--ease-pop) both; }
.lie-board .lb-score { min-width: 56px; text-align: right; font-size: 18px; color: var(--ink); }
.answers h4 { margin-bottom: 8px; }
.answers ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.answers li { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(54px, auto); gap: 10px; align-items: center; padding-bottom: 8px; border-bottom: 2px dashed rgba(42,37,34,.12); }
.answers li:last-child { border-bottom: 0; padding-bottom: 0; }
.answers li.is-truth .ans-text { color: var(--green-d); }
.ans-text { display: flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 18px; }
.ans-who { color: var(--ink-2); font-size: 16px; text-align: right; }
.ans-picks { justify-content: flex-end; }
.nowrap { white-space: nowrap; }
.ans-picks { display: flex; gap: 2px; }

@media (max-width: 640px) {
  .lie-options { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .lie-opt { min-height: 56px; font-size: 18px; }
  .answers li { grid-template-columns: minmax(0, 1fr) auto; }
  .ans-who { grid-column: 1 / 2; grid-row: 2; font-size: 15px; text-align: left; }
  .ans-picks { grid-row: 1 / span 2; grid-column: 2; }
}

/* ---------------------------------------------------------------------
   GOOGLE FEUD — search bar, two-column answer board, turns + strikes
   --------------------------------------------------------------------- */
.gf-layout { display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: 18px; align-items: start; max-width: 1000px; margin: 0 auto; }
.gf-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.gf-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.gf-search {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: var(--line) solid var(--ink); border-radius: 999px;
  padding: 8px 8px 8px 18px; min-height: 62px;
  box-shadow: -4px 5px 0 var(--cobalt);
}
.gf-search.is-mine { box-shadow: -5px 6px 0 var(--cobalt-d); animation: gf-nudge .5s var(--ease-pop); }
.gf-glass { flex: none; display: inline-flex; color: var(--ink-2); }
.gf-line { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--display); font-size: 22px; cursor: text; }
.gf-q { white-space: nowrap; }
.gf-line input {
  flex: 1 1 0; width: 0; min-width: 84px; border: 0; outline: none; background: transparent;
  font: inherit; color: var(--cobalt-d); padding: 4px 2px;
}
.gf-line input::placeholder { color: #b9b0a3; }
.gf-search .btn { flex: none; }
.gf-caret { width: 3px; height: 26px; border-radius: 2px; background: var(--cobalt-d); animation: gf-blink 1s steps(1) infinite; }
.gf-wait { font-family: var(--hand); font-size: 18px; color: var(--muted); }
.gf-hint { margin: 0 4px; font-size: 18px; color: var(--ink-2); text-align: center; }
.gf-hint.is-mine { font-family: var(--display); color: var(--cobalt-d); }

.gf-board-wrap { position: relative; }
.gf-board {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 5), auto); grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 12px;
}
.gf-slot {
  display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 50px;
  padding: 6px 12px 6px 8px; border: var(--line) solid var(--ink); border-radius: 14px 18px 13px 17px / 17px 13px 18px 14px;
  background: var(--paper);
}
.gf-slot.is-hidden { background: var(--cobalt-s); border-style: dashed; border-color: #8a8fb0; }
.gf-rank {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center;
  font-family: var(--display); font-size: 15px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--ink);
}
.gf-slot.is-hidden .gf-rank { border-color: #8a8fb0; color: #6f7598; }
.gf-blank { flex: 1; height: 4px; border-radius: 3px; background: repeating-linear-gradient(90deg, #a9aed0 0 10px, transparent 10px 16px); opacity: .7; }
.gf-text { flex: 1; min-width: 0; font-family: var(--display); font-size: 17px; line-height: 1.15; overflow-wrap: break-word; hyphens: auto; }
.gf-pts { flex: none; font-family: var(--display); font-size: 13px; color: var(--muted); }
.gf-slot.is-found:not(.is-missed) { background: #fff; box-shadow: -3px 4px 0 var(--cobalt); }
.gf-slot.is-found:not(.is-missed) .gf-rank { background: var(--cobalt); }
.gf-slot.is-found:not(.is-missed) .gf-pts { color: var(--cobalt-d); }
.gf-slot.is-mine { box-shadow: -3px 4px 0 var(--green) !important; }
.gf-slot.is-missed { background: var(--paper-2); }
.gf-slot.is-missed .gf-text { color: var(--ink-2); }
.gf-slot.is-fresh { animation: gf-flip .55s var(--ease-pop) both; }
.gf-board.is-reveal .gf-slot.is-missed { animation: gf-flip .5s var(--ease-pop) both; }
.gf-board.is-reveal .gf-slot:nth-child(2n) { animation-delay: .05s; }

.gf-x {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  color: var(--red-d); animation: gf-x 1.3s ease-out both;
}
.gf-x .icon { filter: drop-shadow(-4px 5px 0 rgba(42, 37, 34, .25)); }

.gf-last {
  min-height: 40px; padding: 4px 8px; line-height: 1.7;
  font-size: 18px; color: var(--ink-2); text-align: center; animation: lie-in .35s var(--ease-pop) both;
}
.gf-last > * { vertical-align: middle; }
.gf-last .face { margin-right: 6px; }
.gf-last .gf-plus, .gf-last .gf-strike-word { display: inline-block; margin-left: 8px; }
.gf-last.is-empty { animation: none; }
.gf-last b { font-family: var(--display); font-weight: normal; color: var(--ink); }
.gf-plus, .gf-strike-word {
  font-style: normal; font-family: var(--display); font-size: 15px; padding: 2px 9px;
  border: 2px solid var(--ink); border-radius: 9px; transform: rotate(-3deg);
}
.gf-plus { background: var(--green); }
.gf-strike-word { background: var(--red); }

.gf-misses { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.gf-misses-label { font-size: 16px; color: var(--muted); margin-right: 2px; }
.gf-miss {
  display: inline-flex; align-items: center; gap: 4px; font-size: 16px; color: var(--ink-2);
  padding: 2px 9px 2px 7px; border-radius: 999px; background: var(--paper); border: 2px solid #d8cdb8;
  text-decoration: line-through; text-decoration-color: rgba(207, 79, 66, .6);
}
.gf-miss .icon { color: var(--red-d); }

.gf-players { list-style: none; margin: 0; padding: 10px; display: flex; flex-direction: column; gap: 6px; background: var(--paper); border: var(--line) solid var(--ink); border-radius: var(--radius-wobble); box-shadow: -4px 5px 0 rgba(42, 37, 34, .12); }
.gf-player { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; transition: background .2s, opacity .2s; }
.gf-player.is-turn { background: var(--cobalt-s); box-shadow: inset 0 0 0 2px var(--cobalt-d); }
.gf-player.is-out { opacity: .5; }
.gf-player.is-away { opacity: .65; }
.gf-pav { position: relative; flex: none; display: inline-flex; }
.gf-turn-dot { position: absolute; right: -3px; top: -3px; width: 13px; height: 13px; border-radius: 50%; background: var(--cobalt-d); border: 2px solid var(--paper); animation: gf-pulse 1.2s ease-in-out infinite; }
.gf-pinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gf-pinfo b { font-weight: normal; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gf-pinfo em { font-style: normal; color: var(--muted); }
.gf-strikes { display: flex; gap: 3px; }
.gf-strikes i { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 5px; border: 2px solid #d8cdb8; color: transparent; }
.gf-strikes i.is-on { border-color: var(--red-d); background: var(--red); color: var(--ink); animation: lie-pop .3s var(--ease-pop) both; }
.gf-outtag { font-size: 15px; color: var(--red-d); }
.gf-pscore { flex: none; font-family: var(--display); font-size: 16px; }

.gf-round-title { text-align: center; font-size: 22px; margin: 2px 0 0; }
.gf-round-title.is-cleared { color: var(--green-d); }
.gf-lb { padding: 10px 10px; }
.gf-lb li { gap: 8px; padding: 5px 6px; }
.gf-lb .lb-rank { width: 16px; }
.gf-lb .lb-name { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gf-lb-right { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.gf-lb .lb-score { text-align: right; color: var(--ink); font-size: 17px; }
.gf-lb .lb-gain { font-size: 12px; padding: 1px 7px; }
.gf-final .gf-lb { padding: 14px 18px; }
.gf-final .gf-lb li { gap: 12px; padding: 6px 8px; }
.gf-final .gf-lb-right { flex-direction: row-reverse; align-items: center; gap: 12px; }
.gf-final .gf-lb .lb-score { min-width: 56px; font-size: 18px; }
.gf-final { max-width: 640px; margin: 0 auto; }

@keyframes gf-blink { 50% { opacity: 0; } }
@keyframes gf-nudge { 0% { transform: scale(.97); } 60% { transform: scale(1.015); } 100% { transform: none; } }
@keyframes gf-flip { 0% { transform: rotateX(90deg); opacity: .3; } 100% { transform: none; opacity: 1; } }
@keyframes gf-x { 0% { transform: scale(.3) rotate(-12deg); opacity: 0; } 18% { transform: scale(1.1) rotate(4deg); opacity: 1; } 70% { opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 0; } }
@keyframes gf-pulse { 50% { transform: scale(1.25); } }

@media (max-width: 860px) {
  .gf-layout { grid-template-columns: minmax(0, 1fr); }
  .gf-side { order: -1; }
  .gf-players { flex-direction: row; flex-wrap: wrap; padding: 8px; gap: 4px; }
  .gf-player { flex: 1 1 140px; padding: 4px 6px; gap: 7px; }
}
@media (max-width: 640px) {
  .gf-search { padding: 6px 6px 6px 12px; min-height: 54px; gap: 8px; }
  .gf-line { font-size: 18px; gap: 4px; }
  .gf-line input { min-width: 96px; }
  .gf-board { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 6px; }
  .gf-slot { min-height: 42px; padding: 4px 10px 4px 6px; }
  .gf-rank { width: 26px; height: 26px; font-size: 14px; }
  .gf-text { font-size: 16px; }
  .gf-x .icon { width: 90px; height: 90px; }
}

/* ---------------------------------------------------------------------
   property wars
   --------------------------------------------------------------------- */
.room-page.game-propertywars { max-width: 1280px; }
.game.propertywars { max-width: 1240px; }
.pw-outnote { text-align: center; color: var(--muted); margin: -8px 0 12px; }

.pw-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.pw-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* board -------------------------------------------------------------
   top / bottom tiles are portrait cards, left / right tiles are landscape
   cards. the colour band always sits on the inner edge and all text stays
   horizontal; side tiles put the icon beside the name to save height. */
.pw-board {
  container-type: inline-size;
  width: min(100%, calc(100vh - 190px)); min-width: min(100%, 560px); margin: 0 auto; aspect-ratio: 1;
  display: grid; grid-template-columns: 1.6fr repeat(9, 1fr) 1.6fr; grid-template-rows: 1.6fr repeat(9, 1fr) 1.6fr;
  gap: .3em; padding: .5em;
  background: #f4e4ad; border: var(--line) solid var(--ink); border-radius: 20px;
  box-shadow: -6px 8px 0 rgba(42,37,34,.18);
  font-size: clamp(7px, 1.45cqw, 12px);
}
.pw-cell {
  position: relative; min-width: 0; min-height: 0; padding: 0; border: 0; background: none;
  font: inherit; font-family: var(--display); color: var(--ink); line-height: 1.05; cursor: pointer;
  transition: transform .18s var(--ease-pop);
}
.pw-cell:hover { transform: scale(1.07); z-index: 3; }
.pw-cell:focus-visible { outline: none; }
.pw-cell:focus-visible > .pw-tile, .pw-cell.s-corner:focus-visible { box-shadow: 0 0 0 3px var(--blue-d); }

.pw-tile {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; text-align: center;
  background: var(--paper); border: 2px solid var(--ink); border-radius: .65em; overflow: hidden;
}
.s-top .pw-tile { flex-direction: column-reverse; }
.s-left .pw-tile { flex-direction: row-reverse; }
.s-right .pw-tile { flex-direction: row; }

.pw-band {
  flex: none; width: 100%; height: 25%;
  display: flex; align-items: center; justify-content: center; gap: .12em;
  background: var(--set); border-bottom: 2px solid var(--ink);
}
.s-top .pw-band { border-bottom: 0; border-top: 2px solid var(--ink); }
.s-left .pw-band, .s-right .pw-band { width: 21%; height: auto; flex-direction: column; border-bottom: 0; gap: .08em; }
.s-left .pw-band { border-left: 2px solid var(--ink); }
.s-right .pw-band { border-right: 2px solid var(--ink); }
.pw-house { width: 1.05em; height: 1.05em; flex: none; }
.pw-hotel { width: 2.3em; height: 1.15em; flex: none; }
.s-left .pw-house, .s-right .pw-house { width: .95em; height: .95em; }
.pw-hotel.is-tall { width: 1.15em; height: 2.1em; }
.pw-house path, .pw-hotel path { fill: #6fd17f; stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; }
.pw-hotel path { fill: var(--red); }
.pw-hotel .pw-door { fill: none; }

.pw-body { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.s-top .pw-body { flex-direction: column-reverse; }
.pw-head {
  flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35em;
  padding: .25em .2em;
}
.s-left .pw-head, .s-right .pw-head { flex-direction: row; gap: .35em; padding: .15em .35em; }
.pw-ico { flex: none; display: grid; place-items: center; color: var(--ink); }
.pw-ico .icon { width: 1.9em; height: 1.9em; }
.s-left .pw-ico .icon, .s-right .pw-ico .icon { width: 1.6em; height: 1.6em; }
.t-card .pw-ico { color: var(--pink-d); }
.t-air .pw-ico { color: var(--blue-d); }
.t-util .pw-ico { color: var(--orange-d, #d4761a); }
.pw-name { min-width: 0; font-size: calc(1em * var(--fit, 1)); overflow-wrap: normal; }
.s-left .t-prop .pw-name, .s-right .t-prop .pw-name { font-size: calc(1.05em * var(--fit, 1)); }
.s-left:not(.t-prop) .pw-name, .s-right:not(.t-prop) .pw-name { text-align: left; }
.t-card .pw-name, .t-tax .pw-name, .t-util .pw-name, .t-air .pw-name { font-size: calc(.86em * var(--fit, 1)); }
.s-left:not(.t-prop) .pw-name, .s-right:not(.t-prop) .pw-name { font-size: calc(.95em * var(--fit, 1)); }
.pw-code { display: none; }
.pw-foot {
  flex: none; width: 100%; padding: .25em 0 .3em;
  font-family: var(--body); font-size: .8em; color: var(--muted); white-space: nowrap;
  border-top: 1.5px dashed rgba(42,37,34,.22);
}
.s-left .pw-foot, .s-right .pw-foot { padding: .15em 0 .2em; }
.s-top .pw-foot { border-top: 0; border-bottom: 1.5px dashed rgba(42,37,34,.22); }
.pw-foot.is-owned { background: var(--owner); color: var(--ink); font-weight: 700; border-top: 2px solid var(--ink); }
.s-top .pw-foot.is-owned { border-top: 0; border-bottom: 2px solid var(--ink); }
.pw-foot.is-m { background: repeating-linear-gradient(-45deg, var(--paper) 0 4px, var(--owner) 4px 6px); font-weight: 400; color: var(--muted); }

.is-owned > .pw-tile { background: color-mix(in srgb, var(--owner) 14%, var(--paper)); }
.is-mortgaged > .pw-tile { background: repeating-linear-gradient(-45deg, var(--paper) 0 5px, #efe6cb 5px 7px); }
.is-mortgaged .pw-band { filter: saturate(.3) brightness(1.08); }
.is-mortgaged .pw-name { color: var(--muted); }
.pw-cell.is-offer { z-index: 2; }
.pw-cell.is-offer > .pw-tile { animation: pw-glow 1.2s ease-in-out infinite; }

/* corners */
.pw-cell.s-corner {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3em;
  background: var(--paper-2); border: 2px solid var(--ink); border-radius: .9em; overflow: hidden; text-align: center;
}
.s-corner .pw-ico { margin: 0; }
.s-corner .pw-ico .icon { width: 2.9em; height: 2.9em; }
.s-corner .pw-name { flex: none; font-size: 1.12em; }
.t-go.s-corner { background: var(--mint-s); }
.t-free.s-corner { background: var(--blue-s, #dff1ff); }
.t-gojail.s-corner { background: var(--red-s); }
.t-gojail .pw-ico { color: var(--red-d); }
.pw-go { font-size: 2.5em; line-height: .9; color: var(--mint-d); transform: rotate(-8deg); }
.pw-go-sub { font-family: var(--body); font-size: .8em; }
.pw-go-arrow { color: var(--mint-d); }
.pw-go-arrow .icon { width: 2.1em; height: 2.1em; }

/* jail: the barred cell is "in jail", the L-shaped strip around it is "just visiting" */
.t-jail.s-corner { display: block; background: var(--paper-2); }
.pw-jailbox {
  position: absolute; top: 0; right: 0; width: 68%; height: 68%;
  background: var(--orange); border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); border-bottom-left-radius: .7em;
  display: flex; align-items: center; justify-content: center;
}
.pw-jail-label {
  position: absolute; top: .3em; left: 50%; transform: translateX(-50%); z-index: 3;
  padding: 0 .4em; border-radius: .5em; background: var(--paper); border: 1.5px solid var(--ink);
  font-size: .78em; white-space: nowrap;
}
.pw-jailed { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; padding: 1.2em .3em .3em; }
.pw-bars {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 1.15em, rgba(42,37,34,.8) 1.15em 1.38em);
  border-bottom-left-radius: .6em;
}
.pw-visit-label {
  position: absolute; left: 0; right: 0; bottom: 0; height: 32%;
  display: flex; align-items: center; justify-content: center;
  font-size: .8em; color: var(--muted); white-space: nowrap;
}
.pw-visitors {
  position: absolute; left: 0; top: 0; width: 32%; height: 68%; z-index: 1;
  display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; justify-content: center; align-content: center;
}
.pw-visitors .pw-token { margin: -.3em -.15em; }

/* tokens */
.pw-tokens {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-content: center; padding: .2em;
}
.pw-token {
  display: grid; place-items: center; width: 2.2em; height: 2.2em; margin: -.25em; flex: none;
  border-radius: 50%; background: var(--c); border: 2px solid var(--ink); box-shadow: -1px 2px 0 rgba(42,37,34,.35);
  animation: pw-hop .45s var(--ease-pop);
}
.pw-token svg { width: 82%; height: 82%; }
.pw-token.is-turn { position: relative; z-index: 1; animation: pw-hop .45s var(--ease-pop), pw-bob 1.4s .45s ease-in-out infinite; }
.pw-jailed .pw-token, .pw-visitors .pw-token { width: 2.1em; height: 2.1em; }
.s-corner .pw-tokens .pw-token { width: 2.6em; height: 2.6em; }

/* centre ------------------------------------------------------------ */
.pw-center {
  grid-area: 2 / 2 / 11 / 11; margin: .25em; min-width: 0; min-height: 0; overflow: hidden;
  border: 2px dashed rgba(42,37,34,.22); border-radius: 1.2em;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9em;
  padding: 1.2em; background: color-mix(in srgb, var(--bg) 65%, #fff); position: relative;
  font-family: var(--body); font-size: max(13px, 1.25em);
}
.pw-brand {
  position: absolute; top: 4%; left: 50%; transform: translateX(-50%) rotate(-4deg);
  font-family: var(--display); font-size: 2.1em; white-space: nowrap; line-height: 1; opacity: .9;
}
.pw-brand span:first-child { color: var(--ink); }
.pw-brand span:last-child { color: var(--mint-d); }
.pw-dice { display: flex; gap: .6em; }
.pw-dice.is-idle { opacity: .35; }
.pw-die { width: 3.3em; height: 3.3em; fill: #fff; stroke: var(--ink); stroke-width: 2.6; animation: pw-roll .55s var(--ease-pop); }
.pw-die g { fill: var(--ink); stroke: none; }
.pw-die:nth-child(2) { animation-delay: .06s; }
.pw-dice.is-idle .pw-die { animation: none; }
.pw-dice.is-doubles .pw-die { fill: var(--mint-s); }
.pw-card {
  width: min(100%, 22em); padding: .55em .9em .7em; border: 2px solid var(--ink); border-radius: 12px;
  background: #fff; box-shadow: -3px 4px 0 var(--cd, var(--pink)); animation: popin .35s var(--ease-pop); text-align: center;
}
.pw-card.d-news { --cd: var(--orange); }
.pw-card.d-hall { --cd: var(--blue); }
.pw-card-head { display: flex; align-items: center; justify-content: center; gap: .35em; font-family: var(--display); font-size: .85em; color: var(--muted); }
.pw-card p { margin: .2em 0 0; font-size: .95em; line-height: 1.25; }
.pw-panel { width: min(100%, 24em); display: flex; flex-direction: column; align-items: center; gap: .6em; text-align: center; }
.pw-prompt { margin: 0; display: flex; align-items: center; justify-content: center; gap: .5em; line-height: 1.25; }
.pw-prompt.is-mine { font-family: var(--display); font-size: 1.2em; display: block; }
.pw-prompt svg { flex: none; }
.pw-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pw-note { margin: 0; font-size: .82em; color: var(--muted); line-height: 1.3; }
.pw-peek { font-size: .9em; }
.pw-recent {
  position: absolute; bottom: 3%; left: 6%; right: 6%; margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; align-items: center; gap: .15em; font-size: .78em; color: var(--muted); text-align: center;
}
.pw-recent li { animation: popin .3s var(--ease-pop); }
.pw-recent li + li { opacity: .6; }
.pw-recent b { color: var(--ink); font-weight: 600; }

.pw-auction { display: flex; flex-direction: column; align-items: center; gap: .55em; width: 100%; }
.pw-auction-head { display: flex; align-items: center; gap: .5em; }
.pw-gavel { font-family: var(--display); font-size: 1.25em; color: var(--red-d); transform: rotate(-5deg); display: inline-block; }
.pw-bid { margin: 0; display: flex; align-items: baseline; gap: .4em; }
.pw-bid b { font-family: var(--display); font-size: 1.6em; }
.pw-bid span { color: var(--muted); }
.pw-bids .btn { min-width: 74px; }
.pw-bid-form { display: flex; align-items: center; gap: 4px; padding: 2px 4px 2px 12px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; }
.pw-bid-form input { width: 6em; border: 0; outline: 0; background: none; font: inherit; padding: 6px 2px; }
.pw-bid-form input::-webkit-inner-spin-button { display: none; }
.pw-debt { display: flex; flex-direction: column; align-items: center; gap: .55em; }

/* chips (properties as little cards) */
.pw-chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  padding: 3px 10px 3px 6px; border: 2px solid var(--ink); border-radius: 9px;
  background: #fff; font: inherit; font-size: 14px; line-height: 1.2; color: var(--ink); cursor: pointer;
  box-shadow: inset 7px 0 0 var(--set); padding-left: 13px;
  transition: transform .15s var(--ease-pop), background .15s;
}
.pw-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-chip.is-special { box-shadow: none; padding-left: 7px; }
.pw-chip.is-small { font-size: 13px; padding-top: 2px; padding-bottom: 2px; }
.pw-chip.is-cash { box-shadow: none; padding-left: 9px; background: var(--paper-2); cursor: default; }
button.pw-chip.is-cash { cursor: pointer; }
.pw-chip:hover { transform: translateY(-1px); }
.pw-chip.is-on { background: var(--mint-s); box-shadow: inset 7px 0 0 var(--set), -2px 3px 0 var(--mint-d); transform: rotate(-1.5deg); }
.pw-chip.is-special.is-on, .pw-chip.is-cash.is-on { box-shadow: -2px 3px 0 var(--mint-d); background: var(--mint-s); }
.pw-nothing { color: var(--muted); font-size: 14px; }

/* side panel -------------------------------------------------------- */
.pw-players { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 4px; background: var(--paper); border: var(--line) solid var(--ink); border-radius: var(--radius-wobble); }
.pw-player { display: flex; align-items: center; gap: 9px; padding: 5px 8px 5px 5px; border-radius: 12px; border: 2px solid transparent; transition: background .2s, border-color .2s; }
.pw-player.is-turn { background: var(--mint-s); border-color: var(--ink); }
.pw-player.is-out { opacity: .5; }
.pw-pav { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c); border: 2px solid var(--ink); flex: none; }
.pw-pinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pw-pinfo b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-pinfo em { font-style: normal; color: var(--muted); font-weight: 400; }
.pw-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pw-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; padding: 0 6px; border-radius: 999px; background: var(--paper-2); border: 1.5px solid var(--ink); }
.pw-tag.is-out { background: var(--red-s); }
.pw-swatches { display: flex; flex-wrap: wrap; gap: 2px; }
.pw-swatches i { width: 8px; height: 11px; border-radius: 2px; background: var(--set); border: 1.5px solid var(--ink); }
.pw-swatches i.is-special { background: #fff; }
.pw-swatches i.is-m { opacity: .35; }
.pw-pcash { display: flex; flex-direction: column; align-items: flex-end; flex: none; line-height: 1.1; }
.pw-pcash b { font-family: var(--display); font-size: 17px; font-weight: 400; }
.pw-pcash small { font-size: 11px; color: var(--muted); }

.pw-section { padding: 12px 14px; background: var(--paper); border: var(--line) solid var(--ink); border-radius: var(--radius-wobble-2); }
.pw-section-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 8px; margin-bottom: 8px; }
.pw-section-head h4 { margin: 0; font-size: 17px; }
.pw-section-head small { color: var(--muted); font-size: 12px; }
.pw-section-head .link-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; padding: 0; min-height: 0; }
.pw-empty { margin: 0; color: var(--muted); font-size: 14px; }
.pw-trade { padding: 8px 10px; border: 2px dashed rgba(42,37,34,.3); border-radius: 12px; display: flex; flex-direction: column; gap: 6px; }
.pw-trade + .pw-trade { margin-top: 8px; }
.pw-trade.is-in { border: 2px solid var(--ink); background: var(--mint-s); animation: popin .35s var(--ease-pop); }
.pw-trade-who { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 14px; }
.pw-trade-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 6px; align-items: start; font-size: 13px; }
.pw-trade-row > span { color: var(--muted); padding-top: 4px; }
.pw-trade-row > div { display: flex; flex-wrap: wrap; gap: 4px; }
.pw-trade-btns { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.pw-trade-btns .link-btn { font-size: 14px; }
.pw-lotrow { display: flex; flex-wrap: wrap; gap: 5px; }
.pw-lotrow + .pw-lotrow { margin-top: 6px; }
.pw-lot {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 13px; border: 2px solid var(--ink); border-radius: 9px;
  background: #fff; box-shadow: inset 7px 0 0 var(--set); font: inherit; font-size: 13px; color: var(--ink); cursor: pointer;
}
.pw-lot.is-special { box-shadow: none; padding-left: 7px; }
.pw-lot.is-full { box-shadow: inset 7px 0 0 var(--set), -2px 3px 0 var(--set); }
.pw-lot.is-m { background: repeating-linear-gradient(-45deg, #fff 0 5px, #ece3c8 5px 7px); color: var(--muted); }
.pw-lot em { display: inline-flex; align-items: center; font-style: normal; font-size: 11px; color: var(--muted); gap: 1px; }
.pw-lot:hover { transform: translateY(-1px); }
.pw-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; max-height: 260px; overflow: auto; font-size: 13px; line-height: 1.3; }
.pw-log li { padding-left: 9px; border-left: 3px solid var(--c); }
.pw-log li:first-child { animation: popin .3s var(--ease-pop); }
.pw-log b { font-weight: 600; }

/* sheets ------------------------------------------------------------ */
.pw-sheet-wrap { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; }
.pw-sheet-back { position: absolute; inset: 0; background: rgba(42,37,34,.35); animation: fadein .2s; }
.pw-sheet { position: relative; width: min(400px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 0; animation: popin .3s var(--ease-pop); }
.pw-sheet-x { position: absolute; top: 8px; right: 8px; z-index: 1; background: var(--paper); }
.pw-deed-head { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 44px 14px; background: var(--set); border-bottom: var(--line) solid var(--ink); text-align: center; }
.pw-deed-head small { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.pw-deed-head h3 { margin: 0; font-size: 26px; }
.pw-deed .pw-deed-status, .pw-deed .pw-rents, .pw-deed .pw-deed-foot, .pw-deed .pw-deed-text, .pw-deed .pw-deed-acts { margin-left: 20px; margin-right: 20px; }
.pw-deed-status { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; margin-top: 14px; margin-bottom: 4px; font-size: 15px; text-align: center; }
.pw-m { color: var(--red-d); }
.pw-rents { width: calc(100% - 40px); border-collapse: collapse; margin-top: 10px; font-size: 15px; }
.pw-rents td { padding: 4px 8px; border-bottom: 1.5px dashed rgba(42,37,34,.15); }
.pw-rents td:last-child { text-align: right; font-family: var(--display); }
.pw-rents tr.is-now td { background: var(--mint-s); }
.pw-rents tr.is-now td:first-child { border-radius: 8px 0 0 8px; font-weight: 600; }
.pw-rents tr.is-now td:last-child { border-radius: 0 8px 8px 0; }
.pw-deed-foot { font-size: 13px; color: var(--muted); text-align: center; margin-top: 10px; margin-bottom: 16px; }
.pw-deed-text { margin-top: 16px; margin-bottom: 18px; text-align: center; line-height: 1.4; }
.pw-jail-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -6px 20px 16px; }
.pw-jail-list > span { width: 100%; font-size: 13px; color: var(--muted); text-align: center; }
.pw-jail-list { justify-content: center; }
.pw-jail-list b { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px 2px 3px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font-weight: 400; }
.pw-jail-list b svg { border-radius: 50%; }
.pw-jail-list small { color: var(--muted); font-size: 12px; }
.pw-deed-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: -2px; margin-bottom: 20px; }
.pw-deed-acts .pw-note { width: 100%; text-align: center; }
.pw-deed.t-air .pw-deed-head, .pw-deed.t-util .pw-deed-head, .pw-deed.t-card .pw-deed-head, .pw-deed.t-tax .pw-deed-head,
.pw-deed.t-go .pw-deed-head, .pw-deed.t-jail .pw-deed-head, .pw-deed.t-free .pw-deed-head, .pw-deed.t-gojail .pw-deed-head { background: var(--paper-2); }

.pw-sheet:has(.pw-tradesheet) { width: min(620px, 100%); }
.pw-tradesheet { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.pw-tradesheet h3 { margin: 0; font-size: 24px; }
.pw-twho { display: flex; flex-wrap: wrap; gap: 6px; }
.pw-twho-btn { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 3px; border-radius: 999px; border: 2px solid var(--ink); background: #fff; font: inherit; cursor: pointer; transition: transform .15s var(--ease-pop); }
.pw-twho-btn svg { border-radius: 50%; background: var(--c); }
.pw-twho-btn.is-on { background: var(--mint-s); box-shadow: -2px 3px 0 var(--mint-d); transform: rotate(-1.5deg); }
.pw-tsides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pw-tside { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 2px dashed rgba(42,37,34,.3); border-radius: 14px; }
.pw-tside h5 { margin: 0; font-size: 16px; font-family: var(--display); font-weight: 400; }
.pw-tlots { display: flex; flex-wrap: wrap; gap: 5px; }
.pw-tcash { display: flex; align-items: center; gap: 8px; font-size: 14px; flex-wrap: wrap; }
.pw-tcash-in { display: inline-flex; align-items: center; gap: 2px; padding: 0 8px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; }
.pw-tcash input { width: 5.5em; border: 0; outline: 0; background: none; font: inherit; padding: 5px 0; }
.pw-tcash small { color: var(--muted); }
.pw-tradesheet .pw-actions { justify-content: flex-end; }

.pw-final { max-width: 640px; margin: 0 auto; }
.pw-final .lb-name { flex: 1; }
.pw-final .lb-score { font-family: var(--display); }
.pw-final .lb-art svg { border-radius: 50%; }

@keyframes pw-glow { 50% { box-shadow: inset 0 0 0 3px var(--mint-d); background: var(--mint-s); } }
@keyframes pw-hop { 0% { transform: translateY(-60%) scale(.6); opacity: 0; } 60% { transform: translateY(6%) scale(1.05); opacity: 1; } 100% { transform: none; } }
@keyframes pw-bob { 50% { transform: translateY(-14%); } }
@keyframes pw-roll { 0% { transform: rotate(-200deg) scale(.4); } 70% { transform: rotate(12deg) scale(1.08); } 100% { transform: none; } }

@media (max-width: 1060px) {
  .pw-layout { grid-template-columns: minmax(0, 1fr); }
  .pw-board { width: min(100%, 760px); }
  .pw-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .pw-players { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .pw-player { flex: 1 1 210px; }
}
@media (max-width: 640px) {
  .pw-board { min-width: 0; border-radius: 12px; border-width: 2px; padding: .35em; gap: .25em; font-size: clamp(6px, 2.2cqw, 10px); box-shadow: -3px 5px 0 rgba(42,37,34,.18); }
  .pw-full, .pw-go-sub, .pw-brand, .pw-recent, .pw-jail-label, .pw-visit-label { display: none; }
  .pw-code { display: block; font-size: calc(1.05em / var(--fit, 1)); }
  .s-corner:not(.t-go) .pw-name { display: none; }
  .pw-tile { border-width: 1.5px; border-radius: .5em; }
  .pw-cell:not(.s-corner):not(.t-prop) .pw-name { display: none; }
  .pw-ico .icon { width: 2em; height: 2em; }
  .pw-band { border-width: 1.5px !important; gap: 0; }
  .pw-house { width: .72em; height: .72em; }
  .pw-hotel { width: 1.7em; height: .9em; }
  .pw-hotel.is-tall { width: .8em; height: 1.5em; }
  .pw-foot { display: none; }
  .pw-foot.is-owned { display: block; height: .55em; padding: 0; font-size: 0; border-width: 1.5px !important; }
  .pw-cell.s-corner { border-width: 1.5px; border-radius: .6em; }
  .s-corner .pw-name { font-size: 1em; }
  .pw-go { font-size: 2em; }
  .pw-bars { background: repeating-linear-gradient(90deg, transparent 0 1em, rgba(42,37,34,.8) 1em 1.2em); }
  .pw-jailed { padding: .2em; }
  .pw-token { width: 2.4em; height: 2.4em; border-width: 1.5px; }
  .pw-cell:hover { transform: none; }
  .pw-center { padding: 6px; gap: 6px; font-size: 12px; }
  .pw-die { width: 32px; height: 32px; }
  .pw-card { padding: 4px 8px 6px; }
  .pw-card p { font-size: 11.5px; }
  .pw-prompt.is-mine { font-size: 15px; }
  .pw-center .btn { min-height: 36px; padding: 6px 12px; font-size: 14px; box-shadow: -2px 3px 0 var(--cd); }
  .pw-center .btn .icon { width: 16px; height: 16px; }
  .pw-actions { gap: 6px; }
  .pw-bids .btn { min-width: 0; }
  .pw-bid b { font-size: 18px; }
  .pw-side { display: flex; }
  .pw-player { flex-basis: 100%; }
  .pw-tsides { grid-template-columns: minmax(0, 1fr); }
  .pw-sheet-wrap { align-items: end; padding: 0; }
  .pw-sheet { width: 100% !important; max-height: 88vh; border-radius: 22px 22px 0 0; }
}

/* ================================================================== POKER */
.room-page.game-poker { max-width: 1220px; }
.game.poker { max-width: 1180px; }
.pk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; }
.pk-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }

/* the table ------------------------------------------------------------ */
.pk-table { position: relative; width: 100%; aspect-ratio: 1.85 / 1; container-type: inline-size; --cw: clamp(30px, 6.2cqw, 60px); --rx: 46.5%; --ry: 44%; --bx: 31%; --by: 27%; }
.pk-felt {
  position: absolute; inset: 10% 8.5%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 42%, #8bd8a6 0%, #6fc590 58%, #5db37f 100%);
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 clamp(7px, 1.5cqw, 13px) #f3c98b, 0 0 0 calc(clamp(7px, 1.5cqw, 13px) + 3px) var(--ink), -7px 10px 0 calc(clamp(7px, 1.5cqw, 13px) + 3px) rgba(42, 37, 34, .13);
}
.pk-felt::before { content: ''; position: absolute; inset: 7%; border-radius: 50%; border: 2px dashed rgba(42, 37, 34, .18); }
.pk-felt-brand { position: absolute; left: 50%; top: 22%; transform: translateX(-50%) rotate(-3deg); font-family: var(--display); font-size: clamp(12px, 2.1cqw, 20px); color: rgba(42, 37, 34, .22); white-space: nowrap; }
.pk-felt-brand em { font-style: normal; }
.pk-center { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1.4cqw, 12px); z-index: 1; width: 60%; }
.pk-board { display: flex; gap: clamp(4px, .9cqw, 8px); }
.pk-slot { width: var(--cw); height: calc(var(--cw) * 1.4); border-radius: 9px; border: 2px dashed rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .08); }
.pk-pot { display: inline-flex; align-items: center; gap: 6px; padding: 3px 13px 3px 6px; border-radius: 999px; background: var(--paper); border: 2px solid var(--ink); font-size: clamp(13px, 1.9cqw, 17px); box-shadow: -2px 3px 0 rgba(42, 37, 34, .18); }
.pk-pot b { font-family: var(--display); font-weight: 400; }
.pk-chip-svg { width: 1.25em; height: 1.25em; flex: none; display: block; }
.pk-result {
  padding: 6px 14px; border-radius: var(--radius-wobble); background: var(--paper); border: 2px solid var(--ink); text-align: center;
  font-size: clamp(13px, 1.9cqw, 17px); line-height: 1.25; box-shadow: -3px 4px 0 var(--gold-d); transform: rotate(-1deg);
  animation: pk-pop .45s var(--d, 0s) var(--ease-pop) both; max-width: 100%;
}
.pk-result p { margin: 0; }
.pk-result small { display: block; font-size: .72em; color: var(--muted); text-transform: lowercase; }
.pk-result em { font-style: normal; color: var(--ink-2); }
.pk-result .pk-sub { font-size: .8em; color: var(--muted); }

/* cards */
.pk-card {
  position: relative; display: inline-block; flex: none; width: var(--cw); height: calc(var(--cw) * 1.4);
  background: #fff; border: 2px solid var(--ink); border-radius: 8px 10px 8px 9px / 9px 8px 10px 8px;
  box-shadow: -2px 3px 0 rgba(42, 37, 34, .2); color: var(--ink); font-family: var(--display); line-height: 1; user-select: none;
  transition: transform .25s var(--ease-pop), box-shadow .25s;
}
.pk-card b { position: absolute; top: 6%; left: 10%; font-weight: 400; font-size: calc(var(--cw) * .4); letter-spacing: -.04em; }
.pk-card i { position: absolute; right: 9%; bottom: 5%; font-style: normal; font-size: calc(var(--cw) * .56); }
.pk-card.is-red { color: #d4433a; }
.pk-card.is-back {
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .38) 0 3px, transparent 3px 7px), #ff8a7a;
  box-shadow: inset 0 0 0 2.5px #fff, -2px 3px 0 rgba(42, 37, 34, .2);
}
.pk-card.is-hl { transform: translateY(-14%) rotate(-2deg); box-shadow: 0 0 0 3px var(--gold), -3px 5px 0 var(--gold-d); }
.pk-board .pk-card { animation: pk-deal .45s var(--d, 0s) var(--ease-pop) both; }
.pk-card.sm { --cw: clamp(19px, 3.3cqw, 32px); border-width: 1.5px; border-radius: 5px 6px 5px 6px; }
.pk-card.xs { --cw: 26px; border-width: 1.5px; border-radius: 5px; box-shadow: -1px 2px 0 rgba(42, 37, 34, .18); }
.pk-card.lg { --cw: 60px; }
@keyframes pk-deal { 0% { transform: translateY(-30%) rotateY(90deg) scale(.7); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes pk-pop { 0% { transform: scale(.4) rotate(-6deg); opacity: 0; } 100% { transform: rotate(-1deg); opacity: 1; } }

/* seats */
.pk-seat { left: calc(50% + var(--cos) * var(--rx)); top: calc(50% + var(--sin) * var(--ry)); position: absolute; z-index: 2; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; width: clamp(64px, 13cqw, 112px); transition: opacity .3s; }
.pk-hole { display: flex; justify-content: center; height: calc(clamp(19px, 3.3cqw, 32px) * 1.4); margin-bottom: -9%; position: relative; z-index: 0; }
.pk-hole .pk-card:first-child { transform: rotate(-8deg); }
.pk-hole .pk-card + .pk-card { margin-left: -22%; transform: rotate(7deg) translateY(1px); }
.pk-hole .pk-card.is-hl { transform: translateY(-20%) rotate(-3deg); }
.pk-hole .pk-card { animation: pk-deal .35s var(--ease-pop) both; }
.pk-ava {
  position: relative; z-index: 1; display: grid; place-items: center; width: clamp(38px, 6.8cqw, 58px); aspect-ratio: 1; border-radius: 50%;
  background: var(--paper); border: 2.5px solid var(--ink); box-shadow: -2px 3px 0 rgba(42, 37, 34, .18); transition: box-shadow .25s, transform .25s;
}
.pk-ava svg { width: 82%; height: 82%; }
.pk-plate {
  position: relative; z-index: 1; margin-top: -5px; display: flex; flex-direction: column; align-items: center; max-width: 100%;
  padding: 1px 9px 2px; background: var(--paper); border: 2px solid var(--ink); border-radius: 10px 12px 10px 11px; line-height: 1.1;
}
.pk-plate b { font-weight: 600; font-size: clamp(11px, 1.6cqw, 14px); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-plate span { font-family: var(--display); font-size: clamp(11px, 1.6cqw, 15px); }
.pk-seat.is-me .pk-plate { background: var(--gold-s); }
.pk-seat.is-turn .pk-ava { box-shadow: 0 0 0 4px var(--gold), -2px 3px 0 4px var(--gold-d); animation: pk-turn 1.3s ease-in-out infinite; }
.pk-seat.is-turn .pk-plate { background: var(--gold); }
.pk-seat.is-folded { opacity: .45; }
.pk-seat.is-out { opacity: .35; filter: grayscale(1); }
.pk-seat.is-winner .pk-plate { background: var(--mint); animation: pk-bounce .6s var(--ease-pop) 2; }
.pk-seat.is-winner .pk-ava { box-shadow: 0 0 0 4px var(--mint), -2px 3px 0 4px var(--mint-d); }
@keyframes pk-turn { 50% { transform: scale(1.06); } }
@keyframes pk-bounce { 40% { transform: translateY(-5px) rotate(-3deg); } }
.pk-dealer {
  position: absolute; right: -8px; bottom: -3px; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%;
  background: #fff; border: 2px solid var(--ink); font-family: var(--display); font-size: 12px; line-height: 1; box-shadow: -1px 2px 0 rgba(42, 37, 34, .25);
}
.pk-plate .pk-tag { font-family: var(--display); font-size: clamp(10px, 1.45cqw, 13px); line-height: 1.1; margin: 1px 0 1px; padding: 0 6px; border-radius: 999px; background: var(--red); border: 1.5px solid var(--ink); white-space: nowrap; }
.pk-plate .pk-tag.is-out { background: var(--paper-2); }
.pk-allin { font-style: normal; font-size: 13px; color: var(--red-d); }
.pk-handname { width: max-content; max-width: 150px; margin-top: 3px; font-size: clamp(10px, 1.45cqw, 13px); line-height: 1.1; text-align: center; padding: 1px 7px; border-radius: 8px; background: rgba(255, 252, 242, .92); border: 1.5px solid var(--ink); }
.pk-say {
  position: absolute; z-index: 3; left: 72%; top: 28%; white-space: nowrap; font-family: var(--display); font-size: clamp(11px, 1.6cqw, 14px); line-height: 1;
  padding: 4px 9px; border-radius: 12px 12px 12px 3px; background: #fff; border: 2px solid var(--ink); box-shadow: -2px 3px 0 rgba(42, 37, 34, .18);
  transform: rotate(-4deg); animation: pk-pop .35s var(--ease-pop) both;
}
.pk-seat.is-right .pk-say { left: auto; right: 72%; border-radius: 12px 12px 3px 12px; transform: rotate(4deg); }
.pk-say.is-raise { background: var(--gold); }
.pk-say.is-fold { background: var(--paper-2); color: var(--muted); }
.pk-bet {
  left: calc(50% + var(--cos) * var(--bx)); top: calc(50% + var(--sin) * var(--by)); position: absolute; z-index: 1; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 3px;
  border-radius: 999px; background: rgba(255, 252, 242, .94); border: 2px solid var(--ink); font-family: var(--display); font-size: clamp(11px, 1.7cqw, 15px); white-space: nowrap;
  animation: pk-pop .3s var(--ease-pop) both;
}

/* your controls ------------------------------------------------------- */
.pk-bar {
  display: flex; align-items: center; gap: 18px; padding: 12px 16px; min-height: 108px;
  background: var(--paper); border: var(--line) solid var(--ink); border-radius: var(--radius-wobble); box-shadow: var(--shadow-ink); transition: box-shadow .25s;
}
.pk-bar.is-turn { box-shadow: -5px 6px 0 var(--gold-d); }
.pk-bar.is-quiet { justify-content: center; min-height: 0; text-align: center; }
.pk-mine { display: flex; align-items: center; gap: 14px; flex: none; }
.pk-mine.is-folded { opacity: .45; }
.pk-mine-cards { display: flex; padding: 4px 0 2px; }
.pk-mine-cards .pk-card:first-child { transform: rotate(-6deg); }
.pk-mine-cards .pk-card + .pk-card { margin-left: -12px; transform: rotate(5deg) translateY(2px); }
.pk-mine-cards .pk-card.is-hl { transform: translateY(-6px) rotate(-3deg); }
.pk-helper { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 200px; }
.pk-strength { font-family: var(--display); font-size: 17px; line-height: 1.15; }
.pk-strength.is-off { color: var(--muted); font-family: var(--hand); font-size: 15px; }
.pk-helper-btn { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; }
.pk-helper-btn:hover { color: var(--ink); }
.pk-shown-note { font-size: 13px; color: var(--muted); }
.pk-bar-right { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; text-align: right; }
.pk-note { margin: 0; font-size: 18px; }
.pk-note span { color: var(--muted); }
.pk-hint { margin: 0; font-size: 14px; color: var(--muted); }
.pk-acts { display: flex; flex-direction: column; gap: 8px; width: min(100%, 440px); }
.pk-acts-row { display: flex; gap: 10px; }
.pk-acts-row .btn { flex: 1; }
.pk-acts .btn b, .pk-raise-btn b { font-family: var(--display); font-weight: 400; }
.pk-raise { display: grid; gap: 6px; padding: 8px 10px; border: 2px dashed rgba(42, 37, 34, .25); border-radius: 14px; }
.pk-presets { display: flex; gap: 6px; }
.pk-preset { flex: 1; padding: 3px 4px; font: inherit; font-size: 14px; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 10px; cursor: pointer; transition: transform .15s, background .15s; }
.pk-preset:hover { transform: translateY(-1px); }
.pk-preset.is-on { background: var(--gold-s); box-shadow: -2px 2px 0 var(--gold-d); }
.pk-slide { display: flex; align-items: center; gap: 8px; }
.pk-slide input { flex: 1; min-width: 0; accent-color: var(--gold-d); height: 26px; cursor: pointer; }
.pk-step { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--ink); background: #fff; font: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.pk-raise-btn { width: 100%; }

/* side panel ---------------------------------------------------------- */
.pk-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pk-section { padding: 12px 14px; background: var(--paper); border: var(--line) solid var(--ink); border-radius: var(--radius-wobble-2); }
.pk-section-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 8px; margin-bottom: 6px; }
.pk-section-head h4 { margin: 0; font-size: 17px; }
.pk-section-head small { color: var(--muted); font-size: 13px; }
.pk-section-head .link-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; padding: 0; min-height: 0; }
.pk-blinds { background: var(--gold-s); }
.pk-blinds-now { margin: 0; font-family: var(--display); font-size: 30px; line-height: 1.1; }
.pk-blinds-now span { color: var(--muted); }
.pk-blinds-next { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); }
.pk-stacks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pk-stacks li { display: grid; grid-template-columns: 30px minmax(0, 1fr) 54px auto; align-items: center; gap: 8px; padding: 2px 6px 2px 2px; border-radius: 10px; font-size: 15px; }
.pk-stacks li.is-turn { background: var(--gold-s); }
.pk-stacks li.is-out { opacity: .45; }
.pk-sav { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); }
.pk-sname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-sbar { height: 8px; border-radius: 4px; background: var(--paper-2); border: 1.5px solid var(--ink); overflow: hidden; }
.pk-sbar i { display: block; height: 100%; background: var(--gold); transition: width .5s; }
.pk-stacks b { font-family: var(--display); font-weight: 400; text-align: right; min-width: 42px; }
.pk-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 230px; overflow: auto; font-size: 13px; line-height: 1.3; }
.pk-log li { padding-left: 9px; border-left: 3px solid rgba(42, 37, 34, .15); }
.pk-log li.k-win { border-color: var(--mint-d); }
.pk-log li.k-raise { border-color: var(--gold-d); }
.pk-log li.k-out { border-color: var(--red-d); }
.pk-log li.k-level { border-color: var(--purple-d); font-weight: 600; }
.pk-log li.is-hand { border: 0; padding: 4px 0 0; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.pk-log li.is-hand::after { content: ''; flex: 1; border-top: 1.5px dashed rgba(42, 37, 34, .2); }
.pk-log li:not(.is-hand):nth-child(2) { animation: popin .3s var(--ease-pop); }
.pk-log li.is-hand:first-child { padding-top: 0; }
.pk-log b { font-weight: 600; }

/* hand rankings sheet */
.pk-sheet-wrap { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; }
.pk-sheet-back { position: absolute; inset: 0; background: rgba(42, 37, 34, .35); animation: fadein .2s; }
.pk-sheet { position: relative; width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 18px 18px 14px; animation: popin .3s var(--ease-pop); }
.pk-sheet h3 { margin: 0 0 2px; }
.pk-sheet-sub { margin: 0 0 10px; font-size: 14px; color: var(--muted); padding-right: 30px; }
.pk-sheet-x { position: absolute; top: 8px; right: 8px; z-index: 1; background: var(--paper); }
.pk-ranks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.pk-ranks li { display: grid; grid-template-columns: 18px auto minmax(0, 1fr); align-items: center; gap: 10px; }
.pk-rk { font-family: var(--display); color: var(--muted); text-align: right; }
.pk-rcards { display: flex; gap: 2px; }
.pk-rname { display: flex; flex-direction: column; line-height: 1.15; }
.pk-rname b { font-weight: 600; }
.pk-rname small { font-size: 12px; color: var(--muted); }

.pk-final .leaderboard li.is-champ { background: var(--gold-s); }

@media (max-width: 1000px) {
  .pk-layout { grid-template-columns: minmax(0, 1fr); }
  .pk-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .pk-side > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .pk-table { aspect-ratio: 1 / 1.08; --cw: clamp(30px, 10.5cqw, 46px); --rx: 39%; --ry: 43%; --bx: 27%; --by: 23%; }
  .pk-handname { max-width: 96px; }
  .pk-felt { inset: 13% 9%; }
  .pk-felt-brand { top: 16%; }
  .pk-center { width: 82%; }
  .pk-seat { width: 74px; }
  .pk-card.sm { --cw: 22px; }
  .pk-hole { height: calc(22px * 1.4); }
  .pk-ava { width: 40px; }
  .pk-plate b, .pk-plate span { font-size: 12px; }
  .pk-say { left: 58%; top: 18%; font-size: 11px; }
  .pk-seat.is-right .pk-say { right: 58%; }
  .pk-bar { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; }
  .pk-mine { justify-content: center; }
  .pk-card.lg { --cw: 50px; }
  .pk-bar-right { align-items: stretch; text-align: center; }
  .pk-acts { width: 100%; }
  .pk-side { grid-template-columns: minmax(0, 1fr); }
  .pk-sheet-wrap { align-items: end; padding: 0; }
  .pk-sheet { width: 100% !important; max-height: 88vh; border-radius: 22px 22px 0 0; }
}

/* ===================================================================
   DRAW BATTLE
   =================================================================== */
.room-page.game-drawbattle { max-width: 1220px; }
.game.drawbattle { max-width: 1160px; }
.team-red  { --team: var(--red);  --team-d: var(--red-d);  --team-s: var(--red-s); }
.team-blue { --team: var(--blue); --team-d: var(--blue-d); --team-s: var(--blue-s); }
.team-red-text  { color: var(--red-d); }
.team-blue-text { color: var(--blue-d); }
.drawbattle .kicker { display: block; font-size: 15px; letter-spacing: .02em; color: var(--muted); }
.drawbattle .db-stack { gap: 12px; }

/* scoreboard */
.db-score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; }
.db-side { position: relative; background: var(--team-s); border: var(--line) solid var(--ink); border-radius: var(--radius-wobble); padding: 7px 12px 8px; box-shadow: -4px 5px 0 var(--team); min-width: 0; }
.db-side.team-blue { border-radius: var(--radius-wobble-2); }
.db-side-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.team-blue .db-side-head { flex-direction: row-reverse; }
.db-tname { font-family: var(--display); font-size: 17px; color: var(--team-d); }
.db-pts { font-family: var(--display); font-size: 30px; line-height: 1; }
.db-members { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.team-blue .db-members { justify-content: flex-end; }
.db-mem { position: relative; display: inline-grid; border-radius: 50%; transition: transform .2s var(--ease-pop); }
.db-mem.is-drawer { transform: scale(1.12); }
.db-mem.is-drawer .avatar, .db-mem.is-drawer svg:first-child { filter: drop-shadow(0 0 0 var(--ink)); }
.db-mem.is-away { opacity: .3; }
.db-mem.is-by::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2.5px solid var(--green-d); }
.db-pencil { position: absolute; right: -5px; bottom: -4px; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; background: #ffe36b; border: 1.8px solid var(--ink); }
.db-got { position: absolute; top: -13px; left: 50%; transform: translateX(-50%) rotate(-3deg); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-family: var(--display); font-size: 14px; background: var(--green); border: 2px solid var(--ink); border-radius: 10px; padding: 1px 9px; animation: dbpop .35s var(--ease-pop); }
.db-progress { position: relative; height: 14px; margin-top: 6px; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); overflow: hidden; }
.db-progress span { position: absolute; inset: 0 auto 0 0; background: var(--team); transition: width .4s var(--ease-pop); }
.team-blue .db-progress span { inset: 0 0 0 auto; }
.db-progress em { position: relative; display: block; text-align: center; font-style: normal; font-size: 12px; line-height: 10px; font-weight: 700; }
.db-vs { font-family: var(--display); font-size: 18px; background: var(--paper); border: 2px solid var(--ink); border-radius: 12px; padding: 2px 10px; transform: rotate(-6deg); box-shadow: -2px 3px 0 rgba(42,37,34,.18); }
.db-vs.big { font-size: 26px; padding: 4px 14px; align-self: center; }

/* word line */
.db-word { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; min-height: 44px; text-align: center; font-size: 19px; }
.db-word b { font-family: var(--display); font-size: 30px; line-height: 1.1; }
.db-word .kicker { font-size: 16px; }
.db-word.is-draw b { background: #ffe36b; border: 2px solid var(--ink); border-radius: 12px; padding: 2px 14px 4px; transform: rotate(-1.5deg); box-shadow: -3px 4px 0 rgba(42,37,34,.18); }
.db-word.is-solved { color: var(--green-d); }
.db-word.is-solved b { color: var(--ink); }
.db-blanks { display: inline-flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.db-bword { position: relative; display: inline-flex; gap: 5px; padding-bottom: 2px; }
.db-bword i { display: block; width: 17px; height: 3.5px; margin-top: 18px; border-radius: 2px; background: var(--ink); }
.db-bword sub { position: absolute; right: -12px; top: 2px; font-size: 12px; color: var(--muted); }

/* the canvases */
.drawbattle .db-canvas { position: relative; width: 100%; margin: 0; box-shadow: -5px 6px 0 var(--team, rgba(42,37,34,.16)); }
.drawbattle .db-canvas.is-small { box-shadow: -3px 4px 0 var(--team, rgba(42,37,34,.16)); border-radius: 12px 15px 11px 14px; }
.drawbattle .db-canvas.is-thumb { box-shadow: none; border-width: 2px; border-radius: 10px; }
.db-canvas .ink-canvas { cursor: default; }
.db-canvas.is-drawing .ink-canvas { cursor: crosshair; }
.db-canvas.is-blur .ink-canvas { filter: blur(10px) saturate(.8); transform: scale(1.06); }
.db-canvas.is-blur::after { content: 'no peeking until you guess!'; position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); white-space: nowrap; font-size: 13px; background: rgba(255,252,242,.92); border: 1.5px solid var(--ink); border-radius: 8px; padding: 0 8px; }
.db-canvas-label { position: absolute; left: 8px; top: 6px; font-size: 14px; }
.db-hold span { background: #ffe36b; font-size: 18px; max-width: 80%; text-align: center; }

.db-play { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.db-play.has-tools { grid-template-columns: auto minmax(0, 1fr) 290px; }
.db-mine { min-width: 0; display: flex; justify-content: center; }
.db-mine .db-canvas { width: min(100%, max(380px, calc((100svh - 350px) * 4 / 3))); }
.db-aside { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.db-opp { display: flex; flex-direction: column; gap: 4px; }
.db-opp-label { font-family: var(--display); font-size: 16px; color: var(--team-d); display: flex; gap: 6px; align-items: center; }
.db-opp-label em { font-style: normal; display: inline-flex; align-items: center; gap: 3px; font-size: 13px; color: var(--ink); background: var(--green); border: 1.5px solid var(--ink); border-radius: 8px; padding: 0 7px; }

.db-guessbox { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.db-guess { display: flex; gap: 8px; }
.db-guess .line-input { flex: 1; min-width: 0; font-size: 20px; }
.db-guess .btn { padding: 6px 12px; min-height: 46px; }
.db-note { display: flex; align-items: center; gap: 6px; justify-content: center; text-align: center; font-size: 17px; color: var(--ink-2); }
.db-note.is-good { color: var(--green-d); }
.db-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.db-feed li { display: flex; align-items: center; gap: 6px; font-size: 16px; padding: 2px 6px; border-radius: 8px; animation: popin .25s var(--ease-pop); min-width: 0; }
.db-feed li b { flex: none; font-weight: 700; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-feed .db-gtext { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-feed li.is-ok { background: var(--green-s); color: var(--green-d); }
.db-feed li.is-ok em { font-style: normal; color: var(--ink); font-weight: 700; }
.db-feed li.is-close { background: var(--orange-s); }
.db-close { margin-left: auto; flex: none; font-style: normal; font-size: 13px; background: var(--orange); border: 1.5px solid var(--ink); border-radius: 8px; padding: 0 6px; transform: rotate(-3deg); }
.db-feed-empty { text-align: center; font-size: 15px; }

/* teams */
.db-teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: start; }
.db-teamcol { display: flex; flex-direction: column; gap: 10px; align-items: center; border-top: 10px solid var(--team); background: var(--paper); }
.db-teamcol.is-mine { background: var(--team-s); }
.db-teamcol h3 { font-size: 24px; color: var(--team-d); display: flex; gap: 10px; align-items: baseline; }
.db-count { font-size: 15px; color: var(--muted); }
.db-roster { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 6px; }
.db-roster li { display: flex; align-items: center; gap: 8px; font-size: 18px; padding: 2px 6px; border-radius: 10px; }
.db-roster li.is-me { background: rgba(255,255,255,.6); }
.db-roster em { font-style: normal; font-size: 14px; color: var(--muted); margin-left: auto; }
.db-youre-here { font-family: var(--display); font-size: 15px; color: var(--team-d); }

/* choose / ready / intro */
.db-who { display: flex; justify-content: center; gap: 10px 22px; flex-wrap: wrap; font-size: 17px; }
.db-who span { display: inline-flex; align-items: center; gap: 6px; }
.db-who b { color: var(--team-d); }
.db-choose, .db-ready, .db-intro { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 20px; }
.db-choose h3 { font-size: 22px; }
.db-options { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.db-option { font-family: var(--display); font-size: 28px; padding: 16px 28px 18px; background: var(--paper); border: var(--line) solid var(--ink); border-radius: var(--radius-wobble); box-shadow: -5px 6px 0 var(--lime-d); transform: rotate(-2deg); transition: transform .15s var(--ease-pop), box-shadow .15s; color: var(--ink); }
.db-option:nth-child(2) { transform: rotate(2deg); border-radius: var(--radius-wobble-2); box-shadow: -5px 6px 0 var(--purple-d); }
.db-option:hover { transform: rotate(0) translateY(-3px) scale(1.04); }
.db-option:disabled { opacity: .6; }
.db-count-big { font-family: var(--display); font-size: 84px; line-height: 1; animation: dbpulse 1s ease-in-out infinite; }
.db-intro h2 { font-size: 34px; }
.db-intro .rules { text-align: left; max-width: 560px; }
@keyframes dbpulse { 50% { transform: scale(1.08); } }
@keyframes dbpop { 0% { transform: translateX(-50%) rotate(-3deg) scale(0); } 100% { transform: translateX(-50%) rotate(-3deg) scale(1); } }

/* result */
.db-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; width: 100%; max-width: min(100%, max(560px, calc((100svh - 470px) * 8 / 3 + 40px))); margin: 0 auto; }
.db-pair-col { display: flex; flex-direction: column; gap: 6px; }
.db-pair-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--display); font-size: 18px; color: var(--team-d); }
.db-gain { font-size: 20px; color: var(--ink); background: var(--green); border: 2px solid var(--ink); border-radius: 10px; padding: 0 10px; transform: rotate(-3deg); }
.db-gain.is-zero { background: var(--paper); color: var(--muted); }
.db-credit { font-size: 16px; text-align: center; color: var(--ink-2); }
.db-next, .db-streak { text-align: center; font-size: 17px; }
.db-next span { white-space: nowrap; }
.db-streak { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--orange-d); }

/* game over */
.db-awards { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.db-award { display: flex; align-items: center; gap: 10px; background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-wobble); padding: 8px 16px 8px 10px; box-shadow: -3px 4px 0 var(--lime); }
.db-award b { display: block; font-size: 19px; }
.db-award .muted { font-size: 14px; }
.db-gallery-title { text-align: center; font-size: 22px; }
.db-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.db-gal-item { background: var(--paper); border: 2px solid var(--ink); border-radius: 14px; padding: 8px 10px 10px; }
.db-gal-word { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 14px; margin-bottom: 6px; }
.db-gal-word b { font-family: var(--display); font-size: 18px; }
.db-gal-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.db-gal-by { display: block; text-align: center; font-size: 13px; color: var(--team-d); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* spectators */
.db-watch { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.db-watch h4 { font-size: 17px; color: var(--team-d); margin-bottom: 4px; }

@media (max-width: 1000px) {
  .db-play, .db-play.has-tools { grid-template-columns: minmax(0, 1fr); }
  .db-play .db-tools { order: 2; }
  .db-play .db-mine { order: 1; }
  .db-play .db-aside { order: 3; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; }
  .db-mine .db-canvas { width: min(100%, max(300px, calc((100svh - 300px) * 4 / 3))); }
  .db-play .pad-colors { display: flex; padding: 0; border: 0; background: none; }
  .db-play .pad-row { flex-direction: row; }
  .db-play .pad-sizes, .db-play .pad-modes { display: flex; }
  .db-play .pad-modes .tool-sep { display: block; }
}
@media (max-width: 640px) {
  .db-score { gap: 6px; }
  .db-side { padding: 5px 8px 6px; }
  .db-pts { font-size: 24px; }
  .db-tname { font-size: 15px; white-space: nowrap; }
  .db-side-head { flex-wrap: wrap; gap: 0 6px; }
  .db-vs { font-size: 14px; padding: 1px 6px; }
  .db-play .db-aside { grid-template-columns: minmax(0, 1fr); }
  .db-play .db-guessbox { order: 1; }
  .db-play .db-opp { order: 2; width: 62%; margin: 0 auto; }
  .db-teams { grid-template-columns: 1fr; }
  .db-teams .db-vs.big { justify-self: center; }
  .db-pair, .db-watch { grid-template-columns: 1fr; }
  .db-option { font-size: 24px; padding: 12px 20px 14px; }
  .db-word b { font-size: 25px; }
  .swatch { width: 28px; height: 28px; }
}

/* ---------------------------------------------------------------------
   BAD ANSWERS ONLY — black prompt card, white answer cards
   --------------------------------------------------------------------- */
.badanswers .stack { gap: 16px; }

.ba-prompt {
  position: relative; padding: 22px 26px 40px; color: var(--paper);
  background: var(--ink); border: var(--line) solid var(--ink); border-radius: var(--radius-wobble);
  box-shadow: -5px 6px 0 var(--coal); transform: rotate(-.6deg);
}
.ba-prompt h2 { font-size: clamp(22px, 4.4vw, 31px); line-height: 1.3; color: var(--paper); }
.ba-prompt.is-small { padding: 14px 20px 34px; }
.ba-prompt.is-small h2 { font-size: clamp(18px, 3.4vw, 23px); }
.ba-prompt.is-winner { box-shadow: -5px 6px 0 var(--gold); animation: bapop .45s var(--ease-pop) both; }
.ba-brand {
  position: absolute; left: 26px; bottom: 11px; font-family: var(--display); font-size: 13px;
  color: rgba(255, 252, 242, .45); letter-spacing: .02em;
}
.ba-pick {
  position: absolute; right: 16px; bottom: 9px; padding: 2px 11px 3px; border-radius: 99px;
  background: var(--paper); color: var(--ink); font-family: var(--display); font-size: 14px;
}
.ba-blank {
  display: inline-block; min-width: 3.4em; height: .95em; margin: 0 .12em; vertical-align: -.08em;
  border-bottom: 3px solid var(--paper); border-radius: 0 0 3px 3px;
}
.ba-blank.is-wide { min-width: 7em; }
.ba-fill {
  display: inline; color: #ffe36b; text-decoration: underline;
  text-decoration-thickness: 3px; text-underline-offset: .18em; text-decoration-color: rgba(255, 227, 107, .5);
}
.ba-under { margin-top: 8px; font-family: var(--display); font-size: clamp(20px, 3.8vw, 26px); }

/* score chips */
.ba-scores { display: flex; flex-wrap: wrap; gap: 6px 8px; justify-content: center; }
.ba-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; max-width: 170px;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 99px; font-size: 15px;
}
.ba-chip b { font-family: var(--display); font-size: 16px; }
.ba-chip-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ba-chip-face { position: relative; display: inline-flex; }
.ba-chip.is-me { background: var(--coal-s); }
.ba-chip.is-judge { background: var(--ink); color: var(--paper); }
.ba-chip.is-away { opacity: .45; }
.ba-gavel, .ba-tick {
  position: absolute; right: -6px; bottom: -4px; width: 18px; height: 18px; display: grid; place-items: center;
  border: 2px solid var(--ink); border-radius: 50%; background: #ffe36b; color: var(--ink);
}
.ba-tick { background: var(--green); }

/* the hand */
.ba-hand { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
.ba-card {
  position: relative; min-height: 104px; padding: 12px 12px 18px; text-align: left; cursor: pointer;
  font: inherit; font-size: 17px; line-height: 1.22; color: var(--ink);
  background: #fff; border: var(--line) solid var(--ink); border-radius: 12px 15px 11px 14px;
  box-shadow: -3px 4px 0 rgba(42, 37, 34, .16); transform: rotate(var(--tilt, 0deg));
  transition: transform .16s var(--ease-pop), box-shadow .14s, background .14s;
}
.ba-card:hover:not(:disabled) { transform: rotate(0deg) translateY(-3px); box-shadow: -4px 6px 0 rgba(42, 37, 34, .2); }
.ba-card.is-on { background: #fff6c2; box-shadow: -4px 6px 0 var(--ink); transform: rotate(0deg) translateY(-5px); }
.ba-card:disabled { cursor: default; }
.ba-hand.is-idle .ba-card { opacity: .55; font-size: 15px; min-height: 86px; }
.ba-num {
  position: absolute; top: -10px; right: -9px; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--display); font-style: normal; font-size: 15px;
}
.ba-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ba-actions-foot { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.ba-hint { margin-top: -6px; }
.ba-note {
  align-self: center; max-width: 560px; padding: 7px 16px 8px; text-align: center; font-size: 16px;
  background: #fff6c2; border: 2px solid var(--ink); border-radius: 12px 16px 11px 15px; transform: rotate(-.8deg);
}
.ba-locked { font-family: var(--display); font-size: 19px; display: flex; gap: 8px; align-items: center; justify-content: center; }
.ba-wait { display: flex; gap: 16px; align-items: center; }
.ba-wait h3 { font-size: 21px; }
.ba-wait-icon {
  flex: none; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%;
  background: #ffe36b; border: var(--line) solid var(--ink); transform: rotate(-8deg);
}
.ba-later h4 { margin-bottom: 8px; font-size: 17px; }

/* judging: face-down cards */
.ba-subs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.ba-subs.is-multi { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.ba-sub {
  position: relative; min-height: 120px; padding: 12px; display: flex; flex-direction: column; gap: 8px; cursor: pointer;
  font: inherit; font-size: 17px; line-height: 1.22; text-align: left; color: var(--ink);
  background: #fff; border: var(--line) solid var(--ink); border-radius: 12px 15px 11px 14px;
  box-shadow: -3px 4px 0 rgba(42, 37, 34, .16); transform: rotate(var(--tilt, 0deg));
  transition: transform .16s var(--ease-pop), box-shadow .14s;
}
.ba-sub:disabled { cursor: default; }
.ba-sub.is-down {
  align-items: center; justify-content: center; text-align: center;
  background: repeating-linear-gradient(-45deg, var(--coal-s) 0 9px, #fff 9px 18px);
}
.ba-sub.is-down:not(:disabled):hover { transform: rotate(0deg) translateY(-3px) scale(1.02); }
.ba-back {
  padding: 6px 10px; font-family: var(--display); font-size: 15px; line-height: 1.05;
  background: var(--ink); color: var(--paper); border-radius: 8px; transform: rotate(-4deg);
}
.ba-sub em { font-style: normal; font-size: 14px; color: var(--ink-2); }
.ba-sub.is-up { animation: baflip .38s ease-out both; }
.ba-sub.is-up:hover { transform: rotate(0deg) translateY(-3px); }
.ba-sub.is-focus { background: #fff6c2; box-shadow: -4px 6px 0 var(--ink); transform: rotate(0deg) translateY(-4px); }
.ba-sub-text + .ba-sub-text { padding-top: 8px; border-top: 2px dashed rgba(42, 37, 34, .25); }

/* result */
.ba-winner { display: flex; align-items: center; justify-content: center; gap: 14px; text-align: left; animation: bapop .5s .1s var(--ease-pop) both; }
.ba-winner h3 { font-size: clamp(21px, 4vw, 26px); }
.ba-winner-face { position: relative; display: inline-flex; }
.ba-crown { position: absolute; top: -16px; left: 50%; transform: translateX(-50%) rotate(-8deg); color: var(--ink); }
.ba-crown svg { fill: #ffe36b; }
.ba-plus {
  display: inline-block; margin-left: 4px; padding: 0 9px 2px; font-size: .8em; border-radius: 99px;
  background: var(--green); border: 2px solid var(--ink); transform: rotate(4deg);
}
.ba-others h4 { margin-bottom: 6px; }
.ba-others ul { list-style: none; margin: 0; padding: 0; }
.ba-others li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1.5px dashed rgba(42, 37, 34, .2); }
.ba-others li:first-child { border-top: 0; }
.ba-others-face { flex: none; display: inline-flex; }
.ba-others-text { flex: 1; min-width: 0; font-size: 17px; }
.ba-others-text i { color: var(--muted); font-style: normal; }
.ba-others-who { flex: none; max-width: 40%; text-align: right; color: var(--ink-2); font-size: 15px; }
.ba-others-who em { font-style: normal; color: var(--muted); }

@keyframes bapop { from { opacity: 0; transform: scale(.92) rotate(-1.5deg); } to { opacity: 1; transform: none; } }
@keyframes baflip {
  0% { transform: rotate(var(--tilt, 0deg)) scaleX(.05); }
  100% { transform: rotate(var(--tilt, 0deg)) scaleX(1); }
}

@media (max-width: 640px) {
  .ba-prompt { padding: 18px 18px 36px; }
  .ba-brand { left: 18px; }
  .ba-hand { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ba-card { min-height: 92px; font-size: 16px; }
  .ba-subs, .ba-subs.is-multi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ba-subs.is-multi { grid-template-columns: minmax(0, 1fr); }
  .ba-chip-name { max-width: 70px; }
  .ba-wait { flex-direction: column; text-align: center; }
  /* big groups: just faces + points so the row stays short (names are in the tooltip) */
  .ba-scores.is-crowded { gap: 6px; }
  .ba-scores.is-crowded .ba-chip { padding-right: 8px; gap: 4px; }
  .ba-scores.is-crowded .ba-chip-name { display: none; }
  .ba-sub { min-height: 92px; }
  .ba-back { font-size: 13px; }
}
.ba-board .lb-name { flex: 1; min-width: 0; }
.ba-board .lb-score { min-width: 40px; text-align: right; font-family: var(--display); font-size: 21px; }

/* ---------------------------------------------------------------------
   Bomb party
   --------------------------------------------------------------------- */
.bp-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.bp-arena { position: relative; width: min(100%, 560px, max(320px, calc(100svh - 330px))); aspect-ratio: 1; margin-top: 4px; }
.game.bombparty .banner { padding-top: 0; }
.bp-table {
  position: absolute; inset: 13%; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 154, 107, .1) 0 42%, transparent 43%),
    radial-gradient(rgba(42, 37, 34, .07) 1.4px, transparent 1.6px) 0 0 / 16px 16px, #fff7e2;
  border: var(--line) solid var(--ink); box-shadow: -6px 8px 0 rgba(42, 37, 34, .1);
  transition: box-shadow .3s, border-color .3s;
}
.bp-arena.is-mine .bp-table { border-color: var(--flame-d); box-shadow: -6px 8px 0 var(--flame), 0 0 0 7px rgba(255, 154, 107, .22); animation: bp-glow 1.4s ease-in-out infinite; }
.bp-arena:has(.bp-kaboom) { animation: bp-quake .55s cubic-bezier(.36, .07, .19, .97); }

.bp-seat {
  position: absolute; z-index: 1; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  width: 112px; text-align: center;
}
.bp-av { position: relative; display: inline-flex; padding: 3px; border-radius: 50%; border: 3px solid transparent; transition: transform .25s var(--ease-pop), border-color .15s, background .15s; }
.bp-av svg { display: block; }
.bp-seat.is-turn .bp-av { border-color: var(--flame-d); background: var(--flame-s); transform: scale(1.14); }
.bp-seat.is-winner .bp-av { border-color: var(--gold-d); background: var(--gold-s); transform: scale(1.16); }
.bp-crown { position: absolute; top: -19px; left: 50%; transform: translateX(-50%) rotate(-10deg); }
.bp-crown .icon { fill: #ffe36b; }
.bp-name { position: relative; max-width: 100%; padding: 0 7px 1px; border-radius: 8px; background: rgba(255, 252, 242, .92); font-size: 16px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-hearts { position: relative; padding: 0 4px; border-radius: 6px; background: rgba(255, 252, 242, .85); }
.bp-seat.is-me .bp-name { color: var(--flame-d); }
.bp-hearts { display: inline-flex; gap: 1px; color: rgba(42, 37, 34, .3); }
.bp-hearts i { display: inline-flex; }
.bp-hearts i.is-on { color: var(--red-d); }
.bp-hearts i.is-on .icon { fill: var(--red); }
.bp-outtag { font-family: var(--display); font-size: 13px; color: var(--muted); }
.bp-meta { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.bp-youtag, .bp-nexttag {
  display: inline-block; padding: 0 6px 1px; border-radius: 999px;
  font-family: var(--display); font-size: 12px; line-height: 1.4; letter-spacing: .02em;
}
.bp-youtag { background: rgba(255, 252, 242, .92); color: var(--ink-2); }
.bp-nexttag { background: rgba(255, 252, 242, .92); border: 2px dashed rgba(42, 37, 34, .35); color: var(--ink-2); }
.bp-seat.is-next .bp-av { border-color: rgba(214, 97, 47, .35); }
.bp-seat.is-out .bp-av, .bp-seat.is-gone .bp-av { filter: grayscale(1); opacity: .45; }
.bp-seat.is-out .bp-name { color: var(--muted); }

.bp-said, .bp-plus {
  position: absolute; z-index: 3; top: 100%; left: 50%; translate: -50% 0;
  padding: 1px 9px; border: 2px solid var(--ink); border-radius: 10px; background: var(--green-s);
  font-family: var(--display); font-size: 15px; text-transform: uppercase; white-space: nowrap;
  animation: bp-said 2.4s ease-out forwards; pointer-events: none;
}
.bp-said mark, .bp-live mark { background: var(--flame); color: var(--ink); border-radius: 4px; padding: 0 1px; }
.bp-plus { top: -12px; background: var(--pink-s); display: inline-flex; align-items: center; gap: 2px; }
.bp-plus .icon { fill: var(--red); color: var(--red-d); }
.bp-burst {
  position: absolute; z-index: 4; top: 18%; left: 50%; translate: -50% -50%;
  display: inline-flex; align-items: center; gap: 2px; padding: 2px 10px 3px;
  border: var(--line) solid var(--ink); border-radius: 12px; background: var(--red-s);
  font-family: var(--display); font-size: 18px; color: var(--red-d); white-space: nowrap;
  animation: bp-burst 1.8s var(--ease-pop) forwards; pointer-events: none;
}
.bp-burst .icon { fill: var(--red); color: var(--red-d); }

.bp-center { position: absolute; left: 50%; top: 50%; width: 47%; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 2; }
.bp-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.bp-ring circle { fill: none; }
.bp-ring-track { stroke: rgba(42, 37, 34, .16); stroke-width: 2.2; stroke-dasharray: 1.2 2.6; stroke-linecap: round; }
.bp-ring-fuse { stroke: #d9a35b; stroke-width: 4.6; stroke-linecap: round; filter: drop-shadow(0 0 0 #2a2522) drop-shadow(-.6px .8px 0 #2a2522); transition: stroke .3s; }
.bp-center.is-hot .bp-ring-fuse { stroke: var(--red); }
.bp-center.is-secret .bp-ring-fuse { stroke-dasharray: 100 100; }
.bp-spark-arm { position: absolute; inset: 0; pointer-events: none; }
.bp-center.is-secret .bp-spark-arm { animation: bp-orbit 5s linear infinite; }
.bp-spark {
  position: absolute; left: 50%; top: 5%; width: 26px; height: 26px; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 16%, #ffe36e 28% 42%, rgba(255, 140, 80, .9) 55%, transparent 72%);
  animation: bp-flicker .28s steps(2) infinite;
}
.bp-center.is-hot .bp-spark { width: 36px; height: 36px; }
.bp-center.is-ready .bp-spark { opacity: .35; animation: none; }
.bp-bomb { position: absolute; left: 13%; top: 11%; width: 74%; height: 74%; animation: bp-wobble 2.4s ease-in-out infinite; }
.bp-center.is-hot .bp-bomb { animation: bp-shake .16s linear infinite; }
.bp-bomb-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.bp-fuse-tip { animation: bp-tip .5s ease-in-out infinite alternate; }
.bp-prompt {
  position: absolute; left: 48.5%; top: 57%; translate: -50% -50%;
  min-width: 40%; padding: 2px 12px 4px; text-align: center;
  background: #fffcf2; border: var(--line) solid var(--ink); border-radius: 12px 15px 11px 14px;
  box-shadow: -3px 4px 0 var(--flame);
  font-family: var(--display); font-size: clamp(24px, 6.8vw, 40px); letter-spacing: .05em; text-transform: uppercase;
  animation: popin .3s var(--ease-pop);
}
.bp-secs {
  position: absolute; left: 50%; top: 86%; translate: -50% -50%; z-index: 1;
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 10px 2px 8px;
  background: #fff; border: 2.5px solid var(--ink); border-radius: 999px;
  font-family: var(--display); font-size: 17px; font-variant-numeric: tabular-nums; color: var(--ink);
  transition: background .2s, color .2s;
}
.bp-secs b { min-width: 1.2ch; text-align: center; font-weight: 400; }
.bp-center.is-hot .bp-secs { background: var(--red); color: #fff; animation: bp-throb .5s ease-in-out infinite; }
.bp-count { position: absolute; left: 48.5%; top: 57%; translate: -50% -50%; }
.bp-count b {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: #fffcf2; border: var(--line) solid var(--ink); box-shadow: -3px 4px 0 var(--flame);
  font-family: var(--display); font-size: 38px; font-weight: 400; animation: bp-countpop .5s var(--ease-pop);
}
.bp-count b.is-pop { animation: bp-countpop .5s var(--ease-pop); }
.bp-kaboom { position: absolute; inset: -14%; z-index: 6; display: grid; place-items: center; align-content: center; gap: 2%; pointer-events: none; animation: bp-kaboom 1.3s var(--ease-pop) forwards; }
.bp-kaboom-flash {
  position: absolute; inset: 14%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 252, 242, .8) 0 10%, rgba(255, 227, 110, .45) 32%, rgba(255, 154, 107, 0) 62%);
  animation: bp-kaboom-flash .45s ease-out forwards;
}
.bp-kaboom-burst { position: absolute; inset: 0; width: 100%; height: 100%; animation: bp-kaboom-spin 1.6s ease-out forwards; filter: drop-shadow(-5px 7px 0 rgba(42, 37, 34, .14)); }
.bp-kaboom-sparks { position: absolute; inset: 0; }
.bp-kaboom-sparks i {
  position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border: 2.4px solid var(--ink); border-radius: 50%; background: var(--flame);
  animation: bp-kaboom-spark .95s cubic-bezier(.2, .7, .3, 1) forwards;
}
.bp-kaboom-sparks i:nth-child(2n) { width: 9px; height: 9px; background: #ffd75e; }
.bp-kaboom-word {
  position: relative; z-index: 2; padding: 1px 15px 5px;
  font-family: var(--display); font-weight: 400; font-size: clamp(26px, 7vw, 42px); letter-spacing: .02em; color: var(--ink);
  background: #fffcf2; border: var(--line) solid var(--ink); border-radius: 999px;
  box-shadow: -4px 6px 0 var(--flame-d); rotate: -7deg; animation: bp-boom-word .5s var(--ease-pop) both;
}
.bp-kaboom-who {
  position: relative; z-index: 2; order: -1;
  display: inline-flex; align-items: center; gap: 3px; padding: 1px 10px 2px;
  background: var(--pink-s); border: 2px solid var(--ink); border-radius: 999px;
  font-family: var(--hand); font-size: 17px; color: var(--ink);
  rotate: 2deg; animation: bp-boom-word .5s .08s var(--ease-pop) both;
}
.bp-kaboom-who .icon { fill: var(--red); color: var(--red-d); }
.bp-center.is-over .bp-bomb { animation: none; opacity: .9; }
.bp-type.is-watching { gap: 12px; padding: 6px 18px; border: var(--line) dashed rgba(42, 37, 34, .25); border-radius: 999px; }
.bp-live-who { flex: none; display: inline-flex; align-items: center; gap: 6px; max-width: 40%; }
.bp-live-who b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-live {
  flex: 1; min-width: 0; display: flex; align-items: center;
  font-family: var(--display); font-size: clamp(20px, 5vw, 26px); text-transform: uppercase; letter-spacing: .03em;
  white-space: nowrap; overflow: hidden;
}
.bp-live-wait { color: var(--muted); font-family: var(--hand); text-transform: none; font-size: 18px; letter-spacing: 0; }
.bp-caret { flex: none; width: 3px; height: 24px; margin-left: 2px; border-radius: 2px; background: var(--flame-d); animation: gf-blink 1s steps(1) infinite; }
.bp-arrow { position: absolute; inset: 0; z-index: 1; transform: rotate(var(--a)); transition: transform .32s var(--ease-pop); pointer-events: none; }
.bp-arrow svg { position: absolute; left: 50%; top: 19.6%; width: 30px; height: 26px; translate: -50% 0; overflow: visible; }
.bp-arrow path { fill: var(--flame); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }

.bp-type { width: min(100%, 470px); min-height: 64px; display: flex; align-items: center; justify-content: center; }
.bp-type p { margin: 0; text-align: center; }
.bp-type.is-mine {
  position: relative; gap: 10px; padding: 6px 6px 6px 18px;
  background: #fff; border: var(--line) solid var(--ink); border-radius: 999px; box-shadow: -4px 5px 0 var(--flame);
  animation: gf-nudge .45s var(--ease-pop);
}
.bp-yourturn {
  position: absolute; left: 22px; top: 0; translate: 0 -55%; padding: 0 9px 1px;
  background: var(--flame); border: 2px solid var(--ink); border-radius: 8px;
  font-family: var(--display); font-size: 13px; transform: rotate(-3deg);
}
.bp-type input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-family: var(--display); font-size: 27px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); }
.bp-type input::placeholder { text-transform: none; letter-spacing: 0; font-family: var(--hand); font-size: 19px; color: #b9b0a3; }
.bp-type .btn { flex: none; }
.bp-type.has-err { box-shadow: -4px 5px 0 var(--red); }
.bp-err {
  position: absolute; top: calc(100% + 9px); left: 50%; translate: -50% 0; z-index: 3;
  padding: 2px 10px; border: 2px solid var(--red-d); border-radius: 10px; background: var(--red-s);
  color: var(--red-d); font-size: 16px; white-space: nowrap; animation: shake .4s;
}
.bp-alpha { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; max-width: 660px; margin-top: 4px; }
.bp-alpha span {
  width: 24px; height: 28px; display: grid; place-items: center;
  border: 2px solid rgba(42, 37, 34, .2); border-radius: 6px 8px 6px 7px;
  font-family: var(--display); font-size: 14px; text-transform: uppercase; color: var(--muted);
}
.bp-alpha span.is-on { background: var(--flame); border-color: var(--ink); color: var(--ink); }
.bp-alpha em { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; font-style: normal; font-size: 15px; color: var(--ink-2); }
.bp-alpha em .icon { fill: var(--red); color: var(--red-d); }
.bp-last { text-align: center; margin: 0; }

.bp-arena.is-crowded .bp-seat { width: 88px; }
.bp-arena.is-crowded .bp-av svg { width: 44px; height: 44px; }
.bp-arena.is-crowded .bp-name { font-size: 14px; }
.bp-arena.is-packed .bp-seat { width: 74px; }
.bp-arena.is-packed .bp-av svg { width: 38px; height: 38px; }
.bp-arena.is-packed .bp-hearts .icon { width: 12px; height: 12px; }

@keyframes bp-shake { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-2px, 1px) rotate(-3deg); } 50% { transform: translate(2px, -1px) rotate(2deg); } 75% { transform: translate(-1px, -1px) rotate(-1deg); } 100% { transform: translate(0, 0) rotate(0); } }
@keyframes bp-throb { 50% { scale: 1.15; } }
@keyframes bp-orbit { to { transform: rotate(360deg); } }
@keyframes bp-tip { to { opacity: .4; } }
@keyframes bp-glow { 50% { box-shadow: -6px 8px 0 var(--flame), 0 0 0 12px rgba(255, 154, 107, .12); } }
@keyframes bp-quake { 10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(4px, -2px); } 30%, 50%, 70% { transform: translate(-6px, 3px); } 40%, 60% { transform: translate(6px, -2px); } }
@keyframes bp-kaboom { 0% { scale: .35; opacity: 0; rotate: -14deg; } 10% { scale: 1.08; opacity: 1; rotate: 2deg; } 20% { scale: 1; rotate: 0deg; } 74% { opacity: 1; } 100% { scale: 1.12; opacity: 0; } }
@keyframes bp-kaboom-spin { 0% { rotate: 0deg; scale: .55; } 14% { scale: 1.06; } 30% { scale: 1; } 100% { rotate: 26deg; scale: 1.1; } }
@keyframes bp-kaboom-flash { 0% { opacity: .9; scale: .35; } 45% { opacity: .55; } 100% { opacity: 0; scale: 1.15; } }
@keyframes bp-kaboom-spark { 0% { opacity: 0; transform: rotate(var(--a)) translateY(-16px) scale(.3); } 18% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-105px) scale(.8); } }
@keyframes bp-boom-word { 0% { scale: .5; rotate: -20deg; opacity: 0; } 60% { scale: 1.08; rotate: -4deg; opacity: 1; } 100% { scale: 1; rotate: -7deg; opacity: 1; } }
@keyframes bp-countpop { 0% { scale: .4; } 60% { scale: 1.15; } 100% { scale: 1; } }
@keyframes bp-wobble { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(-2px); } }
@keyframes bp-flicker { 0% { transform: scale(.75) rotate(0); } 100% { transform: scale(1.2) rotate(40deg); } }
@keyframes bp-boom { 0% { transform: scale(1.25); } 30% { transform: scale(.9) rotate(-8deg); } 60% { transform: scale(1.06) rotate(5deg); } 100% { transform: none; } }
@keyframes bp-burst { 0% { scale: .2; opacity: 0; } 15% { scale: 1.25; opacity: 1; } 30% { scale: 1; } 80% { opacity: 1; } 100% { scale: 1.05; opacity: 0; } }
@keyframes bp-said { 0% { opacity: 0; translate: -50% 6px; } 10% { opacity: 1; translate: -50% 0; } 75% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 560px) {
  .bp-seat { width: 84px; }
  .bp-av svg { width: 40px; height: 40px; }
  .bp-name { font-size: 13.5px; }
  .bp-hearts .icon { width: 12px; height: 12px; }
  .bp-arena.is-crowded .bp-seat { width: 64px; }
  .bp-arena.is-crowded .bp-av svg { width: 32px; height: 32px; }
  .bp-arena.is-crowded .bp-name { font-size: 12px; }
  .bp-arena.is-packed .bp-seat { width: 54px; }
  .bp-arena.is-packed .bp-av svg { width: 28px; height: 28px; }
  .bp-arena.is-packed .bp-name { font-size: 11px; }
  .bp-arena.is-packed .bp-hearts .icon, .bp-arena.is-crowded .bp-hearts .icon { width: 10px; height: 10px; }
  .bp-said, .bp-plus { font-size: 12px; padding: 0 6px; }
  .bp-type input { font-size: 22px; }
  .bp-spark { width: 18px; height: 18px; }
  .bp-center.is-hot .bp-spark { width: 26px; height: 26px; }
  .bp-arrow svg { width: 22px; height: 19px; }
  .bp-burst { font-size: 14px; padding: 1px 7px; }
  .bp-secs { font-size: 14px; padding: 0 8px 1px 6px; }
  .bp-count b { width: 46px; height: 46px; font-size: 28px; }
  .bp-alpha span { width: 21px; height: 25px; font-size: 13px; }
}

/* ---------------------------------------------------------------------
   Race games: word race, connections race, wikirace
   --------------------------------------------------------------------- */
.game.wordrace, .game.connections { max-width: 1000px; }
.game.wikirace { max-width: 1180px; }
.room-page.game-wikirace { max-width: 1240px; }
.race-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 272px); gap: 18px; align-items: start; width: 100%; min-width: 0; }
.race-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.race-side { display: flex; flex-direction: column; gap: 14px; width: 100%; min-width: 0; }
.race-list {
  list-style: none; width: 100%; max-width: 100%; min-width: 0; margin: 0; padding: 10px; display: grid; gap: 4px; box-sizing: border-box;
  background: var(--paper); border: var(--line) solid var(--ink); border-radius: var(--radius-wobble); box-shadow: var(--shadow-ink);
}
.race-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(0, 76px); grid-template-rows: auto auto; align-items: center; gap: 2px 8px; min-width: 0; padding: 5px 6px; border-radius: 12px; }
.race-row.is-me { background: var(--paper-2); }
.race-row.is-done { background: var(--green-s); }
.race-row.is-failed .race-who, .race-row.is-gone, .race-row.is-away { opacity: .55; }
.race-av { grid-column: 1; grid-row: 1 / span 2; display: inline-flex; flex: none; }
.race-who { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.race-who b { min-width: 0; max-width: 100%; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.race-who b em { font-style: normal; font-size: 14px; color: var(--muted); }
.race-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; min-width: 0; max-width: 100%; color: var(--ink-2); font-size: 13px; overflow-wrap: anywhere; }
.race-row-side { grid-column: 3; grid-row: 1; justify-self: end; min-width: 0; max-width: 100%; display: inline-flex; }
.race-row > .race-place { grid-column: 3; grid-row: 2; justify-self: end; }
.race-place {
  flex: none; padding: 1px 8px 2px; border: 2px solid var(--ink); border-radius: 999px; background: #fff;
  font-family: var(--display); font-size: 13px; transform: rotate(-4deg);
}
.race-place.is-p1 { background: var(--gold); }
.race-place.is-p2 { background: #e2e2ea; }
.race-place.is-p3 { background: #f2c9a1; }
.race-lb-right { flex: none; display: flex; align-items: center; gap: 8px; }
.race-lb .lb-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.race-lb .lb-name em { font-style: normal; font-size: 14px; color: var(--muted); }
.race-side .race-lb { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; padding: 10px; gap: 4px; }
.race-side .race-lb li { min-width: 0; gap: 8px; padding: 5px 6px; }
.race-side .race-lb .lb-rank { width: 16px; }
.race-side .race-lb .lb-name { font-size: 16px; }
.race-side .race-lb-right { flex-direction: column; align-items: flex-end; gap: 1px; }
.race-side .race-lb .lb-gain { font-size: 12px; padding: 0 6px; }
.race-final .leaderboard { width: 100%; max-width: 520px; margin: 0 auto; }

/* word race */
.wr-main { align-items: center; }
/* your board sits on a sheet of paper, rivals' boards shrink into the side list */
.wr-board {
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 20px 20px;
  background: var(--paper); border: var(--line) solid var(--ink); border-radius: var(--radius-wobble); box-shadow: var(--shadow-ink);
}
.wr-status { margin: 0; display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 16px; color: var(--ink-2); }
.wr-status b { display: inline-block; padding: 0 8px 1px; margin-left: 2px; border: 2px solid var(--ink); border-radius: 999px; background: var(--gold); color: var(--ink); font-weight: normal; font-size: 14px; }
.wr-status.is-good { color: var(--green-d); }
.wr-status.is-bad { color: var(--red-d); }
.wr-pips { display: inline-flex; gap: 4px; }
.wr-pips i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); background: var(--sun); transition: background .3s, border-color .3s; }
.wr-pips i.is-used { background: transparent; border-color: rgba(42, 37, 34, .22); }
.wr-pips i.is-win { background: var(--green); border-color: var(--ink); }
.wr-msg, .cx-msg { margin: 0; text-align: center; font-size: 19px; color: var(--ink-2); }
.wr-msg.is-good, .cx-msg.is-good { font-family: var(--display); font-size: 17px; color: var(--green-d); }
.wr-msg.is-bad, .cx-msg.is-bad { font-family: var(--display); font-size: 17px; color: var(--red-d); }
.wr-grid { display: grid; gap: 7px; }
.wr-row { display: grid; grid-template-columns: repeat(5, auto); gap: 7px; justify-content: center; }
.wr-row.is-shake { animation: shake .4s; }
.wr-tile {
  width: clamp(44px, 12.4vw, 60px); aspect-ratio: 1; display: grid; place-items: center;
  border: var(--line) solid #d4cbbd; border-radius: 10px 13px 9px 12px; background: #fff;
  font-family: var(--display); font-size: clamp(22px, 6vw, 30px); text-transform: uppercase; color: var(--ink);
}
.wr-tile.has-letter { border-color: var(--ink); animation: wr-pop .12s ease-out; }
.wr-row.is-empty .wr-tile { background: transparent; border-style: dashed; }
.wr-tile.is-g, .wr-tile.is-y, .wr-tile.is-b { border-color: var(--ink); }
.wr-tile.is-g { background: var(--green); }
.wr-tile.is-y { background: var(--gold); }
.wr-tile.is-b { background: #aaa195; color: #fffcf2; }
.wr-tile.is-flip { animation: wr-flip .45s calc(var(--i) * .11s) ease-out both; }
/* hand-cut tiles: every one a little different, coloured ones get a chunky shadow */
.wr-row .wr-tile:nth-child(2n) { border-radius: 13px 10px 12px 9px; }
.wr-row .wr-tile:nth-child(3n) { border-radius: 11px 13px 10px 14px; }
.wr-tile.is-g, .wr-tile.is-y, .wr-tile.is-b { box-shadow: -2px 3px 0 var(--tsh); }
.wr-tile.is-g { --tsh: var(--green-d); }
.wr-tile.is-y { --tsh: var(--gold-d); }
.wr-tile.is-b { --tsh: #7f776c; }
.wr-row.is-current .wr-tile { border-color: #cbc1b1; }
.wr-row.is-current .wr-tile.has-letter { border-color: var(--ink); box-shadow: -2px 3px 0 rgba(42, 37, 34, .16); }
.wr-tile.is-caret { border-color: var(--sun-d) !important; }
.wr-tile.is-caret { position: relative; }
.wr-tile.is-caret::after { content: ''; position: absolute; left: 28%; right: 28%; bottom: 17%; height: 3px; border-radius: 2px; background: var(--ink); animation: wr-blink 1.05s steps(1) infinite; }
.wr-row.is-win .wr-tile { animation: wr-flip .45s calc(var(--i) * .11s) ease-out both, wr-win .55s calc(1s + var(--i) * .08s) var(--ease-pop) both; }
@keyframes wr-win { 40% { transform: translateY(-14px) rotate(-5deg); } 75% { transform: translateY(2px); } }
@keyframes wr-blink { 50% { opacity: 0; } }
.wr-answer .wr-tile { box-shadow: -3px 4px 0 var(--green-d); animation: wr-flip .45s calc(var(--i) * .11s) ease-out both, wr-win .55s calc(.9s + var(--i) * .08s) var(--ease-pop) both; }
.wr-answer .wr-tile { width: clamp(46px, 12vw, 58px); }
.wr-keys { display: grid; gap: 7px; width: 100%; max-width: 520px; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.wr-krow { display: flex; gap: 5px; justify-content: center; }
.wr-key {
  flex: 1 1 0; min-width: 0; max-width: 46px; height: 54px; padding: 0; cursor: pointer;
  border: 2px solid var(--ink); border-radius: 9px 11px 8px 10px; background: var(--paper); color: var(--ink);
  font-family: var(--display); font-size: 18px; text-transform: uppercase; box-shadow: 0 3px 0 rgba(42, 37, 34, .18);
}
.wr-key { box-shadow: -2px 3px 0 rgba(42, 37, 34, .2); transition: transform .08s, background .3s; }
.wr-key:active { transform: translate(-1px, 2px); box-shadow: none; }
.wr-key.is-enter { text-transform: none; font-size: 15px; background: var(--sun); }
.wr-key.is-g { box-shadow: -2px 3px 0 var(--green-d); }
.wr-key.is-y { box-shadow: -2px 3px 0 var(--gold-d); }
.race-row-side { flex: none; display: inline-flex; }
.wr-side .wr-mini { gap: 1.5px; }
.wr-side .wr-mrow { grid-template-columns: repeat(5, 7px); gap: 1.5px; }
.wr-side .wr-mrow i { width: 7px; height: 7px; border-width: 1px; border-radius: 1.5px; }
.wr-rivals { display: none; }
.wr-rival { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 4px; background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; }
.wr-rival.is-done { background: var(--green-s); }
.wr-rival.is-failed { opacity: .6; }
.wr-rival .race-place { position: absolute; top: -10px; right: -10px; transform: scale(.8); }
.wr-mini.is-tiny { gap: 1px; }
.wr-mini.is-tiny .wr-mrow { grid-template-columns: repeat(5, 5px); gap: 1px; }
.wr-mini.is-tiny .wr-mrow i { width: 5px; height: 5px; border-width: 1px; border-radius: 1px; }
.wr-key.is-wide { flex-grow: 1.6; max-width: 74px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.wr-key.is-g { background: var(--green); }
.wr-key.is-y { background: var(--gold); }
.wr-key.is-b { background: #b9b0a3; color: #fffcf2; border-color: rgba(42, 37, 34, .55); box-shadow: none; }
.wr-mini { display: grid; gap: 2px; }
.wr-mrow { display: grid; grid-template-columns: repeat(5, 10px); gap: 2px; }
.wr-mrow i { width: 10px; height: 10px; border: 1.5px solid rgba(42, 37, 34, .22); border-radius: 2px; background: #fff; font-style: normal; }
.wr-mrow i.is-g, .wr-mrow i.is-y, .wr-mrow i.is-b { border-color: var(--ink); }
.wr-mrow i.is-g { background: var(--green); }
.wr-mrow i.is-y { background: var(--gold); }
.wr-mrow i.is-b { background: #aaa195; color: #fffcf2; }
.wr-mini.is-big { gap: 3px; }
.wr-mini.is-big .wr-mrow { grid-template-columns: repeat(5, 22px); gap: 3px; }
.wr-mini.is-big .wr-mrow i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 4px; font-family: var(--display); font-size: 13px; text-transform: uppercase; }
.wr-results { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; }
.wr-res { padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.wr-res.is-solved { box-shadow: -4px 5px 0 var(--green); }
.wr-res-head, .wk-res-head { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; }
.wr-res-head b, .wk-res-head b { flex: 1; min-width: 0; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-res small { font-size: 14px; color: var(--ink-2); }
.race-pts { list-style: none; margin: 2px 0 0; padding: 6px 0 0; width: 100%; border-top: 2px dashed rgba(43, 36, 30, .2); display: flex; flex-direction: column; gap: 1px; font-size: 14px; }
.race-pts li { display: flex; justify-content: space-between; gap: 8px; color: var(--ink-2); }
.race-pts li b { color: var(--ink); font-variant-numeric: tabular-nums; }
.race-pts .is-first b, .race-pts .is-speed b { color: #c06a00; }
.race-pts .is-total { margin-top: 2px; padding-top: 3px; border-top: 2px solid var(--ink); color: var(--ink); font-weight: 700; }
.race-pts.is-none { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); }
.cx-results { margin-top: 14px; }
.cx-found { display: flex; gap: 6px; }
.cx-found i { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--ink); }
.cx-found i.is-miss { background: transparent; border-style: dashed; opacity: .35; }
@keyframes wr-flip { 0% { transform: rotateX(90deg); } 100% { transform: none; } }
@keyframes wr-pop { 50% { transform: scale(1.08); } }

/* connections race */
.cx-board { display: grid; gap: 8px; }
.cx-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; container-type: inline-size; }
.cx-tile {
  min-height: 72px; padding: 6px 4px; cursor: pointer;
  border: var(--line) solid var(--ink); border-radius: 12px 15px 11px 14px; background: var(--paper-2); color: var(--ink);
  font-family: var(--display); line-height: 1.1; text-transform: uppercase; overflow-wrap: anywhere;
  /* tile text width ≈ (grid − gaps) / 4 − padding; measured: ~.72em per --n unit, plus a little slack */
  --fit: calc(((100cqi - 3 * var(--cx-gap, 8px)) / 4 - var(--cx-pad, 14px)) / (var(--n, 6) * .76));
  font-size: min(17px, var(--fit));
  box-shadow: 0 3px 0 rgba(42, 37, 34, .14); transition: transform .12s, background .12s, color .12s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.cx-tile:hover:not(:disabled) { transform: translateY(-2px); }
.cx-tile.is-sel { background: var(--coal-d); color: #fff; transform: translateY(1px); box-shadow: none; }
.cx-tile.is-shake { animation: shake .45s; }
.cx-tile:disabled { cursor: default; }
.cx-group {
  min-height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 8px 12px; text-align: center; border: var(--line) solid var(--ink); border-radius: 13px 16px 12px 15px;
}
.cx-group b { font-family: var(--display); font-size: 16px; text-transform: uppercase; }
.cx-group span { font-size: 18px; line-height: 1.2; text-transform: uppercase; }
.cx-group.is-fresh { animation: cx-in .5s var(--ease-pop); }
.cx-l0 { background: #ffe36b; }
.cx-l1 { background: var(--green); }
.cx-l2 { background: var(--blue); }
.cx-l3 { background: var(--grape); }
.cx-controls { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cx-mistakes { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; color: var(--ink-2); }
.cx-dots { display: inline-flex; gap: 4px; }
.cx-dots i { width: 11px; height: 11px; border: 2px solid var(--ink-2); border-radius: 50%; }
.cx-dots i.is-on { background: var(--ink-2); }
.cx-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cx-prog { display: inline-flex; gap: 3px; }
.cx-prog i { width: 13px; height: 13px; border: 2px solid rgba(42, 37, 34, .25); border-radius: 3px; }
.cx-prog i[class] { border-color: var(--ink); }
.cx-out { font-style: normal; font-family: var(--display); font-size: 13px; color: var(--red-d); }
@keyframes cx-in { from { transform: scale(.94); opacity: .3; } }

/* wikirace */
.wk-head { display: flex; flex-direction: column; gap: 8px; }
.wk-goal { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }
.wk-from, .wk-to {
  display: flex; flex-direction: column; min-width: 0; max-width: 100%; padding: 5px 14px 6px;
  background: #fff; border: var(--line) solid var(--ink); border-radius: var(--radius-wobble);
}
.wk-to { background: var(--stone-s); box-shadow: -4px 5px 0 var(--stone); }
.wk-from small, .wk-to small { font-size: 13px; line-height: 1; color: var(--muted); }
.wk-from b, .wk-to b { font-family: var(--display); font-size: 19px; overflow-wrap: anywhere; }
.wk-goal.is-small b { font-size: 16px; }
.wk-arrow { display: inline-flex; color: var(--ink-2); }
.wk-blurb { max-width: 640px; margin: 0 auto; text-align: center; font-size: 16px; line-height: 1.3; color: var(--ink-2); }
.wk-score-rule { max-width: 720px; margin: 0 auto; padding: 5px 9px; border: 1px dashed rgba(42,37,34,.24); border-radius: 999px; color: var(--muted); font: 11px/1.35 var(--display); text-align: center; }
.wk-res .race-pts { margin-top: 3px; }
.wk-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }
.wk-clicks { font-size: 18px; margin-right: 4px; }
.wk-clicks b { font-family: var(--display); font-size: 22px; }
.wk-page { overflow: hidden; background: #fff; border: var(--line) solid var(--ink); border-radius: 16px 20px 15px 19px; box-shadow: var(--shadow-ink); }
.wk-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 12px 18px 8px; border-bottom: 2px solid rgba(42, 37, 34, .1); }
.wk-title h3 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 26px; }
.wk-loading { font-size: 15px; color: var(--muted); }
.wk-done { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 10px 14px 0; padding: 8px 12px; border-radius: 10px; background: var(--paper-2); font-size: 17px; text-align: center; }
.wk-done.is-good { background: var(--green-s); }
.wk-done.is-bad { background: var(--red-s); }
.wk-article {
  height: clamp(320px, calc(100svh - 445px), 760px); overflow-y: auto; padding: 10px 18px 26px; overscroll-behavior: contain;
  font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 15.5px; line-height: 1.55; color: #202122;
  overflow-wrap: break-word;
}
.wk-page.is-loading .wk-article { opacity: .5; pointer-events: none; }
.wk-article p { margin: 0 0 .8em; }
.wk-article h2 { margin: 1.1em 0 .4em; padding-bottom: 2px; border-bottom: 1px solid #c8ccd1; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 22px; }
.wk-article h3 { margin: 1em 0 .3em; font-size: 17px; font-weight: 700; }
.wk-article h4, .wk-article h5, .wk-article h6 { margin: .8em 0 .3em; font-size: 15.5px; font-weight: 700; }
.wk-article ul, .wk-article ol { margin: .3em 0 .8em 1.5em; padding: 0; }
.wk-article dl { margin: .3em 0 .8em; }
.wk-article dt { font-weight: 700; }
.wk-article dd { margin-left: 1.5em; }
.wk-article blockquote { margin: .6em 1.5em; }
.wk-article img { max-width: 100%; height: auto; }
.wk-article table { display: block; max-width: 100%; overflow-x: auto; margin: .6em 0; border-collapse: collapse; font-size: 14px; }
.wk-article th, .wk-article td { padding: 3px 6px; border: 1px solid #c8ccd1; text-align: left; vertical-align: top; }
.wk-article .wk-infobox { display: table; float: right; clear: right; width: 290px; max-width: 46%; margin: 0 0 12px 18px; background: #f8f9fa; border: 1px solid #c8ccd1; font-size: 13px; line-height: 1.4; }
.wk-article .wk-infobox th, .wk-article .wk-infobox td { border: 0; border-top: 1px solid #eaecf0; }
.wk-article figure, .wk-article .wk-thumb { max-width: 260px; margin: .4em 0 .9em; }
.wk-article .wk-right { float: right; clear: right; margin-left: 18px; }
.wk-article .wk-left { float: left; clear: left; margin-right: 18px; }
.wk-article figcaption, .wk-article .wk-caption { font-size: 13px; line-height: 1.35; color: #54595d; }
.wk-article .wk-hatnote { padding-left: 1.6em; margin-bottom: .6em; font-style: italic; color: #54595d; }
.wk-link { color: #3366cc; text-decoration: none; border-radius: 3px; cursor: pointer; }
.wk-link:hover { text-decoration: underline; background: var(--stone-s); }
.wk-page.is-locked .wk-link { color: inherit; pointer-events: none; }
.wk-results { display: grid; gap: 10px; }
.wk-res { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; }
.wk-res.is-done { box-shadow: -4px 5px 0 var(--green); }
.wk-res-head small { flex: none; font-size: 15px; color: var(--ink-2); }
.wk-path { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 2px; }
.wk-path i { display: inline-flex; color: var(--muted); }
.wk-chip { padding: 1px 9px 2px; border: 2px solid rgba(42, 37, 34, .22); border-radius: 999px; background: #fff; font-size: 15px; }
.wk-chip.is-start { border-color: var(--ink); }
.wk-chip.is-end { background: var(--green); border-color: var(--ink); }

@media (max-width: 900px) {
  .race-layout { grid-template-columns: minmax(0, 1fr); }
  .wr-rivals { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
  .game.wordrace .wr-side { display: none; }
  .wr-board { padding: 10px 12px 14px; gap: 10px; }
  .wk-article { height: 68vh; padding: 8px 12px 22px; font-size: 15px; }
  .wk-article .wk-infobox { display: block; float: none; width: auto; max-width: none; margin: 0 0 12px; overflow-x: auto; }
  .wk-article .wk-right, .wk-article .wk-left { float: none; margin: 0 auto .8em; }
  .wk-title h3 { font-size: 22px; }
}
@media (max-width: 560px) {
  .wr-key { height: 50px; font-size: 16px; }
  .wr-krow { gap: 4px; }
  .cx-grid, .cx-board { gap: 6px; }
  .cx-tile { min-height: 62px; font-size: min(14px, var(--fit)); padding: 4px 2px; --cx-gap: 6px; --cx-pad: 10px; }
  .cx-group { min-height: 62px; padding: 6px 8px; }
  .cx-group b { font-size: 14px; }
  .cx-group span { font-size: 15px; }
  .wr-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wr-mini.is-big .wr-mrow { grid-template-columns: repeat(5, 19px); }
  .wr-mini.is-big .wr-mrow i { width: 19px; height: 19px; font-size: 11px; }
}

/* ===================================================================
   category blitz
   =================================================================== */
.game.blitz { max-width: 1000px; }
.cb-main { gap: 16px; }
.cb-head { display: flex; align-items: center; gap: 18px; }
.cb-head.is-result { justify-content: center; gap: 12px; }
.cb-head-text { display: flex; flex-direction: column; min-width: 0; }
.cb-head-text .kicker { margin: 0; }
.cb-head-text b { font-family: var(--display); font-size: 26px; line-height: 1.15; }
.cb-head-text small { font-size: 16px; color: var(--ink-2); }
.cb-letter {
  flex: none; width: 88px; height: 88px; display: grid; place-items: center;
  background: var(--cherry); border: var(--line) solid var(--ink); border-radius: 22px 26px 20px 25px;
  box-shadow: -5px 6px 0 var(--cherry-d); transform: rotate(-5deg);
  animation: cb-drop .6s var(--ease-pop) both;
}
.cb-letter span { font-family: var(--display); font-size: 58px; line-height: 1; margin-top: -4px; }
.cb-letter.is-small { width: 58px; height: 58px; border-radius: 15px 18px 14px 17px; box-shadow: -3px 4px 0 var(--cherry-d); animation: none; }
.cb-letter.is-small span { font-size: 36px; margin-top: -3px; }
@keyframes cb-drop { 0% { transform: scale(.2) rotate(-50deg); opacity: 0; } 100% { transform: rotate(-5deg); opacity: 1; } }

.cb-sheet { padding: 6px 18px; }
.cb-row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; column-gap: 12px;
  padding: 11px 0; border-bottom: 2px dashed rgba(42, 37, 34, .13);
}
.cb-row:last-child { border-bottom: 0; }
.cb-num {
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  border: 2px solid var(--ink); background: var(--paper-2); font-family: var(--display); font-size: 14px;
  transition: background .2s;
}
.cb-row.is-ok .cb-num { background: var(--green); }
.cb-row.is-bad .cb-num { background: var(--red-s); }
.cb-cat { font-size: 20px; line-height: 1.2; color: var(--ink); }
.cb-field { position: relative; min-width: 0; }
.cb-input {
  width: 100%; min-width: 0; padding: 10px 40px 10px 13px;
  font-family: var(--display); font-size: 18px; color: var(--ink);
  background: #fff; border: var(--line) solid var(--ink); border-radius: 12px 15px 11px 14px;
  transition: box-shadow .15s, border-color .15s;
}
.cb-input::placeholder { color: rgba(42, 37, 34, .28); }
.cb-input:focus { outline: none; border-color: var(--cherry-d); box-shadow: -3px 4px 0 var(--cherry); }
.cb-input[readonly], .cb-input[readonly]:focus { background: var(--paper-2); border-style: dashed; border-color: var(--ink); color: var(--ink-2); box-shadow: none; }
.cb-actions .waiting-text { text-align: center; }
.cb-mark {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
  font-family: var(--display); font-size: 15px; pointer-events: none;
}
.cb-row.is-ok .cb-mark { background: var(--green); border: 2px solid var(--ink); animation: popin .25s var(--ease-pop); }
.cb-row.is-bad .cb-mark { background: var(--red); border: 2px solid var(--ink); }
.cb-warn { grid-column: 3; margin-top: 4px; font-size: 14px; color: var(--red-d); }
.cb-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cb-msg { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 17px; color: var(--ink-2); }
.cb-msg.is-good { color: var(--green-d); }
.cb-dots { display: inline-flex; flex-wrap: wrap; gap: 3px; padding-top: 2px; }
.cb-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid rgba(42, 37, 34, .3); background: #fff; }
.cb-dots i.is-on { background: var(--cherry); border-color: var(--ink); }
.cb-locked { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--green); border: 2px solid var(--ink); }

/* review */
.cb-review { gap: 18px; }
.cb-review-head { display: flex; align-items: center; justify-content: center; gap: 16px; }
.cb-catcard { padding: 12px 24px 14px; transform: rotate(-1.2deg); animation: popin .35s var(--ease-pop); max-width: 560px; }
.cb-catcard .kicker { margin-bottom: 2px; }
.cb-catcard h2 { margin: 0; font-size: clamp(22px, 5vw, 32px); line-height: 1.1; }
.cb-answers { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.cb-ans {
  --bgc: var(--paper);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who vote" "text text" "tags tags";
  align-items: center; gap: 4px 8px; min-width: 0; padding: 10px 12px 12px;
  background: var(--bgc); border: var(--line) solid var(--ink); border-radius: var(--radius-wobble-2);
  box-shadow: var(--shadow-ink); transform: rotate(var(--tilt, 0deg));
  animation: cb-deal .35s var(--ease-pop) both; transition: background .2s;
}
@keyframes cb-deal { 0% { transform: translateY(14px) scale(.9); opacity: 0; } 100% { transform: rotate(var(--tilt, 0deg)); opacity: 1; } }
.cb-ans.is-mine { box-shadow: -4px 5px 0 var(--cherry); }
.cb-ans-who { grid-area: who; display: flex; align-items: center; gap: 7px; min-width: 0; }
.cb-ans-who svg { flex: none; }
.cb-ans-who b { min-width: 0; font-size: 16px; font-weight: normal; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-ans-who b em { font-style: normal; color: var(--muted); }
.cb-ans-text { grid-area: text; font-family: var(--display); font-size: 25px; line-height: 1.15; overflow-wrap: anywhere; padding: 2px 0; }
.cb-ans-tags { grid-area: tags; display: flex; flex-wrap: wrap; gap: 5px; }
.cb-tag {
  display: inline-flex; align-items: center; gap: 3px; padding: 1px 9px 2px;
  border: 2px solid var(--ink); border-radius: 999px; background: var(--paper-2); font-size: 14px; line-height: 1.3;
}
.cb-tag.is-bad, .cb-tag.is-out { background: var(--red); }
.cb-tag.is-dup { background: var(--dup, var(--gold)); }
.cb-tag.is-bonus { background: var(--gold); }
.cb-ans.is-wrong { --bgc: #f4ede1; }
.cb-ans.is-wrong .cb-ans-text, .cb-ans.is-doomed .cb-ans-text {
  text-decoration: line-through; text-decoration-color: var(--red-d); text-decoration-thickness: 3px; color: var(--ink-2);
}
.cb-ans.is-doomed { --bgc: var(--red-s); }
.cb-dup-0 { --dup: var(--gold); --bgc: var(--gold-s); }
.cb-dup-1 { --dup: var(--blue); --bgc: var(--blue-s); }
.cb-dup-2 { --dup: var(--green); --bgc: var(--green-s); }
.cb-dup-3 { --dup: var(--grape); --bgc: var(--grape-s); }
.cb-ans.is-dup.is-doomed { --bgc: var(--red-s); }
.cb-ans-vote { grid-area: vote; display: flex; align-items: center; gap: 6px; }
.cb-noped { display: inline-flex; padding-left: 6px; }
.cb-noped svg { margin-left: -7px; border-radius: 50%; background: var(--paper); }
.cb-nope {
  display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 0 10px;
  background: #fff; border: var(--line) solid var(--ink); border-radius: 12px 14px 11px 13px;
  font-family: var(--display); font-size: 15px; color: var(--ink);
  transition: transform .15s var(--ease-pop), background .15s, box-shadow .15s;
}
.cb-nope:hover { transform: rotate(-6deg); }
.cb-nope.is-on { background: var(--red); box-shadow: -2px 3px 0 var(--red-d); }
.cb-nope.is-on svg { animation: cb-thump .35s var(--ease-pop); }
@keyframes cb-thump { 40% { transform: translateY(3px) scale(1.15); } }

/* result */
.cb-res { align-items: stretch; }
.cb-res.is-top { box-shadow: -4px 5px 0 var(--cherry); }
.cb-res-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.cb-res-list li { display: flex; flex-direction: column; min-width: 0; }
.cb-res-list small { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-res-list span { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.cb-res-list b { min-width: 0; font-family: var(--display); font-size: 16px; font-weight: normal; overflow-wrap: anywhere; }
.cb-res-list em { flex: none; font-style: normal; font-size: 12px; padding: 0 7px 1px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper-2); }
.cb-res-list .is-u em { background: var(--green); }
.cb-res-list .is-d b { color: var(--ink-2); }
.cb-res-list .is-d em { background: var(--gold-s); }
.cb-res-list .is-x b, .cb-res-list .is-l b { text-decoration: line-through; text-decoration-color: var(--red-d); text-decoration-thickness: 2px; color: var(--ink-2); }
.cb-res-list .is-x em, .cb-res-list .is-l em { background: var(--red-s); }
.cb-res-list .is-blank b { color: var(--muted); }

@media (max-width: 760px) {
  .cb-row { grid-template-columns: 28px minmax(0, 1fr); row-gap: 6px; }
  .cb-field { grid-column: 1 / -1; }
  .cb-warn { grid-column: 1 / -1; margin-top: 0; }
  .cb-letter { width: 72px; height: 72px; }
  .cb-letter span { font-size: 46px; }
  .cb-head-text b { font-size: 22px; }
  .cb-answers { grid-template-columns: minmax(0, 1fr); }
  .cb-review-head { justify-content: flex-start; }
}

/* ---------------------------------------------------------------------
   Push your luck
   --------------------------------------------------------------------- */
.game.pushyourluck { max-width: 720px; }
.pyl-stage { gap: 12px; }

.pyl-card {
  position: relative; overflow: hidden;
  padding: 12px 16px 11px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: background .22s, box-shadow .22s, border-color .22s;
}
.pyl-card.is-win-pop, .pyl-card.is-landed-card { animation: pyl-card-pop .42s var(--ease-pop); }
.pyl-card.is-bust-shake {
  background: #fff4f2;
  animation: pyl-card-shake .46s cubic-bezier(.36, .07, .19, .97);
}
.pyl-head { position: relative; z-index: 2; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; }
.pyl-head .kicker { margin: 0; }
.pyl-count, .pyl-was { font-family: var(--display); font-size: 13px; color: var(--muted); white-space: nowrap; }

/* ---- the wheel ---- */
.pyl-wheelbox { position: relative; display: grid; place-items: center; padding: 6px 0 3px; }
.pyl-wheel {
  position: relative; z-index: 2;
  width: var(--wheel, 266px); height: var(--wheel, 266px); aspect-ratio: 1 / 1;
}
.pyl-rotor {
  position: absolute; inset: 0;
  transform: rotate(var(--to, 0deg));
  will-change: transform;
  filter: drop-shadow(0 4px 0 rgba(42, 37, 34, .14));
}
.pyl-face { width: 100%; height: 100%; display: block; overflow: visible; }
.pyl-bezel { fill: var(--orange); stroke: var(--ink); stroke-width: 3; }
.pyl-bulb { fill: #fff9e2; stroke: var(--ink); stroke-width: 1.5; }
.pyl-wheelbox.is-spinning .pyl-bulb.is-a { animation: pyl-bulb .36s steps(2, end) infinite; }
.pyl-wheelbox.is-spinning .pyl-bulb.is-b { animation: pyl-bulb .36s steps(2, end) .18s infinite; }
.pyl-wheelbox.is-landed .pyl-bulb { fill: var(--gold); animation: pyl-bulb-flash .22s steps(2, end) 4; }

.pyl-slice {
  fill: var(--paper); stroke: var(--ink); stroke-width: 2.1; stroke-linejoin: round;
  transition: fill .16s ease, opacity .16s ease;
}
.pyl-slice.is-w0 { fill: #fffcf2; }
.pyl-slice.is-w1 { fill: #fff1c7; }
.pyl-slice.is-w2 { fill: #e0f5f8; }
.pyl-slice.is-hi { fill: #d8f6d3; }
.pyl-slice.is-lo { fill: #dce6ff; }
.pyl-slice.is-used { fill: #efe7d5; }
.pyl-slice.is-pass { fill: #ffe780; }
.pyl-slice.is-on { fill: var(--gold); }
.pyl-wheelbox.is-landed .pyl-slice.is-on { animation: pyl-slice-win .55s ease-out; }

/* Hovering or locking a bet highlights the exact winning wedges on the wheel */
.pyl-stage[data-aim="h"] .pyl-slice.is-hi { fill: #9ce89b; }
.pyl-stage[data-aim="h"] .pyl-slice.is-lo { opacity: .52; }
.pyl-stage[data-aim="l"] .pyl-slice.is-lo { fill: #a4bcff; }
.pyl-stage[data-aim="l"] .pyl-slice.is-hi { opacity: .52; }
.pyl-stage[data-aim="f"] .pyl-slice.is-hi,
.pyl-stage[data-aim="f"] .pyl-slice.is-lo { fill: #9df0f6; }
.pyl-stage[data-aim="b"] .pyl-pot { background: var(--gold-s); box-shadow: -4px 5px 0 var(--gold-d); }

.pyl-peg { fill: var(--gold); stroke: var(--ink); stroke-width: 1.7; }
.pyl-lab {
  font-family: var(--display); font-size: 15.5px; fill: var(--ink);
  paint-order: stroke; stroke: rgba(255, 252, 242, .92); stroke-width: 2.6px; stroke-linejoin: round;
}
.pyl-lab.is-used { fill: rgba(42, 37, 34, .3); stroke: none; }
.pyl-lab.is-on { font-size: 18px; }
.pyl-rim { fill: none; stroke: var(--ink); stroke-width: 3.1; }

.pyl-hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 30%; height: 30%; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--ink);
  box-shadow: 0 3px 0 rgba(42, 37, 34, .18);
  display: grid; place-items: center; z-index: 3;
}
.pyl-wheelbox.is-landed .pyl-hub {
  background: var(--gold-s);
  animation: pyl-hub-pop .4s var(--ease-pop) both;
}
.pyl-hub b {
  grid-area: 1 / 1; font-family: var(--display); font-weight: normal;
  font-size: calc(var(--wheel, 252px) * .17); line-height: 1; color: var(--ink);
}

.pyl-needle {
  position: absolute; left: 50%; top: -11px; width: 28px; height: 36px;
  transform: translateX(-50%); transform-origin: 50% 27%;
  z-index: 4; pointer-events: none; will-change: transform;
}
.pyl-needle svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pyl-needle-body { fill: #ff7854; stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; }
.pyl-needle-dot { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }

/* ---- landing comic burst & sparks ---- */
.pyl-fx {
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
  display: grid; place-items: center;
}
.pyl-fx-burst {
  position: absolute; width: calc(var(--wheel, 266px) * 1.14); height: calc(var(--wheel, 266px) * 1.14);
  z-index: 1; opacity: 0; pointer-events: none;
  animation: pyl-burst-flash .95s var(--ease-pop) forwards;
}
.pyl-fx-sparks { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.pyl-fx-sparks i {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--gold); border: 2px solid var(--ink);
  animation: pyl-spark-fly .7s cubic-bezier(.16, .84, .3, 1) forwards;
}
.pyl-fx.is-win .pyl-fx-sparks i:nth-child(odd) { background: var(--green); }
.pyl-fx.is-free .pyl-fx-sparks i:nth-child(odd) { background: var(--aqua); }
.pyl-fx.is-bust .pyl-fx-sparks i { background: var(--red); border-radius: 3px; }
.pyl-pop-badge {
  position: absolute; bottom: 8px; left: 50%;
  transform: translateX(-50%);
  padding: 3px 13px 4px; border-radius: 999px;
  font-family: var(--display); font-size: 16px; line-height: 1.15; white-space: nowrap;
  color: var(--ink); background: var(--gold);
  border: 2.5px solid var(--ink); box-shadow: -3px 3px 0 var(--ink);
  animation: pyl-badge-pop .44s var(--ease-pop) both;
}
.pyl-pop-badge.is-win { background: var(--green); }
.pyl-pop-badge.is-bank { background: var(--gold); }
.pyl-pop-badge.is-free { background: var(--aqua); }
.pyl-pop-badge.is-bust { background: var(--red); }
.pyl-pop-badge.is-aqua { background: var(--aqua); }

.pyl-odds { position: relative; z-index: 2; margin: 4px 0 0; font-family: var(--display); font-size: 14.5px; color: var(--muted); text-align: center; }
.pyl-odds.is-good { color: var(--green-d); }
.pyl-odds.is-bad { color: var(--red-d); }
.pyl-odds.is-free { color: var(--aqua-d); }
.pyl-pop-line { animation: pyl-rise .32s var(--ease-pop) both; }
.pyl-hero { font-size: 18px; min-height: 25px; color: var(--ink-2); }
.pyl-hero.is-verdict { font-size: 20px; animation: pyl-verdict-pop .36s var(--ease-pop) both; }
.pyl-late { animation: pyl-rise .3s var(--ease-pop) .15s both; }
.pyl-late:empty { display: none; }

/* ---- pot & heat meter ---- */
.pyl-pot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 14px; background: var(--paper);
  border: var(--line) solid var(--ink); border-radius: var(--radius-wobble); box-shadow: var(--shadow-ink);
  transition: background .2s, box-shadow .2s, transform .2s var(--ease-pop);
}
.pyl-pot.is-warm { background: var(--gold-s); box-shadow: -3px 4px 0 var(--gold-d); }
.pyl-pot.is-hot { background: var(--orange-s); box-shadow: -4px 5px 0 var(--orange-d); }
.pyl-pot.is-inferno { background: #ffe6cf; box-shadow: -4px 5px 0 var(--flame-d); }
.pyl-pot-text { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.pyl-pot-text .kicker { margin: 0; }
.pyl-pot-num { font-family: var(--display); font-size: 31px; font-weight: normal; line-height: 1; }
.pyl-heat-tag {
  display: inline-flex; align-items: center; padding: 1px 9px 2px;
  font-family: var(--display); font-size: 12px; line-height: 1.2;
  background: var(--gold); color: var(--ink);
  border: 1.8px solid var(--ink); border-radius: 999px;
  animation: pyl-badge-in .3s var(--ease-pop) both;
}
.pyl-pot.is-hot .pyl-heat-tag { background: var(--orange); }
.pyl-pot.is-inferno .pyl-heat-tag { background: var(--flame); }
.pyl-pot-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.pyl-total { font-family: var(--display); font-size: 13px; color: var(--muted); }
.pyl-save {
  display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px 2px;
  font-family: var(--display); font-size: 12px; color: var(--ink);
  background: var(--aqua-s); border: 1.5px solid var(--ink); border-radius: 999px;
}
.pyl-save .icon { color: var(--aqua-d); }
.pyl-save.is-spent { background: #efe7d5; border-color: rgba(42, 37, 34, .4); color: var(--muted); }
.pyl-save.is-spent .icon { color: var(--muted); }

.pyl-out {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: var(--paper); border: var(--line) solid var(--ink);
  border-radius: var(--radius-wobble); box-shadow: var(--shadow-ink);
}
.pyl-out.is-banked { background: var(--gold-s); }
.pyl-out.is-busted { background: var(--red-s); }
.pyl-out-art {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  background: rgba(255, 255, 255, .6); border: 2px solid var(--ink); border-radius: 50%;
}
.pyl-out-text { display: flex; flex-direction: column; gap: 1px; }
.pyl-out-text b { font-family: var(--display); font-size: 19px; font-weight: normal; line-height: 1.15; }
.pyl-out-text em { font-style: normal; font-size: 14px; line-height: 1.3; color: var(--ink-2); }

/* ---- tactile arcade bet buttons ---- */
.pyl-bets { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.pyl-bet {
  --c: var(--paper); --cd: #d9cfb8;
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto;
  align-items: center; column-gap: 10px; padding: 9px 14px 10px;
  text-align: left; font-family: var(--display); color: var(--ink);
  background: var(--c); border: 2.5px solid var(--ink); border-radius: var(--radius-wobble);
  box-shadow: -4px 6px 0 var(--cd), inset 0 2.5px 0 rgba(255, 255, 255, .48);
  transition: transform .15s var(--ease-pop), box-shadow .12s ease, filter .15s, opacity .15s;
  user-select: none;
}
.pyl-bet-key {
  grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px;
  background: rgba(255, 255, 255, .72); border: 2px solid var(--ink); border-radius: 50%;
  box-shadow: 0 2px 0 rgba(42, 37, 34, .14);
  transition: transform .18s var(--ease-pop);
}
.pyl-bet-name { font-size: 20.5px; line-height: 1.06; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pyl-bet-odds { font-size: 13px; color: var(--ink-2); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pyl-bet.pyl-h { --c: var(--green); --cd: var(--green-d); }
.pyl-bet.pyl-l { --c: var(--cobalt); --cd: var(--cobalt-d); }
.pyl-bet.pyl-f { --c: var(--aqua); --cd: var(--aqua-d); border-radius: 12px 15px 12px 15px; }
.pyl-bet.pyl-f .pyl-bet-key { border-radius: 10px; background: rgba(255, 252, 242, .85); }
.pyl-bet.pyl-b { --c: var(--gold); --cd: var(--gold-d); }

.pyl-bet:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.015);
  box-shadow: -5px 8px 0 var(--cd), inset 0 2.5px 0 rgba(255, 255, 255, .62);
}
.pyl-bet.pyl-h:hover:not(:disabled) .pyl-bet-key { transform: translateY(-3px) scale(1.08); }
.pyl-bet.pyl-l:hover:not(:disabled) .pyl-bet-key { transform: translateY(3px) scale(1.08); }
.pyl-bet.pyl-f:hover:not(:disabled) .pyl-bet-key { transform: rotate(-7deg) scale(1.1); }
.pyl-bet.pyl-b:hover:not(:disabled) .pyl-bet-key { transform: scale(1.1); }

.pyl-bet:active:not(:disabled) {
  transform: translate(-2px, 4px) scale(.975);
  box-shadow: -1px 2px 0 var(--cd);
  transition-duration: .05s;
}
.pyl-bet:disabled { opacity: .42; cursor: not-allowed; }
.pyl-bet.is-dim:disabled { opacity: .34; }
.pyl-bet.is-picked, .pyl-bet.is-picked:disabled {
  opacity: 1; cursor: default;
  transform: translateY(-2px) scale(1.015);
  box-shadow: -4px 6px 0 var(--ink), inset 0 2.5px 0 rgba(255, 255, 255, .6);
  animation: pyl-lock-slam .34s var(--ease-pop) both;
}
.pyl-bet-stamp {
  position: absolute; right: 10px; top: -10px;
  padding: 2px 9px 3px; border-radius: 999px;
  font-family: var(--display); font-size: 12px; line-height: 1.1; white-space: nowrap;
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); box-shadow: -2px 2px 0 var(--ink);
  animation: pyl-stamp-in .28s var(--ease-pop) both;
}

/* ---- button click burst mounted on body ---- */
.pyl-click-burst {
  position: fixed; z-index: 9000; pointer-events: none; width: 0; height: 0;
  --spark: var(--aqua);
}
.pyl-click-burst.is-h { --spark: var(--green); }
.pyl-click-burst.is-l { --spark: var(--cobalt); }
.pyl-click-burst.is-f { --spark: var(--aqua); }
.pyl-click-burst.is-b { --spark: var(--gold); }
.pyl-click-ring {
  position: absolute; left: -26px; top: -26px; width: 52px; height: 52px;
  border-radius: 50%; border: 3px solid var(--ink); background: var(--spark);
  animation: pyl-click-ring .46s cubic-bezier(.16, .84, .3, 1) forwards;
}
.pyl-click-burst i {
  position: absolute; left: -4.5px; top: -4.5px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--spark); border: 2px solid var(--ink);
  animation: pyl-click-spark .52s cubic-bezier(.16, .84, .3, 1) forwards;
}
.pyl-click-burst i:nth-child(even) { background: var(--gold); }
.pyl-click-pop {
  position: absolute; left: 0; top: -10px; transform: translate(-50%, -50%);
  padding: 2px 10px 3px; border-radius: 999px; white-space: nowrap;
  font-family: var(--display); font-size: 14px; font-weight: normal; line-height: 1.1;
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); box-shadow: -2px 2px 0 var(--ink);
  animation: pyl-click-float .62s cubic-bezier(.16, .84, .3, 1) forwards;
}

.pyl-note { margin: 0; font-size: 15px; line-height: 1.35; color: var(--ink-2); text-align: center; }
.pyl-note b { font-family: var(--display); font-weight: normal; color: var(--ink); }
.pyl-note.center { text-align: center; }

.pyl-folk { list-style: none; display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: 5px 8px; margin: 0; padding: 0; }
.pyl-folk-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 10px;
  background: var(--paper); border: 1.8px solid rgba(42, 37, 34, .5);
  border-radius: 13px 15px 13px 16px;
}
.pyl-folk-row.is-me { border-color: var(--ink); background: var(--paper-2); }
.pyl-folk-row.is-banked { background: var(--gold-s); }
.pyl-folk-row.is-out { opacity: .62; }
.pyl-folk-row.is-out b { text-decoration: line-through; text-decoration-thickness: 2px; }
.pyl-folk-row.is-away { opacity: .55; }
.pyl-folk-av { flex: none; display: grid; }
.pyl-folk-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pyl-folk-name b { font-family: var(--display); font-size: 15px; font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pyl-folk-name em { font-style: normal; font-size: 11.5px; line-height: 1.2; color: var(--muted); }
.pyl-folk-pot {
  flex: none; display: inline-grid; place-items: center; min-width: 32px; min-height: 26px; padding: 0 7px;
  font-family: var(--display); font-size: 16px; line-height: 1;
  border: 1.5px dashed rgba(42, 37, 34, .45); border-radius: 8px;
}
.pyl-chip {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-height: 24px;
  min-width: 58px; padding: 1px 8px 2px; font-family: var(--display); font-size: 12.5px;
  border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper-2);
}
.pyl-chip.is-ready { background: var(--green); animation: pyl-badge-in .26s var(--ease-pop); }
.pyl-chip.is-bank { background: var(--gold-s); }
.pyl-chip.is-ok { background: var(--green); }
.pyl-chip.is-out { background: var(--red-s); }
.pyl-chip.is-wait { justify-content: center; border-color: rgba(42, 37, 34, .35); color: var(--muted); }

/* ---- draw stage cards (picks flip at spin start, verdicts pop at landing) ---- */
.pyl-rows { list-style: none; display: grid; grid-template-columns: repeat(var(--rcols, 1), minmax(0, 1fr)); gap: 6px 8px; margin: 0; padding: 0; }
.pyl-row {
  display: flex; align-items: center; gap: 9px; padding: 6px 12px;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 14px 17px 14px 18px;
  box-shadow: -2px 3px 0 rgba(42, 37, 34, .1);
  transition: background .2s, transform .2s var(--ease-pop);
}
.pyl-row.is-pending {
  animation: pyl-rise .28s var(--ease-pop) both;
  animation-delay: calc(var(--i) * 45ms);
}
.pyl-row.is-revealed {
  animation: pyl-verdict-row .36s var(--ease-pop) both;
  animation-delay: calc(var(--i) * 55ms);
}
.pyl-row.is-ok { background: var(--green-s); }
.pyl-row.is-out { background: var(--red-s); }
.pyl-row.is-free { background: var(--aqua-s); }
.pyl-row.is-bank { background: var(--gold-s); }
.pyl-row.is-me { border-width: 2.5px; }
.pyl-row-av { flex: none; display: grid; }
.pyl-row-who { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.pyl-row-who b { max-width: 100%; font-family: var(--display); font-size: 16px; font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pyl-pick-pill {
  display: inline-flex; align-items: center; padding: 0 8px 1px;
  font-family: var(--display); font-size: 11.5px; line-height: 1.25;
  border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper-2); color: var(--ink);
}
.pyl-pick-pill.is-pick-h { background: var(--green); }
.pyl-pick-pill.is-pick-l { background: var(--cobalt); }
.pyl-pick-pill.is-pick-f { background: var(--aqua); }
.pyl-pick-pill.is-pick-b { background: var(--gold-s); }

.pyl-row-res { flex: none; display: flex; flex-direction: column; align-items: flex-end; font-family: var(--display); font-size: 16px; line-height: 1.15; }
.pyl-res-main { white-space: nowrap; }
.pyl-row-res b { font-weight: normal; }
.pyl-row-res em { font-style: normal; font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.pyl-mystery {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px;
  border-radius: 999px; background: var(--paper-2); border: 1.8px solid var(--ink);
  font-size: 13.5px; animation: pyl-pulse .75s ease-in-out infinite alternate;
}

.pyl-next { margin-top: 2px; }

@keyframes pyl-bulb {
  50% { fill: var(--gold); }
}
@keyframes pyl-bulb-flash {
  50% { fill: #fffcf2; }
}
@keyframes pyl-slice-win {
  0% { fill: #fffcf2; }
  35% { fill: var(--gold); }
  65% { fill: var(--aqua); }
  100% { fill: var(--gold); }
}
@keyframes pyl-hub-pop {
  0% { transform: translate(-50%, -50%) scale(.62); }
  65% { transform: translate(-50%, -50%) scale(1.16); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes pyl-burst-flash {
  0% { opacity: 0; transform: scale(.45); }
  22% { opacity: .95; transform: scale(1.04); }
  72% { opacity: .8; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.08); }
}
@keyframes pyl-spark-fly {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(.5); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-132px) scale(1); }
}
@keyframes pyl-badge-pop {
  0% { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.55); }
  70% { opacity: 1; transform: translateX(-50%) translateY(-3px) scale(1.08); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes pyl-badge-in {
  from { opacity: 0; transform: scale(.7); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes pyl-stamp-in {
  0% { opacity: 0; transform: scale(1.55) translateY(-6px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes pyl-lock-slam {
  0% { transform: translate(-2px, 4px) scale(.96); }
  55% { transform: translateY(-4px) scale(1.03); }
  100% { transform: translateY(-2px) scale(1.015); }
}
@keyframes pyl-click-ring {
  0% { opacity: .9; transform: scale(.25); }
  100% { opacity: 0; transform: scale(1.55); }
}
@keyframes pyl-click-spark {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(-6px) scale(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-46px) scale(.35); }
}
@keyframes pyl-click-float {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(.7); }
  22% { opacity: 1; transform: translate(-50%, -95%) scale(1.06); }
  100% { opacity: 0; transform: translate(-50%, -185%) scale(.96); }
}
@keyframes pyl-card-pop {
  0% { transform: scale(.985); }
  50% { transform: scale(1.015); }
  100% { transform: none; }
}
@keyframes pyl-card-shake {
  0%, 100% { transform: translateX(0); }
  16% { transform: translateX(-8px); }
  34% { transform: translateX(7px); }
  52% { transform: translateX(-5px); }
  70% { transform: translateX(4px); }
  86% { transform: translateX(-2px); }
}
@keyframes pyl-verdict-pop {
  0% { opacity: 0; transform: translateY(7px) scale(.88); }
  100% { opacity: 1; transform: none; }
}
@keyframes pyl-verdict-row {
  0% { opacity: .45; transform: translateY(5px) scale(.97); }
  100% { opacity: 1; transform: none; }
}
@keyframes pyl-pulse {
  from { transform: scale(.92); }
  to { transform: scale(1.08); }
}
@keyframes pyl-rise {
  from { opacity: 0; transform: translateY(9px) scale(.97); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 520px) {
  .pyl-folk { --cols: 2; }
  .pyl-rows.is-crowded { --rcols: 2; }
}
@media (max-width: 560px) {
  .pyl-wheel { --wheel: 184px; }
  .pyl-card { padding: 8px 12px 7px; gap: 4px; }
  .pyl-bets { gap: 9px; }
  .pyl-bet { column-gap: 7px; padding: 7px 9px 8px; }
  .pyl-bet-key { width: 28px; height: 28px; }
  .pyl-bet-key .icon { width: 19px; height: 19px; }
  .pyl-bet-name { font-size: 17.5px; }
  .pyl-bet-odds { font-size: 11px; }
  .pyl-bet-stamp { font-size: 11px; right: 7px; top: -9px; padding: 1px 7px 2px; }
  .pyl-pot-num { font-size: 26px; }
  .pyl-folk-row { gap: 6px; padding: 4px 8px; }
  .pyl-folk-av .avatar { width: 26px; height: 26px; }
  .pyl-folk-name b { font-size: 14px; }
  .pyl-folk-pot { min-width: 28px; font-size: 15px; }
  .pyl-chip { min-width: 50px; font-size: 12px; }
  .pyl-row-who b { font-size: 15px; }
  .pyl-row-res { font-size: 15px; }
  .pyl-pop-badge { font-size: 14px; padding: 2px 10px 3px; }
}

/* ---------------------------------------------------------------------
   Global Game-Juice Engine (#fx-layer, comic stamps, score roll, tactile spring)
   --------------------------------------------------------------------- */
#fx-layer {
  position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 9200;
}

.fx-burst {
  position: absolute; width: 0; height: 0; pointer-events: none;
  --fx: var(--gold);
}
.fx-ring {
  position: absolute; left: -24px; top: -24px; width: 48px; height: 48px;
  border-radius: 50%; border: 2.8px solid var(--ink); background: var(--fx);
  animation: fx-ring .42s cubic-bezier(.16, .84, .3, 1) forwards;
}
.fx-burst.is-big .fx-ring {
  left: -34px; top: -34px; width: 68px; height: 68px; border-width: 3.2px;
  animation-duration: .54s;
}
.fx-burst i {
  position: absolute; left: -4.5px; top: -4.5px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--c, var(--fx)); border: 2px solid var(--ink);
  animation: fx-spark .5s cubic-bezier(.16, .84, .3, 1) forwards;
}
.fx-burst.is-big i {
  left: -5.5px; top: -5.5px; width: 11px; height: 11px;
  animation: fx-spark-big .64s cubic-bezier(.16, .84, .3, 1) forwards;
}
.fx-pop {
  position: absolute; left: 0; top: -28px; transform: translate(-50%, -50%);
  padding: 2px 11px 3px; border-radius: 999px; white-space: nowrap;
  font-family: var(--display); font-size: 14.5px; font-weight: normal; line-height: 1.1;
  background: var(--paper); color: var(--ink);
  border: 2.2px solid var(--ink); box-shadow: -2.5px 2.5px 0 var(--ink);
  animation: fx-float .68s cubic-bezier(.16, .84, .3, 1) forwards;
}

.fx-stamp {
  position: fixed; left: 50%; top: 12px; transform: translateX(-50%);
  display: grid; place-items: center; pointer-events: none;
  animation: fx-stamp-life 1.35s cubic-bezier(.18, .88, .3, 1) forwards;
}
.fx-stamp-star {
  grid-area: 1 / 1; width: 118px; height: 118px;
  filter: drop-shadow(-3px 4px 0 rgba(42, 37, 34, .22));
  animation: fx-star-spin 1.35s cubic-bezier(.16, .84, .3, 1) forwards;
}
.fx-stamp-pill {
  grid-area: 1 / 1; position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  max-width: min(90vw, 420px); padding: 7px 20px 9px;
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 18px 22px 17px 21px;
  box-shadow: -4px 5px 0 var(--ink), inset 0 2.5px 0 rgba(255, 255, 255, .65);
  text-align: center;
}
.fx-stamp-pill b {
  font-family: var(--display); font-size: clamp(19px, 4.5vw, 25px); font-weight: normal; line-height: 1.08;
}
.fx-stamp-pill em {
  font-style: normal; font-size: 15px; line-height: 1.15; color: var(--ink-2);
}

/* Rolling score counter pop & gain pill bounce */
.is-score-bump {
  display: inline-block;
  animation: fx-score-bump .42s var(--ease-pop);
}
.lb-gain {
  animation: pyl-badge-in .34s var(--ease-pop) both;
}

/* Final-5-second countdown adrenaline pulse */
.timer.is-final5 {
  background: #ffe0db; border-color: var(--ink);
  box-shadow: -2px 3px 0 var(--red-d);
  animation: fx-timer-beat .48s ease-in-out infinite alternate;
}
.timer.is-final5 .timer-fg { stroke: var(--red-d); }

/* Universal tactile button & card spring physics */
.btn {
  transition: transform .15s var(--ease-pop), box-shadow .12s ease, filter .15s, opacity .15s;
}
.btn:hover:not(:disabled) {
  transform: translateY(-2.5px) rotate(-1deg) scale(1.02);
}
.btn:active:not(:disabled) {
  transform: translate(-2px, 3.5px) scale(.97);
  transition-duration: .05s;
}
.game-tile:active:not(:disabled),
.pick:active:not(:disabled),
.lie-opt:active:not(:disabled),
.option:active:not(:disabled),
.qcard.is-pickable:active:not(:disabled),
.seg-btn:active:not(:disabled),
.chip:active:not(:disabled) {
  transform: translate(-1.5px, 2.5px) scale(.965);
  transition-duration: .05s;
}
.modal-wrap.out { pointer-events: none; }
.wa.is-done .wa-check {
  animation: pyl-badge-in .28s var(--ease-pop) both;
}

@keyframes fx-ring {
  0% { opacity: .92; transform: scale(.22); }
  100% { opacity: 0; transform: scale(1.55); }
}
@keyframes fx-spark {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(-5px) scale(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-42px) scale(.3); }
}
@keyframes fx-spark-big {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(-6px) scale(1.05); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-62px) scale(.32); }
}
@keyframes fx-float {
  0% { opacity: 0; transform: translate(-50%, -15%) scale(.68); }
  22% { opacity: 1; transform: translate(-50%, -95%) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -195%) scale(.96); }
}
@keyframes fx-stamp-life {
  0% { opacity: 0; transform: translateX(-50%) translateY(-18px) scale(.52) rotate(-3deg); }
  16% { opacity: 1; transform: translateX(-50%) translateY(4px) scale(1.07) rotate(-1.5deg); }
  26% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1) rotate(-1.5deg); }
  78% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1) rotate(-1.5deg); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-22px) scale(.9) rotate(-1deg); }
}
@keyframes fx-star-spin {
  0% { transform: scale(.4) rotate(-26deg); }
  24% { transform: scale(1.06) rotate(4deg); }
  100% { transform: scale(.96) rotate(14deg); }
}
@keyframes fx-score-bump {
  0% { transform: scale(1); }
  38% { transform: scale(1.24); color: var(--green-d); }
  100% { transform: scale(1); }
}
@keyframes fx-timer-beat {
  from { transform: scale(1) rotate(-1deg); }
  to { transform: scale(1.07) rotate(1deg); }
}

/* =====================================================================
   19. FOUR IN A ROW (classic 7x6 tournament bracket)
   ===================================================================== */
.room-page.game-fourinarow { max-width: 1120px; }

.f4-layout {
  width: 100%;
  max-width: 820px;
  grid-template-columns: minmax(0, 460px) minmax(296px, 1fr);
}
.f4-board-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  width: 100%;
}
.f4-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--shadow-ink);
  transition: transform .16s var(--ease-pop), background .16s ease, box-shadow .16s ease;
}
.f4-bar.is-turn {
  background: var(--sun-s);
  box-shadow: -4px 5px 0 var(--ink);
  transform: translateY(-1px);
}
.f4-bar.is-r.is-turn { background: var(--red-s); }
.f4-bar.is-y.is-turn { background: var(--gold-s); }
.f4-disc-tag {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  flex: none;
}
.f4-disc-tag.is-r { background: #ff595e; box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .18); }
.f4-disc-tag.is-y { background: #ffca3a; box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .16); }
.f4-who {
  display: flex;
  flex-direction: column;
  line-height: 1.08;
  min-width: 0;
  margin-right: auto;
}
.f4-who b {
  font-family: var(--display);
  font-size: 17px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.f4-who small { font-size: 15px; color: var(--muted); }
.f4-pips { display: inline-flex; gap: 5px; align-items: center; }
.f4-pip {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--paper-2);
}
.f4-pip.is-r.is-on { background: #ff595e; }
.f4-pip.is-y.is-on { background: #ffca3a; }

.f4-rack-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  user-select: none;
}
.f4-col-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  padding: 0 10px;
}
.f4-col-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 4px 0;
  border: 2px solid transparent;
  border-radius: 12px;
  background: rgba(255, 252, 242, .65);
  color: var(--ink-2);
  font-family: var(--display);
  cursor: pointer;
  transition: transform .14s var(--ease-pop), background .14s ease, border-color .14s ease;
}
.f4-col-num { font-size: 13px; line-height: 1; }
.f4-col-arrow { font-size: 13px; line-height: 1; opacity: .55; }
.f4-col-btn:not(:disabled):hover,
.f4-col-btn.is-hover:not(:disabled) {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.f4-col-btn.is-r:not(:disabled):hover,
.f4-col-btn.is-r.is-hover:not(:disabled) { background: var(--red-s); color: var(--red-d); }
.f4-col-btn.is-y:not(:disabled):hover,
.f4-col-btn.is-y.is-hover:not(:disabled) { background: var(--gold-s); color: var(--gold-d); }
.f4-col-btn.is-hover .f4-col-arrow { opacity: 1; }
.f4-col-btn:disabled { opacity: .35; cursor: default; }

.f4-rack {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  background: linear-gradient(180deg, #5cc8ff 0%, #3aa8e8 100%);
  border: 3px solid var(--ink);
  border-radius: 22px;
  box-shadow: -6px 8px 0 var(--ink);
  position: relative;
  overflow: hidden;
}
.f4-cell {
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  display: grid;
  place-items: center;
}
.f4-cell:disabled { cursor: default; }
.f4-hole {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--bg);
  border: 2.6px solid var(--ink);
  box-shadow: inset 0 4px 0 rgba(42, 37, 34, .16);
  display: grid;
  place-items: center;
  position: relative;
  transition: background .12s ease;
}
.f4-cell.is-col-hover .f4-hole {
  background: #fffdf5;
}
.f4-disc {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  position: relative;
  box-shadow: inset -3px -4px 0 rgba(42, 37, 34, .2), inset 2px 3px 0 rgba(255, 255, 255, .45);
}
.f4-disc::after {
  content: '';
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  border: 2px dashed rgba(42, 37, 34, .22);
}
.f4-disc.is-r { background: #ff595e; }
.f4-disc.is-y { background: #ffd34d; }
.f4-disc.is-ghost {
  opacity: .42;
  transform: scale(.9);
  border-style: dashed;
}
.f4-disc.is-dropping {
  animation: f4-drop .38s cubic-bezier(.32, 0, .66, 1) both;
}
.f4-disc.is-win {
  box-shadow: 0 0 0 4px #fffcf2, 0 0 16px 3px rgba(255, 211, 77, .95);
  animation: f4-win-pulse .65s ease-in-out infinite alternate;
  z-index: 2;
}
.f4-cell.is-last:not(.is-win) .f4-disc {
  box-shadow: 0 0 0 3px #fffcf2, inset -3px -4px 0 rgba(42, 37, 34, .2);
}
.f4-feet {
  display: flex;
  justify-content: space-between;
  padding: 0 14px;
  margin-top: -4px;
}
.f4-feet span {
  width: 44px;
  height: 11px;
  background: #2b8fcf;
  border: 2.5px solid var(--ink);
  border-radius: 8px;
}
.f4-prev-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 11px;
  border-radius: 12px;
  border: 2px solid var(--ink);
  background: var(--gold-s);
  font-size: 16px;
}
.f4-prev-note.is-draw { background: var(--blue-s); }

@keyframes f4-drop {
  0% { transform: translateY(calc(var(--drop-rows, 4) * -105%)); }
  74% { transform: translateY(0); }
  88% { transform: translateY(-9%); }
  100% { transform: translateY(0); }
}
@keyframes f4-win-pulse {
  from { transform: scale(.96); }
  to { transform: scale(1.06); }
}

/* =====================================================================
   20. BATTLESHIP (tactical powerups + sea modifiers tournament)
   ===================================================================== */
.room-page.game-battleship { max-width: 1240px; }

.bs-play-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bs-layout {
  width: 100%;
  grid-template-columns: minmax(0, 1fr) 298px;
  gap: 16px;
}
.bs-main-col { min-width: 0; }
.bs-boards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

/* Setup: fleet placement + 3-powerup draft shop */
.bs-setup-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: 16px;
  align-items: start;
}
.bs-setup-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.bs-setup-fleet, .bs-shop-card, .bs-board-card { min-width: 0; }
.bs-setup-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.bs-setup-head h3 { font-size: 20px; margin-bottom: 2px; }
.bs-draft-count {
  font-family: var(--display);
  font-size: 15px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--cobalt-s);
  border: 2px solid var(--ink);
  white-space: nowrap;
}

/* Mini ship silhouettes in dock */
.bs-dock {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.bs-dock-ship {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 7px;
  border: 2px solid var(--ink);
  border-radius: 13px;
  background: var(--paper-2);
  font-family: var(--display);
  font-size: 12.5px;
  cursor: pointer;
  transition: transform .13s var(--ease-pop), background .13s ease, box-shadow .13s ease;
}
.bs-dock-ship:hover:not(:disabled) { transform: translateY(-2px); background: var(--sun-s); }
.bs-dock-ship.is-on {
  background: var(--cobalt-s);
  box-shadow: -3px 3px 0 var(--ink);
  transform: translateY(-1px);
}
.bs-dock-art {
  display: inline-flex;
  align-items: center;
  height: 18px;
  width: calc(var(--ship-len, 3) * 14px);
}
.bs-dock-art svg { width: 100%; height: 100%; display: block; }
.bs-dock-len {
  font-style: normal;
  font-size: 11px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  border: 1.5px solid var(--ink);
}

.bs-setup-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.bs-tool-btn, .bs-dir-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
  background: var(--paper);
  font-family: var(--display);
  font-size: 13.5px;
  box-shadow: -2px 3px 0 var(--ink);
  transition: transform .13s var(--ease-pop), background .13s ease;
}
.bs-tool-btn:hover:not(:disabled), .bs-dir-btn:hover:not(:disabled) {
  background: var(--sun-s);
  transform: translateY(-1px);
}

/* Rich powerup draft shop cards with custom emblem + 4x4 tactical footprint preview */
.bs-shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.bs-power-card {
  display: block;
  width: 100%;
  padding: 8px 9px;
  text-align: left;
  border: 2.3px solid var(--ink);
  border-radius: 15px;
  background: var(--paper);
  cursor: pointer;
  transition: transform .14s var(--ease-pop), background .14s ease, box-shadow .14s ease;
}
.bs-power-card:hover:not(:disabled) {
  transform: translateY(-2px);
  background: var(--paper-2);
}
.bs-power-card.is-on {
  background: var(--cobalt-s);
  box-shadow: -4px 4px 0 var(--ink);
  transform: translateY(-2px);
}
.bs-power-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.bs-power-emblem {
  flex: none;
  display: grid;
  place-items: center;
  filter: drop-shadow(-1px 2px 0 rgba(42, 37, 34, .22));
}
.bs-power-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bs-power-title-line {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.bs-power-title-line b { font-family: var(--display); font-size: 13.5px; }
.bs-power-tag {
  font-style: normal;
  font-size: 11.5px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .86);
  border: 1.5px solid rgba(42, 37, 34, .32);
}
.bs-power-desc {
  font-size: 14px;
  line-height: 1.15;
  color: var(--ink-2);
}
.bs-power-foot {
  flex: none;
  display: grid;
  place-items: center;
}
.bs-footprint-svg { display: block; border-radius: 6px; }

.bs-lock-bar { display: flex; justify-content: stretch; }
.bs-lock-bar .btn { width: 100%; justify-content: center; }
.bs-locked-msg {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: var(--green-s);
  border: 2px solid var(--ink);
  border-radius: 14px;
}

/* Weapon loadout bar */
.bs-weapons { padding: 10px 15px; }
.bs-weapons.is-turn {
  background: var(--cobalt-s);
  box-shadow: -5px 6px 0 var(--ink);
}
.bs-weapons-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.bs-turn-headline h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 19px;
}
.bs-bonus-pill {
  font-size: 13.5px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--gold);
  border: 2px solid var(--ink);
}
.bs-weapon-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}
.bs-wep-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px 4px 6px;
  border: 2.3px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--display);
  font-size: 13.5px;
  cursor: pointer;
  transition: transform .13s var(--ease-pop), background .13s ease, box-shadow .13s ease;
}
.bs-wep-btn .bs-emblem-svg { display: block; flex: none; }
.bs-wep-btn em {
  font-style: normal;
  font-size: 12.5px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .75);
  border: 1.5px solid rgba(42, 37, 34, .25);
}
.bs-wep-btn:hover:not(:disabled) { transform: translateY(-2px); background: var(--sun-s); }
.bs-wep-btn.is-on {
  background: var(--gold);
  box-shadow: -3px 4px 0 var(--ink);
  transform: translateY(-2px);
}
.bs-wep-btn.is-shield-btn { background: var(--aqua-s); }
.bs-wep-btn:disabled { opacity: .45; cursor: default; }

/* Ocean boards + continuous multi-cell ship hull & powerup overlay architecture */
.bs-board-card { padding: 12px 13px; }
.bs-board-card.is-targetable {
  border-color: var(--ink);
  box-shadow: -5px 6px 0 var(--cobalt);
}
.bs-board-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.bs-board-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  margin-right: auto;
  min-width: 0;
}
.bs-board-meta b {
  font-family: var(--display);
  font-size: 14.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bs-board-meta small { font-size: 13.5px; color: var(--muted); }
.bs-fleet-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.bs-ship-pill {
  display: inline-flex;
  align-items: center;
  height: 16px;
  width: calc(var(--ship-len, 3) * 11px + 8px);
  padding: 1px 4px;
  border-radius: 999px;
  background: #dff3ff;
  border: 1.6px solid var(--ink);
}
.bs-ship-pill svg { width: 100%; height: 100%; display: block; }
.bs-ship-pill.is-sunk {
  background: #ffe3e3;
  opacity: .82;
}

.bs-board-matrix {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  grid-template-rows: 17px auto;
  gap: 3px;
  width: 100%;
  max-width: 382px;
  margin: 0 auto;
  user-select: none;
}
.bs-coords-cols {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 3px;
  text-align: center;
  font-family: var(--display);
  font-size: 11.5px;
  color: var(--muted);
  line-height: 17px;
}
.bs-coords-rows {
  display: grid;
  grid-template-rows: repeat(8, minmax(0, 1fr));
  gap: 3px;
  align-items: center;
  justify-items: center;
  font-family: var(--display);
  font-size: 11.5px;
  color: var(--muted);
}

.bs-grid-wrap {
  --bs-gap: 3px;
  --bs-cell: calc((100% - 7 * var(--bs-gap)) / 8);
  --bs-step: calc(var(--bs-cell) + var(--bs-gap));
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  padding: 4px;
  border-radius: 13px;
  background: #2b7de9;
  border: 2.5px solid var(--ink);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35);
}
.bs-grid {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  gap: var(--bs-gap);
}
.bs-ships-layer,
.bs-markers-layer,
.bs-ghost-layer {
  position: absolute;
  inset: 4px;
  pointer-events: none;
}
.bs-ships-layer { z-index: 2; }
.bs-markers-layer { z-index: 3; }
.bs-ghost-layer { z-index: 4; }

.bs-cell {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 1.7px solid rgba(42, 37, 34, .58);
  border-radius: 6px;
  background: #bfeaff;
  display: grid;
  place-items: center;
  position: relative;
  cursor: pointer;
  transition: transform .1s ease, background .12s ease;
}
.bs-cell.is-alt { background: #a8defc; }
.bs-cell:disabled { cursor: default; }

.bs-cell.is-ship {
  background: #8fd0f8;
}
.bs-cell.is-selected-ship {
  background: #93c5fd;
  box-shadow: inset 0 0 0 2px var(--gold);
}
.bs-cell.is-shielded {
  background: #a5f3fc;
  box-shadow: inset 0 0 0 2px #06b6d4;
}

.bs-cell.is-ghost-ok { background: #8ce99a !important; }
.bs-cell.is-ghost-bad { background: #ffa8a8 !important; }

.bs-cell.is-miss { background: #dcf3ff; }
.bs-cell.is-scan { background: #d3f9d8; }
.bs-cell.is-ping {
  background: #6ee7b7;
  animation: f4-win-pulse .65s ease-in-out infinite alternate;
}
.bs-cell.is-deflect { background: #99e9f2; }
.bs-cell.is-crate { background: #ffe066; }
.bs-cell.is-mine { background: #ffc078; }
.bs-cell.is-hit { background: #ffa8a8; }
.bs-cell.is-sunk { background: #5a3c3e; }

.bs-cell.is-aim {
  background: #ffe8cc !important;
}
.bs-cell.is-aim.is-aim-radar {
  background: #c3fae8 !important;
}
.bs-cell.is-last {
  box-shadow: inset 0 0 0 2.4px #fffcf2;
}

/* Continuous multi-cell vessel silhouettes */
.bs-ship-entity,
.bs-ship-ghost {
  position: absolute;
  display: block;
  pointer-events: none;
  filter: drop-shadow(-1px 2px 0 rgba(42, 37, 34, .32));
  transition: left .12s var(--ease-pop), top .12s var(--ease-pop);
}
.bs-ship-entity svg,
.bs-ship-ghost svg {
  width: 100%;
  height: 100%;
  display: block;
}
.bs-ship-entity.is-selected {
  filter: drop-shadow(0 0 5px #ffd43b) drop-shadow(-1px 2px 0 rgba(42, 37, 34, .4));
}
.bs-ship-entity.is-shielded {
  filter: drop-shadow(0 0 7px rgba(34, 211, 238, .85));
}
.bs-ship-entity.is-sunk {
  opacity: .94;
}
.bs-ship-ghost {
  opacity: .88;
}

/* Per-cell crisp hand-drawn markers */
.bs-marker-pos {
  position: absolute;
  width: var(--bs-cell);
  height: var(--bs-cell);
  display: grid;
  place-items: center;
  pointer-events: none;
}
.bs-mark-svg {
  width: 82%;
  height: 82%;
  display: block;
  filter: drop-shadow(0 1px 0 rgba(42, 37, 34, .25));
}
.bs-mark-svg.is-hit,
.bs-mark-svg.is-sunk,
.bs-mark-svg.is-crate-open,
.bs-mark-svg.is-mine-boom {
  animation: popin .2s var(--ease-pop);
}

/* Live multi-cell weapon aiming reticles */
.bs-reticle {
  position: absolute;
  pointer-events: none;
}
.bs-reticle svg {
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes bs-radar-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.bs-radar-sweep {
  animation: bs-radar-spin 2.2s linear infinite;
}

.bs-intel-card .card-title { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.bs-last {
  display: block;
  font-size: 16.5px;
  line-height: 1.3;
  margin-bottom: 10px;
}
.bs-last .bs-emblem-svg { vertical-align: -5px; margin-right: 4px; }
.bs-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 8px;
  padding: 9px 0;
  border-top: 2px dashed rgba(42, 37, 34, .15);
  font-size: 14.5px;
  color: var(--ink-2);
}
.bs-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.bs-leg-ic {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  flex: none;
}
.bs-leg-ic svg { width: 100%; height: 100%; display: block; }

@media (max-width: 1040px) {
  .bs-layout, .bs-setup-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 720px) {
  .f4-rack { gap: 5px; padding: 9px; border-radius: 18px; }
  .f4-col-row { gap: 4px; padding: 0 8px; }
  .bs-boards { grid-template-columns: minmax(0, 1fr); }
  .bs-shop-grid { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   21. QUORIDOR (classic 9x9 wooden maze race + tournament bracket)
   ===================================================================== */
.room-page.game-quoridor { max-width: 1120px; }

.qr-layout {
  width: 100%;
  max-width: 840px;
  grid-template-columns: minmax(0, 480px) minmax(296px, 1fr);
}
.qr-layout .bracket-card {
  overflow-x: auto;
  max-width: 100%;
}
.qr-board-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

/* Player bars + wooden wall stock pips */
.qr-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--shadow-ink);
  transition: transform .16s var(--ease-pop), background .16s ease, box-shadow .16s ease;
}
.qr-bar.is-turn {
  box-shadow: -4px 5px 0 var(--ink);
  transform: translateY(-1px);
}
.qr-bar.is-a.is-turn { background: var(--blue-s); }
.qr-bar.is-b.is-turn { background: var(--red-s); }

.qr-pawn-badge {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 2.4px solid var(--ink);
  flex: none;
}
.qr-pawn-badge.is-a { background: #5cc8ff; box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .16); }
.qr-pawn-badge.is-b { background: #ff8a7a; box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .16); }

.qr-who {
  display: flex;
  flex-direction: column;
  line-height: 1.08;
  min-width: 0;
  margin-right: auto;
}
.qr-who b {
  font-family: var(--display);
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qr-who small {
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qr-stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 11px;
  background: var(--orange-s);
  border: 2px solid var(--ink);
  flex: none;
}
.qr-stock-pips {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}
.qr-wall-pip {
  width: 4px;
  height: 13px;
  border-radius: 2px;
  background: rgba(42, 37, 34, .16);
}
.qr-wall-pip.is-on {
  background: #d4872a;
  box-shadow: inset 0 -2px 0 rgba(42, 37, 34, .28);
}
.qr-stock-num {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--display);
  font-size: 13px;
}

.qr-goal-banner {
  text-align: center;
  font-family: var(--display);
  font-size: 12.5px;
  letter-spacing: .2px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: var(--green-s);
  color: var(--ink);
}
.qr-goal-banner.is-a { background: var(--blue-s); }
.qr-goal-banner.is-b { background: var(--red-s); }

/* Carved wooden 9x9 board */
.qr-board-frame {
  padding: 12px;
  background: linear-gradient(180deg, #eec17c 0%, #dda255 100%);
  border: 3px solid var(--ink);
  border-radius: 22px;
  box-shadow: -6px 8px 0 var(--ink);
  user-select: none;
}
.qr-board-inner {
  --qr-gap: 7px;
  --qr-cell: calc((100% - 8 * var(--qr-gap)) / 9);
  --qr-step: calc(var(--qr-cell) + var(--qr-gap));
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.qr-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  grid-template-rows: repeat(9, minmax(0, 1fr));
  gap: var(--qr-gap);
}
.qr-cell {
  position: relative;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: #fff9e6;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
  transition: transform .11s ease, background .12s ease, box-shadow .12s ease;
}
.qr-cell:nth-child(even) { background: #fff3d1; }
.qr-cell.is-goal-top {
  background: #e3f9df;
  border-color: var(--green-d);
}
.qr-cell.is-from { background: #fff0c2; }
.qr-cell.is-to { box-shadow: inset 0 0 0 2.5px var(--orange-d); }
.qr-cell:disabled { cursor: default; }

.qr-cell.is-legal {
  background: #c8f7d2;
  border-color: var(--ink);
  z-index: 5;
}
.qr-cell.is-legal:hover {
  background: #8ee38f;
  transform: scale(1.06);
}
.qr-cell.is-jump {
  background: #bae6fd;
}
.qr-cell.is-jump:hover {
  background: #5cc8ff;
}

.qr-move-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #2f9e6e;
  border: 2px solid var(--ink);
  font-family: var(--display);
  font-size: 11px;
  line-height: 1;
  display: grid;
  place-items: center;
  color: var(--ink);
}
.qr-cell.is-jump .qr-move-dot {
  width: 20px;
  height: 20px;
  background: #ffd34d;
}

.qr-coord {
  position: absolute;
  font-family: var(--display);
  font-size: 9.5px;
  line-height: 1;
  color: rgba(42, 37, 34, .42);
  pointer-events: none;
}
.qr-coord-row { top: 2px; left: 3px; }
.qr-coord-col { bottom: 2px; right: 3px; }

/* Wooden pawns */
.qr-pawn {
  width: 72%;
  height: 72%;
  border-radius: 50%;
  border: 2.6px solid var(--ink);
  position: relative;
  z-index: 3;
  box-shadow: 0 3px 0 rgba(42, 37, 34, .35), inset -2px -3px 0 rgba(42, 37, 34, .18), inset 2px 2px 0 rgba(255, 255, 255, .55);
  animation: popin .22s var(--ease-pop);
}
.qr-pawn::after {
  content: '';
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: rgba(255, 255, 255, .42);
  border: 1.6px solid rgba(42, 37, 34, .22);
}
.qr-pawn.is-a { background: #5cc8ff; }
.qr-pawn.is-b { background: #ff8a7a; }
.qr-pawn.is-win {
  box-shadow: 0 0 0 4px #fffcf2, 0 0 14px 3px rgba(255, 211, 77, .95);
  animation: f4-win-pulse .65s ease-in-out infinite alternate;
}

/* Placed walls + isolated zero-rerender ghost plank layer */
.qr-walls-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}
.qr-ghost-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 7;
}
.qr-plank,
.qr-ghost-plank {
  position: absolute;
  border-radius: 999px;
  border: 2.2px solid var(--ink);
}
.qr-plank.is-h,
.qr-ghost-plank.is-h {
  width: calc(2 * var(--qr-cell) + var(--qr-gap));
  height: var(--qr-gap);
}
.qr-plank.is-v,
.qr-ghost-plank.is-v {
  width: var(--qr-gap);
  height: calc(2 * var(--qr-cell) + var(--qr-gap));
}
.qr-plank {
  background: #b96418;
  box-shadow: 0 2px 0 rgba(42, 37, 34, .45);
}
.qr-plank.by-a { background: #2b8fcf; }
.qr-plank.by-b { background: #cf4f42; }
.qr-plank.is-last {
  box-shadow: 0 0 0 2.5px #ffd34d, 0 2px 0 rgba(42, 37, 34, .45);
  animation: popin .18s var(--ease-pop);
}

.qr-ghost-plank.is-hidden { display: none; }
.qr-ghost-plank.is-ok {
  background: #ffd34d;
  box-shadow: 0 0 0 2px #fffcf2;
  opacity: .92;
}
.qr-ghost-plank.is-bad {
  background: #ff6b6b;
  border-style: dashed;
  opacity: .72;
}

/* 8x8 Groove intersection hit targets */
.qr-nodes-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.qr-node {
  position: absolute;
  width: 22px;
  height: 22px;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  cursor: pointer;
}
.qr-node.is-active {
  pointer-events: auto;
}
.qr-node.is-active::after {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  margin: auto;
  border-radius: 50%;
  background: rgba(42, 37, 34, .22);
  transition: transform .12s ease, background .12s ease;
}
.qr-board-frame.wall-focus .qr-node.is-legal-node::after {
  width: 8px;
  height: 8px;
  background: #fffcf2;
  border: 1.5px solid var(--ink);
}
.qr-node.is-active:hover::after {
  transform: scale(1.65);
  background: #ffd34d;
}

/* Turn card & orientation buttons */
.qr-turn-card { box-shadow: -5px 6px 0 var(--ink); }
.qr-tool-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}
.qr-orient-btn,
.qr-flip-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--display);
  font-size: 13.5px;
  cursor: pointer;
  transition: transform .13s var(--ease-pop), background .13s ease, box-shadow .13s ease;
}
.qr-orient-btn:hover,
.qr-flip-pill:hover {
  transform: translateY(-2px);
  background: var(--sun-s);
}
.qr-orient-btn.is-on {
  background: var(--gold);
  box-shadow: -3px 3px 0 var(--ink);
  transform: translateY(-1px);
}
.qr-nowalls-note {
  margin-top: 9px;
  font-family: var(--display);
  font-size: 13.5px;
  color: var(--red-d);
}

@media (max-width: 860px) {
  .qr-layout {
    grid-template-columns: minmax(0, 1fr);
    max-width: 520px;
  }
}
@media (max-width: 520px) {
  .qr-board-frame { padding: 8px; border-radius: 17px; }
  .qr-board-inner { --qr-gap: 5px; }
  .qr-stock-pips { display: none; }
}

/* =====================================================================
   GAME CARD QUICK LAUNCH + STATIC SEO GAME PAGES + ADMIN ANALYTICS
   ===================================================================== */

.game-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 20px 18px;
}
.game-card-foot a.link-btn {
  text-decoration: none;
  color: var(--ink-2);
}
.game-card-foot a.link-btn:hover { color: var(--ink); }

/* ---------- Private Admin Analytics (#/admin) ---------- */
.admin-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 26px 20px 64px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.admin-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.admin-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.admin-title {
  font-size: clamp(26px, 4vw, 36px);
}
.admin-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 16px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 2px 12px;
  box-shadow: 2px 3px 0 rgba(42, 37, 34, 0.14);
}
.live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green-d);
  display: inline-block;
}
.admin-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.admin-gate {
  max-width: 480px;
  width: 100%;
  margin: 28px auto;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}
.admin-lead { font-size: 18px; }
.admin-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}
.admin-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--display);
  font-size: 15px;
}
.admin-form-actions {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}
.admin-err {
  color: var(--red-d);
  font-family: var(--display);
  font-size: 15px;
}
.admin-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 14px;
}
.admin-kpi {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: var(--line) solid var(--ink);
  box-shadow: -3px 4px 0 var(--ink);
}
.kpi-label {
  font-family: var(--display);
  font-size: 14px;
  color: var(--ink-2);
}
.kpi-val {
  font-family: var(--display);
  font-size: 32px;
  line-height: 1.1;
}
.kpi-sub {
  font-size: 16px;
  color: var(--ink-2);
}
.admin-block {
  padding: 20px 22px;
  border: var(--line) solid var(--ink);
  box-shadow: -3px 4px 0 var(--ink);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.admin-block-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-chart {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-chart-legend {
  display: flex;
  gap: 18px;
  font-size: 16px;
  color: var(--ink-2);
}
.swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  border: 1.5px solid var(--ink);
  vertical-align: middle;
  margin-right: 4px;
}
.sw-blue { background: var(--blue); }
.sw-pink { background: var(--pink); }
.admin-bars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(14px, 1fr);
  gap: 6px;
  height: 170px;
  align-items: end;
  padding-top: 10px;
  border-bottom: 2px solid var(--ink);
}
.admin-bar-col {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}
.admin-bar-pair {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
}
.admin-bar {
  flex: 1;
  max-width: 12px;
  border-radius: 4px 4px 0 0;
  border: 1.5px solid var(--ink);
  border-bottom: 0;
  min-height: 0;
}
.admin-bar-lbl {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  height: 18px;
}
.admin-table-wrap {
  width: 100%;
  overflow-x: auto;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 18px;
}
.admin-table th {
  font-family: var(--display);
  font-size: 14px;
  color: var(--ink-2);
  padding: 8px 10px;
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}
.admin-table td {
  padding: 10px;
  border-bottom: 1.5px dashed rgba(42, 37, 34, 0.16);
  white-space: nowrap;
}
.admin-game-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.admin-game-ico {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.admin-game-ico svg { width: 100%; height: 100%; }
.pill {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  font-family: var(--display);
  font-size: 14px;
}
.pill-green { background: var(--green-s); }
.pill-pink { background: var(--pink-s); }
.admin-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 16px;
}
.admin-rank {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-rank-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 18px;
}
.admin-rank-track {
  height: 9px;
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
}
.admin-rank-track > span {
  display: block;
  height: 100%;
  background: var(--blue);
}
.admin-device-bar {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1.5px dashed rgba(42, 37, 34, 0.2);
  font-size: 17px;
}
.admin-sub-h {
  font-size: 17px;
  margin-top: 8px;
}
.admin-live-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.admin-live-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--paper-2);
  padding: 6px 10px;
  border-radius: 10px;
  border: 1.5px solid rgba(42, 37, 34, 0.2);
}

/* ---------- Static SEO Landing Pages (/games/<slug>) ---------- */
.seo-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 28px 20px 68px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.seo-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.seo-brand {
  text-decoration: none;
  font-family: var(--display);
  font-size: 26px;
  color: var(--ink);
}
.seo-crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
}
.seo-crumb a {
  color: var(--ink-2);
  text-decoration: underline;
}
.seo-hero {
  padding: 28px 26px;
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-wobble);
  box-shadow: -4px 5px 0 var(--ink);
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}
.seo-hero-art {
  width: 168px;
  height: 168px;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-wobble-2);
  padding: 16px;
  box-shadow: 3px 4px 0 rgba(42, 37, 34, 0.14);
}
.seo-hero-art svg { width: 100%; height: 100%; }
.seo-hero-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.seo-title {
  font-size: clamp(30px, 5vw, 44px);
}
.seo-lead {
  font-size: 22px;
  color: var(--ink-2);
}
.seo-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.seo-badge {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 3px 13px;
  font-family: var(--display);
  font-size: 14px;
}
.seo-cta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.seo-join-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--paper);
  padding: 5px 8px 5px 14px;
  border-radius: 14px;
  border: 2px solid var(--ink);
}
.seo-join-inline input {
  width: 112px;
  border: 0;
  background: transparent;
  font-family: var(--display);
  font-size: 16px;
  text-transform: uppercase;
  outline: none;
  color: var(--ink);
}
.seo-card {
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-wobble);
  box-shadow: -3px 4px 0 var(--ink);
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.seo-rules {
  margin: 0;
  padding-left: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 21px;
}
.seo-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}
.seo-setting-item {
  background: var(--paper-2);
  border: 2px solid rgba(42, 37, 34, 0.22);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.seo-faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.seo-faq-item {
  background: var(--paper-2);
  border: 2px solid rgba(42, 37, 34, 0.2);
  border-radius: 14px;
  padding: 14px 16px;
}
.seo-faq-item h3 {
  font-size: 19px;
  margin-bottom: 6px;
}
.seo-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.seo-related-card {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  padding: 12px 14px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  box-shadow: -2px 3px 0 var(--ink);
  transition: transform .13s var(--ease-pop);
}
.seo-related-card:hover { transform: translateY(-2px); }
.seo-related-art { width: 46px; height: 46px; flex-shrink: 0; }
.seo-related-art svg { width: 100%; height: 100%; }

@media (max-width: 680px) {
  .seo-hero {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
  }
  .seo-hero-art { margin: 0 auto; width: 132px; height: 132px; }
  .seo-badges, .seo-cta-row { justify-content: center; }
}




/* ---------------------------------------------------------------------
   Doodle Dash + Punchline
   --------------------------------------------------------------------- */
.game-card { position: relative; }

.game.doodledash, .game.punchline { max-width: 1120px; }
.dd-stack, .pl-stack { gap: 15px; }
.dd-score-strip, .pl-score-strip {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 7px;
}
.dd-score, .pl-score {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  padding: 5px 10px 6px 6px; border: 2px solid rgba(42,37,34,.7);
  border-radius: 14px 18px 13px 17px; background: var(--paper);
  box-shadow: -2px 3px 0 rgba(42,37,34,.12); font-size: 15px;
}
.dd-score.is-you, .pl-score.is-you { background: var(--sun-s); border-color: var(--ink); }
.dd-score.is-drawer { background: var(--sun); transform: rotate(-1deg); }
.dd-score.is-solved { background: var(--green-s); }
.dd-score-name, .pl-score b { min-width: 0; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-score-name em, .pl-score em { font-family: var(--hand); font-size: 13px; color: var(--muted); }
.dd-points, .pl-score strong { margin-left: 3px; font-family: var(--display); font-size: 17px; white-space: nowrap; }
.dd-status { display: inline-flex; align-items: center; gap: 3px; color: var(--ink-2); font-size: 13px; white-space: nowrap; }
.dd-status.is-good { color: var(--green-d); }
.dd-ready { display: flex; flex-direction: column; align-items: center; gap: 11px; text-align: center; background: var(--sun-s); box-shadow: -5px 6px 0 var(--sun); }
.dd-ready-count { display: grid; place-items: center; width: 68px; height: 68px; border: 3px solid var(--ink); border-radius: 50%; background: var(--sun); font: 34px/1 var(--display); box-shadow: -4px 5px 0 rgba(42,37,34,.18); }
.dd-ready .dd-canvas { max-width: 620px; }
.dd-instruction { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; padding: 4px 10px 7px; }
.dd-instruction b { font: 22px/1.2 var(--display); }
.dd-instruction p, .dd-instruction span:not(.dd-kicker) { color: var(--ink-2); font-size: 17px; }
.dd-instruction.is-drawer > b { display: inline-block; margin: 3px 0; padding: 3px 14px 5px; border: 2px solid var(--ink); border-radius: 12px; background: var(--sun); box-shadow: -3px 4px 0 rgba(42,37,34,.15); transform: rotate(-1.5deg); font-size: 28px; }
.dd-instruction.is-solved { flex-direction: row; justify-content: center; gap: 8px; color: var(--green-d); }
.dd-instruction.is-solved b { color: var(--green-d); }
.dd-kicker { color: var(--muted); font: 14px/1.2 var(--display); text-transform: lowercase; }
.dd-play { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 15px; align-items: start; }
.dd-play.has-tools { grid-template-columns: 190px minmax(0, 1fr) 310px; }
.dd-drawing-column { min-width: 0; }
.dd-canvas.pad-frame { width: 100%; max-width: none; margin: 0; box-shadow: -5px 6px 0 var(--sun); }
.dd-canvas .pad-host { aspect-ratio: 4 / 3; width: 100%; }
.dd-canvas .ink-canvas { cursor: default; }
.dd-canvas.is-drawing .ink-canvas { cursor: crosshair; }
.dd-canvas-caption { margin-top: 8px; text-align: center; color: var(--muted); font-size: 15px; }
.dd-tools { gap: 8px; align-items: center; }
.dd-tools .pad-colors { background: var(--paper); border: 2px solid var(--ink); border-radius: 14px; padding: 7px; }
.dd-tools .pad-colors .swatch { width: 27px; height: 27px; }
.dd-tools .pad-row { gap: 7px; }
.dd-tools .pad-sizes, .dd-tools .pad-modes { gap: 2px; padding: 2px; }
.dd-tools .size-btn, .dd-tools .tool-btn { width: 34px; height: 35px; }
.dd-tools .pad-modes { flex-wrap: wrap; justify-content: center; }
.dd-guess-panel { display: flex; flex-direction: column; gap: 9px; padding: 12px; min-width: 0; }
.dd-guess-form { display: flex; gap: 7px; align-items: stretch; }
.dd-guess-form .line-input { flex: 1; min-width: 0; font-size: 19px; }
.dd-guess-form .btn { min-height: 46px; padding: 7px 13px; }
.dd-first-note { text-align: center; color: var(--muted); font-size: 15px; }
.dd-first-note b { color: var(--orange-d); }
.dd-feed { list-style: none; display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; min-width: 0; }
.dd-feed li { display: flex; align-items: center; gap: 6px; padding: 3px 5px; border-radius: 9px; font-size: 15px; min-width: 0; }
.dd-feed li b { flex: none; max-width: 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-feed li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-feed li.is-correct { background: var(--green-s); color: var(--green-d); }
.dd-feed li.is-correct > span { margin-left: auto; }
.dd-feed li em { font: 13px var(--display); color: var(--ink); white-space: nowrap; }
.dd-feed-empty { text-align: center; font-size: 15px; color: var(--muted); }
.dd-result-card { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(220px, .7fr); gap: 17px; align-items: center; }
.dd-result-card .dd-canvas { max-width: 620px; }
.dd-result-details { display: flex; flex-direction: column; gap: 13px; }
.dd-result-details > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dd-result-details b { overflow-wrap: anywhere; font-size: 17px; }
.dd-final-scores, .pl-final-scores { list-style: none; margin: 0 auto; padding: 0; width: min(100%, 620px); display: grid; gap: 8px; }
.dd-final-scores li, .pl-final-scores li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: var(--line) solid var(--ink); border-radius: 14px 18px 13px 17px; background: var(--paper); box-shadow: -3px 4px 0 rgba(42,37,34,.14); }
.dd-final-scores li.is-winner, .pl-final-scores li.is-winner { background: var(--sun-s); box-shadow: -4px 5px 0 var(--sun); }
.dd-final-scores li.is-you, .pl-final-scores li.is-you { outline: 2px dashed var(--ink); outline-offset: 2px; }
.dd-place, .pl-place { display: grid; place-items: center; flex: none; width: 31px; height: 31px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper-2); font: 15px var(--display); }
.dd-final-scores li b, .pl-final-scores li b { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-final-scores li strong, .pl-final-scores li strong { font: 20px var(--display); white-space: nowrap; }

.pl-write-head { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.pl-write-head .banner { flex: 1 1 420px; }
.pl-done-pill, .pl-voted-mark { display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px; border: 2px solid var(--ink); border-radius: 999px; background: var(--green-s); font: 14px var(--display); white-space: nowrap; }
.pl-prompts, .pl-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.pl-prompt-card { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; background: var(--paper); box-shadow: -4px 5px 0 var(--pink); }
.pl-prompt-card:nth-child(2n) { background: var(--pink-s); transform: rotate(.35deg); }
.pl-prompt-card.is-done { opacity: .88; }
.pl-prompt-number { color: var(--muted); font: 13px var(--display); text-transform: lowercase; }
.pl-prompt-card h2, .pl-matchup h2, .pl-result-match h2 { font: 21px/1.4 var(--hand); text-align: center; overflow-wrap: anywhere; }
.pl-blank { display: inline-block; padding: 0 7px 1px; border-bottom: 2px dashed var(--pink-d); border-radius: 4px; background: var(--sun-s); color: var(--ink); font-family: var(--display); white-space: nowrap; }
.pl-prompt-card textarea { display: block; width: min(100%, 500px); min-height: 76px; padding: 10px 12px; resize: vertical; border: 2px solid var(--ink); border-radius: 12px 16px 13px 15px; background: #fffef8; color: var(--ink); font: 19px/1.35 var(--hand); }
.pl-prompt-card textarea:focus { outline: 3px dashed var(--pink-d); outline-offset: 2px; }
.pl-prompt-card textarea[readonly] { background: var(--green-s); }
.pl-submit { min-height: 43px; padding: 9px 16px; font-size: 16px; }
.pl-saved { display: inline-flex; align-items: center; gap: 5px; color: var(--green-d); font: 15px var(--display); }
.pl-progress { width: min(100%, 500px); height: 13px; margin: 2px auto 0; overflow: hidden; border: 2px solid var(--ink); border-radius: 99px; background: var(--paper); }
.pl-progress span { display: block; height: 100%; border-radius: inherit; background: var(--green); transition: width .35s var(--ease-pop); }
.pl-progress-label, .pl-vote-progress { color: var(--muted); text-align: center; font-size: 15px; }
.pl-matchups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.pl-matchup, .pl-result-match { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pl-matchup { background: var(--paper); box-shadow: -4px 5px 0 var(--pink); }
.pl-matchup.is-voted { background: var(--paper-2); }
.pl-match-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font: 13px var(--display); }
.pl-voted-mark { background: var(--green-s); color: var(--green-d); font-size: 12px; padding: 2px 8px; }
.pl-choices, .pl-result-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; min-width: 0; }
.pl-choice { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; min-height: 132px; padding: 13px 12px; border: 2.5px solid var(--ink); border-radius: 14px 18px 13px 17px; background: var(--sun-s); box-shadow: -3px 4px 0 var(--sun); text-align: left; transition: transform .16s var(--ease-pop), background .16s; }
.pl-choice.is-alt { background: var(--pink-s); box-shadow: -3px 4px 0 var(--pink); }
.pl-choice:hover:not(:disabled) { transform: translateY(-3px) rotate(-.7deg); }
.pl-choice:disabled { cursor: default; }
.pl-choice.is-own { opacity: .58; border-style: dashed; }
.pl-choice.is-empty { color: var(--muted); }
.pl-choice-letter { display: grid; place-items: center; flex: none; width: 25px; height: 25px; border: 1.7px solid var(--ink); border-radius: 50%; background: var(--paper); font: 13px var(--display); text-transform: uppercase; }
.pl-choice-text { width: 100%; overflow-wrap: anywhere; font: 18px/1.3 var(--display); }
.pl-choice small { margin-top: auto; color: var(--muted); font-size: 13px; }
.pl-result-match { background: var(--paper); box-shadow: -4px 5px 0 var(--pink); }
.pl-result-answer { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; padding: 11px 10px; border: 2px solid var(--ink); border-radius: 13px 16px 12px 15px; background: var(--sun-s); }
.pl-result-answer:nth-child(2) { background: var(--pink-s); }
.pl-result-answer.is-winner { border-width: 3px; background: var(--green-s); box-shadow: -2px 3px 0 var(--green); }
.pl-result-answer.is-empty { opacity: .65; }
.pl-result-answer p { width: 100%; min-height: 40px; overflow-wrap: anywhere; font: 17px/1.3 var(--display); }
.pl-author { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 14px; }
.pl-author b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-vote-count { margin-top: auto; color: var(--muted); font: 12px var(--display); }
.pl-round-winner { padding-top: 6px; border-top: 1.5px dashed rgba(42,37,34,.2); text-align: center; font: 15px var(--display); }

@media (max-width: 860px) {
  .dd-play, .dd-play.has-tools { grid-template-columns: minmax(0, 1fr); }
  .dd-play.has-tools .dd-tools { order: 0; }
  .dd-play.has-tools .dd-drawing-column { order: 1; }
  .dd-play.has-tools .dd-guess-panel { order: 2; }
  .dd-tools .pad-row { flex-wrap: wrap; }
  .dd-result-card { grid-template-columns: minmax(0, 1fr); }
  .dd-result-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dd-score, .pl-score { gap: 5px; padding: 4px 7px 4px 5px; font-size: 13px; }
  .dd-score-name, .pl-score b { max-width: 90px; }
  .dd-status { display: none; }
  .dd-play, .dd-play.has-tools { gap: 10px; }
  .dd-tools .pad-colors { display: grid; grid-template-columns: repeat(7, 27px); gap: 5px; }
  .dd-tools .pad-colors .swatch { width: 27px; height: 27px; }
  .dd-tools .pad-row { gap: 6px; }
  .dd-tools .size-btn, .dd-tools .tool-btn { width: 32px; height: 33px; }
  .dd-guess-form .line-input { font-size: 17px; }
  .dd-result-details { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pl-prompts, .pl-matchups, .pl-results { grid-template-columns: minmax(0, 1fr); }
  .pl-choices, .pl-result-answers { gap: 7px; }
  .pl-choice { padding: 10px 9px; min-height: 116px; }
  .pl-choice-text { font-size: 16px; }
  .pl-result-answer { padding: 9px 8px; }
  .pl-prompt-card h2, .pl-matchup h2, .pl-result-match h2 { font-size: 19px; }
}
.dd-gallery { display: flex; flex-direction: column; gap: 10px; }
.dd-gallery h3 { text-align: center; font-size: 22px; }
.dd-gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.dd-gallery-item { padding: 10px; box-shadow: -3px 4px 0 var(--sun); }
.dd-gallery-item .dd-canvas { width: 100%; max-width: none; box-shadow: none; }
.dd-gallery-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; padding: 7px 3px 0; font-size: 14px; }
.dd-gallery-caption b { font-size: 14px; }
.dd-gallery-caption span { color: var(--muted); }
@media (max-width: 640px) { .dd-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }

/* =====================================================================
   CASE FILE — shared detective notebook, private location keys & city map
   ===================================================================== */
.cf-candidate-name { display: flex; flex-direction: column; min-width: 0; }
.cf-candidate-name small { color: var(--muted); font-size: 9px; line-height: 1.1; }

.game.casefile { --cf-teal: #56b99f; --cf-deep: #337d70; --cf-paper: #fffdf4; --cf-map: #b8e2e7; }
.cf-stack { width: min(100%, 1160px); margin-inline: auto; gap: 12px; }
.cf-case-heading { max-width: 900px; min-width: 0; margin-inline: auto; text-align: center; }
.cf-case-mark { display: inline-flex; align-items: center; padding: 4px 10px; border: 1.5px dashed rgba(42,37,34,.42); border-radius: 999px; color: var(--cf-deep); font: 11px var(--display); letter-spacing: .06em; text-transform: uppercase; }
.cf-case-heading h2 { margin: 5px 0 3px; font: clamp(26px, 4vw, 39px)/1.05 var(--display); text-transform: lowercase; }
.cf-case-heading p { max-width: 820px; margin: 0 auto; color: var(--muted); font-size: 14px; line-height: 1.4; }
.cf-story-stamps { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px 9px; margin-top: 7px; color: var(--cf-deep); font: 11px var(--display); }
.cf-story-stamps > span { padding: 3px 8px; border: 1px dashed rgba(42,37,34,.3); border-radius: 999px; background: var(--paper); }
.cf-story-stamps > i { font-style: normal; }
.cf-grid-layout { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, .78fr); align-items: start; gap: 12px; width: min(100%, 1160px); margin-inline: auto; }
.cf-main-column, .cf-side-column { display: flex; flex-direction: column; gap: 12px; min-width: 0; width: 100%; }
.cf-panel { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; padding: 12px; border: 2px solid var(--ink); border-radius: 18px 21px 16px 20px; background: var(--cf-paper); box-shadow: -4px 5px 0 rgba(42,37,34,.12); }
.cf-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; margin: 0 2px 7px; }
.cf-panel-head > div { flex: 1; min-width: 0; }
.cf-panel-head h3 { margin: 1px 0 0; font: 20px/1.1 var(--display); text-transform: lowercase; }
.cf-kicker { display: block; color: var(--cf-deep); font: 10px var(--display); letter-spacing: .05em; text-transform: uppercase; }
.cf-map-count, .cf-evidence-count { flex: none; padding: 4px 8px; border-radius: 999px; background: var(--teal-s); color: var(--cf-deep); font: 11px var(--display); }
.cf-map-hint, .cf-logic-help { margin: 0 2px 9px; color: var(--muted); font-size: 13px; }
.cf-city-map { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 640px; margin-inline: auto; min-height: 0; overflow: hidden; border: 2px solid rgba(42,37,34,.68); border-radius: 17px 21px 15px 19px; background: #aad3df; isolation: isolate; }
.cf-map-tiles { position: absolute; inset: 0; z-index: 0; }
.cf-map-tile { position: absolute; width: 25%; height: 25%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.cf-map-credit { position: absolute; right: 4px; bottom: 3px; z-index: 4; padding: 1px 5px; border-radius: 4px; background: rgba(255,255,255,.82); color: #444; font: 9px/1.4 ui-sans-serif, system-ui, sans-serif; }
.cf-map-credit a { color: #2f6f8f; }
.cf-map-water { fill: #d2edf0; }
.cf-map-land, .cf-map-east { fill: #f7efd9; stroke: #c6b996; stroke-width: 4; stroke-linejoin: round; }
.cf-map-charles { fill: none; stroke: #b7e1e5; stroke-width: 32; stroke-linecap: round; opacity: .95; }
.cf-map-park { fill: #d0e2bb; stroke: #a9be93; stroke-width: 2; }
.cf-map-labels { fill: #827a66; font: 12px var(--display); letter-spacing: .08em; opacity: .78; }
.cf-map-labels .is-water { fill: #5f98a2; font-size: 10px; font-style: italic; }
.cf-map-labels { font: 600 11px ui-sans-serif, system-ui, sans-serif; letter-spacing: .04em; }
.cf-map-site { position: absolute; z-index: 2; left: var(--x); top: var(--y); display: grid; place-items: center; width: 38px; height: 38px; min-width: 38px; padding: 0; transform: translate(-50%, -50%); border: 0; border-radius: 50%; background: transparent; color: var(--ink); text-align: center; }
button.cf-map-site { cursor: pointer; }
button.cf-map-site:hover { z-index: 3; transform: translate(-50%, -50%) scale(1.12); }
button.cf-map-site:focus-visible { outline: 3px dashed var(--ink); outline-offset: 2px; }
.cf-map-site.is-locked { opacity: .62; }
.cf-site-dot { display: grid; place-items: center; width: 17px; height: 17px; border: 2px solid rgba(42,37,34,.65); border-radius: 50%; background: #fffdf4; box-shadow: 0 2px 0 rgba(42,37,34,.15); color: var(--cf-deep); font: 12px/1 var(--display); }
.cf-map-site.is-yours .cf-site-dot { width: 23px; height: 23px; border: 3px solid var(--ink); background: var(--red-s); box-shadow: 0 0 0 4px rgba(255,252,242,.78), 0 3px 0 rgba(42,37,34,.2); }
.cf-map-site.is-opened .cf-site-dot { border-color: var(--cf-deep); background: var(--teal-s); color: var(--cf-deep); font-size: 14px; }
.cf-site-name { position: absolute; top: 27px; left: 50%; width: max-content; max-width: 110px; padding: 2px 5px; transform: translateX(-50%); border: 1px solid rgba(42,37,34,.22); border-radius: 5px; background: rgba(255,252,242,.92); color: var(--ink); font: 9px/1.1 var(--display); pointer-events: none; }
.cf-map-stamp { position: absolute; top: 8px; right: 10px; z-index: 3; padding: 3px 7px; transform: rotate(2deg); border: 1.2px solid rgba(42,37,34,.3); border-radius: 5px; background: rgba(255,252,242,.82); color: rgba(42,37,34,.62); font: 8px/1.1 var(--display); text-align: center; letter-spacing: .05em; pointer-events: none; }
.cf-map-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 12px; margin-top: 8px; color: var(--muted); font-size: 11px; }
.cf-map-legend > span { display: inline-flex; align-items: center; gap: 4px; }
.cf-legend-dot { width: 10px; height: 10px; border: 1px dashed rgba(42,37,34,.55); border-radius: 50%; background: #fffdf4; }
.cf-legend-dot.is-yours { border: 2px solid var(--ink); background: var(--red-s); }
.cf-legend-dot.is-shared { border: 2px solid var(--cf-deep); background: var(--teal-s); }
.cf-task-scrim { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 12px; background: rgba(35,52,49,.35); backdrop-filter: blur(2px); }
.cf-task-dialog { width: min(100%, 450px); max-height: 100%; overflow-y: auto; padding: 14px; border: 2px solid var(--ink); border-radius: 17px 21px 16px 19px; background: var(--cf-paper); box-shadow: -5px 6px 0 rgba(42,37,34,.24); }
.cf-task-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.cf-task-top .cf-kicker { min-width: 0; overflow-wrap: anywhere; }
.cf-task-close { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; }
.cf-task-dialog h3 { margin: 7px 0 4px; font: 20px/1.1 var(--display); text-transform: lowercase; }
.cf-task-prompt { margin: 0; color: var(--ink-2); font: 16px/1.3 var(--hand); }
.cf-task-choices { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.cf-task-choices li { min-width: 0; }
.cf-task-choice { display: flex; align-items: center; gap: 9px; width: 100%; min-width: 0; padding: 8px 10px; border: 1.5px solid rgba(42,37,34,.45); border-radius: 10px 13px 9px 12px; background: #fff7dc; color: var(--ink); font: 15px/1.2 var(--hand); text-align: left; cursor: pointer; }
.cf-task-choice:hover:not(:disabled) { border-color: var(--cf-deep); background: var(--teal-s); }
.cf-task-choice:disabled { opacity: .55; cursor: wait; }
.cf-task-choice kbd { display: grid; place-items: center; flex: none; width: 25px; height: 25px; border: 1px solid rgba(42,37,34,.4); border-radius: 7px; background: #fff; color: var(--cf-deep); font: 12px var(--display); }
.cf-task-choice span { min-width: 0; overflow-wrap: anywhere; }
.cf-task-feedback { margin: 8px 0 0; color: var(--red-d); font: 13px var(--display); }
.cf-task-note { display: block; margin-top: 9px; color: var(--muted); font: 11px/1.3 var(--hand); }
.cf-evidence-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.cf-evidence { min-width: 0; padding: 9px 10px; border: 1.5px solid rgba(42,37,34,.65); border-radius: 12px 15px 11px 14px; background: #fff7dc; box-shadow: -2px 3px 0 rgba(42,37,34,.1); }
.cf-evidence:nth-child(3n + 2) { transform: rotate(.35deg); }
.cf-evidence:nth-child(3n) { transform: rotate(-.35deg); }
.cf-evidence.is-discarded { background: #eee9dc; opacity: .72; }
.cf-evidence.is-lie { border-color: var(--red-d); background: var(--red-s); }
.cf-evidence.is-true { border-color: var(--cf-deep); background: var(--teal-s); }
.cf-evidence-top { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; min-width: 0; color: var(--muted); font: 9px var(--display); text-transform: lowercase; }
.cf-evidence-number { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 1px solid rgba(42,37,34,.3); border-radius: 50%; background: var(--paper); color: var(--ink); }
.cf-evidence-place { display: inline-flex; align-items: center; gap: 2px; min-width: 0; }
.cf-evidence-by { margin-left: auto; max-width: 105px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-evidence > p { margin: 6px 0 7px; font: 15px/1.2 var(--hand); }
.cf-visual { margin: 8px 0; padding: 7px 8px 5px; border: 1.5px dashed rgba(42,37,34,.38); border-radius: 12px 14px 11px 13px; background: #fffdf6; }
.cf-visual svg { display: block; width: 100%; height: auto; }
.cf-visual figcaption { margin-top: 2px; color: #6b6257; font: 9.5px/1.25 ui-sans-serif, system-ui, sans-serif; text-align: center; text-transform: lowercase; }
.cf-visual.is-compact { margin: 2px 0 7px; padding: 5px 6px 3px; background: rgba(255,255,255,.66); }
.cf-visual.is-compact figcaption { font-size: 8.5px; }
.cf-discarded-label, .cf-truth-label { display: inline-block; color: var(--cf-deep); font: 10px var(--display); text-transform: lowercase; }
.cf-evidence.is-discarded .cf-discarded-label { color: var(--muted); }
.cf-empty-evidence { display: grid; place-items: center; gap: 6px; min-height: 90px; color: var(--muted); text-align: center; }
.cf-empty-evidence p { margin: 0; font-size: 13px; }
.cf-empty-stamp { padding: 4px 10px; transform: rotate(-2deg); border: 1.5px dashed rgba(42,37,34,.35); border-radius: 5px; color: rgba(42,37,34,.48); font: 11px var(--display); }
.cf-liar-note { margin: 0 1px 8px; padding: 6px 8px; border-left: 3px solid var(--sun); border-radius: 0 8px 8px 0; background: var(--sun-s); color: var(--ink); font-size: 12px; }
.cf-evidence .btn { min-height: 30px; padding: 4px 8px; font-size: 11px; }
.cf-logic-panel { background: #f3f3ff; }
.cf-mark-key { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 5px; color: var(--muted); font: 9px var(--hand); }
.cf-mark-key i { display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid rgba(42,37,34,.35); border-radius: 5px; background: var(--paper); color: var(--ink); font: 12px var(--display); font-style: normal; }
.cf-candidate-columns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.cf-candidate-group { min-width: 0; padding: 7px; border: 1px solid rgba(42,37,34,.22); border-radius: 11px 13px 10px 12px; background: rgba(255,255,255,.7); }
.cf-candidate-group h4 { margin: 0 0 5px; color: var(--cf-deep); font: 12px var(--display); text-transform: lowercase; }
.cf-candidate-group ul { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cf-candidate { display: flex; align-items: center; gap: 5px; width: 100%; min-width: 0; padding: 4px 3px; border: 0; border-radius: 7px; background: transparent; color: var(--ink); font: 12px/1.05 var(--hand); text-align: left; cursor: pointer; }
.cf-candidate:hover { background: rgba(127,220,201,.23); }
.cf-mark-symbol { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border: 1.2px solid rgba(42,37,34,.35); border-radius: 6px 8px 5px 7px; background: #fff; color: var(--muted); font: 13px var(--display); }
.cf-candidate.is-out .cf-mark-symbol { border-color: #cf6e64; background: var(--red-s); color: var(--red-d); }
.cf-candidate.is-out > span:last-child { color: var(--muted); text-decoration: line-through; }
.cf-candidate.is-yes .cf-mark-symbol { border-color: var(--cf-deep); background: var(--teal-s); color: var(--cf-deep); }
.cf-candidate.is-yes > span:last-child { color: var(--cf-deep); font-weight: 700; }
.cf-ballot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; padding: 10px; border: 2px solid var(--ink); border-radius: 15px 19px 14px 17px; background: var(--sun-s); box-shadow: -3px 4px 0 rgba(42,37,34,.15); }
.cf-ballot-art { display: grid; place-items: center; width: 38px; height: 38px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--paper); color: var(--cf-deep); }
.cf-ballot-copy { min-width: 0; }
.cf-ballot-copy h3 { margin: 1px 0 3px; font: 17px var(--display); }
.cf-ballot-copy p { margin: 0; color: var(--muted); font-size: 12px; }
.cf-ballot-copy blockquote { margin: 6px 0 0; padding-left: 8px; border-left: 2px solid var(--sun); font: 13px/1.2 var(--hand); }
.cf-ballot-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 100%; min-width: 0; }
.cf-ballot-actions > * { min-width: 0; }
.cf-vote-btn { width: 100%; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.cf-vote-btn { display: flex; align-items: center; justify-content: center; min-height: 39px; gap: 5px; padding: 5px 8px; }
.cf-vote-btn.is-selected { outline: 2px dashed var(--ink); outline-offset: 1px; }
.cf-ballot-actions > small { grid-column: 1 / -1; color: var(--muted); font: 11px var(--display); text-align: center; }
.cf-proposed-answer, .cf-solution { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: 7px; }
.cf-proposed-answer > span, .cf-solution > span { display: flex; flex-direction: column; min-width: 0; padding: 5px 7px; border: 1px solid rgba(42,37,34,.22); border-radius: 8px 10px 7px 9px; background: rgba(255,255,255,.74); }
.cf-proposed-answer small, .cf-solution small { color: var(--muted); font: 9px var(--display); text-transform: uppercase; }
.cf-proposed-answer b, .cf-solution b { overflow-wrap: anywhere; font: 12px var(--hand); }
.cf-hints { display: flex; flex-direction: column; gap: 7px; padding: 10px; border: 1.5px dashed rgba(42,37,34,.4); border-radius: 14px 17px 13px 16px; background: rgba(255,252,242,.8); }
.cf-hints-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 6px; align-items: center; }
.cf-hints-copy .cf-kicker { grid-column: 1 / -1; }
.cf-hints-copy b { font: 16px var(--display); }
.cf-hints-copy small { color: var(--muted); font: 10px var(--hand); text-align: right; }
.cf-hint-list { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; }
.cf-hint-list li { display: flex; flex-direction: column; gap: 2px; padding: 7px 8px; border-left: 3px solid var(--purple); border-radius: 0 9px 8px 0; background: var(--purple-s); font-size: 12px; }
.cf-hint-list b { font: 10px var(--display); text-transform: uppercase; }
.cf-hints > .btn { align-self: stretch; width: 100%; max-width: 100%; min-width: 0; min-height: 40px; box-sizing: border-box; gap: 6px; padding: 8px 9px; white-space: normal; line-height: 1.1; }
.cf-hints > .btn > span { min-width: 0; overflow-wrap: anywhere; text-align: center; }
.cf-wait-host { display: flex; align-items: center; gap: 6px; padding: 8px; border: 1px dashed rgba(42,37,34,.35); border-radius: 10px; color: var(--muted); font-size: 12px; }
.cf-accuse-form { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; padding: 11px; border: 2px solid var(--ink); border-radius: 15px 19px 14px 17px; background: var(--red-s); box-shadow: -3px 4px 0 rgba(42,37,34,.14); }
.cf-accuse-copy h3 { margin: 2px 0; font: 16px var(--display); }
.cf-accuse-copy p { margin: 0; color: var(--muted); font-size: 12px; }
.cf-accuse-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cf-accuse-fields label { display: flex; flex-direction: column; gap: 3px; min-width: 0; color: var(--cf-deep); font: 10px var(--display); text-transform: uppercase; }
.cf-accuse-fields select { width: 100%; min-width: 0; min-height: 38px; padding: 5px 6px; border: 1.5px solid var(--ink); border-radius: 9px 11px 8px 10px; background: var(--paper); color: var(--ink); font: 13px var(--hand); text-transform: none; }
.cf-submit-accusation { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; max-width: 100%; min-width: 0; min-height: 40px; padding: 6px; flex-wrap: wrap; white-space: normal; }
.cf-submit-accusation > span { min-width: 0; overflow-wrap: anywhere; text-align: center; }
.cf-accuse-form, .cf-hints, .cf-wait-host, .cf-last-result { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.cf-last-result { padding: 8px 9px; transform: rotate(-.4deg); border: 1.5px dashed var(--red-d); border-radius: 11px 13px 10px 12px; background: var(--red-s); color: var(--red-d); font: 13px var(--display); text-align: center; }
.cf-guess-history { padding: 10px; border: 1px dashed rgba(42,37,34,.35); border-radius: 13px 15px 12px 14px; background: var(--paper-2); }
.cf-guess-history > b { font: 12px var(--display); text-transform: lowercase; }
.cf-guess-history ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.cf-guess-history li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 5px; min-width: min(100%, 210px); padding: 5px 7px; border-radius: 9px; background: #fff; }
.cf-guess-history li > span { grid-row: span 2; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--red-s); color: var(--red-d); font: 11px var(--display); }
.cf-guess-history li p { margin: 0; font: 11px/1.15 var(--hand); }
.cf-guess-history li small { color: var(--muted); font: 9px var(--hand); }
.cf-final-stack { width: min(100%, 940px); margin-inline: auto; }
.cf-final-answer { padding: 15px; border: 2.5px solid var(--ink); border-radius: 20px 25px 18px 23px; background: var(--red-s); box-shadow: -5px 6px 0 rgba(42,37,34,.16); text-align: center; }
.cf-final-answer.is-solved { background: var(--teal-s); }
.cf-final-answer h3 { margin: 2px 0 8px; font: 25px var(--display); text-transform: lowercase; }
.cf-final-answer .cf-solution { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 700px; margin: 0 auto; }
.cf-final-answer .cf-solution > span { align-items: center; padding: 8px 5px; border-color: rgba(42,37,34,.35); }
.cf-final-answer .cf-solution b { font-size: 15px; }
.cf-final-answer p { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.cf-grade-card { display: grid; grid-template-columns: 105px minmax(0, 1fr); align-items: center; gap: 12px; max-width: 760px; margin: 12px auto 0; padding: 10px; border: 1.8px solid rgba(42,37,34,.65); border-radius: 18px 22px 17px 20px; background: rgba(255,252,242,.92); box-shadow: -3px 4px 0 rgba(42,37,34,.12); text-align: left; }
.cf-grade-card.is-solved { background: #f3fbef; }
.cf-grade-card.is-lost { background: #fff3ed; }
.cf-grade-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; transform: rotate(-4deg); border: 2px solid var(--ink); border-radius: 44% 56% 49% 51% / 54% 43% 57% 46%; background: #ffe36e; color: var(--ink); }
.cf-grade-card.is-lost .cf-grade-badge { background: #ffc9bd; }
.cf-grade-badge span, .cf-grade-badge small { font: 11px/1 var(--display); text-transform: uppercase; }
.cf-grade-badge strong { margin: 1px 0; font: 48px/.95 var(--display); }
.cf-grade-body { min-width: 0; }
.cf-grade-topline { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.cf-grade-topline > div { min-width: 0; }
.cf-grade-topline h4 { margin: 2px 0 0; font: 16px/1.15 var(--display); }
.cf-grade-score { flex: none; color: var(--cf-deep); font: 21px/1 var(--display); }
.cf-grade-score small { color: var(--muted); font: 10px var(--display); }
.cf-grade-meter { height: 9px; overflow: hidden; margin: 7px 0; border: 1.4px solid var(--ink); border-radius: 99px; background: #fff; }
.cf-grade-meter > span { display: block; width: var(--cf-grade-fill); height: 100%; border-right: 1px solid var(--ink); border-radius: inherit; background: var(--cf-teal); }
.cf-grade-card.is-lost .cf-grade-meter > span { background: #ff9c87; }
.cf-grade-breakdown { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 12px; }
.cf-grade-breakdown > div { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; min-width: 0; padding: 3px 1px; border-bottom: 1px dashed rgba(42,37,34,.2); }
.cf-grade-breakdown > div > span { min-width: 0; color: var(--muted); font: 11px/1.15 var(--hand); }
.cf-grade-breakdown > div > b { flex: none; color: var(--cf-deep); font: 12px var(--display); }
.cf-grade-breakdown small { color: var(--muted); font: 9px var(--display); }
.cf-grade-note { margin: 6px 0 0 !important; font-size: 11px !important; text-align: left; }
.cf-final-stack > .cf-evidence-panel { width: 100%; }
.cf-final-stack .end-row { margin-top: 2px; }
.cf-briefing-modal { --cf-deep: #337d70; width: min(620px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; text-align: left; }
.cf-briefing-modal h3 { padding-right: 36px; font-size: clamp(22px, 4vw, 30px); text-align: center; }
.cf-briefing-modal p.cf-briefing-kicker { margin: 0 0 9px; color: var(--cf-deep); font: 12px var(--display); letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.cf-briefing-modal p.cf-briefing-copy { margin: 0; color: var(--ink-2); font: 17px/1.4 var(--hand); }
.cf-briefing-milestones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.cf-briefing-milestones > span { min-width: 0; padding: 8px 6px; border: 1px dashed rgba(42,37,34,.35); border-radius: 10px 12px 9px 11px; background: var(--paper-2); color: var(--ink-2); font: 13px/1.2 var(--hand); text-align: center; }
.cf-briefing-milestones b { display: block; margin-bottom: 3px; color: var(--cf-deep); font: 14px var(--display); }
.cf-briefing-actions { display: flex; justify-content: center; margin-top: 14px; }

@media (max-width: 920px) {
  .cf-grid-layout { grid-template-columns: minmax(0, 1fr); }
  .cf-side-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .cf-ballot { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .cf-stack { gap: 9px; }
  .cf-panel { padding: 8px; }
  .cf-panel-head { align-items: flex-start; }
  .cf-panel-head h3 { font-size: 17px; }
  .cf-panel-head .cf-mark-key { max-width: 150px; }
  .cf-map-hint, .cf-logic-help { font-size: 11px; }
  .cf-map-site { width: 34px; height: 34px; min-width: 34px; }
  .cf-site-name { top: 25px; max-width: 86px; padding-inline: 3px; font-size: 8px; }
  .cf-map-stamp { top: 6px; right: 6px; font-size: 7px; }
  .cf-map-legend { gap: 4px 8px; font-size: 9px; }
  .cf-evidence-list { grid-template-columns: minmax(0, 1fr); }
  .cf-candidate-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .cf-candidate-group { padding: 5px; }
  .cf-candidate { font-size: 11px; }
  .cf-mark-key { font-size: 8px; }
  .cf-side-column { grid-template-columns: minmax(0, 1fr); }
  .cf-ballot { grid-column: auto; }
  .cf-hints-copy small { font-size: 9px; }
  .cf-accuse-fields { gap: 5px; }
  .cf-accuse-fields select { font-size: 12px; }
  .cf-final-answer { padding: 10px 7px; }
  .cf-final-answer h3 { font-size: 20px; }
  .cf-grade-card { grid-template-columns: 66px minmax(0, 1fr); gap: 7px; padding: 7px; }
  .cf-grade-badge strong { font-size: 35px; }
  .cf-grade-badge span, .cf-grade-badge small { font-size: 8px; }
  .cf-grade-topline h4 { font-size: 13px; }
  .cf-grade-score { font-size: 17px; }
  .cf-grade-breakdown { grid-template-columns: minmax(0, 1fr); gap: 1px; }
  .cf-grade-breakdown > div > span { font-size: 10px; }
  .cf-final-answer .cf-solution { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-final-answer .cf-solution b { font-size: 13px; }
  .cf-guess-history li { min-width: 100%; }
}

/* =====================================================================
   CODE LINK — 5×5 notebook word cards, team colours + hidden-key reveals
   ===================================================================== */
.game.codelink { --cl-red: #ff8a7a; --cl-blue: #8fa8ff; --cl-cream: #fff7dc; }
.cl-stack { width: min(100%, 1040px); margin-inline: auto; gap: 13px; }
.cl-rosters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cl-roster { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 9px 11px; border: 2px solid var(--ink); border-radius: 15px 19px 14px 17px; background: var(--paper); box-shadow: -3px 4px 0 rgba(42,37,34,.13); }
.cl-roster-red { background: var(--red-s); }
.cl-roster-blue { background: var(--cobalt-s); }
.cl-roster-title { font: 14px var(--display); text-transform: lowercase; }
.cl-roster-players { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-roster-player { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0; padding: 3px 7px 3px 3px; border: 1.5px solid rgba(42,37,34,.28); border-radius: 999px; background: rgba(255,252,242,.9); font: 13px var(--hand); }
.cl-roster-player > span { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-roster-player.is-you { outline: 2px dashed var(--ink); outline-offset: 1px; }
.cl-roster-player i { padding: 1px 5px; border-radius: 999px; background: var(--sun-s); font: 10px var(--display); font-style: normal; }
.cl-team-progress { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.cl-team-meter { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; min-width: 0; padding: 7px 10px; border: 1.5px solid var(--ink); border-radius: 12px 15px 11px 14px; background: var(--paper); font: 12px var(--display); }
.cl-team-meter > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-team-meter > b { font: 12px var(--display); }
.cl-team-meter > i { grid-column: 1 / -1; display: block; height: 8px; overflow: hidden; border: 1.5px solid var(--ink); border-radius: 99px; background: var(--paper-2); }
.cl-team-meter > i > u { display: block; height: 100%; border-radius: inherit; background: var(--red); transition: width .25s var(--ease-pop); text-decoration: none; }
.cl-team-meter-blue > i > u { background: var(--cl-blue); }
.cl-duet-turn { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; padding: 7px 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); box-shadow: -2px 3px 0 rgba(42,37,34,.12); font-size: 15px; }
.cl-duet-turn strong { margin-left: auto; padding: 3px 9px; border-radius: 999px; background: var(--cobalt-s); font: 12px var(--display); }
.cl-last-turn { width: fit-content; max-width: 100%; margin: 0 auto; padding: 5px 11px; border: 1.5px dashed rgba(42,37,34,.42); border-radius: 999px; color: var(--muted); font-size: 14px; text-align: center; }
.cl-last-turn b { color: var(--ink); font-family: var(--display); }
.cl-last-turn > span { margin-left: 4px; }
.cl-duet-boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; width: min(100%, 1160px); margin-inline: auto; }
.cl-duet-board { min-width: 0; padding: 9px; border: 2px solid var(--ink); border-radius: 16px 19px 14px 18px; background: var(--paper); box-shadow: -3px 4px 0 rgba(42,37,34,.13); }
.cl-duet-board.is-active { background: var(--cobalt-s); box-shadow: -4px 5px 0 var(--cl-blue); }
.cl-duet-board-head { display: flex; align-items: center; justify-content: space-between; gap: 7px; min-width: 0; margin: 0 2px 7px; }
.cl-duet-board-head b { font: 14px var(--display); text-transform: lowercase; white-space: nowrap; }
.cl-duet-board-head span { min-width: 0; color: var(--muted); font: 11px var(--hand); text-align: right; }
.cl-duet-board.is-active .cl-duet-board-head span { color: var(--cobalt-d); }
.cl-duet-board .cl-board-wrap { width: 100%; }
.cl-duet-board .cl-board { gap: clamp(3px, .55vw, 6px); padding: clamp(4px, .7vw, 8px); border-width: 2px; border-radius: 13px 16px 12px 15px; box-shadow: -3px 4px 0 rgba(42,37,34,.13); }
.cl-duet-board .cl-tile { min-height: clamp(43px, 5.4vw, 70px); }
.cl-duet-board .cl-tile-word { font-size: clamp(8px, 1.25vw, 14px); }
.cl-board-wrap { display: flex; flex-direction: column; gap: 5px; width: min(100%, 900px); margin-inline: auto; }
.cl-board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(4px, .8vw, 8px); min-width: 0; padding: clamp(6px, 1.1vw, 12px); border: 2.5px solid var(--ink); border-radius: 18px 22px 16px 21px; background: #eadfbd; box-shadow: -5px 6px 0 rgba(42,37,34,.16); }
.cl-tile { position: relative; display: grid; place-items: center; align-content: center; gap: 3px; min-width: 0; min-height: clamp(43px, 7.4vw, 82px); padding: 5px 3px; overflow: hidden; border: 2px solid var(--ink); border-radius: 11px 14px 10px 13px; background: var(--paper); box-shadow: 0 2px 0 rgba(42,37,34,.1); color: var(--ink); transition: transform .12s var(--ease-pop), box-shadow .12s, background .14s; }
.cl-tile:nth-child(4n + 2) { border-radius: 13px 10px 14px 11px; }
.cl-tile:nth-child(5n + 3) { border-radius: 10px 14px 11px 13px; }
.cl-tile:disabled { cursor: default; }
.cl-tile.is-guessable { cursor: pointer; }
.cl-tile.is-guessable:hover { z-index: 1; transform: translateY(-3px) rotate(-.7deg); box-shadow: -2px 5px 0 rgba(42,37,34,.18); }
.cl-tile.is-guessable:active { transform: translateY(1px) scale(.98); }
.cl-tile:focus-visible { outline: 3px dashed var(--ink); outline-offset: 2px; z-index: 2; }
.cl-tile-word { max-width: 100%; overflow-wrap: anywhere; font: 700 clamp(9px, 1.65vw, 17px)/1.05 var(--display); text-align: center; text-transform: uppercase; }
.cl-tile.map-red, .cl-tile.reveal-red { background: var(--red-s); box-shadow: inset 0 -5px 0 var(--cl-red); }
.cl-tile.map-blue, .cl-tile.reveal-blue { background: var(--cobalt-s); box-shadow: inset 0 -5px 0 var(--cl-blue); }
.cl-tile.map-neutral, .cl-tile.reveal-neutral { background: #fff0c9; box-shadow: inset 0 -5px 0 #e7bf5a; }
.cl-tile.map-assassin, .cl-tile.reveal-assassin { background: #403b3d; color: #fffaf0; box-shadow: inset 0 -5px 0 #171516; }
.cl-tile.map-agent, .cl-tile.reveal-agent { background: var(--green-s); box-shadow: inset 0 -5px 0 var(--green); }
.cl-tile.is-missed { background: repeating-linear-gradient(135deg, #fff0c9 0 8px, #f6e5b8 8px 16px); opacity: .8; }
.cl-missed-mark { position: absolute; top: 1px; right: 5px; color: var(--red-d); font: 20px/1 var(--display); }
.cl-duet-tags { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px 5px; width: 100%; font: 9px/1.1 var(--display); text-transform: lowercase; }
.cl-duet-tags i { font-style: normal; }
.cl-key-note, .cl-tap-hint { margin: 0; color: var(--muted); font-size: 13px; text-align: center; }
.cl-guess-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cl-guess-head > .banner { flex: 1 1 330px; }
.cl-guess-tools { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; }
.cl-guesses-pill { padding: 6px 10px; border: 2px solid var(--ink); border-radius: 999px; background: var(--sun-s); font: 12px var(--display); white-space: nowrap; }
.cl-clue-form { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; max-width: 760px; margin: 0 auto; border-color: var(--ink); background: var(--paper); box-shadow: -4px 5px 0 var(--cl-blue); }
.cl-clue-form-copy { flex: 1 1 100%; text-align: center; }
.cl-clue-form-copy .cl-kicker { color: var(--cobalt-d); font: 12px var(--display); text-transform: uppercase; }
.cl-clue-form-copy h2 { font: 24px var(--display); }
.cl-clue-form-copy p { color: var(--muted); font-size: 15px; }
.cl-clue-form input, .cl-clue-form select { min-width: 0; min-height: 45px; border: 2px solid var(--ink); border-radius: 12px 15px 11px 14px; background: #fffef8; color: var(--ink); font: 18px var(--hand); }
.cl-clue-form input { flex: 1 1 190px; padding: 8px 12px; }
.cl-clue-form select { flex: 0 1 138px; padding: 8px; }
.cl-clue-form input:focus, .cl-clue-form select:focus { outline: 3px dashed var(--cobalt-d); outline-offset: 2px; }
.cl-clue-form .cl-submit { min-height: 45px; }
.cl-wait { width: min(100%, 660px); display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 auto; background: var(--paper-2); text-align: center; }
.cl-wait p { margin: 0; font-size: 16px; }
.cl-doodle-dot { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--cobalt-s); }
.cl-final-duet { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; color: var(--muted); font: 12px var(--display); }
.cl-final-duet > span { padding: 5px 9px; border-radius: 999px; background: var(--paper); }
.cl-final .end-row { margin-top: 2px; }

@media (max-width: 640px) {
  .cl-stack { gap: 9px; }
  .cl-rosters, .cl-team-progress { gap: 6px; }
  .cl-roster { padding: 6px 7px; gap: 5px; }
  .cl-roster-title { font-size: 11px; }
  .cl-roster-players { gap: 4px; }
  .cl-roster-player { gap: 3px; padding: 2px 5px 2px 2px; font-size: 11px; }
  .cl-roster-player > span { max-width: 66px; }
  .cl-roster-player .avatar { width: 22px; height: 22px; }
  .cl-roster-player i { font-size: 8px; }
  .cl-team-meter { padding: 5px 6px; gap: 3px; font-size: 10px; }
  .cl-team-meter > b { font-size: 10px; }
  .cl-duet-turn { border-radius: 15px; font-size: 13px; }
  .cl-duet-turn strong { margin-left: 0; }
  .cl-duet-boards { grid-template-columns: 1fr; gap: 9px; }
  .cl-duet-board { padding: 7px; }
  .cl-duet-board-head { margin-bottom: 5px; }
  .cl-duet-board-head b { font-size: 12px; }
  .cl-duet-board-head span { font-size: 10px; }
  .cl-duet-board .cl-board { gap: 3px; padding: 5px; }
  .cl-duet-board .cl-tile { min-height: clamp(41px, 13vw, 59px); }
  .cl-duet-board .cl-tile-word { font-size: clamp(8px, 2.6vw, 12px); }
  .cl-board { gap: 3px; padding: 5px; border-radius: 13px; }
  .cl-tile { min-height: clamp(41px, 13vw, 59px); padding: 3px 2px; border-width: 1.5px; border-radius: 8px 10px 8px 9px; }
  .cl-tile-word { font-size: clamp(8px, 2.6vw, 12px); }
  .cl-duet-tags { font-size: 7px; }
  .cl-guess-head > .banner { flex-basis: 100%; }
  .cl-guess-tools { width: 100%; }
  .cl-clue-form { padding: 12px; }
  .cl-clue-form-copy h2 { font-size: 21px; }
  .cl-clue-form input { flex-basis: 120px; }
  .cl-clue-form select { flex: 0 0 95px; }
  .cl-clue-form .cl-submit { flex: 1 1 auto; }
  .cl-last-turn { border-radius: 12px; font-size: 12px; }
}

/* ---- case catalog picker (lobby) ---- */
.case-current { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 9px 11px; border: 2px solid var(--ink); border-radius: 13px 16px 12px 15px; background: #fffdf4; color: var(--ink); text-align: left; cursor: pointer; box-shadow: -2px 3px 0 rgba(42,37,34,.14); }
.case-current:hover { background: #fff7dc; }
.case-current-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.case-current-main b { font: 15px var(--display); overflow-wrap: anywhere; }
.case-current-main small { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.case-pick-diff { flex: none; padding: 3px 8px; border: 1.2px solid rgba(42,37,34,.35); border-radius: 999px; background: #ffe9e2; font: 10.5px var(--display); white-space: nowrap; }
.case-current-cta { flex: none; font: 11px var(--display); color: #337d70; text-decoration: underline; }
.modal.case-picker { width: min(520px, 100%); text-align: left; }
.case-search { display: flex; align-items: center; gap: 7px; margin: 12px 0 10px; padding: 8px 11px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; }
.case-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 15px var(--hand); color: var(--ink); }
.case-pick-list { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; padding: 2px; }
.case-pick-card { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 2px solid rgba(42,37,34,.4); border-radius: 13px 16px 12px 15px; background: #fffdf4; color: var(--ink); text-align: left; cursor: pointer; }
.case-pick-card:hover { border-color: var(--ink); background: #fff7dc; }
.case-pick-card.is-on { border-color: #337d70; background: #dff3ec; }
.case-pick-card b { font: 17px var(--display); }
.case-pick-top { display: flex; justify-content: space-between; gap: 8px; }
.case-pick-no { font: 10px var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.case-pick-meta { font-size: 12px; color: var(--muted); }
.case-pick-blurb { font: 13.5px/1.25 var(--hand); }
.case-pick-current { font: 10px var(--display); color: #337d70; text-transform: uppercase; }
.case-pick-empty, .case-pick-note { text-align: center; color: var(--muted); font-size: 13px; }

/* color-coded difficulty pips: green gentle, amber tricky, red devious */
.diff-pips { display: inline-flex; gap: 3px; vertical-align: middle; }
.diff-pips i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid rgba(42,37,34,.45); background: #fff; }
.diff-pips i.on { border-color: rgba(42,37,34,.65); }
.diff-pips.diff-1 i.on { background: #57a773; }
.diff-pips.diff-2 i.on { background: #e8a34c; }
.diff-pips.diff-3 i.on { background: #d9534a; }
.case-pick-diff.diff-1 { background: #dff0e2; }
.case-pick-diff.diff-2 { background: #fdf0d5; }
.case-pick-diff.diff-3 { background: #ffe0dc; }
.case-best, .case-pick-best { flex: none; padding: 3px 8px; border: 1.2px solid #337d70; border-radius: 999px; background: #dff3ec; color: #256a5e; font: 10.5px var(--display); white-space: nowrap; }
.case-pick-best { align-self: flex-start; margin-top: 4px; }
.cf-best-grade { margin: 6px 0 0; font-size: 12.5px; color: #256a5e; }
.cf-best-grade b { font-family: var(--display); }

/* ---- hooked: name that tune ---- */
.game.hooked { --hk-pink: #ef7fd2; --hk-pink-deep: #c2439e; --hk-ink-soft: rgba(42,37,34,.72); }
.hk-layout { display: grid; grid-template-columns: minmax(250px, .85fr) minmax(0, 1.15fr); gap: 14px; align-items: stretch; }
/* turntable stage */
.hk-turntable { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 22px 14px 16px; overflow: hidden; border: 2px solid var(--ink); border-radius: 22px 26px 20px 24px; background: radial-gradient(circle at 50% 28%, #ffeffc 0, #ffd7f2 46%, #f2b5df 100%); box-shadow: -4px 6px 0 rgba(42,37,34,.16); text-align: center; }
.hk-turntable::before { content: ''; position: absolute; inset: 8px; border: 1.4px dashed rgba(42,37,34,.18); border-radius: 18px 22px 16px 20px; pointer-events: none; }
.hk-disc-wrap { position: relative; width: min(200px, 56vw); aspect-ratio: 1; }
.hk-disc { position: absolute; inset: 0; border-radius: 50%; border: 2.5px solid var(--ink); background: repeating-radial-gradient(circle, #463b47 0 3px, #574a58 3px 5px, #40353f 5px 8px); box-shadow: 0 8px 0 rgba(42,37,34,.22), inset 0 0 0 4px rgba(255,255,255,.08); }
.hk-disc.is-spinning { animation: hk-spin 1.15s linear infinite; }
.hk-disc.is-got { background: repeating-radial-gradient(circle, #2f5949 0 3px, #386b56 3px 5px, #2c5243 5px 8px); }
@keyframes hk-spin { to { transform: rotate(360deg); } }
.hk-disc-label { position: absolute; inset: 31%; display: grid; place-items: center; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--hk-pink); color: #fff; font: 34px var(--display); }
.hk-disc.is-got .hk-disc-label { background: #57a773; }
.hk-disc-label b { transform: rotate(-6deg); }
.hk-tonearm { position: absolute; top: 2%; right: 5%; width: 34%; height: 3px; border-radius: 99px; background: var(--ink); transform: rotate(34deg); transform-origin: right center; }
.hk-tonearm::before { content: ''; position: absolute; right: -5px; top: -6px; width: 15px; height: 15px; border-radius: 50%; border: 2.5px solid var(--ink); background: #fff; }
.hk-eq { display: inline-flex; align-items: flex-end; gap: 4px; height: 24px; }
.hk-eq i { width: 6px; height: calc(24px * var(--h)); border-radius: 99px 99px 3px 3px; background: rgba(42,37,34,.25); }
.hk-eq.is-live i { background: var(--hk-pink-deep); animation: hk-eq .55s ease-in-out infinite alternate; animation-delay: var(--d); }
@keyframes hk-eq { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.hk-status { min-height: 22px; margin: 0; font: 17px var(--display); }
.hk-round-dots { display: flex; gap: 6px; }
.hk-round-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1.6px solid rgba(42,37,34,.55); background: rgba(255,255,255,.55); }
.hk-round-dots i.is-done { background: #57a773; }
.hk-round-dots i.is-now { background: var(--hk-pink-deep); transform: scale(1.25); }
.hk-list-label { margin: 0; color: var(--hk-ink-soft); font-size: 12px; }
/* brave-ears controls */
.hk-controls { display: flex; flex-direction: column; padding: 18px; border-radius: 22px 26px 20px 24px; background: linear-gradient(180deg, #fffdf4, #fff3e4); }
.hk-controls-title { margin: 0 0 12px; font: 22px var(--display); }
.hk-tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.hk-tier { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 82px; padding: 11px 13px; border: 2px solid var(--ink); border-radius: 15px 18px 14px 17px; background: #fff; color: var(--ink); cursor: pointer; box-shadow: -2px 3px 0 rgba(42,37,34,.14); text-align: left; transition: transform .08s ease, background .15s ease; }
.hk-tier:hover:not(:disabled) { transform: translateY(-2px) rotate(-.4deg); background: #ffeffc; }
.hk-tier-top { display: flex; align-items: center; gap: 6px; }
.hk-tier-top b { font: 25px var(--display); }
.hk-tier-pts { font: 15px var(--display); color: var(--hk-pink-deep); }
.hk-tier small { color: var(--muted); font-size: 11.5px; }
.hk-tier.is-on { background: #ffe0f4; border-color: var(--hk-pink-deep); }
.hk-tier.is-heard { box-shadow: inset 0 0 0 2px rgba(87,167,115,.55); }
.hk-tier:disabled { opacity: .52; cursor: default; box-shadow: none; }
.hk-note { margin: 12px 2px 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.4; }
.hk-guess { margin-top: auto; padding-top: 16px; }
.hk-guess-label { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 7px; font: 14px var(--display); }
.hk-guess-row { display: flex; gap: 8px; }
.hk-guess-row input { flex: 1; min-width: 0; padding: 11px 14px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font: 17px var(--hand); }
.hk-guess-row input:disabled { background: #f3ead2; color: var(--muted); }
.hk-got-note { display: flex; align-items: center; gap: 7px; margin: auto 0 0; padding-top: 16px; color: #256a5e; font: 15px var(--display); }
/* scoreboard + feed */
.hk-lower { margin-top: 14px; padding: 16px 18px; border-radius: 22px 26px 20px 24px; }
.hk-lower-head, .hk-lower-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 22px; }
.hk-lower-head h4 { margin: 0 0 8px; font: 16px var(--display); }
.hk-players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hk-pchip { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border: 1.5px solid rgba(42,37,34,.28); border-radius: 999px; background: #fffdf4; font-size: 12.5px; }
.hk-pchip.is-got { border-color: #337d70; background: #dff3ec; }
.hk-pchip.is-me { outline: 2px dashed rgba(194,67,158,.6); outline-offset: 1px; }
.hk-pname { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.hk-pname b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hk-pname small { color: var(--muted); }
.hk-pchip em { font: 14px var(--display); font-style: normal; }
.hk-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hk-feed li { display: flex; align-items: center; gap: 7px; padding: 5px 9px 5px 5px; border-radius: 999px; background: rgba(255,247,220,.7); font-size: 13.5px; }
.hk-feed li.is-hit { background: #dff3ec; color: #256a5e; }
.hk-feed li em { margin-left: auto; font: 13px var(--display); font-style: normal; color: #256a5e; white-space: nowrap; }
.hk-feed li em.hk-miss { color: #b3543f; font-size: 10.5px; text-transform: uppercase; }
.hk-feed-empty { color: var(--muted); }
/* reveal */
.hk-card { padding: 16px; }
.hk-reveal { text-align: center; }
.hk-reveal-art { position: relative; width: 190px; max-width: 64vw; margin: 4px auto; }
.hk-reveal-vinyl { position: absolute; top: 0; left: 52%; z-index: 0; width: 170px; height: 170px; max-width: 54vw; border-radius: 50%; border: 2.5px solid var(--ink); background: repeating-radial-gradient(circle, #463b47 0 3px, #574a58 3px 5px, #40353f 5px 8px); transform: translateX(-8%) rotate(10deg); }
.hk-art-frame { position: relative; z-index: 1; display: grid; place-items: center; width: 170px; height: 170px; max-width: 54vw; margin-inline: auto; overflow: hidden; border-radius: 16px; border: 2.5px solid var(--ink); background: radial-gradient(circle at 50% 38%, #ffeffc, #f2b5df); box-shadow: -4px 6px 0 rgba(42,37,34,.18); }
.hk-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hk-art-fallback { font: 52px var(--display); color: var(--hk-pink-deep); transform: rotate(-6deg); }
.hk-rank-badge { position: absolute; z-index: 2; top: -9px; right: -4px; padding: 5px 10px; transform: rotate(5deg); border: 2px solid var(--ink); border-radius: 999px; background: #ffe36e; font: 14px var(--display); box-shadow: -2px 3px 0 rgba(42,37,34,.18); }
.hk-song { margin: 10px 0 2px; font: 30px var(--display); overflow-wrap: anywhere; }
.hk-artist { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.hk-got { list-style: none; margin: 14px auto 0; padding: 0; max-width: 460px; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.hk-got li { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border: 1.5px solid rgba(42,37,34,.24); border-radius: 999px; background: #fffdf4; }
.hk-got li.is-first { border-color: #c9a227; background: #fff3c4; }
.hk-place { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: #ffe0f4; font: 12px var(--display); }
.hk-got li span { color: var(--muted); font-size: 12.5px; }
.hk-got li em { margin-left: auto; font: 15px var(--display); font-style: normal; color: #256a5e; }
.hk-reveal .hk-players { max-width: 560px; margin: 14px auto 0; text-align: left; }
.hk-next { margin-top: 16px; }
/* final */
.hk-scores { list-style: none; margin: 0; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.hk-scores li { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 999px; }
.hk-scores li em { margin-left: auto; font: 17px var(--display); font-style: normal; }
.hk-scores li.is-top { background: #fff3c4; color: #7a5b12; }
.hk-rank { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #f3ead2; font: 14px var(--display); }
.hk-rank.is-gold { background: #ffd94d; }
.hk-rank.is-silver { background: #e8e4da; }
.hk-rank.is-bronze { background: #f0b27a; }
@media (max-width: 700px) {
  .hk-layout, .hk-lower-head, .hk-lower-grid { grid-template-columns: minmax(0, 1fr); }
  .hk-lower-head h4:last-child { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) { .hk-disc.is-spinning, .hk-eq.is-live i { animation: none; } }

/* ---- last one standing ---- */
.lo-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(230px, .6fr); gap: 14px; align-items: start; }
.lo-prompt { padding: 20px; text-align: center; border-radius: 22px 26px 20px 24px; }
.lo-prompt-label { color: var(--muted); font-size: 13px; }
.lo-prompt-text { margin: 4px 0 6px; font: 34px var(--display); }
.lo-prompt-sub { margin: 0 auto 14px; max-width: 520px; color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }
.lo-answer { display: flex; gap: 8px; max-width: 520px; margin: 0 auto; }
.lo-answer input { flex: 1; min-width: 0; padding: 11px 16px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font: 17px var(--hand); }
.lo-wait { color: var(--muted); margin: 0; }
.lo-used { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; }
.lo-used-label { font: 13px var(--display); color: var(--muted); }
.lo-chip { padding: 3px 10px; border: 1.5px solid rgba(42,37,34,.3); border-radius: 999px; background: #fffdf4; font-size: 13px; }
.lo-chip.is-mine { border-color: var(--ink); background: #ffe4e4; }
.lo-feed { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.lo-feedrow { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(255,253,244,.75); font-size: 14px; }
.lo-feedrow em { margin-left: auto; font: 13px var(--display); font-style: normal; white-space: nowrap; }
.lo-plus { color: #256a5e; }
.lo-minus { color: #b3543f; }
.lo-feedrow.is-prompt { justify-content: center; background: #ffe4e4; font: 14px var(--display); }
.lo-players { list-style: none; margin: 0; padding: 10px; display: flex; flex-direction: column; gap: 7px; border: 2px solid var(--ink); border-radius: 20px 24px 18px 22px; background: var(--paper-2, #fff7dc); box-shadow: -3px 5px 0 rgba(42,37,34,.14); }
.lo-player { display: flex; align-items: center; gap: 9px; padding: 6px 10px 6px 6px; border: 1.5px solid rgba(42,37,34,.25); border-radius: 999px; background: #fffdf4; }
.lo-player.is-turn { border-color: var(--ink); background: #ffe4e4; }
.lo-player.is-out { opacity: .48; }
.lo-pinfo { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.lo-pinfo b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.lo-hearts { display: inline-flex; gap: 2px; }
.lo-heart { color: rgba(42,37,34,.22); font-style: normal; }
.lo-heart.is-on { color: #e05252; }
.lo-meter { display: block; height: 5px; margin-top: 3px; border-radius: 99px; background: rgba(42,37,34,.14); overflow: hidden; }
.lo-meter i { display: block; height: 100%; border-radius: 99px; background: #e8a34c; }
.lo-outtag { font: 11px var(--display); color: #b3543f; text-transform: uppercase; }
.lo-score { font: 16px var(--display); }
.lo-lb li.is-champ { background: #fff3c4; }

/* --- last one standing arena: seats in a circle, bubble in the middle --- */
.lo-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.lo-arena { position: relative; width: min(100%, 560px, max(320px, calc(100svh - 330px))); aspect-ratio: 1; margin-top: 4px; }
.lo-table { position: absolute; inset: 13%; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 157, 157, .12) 0 42%, transparent 43%),
    radial-gradient(rgba(42, 37, 34, .07) 1.4px, transparent 1.6px) 0 0 / 16px 16px, #fff7e2;
  border: var(--line) solid var(--ink); box-shadow: -6px 8px 0 rgba(42, 37, 34, .1); }
.lo-arena.is-mine .lo-table { border-color: #d45d5d; box-shadow: -6px 8px 0 #ff9d9d, 0 0 0 7px rgba(255, 157, 157, .25); animation: lo-glow 1.4s ease-in-out infinite; }
@keyframes lo-glow { 0%, 100% { box-shadow: -6px 8px 0 #ff9d9d, 0 0 0 5px rgba(255,157,157,.18); } 50% { box-shadow: -6px 8px 0 #ff9d9d, 0 0 0 10px rgba(255,157,157,.3); } }
.lo-seat { position: absolute; z-index: 1; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 1px; width: 112px; text-align: center; }
.lo-av { position: relative; display: inline-flex; padding: 3px; border-radius: 50%; border: 3px solid transparent; transition: transform .25s var(--ease-pop), border-color .15s, background .15s; }
.lo-av svg { display: block; }
.lo-seat.is-turn .lo-av { border-color: #d45d5d; background: #ffe4e4; transform: scale(1.14); }
.lo-seat.is-me .lo-name { color: #c04545; }
.lo-seat.is-next .lo-av { border-color: rgba(212, 93, 93, .35); }
.lo-seat.is-out .lo-av { filter: grayscale(1); opacity: .45; }
.lo-seat.is-out .lo-name { color: var(--muted); }
.lo-seat.is-popped { animation: lo-shake .45s ease; }
.lo-name { position: relative; max-width: 100%; padding: 0 7px 1px; border-radius: 8px; background: rgba(255, 252, 242, .92); font-size: 15px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lo-meta { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 4px; border-radius: 6px; background: rgba(255, 252, 242, .85); }
.lo-seat .lo-hearts { display: inline-flex; gap: 1px; }
.lo-seat .lo-score { font: 13px var(--display); }
.lo-seat .lo-meter { width: 52px; }
.lo-youtag, .lo-seat .lo-nexttag { display: inline-block; padding: 0 6px 1px; border-radius: 999px; font-family: var(--display); font-size: 11px; line-height: 1.4; }
.lo-youtag { background: rgba(255, 252, 242, .92); color: var(--ink-2); }
.lo-seat .lo-nexttag { background: rgba(255, 252, 242, .92); border: 2px dashed rgba(42, 37, 34, .35); color: var(--ink-2); font-size: 11px; text-transform: none; letter-spacing: 0; }
.lo-arrow { position: absolute; inset: 0; z-index: 1; transform: rotate(var(--a)); transition: transform .32s var(--ease-pop); pointer-events: none; }
.lo-arrow svg { position: absolute; left: 50%; top: 19.6%; width: 30px; height: 26px; translate: -50% 0; overflow: visible; }
.lo-arrow path { fill: #ff9d9d; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.lo-center { position: absolute; left: 50%; top: 50%; width: 52%; transform: translate(-50%, -50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.lo-center .lo-bubble { margin: 0; animation: lo-hop .5s cubic-bezier(.34, 1.56, .64, 1); }
.lo-center .lo-bubble-svg { width: 104px; }
.lo-prompt-pill { padding: 3px 14px 5px; background: #fffcf2; border: var(--line) solid var(--ink); border-radius: 12px 15px 11px 14px; box-shadow: -3px 4px 0 #ff9d9d; font-family: var(--display); font-size: clamp(15px, 3.4vw, 20px); line-height: 1.25; animation: popin .3s var(--ease-pop); }
.lo-holder { font-size: 13px; color: var(--ink-2); background: rgba(255,252,242,.85); padding: 0 8px; border-radius: 999px; }
.lo-arena.is-crowded .lo-seat { width: 88px; }
.lo-arena.is-crowded .lo-av svg { width: 44px; height: 44px; }
.lo-arena.is-packed .lo-seat { width: 74px; }
.lo-arena.is-packed .lo-av svg { width: 38px; height: 38px; }
.lo-answer { width: min(100%, 560px); margin: 0 auto; align-items: center; background: #fffcf2; border: var(--line) solid var(--ink); border-radius: 999px; padding: 6px 8px 6px 16px; box-shadow: -3px 4px 0 rgba(42,37,34,.12); }
.lo-yourturn { font-family: var(--display); color: #c04545; white-space: nowrap; }
.lo-wait { text-align: center; }
.lo-wrap .lo-prompt-sub { text-align: center; }
.lo-wrap .lo-used, .lo-wrap .lo-feed { width: min(100%, 680px); }
.lo-has-bubble { position: absolute; right: -10px; top: -10px; margin: 0; pointer-events: none; z-index: 2; }
.lo-has-bubble .lo-bubble-svg { width: 26px; }
.lo-pop { inset: -26%; }

/* --- last one standing: the bubble, pops and rarity juice --- */
.lo-prompt { position: relative; overflow: hidden; }
.lo-bubble { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 6px; animation: lo-hop .5s cubic-bezier(.34, 1.56, .64, 1); }
.lo-bubble-svg { width: 86px; height: auto; overflow: visible; animation: lo-inflate var(--tt, 10s) linear forwards; transform-origin: 50% 60%; }
.lo-bubble-body { animation: lo-blush var(--tt, 10s) linear forwards; }
.lo-bubble-sheen { opacity: .45; animation: lo-sheen var(--tt, 10s) linear forwards; }
.lo-bubble-with { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-2); }
@keyframes lo-inflate {
  0% { transform: scale(.7, .7) rotate(0deg); }
  55% { transform: scale(.97, .93) rotate(0deg); }
  70% { transform: scale(1.06, 1.12) rotate(-1.5deg); }
  82% { transform: scale(1.16, 1.1) rotate(2deg); }
  90% { transform: scale(1.24, 1.3) rotate(-2.5deg); }
  95% { transform: scale(1.33, 1.24) rotate(2.5deg); }
  100% { transform: scale(1.38, 1.34) rotate(-2deg); }
}
@keyframes lo-blush { 0%, 55% { fill: #dff4ff; } 82% { fill: #ffe9f6; } 100% { fill: #ffd9ec; } }
@keyframes lo-sheen { 0%, 55% { opacity: .45; } 85%, 100% { opacity: 1; } }
@keyframes lo-hop { 0% { transform: translateY(-16px) scale(.7); opacity: 0; } 60% { transform: translateY(3px) scale(1.06); opacity: 1; } 100% { transform: translateY(0) scale(1); } }
.lo-has-bubble { animation: lo-bob .8s ease-in-out infinite alternate; }
.lo-has-bubble .lo-bubble-svg { width: 24px; animation: lo-bob .8s ease-in-out infinite alternate; }
.lo-has-bubble .lo-bubble-body, .lo-has-bubble .lo-bubble-sheen { animation: none; }
.lo-player { position: relative; }
.lo-player.is-turn { box-shadow: 0 0 0 2px rgba(224, 82, 82, .45), -2px 3px 0 rgba(42,37,34,.14); animation: lo-turnpulse 1.1s ease-in-out infinite alternate; }
@keyframes lo-turnpulse { from { box-shadow: 0 0 0 2px rgba(224,82,82,.3); } to { box-shadow: 0 0 0 5px rgba(224,82,82,.12); } }
@keyframes lo-bob { from { transform: translateY(0) rotate(-5deg); } to { transform: translateY(-4px) rotate(5deg); } }
.lo-player.is-out .face { filter: grayscale(1); }
.lo-player.is-popped { animation: lo-shake .45s ease; }
@keyframes lo-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } }
.lo-nexttag { font: 10.5px var(--display); color: #256a5e; text-transform: uppercase; letter-spacing: .4px; }
.lo-pop { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; z-index: 3; animation: lo-popfade 1.5s ease forwards; }
.lo-pop-burst { width: 190px; height: 190px; animation: lo-popzoom .38s cubic-bezier(.34, 1.8, .64, 1); }
.lo-pop-word { position: absolute; font: 44px var(--display); color: #b3372f; transform: rotate(-7deg); text-shadow: 2px 2px 0 #fff7dc; }
.lo-pop-who { position: absolute; margin-top: 118px; font: 15px var(--display); background: #fff7dc; border: 2px solid var(--ink); border-radius: 999px; padding: 3px 14px; transform: rotate(-2deg); }
@keyframes lo-popzoom { 0% { transform: scale(.2) rotate(-14deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes lo-popfade { 0%, 72% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
.lo-chip.t-m { border-color: #3f8f83; background: #e2f4ee; }
.lo-chip.t-r { border-color: #7a5fd0; background: #ece5ff; font-weight: 600; }
.lo-chip.t-l { border-color: #b8860b; background: linear-gradient(135deg, #fff0b3, #ffd75e); font-weight: 700; box-shadow: 0 0 6px rgba(255, 190, 40, .65); }
.lo-feedrow.t-m { background: #e2f4ee; }
.lo-feedrow.t-r { background: #ece5ff; }
.lo-feedrow.t-l { background: linear-gradient(90deg, #fff0b3, #ffe9a8); box-shadow: inset 0 0 0 1.5px #b8860b; }
.lo-feedrow .lo-plus.t-m { color: #256a5e; }
.lo-feedrow .lo-plus.t-r { color: #5a3fa8; }
.lo-feedrow .lo-plus.t-l { color: #8a6108; font-size: 15px; }
.lo-feedrow:first-child { animation: lo-feedin .35s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes lo-feedin { from { transform: translateY(-7px) scale(.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .lo-bubble-svg, .lo-bubble-body, .lo-bubble-sheen, .lo-bubble, .lo-has-bubble, .lo-player.is-turn, .lo-player.is-popped { animation: none; }
}
@media (max-width: 700px) { .lo-layout { grid-template-columns: minmax(0, 1fr); } .lo-prompt-text { font-size: 28px; } }