/* H2H structural CSS (lead). Look & feel lives in src/ui/theme.css (design worker); this file only guarantees layout/behaviour. */
.hidden{display:none!important}
.screen{display:none}.screen.is-active{display:block}
.h2h{margin:0;background:#000;color:#fff;font-family:var(--font-body,system-ui,-apple-system,sans-serif)}
.app{max-width:560px;margin:0 auto;padding:12px 16px calc(24px + env(safe-area-inset-bottom))}
.topbar{display:flex;align-items:center;gap:10px;padding:calc(8px + env(safe-area-inset-top)) 16px 8px;max-width:560px;margin:0 auto}
.topbar .mute{margin-left:auto}
.topbar .mute[data-muted="1"]{opacity:.45;text-decoration:line-through}
.stage{position:relative;width:100%;aspect-ratio:9/16;max-height:70vh;background:#000;overflow:hidden;border-radius:var(--radius,16px)}
.stage__video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.stage__overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.stage__tag,.stage__frame,.stage__track,.stage__rep,.timer,.stage__lockhint{position:absolute;z-index:2}
.stage__tag{top:10px;left:10px}.stage__frame{bottom:10px;right:10px}.stage__track{bottom:10px;left:10px}.stage__rep{bottom:34px;right:10px}
.timer{top:10px;right:10px}.stage__lockhint{left:0;right:0;bottom:44px;text-align:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid2 .stage{aspect-ratio:9/16}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.search{position:relative}.search__input{width:100%;box-sizing:border-box}
.search__item{cursor:pointer}
.step-figure{position:relative}.step-figure img{width:100%;max-height:46vh;object-fit:contain;display:block}
.step-figure.is-mirror img{transform:scaleX(-1)}
.check-table{width:100%;border-collapse:collapse}.check-row__label small{display:block;opacity:.6}
.meter{display:inline-block;width:60px;height:6px;background:#222;margin-right:6px;vertical-align:middle}.meter i{display:block;height:100%;background:var(--lime,#C6FF3D)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom));z-index:99;max-width:90vw}
.trim{display:flex;gap:8px;align-items:center}.trim input{flex:1}
.stage--xray .stage__video{filter:grayscale(1) brightness(.45) sepia(.3) hue-rotate(150deg)} /* GPU-composited X-ray look; canvas draws effects only */
.winner-banner{position:relative}.winner-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;transition:opacity .4s}.winner-canvas.is-done{opacity:0}