:root{color:#eaf0e7;font-synthesis:none;-webkit-font-smoothing:antialiased;background:#101a1d;font-family:system-ui,-apple-system,Apple SD Gothic Neo,Malgun Gothic,sans-serif}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}button{font:inherit}.app{background:radial-gradient(circle at 55% 38%,#263c38,#101a1d 72%);width:100%;height:100%;position:relative;overflow:hidden}.scene,.scene canvas{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.app:after{content:"";pointer-events:none;background:linear-gradient(90deg,#091914a6,#0000 63%),linear-gradient(#09141573,#0000 27% 65%,#081113b0);position:absolute;inset:0}.topbar,.intro,.controls{z-index:2;position:absolute}.topbar{top:max(28px,env(safe-area-inset-top));align-items:center;gap:15px;display:flex;left:clamp(24px,5vw,70px);right:clamp(24px,5vw,70px)}.brand-mark{flex:none;width:38px;height:38px;position:relative}.brand-mark span{background:#d7e6b1;border-radius:50%;width:8px;height:8px;position:absolute;box-shadow:0 0 15px #b3d78366}.brand-mark span:first-child{top:0;left:15px}.brand-mark span:nth-child(2){top:23px;left:2px}.brand-mark span:last-child{top:23px;right:2px}.eyebrow,.section-index,.coordinate-panel span{letter-spacing:.18em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;font-weight:500}.eyebrow{color:#9fb0a6;margin:0 0 2px}h1{letter-spacing:.015em;color:#fff;margin:0;font-family:inherit;font-size:clamp(17px,2vw,23px);font-weight:400;line-height:1.2}.intro{pointer-events:none;top:24%;left:clamp(28px,7vw,100px)}.section-index{color:#c3d6b0;margin:0 0 18px}.intro p:nth-child(2){letter-spacing:-.06em;color:#e0e9db;margin:0 0 14px;font-size:clamp(27px,3.1vw,48px);font-weight:400;line-height:1.38}.intro strong{color:#fff;font-weight:700}.controls{left:clamp(28px,6vw,86px);right:clamp(28px,6vw,86px);bottom:max(34px,env(safe-area-inset-bottom));pointer-events:none;justify-content:space-between;align-items:end;gap:24px;display:flex}.joystick-area{align-items:end;display:flex}.joystick{touch-action:none;pointer-events:auto;cursor:grab;background:radial-gradient(circle,#34484260 0 38%,#1b2d2e8c 39% 100%);border:1px solid #bfd4be55;border-radius:50%;outline:none;flex:none;width:132px;height:132px;position:relative;box-shadow:inset 0 0 28px #111d1d99,0 12px 35px #07111266}.joystick:active{cursor:grabbing}.joystick:focus-visible{outline-offset:5px;outline:2px solid #d4eab5}.joystick:before,.joystick:after{content:"";background:#b8cbbc44;position:absolute}.joystick:before{width:1px;height:80%;top:10%;left:50%}.joystick:after{width:80%;height:1px;top:50%;left:10%}.joystick-ring{border:1px dashed #d0e3c365;border-radius:50%;position:absolute;inset:14px}.joystick-knob{pointer-events:none;z-index:1;background:radial-gradient(circle at 35% 30%,#a3c199,#597e73 68%,#365d53);border:1px solid #e1efcfaa;border-radius:50%;place-items:center;width:59px;height:59px;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 5px 17px #0716139c,inset 0 2px 7px #e6f6d75e}.joystick-knob span{background:#d9eac48c;border:1px solid #eff8e1a0;border-radius:50%;width:16px;height:16px}.coordinate-panel{white-space:nowrap;flex-direction:column;flex:none;align-items:flex-end;gap:4px;margin-left:auto;display:flex}.coordinate-panel span{color:#a4b9aa}.coordinate-panel strong{letter-spacing:.02em;color:#e5f0dd;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;font-weight:400}.error{z-index:5;text-align:center;background:#1a2b2b;border:1px solid #c8dcbc66;border-radius:12px;width:min(90vw,360px);padding:24px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 20px 60px #0008}.error p{color:#bccbc1;margin:9px 0 0;font-size:14px;line-height:1.6}[hidden]{display:none!important}@media (width<=650px){.topbar{top:max(22px,env(safe-area-inset-top));left:22px;right:22px}.intro{top:17%;left:28px}.intro p:nth-child(2){font-size:29px}.controls{left:25px;right:25px;bottom:max(27px,env(safe-area-inset-bottom))}.joystick{width:120px;height:120px}.joystick-knob{width:55px;height:55px}.coordinate-panel strong{font-size:11px}}@media (width<=380px){.intro{top:18%}}@media (height<=650px){.intro{top:16%}.controls{bottom:max(18px,env(safe-area-inset-bottom))}.joystick{width:108px;height:108px}}.sound-control,.action-panel{z-index:2;position:absolute}.sound-control{top:max(84px,calc(env(safe-area-inset-top) + 57px));flex-direction:column;align-items:end;gap:5px;display:flex;right:clamp(24px,5vw,70px)}.sound-control button,.action-grid button,.speech-options button{color:#f1f6ed;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#17302bcc;border:1px solid #b9d3b688;border-radius:7px;min-height:44px}.sound-control button{padding:0 15px;font-size:12px}.sound-control button[aria-pressed=true]{color:#10231d;background:#7aa56a;border-color:#bde6a5}.sound-control button:focus-visible,.action-grid button:focus-visible,.speech-options button:focus-visible{outline-offset:3px;outline:2px solid #e8f7ce}#audio-message{color:#fff1d4;text-align:right;max-width:200px;min-height:16px;font-size:11px}.action-panel{right:clamp(28px,6vw,86px);bottom:max(34px,env(safe-area-inset-bottom));z-index:3;width:120px}.action-grid{grid-template-columns:1fr 1fr;gap:7px;display:grid}.action-grid button{place-items:center;min-height:48px;padding:0;font-size:23px;line-height:1;display:grid}.action-grid button:active,.speech-options button:active{color:#12241c;background:#83a874}.speech-options{gap:6px;margin-bottom:7px;display:grid}.speech-options button{min-height:38px;padding:5px;font-size:12px}.character-speech{z-index:4;color:#18241f;white-space:nowrap;pointer-events:none;text-align:center;background:#fff;border:2px solid #858b87;border-radius:9px;max-width:calc(100vw - 32px);padding:10px 14px;font-size:13px;font-weight:600;line-height:1.3;position:absolute;top:38%;left:50%;transform:translate(-50%,-100%)}.character-speech:after{content:"";background:#fff;border-bottom:2px solid #858b87;border-right:2px solid #858b87;width:12px;height:12px;position:absolute;bottom:-8px;left:50%;transform:translate(-50%)rotate(45deg)}@media (width<=650px){.sound-control{top:max(72px,calc(env(safe-area-inset-top) + 50px));right:22px}.action-panel{width:108px;right:25px;bottom:max(27px,env(safe-area-inset-bottom))}.action-grid button{min-height:46px}}@media (height<=650px){.action-panel{bottom:max(18px,env(safe-area-inset-bottom))}}@media (height<=520px){.intro{display:none}.sound-control{top:max(56px,calc(env(safe-area-inset-top) + 40px))}.speech-options{grid-template-columns:1fr 1fr}.speech-options button:first-child{grid-column:span 2}}