@font-face { font-family: Inter; src: url('../fonts/inter-latin-400-2026-09-30.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url('../fonts/inter-latin-700-2026-09-30.woff2') format('woff2'); font-style: normal; font-weight: 600 900; font-display: swap; }
:root {
 --felt-deep: var(--dojo-page); --felt-mid: #122b3c; --felt-light: #20485b;
 --felt-dark: var(--dojo-page); --panel: var(--dojo-surface);
 --panel-strong: var(--dojo-surface); --panel-border: var(--dojo-border);
 --hairline: var(--dojo-border); --hairline-soft: #22374e;
 --text-main: var(--dojo-ink); --text-soft: var(--dojo-muted);
 --accent: var(--dojo-cyan); --accent-warm: #1896b2;
 --accent-strong: var(--dojo-coral); --accent-secondary: var(--dojo-cyan);
 --shadow: var(--dojo-shadow); --radius-lg: 20px;
 --card-width: clamp(96px, 9vw, 140px);
}
body { background: var(--dojo-page); font: 400 16px/1.5 var(--dojo-font); }
body::before { display: none; }
h1, h2, h3, h4, h5, button, .brand-logo { font-family: var(--dojo-font); }
button, .nav-control, .profile-card { border-radius: var(--dojo-radius); }
button { font-weight: 700; letter-spacing: 0; text-transform: none; box-shadow: none; text-shadow: none; }
button:not(.secondary):not(.text-link):not(.nav-control):not(.gto-mode):not(.profile-card):not(.settings-close):not(.active-profile-chip) {
 background: var(--dojo-cyan); color: var(--dojo-page);
}
button.secondary { background: var(--dojo-raised); color: var(--dojo-ink); border: 1px solid var(--dojo-border); }
button:disabled, button.disabled-button { opacity: .48; box-shadow: none; }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 3px solid var(--dojo-cyan); outline-offset: 3px; }
.navbar-fixed nav, .gto-sub-bar { background: var(--dojo-surface); border-color: var(--dojo-border); }
.brand-logo { font-size: 20px; letter-spacing: -.04em; }
.gto-mode { font-size: 13px !important; letter-spacing: 0 !important; min-height: 36px; background: var(--dojo-raised); color: var(--dojo-muted); }
.gto-mode.gto-active { background: #234258; color: var(--dojo-cyan); box-shadow: none; }
.gto-sub-label, .active-profile-chip { font-size: 13px; letter-spacing: 0; }
.page-shell { max-width: 1240px; }
.hero-panel, #game-over, .table-panel { background: var(--dojo-surface); border: 1px solid var(--dojo-border); box-shadow: none; }
.table-panel::before { display: none; }
#welcome.hero-panel { text-align: left; padding: clamp(20px, 3vw, 36px); }
.hero-copy h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 700; letter-spacing: -.05em; }
.hero-copy p { font-size: 16px; line-height: 1.5; max-width: 52ch; color: var(--dojo-muted); }
.profile-selector-heading { text-align: left; }
.profile-selector h2 { font-size: 20px; }
.profile-selector-kicker { font-size: 12px; color: var(--dojo-cyan); }
.profile-card { background: var(--dojo-page); padding: 16px; min-height: 120px; text-align: left; }
.profile-card.is-selected, .profile-card[aria-pressed='true'] { border-color: var(--dojo-cyan); background: #192f42; box-shadow: none; }
.profile-card strong { font-size: 17px; line-height: 1.3; }
.profile-card small, .profile-difference { font-size: 14px; line-height: 1.4; color: var(--dojo-muted); }
.profile-tags span { font-size: 12px; background: var(--dojo-raised); color: var(--dojo-muted); }
#wager-options { gap: 16px; }
.chip-row { justify-content: center; }
.chip-guide { animation: none; }
.summary-card { background: var(--dojo-raised); border-color: var(--dojo-border); box-shadow: none; }
.summary-label { font-size: 13px; letter-spacing: .03em; }
.summary-value { font-family: var(--dojo-font); font-size: 24px; }
.board-layout { gap: 20px; }
.board-main { gap: 16px; }
.table-panel { padding: 18px; background: var(--dojo-felt); border-color: #3d6173; }
.panel-header h4 { font-size: 16px; font-weight: 700; letter-spacing: .02em; }
.game-board-totals { background: var(--dojo-page); border: 1px solid #3d6173; font: 700 24px/1 var(--dojo-font); }
.card-lane { overflow: visible; min-height: calc(var(--card-height) + 8px); container-type: inline-size; }
#dealer, #user-hand, #user-split-hand { width: 100%; }
#dealer .card:nth-child(n+2), #user-hand .card:nth-child(n+2), #user-split-hand .card:nth-child(n+2) {
 margin-left: min(0px, calc((100cqw - 12px - var(--card-width)) / max(1, var(--card-count, 2) - 1) - var(--card-width) - 8px)) !important;
}
#deck-pile { display: none; }
#dealer { padding-right: 0; }
.card { border-radius: 8px; filter: drop-shadow(0 3px 4px rgb(0 0 0 / 18%)); }
.player-hand-slot.is-active { background: transparent; border-color: var(--dojo-cyan); }
.player-hand-slot.is-complete:not(.is-active) { opacity: .82; }
.turn-badge { background: #203f4d; color: var(--dojo-cyan); border-color: var(--dojo-cyan); font-size: 12px; }
.board-side { align-content: start; gap: 12px; }
#gto-recommendation { background: #1b304b; border-color: #405a7a; font-size: 16px; box-shadow: none; }
.gto-highlight { background: var(--dojo-lime) !important; color: var(--dojo-page) !important; box-shadow: none !important; transform: none; animation: none; }
.gto-star { font-size: 14px; line-height: 1; color: var(--dojo-page); text-shadow: none; animation: none; }
#sidebar button.gto-highlight { flex-direction: row; align-items: center; justify-content: center; }
#sidebar { background: var(--dojo-surface); border-color: var(--dojo-border); padding: 14px; gap: 8px; }
#sidebar button { min-height: 52px; font-size: 17px; }
#stand-button.secondary { border-color: #577486; }
.dialog, .settings-panel { background: var(--dojo-surface); color: var(--dojo-ink); border: 1px solid var(--dojo-border); box-shadow: var(--dojo-shadow); }
#game-over { max-width: 1100px; margin-inline: auto; padding: 24px; gap: 14px; }
#game-outcome { font-size: clamp(28px, 5vw, 44px); letter-spacing: -.04em; color: var(--dojo-ink); }
#game-over[data-outcome='win'] #game-outcome { color: var(--dojo-lime); }
#game-over[data-outcome='loss'] #game-outcome { color: var(--dojo-coral); }
.result-evidence { display: grid; gap: 16px; text-align: left; }
.result-card-group { min-width: 0; padding: 14px; border: 1px solid #3d6173; border-radius: 16px; background: var(--dojo-felt); }
.result-card-label { margin: 0 0 8px; color: var(--dojo-muted); font-size: 14px; font-weight: 700; }
.result-card-row { display: flex; flex-wrap: wrap; gap: 8px; }
.result-card-row .card { margin: 0 !important; width: clamp(72px, 16vw, 105px) !important; height: auto !important; aspect-ratio: 5/7; transform: none !important; animation: none !important; }
.result-summary { gap: 10px; }
.result-summary table { display: none; }
.result-hand-list { font-size: 14px; line-height: 1.65; }
.result-round-net { font: 700 24px/1.25 var(--dojo-font); }
.win-celebration { position: absolute; border-radius: 20px; z-index: 1; }
.win-celebration span { background: var(--dojo-lime); }
.win-celebration span:nth-child(4n) { background: var(--dojo-cyan); }
.win-celebration span:nth-child(4n+1) { background: var(--dojo-ink); }
.result-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.result-actions > * { flex: 1 1 160px; }
.nav-wrapper { background: var(--dojo-surface) !important; }
.brand-logo { font-size: 20px !important; }
.game-home-link { background: var(--dojo-raised) !important; border: 1px solid var(--dojo-border) !important; box-shadow: none !important; }
select#language-toggle.nav-control { background-color: var(--dojo-raised) !important; font-family: var(--dojo-font); }
.gto-mode.gto-active { background: #234258 !important; border-color: var(--dojo-cyan) !important; color: var(--dojo-cyan) !important; text-shadow: none !important; }
#decidojo-home-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--dojo-muted); font-size: 14px; }
.page-shell:has(#game-board:not(.inactive)) > #decidojo-home-link,
.page-shell:has(#game-over:not(.inactive)) > #decidojo-home-link { display: none; }
#deck-pile, #deck-pile::after { display: none !important; }
.gto-stats-trigger { background: var(--dojo-raised) !important; color: var(--dojo-ink); box-shadow: none; }
.gss-lbl { font-size: 12px; text-transform: none; letter-spacing: 0; }
.gss-num { font-family: var(--dojo-font); font-size: 17px; }
@media (min-width: 361px) and (max-width: 480px) {
 .brand-logo { font-size: 17px !important; }
 .nav-wrapper { padding-inline: 8px; gap: 6px; }
 .nav-actions { gap: 4px; }
 select#language-toggle.nav-control { flex-basis: 158px; width: 158px; max-width: 158px; font-size: 14px !important; padding-left: 4px; padding-right: 12px !important; }
}
@media (max-width: 360px) {
 select#language-toggle.nav-control { flex-basis: 158px; width: 158px; max-width: 158px; font-size: 14px !important; padding-left: 4px; padding-right: 12px !important; }
}
@media (min-width: 900px) {
 #game-over { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr); align-items: start; }
 #game-over.inactive { display: none; }
 #game-outcome { grid-column: 1/-1; margin: 0; }
 .result-evidence { grid-column: 1; grid-row: 2/6; }
 #game-over > .result-summary, #game-over > .result-actions, #game-over > details, #game-over > .text-link { grid-column: 2; }
}
@media (max-width: 767px) {
 :root { --card-width: clamp(82px, 23vw, 104px); --action-dock-reserve: calc(158px + env(safe-area-inset-bottom, 0px)); }
 .page-shell { padding-inline: 12px; }
 #welcome.hero-panel { padding: 20px 16px; }
 #welcome .profile-card-list { grid-template-columns: 1fr; gap: 8px; }
 #welcome .profile-card { min-height: 76px; padding: 12px; gap: 4px; }
 #welcome .profile-card strong { font-size: 16px; }
 #welcome .profile-card small { font-size: 14px; }
 #welcome .profile-difference { display: block; }
 .board-main { gap: 10px; }
 .table-panel { padding: 12px; }
 .board-layout { gap: 10px; }
 #dealer { padding-right: 0; }
 #sidebar { background: var(--dojo-surface); padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); }
 #sidebar button { min-height: 48px; font-size: 15px; }
 .gto-sub-label { display: none; }
 .gto-mode { padding-inline: 10px !important; }
 #game-over { padding: 16px; }
 .result-evidence { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
 .result-card-group { padding: 8px; }
 .result-card-row { gap: 6px; }
 .result-card-row .card { width: clamp(44px, 15vw, 60px) !important; }
}
@media (orientation: landscape) and (max-height: 600px) {
 :root { --card-width: 84px; }
 .page-shell { padding-block: 8px; }
 .table-panel { padding: 10px; }
 .board-layout { grid-template-columns: minmax(0, 1fr) minmax(240px, .6fr); }
 .board-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
 .board-main .table-panel:has(.has-many-cards) { grid-column: 1/-1; }
 .board-side { gap: 6px; }
 .board-side .status-grid { gap: 6px; }
 .board-side .summary-card { padding: 6px 8px; }
 #gto-recommendation { padding: 6px 8px; }
 #gto-recommendation .gto-action-line { font-size: 17px; }
 #gto-recommendation .gto-action-line { line-height: 1.2; }
 #gto-recommendation .gto-situation-line { font-size: 12px; line-height: 1.2; }
 #gto-recommendation .gto-reason-line { font-size: 14px; line-height: 1.3; }
 #sidebar { padding: 6px; gap: 6px; }
 #sidebar button { min-height: 44px; font-size: 15px; padding: 6px 4px; line-height: 1.2; }
 .card-lane { min-height: 118px; }
 #sidebar { position: static; }
 #game-board:not(.inactive) { padding-bottom: 0; }
 #game-over { display: block; }
 #game-over.inactive { display: none; }
 .result-evidence { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
 .win-celebration.is-active::before { display: none; }
}