/* ============================================================
   TEXAS HOLD'EM — the table (brief H13–H24, layout L1–L5, D1, D2)
   One page, three arrangements, chosen by the box only:
     phones (< 900 wide)      seats 3 + 2 with the pot between, the board
                              under them, then you (L1)
     desktop, 600px and up    last hands | the table | session (D1)
     desktop, under 600px     the table across the top, you in the middle
                              of the bottom row, the instruction and the
                              buttons beside you (D2)
   Card sizes are set by holdem-controller.js (fitCards): the largest that
   fit this box with the raise panel open, so nothing moves mid-hand (H19).
   ============================================================ */
:root{
  --table-bg:#2C3B6B; --table-highlight:#31427A; --table-deep:#1E2744;
  --gold:#E9C46A; --gold-b:#F3D27A; --gold-t:#FCE7AA; /* gold type straight on the felt: 7.8:1 at its lightest (standing rule, no pale type) */ --gold-d:#D9AE4E; --cream:#F6F0E1;
  --plate:#141C35; --plate-b:#3A4A7C; --ink-2:#D3DBF2; --active:#62C4FF; --win:#7FE0A0;
  --card-red:#CB343E; --bw:48px; --hw:64px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; background:#0d0f17; color:var(--cream); font-family:Inter, "Helvetica Neue", Arial, sans-serif; overflow:hidden; -webkit-text-size-adjust:100%; }
button{ font:inherit; color:inherit; cursor:pointer; }
button:focus-visible, .seat:focus-visible{ outline:3px solid var(--active); outline-offset:2px; }
.mono{ font-family:"IBM Plex Mono", Menlo, monospace; }
#app{ height:var(--frame-h, 100vh); display:flex; flex-direction:column; }

/* ---------- header ---------- */
.hdr{ flex:none; padding:4px 8px 5px; background:#0b0c12; }
.hrow{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.title{ font-family:Georgia, "Times New Roman", serif; font-weight:700; font-size:15px; letter-spacing:.6px; white-space:nowrap; }
.title .hn{ font-family:Inter, Arial, sans-serif; font-size:12px; font-weight:600; letter-spacing:0; color:#d9d2c0; }
.bal{ font-size:12px; font-weight:700; letter-spacing:.8px; white-space:nowrap; }
.bal b{ color:var(--gold-b); font-size:14px; }
.hbtns{ display:flex; gap:4px; margin-top:4px; }
.hbtn{ flex:1; min-width:0; min-height:44px; border:0; border-radius:9px; background:linear-gradient(var(--gold-b), var(--gold-d)); color:#1b1406; font-size:12px; font-weight:800; line-height:13px; padding:4px 2px 3px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.hbtn i{ font-style:normal; font-size:13px; line-height:14px; }
.hbtn[aria-pressed="false"]{ background:linear-gradient(#e7dcc2, #c9b98f); }

/* ---------- the felt ---------- */
.felt > *{ flex-shrink:0; }
/* the table stays unseen until the controller has sized the cards for this box, so the first paint never shows
   the stylesheet's fallback size and then jumps (first-paint-size.js; the solitaires' "A", Ronan 2026-10-16) */
html:not(.sized) .felt{ visibility:hidden; }
.felt{ position:relative; flex:1; min-height:0; margin:4px 6px 0; border-radius:18px; border:3px solid #b08a3c;
  background:radial-gradient(ellipse at 50% 40%, var(--table-highlight), var(--table-bg) 60%, var(--table-deep));
  padding:8px; display:flex; flex-direction:column; gap:6px; overflow:hidden; }
.foot{ flex:none; text-align:center; font-size:12px; font-weight:600; padding:3px 0 4px; color:#d9d2c0; font-family:Menlo, monospace; }

/* the table: seats, pot, board */
.table{ display:grid; gap:5px; grid-template-columns:repeat(3, minmax(0, 1fr));
  grid-template-areas:"s2 s3 s4" "s1 pot s5" "board board board"; }
#seat1{ grid-area:s1; } #seat2{ grid-area:s2; } #seat3{ grid-area:s3; } #seat4{ grid-area:s4; } #seat5{ grid-area:s5; }
.potcell{ grid-area:pot; display:flex; align-items:center; justify-content:center; }
/* phones: the pot fills its cell, so a big amount has the whole width (fitPot() then steps the amount down to 13px if needed) */
@media (max-width:899px){ .potcell .pot{ width:100%; padding:2px 2px; letter-spacing:0; } }
.board{ grid-area:board; display:flex; gap:5px; justify-content:center; margin-top:2px; }

.seat{ position:relative; background:var(--plate); border:1px solid var(--plate-b); border-radius:9px; padding:4px 5px; text-align:center; min-width:0; transition:opacity .2s; }
.seat .nm{ height:16px; font-size:13px; font-weight:700; line-height:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.seat .sk{ height:16px; font-size:13px; font-weight:700; line-height:16px; color:var(--gold-b); white-space:nowrap; }
.seat .ac{ height:15px; font-size:13px; font-weight:700; line-height:15px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.seat.turn{ outline:3px solid var(--active); outline-offset:1px; }
.seat.turn .nm::before{ content:"▸ "; color:var(--active); }
/* folded: muted but never pale (standing rule, 7:1) — the words say Folded; the plate goes dashed */
.seat.folded{ border-style:dashed; } .seat.folded .nm, .seat.folded .ac{ color:#BFC5D8; } .seat.folded .sk{ color:#CDBF8F; }
.seat.won{ outline:3px solid var(--win); outline-offset:1px; }
/* P2 (Ronan 2026-10-27 15:42, "A"): players still in the hand on a light plate, dark type; folded players stay dark (dashed) */
.seat:not(.folded){ background:var(--cream); border-color:var(--cream); color:#1B2A4A; }
.seat:not(.folded) .nm, .seat:not(.folded) .ac, .seat:not(.folded) .ac.toact{ color:#1B2A4A; }
.seat:not(.folded) .sk{ color:#5E4300; }
.seat:not(.folded) .ac.next span{ background:#1B2A4A; color:var(--gold-t); }
.seat:not(.folded) .shown{ box-shadow:inset 0 0 0 1px #6B7590; }
.seat:not(.folded) .backs i{ border-color:#8b2232; }
.mk span{ box-shadow:0 0 0 1px #1B2A4A; }
.seat.turn:not(.folded) .nm::before{ color:#0B5C99; }
.mk{ position:absolute; top:-8px; right:-4px; display:flex; gap:2px; }
.mk span{ background:var(--cream); color:#1b1406; font-size:12px; font-weight:800; border-radius:8px; padding:0 4px; line-height:15px; }
.backs{ display:inline-flex; gap:1px; vertical-align:-1px; margin-left:3px; }
.backs i{ width:8px; height:11px; background:#8b2232; border:1px solid var(--cream); border-radius:2px; display:inline-block; }
.shown{ font-family:"IBM Plex Mono", Menlo, monospace; font-weight:800; background:var(--cream); color:#111; border-radius:4px; padding:0 3px; margin:0 1px; display:inline-block; height:15px; line-height:15px; vertical-align:top; }
.shown.red{ color:#8E1720; } /* 12px text, so 7:1 on cream (no pale type); the big cards keep the catalogue red */
.shown.win{ outline:2px solid var(--win); }

/* the pot on a flat gold plate, so it reads apart from the players' plates (Ronan 2026-10-27); flat with no shadow, unlike the gold buttons */
.pot{ background:var(--gold); color:#1b1406; border:1px solid var(--gold-d); border-radius:10px; padding:2px 8px; font-size:13px; font-weight:800; letter-spacing:.4px; text-align:center; line-height:17px; height:55px; max-width:100%; white-space:nowrap; overflow:hidden; }
.pot .pl{ display:block; height:17px; }
.pot b{ color:#1b1406; font-size:15px; }
.pot small{ display:block; height:17px; white-space:nowrap; font-size:12px; font-weight:700; color:#2a1f08; letter-spacing:0; }
.pot .side-pots{ display:block; height:15px; line-height:15px; white-space:nowrap; font-size:12px; font-weight:700; color:#2a1f08; letter-spacing:0; }

.card{ width:var(--bw); height:calc(var(--bw) / .712); background:#fbf7ee; border-radius:6px; color:#111; position:relative; box-shadow:0 2px 4px rgba(0,0,0,.35); flex:none; transition:transform .18s, opacity .18s; }
.card.red{ color:var(--card-red); }
.card .c{ position:absolute; left:4px; top:3px; font-weight:800; font-size:calc(var(--bw) * .3); line-height:1; text-align:center; }
.card .s{ position:absolute; left:50%; top:56%; transform:translate(-50%,-50%); font-size:calc(var(--bw) * .42); }
.card.empty{ background:rgba(255,255,255,.07); box-shadow:none; border:1px dashed rgba(255,255,255,.3); }
.card.back{ background:repeating-linear-gradient(45deg, #7a1d2b 0 6px, #8b2232 6px 12px); border:3px solid var(--cream); }
.card.win{ transform:translateY(-4px); outline:3px solid var(--win); outline-offset:1px; }
.card.lose{ opacity:.55; }
.hero .card{ width:var(--hw); height:calc(var(--hw) / .712); }
.hero .card .c{ font-size:calc(var(--hw) * .3); }
.hero .card .s{ font-size:calc(var(--hw) * .42); }

.log{ font-size:13px; font-weight:600; color:#E9ECF7; text-align:center; line-height:15px; height:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* D7 (Ronan 2026-10-27): two rows on phones, so every hand at a showdown is named */
@media (max-width:899px){ .log{ height:32px; line-height:16px; white-space:normal; text-overflow:clip; } }
.log.tip{ color:var(--gold-t); }
.instr{ text-align:center; font-family:Georgia, serif; font-weight:700; font-size:14px; letter-spacing:.8px; color:var(--gold-t); line-height:17px; margin-top:auto; height:34px; overflow:hidden; }
.instr .t{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.instr small{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.instr small{ font-family:Inter, Arial, sans-serif; font-size:13px; letter-spacing:0; color:#EEF0FA; font-weight:600; line-height:17px; }
.hero{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.hline{ height:18px; display:flex; align-items:center; gap:2px; font-size:13px; font-weight:800; white-space:nowrap; line-height:18px; }
.hline > *{ line-height:16px; }
.hline.turn::before{ content:"▸"; color:var(--active); margin-right:3px; }
.hline .mk2{ background:var(--cream); color:#111; border-radius:8px; padding:0 4px; font-size:13px; margin:0 2px; }
.hline .stk{ color:var(--gold-t); margin-left:2px; }
.hline em{ font-style:normal; color:var(--gold-t); font-family:Georgia, serif; margin-left:5px; }
.hcards{ display:flex; gap:6px; position:relative; }
.hcards.turn .card{ box-shadow:0 0 0 3px var(--active), 0 2px 4px rgba(0,0,0,.35); }

/* raise panel (L4): opens where your cards are */
.sizing{ display:none; flex-direction:column; justify-content:center; gap:6px; background:rgba(10,14,30,.72); border:1px solid #4a5a8c; border-radius:12px; padding:6px; width:min(100%, 420px); }
body.sizing-open .sizing{ display:flex; }
body.sizing-open .hcards .card{ display:none; }
body.sizing-open .hintrow{ display:none; } /* the Hint has nothing to say mid-raise; its row gives the panel room */
.sizing .pr{ display:flex; gap:4px; }
.sizing button{ border:1px solid #4a5a8c; background:#26345e; border-radius:9px; font-weight:800; font-size:12px; line-height:13px; min-height:44px; }
.sizing .pr button{ flex:1; padding:0 2px; }
.sizing .sl{ display:flex; gap:6px; align-items:center; }
.sizing .sl button{ width:44px; font-size:18px; }
.sizing input[type=range]{ flex:1; height:44px; margin:0; accent-color:var(--gold-b); }

.hintrow{ display:flex; justify-content:center; min-height:18px; }
.hintbtn{ border:0; background:linear-gradient(var(--gold-b), var(--gold-d)); color:#1b1406; font-size:12px; font-weight:800; border-radius:9px; padding:1px 12px; line-height:16px; }
body.coach-off .hintbtn{ visibility:hidden; }
.band{ display:flex; gap:6px; }
.act{ flex:1; min-width:0; min-height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; text-transform:uppercase; background:linear-gradient(#26345e,#18213d); border:1px solid #4a5a8c; color:var(--cream); padding:0 4px; }
.act.gold{ background:linear-gradient(var(--gold-b), var(--gold-d)); color:#1b1406; border:0; }
.act:disabled{ opacity:.45; cursor:default; }
.act.hinted{ outline:3px solid var(--active); outline-offset:2px; }
.act[hidden]{ display:none; }
.reason{ position:absolute; left:8px; right:8px; bottom:62px; background:#0b0c12; border:1px solid var(--gold); border-radius:10px; padding:8px 10px; font-size:13px; font-weight:600; line-height:18px; z-index:5; }
.reason b{ color:var(--gold-b); }

/* D11-D15 (Ronan 2026-10-27): no history or session columns on the table; reads, hand rankings and this
   game's line where the box has room (the side columns D1, or the panel beside your cards in D2) */
.side{ display:none; background:rgba(10,14,30,.5); border:1px solid #3A4A7C; border-radius:10px; padding:8px 10px; font-size:13px; font-weight:600; line-height:18px; overflow:hidden; }
.info{ display:none; }
.infopanel{ position:absolute; inset:0; background:rgba(10,14,30,.6); border:1px solid #3A4A7C; border-radius:10px; padding:8px 12px; font-size:13px; font-weight:600; line-height:18px; overflow:hidden; }
.infopanel.compact{ line-height:16px; padding:6px 10px; }
.side h4, .infopanel h4{ font-family:Georgia, serif; font-size:13px; letter-spacing:1.2px; color:var(--gold-t); margin:0 0 4px; font-weight:700; }
.rtab{ border-collapse:collapse; width:100%; }
.rtab td, .rtab th{ padding:0 0 0 6px; text-align:right; white-space:nowrap; font-weight:600; }
.rtab th{ color:var(--gold-t); font-weight:700; }
.rtab td:first-child, .rtab th:first-child{ text-align:left; padding-left:0; }
.rtab td.sty{ text-align:left; }
.rtab td.n{ font-family:"IBM Plex Mono", Menlo, monospace; }
.rlist{ margin:0; padding:0; list-style:none; columns:2; column-gap:14px; }
.side .rlist{ columns:1; }
.rlist li{ white-space:nowrap; padding:0 4px; border-radius:4px; }
.rlist li.lit, #rulesOverlay li.lit{ background:var(--gold); color:#14100A; }
.rlist li.lit b, #rulesOverlay li.lit b{ color:#14100A; }
.sessline{ margin-top:6px; border-top:1px solid #3A4A7C; padding-top:5px; white-space:nowrap; }
.infopanel.compact .sessline{ margin-top:4px; padding-top:3px; }
.iswitch{ display:flex; gap:6px; margin-bottom:6px; }
.iswitch button{ flex:1; min-height:28px; font:inherit; font-weight:700; color:#fff; background:transparent; border:1px solid #3A4A7C; border-radius:6px; cursor:pointer; }
.infopanel.compact .iswitch{ margin-bottom:4px; } .infopanel.compact .iswitch button{ min-height:26px; }
.iswitch button.sel{ background:var(--gold); border-color:var(--gold); color:#14100A; }
#rulesOverlay [data-body="ranks"] ol{ list-style-position:inside; padding-left:0; }
#rulesOverlay [data-body="ranks"] li{ padding:0 4px; border-radius:4px; }
.hline.tappable{ cursor:pointer; }
.seat .ac.toact{ color:var(--gold-t); }
.seat .ac.next span{ display:inline-block; background:var(--gold); color:#14100A; border-radius:4px; padding:0 5px; }

/* ---------- desktop ---------- */
@media (min-width:900px){
  .hdr{ display:flex; justify-content:space-between; align-items:center; padding:8px 16px; }
  .title{ font-size:22px; } .bal{ display:none; }
  .hbtns{ margin:0; gap:6px; } .hbtn{ flex:none; min-height:44px; padding:5px 12px; font-size:13px; border-radius:10px; }
  .felt{ margin:6px 14px 0; display:grid; grid-template-columns:340px minmax(0,1fr) 340px; column-gap:14px; row-gap:6px; padding:12px 14px;
    grid-template-areas:"sl table sr" "sl log sr" "sl instr sr" "sl hero sr" "sl hint sr" "sl band sr"; grid-template-rows:auto auto 1fr auto auto auto; }
  .side{ display:block; } .side.l{ grid-area:sl; } .side.r{ grid-area:sr; }
  .table{ grid-area:table; grid-template-columns:1fr auto 1fr; gap:clamp(22px, 3vh, 30px) clamp(24px, 3vw, 48px);
    grid-template-areas:"s2 s3 s4" "s1 board s5" ". pot ."; align-items:center; }
  .table .seat{ width:clamp(118px, 11vw, 168px); padding:6px 10px; justify-self:center; }
  #seat1, #seat2{ justify-self:start; } #seat4, #seat5{ justify-self:end; }
  .seat .nm, .seat .sk{ font-size:14px; }
  .potcell{ margin-top:-2px; } .board{ margin:0; gap:6px; }
  .log{ grid-area:log; } .instr{ grid-area:instr; font-size:16px; margin:0; align-self:end; } .instr small{ font-size:13px; }
  .hero{ grid-area:hero; } .hintrow{ grid-area:hint; } .band{ grid-area:band; max-width:560px; width:100%; justify-self:center; }
  .reason{ left:50%; right:auto; transform:translateX(-50%); width:min(520px, 60%); bottom:70px; }
}
/* desktop, D2 composition (pot beside the board, you between the table and the controls, no side columns).
   D6 (Ronan 2026-10-27): the game measures both desktop layouts and uses the side columns (D1) only when the
   cards keep their full size with them; otherwise this one. body.d2 is set by fitCards(). */
@media (min-width:900px){
  body.d2 .felt{ grid-template-columns:minmax(0,1fr) min(420px, 36vw) minmax(0,1fr); column-gap:18px; row-gap:4px; padding:8px 14px;
    grid-template-areas:"table table table" "log log log" ". hero instr" ". hero hint" ". hero band"; grid-template-rows:auto auto 1fr auto auto; }
  body.d2 .side{ display:none; }
  body.d2.noinfo .info{ display:none !important; }
  body.d2 .info{ display:block; grid-column:1; grid-row:3 / 6; position:relative; min-height:0; min-width:0; }
  /* the pot beside the board, not under it: the row it frees goes to the cards */
  body.d2 .table{ grid-template-columns:1fr auto auto 1fr; grid-template-areas:"s2 s3 s3 s4" "s1 board pot s5"; }
  body.d2 .potcell{ margin:0; }
  body.d2 .pot{ width:118px; } /* a set width: a longer amount never shifts the board */
  body.d2 .instr{ text-align:left; justify-self:stretch; min-width:0; align-self:end; }
  body.d2 .hintrow{ justify-content:flex-start; }
  body.d2 .band{ justify-self:start; width:100%; max-width:380px; }
  body.d2 .band .act{ flex:1 1 0; min-width:0; }
  body.d2 .hero{ align-self:end; }
  /* the raise panel opens where your cards are (as L4); on a desktop (mouse) its buttons are 36px so it fits a short box (H22's 44px is for phones) */
  body.d2 .sizing button{ min-height:36px; }
}

/* D8 (Ronan 2026-10-27): a phone held sideways — one-row header; the five players in one strip; board and pot
   under them; your cards on the left, the instruction, Hint and buttons on the right. */
@media (max-width:899px) and (orientation:landscape) and (max-height:500px){
  .hdr{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:3px 8px; }
  .hrow{ flex:none; } .bal{ display:none; }
  .hbtns{ margin:0; gap:4px; } .hbtn{ flex:none; min-height:44px; padding:3px 10px; }
  .felt{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:14px; row-gap:4px; padding:6px 10px;
    grid-template-areas:"table table" "log log" "hero instr" "hero hint" "hero band"; grid-template-rows:auto auto 1fr auto auto; }
  .table{ grid-area:table; grid-template-columns:repeat(5, minmax(0,1fr)); grid-template-areas:"s1 s2 s3 s4 s5" "board board board board pot"; gap:4px 8px; }
  .log{ grid-area:log; height:16px; line-height:16px; white-space:nowrap; }
  .instr{ grid-area:instr; text-align:left; margin:0; align-self:end; }
  .hero{ grid-area:hero; align-self:end; } .hintrow{ grid-area:hint; justify-content:flex-start; } .band{ grid-area:band; }
  .pot{ width:118px; } .potcell{ justify-content:flex-start; }
}

/* D9 (Ronan 2026-10-27): only when the table can't fit at the smallest cards (the iPhone SE). fitCards() sets
   body.short by measurement. D9a: the Hint on your own line. D9b: the raise panel opens as a sheet over your
   cards and the instruction, its cost line on top, Back and Raise in their usual place. */
.sizecost{ display:none; }
body.short .hero{ display:grid; grid-template-columns:auto auto; justify-content:center; align-items:center; column-gap:8px; row-gap:4px; }
body.short .hero .hline{ grid-column:1; grid-row:1; }
body.short .hero .hintrow{ grid-column:2; grid-row:1; margin:0; }
body.short .hero .hcards{ grid-column:1 / -1; grid-row:2; justify-self:center; }
body.short.sizing-open .sizing{ position:absolute; left:8px; right:8px; width:auto; bottom:var(--sheet-bottom, 58px); background:#0e1428; z-index:2; box-shadow:0 -6px 16px rgba(0,0,0,.45); }
/* what the sheet covers is hidden, never left peeking out from under it (readability: text cut by 1px) */
body.short.sizing-open #instruction, body.short.sizing-open #hline, body.short.sizing-open #log, body.short.sizing-open .hero .hintrow{ visibility:hidden; }
body.short.sizing-open .sizecost{ display:block; text-align:center; font-size:13px; font-weight:600; line-height:17px; color:#EEF0FA; white-space:nowrap; overflow:hidden; }

/* ---------- panels ---------- */
#confirmOverlay{ z-index:30; }
.overlay{ position:fixed; inset:0; background:rgba(5,7,14,.78); display:none; align-items:center; justify-content:center; z-index:20; padding:10px; }
.overlay.open{ display:flex; }
.panel{ background:#141a2e; border:2px solid var(--gold); border-radius:16px; padding:14px 16px; width:min(100%, 460px); max-height:100%; overflow:hidden; display:flex; flex-direction:column; gap:8px; }
.panel h2{ margin:0; font-family:Georgia, serif; font-size:20px; color:var(--gold-b); text-align:center; }
.panel p{ margin:0; font-size:14px; line-height:20px; font-weight:600; }
.panel .sub{ text-align:center; color:var(--ink-2); font-size:13px; font-weight:600; }
.panel .btns{ display:flex; gap:8px; } .panel .btns .act{ flex:1; }
.choice{ display:flex; gap:6px; }
.choice button{ flex:1; min-height:44px; border-radius:10px; border:1px solid #4a5a8c; background:#26345e; font-weight:800; font-size:13px; padding:4px; }
.choice button small{ display:block; font-size:12px; font-weight:600; color:var(--ink-2); }
.choice button.sel{ background:linear-gradient(var(--gold-b), var(--gold-d)); color:#1b1406; border-color:transparent; }
.choice button.sel small{ color:#3a2c0a; }
.grp-label{ font-size:12px; font-weight:800; letter-spacing:1px; color:var(--gold-b); text-transform:uppercase; }
.resume-line{ text-align:center; font-size:13px; font-weight:600; color:var(--ink-2); margin-top:10px; } /* clear of the focus ring round Resume hand (3px + 2px) */
.or-new{ font-size:13px; font-weight:800; text-align:center; color:var(--cream); margin-top:2px; }
.tabs{ display:flex; gap:4px; } .tabs button{ flex:1; min-height:44px; border-radius:9px; border:1px solid #4a5a8c; background:#26345e; font-weight:800; font-size:13px; }
.tabs button.sel{ background:linear-gradient(var(--gold-b), var(--gold-d)); color:#1b1406; }
.tabbody{ font-size:13px; line-height:18px; font-weight:600; overflow:hidden; }
.tabbody p{ margin:0 0 6px; font-size:13px; line-height:18px; }
.tabbody ol{ margin:0; padding-left:18px; } .tabbody li{ margin:0 0 2px; }
/* Rules on the shortest boxes (H12: fits without scrolling). A phone held sideways reads it in two columns
   across a wider panel; the iPhone SE packs its lines 1px closer and its panel's margins tighter. */
@media (max-width:899px) and (orientation:landscape) and (max-height:500px){
  #rulesOverlay .panel{ width:min(100%, 820px); padding:10px 14px; gap:6px; }
  #rulesOverlay .tabbody{ column-count:2; column-gap:18px; }
  #rulesOverlay .tabbody p, #rulesOverlay .tabbody li{ break-inside:avoid; }
}
@media (max-height:520px) and (orientation:portrait){
  #rulesOverlay .panel{ padding:10px 12px; gap:6px; }
  #rulesOverlay .panel{ gap:4px; }
  #rulesOverlay .tabbody, #rulesOverlay .tabbody p{ line-height:17px; } #rulesOverlay .tabbody p{ margin-bottom:3px; }
}
@media (max-width:899px) and (orientation:landscape) and (max-height:380px){
  #rulesOverlay .tabbody, #rulesOverlay .tabbody p{ font-size:12px; line-height:16px; } #rulesOverlay .tabbody p{ margin-bottom:4px; }
}
.hist{ overflow:auto; max-height:min(52vh, 360px); font-size:13px; line-height:18px; font-weight:600; display:flex; flex-direction:column; gap:4px; }
.hist button{ text-align:left; border:1px solid #3A4A7C; background:#18213d; border-radius:8px; padding:6px 8px; min-height:44px; font-weight:600; font-size:13px; }
.hist pre{ white-space:pre-wrap; font-family:"IBM Plex Mono", Menlo, monospace; font-size:12px; line-height:16px; margin:0; background:#0b0c12; border-radius:8px; padding:8px; }
.setrow{ display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:14px; font-weight:600; min-height:44px; }
.setrow select{ min-height:40px; border-radius:8px; background:#26345e; color:var(--cream); border:1px solid #4a5a8c; font-weight:700; padding:0 8px; }
.setrow input[type=checkbox]{ width:24px; height:24px; accent-color:var(--gold-b); }
.stylepop{ position:absolute; z-index:20; background:#0b0c12; border:1px solid var(--gold); border-radius:9px; padding:6px 8px; font-size:12px; font-weight:600; line-height:16px; max-width:250px; }
.stylepop .tg{ color:var(--gold-t); }

@media (prefers-reduced-motion:reduce){ .card, .seat{ transition-duration:1ms; } }
body.reduce-motion .card, body.reduce-motion .seat{ transition-duration:1ms; }