@font-face{font-family:Fraunces Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/directmap/assets/fraunces-vietnamese-wght-normal-CnvboYUG.woff2)format("woff2-variations");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Fraunces Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/directmap/assets/fraunces-latin-ext-wght-normal-Ca2vKHc0.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Fraunces Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/directmap/assets/fraunces-latin-wght-normal-ukD16Tqj.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Nunito Variable;font-style:normal;font-display:swap;font-weight:200 1000;src:url(/directmap/assets/nunito-cyrillic-ext-wght-normal-D4X5GqEv.woff2)format("woff2-variations");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Nunito Variable;font-style:normal;font-display:swap;font-weight:200 1000;src:url(/directmap/assets/nunito-cyrillic-wght-normal-CY6AOgYE.woff2)format("woff2-variations");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Nunito Variable;font-style:normal;font-display:swap;font-weight:200 1000;src:url(/directmap/assets/nunito-vietnamese-wght-normal-U01xdrZh.woff2)format("woff2-variations");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Nunito Variable;font-style:normal;font-display:swap;font-weight:200 1000;src:url(/directmap/assets/nunito-latin-ext-wght-normal-CXYtwYOx.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Nunito Variable;font-style:normal;font-display:swap;font-weight:200 1000;src:url(/directmap/assets/nunito-latin-wght-normal-BzFMHfZw.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--paper:#f7efdc;--paper-deep:#efe2c4;--card:#fffaef;--ink:#2b3450;--ink-soft:#6b7288;--accent:#e2504c;--accent-deep:#c73734;--teal:#3e8e7e;--gold:#d9a531;--good:#4c9e63;--bad:#d64545;--violet:#8a6fae;--map-ground:#b9c99a;--map-street:#f3ecd8;--map-street-line:#c9b98d;--map-outline:#55503d;--sv-sky:#b8d8d6;--sv-sun:#f4d06f;--sv-cloud:#f5f1e4;--sv-hills:#a4bd8a;--sv-grass:#a9c184;--sv-road:#e8dfc4;--sv-road-line:#b3a276;--sv-outline:#4a4434;--radius:18px;--shadow:0 2px 0 #4a3e2229, 0 10px 24px -12px #4a3e2259;color:var(--ink);-webkit-font-smoothing:antialiased;font-family:Nunito Variable,ui-rounded,system-ui,sans-serif;font-size:16px}*{box-sizing:border-box;margin:0}html,body{height:100%}body{background:radial-gradient(1100px 500px at 85% -10%, #fdf6e5 0%, transparent 60%), radial-gradient(900px 600px at -10% 110%, #efe0bd 0%, transparent 55%), var(--paper);color:var(--ink);overscroll-behavior:none}body:before{content:"";pointer-events:none;z-index:40;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0}#root{min-height:100%}.app{max-width:480px;min-height:100dvh;padding:0 14px calc(20px + env(safe-area-inset-bottom));flex-direction:column;margin:0 auto;display:flex}h1,h2,h3{font-variation-settings:"SOFT" 60, "WONK" 1;letter-spacing:.01em;font-family:Fraunces Variable,Georgia,serif}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:0 0;border:none}.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1.5px solid #55503d38}.btn{background:var(--paper-deep);border:1.5px solid #55503d40;border-radius:999px;padding:13px 22px;font-size:1rem;font-weight:800;transition:transform .12s,box-shadow .12s,filter .12s;display:inline-block;box-shadow:0 3px #4a3e2233}.btn:active{transform:translateY(2px);box-shadow:0 1px #4a3e2233}.btn-primary{background:var(--accent);border-color:var(--accent-deep);color:#fff;box-shadow:0 3px 0 var(--accent-deep)}.btn:disabled{opacity:.45;cursor:default}.home{flex-direction:column;gap:18px;padding-top:26px;animation:.5s both rise;display:flex}.home-header{text-align:center;position:relative}.home-logo{animation:.9s cubic-bezier(.2,.8,.3,1) both spin-in;display:inline-block}.home-header h1{margin-top:2px;font-size:2.6rem;font-weight:700}.home-sub{color:var(--ink-soft);margin-top:2px;font-size:1rem;font-style:italic}.btn-play{text-align:center;align-self:center;min-width:240px;padding:17px 28px;font-size:1.25rem;animation:.5s .12s both rise}.stats{justify-content:space-around;padding:14px 10px;animation:.5s .18s both rise;display:flex}.stat{flex-direction:column;align-items:center;gap:2px;display:flex}.stat-num{color:var(--accent-deep);font-family:Fraunces Variable,Georgia,serif;font-size:1.9rem;font-weight:700}.stat-label{color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;font-size:.78rem;font-weight:800}.about{padding:16px 18px;animation:.5s .24s both rise}.about h2{margin-bottom:6px;font-size:1.2rem}.about p{color:var(--ink);font-size:.92rem;line-height:1.5}.legend{flex-wrap:wrap;gap:7px;margin:10px 0 2px;padding:0;list-style:none;display:flex}.legend li{background:var(--paper-deep);border:1.5px solid #55503d33;border-radius:999px;padding:4px 12px;font-size:.82rem}.legend-opt{color:var(--ink-soft)}.skills-panel{padding:14px 18px;animation:.5s .3s both rise}.skills-title{margin-bottom:10px;font-size:1.05rem}.skills-list{flex-direction:column;gap:9px;margin:0;padding:0;list-style:none;display:flex}.skill-row{grid-template-columns:minmax(0,1fr) 84px auto;align-items:center;gap:10px;display:grid}.skill-label{color:var(--ink);flex-wrap:wrap;align-items:center;gap:7px;font-size:.9rem;font-weight:700;display:flex}.skill-tag{text-transform:uppercase;letter-spacing:.03em;border-radius:999px;padding:2px 7px;font-size:.66rem;font-weight:800}.skill-tag-good{color:#fff;background:var(--good)}.skill-tag-focus{color:#fff;background:var(--gold)}.skill-meter{background:var(--paper-deep);border-radius:999px;height:9px;overflow:hidden}.skill-meter-fill{background:var(--ink-soft);border-radius:999px;height:100%;transition:width .6s cubic-bezier(.4,0,.2,1);display:block}.skill-meter-fill.is-strength{background:var(--good)}.skill-meter-fill.is-focus{background:var(--gold)}.skill-pct{color:var(--ink);font-variant-numeric:tabular-nums;text-align:right;font-size:.82rem;font-weight:800}.skill-count{color:var(--ink-soft);font-weight:600}.settings{padding:12px 18px;animation:.5s .3s both rise}.settings summary{cursor:pointer;font-weight:800}.settings-on{color:var(--good)}.settings-off{color:var(--ink-soft)}.settings p{color:var(--ink-soft);margin:10px 0;font-size:.85rem;line-height:1.5}.settings-row{gap:8px;display:flex}.settings-row input{font:inherit;background:var(--paper);color:var(--ink);border:1.5px solid #55503d4d;border-radius:12px;flex:1;min-width:0;padding:10px 14px}.hearts{flex:1;justify-content:center;gap:5px;font-size:1.5rem;display:flex}.heart{color:var(--accent);transition:transform .25s,color .25s,opacity .25s}.heart-lost{color:#55503d40;transform:scale(.82)}.run-chip{color:var(--ink-soft);background:var(--paper-deep);white-space:nowrap;border:1.5px solid #55503d33;border-radius:999px;padding:5px 12px;font-size:.85rem;font-weight:900}.real-img{border-radius:var(--radius);width:100%;height:auto;box-shadow:var(--shadow);background:var(--paper-deep);border:1.5px solid #55503d59;min-height:120px;display:block}.real-hint{text-align:center;color:var(--ink-soft);font-size:.85rem;font-style:italic}.cardinal-row{grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;display:grid}.cardinal-btn{text-align:center;padding:13px 4px;font-weight:900}.cardinal-correct{background:var(--good);color:#fff;border-color:#2c6b40;box-shadow:0 3px #2c6b40}.cardinal-wrong{background:var(--bad);color:#fff;border-color:#8f2626;box-shadow:0 3px #8f2626}.results-big{font-size:3rem}.home-footer{text-align:center;color:var(--ink-soft);padding:6px 20px 10px;font-size:.85rem}.session{flex-direction:column;flex:1;gap:12px;padding-top:12px;display:flex}.session-header{align-items:center;gap:12px;display:flex}.icon-btn{background:var(--paper-deep);width:38px;height:38px;color:var(--ink-soft);border:1.5px solid #55503d40;border-radius:50%;flex:none;font-weight:900}.lesson{text-align:center;flex-direction:column;align-items:center;gap:10px;margin-top:8vh;padding:26px 22px;animation:.4s both rise;display:flex}.lesson h2{font-size:1.9rem}.lesson-tagline{color:var(--accent-deep);font-size:.95rem;font-weight:800}.lesson-text{color:var(--ink);font-size:1rem;line-height:1.55}.lesson .btn{min-width:160px;margin-top:8px}.mode{flex-direction:column;gap:12px;padding-bottom:110px;animation:.35s both rise;display:flex}.prompt{text-align:center;padding:4px 8px 0;font-size:1.2rem;font-weight:800}.dirword{color:#fff;border-radius:9px;padding:1px 10px 2px;font-weight:900;display:inline-block}.dirword-left{background:var(--accent)}.dirword-right{background:var(--teal)}.dirword-ahead{background:var(--gold)}.dirword-behind{background:var(--violet)}.dirword-cardinal{background:var(--ink)}.mapview{width:100%}.mapview-svg{border-radius:var(--radius);background:var(--map-ground);width:100%;height:auto;box-shadow:var(--shadow);border:1.5px solid #55503d59;display:block}.tap-cell{fill:#ffffff47;stroke:var(--gold);stroke-width:2.5px;stroke-dasharray:5 5;cursor:pointer;animation:1.6s ease-in-out infinite tap-breathe}@keyframes tap-breathe{0%,to{fill-opacity:.5}50%{fill-opacity:1}}.pulse-ring{transform-origin:50%;transform-box:fill-box;animation:1.4s ease-out infinite pulse}@keyframes pulse{0%{opacity:1;transform:scale(.7)}80%{opacity:0;transform:scale(1.5)}to{opacity:0}}.pose-marker{cursor:pointer}.pose-marker-arrow{fill:var(--card);stroke:var(--ink)}.pose-marker-badge{fill:var(--ink)}.pose-marker-label{fill:#fff;font-family:inherit;font-size:12px;font-weight:900}.pose-correct .pose-marker-arrow{fill:var(--good);stroke:#2c6b40}.pose-correct .pose-marker-badge{fill:var(--good)}.pose-wrong .pose-marker-arrow{fill:var(--bad);stroke:#8f2626}.pose-wrong .pose-marker-badge{fill:var(--bad)}.pose-dim{opacity:.35}.streetview{border-radius:var(--radius);width:100%;height:auto;box-shadow:var(--shadow);border:1.5px solid #55503d59;display:block}.streetview-main{aspect-ratio:4/2.6}.compare{justify-content:center;display:flex}.compare figure{text-align:center;max-width:240px}.compare figcaption{color:var(--ink-soft);margin-top:4px;font-size:.8rem}.postcards{grid-template-columns:1fr 1fr;gap:10px;display:grid}.postcards-2{grid-template-columns:1fr;width:100%;max-width:300px;margin:0 auto}.postcard{background:var(--card);border:2px solid #55503d40;border-radius:14px;padding:6px 6px 4px;transition:transform .12s,border-color .15s,opacity .2s;box-shadow:0 3px #4a3e2229}.postcard:active{transform:translateY(2px)}.postcard .streetview{box-shadow:none;border-width:1px;border-radius:8px}.postcard-correct{border-color:var(--good);box-shadow:0 0 0 2.5px var(--good), 0 3px 0 #4a3e2229}.postcard-wrong{border-color:var(--bad);box-shadow:0 0 0 2.5px var(--bad), 0 3px 0 #4a3e2229}.postcard-dim{opacity:.45}.route-card{box-shadow:var(--shadow);background:#fdf8e7 repeating-linear-gradient(#0000 0 25px,#55503d17 25px 26px);border:1.5px solid #55503d4d;border-radius:12px;padding:10px 16px 12px;transform:rotate(-.6deg)}.route-card-title{text-transform:uppercase;letter-spacing:.12em;color:var(--accent-deep);font-family:Fraunces Variable,Georgia,serif;font-size:.85rem;font-weight:700}.route-card ol{margin:4px 0 0;padding-left:22px;font-weight:700;line-height:26px}.route-card-hint{color:var(--ink-soft);margin-top:4px;font-size:.8rem;font-style:italic;display:block}.dpad{justify-content:center;gap:14px;padding:2px 0;display:flex}.dpad-btn{background:var(--card);width:84px;height:68px;color:var(--ink);border:1.5px solid #55503d47;border-radius:18px;flex-direction:column;justify-content:center;align-items:center;gap:1px;transition:transform 90ms,box-shadow 90ms;display:flex;box-shadow:0 4px #4a3e2233}.dpad-btn span{text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);font-size:.68rem;font-weight:800}.dpad-btn:active{transform:translateY(3px);box-shadow:0 1px #4a3e2233}.dpad-fwd{background:var(--accent);border-color:var(--accent-deep);color:#fff;box-shadow:0 4px 0 var(--accent-deep)}.dpad-fwd span{color:#ffd9d0}.route-controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;display:flex}.route-actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;display:flex}.btn-arrive{background:var(--teal);color:#fff;border-color:#2f6f62;font-size:1.05rem;box-shadow:0 3px #2f6f62}.btn-reset{background:var(--paper-deep);color:var(--ink);border-color:#55503d47;font-size:.95rem;box-shadow:0 3px #55503d47}.route-blocked{text-align:center;color:var(--accent-deep);flex-basis:100%;margin-bottom:2px;font-size:.9rem;font-weight:700}.feedback{width:min(480px,100%);padding:16px 18px calc(16px + env(safe-area-inset-bottom));z-index:30;border-radius:22px 22px 0 0;align-items:center;gap:14px;animation:.3s cubic-bezier(.2,.9,.3,1.2) both slide-up;display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%)}.feedback-good{border-top:3px solid var(--good);color:#23532f;background:#e2f0dd}.feedback-bad{border-top:3px solid var(--bad);color:#7c2828;background:#f7e0da}.feedback-text{flex:1}.feedback-text strong{font-family:Fraunces Variable,Georgia,serif;font-size:1.15rem}.feedback-text p{margin-top:3px;font-size:.88rem;line-height:1.4}.btn-continue{color:#fff;background:var(--ink);border-radius:999px;flex:none;padding:12px 20px;font-weight:900;box-shadow:0 3px #0000004d}.feedback-good .btn-continue{background:var(--good);box-shadow:0 3px #2c6b40}.feedback-bad .btn-continue{background:var(--bad);box-shadow:0 3px #8f2626}.results{text-align:center;flex-direction:column;align-items:center;gap:10px;margin-top:10vh;padding:30px 22px;animation:.4s both rise;display:flex}.results h2{font-size:2.4rem}.results-note{color:var(--ink-soft);line-height:1.45}.results-actions{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:10px;display:flex}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes slide-up{0%{transform:translate(-50%,100%)}to{transform:translate(-50%)}}@keyframes spin-in{0%{opacity:0;transform:rotate(-160deg)scale(.4)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}