/* ===== home (index.html) ===== */
:root{
  --bg:#0B0C0E;
  --black-1:#07080A; --black-2:#101215;
  --surface-1:#1B1B1F; --surface-2:#242429; --surface-3:#2E2E34;
  --rule:#333842; --rule-soft:#33384280;
  --ink-1:#F4F6F8; --ink-2:#DFE3E8; --ink-3:#C9CED5;
  --surface-input:#07080A;

  --coral:#1D4E73; --coral-press:#163B58; --coral-ink:#F6E9EA;
  --sky:#E5E5E5;
  --sage:#C7D1B8;  --sage-ink:#141610;
  --honey:#C9A227; --honey-press:#B08F1F; --honey-ink:#1A1508;
  --green:#587A3A; --green-ink:#F1F4E8;
  --red:#A32632;   --red-ink:#F6E9EA;
  --indigo:#0F3550; --indigo-press:#164665; --indigo-ink:#E5EEF4;
  --coral-text:color-mix(in srgb,var(--coral) 45%,#BFE0FF); --red-text:color-mix(in srgb,var(--red) 55%,#FF7A85); --green-text:color-mix(in srgb,var(--green) 50%,#C8E0A0);

  --font-display:"WP Display","Poppins","Helvetica Neue",Arial,sans-serif;
  --font-ui:"WP Body","Lexend","Helvetica Neue",Arial,sans-serif;
  --font-mono:"WP Display","Poppins","Helvetica Neue",Arial,sans-serif;

  --size-3xs:13px; --size-2xs:14px; --size-xs:14px; --size-sm:15px;
  --size-md:16px;  --size-lg:19px;  --size-xl:22px;  --size-2xl:28px; --size-3xl:36px; --size-4xl:48px; --size-5xl:64px;

  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-black:900;
  --leading-tight:1.05; --leading-snug:1.25;
  --tracking-display:-0.025em; --tracking-wide:0.04em; --tracking-label:0.16em;

  --space-1:2px; --space-2:4px; --space-3:6px; --space-4:8px;
  --space-5:12px; --space-6:16px; --space-7:20px; --space-8:24px; --space-9:32px; --space-10:40px; --space-12:64px; --space-14:96px;
  --control-h-sm:28px; --control-h-md:36px; --control-h-lg:52px;

  --border-1:1px; --border-2:2px;
  --focus-ring:var(--border-2) solid var(--sky); --focus-offset:2px;

  --duration-fast:120ms; --duration-base:180ms; --ease:cubic-bezier(.2,0,0,1);
  --transition-control:background-color var(--duration-fast) var(--ease),color var(--duration-fast) var(--ease),border-color var(--duration-fast) var(--ease);
  --shadow-card:0 6px 14px rgba(0,0,0,.55);
}

/* "Return to your table" pill: shown site-wide (any page, any breakpoint)
   whenever the player has an active table they haven't explicitly quit.
   Normally rendered inline, right after the header logo (see
   wpRenderReturnBanner), so it sits in the same row as the logo, above
   the nav/menu row underneath it. Falls back to a fixed top-right pill
   only on pages with no shared header. See wpHasActiveTable(). */
#wpReturnBanner{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--coral);color:var(--coral-ink);text-decoration:none;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:12px;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 6px 18px rgba(0,0,0,.45);white-space:nowrap}
#wpReturnBanner:not(.inline){position:fixed;top:12px;right:12px;z-index:999}
#wpReturnBanner.inline{margin-left:16px;padding:7px 12px;font-size:11px;box-shadow:none}
#wpReturnBanner .dot{width:7px;height:7px;border-radius:50%;background:var(--coral-ink);animation:wpReturnPulse 1.4s ease-in-out infinite}
#wpReturnBanner .ar{font-size:14px}
@keyframes wpReturnPulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (max-width:640px){
  #wpReturnBanner:not(.inline){ top:8px; right:8px; padding:7px 11px; font-size:10px; gap:6px }
  #wpReturnBanner.inline{ margin-left:8px; padding:5px 9px; font-size:8px; gap:4px }
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
/* No double-tap zoom anywhere (fast taps on + / − and bet buttons kept zooming
   the page on phones). Pinch zoom still works. */
html{touch-action:manipulation}
button,a,input,label{touch-action:manipulation}
body{margin:0;background:var(--bg);color:var(--ink-1);font-family:var(--font-ui);-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit;border-radius:0;background:none;border:0}
:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-4);
  border-radius:0;font-family:var(--font-display);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;cursor:pointer;white-space:nowrap;
  text-decoration:none;
  transition:var(--transition-control),transform var(--duration-fast) var(--ease),box-shadow var(--duration-fast) var(--ease);
  border:var(--border-1) solid transparent;}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-card)}
.btn:active{transform:none}
.btn.lg{height:var(--control-h-lg);padding:0 var(--space-9);font-size:var(--size-md)}
.btn.md{height:var(--control-h-md);padding:0 var(--space-7);font-size:var(--size-xs)}
.btn.coral{background:var(--coral);color:var(--sky)}
.btn.coral:hover{background:color-mix(in srgb,var(--coral) 88%,#fff)}
.btn.steel{background:var(--surface-3);color:var(--ink-1)}
.btn.steel:hover{background:color-mix(in srgb,var(--surface-3) 88%,#fff)}
.btn.outline{background:transparent;color:var(--ink-1);border-color:var(--rule)}
.btn.outline:hover{color:var(--ink-1);border-color:var(--ink-1)}

/* ---------- Header ---------- */
.hp-header{display:flex;align-items:center;gap:var(--space-7);height:56px;padding:0 var(--space-8);border-bottom:1px solid var(--rule);flex:0 0 auto;position:sticky;top:0;z-index:2;background:var(--bg)}
.hp-header .mark{display:flex;align-items:center;gap:var(--space-4);text-decoration:none}
.hp-header .mark img{display:block;height:32px;width:auto}
.hp-header .right{margin-left:auto;display:flex;align-items:center;gap:var(--space-6)}
.hp-header .login-link{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--size-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);text-decoration:none}
.hp-header .login-link:hover{color:var(--ink-1)}
.login-link[data-wp-account]:not(.signed-in){display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 20px;background:#C9A227;color:#1A1508!important;font:800 13px/1 WP Display,Poppins,sans-serif!important;letter-spacing:.08em!important;text-transform:uppercase;text-decoration:none}
.login-link[data-wp-account]:not(.signed-in):hover{background:#E5E5E5;color:#0B0C0E!important}
.login-link.signed-in{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;background:var(--surface-3,#2E2E34);color:#F4F6F8!important;text-transform:none!important;letter-spacing:0!important;font-size:14px!important}
.login-link.signed-in:hover{background:#E5E5E5;color:#0B0C0E!important}
.acct-dot{width:8px;height:8px;border-radius:50%;background:#587A3A;flex:0 0 auto}

/* Plain, unscoped span with no base style of its own (the .cr-header/
   .gd-header/.th-header rules elsewhere in the file don't match, since
   every one of these headers actually renders with the shared .hp-header
   class) so it needs its own rule here rather than relying on those. */
.hp-header .wordmark-line{font-family:var(--font-mono);font-size:var(--size-2xs);color:var(--ink-2);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}

/* ---------- Scroll hero: ported verbatim from Claude design's wen.poker.dc.html ---------- */
.lp-lede{display:flex;flex-direction:column;justify-content:center}
.lp-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;grid-auto-rows:1fr}
@media (max-width:820px){.lp-cards{grid-template-columns:1fr;grid-auto-rows:auto}}
/* Small phones: tighter cards and form padding so nothing runs past 320px. */
@media (max-width:380px){
  .lp-cards>div{padding:22px 18px 26px!important;min-width:0}
  .lp-cards>div>span:first-child{font-size:28px!important}
  .lg-card{padding:28px 18px!important}
  #lgSeg .seg-btn{letter-spacing:.06em;padding:0 6px}
  #view-login div:has(> #lgSeg){padding:24px 16px!important;min-width:0}
  #view-login div:has(> div > #lgSeg){padding-left:12px!important;padding-right:12px!important}
  #view-login .btn{white-space:normal;height:auto;min-height:44px;line-height:1.2}
  /* Two-up tab bars: columns may shrink and labels wrap instead of pushing
     the bar past the screen edge. */
  .seg[style*="grid"]{grid-auto-columns:minmax(0,1fr)!important}
  .seg[style*="grid"] .seg-btn{min-width:0;white-space:normal;line-height:1.15;height:auto;min-height:40px;padding:6px 6px}
  #view-profile h1,.pf-name{overflow-wrap:anywhere}
}
.lp-cards .btn.value:hover{background:#A8212C;color:#F4F6F8;border-color:transparent}
.lp-cards .btn.value:focus-visible{outline-color:#A8212C}

@media (max-width:760px){
  .hp-header{padding:0 var(--space-6)}
}
/* Every page's top nav shares this .hp-header shell (logo, [data-wp-nav]
   link list, [data-wp-quickstart] dropdown). It never wrapped, so on a
   phone-width screen the logo + 5 nav links + CTA button all fought for
   one 56px-tall row and overflowed horizontally. Below 760px it now
   wraps onto two rows: logo + actions up top, nav links underneath. */
@media (max-width:760px){
  /* Several header instances set a wide 32px gap inline (fine on desktop
     with a full nav row to fill), but that gap applies to every flex
     child including logo->banner and banner->Quick Start, leaving a huge
     dead gap between the logo and the "Return to your table" pill once
     the nav wraps out of row 1. column-gap needs !important since gap is
     set via an inline style, which otherwise always wins over an external
     rule regardless of selector specificity. */
  .hp-header{height:auto;min-height:56px;flex-wrap:wrap;row-gap:10px;column-gap:10px!important;padding:10px var(--space-6)}
  .hp-header nav[data-wp-nav]{order:3;width:100%;margin-right:0;flex-wrap:wrap;row-gap:8px;column-gap:18px}
  .hp-header .right{order:2}
  .hp-header .login-link{display:none}
  /* Pages like Verify/Profile put .wp-qs directly in .hp-header instead of
     wrapping it in .right (which already gets order:2 above). Without an
     explicit order it defaulted to sitting wherever normal flex order put
     it, sometimes mid-row rather than pinned to the right edge. Since its
     dropdown (.wp-qs-pop) is positioned "right:0, width:220px" relative to
     itself, a .wp-qs that isn't hard against the right edge lets that
     220px-wide popup extend left past the screen edge, i.e. exactly the
     "menu opens half off-screen" bug. Pinning it here, same as .right,
     fixes it regardless of which markup shape a given page uses.
     Also gives the "Return to your table" banner (inserted right after
     the logo) and Quick Start room to share row 1 with the logo, instead
     of the banner alone stretching that row and pushing Quick Start (and
     the header's overall height) down. */
  .hp-header > .wp-qs{order:2;margin-left:auto}
  #wpReturnBanner.inline{order:1}
  /* Create-flow header (logo / "NEW TOURNAMENT" label / Go back-Skip to
     end-Cancel) has no nav row to wrap out separately, so on a phone
     width the label plus three text buttons don't fit one line. The
     label is pure context, not a control, so it's the one dropped;
     shrinking the buttons' gap keeps the three real actions on one line
     next to each other instead of wrapping mid-row. */
  .hp-header .wordmark-line{display:none}
  .hp-header .right{gap:var(--space-5,12px)}
}
@media (max-width:420px){
  .hp-header .mark img{height:27px}
  .wp-qs-btn{padding:0 var(--space-5,14px);font-size:11px}
}
/* Phones: one compact header row (logo left, actions right) and the page
   links on a single line underneath that scrolls sideways if it must,
   instead of two or three stacked rows of full-size desktop buttons. */
@media (max-width:760px){
  .hp-header{column-gap:8px!important;row-gap:4px;padding:8px 16px 0}
  .hp-header .mark{flex:0 0 auto}
  .hp-header .right,.hp-header > .wp-qs{margin-left:auto;gap:8px;flex-wrap:nowrap}
  .hp-header .right .btn,.hp-header > .btn,.hp-header .wp-qs-btn,.hp-header a.login-link.signed-in,.hp-header .right a[data-wp-account]{height:40px;min-height:40px;padding:0 12px;font-size:12px;letter-spacing:.08em;white-space:nowrap}
  .hp-header .right .login-link{font-size:12px}
  .hp-header > .btn{margin-left:auto}
  .hp-header nav[data-wp-nav]{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:20px!important;padding:0 0 2px;-webkit-overflow-scrolling:touch}
  .hp-header nav[data-wp-nav]::-webkit-scrollbar{display:none}
  .hp-header nav[data-wp-nav] a{flex:0 0 auto;font-size:14px!important;white-space:nowrap;padding:8px 0}
  .hp-header:not(:has(nav[data-wp-nav])){padding-bottom:8px}
}
/* A phone held sideways doesn't have the height for the table: ask for
   portrait instead of drawing seats on top of each other. */
.tb-rotate{display:none}
@media (orientation:landscape) and (max-height:500px) and (hover:none){
  .tb-rotate{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;background:var(--bg,#0B0C0E);text-align:center}
  .tb-rotate img{width:56px;height:auto;opacity:.9;margin:20px 0 26px;animation:tb-rot 1.6s ease-in-out infinite}
  .tb-rotate b{font:800 20px/1.2 WP Display,Poppins,sans-serif;color:var(--ink-1,#F4F6F8)}
  .tb-rotate span{font-size:15px;color:var(--ink-2,#DFE3E8);max-width:36ch}
}
@keyframes tb-rot{0%,20%{transform:rotate(-90deg)}60%,100%{transform:rotate(0)}}
/* iPhone Safari zooms the whole page into any text box under 16px and stays
   zoomed, pushing things off the side. 16px everywhere on touch screens. */
@media (hover:none),(max-width:760px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select{font-size:16px!important;min-width:0;max-width:100%}
}

/* Homepage footer: one long horizontal band (logo, links, socials) with a
   thin fine-print strip under it. Phones keep it horizontal too: logo and
   socials share one row, links sit in an even 2 x 2 grid. */
/* Hero chips: don't cut them off at the bottom of the pinned hero box. They
   stay visible in the 48px gap above the dark intro section (the dark section
   still covers anything lower); sideways overflow stays clipped. */
@supports (overflow:clip){ [data-hero-sticky]{overflow-x:clip!important;overflow-y:visible!important} }
.wp-foot{margin-top:40px;border-top:1px solid #33384280;background:#07080A}
.wp-foot-top{max-width:1200px;margin:0 auto;padding:26px 32px 22px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:22px 32px}
.wp-foot .brand{flex:0 0 auto;line-height:0}
.wp-foot .brand img{height:34px;display:block}
.wp-foot .links{grid-column:1/-1;grid-row:2;display:flex;flex-wrap:wrap;justify-content:space-evenly;gap:12px 20px;padding-top:20px;border-top:1px solid #33384280}
.wp-foot .links a{font:700 12px/1.2 WP Display,Poppins,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#DFE3E8;text-decoration:none;white-space:nowrap}
.wp-foot .links a:hover{color:#fff}
/* SEO guide links: a quiet footer row, not a block on the page */
.wp-foot .guides{grid-column:1/-1;grid-row:3;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:6px 18px;font:600 12px/1.5 WP Display,Poppins,sans-serif}
.wp-foot .guides span{font-weight:800;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#5E646E}
.wp-foot .guides a{color:#C9CED5;text-decoration:none}
.wp-foot .guides a:hover{color:#DFE3E8}
.wp-foot .words{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:92ch}
.wp-foot .beta-note{margin:0 0 6px;font:500 13px/1.5 WP Display,Lexend,sans-serif;color:var(--ink-2,#B9BEC6);text-wrap:balance}
.wp-foot .beta-note .pill{display:inline-block;margin-right:8px;padding:2px 7px;border:1px solid currentColor;border-radius:999px;font:800 10px/1.3 WP Display,Poppins,sans-serif;letter-spacing:.14em;text-transform:uppercase;vertical-align:1px}
.wp-foot .beta-note button{padding:0;border:0;background:none;font:inherit;color:var(--ink-1,#F4F6F8);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.wp-foot .about{margin:0;font:400 12px/1.5 WP Display,Lexend,sans-serif;color:#C9CED5}
/* Bottom strip: one centered column (about, legal, copyright) */
.wp-foot .wp-foot-bottom{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px}
.wp-foot .guides{padding-top:14px;border-top:1px solid #33384280}
.wp-foot .social{justify-self:end;display:flex;gap:8px}
.wp-foot .social>*{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid #333842;color:#DFE3E8}
.wp-foot .social>a:hover{border-color:#C9CED5;color:#fff}
.wp-foot .social .soon{color:#5A5A64}
.wp-foot-bottom{max-width:1200px;margin:0 auto;padding:16px 32px 26px;border-top:1px solid #33384280;display:flex;align-items:center;justify-content:space-between;gap:24px}
.wp-foot .legal{font-size:13px;line-height:1.5;font-weight:800;color:var(--coral-text);max-width:78ch}
.wp-foot .meta{flex:0 0 auto;font:700 11.5px/1.4 WP Display,Poppins,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#9AA1AB;white-space:nowrap}
.wp-foot .meta a{color:#C2A661;text-decoration:none}
@media (max-width:900px){
  .wp-foot-top{gap:18px 12px;padding:22px 16px}
  .wp-foot .links{display:grid;grid-template-columns:repeat(2,1fr);gap:0 8px;padding-top:10px;text-align:center}
  .wp-foot .links a{display:block;padding:11px 0;white-space:normal;font-size:12.5px}
  .wp-foot-bottom{flex-direction:column;align-items:center;gap:10px;padding:14px 16px 22px}
  .wp-foot .guides{gap:0 14px}
  .wp-foot .guides a{padding:5px 0}
  .wp-foot .meta{white-space:normal}
}
@media (max-width:420px){
  .tabs .tab-btn{padding:0 12px;white-space:nowrap}
}


/* waiting room: names only, compact, checked in first, waiting grayed */
.wr-group{margin-top:32px}
.wr-group+.wr-group{margin-top:22px}
.wr-group-h{display:flex;align-items:baseline;gap:10px}
.wr-group-h h3{margin:0;font:800 15px/1 WP Display,Poppins,sans-serif;letter-spacing:.02em;color:var(--ink-1)}
.wr-group-h span{font:800 13px/1 WP Display,Poppins,sans-serif;color:var(--ink-1)}
.wr-names{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}
.wr-name{padding:6px 10px;background:var(--surface-1);border:1px solid var(--rule);font:700 13px/1.1 WP Display,Poppins,sans-serif;color:var(--ink-1)}
.wr-names.dim .wr-name{opacity:.45}
.wr-empty{margin:10px 0 0;font-size:14px;color:var(--ink-2)}
.wr-auto{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:15px;color:var(--ink-1);cursor:pointer}
.wr-auto .check-box{margin-top:0;cursor:pointer;color:var(--honey-ink)}
#app-waitingroom .btn.outline{color:var(--ink-1);border-color:#5A606B}
#app-waitingroom .btn.steel{color:var(--ink-1)}
#app-waitingroom .label{color:var(--ink-1)}
/* host dashboard: phase button, kick controls */
.th-phase{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 22px;background:var(--surface-1);border:1px solid var(--rule)}
.th-phase-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.th-phase-txt .lb{font:700 11px/1 WP Display,Poppins,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.th-phase-txt .vl{font:800 18px/1.2 WP Display,Poppins,sans-serif;color:var(--ink-1)}
.th-phase-txt .note{font-size:14px;line-height:1.4;color:var(--ink-1)}
.th-kick-card{padding:16px 22px;background:var(--surface-1);border:1px solid var(--rule);display:flex;flex-direction:column;gap:12px}
.th-kick-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.th-kick-row .t{display:block;font:700 14px/1.3 WP Display,Poppins,sans-serif;color:var(--ink-1)}
.th-kick-row .d{display:block;margin-top:3px;font-size:13.5px;line-height:1.4;color:var(--ink-2)}
.th-kick-row .switch{flex:0 0 auto}
.th-kick-mins{display:inline-grid;grid-auto-flow:column;align-self:flex-start;border:1px solid var(--rule);background:var(--surface-input)}
.th-kick-mins .seg-btn{height:32px;font-family:var(--font-display);font-weight:700;color:var(--ink-1)}
.th-player-row .th-kick{margin-left:auto}
@media (max-width:640px){ .th-phase{flex-direction:column;align-items:stretch} }
/* ===== login (wenpoker-login.html) ===== */
:root{
  --bg:#0B0C0E;
  --surface-1:#1B1B1F; --surface-input:#07080A;
  --rule:#333842;
  --ink-1:#F4F6F8; --ink-2:#DFE3E8; --ink-3:#C9CED5;
  --coral:#1D4E73;
  --font-display:"WP Display","Poppins","Helvetica Neue",Arial,sans-serif;
  --font-ui:"WP Body","Lexend","Helvetica Neue",Arial,sans-serif;
  --font-mono:"WP Display","Poppins","Helvetica Neue",Arial,sans-serif;
  --tracking-wide:0.04em; --tracking-label:0.16em; --tracking-display:-0.02em;
  --duration-fast:120ms; --ease:cubic-bezier(.2,0,0,1);
  --transition-control:background-color var(--duration-fast) var(--ease),color var(--duration-fast) var(--ease),border-color var(--duration-fast) var(--ease);
  --shadow-card:0 6px 14px rgba(0,0,0,.55);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink-1);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0}
input{font:inherit;border-radius:0}
:focus-visible{outline:2px solid var(--ink-1);outline-offset:2px}

.lg-header{display:flex;align-items:center;height:64px;padding:0 var(--space-9,32px);border-bottom:1px solid var(--rule)}
.wp-banner{width:100%;overflow:hidden;background:url('/wenpoker/assets/suit-pattern-banner.webp') center/cover no-repeat;display:flex;align-items:center;justify-content:center;padding:clamp(24px,4vw,40px) 24px;border-bottom:1px solid var(--rule)}
.wp-banner img{display:block;height:clamp(44px,5vw,72px);width:auto}
.lg-header img{height:24px}

.lg-main{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 24px}
.lg-card{width:100%;max-width:380px;border:1px solid var(--rule);padding:40px 36px;display:flex;flex-direction:column;gap:24px}
.lg-title{margin:0;font-family:var(--font-display);font-weight:800;font-size:26px;letter-spacing:var(--tracking-display)}
.lg-sub{margin:0;font-size:14px;color:var(--ink-3);line-height:1.5}

.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--font-ui);font-weight:600;font-size:12px;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-3)}
.field input{height:46px;padding:0 14px;background:var(--surface-input);border:1px solid var(--rule);color:var(--ink-1);font-size:15px;transition:var(--transition-control)}
.field input:focus{border-color:var(--coral);outline:none}
.field input::placeholder{color:var(--ink-3);opacity:1}
/* Password boxes fell back to the browser font; match the other inputs. */
.field input[type=password]{font-family:inherit;letter-spacing:.08em}

.btn{height:48px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:var(--tracking-wide);text-transform:uppercase;cursor:pointer;border:1px solid transparent;transition:var(--transition-control),transform var(--duration-fast) var(--ease),box-shadow var(--duration-fast) var(--ease);text-decoration:none}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-card)}
.btn.coral{background:var(--coral);color:#F6E9EA}
.btn.coral:hover{background:color-mix(in srgb,var(--coral) 88%,#fff)}
.btn.outline{background:transparent;color:var(--ink-1);border-color:var(--rule)}
.btn.outline:hover{border-color:var(--ink-1)}

.lg-divider{display:flex;align-items:center;gap:12px;color:var(--ink-3);font-size:11px;letter-spacing:var(--tracking-label);text-transform:uppercase}
.lg-divider::before,.lg-divider::after{content:"";flex:1;height:1px;background:var(--rule)}

.lg-seg{width:100%;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--rule);margin-bottom:28px}
.lg-seg button{height:40px;font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);border-right:1px solid var(--rule);cursor:pointer;transition:var(--transition-control)}
.lg-seg button:last-child{border-right:0}
.lg-seg button.on{background:var(--surface-1);color:var(--ink-1)}
.lg-seg button:hover:not(.on){color:var(--ink-1)}

.lg-switch{margin:0;text-align:center;font-size:13px;color:var(--ink-3)}
.lg-switch button{text-decoration:underline;text-underline-offset:2px;color:var(--ink-1);cursor:pointer}

.lg-fine{margin:0;text-align:center;font-family:var(--font-mono);font-size:11px;color:var(--ink-3)}

.lg-footer{padding:16px 32px;border-top:1px solid var(--rule);display:flex}
.lg-footer span,.lg-footer a{font-family:var(--font-mono);font-size:11px;color:var(--ink-3)}
.lg-footer a{text-decoration:underline;text-underline-offset:2px}
.lg-footer .right{margin-left:auto}

/* ===== lobby (wenpoker-lobby.html) ===== */
/* ============================================================
   TOKENS, Graphite direction (wen.poker)
   Copied verbatim from wenpoker-graphite.html for visual parity.
   ============================================================ */
:root{
  --bg:#0B0C0E;
  --black-1:#07080A; --black-2:#101215;
  --surface-1:#1B1B1F; --surface-2:#242429; --surface-3:#2E2E34;
  --rule:#333842; --rule-soft:#33384280;
  --felt:#0E1013;
  --table-felt:#0d0e0d; --table-rail:#000000; --table-inlay:#151515;
  --ink-1:#F4F6F8; --ink-2:#DFE3E8; --ink-3:#C9CED5; --ink-inverse:#0B0C0E;
  --surface-input:#000000;

  --coral:#1D4E73; --coral-press:#163B58; --coral-ink:#F6E9EA;
  --sky:#E5E5E5;   --sky-press:#C4C4C4;   --sky-ink:#0D0D0F;
  --sage:#C7D1B8;  --sage-press:#AFBB9E;  --sage-ink:#141610;
  --rose:#8E3324;  --rose-press:#762A1D;  --rose-ink:#E5E5E5;
  --honey:#C9A227; --honey-press:#B08F1F; --honey-ink:#1A1508;
  --green:#587A3A; --green-press:#4A6630; --green-ink:#F1F4E8;
  --red:#A32632;   --red-press:#7E1B25;   --red-ink:#F6E9EA;

  --card-face:#E8E6E0; --card-ink-black:#17171A; --card-ink-red:#A8212C;
  --board-slot:#434A55;

  --font-display:"WP Display","Poppins","Helvetica Neue",Arial,sans-serif;
  --font-ui:"WP Body","Lexend","Helvetica Neue",Arial,sans-serif;
  --font-mono:"WP Display","Poppins","Helvetica Neue",Arial,sans-serif;

  --size-3xs:13px; --size-2xs:14px; --size-xs:14px; --size-sm:15px;
  --size-md:16px;  --size-lg:18px;  --size-xl:22px;  --size-2xl:28px;
  --size-3xl:36px; --size-4xl:48px;

  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-black:900;
  --leading-tight:1.05; --leading-snug:1.25; --leading-normal:1.5;
  --tracking-display:-0.02em; --tracking-normal:0; --tracking-wide:0.04em; --tracking-label:0.16em;

  --space-0:0px; --space-1:2px; --space-2:4px; --space-3:6px; --space-4:8px;
  --space-5:12px; --space-6:16px; --space-7:20px; --space-8:24px; --space-9:32px;
  --space-10:40px; --space-11:48px; --space-12:64px;
  --control-h-sm:28px; --control-h-md:36px; --control-h-lg:48px;

  --border-1:1px; --border-2:2px; --border-3:3px;
  --focus-ring:var(--border-2) solid var(--sky); --focus-offset:2px;

  --duration-instant:80ms; --duration-fast:120ms; --duration-base:180ms; --duration-slow:240ms; --duration-deliberate:400ms;
  --ease:cubic-bezier(.2,0,0,1);
  --transition-control:background-color var(--duration-fast) var(--ease),color var(--duration-fast) var(--ease),border-color var(--duration-fast) var(--ease);

  --shadow-overlay:0 28px 56px rgba(0,0,0,.6);
  --shadow-card:0 6px 14px rgba(0,0,0,.55);
  --shadow-table:0 40px 90px rgba(0,0,0,.65),0 6px 24px rgba(0,0,0,.45);
}
@media (prefers-reduced-motion:reduce){
  :root{ --duration-instant:0ms;--duration-fast:0ms;--duration-base:0ms;--duration-slow:0ms;--duration-deliberate:0ms; }
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink-1);font-family:var(--font-ui);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;border-radius:0;background:none;border:0}
input{font:inherit;border-radius:0}
:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
a{color:inherit}

.label{font-family:var(--font-ui);font-weight:var(--weight-semibold);font-size:var(--size-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-3)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ---------- Buttons (verbatim from graphite table) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-4);
  border-radius:0;font-family:var(--font-display);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;cursor:pointer;white-space:nowrap;
  transition:var(--transition-control),transform var(--duration-fast) var(--ease),box-shadow var(--duration-fast) var(--ease);
  border:var(--border-1) solid transparent;}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-card)}
.btn:active{transform:none}
.btn.block{width:100%}
.btn.lg{height:var(--control-h-lg);padding:0 var(--space-9);font-size:var(--size-md)}
.btn.md{height:var(--control-h-md);padding:0 var(--space-7);font-size:var(--size-xs)}
.btn.sm{height:var(--control-h-sm);padding:0 var(--space-5);font-size:var(--size-2xs)}
.btn.red{background:var(--red);color:var(--red-ink)}
.btn.red:hover{background:color-mix(in srgb,var(--red) 88%,#fff)}
.btn.green{background:var(--green);color:var(--green-ink)}
.btn.green:hover{background:color-mix(in srgb,var(--green) 88%,#fff)}
.btn.steel{background:var(--surface-3);color:var(--ink-1)}
.btn.steel:hover{background:color-mix(in srgb,var(--surface-3) 88%,#fff)}
.btn.value{background:var(--honey);color:var(--honey-ink)}
.btn.value:hover{background:color-mix(in srgb,var(--honey) 88%,#fff)}
.btn.outline{background:transparent;color:var(--ink-2);border-color:var(--rule)}
.btn.outline:hover{color:var(--ink-1);border-color:var(--ink-3)}
.btn.outline.hover-green:hover{background:var(--green);color:var(--green-ink);border-color:transparent}
.btn:disabled{opacity:.35;cursor:default;pointer-events:none}

.chip-amt{display:inline-flex;align-items:baseline;gap:var(--space-2);font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:var(--weight-medium);line-height:1;color:var(--honey)}
.chip-amt.plain{color:var(--ink-1)}
.chip-amt.sm{font-size:var(--size-xs)}
.chip-amt.md{font-size:var(--size-lg)}
.chip-amt.lg{font-size:var(--size-2xl)}

.tabs{display:flex;gap:0;flex-wrap:wrap;border-bottom:var(--border-1) solid var(--rule)}
.tab-btn{position:relative;display:inline-flex;align-items:center;height:34px;padding:0 var(--space-6);cursor:pointer;
  color:var(--ink-3);font-family:var(--font-ui);font-weight:var(--weight-semibold);font-size:var(--size-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;transition:var(--transition-control)}
.tab-btn.on{color:var(--ink-1)}
.tab-btn .underline{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent}
.tab-btn.on .underline{background:var(--ink-1)}

.seg{display:inline-grid;grid-auto-flow:column;border:1px solid var(--rule);background:var(--surface-input)}
.seg-btn{height:var(--control-h-sm);padding:0 var(--space-6);background:transparent;color:var(--ink-3);border:0;cursor:pointer;font-family:var(--font-ui);font-weight:var(--weight-semibold);font-size:var(--size-xs);letter-spacing:var(--tracking-wide);transition:var(--transition-control);white-space:nowrap}
.seg-btn.on{background:var(--indigo);color:var(--indigo-ink)}
/* Icon-only variant (table/global chat channel switcher): same segmented
   control, sized down to match the small bell/settings icons around it
   instead of a full text-label button. */
.seg-btn.ic{position:relative;width:30px;height:30px;padding:0;display:inline-flex;align-items:center;justify-content:center}
#lgSeg .seg-btn.on{box-shadow:inset 0 -3px 0 var(--coral)}

.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--size-3xs);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.badge .dot{width:5px;height:5px;border-radius:50%}
.badge{color:#0B0C0E}
.badge .dot{background:#0B0C0E}
.badge.registering{background:var(--green-text);color:#0B0C0E}
.badge.late{background:var(--red-text);color:#0B0C0E}
.badge.running{background:color-mix(in srgb,var(--indigo) 35%,#9CC8EE);color:#0B0C0E}
.badge.finished,.badge.private{background:transparent;color:var(--ink-1);border:1px solid var(--ink-3)}
.badge.registering .dot,.badge.late .dot,.badge.running .dot{background:#0B0C0E}
.badge.finished .dot,.badge.private .dot{background:var(--ink-1)}

.check-row{display:flex;align-items:flex-start;gap:var(--space-4);cursor:pointer}
.check-box{width:18px;height:18px;flex:0 0 auto;border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--honey-ink);margin-top:1px;transition:var(--transition-control)}
.check-box.on{background:var(--honey);border-color:var(--honey)}
.check-row .t{font-size:var(--size-sm);color:var(--ink-1);line-height:1.4}

/* ---------- Lobby listing/history cards (the real, currently-rendered
   markup, built by rowHTML()/histRowHTML() in the lobby script). The
   .lb-* rules further below are leftover from an earlier standalone
   prototype and are not applied to any markup that ships today. ---------- */
.lb2-card{background:var(--surface-1);border:1px solid var(--rule);position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto}
.lb2-admin-wrap{position:relative}
.lb2-admin-del{position:absolute;z-index:2;top:10px;right:10px;height:26px;padding:0 9px;border:1px solid var(--red);background:#0B0C0E;color:var(--red-text);font:800 10px/1 WP Display,Poppins,sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.lb2-admin-del:hover{background:var(--red);color:var(--red-ink,#F6E9EA)}
.lb2-card-main{padding:20px 24px;min-width:0}
.lb2-card-meta{border-left:1px solid var(--rule);padding:20px 24px;display:grid;grid-template-columns:110px 130px 130px;align-items:center;gap:24px}
.lb2-card-meta.lb2-card-meta-flex{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
@media (max-width:640px){
  .lb2-card{grid-template-columns:1fr}
  .lb2-card-meta{border-left:0;border-top:1px solid var(--rule);grid-template-columns:1fr 1fr;gap:16px}
  .lb2-card-meta .lb2-card-action{grid-column:1 / -1}
  .lb2-card-action .btn{width:100%}
  .seg-btn{padding:0 var(--space-3);font-size:11px}
}

/* ---------- Layout ---------- */
/* This was targeting #app, an id that doesn't exist anywhere in the page
   (the create-flow's real container is #app-create) so this whole shell
   rule was silently dead: no height, no flex, nothing. That's the actual
   reason the quiz card floated tiny and uncentered in a huge black
   viewport, and why a tall card (Payouts) grew the raw page height and
   scrolled the header/footer away with it instead of scrolling just its
   own content. Retargeted to the real container, and switched to a fixed
   height + overflow:hidden shell (only .cr-main scrolls internally) so
   the header and footer stay pinned at the true top/bottom always. */
#app-create{height:100vh;display:flex;flex-direction:column;overflow:hidden}
.lb-header{display:flex;align-items:center;gap:var(--space-7);height:56px;padding:0 var(--space-8);border-bottom:1px solid var(--rule);flex:0 0 auto;position:relative}
.lb-header img{display:block}
.lb-header .wordmark-line{font-family:var(--font-mono);font-size:var(--size-2xs);color:var(--ink-2);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.lb-nav{margin-left:var(--space-9);display:flex;gap:var(--space-8)}
.lb-nav a,.lb-nav .navbtn{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--size-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-decoration:none;transition:var(--transition-control);cursor:pointer;position:relative}
.lb-nav a.on{color:var(--ink-1)}
.lb-nav a:hover,.lb-nav .navbtn:hover{color:var(--ink-1)}
.lb-header-actions{margin-left:auto;display:flex;align-items:center;gap:var(--space-6)}

/* ---------- Sticky banner, slides under the panel like the landing page ---------- */
.lb-hero{position:sticky;top:0;z-index:0;width:100%;overflow:hidden;background:url('/wenpoker/assets/suit-pattern-banner.webp') center/cover no-repeat;display:flex;align-items:center;justify-content:center;padding:clamp(28px,4vw,48px) var(--space-8)}
.lb-hero img{display:block;height:clamp(52px,6vw,88px);width:auto}
.lb-panel{position:relative;z-index:1;background:#0B0C0E;border-top:1px solid var(--rule)}

.lb-create-menu{position:relative}
.lb-create-drop{position:absolute;top:calc(100% + 12px);left:0;min-width:200px;background:var(--surface-1);border:1px solid var(--rule);box-shadow:var(--shadow-overlay);display:none;flex-direction:column;z-index:15}
.lb-create-menu.open .lb-create-drop{display:flex}
.lb-create-drop a{display:block;padding:var(--space-5) var(--space-6);font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--size-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule-soft);transition:var(--transition-control)}
.lb-create-drop a:last-child{border-bottom:0}
.lb-create-drop a:hover{color:var(--ink-1);background:var(--surface-2)}

.lb-main{flex:1;max-width:1180px;width:100%;margin:0 auto;padding:var(--space-9) var(--space-8) var(--space-12)}

/* Welcome / promo banner */
.lb-welcome{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding:var(--space-5) var(--space-7);background:var(--surface-1);border:1px solid var(--rule);margin-bottom:var(--space-8)}
.lb-welcome .txt{font-size:var(--size-sm);color:var(--ink-2);line-height:1.4}
.lb-welcome .txt b{color:var(--ink-1)}
.lb-welcome a.cta{flex:0 0 auto;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--size-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--coral-text);text-decoration:none;white-space:nowrap}
.lb-welcome a.cta:hover{text-decoration:underline}

/* Toolbar */
.lb-toolbar{display:flex;align-items:center;gap:var(--space-6);margin-bottom:var(--space-7);flex-wrap:wrap}
.lb-search{flex:1 1 220px;min-width:180px;display:flex;align-items:center;height:var(--control-h-md);padding:0 var(--space-5);background:var(--surface-input);border:1px solid var(--rule)}
.lb-search:focus-within{border-color:var(--coral);outline:none}
.lb-search input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--ink-1);font-family:var(--font-ui);font-size:var(--size-sm)}
.lb-search svg{flex:0 0 auto;margin-right:var(--space-4);opacity:.5}
@media (max-width:760px){ .lb-search{flex:1 1 100%;width:100%;min-width:0} .lb-searchbox{width:100%!important} }
.lb-sort{display:flex;align-items:center;gap:var(--space-4)}
.lb-sort select{height:var(--control-h-md);background:var(--surface-input);border:1px solid var(--rule);color:var(--ink-1);font-family:var(--font-ui);font-size:var(--size-xs);padding:0 var(--space-5)}

/* Table list */
.lb-list-head{display:grid;grid-template-columns:2.2fr .8fr .9fr 1fr .9fr 1fr;gap:var(--space-6);padding:0 var(--space-6) var(--space-4);border-bottom:1px solid var(--rule)}
.lb-list-head span{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:10px;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-3)}
.lb-row{display:grid;grid-template-columns:2.2fr .8fr .9fr 1fr .9fr 1fr;gap:var(--space-6);align-items:center;padding:var(--space-6);border-bottom:1px solid var(--rule-soft);transition:var(--transition-control)}
.lb-row:hover{background:var(--surface-1)}
.lb-row-name{display:flex;flex-direction:column;gap:3px;min-width:0}
.lb-row-name .nm{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--size-md);color:var(--ink-1);letter-spacing:.01em}
.lb-row-name .sub{font-family:var(--font-mono);font-size:var(--size-2xs);color:var(--ink-3)}
.lb-row .vl{font-family:var(--font-mono);font-size:var(--size-sm);color:var(--ink-1)}
.lb-row .vl.muted{color:var(--ink-3)}
.lb-row-action{display:flex;justify-content:flex-end}

.lb-tabs-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-7)}
.lb-empty{padding:var(--space-12) var(--space-6);text-align:center;color:var(--ink-3)}
.lb-empty .t{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--size-lg);color:var(--ink-2);margin-bottom:var(--space-3)}
.lb-empty p{font-size:var(--size-sm);max-width:360px;margin:0 auto}

.lb-footer{display:flex;padding:var(--space-4) var(--space-8);border-top:1px solid var(--rule);flex:0 0 auto}
.lb-footer span{font-family:var(--font-mono);font-size:11px;color:var(--ink-3)}
.lb-footer span:last-child{margin-left:auto}

/* History / past-tournament rows */
.lb-hist-row{display:grid;grid-template-columns:2.2fr 1.4fr 1fr 1fr;gap:var(--space-6);align-items:center;padding:var(--space-6);border-bottom:1px solid var(--rule-soft)}
.lb-hist-row .sub{font-family:var(--font-mono);font-size:var(--size-2xs);color:var(--ink-3)}
.lb-hist-row .vl{font-family:var(--font-mono);font-size:var(--size-sm);color:var(--ink-1)}
.lb-hist-row .premium-tag{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--honey)}

/* Disclaimer banner (reused inside modal) */
.disclaimer{display:flex;gap:var(--space-4);padding:var(--space-5) var(--space-6);background:var(--surface-2);border:1px solid var(--coral);border-left:3px solid var(--coral)}
.disclaimer svg{flex:0 0 auto;color:var(--coral-text);margin-top:2px}
.disclaimer .txt{font-size:var(--size-sm);line-height:1.45;color:var(--ink-1)}
.disclaimer .txt b{color:var(--coral-text)}

/* Modal */
.modal-scrim{position:fixed;inset:0;background:rgba(7,8,10,.78);display:flex;align-items:center;justify-content:center;padding:var(--space-6);z-index:20}
.modal-panel{width:100%;max-width:460px;max-height:86vh;overflow:auto;background:var(--surface-1);border:1px solid var(--rule);box-shadow:var(--shadow-overlay);display:flex;flex-direction:column}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-6);border-bottom:1px solid var(--rule)}
.modal-head .t{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--size-md);letter-spacing:.02em;text-transform:uppercase;color:var(--ink-1)}
.modal-close{cursor:pointer;color:var(--ink-3);font-size:var(--size-lg);line-height:1}
.modal-close:hover{color:var(--ink-1)}
.modal-body{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-5)}
.modal-body .note-block{padding:var(--space-5);background:var(--surface-input);border:1px solid var(--rule)}
.modal-body .note-block .lb{display:block;margin-bottom:var(--space-3)}
.modal-body .note-block p{margin:0;font-size:var(--size-sm);line-height:1.5;color:var(--ink-1);white-space:pre-wrap}
.modal-body .field{display:flex;flex-direction:column;gap:var(--space-3)}
.modal-body .field input[type=text]{height:var(--control-h-lg);padding:0 var(--space-5);background:var(--surface-input);border:1px solid var(--rule);color:var(--ink-1);font-family:var(--font-ui);font-size:var(--size-md)}
.modal-body .field input[type=text]:focus{border-color:var(--coral);outline:none}
.modal-foot{display:flex;justify-content:flex-end;gap:var(--space-4);padding:var(--space-6);border-top:1px solid var(--rule)}

/* Tournament registration modal: a calm overview, not a warning dialog. */
.reg-modal .modal-body{gap:var(--space-6)}
.reg-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:var(--space-4)}
.reg-stat{display:flex;flex-direction:column;gap:4px;padding:var(--space-4);background:var(--surface-2);border:1px solid var(--rule)}
.reg-stat .k{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--size-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.reg-stat .v{font-family:var(--font-ui);font-weight:var(--weight-semibold);font-size:var(--size-sm);color:var(--ink-1)}
.reg-bounties{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);background:var(--surface-2);border:1px solid var(--rule);font-size:var(--size-sm);color:var(--ink-1)}
.reg-bounties .dot{width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:var(--honey)}
.reg-section{display:flex;flex-direction:column;gap:var(--space-3)}
.reg-payouts{display:flex;flex-direction:column;border:1px solid var(--rule)}
.reg-payout-row{display:flex;justify-content:space-between;padding:var(--space-3) var(--space-5);font-size:var(--size-sm)}
.reg-payout-row:not(:last-child){border-bottom:1px solid var(--rule)}
.reg-payout-row .place{color:var(--ink-2)}
.reg-payout-row .amt{font-family:var(--font-mono);color:var(--honey)}
.reg-hostmsg{padding:var(--space-5);background:var(--surface-input);border:1px solid var(--rule)}
.reg-hostmsg p{margin:8px 0 0;font-size:var(--size-sm);line-height:1.5;color:var(--ink-1);white-space:pre-wrap}

@media (max-width:860px){
  .lb-hist-row{grid-template-columns:1fr;gap:var(--space-3)}
  .lb-header{padding:0 var(--space-6)}
  .lb-nav{display:none}
  .lb-main{padding:var(--space-7) var(--space-5) var(--space-10)}
  .lb-welcome{flex-direction:column;align-items:flex-start;gap:var(--space-4)}
  .lb-list-head{display:none}
  .lb-row{grid-template-columns:1fr;gap:var(--space-3);padding:var(--space-5)}
  .lb-row-action{justify-content:flex-start;margin-top:var(--space-3)}
}

/* ===== create (wenpoker-create.html) ===== */
:root{
  --bg:#0B0C0E;
  --black-1:#07080A; --black-2:#101215;
  --surface-1:#1B1B1F; --surface-2:#242429; --surface-3:#2E2E34;
  --rule:#333842; --rule-soft:#33384280;
  --ink-1:#F4F6F8; --ink-2:#DFE3E8; --ink-3:#C9CED5;
  --surface-input:#07080A;

  --coral:#1D4E73; --coral-press:#163B58; --coral-ink:#F6E9EA;
  --sky:#E5E5E5;
  --sage:#C7D1B8;  --sage-ink:#141610;
  --honey:#C9A227; --honey-press:#B08F1F; --honey-ink:#1A1508;
  --green:#587A3A; --green-ink:#F1F4E8;
  --red:#A32632;   --red-ink:#F6E9EA;

  --font-display:"WP Display","Poppins","Helvetica Neue",Arial,sans-serif;
  --font-ui:"WP Body","Lexend","Helvetica Neue",Arial,sans-serif;
  --font-mono:"WP Display","Poppins","Helvetica Neue",Arial,sans-serif;

  --size-3xs:13px; --size-2xs:14px; --size-xs:14px; --size-sm:15px;
  --size-md:16px;  --size-lg:18px;  --size-xl:22px;  --size-2xl:28px; --size-3xl:36px; --size-4xl:44px;

  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-black:900;
  --leading-tight:1.05; --leading-snug:1.25;
  --tracking-display:-0.02em; --tracking-wide:0.04em; --tracking-label:0.16em;

  --space-1:2px; --space-2:4px; --space-3:6px; --space-4:8px;
  --space-5:12px; --space-6:16px; --space-7:20px; --space-8:24px; --space-9:32px; --space-10:40px; --space-12:64px;
  --control-h-sm:28px; --control-h-md:36px; --control-h-lg:48px;

  --border-1:1px; --border-2:2px;
  --focus-ring:var(--border-2) solid var(--sky); --focus-offset:2px;

  --duration-fast:120ms; --duration-base:180ms; --ease:cubic-bezier(.2,0,0,1);
  --transition-control:background-color var(--duration-fast) var(--ease),color var(--duration-fast) var(--ease),border-color var(--duration-fast) var(--ease);
  --shadow-card:0 6px 14px rgba(0,0,0,.55);
  --shadow-overlay:0 28px 56px rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink-1);font-family:var(--font-ui);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;border-radius:0;background:none;border:0}
input,select,textarea{font:inherit;border-radius:0}
:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}

.label{font-family:var(--font-ui);font-weight:var(--weight-semibold);font-size:var(--size-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-3)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-4);
  border-radius:0;font-family:var(--font-display);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;cursor:pointer;white-space:nowrap;
  transition:var(--transition-control),transform var(--duration-fast) var(--ease),box-shadow var(--duration-fast) var(--ease);
  border:var(--border-1) solid transparent;}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-card)}
.btn:active{transform:none}
.btn.lg{height:var(--control-h-lg);padding:0 var(--space-9);font-size:var(--size-md)}
.btn.md{height:var(--control-h-md);padding:0 var(--space-7);font-size:var(--size-xs)}
.btn.sm{height:var(--control-h-sm);padding:0 var(--space-5);font-size:var(--size-2xs)}
.btn.green{background:var(--green);color:var(--green-ink)}
.btn.green:hover{background:color-mix(in srgb,var(--green) 88%,#fff)}
.btn.coral{background:var(--coral);color:var(--sky)}
.btn.coral:hover{background:color-mix(in srgb,var(--coral) 88%,#fff)}
.btn.steel{background:var(--surface-3);color:var(--ink-1)}
.btn.steel:hover{background:color-mix(in srgb,var(--surface-3) 88%,#fff)}
.btn.outline{background:transparent;color:var(--ink-2);border-color:var(--rule)}
.btn.outline:hover{color:var(--ink-1);border-color:var(--ink-3)}
.btn:disabled{opacity:.35;cursor:default;pointer-events:none}

.switch{position:relative;width:40px;height:20px;background:var(--surface-3);border:1px solid var(--rule);cursor:pointer;transition:var(--transition-control);flex:0 0 auto}
.switch.on{background:var(--sage);border-color:var(--sage)}
.switch .knob{position:absolute;top:1px;left:1px;width:16px;height:16px;background:var(--ink-2);transition:left var(--duration-fast) var(--ease),background-color var(--duration-fast) var(--ease)}
.switch.on .knob{left:21px;background:var(--sage-ink)}

.check-row{display:flex;align-items:flex-start;gap:var(--space-4);cursor:pointer}
.check-box{width:18px;height:18px;flex:0 0 auto;border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--honey-ink);margin-top:1px;transition:var(--transition-control)}
.check-box.on{background:var(--honey);border-color:var(--honey)}
.check-row .t{font-size:var(--size-sm);color:var(--ink-1);line-height:1.4}

.field{display:flex;flex-direction:column;gap:var(--space-3)}
.field input[type=text],.field input[type=number],.field input[type=datetime-local],.field select,.field textarea{
  padding:0 var(--space-5);background:var(--surface-input);border:1px solid var(--rule);color:var(--ink-1);
  font-family:var(--font-ui);font-size:var(--size-md);transition:var(--transition-control);width:100%}
.field input[type=text],.field input[type=number],.field input[type=datetime-local],.field select{height:var(--control-h-lg)}
.field textarea{padding:var(--space-4) var(--space-5);min-height:170px;resize:vertical;line-height:1.4}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--coral);outline:none}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);opacity:1;font-weight:var(--weight-regular)}
.field .hint{font-size:var(--size-xs);color:var(--ink-3)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7)}

.disclaimer{display:flex;gap:var(--space-4);padding:var(--space-5) var(--space-6);background:var(--surface-2);border:1px solid var(--coral);border-left:3px solid var(--coral)}
.disclaimer svg{flex:0 0 auto;color:var(--coral-text);margin-top:2px}
.disclaimer .txt{font-size:var(--size-sm);line-height:1.45;color:var(--ink-1)}
.disclaimer .txt b{color:var(--coral-text)}

.dev-note{display:flex;gap:var(--space-3);padding:var(--space-4) var(--space-5);background:var(--surface-2);border-left:3px solid var(--ink-3)}
.dev-note span{font-size:var(--size-xs);line-height:1.4;color:var(--ink-3)}

/* ---------- Shell ---------- */
/* This was targeting #app, an id that doesn't exist anywhere in the page
   (the create-flow's real container is #app-create) so this whole shell
   rule was silently dead: no height, no flex, nothing. That's the actual
   reason the quiz card floated tiny and uncentered in a huge black
   viewport, and why a tall card (Payouts) grew the raw page height and
   scrolled the header/footer away with it instead of scrolling just its
   own content. Retargeted to the real container, and switched to a fixed
   height + overflow:hidden shell (only .cr-main scrolls internally) so
   the header and footer stay pinned at the true top/bottom always. */
#app-create{height:100vh;display:flex;flex-direction:column;overflow:hidden}
.cr-header{display:flex;align-items:center;gap:var(--space-7);height:56px;padding:0 var(--space-8);border-bottom:1px solid var(--rule);flex:0 0 auto}
.wp-banner{width:100%;flex:0 0 auto;overflow:hidden;background:url('/wenpoker/assets/suit-pattern-banner.webp') center/cover no-repeat;display:flex;align-items:center;justify-content:center;padding:clamp(24px,4vw,40px) var(--space-8);border-bottom:1px solid var(--rule)}
.wp-banner img{display:block;height:clamp(44px,5vw,72px);width:auto}
.cr-header img{display:block}
.cr-header .wordmark-line{font-family:var(--font-mono);font-size:var(--size-2xs);color:var(--ink-2);letter-spacing:.1em;text-transform:uppercase}
.cr-header .close{margin-left:auto;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--size-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);cursor:pointer}
.cr-header .close:hover{color:var(--ink-1)}

.cr-main{position:relative;flex:1;min-height:0;display:flex;align-items:flex-start;justify-content:center;padding:var(--space-9) var(--space-6);overflow-y:auto;-webkit-overflow-scrolling:touch}
/* Centered with auto margins, not align-items:center: a card taller than the
   area then scrolls fully instead of having its top and bottom cut off. */
.cr-main>.quiz-card{margin:auto 0}
/* The visible height on phones (100vh counts the space behind Safari's bars),
   and on phones one scroll area (the page) instead of a card scrolling inside
   a scrolling panel. Higher specificity: later rules restate #app-create. */
#view-create #app-create{height:100dvh}
@media (max-width:760px){
  #app-create .cr-footer{display:none}
  #app-create .cr-main{padding:16px 12px 28px}
  #app-create .quiz-card{max-height:none;overflow:visible}
}
.cr-watermark{position:absolute;left:50%;top:50%;width:1400px;max-width:none;transform:translate(-50%,-50%);opacity:.05;pointer-events:none;z-index:0;user-select:none}
.quiz-card{position:relative;z-index:1}

/* ---------- Quiz card ---------- */
.quiz-card{position:relative;width:100%;max-width:680px;background:var(--surface-1);backdrop-filter:none;border:1px solid var(--rule);padding:var(--space-9);display:flex;flex-direction:column;gap:var(--space-7);max-height:100%;overflow-y:auto}
.quiz-card.wide{max-width:1040px}
.cr-final-grid{display:grid;grid-template-columns:1fr 380px;gap:var(--space-8);align-items:start}
.cr-final-left{display:flex;flex-direction:column;gap:var(--space-7);min-width:0}
.cr-final-right{display:flex;flex-direction:column;gap:var(--space-5);min-width:0}
@media (max-width:900px){
  .cr-final-grid{grid-template-columns:1fr}
}
.cr-share-prominent{background:color-mix(in srgb, var(--honey) 12%, var(--surface-2));border:1px solid var(--honey)}
.cr-share-prominent input{background:transparent}
.quiz-back{display:inline-flex;align-items:center;gap:var(--space-3);align-self:flex-start;height:var(--control-h-sm);padding:0 var(--space-6) 0 var(--space-5);border:1px solid var(--rule-strong,var(--rule));background:var(--surface-2);font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--size-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-1);cursor:pointer}
.quiz-back:hover{border-color:var(--ink-1);background:var(--surface-3)}
.quiz-back svg{flex:0 0 auto}
.quiz-progress{display:flex;gap:4px}
.quiz-progress .seg{flex:1;height:3px;background:var(--rule)}
.quiz-progress .seg.on{background:var(--coral)}
.quiz-qlabel{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--honey)}
.quiz-headline{margin:0;font-family:var(--font-display);font-weight:var(--weight-black);letter-spacing:var(--tracking-display);font-size:var(--size-3xl);line-height:var(--leading-tight);color:var(--ink-1)}
.quiz-headline .accent{color:var(--coral-text)}
.quiz-sub{margin:calc(var(--space-4) * -1) 0 0;font-size:var(--size-sm);line-height:1.5;color:var(--ink-3)}
.quiz-body{display:flex;flex-direction:column;gap:var(--space-7)}

.quiz-choices{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.quiz-choices.of3{grid-template-columns:1fr 1fr 1fr}
.quiz-choice{padding:var(--space-6);border:1px solid var(--rule);background:var(--surface-2);cursor:pointer;display:flex;flex-direction:column;gap:var(--space-2);transition:var(--transition-control),transform var(--duration-fast) var(--ease)}
.quiz-choice:hover{border-color:var(--ink-3);transform:translateY(-1px)}
.quiz-choice.on{border-color:var(--coral);background:var(--surface-3)}
.quiz-choice .t{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--size-md);letter-spacing:.02em;text-transform:uppercase;color:var(--ink-1)}
.quiz-choice .meta{font-family:var(--font-mono);font-size:10px;color:var(--ink-3)}
.quiz-choice .d{font-size:var(--size-xs);line-height:1.4;color:var(--ink-3)}

.quiz-nav{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-5)}

.quiz-warn{display:flex;gap:var(--space-4);padding:var(--space-5) var(--space-6);background:var(--surface-2);border:1px solid var(--red);border-left:3px solid var(--red)}
.quiz-warn svg{flex:0 0 auto;color:var(--red-text);margin-top:2px}
.quiz-warn .txt{font-size:var(--size-sm);font-weight:var(--weight-semibold);line-height:1.45;color:var(--red-text)}

/* Presets keep their own class so the meta/description layout matches the old preset-card look */
.preset-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-5)}

/* Blind level editor */
.cr-blind-table{border:1px solid var(--rule)}
.cr-blind-head,.cr-blind-row{display:grid;grid-template-columns:.6fr 1fr 1fr 1fr 32px;gap:var(--space-5);align-items:center;padding:var(--space-4) var(--space-5)}
.cr-blind-head span{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:10px;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-3)}
.cr-blind-head{border-bottom:1px solid var(--rule)}
.cr-blind-row{border-bottom:1px solid var(--rule-soft)}
.cr-blind-row:last-child{border-bottom:0}
.cr-blind-row input{height:36px;padding:0 var(--space-4);background:var(--surface-input);border:1px solid var(--rule);color:var(--ink-1);font-family:var(--font-mono);font-size:var(--size-sm);width:100%}
.cr-blind-row .lv{font-family:var(--font-mono);font-size:var(--size-sm);color:var(--ink-3)}
.cr-blind-row .rm{width:22px;height:22px;color:var(--ink-3);cursor:pointer;display:flex;align-items:center;justify-content:center}
.cr-blind-row .rm:hover{color:var(--red-text)}
.cr-blind-actions{display:flex;gap:var(--space-4);margin-top:var(--space-5)}
.cr-blind-scroll{max-height:none;overflow:visible}

/* Prize calculator */
.cr-pool-summary{display:flex;justify-content:space-between;align-items:baseline;padding:var(--space-6);background:var(--surface-input);border:1px solid var(--rule)}
.cr-pool-summary .lb{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:10px;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-3)}
.cr-pool-summary .vl{font-family:var(--font-mono);font-weight:var(--weight-bold);font-size:var(--size-2xl);color:var(--honey)}
/* Was display:grid on each .cr-payout-row individually, which gives every
   row its own independent set of column widths (a "1fr" only matches
   across rows by coincidence), which is what actually caused the amount/
   percent boxes to drift out of alignment row to row. Sharing one grid
   across the whole list (.cr-payout-table is the grid, each row becomes
   display:contents so its 3 cells join that single grid) guarantees every
   row's columns line up exactly, since they're now the same grid track. */
.cr-payout-table{display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-3) var(--space-5);padding:var(--space-3) var(--space-5)}
.cr-payout-row{display:contents}
.cr-payout-row .place{font-size:var(--size-sm);color:var(--ink-2);align-self:center;white-space:nowrap}
.cr-payout-row input{height:32px;padding:0 var(--space-4);background:var(--surface-input);border:1px solid var(--rule);color:var(--ink-1);font-family:var(--font-mono);font-size:var(--size-xs);width:100%;box-sizing:border-box}
.cr-payout-row .pct{font-family:var(--font-mono);font-size:var(--size-2xs);color:var(--ink-3);text-align:right;align-self:center;min-width:34px}
.cr-payout-check{display:flex;justify-content:space-between;padding:var(--space-5);font-family:var(--font-mono);font-size:var(--size-xs)}
.cr-payout-check.err{color:var(--red-text)}
.cr-payout-check.ok{color:var(--green-text)}

/* Share image on the publish step: the real /api/og picture. */
.cr-og-img{display:block;width:100%;height:auto;aspect-ratio:1200/630;background:#0E350F;border:1px solid var(--rule)}

/* Share link */
.cr-share{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-5) var(--space-6);background:var(--surface-input);border:1px solid var(--rule)}
.cr-share input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--ink-1);font-family:var(--font-mono);font-size:var(--size-sm)}
.cr-published{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-5) var(--space-6);background:var(--surface-2);border:1px solid var(--green);border-left:3px solid var(--green)}
.cr-published .txt{font-size:var(--size-sm);color:var(--ink-1)}
.cr-published .txt b{color:var(--green-text)}
.cr-countdown{display:flex;align-items:baseline;gap:var(--space-4);padding:var(--space-5) var(--space-6);background:var(--surface-input);border:1px solid var(--rule)}
.cr-countdown .lb{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:10px;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-3)}
.cr-countdown .vl{font-family:var(--font-mono);font-weight:var(--weight-bold);font-size:var(--size-lg);color:var(--sky)}

/* Review (publish card) */
.cr-review-group{border:1px solid var(--rule)}
.cr-review-row{display:flex;justify-content:space-between;gap:var(--space-6);padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--rule-soft)}
.cr-review-row:last-child{border-bottom:0}
.cr-review-row .k{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:10px;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-3)}
.cr-review-row .v{font-family:var(--font-mono);font-size:var(--size-sm);color:var(--ink-1);text-align:right}
.cr-review-title{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:10px;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-3);margin:var(--space-2) 0 0}

.cr-footer{display:flex;padding:var(--space-4) var(--space-8);border-top:1px solid var(--rule);flex:0 0 auto}
.cr-footer span{font-family:var(--font-mono);font-size:11px;color:var(--ink-3)}
.cr-footer span:last-child{margin-left:auto}

@media (max-width:640px){
  .cr-header{padding:0 var(--space-5)}
  .cr-main{padding:var(--space-6) var(--space-4)}
  .quiz-card{padding:var(--space-7) var(--space-5)}
  .quiz-headline{font-size:var(--size-2xl)}
  .quiz-back{align-self:flex-start}
  .field-row,.quiz-choices,.quiz-choices.of3,.preset-cards{grid-template-columns:1fr}
  .cr-blind-head,.cr-blind-row{grid-template-columns:.5fr 1fr 1fr 1fr 24px;gap:var(--space-3)}
  .cr-blind-scroll{max-height:none;overflow:visible}
  .field textarea{min-height:230px}
  .quiz-nav{flex-direction:column;align-items:stretch}
  .quiz-nav .btn{width:100%}
}

/* ---- condensed create flow + readability pass (create and sign-up) ----
   The quiz used --ink-3 gray for most body text, which was hard to read on
   the dark felt. Everything a host needs to read is now ink-1 / ink-2 and
   a size up. */
#app-create .quiz-sub{margin-top:-4px;font-size:16px;line-height:1.5;color:var(--ink-2)}
#app-create .quiz-qlabel{font-size:11.5px}
#app-create .label,#app-create .field label{font-family:var(--font-display);font-weight:700;font-size:12.5px;letter-spacing:.1em;color:var(--ink-1)}
#app-create .field input,#app-create .field select,#app-create .field textarea{font-size:16px}
#app-create .field input::placeholder,#app-create .field textarea::placeholder{color:#9AA1AB}
#app-create .field textarea{min-height:96px}
#app-create .quiz-choice .meta{font-size:13px;color:var(--ink-2)}
#app-create .quiz-choice .d{font-size:14px;color:var(--ink-2)}
#app-create .dev-note span{font-size:14px;color:var(--ink-2)}
#app-create .check-row .t{font-size:15px}
#app-create .cr-blind-head span{color:var(--ink-2);font-size:11px}
#app-create .cr-payout-row .place{color:var(--ink-1);font-size:15px}
#app-create .cr-payout-row .pct{color:var(--ink-2);font-size:13px}
#app-create .cr-review-row .k{color:var(--ink-2)}
#app-create .quiz-warn .txt{font-size:15px}
.cr-sec{display:flex;flex-direction:column;gap:14px;padding-bottom:6px}
.cr-sec+.cr-sec{padding-top:20px;border-top:1px solid var(--rule-soft)}
.cr-sec-t{font-family:var(--font-display);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-1)}
.cr-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:100%}
.cr-seg .seg-btn{height:46px;padding:0 10px;font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.02em;color:var(--ink-2)}
.cr-seg .seg-btn.on{color:var(--ink-1);box-shadow:inset 0 -2px 0 var(--coral)}
.cr-note{margin:0;font-size:14px;line-height:1.45;color:var(--ink-2)}
.cr-toggle{align-self:flex-start;padding:0;font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--ink-1);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cr-img-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.preset-cards .quiz-choice{gap:6px}
/* sign-up / log-in card */
#view-login #lgSub{color:var(--ink-2)!important;font-size:16px!important}
#view-login .label{font-family:var(--font-display);font-weight:700;font-size:12.5px;letter-spacing:.1em;color:var(--ink-1)}
#view-login .field input{font-size:16px}
#view-login .field input::placeholder{color:#9AA1AB}
#view-login #lgSwitch{color:var(--ink-1)!important;font-size:15px!important}

/* ===== quickgame (wenpoker-quickgame.html) ===== */
:root{
  --bg:#0B0C0E;
  --black-1:#07080A; --black-2:#101215;
  --surface-1:#1B1B1F; --surface-2:#242429; --surface-3:#2E2E34;
  --rule:#333842; --rule-soft:#33384280;
  --ink-1:#F4F6F8; --ink-2:#DFE3E8; --ink-3:#C9CED5;
  --surface-input:#07080A;

  --coral:#1D4E73; --coral-press:#163B58; --coral-ink:#F6E9EA;
  --sky:#E5E5E5;
  --sage:#C7D1B8;  --sage-ink:#141610;
  --honey:#C9A227; --honey-press:#B08F1F; --honey-ink:#1A1508;
  --green:#587A3A; --green-ink:#F1F4E8;
  --red:#A32632;   --red-ink:#F6E9EA;

  --font-display:"WP Display","Poppins","Helvetica Neue",Arial,sans-serif;
  --font-ui:"WP Body","Lexend","Helvetica Neue",Arial,sans-serif;
  --font-mono:"WP Display","Poppins","Helvetica Neue",Arial,sans-serif;

  --size-3xs:13px; --size-2xs:14px; --size-xs:14px; --size-sm:15px;
  --size-md:16px;  --size-lg:18px;  --size-xl:22px;  --size-2xl:28px; --size-3xl:36px; --size-4xl:44px;

  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-black:900;
  --leading-tight:1.05; --leading-snug:1.25;
  --tracking-display:-0.02em; --tracking-wide:0.04em; --tracking-label:0.16em;

  --space-1:2px; --space-2:4px; --space-3:6px; --space-4:8px;
  --space-5:12px; --space-6:16px; --space-7:20px; --space-8:24px; --space-9:32px; --space-10:40px; --space-12:64px;
  --control-h-sm:28px; --control-h-md:36px; --control-h-lg:48px;

  --border-1:1px; --border-2:2px;
  --focus-ring:var(--border-2) solid var(--sky); --focus-offset:2px;

  --duration-fast:120ms; --duration-base:180ms; --ease:cubic-bezier(.2,0,0,1);
  --transition-control:background-color var(--duration-fast) var(--ease),color var(--duration-fast) var(--ease),border-color var(--duration-fast) var(--ease);
  --shadow-card:0 6px 14px rgba(0,0,0,.55);
  --shadow-overlay:0 28px 56px rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink-1);font-family:var(--font-ui);-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit;border-radius:0;background:none;border:0}
input,select,textarea{font:inherit;border-radius:0}
:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}

.label{font-family:var(--font-ui);font-weight:var(--weight-semibold);font-size:var(--size-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-3)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-4);
  border-radius:0;font-family:var(--font-display);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;cursor:pointer;white-space:nowrap;
  text-decoration:none;
  transition:var(--transition-control),transform var(--duration-fast) var(--ease),box-shadow var(--duration-fast) var(--ease);
  border:var(--border-1) solid transparent;}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-card)}
.btn:active{transform:none}
.btn.lg{height:52px;padding:0 var(--space-9);font-size:var(--size-md)}
.btn.md{height:var(--control-h-md);padding:0 var(--space-7);font-size:var(--size-xs)}
.btn.sm{height:var(--control-h-sm);padding:0 var(--space-5);font-size:var(--size-2xs)}
.btn.coral{background:var(--coral);color:var(--sky)}
.btn.coral:hover{background:color-mix(in srgb,var(--coral) 88%,#fff)}
.btn.steel{background:var(--surface-3);color:var(--ink-1)}
.btn.steel:hover{background:color-mix(in srgb,var(--surface-3) 88%,#fff)}
.btn.outline{background:transparent;color:var(--ink-2);border-color:var(--rule)}
.btn.outline:hover{color:var(--ink-1);border-color:var(--ink-3)}
.btn:disabled{opacity:.35;cursor:default;pointer-events:none}

.switch{position:relative;width:40px;height:20px;background:var(--surface-3);border:1px solid var(--rule);cursor:pointer;transition:var(--transition-control);flex:0 0 auto}
.switch.on{background:var(--sage);border-color:var(--sage)}
.switch .knob{position:absolute;top:1px;left:1px;width:16px;height:16px;background:var(--ink-2);transition:left var(--duration-fast) var(--ease),background-color var(--duration-fast) var(--ease)}
.switch.on .knob{left:21px;background:var(--sage-ink)}

.field{display:flex;flex-direction:column;gap:var(--space-3)}
.field input[type=text],.field input[type=number],.field select{
  padding:0 var(--space-5);background:var(--surface-input);border:1px solid var(--rule);color:var(--ink-1);
  font-family:var(--font-ui);font-size:var(--size-md);transition:var(--transition-control);width:100%;height:48px}
.field input:focus,.field select:focus{border-color:var(--coral);outline:none}
.field input::placeholder{color:var(--ink-3);opacity:1}
.field .hint{font-size:var(--size-xs);color:var(--ink-3)}

.seg{display:inline-flex;border:1px solid var(--rule)}
.seg button{padding:0 var(--space-6);height:40px;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--size-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);border-right:1px solid var(--rule);transition:var(--transition-control)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--sage);color:var(--sage-ink)}
.seg button:hover:not(.on){color:var(--ink-1)}

/* ---------- Header ---------- */
.qg-header{display:flex;align-items:center;gap:var(--space-7);height:64px;padding:0 var(--space-9);border-bottom:1px solid var(--rule)}
.wp-banner{width:100%;overflow:hidden;background:url('/wenpoker/assets/suit-pattern-banner.webp') center/cover no-repeat;display:flex;align-items:center;justify-content:center;padding:clamp(24px,4vw,40px) var(--space-9);border-bottom:1px solid var(--rule)}
.wp-banner img{display:block;height:clamp(44px,5vw,72px);width:auto}
.qg-header .mark{display:flex;align-items:center;text-decoration:none}
.qg-header .mark img{display:block;height:32px;width:auto}
.qg-header .right{margin-left:auto}

/* ---------- Layout ---------- */
.qg-wrap{max-width:720px;margin:0 auto;padding:var(--space-10) var(--space-8) var(--space-14)}
.qg-title{margin:0 0 var(--space-3);font-family:var(--font-display);font-weight:var(--weight-black);font-size:var(--size-3xl);letter-spacing:var(--tracking-display)}
.qg-sub{margin:0 0 var(--space-10);color:var(--ink-3);font-size:var(--size-md);max-width:520px}

.qg-section{border-top:1px solid var(--rule);padding:var(--space-8) 0;display:flex;flex-direction:column;gap:var(--space-6)}
.qg-section:first-of-type{border-top:0}
.qg-section-h{display:flex;flex-direction:column;gap:var(--space-2)}
.qg-section-h .t{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--size-md);color:var(--ink-1)}
.qg-section-h .d{font-size:var(--size-xs);color:var(--ink-3);max-width:460px}

.qg-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6)}
.qg-row .t{font-size:var(--size-sm);color:var(--ink-1)}
.qg-row .d{font-size:var(--size-xs);color:var(--ink-3);margin-top:2px}
.qg-grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}

.qg-ledger-note{border:1px solid var(--rule);background:var(--surface-1);padding:var(--space-5) var(--space-6);font-size:var(--size-xs);line-height:1.5;color:var(--ink-3);display:none}
.qg-ledger-note.show{display:block}
.qg-ledger-note b{color:var(--ink-1)}

.qg-cta{display:flex;justify-content:flex-end;padding-top:var(--space-4)}
.qg-fine{margin:var(--space-4) 0 0;font-family:var(--font-mono);font-size:11px;color:var(--ink-3);text-align:right}

/* ---------- Table preview (step 2) ---------- */
.qg-setup, .qg-live{display:none}
.qg-setup.show, .qg-live.show{display:block}

.qg-table-wrap{padding:var(--space-9) var(--space-8);display:flex;flex-direction:column;gap:var(--space-8);align-items:center}
.qg-tableinfo{display:flex;align-items:center;gap:var(--space-6);align-self:stretch;justify-content:space-between}
.qg-tableinfo .name{font-family:var(--font-display);font-weight:var(--weight-black);font-size:var(--size-xl)}
.qg-tableinfo .chips{font-family:var(--font-mono);font-size:var(--size-xs);color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}
.qg-tableinfo .chips b{color:var(--honey);font-family:var(--font-display)}

.qg-felt-wrap{position:relative;width:100%;max-width:620px;aspect-ratio:16/10}
.qg-felt{position:absolute;inset:0;border:1px solid var(--rule-strong,var(--rule));background:radial-gradient(ellipse at center,var(--surface-3),var(--surface-1));border-radius:50%}
.qg-seat{position:absolute;width:78px;height:56px;border:1px dashed var(--rule);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);cursor:pointer;background:var(--bg);transition:var(--transition-control)}
.qg-seat:hover{color:var(--ink-1);border-color:var(--ink-3)}
.qg-seat.taken{border-style:solid;color:var(--sage);border-color:var(--sage)}
.qg-s1{top:-8px;left:50%;transform:translateX(-50%)}
.qg-s2{top:16%;right:-6%}
.qg-s3{bottom:16%;right:-6%}
.qg-s4{bottom:-8px;left:50%;transform:translateX(-50%)}
.qg-s5{bottom:16%;left:-6%}
.qg-s6{top:16%;left:-6%}

.qg-share{border:1px solid var(--rule);background:var(--surface-1);padding:var(--space-7) var(--space-8);width:100%;max-width:520px;display:flex;flex-direction:column;gap:var(--space-5);align-items:center;text-align:center}
.qg-share .t{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--size-sm);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.qg-share .link{font-family:var(--font-mono);font-size:var(--size-xs);color:var(--ink-1);background:var(--surface-input);border:1px solid var(--rule);padding:var(--space-4) var(--space-5);width:100%}

.qg-ledger{border:1px solid var(--rule);width:100%;max-width:520px}
.qg-ledger .h{padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--rule);font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--size-xs);text-transform:uppercase;letter-spacing:.08em;display:flex;justify-content:space-between}
.qg-ledger .h .total{color:var(--honey)}
.qg-ledger table{width:100%;border-collapse:collapse}
.qg-ledger td{padding:var(--space-4) var(--space-6);font-size:var(--size-sm);border-top:1px solid var(--rule)}
.qg-ledger td:last-child{text-align:right;font-family:var(--font-mono);color:var(--ink-2)}
.qg-ledger tr:first-child td{border-top:0}

@media (max-width:640px){
  .qg-header{padding:0 var(--space-6)}
  .qg-wrap{padding:var(--space-8) var(--space-6) var(--space-12)}
  .qg-grid2{grid-template-columns:1fr}
  .qg-row{flex-wrap:wrap}
}

/* ===== support (wenpoker-support.html) ===== */
:root{
  --bg:#0B0C0E; --surface-1:#1B1B1F; --rule:#333842; --rule-soft:#33384280;
  --ink-1:#F4F6F8; --ink-2:#DFE3E8; --ink-3:#C9CED5;
  --coral:#1D4E73; --sky:#E5E5E5; --green:#587A3A; --green-ink:#F1F4E8;
  --font-display:"WP Display","Poppins","Helvetica Neue",Arial,sans-serif;
  --font-ui:"WP Body","Lexend","Helvetica Neue",Arial,sans-serif;
  --weight-bold:700; --weight-black:900;
  --duration-fast:120ms; --ease:cubic-bezier(.2,0,0,1);
  --transition-control:background-color var(--duration-fast) var(--ease),color var(--duration-fast) var(--ease),border-color var(--duration-fast) var(--ease);
  --shadow-card:0 6px 14px rgba(0,0,0,.55);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink-1);font-family:var(--font-ui);-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0}

.sp-header{display:flex;align-items:center;gap:20px;height:64px;padding:0 24px;border-bottom:1px solid var(--rule)}
.wp-banner{width:100%;overflow:hidden;background:url('/wenpoker/assets/suit-pattern-banner.webp') center/cover no-repeat;display:flex;align-items:center;justify-content:center;padding:clamp(24px,4vw,40px) 24px;border-bottom:1px solid var(--rule)}
.wp-banner img{display:block;height:clamp(44px,5vw,72px);width:auto}
.sp-header img{display:block;height:30px}
.sp-header .label{font-family:var(--font-display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.sp-header .btn{margin-left:auto}

.btn{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 20px;border:1px solid var(--rule);
  font-family:var(--font-display);font-weight:var(--weight-bold);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;transition:var(--transition-control),transform var(--duration-fast) var(--ease),box-shadow var(--duration-fast) var(--ease)}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-card);border-color:var(--ink-1)}
.btn.lg{height:52px;padding:0 32px;font-size:15px}
.btn.green{background:var(--green);color:var(--green-ink);border-color:transparent}
.btn.green:hover{background:color-mix(in srgb,var(--green) 88%,#fff)}
.btn.coral{background:var(--coral);color:#0D0D0F;border-color:transparent}
.btn.coral:hover{background:color-mix(in srgb,var(--coral) 88%,#fff)}
.btn.outline{background:transparent}

.sp-wrap{max-width:720px;width:100%;margin:0 auto;padding:56px 24px 96px}

.seg{width:100%;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--rule)}
.seg button{height:44px;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);border-right:1px solid var(--rule);cursor:pointer;transition:var(--transition-control)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--surface-1);color:var(--ink-1)}
.seg button:hover:not(.on){color:var(--ink-1)}

.sp-doc{margin-top:40px}
.sp-doc h1,.sp-doc h2.sp-doc-title{margin:0;font-family:var(--font-display);font-weight:var(--weight-black);font-size:44px;line-height:1.05;letter-spacing:-.025em;color:var(--ink-1)}
.sp-doc>p{margin:20px 0 0;font-size:18px;line-height:1.65;color:var(--ink-2)}

.sp-steps{margin-top:40px;display:flex;flex-direction:column;gap:32px}
.sp-step .eyebrow{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.sp-step h2{margin:12px 0 0;font-family:var(--font-display);font-weight:var(--weight-black);font-size:24px;line-height:1.15;letter-spacing:-.01em;color:var(--ink-1)}
.sp-step p{margin:10px 0 0;font-size:16px;line-height:1.6;color:var(--ink-2)}

.sp-actions{margin-top:48px;display:flex;gap:12px;flex-wrap:wrap}

.sp-faq{margin-top:36px;border:1px solid var(--rule)}
.sp-faq-item{padding:22px 24px;border-bottom:1px solid var(--rule)}
.sp-faq-item:last-child{border-bottom:0}
.sp-faq-item h2{margin:0;font-family:var(--font-display);font-weight:var(--weight-black);font-size:18px;letter-spacing:.01em;color:var(--ink-1)}
.sp-faq-item p{margin:10px 0 0;font-size:15px;line-height:1.6;color:var(--ink-2)}

.sp-foot-note{margin:28px 0 0;font-size:14px;line-height:1.6;color:var(--ink-3)}

.sp-doc-section{display:none}
.sp-doc-section.show{display:block}

/* ===== table (wenpoker-graphite.html) ===== */
/* ============================================================
   TOKENS, Graphite direction (wen.poker)
   Ground truth: design_handoff_graphite_table/tokens/*.css
   ============================================================ */
:root{
  --bg:#0B0C0E;
  --black-1:#07080A; --black-2:#101215;
  --surface-1:#1B1B1F; --surface-2:#242429; --surface-3:#2E2E34;
  --rule:#333842; --rule-soft:#33384280;
  --felt:#0e0e0e;
  --felt-1:#131313; --felt-2:#1f1f1f;
  --table-felt:#002d07; --table-rail:#0c0c0c; --table-inlay:#171717;
  --ink-1:#F4F6F8; --ink-2:#DFE3E8; --ink-3:#C9CED5; --ink-inverse:#ffffff;
  --surface-input:#07080A;

  --coral:#1D4E73; --coral-press:#163B58; --coral-ink:#F6E9EA;
  --sky:#E5E5E5;   --sky-press:#C4C4C4;   --sky-ink:#0D0D0F;
  --sage:#C7D1B8;  --sage-press:#AFBB9E;  --sage-ink:#141610;
  --rose:#8E3324;  --rose-press:#762A1D;  --rose-ink:#E5E5E5;
  --honey:#C9A227; --honey-press:#B08F1F; --honey-ink:#1A1508;
  --green:#587A3A; --green-press:#4A6630; --green-ink:#F1F4E8;
  --red:#A32632;   --red-press:#7E1B25;   --red-ink:#F6E9EA;

  --card-face:#E8E6E0; --card-ink-black:#17171A; --card-ink-red:#A8212C;
  --card-back:#0E1512; --card-back-hi:#14201C; --card-back-ink:#4E5560; --card-lattice:#8A6A24;
  --board-slot:#434A55;

  --font-display:"WP Display","Poppins","Helvetica Neue",Arial,sans-serif;
  --font-ui:"WP Body","Lexend","Helvetica Neue",Arial,sans-serif;
  --font-mono:"WP Display","Poppins","Helvetica Neue",Arial,sans-serif;

  --size-3xs:13px; --size-2xs:14px; --size-xs:14px; --size-sm:15px;
  --size-md:16px;  --size-lg:18px;  --size-xl:22px;  --size-2xl:28px;
  --size-3xl:36px; --size-4xl:48px; --size-5xl:66px; --size-6xl:90px;

  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-black:900;
  --leading-tight:1.05; --leading-snug:1.25; --leading-normal:1.5;
  --tracking-display:-0.02em; --tracking-normal:0; --tracking-wide:0.04em; --tracking-label:0.16em;

  --space-0:0px; --space-1:2px; --space-2:4px; --space-3:6px; --space-4:8px;
  --space-5:12px; --space-6:16px; --space-7:20px; --space-8:24px; --space-9:32px;
  --space-10:40px; --space-11:48px; --space-12:64px;
  --control-h-sm:28px; --control-h-md:36px; --control-h-lg:48px;

  --border-1:1px; --border-2:2px; --border-3:3px;
  --focus-ring:var(--border-2) solid var(--sky); --focus-offset:2px;

  --duration-instant:80ms; --duration-fast:120ms; --duration-base:180ms; --duration-slow:240ms; --duration-deliberate:400ms;
  --ease:cubic-bezier(.2,0,0,1); --ease-linear:linear;
  --transition-control:background-color var(--duration-fast) var(--ease),color var(--duration-fast) var(--ease),border-color var(--duration-fast) var(--ease);

  --shadow-overlay:0 28px 56px rgba(0,0,0,.6);
  --shadow-card:0 6px 14px rgba(0,0,0,.55);
  --shadow-table:0 40px 90px rgba(0,0,0,.65),0 6px 24px rgba(0,0,0,.45);
  --scrim:rgba(8,8,10,.8);

  --logo-ink:#E5E5E5; --logo-paper:#0D0D0F;
}
@media (prefers-reduced-motion:reduce){
  :root{ --duration-instant:0ms;--duration-fast:0ms;--duration-base:0ms;--duration-slow:0ms;--duration-deliberate:0ms; }
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink-1);font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;border-radius:0;background:none;border:0}
input{font:inherit;border-radius:0}
:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
img{max-width:none}

.label{font-family:var(--font-ui);font-weight:var(--weight-semibold);font-size:var(--size-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-3)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ---------- Playing card ----------
   One component for every card on the table. Size comes from --cw (card
   width), everything else (height, radius, index and pip type) scales off
   it, so a size class only has to set one number. --k is the "Large cards"
   setting multiplier. Deck style (Settings > Cards) is a data-deck
   attribute on the table root:
     2color (default): big rank + suit stacked top-left, big pip bottom-right
     4color: same, diamonds blue and clubs green
     classic: the original look, rank top-left and suit bottom-right */
.card{--cw:40px;--k:1;position:relative;flex:0 0 auto;width:calc(var(--cw)*var(--k));height:calc(var(--cw)*var(--k)*1.4);
  border-radius:2px;background:var(--card-face);
  box-shadow:0 0 0 1px rgba(0,0,0,.28),0 4px 10px rgba(0,0,0,.4);
  color:var(--card-ink-black);overflow:hidden;font-family:var(--font-display);-webkit-user-select:none;user-select:none;
  transition:opacity var(--duration-base) var(--ease),filter var(--duration-base) var(--ease)}
.card.red{color:var(--card-ink-red)}
/* Face: suit top-left, rank centred, suit bottom-right (all sizes scale off --cw). */
.card:not(.facedown):not(.gd-flip){box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--cw)*var(--k)*.09 + 1px)}
.card .cs{display:block;flex:0 0 auto;width:calc(var(--cw)*var(--k)*.25);height:calc(var(--cw)*var(--k)*.25)}
.card .cs svg{display:block;width:100%;height:100%}
.card .cs.tl{align-self:flex-start}
.card .cs.br{align-self:flex-end}
.card .r{align-self:center;font-family:"Mulish",var(--font-display);font-weight:900;font-size:calc(var(--cw)*var(--k)*.62);letter-spacing:-.03em;line-height:1;white-space:nowrap}
/* 4-color: the same blue, green, red and black as the felts and card backs */
[data-deck="4color"] .card.su-d{color:#1D4E73}
[data-deck="4color"] .card.su-c{color:#1F5E36}
/* Classic: the rank top-left, one suit bottom-right */
[data-deck="classic"] .card .cs.tl{display:none}
[data-deck="classic"] .card .r{position:absolute;left:9%;top:5%;font-size:calc(var(--cw)*var(--k)*.54)}
[data-deck="classic"] .card .cs.br{margin-top:auto;width:calc(var(--cw)*var(--k)*.36);height:calc(var(--cw)*var(--k)*.36)}
[data-cardsize="lg"] .card:not(.facedown){--k:1.14}
.card.xxs{--cw:20px}.card.xs{--cw:30px}.card.sm{--cw:40px}.card.md{--cw:50px}.card.lg{--cw:64px}.card.xl{--cw:76px}
.card.xxs .cs.br{display:none}
/* Backs have their own inset frame: no white ring, just a dark edge and shadow. */
.card.facedown{background:#0b0c0e;box-shadow:0 0 0 1px rgba(0,0,0,.45),0 4px 10px rgba(0,0,0,.5)}
.card.facedown img{width:100%;height:100%;object-fit:cover;display:block}
.card.dimmed{filter:grayscale(1) brightness(.55)}
.slot{--cw:40px;flex:0 0 auto;width:var(--cw);height:calc(var(--cw)*1.4);border:1px dashed rgba(255,255,255,.16);border-radius:2px}
.slot.sm{--cw:40px}.slot.lg{--cw:64px}

/* deal-in pop, staggered per seat, plays whenever a new hand is dealt */
@keyframes gd-deal-pop{0%{opacity:0;transform:translateY(-18px) rotate(-8deg) scale(.8)}100%{opacity:1;transform:none}}
.gd-deal-in{animation:gd-deal-pop .32s cubic-bezier(.2,.8,.3,1) both}

/* hero's hole-card flip: two stacked faces on a 3D-rotated wrapper */
.card.gd-flip{overflow:visible;perspective:500px;background:transparent;box-shadow:none}
.gd-flip-inner{position:absolute;inset:0;transform-style:preserve-3d;animation:gd-flip-turn .5s cubic-bezier(.4,0,.2,1) both}
.gd-flip-face{position:absolute!important;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.gd-flip-front{transform:rotateY(180deg)}
@keyframes gd-flip-turn{0%{transform:rotateY(0)}100%{transform:rotateY(180deg)}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-4);
  border-radius:0;font-family:var(--font-display);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;cursor:pointer;white-space:nowrap;
  transition:var(--transition-control),transform var(--duration-fast) var(--ease),box-shadow var(--duration-fast) var(--ease);
  border:var(--border-1) solid transparent;}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-card)}
.btn:active{transform:none}
.btn.block{width:100%}
.btn.lg{height:var(--control-h-lg);padding:0 var(--space-9);font-size:var(--size-md)}
.btn.md{height:var(--control-h-md);padding:0 var(--space-7);font-size:var(--size-xs)}
.btn.sm{height:var(--control-h-sm);padding:0 var(--space-5);font-size:var(--size-2xs)}
.btn.red{background:var(--red);color:var(--red-ink)}
.btn.red:hover{background:color-mix(in srgb,var(--red) 88%,#fff)}
.btn.red:active{background:var(--red-press)}
.btn.green{background:var(--green);color:var(--green-ink)}
.btn.green:hover{background:color-mix(in srgb,var(--green) 88%,#fff)}
.btn.green:active{background:var(--green-press)}
.btn.steel{background:var(--surface-3);color:var(--ink-1)}
.btn.steel:hover{background:color-mix(in srgb,var(--surface-3) 88%,#fff)}
.btn.value{background:var(--honey);color:var(--honey-ink)}
.btn.value:hover{background:color-mix(in srgb,var(--honey) 88%,#fff)}
.btn.value:active{background:var(--honey-press)}
.btn.outline{background:transparent;color:var(--ink-2);border-color:var(--rule)}
.btn.outline:hover{color:var(--ink-1);border-color:var(--ink-3)}
.btn.outline.hover-green:hover{background:var(--green);color:var(--green-ink);border-color:transparent}
.btn.outline.hover-red:hover{background:var(--red);color:var(--red-ink);border-color:transparent}

/* ---------- Preset / slider ---------- */
.preset-row{display:flex;gap:var(--space-3)}
.preset-btn{flex:1 1 0;min-width:0;min-height:26px;padding:0;background:transparent;border:var(--border-1) solid var(--rule);color:var(--ink-2);
  font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--size-3xs);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:var(--transition-control)}
.preset-btn.active{background:var(--surface-3);color:var(--ink-1)}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:0;border-bottom:var(--border-1) solid var(--rule)}
.tab-btn{position:relative;display:inline-flex;align-items:center;height:34px;padding:0 var(--space-6);cursor:pointer;
  color:var(--ink-3);font-family:var(--font-ui);font-weight:var(--weight-semibold);font-size:var(--size-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;transition:var(--transition-control)}
.tab-btn.on{color:var(--ink-1)}
.tab-btn .underline{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent}
.tab-btn.on .underline{background:var(--ink-1)}

/* ============================================================
   LIVE TABLE (#table), desktop + mobile
   Shared pieces use the tb- prefix (felt, seat pods, bets, action
   buttons, settings, sheets). Desktop-only layout is td-, mobile-only
   is tm-. Both trees are always in the DOM; the breakpoint below is a
   plain display switch.
   ============================================================ */
#view-table{height:100vh;height:100dvh;min-height:0;overflow:hidden}
#app-table,.app-desktop,.app-mobile{height:100%}
.app-mobile{display:none}

/* felt color, Settings > Table */
/* Same shades as the card backs (wenpoker/assets/cardbacks); each edge is
   the back's darker frame colour, deepened. */
.gd-root,.gm-root{--felt-c:#1F5E36;--felt-edge:#082414}
[data-felt="blue"]{--felt-c:#1D4E73;--felt-edge:#0A1D2C}
[data-felt="red"]{--felt-c:#A8212C;--felt-edge:#410C12}
[data-felt="gold"]{--felt-c:#C9A227;--felt-edge:#5A470C}
[data-felt="graphite"]{--felt-c:#17171A;--felt-edge:#060607}
/* Gold is a bright felt: darker pot and bet labels so the gold numbers read. */
[data-felt="gold"] .tb-pot,[data-felt="gold"] .tm-ring .tb-pot{background:color-mix(in srgb,var(--felt-c) 30%,#050506)}
[data-felt="gold"] .tb-bet{background:color-mix(in srgb,var(--felt-c) 30%,#050506)}
[data-felt="gold"] .tb-bet.m{padding:2px 6px 2px 3px;background:color-mix(in srgb,var(--felt-c) 30%,#050506)}
[data-felt="gold"] .tb-wm{opacity:.16;filter:brightness(0)}
.gd-root,.gm-root{--backdrop:var(--bg) url("/wenpoker/assets/table-bg-pattern.webp") center/cover no-repeat}

/* ---------- shared: felt, board, pot ---------- */
.tb-felt{position:absolute;border-radius:50%;
  background:radial-gradient(ellipse 72% 62% at 50% 44%,color-mix(in srgb,var(--felt-c),#fff 7%) 0%,var(--felt-c) 52%,var(--felt-edge) 100%),#0B0C0E;
  box-shadow:0 0 0 12px #0E0F11,0 0 0 14px #050506,0 40px 90px rgba(0,0,0,.65),inset 0 0 70px rgba(0,0,0,.5);
  pointer-events:none}
.tb-wm{position:absolute;left:50%;transform:translateX(-50%);opacity:.12;pointer-events:none}
.tb-board{position:absolute;left:50%;transform:translate(-50%,-50%);display:flex;gap:8px;z-index:2}
.rabbit-card{display:inline-flex;padding:0;border:0;background:none;cursor:pointer;position:relative;border-radius:var(--card-r,6px);outline:1px dashed rgba(224,192,112,.7);outline-offset:3px}
.rabbit-card.enter{animation:rabbit-in .35s ease-out both}
.rabbit-card:hover{transform:translateY(-3px)}
.rabbit-card:focus-visible{outline:2px solid var(--honey)}
.rabbit-card.open{cursor:default;opacity:.82;animation:none}
.rabbit-card.open:hover{transform:none}
.rabbit-tag{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:12px;display:flex;flex-direction:column;align-items:center;gap:3px;white-space:nowrap;padding:5px 10px;background:#0A0B0D;border:1px solid rgba(224,192,112,.5);pointer-events:none}
.rabbit-tag b{color:var(--honey);font:800 10.5px/1.2 WP Display,Poppins,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.rabbit-tag i{font:700 11px/1.2 WP Display,Poppins,sans-serif;font-style:normal;color:var(--ink-2)}
.tm-ring .rabbit-tag{padding:4px 8px}
.tm-ring .rabbit-tag b{font-size:9.5px;letter-spacing:.1em}
.tm-ring .rabbit-tag i{font-size:10px;max-width:220px;overflow:hidden;text-overflow:ellipsis}
@keyframes rabbit-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.tb-pre.show{gap:6px}
.tb-pre.show.muck{color:var(--ink-2)}
.tb-act.off,.tb-act.off:hover{opacity:.35;cursor:not-allowed;filter:grayscale(.6)}
/* Dimmed Fold / Call / Raise between turns: bright on hover or when picked. */
.tb-act.dimmed{opacity:.38;filter:saturate(.75);transition:opacity .15s}
.tb-act.dimmed:not(:disabled):hover,.tb-act.dimmed.on{opacity:1;filter:none}
.tb-act.dimmed.fold:hover{background:var(--red);color:var(--red-ink)}
.tb-act.dimmed.call:hover{background:var(--green);color:var(--green-ink)}
.tb-act.dimmed.on{box-shadow:inset 0 0 0 2px var(--ink-1)}
.tb-act.dimmed:disabled{opacity:.2;cursor:default}
.tb-act.dimmed.lock{pointer-events:none;opacity:.2}
.tm-dock.slots{grid-template-columns:1fr 1.3fr 1fr}
.tm-dock.slots .tb-act.dimmed{font-size:12.5px;letter-spacing:0;white-space:nowrap;padding:0 4px}
.tm-dock .tm-subrow{grid-column:1/-1;display:flex;gap:8px}
.tm-dock .tm-subrow .tb-pre{flex:1 1 0;height:40px;font-size:11.5px;justify-content:center}
.tb-chat-jump{display:block;width:100%;flex:0 0 auto;padding:7px 10px;border:0;border-top:1px solid var(--rule);background:var(--surface-3);color:var(--honey);font:800 11px/1 WP Display,Poppins,sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.tb-chat-jump:hover{background:var(--honey);color:var(--honey-ink)}
.mini-card{display:inline-flex;align-items:center;padding:2px 5px;background:var(--card-face,#E8E6E0);color:var(--card-ink-black,#17171A);font:900 12px/1 WP Display,Poppins,sans-serif;letter-spacing:0}
.mini-card.red{color:var(--card-ink-red,#A32632)}
.win-banner .wb-row{display:flex;gap:14px;margin-top:4px}
.win-banner .wb-cards{display:flex;gap:4px}
.win-banner .wb-split{flex-direction:column;align-items:center;gap:6px}
.win-banner .wb-why{font:700 11px/1.2 WP Display,Poppins,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.tb-pot{position:absolute;left:50%;transform:translate(-50%,-50%);z-index:2;display:flex;align-items:baseline;gap:8px;padding:5px 12px;background:color-mix(in srgb,var(--felt-c,#1F5E36) 45%,#050506);white-space:nowrap}
.tb-pot .lb{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.tb-pot .vl{font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--honey)}
.tb-anchor{position:absolute;transform:translate(-50%,-50%);z-index:3}
/* Bets draw over the seats, so a name plate never hides the chips; a seat
   with a chat bubble comes up over everything. */
.tb-anchor.bet{z-index:4}
.tb-anchor:has(.pod-say){z-index:5}

/* ---------- shared: seat pod ----------
   One block per seat: name over stack on the plate, hole cards in front
   of it (never covering the name), one status tag hanging off its bottom
   edge. Folded seats dim and drop their cards, so no extra "Folded" line.
   Desktop opponents: the cards sit on the plate's right side, hanging over
   its top edge, and the name and stack move left to make room. The hero,
   and every seat on phones, has the cards above the plate, in front. */
.pod{position:relative;display:flex;flex-direction:column;align-items:center;width:150px;transition:filter var(--duration-base) var(--ease)}
.pod.hero{width:188px}
.pod.hero:not(.m){width:228px}
.pod-cards{position:relative;z-index:3;display:flex;justify-content:center;gap:6px;margin-bottom:-10px;pointer-events:none}
.pod.hero .pod-cards{gap:8px;margin-bottom:8px}
/* Your own plate, in the same style as everyone else's: name over stack on
   the left, your hand on the right, no gold. Your turn shows in the dock
   and the plate's draining bar, so no highlight border. */
.pod.hero:not(.m) .pod-plate{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name hand" "stack hand";column-gap:12px;align-items:center;padding:8px 12px 11px}
.pod.hero:not(.m) .pod-name{grid-area:name}
.pod.hero:not(.m) .pod-stack{grid-area:stack}
.pod.hero:not(.m) .pod-hand{grid-area:hand;justify-self:end;max-width:92px;margin:0;text-align:right;white-space:normal;line-height:1.25}
.pod.hero.acting .pod-plate{border-color:var(--rule)}
.pod-cards.fan{gap:0}
.pod-cards.fan .card:first-child{transform:rotate(-6deg) translateX(7px)}
.pod-cards.fan .card:last-child{transform:rotate(6deg) translateX(-7px)}
/* Desktop opponents: cards on the right, in front of the plate. */
.pod:not(.m):not(.hero){width:196px}
.pod:not(.m):not(.hero) .pod-cards{position:absolute;top:-17px;right:6px;margin:0;gap:0}
.pod:not(.m):not(.hero) .pod-cards .card{--cw:48px}
.pod:not(.m):not(.hero) .pod-cards.fan .card{transform:none}
.pod:not(.m):not(.hero) .pod-cards.fan .card+.card{margin-left:-32px}
.pod:not(.m):not(.hero) .pod-cards.shown .card+.card{margin-left:-14px}
.pod:not(.m):not(.hero) .pod-plate{align-items:flex-start;padding:7px 10px 11px 12px}
.pod:not(.m):not(.hero).has-cards .pod-name,.pod:not(.m):not(.hero).has-cards .pod-stack{max-width:calc(100% - 76px)}
.pod:not(.m):not(.hero).has-cards:has(.pod-cards.shown) .pod-name,.pod:not(.m):not(.hero).has-cards:has(.pod-cards.shown) .pod-stack{max-width:calc(100% - 96px)}
.pod:not(.m):not(.hero) .pod-name{font-size:12px}
.pod:not(.m):not(.hero) .pod-tag{align-self:flex-start;margin-left:8px}
.pod:not(.m):not(.hero) .pod-dealer{right:auto;left:-10px}
.pod-plate{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 10px 11px;
  background:#15171B;border:1px solid var(--rule);box-shadow:0 8px 18px rgba(0,0,0,.45);
  transition:border-color var(--duration-base) var(--ease),box-shadow var(--duration-base) var(--ease)}
.pod-name{max-width:100%;display:flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:700;font-size:12.5px;letter-spacing:.01em;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pod-name .nm{overflow:hidden;text-overflow:ellipsis}
.pod-bounty{flex:0 0 auto;padding:2px 5px;background:var(--red);color:#fff;font:800 9px/1.2 WP Display,Poppins,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.pod-stack{font-family:var(--font-display);font-weight:800;font-size:15px;font-variant-numeric:tabular-nums;color:var(--ink-1);line-height:1.15}
.pod-hand{max-width:100%;margin-top:2px;font-family:var(--font-display);font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pod.hero .pod-name{color:var(--ink-1);font-size:13px}
.pod.hero .pod-stack{font-size:17px;color:var(--ink-1)}
.pod-voice{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--green)}
.pod-dealer{position:absolute;z-index:4;top:-10px;right:-10px;left:auto;width:22px;height:22px;border-radius:50%;background:var(--ink-1);color:var(--black-1);box-shadow:0 3px 8px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:900;font-size:11px}
.pod.acting .pod-plate{border-color:var(--honey)}
.pod-timer{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.08);overflow:hidden}
.pod-timer i{display:block;height:100%;background:var(--ink-1);transform-origin:left center;animation-name:tb-drain;animation-timing-function:linear;animation-fill-mode:forwards}
@keyframes tb-drain{0%{transform:scaleX(1);background:var(--ink-1)}82%{background:var(--ink-1)}83%{background:var(--red)}100%{transform:scaleX(0);background:var(--red)}}
.pod.folded{filter:brightness(.42) saturate(.6)}
.pod.folded .pod-plate{box-shadow:none}
/* Three looks: in the hand (full, cards showing), folded (dim, no cards),
   and not playing: sitting out or away (dim, dashed plate, its tag, no
   turn highlight; the server acts for them at once) or waiting for the
   next hand. */
.pod.away,.pod.waiting{filter:brightness(.5) saturate(.6)}
.pod.away .pod-plate,.pod.waiting .pod-plate{border-style:dashed;border-color:color-mix(in srgb,var(--ink-1) 28%,transparent);box-shadow:none}
.pod.away .pod-timer{display:none}
.pod.away .pod-cards{filter:brightness(.7)}
/* Winning is green (--win); a theme can set its own colour. */
.pod.winner .pod-plate{border-color:var(--win,#46C46E);background:color-mix(in srgb,var(--win,#46C46E) 14%,#121418);animation:pod-win-glow 1.1s ease-in-out 3}
.pod.winner .pod-hand{color:var(--win,#46C46E)}
@keyframes pod-win-glow{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--win,#46C46E) 35%,transparent),0 0 28px 6px color-mix(in srgb,var(--win,#46C46E) 45%,transparent)}}
/* Winner banner over the felt */
.win-banner{position:fixed;z-index:60;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 30px 14px;background:#0A0B0D;border:1px solid var(--win,#46C46E);box-shadow:0 0 0 1px color-mix(in srgb,var(--win,#46C46E) 25%,transparent),0 18px 50px rgba(0,0,0,.55),0 0 40px color-mix(in srgb,var(--win,#46C46E) 25%,transparent);pointer-events:none;text-align:center;animation:win-in .45s cubic-bezier(.2,1.4,.4,1) both,win-out .5s ease-in 2.9s both}
.win-banner .t{font:900 26px/1.1 WP Display,Poppins,sans-serif;letter-spacing:-.01em;color:var(--ink-1);white-space:nowrap}
.win-banner .t b{color:var(--win,#46C46E);font-weight:900}
.win-banner .s{font:700 12px/1.2 WP Display,Poppins,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.win-banner.mine{border-color:var(--win,#46C46E);background:linear-gradient(180deg,color-mix(in srgb,var(--win,#46C46E) 22%,#0A0B0D),rgba(10,11,13,.95))}
@keyframes win-in{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes win-out{to{opacity:0;transform:translate(-50%,-58%) scale(.98)}}
@media (max-width:760px){ .win-banner{padding:12px 20px 10px} .win-banner .t{font-size:20px} }
@media (prefers-reduced-motion:reduce){ .win-banner,.pod.winner .pod-plate{animation:none} }
/* chat bubble over a seat */
.pod-say{position:absolute;z-index:8;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);width:max-content;max-width:240px;pointer-events:none}
.pod-say.below{bottom:auto;top:calc(100% + 12px)}
.pod-say span{position:relative;display:block;padding:8px 12px 9px;background:#E5E5E5;color:#111214;
  font:700 13px/1.3 WP Display,Poppins,sans-serif;text-align:center;overflow-wrap:anywhere;box-shadow:0 8px 20px rgba(0,0,0,.45);
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
  transform-origin:50% 100%;animation:say-life 6s linear both;animation-delay:var(--age,0ms)}
.pod-say.below span{transform-origin:50% 0}
.pod-say::after{content:"";position:absolute;left:50%;top:100%;margin-left:-7px;border:7px solid transparent;border-top-color:#E5E5E5;border-bottom:0;animation:say-tail 6s linear both;animation-delay:var(--age,0ms)}
.pod-say.below::after{top:auto;bottom:100%;border-top:0;border-bottom:7px solid #E5E5E5}
.pod.m .pod-say{max-width:160px}
.pod.m .pod-say span{padding:6px 9px 7px;font-size:11.5px;-webkit-line-clamp:7}
@keyframes say-life{0%{opacity:0;transform:scale(.8) translateY(6px)}3%{opacity:1;transform:scale(1.04)}5%{transform:scale(1)}88%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){ .pod-say span{animation:say-fade 6s linear both;animation-delay:var(--age,0ms)} }
@keyframes say-fade{0%,90%{opacity:1}100%{opacity:0}}
@keyframes say-tail{0%,2%{opacity:0}4%,88%{opacity:1}100%{opacity:0}}
.pod-tag{position:relative;z-index:3;margin-top:-10px;display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 9px 0 8px;background:#0B0C0E;border:1px solid var(--rule);
  font-family:var(--font-display);font-weight:800;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-1);white-space:nowrap}
.pod-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tag-c,var(--ink-3))}
.pod-tag.t-call{--tag-c:var(--green)}
.pod-tag.t-check{--tag-c:var(--sky)}
.pod-tag.t-bet{--tag-c:var(--honey)}
.pod-tag.t-raise{--tag-c:var(--coral)}
.pod-tag.t-allin{--tag-c:var(--red);border-color:rgba(229,96,74,.6)}
.pod-tag.t-win{--tag-c:var(--win,#46C46E);color:var(--win,#46C46E);border-color:var(--win,#46C46E);background:color-mix(in srgb,var(--win,#46C46E) 10%,#0B0C0E)}
.pod-tag.t-win::before{display:none}
.pod-tag.t-away{--tag-c:var(--ink-3);color:var(--ink-2)}
@keyframes tb-fade{from{opacity:0}to{opacity:1}}

/* bet in front of a seat: one chip + amount, same style for every action */
.tb-bet{display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 5px;background:color-mix(in srgb,var(--felt-c,#1F5E36) 40%,#050506);border:1px solid color-mix(in srgb,var(--felt-c,#1F5E36) 55%,#2A2D33);
  font-family:var(--font-display);font-weight:800;font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink-1);white-space:nowrap}
.tb-bet .amt{line-height:1}
.tb-chips{--chip:16px;display:inline-flex;align-items:flex-end;gap:2px}
.tb-chips .st{position:relative;display:block;width:var(--chip)}
.tb-chips i{position:absolute;left:0;width:var(--chip);height:var(--chip);border-radius:50%;
  background:radial-gradient(circle,var(--c) 0 56%,transparent 57%),repeating-conic-gradient(var(--c) 0 45deg,var(--e) 45deg 60deg);
  box-shadow:0 1px 0 rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.25)}
.tb-bet.m .tb-chips{--chip:12px}
.tb-anchor.bet.toss{animation:tb-toss .5s cubic-bezier(.2,.75,.3,1) both}
@keyframes tb-toss{
  0%{left:var(--sx);top:var(--sy);opacity:0;transform:translate(-50%,-50%) scale(.55)}
  25%{opacity:1}
  100%{left:var(--bx);top:var(--by);opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@media (prefers-reduced-motion:reduce){ .tb-anchor.bet.toss{animation:none} }


/* seat panel: small, see-through, top-left of the felt */
.tb-seatmenu{position:absolute;z-index:6;top:14px;left:14px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;pointer-events:none}
.tb-seatmenu>*{pointer-events:auto}
.tb-seatmenu.m{top:62px;left:12px}
.tb-sm-toggle{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 10px;background:#0C0D0F;color:var(--ink-1);
  font-family:var(--font-display);font-weight:700;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:var(--transition-control)}
.tb-sm-toggle:hover{background:rgba(237,237,234,.9);color:var(--black-1)}
.tb-sm-toggle .dot,.tm-dot{width:6px;height:6px;border-radius:50%;background:var(--honey)}
.tm-round{position:relative}
.tm-dot{position:absolute;top:7px;right:7px}
.tm-round.on{background:var(--sky);color:var(--black-1)}
.tb-sm-list{display:flex;flex-direction:column;width:196px;background:#0E0F12;border:1px solid var(--rule);box-shadow:0 12px 32px rgba(0,0,0,.55)}
.tb-sm-row{display:flex;align-items:center;justify-content:space-between;gap:10px;height:34px;padding:0 10px;color:var(--ink-1);text-align:left;
  font-family:var(--font-display);font-weight:600;font-size:12.5px;cursor:pointer;transition:var(--transition-control)}
.tb-sm-row:hover{background:rgba(237,237,234,.12)}
.tb-sm-sw{position:relative;flex:0 0 auto;width:26px;height:14px;background:rgba(255,255,255,.18)}
.tb-sm-sw::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;background:var(--ink-2);transition:left var(--duration-fast) var(--ease)}
.tb-sm-row.on .tb-sm-sw{background:var(--honey)}
.tb-sm-row.on .tb-sm-sw::after{left:14px;background:var(--honey-ink)}
.wp-nav-fb{display:none!important}
@media (max-width:900px),(hover:none) and (max-height:500px){.wp-nav-fb{display:inline-block!important}}
.tb-fb-btn{width:100%;height:44px;border:1px solid var(--rule);background:var(--surface-2);color:var(--ink-1);font:700 13px/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.tb-sm-link{display:flex;align-items:center;height:32px;padding:0 10px;border-top:1px solid rgba(255,255,255,.08);color:var(--ink-1);text-decoration:none;
  font-family:var(--font-display);font-weight:700;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;text-align:left;cursor:pointer}
.tb-sm-link:hover{background:rgba(237,237,234,.12)}
.tb-sm-link.danger{color:var(--red-text)}
.tb-seatmenu.m .tb-sm-list{width:210px}
/* Host alert: players waiting for your approval (red dot, links to your dashboard) */
.wp-host-alert{display:inline-flex;align-items:center;gap:8px;max-width:100%;height:32px;padding:0 12px 0 10px;background:var(--red);color:var(--red-ink,#fff);text-decoration:none;
  font:800 11.5px/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.4);cursor:pointer}
.wp-host-alert span{overflow:hidden;text-overflow:ellipsis}
.wp-host-alert i{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:currentColor;animation:wp-alert-pulse 1.6s ease-in-out infinite}
.wp-host-alert:hover{filter:brightness(1.1)}
.wp-host-alert.on-table.m{position:absolute;z-index:5;left:70px;bottom:19px;max-width:calc(100% - 140px);height:34px;font-size:10.5px;letter-spacing:.04em}
@keyframes wp-alert-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){ .wp-host-alert i,.wp-pend-pill i{animation:none} }
.wp-nav-dot{display:inline-block;min-width:16px;height:16px;margin-left:6px;padding:0 4px;border-radius:8px;background:var(--red);color:var(--red-ink,#fff);font:800 10px/16px var(--font-display);letter-spacing:0;text-align:center;vertical-align:2px}
.wp-pend-pill{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:6px;padding:4px 8px;background:var(--red);color:var(--red-ink,#fff);text-decoration:none;font:800 10.5px/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.wp-pend-pill i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:wp-alert-pulse 1.6s ease-in-out infinite}
/* pot and bets sliding to the winner */
.tb-anchor.bet.sweep{animation:tb-sweep .7s cubic-bezier(.5,0,.3,1) forwards}
@keyframes tb-sweep{0%{left:var(--sx);top:var(--sy);opacity:1}85%{opacity:1}100%{left:var(--bx);top:var(--by);opacity:0;transform:translate(-50%,-50%) scale(.7)}}

/* sound: small icon beside Settings, red with an X when muted */
.tb-sound{flex:0 0 auto;width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:var(--surface-3);color:var(--ink-1);cursor:pointer;transition:var(--transition-control)}
.tb-sound:hover{background:var(--sky);color:var(--black-1)}
.tb-sound.muted{background:var(--red);color:var(--red-ink)}
.tb-sound.muted:hover{background:var(--sky);color:var(--black-1)}
.tb-sound.m{width:44px;height:44px}
.tm-right{display:flex;gap:8px}
/* card back / background swatches */
.tb-sw.back img{display:block;width:34px;height:48px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.45)}
.tb-sw.back.on img{box-shadow:0 0 0 2px #0E0F11,0 0 0 4px var(--ink-1)}
.tb-sw.bg i{border-radius:0;width:60px;height:38px}
/* left-handed dock: actions on the left */
.td-dock.lefty{flex-direction:row-reverse;padding:16px 40px 16px 22px}
.td-dock.lefty .td-dock-btns{margin-left:0;margin-right:auto;flex-direction:row-reverse}
.td-dock.lefty .td-dock-left{justify-content:flex-end}
.td-dock.lefty .td-pop{left:auto;right:8px}
.tm-dock.lefty{direction:rtl}
.tm-dock.lefty>*{direction:ltr}
/* iPhones zoom into any text box under 16px and don't zoom back out,
   which pushed the table past the screen edge. Keep every field at 16px+
   on phones and tablets. */
@media (max-width:900px){ input,textarea,select{font-size:16px!important} }

/* ---- live play: empty seats, notices, name prompt ---- */
.pod-sit{display:flex;align-items:center;justify-content:center;width:120px;height:46px;background:#0C0D0F;border:1px dashed rgba(237,237,234,.35);color:var(--ink-1);
  font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:var(--transition-control)}
.pod-sit:hover{background:var(--sky);color:var(--black-1);border-color:var(--sky)}
.pod-sit.m{width:72px;height:38px;font-size:10.5px}
.wp-toast{position:fixed;pointer-events:none;left:50%;bottom:96px;transform:translateX(-50%);z-index:2000;max-width:calc(100vw - 32px);padding:12px 18px;background:var(--sky);color:var(--black-1);
  font-family:var(--font-display);font-weight:700;font-size:14px;box-shadow:var(--shadow-overlay);animation:tb-fade .2s var(--ease) both}
.tm-dock.live-note{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
/* The note keeps a readable width; buttons drop to their own row when needed. */
.tm-dock.live-note .tm-note{flex:1 1 170px;min-width:0;font-family:var(--font-display);font-weight:700;font-size:13.5px;line-height:1.3;color:var(--ink-1)}
.tm-dock.live-note .tb-act{flex:1 0 auto;min-width:0;padding:0 14px;font-size:12.5px}
.wp-name-input{width:100%;height:48px;margin:0 0 10px;padding:0 14px;background:var(--surface-input);border:1px solid var(--rule);color:var(--ink-1);font-family:var(--font-display);font-weight:700;font-size:17px;outline:0}
.wp-name-input:focus{border-color:var(--coral)}
.wp-name-err{margin:0 0 12px!important;color:var(--red-text)!important;font-size:14px!important}
/* ---- live waiting room ---- */
.wr-wrap{position:relative;z-index:1;display:flex;align-items:flex-start;min-height:calc(100vh - 64px)}
.wr-host{background:var(--surface-1);border:1px solid var(--rule)}
.wr-host-h{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:16px 22px;border-bottom:1px solid var(--rule)}
.wr-host-note{margin:0;padding:12px 22px 16px;font-size:14px;line-height:1.45;color:var(--ink-1)}
.wr-pending{padding:12px 22px 16px;border-top:1px solid var(--rule)}
.wr-pend-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--rule-soft)}
.wr-pend-row:hover{background:color-mix(in srgb,var(--indigo) 28%,transparent)}
.wr-pend-row span{flex:1;font:700 14px WP Display,Poppins,sans-serif;color:var(--ink-1)}
.wr-bulk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 0 8px;border-bottom:1px solid var(--rule)}
.wr-bulk .label{flex:1;min-width:0}
.wr-bulk-acts{display:flex;gap:8px;flex-wrap:wrap}
.wp-ck{flex:0 0 auto;width:18px;height:18px;padding:0;border:1px solid var(--ink-3);background:transparent;cursor:pointer;position:relative}
.wp-ck:hover{border-color:var(--ink-1)}
.wp-ck:focus-visible{outline:2px solid var(--ink-1);outline-offset:2px}
.wp-ck.on,.wp-ck.some{background:var(--green);border-color:var(--green)}
.wp-ck.on::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid var(--green-ink,#0B0C0E);border-width:0 2px 2px 0;transform:rotate(45deg)}
.wp-ck.some::after{content:"";position:absolute;left:3px;right:3px;top:7px;height:2px;background:var(--green-ink,#0B0C0E)}
.th-pending{padding:8px 22px 4px}
.th-pending .wr-pend-row:last-child{border-bottom:0}
.wr-name b{margin-left:4px;color:var(--honey)}
.wr-chat{flex:0 0 320px;width:320px}
@media (max-width:900px){
  .wr-wrap{flex-direction:column}
  .wr-chat{width:auto;flex:0 0 auto;border-left:0;border-top:1px solid var(--rule);min-height:360px}
}
/* ---- live host dashboard extras ---- */
.th-phase .btn{width:100%}
.btn.honey{background:var(--honey);color:var(--honey-ink);border-color:transparent;text-decoration:none}
.btn.honey:hover{background:var(--honey-press)}
.th-bounty{padding:20px 22px;background:var(--surface-1);border:1px solid var(--honey);box-shadow:inset 4px 0 0 var(--honey);scroll-margin-top:76px}
.th-bounty-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.th-bounty h2{margin:0;font:800 22px/1.2 WP Display,Poppins,sans-serif;color:var(--ink-1)}
.th-bounty-count{font:800 13px/1 WP Display,Poppins,sans-serif;letter-spacing:.06em;color:var(--honey)}
.th-bounty-count.done{color:var(--green-text)}
.th-bounty p{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.th-bounty-list{margin-top:14px;display:flex;flex-direction:column}
.th-bounty-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--rule-soft)}
.th-bounty-row .nm{flex:1;min-width:0;font:700 15px WP Display,Poppins,sans-serif;color:var(--ink-1)}
.th-bounty-row .th-tag{margin-left:0;background:var(--honey);color:var(--honey-ink)}
.th-tag{margin-left:8px;padding:2px 6px;background:var(--coral);color:var(--coral-ink);font:800 10px/1.4 WP Display,Poppins,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.th-st{margin-left:auto;margin-right:8px;font-size:13.5px;color:var(--ink-2);white-space:nowrap}
.th-player-row{gap:8px;flex-wrap:wrap}
.th-player-row .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.th-bounty-row .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.th-bounty-row .btn,.th-bounty-row .th-tag{flex:0 0 auto}
/* Phones: name on its own line, status and buttons on a tidy line below. */
@media (max-width:560px){
  .th-player-row{row-gap:6px;padding:10px 14px}
  .th-player-row .nm{flex:1 1 100%}
  .th-player-row .th-st{margin-left:0;margin-right:auto}
  .th-player-row .th-kick{margin-left:0}
  .th-main{padding-left:16px!important;padding-right:16px!important}
}
/* ---- live profile ---- */
.pf-wrap{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:48px 20px 96px}
.pf-name{margin:0;font:800 40px/1 WP Display,Poppins,sans-serif;letter-spacing:-.02em;color:var(--ink-1)}
.pf-sub{margin:10px 0 0;font-size:15px;color:var(--ink-1)}
.pf-stats{margin-top:28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.pf-stats>div{padding:18px;background:var(--surface-1)}
.pf-stats>div:last-child:nth-child(odd){grid-column:1/-1}
.pf-stats .lb{display:block;font:700 11px/1 WP Display,Poppins,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.pf-stats .vl{display:block;margin-top:8px;font:800 28px/1 WP Display,Poppins,sans-serif;color:var(--ink-1)}
.pf-list{margin-top:24px;border:1px solid var(--rule);background:var(--surface-1)}
.pf-list-h{padding:14px 18px;border-bottom:1px solid var(--rule);font:800 12px/1 WP Display,Poppins,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-1)}
.pf-row{display:flex;justify-content:space-between;gap:12px;padding:13px 18px;border-top:1px solid var(--rule-soft);color:var(--ink-1);text-decoration:none;font-size:15px}
.pf-row:hover{background:var(--surface-2)}
.pf-empty{margin:0;padding:16px 18px;color:var(--ink-2)}
.pf-rename{margin-top:24px;display:flex;flex-direction:column;gap:8px}
/* leaderboard */
.lb-wrap{max-width:1120px}
.lb-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.lb-seg{display:inline-flex;border:1px solid var(--rule);background:var(--surface-1)}
.lb-seg button{height:38px;padding:0 16px;border:0;background:transparent;color:var(--ink-2);font:800 12px/1 WP Display,Poppins,sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.lb-seg button.on{background:var(--surface-3,var(--surface-2));color:var(--ink-1);box-shadow:inset 0 -2px 0 var(--coral)}
.lb-seg button:focus-visible{outline:2px solid var(--ink-1);outline-offset:-2px}
.lb-podium{margin-top:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.lb-podium>div{padding:18px;background:var(--surface-1);min-width:0}
.lb-podium .rk{font:800 11px/1 WP Display,Poppins,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.lb-podium .nm{display:block;margin-top:10px;font:800 22px/1.1 WP Display,Poppins,sans-serif;color:var(--ink-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-podium .pt{display:block;margin-top:6px;font:700 14px/1 WP Display,Poppins,sans-serif;color:var(--honey);font-variant-numeric:tabular-nums}
.lb-podium>div:first-child .rk{color:var(--honey)}
.lb-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:24px;align-items:start}
.lb-table{width:100%;border-collapse:collapse;font-size:15px;color:var(--ink-1)}
.lb-table th{padding:10px 12px;border-bottom:1px solid var(--rule);font:800 10.5px/1 WP Display,Poppins,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);text-align:right;white-space:nowrap}
.lb-table td{padding:11px 12px;border-top:1px solid var(--rule-soft);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.lb-table th:nth-child(-n+2),.lb-table td:nth-child(-n+2){text-align:left}
.lb-table td:nth-child(2){font-weight:700;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.lb-table td.pts{font-weight:800;color:var(--honey)}
.lb-table td.rk{color:var(--ink-2);width:36px}
.lb-table tr.me td{background:var(--surface-2)}
.lb-win{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:13px 18px;border-top:1px solid var(--rule-soft);color:var(--ink-1);text-decoration:none}
.lb-win:hover{background:var(--surface-2)}
.lb-win .tn{font-size:14px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-win .wn{font:800 16px/1.2 WP Display,Poppins,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-win .meta{grid-row:1/3;grid-column:2;align-self:center;text-align:right;font-size:13px;color:var(--ink-2);white-space:nowrap}
.lb-win .meta b{display:block;color:var(--honey);font:800 15px/1.2 WP Display,Poppins,sans-serif}
.lb-how{margin:12px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
@media (max-width:860px){ .lb-grid{grid-template-columns:1fr} }
@media (max-width:560px){
  .lb-podium{grid-template-columns:1fr}
  .lb-table th:nth-child(5),.lb-table td:nth-child(5),.lb-table th:nth-child(6),.lb-table td:nth-child(6){display:none}
  .lb-table th,.lb-table td{padding:10px 8px}
}
.pf-note{margin:6px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-1)}
.pf-rename input{flex:1;height:40px;padding:0 12px;background:var(--surface-input);border:1px solid var(--rule);color:var(--ink-1);font:600 16px WP Display,Poppins,sans-serif}

/* share kit: image, message, copy/share buttons */
.sk{border:1px solid var(--rule);background:var(--surface-1)}
.sk-h{padding:14px 18px;border-bottom:1px solid var(--rule)}
.sk-h .label{color:var(--ink-1)}
.sk-body{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:18px;padding:18px}
.sk-img{display:block;width:100%;aspect-ratio:1200/630;object-fit:cover;background:#0E350F;border:1px solid var(--rule)}
.sk-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.sk-lab{font:700 12px/1 WP Display,Poppins,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-1)}
.sk-msg{width:100%;min-height:76px;padding:10px 12px;background:var(--surface-input);border:1px solid var(--rule);color:var(--ink-1);font:500 15px/1.4 WP Display,Lexend,sans-serif;resize:vertical}
.sk-msg:focus{outline:none;border-color:var(--coral)}
.sk-link{padding:9px 12px;background:var(--surface-2);font:700 13.5px/1.3 WP Display,Poppins,sans-serif;color:var(--honey);word-break:break-all}
.sk-btns{display:flex;flex-wrap:wrap;gap:8px}
.sk-note{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.wr-side{flex:0 0 340px;width:340px;display:flex;flex-direction:column;background:var(--surface-1);border-left:1px solid var(--rule);position:sticky;top:57px;align-self:flex-start;height:calc(100vh - 57px);height:calc(100dvh - 57px)}
.wr-side .gd-chat-list{min-height:0}
.wr-side .wr-chat{min-height:0}
.wr-side .wr-chat{flex:1 1 auto;width:auto;border-left:0}
@media (max-width:900px){
  /* Stacked: both columns span the full width (never shrink-to-fit their content). */
  .wr-wrap{align-items:stretch}
  .wr-main{width:100%}
  .wr-side{align-self:stretch;width:100%;min-width:0;flex:0 0 auto;border-left:0;border-top:1px solid var(--rule);position:static;height:420px}
  .wr-side .wr-chat{border-top:0;width:100%;flex:1 1 auto}
  .wr-chat .gd-input-row{gap:8px}
  .wr-chat .gd-input{min-width:0}
}
/* waiting room: felt hero, one clear action card, prizes + details, players, share strip */
.wr-main{flex:1;min-width:0;overflow:auto;padding:20px 32px 40px}
.wr-col{max-width:980px;display:flex;flex-direction:column;gap:14px}
.wr-hero{position:relative;padding:18px 24px 0;background:linear-gradient(105deg,rgba(7,8,10,.78) 0%,rgba(7,8,10,.45) 60%,rgba(7,8,10,.3) 100%),url('/wenpoker/assets/felt-wide.webp') center/cover #0E350F;border:1px solid var(--rule)}
.wr-hero-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.wr-hero-mark{display:block;width:120px;height:auto}
.wr-title{margin:12px 0 0;font:900 40px/1.02 WP Display,Poppins,sans-serif;letter-spacing:-.03em;color:var(--ink-1);overflow-wrap:anywhere}
.wr-host-line{margin:6px 0 0;font-size:15px;color:var(--ink-2)}
.wr-host-line b{color:var(--ink-1);font-weight:800}
.wr-copy{background:none;border:0;padding:0;font:inherit;color:var(--ink-1);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.wr-copy:hover{color:var(--coral-text,var(--ink-1))}
.wr-stats{margin:16px -24px 0;display:grid;grid-template-columns:repeat(4,1fr);background:#07080A;border-top:1px solid rgba(255,255,255,.08)}
.wr-stats>div{padding:11px 16px 12px 24px;border-left:1px solid rgba(255,255,255,.08)}
.wr-stats>div:first-child{border-left:0}
.wr-stats .lb,.wr-pool .lb,.wr-claim .lb{display:block;font:700 10.5px/1 WP Display,Poppins,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.wr-stats .vl{display:block;margin-top:6px;font:800 19px/1.15 WP Display,Poppins,sans-serif;color:var(--ink-1)}
.wr-stats .vl small{font-size:14px;font-weight:700;color:var(--ink-2)}
.wr-stats .vl.honey{color:var(--honey)}
.wr-stats .vl.soft{font-size:15px;font-weight:700;padding-top:3px}
.wr-card{padding:20px 24px;background:var(--surface-1);border:1px solid var(--rule)}
.wr-card.cta{border:1px solid var(--coral);box-shadow:inset 4px 0 0 var(--coral)}
.wr-tablebtn{width:100%;height:68px;font-size:18px}
.wr-card.in{box-shadow:inset 4px 0 0 var(--green)}
.wr-card.win{box-shadow:inset 4px 0 0 var(--honey)}
.wr-card h2{margin:0;font:800 23px/1.2 WP Display,Poppins,sans-serif;color:var(--ink-1)}
.wr-card p{margin:8px 0 0;font-size:16px;line-height:1.55;color:var(--ink-1);max-width:60ch}
.wr-steps{margin:14px 0 0;padding:0;list-style:none;counter-reset:st;display:grid;gap:8px;max-width:640px}
.wr-steps li{counter-increment:st;display:flex;gap:12px;align-items:baseline;font-size:15px;line-height:1.45;color:var(--ink-2)}
.wr-steps li::before{content:counter(st);flex:0 0 22px;height:22px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface-3,#262A31);color:var(--ink-1);font:800 12px/1 WP Display,Poppins,sans-serif;transform:translateY(-1px)}
.wr-steps b{color:var(--ink-1)}
.wr-card-actions{margin-top:16px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.wr-field{display:flex;flex-direction:column;gap:7px;width:100%;max-width:440px;font:700 14px/1.2 WP Display,Poppins,sans-serif;color:var(--ink-1)}
.wr-field input{height:46px;padding:0 12px;background:var(--surface-input);border:1px solid var(--rule);color:var(--ink-1);font:500 16px WP Display,Lexend,sans-serif}
.wr-field input:focus{outline:none;border-color:var(--coral)}
.wr-field em{font-style:normal;font-weight:500;font-size:13px;color:var(--ink-2)}
.wr-login-note{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2);max-width:56ch}
.wr-leave{margin-top:16px;padding:0;background:none;border:0;color:var(--ink-2);font:700 13px WP Display,Poppins,sans-serif;text-decoration:underline;cursor:pointer}
.wr-leave:hover{color:var(--red-text)}
.wr-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.wr-panel{padding:18px 20px;background:var(--surface-1);border:1px solid var(--rule)}
/* ===== tournament moments: finish pop-up, final leaderboard, bounty banner ===== */
.tp-overlay{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;padding:16px;background:rgba(5,6,8,.72);backdrop-filter:blur(3px);animation:tp-fade .18s ease both}
.tp-overlay.out{opacity:0;transition:opacity .18s}
.tp-modal{position:relative;width:min(460px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:30px 28px 24px;text-align:center;
  background:linear-gradient(180deg,rgba(21,23,27,.97),rgba(11,12,14,.98)),url('/wenpoker/assets/suit-pattern-dark.webp') center/cover;
  border:1px solid var(--rule);box-shadow:0 30px 80px rgba(0,0,0,.6);animation:tp-pop .28s cubic-bezier(.2,.9,.3,1.2) both}
.tp-eyebrow{font:800 12px/1.3 WP Display,Poppins,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--coral-text)}
.tp-big{margin:14px 0 8px;font:900 34px/1.05 WP Display,Poppins,sans-serif;letter-spacing:-.02em;color:var(--ink-1)}
.tp-title{margin:10px 0 18px;font:900 26px/1.15 WP Display,Poppins,sans-serif;letter-spacing:-.01em;color:var(--ink-1)}
.tp-sub{margin:0 auto;max-width:34ch;font-size:15px;line-height:1.5;color:var(--ink-2)}
.tp-place{margin:14px 0 0;font:900 96px/.95 WP Display,Poppins,sans-serif;letter-spacing:-.04em;color:var(--ink-1)}
.tp-place.win{color:var(--honey);text-shadow:0 0 40px rgba(224,192,112,.35)}
.tp-of{margin-top:6px;font:700 13px/1.3 WP Display,Poppins,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.tp-name{margin-top:16px;font:900 24px/1.2 WP Display,Poppins,sans-serif;color:var(--ink-1);overflow-wrap:anywhere}
.tp-lines{margin:18px 0 0;padding:0;border-top:1px solid var(--rule)}
.tp-lines div{display:flex;justify-content:space-between;gap:16px;padding:10px 2px;border-bottom:1px solid var(--rule);font-size:14px}
.tp-lines dt{color:var(--ink-3)} .tp-lines dd{margin:0;font-weight:700;color:var(--ink-1);text-align:right}
.tp-lines .honey,.tp-board .ex,.tp-bounty b{color:var(--honey)}
.tp-fine{margin:10px 0 0;font-size:12px;color:var(--ink-3)}
.tp-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}
.tp-actions .btn{flex:1 1 auto;min-width:120px}
.tp-board{list-style:none;margin:0;padding:0;text-align:left}
.tp-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--rule);font-size:14.5px}
.tp-row .pl{font:900 15px/1 WP Display,Poppins,sans-serif;color:var(--ink-3)}
.tp-row .nm{font-weight:800;color:var(--ink-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-row .ex{font:700 12.5px/1.3 WP Display,Poppins,sans-serif;text-align:right}
.tp-row.top .pl{color:var(--honey)}
.tp-row.p1{background:rgba(224,192,112,.1);box-shadow:inset 3px 0 0 var(--honey)}
.tp-row.me{background:rgba(95,201,143,.1);box-shadow:inset 3px 0 0 var(--green)}
.tp-bounty{position:fixed;z-index:9400;left:50%;top:84px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;width:max-content;max-width:calc(100vw - 32px);
  padding:12px 22px 12px;background:rgba(12,13,16,.95);border:1px solid var(--red);box-shadow:0 0 0 1px rgba(229,96,74,.25),0 16px 40px rgba(0,0,0,.55);text-align:center;animation:tp-drop .35s cubic-bezier(.2,.9,.3,1.2) both}
.tp-bounty.out{opacity:0;transform:translate(-50%,-10px);transition:opacity .35s,transform .35s}
.tp-bounty .tag{padding:3px 8px;background:var(--red);color:#fff;font:900 10.5px/1 WP Display,Poppins,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.tp-bounty .t{font:800 17px/1.25 WP Display,Poppins,sans-serif;color:var(--ink-1)}
.tp-bounty .s{font:700 12.5px/1.2 WP Display,Poppins,sans-serif;letter-spacing:.06em;color:var(--ink-2)}
.tp-bounty.mine{border-color:var(--honey);background:linear-gradient(180deg,rgba(40,32,12,.96),rgba(12,13,16,.96))}
.tp-bounty.mine .tag{background:var(--honey);color:var(--honey-ink)}
@keyframes tp-fade{from{opacity:0}to{opacity:1}}
@keyframes tp-pop{from{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:none}}
@keyframes tp-drop{from{opacity:0;transform:translate(-50%,-16px)}to{opacity:1;transform:translate(-50%,0)}}
@media (max-width:560px){ .tp-modal{padding:24px 18px 18px} .tp-place{font-size:80px} .tp-bounty{top:70px} }
@media (prefers-reduced-motion:reduce){ .tp-overlay,.tp-modal,.tp-bounty{animation:none} }
/* final standings on the tournament page */
.wr-standings .wr-group-h{justify-content:space-between;margin-bottom:14px}
.wr-podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:10px}
.wr-pod{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 10px 14px;background:var(--surface-2,#242429);border:1px solid var(--rule);text-align:center;min-width:0}
.wr-pod .pl{font:900 30px/1 WP Display,Poppins,sans-serif;color:var(--ink-2)}
.wr-pod .nm{max-width:100%;font:800 15px/1.25 WP Display,Poppins,sans-serif;color:var(--ink-1);overflow-wrap:anywhere}
.wr-pod .ex{font:700 12px/1.3 WP Display,Poppins,sans-serif;color:var(--honey)}
.wr-pod.p1{order:2;padding-top:24px;border-color:var(--honey);background:linear-gradient(180deg,rgba(224,192,112,.16),rgba(29,32,38,1))}
.wr-pod.p1 .pl{font-size:40px;color:var(--honey)}
.wr-pod.p2{order:1} .wr-pod.p3{order:3}
.wr-pod.me{box-shadow:inset 0 -3px 0 var(--green)}
.wr-rest{margin-top:12px;border-top:1px solid var(--rule)}
@media (max-width:560px){ .wr-podium{grid-template-columns:1fr;gap:6px} .wr-pod{flex-direction:row;align-items:center;gap:12px;padding:12px 14px;text-align:left} .wr-pod.p1{order:0;padding-top:12px} .wr-pod.p2{order:1} .wr-pod.p3{order:2} .wr-pod .pl,.wr-pod.p1 .pl{flex:0 0 52px;font-size:24px} .wr-pod .nm{flex:1;min-width:0} .wr-pod .ex{text-align:right} }

.wr-h{margin:0;font:800 13px/1 WP Display,Poppins,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-1)}
.wr-panel>.wr-group-h{align-items:center}
.wr-panel>.wr-group-h span{font:800 13px/1 WP Display,Poppins,sans-serif;color:var(--ink-2)}
.wr-pool{margin-top:14px}
.wr-pool .vl{display:block;margin-top:8px;font:900 36px/1 WP Display,Poppins,sans-serif;color:var(--honey)}
.wr-payouts{margin-top:16px;border:1px solid var(--rule)}
.wr-payouts>div{display:flex;justify-content:space-between;padding:10px 14px;font-size:15px}
.wr-payouts>div+div{border-top:1px solid var(--rule)}
.wr-payouts .place{color:var(--ink-2);font-weight:700}
.wr-payouts .amt{color:var(--honey);font-weight:800;font-variant-numeric:tabular-nums}
.wr-bounty{margin-top:14px;display:flex;gap:10px;align-items:baseline;font-size:14.5px;line-height:1.45;color:var(--ink-1)}
.wr-bounty .dot{width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:var(--honey);transform:translateY(-1px)}
.wr-claim{margin-top:16px;padding:14px 16px;background:var(--surface-2);border:1px solid var(--rule)}
.wr-claim p{margin:8px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-1);white-space:pre-wrap}
.wr-muted{margin:14px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.wr-fine{margin:14px 0 0;font-size:12.5px;color:var(--ink-2)}
.wr-dl{margin:14px 0 0}
.wr-dl>div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--rule-soft)}
.wr-dl dt{font-size:14px;color:var(--ink-2)}
.wr-dl dd{margin:0;font-size:14px;font-weight:700;color:var(--ink-1);text-align:right}
.wr-blinds{margin-top:14px}
.wr-blinds summary{cursor:pointer;font:700 13.5px WP Display,Poppins,sans-serif;color:var(--honey)}
.wr-blinds table{margin-top:10px;width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
.wr-blinds th{text-align:left;padding:6px 8px;font:700 10.5px/1 WP Display,Poppins,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--rule)}
.wr-blinds td{padding:6px 8px;color:var(--ink-1);border-bottom:1px solid var(--rule-soft)}
.wr-blinds tr.now td{color:var(--honey);font-weight:800}
.wr-panel .wr-group{margin-top:18px}
.wr-sharebar{display:flex;align-items:center;gap:18px;padding:16px;background:var(--surface-1);border:1px solid var(--rule)}
.wr-chat-sound{background:none;border:1px solid var(--rule);color:var(--ink-2);font:700 10.5px/1 WP Display,Poppins,sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;cursor:pointer}
.wr-chat-sound:hover{color:var(--ink-1);border-color:var(--ink-3)}
.wr-chat-sound[aria-pressed="false"]{color:var(--ink-3)}
.wr-share-img{display:block;width:176px;aspect-ratio:1200/630;object-fit:cover;background:#0E350F;border:1px solid var(--rule);flex:0 0 auto}
.wr-share-body{display:flex;flex-direction:column;gap:12px;min-width:0}
.wr-share-btns{display:grid;grid-template-columns:auto auto;gap:8px;justify-content:start}
.wr-share-btns [data-sk="copyimg"]{grid-column:1}
.wr-share-btns [data-sk="download"]{grid-column:1}
.wr-share-btns [data-sk="link"]{grid-column:2;grid-row:2}
@media (max-width:1180px){ .wr-grid{grid-template-columns:1fr} }
@media (max-width:900px){
  .wr-main{padding:16px 16px 28px}
  .wr-hero{padding:20px 18px 0}
  .wr-hero-mark{width:118px}
  .wr-title{font-size:34px;margin-top:16px}
  .wr-stats{margin:20px -18px 0;grid-template-columns:1fr 1fr}
  .wr-stats>div{padding:12px 18px}
  .wr-stats>div:nth-child(3){border-left:0}
  .wr-stats>div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.08)}
  .wr-card{padding:22px 20px}
  .wr-panel{padding:20px 18px}
  .wr-share-img{width:128px}
  .wr-sharebar{align-items:flex-start;gap:14px;padding:14px}
  .wr-share-btns{grid-template-columns:1fr}
  .wr-share-btns [data-sk]{grid-column:1;grid-row:auto}
}
@media (max-width:400px){
  .wr-sharebar{flex-direction:column;align-items:stretch}
  .wr-share-img{width:100%}
}
.th-main .sk{margin-top:22px}
@media (max-width:760px){ .sk-body{grid-template-columns:1fr} }

/* lobby: segmented tabs + quieter filter chips */
#app-lobby .tabs{display:inline-grid;grid-auto-flow:column;gap:0;border:1px solid var(--rule);background:var(--surface-input);border-bottom:1px solid var(--rule)}
#app-lobby .tab-btn{height:44px;padding:0 18px;font:800 12.5px/1 WP Display,Poppins,sans-serif;letter-spacing:.08em;color:var(--ink-2)}
#app-lobby .tab-btn.on{background:var(--surface-3);color:var(--ink-1);box-shadow:inset 0 -2px 0 var(--coral)}
#app-lobby .tab-btn .underline{display:none}
#app-lobby .preset-btn{height:34px;border:0;background:var(--surface-2);color:var(--ink-1);font:700 12px/1 WP Display,Poppins,sans-serif;letter-spacing:.06em}
#app-lobby .preset-btn.on{background:var(--ink-1);color:var(--black-1)}
.lb-hist{text-decoration:none}
@media (max-width:640px){
  #app-lobby .tabs{display:grid;grid-template-columns:repeat(3,1fr);width:100%}
  #app-lobby .tab-btn{padding:0 6px;font-size:11.5px;justify-content:center}
}
/* way back to your tournament from any page */
.wp-back-tourney{position:relative;flex:0 0 auto;display:inline-grid;place-items:center;width:36px;height:36px;background:var(--coral,#1D4E73);text-decoration:none;-webkit-tap-highlight-color:transparent}
.wp-back-tourney:hover,.wp-back-tourney.open{background:#EC6550}
.wp-back-tourney:focus-visible{outline:2px solid #F4F6F8;outline-offset:2px}
.wp-back-tourney .dot{width:10px;height:10px;border-radius:50%;background:#F4F6F8;animation:wpBackPulse 1.8s ease-out infinite}
@keyframes wpBackPulse{0%{box-shadow:0 0 0 0 rgba(244,246,248,.7)}70%,100%{box-shadow:0 0 0 7px rgba(244,246,248,0)}}
@media (prefers-reduced-motion:reduce){ .wp-back-tourney .dot{animation:none} }
.wp-back-tourney .tip{position:absolute;top:calc(100% + 8px);right:0;z-index:50;display:none;flex-direction:column;gap:4px;width:max-content;max-width:min(260px,calc(100vw - 32px));padding:10px 12px;background:var(--surface-2,#1E2126);border:1px solid var(--rule);border-top:2px solid var(--coral,#1D4E73);text-align:left;white-space:normal}
.wp-back-tourney .tip small{font:700 10px/1.2 WP Display,Poppins,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.wp-back-tourney .tip b{font:800 14px/1.3 WP Display,Poppins,sans-serif;color:var(--ink-1);overflow-wrap:anywhere}
.wp-back-tourney:hover .tip,.wp-back-tourney:focus-visible .tip,.wp-back-tourney.open .tip{display:flex}
@media (hover:none){ .wp-back-tourney:hover .tip{display:none} .wp-back-tourney.open .tip{display:flex} }
.hp-header > .wp-back-tourney.solo{margin-left:auto}
.hp-header > .wp-back-tourney.solo + .wp-qs,.hp-header > .wp-back-tourney.solo + .btn{margin-left:0}
@media (max-width:760px){
  .wp-back-tourney{width:34px;height:34px}
  .hp-header > .wp-back-tourney.solo,.hp-header > .wp-back-tourney.solo + .btn{order:2}
}
/* Touch: the name opens on the first tap, pinned across the screen under the
   header (top is set from the button's position when it opens). */
@media (hover:none){
  .wp-back-tourney .tip{position:fixed;left:16px;right:16px;width:auto;max-width:none}
}
/* Small phones: logo + tournament dot + Log in + Quick Start on one row. */
@media (max-width:400px){
  .hp-header .right,.hp-header > .wp-qs{gap:6px}
  .hp-header{column-gap:6px!important}
  .hp-header .wp-qs-btn,.hp-header .right a[data-wp-account],.hp-header a.login-link.signed-in,.hp-header .right .btn{padding:0 10px;letter-spacing:.04em}
  .hp-header .wp-qs-btn{gap:5px}
}
@media (max-width:350px){
  .hp-header .mark img{height:22px}
  .hp-header .wp-qs-btn .car{display:none}
}
/* ---------- shared: action buttons ---------- */
.tb-act{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;min-width:136px;padding:0 22px;border:1px solid transparent;
  font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;cursor:pointer;text-decoration:none;
  transition:var(--transition-control),transform var(--duration-fast) var(--ease)}
.tb-act:active{transform:translateY(1px)}
/* Every button is one solid color and hover swaps it for another solid
   color (same idea as the homepage CTAs): action colors go bone-white on
   hover, gray buttons take on their action color. */
.tb-act.fold{background:var(--red);color:var(--red-ink)}
.tb-act.call{background:var(--green);color:var(--green-ink)}
.tb-act.raise{background:var(--honey);color:var(--honey-ink)}
.tb-act.allin{background:var(--red);color:var(--red-ink)}
.tb-act:is(.fold,.call,.raise,.allin):hover{background:var(--sky);color:var(--black-1)}
.tb-act.ghost{background:var(--surface-3);color:var(--ink-1)}
.tb-act.ghost:hover{background:var(--sky);color:var(--black-1)}
.tb-act kbd{font-family:var(--font-display);font-weight:700;font-size:10px;line-height:1;padding:3px 5px;border:1px solid currentColor;opacity:.5}

.tb-status{display:flex;flex-direction:column;gap:4px;min-width:0}
.tb-status .k{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--coral-text);white-space:nowrap}
.tb-status .k .dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:tb-blink 1.6s ease-in-out infinite}
.tb-status .k.wait{color:var(--ink-3)}
.tb-status .k.wait .dot{animation:none}
/* Dock notes are whole sentences: let them wrap instead of running under the buttons. */
.tb-status .k.note{white-space:normal;line-height:1.45;letter-spacing:.1em;text-wrap:balance}
.tb-status .k.note .dot{flex:0 0 auto}
/* Desktop dock: on narrower screens "Sit out next hand" wraps inside its box instead of spilling. */
.td-dock-left .tb-pre[data-seat=sitoutnext]{white-space:normal;height:auto;min-height:30px;padding-top:4px;padding-bottom:4px;line-height:1.2;text-align:left}
.tb-status .v{font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--ink-2);white-space:nowrap}
.tb-status .v b{color:var(--ink-1);font-weight:800}
@keyframes tb-blink{0%,100%{opacity:.35}50%{opacity:1}}
.timer{display:inline-flex;align-items:center;gap:var(--space-4);flex:0 0 auto}
.timer-dial{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.timer-dial svg{position:absolute;inset:0;transform:rotate(-90deg)}
.timer-num{font-family:var(--font-display);font-weight:800;font-variant-numeric:tabular-nums}

/* pre-actions while waiting on the rest of the table */
.tb-pre{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 16px;background:var(--surface-3);border:0;color:var(--ink-1);
  font-family:var(--font-display);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:var(--transition-control)}
.tb-pre:hover{background:var(--honey);color:var(--honey-ink)}
.tb-status .tb-pre{height:30px;padding:0 10px;gap:8px;font-size:11px}
.tb-pre .box{width:14px;height:14px;flex:0 0 auto;border:1px solid currentColor;display:flex;align-items:center;justify-content:center}
.tb-pre.on{background:var(--honey);color:var(--honey-ink)}
.tb-pre.lock,.tb-pre.lock:hover{opacity:.35;pointer-events:none;background:var(--surface-3);color:var(--ink-1)}
.tb-pre.on .box{background:var(--honey-ink);border-color:var(--honey-ink);color:var(--honey)}
.tb-pre.on:hover{background:var(--sky);color:var(--black-1)}

/* raise builder: presets, amount, slider */
.tb-raise{display:flex;flex-direction:column;gap:10px;min-width:0}
.tb-raise-top{display:flex;align-items:center;gap:10px}
.tb-raise-top .lb{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.tb-amt{width:128px;height:36px;padding:0 10px;background:var(--surface-input);border:1px solid var(--rule);color:var(--honey);outline:0;
  font-family:var(--font-display);font-weight:800;font-size:17px;font-variant-numeric:tabular-nums;text-align:right}
.tb-amt:focus{border-color:var(--honey)}
.tb-presets{display:flex;gap:6px;flex-wrap:nowrap}
.tb-preset{flex:1 1 0;min-width:0;height:32px;padding:0 10px;border:0;background:var(--surface-3);color:var(--ink-1);
  font-family:var(--font-display);font-weight:700;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:var(--transition-control)}
.tb-preset:hover{background:var(--sky);color:var(--black-1)}
.tb-preset.on{background:var(--honey);color:var(--honey-ink)}
.tb-range{--p:0%;-webkit-appearance:none;appearance:none;width:100%;height:26px;margin:0;background:transparent;cursor:pointer}
.tb-range:focus{outline:none}
.tb-range:focus-visible{outline:var(--focus-ring);outline-offset:2px}
.tb-range::-webkit-slider-runnable-track{height:4px;background:linear-gradient(90deg,var(--honey) var(--p),var(--surface-3) var(--p))}
.tb-range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-8px;border-radius:50%;background:var(--honey);border:4px solid #0B0C0E;box-shadow:0 0 0 1px var(--honey)}
.tb-range::-moz-range-track{height:4px;background:var(--surface-3)}
.tb-range::-moz-range-progress{height:4px;background:var(--honey)}
.tb-range::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--honey);border:4px solid #0B0C0E;box-shadow:0 0 0 1px var(--honey)}

/* ---------- shared: side panel / sheet content ---------- */
.tb-badge{display:inline-block;min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:var(--honey);color:var(--honey-ink);font-family:var(--font-display);font-weight:800;font-size:10px;line-height:17px;text-align:center;letter-spacing:0}
.tb-chan{flex:0 0 auto;display:flex;align-items:center;gap:4px;padding:10px 12px;border-bottom:1px solid var(--rule-soft)}
.tb-chan .ch{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:1px solid transparent;color:var(--ink-3);font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.tb-chan .ch:hover{color:var(--ink-1)}
.tb-chan .ch.on{background:var(--surface-3);color:var(--ink-1)}
.tb-chan .sp{flex:1}
.tb-ic{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;color:var(--ink-3);cursor:pointer}
.tb-ic:hover{color:var(--ink-1)}
.tb-ic.on{color:var(--red-text)}
.tb-chat-list{flex:1 1 auto;min-height:0;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.tb-msg{display:flex;flex-direction:column;gap:2px}
.tb-msg .who{display:flex;align-items:center;gap:4px;font-family:var(--font-display);font-weight:800;font-size:12.5px;color:var(--honey)}
.tb-msg .who .tb-ic,.gd-msg .who .tb-ic{width:20px;height:20px;opacity:0;transition:opacity var(--duration-fast) var(--ease)}
.tb-msg:hover .who .tb-ic,.tb-msg .who .tb-ic:focus-visible,.gd-msg:hover .who .tb-ic,.gd-msg .who .tb-ic:focus-visible{opacity:.8}
@media (hover:none){ .tb-msg .who .tb-ic,.gd-msg .who .tb-ic{opacity:.5} }
.tb-msg.you .who{color:var(--coral-text)}
.tb-msg .body{font-family:var(--font-ui);font-size:14.5px;line-height:1.4;color:var(--ink-1)}
.tb-muted-note{padding:4px 0;font-size:12px;color:var(--ink-3);text-align:center}
.tb-compose{flex:0 0 auto;display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--rule)}
.tb-compose input{flex:1;min-width:0;height:40px;padding:0 12px;background:var(--surface-input);border:1px solid var(--rule);outline:0;color:var(--ink-1);font-family:var(--font-ui);font-size:16px}
.tb-compose input:focus{border-color:var(--coral)}
/* One line that grows to three as you type (script sets the height). */
.tb-compose textarea{flex:1;min-width:0;height:40px;max-height:80px;box-sizing:border-box;padding:10px 12px;resize:none;overflow-y:hidden;background:var(--surface-input);border:1px solid var(--rule);outline:0;color:var(--ink-1);font-family:var(--font-ui);font-size:16px;line-height:20px}
.tb-compose textarea:focus{border-color:var(--coral)}
/* Replies and reactions (wenpoker/chat.js). Double-tap must not zoom the page. */
.wpc-msg{-webkit-touch-callout:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media (pointer:coarse){ .wpc-msg{-webkit-user-select:none;user-select:none} }
.wpc-badge{display:inline-flex;align-items:center;margin-left:4px;padding:3px 6px;border-radius:3px;font:800 9px/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;background:var(--surface-3);color:var(--ink-1)}
.wp-red-dot{display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--red);vertical-align:1px;animation:wp-alert-pulse 1.6s ease-in-out infinite}
/* Host: a solid indigo pill (a theme can set --host-badge to recolour it) */
.wpc-badge-host{background:var(--host-badge,#3D4FC7);color:#fff}
/* Spectators: a small blue dot before a dimmed name, explained by the key. */
.wpc-spec-dot{display:inline-block;flex:0 0 auto;width:7px;height:7px;margin-right:2px;border-radius:50%;background:var(--spec,#22AEFF);box-shadow:0 0 0 2px color-mix(in srgb,var(--spec,#22AEFF) 22%,transparent)}
.wpc-msg.wpc-spec .who{color:var(--ink-3)!important}
.wpc-key{position:sticky;top:-14px;z-index:1;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin:-6px 0 -4px;padding:4px 9px;border:1px solid var(--rule);border-radius:999px;background:var(--surface-2);font:700 10px/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.wpc-key .wpc-spec-dot{margin:0}
.wpc-quote{display:block;margin:1px 0 2px;padding:2px 8px;border-left:2px solid var(--rule);font-family:var(--font-ui);font-size:12px;line-height:1.35;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wpc-quote b{font-weight:700;color:var(--ink-2)}
.wpc-reacts{display:flex;flex-wrap:wrap;gap:4px}
.wpc-reacts:empty{display:none}
.wpc-reacts{margin-top:2px}
.wpc-chip{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border:1px solid var(--rule);border-radius:12px;background:var(--surface-3);color:var(--ink-2);font:700 12px/1 var(--font-ui);cursor:pointer}
.wpc-chip:hover{border-color:var(--ink-3)}
.wpc-chip.mine{border-color:var(--coral);color:var(--ink-1);background:color-mix(in srgb,var(--coral) 16%,var(--surface-3))}
.wpc-chip b{font-weight:700;font-variant-numeric:tabular-nums}
.wpc-replybar{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:6px 12px;border-top:1px solid var(--rule-soft);background:var(--surface-2,var(--surface-3));font-family:var(--font-ui);font-size:12.5px;color:var(--ink-2)}
.wpc-rb-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wpc-rb-text b{font-weight:700;color:var(--ink-1)}
.wpc-rb-text i{font-style:normal;color:var(--ink-3)}
.wpc-rb-x{flex:0 0 auto;width:28px;height:28px;border:0;background:transparent;color:var(--ink-2);font-size:20px;line-height:1;cursor:pointer}
.wpc-rb-x:hover{color:var(--ink-1)}
.wpc-picker{position:fixed;z-index:100000;display:flex;gap:2px;padding:4px;background:var(--surface-3);border:1px solid var(--rule);box-shadow:0 12px 32px rgba(0,0,0,.55);-webkit-touch-callout:none}
.wpc-picker button{width:42px;height:42px;border:0;border-radius:8px;background:transparent;font-size:24px;line-height:1;cursor:pointer}
.wpc-picker button:hover,.wpc-picker button:focus-visible{background:var(--surface-1)}
.wpc-picker button.on{background:color-mix(in srgb,var(--coral) 22%,transparent)}
.tb-send{flex:0 0 auto;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--coral);color:var(--black-1);cursor:pointer}
.tb-voice{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--rule-soft);font-family:var(--font-display);font-weight:600;font-size:12.5px;color:var(--ink-2)}
.tb-voice .dot{width:6px;height:6px;border-radius:50%;background:var(--green)}
.tb-voice .grow{flex:1}
.tb-mini{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:0;background:var(--surface-3);color:var(--ink-1);font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.tb-mini:hover{background:var(--sky);color:var(--black-1)}
.tb-mini.live{background:var(--green);color:var(--green-ink)}
.tb-scroll{flex:1;min-height:0;overflow:auto}
.tb-row{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--rule-soft)}
.tb-row .rk{width:22px;font-family:var(--font-display);font-weight:700;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.tb-row .nm{flex:1;min-width:0;font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--ink-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-row .lbl{flex:1;min-width:0;font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.tb-row .vl{font-family:var(--font-display);font-weight:800;font-size:13.5px;font-variant-numeric:tabular-nums;color:var(--ink-1);white-space:nowrap}
.tb-row .vl.honey{color:var(--honey)}
.tb-row .sub{font-size:12px;color:var(--ink-3);font-family:var(--font-ui)}
.tb-row.you{background:var(--surface-2)}
.tb-row.you .nm{color:var(--coral-text)}
.tb-head{padding:18px 16px 14px;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:4px}
.tb-head .lb{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.tb-head .big{font-family:var(--font-display);font-weight:800;font-size:28px;font-variant-numeric:tabular-nums;color:var(--honey)}
.tb-sub{padding:16px 16px 6px;font-family:var(--font-display);font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.tb-note{margin:0;padding:12px 16px;font-size:13px;line-height:1.5;color:var(--ink-3)}
.tb-note a{color:var(--ink-2);text-underline-offset:2px}
.tb-fair{margin:4px 12px 10px;padding:12px 14px;border:1px solid var(--rule);background:var(--surface-2,#242429)}
.tb-fair .lbl{font:800 10.5px/1 var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.tb-fair code{display:block;margin:6px 0;font:600 12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--honey);word-break:break-all}
.tb-fair .d{font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.tb-countdown{position:absolute;pointer-events:none;z-index:30;left:50%;top:44%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 34px 16px;background:#0A0B0D;border:1px solid var(--honey);box-shadow:0 18px 50px rgba(0,0,0,.55);pointer-events:none}
.tb-countdown .k,.tb-countdown .s{font:800 12px/1 WP Display,Poppins,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.tb-countdown .s{color:var(--ink-3)}
.tb-countdown .n{font:900 72px/1 WP Display,Poppins,sans-serif;color:var(--honey);font-variant-numeric:tabular-nums;animation:cd-pop .5s cubic-bezier(.2,.9,.3,1.3)}
@keyframes cd-pop{from{transform:scale(1.4);opacity:.3}to{transform:scale(1);opacity:1}}
@media (max-width:760px){ .tb-countdown{padding:12px 24px 10px} .tb-countdown .n{font-size:54px} }
.tb-row.out .vl{font-size:11.5px;color:var(--ink-3)}
.tb-verify-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 12px 8px;padding:12px 14px;border:1px solid var(--rule);cursor:pointer;transition:var(--transition-control)}
.tb-verify-row:hover{border-color:var(--ink-3)}
.tb-verify-row .t{display:block;font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--ink-1)}
.tb-verify-row .d{display:block;margin-top:2px;font-size:12.5px;color:var(--ink-3)}
.tb-verify-row .go{flex:0 0 auto;font-family:var(--font-display);font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}

/* ---------- shared: header buttons ---------- */
.tb-hbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 13px;border:0;background:var(--surface-3);color:var(--ink-1);
  font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:var(--transition-control)}
.tb-hbtn:hover{background:var(--sky);color:var(--black-1)}
.tb-hbtn.off{color:var(--ink-2)}
.tb-hbtn.danger:hover{background:var(--red);color:var(--red-ink)}
.tb-hbtn.honey{background:var(--honey);color:var(--honey-ink);text-decoration:none;font-weight:800}
.tb-hbtn.honey:hover{background:var(--honey-press)}
.tb-hbtn svg{flex:0 0 auto}

/* ---------- shared: settings drawer (desktop) / sheet (mobile) ---------- */
.tb-scrim{position:absolute;inset:0;z-index:50;background:transparent}
.tb-drawer{position:absolute;z-index:51;top:0;right:0;bottom:0;width:392px;max-width:100%;display:flex;flex-direction:column;background:#121417;border-left:1px solid var(--rule);box-shadow:var(--shadow-overlay)}
.tb-drawer.enter{animation:tb-slide-in .24s var(--ease) both}
.tb-drawer.sheet{top:auto;left:0;width:auto;max-height:62%;box-shadow:0 -20px 50px rgba(0,0,0,.6);border-left:0;border-top:1px solid var(--rule)}
.tb-drawer.sheet.enter{animation:tb-slide-up .24s var(--ease) both}
@keyframes tb-slide-in{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes tb-slide-up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.tb-drawer-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 14px 20px;border-bottom:1px solid var(--rule)}
.tb-drawer-head h2{margin:0;font-family:var(--font-display);font-weight:800;font-size:17px;letter-spacing:.01em;color:var(--ink-1)}
.tb-close{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:var(--surface-3);color:var(--ink-1);cursor:pointer}
.tb-close:hover{background:var(--sky);color:var(--black-1)}
.tb-drawer-body{flex:1;min-height:0;overflow:auto;padding:4px 0 24px;overscroll-behavior:contain}
.tb-sec{padding:18px 20px 4px}
.tb-sec h3{margin:0 0 6px;font-family:var(--font-display);font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.tb-set{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:8px 0;border-bottom:1px solid var(--rule-soft);cursor:pointer}
.tb-set:last-child{border-bottom:0}
.tb-set .t{display:block;font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--ink-1)}
.tb-set .d{display:block;margin-top:2px;font-family:var(--font-ui);font-size:12.5px;line-height:1.35;color:var(--ink-3)}
.tb-set.block{display:block;cursor:default}
.tb-set.block .t{margin-bottom:10px}
.tb-switch{position:relative;flex:0 0 auto;width:42px;height:24px;background:var(--surface-3);border:1px solid var(--rule);transition:var(--transition-control)}
.tb-switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;background:var(--ink-2);transition:left var(--duration-fast) var(--ease),background-color var(--duration-fast) var(--ease)}
.tb-switch.on{background:var(--sage);border-color:var(--sage)}
.tb-switch.on::after{left:21px;background:var(--sage-ink)}
.tb-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--rule);background:var(--surface-input)}
.tb-seg button{height:38px;padding:0 8px;color:var(--ink-3);font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.04em;cursor:pointer;transition:var(--transition-control);white-space:nowrap}
.tb-seg button:hover{color:var(--ink-1)}
.tb-seg button.on{background:var(--surface-3);color:var(--ink-1);box-shadow:inset 0 -2px 0 var(--coral)}
.tb-deck-prev{display:flex;gap:6px;margin-top:12px;padding:12px;background:#0C0D0F;border:1px solid var(--rule-soft)}
.tb-swatches{display:flex;gap:10px;flex-wrap:wrap}
.tb-sw{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.04em;color:var(--ink-3)}
.tb-sw i{display:block;width:54px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.12);box-shadow:0 0 0 3px #0E0F11}
.tb-sw.on{color:var(--ink-1)}
.tb-sw.on i{box-shadow:0 0 0 3px #0E0F11,0 0 0 5px var(--ink-1)}
/* Five felts on one row */
.tb-swatches.felts{flex-wrap:nowrap;gap:6px}
.tb-swatches.felts .tb-sw{flex:1 1 0;min-width:0;padding:6px 0}
.tb-swatches.felts .tb-sw i{width:100%;max-width:54px;height:32px}
.tb-leave{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;margin-top:14px;background:var(--surface-3);color:var(--red-text);
  font-family:var(--font-display);font-weight:800;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:var(--transition-control)}
.tb-leave:hover{background:var(--red);color:var(--red-ink)}
.tb-keys{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;align-items:center;font-family:var(--font-ui);font-size:13.5px;color:var(--ink-2)}
.tb-keys kbd{justify-self:start;min-width:26px;padding:4px 7px;border:1px solid var(--rule);background:var(--surface-2);font-family:var(--font-display);font-weight:800;font-size:11px;color:var(--ink-1);text-align:center}
.tb-foot{padding:18px 20px 0;font-size:12.5px;color:var(--ink-3)}

/* confirm dialog (leave table) */
.tb-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(5,6,8,.72);animation:tb-fade .15s var(--ease) both}
.tb-modal-card{width:420px;max-width:100%;padding:26px;background:#1B1B1F;border:1px solid var(--rule);box-shadow:var(--shadow-overlay)}
.tb-modal-card h2{margin:0 0 8px;font-family:var(--font-display);font-weight:800;font-size:21px;color:var(--ink-1)}
.tb-modal-card p{margin:0 0 22px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.tb-modal-btns{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
/* Joining a poker room (pages-live.js): the form and the floating reminder. */
.wpr-form{width:480px;max-height:calc(100vh - 32px);overflow:auto}
.wpr-form p{margin:0 0 16px!important}
.wpr-f{display:block;margin:0 0 12px}
.wpr-f span,.wpr-me span,.wpr-rules>span{display:block;margin-bottom:6px;font:800 10.5px/1 var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.wpr-f span i{font-style:normal;letter-spacing:0;text-transform:none;font-weight:600}
.wpr-f input{width:100%;height:44px;padding:0 12px;background:var(--surface-input);border:1px solid var(--rule);color:var(--ink-1);font:600 16px var(--font-ui);outline:0}
.wpr-f input:focus{border-color:var(--coral)}
.wpr-me{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 14px;padding:10px 12px;border:1px solid var(--rule);background:var(--surface-2)}
.wpr-me b{display:block;font-size:14px;color:var(--ink-1);overflow-wrap:anywhere}
.wpr-rules{margin:0 0 12px}
.wpr-rules ol{margin:0;padding:10px 12px 10px 32px;border:1px solid var(--rule);background:var(--surface-2);color:var(--ink-2);font-size:14px;line-height:1.5}
.wpr-agree{display:flex;gap:10px;align-items:flex-start;margin:0 0 10px;font-size:14px;color:var(--ink-1);cursor:pointer}
.wpr-agree input{margin-top:3px;width:16px;height:16px;accent-color:var(--coral)}
.wpr-note{font-size:12.5px!important;color:var(--ink-3)!important}
.wpr-strip{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:900;display:flex;align-items:center;gap:12px;max-width:calc(100% - 24px);padding:10px 10px 10px 16px;background:var(--surface-1);border:1px solid var(--rule);box-shadow:var(--shadow-overlay);font-size:14px;color:var(--ink-1)}
.wpr-strip .btn{flex:0 0 auto}
@media (max-width:560px){ .wpr-strip{left:12px;right:12px;transform:none;bottom:12px} .wpr-me{grid-template-columns:1fr} }
.tb-modal-btns .tb-act{height:46px;min-width:0;font-size:13px}

/* ================= DESKTOP ================= */
.gd-root{position:relative;height:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:60px minmax(0,1fr);overflow:hidden;
  background:var(--backdrop);color:var(--ink-1);font-family:var(--font-ui)}
.td-header{grid-column:1/-1;display:flex;align-items:center;gap:18px;min-width:0;padding:0 14px 0 20px;background:#090A0C;border-bottom:1px solid var(--rule)}
.td-brand{flex:0 0 auto;display:block;line-height:0}
.td-brand img{height:32px;display:block}
.td-title{flex:0 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;padding-left:18px;border-left:1px solid var(--rule)}
.td-title .t{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--ink-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.td-title .s{font-family:var(--font-display);font-weight:700;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.td-stats{flex:1 1 auto;min-width:0;display:flex;justify-content:center;overflow:hidden}
.td-stat{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:0 16px;border-left:1px solid var(--rule-soft);white-space:nowrap}
.td-stat:first-child{border-left:0}
.td-stat .lb{font-family:var(--font-display);font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.td-stat .vl{font-family:var(--font-display);font-weight:800;font-size:15px;font-variant-numeric:tabular-nums;color:var(--ink-1)}
.td-stat .vl.honey{color:var(--honey)}
.td-stat .vl small{font-size:12px;color:var(--ink-3);font-weight:700}
.td-actions{flex:0 0 auto;display:flex;align-items:center;gap:8px}
@media (max-width:1360px){ .td-stat.opt{display:none} .td-stat{padding:0 12px} }
@media (max-width:1180px){ .td-hide-sm{display:none} .td-hbtn-lbl{display:none} .tb-hbtn.keep .td-hbtn-lbl{display:inline} .td-title .s{display:none} }

.td-main{grid-column:1;grid-row:2;display:flex;flex-direction:column;min-width:0;min-height:0}
.td-stage-host{position:relative;flex:1;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.td-center{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:24px;pointer-events:none}
.td-center-card{pointer-events:auto;max-width:520px;padding:24px 28px;background:#0C0D0F;border:1px solid var(--rule);box-shadow:var(--shadow-overlay);text-align:center}
.td-center-card p{margin:0;font:800 18px/1.35 WP Display,Poppins,sans-serif;color:var(--ink-1)}
.td-center-btns{margin-top:18px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.td-stage{position:relative;width:1100px;height:640px;flex:0 0 auto;transform-origin:center center}
.td-stage .tb-felt{left:10%;right:10%;top:14%;bottom:13%}
.td-stage .tb-wm{top:25.5%;width:230px;opacity:.16}
.td-reopen{position:absolute;top:16px;right:0;z-index:6;display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;background:var(--surface-1);border:1px solid var(--rule);border-right:0;color:var(--ink-2);
  font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.07em;text-transform:uppercase;cursor:pointer}
.td-reopen:hover{color:var(--ink-1)}

.td-dock{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:22px;min-height:88px;padding:16px 22px 16px 40px;background:rgba(12,13,15,.95);border-top:1px solid var(--rule)}
.td-dock-left{display:flex;align-items:center;gap:14px;min-width:0;flex:1 1 auto}
.td-dock-left .tb-raise{flex:1 1 auto;max-width:560px}
.td-dock-btns{margin-left:auto;flex:0 0 auto;display:flex;align-items:center;gap:10px}
.td-pop{position:absolute;top:8px;left:8px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--ink-3);cursor:pointer;opacity:.7}
.td-pop:hover{opacity:1;color:var(--ink-1)}
.td-dock.floating{position:fixed;z-index:40;right:24px;bottom:24px;width:820px;max-width:calc(100vw - 48px);padding-top:40px;border:1px solid var(--rule);box-shadow:var(--shadow-overlay);touch-action:none}
.td-dock-handle{position:absolute;top:0;left:0;right:0;height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 8px;background:var(--surface-2);border-bottom:1px solid var(--rule);cursor:grab;-webkit-user-select:none;user-select:none}
.td-dock-handle:active{cursor:grabbing}
.td-dock-handle .grip{display:flex;align-items:center;gap:8px;color:var(--ink-3);font-family:var(--font-display);font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.td-dock-handle button{display:flex;align-items:center;gap:6px;height:22px;padding:0 10px;border:1px solid var(--rule);color:var(--ink-1);font-family:var(--font-display);font-weight:700;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}

.td-panel{grid-column:2;grid-row:2;width:328px;display:flex;flex-direction:column;min-height:0;background:#111316;border-left:1px solid var(--rule)}
.td-panel.collapsed{display:none}
.td-panel .gd-panel-top{flex:0 0 auto;border-bottom:1px solid var(--rule)}
.td-tabs{flex:0 0 auto;display:flex;align-items:stretch;background:var(--surface-1);border-bottom:1px solid var(--rule)}
.td-tab{position:relative;flex:1 1 auto;height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 6px;color:var(--ink-3);
  font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:var(--transition-control)}
.td-tab:hover{color:var(--ink-1)}
.td-tab.on{color:var(--ink-1)}
.td-tab.on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--coral)}
.td-collapse{flex:0 0 40px;display:flex;align-items:center;justify-content:center;border-left:1px solid var(--rule);color:var(--ink-3);cursor:pointer}
.td-collapse:hover{color:var(--ink-1)}
#dPanelBody{flex:1;min-height:0;display:flex;flex-direction:column}
.td-settings-host{position:absolute;inset:60px 0 0 0;z-index:50;pointer-events:none}
.td-settings-host>*{pointer-events:auto}

/* mandy.gg micro banner, delivered by Claude Design. Do not restyle,
   this is the exact handoff markup/tokens (see wenpoker_mandyggad.zip). */
.mgg-ad{position:relative;display:block;width:100%;height:38px;box-sizing:border-box;background:#0B0C0E;overflow:hidden;font-family:WP Display,Poppins,system-ui,sans-serif;text-decoration:none}
.mgg-ad__frame{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;opacity:0;animation:mgg-slot 7.5s cubic-bezier(.2,0,.2,1) infinite both}
.mgg-ad__frame--a{animation-delay:0s}
.mgg-ad__frame--b{animation-delay:3.75s}
.mgg-ad__line{font:900 13px/1 WP Display,Poppins,sans-serif;letter-spacing:.1em;color:#E5E5E5}
.mgg-ad__logo{display:block;height:22px;width:auto}
.mgg-ad__div{width:1px;height:18px;background:#333842}
.mgg-ad__cta{font:900 10px/1 WP Display,Poppins,sans-serif;letter-spacing:.14em;color:#C9A227}
.mgg-ad__sweep{position:absolute;left:0;bottom:0;height:1px;width:64px;background:#C9A227;animation:mgg-sweep 7.5s linear infinite}
@keyframes mgg-slot{0%{opacity:0;transform:translateY(3px)}5%{opacity:1;transform:none}38%{opacity:1;transform:none}44%{opacity:0;transform:translateY(-3px)}100%{opacity:0;transform:translateY(-3px)}}
@keyframes mgg-sweep{0%{transform:translateX(-64px)}100%{transform:translateX(308px)}}
@media (prefers-reduced-motion:reduce){
  .mgg-ad__frame,.mgg-ad__sweep{animation:none}
  .mgg-ad__frame--a{opacity:0}
  .mgg-ad__frame--b{opacity:1}
  .mgg-ad__sweep{display:none}
}

/* ---- shared panel primitives still used by the waiting room / lobby ---- */
.gd-panel{width:308px;flex:0 0 308px;display:flex;flex-direction:column;min-height:0;background:var(--surface-1);border-left:1px solid var(--rule)}
.gd-chat-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);padding:var(--space-5);border-bottom:1px solid var(--rule)}
.gd-chat-list{flex:1 1 auto;overflow:auto;min-height:140px;padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-5)}
.gd-msg{display:flex;flex-direction:column;gap:2px}
.gd-msg .who{font-family:"WP Display",var(--font-ui);font-weight:var(--weight-bold);font-size:var(--size-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:var(--space-3)}
.gd-msg .who{color:var(--honey)}
.gd-msg:is(.you,.mine) .who{color:var(--coral-text)}
.gd-msg .body{font-family:var(--font-ui);font-size:var(--size-sm);line-height:1.45;color:var(--ink-1)}
.gd-msg .who .tb-ic{color:var(--ink-3)}
.gd-input-row{padding:var(--space-5);border-top:1px solid var(--rule)}
.gd-input{display:flex;align-items:center;height:var(--control-h-md);padding:0 var(--space-5);background:var(--surface-input);border:1px solid var(--rule);transition:var(--transition-control)}
.gd-input:focus-within{border-color:var(--coral);outline:none}
.gd-input input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--ink-1);font-family:var(--font-ui);font-size:var(--size-md)}
.gd-input.multi{height:auto;min-height:var(--control-h-md);padding-top:0;padding-bottom:0}
.gd-input textarea{flex:1;min-width:0;height:22px;max-height:80px;margin:8px 0;padding:0;resize:none;overflow-y:hidden;background:transparent;border:0;outline:0;color:var(--ink-1);font-family:var(--font-ui);font-size:var(--size-md);line-height:20px}
/* 16px so iPhones don't zoom in when you tap the chat box. */
@media (max-width:760px){ .gd-input input,.gd-input textarea{font-size:16px} }
.gm-send-btn{flex:0 0 auto;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--coral);color:var(--black-1);border:0;cursor:pointer}
.seg{display:inline-grid;grid-auto-flow:column;border:1px solid var(--rule);background:var(--surface-input)}
.seg-btn{height:var(--control-h-sm);padding:0 var(--space-6);background:transparent;color:var(--ink-3);border:0;cursor:pointer;font-family:var(--font-ui);font-weight:var(--weight-semibold);font-size:var(--size-xs);letter-spacing:var(--tracking-wide);transition:var(--transition-control)}
.seg-btn.on{background:var(--indigo);color:var(--indigo-ink)}
#lgSeg .seg-btn.on{box-shadow:inset 0 -3px 0 var(--coral)}
.switch{position:relative;width:40px;height:20px;background:var(--surface-3);border:1px solid var(--rule);cursor:pointer;transition:var(--transition-control)}
.switch.on{background:var(--sage);border-color:var(--sage)}
.switch .knob{position:absolute;top:1px;left:1px;width:16px;height:16px;background:var(--ink-2);transition:left var(--duration-fast) var(--ease),background-color var(--duration-fast) var(--ease)}
.switch.on .knob{left:21px;background:var(--sage-ink)}

/* ================= MOBILE ================= */
.gm-root{position:relative;height:100vh;height:100dvh;width:100%;max-width:560px;margin:0 auto;display:flex;flex-direction:column;overflow:hidden;background:var(--bg);color:var(--ink-1);font-family:var(--font-ui)}
#mDynMain{display:contents}
.tm-top{position:absolute;z-index:7;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:max(10px,env(safe-area-inset-top)) 12px 0;pointer-events:none}
.tm-top>*{pointer-events:auto}
.tm-round{flex:0 0 auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--surface-3);color:var(--ink-1);cursor:pointer}
.tm-pill{display:inline-flex;align-items:center;gap:9px;min-width:0;height:36px;padding:0 14px;background:#0E0F12;border:1px solid var(--rule);color:var(--ink-1);
  font-family:var(--font-display);font-weight:800;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;cursor:pointer;}
.tm-pill .t{overflow:hidden;text-overflow:ellipsis}
.tm-pill .sep{width:3px;height:3px;border-radius:50%;background:var(--ink-3);flex:0 0 auto}
.tm-pill .honey{color:var(--honey)}
.tm-area{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.tm-ring{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:var(--backdrop)}
.tm-ring .tb-felt{left:20%;right:20%;top:11%;bottom:14%;border-radius:999px;box-shadow:0 0 0 8px #0E0F11,0 0 0 10px #050506,0 24px 60px rgba(0,0,0,.6),inset 0 0 44px rgba(0,0,0,.5)}
.tm-ring .tb-wm{top:58%;width:84px;opacity:.12}
.tm-ring .tb-board{gap:3px}
.tm-ring .tb-board .card{--cw:30px}
.tm-ring .tb-pot{padding:3px 9px;gap:6px;background:color-mix(in srgb,var(--felt-c,#1F5E36) 50%,#050506)}
.tm-ring .tb-pot .lb{font-size:10px}
.tm-ring .tb-pot .vl{font-size:17px}
.pod.m{width:72px}
.pod.m.hero{width:118px}
.pod.m.hero .card{--cw:44px}
.pod.m .pod-cards{margin-bottom:-4px}
.pod.m:not(.hero) .pod-cards.fan .card{--cw:30px;box-shadow:0 0 0 1px rgba(0,0,0,.45),0 3px 8px rgba(0,0,0,.5)}
.pod.m:not(.hero) .pod-cards:not(.fan) .card{--cw:32px}
.pod.m.folded{filter:brightness(.38) saturate(.6)}
.pod.m.hero .pod-cards{gap:6px;margin-bottom:6px}
.pod.m .pod-cards.fan .card:first-child{transform:rotate(-5deg) translateX(3px)}
.pod.m .pod-cards.fan .card:last-child{transform:rotate(5deg) translateX(-3px)}
.pod.m .pod-plate{padding:6px 5px 8px}
.pod.m .pod-name{font-size:10.5px;gap:3px}
/* Phones: the bounty tag sits on the plate's top edge so the name keeps its room. */
.pod.m .pod-bounty{position:absolute;z-index:3;top:-7px;left:50%;transform:translateX(-50%);padding:1px 4px;font-size:8px;pointer-events:none}
.pod.m .pod-stack{font-size:12px}
.pod.m.hero .pod-name{font-size:12px}
.pod.m.hero .pod-stack{font-size:14.5px}
.pod.m .pod-hand{font-size:9.5px}
.pod.m .pod-voice{width:5px;height:5px}
.pod.m .pod-dealer{width:18px;height:18px;font-size:9.5px;top:-8px;right:-8px}
.pod-dealer.left{right:auto;left:-10px}
.pod.m .pod-dealer.left{right:auto;left:-8px}
.pod.m .pod-tag{height:17px;margin-top:-8px;padding:0 6px 0 5px;gap:4px;font-size:9.5px;letter-spacing:.06em}
.pod.m .pod-tag::before{width:5px;height:5px}
.pod-clock{position:absolute;z-index:4;top:-11px;right:-18px;min-width:26px;height:24px;padding:0 6px;display:flex;align-items:center;justify-content:center;background:var(--ink-1);color:var(--black-1);
  font-family:var(--font-display);font-weight:900;font-size:13px;font-variant-numeric:tabular-nums;box-shadow:0 4px 10px rgba(0,0,0,.5)}
.pod-clock.urgent{background:var(--red);color:var(--red-ink)}
.tb-bet.m{gap:4px;padding:0;background:none;border:0;font-size:12.5px;text-shadow:0 1px 3px rgba(0,0,0,.8)}
@media (max-width:360px){ .tm-ring .tb-board .card{--cw:27px} .pod.m{width:66px} .pod.m:not(.hero) .pod-cards.fan .card{--cw:27px} .pod.m:not(.hero) .pod-cards:not(.fan) .card{--cw:29px} }
/* short phones: opponents drop their card backs (folded seats already dim) */
/* Short phones: smaller cards instead of hiding who's still in the hand. */
@media (max-height:720px){ .pod.m:not(.hero) .pod-cards.fan .card{--cw:25px} .pod.m:not(.hero) .pod-cards:not(.fan) .card{--cw:28px} .pod.m.hero .card{--cw:40px} .tm-ring .tb-anchor.edge-top{margin-top:20px} }

.tm-fab{position:absolute;z-index:5;bottom:12px;width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:var(--surface-3);color:var(--ink-1);cursor:pointer}
.tm-fab:hover,.tm-round:hover{background:var(--sky);color:var(--black-1)}
.tm-fab.left{left:14px}
.tm-fab.right{right:14px}
.tm-fab .tb-badge{position:absolute;top:-4px;right:-4px}

.tm-dock{position:relative;z-index:8;flex:0 0 auto;display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:8px;padding:8px 10px max(10px,env(safe-area-inset-bottom));background:var(--black-1);border-top:1px solid var(--rule)}
.tm-dock .tb-act{height:56px;min-width:0;padding:0 6px;font-size:15px;letter-spacing:.04em}
.tm-dock.two{grid-template-columns:1fr 1fr}
.tm-dock.three{grid-template-columns:repeat(3,1fr)}
.tm-dock.four{grid-template-columns:repeat(4,1fr)}
.tm-dock.five{grid-template-columns:repeat(5,1fr)}
.tm-dock.four .tb-pre,.tm-dock.five .tb-pre{height:46px;padding:0 4px;font-size:10.5px;justify-content:center;text-align:center}
.tm-dock .tb-pre{height:56px;min-width:0;padding:0 8px;gap:8px;font-size:11.5px;letter-spacing:.03em;white-space:normal;text-align:left;line-height:1.15}
.tm-raise{position:absolute;left:0;right:0;bottom:0;z-index:9;display:flex;flex-direction:column;gap:12px;padding:14px 12px max(10px,env(safe-area-inset-bottom));background:#111316;border-top:1px solid var(--rule);box-shadow:0 -18px 36px rgba(0,0,0,.55)}
.tm-raise.enter{animation:tb-slide-up .2s var(--ease) both}
.tm-raise .tb-raise-top{justify-content:space-between}
.tm-raise .tb-amt{flex:1;max-width:170px;height:44px;font-size:19px}
.tm-raise .step{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--surface-3);color:var(--ink-1);font-family:var(--font-display);font-weight:800;font-size:18px;cursor:pointer}
.tm-raise .tb-presets{display:grid;grid-template-columns:repeat(5,1fr)}
.tm-raise .tb-preset{height:40px;padding:0 2px;font-size:11.5px}
.tm-raise .tb-range{height:36px}
.tm-raise .btns{display:grid;grid-template-columns:1fr 2fr;gap:8px}
.tm-raise .btns .tb-act{height:56px;min-width:0;font-size:15px}

/* chat / standings / info / verify: one sheet with its own tabs, over
   the lower felt only, so the action buttons stay live underneath */
.tm-sheet{position:absolute;left:0;right:0;bottom:0;height:62%;z-index:6;display:flex;flex-direction:column;background:#121417;border-top:1px solid var(--rule);box-shadow:0 -18px 40px rgba(0,0,0,.55)}
.tm-sheet.enter{animation:tb-slide-up .22s var(--ease) both}
.tm-sheet-scrim{position:absolute;inset:0;z-index:6;background:rgba(0,0,0,.18)}
.tm-sheet-head{flex:0 0 auto;display:flex;align-items:stretch;gap:2px;height:50px;padding:0 6px 0 4px;border-bottom:1px solid var(--rule)}
.tm-stab{position:relative;flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 4px;color:var(--ink-3);
  font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;cursor:pointer}
.tm-stab.on{color:var(--ink-1)}
.tm-stab.on::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;background:var(--coral)}
.tm-sheet-head .tb-close{align-self:center;flex:0 0 auto;margin-left:4px}
.tm-sheet-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:auto}
.tm-overlay{position:absolute;inset:0;z-index:50}

/* left drawer behind the menu button */
.tm-menu{position:absolute;z-index:51;top:0;left:0;bottom:0;width:78%;max-width:320px;display:flex;flex-direction:column;background:#121417;border-right:1px solid var(--rule);box-shadow:20px 0 50px rgba(0,0,0,.6);padding-top:env(safe-area-inset-top)}
.tm-menu.enter{animation:tb-menu-in .22s var(--ease) both}
@keyframes tb-menu-in{from{transform:translateX(-24px);opacity:0}to{transform:none;opacity:1}}
.tm-menu-head{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 12px 18px;border-bottom:1px solid var(--rule)}
.tm-menu-head img{height:22px;display:block}
.tm-mi{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:0 18px;border-bottom:1px solid var(--rule-soft);color:var(--ink-1);text-decoration:none;
  font-family:var(--font-display);font-weight:700;font-size:15px;text-align:left;cursor:pointer}
.tm-mi:active{background:var(--surface-2)}
.tm-mi.danger{color:var(--red-text)}

/* ---------- Breakpoint ---------- */
@media (max-width:900px){
  .app-desktop{display:none}
  .app-mobile{display:flex;justify-content:center;background:var(--black-1)}
}
@media (min-width:901px){
  .app-mobile{display:none}
}

/* ===== host (wenpoker-tournament-host.html) ===== */
:root{
  --bg:#0B0C0E;
  --black-1:#07080A; --black-2:#101215;
  --surface-1:#1B1B1F; --surface-2:#242429; --surface-3:#2E2E34;
  --rule:#333842; --rule-soft:#33384280;
  --ink-1:#F4F6F8; --ink-2:#DFE3E8; --ink-3:#C9CED5;
  --surface-input:#07080A;

  --coral:#1D4E73; --coral-ink:#F6E9EA;
  --sky:#E5E5E5;
  --sage:#C7D1B8; --sage-ink:#141610;
  --honey:#C9A227; --honey-ink:#1A1508;
  --green:#587A3A; --green-ink:#F1F4E8;
  --red:#A32632; --red-ink:#F6E9EA;

  --font-display:"WP Display","Poppins","Helvetica Neue",Arial,sans-serif;
  --font-ui:"WP Body","Lexend","Helvetica Neue",Arial,sans-serif;
  --font-mono:"WP Display","Poppins","Helvetica Neue",Arial,sans-serif;

  --size-3xs:13px; --size-2xs:14px; --size-xs:14px; --size-sm:15px;
  --size-md:16px;  --size-lg:18px;  --size-xl:22px;  --size-2xl:28px; --size-3xl:36px;

  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-black:900;
  --leading-tight:1.05;
  --tracking-display:-0.02em; --tracking-wide:0.04em; --tracking-label:0.16em;

  --space-1:2px; --space-2:4px; --space-3:6px; --space-4:8px;
  --space-5:12px; --space-6:16px; --space-7:20px; --space-8:24px; --space-9:32px; --space-10:40px; --space-12:64px;
  --control-h-sm:28px; --control-h-md:36px; --control-h-lg:48px;

  --border-1:1px; --border-2:2px;
  --focus-ring:var(--border-2) solid var(--sky); --focus-offset:2px;
  --duration-fast:120ms; --ease:cubic-bezier(.2,0,0,1);
  --transition-control:background-color var(--duration-fast) var(--ease),color var(--duration-fast) var(--ease),border-color var(--duration-fast) var(--ease);
  --shadow-card:0 6px 14px rgba(0,0,0,.55);
  --shadow-overlay:0 28px 56px rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink-1);font-family:var(--font-ui);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;border-radius:0;background:none;border:0}
:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}

.label{font-family:var(--font-ui);font-weight:var(--weight-semibold);font-size:var(--size-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-3)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-4);
  border-radius:0;font-family:var(--font-display);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;cursor:pointer;white-space:nowrap;
  transition:var(--transition-control),transform var(--duration-fast) var(--ease),box-shadow var(--duration-fast) var(--ease);
  border:var(--border-1) solid transparent;}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-card)}
.btn:active{transform:none}
.btn.lg{height:var(--control-h-lg);padding:0 var(--space-9);font-size:var(--size-md)}
.btn.md{height:var(--control-h-md);padding:0 var(--space-7);font-size:var(--size-xs)}
.btn.sm{height:var(--control-h-sm);padding:0 var(--space-5);font-size:var(--size-2xs)}
.btn.green{background:var(--green);color:var(--green-ink)}
.btn.green:hover{background:color-mix(in srgb,var(--green) 88%,#fff)}
.btn.coral{background:var(--coral);color:var(--sky)}
.btn.coral:hover{background:color-mix(in srgb,var(--coral) 88%,#fff)}
.btn.steel{background:var(--surface-3);color:var(--ink-1)}
.btn.steel:hover{background:color-mix(in srgb,var(--surface-3) 88%,#fff)}
.btn.outline{background:transparent;color:var(--ink-2);border-color:var(--rule)}
.btn.outline:hover{color:var(--ink-1);border-color:var(--ink-3)}
.btn.honey{background:var(--honey);color:var(--honey-ink)}
.btn.honey:hover{background:color-mix(in srgb,var(--honey) 88%,#fff)}
.btn:disabled{opacity:.35;cursor:default;pointer-events:none}

.disclaimer{display:flex;gap:var(--space-4);padding:var(--space-5) var(--space-6);background:var(--surface-1);border:1px solid var(--coral);border-left:3px solid var(--coral)}
.disclaimer svg{flex:0 0 auto;color:var(--coral-text);margin-top:2px}
.disclaimer .txt{font-size:var(--size-sm);line-height:1.45;color:var(--ink-1)}
.disclaimer .txt b{color:var(--coral-text)}

/* This was targeting #app, an id that doesn't exist anywhere in the page
   (the create-flow's real container is #app-create) so this whole shell
   rule was silently dead: no height, no flex, nothing. That's the actual
   reason the quiz card floated tiny and uncentered in a huge black
   viewport, and why a tall card (Payouts) grew the raw page height and
   scrolled the header/footer away with it instead of scrolling just its
   own content. Retargeted to the real container, and switched to a fixed
   height + overflow:hidden shell (only .cr-main scrolls internally) so
   the header and footer stay pinned at the true top/bottom always. */
#app-create{height:100vh;display:flex;flex-direction:column;overflow:hidden}
.th-header{display:flex;align-items:center;gap:var(--space-7);height:56px;padding:0 var(--space-8);border-bottom:1px solid var(--rule);flex:0 0 auto}
.wp-banner{width:100%;flex:0 0 auto;overflow:hidden;background:url('/wenpoker/assets/suit-pattern-banner.webp') center/cover no-repeat;display:flex;align-items:center;justify-content:center;padding:clamp(24px,4vw,40px) var(--space-8);border-bottom:1px solid var(--rule)}
.wp-banner img{display:block;height:clamp(44px,5vw,72px);width:auto}
.th-header img{display:block}
.th-header .wordmark-line{font-family:var(--font-mono);font-size:var(--size-2xs);color:var(--ink-2);letter-spacing:.1em;text-transform:uppercase}
.th-header .close{margin-left:auto;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--size-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);cursor:pointer}
.th-header .close:hover{color:var(--ink-1)}

.th-main{flex:1;max-width:760px;width:100%;margin:0 auto;padding:var(--space-9) var(--space-8) var(--space-12);display:flex;flex-direction:column;gap:var(--space-8)}
.th-title{display:flex;flex-direction:column;gap:var(--space-3)}
.th-title h1{margin:0;font-family:var(--font-display);font-weight:var(--weight-black);letter-spacing:var(--tracking-display);font-size:var(--size-2xl);color:var(--ink-1)}
.th-stats{display:flex;gap:var(--space-9);flex-wrap:wrap}
.th-stat{display:flex;flex-direction:column;gap:2px}
.th-stat .lb{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:10px;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-3)}
.th-stat .vl{font-family:var(--font-mono);font-weight:var(--weight-bold);font-size:var(--size-lg);color:var(--ink-1)}
.th-stat .vl.honey{color:var(--honey)}

.th-bounty-banner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding:var(--space-5) var(--space-6);background:var(--surface-1);border:1px solid var(--honey);border-left:3px solid var(--honey)}
.th-bounty-banner .txt{font-size:var(--size-sm);line-height:1.45;color:var(--ink-1)}
.th-bounty-banner .txt b{color:var(--honey)}
.th-bounty-banner.done{border-color:var(--rule);border-left-color:var(--green)}

.th-players{border:1px solid var(--rule)}
.th-players-head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--rule)}
.th-players-head .t{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:10px;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-3)}
.th-player-row{display:flex;align-items:center;gap:var(--space-5);padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--rule-soft)}
.th-player-row:last-child{border-bottom:0}
.th-avatar{width:28px;height:28px;flex:0 0 auto;border-radius:50%;background:var(--surface-3);border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:10px;color:var(--ink-3)}
.th-player-row .nm{flex:1;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--size-sm);letter-spacing:.02em;text-transform:uppercase;color:var(--ink-1)}
.th-bullseye{flex:0 0 auto;color:var(--honey)}
.th-player-row .reg{font-family:var(--font-mono);font-size:11px;color:var(--ink-3)}

.th-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6)}

.th-summary{border:1px solid var(--rule);display:flex;flex-direction:column}
.th-summary-head{padding:var(--space-6);border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:var(--space-2)}
.th-summary-head .t{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--size-md);letter-spacing:.02em;text-transform:uppercase;color:var(--ink-1)}
.th-summary-head .d{font-size:var(--size-xs);color:var(--ink-3)}
.th-payout-row{display:flex;align-items:center;gap:var(--space-5);padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--rule-soft)}
.th-payout-row:last-child{border-bottom:0}
.th-payout-row .place{width:26px;font-family:var(--font-mono);font-size:var(--size-xs);color:var(--ink-3)}
.th-payout-row .nm{flex:1;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--size-sm);letter-spacing:.02em;text-transform:uppercase;color:var(--ink-1)}
.th-payout-row .amt{font-family:var(--font-mono);font-weight:var(--weight-bold);font-size:var(--size-sm);color:var(--honey)}
.th-payout-row .tag{padding:2px 7px;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:10px;letter-spacing:.08em;text-transform:uppercase;background:var(--surface-3);color:var(--ink-2)}
.th-payout-row .tag.bounty{background:var(--honey);color:var(--honey-ink)}
.th-summary-notes{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}
.th-summary-notes .note-block{padding:var(--space-5);background:var(--surface-input);border:1px solid var(--rule)}
.th-summary-notes .note-block p{margin:var(--space-2) 0 0;font-size:var(--size-sm);line-height:1.5;color:var(--ink-1);white-space:pre-wrap}
.th-summary-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding:var(--space-6);border-top:1px solid var(--rule)}
.th-summary-foot .sent{font-family:var(--font-mono);font-size:11px;color:var(--ink-3)}

.th-response-row{display:flex;justify-content:space-between;gap:var(--space-6);padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--rule-soft)}
.th-response-row:last-child{border-bottom:0}
.th-response-row .nm{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--size-xs);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-1);white-space:nowrap}
.th-response-row .resp{font-family:var(--font-mono);font-size:var(--size-xs);color:var(--ink-2);text-align:right;word-break:break-all}
.th-deletion-notice{display:flex;gap:var(--space-4);padding:var(--space-5) var(--space-6);background:var(--surface-2);border-left:3px solid var(--red)}
.th-deletion-notice span{font-size:var(--size-xs);line-height:1.5;color:var(--ink-2)}
.th-deletion-notice b{color:var(--red-text)}

.modal-scrim{position:fixed;inset:0;background:rgba(7,8,10,.78);display:flex;align-items:center;justify-content:center;padding:var(--space-6);z-index:20}
.modal-panel{width:100%;max-width:460px;max-height:80vh;background:var(--surface-1);border:1px solid var(--rule);box-shadow:var(--shadow-overlay);display:flex;flex-direction:column}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-6);border-bottom:1px solid var(--rule)}
.modal-head .t{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--size-md);letter-spacing:.02em;text-transform:uppercase;color:var(--ink-1)}
.modal-close{cursor:pointer;color:var(--ink-3);font-size:var(--size-lg);line-height:1}
.modal-close:hover{color:var(--ink-1)}
.modal-body{padding:var(--space-4) var(--space-6);overflow:auto;display:flex;flex-direction:column}
.modal-body .hint{padding:var(--space-4) 0;font-size:var(--size-xs);color:var(--ink-3)}
.modal-pick-row{display:flex;align-items:center;gap:var(--space-5);padding:var(--space-4) 0;border-bottom:1px solid var(--rule-soft);cursor:pointer}
.modal-pick-row:last-child{border-bottom:0}
.modal-pick-row .box{width:18px;height:18px;flex:0 0 auto;border:1px solid var(--rule);display:flex;align-items:center;justify-content:center}
.modal-pick-row.on .box{background:var(--honey);border-color:var(--honey);color:var(--honey-ink)}
.modal-pick-row .nm{flex:1;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--size-sm);letter-spacing:.02em;text-transform:uppercase;color:var(--ink-1)}
.modal-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-6);border-top:1px solid var(--rule)}
.modal-foot .count{font-family:var(--font-mono);font-size:var(--size-xs);color:var(--ink-3)}

.th-footer{display:flex;padding:var(--space-4) var(--space-8);border-top:1px solid var(--rule);flex:0 0 auto}
.th-footer span{font-family:var(--font-mono);font-size:11px;color:var(--ink-3)}
.th-footer span:last-child{margin-left:auto}

@media (max-width:640px){
  .th-header{padding:0 var(--space-5)}
  .th-main{padding:var(--space-7) var(--space-5) var(--space-10)}
  .th-bounty-banner{flex-direction:column;align-items:flex-start}
}


.wp-view{min-height:100vh}

/* ===== shared quick-start nav button + dropdown, filled into every
   [data-wp-quickstart] header slot by wpRenderQuickStart() ===== */
.wp-qs{position:relative;flex:0 0 auto}
.wp-qs-btn{display:inline-flex;align-items:center;gap:8px;height:var(--control-h-md,36px);padding:0 var(--space-7,20px);
  background:var(--honey);color:var(--honey-ink,#1A1508);border:0;cursor:pointer;
  font-family:var(--font-display,inherit);font-weight:800;font-size:var(--size-xs,12px);letter-spacing:.08em;text-transform:uppercase}
.wp-qs-btn:hover{background:color-mix(in srgb,var(--honey) 88%,#fff)}
.wp-qs-btn .car{transition:transform .12s ease}
.wp-qs.open .wp-qs-btn .car{transform:rotate(180deg)}
.wp-qs-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:40;width:220px;background:var(--surface-2);border:1px solid var(--rule);display:none;flex-direction:column}
.wp-qs.open .wp-qs-pop{display:flex}
.wp-qs-pop a{display:flex;flex-direction:column;gap:2px;padding:12px 16px;color:var(--ink-1);text-decoration:none;border-bottom:1px solid var(--rule)}
.wp-qs-pop a:last-child{border-bottom:0}
.wp-qs-pop a:hover{background:var(--surface-3)}
.wp-qs-pop a .t{font-family:var(--font-display,inherit);font-weight:800;font-size:13px;letter-spacing:.02em}
.wp-qs-pop a .d{font-size:12px;color:var(--ink-3)}

/* ===== shared felt page background (design system integration) ===== */
.wp-felt-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;background-color:#0E350F;background-image:linear-gradient(rgba(9,11,12,.66),rgba(9,11,12,.66)),url('/wenpoker/assets/felt-wide.webp');background-size:cover;background-position:center;background-repeat:no-repeat}
@media (max-width:640px){
  .wp-felt-bg{background-image:linear-gradient(rgba(9,11,12,.66),rgba(9,11,12,.66)),url('/wenpoker/assets/felt-square.webp')}
}
.wp-felt-page{position:relative;min-height:100vh;display:flex;flex-direction:column}
.wp-felt-page>*:not(.wp-felt-bg){position:relative;z-index:1}

/* dark plates behind text sitting over the felt background */
.sp-wrap{position:relative;background:#0B0C0E;padding-left:40px;padding-right:40px;margin-top:0}
.qg-wrap{position:relative;background:#0B0C0E;padding-left:var(--space-9,32px);padding-right:var(--space-9,32px)}
.th-main{position:relative;background:#0B0C0E;padding-left:var(--space-9,32px);padding-right:var(--space-9,32px)}
.lg-card{background:#0B0C0E}
.lg-main{position:relative}

/* homepage-style nav header reused on secondary pages */
.hp-header{position:sticky;top:0;z-index:2}


/* ===== Data tables (lobby, history, leaderboard) =====
   One table look for every list of tournaments or players: a near-black panel
   (the same dark as the nav bar), a quiet header row, one row per item. Rows are
   CSS grids so they restack into compact two-line rows on phones. Colours come
   from the theme variables, so themes recolour them. */
.wt{background:var(--black-2);border:1px solid var(--rule);min-width:0}
.wt-h,.wt-r{display:grid;grid-template-columns:var(--cols);column-gap:20px;align-items:center;padding:0 18px}
.wt-h{min-height:44px;background:var(--black-1);border-bottom:1px solid var(--rule);font:700 12.5px/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.wt-r{min-height:60px;border-top:1px solid var(--rule-soft);color:var(--ink-1);text-decoration:none;position:relative;transition:background .12s}
.wt-h+.wt-r{border-top:0}
.wt-r:hover{background:rgba(255,255,255,.03)}
.wt-r.me{background:var(--surface-2)}
.wt .num,.wt-h .num{text-align:right;font-variant-numeric:tabular-nums}
.wt-name{min-width:0;font:700 16px/1.2 var(--font-display);letter-spacing:.03em;text-transform:uppercase;color:var(--ink-1)}
.wt-name>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wt-name small{display:block;margin-top:3px;font:400 14.5px/1.3 var(--font-ui);letter-spacing:0;text-transform:none;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wt-name small.only-m{display:none}
.wt-c{min-width:0;font-size:15px;color:var(--ink-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wt-c.dim{color:var(--ink-2)}
.wt-c.prize,.wt-c.pts{color:var(--honey);font-weight:700}
.wt-c.rk{color:var(--ink-2);font-variant-numeric:tabular-nums}
.wt-r.top1 .rk,.wt-r.top2 .rk,.wt-r.top3 .rk{font-weight:700}
.wt-r.top1 .rk{color:var(--honey)}
.wt-r.top2 .rk{color:var(--ink-1)}
.wt-r.top3 .rk{color:var(--ink-2)}
.wt-act{display:flex;justify-content:flex-end;align-items:center;gap:8px;min-width:0}
.wt-act .btn{height:36px;padding:0 18px;min-width:104px;width:auto!important}
.wt-act>div{display:flex!important;flex-direction:row!important;gap:8px;width:auto!important;align-items:center}
.wt-meta{display:contents}
.wt-empty{padding:36px 18px;text-align:center;color:var(--ink-3);font-size:15px}
.wt-foot{margin:14px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.wt-title{margin:30px 0 10px;font:700 13.5px/1 var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.wt-lobby{--cols:132px minmax(0,1fr) 172px 90px 90px 250px}
/* Up to three buttons (Copy, Results, admin Delete) side by side, compact. */
.wt-lobby .wt-act .btn{min-width:0;padding:0 16px}
.wt-act .lb2-admin-del{position:static;flex:0 0 auto;height:36px;padding:0 12px}
.wt-lobby .c-status{grid-column:1}.wt-lobby .wt-name{grid-column:2}.wt-lobby .c-start{grid-column:3}.wt-lobby .c-players{grid-column:4}.wt-lobby .c-prize{grid-column:5}.wt-lobby .wt-act{grid-column:6}
.wt-lobby .wt-h>*,.wt-lobby .wt-r>*,.wt-lobby .wt-meta>*{grid-row:1}
.wt-hist{--cols:minmax(0,1.4fr) minmax(0,1.2fr) 110px 90px 190px}
.wt-board{--cols:44px minmax(0,1fr) 90px 64px 76px 64px}
.wt-winners{--cols:minmax(0,1.3fr) minmax(0,1fr) 96px 96px 84px}
/* the head of a list page: title and filters on the left, an ad slot on the right */
.wp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 32px;flex-wrap:wrap}
.wp-head>.wp-head-main{flex:1 1 320px;min-width:0}
.wp-adslot{flex:0 1 468px;min-width:0;max-width:100%}
.wp-adslot:empty{display:none}
.wp-house-ad{position:relative;display:block;line-height:0}
.wp-house-ad img{display:block;width:100%;max-width:468px;height:auto;margin-left:auto;border:1px solid color-mix(in srgb,var(--indigo) 55%,var(--rule))}
.wp-house-ad .ad-tag{position:absolute;right:4px;bottom:4px;font:700 10px/1 var(--font-display);letter-spacing:.1em;padding:3px 5px;background:rgba(0,0,0,.6);color:#fff}
.wp-adslot.themed .wp-house-ad{display:none}
.wp-adslot .wpt-banner,.wp-adslot .wpt-side{border:0;background:transparent;display:block;padding:0}
.wp-adslot img{display:block;width:100%;max-width:468px;height:auto;margin-left:auto}
@media (max-width:900px){
  .wt-lobby{--cols:116px minmax(0,1fr) 84px 84px 236px}
  .wt-lobby .c-start,.wt-lobby .wt-h>span:nth-child(3){display:none}
  .wt-lobby .wt-h>span:nth-child(4){grid-column:3}.wt-lobby .wt-h>span:nth-child(5){grid-column:4}
  .wt-lobby .c-players{grid-column:3}.wt-lobby .c-prize{grid-column:4}.wt-lobby .wt-act{grid-column:5}
  .wt-hist{--cols:minmax(0,1.4fr) minmax(0,1fr) 90px 150px}
  .wt-hist .c-played{display:none}
  .wp-adslot img{margin-left:0}
}
@media (max-width:640px){
  .wt-h{padding:0 12px;column-gap:10px}
  .wt-lobby .wt-h,.wt-hist .wt-h{display:none}
  .wt-lobby .wt-r,.wt-hist .wt-r{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name act" "meta act";column-gap:12px;row-gap:8px;padding:14px 12px;min-height:0;align-items:center}
  .wt-lobby .wt-r>*,.wt-hist .wt-r>*{grid-row:auto;grid-column:auto}
  .wt-lobby .wt-name,.wt-hist .wt-name{grid-area:name}
  .wt-lobby .wt-act,.wt-hist .wt-act{grid-area:act}
  .wt-lobby .wt-act{flex-wrap:wrap;max-width:190px;row-gap:8px}
  .wt-lobby .wt-meta,.wt-hist .wt-meta{grid-area:meta;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
  .wt-lobby .wt-meta>*,.wt-hist .wt-meta>*{grid-column:auto;grid-row:auto;font-size:13.5px;flex:0 0 auto}
  .wt-lobby .c-players::before,.wt-lobby .c-prize::before,.wt-hist .c-players::before,.wt-hist .c-played::before{content:attr(data-l);margin-right:5px;font:700 11.5px/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
  .wt-hist .c-played{display:inline}
  .wt-act .btn{height:40px;min-width:92px;padding:0 14px}
  .wt-lobby .wt-name>span,.wt-hist .wt-name>span{white-space:normal}
  .wt-board{--cols:34px minmax(0,1fr) 74px 52px}
  .wt-board .c-played,.wt-board .c-best{display:none}
  .wt-winners{--cols:minmax(0,1fr) 84px}
  .wt-winners .c-winner,.wt-winners .c-players,.wt-winners .c-date{display:none}
  .wt-name small.only-m{display:block}
  .wt-board .wt-h,.wt-winners .wt-h,.wt-board .wt-r,.wt-winners .wt-r{padding:0 12px}
}

details.cr-adv{margin-top:18px;border:1px solid var(--rule);background:var(--black-2)}
details.cr-adv>summary{cursor:pointer;padding:14px 16px;font:700 13px/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--coral-text)}
details.cr-adv[open]>summary{border-bottom:1px solid var(--rule)}
details.cr-adv>.field,details.cr-adv>.cr-sec{margin:16px}
.cr-adv-gap{height:22px}
/* ----- indigo: the table header bar, selected tabs and filters, panel headers ----- */
.wt{border-color:color-mix(in srgb,var(--indigo) 55%,var(--rule))}
.wt-h{background:var(--indigo);color:var(--indigo-ink);border-bottom:1px solid color-mix(in srgb,var(--indigo) 70%,#fff 10%)}
.wt-r:hover{background:color-mix(in srgb,var(--indigo) 28%,transparent)}
.wt-r.me{background:color-mix(in srgb,var(--indigo) 45%,transparent)}
.wt-title{color:var(--coral-text)}
.wt-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tab-btn.on{background:var(--indigo)!important;color:var(--indigo-ink)!important}
.tab-btn.on .underline{background:var(--coral-text)!important}
.preset-btn.on{background:var(--indigo)!important;color:var(--indigo-ink)!important;border-color:var(--coral-text)!important}
.pf-list-h,.th-players-head,.wr-group-h{border-color:color-mix(in srgb,var(--indigo) 55%,var(--rule))}
.pf-list-h,.th-players-head{background:var(--indigo);color:var(--indigo-ink)}
.pf-list-h{border-bottom:1px solid color-mix(in srgb,var(--indigo) 70%,#fff 10%)}
.th-players-head .t{color:var(--indigo-ink)}
.pf-list,.th-players,.wr-panel{background:var(--black-2)}
.wr-panel{border-color:color-mix(in srgb,var(--indigo) 55%,var(--rule))}
.wr-panel>.wr-h,.wr-panel>.wr-group-h .wr-h{color:var(--coral-text)}
.wr-card{border-color:color-mix(in srgb,var(--indigo) 55%,var(--rule))}
.wr-card.cta{border-color:var(--coral-text);box-shadow:inset 4px 0 0 var(--coral-text)}
.pf-row:hover{background:color-mix(in srgb,var(--indigo) 28%,transparent)}
/* ----- more lists in the same table look ----- */
.wt-pay{--cols:minmax(0,1fr) 140px;margin-top:16px}
.wt-pay .wt-r{min-height:46px}
.wt-plist{--cols:minmax(0,1fr) 150px;margin-top:12px}
.wt-plist .wt-r{min-height:46px}
.wt-plist.dim .wt-name,.wt-plist.dim .wt-c{opacity:.6}
.wt-stand{--cols:64px minmax(0,1fr) 120px;margin-top:14px}
.wt-stand.has-b{--cols:64px minmax(0,1fr) 120px 150px}
.wt-stand .wt-r{min-height:50px}
.wt-host{--cols:minmax(0,1fr) auto}
.wt-hostP{--cols:minmax(0,1.2fr) minmax(0,1.4fr) 170px}
.wt-hostR{--cols:minmax(0,1fr) minmax(0,1.6fr)}
.wt-host .wt-r{min-height:52px;padding-top:6px;padding-bottom:6px}
.wt-host .c-st{white-space:normal;color:var(--ink-2)}
.wt-host .wt-name .th-tag{margin-left:6px}
.wt-host .wt-act .btn{height:34px;min-width:0;padding:0 14px}
.wt-host+.wt-title,.wt+.wt-title{margin-top:30px}
.th-main .wt-title{margin-top:30px}
/* key / value lists */
.wr-dl,.tp-lines{border:1px solid color-mix(in srgb,var(--indigo) 55%,var(--rule));background:var(--black-2)}
.wr-dl>div{padding:12px 16px}
.wr-dl dt{font:700 12.5px/1.2 var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.wr-dl dd{font-size:15px}
.cr-review-row{padding:14px 18px}
.cr-review-row .k{font:700 12.5px/1.2 var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
/* blinds schedule */
.wr-blinds table{background:var(--black-2);border:1px solid color-mix(in srgb,var(--indigo) 55%,var(--rule))}
.wr-blinds th{background:var(--indigo);color:var(--indigo-ink);padding:10px 12px;font-size:12px}
.wr-blinds td{padding:9px 12px;font-size:14.5px}
@media (max-width:640px){
  .wt-stand{--cols:52px minmax(0,1fr) 90px}
  .wt-stand.has-b{--cols:52px minmax(0,1fr) 84px 84px}
  .wt-plist{--cols:minmax(0,1fr) 120px}
  .wt-hostT{--cols:minmax(0,1fr) auto}
  .wt-hostP .wt-h,.wt-hostR .wt-h{display:none}
  .wt-hostP .wt-r{grid-template-columns:minmax(0,1fr);row-gap:6px;padding:12px}
  .wt-hostP .wt-act{justify-content:flex-start}
  .wt-hostR .wt-r{grid-template-columns:minmax(0,1fr);row-gap:2px;padding:12px}
  .wt-pend,.wr-pend-row{flex-wrap:wrap}
}

/* ===== Type: Poppins + Lexend =====
   Poppins (Regular 400 and Bold 700 only) for headings, labels, buttons and
   numbers, so every heavier weight in the stylesheet lands on Poppins Bold.
   Lexend for body text and chat. Custom-site fonts ("WP Display"/"WP Body")
   still come first in every stack. Headlines are all caps;
   so are the names in lists of items (tournaments, table names, podium places),
   the main navigation, and the small category labels. Player names, chat and
   running text keep their own case. */
body{font-weight:400;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.wr-title,.pf-name,.quiz-headline,.qg-title,.sp-doc-title,.tp-title,.lg-title,.win-banner .t,.wr-h,.th-bounty h2,.tb-modal-card h2,.lb-empty .t,.td-title .t,.qg-tableinfo .name,.lb-podium .nm,.tp-name{text-transform:uppercase;letter-spacing:.04em!important;font-weight:700;text-wrap:balance}
nav[data-wp-nav] a,.hp-header nav a{text-transform:uppercase;letter-spacing:.07em;font-size:13px!important;font-weight:700;white-space:nowrap}

/* ===== Corners =====
   Buttons, fields, playing cards, nameplates and every card or panel round
   their corners by --r (11px). Small tags and badges use --r-sm. A custom
   site's "radius" setting replaces --r (see theme.js). Playing cards scale
   their corner with their size so small cards don't turn into pills.
   Segmented controls round the group, not each segment; underlined tabs
   stay square. */
:root{--r:11px;--r-sm:6px}
button,select,textarea,input:not([type=checkbox]):not([type=radio]):not([type=range]),.btn,.login-link,.social a,.social .soon,.tb-act,.wp-qs-btn,.tb-hbtn,.td-hbtn,.gd-input,.wp-back-tourney,.pod-sit{border-radius:var(--r)}
.seg,.tb-seg,.lb-seg,.tabs{border-radius:var(--r);overflow:hidden}
.seg>button,.tb-seg>button,.lb-seg>button,.tabs>button,.tab-btn,.ch,.td-tab{border-radius:0}
.tb-pre .box{border-radius:4px}
.card{border-radius:min(var(--r),calc(var(--cw)*var(--k)*.15))}
.slot{border-radius:min(var(--r),calc(var(--cw)*.15))}
.mini-card{border-radius:3px}
.pod-plate,.wp-qs-pop,.wr-panel,.wr-card,.wr-sharebar,.wr-pod,.wr-host,.wr-claim,.td-center-card,.lg-card,.quiz-card,.quiz-choice,.quiz-warn,.lb2-card,.lp-cards>div,
.modal-panel,.tb-modal-card,.win-banner,.th-kick-card,.th-bounty,.th-bounty-banner,.reg-stat,.reg-bounties,.qg-seat,.qg-share,.qg-ledger-note,
.cr-published,details.cr-adv,.lb-welcome,.lb-create-drop,.tb-sm-list,.wpc-picker,.tb-fair,.disclaimer,.pf-list,.sk,.sk-img,.cr-og-img,.wr-share-img,
.tb-countdown,.tm-pill,.rabbit-tag,.wpr-strip,.wpr-me,.tb-deck-prev,.wr-dl,.tp-lines,.wt{border-radius:var(--r)}
.pod-tag,.tb-pot,.tb-bet:not(.m),.wpc-key,.wr-name,.wpc-badge,.lb2-admin-del,.badge{border-radius:var(--r-sm)}
/* ===== Waiting room and host pages: one card style =====
   Solid dark cards (the same dark as the lobby table) with no outlines, no
   coloured side stripes, and nothing boxed inside a box: the details list,
   the players and blinds tables sit flat in their card. A custom site's
   panel colour (surface-1) recolours the cards through --wr-card. The
   sponsor rooms keep their own look (theme.js marks them wpt-legacy-cards). */
:root{--wr-card:var(--black-2)}
html:not(.wpt-legacy-cards) :is(.wr-card,.wr-panel,.wr-host,.wr-sharebar,.sk,.wr-side,.th-bounty,.th-bounty-banner,.th-kick-card,.th-phase){background:var(--wr-card);border-color:transparent;box-shadow:none}
html:not(.wpt-legacy-cards) :is(.wr-card.cta,.wr-card.in,.wr-card.win,.th-bounty-banner.done){border-color:transparent;box-shadow:none}
html:not(.wpt-legacy-cards) .wr-hero{border-color:transparent;border-radius:var(--r);overflow:hidden}
html:not(.wpt-legacy-cards) .wr-side .wr-chat{background:transparent}
html:not(.wpt-legacy-cards) .wr-host-h:last-child{border-bottom:0}
html:not(.wpt-legacy-cards) :is(.wr-share-img,.sk-img){border-color:transparent}
/* Chat Send matches the table's: the accent colour, not grey. */
html:not(.wpt-legacy-cards) .wr-chat .btn.steel{background:var(--coral);color:var(--coral-ink);border-color:var(--coral)}
html:not(.wpt-legacy-cards) :is(.wr-dl,.wr-panel .wt,.wr-blinds table,.wr-payouts){background:transparent;border-color:transparent}
html:not(.wpt-legacy-cards) :is(.wr-pod,.wr-claim,.sk-link,.th-deletion-notice){background:var(--black-1);border-color:transparent;box-shadow:none}
html:not(.wpt-legacy-cards) .wr-pod.p1{border-color:transparent;box-shadow:none}
html:not(.wpt-legacy-cards) .wr-pod.me{box-shadow:none}
/* Lobby: no outlines on the tabs or the table, filters you can read, and the
   freeroll note dimmed at the very bottom of the page. */
html:not(.wpt-legacy-cards) #app-lobby .tabs{border-color:transparent;background:var(--black-2)}
html:not(.wpt-legacy-cards) .wt{border-color:transparent}
html:not(.wpt-legacy-cards) #app-lobby .preset-btn{background:var(--black-2);color:var(--ink-1)}
html:not(.wpt-legacy-cards) #app-lobby .preset-btn:hover{background:var(--surface-2)}
html:not(.wpt-legacy-cards) #app-lobby .preset-btn.on{background:var(--coral)!important;color:var(--coral-ink)!important;border-color:var(--coral)!important}
.lb-page{display:flex;flex-direction:column;min-height:calc(100vh - 56px);min-height:calc(100svh - 56px)}
@media (min-width:641px){ .lb-page>.tabs{align-self:flex-start} }
.wt-foot.lb-foot{margin:auto 0 0;padding-top:48px;font-size:12.5px;color:var(--ink-3);text-align:center}
/* Scheduled start: countdown under the tournament name (pages-live.js countdownCard). */
.wr-countdown{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px 24px;padding:20px 22px;background:var(--wr-card);border-radius:var(--r)}
.wpt-legacy-cards .wr-countdown{background:var(--surface-1);border:1px solid var(--rule)}
.wr-countdown .wr-h{grid-column:1/-1;margin:0}
.wr-cd-boxes{display:flex;gap:10px}
.wr-cd-boxes>div{min-width:76px;padding:10px 8px 9px;border-radius:var(--r-sm);background:var(--black-1);text-align:center}
.wr-cd-boxes b{display:block;font:700 32px/1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--ink-1)}
.wr-cd-boxes span{display:block;margin-top:6px;font:700 10.5px/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.wr-cd-done{margin:0;font:700 17px/1.3 var(--font-display);color:var(--ink-1)}
.wr-cd-when{grid-column:1;margin:0;font-size:14px;color:var(--ink-2)}
.wr-cd-tz{grid-column:2;grid-row:2/4;display:flex;flex-direction:column;gap:6px;font:700 10.5px/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.wr-cd-tz select{max-width:220px;height:38px;padding:0 10px;background:var(--surface-input,#0B0C0E);border:1px solid var(--rule);color:var(--ink-1);font:500 14px/1 var(--font-ui);letter-spacing:0;text-transform:none}
@media (max-width:640px){
  .wr-countdown{grid-template-columns:1fr;padding:18px 16px}
  .wr-cd-tz{grid-column:1;grid-row:auto}
  .wr-cd-tz select{max-width:none}
  .wr-cd-boxes{gap:8px}
  .wr-cd-boxes>div{flex:1 1 0;min-width:0}
  .wr-cd-boxes b{font-size:26px}
}
/* Home hero: the two ways in sit right under the logo, visible without
   scrolling, and stay put while the chips animate. */
.hero-cta{position:absolute;left:0;right:0;bottom:max(32px,7vh);z-index:2;display:flex;justify-content:center;gap:14px;padding:0 16px;pointer-events:auto}
.hero-cta .btn{min-width:250px;text-decoration:none}
@media (max-width:640px){
  .hero-cta{flex-direction:column;align-items:center;gap:10px;bottom:max(24px,5vh)}
  .hero-cta .btn{width:100%;max-width:360px;min-width:0}
}
/* Ad banners round like the cards around them. */
.wp-adslot img,.wp-house-ad{border-radius:var(--r)}
.wp-house-ad{overflow:hidden}
/* Grids drawn with 1px gaps: round the whole block. */
.pf-stats,.lb-podium{border-radius:var(--r);overflow:hidden}
/* Tables in a rounded box: the header bar follows the top corners. */
.wt>.wt-h:first-child{border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0}
/* The turn timer runs along the plate's bottom edge, inside the rounded corners. */
.pod-timer{left:var(--r);right:var(--r)}
h1,h2,h3,h4,.wr-title,.pf-name,.quiz-headline,.qg-title,.sp-doc-title,.tp-title,.lg-title,.win-banner .t,.wr-h,.th-bounty h2,.tb-modal-card h2,.lb-empty .t,.td-title .t,.tp-name{font-family:"WP Display","Poppins","Helvetica Neue",Arial,sans-serif!important;font-weight:900!important}
.hp-header .login-link{white-space:nowrap}
@media (max-width:1000px){.hp-header{gap:14px!important}.hp-header nav[data-wp-nav]{gap:14px!important}nav[data-wp-nav] a,.hp-header nav a{letter-spacing:.04em;font-size:12px!important}}
@media (max-width:900px){.hp-header{gap:10px!important}.hp-header nav[data-wp-nav]{gap:10px!important}nav[data-wp-nav] a,.hp-header nav a{font-size:11.5px!important;letter-spacing:.02em}.hp-header .wp-nav-fb{display:none!important}.hp-header .right{gap:8px!important}}