/* Focused refinement: ocean/land palette, native controls and existing flow. */
:root{color-scheme:light;--ink:#203b46;--secondary:#4c626c;--line:#ccdcd9;--land:#246d46;font-family:"Yu Gothic UI","Hiragino Sans",Meiryo,sans-serif}
body{line-height:1.65}
header{padding:18px 30px}
.brand{letter-spacing:-.025em}
.header-actions .quiet{background:transparent;border-color:#ffffff80;color:#fff;font-size:12px}
.header-actions .quiet:hover{background:#ffffff18;border-color:#fff}
.header-actions .language-label{font-size:12px}
main{padding-top:26px}
.panel{padding:30px 40px;border-radius:8px}
.home h1{font-size:30px;letter-spacing:-.035em;margin-bottom:10px;overflow-wrap:anywhere}
.sample-flags{gap:14px;min-height:34px;margin-bottom:18px}
.sample-flags img{max-height:34px;max-width:56px;outline:0!important}
.home>p:first-of-type{margin-bottom:24px;font-size:14px;color:var(--secondary)}
.settings{display:block;padding:0;border:0;margin:0}
.settings-group{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 22px;padding:16px 0 0;border:0;border-top:1px solid var(--line);min-width:0}
.settings-group legend{padding:0 12px 0 0;color:var(--ink);font-size:14px;font-weight:700}
.settings .settings-group label,.settings:has(#guidedTargetField:not([hidden])) #guidedTargetField{grid-column:auto!important;min-width:0;margin:0;font-size:13px;color:var(--ink)}
.settings select,.settings input{height:48px;min-height:48px;margin:7px 0 7px;border-color:#91aaa9;font-size:16px;background:#fff}
.settings small{display:block;font-size:12px;line-height:1.65;color:var(--secondary);font-weight:400;overflow-wrap:anywhere}
.untimed-setting{margin:7px 0;font-size:14px;padding:11px 10px;min-height:48px}
.home .primary{margin-top:8px;min-height:52px;font-size:17px;font-weight:700}
.home .share-panel{margin:10px 0 18px}
.home .share-button{background:transparent;border-color:#a4bfb0;color:#245b3c;font-size:13px;min-height:46px}
.home .share-button:hover{background:#e4f0e7}
.home .sync-note,.home .scope,.home .hint{font-size:12px;line-height:1.75;color:var(--secondary);margin:10px 0}
.home .sync-note{padding-top:16px;border-top:1px solid var(--line)}
#settingsError:empty,.share-status:empty{display:none}
.rule-strip{padding:12px 0}.rule-strip p,footer{font-size:12px}
.session-info,.input-help,.question p{font-size:12px;color:var(--secondary)}
.game-top{align-items:center}.game-top b{font-variant-numeric:tabular-nums}
.input-wrap{border-width:2px}.input-wrap:focus-within{outline:3px solid #246d46;outline-offset:3px}
.input-help{line-height:1.85}.feedback-row{min-height:28px;align-items:start;font-size:13px}
.game-actions .quiet{font-size:13px;min-height:46px;padding:10px 14px}
#quit{background:transparent;border-color:#9ab3aa;color:#315847}
.history-row{font-size:14px;gap:16px}.history-row small{font-size:12px}
.history-country>span:last-child{line-height:1.6}.facts small{font-size:13px}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #164e70;outline-offset:3px}
header button:focus-visible,header a:focus-visible,header select:focus-visible{outline-color:#fff;outline-offset:4px}
dialog p{font-size:14px;line-height:1.9}dialog .close{min-width:88px}
@media(max-width:700px){
 header{padding:14px 18px;gap:10px}.header-actions{gap:8px}.header-actions .quiet{font-size:12px;padding:8px 10px}#rulesButton{margin-left:auto}
 main{padding:18px 14px 0}.panel{padding:24px}.home h1{font-size:27px}.home>p:first-of-type{font-size:14px;margin-bottom:20px}
 .settings-group{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.settings-group label[for=region]{grid-column:1/-1!important}
 .limits-group{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.settings .limits-group label{font-size:12px}
 .settings input,.settings select{padding:10px 9px}.home .primary{margin-top:8px}
 .game-actions{flex-wrap:wrap}.game-actions .quiet{flex:1}.history-row{font-size:12px;gap:8px}
}
@media(max-width:480px){
 header{padding:12px 16px}.brand{font-size:17px}.header-actions{gap:7px}.header-actions .quiet{padding:8px;font-size:11px}.language-label{gap:5px}.language-label select{padding:8px 5px}
 main{padding:14px 10px 0}.panel{padding:22px 18px}.home h1{font-size:25px}.sample-flags{margin-bottom:16px}
 .settings-group{grid-template-columns:1fr;gap:16px}.limits-group{grid-template-columns:repeat(2,minmax(0,1fr))}.settings .limits-group label[for=mistakeLimit]{grid-column:1/-1!important}
 .settings-group legend{font-size:14px}.settings small{font-size:12px}.home .scope{font-size:12px}
 .game-top b{font-size:23px}.feedback-row{flex-wrap:wrap}.facts>div{padding:0 8px}.facts small{font-size:12px}
 .history-row{grid-template-columns:minmax(0,1fr) auto}.history-row>small{grid-column:1/-1}.ready-panel{padding:36px 20px}
}
@media(forced-colors:active){.primary,.quiet,.share-button,.input-wrap{border:2px solid ButtonText}.progress .current{outline:2px solid Highlight}}

/* Keyboard notation stays inline and is never a separate control. */
.input-help{white-space:pre-line}
.space-key{display:inline-block;vertical-align:baseline;padding:1px 9px;margin:0 3px;border:1px solid #8fa79b;border-bottom-width:3px;border-radius:4px;background:#f4f8f5;color:#244c37;font:inherit;font-size:.92em;line-height:1.6;white-space:nowrap}
.ready-panel .space-key{padding:3px 20px;margin:0 8px 0 0;background:#fcfefd;color:#215537;border-color:#b5d0be;border-bottom-color:#8bb69b;font-weight:700}

.ranking-mode-switch{display:flex;gap:6px;margin:6px 0 10px}
.ranking-mode-switch button.quiet{flex:1;min-height:36px;padding:5px 12px;border:2px solid #52634a;font-weight:700}
.ranking-mode-switch button.quiet[aria-pressed="true"]{background:#245b45;color:#fff;border-color:#193f30;box-shadow:inset 0 -3px 0 #193f30}
.ranking-mode-switch button:focus-visible{outline:3px solid #8c452b;outline-offset:3px}
.ranking-mode-switch button.quiet[aria-pressed="false"]{background:rgba(247,240,223,.65) url("parchment.svg") repeat;color:#234539;border-color:#52634a;box-shadow:none}