@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;550;600;650;700&display=swap');
:root{--bg:#f7f8f5;--ink:#252c2b;--muted:#8b928e;--line:#dfe3dc;--accent:#4064c6;--success:#438b73}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--bg);font:14px Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;height:100vh;height:100dvh;display:grid;grid-template-rows:56px 56px minmax(220px,1fr) 100px;overflow:hidden}button,select,input{font:inherit}button,select{cursor:pointer}button{color:inherit}button:disabled{opacity:.35;cursor:default}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button{transition:background .16s,color .16s}header{display:flex;align-items:center;padding:0 32px;border-bottom:1px solid var(--line);gap:20px;background:var(--bg);z-index:4}.brand{font-size:28px;font-weight:650;letter-spacing:-2px;text-decoration:none;color:var(--ink)}.brand>span{font-size:20px;vertical-align:top;letter-spacing:0;margin-left:2px;position:relative;top:3px;color:var(--accent)}.header-caption{font-size:12px;color:var(--muted);border-left:1px solid var(--line);padding-left:20px}.header-actions{margin-left:auto;display:flex;align-items:center;gap:25px}.text-button{background:none;border:0;padding:8px 0;font-size:12px;display:flex;align-items:center;gap:9px}.help-icon{width:16px;height:16px;display:inline-grid;place-items:center;border:1px solid #aab2ab;border-radius:50%;font-size:10px;color:#768078}.primary{background:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:5px;padding:11px 18px;font-size:12px;font-weight:500;min-width:116px}.primary:hover{background:#414a46}.primary span{margin-left:20px}.settings{display:flex;align-items:center;padding:0 32px;gap:28px;border-bottom:1px solid var(--line);z-index:4;background:var(--bg)}.settings label{display:flex;align-items:center;gap:9px}.settings label>span{color:var(--muted);font-size:11px}.settings select{color:var(--ink);border:0;background:transparent;padding:7px 20px 7px 0;font-size:12px;max-width:185px;outline-offset:0}.settings > :is(label, #country-label):not([hidden]) ~ :is(label, #country-label):not([hidden]){border-left:1px solid var(--line);padding-left:28px}#count-note{margin-left:auto;font-size:11px;color:var(--muted)}.stage{position:relative;overflow:hidden;min-height:0}#map-wrap{position:absolute;inset:0}#map{width:100%;height:100%;display:block;touch-action:none;cursor:grab}#map:active{cursor:grabbing}.question-area{position:absolute;inset:0 0 auto;text-align:center;padding:27px 100px 40px;background:linear-gradient(var(--bg) 0%,#f7f8f5f5 65%,#f7f8f500 100%);pointer-events:none;z-index:2}.question-area>span,.overline{font-size:10px;letter-spacing:1.4px;color:var(--muted);text-transform:uppercase;font-weight:450}.question-area h1{font-size:32px;line-height:1.2;letter-spacing:-1.15px;font-weight:500;margin:9px 0}.question-area p{font-size:12px;color:var(--muted);margin:0;min-height:17px}.question-area p.error{color:#ac5a4c}.question-area p.success{color:var(--success)}.country{fill:var(--map-land, #e5e8df);stroke:#fbfcfa;stroke-width:1.1;vector-effect:non-scaling-stroke;transition:fill .16s}.country.playable{fill:var(--map-playable, #dfe4d8);cursor:pointer}.country.playable:hover{fill:var(--map-hover, #c5ced0)}.country.solved{fill:#94b9a7}.country.target,.country.hint{fill:#839fdb;stroke:#587bc7}.country.wrong{fill:#dbb4a6}.graticule{fill:none;stroke:#e7ebe4;stroke-width:.65;vector-effect:non-scaling-stroke}.capital{fill:#fff;stroke:#707f79;stroke-width:1.5;vector-effect:non-scaling-stroke}.capital.solved{fill:#438b73;stroke:#fff}.capital.target,.capital.hint{fill:var(--accent);stroke:white}.capital.wrong{fill:#bc7560}.capital-hit{fill:transparent;cursor:pointer}.solved-label{fill:#526c5f;font-size:10px;text-anchor:middle;pointer-events:none;paint-order:stroke;stroke:var(--bg);stroke-width:3px}.microstates{pointer-events:none}.micro{pointer-events:none}.micro-link{stroke:#879589;stroke-width:1;fill:none;pointer-events:none}.micro-anchor{fill:#7e8c81;pointer-events:none}.micro-dot{fill:var(--bg);stroke:#718079;stroke-width:1.5;pointer-events:none}.micro-inner{fill:#87978b;pointer-events:none}.micro-hit{fill:transparent;cursor:pointer;pointer-events:all}.micro:hover .micro-dot{fill:#d9e2ed;stroke:var(--accent)}.micro.solved .micro-dot{fill:#94b9a7;stroke:#438b73}.micro.solved .micro-inner{fill:#fff}.micro.target .micro-dot,.micro.hint .micro-dot{fill:var(--accent);stroke:#fff;stroke-width:2}.micro.target .micro-inner,.micro.hint .micro-inner{fill:#fff}.micro.wrong .micro-dot{fill:#dbb4a6}.micro-name{font-size:10px;fill:#526c5f;paint-order:stroke;stroke:var(--bg);stroke-width:3;pointer-events:none}.map-tools{position:absolute;right:24px;bottom:26px;display:grid;background:#fdfefb;border:1px solid #e1e5dc;border-radius:5px;z-index:3}.map-tools button{border:0;background:transparent;width:38px;height:37px;font-size:22px;display:grid;place-items:center}.map-tools button+button{border-top:1px solid #e6e9e2}.map-tools button:hover{background:#e9ede4}.map-tools svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.5}.map-note{position:absolute;bottom:24px;left:32px;display:flex;align-items:center;gap:8px;font-size:10px;color:#8b978d;pointer-events:none}.micro-example{display:inline-block;width:10px;height:10px;border:1px solid #718079;border-radius:50%;background:var(--bg);position:relative}.micro-example:after{content:'';width:2px;height:2px;background:#718079;position:absolute;left:3px;top:3px;border-radius:50%}.map-credit{position:absolute;right:24px;bottom:8px;color:#a4aca1;font-size:8px;pointer-events:none}.game-footer{border-top:1px solid var(--line);display:flex;align-items:center;padding:0 32px;gap:35px;background:#fcfdfb;z-index:4}.progress-summary{min-width:165px}.progress-summary>div{display:flex;align-items:baseline;gap:7px;margin-top:4px}.progress-summary strong{font-size:28px;font-weight:500;letter-spacing:-1px;font-variant-numeric:tabular-nums}.progress-total{font-size:16px;color:#939c90;font-weight:400}.percentage{font-size:12px;color:var(--success);margin-left:10px}.progress-middle{flex:1;min-width:90px}.progress-description{display:flex;justify-content:space-between;font-size:11px;color:#8d968a;margin-bottom:12px;gap:10px}.progress-description b{color:#5c685b;font-weight:500}.progress-track{height:3px;background:#e5e9e0;overflow:hidden}#progress-fill{width:0;height:100%;background:var(--success);transition:width .4s}.timer{border-left:1px solid var(--line);padding-left:30px;display:grid;gap:7px}.timer b{font-size:16px;font-weight:400;font-variant-numeric:tabular-nums}.game-actions{display:flex;gap:22px;border-left:1px solid var(--line);padding-left:30px}.game-actions button{border:0;background:none;font-size:12px;padding:12px 0}.game-actions button span{margin-left:10px;color:#9aa28f}#answer-form{display:flex;pointer-events:auto;max-width:340px;margin:17px auto 0;border:1px solid #cad1c3;border-radius:5px;background:#fdfefb;padding:4px}#answer{min-width:0;width:100%;border:0;background:none;padding:9px;font-size:13px;color:var(--ink);outline:none}#answer-form:focus-within{border-color:#839bcf;box-shadow:0 0 0 2px #4064c612}#answer-form button{border:0;background:#edf0e8;border-radius:3px;font-size:11px;white-space:nowrap;padding:9px 12px}#answer-form button span{margin-left:10px;color:#8c9785}.loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);background:var(--bg);z-index:3}.finish{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fcfdfb;border:1px solid var(--line);padding:32px 42px;text-align:center;width:min(416px,calc(100% - 40px));box-shadow:0 15px 70px #273a2410;z-index:3}.finish-check{color:var(--success);font-size:36px}.finish h2{font-size:26px;font-weight:500;letter-spacing:-1px}.finish>p:not(.overline){font-size:13px;line-height:1.8;color:#7e8a77}.finish .primary{margin-top:12px}.close{float:right;border:0;background:transparent;font-size:26px;color:var(--muted)}dialog{color:var(--ink);padding:32px;border:1px solid var(--line);border-radius:6px;max-width:500px;background:var(--bg)}dialog::backdrop{background:#17241b55;backdrop-filter:blur(5px)}dialog h2{font-size:25px;font-weight:500;letter-spacing:-.8px}dialog p{font-size:13px;line-height:1.8;color:#6e7b66}dialog small{font-size:10px;color:#8e9987;line-height:1.7}dialog a{color:inherit}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}
@media(min-width:1700px){.question-area{padding-top:32px}.question-area h1{font-size:38px}header,.settings,.game-footer{padding-left:48px;padding-right:48px}.map-note{left:48px}}
@media(max-width:900px){.settings{gap:15px}.settings > :is(label, #country-label):not([hidden]) ~ :is(label, #country-label):not([hidden]){padding-left:15px}.game-footer{gap:20px;padding:0 24px}.game-actions{padding-left:20px;gap:15px}.timer{padding-left:20px}.progress-summary{min-width:130px}#accuracy{display:none}.settings label>span{display:none}}
@media(max-width:600px){body{grid-template-rows:64px 47px minmax(200px,1fr) 118px}header{padding:0 18px;gap:12px}.brand{font-size:28px}.header-caption{display:none}.header-actions{gap:19px}.text-button{font-size:11px}.help-icon{display:none}.primary{padding:10px 14px;min-width:104px;font-size:11px}.settings{padding:0 18px;justify-content:space-between;gap:8px}.settings label{min-width:0;gap:0}.settings > :is(label, #country-label):not([hidden]) ~ :is(label, #country-label):not([hidden]){padding-left:12px}.settings select{font-size:11px;padding-right:8px;max-width:140px}#count-note{display:none}.question-area{padding:20px 16px 38px}.question-area>span{font-size:9px}.question-area h1{font-size:27px;margin:8px 0;letter-spacing:-.8px}.question-area p{font-size:11px;max-width:310px;margin:auto}.map-tools{right:13px;bottom:22px}.map-tools button{width:35px;height:35px}.map-note{left:17px;bottom:16px;font-size:9px;gap:6px}.map-credit{right:14px;bottom:6px}.game-footer{padding:15px 18px 11px;gap:12px;display:grid;grid-template-columns:113px 1fr 50px;grid-template-rows:50px 29px}.progress-summary{min-width:0}.overline{font-size:8px;letter-spacing:1px}.progress-summary strong{font-size:24px}.progress-total{font-size:13px}.percentage{font-size:11px;margin-left:4px}.progress-summary>div{gap:5px;margin-top:1px}.progress-description{font-size:10px;margin-bottom:10px}.timer{padding-left:12px;gap:4px}.timer b{font-size:12px}.game-actions{grid-column:1/-1;grid-row:2;border-left:0;border-top:1px solid #edf0e8;padding:6px 0 0;justify-content:space-between;gap:0}.game-actions button{font-size:10px;padding:3px 0}.game-actions button span{margin-left:8px}#answer-form{margin-top:13px;max-width:300px}#answer{padding:7px;font-size:12px}#answer-form button{font-size:10px;padding:7px 10px}.finish{padding:25px}.finish h2{font-size:23px}dialog{margin:auto 14px;padding:25px}}
@media(max-height:650px) and (min-width:601px){body{grid-template-rows:44px 44px minmax(200px,1fr) 80px}.question-area{padding-top:14px}.question-area h1{font-size:27px}.game-footer{gap:24px}.map-tools{bottom:18px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Pointer focus must not leave a bounding box around SVG geography. */
#map .country:focus,#map .capital-hit:focus,#map .micro-hit:focus{outline:none}
#map .country:focus-visible,#map .capital-hit:focus-visible,#map .micro-hit:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.last-answer{position:absolute;left:32px;bottom:57px;max-width:calc(100% - 110px);display:flex;align-items:center;gap:12px;padding:11px 14px;background:#f7f8f5ed;pointer-events:none;z-index:2}
.answer-flag{font-size:32px;line-height:1;font-family:'Apple Color Emoji','Segoe UI Emoji',sans-serif}.last-answer .overline{font-size:8px;letter-spacing:1px}.last-answer p{margin:5px 0 0;font-size:12px;color:#707d6d;line-height:1.5}.last-answer b{color:var(--ink);font-weight:500}.answer-separator{color:#a3ad9a}
#pause-dialog{border:0;background:transparent;text-align:center;padding:30px;max-width:380px;overflow:visible}#pause-dialog::backdrop{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:#f7f8f5b5}.pause-symbol{font-size:35px;color:#667461;font-weight:400}#pause-dialog h2{font-size:28px;margin:12px 0;letter-spacing:-.8px}#pause-dialog>p:not(.overline){margin:0 0 24px;font-size:12px}#pause-dialog .overline{margin-top:20px}
@media(max-width:600px){.header-actions{gap:15px}#pause{font-size:11px;gap:5px}.last-answer{left:13px;bottom:40px;padding:9px 10px;gap:9px;max-width:calc(100% - 75px)}.answer-flag{font-size:27px}.last-answer p{font-size:10px;margin-top:3px}.last-answer .overline{font-size:7px}.answer-separator{display:none}#answer-capital{display:block}#pause-dialog{margin:auto;max-width:340px}}
.answer-flag{width:40px;height:30px;display:block;object-fit:contain;flex-shrink:0;outline:1px solid #25302012}
.progress-description{font-size:14px;color:#76816f}.game-footer .overline{font-size:11px}.game-actions button{font-size:13px}#count-note{font-size:12px}.last-answer .overline{font-size:10px}.last-answer p{font-size:13px}.last-answer{bottom:24px}
@media(max-width:900px){#accuracy{display:inline}}
@media(max-width:600px){.answer-flag{width:32px;height:24px}.last-answer{bottom:18px}.last-answer .overline{font-size:9px}.last-answer p{font-size:12px}.progress-description{font-size:12px;display:grid;gap:3px;margin-bottom:8px}#accuracy{font-size:11px;white-space:nowrap}.game-footer .overline{font-size:9px}.game-actions button{font-size:12px}.timer b{font-size:14px}.game-footer{grid-template-columns:105px 1fr 54px;gap:10px}.percentage{font-size:12px}}

.question-area h1{font-size:26px;letter-spacing:-.65px}
@media(min-width:1700px){.question-area h1{font-size:28px}}
@media(max-width:600px){.question-area h1{font-size:23px;letter-spacing:-.5px}}
.globe-ocean{fill:#e5edf0;stroke:#a6b9bf;stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none}.globe-shade{pointer-events:none}.globe-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-size:11px;color:#82938d;pointer-events:none;white-space:nowrap}#map[data-projection="globe"]{cursor:grab}#map[data-projection="globe"]:active{cursor:grabbing}
@media(max-width:600px){.globe-hint{bottom:8px;font-size:10px}}
.map-ghost{pointer-events:none}.ghost-country{fill:#dfe4d8;stroke:#fbfcfa;stroke-width:1.1;vector-effect:non-scaling-stroke}

.answer-flag{width:48px;height:36px}
.question-area #feedback.success{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:#e4f2e8;color:#216344;border:1px solid #c9e3d2;border-radius:5px;padding:8px 13px;font-size:15px;font-weight:600;line-height:1.35}

.game-actions #pause{display:inline-flex;align-items:center;font-size:13px;gap:0}
@media(max-width:600px){.answer-flag{width:40px;height:30px}.question-area #feedback.success{font-size:13px;padding:7px 11px;gap:7px}.game-actions #pause{font-size:12px}}

/* Keep the map veil independent of feedback and form height. */
.question-area{background:none;isolation:isolate}
.question-area::before{content:'';position:absolute;left:0;right:0;top:0;height:180px;background:linear-gradient(to bottom,#f7f8f5b3 0%,#f7f8f566 58%,#f7f8f500 100%);z-index:-1;pointer-events:none}
.question-area #feedback.success:not(.persistent){animation:confirmation-fade 1800ms linear forwards}
body.is-paused .question-area #feedback.success{animation-play-state:paused}
@keyframes confirmation-fade{0%,78%{opacity:1}100%{opacity:0}}
.game-actions button{padding:8px 10px;margin:0 -10px;border-radius:4px;transition:opacity .18s ease}
@media(hover:hover){}
.game-actions button>span{display:inline-block}
@media(max-width:600px){.question-area::before{height:155px}.game-actions button{padding:5px 8px;margin:0 -8px}}
@media(prefers-reduced-motion:reduce){.question-area #feedback.success:not(.persistent){animation:none}.game-actions button,.game-actions button>span{transition:none}.game-actions button:hover:not(:disabled),}

.header-links{display:flex;align-items:center;gap:4px;border-left:1px solid var(--line);padding-left:20px}
.header-links #help{font-size:13px}
.settings label>span,.settings select{font-size:14px}
.game-actions button,.game-actions #pause{font-size:14px;opacity:1;transition:opacity .18s ease}
.game-actions button>span{font-size:16px;line-height:1;transform:none}
.game-actions button:disabled{opacity:.35}
@media(hover:hover){.game-actions button:hover:not(:disabled){opacity:.58}}
.game-actions button:active:not(:disabled){opacity:.42}
@media(max-width:600px){.header-links{padding-left:14px;border-left:1px solid var(--line);gap:4px}.header-links #help{font-size:12px}.settings select{font-size:13px}.settings{gap:6px}.settings > :is(label, #country-label):not([hidden]) ~ :is(label, #country-label):not([hidden]){padding-left:9px}.game-actions button,.game-actions #pause{font-size:13px}.game-actions button>span{font-size:15px}}
@media(prefers-reduced-motion:reduce){.game-actions button{transition:none}}

/* Installed iPhone/iPad apps: reserve physical screen edges inside 100dvh.
   Normal browser tabs keep their existing viewport and layout. */
html.is-standalone{--app-safe-bottom:18px;--app-safe-bottom:max(18px,env(safe-area-inset-bottom,0px))}
html.is-standalone body{padding-top:env(safe-area-inset-top,0px);padding-right:env(safe-area-inset-right,0px);padding-bottom:var(--app-safe-bottom);padding-left:env(safe-area-inset-left,0px)}
html.is-standalone body::after{content:'';position:fixed;bottom:0;left:0;right:0;height:var(--app-safe-bottom);background:#fcfdfb;pointer-events:none;z-index:4}
html.is-standalone body{grid-template-rows:56px 56px minmax(0,1fr) 100px}
@media(max-width:600px){html.is-standalone body{grid-template-rows:64px 47px minmax(0,1fr) 118px}}
@media(max-height:650px) and (min-width:601px){html.is-standalone body{grid-template-rows:44px 44px minmax(0,1fr) 80px}}

/* No browser focus rings or blue tap highlights anywhere in the game. */
*:focus,*:focus-visible{outline:none!important;box-shadow:none!important}
*{-webkit-tap-highlight-color:transparent}
#answer-form:focus-within{border-color:#cad1c3;box-shadow:none}
.last-answer p{margin-top:0}

.game-types{display:flex;align-self:stretch;align-items:center;gap:24px;margin-left:12px}.game-types button{border:0;background:none;padding:12px 0;font-size:14px;color:#818b82;transition:opacity .18s}.game-types button[aria-pressed="true"]{color:var(--ink);text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:1px}.game-types button:hover{opacity:.6}.is-recall .country.playable{cursor:grab}.is-recall .country.playable:hover{fill:var(--map-playable, #dfe4d8)}.is-recall .country.solved:hover{fill:#94b9a7}
@media(max-width:1050px){.game-types{gap:16px;margin-left:0}.game-types button{font-size:12px}header{gap:16px}.header-links{padding-left:14px}}
@media(max-width:760px){body,html.is-standalone body{grid-template-rows:108px 47px minmax(0,1fr) 118px}header{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:60px 48px;gap:0 14px;padding:0 18px}.header-links{border:0;justify-self:end;padding:0}.header-actions{margin:0}.game-types{grid-row:2;grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);margin:0}.game-types button{font-size:12px;padding:12px 0}.game-types button[aria-pressed="true"]{text-underline-offset:7px}#answer{font-size:16px}.settings{justify-content:flex-start;gap:18px}.settings > :is(label, #country-label):not([hidden]) ~ :is(label, #country-label):not([hidden]){padding-left:18px}}

/* Globe keeps the same quiet palette as the flat map. */
.globe-ocean{fill:#f0f2ec;stroke:#cdd3c8}.projection-snapshot,.projection-snapshot *{pointer-events:none!important}

/* Regional progress shares the footer rather than covering the map. */
.progress-description{align-items:center}.progress-description>span{flex-shrink:0}
.continent-progress{display:flex;align-items:center;gap:18px;flex:1;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;font-size:12px;color:#596659;line-height:1.5;padding:2px 0}
.continent-count{display:inline-flex;align-items:baseline;flex-shrink:0;gap:6px;white-space:nowrap}.continent-count b{font-weight:600;font-size:12px;color:#303d33;font-variant-numeric:tabular-nums}.continent-count.complete b{color:#286b50}
.is-recall .progress-description{gap:22px}.is-recall #accuracy{display:none}
@media(max-width:600px){
 .is-recall .game-footer:has(.continent-progress:not([hidden])){position:relative;grid-template-rows:35px 20px 33px;row-gap:4px;padding-top:10px;padding-bottom:11px}
 .is-recall .progress-description{display:block;margin-bottom:8px}
 .is-recall .continent-progress{position:absolute;left:18px;right:18px;top:49px;bottom:auto;gap:18px;padding:0;line-height:20px;max-width:calc(100% - 36px);scrollbar-width:none}
 .is-recall .continent-progress::-webkit-scrollbar{display:none}
 .is-recall .game-footer:has(.continent-progress:not([hidden])) .game-actions{grid-row:3;align-self:end;padding-top:6px}
}

.projection-switch{position:absolute;right:24px;bottom:150px;z-index:3;display:flex;gap:3px;padding:3px;background:#fcfdfb;border:1px solid var(--line);border-radius:5px}.projection-switch button{border:0;background:transparent;border-radius:3px;padding:7px 9px;font-size:12px;color:#758071;transition:opacity .18s}.projection-switch button[aria-pressed="true"]{background:#e9ede4;color:var(--ink)}.projection-switch button:hover{opacity:.65}
@media(max-width:600px){.projection-switch{right:13px;bottom:140px}.projection-switch button{font-size:11px;padding:6px 8px}}

.projection-switch{bottom:26px;right:76px}
@media(max-width:600px){.projection-switch{bottom:22px;right:60px}}

.last-answer{bottom:32px}
@media(max-width:600px){.last-answer{bottom:13px}}

.is-learning .progress-summary,.is-learning .progress-middle,.is-learning .timer,.is-learning .game-actions,.is-learning #start{display:none}
.learn-note{font-size:13px;color:#71806f}.is-learning .game-footer{display:flex;justify-content:center;padding:12px 20px}.is-learning{grid-template-rows:56px 56px minmax(0,1fr) 64px}
.country.learning-selected{fill:#94b9a7;stroke:#438b73}.capital.learning-selected{fill:#438b73;stroke:#fff}.micro.learning-selected .micro-dot{fill:#94b9a7;stroke:#438b73}
.is-learning .last-answer{padding:15px 18px;border:1px solid var(--line);border-radius:5px;background:#fcfdfb}.is-learning .answer-flag{width:64px;height:48px}.is-learning .last-answer p{font-size:15px}.is-learning .country.hint{fill:#94b9a7;stroke:#438b73}
@media(max-width:1050px){.game-types{gap:13px}.game-types button{font-size:12px}}
@media(max-width:760px){body.is-learning,html.is-standalone body.is-learning{grid-template-rows:108px 47px minmax(0,1fr) 64px}.game-types{gap:8px}.game-types button{font-size:11px}.learn-note{font-size:12px;text-align:center}.is-learning .answer-flag{width:48px;height:36px}.is-learning .last-answer p{font-size:13px}}
@media(max-height:650px) and (min-width:761px){body.is-learning,html.is-standalone body.is-learning{grid-template-rows:44px 44px minmax(0,1fr) 64px}}

html.is-standalone body.is-learning{grid-template-rows:56px 56px minmax(0,1fr) 64px}
@media(max-width:760px){html.is-standalone body.is-learning{grid-template-rows:108px 47px minmax(0,1fr) 64px}}
@media(max-height:650px) and (min-width:761px){html.is-standalone body.is-learning{grid-template-rows:44px 44px minmax(0,1fr) 64px}}

@media(max-width:600px){.stage:has(.last-answer:not([hidden])) .projection-switch{bottom:140px}}

.theme-toggle {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  transition: opacity .18s;
}
.theme-toggle:hover { opacity: .6; }
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.theme-toggle .sun-icon { display: none; }
[data-theme="dark"] .theme-toggle .moon-icon { display: none; }
[data-theme="dark"] .theme-toggle .sun-icon { display: block; }
@media(max-width:760px) {
  .header-actions { gap: 8px; }
  .settings { gap: 12px; }
  .settings > :is(label, #country-label):not([hidden]) ~ :is(label, #country-label):not([hidden]) { padding-left: 12px; }
  .settings select { max-width: 140px; }
  #round-size-label select { max-width: 112px; }
}

:root[data-theme="dark"] {
  --bg: #171d1a;
  --ink: #e4eae2;
  --muted: #a1ada0;
  --line: #364238;
  --accent: #8ca9ec;
  --success: #8bc8a6;
  color-scheme: dark;
}
[data-theme="dark"] .primary { background: #dbe5d8; border-color: #dbe5d8; color: #18201a; }
[data-theme="dark"] .primary:hover { background: #c4d2bf; }
[data-theme="dark"] .settings option { background: #202822; color: var(--ink); }
[data-theme="dark"] .game-footer,
[data-theme="dark"] body::after,
[data-theme="dark"] .finish,
[data-theme="dark"] .last-answer,
[data-theme="dark"] .is-learning .last-answer,
[data-theme="dark"] .map-tools,
[data-theme="dark"] #answer-form { background: #202822; border-color: var(--line); }
[data-theme="dark"] .question-area::before {
  background: linear-gradient(to bottom, #171d1ab3, #171d1a66 58%, #171d1a00);
}
[data-theme="dark"] .country { fill: var(--map-land, #2b352e); stroke: #536155; }
[data-theme="dark"] .country.playable { fill: var(--map-playable, #39473b); }
[data-theme="dark"] .country.playable:hover { fill: var(--map-hover, #506152); }
[data-theme="dark"] .country.solved,
[data-theme="dark"] .country.learning-selected,
[data-theme="dark"] .is-learning .country.hint { fill: #426f58; stroke: #7aaa89; }
[data-theme="dark"] .country.target,
[data-theme="dark"] .country.hint { fill: #647eaf; stroke: #9db5e5; }
[data-theme="dark"] .country.wrong { fill: #9c6252; }
[data-theme="dark"] .is-recall .country.playable:hover { fill: var(--map-playable, #39473b); }
[data-theme="dark"] .is-recall .country.solved:hover { fill: #426f58; }
[data-theme="dark"] .graticule { stroke: #28372e; }
[data-theme="dark"] .capital { fill: #202822; stroke: #a9bba7; }
[data-theme="dark"] .capital.solved,
[data-theme="dark"] .capital.learning-selected { fill: #8bc8a6; stroke: #d5ebd9; }
[data-theme="dark"] .capital.target,
[data-theme="dark"] .capital.hint { fill: #8ca9ec; stroke: #e1e8f7; }
[data-theme="dark"] .solved-label,
[data-theme="dark"] .micro-name { fill: #cee3cf; }
[data-theme="dark"] .micro-dot { fill: #202822; stroke: #a1b49e; }
[data-theme="dark"] .micro-inner,
[data-theme="dark"] .micro-anchor { fill: #a1b49e; }
[data-theme="dark"] .micro-link { stroke: #81937d; }
[data-theme="dark"] .micro:hover .micro-dot { fill: #455448; stroke: #b6c8af; }
[data-theme="dark"] .micro.solved .micro-dot,
[data-theme="dark"] .micro.learning-selected .micro-dot { fill: #426f58; stroke: #91bc9d; }
[data-theme="dark"] .micro.target .micro-dot,
[data-theme="dark"] .micro.hint .micro-dot { fill: #647eaf; stroke: #d2dff7; }
[data-theme="dark"] .micro.solved .micro-inner,
[data-theme="dark"] .micro.target .micro-inner,
[data-theme="dark"] .micro.hint .micro-inner { fill: #e4eae2; }
[data-theme="dark"] .micro.wrong .micro-dot { fill: #9c6252; }
[data-theme="dark"] .map-tools button + button,
[data-theme="dark"] .game-actions { border-color: var(--line); }
[data-theme="dark"] .map-tools button:hover,
[data-theme="dark"] #answer-form button { background: #344036; }
[data-theme="dark"] #answer-form:focus-within { border-color: #657761; }
[data-theme="dark"] .progress-track { background: #3a483c; }
[data-theme="dark"] .progress-total,
[data-theme="dark"] .progress-description,
[data-theme="dark"] .last-answer p,
[data-theme="dark"] .learn-note,
[data-theme="dark"] .game-types button,
[data-theme="dark"] dialog p,
[data-theme="dark"] dialog small,
[data-theme="dark"] .finish > p:not(.overline) { color: #aebdad; }
[data-theme="dark"] .game-types button[aria-pressed="true"],
[data-theme="dark"] .progress-description b,
[data-theme="dark"] .continent-count b { color: var(--ink); }
[data-theme="dark"] .continent-count { color: #b2c0ad; }
[data-theme="dark"] .continent-count.complete b { color: var(--success); }
[data-theme="dark"] .question-area p.error { color: #edaa99; }
[data-theme="dark"] .question-area #feedback.success { color: #b6e1c0; background: #273f31; border-color: #4c6d53; }
[data-theme="dark"] #pause-dialog::backdrop { background: #171d1ac7; }
[data-theme="dark"] .pause-symbol { color: #b2c6ab; }
html[data-theme="dark"].is-standalone body::after { background: #202822; }
[data-theme="dark"] .country.solved:hover,
[data-theme="dark"] .country.learning-selected:hover { fill: #426f58; }
[data-theme="dark"] .country.target:hover,
[data-theme="dark"] .country.hint:hover { fill: #647eaf; }
@media(max-width:760px) { .settings select { min-width: 0; } }
[data-theme="dark"] #answer::placeholder { color: #a5b2a1; opacity: 1; }

.map-nav { color: var(--ink); text-decoration: none; font-size: 13px; }
.map-nav:hover { opacity: .65; }
#mode { max-width: 190px; }
@media(max-width:760px) {
  header { grid-template-rows: 60px; align-content:center; gap: 0 10px; }
  .header-links { justify-self: start; gap: 4px; }
  .map-nav { font-size: 12px; }
  body, html.is-standalone body { grid-template-rows: 82px 82px minmax(0,1fr) 118px; }
  body.is-learning, html.is-standalone body.is-learning {
    grid-template-rows: 82px 82px minmax(0,1fr) 64px;
  }
  .settings { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 0 14px; }
  .settings > :is(label, #country-label):not([hidden]) ~ :is(label, #country-label):not([hidden]) { border: 0; padding-left: 0; }
  .settings select, #round-size-label select, #mode { max-width: 100%; }
  #count-note { display: none; }
}
@media(max-width:380px) {
  header { padding-inline: 12px; gap: 0 7px; }

  .header-actions { gap: 3px; }
  .theme-toggle { width: 30px; padding: 5px; }
  #start { min-width: 0; padding-inline: 9px; }
}
@media(max-width:380px) {
  .brand { font-size: 24px; }
  #start { font-size: 10px; padding-inline: 6px; }
}

.progress-summary > div { margin-top: 0; }
.progress-summary strong,
.progress-summary .progress-total,
.progress-summary .percentage {
  font-size: 14px;
  letter-spacing: normal;
}
@media(min-width:761px) and (min-height:651px) {
  body, html.is-standalone body { grid-template-rows: 56px 56px minmax(0,1fr) 82px; }
  body.is-learning, html.is-standalone body.is-learning { grid-template-rows: 56px 56px minmax(0,1fr) 64px; }
}
@media(max-width:760px) {
  body, html.is-standalone body { grid-template-rows: 82px 82px minmax(0,1fr) 108px; }
  body.is-learning, html.is-standalone body.is-learning { grid-template-rows: 82px 82px minmax(0,1fr) 64px; }
  .game-footer { padding-block: 10px 8px; }
  .is-recall .game-footer { padding-block: 8px 4px; }
  .is-recall .continent-progress { top: 47px; }
  .progress-summary strong,
  .progress-summary .progress-total,
  .progress-summary .percentage { font-size: 12px; }
}

.progress-summary strong,
.progress-summary .progress-total,
.progress-summary .percentage,
.timer b {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.question-area #feedback.success {
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 500;
}

.finish {
  max-height: calc(100% - 24px);
  overflow-y: auto;
  padding: 24px 32px;
}
.finish h2 { margin: 12px 0 20px; font-size: 24px; }
.finish-stats { margin: 0; text-align: left; }
.finish-stats > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.finish-stats > div:last-child { border-bottom: 1px solid var(--line); }
.finish-stats dt { color: var(--muted); }
.finish-stats dd {
  margin: 0;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.finish .primary { margin-top: 16px; padding: 12px 16px; min-width: 120px; }
.finish .primary span { margin-left: 16px; }

@media(max-width:760px) {
  .progress-summary strong,
  .progress-summary .progress-total,
  .progress-summary .percentage,
  .timer b { font-size: 14px; }
  .progress-summary > div { gap: 4px; }
  .progress-summary .percentage { margin-left: 2px; }
}

.continent-progress,
.continent-count b,
.progress-description > span:first-child { font-size: 14px; }

.finish-check {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  font-size: 20px;
  line-height: 1;
}

#settings-dialog, #restart-dialog, #end-dialog { width: min(416px, calc(100% - 32px)); margin: auto; padding: 24px; border: 0; border-radius: 8px; text-align: center; }
#settings-dialog h2, #restart-dialog h2, #end-dialog h2 { margin: 0 0 8px; font-size: 24px; }
#settings-dialog p, #restart-dialog p, #end-dialog p { margin: 0; }
.settings-dialog-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 16px; margin-top: 24px; }
.settings-dialog-actions .secondary { background: transparent; color: var(--ink); border-color: var(--muted); }
.settings-dialog-actions .secondary:hover { background: var(--line); }

.country.capital-solved { fill: #d3e2d6; }
[data-theme="dark"] .country.capital-solved { fill: #365043; }

:root { --ocean: #e7eff2; --preview-land: #dfe4d8; }
:root[data-theme="dark"] { --ocean: #202e38; --preview-land: #39473b; }
[data-map-style="ocean"] #map-wrap { background: var(--ocean); }

.settings-link {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--ink);
}
.settings-link svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.settings-link:hover { opacity: .65; }

body.appearance-page { display: block; height: auto; min-height: 100dvh; overflow: auto; }
.appearance-page header { min-height: 64px; }
.appearance-content { width: min(704px, 100%); margin: 0 auto; padding: 40px 24px; }
.appearance-content h1 { margin: 0 0 32px; font-size: 28px; font-weight: 550; }
.map-presets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
.map-presets legend { margin-bottom: 12px; font-size: 16px; }
.preset-card { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.preset-card:has(:checked), .preset-card:focus-within { border-color: var(--accent); }
.preset-preview { display: grid; place-items: center; min-height: 104px; border: 1px solid var(--line); border-radius: 4px; }
.preset-preview.ocean { background: var(--ocean); }
.preset-preview svg { width: min(160px, 100%); fill: var(--preview-land); stroke: var(--line); }
.preset-label { display: flex; gap: 8px; align-items: center; }
.preset-label input { margin: 0; accent-color: var(--accent); }
.preset-description { color: var(--muted); font-size: 12px; line-height: 1.5; }
.appearance-back { display: inline-block; margin-top: 24px; text-align: center; text-decoration: none; }
@media(max-width:760px) {
  .settings-link { width: 24px; }
  .settings-link svg { width: 16px; height: 16px; }
}
@media(max-width:480px) {
  .map-presets { grid-template-columns: 1fr; }
  .appearance-content { padding: 24px 16px; }
}

:root { --ocean-land: #d6e0d9; }
:root[data-theme="dark"] { --ocean-land: #384742; }
[data-map-style="ocean"] #map-wrap {
  --map-land: #dfe7e2;
  --map-playable: var(--ocean-land);
  --map-hover: #c3d4cd;
}
[data-theme="dark"][data-map-style="ocean"] #map-wrap {
  --map-land: #303d39;
  --map-hover: #4a5f58;
}
.preset-preview.ocean svg { fill: var(--ocean-land); }

#pause-dialog {
  width: min(416px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100% - 32px);
  margin: auto;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  overflow: auto;
}
#pause-dialog .overline { margin: 16px 0 0; }
#pause-dialog h2 { margin: 8px 0 32px; }
#pause-dialog .finish-stats { margin: 0; }
#pause-dialog .settings-dialog-actions { gap: 8px; }
/* Shared sizing for text controls across the game and appearance settings. */
:root {
  --control-font-size: 12px;
  --control-padding: 8px 12px;
}
.primary, #start, .finish .primary, #answer-form button,
.header-links #help, .header-links .map-nav, .game-actions button, .game-actions #pause, #end-round {
  font-size: var(--control-font-size);
  line-height: 16px;
  padding: var(--control-padding);
  min-width: 0;
}
.game-actions button { margin: 0; }
.settings label > span, .settings select, #answer {
  font-size: var(--control-font-size);
  line-height: 16px;
}
.settings select, #answer { padding: var(--control-padding); }
.map-tools button, .theme-toggle, .settings-link, dialog .close {
  width: 32px;
  height: 32px;
  padding: 0;
}
.map-tools button, dialog .close { font-size: 20px; }
@media (max-width: 380px) {
  .header-links { gap: 0; padding-left: 0; }
}

#end-round { margin: 16px auto 0; }

.is-learning .question-area { display: none; }

#answer-capital { display: block; }

#language {
  color: var(--ink);
  background: transparent;
  border: 0;
  font-size: var(--control-font-size);
  line-height: 16px;
  padding: 8px 4px;
}

.country.subdivision { stroke: #fff; stroke-width: 1; }
.automatic-regions .subdivision { fill: transparent; cursor: pointer; }
.automatic-regions .subdivision:hover { fill: var(--map-hover, #c5ced0); }
.country.subdivision.learning-selected,
.automatic-regions .subdivision.learning-selected:hover { fill: #94b9a7; stroke: #438b73; stroke-width: 2; }
[data-theme="dark"] .country.subdivision.learning-selected,
[data-theme="dark"] .automatic-regions .subdivision.learning-selected:hover { fill: #426f58; stroke: #7aaa89; }

.global-regions .country.subdivision:not(.learning-selected) { stroke: none; }
.subdivision-boundaries { fill: none; stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }

#country { min-width: 0; width: 144px; max-width: 100%; padding: var(--control-padding); border: 0; color: var(--ink); background: transparent; }
#country::placeholder { color: var(--ink); opacity: 1; }
@media(max-width:760px) {
  .settings:has(#country-label:not([hidden])) { grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: minmax(24px,auto); }
  .settings:has(#country-label:not([hidden])) select, #country { padding-block: 4px; }
}

.settings { --settings-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%237d8580' stroke-width='1.25'/%3E%3C/svg%3E"); }
.settings select, #country {
  appearance: none;
  font-size: var(--control-font-size);
  line-height: 16px;
  padding-inline-end: 24px;
  background-image: var(--settings-chevron);
  background-position: right 4px center;
  background-size: 14px;
  background-repeat: no-repeat;
}
#country-label { display:flex; align-items:center; gap:8px; min-width:0; }
#country-label > label { color:var(--muted); font-size:var(--control-font-size); }
.country-picker { position:relative; display:flex; align-items:center; min-width:0; gap:4px; }
#country { flex:1 1 0; width:0; min-width:0; background-image:none; padding-inline-end:4px; }
#country-clear,#country-toggle { flex:none; width:24px; height:24px; padding:0; border:0; background:transparent; color:var(--ink); }
#country-clear { display:grid; place-items:center; }
#country-clear span {
  display:grid;
  place-items:center;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--muted);
  color:var(--bg);
  font-size:11px;
  line-height:1;
}
#country-toggle { background: var(--settings-chevron) right 4px center / 14px no-repeat; }
@media (min-width:761px) {
  .settings { gap:0; }
  .settings > :is(label, #country-label) {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-content:center;
    align-items:center;
    gap:2px;
    padding-block-start:4px;
    min-width:0;
    padding-inline-end:24px;
  }
  .settings > :is(label, #country-label):not([hidden]) ~ :is(label, #country-label):not([hidden]) {
    padding-inline-start:24px;
  }
  .settings > label > span, #country-label > label {
    font-size:11px;
    line-height:12px;
  }
  .settings select, #country { padding-block:4px; padding-inline-start:0; }
  .settings select { width:100%; }
  #country-label { flex:0 1 240px; }
  #country-toggle { width:20px; }
}
@media (min-width:761px) and (max-width:900px) {
  .settings > :is(label, #country-label) { padding-inline-end:12px; }
  .settings > :is(label, #country-label):not([hidden]) ~ :is(label, #country-label):not([hidden]) { padding-inline-start:12px; }
}

#country-options { position:absolute; z-index:10; top:100%; left:0; min-width:100%; width:max-content; max-width:min(280px,75vw); max-height:240px; overflow:auto; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:4px; }
#country-options button { display:block; width:100%; padding:8px; text-align:left; background:none; border:0; color:var(--ink); }
#country-options button:hover,#country-options button:focus-visible { background:var(--line); }
@media(max-width:900px) { #country-label > label { display:none; } }

#country:focus { color: var(--muted); }
#country:focus::placeholder { color: var(--muted); }

#country-clear i { font-style:normal; transform:translateY(-1px); }

/* Let the map continue behind the settings bar so its detail can blur through. */
body:has(> .settings) { --settings-height: 56px; }
body:has(> .settings) > header { grid-row: 1; }
body > .settings { grid-row: 2; }
body:has(> .settings) > .stage { grid-row: 2 / 4; }
body:has(> .settings) > .game-footer { grid-row: 4; }
body:has(> .settings) > :is(header, .settings, .stage, .game-footer) { grid-column: 1; }
body:has(> .settings) .question-area { top: var(--settings-height); }

@supports (backdrop-filter: blur(8px)) {
  body > .settings {
    background: color-mix(in srgb, var(--bg) 80%, transparent);
    backdrop-filter: blur(8px);
  }
}
@media (max-height:650px) and (min-width:761px) {
  body:has(> .settings) { --settings-height: 44px; }
}
@media (max-width:760px) {
  body:has(> .settings) { --settings-height: 82px; }
}


.map-tools #micro-toggle[aria-pressed="true"] { background:var(--line); color:var(--ink); }
#mobile-menu-panel { display:contents; }
.menu-item-label, .menu-language { display:none; }
#mobile-menu { display:none; }
.header-launch { display:flex; align-items:center; }
@media (max-width:760px) {
  body:has(> .settings) { --settings-height:72px; }
  body:has(#round-size-label:not([hidden])):has(#country-label:not([hidden])) { --settings-height:104px; }
  body:has(> .settings), html.is-standalone body:has(> .settings) { grid-template-rows:56px var(--settings-height) minmax(0,1fr) 108px; }
  body.is-learning:has(> .settings), html.is-standalone body.is-learning:has(> .settings) { grid-template-rows:56px var(--settings-height) minmax(0,1fr) 64px; }
  body:has(> .settings) > header {
    position:relative;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:1fr;
    padding-inline:12px;
    column-gap:8px;
  }
  #mobile-menu { display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; }
  .header-launch { grid-area:1 / 2; gap:8px; }
  #mobile-menu-panel {
    display:none;
    position:absolute;
    z-index:1;
    inset:100% 12px auto auto;
    padding-block:8px;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--bg);
  }
  body:has(> .settings) > header:has(#mobile-menu[aria-expanded="true"]) { z-index:5; }
  header:has(#mobile-menu[aria-expanded="true"]) #mobile-menu-panel { display:grid; width:min(260px,calc(100vw - 24px)); }
  #mobile-menu-panel .header-links, #mobile-menu-panel .header-actions { display:grid; padding:0; margin:0; gap:0; border:0; }
  #mobile-menu-panel .header-actions { grid-template-columns:1fr auto; }
  #mobile-menu-panel :is(.map-nav,#help,.settings-link,#theme-toggle,.menu-language,#language) {
    display:flex;
    align-items:center;
    min-height:42px;
    width:auto;
    height:auto;
    padding:8px 12px;
    font-size:14px;
    color:var(--ink);
  }
  #mobile-menu-panel :is(.settings-link,#theme-toggle) { grid-column:1 / -1; justify-content:space-between; }
  #mobile-menu-panel .menu-item-label { display:inline; order:-1; }
  #mobile-menu-panel .header-links, #mobile-menu-panel #theme-toggle { border-bottom:1px solid var(--line); }
  #mobile-menu-panel .menu-language { grid-row:3; }
  #mobile-menu-panel #language { grid-area:3 / 2; }
  body > .settings, body > .settings:has(#country-label:not([hidden])) {
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:32px;
    align-content:center;
    gap:0 12px;
    padding-inline:12px;
  }
  body > .settings select, body > .settings .country-picker {
    width:100%;
    height:30px;
    border:0;
  }
  body > .settings select { padding-inline-start:8px; }
  body > .settings #country { padding-inline-start:8px; }
}
html.is-standalone body:has(> .settings) > header { align-content:center; }

@media (max-width:760px) {
  body > .settings { position:relative; }
  body > .settings::before, body > .settings::after {
    content:"";
    position:absolute;
    background:var(--line);
    pointer-events:none;
  }
  body > .settings::before { inset:8px auto 8px 50%; width:1px; }
  body > .settings::after { inset:36px 12px auto; height:1px; }
  body:has(#round-size-label:not([hidden])):has(#country-label:not([hidden])) > .settings::after {
    box-shadow:0 32px var(--line);
  }
}