*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#182b40;color:#eaf4f5;font-family:system-ui,'Malgun Gothic',sans-serif}button{font:inherit;cursor:pointer;border:1px solid #ffffff29;border-radius:15px;color:inherit;background:#233e55;padding:12px 17px;min-height:48px;touch-action:manipulation}button:active{transform:scale(.96)}button:disabled{opacity:.5;cursor:default}[hidden]{display:none!important}#game{height:100dvh;position:relative;overflow:hidden}#world{width:100%;height:100%;display:block;touch-action:none}header{position:absolute;top:14px;left:16px;right:16px;display:flex;align-items:center;gap:12px;pointer-events:none}header button{pointer-events:auto}.school-mark{width:44px;height:50px;display:grid;place-items:center;font-size:27px;font-weight:900;background:#ffe0a1;color:#254350;border-radius:11px 11px 23px 23px;box-shadow:0 5px 20px #12233730}h1{margin:0;font-size:23px;letter-spacing:-1px}header small{font-size:9px;letter-spacing:2px;color:#aecdd7}.status{display:flex;gap:12px;align-items:center;margin-left:auto;background:#152b40e6;backdrop-filter:blur(12px);padding:13px 18px;border-radius:16px;font-size:14px}.status b{color:#f7d391}#quest{position:absolute;top:91px;left:18px;width:310px;padding:17px 20px;border-radius:20px;border:1px solid #bed6df30;background:#173047e8;backdrop-filter:blur(12px);box-shadow:0 10px 35px #14233420}#quest small{color:#9cddc2;letter-spacing:1px;font-size:11px}#quest h2{font-size:19px;line-height:1.4;margin:6px 0}#quest p{margin:5px 0 12px;color:#bbced9;font-size:13px;line-height:1.7}#guide{padding:5px 12px;min-height:32px;font-size:12px;background:#a4dbc218;color:#b9ecd7}#names{position:absolute;inset:0;pointer-events:none}.name{position:absolute;transform:translate(-50%,-100%);font-size:11px;text-shadow:0 2px 5px #173047;background:#173047d9;padding:4px 9px;border-radius:8px;white-space:nowrap}.name b{color:#fee0a4}.name.target{background:#e6c487;color:#26384b;text-shadow:none}#bottom{position:absolute;bottom:max(18px,env(safe-area-inset-bottom));left:20px;right:20px;display:flex;align-items:flex-end;gap:16px;pointer-events:none}#joystick{width:116px;height:116px;border-radius:50%;background:#233b535c;border:2px solid #ffffff40;position:relative;touch-action:none;pointer-events:auto;box-shadow:inset 0 0 20px #ffffff0c}#stick{width:48px;height:48px;border-radius:50%;background:#edf8edb8;border:3px solid #fff9;position:absolute;left:32px;top:32px;box-shadow:0 5px 15px #102a4540}#joystick small{position:absolute;bottom:7px;left:40px;color:#e6f3ee;font-size:11px}#control-note{font-size:12px;line-height:1.7;text-shadow:0 2px 4px #172e40;color:#eff5e6}.actions{margin-left:auto;display:flex;gap:10px;pointer-events:auto;align-items:end}.actions button{width:114px;min-height:76px;background:#20384fef;box-shadow:0 5px 20px #17324730;font-weight:800}.actions small{display:block;font-size:10px;font-weight:400;color:#bccfda;margin-top:6px}#interact{background:#f5d096;color:#243c50}#interact small{color:#466276}#skill.ready{border-color:#e9d699;background:#446064}#toast{position:absolute;bottom:158px;left:50%;transform:translateX(-50%);background:#183344f2;padding:12px 22px;border-radius:15px;opacity:0;transition:opacity .2s;pointer-events:none;text-align:center;font-size:14px;max-width:85%}#toast.on{opacity:1}.veil{position:absolute;inset:0;display:grid;place-items:center;background:#101e3657;backdrop-filter:blur(6px);z-index:20;padding:22px}.card{width:min(580px,100%);padding:35px;border:1px solid #c8dae140;border-radius:27px;background:linear-gradient(135deg,#294b61,#182b44);box-shadow:0 25px 100px #09142865}.card>small{color:#a9d3cd;font-size:11px;letter-spacing:2px}.card h2{font-size:33px;line-height:1.3;letter-spacing:-1px;margin:16px 0}.card p{line-height:1.85;color:#c5d7dd;font-size:14px}.card button{background:#f6d09a;color:#263e50;font-weight:800;margin-top:14px}.card .small{font-size:11px;color:#9fb7c6}.intro-path{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:24px 0;color:#dfede8;font-size:13px}.intro-path i{color:#a5cabc}.intro-path span{background:#cce8d715;padding:10px;border-radius:10px}.dialogue h2{font-size:27px}#choices{display:flex;flex-wrap:wrap;gap:10px}#close-dialog{background:transparent;color:#b8c9d5;padding:8px 14px;font-size:12px}#record-body{display:grid;gap:10px}#record-body p{margin:2px 0}#record-body .badge{padding:12px;background:#c4e7d41a;border-radius:12px}#fallback{position:absolute;inset:0;margin:0;background:#1b3047;padding:100px 30px;z-index:50}
@media(max-width:600px){header{top:10px;left:10px;right:10px;gap:7px}.school-mark{width:32px;height:40px;font-size:21px}h1{font-size:17px}header small{font-size:7px;letter-spacing:1px}.status{padding:11px 10px;gap:8px;font-size:11px}header button{padding:9px;min-height:40px;font-size:11px}#quest{top:69px;left:10px;width:calc(100% - 20px);padding:12px 15px}#quest h2{font-size:16px;margin:3px 0}#quest p{font-size:11px;margin:4px 0 6px}#quest small{font-size:10px}#guide{min-height:28px;font-size:10px}#bottom{left:12px;right:12px;bottom:16px}#joystick{width:100px;height:100px}#stick{width:44px;height:44px;left:26px;top:26px}#joystick small{left:34px}#control-note{display:none}.actions{gap:8px}.actions button{width:87px;min-height:68px;font-size:12px;padding:10px}#toast{bottom:132px;font-size:12px;min-width:220px}.card{padding:25px}.card h2{font-size:29px}.card p{font-size:13px}.intro-path{font-size:11px;gap:4px}.intro-path span{padding:9px 7px}.name{font-size:9px}}
@media(max-height:500px){#quest{top:65px;width:265px;padding:10px 14px}#quest h2{font-size:16px}#quest p{font-size:11px}#bottom{bottom:10px}#joystick{width:92px;height:92px}#stick{left:24px;top:24px;width:40px;height:40px}#joystick small{left:32px}.actions button{min-height:58px}#control-note{display:none}.card{max-height:92dvh;overflow:auto;padding:22px}.card h2{font-size:24px;margin:10px 0}.intro-path{margin:12px 0}}