:root{--gold:#f5d47b;--cream:#fff4d2;--cyan:#7be8ff;--red:#e85e67;--green:#61d9b1;--ink:#06151a}*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;background:#02090e;color:var(--cream);font-family:"Segoe UI",Arial,sans-serif}body{overflow:hidden}button{font:inherit}button:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}button:disabled{cursor:not-allowed;filter:grayscale(.6);opacity:.55}.screen,.game{min-height:100vh;min-height:100dvh}.launch{position:relative;display:grid;place-items:center;overflow:hidden;padding:24px;background:radial-gradient(circle at 50% 72%,#1d686055 0 16%,transparent 42%),radial-gradient(circle at 18% 22%,#6d431f66 0 10%,transparent 28%),linear-gradient(155deg,#071b22 0%,#102e32 42%,#041016 100%)}.launch::before{content:"";position:absolute;inset:8% 6%;border:1px solid #e9c86a77;border-radius:26px;box-shadow:inset 0 0 120px #000a,0 24px 80px #0008}.launch-content{position:relative;z-index:2;width:min(960px,94vw);padding:38px 26px;text-align:center;border:1px solid #e9c86a55;border-radius:22px;background:linear-gradient(180deg,#071b22d9,#071b2277);box-shadow:0 24px 70px #000a}.mark{color:#e3f0d2;font-size:12px;letter-spacing:.3em}.title{margin:16px 0 10px;color:#ffe7a4;font:900 clamp(44px,8.5vw,105px)/.9 Georgia,serif;letter-spacing:.03em;-webkit-text-stroke:1px #39200d;text-shadow:0 5px 0 #563016,0 0 9px #fff0b0,0 14px 28px #000}.sub{font-size:clamp(14px,2vw,20px);letter-spacing:.12em}.version{display:inline-block;margin:18px;padding:7px 15px;border:1px solid #e9c86a;border-radius:999px;background:#061b20aa;color:var(--gold);font-weight:800;letter-spacing:.12em}.actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.btn{border:1px solid #d0a94f;border-radius:9px;padding:11px 17px;background:#08242de8;color:var(--cream);font-weight:800;cursor:pointer;box-shadow:0 5px 15px #0007}.btn:hover{filter:brightness(1.2);transform:translateY(-2px)}.btn.primary{background:linear-gradient(135deg,#9e6627,#f2d27d);color:#231508}.btn.exit{border-color:#e58478;background:#3b2022}.note{margin-top:18px;color:#d7e5c8;font-size:13px}.game{height:100vh;height:100dvh;overflow:hidden;background:#061219}.topbar{height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px;background:#061c24ee;border-bottom:1px solid #6bc6b366}.brand{color:var(--gold);font:900 23px Georgia,serif}.brand small{display:block;margin-top:2px;color:#acd4c8;font:10px "Segoe UI",Arial;letter-spacing:.16em}.top-actions{display:flex;gap:8px}.wrap{width:min(1440px,100%);height:calc(100dvh - 64px);margin:auto;padding:10px 14px 14px;display:flex;flex-direction:column}.battle-head{flex:0 0 auto;margin-bottom:8px}.battle-head h2{margin:0;color:var(--gold);font:900 clamp(24px,3vw,40px) Georgia,serif}.hint{color:#b9d9d0;font-size:13px}.arena{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;border:1px solid #6bc6b3;border-radius:16px;background:radial-gradient(ellipse at 50% 80%,#174d4f55,transparent 48%),#020b12;box-shadow:0 20px 70px #000b}.arena canvas{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%}.hud{position:absolute;z-index:4;left:15px;right:15px;top:15px;display:flex;justify-content:space-between;gap:10px;pointer-events:none}.card{min-width:220px;padding:10px 13px;border:1px solid #8ed3c1;border-radius:10px;background:#061b22d9;box-shadow:0 5px 20px #0008}.card b{color:var(--gold)}.bar{height:9px;margin-top:7px;border-radius:8px;background:#162026;overflow:hidden}.bar i{display:block;width:100%;height:100%;background:var(--green);transition:width .35s}.enemybar i{background:var(--red)}.status{position:absolute;z-index:5;left:50%;top:67px;transform:translateX(-50%);max-width:calc(100% - 24px);padding:8px 15px;border:1px solid #8dd3bd;border-radius:999px;background:#071b21dd;color:#e7f4d5;text-align:center}.skills{position:absolute;z-index:5;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:flex-end;gap:9px}.skill{width:66px;height:66px;border:2px solid #e1bf62;border-radius:50%;background:radial-gradient(circle,#267783,#062832 72%);color:#fff6d0;font-weight:900;cursor:pointer;box-shadow:0 0 18px #5cdff855}.skill.ultimate{width:82px;height:82px;background:radial-gradient(circle,#f0b54c,#772c27 74%)}.flash{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(circle at 55% 48%,#dffcff99,transparent 13%);opacity:0}.flash.on{animation:flash .48s ease-out}.damage{position:absolute;z-index:6;right:25%;top:35%;color:#ffe28d;font-size:28px;font-weight:900;text-shadow:0 2px 8px #000;animation:damage .8s ease forwards}.overlay{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:linear-gradient(180deg,#03101855,#031018aa)}.overlay.is-hidden{display:none}.overlay-card{width:min(480px,88vw);padding:28px;text-align:center;border:1px solid #e1bf62;border-radius:16px;background:#071b22f2;box-shadow:0 18px 50px #000b}.overlay-card h2{margin:0 0 8px;color:var(--gold);font:900 30px Georgia,serif}.overlay-card p{margin:0;color:#d7e5c8}@keyframes flash{0%{opacity:0}35%{opacity:1}100%{opacity:0}}@keyframes damage{to{opacity:0;transform:translateY(-55px) scale(1.3)}}@media(max-width:700px){.title{font-size:clamp(42px,15vw,66px)}.topbar{height:58px;padding:8px 10px}.brand{font-size:17px}.top-actions{gap:4px}.top-actions .btn{padding:8px 9px;font-size:12px}.wrap{height:calc(100dvh - 58px);padding:8px}.hud{top:8px;left:8px;right:8px}.card{min-width:0;width:47%;font-size:12px}.status{top:84px;font-size:12px}.skills{gap:4px;bottom:10px}.skill{width:48px;height:48px;font-size:11px}.skill.ultimate{width:62px;height:62px}.hint{display:none}}