:root {
  color-scheme: light;
  --ink: #10271f;
  --ink-soft: #294039;
  --muted: #66756f;
  --paper: #f5f0e4;
  --card: #fffdf7;
  --line: #d7cfbf;
  --line-strong: #aeb9b2;
  --green: #176b4d;
  --green-dark: #0c4934;
  --green-soft: #dcecdf;
  --green-faint: #eef6ef;
  --gold: #d39b38;
  --gold-soft: #f5e6bc;
  --danger: #a33f33;
  --danger-soft: #f7e1dc;
  --shadow: 0 18px 55px rgba(25, 49, 40, 0.13);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--paper); }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--ink); background: radial-gradient(circle at 5% -10%, rgba(211,155,56,.18), transparent 34rem), linear-gradient(180deg,#f8f4ea,var(--paper)); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; letter-spacing: -.035em; }
h1 { margin-bottom: .7rem; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1; }
h2 { margin-bottom: .65rem; font-size: clamp(1.55rem, 3vw, 2.35rem); }
.eyebrow { margin-bottom: .35rem; color: var(--green); font-size: .69rem; font-weight: 850; letter-spacing: .18em; }
.lead { max-width: 620px; color: var(--muted); font-size: clamp(.98rem, 2vw, 1.13rem); line-height: 1.55; }

.app-shell { min-height: 100vh; }
.topbar { display: flex; justify-content: space-between; align-items: center; min-height: 68px; max-width: 1180px; margin: auto; padding: calc(.6rem + env(safe-area-inset-top)) 1rem .6rem; }
.topbar-left { display: flex; align-items: center; gap: .55rem; }
.brand { display: flex; align-items: center; gap: .55rem; border: 0; background: transparent; color: var(--ink); font-family: Georgia, serif; font-size: 1.45rem; font-weight: 800; }
.mini-die { --die-dot: var(--paper); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background-color: var(--ink); background-image: radial-gradient(circle at 27% 27%,var(--die-dot) 0 2px,transparent 3px),radial-gradient(circle at 73% 27%,var(--die-dot) 0 2px,transparent 3px),radial-gradient(circle at 50% 50%,var(--die-dot) 0 2px,transparent 3px),radial-gradient(circle at 27% 73%,var(--die-dot) 0 2px,transparent 3px),radial-gradient(circle at 73% 73%,var(--die-dot) 0 2px,transparent 3px); color: transparent; font-size: 0; }
.icon-button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,253,247,.8); color: var(--ink); font-size: 1.2rem; font-weight: 800; }

.button { min-height: 46px; border: 1px solid var(--line); border-radius: 13px; padding: .72rem 1rem; background: var(--card); color: var(--ink); font-weight: 780; transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease; }
.button:not(:disabled):active { transform: translateY(1px) scale(.99); }
.button.primary { border-color: var(--green); background: var(--green); color: white; box-shadow: 0 9px 22px rgba(23,107,77,.22); }
.button.secondary { border-color: var(--green); color: var(--green-dark); }
.button.quiet { background: rgba(255,253,247,.66); }
.button.success { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); }
.button.danger { border-color: var(--danger); background: var(--danger); color: white; }
.button.danger-outline { margin-top: .75rem; border-color: #dcb8b0; background: var(--danger-soft); color: var(--danger); }
.button.large { min-height: 54px; font-size: 1rem; }
.button.full { width: 100%; }

.boot-screen, .fatal-card { display: grid; place-items: center; align-content: center; gap: 1rem; min-height: 100vh; padding: 2rem; text-align: center; }
.brand-die { position: relative; width: 76px; height: 76px; border-radius: 20px; background: var(--ink); box-shadow: 0 14px 35px rgba(16,39,31,.2); }
.brand-die i { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--paper); }
.brand-die i:nth-child(1) { top: 15px; left: 15px; }.brand-die i:nth-child(2) { top: 15px; right: 15px; }.brand-die i:nth-child(3) { top: 33px; left: 33px; }.brand-die i:nth-child(4) { bottom: 15px; left: 15px; }.brand-die i:nth-child(5) { right: 15px; bottom: 15px; }

.home-screen { display: grid; place-items: center; min-height: calc(100vh - 78px); padding: 1rem 1rem 5rem; }
.hero-card { width: min(100%, 650px); padding: clamp(1.7rem, 5vw, 3.5rem); border: 1px solid rgba(215,207,191,.88); border-radius: 30px; background: rgba(255,253,247,.92); box-shadow: var(--shadow); }
.hero-die { margin-bottom: 1.7rem; }
.home-actions { display: grid; gap: .7rem; margin-top: 2rem; }
.action-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.saved-note { margin: 1.2rem 0 0; color: var(--muted); font-size: .78rem; text-align: center; }
.language-picker { display: grid; grid-template-columns: auto minmax(150px,1fr); align-items: center; gap: .8rem; margin-top: .35rem; color: var(--muted); font-size: .78rem; font-weight: 750; }
.language-picker select { min-height: 44px; border: 1px solid var(--line); border-radius: 11px; padding: .55rem .7rem; background: var(--card); color: var(--ink); }

.centered-page { max-width: 1100px; margin: 0 auto; padding: clamp(1rem,4vw,3rem) 1rem 5rem; }
.panel { padding: clamp(1.4rem,4vw,2.5rem); border: 1px solid var(--line); border-radius: 24px; background: rgba(255,253,247,.94); box-shadow: var(--shadow); }
.panel.narrow { max-width: 650px; margin: auto; }
.count-picker { display: grid; grid-template-columns: repeat(6,1fr); gap: .65rem; margin: 2rem 0; }
.count-button { aspect-ratio: 1; min-height: 58px; border: 1px solid var(--line); border-radius: 14px; background: white; color: var(--ink); font-size: 1.1rem; font-weight: 850; }
.count-button.selected { border-color: var(--green); background: var(--green); color: white; box-shadow: 0 8px 18px rgba(23,107,77,.2); }
.players-setup-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 1rem; margin: 2rem 0; }
.player-setup-card { display: grid; gap: .8rem; min-width: 0; margin: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 16px; background: white; }
.single-player-card { margin: 1.2rem 0; }
.player-setup-card legend { padding: 0 .4rem; font-weight: 800; }
.player-setup-card legend span { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: .3rem; border-radius: 50%; background: var(--green-soft); color: var(--green-dark); }
.player-setup-card label:not(.check-label) { display: grid; gap: .35rem; color: var(--muted); font-size: .75rem; font-weight: 750; }
.player-setup-card input[type="text"], .player-setup-card input:not([type]), .player-setup-card select { width: 100%; min-height: 46px; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--ink); padding: .65rem .75rem; font-size: .95rem; }
.player-setup-card .is-disabled { opacity: .55; }
.player-setup-card input:disabled, .player-setup-card select:disabled { background: var(--neutral, #f2efe7); color: var(--muted); cursor: not-allowed; }
.check-label { display: flex; align-items: center; gap: .55rem; font-size: .86rem; font-weight: 700; }
.check-label input { width: 20px; height: 20px; accent-color: var(--green); }
.profile-note { margin: 0; color: var(--green); font-size: .78rem; }
.form-error { padding: .8rem 1rem; border-radius: 10px; background: var(--danger-soft); color: var(--danger); font-weight: 700; }
.setup-progress { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.4rem 0 .8rem; }
.setup-progress span { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid var(--line); border-radius: 50%; background: white; color: var(--muted); font-size: .75rem; font-weight: 850; transition: background 180ms ease, transform 180ms ease; }
.setup-progress span.done { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); }
.setup-progress span.current { border-color: var(--green); background: var(--green); color: white; transform: scale(1.1); }
.entered-players { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; }
.entered-players span { padding: .3rem .55rem; border-radius: 999px; background: var(--green-soft); color: var(--green-dark); font-size: .72rem; font-weight: 750; }
.setup-nav { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; align-items: stretch; margin-top: 1rem; }

.content-page { max-width: 1050px; margin: 0 auto; padding: clamp(1.2rem,4vw,3rem) 1rem 5rem; }
.rules-intro { max-width: 780px; margin: 2rem 0; }
.rules-intro p, .rule-card p { color: var(--muted); line-height: 1.55; }
.rules-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(245px,1fr)); gap: .8rem; }
.rule-card { padding: 1rem; border: 1px solid var(--line); border-radius: 15px; background: var(--card); }
.rule-card > div { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.rule-card h3 { margin: 0; font-family: Georgia,serif; }
.rule-card span { color: var(--green); font-size: .73rem; font-weight: 850; }
.rule-card p { margin: .45rem 0 0; font-size: .86rem; }

.game-shell { min-height: 100vh; background: #eee8dc; }
.game-toolbar { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: auto minmax(150px,1fr) auto; align-items: center; gap: 1rem; min-height: 72px; padding: max(.5rem,env(safe-area-inset-top)) 1rem .5rem; background: rgba(16,39,31,.97); color: white; box-shadow: 0 6px 20px rgba(16,39,31,.18); }
.game-toolbar .brand { color: white; justify-self: start; }.game-toolbar .mini-die { --die-dot: var(--ink); background-color: var(--paper); }
.turn-identity { display: grid; min-width: 190px; text-align: center; }.turn-identity small { color: #9dd8bd; font-size: .62rem; font-weight: 850; letter-spacing: .15em; }.turn-identity strong { font-family: Georgia,serif; font-size: 1.25rem; }.turn-identity span { color: rgba(255,255,255,.58); font-size: .66rem; }
.game-actions { display: flex; justify-content: flex-end; gap: .4rem; }
.toolbar-button { display: grid; place-items: center; grid-template-columns: auto auto; gap: .3rem; min-height: 42px; border: 1px solid rgba(255,255,255,.2); border-radius: 11px; background: rgba(255,255,255,.08); color: white; padding: .5rem .65rem; font-weight: 750; }
.toolbar-button:disabled { opacity: .3; }
.toolbar-button span { font-size: .72rem; }
.toolbar-symbol { font-size: 1.3rem; letter-spacing: -.02em; }
.game-main { padding: 1rem 1rem 3rem; }
.turn-mobile { display: none; }
.score-table-wrap { overflow: auto; max-height: calc(100vh - 120px); border: 1px solid var(--line-strong); border-radius: 18px; background: var(--card); box-shadow: var(--shadow); overscroll-behavior: contain; }
.score-table { min-width: max-content; width: 100%; border-collapse: separate; border-spacing: 0; }
.score-table th, .score-table td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.score-table tr > *:last-child { border-right: 0; }.score-table tbody tr:last-child > * { border-bottom: 0; }
.score-table thead th { position: sticky; top: 0; z-index: 6; background: #e7e1d4; }
.score-table thead tr:nth-child(2) th { top: 54px; }
.category-corner { left: 0; z-index: 10!important; width: 150px; min-width: 150px; padding: .8rem; text-align: left; }
.player-head { min-width: 150px; height: 54px; padding: .55rem .7rem; text-align: center; }.player-head span,.player-head small { display: block; }.player-head small { margin-top: .08rem; color: var(--muted); font-size: .62rem; }
.player-head.active-player-head { background: var(--green-dark); color: white; }.player-head.active-player-head small { color: #a9dfc5; }
.column-head { height: 34px; padding: .3rem; color: var(--muted); font-size: .7rem; }
.score-table tbody th { position: sticky; left: 0; z-index: 4; width: 150px; background: var(--card); }
.category-label { display: flex; justify-content: space-between; align-items: center; gap: .5rem; width: 100%; min-height: 50px; border: 0; background: transparent; color: var(--ink); padding: .55rem .75rem; text-align: left; font-weight: 780; }
.category-label small { color: var(--green); font-size: .65rem; white-space: nowrap; }
.player-cell { width: 75px; min-width: 75px; text-align: center; background: white; }
.player-cell.active-player { background: var(--green-faint); }.column-head.active-player { background: #cae3d2; color: var(--green-dark); }
.score-cell { display: grid; place-items: center; width: 100%; min-height: 50px; border: 0; background: transparent; color: var(--ink); font-size: 1.05rem; font-weight: 850; }
.score-cell:disabled { opacity: 1; }.score-cell .empty-mark { color: #d5d8d5; font-weight: 400; }.score-cell .playable-dot { color: var(--green); font-size: 1.25rem; }.is-playable .score-cell { box-shadow: inset 0 0 0 2px rgba(23,107,77,.5); background: white; }.is-playable .score-cell:hover { background: var(--green-soft); }
.is-sacrificed { background: repeating-linear-gradient(-45deg,transparent,transparent 9px,rgba(163,63,51,.06) 9px,rgba(163,63,51,.06) 11px)!important; }.sacrifice-mark { color: var(--danger); font-size: 1.75rem; font-weight: 350; }
.category-row.section-start > * { border-top: 4px solid var(--ink); }
.computed-row th { padding: .65rem .75rem; text-align: left; font-size: .78rem; }.computed-cell { height: 42px; color: var(--ink-soft); font-weight: 850; }.computed-cell.trend { color: var(--green); font-size: .8rem; }.bonus-row > * { background-color: #fbf5e3!important; }.column-total > * { background-color: var(--green-soft)!important; color: var(--green-dark); font-size: 1rem; }.general-row > * { background-color: var(--ink)!important; color: white; }.hidden-total { font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; opacity: .55; }
.computed-label { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; border: 0; padding: 0; background: transparent; color: inherit; text-align: start; font-weight: inherit; }
.computed-label span { display: grid; place-items: center; flex: 0 0 20px; width: 20px; height: 20px; border: 1px solid currentColor; border-radius: 50%; font-size: .65rem; opacity: .65; }
.game-hint { margin: .75rem 0 0; color: var(--muted); font-size: .75rem; text-align: center; }
.turn-changing .score-table-wrap { animation: table-handoff 750ms ease both; }
.turn-changing .turn-identity strong, .turn-changing .turn-mobile strong { animation: next-player 650ms ease both; }
.turn-notice { position: fixed; z-index: 80; inset: 50% auto auto 50%; display: grid; gap: .25rem; width: min(calc(100% - 2rem),560px); padding: 1.25rem 1.5rem; border: 1px solid rgba(255,255,255,.28); border-radius: 20px; background: rgba(16,39,31,.96); color: white; text-align: center; box-shadow: 0 24px 75px rgba(0,0,0,.3); transform: translate(-50%,-50%); animation: turn-notice 1450ms ease both; pointer-events: none; }
.turn-notice strong { font-family: Georgia,serif; font-size: clamp(1.2rem,4vw,1.65rem); }
.turn-notice span { color: #a9dfc5; font-size: .8rem; font-weight: 750; }
.turn-notice small { margin-top: .35rem; color: rgba(255,255,255,.7); }
@keyframes turn-notice { 0% { opacity:0; transform:translate(-50%,-42%) scale(.96); } 14%,76% { opacity:1; transform:translate(-50%,-50%) scale(1); } 100% { opacity:0; transform:translate(-50%,-58%) scale(.98); } }
@keyframes table-handoff { 0%,100% { filter:none; transform:none; } 35% { filter:saturate(.75) brightness(.94); transform:scale(.995); } }
@keyframes next-player { from { opacity:.25; transform:translateY(5px); } to { opacity:1; transform:none; } }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; background: rgba(7,25,18,.6); backdrop-filter: blur(4px); }
.modal-card { position: relative; width: min(100%,510px); max-height: min(90vh,760px); overflow: auto; padding: clamp(1.3rem,4vw,2rem); border-radius: 23px; background: var(--card); box-shadow: 0 28px 90px rgba(0,0,0,.28); }
.modal-close { position: absolute; top: .8rem; right: .8rem; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #f0ece3; color: var(--muted); font-size: 1.6rem; }
.dialog-help { padding-right: 2rem; color: var(--muted); line-height: 1.5; }.rule-detail { font-size: 1.05rem; }
.score-choice-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: .55rem; margin: 1.3rem 0; }.score-choice { min-height: 62px; border: 1px solid var(--line); border-radius: 13px; background: white; color: var(--green-dark); font-size: 1.16rem; font-weight: 900; }.score-choice:hover { border-color: var(--green); background: var(--green-soft); }
#variable-score-form { display: grid; grid-template-columns: 1fr auto; gap: .7rem; align-items: end; margin: 1.2rem 0; }.numeric-label { display: grid; gap: .35rem; color: var(--muted); font-size: .75rem; font-weight: 800; }.numeric-label input { width: 100%; min-height: 52px; border: 1px solid var(--line); border-radius: 11px; padding: .6rem .75rem; font-size: 1.2rem; font-weight: 850; }
.constraint-warning, .no-suggestion { padding: 1rem; border-radius: 12px; background: var(--gold-soft); color: #654817; line-height: 1.45; }.fixed-score-callout { display: inline-flex; padding: .5rem .8rem; border-radius: 999px; background: var(--gold-soft); color: #654817; font-weight: 850; }
.dialog-actions { display: grid; gap: .65rem; margin-top: 1.2rem; }
.dice-row { display: grid; grid-template-columns: repeat(5,1fr); gap: .5rem; margin: 1.2rem 0; }.die-button { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 14px; background: white; color: var(--ink); font-size: clamp(2rem,8vw,3rem); line-height: 1; }.die-button:active { background: var(--green-soft); }
.roll-modal-card { height: min(720px,90vh); overflow: hidden; }
.roll-layout { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.roll-fixed { flex: 0 0 auto; }
.suggestions-area { min-height: 0; flex: 1 1 auto; overflow: auto; padding-bottom: .25rem; overscroll-behavior: contain; }
.suggestions { display: grid; gap: .45rem; }
.suggestion { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: 11px; background: white; color: var(--ink); text-align: start; }
.suggestion:hover, .suggestion:focus-visible { border-color: var(--green); background: var(--green-soft); }
.suggestion span { display: grid; }.suggestions small { color: var(--muted); font-size: .68rem; }.suggestions b { color: var(--green); font-size: 1.1rem; }

.stat-counts { display: grid; grid-template-columns: repeat(3,1fr); gap: .8rem; margin: 2rem 0; }.stat-counts article { display: grid; padding: 1rem; border: 1px solid var(--line); border-radius: 15px; background: var(--card); }.stat-counts strong { color: var(--green); font-family: Georgia,serif; font-size: 2rem; }.stat-counts span { color: var(--muted); font-size: .78rem; }
.stats-page h2 { margin-top: 2.3rem; }.records-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: .8rem; }.record-card { padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }.record-card span { color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; }.record-card strong { display: block; margin: .2rem 0; color: var(--green-dark); font-family: Georgia,serif; font-size: 1.7rem; }.record-card p { margin: 0; color: var(--muted); font-size: .73rem; }
.ranking-list { display: grid; gap: .45rem; }.ranking-list article { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: .7rem; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }.ranking-list .rank { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--green-soft); color: var(--green-dark); font-weight: 850; }.ranking-list div { display: grid; }.ranking-list small { color: var(--muted); }.ranking-list b { font-size: 1.1rem; }.empty-state { padding: 1rem; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); }

.results-page { max-width: 820px; margin: 0 auto; padding: clamp(2rem,6vw,5rem) 1rem 5rem; text-align: center; }.results-page .lead { margin-inline: auto; }.final-ranking { display: grid; gap: .65rem; margin: 2rem 0; text-align: left; }.final-result { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: .8rem; padding: 1rem; border: 1px solid var(--line); border-radius: 15px; background: var(--card); opacity: 0; animation: reveal-result 500ms ease forwards; animation-delay: var(--delay); }.final-result.rank-1 { border-color: var(--gold); background: linear-gradient(110deg,#fffaf0,#f5e6bc); box-shadow: 0 12px 30px rgba(168,118,25,.16); }.podium-rank { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: white; font-weight: 900; }.rank-1 .podium-rank { background: var(--gold); color: #4b350e; }.result-player { display: grid; }.result-player small { color: var(--muted); }.result-player em { width: fit-content; margin-top: .3rem; padding: .2rem .45rem; border-radius: 999px; background: var(--gold-soft); color: #6c4c15; font-size: .66rem; font-style: normal; font-weight: 850; }.final-result > b { font-family: Georgia,serif; font-size: 1.5rem; }.results-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.results-actions .full-span { grid-column: 1 / -1; }
@keyframes reveal-result { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }

@media (max-width: 1100px) {
  .game-toolbar { grid-template-columns: auto 1fr; }.turn-identity { display: none; }.game-actions { justify-content: flex-end; }.toolbar-button { grid-template-columns: 1fr; }.toolbar-button span { display: none; }
}

@media (max-width: 650px) {
  h1 { font-size: 2.45rem; }.topbar { padding-inline: .7rem; }.centered-page,.content-page { padding-inline: .7rem; }.panel { padding: 1.1rem; border-radius: 18px; }.count-picker { grid-template-columns: repeat(4,1fr); }.players-setup-grid { grid-template-columns: 1fr; }
  .game-toolbar { min-height: 58px; padding-inline: .55rem; }.game-toolbar .brand span:last-child { display: none; }.game-actions { gap: .25rem; }.toolbar-button { min-width: 38px; padding: .4rem; }.game-main { padding: .55rem .4rem 2rem; }.turn-mobile { display: grid; padding: .7rem 1rem; margin-bottom: .5rem; border-radius: 13px; background: var(--ink); color: white; }.turn-mobile small { color:#9dd8bd; font-size:.6rem; font-weight:850; letter-spacing:.15em; }.turn-mobile strong { font-family:Georgia,serif; font-size:1.2rem; }
  .score-table-wrap { max-height: calc(100vh - 145px); border-radius: 12px; }.category-corner,.score-table tbody th { width: 125px; min-width: 125px; }.player-head:not(.active-player-head), .player-cell:not(.active-player) { display: none; }.player-head.active-player-head { min-width: 160px; }.player-cell.active-player { width: 80px; min-width: 80px; }.category-label { min-height: 48px; padding-inline: .55rem; }.game-hint { display: none; }
  .modal-backdrop { align-items: end; padding: .5rem; }.modal-card { width:100%; max-height:88vh; border-radius:22px 22px 14px 14px; padding:1.25rem; }.roll-modal-card { height:88vh; }.score-choice-grid { gap:.35rem; }.score-choice { min-height:55px; }.dice-row { gap:.3rem; }.die-button { border-radius:10px; }.setup-nav { grid-template-columns:1fr; }.setup-nav > span:empty { display:none; }
  .stat-counts { gap:.4rem; }.stat-counts article { padding:.7rem; }.records-grid { grid-template-columns:1fr 1fr; }.results-actions { grid-template-columns:1fr; }.action-pair { grid-template-columns:1fr; }
}

html[dir="rtl"] .modal-close { right: auto; left: .8rem; }
html[dir="rtl"] .dialog-help { padding-right: 0; padding-left: 2rem; }
html[dir="rtl"] .score-table tbody th, html[dir="rtl"] .category-corner { left: auto; right: 0; }
html[dir="rtl"] .score-table th, html[dir="rtl"] .score-table td { border-right: 0; border-left: 1px solid var(--line); }
html[dir="rtl"] .score-table tr > *:last-child { border-left: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto!important; animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}

/* V3: formats and interrupted results. */
.format-picker { display: grid; gap: .5rem; margin: 1rem 0 .5rem; color: var(--muted); font-size: .85rem; font-weight: 750; text-align: start; }
.format-picker select, .observer-select select { min-height: 44px; width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: .6rem; background: var(--card); color: var(--ink); font: inherit; }
.format-help { font-size: .8rem; color: var(--muted); margin-bottom: 1.2rem; }
.format-badge { color: var(--muted); font-size: .78rem; margin: .2rem 0 .6rem; }
.bonus-policy { font-size: .85rem; padding: .6rem 1rem; background: var(--green-soft); border-radius: 12px; }
.bonus-state { margin-top: .3rem; }.bonus-state.earned,.bonus-state.ahead { color: var(--green); }.bonus-state.behind,.bonus-state.lost { color: #9b5426; }

/* Direct pairing: actual QR stays black/white with a four-module quiet zone. */
.pair-modal { text-align: center; }.pair-modal h2 { padding-inline: 1.2rem; font-size: clamp(1.35rem,5vw,1.8rem); }.pair-modal .dialog-help { padding: 0; }
.pair-version { white-space: nowrap; color: var(--muted); font-size: .55em; }
.qr-frame { width: min(100%,360px); margin: 1rem auto; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: white; }
.qr-frame canvas { display: block; width: 100% !important; height: auto !important; aspect-ratio: 1; image-rendering: pixelated; }
.modal-backdrop:has(.pair-modal.qr-expanded) { padding: 0; place-items: center; }
.pair-modal.qr-expanded { width: 100vw; max-width: none; max-height: 100dvh; padding: 3.2rem .25rem .5rem; border-radius: 0; }
.qr-expanded .qr-frame { width: min(100%,calc(100dvh - 15rem)); margin: .5rem auto; }
.qr-expanded h2,.qr-expanded .dialog-help,.qr-expanded .pair-network,.qr-expanded .pair-diagnostics,.qr-expanded .pair-help { display: none; }
.pair-help { margin: .8rem 0; padding: .2rem .8rem; text-align: start; font-size: .82rem; line-height: 1.5; background: var(--green-soft); border-radius: 10px; }
.pair-help summary { cursor: pointer; padding-block: .6rem; font-weight: 700; }
.pair-help h3 { margin: .2rem 0 .5rem; font-size: .9rem; }
.pair-help ol { padding-inline-start: 1.4rem; }
.pair-help li { margin-block: .4rem; }
.pair-help-note { color: var(--muted); font-size: .76rem; }
.pair-diagnostics { margin: .8rem 0; text-align: start; font-size: .78rem; color: var(--muted); }
.pair-diagnostics summary { cursor: pointer; padding: .6rem 0; }
.pair-diagnostics pre { max-height: 15rem; overflow: auto; padding: .7rem; background: var(--green-soft); border-radius: 8px; font-size: .68rem; direction: ltr; text-align: left; }
.test-footer { text-align: center; color: var(--muted); font-size: .8rem; max-width: 34rem; width: 100%; margin-top: 1rem; }
.test-footer > p { margin: 0; }
.last-diagnostic { margin: .9rem 0; font-size: .8rem; color: var(--muted); text-align: start; }
.last-diagnostic summary { cursor: pointer; padding: .6rem 0; }
.debug-send-status { overflow-wrap: anywhere; }
.diagnostic-fallback { border-top: 1px solid var(--line); margin-top: .8rem; padding-top: .4rem; }
.diagnostic-fallback-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.diagnostic-fallback-actions a { text-decoration: none; }
.internal-test { margin: .8rem 0; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.internal-test p { margin: .4rem 0; }
.pair-network { font-size: .76rem; color: var(--muted); line-height: 1.4; }
.pair-status { padding: 1rem; color: var(--green); }.pair-success { font-size: 1.3rem; padding: 1.2rem 0; color: var(--green); font-weight: 800; }
.scanner-frame { position: relative; aspect-ratio: 1; max-height: 45vh; margin: auto; border-radius: 15px; overflow: hidden; background: #15261f; }
.scanner-frame video { width: 100%; height: 100%; object-fit: cover; }.scanner-guide { position: absolute; inset: 12%; border: 3px solid white; border-radius: 12px; box-shadow: 0 0 0 70px #0003; pointer-events: none; }
.scan-message { min-height: 1.2em; font-size: .8rem; color: #9b5426; }
.observer-status { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding: .55rem .8rem; margin-bottom: .6rem; border-radius: 10px; background: var(--green-soft); font-size: .8rem; }
.observer-status.is-offline { background: var(--gold-soft); color: #654817; }
.observer-select { display: none; }.toolbar-button { position: relative; }.toolbar-button small { position: absolute; inset: -.2rem -.2rem auto auto; border-radius: 1rem; background: var(--green); color: white; padding: .15rem .35rem; }
@media (max-width:650px) {
  .observer-select { display: grid; gap: .3rem; margin: .5rem 0; font-size: .8rem; color: var(--muted); }
  .observer-shell .score-table-wrap { max-height: calc(100dvh - 275px); }
  .game-actions { flex-wrap: wrap; }.game-toolbar { gap: .4rem; }
}

@media (min-width:651px) and (max-width:1100px) {
  .turn-mobile { display: flex; align-items: baseline; gap: .6rem; margin: .2rem 0 .65rem; color: var(--green-dark); }
  .turn-mobile small { font-size: .65rem; font-weight: 850; letter-spacing: .12em; }
  .turn-mobile strong { font-family: Georgia,serif; font-size: 1.3rem; }
  .game-actions [data-action="add-observer"] { grid-template-columns: auto auto; }
  .game-actions [data-action="add-observer"] span { display: inline; }
}