*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#123c49;color:#fff;font-family:system-ui,-apple-system,sans-serif;touch-action:none;user-select:none}canvas{width:100%;height:100%;display:block}header{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:12px;padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));background:linear-gradient(#123c49b0,transparent);z-index:2}.brand{font-size:23px;font-weight:950;letter-spacing:-1px;color:#fff;text-decoration:none}.brand span,h1 span{color:#ffdc70}#hud{flex:1;font-weight:800;font-size:15px;text-align:center;text-shadow:0 2px 3px #123c49}button{font:inherit;cursor:pointer;border:0;color:#153b45;font-weight:850;border-radius:16px;background:#fff7dc;padding:12px 17px;touch-action:none}header button{font-size:15px;background:#153b45ba;border:1px solid #ffffff50;color:white}#panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(480px,92vw);padding:30px;text-align:center;background:#103944ed;border:1px solid #ffffff45;border-radius:28px;box-shadow:0 20px 80px #09233170;z-index:4}.eyebrow{font-size:12px;letter-spacing:3px;color:#a7e4d2;font-weight:850}h1{font-size:clamp(44px,8vw,70px);line-height:1;margin:18px 0;letter-spacing:-4px;font-weight:950}p{line-height:1.8;font-size:16px;color:#e5f3ed}.stats{display:flex;gap:7px;justify-content:center;margin:18px 0}.stats span{background:#ffffff10;padding:10px;border-radius:10px;font-size:14px}#start{width:100%;background:#ffdc70;padding:17px;font-size:19px;box-shadow:0 5px 0 #bb8b36}.hint{font-size:12px;color:#bdd7d7;margin-bottom:10px}.home{font-size:14px;color:#b6e9de}#jump{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));right:max(20px,env(safe-area-inset-right));width:135px;height:78px;background:#ffdc70dc;border:2px solid #fff3bd;box-shadow:0 5px 0 #123c4970;display:none}small{display:block;font-size:11px;margin-top:4px}#notice{position:absolute;top:23%;width:100%;text-align:center;font-size:24px;font-weight:900;text-shadow:0 3px 10px #123c49;pointer-events:none}@media(max-height:500px){#panel{padding:18px;width:450px}h1{font-size:48px;margin:10px}p{margin:8px;font-size:14px}.stats{margin:10px}.hint{font-size:11px}#jump{height:65px;width:118px}}

#panel{max-height:90dvh;overflow-y:auto;touch-action:pan-y}#characters .character-label{font-weight:800;margin:12px 0 8px;font-size:14px}#character-options{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}#character-options button{padding:4px 2px 9px;background:#ffffff0c;border:2px solid #ffffff20;color:#ecf9f5;border-radius:14px;font-size:14px}#character-options button.selected{border-color:#ffdc70;background:#ffdc7020}#character-options canvas{width:70px;height:80px;margin:0 auto;max-width:100%}#character-options span{display:block}.character-note{color:#bad9d5;font-size:12px;margin:7px 0}#characters[hidden]{display:none}@media(max-height:500px){#panel{width:min(570px,94vw);padding:15px}#panel h1{font-size:38px}#character-options canvas{height:55px;width:48px}.character-note{display:none}#description{line-height:1.5}.stats{display:none}#start{padding:12px}}