:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --paper: #eaf3f8; --ink: #17374a; --muted: #4a687a; --blue: #176f9a; --deep: #10445f; --line: #c7dce5; --white: #fff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: radial-gradient(ellipse at 50% 0, #fff 0, var(--paper) 58%); color: var(--ink); }
a { color: inherit; }
.skip { position: absolute; left: -9999px; top: 1rem; z-index: 3; padding: .7rem 1rem; border-radius: .5rem; background: var(--white); }
.skip:focus { left: 1rem; }
.atlas-header, .atlas-footer { width: min(100%, 62rem); margin: 0 auto; padding: 1rem 1.2rem; display: flex; align-items: center; justify-content: space-between; }
.atlas-brand { display: inline-flex; align-items: center; gap: .65rem; font-weight: 900; text-decoration: none; }
.atlas-mark { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: .65rem; background: var(--deep); color: #fff; }
.atlas-home { min-height: 44px; display: inline-flex; align-items: center; padding: .3rem .8rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); text-decoration: none; }
.atlas-home:hover, .atlas-home:focus-visible { border-color: var(--blue); color: var(--deep); }
.atlas-main { width: min(100%, 62rem); margin: auto; padding: .7rem 1.2rem 2rem; }
.atlas-intro { padding: .6rem 0 1.1rem; }
.atlas-kicker { margin: 0 0 .35rem; color: var(--blue); font-size: .73rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
h1 { max-width: 42rem; margin: 0; font-size: clamp(2.35rem, 8vw, 4rem); letter-spacing: -.06em; line-height: 1.02; }
h1 span { color: var(--blue); }
.atlas-intro > p:last-child { max-width: 38rem; margin: .65rem 0 0; color: var(--muted); line-height: 1.55; }
.atlas-card { padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid var(--line); border-radius: 1.3rem; background: var(--white); box-shadow: 0 18px 48px #17374a12; }
.round-meta { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: .85rem; font-weight: 750; }
.progress-track { height: .5rem; margin: .55rem 0 1.1rem; overflow: hidden; border-radius: 999px; background: #dceaf0; }
.progress-track span { display: block; width: 20%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #55b4cf, var(--blue)); transition: width .2s ease; }
.prompt-row { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
h2 { margin: 0; font-size: clamp(1.55rem, 5vw, 2.2rem); letter-spacing: -.035em; }
.clue { max-width: 20rem; margin: 0 0 .15rem; color: var(--muted); text-align: right; line-height: 1.4; }
.map-frame { overflow: hidden; border: 1px solid #b8d1dc; border-radius: 1rem; background: #d9edf5; }
#world-map { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; cursor: crosshair; outline-offset: 3px; touch-action: manipulation; }
#world-map:focus-visible { outline: 3px solid #145b7d; }
.ocean { fill: #d9edf5; }
.land { fill: #80b89e; stroke: #5e9c81; stroke-width: 2; stroke-linejoin: round; }
.guess-dot { fill: #e57c42; stroke: #fff; stroke-width: 5; }
.answer-dot { fill: #125875; stroke: #fff; stroke-width: 5; }
.answer-line { stroke: #17445d; stroke-width: 3; stroke-dasharray: 8 6; }
.map-help { margin: 0; padding: .65rem .8rem; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.feedback { margin: .85rem 0 .15rem; padding: .8rem 1rem; border-radius: .75rem; background: #edf6f7; color: var(--deep); font-weight: 750; line-height: 1.45; }
.atlas-button { min-height: 48px; margin-top: .8rem; padding: .7rem 1.15rem; border: 0; border-radius: 999px; background: var(--deep); color: #fff; font: inherit; font-weight: 850; cursor: pointer; }
.atlas-button:disabled { background: #859ba5; cursor: not-allowed; }
.atlas-button:not(:disabled):hover { background: var(--blue); }
.result-card { text-align: center; }
.result-score { margin: .5rem 0; color: var(--blue); font-size: clamp(3.5rem, 18vw, 5.5rem); font-weight: 950; letter-spacing: -.07em; line-height: 1; }
.result-note { max-width: 34rem; margin: .5rem auto; color: var(--muted); line-height: 1.5; }
.atlas-footer { margin-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .84rem; }
[hidden] { display: none !important; }
@media (max-width: 38rem) { .atlas-header, .atlas-footer { padding-right: .9rem; padding-left: .9rem; } .atlas-main { padding: .45rem .7rem 1.2rem; } .atlas-card { padding: .8rem; border-radius: 1rem; } .prompt-row { align-items: start; flex-direction: column; gap: .35rem; } .clue { margin: 0; text-align: left; } .map-frame { margin-right: -.1rem; margin-left: -.1rem; } .map-help { font-size: .74rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }