/* ---------- fonts: self-hosted, SIL OFL (assets/fonts/README.md). Nunito = every text and number (one-width digits);
   Lilita One = titles, buttons, big moments (never a number that changes). Burmese falls back to the device's fonts. */
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url(assets/fonts/nunito-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url(assets/fonts/nunito-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lilita One'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(assets/fonts/lilita-one-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Burmese: Padauk (SIL, OFL) — loads only when a Burmese letter is on screen (names, chat), and shows real Unicode
   Burmese also on phones whose own font is still Zawgyi. */
@font-face { font-family: 'Padauk'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(assets/fonts/padauk-myanmar-400.woff2) format('woff2'); unicode-range: U+1000-109F, U+A9E0-A9FE, U+AA60-AA7F; }
@font-face { font-family: 'Padauk'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(assets/fonts/padauk-myanmar-700.woff2) format('woff2'); unicode-range: U+1000-109F, U+A9E0-A9FE, U+AA60-AA7F; }
/* (Wave 3 A9) the flags players represent: Twemoji Country Flags (flag art CC BY 4.0, Twemoji / Twitter; assets/fonts/
   README.md) — only the regional-indicator letters, so it loads only when a flag is on screen. */
@font-face { font-family: 'Flags'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(assets/fonts/twemoji-country-flags.woff2) format('woff2'); unicode-range: U+1F1E6-1F1FF; }
@font-face { font-family: 'Lilita One'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(assets/fonts/lilita-one-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* The look (docs/LOOK.md): "Lacquer & jade" — a red-lacquer card room, gold-leaf frames and headings, a jade felt
     under a spotlight, glossy 3-D buttons with outlined words. Vibrant, but every word and number stays crisp.
     (9 Nov 2026, Nine Cities Online) The menus wear the logo's colours: the app icon's night with its faint gold grid,
     panels a shade deeper, ivory words, and the little city's jade and coral for the accents. The tables keep theirs. */
  --font-ui: 'Flags', 'Nunito', 'Padauk', system-ui, -apple-system, 'Segoe UI', 'Noto Sans Myanmar', 'Myanmar Text', sans-serif;
  --font-display: 'Flags', 'Lilita One', 'Nunito', 'Padauk', system-ui, 'Segoe UI', 'Noto Sans Myanmar', 'Myanmar Text', sans-serif;
  /* the banker's crown, drawn (an emoji looks different on every phone) — used as a mask in the text's colour */
  --crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M1.5 5 6.6 9.6 12 1.2 17.4 9.6 22.5 5 20.4 15.6H3.6Z'/%3E%3Crect x='3.6' y='16.6' width='16.8' height='2.6' rx='1.1'/%3E%3C/svg%3E");
  --gold: #ffd040;                  /* gold text and accents */
  --gold-hi: #fff4c2;
  --gold-dark: #b8740c;             /* a gold button's lip */
  --metal: linear-gradient(180deg, #fff7d1 0%, #ffe27c 26%, #ffc53c 54%, #e99c17 80%, #b8700c 100%);
  --metal-edge: linear-gradient(135deg, #fff2b8 0%, #e3a425 28%, #fff0a8 50%, #b9770f 74%, #ffe08a 100%);
  --red: #ff4d5e;
  --green: #22c56f;
  --blue: #2f95f5;
  --purple: #9b5cff;
  --win: #6dffad;
  --lose: #ff7b86;
  --ink: #ffffff;
  --ink-2: #fff8ec;                 /* ivory, the stamp's paper */
  --muted: #e8c8b4;
  --room: #12050a;                  /* the darkest edge of the room */
  --lamp: 255, 226, 150;            /* the spotlight over the table (r, g, b) */
  --night-1: #1c0710; --night-2: #2a0b16; --night-3: #3e1120; /* the app icon's night */
  --jade-1: #3fd09e; --jade-2: #13926a; --jade-3: #0b5a41;      /* the city's plate */
  --coral-1: #ff9a7a; --coral-2: #e8553a; --coral-3: #8f2c1c;   /* the city's coral blocks */
  --panel: rgba(56, 19, 32, 0.96);  /* night lacquer */
  --panel-solid: #2f101a;
  --panel-hi: #421b29;              /* a raised row on a panel */
  --panel-lo: rgba(23, 9, 13, 0.62);  /* sunk: inputs, tracks */
  --line: rgba(255, 214, 120, 0.26);/* a gold hairline */
  --line-soft: rgba(255, 255, 255, 0.12);
  --radius-s: 10px; --radius-m: 14px; --radius-l: 20px;
  --shadow-1: 0 3px 10px rgba(14, 2, 6, 0.45);
  --shadow-2: 0 16px 44px rgba(10, 1, 4, 0.72);
  --focus: 0 0 0 3px rgba(255, 208, 64, 0.6);
  /* the app icon's faint gold grid (unbroken diagonal lines) — behind the menus */
  --grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 0 40 40M40 0 0 40' fill='none' stroke='%23ffd040' stroke-opacity='.075' stroke-width='1.1'/%3E%3C/svg%3E");
  /* a faint gold diamond lattice, like a casino carpet — in the room around the table */
  --lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cpath d='M23 1.5 44.5 23 23 44.5 1.5 23Z' fill='none' stroke='%23ffd36b' stroke-opacity='.075' stroke-width='1.2'/%3E%3Ccircle cx='23' cy='23' r='1.6' fill='%23ffd36b' fill-opacity='.08'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* A dark backstop behind everything, so no phone ever shows a white strip below the table (mobile
   browser chrome / safe areas can leave the body short of the physical screen). */
html { height: 100%; background: var(--room); }
body {
  margin: 0; overflow: hidden;
  height: 100%; height: 100dvh; min-height: 100%; /* 100dvh fills the real visible area on mobile (URL bar, etc.) */
  /* off the table (menus, login): the app icon's night — the stamp's wine sky glowing from above, the city's gold
     lights rising from below, the gold grid */
  background:
    radial-gradient(85% 60% at 50% -12%, rgba(122, 36, 67, 0.55), rgba(122, 36, 67, 0) 64%),
    radial-gradient(70% 50% at 50% 112%, rgba(255, 197, 60, 0.13), rgba(255, 197, 60, 0) 70%),
    var(--grid),
    radial-gradient(circle at 50% 34%, var(--night-3) 0%, var(--night-2) 38%, var(--night-1) 70%, var(--room) 100%);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 600;
  user-select: none;
}
/* titles speak in the game's display face */
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.01em; font-synthesis: none; }
/* big words wear a dark outline (the stroke is painted under the letters, so they keep their shape) */
.help-card h2, .list-head h2, .choice-card b, .phase .ph-main, .callout, .float, .final-card h2, .tc-name, .rc-head b, .pf-name {
  -webkit-text-stroke: 4px rgba(34, 4, 12, 0.85); paint-order: stroke fill; }
.choice-card.host b { -webkit-text-stroke: 0; }
.hidden { display: none !important; }
.screen { position: fixed; inset: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }

#rotate { display: none; }
/* (Q6, 10 Nov) phones held upright: the login, the menus and every table work upright now — nothing asks to turn the
   phone any more (#rotate stays hidden) */

/* ---------- buttons & inputs ---------- */
/* A game button: glossy and chunky, with a lip it presses down into. The colour comes from five variables, so every
   variant (gold · green · blue · red/danger · purple) is the same object in another paint. Gold is the default. */
.btn { --b1: #fff1a8; --b2: #ffc23d; --b3: #e39a1c; --lip: #9a5a0c; --txt: #3a1a00; --tsh: rgba(255, 246, 210, 0.55);
  position: relative; isolation: isolate; border: 0; border-radius: 14px; min-height: 2.75rem; padding: 0.5em 1.35em; font-synthesis: none; touch-action: manipulation;
  font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; letter-spacing: 0.02em; line-height: 1.1;
  color: var(--txt); text-shadow: 0 1px 0 var(--tsh);
  background: linear-gradient(180deg, var(--b1) 0%, var(--b2) 50%, var(--b3) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 -3px 0 rgba(0, 0, 0, 0.12), 0 4px 0 var(--lip), 0 7px 14px rgba(14, 1, 5, 0.4);
  cursor: pointer; transition: transform 0.25s cubic-bezier(.3, .7, .4, 1.5), box-shadow 0.25s, filter 0.15s; }
/* the gloss: a soft highlight across the top half */
.btn::before { content: ''; position: absolute; z-index: -1; left: 6px; right: 6px; top: 3px; height: 46%; border-radius: 10px 10px 50% 50% / 10px 10px 14px 14px;
  background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.04)); pointer-events: none; }
.btn:hover:not(:disabled) { filter: brightness(1.07) saturate(1.06); }
.btn:active:not(:disabled) { transform: translateY(3px) scale(1.02, 0.96); transition-duration: 40ms;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.12), 0 1px 0 var(--lip), 0 2px 5px rgba(14, 1, 5, 0.35); }
.btn:disabled { filter: grayscale(0.9) brightness(0.72); cursor: default; }
.btn.small { min-height: 2.3rem; padding: 0.35em 1em; font-size: 0.95rem; border-radius: 12px; }
.btn.tiny { min-height: 1.85rem; padding: 0.15em 0.6em; font-size: 0.82rem; border-radius: 10px; }
/* inline SVG icons (index.html sprite): crisp and identical on every device, sized by the text around them */
.ic { width: 1.2em; height: 1.2em; flex: none; vertical-align: -0.24em; fill: none; stroke: currentColor; stroke-width: 2.1;
  stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; }
/* a round icon button: as wide as it is tall */
.btn.icon-btn { padding: 0; min-width: 2.75rem; border-radius: 50%; }
.btn.small.icon-btn { min-width: 2.3rem; }
.btn.tiny.icon-btn { min-width: 1.85rem; }
.btn.icon-btn .ic { width: 1.3em; height: 1.3em; }
#btn-sound.off { color: #ff9ea0; }
/* (7 Nov — the owner: "make sure, full screen buttons are consistent") Full screen is one button to a player: in the screen's
   top right corner, the same round lacquer button, at the same size, on the login page, the home screen and at the table,
   on every screen size. The bars keep its corner free (their padding below); the installed app has no button (html.no-fs). */
:root { --fs-size: 2.3rem; --fs-font: 0.95rem; --fs-top: 0.45rem; --fs-right: 0.7rem; --fs-room: calc(2.3rem + 0.5rem); }
@media (max-height: 370px), (max-height: 500px) and (max-width: 700px) { :root { --fs-size: 2rem; --fs-font: 0.86rem; --fs-top: 0.22rem; --fs-right: 0.4rem; --fs-room: calc(2rem + 0.25rem); } }
@media (max-height: 340px), (max-width: 600px) { :root { --fs-size: 1.75rem; --fs-font: 0.8rem; --fs-top: 0.2rem; --fs-right: 0.35rem; --fs-room: calc(1.75rem + 0.2rem); } } /* (the smallest phones: eight buttons in the room seven had, or the top seat lands under the bar) */
html.no-fs { --fs-room: 0px; }
.btn.small.icon-btn.btn-fs { position: fixed; top: max(var(--fs-top), env(safe-area-inset-top)); right: max(var(--fs-right), env(safe-area-inset-right)); z-index: 6;
  min-width: var(--fs-size); min-height: var(--fs-size); padding: 0; font-size: var(--fs-font); color: #fff;
  background: linear-gradient(180deg, rgba(84, 29, 48, 0.95), rgba(40, 12, 22, 0.95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1.5px rgba(255, 214, 120, 0.5), 0 3px 8px rgba(0, 0, 0, 0.45); }
.btn.small.icon-btn.btn-fs:hover:not(:disabled) { background: linear-gradient(180deg, rgba(100, 36, 58, 0.96), rgba(50, 16, 28, 0.96)); }
.felt .table-top { padding-right: calc(max(var(--fs-right), env(safe-area-inset-right)) + var(--fs-room)); }
/* the home bar: its middle on the button's middle, its bell the button's size, and a face's frame clear of the button */
.home .home-top { padding-block: 0; min-height: calc(2 * var(--fs-top) + var(--fs-size)); padding-right: calc(max(var(--fs-right), env(safe-area-inset-right)) + var(--fs-room) + 0.35rem); }
.home .home-top .btn.small.icon-btn:not(.btn-fs) { min-width: var(--fs-size); min-height: var(--fs-size); font-size: var(--fs-font); }
/* keyboard users see where they are; mouse/touch users don't get a ring on every tap */
.btn:focus-visible, .login-tab:focus-visible, input:focus-visible, .cc-val:focus-visible, button:focus-visible { outline: none; box-shadow: var(--focus); }
/* dark, thin scrollbars in panels and lists (the default white bar glared on the dark theme) */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.22) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }
/* numbers that change (coins, bets, timers) keep their width, so nothing jitters as they count */
.money, .amt, .bet-amount, .timer-sec, .rc-coins, .lb-coins, .cc-val, .my-coins, #room-coins, .code { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
.list-search { width: 100%; box-sizing: border-box; min-height: 2.6rem; padding: 0.5rem 0.8rem; border-radius: var(--radius-m); border: 1.5px solid var(--line-soft);
  background: var(--panel-lo); color: inherit; font: inherit; font-weight: 700; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); }
/* the colours: white words with a dark edge on the strong colours, dark words on gold */
.btn.green { --b1: #7bf08a; --b2: #22a447; --b3: #138a35; --lip: #0b5a22; --txt: #fff; --tsh: #0b4a1c; }
/* (9 Nov) in the menus a go-button is the city's jade; at the tables green stays green (it must stand out on the felt) */
#screen-login .btn.green, #screen-rooms .btn.green { --b1: #7ff0c4; --b2: #1fb383; --b3: #10855f; --lip: #0a5a41; --tsh: #084532; }
.btn.blue { --b1: #8cc8ff; --b2: #2e7bea; --b3: #1c5bc4; --lip: #12408a; --txt: #fff; --tsh: #0e3570; }
.btn.red { --b1: #ff8a7a; --b2: #e5392f; --b3: #b8241e; --lip: #7a1010; --txt: #fff; --tsh: #6a0c0c; }
.btn.purple { --b1: #c9a2ff; --b2: #8b4bf0; --b3: #6a2fd0; --lip: #3e1683; --txt: #fff; --tsh: #3a1478; }
/* white words with a clean dark outline (stroke painted under the fill) — readable on every colour */
.btn.green, .btn.blue, .btn.red, .btn.purple, .btn.danger { -webkit-text-stroke: 0.2em var(--tsh); paint-order: stroke fill; text-shadow: 0 2px 0 var(--tsh); }
/* glass: the quiet choice next to a coloured one (Cancel, Copy, a tab bar's icon) */
.btn.ghost { background: rgba(255, 255, 255, 0.1); color: var(--ink); text-shadow: none; font-family: var(--font-ui); font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 6px rgba(14, 1, 5, 0.3); }
.btn.ghost::before { display: none; }
.btn.ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); filter: none; }
.btn.ghost:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
/* Danger hierarchy (placed after .ghost so a `ghost danger` combo still shows its colour):
   .danger = solid red, destroys or affects others (close a room, delete, block);
   .leave  = red outline, you are only exiting (leave seat / leave room / off the table). */
.btn.danger { --b1: #ff8a7a; --b2: #e5392f; --b3: #b8241e; --lip: #7a1010; --txt: #fff; --tsh: #6a0c0c;
  background: linear-gradient(180deg, var(--b1) 0%, var(--b2) 50%, var(--b3) 100%); font-family: var(--font-display); font-weight: 400;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 -3px 0 rgba(0, 0, 0, 0.12), 0 4px 0 var(--lip), 0 7px 14px rgba(14, 1, 5, 0.4); }
.btn.danger::before { display: block; }
.btn.leave { background: rgba(255, 77, 94, 0.14); color: #ffb3b9; text-shadow: none; font-family: var(--font-ui); font-weight: 800;
  box-shadow: inset 0 0 0 1.5px rgba(255, 92, 108, 0.7); }
.btn.leave::before { display: none; }
.btn.leave:hover:not(:disabled) { background: rgba(255, 77, 94, 0.24); filter: none; }
.btn.leave:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 0 0 1.5px rgba(255, 92, 108, 0.8); }
input { width: 100%; padding: 0.65em 1em; border-radius: var(--radius-m); border: 1.5px solid var(--line-soft);
  background: var(--panel-lo); color: var(--ink); font: inherit; font-weight: 700; outline: none; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.32); }
input:not([type=checkbox]):not([type=range]):not([type=radio]):not([type=file]) { min-height: 2.75rem; }
input:focus { border-color: var(--gold); }
input::placeholder, textarea::placeholder { color: rgba(255, 222, 204, 0.45); font-weight: 600; }

/* ---------- login ---------- */
/* scrollable + safe-centered so the whole card is always reachable on short landscape phones */
#screen-login { display: flex; align-items: safe center; justify-content: center; overflow-y: auto; padding-block: 0.8rem; }
/* slow golden rays behind the card — the lobby-light of a card room (static for "reduce motion") */
#screen-login::before { content: ''; position: fixed; left: 50%; top: 42%; width: 190vmax; height: 190vmax; translate: -50% -50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 197, 60, 0.055) 0deg 7deg, rgba(255, 197, 60, 0) 7deg 18deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.5) 40%, transparent 72%); mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.5) 40%, transparent 72%);
  animation: rays 90s linear infinite; }
@keyframes rays { to { rotate: 360deg; } }
/* A framed card: red lacquer inside a thin gold-leaf edge (the frame the game's sheets and dialogs share) */
.login-card { position: relative; width: min(400px, 92vw); display: grid; gap: 0.75rem; padding: 1.5rem 1.5rem 1.3rem; border-radius: 26px;
  border: 2px solid transparent;
  background: linear-gradient(180deg, rgba(74, 24, 42, 0.97), rgba(32, 9, 17, 0.98)) padding-box, var(--metal-edge) border-box;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 26px 64px rgba(14, 1, 5, 0.75), 0 0 90px rgba(255, 197, 60, 0.12);
  text-align: center; flex: none; margin: auto; }
/* short screens (landscape phones): a compact card that fits without being cut off */
@media (max-height: 560px) {
  .login-card { padding: 0.8rem 1.2rem 0.85rem; gap: 0.5rem; border-radius: 22px; }
  .login-card h1 { font-size: 1.75rem; }
  .brand .logo { width: 42px; }
  .login-card input { padding: 0.45em 0.9em; }
  .login-card input:not([type=checkbox]) { min-height: 2.5rem; }
  .login-card .hint { font-size: 0.8rem; line-height: 1.35; }
  .fld > span { display: none; } /* short landscape phones: rely on placeholders, keep the card compact */
  .login-card .sub { display: none; }
  .login-card .btn { min-height: 2.6rem; }
}
/* the wordmark (9 Nov, Nine Cities Online): "Nine Cities" in gold metal letters on a dark edge, and under it a small
   ivory "ONLINE" between two gold rules — the same lockup on the login card and in the home bar */
.wordmark { display: grid; justify-items: center; gap: 0.12em; margin: 0; line-height: 1; font-family: var(--font-display); font-weight: 400; white-space: nowrap; }
.wordmark b { font-weight: 400; letter-spacing: 0.02em; background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #6b3a02) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55)); }
.wordmark small { display: flex; align-items: center; gap: 0.6em; width: 100%; font-family: var(--font-ui); font-weight: 900; font-size: 0.32em;
  letter-spacing: 0.55em; text-transform: uppercase; color: var(--ink-2); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }
.wordmark small::before, .wordmark small::after { content: ''; flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 197, 60, 0), #ffc53c); }
.wordmark small::after { margin-left: -0.55em; transform: scaleX(-1); } /* (the letter-spacing leaves a gap after the N) */
.login-card h1 { font-size: 2.35rem; }
.brand { display: flex; align-items: center; justify-content: center; gap: 0.9rem; }
/* the logo: the stamp, turned a little as on the app icon */
.logo { width: 58px; height: auto; flex: none; rotate: -5deg; filter: drop-shadow(0 5px 8px rgba(10, 2, 5, 0.45)); }
.sub, .hint { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.4; }
.msg { margin: 0; color: var(--muted); font-size: 0.95rem; font-weight: 700; }
.msg:empty { display: none; } /* no gap under Play until there is something to say */
.msg.warn { color: #ffb8be; }
details summary { color: var(--muted); font-size: 0.9rem; font-weight: 700; cursor: pointer; text-align: left; }
details input { margin-top: 0.4rem; }
/* Log in / Create account toggle + labelled fields */
.login-tabs { display: flex; gap: 0.3rem; background: var(--panel-lo); padding: 0.3rem; border-radius: 16px; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.35); }
.login-tab { flex: 1; display: grid; gap: 0.05rem; justify-items: center; padding: 0.45em 0.5em; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font: inherit; font-family: var(--font-display); font-weight: 400; font-size: 1.02rem; line-height: 1.2; cursor: pointer; transition: background 0.15s, color 0.15s; }
.login-tab small { font-family: var(--font-ui); font-size: 0.78rem; font-weight: 700; opacity: 0.9; }
/* a saved session is logging itself back in: show just the logo + "Connecting…", not a form that flashes away */
.resuming-note { display: none; margin: 0.4rem 0; color: var(--muted); font-weight: 600; }
.resuming-note .net-dot { display: inline-block; vertical-align: middle; margin-right: 0.35rem; background: var(--gold); }
html.resuming #screen-login .resuming-note { display: block; }
html.resuming #screen-login .login-card > :not(.brand):not(.sub):not(.resuming-note) { display: none !important; }
.invite-note .ic { color: var(--gold); margin-right: 0.2em; }
.invite-note { margin: 0; padding: 0.6rem 0.8rem; border-radius: var(--radius-m); background: rgba(255, 208, 64, 0.14); border: 1px solid rgba(255, 208, 64, 0.5); font-size: 0.9rem; line-height: 1.4; text-align: left; }
.login-tab.active { background: linear-gradient(180deg, #fff0a6, #ffcb45 55%, #f2a01b); color: #3d2200; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 0 #a8650a, 0 4px 10px rgba(0, 0, 0, 0.35); }
.login-tab.active small { color: #5a3a00; }
.fld { display: grid; gap: 0.25rem; text-align: left; }
.fld > span { font-size: 0.8rem; color: var(--muted); font-weight: 800; padding-left: 0.25rem; }
.fld input { width: 100%; }
.reg-only { display: none; }
#screen-login.registering .reg-only { display: grid; }
/* (Q7, 10 Nov) guest first: a big Play as guest on top, then "or log in" and the form. Someone who has logged in on
   this device before (.returning): the form first, the guest button small at the bottom */
.guest-box { display: grid; gap: 0.45rem; }
.guest-btn { min-height: 3.2rem; font-size: 1.2rem; }
.guest-btn .ic { width: 1.1em; height: 1.1em; }
.or-line { display: flex; align-items: center; gap: 0.7rem; margin: 0.15rem 0 0; color: var(--muted); font-size: 0.78rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; }
.or-line::before, .or-line::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255, 197, 60, 0), rgba(255, 197, 60, 0.45)); }
.or-line::after { transform: scaleX(-1); }
.login-card.returning .guest-box { order: 10; }
.login-card.returning .guest-hint { display: none; }
.login-card.returning #guest-or { order: -1; }
.login-card.returning .guest-btn { min-height: 2.6rem; font-size: 1rem; }
@media (max-height: 700px) { .guest-hint { display: none; } }
@media (max-height: 560px) { .guest-btn { min-height: 2.6rem; font-size: 1.05rem; } .or-line { margin: 0; } }
/* the Register sheet (register.js) */
.reg-card { width: min(400px, 92vw); gap: 0.65rem; }
.reg-card .reg-why { padding: 0.55rem 0.75rem; border-radius: var(--radius-m); background: rgba(255, 208, 64, 0.14); border: 1px solid rgba(255, 208, 64, 0.5);
  color: var(--ink); font-weight: 700; }
.reg-card .msg { font-size: 0.9rem; }
/* a guest on Me: what that means + Register; the small tag by the name */
.guest-card { display: flex; align-items: center; gap: 0.9rem; padding: 0.75rem 1rem; border-radius: 18px;
  background: rgba(255, 208, 64, 0.12); border: 1px solid rgba(255, 208, 64, 0.45); }
.guest-card.hidden { display: none; }
.guest-card p { margin: 0; flex: 1; color: var(--ink-2); font-size: 0.9rem; line-height: 1.4; }
.guest-card p b { color: var(--ink); }
.guest-card .btn { flex: none; }
@media (max-width: 520px) { .guest-card { flex-direction: column; align-items: stretch; } }
.guest-tag { flex: none; font-family: var(--font-ui); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.12rem 0.55rem; border-radius: 999px; background: rgba(255, 255, 255, 0.14); color: var(--ink-2); }
.guest-tag.hidden { display: none; }
.shop-reg { white-space: nowrap; }

/* ---------- lobby ---------- */
.topbar { display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem 1rem; background: rgba(0,0,0,0.3); }
.topbar .who { display: flex; align-items: center; gap: 0.5rem; flex: 1; }
.coins { font-size: 1.1rem; padding: 0.3em 0.9em; border-radius: 999px; background: rgba(0,0,0,0.35); }
.avatar { display: inline-flex; width: 2.2em; height: 2.2em; border-radius: 50%; align-items: center; justify-content: center;
  font-weight: 800; background: linear-gradient(135deg, #f2c14e, #e5484d); color: #1b1405;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.35), 0 1px 3px rgba(0,0,0,0.45); }

/* ---------- table ---------- */
/* The room: a red-lacquer card room at night. A spotlight hangs just above the table; out of focus around it, a few
   coloured lights of the room. The felt is vivid under the light; seats, cards and controls stay crisp on top. */
#screen-table {
  background:
    radial-gradient(ellipse 30% 24% at 50% -6%, rgba(255, 238, 196, 0.42), rgba(var(--lamp), 0.12) 48%, rgba(var(--lamp), 0) 100%),
    radial-gradient(circle at 6% 18%, rgba(255, 92, 200, 0.22), rgba(255, 92, 200, 0) 3%),
    radial-gradient(circle at 13% 6%, rgba(255, 214, 120, 0.16), rgba(255, 214, 120, 0) 2%),
    radial-gradient(circle at 93% 13%, rgba(110, 190, 255, 0.22), rgba(110, 190, 255, 0) 3.2%),
    radial-gradient(circle at 86% 4%, rgba(255, 214, 120, 0.14), rgba(255, 214, 120, 0) 1.8%),
    radial-gradient(circle at 97% 64%, rgba(196, 120, 255, 0.2), rgba(196, 120, 255, 0) 2.6%),
    radial-gradient(circle at 3% 78%, rgba(255, 170, 70, 0.17), rgba(255, 170, 70, 0) 2.4%),
    radial-gradient(ellipse 66% 60% at 50% 47%, rgba(255, 96, 80, 0.2), rgba(255, 96, 80, 0) 72%),
    var(--lattice),
    radial-gradient(ellipse 120% 100% at 50% 44%, #561a30 0%, #2c0b17 52%, #0d0306 100%);
}
.felt { position: absolute; inset: 0; }
/* The table: a polished red-lacquer rail (the oval itself) with a gold edge, around the felt (.table-felt), which carries
   a printed line and the game's name. Chips and bets stay on the cloth: table.js and the layout check measure
   .table-felt itself. The felt colour is the room owner's pick (room panel → Settings → Table theme → html[data-look]). */
.table-oval { --rail: clamp(9px, 2.6vmin, 26px); position: absolute; left: 9%; right: 9%; top: 15%; bottom: 22%; border-radius: 50% / 50%;
  background: linear-gradient(180deg, #9a3020 0%, #7a2416 22%, #561709 55%, #3a0d08 78%, #1f0603 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 214, 120, 0.8),      /* the rail's gold outer edge */
    inset 0 0 0 calc(var(--rail) * 0.45) rgba(255, 200, 160, 0.07), /* the lacquer's rounded top, a shade lighter */
    inset 0 3px 4px rgba(255, 226, 200, 0.38),         /* a sheen along the far side */
    inset 0 -5px 9px rgba(0, 0, 0, 0.55),             /* shade along the near side */
    0 4px 0 #160402,                                  /* the rail's thickness */
    0 0 0 4px rgba(255, 196, 64, 0.14),               /* a soft gold glow round the table */
    0 30px 60px rgba(0, 0, 0, 0.75),                  /* the table's shadow on the floor */
    0 0 0 1px rgba(0, 0, 0, 0.6); }
.table-felt { --f1: #23b689; --f2: #16936b; --f3: #0f7454; --f4: #0b573f; --f5: #073a29;
  position: absolute; inset: var(--rail); border-radius: 50%;
  background:
    radial-gradient(ellipse 46% 46% at 50% 42%, rgba(255, 246, 214, 0.3), rgba(255, 246, 214, 0.08) 55%, rgba(255, 246, 214, 0) 82%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 72% 72% at 50% 43%, var(--f1) 0%, var(--f2) 38%, var(--f3) 64%, var(--f4) 86%, var(--f5) 100%);
  box-shadow:
    0 0 0 2px #e9b43c,                               /* a gold inlay where cloth meets rail */
    0 0 0 3.5px rgba(70, 30, 0, 0.9),
    inset 0 10px 22px rgba(0, 0, 0, 0.5),            /* the rail's shadow on the cloth */
    inset 0 0 70px 14px rgba(0, 0, 0, 0.32); }       /* the cloth falls into shade toward the rail */
/* Crimson (5 Nov): Shan 9's own red felt — its colour is red, as Rummy's is green and Poker's blue */
html[data-look=crimson] .table-felt { --f1: #d8475c; --f2: #b42c42; --f3: #8e1c31; --f4: #661222; --f5: #420a16; }
html[data-look=emerald] .table-felt { --f1: #33c77a; --f2: #1b9a59; --f3: #0f7443; --f4: #094f2e; --f5: #05321d; }
html[data-look=sapphire] .table-felt { --f1: #4b9bff; --f2: #2a6fd6; --f3: #1b51a8; --f4: #113878; --f5: #0a2350; }
/* Onyx (3 Nov): a black VIP cloth under the same warm spotlight — the lacquer rail and the gold inlay stay */
html[data-look=onyx] .table-felt { --f1: #5e5c68; --f2: #43414c; --f3: #2e2d35; --f4: #1e1d23; --f5: #121116; }
/* the printed line, and the game's name printed faintly on the cloth below the middle */
.table-felt::after { content: ''; position: absolute; inset: 8% 6.5%; border-radius: 50%; border: 1.5px solid rgba(255, 236, 170, 0.2); }
.table-felt::before { content: '♠  NINE CITIES  ♥'; position: absolute; left: 50%; top: 71%; transform: translate(-50%, -50%); white-space: nowrap;
  font-family: var(--font-display); font-size: clamp(12px, 3vmin, 34px); letter-spacing: 0.16em; color: rgba(255, 244, 205, 0.09); pointer-events: none; }
/* the spotlight's beam in the air and a few gold glints drifting through it (only while the table is on screen) */
.room-fx { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.room-fx .beam { position: absolute; left: 50%; top: -12%; width: min(150vh, 120vw); height: 82%; transform: translateX(-50%);
  background: conic-gradient(from 158deg at 50% 0%, rgba(var(--lamp), 0) 0deg, rgba(var(--lamp), 0.07) 13deg, rgba(var(--lamp), 0.09) 22deg, rgba(var(--lamp), 0.07) 31deg, rgba(var(--lamp), 0) 44deg, rgba(var(--lamp), 0) 360deg);
  -webkit-mask-image: linear-gradient(#000 10%, rgba(0, 0, 0, 0.55) 60%, transparent 100%); mask-image: linear-gradient(#000 10%, rgba(0, 0, 0, 0.55) 60%, transparent 100%); }
/* the glints float in the air above the table — the top layer (pointer-events none), so nothing under them has to be
   re-composited as they drift; off on low-memory devices (html.lowfx) */
.room-dust { position: absolute; inset: 0; z-index: 8; overflow: hidden; pointer-events: none; }
.room-dust .mote { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%; opacity: 0;
  background: rgba(255, 244, 210, 0.95); box-shadow: 0 0 6px 1px rgba(255, 214, 120, 0.7);
  animation: mote var(--d) linear var(--t) infinite; will-change: transform, opacity; }
.room-dust .mote.s { width: 2px; height: 2px; }
@keyframes mote { 0% { transform: translate(0, 0); opacity: 0; } 18% { opacity: 0.75; } 82% { opacity: 0.55; } 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
html:not([data-screen=screen-table]) .room-fx, html:not([data-screen=screen-table]) .room-dust, html.lowfx .room-dust { display: none; }
@media (prefers-reduced-motion: reduce) { .room-dust { display: none; } }
.table-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.7rem; z-index: 5; }
/* the table's top-bar buttons: round lacquer buttons with a gold hairline */
.table-top .btn.ghost { background: linear-gradient(180deg, rgba(84, 29, 48, 0.95), rgba(40, 12, 22, 0.95)); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1.5px rgba(255, 214, 120, 0.5), 0 3px 8px rgba(0, 0, 0, 0.45); }
.table-top .btn.ghost:hover:not(:disabled) { background: linear-gradient(180deg, rgba(100, 36, 58, 0.96), rgba(50, 16, 28, 0.96)); }
.spacer { flex: 1; } /* pushes what follows to the far end of a bar (the table's top bar, the home bar) */
/* a small, unobtrusive countdown clock in the top-left corner (not a big strip across the table) */
.closing-bar { position: absolute; top: 3.1rem; left: 0.5rem; z-index: 8; display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.25rem 0.35rem 0.25rem 0.7rem; border-radius: 999px; background: linear-gradient(180deg, #ff5d6c, #b81a33); color: #fff; font-weight: 900; font-size: 0.82rem;
  box-shadow: 0 3px 0 #6e0c1c, 0 4px 12px rgba(0,0,0,0.45); text-shadow: 0 1px 0 rgba(90, 0, 15, 0.6); }
.closing-bar.hidden { display: none; }
.closing-bar .btn { font-size: 0.8rem; min-height: 1.9rem; padding: 0.1em 0.7em; }
#room-name { font-weight: 900; color: #fff; font-size: 0.95rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
/* the middle column: phase text, timer, then the action bar right under it; anchored at its top so it grows
   downward when the bar appears instead of jumping */
.center { position: absolute; left: 50%; top: 40%; transform: translateX(-50%); text-align: center; width: 34%; z-index: 7; pointer-events: none; }
/* the centre column is mostly non-interactive text sitting over the seats — let taps pass through to the table,
   but keep its real controls (action buttons, bet slider, the Sit button) clickable */
.center .actions, .center .actions *, .center .sit-btn, .center button, .center input, .center a { pointer-events: auto; }
/* the middle line: what happens now (display face, bold) + a smaller detail line. Both lines always take their space,
   so the bar below never shifts; a line too long for the column ends in "…" instead of spilling over the seats */
.phase { display: inline-flex; flex-direction: column; align-items: center; max-width: 100%; vertical-align: top; margin-top: 0.35rem;
  text-shadow: 0 2px 0 rgba(24, 0, 8, 0.8), 0 0 16px rgba(24, 0, 8, 0.6); } /* as wide as its words (never the whole column), so it keeps clear of the seats */
.phase > span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#phase-text { transform: translateX(var(--ph-x, 0px)) scale(var(--ph-fit, 1)); transform-origin: 50% 0; } /* (table.js fitPhase: clear of the top seats' hands) */
.phase .ph-main { font-family: var(--font-display); font-weight: 400; font-size: 1.32rem; letter-spacing: 0.02em; line-height: 1.3; color: #fff; }
.phase .ph-more { font-weight: 800; font-size: 0.86rem; line-height: 1.35; min-height: 1.35em; color: #fff1e6; }
/* action buttons with two labels: the short one on phones, the long one on wider screens */
.actions .lbl-s { display: none; }
/* the clock: a glowing capsule that drains */
.timer { height: 8px; margin: 0.45rem auto 0; width: 70%; border-radius: 999px; background: rgba(22, 5, 11, 0.62); box-shadow: inset 0 1px 2px rgba(0,0,0,0.6), 0 0 0 1px rgba(255, 214, 120, 0.25); overflow: hidden; }
#timer-bar { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(180deg, #a6ffcc, #2fd27a 60%, #18a85a); box-shadow: 0 0 8px rgba(47, 210, 122, 0.7); transition: width 0.25s linear; }
.room-line { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.25rem; }
.log { margin-top: 0.4rem; font-size: 0.86rem; font-weight: 700; color: #ffefe2; min-height: 1em; text-shadow: 0 1px 2px rgba(24, 0, 8, 0.9); }

/* seats */
:root {
  --card-h: clamp(50px, 15vh, 92px);       /* other players */
  --my-card-h: clamp(78px, 24vh, 140px);   /* your own hand */
  --peek-h: clamp(170px, 52vh, 300px);     /* peeling a card */
  --av: 46px;                              /* a face on a name plate (4 Nov: 36 → 46 — "bigger player icon") */
}
.seat { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 3; }
.seat.badged { z-index: 4; } /* a Banker / on a break / busted badge stays readable over a neighbour's cards (table.js) */
.seat.at-mid { transform: translate(-50%, -50%); }
.seat.at-left { transform: translate(0, -50%); align-items: flex-start; }
.seat.at-right { transform: translate(-100%, -50%); align-items: flex-end; }
.seat.at-top { transform: translate(-50%, 0); }
.seat.at-bottom { transform: translate(-50%, -100%); flex-direction: column-reverse; }
.seat.you { flex-direction: row-reverse; align-items: flex-end; gap: 8px; }
.seat.empty .plate { opacity: 0.35; }
/* A name plate: the player's face in a ring (photo, face or initial) with their level gem, their name and their balance
   on dark lacquer with a gold hairline. Yours glows gold; the banker's is gold-brown with a gold Banker ribbon; whoever
   the table waits for has a pulsing ring. */
.plate { position: relative; display: flex; align-items: center; gap: 0.45rem; padding: 2px 0.85rem 2px 2px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(84, 26, 48, 0.97), rgba(34, 9, 18, 0.97)); border: 1.5px solid rgba(255, 214, 120, 0.45); white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 14px rgba(14, 1, 5, 0.55); }
.seat.you .plate { border-color: #ffd24a; background: linear-gradient(180deg, rgba(118, 38, 66, 0.98), rgba(52, 14, 28, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 1px rgba(255, 208, 64, 0.35), 0 0 16px rgba(255, 208, 64, 0.3), 0 6px 14px rgba(14, 1, 5, 0.55); }
.seat.you .plate .avatar { box-shadow: 0 0 0 2.5px #2a0d16, 0 0 0 4.5px var(--gold); }
.seat.banker .plate { background: linear-gradient(180deg, rgba(120, 66, 14, 0.98), rgba(52, 24, 4, 0.98)); border-color: #ffd24a; }
/* (5 Nov, list #2b — the owner picked "B · Medallion") The face is a medallion in front of the plate's round end — one
   piece, not a circle beside a pill. Whoever the table waits for: the plate's own edge turns green (no second outline
   round it — it "separated" at 3× zoom) and ONE ring hugs the face, or the outside of its frame, counting their time
   down (.ring below; Shan 9's seats, Poker's and Rummy's alike). */
.plate > .avatar-wrap { z-index: 2; } /* (in front of the plate's end, inside its box: sticking out 10 % put the left-edge face 3–5 px off 1024×600 and phone screens — play.mjs) */
.seat.turn .plate, .pk-seat.turn .pk-plate, .rm-seat.turn .rm-plate { border-color: #6dffad;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 10px rgba(109, 255, 173, 0.35), 0 6px 14px rgba(14, 1, 5, 0.55); }
/* A seat dims only when the player is out of the play: a deliberate sit-out (away) or a bust (out of the game). The
   badge stays crisp (only the avatar / name / cards fade), so everyone can read WHY. A disconnected or low-on-coins
   player (still playing, on credit) is shown at full strength. */
.seat.away .plate, .seat.busted .plate { background: linear-gradient(180deg, rgba(84, 26, 48, 0.55), rgba(34, 9, 18, 0.6)); box-shadow: none; }
.seat.away .plate > .avatar-wrap, .seat.away .plate > .info,
.seat.busted .plate > .avatar-wrap, .seat.busted .plate > .info { opacity: 0.45; }
.seat.busted .plate > .avatar-wrap, .seat.busted .plate > .info, .seat.busted .hand { filter: grayscale(1); }
.plate .avatar { width: var(--av); height: var(--av); font-size: calc(var(--av) * 0.42); flex: none; box-shadow: 0 0 0 2.5px #2a0d16, 0 0 0 4.5px rgba(255, 214, 120, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.3); }
.plate .info { display: flex; flex-direction: column; line-height: 1.15; }
.plate .name { font-size: 0.86rem; font-weight: 800; color: #fff; overflow: hidden; text-overflow: ellipsis; max-width: 92px; }
.plate .money { display: inline-flex; align-items: center; gap: 0.28em; font-size: 0.8rem; font-weight: 900; color: var(--gold); }
/* (6 Nov — the owner: "why not poker chips, all games should be chips now. even balance") the chip in front of every
   amount of chips — the plates at all three games, the balances, the bets, the lists — the header's casino chip
   (icons/chip.svg, design A); .gold-amt the gold bar. (Was a gold coin and 🪙: the emoji looks different on every phone.) */
.plate .money::before, .coin, .chips-amt::before, .gold-amt::before { content: ''; flex: none; width: 1em; height: 1em;
  background: url(icons/chip.svg) center / contain no-repeat; filter: drop-shadow(0 1px 0.5px rgba(0, 0, 0, 0.45)); }
.gold-amt::before { background-image: url(icons/gold.svg); }
/* (Wave 2 R2, 11 Nov — the owner's pick: silver & blue) ROOM chips — the ones a host hands out at a room-chips table, never
   your own — have a chip of their own: the K2 drawing in silver and blue (icons/chip-room.svg). At a room-chips table every
   chip on the table is one (the bar's pill, the plates, the bets and the pot, a gift's shower: html[data-eco=room], app.js
   applyRoomInfo); anywhere else an amount of room chips says so with .rc (the room panel, the final scoreboard, the room card
   on Play, the history, the dev console). Your own chips keep the wine-and-gold chip everywhere. */
html[data-eco=room] #screen-table :is(.plate .money, .chips-amt)::before, html[data-eco=room] #screen-table :is(.coin, .burst),
.chips-amt.rc::before { background-image: url(icons/chip-room.svg); }
.coin, .chips-amt::before, .gold-amt::before { display: inline-block; vertical-align: -0.14em; margin-right: 0.28em; }
/* the player's level: a purple gem on their face */
.lvl-pip { position: absolute; right: -5px; bottom: -4px; z-index: 1; min-width: max(15px, calc(var(--av) * 0.46)); height: max(15px, calc(var(--av) * 0.46)); padding: 0 3px;
  border-radius: 999px; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: max(9.5px, calc(var(--av) * 0.3)); line-height: 1;
  color: #fff; background: linear-gradient(180deg, #b48cff, #7444e0); box-shadow: 0 0 0 1.5px #1c0a10, inset 0 1px 0 rgba(255,255,255,0.45); text-shadow: 0 1px 0 rgba(40, 0, 90, 0.6); }
.tags { position: absolute; top: -13px; left: calc(100% - 14px); right: auto; display: flex; gap: 3px; z-index: 7; } /* above the cards, just past the plate so it never covers the name */
.seat.at-right .tags { left: auto; right: calc(100% - 14px); flex-direction: row-reverse; }
/* the bottom row: a badge (Banker, on a break…) sits centred over its own plate — reaching sideways, a neighbour's lay on
   your first card and yours on your right neighbour (#84; table.js fitBottomRow counts a badge wider than its plate) */
.seat.at-bottom .tags { left: 50%; right: auto; top: -17px; transform: translateX(-50%); }
.badge { font-size: 0.72rem; line-height: 1.6; padding: 0 0.55rem; border-radius: 999px; font-weight: 900; white-space: nowrap;
  background: linear-gradient(180deg, #64223f, #300e1c); color: #fff2e8; border: 1px solid rgba(255, 255, 255, 0.28); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.badge.bank { background: linear-gradient(180deg, #fff2a8, #ffc93f 55%, #e99a17); color: #3d2200; border-color: #fff5cf; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5); }
.bet-chip { font-size: 0.7rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--gold); color: #3d2200; font-weight: 900; }
.hand { display: flex; align-items: center; min-height: var(--card-h); } /* room for the cards even before the deal: seats don't jump */
.seat.you .hand { min-height: var(--my-card-h); }
.hand .cards { position: relative; display: flex; align-items: center; }
.hand .card + .card { margin-left: calc(var(--card-h) * -0.28); }
.seat.you .hand .card + .card { margin-left: calc(var(--my-card-h) * -0.22); }
.score { font-size: 0.8rem; font-weight: 900; padding: 0.1rem 0.45rem; border-radius: 8px; background: linear-gradient(180deg, #ffffff, #ffe9dc); color: #3a0e1c; margin-left: 4px; white-space: nowrap;
  box-shadow: 0 2px 0 rgba(60, 10, 24, 0.5), 0 3px 8px rgba(0, 0, 0, 0.45); animation: pop 0.3s ease-out; }
.score.hidden { display: none; }
/* the score hangs beside the cards without moving them (on the side facing into the table) */
.hand { position: relative; }
.hand .score { position: absolute; top: 50%; left: 100%; transform: translateY(-50%); margin-left: 5px; z-index: 6; }
.seat.at-right .hand .score { left: auto; right: 100%; margin: 0 5px 0 0; }
.seat.you .hand .score { position: static; transform: none; margin-left: 6px; } /* mine sits between my cards and my plate */
/* (5 Nov, BUGS #112) on a phone the top-centre seat's bet sits beside its cards on the right (below them is the middle
   text): its points hang on the left (table.js pointsBox keeps the same side free) */
@media (max-height: 500px) { .seat.at-top.at-edge .hand .score { left: auto; right: 100%; margin: 0 5px 0 0; } }
/* (5 Nov) a phone's top-right corner too: its points toward the middle (outward they lay on the right seat's face) */
@media (max-height: 500px) { .seat.at-top.top-r .hand .score { left: auto; right: 100%; margin: 0 5px 0 0; } }
/* (5 Nov) ... but the top-centre seat that slid left to clear the top bar hangs them on its right: on its left they met
   the top-left corner's plate (8 seats, 667×375) */
@media (max-height: 500px) { .seat.at-top.at-edge.slid-l .hand .score { left: 100%; right: auto; margin: 0 0 0 5px; } }
/* points are never wider than 5em: a long one wraps to two lines ("3 of a / kind ×5", "Shan 9 / ×2"), so the bottom row
   has a known width to keep free for your seat (#84; table.js fitBottomRow reads this max-width) */
.hand .score { width: max-content; max-width: 5em; white-space: normal; text-align: center; line-height: 1.1; }
.score.shan { background: linear-gradient(180deg, #ffe58a, #ffb52e 55%, #f07a12); color: #3d1600; box-shadow: 0 2px 0 #8a4a00, 0 0 14px rgba(255, 190, 60, 0.65); }
.seat.you .score { font-size: 1rem; }
/* WIN / LOSE / PUSH: a glossy pill on the hand, in the display face */
.outcome { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; letter-spacing: 0.04em;
  padding: 0.12rem 0.75rem; border-radius: 999px; color: #fff; background: linear-gradient(180deg, #7a2a4a, #3e1024); border: 1.5px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 12px rgba(0,0,0,0.6); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
  animation: pop-c 0.4s cubic-bezier(.2, 1.4, .4, 1); z-index: 6; pointer-events: none; white-space: nowrap; }
.outcome.win { background: linear-gradient(180deg, #7ff3b0, #22c56f 55%, #12934d); border-color: #c9ffe0; box-shadow: 0 0 22px rgba(80, 240, 150, 0.6), 0 6px 14px rgba(0,0,0,0.5); text-shadow: 0 1px 0 rgba(0, 66, 28, 0.75); }
.outcome.lose { background: linear-gradient(180deg, #ff8a95, #e8364b 55%, #b31a33); border-color: #ffd0d5; box-shadow: 0 6px 14px rgba(0,0,0,0.5); text-shadow: 0 1px 0 rgba(96, 0, 16, 0.75); }
.outcome.push { color: #fff; }
/* caught early: decided, paid at the final reveal */
.outcome.waiting { display: grid; justify-items: center; font-size: 1rem; line-height: 1.05; padding: 0.18rem 0.6rem 0.22rem;
  border-radius: 14px; border-style: dashed; box-shadow: 0 4px 12px rgba(0,0,0,0.6); }
.outcome.waiting small { font-family: var(--font-ui); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.01em; opacity: 0.95; }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pop-c { from { transform: translate(-50%, -50%) scale(0.4); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

/* cards: real images, 3D flip, fly in from the dealer */
.card { position: relative; flex: none; height: var(--card-h); aspect-ratio: 167 / 243; perspective: 700px; }
.seat.you .card { height: var(--my-card-h); }
.card .inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(.3,.7,.3,1.2); }
.card.up .inner { transform: rotateY(180deg); }
.card.noanim .inner { transition: none; }
.card .face, .card .back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 6%/4.2%; box-shadow: 0 6px 12px -2px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.45); overflow: hidden; }
.card .back { background: url(cards/back.webp?v=6) center / cover; }
.card .face { transform: rotateY(180deg); background: #fff; }
.card .face img, .mini img { width: 100%; height: 100%; display: block; }
.card.fly { animation: fly 0.42s cubic-bezier(.2,.8,.3,1) both; }
/* (5 Nov, the owner: "cards coming out from decks too small … same size as player's card?") a dealt card flies at the
   size of the card it becomes — before, it left the deck at 0.55 of it and grew on the way */
@keyframes fly {
  from { transform: translate(var(--dx), var(--dy)) rotate(-24deg); opacity: 0; }
  12% { opacity: 1; }
  to { transform: none; opacity: 1; }
}

/* peel your own card */
.squeeze { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem;
  background: radial-gradient(ellipse at 50% 42%, rgba(74, 18, 36, 0.62), rgba(12, 3, 7, 0.92)); }
.felt.peeking .actions { visibility: hidden; }
.sq-row { display: flex; align-items: flex-end; gap: 14px; }
.sq-known { display: flex; gap: 6px; }
.mini { height: calc(var(--peek-h) * 0.62); aspect-ratio: 167 / 243; border-radius: 6%/4.2%; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.6); }
.peek { position: relative; height: var(--peek-h); aspect-ratio: 167 / 243; touch-action: none; }
.peek-card { position: absolute; inset: 0; border-radius: 6%/4.2%; overflow: hidden; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.7), 0 0 40px rgba(255, 208, 64, 0.18); }
.peek-card img { width: 100%; height: 100%; display: block; pointer-events: none; }
.peek-card.top { cursor: grab; will-change: transform; box-shadow: 0 6px 18px rgba(0,0,0,0.6); }
.peek-card.top:active { cursor: grabbing; }
.peek-card.top.spring { transition: transform 0.45s cubic-bezier(.3,1.5,.5,1); }
.peek-card.top.away { transition: transform 0.45s ease-in, opacity 0.45s ease-in; opacity: 0; }
/* corner zones (smaller than the rest) */
.peek-card .corner { position: absolute; width: 22%; height: 16%; pointer-events: none; }
.peek-card .corner::after { content: ''; position: absolute; width: 38%; height: 38%; border: 3px solid rgba(255, 208, 64, 0.9); }
.peek-card .corner.tl { left: 0; top: 0; } .peek-card .corner.tl::after { left: 10%; top: 10%; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.peek-card .corner.tr { right: 0; top: 0; } .peek-card .corner.tr::after { right: 10%; top: 10%; border-left: 0; border-bottom: 0; border-top-right-radius: 6px; }
.peek-card .corner.bl { left: 0; bottom: 0; } .peek-card .corner.bl::after { left: 10%; bottom: 10%; border-right: 0; border-top: 0; border-bottom-left-radius: 6px; }
.peek-card .corner.br { right: 0; bottom: 0; } .peek-card .corner.br::after { right: 10%; bottom: 10%; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }
.sq-text { text-align: center; font-weight: 900; font-size: 1.05rem; text-shadow: 0 2px 3px #000; }
.sq-text small { display: block; font-weight: 700; color: var(--muted); font-size: 0.84rem; }
.sq-text .big { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; color: var(--gold); }
.sq-text .big.shan { color: #ffb02e; font-size: 2.4rem; text-shadow: 0 2px 0 #6b3a02, 0 0 22px rgba(255, 190, 60, 0.7); }
.sq-timer { width: min(240px, 50vw); }
#sq-timer-bar { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(180deg, #a6ffcc, #2fd27a 60%, #18a85a); box-shadow: 0 0 8px rgba(47, 210, 122, 0.7); transition: width 0.25s linear; }

/* chat bubbles */
.bubble { position: absolute; left: 0; top: 0; width: max-content; max-width: min(230px, 42vw); padding: 0.3rem 0.65rem; border-radius: 14px;
  background: #fff; color: #3a0e1c; font-size: 0.86rem; font-weight: 700; line-height: 1.4; white-space: normal; overflow-wrap: anywhere;
  box-shadow: 0 3px 0 rgba(60, 10, 24, 0.45), 0 4px 10px rgba(0, 0, 0, 0.4);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; /* up to 3 lines (80 letters) */
  animation: pop 0.25s; z-index: 6; pointer-events: none; }
.bubble.emoji { background: none; box-shadow: none; font-size: 2rem; padding: 0; }

/* actions: a lacquer capsule in a gold edge under the middle line */
.actions { position: relative; left: 50%; transform: translateX(-50%); width: max-content; max-width: 96vw; margin: 0.6rem 0 0.25rem; display: flex; gap: 0.5rem; align-items: center;
  padding: 0.42rem 0.55rem; border-radius: 999px; border: 2px solid transparent;
  background: linear-gradient(180deg, rgba(92, 28, 52, 0.97), rgba(38, 10, 20, 0.97)) padding-box, var(--metal-edge) border-box;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 12px 30px rgba(14, 1, 5, 0.6); z-index: 7; }
.actions:empty { display: none; }
.actions .btn { white-space: nowrap; font-size: 1.12rem; }
.actions input[type=range] { -webkit-appearance: none; appearance: none; width: 110px; height: 30px; padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; accent-color: var(--gold); cursor: pointer; }
.actions input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: rgba(22, 5, 11, 0.72); box-shadow: inset 0 1px 2px rgba(0,0,0,0.6), 0 0 0 1px rgba(255, 214, 120, 0.3); }
.actions input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fffbe6, #ffd24a 55%, #d48a12); border: 2px solid #fff3c4; box-shadow: 0 2px 5px rgba(0,0,0,0.6); }
.actions input[type=range]::-moz-range-track { height: 8px; border-radius: 999px; background: rgba(22, 5, 11, 0.72); }
.actions input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fffbe6, #ffd24a 55%, #d48a12); border: 2px solid #fff3c4; }
.bet-amount { min-width: 3.5em; text-align: center; font-weight: 900; font-size: 1.12rem; color: var(--gold); white-space: nowrap; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }
/* the quick bets as real casino chips: Min (white), ×2 (red), ×5 (green), Max (black and gold) */
.chips { display: flex; gap: 0.3rem; }
.actions .chips button { --c: #f4f1ea; --e: #2b63d1; --t: #1d2a55; width: 2.75rem; height: 2.75rem; min-width: 0; min-height: 0; padding: 0; border-radius: 50%;
  font-family: var(--font-display); font-weight: 400; font-size: 0.86rem; letter-spacing: 0.01em; color: var(--t); text-shadow: none;
  background: radial-gradient(circle, var(--c) 0 50%, var(--e) 51% 55%, transparent 56%), repeating-conic-gradient(from 7deg, var(--e) 0 16deg, var(--c) 16deg 45deg);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.18), 0 3px 0 rgba(0, 0, 0, 0.45), 0 5px 8px rgba(0, 0, 0, 0.35); }
.actions .chips button::before { display: none; }
.actions .chips button:nth-child(2) { --c: #d8263b; --e: #ffffff; --t: #fff; text-shadow: 0 1px 1px rgba(80, 0, 10, 0.8); }
.actions .chips button:nth-child(3) { --c: #1d9a55; --e: #ffffff; --t: #fff; text-shadow: 0 1px 1px rgba(0, 50, 20, 0.8); }
.actions .chips button:nth-child(4) { --c: #1c1830; --e: #ffcf45; --t: #ffd24a; }
.actions .chips button:hover:not(:disabled) { filter: brightness(1.1); background: radial-gradient(circle, var(--c) 0 50%, var(--e) 51% 55%, transparent 56%), repeating-conic-gradient(from 7deg, var(--e) 0 16deg, var(--c) 16deg 45deg); }
.actions .chips button:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.18), 0 1px 0 rgba(0, 0, 0, 0.45); }

/* chat panel */
/* Anchored top AND bottom so it always fits the screen; the history scrolls and the emoji/quick/send controls
   stay pinned and visible. Opaque so a seat behind it never bleeds through looking like a "faded" player. */
.chat-panel { position: absolute; right: 0.6rem; top: 3.2rem; bottom: 0.6rem; width: 280px; max-width: 72vw;
  padding: 0.65rem; border-radius: 20px; border: 2px solid transparent; background: linear-gradient(180deg, #461b2a, #230a13) padding-box, var(--metal-edge) border-box; z-index: 9;
  display: flex; flex-direction: column; gap: 0.5rem; overflow: hidden; box-shadow: 0 10px 34px rgba(14, 1, 5, 0.65); }
.chat-panel .emote-row, .chat-panel .quick-row, .chat-panel #chat-form { flex: none; }
/* (Q4, 10 Nov — D6 A) one panel: your ten emotes on top (5 × 2; one sliding row on a short screen) */
.emote-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.emote-row .emote-tile .emote-art { width: 40px; height: 44px; }
/* the number of unread messages on the one button (and on the chat button when you have no seat) */
#btn-chat { position: relative; }
.unread { position: absolute; right: -6px; top: -6px; z-index: 2; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #e8283e; color: #fff;
  font: 900 10.5px/17px var(--font-ui); text-align: center; text-shadow: none; box-shadow: 0 0 0 1.5px #2a0b16; pointer-events: none; }
.quick-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.quick-row button { font-size: 0.86rem; }
#chat-form { display: flex; gap: 0.35rem; }

/* A toast is only words: taps go through it. Off the table it sits at the bottom, clear of the menu's main cards. */
.toast { position: fixed; left: 50%; top: 12%; transform: translateX(-50%); padding: 0.55rem 1.2rem; border-radius: 999px;
  border: 1.5px solid rgba(255, 214, 120, 0.55); background: linear-gradient(180deg, rgba(77, 26, 44, 0.97), rgba(35, 10, 19, 0.97)); color: #fff;
  box-shadow: 0 8px 24px rgba(14, 1, 5, 0.6); z-index: 88; font-size: 0.98rem; font-weight: 800; max-width: 90vw; text-align: center; pointer-events: none; }
/* (3 Nov, BUGS #96) above every sheet (60) and dialog (80): an error from the host sheet showed behind it */
html:not([data-screen=screen-table]) .toast { top: auto; bottom: max(1.25rem, env(safe-area-inset-bottom)); }



/* ---------- bet spots, bank pile, chips ---------- */
#spots { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.spot { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 3px; }
.spot.hidden { display: none; }
.spot .stack { display: flex; align-items: flex-end; justify-content: center; gap: 2px; min-height: 22px; }
.spot .col { position: relative; width: 26px; height: calc(18px + (var(--n) - 1) * 3.5px); }
/* (7 Nov, BUGS #130) a full table on a phone: the chip beside the amount, on the pill's end (table.js crowdedPhone) */
#spots.crowded .spot:not(.bank) { flex-direction: row; gap: 0; }
#spots.crowded .spot:not(.bank) .stack { min-height: 0; margin-right: -7px; position: relative; z-index: 1; }
#spots.crowded .spot:not(.bank) .amt { padding-left: 0.6rem; }
.spot .amt { font-size: 0.78rem; font-weight: 900; padding: 0.06rem 0.55rem; border-radius: 999px; background: rgba(28, 7, 15, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; white-space: nowrap; line-height: 1.4; box-shadow: 0 2px 6px rgba(0,0,0,0.45); }
.spot.bank .col { width: 30px; height: calc(20px + (var(--n) - 1) * 3.5px); }
.spot.bank .amt { font-size: 0.86rem; color: var(--gold); border: 1.5px solid rgba(255, 208, 64, 0.7); }
/* (BUGS #141) a full table on a phone: the bank's warning on a second line, so the pile stays narrow */
#spots.crowded .spot.bank .amt { display: inline-grid; grid-template-columns: auto auto; align-items: center; justify-items: center; line-height: 1.2; }
#spots.crowded .spot.bank .amt .warn { grid-column: 1 / -1; margin: 0; font-size: 0.85em; line-height: 1.05; }
/* a chip seen slightly from above: an oval face with edge spots, an inlaid centre ring, and its thickness underneath */
.chip { position: absolute; left: 0; bottom: calc(var(--k) * 3.5px); width: 26px; height: 18px; border-radius: 50%;
  border: 2px dashed rgba(255,255,255,0.9); box-sizing: border-box;
  background: radial-gradient(closest-side at 50% 47%, var(--in) 0 42%, var(--ring) 46% 58%, transparent 62%), radial-gradient(ellipse at 50% 38%, var(--hi), var(--c) 62%, var(--lo));
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.45), inset 0 -1px 1px rgba(0,0,0,0.25), 0 2px 0 var(--edge, #222), 0 3px 4px rgba(0,0,0,0.45); }
.spot.bank .chip { width: 30px; height: 20px; }
.chip.w { --hi: #ffffff; --c: #ece7dc; --lo: #b8b1a3; --in: #f8f4ec; --ring: rgba(43, 99, 209, 0.75); border-color: #2b63d1; --edge: #8f887a; }
.chip.r { --hi: #ff7a7a; --c: #d8263b; --lo: #8e1c1c; --in: #e0394d; --ring: rgba(255, 255, 255, 0.65); --edge: #6d1414; }
.chip.g { --hi: #7be09c; --c: #1d9a55; --lo: #146b3a; --in: #24a95f; --ring: rgba(255, 255, 255, 0.65); --edge: #0e4a26; }
.chip.k { --hi: #5c5a72; --c: #1c1830; --lo: #050410; --in: #29243f; --ring: rgba(255, 207, 69, 0.8); border-color: #ffcf45; --edge: #000; }
.chip.gold { --hi: #fff6c8; --c: #f0b52c; --lo: #b0761a; --in: #ffc93f; --ring: rgba(255, 250, 225, 0.85); border-color: #fff5d6; --edge: #7a4f0c; }
/* chips flying between seat, bet and bank */
.flychip { position: absolute; width: 22px; height: 15px; border-radius: 50%; border: 2px dashed rgba(255,255,255,0.88);
  box-shadow: 0 2px 0 rgba(0,0,0,0.5), 0 3px 6px rgba(0,0,0,0.45); z-index: 30; pointer-events: none; box-sizing: border-box; }
.flychip.c0 { background: #d8263b; } .flychip.c1 { background: #ece7dc; border-color: #2b63d1; }
.flychip.c2 { background: #1d9a55; } .flychip.c3 { background: #1c1830; border-color: #ffcf45; }
.flychip.gold { background: radial-gradient(ellipse at 50% 40%, #fff6c8, #f0b52c 60%, #b0761a); border-color: #fff5d6; }
.actions .bet-amount small { color: var(--muted); font-weight: 800; font-size: 0.78em; }

/* floating +/- numbers: chunky, in the display face, with a dark edge */
.plate, .spot { position: relative; }
.spot { position: absolute; }
.float { position: absolute; left: 50%; top: -4px; transform: translateX(-50%); font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; letter-spacing: 0.02em; white-space: nowrap;
  pointer-events: none; z-index: 40; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.75), 0 0 8px rgba(0, 0, 0, 0.7); animation: floatUp 1.8s ease-out forwards; }
.float.up { color: var(--win); }
.float.down { color: var(--lose); }
.float.even { color: #fff; }
/* someone's Shan: shown in their own spot (never as big text across the table — the owner's call) */
.float.do { top: 50%; color: #ffd24a; font-size: 1.5rem; z-index: 7; text-shadow: 0 2px 0 #6b3a02, 0 0 14px rgba(255, 190, 60, 0.85); animation: doPop 2.4s ease-out forwards; } /* pops on the cards, doesn't rise over the name */
@keyframes doPop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
  25% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
.seat.do-glow .cards { filter: drop-shadow(0 0 8px rgba(255, 215, 106, 0.95)) drop-shadow(0 0 18px rgba(255, 190, 60, 0.6)); }
/* …and a burst of gold rays turns slowly behind that hand */
.seat.do-glow .hand::before { content: ''; position: absolute; left: 50%; top: 50%; width: calc(var(--card-h) * 2.7); height: calc(var(--card-h) * 2.7); translate: -50% -50%;
  border-radius: 50%; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 222, 120, 0.55) 0 9deg, rgba(255, 222, 120, 0) 9deg 24deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, rgba(0, 0, 0, 0.5) 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 18%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
  animation: shanRays 2.6s ease-out forwards; }
.seat.you.do-glow .hand::before { width: calc(var(--my-card-h) * 2.4); height: calc(var(--my-card-h) * 2.4); }
@keyframes shanRays { 0% { opacity: 0; transform: scale(0.35) rotate(0deg); } 14% { opacity: 1; transform: scale(1) rotate(12deg); } 78% { opacity: 1; } 100% { opacity: 0; transform: scale(1.08) rotate(70deg); } }
html.lowfx .seat.do-glow .hand::before { display: none; }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, 6px) scale(0.7); } 15% { opacity: 1; transform: translate(-50%, -6px) scale(1.18); }
  70% { opacity: 1; transform: translate(-50%, -26px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -38px); } }

/* callouts across the middle: Catch all!, the bank warnings (renamed from .banner — ad blockers hide "banner") */
.callout { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 45; pointer-events: none; white-space: nowrap;
  font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 7.5vh, 2.8rem); letter-spacing: 0.03em; padding: 0.12em 0.9em; border-radius: 18px;
  border: 2px solid transparent; background: linear-gradient(180deg, rgba(92, 28, 52, 0.95), rgba(38, 10, 20, 0.95)) padding-box, var(--metal-edge) border-box;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.6), 0 0 18px rgba(0, 0, 0, 0.5); box-shadow: 0 12px 34px rgba(14, 1, 5, 0.65); animation: calloutIn 1.7s ease-out forwards; }
.callout.catch { color: #ff9aa4; }
@keyframes calloutIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  22% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1); } }

/* spotlight on the hand being caught */
.seat.caught .cards { animation: caught 1.3s ease-out; border-radius: 8px; }
@keyframes caught { 0% { box-shadow: 0 0 0 0 rgba(255,231,140,0); } 25% { box-shadow: 0 0 0 6px rgba(255,231,140,0.9), 0 0 30px 10px rgba(255,231,140,0.6); }
  100% { box-shadow: 0 0 0 0 rgba(255,231,140,0); } }

/* your win: a shower of gold coins */
.burst { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px; z-index: 41; pointer-events: none;
  background: url(icons/chip.svg) center / contain no-repeat; filter: drop-shadow(0 0 3px rgba(255, 120, 130, 0.7)); animation: burst 1s ease-out forwards; } /* (6 Nov: chips fly, not coins) */
@keyframes burst { from { transform: translate(0, 0) scale(0.5); opacity: 1; } to { transform: translate(var(--x), var(--y)) scale(1); opacity: 0; } }
/* a thrown coin gift: a wrapped present that flies across the felt, then pops open into coins */
.flygift { position: absolute; z-index: 42; pointer-events: none; font-size: 1.9rem; line-height: 1; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.6)); will-change: transform; }
.flygift.pop { animation: giftpop 0.26s ease-out forwards; }
@keyframes giftpop { from { transform: translate(-50%,-50%) scale(1); opacity: 1; } 40% { transform: translate(-50%,-50%) scale(1.6); opacity: 1; } to { transform: translate(-50%,-50%) scale(2.1); opacity: 0; } }
.plate.shake { animation: shake 0.45s; }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
#timer-bar.urgent, #sq-timer-bar.urgent { background: linear-gradient(180deg, #ffb0b7, #ff4d5e 60%, #d0213a); box-shadow: 0 0 10px rgba(255, 77, 94, 0.85); }
.table-top .room-line { margin: 0; font-size: 0.82rem; }
.money.rolling { color: var(--win); text-shadow: 0 0 8px rgba(109, 255, 173, 0.75); }
/* rules card */
/* Sheets and panels over the game: the room dims, the card sits in a gold-metal frame (opaque — nothing on
   the felt bleeds through), its title in the display face. */
.help { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(20, 4, 9, 0.74); }
.help-card { position: relative; width: min(620px, 94vw); max-height: 90vh; overflow-y: auto; padding: 1.1rem 1.3rem; border-radius: 24px;
  border: 2px solid transparent; background: linear-gradient(180deg, #461b2a 0%, #240b14 100%) padding-box, var(--metal-edge) border-box;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), var(--shadow-2), 0 0 70px rgba(255, 110, 70, 0.18); }
.help-card h2 { margin: 0 0 0.5rem; font-size: 1.5rem; line-height: 1.15; color: var(--gold); text-shadow: 0 2px 0 rgba(60, 25, 0, 0.55); }
.help-card ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; font-size: 0.92rem; line-height: 1.4; }
.help-x { position: absolute; top: 0.65rem; right: 0.65rem; }
/* in-app dialogs (dialog.js) — above every other overlay */
.help.dialog { z-index: 80; background: rgba(20, 4, 9, 0.68); }
.dialog-card { width: min(420px, 92vw); display: grid; gap: 0.8rem; padding: 1.2rem 1.3rem; }
.dialog-card h2 { margin: 0; font-size: 1.4rem; color: var(--ink); }
.dialog-card p { margin: 0; color: var(--ink-2); font-size: 0.95rem; line-height: 1.45; }
.dlg-row { display: flex; justify-content: flex-end; gap: 0.55rem; flex-wrap: wrap; margin-top: 0.2rem; }
/* How to play: short sections, a ranking ladder and the steps of a round */
.help-card.rules { display: grid; gap: 0.8rem; line-height: 1.5; font-size: 0.95rem; }
.help-card.rules h2 { margin: 0; padding-right: 2.8rem; }
.rules-lead { margin: 0; color: var(--ink); font-weight: 800; font-size: 1.02rem; }
.help-card.rules section { display: grid; gap: 0.3rem; padding: 0.7rem 0.85rem; border-radius: 16px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.help-card.rules h3 { margin: 0; font-size: 1.12rem; color: var(--gold); }
.help-card.rules p { margin: 0; }
.rules-note { color: var(--muted); font-size: 0.9rem; }
.ladder, .steps { margin: 0; padding-left: 1.5rem; display: grid; gap: 0.3rem; }
.ladder li::marker { color: var(--gold); font-weight: 900; }
.steps li::marker { color: var(--muted); font-weight: 800; }
.rules-foot { text-align: center; }

/* the deck in front of the banker: cards are dealt from here */
.deck { position: absolute; transform: translate(-50%, -50%) rotate(-8deg); height: calc(var(--card-h) * 0.85); aspect-ratio: 167 / 243; z-index: 3; pointer-events: none; filter: drop-shadow(0 6px 7px rgba(0,0,0,0.45)); }
.deck.small { height: calc(var(--card-h) * 0.62); } /* (9 Nov) a crowded table with no free place for the deck (table.js placeDeck):
   about ¾ of its size — at 1024×600 in round 2+ it lay on a bet */
@media (max-height: 500px) { .deck.small { height: calc(var(--card-h) * 0.46); } } /* (a phone: the deck is already 0.64 — ¾ of that) */
.deck i { position: absolute; inset: 0; border-radius: 6%/4.2%; background: url(cards/back.webp?v=6) center / cover; box-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.deck i:nth-child(1) { transform: translate(3px, 3px); }
.deck i:nth-child(2) { transform: translate(2px, 2px); }
.deck i:nth-child(3) { transform: translate(1px, 1px); }
.callout.warn { color: #ffd76a; font-size: clamp(1.1rem, 5.5vh, 2rem); }
.spot .amt .warn { color: #ffd76a; margin-left: 0.3em; }

/* countdown: main timer seconds + ring around everyone who still has to act */
.timer-row { display: flex; align-items: center; justify-content: center; gap: 0.45rem; }
.timer-row .timer { margin: 0.4rem 0 0; }
.center.no-timer .timer-row { visibility: hidden; } /* keeps its space, so nothing below it jumps */
/* one line tall even while empty: the row keeps its height when the seconds appear, so the bet bar below never jumps
   under a finger (2 Nov: it moved 13 px as a phase's clock started and a quick tap on ×5 was lost) */
.timer-sec { min-width: 2.2em; min-height: 1.2em; line-height: 1.2; margin-top: 0.4rem; font-weight: 900; font-size: 0.95rem; color: var(--gold); text-align: left; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
.avatar-wrap { position: relative; display: inline-flex; flex: none; }
.ring { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); transform: rotate(-90deg); pointer-events: none; display: none; }
.seat.turn .ring, .pk-seat.turn .ring, .rm-seat.turn .ring { display: block; }
.ring circle { fill: none; stroke-width: 2.8; }
.ring .track { stroke: rgba(12, 2, 6, 0.6); }
.ring .prog { stroke: #6dffad; stroke-linecap: round; transition: stroke-dashoffset 0.2s linear, stroke 0.3s; filter: drop-shadow(0 0 1.5px rgba(109, 255, 173, 0.9)); }
/* a win that is decided but not paid yet: gold; once its coins arrive it turns green */
.outcome.win:not(.paid) { background: linear-gradient(180deg, #fff2a8, #ffc93f 55%, #e99a17); border-color: #fff5cf; color: #3d2200; text-shadow: 0 1px 0 rgba(255, 246, 210, 0.6);
  box-shadow: 0 0 22px rgba(255, 200, 70, 0.55), 0 6px 14px rgba(0,0,0,0.5); }
/* lobby: still seated at a table */
.seated { display: flex; align-items: center; gap: 0.6rem; margin: 0.6rem 1rem 0; padding: 0.55rem 0.85rem; border-radius: 16px;
  background: rgba(255, 208, 64, 0.15); border: 1.5px solid rgba(255, 208, 64, 0.55); font-size: 0.95rem; }
.seated span { flex: 1; }

.peek-card .top-face { position: absolute; inset: 0; display: block; }

.seat.gone { display: none; }

/* text face shown under the card image: only visible if the image is missing */
.face-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #fff; color: #111; font-weight: 900; line-height: 1; }
.face-fallback b { font-size: 2.2em; }
.face-fallback i { font-style: normal; font-size: 2.4em; }
.face-fallback.red { color: #d0202b; }
/* image after the fallback in the markup + positioned (no z-index) = painted over it, without
   changing which card lies on top of which */
.card .face img, .peek-card img, .mini img { position: relative; }
.card .face { container-type: size; }
.mini { position: relative; container-type: size; }
.card .face .face-fallback { font-size: 22cqh; }
.peek-card .face-fallback, .mini .face-fallback { font-size: 14cqh; }
.peek-card .top-face, .peek-card.bottom { container-type: size; }

.peek-card.bottom { z-index: 1; }
.peek-card.top { z-index: 2; }
.outcome.win.short { font-size: 0.95rem; }

/* Phones in landscape. Everything you tap is at least ~35 px tall (Apple asks 44 pt, Material 48 dp — on a phone held
   sideways with 8 seats we get as close as the table allows) and no word on the table is smaller than 11 px. */
@media (max-height: 500px) {
  .actions { gap: 0.3rem; padding: 0.28rem 0.38rem; max-width: 62vw; margin-top: 0.35rem; flex-wrap: wrap; justify-content: center; border-radius: 22px; }
  .phase .ph-more { display: none; } /* phones: the main line only */
  .chips .opt { display: none; } /* ×2 / ×5: the slider does it; keeps the bet bar on one row */
  .actions .lbl-l, .actions .you-score { display: none; }
  .actions .lbl-s { display: inline; }
  .actions .btn { font-size: 0.98rem; min-height: 2.35rem; padding: 0.15em 0.95em; }
  .actions .bet-amount { font-size: 0.98rem; min-width: 2.6em; }
  .actions input[type=range] { width: 116px; }
  .actions .chips button { width: 2.35rem; height: 2.35rem; font-size: 0.8rem; }
  /* slightly smaller chips so bets fit between the cards on a phone */
  .spot { gap: 2px; }
  .spot .stack { min-height: 16px; }
  .spot .col { width: 22px; height: calc(15px + (var(--n) - 1) * 3px); }
  .chip { width: 22px; height: 15px; bottom: calc(var(--k) * 3px); }
  .spot.bank .col { width: 25px; height: calc(17px + (var(--n) - 1) * 3px); }
  .spot.bank .chip { width: 25px; height: 17px; }
  .spot .amt { font-size: 0.7rem; }
  .spot.bank .amt { font-size: 0.76rem; }
  /* banker badge sits above the plate, clear of the name */
  .tags { top: -16px; left: calc(100% - 12px); right: auto; }
  .seat.at-right .tags { left: auto; right: calc(100% - 12px); }
  .badge { font-size: 0.7rem; }
  /* a seat at the very top edge: badge beside the plate instead (above would be off screen) */
  .seat.at-edge .tags { top: 50%; right: auto; left: 100%; transform: translateY(-50%); margin-left: 4px; }
  .center { top: 33%; }
  .phase .ph-main { font-size: 1.12rem; }
  .deck { height: calc(var(--card-h) * 0.64); } /* a smaller deck fits beside the bank pile (4 Nov: 0.72 → 0.64 — at 667×375 with 8 bigger framed faces it grazed a bet, BUGS #108) */
  /* name plates: compact, but the name and balance stay easy to read */
  :root { --av: 38px; }
  .plate { padding: 2px 0.7rem 2px 2px; gap: 0.35rem; }
  .plate .name { font-size: 0.8rem; max-width: 80px; }
  .plate .money { font-size: 0.76rem; }
  .score { font-size: 0.76rem; }
  .seat.you .score { font-size: 0.9rem; }
  .outcome { font-size: 1.05rem; }
  .float { font-size: 1rem; }
  .float.do { font-size: 1.25rem; }
  .log { font-size: 0.78rem; }
  .timer-sec { font-size: 0.88rem; }
}

/* short phone screens (360-375 px tall, e.g. 740x360, 667x375): a slimmer middle column and bet bar */
@media (max-height: 370px), (max-height: 500px) and (max-width: 700px) {
  .center { top: 32%; }
  .phase .ph-main { font-size: 1.04rem; }
  .timer-row .timer, .timer-sec { margin-top: 0.25rem; }
  .actions { margin-top: 0.25rem; padding: 0.2rem 0.3rem; gap: 0.25rem; }
  .actions .btn { font-size: 0.92rem; min-height: 2.2rem; padding: 0.1em 0.8em; }
  .actions .chips button { width: 2.2rem; height: 2.2rem; font-size: 0.76rem; }
  .actions input[type=range] { width: 100px; }
  .actions .bet-amount { font-size: 0.9rem; }
  /* a slimmer top bar, so the seat at the top centre fits between its buttons even with a long name — 32 px buttons
     (#71: at 34 px the seven buttons reached over the top-centre seat, the layout then pushed that seat below the bar and
     its cards landed on the middle text) */
  .table-top { padding: 0.22rem 0.4rem; gap: 0.25rem; }
  .table-top .stakes-part { display: none; }
  .table-top .my-coins { font-size: 0.8rem; }
  .table-top .btn { font-size: 0.86rem; min-height: 2rem; padding: 0.1em 0.6em; }
  .table-top .btn.icon-btn { min-width: 2rem; padding: 0; }
  .seat.at-edge .plate .name { max-width: 60px; }
}
/* big screens (a 1080p monitor and up): plates, cards and the middle text a little bigger, so the table isn't sparse */
@media (min-width: 1500px) and (min-height: 860px) {
  :root { --av: 56px; --card-h: clamp(50px, 15vh, 112px); --my-card-h: clamp(78px, 24vh, 172px); }
  .plate .name { font-size: 0.98rem; max-width: 120px; }
  .plate .money { font-size: 0.9rem; }
  .badge { font-size: 0.78rem; }
  .phase .ph-main { font-size: 1.55rem; }
  .phase .ph-more { font-size: 0.94rem; }
  .actions .btn { font-size: 1.2rem; min-height: 3rem; }
  .actions .chips button { width: 3rem; height: 3rem; font-size: 0.92rem; }
}
/* phones: your own cards fan a little tighter (corners still readable), room for your neighbours' 3 cards */
@media (max-height: 500px) and (max-width: 900px) {
  .seat.you .hand .card + .card { margin-left: calc(var(--my-card-h) * -0.34); }
}

/* very small screens (old small phones, 568x320): compact cards, plates and top bar so 8 players fit */
@media (max-height: 340px), (max-width: 600px) {
  :root { --card-h: 40px; --my-card-h: 64px; --av: 30px; }
  .lvl-pip { display: none; } /* too small to read on a face this size */
  .table-top { padding: 0.2rem 0.35rem; gap: 0.2rem; }
  .table-top .btn { font-size: 0.8rem; min-height: 1.75rem; padding: 0.1em 0.5em; }
  .table-top .btn.icon-btn { min-width: 1.75rem; padding: 0; }
  .table-top .room-line { font-size: 0.72rem; }
  .plate { padding: 0.1rem 0.5rem 0.1rem 0.1rem; gap: 0.28rem; }
  .plate .name { font-size: 0.7rem; max-width: 62px; }
  .plate .money { font-size: 0.68rem; }
  .phase .ph-main { font-size: 0.96rem; }
  .actions { max-width: 68vw; }
  .actions .btn { font-size: 0.86rem; min-height: 2rem; padding: 0.1em 0.7em; }
  .actions .chips button { width: 2rem; height: 2rem; font-size: 0.7rem; }
  /* the banker's "Tap players to catch" hint: the tap still works, but on the smallest phone its words would push the
     buttons onto a second row over the bets — the bar keeps to one row */
  .actions .bet-amount.dim { display: none; }
}
/* ---------- the landing (create / join / your room) ---------- */
/* (the home screen's styles are in the v3 block at the end of this file) */
.join-box { display: grid; gap: 0.6rem; }
.join-row { display: flex; gap: 0.5rem; align-items: stretch; width: 100%; }
.join-row input { flex: 1; min-width: 0; padding: 0.55rem; border-radius: 14px; border: 2px solid rgba(255, 255, 255, 0.28); background: rgba(23, 9, 13, 0.55); color: #fff; font: inherit; font-size: 1.2rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.24em; text-align: center; font-family: ui-monospace, Consolas, monospace; }
.join-row input:focus { border-color: #fff; }
.join-row input::placeholder { letter-spacing: 0.24em; color: rgba(255, 255, 255, 0.35); }
.rooms-foot { display: flex; align-items: center; justify-content: center; gap: 0.6rem 1rem; flex-wrap: wrap; text-align: center; }
.big-choice { font-size: 1.2rem; padding: 0.8em 1.2em; width: 100%; box-sizing: border-box; }
/* the table you're at: a gold-framed card with a felt strip, like the table cards below it */
.room-card { position: relative; overflow: hidden; border-radius: 22px; padding: 1.15rem 1.25rem 1rem; display: grid; gap: 0.5rem;
  border: 2px solid transparent; background: linear-gradient(170deg, #4c1c2d, #250b14) padding-box, var(--metal-edge) border-box; box-shadow: 0 10px 26px rgba(14, 1, 5, 0.5); }
.room-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 7px; background: linear-gradient(90deg, #0e7a45, #2fd27a 50%, #0e7a45); }
.rc-head { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.rc-head b { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; }
.rc-coins { font-size: 1.1rem; font-weight: 900; color: var(--gold); }
.rc-sub { color: var(--muted); font-size: 0.92rem; }
.rc-closing { color: #ffb8be; font-weight: 800; font-size: 0.92rem; }
.rc-btns { display: flex; gap: 0.55rem; flex-wrap: wrap; align-items: center; margin-top: 0.3rem; }
.rc-btns #btn-continue { font-size: 1.15rem; }
/* the my-coins chip in the table top bar, and the sit button over the felt */
.my-coins { font-size: 0.95rem; font-weight: 900; color: var(--gold); white-space: nowrap; }
.sit-btn { font-size: 1.15rem; padding: 0.55em 1.5em; }
/* the owner's lobby: the room code right on the felt + Invite friends */
.lobby-invite .lbl-short { display: none; }
.lobby-invite { white-space: nowrap; display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 0.5rem; padding: 0.3rem 0.35rem 0.3rem 0.9rem;
  border-radius: 999px; border: 2px solid transparent; background: linear-gradient(180deg, #4c1c2d, #250b14) padding-box, var(--metal-edge) border-box;
  font-size: 0.9rem; font-weight: 800; color: var(--muted); pointer-events: auto; box-shadow: var(--shadow-1); }
.lobby-invite .code { font-size: 1.1rem; font-weight: 900; padding: 0.1rem 0.5rem; cursor: pointer; color: #fff; }
/* (11 Nov, BUGS #144) an upright phone: "Invite friends" ran off the right edge — the button says "Invite", like a short screen */
@media (max-width: 520px) {
  /* the felt's middle column is narrower than the pill: centre it on the column and let it spread over the rails */
  .lobby-invite { display: flex; width: max-content; max-width: calc(100vw - 24px); margin-left: 50%; transform: translateX(-50%);
    gap: 0.4rem; padding: 0.2rem 0.25rem 0.2rem 0.75rem; }
  .lobby-invite .lbl { display: none; }
  .lobby-invite .lbl-short { display: inline; }
}
.invite-card { width: min(460px, 94vw); display: grid; gap: 0.8rem; text-align: center; }
.invite-card h2 { margin: 0; padding: 0 2.2rem; }
.invite-code { justify-self: center; font-size: 2.2rem; font-weight: 900; letter-spacing: 0.3em; padding: 0.35rem 0.45rem 0.35rem 0.8rem; border: 2px dashed rgba(255, 208, 64, 0.7); color: var(--gold); cursor: pointer; }
.invite-btns { display: grid; gap: 0.55rem; }
.invite-link { word-break: break-all; font-family: ui-monospace, Consolas, monospace; font-size: 0.82rem; }
@media (max-height: 500px) {
  .lobby-invite { margin-top: 0.3rem; font-size: 0.8rem; gap: 0.35rem; padding: 0.15rem 0.2rem 0.15rem 0.6rem; }
  .lobby-invite .li-label, .lobby-invite .lbl { display: none; }
  .lobby-invite .lbl-short { display: inline; }
  .lobby-invite .btn { font-size: 0.84rem; min-height: 2.1rem; padding: 0.2em 0.8em; }
  .lobby-invite .code { font-size: 0.95rem; }
  #btn-invite .lbl { display: none; } /* icon only on phones */
  /* phones: every top-bar button is icon-only, so the bar keeps the top-centre of the screen free for a seat */
  .table-top .btn .lbl { display: none; }
  .table-top .btn { padding-left: 0.55em; padding-right: 0.55em; }
  #btn-break.gold { box-shadow: 0 0 0 2px rgba(255, 208, 64, 0.6), 0 0 12px rgba(255, 208, 64, 0.45); } /* on a break: the ▶ button glows */
  .invite-code { font-size: 1.5rem; }
}
/* dev console invites + coin log */
.dv-invites { display: grid; gap: 0.35rem; }
.inv-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.92rem; }
.inv-row .code { font-size: 1.05rem; letter-spacing: 0.12em; }
.coin-log { display: grid; gap: 0.2rem; max-height: 22vh; overflow-y: auto; font-size: 0.88rem; color: var(--muted); }
.vote-close { display: grid; gap: 0.25rem; justify-items: start; }
.vote-close:empty { display: none; }
.vote-close .hint { margin: 0; }
/* the room panel's footer, pinned to the bottom on every tab: Close this room (owner) or the vote (players at the
   table). The shadow paints the card's bottom padding so nothing scrolls through under it. */
/* the room's closing countdown in the panel's footer */
.closing-when { font-size: 0.9rem; font-weight: 900; color: #ffd28a; }
/* a choice inside an in-app dialog (e.g. Close in: 15 s · 1 min · 5 min · 10 min) */
.dlg-choice { display: grid; gap: 0.4rem; justify-items: start; }
.dlg-choice-label { font-size: 0.88rem; font-weight: 800; color: var(--muted); }
.rp-foot { position: sticky; bottom: 0; z-index: 2; display: grid; gap: 0.4rem; justify-items: start; margin: 0 -1.3rem;
  padding: 0.6rem 1.3rem 0.15rem; background: #250b14; border-top: 1px solid var(--line);
  box-shadow: 0 1.1rem 0 #250b14; }
.cl-row { padding: 0.25rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.room-panel-card .code-row { margin-bottom: 0.4rem; }
.room-panel-card { display: grid; gap: 0.75rem; align-content: start; }
.room-panel-card h2 { margin: 0; padding-right: 2.8rem; }
.room-panel-card h3 { margin: 0.1rem 0 0.2rem; font-size: 1.1rem; }
/* tabs in a panel: a sunk track, the open tab a raised gold one */
.rp-tabs { display: flex; gap: 0.25rem; padding: 0.28rem; border-radius: 16px; background: var(--panel-lo); box-shadow: inset 0 2px 5px rgba(0,0,0,0.35); overflow-x: auto; }
.rp-tab { flex: 1; min-width: max-content; min-height: 2.35rem; padding: 0.4em 0.9em; border: 0; border-radius: 12px; background: transparent; color: var(--muted);
  font: inherit; font-family: var(--font-display); font-weight: 400; font-size: 1rem; letter-spacing: 0.02em; cursor: pointer; }
.rp-tab:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
.rp-tab.active { background: linear-gradient(180deg, #fff0a6, #ffcb45 55%, #f2a01b); color: #3d2200; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 2px 0 #a8650a; }
.rp-pane { display: grid; gap: 0.5rem; align-content: start; }
/* leaderboard + trade */
.leaderboard { display: grid; gap: 0.25rem; margin-bottom: 0.3rem; }
.lb-row { display: flex; align-items: center; gap: 0.65rem; min-height: 2.6rem; padding: 0.35rem 0.65rem; border-radius: 12px; background: rgba(255,255,255,0.06); }
.lb-rank { width: 1.6rem; text-align: center; color: var(--muted); font-weight: 900; }
.lb-name { flex: 1; font-weight: 800; }
.lb-name.me { color: var(--gold); font-weight: 900; }
.lb-pnl { font-weight: 900; font-variant-numeric: tabular-nums; min-width: 3.4em; text-align: right; }
.lb-pnl.up { color: var(--win); } .lb-pnl.down { color: var(--lose); } .lb-pnl.flat { color: var(--muted); }
.lb-coins { color: var(--muted); font-size: 0.9rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.lb-coins.down { color: var(--lose); } /* a negative (in-the-red) balance in the standings */
.lb-row.neg { background: rgba(255, 77, 94, 0.12); }
.lb-row.mine { box-shadow: inset 0 0 0 1.5px rgba(255, 208, 64, 0.6); background: rgba(255, 208, 64, 0.08); }
/* the last hand */
.last-card { width: min(580px, 94vw); display: grid; gap: 0.65rem; }
.last-card h2 { margin: 0; padding-right: 2.8rem; }
.lh-list { display: grid; gap: 0.4rem; }
.lh-row { display: grid; grid-template-columns: minmax(6.5rem, 1fr) auto 4.6rem 5rem; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0.7rem; border-radius: 14px; background: rgba(255,255,255,0.06); }
.lh-row.mine { box-shadow: inset 0 0 0 1.5px rgba(255, 208, 64, 0.6); }
.lh-who { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.4rem; min-width: 0; }
.lh-how { flex-basis: 100%; font-size: 0.8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* which catch took the hand */
.lh-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 900; }
.lh-cards { display: flex; gap: 3px; align-items: center; }
.lh-card { position: relative; display: block; height: 46px; aspect-ratio: 167 / 243; border-radius: 4px; overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.5); container-type: size; }
.lh-card img { position: relative; width: 100%; height: 100%; display: block; }
.lh-card .face-fallback { font-size: 22cqh; }
.lh-score { justify-self: start; position: static; margin: 0; animation: none; }
.lh-res { justify-self: end; font-weight: 900; font-variant-numeric: tabular-nums; }
.lh-res.win { color: var(--win); } .lh-res.lose { color: var(--lose); } .lh-res.push { color: var(--muted); }
@media (max-width: 520px) { .lh-row { grid-template-columns: 1fr auto; } .lh-score, .lh-res { justify-self: start; } }
/* connection lost: a steady badge until we're back */
.net-status { position: fixed; top: calc(0.5rem + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 9000; display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.95rem; border-radius: 999px; background: linear-gradient(180deg, #ff6b78, #c41d35); color: #fff; font-weight: 900; font-size: 0.92rem;
  box-shadow: 0 3px 0 #7a0f20, var(--shadow-1); text-shadow: 0 1px 0 rgba(90, 0, 15, 0.6); }
.net-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #ffd0d4; animation: netpulse 1s ease-in-out infinite; }
@keyframes netpulse { 50% { opacity: 0.25; } }
/* the final scoreboard (a room closed): a trophy moment — gold, silver and bronze rows on top */
.final-card { width: min(460px, 94vw); display: grid; gap: 0.65rem; text-align: center; }
.final-card h2 { margin: 0; font-size: 1.8rem; }
.final-list { text-align: left; max-height: 55vh; overflow-y: auto; }
.final-list .lb-row { padding: 0.5rem 0.8rem; font-size: 1.05rem; }
.final-list .lb-rank { width: 2rem; font-size: 1.15rem; }
.final-list .lb-row:nth-child(1) { background: linear-gradient(90deg, rgba(255, 208, 64, 0.32), rgba(255, 208, 64, 0.08)); box-shadow: inset 0 0 0 1.5px rgba(255, 208, 64, 0.65); }
.final-list .lb-row:nth-child(2) { background: linear-gradient(90deg, rgba(220, 226, 255, 0.2), rgba(220, 226, 255, 0.05)); }
.final-list .lb-row:nth-child(3) { background: linear-gradient(90deg, rgba(232, 150, 92, 0.24), rgba(232, 150, 92, 0.05)); }
.final-list .lb-coins { font-size: 1rem; font-weight: 900; color: var(--ink); }
.final-list .lb-coins.down { color: var(--lose); }

/* throw coins: tap another player's plate at the table to fling them chips */
.seat.throwable .plate { cursor: pointer; }
.seat.throwable:hover .plate { outline: 2px solid rgba(255, 208, 64, 0.65); outline-offset: 1px; }
.throw-pop { position: absolute; z-index: 15; padding: 0.6rem 0.7rem; display: grid; gap: 0.45rem; min-width: 172px; border-radius: 16px;
  border: 2px solid transparent; background: linear-gradient(180deg, #491d2c, #240b14) padding-box, var(--metal-edge) border-box; box-shadow: 0 10px 26px rgba(14, 1, 5, 0.6); }
.throw-pop.hidden { display: none; }
.tp-title { font-size: 0.92rem; font-weight: 900; color: var(--gold); }
.tp-quick { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tp-row { display: flex; gap: 0.35rem; }
.tp-amt { flex: 1; min-width: 0; padding: 0.35em 0.6em; border-radius: 12px; border: 1.5px solid var(--line-soft); background: var(--panel-lo); color: var(--ink); font: inherit; font-weight: 800; }

/* the admin (dev) account: management only */
.admin-only-note { margin: 1rem; padding: 0.85rem 1.05rem; border-radius: 16px; background: rgba(255, 208, 64, 0.14);
  border: 1.5px solid rgba(255, 208, 64, 0.5); font-size: 0.95rem; line-height: 1.5; }
.trade-row { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.trade-row select, .trade-row input { padding: 0.45rem 0.55rem; border-radius: 10px; border: 1.5px solid var(--line-soft); background: var(--panel-lo); color: inherit; font: inherit; }
.trade-row select { flex: 1; min-width: 7rem; }
.trade-row input { width: 7rem; }
/* chat history (incl. the balance log) */
.chat-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; gap: 0.25rem; font-size: 0.92rem; align-content: start; }
.cl-msg { padding: 0.2rem 0.4rem; border-radius: 8px; }
.cl-msg:nth-child(odd) { background: rgba(255, 255, 255, 0.03); }
.cl-msg.system { color: var(--gold); font-size: 0.84rem; font-weight: 800; opacity: 0.9; }

/* ---------- admin ---------- */
/* Dev console: the top bar stays put, the content (incl. the full accounts list) scrolls. (Was wrongly keyed to
   #screen-admin, which doesn't exist — so nothing scrolled and long lists were cut off.) */
#screen-dev { display: flex; flex-direction: column; }
#screen-dev .admin-wrap { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#screen-dev .topbar { background: linear-gradient(180deg, rgba(77, 26, 44, 0.97), rgba(37, 11, 20, 0.97)); box-shadow: inset 0 -2px 0 rgba(255, 208, 64, 0.42); }
#screen-dev .topbar .who { font-family: var(--font-display); font-size: 1.2rem; }
#screen-dev .topbar .who b { font-weight: 400; }
#screen-dev .topbar .who .ic { color: var(--gold); }
.admin-wrap { display: grid; gap: 0.85rem; padding: 0.95rem 1rem 2rem; max-width: 760px; margin: 0 auto; width: 100%; }
.admin-card { border-radius: 18px; padding: 0.95rem 1.05rem; display: grid; gap: 0.6rem; background: linear-gradient(180deg, #411927, #250b14); border: 1.5px solid rgba(255, 214, 120, 0.22); }
.admin-card h3 { margin: 0; font-size: 1.2rem; color: var(--gold); }
.admin-card .muted { color: var(--muted); font-family: var(--font-ui); font-weight: 700; font-size: 0.9rem; }
.code-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.code { font-size: 1.5rem; font-weight: 900; letter-spacing: 0.18em; font-family: ui-monospace, Consolas, monospace; padding: 0.15rem 0.6rem; border-radius: 12px; background: var(--panel-lo); box-shadow: inset 0 2px 4px rgba(0,0,0,0.35); }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.55rem 0.85rem; }
.field-grid label, .field-row label { display: grid; gap: 0.25rem; font-size: 0.86rem; font-weight: 800; color: var(--muted); }
.field-grid label.check { display: flex; align-items: center; justify-content: flex-start; gap: 0.45rem; font-size: 0.95rem; color: inherit; align-self: end; padding-bottom: 0.45rem; }
.field-grid label.check input { width: auto; margin: 0; transform: scale(1.25); }
label.check { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; }
label.check input { width: auto !important; margin: 0; transform: scale(1.2); }
.admin-card input[type=number], .admin-card input[type=text] { width: 100%; box-sizing: border-box; padding: 0.42rem 0.55rem; border-radius: 10px;
  border: 1.5px solid var(--line-soft); background: var(--panel-lo); color: inherit; font: inherit; font-weight: 800; }
.member-list { display: grid; gap: 0.5rem; }
.member-row { border-radius: 14px; padding: 0.6rem 0.75rem; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); display: grid; gap: 0.45rem; }
.member-row .top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.member-row .pname { font-weight: 900; }
.member-row .tag { font-size: 0.76rem; font-weight: 800; padding: 0.08rem 0.5rem; border-radius: 999px; background: rgba(255,255,255,0.12); }
.member-row .tag.on { background: #168a50; }
.member-row .tag.blocked { background: var(--red); }
.member-row .tag.admin { background: #2f7fe0; }
.member-row .tag.guest { background: #7a6a9a; }
.member-row .coins-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.member-row .coins-row .cc-now { font-size: 0.88rem; font-weight: 900; color: var(--gold); }
/* coin stepper: set a balance with taps (−/+ , presets) — no keyboard needed */
.cc { display: flex; flex-direction: column; gap: 0.4rem; }
.cc-top { display: flex; align-items: center; gap: 0.4rem; }
.cc-step { min-width: 2.4rem; font-weight: 900; font-size: 1.1rem; line-height: 1; }
.cc-val { min-width: 5.5rem; text-align: center; font-weight: 900; font-size: 1rem; padding: 0.4em 0.6em; border-radius: 12px;
  background: var(--panel-lo); color: var(--ink); border: 1.5px solid var(--line-soft); cursor: text; }
.cc.dirty .cc-val { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 0 2px rgba(255, 208, 64, 0.3); }
.cc-presets { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.btn.gold:disabled { opacity: 0.45; filter: grayscale(0.4); cursor: default; }
.member-row .more { display: none; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.member-row.open .more { display: flex; }
.member-row .more input { width: 9rem; }
/* dev console: rooms & balances */
.dv-rooms { display: grid; gap: 0.6rem; }
.dv-room { border-radius: 14px; padding: 0.6rem 0.75rem; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); display: grid; gap: 0.45rem; }
.dv-room-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.dv-room-head b { font-size: 1.05rem; font-weight: 900; }
.dv-room-head .hint { flex: 1; }
.dv-room .rc-coins { font-size: 0.92rem; color: var(--gold); }

/* ---------- break / busted / on credit ---------- */
/* Fade a seat when the player is OUT of the play — a personal break (#btn-break → `away`) or busted out (`busted`,
   31 Oct). Being low on coins / in the red (`broke` — still playing, on credit) is shown by the badge only. */
.seat.away .hand, .seat.busted .hand { opacity: 0.45; }
.badge.away { background: linear-gradient(180deg, #5a3d0a, #352205); color: var(--gold); border-color: rgba(255, 208, 64, 0.6); }
.badge.broke { background: linear-gradient(180deg, #6e1424, #3e0912); color: #ffb3b9; border-color: rgba(255, 92, 108, 0.6); }
.badge.busted { background: linear-gradient(180deg, #8a1428, #4a0812); color: #ffe0e3; border-color: rgba(255, 92, 108, 0.8); }
.badge.ready { background: linear-gradient(180deg, #1d8a50, #0e5a31); color: #d8ffe9; border-color: rgba(120, 255, 180, 0.6); }
.seat.in-red .money { color: #ff8d98; } /* a debt (negative balance) shows red */
/* the banker has tapped this player to catch them next */
.seat.catch-sel { outline: 2.5px solid var(--gold); outline-offset: 2px; border-radius: 14px; }
.seat.catch-sel .plate { box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(255, 208, 64, 0.7); }
.actions .bet-amount.dim { color: var(--muted); font-weight: 800; }
/* the bet bar of a player betting on credit (can't cover the minimum) */
.credit-tag { font-size: 0.78rem; font-weight: 900; padding: 0.15rem 0.55rem; border-radius: 999px; white-space: nowrap;
  background: rgba(255, 77, 94, 0.24); color: #ffc0c6; border: 1.5px solid rgba(255, 92, 108, 0.65); }
/* the bottle-spin that picks the first banker */
/* It spins just below the middle text (table.js sets the top), centred on the table; the clock and the news line make way */
.spinner { --spin: clamp(84px, 20vh, 148px); position: absolute; left: 50%; top: 52%; transform: translateX(-50%); z-index: 6; pointer-events: none; display: grid; place-items: center; }
.felt.spinning .timer-row, .felt.spinning #log-line { visibility: hidden; }
/* the bottle is drawn (the 🍾 emoji differs per phone and leans): its neck points straight up at 0°, so it aims true */
.spinner .bottle { grid-area: 1 / 1; position: relative; width: calc(var(--spin) * 0.15); height: calc(var(--spin) * 0.54);
  transform-origin: 50% 50%; will-change: transform; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 10px rgba(255, 214, 120, 0.35)); }
.spinner .bottle::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; border-radius: 40% 40% 18% 18% / 22% 22% 10% 10%;
  background: linear-gradient(90deg, #0b3a21 0%, #1d7a45 34%, #5cc98b 44%, #1d7a45 56%, #0b3a21 100%); } /* the body: green glass */
.spinner .bottle::after { content: ''; position: absolute; left: 31%; right: 31%; top: 0; height: 44%; border-radius: 35% 35% 0 0 / 14% 14% 0 0;
  background: linear-gradient(180deg, #f8d57d 0%, #c9962e 40%, #1d7a45 41%, #0b3a21 100%); } /* the neck under its gold foil */
/* a clockwise ring (the gap + arrowhead rotate clockwise) shows which way the bank passes */
.spinner .spin-ring { grid-area: 1 / 1; width: var(--spin); height: var(--spin); border-radius: 50%;
  border: 3px dashed rgba(255, 214, 110, 0.7); border-right-color: transparent; border-bottom-color: transparent;
  animation: spin-cw 2.2s linear infinite; }
@keyframes spin-cw { to { transform: rotate(360deg); } }
.spinner .spin-dir { grid-area: 1 / 1; align-self: end; transform: translateY(calc(100% + 6px)); white-space: nowrap;
  font-size: 0.86rem; font-weight: 900; color: var(--gold); text-shadow: 0 1px 3px #000; }
/* on a break, the button that brings you back is a lit gold button (it was dark words on the dark top bar, ~1:1) */
#btn-break.gold, #btn-break.gold:hover:not(:disabled) { color: #3a1a00; text-shadow: 0 1px 0 rgba(255, 246, 210, 0.55);
  background: linear-gradient(180deg, #fff1a8, #ffc23d 50%, #e39a1c);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 3px 0 #9a5a0c, 0 0 14px rgba(255, 208, 64, 0.55); }
.dev-tools { position: absolute; left: 0.4rem; bottom: 0.4rem; z-index: 4; display: flex; gap: 0.3rem; opacity: 0.8; }
.dev-tools .btn { font-size: 0.7rem; min-height: 1.8rem; padding: 0.2em 0.6em; }
/* ---------- build version tag + "new version ready" banner ---------- */
/* Shows which build the page is actually running, and a one-tap reload when a newer build is deployed. This is
   how we tell stale-tab from real-bug: if the tag doesn't match the deployed SHA, the player is on old code. */
#build-tag { position: fixed; right: 4px; bottom: 3px; z-index: 50; font-size: 0.6rem; line-height: 1;
  color: rgba(255,255,255,0.4); font-family: ui-monospace, monospace; cursor: pointer; letter-spacing: 0.02em; }
#update-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; border: 0; padding: 0.6rem 0.75rem;
  padding-top: calc(0.6rem + env(safe-area-inset-top, 0px)); /* (B1, 11 Nov) its colour fills a notch strip, the words sit under it */
  background: linear-gradient(180deg, #fff0a6, #ffcb45 55%, #f2a01b); color: #3d2200; font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; letter-spacing: 0.02em;
  cursor: pointer; text-align: center; box-shadow: 0 3px 0 #a8650a, 0 6px 16px rgba(0,0,0,0.45); }
#update-bar.hidden { display: none; }

/* the room code is tap-to-copy */
#rp-code { cursor: pointer; }
#rp-code:hover { color: var(--gold); }

/* ---------- settings (this device) + the table's sound popover ---------- */
.settings-card { width: min(480px, 94vw); display: grid; gap: 0.75rem; }
.settings-card h2 { margin: 0; padding-right: 2.8rem; }
.set-sec { display: grid; gap: 0.5rem; padding: 0.8rem 0.95rem; border-radius: 18px; background: rgba(255,255,255,0.05); }
.set-sec h3 { margin: 0; font-size: 1.15rem; color: var(--gold); }
.set-sec .hint { margin: 0; font-size: 0.86rem; }
.set-row { display: flex; align-items: center; gap: 0.65rem; min-height: 2.6rem; font-size: 1rem; font-weight: 700; }
.set-row > span { flex: 1; }
/* Settings → Cards (5 Nov): each corner style as two real cards, picked by tapping it */
.corner-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 0.6rem; }
.cp-opt { display: grid; justify-items: center; align-content: start; gap: 0.25rem; padding: 0.7rem 0.6rem 0.6rem; border: 0; border-radius: 16px; cursor: pointer; font: inherit; color: var(--ink);
  background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1.5px rgba(255, 214, 120, 0.18); }
.cp-opt:hover { background: rgba(255, 255, 255, 0.1); }
.cp-opt.on { background: rgba(255, 203, 69, 0.14); box-shadow: inset 0 0 0 2.5px var(--gold), 0 0 14px rgba(255, 203, 69, 0.35); }
.cp-opt b { font-size: 0.98rem; }
.cp-opt small { color: var(--muted); font-size: 0.8rem; font-weight: 700; text-align: center; line-height: 1.25; }
.cp-cards { display: flex; justify-content: center; padding: 0.15rem 0 0.35rem; }
.cp-cards img { height: 5.6rem; aspect-ratio: 167 / 243; border-radius: 6% / 4.2%; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45); }
.cp-cards img + img { margin-left: -1.1rem; transform: rotate(7deg) translateY(0.15rem); }
.cp-cards img:first-child { transform: rotate(-5deg); }
/* an on/off switch drawn on a plain checkbox (keyboard and screen readers keep working) */
input.switch { appearance: none; -webkit-appearance: none; flex: none; width: 3.1rem; height: 1.8rem; margin: 0; border-radius: 999px; border: 0; padding: 0;
  background: var(--panel-lo); box-shadow: inset 0 2px 4px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.12); position: relative; cursor: pointer; transition: background 0.15s; }
input.switch::after { content: ''; position: absolute; top: 0.2rem; left: 0.2rem; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: linear-gradient(#ffffff, #ffe8da); box-shadow: 0 2px 4px rgba(0,0,0,0.45); transition: transform 0.15s; }
input.switch:checked { background: linear-gradient(180deg, #34d67f, #15a656); box-shadow: inset 0 2px 3px rgba(0, 60, 25, 0.5); }
input.switch:checked::after { transform: translateX(1.3rem); }
input.switch:disabled { opacity: 0.45; cursor: default; } /* (Wave 5 S2) e.g. alerts a browser can't show */
/* The volume slider, drawn by us: the browser's own one sat inset (at 0 % its knob was not at the left end, at 100 % it
   stopped short of the right end, with a gold stub left of the knob at 0). A dark track, gold exactly up to the knob,
   the knob at the very ends at 0 and 100 %. --fill follows the value (app.js soundIcon). */
input.vol { -webkit-appearance: none; appearance: none; flex: 1; min-width: 90px; height: 32px; margin: 0; padding: 0;
  border: 0; border-radius: 0; box-shadow: none; background: transparent; cursor: pointer; touch-action: pan-y; --fill: 50%; }
input.vol:focus { outline: none; }
input.vol:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 999px; }
input.vol::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
  background: linear-gradient(to right, #ffc53c 0 var(--fill), rgba(255,255,255,0.16) var(--fill) 100%); }
input.vol::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -8px;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fffbe6, #ffd24a 55%, #d48a12); border: 2px solid #fff3c4; box-shadow: 0 2px 5px rgba(0,0,0,0.6); }
input.vol::-moz-range-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.16); }
input.vol::-moz-range-progress { height: 8px; border-radius: 999px; background: #ffc53c; }
input.vol::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fffbe6, #ffd24a 55%, #d48a12); border: 2px solid #fff3c4;
  box-shadow: 0 2px 5px rgba(0,0,0,0.6); }
input.vol.off { filter: grayscale(1) opacity(0.6); }
.vol-val { min-width: 2.8em; text-align: right; font-variant-numeric: tabular-nums; font-size: 0.95rem; font-weight: 900; }
.sound-pop { position: fixed; z-index: 70; display: flex; align-items: center; gap: 0.55rem; width: min(280px, 72vw);
  padding: 0.35rem 0.8rem 0.35rem 0.35rem; border-radius: 999px; border: 2px solid transparent;
  background: linear-gradient(180deg, #491d2c, #240b14) padding-box, var(--metal-edge) border-box; box-shadow: var(--shadow-2); }
.sound-pop .btn.off, #sp-mute.off { color: #ffa3aa; }
/* "Tap to turn on sound": the first line of the table's middle column, which the seats, bets and deck keep clear of */
.sound-unlock { position: relative; display: flex; width: max-content; align-items: center; gap: 0.45rem; margin: 0 auto 0.3rem;
  min-height: 2.4rem; padding: 0.35rem 1rem; border: 0; border-radius: 999px; color: #3d2200;
  background: linear-gradient(180deg, #fff0a6, #ffcb45 55%, #f2a01b); box-shadow: 0 3px 0 #a8650a, var(--shadow-1);
  font: inherit; font-family: var(--font-display); font-weight: 400; font-size: 1rem; letter-spacing: 0.02em; cursor: pointer; animation: unlock-pulse 1.6s ease-in-out infinite; }
@keyframes unlock-pulse { 50% { box-shadow: 0 3px 0 #a8650a, 0 0 0 6px rgba(255, 208, 64, 0.28), var(--shadow-1); } }
/* phones: compact (#71: at 0.88rem the prompt reached the top corners' cards on 667x375 / 740x360) — still ≥ 11 px */
@media (max-height: 500px) { .sound-unlock { font-size: 0.74rem; min-height: 1.9rem; padding: 0.15rem 0.55rem; } }
/* (4 Nov) phones: the prompt sits in the top bar, over the room's name, until the first tap — in the middle of the table
   it reached the top seats' cards again once the faces grew (as in #71 #72; play run, 667–844 wide) */
@media (max-height: 500px) {
  /* (4 Nov) the pill takes no room on a phone: the sound button glows instead until the first tap (app.js) — in the
     middle the pill met the top seats' cards, in the top bar it pushed the top seats down (BUGS #108) */
  #sound-unlock { display: none !important; }
  #btn-sound.locked { color: #3d2200; background: linear-gradient(180deg, #fff0a6, #ffcb45 55%, #f2a01b); animation: unlock-pulse 1.6s ease-in-out infinite; }
  /* names a little shorter: the bigger face and its frame made plates ~16 px wider (a side seat met a corner's cards:
     80 → 64, the plate as wide as before) */
  .plate .name { max-width: 64px; }
  .seat.at-edge .plate .name { max-width: 60px; } /* the top-centre seat's name at every phone size (was ≤ 700 wide or ≤ 370 tall only) */
}
/* (4 Nov, BUGS #108) the crowded phones (≤ 380 tall, or ≤ 700 wide): a 34 px face — 38 left no room at a full table */
@media (max-height: 380px), (max-height: 500px) and (max-width: 700px) { :root { --av: 34px; } }
/* (5 Nov, the play run at 667×375) the side seats' names shorter there: a long name's plate touched the top-left corner's
   three cards, and the right seat's face the top-right corner's cards (a plate is anchored at the edge: a shorter name
   pulls its inner end — the face, or the name's end — away from the corners) */
@media (max-height: 380px), (max-height: 500px) and (max-width: 700px) { .seat.at-left .plate .name, .seat.at-right .plate .name { max-width: 50px; } }
@media (max-height: 340px), (max-width: 600px) {
  :root { --av: 30px; } /* (the smallest phones keep theirs: the rule above would make it 34) */
  .plate .name { max-width: 56px; } /* (the smallest phones: 62 → 56 for the same reason) */
}
@media (prefers-reduced-motion: reduce) { .sound-unlock { animation: none; } }
.sound-unlock.fading { visibility: hidden; animation: none; } /* sound is on: gone from sight, its place kept until the tap is over */
/* ======================= v3: home (Play · Friends · Profile · Settings), sheets, admin ======================= */
/* avatars: a face on a colour, a photo, or the initial (ui.js paintAvatar) */
.avatar[data-av^="i:"] { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.45); }
.avatar.av-face .face { font-style: normal; font-size: 1.3em; line-height: 1; }
/* (Q1) a photo sits inside a ring of the player's colour */
.avatar.av-photo { overflow: hidden; }
.avatar.av-photo img { width: 86%; height: 86%; object-fit: cover; border-radius: 50%; display: block; }
.avatar.xs { width: 1.75em; height: 1.75em; font-size: 0.76rem; }
.avatar.sm { width: 2.1em; height: 2.1em; font-size: 0.84rem; }
.avatar.xl { width: 4.8rem; height: 4.8rem; font-size: 2rem; box-shadow: 0 0 0 3px #1c0a10, 0 0 0 5.5px var(--gold), 0 6px 16px rgba(0, 0, 0, 0.5); }
.avatar.online { box-shadow: 0 0 0 2px var(--green), inset 0 1px 1px rgba(255,255,255,0.35); }
.person { display: inline-flex; align-items: center; gap: 0.6rem; min-width: 0; cursor: pointer; }
.person .avatar { flex: none; }
.person-txt { display: grid; min-width: 0; }
.person-name { display: flex; align-items: center; gap: 0.4rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 800; }
.person-sub { color: var(--muted); font-size: 0.84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a level: a small purple gem with the number */
.lv { flex: none; font-size: 0.72rem; font-weight: 900; padding: 0.08rem 0.45rem; border-radius: 999px; color: #fff;
  background: linear-gradient(180deg, #b48cff, #7444e0); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 1px 0 #3c1d86; text-shadow: 0 1px 0 rgba(40, 0, 90, 0.6); }
.lv.big { font-size: 0.92rem; padding: 0.18rem 0.75rem; }

/* segmented choices: a sunk track, the picked one a raised gold tab */
.seg { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.25rem; border-radius: 14px; background: var(--panel-lo); box-shadow: inset 0 2px 5px rgba(0,0,0,0.35); }
.seg-opt { border: 0; border-radius: 10px; min-height: 2.3rem; padding: 0.35em 0.95em; background: transparent; color: var(--muted); font: inherit; font-weight: 800; font-size: 0.92rem; cursor: pointer; }
.seg-opt:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
.seg-opt.on { background: linear-gradient(180deg, #fff0a6, #ffcb45 55%, #f2a01b); color: #3d2200; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 2px 0 #a8650a; }
.seg.small .seg-opt { font-size: 0.86rem; min-height: 2.1rem; padding: 0.3em 0.75em; }
.seg.locked .seg-opt:not(.on) { opacity: 0.4; }

/* the home screen: a top bar, a side rail, and a scrolling pane */
#screen-rooms.home { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.home-top { grid-column: 1 / -1; position: relative; z-index: 2; display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 1rem;
  background: linear-gradient(180deg, rgba(77, 26, 44, 0.97), rgba(37, 11, 20, 0.97)); box-shadow: inset 0 -2px 0 rgba(255, 208, 64, 0.42), 0 6px 18px rgba(14, 1, 5, 0.5); }
.brand-mini { display: flex; align-items: center; gap: 0.55rem; font-size: 1.3rem; white-space: nowrap; font-family: var(--font-display); }
.brand-mini .logo { width: 30px; rotate: -5deg; filter: drop-shadow(0 2px 3px rgba(10, 2, 5, 0.5)); }
.brand-mini .wordmark b { filter: drop-shadow(0 1.5px 0 #6b3a02); }
/* the main balance: a gold-rimmed pill with a drawn coin */
.coin-chip { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.4rem; padding: 0.2rem 0.95rem 0.2rem 0.3rem; border-radius: 999px;
  background: linear-gradient(180deg, #511d2f, #270c15) padding-box, var(--metal-edge) border-box; border: 2px solid transparent;
  color: #fff; font-weight: 900; font-size: 1.05rem; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4); }
.coin-chip .ic { width: 1.75rem; height: 1.75rem; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)); } /* (list #2b: the icons are in colour — no disc behind) */
.bell { position: relative; }
.bell .count { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: linear-gradient(#ff7a85, #e2283f);
  color: #fff; font-size: 0.72rem; font-weight: 900; display: grid; place-items: center; box-shadow: 0 0 0 2px #1c0a10; }
/* the side rail: big icon tiles; the one you're on is gold */
.home-nav { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.8rem 0.55rem; overflow-y: auto;
  background: linear-gradient(180deg, rgba(37, 11, 20, 0.94), rgba(24, 6, 13, 0.94)); box-shadow: inset -1px 0 0 rgba(255, 208, 64, 0.22); }
.nav-tab { position: relative; display: flex; align-items: center; gap: 0.65rem; min-height: 2.9rem; padding: 0.55rem 1rem; border: 0; border-radius: 14px; background: transparent;
  color: var(--muted); font: inherit; font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; letter-spacing: 0.02em; cursor: pointer; text-align: left; white-space: nowrap; }
.nav-tab .ic { width: 1.45em; height: 1.45em; }
.nav-tab:hover { background: rgba(255, 255, 255, 0.07); color: var(--ink); }
.nav-tab.active { background: linear-gradient(180deg, #fff0a6, #ffcb45 55%, #f2a01b); color: #3d2200; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 3px 0 #a8650a, 0 6px 12px rgba(0,0,0,0.35); }
.nav-tab .dot { position: absolute; top: 8px; left: 30px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px #1c0a10; }
.home-main { overflow-y: auto; min-height: 0; padding: 1.1rem 1.3rem 2rem; }
.home-pane { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.05rem; align-content: start; } /* (Q5: one wide piece never pushes the whole pane off the screen) */
.list-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.list-head h2 { margin: 0; font-size: 1.35rem; display: flex; align-items: center; gap: 0.5rem; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,0.35); }
.list-head h2 .ic { color: var(--gold); }
.empty { color: var(--muted); font-size: 0.95rem; padding: 0.5rem 0; margin: 0; }
.announce { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.9rem; border-radius: 16px; font-weight: 700;
  background: linear-gradient(90deg, rgba(255, 208, 64, 0.3), rgba(255, 208, 64, 0.08)); border: 1.5px solid rgba(255, 208, 64, 0.6); }
.announce > span { flex: 1; line-height: 1.45; }
.announce .ic { color: var(--gold); flex: none; }
.rc-tags { flex: 1; font-size: 0.82rem; color: var(--muted); }

/* the three ways in: quick play · host · code — big glossy tiles, each its own colour */
.rooms-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; } /* (3 Nov) a game's own two ways in */
.choice-card { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 0.3rem; align-content: start; justify-items: start; text-align: left;
  min-height: 7.4rem; padding: 1rem 1.1rem; border-radius: 22px; border: 0; color: #fff; font: inherit;
  --t1: #62243a; --t2: #320e1b; --tl: #1d060e;
  background: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%), linear-gradient(160deg, var(--t1), var(--t2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 5px 0 var(--tl), 0 12px 26px rgba(14, 1, 5, 0.45); }
/* a soft card-suit watermark in the corner of every tile */
.choice-card::after { content: '♠'; position: absolute; z-index: -1; right: -0.08em; bottom: -0.3em; font-size: 6.2rem; line-height: 1; color: rgba(255, 255, 255, 0.1); font-family: Georgia, 'Times New Roman', serif; pointer-events: none; }
.choice-card.quick::after { content: '♦'; }
.choice-card.host::after { content: '♣'; }
.choice-card.join-box::after { content: '♥'; }
button.choice-card { cursor: pointer; transition: transform 0.12s ease-out, filter 0.12s; }
button.choice-card:hover { transform: translateY(-3px); filter: brightness(1.08); }
button.choice-card:active { transform: translateY(2px); }
.choice-card .ic.big { width: 2.6rem; height: 2.6rem; padding: 0.5rem; border-radius: 50%; color: #fff; stroke-width: 2.4;
  background: rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 3px 8px rgba(0,0,0,0.25); }
.choice-card b { font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; letter-spacing: 0.02em; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); }
.choice-card small { color: rgba(255, 255, 255, 0.88); line-height: 1.35; font-size: 0.92rem; font-weight: 700; }
.choice-card.quick { --t1: #3bd36a; --t2: #12893a; --tl: #0b5a22; }
.choice-card.host { --t1: #ffcf52; --t2: #e8930f; --tl: #8a4f0e; color: #3a1a00; }
.choice-card.host b { text-shadow: 0 1px 0 rgba(255, 246, 210, 0.6); }
.choice-card.host small { color: rgba(58, 26, 0, 0.85); }
.choice-card.host .ic.big { color: #3a1a00; background: rgba(255, 255, 255, 0.35); }
.choice-card.host::after { color: rgba(90, 40, 0, 0.14); }
.choice-card.join-box { --t1: #f47458; --t2: #b83a26; --tl: #7a2216; } /* coral, like the city's coral blocks */
.choice-card.join-box .join-row input { background: rgba(70, 14, 8, 0.45); border-color: rgba(255, 236, 224, 0.4); }

/* table cards (public / friends' tables): a strip of felt on top, the stakes in gold, Join in green */
.tcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.9rem; }
.tcard { position: relative; overflow: hidden; display: grid; gap: 0.55rem; align-content: start; padding: 1.05rem 1rem 0.85rem; border-radius: 18px; cursor: pointer;
  background: linear-gradient(180deg, #451b2a, #250b14); border: 1.5px solid rgba(255, 214, 120, 0.3); box-shadow: 0 8px 20px rgba(14, 1, 5, 0.45);
  transition: transform 0.12s ease-out, border-color 0.12s; }
.tcard::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 7px; background: linear-gradient(90deg, #0e7a45, #2fd27a 50%, #0e7a45); box-shadow: 0 1px 0 rgba(255, 214, 120, 0.6); }
.tcard:hover { transform: translateY(-3px); border-color: rgba(255, 214, 120, 0.7); }
.tcard.mine { border-color: rgba(52, 214, 127, 0.8); }
.tc-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.tc-name { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill { flex: none; font-size: 0.76rem; font-weight: 900; padding: 0.16rem 0.6rem; border-radius: 999px; background: rgba(255,255,255,0.12); color: var(--ink-2); }
.pill.live { background: rgba(52, 214, 127, 0.25); color: #8dffbf; box-shadow: inset 0 0 0 1px rgba(52, 214, 127, 0.55); }
.tc-stakes { font-size: 0.95rem; color: var(--muted); font-weight: 700; }
.tc-stakes b { color: var(--gold); font-weight: 900; }
.chips-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.rchip { font-size: 0.78rem; font-weight: 800; padding: 0.16rem 0.6rem; border-radius: 999px; background: rgba(255,255,255,0.1); color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.rchip.friend { background: rgba(62, 164, 255, 0.28); }
.tc-foot { display: flex; align-items: center; gap: 0.55rem; }
.faces { display: flex; flex: 1; min-width: 0; }
.faces .avatar { margin-right: -7px; box-shadow: 0 0 0 2px #250b14; }
.faces .more { margin-left: 12px; font-size: 0.82rem; color: var(--muted); align-self: center; font-weight: 800; }
.seats { font-size: 0.88rem; color: var(--muted); font-weight: 800; font-variant-numeric: tabular-nums; }

/* History: the tables you're part of now (status, your balance, Rejoin) and the finished ones (final standings) */
.hist-list { display: grid; gap: 0.6rem; }
.hist-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.35rem 0.9rem; width: 100%; text-align: left;
  padding: 0.8rem 1rem; border-radius: 18px; background: linear-gradient(180deg, #441b29, #250b14); border: 1.5px solid rgba(255, 214, 120, 0.22); color: var(--ink); font: inherit;
  box-shadow: 0 6px 16px rgba(14, 1, 5, 0.35); }
.hist-row.here { border-color: rgba(255, 208, 64, 0.75); box-shadow: 0 0 0 1px rgba(255, 208, 64, 0.25), 0 6px 16px rgba(14, 1, 5, 0.35); }
button.hist-row { cursor: pointer; transition: border-color 0.12s, transform 0.12s; }
button.hist-row:hover { border-color: rgba(255, 214, 120, 0.6); transform: translateY(-2px); }
.hist-main { display: grid; gap: 0.2rem; min-width: 0; }
.hist-name { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.hist-name b { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-sub { color: var(--muted); font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-mine { font-size: 0.92rem; }
.hist-mine b { color: var(--gold); font-weight: 900; font-variant-numeric: tabular-nums; }
.hist-btns { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; justify-content: flex-end; }
.hist-btns .hint { margin: 0; font-size: 0.82rem; max-width: 12rem; }
.hist-go { color: var(--gold); font-size: 0.9rem; font-weight: 900; white-space: nowrap; }
.pill.closing { background: rgba(255, 77, 94, 0.24); color: #ffb3b9; }
@media (max-height: 500px) { .hist-row { padding: 0.55rem 0.8rem; gap: 0.25rem 0.6rem; } .hist-sub { font-size: 0.8rem; } }

/* friends */
.add-friend, .pf-motto { display: flex; gap: 0.5rem; }
.add-friend input, .pf-motto input, #host-name { flex: 1; min-width: 0; padding: 0.62rem 0.85rem; border-radius: var(--radius-m); border: 1.5px solid var(--line-soft);
  background: var(--panel-lo); color: inherit; font: inherit; font-weight: 700; }
/* (Wave 2 B2, 11 Nov) on a phone the button is "+ Add" so the box has room for its hint (home.js fitFriendHint picks the
   longest wording that fits) */
.add-friend { container-type: inline-size; }
@container (max-width: 440px) { .add-friend .af-more { display: none; } .add-friend .btn { padding-inline: 0.8rem; } .add-friend input { padding-inline: 0.7rem; } }
.fr-block { display: grid; gap: 0.45rem; }
.fr-block h3, #inv-friends-wrap h3 { margin: 0.3rem 0 0; font-size: 1rem; color: var(--gold); }
.fr-list { display: grid; gap: 0.5rem; }
.fr-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.55rem 0.8rem; border-radius: 16px;
  background: linear-gradient(180deg, #421a28, #250b14); border: 1.5px solid rgba(255, 255, 255, 0.08); }
.fr-row.on { border-color: rgba(52, 214, 127, 0.55); }
.fr-row.invite, .fr-row.request { border-color: rgba(255, 208, 64, 0.6); }
.fr-btns { display: flex; gap: 0.4rem; flex: none; }
.fr-list.compact .fr-row { padding: 0.4rem 0.55rem; }
#inv-friends-wrap { display: grid; gap: 0.45rem; text-align: left; max-height: 34vh; overflow-y: auto; }

/* profile: a hero card — your face in a gold ring, your level gem and the bar to the next one */
.prof-card { display: flex; align-items: center; gap: 1.2rem; padding: 1.15rem 1.25rem; border-radius: 22px;
  background: radial-gradient(120% 120% at 0% 0%, rgba(255, 150, 110, 0.26), rgba(255, 150, 110, 0) 60%), linear-gradient(160deg, #511d2f, #270c15);
  border: 1.5px solid rgba(255, 214, 120, 0.35); box-shadow: 0 10px 24px rgba(14, 1, 5, 0.45); }
.pf-avatar { position: relative; flex: none; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%; }
/* With a level frame the camera badge sits ON the frame's band, over it, at the bottom right (5 Nov, the owner: "camera
   icon should be on the top of border … not off set like now"; 4 Nov it had been moved outside the frame because it
   clipped UNDER it). The frame's band runs 0.5–0.6 of the picture's width from its centre (frames/*.svg: radius 42–50 of
   the face's 84); the badge's centre sits on the band's middle (0.548) at 45° → 50 % + 38.7 %, less half its own 36 %. */
.pf-avatar:has(.avatar-wrap[data-frame]) .pf-edit { right: auto; bottom: auto; left: 70.7%; top: 70.7%; width: 36%; height: 36%; font-size: 0.85rem; }
.pf-edit { position: absolute; z-index: 2; right: -4px; bottom: -4px; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; /* (z: over a level frame) */
  background: linear-gradient(180deg, #fff0a6, #ffcb45 55%, #f2a01b); color: #3d2200; box-shadow: 0 2px 0 #a8650a, var(--shadow-1); }
.pf-main { display: grid; gap: 0.5rem; min-width: 0; flex: 1; }
.pf-name { display: flex; align-items: center; gap: 0.45rem; font-family: var(--font-display); font-size: 1.6rem; min-width: 0; }
.pf-name b { font-weight: 400; }
.pf-level { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; }
.xpbar { flex: 1; min-width: 90px; max-width: 260px; height: 12px; border-radius: 999px; background: var(--panel-lo); overflow: hidden; box-shadow: inset 0 2px 3px rgba(0,0,0,0.45); }
.xpbar i { display: block; height: 100%; width: 0; background: linear-gradient(180deg, #ffe58a, #ffb52e 60%, #e88a0c); border-radius: inherit; transition: width 0.4s; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); }
.pf-level small { color: var(--muted); font-size: 0.84rem; font-weight: 700; }
.pf-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; color: var(--muted); font-size: 0.88rem; }
.pid { font-family: ui-monospace, Consolas, monospace; color: var(--ink); cursor: pointer; letter-spacing: 0.04em; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.65rem; }
.stat { display: grid; gap: 0.1rem; padding: 0.8rem 0.9rem; border-radius: 16px; background: linear-gradient(180deg, #421a28, #250b14); border: 1.5px solid rgba(255, 214, 120, 0.2); }
.stat b { font-size: 1.5rem; font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: 0.84rem; font-weight: 700; }
.stats-grid.small { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; }
.stats-grid.small .stat { padding: 0.5rem 0.65rem; }
.stats-grid.small .stat b { font-size: 1.15rem; }
.pf-coins { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; padding: 0.85rem 1.05rem; border-radius: 18px; font-weight: 800;
  background: linear-gradient(90deg, rgba(255, 208, 64, 0.22), rgba(255, 208, 64, 0.06)); border: 1.5px solid rgba(255, 208, 64, 0.5); }
.pf-coins .ic { color: var(--gold); }
.pf-coins b { color: var(--gold); font-size: 1.3rem; font-weight: 900; }
.pf-coins small { flex-basis: 100%; color: var(--muted); font-weight: 700; }
.home-pane .set-sec { background: linear-gradient(180deg, #411927, #250b14); border: 1.5px solid rgba(255, 214, 120, 0.2); }
.set-row { flex-wrap: wrap; }
.set-row .seg { flex: none; }

/* host a table */
.host-card { width: min(600px, 94vw); display: grid; gap: 0.9rem; }
.host-card h2 { margin: 0; padding-right: 2.8rem; }
.host-step { display: grid; gap: 0.45rem; justify-items: start; }
.host-step h3 { margin: 0; font-size: 0.95rem; color: var(--gold); letter-spacing: 0.05em; text-transform: uppercase; }
.host-step .hint { margin: 0; font-size: 0.88rem; line-height: 1.4; }
.host-inline { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.95rem; }
/* (5 Nov) the host's rummy choice under "Which rummy": Gin scoring / 500 jokers */
.rm-opt { margin-top: 0.6rem; }
.rm-opt > span { min-width: 4.6rem; font-weight: 700; color: var(--ink-2); font-size: 0.88rem; }
.num-in { width: 8.5rem; padding: 0.45rem 0.65rem; border-radius: 12px; border: 1.5px solid var(--line-soft); background: var(--panel-lo); color: inherit;
  font: inherit; font-weight: 800; font-variant-numeric: tabular-nums; }
#host-name { width: 100%; }
.preset-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.preset { position: relative; border: 1.5px solid rgba(255, 255, 255, 0.14); border-radius: 999px; min-height: 2.3rem; padding: 0.35em 1em; background: rgba(255,255,255,0.08); color: var(--ink);
  font: inherit; font-weight: 800; font-size: 0.92rem; cursor: pointer; }
.preset:hover { background: rgba(255, 255, 255, 0.14); }
.preset.on { background: linear-gradient(180deg, #fff0a6, #ffcb45 55%, #f2a01b); color: #3d2200; border-color: transparent; box-shadow: 0 2px 0 #a8650a; }
.preset.mine { border-style: dashed; }
.preset .del { margin-left: 0.45rem; opacity: 0.7; font-weight: 900; }
.host-custom { width: 100%; }
.host-custom summary { cursor: pointer; color: var(--muted); font-size: 0.92rem; padding: 0.2rem 0; }
.rule-rows { display: grid; gap: 0.55rem; margin: 0.5rem 0; }
.rule-row { display: grid; gap: 0.3rem; justify-items: start; }
.rule-label { font-size: 0.86rem; color: var(--muted); font-weight: 800; }
/* Cancel / Host table stay in view at the bottom of the sheet while its long middle scrolls (a short phone or laptop:
   the bigger pass-#4 controls made the sheet taller than the screen and the button ended up below the fold). The
   shadow paints the card's bottom padding, so nothing scrolls through under the buttons. */
.sheet-foot { position: sticky; bottom: 0; z-index: 2; display: flex; gap: 0.55rem; margin: 0.2rem -1.3rem 0; padding: 0.6rem 1.3rem 0.1rem;
  background: #240b14; box-shadow: 0 1.1rem 0 #240b14, 0 -12px 14px -8px rgba(14, 1, 5, 0.65); }
.sheet-foot #host-go { flex: 1; }

/* someone's profile, your picture, notifications */
.profile-card { width: min(480px, 94vw); display: grid; gap: 0.85rem; }
.ps-head { display: flex; align-items: center; gap: 1rem; padding-right: 2.4rem; }
.ps-head h2 { margin: 0; color: var(--ink); font-size: 1.5rem; }
.ps-sub { color: var(--muted); font-size: 0.88rem; margin-top: 0.15rem; }
.ps-motto { margin: 0.35rem 0 0; font-style: italic; }
.ps-where { padding: 0.5rem 0.75rem; border-radius: 12px; background: rgba(52, 214, 127, 0.16); box-shadow: inset 0 0 0 1px rgba(52, 214, 127, 0.4); font-size: 0.92rem; }
.ps-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.avatar-card { width: min(540px, 94vw); display: grid; gap: 0.65rem; }
.avatar-card h3 { margin: 0.2rem 0 0; font-size: 1rem; color: var(--gold); }
.av-preview { display: flex; justify-content: center; }
.av-faces { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 0.4rem; }
.pick-face { font-size: 1.55rem; min-height: 48px; padding: 0.2rem; border-radius: 14px; border: 2px solid transparent; background: rgba(255,255,255,0.07); cursor: pointer; line-height: 1.3; }
.pick-face:hover { background: rgba(255, 255, 255, 0.13); }
.pick-face.on { border-color: var(--gold); background: rgba(255, 208, 64, 0.18); }
.av-bgs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pick-bg { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 3px solid transparent; cursor: pointer; }
.pick-bg.on { border-color: #fff; box-shadow: 0 0 0 2px var(--gold); }
.av-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* (Q1/Q2) Your look */
.avatar-card h3 small { margin-left: 0.4rem; font-size: 0.78rem; font-weight: 700; color: var(--ink-2); }
.lk-prev { display: flex; align-items: center; justify-content: center; gap: 1.4rem; flex-wrap: wrap; padding: 0.3rem 0; }
.lk-mini { display: grid; gap: 0.3rem; justify-items: start; }
.lk-mini small { font-size: 0.72rem; font-weight: 800; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.06em; }
.lk-plate { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.8rem 0.3rem 0.3rem; border-radius: 999px; background: rgba(0, 0, 0, 0.3); }
.lk-plate .avatar { width: 36px; height: 36px; font-size: 0.9rem; }
.lk-pic { justify-self: stretch; }
.lk-pic .seg-opt { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; }
.lk-photo { display: grid; gap: 0.4rem; }
.lk-photo-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.lk-photo .hint { margin: 0; }
.lk-note { margin: 0; font-weight: 800; color: var(--gold); }
.lk-frames { margin-top: 0; }
.lk-row { display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.6rem 0.8rem; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.22); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.lk-row > span:nth-child(2) { flex: 1; display: grid; }
.lk-row small { color: var(--ink-2); font-size: 0.8rem; }
.lk-row:hover { background: rgba(255, 255, 255, 0.08); }
.lk-chev { font-size: 1.5rem; line-height: 1; color: var(--ink-2); }
label.btn { cursor: pointer; }
.notif-panel { position: fixed; z-index: 70; width: min(400px, calc(100vw - 12px)); max-height: 70vh; overflow-y: auto; padding: 0.7rem; border-radius: 20px;
  border: 2px solid transparent; background: linear-gradient(180deg, #461b2a, #230a13) padding-box, var(--metal-edge) border-box; box-shadow: var(--shadow-2); display: grid; gap: 0.5rem; }
.np-head { display: flex; align-items: center; justify-content: space-between; padding: 0 0.2rem; font-family: var(--font-display); font-size: 1.15rem; }
.np-head b { font-weight: 400; }
.np-list { display: grid; gap: 0.45rem; }
.np-list .fr-row { border-radius: 14px; }
.np-item { display: grid; gap: 0.2rem; padding: 0.55rem 0.7rem; border-radius: 14px; background: rgba(255,255,255,0.06); }
.np-item.ann { background: rgba(255, 208, 64, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 208, 64, 0.35); }
.np-item > span { line-height: 1.45; overflow-wrap: anywhere; } /* a long announcement wraps (Burmese has few spaces) */

/* the table: a player's card when you tap them; the room panel's Rules tab */
.tp-who { display: flex; align-items: center; gap: 0.5rem; }
.tp-id { display: grid; flex: 1; min-width: 0; }
.tp-name { font-size: 0.95rem; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-lv { font-size: 0.76rem; color: #e2d9ff; font-weight: 800; }
.tp-throw { display: grid; gap: 0.4rem; border-top: 1px solid var(--line-soft); padding-top: 0.45rem; }
.rules-list { display: grid; gap: 0.35rem; }
.rules-list > .hint { margin: 0 0 0.3rem; }
.rule-line { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0.65rem; border-radius: 12px; background: rgba(255,255,255,0.06); font-size: 0.92rem; }
.rule-line span { color: var(--muted); flex: none; }
.rule-line b { text-align: right; font-weight: 800; }

/* the admin console */
#screen-dev.admin { display: flex; flex-direction: column; }
#screen-dev .admin-wrap { flex: 1; overflow-y: auto; max-width: 980px; }
.dv-tabs { margin: 0.6rem auto 0; width: min(980px, calc(100% - 2rem)); }
.dv-pane { display: grid; gap: 0.8rem; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.65rem; }
.kpi { display: grid; gap: 0.1rem; padding: 0.85rem; border-radius: 16px; background: linear-gradient(180deg, #421a28, #250b14); border: 1.5px solid rgba(255, 214, 120, 0.2); }
.kpi b { font-size: 1.6rem; font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums; }
.kpi span { font-size: 0.88rem; font-weight: 800; }
.kpi small { color: var(--muted); font-size: 0.8rem; }
.health-row { display: flex; gap: 0.5rem; padding: 0.25rem 0; font-size: 0.92rem; }
.health-row.bad { color: #ffa3aa; font-weight: 800; }
.hi { width: 1.4rem; text-align: center; flex: none; }
.member-row .top { cursor: pointer; }
.member-row .top .spacer { flex: 1; }
.admin-more { display: none; }
.member-row.open .admin-more { display: grid; gap: 0.5rem; }
.adm-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.adm-label { font-size: 0.82rem; color: var(--muted); font-weight: 800; min-width: 6.5rem; }
.adm-line input:not(.num-in) { width: 12rem; }
.coin-log.tall { max-height: 52vh; }
.cl-row { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; align-items: baseline; padding: 0.3rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.cl-t { font-size: 0.8rem; color: var(--muted); min-width: 9.5rem; }
.cl-d { font-variant-numeric: tabular-nums; font-weight: 900; }
.cl-d.up { color: var(--win); } .cl-d.down { color: var(--lose); }
.cl-why { flex: 1; color: var(--muted); font-size: 0.86rem; min-width: 8rem; }
.cl-bal { font-variant-numeric: tabular-nums; font-size: 0.86rem; }
#dv-ann { width: 100%; padding: 0.65rem; border-radius: 12px; border: 1.5px solid var(--line-soft); background: var(--panel-lo); color: inherit; font: inherit; resize: vertical; }
.dv-room-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }

/* tablets / small laptops: two action cards on a row */
@media (max-width: 820px) {
  .rooms-actions { grid-template-columns: 1fr 1fr; }
  .rooms-actions .join-box { grid-column: 1 / -1; }
}
/* phones in landscape: an icon rail, a slim top bar, compact tiles — but every word still easy to read and tap */
@media (max-height: 500px) {
  .home-top { padding: 0.3rem 0.7rem; gap: 0.45rem; }
  .brand-mini .wordmark { display: none; }
  .brand-mini .logo { width: 27px; }
  .coin-chip { min-height: 2.3rem; padding: 0.15rem 0.8rem 0.15rem 0.25rem; font-size: 0.98rem; }
  .coin-chip .ic { width: 1.5rem; height: 1.5rem; }
  .home-nav { padding: 0.4rem 0.3rem; gap: 0.2rem; }
  .nav-tab { flex-direction: column; justify-content: center; gap: 0.1rem; min-height: 3.1rem; min-width: 4.1rem; padding: 0.3rem 0.45rem; font-size: 0.78rem; }
  .nav-tab .ic { width: 1.4em; height: 1.4em; }
  .nav-tab.active { box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 2px 0 #a8650a; }
  .nav-tab .dot { left: auto; right: 10px; top: 4px; }
  .home-main { padding: 0.6rem 0.85rem 1.4rem; }
  .home-pane { gap: 0.75rem; }
  .list-head h2 { font-size: 1.15rem; }
  .rooms-actions { grid-template-columns: 1fr 1fr; gap: 0.55rem; }
  .rooms-actions .join-box { grid-column: auto; }
  .choice-card { min-height: 0; padding: 0.6rem 0.75rem; gap: 0.2rem; border-radius: 18px; }
  .choice-card small { display: none; }
  .choice-card b { font-size: 1.15rem; }
  .choice-card::after { font-size: 4.2rem; }
  .choice-card .ic.big { width: 2rem; height: 2rem; padding: 0.35rem; }
  .join-row input { font-size: 1rem; padding: 0.35rem; }
  .tcards { grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 0.6rem; }
  .tcard { padding: 0.8rem 0.8rem 0.65rem; gap: 0.4rem; }
  .prof-card { padding: 0.75rem 0.9rem; }
  .avatar.xl { width: 3.8rem; height: 3.8rem; font-size: 1.6rem; }
  .host-card, .profile-card, .avatar-card { max-height: 94vh; }
}
/* admin console layout: rows keep their natural height (the screen-filling grid stretched them), compact inputs */
.admin-wrap, .dv-pane, .admin-card { align-content: start; }
.kpis { align-items: start; }
.admin-card input.num-in { width: 9.5rem; flex: none; padding: 0.42rem 0.6rem; }
.admin-card .code-row input:not(.num-in):not([type=checkbox]) { flex: 1; width: auto; min-width: 10rem; padding: 0.42rem 0.6rem; }
.adm-line input:not(.num-in) { width: 12rem; flex: none; padding: 0.42rem 0.6rem; }
.admin-more > .btn { justify-self: start; }
/* empty lists offer the next step */
.empty-card { display: grid; justify-items: start; gap: 0.55rem; padding: 0.95rem 1.1rem; border-radius: 18px; border: 1.5px dashed rgba(255, 214, 120, 0.35); background: rgba(255, 255, 255, 0.03); grid-column: 1 / -1; font-weight: 700; }
.pid-btn { font-family: ui-monospace, Consolas, monospace; letter-spacing: 0.04em; }
/* badges (profile milestones) */
.badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.badge-chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.8rem 0.4rem 0.5rem; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 208, 64, 0.24), rgba(255, 208, 64, 0.1)); border: 1.5px solid rgba(255, 208, 64, 0.55); font-size: 0.88rem; font-weight: 800; }
.badge-chip i { font-style: normal; font-size: 1.15rem; line-height: 1; }
.badge-chip.locked { background: rgba(255,255,255,0.04); border-color: var(--line-soft); color: var(--muted); filter: grayscale(1); opacity: 0.6; }
.badges.small .badge-chip { font-size: 0.8rem; padding: 0.28rem 0.6rem 0.28rem 0.4rem; }

/* ======================= pass #4 finishing touches ======================= */
/* the banker's crown: drawn, in the colour of the words next to it (the badge, the bank pile's amount) */
.badge.bank::before, .spot.bank .amt::before { content: ''; display: inline-block; width: 1.08em; height: 0.9em; margin-right: 0.28em; vertical-align: -0.08em;
  background: currentColor; -webkit-mask: var(--crown) center / contain no-repeat; mask: var(--crown) center / contain no-repeat; }
/* Quick play is the hero of the home screen: a soft shine sweeps across it every few seconds (transform only) */
.choice-card.quick::before { content: ''; position: absolute; z-index: 0; top: -20%; bottom: -20%; left: -40%; width: 30%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0));
  transform: translateX(-120%) skewX(-12deg); animation: shine 5.5s ease-in-out 1.2s infinite; }
@keyframes shine { 0%, 72% { transform: translateX(-120%) skewX(-12deg); } 92%, 100% { transform: translateX(560%) skewX(-12deg); } }
.choice-card > * { position: relative; z-index: 1; }
html.lowfx .choice-card.quick::before { display: none; }
/* touch screens have no hover: a tapped button must not stay lit (sticky hover) */
@media (hover: none) {
  .btn:hover:not(:disabled) { filter: none; }
  button.choice-card:hover, .tcard:hover, button.hist-row:hover { transform: none; filter: none; }
}

/* ======================= pass #4 review fixes (an independent visual review of the new look) ======================= */
/* H2: the table's narration and the clock sit on the brightest felt (white was ~2.3:1, the gold seconds ~2:1) — they
   get a dark backing, like every small text on the felt should ("small text sits on a plate") */
.phase .ph-more:not(:empty), .log:not(:empty), .timer-sec:not(:empty) { background: rgba(5, 30, 21, 0.66); border-radius: 999px; }
.phase .ph-more:not(:empty) { padding: 0 0.6em; }
.log { width: fit-content; max-width: 100%; margin-inline: auto; }
.log:not(:empty) { padding: 0.05em 0.75em; }
/* #74: on a phone the middle column ends right above your own bet, so the news line (now on a dark pill) hid your
   chips: fresh news shows at full strength for ~3 s, then fades — your chips show again. A computer has room: it stays. */
@media (max-height: 500px) {
  #log-line { opacity: 0; transition: opacity 0.6s ease-in; }
  #log-line.news { opacity: 1; transition: none; } /* table.js takes .news off after 3.2 s (a timer, not an animation:
                                                     "reduce motion" shortens animations to nothing) */
}
.timer-sec:not(:empty) { padding: 0 0.45em; text-align: center; }
/* M3: busted out — the Sit button that can't be pressed reads as a status, not a broken gold button */
#btn-sit:disabled { opacity: 1; filter: none; color: #ffe0e3; text-shadow: none; -webkit-text-stroke: 0;
  background: linear-gradient(180deg, #8a1428, #4a0812); box-shadow: inset 0 0 0 1.5px rgba(255, 92, 108, 0.8); }
#btn-sit:disabled::before { display: none; }
/* M4: a bar that only holds a disabled Start isn't the hero yet — no gold frame round it */
.actions:has(> .btn:only-child:disabled) { background: none; border-color: transparent; box-shadow: none; }
/* Low 2: a Shan hand shows "Shan 9!" popping on it — the score chip waits, so the words don't show twice */
.seat.do-glow .score.shan { opacity: 0; }
/* Low 6: on the final scoreboard your row has a gold bar at its edge (a full gold ring looked like 1st place) */
.final-list .lb-row.mine { box-shadow: inset 4px 0 0 var(--gold); }
.final-list .lb-row.mine:nth-child(1) { box-shadow: inset 4px 0 0 var(--gold), inset 0 0 0 1.5px rgba(255, 208, 64, 0.65); }
.final-card h2, .help-card h2 { text-wrap: balance; }
/* Low 7: Quick play leads the home screen (it's the hero; all three tiles were equally loud). (3 Nov) two ways in on a
   game's own screen — the code box moved to the hub — so two columns: three left a third of the row empty */
@media (min-width: 821px) { .rooms-actions { grid-template-columns: 1.35fr 1fr; } }
/* Low 3: on a computer a name gets more room before it is cut ("Kyaw Kyaw …") — from 1200 px wide (#71: at 1024 the
   wider plates met: a long name at the top centre went under the top-bar buttons, the bottom row's plates touched mine) */
@media (min-width: 1200px) and (min-height: 501px) { .plate .name { max-width: 124px; } }
/* #71: narrower than 1200 px the bigger top-bar buttons leave no room for the top-centre seat between them: Rooms and
   Invite become icons, as on phones. Break keeps its words on a computer ("I'm back" / "Must play on" must be read;
   even "Must play on" leaves the seat 12 px at 1024) — on phones every top-bar button is an icon anyway */
@media (max-width: 1199px) { #btn-menu .lbl, #btn-invite .lbl { display: none; } }
@media (max-height: 500px) {
  /* H3: on a phone the Banker badge above the plate slid under the top-bar buttons (top seats) or onto other cards —
     the crown moves into the plate, in front of the name; the plate itself is the banker's gold-brown */
  .seat.banker .tags .badge.bank { display: none; }
  .seat.banker .plate .name::before { content: ''; display: inline-block; width: 1.05em; height: 0.86em; margin-right: 0.22em; vertical-align: -0.06em;
    background: #ffd24a; -webkit-mask: var(--crown) center / contain no-repeat; mask: var(--crown) center / contain no-repeat; }
  /* M1: WIN / LOSE / the amount: a smaller pill at the foot of the hand (it covered both cards at the reveal), kept on
     screen at the left and right edges (it was cut off there) */
  .outcome { font-size: 0.86rem; padding: 0.02rem 0.45rem; top: auto; bottom: 2px; transform: translateX(-50%); animation-name: pop-x; }
  .seat.at-left .hand .outcome { left: 0; transform: none; animation-name: pop; }
  .seat.at-right .hand .outcome { left: auto; right: 0; transform: none; animation-name: pop; }
  /* M6: the 6-letter room code fits its box on a small phone */
  .join-row input, .join-row input::placeholder { letter-spacing: 0.1em; }
  .join-row input { padding-inline: 0.25rem; }
  .join-row .btn { padding-inline: 0.7em; }
}
@keyframes pop-x { from { transform: translateX(-50%) scale(0.4); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
/* M2: the smallest phone: a wider middle column, so "You have 6 — draw or stand" isn't cut — 40 %, not 42 (#71: at 42
   a long two-line message touched the top corners' three-card hands); that line needs 198 px, 40 % is 227 */
@media (max-height: 340px), (max-width: 600px) { .center { width: 40%; } }
/* #69: ... and with 8 players betting, slimmer amount pills (the text stays 11 px), so every bet still finds a free place
   beside that wider column — the bigger pills of the new look left one bet on its neighbour and the centre text 1 run in 3 */
@media (max-height: 340px), (max-width: 600px) { .spot .amt { padding: 0.04rem 0.32rem; } .spot .stack { min-height: 14px; } }
/* #73: ... and a little shorter (a 3-chip bet 42 → 38 px), so one fits the 38 px between a top plate and the middle text */
@media (max-height: 340px), (max-width: 600px) {
  .spot { gap: 1px; }
  .spot .amt { line-height: 1.2; }
  .spot .col { height: calc(15px + (var(--n) - 1) * 2.5px); }
  .spot.bank .col { height: calc(17px + (var(--n) - 1) * 2.5px); }
  .spot .chip { bottom: calc(var(--k) * 2.5px); }
}
/* the room owner's table theme picker (room panel → Settings, 3 Nov) */
.look-row > span { font-weight: 800; color: var(--ink); }
.look-row .seg { flex-wrap: wrap; }
/* your own name plate opens your profile at the table (A6, 3 Nov) */
.seat.you .plate { cursor: pointer; }
/* maintenance (O2): the countdown bar on every screen, then the full "updating" screen */
.maint-bar { position: fixed; z-index: 90; left: 50%; top: max(6px, env(safe-area-inset-top)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.45rem; max-width: min(94vw, 640px); padding: 0.4rem 0.9rem; border-radius: 999px;
  background: linear-gradient(180deg, #ffd760, #e8a71b); color: #3a1c00; font-weight: 800; font-size: 0.9rem;
  box-shadow: 0 0 0 1.5px #fff3c4, 0 6px 18px rgba(0, 0, 0, 0.45); pointer-events: none; }
.maint-bar .ic { width: 1.1em; height: 1.1em; flex: none; }
.maint-cover { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 1rem;
  background: radial-gradient(ellipse at 50% 40%, rgba(48, 12, 25, 0.94), rgba(16, 3, 8, 0.97)); }
.maint-cover.hidden { display: none; } /* (it must never stand over the login form — list #2c) */
/* the login card while the game updates: a notice, not a wall */
.login-maint { margin: 0.2rem 0 0.4rem; padding: 0.55rem 0.8rem; border-radius: 12px; text-align: center; font-weight: 800;
  background: rgba(255, 196, 60, 0.14); border: 1px solid rgba(255, 196, 60, 0.5); color: #ffe3a3; }
.login-maint.hidden { display: none; }
.maint-card { max-width: 420px; padding: 1.4rem 1.6rem; border-radius: 18px; text-align: center; color: var(--ink);
  background: var(--panel); box-shadow: 0 0 0 2px #e9b43c, 0 18px 50px rgba(0, 0, 0, 0.6); }
.maint-card b { display: block; font-family: var(--font-display); font-size: 1.5rem; color: #ffd24a; margin-bottom: 0.4rem; }
.maint-card p { margin: 0; line-height: 1.45; }
#dv-maint .maint-count { font-weight: 800; color: #ffd24a; }
#dv-maint .maint-ready { font-weight: 800; color: #7be09c; }
@media (max-height: 500px) { .maint-bar { font-size: 0.78rem; padding: 0.3rem 0.7rem; } }
/* the room owner's card backs (3 Nov): html[data-back] — classic is back.webp; every one from the same drawing, so the
   same size, border and margins as the faces (tools/cards/make-cards.py BACKS) */
html[data-back=crimson] .card .back, html[data-back=crimson] .deck i { background-image: url(cards/back-crimson.webp?v=6); }
html[data-back=royal] .card .back, html[data-back=royal] .deck i { background-image: url(cards/back-royal.webp?v=6); }
html[data-back=jade] .card .back, html[data-back=jade] .deck i { background-image: url(cards/back-jade.webp?v=6); }
html[data-back=onyx] .card .back, html[data-back=onyx] .deck i { background-image: url(cards/back-onyx.webp?v=6); }
.back-row > span { font-weight: 800; color: var(--ink); }
.back-pick { display: flex; flex-wrap: wrap; gap: 0.45rem; }
/* the table themes as little tables (5 Nov): the felt in its colours, the lacquer rail, the gold inlay */
.look-pick { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.look-opt { display: grid; justify-items: center; gap: 0.2rem; padding: 0.3rem 0.25rem 0.25rem; border: 0; border-radius: 10px; background: rgba(0, 0, 0, 0.25);
  color: var(--ink-2); font: inherit; font-size: 0.7rem; font-weight: 700; cursor: pointer; }
.look-opt.on { background: rgba(255, 208, 64, 0.18); box-shadow: 0 0 0 2px #e9b43c; color: #ffd24a; }
/* (seven themes in one row: a little smaller, and a locked one's 🔒 on its table, not after its name) */
.look-mini { position: relative; display: block; width: 48px; height: 31px; border-radius: 50%;
  background: radial-gradient(ellipse 72% 72% at 50% 43%, var(--m1) 0%, var(--m2) 45%, var(--m3) 78%, var(--m4) 100%);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.45), 0 0 0 1.5px #e9b43c, 0 0 0 5px #5a1c14, 0 0 0 6px #2a0d08, 0 3px 6px 5px rgba(0, 0, 0, 0.45); margin: 5px 5px 3px; }
/* (6 Nov) once drawn (minis.js: a wooden rail, a gold inlay, the felt, two cards and a chip) the picture is the table —
   a little bigger, as the rail is inside it now (it was rings of shadow outside the box) */
.look-mini[data-drawn] { width: 58px; height: 37px; margin: 1px 0 0; border-radius: 0; background: none; box-shadow: none; }
.look-mini[data-drawn] svg { display: block; width: 100%; height: 100%; overflow: visible; }
.shop-pic .look-mini[data-drawn] { width: 92px; height: 59px; }
.lm-crimson { --m1: #d8475c; --m2: #b42c42; --m3: #8e1c31; --m4: #4e0c1a; }
.lm-jade { --m1: #23b689; --m2: #16936b; --m3: #0f7454; --m4: #073a29; }
.lm-emerald { --m1: #33c77a; --m2: #1b9a59; --m3: #0f7443; --m4: #05321d; }
.lm-sapphire { --m1: #4b9bff; --m2: #2a6fd6; --m3: #1b51a8; --m4: #0a2350; }
.lm-onyx { --m1: #5e5c68; --m2: #43414c; --m3: #2e2d35; --m4: #121116; }
.back-opt { display: grid; justify-items: center; gap: 0.2rem; padding: 0.3rem; border: 0; border-radius: 10px; background: rgba(0, 0, 0, 0.25);
  color: var(--ink-2); font: inherit; font-size: 0.74rem; font-weight: 700; cursor: pointer; }
.back-opt img { width: 34px; aspect-ratio: 167 / 243; border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.back-opt.on { background: rgba(255, 208, 64, 0.18); box-shadow: 0 0 0 2px #e9b43c; color: #ffd24a; }

.rchip.game { background: linear-gradient(180deg, #2b2b33, #121116); color: #ffd24a; box-shadow: 0 0 0 1px rgba(255, 210, 74, 0.55); }

/* ---------- characters (C1, 3 Nov 2026): avatars, the home menu's figure, the Profile card, the wardrobe ---------- */
.avatar.av-char { overflow: hidden; background-image: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 68%); }
.avatar.av-char svg { width: 100%; height: 100%; display: block; }
.char-stage { display: grid; place-items: end center; min-width: 0; }
.char-stage svg { display: block; height: 100%; width: auto; max-width: 100%; }
/* idle: a slow breath and a blink now and then (only figures drawn with the class "idle") */
.char-svg.idle .ch-fig { animation: ch-breathe 3.6s ease-in-out infinite; transform-origin: 60px 196px; transform-box: view-box; }
.char-svg.idle .ch-eyes { animation: ch-blink 5.2s infinite; transform-origin: 60px 56px; transform-box: view-box; }
@keyframes ch-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.014) translateY(-0.3px); } }
@keyframes ch-blink { 0%, 94%, 100% { transform: scaleY(1); } 96.5% { transform: scaleY(0.12); } }
@media (prefers-reduced-motion: reduce) { .char-svg.idle .ch-fig, .char-svg.idle .ch-eyes { animation: none; } }
/* (5 Nov, the owner: "make placement of character in homescreen … more appropriate") your character stands on the hub
   beside "Join with a code" — on a lit stage, with your name and level (tap: the wardrobe). It left the menu rail, where
   it was squeezed at the bottom (and hidden on phones). */
/* (on the tiles' own grid: the code under two tiles, you under the third) */
.hub-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.hub-row > .join-box { grid-column: span 2; max-width: none; align-content: center; }
@media (max-height: 500px) { .hub-row { gap: 0.6rem; } }
@media (max-width: 720px) { .hub-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hub-row > .join-box { grid-column: auto; } } /* (a third was too narrow for the Wardrobe button) */
@media (max-width: 560px) { .hub-row { grid-template-columns: 1fr; } }
/* (5 Nov — the owner: "fix background color and design of character showcase, it look so dumb now"; list #2c, of three
   candidates: "B. velvet curtain") A dressing room's velvet curtain: purple velvet in folds, warm light on the floor,
   the character on a dark dais with a gold rim, the gold metal edge of the header's chips; the level as a purple pill.
   (The others — A a spotlight stage, C a fourth table: reports/list2b/hub.) */
.home-char { position: relative; isolation: isolate; display: grid; grid-template-columns: 46% minmax(0, 1fr); align-items: stretch; gap: 0.4rem; padding: 0 1rem 0 0;
  border-radius: 22px; cursor: pointer; text-align: left; color: var(--ink-2); font: inherit; overflow: hidden; border: 2px solid transparent;
  background: radial-gradient(ellipse 36% 46% at 23% 100%, rgba(255, 214, 140, 0.42), rgba(255, 214, 140, 0) 70%) padding-box,
    linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.35)) padding-box,
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.26) 0 9px, rgba(255, 255, 255, 0.05) 9px 15px, rgba(0, 0, 0, 0.12) 15px 24px) padding-box,
    linear-gradient(180deg, #6a1e3a, #2a0b16) padding-box, var(--metal-edge) border-box;
  box-shadow: 0 10px 24px rgba(10, 0, 4, 0.55); } /* (9 Nov: the velvet is the stamp's wine sky, not purple) */
.home-char .char-stage { position: relative; width: auto; height: auto; min-height: 9.4rem; display: grid; place-items: end center; padding-bottom: 0.72rem; }
.home-char .char-stage svg { position: relative; z-index: 1; height: 8.7rem; width: auto; max-width: 100%; }
/* the dais */
.home-char .char-stage::before { content: ''; position: absolute; left: 50%; bottom: 0.3rem; width: 5.8rem; height: 1.25rem; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, #3fd09e, #0b5a41 80%);
  box-shadow: 0 0 0 1.5px rgba(255, 214, 120, 0.75), 0 6px 10px rgba(0, 0, 0, 0.55); }
.home-char-txt { display: grid; gap: 0.35rem; align-self: center; justify-items: start; min-width: 0; padding: 0.7rem 0; }
.home-char-txt b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; color: #fff; }
.home-char-txt small { display: inline-flex; align-items: center; padding: 0.12rem 0.65rem; border-radius: 999px; font-size: 0.8rem; font-weight: 900; color: #fff;
  background: linear-gradient(180deg, #ff9a7a, #d9482f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.4); }
.home-char-tag { margin-top: 0.4rem; padding: 0.32rem 0.85rem; border-radius: 999px; font-size: 0.85rem; font-weight: 900; color: #3d2200; white-space: nowrap;
  background: linear-gradient(180deg, #fff0a6, #ffcb45 55%, #f2a01b); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 0 #a8650a; }
.home-char:hover { filter: brightness(1.08); }
@media (max-height: 500px) {
  .home-char { gap: 0.3rem; padding: 0 0.8rem 0 0; }
  .home-char .char-stage { min-height: 6.4rem; padding-bottom: 0.48rem; }
  .home-char .char-stage svg { height: 5.9rem; }
  .home-char .char-stage::before { width: 4rem; height: 0.85rem; bottom: 0.2rem; }
  .home-char-txt b { font-size: 1.05rem; }
  .home-char-tag { font-size: 0.76rem; padding: 0.25rem 0.65rem; }
}
/* Profile: the character card */
.char-card { display: flex; align-items: center; gap: 1.1rem; padding: 0.8rem 1.2rem; border-radius: 22px;
  background: radial-gradient(ellipse 30% 26% at 12% 88%, rgba(255, 203, 69, 0.3), rgba(255, 203, 69, 0) 100%), linear-gradient(160deg, #3e1624, #220a13);
  border: 1.5px solid rgba(255, 214, 120, 0.25); box-shadow: 0 10px 24px rgba(14, 1, 5, 0.35); }
#pf-char { flex: none; height: 190px; width: 116px; border: 0; padding: 0; background: none; cursor: pointer; }
.char-card-txt { display: grid; gap: 0.5rem; min-width: 0; }
.char-card-txt h2 { margin: 0; font-size: 1.3rem; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
.char-card-txt .hint { margin: 0; }
.char-card-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem; }
#wd-dice { gap: 0.4rem; }
.char-pic { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 800; font-size: 0.92rem; cursor: pointer; }
/* someone's profile card: their character at the right of the head */
.ps-char { margin-left: auto; flex: none; height: 118px; width: 72px; align-self: center; }
/* the wardrobe */
.wd-card { width: min(900px, 96vw); display: grid; gap: 0.6rem; }
.wd-card h2 { padding-right: 2.6rem; }
.wd-body { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); gap: 1rem; min-height: 0; }
.wd-left { display: grid; justify-items: center; align-content: start; gap: 0.6rem; padding: 0.7rem 0.5rem; border-radius: 18px;
  background: radial-gradient(ellipse 60% 18% at 50% 80%, rgba(255, 203, 69, 0.3), rgba(255, 203, 69, 0) 100%), rgba(255, 255, 255, 0.05); }
#wd-prev { height: 300px; width: 100%; }
.wd-right { display: grid; gap: 0.6rem; align-content: start; min-width: 0; }
.wd-tabs { justify-self: start; flex-wrap: wrap; }
.wd-opts { display: grid; gap: 0.75rem; max-height: min(52vh, 460px); overflow-y: auto; padding: 0.1rem 0.35rem 0.3rem 0.1rem; }
.wd-row h4 { margin: 0 0 0.35rem; font-size: 0.88rem; color: var(--muted); font-weight: 800; letter-spacing: 0.02em; }
.wd-picks, .wd-dots { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.wd-pick { position: relative; display: grid; justify-items: center; gap: 0.1rem; width: 4.7rem; padding: 0.3rem 0.2rem 0.3rem; border-radius: 14px;
  border: 1.5px solid rgba(255, 214, 120, 0.18); background: rgba(255, 255, 255, 0.06); color: var(--ink); font: inherit; cursor: pointer; }
.wd-pick svg { width: 3.8rem; height: 3.3rem; display: block; }
.wd-pick .wd-name { font-size: 0.7rem; font-weight: 800; line-height: 1.1; text-align: center; }
.wd-pick.on { border-color: var(--gold); background: rgba(255, 203, 69, 0.16); box-shadow: 0 0 0 2px rgba(255, 203, 69, 0.35); }
.wd-pick:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); }
.wd-pick.locked { opacity: 0.6; cursor: not-allowed; }
.wd-lock { position: absolute; top: 3px; right: 3px; padding: 0.05rem 0.32rem; border-radius: 999px; background: rgba(20, 5, 10, 0.88); color: var(--gold); font-size: 0.62rem; font-weight: 900; }
.wd-dot { width: 2rem; height: 2rem; border-radius: 50%; border: 0; cursor: pointer; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.22), 0 0 0 2px rgba(255, 255, 255, 0.16); }
.wd-dot.on { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.22), 0 0 0 2.5px #1c0a10, 0 0 0 4.5px var(--gold); }
.wd-foot { align-items: center; }
.wd-foot .char-pic { margin-right: auto; }
.wd-foot #wd-save { flex: none; }
/* phones in landscape: one screen — the figure shrinks to fit, only the choices scroll (no second scrollbar) */
@media (max-height: 500px) {
  .wd-card { height: 96vh; max-height: 96vh; padding: 0.6rem 0.9rem 0.5rem; gap: 0.4rem; display: flex; flex-direction: column; overflow: hidden; }
  .wd-card h2 { font-size: 1.2rem; margin-bottom: 0; }
  .wd-body { flex: 1; min-height: 0; grid-template-columns: 112px minmax(0, 1fr); gap: 0.7rem; }
  .wd-left { display: flex; flex-direction: column; align-items: center; min-height: 0; padding: 0.4rem 0.3rem; gap: 0.35rem; }
  #wd-prev { flex: 1; min-height: 0; height: auto; }
  #wd-dice { flex: none; padding: 0.3rem 0.7rem; }
  .wd-dice-txt { display: none; }
  .wd-right { display: flex; flex-direction: column; min-height: 0; }
  .wd-opts { flex: 1; min-height: 0; max-height: none; }
  .wd-foot { position: static; margin: 0; padding-top: 0.4rem; }
  .wd-pick { width: 4rem; } .wd-pick svg { width: 3.1rem; height: 2.7rem; }
  .wd-dot { width: 1.75rem; height: 1.75rem; }
  #pf-char { height: 130px; width: 80px; }
  .char-card { padding: 0.6rem 0.9rem; }
}
@media (max-width: 560px) { .wd-body { grid-template-columns: 1fr; } #wd-prev { height: 170px; } }

/* ---------- poker (3 Nov 2026): Texas Hold'em on the same felt — six seats round the oval (you at the bottom), the
   board and the pot in the middle, bets in front of their players, your moves on a bar at the bottom right ---------- */
.felt.pk-mode .center, .felt.pk-mode #spots, .felt.pk-mode #deck, .felt.pk-mode #seats, .felt.pk-mode #btn-last { display: none !important; }
.felt.pk-mode .table-felt::before { content: none; }
/* (3 Nov, BUGS #99 — the owner: "biggest flaw is cards are too small to see compared to shan 9") poker's own card sizes,
   from the screen's height: six seats, not Shan's eight — the others' hole cards, your own, the board */
.felt.pk-mode { --pk-card: clamp(40px, 11vh, 96px); --pk-mine: clamp(60px, 18vh, 150px); --pk-board: clamp(52px, 14.5vh, 128px); }
.pk { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.pk .pk-bar, .pk .pk-plate { pointer-events: auto; }
.pk-pot { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); padding: 0.1em 0.85em; border-radius: 999px; white-space: nowrap;
  font-weight: 900; font-size: clamp(0.8rem, 2vmin, 1rem); color: #ffe9a8; background: rgba(6, 12, 14, 0.72); box-shadow: 0 0 0 1.5px rgba(233, 180, 60, 0.55); }
.pk-board { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); display: flex; gap: clamp(3px, 0.8vmin, 8px); }
.pk-board .card, .pk-slot { height: var(--pk-board); }
.pk-slot { aspect-ratio: 167 / 243; border-radius: 6%/4.2%; border: 1.5px dashed rgba(255, 236, 170, 0.16); }
.pk-pot.blinds { color: rgba(255, 236, 170, 0.7); background: rgba(6, 12, 14, 0.35); box-shadow: none; font-size: clamp(0.7rem, 1.7vmin, 0.88rem); letter-spacing: 0.04em; }
.pk-msg { position: absolute; left: 50%; top: 63%; transform: translateX(-50%); width: min(560px, 54%); display: grid; justify-items: center; gap: 0.15rem; text-align: center; }
.pk-msg b { font-family: var(--font-display); font-size: clamp(1rem, 2.6vmin, 1.5rem); color: #fff; -webkit-text-stroke: 0.18em rgba(40, 6, 18, 0.9); paint-order: stroke fill; }
.pk-msg span:not(:empty) { font-size: 0.78rem; font-weight: 800; color: #ffefe2; background: rgba(6, 12, 14, 0.62); border-radius: 999px; padding: 0.05em 0.75em; }
/* the seats: cards over the name plate */
.pk-seat { position: absolute; display: grid; justify-items: center; gap: 0.15rem; transform: translateX(-50%); }
.pk-seat.empty { display: none; }
.pk-seat.r0 { left: 50%; bottom: 1.5%; }
.pk-seat.r1 { left: 10%; top: 47%; } .pk-seat.r5 { left: 90%; top: 47%; }
/* the top three sit on the rim below the top bar: the plate first, the cards under it (inside the oval) */
.pk-seat.r2 { left: 21%; top: 12%; } .pk-seat.r4 { left: 79%; top: 12%; }
.pk-seat.r3 { left: 50%; top: 9%; }
.pk-seat.top .pk-plate { order: -1; }
.pk-cards { display: flex; min-height: var(--pk-card); }
.pk-cards .card { height: var(--pk-card); }
.pk-cards .card + .card { margin-left: calc(var(--pk-card) * -0.3); transform: rotate(6deg); }
.pk-cards .card:first-child { transform: rotate(-5deg); }
.pk-seat.you .pk-cards { min-height: var(--pk-mine); }
.pk-seat.you .pk-cards .card { height: var(--pk-mine); }
.pk-seat.you .pk-cards .card + .card { margin-left: calc(var(--pk-mine) * -0.24); }
.pk-plate { position: relative; display: flex; align-items: center; gap: 0.35rem; max-width: 100%; }
.pk-who { display: grid; min-width: 0; line-height: 1.15; }
.pk-who .name { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-dealer { position: absolute; top: -0.5rem; right: -0.55rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.72rem; font-weight: 900; color: #222; background: radial-gradient(circle at 40% 35%, #fff, #d9d9d9); box-shadow: 0 0 0 1.5px #555, 0 2px 4px rgba(0, 0, 0, 0.5); }
.pk-seat.you:not(.turn) .pk-plate { border-color: #ffd24a; } /* (your turn: the green edge, as everyone's — list #2b) */
.pk-seat.folded .pk-plate, .pk-seat.away .pk-plate { opacity: 0.5; }
.pk-seat.folded .pk-cards .card { opacity: 0.45; filter: grayscale(0.6); }
.pk-seat.winner .pk-plate { box-shadow: 0 0 0 2px #ffd24a, 0 0 18px rgba(255, 210, 74, 0.75); }
.pk-cards .card.best { transform: translateY(-14%) !important; filter: drop-shadow(0 0 6px rgba(255, 210, 74, 0.95)); }
.pk-seat.winner .pk-cards .card:not(.best) { opacity: 0.6; }
/* labels round a seat: the last move, the bet (toward the middle), the hand at the showdown, the win */
.pk-act, .pk-tag, .pk-hand, .pk-win, .pk-mine, .pk-bet { position: absolute; white-space: nowrap; border-radius: 999px; font-weight: 800; z-index: 3; }
.pk-act, .pk-tag { top: calc(var(--pk-card) - 0.95rem); left: 50%; transform: translateX(-50%); font-size: 0.68rem; padding: 0.02em 0.6em; color: #fff; background: rgba(6, 12, 14, 0.82); }
.pk-act.fold { color: #fca5a5; } .pk-act.raise { background: linear-gradient(180deg, #3b82f6, #1d4ed8); } .pk-act.allin { background: linear-gradient(180deg, #a855f7, #7e22ce); }
.pk-seat.you .pk-act, .pk-seat.you .pk-tag { top: calc(var(--pk-mine) - 0.95rem); }
.pk-seat.top .pk-act, .pk-seat.top .pk-tag { top: auto; bottom: 0.15rem; }
.pk-bet { font-size: 0.72rem; padding: 0.02em 0.55em; color: #ffe9a8; background: rgba(28, 7, 15, 0.88); box-shadow: 0 0 0 1px rgba(233, 180, 60, 0.5); }
/* (5 Nov) the pile is everything the player has in the pot this hand; while they bet this street it glows */
.pk-bet.live { color: #3a1c00; background: linear-gradient(180deg, #fff0a6, #ffcb45 60%, #f2a01b); box-shadow: 0 0 0 1px #a8650a, 0 0 10px rgba(255, 203, 69, 0.55); }
/* (5 Nov) a player's plate opens their card (seatpop.js), yours your profile */
.pk-plate { cursor: pointer; }
.pk-seat:not(.you) .pk-plate:hover { outline: 2px solid rgba(255, 208, 64, 0.65); outline-offset: 1px; border-radius: 999px; }
.pk-seat.r0 .pk-bet { bottom: 100%; left: 50%; transform: translate(-50%, -0.35rem); }
.pk-seat.r3 .pk-bet { top: 100%; left: 50%; transform: translate(-50%, 0.35rem); }
.pk-seat.r2 .pk-bet { left: 100%; top: auto; bottom: 0; transform: translateX(0.5rem); } .pk-seat.r4 .pk-bet { right: 100%; top: auto; bottom: 0; transform: translateX(-0.5rem); }
.pk-seat.r1 .pk-bet { left: 100%; top: 40%; transform: translateX(0.5rem); }
.pk-seat.r5 .pk-bet { right: 100%; top: 40%; transform: translateX(-0.5rem); }
.pk-seat.top .pk-hand { top: auto; bottom: -1.15rem; }
.pk-hand { top: -1.05rem; left: 50%; transform: translateX(-50%); font-size: 0.72rem; padding: 0.02em 0.6em; color: #fff; background: rgba(6, 12, 14, 0.85); }
.pk-hand.won { color: #3a1c00; background: linear-gradient(180deg, #ffd760, #e8a71b); }
.pk-win { bottom: -0.55rem; right: -0.6rem; font-family: var(--font-display); font-size: 0.82rem; padding: 0.05em 0.55em; color: #fff;
  background: linear-gradient(180deg, #4ade80, #16a34a); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); animation: pop-x-in 0.35s cubic-bezier(.3, 1.6, .5, 1) both; }
.pk-seat.r0 .pk-win { bottom: auto; top: 20%; right: auto; left: calc(100% + 0.45rem); } /* yours: beside your cards (below the seat is off screen) */
/* the top seats: the hand's name is under the cards — the win sits beside them, clear of it (3 Nov: the full names are longer) */
.pk-seat.top .pk-win { bottom: auto; top: 58%; right: auto; left: calc(100% + 0.3rem); }
.pk-seat.r4 .pk-win { left: auto; right: calc(100% + 0.3rem); }
.pk-mine { right: calc(100% + 0.45rem); top: 22%; font-size: 0.74rem; padding: 0.05em 0.65em; color: #3a1c00; background: linear-gradient(180deg, #fff0a6, #ffcb45); }
/* (8 Nov, BUGS #137) too long for the room left of my cards (poker.js fitMine): two balanced lines, right-aligned by the cards */
.pk-mine.wrap { white-space: normal; text-wrap: balance; text-align: right; line-height: 1.2; border-radius: 0.75em; padding: 0.2em 0.6em;
  width: max-content; box-sizing: border-box; } /* (anchored by its right edge only, it shrank to one word a line without a width) */
.pk-tag { color: #ffd9a8; }
/* new hole cards fly in from the middle */
.pk-seat.r0 .pk-card.fly { --dx: 0vw; --dy: -30vh; } .pk-seat.r3 .pk-card.fly { --dx: 0vw; --dy: 22vh; }
.pk-seat.r1 .pk-card.fly { --dx: 34vw; --dy: -8vh; } .pk-seat.r2 .pk-card.fly { --dx: 26vw; --dy: 20vh; }
.pk-seat.r4 .pk-card.fly { --dx: -26vw; --dy: 20vh; } .pk-seat.r5 .pk-card.fly { --dx: -34vw; --dy: -8vh; }
/* your moves: bottom right */
.pk-bar { position: absolute; right: 1.2%; bottom: 2%; display: grid; justify-items: end; gap: 0.35rem; max-width: min(460px, 40%); }
.pk-bar.hidden { display: none; }
.pk-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem; padding: 0.35rem 0.45rem; border-radius: 16px;
  background: linear-gradient(180deg, rgba(70, 20, 40, 0.94), rgba(36, 8, 20, 0.94)); box-shadow: 0 0 0 1.5px rgba(233, 180, 60, 0.75), 0 8px 18px rgba(0, 0, 0, 0.5); }
.pk-actions:empty { display: none; }
.pk-actions .btn { min-width: 4.8rem; }
.pk-actions .btn.on { box-shadow: 0 0 0 2px #ffd24a, 0 0 10px rgba(255, 210, 74, 0.6); }
.pk-raise { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.4rem 0.5rem; width: min(380px, 100%); padding: 0.5rem 0.6rem; border-radius: 16px;
  background: linear-gradient(180deg, rgba(30, 40, 80, 0.95), rgba(14, 18, 40, 0.95)); box-shadow: 0 0 0 1.5px rgba(120, 160, 255, 0.7), 0 8px 18px rgba(0, 0, 0, 0.5); }
.pk-quick { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: center; }
.pk-quick .btn { min-width: 0; padding: 0.2em 0.7em; }
/* the slider: the Shan bet slider's look (not the text-box look every input gets) */
.pk-range { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; accent-color: var(--gold); cursor: pointer; }
.pk-range::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: rgba(22, 5, 11, 0.72); box-shadow: inset 0 1px 2px rgba(0,0,0,0.6), 0 0 0 1px rgba(255, 214, 120, 0.3); }
.pk-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fffbe6, #ffd24a 55%, #d48a12); border: 2px solid #fff3c4; box-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.pk-range::-moz-range-track { height: 8px; border-radius: 999px; background: rgba(22, 5, 11, 0.72); }
.pk-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fffbe6, #ffd24a 55%, #d48a12); border: 2px solid #fff3c4; }
.pk-go { white-space: nowrap; }
.pk-clock { width: min(240px, 100%); height: 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); overflow: hidden; justify-self: end; }
.pk-clock i { display: block; height: 100%; background: linear-gradient(90deg, #4ade80, #22c55e); transition: width 0.2s linear; }
.pk-clock i.urgent { background: linear-gradient(90deg, #fb923c, #ef4444); }
/* phones held sideways */
/* (the poker check measures every label on every seat at five sizes: phones need the side seats higher — your buttons
   take the bottom right — and the top seat's labels beside it, not under it where the pot is) */
@media (max-height: 500px) {
  .pk-pot { top: 36%; }
  .pk-board { top: 49%; }
  .pk-seat.r3 .pk-bet { top: 0.2rem; left: 100%; transform: translateX(0.45rem); }
  .pk-seat.r3 .pk-hand { top: auto; bottom: 0.1rem; left: auto; right: calc(100% + 0.35rem); transform: none; }
  .pk-seat.r0 .pk-hand { top: 22%; left: auto; right: calc(100% + 0.45rem); transform: none; }
  .pk-msg span:not(:empty) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pk-seat.you .pk-act, .pk-seat.you .pk-tag { top: calc(var(--pk-mine) - 0.9rem); }
  .pk-act, .pk-tag { top: calc(var(--pk-card) - 0.9rem); }
  .pk-seat.r3 { top: 12%; } .pk-seat.r2 { left: 22%; top: 13%; } .pk-seat.r4 { left: 78%; top: 13%; }
  .pk-quick .btn { font-size: 0.74rem; padding: 0.15em 0.55em; min-height: 1.7rem; }
  .pk-raise { width: min(270px, 100%); }
  .pk-go { min-height: 2rem; font-size: 0.86rem; }
  .pk-msg { top: 57.5%; width: min(420px, 46%); gap: 0.05rem; }
  .pk-msg b { font-size: 0.95rem; }
  .pk-msg span:not(:empty) { font-size: 0.68rem; }
  .pk-who .name { max-width: 60px; font-size: 0.72rem; }
  .pk-who .money { font-size: 0.68rem; }
  .pk-plate { padding: 1px 0.45rem 1px 1px; gap: 0.25rem; }
  .pk-seat.r1, .pk-seat.r5 { top: 29%; }
  .pk-actions { padding: 0.25rem 0.3rem; gap: 0.3rem; }
  .pk-actions .btn { min-width: 3.9rem; font-size: 0.84rem; min-height: 2rem; padding-inline: 0.6em; }
  .pk-raise { padding: 0.35rem 0.45rem; gap: 0.3rem; }
  .pk-bar { max-width: 44%; } /* clear of your own cards when the raise panel is open (568×320) */
  .pk-mine { font-size: 0.66rem; }
  .pk-act, .pk-tag, .pk-hand, .pk-bet { font-size: 0.64rem; }
}

/* ---------- coming soon (3 Nov 2026): the features that wait for art, a decision or a later update ---------- */
/* ---------- animated backdrops (3 Nov — the owner: "make differet backgrounds for each game, menu and such. dont make them
   look stupid static like that. add animation a bit if nothing goes wrong"). Slow and soft, GPU-only (transform and
   opacity), behind everything and never in the way of a tap; still for "reduce motion", lighter on low-memory phones.
   Each game has its own room: Shan 9 the red-lacquer room, Rummy an emerald card room under a chandelier's glints (it was
   Blackjack's until 5 Nov), Poker a midnight club with swinging spotlights in the haze (html[data-game], set by rummy.js /
   poker.js). ---------- */
.bg-fx { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; --k1: 255, 197, 60; --k2: 255, 154, 122; --k3: 255, 232, 184; } /* the city's lights: gold, coral, ivory */
.menu-fx { --boost: 1.6; } /* (the menus' content covers most of the room: the lamps a touch brighter) */
html[data-screen=screen-table] .menu-fx { display: none; }
.bg-fx .bk, .room-fx .bk { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--c), calc(var(--a) * var(--boost, 1))) 0%, rgba(var(--c), calc(var(--a) * 0.55 * var(--boost, 1))) 30%, rgba(var(--c), 0) 70%);
  animation: bkDrift var(--d) ease-in-out var(--t) infinite alternate; will-change: transform, opacity; }
@keyframes bkDrift { 0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.4; } 50% { opacity: 1; } 100% { transform: translate3d(var(--dx), var(--dy), 0) scale(1.2); opacity: 0.55; } }
.menu-fx .suit { position: absolute; left: var(--x); bottom: -12vh; font-size: var(--s); line-height: 1; font-family: system-ui, 'Segoe UI Symbol', sans-serif; color: rgba(255, 214, 120, calc(var(--a) * 1.7));
  animation: suitRise var(--d) linear var(--t) infinite; will-change: transform, opacity; }
@keyframes suitRise { 0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; } 12% { opacity: 1; } 86% { opacity: 1; } 100% { transform: translate3d(var(--dx), -130vh, 0) rotate(var(--r)); opacity: 0; } }
/* (the diagonal light sweep across the screen went, 5 Nov — the owner: "remove long light beam … diagonal") */
/* the table rooms */
.room-fx { --k1: 255, 178, 110; --k2: 255, 110, 170; --k3: 130, 190, 255; }
.room-fx .beam { animation: beamBreathe 9s ease-in-out infinite alternate; }
@keyframes beamBreathe { from { opacity: 0.72; } to { opacity: 1; } }
.room-fx .beam.b2, .room-fx .haze, .room-fx .star { display: none; }
/* Rummy: an emerald card room, a chandelier's glints high up */
html[data-game=rummy] #screen-table {
  background:
    radial-gradient(ellipse 30% 24% at 50% -6%, rgba(255, 246, 214, 0.44), rgba(255, 236, 180, 0.12) 48%, rgba(255, 236, 180, 0) 100%),
    radial-gradient(ellipse 66% 60% at 50% 47%, rgba(90, 230, 150, 0.16), rgba(90, 230, 150, 0) 72%),
    var(--lattice),
    radial-gradient(ellipse 120% 100% at 50% 44%, #175236 0%, #0b2a1b 52%, #030c07 100%); }
html[data-game=rummy] .room-fx { --k1: 255, 214, 130; --k2: 120, 230, 160; --k3: 255, 240, 210; }
html[data-game=rummy] .room-fx .star { display: block; position: absolute; left: var(--x); top: var(--y); width: 4px; height: 4px; border-radius: 50%;
  background: #fff8e0; box-shadow: 0 0 8px 2px rgba(255, 226, 150, 0.85); opacity: 0.2; animation: twinkle var(--d) ease-in-out var(--t) infinite; will-change: opacity, transform; }
@keyframes twinkle { 0%, 100% { opacity: 0.15; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.25); } }
/* Poker: a midnight club — cool lights, haze drifting, two spotlights swinging slowly */
html[data-game=poker] #screen-table {
  background:
    radial-gradient(ellipse 30% 24% at 50% -6%, rgba(214, 228, 255, 0.36), rgba(170, 200, 255, 0.1) 48%, rgba(170, 200, 255, 0) 100%),
    radial-gradient(ellipse 66% 60% at 50% 47%, rgba(90, 140, 255, 0.16), rgba(90, 140, 255, 0) 72%),
    radial-gradient(ellipse 120% 100% at 50% 44%, #18295a 0%, #0a1330 52%, #02040c 100%); }
html[data-game=poker] .room-fx { --k1: 140, 180, 255; --k2: 190, 140, 255; --k3: 120, 230, 255; --lamp: 200, 220, 255; }
html[data-game=poker] .room-fx .beam { transform-origin: 50% 0; animation: beamSwing 24s ease-in-out infinite alternate; }
html[data-game=poker] .room-fx .beam.b2 { display: block; animation-duration: 31s; animation-direction: alternate-reverse; opacity: 0.7; }
@keyframes beamSwing { from { transform: translateX(-50%) rotate(-9deg); } to { transform: translateX(-50%) rotate(9deg); } }
html[data-game=poker] .room-fx .haze { display: block; position: absolute; width: 70vw; height: 46vh; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(150, 175, 230, 0.12), rgba(150, 175, 230, 0)); animation: haze 48s ease-in-out infinite alternate; will-change: transform; }
html[data-game=poker] .room-fx .haze.h1 { left: -12vw; top: 6vh; }
html[data-game=poker] .room-fx .haze.h2 { right: -16vw; top: 40vh; animation-duration: 61s; animation-direction: alternate-reverse; }
@keyframes haze { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(22vw, -6vh, 0) scale(1.25); } }
/* each game's own TABLE (3 Nov): Shan 9 the crimson-lacquer oval; Rummy (5 Nov) a card table in walnut — a rounded
   oblong, room for the melds; Poker a racetrack in black leather with a silver inlay (the felt colour stays the owner's
   pick) */
html[data-game=rummy] .table-oval { border-radius: 16% / 30%;
  background: linear-gradient(180deg, #9a6634 0%, #7a4a20 26%, #563112 60%, #321a07 100%); }
html[data-game=rummy] .table-felt { border-radius: 14.5% / 28%; }
html[data-game=rummy] .table-felt::after { border-radius: 13% / 25%; }
html[data-game=poker] .table-oval { border-radius: 9999px;
  background: linear-gradient(180deg, #4c505b 0%, #2c2f37 28%, #17191f 62%, #08090c 100%);
  box-shadow: inset 0 0 0 1.5px rgba(205, 218, 240, 0.85), inset 0 0 0 calc(var(--rail) * 0.45) rgba(220, 230, 255, 0.06), inset 0 3px 4px rgba(230, 238, 255, 0.32),
    inset 0 -5px 9px rgba(0, 0, 0, 0.6), 0 4px 0 #050608, 0 0 0 4px rgba(160, 190, 255, 0.12), 0 30px 60px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(0, 0, 0, 0.6); }
html[data-game=poker] .table-felt { border-radius: 9999px;
  box-shadow: 0 0 0 2px #c9d4e8, 0 0 0 3.5px rgba(10, 14, 24, 0.9), inset 0 10px 22px rgba(0, 0, 0, 0.5), inset 0 0 70px 14px rgba(0, 0, 0, 0.32); }
html[data-game=poker] .table-felt::after { border-radius: 9999px; }
/* lighter on low-memory phones; still for "reduce motion" */
html.lowfx .bg-fx .bk, html.lowfx .bg-fx .suit, html.lowfx .room-fx .bk, html.lowfx .room-fx .haze { display: none !important; }
@media (prefers-reduced-motion: reduce) { .bg-fx *, .room-fx * { animation: none !important; } .menu-fx .suit { display: none; } }

/* ---------- the game hub (3 Nov): three games, each with its own look — tap one for its own tables ---------- */
.game-hub { display: grid; gap: 1rem; }
.gh-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.game-tile { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 14rem; padding: 0;
  border: 0; border-radius: 22px; overflow: hidden; cursor: pointer; text-align: left; color: #fff; font: inherit; background: var(--gt-bg);
  box-shadow: 0 12px 28px rgba(10, 0, 4, 0.55), inset 0 0 0 2px var(--gt-edge); transition: transform 0.18s ease, box-shadow 0.18s ease; }
.game-tile:hover { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(10, 0, 4, 0.62), inset 0 0 0 2px var(--gt-edge); }
.game-tile:active { transform: translateY(1px) scale(0.99); }
.game-tile:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.gt-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.gt-felt { position: absolute; left: 50%; top: 9%; width: 122%; height: 96%; transform: translateX(-50%); border-radius: 50%; background: var(--gt-felt);
  box-shadow: inset 0 14px 34px rgba(0, 0, 0, 0.45), 0 0 0 7px var(--gt-rail), 0 0 0 8.5px var(--gt-edge); }
.gt-card { position: absolute; top: 17%; width: 17%; aspect-ratio: 167 / 243; border-radius: 7%; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.55); }
.gt-chip { position: absolute; width: 10%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--chip) 0 44%, #fff 45% 53%, var(--chip) 54%); box-shadow: 0 4px 7px rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgba(255, 255, 255, 0.6); }
.gt-text { display: grid; gap: 0.15rem; padding: 2.6rem 1rem 0.9rem; background: linear-gradient(180deg, transparent, rgba(10, 2, 6, 0.86) 46%); }
.gt-name { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; line-height: 1; letter-spacing: 0.01em; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); }
.gt-tag { font-size: 0.86rem; font-weight: 800; color: #f6e7d0; }
.gt-count { font-size: 0.78rem; font-weight: 800; color: var(--gold); min-height: 1.1em; }
/* Shan 9: red lacquer on a crimson felt, the banker's gold 9 — its colour is red, as Rummy's is green and Poker's blue (the
   owner, 5 Nov: "fix menu button of shan 9 more red color emphasize, like rummy green and poker blue"; its felt was jade
   green, the same family as Rummy's) */
.gt-shan { --gt-bg: linear-gradient(160deg, #a51e3a, #3a0815 72%); --gt-edge: rgba(255, 210, 110, 0.66); --gt-felt: radial-gradient(ellipse at 50% 34%, #e04a5f, #8a1428 52%, #4a0a18 78%); --gt-rail: #5a1222; }
.gt-shan .gc1 { left: 30%; transform: rotate(-12deg); }
.gt-shan .gc2 { left: 44%; top: 15%; transform: rotate(9deg); }
.gt-badge { position: absolute; right: 9%; top: 11%; width: 19%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%;
  font-family: var(--font-display); font-weight: 400; font-size: 2.3rem; color: #3d2200; background: radial-gradient(circle at 36% 30%, #fff5c4, #ffd24a 45%, #c47d10);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5), inset 0 -3px 0 rgba(120, 60, 0, 0.45); }
.gt-shan .g1 { --chip: #d8393e; left: 10%; top: 38%; }
.gt-shan .g2 { --chip: #2f6fd6; left: 17%; top: 46%; }
/* Rummy (5 Nov): the classic green of a card table (Blackjack's until it went) */
.gt-rm { --gt-bg: linear-gradient(160deg, #0f6039, #052617 74%); --gt-edge: rgba(255, 220, 140, 0.58); --gt-felt: radial-gradient(ellipse at 50% 30%, #1f9d5f, #0a4a2b 74%); --gt-rail: #3b2412; }
.gt-rm .gc1 { left: 18%; top: 24%; transform: rotate(-14deg); }
.gt-rm .gc2 { left: 31%; top: 20%; transform: rotate(-5deg); }
.gt-rm .gc3 { left: 44%; top: 20%; transform: rotate(4deg); }
.gt-rm .gc4 { left: 57%; top: 23%; transform: rotate(13deg); }
.gt-rm .g1 { --chip: #2f9a59; left: 78%; top: 44%; }
/* Poker: a midnight felt, the dealer button */
.gt-pk { --gt-bg: linear-gradient(160deg, #1b3166, #060e25 74%); --gt-edge: rgba(170, 200, 255, 0.52); --gt-felt: radial-gradient(ellipse at 50% 30%, #2c63bd, #0c2350 74%); --gt-rail: #10141e; }
.gt-pk .gc1 { left: 25%; top: 21%; transform: rotate(-7deg); }
.gt-pk .gc2 { left: 40%; top: 19%; }
.gt-pk .gc3 { left: 55%; top: 21%; transform: rotate(7deg); }
.gt-dealer { position: absolute; right: 10%; top: 15%; width: 12%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #111;
  font-weight: 900; font-size: 0.95rem; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), inset 0 -2px 0 #bbb; }
.gt-pk .g1 { --chip: #262326; left: 9%; top: 42%; }
.gt-pk .g2 { --chip: #d8393e; left: 15%; top: 50%; }
.gt-pk .g3 { --chip: #e8b730; left: 78%; top: 45%; }
.game-hub > .join-box { max-width: 30rem; min-height: 0; }
/* a game's own screen: its colours on the banner, its name, back to all games */
.gv-banner { display: flex; align-items: center; gap: 0.8rem; padding: 0.65rem 0.85rem; border-radius: 18px; margin-bottom: 0.2rem; background: var(--gt-bg); color: #fff;
  box-shadow: inset 0 0 0 2px var(--gt-edge), 0 8px 20px rgba(10, 0, 4, 0.45); }
.gv-title { display: grid; flex: 1; min-width: 0; }
.gv-title b { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; line-height: 1; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); }
.gv-title small { font-size: 0.84rem; font-weight: 800; color: #f6e7d0; }
.game-view { display: grid; gap: 1rem; }
.game-view.hidden { display: none; }
/* phones (landscape): three smaller tiles in a row */
@media (max-height: 500px) {
  .game-hub, .game-view { gap: 0.6rem; }
  .gh-tiles { gap: 0.6rem; }
  .game-tile { min-height: 9.8rem; border-radius: 16px; }
  .gt-text { padding: 1.6rem 0.65rem 0.55rem; }
  .gt-name { font-size: 1.3rem; }
  .gt-tag { font-size: 0.68rem; }
  .gt-count { font-size: 0.66rem; }
  .gt-badge { font-size: 1.5rem; }
  .gt-dealer { font-size: 0.7rem; }
  .gt-arc text { font-size: 12px; }
  .gv-banner { padding: 0.4rem 0.6rem; border-radius: 14px; }
  .gv-title b { font-size: 1.2rem; }
  .gv-title small { font-size: 0.7rem; }
}
/* narrow portrait phones: one tile a row */
@media (max-width: 560px) { .gh-tiles { grid-template-columns: 1fr; } .game-tile { min-height: 9rem; } }
.soon { display: grid; gap: 0.55rem; }
.soon h2 { font-size: 1.15rem; }
.soon-row { list-style: none; margin: 0; padding: 0 0 0.3rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.55rem; }
.soon-card { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0.6rem; align-items: center;
  padding: 0.6rem 0.75rem; border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1.5px dashed rgba(255, 214, 120, 0.22); }
.soon-card i { grid-row: 1 / 3; font-style: normal; font-size: 1.6rem; line-height: 1; filter: saturate(0.85); }
.soon-card b { font-size: 0.9rem; color: #fff; }
.soon-card small { font-size: 0.74rem; color: var(--muted); line-height: 1.25; }
.soon-card::after { content: 'Soon'; position: absolute; top: -0.5rem; right: 0.6rem; padding: 0 0.45rem; border-radius: 999px; font-size: 0.62rem; font-weight: 900;
  letter-spacing: 0.04em; color: #3a1c00; background: linear-gradient(180deg, #fff0a6, #ffcb45); }
/* phones held sideways: one row that scrolls */
@media (max-height: 500px) {
  .soon-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(170px, 200px); overflow-x: auto; padding-top: 0.5rem; }
}

/* ---------- coins to a friend (E1a, 3 Nov 2026) ---------- */
.gift-card { width: min(460px, 94vw); display: grid; gap: 0.65rem; }
.gift-card h2 { padding-right: 2.6rem; }
.gift-amt { display: flex; align-items: center; gap: 0.5rem; }
.gift-amt .coin { font-size: 1.5rem; }
.gift-amt input { font-size: 1.3rem; font-weight: 900; }
.gift-picks { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.gift-quote { display: grid; gap: 0.15rem; min-height: 3.2rem; padding: 0.55rem 0.75rem; border-radius: 14px; background: rgba(255, 255, 255, 0.06); }
.gift-quote b { font-size: 1.02rem; color: #fff; }
.gift-quote span { font-size: 0.86rem; color: #ffe9a8; font-weight: 800; }
.gift-quote small { font-size: 0.8rem; color: var(--muted); }
.gift-quote.bad b { color: #fca5a5; }

/* ---------- transitions (F2, 3 Nov 2026): soft fades between screens, home panes and sheets — opacity only (nothing
   moves, so nothing lands on anything else on the way), a slight pop for a sheet's card; none with "reduce motion" ---------- */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes card-pop { from { transform: scale(0.97); } to { transform: none; } }
.screen:not(.hidden) { animation: fade-in 0.22s ease-out; }
.home-pane:not(.hidden) { animation: fade-in 0.18s ease-out; }
.dv-pane:not(.hidden) { animation: fade-in 0.15s ease-out; }
.help:not(.hidden) { animation: fade-in 0.16s ease-out; }
.help:not(.hidden) > .help-card { animation: card-pop 0.2s cubic-bezier(.2, .9, .3, 1.15); }
@media (prefers-reduced-motion: reduce) {
  .screen:not(.hidden), .home-pane:not(.hidden), .dv-pane:not(.hidden), .help:not(.hidden), .help:not(.hidden) > .help-card { animation: none; }
}

/* ---------- the illustrated How to play (F6, 3 Nov 2026): example hands with the game's own cards ---------- */
.egs { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; align-items: center; margin-top: 0.15rem; }
.eg { display: inline-flex; align-items: center; gap: 0.45rem; }
.eg em { font-style: normal; font-size: 0.86rem; color: var(--ink); }
.mini-hand { display: inline-flex; }
.mini-hand img { height: 2.9rem; aspect-ratio: 167 / 243; border-radius: 4px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45); background: #fff; }
.mini-hand img + img { margin-left: -0.75rem; }
@media (max-height: 500px) { .mini-hand img { height: 2.3rem; } .mini-hand img + img { margin-left: -0.6rem; } }

/* ---------- chat bubbles at the poker and rummy seats (3 Nov 2026) ---------- */
.seat-bubble { position: absolute; bottom: calc(100% + 0.35rem); left: 50%; transform: translateX(-50%); max-width: 190px; padding: 0.25em 0.75em; border-radius: 14px;
  background: #fffdf6; color: #2b1a14; font-weight: 800; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 9;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45); pointer-events: none; animation: bubble-life 4s ease-out both; }
.pk-seat.top .seat-bubble { bottom: auto; top: calc(100% + 0.35rem); }
@keyframes bubble-life { 0% { opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .seat-bubble { animation: none; } }
/* ---------- each game's own screen in its own colour (3 Nov — the owner: "different button designs for different game
   menu, may b with their different game colors, one color for one game? you figure that out"). One colour per game, and
   its buttons take the shape of its table:
     Shan 9    — red lacquer and gold leaf: the oval's soft tiles, a gold rim and a gold inlay, gold-coin icons;
     Rummy (Blackjack's until 5 Nov) — emerald felt in a walnut rail with a brass inlay: a card table's rounded corners
                 sign, gold casino-chip icons;
     Poker     — midnight sapphire in black leather with a silver inlay: the racetrack's pill shape, the icon in a
                 chrome ring beside the words.
   The room around the screen changes with it (html[data-gv], set by home.js while the Play tab shows one game; the hub
   and the other tabs stay in the house red). Only #game-view, its room and the host sheet: the tables keep theirs. ---------- */
html[data-gv=shan] { --g-1: #d63a57; --g-2: #9e1a36; --g-3: #5c0b1f; --g-4: #2a0510; --g-lip: #33040f; --g-hi: #ff8597;
  --g-ink: #fff; --g-sub: #ffe3c4; --g-acc: #ffd040; --g-tsh: #4a0716; --g-line: rgba(255, 214, 120, 0.7);
  --g-rim: linear-gradient(135deg, #fff2b8 0%, #e3a425 28%, #fff0a8 50%, #b9770f 74%, #ffe08a 100%); }
html[data-gv=rummy] { --g-1: #26b56a; --g-2: #137e47; --g-3: #0a4a2b; --g-4: #04190f; --g-lip: #032013; --g-hi: #6ae6a3;
  --g-ink: #fff; --g-sub: #eaf6d6; --g-acc: #ffd98a; --g-tsh: #053a1f; --g-line: rgba(255, 216, 140, 0.75);
  --g-rim: linear-gradient(180deg, #b07a42 0%, #7a4a20 30%, #57320f 64%, #3a1f07 100%); }
html[data-gv=poker] { --g-1: #3f7fea; --g-2: #1f51b6; --g-3: #0d2766; --g-4: #050c24; --g-lip: #040a1f; --g-hi: #93bcff;
  --g-ink: #fff; --g-sub: #dbe6ff; --g-acc: #d6e4ff; --g-tsh: #071a45; --g-line: rgba(214, 226, 250, 0.8);
  --g-rim: linear-gradient(180deg, #4c505b 0%, #2c2f37 30%, #17191f 64%, #08090c 100%); }
/* the room: Shan 9 keeps the house red; Rummy an emerald card room, Poker a midnight club (lamps and suits to match) */
html[data-screen=screen-rooms][data-gv=rummy] body {
  background:
    radial-gradient(85% 60% at 50% -12%, rgba(255, 236, 170, 0.22), rgba(255, 236, 170, 0) 62%),
    radial-gradient(70% 50% at 50% 112%, rgba(80, 220, 140, 0.13), rgba(80, 220, 140, 0) 70%),
    var(--lattice),
    radial-gradient(circle at 50% 34%, #17573a 0%, #0f3b27 38%, #082317 70%, #030c07 100%); }
html[data-screen=screen-rooms][data-gv=poker] body {
  background:
    radial-gradient(85% 60% at 50% -12%, rgba(170, 200, 255, 0.24), rgba(170, 200, 255, 0) 62%),
    radial-gradient(70% 50% at 50% 112%, rgba(150, 120, 255, 0.14), rgba(150, 120, 255, 0) 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cpath d='M23 1.5 44.5 23 23 44.5 1.5 23Z' fill='none' stroke='%23d6e4ff' stroke-opacity='.07' stroke-width='1.2'/%3E%3Ccircle cx='23' cy='23' r='1.6' fill='%23d6e4ff' fill-opacity='.08'/%3E%3C/svg%3E"),
    radial-gradient(circle at 50% 34%, #1c3272 0%, #122253 38%, #0a1434 70%, #03060f 100%); }
html[data-screen=screen-rooms][data-gv=rummy] .menu-fx { --k1: 255, 214, 130; --k2: 110, 230, 160; --k3: 255, 240, 205; }
html[data-screen=screen-rooms][data-gv=poker] .menu-fx { --k1: 140, 180, 255; --k2: 180, 140, 255; --k3: 120, 230, 255; }
html[data-gv=rummy] .menu-fx .suit { color: rgba(255, 228, 160, calc(var(--a) * 1.7)); }
html[data-gv=poker] .menu-fx .suit { color: rgba(214, 228, 255, calc(var(--a) * 1.7)); }
html[data-gv] #game-view .list-head h2 .ic { color: var(--g-acc); }

/* the frame round the screen (the top bar, the side rail, the balance) in the game's deep colour; Shan 9 is the house red */
html[data-screen=screen-rooms][data-gv=rummy] .home-top { background: linear-gradient(180deg, rgba(20, 84, 52, 0.97), rgba(7, 36, 22, 0.97)); }
html[data-screen=screen-rooms][data-gv=rummy] .home-nav { background: linear-gradient(180deg, rgba(10, 46, 29, 0.94), rgba(4, 20, 12, 0.94)); }
html[data-screen=screen-rooms][data-gv=rummy] .home-top .coin-chip { background: linear-gradient(180deg, #17603b, #08301d) padding-box, var(--metal-edge) border-box; }
html[data-screen=screen-rooms][data-gv=poker] .home-top { background: linear-gradient(180deg, rgba(30, 54, 116, 0.97), rgba(10, 20, 52, 0.97));
  box-shadow: inset 0 -2px 0 rgba(214, 226, 250, 0.45), 0 6px 18px rgba(2, 4, 12, 0.5); }
html[data-screen=screen-rooms][data-gv=poker] .home-nav { background: linear-gradient(180deg, rgba(14, 27, 64, 0.94), rgba(5, 10, 28, 0.94)); box-shadow: inset -1px 0 0 rgba(214, 226, 250, 0.25); }
html[data-screen=screen-rooms][data-gv=poker] .home-top .coin-chip { background: linear-gradient(180deg, #1f3a7a, #0a1636) padding-box, var(--metal-edge) border-box; }

/* the two ways in. Quick play: the game's bright colour; Host a table: the same colour, deep, in the same frame */
html[data-gv] #game-view .choice-card { color: var(--g-ink); border: 2px solid transparent;
  background: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 55%) padding-box,
    linear-gradient(160deg, var(--t1), var(--t2)) padding-box, var(--g-rim) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 5px 0 var(--g-lip), 0 12px 26px rgba(0, 0, 0, 0.45); }
html[data-gv] #game-view .choice-card.quick { --t1: var(--g-1); --t2: var(--g-3); }
html[data-gv] #game-view .choice-card.host { --t1: var(--g-3); --t2: var(--g-4); color: var(--g-ink); }
html[data-gv] #game-view .choice-card b { text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); -webkit-text-stroke: 0.16em var(--g-tsh); paint-order: stroke fill; }
html[data-gv] #game-view .choice-card small { color: var(--g-sub); }
html[data-gv] #game-view .choice-card::after { color: rgba(255, 255, 255, 0.09); }
html[data-gv] #game-view .choice-card.host::after { color: rgba(255, 255, 255, 0.07); }
/* Shan 9: a gold-leaf rim, a gold inlay line inside it, gold coins */
html[data-gv=shan] #game-view .choice-card { border-radius: 20px; outline: 1.5px solid rgba(255, 214, 120, 0.5); outline-offset: -8px; }
html[data-gv=shan] #game-view .choice-card .ic.big { color: #6a0c22; stroke-width: 2.6;
  background: radial-gradient(circle at 36% 30%, #fff5c4, #ffd24a 45%, #c47d10); box-shadow: inset 0 -2px 0 rgba(120, 60, 0, 0.45), 0 3px 8px rgba(0, 0, 0, 0.35); }
html[data-gv=shan] #game-view .choice-card::after { color: rgba(255, 214, 120, 0.13); }
/* Rummy: the felt in a walnut rail, a brass line between them, a card table's rounded corners (it was blackjack's half-moon
   until 5 Nov); centred, a gold chip */
html[data-gv=rummy] #game-view .choice-card { justify-items: center; text-align: center; border-width: 6px; border-radius: 30px / 24px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 216, 140, 0.8), inset 0 10px 24px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 216, 140, 0.35), 0 5px 0 #2a1605, 0 12px 26px rgba(0, 0, 0, 0.45); }
html[data-gv=rummy] #game-view .choice-card .ic.big { color: #073a20; stroke-width: 2.7;
  background: radial-gradient(circle, #f0c457 0 50%, #fff4d2 51% 55%, rgba(255, 255, 255, 0) 56%), repeating-conic-gradient(#fff4d2 0deg 15deg, #d49a2c 15deg 45deg);
  box-shadow: inset 0 0 0 1px rgba(120, 70, 0, 0.5), 0 3px 8px rgba(0, 0, 0, 0.4); }
html[data-gv=rummy] #game-view .choice-card::after { color: rgba(255, 228, 160, 0.1); right: 0.25em; }
/* Poker: the racetrack — a pill in black leather with a silver inlay; the icon in a chrome ring beside the words */
html[data-gv=poker] #game-view .choice-card { border-width: 5px; border-radius: 999px; padding: 0.9rem 2rem 0.9rem 1.5rem;
  grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; row-gap: 0.15rem; align-content: center; align-items: center;
  box-shadow: inset 0 0 0 1.5px rgba(214, 226, 250, 0.85), inset 0 3px 4px rgba(230, 238, 255, 0.22), inset 0 10px 24px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(160, 190, 255, 0.25), 0 5px 0 #020306, 0 12px 26px rgba(0, 0, 0, 0.5); }
html[data-gv=poker] #game-view .choice-card .ic.big { grid-row: 1 / span 2; width: 3.1rem; height: 3.1rem; padding: 0.7rem; color: #e6efff; stroke-width: 2.4;
  background: radial-gradient(circle, #0d2766 0 57%, rgba(13, 39, 102, 0) 58%), conic-gradient(from 30deg, #ffffff, #8f9bb3, #f4f7ff, #6d7890, #e6ebf7, #9aa6bd, #ffffff);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45); }
html[data-gv=poker] #game-view .choice-card b, html[data-gv=poker] #game-view .choice-card small { grid-column: 2; }
html[data-gv=poker] #game-view .choice-card::after { color: rgba(214, 228, 255, 0.1); right: 0.7em; }
html[data-gv=poker] #game-view .choice-card.quick::before { background: linear-gradient(100deg, rgba(220, 235, 255, 0), rgba(220, 235, 255, 0.32) 50%, rgba(220, 235, 255, 0)); }

/* the banner: the same frame as the game's buttons */
html[data-gv] #gv-banner { border: 2px solid transparent; color: var(--g-ink);
  background: radial-gradient(120% 160% at 0% 0%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 50%) padding-box, linear-gradient(160deg, var(--g-2), var(--g-4)) padding-box, var(--g-rim) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 20px rgba(0, 0, 0, 0.45); }
html[data-gv=rummy] #gv-banner { border-width: 5px; border-radius: 24px / 19px; box-shadow: inset 0 0 0 1.5px rgba(255, 216, 140, 0.8), 0 8px 20px rgba(0, 0, 0, 0.45); }
html[data-gv=poker] #gv-banner { border-width: 4px; border-radius: 999px; padding-inline: 0.7rem; box-shadow: inset 0 0 0 1.5px rgba(214, 226, 250, 0.85), 0 8px 20px rgba(0, 0, 0, 0.5); }
html[data-gv] #gv-banner .gv-title small { color: var(--g-sub); }
html[data-gv] #gv-banner .btn.ghost { color: var(--g-sub); background: rgba(0, 0, 0, 0.24); box-shadow: inset 0 0 0 1.5px var(--g-line), 0 2px 6px rgba(0, 0, 0, 0.3); }
html[data-gv] #gv-banner .btn.ghost:hover:not(:disabled) { background: rgba(0, 0, 0, 0.12); color: #fff; }
html[data-gv=rummy] #gv-banner .btn.ghost { border-radius: 10px; }
html[data-gv=poker] #gv-banner .btn.ghost { border-radius: 999px; }

/* every button on the screen in the game's colour (Join, Host a public table, the filter; the host sheet's Host table) */
html[data-gv] #game-view .btn.gold, html[data-gv] #host-go {
  --b1: var(--g-hi); --b2: var(--g-1); --b3: var(--g-2); --lip: var(--g-lip); --txt: #fff; --tsh: var(--g-tsh);
  -webkit-text-stroke: 0.2em var(--tsh); paint-order: stroke fill; text-shadow: 0 2px 0 var(--tsh); }
html[data-gv=shan] #game-view .btn.gold, html[data-gv=shan] #host-go { box-shadow: inset 0 0 0 1.5px rgba(255, 214, 120, 0.75), inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 4px 0 var(--lip), 0 7px 14px rgba(14, 1, 5, 0.4); }
html[data-gv=rummy] #game-view .btn.gold, html[data-gv=rummy] #host-go { border-radius: 10px; box-shadow: inset 0 0 0 1.5px rgba(255, 216, 140, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 4px 0 var(--lip), 0 7px 14px rgba(0, 0, 0, 0.4); }
html[data-gv=poker] #game-view .btn.gold, html[data-gv=poker] #host-go { border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(214, 226, 250, 0.85), inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 4px 0 var(--lip), 0 7px 14px rgba(0, 0, 0, 0.45); }
html[data-gv] #game-view .seg, html[data-gv] #host-sheet .seg { background: rgba(0, 0, 0, 0.3); }
html[data-gv] #game-view .seg-opt.on, html[data-gv] #host-sheet .seg-opt.on { background: linear-gradient(180deg, var(--g-hi), var(--g-1) 55%, var(--g-2)); color: #fff;
  text-shadow: 0 1px 0 var(--g-tsh); box-shadow: inset 0 0 0 1px var(--g-line), inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 0 var(--g-lip); }
html[data-gv=poker] #game-view .seg, html[data-gv=poker] #game-view .seg-opt, html[data-gv=poker] #host-sheet .seg, html[data-gv=poker] #host-sheet .seg-opt { border-radius: 999px; }
html[data-gv] #host-sheet .host-step h3 { color: var(--g-acc); }
html[data-gv] #host-sheet .preset.on { background: linear-gradient(180deg, var(--g-hi), var(--g-1) 55%, var(--g-2)); color: #fff; text-shadow: 0 1px 0 var(--g-tsh);
  box-shadow: inset 0 0 0 1px var(--g-line), 0 2px 0 var(--g-lip); }
html[data-gv] #host-sheet .help-card { box-shadow: inset 0 0 0 2px var(--g-line), 0 24px 60px rgba(0, 0, 0, 0.6); }

/* the list: each table card in the game's colour, the strip on top its rail */
html[data-gv] #game-view .tcard { background: linear-gradient(180deg, var(--g-3), var(--g-4)); border-color: var(--g-line); }
html[data-gv=shan] #game-view .tcard { background: linear-gradient(180deg, #56203a, #2e0d1a); }
html[data-gv=rummy] #game-view .tcard { border-radius: 24px / 18px; }
html[data-gv=rummy] #game-view .tcard::before { background: linear-gradient(90deg, #57320f, #b07a42 50%, #57320f); box-shadow: 0 1px 0 rgba(255, 216, 140, 0.7); }
html[data-gv=poker] #game-view .tcard { border-radius: 26px; }
html[data-gv=poker] #game-view .tcard::before { background: linear-gradient(90deg, #6d7890, #f4f7ff 50%, #6d7890); box-shadow: 0 1px 0 rgba(10, 14, 24, 0.8); }
html[data-gv] #game-view .empty-card { border-color: var(--g-line); background: rgba(0, 0, 0, 0.16); }
html[data-gv=rummy] #game-view .empty-card { border-radius: 24px / 18px; }
html[data-gv=poker] #game-view .empty-card { border-radius: 26px; }

/* the host sheet: the game's own panel round the same steps (Shan 9 keeps the house lacquer) */
html[data-gv=rummy] #host-sheet { --panel-lo: rgba(2, 16, 9, 0.6); --muted: #cfe3d2; }
html[data-gv=rummy] #host-sheet .help-card { background: linear-gradient(180deg, #145236 0%, #062417 100%) padding-box, var(--metal-edge) border-box;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), var(--shadow-2), 0 0 70px rgba(90, 230, 150, 0.14); }
html[data-gv=rummy] #host-sheet .sheet-foot { background: #062417; box-shadow: 0 1.1rem 0 #062417, 0 -12px 14px -8px rgba(0, 8, 4, 0.7); }
html[data-gv=poker] #host-sheet { --panel-lo: rgba(3, 7, 22, 0.6); --muted: #c4d0ea; }
html[data-gv=poker] #host-sheet .help-card { background: linear-gradient(180deg, #1d3570 0%, #0a1434 100%) padding-box,
    linear-gradient(135deg, #ffffff 0%, #9aa6bd 25%, #f4f7ff 50%, #6d7890 75%, #e6ebf7 100%) border-box;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), var(--shadow-2), 0 0 70px rgba(120, 160, 255, 0.16); }
html[data-gv=poker] #host-sheet .sheet-foot { background: #0a1434; box-shadow: 0 1.1rem 0 #0a1434, 0 -12px 14px -8px rgba(0, 2, 10, 0.7); }
html[data-gv=poker] #host-sheet .help-card h2 { color: #e6efff; text-shadow: 0 2px 0 rgba(4, 10, 30, 0.6); }
html[data-gv=poker] #host-sheet input:focus { border-color: #b9ccf5; }
/* "your table" (above every game's screen): in its own game's colour, the strip on top its rail */
.room-card[data-g=rummy] { background: linear-gradient(170deg, #17603b, #062417) padding-box, var(--metal-edge) border-box; }
.room-card[data-g=rummy]::before { background: linear-gradient(90deg, #57320f, #b07a42 50%, #57320f); }
.room-card[data-g=poker] { background: linear-gradient(170deg, #1f3a7a, #0a1434) padding-box, linear-gradient(135deg, #ffffff 0%, #9aa6bd 25%, #f4f7ff 50%, #6d7890 75%, #e6ebf7 100%) border-box; }
.room-card[data-g=poker]::before { background: linear-gradient(90deg, #6d7890, #f4f7ff 50%, #6d7890); }
.room-card[data-g=rummy] .rc-sub { color: #cfe3d2; }
.room-card[data-g=poker] .rc-sub { color: #c4d0ea; }

/* phones (landscape): the same frames, compact */
@media (max-height: 500px) {
  html[data-gv] #game-view .choice-card { padding: 0.55rem 0.8rem; }
  html[data-gv=shan] #game-view .choice-card { border-radius: 16px; outline-offset: -6px; }
  html[data-gv=rummy] #game-view .choice-card { border-width: 5px; border-radius: 22px / 18px; }
  html[data-gv=poker] #game-view .choice-card { border-width: 4px; padding: 0.45rem 1.4rem 0.45rem 0.9rem; column-gap: 0.7rem; }
  html[data-gv=poker] #game-view .choice-card .ic.big { grid-row: auto; width: 2.3rem; height: 2.3rem; padding: 0.5rem; }
  html[data-gv=rummy] #gv-banner { border-width: 4px; border-radius: 18px / 14px; }
  html[data-gv=poker] #gv-banner { border-width: 3px; }
}
/* (3 Nov) privacy: a public table card a stranger sees has no host on it — just how it plays */
.tcard .person.anon { color: var(--muted); font-weight: 800; font-size: 0.88rem; min-height: 2.2rem; display: flex; align-items: center; }
.set-hint { margin: 0 0 0.3rem; font-size: 0.85rem; line-height: 1.4; }
/* (3 Nov) poker pre-actions: chosen while others think (Check / Fold, Check, Call X, Call any) — a ticked one is lit */
/* a dead button: on an empty seat (the player who had the small blind's place left) */
.pk-seat.empty:has(.pk-dealer.dead) { display: grid; width: 2.2rem; height: 2.2rem; }
.pk-seat.empty .pk-dealer.dead { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0.9; }
/* the showdown's hand names appear as each hand turns over (its delay set inline, in the showdown's order) */
.pk-hand { animation: pkHandIn 0.35s ease-out both; }
.pk-hand.muck { color: var(--muted); background: rgba(0, 0, 0, 0.35); font-style: italic; }
@keyframes pkHandIn { from { opacity: 0; } to { opacity: 1; } } /* opacity only: the label is centred with a transform */
@media (prefers-reduced-motion: reduce) { .pk-hand { animation: none; } }
/* (3 Nov) poker chips on the move: the bets into the pot at the end of a street, the pot to the winner */
.pk-fly { position: fixed; z-index: 40; width: 18px; height: 18px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #ffd24a 0 40%, #fff6c8 41% 50%, #e8a71b 51%); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 0 0 1.5px rgba(120, 70, 0, 0.5);
  transition: transform 0.5s cubic-bezier(0.3, 0.7, 0.4, 1), opacity 0.5s ease-in; }
/* a hand's name at the seat: in full on a computer, its kind on a phone (the line under the board has it in full) */
.pk-hand .hn-short { display: none; }
@media (max-height: 500px), (max-width: 700px) { .pk-hand .hn-full { display: none; } .pk-hand .hn-short { display: inline; } }
/* (3 Nov) the board's cards in the winning hand are lifted once the hands have turned over */
.pk-board .card { transition: transform 0.3s ease-out, filter 0.3s ease-out; }
.pk-board .card.best { transform: translateY(-12%); filter: drop-shadow(0 0 6px rgba(255, 210, 74, 0.95)); }
/* (3 Nov, BUGS #98) pre-actions: tick boxes with a caption, clearly not your moves (those are glossy) */
.pk-actions .pk-pre-cap { align-self: center; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; color: rgba(255, 230, 190, 0.75); text-transform: uppercase; margin-right: 0.1rem; }
.pk-actions .btn.pk-pre { min-width: 0; min-height: 2.1rem; padding: 0.2em 0.75em 0.2em 0.45em; gap: 0.4em; font-family: var(--font-ui); font-weight: 800; font-size: 0.84rem; color: #fff1e0;
  background: rgba(10, 4, 8, 0.45); text-shadow: none; box-shadow: inset 0 0 0 1.5px rgba(255, 214, 120, 0.45); border-radius: 12px; }
.pk-actions .btn.pk-pre::before { display: none; }
.pk-actions .btn.pk-pre .tick { display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem; border-radius: 4px; font-size: 0.8rem; line-height: 1;
  background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1.5px rgba(255, 230, 190, 0.8); color: #3a1c00; }
.pk-actions .btn.pk-pre.on { color: #3a1c00; background: linear-gradient(180deg, #fff0a6, #ffcb45 55%, #f2a01b); box-shadow: 0 2px 0 #a8650a; }
.pk-actions .btn.pk-pre.on .tick { background: #fff7d6; box-shadow: inset 0 0 0 1.5px #a8650a; }
/* the raise panel's sizes: chips, not bare glass (BUGS #98) */
.pk-quick .btn { --b1: #6077b3; --b2: #34477c; --b3: #1f2b52; --lip: #0e1530; --txt: #eef3ff; --tsh: transparent; font-family: var(--font-ui); font-weight: 900; text-shadow: none; }
.pk-quick .btn.on { --b1: #fff0a6; --b2: #ffcb45; --b3: #f2a01b; --lip: #a8650a; --txt: #3a1c00; }
@media (max-height: 500px) {
  .pk-actions .pk-pre-cap { display: none; } /* (no room on a phone: the tick boxes speak for themselves) */
  .pk-actions .btn.pk-pre { min-height: 1.9rem; font-size: 0.74rem; padding: 0.15em 0.55em 0.15em 0.35em; }
}
/* the smallest phones (568×320): the bigger cards (BUGS #99) fit when your seat steps left of your buttons, your bet sits
   beside your cards, and the pot, the board and the message move a step down, clear of the top seat's cards */
@media (max-height: 340px), (max-width: 600px) {
  .felt.pk-mode { --pk-mine: 54px; } /* (60 met the message line here; the old size was 32) */
  .felt.pk-mode .pk-seat.r0 { left: 37%; }
  /* (4 Nov, found by pk-check) your bet: in your seat's own top-right corner, over your plate — beside the seat it met
     your buttons when they said "Call 1,000" */
  .pk-seat.r0 .pk-bet { bottom: auto; top: 0; left: auto; right: 0; transform: none; }
  .pk-pot { top: 38.5%; }
  .pk-board { top: 52%; }
  .pk-msg { top: 60%; }
  .pk-msg span:not(:empty) { -webkit-line-clamp: 1; } /* (the main line says it all here: "You lose 60K") */
}
/* (3 Nov, found by pk-check) the smallest phones: your own winning card lifted into the result line above it — there it
   lifts less (still lit) */
@media (max-height: 340px) { .pk-seat.you .pk-cards .card.best { transform: translateY(-5%) !important; } }
/* (4 Nov — the owner: "cards are still small to see on mobile … the rest of opponents players same size as shan 9 but
   bigger one for the player itself") phones held sideways: poker takes Shan 9's own card sizes — the
   others' cards --card-h, yours --my-card-h (and on the smallest phones Shan 9's smallest) */
@media (max-height: 500px) {
  .felt.pk-mode { --pk-card: var(--card-h); --pk-mine: var(--my-card-h); }
}
@media (max-height: 500px) {
  /* poker: your plate beside your cards (not under them) — the bigger cards need its height; the pot to the left of the
     board, clear of the top seat's bigger cards */
  /* (7 Nov) …and your seat slides left when it must: the action bar and its clock start where your plate ends on a phone (it
     covered the end of your name and the dealer's chip). 402 px = the bar at its widest without the raise panel (275, "Check /
     Fold" and all), some room, half your seat and the dealer's chip. */
  .felt.pk-mode .pk-seat.r0 { grid-auto-flow: column; align-items: end; column-gap: 0.4rem; left: min(50%, calc(98.8% - 402px)); }
  .felt.pk-mode .pk-pot { top: 49%; left: calc(50% - var(--pk-board) * 1.8 - 0.6rem); transform: translate(-100%, -50%); }
}
@media (max-height: 340px), (max-width: 600px) {
  .felt.pk-mode .pk-seat.r0 { left: 37%; } /* (a smaller seat here: this clears the bar, above) */
  /* (the smallest phones: the pot back above the board — beside it, it met the left seat's plate) */
  .felt.pk-mode .pk-pot { top: 38.5%; left: 50%; transform: translate(-50%, -50%); }
}
/* (4 Nov, UI gate) before a hand on a phone the long blinds line ("No limit poker · blinds 250 / 500") sits centred above
   the board — beside it, it ran under the left seat's plate; no hand is out, so the space above the board is free */
@media (max-height: 500px) { .felt.pk-mode .pk-pot.blinds { top: 36%; left: 50%; transform: translate(-50%, -50%); } }
/* side pots (4 Nov, found by pk-check: "Pot 565K · main 450K · side 75K · side 40K" ran under the left seat on a phone).
   A laptop: one line, dots between. A phone: the total, the pots under it, wrapping in the room left of the board (up to
   the left seat's plate: it stands at 10%, about 120 px wide). The smallest phones: the total only — no room round the board. */
.pk-pot-total { font-weight: inherit; }
.pk-pot-sides i { font-style: normal; }
.pk-pot-sides i::before { content: ' · '; }
.pk-pot-sides .pk-pot-more { display: none; }
@media (max-height: 500px) {
  .felt.pk-mode .pk-pot.split { display: grid; justify-items: center; white-space: normal; text-align: center; border-radius: 12px; padding: 0.12em 0.6em 0.2em;
    max-width: calc(40% - var(--pk-board) * 1.8 - 0.6rem - 66px); }
  .pk-pot-sides { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 0.5em; font-size: 0.72em; font-weight: 800; line-height: 1.3; color: rgba(255, 233, 168, 0.88); }
  .pk-pot-sides i { white-space: nowrap; }
  .pk-pot-sides i::before { content: none; }
  /* three pots or more: the main pot, then "4 side pots 1.2M" (six pots one under another reached the seat above) */
  .pk-pot.many .pk-pot-sides i:not(:first-child):not(.pk-pot-more) { display: none; }
  .pk-pot.many .pk-pot-sides .pk-pot-more { display: inline; }
}
@media (max-height: 340px), (max-width: 600px) {
  .felt.pk-mode .pk-pot.split { display: block; max-width: none; white-space: nowrap; border-radius: 999px; padding: 0.1em 0.85em; }
  .pk-pot-sides { display: none; }
}
/* (4 Nov, found by pk-check) a phone: the winnings on the winner's own plate, in place of the money line — beside their
   cards, the top seats' "+1.23M" met each other, the top middle seat's hand and the side seats' cards. Yours (at the
   bottom) keep their place beside your cards. */
.pk-who .pk-won { display: none; }
@media (max-height: 500px) {
  .pk-seat:not(.r0) .pk-win { display: none; }
  .pk-seat:not(.r0) .pk-who.won .money:not(.pk-won) { display: none; }
  .pk-seat:not(.r0) .pk-who .pk-won { display: inline-flex; color: #5ee88f; animation: pop-x-in 0.35s cubic-bezier(.3, 1.6, .5, 1) both; }
}
/* ---------- your cards up close (4 Nov — closeup.js): big in the middle; on a deal it goes by itself and lets taps through ---------- */
.closeup { position: absolute; inset: 0; z-index: 30; display: grid; place-content: center; justify-items: center; gap: 0.6rem; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 50% 46%, rgba(8, 3, 6, 0.5), rgba(8, 3, 6, 0) 75%); animation: cu-in 0.2s ease-out both; }
.closeup.sticky { pointer-events: auto; cursor: pointer; background: rgba(8, 3, 6, 0.55); }
.closeup.out { animation: cu-out 0.45s ease-in both; } /* (5 Nov: 0.22 → 0.45 s — closeup.js OUT_MS) */
.closeup.hidden { display: none; }
.closeup .cu-row { display: flex; align-items: center; justify-content: center; gap: min(2.5vw, 18px); }
.closeup .cu-card { position: relative; height: min(56vh, 330px, 66vw); aspect-ratio: 167 / 243; border-radius: 6% / 4.2%; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 14px 34px rgba(0, 0, 0, 0.6); transform: rotate(calc(var(--k) * 5deg)) translateY(calc(var(--k) * var(--k) * 6px));
  animation: cu-pop 0.3s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc((var(--k) + 2) * 50ms); }
/* the card picture over the drawn rank and suit (those show only if the picture is missing) — as on every other card:
   the picture positioned (else the fallback, positioned, lay on top of it: the first build showed "9 ♣" in text) */
.closeup .cu-card { container-type: size; }
.closeup .cu-card img { position: relative; width: 100%; height: 100%; display: block; }
.closeup .cu-card .face-fallback { font-size: 22cqh; }
.closeup .cu-cap { margin: 0; padding: 0.15em 0.9em; border-radius: 999px; font-weight: 900; font-size: 1rem; color: #fff; background: rgba(6, 12, 14, 0.82); }
.closeup .cu-hint { margin: 0; font-size: 0.78rem; font-weight: 800; color: rgba(255, 244, 230, 0.85); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
@keyframes cu-in { from { opacity: 0; } }
@keyframes cu-out { to { opacity: 0; } }
@keyframes cu-pop { from { opacity: 0; transform: translateY(10vh) scale(0.6); } }
@media (prefers-reduced-motion: reduce) { .closeup, .closeup .cu-card { animation: none; } }
/* your own cards take taps (the layers round them let taps through to the table) */
.pk-seat.you .pk-cards { pointer-events: auto; cursor: zoom-in; }
/* ---------- level frames + bigger faces (4 Nov — the owner: "bigger player icon in the room now it is so small … remove
   level badge, introduce level related reward icon borders") ----------
   A frame is frames/<id>.svg round the picture: the picture is the hole in the middle (radius 42 of 120), so the frame's
   box is 120/84 of the picture — 21.43 % more on every side. Earned by playing (catalog.js FRAMES), picked in Profile. */
.avatar-wrap[data-frame]::after { content: ''; position: absolute; inset: -21.43%; z-index: 1; pointer-events: none;
  background: center / contain no-repeat; }
.avatar-wrap[data-frame=bronze]::after { background-image: url(frames/bronze.svg); }
.avatar-wrap[data-frame=silver]::after { background-image: url(frames/silver.svg); }
.avatar-wrap[data-frame=gold]::after { background-image: url(frames/gold.svg); }
.avatar-wrap[data-frame=diamond]::after { background-image: url(frames/diamond.svg); }
.avatar-wrap[data-frame=legend]::after { background-image: url(frames/legend.svg); }
.avatar-wrap[data-frame] > .avatar { box-shadow: none !important; } /* (the frame is the edge) */
/* the turn ring hugs the outside of the frame (no gap — list #2b, the medallion) */
.avatar-wrap[data-frame] .ring { inset: -21%; width: 142%; height: 142%; }
/* the faces at the table: bigger, as medallions — taller than the plate they sit on, so the plate keeps its height */
.plate .avatar-wrap { margin-block: calc(var(--av) * -0.13); }
/* poker (and rummy): their plates are smaller (six seats round a busier table) — 0.8 of Shan 9's face */
.pk-plate .avatar.sm, .rm-plate .avatar.sm { width: calc(var(--av) * 0.8); height: calc(var(--av) * 0.8); font-size: calc(var(--av) * 0.34); }
.pk-plate .avatar-wrap, .rm-plate .avatar-wrap { margin-block: calc(var(--av) * -0.1); }
/* a frame reaches past the face (21.43 % each side): room for it before the name — it covered the name's first letter */
.plate .avatar-wrap[data-frame] { margin-right: calc(var(--av) * 0.18); }
/* the bottom row: room under the plate for the medallion and its frame (0.13 + 0.21 of the face) — at 740×360 they
   reached past the screen's bottom edge (found by table-look, which now measures the framed face) */
.seat.at-bottom { padding-bottom: calc(var(--av) * 0.15); } /* (0.3 lifted the row's cards onto the bets in front) */
/* ... and the seat at the very top edge: room above its plate (its framed face reached past the top — play run, 740×360) */
.seat.at-top.at-edge { padding-top: calc(var(--av) * 0.12); } /* (0.3 pushed its cards onto the middle) */
/* the top-centre seat between the room's name and the top bar's buttons: a long name a little shorter (its plate grew
   with the face — "Aung Ko Ko 1234" ran under the first button at 1024×600) */
@media (max-width: 1100px) and (min-height: 501px) { .seat.at-edge .plate .name { max-width: 70px; } } /* (phones: 60 px, above) */
.pk-plate .avatar-wrap[data-frame], .rm-plate .avatar-wrap[data-frame] { margin-right: calc(var(--av) * 0.15); }
/* Profile: the frame picker */
.pf-frames { display: flex; flex-wrap: wrap; gap: 0.5rem 0.65rem; margin-top: 0.5rem; }
.pf-frame { display: grid; justify-items: center; gap: 0.3rem; min-width: 3.4rem; padding: 0.55rem 0.3rem 0.3rem; border-radius: 12px; border: 0;
  background: rgba(0, 0, 0, 0.22); color: #fff1e0; font: inherit; cursor: pointer; }
.pf-frame .avatar { width: 30px; height: 30px; font-size: 0.8rem; }
.pf-frame small { font-size: 0.7rem; font-weight: 800; }
.pf-frame.on { background: rgba(255, 210, 74, 0.18); box-shadow: 0 0 0 2px #ffd24a; }
.pf-frame.locked { opacity: 0.45; cursor: default; }
.pf-frame.locked .avatar-wrap { filter: grayscale(0.7); }
.pf-frame:not(.locked):not(.on):hover { background: rgba(255, 255, 255, 0.1); }

/* ======================= rummy (5 Nov 2026) — its own layer on the same felt (client/www/rummy.js) =======================
   The others round a walnut card table (their plate, a few backs and how many cards); the stock, the pile (500 Rum: spread)
   and Indian rummy's cut joker in the middle; 500 Rum's melds under them; your hand along the bottom (left of your moves),
   in its groups with their labels; the hand's result in a panel at the end. */
.felt.rm-mode .center, .felt.rm-mode #spots, .felt.rm-mode #deck, .felt.rm-mode #seats, .felt.rm-mode #btn-last { display: none !important; }
.felt.rm-mode .table-felt::before { content: none; }
.felt.rm-mode { --rm-card: clamp(30px, 8.5vh, 70px); --rm-mine: clamp(60px, 19vh, 150px); --rm-pile: clamp(48px, 13.5vh, 112px); --rm-meld: clamp(44px, 11vh, 96px); --rm-bar-w: min(300px, 24%); }
.rm { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.rm .rm-plate, .rm .rm-bar, .rm .rm-mine, .rm .rm-stock, .rm .rm-pile, .rm .rm-melds, .rm .rm-results { pointer-events: auto; }
.rm .card { position: relative; aspect-ratio: 167 / 243; }
/* the seats: the others round the table; yours (the plate) just above your hand on the left */
.rm-seat { position: absolute; display: grid; justify-items: center; gap: 0.15rem; transform: translateX(-50%); z-index: 2; }
.rm-seat.empty { display: none; }
/* yours: in the row under your hand, beside Sort (rummy.js #rm-me) */
.rm-me .rm-seat { position: static; transform: none; display: flex; align-items: center; gap: 0.35rem; }
.rm-row { display: flex; align-items: center; justify-content: center; gap: 0.6rem; max-width: 100%; margin-top: calc(var(--av) * 0.16); } /* (room for your face's frame under your cards) */
.rm-seat.r1 { left: 9%; top: 40%; } .rm-seat.r5 { left: 91%; top: 40%; }
.rm-seat.r2 { left: 23%; top: 12%; } .rm-seat.r4 { left: 77%; top: 12%; } /* (clear of the top bar's buttons) */
.rm-seat.r3 { left: 50%; top: 6%; }
.rm-plate { position: relative; display: flex; align-items: center; gap: 0.35rem; max-width: 100%; cursor: pointer; }
.rm-plate:has(.rm-dealer) { padding-right: 0.95rem; } /* (the dealer's chip sat on the end of their name) */
.rm-seat:not(.you) .rm-plate:hover { outline: 2px solid rgba(255, 208, 64, 0.65); outline-offset: 1px; border-radius: 999px; }
.rm-who { display: grid; min-width: 0; line-height: 1.15; }
.rm-who .name { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-seat.you:not(.turn) .rm-plate { border-color: #ffd24a; }
.rm-seat.away .rm-plate, .rm-seat.out .rm-plate { opacity: 0.55; }
.rm-seat.winner .rm-plate { box-shadow: 0 0 0 2px #ffd24a, 0 0 18px rgba(255, 210, 74, 0.75); }
.rm-dealer { position: absolute; top: -0.5rem; right: -0.55rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.72rem; font-weight: 900; color: #222; background: radial-gradient(circle at 40% 35%, #fff, #d9d9d9); box-shadow: 0 0 0 1.5px #555, 0 2px 4px rgba(0, 0, 0, 0.5); }
.rm-backs { position: relative; display: flex; height: var(--rm-card); }
.rm-back { display: block; height: 100%; aspect-ratio: 167 / 243; border-radius: 6% / 4.2%; background: url(cards/back.webp?v=6) center / cover; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); }
.rm-back + .rm-back { margin-left: calc(var(--rm-card) * -0.5); transform: rotate(7deg); }
.rm-back:nth-child(3) { transform: rotate(14deg); }
html[data-back=crimson] .rm-back, html[data-back=crimson] .rm-stock i { background-image: url(cards/back-crimson.webp?v=6); }
html[data-back=royal] .rm-back, html[data-back=royal] .rm-stock i { background-image: url(cards/back-royal.webp?v=6); }
html[data-back=jade] .rm-back, html[data-back=jade] .rm-stock i { background-image: url(cards/back-jade.webp?v=6); }
html[data-back=onyx] .rm-back, html[data-back=onyx] .rm-stock i { background-image: url(cards/back-onyx.webp?v=6); }
.rm-count { position: absolute; right: -0.45rem; bottom: -0.3rem; min-width: 1.3rem; padding: 0 0.3em; border-radius: 999px; font-size: 0.72rem; font-weight: 900; text-align: center;
  color: #3a1c00; background: linear-gradient(180deg, #fff0a6, #ffcb45); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.rm-tag, .rm-win { white-space: nowrap; border-radius: 999px; font-weight: 800; font-size: 0.68rem; padding: 0.02em 0.6em; color: #fff; background: rgba(6, 12, 14, 0.82); }
.rm-tag.out { color: #ffd0c8; }
.rm-win { color: #fff; background: linear-gradient(180deg, #4ade80, #16a34a); font-size: 0.8rem; }
/* the middle: the stock, the pile, Indian rummy's cut joker */
.rm-center { position: absolute; left: 50%; top: 37%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: clamp(0.6rem, 2vw, 1.6rem); }
.rm-stock { position: relative; height: var(--rm-pile); aspect-ratio: 167 / 243; border: 0; padding: 0; background: none; cursor: default; }
.rm-stock.hidden { visibility: hidden; }
.rm-stock i { position: absolute; inset: 0; border-radius: 6% / 4.2%; background: url(cards/back.webp?v=6) center / cover; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.rm-stock i:nth-child(1) { transform: translate(3px, 3px); } .rm-stock i:nth-child(2) { transform: translate(1.5px, 1.5px); }
.rm-stock b { position: absolute; left: 50%; bottom: -0.5rem; transform: translateX(-50%); font-size: 0.72rem; font-weight: 900; color: #fff; background: rgba(6, 12, 14, 0.8); border-radius: 999px; padding: 0 0.5em; }
.rm-stock.can, .rm-pc.can { cursor: pointer; }
.rm-stock.can i:nth-child(3), .rm-pc.can.top { box-shadow: 0 0 0 2.5px #4ade80, 0 0 14px rgba(74, 222, 128, 0.7); }
.rm-pile { position: relative; display: flex; align-items: center; min-width: calc(var(--rm-pile) * 0.69); height: var(--rm-pile); }
.rm-pile .card { height: var(--rm-pile); }
.rm-pile-empty { height: var(--rm-pile); aspect-ratio: 167 / 243; border-radius: 6% / 4.2%; border: 2px dashed rgba(255, 236, 190, 0.3); display: grid; place-items: center;
  font-size: 0.66rem; font-weight: 800; color: rgba(255, 236, 190, 0.5); }
.rm-pile-n { position: absolute; left: 50%; bottom: -0.5rem; transform: translateX(-50%); font-size: 0.72rem; font-weight: 900; color: #fff; background: rgba(6, 12, 14, 0.8); border-radius: 999px; padding: 0 0.5em; }
/* 500 Rum: the pile spread, every card showing; a card picked deep in it lifts with every card above it */
.rm-pile.spread { max-width: min(52vw, 620px); overflow-x: auto; overflow-y: visible; padding: 0.4rem 0.2rem; scrollbar-width: thin; }
.rm-pile.spread .card { flex: none; height: calc(var(--rm-pile) * 0.86); }
.rm-pile.spread .card + .card { margin-left: calc(var(--rm-pile) * -0.4); }
.rm-pile.spread .rm-pc.can:hover { transform: translateY(-6%); }
.rm-pc.picked { transform: translateY(-12%); }
.rm-pc.picked .inner { box-shadow: 0 0 0 2.5px #ffd24a, 0 0 12px rgba(255, 210, 74, 0.7); border-radius: 6% / 4.2%; }
.rm-wild { display: grid; justify-items: center; gap: 0.15rem; }
.rm-wild.hidden { display: none; }
.rm-wild .card { height: calc(var(--rm-pile) * 0.78); }
.rm-wild-cap { font-size: 0.72rem; font-weight: 900; color: #ffe9a8; background: rgba(6, 12, 14, 0.78); border-radius: 999px; padding: 0.02em 0.6em; white-space: nowrap; }
/* 500 Rum: the melds on the table — whose (their initial), lay-offs a little set off, a joker says what it stands for */
/* (left of your moves and above your hand, always — rm-check found them on both at the phone sizes) */
.rm-melds { position: absolute; left: max(13%, calc(9% + 3.4rem)); /* (7 Nov, BUGS #134: clear of the left seat's "14 on the table", at 9 %) */ right: calc(var(--rm-bar-w) + 2%); top: 52%; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start;
  gap: 0.35rem 0.6rem; max-height: calc(48% - var(--rm-mine) - 5.2rem); overflow-y: auto; z-index: 3; }
.rm-melds.hidden { display: none; }
.rm-meld { position: relative; display: flex; align-items: center; gap: 0.2rem; padding: 0.18rem 0.3rem 0.18rem 0.2rem; border-radius: 10px; background: rgba(0, 0, 0, 0.22); }
.rm-meld.fits { box-shadow: 0 0 0 2px #4ade80, 0 0 12px rgba(74, 222, 128, 0.6); cursor: pointer; }
.rm-meld-who { width: 1.15rem; height: 1.15rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.66rem; font-weight: 900; color: #3a1c00; background: #ffd24a; flex: none; }
.rm-meld-cards { display: flex; }
.rm-meld .card { height: var(--rm-meld); }
.rm-meld .card + .card { margin-left: calc(var(--rm-meld) * -0.36); }
.rm-mc.laid { filter: brightness(0.94); }
.rm-as { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); font-size: 0.6rem; font-weight: 900; color: #fff; background: rgba(6, 12, 14, 0.85); border-radius: 999px; padding: 0 0.35em; white-space: nowrap; z-index: 2; }
/* the line that says what's happening: in the right-hand column, over your moves (in the middle it ran over your hand) */
.rm-msg { display: grid; justify-items: end; gap: 0.12rem; text-align: right; width: 100%; pointer-events: none; }
.rm-msg b { font-family: var(--font-display); font-size: clamp(0.95rem, 2.4vmin, 1.4rem); color: #fff; -webkit-text-stroke: 0.18em rgba(40, 6, 18, 0.9); paint-order: stroke fill; }
.rm-msg span:not(:empty) { font-size: 0.76rem; font-weight: 800; color: #ffefe2; background: rgba(6, 12, 14, 0.62); border-radius: 999px; padding: 0.05em 0.75em; }
/* your hand: left of your moves, in its groups */
.rm-mine { position: absolute; left: 1%; right: calc(var(--rm-bar-w) + 1.5%); bottom: 1.2%; display: grid; justify-items: center; gap: 0.25rem; z-index: 5; }
.rm-mine.hidden { display: none; }
.rm-hand { display: flex; align-items: flex-end; justify-content: center; gap: clamp(0.35rem, 1.1vw, 0.9rem); max-width: 100%; padding-top: 1.05rem; touch-action: pan-y; }
.rm-group { position: relative; display: grid; justify-items: center; min-width: 0; }
.rm-gcards { display: flex; }
.rm-glabel { position: absolute; top: -1.05rem; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 0.64rem; font-weight: 900; letter-spacing: 0.02em; color: #fff;
  padding: 0 0.5em; border-radius: 999px; background: rgba(6, 12, 14, 0.78); }
.rm-group.pure .rm-glabel { background: linear-gradient(180deg, #4ade80, #16a34a); }
.rm-group.run .rm-glabel { background: linear-gradient(180deg, #60a5fa, #2563eb); }
.rm-group.set .rm-glabel { background: linear-gradient(180deg, #c084fc, #7e22ce); }
.rm-group.loose .rm-glabel { background: rgba(120, 20, 30, 0.9); }
.rm-hc { height: var(--rm-mine); cursor: pointer; transition: transform 0.12s; touch-action: none; }
.rm-hc + .rm-hc { margin-left: calc(var(--rm-mine) * -0.4); }
.rm-hand.n-many .rm-hc + .rm-hc { margin-left: calc(var(--rm-mine) * -0.46); }
.rm-hc.sel { transform: translateY(-16%); }
.rm-hc.sel .inner { box-shadow: 0 0 0 2.5px #ffd24a, 0 0 14px rgba(255, 210, 74, 0.8); border-radius: 6% / 4.2%; }
.rm-hc.fresh .inner { box-shadow: 0 0 0 2px #60a5fa; border-radius: 6% / 4.2%; }
.rm-hc.must .inner { box-shadow: 0 0 0 2.5px #fb923c, 0 0 14px rgba(251, 146, 60, 0.85); border-radius: 6% / 4.2%; }
.rm-hc.dragging { z-index: 9; transition: none; opacity: 0.92; }
.rm-hc.rm-new { animation: rm-in 0.32s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes rm-in { from { transform: translateY(-30%) rotate(-6deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rm-hc.rm-new { animation: none; } }
/* a wild joker in your hand: a gold star under its index, on the strip of the card that shows in a fanned hand */
.rm-jtag { position: absolute; left: 3%; top: 30%; z-index: 2; width: 1.1rem; height: 1.1rem; display: grid; place-items: center; font-size: 0.66rem; line-height: 1;
  color: #3a1c00; background: radial-gradient(circle at 40% 35%, #fff6c4, #ffcb45 60%, #e0960c); border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
@media (max-height: 500px) { .rm-jtag { width: 0.85rem; height: 0.85rem; font-size: 0.5rem; } }
.rm-tools { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.rm-count-line { font-size: 0.74rem; font-weight: 800; color: #ffefe2; background: rgba(6, 12, 14, 0.62); border-radius: 999px; padding: 0.02em 0.7em; }
/* your moves: bottom right */
.rm-bar { position: absolute; right: 1.2%; bottom: 2%; width: var(--rm-bar-w); display: grid; justify-items: end; gap: 0.35rem; z-index: 6; pointer-events: none; }
.rm-bar .rm-actions, .rm-bar .rm-clock { pointer-events: auto; }
.rm-bar.hidden { display: none; }
.rm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem; padding: 0.35rem 0.45rem; border-radius: 16px;
  background: linear-gradient(180deg, rgba(30, 60, 40, 0.94), rgba(10, 30, 18, 0.94)); box-shadow: 0 0 0 1.5px rgba(233, 180, 60, 0.75), 0 8px 18px rgba(0, 0, 0, 0.5); }
.rm-actions:empty { display: none; }
.rm-actions .btn { min-width: 4.6rem; }
.rm-hint { align-self: center; font-size: 0.74rem; font-weight: 800; color: #ffd0c8; }
.rm-clock { width: min(240px, 100%); height: 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); overflow: hidden; justify-self: end; }
.rm-clock.hidden { display: none; }
.rm-clock i { display: block; height: 100%; background: linear-gradient(90deg, #4ade80, #22c55e); transition: width 0.2s linear; }
.rm-clock i.urgent { background: linear-gradient(90deg, #fb923c, #ef4444); }
.rm-clock.extra i { background: linear-gradient(90deg, #fbbf24, #f97316); }
/* the hand's result */
.rm-results { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); width: min(760px, 92%); max-height: 80%; overflow-y: auto; z-index: 20; padding: 0.6rem 0.75rem 0.75rem;
  border-radius: 18px; background: linear-gradient(180deg, rgba(24, 52, 36, 0.97), rgba(8, 24, 15, 0.97)); box-shadow: 0 0 0 1.5px rgba(233, 180, 60, 0.8), 0 18px 40px rgba(0, 0, 0, 0.6); }
.rm-results.hidden { display: none; }
.rm-res-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; }
.rm-res-head b { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; color: #ffe38a; }
.rm-res-list { display: grid; gap: 0.35rem; }
.rm-res-row { display: grid; grid-template-columns: minmax(80px, 9rem) 1fr auto; align-items: center; gap: 0.5rem; padding: 0.3rem 0.45rem; border-radius: 12px; background: rgba(255, 255, 255, 0.05); }
.rm-res-row.won { background: rgba(74, 222, 128, 0.12); box-shadow: inset 0 0 0 1.5px rgba(74, 222, 128, 0.45); }
.rm-res-who { display: grid; min-width: 0; }
.rm-res-who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-res-who small { font-size: 0.72rem; font-weight: 700; color: #cfe3d2; }
.rm-res-cards { display: flex; flex-wrap: wrap; gap: 0.3rem; min-width: 0; }
.rm-res-group { display: flex; align-items: center; padding: 0.1rem; border-radius: 6px; background: rgba(74, 222, 128, 0.12); }
.rm-res-group.loose { background: rgba(220, 38, 38, 0.18); }
.rm-res-group.laid { background: rgba(96, 165, 250, 0.18); gap: 0.15rem; }
.rm-res-group small { font-size: 0.6rem; font-weight: 800; color: #bfdbfe; margin-right: 0.1rem; }
.rm-rc { height: clamp(44px, 10.5vh, 80px); } /* (6 Nov, the owner: "shown card on table rummy too small" — was 34–58 px; tools/card-size-check.mjs) */
.rm-rc + .rm-rc { margin-left: calc(clamp(44px, 10.5vh, 80px) * -0.4); }
.rm-res-face { font-size: 0.72rem; color: #cfe3d2; }
.rm-res-net { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; color: #fff; }
.rm-res-row.won .rm-res-net { color: #86efac; } .rm-res-row.lost .rm-res-net { color: #fca5a5; }
/* phones held sideways */
@media (max-height: 500px) {
  .felt.rm-mode { --rm-card: clamp(22px, 8vh, 34px); --rm-mine: clamp(48px, 18.5vh, 84px); --rm-pile: clamp(40px, 15vh, 64px); --rm-meld: clamp(38px, 11.5vh, 52px); --rm-bar-w: min(230px, 30%); }
  .rm-seat.r3 { top: 5%; } /* (the top corners: 13 % — at 8 % the top right one met the top bar, rm-check) */
  .rm-seat.r1, .rm-seat.r5 { top: 36%; }
  /* the others' plate and backs side by side (a seat half as tall): at 568×320 a top seat's tag met the side seat's plate */
  .rm-seat:not(.you) { grid-template-columns: auto auto; align-items: center; column-gap: 0.3rem; }
  .rm-seat:not(.you) > .rm-line > :is(.rm-tag, .rm-win), .rm-seat:not(.you) > .seat-bubble { grid-column: 1 / -1; justify-self: center; }
  /* the side seats' tags above their plate (below it, at 568×320, "32 on the table" met 500 Rum's melds — the UI gate) */
  .rm-seat.r1 > .rm-line > :is(.rm-tag, .rm-win) { position: absolute; bottom: calc(100% + 0.15rem); left: 0; }
  .rm-seat.r5 > .rm-line > :is(.rm-tag, .rm-win) { position: absolute; bottom: calc(100% + 0.15rem); right: 0; }
  .rm-who .name { max-width: 64px; font-size: 0.74rem; }
  .rm-who .money { font-size: 0.68rem; }
  .rm-center { top: 36%; }
  .rm-msg b { font-size: 0.92rem; }
  .rm-msg span:not(:empty) { font-size: 0.64rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .rm-actions { padding: 0.25rem 0.3rem; gap: 0.3rem; }
  .rm-actions .btn { min-width: 3.6rem; min-height: 1.9rem; font-size: 0.78rem; padding: 0.15em 0.6em; }
  .rm-glabel { font-size: 0.56rem; top: -0.9rem; }
  .rm-hand { padding-top: 0.9rem; }
  .rm-count-line { font-size: 0.64rem; }
  /* the side seats: against the screen's edges (side by side they're wider — centred on 9 % they ran off it) */
  .rm-seat.r1 { left: 1%; transform: none; } .rm-seat.r5 { left: auto; right: 1%; transform: none; }
  .rm-seat.r2 { top: 13%; } .rm-seat.r4 { top: 13%; }
  .rm-center { top: 41%; } /* (a step lower: the top seats' tags reached the stock and the pile at 568×320) */
  /* 500 Rum's melds on a phone: one row right under the stock and the pile that scrolls sideways — every meld at its full
     height (wrapped into the space left, the second row was cut in half at 568×320) */
  .rm-melds { top: calc(41% + var(--rm-pile) / 2 + 0.55rem); left: 2%; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: hidden;
    max-height: none; padding-bottom: 0.15rem; scrollbar-width: thin; }
  .rm-melds .rm-meld { flex: none; }
  .rm-melds::before, .rm-melds::after { content: ''; margin: auto; } /* (centred while they fit, from the left once they scroll) */
  .rm-me .avatar.sm { width: 1.7rem; height: 1.7rem; }
}
/* the result on a phone: smaller type and cards, so a table of six fits (it showed three rows at 568×320) */
@media (max-height: 500px) {
  .rm-results { width: min(660px, 94%); max-height: 88%; top: 50%; padding: 0.35rem 0.5rem 0.45rem; border-radius: 14px; }
  .rm-res-head { margin-bottom: 0.25rem; }
  .rm-res-head b { font-size: 0.86rem; }
  .rm-res-list { gap: 0.2rem; }
  .rm-res-row { grid-template-columns: minmax(64px, 7rem) 1fr auto; gap: 0.35rem; padding: 0.15rem 0.35rem; border-radius: 9px; }
  .rm-res-who b { font-size: 0.78rem; }
  .rm-res-who small { font-size: 0.6rem; line-height: 1.2; }
  .rm-res-net { font-size: 0.86rem; }
  .rm-rc { height: clamp(38px, 11vh, 50px); }
  .rm-rc + .rm-rc { margin-left: calc(clamp(38px, 11vh, 50px) * -0.4); }
  .rm-res-cards { gap: 0.2rem; }
}
@media (max-height: 340px) {
  .felt.rm-mode { --rm-mine: 50px; --rm-pile: 42px; --rm-meld: 38px; }
  .rm-msg b { font-size: 0.88rem; }
}

/* ================= Chips, gold, the Shop, the Achievements (5 Nov 2026) ================= */
/* the owned frames (catalog.js FRAMES: from the Shop or an achievement) */
.avatar-wrap[data-frame=rosegold]::after { background-image: url(frames/rosegold.svg); }
.avatar-wrap[data-frame=obsidian]::after { background-image: url(frames/obsidian.svg); }
.avatar-wrap[data-frame=aurora]::after { background-image: url(frames/aurora.svg); }
.avatar-wrap[data-frame=laurel]::after { background-image: url(frames/laurel.svg); }
.avatar-wrap[data-frame=starlight]::after { background-image: url(frames/starlight.svg); }
.avatar-wrap[data-frame=ace]::after { background-image: url(frames/ace.svg); }
.avatar-wrap[data-frame=royal]::after { background-image: url(frames/royal.svg); }
.pf-frame.locked:not(:disabled) { cursor: pointer; }

/* the header: chips (a red poker chip) and gold (a gold bar) — buttons now: both open the Shop */
button.coin-chip { font-family: inherit; cursor: pointer; }
button.coin-chip:hover { filter: brightness(1.1); }
.coin-chip.gold-chip { background: linear-gradient(180deg, #5a4210, #2a1d05) padding-box, var(--metal-edge) border-box; }
@media (max-width: 560px) { .coin-chip.gold-chip { padding-right: 0.65rem; } }

/* the Shop */
.shop-head { display: grid; gap: 0.5rem; padding: 0.9rem 1rem; border-radius: 18px; background: linear-gradient(180deg, #411927, #250b14); border: 1.5px solid rgba(255, 214, 120, 0.25); }
.shop-head .hint { margin: 0; }
.shop-bal { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.shop-bal .sb { display: inline-flex; align-items: baseline; gap: 0.35rem; padding: 0.35rem 0.85rem 0.35rem 0.4rem; border-radius: 999px; background: rgba(0, 0, 0, 0.3); }
.shop-bal .sb .ic { width: 1.7rem; height: 1.7rem; align-self: center; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)); }
.shop-bal b { font-size: 1.35rem; font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums; }
.shop-bal small { color: var(--muted); font-weight: 700; }
.linkish { padding: 0; border: 0; background: none; color: var(--gold); font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
.list-head small.muted { color: var(--muted); font-weight: 700; }
.tag.soon { padding: 0.15rem 0.6rem; border-radius: 999px; background: rgba(255, 210, 74, 0.16); color: var(--gold); font-weight: 800; font-size: 0.8rem; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.7rem; }
.shop-card { position: relative; display: grid; justify-items: center; align-content: start; gap: 0.35rem; padding: 0.8rem 0.6rem 0.7rem; border-radius: 16px; text-align: center;
  background: linear-gradient(180deg, #3c1623, #220a12); border: 1.5px solid rgba(255, 214, 120, 0.2); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); }
.shop-card .btn { width: 100%; justify-content: center; }
.shop-card.owned { border-color: rgba(120, 230, 160, 0.5); }
.shop-card.goldpack .btn { opacity: 0.75; }
.shop-amt { font-size: 1.05rem; font-weight: 900; color: #fff; }
.shop-extra { min-height: 1em; color: #7ff0a8; font-weight: 800; font-size: 0.8rem; }
.shop-card.look .shop-extra { color: var(--muted); }
.shop-tag { position: absolute; top: -0.55rem; right: 0.5rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: linear-gradient(180deg, #ff7a85, #e2283f); color: #fff; font-size: 0.7rem; font-weight: 900; box-shadow: 0 2px 4px rgba(0,0,0,0.35); }
.shop-pic { display: grid; place-items: center; height: 74px; }
.shop-pic .avatar-wrap .avatar { width: 46px; height: 46px; font-size: 1.1rem; }
.shop-pic .look-mini { width: 76px; height: 46px; margin: 0; }
/* (6 Nov — the owner: "chip pile, gold pile, table design quality improvement") a pile of chips, a pile of gold bars —
   SVG drawn in code (minis.js) in the icons' style: stacks of casino chips, stacked gold bars */
.chip-pile, .gold-pile { position: relative; width: 92px; }
.chip-pile svg, .gold-pile svg { display: block; width: 92px; height: 70px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)); }
.shop-foot { text-align: center; }

/* Profile | Achievements */
.pf-tabs { display: flex; gap: 0.4rem; padding: 0.3rem; border-radius: 999px; background: rgba(0, 0, 0, 0.28); justify-self: start;
  max-width: 100%; overflow-x: auto; scrollbar-width: none; } /* (Q5: four tabs now — on the smallest phones they scroll, never push the page wider) */
.pf-tabs button { flex: none; white-space: nowrap; }
.pf-tabs button { position: relative; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 1.05rem; border: 0; border-radius: 999px; background: none;
  color: var(--muted); font: inherit; font-weight: 800; cursor: pointer; }
.pf-tabs button .ic { width: 1.1em; height: 1.1em; }
.pf-tabs button.on { background: linear-gradient(180deg, #fff0a6, #ffcb45 55%, #f2a01b); color: #3d2200; }
.pf-tabs .dot { position: absolute; top: 2px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px #1c0a10; }
@media (max-height: 500px), (max-width: 700px) { .pf-tabs { gap: 0.15rem; } .pf-tabs button { padding: 0.35rem 0.75rem; font-size: 0.86rem; } .pf-tabs button .ic { display: none; } }
#pf-me, #pf-ach { display: grid; gap: 1.05rem; align-content: start; }
#pf-me.hidden, #pf-ach.hidden { display: none; }
.pf-coins .gold-ic { margin-left: 0.6rem; }
.pf-coins .btn { margin-left: auto; }
.ach-sum { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 1rem; padding: 0.85rem 1rem; border-radius: 18px; background: linear-gradient(180deg, #411927, #250b14); border: 1.5px solid rgba(255, 214, 120, 0.25); }
.ach-total b { font-size: 1.6rem; font-weight: 900; color: var(--gold); }
.ach-total small { color: var(--muted); font-weight: 800; }
.ach-sum-txt { flex: 1 1 12rem; color: var(--ink-2); font-weight: 700; }
.ach-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.7rem; }
.ach-card { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.8rem; align-items: start; padding: 0.8rem 0.9rem; border-radius: 16px;
  background: linear-gradient(180deg, #3c1623, #220a12); border: 1.5px solid rgba(255, 214, 120, 0.16); }
.ach-card.ready { border-color: #ffd24a; box-shadow: 0 0 0 1px rgba(255, 210, 74, 0.35), 0 0 14px rgba(255, 196, 60, 0.25); }
.ach-card.done { background: linear-gradient(180deg, #3d2a12, #20140a); }
.ach-claim { grid-column: 1 / -1; justify-content: center; }
.ach-medal { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font-size: 1.45rem;
  background: radial-gradient(circle at 35% 30%, #6a5560, #2c1d24); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.12); }
.ach-medal small { position: absolute; bottom: -6px; padding: 0 0.35rem; border-radius: 999px; font-size: 0.66rem; font-weight: 900; color: #2a1600; background: #ffd24a; }
.ach-medal.m-none { filter: grayscale(1); opacity: 0.6; }
.m-bronze { --m: #e0915a; --m2: #8a4a1c; } .m-silver { --m: #eef2f8; --m2: #8d97aa; } .m-gold { --m: #ffe07a; --m2: #c98516; }
.m-platinum { --m: #c9f2ff; --m2: #4f9fb8; } .m-diamond { --m: #f2d8ff; --m2: #8a4fe0; }
.ach-medal:not(.m-none) { background: radial-gradient(circle at 35% 30%, #fff, var(--m) 40%, var(--m2) 100%); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35), 0 2px 6px rgba(0, 0, 0, 0.4); }
.ach-medal:not(.m-none) small { background: var(--m2); color: #fff; }
.ach-main { display: grid; gap: 0.3rem; min-width: 0; }
.ach-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.ach-head b { color: #fff; font-size: 1.02rem; }
.ach-game { color: var(--muted); font-size: 0.72rem; font-weight: 800; white-space: nowrap; }
.ach-about { color: var(--ink-2); opacity: 0.85; }
.ach-pips { display: flex; gap: 0.25rem; }
.ach-pip { min-width: 1.7rem; padding: 0.05rem 0.3rem; border-radius: 999px; text-align: center; font-size: 0.68rem; font-weight: 900; color: rgba(255, 255, 255, 0.45); background: rgba(0, 0, 0, 0.3); }
.ach-pip.got { color: #1d1206; background: linear-gradient(180deg, #fff, var(--m) 45%, var(--m2)); }
.ach-pip.got:not(.claimed) { box-shadow: 0 0 0 2px #ffd24a; }
.ach-bar { height: 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); overflow: hidden; }
.ach-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffcf3f, #ff9a2a); }
.ach-next { color: var(--muted); font-weight: 700; font-size: 0.78rem; }
.ach-next.done { color: #7ff0a8; }
/* someone else's card: their tiers, best first */
.ach-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem 0.2rem 0.25rem; border-radius: 999px; font-size: 0.78rem; font-weight: 800; color: #1d1206;
  background: linear-gradient(180deg, #fff, var(--m) 45%, var(--m2)); }
.ach-chip i { font-style: normal; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: rgba(255, 255, 255, 0.55); }
#ps-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* the two table themes from the Shop */
html[data-look=amethyst] .table-felt { --f1: #a77be8; --f2: #8452cc; --f3: #6337a6; --f4: #45227a; --f5: #2a1250; }
html[data-look=midnight] .table-felt { --f1: #3c5a96; --f2: #2a4178; --f3: #1c2d5c; --f4: #121e40; --f5: #0a1028; }
.lm-amethyst { --m1: #a77be8; --m2: #8452cc; --m3: #6337a6; --m4: #2a1250; }
.lm-midnight { --m1: #3c5a96; --m2: #2a4178; --m3: #1c2d5c; --m4: #0a1028; }
.look-opt.locked { opacity: 0.55; }
.look-opt.locked .look-mini::after { content: '🔒'; position: absolute; top: -9px; right: -9px; font-size: 0.8rem; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)); }
/* seven tabs with the Shop and the World (+ Admin = eight): they fit a phone held sideways (375 px tall, and the small
   320 px one) without scrolling */
@media (max-height: 420px) {
  .home-nav { gap: 0.1rem; padding: 0.3rem 0.3rem; }
  .nav-tab { min-height: 2.35rem; padding-top: 0.1rem; padding-bottom: 0.1rem; gap: 0.05rem; }
}
@media (max-height: 340px) {
  .home-nav { gap: 0.05rem; padding: 0.2rem 0.3rem; }
  .nav-tab { min-height: 1.95rem; gap: 0; font-size: 0.68rem; padding-top: 0.05rem; padding-bottom: 0.05rem; }
  .nav-tab .ic { width: 1.15em; height: 1.15em; }
}

/* (5 Nov, list #2b) wardrobe items from the Shop / achievements: a price or a 🏆 on the button, try-on, Buy / See */
.wd-pick.want svg { opacity: 0.92; }
.wd-lock.price, .wd-lock.ach { display: inline-flex; align-items: center; gap: 0.12rem; }
.wd-lock.price .ic { width: 0.95em; height: 0.95em; }
.wd-foot { flex-wrap: wrap; }
.wd-try { flex: 1 0 100%; display: grid; gap: 0.3rem; padding: 0.45rem 0.6rem; border-radius: 12px; background: rgba(255, 210, 74, 0.1); border: 1px solid rgba(255, 210, 74, 0.35); }
.wd-try.hidden { display: none; }
.wd-try-line { display: flex; align-items: center; gap: 0.6rem; }
.wd-try-txt { flex: 1; font-weight: 800; font-size: 0.85rem; }
.wd-try-txt::before { content: 'Trying on: '; color: var(--muted); font-weight: 700; }
#wd-save.waits { filter: grayscale(0.7); opacity: 0.7; }
.shop-pic.item-pic svg { width: 76px; height: 70px; display: block; }
.shop-try { font-size: 0.8rem; }
/* the gold bar on a gold button: a thin dark outline so it doesn't melt into the button, a little bigger than the text */
.btn.gold .ic-gold { width: 1.4em; height: 1.4em; filter: drop-shadow(0 0 0.6px #3d2200) drop-shadow(0 0 0.6px #3d2200); }

/* (6 Nov — the owner: "emotes derived from character? in room?", then: a speech bubble with the word on a label, its tail
   aimed at the player's circle) An emote over the table: the sender's own character. It grows out of the circle, stays a
   moment and fades. On its own layer, so all three games show it alike (emote-view.js places it). */
#emote-layer { position: absolute; inset: 0; z-index: 10; pointer-events: none; overflow: hidden; }
.emote-pop { position: absolute; width: 104px; height: 129.5px; animation: emote-pop 3s ease-out both; }
@keyframes emote-pop { 0% { opacity: 0; transform: scale(0.35); } 9% { opacity: 1; transform: scale(1.08); } 15% { transform: scale(1); } 86% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.96); } }
.emote-art { display: block; width: 100%; height: 100%; overflow: visible; /* (the tail reaches past the box; the figure is clipped to the bubble) */ filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5)); }
.emote-art .fx { transform-box: fill-box; transform-origin: center; animation: fx-bob 0.9s ease-in-out infinite alternate; }
@keyframes fx-bob { to { transform: translateY(-2.5px) scale(1.06); } }
.emote-art .fx-laugh { animation: fx-shake 0.28s ease-in-out infinite alternate; }
@keyframes fx-shake { from { transform: scale(0.94); } to { transform: scale(1.06); } }
.emote-art text { font-family: inherit; }
/* the little button at the right of your own plate: it opens the picker. (A bigger invisible area, for a finger.) */
.emote-open { position: absolute; left: calc(100% + 8px); top: 50%; width: 30px; height: 30px; margin-top: -15px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; z-index: 8; pointer-events: auto;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55)); transition: transform 0.12s; }
.emote-open::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; }
.emote-open svg { display: block; width: 100%; height: 100%; }
.emote-open:hover, .emote-open[aria-expanded="true"] { transform: scale(1.12); }
.pk-plate > .emote-open { left: calc(100% + 12px); } /* (clear of the dealer's chip on the plate's end) */
@media (max-width: 1100px) { .pk-plate > .emote-open { width: 26px; height: 26px; margin-top: -13px; left: calc(100% + 10px); } } /* (a tablet: the action bar starts close to the plate) */
.rm-me { padding-right: 38px; } /* (Rummy's plate has Sort beside it: room kept for the button) */
/* your ten emotes, each your own character (the top row of the chat panel) */
.emote-tile { display: grid; justify-items: center; gap: 1px; padding: 4px 2px 3px; border-radius: 11px; cursor: pointer; font: inherit; color: #fff; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 214, 120, 0.18); }
.emote-tile:hover, .emote-tile:focus-visible { background: rgba(255, 210, 74, 0.2); border-color: rgba(255, 210, 74, 0.7); }
.emote-tile .emote-art { width: 46px; height: 50px; filter: none; }
.emote-tile .emote-art .fx { animation: none; }
.emote-tile small { font-size: 0.68rem; font-weight: 800; line-height: 1.1; white-space: nowrap; }
@media (max-height: 500px) {
  .emote-pop { width: 78px; height: 97px; }
  .emote-open { width: 26px; height: 26px; margin-top: -13px; left: calc(100% + 6px); }
  /* (Poker on a phone: the action bar and its clock start where the plate ends. So just above your name: still to the right of your circle.) */
  .pk-plate > .emote-open { left: 36px; top: auto; bottom: calc(100% + 3px); margin: 0; }
  .rm-me { padding-right: 32px; }
  /* a short screen: the emotes slide in one row, the quick phrases too, so the messages keep some room */
  .emote-row { display: flex; overflow-x: auto; scrollbar-width: none; }
  .emote-row .emote-tile { flex: none; width: 50px; }
  .emote-row .emote-tile .emote-art { width: 36px; height: 39px; }
  .chat-panel .quick-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .chat-panel .quick-row button { flex: none; white-space: nowrap; }
  .emote-tile small { font-size: 0.62rem; }
}
@media (prefers-reduced-motion: reduce) { .emote-art .fx { animation: none; } .emote-pop { animation-name: bubble-life; } }
/* (7 Nov) Rummy on the smallest phones: the top seat a little left, its cards' count clear of the top bar's buttons (eight now, with full screen) */
@media (max-height: 340px), (max-width: 600px) { .rm-seat.r3 { left: 46.5%; } }

/* (6 Nov — the owner: "character zoom in of other players or mine. like inspect mode") Inspect: the character big on the
   velvet stage (the showcase's), zoom + pan (inspect.js), and what they wear — the Shop / achievement pieces tagged */
.ins-card { width: min(900px, 96vw); max-height: 95vh; display: grid; gap: 0.35rem; }
.ins-sub { margin: -0.35rem 0 0.15rem; color: var(--muted); font-weight: 700; }
.ins-body { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 0.9rem; min-height: 0; }
.ins-stage { position: relative; height: min(66vh, 580px); border-radius: 18px; overflow: hidden; touch-action: none; cursor: zoom-in; border: 2px solid transparent;
  background: radial-gradient(ellipse 46% 30% at 50% 100%, rgba(255, 214, 140, 0.42), rgba(255, 214, 140, 0) 70%) padding-box,
    linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.35)) padding-box,
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.26) 0 14px, rgba(255, 255, 255, 0.05) 14px 23px, rgba(0, 0, 0, 0.12) 23px 36px) padding-box,
    linear-gradient(180deg, #6a1e3a, #2a0b16) padding-box, var(--metal-edge) border-box; }
.ins-stage.zoomed { cursor: grab; }
.ins-stage.zoomed:active { cursor: grabbing; }
.ins-fig { position: absolute; inset: 0; display: grid; place-items: center; transform-origin: 50% 50%; will-change: transform; transition: transform 0.07s linear; }
.ins-fig svg { position: relative; z-index: 1; height: 90%; width: auto; max-width: 100%; }
.ins-fig::before { content: ''; position: absolute; left: 50%; bottom: 3.5%; width: min(42%, 220px); aspect-ratio: 5 / 1; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, #3fd09e, #0b5a41 80%); box-shadow: 0 0 0 2px rgba(255, 214, 120, 0.75), 0 8px 14px rgba(0, 0, 0, 0.55); }
.ins-side { display: grid; align-content: start; gap: 0.5rem; min-width: 0; }
.ins-side h4 { margin: 0.2rem 0 0; color: var(--gold); }
.ins-tools { display: flex; gap: 0.4rem; }
.ins-tools .btn { min-width: 2.8rem; justify-content: center; font-weight: 900; }
.ins-wear { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; overflow-y: auto; max-height: 52vh; }
.ins-wear li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto; align-items: center; gap: 0.4rem; padding: 0.3rem 0.5rem; border-radius: 10px; background: rgba(255, 255, 255, 0.05); }
.ins-k { color: var(--muted); font-size: 0.76rem; font-weight: 800; }
.ins-wear b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-tag { font-size: 0.66rem; font-weight: 900; padding: 0.05rem 0.45rem; border-radius: 999px; white-space: nowrap; }
.ins-tag.shop { background: rgba(255, 210, 74, 0.18); color: #ffd24a; }
.ins-tag.ach { background: rgba(169, 133, 255, 0.22); color: #ddd0ff; }
@media (max-width: 760px), (max-height: 500px) {
  .ins-body { grid-template-columns: minmax(0, 1fr) 11.5rem; gap: 0.6rem; }
  .ins-stage { height: min(68vh, 300px); }
  .ins-wear { max-height: 46vh; }
  .ins-wear li { grid-template-columns: minmax(0, 1fr) auto; } .ins-k { display: none; }
}
.throw-pop .tp-ins { margin-left: auto; }
.throw-pop .tp-ins + .tp-prof { margin-left: 0.3rem; }
/* the pot's chip: not on a phone held sideways — the pot line with its side pots is as wide as it can be there (with the
   chip it touched a top seat's hand at 667×375 — the poker check) */
@media (max-height: 500px) { .pk-pot-total.chips-amt::before { display: none; } }
.rchip.style { background: rgba(255, 210, 74, 0.16); color: #ffe08a; } /* (9 Nov) a Lucky 9 table that plays Shan Koe Mee rules */

/* ---------- (10 Nov) the World tab — the map (worldmap.js, SPEC §3.9) ----------
   The night sea, the land in the house maroon with a gold coast, a gold pin on every city. The map fills the pane; the
   pins are HTML laid over the SVG (they stay the same size at any zoom); a city's sheet slides in on the right. */
.home-pane.wm-pane { max-width: none; height: 100%; min-height: 15rem; grid-template-rows: auto minmax(0, 1fr); gap: 0.6rem; }
.wm-head { display: flex; align-items: center; gap: 0.5rem 0.8rem; flex-wrap: wrap; }
.wm-head h2 { margin: 0; font-size: 1.35rem; display: flex; align-items: center; gap: 0.5rem; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,0.35); }
.wm-head h2 .ic { color: var(--gold); }
.wm-me { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.2rem; padding: 0.2rem 0.85rem; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 208, 64, 0.45); background: rgba(255, 208, 64, 0.1); color: #ffe08a; font: inherit; font-weight: 800; font-size: 0.9rem; }
.wm-me:hover { background: rgba(255, 208, 64, 0.18); }
.wm-me-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(255, 208, 64, 0.25); }
.wm-sum { margin-left: auto; font-size: 0.85rem; }
.wm-stage { position: relative; overflow: hidden; min-height: 0; border-radius: 18px; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab;
  background: radial-gradient(ellipse at 50% 45%, #1d1030 0%, #150a22 55%, #0d0616 100%);
  border: 1.5px solid rgba(255, 214, 120, 0.28); box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.55), 0 8px 22px rgba(0, 0, 0, 0.35); }
.wm-stage.dragging { cursor: grabbing; }
.wm-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* (Wave 5) the globe */
.wm-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--muted); font-weight: 700; pointer-events: none; }
.wm-pins { position: absolute; inset: 0; pointer-events: none; }
/* a pin: a zero-size point; what it shows hangs off that point (the dot on it, the name under it, faces above it) */
.wm-pin { position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; pointer-events: auto; z-index: 1; }
.wm-pin:hover, .wm-pin.picked, .wm-pin.mine { z-index: 2; }
.wm-pin:focus-visible { outline: none; }
.wm-pin:focus-visible .wm-dot { outline: 3px solid #fff; outline-offset: 3px; }
.wm-dot { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff5d6, #e8c8b4 60%, #b08a74); box-shadow: 0 0 0 2px #1c0710, 0 2px 5px rgba(0, 0, 0, 0.6); }
.wm-pin.busy .wm-dot { left: -8px; top: -8px; width: 16px; height: 16px; background: radial-gradient(circle at 35% 30%, #fff3b0, var(--gold) 55%, #c98a10); }
.wm-pin.group .wm-dot { left: -12px; top: -12px; width: 24px; height: 24px; background: radial-gradient(circle at 35% 30%, #fff3b0, var(--gold) 55%, #c98a10); }
.wm-pin.group .wm-dot b { font-size: 0.72rem; font-weight: 900; color: #3d2200; line-height: 1; }
.wm-pin.mine .wm-dot { box-shadow: 0 0 0 2px #1c0710, 0 0 0 4.5px var(--gold), 0 2px 8px rgba(0, 0, 0, 0.6); }
.wm-pin.picked .wm-dot { box-shadow: 0 0 0 2px #1c0710, 0 0 0 4.5px #fff, 0 2px 8px rgba(0, 0, 0, 0.6); }
.wm-pin.live .wm-dot::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(52, 214, 127, 0.85); animation: wm-ping 1.8s ease-out infinite; }
@keyframes wm-ping { from { transform: scale(0.6); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
/* the public tables there: a green badge up and to the right of the dot (friends' faces go up and to the left) */
.wm-count { position: absolute; left: 5px; top: -22px; height: 1.2rem; padding: 0 0.35rem 0 0.25rem; border-radius: 999px; display: inline-flex; align-items: center; gap: 0.12rem;
  background: linear-gradient(180deg, #2fd27a, #0e7a45); color: #fff; font-size: 0.72rem; font-weight: 900; white-space: nowrap; box-shadow: 0 0 0 1.5px #1c0710, 0 0 0 2.5px rgba(255, 214, 120, 0.8); }
.wm-count .ic { width: 0.8rem; height: 0.8rem; }
.wm-pin.mine .wm-count { left: 28px; top: -30px; }
.wm-label { position: absolute; left: 0; top: 10px; transform: translateX(-50%); white-space: nowrap; padding: 0.05rem 0.4rem; border-radius: 7px;
  background: rgba(20, 5, 12, 0.72); color: var(--ink-2); font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.02em; line-height: 1.25; }
.wm-label .wm-ppl { display: inline-flex; align-items: center; gap: 0.1rem; margin-left: 0.35rem; font-family: system-ui, sans-serif; font-weight: 800; font-size: 0.7rem; color: #9fd3ff; vertical-align: 0.05em; }
.wm-label .wm-ppl .ic { width: 0.75rem; height: 0.75rem; }
.wm-pin.busy .wm-label, .wm-pin.mine .wm-label { color: #fff; }
.wm-pin.group .wm-label { top: 15px; color: #ffe08a; }
/* no room under the dot (another pin's dot or label is there): the label goes above it (placeLabels in worldmap.js) */
.wm-pin .wm-label.above { top: auto; bottom: 10px; }
.wm-pin.group .wm-label.above { bottom: 15px; }
.wm-label.crowded { display: none; }
.wm-friends { position: absolute; right: 4px; bottom: 5px; display: flex; flex-direction: row-reverse; align-items: center; }
.wm-friends .avatar { width: 1.5rem; height: 1.5rem; font-size: 0.66rem; box-shadow: 0 0 0 2px #1c0710, 0 0 0 3px rgba(62, 164, 255, 0.9); }
.wm-friends .avatar + .avatar { margin-right: -0.35rem; }
.wm-friends .wm-more { margin-right: 0.15rem; font-size: 0.68rem; font-weight: 900; color: #fff; text-shadow: 0 1px 2px #000; }
/* on your own city: up beside your figure's shoulder (low down they sat on the next city's dot — Osaka's, beside Tokyo) */
.wm-pin.mine .wm-friends { right: 25px; bottom: 32px; }
/* near the right edge (or the sheet): the badges swap sides — the table count to the left, friends to the right; on
   your own city friends already sit left of your figure, so they stay there and the count goes under them (Q6: at the
   edge they were sent right, off the screen — Japan on a phone held upright) */
.wm-pin.flip .wm-count { left: auto; right: 5px; }
.wm-pin.mine.flip .wm-count { right: 28px; }
.wm-pin.flip:not(.mine) .wm-friends { right: auto; left: 4px; flex-direction: row; }
.wm-pin.flip:not(.mine) .wm-friends .avatar + .avatar { margin-right: 0; margin-left: -0.35rem; }
.wm-pin.flip:not(.mine) .wm-friends .wm-more { margin-right: 0; margin-left: 0.15rem; }
/* your figure stands on your city's dot without covering it (a group's number stays readable) */
.wm-pin.busy .wm-me-fig { bottom: 11px; }
.wm-pin.group .wm-me-fig { bottom: 15px; }
.wm-me-fig { position: absolute; left: 0; bottom: 9px; width: 46px; height: 46px; transform: translateX(-50%); border-radius: 50% 50% 46% 46%; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #6a2a3e, #2a0b16); box-shadow: 0 0 0 2px #1c0710, 0 0 0 4px var(--gold), 0 4px 10px rgba(0, 0, 0, 0.55); }
.wm-me-fig svg { width: 100%; height: 100%; display: block; }
/* the zoom buttons: bottom left (the city's sheet takes the right) */
.wm-zoom { position: absolute; left: 10px; bottom: 10px; display: grid; gap: 6px; z-index: 3; }
.wm-zoom button { width: 2.5rem; height: 2.5rem; border-radius: 12px; display: grid; place-items: center; cursor: pointer; padding: 0;
  border: 1px solid rgba(255, 214, 120, 0.4); background: rgba(28, 7, 16, 0.85); color: var(--gold); font: inherit; font-size: 1.3rem; font-weight: 900; line-height: 1; }
.wm-zoom button:hover:not(:disabled) { background: rgba(62, 17, 32, 0.95); }
.wm-zoom button:disabled { opacity: 0.4; cursor: default; }
.wm-zoom .ic { width: 1.2rem; height: 1.2rem; }
/* a city's sheet */
.wm-sheet { position: absolute; top: 10px; right: 10px; bottom: 10px; width: min(360px, 52%); overflow-y: auto; z-index: 4; cursor: auto;
  display: grid; gap: 0.7rem; align-content: start; padding: 0.85rem 0.9rem 1rem; border-radius: 16px; touch-action: pan-y; user-select: text; -webkit-user-select: text;
  background: linear-gradient(180deg, rgba(65, 25, 39, 0.97), rgba(37, 11, 20, 0.97)); border: 1.5px solid rgba(255, 214, 120, 0.32); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  animation: wm-in 0.18s ease-out; }
@keyframes wm-in { from { transform: translateX(14px); opacity: 0; } }
.wm-sh-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.wm-sh-title { display: grid; }
.wm-sh-title b { font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; color: #fff; line-height: 1.1; }
.wm-sh-title small { color: var(--muted); font-weight: 700; }
.wm-sh-where { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem 0.6rem; }
.wm-sh-where small { flex-basis: 100%; }
.wm-sh-note { color: #ffd3a6; font-weight: 700; font-size: 0.88rem; }
.wm-sh-ppl { display: grid; gap: 0.45rem; color: var(--ink-2); font-weight: 700; font-size: 0.9rem; }
.wm-sh-friends { display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem; }
.wm-sh-friend { display: inline-flex; align-items: center; gap: 0.4rem; }
.wm-sh-friend .avatar { font-size: 0.76rem; }
.wm-sh-tables { display: grid; gap: 0.55rem; }
.wm-sh-tables h3 { margin: 0.2rem 0 0; font-size: 1rem; color: #ffe08a; }
.wm-sh-tables .tcard:hover { transform: none; }
@media (max-height: 500px) {
  .home-pane.wm-pane { gap: 0.4rem; }
  .wm-head h2 { font-size: 1.15rem; }
  .wm-me { min-height: 1.9rem; font-size: 0.82rem; padding: 0.1rem 0.7rem; }
  .wm-sum { font-size: 0.76rem; }
  .wm-stage { border-radius: 14px; }
  .wm-zoom { left: 6px; bottom: 6px; gap: 4px; }
  .wm-zoom button { width: 2.2rem; height: 2.2rem; }
  .wm-sheet { top: 6px; right: 6px; bottom: 6px; width: min(330px, 58%); padding: 0.6rem 0.7rem 0.8rem; gap: 0.5rem; }
  .wm-sh-title b { font-size: 1.2rem; }
}
@media (max-width: 760px) { .wm-sum { display: none; } }
/* (Wave 5) a phone held upright: the city's sheet comes up from the bottom across the width (beside the globe it left a sliver
   of globe and cut its table cards off); the globe slides up above it and the + − buttons move to the top while it's open */
@media (orientation: portrait) and (max-width: 700px) {
  .wm-sheet { top: auto; left: 6px; right: 6px; bottom: 6px; width: auto; height: 56%; animation-name: wm-up; }
  .wm-stage.sheet-open .wm-zoom { bottom: auto; top: 6px; left: 6px; }
}
@keyframes wm-up { from { transform: translateY(14px); opacity: 0; } }
/* (Wave 5, C) zoomed in on a country: a bar at the top names it and sums it up, with the way back out to the world */
.wm-country { position: absolute; top: 8px; left: 8px; right: 8px; margin: 0 auto; width: max-content; max-width: calc(100% - 16px); z-index: 3; cursor: auto;
  display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0.75rem 0.3rem 0.3rem; border-radius: 999px;
  background: rgba(28, 7, 16, 0.88); border: 1px solid rgba(255, 214, 120, 0.4); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); animation: wm-drop 0.2s ease-out; }
.wm-country.hidden { display: none; }
@keyframes wm-drop { from { transform: translateY(-8px); opacity: 0; } }
.wm-cn-back { flex: none; border-radius: 999px; white-space: nowrap; }
.wm-cn-txt { display: grid; min-width: 0; line-height: 1.15; }
.wm-cn-txt b { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; color: #ffe08a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-cn-txt small { color: var(--ink-2); font-weight: 700; font-size: 0.78rem; } /* (wraps to a second line on a narrow phone) */
.wm-cn-friends { display: flex; align-items: center; flex: none; }
.wm-cn-friends .avatar { font-size: 0.62rem; margin-left: -6px; box-shadow: 0 0 0 2px rgba(28, 7, 16, 0.9); }
.wm-cn-friends .avatar:first-child { margin-left: 0; }
@media (max-height: 500px) { .wm-country { top: 5px; padding: 0.2rem 0.6rem 0.2rem 0.2rem; } .wm-cn-txt b { font-size: 1rem; } }
@media (prefers-reduced-motion: reduce) { .wm-country { animation: none; } }
@media (prefers-reduced-motion: reduce) { .wm-pin.live .wm-dot::after, .wm-sheet { animation: none; } }
.rchip.city { background: rgba(190, 160, 255, 0.14); color: #e6dcff; } /* (10 Nov) the table's city */

/* ---------- (Q6, 10 Nov) the menus on a phone held upright: a bottom tab bar, Play the big gold disc in the middle
   (UI-CONCEPT D0 + D1 A; the concept's play() screen). World · Social · PLAY · Shop · Me (+ Admin for the admin). ---------- */
@media (orientation: portrait) and (max-width: 700px) {
  #screen-rooms.home { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .home-top { padding: 0.3rem 0.6rem; gap: 0.4rem; }
  .brand-mini .wordmark { display: none; }
  .brand-mini .logo { width: 27px; }
  .coin-chip { min-height: 2.3rem; padding: 0.15rem 0.75rem 0.15rem 0.25rem; font-size: 0.98rem; }
  .coin-chip .ic { width: 1.5rem; height: 1.5rem; }
  .home-main { grid-row: 2; padding: 0.7rem 0.75rem 1.4rem; }
  .home-pane { gap: 0.8rem; }
  .home-nav { grid-row: 3; grid-column: 1 / -1; position: relative; z-index: 3; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    align-items: end; gap: 0; overflow: visible; padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(46, 13, 25, 0.97), #15050b); box-shadow: inset 0 1px 0 rgba(255, 214, 120, 0.24), 0 -10px 26px rgba(0, 0, 0, 0.45); }
  .nav-tab { flex-direction: column; justify-content: flex-end; gap: 0.2rem; min-width: 0; min-height: 3.1rem; padding: 0.3rem 0 0.15rem; border-radius: 10px;
    font-family: inherit; font-weight: 800; font-size: 0.72rem; letter-spacing: 0; color: #c7a595; text-align: center; }
  .nav-tab .ic { width: 1.55rem; height: 1.55rem; }
  .nav-tab:hover { background: transparent; }
  .nav-tab.active { background: transparent; color: var(--gold); box-shadow: none; }
  .nav-tab.active::before { content: ''; position: absolute; top: -0.35rem; left: 50%; width: 1.6rem; height: 3px; margin-left: -0.8rem; border-radius: 2px;
    background: var(--gold); box-shadow: 0 0 8px rgba(255, 208, 64, 0.8); }
  .nav-tab .dot { left: auto; right: calc(50% - 1.3rem); top: 0.2rem; }
  .nav-tab[data-tab=world] { order: 1; }
  .nav-tab[data-tab=friends] { order: 2; }
  .nav-tab[data-tab=play] { order: 3; }
  .nav-tab[data-tab=shop] { order: 4; }
  .nav-tab[data-tab=profile] { order: 5; }
  .nav-tab[data-tab=admin] { order: 6; }
  /* Play: a gold disc that rises out of the bar */
  .nav-tab[data-tab=play] .ic { width: 3.6rem; height: 3.6rem; margin-top: -1.6rem; padding: 0.85rem; border-radius: 50%; background: var(--metal); color: #5a2a00;
    border: 3px solid #2a0b16; box-shadow: 0 0 0 1.5px rgba(255, 214, 120, 0.55), 0 8px 18px rgba(0, 0, 0, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.6), inset 0 -4px 0 rgba(160, 90, 0, 0.45); }
  .nav-tab[data-tab=play].active::before { display: none; }
  /* a game's own screen: the name and its line on top, All games · How to play underneath (they squeezed the name) */
  .gv-banner { flex-wrap: wrap; justify-content: space-between; gap: 0.45rem 0.6rem; padding: 0.6rem 0.7rem; }
  .gv-title { order: -1; flex: 1 0 100%; }
  .gv-title b { font-size: 1.45rem; }
  .nav-tab[data-tab=play].active .ic { box-shadow: 0 0 0 1.5px rgba(255, 214, 120, 0.8), 0 0 22px rgba(255, 208, 64, 0.55), 0 8px 18px rgba(0, 0, 0, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.6), inset 0 -4px 0 rgba(160, 90, 0, 0.45); }
}

/* ---------- (Q0 + Q6, 10 Nov) Lucky 9 on a phone held upright — the owner's picks: V3 chairs, the clean table ----------
   table.js computeUpright adds .felt.tall (the top bar) and .felt.l9-up (the table) and puts every chair, hand, bet and
   the felt itself in px; here is only how they look. The other players sit on lacquer chairs up the felt's two sides (and
   one at its head); their cards are small (Players' cards: Mini = corner cards, the default, or Full), their points a
   badge on their face; tap their cards to see the face-up ones big (.up-fan). You sit below the felt. */
.felt.l9-up { --av: 44px; }
.felt.l9-up .table-oval, .felt.l9-up .table-felt { border-radius: 9999px; }
.felt.l9-up .table-felt::after { inset: 14px; border-radius: 9999px; }
.felt.l9-up .lvl-pip { display: none; } /* (the points badge sits in its corner) */
.felt.l9-up .seat { width: 0; height: 0; transform: none; gap: 0; }
.felt.l9-up .seat .plate, .felt.l9-up .seat .hand { position: absolute; }
/* a chair: just the face and the name under it (no plate) */
.felt.l9-up .seat .plate { display: flex; flex-direction: column; align-items: center; gap: 0; width: 70px; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; white-space: nowrap; }
.felt.l9-up .seat .plate .avatar-wrap { margin: 0; }
.felt.l9-up .seat .plate .avatar { box-shadow: 0 0 0 2px #1c0710, 0 0 0 3.5px rgba(255, 214, 120, 0.5), 0 3px 8px rgba(0, 0, 0, 0.5); }
.felt.l9-up .seat.you .plate .avatar { box-shadow: 0 0 0 2px #1c0710, 0 0 0 3.5px var(--gold), 0 3px 8px rgba(0, 0, 0, 0.5); }
.felt.l9-up .seat .plate .info { align-items: center; line-height: 1.1; }
.felt.l9-up .seat .plate .name { font: 900 12px/1.1 var(--font-ui); max-width: 70px; margin-top: 6px; color: #fff; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 0 3px #000, 0 0 3px #000, 0 1px 2px #000; }
.felt.l9-up .seat:is(.at-up-l, .at-up-r) .plate { scale: var(--up-k, 1); transform-origin: 50% 22px; } /* (rows close together on a short screen: a little smaller, about the face — table.js) */
.felt.l9-up .seat:is(.at-up-l, .at-up-r) .plate .money { display: none; } /* (side chairs: the name only — the bet is on the felt) */
.felt.l9-up .seat.banker .plate .name::before { content: ''; display: inline-block; width: 1.05em; height: 0.86em; margin-right: 0.22em; vertical-align: -0.06em;
  background: #ffd24a; -webkit-mask: var(--crown) center / contain no-repeat; mask: var(--crown) center / contain no-repeat; }
/* the head of the table: centred, its name and coins on one line */
.felt.l9-up .seat.at-up-h .plate { width: auto; transform: translateX(-50%); }
.felt.l9-up .seat.at-up-h .plate .info { flex-direction: row; gap: 6px; margin-top: 6px; }
.felt.l9-up .seat.at-up-h .plate .name { margin-top: 0; }
.felt.l9-up .seat.at-up-h .plate .money { font: 900 12px/1.1 var(--font-ui); text-shadow: 0 0 3px #000, 0 1px 2px #000; }
/* you: your face, then your name and coins, in a row under your cards */
.felt.l9-up .seat.you { --av: 48px; }
.felt.l9-up .seat.you .plate { flex-direction: row; gap: 10px; width: auto; }
.felt.l9-up .seat.you .plate .info { align-items: flex-start; gap: 2px; }
.felt.l9-up .seat.you .plate .name { margin: 0; font-size: 15px; max-width: calc(100vw - 250px); }
.felt.l9-up .seat.you .plate .money { font: 900 14px/1.1 var(--font-ui); color: var(--gold); text-shadow: 0 1px 2px #000; }
/* a level frame reaches 21 % past the face: the name a little lower, and your name a little further */
.felt.l9-up .seat .plate .avatar-wrap[data-frame] + .info { margin-top: 5px; }
.felt.l9-up .seat.you .plate .avatar-wrap[data-frame] + .info { margin-top: 0; margin-left: 4px; }
.felt.l9-up .seat.you .emote-open { left: calc(100vw - 64px); width: 40px; height: 40px; margin-top: -20px; }
/* the chair behind the face: dark lacquer, its back toward the room (the banker's in gold) */
.felt.l9-up .seat .plate::before { content: ''; position: absolute; z-index: -1; box-sizing: border-box; top: -6px; left: 1px; width: 60px; height: 56px; border-radius: 14px;
  background: linear-gradient(180deg, #45182a, #2b0d18); border-left: 7px solid var(--cb, #64243a);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 214, 120, 0.1); }
.felt.l9-up .seat.at-up-r .plate::before { left: 9px; border-left: 0; border-right: 7px solid var(--cb, #64243a); }
.felt.l9-up .seat.at-up-h .plate::before { left: 50%; margin-left: -28px; top: -13px; width: 56px; height: 60px; border-left: 0; border-top: 7px solid var(--cb, #64243a); }
.felt.l9-up .seat.you .plate::before { content: none; }
.felt.l9-up .seat.banker { --cb: #a8741c; }
.felt.l9-up .seat:is(.away, .busted) .plate::before { opacity: 0.55; }
/* badges (on a break, busted…) over the face; the banker's is the gold chair and the crown */
.felt.l9-up .seat .tags { left: 35px; right: auto; top: -14px; transform: translateX(-50%); flex-direction: row; }
.felt.l9-up .seat.at-up-h .tags { left: 50%; }
.felt.l9-up .seat.you .tags { left: 24px; }
.felt.l9-up .seat .tags .badge.bank { display: none; }
/* their points: a small round badge on the face's corner (toward the felt) */
.felt.l9-up .seat .avatar-wrap > .score { position: absolute; z-index: 3; right: -7px; bottom: -4px; left: auto; top: auto; transform: none; margin: 0; padding: 0;
  width: 20px; height: 20px; max-width: none; border-radius: 50%; display: grid; place-items: center; white-space: nowrap;
  font: 400 12.5px/1 var(--font-display); color: #3a0e1c; background: #fff; box-shadow: 0 0 0 2px #2a0b16, 0 2px 4px rgba(0, 0, 0, 0.5); }
.felt.l9-up .seat .avatar-wrap > .score.hidden { display: none; }
.felt.l9-up .seat .avatar-wrap > .score.shan { background: var(--metal); color: #4a2200; box-shadow: 0 0 0 2px #2a0b16, 0 0 10px rgba(255, 190, 60, 0.7); }
.felt.l9-up .seat.at-up-r .avatar-wrap > .score { right: auto; left: -7px; }
.felt.l9-up .seat.do-glow .plate .avatar { box-shadow: 0 0 0 2px #1c0710, 0 0 0 3.5px #ffd040, 0 0 16px 4px rgba(255, 208, 64, 0.55); }
/* their cards: small, in a short fan that stops before the middle (table.js sets --rv) */
.felt.l9-up .seat:not(.you) { --card-h: 32px; --cw: calc(var(--card-h) * 167 / 243); --vb: 10px; --vu: 18px; }
.felt.l9-up.pc-full .seat:not(.you) { --card-h: 46px; --vu: 23px; --vb: 12px; }
.felt.l9-up .seat .hand { min-height: var(--card-h); }
.felt.l9-up .seat:not(.you) .hand .card + .card { margin-left: calc(min(var(--vb), var(--rv, 99px)) - var(--cw)); }
.felt.l9-up .seat:not(.you) .hand .card.up + .card { margin-left: calc(min(var(--vu), var(--rv, 99px)) - var(--cw)); }
.felt.l9-up .seat.at-up-r .hand { transform: translateX(-100%); }
.felt.l9-up .seat:is(.at-up-h, .you) .hand { transform: translateX(-50%); }
.felt.l9-up .seat.you .hand .score { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 8px; }
.felt.l9-up .seat:not(.you) .card :is(.face, .back) { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(0, 0, 0, 0.3); }
/* Mini (the default): a plain corner card, just the rank and the suit, and quieter backs */
.felt.l9-up:not(.pc-full) .seat:not(.you) .card :is(.face, .back) { border-radius: 3px; }
.felt.l9-up:not(.pc-full) .seat:not(.you) .card .face img { display: none; }
.felt.l9-up:not(.pc-full) .seat:not(.you) .card .face { background: #efe7d8; }
.felt.l9-up:not(.pc-full) .seat:not(.you) .card .face .face-fallback { background: none; justify-content: flex-start; align-items: flex-start; padding: 2px 0 0 3px;
  font: 900 12.5px/1.05 var(--font-ui); letter-spacing: -0.04em; color: #1b1b22; }
.felt.l9-up:not(.pc-full) .seat:not(.you) .card .face .face-fallback :is(b, i) { font-size: 1em; }
.felt.l9-up:not(.pc-full) .seat:not(.you) .card .face .face-fallback.red { color: #d3263a; }
.felt.l9-up:not(.pc-full) .seat:not(.you) .card .back { filter: brightness(0.8) saturate(0.7); }
/* WIN / LOSE / PUSH over their cards: words only, no pill */
.felt.l9-up .seat:not(.you) .outcome { top: auto; bottom: calc(100% - 1px); transform: translateX(-50%); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  font: 400 13px/1 var(--font-display); letter-spacing: 0.04em; color: #fff; text-shadow: 0 0 3px #000, 0 1px 2px #000; animation: none; }
.felt.l9-up .seat:not(.you) .outcome.win { color: #7dffb0; }
.felt.l9-up .seat:not(.you) .outcome.win:not(.paid) { color: #ffe08a; }
.felt.l9-up .seat:not(.you) .outcome.lose { color: #ff8a95; }
.felt.l9-up .seat:not(.you) .outcome.waiting { display: block; }
.felt.l9-up .seat:not(.you) .outcome small { display: none; }
/* (a side row's words sit over the inner end of its cards and run outwards: a left and a right hand that nearly meet in
   the middle — a narrow round end — keep their words apart) */
.felt.l9-up .seat.at-up-l .outcome { left: auto; right: 0; transform: none; }
.felt.l9-up .seat.at-up-r .outcome { left: 0; transform: none; }
/* the bets: a chip and the amount on the felt (no pill); yours a soft pill at the right of your row */
.felt.l9-up #spots .spot { gap: 0; }
.felt.l9-up #spots .spot .stack { display: none; }
.felt.l9-up #spots .spot .amt { display: inline-flex; align-items: center; gap: 2px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  font: 900 12px/1.2 var(--font-ui); color: #ffe08a; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85); }
html[data-eco=room] #screen-table .felt.l9-up #spots .spot:not(.bank) .amt::before { background-image: url(icons/chip-room.svg); } /* (Wave 2 R2) */
/* (Wave 2 R2) the banker's pile at a room-chips table is room chips too: silver and blue (gold = your own chips) */
html[data-eco=room][data-screen=screen-table] .chip.gold { --hi: #ffffff; --c: #cdd5df; --lo: #8a95a5; --in: #dfe5ee; --ring: rgba(47, 111, 214, 0.85); border-color: #2f6fd6; --edge: #1d2a40; }
html[data-eco=room][data-screen=screen-table] .flychip.gold { background: radial-gradient(ellipse at 50% 40%, #ffffff, #cdd5df 60%, #8a95a5); border-color: #2f6fd6; }
.felt.l9-up #spots .spot:not(.bank) .amt::before { content: ''; flex: none; width: 14px; height: 14px; background: url(icons/chip.svg) center / contain no-repeat;
  filter: drop-shadow(0 1px 0.5px rgba(0, 0, 0, 0.45)); }
.felt.l9-up #spots .spot.bank .amt { color: var(--gold); font-size: 13px; }
/* (BUGS #141) another player's bank: its warnings ("⚠1/3") on a line under the amount — narrow enough for the room
   between the felt's edge and their cards on a phone */
.felt.l9-up #spots .spot[data-up=o].bank .amt { display: inline-grid; grid-template-columns: auto auto; align-items: center; justify-items: center; row-gap: 0; }
.felt.l9-up #spots .spot[data-up=o].bank .amt .warn { grid-column: 1 / -1; margin: 0; font-size: 11px; line-height: 1.05; }
.felt.l9-up #spots .spot[data-up=me] .amt { height: 30px; gap: 4px; padding: 0 11px 0 6px; border-radius: 15px; background: rgba(0, 0, 0, 0.28); font-size: 13px; text-shadow: none; }
.felt.l9-up #spots .spot[data-up=me]:not(.bank) .amt::before { width: 18px; height: 18px; }
.felt.l9-up #spots .spot[data-up=me].bank .amt { padding-left: 11px; }
.felt.l9-up .deck.small { height: 30px; }
/* the middle text: in the gap between the side rows (table.js sets its top and side padding) */
.felt.l9-up .center { left: 0; right: 0; bottom: 0; width: auto; transform: none; }
.felt.l9-up .phase { margin-top: 0; }
.felt.l9-up .phase .ph-main { font-size: 17px; }
.felt.l9-up .phase .ph-more { font-size: 12px; }
.felt.l9-up .center.up-tight .phase .ph-more { display: none; }
.felt.l9-up #log-line { display: none; } /* (the calm table: no running commentary under the timer — it lay on the last row's cards; Last hand tells the story) */
/* the countdown: shorter than the column, so the small deck at the felt's edge (beside the middle text) is clear of it */
.felt.l9-up .timer-row { margin-inline: 30px; }
.felt.l9-up .timer-row .timer { width: auto; flex: 1; }
.felt.l9-up .spinner { --spin: clamp(72px, 12vh, 104px); }
/* your buttons: one row along the bottom, big enough for a thumb */
.felt.l9-up .center .actions, .felt.l9-up .center .sit-btn { position: absolute; left: 8px; right: 8px; top: auto; bottom: calc(8px + env(safe-area-inset-bottom));
  transform: none; width: auto; max-width: none; margin: 0; }
.felt.l9-up .center .actions { min-height: 48px; padding: 0; gap: 8px; border: 0; border-radius: 0; background: none; box-shadow: none; flex-wrap: nowrap; justify-content: center; }
.felt.l9-up .center .sit-btn { left: 16px; right: 16px; min-height: 52px; }
/* (11 Nov) the host before sitting: "Sit down" holds the bottom row; the owner's Start goes on a row above it (it lay
   on top of Sit down and ate the tap — the host could not sit at a new table on an upright phone) */
.felt.l9-up .center:has(> .sit-btn:not(.hidden)) .actions { bottom: calc(68px + env(safe-area-inset-bottom)); }
.felt.l9-up .actions > .btn { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 0 0.6em; font-size: 1.05rem; }
.felt.l9-up .actions .lbl-s { display: inline; }
.felt.l9-up .actions .lbl-l, .felt.l9-up .actions .you-score { display: none; }
.felt.l9-up .actions .bet-amount.dim { display: block; flex: 1 1 0; font-size: 13px; }
/* the bet bar: Min, the slider, Max, the amount, Bet */
.felt.l9-up .actions .chips { display: contents; }
.felt.l9-up .actions .chips .opt { display: none; }
.felt.l9-up .actions .chips button { order: 1; flex: none; width: 44px; height: 44px; font-size: 0.82rem; }
.felt.l9-up .actions .chips button:last-child { order: 3; }
.felt.l9-up .actions input[type=range] { order: 2; flex: 1 1 0; min-width: 50px; width: auto; }
.felt.l9-up .actions .bet-amount { order: 4; min-width: 0; font-size: 1rem; }
.felt.l9-up .actions .bet-amount small { display: block; font-size: 0.7em; line-height: 1; }
.felt.l9-up .actions > .btn { order: 5; }
.felt.l9-up .actions:has(.chips) > .btn { flex: 0 0 auto; min-width: 84px; }
.felt.l9-up .actions .credit-tag { position: absolute; right: 0; bottom: 100%; }

/* the top bar: Rooms, the round, your chips, the last hand and full screen; the rest in the ··· menu */
.felt:not(.tall) .tt-more { display: contents; }
.felt:not(.tall) :is(#btn-invite, #btn-room, #btn-break) { order: 1; }
.felt:not(.tall) #btn-last { order: 2; }
.felt:not(.tall) :is(#btn-sound, #btn-help, #btn-chat) { order: 3; }
.felt:not(.tall) :is(#btn-more, #btn-pcards) { display: none; }
.felt.tall .table-top { gap: 0.35rem; }
.felt.tall .table-top > .btn .lbl, .felt.tall .table-top .stakes-part { display: none; }
.felt.tall #btn-menu { min-width: var(--fs-size); min-height: var(--fs-size); padding: 0; border-radius: 50%; }
.felt.tall .table-top > .btn.icon-btn { min-width: var(--fs-size); min-height: var(--fs-size); }
.felt.tall #room-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.felt.tall .table-top .my-coins { flex: none; }
.felt.tall #btn-more .dots { font: 900 1.15rem/1 var(--font-ui); letter-spacing: -0.05em; margin-top: -0.35em; }
.felt.tall .tt-more { display: none; }
.felt.tall .table-top.more-open { z-index: 35; }
.felt.tall .table-top.more-open .tt-more { position: absolute; right: 0.4rem; top: calc(100% + 4px); display: flex; flex-direction: column; gap: 4px; padding: 8px; min-width: 210px;
  border-radius: 16px; background: linear-gradient(180deg, #3a1222, #260a15); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 208, 64, 0.25); }
.felt.tall .tt-more .btn { width: 100%; min-height: 44px; justify-content: flex-start; gap: 0.6em; padding: 0 0.8em; border-radius: 12px; font-size: 1rem;
  background: none; box-shadow: none; }
.felt.tall .tt-more .btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); }
.felt.tall .tt-more .btn.icon-btn { min-width: 0; }
.felt.tall .tt-more .btn.icon-btn::after { content: attr(aria-label); }
.felt.tall .tt-more .btn .lbl, .felt.tall .tt-more #btn-invite .lbl { display: inline; } /* (Wave 2: the phones' #btn-invite rule hid its word in the menu) */
.felt.tall .tt-more #pcards-v { color: var(--gold); }

/* (Wave 2 B1, 11 Nov — the owner's pick) upright, the table's top bar is a framed bar: ‹ Rooms · the game's name over the room's
   code and whose chips · your chips in a gold-edged pill · ···. Last hand and Full screen are rows in the ··· menu (a wide
   screen keeps them in the bar and the corner: .tt-more is display: contents there) */
.room-line .rn-title, .room-line .rn-sub { display: none; }
.felt.tall .table-top { min-height: 58px; padding: 0.4rem 0.55rem; gap: 0.45rem;
  background: linear-gradient(180deg, rgba(77, 26, 44, 0.97), rgba(37, 11, 20, 0.97)); box-shadow: inset 0 -2px 0 rgba(255, 208, 64, 0.42), 0 6px 18px rgba(14, 1, 5, 0.5); }
.felt.tall .table-top > .spacer, .felt.tall .room-line .rn-round { display: none; }
.felt.tall #room-name { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; text-align: center; }
.felt.tall #room-name :is(.rn-title, .rn-sub) { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.felt.tall #room-name .rn-title { font: 400 1.25rem/1.05 var(--font-display); color: #fff; letter-spacing: 0.01em; }
.felt.tall #room-name .rn-sub { margin-top: 3px; font: 800 0.74rem/1.2 var(--font-ui); color: var(--muted); text-shadow: none; }
.felt.tall .table-top .my-coins { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.3rem; padding: 0.1rem 0.8rem 0.1rem 0.25rem; border-radius: 999px;
  border: 2px solid transparent; background: linear-gradient(180deg, #511d2f, #270c15) padding-box, var(--metal-edge) border-box; color: #fff; font-size: 1rem;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4); }
.felt.tall .table-top .my-coins .coin { width: 1.55rem; height: 1.55rem; margin: 0; }
.felt.tall .tt-more #btn-last { order: -1; }
.felt.tall .tt-more .btn.small.icon-btn.btn-fs { position: static; order: 9; min-width: 0; min-height: 44px; padding: 0 0.8em; font-size: 1rem; color: inherit; background: none; box-shadow: none; }
.felt.tall .tt-more .btn.small.icon-btn.btn-fs:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); }
/* a short screen (an SE-size phone with the browser's bars): the framed bar gets slimmer, so the table keeps its room */
/* (42 px: where the table started before the frame, so Lucky 9's middle text keeps its band between the side rows) */
@media (max-height: 600px) {
  .felt.tall .table-top { min-height: 42px; padding-block: 0.1rem; }
  .felt.tall #room-name .rn-title { font-size: 1.02rem; }
  .felt.tall #room-name .rn-sub { margin-top: 0; font-size: 0.66rem; }
  .felt.tall .table-top .my-coins { min-height: 1.9rem; }
}

/* (Wave 2 E1, 11 Nov — the owner's pick) upright, a table short of players says so in one card on the felt: how many sit and
   when it starts, a big Invite friends, the room code (tap to copy) and Share. The middle line and the ready buttons wait
   under it (hidden, not moved: the layout stays put); the room code strip of a wide screen is not used upright */
.wait-card { display: none; }
.felt.tall .wait-card:not(.hidden) { position: absolute; left: 50%; top: 44%; translate: -50% -50%; z-index: 20; box-sizing: border-box; width: min(300px, calc(100% - 28px));
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem; padding: 1rem 0.9rem 0.9rem; text-align: center;
  border-radius: 18px; background: rgba(28, 7, 16, 0.82); border: 1.5px solid rgba(255, 214, 120, 0.45); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5); }
.wait-card .wc-title { font: 400 1.35rem/1.05 var(--font-display); color: #fff; }
.wait-card small { font: 800 0.8rem/1.3 var(--font-ui); color: var(--muted); }
.wait-card .btn.gold { width: 100%; justify-content: center; gap: 0.45em; font-size: 1.05rem; min-height: 2.9rem; }
.wait-card .wc-row { display: flex; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap; font: 800 0.8rem/1 var(--font-ui); color: var(--muted); }
.wait-card .wc-row.hidden { display: none; }
.wait-card .wc-row .code { font-size: 1.05rem; color: #fff; letter-spacing: 0.12em; cursor: pointer; }
.wait-card .wc-row .btn { gap: 0.35em; }
.felt.tall #lobby-invite { display: none !important; }
.felt.tall:has(#wait-card:not(.hidden)) :is(#phase-text, #actions, .pk-msg, .rm-msg) { visibility: hidden; }

/* tap their cards: the face-up ones rise at your card size, fanned, over a light veil */
.up-veil { position: absolute; left: 0; right: 0; bottom: 0; z-index: 30; background: rgba(12, 3, 8, 0.4); }
.up-fan { position: absolute; z-index: 32; pointer-events: none; display: flex; transform: translateX(-50%); }
.up-card { position: relative; flex: none; width: 84px; aspect-ratio: 167 / 243; border-radius: 6% / 4.2%; overflow: hidden; background: #fff; container-type: size;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.65), 0 0 0 0.5px rgba(0, 0, 0, 0.3); animation: upIn 0.22s both; }
.up-card + .up-card { margin-left: -32px; }
.up-card img { position: relative; width: 100%; height: 100%; display: block; }
.up-card .face-fallback { font-size: 22cqh; }
@keyframes upIn { from { opacity: 0; transform: translateY(14px) scale(0.9); } }
.felt.l9-up .seat.peeked { z-index: 31; }
.felt.l9-up .seat .hand.shake { animation: upShake 0.45s; }
@keyframes upShake { 20%, 60% { translate: -3px 0; } 40%, 80% { translate: 3px 0; } }
@media (prefers-reduced-motion: reduce) { .up-card, .felt.l9-up .seat .hand.shake { animation: none; } }
/* ---------- (Q0 + Q6, 10 Nov) Poker on a phone held upright: the same V3 chairs and clean table as Lucky 9 ----------
   poker.js computeUp adds .felt.tall (the top bar) and .felt.pk-up and gives every seat its places in px (CSS variables:
   the chair --px/--py, the cards --hx/--hy, the line under them --lx/--ly, a chat bubble --bx/--by; yours also your
   hand's name --nx/--ny and your bet --wx/--wy); the board, the pot and the message get --up-bt/--up-pt/--up-mt. Each
   seat is a point at the felt's corner and its parts hang from it. */
.pk-line { display: contents; }
.pk-bet-lbl { display: none; }
.felt.pk-up { --av: 55px; }
.felt.pk-mode.pk-up .pk-seat { left: 0; top: 0; width: 0; height: 0; display: block; transform: none; gap: 0; }
.felt.pk-mode.pk-up .pk-seat.empty { display: none; }
.felt.pk-mode.pk-up .pk-seat.empty:has(.pk-dealer.dead) { display: block; width: 0; height: 0; }
.felt.pk-mode.pk-up .pk-seat.empty .pk-dealer.dead { left: calc(var(--px) + 35px); top: calc(var(--py) + 22px); }
.felt.pk-mode.pk-up .pk-seat :is(.pk-cards, .pk-plate, .pk-line, .pk-mine, .pk-win, .seat-bubble) { position: absolute; }
.felt.pk-mode.pk-up .pk-seat .pk-cards { left: var(--hx); top: var(--hy); min-height: 0; }
.felt.pk-mode.pk-up .pk-seat .pk-plate { left: var(--px); top: var(--py); max-width: none; }
/* the middle: the board, the pot under it, the message under that */
.felt.pk-mode.pk-up .pk-board { top: var(--up-bt); left: 50%; transform: translateX(-50%); gap: 4px; }
.felt.pk-mode.pk-up .pk-pot, .felt.pk-mode.pk-up .pk-pot.blinds { top: var(--up-pt); left: 50%; transform: translate(-50%, -50%); font-size: 13px; }
.felt.pk-mode.pk-up .pk-pot.blinds { font-size: 11.5px; }
.felt.pk-mode.pk-up .pk-pot-sides { display: none; }
.felt.pk-mode.pk-up .pk-pot.split { display: block; white-space: nowrap; border-radius: 999px; padding: 0.1em 0.85em; max-width: none; }
.felt.pk-mode.pk-up .pk-msg { top: var(--up-mt); width: var(--up-mw); gap: 1px; }
.felt.pk-mode.pk-up .pk-msg b { font-size: 17px; line-height: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.felt.pk-mode.pk-up .pk-msg span:not(:empty) { display: block; max-width: 100%; box-sizing: border-box; font-size: 11.5px; line-height: 16px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; padding: 0 0.7em; }
.felt.pk-mode.pk-up .pk.up-tight .pk-msg span { display: none; }
/* their chairs: a face, the name and the chips under it (the head's on one line) */
.felt.pk-mode.pk-up .pk-seat .pk-plate { flex-direction: column; align-items: center; gap: 0; width: 70px; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; white-space: nowrap; }
.felt.pk-mode.pk-up .pk-seat .pk-plate .avatar-wrap { margin: 0; }
.felt.pk-mode.pk-up .pk-seat .pk-plate .avatar { box-shadow: 0 0 0 2px #0a1020, 0 0 0 3.5px rgba(170, 200, 255, 0.45), 0 3px 8px rgba(0, 0, 0, 0.5); }
.felt.pk-mode.pk-up .pk-seat .pk-who { justify-items: center; margin-top: 6px; line-height: 1.1; }
.felt.pk-mode.pk-up .pk-seat .pk-plate .avatar-wrap[data-frame] + .pk-who { margin-top: 10px; }
.felt.pk-mode.pk-up .pk-seat .pk-who .name { font: 900 12px/1.1 var(--font-ui); max-width: 70px; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000, 0 1px 2px #000; }
.felt.pk-mode.pk-up .pk-seat .pk-who .money { font: 900 11.5px/1.15 var(--font-ui); color: #ffe08a; text-shadow: 0 0 3px #000, 0 1px 2px #000; }
.felt.pk-mode.pk-up .pk-seat:not(.you) .pk-who .money::before { display: none; }
.felt.pk-mode.pk-up .pk-seat.up-h .pk-plate { width: auto; transform: translateX(-50%); }
.felt.pk-mode.pk-up .pk-seat.up-h .pk-who { display: flex; gap: 6px; }
.felt.pk-mode.pk-up .pk-seat .pk-plate:hover { outline: none; }
/* the chair behind the face: midnight lacquer, its back toward the room */
.felt.pk-mode.pk-up .pk-seat:not(.you) .pk-plate::before { content: ''; position: absolute; z-index: -1; box-sizing: border-box; top: -6px; left: 1px; width: 60px; height: 56px;
  border-radius: 14px; background: linear-gradient(180deg, #1d2a4c, #0e1630); border-left: 7px solid #2c3f70;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(170, 200, 255, 0.12); }
.felt.pk-mode.pk-up .pk-seat.up-r .pk-plate::before { left: 9px; border-left: 0; border-right: 7px solid #2c3f70; }
.felt.pk-mode.pk-up .pk-seat.up-h .pk-plate::before { left: 50%; margin-left: -28px; top: -13px; width: 56px; height: 60px; border-left: 0; border-top: 7px solid #2c3f70; }
.felt.pk-mode.pk-up .pk-seat:is(.folded, .away) .pk-plate::before { opacity: 0.55; }
.felt.pk-mode.pk-up .pk-seat .pk-dealer { top: -8px; right: 2px; width: 20px; height: 20px; font-size: 11px; }
.felt.pk-mode.pk-up .pk-seat.up-h .pk-dealer { right: auto; left: calc(50% + 14px); top: -10px; }
.felt.pk-mode.pk-up .pk-seat.winner .pk-plate { box-shadow: none; }
.felt.pk-mode.pk-up .pk-seat.winner .pk-plate .avatar { box-shadow: 0 0 0 2px #0a1020, 0 0 0 3.5px #ffd040, 0 0 16px 4px rgba(255, 208, 64, 0.55); }
/* (a winner's winnings on their chair, in place of the chips, as on a phone held sideways) */
.felt.pk-mode.pk-up .pk-seat:not(.you) .pk-win { display: none; }
.felt.pk-mode.pk-up .pk-seat:not(.you) .pk-who.won .money:not(.pk-won) { display: none; }
.felt.pk-mode.pk-up .pk-seat:not(.you) .pk-who .pk-won { display: inline-flex; color: #5ee88f; animation: pop-x-in 0.35s cubic-bezier(.3, 1.6, .5, 1) both; }
/* their cards: small, side by side (Players' cards: Mini, the corner cards and the default, or Full) */
.felt.pk-mode.pk-up .pk-seat:not(.you) { --pk-card: 32px; --cw: calc(var(--pk-card) * 167 / 243); --vo: 18px; }
.felt.pk-mode.pk-up.pc-full .pk-seat:not(.you) { --pk-card: 46px; --vo: 23px; }
.felt.pk-mode.pk-up .pk-seat:not(.you) .pk-cards .card { transform: none; }
.felt.pk-mode.pk-up .pk-seat:not(.you) .pk-cards .card + .card { margin-left: calc(var(--vo) - var(--cw)); }
.felt.pk-mode.pk-up .pk-seat:not(.you) .pk-cards { pointer-events: auto; cursor: zoom-in; }
.felt.pk-mode.pk-up .pk-seat:not(.you) .card :is(.face, .back) { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(0, 0, 0, 0.3); }
.felt.pk-mode.pk-up:not(.pc-full) .pk-seat:not(.you) .card :is(.face, .back) { border-radius: 3px; }
.felt.pk-mode.pk-up:not(.pc-full) .pk-seat:not(.you) .card .face img { display: none; }
.felt.pk-mode.pk-up:not(.pc-full) .pk-seat:not(.you) .card .face { background: #efe7d8; }
.felt.pk-mode.pk-up:not(.pc-full) .pk-seat:not(.you) .card .face .face-fallback { background: none; justify-content: flex-start; align-items: flex-start; padding: 2px 0 0 3px;
  font: 900 12.5px/1.05 var(--font-ui); letter-spacing: -0.04em; color: #1b1b22; }
.felt.pk-mode.pk-up:not(.pc-full) .pk-seat:not(.you) .card .face .face-fallback :is(b, i) { font-size: 1em; }
.felt.pk-mode.pk-up:not(.pc-full) .pk-seat:not(.you) .card .face .face-fallback.red { color: #d3263a; }
.felt.pk-mode.pk-up:not(.pc-full) .pk-seat:not(.you) .card .back { filter: brightness(0.8) saturate(0.7); }
.felt.pk-mode.pk-up .pk-seat .pk-cards.shake { animation: upShake 0.45s; }
/* under their cards, one line: their chips in the pot (a chip and the amount, no pill), their move, at the showdown their hand */
.felt.pk-mode.pk-up .pk-line { left: var(--lx); top: var(--ly); display: flex; align-items: center; gap: 4px; white-space: nowrap; translate: 0 -50%; z-index: 3; }
.felt.pk-mode.pk-up .pk-line .act-amt { display: none; }
.felt.pk-mode.pk-up .pk-line:has(.pk-hand) .pk-act.allin { display: none; } /* (their chips say ALL IN already) */
.felt.pk-mode.pk-up .pk-line > * { position: static; transform: none; }
.felt.pk-mode.pk-up .pk-line .pk-bet { order: -1; padding: 0; border-radius: 0; background: none; box-shadow: none; display: inline-flex; align-items: center;
  font: 900 12px/1.2 var(--font-ui); color: #ffe08a; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85); }
.felt.pk-mode.pk-up .pk-line .pk-bet.live { color: #fff4c2; }
.felt.pk-mode.pk-up .pk-line .pk-bet::before { width: 14px; height: 14px; margin-right: 2px; vertical-align: 0; }
.felt.pk-mode.pk-up .pk-line :is(.pk-act, .pk-tag, .pk-hand) { font-size: 11px; line-height: 16px; padding: 0 6px; }
.felt.pk-mode.pk-up .pk-line .pk-act:not(.raise):not(.allin) { background: rgba(6, 12, 14, 0.55); }
/* the head of the table: its line beside its chair (the round end is narrow under its cards) */
.felt.pk-mode.pk-up .pk-seat.up-h .pk-line { translate: 0 -50%; }
/* you: your cards big under the felt, your hand's name under them (beside them on a short screen), your last move at
   their right; your face, name and chips in a row below, your chips in the pot at its right, the smiley at the end */
.felt.pk-mode.pk-up .pk-seat.you { --av: 60px; }
.felt.pk-mode.pk-up .pk-seat.you .pk-cards .card + .card { margin-left: calc(var(--pk-mine) * -0.24); }
.felt.pk-mode.pk-up .pk-seat.up-me .pk-plate { flex-direction: row; gap: 10px; width: auto; }
.felt.pk-mode.pk-up .pk-seat.up-me .pk-who { justify-items: start; margin: 0; gap: 2px; }
.felt.pk-mode.pk-up .pk-seat.up-me .pk-plate .avatar-wrap[data-frame] + .pk-who { margin: 0 0 0 4px; }
.felt.pk-mode.pk-up .pk-seat.up-me .pk-who .name { font-size: 15px; max-width: calc(100vw - 250px); }
.felt.pk-mode.pk-up .pk-seat.up-me .pk-who .money { font: 900 14px/1.1 var(--font-ui); color: var(--gold); text-shadow: 0 1px 2px #000; }
.felt.pk-mode.pk-up .pk-seat.you .pk-plate .avatar { box-shadow: 0 0 0 2px #0a1020, 0 0 0 3.5px var(--gold), 0 3px 8px rgba(0, 0, 0, 0.5); }
.felt.pk-mode.pk-up .pk-seat.you .pk-plate > .emote-open { left: calc(100vw - 64px); top: 50%; bottom: auto; right: auto; width: 40px; height: 40px; margin: -20px 0 0; }
.felt.pk-mode.pk-up .pk-seat.up-me :is(.pk-act, .pk-tag) { left: var(--lx); top: var(--ly); transform: none; translate: 0 -50%; font-size: 12px; line-height: 18px; }
.felt.pk-mode.pk-up .pk-seat.up-me :is(.pk-mine, .pk-hand) { left: var(--nx); top: var(--ny); bottom: auto; right: auto; transform: none; translate: -50% 0;
  font-size: 13px; line-height: 18px; padding: 1px 12px; }
.felt.pk-mode.pk-up .pk.up-side .pk-seat.up-me :is(.pk-mine, .pk-hand) { translate: -100% -50%; font-size: 12px; }
.felt.pk-mode.pk-up .pk.up-side .pk-seat.up-me .pk-mine.wrap { line-height: 1.2; padding: 2px 8px; }
.felt.pk-mode.pk-up .pk-seat.up-me .pk-bet { left: var(--wx); top: var(--wy); bottom: auto; right: auto; transform: none; translate: -100% -50%;
  display: inline-flex; align-items: center; height: 30px; padding: 0 11px 0 7px; border-radius: 15px; font: 900 13px/1 var(--font-ui);
  color: #ffe08a; background: rgba(0, 0, 0, 0.3); box-shadow: none; }
.felt.pk-mode.pk-up .pk-seat.up-me .pk-bet.live { box-shadow: 0 0 0 1.5px rgba(255, 203, 69, 0.75); }
.felt.pk-mode.pk-up .pk-seat.up-me .pk-bet::before { width: 18px; height: 18px; margin-right: 4px; vertical-align: 0; }
.felt.pk-mode.pk-up .pk-seat.you .pk-bet-lbl { display: inline; margin-right: 0.3em; color: #f3dcb4; font-weight: 800; }
.felt.pk-mode.pk-up .pk-seat.up-me .pk-win { left: var(--wx); top: var(--wy); bottom: auto; right: auto; translate: -100% -50%; font-size: 15px; padding: 3px 12px; }
.felt.pk-mode.pk-up .pk-seat.you .pk-cards .card.best { transform: translateY(-8%) !important; }
/* a chat bubble: over the chair, toward the middle (the head's: left of its face) */
.felt.pk-mode.pk-up .pk-seat .seat-bubble { left: var(--bx); top: var(--by); bottom: auto; transform: none; translate: 0 -100%; max-width: 160px; }
.felt.pk-mode.pk-up .pk-seat.up-r .seat-bubble { translate: -100% -100%; }
.felt.pk-mode.pk-up .pk-seat.up-h .seat-bubble { translate: -100% -50%; }
/* your moves: one row along the bottom, big enough for a thumb; the bet panel and the clock above it */
.felt.pk-mode.pk-up .pk-bar { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); max-width: none; justify-items: stretch; gap: 6px; }
.felt.pk-mode.pk-up .pk-actions { flex-wrap: nowrap; justify-content: center; gap: 8px; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.felt.pk-mode.pk-up .pk-actions .btn { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 0 0.5em; font-size: 1.05rem; }
.felt.pk-mode.pk-up .pk-actions .pk-pre-cap { display: none; }
.felt.pk-mode.pk-up .pk-actions .btn.pk-pre { min-height: 44px; font-size: 0.86rem; justify-content: center; }
.felt.pk-mode.pk-up .pk-clock { width: auto; justify-self: stretch; margin-inline: 4px; }
.felt.pk-mode.pk-up .pk-raise { width: auto; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 6px; padding: 5px 6px; border-radius: 14px; }
.felt.pk-mode.pk-up .pk-quick { flex-wrap: nowrap; gap: 6px; }
.felt.pk-mode.pk-up .pk-quick .btn { flex: 1 1 0; min-width: 0; min-height: 32px; padding: 0 0.3em; font-size: 0.86rem; }
.felt.pk-mode.pk-up .pk-raise .pk-back { display: inline-flex; justify-content: center; min-width: 0; min-height: 42px; padding: 0; font-size: 1.1rem; }
.felt.pk-mode.pk-up .pk-go { min-height: 42px; padding: 0 0.9em; font-size: 1rem; }
/* (raising: the panel is in your buttons' and your row's place — your row steps aside until you bet or go back) */
.felt.pk-mode.pk-up .pk.raising .pk-actions { display: none; }
.felt.pk-mode.pk-up .pk.raising .pk-seat.up-me :is(.pk-plate, .pk-bet, .pk-win) { display: none; }
.pk-raise .pk-back { display: none; } /* (upright only: the panel covers the Bet… button there) */
/* ---------- (Q0 + Q6, 10 Nov) Rummy on a phone held upright: the same chairs and clean table as Lucky 9 and Poker ----------
   rummy.js computeUp adds .felt.tall (the top bar) and .felt.rm-up, sizes the felt (a walnut card table with round
   corners) and gives every seat its places in px; the middle, the melds, your hand and row, the clock and your buttons
   get --up-ct/--up-mt/--up-dt/--up-ht/--up-rt/--up-kt/--up-at. */
.rm-line { display: contents; } /* (so the seat's own rules reach its tag and win: .rm-seat > .rm-line > .rm-tag) */
.felt.rm-up { --av: 55px; }
.felt.rm-up .table-oval { border-radius: 50px; }
.felt.rm-up .table-felt { border-radius: 40px; }
.felt.rm-up .table-felt::after { border-radius: 32px; }
.felt.rm-mode.rm-up #rm-seats .rm-seat { left: 0; top: 0; width: 0; height: 0; display: block; transform: none; gap: 0; }
.felt.rm-mode.rm-up #rm-seats .rm-seat.empty { display: none; }
.felt.rm-mode.rm-up #rm-seats .rm-seat :is(.rm-plate, .rm-backs, .rm-line, .seat-bubble) { position: absolute; }
.felt.rm-mode.rm-up #rm-seats .rm-backs { left: var(--hx); top: var(--hy); }
/* their chairs: a face, the name and the coins under it (the head's on one line) */
.felt.rm-mode.rm-up #rm-seats .rm-plate { left: var(--px); top: var(--py); flex-direction: column; align-items: center; gap: 0; width: 70px; padding: 0; border: 0;
  border-radius: 0; background: none; box-shadow: none; white-space: nowrap; max-width: none; }
.felt.rm-mode.rm-up #rm-seats .rm-plate:has(.rm-dealer) { padding-right: 0; }
.felt.rm-mode.rm-up #rm-seats .rm-plate .avatar-wrap { margin: 0; }
.felt.rm-mode.rm-up #rm-seats .rm-plate .avatar { box-shadow: 0 0 0 2px #10180f, 0 0 0 3.5px rgba(230, 200, 130, 0.5), 0 3px 8px rgba(0, 0, 0, 0.5); }
.felt.rm-mode.rm-up #rm-seats .rm-who { justify-items: center; margin-top: 6px; line-height: 1.1; }
.felt.rm-mode.rm-up #rm-seats .rm-plate .avatar-wrap[data-frame] + .rm-who { margin-top: 10px; }
.felt.rm-mode.rm-up #rm-seats .rm-who .name { font: 900 12px/1.1 var(--font-ui); max-width: 70px; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000, 0 1px 2px #000; }
.felt.rm-mode.rm-up #rm-seats .rm-who .money { font: 900 11.5px/1.15 var(--font-ui); color: #ffe08a; text-shadow: 0 0 3px #000, 0 1px 2px #000; }
.felt.rm-mode.rm-up #rm-seats .rm-who .money::before { display: none; }
.felt.rm-mode.rm-up #rm-seats .rm-seat.up-h .rm-plate { width: auto; transform: translateX(-50%); }
.felt.rm-mode.rm-up #rm-seats .rm-seat.up-h .rm-who { display: flex; gap: 6px; }
.felt.rm-mode.rm-up #rm-seats .rm-plate:hover { outline: none; }
/* the chair behind the face: walnut, a brass edge toward the room */
.felt.rm-mode.rm-up #rm-seats .rm-plate::before { content: ''; position: absolute; z-index: -1; box-sizing: border-box; top: -6px; left: 1px; width: 60px; height: 56px;
  border-radius: 14px; background: linear-gradient(180deg, #6b4423, #3a220e); border-left: 7px solid #8a5a2c;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 220, 150, 0.16); }
.felt.rm-mode.rm-up #rm-seats .rm-seat.up-r .rm-plate::before { left: 9px; border-left: 0; border-right: 7px solid #8a5a2c; }
.felt.rm-mode.rm-up #rm-seats .rm-seat.up-h .rm-plate::before { left: 50%; margin-left: -28px; top: -13px; width: 56px; height: 60px; border-left: 0; border-top: 7px solid #8a5a2c; }
.felt.rm-mode.rm-up #rm-seats .rm-seat:is(.away, .out) .rm-plate::before { opacity: 0.55; }
.felt.rm-mode.rm-up #rm-seats .rm-dealer { top: -8px; right: 2px; width: 20px; height: 20px; font-size: 11px; }
.felt.rm-mode.rm-up #rm-seats .rm-seat.up-h .rm-dealer { right: auto; left: calc(50% + 14px); top: -10px; }
.felt.rm-mode.rm-up #rm-seats .rm-seat.winner .rm-plate { box-shadow: none; }
.felt.rm-mode.rm-up #rm-seats .rm-seat.winner .rm-plate .avatar { box-shadow: 0 0 0 2px #10180f, 0 0 0 3.5px #ffd040, 0 0 16px 4px rgba(255, 208, 64, 0.55); }
/* under their backs, one line: what happened to them ("Dropped · 20", "45 on the table") and a win */
.felt.rm-mode.rm-up #rm-seats .rm-line { left: var(--lx); top: var(--ly); display: flex; align-items: center; gap: 4px; white-space: nowrap; translate: 0 -50%; z-index: 3; }
.felt.rm-mode.rm-up #rm-seats .rm-line > * { position: static; font-size: 11px; line-height: 16px; padding: 0 6px; }
.felt.rm-mode.rm-up #rm-seats .rm-seat.up-h .rm-line { translate: 0 -50%; }
.felt.rm-mode.rm-up #rm-seats .rm-line.wrap { flex-wrap: wrap; row-gap: 2px; white-space: normal; }
.felt.rm-mode.rm-up #rm-seats .rm-line.wrap > * { white-space: nowrap; }
/* a side seat's two lines (rummy.js placeUp): centred, the first where the one line was, the second under it (not up onto the backs) */
.felt.rm-mode.rm-up #rm-seats .rm-line.side-wrap { justify-content: center; translate: 0 -8px; }
.felt.rm-mode.rm-up #rm-seats .seat-bubble { left: var(--bx); top: var(--by); bottom: auto; transform: none; translate: 0 -100%; max-width: 160px; }
.felt.rm-mode.rm-up #rm-seats .rm-seat.up-r .seat-bubble { translate: -100% -100%; }
.felt.rm-mode.rm-up #rm-seats .rm-seat.up-h .seat-bubble { translate: -100% -50%; }
/* the middle: the stock and the pile (Indian: the cut card), the line under them, 500 Rum's melds under that */
.felt.rm-mode.rm-up .rm-center { top: var(--up-ct); gap: 14px; }
.felt.rm-mode.rm-up .rm-pile.spread { max-width: calc(var(--up-mw) - var(--rm-pile) * 0.69 - 20px); }
.felt.rm-mode.rm-up .rm-wild-cap { font-size: 10.5px; }
.felt.rm-mode.rm-up .rm-bar { display: contents; }
.felt.rm-mode.rm-up .rm-msg { position: absolute; left: 50%; top: var(--up-mt); width: var(--up-mw); translate: -50% 0; justify-items: center; text-align: center; gap: 1px; z-index: 4; }
.felt.rm-mode.rm-up .rm-msg b { font-size: 17px; line-height: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.felt.rm-mode.rm-up .rm-msg span:not(:empty) { display: block; max-width: 100%; box-sizing: border-box; font-size: 11.5px; line-height: 16px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; padding: 0 0.7em; }
.felt.rm-mode.rm-up .rm.up-tight .rm-msg span { display: none; }
.felt.rm-mode.rm-up .rm-melds { left: 50%; right: auto; top: var(--up-dt); width: var(--up-mw); max-height: var(--up-dh); translate: -50% 0; overflow-y: auto;
  --rm-meld: 40px; gap: 4px 6px; }
/* you: your hand under the felt in up to two rows of its groups, your face and Sort under it */
.felt.rm-mode.rm-up .rm-mine { left: 4px; right: 4px; top: var(--up-ht); bottom: auto; display: block; }
.felt.rm-mode.rm-up .rm-hand { flex-wrap: wrap; align-items: flex-end; row-gap: 18px; column-gap: 8px; padding-top: 16px; }
.felt.rm-mode.rm-up .rm-glabel { top: -16px; font-size: 10.5px; }
/* (rummy.js computeUp) the shortest screens, as a last step: no group labels, so your cards clear your row */
.felt.rm-mode.rm-up .rm.up-nolabel .rm-hand { padding-top: 0; row-gap: 6px; }
.felt.rm-mode.rm-up .rm.up-nolabel .rm-glabel { display: none; }
.felt.rm-mode.rm-up .rm-row { position: absolute; left: 8px; right: 8px; top: var(--up-rt); margin: 0; justify-content: space-between; gap: 8px; }
.felt.rm-mode.rm-up .rm-me { min-width: 0; flex: 0 1 auto; }
.felt.rm-mode.rm-up .rm-me .rm-who .name { max-width: 110px; }
.felt.rm-mode.rm-up .rm-tools { flex-wrap: wrap; justify-content: flex-end; gap: 4px 6px; min-width: 0; }
.felt.rm-mode.rm-up .rm-count-line { font-size: 11px; white-space: nowrap; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
/* the clock and your buttons: full width at the bottom */
.felt.rm-mode.rm-up .rm-clock { position: absolute; left: 12px; right: 12px; top: var(--up-kt); width: auto; }
.felt.rm-mode.rm-up .rm-actions { position: absolute; left: 8px; right: 8px; top: var(--up-at); flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0;
  border-radius: 0; background: none; box-shadow: none; }
.felt.rm-mode.rm-up .rm-actions .btn { flex: 1 1 0; min-width: 6.5rem; min-height: 48px; padding: 0 0.5em; font-size: 1.02rem; }
.felt.rm-mode.rm-up .rm-actions .btn.small { flex: 0 1 auto; }
.felt.rm-mode.rm-up .rm-results { top: 50%; width: calc(100% - 16px); max-height: calc(100% - 120px); }
/* (upright the cards are too wide beside a name: each player's name and result on top, their cards under it, full width) */
.felt.rm-mode.rm-up .rm-res-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.3rem; }
.felt.rm-mode.rm-up .rm-res-net { grid-row: 1; grid-column: 2; }
.felt.rm-mode.rm-up .rm-res-cards { grid-row: 2; grid-column: 1 / -1; }

/* ---------- (Wave 2 U1 · T2, 11 Nov — the owner's pick) the home bar: the name, the bell and the Settings gear; your chips,
   your gold and three places for your flag, tier and city (empty until Waves 3–4). No Full screen button in its corner now
   (it is a switch in Settings) and no picture (it is the Me tab, M1). A wide screen keeps one line; an upright phone two. ---------- */
.home .home-top { padding-right: max(1rem, env(safe-area-inset-right)); }
.home-top .ht-break, .home-top .ht-gap { display: none; }
.home-top .brand-mini { order: 1; }
.home-top > .spacer { order: 2; }
#home-balance { order: 3; }
#home-gold-btn { order: 4; }
.ht-slots { order: 5; display: inline-flex; gap: 0.35rem; flex: none; }
#btn-bell { order: 6; }
#btn-settings { order: 7; }
.ht-slot { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; flex: none; border-radius: 50%; cursor: pointer;
  border: 1.5px dashed rgba(255, 214, 120, 0.55); background: transparent; color: rgba(255, 214, 120, 0.6); }
.ht-slot:hover { background: rgba(255, 214, 120, 0.08); }
.ht-slot .ic { width: 15px; height: 15px; }
@media (orientation: portrait) and (max-width: 700px) {
  /* (B1, 11 Nov) the screen already keeps the phone's status strip clear; the bar reaches up into it (its colour under
     the phone's own lights, like an app's bar) and its logo and buttons start under it — the strip was counted twice */
  #screen-rooms .home-top { flex-wrap: wrap; row-gap: 0.5rem; column-gap: 0.45rem; min-height: 0; margin-top: calc(-1 * env(safe-area-inset-top, 0px));
    padding: calc(0.55rem + env(safe-area-inset-top, 0px)) max(0.75rem, env(safe-area-inset-right)) 0.65rem max(0.75rem, env(safe-area-inset-left)); }
  #screen-rooms .home-top > * { order: 0; }
  #screen-rooms .home-top .ht-break { display: block; flex-basis: 100%; height: 0; }
  #screen-rooms .home-top .ht-gap { display: block; flex: 1; }
  #screen-rooms .brand-mini { gap: 0.5rem; font-size: 1.35rem; }
  #screen-rooms .brand-mini .wordmark { display: inline; }
  #screen-rooms .brand-mini .wordmark small { font-size: 0.8em; opacity: 0.85; }
  #screen-rooms .brand-mini .logo { width: 40px; }
  #screen-rooms .home-top .icon-btn { width: 2.55rem; height: 2.55rem; min-width: 0; min-height: 0; padding: 0; display: inline-grid; place-items: center; flex: none; font-size: 1rem; }
  #screen-rooms .home-top .icon-btn .ic { width: 1.3rem; height: 1.3rem; }
  #screen-rooms .coin-chip { min-height: 2.75rem; font-size: 1.2rem; padding: 0.15rem 0.9rem 0.15rem 0.25rem; }
  #screen-rooms .coin-chip .ic { width: 1.9rem; height: 1.9rem; }
}
/* the smallest phones (360 px and under): a little tighter, so chips, gold and the three places stay on one line */
@media (orientation: portrait) and (max-width: 374px) {
  #screen-rooms .home-top { column-gap: 0.35rem; padding-left: 0.6rem; padding-right: 0.6rem; }
  #screen-rooms .coin-chip { font-size: 1.08rem; padding-right: 0.75rem; }
  #screen-rooms .coin-chip .ic { width: 1.75rem; height: 1.75rem; }
  .ht-slots { gap: 0.25rem; }
}

/* ---------- (Wave 2 U2 · M1, 11 Nov — the owner's pick) your picture is the Me tab, with its frame; the owner: "make icon sizes
   align with player icon size" — every tab's icon is the picture's size (the Play disc keeps its own) ---------- */
.nav-tab .nav-av { display: inline-grid; place-items: center; flex: none; }
.nav-tab .nav-av .avatar { width: 1.5rem; height: 1.5rem; font-size: 0.66rem; box-shadow: 0 0 0 2px #1c0a10; }
.nav-tab .nav-av .avatar.av-char svg { width: 100%; height: 100%; }
.nav-tab.active .nav-av .avatar { box-shadow: 0 0 0 2px #1c0a10, 0 0 0 3.5px var(--gold); }
.nav-tab:not([data-tab=play]) > .ic { width: 1.5rem; height: 1.5rem; }
@media (orientation: portrait) and (max-width: 700px) {
  .nav-tab .nav-av .avatar { width: 30px; height: 30px; font-size: 0.8rem; }
  .nav-tab:not([data-tab=play]) > .ic { width: 30px; height: 30px; stroke-width: 1.85; }
  .nav-tab .dot { top: 0; }
}

/* ---------- (Wave 2 A5 · S1, 11 Nov — the owner's pick) Settings: its own page from the gear — one short grouped list; a row
   with a › opens its own small page. Under the rules pages and the questions (.help 60 / 80), over the home screen. ---------- */
.set-page { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; color: var(--ink); font-family: var(--font-ui);
  background: radial-gradient(120% 55% at 50% 0%, #4a1626 0%, #2a0b16 55%, #1c0710 100%); }
.sp-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sp-hd { display: flex; align-items: center; gap: 0.55rem; min-height: 58px; flex: none; box-sizing: border-box;
  padding: max(0.5rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) 0.5rem max(0.75rem, env(safe-area-inset-left));
  background: linear-gradient(180deg, rgba(77, 26, 44, 0.97), rgba(37, 11, 20, 0.97)); box-shadow: inset 0 -2px 0 rgba(255, 208, 64, 0.42), 0 6px 18px rgba(14, 1, 5, 0.5); }
.sp-hd h1 { margin: 0; font: 400 1.5rem/1 var(--font-display); color: var(--gold); text-shadow: 0 2px 0 rgba(60, 25, 0, 0.55); }
.sp-hd .btn.icon-btn { width: 2.55rem; height: 2.55rem; min-width: 0; min-height: 0; padding: 0; flex: none; }
.sp-bd { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 1rem; align-content: start;
  width: 100%; max-width: 560px; margin: 0 auto; box-sizing: border-box; padding: 0.85rem 0.8rem calc(1.4rem + env(safe-area-inset-bottom)); }
.sp-gh { margin: 0 0 0.4rem 0.45rem; font: 900 0.76rem/1.2 var(--font-ui); letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.sp-list { border-radius: 18px; background: rgba(255, 255, 255, 0.055); box-shadow: inset 0 0 0 1px var(--line-soft); overflow: hidden; }
.sp-row { display: flex; align-items: center; gap: 0.7rem; width: 100%; min-height: 52px; margin: 0; padding: 0.35rem 0.85rem; box-sizing: border-box;
  border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; background: transparent; color: var(--ink); font: 800 1rem/1.25 var(--font-ui);
  text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sp-list > .sp-row:first-child { border-top: 0; }
.sp-row:hover { background: rgba(255, 255, 255, 0.045); }
.sp-row:active { background: rgba(255, 255, 255, 0.09); }
.sp-row .ti { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 10px; background: var(--panel-hi); color: var(--gold); box-shadow: inset 0 0 0 1px var(--line); }
.sp-row .ti .ic { width: 18px; height: 18px; }
.sp-row .lb { flex: 1; min-width: 0; display: grid; }
.sp-row .lb small { margin-top: 0.1rem; font-weight: 700; font-size: 0.8rem; line-height: 1.25; color: var(--muted); }
.sp-row .v { min-width: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-weight: 700; font-size: 0.9rem; }
.sp-row .ch { margin-left: 0.1rem; color: var(--muted); font-weight: 900; font-size: 1.25rem; line-height: 1; }
.sp-row .ch-ic { width: 18px; height: 18px; color: var(--muted); }
.sp-row.red, .sp-row.red .ti { color: var(--lose); }
.sp-row.gold .lb { color: var(--gold); }
.sp-row .switch { flex: none; }
#sp-fid .v { font-family: ui-monospace, Consolas, monospace; letter-spacing: 0.03em; }
.sp-bd .set-sec { gap: 0.6rem; }
.sp-bd .set-sec .sp-list { margin-top: 0.2rem; }

/* ---------- (Wave 2 P1 + G3 + G2, 11 Nov — the owner's picks) Safety. Someone's card is a sheet from the bottom (a grab
   handle on top; at most 560 px wide on a big screen), Report and Block in plain sight under its buttons. The report sheet
   (one reason, a few words, also block) and the bug sheet (a few words, a picture of the screen, what goes with it). ---------- */
@keyframes sheet-up { from { transform: translateY(40%); opacity: 0.4; } to { transform: none; opacity: 1; } }
#profile-sheet { align-items: flex-end; }
#profile-sheet .profile-card { width: min(560px, 100vw); max-width: none; max-height: 88vh; box-sizing: border-box; border-radius: 26px 26px 0 0; border-bottom: 0;
  padding: 1.55rem max(1.3rem, env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) max(1.3rem, env(safe-area-inset-left)); }
#profile-sheet .profile-card::before { content: ''; position: absolute; top: 0.55rem; left: 50%; width: 44px; height: 5px; margin-left: -22px; border-radius: 9px; background: rgba(255, 255, 255, 0.25); }
#profile-sheet:not(.hidden) > .profile-card { animation: sheet-up 0.24s cubic-bezier(.2, .9, .3, 1); }
#profile-sheet .help-x { top: 0.9rem; }
.ps-slots { display: flex; gap: 0.35rem; margin-top: 0.4rem; }
.ps-slots .ht-slot { cursor: default; }
.ps-slots .ht-slot:hover { background: transparent; }
.ps-blocked { margin: 0; padding: 0.5rem 0.75rem; border-radius: 12px; font-size: 0.9rem; line-height: 1.4; color: #ffd2d2;
  background: rgba(255, 90, 90, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 110, 110, 0.38); }
.ps-safety { display: flex; justify-content: center; gap: 0.5rem; margin-top: 0.1rem; padding-top: 0.65rem; border-top: 1px solid var(--line-soft); }
.ps-safety .btn { color: var(--lose); }

.safety-sheet .help-card { display: grid; gap: 0.7rem; width: min(460px, 94vw); box-sizing: border-box; }
.safety-sheet h2 { margin: 0; padding-right: 2.6rem; overflow-wrap: anywhere; }
.safety-sheet p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.4; }
.safety-sheet textarea { width: 100%; box-sizing: border-box; min-height: 6.2rem; resize: none; padding: 0.65rem 0.75rem; border-radius: 14px;
  border: 1px solid var(--line); background: var(--panel-lo); color: var(--ink); font: 700 1rem/1.35 var(--font-ui); }
.safety-sheet textarea.short { min-height: 4rem; }
.safety-sheet textarea::placeholder { color: rgba(232, 200, 180, 0.6); }
.safety-sheet textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.safety-sheet .set-row { min-height: 2.6rem; }
.safety-sheet .sheet-foot .gold { flex: 1; }
.why-pick { display: grid; gap: 0.4rem; }
.why-pick button { display: flex; align-items: center; gap: 0.6rem; min-height: 2.9rem; padding: 0 0.85rem; border-radius: 12px; border: 1.5px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.04); color: var(--ink); font: 800 0.98rem/1.2 var(--font-ui); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.why-pick button:hover { background: rgba(255, 255, 255, 0.07); }
.why-pick button i { width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--muted); flex: none; }
.why-pick button.on { border-color: var(--gold); background: rgba(255, 208, 64, 0.1); }
.why-pick button.on i { border-color: var(--gold); box-shadow: inset 0 0 0 3px var(--panel-solid); background: var(--gold); }
.auto-list { display: grid; gap: 0.35rem; padding: 0.6rem 0.75rem; border-radius: 14px; background: rgba(255, 255, 255, 0.05); font-size: 0.86rem; line-height: 1.3; }
.auto-list b { color: var(--gold); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }
.auto-list > span { display: flex; gap: 0.45rem; align-items: center; color: var(--ink-2); font-weight: 700; }
.auto-list .ic { width: 16px; height: 16px; color: var(--muted); flex: none; }
/* the picture of the screen: a small copy beside the switch (a soft pulse while it's being made) */
.shot-row { flex-wrap: nowrap; }
.shot-thumb { flex: none; height: 46px; max-width: 64px; border-radius: 7px; object-fit: cover; box-shadow: 0 0 0 1px var(--line), 0 2px 6px rgba(0, 0, 0, 0.4); }
.shot-thumb:not([src]) { width: 26px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px var(--line-soft); }
.shot-row.busy .shot-thumb { animation: netpulse 1.1s ease-in-out infinite; }
/* the Blocked players page */
.blocked-list { display: grid; gap: 0.5rem; }
/* a table on a wide screen has no ··· menu (its buttons sit in the bar): Report a bug is in Settings there */
.felt:not(.tall) #btn-bug { display: none; }

/* the admin console: Reports */
.tab-n { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; margin-left: 0.25rem; padding: 0 0.3rem; box-sizing: border-box; border-radius: 999px;
  background: var(--red, #e5484d); color: #fff; font-size: 0.72rem; font-weight: 900; line-height: 1; vertical-align: 0.1em; }
.dv-reports { display: grid; gap: 0.6rem; }
.rep-card { display: grid; gap: 0.5rem; padding: 0.75rem 0.85rem; border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1.5px solid rgba(255, 214, 120, 0.25); }
.rep-card.done { opacity: 0.62; border-color: var(--line-soft); }
.rep-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; font-size: 0.86rem; color: var(--muted); font-weight: 800; }
.rep-kind { padding: 0.12rem 0.5rem; border-radius: 999px; font-size: 0.74rem; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; }
.rep-kind.player { background: rgba(255, 90, 90, 0.2); color: #ffb4b4; }
.rep-kind.bug { background: rgba(255, 208, 64, 0.18); color: var(--gold); }
.rep-done { margin-left: auto; color: var(--win); }
.rep-who { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }
.rep-arrow { color: var(--muted); font-weight: 900; }
.rep-reason { color: #ffb4b4; font-weight: 800; }
.rep-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); font-size: 0.95rem; line-height: 1.4; }
.rep-meta { display: grid; gap: 0.15rem; color: var(--muted); font-size: 0.82rem; font-weight: 700; overflow-wrap: anywhere; }
.rep-chat { display: grid; gap: 0.15rem; max-height: 14rem; overflow-y: auto; padding: 0.45rem 0.6rem; border-radius: 12px; background: rgba(0, 0, 0, 0.22); font-size: 0.86rem; }
.rep-line { overflow-wrap: anywhere; }
.rep-line b { margin-right: 0.35rem; color: var(--ink-2); }
.rep-line span { color: var(--muted); }
.rep-line.mine { margin: 0 -0.3rem; padding: 0 0.3rem; border-radius: 6px; background: rgba(255, 90, 90, 0.16); }
.rep-line.mine span { color: #ffd2d2; }
.rep-acts { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.rep-pic:empty { display: none; }
.rep-shot { display: block; max-width: 100%; max-height: 50vh; border-radius: 10px; cursor: zoom-in; box-shadow: 0 0 0 1px var(--line); }
.rep-shot.big { max-height: none; width: 100%; cursor: zoom-out; }
@media (prefers-reduced-motion: reduce) {
  #profile-sheet:not(.hidden) > .profile-card, .shot-row.busy .shot-thumb { animation: none; }
}

/* ---------- (Wave 2 W1 + L2, 11 Nov — the owner's picks) A wide screen: the page is a frame (shell.js) — the game in an
   upright phone-sized column in the middle (full height, 390:844, 360–480 px wide), night and gold around it: the lattice,
   the stamp logo on the left, the three games on the right (each side only when there is room for it). A phone held
   sideways: one clear note over the game until it is turned upright (not over the admin's console). ---------- */
html.shell, html.shell body { height: 100%; margin: 0; padding: 0; overflow: hidden; background: #12050a; }
html.shell body > :not(#shell) { display: none !important; }
#shell { --col: min(100vw, clamp(360px, calc(100dvh * 390 / 844), 480px)); position: fixed; inset: 0; z-index: 10; display: grid; grid-template-columns: 1fr var(--col) 1fr;
  background: radial-gradient(40% 60% at 50% 45%, rgba(255, 226, 150, 0.16), transparent 70%), radial-gradient(60% 80% at 50% 50%, #4a1626 0%, #2a0b16 55%, #12050a 100%); }
#shell::before { content: ''; position: absolute; inset: 0; background-image: var(--lattice); opacity: 0.55; pointer-events: none; }
.sh-col { position: relative; z-index: 1; grid-column: 2; height: 100%;
  box-shadow: 0 0 0 1px rgba(255, 214, 120, 0.55), 0 0 0 5px rgba(28, 7, 16, 0.9), 0 0 0 6px rgba(255, 214, 120, 0.25), 0 0 60px 10px rgba(0, 0, 0, 0.65); }
.sh-col iframe { display: block; width: 100%; height: 100%; border: 0; background: #1c0710; }
.sh-cell { position: relative; z-index: 1; display: grid; place-items: center; min-width: 0; container-type: inline-size; }
.sh-brand { display: grid; justify-items: center; gap: 0.6rem; text-align: center; color: var(--gold); }
.sh-brand img { width: clamp(100px, 11vw, 150px); height: auto; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.6)); }
.sh-brand b { font: 400 clamp(1.7rem, 2.4vw, 2.3rem)/1 var(--font-display); text-shadow: 0 3px 0 rgba(60, 25, 0, 0.6); }
.sh-brand small { margin: -0.2rem -0.5em 0 0; font: 900 0.95rem/1 var(--font-ui); letter-spacing: 0.5em; color: var(--gold-hi); }
.sh-games { display: grid; gap: 1rem; font: 400 clamp(1.35rem, 1.9vw, 1.75rem)/1.2 var(--font-display); color: var(--ink-2); }
.sh-games span { display: flex; align-items: center; gap: 0.6rem; }
.sh-games i { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.sh-games small { max-width: 12rem; color: var(--muted); font: 800 1rem/1.3 var(--font-ui); }
@container (max-width: 230px) { .sh-brand, .sh-games { display: none; } }
#turn-up { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  html:not(.shell) #turn-up { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-content: center; justify-items: center; gap: 0.9rem; padding: 1rem;
    text-align: center; background: radial-gradient(40% 60% at 50% 45%, rgba(255, 226, 150, 0.16), transparent 70%), radial-gradient(60% 80% at 50% 50%, #4a1626 0%, #2a0b16 55%, #12050a 100%); }
  html:not(.shell) body:has(#screen-dev:not(.hidden)) #turn-up { display: none; }
}
#turn-up::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: var(--lattice); opacity: 0.55; }
#turn-up svg { width: 120px; height: 90px; }
#turn-up b { color: var(--gold); font: 400 2rem/1.1 var(--font-display); text-shadow: 0 3px 0 rgba(60, 25, 0, 0.6); }
#turn-up span { color: var(--muted); font: 700 1rem/1.35 var(--font-ui); }
/* (Wave 2 B1, 11 Nov) the table's bar on an upright phone: the felt ignores the screen's padding, so the bar itself keeps
   the phone's status strip (a notch or camera hole in full screen) — its colour fills it, the back button and ··· sit
   under it (they sat in it, under the phone's own lights). The seats follow: computeUpright measures the bar. */
.felt.tall .table-top { min-height: calc(58px + env(safe-area-inset-top, 0px)); padding-top: calc(0.4rem + env(safe-area-inset-top, 0px)); }
@media (max-height: 600px) {
  .felt.tall .table-top { min-height: calc(42px + env(safe-area-inset-top, 0px)); padding-top: calc(0.1rem + env(safe-area-inset-top, 0px)); }
}

/* ---------- (Wave 3 A9/A10/G1, 11 Nov) the flag you play for, your birth city, invite friends ---------- */
.flag { font-family: 'Flags', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; font-weight: 400; line-height: 1; }
.ht-slot.filled { border-style: solid; border-color: rgba(255, 214, 120, 0.75); background: rgba(255, 214, 120, 0.1); overflow: hidden; }
.ht-slot.filled .flag { font-size: 1.15rem; }
/* the line under your name on Me: the flag, the country, where you were born — or the way to pick them */
.pf-identity { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; justify-self: start; align-self: start; margin-top: 0.15rem;
  padding: 0.3rem 0.7rem; border-radius: 16px; border: 1.5px solid rgba(255, 214, 120, 0.35); background: rgba(255, 214, 120, 0.08);
  color: var(--ink); font: 800 0.9rem var(--font-ui); cursor: pointer; text-align: left; }
.pf-identity.hidden { display: none; }
.pf-identity.empty { border-style: dashed; color: var(--gold); }
.pf-identity .flag { font-size: 1.15rem; }
.pf-identity .pf-born { flex-basis: 100%; color: var(--ink-2); font-weight: 700; } /* its own line: no dangling "·" when the line wraps */
.pf-identity .pf-id-pick { color: var(--gold); }
/* "Who are you?" */
.id-card { width: min(440px, 94vw); gap: 0.7rem; max-height: min(92vh, 720px); overflow-y: auto; }
.id-card .fld > select { width: 100%; min-height: 2.75rem; padding: 0.55em 0.9em; border-radius: var(--radius-m); border: 1.5px solid var(--line-soft); cursor: pointer;
  background: var(--panel-lo); color: var(--ink); font: inherit; font-weight: 700; outline: none; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.32); color-scheme: dark; }
.id-card .fld > select:focus { border-color: var(--gold); }
.id-card select option, .id-card select optgroup { background: #2a151b; color: var(--ink); }
.id-now { padding: 0.45rem 0.75rem; border-radius: var(--radius-m); background: var(--panel-lo); color: var(--ink); font-weight: 800; }
.id-now .flag { font-size: 1.25rem; vertical-align: -0.12em; }
.id-now small { color: var(--muted); font-weight: 700; }
.id-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.3rem; max-height: 210px; overflow-y: auto;
  padding: 0.35rem; border-radius: var(--radius-m); background: var(--panel-lo); overscroll-behavior: contain; }
.id-now.hidden, .id-list.hidden, .id-card input.hidden, .id-card select.hidden, .id-card .id-note.hidden, .id-card .btn.hidden { display: none; }
.id-flag { display: flex; align-items: center; gap: 0.45rem; min-height: 2.4rem; padding: 0.3rem 0.5rem; border-radius: 10px; cursor: pointer;
  border: 1.5px solid transparent; background: transparent; color: var(--ink); font: 700 0.88rem var(--font-ui); text-align: left; }
.id-flag:hover { background: rgba(255, 214, 120, 0.08); }
.id-flag.on { border-color: var(--gold); background: rgba(255, 214, 120, 0.16); }
.id-flag .flag { font-size: 1.3rem; flex: none; }
.id-none { margin: 0.4rem; color: var(--muted); }
.id-card .id-note { font-size: 0.85rem; color: var(--muted); }
.id-card .msg:empty { display: none; }
/* Invite friends (on Me) */
.invite-card { display: grid; gap: 0.55rem; padding: 0.9rem 1.05rem; border-radius: 18px;
  background: linear-gradient(180deg, #2c3d33, #16241c); border: 1.5px solid rgba(120, 220, 170, 0.35); }
.invite-card.hidden { display: none; }
.invite-card h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; color: var(--ink); }
.invite-card .hint { margin: 0; }
.inv-code { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; }
.inv-code .pid { font-size: 1.35rem; padding: 0.2rem 0.65rem; border-radius: 10px; background: rgba(0, 0, 0, 0.3); cursor: text; user-select: all; }
.inv-list { display: grid; gap: 0.3rem; }
.invite-card .inv-row { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.4rem 0.65rem; border-radius: 10px; background: rgba(0, 0, 0, 0.22); font-size: 0.9rem; }
.invite-card .inv-row span { color: var(--muted); font-weight: 700; text-align: right; }
.invite-card .inv-row.paid span { color: #8fe0a8; }
.invite-card .inv-row.refused span { color: #ffb3b3; }
/* (Wave 3) the admin's invite-rewards fields; a player's flag among their tags */
.dv-ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.5rem 0.75rem; margin: 0.5rem 0; }
.admin-card .dv-ref-grid input.num-in { width: 100%; }
.member-row .tag.flag { background: none; padding: 0; font-size: 1.05rem; }

/* ---------- (Wave 4, 11 Nov) VIP tiers and gold gifts — vip-view.js, docs/VIP.md ---------- */
/* the tier badge (badges/vip.svg 64×28, badges/vvip.svg 80×28): sized by its height, wherever it sits */
.tier-badge { display: inline-block; flex: none; height: 15px; width: auto; vertical-align: middle; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.55)); }
.person-name .tier-badge { height: 14px; }
.tp-lv .tier-badge { height: 13px; margin-left: 0.35rem; vertical-align: -2px; }
.tier-badge.slot { height: 18px; }
.tier-badge.head { height: 20px; }
.tier-badge.plan { height: 30px; }
.tier-badge.status { height: 22px; }
.tier-badge.banner { height: 30px; }
/* the tier place in the top bar: an empty "VIP" circle for Regular, the badge in a pill for VIP / VVIP */
.ht-slot.tier-none .tier-txt { font-size: 0.56rem; font-weight: 900; letter-spacing: 0.02em; line-height: 1; }
.ht-slot.tier-on { width: auto; min-width: 30px; padding: 0 5px; border-radius: 999px; overflow: visible; }
#ps-tier.tier-on { cursor: default; }
/* the VIP and VVIP rings (frames/vip.svg, frames/vvip.svg) — the server sends them as the frame while the days run */
.avatar-wrap[data-frame=vip]::after { background-image: url(frames/vip.svg); }
.avatar-wrap[data-frame=vvip]::after { background-image: url(frames/vvip.svg); }
/* a VVIP's name shines gold on their plate */
:is(.plate, .pk-plate, .rm-plate):has(.avatar-wrap[data-frame=vvip]) .name { color: var(--gold); text-shadow: 0 0 6px rgba(255, 200, 50, 0.55); }

/* the VIP page and the Shop's VIP block */
#vip-sheet .vip-card { max-width: 560px; }
.vip-why { margin: 0; padding: 0.55rem 0.8rem; border-radius: 12px; background: rgba(255, 210, 74, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 210, 74, 0.45); font-weight: 800; color: #ffe9a8; }
.vip-why.hidden { display: none; }
.vip-block { display: grid; gap: 0.6rem; }
.vip-status { display: flex; align-items: center; gap: 0.5rem; font-weight: 800; }
.vip-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.86rem; border-radius: 14px; overflow: hidden; background: rgba(0, 0, 0, 0.22); }
.vip-table th, .vip-table td { padding: 0.38rem 0.45rem; text-align: center; border-bottom: 1px solid var(--line-soft); }
.vip-table tbody tr:last-child > * { border-bottom: none; }
.vip-table th.vt-what { text-align: left; font-weight: 700; color: var(--muted); width: 40%; }
.vip-table thead th { vertical-align: bottom; }
.vip-table .vt-regular { font-weight: 900; font-size: 0.82rem; color: #e9dccf; }
.vip-table .vt-you { display: block; font-size: 0.66rem; font-weight: 900; color: var(--gold); text-transform: uppercase; letter-spacing: 0.04em; }
.vip-table .now { background: rgba(255, 210, 74, 0.1); }
.vip-table td.yes { color: #8fe0a8; font-weight: 900; }
.vip-table td.no { color: rgba(255, 255, 255, 0.35); }
.vip-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
.vip-plan { display: grid; justify-items: center; align-content: start; gap: 0.3rem; padding: 0.7rem 0.6rem; border-radius: 16px; text-align: center;
  background: linear-gradient(180deg, rgba(255, 210, 74, 0.12), rgba(0, 0, 0, 0.2)); box-shadow: inset 0 0 0 1px rgba(255, 210, 74, 0.35); }
.vip-plan.vvip { background: linear-gradient(180deg, rgba(220, 40, 60, 0.22), rgba(0, 0, 0, 0.22)); box-shadow: inset 0 0 0 1.5px rgba(255, 200, 50, 0.6); }
.vip-plan .vp-days { font-size: 1.05rem; }
.vip-plan .vp-note { color: var(--muted); font-size: 0.76rem; line-height: 1.3; min-height: 2.6em; }
.vip-plan .btn { margin-top: 0.15rem; }
#shop-vip { margin-bottom: 0.4rem; }
@media (max-width: 380px) { .vip-plans { grid-template-columns: 1fr; } .vip-table { font-size: 0.78rem; } }

/* a player's card at the table: the gift strip */
.tp-gifts { border-top: 1px solid var(--line-soft); padding-top: 0.45rem; }
.tp-gifts.hidden { display: none; }
.gift-strip { display: grid; gap: 0.4rem; }
.gs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.gs-title { font-size: 0.86rem; font-weight: 900; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-gold { flex: none; font-size: 0.72rem; font-weight: 800; color: var(--muted); }
.gs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.gs-gift { position: relative; display: grid; justify-items: center; gap: 1px; padding: 4px 2px 3px; border-radius: 11px; cursor: pointer; font: inherit; color: #fff;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 214, 120, 0.18); }
.gs-gift img { width: 26px; height: 26px; }
.gs-gift .gs-price { font-size: 0.66rem; font-weight: 900; color: #ffe08a; line-height: 1.1; }
.gs-gift:hover, .gs-gift:focus-visible { background: rgba(255, 210, 74, 0.16); }
.gs-gift.on { background: rgba(255, 210, 74, 0.26); border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.gs-gift.locked img { opacity: 0.45; filter: grayscale(0.6); }
.gs-gift .gs-lock { position: absolute; top: -5px; right: -4px; padding: 0 4px; border-radius: 6px; font-style: normal; font-size: 0.56rem; font-weight: 900;
  color: #3a0c16; background: linear-gradient(180deg, #ffe58a, #e0a420); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.gs-send { width: 100%; }
.gs-send:disabled { opacity: 0.55; cursor: default; }

/* a gold gift flying across the felt, and the sparkle when it lands */
.flygift.gold-gift { font-size: 0; }
.flygift.gold-gift img { display: block; width: 42px; height: 42px; }
.burst.spark { width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: radial-gradient(circle, #fff9d6 0 30%, #ffd040 55%, rgba(255, 208, 64, 0) 72%);
  filter: drop-shadow(0 0 4px rgba(255, 220, 110, 0.9)); }

/* a VVIP sat down: a banner across the table */
.vvip-banner { position: absolute; left: 50%; top: 22%; z-index: 43; display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 1.1rem; border-radius: 999px; pointer-events: none;
  white-space: nowrap; max-width: 92%; color: #fff; background: linear-gradient(90deg, rgba(120, 10, 30, 0.92), rgba(70, 6, 20, 0.95));
  box-shadow: 0 0 0 2px rgba(255, 200, 50, 0.85), 0 8px 26px rgba(0, 0, 0, 0.55), 0 0 22px rgba(255, 200, 50, 0.45);
  animation: vvipin 4.2s ease-in-out forwards; }
.vvip-banner .vb-name { color: var(--gold); font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; }
.vvip-banner .vb-txt { font-weight: 800; }
@keyframes vvipin { 0% { transform: translate(-50%, -14px) scale(0.85); opacity: 0; } 10% { transform: translate(-50%, 0) scale(1.04); opacity: 1; }
  16% { transform: translate(-50%, 0) scale(1); } 85% { opacity: 1; } 100% { transform: translate(-50%, -6px) scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .vvip-banner { animation: none; transform: translateX(-50%); } }

/* the chat for a Regular player: a row of plain emoji; the character emotes show locked (a tap opens the VIP page) */
.emoji-row { display: flex; flex-wrap: wrap; gap: 3px; flex: none; }
.emoji-row.hidden { display: none; }
.emoji-btn { flex: 1 0 calc(16.66% - 3px); min-width: 30px; padding: 3px 0; border-radius: 10px; cursor: pointer; font-size: 1.2rem; line-height: 1.2;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 214, 120, 0.18); }
.emoji-btn:hover, .emoji-btn:focus-visible { background: rgba(255, 210, 74, 0.2); }
.emote-tile.locked { position: relative; }
.emote-tile.locked .emote-art, .emote-tile.locked small { opacity: 0.42; filter: grayscale(0.5); }
.emote-lock { position: absolute; top: 2px; right: 2px; padding: 0 3px; border-radius: 5px; font-style: normal; font-size: 0.52rem; font-weight: 900; line-height: 1.4;
  color: #3a0c16; background: linear-gradient(180deg, #ffe58a, #e0a420); }