:root{color-scheme:dark;--ink:#f8ecdc;--gold:#e9b981;--muted:#d1c5c1;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans",sans-serif;color:var(--ink);background:#191922}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{touch-action:none;-webkit-user-select:none;user-select:none}button,input{-webkit-tap-highlight-color:transparent}button{font:inherit;font-size:16px;min-height:48px;cursor:pointer;border:1px solid #ffffff30;border-radius:8px;background:#20202dd9;color:var(--ink);padding:12px 18px;touch-action:manipulation}button:hover{border-color:var(--gold)}button:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button:disabled{opacity:.5;cursor:wait}button[aria-pressed=true]{border-color:var(--gold)}[hidden]{display:none!important}
#canvas{position:fixed;inset:0;width:100%;height:100%;display:block;outline:0;touch-action:none}#loading{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:#191922;padding:24px}.loading-card{width:min(100%,400px)}.loading-card h1{font-size:26px;font-weight:400}progress{width:100%;height:6px;accent-color:var(--gold);margin:20px 0}.loading-card p{line-height:1.7}#loading-text{color:var(--muted);font-size:15px}
#menu{position:fixed;inset:0;z-index:20;overflow:auto;touch-action:pan-y;background:linear-gradient(90deg,#15151ff2,#15151fc0 32%,#15151f10 85%);padding: max(30px,env(safe-area-inset-top)) max(30px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(34px,env(safe-area-inset-left));display:flex;align-items:center}.menu-card{width:min(380px,100%);padding:12px 0}.eyebrow{font-size:12px;letter-spacing:.16em;color:var(--gold);margin:0 0 25px}.menu-card h1{font-size:64px;font-weight:350;line-height:1.05;letter-spacing:.02em;margin:0}.menu-card h1 span{display:block;font-size:30px;font-weight:400;margin-top:14px}.japanese-title{color:var(--gold);font-size:17px;margin:15px 0 25px}.intro{font-size:16px;color:var(--muted);line-height:1.8;margin:0 0 24px}.menu-card>button{width:100%;margin-bottom:10px}.primary{background:var(--gold);color:#24222a;border:0;display:flex;justify-content:space-between;align-items:center;font-weight:600;min-height:54px}.settings{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:17px 0;font-size:14px}.settings input{width:52%;accent-color:var(--gold);height:32px}.options{display:flex;gap:10px}.options button{flex:1;font-size:14px;padding:10px}.instructions{font-size:13px;line-height:1.8;color:var(--muted);margin-bottom:0}
#hud{position:fixed;inset:0;pointer-events:none;text-shadow:0 2px 5px #000a;background:linear-gradient(#0b102255,transparent 20%,transparent 75%,#0b102255)}#hud header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding: max(16px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left));position:relative;z-index:3}.brand{font-size:18px;letter-spacing:.13em}.brand span{font-size:11px;letter-spacing:.1em}#pause{pointer-events:auto;font-size:14px;min-height:44px;padding:9px 15px}#location{position:absolute;left:max(20px,env(safe-area-inset-left));top:calc(max(16px,env(safe-area-inset-top)) + 55px);font-size:13px;color:#f3e6db}#distance{position:absolute;right:max(20px,env(safe-area-inset-right));top:calc(max(16px,env(safe-area-inset-top)) + 55px);font-size:13px}#look-area{position:absolute;inset:0;pointer-events:auto;touch-action:none;z-index:1}#touch-controls{position:absolute;inset:0;z-index:2;pointer-events:none}.joystick-wrap{position:absolute;bottom:calc(max(20px,env(safe-area-inset-bottom)) + 14px);left:calc(max(20px,env(safe-area-inset-left)) + 5px);text-align:center}.joystick-wrap>span{display:block;font-size:12px;letter-spacing:.2em;margin-top:10px;color:#fff9}#joystick{width:126px;height:126px;border:1px solid #ffefd369;border-radius:50%;background:#1719234f;pointer-events:auto;touch-action:none;display:grid;place-items:center;box-shadow:inset 0 0 0 20px #ffefd307}#thumb{width:50px;height:50px;border-radius:50%;background:#f3d7b1b0;border:1px solid #fff4;box-shadow:0 2px 12px #0003;pointer-events:none}.actions{position:absolute;right:max(20px,env(safe-area-inset-right));bottom:calc(max(25px,env(safe-area-inset-bottom)) + 16px);display:flex;gap:10px;pointer-events:auto}.actions button{border-radius:24px;background:#17192394;font-size:14px;min-width:68px;min-height:50px;padding:10px 14px}.actions button[aria-pressed=true]{background:#d9ab77d9;color:#201e25}.look-hint{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:calc(max(25px,env(safe-area-inset-bottom)) + 85px);font-size:12px;color:#fff9}footer{position:absolute;bottom:20px;left:24px;font-size:14px}.touch-copy,#touch-controls{display:none}
@media(pointer:coarse){.touch-copy,#touch-controls{display:block}.desktop-copy{display:none}}
@media(max-width:600px){#menu{padding: max(24px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom));background:linear-gradient(90deg,#15151feb,#15151f90)}.menu-card{max-width:350px;margin:auto}.menu-card h1{font-size:54px}.menu-card h1 span{font-size:26px}.eyebrow{font-size:11px;margin-bottom:22px}.intro{font-size:15px}.brand span{display:none}#location{max-width:72%;font-size:12px}#joystick{width:116px;height:116px}.actions{gap:7px}.actions button{min-width:60px;padding:10px 12px}}
@media(max-height:540px) and (orientation:landscape){#menu{align-items:flex-start;padding-top:max(16px,env(safe-area-inset-top));padding-bottom:16px}.menu-card{width:min(680px,100%);display:grid;grid-template-columns:1fr 1fr;gap:8px 28px;margin:auto}.eyebrow{grid-column:1;margin:0;align-self:end}.menu-card h1{grid-column:1;grid-row:2/4;font-size:44px}.menu-card h1 span{font-size:22px;margin-top:8px}.japanese-title{grid-column:1;grid-row:4;margin:0}.intro{grid-column:1;grid-row:5/7;font-size:14px;margin:0}.menu-card #start{grid-column:2;grid-row:1/3;margin:0;align-self:end}.menu-card #reset{grid-column:2;grid-row:3;margin:0;min-height:44px}.settings{grid-column:2;grid-row:4;margin:0}.options{grid-column:2;grid-row:5}.instructions{grid-column:1/3;margin:0;font-size:12px}.menu-card .instructions.desktop-copy{grid-row:7}.menu-card .instructions.touch-copy{grid-row:7}#joystick{width:106px;height:106px}.joystick-wrap{bottom:max(10px,env(safe-area-inset-bottom))}.joystick-wrap>span{display:none}.actions{bottom:max(18px,env(safe-area-inset-bottom))}.look-hint{bottom:80px}#hud header{padding-top:max(10px,env(safe-area-inset-top))}#location,#distance{top:60px}}