.header-note a{text-decoration:underline;text-underline-offset:3px}.intro-chips{flex-wrap:wrap}.practice-panel{display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--teal-light);border:1px solid #d2e0e0;border-radius:20px;padding:24px 28px;margin:12px 0 30px}.practice-panel h2{font-size:22px;letter-spacing:-.5px;margin:0 0 7px}.practice-panel p{color:var(--muted);margin:0;line-height:1.6}.practice-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.atlas-card .revealed-detail{display:block;font-weight:400;font-size:12px;line-height:1.7;color:var(--muted);margin-top:10px}.atlas-card{height:auto;min-height:260px}.practice-list{padding:0;list-style:none}.practice-list li{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}.practice-list img{width:48px;height:32px;object-fit:contain}.practice-list small{display:block;color:var(--muted);margin-top:4px}.storage-note{background:#fff4df;padding:12px 16px;border-radius:10px;font-size:13px;color:#705013}.credits{padding:50px 24px;max-width:850px;line-height:1.8}.credits h1{font-size:44px;letter-spacing:-1.8px}.credits a{text-decoration:underline}.credits table{width:100%;border-collapse:collapse;font-size:13px}.credits td,.credits th{text-align:left;border-bottom:1px solid var(--line);padding:10px 8px;overflow-wrap:anywhere}.credits th:first-child{width:20%}.credits th:nth-child(2){width:50%}.result-actions{flex-wrap:wrap}.answer-note{line-height:1.6}.quiz-prompt{min-height:2.5em}.flag-stage img{object-fit:contain}.question-flag{filter:none}
@media(max-width:700px){.header-note{margin-left:auto}nav{order:3;width:100%;justify-content:center}nav button{flex:1;justify-content:center;padding:10px}.practice-panel{align-items:flex-start;flex-direction:column;padding:20px}.section-heading{align-items:flex-start}.section-aside{display:none}.intro h1{font-size:54px}.practice-actions{width:100%}.quiz-caption{gap:10px}.credits table{font-size:11px}.credits td,.credits th{padding:8px 3px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}.english-guides{margin:30px 0 40px}.english-guides h2{font-size:30px;letter-spacing:-.8px;margin:12px 0 24px}.guide-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.guide-cards>a{display:flex;flex-direction:column;align-items:flex-start;gap:14px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:27px}.guide-cards img{object-fit:contain;object-position:left}.guide-cards strong{font-size:20px;line-height:1.4}.guide-cards span{font-size:14px;line-height:1.8;color:var(--muted)}.guide-cards b{color:var(--teal-dark);font-size:13px;margin-top:auto}.atlas-entry{min-width:0}.atlas-entry .atlas-card{width:100%;height:auto;min-height:260px}.atlas-content-link{display:block;padding:10px 14px;font-size:12px;line-height:1.6;color:var(--teal-dark);text-decoration:underline;text-underline-offset:3px}
@media(max-width:700px){nav{flex-wrap:wrap}.guide-cards{grid-template-columns:1fr}.english-guides h2{font-size:26px}}

/* Shared Flaggs.org wordmark: both g letters are the brand accent. */
:root{--brand-navy:#283d50;--brand-apricot:#4365b3}
a.brand{color:var(--brand-navy);font-size:32px;font-weight:850;letter-spacing:-1.35px;line-height:1.25;white-space:nowrap;flex-shrink:0;text-decoration:none}
.brand .double-g{color:var(--brand-apricot);-webkit-text-stroke:.55px #344f91;paint-order:stroke fill}
.brand .brand-domain{font-size:.7em;letter-spacing:-.7px;align-self:baseline;color:var(--brand-navy);margin-left:1px}
footer .brand{font-size:30px}
@media(max-width:550px){a.brand{font-size:30px}}

/* Flaggs editorial direction: midnight, electric blue and apricot. */
:root{--teal:#4365b3;--teal-dark:#344f91;--teal-light:#ddfaf5;--navy:#283d50;--bg:#f3fffc;--line:#e1e8e8;--coral:#4365b3}
.site-header{background:#283d50;border-bottom:1px solid #ffffff20}
.site-header a.brand,.site-header .brand .brand-domain{color:#fff}
.site-header .brand .double-g{color:#4365b3;-webkit-text-stroke:0}
#play-view .play-section{position:relative;isolation:isolate;gap:60px;padding:48px 0 44px;margin-bottom:38px}
#play-view .play-section:before{content:'';position:absolute;z-index:-2;inset:0 auto 0 50%;width:100vw;transform:translateX(-50%);background:radial-gradient(ellipse at 6% 105%,#4365b345,transparent 55%),#bbfaf0}
#play-view .intro{position:relative;isolation:isolate;padding:10px 0 25px}
#play-view .intro:before,#play-view .intro:after{content:'';position:absolute;z-index:-1;pointer-events:none;width:190px;height:235px;border:42px solid #4365b308;border-radius:95px 95px 95px 23px;transform:rotate(-17deg)}
#play-view .intro:before{left:-125px;top:28px}
#play-view .intro:after{left:75px;top:70px}
#play-view .intro .eyebrow{color:#344f91;font-size:10px;letter-spacing:2px}
#play-view .intro .status-dot{background:#4365b3;box-shadow:0 0 0 4px #4365b316}
#play-view .intro h1{color:#283d50;font-size:clamp(60px,6.2vw,84px);line-height:1.02;letter-spacing:-4.6px;margin:26px 0}
#play-view .intro h1>span{color:#4365b3}
#play-view .intro .heading-spark{stroke:#4365b3;right:6px;top:95px;width:36px}
#play-view .intro>p{color:#526879;font-size:17px;line-height:1.8;max-width:420px}
#play-view .intro-chips{gap:9px;color:#3d5365}
#play-view .intro-chips>span{padding:8px 10px;border:1px solid #b5dfe3;border-radius:100px;background:#ffffff80}
#play-view .world-note{color:#526879;border-color:#b5dfe3}
#play-view .world-note strong{color:#283d50}
#play-view .world-note span{color:#526879}
#play-view .quiz-caption{color:#526879;margin-bottom:13px}
#play-view .quiz-caption>span:first-child,#play-view .quiz-caption .flag-total{color:#344f91}
#play-view .quiz-card{border:2px solid #fff;border-radius:24px;box-shadow:0 20px 55px #49686918,0 0 0 6px #ffffff35}
#play-view .keyboard-note{color:#526879;margin-top:16px}
#play-view .keyboard-note kbd{background:#fff;border-color:#b5dfe3;color:#3d5365}
.quiz-tag{background:#ddfaf5;color:#344f91}
.meter{height:7px;background:#ecf2f2}
.meter>div{background:#4365b3}
.flag-stage{background:#f5f8f8;background-image:none;border:1px solid #eaf0f0;border-radius:15px}
.flag-stage:before,.flag-stage:after{color:#9ebbbb}
.answer{border-radius:12px;transition:background .15s,border-color .15s,transform .15s}
.primary{background:#4365b3;border-color:#4365b3;box-shadow:0 4px 0 #4764651a;font-weight:750}
.practice-panel{background:#ffede2;border-color:#f0cfba;border-left:5px solid #4365b3}
.practice-panel .section-kicker{color:#855035}
.region-button{border-radius:16px;border:1px solid #dfe9e9}
.region-button.selected{background:#ddfaf5;border-color:#4365b3;box-shadow:0 0 0 1px #4365b3}
.mode-card.selected{border-color:#4365b3;background:#bbfaf0}
.discover-card{background:#4365b3;border-color:#4365b3;color:#fff;position:relative;overflow:hidden}
.discover-card h3,.discover-card p,.discover-card .text-link{color:#fff}
.discover-card .small-tag{background:#4365b3;color:#283d50}
.discover-card .mode-icon{background:#ffffff20;color:#fff}
.english-guides h2{font-size:38px;letter-spacing:-1.4px}
.guide-cards{gap:20px}
.guide-cards>a{border-radius:20px;border-top:5px solid #4365b3;box-shadow:0 7px 20px #283d5006;transition:transform .15s}
.guide-cards>a:nth-child(2){border-top-color:#4365b3}
.guide-cards>a:nth-child(3){background:#283d50;border-color:#283d50;color:#fff}
.guide-cards>a:nth-child(3) span{color:#dce8e8}
.guide-cards>a:nth-child(3) b{color:#4365b3}
.guide-cards strong{font-size:23px;letter-spacing:-.5px}
.section-kicker{letter-spacing:1.5px}
footer{background:#283d50;border-top:0;color:#dce8e8;padding-top:35px;padding-bottom:35px}
footer a.brand,footer .brand .brand-domain{color:#fff}
footer .brand .double-g{-webkit-text-stroke:0}
footer small,footer>span,footer small a{color:#dce8e8}
@media(max-width:900px){#play-view .play-section{gap:30px}#play-view .intro h1{font-size:64px;letter-spacing:-3.8px}}
@media(max-width:700px){#play-view .play-section{padding:32px 0;gap:26px}#play-view .intro{padding-bottom:0}#play-view .intro h1{font-size:62px;letter-spacing:-3.5px;margin:20px 0}#play-view .intro>p{font-size:15px;max-width:500px}#play-view .world-note{margin-top:20px}#play-view .intro .heading-spark{right:18px;top:70px}#play-view .quiz-card{box-shadow:0 16px 35px #49686918}.english-guides h2{font-size:30px}}
@media(prefers-reduced-motion:reduce){.answer,.guide-cards>a{transition:none}}
@media(min-width:701px) and (max-width:1050px){.site-header .header-note{margin-left:auto}}

/* Warm white, sage and terracotta: a brighter natural palette. */
:root{--teal:#4365b3;--teal-dark:#344f91;--teal-light:#ddfaf5;--bg:#f3fffc;--navy:#283d50;--muted:#526879;--line:#d7e6e6}
.site-header{background:#f3fffc;border-bottom:1px solid #d6e6e6}
.site-header a.brand,.site-header .brand .brand-domain{color:#283d50}
.site-header .brand .double-g{color:#4365b3;-webkit-text-stroke:.55px #344f91;paint-order:stroke fill}
#play-view .play-section:before{background:radial-gradient(ellipse at 6% 105%,#4365b335,transparent 55%),#bbfaf0}
#play-view .intro .eyebrow{color:#344f91}
#play-view .intro h1>span{color:#4365b3}
#play-view .intro-chips>span{background:#f3fffcaa;border-color:#b7caca}
#play-view .quiz-card{background:#ffffff;border-color:#ffffff}
.flag-stage{background:#f3fffc;border-color:#c9e8e9}
.quiz-tag{background:#ddfaf5;color:#344f91}
.practice-panel{background:#ddfaf5;border-color:#b5dfe3;border-left-color:#5eb5d7}
.guide-cards>a:nth-child(2){border-top-color:#84eded}
.guide-cards>a:nth-child(3){background:#4365b3;border-color:#4365b3}

/* Green and magenta exploration: bright accents, readable controls. */
:root{--teal:#4365b3;--teal-dark:#344f91;--teal-light:#ddfaf5;--brand-apricot:#4365b3;--brand-navy:#283d50;--coral:#4365b3}
.brand .double-g,.site-header .brand .double-g{color:#4365b3;-webkit-text-stroke:0}
#play-view .play-section:before{background:radial-gradient(ellipse at 3% 100%,#bbfaf024,transparent 56%),#bbfaf0}
#play-view .intro h1>span{color:#4365b3}
#play-view .intro .heading-spark{stroke:#4365b3}
#play-view .intro .status-dot{background:#84eded;box-shadow:0 0 0 4px #84eded20}
.meter>div{background:#4365b3}
.primary{background:#4365b3;border-color:#4365b3}
.discover-card{background:#4365b3;border-color:#4365b3}
.discover-card .small-tag{background:#bbfaf0;color:#283d50}
.guide-cards>a:nth-child(2){border-top-color:#4365b3}
.guide-cards>a:nth-child(3){background:#4365b3;border-color:#4365b3}
.guide-cards>a:nth-child(3) b{color:#bbfaf0}
.practice-panel{border-left-color:#84eded}
.practice-panel .section-kicker{color:#344f91}

/* Reference palette: Spray, Charlotte, Clear Day, Shakespeare, San Marino. */
:root{--spray:#84eded;--charlotte:#bbfaf0;--clear-day:#f3fffc;--shakespeare:#5eb5d7;--san-marino:#4365b3;--teal:var(--san-marino);--teal-dark:#344f91;--teal-light:#ddfaf5;--bg:var(--clear-day);--brand-apricot:var(--san-marino);--brand-navy:#283d50;--coral:var(--shakespeare)}
.site-header{background:#f3fffc;border-bottom-color:#c9e8e9}
.brand .double-g,.site-header .brand .double-g{color:#4365b3;-webkit-text-stroke:0}
#play-view .play-section:before{background:radial-gradient(ellipse at 5% 100%,#84eded70,transparent 60%),#bbfaf0}
#play-view .intro:before,#play-view .intro:after{border-color:#5eb5d714}
#play-view .intro .heading-spark{stroke:#5eb5d7}
#play-view .intro .status-dot{background:#5eb5d7;box-shadow:0 0 0 4px #5eb5d71a}
#play-view .intro-chips>span{background:#f3fffcbb;border-color:#9bdcd9}
.meter>div{background:#5eb5d7}
.practice-panel{background:#e2faf5;border-color:#b5dfe3;border-left-color:#84eded}
.practice-panel .section-kicker{color:#344f91}
.guide-cards>a:nth-child(2){border-top-color:#84eded}
.guide-cards>a:nth-child(3){background:#4365b3;border-color:#4365b3}
.guide-cards>a:nth-child(3) b{color:#bbfaf0}
footer{background:#344f91}
footer .brand .double-g{color:#84eded}

/* Sigrid reference typography and neutral canvas; fonts served locally. */
@font-face{font-family:'BDO Grotesk';src:url('fonts/BDOGrotesk-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'BDO Grotesk';src:url('fonts/BDOGrotesk-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'BDO Grotesk';src:url('fonts/BDOGrotesk-DemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'BDO Grotesk';src:url('fonts/BDOGrotesk-Bold.woff2') format('woff2');font-weight:700 900;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('fonts/PlayfairDisplay.ttf') format('truetype');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('fonts/PlayfairDisplay-Italic.ttf') format('truetype');font-weight:400 900;font-style:italic;font-display:swap}
:root{font-family:'BDO Grotesk',Arial,sans-serif;--bg:#f2f2f2;--navy:#181818;--muted:#515151;--line:#d7d7d7}
html,body{background:#f2f2f2;color:#181818}
body{font-family:'BDO Grotesk',Arial,sans-serif;font-weight:400;letter-spacing:-.015em}
.site-header{background:#f2f2f2;border-bottom-color:#d7d7d7}
.site-header a.brand,.site-header .brand .brand-domain{color:#181818}
a.brand{font-family:'BDO Grotesk',Arial,sans-serif;font-weight:700;letter-spacing:-.05em}
h1,h2,h3,h4,h5,h6{font-family:'BDO Grotesk',Arial,sans-serif;font-weight:600;letter-spacing:-.04em}
#play-view .play-section:before{background:#f2f2f2}
#play-view .intro h1{color:#181818;font-weight:600;letter-spacing:-.055em;line-height:1.05}
#play-view .intro h1>span,.page-title h1>span,.credits h1>span{font-family:'Playfair Display',Georgia,serif;font-weight:500;font-style:italic;letter-spacing:-.045em}
#play-view .intro:before,#play-view .intro:after{border-color:#4365b305}
#play-view .intro>p,#play-view .world-note,#play-view .world-note span,#play-view .keyboard-note,#play-view .quiz-caption{color:#515151}
#play-view .world-note strong{color:#181818}
#play-view .intro-chips>span{background:#ffffff9c;border-color:#d7d7d7}
#play-view .quiz-card{border-color:#fff;box-shadow:0 16px 45px #1818180a}
.reading-hero h1{font-weight:600;letter-spacing:-.04em}
.reading-section p{letter-spacing:-.005em;line-height:1.85}
.guide-cards strong{font-weight:600;letter-spacing:-.035em}
footer a.brand,footer .brand .brand-domain{color:#fff}

/* Two neutral levels: main canvas and brighter framing surfaces. */
:root{--canvas-gray:#f2f2f2;--surface-gray:#fafafa;--divider-gray:#dedede}
.site-header{background:var(--surface-gray);border-bottom:1px solid var(--divider-gray)}
#play-view .continents-section{position:relative;isolation:isolate;padding-top:32px;padding-bottom:32px;margin-bottom:32px}
#play-view .continents-section:before{content:'';position:absolute;inset:0 auto 0 50%;transform:translateX(-50%);width:100vw;background:var(--surface-gray);border-block:1px solid var(--divider-gray);z-index:-1}
#play-view .extras-section{padding-top:12px;padding-bottom:32px;border-bottom:1px solid var(--divider-gray)}
#play-view .english-guides{position:relative;isolation:isolate;padding-top:32px;padding-bottom:32px}
#play-view .english-guides:before{content:'';position:absolute;inset:0 auto 0 50%;transform:translateX(-50%);width:100vw;background:var(--surface-gray);border-block:1px solid var(--divider-gray);z-index:-1}
.reading-main .reading-jump{background:var(--surface-gray);border-color:var(--divider-gray);border-radius:12px;padding:14px}
.reading-main .reading-section{border-bottom-color:var(--divider-gray)}
.reading-main .fact-grid>div{background:var(--surface-gray)}
@media(max-width:700px){#play-view .continents-section,#play-view .english-guides{padding-top:25px;padding-bottom:25px}}

/* Quiet hover: retain each control's colour and gently raise its brightness. */
button,a.primary,a.secondary-button,.discover-card,.guide-cards>a,.reading-card{transition:filter .18s ease}
button:disabled{filter:none}
.secondary-button{background:#f8f8f8}
@media(prefers-reduced-motion:reduce){button,a.primary,a.secondary-button,.discover-card,.guide-cards>a,.reading-card{transition:none}}

/* The left edge stays almost still while a short wave travels toward .org. */
.brand .logo-letter{display:inline-block;transform-origin:0 65%;line-height:inherit}
.brand .double-g:has(.logo-letter),.brand .brand-domain:has(.logo-letter){display:inline-flex}
@media(prefers-reduced-motion:reduce){.brand .logo-letter{transform:none!important}}

/* Larger custom wordmark: lowercase g outlines aligned to the capitals. */
a.brand,footer a.brand{font-size:64px;align-items:baseline;line-height:1.18;letter-spacing:-.055em;padding-block:10px;overflow:visible}
.brand .brand-domain{font-size:1em;letter-spacing:inherit;align-self:baseline;margin-left:0}
.brand .double-g{font-size:.956693em;position:relative;top:-.177em;line-height:inherit}
@media(max-width:1200px){.site-header .header-note{margin-left:auto}}
@media(max-width:700px){a.brand,footer a.brand{font-size:60px}.site-header .header-note{margin-left:0}}
@media(max-width:359px){a.brand,footer a.brand{font-size:50px}}
@media(max-width:700px){
 .site-header.nav-enhanced.menu-open .header-note{display:flex;order:4;width:100%;padding:12px 0 4px;margin-left:0}
}
@media(max-width:359px){}

/* Natural Flaggs.org casing with a right-aligned desktop navigation. */
.brand .double-g{font-size:1em;top:0}
@media(min-width:701px){
}
@media(min-width:701px) and (max-width:1100px){
}

/* Wordmark refinement: 20% smaller, with 10% looser tracking. */
a.brand,footer a.brand{font-size:40.96px;letter-spacing:-.0495em;transform:scaleX(1.1);transform-origin:left center;margin-right:.5em}
@media(max-width:700px){a.brand,footer a.brand{font-size:38.4px}}
@media(max-width:359px){a.brand,footer a.brand{font-size:32px}}

/* Complete collection navigation, reusing the established neutral/blue design. */
.play-collection-label{display:block;font-size:11px;font-weight:600;color:#344f91;margin:0 0 7px}
.play-collection-label select{display:block;width:100%;border:1px solid #d7d7d7;background:#fafafa;color:#181818;border-radius:10px;padding:12px 14px;margin-top:6px;min-height:44px;font-size:13px}
.collection-status{font-size:11px;line-height:1.5;color:#515151;margin:0 0 12px}
.full-collections{padding:12px 0 36px}
.full-collections .section-heading{margin-top:24px}
.full-collections .collection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.full-collections .collection-card{min-width:0;background:#fff;border:1px solid #d7d7d7;border-radius:14px;padding:18px;text-align:left;display:flex;align-items:center;gap:14px;color:#181818;min-height:90px}
.full-collections .collection-card img{width:50px;height:34px;object-fit:contain;flex-shrink:0}
.full-collections .collection-card span{min-width:0;flex:1}.full-collections .collection-card strong{display:block;font-size:15px;line-height:1.4}.full-collections .collection-card small{display:block;font-size:11px;line-height:1.6;color:#515151;margin-top:5px}
.full-collections .collection-card.selected{border:2px solid #4365b3;background:#f3f6fd;padding:17px}
.city-collection-panel{background:#fafafa;border:1px solid #dedede;border-radius:14px;margin:24px 0 16px;padding:22px}
.city-collection-panel h3{font-size:20px}.city-collection-panel p{font-size:12px;line-height:1.7;color:#515151;margin:15px 0 0}
.city-scope-actions{display:flex;gap:10px;flex-wrap:wrap}.city-scope-actions [aria-pressed=true]{border-color:#4365b3;color:#344f91;background:#eaf0ff}
.answer span{min-width:0;overflow-wrap:anywhere}.answer-profile{display:block;font-size:12px;line-height:1.6;color:#344f91;text-decoration:underline;margin-top:10px}
.picture-answers .answer{flex-wrap:wrap}.picture-answers .answer img{object-fit:contain}.picture-answers .answer>span{width:100%;font-size:12px}
.atlas-details{padding:16px 18px;border:1px solid #d7d7d7;border-top:0;background:#fafafa;border-radius:0 0 12px 12px;font-size:13px;line-height:1.8;color:#181818}
.atlas-details .revealed-detail{display:block;margin-top:8px;font-size:12px;color:#515151}.atlas-details a{color:#344f91;text-decoration:underline}
@media(max-width:800px){.full-collections .collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.full-collections .collection-grid{grid-template-columns:1fr}.full-collections .collection-card{min-height:80px}.full-collections .collection-card strong{font-size:14px}.collection-status{font-size:10px}.quiz-meta-left{min-width:0}.quiz-tag{max-width:210px;overflow-wrap:anywhere}}
.play-config{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px}.play-config select{font-size:12px}
@media(max-width:420px){.play-config{grid-template-columns:1fr;gap:3px}}
.page-title .app-view-title{font-size:clamp(40px,5vw,67px);line-height:1.1;letter-spacing:-.045em;margin:24px 0 21px;font-weight:600}.page-title .app-view-title>span{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;color:var(--teal)}
@media(max-width:700px){.page-title .app-view-title{font-size:42px}}