/* Tap Brawl. Theme tokens only; the fighters are drawn on a canvas from the same tokens. */
.tb-game{max-width:1000px}
.tb-hud{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media(min-width:900px){.tb-hud.n3{grid-template-columns:repeat(3,minmax(0,1fr))}.tb-hud.n4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tb-f{border:1px solid var(--lg-line);border-radius:8px;background:var(--lg-white);padding:8px 10px;display:grid;gap:6px;min-width:0}
.tb-f.me{border-color:var(--lg-rose);box-shadow:inset 0 0 0 1px var(--lg-rose)}
.tb-f.ko{opacity:.62}.tb-f.ko .nm::after{content:' · K.O.'}
.tb-name{display:flex;align-items:center;gap:6px;min-width:0}
.tb-name .nm{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.92rem}
.tb-wins{color:var(--lg-rose);letter-spacing:2px;font-size:.82rem;flex:none}
.tb-hp{position:relative;height:18px;border:2px solid var(--lg-ink);background:var(--lg-cream);border-radius:3px;overflow:hidden}
.tb-hp i{position:absolute;left:0;top:0;bottom:0;background:var(--lg-good);transition:width .12s linear}
.tb-hp.low i{background:var(--lg-bad)}
.tb-hp span{position:absolute;right:2px;top:1px;font:400 .44rem/1 var(--lg-font-pixel);background:var(--lg-white);color:var(--lg-ink);padding:2px 3px;border-radius:2px}
.tb-sub{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--lg-muted);min-width:0}
.tb-combo{flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.tb-combo.hot{color:var(--lg-rose)}
.tb-power{width:38%;flex:none;height:9px;border:1px solid var(--lg-ink);background:var(--lg-cream);position:relative;border-radius:2px;overflow:hidden}
.tb-power i{position:absolute;left:0;top:0;bottom:0;background:var(--lg-warn)}
.tb-power.full i{background:var(--lg-rose);animation:tb-blink .5s steps(2) infinite}
@keyframes tb-blink{50%{opacity:.45}}
.tb-arena{position:relative;display:flex;justify-content:center;align-items:center;max-height:34dvh;min-height:120px}
.tb-arena canvas{display:block;image-rendering:pixelated;border:2px solid var(--lg-ink);border-radius:6px;background:var(--lg-cream)}
.tb-arena.is-over{display:none}
.tb-call{position:absolute;left:0;right:0;top:28%;margin:0;text-align:center;font-size:clamp(1.3rem,7vw,2.5rem);color:var(--lg-rose);text-shadow:3px 3px 0 var(--lg-white),-2px -2px 0 var(--lg-white),2px -2px 0 var(--lg-white),-2px 2px 0 var(--lg-white);pointer-events:none}
.tb-call-sub{position:absolute;left:0;right:0;top:62%;margin:0 auto;width:max-content;max-width:90%;text-align:center;font-weight:800;pointer-events:none;background:var(--lg-white);border:1px solid var(--lg-line);border-radius:6px;padding:3px 10px}
.tb-call:empty,.tb-call-sub:empty{display:none}
.tb-pads{display:flex;justify-content:center;gap:10px}
.tb-group{flex:1 1 0;max-width:560px;display:grid;gap:8px;min-width:0}
.tb-group-name{margin:0;font-weight:800;text-align:center;font-size:.9rem}
.tb-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tb-pad{min-height:clamp(96px,19dvh,170px);border:3px solid var(--lg-ink);border-radius:12px;background:var(--lg-white);color:var(--lg-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-family:var(--lg-font);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;box-shadow:0 5px 0 var(--lg-ink);padding:6px;min-width:0}
.tb-pad:active,.tb-pad.is-hit{animation:tb-press .12s ease-out}
@keyframes tb-press{0%{transform:translateY(3px);box-shadow:0 2px 0 var(--lg-ink)}100%{transform:none}}
.tb-pad b{font-size:1rem}
.tb-special{min-height:58px;flex-direction:row;gap:10px;background:var(--lg-pink)}
.tb-special.ready{background:var(--lg-rose);color:var(--lg-on-rose)}
.tb-special.ready kbd{background:var(--lg-white);color:var(--lg-ink)}
.tb-special:disabled{opacity:.5;cursor:default}
.tb-pads.is-local .tb-pad{min-height:clamp(84px,12dvh,120px)}
.tb-keys{text-align:center;margin:0}
@media(min-width:1000px){.tb-arena{max-height:min(38dvh,320px)}}
@media(max-height:820px) and (min-width:1000px){.tb-arena{max-height:300px}.tb-pad{min-height:96px}.tb-pads.is-local .tb-pad{min-height:84px}}
.tb-pads .tb-pad.tb-special{min-height:56px}