:root{
  color-scheme:dark;
  --ink:#06110f;--deep:#071b17;--forest:#0d2c23;--water:#65d8d0;--water-soft:#a8eee5;
  --paper:#f4f3e9;--muted:rgba(238,244,235,.68);--gold:#c9ad70;--danger:#ef765e;
  --safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);
  --glass:rgba(5,23,19,.54);--line:rgba(211,235,222,.18);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#06110f;color:var(--paper);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic UI",sans-serif;overscroll-behavior:none}
button{font:inherit;color:inherit;border:0;cursor:pointer;touch-action:manipulation}
button:focus-visible{outline:2px solid var(--water-soft);outline-offset:3px}
#app{position:relative;width:100%;height:100vh;height:100dvh;min-width:0;overflow:hidden;isolation:isolate;touch-action:none;background:#17372f}
#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;touch-action:none;background:#7ba4a1}
.vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at 50% 46%,transparent 45%,rgba(0,13,10,.2) 77%,rgba(0,8,7,.53) 120%)}
.film-grain{position:absolute;inset:-50%;z-index:2;pointer-events:none;opacity:.028;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");animation:grain .28s steps(2) infinite}
@keyframes grain{0%{transform:translate(0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}100%{transform:translate(-2%,-1%)}}
.screen{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s ease,visibility 0s linear .45s}
.screen.visible{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.title-screen{justify-content:flex-start;padding:calc(var(--safe-top) + 22px) calc(var(--safe-right) + 5vw) calc(var(--safe-bottom) + 18px) calc(var(--safe-left) + 5vw);overflow:auto}
.title-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,13,11,.94) 0%,rgba(4,18,15,.78) 35%,rgba(4,14,12,.18) 72%,rgba(0,0,0,.18)),linear-gradient(0deg,rgba(0,10,8,.68),transparent 50%);backdrop-filter:saturate(.9);pointer-events:none}
.title-content{position:relative;width:min(560px,52vw);min-width:390px;text-align:center;padding:4px 0;animation:titleIn 1.05s cubic-bezier(.2,.75,.2,1) both}
@keyframes titleIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.title-kamon{width:48px;height:48px;margin:0 auto 9px;border:1px solid rgba(212,192,139,.68);border-radius:50%;display:grid;place-items:center;position:relative;color:var(--gold);font-family:"Hiragino Mincho ProN","Yu Mincho",serif}
.title-kamon:before,.title-kamon:after{content:"";position:absolute;inset:4px;border:1px solid rgba(212,192,139,.28);border-radius:50%;transform:rotate(45deg)}
.title-kamon:after{inset:12px;border-radius:2px}.title-kamon span{position:relative;z-index:1;font-size:19px}
.eyebrow{margin:0 0 6px;color:var(--gold);font-size:10px;font-weight:700;letter-spacing:.26em;text-transform:uppercase}
h1{margin:0;font-weight:400;line-height:.9;text-shadow:0 5px 30px rgba(0,0,0,.4)}
.title-jp{display:block;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:clamp(38px,5.4vw,70px);letter-spacing:.2em;text-indent:.2em}
.title-en{display:block;margin-top:10px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(22px,3vw,39px);letter-spacing:.2em;text-indent:.2em;color:#d8ebe3}
.title-rule{display:flex;align-items:center;gap:11px;width:min(330px,80%);margin:12px auto;color:var(--gold);font-family:"Yu Mincho",serif;font-size:11px;letter-spacing:.26em}
.title-rule i{height:1px;background:linear-gradient(90deg,transparent,var(--gold));flex:1}.title-rule i:last-child{transform:scaleX(-1)}
.tagline{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:clamp(16px,1.7vw,22px);letter-spacing:.06em;margin:7px 0 5px}.tagline strong{color:var(--water-soft);font-weight:500}
.intro-copy{color:var(--muted);font-size:12px;line-height:1.8;margin:0 auto 14px;letter-spacing:.04em}
.start-options{display:flex;gap:9px;width:min(500px,100%);margin:0 auto 13px;text-align:left}
.option-group{flex:1;min-width:0}.option-label{display:block;margin:0 0 5px 2px;color:rgba(238,244,235,.55);font-size:9px;letter-spacing:.18em;text-transform:uppercase}
.segmented{display:flex;padding:3px;border:1px solid rgba(221,236,226,.16);border-radius:9px;background:rgba(3,18,15,.48);backdrop-filter:blur(10px)}
.segmented button{position:relative;min-height:34px;min-width:0;flex:1;padding:5px 7px;border-radius:6px;background:transparent;color:rgba(241,245,237,.58);font-size:10px;font-weight:700;letter-spacing:.06em;transition:.2s ease;white-space:nowrap}
.segmented button.selected{color:#071713;background:rgba(196,233,219,.91);box-shadow:0 2px 12px rgba(0,0,0,.25)}
.weather-dot{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;vertical-align:1px}.weather-dot.sunny{background:#ffd789;box-shadow:0 0 6px #ffc967}.weather-dot.cloudy{background:#a9bec0}.weather-dot.sunset{background:#ee8a5c;box-shadow:0 0 6px #e8794b}
.primary-button{width:min(340px,88%);min-height:57px;margin:0 auto;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;border:1px solid rgba(183,236,223,.7);border-radius:2px;color:#061612;background:linear-gradient(135deg,#bceee0,#70d3c8);box-shadow:0 9px 34px rgba(15,116,103,.28),inset 0 1px rgba(255,255,255,.65);transition:transform .18s,filter .18s;position:relative;overflow:hidden}
.primary-button:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%);transform:translateX(-120%);animation:buttonShine 4s 1.8s infinite}
@keyframes buttonShine{0%,72%{transform:translateX(-120%)}90%,100%{transform:translateX(120%)}}
.primary-button:active{transform:scale(.975)}.primary-button:disabled{filter:saturate(.2);opacity:.6}
.primary-button span{font-size:14px;font-weight:800;letter-spacing:.12em}.primary-button small{font-family:Georgia,serif;font-size:8px;letter-spacing:.25em;opacity:.65}
.primary-button.compact{min-height:53px;width:100%;margin-top:15px}
.start-notes{display:flex;justify-content:center;gap:22px;margin-top:9px;color:rgba(234,244,237,.5);font-size:9px;letter-spacing:.08em}.start-notes b{display:inline-grid;width:17px;height:17px;margin-right:4px;place-items:center;border:1px solid rgba(221,238,228,.25);border-radius:50%;font-size:10px;color:var(--water-soft)}
.title-version{position:absolute;right:calc(var(--safe-right) + 20px);bottom:calc(var(--safe-bottom) + 13px);font:8px Georgia,serif;letter-spacing:.22em;color:rgba(235,242,234,.35)}
.loading-screen{background:rgba(3,16,14,.9);flex-direction:column;z-index:45}.loading-screen.visible{opacity:1;visibility:visible;pointer-events:auto}
.loading-mark{display:flex;align-items:flex-end;gap:5px;height:38px;margin-bottom:16px}.loading-mark span{display:block;width:4px;border-radius:4px;background:var(--water-soft);animation:riverBars 1s ease-in-out infinite}.loading-mark span:nth-child(1){height:14px}.loading-mark span:nth-child(2){height:28px;animation-delay:.12s}.loading-mark span:nth-child(3){height:20px;animation-delay:.24s}@keyframes riverBars{50%{transform:translateY(-7px);opacity:.45}}
.loading-screen p{margin:0 0 12px;font-family:"Yu Mincho",serif;letter-spacing:.14em}.loading-track{width:min(270px,65vw);height:2px;background:rgba(255,255,255,.14)}.loading-track i{display:block;width:0;height:100%;background:var(--water-soft);box-shadow:0 0 12px var(--water);transition:width .3s}.loading-screen small{margin-top:12px;color:rgba(255,255,255,.32);font:8px Georgia,serif;letter-spacing:.28em}
.glass-panel{border:1px solid var(--line);background:linear-gradient(135deg,rgba(7,31,25,.68),rgba(4,21,18,.42));box-shadow:0 6px 24px rgba(0,0,0,.13),inset 0 1px rgba(255,255,255,.045);backdrop-filter:blur(13px) saturate(1.25);-webkit-backdrop-filter:blur(13px) saturate(1.25)}
.hud{position:absolute;inset:0;z-index:8;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s}.hud.visible{opacity:1;visibility:visible}
.hud-top{position:absolute;top:calc(var(--safe-top) + 10px);left:calc(var(--safe-left) + 12px);right:calc(var(--safe-right) + 82px);height:52px;display:grid;grid-template-columns:minmax(130px,190px) minmax(170px,270px) minmax(95px,140px);align-items:start;gap:8px}
.zone-readout,.score-readout{height:48px;padding:8px 12px;border-radius:8px}.hud-label{display:block;color:rgba(224,239,229,.46);font:7px Georgia,serif;letter-spacing:.2em}.zone-readout strong{display:block;margin-top:4px;font-family:"Yu Mincho",serif;font-size:13px;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.score-readout{text-align:right}.score-readout strong{display:block;margin-top:3px;font:700 17px Georgia,serif;letter-spacing:.06em;color:var(--water-soft)}
.journey-readout{height:51px;padding:7px 11px;border-radius:8px}.time-line{display:flex;justify-content:space-between;align-items:baseline;font:700 14px Georgia,serif}.time-line span:last-child{font-size:10px;color:var(--water-soft)}.progress-track{height:3px;margin-top:6px;border-radius:4px;background:rgba(255,255,255,.13);overflow:hidden}.progress-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--gold),var(--water-soft));box-shadow:0 0 8px var(--water);transition:width .18s linear}.journey-ends{display:flex;justify-content:space-between;margin-top:4px;color:rgba(232,241,234,.43);font-size:7px;letter-spacing:.1em}
.danger-meter{position:absolute;left:calc(var(--safe-left) + 12px);top:calc(var(--safe-top) + 69px);height:25px;width:178px;padding:5px 8px;border-radius:7px;display:flex;align-items:center;gap:7px;color:rgba(237,243,235,.62);font-size:8px;transition:border-color .3s}.danger-meter b{width:21px;text-align:right;font:10px Georgia,serif;color:#d4e9df}.danger-track{flex:1;height:3px;background:rgba(255,255,255,.12);border-radius:4px;overflow:hidden}.danger-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,#6bd8c6,#e5c76c,#e96f59);transition:width .2s}.danger-meter.warning{border-color:rgba(239,118,94,.55);animation:dangerPulse 1.15s ease-in-out infinite}@keyframes dangerPulse{50%{box-shadow:0 0 18px rgba(236,92,68,.2)}}
.hud-actions{position:absolute;right:calc(var(--safe-right) + 10px);top:calc(var(--safe-top) + 10px);display:flex;flex-direction:column;gap:6px;pointer-events:auto}
.icon-button{width:58px;height:50px;border-radius:9px;display:grid;grid-template-columns:25px 1fr;place-items:center;padding:5px 6px;background-color:transparent;color:#d9ece4;transition:transform .15s,background .2s}.icon-button:active{transform:scale(.93);background:rgba(83,177,160,.38)}.icon-button svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}.icon-button small{font-size:7px;color:rgba(235,244,238,.62);line-height:1.2}.sound-off{display:none}.icon-button.muted .sound-on{display:none}.icon-button.muted .sound-off{display:block}.icon-button.muted{color:#9ca9a5}
.controls{position:absolute;inset:0;z-index:10;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s}.controls.visible{opacity:1;visibility:visible}
.steer-pad{position:absolute;left:calc(var(--safe-left) + 18px);bottom:calc(var(--safe-bottom) + 16px);width:154px;height:78px;border:1px solid rgba(214,238,226,.2);border-radius:40px;background:radial-gradient(circle at 50% 40%,rgba(20,68,58,.56),rgba(3,20,17,.36));box-shadow:0 8px 28px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.06);backdrop-filter:blur(10px);pointer-events:auto;touch-action:none;display:flex;align-items:center;justify-content:space-between;padding:0 15px;color:rgba(229,243,235,.45)}
.steer-pad small{position:absolute;left:0;right:0;bottom:6px;text-align:center;font:6px Georgia,serif;letter-spacing:.2em;color:rgba(224,242,233,.38)}.steer-arrow{font:300 31px Georgia,serif;user-select:none}.steer-knob{position:absolute;left:50%;top:8px;margin-left:-30px;width:60px;height:60px;border-radius:50%;background:linear-gradient(145deg,rgba(153,226,209,.85),rgba(53,143,128,.8));box-shadow:0 5px 17px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.52);display:grid;place-items:center;transition:transform .08s linear}.steer-knob i{width:16px;height:23px;border-left:1px solid rgba(0,30,24,.55);border-right:1px solid rgba(0,30,24,.55)}
.pole-button{position:absolute;right:calc(var(--safe-right) + 22px);bottom:calc(var(--safe-bottom) + 18px);width:83px;height:83px;border-radius:50%;background:radial-gradient(circle,#143f35 30%,#071c18 71%);box-shadow:0 8px 28px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.12);pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .14s;overflow:hidden}.pole-button:active,.pole-button.active{transform:scale(.91)}.pole-button b{font-family:"Yu Mincho",serif;font-size:25px;font-weight:500;position:relative}.pole-button small{font:6px Georgia,serif;letter-spacing:.2em;color:var(--water-soft);position:relative}.pole-ring{position:absolute;inset:3px;border-radius:50%;background:conic-gradient(var(--water-soft) var(--cooldown,360deg),rgba(255,255,255,.09) 0);-webkit-mask:radial-gradient(circle,transparent 61%,#000 63%);mask:radial-gradient(circle,transparent 61%,#000 63%)}
.zone-card{position:absolute;z-index:11;left:50%;top:22%;width:min(370px,70vw);transform:translate(-50%,16px);opacity:0;text-align:center;pointer-events:none;text-shadow:0 3px 16px rgba(0,0,0,.75);transition:.55s cubic-bezier(.2,.7,.2,1)}.zone-card.show{opacity:1;transform:translate(-50%,0)}.zone-card span{display:block;font:8px Georgia,serif;letter-spacing:.28em;color:var(--gold)}.zone-card strong{display:block;margin-top:5px;font-family:"Yu Mincho",serif;font-size:clamp(21px,3vw,34px);font-weight:400;letter-spacing:.12em}.zone-card i{display:block;width:44px;height:1px;margin:9px auto;background:var(--water-soft);box-shadow:0 0 9px var(--water)}
.caption{position:absolute;z-index:12;left:50%;bottom:calc(var(--safe-bottom) + 20px);transform:translate(-50%,15px);width:min(500px,58vw);min-height:42px;padding:10px 17px 10px 61px;border:1px solid rgba(223,237,227,.16);border-radius:7px;background:rgba(2,18,15,.71);backdrop-filter:blur(12px);box-shadow:0 7px 26px rgba(0,0,0,.25);opacity:0;transition:.35s;pointer-events:none}.caption.show{opacity:1;transform:translate(-50%,0)}.caption p{margin:0;font-size:12px;line-height:1.6;letter-spacing:.03em}.captain-badge{position:absolute;left:10px;top:8px;bottom:8px;width:39px;display:grid;place-items:center;border-right:1px solid rgba(216,234,223,.15);font-family:"Yu Mincho",serif;font-size:10px;color:var(--water-soft)}
.route-feedback{position:absolute;z-index:13;left:50%;top:36%;transform:translate(-50%,16px) scale(.96);opacity:0;text-align:center;pointer-events:none;text-shadow:0 4px 20px rgba(0,0,0,.8);transition:.32s cubic-bezier(.2,.8,.25,1)}.route-feedback.show{opacity:1;transform:translate(-50%,0) scale(1)}.route-feedback strong{display:block;font:700 clamp(20px,3.3vw,38px) Georgia,serif;letter-spacing:.12em;color:var(--water-soft)}.route-feedback span{display:inline-block;margin-top:4px;padding:3px 10px;border-left:1px solid;border-right:1px solid;font-size:9px;letter-spacing:.12em;color:#dcece5}.route-feedback[data-type="perfect"] strong{color:#ffe0a0;text-shadow:0 0 18px rgba(255,206,110,.48)}.route-feedback[data-type="near"] strong{color:#fff}.route-feedback[data-type="impact"] strong{color:#ff8b70}
.milestone{position:absolute;z-index:12;left:calc(var(--safe-left) + 18px);top:calc(var(--safe-top) + 110px);min-width:190px;padding:9px 13px 9px 17px;border-left:2px solid var(--gold);background:linear-gradient(90deg,rgba(5,24,20,.72),transparent);opacity:0;transform:translateX(-14px);transition:.35s;pointer-events:none}.milestone.show{opacity:1;transform:none}.milestone span{display:block;font-size:8px;letter-spacing:.15em;color:var(--gold)}.milestone strong{display:block;margin-top:3px;font:12px Georgia,"Yu Mincho",serif;letter-spacing:.08em}
.performance-note{position:absolute;z-index:15;left:50%;top:calc(var(--safe-top) + 70px);transform:translate(-50%,-8px);padding:6px 12px;border-radius:16px;background:rgba(3,19,16,.7);font-size:8px;letter-spacing:.08em;color:rgba(229,242,234,.74);opacity:0;transition:.25s}.performance-note.show{opacity:1;transform:translate(-50%,0)}
.pause-screen{z-index:30;background:rgba(2,12,10,.68);backdrop-filter:blur(11px);padding:calc(var(--safe-top) + 14px) calc(var(--safe-right) + 14px) calc(var(--safe-bottom) + 14px) calc(var(--safe-left) + 14px)}.pause-screen.visible{opacity:1;visibility:visible;pointer-events:auto}
.modal-card{width:min(430px,92vw);max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 28px);overflow:auto;padding:25px;border:1px solid rgba(220,236,225,.2);border-radius:14px;background:linear-gradient(145deg,rgba(10,35,29,.94),rgba(3,17,14,.94));box-shadow:0 24px 70px rgba(0,0,0,.5);text-align:center}.modal-card h2{margin:0 0 15px;font:400 23px "Yu Mincho",serif;letter-spacing:.08em}.pause-current{display:flex;justify-content:space-between;padding:8px 11px;margin-bottom:13px;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);font-size:9px;color:var(--muted)}.pause-current strong{color:var(--water-soft);letter-spacing:.14em}.pause-quality{text-align:left}.modal-actions{display:flex;justify-content:center;gap:10px;margin-top:10px}.modal-actions button,#result-title{min-height:40px;padding:7px 18px;border:1px solid rgba(224,238,229,.16);border-radius:7px;background:rgba(255,255,255,.04);font-size:10px;color:rgba(238,244,239,.68)}.keyboard-help{margin:13px 0 0;font-size:8px;color:rgba(235,244,238,.35)}
.photo-ui{position:absolute;inset:0;z-index:25;opacity:0;visibility:hidden;pointer-events:none;transition:.3s}.photo-ui.visible{opacity:1;visibility:visible}.photo-top{position:absolute;top:calc(var(--safe-top) + 12px);left:calc(var(--safe-left) + 14px);right:calc(var(--safe-right) + 14px);display:flex;justify-content:space-between;align-items:flex-start;text-shadow:0 2px 8px #000}.photo-top span{display:block;font:11px Georgia,serif;letter-spacing:.24em}.photo-top small{display:block;margin-top:4px;color:rgba(255,255,255,.62);font-size:8px}.photo-top button{pointer-events:auto;min-width:58px;min-height:38px;border:1px solid rgba(255,255,255,.32);border-radius:20px;background:rgba(0,0,0,.32);font-size:10px;backdrop-filter:blur(8px)}
.photo-reticle{position:absolute;inset:12%;opacity:.45}.photo-reticle i{position:absolute;width:28px;height:28px;border-color:white}.photo-reticle i:nth-child(1){left:0;top:0;border-left:1px solid;border-top:1px solid}.photo-reticle i:nth-child(2){right:0;top:0;border-right:1px solid;border-top:1px solid}.photo-reticle i:nth-child(3){left:0;bottom:0;border-left:1px solid;border-bottom:1px solid}.photo-reticle i:nth-child(4){right:0;bottom:0;border-right:1px solid;border-bottom:1px solid}
.photo-bottom{position:absolute;bottom:calc(var(--safe-bottom) + 13px);left:calc(var(--safe-left) + 14px);right:calc(var(--safe-right) + 14px);height:72px;display:grid;grid-template-columns:1fr 90px 1fr;align-items:center}.photo-bottom button{pointer-events:auto}.photo-bottom>button:first-child{justify-self:start;width:66px;height:52px;border-radius:9px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.23);display:flex;align-items:center;justify-content:center;flex-direction:column;backdrop-filter:blur(8px)}.photo-bottom>button span{font-size:17px}.photo-bottom>button small{font-size:7px;margin-top:2px}.shutter{justify-self:center;width:67px;height:67px;border-radius:50%;background:transparent;border:2px solid white;display:grid;place-items:center}.shutter i{width:53px;height:53px;border-radius:50%;background:white;transition:.13s}.shutter:active i,.shutter.capturing i{transform:scale(.72);background:var(--water-soft)}.photo-signature{justify-self:end;text-align:right;text-shadow:0 2px 8px #000}.photo-signature b{display:block;font:18px "Yu Mincho",serif;letter-spacing:.1em}.photo-signature small{display:block;font:7px Georgia,serif;letter-spacing:.2em}
.result-screen{z-index:35;padding:calc(var(--safe-top) + 14px) calc(var(--safe-right) + 14px) calc(var(--safe-bottom) + 14px) calc(var(--safe-left) + 14px);overflow:auto}.result-screen.visible{opacity:1;visibility:visible;pointer-events:auto}.result-backdrop{position:fixed;inset:0;background:linear-gradient(90deg,rgba(1,14,11,.9),rgba(1,16,13,.62)),radial-gradient(circle at 70% 30%,rgba(68,143,125,.16),transparent 50%);backdrop-filter:blur(8px)}.result-card{position:relative;width:min(670px,94vw);padding:23px 30px;border:1px solid rgba(216,234,221,.2);background:linear-gradient(145deg,rgba(7,29,24,.95),rgba(2,15,13,.94));box-shadow:0 25px 80px rgba(0,0,0,.55);text-align:center}.result-card:before,.result-card:after{content:"";position:absolute;width:28px;height:28px;border-color:var(--gold)}.result-card:before{left:8px;top:8px;border-left:1px solid;border-top:1px solid}.result-card:after{right:8px;bottom:8px;border-right:1px solid;border-bottom:1px solid}.result-card h2{margin:0;font:400 29px Georgia,serif;letter-spacing:.16em}.result-arrival{margin:3px 0 10px;font:13px "Yu Mincho",serif;color:var(--gold);letter-spacing:.24em}.result-score{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;padding:10px 8px;border-top:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09)}.result-score>span{justify-self:end;margin-right:20px;font:8px Georgia,serif;letter-spacing:.2em;color:var(--muted)}.result-score>strong{font:700 clamp(32px,5vw,50px) Georgia,serif;letter-spacing:.06em;color:var(--water-soft);text-shadow:0 0 20px rgba(95,214,198,.23)}.result-score>small{justify-self:start;margin-left:20px;font:7px Georgia,serif;letter-spacing:.14em;color:rgba(236,244,238,.42)}.result-score>small b{color:var(--gold);font-size:10px}.result-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin:13px 0}.result-grid>div{min-width:0;padding:9px 4px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025)}.result-grid span{display:block;font-size:7px;color:rgba(236,244,238,.5);white-space:nowrap}.result-grid strong{display:block;margin-top:5px;font:19px Georgia,serif}.result-grid strong small{font-size:8px;margin-left:2px;color:var(--muted)}.result-grid strong b{font:inherit}.result-message{margin:8px 0;color:rgba(236,244,238,.57);font:11px "Yu Mincho",serif;letter-spacing:.05em}.result-actions{display:flex;gap:9px;align-items:center;max-width:380px;margin:0 auto}.result-actions .primary-button{flex:1;margin-top:0}.result-actions>#result-title{width:94px;flex:0 0 94px;min-height:53px}
.rotate-hint{position:absolute;z-index:40;left:50%;top:50%;transform:translate(-50%,-50%) scale(.95);width:min(300px,85vw);padding:18px;border:1px solid rgba(255,255,255,.2);border-radius:14px;background:rgba(3,19,16,.9);backdrop-filter:blur(14px);text-align:center;opacity:0;visibility:hidden;pointer-events:none;transition:.3s}.rotate-hint.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}.rotate-hint strong{display:block;margin-top:9px;font-size:12px}.rotate-hint span{display:block;margin-top:5px;font-size:9px;color:var(--muted)}.phone-rotate{width:45px;height:63px;margin:auto;border:2px solid var(--water-soft);border-radius:7px;animation:rotatePhone 2.4s ease-in-out infinite}.phone-rotate i{display:block;width:4px;height:4px;border-radius:50%;background:var(--water-soft);margin:4px auto}@keyframes rotatePhone{0%,30%{transform:rotate(0)}65%,100%{transform:rotate(90deg)}}
.toast{position:absolute;z-index:60;left:50%;bottom:calc(var(--safe-bottom) + 16px);transform:translate(-50%,12px);max-width:80vw;padding:8px 14px;border:1px solid rgba(255,255,255,.14);border-radius:22px;background:rgba(2,16,13,.82);box-shadow:0 8px 22px rgba(0,0,0,.25);font-size:9px;letter-spacing:.05em;white-space:nowrap;opacity:0;visibility:hidden;transition:.25s;pointer-events:none}.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
.fatal-screen{z-index:80;background:#061512}.fatal-screen.visible{opacity:1;visibility:visible;pointer-events:auto}.fatal-screen p{font-size:12px;line-height:1.7;color:var(--muted)}

@media (max-height:520px) and (orientation:landscape){
  .title-screen{padding-top:calc(var(--safe-top) + 10px);padding-bottom:calc(var(--safe-bottom) + 8px)}
  .title-content{width:min(510px,53vw);min-width:355px}.title-kamon{width:34px;height:34px;margin-bottom:5px}.title-kamon span{font-size:14px}.eyebrow{font-size:8px;margin-bottom:3px}.title-jp{font-size:34px}.title-en{font-size:22px;margin-top:6px}.title-rule{margin:7px auto}.tagline{font-size:14px;margin:4px}.intro-copy{display:none}.start-options{margin-bottom:8px}.segmented button{min-height:29px;font-size:8px}.option-label{font-size:7px}.primary-button{min-height:48px}.primary-button span{font-size:12px}.start-notes{margin-top:5px}.title-version{display:none}
  .hud-top{right:calc(var(--safe-right) + 72px)}.hud-actions{gap:4px}.icon-button{width:52px;height:43px}.icon-button svg{width:20px;height:20px}.desktop-action{display:none}
  .steer-pad{width:138px;height:68px;bottom:calc(var(--safe-bottom) + 10px)}.steer-knob{width:52px;height:52px;margin-left:-26px}.pole-button{width:72px;height:72px;bottom:calc(var(--safe-bottom) + 11px)}.pole-button b{font-size:22px}
  .caption{bottom:calc(var(--safe-bottom) + 10px);width:min(440px,56vw);min-height:36px;padding-top:7px;padding-bottom:7px}.caption p{font-size:10px}.zone-card{top:25%}.zone-card strong{font-size:21px}
  .modal-card{padding:16px}.modal-card h2{font-size:18px;margin-bottom:8px}.pause-current{margin-bottom:8px}.primary-button.compact{min-height:44px;margin-top:9px}.keyboard-help{display:none}
  .result-card{width:min(720px,96vw);padding:13px 23px}.result-card h2{font-size:21px}.result-arrival{margin-bottom:5px}.result-score{padding:5px}.result-score>strong{font-size:30px}.result-grid{margin:7px 0}.result-grid>div{padding:5px 3px}.result-grid strong{font-size:15px;margin-top:2px}.result-message{display:none}.result-actions .primary-button,.result-actions>#result-title{min-height:43px}.result-actions .primary-button{margin-top:0}
}
@media (max-width:680px){
  .hud-top{grid-template-columns:minmax(98px,1fr) minmax(140px,1.45fr);right:calc(var(--safe-right) + 68px)}.score-readout{display:none}.zone-readout{padding-left:9px;padding-right:9px}.zone-readout strong{font-size:11px}.journey-readout{padding-left:8px;padding-right:8px}.danger-meter{width:150px}.hud-actions{right:calc(var(--safe-right) + 7px)}
  .milestone{min-width:155px}.caption{width:min(430px,61vw)}
}
@media (orientation:portrait){
  .title-screen{justify-content:center;padding:calc(var(--safe-top) + 18px) calc(var(--safe-right) + 16px) calc(var(--safe-bottom) + 18px) calc(var(--safe-left) + 16px)}
  .title-shade{background:linear-gradient(0deg,rgba(2,14,11,.95),rgba(3,18,15,.62) 70%,rgba(3,14,12,.55))}.title-content{width:min(500px,100%);min-width:0}.title-jp{font-size:clamp(38px,13vw,64px)}.title-en{font-size:clamp(22px,7vw,34px)}.start-options{flex-direction:column;max-width:430px}.intro-copy{font-size:11px}.primary-button{width:min(340px,100%)}
  .title-version{display:none}.hud-top{grid-template-columns:1fr;right:calc(var(--safe-right) + 67px)}.zone-readout{display:none}.journey-readout{width:100%}.danger-meter{top:calc(var(--safe-top) + 68px);width:140px}.hud-actions{top:calc(var(--safe-top) + 9px)}.icon-button{width:48px;height:44px;grid-template-columns:1fr}.icon-button small{display:none}.desktop-action{display:none}
  .hud-actions .icon-button:nth-child(n+4){display:none}.controls{transform:scale(.88);transform-origin:center bottom}.steer-pad{left:calc(var(--safe-left) + 9px)}.pole-button{right:calc(var(--safe-right) + 13px)}.caption{width:calc(100vw - var(--safe-left) - var(--safe-right) - 34px);bottom:calc(var(--safe-bottom) + 111px)}.zone-card{top:19%;width:90vw}.route-feedback{top:31%}.milestone{top:calc(var(--safe-top) + 102px)}
  .result-grid{grid-template-columns:repeat(3,1fr)}.result-score{grid-template-columns:1fr}.result-score>span,.result-score>strong,.result-score>small{justify-self:center;margin:0}.result-score>small{margin-top:3px}.result-actions{flex-direction:column}.result-actions>#result-title{width:100%;flex-basis:auto}.result-card{margin:auto}
}
@media (max-width:360px) and (orientation:portrait){
  .title-kamon{width:38px;height:38px}.title-content{padding-top:4px}.title-jp{font-size:38px}.title-en{font-size:21px}.tagline{font-size:15px}.intro-copy{line-height:1.55}.segmented button{font-size:8px;padding:4px;min-height:32px}.start-options{gap:6px;margin-bottom:9px}.start-notes{gap:10px}.start-notes span{font-size:8px}.primary-button{min-height:52px}
  .steer-pad{width:132px;height:68px}.steer-knob{width:52px;height:52px;margin-left:-26px}.pole-button{width:69px;height:69px}.modal-card{padding:17px}.result-card{padding:17px 14px}.result-grid{gap:4px}
}
@media (prefers-reduced-motion:reduce){.film-grain,.loading-mark span,.danger-meter.warning,.phone-rotate{animation:none}.screen,.zone-card,.caption,.route-feedback,.milestone,.toast{transition-duration:.01s}}


/* ===== V1.1 polish: iPhone-first input, premium HUD, clearer controls ===== */
html,body,#app,#game-canvas{touch-action:none;-ms-touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-text-size-adjust:100%;}
input,textarea,[contenteditable="true"]{-webkit-user-select:text;user-select:text;}
body{background:#061612;}
.vignette{background:radial-gradient(circle at 50% 44%,transparent 38%,rgba(0,12,10,.10) 65%,rgba(0,7,6,.48) 112%),linear-gradient(180deg,rgba(2,14,15,.06),transparent 32%,rgba(1,12,10,.08));}
.film-grain{opacity:.018;mix-blend-mode:soft-light;}
.glass-panel{border-color:rgba(205,236,226,.20);background:linear-gradient(145deg,rgba(5,28,23,.66),rgba(3,17,15,.40));box-shadow:0 10px 32px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.07);backdrop-filter:blur(18px) saturate(1.35);-webkit-backdrop-filter:blur(18px) saturate(1.35);}
.hud-top{gap:7px;}
.journey-readout{border-radius:13px;padding:8px 12px;height:54px;}
.time-line{font-size:15px;letter-spacing:.025em;}.time-line span:last-child{font-size:11px;}
.progress-track{height:4px;background:rgba(255,255,255,.10);box-shadow:inset 0 1px 2px rgba(0,0,0,.32);}
.progress-track i{background:linear-gradient(90deg,#e7ca83 0%,#a8eee5 46%,#6ce0d7 100%);box-shadow:0 0 12px rgba(104,224,214,.52);}
.danger-meter{border-radius:12px;height:30px;padding:6px 10px;background:linear-gradient(145deg,rgba(5,28,23,.61),rgba(3,17,15,.34));}
.hud-actions{gap:7px;}
.icon-button{width:58px;height:54px;border-radius:15px;grid-template-columns:25px 1fr;padding:6px;background:linear-gradient(145deg,rgba(5,29,24,.70),rgba(3,18,16,.47));box-shadow:0 8px 25px rgba(0,0,0,.20),inset 0 1px rgba(255,255,255,.07);border:1px solid rgba(208,238,229,.20);}
.icon-button svg{width:24px;height:24px;stroke-width:1.65;}.icon-button small{font-weight:700;letter-spacing:.04em;}
.view-button{color:#b8f3e9;}.view-button:after{content:"VIEW";position:absolute;right:5px;top:4px;font:600 5px Georgia,serif;letter-spacing:.12em;color:rgba(184,243,233,.42);}
.icon-button{position:relative;}
.steer-pad{width:166px;height:82px;border-radius:44px;border-color:rgba(196,235,225,.23);background:linear-gradient(145deg,rgba(6,30,25,.49),rgba(4,18,16,.28));box-shadow:0 12px 34px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.07);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);}
.steer-arrow{font-size:34px;color:rgba(210,241,232,.58);text-shadow:0 0 14px rgba(108,224,213,.20);}
.steer-knob{width:62px;height:62px;margin-left:-31px;top:9px;background:linear-gradient(145deg,rgba(193,244,232,.96),rgba(78,178,161,.88));box-shadow:0 8px 22px rgba(0,0,0,.34),0 0 20px rgba(104,224,214,.12),inset 0 1px rgba(255,255,255,.7);}
.steer-knob i{height:24px;border-color:rgba(3,35,29,.53);}
.pole-button{width:86px;height:86px;border:1px solid rgba(179,239,224,.34);background:radial-gradient(circle at 45% 38%,#17493d 0%,#0a2a23 48%,#061b17 78%);box-shadow:0 12px 34px rgba(0,0,0,.29),0 0 0 5px rgba(7,32,27,.22),inset 0 1px rgba(255,255,255,.12);}
.pole-button b{font-size:26px;text-shadow:0 2px 10px rgba(0,0,0,.35);}.pole-button small{font-size:6px;letter-spacing:.25em;}
.caption{border-radius:13px;background:linear-gradient(145deg,rgba(3,23,19,.74),rgba(2,14,12,.59));box-shadow:0 12px 36px rgba(0,0,0,.25);}
.route-feedback strong{filter:drop-shadow(0 4px 14px rgba(0,0,0,.45));}
.rotate-hint{top:auto;bottom:calc(var(--safe-bottom) + 112px);width:auto;max-width:calc(100vw - 32px);padding:9px 13px 9px 48px;border-radius:18px;text-align:left;background:rgba(3,22,18,.83);box-shadow:0 10px 28px rgba(0,0,0,.28);pointer-events:none;}
.rotate-hint .phone-rotate{position:absolute;left:15px;top:50%;width:20px;height:28px;margin:0;transform:translateY(-50%);border-width:1.5px;border-radius:4px;animation:rotatePhoneMini 1.7s ease-in-out 1;}
.rotate-hint .phone-rotate i{width:2px;height:2px;margin:2px auto;}.rotate-hint strong{margin:0;font-size:10px;}.rotate-hint span{margin-top:2px;font-size:7px;}
@keyframes rotatePhoneMini{0%,30%{transform:translateY(-50%) rotate(0)}70%,100%{transform:translateY(-50%) rotate(90deg)}}

@media (orientation:portrait){
  .hud-top{left:calc(var(--safe-left) + 12px);right:calc(var(--safe-right) + 78px);top:calc(var(--safe-top) + 11px)}
  .journey-readout{height:58px;padding:9px 12px;}.time-line{font-size:17px}.journey-ends{font-size:8px;margin-top:5px}
  .danger-meter{top:calc(var(--safe-top) + 77px);left:calc(var(--safe-left) + 12px);height:31px;width:174px}
  .hud-actions{right:calc(var(--safe-right) + 9px);top:calc(var(--safe-top) + 11px);gap:8px}.icon-button{width:58px;height:58px;grid-template-columns:1fr;padding:8px}.icon-button small{display:none}.icon-button svg{width:27px;height:27px}
  .controls{transform:none}.steer-pad{left:calc(var(--safe-left) + 14px);bottom:calc(var(--safe-bottom) + 16px);width:164px;height:80px}.pole-button{right:calc(var(--safe-right) + 18px);bottom:calc(var(--safe-bottom) + 17px);width:84px;height:84px}
  .caption{bottom:calc(var(--safe-bottom) + 116px);width:calc(100vw - var(--safe-left) - var(--safe-right) - 30px)}
  .rotate-hint{bottom:calc(var(--safe-bottom) + 116px)}
}
@media (max-width:380px) and (orientation:portrait){
  .steer-pad{width:148px;height:74px}.steer-knob{width:56px;height:56px;margin-left:-28px;top:8px}.pole-button{width:76px;height:76px}.hud-actions .icon-button{width:54px;height:54px}.danger-meter{width:158px}
}

.steer-pad[data-dir="left"] .steer-arrow.left,.steer-pad[data-dir="right"] .steer-arrow.right{color:#d9fff8;transform:scale(1.12);text-shadow:0 0 18px rgba(112,238,224,.58)}
.steer-arrow{transition:color .12s,transform .12s,text-shadow .12s}