:root{
--paper:#f7f6ee;
--ink:#192d2b;
--muted:#68766f;
--blue:#2459d3;
--mint:#dceccf;
--line:#d8ded2;
--white:#fffef8;
--orange:#ffb06c;
font-family:Arial,Helvetica,sans-serif;
color:var(--ink);
background:var(--paper);
font-synthesis:none}
*{
box-sizing:border-box}
body{
margin:0}
button,input,select,textarea{
font:inherit}
button,a,input,select{
-webkit-tap-highlight-color:transparent}
button,a{
touch-action:manipulation}
button{
cursor:pointer}
a{
color:inherit;
text-decoration:none}
button{
border:0}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
outline:3px solid var(--blue);
outline-offset:5px}
h1,h2,p{
margin:0}
h1:focus{
outline:none}
button{
transition:background .18s,transform .18s}
button:active{
transform:translateY(1px)}
[hidden]{
display:none!important}
.sr-only{
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip-path:inset(50%)}
.preview-bar{
background:var(--ink);
color:#ebefdf;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:10px max(24px,calc((100vw - 1240px)/2));
font-size:10px;
letter-spacing:1.5px}
.preview-note{
opacity:.65;
letter-spacing:.2px;
margin-left:10px}
.preview-bar nav{
display:flex;
gap:4px}
.preview-bar button{
color:#c8d2ca;
background:transparent;
padding:8px 12px;
border-radius:4px;
font-size:11px;
letter-spacing:.3px}
.preview-bar button[aria-pressed=true]{
background:#e3eccf;
color:var(--ink)}
.preview-bar button:hover{
background:#3d514a;
color:white}
.shell{
max-width:1288px;
margin:auto;
padding:0 36px}
.masthead{
height:110px;
display:flex;
align-items:center;
justify-content:space-between;
border-bottom:1px solid var(--line)}
.brand{
font-size:30px;
font-weight:800;
letter-spacing:-1.7px;
display:flex;
align-items:center}
.brand svg{
width:36px;
height:36px;
margin-right:11px;
fill:none;
stroke:var(--ink);
stroke-width:1.4}
.brand svg .brand-route{
stroke:var(--blue);
stroke-width:2.5}
.brand svg .brand-dot{
fill:var(--blue);
stroke:var(--paper)}
.brand-period{
color:var(--blue)}
.edition{
font-size:10px;
letter-spacing:2.2px;
color:var(--muted);
margin-left:20px}
.text-button{
background:none;
font-size:13px;
font-weight:600;
padding:12px 0}
.text-button span{
padding-left:16px;
font-size:18px}
.screen{
animation:arrive .35s ease-out}
.hero{
display:grid;
grid-template-columns:1fr 1.06fr;
gap:30px;
align-items:center;
min-height:620px;
padding:54px 0 50px}
.eyebrow{
font-size:10px;
font-weight:700;
letter-spacing:2px;
line-height:1.6}
.live-dot{
display:inline-block;
width:7px;
height:7px;
border-radius:50%;
background:var(--blue);
margin-right:8px;
vertical-align:1px}
.hero h1{
font-size:clamp(56px,6.3vw,84px);
font-weight:600;
letter-spacing:-5px;
line-height:1.04;
margin:26px 0}
.hero h1 em{
font-family:Georgia,'Times New Roman',serif;
font-weight:400;
color:var(--blue);
letter-spacing:-4px}
.intro{
font-size:16px;
line-height:1.8;
color:var(--muted);
max-width:410px}
.primary{
background:var(--blue);
color:white;
min-height:54px;
padding:17px 24px;
display:flex;
gap:40px;
align-items:center;
justify-content:space-between;
border-radius:7px;
font-size:14px;
font-weight:600}
.primary:hover{
background:#1747b4;
box-shadow:0 4px 12px #2459d31c}
.primary span{
font-size:22px;
line-height:16px}
.start-button{
margin-top:30px;
width:253px}
.micro{
font-size:11px;
color:var(--muted);
line-height:1.6;
margin-top:12px}
.hero-art{
height:500px;
position:relative;
display:grid;
place-items:center}
.atlas-globe{
width:100%;
max-width:520px;
filter:drop-shadow(0 22px 16px #294d3d15);
z-index:1}
.art-index,.art-bottom{
position:absolute;
font:9px monospace;
letter-spacing:1.1px;
color:var(--muted);
left:50%;
transform:translateX(-50%);
white-space:nowrap}
.art-index{
top:0}
.art-bottom{
bottom:0}
.orbit{
position:absolute;
width:105%;
height:51%;
border:1px solid #d9dfd0;
border-radius:50%;
transform:rotate(-29deg)}
.orbit-two{
width:91%;
height:106%;
transform:rotate(30deg);
border-style:dashed;
opacity:.65}
.map-tag{
position:absolute;
background:var(--white);
border:1px solid #dbe0d3;
box-shadow:0 8px 20px #233e3010;
border-radius:8px;
padding:14px 17px;
z-index:2;
min-width:145px}
.tag-a{
left:0;
top:49%;
transform:rotate(-5deg)}
.tag-b{
right:0;
top:21%;
transform:rotate(5deg)}
.tiny{
display:block;
font-size:9px;
letter-spacing:1.5px;
font-weight:700;
color:var(--muted);
line-height:1.6}
.map-tag strong{
font-size:24px;
display:flex;
justify-content:space-between;
gap:30px;
letter-spacing:-1px;
margin:4px 0 7px}
.map-tag strong span{
color:var(--blue)}
.map-tag small{
font:9px monospace;
color:var(--muted)}
.distance-sticker{
position:absolute;
z-index:3;
right:8%;
bottom:3%;
width:112px;
height:112px;
background:var(--orange);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
transform:rotate(12deg);
box-shadow:3px 6px 0 #192d2b0a}
.distance-sticker span{
font-size:8px;
font-weight:700;
letter-spacing:1.1px}
.distance-sticker strong{
font:italic 44px Georgia;
line-height:1}
.distance-sticker svg{
width:43px;
height:20px;
stroke:var(--ink);
fill:none;
stroke-width:1.6}
.trip-strip{
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
padding:28px 0;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:28px}
.trip-strip>div{
display:flex;
gap:18px;
align-items:center}
.step-number{
width:38px;
height:38px;
flex-shrink:0;
display:grid;
place-items:center;
border:1px solid #cdd7c5;
border-radius:50%;
font:11px monospace}
.trip-strip strong{
display:block;
font-size:13px;
margin-bottom:7px}
.trip-strip p>span{
font-size:11px;
color:var(--muted)}
footer{
display:flex;
align-items:center;
justify-content:space-between;
padding:28px 0;
font-size:11px;
font-weight:700}
footer a{
font-size:10px;
color:var(--muted);
font-weight:400}
.footer-tagline{
margin-left:16px;
color:var(--muted);
font-weight:400;
font-size:10px}
.blue{
color:var(--blue)}
.game-topline{
display:flex;
justify-content:space-between;
align-items:center;
gap:15px;
padding:28px 0}
.round-dots{
display:flex;
gap:7px}
.round-dots>*{
width:8px;
height:8px;
border-radius:50%;
background:#d7ddd0}
.round-dots b{
background:var(--blue)}
.score-small{
font-size:9px;
letter-spacing:1px;
color:var(--muted)}
.score-small strong{
font-size:20px;
color:var(--ink);
letter-spacing:-.5px;
padding-left:8px}
.score-small small{
font-size:10px;
letter-spacing:0}
.question-card{
max-width:840px;
margin:8px auto 0;
background:var(--white);
border:1px solid var(--line);
border-radius:12px;
padding:26px 54px 30px;
box-shadow:0 12px 35px #29433105}
.question-meta{
display:flex;
align-items:center;
justify-content:space-between}
.question-meta .eyebrow{
font-size:9px;
color:var(--muted)}
.question-heading{
text-align:center;
font-size:36px;
letter-spacing:-1.6px;
margin:20px 0 10px;
font-weight:600}
.subcopy{
font-size:14px;
line-height:1.7;
color:var(--muted)}
.question-card>.subcopy{
text-align:center}
.city-pair{
display:grid;
grid-template-columns:1fr 110px 1fr;
align-items:center;
text-align:center;
padding:48px 0 40px}
.city-pair h2{
font-size:47px;
letter-spacing:-2px;
font-weight:600;
margin:9px 0}
.city-caption{
font-size:10px;
color:var(--muted)}
.connection{
display:flex;
align-items:center;
gap:5px;
color:var(--blue)}
.connection div{
height:1px;
background:#becac1;
flex:1}
.connection b{
font-size:25px;
font-weight:400}
.connection>span{
font-size:12px}
#preview-form{
max-width:460px;
margin:auto}
.input-header{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:10px}
.input-header label{
font-size:9px;
letter-spacing:1.5px;
font-weight:700}
.input-header select{
border:0;
background:transparent;
font-size:11px;
color:var(--muted);
padding:6px}
.distance-field{
border:1px solid #b4c4b6;
border-radius:6px;
display:flex;
align-items:center;
gap:10px;
padding:0 18px;
background:var(--white)}
.distance-field:focus-within{
border-color:var(--blue);
box-shadow:0 0 0 3px #2459d313}
.distance-field input{
width:100%;
min-width:0;
padding:19px 0;
background:transparent;
border:0;
font-size:24px;
color:var(--ink);
outline:none}
.distance-field input::placeholder{
color:#8b978d;
font-size:20px}
.distance-field span{
font-size:14px;
color:var(--muted)}
#guess-error{
min-height:23px;
font-size:11px;
color:#a63824;
padding-top:5px}
#preview-form .primary{
width:100%}
.centered{
text-align:center}
.under-card{
text-align:center;
font-size:11px;
color:var(--muted);
margin:23px 0 30px}
.route-breadcrumb{
font-size:12px}
.route-breadcrumb span{
color:var(--blue);
margin:0 15px}
.reveal-layout{
display:grid;
grid-template-columns:1.15fr 1fr;
gap:64px;
align-items:center;
padding:20px 0 50px}
.globe-panel{
background:#071f25;
border-radius:12px;
padding:25px 22px 20px;
overflow:hidden;
color:#d0e4d6}
.globe-panel>.eyebrow{
font-size:9px;
color:#b6c9bd}
.globe-panel #globeViz{
height:380px;
margin:18px -10px 0}
.globe-panel #globe-status{
font-size:11px;
line-height:1.6;
color:#c5d5ce}
.globe-caption{
display:flex;
justify-content:space-between;
gap:10px;
font:9px monospace;
color:#bbd1c5;
padding-top:18px;
border-top:1px solid #ffffff20}
.pill{
display:inline-block;
background:var(--mint);
border:1px solid #cbdcb8;
color:#385134;
border-radius:20px;
padding:8px 12px;
font-size:9px;
letter-spacing:1.1px;
font-weight:700}
.reveal-copy h1{
font-size:64px;
letter-spacing:-3px;
line-height:1.05;
margin:20px 0 18px;
font-weight:500;
max-width:380px}
.reveal-copy>.subcopy{
max-width:340px}
.answer-block{
padding:26px 0 20px}
.answer-block>strong{
display:block;
font-size:45px;
font-weight:500;
letter-spacing:-1.5px;
margin-top:7px;
font-variant-numeric:tabular-nums}
.answer-block small{
font-size:19px;
color:var(--muted);
font-weight:400;
letter-spacing:0}
.answer-stats{
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
display:grid;
grid-template-columns:1fr 1fr;
padding:19px 0;
margin-bottom:24px;
gap:20px}
.answer-stats strong{
display:block;
font-size:21px;
font-weight:500;
margin-top:8px}
.answer-stats small{
font-size:14px;
color:var(--muted)}
.reveal-copy>.primary{
width:100%}
.results-heading{
text-align:center;
padding:42px 0 35px}
.results-heading h1{
font-size:48px;
letter-spacing:-2px;
font-weight:500;
margin:16px 0 13px}
.results-layout{
display:grid;
grid-template-columns:.95fr 1.2fr;
gap:64px;
align-items:center;
max-width:1060px;
margin:0 auto 45px}
.score-ticket{
background:#e4eddb;
border:1px solid #c8d6bf;
border-radius:10px;
padding:22px 26px;
text-align:center;
position:relative;
overflow:hidden}
.ticket-top{
display:flex;
justify-content:space-between;
border-bottom:1px solid #bccbb7;
padding-bottom:20px;
font:9px monospace;
letter-spacing:1px;
margin-bottom:28px}
.ticket-top>span:last-child{
font-size:19px}
.big-score{
display:block;
font-size:102px;
letter-spacing:-7px;
line-height:1;
margin:10px 0 20px;
font-weight:500}
.big-score>span{
display:block;
font-size:14px;
letter-spacing:0;
margin-top:14px;
color:var(--muted)}
.score-ticket .pill{
background:transparent;
border-color:#b9cbb0}
.score-grid{
display:flex;
gap:7px;
justify-content:center;
margin:26px 0}
.score-grid>span{
background:#aec59b;
width:52px;
height:54px;
border-radius:4px;
display:grid;
place-items:center;
align-content:center;
gap:2px;
font:10px monospace}
.score-grid>span strong{
font:600 11px monospace}
.score-grid>span small{
font:8px monospace;
opacity:.8}
.score-grid>span:nth-child(3){
background:var(--blue);
color:white}
.score-grid>span:nth-child(4){
background:#edd5a7}
.ticket-bottom{
display:flex;
justify-content:space-between;
font:7px monospace;
letter-spacing:.3px;
border-top:1px dashed #aebfa6;
padding-top:20px;
margin-top:14px}
.recap-heading{
display:flex;
justify-content:space-between;
align-items:center}
.recap-heading h2{
font-size:22px;
font-weight:500;
letter-spacing:-.6px}
.recap-heading .tiny{
font-size:8px}
.recap ol{
list-style:none;
padding:0;
margin:16px 0 24px}
.recap li{
display:flex;
gap:17px;
align-items:center;
border-bottom:1px solid var(--line);
padding:18px 0}
.recap li>span{
font:10px monospace;
color:var(--muted)}
.recap li p{
font-size:13px;
flex:1}
.recap li b{
color:#849788;
font-weight:400;
margin:0 10px}
.recap li strong{
font-size:13px;
font-weight:500}
.recap li small{
font-size:9px;
color:var(--muted);
font-weight:400}
.result-actions{
display:grid;
grid-template-columns:1fr 1.2fr;
gap:10px}
.result-actions button{
font-size:12px;
padding:15px;
gap:10px}
.secondary{
background:transparent;
border:1px solid #b9c7b5;
color:var(--ink);
border-radius:6px;
display:flex;
align-items:center;
justify-content:space-between}
.secondary:hover{
background:#e5ecde}
textarea{
width:100%;
padding:10px;
margin-top:10px;
border:1px solid var(--line);
border-radius:5px}
dialog{
max-width:470px;
width:calc(100% - 32px);
border:1px solid var(--line);
border-radius:14px;
background:var(--paper);
color:var(--ink);
padding:35px}
dialog::backdrop{
background:#132d2bc0;
backdrop-filter:blur(5px)}
dialog h2{
font-size:35px;
line-height:1.1;
letter-spacing:-1px;
font-weight:500;
margin:20px 0}
dialog ol{
padding-left:20px;
font-size:13px;
line-height:1.8}
dialog li{
padding:6px 0}
dialog .primary{
margin-top:20px;
width:100%;
gap:10px}
.close{
position:absolute;
right:16px;
top:12px;
background:none;
font-size:27px;
color:var(--muted);
width:36px;
height:36px}
@keyframes arrive{
from{
opacity:0;
transform:translateY(5px)}
to{
opacity:1;
transform:translateY(0)}
}
@media(min-width:1450px){
.hero{
min-height:690px}
.hero-art{
height:540px}
}
@media(max-width:1000px){
.shell{
padding:0 28px}
.edition{
display:none}
.hero{
gap:0;
min-height:560px}
.hero h1{
font-size:64px;
letter-spacing:-3.5px}
.intro{
font-size:14px}
.hero-art{
height:410px}
.map-tag{
min-width:125px;
padding:11px}
.map-tag strong{
font-size:21px}
.tag-a{
left:0}
.tag-b{
right:-8px}
.distance-sticker{
width:90px;
height:90px;
bottom:0}
.distance-sticker strong{
font-size:35px}
.art-bottom{
display:none}
.trip-strip{
gap:16px}
.trip-strip>div{
gap:10px;
align-items:flex-start}
.trip-strip p>span{
line-height:1.6;
display:block}
.reveal-layout,.results-layout{
gap:32px}
.reveal-copy h1{
font-size:52px}
.globe-caption{
font-size:8px}
.result-actions{
grid-template-columns:1fr}
.big-score{
font-size:85px}
}
@media(max-width:700px){
.preview-bar{
padding:9px 16px;
flex-wrap:wrap;
justify-content:center;
gap:6px}
.preview-bar>span{
font-size:9px}
.preview-bar nav{
width:100%;
justify-content:center}
.preview-bar button{
padding:8px 14px}
.shell{
padding:0 22px}
.masthead{
height:83px}
.brand{
font-size:26px}
.brand svg{
width:30px;
height:30px}
.text-button{
font-size:11px}
.text-button span{
padding-left:6px}
.hero{
grid-template-columns:1fr;
padding:36px 0 30px;
gap:32px}
.hero-copy{
text-align:center}
.hero h1{
font-size:66px;
letter-spacing:-3.8px;
margin:20px 0}
.hero h1 em{
letter-spacing:-3px}
.hero .eyebrow{
font-size:8px;
letter-spacing:1.8px}
.intro{
margin:auto;
font-size:13px}
.start-button{
margin:24px auto 0;
width:100%;
max-width:330px}
.hero-art{
height:345px;
max-width:440px;
width:100%;
margin:auto}
.atlas-globe{
max-width:365px}
.art-index{
font-size:7px;
top:-3px}
.map-tag{
min-width:115px;
padding:11px}
.map-tag strong{
font-size:20px;
gap:20px}
.map-tag .tiny{
font-size:7px}
.map-tag small{
font-size:7px}
.tag-a{
left:0}
.tag-b{
right:0}
.distance-sticker{
right:7%;
bottom:0;
width:80px;
height:80px}
.distance-sticker span{
font-size:6px}
.distance-sticker strong{
font-size:32px}
.trip-strip{
grid-template-columns:1fr;
padding:23px 0;
gap:20px}
.trip-strip>div{
gap:15px;
align-items:center}
.trip-strip strong{
margin-bottom:3px}
.trip-strip p>span{
font-size:11px}
.step-number{
width:32px;
height:32px}
footer{
padding:23px 0;
align-items:flex-start;
gap:10px}
.footer-tagline{
display:block;
margin:7px 0 0;
font-size:8px}
footer a{
font-size:9px;
padding-top:2px}
.game-topline{
padding:22px 0}
.game-topline .eyebrow{
font-size:8px;
letter-spacing:1px}
.round-dots{
display:none}
.score-small strong{
font-size:18px}
.question-card{
padding:20px 18px}
.question-meta .eyebrow{
font-size:7px;
letter-spacing:1px}
.question-heading{
font-size:28px;
letter-spacing:-1px;
margin-top:25px}
.question-card>.subcopy{
font-size:12px}
.city-pair{
grid-template-columns:1fr 40px 1fr;
padding:34px 0 28px}
.city-pair .tiny{
font-size:7px;
letter-spacing:.8px}
.city-pair h2{
font-size:36px;
letter-spacing:-1.5px}
.city-caption{
display:none}
.connection{
gap:2px}
.connection b{
font-size:22px}
.connection>span{
display:none}
.input-header label{
font-size:8px}
.distance-field input{
font-size:22px}
.distance-field input::placeholder{
font-size:17px}
.micro{
font-size:10px}
.under-card{
font-size:10px;
line-height:1.6}
.route-breadcrumb{
display:none}
.reveal-layout{
grid-template-columns:1fr;
gap:28px;
padding-top:5px}
.globe-panel{
padding:20px 16px 15px}
.globe-panel #globeViz{
height:300px}
.globe-panel>.eyebrow{
font-size:8px}
.reveal-copy h1{
font-size:49px;
letter-spacing:-2px;
margin:15px 0}
.reveal-copy>.subcopy{
max-width:none}
.answer-block{
padding-top:20px}
.answer-block>strong{
font-size:42px}
.answer-stats strong{
font-size:20px}
.results-heading{
padding:30px 0}
.results-heading .eyebrow{
font-size:8px;
letter-spacing:1px}
.results-heading h1{
font-size:37px;
letter-spacing:-1.5px}
.results-heading .subcopy{
font-size:12px}
.results-layout{
grid-template-columns:1fr;
gap:32px;
margin-bottom:25px}
.score-ticket{
padding:20px}
.big-score{
font-size:95px}
.recap-heading h2{
font-size:21px}
.recap li{
gap:12px}
.recap li p{
font-size:12px}
.recap li b{
margin:0 5px}
.result-actions{
grid-template-columns:1fr 1.2fr}
.result-actions button{
font-size:11px;
padding:13px}
.result-actions .primary span{
font-size:18px}
.orbit{
width:99%}
.orbit-two{
height:98%}
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{
animation:none!important;
transition:none!important;
scroll-behavior:auto!important}
}
/* Keep decorative orbits inside the page and the primary action visible on shorter desktops. */
.orbit-one{
width:94%;
height:45%}
.orbit-two{
width:70%;
height:90%}
@media(min-width:701px) and (max-height:800px){
.masthead{
height:90px}
.hero{
min-height:540px;
padding:35px 0}
.hero-art{
height:440px}
.hero h1{
font-size:72px}
.game-topline{
padding:21px 0}
.question-card{
padding:20px 42px}
.question-heading{
font-size:30px;
margin:12px 0 8px}
.city-pair{
padding:25px 0}
.city-pair h2{
font-size:41px}
.distance-field input{
padding:15px 0}
.under-card{
margin:18px 0}
.reveal-layout{
padding-top:8px}
.results-heading{
padding:28px 0}
.results-heading h1{
font-size:42px}
.score-ticket{
padding:18px 24px}
.ticket-top{
margin-bottom:20px}
.big-score{
font-size:86px}
.score-grid{
margin:20px 0}
.recap li{
padding:15px 0}
}
@media(max-width:700px){
.hero h1{
font-size:clamp(45px,14.5vw,62px);
letter-spacing:-3px}
}
/* Live game: responsive controls and content, designed for phone browsers. */
.hidden {
display: none !important;
}
body {
min-width: 280px;
}
button, select, .brand {
min-height: 44px;
}
button:disabled {
opacity: .6;
cursor: wait;
transform: none;
}
button.primary > #next-label {
font-size: 14px;
line-height: 1.3;
}
.welcome-units {
display: flex;
align-items: center;
gap: 14px;
margin-top: 22px;
font-size: 12px;
color: var(--muted);
}
.welcome-units select {
border: 1px solid var(--line);
background: var(--white);
color: var(--ink);
border-radius: 6px;
padding: 8px 12px;
font-size: 16px;
}
.start-button {
margin-top: 14px;
}
.mode-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
}
.mode-actions .start-button {
width: auto;
margin: 0;
min-height: 54px;
gap: 16px;
padding: 14px 18px;
}
.mode-actions .secondary {
font-weight: 600;
}
.result-actions {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 700px) {
.mode-actions {
max-width: 330px;
margin: 14px auto 0;
flex-direction: column;
}
.mode-actions .start-button {
width: 100%;
}
.result-actions {
grid-template-columns: 1fr;
}
}
#load-status {
font-size: 13px;
line-height: 1.6;
margin-top: 12px;
}
#retry-btn {
padding: 12px 22px;
margin-top: 12px;
}
.city-pair {
grid-template-columns: minmax(0,1fr) 70px minmax(0,1fr);
gap: 10px;
}
.city-pair h2 {
overflow-wrap: anywhere;
hyphens: auto;
font-size: clamp(25px,3.6vw,46px);
}
.city-pair .tiny {
overflow-wrap: anywhere;
text-transform: uppercase;
}
#guess-form {
max-width: 460px;
margin: auto;
scroll-margin-bottom: 16px;
}
#guess-form .primary {
width: 100%;
min-height: 52px;
}
#guess-error {
min-height: 24px;
padding-top: 5px;
color: #a03320;
font-size: 12px;
}
.input-header select {
font-size: 16px;
max-width: 65%;
min-height: 44px;
}
.distance-field input {
font-size: 24px;
}
.distance-field:has([aria-invalid="true"]) {
border-color: #a03320;
}
#route-breadcrumb {
display: block;
font-size: 14px;
line-height: 1.6;
overflow-wrap: anywhere;
}
.reveal-layout {
align-items: start;
}
.reveal-copy {
min-width: 0;
}
.reveal-copy h1 {
font-size: clamp(38px,5vw,60px);
overflow-wrap: anywhere;
}
.answer-stats strong, #actual {
overflow-wrap: anywhere;
}
#next-btn {
width: 100%;
}
#final-score {
display: block;
font: inherit;
letter-spacing: inherit;
color: inherit;
margin: 0;
}
#score-grid > span {
background: #e5c9b9;
color: #583525;
}
#score-grid .tier-excellent {
background: #aec59b;
color: #243923;
}
#score-grid .tier-great {
background: #c6d8f4;
color: #173e7d;
}
#score-grid .tier-good {
background: #e5daa6;
color: #55451b;
}
#score-grid .tier-learning {
background: #edcca6;
color: #633f17;
}
.recap li {
align-items: start;
}
.recap li .journal-route {
flex: 1;
min-width: 0;
}
.recap li .journal-route p {
overflow-wrap: anywhere;
line-height: 1.6;
}
.journal-detail {
display: block;
font-size: 11px;
color: var(--muted);
line-height: 1.7;
margin-top: 5px;
overflow-wrap: anywhere;
}
.recap li > strong {
white-space: nowrap;
padding-top: 3px;
}
.footer-note {
font-size: 10px;
color: var(--muted);
font-weight: 400;
}
.close {
width: 44px;
height: 44px;
}
.shell {
padding-left: max(22px,env(safe-area-inset-left));
padding-right: max(22px,env(safe-area-inset-right));
padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width:701px) {
.shell {
padding-left:36px;
padding-right:36px;
}
}
@media (max-width:700px) {
.masthead {
height: 72px;
}
.text-button {
padding: 10px 0 10px 10px;
}
.welcome-units {
justify-content: center;
margin-top: 18px;
}
.hero {
padding-top: 25px;
}
.hero h1 {
margin-top: 14px;
margin-bottom: 15px;
}
.hero-art {
margin-top: 5px;
}
.game-topline {
padding: 18px 0;
}
.question-card {
padding: 16px;
margin-top: 0;
}
.question-heading {
font-size: 26px;
margin-top: 18px;
}
.city-pair {
grid-template-columns: minmax(0,1fr) 26px minmax(0,1fr);
gap: 5px;
padding: 23px 0 18px;
}
.city-pair h2 {
font-size: clamp(24px,7.5vw,34px);
letter-spacing: -1px;
line-height: 1.15;
}
.city-pair .tiny {
font-size: 9px;
letter-spacing: .7px;
}
.distance-field input {
padding: 14px 0;
}
.input-header {
margin-bottom: 5px;
}
.input-header label {
font-size: 10px;
letter-spacing: .7px;
}
.under-card {
font-size: 11px;
margin: 16px 0;
}
.reveal-layout {
display: flex;
flex-direction: column;
gap: 22px;
padding-bottom: 25px;
}
.reveal-copy {
order: -1;
width: 100%;
}
.reveal-copy h1 {
font-size: 39px;
margin: 13px 0 10px;
}
.reveal-copy .pill {
display: none;
}
.answer-block {
padding: 18px 0 15px;
}
.answer-block > strong {
font-size: 40px;
}
.answer-stats {
padding: 15px 0;
margin-bottom: 18px;
}
.globe-panel {
width: 100%;
}
.globe-panel #globeViz {
height: 285px;
}
.results-heading {
padding: 25px 0;
}
.results-heading h1 {
font-size: 33px;
}
.score-ticket {
padding: 18px 20px;
}
.ticket-top {
margin-bottom: 18px;
padding-bottom: 15px;
}
.big-score {
font-size: 78px;
margin: 8px 0 15px;
}
.score-grid {
margin: 18px 0;
}
.result-actions {
grid-template-columns: 1fr 1fr;
}
.result-actions button {
min-height: 52px;
font-size: 13px;
}
.recap li p {
font-size: 13px;
}
footer {
align-items: start;
padding-top: 20px;
}
.footer-note {
max-width: 105px;
text-align: right;
line-height: 1.6;
}
/* Focus scrolls to the estimate;
keep the form compact when the keyboard reduces the viewport. */
#guess-form:focus-within {
scroll-margin-top: 12px;
}
#guess.screen {
animation: none;
}
}
@media (max-width:360px) {
.shell {
padding-left: max(14px,env(safe-area-inset-left));
padding-right: max(14px,env(safe-area-inset-right));
}
.brand {
font-size:24px;
}
.question-card {
padding:14px;
}
.input-header select {
font-size:16px;
padding-left:4px;
padding-right:4px;
}
.question-heading {
font-size:24px;
}
.hero h1 {
font-size:46px;
}
}
@media (max-width:700px) {
.text-button {
font-size: 13px;
}
.intro {
font-size: 15px;
}
.welcome-units {
font-size: 14px;
}
.micro {
font-size: 12px;
}
.question-card > .subcopy {
font-size: 14px;
}
.city-pair .tiny {
font-size: 11px;
}
.answer-stats .tiny, .answer-block .tiny {
font-size: 11px;
}
.input-header label {
font-size: 11px;
}
.under-card {
font-size: 12px;
}
dialog ol {
font-size: 15px;
}
dialog {
max-height: calc(100dvh - 32px);
overflow: auto;
padding: 28px 24px;
}
}

@media (max-width: 400px) {
.city-pair {
grid-template-columns: minmax(0, 1fr);
gap: 4px;
text-align: left;
}

.city-pair h2 {
font-size: 26px;
overflow-wrap: normal;
hyphens: none;
margin: 4px 0;
}

.connection {
height: 24px;
}
}

@media (max-width: 340px) {
.orbit-two {
height: 70%;
}
}

@media (max-width: 700px) {
.result-actions {
grid-template-columns: 1fr;
}
}
.result-actions [hidden] {
display: none;
}

.summary-globe-panel { margin: 0 0 32px; text-align: center; }
.summary-globe-panel h2 { margin: 0 0 8px; color: #f7f6ee; }
.summary-globe-panel > p { color: #d0ded8; font-size: 14px; padding: 0 16px; }
#summary-globe { height: clamp(280px, 55vw, 460px); width: 100%; cursor: grab; touch-action: none; }
.globe-controls { display: flex; gap: 10px; justify-content: center; padding: 12px; }
.globe-controls button { min-width: 48px; min-height: 44px; background: #f7f6ee; }
.about-copy { max-width: 760px; margin: 50px auto; line-height: 1.7; }
.about-copy h2 { margin-top: 28px; }