﻿@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;800&family=Noto+Sans+JP:wght@400;700;900&display=swap');
*{box-sizing:border-box}body{margin:0;background:#080e0e;color:#e6ece5;font:14px 'Noto Sans JP',sans-serif;overflow:hidden}canvas{position:fixed;inset:0;width:100%;height:100%}#vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 65% 48%,transparent 0%,#070c0c66 60%,#030707dd 100%)}header{position:fixed;top:0;left:0;width:100%;padding:28px 4%;display:flex;justify-content:space-between;align-items:center;z-index:4}a{color:inherit;text-decoration:none}#brand{font-size:25px;font-weight:900;letter-spacing:-2px}#brand span{color:#d7f95a}small{font-size:9px;letter-spacing:2px;margin-left:20px;color:#97a69d}button,select{font:inherit;color:inherit;cursor:pointer}button{background:transparent;border:1px solid #81908155;padding:12px 18px}#sound{font-size:10px;letter-spacing:2px}main{position:absolute;left:8%;top:17%;width:440px}.eyebrow,.index{color:#c8f160;font:10px monospace;letter-spacing:3px}h1{font:800 clamp(80px,10vw,144px)/.76 'Barlow Condensed',Impact,sans-serif;letter-spacing:-4px;margin:30px 0;position:relative}h1 i{font-style:normal;color:#d7f95a}h1>span{font-size:120px;position:absolute;left:280px;top:65px;color:#d7f95a}.intro{color:#c1cbc2;font-size:15px;line-height:1.8}.settings{display:flex;gap:16px;margin:22px 0}label{display:block;color:#88968e;font:9px monospace;letter-spacing:2px;flex:1}select{display:block;width:100%;background:#0d1919dd;border:0;border-bottom:1px solid #53634b;padding:12px 0;font:12px 'Noto Sans JP';outline:none}.primary{background:#d7f95a;color:#15200e;border:0;font-weight:900;width:100%;padding:20px;text-align:left;font-size:16px}.primary span{float:right;font-size:22px}.primary:hover{background:#e7ff9b}.keys{font-size:10px;color:#92a196;line-height:2;margin-top:17px}.note{font-size:9px;color:#67786c;margin-top:12px}aside{position:absolute;right:8%;top:30%;width:290px;border-left:1px solid #81908144;padding-left:28px}aside h2{font-size:29px;line-height:1.7;font-weight:700}aside p{font-size:11px;color:#97a69d;line-height:2.4}.portraits{display:flex;height:80px;gap:12px;margin:30px 0;opacity:.65}.portraits img{width:68px;object-fit:contain;filter:grayscale(1)}footer{position:absolute;bottom:26px;left:4%;right:4%;font:9px monospace;letter-spacing:2px;color:#819487;display:flex;justify-content:space-between}#hud{position:fixed;inset:0;pointer-events:none}#stageLabel{position:absolute;top:110px;left:4%;font:11px monospace;letter-spacing:3px;color:#b8caad}#timer{position:absolute;top:100px;left:calc(50% - 50px);font:40px monospace}#danger{position:absolute;bottom:75px;width:100%;text-align:center;color:#d7f95a;letter-spacing:3px}#speed{position:absolute;bottom:30px;right:4%;font:30px monospace}#pause{position:absolute;right:4%;top:100px;pointer-events:auto}.cross{position:absolute;top:50%;left:50%;color:#ffffff66}#result{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#0a1414f5;border:1px solid #829b5d66;padding:40px;width:min(430px,90vw);text-align:center}#result h2{font-size:48px;margin:20px 0}#result p{line-height:2;color:#b9c8b4}#back{border:0;margin-top:15px}#mobile{position:fixed;inset:0;pointer-events:none}#stick{position:absolute;bottom:40px;left:30px;width:120px;height:120px;border:1px solid #ffffff55;border-radius:50%;pointer-events:auto;touch-action:none}#knob{position:absolute;left:40px;top:40px;width:40px;height:40px;background:#d7f95a66;border-radius:50%}#jump,#look{position:absolute;right:30px;bottom:50px;pointer-events:auto;touch-action:none;border-radius:50%;width:75px;height:75px}#look{bottom:145px}[hidden]{display:none!important}@media(max-width:750px){header{padding:20px}small{font-size:7px;letter-spacing:1px;margin-left:12px}main{left:8%;top:15%;width:84%;max-width:400px}h1{font-size:100px}h1>span{left:230px;font-size:90px}aside{display:none}footer{font-size:7px}footer span{display:none}.settings{margin:15px 0}.keys{font-size:9px}}@media(max-height:750px){main{top:13%}h1{font-size:90px;margin:20px 0}h1>span{font-size:80px;left:210px;top:45px}.intro{font-size:12px}.primary{padding:15px}.keys{line-height:1.6}}

.cast-label{margin:0 0 16px}.cast-label select{padding:8px 0}@media(max-height:750px){main{top:11%}h1{font-size:76px;margin:16px 0}.intro{margin:9px 0}.settings{margin:10px 0}.cast-label{margin-bottom:10px}.note{margin-top:6px}}

#elevation{position:absolute;left:4%;bottom:30px;font:11px monospace;color:#b8d28f;letter-spacing:1px}@media(pointer:coarse){#elevation{bottom:210px;font-size:10px}#danger{bottom:245px;font-size:11px}}

.swarm{position:absolute;left:4%;top:148px;display:flex;flex-direction:column;gap:5px}.swarm small{margin:0;font:10px monospace;letter-spacing:2px}.swarm strong{font:30px monospace;color:#d7f95a}.swarm span{font:10px monospace;color:#a4b5a2}#spawnNotice{position:absolute;top:205px;left:50%;transform:translateX(-50%);padding:12px 20px;border:1px solid #d7f95a66;background:#101a13e6;color:#d7f95a;font-size:13px;white-space:nowrap}.settings label{min-width:0}.settings select{font-size:11px}#result p{white-space:pre-line}@media(max-width:750px){.swarm{top:148px}.swarm strong{font-size:25px}#spawnNotice{top:245px;font-size:11px}}
main{max-height:calc(100dvh - 170px);overflow-y:auto;padding-right:4px;scrollbar-width:thin}
@media(max-width:750px){#stageLabel{top:92px;max-width:74%;font-size:9px;line-height:1.7}#timer{top:135px;left:auto;right:4%;font-size:32px}#pause{top:72px;padding:8px}.swarm{top:135px}#speed{bottom:12px;font-size:22px}}
@media(max-height:550px){main{top:75px;max-height:calc(100dvh - 105px)}aside{display:none}header{padding:16px 4%}}

#danger,#spawnNotice{display:none!important}
#stageLabel,#timer,#elevation,.swarm{display:none!important}
@media(pointer:coarse){#speed,#look{display:none!important}}
