@import './tokens.css';
:root{font-family:var(--font-body);color:var(--ui-text);background:var(--ui-canvas)}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input,select,textarea{font:inherit}button{cursor:pointer}
canvas{display:block;width:100vw;height:100vh;cursor:crosshair;touch-action:none}
#ui{position:fixed;inset:0;pointer-events:none}#screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:auto;padding:24px;overflow:auto;container-type:size;background:linear-gradient(90deg,#060b15cc,#060b1526),var(--ui-menu-backdrop) right center/auto 100% no-repeat,var(--ui-canvas)}#screen.hidden{display:none}
body:is([data-route=game],[data-route=pause],[data-route=result],[data-route=online]) #screen{background:radial-gradient(ellipse at 50% 40%,#030b1399,#02070cee),var(--ui-background) center/cover}
h1{font:var(--weight-display) clamp(32px,4vw,52px)/1.15 var(--font-display);margin:0;color:var(--ui-text)}
h2{font:var(--weight-heading) clamp(24px,2.5vw,32px)/1.2 var(--font-display);margin:0 0 12px;color:var(--ui-text)}
h3{font:var(--weight-heading) 19px/1.3 var(--font-display);margin:0 0 12px;color:var(--ui-text)}
p{line-height:1.55}.kicker{letter-spacing:.2em;font-weight:var(--weight-label);color:var(--ui-gold);font-size:11px}.lead{font-size:21px;line-height:1.45;color:var(--ui-text)}.muted,small{color:var(--ui-muted)}
.buttons,.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:24px}.label{color:var(--ui-muted);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.hud{position:absolute;inset:0;display:none}.hud.show{display:block}.topbar{position:absolute;display:flex}.fighter{position:relative}.hpbg{position:relative}.hpbg b{display:block;position:absolute;transition:width .1s}.rounds{text-align:center}
.spellbar{position:absolute;left:50%;transform:translateX(-50%);display:flex}.spellbtn{pointer-events:auto;position:relative;cursor:pointer}.spellbtn small{display:block}.spellbtn .cover{position:absolute;pointer-events:none}
.duelmsg{position:absolute;left:50%;transform:translateX(-50%);text-align:center;color:#ffe1a7;text-shadow:0 5px 15px #000;white-space:pre-line;font-family:var(--font-display)}.tiny{position:absolute;text-shadow:0 2px 4px #000}.pause{position:absolute;pointer-events:auto}
.floatingTip{position:absolute;top:75px;left:50%;transform:translateX(-50%);opacity:0;pointer-events:none}.floatingTip.show{opacity:1}#touch{display:none}
@keyframes rotateRing{to{transform:rotate(360deg)}}@keyframes breatheSigil{to{transform:scale(1.04)}}
label,legend{font-weight:var(--weight-label)}input,select,textarea{font-family:var(--font-body);font-weight:var(--weight-body)}
#screen h1[tabindex='-1']:focus,#screen h2[tabindex='-1']:focus{outline:none}
@media(prefers-reduced-motion:reduce){#screen *,dialog *{animation:none;transition:none}}