*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;margin:0;overflow:hidden;background:#06101e;color:#fff;font-family:Inter,system-ui,-apple-system,sans-serif;touch-action:none;user-select:none}
    body{display:grid;place-items:center}.wrap{position:relative;width:min(100vw,520px);height:100dvh;max-height:900px;overflow:hidden;background:linear-gradient(#071a38 0%,#164b76 56%,#efae69 100%)}
    canvas{display:block;width:100%;height:100%}.hud{position:absolute;inset:0;pointer-events:none;padding:max(14px,env(safe-area-inset-top)) 14px 0}.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:8px}.pill{background:#071426bb;border:1px solid #ffffff24;border-radius:999px;padding:8px 12px;font-weight:800;box-shadow:0 5px 15px #0004}.timer{justify-self:center;font-variant-numeric:tabular-nums;font-size:18px;min-width:132px;text-align:center}.lives{justify-self:end}.message{position:absolute;top:70px;left:50%;transform:translateX(-50%);text-align:center;width:90%;font-weight:900;text-shadow:0 2px 5px #000;opacity:0;transition:.25s}.message.show{opacity:1}
    .controls{position:absolute;left:0;right:0;bottom:max(0px,env(safe-area-inset-bottom));height:178px;pointer-events:none}.joyZone{pointer-events:auto;position:absolute;left:0;bottom:0;width:62%;height:178px;touch-action:none}.joystick{position:absolute;left:18px;top:42px;width:128px;height:128px;border-radius:50%;border:2px solid #ffffff42;background:#071426a8;box-shadow:inset 0 0 28px #0008,0 8px 20px #0005;opacity:.72;transition:opacity .12s}.joyZone.active .joystick{opacity:1}.joystick:before,.joystick:after{content:'';position:absolute;background:#ffffff18}.joystick:before{left:62px;top:15px;width:2px;height:98px}.joystick:after{top:62px;left:15px;height:2px;width:98px}.stick{position:absolute;left:38px;top:38px;width:52px;height:52px;border-radius:50%;background:linear-gradient(#5ba0ce,#173c5a);border:2px solid #ffffff90;box-shadow:0 6px 14px #0008;transform:translate(0,0)}.gearBtn{pointer-events:auto;position:absolute;right:22px;bottom:22px;width:82px;height:82px;border-radius:50%;border:2px solid #ffffff65;background:#071426e8;color:#fff;font-size:31px;font-weight:900;box-shadow:0 8px 20px #0007;touch-action:none;overflow:hidden}.gearBtn:active{transform:translateY(3px);background:#1f6da0}.gearBtn.cooling{filter:grayscale(.8);color:#9ab0c4}.cd{position:absolute;inset:0;display:grid;place-items:center;background:#06101eb8;font-size:16px}
    .screen{position:absolute;inset:0;display:grid;place-items:center;padding:18px;background:linear-gradient(#06101eb8,#06101ef0);text-align:center;overflow:auto}.card{width:min(100%,430px);padding:24px 18px;border:1px solid #ffffff2b;border-radius:28px;background:#071426ed;box-shadow:0 24px 70px #0009}.eyebrow{color:#ffc84a;font-weight:900;letter-spacing:.12em;font-size:12px}.title{font-size:clamp(34px,9vw,54px);line-height:.92;margin:10px 0}.sub{color:#cfe3f4;line-height:1.4;margin:8px 0}.start{width:100%;padding:15px;border:0;border-radius:16px;background:#ffc438;color:#152038;font-size:19px;font-weight:950;box-shadow:0 6px 0 #b16d0b;touch-action:manipulation}.start:disabled{background:#536273;color:#aebbc7;box-shadow:0 6px 0 #273442}.start:active:not(:disabled){transform:translateY(3px);box-shadow:0 3px 0 #b16d0b}.peace{font-size:12px;color:#9fbed5;margin:15px 0 0}.hidden{display:none!important}.brandScreen{z-index:8;background:#06101e;cursor:pointer}.brandMark{width:84px;height:84px;margin:0 auto 18px;border-radius:25px;display:grid;place-items:center;background:linear-gradient(145deg,#ffc438,#e6851a);color:#071426;font-size:51px;font-weight:1000;box-shadow:0 16px 50px #0009}.brandName{font-size:clamp(30px,9vw,48px);font-weight:1000;letter-spacing:.08em}.brandPresents{margin-top:9px;color:#9fbed5;font-size:12px;font-weight:900;letter-spacing:.32em}.brandHint{position:absolute;bottom:34px;left:0;right:0;color:#7897ae;font-size:12px}.storyCard{text-align:left}.storyCard .title{text-align:center}.storyText{color:#d8e8f4;font-size:16px;line-height:1.55;margin:18px 2px 22px}.storyText strong{color:#ffc84a}.storyQuote{text-align:center;color:#fff;font-weight:900;font-size:18px;border-left:3px solid #ffc438;border-right:3px solid #ffc438;padding:10px;margin:17px 0}.shop{display:grid;gap:9px;margin:14px 0}.shopItem{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;padding:10px;text-align:left;border:1px solid #ffffff24;border-radius:15px;background:#ffffff09}.shopIcon{font-size:27px}.shopName{font-weight:900}.shopDesc{font-size:12px;color:#abc8dc;margin-top:2px}.buy{min-width:72px;border:0;border-radius:11px;padding:9px 8px;background:#ffc438;color:#152038;font-weight:900}.buy.equipped{background:#4bd2a1}.buy:disabled{background:#415366;color:#9fb0bd}.tokenLine{display:flex;justify-content:center;gap:7px;align-items:center;font-weight:900;color:#ffc84a}.loadout{font-size:13px;color:#bed7e9;margin:10px 0 13px}.trainingTitle{font-size:12px;font-weight:900;letter-spacing:.1em;color:#ffc84a;margin:12px 0 7px}.training{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:13px}.training button{border:1px solid #ffffff2d;border-radius:13px;background:#142f49;color:#fff;padding:9px 4px;font-size:12px;font-weight:850;line-height:1.25}.training button.selected{background:#267455;border-color:#6ff0b3}.training span{display:block;font-size:22px;margin-bottom:3px}

.wrap{width:100vw;max-height:none}.controls{height:112px}.motion-button{margin-top:8px;font-size:15px;background:#69c9f2;box-shadow:0 6px 0 #23769b}.motion-status{font-size:13px;min-height:36px}.card{max-height:calc(100dvh - 36px);overflow-y:auto}.gearBtn{width:66px;height:66px;right:16px;bottom:16px;font-size:26px}
