:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #101713;
  --panel: #18221c;
  --panel-deep: #131d17;
  --text: #f3ebdc;
  --muted: #a9b4a7;
  --soft: #bdc7b9;
  --line: #334238;
  --gold: #dec08a;
  --ink: #211b11;
  --mint: #a6d4ad;
  --red: #eda692;
  --serif: Georgia, "Times New Roman", serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { min-width: 280px; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: radial-gradient(ellipse at 30% -15%, var(--room-glow, #263529) 0, transparent 55%), var(--bg);
  -webkit-text-size-adjust: 100%;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
a { color: inherit; text-decoration: none; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
p { line-height: 1.55; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; }
.gold { color: var(--gold); }
.muted { color: var(--muted); }
.positive { color: var(--mint) !important; }
.negative { color: var(--red) !important; }
svg { flex: none; vertical-align: middle; }
.launch-screen {
  position:fixed; inset:0; z-index:50; display:grid; grid-template-rows:auto 1fr auto;
  padding:calc(22px + env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));
  overflow:hidden; isolation:isolate; color:#f6eee1; background:#090607;
}
.launch-screen::before,.launch-screen::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; }
.launch-screen::before {
  z-index:-2; background:linear-gradient(180deg,#080607e8 0%,#080607a8 25%,#08060725 57%,#08060788 100%),url('./assets/nocturne-splash.png') center 58% / cover no-repeat;
  transform:scale(1.035); filter:brightness(.78) saturate(.92);
}
.launch-screen::after { background:radial-gradient(ellipse at 50% 51%,#d79d5c17,transparent 42%),linear-gradient(90deg,#0008,transparent 19%,transparent 81%,#0008); }
.launch-topline,.launch-footer { display:flex; align-items:center; justify-content:center; gap:12px; color:#d3bd91; font-size:9px; font-weight:700; letter-spacing:.22em; text-align:center; }
.launch-topline i,.launch-kicker i { width:3px; height:3px; flex:none; border-radius:50%; background:#d6b66e; box-shadow:0 0 11px #d5a95b; }
.launch-content { align-self:start; display:flex; flex-direction:column; align-items:center; margin-top:clamp(54px,10vh,112px); text-align:center; }
.launch-mark { width:48px; height:48px; margin-bottom:13px; filter:drop-shadow(0 0 18px #ce9f5680); }
.launch-kicker { display:flex; align-items:center; gap:9px; color:#d9bd85; font-size:9px; font-weight:750; letter-spacing:.24em; }
.launch-content h1 { margin:9px 0 11px; color:#f4ead8; font:400 clamp(54px,14vw,76px)/.98 Georgia,serif; letter-spacing:-.065em; text-shadow:0 4px 32px #000; }
.launch-content h1 span { color:#d8b76e; }
.launch-promise { color:#e6ded1; font:500 17px/1.45 Georgia,serif; text-shadow:0 2px 14px #000; }
.launch-promise em { color:#d6ba80; font-weight:400; }
.launch-enter { display:flex; align-items:center; justify-content:center; gap:18px; min-width:222px; min-height:48px; margin-top:22px; padding:0 20px; border:1px solid #f1d08d; border-radius:8px; background:linear-gradient(135deg,#e7ca8d,#c89b54); box-shadow:0 8px 32px #0008,inset 0 1px #fff8; color:#21160f; font-size:13px; font-weight:800; letter-spacing:.07em; transition:transform .2s,filter .2s; }
.launch-enter span { font-size:18px; }
.launch-enter:active { transform:scale(.97); }
.launch-study { min-height:42px; margin-top:7px; padding:12px; color:#e5d8c3; font-size:12px; text-shadow:0 2px 9px #000; }
.launch-footer { justify-content:space-between; color:#d4c4a3; font-size:8px; letter-spacing:.15em; }
.launch-edition { color:#ad9d7a; }
.launch-edition i { margin-left:8px; color:#d9bb7e; font-style:normal; }
.launch-screen.is-leaving { animation:launch-exit .72s cubic-bezier(.65,0,.25,1) forwards; }
.launch-screen.is-leaving::before { animation:launch-zoom .72s cubic-bezier(.2,.7,.2,1) forwards; }
.launch-enter:focus-visible,.launch-study:focus-visible { outline-color:#fff0c0; }
@keyframes launch-exit { to{opacity:0;visibility:hidden} }
@keyframes launch-zoom { to{transform:scale(1.09);filter:brightness(1.08) saturate(1.06)} }
body[data-motion=true] .launch-content { animation:launch-arrival .9s .12s both cubic-bezier(.16,1,.3,1); }
body[data-motion=true] .launch-mark { animation:mark-arrival 1.2s .18s both cubic-bezier(.16,1,.3,1); }
body[data-motion=true] .launch-screen::before { animation:launch-curtain 3.6s cubic-bezier(.2,.7,.2,1) both; }
body[data-motion=true] .launch-screen::after { animation:launch-light 5.5s ease-in-out infinite alternate; }
@keyframes launch-arrival { from{opacity:0;transform:translateY(18px);filter:blur(5px)} to{opacity:1;transform:none;filter:blur(0)} }
@keyframes mark-arrival { 0%{opacity:0;transform:scale(.65) rotate(-12deg)} 75%{opacity:1;transform:scale(1.08) rotate(2deg)} 100%{transform:scale(1) rotate(0)} }
@keyframes launch-curtain { from{transform:scale(1.08);filter:brightness(.52) saturate(.78)} to{transform:scale(1);filter:brightness(.82) saturate(1)} }
@keyframes launch-light { from{opacity:.62;transform:scale(1)} to{opacity:1;transform:scale(1.12)} }
.topbar {
  padding-top: env(safe-area-inset-top);
  background: #111a15;
  border-bottom: 1px solid #2c392f;
}
.top-inner {
  max-width: 1270px;
  margin: auto;
  min-height: 71px;
  padding: 0 30px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
}
.brand { display: flex; align-items: center; gap: 11px; width: max-content; }
.brand img { border-radius: 9px; }
.brand strong { font: 25px/.96 var(--serif); display: block; }
.brand small { color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .16em; display: block; margin-top: 5px; }
.tabs { display: flex; gap: 4px; padding: 4px; border: 1px solid #2d3a31; border-radius: 11px; background: #0d1510; }
.tabs a { display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 7px; min-height: 40px; padding: 0 19px; font-size: 14px; color: var(--muted); font-weight: 650; }
.tabs a[aria-current] { background: #2c392e; color: var(--gold); }
.nav-icon { display: grid; place-items: center; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.offline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 99px;
  font-size: 11px;
  color: var(--soft);
  text-align: center;
}
.offline::before, .live-dot, .eyebrow i, .turn-status i, .breathing {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  display: inline-block;
  background: var(--gold);
}
.offline.ready { color: var(--mint); }
.offline.ready::before, .live-dot { background: #98c698; box-shadow: 0 0 10px #94e29966; }
.icon-button { background: #1d2921; color: var(--text); border: 1px solid var(--line); border-radius: 10px; width: 42px; height: 42px; display: grid; place-items: center; }
.shell { width: min(100% - 60px, 1210px); margin: 0 auto; padding: 34px 0 46px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 24px; }
.eyebrow, .section-kicker, .list-heading, .scenario-label { font-size: 11px; font-weight: 750; letter-spacing: .15em; color: var(--gold); }
.eyebrow { display: flex; align-items: center; gap: 8px; }
.eyebrow span { color: #818470; }
.eyebrow i { width: 5px; height: 5px; }
h1 { font-size: clamp(42px, 5vw, 66px); line-height: .99; letter-spacing: -.047em; margin: 8px 0 6px; }
.page-heading p, .lead { color: var(--soft); font-size: 15px; }
.heading-badge { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); padding: 9px 12px; border-radius: 8px; font-size: 12px; color: var(--soft); white-space: nowrap; }
.heading-badge svg, .heading-badge strong { color: var(--gold); }
.divider { width: 1px; height: 13px; background: var(--line); }
.game-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 27%); gap: 18px; align-items: start; }
.table-panel, .panel { border: 1px solid var(--line); border-radius: 17px; background: var(--panel); }
.table-panel { background: #121c16; overflow: hidden; }
.table-strip { min-height: 41px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid #29382e; color: var(--soft); font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.table-strip > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.stage { height: 435px; position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 50% 48%, var(--room-stage-glow), var(--room-stage-shadow) 78%); }
.felt {
  position: absolute;
  inset: 38px 8% 51px;
  border: 8px solid var(--rail);
  border-radius: var(--room-radius);
  background: radial-gradient(ellipse at 50% 25%, var(--cloth-light), var(--cloth-middle) 63%, var(--cloth-dark) 100%);
  box-shadow: 0 0 0 1px var(--rail-edge), 0 10px 28px #0009, inset 0 0 28px #080e0c;
}
.felt::before { content: ""; position: absolute; inset: 7px; border: 1px solid var(--embroidery); border-radius: inherit; background: var(--room-art, linear-gradient(transparent, transparent)) center / 100% 100% no-repeat, url("./assets/felt.svg"); }
.felt::after { content: "✦"; position: absolute; top: 16%; left: 50%; transform: translateX(-50%); color: #c4a67172; font: 22px var(--serif); }
.seat { position: absolute; width: 117px; z-index: 1; padding: 5px 8px 6px; border: 1px solid var(--room-seat-line, #4b5847); border-radius: 11px; background: var(--room-seat, #17221b); box-shadow: 0 6px 14px #07110b77; }
.seat-1 { top: 20px; left: 23%; }
.seat-2 { top: 20px; right: 23%; }
.seat-3 { top: 188px; right: 2.5%; }
.seat-4 { top: 188px; left: 2.5%; }
.seat.acting { border-color: var(--gold); box-shadow: 0 0 17px #d9b87a3d; }
.seat.folded { opacity: .65; }
.seat.winner { border-color: #a4c19a; }
.seat-id { display: flex; gap: 8px; align-items: center; min-width: 0; }
.player-mark { position:relative; display:grid; place-items:center; flex:none; width:36px; height:36px; border:1px dashed currentColor; border-radius:50%; background:radial-gradient(circle at 35% 25%,#fff3,transparent 43%),#1c211d; color:#ead6b3; box-shadow:inset 0 0 0 3px #080907,inset 0 0 0 4px currentColor,0 2px 8px #0008; }
.player-mark::before { content:""; position:absolute; inset:7px; border:1px solid currentColor; border-radius:50%; opacity:.43; }
.player-mark > span:first-child { position:relative; font:700 12px/1 Georgia,serif; }
.player-mark.rose { color:#dc9990; background-color:#35201f; }
.player-mark.blue { color:#9bb9d8; background-color:#1b2938; }
.player-mark.amber { color:#e1bc7a; background-color:#352c1a; }
.player-mark.green { color:#a5c59f; background-color:#1b2f23; }
.casino-chips { display:inline-flex; align-items:center; width:27px; height:16px; flex:none; padding-left:1px; vertical-align:middle; }
.casino-chip { display:block; width:12px; height:12px; flex:none; margin-left:-3px; border:1px dashed #f7e8c8; border-radius:50%; box-shadow:0 1px 3px #0009,inset 0 0 0 2px #12130f; }
.casino-chip:first-child { margin-left:0; }
.casino-chip.red { background:#b84137; }
.casino-chip.green { background:#3c7550; }
.casino-chip.gold { background:#c69b4d; }
.dealer, .hero-dealer { display: grid; place-items: center; border-radius: 50%; background: #e2cba2; color: #322816; font-size: 9px; width: 16px; height: 16px; font-weight: 800; }
.dealer { position: absolute; right: -3px; bottom: -3px; }
.seat strong { font-size: 13px; display: block; }
.seat small { display: block; color: #c5cbb9; font-size: 12px; margin-top: 1px; font-variant-numeric: tabular-nums; }
.seat-tag { display: block; margin-top: 5px; color: #c8b994; font-size: 10px; min-height: 13px; line-height: 1.15; }
.community { position: absolute; top: 134px; left: 50%; transform: translateX(-50%); text-align: center; width: max-content; max-width: 100%; }
.pot { display: inline-flex; gap: 7px; align-items: center; padding: 4px 10px; background: var(--room-pill, #14261b); border: 1px solid #718367; border-radius: 30px; color: var(--gold); }
.pot span { font-size: 9px; letter-spacing: .14em; font-weight: 800; }
.pot strong { color: #f3dfb7; font-size: 17px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.cards { display: flex; gap: 6px; align-items: center; }
.board { justify-content: center; margin: 9px 0; }
.card {
  width: 45px;
  height: 62px;
  display: inline-flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  line-height: 1;
  font-family: var(--serif);
  font-weight: 700;
}
.card.face { color: #192a23; background: linear-gradient(155deg, #fff8e8, #e8ddc2); border: 1px solid #faf0d4; box-shadow: 0 2px 5px #09120c66; font-size: 22px; }
.card.face span:nth-child(2) { font-size: 19px; }
.card.face.red { color: #982c2e; }
.card.slot { border: 1px solid #75957e66; background: var(--room-slot, #102c2163); }
.card.back { color: #d5b67b; background: repeating-linear-gradient(45deg, #2f4236 0 3px, #384b3c 3px 4px); border: 1px solid #a69061; box-shadow: inset 0 0 0 3px #1c2a22, 0 3px 10px #06100b99; font-size: 20px; }
.card.back > .back-emblem { position:relative; z-index:1; line-height:1; }
.mini-cards { display: flex; gap: 3px; margin-top: 4px; }
.mini-cards .card { width: 23px; height: 26px; border-radius: 3px; font-size: 10px; }
.mini-cards .card span:nth-child(2) { font-size: 9px; }
.turn-status { display: inline-flex; justify-content: center; align-items: center; gap: 6px; color: #e1e9d9; background: var(--room-pill, #11251bcf); border: 1px solid #768a675c; padding: 5px 10px; border-radius: 30px; font-size: 12px; font-weight: 650; }
.turn-status i { width: 5px; height: 5px; background: #a1b9a4; }
.turn-status.your-turn, .turn-status.settled { color: #f2d59c; border-color: #ba9a62; }
.turn-status.your-turn i, .turn-status.settled i { background: var(--gold); }
.hero { position: absolute; bottom: 17px; left: 50%; transform: translateX(-50%); text-align: center; }
.hero-cards { justify-content: center; }
.hero-cards .card { width: 49px; height: 68px; }
.hero-active .card { box-shadow: 0 0 13px #e4c58c52; }
.hero-id { margin: 6px auto 0; width: max-content; min-height: 26px; display: flex; align-items: center; gap: 7px; font-size: 12px; padding: 4px 8px; border: 1px solid #5e6d56; background: var(--room-pill, #152219); border-radius: 7px; }
.hero-id strong span { color: var(--muted); font-weight: 500; }
.hero-stack { color: var(--gold); font-size: 12px; white-space: nowrap; }
.hero-last { color: #e0ce9e; font-size: 11px; margin-top: 3px; white-space: nowrap; }
.action-dock { min-height: 86px; border-top: 1px solid #2b3b30; padding: 13px 15px; background: #151f18; }
.action-dock.idle, .action-dock.after-hand, .action-dock.waiting { display: flex; justify-content: center; align-items: center; gap: 12px; }
.action-dock.idle span, .action-dock.waiting { color: var(--soft); font-size: 12px; }
.action-dock.idle .button { min-width: 170px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 9px; min-height: 46px; padding: 0 15px; text-align: center; color: var(--text); font-weight: 700; font-size: 14px; line-height: 1.15; }
.button.primary { color: var(--ink); background: linear-gradient(150deg, #f1d7a1, #d3af6c); border-color: #eed098; box-shadow: 0 2px 5px #0004; }
.button.secondary, .button.fold { border-color: #435246; background: #212e24; }
.button.call { border-color: #58816b; background: #2c5341; color: #f3fff4; }
.button.raise { gap: 5px; }
.button.raise strong { white-space: nowrap; }
.button:hover, .icon-button:hover, .mini-button:hover, .lesson-row:hover { filter: brightness(1.13); }
.button:active { transform: translateY(1px); }
.action-line { display: flex; gap: 8px; }
.action-line > button { flex: 1; min-width: 0; padding: 0 7px; }
.raise-line { display: flex; align-items: center; gap: 9px; margin-top: 9px; }
.raise-line label { color: var(--soft); font-size: 12px; }
input[type="range"] { accent-color: var(--gold); min-width: 25px; min-height: 35px; }
.raise-line input[type="range"] { flex: 1; }
input[type="number"], select, textarea { color: var(--text); border: 1px solid #596758; background: #111b15; border-radius: 7px; }
input[type="number"] { width: 78px; min-height: 38px; padding: 3px 5px 3px 8px; font-size: 16px; }
.mini-button { background: #26362b; color: var(--text); border: 1px solid #485b4c; border-radius: 7px; min-height: 38px; font-size: 12px; padding: 0 9px; white-space: nowrap; }
.text-button { background: none; border: 0; display: inline-flex; align-items: center; justify-content: flex-start; gap: 7px; color: var(--gold); font-weight: 650; font-size: 13px; min-height: 39px; padding: 0; text-align: left; }
.text-button:hover { color: #ffe3b3; }
.help-button { margin-top: 2px; }
.breathing { background: #b8cdb4; animation: breathe 1.4s ease-in-out infinite alternate; }
@keyframes breathe { from { opacity: .35; } to { opacity: 1; } }
.table-side { display: grid; gap: 12px; }
.table-side .panel { padding: 17px; }
.section-kicker { display: flex; align-items: center; gap: 8px; }
.session-stack { display: flex; align-items: baseline; gap: 7px; margin: 10px 0 13px; }
.session-stack strong { font: 42px/1 var(--serif); letter-spacing: -.04em; }
.session-stack span { font-size: 13px; color: var(--soft); }
.session-facts > div, .history-list > li:not(.history-street) { display: flex; justify-content: space-between; gap: 6px; border-top: 1px solid var(--line); padding: 8px 0; color: var(--soft); font-size: 13px; }
.session-facts strong, .history-list strong { color: var(--text); text-align: right; }
.history-list { list-style: none; padding: 0; margin: 10px 0 0; }
.history-list.full { margin: 4px 0 0; }
.history-street { color: var(--gold); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .1em; padding: 8px 0; }
.table-side p { font-size: 13px; margin: 9px 0 3px; }
.bridge p { font: 21px/1.3 var(--serif); }
.hand-result { margin-top: 12px; padding: 14px 17px; display: flex; justify-content: space-between; gap: 10px; }
.hand-result p { color: var(--soft); font-size: 13px; margin-top: 4px; }
.mobile-history { display: none; }
.clip-note { margin-top: 12px; display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--soft); }
.clip-note svg { color: var(--gold); }
.buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.course-hero { display: grid; grid-template-columns: 1.65fr 1fr; background: linear-gradient(115deg, #23392a, #18251c 78%); overflow: hidden; }
.course-main, .course-progress { padding: 23px; }
.course-main h2 { font-size: 33px; margin: 9px 0 5px; }
.course-main p { color: var(--soft); margin-bottom: 16px; }
.course-progress { border-left: 1px solid var(--line); align-content: center; }
.progress-number { margin: 5px 0; color: var(--soft); font-size: 14px; }
.progress-number strong { color: var(--text); font: 43px/1 var(--serif); }
progress { width: 100%; height: 7px; border: 0; border-radius: 99px; overflow: hidden; background: #354538; color: var(--gold); accent-color: var(--gold); }
progress::-webkit-progress-bar { background: #354538; }
progress::-webkit-progress-value { background: var(--gold); }
progress::-moz-progress-bar { background: var(--gold); }
.progress-stats { display: flex; flex-wrap: wrap; gap: 6px 15px; margin-top: 11px; font-size: 12px; color: var(--soft); }
.progress-stats strong { color: var(--text); margin-left: 3px; }
.course-grid { display: grid; grid-template-columns: 1.65fr 1fr; gap: 17px; margin-top: 21px; }
.list-heading { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 11px; }
.list-heading small { color: var(--muted); font-size: 10px; letter-spacing: .1em; }
.lesson-list, .lesson-sections, .quiz-options { display: grid; gap: 8px; }
.lesson-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; color: var(--text); text-align: left; }
.lesson-row > svg { color: var(--muted); }
.lesson-icon { width: 40px; height: 40px; display: grid; place-items: center; background: #28382d; border: 1px solid #465646; border-radius: 9px; color: var(--gold); }
.lesson-name small, .lesson-name strong { display: block; }
.lesson-name small { color: var(--soft); font-size: 11px; margin-bottom: 3px; }
.lesson-name strong { font-size: 15px; }
.lesson-meta { color: var(--gold); font-size: 12px; white-space: nowrap; }
.workshop-card { padding: 15px; margin-bottom: 9px; }
.workshop-card h3 { font-size: 24px; margin: 7px 0 3px; }
.workshop-card p { color: var(--soft); font-size: 14px; }
.workshop-card .button { margin-top: 11px; }
.reading-shell { max-width: 770px; }
.back-link { margin: -12px 0 13px; }
.lead { margin: 9px 0 18px; }
.lesson-section { display: flex; align-items: flex-start; gap: 14px; padding: 18px; }
.step-number { color: var(--gold); font-size: 12px; font-weight: 750; margin-top: 5px; }
.lesson-section h2 { font-size: 25px; margin-bottom: 7px; }
.lesson-section p, .lesson-next p { color: var(--soft); }
.lesson-next { padding: 18px; margin-top: 12px; }
.lesson-next .buttons { margin-top: 11px; }
.quiz-card, .lab-card { padding: 20px; margin-top: 17px; }
.quiz-top { display: flex; justify-content: space-between; gap: 8px; color: var(--soft); font-size: 13px; margin-bottom: 6px; }
.scenario-label { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); }
.quiz-card h2 { font-size: clamp(23px, 4vw, 33px); line-height: 1.22; margin: 13px 0; }
.scenario-cards { margin-bottom: 13px; }
.quiz-option { display: flex; align-items: center; text-align: left; gap: 10px; color: var(--text); background: #202e24; border: 1px solid #405143; border-radius: 9px; padding: 8px; min-height: 47px; font-size: 14px; }
.quiz-option > span { flex: none; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 6px; background: #334639; color: var(--gold); }
.quiz-option > strong { flex: 1; font-weight: 600; }
.quiz-option.correct, .feedback.correct { border-color: #6a9d74; background: #233c2b; }
.quiz-option.incorrect, .feedback.incorrect { border-color: #ad796c; background: #392c26; }
.feedback { border: 1px solid #837854; background: #302f22; border-radius: 9px; padding: 11px; margin: 10px 0; }
.feedback p { color: var(--soft); margin-top: 4px; }
.quiz-summary { display: flex; gap: 24px; }
.quiz-summary > div { display: grid; gap: 5px; }
.quiz-summary strong { color: var(--gold); font: 33px var(--serif); }
.quiz-card > p, .lab-card > p { color: var(--soft); margin: 11px 0; }
.lab-label { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 650; margin: 12px 0 5px; }
.lab-label output { font-variant-numeric: tabular-nums; color: var(--gold); }
.lab-card input[type="range"], .lab-card textarea { width: 100%; margin: 0; }
.lab-card textarea { resize: vertical; padding: 8px; font: 16px/1.35 ui-monospace, monospace; }
.lab-card code { color: var(--gold); }
.lab-card .muted { font-size: 13px; }
.lab-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 15px 0 8px; }
.lab-metrics > div { display: grid; gap: 3px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; }
.lab-metrics span { color: var(--soft); font-size: 12px; }
.lab-metrics strong { color: var(--gold); font: 25px/1 var(--serif); }
.lab-error { color: var(--red); margin: 12px 0; overflow-wrap: anywhere; }
.range-list { margin: 0; padding: 6px; list-style: none; }
.range-list li { display: flex; gap: 8px; align-items: center; padding: 6px 0; font-size: 12px; color: var(--soft); }
.range-list li strong { margin-left: auto; text-align: right; }
.range-list .card { width: 26px; height: 33px; font-size: 13px; }
.range-list .card span:nth-child(2) { font-size: 11px; }
dialog { width: min(100% - 26px, 650px); max-height: min(86dvh, 750px); background: #1a251d; color: var(--text); border: 1px solid #59634f; border-radius: 15px; padding: 21px; box-shadow: 0 22px 65px #0009; }
dialog::backdrop { background: #080f0bcc; }
.dialog-close { position: absolute; right: 12px; top: 12px; }
dialog h2 { font-size: 33px; margin: 5px 34px 8px 0; }
dialog p { color: var(--soft); margin: 7px 0 12px; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 10px 0; min-height: 54px; border-top: 1px solid var(--line); }
.setting span small { display: block; margin-top: 3px; color: var(--soft); font-size: 12px; }
.setting input { width: 22px; height: 22px; accent-color: var(--gold); margin-right: 8px; }
.setting select { font-size: 16px; min-height: 39px; }
.settings-offline { color: var(--mint); border-top: 1px solid var(--line); padding-top: 12px; display: flex; gap: 8px; align-items: center; font-size: 13px; }
.analysis-list { display: grid; gap: 6px; }
details { border: 1px solid var(--line); border-radius: 8px; background: #142017; }
summary { padding: 10px; min-height: 41px; cursor: pointer; color: var(--soft); }
summary strong { color: var(--gold); margin-left: 8px; }
.analysis-body { padding: 0 9px 9px; }
.analysis-body p { font-size: 14px; }
.analysis-body .lens { padding: 9px; background: #23362a; border-radius: 7px; }
.snapshot-cards { display: flex; gap: 8px 17px; flex-wrap: wrap; margin: 8px 0; }
.snapshot-cards > div > span { display: block; font-size: 12px; margin-bottom: 5px; color: var(--soft); }
.snapshot-cards .card { width: 34px; height: 43px; font-size: 16px; }
.snapshot-cards .card span:nth-child(2) { font-size: 14px; }
@media (max-width: 980px) {
  .seat-3, .seat-4 { top: 218px; }
  .seat-3 { right: 1.5%; }
  .seat-4 { left: 1.5%; }
  .seat-1 { left: 18%; }
  .seat-2 { right: 18%; }
}
@media (max-width: 730px) {
  .top-inner { min-height: 56px; display: flex; justify-content: space-between; padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); }
  .brand { gap: 7px; }
  .brand img { width: 33px; height: 33px; }
  .brand strong { font-size: 23px; }
  .brand small { margin-top: 3px; font-size: 7px; }
  .top-actions { gap: 7px; }
  .offline { font-size: 10px; padding: 5px 7px; gap: 4px; }
  .topbar .icon-button { width: 39px; height: 39px; }
  .tabs { position: fixed; z-index: 5; bottom: 0; left: 0; right: 0; border: 0; border-top: 1px solid #3a4d3e; border-radius: 0; padding: 5px max(12px, env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background: #111b15; }
  .tabs a { flex: 1; min-height: 43px; }
  .shell { width: min(100% - 22px, 610px); padding: 17px 0 calc(74px + env(safe-area-inset-bottom)); }
  .page-heading { margin-bottom: 13px; align-items: flex-end; }
  .eyebrow { font-size: 9px; gap: 6px; }
  h1 { font-size: clamp(34px, 9.8vw, 52px); margin-top: 6px; }
  .page-heading p { font-size: 12px; }
  .heading-badge { display: none; }
  .game-grid { display: block; }
  .table-panel, .panel { border-radius: 12px; }
  .table-strip { min-height: 31px; padding: 0 10px; font-size: 9px; }
  .stage { height: 365px; }
  .felt { inset: 30px 12px 37px; border-width: 5px; }
  .felt::after { top: 20%; font-size: 17px; }
  .seat { width: 85px; padding: 4px 5px; border-radius: 8px; }
  .seat-1 { top: 8px; left: 17%; }
  .seat-2 { top: 8px; right: 17%; }
  .seat-3 { top: 76px; right: 2.5%; }
  .seat-4 { top: 76px; left: 2.5%; }
  .seat-id { gap: 5px; }
  .player-mark { width:29px; height:29px; box-shadow:inset 0 0 0 2px #080907,inset 0 0 0 3px currentColor,0 2px 5px #0008; }
  .player-mark::before { inset:6px; }
  .player-mark > span:first-child { font-size:10px; }
  .casino-chips { width:21px; transform:scale(.83); transform-origin:left center; margin-right:-3px; }
  .seat strong { font-size: 12px; }
  .seat small { font-size: 11px; }
  .seat-tag { margin-top: 3px; font-size: 9px; }
  .mini-cards .card { width: 25px; height: 18px; flex-direction: row; gap: 2px; }
  .community { top: 114px; }
  .board { margin: 7px 0; gap: 4px; }
  .board .card { width: clamp(34px, 10.8vw, 48px); height: 56px; }
  .pot { padding: 3px 8px; }
  .hero { bottom: 12px; }
  .hero-cards .card { width: 47px; height: 59px; }
  .action-dock { min-height: 66px; padding: 8px 9px; }
  .action-dock.idle { flex-wrap: wrap; gap: 6px 9px; }
  .action-dock.idle .button { min-width: 140px; }
  .action-dock.idle span { font-size: 11px; }
  .action-dock.after-hand { gap: 6px; }
  .action-dock.after-hand .button { flex: 1; padding: 0 4px; }
  .table-side { display: none; }
  .mobile-history { display: inline-flex; white-space: nowrap; }
  .hand-result { padding: 10px; }
  .course-hero, .course-grid { grid-template-columns: 1fr; }
  .course-main, .course-progress { padding: 15px; }
  .course-progress { border-left: 0; border-top: 1px solid var(--line); }
  .course-main h2 { font-size: 28px; }
  .course-main p, .lesson-section p { font-size: 14px; }
  .course-grid { gap: 13px; margin-top: 14px; }
  .lesson-row { padding: 8px; gap: 8px; }
  .lesson-icon { width: 34px; height: 34px; }
  .lesson-meta { font-size: 11px; }
  .lesson-section, .lesson-next, .quiz-card, .lab-card { padding: 13px; }
  .scenario-cards .card { width: 39px; height: 52px; }
}
@media (max-width: 730px) and (max-height: 740px) {
  .stage { height: 320px; }
  .community { top: 100px; }
  .seat-1, .seat-2 { top: 6px; }
  .seat-3, .seat-4 { top: 69px; }
  .hero { bottom: 7px; }
  .hero-cards .card { height: 53px; }
  .hero-id { margin-top: 4px; min-height: 21px; padding: 2px 7px; }
  .hero-last { font-size: 10px; margin-top: 2px; }
  .board .card { height: 47px; }
  .game-shell { padding-top: 11px; }
  .game-shell .page-heading { margin-bottom: 9px; }
  .game-shell h1 { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* The room palette also drives its preview in the chooser. */
[data-room="nocturne"] {
  --room-glow: #263529;
  --room-stage-glow: #25352a;
  --room-stage-shadow: #121b15;
  --cloth-light: #2a5945;
  --cloth-middle: #193b2c;
  --cloth-dark: #13291e;
  --rail: #342e25;
  --rail-edge: #8d7552;
  --embroidery: #947d4f82;
  --room-radius: 48% / 49%;
}
[data-room="rubin"] {
  --room-glow: #49292c;
  --room-stage-glow: #3b252b;
  --room-stage-shadow: #1c1518;
  --cloth-light: #77404b;
  --cloth-middle: #4d2935;
  --cloth-dark: #301c27;
  --rail: #392424;
  --rail-edge: #ab7858;
  --embroidery: #dd9f656b;
  --room-radius: 37% / 51%;
  --room-art: url("./assets/rubin.svg");
  --room-seat: #2d2023;
  --room-seat-line: #69504a;
  --room-pill: #332027;
  --room-slot: #33162269;
}
[data-room="riviera"] {
  --room-glow: #193e47;
  --room-stage-glow: #23404a;
  --room-stage-shadow: #111f25;
  --cloth-light: #2c6478;
  --cloth-middle: #244857;
  --cloth-dark: #192f40;
  --rail: #222f38;
  --rail-edge: #87a1a7;
  --embroidery: #89b3c67a;
  --room-radius: 25% / 32%;
  --room-art: url("./assets/riviera.svg");
  --room-seat: #172932;
  --room-seat-line: #49636d;
  --room-pill: #172e38;
  --room-slot: #11293670;
}
[data-room="rubin"] .felt::after, [data-room="riviera"] .felt::after { content: none; }
.room-trigger {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px;
  min-height: 44px; border: 1px solid var(--line); border-radius: 9px;
  background: #1c281f; color: var(--gold); text-align: left;
}
.room-trigger span { display: grid; gap: 2px; }
.room-trigger small { font-size: 10px; color: var(--soft); white-space: nowrap; }
.room-trigger strong { font-size: 13px; }
.room-trigger:hover { filter: brightness(1.15); }
.room-list { display: grid; gap: 8px; }
.room-option {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; align-items: center;
  min-height: 75px; width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 10px;
  background: #162019; color: var(--text); text-align: left;
}
.room-option[aria-pressed="true"] { border-color: #b69c6b; background: #26362a; }
.room-option:hover { border-color: var(--gold); }
.room-option > svg { color: var(--gold); }
.room-option-name { display: grid; gap: 3px; }
.room-option-name small { color: var(--gold); font-size: 9px; font-weight: 750; letter-spacing: .12em; }
.room-option-name strong { font: 22px/1 var(--serif); }
.room-option-name > span { color: var(--soft); font-size: 12px; }
.room-preview {
  position: relative; isolation: isolate; display: flex; justify-content: center; align-items: center; gap: 3px;
  width: 93px; height: 53px; background: radial-gradient(ellipse at center, var(--room-glow), #141913);
  border: 1px solid var(--room-seat-line, #405648); border-radius: 6px;
}
.room-preview i {
  position: absolute; z-index: -1; inset: 5px 6px; border: 2px solid var(--rail);
  border-radius: var(--room-radius); box-shadow: 0 0 0 1px var(--rail-edge), 0 3px 5px #0008;
  background: var(--room-art, linear-gradient(transparent, transparent)) center / 100% 100% no-repeat,
    radial-gradient(ellipse at 50% 24%, var(--cloth-light), var(--cloth-dark));
}
.room-preview b { display: block; width: 8px; height: 11px; border-radius: 2px; background: #f0ddba; box-shadow: 0 1px 2px #0007; }
@media (max-width: 730px) {
  [data-room="nocturne"] .felt { border-radius: 42% / 43%; }
  .room-trigger { gap: 6px; min-height: 43px; padding: 5px 8px; }
  .room-trigger > svg:last-child { display: none; }
  .room-trigger small { font-size: 9px; }
  .room-trigger strong { font-size: 12px; }
}
@media (max-width: 345px) {
  .game-shell .page-heading { gap: 5px; }
  .room-trigger > svg:first-child { display: none; }
  .room-preview { width: 65px; }
}

[data-room="obsydian"] {
  --room-glow:#333238; --room-stage-glow:#292a30; --room-stage-shadow:#121318;
  --cloth-light:#53515c; --cloth-middle:#363642; --cloth-dark:#22222b;
  --rail:#303138; --rail-edge:#a3a2ad; --embroidery:#abb1c67c; --room-radius:26% / 39%;
  --room-art:repeating-linear-gradient(130deg,transparent 0 31px,#d6e3ee20 32px,transparent 33px 70px);
}
[data-room="miedz"] {
  --room-glow:#513a2e; --room-stage-glow:#4b3229; --room-stage-shadow:#221914;
  --cloth-light:#935a44; --cloth-middle:#6a3c2c; --cloth-dark:#47291e;
  --rail:#513022; --rail-edge:#d3a17b; --embroidery:#edb2828a; --room-radius:49% / 46%;
  --room-art:repeating-radial-gradient(ellipse at 50% 50%,transparent 0 12px,#f3ca901e 13px,transparent 14px 24px);
}
[data-room="zorza"] {
  --room-glow:#493854; --room-stage-glow:#493052; --room-stage-shadow:#211629;
  --cloth-light:#81538f; --cloth-middle:#533666; --cloth-dark:#35243e;
  --rail:#422e45; --rail-edge:#cb9ed2; --embroidery:#d4aee288; --room-radius:31% 47% 31% 47% / 45%;
  --room-art:radial-gradient(ellipse at 8% 3%,#f5c5f44a,transparent 41%),radial-gradient(ellipse at 95% 96%,#7adee046,transparent 42%);
}
[data-room="laguna"] {
  --room-glow:#264940; --room-stage-glow:#254b47; --room-stage-shadow:#142724;
  --cloth-light:#387d73; --cloth-middle:#255e57; --cloth-dark:#193d38;
  --rail:#24463e; --rail-edge:#95c7ae; --embroidery:#b1ddc48a; --room-radius:44% / 35%;
  --room-art:radial-gradient(ellipse at center,transparent 59%,#a4e3d745 60%,transparent 61%,transparent 67%,#a4e3d745 68%,transparent 69%);
}
[data-room="szampan"] {
  --room-glow:#4b462c; --room-stage-glow:#46412c; --room-stage-shadow:#241f16;
  --cloth-light:#75683c; --cloth-middle:#595031; --cloth-dark:#39321e;
  --rail:#4b3926; --rail-edge:#dbc68c; --embroidery:#edda9a90; --room-radius:23% / 40%;
  --room-art:url("./assets/rubin.svg");
}
[data-room="granat"] {
  --room-glow:#273552; --room-stage-glow:#283450; --room-stage-shadow:#141c2d;
  --cloth-light:#435e91; --cloth-middle:#303f64; --cloth-dark:#222d49;
  --rail:#252f47; --rail-edge:#9cb2dd; --embroidery:#acc8e88a; --room-radius:49% / 36%;
  --room-art:radial-gradient(circle at 22% 29%,#e7efffa1 0 1px,transparent 2px),radial-gradient(circle at 78% 65%,#e7efff95 0 1px,transparent 2px),radial-gradient(circle at 68% 23%,#e7efff95 0 1px,transparent 2px);
}
[data-room="koral"] {
  --room-glow:#5e3835; --room-stage-glow:#56332e; --room-stage-shadow:#291b1b;
  --cloth-light:#a26150; --cloth-middle:#773e37; --cloth-dark:#4b2a29;
  --rail:#553031; --rail-edge:#e0a483; --embroidery:#f5be9b80; --room-radius:33% / 48%;
  --room-art:repeating-conic-gradient(from 8deg at 50% 50%,transparent 0deg 17deg,#ffe0b61c 18deg,transparent 19deg 35deg);
}
[data-cloth="green"] { --cloth-light:#387054; --cloth-middle:#28513d; --cloth-dark:#163426; }
[data-cloth="wine"] { --cloth-light:#854555; --cloth-middle:#633645; --cloth-dark:#3e2631; }
[data-cloth="blue"] { --cloth-light:#396f8c; --cloth-middle:#2a4c64; --cloth-dark:#1a3245; }
[data-cloth="plum"] { --cloth-light:#815787; --cloth-middle:#543b62; --cloth-dark:#3b2742; }
[data-cloth="sand"] { --cloth-light:#837344; --cloth-middle:#635634; --cloth-dark:#413923; }
[data-cloth="charcoal"] { --cloth-light:#57565b; --cloth-middle:#3c3a42; --cloth-dark:#25242c; }
[data-cloth="teal"] { --cloth-light:#438175; --cloth-middle:#2c615a; --cloth-dark:#1f413d; }
[data-cloth="navy"] { --cloth-light:#46598c; --cloth-middle:#354468; --cloth-dark:#252d4d; }
[data-cloth="coral"] { --cloth-light:#9c5e50; --cloth-middle:#763e37; --cloth-dark:#4e2a28; }

[data-deck="large"] .card.face { font-family:system-ui,sans-serif; font-size:25px; font-weight:800; }
[data-deck="large"] .card.face span:nth-child(2) { font-size:21px; }
[data-deck="deco"] .card.face { background:linear-gradient(135deg,#fff9e7,#dcc48b); border-color:#d8ad61; box-shadow:inset 0 0 0 2px #f8e9c7,0 2px 5px #09120c66; }
[data-four-color="true"] .card.face[data-suit="d"] { color:#1556a5; }
[data-four-color="true"] .card.face[data-suit="c"] { color:#23623b; }
[data-back="lines"] .card.back { background:repeating-linear-gradient(110deg,#291c39 0 5px,#655273 5px 7px); border-color:#ae93ba; }
[data-back="diamonds"] .card.back { background:repeating-conic-gradient(#234050 0% 25%,#49717d 0% 50%) center / 12px 12px; border-color:#90b5bf; }
[data-deck="nocturne"] .card.face { position:relative; overflow:hidden; background:linear-gradient(145deg,#fffdf6 0%,#f3e9d4 68%,#e2cda7 100%); border:2px solid #bb8b43; box-shadow:inset 0 0 0 2px #fff9e9,inset 0 0 18px #bf965326,0 4px 9px #0007; }
[data-deck="nocturne"] .card.face::before { content:""; position:absolute; inset:3px; border:1px solid #c4a263; border-radius:4px; opacity:.7; pointer-events:none; }
[data-deck="nocturne"] .card.face::after { content:""; position:absolute; width:5px; height:5px; left:50%; top:50%; border:1px solid #c6a76d; transform:translate(-50%,-50%) rotate(45deg); opacity:.5; pointer-events:none; }
[data-deck="nocturne"] .card.face span { z-index:1; text-shadow:0 1px #fff9; }
[data-deck="nocturne"] .card.face span:first-child { font-size:1.02em; }
[data-back="nocturne"] .card.back { position:relative; overflow:hidden; color:#f1d48b; background:radial-gradient(ellipse at 50% 46%,#7d2932 0%,#591d28 38%,#37151d 76%,#211016 100%); border:1px solid #e4c174; box-shadow:inset 0 0 0 2px #35151b,inset 0 0 15px #c96b4922,0 3px 10px #06100b99; text-shadow:0 1px 3px #180b0e,0 0 8px #f5d68870; }
[data-back="nocturne"] .card.back::before { content:""; position:absolute; inset:4px; border:1px solid #d7b366; opacity:.78; background:repeating-linear-gradient(45deg,transparent 0 7px,#e3c57a16 7px 8px,transparent 8px 15px),repeating-linear-gradient(-45deg,transparent 0 7px,#e3c57a12 7px 8px,transparent 8px 15px); box-shadow:inset 0 0 0 2px #3b1920,inset 0 0 0 3px #d7b36678; }
[data-back="nocturne"] .card.back::after { content:""; position:absolute; inset:50% auto auto 50%; width:34%; aspect-ratio:1; transform:translate(-50%,-50%); border:1px solid #e3c477; border-radius:50%; background:radial-gradient(circle,#5c1d26 0 58%,#d8b26035 60% 64%,transparent 67%); box-shadow:0 0 0 3px #511b2580,0 0 11px #e2c07055; }
@media(max-width:480px) { .launch-footer { font-size:7px; letter-spacing:.1em; } .launch-content { margin-top:clamp(45px,8vh,75px); } }
@media(max-height:680px) { .launch-content { margin-top:22px; } .launch-mark { width:38px;height:38px;margin-bottom:8px; } .launch-content h1 { font-size:50px; margin-block:5px 8px; } .launch-promise { font-size:14px; } .launch-enter { margin-top:12px; min-height:42px; } .launch-study { margin-top:0; min-height:34px; padding:9px; } }
@media(prefers-reduced-motion:reduce) { .launch-screen.is-leaving { animation:none!important; opacity:0;visibility:hidden; } }
.appearance-fields { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0; }
.appearance-fields label { display:grid; gap:5px; color:var(--muted); font-size:13px; }
.appearance-fields label.appearance-check { display:flex; align-items:center; align-self:end; min-height:40px; }
.appearance-fields select { min-width:0; width:100%; padding:8px; }
.appearance-preview .room-preview { width:100%; height:96px; gap:5px; }
.appearance-preview .card { z-index:1; }
.appearance-done { margin-top:12px; width:100%; }
.spinacer-field { display:grid; gap:8px; }
.spinacer-field input { width:100%; padding:10px; background:var(--panel); border:1px solid var(--line); border-radius:8px; color:var(--text); }
.spinacer-questions { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
@media(max-width:730px) { .tabs a { padding-inline:8px; } }
.seat .seat-tag { display:flex; align-items:center; justify-content:space-between; gap:3px; }
.seat-tag > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.seat-odds { flex:none; color:#f5deaf; font-size:10px; font-weight:800; font-variant-numeric:tabular-nums; }
.hero-id .seat-odds { border-left:1px solid #6d6b52; padding-left:6px; }
.odds-details { width:100%; justify-content:center; min-height:27px; padding:3px 7px; font-size:11px; border-top:1px solid var(--line); }
.game-next { display:flex; gap:16px; flex-wrap:wrap; padding:8px 0 0; }