/* Quiet study workspace: solid surfaces, restrained accents, stable hierarchy. */
:root {
  --gold: #94bfc7;
  --gold-2: #547d88;
  --ink: #e6ebf0;
  --muted: #91a0af;
  --glass: #151c25;
  --glass-2: #19222d;
  --line: #303d4b;
  --red: #db8390;
  --green: #8dbbb0;
  --blue: #96b8dd;
  --radius: 8px;
  --shadow: 0 8px 24px #0003;
  --sans: Inter, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --serif: var(--sans);
}
body { background: #10161e; }
#vignette { display: none; }
button, input, .plate, .levelinfo { font-variant-numeric: tabular-nums; }
button:focus-visible, input:focus-visible { outline: 2px solid #94bfc7; outline-offset: 3px; }
.brand { font: 600 17px var(--sans); letter-spacing: -.02em; color: #dbe4ec; }
.brand .logo { color: #94bfc7; margin-right: 6px; }
#topbar { background: #10161eef; border-bottom: 1px solid #26323e; }
.levelinfo { background: none; border: 0; border-left: 1px solid #303d4b; border-radius: 0; padding: 5px 16px; backdrop-filter: none; }
.primary, .btns button { box-shadow: none; font-weight: 600; }
.primary { background: #94bfc7; color: #101b22; border-radius: 6px; }
.primary:hover:not(:disabled), .btns button:hover { transform: none; filter: brightness(1.08); }
.ghost, .icon, .raise-box .presets button, .slider-row input[type=number], #showcards button { border-radius: 6px; background: #1c2632; border-color: #344251; }
.icon { width: 36px; height: 36px; }
.plate {
  background: #18212bf2; border: 1px solid #3b4856; border-radius: 8px;
  box-shadow: 0 3px 10px #0003; padding: 7px 12px 7px 7px; gap: 8px;
}
.plate .avatar { width: 36px; height: 36px; background: #2a3846; box-shadow: none; color: #b9c9d5; font-size: 12px; }
.plate.bot .ini { font-size: 12px; }
.plate .name { font-size: 12px; font-weight: 600; }
.plate .stack { font-size: 14px; font-weight: 600; color: #eef2f6; }
.plate .tag b { background: #293746; border-color: #455463; border-radius: 4px; color: #b7c6d4; }
.plate .tag .t-d { background: #b8c8d3; color: #15212b; }
.plate.turn { border-color: #a4d0d5; box-shadow: 0 0 0 1px #a4d0d5; }
.plate.me { background: #20313cf5; border-color: #678591; }
.plate.me.turn { border-color: #a4d0d5; }
.plate.folded { opacity: .75; }
.plate.winner { border-color: #8dbbb0; box-shadow: none; }
.plate .timer circle { stroke: #a4d0d5; stroke-width: 2; }
.plate .player-stats { color: #99b1c0; font-size: 10px; padding-top: 4px; }
.plate .act { border-radius: 4px; background: #17212b; border-color: #344251; font-weight: 500; }
.plate .act.win { color: #a6d3c4; background: #182c2a; }
.lang-pick button.active, .seat-count button.active, .look-opts button.active, .chip-btn.active { background: #263d47; border-color: #617f8b; color: #c3dce3; }
.potlabel, .betlabel { background: #15202ae8; border: 1px solid #344251; border-radius: 5px; box-shadow: none; color: #e6edf3; }
#actions, #log, #showcards, #reveal button, #rabbit button, #away, .menu, #settings {
  background: #17212bf5; border-color: #344251; border-radius: 8px;
  backdrop-filter: none; box-shadow: 0 6px 20px #0003;
}
#actions .btns button { border: 1px solid #415163; border-radius: 6px; }
.btns .fold { background: #29313b; color: #d0d8e1; }
.btns .call { background: #30465b; color: #e2ebf4; }
.btns .raise { background: #94bfc7; color: #10232b; border-color: #94bfc7 !important; }
.btns .call .shot { display: none; }
.timebar { height: 3px; }
#strength, #strength.compact { font: 500 12px var(--sans); background: #17212bee; border-color: #415163; border-radius: 5px; color: #c6d5df; box-shadow: none; }
#strength { max-width: calc(100vw - 24px); overflow: hidden; text-overflow: ellipsis; }
#reveal button, #rabbit button { background: #30465b; color: #e2ebf4; }
#banner .line { font: 600 20px var(--sans); }
#banner .hn { font: 500 13px var(--sans); color: #a5b7c5; }
.lobby-card, .results-card, .splash-card, .starting-card, .stats-dialog {
  background: #17212bf5; border-color: #344251; border-radius: 10px;
  backdrop-filter: none; box-shadow: 0 12px 32px #0004;
}
.lobby-card h1, .results-card h1, .splash-card h1 { font: 600 28px var(--sans); color: #edf2f7; letter-spacing: -.035em; }
.lobby-card h2 { font: 600 16px var(--sans); }
.starting-text { font: 500 18px var(--sans); }
.splash-card .suits, .starting-card .suits { display: none; }
.gadget-row { display: none; }
.sw-slate { background: #213c43; }
.sw-graphite { background: #252d37; }
.stats-dialog dd { color: #c4dce2; }
@media (max-width: 800px) {
  .plate { padding: 6px 9px 6px 6px; }
  .plate .name { font-size: 11px; }
  .plate .player-stats { font-size: 9px; }
  .plate .avatar { width: 32px; height: 32px; }
  #topbar .levelinfo { border: 0; padding-left: 0; }
}

/* One accessible target covers the avatar, name, stack and five-stat HUD. */
.plate .player-open {
  width: 176px; display: grid; grid-template-columns: 36px minmax(0, 1fr);
  gap: 6px 8px; align-items: center; padding: 0; border: 0; border-radius: 3px;
  background: none; color: inherit; text-align: left; pointer-events: auto;
}
.plate .player-open:hover { color: #fff; }
.plate .player-open .meta { display: grid; gap: 2px; }
.plate .player-stats {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0; padding: 6px 0 0; border-top: 1px solid #ffffff12;
  color: #c6d8e3; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.hud-stat { display: grid; gap: 3px; text-align: center; }
.hud-stat + .hud-stat { border-left: 1px solid #ffffff0c; }
.hud-stat b { font-size: 11px; font-weight: 600; line-height: 1.1; }
.hud-stat small { font-size: 8px; font-weight: 500; color: #8fa7b8; line-height: 1.1; }
.stats-dialog { width: min(580px, calc(100vw - 24px)); padding: 24px; }
.stats-dialog .stats-close { position: absolute; top: 16px; right: 16px; float: none; }
.stats-header { display: flex; gap: 14px; align-items: center; padding-right: 44px; }
.stats-avatar { width: 54px; height: 54px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #30434f; color: #c3dce3; font-size: 18px; font-weight: 600; }
.stats-eyebrow { margin: 0 0 5px; font-size: 9px; letter-spacing: .13em; color: #8fa7b8; }
.stats-dialog #stats-title { margin: 0 0 5px; font: 600 21px var(--sans); overflow-wrap: anywhere; }
.stats-session { color: #91a0af; font-size: 11px; }
.stats-overview { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; align-items: center; margin: 26px 0; padding-bottom: 22px; border-bottom: 1px solid #303d4b; }
.stat-metric { display: grid; justify-items: center; gap: 9px; font-size: 10px; color: #b0c1cf; }
.stat-ring { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; position: relative; background: conic-gradient(#94bfc7 var(--progress), #2c3a46 0); }
.stat-ring::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #17212b; }
.stat-ring b { position: relative; font-size: 17px; color: #edf2f7; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-ring.no-sample b { color: #8296a7; }
.hands-metric > b { height: 66px; display: grid; place-items: center; color: #edf2f7; font-size: 25px; font-weight: 600; }
.stats-breakdown-head { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; color: #8196a7; padding-bottom: 4px; }
.stats-detail { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid #ffffff0b; }
.stats-detail b { font-size: 12px; font-weight: 600; }
.stats-detail p { margin: 5px 0 0; color: #91a0af; font-size: 11px; line-height: 1.5; max-width: 360px; }
.stats-detail > div:last-child { flex: none; display: grid; gap: 5px; text-align: right; min-width: 52px; }
.stats-detail strong { font-size: 14px; font-weight: 600; color: #c3dce3; }
.stats-detail small { font-size: 10px; color: #91a0af; }
.stats-note { font-size: 11px; margin-bottom: 0; }
@media (max-width: 800px) {
  .plate .player-open { width: 150px; grid-template-columns: 32px minmax(0, 1fr); gap: 5px 6px; }
  .hud-stat b { font-size: 10px; }
  .hud-stat small { font-size: 7px; }
}
@media (max-width: 480px) {
  .stats-dialog { padding: 18px; }
  .stats-avatar { width: 42px; height: 42px; font-size: 15px; }
  .stats-dialog #stats-title { font-size: 18px; }
  .stats-overview { gap: 4px; margin: 22px 0 18px; padding-bottom: 18px; }
  .stat-ring { width: 48px; height: 48px; }
  .stat-ring b { font-size: 13px; }
  .hands-metric > b { height: 48px; font-size: 21px; }
  .stat-metric { font-size: 9px; }
}