*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#050505;color:#f4f4ef;font-family:Impact,"Arial Black",Inter,Segoe UI,Arial,sans-serif}
#game{position:relative;width:100vw;height:100vh;background:#050505}canvas{display:block;width:100%;height:100%;cursor:crosshair}
#hud{position:absolute;inset:0;pointer-events:none;z-index:10}
.metal{background:linear-gradient(180deg,rgba(35,35,33,.97),rgba(8,8,8,.98)),radial-gradient(circle at 30% 10%,rgba(255,255,255,.08),transparent 45%);border:2px solid rgba(88,88,82,.92);border-radius:5px;color:#e8e5dc;box-shadow:0 11px 24px rgba(0,0,0,.58),inset 0 0 0 1px rgba(255,255,255,.05),inset 0 0 25px rgba(0,0,0,.35);text-shadow:0 3px 2px #000;font-weight:900;letter-spacing:.03em}
.leftStack{position:absolute;left:10px;top:10px;display:flex;flex-direction:column;gap:9px}.leftStack .metal{width:250px;padding:11px 16px;font-size:22px}.hearts span{font-size:28px;color:#b92520;margin-right:10px;filter:drop-shadow(0 0 5px #e53b31)}.lvl small{display:block;margin-top:8px;font-size:14px;color:#c7b56e}.lvl i{display:inline-block;width:150px;height:13px;background:#1d1b17;border:1px solid #4a4232;border-radius:3px;overflow:hidden;vertical-align:middle;margin-left:6px}.lvl em{display:block;height:100%;width:30%;background:linear-gradient(90deg,#d19d24,#ffd35e)}
.record{position:absolute;top:10px;left:50%;transform:translateX(-50%);min-width:330px;text-align:center;padding:13px 20px;font-size:22px}
.rightStack{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:9px}.rightStack .metal{width:310px;padding:13px 17px;font-size:22px}.wave b{float:right;color:#61ba4c;letter-spacing:.05em}.combo{color:#caa061}
.skills{position:absolute;right:380px;bottom:17px;display:flex;gap:8px}.skills div{width:88px;height:122px;background:linear-gradient(180deg,rgba(31,31,30,.98),rgba(8,8,8,.98));border:2px solid rgba(88,88,82,.92);border-radius:5px;box-shadow:0 10px 24px rgba(0,0,0,.55),inset 0 0 18px rgba(255,255,255,.03);display:flex;flex-direction:column;align-items:center;justify-content:space-around}.skills span{font-size:34px;filter:drop-shadow(0 0 8px rgba(120,200,255,.25))}.skills b{font-size:27px}
.cooldowns{position:absolute;right:10px;bottom:320px;width:500px;padding:14px 20px}.cooldowns h3{margin:0 0 12px;font-size:20px;color:#c9c5b6}.cooldowns p{display:flex;align-items:center;gap:14px;margin:10px 0}.cooldowns span{font-size:25px}.cooldowns i{flex:1;height:17px;background:#171717;border:1px solid #333;border-radius:4px;overflow:hidden}.cooldowns em{display:block;height:100%;width:100%;background:linear-gradient(90deg,#1267ff,#80c9ff)}.cooldowns p:nth-child(3) em{background:linear-gradient(90deg,#36ba42,#93ff6c)}
.bossbar{position:absolute;left:50%;top:84px;transform:translateX(-50%);width:min(760px,60vw);padding:9px 14px;background:linear-gradient(180deg,rgba(37,11,11,.95),rgba(8,3,3,.98));border:2px solid rgba(170,40,35,.55);border-radius:5px;box-shadow:0 12px 28px rgba(0,0,0,.58)}.bossbar strong{display:block;text-align:center;color:#ffd5cf;font-size:14px;letter-spacing:.2em;margin-bottom:5px}.bossbar i{display:block;height:13px;background:#151010;border-radius:3px;overflow:hidden}.bossbar em{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff3030,#ffb044)}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center,rgba(30,30,24,.18),rgba(0,0,0,.84));backdrop-filter:blur(3px);z-index:20}.hidden{display:none!important}
.card{width:min(880px,92vw);padding:32px;border-radius:7px;background:linear-gradient(180deg,rgba(25,25,24,.97),rgba(6,6,6,.99));border:2px solid rgba(88,88,82,.92);box-shadow:0 30px 80px rgba(0,0,0,.76),inset 0 0 28px rgba(255,255,255,.035)}.card.small{width:min(420px,90vw);text-align:center}.eyebrow{font-family:Inter,Arial,sans-serif;color:#8fd6ff;font-size:12px;letter-spacing:.24em}h1{font-size:clamp(42px,5vw,78px);margin:10px 0 12px}h2{font-size:44px;margin:5px 0 8px}p{font-family:Inter,Segoe UI,Arial,sans-serif;color:#d8d4c7;line-height:1.55}button{cursor:pointer;color:#fff;font-weight:900;letter-spacing:.08em;padding:14px 24px;border-radius:5px;background:linear-gradient(180deg,#3a3a36,#111);border:2px solid rgba(88,88,82,.92);box-shadow:0 14px 30px rgba(0,0,0,.45)}
.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}.choice{padding:18px;border-radius:6px;background:linear-gradient(180deg,rgba(28,28,26,.97),rgba(7,7,7,.99));border:2px solid rgba(88,88,82,.9);cursor:pointer}.choice:hover{transform:translateY(-2px);border-color:#c9b36c}.choice b{color:#caa061}.choice h3{margin:8px 0 6px}.banner{position:absolute;left:50%;top:12%;transform:translateX(-50%);z-index:25;padding:14px 24px;background:linear-gradient(180deg,rgba(28,28,26,.97),rgba(7,7,7,.99));border:2px solid rgba(88,88,82,.9);border-radius:5px;font-size:18px;letter-spacing:.18em}
@media(max-width:1200px){.cooldowns{display:none}.skills{right:20px;bottom:160px}.rightStack .metal{width:240px}.leftStack .metal{width:210px}}