/* Shared visual system. Game-specific viewport constraints live under games/. */
:root {
    color-scheme: dark;
    --bg: #202821;
    --surface: #2b352d;
    --surface-raised: #38433a;
    --line: #506052;
    --text: #f2f5ef;
    --muted: #bdc9bf;
    --accent: #d5f577;
    --accent-ink: #1c2810;
    --positive: #92d9ad;
    --negative: #ffa8a2;
    --radius: 16px;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
}
body h1, body h2, body h3 { color: var(--text); text-shadow: none; letter-spacing: -0.035em; }
body h1 { text-align: left; font-weight: 750; line-height: 1.1; }
body h2 { font-weight: 650; }
body button, body input { font: inherit; }
body :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
body h1[tabindex="-1"]:focus { outline: none; }
body .screen {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: none;
    padding: clamp(20px, 4vw, 36px);
}
body:not(:has(#gameScreen.active)) { padding: clamp(16px, 4vw, 40px); }
body .btn, body .close-modal {
    background: var(--accent);
    color: var(--accent-ink);
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 650;
    padding: 15px 18px;
    box-shadow: none;
    transition: background-color 150ms ease, border-color 150ms ease;
}
body .btn-secondary, body .close-modal {
    background: var(--surface-raised);
    border-color: var(--line);
    color: var(--text);
}
body .btn-success { background: var(--accent); color: var(--accent-ink); }
body .btn-danger { background: #45272a; color: var(--negative); }
body .btn:hover, body .close-modal:hover { box-shadow: none; filter: brightness(1.07); }
body .btn:active { transform: none; filter: brightness(0.94); }
body button:disabled { opacity: 0.4; cursor: not-allowed; filter: none; }
body input {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text);
    font-size: 1rem;
    padding: 15px;
}
body input::placeholder { color: var(--muted); opacity: 1; }
body input:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
body .app-version { color: var(--muted); }
.site-footer { max-width: 1000px; margin: 20px auto 0; padding: 0 max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); text-align: center; }
.site-footer .legal-links { justify-content: center; margin: 0 auto; }
.site-footer .app-version { margin-top: 8px; }
body:has(#gameScreen.active) .site-footer { display: none; }
/* Short pages keep the footer at the bottom; long pages remain scrollable. */
body:has(> .site-footer):not(:has(#gameScreen.active)),
body.catalog:has(.site-footer) { display: flex; flex-direction: column; min-height: 100dvh; }
body:has(> .site-footer):not(:has(#gameScreen.active)) > .container { flex: 1 0 auto; }
body.catalog:has(.site-footer) > .container { display: flex; flex-direction: column; flex: 1 0 auto; }
body.catalog .site-footer { margin-top: auto; padding-top: 20px; }
.update-banner { position: fixed; z-index: 900; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); box-sizing: border-box; width: min(720px, calc(100% - 24px)); color: var(--text); }
.update-panel { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 1px solid var(--accent); border-radius: 12px; background: var(--surface); box-shadow: 0 8px 28px rgb(0 0 0 / 25%); }
.update-banner[hidden] { display: none; }
.update-toggle { display: none; }
[data-update-slot] { display: flex; align-items: center; }
[data-update-slot]:empty, [data-update-slot]:has(> .update-banner[hidden]) { display: none; }
.update-banner.update-inline { position: relative; left: auto; bottom: auto; transform: none; width: auto; }
.update-inline .update-toggle { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--accent); border-radius: 8px; background: var(--surface-raised); color: var(--accent); font-size: 1.3rem; cursor: pointer; }
.update-inline .update-panel { position: fixed; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(420px, calc(100vw - 24px)); box-sizing: border-box; }
.update-inline:not(.update-expanded) .update-panel { display: none; }
.update-message { margin: 0; font-size: 0.85rem; line-height: 1.4; }
.update-actions { display: flex; gap: 8px; flex-shrink: 0; }
.update-actions button { min-height: 44px; padding: 8px 12px; border: 0; border-radius: 8px; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.update-accept { background: var(--accent); color: var(--accent-ink); }
.update-later { background: var(--surface-raised); color: var(--muted); }
@media (max-width: 540px) {
    .update-panel { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; }
    .update-actions button { flex: 1; }
}

/* Identity and game selection. */
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em; text-decoration: none; text-transform: uppercase; }
.brand img { width: 44px; height: 44px; flex-shrink: 0; object-fit: contain; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.site-header .brand { min-width: 0; gap: 8px; font-size: clamp(0.64rem, 2.4vw, 0.85rem); letter-spacing: 0.08em; }
.site-header .lobby-brand { margin: 0; }
.lobby-header { margin-bottom: 24px; }
.language-switch { position: relative; flex-shrink: 0; }
.language-switch button { min-height: 44px; border-radius: 8px; color: var(--muted); background: transparent; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.language-switch .language-trigger { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 64px; padding: 6px 10px; border: 1px solid var(--line); background: var(--surface); }
.language-trigger [data-language-flag] { font-size: 1.35rem; line-height: 1; }
.language-options { position: absolute; z-index: 10; top: calc(100% + 8px); right: 0; min-width: 180px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 28px rgb(0 0 0 / 25%); }
.language-options[hidden] { display: none; }
.language-options button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; text-align: left; }
.language-options button[aria-pressed="true"] { background: var(--surface-raised); color: var(--accent); }
.language-switch button:hover { color: var(--text); }
.eyebrow { color: var(--accent); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
body.catalog { display: block; padding: clamp(24px, 6vw, 72px); }
body.catalog .container { max-width: 1000px; }
.catalog .hero { padding: clamp(24px, 4vw, 40px) 0 24px; max-width: 720px; }
body.catalog h1 { margin: 10px 0 12px; font-size: clamp(1.8rem, 4.5vw, 3rem); line-height: 1.1; }
.hero-description { color: var(--muted); font-size: 0.9rem; line-height: 1.5; max-width: 520px; }
body .games-grid { padding: 0; gap: 12px; grid-template-columns: minmax(0, 1fr); }
body .game-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; position: relative; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 16px; box-shadow: none; padding: 16px; }
body .game-card:hover { transform: none; border-color: var(--accent); box-shadow: none; }
body .game-card:active { transform: none; }
.game-card-copy { min-width: 0; }
.game-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
body .game-card .game-icon { width: 112px; height: 112px; border-radius: 12px; }
body .game-icon { width: 96px; height: 96px; margin: 0; flex-shrink: 0; padding: 6px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
body .game-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
body .game-title { font-size: 1.5rem; text-align: left; color: var(--accent); margin: 0; }
body .game-description { text-align: left; color: var(--muted); font-size: 0.85rem; line-height: 1.4; }
body .game-badge { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
@media (max-width: 400px) {
    body .game-card { gap: 10px; padding: 12px; }
    body .game-card .game-icon { width: 96px; height: 96px; }
    body .game-title { font-size: 1.25rem; }
}
body .footer { text-align: left; color: var(--muted); opacity: 1; margin-top: 32px; font-size: 0.8rem; }

/* Capital lobby and setup. */
.lobby-brand { margin-bottom: 24px; }
body #homeScreen h1 { margin: 12px 0; font-size: clamp(3rem, 10vw, 5rem); }
body .home-subtitle { text-align: left; color: var(--muted); font-size: 0.85rem; font-weight: 400; margin: 0 0 28px; }
.game-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.game-facts span { color: var(--text); padding: 8px 12px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 8px; font-size: 0.8rem; }
.lobby-secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body #homeScreen > .btn-secondary:last-child { background: transparent; border-color: transparent; color: var(--muted); }
body #playerAddControls { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
body #playerAddControls input { min-width: 0; margin: 0; }
body #playerAddControls .btn { background: var(--surface-raised); color: var(--text); border-color: var(--line); margin: 0; padding: 15px 12px; font-size: 0.85rem; }
body .player-item { background: var(--surface-raised); border: 1px solid var(--line); padding: 12px; gap: 8px; }
body .player-info { min-width: 0; }
body .player-order { background: var(--bg); color: var(--muted); border: 1px solid var(--line); width: 30px; height: 30px; font-size: 0.8rem; margin-right: 8px; flex-shrink: 0; }
body .player-name { overflow-wrap: anywhere; }
body .player-info .player-name { font-size: 0.95rem; font-weight: 550; margin: 0; }
body .order-btn, body .remove-btn { background: var(--surface); color: var(--muted); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
body .remove-btn { color: var(--negative); }
body .mode-selector label { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.03em; }
body .mode-buttons { padding: 4px; gap: 4px; border: 1px solid var(--line); background: var(--bg); border-radius: 12px; }
body .mode-btn { background: transparent; color: var(--muted); border: 1px solid transparent; border-radius: 8px; font-size: 0.9rem; min-height: 44px; }
body .mode-btn.active { background: var(--surface-raised); color: var(--accent); border-color: var(--line); }

/* Shared score sheets: retain adaptive font sizes and row heights. */
body .scores-table { background: var(--surface); border-radius: 12px; box-shadow: none; }
body .scores-table th { background: var(--surface-raised); color: var(--muted); font-weight: 550; }
body .scores-table td { color: var(--text); border-color: var(--line); }
body .scores-table td:not(.contract-col) { font-variant-numeric: tabular-nums; }
body .scores-table .contract-col { color: var(--muted); background: var(--surface); }
body .scores-table .contract-col,
body #gameScreen .scores-table .contract-col,
body #fullTableContent .scores-table .contract-col {
    padding-left: 0.85em;
    padding-right: 0.5em;
}
body .scores-table th.contract-col { background: var(--surface-raised); }
body .scores-table .current-turn { background: var(--accent) !important; color: var(--accent-ink); font-weight: 750; }
body .scores-table .success { background: #334e3c !important; color: #c6f0d5; }
body .scores-table .failed { background: #503437 !important; color: #ffcdc8; }
body .scores-table .future-contract { color: var(--muted); background: var(--surface); }
body .scores-table .total-row { background: #283422 !important; color: var(--accent); }
body .scores-table .total-row td { color: var(--accent); }
body .scores-table .position-row { background: var(--surface-raised) !important; }
body .contract-row.previous { opacity: 1; background: var(--surface); }
body .contract-row.next { opacity: 0.65; box-shadow: none; }
body .scores-table .editable-score:hover { background: #354334 !important; box-shadow: inset 0 0 0 1px var(--accent); }
body .scores-table .editing-score-cell { background: #354334 !important; color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
body .points-earned { color: var(--positive); }
body .show-all-btn { background: var(--surface-raised); color: var(--muted); border: 1px solid var(--line); border-radius: 8px; }
body .show-all-btn:hover { background: #303a32; color: var(--text); box-shadow: none; }
body #gameScreen.active { border-color: transparent; background: var(--bg); }
body #gameScreen .scores-header h2 { letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-size: 0.75rem; }
body #gameScreen .custom-keyboard { background: transparent; }
body #gameScreen .key-btn { background: var(--surface-raised); border: 1px solid var(--line); color: var(--text); font-weight: 600; box-shadow: none; }
body #gameScreen .key-btn:active { background: #3a4835; transform: none; }
body #gameScreen .key-backspace { background: var(--surface); color: var(--muted); }
body #gameScreen .key-validate { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
body #gameScreen .dart-slot { background: var(--surface); border: 1px solid var(--line); color: var(--muted); border-radius: 8px; font-variant-numeric: tabular-nums; }
body #gameScreen .dart-slot.active { border-color: var(--accent); color: var(--accent); }
body #gameScreen .key-btn.active-mult { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
/* Board colors convey contract rules, so keep their physical meaning. */
body #gameScreen .key-btn.key-color-black { background: #080a09; color: #fff; border-color: #637169; }
body #gameScreen .key-btn.key-color-white { background: #f5f5ed; color: #151a17; border-color: #f5f5ed; }
body #gameScreen .key-btn.key-color-red { background: #ad242d; color: #fff; border-color: #ed6d71; }
body #gameScreen .key-btn.key-color-green { background: #11653c; color: #fff; border-color: #56b88a; }
body #gameScreen .key-btn.precision-key-disabled, body #gameScreen .key-btn:disabled { background: #1a1e1b; color: #68756c; border-color: #303931; opacity: 1; }
body #gameScreen .key-btn.precision-key-unavailable { background: #1a1e1b !important; color: #68756c !important; border-color: #303931 !important; }

/* Dialogs, instructions and final ranking. */
body .modal, body .custom-modal { background: rgb(0 0 0 / 72%); backdrop-filter: blur(8px); }
body .full-table-modal { background: var(--bg); }
body .modal-content, body .custom-modal-content, body .full-table-content { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 24px 80px rgb(0 0 0 / 30%); }
body .modal-title, body .custom-modal-content h2 { color: var(--text); letter-spacing: -0.035em; }
body .modal-desc, body .custom-modal-content p { color: var(--muted); line-height: 1.65; }
body .close-modal-btn { background: var(--surface-raised); color: var(--muted); border: 1px solid var(--line); border-radius: 10px; }
body .close-modal-btn:hover { transform: none; background: #354039; }
body .rules-overview { background: var(--bg); border: 1px solid var(--line); color: var(--muted); }
body #rulesScreen { padding: 0; }
#rulesScreen .rules-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: max(12px, env(safe-area-inset-top)) 16px 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    border-radius: 23px 23px 0 0;
}
body #rulesScreen .rules-header h1 { margin: 0; font-size: clamp(1rem, 3vw, 1.25rem); line-height: 1.3; }
body #rulesScreen .rules-back { width: auto; min-height: 44px; margin: 0; padding: 10px 12px; white-space: nowrap; }
#rulesScreen #rulesList { margin: 0; padding: clamp(16px, 4vw, 28px); }
body .rules-mode { background: var(--surface); border-color: var(--line); }
body .rules-mode h3 { color: var(--accent); }
body .contract-item { background: var(--surface-raised); border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: 12px; }
body .contract-description { color: var(--muted); }
body .leaderboard-item { background: var(--surface-raised); color: var(--text); border: 1px solid var(--line); }
body .leaderboard-item:first-child { background: #283422; border-color: #71874b; transform: none; }
body .leaderboard-item.winner { background: #283422; border-color: #71874b; }
body .final-ranking { margin: 24px 0 32px; }
body .final-scores-title { margin-top: 24px; }
body .leaderboard-item:first-child .rank { color: var(--accent); }
body .player-capital { background: transparent; color: var(--accent); padding: 4px 0; min-width: 0; white-space: nowrap; }
body .leaderboard-item .player-name { font-weight: 550; }
body .technical-export { color: var(--muted); }
.legal-links { display: flex; flex-wrap: wrap; gap: 4px 20px; max-width: 1000px; margin: 20px auto; }
.legal-links a, .privacy-hint a { color: var(--muted); text-underline-offset: 3px; }
.legal-links a { padding: 8px 0; font-size: 0.8rem; }
.legal-links a:hover, .privacy-hint a:hover { color: var(--accent); }
.privacy-hint { margin: 16px 0 0; color: var(--muted); font-size: 0.8rem; line-height: 1.5; }
body:has(#gameScreen.active) .legal-links { display: none; }
body.legal-page:not(:has(#gameScreen.active)) { max-width: 920px; margin: 0 auto; padding: 0 20px 40px; }
.legal-page * { box-sizing: border-box; }
.legal-header { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: max(12px, env(safe-area-inset-top)) 0 12px; background: var(--bg); border-bottom: 1px solid var(--line); }
.legal-header .btn { margin: 0; text-decoration: none; width: auto; white-space: nowrap; }
.legal-header > span { flex: 1; min-width: 0; text-align: center; overflow-wrap: anywhere; font-size: 0.85rem; color: var(--muted); }
.legal-document { line-height: 1.7; overflow-wrap: anywhere; }
.legal-document h1 { font-size: clamp(2rem, 7vw, 3rem); margin: 32px 0 12px; }
.legal-document h2 { font-size: 1.65rem; line-height: 1.3; }
.legal-document h3 { font-size: 1.1rem; margin-top: 24px; }
.legal-document p, .legal-document li, .legal-document address { color: var(--muted); }
.legal-document address { font-style: normal; }
.legal-document strong { color: var(--text); }
.legal-document a { color: var(--accent); text-underline-offset: 3px; }
.legal-document section { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); scroll-margin-top: 100px; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 24px 0; }
.legal-nav a { padding: 6px 0; }
.legal-updated { font-size: 0.85rem; }
.legal-document ul { padding-left: 22px; }
.legal-document li + li { margin-top: 8px; }
.legal-document code { color: var(--text); }
body .legal-document #clearGameData { color: var(--negative); }
body #endScreen.active { min-height: 0; padding: clamp(16px, 4vw, 32px); }
@media (max-width: 400px) {
    body:not(:has(#gameScreen.active)) { padding: 12px; }
    .lobby-brand { margin-bottom: 28px; }
    body .player-item { padding: 8px; gap: 4px; }
    body .player-order { width: 24px; height: 24px; margin-right: 4px; }
    body .order-btn, body .remove-btn { padding: 4px 6px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}