/* 1.100 (branding update): type follows the logo. Unbounded (SIL OFL 1.1, see fonts/unbounded-OFL.txt) for headings,
   codes, big numbers and card numbers: Black for display, ExtraBold for the cards. Figtree stays for reading text.
   Each family has one weight, so whatever weight a rule asks for, it gets that one. */
@font-face { font-family: 'Unbounded'; src: url('/fonts/unbounded-900.woff2') format('woff2'); font-weight: 100 900; font-display: swap; 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: 'Unbounded'; src: url('/fonts/unbounded-900-ext.woff2') format('woff2'); font-weight: 100 900; font-display: swap; 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; }
/* 1.106: card numbers in Rubik ExtraBold (SIL OFL 1.1, fonts/rubik-OFL.txt): taller digits than Unbounded, which looked squashed on the cards. */
@font-face { font-family: 'Rubik Card'; src: url('/fonts/rubik-800.woff2') format('woff2'); font-weight: 100 900; font-display: swap; 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: 'Unbounded Card'; src: url('/fonts/unbounded-800.woff2') format('woff2'); font-weight: 100 900; font-display: swap; 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: 'Unbounded Card'; src: url('/fonts/unbounded-800-ext.woff2') format('woff2'); font-weight: 100 900; font-display: swap; 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: 'Figtree'; src: url('/fonts/figtree-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/fonts/figtree-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/fonts/figtree-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/fonts/figtree-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }

/* Lowza — a felt card table. One-screen game: header, opponents rail, table mat, your grid, dock.
   Dark table only (no light theme). Its colors follow the round’s card backs. Every color comes from these tokens. */
:root {
  --felt-0: #0d1019;      /* page edge */
  --felt: #1b2032;        /* the table */
  --felt-hi: #272d44;     /* lamp highlight */
  --surface: #111420;     /* panels, rails, sheets */
  --surface-2: #171b29;   /* inputs, rows */
  --line: #4f5a7d;        /* decorative borders */
  --line-strong: #6976a0; /* borders that carry meaning (3:1+) */
  --paper: #f7f2e6;       /* text + card stock */
  --muted: #c4c9d9;       /* secondary text (7:1 on felt) */
  --accent: #f5bd4f;      /* gold: your turn, primary actions, drop targets */
  --accent-ink: #2b1b00;
  --good: #6fe0a0;
  --bad: #ff7a6b;
  --back: #1d2a5c;        /* card backs: navy with gold lattice */
  /* Card faces ("Parlour colour"): antique value colours to sit with the Victorian backs */
  /* 1.106: navy best cards, gray 0, sage, ochre, brick, as accents on cream cards with black numbers. Muted, and kept
     apart by lightness so red-green colorblind players can still tell the groups apart. */
  --c-neg: #2b5797;
  --c-zero: #bfc2c9;
  --c-low: #2e8b7a;
  --c-mid: #eaa526;
  --c-high: #c8372d;
  --face-ink: #fbf6ea;
  --num-ink: #1b1a22;
  --font-card: 'Rubik Card', 'Arial Black', system-ui, sans-serif; /* 1.106: heavy with tall digits, legible down to opponents' tiny grids */
  --card-ink: #15151f;
  --scrim: rgba(6, 8, 12, 0.66);
  --font-display: 'Unbounded', 'Arial Black', system-ui, sans-serif;
  --font-body: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --gap: 8px;
  --tap: 44px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --z-ghost: 50; --z-sheet: 30; --z-tray: 25; --z-toast: 60;
  color-scheme: dark;
  -webkit-tap-highlight-color: transparent;
}

/* The table takes its colors from this round's card backs. */
@property --felt-0 { syntax: '<color>'; inherits: true; initial-value: #0d1019; }
@property --felt { syntax: '<color>'; inherits: true; initial-value: #1b2032; }
@property --felt-hi { syntax: '<color>'; inherits: true; initial-value: #272d44; }
@property --surface { syntax: '<color>'; inherits: true; initial-value: #111420; }
@property --surface-2 { syntax: '<color>'; inherits: true; initial-value: #171b29; }
@property --line { syntax: '<color>'; inherits: true; initial-value: #4f5a7d; }
@property --line-strong { syntax: '<color>'; inherits: true; initial-value: #6976a0; }
@property --muted { syntax: '<color>'; inherits: true; initial-value: #c4c9d9; }
:root { transition: --felt-0 700ms ease, --felt 700ms ease, --felt-hi 700ms ease, --surface 700ms ease, --surface-2 700ms ease, --line 700ms ease, --line-strong 700ms ease, --muted 700ms ease; }
/* THEMES:START */
:root[data-back="1"] { --felt-0: #1a0c0f; --felt: #331a1e; --felt-hi: #46252b; --surface: #201013; --surface-2: #29161a; --line: #7e4e56; --line-strong: #a26771; --muted: #d9c4c8; --scrim: rgba(13, 6, 7, 0.66); }
:root[data-back="2"] { --felt-0: #0e1814; --felt: #1d3028; --felt-hi: #2a4138; --surface: #121e19; --surface-2: #192721; --line: #547869; --line-strong: #6f9a88; --muted: #c4d9d0; --scrim: rgba(7, 12, 10, 0.66); }
:root[data-back="3"] { --felt-0: #140d1a; --felt: #271a32; --felt-hi: #362745; --surface: #191120; --surface-2: #201729; --line: #674f7d; --line-strong: #8669a0; --muted: #cfc4d9; --scrim: rgba(10, 6, 13, 0.66); }
:root[data-back="4"] { --felt-0: #151111; --felt: #292323; --felt-hi: #3a3232; --surface: #1a1616; --surface-2: #221d1d; --line: #6c6060; --line-strong: #8c7d7d; --muted: #d9c4c4; --scrim: rgba(10, 8, 8, 0.66); }
:root[data-back="5"] { --felt-0: #0c191a; --felt: #1a3133; --felt-hi: #254446; --surface: #101f20; --surface-2: #162829; --line: #4e7b7e; --line-strong: #679ea2; --muted: #c4d8d9; --scrim: rgba(6, 12, 13, 0.66); }
:root[data-back="6"] { --felt-0: #160f18; --felt: #2c1e2f; --felt-hi: #3c2b40; --surface: #1c131e; --surface-2: #241a26; --line: #705676; --line-strong: #917198; --muted: #d5c4d9; --scrim: rgba(11, 7, 12, 0.66); }
:root[data-back="7"] { --felt-0: #0d111a; --felt: #1a2232; --felt-hi: #263045; --surface: #111520; --surface-2: #171c29; --line: #4f5d7d; --line-strong: #687aa1; --muted: #c4cbd9; --scrim: rgba(6, 8, 13, 0.66); }
:root[data-back="8"] { --felt-0: #1a0c12; --felt: #331a24; --felt-hi: #462532; --surface: #201016; --surface-2: #29161e; --line: #7e4e61; --line-strong: #a2677e; --muted: #d9c4cc; --scrim: rgba(13, 6, 9, 0.66); }
:root[data-back="9"] { --felt-0: #0c101a; --felt: #1a2133; --felt-hi: #252e46; --surface: #101520; --surface-2: #161c29; --line: #4e5b7e; --line-strong: #6778a2; --muted: #c4cad9; --scrim: rgba(6, 8, 13, 0.66); }
:root[data-back="10"] { --felt-0: #0c1a14; --felt: #1a3328; --felt-hi: #254638; --surface: #102019; --surface-2: #162921; --line: #4e7e6a; --line-strong: #67a289; --muted: #c4d9d0; --scrim: rgba(6, 13, 10, 0.66); }
:root[data-back="11"] { --felt-0: #111514; --felt: #222a27; --felt-hi: #313b37; --surface: #161b19; --surface-2: #1d2320; --line: #5e6e68; --line-strong: #7c8e86; --muted: #c4d9d1; --scrim: rgba(8, 10, 10, 0.66); }
:root[data-back="12"] { --felt-0: #0e1118; --felt: #1d222f; --felt-hi: #2a3041; --surface: #13161e; --surface-2: #191d27; --line: #555e77; --line-strong: #707b99; --muted: #c4cad9; --scrim: rgba(7, 8, 12, 0.66); }
:root[data-back="13"] { --felt-0: #1a0d0d; --felt: #321a1a; --felt-hi: #452626; --surface: #201111; --surface-2: #291717; --line: #7d4f4f; --line-strong: #a16969; --muted: #d9c4c4; --scrim: rgba(13, 6, 6, 0.66); }
:root[data-back="14"] { --felt-0: #0d1019; --felt: #1c2131; --felt-hi: #282f43; --surface: #12151f; --surface-2: #181c28; --line: #525c7a; --line-strong: #6c799d; --muted: #c4c9d9; --scrim: rgba(6, 8, 12, 0.66); }
:root[data-back="15"] { --felt-0: #0f1713; --felt: #1f2e26; --felt-hi: #2c3f36; --surface: #141d18; --surface-2: #1a2520; --line: #587466; --line-strong: #749685; --muted: #c4d9cf; --scrim: rgba(7, 11, 9, 0.66); }
:root[data-back="16"] { --felt-0: #100f18; --felt: #211e2e; --felt-hi: #2e2b40; --surface: #15131d; --surface-2: #1c1a26; --line: #5b5676; --line-strong: #777198; --muted: #c7c4d9; --scrim: rgba(8, 7, 12, 0.66); }
:root[data-back="17"] { --felt-0: #171510; --felt: #2d2920; --felt-hi: #3e392d; --surface: #1c1a14; --surface-2: #25221b; --line: #726b5a; --line-strong: #948b76; --muted: #d9d3c4; --scrim: rgba(11, 10, 8, 0.66); }
:root[data-back="18"] { --felt-0: #1a0f0c; --felt: #331f1a; --felt-hi: #452d26; --surface: #201410; --surface-2: #291b17; --line: #7e594e; --line-strong: #a17568; --muted: #d9c9c4; --scrim: rgba(13, 7, 6, 0.66); }
:root[data-back="19"] { --felt-0: #1a0c0e; --felt: #331a1e; --felt-hi: #46252b; --surface: #201013; --surface-2: #291619; --line: #7e4e55; --line-strong: #a26770; --muted: #d9c4c7; --scrim: rgba(13, 6, 7, 0.66); }
:root[data-back="20"] { --felt-0: #111415; --felt: #22282a; --felt-hi: #30373b; --surface: #16191b; --surface-2: #1d2123; --line: #5e696e; --line-strong: #7b888e; --muted: #c4d2d9; --scrim: rgba(8, 10, 10, 0.66); }
:root[data-back="21"] { --felt-0: #0c181a; --felt: #1a2f33; --felt-hi: #254046; --surface: #101e20; --surface-2: #162629; --line: #4e777e; --line-strong: #6799a2; --muted: #c4d6d9; --scrim: rgba(6, 12, 13, 0.66); }
:root[data-back="22"] { --felt-0: #15180e; --felt: #2a2f1e; --felt-hi: #3b412b; --surface: #1b1e13; --surface-2: #232619; --line: #6e7755; --line-strong: #8e9971; --muted: #d4d9c4; --scrim: rgba(10, 12, 7, 0.66); }
:root[data-back="23"] { --felt-0: #130f18; --felt: #261e2f; --felt-hi: #352b40; --surface: #18131e; --surface-2: #1f1926; --line: #655676; --line-strong: #837198; --muted: #cec4d9; --scrim: rgba(9, 7, 12, 0.66); }
:root[data-back="24"] { --felt-0: #0c111a; --felt: #1a2233; --felt-hi: #253046; --surface: #101620; --surface-2: #161d29; --line: #4e5e7e; --line-strong: #677ba2; --muted: #c4cbd9; --scrim: rgba(6, 8, 13, 0.66); }
:root[data-back="25"] { --felt-0: #1a0c0e; --felt: #331a1d; --felt-hi: #46252a; --surface: #201012; --surface-2: #291619; --line: #7e4e54; --line-strong: #a2676f; --muted: #d9c4c7; --scrim: rgba(13, 6, 7, 0.66); }
:root[data-back="26"] { --felt-0: #121314; --felt: #242528; --felt-hi: #333438; --surface: #171819; --surface-2: #1f1f21; --line: #636469; --line-strong: #808389; --muted: #c4c9d9; --scrim: rgba(9, 9, 10, 0.66); }
:root[data-back="27"] { --felt-0: #0f1715; --felt: #202d2a; --felt-hi: #2d3e3a; --surface: #141c1a; --surface-2: #1b2522; --line: #59736c; --line-strong: #75948c; --muted: #c4d9d4; --scrim: rgba(7, 11, 10, 0.66); }
:root[data-back="28"] { --felt-0: #140e18; --felt: #281e2f; --felt-hi: #382b41; --surface: #1a131e; --surface-2: #221926; --line: #6a5577; --line-strong: #8a7199; --muted: #d1c4d9; --scrim: rgba(10, 7, 12, 0.66); }
:root[data-back="29"] { --felt-0: #1a150c; --felt: #332a1a; --felt-hi: #463a25; --surface: #201a10; --surface-2: #292216; --line: #7e6c4e; --line-strong: #a28c67; --muted: #d9d1c4; --scrim: rgba(13, 10, 6, 0.66); }
:root[data-back="30"] { --felt-0: #0e1913; --felt: #1c3026; --felt-hi: #294236; --surface: #121f18; --surface-2: #182720; --line: #537966; --line-strong: #6e9c85; --muted: #c4d9cf; --scrim: rgba(7, 12, 9, 0.66); }
:root[data-back="31"] { --felt-0: #0e1019; --felt: #1c2130; --felt-hi: #292f42; --surface: #12151f; --surface-2: #181c27; --line: #525c7a; --line-strong: #6d799c; --muted: #c4c9d9; --scrim: rgba(7, 8, 12, 0.66); }
:root[data-back="32"] { --felt-0: #141212; --felt: #282525; --felt-hi: #383333; --surface: #191717; --surface-2: #211f1f; --line: #696363; --line-strong: #898181; --muted: #d9c4c4; --scrim: rgba(10, 9, 9, 0.66); }
/* THEMES:END */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--felt-0);
  background-image: radial-gradient(130% 75% at 50% 42%, var(--felt-hi) 0%, var(--felt) 48%, var(--felt-0) 100%);
  background-attachment: fixed;
  color: var(--paper);
  font: 16px/1.45 var(--font-body);
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
input { -webkit-user-select: text; user-select: text; }
button { font: inherit; color: inherit; cursor: pointer; }
#app {
  min-height: 100%;
  padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(16px, env(safe-area-inset-left, 0px));
}
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.i.sm { width: 16px; height: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--surface-2);
  font-weight: 700; font-size: 16px; text-decoration: none; color: var(--paper);
  transition: transform 120ms var(--ease-out), background-color 150ms, opacity 150ms;
}
.btn:active { transform: scale(0.97); background: var(--surface); }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:active { background: color-mix(in srgb, var(--accent) 85%, black); }
.btn.ghost { background: transparent; }
.btn.danger { background: transparent; border-color: color-mix(in srgb, var(--bad) 70%, transparent); color: var(--bad); }
.btn.danger:active { background: color-mix(in srgb, var(--bad) 18%, transparent); }
.btn.small { min-height: var(--tap); padding: 0 16px; font-size: 15px; }
.btn.block { width: 100%; }
.icon-btn {
  width: var(--tap); height: var(--tap); border-radius: 50%; border: 1.5px solid var(--line);
  background: var(--surface); display: grid; place-items: center; flex: none; padding: 0;
  transition: transform 120ms var(--ease-out), background-color 150ms;
}
.icon-btn:active { transform: scale(0.96); background: var(--surface-2); }
.link { background: none; border: 0; color: var(--muted); text-decoration: underline; padding: 12px; font-size: 15px; min-height: var(--tap); }

/* ------------------------------------------------------------ home + lobby */
.home, .lobby { max-width: 460px; width: 100%; min-width: 0; margin: 0 auto; padding-block: 24px 32px; display: flex; flex-direction: column; gap: 16px; }
.wordmark { min-width: 0; display: flex; align-items: center; gap: 14px; padding-block: 8px; }
.wordmark h1 { font: clamp(34px, 11.5vw, 44px)/0.95 var(--font-display); margin: 0; letter-spacing: 0.01em; text-wrap: balance; }
.wordmark p { margin: 6px 0 0; text-wrap: balance; color: var(--muted); font-weight: 600; }
.panel { background: var(--surface); border: 1.5px solid var(--line); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.panel h2 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 800; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 700; color: var(--muted); }
.input {
  width: 100%; min-height: 50px; border-radius: 14px; border: 1.5px solid var(--line);
  background: var(--surface-2); color: var(--paper); padding: 0 14px; font: 600 17px var(--font-body);
}
.input::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
.input:focus { outline: none; border-color: var(--accent); }
.otp-input { text-transform: uppercase; letter-spacing: 0.3em; font-family: var(--font-display); font-size: 20px; text-align: center; }
.row { display: flex; gap: 10px; align-items: center; }
.row > .grow { flex: 1; min-width: 0; }
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg button {
  min-height: var(--tap); padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line);
  background: transparent; font-weight: 700; font-size: 15px;
}
.seg button[aria-pressed="true"] { background: var(--paper); color: var(--felt); border-color: var(--paper); }
.seg button[disabled] { opacity: 0.6; cursor: default; }
.seg.even { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.seg.even button { padding: 0 6px; }
.games { display: flex; flex-direction: column; gap: 8px; }
.xfer-code { font: clamp(24px, 8.6vw, 40px)/1 var(--font-display); white-space: nowrap; letter-spacing: 0.12em; text-align: center; padding: 18px 8px; border-radius: 16px; background: var(--surface-2); border: 1.5px dashed var(--line-strong); -webkit-user-select: all; user-select: all; }
.xfer-code span { color: var(--muted); }
.xfer-form { display: flex; gap: 8px; }
.xfer-form .input { flex: 1; min-width: 0; font-size: 18px; letter-spacing: 0.15em; }
.game-row-wrap { display: flex; gap: 8px; align-items: center; }
.game-row-wrap .game-row { flex: 1; min-width: 0; }
.game-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 56px; border-radius: 14px;
  background: var(--surface-2); border: 1.5px solid var(--line); text-align: left; width: 100%;
}
.game-row .code { font-family: var(--font-display); letter-spacing: 0.12em; font-size: 15px; }
.game-row .meta { flex: 1; min-width: 0; color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* v53 rows: two lines (name or code + 🎉 / who and when), status pill on the right */
.game-row .gr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.game-row .gr-top { display: flex; align-items: center; gap: 6px; min-width: 0; height: 20px; line-height: 20px; }
.game-row .gr-top .ttl { font-weight: 800; font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-row .gr-top .party-tag { flex: none; font-size: 14px; }
.game-row .gr-main .meta { flex: none; font-size: 13px; }
.game-row > .pill { flex: none; max-width: 42%; overflow: hidden; text-overflow: ellipsis; }
.pill { font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--paper); white-space: nowrap; }
.pill.hot { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.hint { font-size: 15px; color: var(--muted); margin: 0; }
.hint strong { color: var(--paper); }
.topline { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bigcode { text-align: center; padding-block: 4px; }
.bigcode .lbl { font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); font-weight: 800; }
.bigcode .code { font: 54px/1.05 var(--font-display); letter-spacing: 0.14em; margin-top: 4px; }
.players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.players li { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; min-height: 56px; border-radius: 14px; background: var(--surface-2); border: 1.5px solid var(--line); }
.players .nm { flex: 1; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: transparent; border: 2px solid var(--line-strong); flex: none; }
.dot.on { background: var(--good); border-color: var(--good); }
.tag { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.bot { display: inline-flex; color: var(--muted); }

/* ------------------------------------------------------------ cards */
.card {
  --w: 72px;
  width: var(--w); aspect-ratio: 5 / 7; border-radius: calc(var(--w) * 0.12);
  position: relative; display: grid; place-items: center; flex: none;
  border: 0; padding: 0; cursor: default;
  font-family: var(--font-display); color: var(--card-ink);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 4px 10px rgba(0, 0, 0, 0.28);
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), opacity 160ms;
}
.card .num { font-family: var(--font-card); font-weight: 700; font-size: calc(var(--w) * 0.5); line-height: 1; letter-spacing: -0.02em; }
.card .corner { position: absolute; top: 11%; left: 14%; font-family: var(--font-card); font-weight: 700; font-size: calc(var(--w) * 0.16); line-height: 1; }
.card .corner.b { top: auto; left: auto; bottom: 11%; right: 14%; transform: rotate(180deg); }
/* 1.111: the spine. A color band down the left edge (24% of the width) ending in the logo's low point (the W's wedge),
   with the small number inside it. Replaces 1.110's frame and the top/bottom wedges; the wash stays. */
/* 1.109: each card also gets a light wash of its color (--wash, 24% over the card stock) and a frame in its color
   (1.110: thick, 10% of the card's width),
   drawn in the same mask as the wedges so highlight glows (box-shadow) never hide it. */
/* 1.106 card faces: cream stock, black numbers, and the logo's wedge (the W's "low point") top and bottom in the card's
   color. The color marks the group (and True Colors); the number does the reading, so colorblind players lose nothing. */
/* 1.113: Luke's center circle. Cream stock, a big circle in the card's color, the number inside it (cream on navy, teal and
   red, black on gray and ochre: --chip-ink). Replaces 1.111's spine and the washes. */
.card.face { background: var(--paper); color: var(--num-ink); --wedges: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 70' preserveAspectRatio='none'%3E%3Cpath d='M25 14A21 21 0 1 1 24.99 14Z'/%3E%3C/svg%3E"); }
.card.face .num { text-shadow: none; }
.card.face > .corner { top: 5%; left: 8%; color: var(--num-ink); }
.card.face > .corner.b { top: auto; left: auto; bottom: 5%; right: 8%; }
.card.face .num { font-size: calc(var(--w) * 0.54); letter-spacing: -0.045em; color: var(--chip-ink); } /* centered in the circle */
/* 1.115: Party's special cards use the same circle as the number cards (see the Party section) */
.card.face::before {
  content: ''; position: absolute; inset: 7%; border-radius: calc(var(--w) * 0.07);
  background: radial-gradient(110% 80% at 50% 35%, rgba(255, 255, 255, 0.16), transparent 55%, rgba(0, 0, 0, 0.18)), var(--tone);
  box-shadow: inset 0 0 0 max(1px, calc(var(--w) * 0.02)) rgba(255, 248, 230, 0.5);
}
.card.face::before {
  inset: 0; border-radius: inherit; box-shadow: none; background: var(--tone);
  -webkit-mask: var(--wedges) center / 100% 100% no-repeat; mask: var(--wedges) center / 100% 100% no-repeat;
}
.card.face.special { color: var(--num-ink); background: var(--paper); }
/* the best cards (−2, −1) carry a small star */
.card.face.t-neg { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231b1a22' d='M12 0C13 8 16 11 24 12C16 13 13 16 12 24C11 16 8 13 0 12C8 11 11 8 12 0Z'/%3E%3C/svg%3E") no-repeat right 8% top 5% / 13% auto, var(--paper); }
.card.face > * { position: relative; }
.card.face > .corner, .card.face > .hx { position: absolute; } /* 1.114: the tap layer must not take a row, or the number rides up */
.t-neg { --tone: var(--c-neg); --chip-ink: var(--face-ink); }
.t-zero { --tone: var(--c-zero); --chip-ink: var(--num-ink); }
.t-low { --tone: var(--c-low); --chip-ink: var(--face-ink); }
.t-mid { --tone: var(--c-mid); --chip-ink: var(--num-ink); }
.t-high { --tone: var(--c-high); --chip-ink: var(--face-ink); }
.card.back {
  /* 1.156: a back image that is still loading or failed paints nothing, so the Lowza layer shows (D-01, D-02) */
  background: var(--back-img) center / 100% 100% no-repeat, var(--lowza-img) center / 100% 100% no-repeat, var(--back);
  border: calc(var(--w) * 0.05) solid var(--paper);
}
/* Card backs: original designs in the style of Victorian decorative backs (1850s–1890s).
   Each game starts on a random one and the deck changes every round, the same for everyone. */
/* BACKS:START */
:root { --lowza-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 140%22%3E %3Crect width=%22100%22 height=%22140%22 fill=%22%23161616%22/%3E %3Crect x=%224%22 y=%224%22 width=%2292%22 height=%22132%22 rx=%225%22 fill=%22none%22 stroke=%22%23F7F2E6%22 stroke-width=%221%22 opacity=%220.55%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22none%22 stroke=%22%23F7F2E6%22 stroke-width=%220.5%22 opacity=%220.35%22/%3E %3Csvg x=%2223.00%22 y=%2252.26%22 width=%2254%22 height=%2235.48%22 viewBox=%221809 828 1452 954%22%3E%3Cpath fill=%22%23F7F2E6%22 fill-rule=%22evenodd%22 d=%22M1811.4 884.3L1811.9 884.8L1811.9 891.4L1812.8 895.3L1823.3 916.7L1827.6 931.0L1831.9 939.6L1832.8 943.9L1836.2 952.5L1836.2 953.9L1841.4 964.9L1842.9 970.6L1847.2 979.2L1851.9 995.0L1854.8 1000.2L1856.7 1005.0L1857.7 1009.3L1861.9 1017.8L1863.4 1023.6L1864.3 1025.0L1866.7 1033.6L1868.6 1037.4L1870.1 1043.1L1873.9 1050.8L1879.6 1068.4L1882.9 1074.6L1887.7 1090.3L1892.0 1098.9L1896.3 1113.2L1901.5 1124.2L1905.8 1138.5L1910.6 1148.5L1914.9 1162.9L1919.2 1171.4L1920.1 1175.7L1923.5 1184.3L1923.5 1185.8L1927.3 1193.4L1930.2 1202.4L1934.5 1211.0L1934.9 1213.9L1936.8 1218.2L1941.6 1233.9L1945.4 1241.6L1948.3 1250.6L1952.6 1259.2L1952.6 1260.6L1955.9 1269.7L1956.4 1272.6L1961.6 1283.5L1961.6 1285.0L1964.0 1290.7L1965.9 1297.8L1969.7 1305.5L1971.7 1312.2L1976.0 1320.7L1976.9 1325.0L1980.2 1333.6L1980.2 1335.1L1983.6 1341.7L1986.9 1351.7L1991.7 1361.8L1991.7 1363.2L1994.1 1368.9L1998.8 1384.7L2003.1 1393.2L2007.4 1407.6L2011.7 1416.1L2019.8 1441.4L2024.6 1451.4L2028.9 1465.7L2033.2 1474.3L2033.7 1477.2L2036.1 1482.9L2040.8 1498.7L2045.1 1507.2L2046.1 1511.5L2052.3 1528.7L2052.3 1530.1L2057.5 1541.1L2058.5 1545.9L2060.4 1549.7L2060.4 1551.1L2064.2 1561.6L2064.2 1563.1L2069.4 1574.0L2073.7 1588.3L2078.0 1596.9L2085.7 1621.3L2090.0 1629.8L2090.9 1634.1L2094.2 1642.7L2094.2 1644.1L2099.5 1655.1L2100.0 1658.0L2102.4 1663.7L2102.4 1665.1L2105.2 1672.3L2109.5 1686.6L2114.3 1696.6L2115.7 1702.3L2124.8 1720.5L2127.6 1723.8L2132.9 1731.9L2141.0 1740.5L2154.8 1750.5L2172.5 1759.6L2176.8 1760.5L2183.0 1762.9L2194.9 1763.9L2200.1 1765.8L2204.9 1766.7L2213.5 1766.7L2222.1 1764.8L2232.6 1764.8L2233.1 1764.4L2346.6 1763.9L2347.1 1763.4L2696.2 1763.4L2696.7 1763.9L2806.4 1764.4L2806.9 1764.8L2811.7 1764.8L2820.2 1766.7L2831.2 1766.7L2836.0 1765.8L2841.2 1763.9L2848.4 1763.4L2857.4 1760.5L2862.2 1760.1L2876.0 1753.4L2879.4 1750.5L2886.5 1746.2L2889.9 1742.9L2896.6 1738.6L2899.4 1735.7L2903.7 1729.1L2907.1 1725.7L2910.4 1720.0L2915.2 1713.8L2917.1 1710.0L2919.5 1701.9L2923.7 1693.3L2925.7 1686.6L2929.5 1679.0L2931.9 1670.9L2935.7 1663.7L2937.6 1656.5L2941.9 1648.0L2943.3 1642.2L2947.6 1633.7L2949.5 1627.0L2956.7 1612.7L2958.1 1606.9L2962.4 1598.4L2964.8 1590.2L2971.4 1576.9L2973.4 1570.2L2977.6 1561.6L2979.1 1555.9L2983.4 1547.3L2985.3 1540.6L2990.1 1530.6L2991.5 1524.9L2998.6 1510.6L3000.1 1504.9L3004.4 1496.3L3006.3 1489.6L3011.0 1479.6L3012.5 1473.9L3018.2 1462.9L3021.5 1452.9L3026.3 1442.9L3027.3 1438.6L3033.9 1425.2L3035.8 1420.0L3035.8 1418.5L3041.1 1407.6L3042.5 1401.8L3046.8 1393.2L3048.2 1387.5L3052.5 1378.9L3054.4 1371.8L3057.8 1365.6L3060.6 1356.5L3067.8 1342.2L3069.7 1335.5L3073.5 1327.9L3075.4 1321.2L3080.2 1311.2L3081.6 1305.5L3088.8 1291.2L3090.7 1284.5L3094.5 1276.9L3096.4 1270.2L3100.2 1262.5L3102.1 1255.9L3106.9 1245.9L3108.3 1240.1L3115.5 1225.8L3120.3 1210.6L3127.0 1197.2L3129.8 1188.1L3133.2 1181.9L3135.5 1173.8L3139.8 1165.2L3141.3 1159.5L3145.6 1150.9L3147.5 1143.8L3150.8 1137.6L3153.7 1128.5L3157.5 1120.9L3159.4 1114.2L3163.7 1105.6L3166.1 1097.5L3172.3 1085.6L3174.7 1077.5L3177.5 1072.2L3180.4 1063.2L3184.7 1054.6L3186.1 1048.9L3189.9 1041.2L3192.8 1032.2L3197.1 1023.6L3197.5 1020.7L3199.9 1015.0L3200.9 1010.2L3205.7 1000.7L3206.6 996.4L3208.5 991.6L3214.2 980.6L3219.5 963.9L3223.8 955.4L3226.2 947.2L3232.8 933.9L3237.6 918.6L3240.5 912.4L3243.3 903.8L3243.3 902.4L3250.0 883.3L3251.0 879.5L3251.0 875.2L3249.1 870.5L3247.6 862.3L3242.9 855.2L3239.5 851.9L3229.5 845.2L3221.9 842.3L3215.7 840.9L3209.0 840.9L3208.5 840.4L3161.3 840.4L3160.8 839.9L3076.9 839.9L3074.0 840.9L3070.2 844.2L3065.4 847.1L3063.5 847.6L3049.7 854.7L3045.9 858.1L3042.5 863.8L3038.7 868.5L3032.5 880.9L3031.6 885.2L3028.7 891.9L3012.0 924.8L3009.6 932.9L2994.3 963.0L2992.0 971.1L2980.5 993.5L2979.1 997.3L2977.6 999.2L2977.6 1000.2L2975.3 1004.5L2972.9 1012.6L2961.0 1036.0L2958.1 1045.0L2945.7 1069.4L2943.8 1076.5L2928.0 1107.5L2925.7 1115.6L2916.1 1135.2L2914.7 1137.1L2914.7 1138.0L2909.9 1147.1L2908.0 1153.8L2905.6 1158.1L2905.6 1159.0L2894.7 1180.5L2892.7 1187.7L2874.1 1224.4L2871.8 1232.5L2865.1 1246.3L2863.6 1248.2L2862.7 1251.1L2860.8 1254.0L2860.3 1255.9L2857.9 1259.7L2856.0 1264.5L2855.1 1265.4L2855.1 1266.4L2852.7 1270.7L2849.3 1280.7L2826.9 1325.0L2824.1 1328.4L2820.2 1330.3L2815.0 1329.8L2813.1 1328.8L2809.7 1325.0L2807.8 1318.4L2803.1 1308.8L2801.6 1303.1L2797.8 1295.5L2796.4 1289.7L2794.5 1285.9L2792.6 1278.8L2789.2 1272.6L2786.8 1264.5L2782.1 1254.9L2781.6 1251.6L2780.2 1248.7L2775.4 1233.0L2771.1 1224.4L2768.7 1216.3L2764.4 1207.7L2763.0 1202.0L2758.7 1193.4L2757.3 1187.7L2752.0 1176.7L2752.0 1175.3L2749.2 1168.1L2748.2 1163.3L2743.0 1152.4L2743.0 1150.9L2740.6 1145.2L2739.2 1139.5L2735.3 1131.8L2732.9 1123.7L2730.6 1118.0L2730.6 1116.6L2725.8 1106.6L2724.8 1102.3L2721.5 1093.7L2721.5 1092.3L2717.2 1083.7L2714.8 1075.6L2710.5 1067.0L2705.8 1051.2L2701.9 1044.1L2697.2 1028.3L2692.9 1019.8L2691.4 1014.0L2686.2 1003.1L2681.9 988.7L2677.6 980.2L2672.8 964.4L2669.0 957.3L2666.6 949.2L2662.8 941.5L2658.1 926.3L2653.8 917.7L2651.9 910.5L2647.6 901.9L2639.9 877.6L2633.3 865.2L2622.3 853.8L2616.6 849.9L2608.0 846.6L2603.7 843.3L2593.2 840.4L2583.6 840.4L2583.2 839.9L2501.6 839.9L2501.1 840.4L2491.1 840.4L2484.4 842.3L2480.1 846.1L2474.9 848.0L2467.7 851.9L2453.9 865.7L2446.3 880.0L2446.3 880.9L2444.4 884.3L2443.4 889.1L2423.9 928.2L2421.5 936.3L2400.0 978.7L2397.6 986.8L2380.9 1019.8L2374.7 1036.0L2367.1 1051.2L2366.1 1052.2L2365.7 1054.1L2363.8 1057.0L2363.3 1058.9L2358.0 1069.4L2357.1 1070.3L2355.6 1074.1L2354.2 1076.0L2354.2 1077.0L2351.8 1081.3L2349.0 1090.3L2328.0 1131.8L2325.6 1140.0L2304.1 1182.4L2301.7 1190.5L2295.1 1204.4L2293.6 1206.3L2292.7 1209.1L2290.8 1212.0L2290.3 1213.9L2287.4 1218.7L2287.0 1220.6L2284.6 1224.4L2279.3 1238.7L2261.7 1273.5L2259.3 1281.6L2235.4 1328.8L2232.6 1331.7L2229.7 1333.1L2223.5 1332.7L2219.7 1329.3L2218.3 1326.9L2217.8 1324.1L2215.4 1318.4L2209.7 1307.4L2208.2 1301.7L2204.0 1293.1L2201.6 1285.0L2194.4 1270.7L2193.0 1264.9L2188.7 1256.3L2187.3 1250.6L2183.0 1242.0L2180.6 1233.9L2173.4 1219.6L2172.0 1213.9L2167.7 1205.3L2166.8 1201.0L2164.8 1196.2L2161.5 1190.0L2159.1 1181.9L2152.9 1170.0L2151.0 1162.9L2146.7 1154.3L2145.3 1148.5L2140.5 1139.0L2138.1 1130.9L2131.9 1119.0L2130.5 1113.2L2126.2 1104.7L2123.8 1096.6L2119.5 1088.0L2117.1 1079.9L2113.8 1073.7L2111.9 1066.5L2105.2 1053.6L2102.8 1045.5L2098.5 1036.9L2097.1 1031.2L2092.8 1022.6L2090.4 1014.5L2084.2 1002.6L2081.8 994.5L2077.1 984.9L2075.6 979.2L2071.8 971.6L2070.4 965.9L2066.1 957.3L2063.2 948.2L2059.9 942.0L2058.0 934.8L2053.7 926.3L2052.3 920.5L2047.5 911.0L2042.7 895.3L2038.4 886.7L2037.0 880.9L2031.3 869.5L2023.2 857.6L2019.8 854.7L2015.5 852.3L2001.2 846.1L1997.4 842.8L1992.6 840.9L1990.3 840.9L1989.8 840.4L1976.0 840.4L1975.5 839.9L1861.5 839.9L1861.0 840.4L1846.7 840.4L1838.6 842.3L1829.5 846.1L1824.7 849.5L1818.5 855.7L1815.7 859.5L1812.3 866.6L1811.9 875.2L1811.4 875.7Z%22/%3E%3Cpath fill=%22%23F6452E%22 fill-rule=%22evenodd%22 d=%22M2534.0 1105.6L2252.1 1764.4L2269.3 1764.4L2269.8 1763.9L2346.6 1763.9L2347.1 1763.4L2696.2 1763.4L2696.7 1763.9L2785.4 1764.4Z%22/%3E%3Cpath fill=%22%232b5797%22 d=%22M2049.0 859.9L2433.1 859.9L2229.5 1295.4Z%22/%3E%3Cpath fill=%22%232e8b7a%22 d=%22M2653.8 859.9L3016.9 859.9L2819.9 1294.7Z%22/%3E%3C/svg%3E%3C/svg%3E"); }
/* 0 · Moorish star */
:root, .bk-0 { --back: #1b2a5e; --back-img: url(/backs/0.svg); }
/* 1 · Claret quatrefoil */
:root[data-back="1"], .bk-1 { --back: #7a1c2c; --back-img: url(/backs/1.svg); }
/* 2 · Green rosette */
:root[data-back="2"], .bk-2 { --back: #1d4b38; --back-img: url(/backs/2.svg); }
/* 3 · Mardi Gras */
:root[data-back="3"], .bk-3 { --back: #3d1a5c; --back-img: url(/backs/3.svg); }
/* 4 · Greek key */
:root[data-back="4"], .bk-4 { --back: #1c1a1a; --back-img: url(/backs/4.svg); }
/* 5 · Teal arabesque */
:root[data-back="5"], .bk-5 { --back: #0f5a5f; --back-img: url(/backs/5.svg); }
/* 6 · Plum trellis */
:root[data-back="6"], .bk-6 { --back: #47224f; --back-img: url(/backs/6.svg); }
/* 7 · Crescent City */
:root[data-back="7"], .bk-7 { --back: #14254a; --back-img: url(/backs/7.svg); }
/* 8 · Oxblood sunburst */
:root[data-back="8"], .bk-8 { --back: #5a1530; --back-img: url(/backs/8.svg); }
/* 9 · Royal scales */
:root[data-back="9"], .bk-9 { --back: #1f3d8a; --back-img: url(/backs/9.svg); }
/* 10 · Emerald honeycomb */
:root[data-back="10"], .bk-10 { --back: #0e5a3a; --back-img: url(/backs/10.svg); }
/* 11 · Iron lace */
:root[data-back="11"], .bk-11 { --back: #141414; --back-img: url(/backs/11.svg); }
/* 12 · Midnight copper */
:root[data-back="12"], .bk-12 { --back: #151d33; --back-img: url(/backs/12.svg); }
/* 13 · Parlour red */
:root[data-back="13"], .bk-13 { --back: #f3ead6; --back-img: url(/backs/13.svg); }
/* 14 · Parlour blue */
:root[data-back="14"], .bk-14 { --back: #f2ecdc; --back-img: url(/backs/14.svg); }
/* 15 · Magnolia */
:root[data-back="15"], .bk-15 { --back: #1f4030; --back-img: url(/backs/15.svg); }
/* 16 · Indigo argyle */
:root[data-back="16"], .bk-16 { --back: #2a2350; --back-img: url(/backs/16.svg); }
/* 17 · Deco gold */
:root[data-back="17"], .bk-17 { --back: #121212; --back-img: url(/backs/17.svg); }
/* 18 · Terracotta weave */
:root[data-back="18"], .bk-18 { --back: #8a3b24; --back-img: url(/backs/18.svg); }
/* 19 · Second line */
:root[data-back="19"], .bk-19 { --back: #7a1424; --back-img: url(/backs/19.svg); }
/* 20 · Slate & mint */
:root[data-back="20"], .bk-20 { --back: #263238; --back-img: url(/backs/20.svg); }
/* 21 · Coral reef */
:root[data-back="21"], .bk-21 { --back: #0b4f5c; --back-img: url(/backs/21.svg); }
/* 22 · Olive garden */
:root[data-back="22"], .bk-22 { --back: #3f4a1f; --back-img: url(/backs/22.svg); }
/* 23 · King cake */
:root[data-back="23"], .bk-23 { --back: #2a1a3d; --back-img: url(/backs/23.svg); }
/* 24 · Sapphire night */
:root[data-back="24"], .bk-24 { --back: #12306b; --back-img: url(/backs/24.svg); }
/* 25 · Crimson check */
:root[data-back="25"], .bk-25 { --back: #8b1020; --back-img: url(/backs/25.svg); }
/* 26 · Gunmetal suits */
:root[data-back="26"], .bk-26 { --back: #2b2d33; --back-img: url(/backs/26.svg); }
/* 27 · Gaslight */
:root[data-back="27"], .bk-27 { --back: #1e3a33; --back-img: url(/backs/27.svg); }
/* 28 · Lilac waves */
:root[data-back="28"], .bk-28 { --back: #3a1f4a; --back-img: url(/backs/28.svg); }
/* 29 · Ochre stipple */
:root[data-back="29"], .bk-29 { --back: #6b4a12; --back-img: url(/backs/29.svg); }
/* 30 · Hunter pinstripe */
:root[data-back="30"], .bk-30 { --back: #17402c; --back-img: url(/backs/30.svg); }
/* 31 · Fat Tuesday confetti */
:root[data-back="31"], .bk-31 { --back: #121a33; --back-img: url(/backs/31.svg); }
/* 32 · Lowza */
:root[data-back="32"], .bk-32 { --back: #161616; --back-img: var(--lowza-img); }
/* BACKS:END */
.card.slot.waiting { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--paper) 16%, transparent); background: color-mix(in srgb, var(--felt-0) 35%, transparent); }
.card.tap { cursor: pointer; }
.card.target { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 80%, transparent), 0 4px 10px rgba(0, 0, 0, 0.28); }
.card.tap:active { transform: scale(0.95); }
.card.sel { transform: translateY(-6px); box-shadow: 0 0 0 3px var(--accent), 0 12px 22px rgba(0, 0, 0, 0.45); }
.card.drop-over { transform: scale(1.07); box-shadow: 0 0 0 3px var(--accent), 0 0 22px color-mix(in srgb, var(--accent) 55%, transparent); }
.card.lifting { opacity: 0.25; }
/* Your next move on the deck, the card you drew, or the discard: a slow light travels around its edge.
   Only these piles move; your grid and the opponents stay still. Nothing blinks. */
@property --shine { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes shine { to { --shine: 360deg; } }
.pile .card.can::after, .toss-tag.can::after {
  content: ''; position: absolute; inset: -6px; border-radius: calc(var(--w) * 0.12 + 6px); padding: 3.5px; pointer-events: none; z-index: 5;
  background: conic-gradient(from var(--shine), rgba(245, 189, 79, 0.2) 0deg 180deg, rgba(255, 190, 40, 0.55) 250deg, #ffc93c 310deg, #fffbe6 350deg, rgba(255, 201, 60, 0.6) 357deg, rgba(245, 189, 79, 0.2) 360deg);
  filter: drop-shadow(0 0 4px rgba(255, 196, 50, 0.85));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: shine 3s linear infinite; animation-delay: var(--shine-delay, 0ms);
}
.toss-tag.can::after { inset: -5px; border-radius: 999px; padding: 3px; }
.pile .card.locked.can::after, .pile .card.toss-ready.can::after { display: none; } /* the blurred discard's light goes on its Toss tag instead */
@media (prefers-reduced-motion: reduce) { .pile .card.can::after, .toss-tag.can::after { animation: none !important; } }

.card.pop { animation: pop 300ms var(--ease-out); }
@keyframes pop { 0% { transform: scale(0.8) rotateY(70deg); } 100% { transform: none; } }
.card.clearing { animation: glow 330ms ease-out forwards; z-index: 2; }
@keyframes glow { 0% { box-shadow: 0 0 0 0 var(--accent); } 100% { transform: scale(1.06); box-shadow: 0 0 0 3px var(--accent), 0 0 24px var(--accent); } }
.card.in-flight { visibility: hidden; }
.card.flip-in { animation: flipin 170ms ease-out both; }
@keyframes flipin { 0% { transform: perspective(500px) rotateY(-90deg) scale(1.04); } 100% { transform: none; } }
.flight { position: fixed; left: 0; top: 0; z-index: calc(var(--z-sheet) - 1); /* 1.124: under an open sheet, over the table */ pointer-events: none; transform-origin: 0 0; will-change: transform; }
.flight .card { box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45); }
.flip3d { position: relative; transform-style: preserve-3d; }
.flip3d > .card { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip3d > .flip-face { transform: rotateY(180deg); }
.draggable { touch-action: none; }
.hx { position: absolute; inset: 0; z-index: 4; border-radius: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hx input { visibility: hidden; position: absolute; width: 1px; height: 1px; margin: 0; }
.pile { position: relative; }
.tray button { position: relative; }
.drag-ghost { position: fixed; left: 0; top: 0; transform-origin: 0 0; z-index: var(--z-ghost); pointer-events: none; will-change: transform; }
.drag-ghost .card { box-shadow: 0 18px 34px rgba(0, 0, 0, 0.5); }

/* ------------------------------------------------------------ game layout */
.game { height: 100%; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; padding-block: 6px 8px; position: relative; }
/* #app is border-box, so its safe-area padding comes out of the 100dvh and the dock always stays on screen. */
/* Set by JS (not :has(), which iOS Safari sometimes fails to re-check when the screen swaps,
   leaving the table short until you pull the page down). */
#app.in-game { height: 100dvh; overflow: hidden; }
.bar { display: flex; align-items: center; gap: 10px; flex: none; } /* 1.189: spacing polish */
.bar .info { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; line-height: 1.25; gap: 2px; }
.bar .info .code { font-family: var(--font-display); letter-spacing: 0.14em; font-size: 15px; }
.bar .info .sub { font-size: 13px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.conn { font-size: 13px; font-weight: 700; color: var(--accent); text-align: center; }

.opps-wrap { position: relative; flex: none; }
.opps-wrap.has-say { z-index: calc(var(--z-tray) + 1); }
.opps { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px; scroll-snap-type: x proximity; }
.opps::-webkit-scrollbar { display: none; }
.opp {
  flex: 1 0 auto; min-width: 118px; max-width: 180px; padding: 8px 10px 9px; border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1.5px solid var(--line); text-align: left;
  display: flex; flex-direction: column; gap: 6px; position: relative; scroll-snap-align: start;
  transition: border-color 200ms, box-shadow 200ms;
}
.opp.turn { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.opp-head { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; min-height: 20px; }
.opp-head .nm { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.opp-head .sc { font-variant-numeric: tabular-nums; font-weight: 800; }
.opp-foot { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; min-height: 18px; }
.chip { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }
.chip.out { background: var(--paper); color: var(--felt); }
.mini { gap: 3px !important; }
.mini .card { --w: 23px; border-width: 1.5px; border-radius: 4px; box-shadow: none; }
.mini .card::after { display: none; }
.mini .card .num { font-size: 12px; }
.mini .card .corner { display: none; }
.mini .card.face::before { inset: 0; border-radius: 3px; box-shadow: none; }
.mini .card.face.t-neg { background: var(--paper); } /* 1.106: the best-card star is too small to read here */
.opp-sub { display: none; font-size: 12px; color: var(--muted); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.opp-head .bot { flex: none; }
.opp-head .sc { margin-left: auto; }
/* 3+ opponents: everyone fits on screen in a grid, no sideways scrolling */
.opps.compact { display: grid; grid-template-columns: repeat(var(--oc), minmax(0, 1fr)); gap: 6px; overflow: visible; padding: 0; }
.opps.compact .opp { min-width: 0; max-width: none; padding: 6px; gap: 4px; border-radius: 12px; container-type: inline-size; }
.opps.compact .opp-head { font-size: 13px; gap: 4px; }
.opps.compact .opp-head .dot { width: 8px; height: 8px; }
.opps.compact .bot .i { width: 12px; height: 12px; }
.opps.compact .opp-head .dot { margin-right: 1px; }
.opps.compact .mini { gap: 2px !important; }
.opps.compact .mini .card { --w: min(calc((100cqw - 6px) / 4), 3.2dvh); border-radius: 3px; border-width: 1px; } /* 1.84: never taller than a sliver of the screen, so your own cards stay the biggest */
.opps.compact .mini .card .num { font-size: clamp(9px, 11cqw, 12px); }
.opps.compact .opp-foot { font-size: 11px; min-height: 0; }
.opps.compact .chip { font-size: 10px; padding: 1px 5px; }
.opps.compact.rows2 .opp-foot { display: none; }
.opps.compact.rows2 .opp.turn .opp-head .nm { color: var(--accent); }
.bubble { position: absolute; top: -8px; right: -4px; font-size: 26px; animation: float 2.4s ease-out forwards; pointer-events: none; }
@keyframes float { 0% { transform: translateY(8px) scale(0.85); opacity: 0; } 15% { transform: none; opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-18px); opacity: 0; } }

.mat {
  flex: none; display: flex; align-items: flex-end; justify-content: center; gap: clamp(60px, 18vw, 108px);
  padding: 10px clamp(20px, 6vw, 36px); border-radius: 22px;
  background: radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--felt-hi) 70%, transparent), transparent 70%);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--line) 60%, transparent);
}
.pile { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 0; }
.pile .lbl { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pile .card { --w: min(17vw, 9.2dvh, 80px); }
.pile.held .card.face { animation: pop 260ms var(--ease-out); }

/* 1.229: Deck 3D layered edge thickness & wrap */
.pile.deck .deck-wrap { position: relative; display: inline-block; }
.pile.deck .card.deck-stack {
  box-shadow:
    1px 1px 0 rgba(235, 230, 218, 0.95),
    2px 2px 0 rgba(22, 26, 35, 0.95),
    3px 3px 0 rgba(235, 230, 218, 0.88),
    4px 4px 0 rgba(22, 26, 35, 0.88),
    5px 5px 0 rgba(235, 230, 218, 0.78),
    0 10px 22px rgba(0, 0, 0, 0.48);
}

/* 1.229: Organic physical discard pile stack */
.discard-stack { position: relative; display: inline-block; }
.discard-under-layer {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  transform: rotate(var(--rot, 0deg)) translate(var(--ox, 0px), var(--oy, 0px));
  z-index: 1;
}
.discard-under { opacity: 0.96; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
.pile.discard .card:not(.discard-under) { position: relative; z-index: 2; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); }

/* 1.229: Drawn card resting organically tilted over the deck */
.held-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; }
.card.held-drawn {
  position: absolute; top: 0; left: 0;
  transform: rotate(6.5deg) translate(6px, -4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.52), 0 0 0 2px var(--accent);
  animation: flipDrawOver 280ms cubic-bezier(0.16, 1, 0.3, 1);
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.held-overlay:hover .card.held-drawn,
.card.held-drawn.lifting {
  transform: rotate(4deg) translate(4px, -8px) scale(1.05);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.58), 0 0 0 2.5px var(--accent);
}
@keyframes flipDrawOver {
  0% { transform: rotate(0deg) scale(0.95); opacity: 0.6; }
  100% { transform: rotate(6.5deg) translate(6px, -4px) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .card.held-drawn { animation: none !important; }
}

.status {
  flex: none; min-height: 44px; padding: 8px 14px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
  font-weight: 700; font-size: 15px; line-height: 1.25; text-wrap: balance;
}
.status.mine { background: var(--accent); color: var(--accent-ink); }
.status.wait { color: var(--muted); }
.status .i { width: 18px; height: 18px; }

.me { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; container-type: size; }
.me-inner { display: flex; flex-direction: column; gap: 6px; position: relative; }
.me-inner > .bubble { top: -14px; right: 0; }
.me-head { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.me-head b { color: var(--paper); }
.grid { display: grid; grid-template-columns: repeat(var(--cols, 4), auto); gap: var(--gap); justify-content: center; }
.me .grid .card { --w: min(calc((100cqw - 3 * var(--gap)) / 4), calc((100cqh - 28px - 2 * var(--gap)) / 3 * 0.714), 112px); }

.dock { display: flex; align-items: center; justify-content: center; gap: 8px; flex: none; position: relative; }
.dock .btn { min-height: var(--tap); padding: 0 14px; font-size: 15px; gap: 6px; }
/* 1.177: a matched game's dock says "🎲 Someone new" instead of Rematch; the words stay on one line at 390 px wide next to Scores, React and Chat. */
.dock .btn[data-action="match"] { padding: 0 9px; white-space: nowrap; }
.tray {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: var(--z-tray);
  display: grid; grid-template-columns: repeat(7, var(--tap)); gap: 6px; padding: 8px; max-width: calc(100vw - 16px);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 18px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  animation: rise 160ms var(--ease-out); transform-origin: bottom center;
}
.tray button { width: var(--tap); height: var(--tap); border: 0; background: none; font-size: 26px; border-radius: 12px; }
.tray button:active { background: var(--surface-2); transform: scale(1.15); }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 8px); } }
.rotate { display: none; }
.chat-btn { position: relative; }
.badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--bad); color: var(--card-ink); font-size: 12px; font-weight: 800; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.say {
  position: absolute; left: 6px; right: 6px; top: 28px; z-index: 3; pointer-events: none;
  background: var(--paper); color: var(--felt); font-size: 13px; font-weight: 700; line-height: 1.25;
  padding: 6px 9px; border-radius: 12px 12px 12px 4px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  animation: rise-t 180ms var(--ease-out);
}
.opps-wrap.has-say .say { z-index: calc(var(--z-tray) + 2); }
.sheet.chat-sheet, .sheet:has(.chat-list) { height: min(78dvh, calc(var(--vv-h, 100dvh) - 24px)); max-height: none; }
.chat-list { list-style: none; margin: 0; padding: 0 2px; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; overscroll-behavior: contain; }
.chat-list .empty { color: var(--muted); text-align: center; margin: auto 0; }
.msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 82%; }
.msg.mine { align-self: flex-end; align-items: flex-end; }
.msg .who { font-size: 12px; font-weight: 800; color: var(--muted); margin: 6px 0 2px 10px; }
.msg .when { font-weight: 600; opacity: 0.8; }
.msg .text { background: var(--surface-2); border: 1.5px solid var(--line); padding: 8px 12px; border-radius: 16px 16px 16px 6px; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; }
.msg.mine .text { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); border-radius: 16px 16px 6px 16px; }
.chat-form { display: flex; gap: 8px; flex: none; }
.chat-form .input { flex: 1; min-width: 0; font-size: 16px; }
.quick { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: none; padding-bottom: 2px; }
.quick::-webkit-scrollbar { display: none; }
.pill-btn { flex: none; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line); background: transparent; font-weight: 700; font-size: 14px; white-space: nowrap; transition: transform 120ms var(--ease-out), background-color 150ms; }
.pill-btn:active { transform: scale(0.97); background: var(--surface-2); }
.beer { position: fixed; z-index: calc(var(--z-sheet) - 1); /* 1.124: confetti stays under sheets */ pointer-events: none; line-height: 1; will-change: transform, opacity; }

/* ------------------------------------------------------------ sheets */
.scrim { position: fixed; left: 0; right: 0; top: var(--vv-top, 0px); height: var(--vv-h, 100%); z-index: var(--z-sheet); display: flex; align-items: flex-end; justify-content: center; }
/* 1.189: the backdrop is its own layer so it can fade without fading the sheet (swipe-to-close, exit). */
.scrim-bg { position: absolute; inset: 0; background: var(--scrim); pointer-events: none; animation: fade 160ms; }
.scrim.side > .scrim-bg { display: none; }
.scrim.leaving, .scrim.leaving * { pointer-events: none; animation: none !important; }
@keyframes fade { from { opacity: 0; } }
.sheet {
  width: 100%; max-width: 520px; max-height: 88dvh; overflow-y: auto;
  background: var(--surface); border: 1.5px solid var(--line); border-bottom: 0;
  border-radius: 24px 24px 0 0; padding: 18px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 14px; animation: sheet-up 260ms cubic-bezier(0.32, 0.72, 0, 1); position: relative; overscroll-behavior: contain;
}
@keyframes sheet-up { from { transform: translateY(100%); } }
.sheet.dragging { will-change: transform; }
.scrim:not(.side) .sheet-head { touch-action: none; }
@media (prefers-reduced-motion: reduce) { .scrim:not(.side) .sheet { animation: fade 150ms; } }
/* v81: on wide screens (min-width 1000px and min-height 560px, decided in JS by dockOn) chat, scores, coins and the move log
   dock to the right of the table instead of covering it. The table stays playable and shifts over to make room. */
:root { --dock-w: 380px; }
html.docked #app { padding-right: calc(var(--dock-w) + 20px); }
.scrim.side { left: auto; width: var(--dock-w); background: none; pointer-events: none; align-items: stretch; animation: none; }
.scrim.side .sheet {
  pointer-events: auto; max-width: none; max-height: none; height: 100%; border-radius: 0;
  border: 0; border-left: 1.5px solid var(--line); padding-bottom: 20px; animation: dock-in 220ms var(--ease-out);
}
@keyframes dock-in { from { transform: translateX(32px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .scrim.side .sheet { animation: none; } }
.sheet > * { flex-shrink: 0; } /* scroll the sheet, never squash its tables */
.sheet > .chat-list { flex: 1 1 auto; min-height: 0; }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sheet h2 { margin: 0; font: 26px/1.1 var(--font-display); text-wrap: balance; padding-top: 6px; }
.sheet h3 { margin: 6px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.sheet p, .sheet li { margin: 0; color: var(--paper); font-size: 15px; line-height: 1.5; }
.sheet ol, .sheet ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.sheet .grid .card { --w: min(calc((100vw - 60px - 3 * var(--gap)) / 4), 80px); }
.scores { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.scores th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); text-align: right; padding: 6px 4px; font-weight: 800; }
.scores th:first-child, .scores td:first-child { text-align: left; }
.scores td { padding: 10px 4px; border-top: 1px solid var(--line); text-align: right; font-weight: 700; }
.scores tr.rwin td { color: var(--accent); }
.scores tr.rwin td:first-child .pl::before { content: '★ '; }
.scores .rw { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; font-size: 12px; color: var(--accent); font-weight: 800; vertical-align: 1px; }
.announce { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 4px; }
.announce > .i { width: 48px; height: 48px; color: var(--accent); animation: crown 520ms var(--ease-out) both; }
@keyframes crown { 0% { transform: translateY(-18px) scale(0.85) rotate(-20deg); opacity: 0; } 60% { transform: translateY(2px) scale(1.15) rotate(6deg); opacity: 1; } 100% { transform: none; } }
.announce .eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.announce h2 { font: 30px/1.1 var(--font-display); margin: 2px 0 0; text-wrap: balance; color: var(--paper); }
.announce.game h2 { font-size: 34px; color: var(--accent); }
.announce p { color: var(--muted); font-size: 15px; text-wrap: balance; }
.rounds-wrap { overflow-x: auto; margin: 0 -4px; }
.rounds { border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 100%; }
.rounds th, .rounds td { padding: 8px 6px; text-align: right; font-size: 14px; white-space: nowrap; }
.rounds th { font-size: 12px; color: var(--muted); font-weight: 800; letter-spacing: 0.06em; }
.rounds th:first-child, .rounds td:first-child { text-align: left; position: sticky; left: 0; background: var(--surface); font-weight: 700; }
.rounds td { border-top: 1px solid var(--line); }
.rounds td.rwin { color: var(--accent); font-weight: 800; }
.rounds td.tot { font-weight: 800; }
.rounds sup { font-size: 10px; color: var(--bad); margin-left: 1px; }
.x2 { font-size: 12px; background: var(--bad); color: var(--card-ink); border-radius: 6px; padding: 1px 6px; margin-left: 6px; font-weight: 800; }
.log { list-style: none; padding: 0 !important; gap: 0 !important; }
.log li { font-size: 15px; color: var(--muted); padding: 10px 0; border-top: 1px solid var(--line); }
.log li:first-child { color: var(--paper); border-top: 0; }
.legend { display: flex; gap: 8px; flex-wrap: wrap; }
.legend .card { --w: 40px; }
.winner { text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; color: var(--accent); }
.winner .i { width: 44px; height: 44px; }
.winner h2 { color: var(--paper); }

#toast {
  position: fixed; left: 50%; top: calc(64px + env(safe-area-inset-top, 0px)); transform: translateX(-50%);
  background: var(--paper); color: var(--felt); font-weight: 700; font-size: 15px; padding: 11px 18px; border-radius: 22px;
  z-index: var(--z-toast); width: max-content; max-width: calc(100vw - 32px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); text-align: center;
  text-wrap: balance; animation: rise-t 180ms var(--ease-out); transform-origin: top center;
}
#toast.leaving { opacity: 0; transform: translate(-50%, -8px); transition: opacity 160ms ease-in, transform 160ms ease-in; }
#toast .toast-undo {
  margin-left: 10px;
  background: var(--felt);
  color: var(--paper);
  border: 0;
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  vertical-align: middle;
}
#toast .toast-undo:active { opacity: 0.8; }
/* Deal recap: a small list, left-aligned, one line each (it was one long sentence that ballooned into a circle). */
#toast[hidden] { display: none !important; } /* v63: .lines sets display:flex, which beat the hidden attribute, so the deal note never went away */
#toast.lines { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 12px 16px; border-radius: 18px; font-size: 15px; }
#toast.lines .tl { display: flex; gap: 10px; align-items: baseline; }
#toast.lines .ic { flex: none; width: 1.3em; text-align: center; }
@keyframes rise-t { from { opacity: 0; transform: translate(-50%, -8px); } }

@media (max-height: 760px) {
  .opps.compact.rows2 .mini { display: none; }
  .opps.compact.rows2 .opp-sub { display: block; }
}
@media (max-height: 700px) {
  .opp-foot { display: none; }
  .game { gap: 6px; }
  .mat { padding-block: 6px; }
}
@media (max-height: 600px) {
  .opp .mini { display: none; }
  .opp { min-width: 0; flex: 0 0 auto; }
}
/* Phone on its side: opponents on the left, your cards in the middle, piles and buttons on the right. */
@media (orientation: landscape) and (max-height: 500px) {
  .game {
    --mew: min(calc((100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 50px) * 0.96 + 24px), 40vw);
    max-width: none; display: grid; column-gap: 14px; row-gap: 6px; padding-block: 6px;
    grid-template-columns: minmax(140px, 1fr) var(--mew) minmax(176px, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "bar me mat" "conn me mat" "opps me mat" "opps me status" "opps me dock";
  }
  .bar { grid-area: bar; }
  .conn { grid-area: conn; }
  .opps-wrap { grid-area: opps; min-height: 0; container-type: inline-size; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
  .opps-wrap::-webkit-scrollbar { display: none; }
  .mat { grid-area: mat; align-self: center; gap: 10px; padding: 8px; }
  .status { grid-area: status; min-height: 0; padding: 7px 10px; font-size: 14px; }
  .me { grid-area: me; min-height: 0; }
  .dock { grid-area: dock; }
  .dock .btn { padding: 0 12px; }
  .pile .card { --w: clamp(40px, min(15dvh, 6.4vw), 66px); }
  .bar .info .sub { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .bar .icon-btn { width: 40px; height: 40px; }
  .bar .info .code { font-size: 13px; letter-spacing: 0.08em; }
  .pile .lbl { font-size: 11px; }
  /* opponents stack in a column (two side by side when there are lots) */
  .opps, .opps.compact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; overflow: visible; padding: 0; }
  .opps.compact { grid-template-columns: repeat(min(var(--oc), 2), minmax(0, 1fr)); }
  .opp, .opps.compact .opp { min-width: 0; max-width: none; padding: 6px; container-type: inline-size; }
  .opp .mini { display: grid; }
  /* 5+ opponents: names and scores only, so the whole table fits without scrolling */
  .opps.compact.rows2 .mini { display: none; }
  .opps.compact.rows2 .opp-sub { display: block; }
  .opp .mini .card { --w: min(calc((100cqw - 9px) / 4), 26px); }
  .opp-foot { display: none; }
  @container (max-width: 230px) { .opps.compact .opp-head .bot, .opps.compact .opp-head .dot { display: none; } }
  #toast { top: calc(10px + env(safe-area-inset-top, 0px)); }
}
/* 1.84: computers with a short screen (a laptop) use the same side-by-side table as a phone on its side. With the chat panel
   docked beside it that only fits on wider screens, so narrower ones keep the stacked table. */
/* 1.127 (#44): also the iPhone Duo unfolded and sideways (700 to 999 px wide, at least a little wider than tall: the 21/20
   margin keeps a near-square screen from flipping layouts when Safari's toolbar shows or hides). */
@media (orientation: landscape) and (min-width: 1000px) and (max-height: 999px), (min-width: 700px) and (min-aspect-ratio: 21/20) and (max-height: 999px) {
  html:not(.docked) .game {
    --mew: min(calc((100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 50px) * 0.96 + 24px), 40vw);
    max-width: none; display: grid; column-gap: 14px; row-gap: 6px; padding-block: 6px;
    grid-template-columns: minmax(140px, 1fr) var(--mew) minmax(176px, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "bar me mat" "conn me mat" "opps me mat" "opps me status" "opps me dock";
  }
  html:not(.docked) .bar { grid-area: bar; }
  html:not(.docked) .conn { grid-area: conn; }
  html:not(.docked) .opps-wrap { grid-area: opps; min-height: 0; container-type: inline-size; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
  html:not(.docked) .opps-wrap::-webkit-scrollbar { display: none; }
  html:not(.docked) .mat { grid-area: mat; align-self: center; gap: 10px; padding: 8px; }
  html:not(.docked) .status { grid-area: status; min-height: 0; padding: 7px 10px; font-size: 14px; }
  html:not(.docked) .me { grid-area: me; min-height: 0; }
  html:not(.docked) .dock { grid-area: dock; }
  html:not(.docked) .dock .btn { padding: 0 12px; }
  html:not(.docked) .pile .card { --w: clamp(40px, min(15dvh, 6.4vw), 66px); }
  html:not(.docked) .bar .info .sub { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  html:not(.docked) .bar .icon-btn { width: 40px; height: 40px; }
  html:not(.docked) .bar .info .code { font-size: 13px; letter-spacing: 0.08em; }
  html:not(.docked) .pile .lbl { font-size: 11px; }
  /* opponents stack in a column (two side by side when there are lots) */
  html:not(.docked) .opps, html:not(.docked) .opps.compact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; overflow: visible; padding: 0; }
  html:not(.docked) .opps.compact { grid-template-columns: repeat(min(var(--oc), 2), minmax(0, 1fr)); }
  html:not(.docked) .opp, html:not(.docked) .opps.compact .opp { min-width: 0; max-width: none; padding: 6px; container-type: inline-size; }
  html:not(.docked) .opp .mini { display: grid; }
  /* 5+ opponents: names and scores only, so the whole table fits without scrolling */
  html:not(.docked) .opps.compact.rows2 .mini { display: none; }
  html:not(.docked) .opps.compact.rows2 .opp-sub { display: block; }
  html:not(.docked) .opp .mini .card { --w: min(calc((100cqw - 9px) / 4), 26px); }
  html:not(.docked) .opp-foot { display: none; }
  @container (max-width: 230px) { html:not(.docked) .opps.compact .opp-head .bot, html:not(.docked) .opps.compact .opp-head .dot { display: none; } }
  html:not(.docked) #toast { top: calc(10px + env(safe-area-inset-top, 0px)); }
}
@media (orientation: landscape) and (min-width: 1300px) and (max-height: 999px) {
  html.docked .game {
    --mew: min(calc((100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 50px) * 0.96 + 24px), 40vw);
    max-width: none; display: grid; column-gap: 14px; row-gap: 6px; padding-block: 6px;
    grid-template-columns: minmax(140px, 1fr) var(--mew) minmax(176px, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "bar me mat" "conn me mat" "opps me mat" "opps me status" "opps me dock";
  }
  html.docked .bar { grid-area: bar; }
  html.docked .conn { grid-area: conn; }
  html.docked .opps-wrap { grid-area: opps; min-height: 0; container-type: inline-size; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
  html.docked .opps-wrap::-webkit-scrollbar { display: none; }
  html.docked .mat { grid-area: mat; align-self: center; gap: 10px; padding: 8px; }
  html.docked .status { grid-area: status; min-height: 0; padding: 7px 10px; font-size: 14px; }
  html.docked .me { grid-area: me; min-height: 0; }
  html.docked .dock { grid-area: dock; }
  html.docked .dock .btn { padding: 0 12px; }
  html.docked .pile .card { --w: clamp(40px, min(15dvh, 6.4vw), 66px); }
  html.docked .bar .info .sub { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  html.docked .bar .icon-btn { width: 40px; height: 40px; }
  html.docked .bar .info .code { font-size: 13px; letter-spacing: 0.08em; }
  html.docked .pile .lbl { font-size: 11px; }
  /* opponents stack in a column (two side by side when there are lots) */
  html.docked .opps, html.docked .opps.compact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; overflow: visible; padding: 0; }
  html.docked .opps.compact { grid-template-columns: repeat(min(var(--oc), 2), minmax(0, 1fr)); }
  html.docked .opp, html.docked .opps.compact .opp { min-width: 0; max-width: none; padding: 6px; container-type: inline-size; }
  html.docked .opp .mini { display: grid; }
  /* 5+ opponents: names and scores only, so the whole table fits without scrolling */
  html.docked .opps.compact.rows2 .mini { display: none; }
  html.docked .opps.compact.rows2 .opp-sub { display: block; }
  html.docked .opp .mini .card { --w: min(calc((100cqw - 9px) / 4), 26px); }
  html.docked .opp-foot { display: none; }
  @container (max-width: 230px) { html.docked .opps.compact .opp-head .bot, html.docked .opps.compact .opp-head .dot { display: none; } }
  html.docked #toast { top: calc(10px + env(safe-area-inset-top, 0px)); }
  html.docked .game { --mew: min(calc((100dvh - 50px) * 0.96 + 24px), calc(100vw - var(--dock-w) - 560px)); grid-template-columns: minmax(140px, 1fr) var(--mew) minmax(260px, 1fr); }
}

/* 1.84: Bigger cards (a switch in the game menu): your grid gets the room. Piles, opponents and the status bar give up a little. */
html.big-cards .me .grid .card { --w: min(calc((100cqw - 3 * var(--gap)) / 4), calc((100cqh - 26px - 2 * var(--gap)) / 3 * 0.714), 140px); }
html.big-cards .me-head { font-size: 16px; }
html.big-cards .pile .card { --w: min(14vw, 7.4dvh, 68px); }
html.big-cards .mat { padding-block: 6px; gap: clamp(36px, 12vw, 72px); }
html.big-cards .pile .lbl { font-size: 11px; }
html.big-cards .status { min-height: 38px; padding-block: 6px; }
html.big-cards .mini .card { --w: 19px; }
html.big-cards .opp { padding-block: 5px 6px; gap: 4px; }
html.big-cards .game { gap: 6px; }
/* 1.84: iPads and computers: the table grows with the screen instead of staying phone-sized. */
@media (min-width: 700px) and (min-height: 900px) and (orientation: portrait), (min-width: 1000px) and (min-height: 1000px) {
  .game { max-width: min(780px, 100%); }
  .me .grid .card { --w: min(calc((100cqw - 3 * var(--gap)) / 4), calc((100cqh - 30px - 2 * var(--gap)) / 3 * 0.714), 156px); }
  html.big-cards .me .grid .card { --w: min(calc((100cqw - 3 * var(--gap)) / 4), calc((100cqh - 30px - 2 * var(--gap)) / 3 * 0.714), 180px); }
  .pile .card { --w: min(15vw, 11dvh, 112px); }
  .mini .card { --w: 30px; }
  .mini .card .num { font-size: 15px; }
  .opps.compact .mini .card { --w: min(calc((100cqw - 6px) / 4), 30px); }
  .opps.compact .mini .card .num { font-size: clamp(9px, 11cqw, 15px); }
  html.big-cards .pile .card { --w: min(13vw, 9dvh, 96px); }
  html.big-cards .mini .card { --w: 26px; }
  html.big-cards .opps.compact .mini .card { --w: min(calc((100cqw - 6px) / 4), 26px); }
  .opp { max-width: 260px; }
  .opp-head { font-size: 16px; }
  .me-head { font-size: 16px; }
  .status { font-size: 17px; min-height: 50px; }
  .bar .info .code { font-size: 18px; }
  .bar .info .sub { font-size: 15px; }
  .dock .btn { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* ---------- voice messages ---------- */
.chat-form .mic { flex: none; width: 48px; padding: 0; position: relative; }
.chat-form .rec { display: none; }
.chat-form.recording .mic, .chat-form.recording .input, .chat-form.recording .send { display: none; }
.chat-form.recording .rec { display: flex; flex: 1; min-width: 0; align-items: center; gap: 10px; padding-left: 2px; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff5a4f; flex: none; animation: recpulse 1.1s ease-in-out infinite; }
@keyframes recpulse { 50% { opacity: 0.35; transform: scale(0.75); } }
.rec-time { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 17px; }
.rec-hint { flex: 1; min-width: 0; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-send { flex: none; width: 48px; padding: 0; position: relative; }
.rec-cancel { flex: none; }
.msg .vmsg { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; min-width: 200px; }
.vplay { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); cursor: pointer; }
.msg.mine .vplay { background: var(--accent-ink); color: var(--accent); }
.vplay:active { transform: scale(0.92); }
.vplay .i { width: 16px; height: 16px; fill: currentColor; stroke-width: 1.5; }
.vmsg.loading .vplay .i { animation: recpulse 0.9s ease-in-out infinite; }
.vwave { flex: 1; display: flex; align-items: center; gap: 2px; height: 24px; }
.vwave b { flex: 1; max-width: 3px; min-width: 2px; border-radius: 2px; background: currentColor; opacity: 0.35; transition: opacity 0.12s; }
.vwave b.on, .vmsg:not(.playing) .vwave b.done { opacity: 1; }
.vdur { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }
.vmsg-dozer, .vmsg-lowza { cursor: pointer; }
.vdozer-title { flex: 1; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
@media (prefers-reduced-motion: reduce) { .rec-dot, .vmsg.loading .vplay .i { animation: none; } }

/* ---------- discard is off-limits once a card has been drawn ---------- */
.pile .card.locked { filter: blur(2.5px) saturate(0.5) brightness(0.8); opacity: 0.6; transition: filter 0.18s, opacity 0.18s; }
.pile .card.locked.target { filter: blur(1px) saturate(0.7); opacity: 0.85; }
.pile .card.toss-ready { filter: blur(2px) saturate(0.65) brightness(0.82); opacity: 0.78; transition: filter 0.18s, opacity 0.18s; }
.pile .card.toss-ready.target, .pile .card.toss-ready:hover { filter: blur(0.8px) saturate(0.85) brightness(0.95); opacity: 0.95; }
.toss-tag { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); z-index: 6; pointer-events: none;
  padding: 4px 12px; border-radius: 999px; background: rgba(26, 28, 34, 0.94); border: 1.5px solid var(--accent); color: var(--accent);
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 10px rgba(245, 189, 79, 0.35);
  transition: transform 0.16s var(--ease-out), box-shadow 0.16s; }
.pile:has(.card.target) .toss-tag, .pile .card.target ~ .toss-tag, .pile.draggable:active .toss-tag { transform: translateX(-50%) scale(1.08); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 16px rgba(245, 189, 79, 0.55); }
@media (prefers-reduced-motion: reduce) { .pile .card.locked, .pile .card.toss-ready { transition: none; } }

/* ---------- accounts, leaderboard, room names ---------- */
.stack { display: flex; flex-direction: column; gap: 12px; }
.hint.ok { color: var(--good); }
.hint.bad { color: var(--bad); }
#su-msg:empty { display: none; }
.acct-row .who-am-i { display: flex; align-items: center; gap: 12px; }
.acct-row .who-am-i > div { display: flex; flex-direction: column; min-width: 0; }
.acct-row .who-am-i b { font-size: 18px; }
.acct-row .who-am-i .hint { font-size: 14px; }
.avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--accent); color: var(--accent-ink); font: 20px/1 var(--font-display); }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stat-row > div { background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 4px; display: flex; flex-direction: column; align-items: center; }
.stat-row.two { grid-template-columns: repeat(2, 1fr); margin-top: 8px; }
.longest { margin: 12px 0 0; text-align: center; color: var(--muted); font-size: 15px; }
.longest b { color: var(--paper); }
.stat-row b { font: 24px/1.1 var(--font-display); }
.stat-row span { font-size: 12px; color: var(--muted); font-weight: 700; }
.sheet .keys { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.keys li { display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 14px; border-radius: 14px; background: var(--surface-2); border: 1.5px solid var(--line); min-height: 56px; }
.keys .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 700; }
.keys .when { font-size: 13px; color: var(--muted); font-weight: 600; }
.rec-code { font-size: 26px; letter-spacing: 0.06em; }
.scores.board td, .scores.board th { padding-inline: 3px; }
.scores.board td:first-child { color: var(--muted); width: 1.6em; }
.scores.board td.nm { text-align: left; max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scores.board th:nth-child(2) { text-align: left; }
.scores.board tr.you-row td { color: var(--accent); }
.room-title { text-align: center; font: 26px/1.15 var(--font-display); overflow-wrap: anywhere; }
.bar .info .code.named { font-family: var(--font-body); font-weight: 800; letter-spacing: 0; font-size: 16px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn .pts { margin-left: auto; color: var(--muted); font-weight: 700; font-size: 14px; }

/* reactions: emoji pop inside the sender's area only */
.react-layer { position: fixed; z-index: var(--z-tray); pointer-events: none; overflow: hidden; border-radius: 16px; }
.react-emoji { position: absolute; line-height: 1; will-change: transform, opacity; }
.dock .btn.icon-only { padding: 0; width: var(--tap); min-width: var(--tap); justify-content: center; }
.h2h { color: var(--accent); font-weight: 800; }
.h2h-line { margin: 0; font-weight: 600; }
.h2h-line b { color: var(--accent); }
.scores.board td.nm .vs { display: block; font-size: 12px; font-weight: 700; color: var(--muted); }
.h2h-list .rec { font: 18px/1 var(--font-display); padding-right: 8px; }
.h2h-list .rec.up { color: var(--good); }
.h2h-list .rec.down { color: var(--bad); }

/* first-game tips */
/* 1.84: what's new list and first-Party notes */
.sheet ul.wn { list-style: none; padding-left: 0; }
.sheet ul.wn li { padding-left: 0; }
.learn { background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.learn p { margin: 0; font-size: 15px; line-height: 1.45; }
/* 1.84: Past games */
.past-list { display: flex; flex-direction: column; gap: 8px; }
.past { background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 14px; }
.past summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; }
.past summary::-webkit-details-marker { display: none; }
.past .ps-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.past .ps-top { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.past .meta { font-size: 13px; color: var(--muted); font-weight: 600; }
.past .pill { flex: none; }
.sheet .past ol.ps-stand { list-style: none; margin: 0; padding: 0 12px 10px; gap: 0; }
.sheet .past ol.ps-stand li { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.sheet .past ol.ps-stand li.is-you { color: var(--accent); font-weight: 800; }
.past .hint { padding: 0 12px 10px; }
/* 1.84: pass & play */
.hs-names { display: flex; flex-direction: column; gap: 8px; }
.hs-row { display: flex; gap: 8px; align-items: center; }
.hs-row .input { flex: 1; min-width: 0; }
.pass-cover { position: fixed; inset: 0; z-index: 55; border: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: radial-gradient(120% 90% at 50% 30%, var(--felt-hi), var(--felt-0)); color: var(--paper); padding: 24px; text-align: center; animation: fade 160ms; }
.pass-cover .pc-eyebrow { font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.pass-cover .pc-name { font: 44px/1.05 var(--font-display); color: var(--accent); overflow-wrap: anywhere; }
.pass-cover .pc-what { font-size: 18px; font-weight: 700; }
.pass-cover .pc-tap { margin-top: 18px; font-size: 15px; color: var(--muted); font-weight: 700; padding: 12px 20px; border-radius: 999px; border: 1.5px solid var(--line); }
/* 1.86: grouped game menu with switches */
.menu-code { margin-top: -6px; }
.menu-code .link { color: var(--accent); font-weight: 700; padding: 0; min-height: 0; background: none; border: 0; }
.menu-group { display: flex; flex-direction: column; gap: 8px; }
.menu-group .row { display: flex; gap: 8px; }
.menu-foot { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.sw-list { display: flex; flex-direction: column; background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 16px; overflow: hidden; }
.sw-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: none; border: 0; border-top: 1px solid var(--line); text-align: left; min-height: 56px; width: 100%; }
.sw-row:first-child { border-top: 0; }
.sw-row .sw-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sw-row .sw-t b { font-size: 16px; color: var(--paper); }
.sw-row .sw-t small { font-size: 13px; color: var(--muted); font-weight: 600; }
.sw { flex: none; width: 50px; height: 30px; border-radius: 999px; background: color-mix(in srgb, var(--line) 80%, transparent); position: relative; transition: background 160ms; }
.sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 3px rgba(0,0,0,0.4); transition: transform 160ms var(--ease-out); }
.sw-row[aria-checked="true"] .sw { background: var(--good); }
.sw-row[aria-checked="true"] .sw::after { transform: translateX(20px); }
@media (prefers-reduced-motion: reduce) { .sw, .sw::after { transition: none; } }
#coach { position: fixed; z-index: var(--z-tray); pointer-events: none; background: var(--paper); color: var(--card-ink); border-radius: 16px; padding: 12px 14px 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); animation: rise-t 200ms var(--ease-out); transform-origin: top center; }
#coach p { margin: 0 0 8px; font-weight: 700; font-size: 15px; line-height: 1.35; }
#coach .coach-row { display: flex; align-items: center; gap: 8px; }
#coach .coach-n { font-size: 12px; font-weight: 800; color: #6b6b74; margin-right: auto; }
#coach .link { color: #55555e; padding: 8px; min-height: 0; font-size: 14px; }
#coach .btn.small { min-height: 38px; }
#coach button { pointer-events: auto; }
/* 1.171: tutorial glow */
.tut-hi { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 10px; animation: tut-glow 1.2s ease-in-out infinite; }
@keyframes tut-glow { 50% { outline-color: rgba(245, 189, 79, 0.55); } }
@media (prefers-reduced-motion: reduce) { .tut-hi { animation: none; } }
.bar .tut-skip { flex: none; }

/* ---------- Party mode cards ---------- */
/* 1.115: on brand. Same cream card and circle as the numbers, with circles no number card has:
   Wild = all five card colors around a cream center; Bulldozer = hazard stripes around a black center with 🤘 rock-on;
   Jackpot = black with one gold ring and a gold −15. */
.t-wild { --tone: conic-gradient(from -36deg, #2b5797 0 72deg, #bfc2c9 0 144deg, #2e8b7a 0 216deg, #eaa526 0 288deg, #c8372d 0 360deg); }
.t-dozer { --tone: repeating-linear-gradient(135deg, #eaa526 0 calc(var(--w) * 0.075), #1b1a22 0 calc(var(--w) * 0.15)); }
.t-jack { --tone: radial-gradient(circle closest-side, #1b1a22 0 70%, #eaa526 70% 75%, #1b1a22 75%); }
.card.face.special .num { text-shadow: none; }
.card.t-wild .num { width: 40%; aspect-ratio: 1; border-radius: 50%; background: var(--paper); color: var(--num-ink); display: grid; place-items: center; font-size: calc(var(--w) * 0.24); letter-spacing: 0; }
.card.t-dozer .num { width: 50%; aspect-ratio: 1; border-radius: 50%; background: #1b1a22; display: grid; place-items: center; font-size: calc(var(--w) * 0.28); line-height: 1; }
.mini .card.t-dozer .num { font-size: 11px; }
.card.t-jack .num { color: #eaa526; font-size: calc(var(--w) * 0.3); letter-spacing: -0.04em; }
.mini .card.t-jack .num { font-size: 9px; }
.bar .sub .twist { color: var(--accent); font-weight: 800; }
.scores .bonus { display: block; font-size: 11px; color: var(--good); font-weight: 800; white-space: nowrap; }
.party-cards { display: flex; gap: 10px; justify-content: center; }
.party-cards .card { --w: 56px; }

/* Another game is waiting on you: a pill under the bar, one tap to switch tables */
#hop {
  position: fixed; left: 50%; top: calc(58px + env(safe-area-inset-top, 0px)); transform: translateX(-50%);
  z-index: calc(var(--z-toast) - 1); max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 999px;
  background: var(--paper); color: var(--felt); font: inherit; font-size: 15px; border: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); animation: rise-t 180ms var(--ease-out); cursor: pointer;
}
#hop[hidden] { display: none; }
/* Update ready: same look as the switch pill, just under it so the two never cover each other. */
#upd {
  position: fixed; left: 50%; top: calc(108px + env(safe-area-inset-top, 0px)); transform: translateX(-50%);
  z-index: calc(var(--z-toast) - 2); max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 999px;
  background: var(--paper); color: var(--felt); font: inherit; font-size: 15px; border: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); animation: rise-t 180ms var(--ease-out); cursor: pointer;
}
#upd[hidden] { display: none; }
#upd.leaving { opacity: 0; transform: translate(-50%, -8px); transition: opacity 0.25s, transform 0.25s; }
#upd .t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#upd .go { flex: none; background: var(--accent); color: var(--accent-ink); font-weight: 800; padding: 6px 12px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { #upd { animation: none; } }
#hop.leaving { opacity: 0; transform: translate(-50%, -8px); transition: opacity 0.25s, transform 0.25s; }
#hop .t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hop .more { color: color-mix(in srgb, var(--felt) 65%, transparent); font-weight: 600; }
#hop .go { flex: none; display: inline-flex; align-items: center; gap: 4px; background: var(--accent); color: var(--accent-ink); font-weight: 800; padding: 6px 10px 6px 12px; border-radius: 999px; }
#hop .go .i { width: 16px; height: 16px; transform: scaleX(-1); }
.games-btn { position: relative; }
.games-btn .badge { top: -2px; right: -2px; }
.game-row.here { opacity: 0.75; }
@media (prefers-reduced-motion: reduce) { #hop { animation: none; } }

/* ---- Masks (Party mode) ---- */
.card.back.peeked { position: relative; }
.card.back .peek-v {
  position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); max-width: 88%; box-sizing: border-box; white-space: nowrap; overflow: hidden; /* 1.170: #108 stays inside the card */
  min-width: 1.6em; padding: 0.1em 0.35em; border-radius: 999px;
  background: rgba(10, 12, 18, 0.82); color: var(--paper); border: 1px solid var(--accent);
  font-family: var(--font-display); font-size: calc(var(--w) * 0.17); line-height: 1.3; text-align: center;
}
.card.back .peek-v::before { content: '👀 '; font-family: var(--font-body); font-size: 0.75em; }
.opp-masks { flex: none; display: inline-flex; gap: 2px; }
.mk { display: inline-grid; place-items: center; }
.mk.eternal { filter: drop-shadow(0 0 2px var(--accent)); }
.me-masks {
  position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; margin: -3px 0; min-height: 28px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: inherit; font: inherit; font-size: 15px; cursor: pointer;
}
.me-masks .dotnew { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.mask-list { list-style: none; padding: 0; margin: 8px 0 12px; display: grid; gap: 8px; }
.mask-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.mask-row .mt { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.mask-row .md, .mask-card .md { flex-basis: 100%; color: var(--muted); font-size: 13px; font-weight: 500; line-height: 1.35; }
.mtag { display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--paper); text-transform: uppercase; letter-spacing: 0.04em; }
.mtag.eternal { border-color: var(--accent); color: var(--accent); }
.mtag.fading { border-style: dashed; color: var(--muted); }
.mask-pick { margin: 14px 0 6px; }
.mask-pick h3 { margin: 0 0 8px; }
.mask-offer { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.mask-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 12px 8px; border-radius: 16px;
  background: var(--surface); border: 1.5px solid var(--line-strong); color: var(--paper); font: inherit; font-size: 14px; cursor: pointer;
}
.mask-card:active { transform: scale(0.97); }
.mask-card.eternal { border-color: var(--accent); }
.mask-card.fading { border-style: dashed; }
.mask-card .md { font-size: 12px; }
.trade-offer { margin: 10px 0; padding: 12px; border-radius: 14px; border: 1.5px solid var(--accent); background: var(--surface); }
.trade-offer p { margin: 0 0 10px; }
.sheet .mask-list { padding: 0; margin-left: 0; }

/* Coins (mask chips). 1.115: flat circles in the card colors; before that, poker chips with a striped edge. */
.mchip {
  --s: 22px;
  position: relative; display: inline-grid; place-items: center; flex: none; vertical-align: middle;
  width: var(--s); height: var(--s); border-radius: 50%;
  /* 1.115: on brand. A keeper coin is a solid circle in a card color with a thin cream ring; the color says what kind of
     coin it is (COIN_TONE in app.js), the icon says which one. */
  background: radial-gradient(circle closest-side, var(--c) 0 64%, rgba(247, 242, 230, 0.85) 64% 72%, var(--c) 72%);
  box-shadow: 0 calc(var(--s) * 0.06) 0 rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.35);
}
.mchip::before { content: none; }
.mchip .em { position: relative; font-size: calc(var(--s) * 0.44); line-height: 1; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35)); }
.mchip .eyes, .ri-ic .eyes { width: calc(var(--s, 28px) * 0.62); height: auto; }
.mchip.sm { --s: 17px; }
.mchip.lg { --s: 42px; }
.mchip.xl { --s: 60px; }
.mchip.in { --s: 1.45em; margin: -0.2em 0.05em 0; }
.mchip.eternal { box-shadow: 0 0 0 calc(var(--s) * 0.06) var(--accent), 0 calc(var(--s) * 0.07) 0 rgba(0, 0, 0, 0.35), 0 0 calc(var(--s) * 0.35) color-mix(in srgb, var(--accent) 45%, transparent); }
.mchip.fading { opacity: 0.72; }
.mchip.empty { background: none; box-shadow: none; border: 1.5px dashed var(--line-strong); }
.me-masks { gap: 5px; padding: 3px 8px; }
.mask-card .mchip { margin-bottom: 4px; }

/* A chip that just did something: one sweep of light and a small lift, twice. Not a flash. */
.mchip.used { animation: chip-lift 0.9s var(--ease-out) var(--shine-at, 0ms) 2; }
.mchip.used::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.9) 48%, rgba(255, 255, 255, 0.15) 56%, transparent 70%);
  background-size: 260% 100%; background-repeat: no-repeat;
  animation: chip-shine 0.9s ease-in-out var(--shine-at, 0ms) 2 both; mix-blend-mode: overlay;
}
@keyframes chip-shine { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@keyframes chip-lift { 0%, 100% { transform: none; } 40% { transform: translateY(-2px) scale(1.12); } }
@media (prefers-reduced-motion: reduce) {
  .mchip.used, .mchip.used::after { animation: none; }
  .mchip.used { box-shadow: 0 0 0 2px var(--paper), 0 0 10px color-mix(in srgb, var(--paper) 50%, transparent); }
}
.hint.version { text-align: center; opacity: 0.7; margin-top: 4px; }

/* Chat reactions (tap a message) */
/* The bubble wrapper must not change how bubbles lay out: it's a column like .msg, so the text stays one box. */
.msg .mbody { display: flex; flex-direction: column; align-items: inherit; max-width: 100%; min-width: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.msg .mbody > .text { display: block; }
.msg .rbar { display: flex; flex-wrap: nowrap; width: max-content; max-width: calc(100vw - 72px); align-self: flex-start; gap: 0; padding: 3px 4px; /* 1.126: always one row */ margin: 2px 0 4px; border-radius: 18px; background: var(--paper); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); animation: rise-t 140ms var(--ease-out); }
.msg .rbar button { flex: none; border: 0; background: none; font-size: 22px; width: 40px; height: 40px; border-radius: 12px; cursor: pointer; display: grid; place-items: center; transition: transform 100ms var(--ease-out); }
.msg .rbar button:active { transform: scale(1.18); }
@media (max-width: 430px) { .msg .rbar button { width: calc((100vw - 82px) / 8); height: 38px; font-size: 20px; } }
.msg.mine .rbar { align-self: flex-end; }
.msg .rbar button.mine { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.msg .reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: -4px; padding: 0 10px; position: relative; z-index: 1; }
.msg .rpill { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; padding: 2px 7px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--paper); cursor: pointer; }
.msg .rpill span { font-size: 12px; font-weight: 800; }
.msg .rpill.mine { border-color: var(--accent); }

/* A coin used up for this round */
.mchip.spent { filter: grayscale(1) brightness(0.75); opacity: 0.5; }
.mchip.spent .em { opacity: 0.6; }

/* ---- Party v2 coins ---- */
/* Round coins (1.115): cream with a rim in their color, so they read differently from the solid keeper coins */
.mchip.round { background: radial-gradient(circle closest-side, var(--paper) 0 68%, var(--c) 68%); }
.mchip.round.k-colors { background: radial-gradient(circle closest-side, var(--paper) 0 68%, transparent 68%), conic-gradient(from -36deg, #2b5797 0 72deg, #bfc2c9 0 144deg, #2e8b7a 0 216deg, #eaa526 0 288deg, #c8372d 0 360deg); }
.mchip.inplay { box-shadow: 0 0 0 2px var(--accent), 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent); }
/* Tails up: the darker face, with a small T */
.mchip.tails { filter: saturate(0.55) brightness(0.72); }
.mchip.tails::after { content: 'T'; position: absolute; right: -2px; bottom: -2px; min-width: 40%; height: 40%; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--paper); font: 800 calc(var(--s) * 0.26)/1 var(--font-body); border: 1px solid var(--line-strong); }
.mchip.tails.used::after { content: none; }
.mchip.sm.tails::after { content: none; }
/* Flipping at the deal: two turns on the spot */
.mchip.flipping { animation: chip-flip 0.9s cubic-bezier(0.3, 0.7, 0.3, 1) var(--flip-at, 0ms) 1 both; }
@keyframes chip-flip { 0% { transform: rotateY(0) translateY(0); } 40% { transform: rotateY(360deg) translateY(-6px); } 100% { transform: rotateY(720deg) translateY(0); } }
@media (prefers-reduced-motion: reduce) { .mchip.flipping { animation: none; } }
.me-masks .wsep { width: 1px; align-self: stretch; margin: 2px 2px; background: var(--line-strong); }
.mask-row .md.sides { display: grid; gap: 2px; }
.mask-row .md.sides > span { opacity: 0.75; }
.mask-row .md.sides > span.on { opacity: 1; color: var(--paper); }
.mask-row .md.sides b { font-weight: 800; margin-right: 4px; }
.mtag.side-H { border-color: var(--good); color: var(--good); }
.mtag.side-T { border-color: var(--line-strong); color: var(--muted); }
.mask-row .rbtns { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.mask-card.round { border-color: #c9a24f; }
.break-bar { margin: 12px 0; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--accent); display: grid; gap: 8px; }
.break-bar .bb-top { display: flex; justify-content: space-between; align-items: baseline; }
.break-bar .bb-title { font-weight: 800; }
.break-bar .brk-time { font-family: var(--font-display); font-size: 22px; font-variant-numeric: tabular-nums; color: var(--accent); }
.break-bar .hint { margin: 0; }

/* ---- v49: layout fix, live coin number, receipt, bounty, aiming ---- */
.sheet { overflow-x: hidden; }
.sheet > * { min-width: 0; }
.scores .bonus { white-space: normal; line-height: 1.5; }
.me-masks .cdelta { font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; padding: 1px 6px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.me-masks .cdelta.good { color: var(--good); }
.me-masks .cdelta.bad { color: var(--bad); }
.mtag.now { border-color: var(--good); color: var(--good); }
.receipt { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); display: grid; gap: 4px; }
.receipt h3 { margin: 0 0 4px; }
.receipt .rline { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 15px; min-width: 0; }
.receipt .rline span { min-width: 0; }
.receipt .rline b { font-variant-numeric: tabular-nums; }
.receipt .rline.dbl b { color: var(--bad); }
.receipt .rline.total { border-top: 1px solid var(--line-strong); padding-top: 6px; margin-top: 2px; font-weight: 800; }
.receipt .rline.total b { font-size: 18px; color: var(--accent); }
.receipt.fresh .rline { animation: rline-in 0.35s var(--ease-out) both; animation-delay: calc(var(--i) * 0.06s + 0.15s); }
@keyframes rline-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .receipt.fresh .rline { animation: none; } }
.mat { position: relative; }
.bounty-pill { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); z-index: 2; white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis;
  font: 800 12px/1 var(--font-body); padding: 6px 10px; border-radius: 999px; border: 1.5px solid var(--accent); background: var(--surface); color: var(--paper); cursor: pointer; }
.bounty-pill b { color: var(--accent); margin-left: 4px; }
.bounty-pill.won { border-color: var(--good); }
.bounty-pill.won b { color: var(--good); }
.mask-list .aim-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; border: 1.5px dashed var(--accent); }

/* True Colors round (Party v4): the bottom corner names the card's color (B, T, G, Y, R), upright. */
.card .corner.b .band-tag { display: inline-block; transform: rotate(180deg); padding: 0 .12em; border-radius: 3px; background: var(--tone); color: var(--chip-ink); letter-spacing: .02em; }

/* v56 coin break screen: compact headline, timer row, folded scores, Ready pinned to the bottom of the sheet */
.announce.compact { padding-top: 2px; }
.announce.compact h2 { font-size: 24px; }
.announce.compact p { font-size: 14px; }
.brk-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 17px; padding: 10px 14px; border-radius: 14px; background: var(--surface-2); border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--line)); }
.brk-head .brk-time { font: 20px/1 var(--font-display); color: var(--accent); }
details.fold { border: 1.5px solid var(--line); border-radius: 14px; padding: 0 12px; }
details.fold > summary { cursor: pointer; list-style: none; font-weight: 800; padding: 12px 0; display: flex; justify-content: space-between; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: '▾'; color: var(--muted); transition: transform 150ms; }
details.fold[open] > summary::after { transform: rotate(180deg); }
details.fold[open] { padding-bottom: 12px; display: flex; flex-direction: column; gap: 10px; }
.ready-dock { position: sticky; bottom: calc(-20px - env(safe-area-inset-bottom, 0px)); margin: 0 -18px calc(-20px - env(safe-area-inset-bottom, 0px)); padding: 10px 18px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1.5px solid var(--line); display: flex; flex-direction: column; gap: 8px; z-index: 3; }
.ready-dock .hint { font-size: 13px; text-align: center; }
/* The bounty pill sits on the mat's top edge; the pile labels drop a little so it never covers "Drawn". */
.mat.has-bounty { padding-top: 22px; }
.opp-head .sc small { font-size: 10px; font-weight: 700; color: var(--muted); margin-right: 3px; text-transform: uppercase; letter-spacing: 0.04em; }

/* v57 round-end reveal */
#reveal { position: fixed; inset: 0; z-index: calc(var(--z-toast) - 3); display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, 0.8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade-in 200ms ease-out; }
@keyframes fade-in { from { opacity: 0; } }
#reveal .rv-box { width: min(440px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; background: var(--surface); border: 1.5px solid var(--line); border-radius: 22px; padding: 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
#reveal .rv-title { font: 22px/1 var(--font-display); text-align: center; margin-bottom: 4px; }
#reveal .rv-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 76px; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; border: 1.5px solid transparent; transition: background 200ms, border-color 200ms; position: relative; }
#reveal .rv-row.on { background: var(--surface-2); border-color: var(--line-strong, var(--line)); }
#reveal .rv-row.win { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
#reveal .rv-row.win .rv-name::before { content: '👑 '; }
#reveal .rv-name { font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#reveal .rv-grid { display: grid; grid-template-columns: repeat(4, 20px); grid-auto-rows: 26px; gap: 3px; }
#reveal .rv-c { border-radius: 4px; display: grid; place-items: center; font: 700 11px/1 var(--font-card); color: var(--chip-ink, #fff); background: var(--tone, #555); }
#reveal .rv-c.down { background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--line); }
#reveal .rv-c.gone { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 50%, transparent); }
#reveal .rv-c.flip { animation: rv-flip 260ms var(--ease-out); }
@keyframes rv-flip { from { transform: rotateY(90deg) scale(1.2); } }
#reveal .rv-score { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
#reveal .rv-n { font: 26px/1 var(--font-display); font-variant-numeric: tabular-nums; }
#reveal .rv-n.doubled { color: var(--bad, #e05a4f); }
#reveal .rv-note { font-size: 11px; font-weight: 700; color: var(--muted); min-height: 1em; white-space: nowrap; }
#reveal .rv-row.stamp::after { content: "×2 DOUBLED"; white-space: nowrap; position: absolute; left: 55%; top: 50%; transform: translate(-50%, -50%) rotate(-12deg); font: 18px/1 var(--font-display); color: var(--bad, #e05a4f); border: 3px solid currentColor; border-radius: 6px; padding: 4px 8px; background: color-mix(in srgb, var(--surface) 70%, transparent); animation: stamp 320ms cubic-bezier(.2,1.6,.4,1) both; pointer-events: none; }
#reveal .rv-row.stamp.wiped::after { content: "NEGATIVE → 0"; }
@keyframes stamp { from { transform: translate(-50%, -50%) rotate(-12deg) scale(2.4); opacity: 0; } }
#reveal .rv-foot { margin-top: 6px; }

/* v58 catch-up */
ul.catchup { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
ul.catchup li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
ul.catchup li:last-child { border-bottom: 0; }
ul.catchup .when { flex: none; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.cu-status { margin: 4px 0 0; font-weight: 800; text-align: center; }
.cu-status.hot { color: var(--accent); }
ul.catchup b.you { color: var(--accent); }

/* v59 Daily Lowza */
.panel.daily { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.dl-score { margin: 0; font-size: 17px; }
.dl-score b { font: 26px/1 var(--font-display); color: var(--accent); }
pre.dl-share { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1.5px solid var(--line); font: 15px/1.45 var(--font-body); white-space: pre-wrap; text-align: center; }
table.daily-board tr.is-you td { color: var(--accent); font-weight: 800; }

/* v60 paused coin break */
.brk-head.paused { border-color: var(--line); }
.brk-head.paused .brk-time { color: var(--muted); }
.brk-wait { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1.5px dashed color-mix(in srgb, var(--accent) 50%, var(--line)); }
.brk-wait p { margin: 0; font-weight: 700; }

/* v60 "This round" */
.bar button.info { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.bar .info .ri-dot { margin-left: 5px; font-size: 12px; color: var(--accent); }
ul.round-info { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
ul.round-info li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.35; }
ul.round-info .ri-ic { flex: none; width: 1.5em; text-align: center; font-size: 18px; }
ul.round-info .ri-ok { color: var(--good, #4caf7d); font-weight: 700; }

/* v62 effects at a glance */
.fx-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 6px; }
.fx-tag { font: inherit; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--paper); cursor: pointer; white-space: nowrap; }
.fx-tag.ghost { background: transparent; border-color: var(--line); padding-inline: 8px; }
.opp { position: relative; }
.opp-fx { position: absolute; right: 6px; bottom: 30px; font-size: 12px; letter-spacing: 1px; padding: 1px 4px; border-radius: 8px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line)); line-height: 1.3; pointer-events: none; }

/* v65: tap a name in the results for that player's math */
.scores .pl.link-ish { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; text-decoration: underline dotted color-mix(in srgb, currentColor 50%, transparent); text-underline-offset: 3px; cursor: pointer; }
.scores tr.rpt-row { cursor: pointer; }
.receipt .rline.sub span, .receipt .rline.sub b { color: var(--muted); }

/* v68: bot levels and skill ratings */
.lvl { margin-left: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; vertical-align: 1px; }
.add-bot { display: grid; gap: 8px; margin-top: 10px; }
.add-bot .btn { justify-self: start; }
.lvl-blurb { margin: 0; min-height: 1.3em; }
.play-bots { display: grid; gap: 10px; }
.play-bots h2 { margin-bottom: 0; }
.play-bots .hint { margin: 0; }
.rchips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 8px; }
.rchip { display: grid; gap: 2px; text-align: left; min-height: var(--tap); padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--paper); font: inherit; cursor: pointer; }
.rchip b { font-size: 22px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.rc-mode, .rc-tier { font-size: 12px; color: var(--muted); font-weight: 700; }
.rchg { margin-left: 6px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted); }
.rchg.up { color: var(--good); }
.rchg.down { color: var(--bad); }
.rate-news { margin: 12px 0 4px; display: grid; gap: 6px; }
.rate-news .hint { margin: 0; }
.rn-me { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--accent); background: var(--surface-2); color: var(--paper); font: inherit; cursor: pointer; text-align: left; }
.rn-me b { font-size: 20px; font-variant-numeric: tabular-nums; }
.rn-me .rchg { font-size: 17px; }
.rn-up { color: var(--accent); font-weight: 800; }
.rating-big { display: grid; justify-items: center; gap: 2px; margin: 14px 0 6px; text-align: center; }
.rating-big .rb-icon { font-size: 30px; line-height: 1; }
.rating-big b { font-family: var(--font-display); font-size: 48px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.rating-big .hint { margin: 0; }
.spark { display: block; width: 100%; height: 56px; margin: 6px 0 10px; overflow: visible; }
.spark polyline { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark circle { fill: var(--accent); }
.rlog { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 2px; }
.rlog li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 7px 2px; border-bottom: 1px solid var(--line); }
.rlog li .hint { margin: 0 0 0 4px; }
.scores.board td.rt { white-space: nowrap; font-variant-numeric: tabular-nums; }
.scores.board td.rt .new { color: var(--muted); }

/* v70: one ladder — levels and progress bars */
.lvl-seg button { display: grid; gap: 1px; justify-items: center; padding-top: 6px; padding-bottom: 6px; line-height: 1.15; }
.lvl-seg button small { font-size: 11px; font-weight: 700; color: var(--muted); }
.lvl-seg button[aria-pressed="true"] small { color: inherit; opacity: 0.75; }
.lbar { display: block; height: 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; margin: 6px 0 4px; }
.lbar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width 600ms var(--ease-out); }
.rchip b { font-size: 19px; }
.rn-me { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; }
.rn-me .rn-mode { grid-column: 1 / -1; font-size: 12px; font-weight: 700; color: var(--muted); }
.rn-me b { font-size: 19px; }
.rn-me .lbar { grid-column: 1 / -1; grid-row: 3; margin: 4px 0 0; }
.rn-me .rchg { grid-column: 2; grid-row: 2; }
.rn-me.big { border-width: 2px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.rating-big .lbar { width: min(260px, 80%); margin: 10px auto 6px; height: 8px; }
.rating-big b { font-size: 40px; }
.ladder { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 4px; }
.ladder li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); }
.ladder li > span:first-child { font-weight: 800; min-width: 7.5em; }
.ladder li .hint { margin: 0; flex: 1; }
.ladder li.mine { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ladder .you { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }

/* v71: 🖤 — a faint pale glow so the black heart shows on the dark table */
.dark-emoji { filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 5px rgba(196, 160, 255, 0.55)); }

/* v72: easy home — three ways to play, the rest one tap away */
.panel.play { display: grid; gap: 10px; }
.name-row { display: flex; align-items: center; gap: 10px; }
.name-row label { font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.name-row .input { flex: 1; min-width: 0; }
.btn.big { min-height: 56px; font-size: 18px; }
.join-row .input { min-height: 44px; }
.bots-line { margin: -4px 0 0; text-align: center; }
.bots-line .link, .move-links .link { font: inherit; padding: 0; }
.move-links { text-align: center; }
.acct-row .who-am-i { display: flex; align-items: center; gap: 10px; }
.acct-row .who-am-i b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.acct-links { display: flex; gap: 6px; }
.acct-links .btn { min-width: var(--tap); }
.sheet h3 + .seg, .sheet h3 + .lvl-seg { margin-top: 4px; }
.acct-row .who-am-i { flex-wrap: wrap; }
.acct-links { margin-left: auto; }

/* ==========================================================================================
   v73 "Quiet": calm, flat, one gold button per screen. Borders become soft fills, pills become
   rounded rectangles, choices become iOS-style segmented controls, home becomes plain lists.
   The table and the cards keep their look; this changes the chrome around them.
   ========================================================================================== */
:root { --q-fill: rgba(255, 255, 255, 0.07); --q-fill-2: rgba(255, 255, 255, 0.12); --q-hair: rgba(255, 255, 255, 0.08); --q-dim: #8d93a6; }
body:has(#app:not(.in-game)) { background: #0e0f13; background-image: none; }
body:has(#app:not(.in-game)) { --surface: #17191f; --surface-2: #1d2027; --line: #2a2e38; --line-strong: #3a3f4c; --muted: #9ba1b3; }

/* buttons: filled, not outlined */
.btn { border: 0; background: var(--q-fill); border-radius: 14px; font-weight: 700; }
.btn:active { background: var(--q-fill-2); }
.btn.small { border-radius: 12px; }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.ghost { background: transparent; color: var(--muted); }
.btn.ghost:active { background: var(--q-fill); }
.btn.danger { background: transparent; color: var(--bad); }
.btn.big { min-height: 56px; border-radius: 16px; font-size: 17px; font-weight: 800; }
.icon-btn { border: 0; background: var(--q-fill); }
.icon-btn:active { background: var(--q-fill-2); }
.link { color: var(--muted); text-decoration: none; }

/* segmented controls */
.seg { gap: 2px; padding: 3px; border-radius: 12px; background: var(--q-fill); }
.seg button { border: 0; border-radius: 10px; min-height: 40px; color: var(--muted); font-weight: 700; }
.seg button[aria-pressed="true"] { background: var(--q-fill-2); color: var(--paper); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.lvl-seg button small { color: var(--q-dim); }
.lvl-seg button span { display: inline-flex; align-items: center; gap: 4px; }

/* panels, inputs, pills, rows */
.panel { border: 0; background: var(--surface); border-radius: 18px; }
.panel h2, .q-h { font: 800 12px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--q-dim); margin: 6px 4px -6px; }
.input { border: 0; background: var(--q-fill); border-radius: 12px; }
.input:focus { box-shadow: 0 0 0 2px var(--accent); }
.pill { border: 0; background: var(--q-fill-2); }
.game-row, .players li { border: 0; background: var(--surface); }
.lvl { border: 0; background: var(--q-fill); display: inline-flex; align-items: center; gap: 4px; text-transform: none; letter-spacing: 0; font-size: 12px; padding: 2px 8px; }
.lvbadge { flex: none; vertical-align: -4px; }
.sheet { border: 0; }
.scores td { border-top-color: var(--q-hair); }

/* home: plain lists */
.home.quiet { gap: 14px; padding-top: 28px; }
.q-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 0 4px 4px; }
.q-top h1 { margin: 0; font: 700 30px/1 var(--font-display); letter-spacing: -0.01em; }
.q-lv { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; background: var(--q-fill); border-radius: 999px; padding: 6px 12px 6px 8px; font-weight: 700; font-size: 14px; color: #e8d6a6; }
.list { display: flex; flex-direction: column; border-radius: 16px; background: var(--surface); overflow: hidden; }
.list > * + *, .list .rchips > * + *, .list > .rchips + * { box-shadow: inset 0 1px rgba(255, 255, 255, 0.09); }
.list.games { background: transparent; gap: 8px; border-radius: 0; overflow: visible; }
.list.games > * + * { box-shadow: none; }
.list.games .game-row { border-radius: 16px; }
.lrow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px; border: 0; background: transparent; color: var(--paper); text-align: left; font: inherit; }
button.lrow, .lrow-main { transition: transform 120ms var(--ease-out), background-color 150ms; }
button.lrow:active, .lrow-main:active { transform: scale(0.985); background: var(--q-fill); }
.lrow > .i:first-child, .lrow-main > .i:first-child { color: #e8d6a6; }
.lrow > .i:last-child { color: #5b6070; width: 18px; height: 18px; }
.lr-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lr-t b { font-weight: 700; font-size: 16px; }
.lr-t small { font-size: 13px; color: var(--q-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-t small b { font-size: 13px; color: var(--paper); }
.lr-t .lbar { margin: 4px 0 2px; height: 4px; border: 0; background: var(--q-fill-2); }
.lrow:has(.lrow-main) { padding: 0; gap: 0; }
.lrow-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; }
.lrow-side { flex: none; border: 0; background: transparent; color: #e8d6a6; font: 700 15px var(--font-body); padding: 0 16px; min-height: 60px; }
.lrow-side:active { background: var(--q-fill); }
.lr-ic { width: 22px; text-align: center; font: 700 18px var(--font-display); color: #e8d6a6; flex: none; }
.join-row { padding-right: 0; }
.join-row .input { flex: 1; min-width: 0; min-height: 40px; background: transparent; text-align: left; letter-spacing: 0.08em; font: 600 16px var(--font-body); padding: 0; text-transform: none; }
.join-row .input:not(:placeholder-shown) { text-transform: uppercase; letter-spacing: 0.25em; font-family: var(--font-display); }
.join-row .input:focus { box-shadow: none; }
.name-row label { font-size: 16px; font-weight: 700; color: var(--paper); }
.name-row .input { flex: 1; min-width: 0; min-height: 40px; background: transparent; text-align: right; color: var(--muted); padding: 0; }
.name-row .input:focus { box-shadow: none; color: var(--paper); }
.rchips { display: flex; flex-direction: column; margin: 0; }
.rchip.lrow { border-radius: 0; border: 0; background: transparent; }
.guest { align-items: flex-start; }
.guest .lr-t small { white-space: normal; }
.guest-btns { min-height: 0; padding-top: 0; box-shadow: none !important; gap: 8px; }
.guest-btns .btn { flex: 1; }
.q-foot { text-align: center; margin: 4px 0 0; }
.move-links { text-align: center; }
.home .version { text-align: center; color: #5b6070; font-size: 13px; }

/* v74: Your turn on top, the rest folded */
.q-hrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.q-hrow .q-h { margin-bottom: 0; }
.games-fold { border-radius: 16px; }
.games-fold > summary { list-style: none; display: flex; align-items: center; background: var(--surface); border-radius: 16px; min-height: 56px; padding: 0 14px 0 16px; gap: 10px; cursor: pointer; }
.games-fold > summary::-webkit-details-marker { display: none; }
.games-fold > summary:active { background: var(--surface-2); }
.games-fold .fold-lbl { flex: 1; font-weight: 700; font-size: 16px; color: var(--paper); }
.games-fold > summary .pill { background: var(--q-fill-2); color: var(--paper); }
.games-fold .fold-chev .i { width: 18px; height: 18px; color: var(--muted); transform: rotate(90deg); transition: transform 200ms var(--ease-out); }
.games-fold[open] .fold-chev .i { transform: rotate(-90deg); }
.games-fold > .list { margin-top: 6px; }
.game-row > .i:last-child { color: #5b6070; width: 18px; height: 18px; }

/* v77: games waiting on you lead the home screen */
.game-row.mine { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface) 70%); box-shadow: inset 3px 0 0 var(--accent); }
.game-row.mine .ttl, .game-row.mine .code { color: var(--paper); }
.game-row.mine .pill.hot { padding: 7px 14px; font-size: 13px; }

/* 1.213: Pinned games & Inactive drawer */
.pinned-section { margin-bottom: 14px; }
.pinned-section .q-hrow { margin-bottom: 8px; }
.pinned-section .q-h { display: flex; align-items: center; gap: 6px; }
.pinned-section .q-h .i { width: 16px; height: 16px; color: var(--accent); }
.pinned-grid { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pinned-grid.n1 { grid-template-columns: 1fr; }
.pinned-card {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 10px 12px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; text-align: left; cursor: pointer; min-height: 80px;
  transition: transform 120ms var(--ease-out), background 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.pinned-card:active { transform: scale(0.98); background: var(--surface-2); }
.pinned-card.hot {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface) 80%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
.pinned-card .pc-top, .pinned-card .pc-bot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pinned-card .pc-title-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pinned-card .pc-title-row .ttl, .pinned-card .pc-title-row .code, .pinned-card .pc-mid .meta {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pinned-card .pc-title-row .ttl, .pinned-card .pc-title-row .code { font-weight: 700; font-size: 14px; color: var(--paper); }
.pinned-card .pc-pin, .pinned-card .party-tag, .pin-tag { color: var(--accent); display: inline-flex; align-items: center; flex-shrink: 0; }
.pinned-card .pc-pin .i, .pinned-card .party-tag .i, .pin-tag .i { width: 14px; height: 14px; }
.pinned-card .pc-mid { margin: 3px 0 6px; min-height: 16px; }
.pinned-card .pc-mid .meta { font-size: 12px; color: var(--muted); display: block; }
.pinned-card .pc-bot .pill { font-size: 11px; padding: 2px 8px; }
.pinned-card.hot .pc-bot .pill.hot { font-weight: 700; box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 40%, transparent); }

.games-fold.games-inactive { margin-top: 10px; opacity: 0.9; }
.games-fold.games-inactive summary { min-height: 48px; background: color-mix(in srgb, var(--surface) 75%, transparent); }
.games-fold.games-inactive .fold-lbl { font-size: 14px; color: var(--muted); font-weight: 600; }
.games-fold.games-inactive summary .pill { opacity: 0.75; font-size: 12px; }

/* 1.92: safety — Terms/Privacy/Support in a sheet, report and block, kid-safe mode, the admin report queue */
.doc { font-size: 15px; line-height: 1.55; }
.doc h1 { display: none; }
.doc h2 { font-size: 17px; margin: 18px 0 6px; }
.doc h3 { font-size: 15px; margin: 14px 0 4px; }
.doc p, .doc li { color: var(--muted); }
.doc a { color: var(--accent); }
.doc table { width: 100%; border-collapse: collapse; font-size: 13px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 6px 4px; border-bottom: 1px solid var(--line); color: var(--muted); }
.doc .updated { font-size: 13px; }
.hint.quote { border-left: 3px solid var(--line-strong); padding: 6px 10px; margin: 8px 0 12px; overflow-wrap: anywhere; }
.chk { display: flex; gap: 10px; align-items: center; margin: 12px 0 4px; font-weight: 600; }
.chk input { width: 20px; height: 20px; accent-color: var(--accent); }
.kid-note { margin: 8px 0; }
.text.kid-off { opacity: 0.75; font-style: italic; }
.rbar .rmore { font-weight: 800; letter-spacing: 0.05em; }
.q-foot.legal { margin-top: -6px; }
.hint.legal { text-align: center; margin-top: 10px; }
.row.safety { margin-top: 12px; }
.row.wrap { flex-wrap: wrap; gap: 8px; }
.msg .rbar .rmore { color: var(--card-ink); font-size: 18px; }
.gate-terms .link { display: inline; padding: 0; margin: 0; min-height: 0; height: auto; vertical-align: baseline; font: inherit; color: var(--accent); text-decoration: underline; }

/* 1.93: email on profiles */
.lrow.nudge { box-shadow: inset 3px 0 0 #e8d6a6; }
.lrow.nudge .lr-t b { color: #e8d6a6; }
.email-nudge { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1.5px dashed #e8d6a6; display: grid; gap: 10px; }
.email-nudge p { margin: 0; }
.otp-input { font-size: 24px; letter-spacing: 0.3em; text-align: center; font-variant-numeric: tabular-nums; }

/* 1.94 Lowza: the logo on the home screen and in the rename note */
.q-top h1.brand { line-height: 0; }
.q-top h1.brand img { display: block; height: 30px; width: auto; }
/* 1.112: "Got a code?" for everyone, right under your games; roomier on a first visit (name, hint), compact after. */
.home .home-tag { margin: -2px 0 14px; color: var(--muted); font-size: 15px; line-height: 1.4; }
.home .join-panel { padding: 16px; margin: 0 0 6px; border-radius: 18px; background: var(--surface); border: 1.5px solid var(--line); }
.home .join-panel h2 { margin: 0 0 4px; font: 800 19px/1.25 var(--font-display); text-transform: none; letter-spacing: 0; color: var(--paper); }
.home .join-panel .hint { margin: 0 0 12px; }
.home .join-panel .list { margin: 0 0 8px; }
.home .fj-row { display: flex; gap: 8px; }
.home .fj-row .input { flex: 1; min-width: 0; letter-spacing: 0.18em; text-transform: uppercase; }
.home .fj-row .btn { flex: none; padding-inline: 22px; }
.home .how-btn { margin-top: 12px; }
.home .daily-card { margin-bottom: 12px; }
.home .daily-top { margin-bottom: 12px; box-shadow: inset 0 0 0 1.5px var(--accent); } /* 1.112: today's Daily, until it's played */
.home .join-panel.compact { padding: 12px 14px; }
.home .join-panel.compact h2 { font-size: 16px; margin-bottom: 8px; }
.sheet .wn-logo { display: block; width: min(260px, 70%); height: auto; margin: 4px auto 14px; }

/* 1.99: moving to the new address */
.move-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.move-banner .mb-t { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; }
.move-banner .mb-t small { color: var(--muted); font-size: 13px; line-height: 1.35; }
.move-banner .mb-btns { display: flex; align-items: center; gap: 14px; }
.move-banner.done { background: var(--surface); border-color: var(--line); }
.mv-steps { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 8px; }
.mv-step { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.mv-step:last-child { border-bottom: 0; }
.mv-step .lr-t { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.mv-step .lr-t, .mv-step .lr-t b, .mv-step .lr-t small { white-space: normal; overflow: visible; text-overflow: clip; min-width: 0; }
.mv-step .lr-t small { color: var(--muted); font-size: 13px; line-height: 1.35; }
.mv-ck { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-strong); display: grid; place-items: center; font: 800 14px/1 var(--font-body); }
.mv-step.done .mv-ck { background: var(--accent); border-color: var(--accent); color: #1b1300; }

/* 1.116: soft inset. Panels on the table (opponents, the deck and discard mat, home panels, the coin tray, coin rows) are
   pressed into the felt (a darker fill and an inner shadow) instead of outlined. The turn highlight is a ring inside. */
.opp, .mat, .panel, .home .join-panel, .me-masks, .mask-row {
  border-color: transparent;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
.opp.turn { border-color: transparent; box-shadow: inset 0 0 0 2px var(--accent), inset 0 2px 5px rgba(0, 0, 0, 0.45); }

/* 1.118: calmer Party. Your row stays on one line (smaller coins, a long name shortens), the bounty pill gets its own
   room above the pile labels, and opponents' coins are smaller so their panel reads as cards first. */
.me-head { align-items: center; }
.me-head > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.me-masks { padding: 2px 6px; gap: 3px; min-height: 24px; margin: 0; }
.me-masks .mchip { --s: 19px; }
.me-masks .mchip.tails::after { content: none; }
.bounty-pill { top: -10px; font-size: 12px; padding: 2px 10px; }
html .mat.has-bounty { padding-top: 26px; } /* html: beats html.big-cards .mat's padding, which let the pill cover the labels */
.opp-masks .mchip.sm { --s: 14px; }

/* 1.119: feedback sheet and the admin list */
.fb-kinds { gap: 6px; }
.fb-text { min-height: 120px; resize: vertical; font: inherit; line-height: 1.4; padding: 12px; }
.fb-list li { display: grid; gap: 6px; align-items: start; }
.fb-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fb-msg { margin: 0; white-space: pre-wrap; color: var(--paper); }
.fb-ua { margin: 0; font-size: 11px; word-break: break-word; }
.fb-list .btn { justify-self: start; }

/* 1.120: chips on the table. The goal (left) and the round coins in play (right) get their own lanes beside the piles. */
html .mat.has-chips { padding-left: 64px; padding-right: 64px; gap: clamp(28px, 8vw, 48px); }
.mat.has-chips .pile .card { --w: min(14.5vw, 9dvh, 70px); }
.mat.has-chips .pile .lbl { font-size: 11px; letter-spacing: 0.04em; }
.tchips { position: absolute; top: 50%; transform: translateY(-40%); width: 58px; display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tchips.l { left: 6px; }
.tchips.r { right: 6px; }
.tchips .cap { font: 800 9px/1.1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.tchips .sub { font: 700 10px/1.2 var(--font-body); color: var(--paper); text-align: center; max-width: 60px; overflow-wrap: anywhere; }
.bchip { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; transform: rotate(-8deg);
  background: radial-gradient(circle closest-side, var(--paper) 0 66%, var(--c-mid) 66% 72%, var(--paper) 72% 80%, var(--c-mid) 80%);
  box-shadow: 0 3px 0 #a87412, 0 6px 10px rgba(0, 0, 0, 0.45); font: 700 15px/1 var(--font-card); color: var(--num-ink); letter-spacing: -0.04em; }
.bchip.won { background: radial-gradient(circle closest-side, var(--paper) 0 66%, var(--good) 66% 72%, var(--paper) 72% 80%, var(--good) 80%); box-shadow: 0 3px 0 color-mix(in srgb, var(--good) 60%, #000), 0 6px 10px rgba(0, 0, 0, 0.45); color: var(--good); font-size: 18px; }
.cstack { position: relative; width: 46px; height: 46px; }
.cstack .mchip { --s: 34px; position: absolute; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35), 0 6px 10px rgba(0, 0, 0, 0.45); }
.cstack.n1 .mchip { left: 6px; top: 6px; transform: rotate(-6deg); }
.cstack .mchip:nth-child(1) { left: 0; top: 10px; transform: rotate(-10deg); }
.cstack .mchip:nth-child(2) { left: 12px; top: 2px; transform: rotate(7deg); }
.cstack .mchip:nth-child(3) { left: 5px; top: -6px; transform: rotate(-3deg); }
.cstack .mchip.onyou { box-shadow: 0 0 0 2px var(--accent), 0 3px 0 rgba(0, 0, 0, 0.35), 0 6px 10px rgba(0, 0, 0, 0.45); }
.tchips .sub.you { color: var(--accent); }
/* 1.121: the round bonus sheet */
.bonus-sheet { display: flex; gap: 16px; align-items: center; margin: 4px 0 16px; }
.bonus-sheet .bchip { flex: none; width: 64px; height: 64px; font-size: 22px; }
.bonus-sheet h3 { margin: 0 0 4px; }
.bonus-sheet p { margin: 0 0 4px; }
/* 1.121: your row. The name shortens with "…"; the score and Total never do. */
.me-head .mh-who { display: flex; min-width: 0; overflow: hidden; white-space: nowrap; }
.me-head .mh-nm { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.me-head .mh-sc { flex: none; }
.me-head .mh-s { display: none; }
.me-head > span:last-child { flex: none; white-space: nowrap; }
@media (max-width: 430px) { .me-head:has(.me-masks) .mh-l { display: none; } .me-head:has(.me-masks) .mh-s { display: inline; } }
/* 1.123: sideways layouts give the mat a narrow column, so the bonus and in-play chips sit in a row under the piles
   instead of in side lanes (they covered DECK and DISCARD). */
@media (orientation: landscape) and (max-height: 500px), (orientation: landscape) and (min-width: 1000px) and (max-height: 999px), (min-width: 700px) and (min-aspect-ratio: 21/20) and (max-height: 999px) {
  html .mat.has-chips { flex-wrap: wrap; padding: 8px 8px 10px; row-gap: 6px; }
  .mat.has-chips .tchips { position: static; transform: none; width: auto; flex-direction: row; align-items: center; gap: 6px; order: 9; }
  .mat.has-chips .tchips .sub { max-width: 110px; text-align: left; }
  .mat.has-chips .tchips.l { margin-right: auto; }
  .mat.has-chips .tchips .cstack { width: 44px; height: 40px; }
  .mat.has-chips .tchips .bchip { width: 36px; height: 36px; font-size: 13px; }
}
/* 1.123: phones sideways. The dock's column is narrow: let its buttons wrap instead of spilling over your grid
   (the "🕑 2 missed" button landed on the cards). */
@media (orientation: landscape) and (max-height: 500px) {
  .dock { flex-wrap: wrap; justify-content: center; row-gap: 4px; min-width: 0; }
  .dock .btn { white-space: nowrap; }
}

/* 1.124: coin rarity. Common coins are plain; Rare get a silver ring, Legendary a gold ring with a slow shine. */
.mchip.r-rare { outline: max(1.5px, calc(var(--s) * 0.07)) solid #d6dbe4; outline-offset: max(1px, calc(var(--s) * 0.04)); }
.mchip.r-legendary { outline: max(1.5px, calc(var(--s) * 0.08)) solid #f2c14e; outline-offset: max(1px, calc(var(--s) * 0.04)); animation: legend-glow 2.8s ease-in-out infinite; }
@keyframes legend-glow { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 calc(var(--s) * 0.18) rgba(242, 193, 78, 0.75)); } }
@media (prefers-reduced-motion: reduce) { .mchip.r-legendary { animation: none; } }
.mchip.sm.r-rare, .mchip.sm.r-legendary, .opp-masks .mchip.r-rare, .opp-masks .mchip.r-legendary { outline-width: 1px; outline-offset: 1px; }
.rtag { display: inline-block; font: 800 10px/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; }
.rtag.rare { background: #d6dbe4; color: #1b1a22; }
.rtag.legendary { background: #f2c14e; color: #1b1a22; }
.rtag.pair { background: var(--c-low); color: var(--face-ink); }
.rtag.core { background: rgba(54, 187, 137, 0.22); color: #4ade80; border: 1px solid rgba(74, 222, 128, 0.4); }
.mask-card.tier-legendary { border-color: #f2c14e; box-shadow: 0 0 0 1px #f2c14e, 0 0 16px rgba(242, 193, 78, 0.35); }
.mask-card.tier-rare { border-color: #d6dbe4; }
.round-info.p8 .ri-ic { font-weight: 800; }
.rt-rare { color: #d6dbe4; } .rt-leg { color: #f2c14e; }
.mask-row .rtag { margin-left: 6px; vertical-align: 2px; }

/* 1.127 (#24): dropdowns draw themselves. iOS in light mode painted its own light background behind our cream text;
   now the control is solid, dark-themed and has our own arrow in every mode, and the open list matches on desktop. */
select.input {
  -webkit-appearance: none; appearance: none; color-scheme: dark;
  background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7f2e6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px 18px;
  background-color: #23252b; color: var(--paper); padding-right: 44px; cursor: pointer;
}
select.input option { background: #23252b; color: #f7f2e6; }

/* 1.128: membership test. A small "+" disc by the name: gold for Plus, silver for Basic. */
.mem-b { display: inline-grid; place-items: center; flex: none; width: 15px; height: 15px; margin-left: 5px; border-radius: 50%; vertical-align: 1px;
  font: 900 12px/1 var(--font-body); color: #1b1a22; background: #f2c14e; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.25); }
.mem-b.basic { background: #d6dbe4; }
.mem-b.lg { width: 26px; height: 26px; font-size: 18px; margin: 0; }
.opp-head .mem-b { width: 13px; height: 13px; font-size: 10px; margin-left: 3px; }
.back-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; margin: 8px 0 16px; }
.back-pick .bp { display: grid; justify-items: center; gap: 2px; padding: 4px; border: 2px solid transparent; border-radius: 12px; background: none; color: var(--muted); font: 700 11px var(--font-body); cursor: pointer; }
.back-pick .bp.on { border-color: var(--accent); }
.plus-perks li:not(.on) { opacity: 0.6; }
.back-pick .rand-tile { width: 52px; aspect-ratio: 5 / 7; border-radius: 6px; display: grid; place-items: center; font-size: 24px; background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--line); }

/* 1.134 Plus: your stats and the Daily archive */
.st-chart { margin: 6px 0 12px; }
.st-chart svg { display: block; width: 100%; height: auto; }
.st-chart .st-axis { stroke: currentColor; opacity: .25; stroke-width: 1; }
.st-chart figcaption { display: flex; justify-content: space-between; font-size: 12px; opacity: .65; margin-top: 4px; }
.st-spark { display: block; width: 100%; height: 50px; margin-top: 6px; }
.st-range { margin-top: 2px; }
.arch-list .lrow-side { font-weight: 700; opacity: .8; }
.me-row .lr-t b .mem-b { margin-left: 4px; vertical-align: 2px; }
.pf-hub { margin-bottom: 14px; }
.pf-hub .rchips { display: contents; }
/* 1.135: what's left before Diamond */
.rating-big .need { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13px; text-align: left; display: grid; gap: 4px; opacity: .85; }

/* 1.136 Play someone new */
.m-you { margin: 10px 0 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.m-card { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: var(--panel-2, rgba(255,255,255,.05)); border: 0; border-radius: 18px; padding: 16px; margin: 10px 0; color: inherit; font: inherit; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -2px 6px rgba(0,0,0,.25); }
.m-card .m-ic { font-size: 28px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: rgba(245,189,79,.14); flex: none; }
.m-card .m-t { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.m-card .m-t b { font-size: 17px; }
.m-card .m-t small { opacity: .75; line-height: 1.35; }
.m-card.quiet { opacity: .72; }
.m-rules { margin: 12px 0 4px; padding-left: 18px; font-size: 13px; opacity: .7; line-height: 1.5; }
.m-radar { position: relative; width: 150px; height: 150px; margin: 18px auto 8px; display: grid; place-items: center; }
.m-radar span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(245,189,79,.55); animation: m-ping 2.4s ease-out infinite; opacity: 0; }
.m-radar span:nth-child(2) { animation-delay: .8s; } .m-radar span:nth-child(3) { animation-delay: 1.6s; }
.m-radar i { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.06); font-style: normal; }
@keyframes m-ping { 0% { transform: scale(.35); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .m-radar span { animation: none; opacity: .3; } }
.m-status { text-align: center; margin: 4px 0 14px; line-height: 1.5; }
.m-wait { text-align: center; }
.m-wait h2 { margin: 4px 0 6px; }
.m-found { text-align: center; padding: 6px 0 2px; animation: m-pop .35s ease-out; }
.m-found .m-vs { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 16px 0 10px; }
.m-found .m-vs > div { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 96px; }
.m-found .m-vs b { font-size: 17px; } .m-found .m-vs small { opacity: .7; }
.m-found .m-x { font-family: 'Unbounded', sans-serif; font-weight: 900; font-size: 22px; color: var(--accent, #f5bd4f); }
.m-found .m-av { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.06); }
@keyframes m-pop { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
.m-clock { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 800; font-size: 13px; padding: 2px 8px; border-radius: 99px; background: rgba(255,255,255,.08); white-space: nowrap; }
.m-clock.mine { background: rgba(245,189,79,.18); }
.m-clock.low { background: #c8372d; color: #fff; animation: m-blink 1s steps(2) infinite; }
@keyframes m-blink { 50% { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .m-clock.low { animation: none; } }
/* 1.138: the Daily share card preview */
.dl-card { display: block; width: min(100%, 300px); aspect-ratio: 4 / 5; margin: 12px auto; border-radius: 18px; box-shadow: 0 10px 28px rgba(0,0,0,.35); }
.dl-card.ph { background: #131313; }
/* 1.139: guests at game over */
.guest-save { display: grid; gap: 6px; margin: 12px 0 4px; padding: 14px; border-radius: 16px; background: rgba(245,189,79,.1); text-align: left; }
.guest-save span { font-size: 14px; opacity: .8; line-height: 1.4; }
.guest-save .btn { justify-self: start; margin-top: 4px; }
.mtag.pouch { background: rgba(255,255,255,.08); color: inherit; opacity: .75; }

/* 1.140 UX pass (Apple-style review) */
/* #70 Larger Text: on iPhone the root size follows Settings › Display › Text Size; menus and sheets scale with it (the table doesn't). */
html { font: -apple-system-body; }
.sheet p, .sheet li { font-size: min(24px, max(15px, calc(1rem - 2px))); }
.hint { font-size: min(22px, max(15px, calc(1rem - 2px))); }
.lr-t b { font-size: min(24px, max(16px, calc(1rem - 1px))); }
.lr-t small { font-size: min(20px, max(13px, calc(1rem - 4px))); }
/* #66 sheets: a grabber, and a smaller title than the main screens */
.scrim:not(.side) .sheet { padding-top: 22px; position: relative; }
.scrim:not(.side) .sheet::before { content: ""; position: absolute; top: 8px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: var(--line-strong); opacity: .7; }
.sheet-head h2 { font-size: 22px; }
/* #68 destructive actions read as destructive */
.link.danger { color: var(--bad); }
.menu-code .link { min-height: var(--tap); padding: 10px 8px; }
/* #71 the games button says what it is */
.games-btn { width: auto !important; padding: 0 12px; border-radius: 999px; gap: 6px; display: inline-flex; align-items: center; font-weight: 800; font-size: 13px; }
.games-btn .gb-l { line-height: 1; }
.games-btn .badge { position: static; margin-left: 2px; }
@media (max-width: 360px) { .games-btn .gb-l { display: none; } .games-btn { padding: 0 9px; } }
/* #67 the Diamond checklist */
.dia-chk { margin: 4px 0 0; padding-left: 18px; font-size: 14px; }
.rating-big .need li { display: flex; gap: 8px; align-items: center; }
.rating-big .need .ck { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-strong); display: inline-grid; place-items: center; font-size: 12px; font-weight: 900; flex: none; }
.rating-big .need li.ok .ck { background: var(--c-low, #2e8b7a); border-color: transparent; color: #fff; }
.rating-big .need small { opacity: .7; }
/* #72 the profile name looks editable */
#pf-name { background: var(--surface-2); border-radius: 10px; padding: 8px 10px; text-align: right; }

/* 1.141 (#65): tabs on home, like an iPhone app (Play · Daily · You). The app always opens on Play. */
.home.tabbed { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: center; gap: 0;
  padding: 7px 8px calc(8px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--felt-0) 88%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--line); }
.tabbar .tab { position: relative; flex: 1; max-width: 160px; min-height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: none; border: 0; color: var(--muted); font: 700 11px/1 var(--font-body); cursor: pointer; }
.tabbar .tab svg { width: 26px; height: 26px; }
.tabbar .tab.on { color: var(--accent, #f5bd4f); }
.tabbar .tab .badge { position: absolute; top: 2px; left: calc(50% + 6px); right: auto; }
.tab-title { font: 30px/1.1 var(--font-display); margin: 18px 4px 14px; }
.tab-note { margin: 12px 4px 0; }
/* 1.141 (#66): coin break tabs */
.brk-tabs { position: sticky; top: -18px; z-index: 2; }
.brk-tabs button { font-size: 13px; padding-inline: 4px; }
.brk-panel { display: flex; flex-direction: column; gap: 12px; min-height: 120px; }
/* 1.142: the tab bar never moves. On home the page is fixed and the tab's content scrolls inside it, so Safari's
   toolbar doesn't collapse and nothing bounces the bar; it hides while the keyboard is up. */
html.tabs-on, html.tabs-on body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.tabs-on #app { height: 100dvh; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; box-sizing: border-box; }
html.typing .tabbar { display: none; }
.tabbar { transform: translateZ(0); }
/* 1.142: other screens. Wide windows (iPad, a computer's browser) get the tabs as a floating bar at the top, like
   iPadOS and the Mac, instead of a strip along the bottom of a big screen. Short landscape phones get a slimmer bar. */
@media (min-width: 768px) and (min-height: 560px) {
  .tabbar { top: calc(10px + env(safe-area-inset-top, 0px)); bottom: auto; left: 50%; right: auto; transform: translateX(-50%); width: auto; gap: 4px;
    padding: 5px; border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
  .tabbar .tab { flex-direction: row; gap: 8px; min-height: 40px; max-width: none; padding: 0 18px; border-radius: 999px; font-size: 14px; }
  .tabbar .tab svg { width: 20px; height: 20px; }
  .tabbar .tab.on { background: color-mix(in srgb, var(--accent) 16%, transparent); }
  .tabbar .tab .badge { position: static; margin-left: 2px; }
  .home.tabbed { padding-top: 84px; padding-bottom: 40px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .tabbar { padding-top: 4px; }
  .tabbar .tab { flex-direction: row; gap: 7px; min-height: 40px; font-size: 13px; }
  .tabbar .tab svg { width: 20px; height: 20px; }
  .tabbar .tab .badge { position: static; }
  .home.tabbed { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}
/* the keyboard only hides the bar on touch screens */
@media (pointer: fine) { html.typing .tabbar { display: flex; } }
/* 1.143: the tab bar was a tall near-black slab (the darkest felt plus extra padding under the safe area). Now it's
   iOS-sized (49pt of tabs, then just the home-indicator space) in the panel color, see-through with a blur, so the
   table color carries down to the bottom edge. */
.tabbar { background: rgba(30, 32, 38, 0.78); -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px);
  border-top: 0.5px solid color-mix(in srgb, var(--line) 70%, transparent); padding: 3px 8px max(4px, env(safe-area-inset-bottom, 0px)); }
.tabbar .tab { min-height: 49px; gap: 2px; font-size: 10.5px; }
.tabbar .tab svg { width: 25px; height: 25px; }
.home.tabbed { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 768px) and (min-height: 560px) {
  .tabbar { padding: 5px; border: 1px solid var(--line); }
  .tabbar .tab { min-height: 40px; font-size: 14px; }
  .home.tabbed { padding-bottom: 40px; }
}
@media (max-height: 500px) and (orientation: landscape) { .tabbar .tab { min-height: 40px; font-size: 13px; } .home.tabbed { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); } }
/* 1.144: on an iPhone home-screen app the bar floated about 47pt above the bottom edge with a black strip under it.
   iOS shortens a 100%-tall page by the status bar height when the page is full screen, and fixed elements followed.
   The page is now pinned to all four screen edges instead of sized by height, the scroller fills it, and the bar
   carries its color past its bottom edge so no gap can show. The bar is also back to a near-page color with a
   hairline, like iOS dark mode, instead of a lighter gray box. */
html.tabs-on, html.tabs-on body { height: auto; }
html.tabs-on body { position: fixed; inset: 0; overflow: hidden; }
html.tabs-on #app { position: absolute; inset: 0; height: auto; }
.tabbar { background: rgba(18, 19, 24, 0.86); border-top: 0.5px solid rgba(255, 255, 255, 0.10); }
.tabbar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 120px; background: inherit; pointer-events: none; }
@media (min-width: 768px) and (min-height: 560px) { .tabbar::after { display: none; } .tabbar { border: 1px solid var(--line); } }
/* 1.146: the iPhone home-screen web view can end above the home indicator (see pwaGap in app.js). Drawing below
   it gets clipped, so the bar sits on the web view's bottom edge and skips the home-indicator padding there. */
html.pwa-short .tabbar { padding-bottom: 6px; }
html.pwa-short .home.tabbed { padding-bottom: 84px; }
html.pwa-short #app { padding-bottom: 0; }

/* 1.164 Challenges and Post-game friends row */
.chal-banner { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); width: min(calc(100vw - 24px), 440px); z-index: 999; background: var(--panel, #1a2e26); border: 1.5px solid var(--accent, #f5bd4f); border-radius: 14px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.6); animation: banner-drop 200ms var(--ease-out); }
.chal-banner .chal-txt { font-size: 14px; color: var(--paper); line-height: 1.3; }
.chal-banner .chal-acts { display: flex; gap: 6px; flex-shrink: 0; }
@keyframes banner-drop { from { transform: translate(-50%, -20px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.post-friends-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0; }

/* 1.189: the lobby's Deal button stays pinned while the players and settings scroll; the settings fold into one row. */
.lobby-cta { position: sticky; bottom: 0; z-index: 2; padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--felt-0) 70%, transparent); }
.lrow.static { cursor: default; }
.lrow.static:active { transform: none; }

/* 1.189: icons that replace emoji sit in the text line. Inline in headings, hints, segmented buttons and tags; sized for their slot elsewhere. */
h2 > svg.i, h3 > svg.i, .hint > svg.i, .bar .sub > svg.i, .seg button > svg.i, .party-tag > svg.i, .bb-title > svg.i, .brk-head span > svg.i, .ps-top > svg.i, .lr-t b > svg.i { width: 1em; height: 1em; vertical-align: -0.125em; margin-right: 0.3em; }
.party-tag > svg.i, .ps-top > svg.i { margin-right: 0; }
.ri-ic svg.i { width: 18px; height: 18px; }
.m-card .m-ic svg.i { width: 26px; height: 26px; }
.rand-tile svg.i { width: 24px; height: 24px; }
/* 1.189: display headings set slightly tighter. Codes and numerals keep their wide tracking. */
.wordmark h1, .q-top h1, .tab-title, .sheet h2, .announce h2, .room-title, #reveal .rv-title, .pass-cover .pc-name { letter-spacing: -0.02em; line-height: 1.05; }
.home .join-panel h2 { letter-spacing: -0.01em; line-height: 1.15; }

/* 1.222 Disco Ball sparkle & table shimmer */
.disco-sparkle { position: absolute; pointer-events: none; z-index: 85; border-radius: 50%; transform: translate(-50%, -50%) scale(0); background: radial-gradient(circle, #fff 20%, rgba(255,230,255,.8) 45%, rgba(180,225,255,.3) 70%, transparent 85%); filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 10px rgba(180,220,255,.7)); animation: d-sparkle 800ms cubic-bezier(.2,.8,.3,1) forwards; }
.disco-sparkle::before, .disco-sparkle::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: linear-gradient(90deg, transparent, #fff 50%, transparent); }
.disco-sparkle::before { width: 140%; height: 2px; }
.disco-sparkle::after { width: 2px; height: 140%; }
@keyframes d-sparkle { 0% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; } 35% { transform: translate(-50%, -50%) scale(1.1) rotate(45deg); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(.2) rotate(135deg); opacity: 0; } }
.table-shimmer { position: absolute; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; border-radius: inherit; }
.table-shimmer::after { content: ''; position: absolute; top: -50%; left: -60%; width: 220%; height: 200%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.18) 48%, rgba(220,240,255,.28) 50%, rgba(255,220,255,.18) 52%, transparent 60%); animation: t-shimmer 1.2s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes t-shimmer { 0% { transform: translateX(-60%) rotate(15deg); opacity: 0; } 20%, 80% { opacity: 1; } 100% { transform: translateX(60%) rotate(15deg); opacity: 0; } }