:root {
  /* Casino night: oxblood room, gold trim, green felt, bright white cards.
     The page is dark by design and says so, so a browser's dark mode has nothing to recolor.
     Layout: one screen. Everyone sits around the felt, you at the bottom edge, your move in a bar underneath. */
  --page: #2a070c;
  --page-hi: #5a111d;
  --panel: #1c0508;
  --panel-2: #33090f;
  --ink: #fbf1dc;
  --muted: #d6aaa2;
  --line: #70282f;
  --gold: #f2c14e;
  --gold-deep: #b98a1a;
  --gold-ink: #2a1a00;
  --red: #c8102e;
  --red-bright: #ff6b6b;
  --felt: #1f7a55;
  --felt-deep: #0e4630;
  --felt-muted: #b5dcc6;
  --card: #ffffff;
  --card-ink: #0d0d10;
  --suit-red: #d1121f;
  --font-display: 'Zilla Slab', 'Rockwell', 'Roboto Slab', Georgia, serif;
  --font-body: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
html { overflow: hidden; background: radial-gradient(130% 70% at 50% 0%, var(--page-hi) 0%, var(--page) 55%, #170306 100%) var(--page); }
body { transform-origin: 0 0; color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.35; font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent; }
#app { max-width: 640px; margin: 0 auto; height: 100%; display: flex; flex-direction: column; }
#app.scroll { overflow-y: auto; max-width: none; padding: 0 max(16px, calc(50% - 304px)); }   /* full width, so the scroll bar sits at the window's edge */
* { scrollbar-width: thin; scrollbar-color: #7a2230 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #7a2230; border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
#app.wide { max-width: 2000px; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--font-display); font-weight: 700; text-wrap: balance; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.stack-v { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }

/* buttons */
.btn { border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); border-radius: 12px; padding: 10px 14px; font-weight: 700; min-height: 48px; }
.btn:hover { border-color: var(--gold); }
.btn:active { transform: translateY(1px); }
.btn.go { background: linear-gradient(#f7d06a, #e0a92b); border-color: #f7d06a; color: var(--gold-ink); }
.btn.fold { color: var(--red-bright); background: transparent; }
.btn.quiet { background: transparent; }
.btn.sm { min-height: 38px; padding: 6px 12px; font-size: 14px; border-radius: 10px; }
.btn[disabled] { opacity: 0.4; cursor: default; }
/* bet amounts look like chips */
.btn.chipbtn { background: var(--red); border: 3px dashed rgba(255,255,255,.75); border-radius: 999px; color: #fff; font-size: 17px; box-shadow: 0 0 0 2px var(--red), 0 3px 0 #6e0718; padding: 6px 4px; }
.btn.chipbtn:hover { border-color: #fff; }
.link { background: none; border: 0; padding: 0; color: var(--gold); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* fields */
label.field { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--muted); font-weight: 500; min-width: 0; }
input[type=text], input[type=number], select, textarea { background: #140305; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; color: var(--ink); min-height: 44px; width: 100%; }
textarea { min-height: 64px; resize: vertical; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--gold); flex: none; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #140305; }
.seg button { border: 0; background: transparent; padding: 10px 8px; font-weight: 700; color: var(--muted); min-height: 44px; }
.seg button[aria-pressed=true] { background: var(--gold); color: var(--gold-ink); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.panel { background: rgba(20, 3, 5, 0.6); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.panel h3, .sheet section > h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gold); font-weight: 700; margin: 0 0 2px; }
.tag { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; padding: 2px 7px; border-radius: 20px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.tag.on { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.err { color: var(--red-bright); font-weight: 700; }

/* cards: white, big ranks, real red and black */
.card { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; position: relative; flex: none; background: var(--card); color: var(--card-ink);
  border-radius: 7px; aspect-ratio: 5 / 7; line-height: 0.95; font-weight: 800; user-select: none; box-shadow: 0 2px 4px rgba(0,0,0,.45); border: 0; padding: 0; font-size: var(--cf, 24px); }
.card b { font-weight: 800; }
.card i { font-style: normal; font-size: 0.95em; }
.card.red { color: var(--suit-red); }
.card.back { background: repeating-linear-gradient(45deg, #a50d24 0 5px, #c2182f 5px 10px); box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px var(--gold-deep), 0 2px 4px rgba(0,0,0,.45); }
.card.wild { box-shadow: 0 0 0 3px var(--gold), 0 0 12px rgba(242,193,78,.7); }
.card em { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); background: var(--gold); color: var(--gold-ink); font-style: normal; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; padding: 1px 5px; border-radius: 6px; line-height: 1.3; }
.card.hole::after { content: ''; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.card.dim { opacity: 0.38; }
.card.best { transform: translateY(-7px); box-shadow: 0 0 0 3px #fff, 0 8px 12px rgba(0,0,0,.4); }
.card.wild.best { box-shadow: 0 0 0 3px var(--gold), 0 8px 12px rgba(0,0,0,.4); }
.card.lg { width: 100%; gap: 2px; }
.card.sm { width: var(--mw, 26px); font-size: calc(var(--mw, 26px) * 0.5); border-radius: 4px; gap: 0; }
.card.sm i { font-size: 0.82em; }
.card.sm em, .card.sm.hole::after { display: none; }
.card.sm.wild { box-shadow: 0 0 0 2px var(--gold); }
.card.sm.dim { opacity: 1; filter: brightness(.5); }
.card.sm.best { z-index: 1; transform: translateY(-5px); box-shadow: 0 0 0 2px #fff, 0 5px 8px rgba(0,0,0,.4); }
.card.pick { cursor: pointer; }
.card.sel { transform: translateY(-14px); box-shadow: 0 0 0 4px var(--gold), 0 8px 12px rgba(0,0,0,.4); }
.card.in { animation: dealIn .4s cubic-bezier(.2,.8,.3,1) both; }
.card.flip { animation: flipIn .45s ease-out both; }
@keyframes dealIn { from { transform: translate(var(--dx, 0), var(--dy, -40px)) scale(.4) rotate(-12deg); opacity: 0; } }
@keyframes flipIn { from { transform: rotateY(90deg) scale(1.15); } }

/* home + lobby */
.home { padding: 30px 0 28px; gap: 20px; }
.home h1 { font-size: clamp(44px, 13vw, 64px); line-height: 0.95; }
.home h1 span { color: var(--gold); display: block; }
.home h1, .home .lede { text-align: center; }
.home .lede { margin: 0 auto; }
.hero { align-items: center; padding: 26px 12px 34px; gap: 0; }
.hero .card { width: clamp(38px, 11.5vw, 54px); --cf: clamp(17px, 5.2vw, 24px); margin: 0 -4px; }
.hero .card:nth-child(1) { transform: rotate(-13deg) translate(14px, 12px); }
.hero .card:nth-child(2) { transform: rotate(-6deg) translate(6px, 2px); z-index: 1; }
.hero .card:nth-child(4) { transform: rotate(6deg) translate(-6px, 2px); z-index: 1; }
.hero .card:nth-child(5) { transform: rotate(13deg) translate(-14px, 12px); }
.hero .card.mascot { width: clamp(108px, 33vw, 164px); margin: 0 2px; border-radius: 11px; z-index: 2; overflow: visible; box-shadow: 0 0 0 4px var(--gold), 0 0 22px rgba(242, 193, 78, .65), 0 12px 26px rgba(0, 0, 0, .5); }
.card.mascot img { position: absolute; left: 50%; top: 50%; height: 91%; width: auto; transform: translate(-50%, -50%); pointer-events: none; }
.card.mascot .ix { position: absolute; left: 5%; top: 3%; display: flex; flex-direction: column; align-items: center; line-height: 0.95; font-size: clamp(14px, 4vw, 20px); }
.card.mascot .ix.flip { left: auto; top: auto; right: 5%; bottom: 3%; transform: rotate(180deg); }
.card.mascot em { font-size: 12px; padding: 2px 9px; bottom: -10px; border-radius: 8px; }
.hero { background: radial-gradient(ellipse at 50% 40%, #27916a, var(--felt-deep)); border-radius: 22px; box-shadow: inset 0 0 0 7px #120304, inset 0 0 0 9px var(--gold-deep); padding: 26px 20px 30px; display: flex; justify-content: center; gap: 8px; }
.hero .card { width: 54px; --cf: 24px; }
.lede { font-size: 18px; max-width: 36ch; }
.code { font-family: var(--font-display); font-size: 56px; letter-spacing: 0.1em; color: var(--gold); line-height: 1; }
.people { display: flex; flex-direction: column; }
.people > div { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.people > div:last-child { border-bottom: 0; }
.game { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.game strong { font-size: 16px; }
.game span { font-size: 13.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.game[aria-pressed=true] { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.games { display: flex; flex-direction: column; gap: 8px; }

/* table screen */
.bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px 4px; }
.bar .where { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--gold); font-weight: 700; }
.bar .title { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strip { border: 0; background: none; text-align: left; padding: 0 12px 6px; font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; display: block; }
.strip b { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.felt-wrap { flex: 1 1 auto; min-height: 340px; padding: 0 6px; display: flex; }
.felt { position: relative; flex: 1; border-radius: 34px; color: #fff;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 2px, transparent 2px 4px), radial-gradient(ellipse at 50% 45%, #2a9a6e 0%, var(--felt) 50%, var(--felt-deep) 100%);
  box-shadow: inset 0 0 0 8px #120304, inset 0 0 0 10px var(--gold-deep), inset 0 0 60px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.45); overflow: hidden; }
#app.wide .felt { border-radius: 110px; }
.seat { position: absolute; transform: translate(-50%, 0); display: flex; flex-direction: column; align-items: center; gap: 4px; --dy: 46px; }
.plate { position: relative; width: 100%; background: rgba(12, 3, 4, 0.82); border: 2px solid rgba(242,193,78,.25); border-radius: 10px; padding: 3px 8px 4px; text-align: center; line-height: 1.2; }
.plate .nm { display: block; font-weight: 700; font-size: var(--pf, 15px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plate .stk { display: block; font-size: calc(var(--pf, 15px) * 0.95); color: var(--gold); font-weight: 700; }
/* what this player's face-up cards make; called out when a new card changes it */
.plate .shows { display: block; font-size: calc(var(--pf, 15px) * 0.85); font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-top: 1px solid rgba(242,193,78,.3); margin-top: 2px; padding-top: 1px; }
.plate .shows.pop, .handname.pop { animation: announce 1.3s ease-out both; }
@keyframes announce { 0% { color: var(--gold-ink); background: var(--gold); transform: scale(1.35); } 60% { color: var(--gold-ink); background: var(--gold); transform: scale(1.35); } 100% { transform: scale(1); } }
.plate .shows.pop { overflow: visible; border-radius: 6px; position: relative; z-index: 5; }
.handname.pop { border-radius: 8px; padding: 0 8px; }
.dchip { position: absolute; top: -9px; right: -9px; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #111; font-size: 12px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--gold-deep), 0 2px 3px rgba(0,0,0,.5); }
.seat.turn .plate, .me-seat.turn .me-plate { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(242,193,78,.35), 0 0 18px rgba(242,193,78,.55); animation: glow 1.3s ease-in-out infinite alternate; }
@keyframes glow { to { box-shadow: 0 0 0 5px rgba(242,193,78,.5), 0 0 26px rgba(242,193,78,.8); } }
.seat.gone .plate { opacity: 0.5; }
.seat.won .plate { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(242,193,78,.4), 0 0 20px rgba(242,193,78,.5); }   /* winners keep the dark plate, with a gold edge */
.seat.won .plate .nm { color: var(--gold); }
.scards { display: flex; justify-content: center; min-height: calc(var(--mw, 26px) * 1.4); }
.scards .card + .card { margin-left: var(--ov, 3px); }
.scards.tight .card { align-items: flex-start; padding-left: 3px; font-size: calc(var(--mw, 26px) * 0.48); }
.scards.tight .card b { letter-spacing: -0.09em; }
.scards.tight .card i { margin-left: 1px; }
/* folding: the cards close up and go dark */
.mucked .card { opacity: 0.35; }
.scards.mucked .card + .card { margin-left: calc(var(--mw, 26px) * -0.8); }
.scards.mucking .card + .card { animation: muck .55s ease-in both; }
.scards.mucking .card { animation: muckFade .55s ease-in both; }
@keyframes muck { from { margin-left: var(--ov, 3px); } }
@keyframes muckFade { from { opacity: 1; } }

/* what a player just did: called out big, then it settles */
.say { font-size: calc(var(--pf, 14.5px) * 0.9); font-weight: 800; padding: 3px 10px; border-radius: 20px; background: #fff; color: #111; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; position: relative; z-index: 2; }
.say.bet { background: var(--gold); color: var(--gold-ink); }
.say.dark { background: rgba(12,3,4,.82); color: var(--muted); }
.say.fold { background: #3b0a12; color: var(--red-bright); }
.say.wrap { white-space: normal; text-align: center; font-size: 12px; line-height: 1.15; border-radius: 10px; }
.say.think { background: transparent; border: 1px solid var(--gold); color: var(--gold); }
.say.pop { animation: callout 1.5s cubic-bezier(.2,1.4,.4,1) both; transform-origin: 50% 0; z-index: 6; overflow: visible; max-width: none; }
@keyframes callout {
  0% { transform: scale(.3); opacity: 0; }
  10% { transform: scale(calc(var(--pop, 1.7) * 1.08)); opacity: 1; box-shadow: 0 0 0 3px #fff, 0 0 28px rgba(255,255,255,.9); }
  70% { transform: scale(var(--pop, 1.7)); box-shadow: 0 0 0 3px #fff, 0 0 22px rgba(255,255,255,.7); }
  100% { transform: scale(1); box-shadow: none; }
}
.timer { position: absolute; left: 6px; right: 6px; bottom: -5px; height: 4px; border-radius: 3px; background: rgba(0,0,0,.45); overflow: hidden; }
.timer i { display: block; height: 100%; width: 100%; background: var(--gold); transform-origin: 0 50%; animation: drain linear both; }
@keyframes drain { from { transform: scaleX(1); } 75% { background: var(--gold); } to { transform: scaleX(0); background: var(--red-bright); } }
.dock { position: relative; }
.dock > .timer { left: 0; right: 0; top: -2px; bottom: auto; height: 5px; border-radius: 0; }
.dock .secs { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); font-weight: 800; font-size: 15px; color: var(--gold); background: #140305; border: 1px solid var(--line); border-radius: 20px; padding: 1px 9px; }
#app.wide .dock .secs { top: -14px; }
.dots::after { content: '\2026'; display: inline-block; animation: blink 1.2s steps(1) infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* chips sliding to the pot */
.fly { position: absolute; left: var(--tx); top: var(--ty); width: 0; height: 0; z-index: 7; pointer-events: none; opacity: 0; }
.fly.go { animation: fly .75s cubic-bezier(.5,0,.3,1) both; }
.fly i { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; background: var(--red); border: 3px dashed #fff; box-shadow: 0 0 0 2px var(--red), 0 2px 3px rgba(0,0,0,.5); }
.fly i:nth-child(2) { left: -1px; top: -17px; background: #1c4fb5; box-shadow: 0 0 0 2px #1c4fb5, 0 2px 3px rgba(0,0,0,.5); }
.fly i:nth-child(3) { left: -19px; top: -5px; background: #111; box-shadow: 0 0 0 2px #111, 0 2px 3px rgba(0,0,0,.5); }
@keyframes fly { 0% { left: var(--fx); top: var(--fy); opacity: 1; transform: scale(1.2); } 80% { opacity: 1; } 100% { left: var(--tx); top: var(--ty); opacity: 0; transform: scale(.7); } }

.center { position: absolute; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.center.top { transform: translate(-50%, 0); }
.pot { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1; display: flex; align-items: center; gap: 8px; color: var(--gold); text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.pot::before { content: ''; width: 20px; height: 20px; border-radius: 50%; background: var(--red); border: 3px dashed #fff; box-shadow: 0 0 0 2px var(--red), 0 2px 0 #6e0718; flex: none; }
.pot.bump { animation: bump .5s ease-out; }
@keyframes bump { 35% { transform: scale(1.35); } }
.stage { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--felt-muted); font-weight: 700; }
.pot .stage { font-family: var(--font-body); margin-left: 4px; text-shadow: none; }
.tobeat { font-size: 14px; background: rgba(12,3,4,.75); padding: 4px 12px; border-radius: 20px; }
.tobeat b { color: var(--gold); }
.board { display: grid; gap: 5px; justify-content: center; }
.board .card { width: 100%; font-size: var(--bf, 20px); gap: 1px; }
.board .slot { position: relative; }
.board .job { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: var(--gold); color: var(--gold-ink); padding: 1px 5px; border-radius: 6px; white-space: nowrap; z-index: 1; }
.market { display: flex; gap: 8px; align-items: flex-end; }
.market div { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 13.5px; font-weight: 700; color: var(--gold); }
.market .card { width: 44px; --cf: 20px; }
.verdict { background: rgba(12,3,4,.82); border: 1px solid var(--gold-deep); border-radius: 12px; padding: 8px 14px; font-size: 15.5px; display: flex; flex-direction: column; gap: 3px; max-width: 100%; }
.verdict b { color: var(--gold); }

/* your seat, at the bottom edge of the table */
.me-seat { position: absolute; left: 50%; bottom: 2.5%; transform: translateX(-50%); width: 94%; max-width: 560px; display: flex; flex-direction: column; align-items: center; gap: 5px; --dy: -70px; }
.me-say { min-height: 24px; display: flex; justify-content: center; }
.me-seat .hand { display: grid; gap: 5px; justify-content: center; width: 100%; }
.me-seat .hand.mucked { transform: scale(.8); transition: transform .4s; }
.me-plate { position: relative; display: flex; align-items: baseline; gap: 8px; background: rgba(12,3,4,.82); border: 2px solid rgba(242,193,78,.25); border-radius: 10px; padding: 3px 12px; }
.me-plate .nm { font-weight: 700; }
.me-plate .stk { color: var(--gold); font-weight: 800; font-size: 17px; }
.me-read { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; min-height: 26px; }
.handname { font-weight: 800; color: #fff; font-size: 15.5px; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.handname .muted { color: var(--felt-muted); font-weight: 700; }
.odds { border: 1px solid rgba(255,255,255,.5); background: rgba(12,3,4,.6); color: #fff; border-radius: 20px; font-size: 13px; font-weight: 700; padding: 3px 10px; min-height: 26px; }
.odds[aria-pressed=true] { background: #fff; color: #111; border-color: #fff; }
.odds b { font-size: 15px; }
#app.wide .me-seat { max-width: 900px; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: '. say .' 'plate hand read'; align-items: center; column-gap: 16px; }
#app.wide .me-say { grid-area: say; }
#app.wide .me-seat .hand { grid-area: hand; width: auto; }
#app.wide .me-plate { grid-area: plate; justify-self: end; flex-direction: column; align-items: center; gap: 0; padding: 6px 16px; }
#app.wide .me-read { grid-area: read; justify-content: flex-start; flex-direction: column; align-items: flex-start; }

.dock { background: linear-gradient(#2a070c, #170306); border-top: 2px solid var(--line); padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 8px; }
.dock.mine-turn { border-top-color: var(--gold); box-shadow: 0 -6px 18px rgba(242,193,78,.25); }
/* wide screens: your move is one bar under your seat, so the table keeps its height */
#app.wide .dock { width: calc(100% - 24px); max-width: 1180px; margin: 6px auto 0; border: 2px solid var(--line); border-bottom: 0; border-radius: 16px 16px 0 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 16px 12px; }
#app.wide .dock.mine-turn { border-color: var(--gold); }
#app.wide .dock .prompt { flex: 0 0 auto; flex-direction: column; align-items: flex-start; gap: 0; }
#app.wide .dock .prompt span { text-align: left; }
#app.wide .dock .amounts { flex: 1 1 300px; }
#app.wide .dock .acts { flex: 1 1 280px; }
#app.wide .dock .waiting { flex: 1 1 auto; }
#app.wide .dock > .row { flex: 0 0 auto; }
.prompt { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.prompt strong { font-family: var(--font-display); font-size: 21px; color: var(--gold); }
.prompt span { color: var(--muted); font-size: 14.5px; text-align: right; }
.acts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.acts.two { grid-template-columns: 1fr 1.7fr; grid-auto-flow: row; }
.amounts { display: flex; gap: 8px; align-items: center; }
.amounts > span { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; flex: none; }
.amounts .btn { flex: 1 1 0; min-width: 0; white-space: nowrap; padding-left: 6px; padding-right: 6px; }
.amounts input { text-align: center; font-weight: 700; font-size: 18px; flex: 1 1 0; min-width: 0; }
.amounts .step { flex: 0 0 46px; }
.buy { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; }
.buy .card { width: 42px; --cf: 20px; }
.waiting { text-align: center; color: var(--muted); padding: 6px 0; }
.waiting b { color: var(--ink); }

/* sheets */
#modal:empty { display: none; }
#modal { position: fixed; inset: 0; background: rgba(8, 1, 2, 0.7); display: flex; align-items: flex-end; justify-content: center; z-index: 20; }
.sheet { background: var(--page); border: 1px solid var(--gold-deep); border-bottom: 0; border-radius: 20px 20px 0 0; width: 100%; max-width: 640px; max-height: 92%; overflow-y: auto; padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 16px; }
.sheet h2 { font-size: 24px; color: var(--gold); }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sheet section { display: flex; flex-direction: column; gap: 10px; }
.sheet .foot { position: sticky; bottom: -18px; background: var(--page); padding: 10px 0 4px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); margin-top: auto; }
table.ledger { width: 100%; border-collapse: collapse; }
table.ledger th { text-align: right; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: 6px 4px; }
table.ledger th:first-child, table.ledger td:first-child { text-align: left; }
table.ledger td { text-align: right; padding: 8px 4px; border-top: 1px solid var(--line); }
table.ledger td.up { color: #6fe0a8; font-weight: 700; }
table.ledger td.down { color: var(--red-bright); font-weight: 700; }
.lines { display: flex; flex-direction: column; font-size: 14.5px; }
.lines div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line); }
.lines div span:last-child { white-space: nowrap; font-weight: 700; color: var(--gold); }
.lines time { color: var(--muted); font-size: 12.5px; margin-right: 6px; }

/* builder */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tile { text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.tile strong { font-size: 15.5px; }
.tile span { font-size: 13px; color: var(--muted); }
.tile[aria-pressed=true] { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chips > span { font-size: 14px; color: var(--muted); min-width: 96px; }
.chip { border: 1px solid var(--line); background: var(--panel); border-radius: 10px; min-width: 40px; min-height: 40px; padding: 4px 10px; font-weight: 700; color: var(--muted); }
.chip[aria-pressed=true] { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.chip.x { color: var(--ink); border-color: var(--gold); }
.diagram { display: grid; gap: 5px; width: max-content; background: var(--felt); padding: 12px; border-radius: 14px; box-shadow: inset 0 0 0 4px #120304, inset 0 0 0 5px var(--gold-deep); }
.diagram button { width: 50px; height: 64px; border-radius: 6px; border: 0; background: #fff; color: #555; font-size: 11px; font-weight: 700; line-height: 1.15; padding: 2px; }
.diagram button.wild { background: var(--gold); color: var(--gold-ink); }
.diagram button.suit { background: #fff; color: var(--suit-red); box-shadow: 0 0 0 3px var(--red); }
.diagram button.kill { background: #111; color: #fff; }
.chip.own { border-style: dashed; border-color: var(--gold); color: var(--ink); }
.seg.four { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 520px) { .seg.four { grid-template-columns: 1fr 1fr; } }
.gridwrap { max-width: 100%; overflow-x: auto; }
.diagram.grid-edit { gap: 3px; padding: 8px; }
.diagram.grid-edit button { width: 40px; height: 52px; font-size: 10.5px; }
.diagram button.empty { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); font-size: 18px; }
.diagram button.empty:disabled { opacity: 0.45; }
.diagram button.pick { box-shadow: 0 0 0 3px #ffd75e, 0 0 0 5px #120304; }
.bsteps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.step { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-left: 5px solid var(--gold-deep); border-radius: 12px; padding: 8px; }
.step.bet { border-left-color: #2f9a6c; }
.step.flip { border-left-color: #d9d9d9; }
.step.draw, .step.pass { border-left-color: #b9562f; }
.step .num { font-weight: 700; color: var(--gold); text-align: center; font-size: 16px; }
.step .what { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 15.5px; }
.step .what span { color: var(--muted); }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #140305; }
.stepper button { width: 38px; height: 38px; border: 0; background: transparent; color: var(--ink); font-size: 20px; font-weight: 700; line-height: 1; }
.stepper b { min-width: 26px; text-align: center; font-size: 17px; color: var(--ink); }
.step .mv { display: flex; gap: 4px; }
.step .mv button { width: 36px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 14px; padding: 0; }
.step .mv button:disabled { opacity: 0.3; }
@media (max-width: 520px) { .step:not(.short) { grid-template-columns: 22px minmax(0, 1fr); } .step:not(.short) .mv { grid-column: 2; justify-content: flex-end; } }
.panel ol.steps { margin-top: 6px; }
.picker { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
details.more { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: rgba(20,3,5,.6); }
details.more summary { font-weight: 700; cursor: pointer; color: var(--gold); }
details.more[open] summary { margin-bottom: 10px; }
details.more > div { display: flex; flex-direction: column; gap: 10px; }

#toast { position: fixed; left: 0; right: 0; top: 10px; display: flex; justify-content: center; pointer-events: none; z-index: 30; padding: 0 16px; }
#toast div { background: #fff; color: #111; font-weight: 700; padding: 10px 16px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.5); max-width: 560px; animation: toastIn .25s ease-out; }
#toast div.bad { background: var(--red); color: #fff; }
#toast div.note { background: var(--gold); color: var(--gold-ink); font-size: 18px; }
@keyframes toastIn { from { transform: translateY(-14px); opacity: 0; } }

@media (min-width: 820px) { #modal { align-items: center; } .sheet { border-radius: 20px; border-bottom: 1px solid var(--gold-deep); max-height: 88%; } }
@media (prefers-reduced-motion: reduce) {
  .card.in, .card.flip, .say.pop, .shows.pop, .handname.pop, .pot.bump, .fly.go, .scards.mucking .card, #toast div, .dots::after, .seat.turn .plate, .me-seat.turn .me-plate { animation: none; }
  .btn:active { transform: none; }
}

/* rules pages served by the game server: ordinary scrolling documents */
html.doc { overflow: auto; height: auto; min-height: 100%; background-attachment: fixed; }
html.doc body { height: auto; }
.doc-page { max-width: 720px; margin: 0 auto; padding: 24px 18px 48px; display: flex; flex-direction: column; gap: 14px; }
.doc-page h1 { font-size: clamp(34px, 8vw, 52px); line-height: 1; color: var(--gold); }
.doc-page h2 { font-size: 24px; margin-top: 10px; }
.doc-page a { color: var(--gold); }
.doc-page a.btn.go { display: inline-block; color: var(--gold-ink); text-decoration: none; padding: 14px 22px; font-size: 18px; }
.doc-page .where { font-size: 14px; display: flex; align-items: center; gap: 10px; }
.doc-page .where img { width: auto; height: 46px; }
.doc-page ul, .doc-page ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 7px; font-size: 17px; max-width: 65ch; }
.doc-page ul.more { columns: 2; column-gap: 36px; display: block; max-width: none; }
.doc-page ul.more li { margin-bottom: 8px; break-inside: avoid; }
.doc-page a.game { text-decoration: none; color: var(--ink); }

/* invites, shared games, step-by-step rules */
.invite { border-color: var(--gold); }
.invite h3 b { color: var(--gold); letter-spacing: .08em; }
.linkline { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; margin-top: 6px; }
a.link { align-self: center; }
ol.steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.game.lib span.row { display: flex; -webkit-line-clamp: unset; overflow: visible; align-items: center; gap: 8px; margin-top: 6px; }
.game.lib span.row span { display: inline; }
.game.lib .tag.on { color: var(--gold-ink); }
.sheet > .seg, .sheet > .games, .sheet > details { flex: none; }
.sheet .foot details ol { max-height: 32vh; overflow-y: auto; }
@media (max-width: 350px) { .hero .card:nth-child(1), .hero .card:nth-child(5) { display: none; } }

/* display size control */
.sizer { display: flex; flex-direction: column; gap: 6px; }
.sizer .row { display: flex; align-items: center; gap: 8px; }
.sizer input[type=range] { flex: 1; min-width: 0; height: 34px; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.sizer input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: #5a1a24; border: 1px solid var(--line); }
.sizer input[type=range]::-moz-range-track { height: 8px; border-radius: 4px; background: #5a1a24; border: 1px solid var(--line); }
.sizer input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: var(--gold); border: 2px solid #fff3; box-shadow: 0 2px 5px rgba(0,0,0,.5); }
.sizer input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--gold); border: 2px solid #fff3; box-shadow: 0 2px 5px rgba(0,0,0,.5); }
.sizer input[type=range]:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 6px; }
.sizer .btn.sm { flex: none; min-width: 48px; }
.sizer #zoom-val { min-width: 62px; font-variant-numeric: tabular-nums; }

/* pinned favourite games */
.gamerow { display: flex; gap: 6px; align-items: stretch; }
.gamerow .game { flex: 1; min-width: 0; }
.pin { flex: none; width: 46px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.pin[aria-pressed=true] { color: var(--gold); border-color: var(--gold); }
.pin:hover { color: var(--gold); }

/* on a wide table a name plate is only as wide as it needs to be, so it stays clear of the table's corners */
#app.wide .plate { width: auto; min-width: calc(var(--pf, 17px) * 6.5); max-width: 100%; padding: 4px 16px 5px; }