/* The look, to UI_SPEC.md: near-black with a blue accent, faceted chip
   rims, one family of D / SB / BB badges, and every stack written as a
   dollar amount. The colours are the desktop app's own, from look.py, so
   the two apps look like one game. Only the look lives here: nothing in
   this file changes what the table does. */

:root {
  --page: #0a0d16;          /* the window itself */
  --panel: #12151f;         /* the log, the player boxes, raised things */
  --panel-edge: #262d40;    /* the 1px rim that makes a panel look raised */
  --panel-hover: #1b2030;
  --felt: #0d0f1a;          /* the table surface */
  --felt-edge: #2a3550;     /* the table's rim */
  --ink: #f2f3f7;
  --quiet: #8890a6;
  --faint: #4a5166;         /* writing on something switched off */
  --gold: #f0a83c;          /* amber: money, the pot, the badges */
  --mark: #4c8bf5;          /* blue: whose turn it is, focus, selection */
  --glow: rgba(76, 139, 245, 0.35);
  --red: #ef4444;
  --green: #4ade80;
  --card-face: #f4f2ec;
  --badge-ink: #1a1206;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 16px;
  background: var(--page);
  color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1 { font-size: 22px; margin: 0 0 16px; letter-spacing: 0.2px; }
h2 { font-size: 15px; margin: 22px 0 6px; color: var(--ink); }
p { margin: 6px 0; }
.note { color: var(--quiet); font-size: 13px; }
.trouble { color: var(--red); min-height: 20px; }
.strong { font-weight: 600; }

/* ------------------------------------------------------ typing and picking */

label { display: block; margin: 10px 0; color: var(--quiet); font-size: 14px; }
/* Hidden means hidden. A `display` rule of our own quietly beats the
   browser's own rule for the hidden attribute, and a box that is
   supposed to be put away then stays on screen - which is how the
   deposit box turned up on the sign-in screen. */
[hidden] { display: none !important; }
input, select {
  display: block;
  margin-top: 4px;
  padding: 9px 10px;
  width: 100%;
  max-width: 340px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  font: inherit;
}
input:focus, select:focus, button:focus-visible {
  outline: none;
  border-color: var(--mark);
  box-shadow: 0 0 0 3px var(--glow);
}
input[type="range"] { padding: 0; accent-color: var(--mark); }

/* ----------------------------------------------------------------- buttons */

.buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
button {
  padding: 9px 16px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--panel-edge);
  border-radius: 9px;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
button:hover:not(:disabled) { background: var(--panel-hover); }
button:disabled { color: var(--faint); cursor: default; }
button.quiet { color: var(--quiet); }

/* The three answers get three colours, so the one you are about to press
   is never in doubt. Switched off they go dark rather than grey: a bright
   red Fold button that does nothing reads as broken, not resting. */
#fold { background: var(--red); border-color: var(--red); color: #fff; }
#fold:hover:not(:disabled) { background: #dc3131; }
#fold:disabled { background: #2a1519; border-color: #3a1d22; color: #7a4a50; }
#call { background: #f2f2f2; border-color: #f2f2f2; color: var(--page); }
#call:hover:not(:disabled) { background: #d9dce3; }
#call:disabled { background: #1f2330; border-color: #2a3040; color: var(--faint); }
#raise { background: #3b7ff0; border-color: #3b7ff0; color: #fff; }
#raise:hover:not(:disabled) { background: #2d6ad6; }
#raise:disabled { background: #142441; border-color: #1c3158; color: #4f6690; }
#fold, #call, #raise { min-width: 104px; font-weight: 600; }

button.armed { border-color: var(--gold); color: var(--gold); }

/* The buttons that start something are blue, like Raise. */
#ready, #practice, #host {
  background: #3b7ff0; border-color: #3b7ff0; color: #fff; font-weight: 600;
}
#ready:hover, #practice:hover, #host:hover { background: #2d6ad6; }

#reconnecting {
  position: fixed; top: 0; left: 0; right: 0;
  padding: 7px; text-align: center; z-index: 2;
  background: #231a0b; color: var(--gold);
  border-bottom: 1px solid #574a2c;
}

/* ---------------------------------------------------------------- the table */

/* The table is drawn in design units, the desktop app's pixels, turned
   into real ones by --u (worked out by table.js from the width there is).
   --cw and --ch are a card's width and height in those units, and --f
   brings the writing down a little on a phone. */

.felt { position: relative; }
.table-area { position: relative; width: 100%; --u: 1px; --f: 1; --cw: 46; --ch: 64; }
.table-area > * { position: absolute; }

.oval {
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, #11152a 0%, var(--felt) 70%);
  border: calc(4 * var(--u)) solid var(--felt-edge);
  box-shadow: 0 0 calc(30 * var(--u)) rgba(76, 139, 245, 0.06);
}
.oval-rim {
  border-radius: 50%;
  border: calc(2 * var(--u)) solid #151a2a;
  pointer-events: none;
}

.pot {
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: calc(10 * var(--u));
  white-space: pre;
  color: var(--gold);
  font-weight: 700;
  font-size: max(15px, calc(19 * var(--u) * var(--f)));
}
.board {
  transform: translateX(-50%);
  display: flex; gap: calc(8 * var(--u));
}

/* A card on the table: the rank above, the suit below. */
.tcard {
  width: calc(var(--cw) * var(--u));
  height: calc(var(--ch) * var(--u));
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  line-height: 1.05;
  background: var(--card-face);
  border-radius: calc(6 * var(--u));
  color: #1b1b1b;
  font-weight: 700;
  box-shadow: 0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, 0.45);
}
.tcard .rank { font-size: max(12px, calc(var(--ch) * 0.3 * var(--u))); }
.tcard .suit { font-size: max(11px, calc(var(--ch) * 0.28 * var(--u))); }
.tcard.suit-h { color: #c0392b; }
.tcard.suit-d { color: #2f6fbf; }
.tcard.suit-c { color: #227a4b; }
.tcard.back {
  background: #3a4a8a;
  border: calc(2 * var(--u)) solid #26325a;
  box-shadow: none;
}
.tcard.dim { opacity: 0.35; }

/* One of the others: their box, their two cards, what they just did. */
.seat {
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  gap: calc(14 * var(--u));
}
.seat-box {
  padding: calc(5 * var(--u)) calc(8 * var(--u));
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: calc(8 * var(--u));
  text-align: center;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.seat-box.acting {
  border-color: var(--mark);
  box-shadow: 0 0 0 1px var(--mark), 0 0 calc(16 * var(--u)) var(--glow);
}
.seat-box.mine { border-color: var(--mark); }
.seat-name {
  display: flex; align-items: center; justify-content: center;
  gap: calc(4 * var(--u));
  font-size: max(12px, calc(13 * var(--u) * var(--f)));
  font-weight: 700;
  white-space: nowrap; overflow: hidden;
}
.seat-name .who { overflow: hidden; text-overflow: ellipsis; }
.seat-box.mine .who { color: #7fb0ff; }
.seat-chips {
  display: flex; align-items: center; justify-content: center;
  gap: calc(6 * var(--u));
  margin-top: calc(2 * var(--u));
  color: var(--gold);
  font-weight: 700;
  font-size: max(11px, calc(12 * var(--u) * var(--f)));
}
.hole { display: flex; gap: calc(6 * var(--u)); }
.seat-said {
  display: flex; align-items: center; justify-content: center;
  gap: calc(5 * var(--u));
  min-height: calc(16 * var(--u));
  color: var(--ink);
  font-size: max(11px, calc(12 * var(--u) * var(--f)));
  white-space: nowrap;
}
.seat.folded .seat-box, .seat.away .seat-box { opacity: 0.55; }
.seat.folded .seat-said { color: var(--quiet); }
/* The seconds left, beside the seat of whoever is being waited for. */
.seat-clock {
  padding: 1px calc(6 * var(--u));
  border-radius: 999px;
  background: rgba(240, 168, 60, 0.16);
  border: 1px solid rgba(240, 168, 60, 0.45);
  color: var(--gold);
  font-weight: 700;
}
.seat-clock.hurry {
  background: rgba(214, 77, 77, 0.18);
  border-color: rgba(214, 77, 77, 0.55);
  color: var(--red);
}

/* The same clock, said properly: who we are waiting for, how long they
   have, and a bar that drains while they think. */
.clock {
  margin: 10px 0 0;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 12px;
}
.clock.mine { border-color: rgba(240, 168, 60, 0.55); }
.clock-words {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 13px; color: var(--quiet); margin-bottom: 6px;
}
.clock.mine .clock-words { color: var(--gold); font-weight: 700; }
.clock.hurry .clock-words { color: var(--red); font-weight: 700; }
.clock-track {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}
.clock-bar {
  display: block; height: 100%; width: 100%;
  border-radius: 999px;
  background: var(--gold);
  transition: width 1s linear;
}
.clock.hurry .clock-bar { background: var(--red); }

/* You, at the bottom: what you just did above, your box beside your
   cards. */
.my-seat { gap: calc(4 * var(--u)); }
.my-row { display: flex; align-items: center; gap: calc(14 * var(--u)); }

.hand-number { color: var(--quiet); font-size: 12px; margin: 2px 0 0; text-align: center; }

/* Small cards, one line: in the history and in lists. */
.card {
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 2px;
  background: var(--card-face);
  border-radius: 4px;
  color: #1b1b1b;
  font-weight: 700;
}
.card.suit-h { color: #c0392b; }
.card.suit-d { color: #2f6fbf; }
.card.suit-c { color: #227a4b; }

/* One family of badge for the dealer and both blinds: the same amber
   face, the same ink, only the letters change. Whose turn it is wears
   the same shape in blue. */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  min-width: max(15px, calc(18 * var(--u, 1px)));
  height: max(15px, calc(18 * var(--u, 1px)));
  padding: 0 calc(4 * var(--u, 1px));
  background: var(--gold);
  color: var(--badge-ink);
  border-radius: 999px;
  font-size: max(9px, calc(10 * var(--u, 1px)));
  font-weight: 800;
}
.badge.turn { background: var(--mark); color: #fff; }

/* A casino chip. The rim is ten blocks taking turns between the rim
   colour and the chip's own face, as on the desktop, drawn round the
   edge; a darker edge or two underneath shows it is a stack. The colour
   goes by the amount, with the desktop app's steps. */
.chip {
  --face: #e9e6dd; --edge: #b4b0a6; --rim: #3b7ff0;
  display: inline-block; flex: none;
  width: calc(18 * var(--u, 1px)); height: calc(18 * var(--u, 1px));
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--face) 0 44%, var(--edge) 45% 49%,
                    transparent 50%),
    repeating-conic-gradient(var(--rim) 0 18deg, var(--face) 18deg 36deg);
  box-shadow: 0 calc(2 * var(--u, 1px)) 0 var(--edge),
              0 calc(4 * var(--u, 1px)) 0 rgba(0, 0, 0, 0.55);
}
.chip.small {
  width: calc(12 * var(--u, 1px)); height: calc(12 * var(--u, 1px));
  box-shadow: 0 1px 0 var(--edge);
}
.chip.c25   { --face: #e9e6dd; --edge: #b4b0a6; --rim: #3b7ff0; }
.chip.c100  { --face: #c0392b; --edge: #8d2a20; --rim: #f7e9e6; }
.chip.c500  { --face: #227a4b; --edge: #175836; --rim: #e7f5ed; }
.chip.c2000 { --face: #2f6fbf; --edge: #22508b; --rim: #e8effb; }
.chip.cbig  { --face: #2b2b30; --edge: #4a4a52; --rim: #f0a83c; }

/* ------------------------------------------------------- what you can do */

.status { min-height: 24px; margin: 12px 2px; font-weight: 600; }

.asked {
  margin: 10px 0;
  padding: 12px 14px;
  background: #231a0b;
  border: 1px solid #574a2c;
  border-radius: 12px;
}
.asked input { display: inline-block; width: 130px; margin: 0 8px; }

.action-row {
  margin: 12px 0;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 14px;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.action-row.your-turn {
  border-color: var(--mark);
  box-shadow: 0 0 22px var(--glow);
}
.action-row .buttons { margin-top: 0; }
.sizing { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.sizing .size { font-size: 14px; padding: 7px 12px; }
.sizing input[type="range"] { flex: 1 1 160px; max-width: 280px; }
.sizing input[type="number"] { width: 120px; margin: 0; }

/* --------------------------------------------------------------- panels */

.log {
  height: 200px;
  overflow-y: auto;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 12px;
  font-size: 14px;
}
.log p { margin: 1px 0; }
/* The cards and the winners, in gold, as the desktop app writes them. */
.log .strong { color: var(--gold); font-weight: 700; }

.extras { margin: 16px 0; }
/* The desktop app's tools row: small switches and quiet buttons on one
   line, wrapping onto the next when the screen is narrow, the way its
   own row of tools wraps when the window is made small. */
.tools {
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
  margin: 8px 0; font-size: 13px; color: var(--quiet);
}
.tools button { margin: 0; padding: 6px 12px; font-size: 13px; }
.tools .pace {
  display: flex; gap: 8px; align-items: center; margin: 0; color: var(--quiet);
}
.tools .pace input { width: 64px; margin: 0; padding: 6px 8px; text-align: center; }
.tools .switch { font-size: 13px; color: var(--quiet); }
.chance { min-height: 22px; font-weight: 600; color: var(--mark); }
.switch { display: flex; gap: 8px; align-items: center; color: var(--ink); }
.switch input { display: inline; width: auto; margin: 0; accent-color: var(--mark); }
.panel {
  margin: 10px 0;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 12px;
}
.panel h3 { font-size: 15px; margin: 0 0 6px; }
/* The title of a panel, with the way to shut it on the same line. */
.panel-head {
  display: flex; gap: 10px; align-items: baseline;
  justify-content: space-between;
}
.panel-head button { margin: 0; padding: 4px 10px; font-size: 13px; }
.panel table { border-collapse: collapse; width: 100%; font-size: 14px; }
.panel td, .panel th {
  padding: 5px 6px; border-bottom: 1px solid var(--panel-edge); text-align: left;
}
.panel th { color: var(--quiet); font-weight: 500; }
.panel .worst td { color: var(--red); }
.right-answer { color: var(--green); font-weight: 600; }
.wrong-answer { color: var(--red); font-weight: 600; }
.scroll-x { overflow-x: auto; }

/* Money: the wallet screen, and the bar above the buttons. */
.trust {
  margin: 14px 0; padding: 12px 14px; max-width: 560px;
  background: var(--panel); border: 1px solid var(--panel-edge);
  border-radius: 12px;
}
.trust h2 { font-size: 16px; margin: 0 0 8px; }
.trust h3 { font-size: 14px; margin: 10px 0 4px; color: var(--quiet); }
.trust ul { margin: 0; padding-left: 20px; font-size: 14px; }
.trust li { margin: 4px 0; }
.trust-summary { font-weight: 600; color: var(--gold); margin: 12px 0 8px; }
#wallet-lines .amount {
  font-size: 18px; font-weight: 700; color: var(--gold);
}
.money-bar {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
  margin: 10px 0 0; padding: 8px 12px; font-size: 13px;
  background: var(--panel); border: 1px solid var(--panel-edge);
  border-radius: 12px; color: var(--ink);
}
.money-bar button { margin: 0; padding: 5px 10px; font-size: 13px; }
#money-pool, #money-mine { color: var(--gold); font-weight: 600; }
#money-receipt { color: var(--quiet); }
#money-warning {
  margin: 8px 0 0; padding: 10px 12px; font-weight: 600;
  background: rgba(214, 77, 77, 0.12);
  border: 1px solid rgba(214, 77, 77, 0.55); border-radius: 12px;
}

/* The lobby. */
#lobby-where { font-weight: 600; color: var(--gold); margin: 0 0 4px; }
/* What the table is waiting for. Said in gold, because it is the one
   thing on that screen somebody is actually waiting to read. */
.waiting-for {
  max-width: 440px; margin: 14px 0 0; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--panel-edge);
  border-radius: 12px; color: var(--ink); font-size: 14px;
}
#lobby-people { list-style: none; padding: 0; max-width: 440px; }
#lobby-people li {
  margin: 6px 0; padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 10px;
}

/* ------------------------------------------------ the three columns */

.table-layout {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) minmax(210px, 300px);
  gap: 14px;
  align-items: start;
}
.table-main { min-width: 0; }

.handle {
  width: 22px;
  min-height: 120px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--quiet);
  border-radius: 8px;
}
.dot { color: var(--gold); font-size: 18px; line-height: 1; }

/* The left panel, the same width rule as the desktop app's. */
.hands {
  width: clamp(170px, 24vw, 260px);
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 12px;
  padding: 8px 10px;
}
.tabs {
  position: relative;
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #1d2231;
  margin-bottom: 8px;
}
.tab {
  background: none;
  border: none;
  border-radius: 0;
  padding: 6px 10px;
  color: var(--quiet);
}
.tab:hover:not(:disabled) { background: none; color: var(--ink); }
.tab.active { color: var(--ink); font-weight: 700; }
.tab-story { display: none; }
.tab-bar {
  position: absolute;
  bottom: -1px;
  height: 2px;
  background: var(--mark);
  box-shadow: 0 0 8px var(--glow);
  transition: left 0.15s, width 0.15s;
}

#history-list, #history-earlier { max-height: 440px; overflow-y: auto; }
.hands h3 { font-size: 13px; color: var(--quiet); margin: 12px 0 4px; }
.hand-row {
  display: grid;
  grid-template-columns: 38px auto 1fr 30px;
  gap: 6px;
  align-items: center;
  padding: 5px 6px;
  border-left: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}
.hand-row:hover { background: var(--panel-hover); }
.hand-row.picked { background: var(--panel-hover); border-left-color: var(--mark); }
.hand-number-small, .hand-when { color: var(--quiet); font-size: 12px; }
.hand-when { text-align: right; }
.hand-result { font-weight: 700; text-align: right; }
.hand-result.up { color: var(--green); }
.hand-result.down { color: var(--red); }
.hand-result.even { color: var(--quiet); }
.card.small { width: 22px; height: 30px; margin: 0 1px; font-size: 11px; }
.card.blank { background: #2a3040; }

.chat-lines { height: 320px; overflow-y: auto; font-size: 14px; }
.chat-lines p { margin: 3px 0; }
.chat-lines .me { color: var(--gold); }
.chat-say { display: flex; gap: 6px; margin-top: 6px; }
.chat-say input { margin: 0; }

.felt.viewing .oval { border-color: #574a2c; }
.viewing-banner {
  margin: 0 0 8px;
  padding: 7px 10px;
  background: var(--panel);
  color: var(--gold);
  border: 1px solid #3a3020;
  border-radius: 10px;
  text-align: center;
}

.side-head { display: flex; justify-content: space-between; align-items: center; }
.side-head h2 { margin: 0 0 8px; }
.side .log { height: 460px; }

/* A middling window: the felt keeps the middle, the story goes under it. */
@media (max-width: 1000px) {
  .table-layout { grid-template-columns: auto auto minmax(0, 1fr); }
  .table-layout .side { grid-column: 1 / -1; }
  .side .log { height: 240px; }
}

/* A phone: one column, the table on top, everything else below it in
   tabs - History, Chat at a table with friends, and What happened. */
@media (max-width: 700px) {
  body { padding: 10px; }
  .table-layout { grid-template-columns: 1fr; gap: 10px; }
  .table-main { order: 1; }
  .hands { order: 2; width: auto; display: block !important; }
  .handle { display: none; }
  .tab-story { display: inline-block; }
  .side { order: 3; display: none; }
  body.story-tab .side { display: block; }
  body.story-tab .side .side-head h2 { display: none; }
  body.story-tab #history-body, body.story-tab #chat-body { display: none; }
  #fold, #call, #raise { min-width: 0; flex: 1; }
  .side .log { height: 260px; }
}