:root {
  color-scheme: dark;
  --ink: #eef0e8;
  --muted: #aeb7ae;
  --gold: #e2b86b;
  --gold-2: #9b6c2f;
  --green: #0e4d39;
  --green-dark: #08271f;
  --panel: rgba(7, 16, 14, .92);
  --line: rgba(226, 184, 107, .24);
  --danger: #a63334;
  --blue: #315f87;
  --felt-texture: none;
  --wood-texture: none;
  --card-back-art: none;
  --table-emblem-art: none;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #050807; color: var(--ink); }
body { min-width: 320px; overflow-x: hidden; background: #050807; }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #f6d88e; outline-offset: 3px; }
[hidden] { display: none !important; }
.game-shell { width: min(1600px, 100%); min-height: 100vh; margin: 0 auto; padding: max(10px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
.topbar { min-height: 64px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.brand-mark, .intro-mark { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); font-family: Georgia, serif; font-size: 23px; box-shadow: inset 0 0 0 4px rgba(226,184,107,.07); }
.brand span:last-child { display: flex; flex-direction: column; line-height: 1; }
.brand strong { font: 700 17px/1 Georgia, serif; letter-spacing: .02em; }
.brand small { margin-top: 5px; color: var(--gold); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; }
.table-status { justify-self: center; margin: 0; color: var(--muted); font-size: 12px; letter-spacing: .13em; text-transform: uppercase; text-align: center; }
.top-actions { display: flex; gap: 8px; }
.quiet-button { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); padding: 8px 11px; border-radius: 8px; color: #d7ded8; cursor: pointer; font-size: 12px; }
.quiet-button:hover, .quiet-button[aria-pressed="true"] { border-color: rgba(226,184,107,.48); background: rgba(226,184,107,.09); color: #f2d69a; }

.night-run-strip { width: min(1000px, 100%); margin: 10px auto 0; min-height: 54px; display: grid; grid-template-columns: repeat(4, 1fr) 1.3fr; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid rgba(226,184,107,.22); border-radius: 14px; background: rgba(7,16,14,.93); box-shadow: 0 14px 34px rgba(0,0,0,.24); }
.night-run-strip > div:not(.run-meter) { padding: 0 10px; border-right: 1px solid rgba(255,255,255,.07); }
.night-run-strip small { display: block; color: #7f8c85; font-size: 8px; letter-spacing: .16em; }
.night-run-strip strong { display: block; margin-top: 3px; color: #ecd28f; font: 700 13px/1.1 Georgia, serif; }
.run-meter { height: 7px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 99px; background: rgba(255,255,255,.04); }
.run-meter span { display: block; height: 100%; width: 0; background: #c79c53; transition: width .25s ease; }

.table-stage { position: relative; height: clamp(510px, 63vh, 720px); display: grid; place-items: center; overflow: hidden; }
.ambient { display: none; }
.poker-table { position: relative; width: min(1040px, 81vw); aspect-ratio: 1.78; min-height: 420px; border-radius: 49% / 47%; background-color: #0a3e2d; background-image: var(--felt-texture); background-size: 190px 190px; border: 21px solid #1c1511; box-shadow: 0 0 0 2px #6f4f2b, 0 0 0 9px #070c09, 0 34px 80px rgba(0,0,0,.72), inset 0 0 80px rgba(0,0,0,.42); }
.poker-table::before { content: ""; position: absolute; inset: -21px; border-radius: inherit; background-color: #271b12; background-image: var(--wood-texture); background-size: 380px 96px; opacity: .72; pointer-events: none; mask: radial-gradient(ellipse 48% 45% at center, transparent 0 91%, #000 92%); }
.poker-table::after { content: ""; position: absolute; inset: -8px; border-radius: inherit; border: 1px solid rgba(226,184,107,.35); pointer-events: none; }
.felt-grain { position: absolute; inset: 3%; border-radius: inherit; border: 1px solid rgba(226,184,107,.18); box-shadow: inset 0 0 35px rgba(0,0,0,.22); }
.table-brand { position: absolute; left: 50%; top: 55%; translate: -50% -50%; width: min(37%, 340px); aspect-ratio: 3.24; background-image: var(--table-emblem-art); background-size: contain; background-position: center; background-repeat: no-repeat; opacity: .38; }
.table-brand span, .table-brand small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pot { position: absolute; left: 50%; top: 16%; translate: -50% 0; z-index: 3; display: flex; align-items: center; gap: 7px; min-width: 132px; padding: 5px 16px 6px 8px; border-radius: 999px; background: rgba(3,13,10,.76); border: 1px solid rgba(226,184,107,.19); box-shadow: 0 9px 18px rgba(0,0,0,.22); }
.pot img { width: 42px; height: 28px; object-fit: cover; object-position: left center; border-radius: 8px; }
.pot small { display: block; color: var(--gold); font-size: 8px; letter-spacing: .2em; }
.pot strong { font-size: 16px; }
.pot em { color: var(--muted); font-style: normal; font-weight: 500; font-size: 10px; }
.board { position: absolute; z-index: 3; left: 50%; top: 36%; translate: -50% 0; display: flex; gap: clamp(5px, .6vw, 9px); }
.card, .card-slot { position: relative; width: clamp(53px, 5vw, 68px); aspect-ratio: .7; border-radius: 7px; flex: 0 0 auto; }
.card { display: block; color: #111715; background: #f4f1e8; border: 1px solid rgba(0,0,0,.24); box-shadow: 0 8px 12px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.7); font-family: Georgia, serif; }
.card strong { position: absolute; left: 7px; top: 4px; font-size: clamp(17px, 1.7vw, 22px); line-height: 1; }
.card em { position: absolute; left: 7px; top: 25px; font-style: normal; font-size: clamp(15px, 1.5vw, 20px); line-height: 1; }
.card i { position: absolute; right: 7px; bottom: 5px; font-style: normal; font-size: clamp(24px, 2.4vw, 34px); opacity: .88; }
.card-red { color: #a1232d; }
.card-back { background-color: #5b1d22; background-image: var(--card-back-art); background-size: cover; background-position: center; border: 2px solid #ebe8dd; box-shadow: 0 6px 10px rgba(0,0,0,.32); }
.card-back span { display: none; }
.card-slot { border: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.08); }
.card-mini { width: 34px; border-radius: 4px; }
.seat { --portrait: none; position: absolute; z-index: 4; display: grid; grid-template-columns: 52px auto; align-items: center; min-width: 150px; padding: 5px 12px 5px 5px; border-radius: 999px 12px 12px 999px; background: rgba(5,11,10,.9); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 9px 20px rgba(0,0,0,.38); transition: opacity .2s ease, transform .2s ease, border-color .2s ease; }
.seat.is-turn { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(226,184,107,.14), 0 10px 28px rgba(0,0,0,.45); transform: translateY(-2px); }
.seat.is-folded { opacity: .48; }
.seat.is-out { opacity: .28; filter: grayscale(1); }
.portrait { width: 48px; height: 48px; border-radius: 50%; background-image: var(--portrait); background-size: cover; background-position: center; border: 2px solid #805f34; box-shadow: inset 0 0 12px rgba(0,0,0,.22); }
.seat-copy { min-width: 82px; padding-left: 7px; display: flex; flex-direction: column; line-height: 1.1; }
.seat-copy strong { font-size: 13px; }
.seat-copy span { color: #e8c876; font-size: 11px; margin-top: 3px; }
.seat-copy small { color: var(--muted); font-size: 9px; margin-top: 3px; min-height: 10px; }
.seat-cards { position: absolute; left: 50%; top: calc(100% + 5px); translate: -50% 0; display: flex; gap: 3px; transform: rotate(-3deg); }
.dealer-chip[hidden] { display: none; }
.dealer-chip { position: absolute; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #f3f0e7; color: #111; font-weight: 900; font-size: 10px; border: 2px solid #caa35f; right: -8px; top: -9px; }
.seat-0 { left: 50%; bottom: -9%; translate: -50% 0; min-width: 178px; }
.seat-1 { left: -8%; bottom: 13%; }
.seat-2 { left: 7%; top: -2%; }
.seat-3 { left: 50%; top: -6%; translate: -50% 0; }
.seat-4 { right: 7%; top: -2%; }
.seat-5 { right: -8%; bottom: 13%; }

.control-deck, .lower-deck { display: grid; width: min(1260px, 100%); margin: 0 auto; border: 1px solid rgba(255,255,255,.09); background: rgba(8,14,12,.86); backdrop-filter: blur(18px); box-shadow: 0 20px 50px rgba(0,0,0,.22); }
.control-deck { grid-template-columns: 190px 1fr 250px; gap: 14px; align-items: center; min-height: 118px; padding: 12px; border-radius: 18px; }
.your-hand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hero-cards { display: flex; min-width: 72px; }
.hero-cards .card { width: 48px; margin-right: -21px; transform: rotate(-5deg); }
.hero-cards .card + .card { transform: rotate(6deg) translateY(-2px); }
.your-hand small, .coach strong, .panel-heading span { display: block; color: var(--gold); letter-spacing: .15em; font-size: 9px; }
.your-hand strong { display: block; margin-top: 4px; font: 700 15px/1.1 Georgia, serif; }
.actions { display: grid; grid-template-columns: repeat(2, minmax(92px, 1fr)) minmax(190px, 1.5fr) repeat(2, minmax(92px, 1fr)); gap: 8px; }
.action { min-height: 52px; border-radius: 10px; border: 1px solid rgba(255,255,255,.15); cursor: pointer; font-weight: 800; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
.action:disabled { opacity: .38; cursor: default; }
.fold { background: #8e3231; }
.call { background: #315f87; }
.raise { background: #296a3c; }
.all-in { background: #765329; }
.next { background: #c79b4b; color: #111; grid-column: 1 / -1; }
.raise-control { min-height: 52px; display: grid; grid-template-columns: 30px 1fr 30px; grid-template-rows: 1fr auto; gap: 1px 7px; align-items: center; padding: 4px 7px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(0,0,0,.18); }
.raise-control button { width: 28px; height: 28px; border-radius: 7px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06); cursor: pointer; }
.raise-control input { min-width: 0; accent-color: #d8ad5e; }
.raise-control span { grid-column: 1 / -1; text-align: center; color: var(--gold); font-size: 10px; }
.coach { min-height: 76px; padding: 10px 12px; border-left: 1px solid var(--line); }
.coach span { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.lower-deck { margin-top: 12px; grid-template-columns: 1.15fr .8fr 1fr; border-radius: 16px; overflow: hidden; }
.lower-deck > div { min-height: 120px; padding: 14px 16px; }
.lower-deck > div + div { border-left: 1px solid rgba(255,255,255,.08); }
.panel-heading { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.panel-heading small { color: #7f8c85; font-size: 9px; }
.hand-log ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; max-height: 78px; overflow: auto; }
.hand-log li { color: #8d9992; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hand-log li.is-latest { color: #d8e0d9; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stat-grid span { min-width: 0; }
.stat-grid small { display: block; color: #7f8c85; font-size: 8px; text-transform: uppercase; }
.stat-grid strong { display: block; margin-top: 4px; color: #e3c37a; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.fair-play p { margin: 0 0 7px; color: #9aa69f; font-size: 10px; line-height: 1.45; }
.fair-play > strong { color: #cbd5ce; font-size: 9px; letter-spacing: .07em; }

.intro { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(2,5,4,.94); backdrop-filter: blur(12px); }
.intro[hidden] { display: none; }
.intro-card { width: min(760px, 100%); padding: 28px; border: 1px solid rgba(226,184,107,.37); border-radius: 24px; background: #08120f; box-shadow: 0 30px 90px rgba(0,0,0,.65); }
.intro-title-row { display: flex; align-items: center; justify-content: center; gap: 18px; text-align: left; }
.intro-mark { width: 58px; height: 58px; flex: 0 0 auto; font-size: 31px; }
.intro-kicker, .rules-kicker { margin: 0; color: var(--gold); letter-spacing: .22em; font-size: 9px; }
.intro h1 { margin: 7px 0 0; font: 700 clamp(34px, 6vw, 52px)/.9 Georgia, serif; letter-spacing: -.04em; }
.intro h1 span { color: var(--gold); font-style: italic; font-size: .84em; }
.intro-copy { margin: 18px auto 15px; max-width: 620px; text-align: center; color: #abb7af; line-height: 1.55; font-size: 13px; }
.difficulty-picker { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.difficulty-picker > span { margin-right: 6px; color: #78857d; font-size: 8px; letter-spacing: .18em; }
.difficulty-picker button { border: 1px solid rgba(255,255,255,.11); border-radius: 999px; padding: 7px 12px; background: rgba(255,255,255,.035); cursor: pointer; color: #b5c0b8; font-size: 10px; }
.difficulty-picker button[aria-pressed="true"] { border-color: #d4ae63; color: #f0d697; background: rgba(212,174,99,.1); }
.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mode-card { position: relative; min-height: 145px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 20px; background: #0b1713; cursor: pointer; text-align: left; }
.mode-card:hover { border-color: rgba(226,184,107,.5); transform: translateY(-1px); }
.mode-card strong { position: relative; z-index: 2; display: block; margin-top: 8px; font: 700 25px/1 Georgia, serif; }
.mode-card small { position: relative; z-index: 2; display: block; max-width: 270px; margin-top: 10px; color: #8f9d94; font-size: 10px; line-height: 1.45; }
.mode-kicker { position: relative; z-index: 2; color: #dbbb76; font-size: 8px; letter-spacing: .2em; }
.mode-night img { position: absolute; right: -2px; bottom: -20px; width: 115px; height: 160px; object-fit: cover; object-position: center; opacity: .6; mix-blend-mode: screen; }
.resume-run { width: 100%; margin-top: 10px; padding: 11px; border-radius: 10px; border: 1px solid rgba(226,184,107,.34); background: rgba(226,184,107,.08); cursor: pointer; color: #f0d697; font-weight: 700; }
.difficulty-copy { margin: 10px 0 0; min-height: 17px; text-align: center; color: #758279; font-size: 10px; }
.intro-foot { display: block; margin-top: 4px; text-align: center; color: #69766e; font-size: 9px; }

.rules-dialog { width: min(760px, calc(100% - 24px)); padding: 0; color: var(--ink); border: 1px solid rgba(226,184,107,.34); border-radius: 18px; background: #08110e; box-shadow: 0 30px 90px rgba(0,0,0,.72); }
.rules-dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(7px); }
.rules-card { position: relative; padding: 28px; }
.rules-card h2 { margin: 7px 0 12px; font: 700 31px/1 Georgia, serif; }
.rules-card > p:not(.rules-kicker) { color: #aeb8b1; line-height: 1.5; }
.dialog-close { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; background: rgba(255,255,255,.04); cursor: pointer; }
.rules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.rules-grid section { padding: 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(255,255,255,.025); }
.rules-grid strong { display: block; color: var(--gold); font-size: 12px; }
.rules-grid span { display: block; margin-top: 6px; color: #96a29a; font-size: 11px; line-height: 1.5; }

@media (max-width: 1050px) {
  .table-status { display: none; }
  .topbar { grid-template-columns: 1fr auto; }
  .night-run-strip { grid-template-columns: repeat(4,1fr); }
  .run-meter { grid-column: 1 / -1; }
  .poker-table { width: 90vw; }
  .control-deck { grid-template-columns: 150px 1fr; }
  .coach { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); min-height: auto; }
  .lower-deck { grid-template-columns: 1fr 1fr; }
  .fair-play { grid-column: 1 / -1; border-left: 0 !important; border-top: 1px solid rgba(255,255,255,.08); }
}
@media (max-width: 760px) {
  .game-shell { padding-inline: 8px; }
  .topbar { height: auto; min-height: 62px; padding: 8px 0; align-items: start; }
  .top-actions { display: grid; grid-template-columns: repeat(2, auto); gap: 5px; }
  .quiet-button { padding: 6px 8px; font-size: 10px; }
  .night-run-strip { grid-template-columns: 1fr 1fr; margin-top: 6px; }
  .night-run-strip > div:not(.run-meter) { border-right: 0; }
  .table-stage { height: 490px; overflow: hidden; }
  .poker-table { width: 96vw; min-height: 330px; aspect-ratio: 1.42; border-width: 13px; }
  .poker-table::before { inset: -13px; }
  .seat { min-width: 110px; grid-template-columns: 36px auto; padding: 4px 7px 4px 4px; }
  .portrait { width: 34px; height: 34px; }
  .seat-copy { padding-left: 5px; min-width: 64px; }
  .seat-copy strong { font-size: 10px; }
  .seat-copy span, .seat-copy small { font-size: 8px; }
  .seat-0 { bottom: -15%; }
  .seat-1 { left: -3%; bottom: 4%; }
  .seat-2 { left: 2%; top: -4%; }
  .seat-3 { top: -8%; }
  .seat-4 { right: 2%; top: -4%; }
  .seat-5 { right: -3%; bottom: 4%; }
  .card, .card-slot { width: 45px; }
  .card strong { left: 5px; top: 4px; font-size: 15px; }
  .card em { left: 5px; top: 21px; font-size: 14px; }
  .card i { right: 5px; bottom: 4px; font-size: 24px; }
  .card-mini { width: 27px; }
  .pot { top: 18%; }
  .pot img { width: 34px; }
  .board { top: 38%; gap: 4px; }
  .control-deck { grid-template-columns: 1fr; margin-top: 18px; }
  .your-hand { justify-content: center; }
  .actions { grid-template-columns: 1fr 1fr; }
  .raise-control { grid-column: 1 / -1; order: 3; }
  .raise { order: 4; }
  .all-in { order: 5; }
  .coach { grid-column: auto; }
  .lower-deck { grid-template-columns: 1fr; }
  .lower-deck > div + div { border-left: 0; border-top: 1px solid rgba(255,255,255,.08); }
  .fair-play { grid-column: auto; }
  .rules-grid { grid-template-columns: 1fr; }
  .mode-grid { grid-template-columns: 1fr; }
  .mode-card { min-height: 118px; }
  .intro-card { max-height: calc(100vh - 24px); overflow: auto; }
}
@media (max-width: 460px) {
  .brand small { display: none; }
  .top-actions .quiet-button:nth-child(2) { display: none; }
  .night-run-strip { padding: 7px; }
  .night-run-strip strong { font-size: 11px; }
  .table-stage { height: 440px; }
  .poker-table { width: calc(100vw - 16px); min-height: 298px; }
  .seat { min-width: 96px; }
  .seat-copy small { display: none; }
  .seat-1 { left: -1%; }
  .seat-5 { right: -1%; }
  .board { top: 39%; }
  .card, .card-slot { width: 38px; border-radius: 5px; }
  .card strong { font-size: 13px; }
  .card em { font-size: 12px; top: 19px; }
  .card i { font-size: 20px; }
  .intro { padding: 8px; }
  .intro-card { padding: 22px 14px 18px; }
  .intro-title-row { gap: 10px; }
  .intro-mark { width: 46px; height: 46px; font-size: 25px; }
  .intro h1 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }