* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #111318; color: #f4f5f7; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button { font: inherit; }
.app { position: fixed; inset: 0; min-width: 100%; min-height: 100%; background: radial-gradient(circle at 50% 45%, #263747, #18222e 65%, #10151c); user-select: none; -webkit-user-select: none; }
.loading-screen { position: absolute; z-index: 110; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; background: #10151c; color: #d7f3ff; text-align: center; }
.loading-screen[hidden] { display: none; }
.loading-screen strong { font-size: clamp(20px, 3vw, 28px); }
.loading-screen span { color: #9dc6d7; font-size: 14px; }
.stage { position: absolute; z-index: 2; inset: 0; pointer-events: none; transform: translate(var(--impact-shake-x, 0px), var(--impact-shake-y, 0px)); }
.stage::before { content: ""; position: absolute; inset: -16px; z-index: 0; background: radial-gradient(circle at 50% 45%, #263747, #18222e 65%, #10151c); }
.stage::after { content: ""; position: absolute; left: 10%; right: 10%; top: 82%; border-top: 2px solid #8ea0ae55; }
.combat-sketch { position: absolute; z-index: 1; left: 50%; bottom: 18%; transform: translateX(-50%); display: block; width: min(94vw, 170vh, 960px); height: auto; aspect-ratio: 8 / 3; }
.combat-particles { position: absolute; z-index: 2; left: 50%; bottom: 18%; transform: translateX(-50%); display: block; width: min(188vw, 340vh, 1920px); height: auto; aspect-ratio: 8 / 3; pointer-events: none; }
.combat-model { position: absolute; z-index: 3; left: 50%; bottom: 18%; transform: translateX(-50%); display: none; width: min(94vw, 170vh, 960px); height: auto; aspect-ratio: 8 / 3; pointer-events: none; }
.combat-model.ready { display: block; }
.combat-model-blue.ready { filter: drop-shadow(0 0 2px #31caff) drop-shadow(0 0 9px #176daa); }
.combat-model-red.ready { filter: drop-shadow(0 0 2px #ff5277) drop-shadow(0 0 9px #ad153e); }
.combat-effects { position: absolute; z-index: 4; left: 50%; bottom: 18%; transform: translateX(-50%); display: block; width: min(188vw, 340vh, 1920px); height: auto; aspect-ratio: 8 / 3; pointer-events: none; }
.combat-text { position: absolute; z-index: 5; left: 50%; bottom: 18%; transform: translateX(-50%); display: block; width: min(188vw, 340vh, 1920px); height: auto; aspect-ratio: 8 / 3; pointer-events: none; }
.combat-hud { position: absolute; z-index: 6; top: max(9px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); display: flex; justify-content: space-between; gap: 12px; pointer-events: none; }
.fighter-hud { --fighter-color: #38c9ff; width: min(31vw, 235px); display: grid; gap: 7px; color: var(--fighter-color); }
.fighter-hud-red { --fighter-color: #ff426d; text-align: right; }
.hp-meter { display: grid; gap: 3px; font-size: clamp(9px, 1.2vw, 11px); font-weight: 800; letter-spacing: .12em; text-shadow: 0 0 7px var(--fighter-color); }
.hp-caption { display: flex; justify-content: space-between; align-items: center; }
.fighter-hud-red .hp-caption { flex-direction: row-reverse; }
.hp-value { font-variant-numeric: tabular-nums; }
.hp-track { display: block; overflow: hidden; height: clamp(7px, 1.1vw, 10px); border: 1px solid var(--fighter-color); border-radius: 3px; background: #071017df; box-shadow: 0 0 7px color-mix(in srgb, var(--fighter-color) 55%, transparent); }
.hp-fill { display: block; width: var(--hp-percent, 100%); height: 100%; background: var(--fighter-color); box-shadow: 0 0 11px var(--fighter-color); }
.fighter-hud-red .hp-fill { margin-left: auto; }
.guard-meter { --guard-color: var(--fighter-color); position: relative; display: flex; align-items: center; gap: 7px; color: var(--guard-color); font-size: clamp(8px, 1.15vw, 10px); font-weight: 800; letter-spacing: .1em; text-shadow: 0 0 7px currentColor; }
.guard-red { flex-direction: row-reverse; }
.guard-orbs { display: flex; gap: 5px; }
.guard-orb { display: block; width: clamp(10px, 1.7vw, 14px); height: clamp(10px, 1.7vw, 14px); border: 1px solid var(--guard-color); border-radius: 50%; background: radial-gradient(circle at center, var(--guard-color) 0 var(--orb-fill, 100%), #071017 calc(var(--orb-fill, 100%) + 1%)); box-shadow: 0 0 5px color-mix(in srgb, var(--guard-color) 55%, transparent); }
.guard-red .guard-orbs { flex-direction: row-reverse; }
.guard-meter.low { --guard-color: #ffd05d; }
.guard-break-label { display: none; position: absolute; top: 100%; left: 0; right: 0; padding-top: 3px; color: var(--guard-color); font-size: clamp(8px, 1.15vw, 10px); letter-spacing: .08em; text-shadow: 0 0 8px currentColor; }
.guard-meter.broken .guard-break-label { display: block; }
.guard-meter.hide-callout .guard-break-label { display: none; }
.guard-meter.broken .guard-orb { border-color: #ffebd2; box-shadow: 0 0 8px #ff694e; }
.series-score { --score-color: #38c9ff; position: absolute; z-index: 6; top: 50%; left: max(10px, env(safe-area-inset-left)); transform: translateY(-50%); display: grid; justify-items: center; min-width: clamp(45px, 7vw, 72px); padding: 7px 5px; border: 1px solid color-mix(in srgb, var(--score-color) 60%, transparent); border-radius: 9px; background: #06111caa; color: var(--score-color); text-shadow: 0 0 8px var(--score-color); box-shadow: 0 0 14px color-mix(in srgb, var(--score-color) 20%, transparent); pointer-events: none; }
.series-score-red { --score-color: #ff426d; left: auto; right: max(10px, env(safe-area-inset-right)); }
.series-score span, .series-score small { font-size: clamp(7px, 1vw, 10px); font-weight: 800; letter-spacing: .1em; }
.series-score strong { font-size: clamp(23px, 3vw, 36px); line-height: 1; font-variant-numeric: tabular-nums; }
.stage.perfect-dodge-blue::before, .stage.perfect-dodge-red::before { filter: brightness(.46) saturate(.7); }
.stage.perfect-dodge-blue .combat-model-blue.ready { filter: drop-shadow(0 0 4px #9eeeff) drop-shadow(0 0 20px #0876bb); }
.stage.perfect-dodge-red .combat-model-red.ready { filter: drop-shadow(0 0 4px #ffc3d3) drop-shadow(0 0 20px #b21b38); }
.visual-options-toggle { position: absolute; z-index: 9; top: max(52px, calc(env(safe-area-inset-top) + 44px)); right: max(14px, env(safe-area-inset-right)); display: grid; place-items: center; width: 38px; height: 38px; padding: 7px; border: 1px solid #85c8e799; border-radius: 9px; background: #07131de8; color: #d6f4ff; box-shadow: 0 0 9px #2bc8ff55; pointer-events: auto; touch-action: manipulation; cursor: pointer; }
.visual-options-toggle svg { display: block; width: 21px; height: 21px; }
.visual-options-toggle:focus-visible, .peer-pair-button:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.peer-pair-button { width: 100%; min-height: 38px; padding: 7px 10px; border: 1px solid #8de3ff99; border-radius: 7px; background: #173447; color: #d6f4ff; font-size: 12px; font-weight: 750; touch-action: manipulation; cursor: pointer; }
.peer-connection-status { position: absolute; z-index: 7; top: max(46px, calc(env(safe-area-inset-top) + 38px)); left: 50%; transform: translateX(-50%); max-width: 64vw; padding: 4px 9px; border: 1px solid #65d4ff77; border-radius: 5px; background: #06131dda; color: #b8eaff; font-size: 11px; text-align: center; pointer-events: none; }
.peer-connection-status[hidden] { display: none; }
.peer-pairing { position: absolute; z-index: 101; inset: 0; display: grid; place-items: center; padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); background: #030b12f2; user-select: text; -webkit-user-select: text; }
.peer-pairing[hidden] { display: none; }
.peer-pair-card { position: relative; width: min(96vw, 620px); max-height: 100%; overflow: auto; display: grid; justify-items: center; gap: 8px; padding: 16px; border: 1px solid #7cd8fc; border-radius: 12px; background: #0e1b2b; box-shadow: 0 0 25px #15a8eb55; text-align: center; }
.peer-pair-card h1 { margin: 0; font-size: clamp(17px, 3vw, 24px); color: #9eeaff; }
.peer-pair-card p { margin: 0; font-size: 12px; line-height: 1.4; }
.peer-pair-card small { max-width: 50ch; font-size: 10px; color: #a8bdce; }
.peer-pair-card button { min-height: 34px; border: 1px solid #82d8f9; border-radius: 6px; background: #154869; color: white; padding: 5px 10px; cursor: pointer; }
.peer-pair-card .pair-close { position: absolute; top: 5px; right: 7px; min-height: 28px; padding: 0 8px; font-size: 24px; line-height: 1; }
.pair-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
#pair-qr { width: min(230px, 48vh); height: auto; image-rendering: pixelated; }
#pair-qr[hidden], #pair-video[hidden] { display: none; }
#pair-video { width: min(300px, 60vw); max-height: 38vh; object-fit: contain; background: #000; }
#pair-qr-caption, .peer-pair-card label { font-size: 11px; color: #addff2; }
#pair-code { width: min(100%, 450px); min-height: 42px; resize: vertical; border: 1px solid #6ba3b8; border-radius: 4px; background: #05121d; color: #e9f7ff; font-size: 10px; user-select: text; -webkit-user-select: text; }
#pair-status { min-height: 2em; color: #b7edff; }
.visual-options-panel { position: absolute; z-index: 9; top: max(98px, calc(env(safe-area-inset-top) + 90px)); right: max(14px, env(safe-area-inset-right)); display: grid; gap: 7px; width: min(300px, calc(100vw - 28px)); max-height: calc(100dvh - 102px); overflow-y: auto; padding: 11px 13px; border: 1px solid #80d9fa99; border-radius: 10px; background: #07131df5; color: #f1fbff; font-size: 13px; box-shadow: 0 0 18px #2bc8ff66; pointer-events: auto; -webkit-overflow-scrolling: touch; }
.visual-options-panel[hidden] { display: none; }
.visual-options-panel > strong { color: #b8eaff; font-size: 15px; }
.visual-options-panel label { display: flex; align-items: center; gap: 8px; white-space: nowrap; cursor: pointer; }
.visual-options-panel input { accent-color: #24c5fc; width: 17px; height: 17px; }
.app-version { display: grid; gap: 3px; padding-top: 8px; border-top: 1px solid #80d9fa44; color: #a9c8d7; font-size: 11px; }
.app-version strong { color: #f1fbff; font-size: 12px; font-variant-numeric: tabular-nums; }
#check-update { min-height: 38px; padding: 7px 10px; border: 1px solid #8de3ff; border-radius: 7px; background: #145073; color: #fff; font-size: 12px; font-weight: 750; touch-action: manipulation; cursor: pointer; }
#check-update:disabled { opacity: .65; cursor: wait; }
#update-status { color: #b8eaff; font-size: 11px; line-height: 1.35; }
#update-status:empty { display: none; }
#offline-status { border-top: 1px solid #80d9fa44; padding-top: 7px; color: #9deaff; font-size: 11px; }
.round-result { display: none; position: absolute; z-index: 7; left: 50%; top: 18%; transform: translateX(-50%); min-width: 170px; padding: 10px 15px; border: 1px solid #b8e9ff88; border-radius: 9px; background: #08121bed; color: #f5fbff; text-align: center; box-shadow: 0 0 20px #25bbff44; pointer-events: auto; }
.round-result.visible { display: grid; justify-items: center; gap: 8px; }
.round-result strong { font-size: clamp(15px, 2.5vw, 25px); font-weight: 800; letter-spacing: .05em; white-space: nowrap; }
#rematch-button { min-height: 36px; padding: 6px 18px; border: 1px solid #9de7ff; border-radius: 6px; background: #145073; color: #f5fbff; font-size: clamp(12px, 1.7vw, 16px); font-weight: 750; cursor: pointer; box-shadow: 0 0 12px #24c5fc66; touch-action: manipulation; }
#rematch-button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.status-panel { display: none; position: absolute; z-index: 8; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(46vw, 440px); padding: 8px 12px; border: 1px solid #ffffff2d; background: #08090cd9; border-radius: 10px; font-size: 12px; line-height: 1.35; pointer-events: auto; }
.app.debug-ui .status-panel { display: block; }
.status-panel > div:not(:first-child):not(.opponent-demo):not(.demo-control):not(.sketch-legend):not(.phase-row):not(.contact-row) { display: none; }
.sketch-legend { color: #a9c4d7; margin-top: 3px; }
.phase-row, .contact-row { color: #e2e8ec; margin-top: 3px; overflow-wrap: anywhere; }
.opponent-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 6px; }
.opponent-demo button { border: 1px solid #9db8ce77; border-radius: 5px; background: #253b50; color: #fff; padding: 3px 7px; font-size: 11px; cursor: pointer; touch-action: none; }
.opponent-demo button:active { background: #547797; }
.demo-control { display: flex; gap: 7px; align-items: center; margin-top: 7px; color: #e5ecf3; }
.demo-control button { flex: none; border: 1px solid #6caed4; border-radius: 5px; background: #16476b; color: #fff; padding: 4px 8px; font-size: 11px; cursor: pointer; }
.demo-control span { min-width: 0; overflow-wrap: anywhere; }
.controls.demo-running .zone { pointer-events: none; }
.event-log { display: none; }
.controls { position: absolute; z-index: 1; inset: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); pointer-events: none; }
.zone { appearance: none; pointer-events: auto; width: 100%; height: 100%; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: transparent; font-size: 0; touch-action: none; -webkit-touch-callout: none; }
.zone.active { background: transparent; }
.zone:focus-visible { outline: 2px solid #a8dcff; outline-offset: -2px; }
.dodge { grid-area: 1 / 1; }
.block { grid-area: 2 / 1; }
.heavy { grid-area: 1 / 2; }
.light { grid-area: 2 / 2; }
.rotate-warning { display: none; position: absolute; z-index: 100; inset: 0; background: #0b0d11; align-items: center; justify-content: center; text-align: center; padding: 32px; font-size: 22px; font-weight: 750; }
.rotate-warning.visible { display: flex; }
@media (orientation: portrait) { .rotate-warning { display: flex; } .controls, .stage { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .zone { transition: none !important; } }