:root{
  --felt:#0E5C3A; --felt-dark:#0A4A2E; --rail:#5B2E1A; --rail-hi:#7A3F24;
  --ink:#0B0B0B; --cream:#F7F0DA; --brand:#FFE500; --red:#E02128;
  --display:'Luckiest Guy','Arial Black',Impact,system-ui,sans-serif;
  --body:'Space Mono',ui-monospace,monospace;
}
@font-face{font-family:'Luckiest Guy';src:url('../../assets/fonts/luckiest-guy-400.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Space Mono';src:url('../../assets/fonts/space-mono-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Space Mono';src:url('../../assets/fonts/space-mono-700.woff2') format('woff2');font-weight:700;font-display:swap}

*{box-sizing:border-box;margin:0;padding:0}
body{background:#12100E;color:var(--cream);font-family:var(--body);min-height:100vh;
  display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px}
h1{font-family:var(--display);font-size:26px;letter-spacing:1px;color:var(--brand)}
h1 span{color:var(--red)}

/* ONE UNIT IS ONE PERCENT OF THE TABLE'S OWN WIDTH.
   Everything on the felt used to be sized in fixed pixels — a 132px seat, a
   58x82 card — while the table itself was min(96vw,980px). On a 390px phone
   that is a 374px table trying to hold six 132px seats: the left and right
   pairs hung off both edges of the screen (measured at -7px and +367px on a
   360px viewport, with horizontal scroll), every seat's cards covered the
   board, and your own hand sat on top of the FOLD button. The floor keeps it
   legible rather than letting it shrink to nothing; the cap is the size it has
   always been on a desktop, so nothing above 1020px moves at all. */
#room{position:relative;width:min(96vw,980px);aspect-ratio:16/10;
  --u:max(5.4px,min(0.96vw,9.8px))}
#felt{position:absolute;inset:0;border-radius:48% / 42%;
  background:radial-gradient(ellipse at 50% 40%,var(--felt) 0%,var(--felt-dark) 78%);
  border:14px solid var(--rail);box-shadow:0 0 0 3px var(--ink),inset 0 0 60px rgba(0,0,0,.45),0 18px 40px rgba(0,0,0,.5)}

#board{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);display:flex;gap:8px}
#pot{position:absolute;left:50%;top:64%;transform:translateX(-50%);font-weight:700;
  background:rgba(0,0,0,.42);border:2px solid var(--ink);border-radius:999px;padding:5px 16px;white-space:nowrap}

.card{width:calc(var(--u)*5.92);height:calc(var(--u)*8.37);border-radius:7px;background:#FFF;color:#111;
  border:2px solid var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;line-height:1;
  font-size:calc(var(--u)*2.04);box-shadow:0 3px 0 rgba(0,0,0,.35)}
.card.small{width:calc(var(--u)*4.08);height:calc(var(--u)*5.82);font-size:calc(var(--u)*1.53);border-radius:5px}
.card .suit{font-size:calc(var(--u)*1.94);margin-top:2px}
.card.small .suit{font-size:14px}
.card.red{color:#C4162B}
.card.back{background:repeating-linear-gradient(45deg,var(--red) 0 7px,#B0141B 7px 14px);color:transparent}
.card.muck{opacity:.32;filter:grayscale(1)}

.seat{position:absolute;width:calc(var(--u)*13.5);transform:translate(-50%,-50%);text-align:center}
.seat .pic{width:calc(var(--u)*7.96);height:calc(var(--u)*7.96);margin:0 auto;border-radius:50%;background:rgba(0,0,0,.3);
  border:3px solid var(--ink);overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
.seat .pic canvas,.seat .pic img,.seat .pic video{width:100%;height:100%;object-fit:contain;object-position:bottom}
/* The live clip sits over the still, so there is no gap while it buffers and
   nothing to see if it never starts. */
.seat .pic video{position:absolute;inset:0}
.seat .pic{position:relative;overflow:hidden}
.seat .pic.live img{visibility:hidden}
.seat .name{font-size:calc(var(--u)*1.23);font-weight:700;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat .chips{font-size:calc(var(--u)*1.23);color:var(--brand)}
.seat .hole{display:flex;gap:4px;justify-content:center;margin-top:4px}
.seat.turn .pic{border-color:var(--brand);box-shadow:0 0 0 4px rgba(255,229,0,.28)}
.seat.folded{opacity:.4}
.seat .tag{font-size:calc(var(--u)*1.02);letter-spacing:.5px;color:#9FE3BE;min-height:13px}
.seat .bet{position:absolute;left:50%;transform:translateX(-50%);top:-16px;font-size:calc(var(--u)*1.12);font-weight:700;
  background:var(--brand);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:1px 8px}
.dealer{position:absolute;right:-4px;top:-4px;width:22px;height:22px;border-radius:50%;background:#FFF;color:#111;
  border:2px solid var(--ink);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
/* A bot seat's badge — a small corner tag on the portrait circle so a human
   can tell a seat apart from a real player at a glance (see table.mjs's
   `viewFor`, the only place the `bot` flag this reads comes from). Anchored
   to `.pic` (already `position:relative`) at the opposite corner from
   `.dealer`, which anchors to `.seat` itself, so the two never collide. */
.seat .pic .botTag{position:absolute;left:-3px;bottom:-3px;background:var(--ink);color:var(--brand);
  font-size:8px;font-weight:700;letter-spacing:.4px;border:2px solid var(--brand);border-radius:5px;
  padding:1px 4px;line-height:1.3}
.seat .pic .botTag[hidden]{display:none}

#controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;min-height:44px}
button{font-family:var(--display);font-size:15px;letter-spacing:.5px;padding:9px 18px;border:3px solid var(--ink);
  border-radius:10px;background:var(--brand);color:var(--ink);cursor:pointer;box-shadow:0 4px 0 var(--ink)}
button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
button:disabled{opacity:.4;cursor:not-allowed}
button.red{background:var(--red);color:#FFF}
button.ghost{background:#2A2723;color:var(--cream)}
input[type=range]{width:190px;accent-color:var(--brand)}
#raiseWrap{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.35);border:2px solid var(--ink);
  border-radius:10px;padding:6px 10px}
#raiseVal{font-weight:700;color:var(--brand);min-width:56px;text-align:right}
#turnClock{font-family:var(--display);font-size:13px;letter-spacing:.5px;color:var(--brand);
  background:rgba(0,0,0,.4);border:2px solid var(--ink);border-radius:999px;padding:5px 12px;
  width:100%;text-align:center}
#turnClock.low{color:#FFF;background:var(--red)}

#log{width:min(96vw,980px);height:104px;overflow-y:auto;background:rgba(0,0,0,.35);
  border:2px solid var(--ink);border-radius:10px;padding:8px 12px;font-size:12px;line-height:1.55}
#log div:last-child{color:var(--brand)}
.hint{font-size:12px;opacity:.65;text-align:center;max-width:640px}
.hint.err{opacity:1;color:var(--red)}
a{color:var(--brand)}

/* --- the multiplayer lobby overlay (table.html / js/multiplayer.js) -------- */
/* #lobby and #controls set display:flex on an ID selector, which otherwise
   outranks the UA stylesheet's [hidden]{display:none} (id beats attribute) —
   el.hidden=true would silently do nothing without these. */
#lobby[hidden],#controls[hidden]{display:none}
#lobby{display:flex;flex-direction:column;align-items:center;gap:10px;
  background:rgba(0,0,0,.35);border:2px solid var(--ink);border-radius:14px;
  padding:22px 26px;max-width:380px;text-align:center}
#lobby code{background:rgba(0,0,0,.4);padding:2px 9px;border-radius:6px;
  color:var(--brand);font-weight:700;letter-spacing:1px}
#lobby .lobbyHint{font-size:12px;opacity:.75;word-break:break-all}
#lobby input{font-family:var(--body);font-size:15px;padding:9px 12px;
  border:2px solid var(--ink);border-radius:8px;background:var(--cream);color:var(--ink);width:100%}
#lobbyStatus{font-size:12px;min-height:14px}
#lobbyStatus.err{color:var(--red)}

/* A real player has no portrait, just initials on the brand yellow — the
   seam that plugs in a rigged character clip belongs to js/characters.js's
   ROSTER (bots and, eventually, NFTs), not to a person's own browser tab. */
.seat .pic .initial{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:calc(var(--u)*3.6);color:var(--brand)}

/* --- the lobby list (lobby.html / js/lobby.js) -----------------------------
   Two sections (practice tables, tournaments), each a header with a "new"
   button and a list of rows. Reuses the same felt/brand/ink palette as the
   rest of the room rather than introducing a second visual language for
   what is still, structurally, the front door to the same table. */
#lobbyPage{width:min(96vw,720px);display:flex;flex-direction:column;gap:22px}
.lobbySection{background:rgba(0,0,0,.28);border:2px solid var(--ink);border-radius:14px;padding:16px 18px}
.lobbySectionHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.lobbySectionHead h2{font-family:var(--display);font-size:17px;letter-spacing:.5px;color:var(--brand)}
.lobbySectionHead button{font-size:12px;padding:7px 12px;box-shadow:0 3px 0 var(--ink)}
.rowList{display:flex;flex-direction:column;gap:8px}
.rowEmpty{font-size:13px;opacity:.6;padding:6px 2px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:rgba(0,0,0,.3);
  border:2px solid var(--ink);border-radius:10px;padding:9px 12px}
.row .rowName{font-weight:700;flex:1 1 140px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .rowMeta{font-size:11px;opacity:.75;white-space:nowrap}
.pill{font-size:10px;font-weight:700;letter-spacing:.5px;padding:3px 8px;border-radius:999px;border:2px solid var(--ink);white-space:nowrap}
.pill.practice{background:var(--felt);color:var(--cream)}
.pill.tournament{background:var(--red);color:#FFF}
.row button{font-size:12px;padding:7px 14px;box-shadow:0 3px 0 var(--ink)}
.newForm{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:rgba(0,0,0,.3);
  border:2px solid var(--ink);border-radius:10px;padding:10px 12px;margin-bottom:10px}
.newForm[hidden]{display:none}
.newForm input{font-family:var(--body);font-size:13px;padding:8px 10px;border:2px solid var(--ink);
  border-radius:8px;background:var(--cream);color:var(--ink);flex:1 1 140px;min-width:0}
.newForm button{font-size:12px;padding:8px 14px}
.newForm .cancel{background:#2A2723;color:var(--cream)}
/* The bots count on "+ NEW TABLE" — a narrow number input rather than the
   full-width text inputs above it, since its own range (0-5) is already
   printed on the spinner and does not need the room a name does. */
.botsField{display:flex;align-items:center;gap:6px;font-size:11px;opacity:.8;flex:0 0 auto}
.botsField input{flex:0 0 auto;width:44px;text-align:center;padding:8px 4px}
.leaderRank{font-family:var(--display);font-size:12px;color:var(--brand);flex:0 0 22px;text-align:center}

/* --- the how-to-play page (how-to-play.html) -------------------------------
   Reuses .lobbySection for the same card-row look as the lobby rather than
   inventing a second content style, but this page is prose/lists, not rows,
   so it needs its own list markup on top of that shell. */
.lobbySection p{font-size:13px;line-height:1.6;margin-bottom:8px}
.lobbySection p:last-child{margin-bottom:0}
.howToSteps,.howToRanks{padding-left:1.4em}
.howToSteps li,.howToRanks li{font-size:13px;line-height:1.6;margin-bottom:6px}
.howToList{list-style:none}
.howToList li{font-size:13px;line-height:1.6;margin-bottom:6px;padding-left:1.1em;position:relative}
.howToList li::before{content:'\2022';position:absolute;left:0;color:var(--brand)}
.howToRanks li::marker,.howToSteps li::marker{color:var(--brand);font-weight:700}

/* --- the tournament status bar (tournament.html / js/tournament.js) ------- */
#tourneyBar{width:min(96vw,980px);display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;
  justify-content:center;background:rgba(0,0,0,.32);border:2px solid var(--ink);border-radius:12px;
  padding:9px 16px;font-size:12px}
#tourneyBar .stat b{color:var(--brand)}
#tourneyBar .stat.eliminated b{color:var(--red)}
#standings{width:min(96vw,520px);background:rgba(0,0,0,.32);border:2px solid var(--ink);
  border-radius:12px;padding:16px 20px;display:flex;flex-direction:column;gap:8px}
#standings[hidden]{display:none}
#standings h2{font-family:var(--display);color:var(--brand);font-size:18px;text-align:center;margin-bottom:4px}
#standings ol{list-style:none;display:flex;flex-direction:column;gap:5px}
#standings li{display:flex;justify-content:space-between;gap:10px;font-size:13px;
  background:rgba(0,0,0,.3);border-radius:8px;padding:6px 10px}
#standings li:first-child{background:var(--brand);color:var(--ink);font-weight:700}
#registered{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:380px}
#registered span{background:rgba(0,0,0,.35);border:2px solid var(--ink);border-radius:999px;
  padding:3px 10px;font-size:12px}

/* --- narrow screens --------------------------------------------------------
   Six seats round an oval need height more than width once the width is gone,
   and a square table brings the bottom seat 75px from the pot instead of 122 —
   a seat is 110px tall, so the readout ended up under your own portrait. These
   are the same selectors as above at the same specificity, so they have to sit
   at the END of the file: written next to #room they lost to the base rules
   further down and nothing moved. */
@media (max-width:620px){
  #room{aspect-ratio:1/1}
  #pot{top:57%}
  #board{top:40%}
}