/* Hallmark · v2.0.0 · shape: app screen · theme: custom by request · genre: playful · idea: a painted summer afternoon you can ride into · signature: animated painted cyclist · posture: full palette · nav: quiet game controls · footer: travel note */
/* Critique: art owns the canvas; controls live along the edges. Typography comes from a quiet illustrated storybook. */
/* waive 65: warm paper belongs to the requested summer illustration; no clay UI accent. waive 80: illustration is the actual game world requested by the user. */
:root {
 --color-ink:#304632; --color-muted:#586346; --color-paper:#fff7df;
 --color-accent:#f2e9c7; --color-accent-ink:#304632; --color-hover:#fff9e9;
 --color-field:#36523a; --color-focus:#fff7b1; --color-alert:#a84b33;
 --color-transparent:transparent; --color-shade:#173522; --color-edge:#1d3529;
 --color-paper-12:#fff7df1f; --color-paper-25:#fff7df40; --color-paper-50:#fff7df80;
 --color-note:#193322b8; --color-shadow:#19332238; --color-shadow-strong:#19332280; --color-panel:#f6f1dcf2;
 --color-track:#788961; --color-safe:#c2cea2; --color-needle:#395a3b;
 --font-display:'Gowun Batang','AppleMyungjo',Georgia,serif;
 --font-body:'Gowun Dodum','Apple SD Gothic Neo',sans-serif;
 --space-xs:8px; --space-sm:12px; --space-md:16px; --space-lg:24px;
 --space-xl:40px; --space-2xl:64px; --page-gutter:clamp(24px,4.6vw,80px);
 --duration:450ms; --ease:cubic-bezier(.2,.7,.2,1);
}
* { box-sizing:border-box; }
html,body { margin:0; width:100%; height:100%; overflow-x:clip; overflow-y:clip; }
body { background:var(--color-field); color:var(--color-paper); font-family:var(--font-body); font-size:16px; scrollbar-color:var(--color-muted) var(--color-paper); font-synthesis:none; -webkit-font-smoothing:antialiased; }
button { color:inherit; font:inherit; cursor:pointer; -webkit-tap-highlight-color:var(--color-transparent); touch-action:manipulation; }
button:focus-visible { outline:3px solid var(--color-focus); outline-offset:5px; }
button:disabled { opacity:.6; cursor:wait; }
button:active { transform:translateY(2px); }
[hidden] { display:none !important; }
::selection { background:var(--color-paper); color:var(--color-ink); }
.icon-library { position:absolute; width:0; height:0; }
.icon { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.shell { width:calc(100% - var(--page-gutter) * 2); max-width:1680px; margin-inline:auto; }
#experience { width:100%; height:100%; min-height:480px; position:relative; isolation:isolate; overflow:clip; }
.landscape,#scene,.reading-shade,.vignette { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.landscape {  background-position:60% center; background-size:cover; transform:scale(1.035); will-change:transform; }
#scene { z-index:1; }
.reading-shade { background:linear-gradient(90deg,var(--color-shade),var(--color-transparent) 72%); opacity:.68; z-index:2; transition:opacity 700ms var(--ease); }
.vignette { background:linear-gradient(180deg,var(--color-shadow) 0%,var(--color-transparent) 25%,var(--color-shadow-strong) 100%); z-index:2; opacity:.6; }
.topbar { position:relative; z-index:5; display:flex; align-items:center; justify-content:space-between; padding-top:max(var(--space-lg),env(safe-area-inset-top)); gap:var(--space-lg); }
.wordmark { display:flex; align-items:center; gap:var(--space-sm); background:none; border:0; padding:0; min-height:44px; font-size:20px; text-shadow:0 2px 14px var(--color-shadow-strong); white-space:nowrap; }
.wordmark:hover { color:var(--color-focus); }
.brand-icon { width:33px; height:33px; }
.chapter { display:flex; align-items:center; gap:var(--space-md); font-size:14px; text-shadow:0 1px 6px var(--color-shadow-strong); }
.chapter-number { font-family:var(--font-display); font-size:20px; }
.chapter-line { width:44px; height:1px; background:var(--color-paper-50); }
.tools { display:flex; gap:var(--space-xs); }
.icon-button { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--color-paper-25); border-radius:50%; background:var(--color-shadow); transition:background 180ms; }
.icon-button .icon { width:20px; height:20px; }
.icon-button:hover,.icon-button[aria-pressed="true"] { background:var(--color-paper-25); }
.intro { position:absolute; inset:0; z-index:3; display:flex; align-items:center; pointer-events:none; padding-top:var(--space-md); }
.intro-copy { margin-left:1.8%; pointer-events:auto; }
h1 { font-family:var(--font-display); font-size:clamp(72px,7.5vw,110px); font-weight:400; line-height:1.14; letter-spacing:-.06em; margin:0; overflow-wrap:break-word; min-width:0; text-wrap:balance; text-shadow:0 3px 30px var(--color-shadow); }
.title-swish { display:block; width:144px; height:24px; color:var(--color-paper-50); margin-top:var(--space-sm); margin-left:4px; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; }
.intro-description { margin:var(--space-lg) 0 32px; line-height:1.9; font-size:17px; text-wrap:pretty; text-shadow:0 1px 12px var(--color-shadow-strong); }
.primary-button { display:inline-flex; justify-content:center; align-items:center; gap:var(--space-sm); height:52px; padding:0 var(--space-lg); border-radius:7px; background:var(--color-accent); border:1px solid var(--color-accent); color:var(--color-accent-ink); box-shadow:0 5px 22px var(--color-shadow); white-space:nowrap; font-size:16px; transition:background 180ms,transform 180ms var(--ease); }
.primary-button:hover { background:var(--color-hover); }
dialog button:focus-visible { outline-color:var(--color-ink); }
.button-arrow { width:19px; height:19px; margin-left:var(--space-lg); }
.key-guide { display:flex; align-items:center; gap:var(--space-sm); font-size:13px; margin-top:var(--space-lg); }
.key-pair { display:flex; gap:4px; }
kbd { display:grid; place-items:center; width:25px; height:24px; border:1px solid var(--color-paper-50); border-bottom-width:2px; border-radius:4px; font:inherit; background:var(--color-paper-12); }
.wind-note { position:absolute; z-index:3; right:var(--page-gutter); top:28%; padding:var(--space-sm); border-radius:8px; background:var(--color-note); display:flex; gap:var(--space-sm); align-items:center; text-shadow:0 2px 8px var(--color-shadow-strong); }
.wind-note>.icon { width:31px; height:27px; }
.wind-note span { display:block; font-size:15px; }
.wind-note small { display:block; margin-top:var(--space-xs); font-size:12px; }
.balance-panel { position:absolute; z-index:3; bottom:87px; left:63%; transform:translateX(-50%); width:260px; padding:var(--space-md) 20px var(--space-sm); border-radius:10px; background:var(--color-panel); color:var(--color-ink); box-shadow:0 4px 25px var(--color-shadow); }
.balance-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--space-xs); font-size:13px; margin-bottom:var(--space-sm); }
.balance-heading .icon { width:24px; height:24px; }
.balance-track { height:5px; position:relative; background:var(--color-track); border-radius:8px; }
.balance-safe { position:absolute; inset:-2px 34%; background:var(--color-safe); border-radius:6px; }
.balance-center { position:absolute; top:-3px; left:50%; height:11px; width:1px; background:var(--color-needle); opacity:.4; }
#balance-needle { position:absolute; left:50%; top:-4px; width:13px; height:13px; border-radius:50%; background:var(--color-needle); border:2px solid var(--color-paper); box-shadow:0 1px 4px var(--color-shadow); margin-left:0; translate:-50% 0; will-change:transform; }
.balance-panel.danger #balance-needle { background:var(--color-alert); }
.balance-panel.danger .balance-heading { color:var(--color-alert); }
.balance-labels { display:flex; justify-content:space-between; margin-top:var(--space-xs); color:var(--color-muted); font-size:11px; }
.bottom-notes { position:absolute; bottom:max(24px,env(safe-area-inset-bottom)); left:0; right:0; z-index:3; display:flex; justify-content:space-between; gap:var(--space-lg); font-size:12px; text-shadow:0 1px 8px var(--color-shadow-strong); }
.ride-hud { position:absolute; top:120px; left:0; right:0; z-index:3; display:flex; align-items:flex-start; justify-content:space-between; text-shadow:0 2px 12px var(--color-shadow-strong); }
.distance-stat>span,.time-stat>span { font-size:13px; }
.distance-stat p { margin:2px 0; display:flex; align-items:baseline; gap:var(--space-xs); }
.distance-stat b { font-family:var(--font-display); font-weight:400; font-size:56px; line-height:1.2; font-variant-numeric:tabular-nums; }
.distance-stat p span { font-size:16px; }
.time-stat { text-align:right; }
.time-stat b { display:block; font-family:var(--font-display); font-weight:400; font-size:28px; margin-top:var(--space-xs); font-variant-numeric:tabular-nums; }
.route { width:min(340px,34%); margin-top:4px; }
.route-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--space-xs); font-size:12px; }
.route-heading .icon { width:20px; height:20px; margin-left:auto; }
.route-track { height:2px; background:var(--color-paper-50); position:relative; margin-top:var(--space-lg); }
#route-fill { position:absolute; inset:0; background:var(--color-paper); transform:scaleX(0); transform-origin:left; }
#route-bike { position:absolute; left:0; top:-13px; }
#route-bike .icon { width:25px; height:25px; }
body[data-mode="playing"] .reading-shade,body[data-mode="paused"] .reading-shade,body[data-mode="ended"] .reading-shade { opacity:.12; }
body[data-mode="playing"] .wind-note,body[data-mode="paused"] .wind-note,body[data-mode="ended"] .wind-note { top:35%; }
.touch-controls { position:absolute; inset:auto var(--page-gutter) 95px; z-index:4; display:flex; justify-content:space-between; pointer-events:none; }
.steer-button { display:grid; place-items:center; width:64px; height:64px; border:1px solid var(--color-paper-50); border-radius:50%; color:var(--color-paper); background:var(--color-shadow); pointer-events:auto; touch-action:none; user-select:none; }
.steer-button .icon { width:26px; height:26px; }
#steer-left .icon { transform:rotate(180deg); }
.steer-button:hover,.steer-button.pressed { background:var(--color-paper-25); }
dialog { width:min(420px,calc(100% - 40px)); padding:36px 32px var(--space-lg); background:var(--color-panel); color:var(--color-ink); border:0; border-radius:16px; text-align:center; box-shadow:0 12px 80px var(--color-shadow-strong); }
dialog::backdrop { background:var(--color-shadow-strong); backdrop-filter:blur(5px); }
.dialog-flower { width:38px; height:38px; color:var(--color-field); margin-bottom:var(--space-sm); }
dialog h2 { font-family:var(--font-display); font-weight:400; font-size:29px; margin:0; text-wrap:balance; }
dialog p { font-size:15px; line-height:1.8; margin:var(--space-md) 0 var(--space-lg); }
dialog .primary-button { width:100%; background:var(--color-ink); color:var(--color-paper); border-color:var(--color-ink); box-shadow:none; }
dialog .primary-button:hover { background:var(--color-muted); }
.text-button { background:none; border:0; padding:0 var(--space-md); min-height:44px; margin-top:var(--space-xs); color:var(--color-muted); font-size:13px; }
.text-button:hover { color:var(--color-ink); text-decoration:underline; text-underline-offset:4px; }
.result-stats { display:flex; justify-content:center; gap:var(--space-xl); padding:0 0 28px; }
.result-stats span { font-size:12px; color:var(--color-muted); }
.result-stats b { display:block; color:var(--color-ink); font-family:var(--font-display); font-weight:400; font-size:27px; margin-bottom:var(--space-xs); font-variant-numeric:tabular-nums; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:clip; clip-path:inset(50%); white-space:nowrap; border:0; }
.asset-error { max-width:280px; font-size:13px; line-height:1.7; }
.noscript { position:fixed; z-index:10; bottom:15px; padding:20px; margin:0; background:var(--color-paper); color:var(--color-ink); }
@media (min-width:1900px) { .wind-note { right:calc((100% - 1680px) / 2); } }
@media (max-width:700px) {
 :root { --page-gutter:24px; }
 .topbar { padding-top:max(20px,env(safe-area-inset-top)); gap:var(--space-sm); }
 .wordmark { font-size:17px; gap:var(--space-xs); } .brand-icon { width:28px; height:28px; }
 .chapter { display:none; } .tools { gap:var(--space-xs); } .icon-button { width:44px; height:44px; }
 #fullscreen-button { display:none; }
 .intro { align-items:flex-start; padding-top:clamp(112px,19vh,168px); } .intro-copy { margin-left:0; }
 h1 { font-size:clamp(64px,13vw,86px); } .title-swish { width:110px; margin-top:var(--space-xs); }
 .intro-description { font-size:15px; margin:var(--space-md) 0 var(--space-lg); line-height:1.9; }
 .primary-button { height:52px; padding:0 var(--space-md); font-size:15px; } .button-arrow { margin-left:var(--space-sm); }
 .key-guide { font-size:12px; margin-top:20px; } .wind-note { display:none; }
 .balance-panel { left:58%; bottom:77px; width:210px; padding:var(--space-sm) var(--space-md); }
 .balance-heading { font-size:12px; margin-bottom:var(--space-xs); }
 .bottom-notes { font-size:11px; bottom:max(23px,env(safe-area-inset-bottom)); gap:var(--space-sm); }
 .best-note { max-width:120px; text-align:right; }
 .ride-hud { top:96px; flex-wrap:wrap; } .distance-stat b { font-size:43px; } .time-stat b { font-size:25px; }
 .route { position:absolute; top:100px; left:0; width:100%; }
 body[data-mode="playing"] .balance-panel,body[data-mode="paused"] .balance-panel,body[data-mode="ended"] .balance-panel { left:50%; width:180px; bottom:92px; }
 .touch-controls { bottom:102px; } .steer-button { width:54px; height:54px; }
}
@media (max-height:650px) and (min-width:701px) { h1 { font-size:70px; } .intro-description { margin:var(--space-sm) 0 20px; font-size:15px; } .title-swish { margin-top:4px; } .key-guide { margin-top:var(--space-sm); } .balance-panel { bottom:65px; } .wind-note { top:25%; } }
@media (max-height:700px) and (max-width:700px) { .intro { padding-top:100px; } h1 { font-size:60px; } .intro-description { margin:var(--space-sm) 0 var(--space-md); } .title-swish { height:15px; } .key-guide { margin-top:var(--space-sm); } .balance-panel { bottom:65px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } .landscape { will-change:auto; } }

@media (max-width:700px) { body[data-mode="playing"] .balance-heading .icon, body[data-mode="paused"] .balance-heading .icon, body[data-mode="ended"] .balance-heading .icon { display:none; } }
@media (max-width:360px) { body[data-mode="playing"] .balance-panel, body[data-mode="paused"] .balance-panel, body[data-mode="ended"] .balance-panel { width:148px; padding:var(--space-sm); } .balance-heading { font-size:11px; } }
@media (max-height:500px) and (min-width:701px) { #experience { min-height:320px; } .intro { padding-top:48px; } h1 { font-size:48px; } .title-swish { display:none; } .intro-description { margin:var(--space-sm) 0; line-height:1.6; } .key-guide { margin-top:var(--space-xs); } .bottom-notes { bottom:var(--space-sm); } .balance-panel { bottom:48px; } .touch-controls { bottom:60px; } .ride-hud { top:90px; } }
/* Keep route information readable against the bright painted sky. */
:root { --color-route-track:#30463260; }
.distance-stat { color:var(--color-paper); text-shadow:0 1px 8px var(--color-shadow-strong); }
.route { color:var(--color-ink); text-shadow:0 1px 10px var(--color-paper-50); }
.route-track { background:var(--color-route-track); }
#route-fill { background:var(--color-ink); }
@media (max-height:640px) and (max-width:700px) { body[data-mode="home"] .balance-panel { display:none; } }

/* Real 3D scene: the full-size canvas owns every visible landscape object. */
#scene { display:block; image-rendering:auto; }
body[data-mode="playing"] .reading-shade,body[data-mode="paused"] .reading-shade,body[data-mode="ended"] .reading-shade { opacity:0; }
@media (max-width:700px) { body:not([data-mode="home"]) .wordmark span { display:none; } }

body:not([data-mode="home"]) .balance-panel { left:50%; }
.route { background:var(--color-panel); padding:var(--space-sm) var(--space-md) 20px; border-radius:8px; text-shadow:none; }