:root{font-family:'Atkinson Hyperlegible',sans-serif;color:#fff4df;background:#111323;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 20%,#2b2946,transparent 65%),#111323}main{max-width:1120px;margin:auto;padding:24px 28px}header{display:flex;justify-content:space-between;font-size:12px;letter-spacing:2px;color:#9c9bb5}a{color:#fff4df;text-decoration:none}.title{display:flex;align-items:center;justify-content:space-between;margin:25px 0 20px}small{font-size:11px;letter-spacing:2px}h1{font-size:clamp(38px,7vw,78px);line-height:1;margin:8px 0;letter-spacing:-4px;font-weight:900;font-style:italic}h1 em{color:#ffce65}h1 span{font-size:36px;color:#f4798c;margin-left:16px}.round{text-align:right;font-size:11px;letter-spacing:2px;line-height:2}.round b{font-size:23px;color:#ffce65}.cabinet{border:2px solid #555168;border-radius:18px;overflow:hidden;box-shadow:0 22px 70px #0007}.hud{display:flex;gap:30px;align-items:center;padding:17px 24px;background:#202136}.hud>div{flex:1}.hud b{display:flex;justify-content:space-between;font-size:12px;letter-spacing:2px}.hud strong{font-style:italic;border:2px solid #ffce65;color:#ffce65;padding:9px;border-radius:50%}meter{display:block;width:100%;height:15px;margin-top:8px}meter::-webkit-meter-bar{background:#35364c;border:0}meter::-webkit-meter-optimum-value{background:#2dd5bc}#enemy-hp::-webkit-meter-optimum-value{background:#fa798d}#lives{color:#fa798d}.screen{position:relative;background:#141626}canvas{display:block;width:100%;outline:none}#menu{position:absolute;inset:0;background:#151526e8;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px}#menu[hidden]{display:none}h2{font-size:clamp(24px,4vw,48px);font-style:italic;margin:8px}p{line-height:1.5}button{font:inherit;font-weight:700;cursor:pointer;background:#343449;color:#fff4df;border:1px solid #646078;border-radius:7px;padding:11px 17px;touch-action:none}button:hover{filter:brightness(1.2)}button:focus-visible{outline:3px solid #fff}#start{background:#ffce65;color:#272035;border:0}#classes{display:flex;gap:8px}#classes button[aria-pressed=true]{border:2px solid #ffce65;background:#514364}#costume{font-size:12px;color:#bfc2d7}.actions{display:flex;gap:8px;margin-bottom:20px}footer{display:flex;gap:10px;align-items:center;padding:12px 18px;background:#202136;font-size:12px}footer span{flex:1}footer button{padding:7px 12px}#banner{position:absolute;top:14%;width:100%;text-align:center;color:#ffdf7a;font-size:clamp(20px,4vw,40px);font-weight:900;text-shadow:0 3px 8px #000;pointer-events:none}.controls{display:flex;justify-content:space-between;gap:12px;margin-top:24px;font-size:11px;color:#bbb9cc}kbd{color:#fff4df;font:700 12px inherit;margin-right:6px}.tip{text-align:center;color:#9695af;font-size:12px}.touch{display:flex;justify-content:center;gap:8px;margin-top:20px}.touch button{min-height:44px}@media(max-width:600px){main{padding:15px 10px}header span,.round{display:none}h1{letter-spacing:-2px}.title{margin:18px 0}.hud{gap:12px;padding:10px}.screen{min-height:340px}canvas{height:340px;object-fit:fill}#menu{padding:12px}#menu p{font-size:12px;margin:8px}#classes{flex-wrap:wrap;justify-content:center}#classes button{font-size:11px;padding:8px}.actions{margin:8px 0}.actions button{font-size:12px}.controls{flex-wrap:wrap;justify-content:center}.touch{gap:4px}.touch button{padding:9px}#menu small{font-size:9px;letter-spacing:1px}}

#coins{display:block;color:#ffce65;font-weight:bold}#classes{flex-wrap:wrap;justify-content:center;max-width:650px}#classes button{font-size:12px}#classes button:disabled{opacity:.5;cursor:not-allowed}#menu{overflow-y:auto}@media(max-width:600px){#menu h2{font-size:23px}#menu .actions{margin:5px 0}#classes{gap:4px}#classes button{padding:6px;font-size:10px}#costume{min-height:30px}header{gap:10px;letter-spacing:1px}footer{gap:5px;padding:10px}}

.enemy-trait{background:#29283e;color:#dcd2ee;text-align:center;padding:8px 12px;font-size:12px;min-height:32px}