@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600;700;800;900&display=swap');

:root { --ink:#11130f; --paper:#f3f1e8; --lime:#dfff42; --muted:#74776c; --line:rgba(17,19,15,.15); --safe-bottom:env(safe-area-inset-bottom,0px); }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:var(--paper); color:var(--ink); font-family:Inter,system-ui,sans-serif; }
body { overflow-x:hidden; }
button, input { font:inherit; }
button { color:inherit; }
#app { min-height:100dvh; }
.site-watermark { position:fixed; z-index:850; right:12px; bottom:calc(84px + var(--safe-bottom)); display:grid; place-items:center; width:118px; min-height:40px; padding:7px 9px; border:1px solid var(--ink); background:white; box-shadow:3px 3px 0 var(--ink); pointer-events:none; }
.site-watermark img { display:block; width:100%; height:auto; }
body:has(.bottom-nav[hidden]) .site-watermark { bottom:calc(16px + var(--safe-bottom)); }
.screen { min-height:100dvh; padding-bottom:calc(92px + var(--safe-bottom)); }
.kicker { margin:0 0 12px; font:500 11px/1.2 "DM Mono",monospace; letter-spacing:.16em; }
h1,h2,p { margin-top:0; }
.button { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:58px; padding:0 20px; border:1px solid var(--ink); border-radius:0; background:transparent; font-weight:800; letter-spacing:.04em; cursor:pointer; }
.button.primary { background:var(--lime); }
.button.dark { background:var(--ink); color:white; }
.button.secondary { justify-content:center; margin-top:10px; background:transparent; }
.button:disabled { border-color:#c9c8c0; background:#deddd5; color:#888a82; cursor:not-allowed; }
.icon-button { width:44px; height:44px; border:0; background:none; font-size:24px; cursor:pointer; }
.icon-button.quiet { font-size:17px; }
.app-header { position:relative; z-index:500; display:grid; grid-template-columns:48px minmax(0,1fr) auto 48px; align-items:center; min-height:64px; padding:env(safe-area-inset-top,0) 8px 0; border-bottom:1px solid var(--line); background:rgba(243,241,232,.94); backdrop-filter:blur(10px); }
.app-header p { margin:0; text-align:center; font:500 11px "DM Mono",monospace; letter-spacing:.16em; }
.language-switcher { display:flex; align-items:center; gap:1px; padding:2px; border:1px solid var(--line); background:rgba(243,241,232,.78); }
.language-switcher button { display:grid; place-items:center; width:27px; height:28px; padding:0; border:0; background:transparent; color:#777a70; font:600 8px "DM Mono",monospace; }
.language-switcher button.active { background:var(--lime); color:var(--ink); }
.password-screen > .language-switcher,.home-screen > .language-switcher,.intro-screen > .language-switcher,.discovered-screen > .language-switcher,.quiz-screen > .language-switcher,.quiz-result-screen > .language-switcher { position:absolute; z-index:5; top:calc(72px + env(safe-area-inset-top,0px)); right:24px; border-color:#55584e; background:#1b1d18; }
.password-screen > .language-switcher button,.home-screen > .language-switcher button,.intro-screen > .language-switcher button,.discovered-screen > .language-switcher button,.quiz-screen > .language-switcher button,.quiz-result-screen > .language-switcher button { color:#bfc1b8; }
.password-screen > .language-switcher button.active,.home-screen > .language-switcher button.active,.intro-screen > .language-switcher button.active,.discovered-screen > .language-switcher button.active,.quiz-screen > .language-switcher button.active,.quiz-result-screen > .language-switcher button.active { color:var(--ink); }
.home-screen,.password-screen,.intro-screen,.discovered-screen,.quiz-screen,.quiz-result-screen { position:relative; }
.bottom-nav { position:fixed; z-index:900; bottom:0; left:0; right:0; height:calc(72px + var(--safe-bottom)); padding:8px 20px var(--safe-bottom); border-top:1px solid var(--line); background:rgba(243,241,232,.96); backdrop-filter:blur(12px); }
.bottom-nav:not([hidden]) { display:grid; grid-template-columns:1fr 1fr; }
.bottom-nav button { border:0; background:none; color:#87897f; font:500 10px "DM Mono",monospace; letter-spacing:.08em; }
.bottom-nav span { display:block; margin-bottom:4px; font-size:23px; }
.bottom-nav button.active { color:var(--ink); }

.home-screen { display:flex; flex-direction:column; justify-content:space-between; min-height:100dvh; padding:calc(32px + env(safe-area-inset-top,0px)) 24px calc(24px + var(--safe-bottom)); background:var(--ink); color:white; }
.brand-lockup { display:flex; align-items:center; min-height:54px; cursor:pointer; }
.brand-logo { display:block; width:min(100%,290px); height:auto; filter:invert(1); }
.home-copy { padding:12vh 0 8vh; }
.home-copy h1 { margin:0 0 28px; font-size:clamp(48px,15vw,74px); line-height:.85; letter-spacing:-.075em; }
.home-copy > p:last-child { color:#bfc1b8; font-size:18px; line-height:1.55; }
.home-screen .button { border-color:var(--lime); color:var(--ink); }
.home-screen small { display:block; margin-top:14px; color:#777a70; text-align:center; font:400 10px "DM Mono",monospace; }
.routes-home { justify-content:flex-start; overflow:auto; }
.routes-home .home-copy { padding:9vh 0 5vh; }
.route-choice-list { display:grid; gap:12px; width:100%; }
.route-choice { display:grid; grid-template-columns:32px 1fr; gap:12px; padding:20px; border:1px solid #5a5d53; background:#171914; }
.route-choice > span { color:var(--lime); font:500 10px "DM Mono",monospace; }
.route-choice h2 { margin:0 0 7px; color:white; font-size:25px; letter-spacing:-.045em; }
.route-choice p { margin:0; color:#aeb0a7; font-size:12px; line-height:1.45; }
.route-choice .button { grid-column:1 / -1; min-height:50px; margin-top:7px; text-decoration:none; font-size:11px; }
.route-choice .button.dark { border-color:#777a70; color:white; }
.fountain-choice { border-color:#6a7777; }
.password-screen { display:flex; flex-direction:column; justify-content:space-between; min-height:100dvh; padding:calc(30px + env(safe-area-inset-top,0px)) 24px calc(24px + var(--safe-bottom)); background:var(--ink); color:white; }
.password-mark { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; color:#8d9085; font:500 9px "DM Mono",monospace; letter-spacing:.1em; }
.password-mark a { color:inherit; text-decoration:none; }
.password-mark i { color:var(--lime); font-size:30px; font-style:normal; }
.password-mark span:last-child { min-width:48px; text-align:right; white-space:nowrap; }
.password-copy { margin:auto 0; }
.password-copy h1 { margin:0 0 24px; font-size:clamp(46px,14vw,68px); line-height:.86; letter-spacing:-.075em; }
.password-copy > p:not(.kicker) { margin-bottom:34px; color:#bfc1b8; font-size:17px; line-height:1.55; }
.password-form label { display:block; margin-bottom:9px; color:#a6a99d; font:500 9px "DM Mono",monospace; letter-spacing:.14em; }
.password-form input { width:100%; height:58px; padding:0 16px; border:1px solid #676a5f; border-radius:0; outline:none; background:#1b1d18; color:white; font:600 22px "DM Mono",monospace; letter-spacing:.16em; }
.password-form input:focus { border-color:var(--lime); box-shadow:0 0 0 1px var(--lime); }
.password-form .button { margin-top:12px; color:var(--ink); }
.password-error { margin:12px 0 0!important; color:#ff806f!important; font:500 10px "DM Mono",monospace!important; letter-spacing:.06em; }
.password-screen > small { color:#686b61; text-align:center; font:400 9px "DM Mono",monospace; letter-spacing:.1em; }
.dev-password-screen { background:#07110d; }
.dev-password-screen .password-mark i,.dev-password-screen .kicker { color:#72ffb6; }
.dev-password-screen .button.primary { border-color:#72ffb6; background:#72ffb6; }

.intro-screen { display:flex; flex-direction:column; justify-content:space-between; min-height:100dvh; padding:calc(28px + env(safe-area-inset-top,0px)) 24px calc(26px + var(--safe-bottom)); overflow:hidden; background:var(--ink); color:white; }
.intro-screen::before { content:""; position:absolute; width:min(92vw,620px); aspect-ratio:1; top:48%; left:58%; transform:translate(-50%,-50%); border:1px solid #34372f; border-radius:50%; box-shadow:0 0 0 54px #171914,0 0 0 55px #292c25; pointer-events:none; animation:introOrbit 9s linear infinite; }
.intro-top,.intro-stage,.intro-controls { position:relative; z-index:1; }
.intro-top { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.intro-top .brand-logo { width:min(48vw,220px); }
.intro-screen > .language-switcher { top:calc(86px + env(safe-area-inset-top,0px)); }
.intro-skip { display:flex; align-items:center; gap:10px; min-height:42px; padding:0 12px; border:1px solid #5d6057; background:transparent; color:#d2d4cd; font:600 10px "DM Mono",monospace; letter-spacing:.1em; cursor:pointer; }
.intro-stage { width:min(100%,630px); margin:auto 0; padding:9vh 0 5vh; animation:introEnter .58s cubic-bezier(.22,.8,.25,1) both; }
.intro-visual { position:relative; display:grid; place-items:center; width:118px; height:118px; margin-bottom:44px; border:1px solid #565a4e; background:#171914; }
.intro-visual::after { content:""; position:absolute; inset:9px; border:1px solid var(--lime); opacity:.52; }
.intro-visual span { position:absolute; top:9px; left:11px; color:#8d9085; font:500 9px "DM Mono",monospace; letter-spacing:.1em; }
.intro-visual strong { color:var(--lime); font-size:50px; line-height:1; }
.intro-stage h1 { max-width:650px; margin:0 0 22px; font-size:clamp(48px,13vw,86px); line-height:.88; letter-spacing:-.075em; }
.intro-stage > p:last-child { max-width:560px; margin:0; color:#bfc1b8; font-size:17px; line-height:1.55; }
.intro-controls { display:grid; gap:18px; }
.intro-controls .button { border-color:var(--lime); color:var(--ink); }
.intro-progress { display:flex; gap:8px; }
.intro-progress span { width:34px; height:3px; background:#484b42; overflow:hidden; }
.intro-progress span.active { background:var(--lime); animation:introProgress 5.2s linear both; transform-origin:left; }
@keyframes introEnter { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } }
@keyframes introOrbit { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes introProgress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@media (prefers-reduced-motion:reduce) { .intro-screen::before,.intro-stage,.intro-progress span.active { animation:none; } }

@media (min-width:760px) {
  .site-watermark { right:20px; width:148px; padding:8px 11px; }
}

.map-screen { background:var(--paper); }
.map-stage { position:relative; }
#map { height:56dvh; min-height:390px; background:#dddcd2; }
.leaflet-container { font-family:Inter,sans-serif; }
.leaflet-control-attribution { font-size:8px; }
.map-pin-wrap { background:transparent; border:0; }
.map-pin { display:grid; place-items:center; width:34px; height:34px; transform:rotate(45deg); border:2px solid var(--ink); background:var(--lime); box-shadow:3px 3px 0 var(--ink); }
.map-pin.monument-pin { font-size:15px; }
.map-pin.monument-pin.found { background:#72e78f; }
.map-pin.monument-pin.missing { background:#ff655d; color:white; }
.map-pin.user-pin { display:grid; place-items:center; width:30px; height:30px; margin:3px; transform:none; border:3px solid white; border-radius:50%; background:var(--ink); color:var(--lime); box-shadow:0 0 0 2px var(--ink); font-size:12px; }
.user-heading { display:block; transform-origin:center; transition:transform .12s linear; }
.map-pin > * { transform:rotate(-45deg); }
.map-pin.user-pin > * { transform:none; }
.pin-label { border:0!important; background:var(--ink)!important; color:white!important; border-radius:0!important; box-shadow:none!important; font:500 9px "DM Mono",monospace!important; letter-spacing:.08em; }
.pin-label.found { background:#147b42!important; }
.pin-label.missing { background:#b52c27!important; }
.pin-label:before { display:none; }
.map-legend { position:absolute; z-index:450; right:10px; bottom:42px; display:flex; gap:8px; padding:7px 9px; background:rgba(17,19,15,.9); color:white; font:500 8px "DM Mono",monospace; letter-spacing:.05em; }
.map-legend span { display:flex; align-items:center; gap:5px; }
.map-legend i { width:8px; height:8px; border-radius:50%; }
.map-legend i.won { background:#72e78f; }.map-legend i.missing { background:#ff655d; }
#nearest { position:relative; z-index:400; margin:-28px 16px 0; }
.nearest-card { padding:22px; border:1px solid var(--ink); background:var(--paper); box-shadow:7px 7px 0 var(--ink); }
.nearest-row { display:flex; justify-content:space-between; gap:16px; margin-bottom:20px; }
.nearest-row h2 { margin:0 0 5px; font-size:30px; letter-spacing:-.05em; }
.nearest-row p { margin:0; color:var(--muted); font-size:12px; }
.nearest-row > strong { text-align:right; font-size:20px; }
.nearest-row small { display:block; color:var(--muted); font:400 9px "DM Mono",monospace; }
.map-card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.map-card-top .kicker { margin:0; }
.compass-button { min-height:34px; padding:0 9px; border:1px solid var(--ink); background:transparent; font:600 9px "DM Mono",monospace; white-space:nowrap; }
.travel-modes { display:grid; grid-template-columns:repeat(3,1fr); margin:0 0 12px; border:1px solid var(--ink); }
.travel-modes button { min-height:40px; border:0; border-right:1px solid var(--ink); background:transparent; font:600 9px "DM Mono",monospace; }
.travel-modes button:last-child { border-right:0; }.travel-modes button.active { background:var(--lime); }
.route-eta { display:flex; align-items:end; justify-content:space-between; margin:0 0 13px; padding:11px 0; border-top:1px solid var(--line); }
.route-eta strong { font-size:24px; }.route-eta span { color:var(--muted); font-size:10px; }
.route-eta.loading strong { font:600 10px "DM Mono",monospace; }
.route-warning,.route-error { margin:14px 0; padding:11px 12px; border:1px solid #b82c27; background:#ffe5e1; color:#9f211d; font-size:11px; line-height:1.45; }
.route-warning strong { font:700 11px "DM Mono",monospace; letter-spacing:.05em; }
.routing-credit { margin:10px 0 0; color:var(--muted); font:400 8px "DM Mono",monospace; text-align:center; }
.route-complete-card h2 { font-size:28px; }

.detail-map { height:42dvh; min-height:300px; }
.detail-card { position:relative; z-index:400; margin:-20px 14px 0; padding:26px 22px; border:1px solid var(--ink); background:var(--paper); box-shadow:6px 6px 0 var(--ink); }
.detail-card h1 { margin:0; font-size:42px; letter-spacing:-.06em; }
.detail-card > p:nth-of-type(2) { color:var(--muted); }
.distance-display { display:flex; align-items:end; justify-content:space-between; margin:28px 0 22px; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.distance-display span { font:500 10px "DM Mono",monospace; letter-spacing:.1em; text-transform:uppercase; }
.distance-display strong { font-size:32px; }
.hint { margin:15px 0 0; color:var(--muted); font-size:11px; line-height:1.5; text-align:center; }

.discovered-screen { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 24px; text-align:center; background:var(--ink); color:white; }
.success-orbit { display:grid; place-items:center; width:120px; height:120px; margin-bottom:34px; border:1px solid #4b4e43; border-radius:50%; box-shadow:0 0 0 18px #1b1d18,0 0 0 19px #33362d; }
.success-orbit span { display:grid; place-items:center; width:70px; height:70px; border-radius:50%; background:var(--lime); color:var(--ink); font-size:36px; }
.discovered-screen h1 { margin:8px 0 0; font-size:52px; letter-spacing:-.07em; }
.discovered-screen h2 { color:var(--lime); font:500 18px "DM Mono",monospace; letter-spacing:.16em; }
.discovered-screen > p:not(.kicker) { color:#aeb0a7; line-height:1.5; }
.success-copy { margin:24px 0!important; color:white!important; }
.discovered-screen .secondary { border-color:#55584e; color:white; }

.recommendations-panel { width:100%; margin:32px 0 10px; padding:22px; border:1px solid var(--ink); background:white; color:var(--ink); text-align:left; }
.discovered-screen .recommendations-panel { max-width:760px; border-color:#73766c; }
.recommendations-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:16px; }
.recommendations-heading .kicker { margin:0; }
.recommendations-heading > p:last-child { max-width:250px; margin:0; color:var(--muted); font-size:11px; line-height:1.4; text-align:right; }
.recommendation-list { display:grid; gap:8px; }
.recommendation-card { display:grid; grid-template-columns:1fr; gap:14px; padding:17px; border:1px solid var(--ink); background:var(--paper); }
.recommendation-card span { color:var(--muted); font:500 9px "DM Mono",monospace; letter-spacing:.1em; text-transform:uppercase; }
.recommendation-card h2 { margin:5px 0 0; font-size:23px; letter-spacing:-.04em; }
.recommendation-card button { display:flex; align-items:center; justify-content:space-between; min-height:44px; padding:0 13px; border:1px solid var(--ink); background:var(--ink); color:white; font:700 10px "DM Mono",monospace; letter-spacing:.05em; cursor:pointer; }
.recommendation-card button b { color:var(--lime); font-size:17px; }
.recommendation-account { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.recommendation-account > p { margin:0 0 12px; color:#474a42; font-size:12px; line-height:1.5; }
.recommendation-account > strong { display:block; font:600 10px/1.45 "DM Mono",monospace; letter-spacing:.05em; }
.recommendation-account > small { display:block; margin-top:10px; color:var(--muted); font:400 9px/1.45 "DM Mono",monospace; }
.recommendation-session { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.recommendation-session strong { color:#147b42; font:600 10px "DM Mono",monospace; }
.recommendation-session button { padding:7px 9px; border:1px solid var(--ink); background:transparent; font:600 9px "DM Mono",monospace; }
.google-signin-slot { min-height:44px; }
.story-card .recommendations-panel { margin-top:30px; padding:0; border-width:1px 0; background:transparent; }
.story-card .recommendations-heading { padding-top:22px; }
.story-card .recommendation-account { padding-bottom:22px; }
.recommendation-stats [data-recommendation-stats] { display:grid; gap:7px; margin-top:14px; }
.recommendation-stats article { display:flex; justify-content:space-between; gap:15px; padding:10px; border:1px solid var(--line); }
.recommendation-stats article strong { margin:0; font-size:11px; }
.recommendation-stats article span { color:var(--muted); font:500 9px "DM Mono",monospace; text-align:right; }

.collection-heading,.dev-heading { padding:42px 22px 28px; }
.collection-heading h1,.dev-heading h1 { margin:0 0 28px; font-size:55px; line-height:.87; letter-spacing:-.075em; }
.progress { height:5px; margin:0 0 10px; background:#d5d4cc; }
.progress span { display:block; height:100%; background:var(--ink); }
.collection-heading > p:last-child { font:500 10px "DM Mono",monospace; letter-spacing:.12em; }
.dev-status { display:inline-block; margin-top:10px; padding:9px 11px; border:1px solid var(--ink); font:600 9px "DM Mono",monospace; letter-spacing:.08em; }
.dev-status.active { background:#72ffb6; }
.dev-status.warning { background:#ffc760; }
.collection-list { border-top:1px solid var(--ink); }
.collection-item { display:grid; grid-template-columns:32px 1fr 48px; gap:10px; align-items:center; min-height:145px; padding:22px; border-bottom:1px solid var(--ink); }
.collection-item > span { align-self:start; font:500 10px "DM Mono",monospace; }
.collection-item h2 { margin:0 0 5px; font-size:32px; letter-spacing:-.05em; }
.collection-item p { margin:0 0 20px; color:var(--muted); font-size:11px; }
.collection-item strong { font:500 10px "DM Mono",monospace; letter-spacing:.08em; }
.collection-item.locked { color:#8d8f87; }
.collection-item.found { background:var(--lime); }
.round-button { width:46px; height:46px; border:1px solid var(--ink); border-radius:50%; background:var(--ink); color:white; font-size:22px; }

.scanner-overlay { position:fixed; z-index:2000; inset:0; padding:env(safe-area-inset-top,0px) 18px calc(22px + var(--safe-bottom)); background:#080908; color:white; }
.scanner-overlay header { display:grid; grid-template-columns:48px 1fr 48px; align-items:center; height:70px; }
.scanner-overlay header strong { text-align:center; font:500 11px "DM Mono",monospace; letter-spacing:.16em; }
.scanner-overlay .icon-button { color:white; }
.camera-frame { position:relative; height:60dvh; max-height:620px; overflow:hidden; border:1px solid #555; background:#111; }
.camera-frame video { width:100%; height:100%; object-fit:cover; }
.camera-frame:before,.camera-frame:after,.camera-frame i:before,.camera-frame i:after { content:""; position:absolute; z-index:2; width:48px; height:48px; border-color:var(--lime); border-style:solid; }
.camera-frame:before { top:22px; left:22px; border-width:3px 0 0 3px; }.camera-frame:after { top:22px; right:22px; border-width:3px 3px 0 0; }.camera-frame i:before { bottom:22px; left:22px; border-width:0 0 3px 3px; }.camera-frame i:after { right:22px; bottom:22px; border-width:0 3px 3px 0; }
.scanner-overlay > p { margin:20px 0; color:#aaa; text-align:center; font:400 11px "DM Mono",monospace; }
.upload-button { position:relative; overflow:hidden; color:white; border-color:#555; }
.upload-button input { position:absolute; inset:0; opacity:0; }

.settings { margin:0 18px; border-top:1px solid var(--ink); }
.settings > label,.settings > div { display:block; padding:22px 0; border-bottom:1px solid var(--line); }
.settings label { display:flex; align-items:center; justify-content:space-between; }
.settings strong { display:block; margin-bottom:5px; }.settings small { display:block; color:var(--muted); font-size:10px; }
.settings input[type=checkbox] { width:52px; height:29px; accent-color:var(--ink); }
.simulate-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:16px; }
.simulate-grid button { min-height:70px; border:1px solid var(--ink); background:transparent; font:600 11px "DM Mono",monospace; }.simulate-grid button.active { background:var(--lime); box-shadow:3px 3px 0 var(--ink); }
.text-button { margin-top:16px; padding:0; border:0; border-bottom:1px solid; background:none; font-size:12px; }
.danger-zone .danger { margin-top:14px; justify-content:center; border-color:#b82c27; color:#b82c27; }
.debug-zone .button { margin-top:14px; }
.dev-note { margin:25px; color:var(--muted); font:400 10px/1.5 "DM Mono",monospace; }
.toast { position:fixed; z-index:3000; right:18px; bottom:calc(90px + var(--safe-bottom)); left:18px; padding:17px; background:var(--ink); color:white; text-align:center; font:500 11px "DM Mono",monospace; letter-spacing:.08em; box-shadow:5px 5px 0 var(--lime); }

.info-screen { background:var(--paper); }
.info-hero { padding:44px 22px 34px; border-bottom:1px solid var(--ink); background:var(--lime); }
.info-hero h1 { margin:0 0 8px; font-size:56px; line-height:.9; letter-spacing:-.075em; }
.info-hero > p:last-child { margin:0; font-size:13px; }
.info-viewer { padding:24px 0 18px; background:#050505; color:white; }
.info-viewer-heading { display:flex; align-items:center; justify-content:space-between; padding:0 18px 12px; }
.info-viewer-heading p { margin:0; color:var(--lime); }
.info-viewer-heading span { color:#85877f; font:400 9px "DM Mono",monospace; }
.info-viewer .z30-splat-viewport { height:58dvh; min-height:390px; }
.story-card { padding:26px 22px 44px; }
.story-meta { display:flex; justify-content:space-between; gap:20px; margin-bottom:26px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.story-meta span { font:500 10px "DM Mono",monospace; letter-spacing:.12em; }
.story-meta strong { text-align:right; }
.story-card > p { color:#34362f; font-size:15px; line-height:1.72; }
.story-card > a { display:block; margin:26px 0; color:var(--ink); font:500 10px/1.5 "DM Mono",monospace; letter-spacing:.07em; text-decoration-thickness:1px; text-underline-offset:4px; }
.story-card .always-available { margin:30px -4px 0; padding:16px; border:1px solid var(--ink); color:var(--ink); font:500 10px/1.5 "DM Mono",monospace; letter-spacing:.04em; }
.next-monument-button { margin-top:18px; }
.quiz-gate { margin:28px 18px 0; padding:24px; border:1px solid var(--ink); }
.quiz-gate.ready { box-shadow:6px 6px 0 var(--ink); }
.quiz-gate h2 { margin-bottom:10px; font-size:28px; letter-spacing:-.04em; }
.quiz-gate > p:not(.kicker) { color:var(--muted); font-size:13px; line-height:1.55; }
.quiz-gate .button { margin-top:20px; }

.quiz-screen { display:flex; flex-direction:column; min-height:100dvh; padding:calc(22px + env(safe-area-inset-top,0px)) 22px calc(24px + var(--safe-bottom)); background:var(--ink); color:white; }
.quiz-top { display:flex; justify-content:space-between; font:500 10px "DM Mono",monospace; letter-spacing:.12em; }
.quiz-top p { margin:0; }
.quiz-progress { height:3px; margin:16px 0 0; background:#35382f; }
.quiz-progress span { display:block; height:100%; background:var(--lime); }
.quiz-screen main { margin:auto 0; padding:42px 0; }
.quiz-screen main .kicker { color:var(--lime); }
.quiz-screen h1 { margin:0 0 38px; font-size:39px; line-height:1.04; letter-spacing:-.055em; }
.quiz-options { display:grid; gap:10px; }
.quiz-options button { display:grid; grid-template-columns:42px 1fr; align-items:center; min-height:66px; padding:8px 16px 8px 8px; border:1px solid #4a4d43; background:#151713; color:white; text-align:left; cursor:pointer; }
.quiz-options button span { display:grid; place-items:center; width:40px; height:40px; margin-right:12px; border:1px solid #5c6054; color:var(--lime); font:500 11px "DM Mono",monospace; }
.quiz-options button:active { border-color:var(--lime); background:#24271f; }
.quiz-lock { margin:0; color:#777b6e; text-align:center; font:400 9px/1.5 "DM Mono",monospace; }
.quiz-result-screen { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100dvh; padding:48px 22px calc(30px + var(--safe-bottom)); background:var(--ink); color:white; text-align:center; }
.quiz-result-screen .success-orbit { margin-bottom:28px; }
.quiz-result-screen .success-orbit span { font-weight:900; }
.quiz-result-screen h1 { margin:0; font-size:56px; letter-spacing:-.07em; }
.quiz-result-screen h2 { color:var(--lime); font:500 15px "DM Mono",monospace; letter-spacing:.13em; }
.quiz-result-screen > p:not(.kicker) { color:#aeb0a7; font-size:13px; line-height:1.55; }
.result-facts { width:100%; margin:16px 0 24px; border-top:1px solid #3d4037; text-align:left; }
.result-facts p { display:grid; grid-template-columns:34px 1fr; gap:10px; margin:0; padding:13px 0; border-bottom:1px solid #3d4037; color:#c4c6bd; font-size:11px; line-height:1.45; }
.result-facts span { color:var(--lime); font:500 9px "DM Mono",monospace; }
.quiz-result-screen .secondary { border-color:#55584e; color:white; }
.quiz-result-screen.quiz-won h1 { color:var(--lime); font-size:62px; }

.viewer-screen { background:#050505; color:white; }
.viewer-screen .app-header { border-color:#272727; background:#090909; }
.viewer-title { padding:26px 18px 14px; }.viewer-title h1 { margin:0 0 5px; font-size:38px; }.viewer-title p:last-child { color:#999; font-size:12px; }
.z30-splat-viewer { display:flex; flex-direction:column; gap:8px; padding:0 10px; }
.z30-splat-viewport { position:relative; height:62dvh; min-height:430px; overflow:hidden; border:1px solid #292929; background:#000; }
.z30-splat-canvas { position:absolute; inset:0; }
.z30-splat-controls { display:flex; align-items:center; gap:7px; min-height:58px; padding:9px; border:1px solid #292929; background:#111; }
.z30-brand { color:var(--lime); font-weight:900; }.z30-status { flex:1; min-width:0; overflow:hidden; color:#888; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.z30-button { padding:8px; border:1px solid #444; background:#202020; color:white; font-size:10px; }.z30-viewer-error { display:grid; place-items:center; min-height:400px; color:var(--lime); text-align:center; }
.z30-splat-viewer:fullscreen { width:100vw; height:100vh; padding:10px; background:#000; }.z30-splat-viewer:fullscreen .z30-splat-viewport { flex:1; height:auto; min-height:0; }
@media (min-width:900px) {
  body { background:#d9d8d0; }
  #app { width:min(100%,1440px); margin:0 auto; box-shadow:0 0 70px rgba(0,0,0,.14); }
  .screen { padding-bottom:72px; }
  .app-header { min-height:70px; padding-right:18px; padding-left:18px; }
  .bottom-nav { right:auto; left:50%; width:min(100%,1440px); height:64px; padding:5px max(32px,calc((100% - 560px)/2)); transform:translateX(-50%); }
  .bottom-nav button { font-size:11px; }
  .bottom-nav span { display:inline; margin:0 8px 0 0; font-size:18px; }
  .toast { right:auto; bottom:82px; left:50%; width:min(520px,calc(100vw - 48px)); transform:translateX(-50%); }

  .home-screen,.password-screen { min-height:100dvh; padding:48px clamp(48px,7vw,110px) 42px; }
  .home-copy,.password-copy { width:min(760px,68vw); }
  .home-copy { padding:8vh 0 5vh; }
  .home-copy h1,.password-copy h1 { font-size:clamp(76px,9vw,132px); }
  .home-copy > p:last-child,.password-copy > p:not(.kicker) { max-width:610px; font-size:20px; }
  .home-screen > div:last-child,.password-form { width:min(520px,50vw); }
  .routes-home .home-copy { padding:7vh 0 4vh; }
  .routes-home .route-choice-list { grid-template-columns:repeat(2,minmax(0,1fr)); width:min(980px,82vw); }
  .routes-home .route-choice-list > small { grid-column:1 / -1; }
  .route-choice { min-height:210px; align-content:start; padding:25px; }
  .route-choice .button { align-self:end; margin-top:auto; }
  .password-mark { font-size:11px; }
  .brand-logo { width:min(100%,360px); }

  .map-screen { display:grid; grid-template-columns:minmax(0,1fr) 410px; grid-template-rows:auto minmax(0,1fr); height:calc(100dvh - 64px); min-height:680px; overflow:hidden; }
  .map-screen .app-header { grid-column:1 / -1; }
  .map-stage { grid-column:1; grid-row:2; min-height:0; }
  #map { height:100%; min-height:0; }
  #nearest { grid-column:2; grid-row:2; margin:0; padding:24px; overflow-y:auto; background:#e4e2d8; }
  .nearest-card { box-shadow:8px 8px 0 var(--ink); }
  .map-legend { right:18px; bottom:18px; font-size:9px; }

  .detail-screen { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(390px,.55fr); grid-template-rows:auto minmax(0,1fr); height:calc(100dvh - 64px); min-height:680px; overflow:hidden; }
  .detail-screen .app-header { grid-column:1 / -1; }
  .detail-map { grid-column:1; grid-row:2; height:100%; min-height:0; }
  .detail-card { grid-column:2; grid-row:2; display:flex; flex-direction:column; justify-content:center; margin:0; padding:clamp(38px,5vw,72px); overflow-y:auto; box-shadow:none; }
  .detail-card h1 { font-size:clamp(48px,5vw,76px); }

  .info-screen { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(420px,.75fr); grid-template-rows:auto auto 1fr; align-items:start; }
  .info-screen .app-header { grid-column:1 / -1; }
  .info-hero { grid-column:2; grid-row:2; padding:54px clamp(36px,4vw,66px) 42px; }
  .info-hero h1 { font-size:clamp(62px,6vw,94px); }
  .info-viewer { position:sticky; top:70px; grid-column:1; grid-row:2 / span 2; height:calc(100dvh - 70px); padding:28px 18px 18px; }
  .info-viewer .z30-splat-viewer { height:calc(100% - 34px); }
  .info-viewer .z30-splat-viewport { height:auto; min-height:0; flex:1; }
  .story-card { grid-column:2; grid-row:3; padding:42px clamp(36px,4vw,66px) 80px; }
  .story-card > p { font-size:16px; }
  .recommendation-list { grid-template-columns:repeat(2,minmax(0,1fr)); }

  .collection-screen { display:grid; grid-template-columns:minmax(320px,.7fr) minmax(0,1.3fr); grid-template-rows:auto auto 1fr; align-items:start; }
  .collection-screen .app-header { grid-column:1 / -1; }
  .collection-heading { position:sticky; top:70px; grid-column:1; grid-row:2; padding:58px 42px 34px; }
  .collection-heading h1 { font-size:clamp(58px,5vw,84px); }
  .collection-list { grid-column:2; grid-row:2 / span 2; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-left:1px solid var(--ink); }
  .collection-item { grid-template-columns:28px 1fr; grid-template-rows:1fr auto; min-height:330px; padding:30px 24px; border-right:1px solid var(--ink); }
  .collection-item .round-button { grid-column:2; justify-self:end; }
  .collection-item h2 { font-size:clamp(28px,3vw,44px); }
  .quiz-gate { grid-column:1; grid-row:3; margin:0 42px 80px; }

  .dev-screen { display:grid; grid-template-columns:minmax(330px,.7fr) minmax(0,1.3fr); grid-template-rows:auto auto 1fr; align-items:start; }
  .dev-screen .app-header { grid-column:1 / -1; }
  .dev-heading { position:sticky; top:70px; grid-column:1; grid-row:2; padding:58px 42px; }
  .settings { grid-column:2; grid-row:2 / span 2; margin:0; padding:30px 48px 70px; border-left:1px solid var(--ink); }
  .settings > div.debug-zone { display:grid; grid-template-columns:minmax(180px,.65fr) minmax(260px,1.35fr); column-gap:30px; }
  .settings > div.debug-zone .simulate-grid,.settings > div.debug-zone .button { grid-column:2; }
  .dev-note { grid-column:1; grid-row:3; margin:0 42px 80px; }

  .quiz-screen main { width:min(760px,100%); margin:auto; }
  .quiz-screen h1 { font-size:clamp(46px,5vw,72px); }
  .quiz-options { grid-template-columns:repeat(3,1fr); }
  .quiz-options button { grid-template-columns:50px 1fr; min-height:100px; }
  .quiz-result-screen > p,.quiz-result-screen .result-facts { max-width:760px; }
  .quiz-result-screen .button,.discovered-screen .button { max-width:460px; }
  .discovered-screen h1 { font-size:clamp(68px,7vw,104px); }

  .viewer-screen .z30-splat-viewport { height:calc(100dvh - 208px); min-height:520px; }
  .viewer-title { padding:32px 32px 18px; }
  .viewer-title h1 { font-size:54px; }
  .scanner-overlay { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,520px) minmax(0,1fr); align-content:start; }
  .scanner-overlay > * { grid-column:2; }
  .camera-frame { height:62dvh; }
}