@font-face {
  font-family: "Club Arcade";
  src: url("./PressStart2P-Regular.ttf") format("truetype");
  font-display: swap;
}
:root {
  --page: #151324;
  --panel: #222037;
  --surface: #302a47;
  --edge: #605777;
  --ink: #f5f0e5;
  --muted: #c9c3d8;
  --accent: #ffcd8f;
  --line: #49415a;
  --felt-base: #28203d;
  --art-filter: none;
  --card-back: #574681;
  --signal: #91e4d0;
}
:root[data-skin="ember"] {
  --page: #23171b;
  --panel: #302025;
  --surface: #422b2b;
  --edge: #856452;
  --muted: #dcc8bc;
  --accent: #ffd490;
  --line: #59423c;
  --felt-base: #422825;
  --art-filter: sepia(.8) saturate(1.3) hue-rotate(324deg) brightness(1.1);
  --card-back: #87473b;
  --signal: #b1e3c9;
}
:root[data-skin="lagoon"] {
  --page: #101e22;
  --panel: #172c30;
  --surface: #233e41;
  --edge: #4d7778;
  --muted: #c1d8d6;
  --accent: #b8e6ce;
  --line: #385558;
  --felt-base: #123c38;
  --art-filter: sepia(.75) saturate(1.05) hue-rotate(118deg) brightness(1.1);
  --card-back: #316a69;
  --signal: #ffdb99;
}
html { background: var(--page); }
body {
  background: var(--page);
  color: var(--ink);
}
.club {
  width: min(100%, 740px);
  --side: clamp(10px, 3vw, 22px);
  padding: max(5px, env(safe-area-inset-top), calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)))
    max(var(--side), env(safe-area-inset-right), calc(var(--tg-safe-area-inset-right, 0px) + var(--tg-content-safe-area-inset-right, 0px)))
    max(14px, env(safe-area-inset-bottom), calc(var(--tg-safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px)))
    max(var(--side), env(safe-area-inset-left), calc(var(--tg-safe-area-inset-left, 0px) + var(--tg-content-safe-area-inset-left, 0px)));
}
.masthead { min-height: 43px; padding: 0 2px; border-color: var(--line); }
.brand-chip {
  background: transparent url("./club-emblem.png") center / contain no-repeat;
  width: 27px; height: 27px; font-size: 0; transform: none; outline: none; border-radius: 4px;
  image-rendering: pixelated;
}
.wordmark { font: 11px/1.4 "Club Arcade", monospace; letter-spacing: -.03em; gap: 7px; }
.brand-type { font: 600 10px/1.3 system-ui, sans-serif; letter-spacing: .13em; color: var(--accent); }
.palette-field { display: inline-flex; align-items: center; }
.palette-field::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.palette-field select { max-width: 95px; padding-inline: 3px; color: var(--ink); font: 600 12px/1.2 system-ui, sans-serif; }
.palette-field option { background: var(--panel); }
.select:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.title-row, body[data-scene="table"] .title-row {
  margin: 11px 2px 10px; align-items: center; 
}
.title-row h1, body[data-scene="table"] h1 {
  font: clamp(14px, 3.6vw, 21px)/1.25 "Club Arcade", monospace; letter-spacing: -.055em;
}
.subtitle { margin: 3px 0 0; font-size: 12px; color: var(--muted); }
.mode { background: var(--panel); color: var(--muted); border-color: var(--line); border-radius: 4px; }
.mode-light { background: var(--signal); }
.table-wrap { padding: 0; }
.felt {
  container-type: inline-size; isolation: isolate; overflow: hidden;
  height: clamp(310px, 55svh, 530px);
  border: 0; border-radius: clamp(12px, 3vw, 22px); box-shadow: 0 1px 0 var(--edge), 0 7px 22px #0003;
  background: var(--felt-base);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; justify-items: center;
  padding: clamp(11px, 2.5vw, 20px) clamp(10px, 2vw, 20px);
}
.felt::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("./orbital-table.webp") center / 100% 100% no-repeat;
  filter: var(--art-filter);
}
.felt.preview::before { background-image: url("./orbital-room.webp"); background-position: center; background-size: 100% 100%; }
:is(.felt-edge,.felt-stamp,.rack,.deck) { display: none; }
.felt .seat, .felt .middle { position: static; inset: auto; translate: none; }
.felt .opponent, .felt .self { width: 100%; max-width: 175px; min-width: 0; }
.felt .seat[data-position="north"] { grid-area: 1/2; align-self: start; }
.felt .seat[data-position="northwest"] { grid-area: 1/1; }
.felt .seat[data-position="northeast"] { grid-area: 1/3; }
.felt .seat[data-position="west"] { grid-area: 3/1; }
.felt .seat[data-position="east"] { grid-area: 3/3; }
.felt .seat[data-position="south"] { grid-area: 3/2; align-self: end; }
.felt .middle { grid-area: 2/1/3/-1; width: 96%; }
.felt.preview .middle { grid-area: 2/1/4/-1; align-self: center; }
.felt .pot { color: var(--ink); margin-bottom: 6px; font-size: clamp(15px, 4cqw, 20px); }
.felt .street { color: var(--muted); font: 600 10px/1.25 system-ui,sans-serif; margin-top: 6px; letter-spacing: .07em; }
.felt .board { gap: clamp(4px, 1.4cqw, 9px); }
.felt .board .card { width: clamp(35px, 12cqw, 64px); }
.felt .board .rank { font-size: clamp(23px, 7.1cqw, 37px); }
.felt .board .suit { font-size: clamp(15px, 4.5cqw, 24px); }
.felt .self .card { width: clamp(31px, 9.5cqw, 48px); }
.felt .opponent .card { width: clamp(19px, 5.6cqw, 29px); }
.felt .opponent .hand { margin: 4px 0 1px; }
.felt .self .hand { margin-bottom: 4px; }
.felt .opponent .rank { font-size: clamp(12px, 3.4cqw, 17px); }
.felt .opponent .suit { font-size: clamp(9px, 2.55cqw, 13px); }
.felt .seat-label { padding: 4px 7px; border: 1px solid var(--edge); border-radius: 6px; color: var(--ink); background: var(--panel); }
.felt .seat.empty .seat-label { border-style: dashed; color: var(--muted); }
.felt .stack, .felt .seat-bet { color: var(--accent); }
.felt .seat-label.turn { border: 2px solid var(--accent); box-shadow: 0 0 0 2px #0006; }
.felt .seat-label.winner { border-color: #ffcc70; }
.felt .seat-label.split-winner { border-color: #a6ddd1; }
.felt .card.back { background: repeating-linear-gradient(48deg,transparent 0 4px,#eee8cd45 4px 5px),var(--card-back); border-color: #ead8ad; }
.felt .card.back::after { background: var(--card-back); border-color: #dacfaf; color: #fff0c8; }
.felt .card.empty-card { border-color: #f2edff42; background: #ffffff08; }
.side-pot { background: var(--panel); color: var(--ink); }
.hand-tools { color: var(--ink); }
.controls { margin: 14px 2px 0; }
.act { background: var(--surface); border-color: var(--edge); color: var(--ink); border-radius: 8px; }
.act.primary { border-color: var(--accent); background: var(--accent); color: #241e25; }
.act.quiet { background: var(--panel); color: var(--muted); border-color: var(--edge); }
.menu-button,.close-button,dialog,dialog[data-purpose="combos"] .sheet-head { background: var(--panel); border-color: var(--edge); }
.rank-row.is-current,.combo-return { background: var(--surface); color: var(--accent); }
.rank-row.is-current .rank-name::after,.sheet p,.sheet li { color: var(--muted); }
.sheet input[type="number"],.sheet input[type="text"] { background: var(--page); border-color: var(--edge); }
footer { margin: 12px 2px 0; color: var(--muted); }
@media (max-width: 380px) {
  .brand-type { display: none; }
  .felt .opponent .seat-label { padding-inline: 3px; }
}
@media (max-height: 705px) {
  .felt { height: clamp(302px, 51svh, 355px); padding-block: 10px; }
  .felt .opponent .card { width: clamp(18px, 4.8cqw, 24px); }
  .felt .self .card { width: clamp(28px, 8.4cqw, 37px); }
  .felt .board .card { width: clamp(32px, 10.2cqw, 46px); }
  .felt .board .rank { font-size: clamp(20px, 5.8cqw, 29px); }
  .felt .board .suit { font-size: clamp(13px, 3.8cqw, 18px); }
  .title-row, body[data-scene="table"] .title-row { margin-block: 7px; }
}
.felt-tap {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; border: 0;
  border-radius: inherit; background: transparent; touch-action: manipulation;
}
.felt-tap:focus-visible { outline-offset: -8px; }
.felt .middle, .felt .seat { pointer-events: none; }
.felt :is(.seat-label,.seat-state,.card,.pot,.side-pot,.street) { pointer-events: auto; }
.felt.preview .felt-tap { visibility: hidden; }
.tap-echo {
  position: absolute; z-index: 3; width: 28px; height: 21px;
  border: 2px solid var(--accent); border-radius: 50%; pointer-events: none;
  translate: -50% -50%; box-shadow: 0 0 0 3px #fff2; opacity: .65;
}
@media(prefers-reduced-motion:no-preference) {
  .tap-echo { animation: felt-knock 330ms ease-out forwards; }
  @keyframes felt-knock { from { transform: scale(.35); opacity: .8; } to { transform: scale(1.45); opacity: 0; } }
}
@media(prefers-reduced-motion:reduce) { .tap-echo { width: 12px; height: 8px; border-width: 1px; box-shadow: none; } }
@media(max-height:670px) and (min-width:600px) {
  .felt { min-height: 358px; }
}
@media(max-height:610px) and (max-width:599px) {
  .felt { height: 285px; min-height: 285px; padding-block: 8px; }
  .title-row, body[data-scene="table"] .title-row { margin-block: 4px; }
  body[data-scene="table"] .hand-tools { margin-top: 1px; }
  .controls .actions { margin-top: 8px; }
}


/* Spacing separates the controls from the playing surface. */
.club .masthead, .club .hand-tools, .club footer, .rank-list .rank-row { border: 0; }
.club .mode { background: transparent; color: var(--muted); border: 0; padding-right: 0; }
.club .combo-button::after { content: none; }
.club .felt .seat-label .stack { border-left: 0; }
.felt .card[data-card] { background: #f4eedf; }
.felt .street { display: flex; justify-content: center; gap: 12px; }
.felt .street span + span { font-weight: 450; letter-spacing: 0; text-transform: none; }
.club footer:has(#connection[hidden]) { display: none; }
.title-row h1 { margin: 0; }
.menu-button { display: inline-grid; place-items: center; }
.menu-pixels { width: 4px; height: 4px; background: currentColor; box-shadow: -7px 0 currentColor, 7px 0 currentColor; }
.club .help-ring {
  width: 22px; height: 22px; border: 0; border-radius: 0; font-size: 0;
  background: url("./rules.png") center / contain no-repeat; image-rendering: pixelated;
}
.club .combo-button { display: inline-flex; align-items: center; gap: 5px; }
.club .combo-button::before {
  content: ""; width: 20px; height: 22px; display: inline-block;
  background: url("./hand-guide.png") center / contain no-repeat; image-rendering: pixelated;
}
.felt.preview {
  height: auto; min-height: 0; aspect-ratio: 16/9;
  background: var(--felt-base); border-radius: 5px;
}
.felt.preview::before { background: url("./botinok-lobby.webp") center / cover no-repeat; filter: none; }
.felt.preview .middle { display: none; }