/* Swipe — one stylesheet, no build step.
   Type: Archivo (variable weight + width) for everything you read, pushed
   narrow and heavy for names and the big moments; Besley, a Clarendon, for
   anything printed on a card or counted in cards.
   Colour: the room itself is a quiet, dark tabletop. The mat in the middle
   takes the colour of whoever's turn it is, so the whole screen changes hands
   when the turn does. The only fixed colours are the two deck backs. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Besley';
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url('../fonts/besley-latin.woff2') format('woff2');
}

:root {
  --table: #1a1714;
  --panel: #25211d;
  --ink: #f4efe6;
  --muted: #aaa093;
  --line: #40382f;
  --card: #fffdf8;
  --card-edge: #b9b0a0;
  --deck-red: #c5202a;
  --deck-blue: #1c4a96;
  --suit-red: #ee5a5f;
  --warn: #ffb224;
  --mat: #2e2823;
  --me: #3b9eff;
  --on-me: #fff;

  --cw: clamp(46px, min(15.8vw, 9.8dvh), 94px); /* card width; app.js refines it */
  --r-ui: 10px;
  --r-mat: 22px;
  --font: 'Archivo', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --serif: 'Besley', 'Clarendon', Georgia, serif;
  --weave: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.022) 0 2px, transparent 2px 7px), repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.06) 0 2px, transparent 2px 7px);
  color-scheme: dark;
}
:root[data-theme='light'] {
  --table: #e3e1da;
  --panel: #f5f3ed;
  --ink: #1d1915;
  --muted: #655d53;
  --line: #c9c2b4;
  --card-edge: #a9a091;
  --suit-red: #c8102e;
  --warn: #a35c00;
  --weave: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.35) 0 2px, transparent 2px 7px), repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.018) 0 2px, transparent 2px 7px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--table);
  background-image: var(--weave);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.noscript { padding: 24px; }
.suit { width: 0.8em; height: 0.8em; vertical-align: -0.06em; }

.display {
  font-weight: 850; font-stretch: 64%; text-transform: uppercase;
  line-height: 0.92; letter-spacing: 0.002em;
}

/* ───────────── Cards ───────────── */

.card {
  position: relative; display: block; flex: none; padding: 0; border: 0;
  width: var(--cw); height: calc(var(--cw) * 1.4);
  border-radius: calc(var(--cw) * 0.07);
  background-color: var(--card); color: #16161a;
  box-shadow: 0 calc(var(--cw) * 0.03) 0 var(--card-edge), 0 0 0 1px rgba(0, 0, 0, 0.16);
  -webkit-user-select: none; user-select: none;
}
.card > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: inherit; pointer-events: none; }
.card .idx text { font-family: var(--serif); font-weight: 800; font-size: 60px; }
.card .idx text.ten { font-size: 50px; letter-spacing: -5px; }
.card.back { background-size: 100% 100%; background-repeat: no-repeat; }
.card.b0 { background-image: url('../img/back-red.svg'); }
.card.b1 { background-image: url('../img/back-blue.svg'); }

.card.can-pick, .card.can-flip { cursor: pointer; transition: translate 0.12s ease, box-shadow 0.12s ease, filter 0.15s ease; }
.card.is-high { filter: brightness(0.8) saturate(0.85); }
.card.is-picked {
  translate: 0 calc(var(--cw) * -0.2); filter: none;
  box-shadow: 0 0 0 3px var(--me), 0 calc(var(--cw) * 0.03 + 3px) 0 color-mix(in srgb, var(--me) 55%, #000), 0 12px 18px rgba(0, 0, 0, 0.4);
}
@media (hover: hover) {
  .card.can-pick:hover:not(.is-picked) { translate: 0 calc(var(--cw) * -0.08); filter: none; }
}
/* A ten in your hand catches the light now and then: it is the card that clears the pile. */
.card.can-pick[data-r='10']::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 214, 110, 0.6) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%; background-position: 130% 0;
  animation: glint 3.6s ease-in-out infinite;
}
@keyframes glint { 0%, 62% { background-position: 130% 0; } 100% { background-position: -70% 0; } }

/* Two-sided cards, for turning over in mid-air. */
.card.flipper { background: none; box-shadow: none; perspective: 800px; width: 100%; height: 100%; }
.flip-in { position: absolute; inset: 0; transform-style: preserve-3d; }
.flip-in > .card { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-in > .flip-back { transform: rotateY(180deg); }

/* ───────────── Controls ───────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 8px 16px;
  border: 1.5px solid var(--ink); border-radius: var(--r-ui);
  background: transparent; color: var(--ink);
  font-weight: 650; line-height: 1.15; text-decoration: none; white-space: nowrap;
}
.btn:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.btn:active:not(:disabled) { translate: 0 1px; }
.btn:disabled { opacity: 0.45; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--ink); color: var(--table); box-shadow: 0 3px 0 color-mix(in srgb, var(--ink) 55%, var(--table)); }
.btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 88%, var(--table)); }
/* A button in the viewer's own colour: the things only you can press. */
.btn-you {
  --c: var(--p, var(--me)); --on-c: var(--on-p, var(--on-me));
  background: var(--c); border-color: var(--c); color: var(--on-c);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--c) 58%, #000);
}
.btn-you:hover:not(:disabled) { background: color-mix(in srgb, var(--c) 88%, #fff); }
.btn-you:active:not(:disabled) { translate: 0 2px; box-shadow: 0 1px 0 color-mix(in srgb, var(--c) 58%, #000); }
.btn-you:disabled { opacity: 0.4; box-shadow: none; }
/* Buttons that sit on the coloured mat. */
.btn-mat { border-color: rgba(255, 255, 255, 0.45); background: rgba(0, 0, 0, 0.2); color: inherit; }
.btn-mat:hover:not(:disabled) { background: rgba(0, 0, 0, 0.36); border-color: rgba(255, 255, 255, 0.8); }
.btn-danger { border-color: var(--suit-red); color: var(--suit-red); }
.btn-small { min-height: 34px; padding: 5px 11px; font-size: 0.9rem; gap: 6px; }
.btn-small svg { width: 16px; height: 16px; }
.btn-large { min-height: 54px; padding: 12px 24px; font-size: 1.12rem; }

.link { border: 0; padding: 0; background: none; color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

.tool {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border: 0; border-radius: var(--r-ui); background: transparent; color: var(--ink);
}
.tool:hover { background: color-mix(in srgb, var(--ink) 11%, transparent); }
.tool svg { width: 21px; height: 21px; }

.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 12px;
  border: 1.5px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink);
  font-weight: 600; white-space: nowrap; max-width: 100%;
}
.chip:hover { border-color: var(--ink); }
.chip svg { width: 16px; height: 16px; flex: none; }
.chip-icon { display: inline-grid; }
.chip-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 26px; border-color: var(--p, var(--line)); box-shadow: inset 0 -3px 0 var(--p, transparent); }

.field { display: grid; gap: 6px; font-weight: 600; }
.field > span { font-size: 0.9rem; color: var(--muted); }
input[type='text'], input[type='password'], input[type='number'], textarea, select {
  width: 100%; min-height: 44px; padding: 9px 12px;
  border: 1.5px solid var(--line); border-radius: var(--r-ui);
  background: var(--panel); color: var(--ink);
}
input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 0; border-color: var(--ink); }
::placeholder { color: var(--muted); opacity: 0.8; }

.avatar {
  display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--p); color: var(--on-p); font-weight: 800; font-stretch: 80%; font-size: 0.72rem; letter-spacing: 0.01em; line-height: 1;
}
.avatar svg { width: 17px; height: 17px; }
.avatar.is-offline { opacity: 0.45; }
.dot { display: inline-block; width: 0.72em; height: 0.72em; border-radius: 50%; background: var(--p); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.65); margin-right: 7px; }

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

.home {
  min-height: 100dvh; max-width: 1120px; margin: 0 auto; padding: 40px 24px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: 56px; align-items: center;
}
/* The wordmark leaves a trail in the two deck colours, as if it had just been swept sideways. */
.wordmark {
  display: inline-block; padding: 0 0.16em 0 0.2em; margin-left: -0.08em;
  font-size: clamp(4.4rem, 15vw, 9.4rem); font-weight: 900; font-stretch: 62%;
  line-height: 0.84; letter-spacing: -0.012em; text-transform: uppercase;
  transform: skewX(-11deg); transform-origin: bottom left;
  text-shadow: -0.07em 0 0 var(--deck-red), -0.14em 0 0 var(--deck-blue);
}
.home-lede { margin-top: 26px; max-width: 30ch; font-size: 1.32rem; line-height: 1.35; }
.home-form { margin-top: 30px; display: grid; gap: 12px; justify-items: start; max-width: 420px; }
.home-join { grid-template-columns: 1fr auto; align-items: end; justify-items: stretch; margin-top: 26px; }
.home-note { margin-top: 26px; max-width: 46ch; color: var(--muted); }

.home-table { --cw: clamp(84px, 13vw, 150px); }
.home-mat {
  position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 1 / 1.06; border-radius: 30px;
  background: var(--mat); display: grid; place-items: center; rotate: -3deg;
  box-shadow: 0 6px 0 color-mix(in srgb, var(--mat) 55%, #000), 0 30px 60px rgba(0, 0, 0, 0.35);
}
.home-mat::after { content: ''; position: absolute; inset: 10px; border: 2px dashed rgba(255, 255, 255, 0.22); border-radius: 21px; pointer-events: none; }
.home-wipe { position: absolute; inset: 0; z-index: -1; }
.home-pile.pile { --pw: var(--cw); margin: 0; }
.home-word {
  position: absolute; left: 50%; top: 50%; z-index: 3; white-space: nowrap; pointer-events: none;
  font-size: clamp(3.4rem, 9.5vw, 7rem); font-weight: 900; font-stretch: 62%; text-transform: uppercase; line-height: 1;
  color: #fffdf8; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
  transform: translate(-160%, -50%) skewX(-14deg); opacity: 0;
}

/* ───────────── Full-page notice ───────────── */

.notice { min-height: 100dvh; display: grid; align-content: center; gap: 16px; max-width: 560px; margin: 0 auto; padding: 32px 24px; }
.notice h1 { font-size: 2.4rem; font-stretch: 75%; font-weight: 800; line-height: 1.05; }
.notice p { font-size: 1.15rem; }
.notice-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

/* ───────────── Room: top bar ───────────── */

.room { min-height: 100dvh; display: flex; flex-direction: column; }
.bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left));
  border-bottom: 1.5px solid var(--line); background-color: var(--table); background-image: var(--weave);
  position: sticky; top: 0; z-index: 20;
}
.bar-brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.bar-name { font-weight: 900; font-stretch: 64%; font-size: 1.55rem; text-transform: uppercase; line-height: 1; transform: skewX(-10deg); }
.mark { position: relative; width: 26px; height: 26px; flex: none; }
.mark i { position: absolute; left: 6px; top: 2px; width: 14px; height: 20px; border-radius: 2.5px; background: var(--deck-blue); box-shadow: 0 0 0 1.5px var(--card); transform-origin: 50% 110%; rotate: -24deg; }
.mark i:nth-child(2) { background: var(--deck-red); rotate: 0deg; }
.mark i:nth-child(3) { background: var(--card); rotate: 24deg; }
.bar-tools { margin-left: auto; display: flex; align-items: center; gap: 2px; min-width: 0; }
.invite-short { display: none; }
.bar-tools .chip { margin-left: 8px; }
.banner { padding: 8px 16px; background: var(--warn); color: #1c1a10; font-weight: 650; text-align: center; }

/* ───────────── Room: layout ───────────── */

.layout {
  flex: 1; display: grid; gap: 20px; align-items: start; justify-content: center;
  grid-template-columns: minmax(210px, 280px) minmax(0, 640px) minmax(210px, 280px);
  padding: 16px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left));
  width: 100%; margin: 0 auto;
}
.rail { display: grid; gap: 14px; min-width: 0; }
.stage { min-width: 0; }
.game { display: grid; gap: 10px; }

/* ───────────── The mat ───────────── */

.mat {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-mat); background-color: var(--mat); background-image: var(--mat-weave, repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 7px));
  color: #fffaf0; --ink-on-mat: #fffaf0;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--mat) 58%, #000);
}
/* Stitching round the edge, like a card mat. */
.mat::after { content: ''; position: absolute; inset: 7px; z-index: 0; border: 1.5px dashed rgba(255, 255, 255, 0.2); border-radius: calc(var(--r-mat) - 6px); pointer-events: none; }
.mat > * { position: relative; z-index: 1; }
.mat > .mat-wipe { position: absolute; inset: 0; z-index: 0; background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 7px); }
.mat :focus-visible { outline-color: #fff; }

#mat { padding: 16px 16px 14px; display: grid; gap: clamp(6px, 1.4dvh, 14px); }

.turn { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 3.6rem; }
.turn-main { min-width: 0; }
.turn-name {
  font-size: clamp(1.7rem, min(8.6vw, 5.6dvh), 3.1rem); font-weight: 850; font-stretch: 64%; text-transform: uppercase;
  line-height: 0.92; overflow-wrap: anywhere; transform-origin: left center;
}
.turn-name.is-you { text-shadow: 0 0 0 transparent; }
.turn-sub { margin-top: 5px; font-size: 0.95rem; line-height: 1.25; opacity: 0.92; min-height: 1.25em; text-wrap: balance; }

.timer { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.timer-value {
  min-width: 4.2ch; padding: 3px 10px; border-radius: var(--r-ui);
  background: rgba(0, 0, 0, 0.4); color: #fff;
  font-family: var(--serif); font-weight: 800; font-size: 1.2rem; text-align: center; line-height: 1.35;
}
.timer.is-low .timer-value { background: #fff; color: #b3141d; animation: pulse 1s ease-in-out infinite; }
.timer.is-paused .timer-value { background: transparent; outline: 1.5px dashed rgba(255, 255, 255, 0.5); outline-offset: -1.5px; }
.timer-controls { display: inline-flex; gap: 2px; }
.timer-controls .tool { width: 34px; height: 34px; font-weight: 700; font-size: 0.82rem; color: inherit; }
@keyframes pulse { 50% { transform: scale(1.08); } }

/* Table cards: four face-down, each with a face-up card on top. */
.tablezone { display: grid; gap: 8px; justify-items: center; }
.slots { display: flex; justify-content: center; gap: calc(var(--cw) * 0.2); }
.slot { position: relative; width: var(--cw); height: calc(var(--cw) * 1.58); }
.slot > .card { position: absolute; left: 0; top: 0; }
.slot > .up { top: calc(var(--cw) * 0.18); }
.slot:not(.is-stacked) > .blind, .slot > .is-flipped { top: calc(var(--cw) * 0.09); }
.slot.is-empty::before {
  content: ''; position: absolute; left: 0; top: calc(var(--cw) * 0.09); width: var(--cw); height: calc(var(--cw) * 1.4);
  border-radius: calc(var(--cw) * 0.07); border: 1.5px dashed rgba(255, 255, 255, 0.28);
}
.card.can-flip { animation: beckon 1.8s ease-in-out infinite; }
.card.can-flip:hover { translate: 0 calc(var(--cw) * -0.06); }
@keyframes beckon { 0%, 100% { box-shadow: 0 calc(var(--cw) * 0.03) 0 var(--card-edge), 0 0 0 0 rgba(255, 255, 255, 0.55); } 50% { box-shadow: 0 calc(var(--cw) * 0.03) 0 var(--card-edge), 0 0 0 5px rgba(255, 255, 255, 0); } }
.slot > .is-flipped { z-index: 2; }

.zone-foot, .zone-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; min-height: 34px; }
.zone-foot { justify-content: center; gap: 6px 14px; }
.zone-label { display: inline-flex; align-items: center; font-weight: 650; font-size: 0.95rem; }
.zone-n { margin-left: 8px; padding: 0 8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 13%, transparent); font-family: var(--serif); font-weight: 800; font-size: 0.9rem; line-height: 1.5; }

/* The pile. */
.pilezone { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(8px, 3vw, 22px); }
.pile {
  --pw: calc(var(--cw) * 1.16); --depth: 0px;
  position: relative; width: var(--pw); height: calc(var(--pw) * 1.4);
  margin: calc(var(--pw) * 0.14) calc(var(--pw) * 0.42) calc(var(--pw) * 0.14 + var(--depth));
}
.pile .card { --cw: var(--pw); }
.pile-card {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform: translate(calc(var(--x, 0) * var(--pw)), calc(var(--y, 0) * var(--pw))) rotate(var(--rot, 0deg));
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.25, 1);
}
.pile-card.is-base { box-shadow: 0 calc(var(--pw) * 0.03 + var(--depth)) 0 var(--card-edge), 0 calc(var(--depth) + 6px) 14px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.16); }
.pile-card.is-top { box-shadow: 0 calc(var(--pw) * 0.03) 0 var(--card-edge), 0 0 0 1px rgba(0, 0, 0, 0.2), 0 3px 8px rgba(0, 0, 0, 0.22); }
.pile.is-hot .pile-card.is-top { box-shadow: 0 0 0 3px #fff, 0 0 26px 6px rgba(255, 255, 255, 0.75); }
.pile-empty { position: absolute; inset: 0; border-radius: calc(var(--pw) * 0.07); border: 2px dashed rgba(255, 255, 255, 0.35); background: rgba(0, 0, 0, 0.14); }

.pile-side { display: grid; gap: 6px; justify-items: start; align-content: center; min-width: 0; }
.pile-side-left { justify-items: end; text-align: right; }
.pile-count { display: inline-grid; justify-items: center; padding: 5px 12px 6px; border-radius: 12px; background: rgba(0, 0, 0, 0.3); border: 1.5px solid rgba(255, 255, 255, 0.26); }
.pile-count b { font-family: var(--serif); font-weight: 800; font-size: clamp(1.5rem, 6vw, 2.1rem); line-height: 1.05; }
.pile-count span { font-size: 0.74rem; font-weight: 600; opacity: 0.88; white-space: nowrap; }
.pile-rule { font-weight: 800; font-stretch: 78%; font-size: clamp(0.98rem, 4vw, 1.2rem); line-height: 1.1; }
.pile-rule small { display: block; font-weight: 500; font-stretch: 100%; font-size: 0.8rem; opacity: 0.82; margin-top: 2px; }
.pile-more { font-size: 0.8rem; font-weight: 650; padding: 2px 8px; border-radius: 6px; background: #fffaf0; color: #1d1915; }
.pile-burned { display: grid; justify-items: end; opacity: 0.86; }
.pile-burned b { font-family: var(--serif); font-weight: 800; font-size: 1.15rem; line-height: 1.1; }
.pile-burned span { font-size: 0.74rem; font-weight: 600; }

/* ───────────── Turn order ───────────── */

.strip { display: flex; gap: 6px; overflow-x: auto; padding: 3px 3px 5px; scrollbar-width: none; scroll-padding: 0 40px; }
.strip::-webkit-scrollbar { display: none; }
.seatchip {
  display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 3px 9px 3px 3px;
  border: 1.5px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink);
  transition: background-color 0.2s, border-color 0.2s;
}
.seatchip-n { font-family: var(--serif); font-weight: 800; font-size: 0.95rem; min-width: 1.2ch; text-align: center; }
.seatchip.is-you { border-color: var(--p); }
.seatchip.is-turn { background: var(--p); border-color: var(--p); color: var(--on-p); box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--p) 40%, transparent); }
.seatchip.is-turn .avatar { background: var(--on-p); color: var(--p); }

/* ───────────── Hand ───────────── */

.handzone {
  border-radius: 18px; background: var(--panel); border: 1.5px solid var(--line);
  padding: 8px 12px 14px; display: grid; gap: 4px; min-width: 0;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.handzone.is-acting { border-color: var(--p); box-shadow: 0 0 0 2.5px var(--p); }
.hand {
  --step: var(--cw); --rowlap: calc(var(--cw) * 0.72); --lift: calc(var(--cw) * 0.24);
  display: flex; flex-wrap: wrap; margin: 0 auto; width: 100%;
  padding: calc(var(--rowlap) + var(--lift)) 0 4px max(0px, calc(var(--cw) - var(--step)));
}
.hand > .card { margin-left: calc(var(--step) - var(--cw)); margin-top: calc(var(--rowlap) * -1); }
.hand.is-backs { --rowlap: calc(var(--cw) * 1.02); --lift: 4px; }
.hand-empty { color: var(--muted); font-size: 0.95rem; padding: 6px 0 2px; }

/* The deal: cards stay out of sight until their flying copy lands. */
.game.is-dealing .pile-side, .game.is-dealing .pile-empty { visibility: hidden; }
.game.is-dealing .slot > .card:not(.is-dealt), .game.is-dealing .hand > .card:not(.is-dealt) { visibility: hidden; }

/* ───────────── Action bar ───────────── */

.actions {
  position: sticky; bottom: 0; z-index: 10; display: flex; align-items: center; gap: 10px;
  padding: 6px 2px calc(8px + env(safe-area-inset-bottom)); min-height: 68px;
  background-color: var(--table); background-image: var(--weave);
}
/* When the hand is long enough to run under the bar, a soft edge shows there is more above. */
.actions::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px; background: linear-gradient(to bottom, transparent, var(--table)); pointer-events: none; }
.act-hint { flex: 1 1 150px; min-width: 0; font-size: 0.95rem; line-height: 1.3; color: var(--muted); text-wrap: balance; }
.act-hint.is-warn { color: var(--warn); font-weight: 650; }
.act-hint.is-swipe { color: var(--ink); font-weight: 700; }
.act-hint.is-bad { color: var(--suit-red); font-weight: 650; }
.btn-play { min-height: 54px; padding: 8px 20px; font-size: 1.1rem; font-weight: 750; margin-left: auto; position: relative; overflow: hidden; }
.btn-play b { font-family: var(--serif); font-weight: 800; font-size: 1.3rem; letter-spacing: 0.06em; }
.btn-play.is-swipe::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%; animation: sheen 1.5s ease-in-out infinite;
}
@keyframes sheen { from { background-position: 130% 0; } to { background-position: -70% 0; } }
.btn-all { min-height: 54px; }

/* ───────────── Lobby ───────────── */

.lobby, .results { padding: clamp(20px, 5vw, 34px) clamp(16px, 5vw, 32px) clamp(22px, 5vw, 32px); display: grid; gap: 20px; }
.lobby-head .display, .results-head .display { font-size: clamp(2.3rem, 10vw, 4rem); }
.lobby-head p, .results-head p { margin-top: 10px; font-size: 1.05rem; max-width: 44ch; opacity: 0.94; }
.seats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 8px; }
.seats > li { min-width: 0; }
.seat {
  display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 50px; padding: 8px 12px; text-align: left;
  border: 1.5px solid rgba(255, 255, 255, 0.24); border-radius: 14px; background: rgba(0, 0, 0, 0.24); color: inherit;
}
.seat.is-new { animation: seat-in 0.3s cubic-bezier(0.2, 1.4, 0.4, 1) backwards; }
@keyframes seat-in { from { scale: 0.92; opacity: 0; } }
button.seat:hover { border-color: rgba(255, 255, 255, 0.75); }
.seat.is-you { border-color: var(--p); box-shadow: inset 0 0 0 1.5px var(--p); }
.seat .avatar { width: 32px; height: 32px; font-size: 0.8rem; }
.seat-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-tags { margin-left: auto; font-size: 0.8rem; opacity: 0.82; white-space: nowrap; }
.seat-add { border-style: dashed; justify-content: flex-start; font-weight: 650; }
.seat-add svg { width: 20px; height: 20px; margin: 0 6px; }
.lobby-watching { font-size: 0.95rem; opacity: 0.9; }
.lobby-you { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.lobby-you-label { display: inline-flex; align-items: center; gap: 9px; font-weight: 650; margin-right: 4px; }
.lobby-rules { font-size: 0.98rem; opacity: 0.95; }
.lobby-go, .results-go { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.lobby-wait { flex: 1 1 200px; font-weight: 650; font-size: 1.05rem; }
.lobby-problem { font-weight: 650; padding: 8px 12px; border-radius: var(--r-ui); background: rgba(0, 0, 0, 0.3); }

/* ───────────── Results ───────────── */

.scores { display: grid; gap: 8px; }
.score-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 12px; align-items: center;
  padding: 10px 12px 9px; border-radius: 14px; background: rgba(0, 0, 0, 0.26); border: 1.5px solid rgba(255, 255, 255, 0.16);
}
.results.is-fresh .score-row { animation: row-in 0.42s cubic-bezier(0.2, 0.9, 0.3, 1) backwards; animation-delay: calc(var(--i) * 70ms + 120ms); }
@keyframes row-in { from { translate: -18px 0; opacity: 0; } }
.score-row.is-out { border-color: var(--p); background: color-mix(in srgb, var(--p) 26%, rgba(0, 0, 0, 0.3)); }
.score-row.is-champ { box-shadow: 0 0 0 2.5px #fffaf0; }
.score-row .avatar { width: 34px; height: 34px; font-size: 0.82rem; }
.score-who { display: grid; gap: 5px; min-width: 0; }
.score-name { font-weight: 750; font-size: 1.05rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-name small { font-weight: 500; opacity: 0.8; font-size: 0.82rem; margin-left: 4px; }
.score-name svg { width: 17px; height: 17px; vertical-align: -3px; }
.score-left { display: flex; flex-wrap: wrap; gap: 3px; }
.mini {
  display: inline-grid; place-items: center; min-width: 19px; height: 25px; padding: 0 3px; border-radius: 4px;
  background: var(--card); color: #16161a; box-shadow: 0 1.5px 0 var(--card-edge);
  font-family: var(--serif); font-style: normal; font-weight: 800; font-size: 0.76rem; line-height: 1;
}
.mini.is-red { color: #c8102e; }
.mini.is-ten { background: #ffe08a; }
.mini-more { background: transparent; color: inherit; box-shadow: none; font-family: var(--font); }
.mini-none { font-size: 0.88rem; opacity: 0.85; font-weight: 600; }
.score-nums { display: grid; justify-items: end; line-height: 1; }
.score-gain { font-weight: 700; font-size: 0.9rem; opacity: 0.9; min-height: 1em; }
.score-total { font-family: var(--serif); font-weight: 800; font-size: 1.9rem; }
.score-row.is-bust .score-total { text-decoration: underline wavy 2px; text-underline-offset: 5px; }
.score-bar { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.score-bar i { display: block; height: 100%; border-radius: 3px; background: var(--p); transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s; }
.results-limit { font-size: 0.95rem; opacity: 0.9; }

/* ───────────── Side rails ───────────── */

.side { padding: 12px 14px; border-radius: 14px; background: var(--panel); border: 1.5px solid var(--line); display: grid; gap: 10px; min-width: 0; }
.side h2 { font-size: 1rem; font-weight: 750; }
.side-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.side-meta, .set-hint { color: var(--muted); font-size: 0.86rem; }
.pls { display: grid; gap: 4px; }
.pl {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 9px; width: 100%;
  padding: 6px 8px; border: 1.5px solid transparent; border-radius: 10px; background: transparent; color: var(--ink); text-align: left;
}
.pls.has-cards .pl { grid-template-columns: auto minmax(0, 1fr) auto 2.6ch; }
button.pl:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.pl.is-turn { border-color: var(--p); background: color-mix(in srgb, var(--p) 16%, transparent); }
.pl-name { display: flex; align-items: baseline; gap: 5px; min-width: 0; font-weight: 650; line-height: 1.2; }
.pl-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-name small { font-weight: 400; color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.pl-name svg { width: 14px; height: 14px; flex: none; align-self: center; }
.pl-cards { font-family: var(--serif); font-weight: 700; font-size: 0.9rem; padding: 1px 6px; border-radius: 4px; background: var(--card); color: #16161a; box-shadow: 0 1.5px 0 var(--card-edge); }
.pl-score { font-family: var(--serif); font-weight: 800; font-size: 1.05rem; text-align: right; }
.pl .score-bar { height: 4px; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.watchers { display: flex; flex-wrap: wrap; gap: 5px 6px; align-items: center; }
.watcher { padding: 2px 9px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); font-weight: 600; font-size: 0.9rem; }
.set-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.log { display: grid; gap: 5px; max-height: 52dvh; overflow-y: auto; font-size: 0.92rem; overscroll-behavior: contain; }
.log li { line-height: 1.3; padding-left: 10px; border-left: 3px solid var(--p, var(--line)); }
.log-swipe { font-weight: 750; }
.log-pickup { color: var(--warn); }
.log-end { font-weight: 750; }
.log-empty { color: var(--muted); border-left-color: transparent !important; padding-left: 0 !important; }

/* ───────────── Effects layer ───────────── */

.fx { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.ghost { position: fixed; will-change: transform; }
.ghost > .card { width: 100%; height: 100%; }
.ghost > .card:not(.flipper), .ghost .flip-in > .card { box-shadow: 0 calc(var(--cw) * 0.03) 0 var(--card-edge), 0 14px 24px rgba(0, 0, 0, 0.38); }
.wash { position: fixed; inset: 0; }
.wash-card > .card { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); } /* thirty soft shadows in one spot would turn into a black blob */

.callout { position: fixed; inset: 0; }
.callout-band {
  position: absolute; left: -25vw; top: 46%; translate: 0 -50%;
  width: 150vw; padding: 1.6vh 0 2vh; display: grid; justify-items: center; rotate: -5deg;
  background: var(--p); color: var(--on-p);
  box-shadow: 0 0 0 5px #fffdf8, 0 0 0 11px var(--p), 0 24px 60px rgba(0, 0, 0, 0.5);
}
.callout-band b { font-size: clamp(5rem, 27vw, 12.5rem); font-weight: 900; font-stretch: 62%; text-transform: uppercase; line-height: 0.84; letter-spacing: -0.012em; }
.callout-band span { font-weight: 750; font-size: clamp(1rem, 4vw, 1.6rem); margin-top: 0.4em; }

.float-label {
  position: fixed; font-family: var(--serif); font-weight: 800; font-size: 2rem; line-height: 1;
  padding: 4px 12px 6px; border-radius: 12px; background: var(--p); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 0 3px #fffdf8, 0 8px 18px rgba(0, 0, 0, 0.4);
}
.confetto { position: fixed; font-style: normal; line-height: 1; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }

/* ───────────── Dialogs ───────────── */

.dialog {
  width: min(640px, calc(100vw - 24px)); max-height: min(86dvh, 900px); padding: 0;
  border: 1.5px solid var(--line); border-radius: 18px; background: var(--table); color: var(--ink);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.dialog[open] { display: flex; flex-direction: column; animation: dialog-in 0.18s ease-out; }
@keyframes dialog-in { from { translate: 0 10px; opacity: 0; } }
.dialog::backdrop { background: rgba(12, 10, 8, 0.66); }
.dialog-small { width: min(430px, calc(100vw - 24px)); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 12px 22px; border-bottom: 1.5px solid var(--line); }
.dialog h2 { font-size: 1.45rem; font-weight: 800; font-stretch: 78%; line-height: 1.1; }
.dialog-body { padding: 18px 22px 22px; overflow-y: auto; display: grid; gap: 22px; }
.dialog > form { padding: 22px; display: grid; gap: 16px; }
.dialog-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

.set-group { display: grid; gap: 14px; }
.set-group h3 { font-size: 1.05rem; font-weight: 800; padding-bottom: 6px; border-bottom: 1.5px solid var(--line); }
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; }
.set-row > div > small { display: block; color: var(--muted); font-size: 0.88rem; font-weight: 400; }
.set-row label { font-weight: 600; }
.set-row select { width: auto; min-width: 110px; }
.limit-pick { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.limit-pick input[type='number'] { width: 92px; font-family: var(--serif); font-weight: 800; }
.seg { display: inline-flex; border: 1.5px solid var(--line); border-radius: var(--r-ui); overflow: hidden; background: var(--panel); }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; }
.seg span { display: grid; place-items: center; min-width: 40px; min-height: 41px; padding: 0 10px; font-weight: 650; cursor: pointer; }
.seg input:checked + span { background: var(--ink); color: var(--table); }
.seg input:disabled + span { opacity: 0.45; cursor: default; }
.seg input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: -3px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--ink); }
.check small { display: block; font-weight: 400; color: var(--muted); font-size: 0.88rem; }
.readonly-note { padding: 10px 14px; border-radius: var(--r-ui); background: var(--panel); border: 1.5px solid var(--line); }

.prose { gap: 10px; max-width: 64ch; }
.prose h3 { font-size: 1.1rem; font-weight: 800; margin-top: 10px; }
.prose h3:first-child { margin-top: 0; }
.prose ul { list-style: disc; padding-left: 1.3em; display: grid; gap: 4px; }

.player-actions { display: grid; gap: 8px; }
.player-actions .btn { justify-content: flex-start; }

/* ───────────── Toasts ───────────── */

.toasts { position: fixed; z-index: 100; left: 50%; bottom: max(88px, calc(env(safe-area-inset-bottom) + 88px)); transform: translateX(-50%); display: grid; gap: 8px; width: min(440px, calc(100vw - 24px)); pointer-events: none; }
.toast { padding: 11px 16px; border-radius: 11px; background: var(--ink); color: var(--table); font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); animation: toast-in 0.18s ease-out; }
.toast.is-error { background: #c5202a; color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ───────────── Smaller screens ───────────── */

@media (min-width: 1121px) {
  .strip { display: none; } /* the scores rail already shows the order */
}
@media (max-width: 1120px) {
  .layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 680px; gap: 14px; }
  .stage { grid-column: 1 / -1; order: -1; }
  .log { max-height: 280px; }
}
@media (max-width: 760px) {
  .home { grid-template-columns: 1fr; gap: 40px; padding: 36px 22px 48px; align-content: center; }
  .home-table { max-width: 330px; width: 86%; justify-self: center; }
  .bar-name { display: none; }
  .bar { gap: 8px; }
  .bar-tools .chip { margin-left: 4px; }
  .chip-name { max-width: 92px; }
  .tool { width: 36px; height: 36px; }
  .dialog-body { padding: 16px; }
  .set-row { grid-template-columns: 1fr; }
  .limit-pick { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .bar { flex-wrap: nowrap; padding-top: 6px; padding-bottom: 6px; }
  #invite-code { display: none; }
  .invite-short { display: inline; }
  .chip { padding: 4px 11px; }
  .chip-name { max-width: 84px; }
  .bar-tools .chip { margin-left: 2px; }
  .layout { grid-template-columns: 1fr; padding: 8px 8px 16px; }
  .game { gap: 8px; }
  #mat { padding: 13px 12px 11px; }
  .mat { --r-mat: 18px; }
  .turn { min-height: 3.3rem; }
  .handzone { padding: 6px 10px 10px; border-radius: 16px; }
  .zone-foot, .zone-head { min-height: 32px; }
  .seats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
  .seat { padding: 7px 10px; gap: 8px; min-height: 46px; }
  .seat .avatar { width: 28px; height: 28px; font-size: 0.72rem; }
  .seat-add svg { margin: 0 4px; }
  .seat-tags { display: none; }
  .btn-large { padding: 12px 18px; }
}
@media (max-width: 400px) {
  .tool-theme { display: none; } /* still in Room settings */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}