/* ============================================================
   Poker — HUD / layout
   3D canvas is the background; HUD is a pointer-transparent overlay.
   The same HUD is the "flat" fallback when three.js is unavailable.
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0b0e12;
  --panel: rgba(9, 13, 17, 0.72);
  --panel-b: rgba(255, 255, 255, 0.09);
  --ink: #e9eef4;
  --dim: #93a1ad;
  --felt: #2f7a4e;
  --gold: #d9b252;
  --red: #e0615f;
  --green: #6cc58f;
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;
}

html, body { width: 100%; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

#app { position: fixed; inset: 0; }
#stage { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* ---------- start screen: pick a poker variant ----------
   Tiles are generated by ui/hud.js from P.Variants, so this style must stay
   in sync with js/ui/hud.js (P.UI.startScreen), not with index.html. */
#start-screen {
  position: absolute; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 6px;
  background: radial-gradient(120% 90% at 50% 38%, rgba(11, 14, 18, .84), rgba(4, 6, 9, .97));
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
#start-screen.off { display: none; }
.startttl { font-size: 21px; letter-spacing: .04em; color: var(--gold); }
.startfoot { font-size: 12px; color: var(--dim); }

#variant-list {
  pointer-events: auto;
  display: flex; flex-wrap: wrap; justify-content: center; align-content: center;
  gap: 10px; max-width: 94%;
}
.vt {
  pointer-events: auto;
  font-family: var(--font);
  display: flex; flex-direction: column; align-items: flex-start;
  width: 172px; min-height: 92px;
  background: rgba(18, 24, 29, .9); border: 1px solid var(--panel-b);
  border-radius: 10px; padding: 10px 12px; cursor: pointer;
  transition: border-color .12s, transform .12s;
}
.vt:hover { border-color: var(--gold); }
.vt:active { transform: translateY(1px) scale(.98); }
.vt .vtname { font-size: 15px; color: var(--ink); }
.vt .vtagent { font-size: 11px; letter-spacing: .08em; color: var(--dim); }
.vt .vtrules { font-size: 11px; line-height: 1.35; color: var(--dim); }

/* ---------- HUD zones ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 10; }

#hud-top {
  position: absolute; top: 0; left: 0; right: 0; height: 24%;
  display: flex; justify-content: center; align-items: flex-start;
}
#hud-center {
  position: absolute; top: 36%; left: 0; right: 0;
  display: flex; justify-content: center; align-items: flex-start;
}
#hud-bottom {
  position: absolute; bottom: 0; left: 0; right: 0; height: 40%;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
}

/* ---------- panels ---------- */
.info, .pot, .stage, .board, .status {
  background: var(--panel);
  border: 1px solid var(--panel-b);
  border-radius: 10px;
  padding: 8px 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.info, .board { max-width: 62%; }
.stage { padding: 3px 10px; font-size: 12px; letter-spacing: .06em; color: var(--dim); }
.pot { padding: 4px 12px; font-size: 13px; color: var(--gold); }
.status { margin-top: 10px; font-size: 14px; }

/* An empty panel is not a panel. #board-info has no community cards before the
   flop, and never in Stud / Razz / Stud 8 / Draw / Open-Face — it would otherwise
   float across the middle of the screen as an empty box. The other panels are
   empty before the first hand is dealt (on the start screen). */
.info:empty, .pot:empty, .stage:empty, .board:empty, .status:empty, .players:empty {
  display: none;
}

b, .num { font-variant-numeric: tabular-nums; }
.info b { color: var(--gold); font-size: 17px; }
.cards { display: block; margin-top: 6px; font-size: 17px; letter-spacing: .04em; }
.board { font-size: 19px; letter-spacing: .08em; min-height: 26px; }
.r { color: var(--red); }
.b { color: #eef3f8; }

/* ---------- action buttons ---------- */
.actions {
  pointer-events: auto;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  padding: 4px;
}
.act {
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink);
  background: rgba(18, 24, 29, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 9px 14px;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .12s;
}
.act:hover { background: rgba(30, 40, 46, 0.95); border-color: var(--gold); }
.act:active { transform: translateY(1px) scale(.98); }
.act.fold { color: var(--red); }
.act.raise { color: var(--gold); }

/* ---------- log ---------- */
#log-panel {
  position: absolute; left: 10px; top: 8px; width: 34%;
  max-height: 22%; overflow: hidden;
  font-family: var(--mono); font-size: 12px; line-height: 1.5;
  color: var(--dim);
  mask-image: linear-gradient(to bottom, transparent, #000 22%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%);
}
.lg { display: block; }
.lg.result { color: var(--green); }
.lg.result.warn { color: var(--red); }
.lg.board { color: var(--gold); }
.lg.showdown { color: #cfd8de; }
.lg.warn { color: var(--red); }
.lg.sys { color: var(--dim); opacity: .8; }

/* ---------- status ---------- */
.win { color: var(--green); }
.lose { color: var(--red); }
.warn { color: var(--red); }
.again {
  font-family: var(--font); font-size: 14px; color: var(--ink);
  background: rgba(18, 24, 29, .9); border: 1px solid var(--panel-b);
  border-radius: 8px; padding: 9px 14px; cursor: pointer; pointer-events: auto;
}

/* ---------- camera controls ---------- */
#view-controls {
  position: absolute; right: 12px; bottom: 12px;
  display: flex; gap: 8px;
}
.viewbtn {
  pointer-events: auto;
  font-family: var(--font); font-size: 13px; color: var(--dim);
  background: rgba(18, 24, 29, .86); border: 1px solid var(--panel-b);
  border-radius: 8px; padding: 8px 12px; cursor: pointer;
  transition: color .12s, border-color .12s, transform .12s;
}
.viewbtn:hover { color: var(--ink); border-color: var(--gold); }
.viewbtn:active { transform: translateY(1px) scale(.98); }

/* ---------- game controls: leave for the picker mid-match ---------- */
#game-controls {
  position: absolute; left: 12px; bottom: 12px;
  display: flex; gap: 8px;
}
.quitbtn {
  pointer-events: auto;
  font-family: var(--font); font-size: 13px; color: var(--dim);
  background: rgba(18, 24, 29, .86); border: 1px solid var(--panel-b);
  border-radius: 8px; padding: 8px 12px; cursor: pointer;
  transition: color .12s, border-color .12s, transform .12s;
}
.quitbtn:hover { color: var(--ink); border-color: var(--gold); }
.quitbtn:active { transform: translateY(1px) scale(.98); }

/* ---------- settings button + window ---------- */
#hud-controls {
  position: absolute; left: 12px; top: 12px;
  display: flex; gap: 8px;
}
.setbtn {
  pointer-events: auto;
  font-family: var(--font); font-size: 13px; color: var(--dim);
  background: rgba(18, 24, 29, .86); border: 1px solid var(--panel-b);
  border-radius: 8px; padding: 8px 12px; cursor: pointer;
  transition: color .12s, border-color .12s, transform .12s;
}
.setbtn:hover { color: var(--ink); border-color: var(--gold); }
.setbtn:active { transform: translateY(1px) scale(.98); }

/* The settings window is a card of its own, not a wash over the table: it has
   its own size, border and shadow, and it never covers the play field.
   The off rule must use the id (#settings-panel wins over a class rule),
   otherwise the panel would sit over the felt with a dark background.
   The language switch lives inside this window too, so nothing language-related
   is drawn over the table. */
#settings-panel {
  position: absolute; left: 12px; top: 56px; width: 380px;
  max-width: 92%; max-height: 74vh; overflow-y: auto;
  /* above the HUD and the start screen: while the window is open it is the
     thing the player is looking at, nothing may sit over it */
  z-index: 60;
  display: flex; flex-direction: column; align-items: start;
  gap: 10px; padding: 14px 16px;
  background: rgba(12, 16, 20, .96);
  border: 1px solid var(--panel-b);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .55);
  pointer-events: none;
  /* the scrollbar belongs to the app palette, not to the OS default */
  scrollbar-width: thin;
  scrollbar-color: rgba(217, 178, 82, .55) rgba(18, 24, 29, .6);
}
#settings-panel.off { display: none; }
#settings-panel::-webkit-scrollbar { width: 8px; height: 8px; }
#settings-panel::-webkit-scrollbar-track {
  background: rgba(18, 24, 29, .6);
  border-radius: 4px;
}
#settings-panel::-webkit-scrollbar-thumb {
  background: rgba(217, 178, 82, .55);
  border-radius: 4px;
}
#settings-panel::-webkit-scrollbar-thumb:hover { background: var(--gold); }
.setttl { font-size: 16px; font-weight: 700; color: var(--gold); letter-spacing: .02em; }
.sethint { font-size: 12px; color: var(--dim); }
/* one block per section: heading line, then the options */
.setgrp { display: flex; flex-direction: column; gap: 6px; }
.setsec { font-size: 12px; font-weight: 600; color: var(--gold); }
/* options sit in an even grid — equal cells, so the window reads as a table
   instead of a ragged line of differently sized chips */
.setrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.sett {
  pointer-events: auto;
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--font); font-size: 12px; color: var(--ink);
  background: rgba(24, 30, 36, .92); border: 1px solid var(--panel-b);
  border-radius: 8px; padding: 6px 8px; min-height: 34px; cursor: pointer;
  transition: color .12s, border-color .12s, transform .12s;
}
.sett:hover { color: var(--gold); border-color: var(--gold); }
.sett:active { transform: translateY(1px) scale(.98); }
.sett .settn { font-size: 11px; color: var(--dim); }
/* the choice the game is actually using is marked, so the window doubles as a
   readout of the current look */
.sett.on { border-color: var(--gold); background: rgba(30, 40, 46, .95); }
.sett.on::after {
  content: '✓'; position: absolute; right: 5px; top: 4px;
  font-size: 11px; color: var(--gold);
}
.setclose {
  pointer-events: auto; align-self: end;
  font-family: var(--font); font-size: 13px; color: var(--dim);
  background: rgba(18, 24, 29, .9); border: 1px solid var(--panel-b);
  border-radius: 8px; padding: 8px 12px; cursor: pointer;
}
.setclose:hover { color: var(--ink); border-color: var(--gold); }

/* ---------- players list (up to 10 seats) ---------- */
.players {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  max-width: 96%;
}
.pl {
  background: var(--panel);
  border: 1px solid var(--panel-b);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.pl.out { opacity: .42; text-decoration: line-through; }
.pl.hero { border-color: rgba(217, 178, 82, .55); }
.pl.act { border-color: rgba(108, 197, 143, .6); }
.pl .nm { color: var(--dim); }
.pl .st { color: var(--ink); font-variant-numeric: tabular-nums; }
.pl .cd { font-size: 14px; }
.d { color: var(--gold); font-size: 10px; }

/* ---------- small screens ---------- */
@media (max-width: 700px) {
  body { font-size: 13px; }
  .startttl { font-size: 18px; }
  .vt { width: 150px; min-height: 84px; padding: 8px 10px; }
  .act { font-size: 13px; padding: 11px 16px; }
  #log-panel { width: 60%; }
  .info, .board { max-width: 92%; }
  /* the corner buttons (my seat / leave the game) live at the bottom corners,
     so the centred action row must not sit in that band */
  #hud-bottom { padding-bottom: 46px; }
  /* the settings window stays a card: narrower, and tucked under the button */
  #settings-panel { left: 8px; top: 46px; width: 280px; max-height: 60vh; }
  .setrow { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 5px; }
  .sett { font-size: 12px; padding: 5px 8px; min-height: 32px; }
}
@media (pointer: coarse) {
  .actions { gap: 10px; }
  .act { padding: 13px 18px; }
  .viewbtn, .quitbtn { padding: 13px 18px; }
}