/* Atlas glass: parchment and midnight charts, with quiet modern depth. */
:root{--bg:#0a191e;--panel:#142b30;--panel2:#20383c;--ink:#f5ecd7;--muted:#b7c7c3;--gold:#e2bf82;--border:#71958a63;--rust:#b55239;--canvas:#102329;--grid:#9bc1ae13;--glass-a:#24484bc9;--glass-b:#112a32d9;--edge:#e6e0bb33;--shadow:#0000004d;--chart:#88d7bd;--chart-faint:#88d7bd38}
body.light{--bg:#ece2ca;--panel:#f6eddc;--panel2:#e8deca;--ink:#263732;--muted:#52635b;--gold:#755225;--border:#697e665c;--rust:#974832;--canvas:#fff6e6;--grid:#6e785f15;--glass-a:#fff8e3cc;--glass-b:#e6ecdfc9;--edge:#ffffffd9;--shadow:#53472a1f;--chart:#2f806b;--chart-faint:#2f806b28}
header{height:74px;max-width:1230px;margin:18px auto 0;padding:0 26px;border:1px solid var(--border);border-radius:24px;background:var(--panel);box-shadow:inset 0 1px 0 var(--edge),0 18px 40px var(--shadow);gap:20px}
.logo{font-size:29px;letter-spacing:.06em;white-space:nowrap}.compass{font-size:29px}
nav{gap:5px}nav button{padding:10px 12px;min-height:44px;border-radius:12px;font-size:12px;letter-spacing:.04em}nav button.active{background:var(--chart-faint)}
nav button:hover{background:var(--chart-faint)}.theme{margin-left:6px;min-width:44px;width:44px;height:44px;border-color:var(--border)}
.screen{max-width:1280px;padding:32px 24px 60px}
.service-status{max-width:1230px;margin:14px auto 0;padding:10px 20px;text-align:center;border-radius:12px;background:var(--panel);border:1px solid var(--border)}
#home.active{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(330px,.8fr);gap:22px;align-items:start}
.hero{min-height:655px;padding:36px 22px;border:1px solid var(--border);border-radius:30px;background:var(--panel);box-shadow:inset 0 1px 0 var(--edge),0 25px 65px var(--shadow);overflow:hidden}
.hero h1{font-size:clamp(88px,11.5vw,156px);margin:30px 0 18px;letter-spacing:-.03em;text-shadow:0 5px 35px #d7b87b15}
.hero .tag{font-size:18px;letter-spacing:.22em;line-height:1.6}.hero .eyebrow{font-size:10px;letter-spacing:.2em}.hero p{max-width:410px;font-size:13px;margin:18px 0}
.hero:before{font-size:420px;opacity:.035}.hero .primary{margin:25px 0 26px;padding:16px 24px;font-size:18px}
.hero-foot{grid-column:1/-1;border:1px solid var(--border);border-radius:22px;background:var(--panel);box-shadow:inset 0 1px 0 var(--edge),0 16px 40px var(--shadow);padding:24px}
.hero-foot b{font-size:16px}.progress{max-width:490px}.step .name{font-size:11px;letter-spacing:.04em}.step small{font-size:11px}.step .number{width:34px;height:34px;box-shadow:inset 0 1px 0 var(--edge)}
.primary{border-radius:15px;background:linear-gradient(145deg,#ad5039,#953f30);border-color:#f6cba35e;box-shadow:inset 0 1px 0 #ffe9cc4d,0 8px 24px #0003;color:#fff5e5;transition:box-shadow .18s,transform .18s}
body.light .primary{background:linear-gradient(145deg,#a65338,#813b2b)}
.primary:hover{filter:none;box-shadow:inset 0 1px 0 #fff4,0 10px 28px #b9703438;transform:translateY(-2px)}
.secondary{border-radius:13px;background:var(--chart-faint);border-color:var(--border);font-size:15px;min-height:46px;box-shadow:inset 0 1px 0 var(--edge)}
.secondary:hover{border-color:var(--gold)}button:disabled{opacity:.45;transform:none!important;box-shadow:none}
.panel,.dialog,.metric,.results-list,.rank-card{border:1px solid var(--border);background:var(--panel);border-radius:25px;box-shadow:inset 0 1px 0 var(--edge),0 20px 55px var(--shadow)}
.trivia-panel{padding:35px}.trivia-question{font-size:clamp(24px,3vw,34px);line-height:1.5}.section-title{letter-spacing:.01em}
#countryGuess{border-radius:14px;border-color:var(--border);background:var(--canvas);box-shadow:inset 0 2px 7px #00000010}
.hint-text{border-radius:15px;background:var(--chart-faint);border-style:solid;border-color:var(--border)}
.canvas-wrap{border-radius:24px;padding:10px;border:1px solid var(--border);background:var(--panel);outline:1px solid var(--edge);outline-offset:4px;box-shadow:inset 0 1px 0 var(--edge),0 20px 60px var(--shadow)}
.canvas-wrap canvas{border-radius:14px;background-size:32px 32px}.canvas-wrap:before{left:3px;top:-14px}.canvas-wrap:after{right:3px;bottom:-14px}
.tool{border-radius:14px;box-shadow:inset 0 1px 0 var(--edge);background:var(--panel)}.tool:hover{border-color:var(--gold)}
.timer{border-color:var(--border);background:var(--panel);border-radius:16px;box-shadow:inset 0 1px 0 var(--edge);font-size:28px}.timer.danger{background:#b84f3020}
.metric{padding:20px 30px;border-radius:20px}.metric small{font-size:10px}.results-list{padding:10px 25px}.result-row:last-child{border-bottom:0}
.score-formula{background:var(--panel);border:1px solid var(--border);border-radius:15px;padding:14px 20px;font:600 15px/1.8 'DM Sans',Arial,sans-serif}
.footer{max-width:1230px;margin:auto;border-top-color:var(--border);font-size:10px;letter-spacing:.04em;line-height:1.8}.dialog{padding:35px}.message{border-radius:14px;box-shadow:0 10px 30px var(--shadow)}
.rank-card{padding:28px;text-align:left;min-width:0}.rank-card .eyebrow{font-size:10px;letter-spacing:.2em}.rank-card h2{font:600 29px/1.2 Georgia,serif;margin:14px 0 15px;color:var(--ink)}
.rank-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.rank-count{border:1px solid var(--border);background:var(--chart-faint);border-radius:50px;font-size:11px;white-space:nowrap;padding:8px 11px;color:var(--ink)}
.rank-copy{font-size:14px;line-height:1.8;min-height:72px;margin:10px 0 16px;color:var(--ink)}.rank-copy strong{color:var(--chart);font-weight:700}
.rank-chart{margin:5px -6px 8px}.rank-chart svg{width:100%;height:auto;overflow:visible;display:block}.chart-grid{stroke:var(--border);stroke-width:1;stroke-dasharray:3 5}.chart-axis{fill:var(--muted);font:12px 'DM Sans',Arial,sans-serif}.chart-bar{fill:var(--chart);opacity:.75}.chart-bar.own-bin{fill:var(--gold);opacity:1}.chart-you{stroke:var(--gold);stroke-width:2;stroke-dasharray:4 3}.chart-you-label{fill:var(--gold);font:700 12px 'DM Sans',Arial,sans-serif}
.rank-legend{display:flex;gap:16px;align-items:center;color:var(--muted);font-size:11px;margin:14px 0;flex-wrap:wrap}.rank-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;background:var(--chart);margin-right:5px}.rank-legend .you-key{background:var(--gold)}
.rank-fine{font-size:11px;color:var(--muted);line-height:1.8}.rank-refresh{font:600 11px 'DM Sans',Arial,sans-serif;color:var(--gold);border:0;background:transparent;padding:7px 0;min-height:32px;text-decoration:underline;text-underline-offset:4px}
.chart-data{border-top:1px solid var(--border);margin-top:18px;padding-top:15px;color:var(--muted);font-size:11px}.chart-data summary{cursor:pointer;min-height:28px}.chart-data table{width:100%;border-collapse:collapse}.chart-data th,.chart-data td{padding:7px;text-align:left;border-bottom:1px solid var(--border)}.chart-data caption{padding:10px 0;text-align:left}.chart-data .table-scroll{max-height:240px;overflow:auto}
.final-rank{max-width:780px;margin:30px auto}.final-rank .rank-copy{min-height:0;font-size:17px}.final-rank .rank-chart{max-width:650px;margin:auto}
.rank-card[data-state="error"] .rank-chart{display:none}.rank-card[data-state="loading"] .rank-chart{opacity:.35}
.fixture-label{display:block;margin-bottom:8px;font:700 10px/1.5 'DM Sans',Arial,sans-serif;letter-spacing:.06em;border:1px dashed var(--gold);border-radius:8px;padding:8px;color:var(--gold)}
.chart-axis,.chart-you-label{font-size:16px}
.heat-legend{display:flex;align-items:center;justify-content:center;gap:10px 16px;flex-wrap:wrap;margin:20px auto 10px;color:var(--muted);font-size:11px;line-height:1.8}
.heat-ramp{display:inline-block;width:110px;height:8px;border-radius:12px;background:linear-gradient(90deg,#41e197,#f5cf5d,#ff695b);box-shadow:0 0 0 1px var(--border)}
body.light .heat-ramp{background:linear-gradient(90deg,#1e7d52,#9c6a00,#bf382d)}
.heat-summary{max-width:700px;margin:10px auto 20px;line-height:1.8}
.rank-refresh,.chart-data summary{min-height:44px}
.chart-data summary{display:list-item;padding:12px 0}
a:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header,.hero,.hero-foot,.panel,.dialog,.metric,.results-list,.rank-card{background:linear-gradient(145deg,var(--glass-a),var(--glass-b));-webkit-backdrop-filter:blur(20px) saturate(120%);backdrop-filter:blur(20px) saturate(120%)}
}
@media(max-width:1000px){#home.active{grid-template-columns:1fr}.hero{min-height:550px}.hero h1{font-size:clamp(100px,18vw,175px)}.rank-card{max-width:780px;width:100%;margin:0 auto}.hero-foot{order:3}.rank-chart{max-width:650px;margin:auto}}
@media(max-width:700px){header{height:auto;min-height:76px;margin:12px 12px 0;padding:13px 16px;border-radius:21px;gap:10px;flex-wrap:wrap}.logo{font-size:26px}nav{gap:2px;width:100%;justify-content:space-between}nav button{padding:7px 6px;font-size:10px;min-height:38px}.theme{width:38px;min-width:38px;height:38px;margin-left:0}.screen{padding:22px 16px 40px}.hero{min-height:535px;padding:24px 14px;border-radius:25px}.hero h1{font-size:clamp(81px,20vw,135px)}.hero .tag{font-size:15px;letter-spacing:.18em}.hero .primary{padding:16px 18px;font-size:17px}.hero .eyebrow{font-size:9px}.step .name{font-size:9px}.step small{font-size:10px}.step .number{width:29px;height:29px;font-size:15px}.step:not(:last-child):after{top:15px}.panel,.trivia-panel{padding:24px 16px;border-radius:23px}.rank-card{padding:24px 20px;border-radius:23px}.rank-card h2{font-size:27px}.rank-count{font-size:10px;padding:7px 9px}.rank-copy{min-height:0}.canvas-wrap{border-radius:18px;padding:7px}.canvas-wrap canvas{border-radius:11px}.service-status{margin:12px 16px 0;padding:10px 14px;font-size:11px}.metric{padding:17px 15px}.results-list{padding:6px 18px}.result-row{font-size:13px}.result-row small{font-size:11px}.footer{padding:20px}.round-title h2{font-size:clamp(50px,12vw,75px)}.result-number{font-size:90px}.score-formula{font-size:13px}.headrow{gap:12px}.headrow .eyebrow{font-size:10px}.timer{font-size:24px;min-width:96px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after{transition:none!important;animation:none!important}
@media(max-width:700px){nav button,.theme{min-height:44px}.theme{height:44px;min-width:44px}}

/* Restore the original V5/V6 antique map background. */
body{background-color:var(--bg);background-image:radial-gradient(ellipse at 15% 30%,#a78a5210,transparent 65%);background-attachment:scroll}
.app:before{background:url('./atlas.svg') center 110px / max(1100px,100vw) auto repeat-y;opacity:.16;mask-image:linear-gradient(#000,#0009)}
body.light .app:before{opacity:.24}
.app:after{content:'BORDERLY ATLAS  /  FIELD EDITION';letter-spacing:.16em;opacity:.8}