/* Poncler: card-room palette of oxblood felt, walnut and brass. Single dark theme by design. */
/* The type and corner scales: every text size and corner radius comes from these steps (tiny HUD and card text
   below 11 px and display sizes above 30 px are set where they're used). */
:root {
  --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-base: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px;
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;
  color-scheme: dark;
  --room: #140d0b;
  --room-2: #1d1310;
  --panel: #221612;
  --panel-2: #2a1b16;
  --rail-hi: #5b3526;
  --rail-lo: #2a1610;
  --felt: #6e2130;
  --felt-hi: #8a2a3b;
  --felt-deep: #3f0f19;
  --brass: #d4ab5e;
  --brass-dim: #8c6f3c;
  --ivory: #f5efe2;
  --ivory-2: #e3d8c2;
  --ink: #1f1613;
  --text: #efe5d7;
  --muted: #a99183;
  --line: #ffffff17;
  --line-2: #ffffff2a;
  --good: #7cc495;
  --bad: #ef7b80;
  --warn: #e8b04f;
  --chip-red: #b7372f;
  --chip-blue: #2e5a96;
  --chip-black: #2a2422;
  --win: #ecc874;
  /* Poncler Pro's own colour: its ads and offers are purple */
  --pro: #8a5cd6; --pro-deep: #2a1745;
  /* GTO action colours (raise, all-in, call, check, fold), as solver charts use them */
  --gto-raise: #cf5a43; --gto-allin: #8f1f2a; --gto-call: #5fae7e; --gto-check: #6f8f80; --gto-fold: #3f5d7d;
  --focus: #f0d38a;
  /* Page widths: every page, the guides and reading pages, and the game table */
  --page-w: 1180px; --read-w: 980px; --wide-w: 1500px;
  --side-w: 236px;
  --top-h: 64px;
  --display: "Limelight", "Noto Serif Display", "Didot", Georgia, serif; /* (Limelight has no Cyrillic or Greek: those letters come from Noto) */
  --serif: "Bodoni Moda", "Didot", Georgia, serif;
  --sans: "Familjen Grotesk", "Segoe UI", system-ui, sans-serif;
}
/* Card faces: two- or four-color, light or dark */
body[data-deck="4"] { --suit-d: #1f5fb4; --suit-c: #1c7a3a; }
body[data-face="dark"] {
  --face-hi: #36312e; --face: #272321; --face-lo: #1c1917; --face-edge: #ffffff2b; --back-edge: #2c2725;
  --suit-s: #f2ece0; --suit-h: #ff7276; --suit-d: #ff7276; --suit-c: #f2ece0; --suit-j: #c9a2ff;
}
body[data-face="dark"][data-deck="4"] { --suit-d: #62adff; --suit-c: #55d683; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body { color: var(--text); font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--brass); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
/* Two title sizes inside a page: a section's h2 (17 px) and a card's h3 (15 px); display headings keep their own. */
h2 { font-size: var(--fs-lg); font-weight: 600; }
h3 { font-size: var(--fs-base); font-weight: 700; }
p { margin: 0; }
.boot { padding: 80px 16px; color: var(--muted); text-align: center; line-height: 2; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.good { color: var(--good); }
.bad { color: var(--bad); }
.eyebrow { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.wordmark { font-family: var(--display); color: var(--brass); font-weight: 400; letter-spacing: .01em; line-height: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Shell ---------- */
.shell { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 960px) { .shell { grid-template-columns: var(--side-w) minmax(0, 1fr); } }
.side {
  display: none; position: sticky; top: 0; height: 100vh; flex-direction: column; gap: 6px;
  padding: 18px 14px 14px; border-right: 1px solid var(--line); background: #120b0acc;
}
@media (min-width: 960px) { .side { display: flex; } }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-mark { display: block; width: auto; height: 32px; }
.side .brand { padding: 2px 8px 18px; }
.side .brand-mark { height: 42px; }
.side .wordmark { font-size: var(--fs-3xl); }
.side nav { display: grid; gap: 2px; }
.nav-link {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--r-md); color: var(--ivory-2); font-weight: 500;
  border: 1px solid transparent;
}
.nav-link svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.nav-link:hover { background: #ffffff08; text-decoration: none; }
.nav-link[aria-current="page"] { background: #d4ab5e14; border-color: #d4ab5e3d; color: var(--brass); }
.nav-link[aria-current="page"] svg { color: var(--brass); }
.nav-link .count { min-width: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--chip-red); color: #fff; font-size: var(--fs-2xs); font-weight: 700; text-align: center; }
.side .spacer { flex: 1; }
.side-user { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--r-md); background: #ffffff08; border: 1px solid var(--line); }
.side-user .who { min-width: 0; display: grid; }
.side-user .who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.side-user .who span { font-size: var(--fs-xs); color: var(--muted); }

.main { min-width: 0; display: flex; flex-direction: column; }
.top {
  position: sticky; top: 0; z-index: 40; height: var(--top-h); padding: env(safe-area-inset-top, 0px) 16px 0;
  display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); background: #140d0bec; backdrop-filter: blur(8px);
}
.top .brand-mark { height: 30px; }
.top .wordmark { font-size: var(--fs-2xl); }
@media (min-width: 960px) { .top .top-brand { display: none; } .top { padding-inline: 28px; } }
@media (max-width: 480px) { .top [data-sound] { display: none; } .top { gap: 8px; } }
.top .grow { flex: 1; }
.balance-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: var(--r-pill); cursor: pointer;
  background: #d4ab5e14; border: 1px solid #d4ab5e4d; color: var(--brass); font-weight: 600; font-variant-numeric: tabular-nums;
}
.balance-pill svg { width: 16px; height: 16px; }
.icon-btn {
  position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-md); cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--ivory-2);
}
.icon-btn:hover { border-color: var(--line-2); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn .dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--chip-red); box-shadow: 0 0 0 2px var(--room); }
.page { width: 100%; max-width: var(--page-w); margin: 0 auto; padding-inline: 16px; padding-block: 24px 96px; display: grid; gap: 22px; align-content: start; }
@media (min-width: 960px) { .page { padding-inline: 28px; padding-block: 28px 48px; } }
.page.wide { max-width: var(--wide-w); } /* (only where the game table fills the window) */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; }
.page-head h1 { font-size: clamp(26px, 3.2vw, 34px); font-weight: 700; letter-spacing: -.01em; }
.page-head p { color: var(--muted); margin-top: 4px; max-width: 60ch; }

.tabbar {
  position: fixed; inset: auto 0 0 0; z-index: 50; display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); background: #120b0af2; border-top: 1px solid var(--line); backdrop-filter: blur(8px);
}
@media (min-width: 960px) { .tabbar { display: none; } }
.tabbar a { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border-radius: var(--r-md); color: var(--muted); font-size: var(--fs-2xs); font-weight: 600; }
.tabbar a svg { width: 21px; height: 21px; }
.tabbar a[aria-current="page"] { color: var(--brass); }
.tabbar a:hover { text-decoration: none; }

/* ---------- Building blocks ---------- */
.panel { background: linear-gradient(#24171380, #1a110ecc); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; min-width: 0; }
.section-title { font-size: var(--fs-lg); font-weight: 600; margin: 0; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.grid-2 { display: grid; gap: 18px; }
@media (min-width: 880px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grid-3 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.stack { display: grid; gap: 14px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.row.end { justify-content: flex-end; }
.row.between { justify-content: space-between; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 16px; border-radius: var(--r-md);
  border: 1px solid transparent; font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: filter .15s ease, transform .1s ease, opacity .15s ease, border-color .15s ease;
}
.btn:hover:not(:disabled) { filter: brightness(1.08); text-decoration: none; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn svg { width: 17px; height: 17px; }
.btn.primary { background: var(--brass); color: var(--ink); }
.btn.light { background: var(--ivory); color: var(--ink); }
.btn.ghost { background: transparent; border-color: var(--line-2); color: var(--text); }
.btn.ghost:hover:not(:disabled) { border-color: #ffffff4d; }
.btn.danger { background: transparent; border-color: #ef7b8066; color: var(--bad); }
.btn.small { min-height: 34px; padding: 6px 12px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
/* The one big button: the page's main call to action (the dashboard's Play, the landing page's two) */
.btn.big { min-height: 52px; padding: 14px 26px; gap: 10px; font-size: var(--fs-lg); border-radius: var(--r-lg); }
.btn.big svg { width: 20px; height: 20px; }
.btn.block { width: 100%; }
.link-btn { background: none; border: 0; padding: 0; color: var(--brass); cursor: pointer; font-weight: 600; font-size: var(--fs-md); }
/* (a panel's "see all" link: the same size and weight as a text button, always with its arrow) */
.panel-head > a:not(.btn) { font-size: var(--fs-md); font-weight: 600; white-space: nowrap; }

.field { display: grid; gap: 6px; min-width: 0; }
.field > span, .field > label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.field small { color: var(--muted); font-size: var(--fs-xs); }
.input, select.input, textarea.input {
  width: 100%; padding: 11px 13px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: #0d0807; color: var(--text);
  font-size: var(--fs-base);
}
textarea.input { resize: vertical; min-height: 90px; }
/* (one height for every one-line field, whether an input or a select, so a row of them lines up) */
input.input, select.input { box-sizing: border-box; height: 44px; padding-block: 0; line-height: 1.2; }
.input:focus { border-color: var(--brass-dim); outline: none; box-shadow: 0 0 0 3px #d4ab5e26; }
.input.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--fs-sm); }
.form { display: grid; gap: 16px; }
.form-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.error-text { color: var(--bad); font-size: var(--fs-sm); min-height: 1.2em; }

/* Segmented choices: one size everywhere (.seg.mini: as wide as its choices, 6/10 padding, 13 px) */
.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.seg label { position: relative; display: grid; gap: 1px; padding: 6px 10px; border-radius: var(--r-md); border: 1px solid var(--line-2); text-align: center; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label b { font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.seg label small { font-size: var(--fs-2xs); color: var(--muted); }
.seg label:has(input:checked) { background: var(--brass); border-color: transparent; color: var(--ink); }
.seg label:has(input:checked) small { color: #1f1613b3; }
.seg label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

.switch { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; }
.switch > span:first-child { display: grid; font-weight: 600; }
.switch small { font-weight: 400; font-size: var(--fs-sm); color: var(--muted); }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.track { flex: none; position: relative; width: 40px; height: 23px; border-radius: var(--r-pill); background: #ffffff26; transition: background .15s ease; }
.track::after { content: ""; position: absolute; left: 3px; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--ivory); transition: translate .15s ease; }
.switch input:checked + .track { background: var(--brass); }
.switch input:checked + .track::after { translate: 17px 0; }
.switch input:focus-visible + .track { outline: 2px solid var(--focus); outline-offset: 2px; }

.tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-md); background: #0000004d; border: 1px solid var(--line); }
.tabs a, .tabs button { padding: 7px 14px; border-radius: var(--r-sm); color: var(--ivory-2); font-weight: 600; font-size: var(--fs-md); background: none; border: 0; cursor: pointer; }
.tabs a:hover { text-decoration: none; }
.tabs [aria-current="page"], .tabs [aria-selected="true"] { background: var(--panel-2); color: var(--brass); box-shadow: inset 0 0 0 1px #d4ab5e33; }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; border: 1px solid var(--line-2); color: var(--ivory-2); white-space: nowrap; }
/* Three pills carry a colour, each one meaning: a cash game blue, friendly green, ranked (competitive) brass. Every other
   pill is neutral, whatever it says (good, bad, warn and brass on a pill no longer colour it). All are 12 px. */
.pill.cash { color: #8fb2f5; border-color: #5b8ff066; }
.pill.friendly { color: var(--good); border-color: #7cc49566; }
.pill.ranked { color: var(--brass); border-color: #d4ab5e66; }
.online-dot { width: 9px; height: 9px; border-radius: 50%; background: #5b4a42; flex: none; }
.online-dot.on { background: var(--good); box-shadow: 0 0 0 3px #7cc49526; }

.avatar {
  flex: none; display: inline-grid; place-items: center; overflow: hidden; border-radius: 50%; width: var(--s, 36px); height: var(--s, 36px);
  background: var(--felt); color: var(--ivory); font: 700 calc(var(--s, 36px) * .46) / 1 var(--serif); box-shadow: inset 0 0 0 2px #d4ab5e55;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.list { display: grid; }
.list-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); min-width: 0; }
.list-item:first-child { border-top: 0; }
.list-item .grow { flex: 1; min-width: 0; }
.list-item .title { font-weight: 600; }
.list-item .sub { color: var(--muted); font-size: var(--fs-sm); }
.amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.empty { display: grid; justify-items: center; align-content: center; gap: 8px; padding: 34px 16px; text-align: center; color: var(--muted); }
.empty .btn { margin-top: 6px; } /* (a button below the text, at its own size) */
.empty.compact { padding: 14px 10px; gap: 6px; font-size: var(--fs-sm); }
.empty.compact > svg { width: 24px; height: 24px; }
.empty > svg { width: 34px; height: 34px; color: var(--brass-dim); } /* (its own icon, not a button's) */
.empty b { color: var(--text); font-size: var(--fs-lg); }

.stat-tile { display: grid; gap: 4px; padding: 16px; border-radius: var(--r-lg); background: #ffffff06; border: 1px solid var(--line); }
.stat-tile .v { font-size: var(--fs-2xl); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Toasts */
#toasts { position: fixed; z-index: 200; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: grid; gap: 8px; width: min(420px, calc(100vw - 32px)); pointer-events: none; }
@media (min-width: 960px) { #toasts { bottom: 24px; left: auto; right: 24px; transform: none; } }
.toast { pointer-events: auto; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); background: var(--panel-2); border: 1px solid var(--line-2); box-shadow: 0 16px 36px -12px #000; animation: toast-in .25s ease both; }
.toast.bad { border-color: #ef7b8066; }
.toast.good { border-color: #7cc49566; }
.toast a { margin-left: auto; white-space: nowrap; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Dialogs */
dialog.modal { width: min(480px, calc(100vw - 32px)); padding: 0; border-radius: var(--r-lg); border: 1px solid #d4ab5e40; background: var(--panel); color: var(--text); box-shadow: 0 30px 70px -20px #000; }
dialog.modal::backdrop { background: #0d0807b8; backdrop-filter: blur(3px); }
.modal-body { display: grid; gap: 16px; padding: 22px; }
.modal-body h2 { font-size: var(--fs-xl); font-weight: 700; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

/* Menus */
.menu-wrap { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: min(320px, calc(100vw - 32px)); display: grid; gap: 4px; padding: 8px;
  border-radius: var(--r-lg); background: var(--panel); border: 1px solid #d4ab5e40; box-shadow: 0 24px 48px -12px #000;
}
.menu button, .menu a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); background: none; border: 0; text-align: left; cursor: pointer; color: var(--text); }
.menu button:hover, .menu a:hover { background: #ffffff0d; text-decoration: none; }
.menu .sel { color: var(--brass); font-weight: 600; }
.menu-title { padding: 6px 10px 4px; }
.notif { display: grid; gap: 2px; padding: 9px 10px; border-radius: var(--r-sm); }
.notif.unread { background: #d4ab5e12; }
.notif small { color: var(--muted); }

/* Test-mode banner on payment screens */

/* ---------- Public pages ---------- */
.public { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.public-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 16px; max-width: var(--page-w); width: 100%; margin: 0 auto; }
.public-top .wordmark { font-size: var(--fs-3xl); }
.public-top .brand-mark { height: 38px; }
.landing { width: 100%; max-width: var(--page-w); margin: 0 auto; padding-inline: 16px; padding-block: 24px 64px; display: grid; gap: 56px; }
.hero { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.hero h1 { font-family: var(--display); color: var(--brass); font-weight: 400; font-size: clamp(56px, 9vw, 120px); line-height: .9; }
.hero .lede { margin-top: 18px; max-width: 40ch; font-size: clamp(17px, 1.6vw, 20px); color: var(--ivory-2); }
.hero .row { margin-top: 26px; }
.hero-guest { display: grid; gap: 8px; margin-top: 18px; }
.hero .hero-guest .row { gap: 10px; margin-top: 0; }
.hero-learn { margin: 16px 0 0; font-size: var(--fs-base); }
.hero-learn a { color: var(--brass); text-underline-offset: 3px; }
.fan { position: relative; --cw: clamp(62px, 8vw, 100px); width: calc(var(--cw) * 3.3); height: calc(var(--cw) * 1.8); margin-inline: auto; }
.fan .card {
  position: absolute; bottom: 0; left: calc(var(--i) * var(--cw) * .56); transform-origin: 50% 130%;
  rotate: calc(var(--off) * 7deg); translate: 0 calc(max(var(--off), calc(var(--off) * -1)) * 7px);
  box-shadow: 0 10px 24px -6px #000c, inset 0 0 0 1px #0000001a;
  transition: rotate .35s cubic-bezier(.2, .8, .2, 1), translate .35s cubic-bezier(.2, .8, .2, 1), scale .25s ease, box-shadow .25s ease;
}
/* Hovering the hand fans it wider; the card under the pointer lifts and straightens. */
.fan:hover .card { rotate: calc(var(--off) * 11deg); translate: calc(var(--off) * 14px) calc(max(var(--off), calc(var(--off) * -1)) * 10px); }
.fan .card:hover { z-index: 5; rotate: 0deg; translate: calc(var(--off) * 14px) -26px; scale: 1.08; box-shadow: 0 22px 36px -10px #000e, 0 0 0 2px var(--brass); }
.features { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.feature { padding: 18px; border-top: 1px solid var(--line-2); display: grid; gap: 6px; }
.feature b { font-size: var(--fs-lg); }
.feature p { color: var(--muted); font-size: var(--fs-md); }
.auth-wrap { display: grid; place-items: center; padding: 24px 16px 64px; }
.auth-card { width: min(420px, 100%); display: grid; gap: 18px; padding: 28px; border-radius: var(--r-xl); background: linear-gradient(#2a1b16, #1a110e); border: 1px solid #d4ab5e40; box-shadow: 0 30px 60px -30px #000; }
.auth-card h1 { font-size: var(--fs-2xl); }
.auth-logo { height: 54px; width: auto; }
.auth-card .alt { text-align: center; color: var(--muted); font-size: var(--fs-md); }

/* PIN lock */
.lock { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.lock-card { display: grid; justify-items: center; gap: 14px; text-align: center; width: min(380px, 100%); }
.lock-logo { height: 84px; width: auto; }
.lock-icon { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: #d4ab5e1f; border: 1px solid #d4ab5e55; color: var(--brass); }
.lock-icon svg { width: 26px; height: 26px; }
.pin-boxes { display: flex; gap: 8px; }
.pin-boxes input { width: 46px; height: 58px; text-align: center; font-size: var(--fs-2xl); font-weight: 700; border-radius: var(--r-md); border: 1px solid var(--line-2); background: #0d0807; }
.pin-boxes input:focus { border-color: var(--brass); outline: none; box-shadow: 0 0 0 3px #d4ab5e33; }

/* ---------- Dashboard ---------- */
.balance-card {
  position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
  padding: 24px; border-radius: var(--r-xl); border: 1px solid #d4ab5e40;
  background: var(--sc-photo, none), radial-gradient(ellipse 80% 120% at 0% 0%, var(--sc-1, #8a2a3b), var(--sc-2, var(--felt)) 45%, var(--sc-3, var(--felt-deep)));
  color: var(--sc-ink, var(--text));
}
/* The Elo box takes the colours of your stats card design */
.balance-card .eyebrow, .balance-card [style*="--ivory-2"] { color: color-mix(in srgb, var(--sc-ink, #f5efe2) 80%, transparent) !important; }
.balance-card::after { border-color: color-mix(in srgb, var(--sc-accent, #d4ab5e) 35%, transparent) !important; content: ""; position: absolute; inset: 10px; border: 1px solid #d4ab5e33; border-radius: var(--r-lg); pointer-events: none; }
.balance-card .big:not(.btn) { font-size: clamp(32px, 5vw, 46px); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1.1; }
.balance-card .row { position: relative; z-index: 1; }
.feedback-card { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }

/* ---------- Lobby ---------- */
.table-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.table-card { display: grid; gap: 12px; padding: 18px; border-radius: var(--r-lg); background: linear-gradient(#26181480, #1a110ecc); border: 1px solid var(--line); }
.table-card.practice { background: radial-gradient(ellipse 90% 100% at 100% 0%, #3f0f19, #1a110e 70%); border-color: #d4ab5e40; }
.table-card .meta { display: grid; gap: 3px; color: var(--muted); font-size: var(--fs-sm); }
.table-card .meta b { color: var(--ivory-2); font-weight: 600; }
.seat-bar { display: flex; gap: 3px; }
.seat-bar i { flex: 1; height: 5px; border-radius: 3px; background: #ffffff1a; }
.seat-bar i.on { background: var(--brass); }
.face-stack { display: flex; }
.face-stack .avatar { --s: 26px; margin-left: -6px; box-shadow: 0 0 0 2px var(--room), inset 0 0 0 2px #d4ab5e55; }
.face-stack .avatar:first-child { margin-left: 0; }

/* ---------- Wallet ---------- */
.coin-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.address-box { display: grid; gap: 16px; align-items: center; }
@media (min-width: 640px) { .address-box { grid-template-columns: 180px minmax(0, 1fr); } }
@media (max-width: 639px) { .address-box > .qr { justify-self: center; } }
.qr { width: 180px; max-width: 100%; border-radius: var(--r-lg); overflow: hidden; background: var(--ivory); padding: 8px; }
.qr svg { width: 100%; height: 100%; display: block; }
.address { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--fs-md); word-break: break-all; padding: 12px; border-radius: var(--r-md); background: #0d0807; border: 1px solid var(--line-2); }
.steps { display: grid; gap: 10px; counter-reset: s; padding: 0; margin: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; color: var(--ivory-2); }
.steps li::before { counter-increment: s; content: counter(s); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #d4ab5e1f; color: var(--brass); font-weight: 700; font-size: var(--fs-sm); }

/* ---------- Stats ---------- */
.elo-card { display: grid; gap: 14px; padding: 22px; border-radius: var(--r-xl); border: 1px solid #d4ab5e40; background: linear-gradient(160deg, #2c1b16, #170f0c); }
.elo-card .big { font-size: clamp(30px, 4.5vw, 42px); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.chart { width: 100%; height: 150px; display: block; }
.chart .grid line { stroke: #ffffff14; }
.chart text { fill: var(--muted); font: 11px var(--sans); }
.achievements { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.achv { display: grid; grid-template-columns: 38px 1fr; gap: 2px 12px; align-items: center; padding: 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: #ffffff05; }
.achv .medal { grid-row: span 2; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #ffffff0f; color: var(--muted); }
.achv b { font-size: var(--fs-md); }
.achv small { color: var(--muted); font-size: var(--fs-xs); }
.achv.done { border-color: #d4ab5e55; background: #d4ab5e0d; }
.achv.done .medal { background: var(--brass); color: var(--ink); }

/* ---------- Chat ---------- */
.chat-layout { display: grid; gap: 14px; min-height: 0; }
@media (min-width: 880px) { .chat-layout { grid-template-columns: 280px minmax(0, 1fr); height: calc(100vh - var(--top-h) - 150px); min-height: 460px; } }
.threads { display: grid; align-content: start; gap: 4px; overflow-y: auto; }
.thread { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--r-md); color: var(--text); }
.thread:hover { background: #ffffff08; text-decoration: none; }
.thread[aria-current="page"] { background: #d4ab5e14; box-shadow: inset 0 0 0 1px #d4ab5e3d; }
.club-avatar { background: var(--felt); }
.club-avatar img { width: 62%; height: auto; object-fit: contain; }
.thread .grow { min-width: 0; flex: 1; }
.thread .sub { display: block; color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.convo { display: flex; flex-direction: column; min-height: 420px; padding: 0; overflow: hidden; }
.convo-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.msg { display: flex; gap: 10px; align-items: flex-end; max-width: 80%; }
.msg .bubble { padding: 9px 13px; border-radius: 14px 14px 14px 4px; background: #ffffff0d; border: 1px solid var(--line); overflow-wrap: anywhere; }
.msg .bubble small { display: block; color: var(--muted); font-size: var(--fs-2xs); margin-bottom: 2px; }
.msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.msg.mine .bubble { background: #d4ab5e1f; border-color: #d4ab5e40; border-radius: 14px 14px 4px 14px; }
.composer { display: flex; align-items: center; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }

/* ---------- Events ---------- */
.event { display: grid; gap: 14px; grid-template-columns: 84px minmax(0, 1fr); align-items: start; }
.event-date { display: grid; justify-items: center; padding: 10px 6px; border-radius: var(--r-lg); background: var(--felt); border: 1px solid #d4ab5e40; }
.event-date b { font-family: var(--serif); font-size: var(--fs-3xl); line-height: 1; }
.event-date span { font-size: var(--fs-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ivory-2); }

/* ---------- Practice setup ---------- */
.opp-list { display: grid; gap: 8px; }
.opp { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) 22px; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: #ffffff05; cursor: pointer; }
.opp input { position: absolute; opacity: 0; pointer-events: none; }
.opp .av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--felt); color: var(--ivory); font: 700 18px var(--serif); box-shadow: inset 0 0 0 2px #d4ab5e55; }
.opp.game .av { border-radius: var(--r-sm); height: 34px; font-size: var(--fs-sm); }
.opp .nm { font-weight: 600; }
.opp .nm small { margin-left: 6px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.opp .ds { color: var(--muted); font-size: var(--fs-sm); }
.opp .tick { width: 22px; height: 22px; border-radius: var(--r-sm); border: 1.5px solid #ffffff40; display: grid; place-items: center; font-size: var(--fs-md); font-weight: 700; color: var(--ink); }
.opp.game .tick { border-radius: 50%; }
.opp:has(input:checked) { border-color: var(--brass-dim); background: #d4ab5e12; }
.opp:has(input:checked) .tick { background: var(--brass); border-color: transparent; }
.opp:has(input:checked) .tick::after { content: "\2713"; }
.opp:not(:has(input:checked)) .av { filter: grayscale(1) opacity(.5); }
.opp:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.deck-preview { display: flex; gap: 6px; --cw: 40px; }
.deck-preview .card { animation: none; }
.rankings ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 22px; }
.rankings li { display: grid; grid-template-columns: 26px 1fr; gap: 2px 8px; padding-block: 11px; border-top: 1px solid var(--line); }
.rankings .n { grid-row: span 2; color: var(--brass); font-weight: 600; }
.rankings .t { font-weight: 600; }
.rankings .ex { font-size: var(--fs-md); display: flex; gap: 6px; }

dialog.modal.wide { width: min(1040px, calc(100vw - 24px)); }

/* Stats card export */

/* Cards in text */
.lc { font-weight: 700; color: var(--lc-s); white-space: nowrap; }
.lc.s1 { color: var(--lc-h); }
.lc.s2 { color: var(--lc-d); }
.lc.s3 { color: var(--lc-c); }
.lc.sj { color: var(--lc-j); }

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

/* Icons inside list rows (profile links and similar) */
.list-item > svg { width: 20px; height: 20px; flex: none; color: var(--muted); }

/* Avatars: picker in Settings and bust previews in the Shop */
.avatar-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.avatar-opt { display: grid; justify-items: center; gap: 6px; padding: 10px 6px 8px; border-radius: var(--r-lg); border: 1px solid var(--line); background: #ffffff05; color: var(--text); font: inherit; }
.avatar-pick { display: grid; justify-items: center; gap: 4px; width: 100%; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; font: inherit; }
.avatar-opt .btn { padding-inline: 12px; }
.avatar-opt:hover { border-color: var(--line-2); }
.avatar-opt.selected { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass); }
.avatar-opt b { font-size: var(--fs-sm); text-align: center; }
.avatar-opt small { font-size: var(--fs-xs); color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.avatar-opt small svg { width: 12px; height: 12px; }
.avatar-opt.selected small { color: var(--good); }
.avatar-opt.locked .bust-frame img { filter: saturate(.6) brightness(.8); }
.bust-frame { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #8a2a3b, #3f0f19); box-shadow: inset 0 0 0 2px #d4ab5e44; }
.bust-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-show { display: grid; place-items: end center; height: 150px; border-radius: var(--r-lg); overflow: hidden;
  background: var(--tpattern), radial-gradient(ellipse 80% 90% at 50% 70%, var(--tfelt-hi), var(--tfelt) 55%, var(--tfelt-deep)); box-shadow: inset 0 0 0 1px var(--tline); }
.avatar-show img { height: 140px; width: auto; filter: drop-shadow(0 8px 12px #0009); transition: transform .25s ease; }
.shop-item:hover .avatar-show img { transform: translateY(-4px) scale(1.04); }
.design-hero { position: relative; }
.hero-bust { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); width: clamp(70px, 12vw, 120px); height: auto; filter: drop-shadow(0 8px 12px #000a); pointer-events: none; }

/* Game graphics and controls don't highlight blue when clicked, double-clicked or dragged.
   Chat messages, the hand history and form fields stay selectable. */
body { --face-hi: #fffaf0; --face: var(--ivory); --face-lo: var(--ivory-2); --face-edge: #0000001a; --back-edge: var(--ivory); --back-line: #d4ab5e38; --back-1: #7a2232; --back-2: #4a111c; --card-glow: none; --back-pattern: repeating-linear-gradient(45deg, var(--back-line) 0 .25em, transparent .25em 1em), repeating-linear-gradient(-45deg, var(--back-line) 0 .25em, transparent .25em 1em); --suit-s: #1f1613; --suit-h: #b21f2d; --suit-d: #b21f2d; --suit-c: #1f1613; --suit-j: #6b3fa0; --lc-s: var(--ivory); --lc-h: #ef7b80; --lc-d: #ef7b80; --lc-c: var(--ivory); --lc-j: #c9a2ff; background: radial-gradient(ellipse 90% 60% at 50% 0%, #2b1914 0%, var(--room) 60%) var(--room); background-attachment: fixed; -webkit-tap-highlight-color: transparent; }
.stage, .controls, .card, .chip, .seg, .tabs, .btn, .icon-btn, .balance-pill, .brand, .avatar, .bust-frame, .avatar-opt, .avatar-show,
.design-preview, .design-opt, .look-btn, .fan, .inspect-stage, .inspect-tools, .mini-cards, .table-card .seat-bar, .face-stack,
.nav-link, .tabbar, .presets, .gchat-quick, .shop-item .price, .deck-preview, .pin-boxes, .event-date, .achv .medal {
  -webkit-user-select: none; user-select: none;
}
.controls input, .gchat-list, .history-pane, .messages { -webkit-user-select: text; user-select: text; }
img, svg { -webkit-user-drag: none; }

/* ---------- Elo, playing style and leaderboard ---------- */
.elo-facts { display: grid; grid-template-columns: repeat(2, auto); gap: 6px 22px; color: var(--muted); font-size: var(--fs-md); }
.elo-facts b { color: var(--text); font-variant-numeric: tabular-nums; }
.style-groups { margin-top: 16px; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.style-group h3 { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); margin: 0 0 6px; }
.style-group ul { list-style: none; margin: 0; padding: 0; display: grid; }
.style-group li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.style-group li:first-child { border-top: 0; }
.st-name { display: grid; min-width: 0; }
.st-name small { color: var(--muted); font-size: var(--fs-xs); }
.st-val { display: grid; justify-items: end; align-content: start; }
.st-val b { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.st-val small { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.st-bar { grid-column: 1 / -1; height: 4px; border-radius: var(--r-xs); background: #ffffff12; overflow: hidden; }
.st-bar i { display: block; height: 100%; border-radius: var(--r-xs); background: var(--brass); }
.leaderboard { list-style: none; margin: 0; padding: 0; display: grid; }
.leaderboard li { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-top: 1px solid var(--line); border-radius: var(--r-md); }
.leaderboard li:first-child { border-top: 0; }
.leaderboard li.me { background: #d4ab5e12; }
.leaderboard .rank { width: 28px; text-align: center; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.leaderboard li:nth-child(-n+3) .rank { color: var(--brass); }
.leaderboard a.grow { flex: 1; min-width: 0; display: grid; color: inherit; text-decoration: none; }
.leaderboard a.grow small { color: var(--muted); font-size: var(--fs-sm); }
.leaderboard .elo { font-size: var(--fs-lg); font-weight: 700; color: var(--brass); font-variant-numeric: tabular-nums; }
.balance-pill svg { color: var(--brass); }

/* ---------- Checkout and Poncler Pro ---------- */
.checkout { margin-top: 14px; }
.checkout-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: #ffffff08; border: 1px solid var(--line); }
.checkout-total b { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.checkout .link-btn { justify-self: start; }
.pro-hero { display: grid; gap: 22px; padding: 26px; border-radius: var(--r-xl); border: 1px solid #d4ab5e55; background: radial-gradient(ellipse 80% 100% at 100% 0%, var(--pro-deep), #1a110e 70%); }
@media (min-width: 900px) { .pro-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } }
.pro-hero h2 { font-size: clamp(24px, 3vw, 32px); margin: 0; }
.pro-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pro-list li { display: flex; gap: 12px; align-items: flex-start; }
.pro-list svg { flex: none; width: 20px; height: 20px; color: var(--brass); margin-top: 2px; }
.pro-side { display: grid; gap: 16px; }
.pro-sample { pointer-events: none; }
.pro-state { justify-items: start; gap: 10px; }
.pro-state p { margin: 0; }
.pro-price b { font-size: var(--fs-3xl); }
.pill svg { width: 12px; height: 12px; }
.switch.locked { opacity: .65; }
.switch.locked svg { width: 13px; height: 13px; vertical-align: -1px; }
.stat-tile small { font-size: var(--fs-xs); }
.flag { display: inline-block; vertical-align: -1px; border-radius: 2px; box-shadow: 0 0 0 1px #0006; object-fit: cover; flex: none; }
.name-with-flag { display: inline-flex; align-items: center; gap: 6px; }
.profile-card canvas { width: 100%; max-width: 520px; height: auto; display: block; border-radius: var(--r-lg); box-shadow: 0 24px 50px -24px #000; }

/* Results: chips or big blinds */
.unit-seg { margin-left: auto; grid-auto-columns: 64px; gap: 4px; }
.unit-note { font-size: var(--fs-xs); margin: 10px 0 0; }

/* Unread counters: header chat and bell, the Chat links and conversations */
.icon-btn .count, .nav-link .count, .tabbar .count, .thread .count {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-sm); display: inline-grid; place-items: center;
  background: var(--chip-red, #c8443e); color: #fff; font-size: var(--fs-2xs); font-weight: 700; line-height: 18px; letter-spacing: 0; font-variant-numeric: tabular-nums;
  box-sizing: border-box; text-align: center; overflow: visible;
  box-shadow: 0 0 0 2px var(--room); pointer-events: none;
}
.icon-btn .count { position: absolute; top: 1px; right: -3px; }
.nav-link .count { margin-left: auto; box-shadow: none; }
.tabbar a { position: relative; }
.tabbar .count { position: absolute; top: 2px; left: calc(50% + 6px); }
.thread .count { flex: none; box-shadow: none; }
.icon-btn .count[hidden], .nav-link .count[hidden], .tabbar .count[hidden] { display: none; }

.icon-btn.small-icon { width: 32px; height: 32px; } /* (the two icon button sizes: 38 and this; one corner radius) */
.icon-btn.small-icon svg { width: 16px; height: 16px; }
.icon-btn[data-remove]:hover { color: var(--bad); border-color: #ef7b8066; }

/* History: pick a game, then a hand */
.rp-step { margin: 2px 4px 8px; }
/* History's filters over your games: a search across the top, then the choices */
.rp-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 12px; margin: 12px 0 14px; }
.rp-filters[hidden] { display: none; }
.rp-filters .field { margin: 0; min-width: 0; }
.rp-filters .rp-q { grid-column: 1 / -1; }
/* (phones: the choices say what they are, so their labels go, out of sight but still read out) */
@media (max-width: 560px) { .rp-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .rp-filters .field > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.rp-game-head.rp-picked { cursor: default; }
.replay-view.idle [data-rp-table], .replay-view.idle .rp-controls, .replay-view.idle .rp-bottom { display: none; }
.rp-idle { display: none; }
.replay-view.idle .rp-idle { display: grid; justify-items: center; gap: 6px; padding: 72px 16px; text-align: center; color: var(--muted);
  border: 1px dashed var(--line-2); border-radius: var(--r-lg); }
.rp-idle svg { width: 34px; height: 34px; color: var(--brass); margin-bottom: 4px; }
.rp-idle b { color: var(--text); font-size: var(--fs-lg); }

/* Phone header: Elo, chat, bell and avatar on one line (sound stays in Settings) */
.balance-pill { white-space: nowrap; }
@media (max-width: 480px) { .top [data-sound] { display: none; } }
.top .icon-btn, .top .balance-pill { flex: none; }

/* Results: the blinds played */
.blinds-line { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 6px; font-size: var(--fs-md); color: var(--ivory-2); }
.blinds-line svg { width: 16px; height: 16px; color: var(--brass); flex: none; margin-top: 2px; }

/* Friend requests */
.count-pill { padding: 2px 9px; border-radius: var(--r-pill); background: var(--chip-red, #c8443e); color: #fff; font-size: var(--fs-xs); font-weight: 700; }
#requests { scroll-margin-top: 80px; }

/* Chat: names and avatars open profiles; direct messages need friendship */
.convo-name { color: var(--text); text-decoration: none; font-weight: 700; }
.convo-name:hover, .msg-name:hover { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 3px; }
.convo-avatar, .convo-head .face-stack a { display: inline-flex; border-radius: 50%; }
.msg-name { color: inherit; text-decoration: none; }
.composer.locked { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: var(--fs-md); }
.composer.locked svg { width: 18px; height: 18px; color: var(--brass); flex: none; }

/* Game overview (invitations and invite links) */
.ov { display: grid; gap: 22px; }
.ov-head { display: grid; justify-items: center; gap: 8px; text-align: center; }
.ov-head h1 { margin: 0; font-size: clamp(26px, 4vw, 34px); }
.ov-head p { margin: 0; }
.ov-pills { gap: 6px; justify-content: center; }
.ov-from { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-md); }
.ov-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.ov-fact { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: #ffffff05; }
.ov-fact small { font-size: var(--fs-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ov-fact b { font-size: var(--fs-lg); }
.ov-fact span { font-size: var(--fs-xs); color: var(--muted); }
.ov-cols { display: grid; gap: 22px; }
@media (min-width: 760px) { .ov-cols { grid-template-columns: 1.3fr 1fr; } }
.ov-cols h2 { margin: 0 0 8px; }
.ov-rules p { margin: 0 0 10px; color: var(--ivory-2); line-height: 1.5; }
.ov-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.ov-actions p { margin: 0 auto 0 0; }
.invite-card { border-color: #d4ab5e66; }
.invite-card .ov-from { font-size: var(--fs-sm); }

/* ---------- Ranks ---------- */
.rank-bronze { --rk-1: #cf8e57; --rk-2: #6b3a17; --rk-ink: #e0a273; }
.rank-silver { --rk-1: #dfe5ec; --rk-2: #5b6676; --rk-ink: #d6dde6; }
.rank-gold { --rk-1: #f3cd5f; --rk-2: #7a5410; --rk-ink: #f1c75a; }
.rank-ic { flex: none; filter: drop-shadow(0 1px 1px #0008); }
.rank-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 5px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700;
  color: var(--rk-ink); border: 1px solid color-mix(in srgb, var(--rk-1) 45%, transparent); background: color-mix(in srgb, var(--rk-1) 10%, transparent); vertical-align: middle; white-space: nowrap; }
.rank-badge.bare { padding: 0; border: 0; background: none; }
.rank-progress { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.rank-progress .rp-bar { height: 6px; border-radius: 3px; background: #ffffff1a; }
.rank-progress .rp-bar i { display: block; height: 100%; border-radius: 3px; background: var(--rk-1); }
.rank-progress small { font-size: var(--fs-xs); color: var(--ivory-2); }
.balance-pill .rank-ic { width: 18px; height: 18px; }
@media (max-width: 480px) { .balance-pill .pro-crown { display: none; } }
.rank-ladder { display: grid; gap: 6px; margin: 4px 0 6px; }
.rank-ladder div { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.rank-ladder div.on { font-weight: 700; }

/* Game page: Info and Settings */
.tool-btn svg { width: 17px; height: 17px; }
@media (max-width: 560px) { .tool-btn span { display: none; } .tool-btn { padding-inline: 9px; } }
.paused-pill { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 700; color: var(--ink); background: var(--brass); }
.settings-panel { display: grid; gap: 14px; }
.settings-panel h3 { margin: 6px 0 -4px; }
.settings-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.locked-row { width: 100%; text-align: left; border: 1px dashed var(--line-2); border-radius: var(--r-md); background: transparent; color: inherit; cursor: pointer; font: inherit; }
.locked-row small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.info-ov { gap: 14px; }
.rank-progress { flex-wrap: nowrap; }
.rank-progress .rp-bar { max-width: 260px; overflow: hidden; flex: 1 1 140px; min-width: 50px; }
.rank-progress small { white-space: nowrap; }

.rank-diamond { --rk-1: #a9e8f8; --rk-2: #1d6680; --rk-ink: #b8eefb; }
.rank-progress.unranked { --rk-1: #d4ab5e; }
.unranked-badge { color: var(--ivory-2); border-color: var(--line-2); background: #ffffff08; padding-left: 7px; }
.unranked-badge svg { width: 14px; height: 14px; }
.rank-progress .rp-top { font-weight: 700; color: var(--rk-ink, var(--ivory-2)); }
.balance-pill.unranked { color: var(--ivory-2); }
@media (max-width: 480px) { .top-brand .wordmark { display: none; } }

.side-rank { display: flex; align-items: center; gap: 14px; }
.side-rank b { display: block; font-size: var(--fs-2xl); color: var(--rk-ink); }
.side-rank span { font-size: var(--fs-sm); color: var(--ivory-2); }
.side-split { height: 1px; background: var(--line); margin: 6px 0; }
.card-side .rank-progress { margin-top: 0; flex-wrap: wrap; }
.lb-top { font-size: var(--fs-xs); min-width: 64px; text-align: right; }

.events-link { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; padding-block: 14px; }
.events-link > svg { width: 22px; height: 22px; color: var(--brass); }
.events-link small { display: block; color: var(--muted); font-size: var(--fs-sm); }
.events-link:hover { border-color: var(--line-2); }

.more-designs { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; }
.more-designs svg { width: 15px; height: 15px; }
#member-card { scroll-margin-top: 80px; }

/* Free and Pro comparison */
.compare th.c, .compare td.c { text-align: center; width: 90px; }
.compare th.c svg { width: 15px; height: 15px; color: var(--brass); vertical-align: -2px; }
.cmp-yes { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #7cc49522; color: var(--good); }
.cmp-yes svg { width: 15px; height: 15px; stroke-width: 2.4; }
.cmp-no { color: var(--muted); font-size: var(--fs-base); opacity: .7; }
.compare .pro-row td:first-child { font-weight: 600; }
.pro-state .btn + .btn { margin-top: 0; }

/* Help */
.help-page { max-width: var(--read-w); }
.help-toc { display: flex; flex-wrap: wrap; gap: 8px; position: sticky; top: 64px; z-index: 5; padding: 10px 0; background: var(--room, #170f0c); }
.help-toc a { padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-2); color: var(--ivory-2); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; }
.help-toc a:hover { color: var(--brass); border-color: #d4ab5e66; }
.help-sec { scroll-margin-top: 130px; display: grid; gap: 12px; }
.help-sec h2 { display: flex; align-items: center; gap: 10px; margin: 0; }
.help-sec h2 svg { width: 22px; height: 22px; color: var(--brass); }
.help-sec p { margin: 0; line-height: 1.55; }
.help-steps, .help-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.55; }
.help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.help-card { display: grid; gap: 6px; align-content: start; padding: 14px 16px; border-radius: var(--r-lg); border: 1px solid var(--line); background: #ffffff05; }
.help-card h3 { margin: 0; }
.help-card .btn { justify-self: start; margin-top: 4px; }
.help-ranks { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.help-rank { display: grid; justify-items: center; gap: 4px; padding: 14px; border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--rk-1) 40%, transparent); background: color-mix(in srgb, var(--rk-1) 7%, transparent); }
.help-rank b { color: var(--rk-ink); font-size: var(--fs-lg); }
.help-rank span { font-size: var(--fs-sm); color: var(--ivory-2); }
.help-you { padding: 10px 14px; border-radius: var(--r-md); background: #ffffff08; }
.faq { display: grid; gap: 8px; }
.faq details { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 16px; background: #ffffff04; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { margin-top: 8px; color: var(--ivory-2); }
.help-form { display: grid; gap: 12px; max-width: 640px; }
.help-form textarea { resize: vertical; min-height: 120px; }
.side-rank + .rank-progress > .rank-badge, .side-rank + .rank-progress > .rp-top { display: none; }

/* Elo menu: an icon before every entry */
[data-elo-menu] a { justify-content: flex-start; }
[data-elo-menu] a svg { width: 17px; height: 17px; flex: none; color: var(--brass); }
[data-elo-menu] .rank-progress { flex-wrap: wrap; row-gap: 8px; }
[data-elo-menu] .rank-progress small { white-space: normal; flex-basis: 100%; }

.rank-cards { display: grid; gap: 6px; margin-top: 4px; padding: 12px 14px; border-radius: var(--r-md); border: 1px dashed var(--line-2); }
.rank-cards > span { font-size: var(--fs-sm); }
.rank-card-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.rank-card-locked { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--line); font-size: var(--fs-sm); font-weight: 600; color: var(--ivory-2); }
.rank-card-locked > svg:last-child { width: 13px; height: 13px; opacity: .7; }

/* Modal close button (top right) */
.modal.has-x .modal-body { position: relative; }
.modal.has-x .modal-body > h2 { padding-right: 44px; }
.modal-x { position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: #00000033; color: var(--ivory-2); cursor: pointer; }
.modal-x:hover { color: var(--text); border-color: var(--line-2); }
.modal-x svg { width: 18px; height: 18px; }

/* My stats: Personal style, like the player pop-up */
.style-panel .style-top { display: grid; margin: 4px 0 14px; }
.style-panel .pc-hud { width: min(420px, 100%); height: 32px; margin: 0; }
.style-panel .pc-hud .hud-seg { font-size: var(--fs-base); }
.style-panel .pc-hud .hud-seg small { font-size: 9px; }
.style-panel .hud-read { margin: 0; width: 100%; }
@media (min-width: 900px) { .style-panel .pc-streets { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Shop: promotions carousel */
.promo-carousel { position: relative; border-radius: var(--r-xl); overflow: hidden; border: 1px solid #d4ab5e44;
  background: radial-gradient(ellipse 120% 140% at 0% 0%, #7a2232, #3f0f19 55%, #1c0d0b); box-shadow: 0 18px 40px -24px #000; }
.promo-viewport { overflow: hidden; }
.promo-track { display: flex; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) { .promo-track { transition: none; } }
.promo-slide { flex: 0 0 100%; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 24px; padding: 30px 64px 46px; }
@media (max-width: 760px) { .promo-slide { grid-template-columns: 1fr; padding: 22px 22px 46px; } .promo-look { max-width: 320px; } }
.promo-text { display: grid; gap: 10px; justify-items: start; }
.promo-text h2 { margin: 0; font-size: clamp(22px, 3vw, 30px); }
.promo-text p { margin: 0; color: var(--ivory-2); max-width: 46ch; line-height: 1.5; }
.promo-badge { padding: 4px 12px; border-radius: var(--r-pill); background: var(--brass); color: var(--ink); font-weight: 800; font-size: var(--fs-sm); letter-spacing: .04em; }
.promo-look { justify-self: center; width: 100%; max-width: 380px; }
.promo-shields { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.promo-icon { display: grid; place-items: center; height: 170px; color: var(--brass); }
.promo-icon svg { width: 110px; height: 110px; stroke-width: 1.2; }
.promo-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; border: 1px solid #ffffff2e; background: #00000055; color: var(--text); font-size: var(--fs-2xl); line-height: 1; cursor: pointer; }
.promo-arrow:hover { background: #00000088; }
.promo-arrow.prev { left: 12px; } .promo-arrow.next { right: 12px; }
@media (max-width: 760px) { .promo-arrow { top: auto; bottom: 8px; transform: none; } }
.promo-dots { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 8px; }
.promo-dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: #ffffff55; cursor: pointer; transition: width .2s ease, background .2s ease; }
.promo-dots button[aria-selected="true"] { width: 24px; border-radius: var(--r-xs); background: var(--brass); }
.price.promo s { color: var(--muted); font-weight: 500; margin-right: 4px; }
.price.promo { color: var(--good); font-weight: 700; }

/* Design: your setup on top, tabs below */
.setup-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.setup-tile { display: grid; gap: 4px; align-content: start; padding: 10px; border-radius: var(--r-lg); border: 1px solid var(--line); background: #ffffff05; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.setup-tile:hover { border-color: #d4ab5e88; transform: translateY(-1px); }
.setup-tile.on { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
.setup-tile .st-look { display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden; background: #00000033; margin-bottom: 4px; }
.setup-tile .st-look > * { width: 100%; }
.setup-tile b { font-size: var(--fs-md); }
.setup-tile small { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.setup-chips { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 10px; max-width: 136px; margin: 0 auto; padding: 10px 0; }
.setup-chips .piles { display: inline-flex; }
.setup-bust { display: grid; place-items: end center; height: 100%; }
.setup-bust img { width: 72%; height: auto; max-height: 100%; object-fit: contain; }
.design-tabs { display: grid; gap: 16px; scroll-margin-top: 80px; }
.tabs-row { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--r-md); background: #00000033; }
.tabs-row button { flex: 1 1 auto; padding: 8px 14px; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); font: 600 14px var(--sans, inherit); cursor: pointer; }
.tabs-row button[aria-selected="true"] { background: var(--panel-2, #2a1f1b); color: var(--brass); box-shadow: inset 0 0 0 1px #d4ab5e33; }

/* Friends: search (with suggestions) and Invite at the top right */
.friends-tools { display: flex; align-items: center; gap: 10px; }
.user-search { position: relative; width: min(340px, 100%); }
.user-search > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted); pointer-events: none; }
.user-search .input { padding-left: 38px; }
.search-drop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; display: grid; gap: 2px; padding: 6px; max-height: 420px; overflow-y: auto;
  border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--panel, #1e1613); box-shadow: 0 18px 40px -16px #000; min-width: 300px; }
.search-drop .list-item { padding: 8px 10px; border-radius: var(--r-md); }
.search-drop .list-item:hover { background: #ffffff08; }
.search-drop .sub, [data-search-page] .sub { display: block; }
.drop-all { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--brass); font: 600 13.5px var(--sans, inherit); cursor: pointer; text-align: left; }
.drop-all kbd { font: 600 11px var(--sans, inherit); padding: 2px 6px; border-radius: var(--r-xs); border: 1px solid var(--line-2); color: var(--muted); }
.invite-box { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; align-items: center; }
.invite-box .qr { width: 170px; aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--r-md); background: #f5efe2; padding: 8px; }
.invite-box .qr svg { width: 100%; height: auto; }
@media (max-width: 560px) { .invite-box { grid-template-columns: 1fr; justify-items: center; } .user-search { width: 100%; } }

.avatar-now { display: flex; align-items: center; gap: 14px; }
.pro-settings h2 { display: flex; align-items: center; gap: 8px; }
.pro-settings h2 svg { width: 20px; height: 20px; color: var(--brass); }

/* Design: decks and card backs on their own, without the table */
.design-preview.cards-only .cards-stage { aspect-ratio: 2.1 / 1; display: grid; place-items: center; border-radius: var(--r-lg);
  background: radial-gradient(ellipse at 50% 30%, #ffffff0d, #00000033 75%); border: 1px solid var(--line); }
.look-btn:hover .cards-stage { border-color: #d4ab5e88; }
.setup-tile .cards-stage { border: 0; background: none; aspect-ratio: auto; height: 100%; }
.setup-tile .design-preview.cards-only { height: 100%; display: grid; }
.friends-tools { flex-wrap: nowrap; }
@media (max-width: 560px) { .friends-tools { flex-wrap: wrap; } }

/* Shop: search, filters and sorting */
.shop-tools { display: grid; gap: 10px; padding: 14px 16px; scroll-margin-top: 80px; }
.shop-tools-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.shop-search { position: relative; flex: 1 1 260px; }
.shop-search > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted); pointer-events: none; }
.shop-search .input { padding-left: 38px; }
.shop-sort { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--muted); }
.shop-sort select { width: auto; min-width: 170px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip { padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: transparent; color: var(--ivory-2); font: 600 13px var(--sans, inherit); cursor: pointer; }
.filter-chip[aria-pressed="true"] { background: var(--brass); border-color: transparent; color: var(--ink); }
.shop-count { font-size: var(--fs-sm); color: var(--muted); margin-left: auto; }
.shop-empty { padding: 30px; text-align: center; display: grid; gap: 8px; justify-items: center; }

/* Cards-only previews never grow past their box, so the fan stays centred */
.design-preview.cards-only { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.design-preview.cards-only .cards-stage, .design-preview.cards-only .mini-cards { min-width: 0; width: 100%; }
.design-tabs > h2 { margin: 0; }

/* Header avatar menu */
.me-btn { display: grid; place-items: center; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; }
.me-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.me-menu { min-width: 220px; right: 0; }
.me-menu-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.me-menu-head b { display: block; }
.me-menu-head small { color: var(--muted); font-size: var(--fs-xs); }
[data-me-menu] a, [data-me-menu] button { justify-content: flex-start; width: 100%; font: inherit; }
[data-me-menu] svg { width: 17px; height: 17px; flex: none; color: var(--brass); }
.menu-sep { height: 1px; background: var(--line); margin: 4px 0; }
.notif-all { justify-content: center !important; color: var(--brass) !important; font-weight: 600; border-top: 1px solid var(--line); border-radius: 0 0 9px 9px !important; margin-top: 4px; }

/* Chat page: Messages and Notifications tabs */
.chat-tabs { display: inline-flex; width: auto; }
.chat-tabs a { padding: 8px 16px; border-radius: var(--r-sm); color: var(--muted); font-weight: 600; font-size: var(--fs-md); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.chat-tabs a[aria-current="page"] { background: var(--panel-2, #2a1f1b); color: var(--brass); box-shadow: inset 0 0 0 1px #d4ab5e33; }
.notif-list .list-item { color: inherit; text-decoration: none; }
.notif-list .list-item.unread { background: #d4ab5e10; border-left: 3px solid var(--brass); }
.notif-list .list-item > svg { width: 18px; height: 18px; color: var(--brass); flex: none; }

.style-panel .style-top { justify-items: center; text-align: center; gap: 8px; }
.style-panel .style-top > .avatar { box-shadow: 0 0 0 2px #d4ab5e55, 0 10px 24px -10px #000; }
.style-panel .style-name { font-size: var(--fs-lg); }
.style-panel .hud-read { max-width: 560px; text-align: left; }

.threads .chat-tabs { display: flex; width: 100%; margin-bottom: 8px; }
.threads .chat-tabs a { flex: 1; justify-content: center; padding: 8px 6px; }
.threads .chat-tabs svg { width: 16px; height: 16px; }
.notif-panel { align-self: start; }

/* Header chat preview */
.chat-menu { width: min(360px, calc(100vw - 24px)); right: 0; }
.chat-prev { display: flex !important; align-items: center; gap: 10px; justify-content: flex-start !important; }
.chat-prev .grow { min-width: 0; display: grid; }
.chat-prev b { font-size: var(--fs-md); }
.chat-prev .grow small { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-prev.unread .grow small { color: var(--text); }
.chat-prev .cp-side { display: grid; justify-items: end; gap: 3px; flex: none; }
.chat-prev .cp-side small { font-size: var(--fs-2xs); color: var(--muted); }
.chat-prev .count { position: static; box-shadow: none; display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-sm); background: var(--chip-red, #c8443e); color: #fff; font-size: var(--fs-2xs); font-weight: 700; line-height: 18px; }
.notif-list .title, .notif-list .sub { display: block; }

/* My stats: the guide to every figure */
.stat-guide { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.stat-guide > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--brass); }
.stat-guide > summary svg { width: 17px; height: 17px; }
.stat-guide > p { margin: 10px 0 4px; font-size: var(--fs-sm); max-width: 80ch; }
.stat-guide h3 { margin: 16px 0 8px; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.guide-card { display: grid; gap: 6px; align-content: start; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: #ffffff05; font-size: var(--fs-sm); }
.guide-card p { margin: 0; line-height: 1.5; color: var(--ivory-2); }
.guide-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.guide-card li { display: grid; grid-template-columns: 40px 1fr; gap: 6px; color: var(--ivory-2); line-height: 1.4; }
.guide-card li span { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.guide-card .guide-you { color: var(--text); }

/* Cards-only previews size the cards to the box, so five always fit */
.design-preview.cards-only .cards-stage { container-type: inline-size; }
.design-preview.cards-only .mini-cards { --cw: min(15.5cqi, 64px); gap: 1.6cqi; }
.design-preview.cards-only .mini-cards.backs { --cw: min(24cqi, 74px); }

/* Bottom menu: Play in the centre, raised */
.tabbar a.tab-play { color: var(--ink); }
.tabbar a.tab-play svg { width: 26px; height: 26px; padding: 11px; box-sizing: content-box; margin-top: -24px; border-radius: 50%;
  background: var(--brass); color: var(--ink); box-shadow: 0 0 0 4px var(--room, #170f0c), 0 8px 18px -6px #000; }
.tabbar a.tab-play span { color: var(--muted); }
.tabbar a.tab-play[aria-current="page"] span { color: var(--brass); }

/* Phones: shortcuts on the home screen to pages outside the header and bottom menu */
.more-links { display: none; }
@media (max-width: 959px) {
  .more-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .more-links a { display: grid; justify-items: center; gap: 6px; padding: 12px 4px; border-radius: var(--r-lg); border: 1px solid var(--line); background: #ffffff05; color: var(--ivory-2); font-size: var(--fs-xs); font-weight: 600; text-align: center; text-decoration: none; }
  .more-links a:hover { border-color: #d4ab5e66; }
  .more-links svg { width: 22px; height: 22px; color: var(--brass); }
}

.leave-penalty { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-md); background: #ef7b8014; border: 1px solid #ef7b8044; color: var(--ivory-2); }
.leave-penalty svg { width: 18px; height: 18px; color: var(--bad); flex: none; margin-top: 1px; }
.practice-start { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* Shop speed: the promotions slide on their own layer. (No content-visibility on the items: together with the
   previews' container queries it made every item scrolling into view lay out the whole page again, about 2 s each.) */
.promo-track { will-change: transform; }
.promo-slide { min-height: 250px; contain: layout paint; }
.shop-item .avatar-show img { will-change: transform; }
.resend-box { display: grid; gap: 6px; }
.resend-box[hidden] { display: none; }
.resend-box p { margin: 0; font-size: var(--fs-sm); }

/* "Poncler was updated" bar */
.as-bar { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 24px);
  padding: 8px 8px 8px 14px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--brass) 60%, transparent); background: #1d1310f2; box-shadow: 0 14px 30px -12px #000; font-size: var(--fs-sm); }
.as-bar > svg { width: 16px; height: 16px; color: var(--brass); flex: none; }
.as-bar .btn { flex: none; }
@media (max-width: 959px) { .as-bar { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); border-radius: var(--r-lg); } }
.update-bar { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 14px;
  max-width: calc(100vw - 24px); padding: 10px 12px 10px 16px; border-radius: var(--r-lg); background: var(--panel-2); border: 1px solid #d4ab5e88; box-shadow: 0 16px 36px -12px #000d; font-size: var(--fs-md); }
@media (max-width: 959px) { .update-bar { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }

/* Admin: member search and deleting accounts */
.admin-members .shop-search { margin-bottom: 10px; }
.btn.danger-text { color: var(--bad); }
.btn.danger-text svg { width: 14px; height: 14px; }
@media (max-width: 600px) { .admin-members .btn.danger-text span { display: none; } }
.passkey-row { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.passkey-row svg, [data-passkey] svg { width: 16px; height: 16px; }

/* GTO guide (abbreviations and pictures) */
.gto-help { display: grid; gap: 12px; }
.gto-help > p { margin: 0; }
.gto-help h3 { margin: 6px 0 0; }
.gh-grid { display: grid; gap: 8px 18px; margin: 0; }
@media (min-width: 700px) { .gh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gh-term { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.gh-term dt { font-weight: 700; color: var(--brass); }
.gh-term dd { margin: 0; color: var(--ivory-2); font-size: var(--fs-md); line-height: 1.45; }
.gh-pics { display: grid; gap: 12px; }
@media (min-width: 700px) { .gh-pics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gh-pic { display: grid; gap: 8px; align-content: start; padding: 12px 14px; border-radius: var(--r-md); background: #00000030; border: 1px solid var(--line); }
.gh-pic p { margin: 0; font-size: var(--fs-sm); color: var(--ivory-2); line-height: 1.45; }
.gh-cells { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 6px 10px; align-items: center; font-size: var(--fs-sm); }
.gh-cells .gc { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-xs); color: #fff; font: 700 11px/1 var(--sans); text-shadow: 0 1px 1px #0009; }
.gh-scores { display: flex; gap: 10px; }
.gh-key { display: inline-flex; align-items: center; gap: 5px; margin-right: 10px; white-space: nowrap; }
.gh-key .dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* GTO stats (Stats page and GTO lab) */
.gto-stats { display: grid; gap: 14px; }
.gto-stats h3, .gs-cols h3 { margin: 0 0 8px; }
.gs-scope { justify-self: start; max-width: 420px; }
.gto-facts.gs-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .gto-facts.gs-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gs-facts b { font-size: var(--fs-2xl); }
.gs-facts b.good, .gs-list b.good { color: var(--good); } .gs-facts b.warn, .gs-list b.warn { color: var(--warn); } .gs-facts b.bad, .gs-list b.bad { color: var(--bad); }
.gs-trend { display: flex; align-items: flex-end; gap: 3px; height: 90px; padding: 6px 8px; border-radius: var(--r-md); background: #00000030; border: 1px solid var(--line); }
.gs-day { flex: var(--w) 1 0; height: 100%; display: flex; align-items: flex-end; min-width: 4px; }
.gs-day i { display: block; width: 100%; height: var(--h); min-height: 3px; border-radius: 3px 3px 0 0; background: var(--muted); }
.gs-day.good i { background: var(--good); } .gs-day.warn i { background: var(--warn); } .gs-day.bad i { background: var(--bad); }
.gs-note { margin: 0; font-size: var(--fs-xs); }
.gs-cols { display: grid; gap: 16px; }
@media (min-width: 760px) { .gs-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gs-list li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(60px, 1fr) 30px; gap: 2px 10px; align-items: center; font-size: var(--fs-md); }
.gs-list li small { grid-column: 1 / -1; color: var(--muted); font-size: var(--fs-xs); margin-top: -2px; }
.gs-list b { text-align: right; font-variant-numeric: tabular-nums; }
.gs-bar { height: 8px; border-radius: var(--r-pill); background: #ffffff14; overflow: hidden; }
.gs-bar i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--muted); }
.gs-bar.good i { background: var(--good); } .gs-bar.warn i { background: var(--warn); } .gs-bar.bad i { background: var(--bad); }
.gs-leaks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gs-leaks li { display: grid; gap: 2px; padding: 10px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: #ffffff05; }
.gs-leaks .gs-lost { color: var(--bad); }
.gs-leaks span { color: var(--muted); font-size: var(--fs-sm); }
.gs-hands { display: flex; flex-wrap: wrap; gap: 6px; }
.gto-locked { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.gto-locked > svg { width: 22px; height: 22px; color: var(--brass); margin-top: 2px; }
.gto-locked p { margin: 4px 0 10px; }

/* Touch screens: text fields at 16px, so iPhone Safari doesn't zoom in on them (and leave the page zoomed). */
@media (pointer: coarse) {
  .input, select.input, textarea.input, input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], input:not([type]), textarea { font-size: var(--fs-lg); }
  .pin-boxes input { font-size: var(--fs-2xl); }
}
/* Leaderboard: your own place, above the list (also when you're further down than the list goes). */
.lb-you { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 16px; border-radius: var(--r-lg); background: #d4ab5e14; border: 1px solid #d4ab5e44; font-size: var(--fs-base); }
.lb-you b { color: var(--brass); }
/* Admin members: long addresses wrap, and the buttons move to their own line when the row is narrow. */
[data-members] .list-item { flex-wrap: wrap; row-gap: 8px; }
[data-members] .list-item .grow { min-width: 220px; }
[data-members] .list-item .sub { overflow-wrap: anywhere; }
[data-members] .member-actions { gap: 6px; flex-wrap: nowrap; }
/* Landing: feature headings, how it works, and the questions. */
.feature h2 { margin: 0; font-family: var(--sans); color: var(--text); }
.landing-steps h2, .landing-faq h2 { margin: 0 0 14px; font-family: var(--display); font-weight: 400; color: var(--brass); font-size: clamp(26px, 3vw, 34px); }
.landing-steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); counter-reset: step; }
.landing-steps li { display: grid; gap: 4px; border-radius: var(--r-lg); background: #00000026; border: 1px solid var(--line); }
.landing-steps li::before { content: counter(step); font-family: var(--display); color: var(--brass); line-height: 1; }
.landing-steps li span { color: var(--muted); font-size: var(--fs-md); }
.landing-faq { display: grid; gap: 8px; max-width: 760px; }
.landing-faq details { border-top: 1px solid var(--line); padding: 12px 2px; }
.landing-faq summary { cursor: pointer; font-weight: 600; font-size: var(--fs-lg); }
.landing-faq details p { margin: 8px 0 0; color: var(--muted); font-size: var(--fs-md); }
/* Admin avatars: the upload form with a preview of the drawing in its round frame. */
.admin-avatar-new { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.bust-frame.big { width: 120px; height: 120px; }
@media (max-width: 600px) { .admin-avatar-new { grid-template-columns: minmax(0, 1fr); } .admin-avatar-new .bust-frame.big { justify-self: center; } }
[data-avatars] .list-item .bust-frame { width: 48px; height: 48px; flex: none; }
.shop-kind-dot { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #00000033; border: 1px solid var(--line); color: var(--brass); }
[data-shop-admin] .list-item .bust-frame { width: 48px; height: 48px; flex: none; }
[data-shop-admin] .filter-chips { margin-bottom: 4px; }
/* Admin shop list: the eye shows whether an item is in the shop (closed: hidden). */
.eye-toggle { min-width: 40px; justify-content: center; }
.eye-toggle svg { width: 18px; height: 18px; }
.eye-toggle.off { color: var(--muted); border-style: dashed; }
/* The middle Play button while it can start what's on screen (a lobby you host, practice): it says Start and glows. */
.tabbar a.tab-play.start span { color: var(--brass); font-weight: 700; }
.tabbar a.tab-play.start svg { box-shadow: 0 0 0 3px #d4ab5e66, 0 0 22px #d4ab5e66; animation: tab-start 1.6s ease-in-out infinite; }
@keyframes tab-start { 50% { box-shadow: 0 0 0 5px #d4ab5e33, 0 0 28px #d4ab5e88; } }
@media (prefers-reduced-motion: reduce) { .tabbar a.tab-play.start svg { animation: none; } }

/* ---------- Guests and gifts ---------- */
/* Guests have no Elo, chats or notifications: the header keeps sound, help and their menu. */
.guest-shell [data-elo], .guest-shell .menu-wrap:has([data-chat-btn]), .guest-shell .menu-wrap:has([data-bell]) { display: none; }
.guest-shell .tabbar { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.guest-join { display: grid; gap: 12px; width: 100%; }
.guest-join .btn.primary { justify-self: start; }
.guest-or { margin: 0; font-size: var(--fs-sm); }
.guest-hint { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: #d4ab5e10; font-size: var(--fs-sm); }
.guest-hint svg { flex: none; width: 18px; height: 18px; color: var(--brass); margin-top: 1px; }
.guest-keep .form { max-width: 560px; margin-top: 14px; }
.gift-list .invite-row.off { opacity: .5; cursor: default; }
.gift-list input[type="radio"] { accent-color: var(--brass); }
.ov-actions.ov-actions-top { justify-content: flex-start; padding: 16px 0; margin-bottom: 16px; border-bottom: 1px solid var(--line); }

/* ---------- Weekly challenges, friends leaderboard, shared hands ---------- */
.challenges .ch-list { display: grid; gap: 12px; }
.ch { display: flex; align-items: center; gap: 12px; }
.ch .grow { flex: 1; min-width: 0; }
.ch b { font-weight: 600; font-size: var(--fs-md); }
.ch-mark { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; }
.ch-mark svg { width: 15px; height: 15px; }
.ch.done .ch-mark { background: var(--good); border-color: var(--good); color: #10170f; }
.ch.done b { color: var(--muted); }
.ch-bar { height: 6px; margin-top: 6px; border-radius: var(--r-pill); background: #ffffff14; overflow: hidden; }
.ch-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brass), #f0d18a); }
.ch.done .ch-bar i { background: var(--good); }
.ch-n { flex: none; min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: var(--fs-sm); }
.ch-reward { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--muted); }
.ch-reward svg { flex: none; width: 17px; height: 17px; color: var(--brass); }
.challenges.all-done { border-color: #d4ab5e66; }
.challenges { margin-bottom: 18px; }
.lb-tabs { margin-bottom: 14px; }
.lb-week { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 72px; text-align: right; }
.lb-sub-seg { margin-left: auto; }
.share-last { margin-top: 10px; align-self: flex-start; }
.share-hand { display: grid; gap: 12px; }
.share-pic { width: 100%; border-radius: var(--r-md); border: 1px solid var(--line); }
.share-hand img.share-pic { max-height: 62vh; object-fit: contain; background: var(--room-2); } /* (a story picture is tall: it fits the pop-up) */
.share-style { margin: 0; }
.shared-hand .sh-head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.shared-hand .sh-head h1 { font-size: clamp(20px, 3vw, 28px); margin: 0; }
.shared-hand .sh-head p { margin: 4px 0 0; }
.shared-hand .sh-view { display: grid; gap: 12px; }
.shared-hand .rp-steps { max-height: 220px; }
.sh-cta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-top: 18px; }
.sh-cta h2 { margin: 0 0 4px; }
.sh-cta p { margin: 0; max-width: 560px; }
/* Phones: the header's menus open from the screen's right edge (the Elo pill and Chat sit mid-header, so a menu
   hung from their own right edge ran off the left side), and scroll when they're taller than the screen. */
@media (max-width: 959px) {
  .top .menu-wrap { position: static; }
  .top .menu { right: 12px; left: auto; top: calc(100% + 6px); width: min(360px, calc(100vw - 24px));
    max-height: calc(100dvh - var(--top-h) - 110px); overflow-y: auto; overscroll-behavior: contain; }
}
/* An open header menu sits above the floating lobby cards (.mini-games). */
.top:has(.menu:not([hidden])) { z-index: 160; }
/* Phones: the raised Play button pokes ~16px above the bottom menu. Its blur sits on a layer behind the links, so
   browsers that clip a blurred box’s children (Safari) don’t cut it, and floating cards, toasts and the update bar
   keep clear of it. */
@media (max-width: 959px) {
  .tabbar { z-index: 155; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  /* (solid, no blur behind it: Safari on iOS 26 can draw a blurred fixed bar in the wrong place while the page scrolls) */
  .tabbar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #120b0a; }
  #toasts, .update-bar { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}
/* Phones: leaderboard rows keep to the screen. The rank shows as its shield only and "top x%" moves under the name. */
.lb-top-inline { display: none; }
.leaderboard a.grow > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 559px) {
  .leaderboard li { gap: 8px; padding-inline: 4px; }
  .leaderboard .rank { width: 22px; }
  .leaderboard .lb-top { display: none; }
  .lb-top-inline { display: inline; }
  /* (just the chip, without the pill's ring around it) */
  .leaderboard .rank-badge:not(.bare) { flex: none; box-sizing: border-box; width: 26px; height: 26px; padding: 0; gap: 0; justify-content: center; border: 0; background: none; }
  .leaderboard .rank-badge:not(.bare) .rank-ic { width: 22px; height: 22px; }
  .leaderboard .rank-badge:not(.bare) > span { display: none; }
  .leaderboard .elo { font-size: var(--fs-lg); }
}
/* Dashboard: members online, under the greeting. */
.page-head p.members-online { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 4px 12px 4px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: #ffffff06; color: var(--ivory-2); font-size: var(--fs-sm); }
.members-online[hidden] { display: none !important; }
.members-online b { color: var(--text); font-variant-numeric: tabular-nums; }
/* QR codes: the picture fills its light box as a fixed square, centred, the same in every browser. */
.qr { aspect-ratio: 1; display: grid; place-items: center; }
.qr svg, .invite-box .qr svg { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.leaderboard .name-with-flag { display: flex; min-width: 0; }
.lb-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard .name-with-flag .muted { flex: none; }
/* The Play tab: a brass rounded square with the Poncler logo in brown (the logo file as a mask). On Start
   it glows softly. */
.tabbar a.tab-play .tab-disc { display: grid; place-items: center; box-sizing: border-box; width: 48px; height: 48px; margin-top: -24px; border-radius: var(--r-lg);
  background: var(--brass); box-shadow: 0 8px 18px -6px #000; }
.tab-logo { display: block; width: 23px; height: 29px; background: #3d2412;
  -webkit-mask: url(/img/logo.svg) center / contain no-repeat; mask: url(/img/logo.svg) center / contain no-repeat; }
.tabbar a.tab-play.start .tab-disc { animation: tab-glow 1.6s ease-in-out infinite; }
@keyframes tab-glow { 0%, 100% { box-shadow: 0 0 12px #d4ab5e40, 0 8px 18px -6px #000; } 50% { box-shadow: 0 0 26px #d4ab5e99, 0 8px 18px -6px #000; } }
@media (prefers-reduced-motion: reduce) { .tabbar a.tab-play.start .tab-disc { animation: none; } }
/* Phones: Chat is in the bottom menu, so the header leaves it out. */
@media (max-width: 959px) { .top .menu-wrap:has([data-chat-btn]) { display: none; } }
/* Chat on phones: the list of chats, or the one chat opened from it, never both, and no heading or boxes around them.
   An open chat takes the whole screen: its header (back, name, profile) in place of the app's, the message field in
   place of the bottom menu, sized to the visible area (--vv-*) so the keyboard doesn't cover it. */
.convo-back { display: none; }
@media (max-width: 879px) {
  .chat-layout.list-only .convo, .chat-layout.convo-only .threads, .page-head.chat-head { display: none; }
  .chat-layout.notif-mode .threads > :not(.chat-tabs) { display: none; }
  .chat-layout.notif-mode .threads .chat-tabs { margin-bottom: 0; }
  .chat-layout .threads, .chat-layout .notif-panel { padding: 0 !important; border: 0; background: none; box-shadow: none; border-radius: 0; }
  .convo-back { display: inline-flex; flex: none; margin: 0; }
  body.chat-open .top, body.chat-open .tabbar { display: none; }
  body.chat-open .mini-games { top: calc(env(safe-area-inset-top, 0px) + 70px); bottom: auto; }
  .chat-layout.convo-only .convo { position: fixed; z-index: 45; inset: var(--vv-top, 0px) 0 auto 0; height: var(--vv-h, 100dvh); min-height: 0;
    border: 0; border-radius: 0; background: var(--room, #170f0c); }
  .chat-layout.convo-only .convo-head { padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px; background: #140d0bec; }
  .chat-layout.convo-only .messages { padding: 14px 12px; }
  .chat-layout.convo-only .composer { padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: #120b0af2; }
}
/* Stats page: the member card beside rank and Elo, then the period's results (4 tiles a row, 2 on phones), style,
   GTO, achievements and recent hands, all at the page's width. The period switch sits by the title. */
.stats-page .page-head { align-items: center; }
.stats-range { width: min(100%, 440px); }
.stats-top { display: grid; gap: 18px; align-items: start; }
.elo-panel { display: grid; gap: 14px; align-content: start; }
.elo-panel .panel-head { margin: 0; }
.elo-head { display: flex; align-items: center; gap: 14px; }
.elo-head .big { font-size: clamp(32px, 4vw, 42px); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.05; }
.elo-head .muted { font-size: var(--fs-sm); }
.elo-panel .rank-progress { margin-top: 0; }
.elo-panel .elo-head + .rank-progress > .rank-badge, .elo-panel .elo-head + .rank-progress > .rp-top { display: none; }
.stat-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 759px) {
  .stats-page .page-head { align-items: stretch; }
  .stats-range { width: 100%; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat-grid .stat-tile { padding: 12px; }
  .stat-grid .stat-tile .v { font-size: var(--fs-xl); }
  .stats-page .achievements { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stats-page .achv { grid-template-columns: 30px 1fr; padding: 10px; gap: 2px 8px; }
  .stats-page .achv .medal { width: 30px; height: 30px; }
  .stats-page .achv b { font-size: var(--fs-sm); }
  .stats-page .achv small { font-size: var(--fs-2xs); }
}
/* Shop carousel: the arrows' chevrons sit in the middle of their circles; touch screens swipe it sideways. */
.promo-arrow { display: grid; place-items: center; padding: 0; }
.promo-arrow svg { width: 18px; height: 18px; }
.promo-viewport { touch-action: pan-y; }
.info-ov .ov-pills { justify-content: flex-start; }
/* Ad spaces (ads.js): a display banner (a full-width strip, 90 px tall on desktop) that reads as an ad, not as the
   page's own content: its own artwork, a bold headline, a call to action, an "Ad" tag and a way to remove ads. */
.ad-banner { position: relative; border-radius: var(--r-md); overflow: hidden; border: 1px solid #d4ab5e80; box-shadow: 0 14px 30px -18px #000;
  background:
    radial-gradient(ellipse 60% 140% at 12% 50%, color-mix(in srgb, var(--pro) 70%, transparent), transparent 70%),
    linear-gradient(100deg, color-mix(in srgb, var(--pro) 45%, var(--pro-deep)), var(--pro-deep) 55%, var(--room)); }
.ad-body { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; min-height: 90px; padding: 10px 22px 10px 18px;
  color: var(--ivory, #efe5d7); text-decoration: none; }
.ad-body:hover { text-decoration: none; }
.ad-cards { position: relative; width: 74px; height: 64px; }
.ad-card { position: absolute; top: 4px; width: 40px; height: 56px; border-radius: var(--r-sm); background: #f7f1e6; color: #1f1613; box-shadow: 0 6px 14px -4px #000c;
  display: grid; place-items: center; align-content: center; font: 700 17px/1 var(--display); font-style: normal; }
.ad-card b { font: 400 18px/1 sans-serif; margin-top: 2px; }
.ad-card:first-child { left: 2px; transform: rotate(-12deg); }
.ad-card.red { left: 28px; transform: rotate(9deg); color: #b4232c; }
.ad-copy { display: grid; gap: 3px; min-width: 0; }
.ad-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.ad-kicker svg { width: 14px; height: 14px; }
.ad-copy strong { font: 400 clamp(19px, 2.3vw, 26px)/1.1 var(--display); color: #f6e7c3; letter-spacing: .01em; }
.ad-sub { font-size: var(--fs-sm); color: #e8d9c4cc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px 11px 20px; border-radius: var(--r-pill); white-space: nowrap; background: linear-gradient(180deg, #f0cd7c, #c8963f); color: #1f1613; font-weight: 800; font-size: var(--fs-base); }
.ad-cta small { font-weight: 600; font-size: var(--fs-xs); opacity: .75; }
.ad-cta svg { width: 16px; height: 16px; }
.ad-body:hover .ad-cta { filter: brightness(1.06); }
.ad-tag { position: absolute; top: 0; left: 0; z-index: 1; padding: 2px 7px; border-radius: 0 0 6px 0; background: #f0cd7c; color: #1f1613;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; }
.ad-remove { position: absolute; right: 10px; bottom: 4px; z-index: 1; font-size: var(--fs-2xs); color: #e8d9c499; text-decoration: underline; text-underline-offset: 2px; }
.ad-remove:hover { color: var(--brass); }
@media (max-width: 700px) {
  .ad-body { grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; padding: 16px 14px 24px; }
  .ad-cards { width: 58px; height: 52px; }
  .ad-card { width: 32px; height: 46px; font-size: var(--fs-md); }
  .ad-card b { font-size: var(--fs-base); }
  .ad-card.red { left: 22px; }
  .ad-sub { white-space: normal; }
  .ad-cta { grid-column: 1 / -1; justify-content: center; }
}
.admin-ads .ad-banner { margin-top: 4px; }
/* Play: "Find a game" next to the competitive search. */
.find-card { background: radial-gradient(ellipse 90% 100% at 0% 0%, #17301f, #1a110e 70%); border-color: #7fd49a33; }
.find-card .field { margin: 0; }
.again-row { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 12px; border-radius: var(--r-md); background: #d4ab5e10; border: 1px solid #d4ab5e33; font-size: var(--fs-sm); }
/* Friends: "People you may know" is a quiet column at the side (under the lists on phones). */
.friends-layout { display: grid; gap: 18px; align-items: start; }
@media (min-width: 1100px) { .friends-layout:has(> .suggest-side:not([hidden])) { grid-template-columns: minmax(0, 1fr) 280px; } }
.suggest-side { padding: 14px; display: grid; gap: 8px; }
.suggest-side .panel-head { margin-bottom: 4px; }
/* Cards on the Friends page (and its groups: .gx-card below): a grid, faces with an online dot, actions at the bottom */
.fr-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.fr-face { position: relative; display: inline-flex; align-self: start; border-radius: 50%; }
.fr-face .online-dot { position: absolute; right: 0; bottom: 2px; width: 12px; height: 12px; box-shadow: 0 0 0 3px var(--panel-2); }
.fr-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.fr-acts .btn { flex: 1 1 auto; justify-content: center; }
.fr-more { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-left: -10px; border-radius: 50%; background: var(--panel); box-shadow: 0 0 0 2px var(--room);
  font-size: var(--fs-2xs); font-weight: 700; color: var(--muted); }
/* A group as a card (yours and Explore groups): a banner (or the felt) on top, then its name, description and friends in it */
.gx-search { max-width: 420px; margin-bottom: 14px; }
.gx-card { display: grid; grid-template-rows: auto 1fr auto; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: color-mix(in srgb, var(--panel-2) 70%, transparent); transition: border-color .2s; }
.gx-card:hover { border-color: var(--line-2); }
.gx-banner { display: grid; place-items: center; aspect-ratio: 10 / 3; color: color-mix(in srgb, var(--brass) 55%, transparent);
  background: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--felt) 70%, transparent), transparent 70%), var(--felt-deep); }
.gx-banner.has-banner { background: var(--banner) center / cover; }
.gx-banner svg { width: 28px; height: 28px; }
.gx-body { display: grid; align-content: start; gap: 4px; padding: 12px 14px 0; min-width: 0; }
.gx-body .title { color: var(--text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.gx-body .title:hover { color: var(--brass); }
.gx-desc { margin: 0; color: var(--ivory-2); font-size: var(--fs-sm); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gx-body .sub { color: var(--muted); font-size: var(--fs-xs); }
.gx-card .fr-acts { margin: 12px 14px 14px; }
.gx-friends { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.gx-friends .face-stack .avatar { --s: 24px; }
.gx-friends small { color: var(--muted); font-size: var(--fs-xs); }
.gx-step { margin: 0 2px 10px; }
.fr-requests { border-color: color-mix(in srgb, var(--brass) 35%, transparent); background: linear-gradient(color-mix(in srgb, var(--brass) 7%, var(--panel)), #1a110ecc); }
@media (max-width: 560px) {
  .fr-requests .list-item { flex-wrap: wrap; }
  .fr-requests .list-item .grow { flex-basis: calc(100% - 52px); }
  .fr-requests .list-item > .btn:first-of-type, .fr-requests .list-item > .pill { margin-left: 50px; }
}
.suggest-list { display: grid; gap: 2px; }
.suggest-row { display: flex; align-items: center; gap: 10px; padding: 6px 2px; }
.suggest-row .grow { min-width: 0; display: grid; }
.suggest-row a { color: var(--text); font-size: var(--fs-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.suggest-row small { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggest-row .pill { padding: 3px 6px; }
.suggest-row .pill svg { width: 14px; height: 14px; }
/* Recent hands (Stats) and recent results (Play): quiet, one line each. */
.quiet-panel { background: #ffffff04; padding: 14px 16px; }
.quiet-panel .panel-head { margin-bottom: 6px; }
.quiet-panel .panel-head h3 { margin: 0; }
.compact-list { display: grid; }
.compact-row { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; font-size: var(--fs-sm); }
.compact-row:first-child { border-top: 0; }
a.compact-row:hover { background: #ffffff06; text-decoration: none; }
.compact-row .cr-what { min-width: 0; }
.compact-row .cr-what small { color: var(--muted); font-size: var(--fs-xs); }
.compact-row .cr-cards { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.compact-row .amount { flex: none; font-size: var(--fs-sm); }
.compact-row .cr-link { display: grid; place-items: center; color: var(--brass); }
.compact-row .cr-link svg { width: 15px; height: 15px; }
.place-badge.small { min-width: 30px; height: 22px; font-size: var(--fs-2xs); padding: 0 6px; }
/* Stats: the member card tilts towards the mouse (set in me.js), with a soft shine following it. */
.compact-row .cr-what { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
/* The banner moves like a display ad: a sheen sweeps across, the stripes drift, the cards bob and the button glows.
   Nothing moves with reduced motion. */
.ad-banner { isolation: isolate; }
.ad-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(120deg, #ffffff0a 0 2px, transparent 2px 14px); background-size: 200% 100%; animation: ad-drift 18s linear infinite; }
.ad-banner::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; pointer-events: none;
  background: linear-gradient(100deg, transparent, #fff3d61c 45%, #fff3d633 50%, #fff3d61c 55%, transparent); transform: skewX(-18deg); animation: ad-sheen 5.5s ease-in-out infinite; }
.ad-card { animation: ad-bob-a 3.4s ease-in-out infinite; }
.ad-card.red { animation-name: ad-bob-b; animation-delay: -.9s; }
.ad-cta { box-shadow: 0 6px 16px -6px #000, inset 0 1px 0 #fff6; animation: ad-glow 2.6s ease-in-out infinite; }
.ad-cta svg { animation: ad-nudge 2.6s ease-in-out infinite; }
.ad-kicker svg { animation: ad-crown 3.2s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes ad-drift { to { background-position: -200% 0; } }
@keyframes ad-sheen { 0%, 55% { left: -40%; } 100% { left: 120%; } }
@keyframes ad-bob-a { 0%, 100% { transform: rotate(-12deg) translateY(0); } 50% { transform: rotate(-16deg) translateY(-4px); } }
@keyframes ad-bob-b { 0%, 100% { transform: rotate(9deg) translateY(0); } 50% { transform: rotate(13deg) translateY(-5px); } }
@keyframes ad-glow { 0%, 100% { box-shadow: 0 6px 16px -6px #000, inset 0 1px 0 #fff6, 0 0 0 0 #f0cd7c00; } 50% { box-shadow: 0 6px 16px -6px #000, inset 0 1px 0 #fff6, 0 0 22px 2px #f0cd7c66; } }
@keyframes ad-nudge { 0%, 60%, 100% { transform: translateX(0); } 75% { transform: translateX(4px); } }
@keyframes ad-crown { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-10deg) scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
  .ad-banner::before, .ad-banner::after, .ad-card, .ad-cta, .ad-cta svg, .ad-kicker svg { animation: none; }
  .ad-banner::after { display: none; }
}
/* Pro: monthly or yearly. */
.plan-pick { display: grid; gap: 8px; }
.plan-pick .btn { justify-content: center; }
.plan-year small { margin-left: 6px; padding: 2px 7px; border-radius: var(--r-pill); background: #7fd49a26; color: var(--good); font-size: var(--fs-2xs); font-weight: 700; }
/* Dashboard: hand of the week. */
.how-panel { display: grid; gap: 10px; align-content: start; } /* (stretched to its neighbour's height, its rows stay as tall as their content) */
.how-panel .panel-head { margin: 0; }
.how-panel .panel-head h2 svg { width: 18px; height: 18px; color: var(--brass); vertical-align: -3px; }
.how-row { display: flex; align-items: center; gap: 12px; }
.how-row .grow { display: grid; gap: 2px; }
.how-panel .btn { justify-self: start; align-self: start; }
/* Shared results page. */
.sr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sr-list li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r-md); border: 1px solid var(--line); }
.sr-list li.first { border-color: #d4ab5e55; background: #d4ab5e10; }
.sr-list .grow { min-width: 0; font-weight: 600; }
.sr-list b { font-variant-numeric: tabular-nums; }
/* Dialogs scroll on their own and hold the page still behind them; the height is the visible screen (dvh), so on
   phones the browser bars don't hide the bottom of a dialog, and its buttons stay in view at the bottom. */
html:has(dialog.modal[open]), html:has(dialog.modal[open]) body { overflow: hidden; }
dialog.modal { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@media (max-width: 959px) {
  dialog.modal, dialog.modal.wide { width: calc(100vw - 16px); max-width: none;
    max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
  dialog.modal .modal-body { padding: 18px 16px; }
  dialog.modal .modal-actions { position: sticky; bottom: 0; z-index: 3; margin: 0 -16px -18px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(#00000000, var(--panel) 14px); }
}
/* History: highlights (your craziest hands) in a row that scrolls sideways, and a game's play of the game. */
.highlights { display: grid; gap: 10px; margin-bottom: 18px; min-width: 0; }
.highlights h2 { display: inline-flex; align-items: center; gap: 8px; }
.highlights h2 svg { width: 20px; height: 20px; color: var(--brass); }
.hl-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 270px); gap: 12px; overflow-x: auto; padding-bottom: 6px;
  scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: thin; }
.hl-card { display: grid; gap: 6px; align-content: start; padding: 14px; border-radius: var(--r-lg); color: var(--text); border: 1px solid #d4ab5e40; background: radial-gradient(120% 90% at 0% 0%, #6e1f2a55, transparent 60%), var(--panel); cursor: pointer; font: inherit; }
.hl-card:hover { border-color: var(--brass); transform: translateY(-2px); }
.hl-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.hl-title { font-size: var(--fs-lg); }
.hl-pot { font-size: var(--fs-xs); margin-top: -4px; }
.hl-cards { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-base); font-variant-numeric: tabular-nums; }
.hl-board { padding-left: 8px; border-left: 1px solid var(--line); }
.hl-shown { display: grid; gap: 2px; font-size: var(--fs-xs); color: var(--muted); }
.hl-shown .good b { color: var(--good); }
.hl-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: var(--fs-xs); margin-top: 2px; }
.hl-foot .muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-potg { display: grid; gap: 6px; margin: 8px 0 10px; }
.rp-potg .eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--brass); }
.rp-potg .eyebrow svg { width: 14px; height: 14px; }
.hl-card.small { padding: 10px 12px; gap: 4px; }
.hl-card.small .hl-title { font-size: var(--fs-base); }
/* Admin: the page's parts as tabs. */
.admin-tabs { margin-bottom: 16px; }
.admin-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.admin-tabs svg { width: 16px; height: 16px; }
.admin-pane { gap: 16px; }
.admin-pane > .grid-2, .admin-pane > .grid-3 { margin: 0; }
.admin-pane .panel { align-content: start; }
/* History: the replay (only once a hand or highlight is opened) across the top; below it your games, with the
   highlights in a column beside them on wide screens and a row that scrolls sideways above them on narrow ones. */
.hist-layout { display: grid; gap: 18px; align-items: start; }
.hist-layout > .replay-view { grid-column: 1 / -1; padding: 16px; border-radius: var(--r-lg); border: 1px solid #d4ab5e55; background: var(--panel); scroll-margin-top: calc(var(--top-h, 64px) + 12px); }
.hist-layout > .replay-view[hidden] { display: none; }
.hist-main { display: grid; gap: 18px; min-width: 0; }
.hist-main .rp-games { max-height: none; overflow: visible; }
.hist-main .replay-list { position: static; } /* (scrolls with the page: stuck at the top, the Pro card below would slide under it) */
.hist-side { display: grid; gap: 10px; min-width: 0; }
.hist-side h2 { display: inline-flex; align-items: center; gap: 8px; }
.hist-side h2 svg { width: 20px; height: 20px; color: var(--brass); }
.hl-col { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 270px); gap: 12px; overflow-x: auto; padding-bottom: 6px;
  scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: thin; }
.hl-card.on { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass); }
@media (max-width: 1099px) { .hist-side { order: 1; } .hist-main { order: 2; } .hist-layout > .replay-view { order: 0; } }
@media (min-width: 1100px) {
  .hist-layout:has(> .hist-side:not([hidden])) { grid-template-columns: minmax(0, 1fr) 320px; } /* (the list takes the width when there are no highlights) */
  .hl-col { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; padding: 0; }
  .hist-side { position: sticky; top: calc(var(--top-h, 64px) + 16px); max-height: calc(100vh - var(--top-h, 64px) - 32px); overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }
}
/* The replay's table is only as large as fits with its controls on the screen. */
.hist-layout .replay-view [data-rp-table] { width: 100%; max-width: max(320px, calc((100dvh - var(--top-h, 64px) - 400px) * 1.78)); justify-self: center; }
@media (max-width: 959px) { .hist-layout > .replay-view { padding: 10px; } }
/* History, a game on the table (theater): the page fits the window. Title, ads, highlights and the games list step
   aside; the replay is the table with its controls, and a side column holds the odds, the game's hands and the steps. */
.hist-viewing { padding-block: 12px; gap: 12px; max-width: var(--wide-w); } /* (a replay is the game table: wide, as at a game) */
.hist-viewing > .page-head, .hist-viewing > .ad-banner, .hist-viewing .hist-side, .hist-viewing .hist-main { display: none; }
.hist-viewing .hist-layout { display: block; }
.hist-viewing .hist-layout > .replay-view { display: grid; gap: 10px 16px; padding: 12px 14px; height: calc(100dvh - var(--top-h, 64px) - 24px);
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
.hist-viewing .rp-head { grid-column: 1 / -1; }
.rp-play { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.hist-viewing .rp-play [data-rp-table] { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%; max-width: none; }
.hist-viewing .rp-play .table-wrap { flex: 1 1 auto; min-height: 0; container: fit / size; display: grid; place-items: center; padding-block: 4px 2px; }
.hist-viewing .rp-play .stage { container: table / inline-size; width: min(100cqw, calc(100cqh * 16 / 9)); }
.hist-viewing .rp-play .stage.portrait { width: min(100cqw, calc(100cqh * 3 / 4.4)); }
.hist-viewing .rp-play .rp-controls { flex: none; padding: 8px 12px; }
.rp-side { display: grid; gap: 12px; align-content: start; min-width: 0; min-height: 0; }
.hist-viewing .rp-side { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.rp-side .replay-list { padding: 12px; position: static; } /* not sticky inside the side column: it would slide over the steps */
.rp-side .replay-list .rp-games { max-height: none; }
.rp-side .rp-steps { max-height: 220px; }
/* Wide screens: the side column beside the table. */
@media (min-width: 1100px) {
  .hist-viewing .hist-layout > .replay-view { grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto minmax(0, 1fr); }
  .hist-viewing .rp-side .replay-list { order: 2; }
  .hist-viewing .rp-side .rp-odds { order: 1; }
  .hist-viewing .rp-side .rp-steps { order: 3; }
}
/* Narrower: the table and its controls fill the screen; the side column follows below it. */
@media (max-width: 1099px) {
  .hist-viewing .hist-layout > .replay-view { height: auto; grid-template-rows: auto auto auto; }
  .hist-viewing .rp-play { height: calc(100dvh - var(--top-h, 64px) - 150px); min-height: 340px; }
}
@media (max-width: 959px) { .hist-viewing .rp-play { height: calc(100dvh - 64px - 84px - 160px); } .hist-viewing .rp-head .btn span, .hist-viewing .rp-head .btn { font-size: var(--fs-sm); } }
/* The left menu never makes the page taller than the window: on short windows it scrolls inside itself. */
.side { max-height: 100vh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
/* Phones, in a game: the page is exactly the visible screen. 100vh is the screen without the browser's bars, so the
   shell's usual min-height made the page taller than the game (by the bars) and it scrolled; the game scrolls
   inside itself where it needs to (sheets, the in-person view), never the page. */
@media (max-width: 959px) {
  html:has(body.in-game), body.in-game { height: 100dvh; overflow: hidden; overscroll-behavior: none; }
  body.in-game .shell, body.in-game .public { min-height: 0; height: 100dvh; overflow: hidden; }
}
.hl-card:disabled { cursor: default; opacity: 1; } .hl-card:disabled:hover { transform: none; border-color: #d4ab5e40; }
/* Profile: best plays in a row that scrolls sideways, friends as avatars, groups as pills. */
/* Profile: a band on the felt with who they are and their member card small (it opens full size); highlights,
   achievements and games together below, friends (or people you may know) in a column beside them */
.pf-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 24px;
  background: radial-gradient(110% 150% at 0% 0%, color-mix(in srgb, var(--felt) 60%, transparent), transparent 62%), linear-gradient(var(--panel-2), var(--panel));
  border-color: color-mix(in srgb, var(--brass) 28%, transparent); }
.pf-id { display: flex; align-items: center; gap: 22px; min-width: 0; }
.pf-face { position: relative; flex: none; display: inline-flex; border-radius: 50%; box-shadow: 0 0 0 3px var(--panel-2), 0 0 0 4px color-mix(in srgb, var(--brass) 45%, transparent), 0 18px 34px -18px #000; }
.pf-face.on { box-shadow: 0 0 0 3px var(--panel-2), 0 0 0 5px var(--good), 0 18px 34px -18px #000; }
.pf-face .online-dot { position: absolute; right: 4px; bottom: 6px; width: 16px; height: 16px; box-shadow: 0 0 0 3px var(--panel-2); }
.pf-who { display: grid; gap: 6px; min-width: 0; }
.pf-who h1 { font-size: clamp(26px, 3.2vw, 34px); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; overflow-wrap: anywhere; }
.pf-who h1 .pill svg { width: 13px; height: 13px; vertical-align: -2px; }
.pf-handle { margin: 0; color: var(--muted); font-size: var(--fs-md); }
.pf-bio { margin: 2px 0 0; max-width: 60ch; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.pf-acts { flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.pf-acts .pill svg { width: 13px; height: 13px; vertical-align: -2px; }
/* The member card, small: a click opens it full size */
.pf-mini { display: grid; justify-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; font: inherit; }
.pf-mini-card { display: block; width: 220px; border-radius: var(--r-md); overflow: hidden; box-shadow: 0 20px 36px -20px #000, 0 0 0 1px #ffffff14; transform: rotate(-3deg); transition: transform .25s ease, box-shadow .25s ease; }
.pf-mini-card canvas { display: block; width: 100%; height: auto; }
.pf-mini:hover .pf-mini-card, .pf-mini:focus-visible .pf-mini-card { transform: rotate(0deg) translateY(-3px) scale(1.03); box-shadow: 0 26px 44px -20px #000, 0 0 0 1px color-mix(in srgb, var(--brass) 60%, transparent); }
.pf-mini-hint { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; }
.pf-mini-hint svg { width: 14px; height: 14px; }
.pf-mini:hover .pf-mini-hint { color: var(--brass); }
/* The member card opened from a profile: the card alone over the dimmed page */
dialog.card-pop { width: min(640px, calc(100vw - 32px)); padding: 0; border: 0; background: none; overflow: visible; }
dialog.card-pop::backdrop { background: #0d0807d9; backdrop-filter: blur(4px); }
dialog.card-pop .profile-card .tilt-card, dialog.card-pop .profile-card canvas { max-width: none; width: 100%; }
.card-pop-x { position: fixed; top: 16px; right: 16px; }
html:has(dialog.card-pop[open]) { overflow: hidden; }
dialog.card-pop .card-actions { justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pf-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 320px); gap: 18px; align-items: start; }
.pf-main { min-width: 0; }
.pf-plays { height: 248px; align-items: stretch; overflow-y: hidden; } /* (one height for Recent and Best) */
.pf-main .panel-head h2, .pf-side .panel-head h2 { display: inline-flex; align-items: center; gap: 8px; }
.pf-main .panel-head h2 svg, .pf-side .panel-head h2 svg { width: 18px; height: 18px; color: var(--brass); }
.pf-side { display: flex; flex-direction: column; min-width: 0; }
.pf-people { display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow-y: auto; margin: 0 -8px; }
/* Beside the page: the column stays in view, its list scrolling inside it */
@media (min-width: 961px) { .pf-side { position: sticky; top: calc(var(--top-h, 64px) + 16px); max-height: calc(100vh - var(--top-h, 64px) - 32px); }
  .pf-side .pf-people { flex: 1 1 auto; min-height: 0; max-height: none; } }
.pf-all { align-self: flex-start; margin-top: 10px; }
.fr-all { display: block; margin: 12px auto 0 0; }
.fr-all-list { max-height: min(62vh, 560px); overflow-y: auto; }
.pf-all-list .pf-people { max-height: min(60vh, 520px); margin: 0; }
.pf-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.pf-links > * { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: var(--r-md); border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-2) 70%, transparent); color: var(--text); font: 600 var(--fs-md) var(--sans); text-decoration: none; cursor: pointer; text-align: left; }
.pf-links > * span { flex: 1; min-width: 0; }
.pf-links > * svg { width: 18px; height: 18px; flex: none; color: var(--brass); }
.pf-links > *:hover { border-color: var(--line-2); color: var(--brass); }
.pf-links .pf-logout, .pf-links .pf-logout svg { color: var(--bad); }
@media (max-width: 960px) {
  .pf-body { grid-template-columns: minmax(0, 1fr); }
  .pf-hero { grid-template-columns: minmax(0, 1fr); padding: 20px 18px; }
  .pf-mini { justify-self: start; grid-auto-flow: column; align-items: center; gap: 14px; }
  .pf-mini-card { width: 168px; }
}
@media (max-width: 560px) {
  .pf-id { flex-direction: column; align-items: flex-start; gap: 14px; }
  .pf-face .avatar { --s: 84px !important; }
}
.pf-person { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-md); color: inherit; min-width: 0; }
.pf-person a { color: inherit; text-decoration: none; }
.pf-person .pill { flex: none; }
.pf-person:hover { background: #ffffff0a; }
.pf-person a:hover b { color: var(--brass); }
.pf-person .grow { flex: 1; display: grid; min-width: 0; line-height: 1.25; }
.pf-person b, .pf-person small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-person b { font-size: var(--fs-md); font-weight: 600; }
.pf-person small { font-size: var(--fs-xs); }
.pf-on { width: 8px; height: 8px; border-radius: 50%; background: var(--good); flex: none; }
.pf-sub { margin: 14px 0 8px; }
.pf-groups { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-groups .pill { text-decoration: none; color: inherit; display: inline-flex; align-items: center; gap: 6px; }
.pf-groups .pill svg { width: 14px; height: 14px; }
/* Stats: the page's parts as tabs. */
.stats-tabs { margin-bottom: 4px; }
.stats-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.stats-tabs svg { width: 16px; height: 16px; }
.stats-pane { gap: 18px; }
.stats-pane[hidden] { display: none; }
@media (max-width: 640px) { .stats-tabs button { padding-inline: 8px; font-size: var(--fs-sm); } .stats-tabs svg { display: none; } }

/* Password fields: a Show button inside the field's right end */
.pw-wrap { position: relative; display: block; }
.pw-wrap .input { width: 100%; padding-right: 46px; }
.pw-eye { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 38px; height: 38px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); cursor: pointer; padding: 0; }
.pw-eye:hover, .pw-eye[aria-pressed="true"] { color: var(--brass); }
.pw-eye:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.pw-eye svg { width: 20px; height: 20px; }

/* Profile: how many friends and groups, under the name */
.pf-counts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 2px; font-size: var(--fs-md); color: var(--muted); }
.pf-counts b { color: var(--text); font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.gift-pick { max-height: 52vh; overflow-y: auto; }
.gift-pick .invite-row { width: 100%; text-align: left; background: none; border: 0; color: inherit; cursor: pointer; font: inherit; }

/* Practice set-up pop-up: the game and opponents beside the rules (one column on phones) */
.practice-form { align-items: start; gap: 18px; }
.practice-form h3 { margin: 0; }
@media (max-width: 959px) { .practice-form { grid-template-columns: minmax(0, 1fr); } }

/* Admin: member filters in a row (two by two on phones), rows that wrap their buttons under them on phones, and tabs
   that keep to one row */
.member-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 10px; margin-bottom: 8px; }
.member-filters .field { margin: 0; }
.member-filters .input { padding-block: 8px; }
.admin-members .list-item { flex-wrap: wrap; row-gap: 6px; }
.admin-members .list-item .grow { min-width: 0; }
.admin-members .list-item .sub { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .member-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-members .member-actions { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
  .admin-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .admin-tabs button { flex: 1 0 auto; padding: 8px 10px; font-size: var(--fs-sm); }
  .admin-pane > .grid-2, .admin-pane > .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .admin-pane > .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .admin-stats .stat-tile { padding: 12px; }
  .admin-stats .stat-tile .v { font-size: var(--fs-2xl); }
}

/* Signing in with Google, Facebook, Apple or X */
.oauth-list { display: grid; gap: 8px; }
.oauth-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: var(--fs-sm); margin: 4px 0; }
.oauth-or::before, .oauth-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.oauth-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.oauth-btn svg { width: 18px; height: 18px; }
.o-google svg, .o-apple svg { fill: currentColor; stroke: none; }
.o-facebook svg { color: #1877f2; }

/* History on phones: highlight cards keep their contents inside (long boards and hand names wrap), and a replay
   drops its nested boxes so the table and the controls get the room: no frame round the replay, a one-line step text,
   the hands and the log without their own frames. */
.hl-card { scroll-snap-align: start; text-align: left; transition: border-color .15s ease, transform .15s ease; min-width: 0; overflow: hidden; }
.hl-card > * { min-width: 0; overflow-wrap: anywhere; }
.hl-cards .hl-board { display: inline-flex; flex-wrap: wrap; gap: 2px; }
@media (max-width: 959px) {
  .hl-row { grid-auto-columns: minmax(220px, 78vw); }
  .hist-viewing .hist-layout > .replay-view { padding: 0; border: 0; background: none; box-shadow: none; gap: 8px; }
  .hist-viewing .rp-head .sub { font-size: var(--fs-xs); }
  /* Short phones scroll the page a little rather than squeeze the table below the phone layout's size. */
  .hist-viewing .rp-play { height: calc(100dvh - var(--top-h, 64px) - 84px - 110px); min-height: 480px; }
  .hist-viewing .rp-play .controls .status { padding: 6px 10px; font-size: var(--fs-sm); line-height: 1.35; min-height: 0; }
  .hist-viewing .rp-play .rp-controls { padding: 6px 0 0; background: none; border: 0; gap: 6px; }
  .hist-viewing .rp-play .rp-controls .icon-btn { width: 38px; height: 38px; }
  .hist-viewing .rp-side .replay-list, .hist-viewing .rp-side .rp-game { padding: 0; border: 0; background: none; box-shadow: none; }
  .hist-viewing .rp-side .rp-steps { border: 0; background: none; padding: 0; max-height: 40vh; }
  .hist-viewing .rp-side { gap: 12px; }
}

/* Shared results: starting chips and the net result in chips (and big blinds for cash games) on each row */
.sr-list .sr-start { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: var(--fs-md); }
.sr-list .sr-net { display: grid; justify-items: end; font-variant-numeric: tabular-nums; min-width: 72px; }
.sr-list .sr-net small { font-size: var(--fs-xs); }

/* Recent results (Play page): rows never grow wider than the panel; on phones the details go under the name */
.compact-list { grid-template-columns: minmax(0, 1fr); }
.compact-row .amount, .compact-row > small { flex: none; white-space: nowrap; }
@media (max-width: 600px) {
  .compact-row .cr-what small { display: block; overflow: hidden; text-overflow: ellipsis; }
  .compact-row .cr-dot { display: none; }
}
.compact-row .cr-dot { font-style: normal; }
/* Member cards in the shop, on the Design page and in the inspector: lift on hover, tilt towards the pointer with a
   soft sheen (tiltCards in ui.js); the inspector's card rises into place with a sheen passing over it. */
.tilt-card { position: relative; display: block; border-radius: var(--r-lg); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), filter .3s; will-change: transform; }
.tilt-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), #ffffff38, transparent 55%); mix-blend-mode: soft-light; }
.tilt-card.tilting { transition: transform .08s linear; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.03); }
.tilt-card.tilting::after { opacity: 1; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .look-btn:hover .tilt-card, .shop-item:hover .tilt-card { transform: perspective(900px) rotateX(var(--rx, 6deg)) rotateY(var(--ry, -8deg)) translateY(-4px); filter: drop-shadow(0 14px 16px #0009); }
}
:is(.inspect-card, .profile-card) .tilt-card { border-radius: var(--r-lg); }
.profile-card .tilt-card { max-width: 520px; }
:is(.inspect-card, .profile-card) .tilt-card.rise { animation: card-rise .9s cubic-bezier(.2, .8, .2, 1) backwards; }
:is(.inspect-card, .profile-card) .tilt-card.rise::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: linear-gradient(105deg, transparent 35%, #fff4d955 50%, transparent 65%) -150% 0 / 250% 100% no-repeat; animation: card-sheen 1.6s .5s ease both; }
@keyframes card-rise { from { opacity: 0; transform: perspective(1100px) rotateX(24deg) translateY(36px) scale(.92); } to { opacity: 1; transform: perspective(900px); } }
@keyframes card-sheen { from { background-position: -150% 0; } to { background-position: 250% 0; } }
@media (prefers-reduced-motion: reduce) { :is(.inspect-card, .profile-card) .tilt-card.rise, :is(.inspect-card, .profile-card) .tilt-card.rise::before { animation: none; } :is(.inspect-card, .profile-card) .tilt-card.rise::before { content: none; } }

/* Admin · Payments */
.pay-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; height: 160px; }
.pay-months .pm { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 4px; text-align: center; }
.pay-months .pm-bar { align-self: end; display: block; min-height: 2px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--brass), #8a6424); }
.pay-months small { font-size: var(--fs-2xs); color: var(--muted); }
.pay-filters { flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.pay-filters .shop-search { flex: 1; min-width: 200px; }
.pay-table td { white-space: nowrap; }
.pay-table .num { text-align: right; }
.pay-table td:nth-child(3) { white-space: normal; min-width: 220px; }

/* Play: Find a game folds its filters behind More options */
.find-summary { font-size: var(--fs-md); }
.find-summary [data-find-summary] span { color: var(--text); }

/* Landing: right now on Poncler (members online, the week's biggest showdown) */
.landing-live { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin-top: -28px; padding: 14px 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: #00000026; font-size: var(--fs-base); }
.landing-live[hidden] { display: none; }
.ll-online { display: inline-flex; align-items: center; gap: 8px; color: var(--ivory-2); }
.ll-hand { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ll-hand > b { color: var(--brass); font-weight: 600; }
.ll-board { display: inline-flex; gap: 3px; --cw: 26px; }
.ll-board .card { animation: none; }
/* Leaderboard: the season (this month's Elo won) */
.lb-season { font-variant-numeric: tabular-nums; font-weight: 700; }
.lb-last { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 0 0 12px; font-size: var(--fs-md); }
.lb-last .pill { gap: 6px; }


/* Stats: the overview's hero (net result of the period, the key shares), highs and lows, recent games */
.stats-hero { display: grid; gap: 22px; padding: 26px; border-radius: var(--r-xl); border: 1px solid #d4ab5e40;
  background: radial-gradient(ellipse 70% 120% at 0% 0%, #3f1a24, #1a110e 60%); }
.stats-hero.up { background: radial-gradient(ellipse 70% 120% at 0% 0%, #1d3a2b, #1a110e 60%); }
.stats-hero.down { background: radial-gradient(ellipse 70% 120% at 0% 0%, #4a1a22, #1a110e 60%); }
@media (min-width: 900px) { .stats-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; } }
.sh-main { display: grid; gap: 6px; }
.sh-big { font-size: clamp(40px, 6vw, 64px); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.sh-line { margin: 0; color: var(--ivory-2); font-size: var(--fs-md); }
.sh-facts { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sh-facts > div { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-md); background: #00000030; border: 1px solid #ffffff10; }
.sh-facts small { font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sh-facts b { font-size: var(--fs-2xl); font-variant-numeric: tabular-nums; line-height: 1.1; }
.sh-facts .muted { font-size: var(--fs-xs); }
.stat-tile .eyebrow { display: inline-flex; align-items: center; gap: 6px; }
.stat-tile .eyebrow svg { width: 13px; height: 13px; color: var(--brass); }
.stat-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.elo-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.range-bar i { display: block; height: 100%; }
.range-bar .neg { background: linear-gradient(90deg, #e0565b22, #e0565b); border-radius: 7px 0 0 7px; margin-left: auto; }
.range-bar { position: relative; justify-content: center; height: 14px; border-radius: var(--r-sm); background: #ffffff10; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; }
.range-bar .neg { justify-self: end; } .range-bar .pos { background: linear-gradient(90deg, #7fd49a, #7fd49a22); border-radius: 0 7px 7px 0; margin-right: auto; justify-self: start; }
.range-bar .zero { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; background: var(--ivory-2); }
.range-ends { display: flex; justify-content: space-between; font-size: var(--fs-sm); }
.range-ends span { display: grid; } .range-ends small { color: var(--muted); font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; } .range-ends b { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.range-ends span:last-child { text-align: right; }
.recent-games { display: grid; }
.rg-row { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; border-radius: var(--r-sm); }
.rg-row:first-child { border-top: 0; }
.rg-row:hover { background: #ffffff08; }
.rg-row .grow { min-width: 0; display: grid; } .rg-row .grow b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rg-row small { font-size: var(--fs-xs); }
.rg-net { display: grid; text-align: right; font-variant-numeric: tabular-nums; } .rg-net small { font-size: var(--fs-2xs); }
.achv-progress { height: 8px; border-radius: var(--r-xs); background: #ffffff12; overflow: hidden; margin: -6px 0 14px; }
.achv-progress i { display: block; height: 100%; border-radius: var(--r-xs); background: var(--brass); }
.achv:not(.done) .medal svg { width: 15px; height: 15px; }
.stats-grid-2 { align-items: start; }

/* Password fields show Poncler's own eye only (Edge adds a reveal button of its own otherwise) */
input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear { display: none; }

/* Stats, playing style: the style card (the read, and two scales in the HUD's colours with a marker) */
.style-card { --hud-c: var(--brass); display: grid; gap: 20px; padding: 20px; border-radius: var(--r-lg); border: 1px solid var(--line); margin: 6px 0 18px;
  background: radial-gradient(ellipse 60% 100% at 0% 0%, color-mix(in srgb, var(--hud-c) 18%, transparent), #00000020 70%); }
.style-card.t-aggressive { --hud-c: #e0565b; } .style-card.t-wild { --hud-c: #ff8a3d; } .style-card.t-passive { --hud-c: #6fa8dc; }
@media (min-width: 900px) { .style-card { grid-template-columns: minmax(220px, 1fr) minmax(0, 1.6fr); align-items: center; } }
.sc-who { display: flex; gap: 14px; align-items: center; }
.sc-who .style-name { display: block; font-size: var(--fs-lg); margin-bottom: 4px; }
.sc-read { display: grid; gap: 2px; font-size: var(--fs-sm); color: var(--ivory-2); }
.sc-read b { color: var(--hud-c); font-size: var(--fs-2xl); line-height: 1.1; }
.sc-scales { display: grid; gap: 16px; }
.sc-scale { display: grid; gap: 6px; font-size: var(--fs-sm); }
.sc-val { font-variant-numeric: tabular-nums; font-weight: 700; }
.sc-val.b0 { color: #7fb6e8; } .sc-val.b1 { color: #7fd49a; } .sc-val.b2 { color: #e8c35a; } .sc-val.b3 { color: #ff8a80; }
.sc-bar { position: relative; height: 12px; border-radius: var(--r-sm); overflow: visible; background: #ffffff10; }
.sc-bar i { position: absolute; top: 0; bottom: 0; opacity: .75; }
.sc-bar i:first-child { border-radius: 6px 0 0 6px; } .sc-bar i:nth-child(4) { border-radius: 0 6px 6px 0; }
.sc-bar .b0 { background: #5b9bd5; } .sc-bar .b1 { background: #5fb878; } .sc-bar .b2 { background: #e8c35a; } .sc-bar .b3 { background: #e0565b; }
.sc-mark { position: absolute; top: -5px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--text); border: 3px solid var(--room, #140d0b); box-shadow: 0 2px 8px #000a; transition: left .4s ease; }
.sc-ends { display: flex; justify-content: space-between; font-size: var(--fs-2xs); letter-spacing: .08em; text-transform: uppercase; }

/* History: bookmarked hands in the side column */
.bm-list { display: grid; gap: 6px; }
.bm-list .rp-item { width: 100%; }

/* Stats: the bell curve's facts, and the playing styles explained */
.dist-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 12px; }
.dist-facts span { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-md); background: #ffffff06; border: 1px solid var(--line); }
.dist-facts small { font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dist-facts b { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.style-guide, .style-trend { margin: 6px 0 18px; padding: 16px; border-radius: var(--r-lg); border: 1px solid var(--line); background: #ffffff05; }
.style-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
/* (the playing styles as the page's guide cards: .guide-card, each with its accent from the HUD's colours, tight blue
   to wild red, as a dot, its name and a faint wash from the top; yours in brass) */
.style-item { --acc: var(--muted); border-color: color-mix(in srgb, var(--acc) 22%, var(--line)); background: linear-gradient(170deg, color-mix(in srgb, var(--acc) 9%, transparent), #ffffff05 55%); }
.style-item.s-rock { --acc: #7fb6e8; } .style-item.s-tag { --acc: #7fd49a; } .style-item.s-station { --acc: #e8c35a; }
.style-item.s-lag { --acc: #ffa060; } .style-item.s-maniac { --acc: #ff8a80; }
.style-item > .row b { display: inline-flex; align-items: center; gap: 8px; color: var(--acc); }
.style-item.s-new > .row b { color: var(--text); }
.style-item .si-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 18%, transparent); }
.style-item.mine { border-color: var(--brass); }
.style-item small { font-size: var(--fs-xs); }
.share-pick { justify-self: start; }

/* Stats, playing style: your style and the styles explained as two slides */
/* (the arrows and dots above the slides: below them they moved while the carousel took a new slide's height, so a
   second tap missed) */
.sg-carousel { position: relative; margin: 6px 0 18px; padding-top: 44px; }
.sg-carousel .promo-viewport { transition: height .4s cubic-bezier(.2, .7, .2, 1); }
.sg-track { display: flex; align-items: flex-start; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.sg-slide { flex: 0 0 100%; min-width: 0; }
.sg-slide .style-card, .sg-slide .style-guide, .sg-slide .style-trend { margin: 0; }
.sg-carousel .promo-arrow { top: 0; bottom: auto; transform: none; width: 32px; height: 32px; }
.sg-carousel .promo-arrow.prev { left: auto; right: calc(50% + 70px); } .sg-carousel .promo-arrow.next { right: auto; left: calc(50% + 70px); }
.sg-dots { top: 11.5px; bottom: auto; }
/* (the dots' row spans the carousel and lay over the arrows' middle, so taps there were lost: only the dots take taps) */
.promo-dots { pointer-events: none; }
.promo-dots button, .promo-arrow { pointer-events: auto; touch-action: manipulation; }
.sg-carousel .promo-arrow svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .sg-track { transition: none; } }
/* A player who walked out before the game ended: a quiet tag after the name (results, shared results) */
.pill.left-tag { margin-left: 6px; color: var(--muted); }
/* The table picture while it's being drawn: a placeholder its size, softly pulsing */
.share-pic-wait { display: grid; place-items: center; aspect-ratio: 1200 / 931; background: var(--room-2, #1a110e); animation: share-wait 1.4s ease-in-out infinite alternate; }
.share-pic-wait[hidden] { display: none; }
@keyframes share-wait { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .share-pic-wait { animation: none; } }
/* Phones: the leaderboard's Elo / This week / This month switch goes under the title, full width, each on one line */
@media (max-width: 959px) {
  .panel-head:has(> .lb-order) { flex-wrap: wrap; row-gap: 10px; }
  .lb-order { width: 100%; }
  .lb-order label { white-space: nowrap; align-content: center; }
}
/* Loading: the loader icon turns (in place of a button's own icon while it waits, beside The table until its picture is drawn) */
.icon-spin { animation: icon-spin .8s linear infinite; }
@keyframes icon-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .icon-spin { animation-duration: 2.4s; } }
.busy-icon.solo { width: 1.15em; height: 1.15em; }
.is-busy { pointer-events: none; opacity: .85; }
.share-pick label:has(.pic-wait) { grid-auto-flow: column; justify-content: center; align-items: center; gap: 6px; }
.pic-wait { display: inline-grid; line-height: 0; color: var(--brass); }
.pic-wait svg { width: 14px; height: 14px; }
/* History: Games or Bookmarked at the top of the list; bookmarked hands carry a pin, and in the Bookmarked list
   their game and when they were saved */
.rp-tabs { margin-bottom: 12px; }
.rp-tabs label b { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.rp-tabs label svg { width: 15px; height: 15px; }
.rp-tabs .count-pill { padding: 0 7px; font-size: var(--fs-2xs); line-height: 17px; }
.rp-pin { display: inline-flex; vertical-align: -2px; margin-left: 6px; color: var(--brass); }
.rp-pin svg { width: 13px; height: 13px; }
.rp-item .rp-game-name { color: var(--brass); }
/* The privacy policy and the terms (/privacy, /terms): a readable column of text */
.legal-page { max-width: var(--read-w); }
.legal-lang { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: var(--fs-sm); color: var(--muted); }
.legal-lang svg { width: 16px; height: 16px; flex: none; }
.legal { line-height: 1.6; font-size: var(--fs-base); }
.legal h2 { font-size: var(--fs-xl); margin: 26px 0 8px; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: var(--fs-base); margin: 16px 0 6px; color: var(--brass); }
.legal p, .legal ul { margin: 0 0 10px; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--brass); }
.legal-other { margin-top: 14px; font-size: var(--fs-md); }
.auth-note { font-size: var(--fs-xs); line-height: 1.5; margin: 0; text-align: center; }
.auth-note a, .legal-links a { color: var(--brass); }
.legal-links { margin-top: 12px; font-size: var(--fs-sm); }
.landing-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; padding: 26px 16px 34px; font-size: var(--fs-sm); }
.landing-foot a { color: var(--muted); }
.landing-foot a:hover { color: var(--brass); }
/* Help: Your account (deleting it) */
.help-sec h3 { margin: 4px 0 10px; }
.help-sec .help-steps + .help-list { margin-top: 14px; }
.help-links { display: block; margin-top: 4px; }
/* (a heading inside a section, linked straight to, clears the sticky section buttons too; Settings' delete section clears the top bar) */
.help-sec h3[id] { scroll-margin-top: 180px; }
.help-page:not(.learn-page) .help-sec, .help-page:not(.learn-page) .help-sec h3[id] { scroll-margin-top: calc(76px + var(--toc-h, 56px)); }
section.panel#delete-account { scroll-margin-top: 80px; }
/* Joncler, the jester of the beginner's guide (joncler.js): his inks, and his tips as speech bubbles */
.joncler { display: block; flex: none; overflow: visible; }
.joncler .j-ink { stroke: #2a1a14; }
.joncler .j-eye { fill: #2a1a14; }
.joncler .j-mouth { fill: #5e1823; }
.joncler .j-diamond { fill: #9a2d3c; }
@media (prefers-reduced-motion: no-preference) {
  .joncler .j-bells { transform-origin: 100px 60px; animation: jon-bells 3.2s ease-in-out infinite; }
  .learn-jon .joncler { animation: jon-bob 4s ease-in-out infinite; }
}
@keyframes jon-bells { 0%, 100% { transform: rotate(0); } 8% { transform: rotate(3deg); } 16% { transform: rotate(-3deg); } 24% { transform: rotate(0); } }
@keyframes jon-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.jon-tip { display: flex; align-items: flex-end; gap: 10px; margin-top: 4px; }
.jon-face { flex: none; filter: drop-shadow(0 4px 8px #0007); }
.jon-bubble { position: relative; flex: 1; min-width: 0; margin: 0 0 10px; padding: 11px 14px; border-radius: 14px 14px 14px 4px;
  background: color-mix(in srgb, var(--brass) 12%, var(--room-2, #1d1310)); border: 1px solid color-mix(in srgb, var(--brass) 40%, transparent); line-height: 1.5; }
.jon-bubble p { margin: 0; }
.jon-title { display: block; color: var(--brass); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; }

/* The beginner's guide (/learn) */
.learn-page { max-width: var(--read-w); }
.learn-hero { display: flex; align-items: center; gap: 24px; padding: 24px 28px; background: radial-gradient(120% 140% at 0% 0%, #6e213033, transparent 60%), var(--panel, #1d1310); }
.learn-hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 4vw, 40px); margin: 2px 0 10px; color: var(--brass); }
.learn-hero .lead { font-size: var(--fs-lg); line-height: 1.55; margin: 0 0 8px; }
.learn-hello { min-width: 0; }
.learn-jon { flex: none; }
/* (the guide's contents are long: they stay at the top instead of following the page) */
.learn-toc { position: static; }
.learn-sec { scroll-margin-top: 76px; }
.learn-toc .learn-part { flex-basis: 100%; font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.learn-toc .learn-part:first-child { margin-top: 0; }
.learn-part-head { display: flex; align-items: center; gap: 10px; margin: 18px 0 2px; font-family: var(--display); font-weight: 400; font-size: var(--fs-2xl); color: var(--brass); }
.learn-sec p { margin: 0; line-height: 1.6; }
.learn-sec > h3.learn-h { display: flex; align-items: center; gap: 10px; margin: 0; }
.learn-sec > h3.learn-h svg { width: 22px; height: 22px; color: var(--brass); }
.learn-sec .help-card h4 { margin: 0; font-size: var(--fs-lg); }
/* Phones: a Contents button floats once the contents have scrolled away */
.learn-totop { display: none; }
@media (max-width: 959px) {
  .learn-totop { display: inline-flex; position: fixed; right: 14px; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 30; box-shadow: 0 6px 18px #0009; background: var(--room-2, #1d1310); border-color: color-mix(in srgb, var(--brass) 55%, transparent);
    opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s, transform .2s; }
  .learn-totop.show { opacity: 1; transform: none; pointer-events: auto; }
}
.learn-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }
.learn-cards { display: inline-flex; gap: 4px; --cw: 38px; }
.learn-cards .card { animation: none; }
.learn-example { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding: 12px 14px; border-radius: var(--r-md); background: #0000002e; border: 1px solid var(--line); }
.learn-example > div { display: grid; gap: 5px; }
.learn-example > p { flex: 1 1 220px; }
.learn-rankings .rank-list .ex { --cw: 30px; display: flex; gap: 3px; }
.learn-rankings .rank-list .ex .card { animation: none; }
@media (max-width: 640px) { .learn-rankings .rank-list li { grid-template-columns: 22px minmax(0, 1fr); } .learn-rankings .rank-list .ex { grid-column: 2; --cw: 28px; } }
.learn-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.learn-groups > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: #0000002e; }
.learn-groups b { flex-basis: 100%; }
.learn-groups small { flex-basis: 100%; color: var(--muted); line-height: 1.45; }
.learn-groups .learn-cards { --cw: 26px; gap: 2px; }
.learn-groups > div > .learn-cards + .learn-cards { margin-left: 2px; }
.learn-odds td, .learn-odds th { white-space: nowrap; }
.learn-words { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; }
.learn-words dt { font-weight: 700; color: var(--brass); }
.learn-words dd { margin: 0; line-height: 1.5; }
.learn-words > div { display: contents; }
.learn-words > div[hidden] { display: none; }
.learn-quiz { display: grid; gap: 14px; }
.quiz-jon { display: flex; align-items: flex-end; gap: 12px; }
.quiz-jon .jon-bubble { margin-bottom: 14px; }
.quiz-list { margin: 0; padding-left: 20px; display: grid; gap: 14px; }
.quiz-q > p { margin: 0 0 8px; }
.quiz-answers { display: flex; flex-wrap: wrap; gap: 8px; }
.quiz-answers .btn.right { background: color-mix(in srgb, var(--good, #3fa865) 25%, transparent); border-color: var(--good, #3fa865); color: var(--ivory, #f5efe2); opacity: 1; }
.quiz-answers .btn.wrong { background: color-mix(in srgb, var(--bad, #d84c4c) 22%, transparent); border-color: var(--bad, #d84c4c); opacity: 1; }
.quiz-why { margin: 8px 0 0 !important; color: var(--muted); font-size: var(--fs-md); }
.quiz-score { margin: 0; font-size: var(--fs-lg); color: var(--brass); }
.learn-banner { display: flex; align-items: center; gap: 14px; padding: 12px 16px; color: inherit; text-decoration: none; margin-bottom: 14px; }
.learn-banner span { flex: 1; display: grid; gap: 2px; }
.learn-banner small { color: var(--muted); font-size: var(--fs-sm); }
.learn-banner > svg:last-child { color: var(--brass); }
.learn-banner:hover { border-color: color-mix(in srgb, var(--brass) 50%, transparent); }
@media (max-width: 640px) {
  .learn-hero { flex-direction: column; text-align: center; padding: 20px 16px; gap: 10px; }
  .learn-hero .learn-links { justify-content: center; }
  .learn-words { grid-template-columns: 1fr; gap: 2px; }
  .learn-words dd { margin-bottom: 8px; }
  .learn-cards { --cw: 32px; }
}
/* Joncler's deeper pages: poker words (with a search that hides what doesn't match) and GTO explained */
.learn-find { display: flex; position: sticky; top: 64px; z-index: 5; padding: 10px; margin: -4px 0; border-radius: var(--r-lg); background: color-mix(in srgb, var(--room, #140d0b) 88%, transparent); backdrop-filter: blur(6px); }
.learn-find .shop-search { flex: 1; }
.learn-topic [data-group] { scroll-margin-top: 140px; }
/* (below the app's sticky top bar; a visitor's top bar scrolls away) */
body:has(.public-top) .learn-find { top: 0; }
.learn-topic .learn-sec > h2.learn-h { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; }
.learn-topic .learn-sec > h2.learn-h svg { width: 22px; height: 22px; color: var(--brass); }
.learn-chart { display: grid; gap: 8px; justify-items: start; padding: 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: #0000002e; max-width: 560px; }
.learn-chart > p { margin: 0; font-size: var(--fs-sm); }
.learn-chart .gto-acts, .learn-chart .gto-mix { width: 100%; box-sizing: border-box; }

/* Practice setup on wide screens: one view without scrolling. The games and the opponents are rows of five tiles
   (a game's blurb is its tooltip; its rules show under the form), the options a grid of three. Phones keep the lists. */
.practice-form { display: grid; }
.pf-note { font-size: var(--fs-sm); margin: 0; }
@media (min-width: 960px) {
  .practice-form { gap: 14px; }
  .practice-form .pf-game .opp-list, .practice-form .pf-opps .opp-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .practice-form .opp { grid-template-columns: 30px minmax(0, 1fr) 18px; gap: 8px; padding: 8px 10px; align-items: start; }
  .practice-form .opp .av { width: 30px; height: 30px; font-size: var(--fs-md); }
  .practice-form .opp.game .av { height: 28px; font-size: var(--fs-2xs); }
  .practice-form .opp .tick { width: 18px; height: 18px; font-size: var(--fs-xs); }
  .practice-form .opp .nm { display: block; font-size: var(--fs-md); line-height: 1.25; }
  .practice-form .opp .nm small { display: block; margin: 2px 0 0; }
  .practice-form .opp br { display: none; }
  .practice-form .opp .ds { display: block; font-size: var(--fs-xs); line-height: 1.35; margin-top: 3px; }
  .practice-form .opp.game .ds { display: none; }
  .practice-form .opp.game { align-items: center; }
  .practice-form .pf-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; }
  .practice-form .pf-opts > .field, .practice-form .pf-opts > .house-rules { margin: 0; }
  .practice-form .pf-opts > .house-rules { align-self: start; padding-top: 18px; }
  .practice-form .pf-opts > .house-rules[open] { grid-column: 1 / -1; padding-top: 0; }
  .practice-form .pf-opts .seg label small { font-size: 10.5px; }
  .practice-form .pf-opts .house-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; margin-top: 8px; }
  .modal .practice-form + * { margin-top: 0; }
}
@media (min-width: 960px) {
  dialog.modal:has(.practice-form) .modal-actions { margin-top: 4px; padding-top: 0; }
  dialog.modal:has(.practice-form) .modal-body > .error-text:empty { display: none; }
  .practice-form .pf-game, .practice-form .pf-opps { gap: 8px; }
}
@media (min-width: 960px) {
  .practice-form .opp .ds { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
/* (short desktop windows: the intro goes, and the option buttons get slimmer, so the whole form still fits) */
@media (min-width: 960px) and (max-height: 820px) {
  dialog.modal:has(.practice-form) .modal-body > p.muted:has(+ .practice-form) { display: none; }
  .practice-form .pf-opts .field > span { margin-bottom: 2px; }
  .practice-form { gap: 10px; }
}
@media (min-width: 960px) and (max-height: 640px) {
  .practice-form .opp .ds, .practice-form .pf-opts .seg label small { display: none; }
}
/* Admin, Replays: each game's players as links to their History at that game; History's banner in that view. */
.admin-replays .shop-search { margin: 4px 0 10px; }
.admin-game-players { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.admin-game-players a.pill { color: var(--text); text-decoration: none; }
.admin-game-players a.pill:hover { border-color: var(--brass); color: var(--brass); }
.admin-game .title a { color: var(--text); text-decoration: none; } .admin-game .title a:hover { color: var(--brass); }
.as-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 12px; border-color: color-mix(in srgb, var(--brass) 55%, transparent); }
.as-banner > svg { color: var(--brass); flex: none; }
.as-banner > span { flex: 1; min-width: 0; }
/* A search with suggestions (inviting players): the matches drop down under the field; a pick is ticked in the list above. */
.ac { position: relative; }
.ac-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; display: grid; max-height: 210px; overflow-y: auto; padding: 4px;
  border-radius: var(--r-md); border: 1px solid var(--line); background: var(--panel, #1d1310); box-shadow: 0 16px 34px -12px #000e; }
.ac-list[hidden] { display: none; }
.ac-opt { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: var(--r-sm); cursor: pointer; }
.ac-opt .grow { flex: 1; display: grid; min-width: 0; line-height: 1.25; }
.ac-opt b, .ac-opt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-opt[aria-selected="true"], .ac-opt:hover { background: color-mix(in srgb, var(--brass) 14%, transparent); }
.ac-none { margin: 0; padding: 8px 10px; font-size: var(--fs-md); }
/* An invitation as a pop-up: the facts in a tight grid, the players as one row of faces; fits without scrolling. */
.inv-modal .modal-body { gap: 12px; }
.inv-modal .modal-body > h2 { font-size: var(--fs-2xl); }
.inv-pop { display: grid; gap: 12px; }
.inv-pop .ov-from, .inv-pop .ov-pills { justify-content: flex-start; }
.inv-pop .ov-from { margin: 0; }
.inv-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.inv-fact { display: grid; gap: 1px; padding: 8px 10px; border-radius: var(--r-md); border: 1px solid var(--line); background: #ffffff05; min-width: 0; }
.inv-fact small { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-fact b { font-size: var(--fs-md); overflow-wrap: anywhere; }
@media (max-width: 520px) { .inv-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.inv-players { display: flex; align-items: center; gap: 10px; min-width: 0; }
.inv-players > .muted { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.inv-links { display: flex; gap: 16px; margin: 0; }
.inv-links .link-btn { display: inline-flex; align-items: center; gap: 5px; }
.inv-links svg { width: 15px; height: 15px; }
.inv-note { margin: 0; font-size: var(--fs-md); }
.inv-modal .error-text:empty { display: none; }
/* Host a game with friends (/host) */
.host-form { display: grid; gap: 14px; }
.host-form .seg small { display: block; }
.host-note { margin: 0; font-size: var(--fs-sm); }
/* The blog (/blog): the list of posts, a post at a comfortable reading width, and the editor's preview */
.blog-page { max-width: var(--read-w); }
.blog-list { display: grid; gap: 12px; }
.blog-card { display: grid; gap: 6px; }
.blog-card.draft { border-style: dashed; }
.blog-link { color: inherit; text-decoration: none; }
.blog-link h2 { margin: 0; font-size: var(--fs-xl); }
.blog-link:hover h2 { color: var(--brass); }
.blog-summary { margin: 0; color: var(--ivory-2); line-height: 1.55; }
.blog-meta { margin: 0; font-size: var(--fs-sm); }
.blog-back { display: flex; gap: 8px; margin: 0 0 12px; }
.blog-post header { display: grid; gap: 6px; margin-bottom: 14px; }
.blog-post h1 { margin: 0; font-family: var(--display); font-weight: 400; color: var(--brass); font-size: clamp(28px, 4.4vw, 40px); line-height: 1.15; }
.blog-body { display: grid; gap: 14px; font-size: var(--fs-lg); line-height: 1.7; }
.blog-body p, .blog-body ul { margin: 0; }
.blog-body h2 { margin: 10px 0 0; font-size: var(--fs-xl); }
.blog-body h3 { margin: 6px 0 0; font-size: var(--fs-lg); }
.blog-body ul { padding-left: 22px; display: grid; gap: 6px; }
.blog-body a { color: var(--brass); }
.blog-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; }
.blog-cta > b { flex: 1 1 260px; }
.blog-cta > span { flex: 1 1 100%; order: 3; font-size: var(--fs-md); }
.blog-editor textarea { font-family: inherit; line-height: 1.5; }
.blog-preview { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 14px; }
.blog-preview > summary { cursor: pointer; color: var(--muted); }
.blog-preview .blog-body { margin-top: 10px; font-size: var(--fs-base); }
.blog-hint { font-size: var(--fs-xs); text-transform: none; letter-spacing: 0; }
/* The bottom menu keeps to one row: a label too long for its tab is cut short. */
.tabbar a { min-width: 0; }
.tabbar a > span:not(.count) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* One decision, as Analyze, History and the review show it */
.dc { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--r-md); background: #00000026; }
.dc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dc-score { display: inline-flex; align-items: center; gap: 8px; }
.dc-ev { color: var(--bad); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); white-space: nowrap; }
.dc-says { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; font-size: var(--fs-md); }
.dc-board { display: inline-flex; gap: 2px; --cw: 22px; }
.dc-board .card { animation: none; }
.dc-train { margin: 2px 0 0; }
/* History: a game's Analyze link, and GTO here under a replay's controls (your scored decisions in the hand) */
.rp-analyze { margin: 8px 0 0; }
.rp-gto { display: grid; gap: 8px; }
.rp-gto[hidden] { display: none; }
.rp-gto.empty { visibility: hidden; min-height: 74px; } /* (the summary's two rows, kept while a hand has none) */
.rp-gto-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.rp-gto-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--line); background: #0000002e; color: inherit; font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.rp-gto-chip[aria-pressed="true"] { border-color: var(--brass); }
/* (each decision's verdict, its street and its score; the hand's review counts them first) */
.rp-gto-chip .gr svg { width: 16px; height: 16px; }
.rp-gto-chip b { font-variant-numeric: tabular-nums; padding-right: 4px; }
.rp-gto-sum { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; }
.rp-gto-n { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); }
.rp-gto-n .gr svg { width: 16px; height: 16px; }
.rp-gto-n span:not(.gr) { color: var(--muted); }
.rp-step-mark svg { width: 14px; height: 14px; vertical-align: -2px; }
/* Train: the spot drilled alone (from Analyze), and the way to your hands in Analyze */
.tr-focus[hidden] { display: none; }
.tr-focus .pill { display: inline-flex; align-items: center; gap: 6px; }
.tr-focus .link-btn svg { width: 13px; height: 13px; }
.tr-to-analyze { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-sm); }
.tr-to-analyze svg { width: 15px; height: 15px; }
.gs-worst { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; }
/* Improve: Analyze, Train and GTO lab share one width, so switching tabs keeps the page still */
/* ---------- Settings: a header, a list of the sections, and one column of them (rows: words left, control right) ---------- */
.set-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 18px 22px; margin-bottom: 18px;
  background: radial-gradient(120% 160% at 0% 0%, #d4ab5e1a, transparent 55%), var(--panel); }
.set-av { line-height: 0; }
.set-who { display: grid; gap: 4px; min-width: 0; }
.set-who b { font-size: var(--fs-xl); }
.set-who .muted { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-who .pill svg { width: 13px; height: 13px; }
.set-hero-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.set-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 18px; align-items: start; }
.set-nav { position: sticky; top: calc(var(--top-h) + 16px); display: grid; gap: 2px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.set-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-md); color: var(--ivory-2); font-size: var(--fs-md); text-decoration: none; }
.set-nav a svg { width: 17px; height: 17px; color: var(--muted); flex: none; }
.set-nav a:hover { background: #ffffff08; }
.set-nav a.on { background: #d4ab5e1f; color: var(--text); }
.set-nav a.on svg { color: var(--brass); }
.set-main { display: grid; gap: 14px; min-width: 0; }
.set-sec { display: grid; gap: 0; padding: 18px 22px 8px; scroll-margin-top: calc(var(--top-h) + 16px); }
.set-h { display: flex; align-items: center; gap: 9px; margin: 0 0 6px; font-size: var(--fs-lg); }
.set-h svg { width: 18px; height: 18px; color: var(--brass); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); }
.set-h + .set-row, .set-h + .switch { border-top: 0; }
.set-txt { min-width: 0; }
.set-txt b { font-weight: 600; }
.set-txt p { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.set-ctl { display: flex; gap: 8px; flex: none; align-items: center; }
.set-ctl select.input { min-width: 190px; }
.set-sec > .switch { padding: 13px 0; border-top: 1px solid var(--line); margin: 0; }
.set-keys { display: grid; gap: 0; margin: -4px 0 8px; padding: 2px 12px; border-radius: var(--r-md); background: #0000002a; }
.set-key { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; font-size: var(--fs-sm); }
.set-key + .set-key { border-top: 1px solid var(--line); }
.set-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; padding: 8px 0 12px; }
.set-form .set-wide { grid-column: 1 / -1; }
.set-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 6px; border-top: 1px solid var(--line); }
.set-foot .muted { font-size: var(--fs-sm); }
.set-version { margin: 4px 0 8px; font-size: var(--fs-xs); }
#delete-account .set-txt b { color: var(--bad); }
@media (max-width: 959px) {
  .set-hero { grid-template-columns: auto minmax(0, 1fr); padding: 14px 16px; gap: 12px 14px; }
  .set-hero-btns { grid-column: 1 / -1; justify-content: flex-start; }
  .set-layout { grid-template-columns: 1fr; gap: 12px; }
  .set-nav { position: static; display: flex; gap: 6px; overflow-x: auto; padding: 0; border: 0; background: none; scrollbar-width: none; }
  .set-nav a { flex: none; padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: var(--fs-sm); background: var(--panel); }
  .set-sec { padding: 14px 16px 6px; }
  .set-form { grid-template-columns: 1fr; }
  .set-row { flex-wrap: wrap; gap: 10px; }
  .set-ctl { flex-wrap: wrap; }
  .set-ctl select.input { min-width: 0; width: 100%; }
}
.set-form .field { align-content: start; }
.set-sec > .set-h + .switch, .set-sec > .set-h + .set-row { border-top: 0; }
/* The dashboard's invitation to Joncler's guided hand (players with fewer than 100 hands) */
.tut-promo { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px; padding: 18px 48px 18px 20px; margin-bottom: 18px;
  background: radial-gradient(120% 160% at 0% 0%, #d4ab5e24, transparent 60%), var(--panel); border-color: #d4ab5e44; }
.tut-promo-jon { line-height: 0; filter: drop-shadow(0 6px 12px #0008); }
.tut-promo-txt { display: grid; gap: 8px; }
.tut-promo-txt .eyebrow, .tut-promo-txt h2, .tut-promo-txt p { margin: 0; }
.tut-promo-txt h2 { font-family: var(--display); font-weight: 400; font-size: var(--fs-2xl); color: var(--brass); }
.tut-promo-x { position: absolute; top: 10px; right: 10px; }
@media (max-width: 959px) { .tut-promo { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 14px 44px 14px 14px; } .tut-promo-jon svg { width: 60px; height: auto; } .tut-promo-txt h2 { font-size: var(--fs-xl); } }
.tour-jon { display: flex; justify-content: center; line-height: 0; filter: drop-shadow(0 6px 12px #0008); }
/* A finished game's highlights for you (under its results): three cards that open their replays */
.hl-results { margin-top: 18px; display: grid; gap: 10px; }
.hl-results-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.hl-res { display: grid; gap: 7px; align-content: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #00000026; color: inherit; text-decoration: none; }
.hl-res:hover { border-color: #d4ab5e66; }
.hl-res-k { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--brass); }
.hl-res-k svg { width: 15px; height: 15px; }
.hl-res-cards { display: flex; align-items: flex-end; gap: 4px; }
.hl-res-cards .card { --cw: 30px; width: 30px; height: 42px; font-size: var(--fs-xs); }
.hl-res-board { display: flex; gap: 3px; margin-left: 8px; }
.hl-res-board .card { --cw: 22px; width: 22px; height: 31px; font-size: 10px; }
.hl-res b { font-size: var(--fs-base); }
.hl-res b.bad { color: var(--bad); } .hl-res b.good { color: var(--good); }
/* Practice missions: a row of tiles in the set-up; a mission picks the game and the opponents itself */
@media (min-width: 960px) { .practice-form .pf-mission .opp-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .practice-form .pf-mission .opp .ds { display: none; } }
.pf-mission .opp .av svg { width: 17px; height: 17px; }
.practice-form .pf-off { opacity: .4; pointer-events: none; }
.hl-res-shown { display: grid; gap: 4px; font-size: var(--fs-sm); }
.hl-res-shown > span { display: flex; align-items: center; gap: 6px; }
.hl-res-mini { display: inline-flex; gap: 2px; }
.hl-res-mini .card { --cw: 20px; width: 20px; height: 28px; font-size: 9px; }
/* (the results page's highlights draw their cards as the card picker's tiles, like Analyze, not as full cards) */
.hl-res-cards > .pick-tile { --cw: 38px; width: 38px; height: 53px; border-radius: var(--r-xs); }
.hl-res-board > .pick-tile { --cw: 29px; width: 29px; height: 41px; border-radius: var(--r-xs); }
.hl-res-mini > .pick-tile { --cw: 26px; width: 26px; height: 36px; border-radius: var(--r-xs); }
/* (small tiles: the rank and suit fill more of them, so they read) */
:is(.hl-res-cards, .hl-res-board, .hl-res-mini) > .pick-tile { line-height: 1; }
:is(.hl-res-cards, .hl-res-board, .hl-res-mini) > .pick-tile b { font-size: calc(var(--cw) * .56); }
:is(.hl-res-cards, .hl-res-board, .hl-res-mini) > .pick-tile i { font-size: calc(var(--cw) * .5); }
/* Stats, Elo and rank: the best rank of each season, newest first */
.season-ranks { display: grid; gap: 8px; margin: 6px 0 4px; }
.season-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.season-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border: 1px solid var(--line); border-radius: var(--r-md); background: #0000002a; }
.season-chip span { display: grid; line-height: 1.25; }
.season-chip small { color: var(--muted); font-size: var(--fs-xs); }
.season-chip.now { border-color: #d4ab5e66; }
.share-pick[hidden] { display: none; }

/* ---------- The landing page: Joncler behind the fan, the ways in without an account up front, features and steps with icons ---------- */
.landing .hero { position: relative; padding-block: 12px 8px; }
/* (a faint scatter of suits behind the hero) */
.landing .hero::before { content: ""; position: absolute; inset: -40px -16px; z-index: -1; pointer-events: none; opacity: .5;
  background: radial-gradient(ellipse 60% 70% at 72% 45%, #8a2a3b33, transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23d4ab5e' fill-opacity='.05' font-family='serif' font-size='22'%3E%3Ctext x='8' y='30'%3E%E2%99%A0%3C/text%3E%3Ctext x='70' y='52'%3E%E2%99%A5%3C/text%3E%3Ctext x='30' y='98'%3E%E2%99%A6%3C/text%3E%3Ctext x='92' y='110'%3E%E2%99%A3%3C/text%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, #000 40%, transparent 85%); mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, #000 40%, transparent 85%); }
.landing .hero h1 { background: linear-gradient(100deg, #b98a3e 0%, #f3d996 38%, #d4ab5e 55%, #9c7434 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 6px 18px #d4ab5e26); }
/* "New to poker?" as a pill */
a.hero-learn { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 8px 16px; border-radius: var(--r-pill); border: 1px solid #d4ab5e40;
  background: linear-gradient(90deg, #d4ab5e1f, #d4ab5e05); color: var(--brass); font-size: var(--fs-base); font-weight: 600; text-decoration: none; transition: border-color .2s, background .2s; }
a.hero-learn:hover { border-color: var(--brass); background: linear-gradient(90deg, #d4ab5e33, #d4ab5e0a); }
/* The two ways in without an account, large: host a game with friends (brass) and play as a guest (brass outline) */
.hero .hero-guest { margin-top: 26px; gap: 10px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-cta .btn.big { display: inline-flex; align-items: center; }
.hero-cta .btn.big svg { flex: none; }
.hero-cta .btn.primary.big { box-shadow: 0 12px 28px -12px #d4ab5eaa; }
.hero-cta .btn.primary.big:hover { transform: translateY(-1px); box-shadow: 0 16px 32px -12px #d4ab5ecc; }
.hero-cta .hero-alt { color: var(--brass); border: 1.5px solid #d4ab5e99; background: #d4ab5e12; }
.hero-cta .hero-alt:hover { border-color: var(--brass); background: #d4ab5e26; }
.hero .hero-account { margin-top: 14px; gap: 10px; }
@media (max-width: 520px) { .hero-cta .btn.big { width: 100%; justify-content: center; } }

/* Joncler behind the fan, standing out above it from the ruff up: he rises over the cards, then bobs and sways, his bells swinging, and now and then he winks */
.hero-art { position: relative; display: grid; justify-items: center; align-content: end; --cw: clamp(62px, 8vw, 100px); padding-top: calc(var(--cw) * 2); }
.hero-art .fan { z-index: 2; }
.hero-jon { position: absolute; z-index: 1; left: 50%; bottom: calc(var(--cw) * 1.15); width: calc(var(--cw) * 2.25); aspect-ratio: 200 / 230; translate: -50% 0;
  animation: jon-peek 1.1s .5s cubic-bezier(.2, 1.4, .4, 1) both, jon-bob 4.8s 1.6s ease-in-out infinite; transform-origin: 50% 100%; }
.hero-jon > span { position: absolute; inset: 0; }
.hero-jon svg { width: 100%; height: 100%; filter: drop-shadow(0 10px 18px #000a); }
.hero-jon .hj-b { opacity: 0; animation: jon-wink 7s 3s steps(1) infinite; }
.hero-jon .hj-a { animation: jon-wink-off 7s 3s steps(1) infinite; }
.hero-jon .j-bells { transform-origin: 100px 60px; animation: jon-bells 2.4s 1.6s ease-in-out infinite; }
@keyframes jon-peek { from { transform: translateY(55%) scale(.9); opacity: 0; } 60% { opacity: 1; } }
@keyframes jon-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7%) rotate(3deg); } }
@keyframes jon-wink { 0%, 88% { opacity: 0; } 89%, 96% { opacity: 1; } 97% { opacity: 0; } }
@keyframes jon-wink-off { 0%, 88% { opacity: 1; } 89%, 96% { opacity: 0; } 97% { opacity: 1; } }
@keyframes jon-bells { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

/* Features as cards with an icon, lifting a little on hover */
.landing .feature { position: relative; align-content: start; padding: 22px 20px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(180deg, #ffffff08, #00000020);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; overflow: hidden; }
.landing .feature::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--brass), transparent); opacity: .55; }
.landing .feature:hover { transform: translateY(-4px); border-color: #d4ab5e55; box-shadow: 0 18px 34px -18px #000; }
.feature-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-lg); color: var(--brass);
  background: radial-gradient(circle at 30% 25%, #d4ab5e33, #d4ab5e0d); border: 1px solid #d4ab5e40; }
.feature-ic:empty, .step-ic:empty { display: none; }
.feature-ic svg { width: 22px; height: 22px; }
/* The steps: the number large, an icon beside it, joined by a line on wide screens */
.landing-steps li { counter-increment: step; position: relative; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 20px; transition: border-color .25s ease; }
.landing-steps li::before { grid-row: span 3; font-size: 44px; align-self: start; text-shadow: 0 4px 14px #d4ab5e33; }
.landing-steps li > b, .landing-steps li > span:not(.step-ic) { grid-column: 2; }
.step-ic { grid-column: 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--brass); background: #d4ab5e1a; }
.step-ic svg { width: 18px; height: 18px; }
.landing-steps li:hover { border-color: #d4ab5e55; }
@media (min-width: 760px) { .landing-steps li:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -15px; width: 16px; height: 2px; background: linear-gradient(90deg, var(--brass), transparent); opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
  .hero-jon, .hero-jon span, .hero-jon .j-bells { animation: none !important; }
}
@media (max-width: 899px) { .hero-art { order: -1; margin-top: 4px; } }
@media (max-width: 480px) { .public-top nav { flex-wrap: nowrap; gap: 6px; } .public-top nav .btn { padding-inline: 10px; } }
/* History, one game open: its Analyze button, play of the game and "No hands" line sit in from the box's edge like its heading */
.rp-game.open > .rp-analyze, .rp-game.open > .rp-potg { padding-inline: 12px; }
.rp-game.open > .rp-potg { margin-bottom: 12px; }
.rp-game.open .rp-hands > .rp-loading { margin: 10px 6px 4px; }
/* History: room under the Analyze button before the play of the game or the hands */
.rp-game.open > .rp-analyze { margin-bottom: 12px; }
/* History replays: the side column scrolls as a whole; its parts keep their own height (the steps list would otherwise
   shrink to a sliver under a long list of hands) */
.hist-viewing .rp-side { grid-auto-rows: max-content; }

/* Dashboard: a row of three small cards to start playing (host, competitive search, friendly search), each in its
   Play page card's colours. */
.dash-start { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dash-start-card { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; row-gap: 1px;
  padding: 12px 14px; border-radius: var(--r-lg); border: 1px solid var(--line); color: var(--ivory); text-align: left; font: inherit; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.dash-start-card svg { grid-row: span 2; width: 22px; height: 22px; color: var(--brass); }
.dash-start-card b { font-size: var(--fs-base); line-height: 1.2; }
.dash-start-card small { color: var(--ivory-2); font-size: var(--fs-xs); line-height: 1.3; }
.dash-start-card:hover { transform: translateY(-1px); border-color: #d4ab5e99; box-shadow: 0 10px 24px -14px #000; }
.dash-start-card:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.dash-start-card:disabled { opacity: .7; cursor: progress; }
.dash-start-card::before { background: center / contain no-repeat; }
.ds-host { border-color: #d4ab5ebf; background: radial-gradient(ellipse 110% 90% at 0% 0%, #d4ab5e33, transparent 58%), linear-gradient(150deg, #6b1a2b, #3a0f19 60%, #1f0f10); }
.ds-host b { color: #fff; }
.ds-host::before { background-image: url('/img/host-cards.svg?v=3'); }
.ds-quick { border-color: #d4ab5e55; background: radial-gradient(ellipse 90% 100% at 0% 0%, #3a2a10, #1a110e 70%); }
.ds-quick::before { background-image: url('/img/chip-logo.svg?v=2'); }
.ds-find { border-color: #7fd49a33; background: radial-gradient(ellipse 90% 100% at 0% 0%, #17301f, #1a110e 70%); }
.ds-find svg { color: var(--good); }
/* (phones: icon over the title, no line under it, so three fit side by side) */
@media (max-width: 640px) {
  .dash-start { gap: 8px; }
  .dash-start-card { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 6px; padding: 12px 6px; }
  .dash-start-card svg { grid-row: auto; }
  .dash-start-card b { font-size: var(--fs-sm); }
  .dash-start-card small { display: none; }
  .dash-start-card::before { width: 70px; right: -20px; bottom: -26px; }
}
/* (the art at one size on both cards, bigger, floating like on the Play page: card-art-float in table.css) */
.dash-start-card::before { content: ''; position: absolute; z-index: -1; pointer-events: none; aspect-ratio: 1; width: 132px; right: -30px; bottom: -46px; opacity: .6; animation: card-art-float 9s ease-in-out infinite; }
.ds-quick::before { opacity: .6; animation-delay: -4.5s; }
@media (max-width: 640px) { .dash-start-card::before { width: 92px; right: -24px; bottom: -34px; } }
/* Joncler's tour of a page (tours.js): the button in the page's head; the card and the spot are the table tutorial's */
.tour-btn { gap: 6px; }
.tour-btn .joncler { width: auto; height: 24px; margin: -5px 0 -4px -2px; }
.tour-progress { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: #f5efe21a; overflow: hidden; }
.tour-progress i { display: block; height: 100%; background: var(--brass); transition: width .25s ease; }
.tut-spot.page-tour.none { box-shadow: 0 0 0 200vmax #0a0605a8; transition: none; }
/* A highlight you won glows green, one you lost keeps the oxblood (those without your result too) */
.hl-card.won { border-color: #7fd49a59; background: radial-gradient(120% 90% at 0% 0%, #1f6b3f66, transparent 60%), var(--panel); }
.hl-card.won:hover { border-color: var(--good); }
/* Seat names that explain themselves on the Improve pages (pos-tips.js) */
.pos-tip { text-decoration: underline dotted; text-decoration-color: color-mix(in srgb, currentColor 55%, transparent); text-underline-offset: 3px; cursor: help; border: 0; }
.pos-tip:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 3px; }
.pos-bubble { position: fixed; z-index: 300; max-width: min(280px, calc(100vw - 16px)); padding: 9px 12px; border-radius: var(--r-md); background: #140d0bf5; border: 1px solid #d4ab5e88;
  box-shadow: 0 12px 28px -10px #000; color: var(--ivory-2); font-size: var(--fs-sm); font-weight: 500; line-height: 1.45; text-align: left; letter-spacing: normal; text-transform: none; pointer-events: none; }
.pos-bubble[hidden] { display: none; }
.pos-bubble b { color: var(--brass); margin-right: 2px; }
/* Analyze's tooltips on pot types and each street's letters (the seat names' bubble, pos-tips.js) */
.has-tip { cursor: help; text-decoration: underline dotted; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; }
.has-tip.an-acts, .has-tip.mcs { text-decoration: none; border-radius: var(--r-xs); }
.has-tip.mcs:hover { outline: 1px solid #d4ab5e88; outline-offset: 2px; }
.has-tip.an-acts:hover, .has-tip:focus-visible { outline: 1px solid #d4ab5e88; outline-offset: 2px; }
.pos-bubble.lines { display: grid; gap: 3px; max-width: min(340px, calc(100vw - 16px)); }
.pos-bubble-title { display: block; margin-bottom: 2px; text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-2xs); }
.pos-bubble-line { display: block; }
/* The Guide (/guide, pages/guide.js) */
.guide-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; }
.guide-hero h1 { margin: 2px 0 6px; }
.guide-hero p { margin: 0; }
.guide-jon { line-height: 0; filter: drop-shadow(0 6px 12px #0008); }
.guide-sec h2 { display: flex; align-items: center; gap: 10px; }
.guide-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px 24px; }
.guide-links { list-style: none; margin: 6px 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 18px; }
.guide-links a { display: inline-block; padding: 3px 0; }
.board-stages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
@media (max-width: 640px) { .board-stages { grid-template-columns: minmax(0, 1fr); } }
.board-stage { display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--r-lg); border: 1px solid var(--line); background: radial-gradient(120% 120% at 50% 0%, #1e5a3c55, transparent 70%), #0000002e; }
.board-stage-head { display: grid; gap: 2px; }
.board-stage-head .muted { font-size: var(--fs-sm); }
.board-stage-cards { display: flex; gap: 5px; }
.board-stage-card { line-height: 0; border-radius: var(--r-sm); }
.board-stage-card .card { --cw: 40px; width: 40px; height: 56px; font-size: var(--fs-md); position: relative; animation: none; }
.board-stage-card.new { outline: 2px solid var(--brass); outline-offset: 2px; box-shadow: 0 0 14px #d4ab5e88; }
.board-stage-slot { width: 40px; height: 56px; border-radius: var(--r-sm); border: 1.5px dashed #f5efe233; }
@media (max-width: 640px) { .board-stage-card .card, .board-stage-slot { --cw: 34px; width: 34px; height: 48px; } }
.guide-tours { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin: 10px 0; }
.guide-tour { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-lg); border: 1px solid var(--line); color: var(--text); text-decoration: none; }
.guide-tour:hover { border-color: var(--brass); }
.guide-tour > span:nth-child(2) { display: grid; gap: 2px; }
.guide-tour small { font-size: var(--fs-xs); }
.guide-tour-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-md); background: color-mix(in srgb, var(--brass) 16%, transparent); color: var(--brass); }
@media (max-width: 640px) { .guide-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; } .guide-jon svg { width: 90px; height: auto; } }
/* (your own actions in Analyze's tooltip: coloured as your letters are, by how the decision scored) */
.pos-bubble-line.you { font-weight: 700; }
.pos-bubble-line.you.plain { color: var(--brass); }
.pos-bubble-line.you.good { color: var(--good); }
.pos-bubble-line.you.warn { color: var(--warn); }
.pos-bubble-line.you.bad { color: var(--bad); }
/* A tooltip with cards in it (Analyze's hands and boards): the cards large, in the member's deck. */
.pos-bubble-cards { display: flex; gap: 5px; --cw: 52px; padding: 2px 0 1px; }
.pos-bubble-cards .card { animation: none; }
/* (the cards in a tooltip keep their own colours: the bubble's brass is for its words) */
.pos-bubble .card b { color: inherit; margin-right: 0; }
/* The card picker (card-picker.js: the hand calculator, entering real cards): a tab per suit over that suit's ranks as
   large tiles. Each tile's ink is its suit's colour (--ink): the Classic deck's two colours, or four with
   body[data-small="4"]; Accessibility's look (body[data-pick-look]) makes the tiles dark, or inverted (the tile in the
   suit's colour, the ink white). */
.calc-picker { display: grid; gap: 5px; }
.calc-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 3px; margin-bottom: 8px; border-radius: var(--r-md); background: #00000033; }
.calc-tab { padding: 6px 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--tab-ink, #f5efe2); font: 400 20px/1 "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", sans-serif; cursor: pointer; }
.calc-tab.s1, .calc-tab.s2 { --tab-ink: #ef7b80; } .calc-tab.joker { --tab-ink: #c9a2ff; }
body[data-small="4"] .calc-tab.s2 { --tab-ink: #6fb2ff; } body[data-small="4"] .calc-tab.s3 { --tab-ink: #5fd38a; }
.calc-tab[aria-selected="true"] { background: #f5efe2; color: var(--ink); box-shadow: 0 2px 6px -2px #000; }
.calc-suit { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; }
.calc-pick, .calc-tab { --s: #1f1613; --h: #b21f2d; --d: #b21f2d; --c: #1f1613; --j: #6b3fa0; --ink: var(--s); }
body[data-small="4"] .calc-pick, body[data-small="4"] .calc-tab { --d: #1f5fb4; --c: #1c7a3a; }
.calc-pick.s1, .calc-tab.s1 { --ink: var(--h); } .calc-pick.s2, .calc-tab.s2 { --ink: var(--d); } .calc-pick.s3, .calc-tab.s3 { --ink: var(--c); } .calc-pick.joker, .calc-tab.joker { --ink: var(--j); }
.calc-pick { display: grid; place-items: center; gap: 0; padding: 9px 0 7px; border-radius: var(--r-sm); border: 1px solid #00000022; background: #f5efe2; color: var(--ink); cursor: pointer; font: inherit; line-height: 1.05; }
.calc-pick b { font-size: var(--fs-xl); } .calc-pick i { font-style: normal; font-size: var(--fs-lg); }
.calc-pick:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 10px -4px #000; }
.calc-pick:disabled { opacity: .18; cursor: default; }
.calc-pick.on { outline: 2px solid var(--brass); outline-offset: 1px; }
.calc-pick.joker { background: linear-gradient(160deg, #f5efe2, #e9d9b8); }
.calc-pick.joker i { font-size: 10px; letter-spacing: .06em; font-weight: 700; }
body[data-pick-look="dark"] .calc-pick, body[data-pick-look="dark"] .calc-tab { --s: #f2ece0; --h: #ff7276; --d: #ff7276; --c: #f2ece0; --j: #c9a2ff; }
body[data-pick-look="dark"][data-small="4"] .calc-pick, body[data-pick-look="dark"][data-small="4"] .calc-tab { --d: #62adff; --c: #55d683; }
body[data-pick-look="dark"] .calc-pick { background: #272321; border-color: #ffffff24; }
body[data-pick-look="dark"] .calc-tab[aria-selected="true"] { background: #272321; }
body[data-pick-look="inverted"] .calc-pick { background: var(--ink); color: #fbf7ef; border-color: #ffffff2e; }
body[data-pick-look="inverted"] .calc-tab[aria-selected="true"] { background: var(--ink); color: #fbf7ef; }
@media (max-width: 959px) { .calc-suit { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .calc-pick b { font-size: var(--fs-lg); } .calc-pick i { font-size: var(--fs-base); } }
/* Analyze's mini tiles: the rank with a small suit under it, in the Classic deck's colours, four by default (two with
   body[data-tile-four="0"]); Accessibility's look (body[data-tile-look]) makes them dark or inverted. */
.mc { --s: #1f1613; --h: #b21f2d; --d: #1f5fb4; --c: #1c7a3a; --ink: var(--s); display: inline-grid; place-items: center; align-content: center; width: 18px; height: 27px; border-radius: 3px;
  background: #fffaf0; color: var(--ink); box-shadow: inset 0 0 0 1px #0000001f; font: 800 11.5px/1 var(--sans); }
.mc i { font: 400 9px/1 "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", sans-serif; font-style: normal; margin-top: 1px; }
.mc.s-h { --ink: var(--h); } .mc.s-d { --ink: var(--d); } .mc.s-c { --ink: var(--c); }
body[data-tile-four="0"] .mc { --d: #b21f2d; --c: #1f1613; }
body[data-tile-look="dark"] .mc { --s: #f2ece0; --h: #ff7276; --d: #62adff; --c: #55d683; background: #272321; box-shadow: inset 0 0 0 1px #ffffff26; }
body[data-tile-look="dark"][data-tile-four="0"] .mc { --d: #ff7276; --c: #f2ece0; }
body[data-tile-look="inverted"] .mc { background: var(--ink); color: #fbf7ef; box-shadow: inset 0 0 0 1px #ffffff2e; }
/* Text cards: in four colours with the small cards (body[data-small]); the result lines' pill goes dark with a dark deck. */
body[data-small="4"] { --lc-d: #6fb2ff; --lc-c: #5fd38a; }
body[data-small="2"] { --lc-d: #ef7b80; --lc-c: var(--ivory); }
body[data-small-dark="1"] .rs-cards { background: #272321; box-shadow: inset 0 0 0 1px #ffffff1f; }
body[data-small-dark="1"] .rs-cards .lc.s0 { color: #f2ece0; } body[data-small-dark="1"] .rs-cards .lc.s1 { color: #ff7276; }
body[data-small-dark="1"] .rs-cards .lc.s2 { color: #ff7276; } body[data-small-dark="1"] .rs-cards .lc.s3 { color: #f2ece0; }
body[data-small-dark="1"][data-small="4"] .rs-cards .lc.s2 { color: #62adff; } body[data-small-dark="1"][data-small="4"] .rs-cards .lc.s3 { color: #55d683; }
/* Settings' Accessibility: a sample of each kind of card, as the choices below make them look. */
.a11y-samples { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-end; padding: 12px 14px; margin-bottom: 8px; border-radius: var(--r-md); background: #00000033; }
.a11y-sample { display: grid; justify-items: start; gap: 6px; }
.a11y-sample small { color: var(--muted); font-size: var(--fs-xs); }
.a11y-full { display: flex; gap: 4px; --cw: 30px; } .a11y-full .card { animation: none; }
.a11y-picks { display: flex; gap: 4px; } .a11y-picks .calc-pick { width: 34px; padding: 6px 0 5px; cursor: default; } .a11y-picks .calc-pick b { font-size: var(--fs-base); } .a11y-picks .calc-pick i { font-size: var(--fs-sm); }
.a11y-sample .mcs { display: inline-flex; gap: 3px; }
/* A card picked from the card picker, in its slot (the calculator, entering real cards, checking them): the picker's
   own tile, not the full card design, sized to the slot. */
.pick-tile { width: 100%; height: 100%; padding: 0; cursor: inherit; border-radius: inherit; }
.pick-tile:hover { transform: none; box-shadow: none; }
.pick-tile b { font-size: calc(var(--cw, 44px) * .42); } .pick-tile i { font-size: calc(var(--cw, 44px) * .36); }
.ce-slots > .pick-tile { width: var(--cw); height: calc(var(--cw) * 1.4); border-radius: var(--r-xs); }
/* Every slider, checkbox and radio drawn by the browser in brass, not its default blue (the GTO lab's sliders too). */
input[type="range"], input[type="checkbox"], input[type="radio"], progress { accent-color: var(--brass); }
/* Accessibility's parts: each kind of card under its own heading, with a sample of it beside the heading. */
.a11y-part { padding: 12px 0; border-top: 1px solid var(--line); }
.a11y-part:first-child { border-top: 0; padding-top: 4px; }
.a11y-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 6px; }
.a11y-head h3 { margin: 0; }
.a11y-head .a11y-sample { display: flex; padding: 8px 10px; border-radius: var(--r-md); background: #00000033; }
/* The card picker's field: type cards (Ah Kd) instead of tapping them; the same everywhere the picker is. */
.calc-picker .pick-type { width: 100%; margin-bottom: 8px; font-weight: 500; letter-spacing: .02em; }
.calc-picker .pick-type.bad { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
/* A text field of cards with the picker's button beside it (the GTO lab). */
.pick-field { display: flex; gap: 6px; align-items: center; min-width: 0; }
.pick-field > .input { flex: 1; min-width: 0; }
.pick-field > .pick-open { flex: none; }
.pk-rows { --cw: 40px; margin-bottom: 10px; }
/* The landing page's link to the calculator, with its icon. */
a.hero-calc { gap: 9px; }
a.hero-calc svg { width: 19px; height: 19px; flex: none; }
/* The picker's suggestions while typing: the typed rank's four cards, under the field. */
.pick-suggest { display: flex; gap: 6px; margin: -2px 0 8px; }
.pick-suggest .calc-pick { width: 46px; }
/* (16px: phones don't zoom into the field when it's tapped) */
@media (max-width: 959px) { .calc-picker .pick-type { font-size: var(--fs-lg); } }
/* Taps stay taps: two quick ones on a button (Raise…, then Raise to) don't zoom the page on phones; pinching still does. */
button, .btn, a, label, select, input, summary { touch-action: manipulation; }
/* The landing hero: a claim instead of the name (the logo above says it), hosting and playing as a guest with "no account needed"
   under them, and the free guide and calculator on one line. */
.landing .hero h1.hero-claim { font-size: clamp(34px, 4.4vw, 58px); line-height: 1.05; text-wrap: balance; max-width: 18ch; padding-bottom: .06em; }
.hero .hero-note { margin: 0; color: var(--muted); font-size: var(--fs-md); max-width: 46ch; }
.hero .hero-also { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-md); color: var(--muted); }
.hero-also a { display: inline-flex; align-items: center; gap: 6px; color: var(--brass); font-weight: 600; text-decoration: none; }
.hero-also a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hero-also svg { width: 15px; height: 15px; }
@media (max-width: 520px) { .hero .hero-note { text-align: center; } }
/* The dashboard: its tools top right (desktop; phones have them among the shortcuts), and one big Play in the Elo card. */
.dash-tools { gap: 8px; flex-wrap: wrap; }
.dash-tools .btn svg { width: 18px; height: 18px; color: var(--brass); }
@media (max-width: 959px) { .dash-tools { display: none; } }
.balance-card .bc-actions { align-items: center; }
.balance-card .bc-play { box-shadow: 0 12px 28px -12px #d4ab5eaa; }
@media (max-width: 959px) { .balance-card .bc-play { flex: 1 1 100%; justify-content: center; } }
/* The side menu's Improve: it folds open to Analyze, Training and the GTO lab. */
.nav-group { display: grid; gap: inherit; }
.nav-group > summary { list-style: none; cursor: pointer; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary[data-here] { color: var(--brass); }
.nav-group > summary[data-here] svg { color: var(--brass); }
.nav-group .nav-chev { margin-left: auto; color: var(--muted); font-size: var(--fs-lg); line-height: 1; transition: transform .2s ease; }
.nav-group[open] .nav-chev { transform: rotate(90deg); }
.nav-group > a.nav-link { padding-left: 26px; }
/* The explainer pages' shared head (explainHeroHTML in learn-page.js): the links between them, this page marked. */
.explain-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.explain-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; }
.explain-nav a svg { width: 15px; height: 15px; }
.explain-nav a:hover { color: var(--text); }
.explain-nav a[aria-current="page"] { color: var(--brass); border-bottom-color: var(--brass); }
.explain-hero .learn-links { margin: 6px 0 0; }
@media (max-width: 720px) { .explain-nav { justify-content: center; } }
/* Achievements: each its own icon (achv-icons.js); not yet earned, faded with a small lock. */
.achv .medal { position: relative; }
.achv .medal svg { width: 20px; height: 20px; }
.achv:not(.done) .medal > svg { opacity: .6; }
.achv-lock { position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line-2); color: var(--muted); }
.achv-lock svg { width: 10px !important; height: 10px !important; }

/* Tables in Analyze's design (Analyze's hand by hand, Open games): column heads in plain muted text on a dark band,
   40 px rows divided by faint lines, numbers right-aligned; a row lights up under the pointer. */
.an-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-table th { position: sticky; top: 0; z-index: 1; padding: 10px 12px; text-align: left; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); letter-spacing: 0; text-transform: none;
  background: #160e0c; border-bottom: 1px solid var(--line); }
.an-table td { padding: 0 12px; height: 40px; border-bottom: 1px solid #ffffff0b; font-weight: 600; }
.an-table .num { text-align: right; }
.an-table .c { text-align: center; }
.an-table .b { font-weight: 700; }
.an-table tbody tr:hover td { background: #ffffff08; }

/* The back control above a page's title (Open games, a group, History's game, Analyze's game, the blog): a ghost small
   button with the back arrow, always the same. */
.back-btn { margin-bottom: 12px; justify-self: start; }
.page > .back-btn { display: inline-flex; }
.page > .back-btn[hidden] { display: none; }
/* (History's full replay view leaves room for the All games button above it) */
.hist-viewing > .hist-back { margin-bottom: 0; }
@media (min-width: 960px) { .hist-viewing:has(> .hist-back:not([hidden])) .hist-layout > .replay-view { height: calc(100dvh - var(--top-h, 64px) - 24px - 46px); } }

/* Small utilities for one-off spacing, sizes and colours in the pages' markup (instead of inline styles; like an inline
   style they win over a component's own rule, hence !important) */
.u-m0 { margin: 0 !important; }
.u-mt0 { margin-top: 0 !important; }
.u-mb0 { margin-bottom: 0 !important; }
.u-mt4 { margin-top: 4px !important; }
.u-mt10 { margin-top: 10px !important; }
.u-mt12 { margin-top: 12px !important; }
.u-mt14 { margin-top: 14px !important; }
.u-mt-n6 { margin-top: -6px !important; }
.u-mb8 { margin-bottom: 8px !important; }
.u-mb10 { margin-bottom: 10px !important; }
.u-ml-auto { margin-left: auto !important; }
.u-fs-xs { font-size: var(--fs-xs) !important; }
.u-fs-sm { font-size: var(--fs-sm) !important; }
.u-fs-md { font-size: var(--fs-md) !important; }
.u-fs-2xl { font-size: var(--fs-2xl) !important; }
.u-c-inherit { color: inherit !important; }
.u-td-none { text-decoration: none !important; }
.u-c-ivory2 { color: var(--ivory-2) !important; }
.u-c-brass { color: var(--brass) !important; }
.u-nowrap { flex-wrap: nowrap !important; }
.u-wrap { flex-wrap: wrap !important; }
.u-ta-c { text-align: center !important; }
.u-ta-l { text-align: left !important; }
.u-rel { position: relative !important; }
.u-js-start { justify-self: start !important; }
.u-jc-c { justify-content: center !important; }
.u-ai-c { align-items: center !important; }
.u-va-m { vertical-align: middle !important; }
.u-fw6 { font-weight: 600 !important; }
.u-fw5 { font-weight: 500 !important; }
.u-pointer { cursor: pointer !important; }
.u-minw0 { min-width: 0 !important; }
.u-ox-auto { overflow-x: auto !important; }
.u-mw420 { max-width: 420px !important; }
.u-p10 { padding: 10px !important; }
.u-p10-12 { padding: 10px 12px !important; }
.u-p6-10 { padding: 6px 10px !important; }
.u-gap4 { gap: 4px !important; }
.u-gap6 { gap: 6px !important; }
.u-gap8 { gap: 8px !important; }
.u-gap10 { gap: 10px !important; }
.u-gap12 { gap: 12px !important; }
.u-gap14 { gap: 14px !important; }
.u-gap18 { gap: 18px !important; }
.u-gap22 { gap: 22px !important; }

.u-mt6 { margin-top: 6px !important; }
.u-mt8 { margin-top: 8px !important; }
.u-flex1 { flex: 1 !important; }
.u-as-end { align-self: end !important; }
.u-mw70ch { max-width: 70ch !important; }

/* Placing a picture (cropPicture in ui.js): a group's banner, a profile picture */
.crop { position: relative; overflow: hidden; border-radius: var(--r-md); border: 1px solid var(--line-2); background: #000; cursor: grab; touch-action: none; user-select: none; }
.crop.round { width: min(320px, 100%); margin: 0 auto; border-radius: 50%; }
.crop.dragging { cursor: grabbing; }
.crop canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
.crop-zoom { margin-top: 12px; }
.crop-zoom input { width: 100%; accent-color: var(--brass); }
.set-photo { display: flex; align-items: center; gap: 14px; }
/* The language on public pages (the header): a small select beside Log in */
.public-top .lang-pick { width: auto; max-width: 170px; height: 34px; min-height: 34px; padding: 0 28px 0 10px; font-size: var(--fs-sm); }
@media (max-width: 560px) { .public-top .lang-pick { max-width: 96px; } .public-top .wordmark { display: none; } .public-top nav { flex-wrap: nowrap; gap: 6px; } }
/* (a long translation of the landing page's buttons wraps on phones instead of widening the page) */
@media (max-width: 560px) { .hero-cta .btn { white-space: normal; text-align: center; min-width: 0; max-width: 100%; } .hero-cta .btn span { min-width: 0; } }

/* Scanning real cards (scan.js): Scan cards under a picker's typing field once the scanner can run here, and the scanner
   over the page: the camera from the top, the marks over it, the panel at the foot. */
.pick-scan { display: none; }
html[data-scan] .pick-scan { display: flex; flex: 1 1 0; }
/* Scan cards and Photo side by side under the picker's field */
.pick-scans { display: none; }
html[data-scan] .pick-scans { display: flex; gap: 8px; width: 100%; margin: -2px 0 8px; }
dialog.scan-view { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #000; color: var(--text); overflow: hidden; }
dialog.scan-view::backdrop { background: #000; }
html:has(dialog.scan-view[open]) { overflow: hidden; }
.scan-panel:focus { outline: none; }
.scan-stage { position: absolute; inset: 0; }
.scan-stage video, .scan-stage img, .scan-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: top center; }
.scan-stage canvas { pointer-events: none; }
.scan-light { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; background: #140d0bcc; }
.scan-light.on { background: var(--brass); color: var(--ink); border-color: transparent; }
.scan-panel { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 16px max(16px, env(safe-area-inset-bottom)); background: var(--room); border-radius: 18px 18px 0 0; }
.scan-panel h2 { margin: 0; font-size: var(--fs-lg); }
.scan-status { margin: 4px 0 10px; font-size: var(--fs-md); }
.scan-tiles { display: flex; align-items: center; gap: 6px; min-height: 56px; overflow-x: auto; scrollbar-width: none; }
.scan-tiles::-webkit-scrollbar { display: none; }
.scan-tile { --cw: 40px; flex: none; width: 40px; height: 56px; border-radius: var(--r-sm); }
.scan-tile.off { opacity: .35; }
.scan-group { flex: none; color: var(--brass); font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; }
.scan-group:not(:first-child) { margin-left: 10px; }
.scan-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 12px; }
@media (min-width: 960px) { .scan-panel { left: 50%; right: auto; width: 560px; transform: translateX(-50%); } }
/* A player's seat number (1–9): where their cards go on the printed mats (scan.js) */
.seat-no { display: inline-grid; place-items: center; flex: none; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--r-pill); background: #ffffff14; border: 1px solid var(--line-2); color: var(--muted); font-size: var(--fs-2xs); font-weight: 700; line-height: 1; vertical-align: 1px; }
.lp .lp-seat { position: absolute; top: 6px; left: 6px; }
.scan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.scan-head .link-btn { font-size: var(--fs-md); }

/* The printable mats (/mats, pages/mats.js) */
.mats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin: 20px 0; }
.mat-card { display: grid; gap: 12px; align-content: start; }
.mat-card h3 { font-size: var(--fs-base); }
.mat-card p { margin: 2px 0 0; font-size: var(--fs-md); }
.mat-pic { display: block; width: 100%; height: 220px; object-fit: contain; border-radius: var(--r-sm); background: #00000033; }
.mat-links { flex-wrap: wrap; gap: 8px; }
.mats-steps { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; color: var(--text); }

/* The dashboard's buttons on phones: Play across, My stats and Leaderboard side by side under it, each half as wide */
@media (max-width: 959px) {
  .balance-card .bc-actions > .bc-half { flex: 1 1 0; min-width: 0; justify-content: center; white-space: normal; text-align: center; line-height: 1.2; padding-inline: 10px; align-self: stretch; }
  .balance-card .bc-actions > .bc-pro { flex: 1 1 100%; justify-content: center; }
}

/* A group's picture (social.js, groupFace in ui.js): round wherever the group shows, in place of its initial */
.group-avatar.has-photo { display: block; border-radius: 50%; }
.group-avatar.has-photo img { border-radius: 50%; }
.gx-photo { display: block; width: 52px; height: 52px; margin: -40px 0 6px; border-radius: 50%; object-fit: cover; border: 3px solid var(--panel-2); background: var(--panel-2); position: relative; }
.gp-photo-field .row { align-items: center; }
/* Long translations on phones: the beginner card's buttons and the Elo card's lines wrap instead of widening the page */
.tut-promo-txt { min-width: 0; }
.tut-promo-txt .btn { white-space: normal; text-align: center; }
@media (max-width: 959px) {
  .balance-card > div:first-child { flex: 1 1 100%; min-width: 0; }
  .balance-card .rank-progress { flex-wrap: wrap; }
  .balance-card .rank-progress small { white-space: normal; }
}

/* Placing scanned cards yourself (placeCards in scan.js): the cards seen in a tray, dragged or tapped onto the rows */
.scan-place .sp-tray { display: flex; flex-wrap: wrap; gap: 6px; min-height: 64px; margin: 12px 0; padding: 8px; border: 1px dashed var(--line-2); border-radius: var(--r-md); align-items: center; }
.sp-card { --cw: 40px; width: 40px; height: 56px; padding: 0; border: 0; background: none; border-radius: var(--r-sm); cursor: grab; touch-action: none; }
.sp-card.on { outline: 2px solid var(--brass); outline-offset: 2px; }
.sp-placed { cursor: grab; touch-action: none; } /* (a placed card is dragged to another row on its own) */
.sp-ghost { position: fixed; left: 0; top: 0; z-index: 10; pointer-events: none; opacity: .9; box-shadow: 0 10px 24px #000a; }
.sp-row { border-radius: var(--r-md); padding: 4px 6px; margin: 0 -6px; transition: background .15s ease; }
.sp-row.can { cursor: pointer; }
.sp-row.can:hover, .sp-row.drop { background: #d4ab5e1f; }
.scan-place .ce-who { width: 112px; white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.sp-unit { width: auto; height: 56px; display: inline-flex; gap: 0; }
.sp-unit .sp-tile { --cw: 40px; width: 40px; height: 56px; display: block; }
.sp-unit .sp-tile + .sp-tile { margin-left: -14px; }
.sp-card:not(.sp-unit) .sp-tile { display: block; width: 100%; height: 100%; }
/* The Elo card's rank bar on phones: a line of its own, as wide as the Play button under it */
@media (max-width: 959px) {
  .balance-card .rank-progress .rp-bar { flex: 1 1 100%; max-width: none; order: 1; }
  .balance-card .rank-progress small:not(.rp-top) { order: 2; flex: 1 1 100%; }
}
/* One at a time (scan.js): what to scan now, under the title; the buttons wrap on narrow phones */
.scan-step { margin: 4px 0 0; font-size: var(--fs-base); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.scan-step b { color: var(--brass); }
.scan-actions { flex-wrap: wrap; }
/* The scanner while its model loads: a spinner in the middle of the picture, with how far the download is */
.scan-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--ivory); background: #0008; text-align: center; padding: 16px; z-index: 1; }
.scan-loading[hidden] { display: none; }
.scan-loading svg { width: 44px; height: 44px; color: var(--brass); }
.scan-loading span { font-size: var(--fs-md); }
.scan-shot { position: absolute; top: max(16px, env(safe-area-inset-top)); left: 16px; background: #140d0bcc; z-index: 2; }
/* One at a time with photos: what to photograph next, in the middle of the picture */
.scan-ask { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 24px; text-align: center; background: #000b; z-index: 1; }
.scan-ask[hidden] { display: none; }
.scan-ask p { margin: 0; font-size: var(--fs-lg); color: var(--ivory); }
.scan-ask b { color: var(--brass); }
.photo-field { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; left: -10px; top: -10px; }
button.scan-tile { padding: 0; border: 0; background: none; cursor: pointer; }

/* Admin's Scanner tab: the photos of cards kept to train the scanner */
.scanph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.scanph { margin: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; }
.scanph.check { border-color: color-mix(in srgb, var(--warn) 70%, transparent); }
.scanph img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--line); }
.scanph figcaption { padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-xs); }
.scanph-cards, .scanph-flag { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.scanph .pick-tile { width: 26px; height: 34px; --cw: 26px; }
.scanph-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
/* A chat's head: the name on one line, cut short on phones, so the back button and Manage keep their room */
.convo-title { flex: 1 1 auto; min-width: 0; }
.convo-title .convo-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.convo-head > .btn, .convo-avatar { flex: none; }
@media (max-width: 600px) { .convo-back span { display: none; } .convo-back { padding-inline: 10px; } }
.convo-head .convo-online .avatar { box-shadow: 0 0 0 2px var(--good); }
/* Sign-up's I agree tick: a small line, the box beside the words */
.agree-tick { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.4; cursor: pointer; }
.agree-tick input { width: 16px; height: 16px; margin: 1px 0 0; flex: none; accent-color: var(--brass); }
.agree-tick a { color: var(--brass); }
/* The landing page's question about photos of cards: a bar at the bottom until it's answered */
.consent-bar { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60; max-width: 720px; margin: 0 auto;
  display: flex; align-items: center; gap: 14px 18px; padding: 14px 16px; font-size: var(--fs-sm); line-height: 1.45; box-shadow: 0 12px 40px #0009; }
.consent-bar { background: #201714; border-color: color-mix(in srgb, var(--brass) 35%, transparent); }
.consent-bar a { color: var(--brass); }
.consent-bar .row { flex: none; gap: 8px; }
@media (max-width: 600px) { .consent-bar { flex-direction: column; align-items: stretch; } .consent-bar .row > .btn { flex: 1 1 0; justify-content: center; } }
/* Settings in the privacy question: the choices open in the same place, above the buttons */
.consent-bar.open { flex-direction: column; align-items: stretch; }
.consent-bar.open .consent-btns, .consent-pop .consent-btns { justify-content: flex-end; }
.consent-pop { display: flex; flex-direction: column; gap: 14px; }
.consent-more .switch { margin: 0; }
/* The placing step's waiting hands, each asking whose it is */
.scan-place .sp-wait { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; width: 100%; }
.scan-place .sp-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.scan-place .sp-who small { width: 100%; }

a.hl-card { text-decoration: none; } /* (a highlight of a hand the viewer wasn't in: a link to it) */
/* Admin's Scanner tab: a grouped photo's groups as found and as placed */
.scanph-groups { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.scanph-group { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.scanph-group small { color: var(--muted); font-size: var(--fs-2xs); margin-right: 3px; }
/* The live scanner's shutter: round, as in a camera app, where the cards show once the moment is taken */
.scan-shutter-row { display: flex; justify-content: center; padding: 6px 0 2px; }
.scan-shutter { width: 68px; height: 68px; padding: 0; border-radius: 50%; border: 4px solid #fff; background: transparent; display: grid; place-items: center; cursor: pointer; }
.scan-shutter span { width: 52px; height: 52px; border-radius: 50%; background: #fff; transition: transform .12s ease; }
.scan-shutter:active span { transform: scale(.88); }
.scan-shutter:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
/* The live camera: nothing over it but the shutter and a way out (the panel's title, mats link, status, cards and
   buttons, and the torch, come back once the moment is taken) */
.scan-close { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; z-index: 2; background: #140d0bcc; display: none; }
.scan-view.scan-live-only .scan-close { display: inline-grid; }
.scan-view.scan-live-only .scan-light { display: none; }
.scan-view.scan-live-only .scan-panel { background: none; box-shadow: none; border: 0; }
.scan-view.scan-live-only .scan-panel > :not(.scan-shutter-row) { display: none; }
.scan-view.scan-live-only .scan-shutter-row { padding-bottom: 12px; }
/* The live camera fills the screen (no bar under it), and getting ready is a small line at the top, the picture not
   dimmed; Analysing a photo stays in the middle */
.scan-view.scan-live-only .scan-stage video { object-fit: cover; object-position: center; }
.scan-view.scan-live-only .scan-loading { inset: max(16px, env(safe-area-inset-top)) auto auto 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: var(--r-pill); background: #140d0bcc; white-space: nowrap; }
.scan-view.scan-live-only .scan-loading[hidden] { display: none; }
.scan-view.scan-live-only .scan-loading svg { width: 18px; height: 18px; }
.scan-view.scan-live-only .scan-loading span { font-size: var(--fs-sm); }

/* The legal note in another language: the English-version button wraps under it on phones */
.legal-lang { flex-wrap: wrap; }

/* Ask Joncler (/joncler, Poncler Pro): your chats beside the conversation (above it on phones) */
.jc-page .jc-title { display: flex; align-items: center; gap: 14px; }
.jc-page .jc-face { flex: none; filter: drop-shadow(0 4px 8px #0007); }
.jc-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 16px; align-items: start; }
.jc-side { position: sticky; top: 80px; max-height: calc(100vh - 110px); overflow-y: auto; }
.jc-side .panel-head { align-items: center; }
.jc-chats { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.jc-chats li { display: flex; align-items: center; gap: 4px; border-radius: var(--r-md); }
.jc-chats li.on { background: #d4ab5e1a; }
.jc-chats li:hover { background: #ffffff0a; }
.jc-chat { flex: 1; min-width: 0; display: grid; gap: 1px; padding: 8px 10px; text-align: left; background: none; border: 0; cursor: pointer; border-radius: var(--r-md); }
.jc-chat b { font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jc-chat small { font-size: var(--fs-2xs); }
.jc-none { font-size: var(--fs-sm); }
.jc-convo { height: calc(100vh - 230px); min-height: 460px; }
.jc-msg { max-width: 88%; }
.jc-mini { flex: none; }
.jc-bubble { line-height: 1.55; background: color-mix(in srgb, var(--brass) 10%, transparent); border-color: color-mix(in srgb, var(--brass) 32%, transparent); white-space: pre-wrap; }
.jc-bubble ul { margin: 4px 0; padding-left: 20px; white-space: normal; }
.jc-bubble a { color: var(--brass); }
.jc-error .jc-bubble { border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.jc-cards { display: inline-flex; gap: 2px; --cw: 24px; vertical-align: middle; white-space: nowrap; }
.jc-cards .card { animation: none; }
.jc-note { align-self: center; font-size: var(--fs-sm); }
.jc-welcome { margin: auto; display: grid; justify-items: center; gap: 6px; max-width: 520px; text-align: center; padding: 12px 0; }
.jc-welcome p { margin: 0; }
.jc-suggest { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.jc-chip { cursor: pointer; padding: 7px 12px; font-size: var(--fs-sm); }
.jc-chip:hover { border-color: var(--brass); }
.jc-composer { align-items: flex-end; }
.jc-composer textarea { flex: 1; min-height: 44px; max-height: 180px; resize: none; }
.jc-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 0 14px 12px; font-size: var(--fs-xs); }
.jc-dots { display: inline-flex; gap: 4px; vertical-align: middle; }
.jc-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--brass); animation: jc-dot 1.2s ease-in-out infinite; }
.jc-dots i:nth-child(2) { animation-delay: .2s; }
.jc-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes jc-dot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .jc-dots i { animation: none; opacity: .7; } }
@media (max-width: 959px) {
  .jc-layout { grid-template-columns: minmax(0, 1fr); }
  .jc-side { position: static; max-height: 210px; order: 2; }
  .jc-convo { height: calc(100dvh - 250px); min-height: 380px; }
  .jc-page .jc-face svg { width: 42px; height: 48px; }
  .jc-msg { max-width: 96%; }
}

/* A page still loading after a moment (main.js render): the line in the middle of the page, instead of a blank one */
.page-loading { display: grid; place-items: center; min-height: 40vh; }
.page-loading p { display: inline-flex; align-items: center; gap: 8px; margin: 0; }

/* Settings → At the table: the quick lines, as pills to tap (up to three lit, numbered in the order picked) */
.emote-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.emote-pick { cursor: pointer; padding: 6px 12px; font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: 6px; }
.emote-pick:hover { border-color: var(--brass); }
.emote-pick[aria-pressed="true"] { background: #d4ab5e26; border-color: var(--brass); color: var(--text); }
.emote-pick b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--brass); color: #1f1613; font-size: var(--fs-2xs); }
/* The scanner: holding the screen selects nothing (no blue marking), and no long-press menu or tap highlight; a text
   field in it can still be typed in and selected */
dialog.scan-view, dialog.scan-view * { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
dialog.scan-view :is(input, textarea) { user-select: text; -webkit-user-select: text; }
/* Stats → Playing style: how your style changed, the carousel's second slide (drawStyleTrend in me.js) */
.style-trend .st-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: var(--fs-xs); color: var(--muted); }
.style-trend .st-legend span { display: inline-flex; align-items: center; gap: 6px; }
.style-trend .st-legend i { width: 14px; height: 3px; border-radius: var(--r-pill); }
.style-trend .st-vpip { background: #6fa8dc; } .style-trend .st-af { background: #e0565b; }