/* The game's own look: oat paper, ink, and two teams — coral and blue. Rounded type to go with the eyes. */
:root {
  --paper: #ffffff; --table: #f2f3f5; --card: #f7f7f8; --line: #e2e4e8;
  --ink: #1a1b1e; --ink-2: #5a5d63; --ink-3: #8d9096;
  --coral: #ef6a4c; --blue: #2f5d9e; --good: #3f8f58; --bad: #c2452d;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--paper); color: var(--ink);
  font: 15px/1.4 ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; overflow: hidden; display: flex; flex-direction: column;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
[hidden] { display: none !important; }

/* ---- top bar ---- */
.top { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 24px 4px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 34px; letter-spacing: -1.2px; }
.brand svg { width: 40px; height: 40px; }
.top-nav { display: flex; align-items: center; gap: 4px; }
.link { padding: 7px 13px; border-radius: 999px; font-weight: 700; color: var(--ink); }
.link:hover { background: var(--table); }
.link.quiet { color: var(--ink-3); font-weight: 600; }

/* ---- stage ---- */
.stage { flex: 1; min-height: 0; display: flex; gap: 20px; padding: 10px 24px 22px; }
.board-wrap { position: relative; flex: 1; min-width: 0; border-radius: 22px; overflow: hidden; background: var(--table); }
#board { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#board:active { cursor: grabbing; }
#board2d { width: 100%; height: 100%; display: block; touch-action: none; }
#board[hidden], #board2d[hidden] { display: none; }
.view-pick { position: absolute; top: 12px; right: 12px; background: var(--paper); }
.view-pick .choice { padding: 5px 12px; font-size: 13px; }
.live-tag { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); background: var(--card); color: var(--ink-2); font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; pointer-events: none; white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }

/* ---- side column ---- */
.panel { width: 380px; flex: none; display: flex; flex-direction: column; gap: 12px; min-height: 0; }

.seats { display: flex; flex-direction: column; gap: 8px; flex: none; }
.seat { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: 16px; padding: 10px 14px; border: 2px solid transparent; }
.seat.turn { border-color: var(--ink); }
.seat-face { flex: none; width: 38px; height: 44px; }
.seat-who { min-width: 0; flex: 1; }
.seat-name { font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat-name em { font-style: normal; font-weight: 700; font-size: 12px; color: var(--ink-3); margin-left: 7px; font-variant-numeric: tabular-nums; }
.seat-team { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.seat-state { font-size: 12px; font-weight: 700; color: var(--ink-2); min-height: 17px; }
.seat.turn .seat-state { color: var(--ink); }
.seat.won .seat-state { color: var(--good); }
.stacks { display: flex; align-items: flex-end; gap: 5px; flex: none; height: 40px; }

.seg { display: flex; background: var(--table); border-radius: 12px; padding: 3px; gap: 2px; flex: none; }
.seg > button { flex: 1; min-width: 0; padding: 8px 4px; border-radius: 9px; font-weight: 700; font-size: 13px; color: var(--ink-2); display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.seg > button:hover { color: var(--ink); }
.seg > button.selected, .seg > button.active { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(33, 30, 26, .14); }
.tab-body .seg { background: var(--paper); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.coral { background: var(--coral); } .dot.blue { background: var(--blue); }

.tab-body { flex: 1; min-height: 0; overflow-y: auto; background: var(--card); border-radius: 16px; padding: 16px 18px 18px; display: flex; flex-direction: column; }
.field-label { font-size: 12px; font-weight: 700; color: var(--ink-3); margin: 14px 0 6px; }
.field-label:first-child { margin-top: 0; }

.btn { background: var(--ink); color: var(--card); font-weight: 800; font-size: 14px; border-radius: 999px; padding: 10px 18px; transition: background .12s; }
.btn:hover { background: var(--coral); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .35; cursor: default; background: var(--ink); }
.btn.big { font-size: 18px; padding: 14px; margin-top: 20px; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); background: transparent; }
.btn.ghost:disabled { box-shadow: inset 0 0 0 1.5px var(--line); background: transparent; }
.btn.ghost.nudge { box-shadow: inset 0 0 0 2px var(--coral); }
.btn.wide { width: 100%; margin-top: 12px; }

.join-row { display: flex; gap: 8px; }
.join-row input { flex: 1; min-width: 0; background: var(--paper); border: 1.5px solid transparent; border-radius: 999px; padding: 9px 15px; font-weight: 600; outline: none; }
.join-row input:focus { border-color: var(--ink); }
#joinCode { text-transform: uppercase; letter-spacing: 3px; }
.note { color: var(--ink-2); font-size: 13px; margin: 12px 0 0; min-height: 18px; text-align: center; }
.note.bad { color: var(--bad); }
.room { margin-top: 16px; padding-top: 16px; border-top: 1.5px dashed var(--line); }
.room-title { font-weight: 800; font-size: 16px; }
.room-sub { color: var(--ink-2); font-size: 13px; margin: 2px 0 10px; }
.room-code { color: var(--ink-2); font-size: 13px; margin-top: 10px; }
.room-code b { color: var(--ink); letter-spacing: 3px; margin-left: 4px; }

/* ---- moves ---- */
.moves-head { font-weight: 700; font-size: 13px; color: var(--ink-3); padding-bottom: 8px; }
.moves { flex: 1; min-height: 80px; overflow-y: auto; font-size: 14px; font-variant-numeric: tabular-nums; }
.mv-row { display: grid; grid-template-columns: 34px 1fr 1fr; padding: 4px 0; align-items: center; border-bottom: 1px solid var(--paper); }
.mv-num { color: var(--ink-3); font-weight: 600; }
.mv { font-weight: 700; display: flex; align-items: center; gap: 6px; }
.mv::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
.mv + .mv::before { background: var(--blue); }
.mv.none::before { display: none; }
.mv.cur span { background: var(--ink); color: var(--card); border-radius: 6px; padding: 0 6px; }
.moves-empty { color: var(--ink-3); padding: 8px 0; }
.controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 14px; flex: none; }
.controls .btn { padding: 9px 4px; font-size: 13px; }

/* ---- ladder ---- */
.lb-scope { color: var(--ink-3); font-size: 12px; font-weight: 600; margin: 14px 0 6px; }
.lb { flex: 1; overflow-y: auto; }
.lb-row { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; font-size: 14px; }
.lb-row.me { background: var(--paper); }
.lb-rank { color: var(--ink-3); font-weight: 800; }
.lb-rank.top { color: var(--coral); }
.lb-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-name small { color: var(--ink-3); font-weight: 600; font-size: 11px; margin-left: 8px; }
.lb-pts { font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---- result + rules ---- */
.result { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); background: var(--card); border-radius: 18px; padding: 16px 44px 16px 22px; display: flex; align-items: center; gap: 18px; box-shadow: 0 8px 28px rgba(33, 30, 26, .16); max-width: calc(100% - 24px); flex-wrap: wrap; }
.result-title { font-size: 20px; font-weight: 800; white-space: nowrap; }
.result-sub { color: var(--ink-2); font-size: 13px; }
.result-pts { font-weight: 800; color: var(--good); font-size: 13px; }
.result-pts.neg { color: var(--bad); }
.result-actions { display: flex; gap: 8px; }
.x { position: absolute; right: 10px; top: 6px; font-size: 22px; color: var(--ink-3); padding: 2px 8px; border-radius: 50%; }
.x:hover { color: var(--ink); }
.sheet { position: fixed; inset: 0; background: rgba(33, 30, 26, .4); display: grid; place-items: center; padding: 16px; z-index: 5; }
.sheet-card { position: relative; background: var(--card); border-radius: 22px; max-width: 540px; width: 100%; max-height: 100%; overflow-y: auto; padding: 26px 30px; }
.sheet-card h2 { margin: 0 0 12px; font-size: 24px; font-weight: 800; letter-spacing: -0.4px; }
.sheet-card ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; color: var(--ink-2); }
.sheet-card li b { color: var(--ink); }
.fine { color: var(--ink-2); font-size: 13px; margin: 14px 0 0; }
.fine b { color: var(--ink); }

/* ---- settings ---- */
.switches { display: flex; flex-direction: column; gap: 6px; }
.switch { display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 12px; border-radius: 12px; background: var(--paper); }
.switch span { flex: 1; min-width: 0; }
.switch b { display: block; font-size: 14px; font-weight: 800; }
.switch small { display: block; font-size: 12px; color: var(--ink-3); font-weight: 600; line-height: 1.35; margin-top: 1px; }
.switch i { flex: none; width: 40px; height: 24px; border-radius: 999px; background: var(--line); position: relative; transition: background .15s; }
.switch i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--card); transition: transform .15s; }
.switch[aria-pressed="true"] i { background: var(--ink); }
.switch[aria-pressed="true"] i::after { transform: translateX(16px); }
.themes { display: flex; flex-wrap: wrap; gap: 6px; }
.theme-chip { display: flex; align-items: center; gap: 7px; padding: 6px 12px 6px 7px; border-radius: 999px; background: var(--paper); font-weight: 700; font-size: 13px; border: 2px solid transparent; }
.theme-chip.selected { border-color: var(--ink); }
.theme-chip em { display: flex; border-radius: 999px; overflow: hidden; }
.theme-chip em i { width: 10px; height: 18px; display: block; }
.swatches { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0 8px; }
.swatch { display: flex; align-items: center; gap: 9px; background: var(--paper); border-radius: 12px; padding: 7px 10px; font-size: 13px; font-weight: 700; cursor: pointer; }
.swatch input { width: 30px; height: 30px; border: 0; padding: 0; background: none; border-radius: 8px; cursor: pointer; flex: none; }
.swatch input::-webkit-color-swatch-wrapper { padding: 0; }
.swatch input::-webkit-color-swatch { border: 1.5px solid var(--line); border-radius: 8px; }
.avatar-opts { display: flex; flex-direction: column; gap: 6px; }
.avatar-opts .seg > button { text-transform: capitalize; }
.set-note { color: var(--ink-3); font-size: 12px; font-weight: 600; margin: 10px 0 0; line-height: 1.4; }

/* ---- talk ---- */
.bubble { position: absolute; transform: translate(-50%, -100%); max-width: 250px; background: var(--card); color: var(--ink); border-radius: 16px; padding: 9px 14px; font-weight: 700; font-size: 14px; line-height: 1.3; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); pointer-events: none; text-align: center; }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 14px; height: 14px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 3px; }
.bubble.side::after { left: -6px; bottom: 50%; transform: translateY(50%) rotate(45deg); }
.talk { flex: none; padding-top: 10px; border-top: 1.5px dashed var(--line); margin-top: 8px; }
.talk-log { max-height: 84px; overflow-y: auto; font-size: 13px; display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.talk-log div { color: var(--ink-2); }
.talk-log b { color: var(--ink); margin-right: 5px; }
.talk .btn { padding: 8px 12px; font-size: 13px; white-space: nowrap; }
.talk-note { font-size: 12px; color: var(--ink-3); font-weight: 600; margin-top: 4px; }
.seg.tabs > button { font-size: 12.5px; }

/* ---- home: the logo brings you here. Same board on the right, the front door on the left ---- */
body:not(.home) .home-col { display: none; }
body.home .panel { display: none; }
.home-col { width: min(500px, 42%); flex: none; overflow-y: auto; padding: 14px 10px 10px 14px; direction: rtl; } /* rtl = scrollbar on the far LEFT edge, not between the text and the board (Bennett) */
.home-col > * { direction: ltr; }
.home-col h1 { margin: 0; font-size: clamp(44px, 5.4vw, 76px); line-height: .92; letter-spacing: -2.5px; font-weight: 800; }
.home-col h2 { margin: 30px 0 10px; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.lede { margin: 16px 0 22px; font-size: 17px; line-height: 1.45; color: var(--ink-2); max-width: 30em; }
.home-cta { display: flex; flex-wrap: wrap; gap: 8px; }
.home-cta .btn { font-size: 16px; padding: 13px 22px; }
.home-level { margin: 12px 0 0; font-size: 13px; color: var(--ink-3); }
.home-level b { color: var(--ink-2); }
.textlink { color: var(--ink); font-weight: 700; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); padding: 2px; }
.textlink:hover { text-decoration-color: var(--ink); }
.boards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.board-card.special { border-color: var(--line); }
.board-card { background: var(--card); border-radius: 16px; padding: 12px; text-align: left; border: 2px solid transparent; display: flex; flex-direction: column; gap: 8px; }
.board-card:hover { border-color: var(--line); }
.board-card.selected { border-color: var(--ink); }
.board-card svg { width: 100%; height: auto; border-radius: 6px; display: block; }
.board-card b { font-size: 14px; font-weight: 800; display: block; }
.board-card span { font-size: 12px; color: var(--ink-3); font-weight: 600; line-height: 1.3; display: block; }
.home-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 30px; }
.home-card { background: var(--card); border-radius: 16px; padding: 14px 16px; min-width: 0; }
.home-card .k { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.home-card .big { font-size: 34px; font-weight: 800; letter-spacing: -1px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.home-card .sub { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.home-card .row { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; padding: 3px 0; }
.home-card .row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-card .row span:last-child { font-variant-numeric: tabular-nums; }
.home-how { margin: 0 0 12px; padding-left: 18px; color: var(--ink-2); display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.home-how b { color: var(--ink); }

/* ---- phone: board on top, column underneath ---- */
@media (max-width: 860px) {
  body { overflow: auto; display: block; }
  .top { padding: 10px 14px 2px; }
  .brand { font-size: 26px; }
  .brand svg { width: 32px; height: 32px; }
  .link { padding: 7px 9px; font-size: 14px; }
  .stage { flex-direction: column; padding: 8px 12px 18px; gap: 12px; }
  .board-wrap { flex: none; aspect-ratio: 0.92; border-radius: 18px; }
  .panel { width: 100%; }
  .home-col { width: 100%; order: -1; padding: 6px 2px 0; overflow: visible; }
  .home-col h1 { letter-spacing: -1.5px; }
  body.home .board-wrap { aspect-ratio: 1.15; }
  .tab-body { min-height: 340px; }
  .result { padding: 14px 40px 14px 16px; gap: 10px; }
}
#onlineBtn { margin-top: 8px; }
#tab-new.waiting > :not(#lobby) { display: none; }
#tab-new.waiting #lobby { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---- Bennett, 2026-09-22: "trash the right hand panel and put the board in the very middle" ----
   While a game is on the side column goes away completely and the board takes the whole stage, centred. The few
   things you still need ride ON the board: the two seats along the top, the buttons along the bottom, and a little
   chat window in the corner ("put a little chatbox style chatwindow for you to shittalk your opponent").
   The move list is one tap away on the Moves button, which brings the panel back. */
body.playing .tabs [data-tab="new"], body.playing .tabs [data-tab="set"] { display: none; }
body.playing .panel { display: none; }
body.playing.panel-open .panel { display: flex; }
body.playing .board-wrap { max-width: 1180px; margin: 0 auto; }
body.playing.panel-open .board-wrap { max-width: none; margin: 0; }

/* The HUD on the board. Hidden unless a game is on: the home/demo board stays bare. */
.seats, .controls { display: none; }
body.playing .seats {
  display: flex; flex-direction: row; gap: 10px; align-items: flex-start; justify-content: space-between;
  position: absolute; top: 12px; left: 12px; right: 104px; z-index: 3; pointer-events: none;
}
body.playing .seats .seat { flex: 0 1 330px; min-width: 210px; background: var(--card); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
body.playing .controls {
  display: flex; gap: 8px; position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 3;
}
body.playing .controls .btn { background: var(--card); padding: 9px 14px; font-size: 13px; }
body.playing .live-tag { display: none; }

/* The chat window: a small card in the bottom-left corner of the board that folds down to its header. */
body.playing .talk {
  display: block; position: absolute; left: 12px; bottom: 12px; z-index: 4; width: 260px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; border-top: 1.5px solid var(--line);
  padding: 0; margin: 0; box-shadow: 0 4px 16px rgba(0,0,0,.08); overflow: hidden;
}
.talk-head { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 13px; font-size: 13px; font-weight: 800; color: var(--ink); background: none; }
.talk-head i { font-style: normal; color: var(--ink-3); font-size: 11px; transition: transform .15s; }
.talk-body { padding: 0 13px 11px; }
body.playing .talk.folded .talk-body { display: none; }
body.playing .talk.folded .talk-head i { transform: rotate(-90deg); }
body.playing .talk-log { max-height: 120px; }

/* The end-of-game card sits above the seats, and below them so it does not land on top of one. */
.result { z-index: 6; }
body.playing .result { top: 78px; }

@media (max-width: 760px) {
  /* Phone: seats along the top (names truncate rather than overflow), the bottom strip is the view switch on the
     left and the buttons on the right, and the chat window folds up from just above them. */
  body.playing .board-wrap { aspect-ratio: 0.78; }  /* taller than the home board: the HUD eats the top and bottom */
  body.playing .seats { left: 8px; right: 8px; top: 8px; gap: 6px; }
  body.playing .seats .seat { padding: 7px 9px; gap: 7px; border-radius: 13px; min-width: 0; flex: 1 1 0; }
  body.playing .seats .seat-face { width: 24px; height: 28px; }
  body.playing .seats .seat-name { font-size: 12.5px; }
  body.playing .seats .seat-name em { display: none; }
  body.playing .seats .seat-team, body.playing .seats .seat-state { font-size: 11px; }
  /* the cups still in hand are on the board itself, so the seat drops them and keeps the name and whose turn it is */
  body.playing .seats .stacks { display: none; }
  body.playing .view-pick { top: auto; bottom: 8px; left: 8px; right: auto; }
  body.playing .controls { left: 78px; right: 8px; bottom: 8px; transform: none; gap: 6px; justify-content: flex-end; }
  body.playing .controls .btn { padding: 6px 10px; font-size: 12px; }
  body.playing .controls #flipBtn { display: none; }  /* rare, and there is no room; it is there on a big screen */
  body.playing .talk { left: 8px; right: 8px; bottom: 52px; width: auto; }
  body.playing .talk-log { max-height: 88px; }
}