button, input, textarea { font: inherit; }
button { cursor: pointer; color: inherit; }
button:disabled { cursor: default; opacity: .5; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #526724; outline-offset: 4px; }
.members li.playable { padding: 0; }
.member-button { position: relative; width: 100%; flex: 1; border: 0; background: transparent; padding: 23px 24px; text-align: left; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.member-button::after { content: ''; position: absolute; bottom: 0; left: 0; height: 4px; width: 0; background: #78952b; }
.member-button.holding::after { width: 100%; transition: width .55s linear; }
.member-button:focus-visible { outline-offset: -5px; }
.game-label, .hold-hint { font-size: 13px; color: #687060; line-height: 1.5; }
.hold-hint { margin: 18px 0 0; }
body:has(dialog[open]) { overflow: hidden; }
dialog { color: #191b18; background: #f8f9f6; border: 1px solid #cbd0c3; border-radius: 16px; padding: 28px; width: min(720px, calc(100% - 32px)); max-height: calc(100svh - 32px); overflow: auto; }
dialog::backdrop { background: rgb(15 20 10 / .65); backdrop-filter: blur(4px); }
.game-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid #daddd4; }
.eyebrow { font-size: 13px; color: #687060; margin: 0 0 8px; }
.game-header h2 { font-size: clamp(24px, 5vw, 32px); text-transform: none; letter-spacing: -.04em; font-weight: 700; }
#game-content { padding: 24px 0; }
.game-description { margin: 0 0 24px; line-height: 1.6; font-size: 16px; color: #58604f; }
.quiet-button, .primary-button, .option { border: 1px solid #bfc6b5; background: transparent; border-radius: 7px; padding: 11px 16px; font-size: 14px; }
.quiet-button:hover, .option:hover { background: #edf1e5; }
.primary-button { background: #d8f36a; border-color: #bfd554; font-weight: 700; }
.game-footer { border-top: 1px solid #daddd4; padding-top: 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.game-footer span, .small { font-size: 13px; color: #687060; line-height: 1.5; }
.progress { height: 5px; background: #e0e5d8; border-radius: 5px; margin: 14px 0 24px; overflow: hidden; }
.progress div { height: 100%; background: #78952b; }
.question { font-size: 23px; letter-spacing: -.025em; line-height: 1.4; margin: 0 0 20px; }
.options { display: grid; gap: 10px; }
.option { text-align: left; font-size: 16px; line-height: 1.5; }
.option.selected { background: #d8f36a; border-color: #78952b; }
.nav-row { display: flex; justify-content: space-between; margin-top: 24px; gap: 12px; }
.result { background: #edf1e5; border-radius: 12px; padding: 24px; margin: 20px 0; }
.result h3 { font-size: 32px; letter-spacing: -.04em; margin: 0 0 12px; }
.result p { line-height: 1.6; margin: 0; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0; }
.stat { border: 1px solid #daddd4; border-radius: 8px; padding: 16px 12px; }
.stat strong { display: block; font-size: 26px; margin-bottom: 6px; }
.stat span { font-size: 13px; color: #687060; }
.reaction-pad { border: 0; width: 100%; min-height: 220px; border-radius: 12px; padding: 30px; background: #e4e8dd; font-size: 28px; font-weight: 700; touch-action: manipulation; }
.reaction-pad.wait { background: #322e2b; color: white; }
.reaction-pad.ready { background: #d8f36a; color: #191b18; }
.reaction-pad.early { background: #f3d8ce; }
.attempts { line-height: 1.8; padding-left: 25px; font-size: 16px; }
.word-prompt { line-height: 2; padding: 20px; border-radius: 10px; background: #edf1e5; font-family: 'Courier New', monospace; font-size: 18px; margin: 20px 0; max-height: 230px; overflow: auto; }
.word-prompt .correct { color: #46631d; }
.word-prompt .incorrect { color: #a02e1d; background: #f6dfd8; border-radius: 3px; }
.word-prompt .current { text-decoration: underline; text-underline-offset: 5px; }
textarea, .country-input { width: 100%; border: 1px solid #bfc6b5; border-radius: 8px; padding: 14px; background: white; color: #191b18; font-size: 16px; }
textarea { min-height: 110px; resize: vertical; }
.field-label { display: block; font-size: 14px; margin-bottom: 10px; }
.guess-form { display: flex; align-items: flex-end; gap: 12px; }
.guess-form .field { flex: 1; min-width: 0; }
.guess-form button { min-height: 48px; }
.feedback { min-height: 24px; font-size: 14px; line-height: 1.5; margin: 12px 0; }
.clues { padding: 18px 22px; background: #edf1e5; border-radius: 8px; line-height: 1.7; font-size: 14px; }
.clues p { margin: 0; }
.table-wrap { overflow: auto; margin-top: 18px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; text-align: left; }
th { font-weight: 400; color: #687060; font-size: 12px; }
th, td { padding: 12px 10px; border-bottom: 1px solid #daddd4; white-space: nowrap; }
th:first-child, td:first-child { padding-left: 0; }
.source-link { color: inherit; }
.mode-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.mode-row button[aria-pressed="true"] { background: #d8f36a; border-color: #78952b; }
.cps-pad { background: #d8f36a; user-select: none; touch-action: manipulation; }
.cps-pad:active { background: #bddc42; }
.jump-stage { position: relative; width: min(100%, 360px); margin: auto; border: 1px solid #bfc6b5; border-radius: 10px; overflow: hidden; }
.jump-stage canvas { width: 100%; height: auto; display: block; touch-action: none; }
.jump-overlay { position: absolute; inset: 0; background: rgb(248 249 246 / .88); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.jump-overlay[hidden] { display: none; }
.jump-overlay p { font-size: 25px; font-weight: 700; letter-spacing: -.04em; }
.jump-controls { width: min(100%, 360px); margin: 16px auto 0; display: flex; gap: 8px; }
.jump-controls button { flex: 1; user-select: none; min-height: 48px; }
.sudoku-grid { width: min(100%, 420px); margin: 20px auto; display: grid; grid-template-columns: repeat(9,minmax(0,1fr)); border: 2px solid #46513d; background: white; }
.sudoku-cell { min-width: 0; aspect-ratio: 1; border: 0; border-right: 1px solid #daddd4; border-bottom: 1px solid #daddd4; border-radius: 0; padding: 0; background: white; font-size: clamp(17px,4.5vw,25px); color: #526c23; }
.sudoku-cell.given { color: #191b18; font-weight: 700; }
.sudoku-cell.box-right { border-right: 2px solid #46513d; }
.sudoku-cell.box-bottom { border-bottom: 2px solid #46513d; }
.sudoku-cell.peer { background: #f0f3eb; }
.sudoku-cell.same-number { background: #e0ebc5; }
.sudoku-cell.chosen { background: #d8f36a; box-shadow: inset 0 0 0 2px #78952b; }
.sudoku-cell.conflict, .sudoku-cell.wrong { color: #a02e1d; background: #f6dfd8; }
.sudoku-cell:focus-visible { outline-offset: -4px; }
.sudoku-numbers { display: grid; grid-template-columns: repeat(9,minmax(0,1fr)); gap: 5px; width: min(100%,420px); margin: 16px auto; }
.sudoku-numbers button { padding: 12px 0; font-size: 18px; }
@media (max-width: 500px) { dialog { padding: 20px; } .member-button { padding: 20px 16px; } .stats { gap: 6px; } .stat { padding: 12px 8px; } .stat strong { font-size: 23px; } .guess-form { flex-wrap: wrap; } .guess-form .field { flex-basis: 100%; } .reaction-pad { min-height: 200px; } }
@media (prefers-reduced-motion: reduce) { .member-button.holding::after { transition: none; } }