:root {
  --ink: #f0f3f5; --muted: #98a6b1; --accent: #83c9ff; --sand: #f0d8ad; --navy: #101c29; --cyan: #83c9ff; --coral: #ff806b;
  --dark: #080e17; --line: rgba(163,202,231,.24); --mono: 'SFMono-Regular',Consolas,'Liberation Mono',monospace;
  font-family: Bahnschrift,'Arial Narrow','Segoe UI',Arial,sans-serif; color: var(--ink); font-synthesis: none; color-scheme: dark;
}
* {box-sizing:border-box}
html,body {margin:0;width:100%;height:100%;overflow:hidden;background:var(--dark)}
button,select,a,input,summary {-webkit-tap-highlight-color:transparent}
button,select,input {font:inherit} button {cursor:pointer;color:inherit;touch-action:manipulation}
button:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible,input:focus-visible {outline:2px solid var(--accent);outline-offset:4px}
button:disabled {opacity:.48;cursor:not-allowed} [hidden] {display:none!important}
#game-canvas {position:fixed;inset:0;width:100%;height:100%;display:block;outline:none;touch-action:none}
.vignette {position:fixed;inset:0;pointer-events:none;background:linear-gradient(0deg,#050a148f,transparent 24%,transparent 72%,#050a144f);transition:background .3s}
.in-menu .vignette {background:linear-gradient(90deg,#080e17 0%,#080e17f2 20%,#080e1799 36%,#080e170a 67%),linear-gradient(0deg,#080e17ed,transparent 29%,transparent 76%,#080e17a6)}
.damage-flash {position:fixed;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 150px 35px #ff49356b;opacity:0}
.combat-tempo {position:fixed;inset:-4%;width:108%;height:108%;z-index:2;pointer-events:none;color:#ddf5ff;opacity:0;transform-origin:50% 50%;contain:strict}
.in-menu .combat-tempo {display:none}
@media(prefers-reduced-motion:reduce){.combat-tempo{display:none}}
.topbar {position:fixed;inset:0 0 auto;z-index:6;display:flex;justify-content:space-between;align-items:center;padding:26px 42px;pointer-events:none}
.topbar>* {pointer-events:auto}
.wordmark {display:flex;gap:12px;align-items:center;color:var(--ink);text-decoration:none;font-size:22px;letter-spacing:-1px;font-weight:850;line-height:1}
.wordmark small {display:block;font-family:var(--mono);font-size:7px;letter-spacing:1.95px;font-weight:400;margin-top:8px;color:#a9b8c2}
.wordmark .thin {font-weight:400;margin-left:4px}
.brand-icon {position:relative;display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:#f5ce8c;color:#153c3c}
.brand-icon svg {width:82%;height:82%;transform:translateY(2px)}
.utilities {display:flex;gap:8px;align-items:center}.live-label {font-family:var(--mono);font-size:9px;letter-spacing:1.4px;margin-right:17px;color:#b8c4cd}
.live-label i,.arena-mini i {display:inline-block;width:5px;height:5px;background:var(--accent);box-shadow:0 0 9px #83c9ff55;margin-right:8px;border-radius:50%}
.utility {display:grid;place-items:center;border:1px solid var(--line);background:#0d1824b3;width:36px;height:36px;backdrop-filter:blur(8px);transition:border .15s,background .15s}
.utility:hover {border-color:#83c9ff80;background:#233038}.utility svg {width:17px;height:17px}.utility[aria-pressed=false] {color:#738794}.quality {font-size:10px;font-weight:800}
.camera-button {height:36px;padding:0 13px;margin-right:6px;border:1px solid #c4d4e142;background:#0d1824b3;backdrop-filter:blur(8px);font-family:var(--mono);font-size:9px;letter-spacing:.5px}.camera-button span {color:var(--accent);margin-left:10px}.camera-button:hover {border-color:var(--accent)}
.menu-screen {position:fixed;inset:0;z-index:3;pointer-events:none}
.hero {position:absolute;top:clamp(112px,13vh,160px);bottom:64px;left:clamp(32px,6vw,110px);width:390px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#bac8d538 transparent;pointer-events:auto;padding:4px 12px 12px 4px;margin-left:-4px}
.eyebrow {font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:2px;display:flex;align-items:center;gap:12px;color:#c7d1d5}.small-line {height:1px;width:23px;background:var(--accent)}.muted {color:#6b7d88}
h1 {font-size:clamp(66px,6.65vw,104px);font-weight:900;line-height:.86;letter-spacing:-5px;margin:23px 0 22px;font-stretch:condensed}
h1 span {color:var(--accent)}.hero-description {font-size:12px;line-height:1.8;color:#aebdc7;margin:0 0 24px;font-weight:400}
.section-label {display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:8px;letter-spacing:1.15px;color:#c2cdd3;margin-bottom:10px}.section-label b,.setting-field label b {font-weight:500;color:#697f8e;margin-right:8px}.best-score {font-size:8px;letter-spacing:.5px;color:#92a3ad}
.arena-options {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;scroll-margin-block:12px}
.arena-option {position:relative;min-width:0;padding:0;border:1px solid #8ca5ba3b;background:#0c1724d9;text-align:left;transition:border-color .15s,background .15s;overflow:hidden}
.arena-option>span:nth-child(2) {display:block;padding:9px 9px 10px}.arena-option small {display:block;font-family:var(--mono);font-size:6px;letter-spacing:.65px;color:#899eaf;white-space:nowrap}.arena-option strong {display:block;margin-top:5px;font-size:11px;letter-spacing:.6px;font-weight:750}.arena-option:hover {border-color:#adccd699;background:#152536}
.arena-option.selected,.arena-option[aria-pressed=true] {border-color:var(--accent);background:#83c9ff0d;box-shadow:inset 0 -2px var(--accent)}.arena-option.selected strong,.arena-option[aria-pressed=true] strong {color:var(--accent)}
.map-check {position:absolute;right:8px;top:8px;font-size:12px;line-height:1;color:var(--accent);opacity:0}.arena-option.selected .map-check,.arena-option[aria-pressed=true] .map-check {opacity:1}
.map-art {position:relative;display:block;height:42px;overflow:hidden;background:linear-gradient(180deg,#133a55a8,#0b1621)}.map-art:after {content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0b1421b3,transparent 50%);pointer-events:none}
.map-island {background:linear-gradient(180deg,#70b9b5 0 49%,#228b90 50% 73%,#126a71 74%)}.map-island i:first-child {position:absolute;left:11%;bottom:-5px;width:81%;height:17px;border-radius:50%;background:#e4ca8e;box-shadow:0 -3px 0 #c4e5cc88}.map-island i:nth-child(2) {position:absolute;left:56%;bottom:8px;width:3px;height:23px;background:#604c36;transform:rotate(13deg)}.map-island i:nth-child(3) {position:absolute;left:39%;bottom:23px;width:40%;height:12px;background:#174e40;clip-path:polygon(50% 0,77% 7%,100% 65%,64% 43%,71% 100%,49% 41%,17% 91%,28% 35%,0 55%,20% 9%)}
.map-nightclub {background:linear-gradient(120deg,#1a102c,#24123b 55%,#101a37)}.map-nightclub i:first-child {position:absolute;left:-10%;bottom:-9px;width:120%;height:22px;background:repeating-linear-gradient(90deg,#c56bff44 0 1px,transparent 1px 20px),repeating-linear-gradient(0deg,#54dbec66 0 1px,transparent 1px 8px),#382548;transform:perspective(40px) rotateX(30deg)}.map-nightclub i:nth-child(2),.map-nightclub i:nth-child(3) {position:absolute;top:-9px;left:14%;width:24%;height:48px;transform:rotate(-24deg);background:linear-gradient(#ff7ab1a6,#ff7ab100);clip-path:polygon(45% 0,55% 0,100% 100%,0 100%)}.map-nightclub i:nth-child(3) {left:67%;transform:rotate(28deg);background:linear-gradient(#5fe7ffa6,#5fe7ff00)}.map-nightclub i:nth-child(4) {position:absolute;left:46%;top:3px;width:10px;height:10px;border-radius:50%;background:repeating-linear-gradient(90deg,#c8d7e8 0 2px,#736898 2px 3px);box-shadow:0 0 10px #e8c8ff99}
.map-seaside {background:linear-gradient(180deg,#bcbaa7 0 45%,#468f9c 46% 67%,#e5be83 68% 81%,#748784 82%)}.map-seaside i {position:absolute;bottom:48%;width:12%;height:21px;background:repeating-linear-gradient(0deg,transparent 0 4px,#d9ddd166 4px 5px),#586c79;border-top:1px solid #d9e4df}.map-seaside i:first-child {left:8%;height:22px;width:13%}.map-seaside i:nth-child(2) {left:24%;height:16px;width:17%;background-color:#7a7d85}.map-seaside i:nth-child(3) {left:44%;height:25px;width:11%}.map-seaside i:nth-child(4) {right:5%;width:29%;height:8px;background:#d4d2bd;border-top:2px solid #687887}
.map-helipad {background:linear-gradient(180deg,#66565f,#b78b7b 62%,#223044 63%)}.map-helipad i:first-child {position:absolute;bottom:-7px;left:19%;width:62%;height:24px;background:#263f46;border:2px solid #e2d9ac;border-radius:50%;box-shadow:0 0 0 5px #172632,0 9px 0 9px #172632}.map-helipad i:first-child:after {content:'H';position:absolute;inset:-2px 0 0;text-align:center;font:900 20px Arial;color:#f0df9b;transform:scaleY(.68)}.map-helipad i:nth-child(2) {position:absolute;top:5px;left:15%;width:24px;height:7px;background:#152333;border-radius:70% 45% 35% 30%;transform:rotate(-8deg);box-shadow:4px 2px 0 -1px #0b1927}.map-helipad i:nth-child(2):before {content:'';position:absolute;left:-9px;top:-4px;width:43px;height:2px;background:#152333;transform:rotate(-5deg)}.map-helipad i:nth-child(3) {position:absolute;right:8%;bottom:0;width:10%;height:17px;background:repeating-linear-gradient(0deg,transparent 0 4px,#b8d3d52b 4px 5px),#293d4b;box-shadow:-17px 8px 0 #24343d,15px 5px 0 #1d323f}
.selection-description {color:#9cabb8;font-size:10px;line-height:1.55;margin:9px 0 14px;min-height:15px}
.match-settings {display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:15px}
.setting-field label {font-family:var(--mono);font-size:8px;letter-spacing:1px;display:block;color:#b5c3cc;margin-bottom:8px}
select {display:block;width:100%;min-width:0;border:1px solid var(--line);border-radius:0;background:#121e2be6;color:#e6ece7;padding:10px 28px 10px 11px;font-size:11px;cursor:pointer;appearance:auto}select:disabled {opacity:.55;cursor:not-allowed}
.difficulty-description {margin:8px 0 0}.mode-description {margin:4px 0 15px;color:#bccedc}.primary-button {display:flex;align-items:center;justify-content:space-between;width:100%;padding:18px 20px;background:var(--accent);color:#182014;border:0;font-size:11px;font-weight:850;letter-spacing:1.5px;transition:background .15s,transform .15s}.primary-button:hover {background:#d6ecff;transform:translateY(-1px)}.primary-button:active {transform:translateY(1px)}.button-arrow {font-size:24px;font-weight:400;line-height:12px}
.secondary-button {display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;border:1px solid var(--line);background:#13213080;padding:14px 15px;margin-top:8px;color:#aebfc9;font-size:8px;font-weight:600;letter-spacing:1px;transition:background .2s}.secondary-button b {font-weight:400;font-size:14px;margin-left:7px;color:var(--accent)}.secondary-button:hover {background:#223241c9;color:white}
.menu-tools {display:grid;grid-template-columns:1fr 1fr;column-gap:22px;margin-top:9px}.controls-details {color:#a2b2bd;font-size:8px;font-family:var(--mono);letter-spacing:1px;min-width:0}.controls-details summary {cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}.controls-details summary::-webkit-details-marker {display:none}.controls-details summary>span {font-size:15px;color:#bdd0dc}.controls-details[open] {grid-column:1/-1}.controls-details[open] summary>span {transform:rotate(45deg)}
.control-list {display:grid;grid-template-columns:1fr 1fr;gap:0 8px;margin-top:8px}.control-list p {font-family:Bahnschrift,'Segoe UI',Arial,sans-serif;font-size:10px;letter-spacing:0;line-height:1.7;margin:5px 0}.control-list kbd {color:#dce8e6;border:1px solid #aac8df32;padding:3px 4px;margin-right:5px;font-size:8px}.control-tip {font-family:Bahnschrift,'Segoe UI',Arial,sans-serif;font-size:10px;line-height:1.7;letter-spacing:0;color:#aabdc7;margin:12px 0}.touch-tip {color:#c6d9e8}
.settings-content {padding:8px 0 7px;display:grid;grid-template-columns:1fr 1fr;gap:15px 20px}.settings-content>label {font-size:10px;font-family:Bahnschrift,'Segoe UI',Arial,sans-serif;letter-spacing:0;color:#c2d0d7}.settings-content input[type=range]{display:block;width:100%;height:16px;margin:9px 0 0;accent-color:var(--accent);cursor:pointer}.check-setting{display:flex;align-items:center;gap:7px}.check-setting input{width:15px;height:15px;margin:0;accent-color:var(--accent);cursor:pointer}
.best-run {margin-top:14px;font-family:var(--mono);font-size:7px;letter-spacing:.6px;color:#8fa38e;line-height:1.5}
.arena-caption {position:absolute;right:5.5vw;bottom:13vh;width:310px;border-top:1px solid #a2bdcd54;padding-top:15px;text-shadow:0 2px 12px #0009}
.caption-meta {display:flex;align-items:center;gap:10px;color:#b3c5d2;font-family:var(--mono);font-size:8px;letter-spacing:1.2px}.location-icon {font-size:20px;color:var(--accent)}.caption-meta i{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--accent);vertical-align:middle;margin-left:10px}
.arena-caption>strong{display:block;font-size:25px;font-weight:600;letter-spacing:-.6px;margin:12px 0 11px}.caption-bottom{display:flex;justify-content:space-between;color:#9db1bf;font-family:var(--mono);font-size:7px;letter-spacing:1px}.arena-number{color:var(--accent)}
.menu-footer {position:absolute;left:42px;right:42px;bottom:26px;display:flex;justify-content:space-between;color:#9aa9b2;font-family:var(--mono);font-size:7px;letter-spacing:1.7px}.menu-footer b {color:var(--accent);margin:0 10px}
.fight-hud {position:fixed;z-index:4;left:6%;right:6%;top:105px;display:grid;grid-template-columns:1fr 105px 1fr;gap:25px;pointer-events:none}
.fighter-heading {display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:13px;font-weight:800;letter-spacing:2px;text-shadow:0 2px 10px #000}.fighter-heading small {font-size:8px;letter-spacing:1.5px;font-weight:400;color:#b9cbd7;margin:0 8px}.fighter-heading i {display:inline-block;background:var(--cyan);width:6px;height:6px;margin-right:7px}.enemy .fighter-heading i {background:var(--coral);margin:0 0 0 7px}.round-pips {display:flex;gap:7px}.round-pips b {width:8px;height:8px;border:1px solid #adbec38f;transform:rotate(45deg)}.round-pips b.won {background:var(--accent);border-color:var(--accent);box-shadow:0 0 10px #83c9ff60}
.health-track {height:12px;position:relative;background:#050c16bf;outline:1px solid #e5f0ff29;outline-offset:4px;transform:skewX(-16deg)}.health-fill,.health-trail {position:absolute;inset:0;transform-origin:left;background:linear-gradient(90deg,#339daf,var(--cyan));transition:transform .1s linear;box-shadow:0 0 20px #83c9ff22}.health-trail {background:#e7f4ff;transition:transform .6s ease .25s}.enemy .health-fill,.enemy .health-trail {transform-origin:right}.enemy .health-fill {background:linear-gradient(90deg,var(--coral),#b44c54);box-shadow:0 0 20px #ff745922}
.meter-row {display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:10px}.meter-row small {font-family:var(--mono);font-size:7px;letter-spacing:1px;color:#c0ced6;text-shadow:0 2px 8px #000}.energy-track {width:48%;height:4px;background:#101925d9;position:relative;display:flex;justify-content:space-evenly}.energy-track>div {position:absolute;inset:0;background:#9dd0dd;transform-origin:left;transition:transform .1s}.enemy .energy-track>div {background:#d3a19b;transform-origin:right}.energy-track>span {height:100%;width:2px;background:#15202b;z-index:1}.guard-track {margin-top:8px;width:48%;height:2px;background:#ffffff14}.guard-track>div {height:100%;background:#95a6b2;transform-origin:left}.enemy .guard-track {margin-left:auto}.enemy .guard-track>div {transform-origin:right}.hp-value{font-family:var(--mono);font-size:10px;color:#d1dce3;font-variant-numeric:tabular-nums;text-shadow:0 2px 8px #000}
.clock {text-align:center;transform:translateY(-13px)}.clock small {color:var(--accent);font-family:var(--mono);font-size:8px;letter-spacing:2px}.clock strong {font-size:60px;font-weight:700;letter-spacing:-4px;display:block;line-height:1.04;font-variant-numeric:tabular-nums;text-shadow:0 4px 25px #0006}.clock>span {font-family:var(--mono);font-size:7px;letter-spacing:1px;color:#c5cdd4}.clock.urgent strong {color:var(--coral)}.run-progress{position:absolute;top:94px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:9px;letter-spacing:1.3px;color:var(--accent);background:#061019a6;padding:8px 12px;white-space:nowrap;border:1px solid #83c9ff26}
.announcement {position:fixed;left:0;top:38%;width:100%;z-index:5;text-align:center;pointer-events:none;text-shadow:0 5px 35px #0009;animation:announce-in .3s ease-out}.announcement small {display:block;font-family:var(--mono);font-size:11px;letter-spacing:4px;color:#fff}.announcement strong {font-size:clamp(56px,8vw,124px);font-style:italic;letter-spacing:-5px;line-height:1.2;font-weight:900;color:var(--accent);display:block}.announcement>span {font-family:var(--mono);font-size:10px;letter-spacing:2px;color:#d6e1e3}
.combat-toast {position:fixed;z-index:5;top:28%;left:50%;transform:translateX(-50%);font-size:11px;font-weight:750;letter-spacing:2px;color:var(--accent);text-shadow:0 3px 10px #000;background:#08121ab3;padding:8px 12px;border-left:2px solid currentColor;opacity:0;transition:opacity .15s;pointer-events:none;white-space:nowrap}.combat-toast.show {opacity:1}
.combo-display {position:fixed;left:7%;top:37%;z-index:4;display:flex;align-items:center;gap:12px;transform:rotate(-6deg);text-shadow:0 4px 20px #0005;pointer-events:none}.combo-display strong {font-size:88px;font-style:italic;font-weight:900;color:var(--accent);line-height:1}.combo-display span {font-size:14px;line-height:1.3;letter-spacing:2px}.combo-display b {font-size:9px;color:var(--accent)}
.fight-reticle {position:fixed;left:50%;top:50%;width:18px;height:18px;transform:translate(-50%,-50%);pointer-events:none;z-index:3;opacity:.75}.fight-reticle i{position:absolute;width:5px;height:5px;border-color:#dbedf0;border-style:solid}.fight-reticle i:nth-child(1){left:0;top:0;border-width:1px 0 0 1px}.fight-reticle i:nth-child(2){right:0;top:0;border-width:1px 1px 0 0}.fight-reticle i:nth-child(3){left:0;bottom:0;border-width:0 0 1px 1px}.fight-reticle i:nth-child(4){right:0;bottom:0;border-width:0 1px 1px 0}
.hazard-warning,.threat-indicator{position:fixed;z-index:4;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:10px;letter-spacing:1.4px;padding:10px 15px;background:#201517e6;border:1px solid #ff9b7f7d;color:#ffbe9a;pointer-events:none;text-align:center;white-space:nowrap}.hazard-warning{bottom:125px}.hazard-warning:before{content:'△';font-size:14px;margin-right:10px}.threat-indicator{top:34%;font-size:9px;padding:8px 12px;border:1px solid #e3c57973;color:#ffe8a4;background:#231f13db}
.fight-footer {position:fixed;bottom:28px;left:42px;right:42px;display:flex;justify-content:space-between;align-items:center;gap:20px;pointer-events:none;z-index:3}.fight-context{min-width:0}.arena-mini {font-family:var(--mono);font-size:8px;letter-spacing:1px;white-space:nowrap;color:#d2dfe4}.arena-mini>span:not(:first-of-type){color:#a2b4c0;margin-left:7px}.camera-hint{display:block;font-family:var(--mono);font-size:7px;letter-spacing:.5px;color:#9ab0c0;margin-top:9px}.keyboard-guide {display:flex;gap:13px;font-size:7px;letter-spacing:.3px;color:#a9bdc9}.keyboard-guide kbd,.lock-status kbd {font-family:var(--mono);font-size:8px;color:#d8e2e5;border:1px solid #c0e0ff38;padding:5px;border-radius:2px;margin-right:4px;white-space:nowrap}
.lock-status{pointer-events:auto;border:1px solid #83c9ff5e;background:#122c44ab;color:var(--accent);padding:11px 10px;font-family:var(--mono);font-size:8px;letter-spacing:.6px;white-space:nowrap}.lock-status>span{font-size:15px;vertical-align:middle;margin-right:7px}.lock-status kbd{margin-left:10px;margin-right:0;color:#b9d9f0;padding:3px}.lock-status[aria-pressed=false]{color:#afc1d1;border-color:#c0e0ff38;background:#0d1824b3}
.overlay {position:fixed;z-index:10;inset:0;display:flex;align-items:center;justify-content:center;background:#050b14c7;backdrop-filter:blur(14px);overflow-y:auto;padding:24px 0}.modal {width:440px;max-width:calc(100vw - 36px);max-height:calc(100dvh - 48px);overflow-y:auto;padding:36px;background:linear-gradient(145deg,#1a2936f5,#101924fa);border:1px solid #a7cedb38;box-shadow:0 30px 120px #0008;scrollbar-width:thin}.modal .eyebrow {font-size:8px;color:var(--accent);letter-spacing:1.8px}.modal h2 {font-size:44px;letter-spacing:-2px;margin:22px 0 12px;line-height:1;display:flex;justify-content:space-between;align-items:center}.modal h2>span {font-size:25px;font-weight:400;color:#93a6b3}.modal>p {font-size:13px;line-height:1.7;color:#b8c7ce;margin-bottom:25px}.text-button {display:block;text-align:center;border:0;background:none;width:100%;font-family:var(--mono);font-size:9px;letter-spacing:1.1px;margin-top:21px;color:#afc0ca;padding:3px}.text-button:hover {color:var(--accent)}.pause-hint {border-top:1px solid var(--line);margin-top:26px;padding-top:20px;font-family:var(--mono);font-size:7px;line-height:2.1;letter-spacing:.5px;text-align:center;color:#93a9b8}
.result-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.result-modal h2 {font-size:57px;color:var(--accent)}.result-modal.lost h2 {color:var(--coral)}.result-rank{display:grid;place-items:center;flex-shrink:0;min-width:49px;height:49px;border:1px solid #83c9ff80;color:var(--accent);font-size:16px;font-style:italic;font-weight:800;margin-top:10px;padding:0 8px;white-space:nowrap}.result-stats {display:grid;grid-template-columns:1fr 1fr 1fr;margin:0 0 26px;border-block:1px solid var(--line);padding:20px 0;gap:15px}.result-stats strong {display:block;font-size:30px;font-weight:500}.result-stats span {font-family:var(--mono);font-size:7px;letter-spacing:.7px;color:#a1b4bf}
.upgrade-choices{margin:-7px 0 22px}.upgrade-choices>p{display:flex;justify-content:space-between;font-family:var(--mono);font-size:8px;letter-spacing:.4px;color:var(--accent);margin:0 0 10px}.upgrade-choices>p>span{font-size:7px;color:#98abb8}.upgrade-choices>button{display:grid;grid-template-columns:1fr auto;align-items:center;gap:7px 12px;border:1px solid #b7d3e52e;background:#0e1a26;width:100%;padding:11px 13px;margin-top:6px;text-align:left}.upgrade-icon{display:grid;place-items:center;width:26px;font-size:25px;color:#bad6e9}.upgrade-choices strong{display:block;font-size:10px;letter-spacing:1px}.upgrade-choices>button>span{grid-column:1/-1;grid-row:2;font-size:10px;line-height:1.55;color:#adbfcb}.upgrade-choices small{grid-column:2;grid-row:1;font-family:var(--mono);font-size:7px;color:#b4cfe0;letter-spacing:.4px}.upgrade-choices>button:hover,.upgrade-choices>button.selected,.upgrade-choices>button[aria-pressed=true]{border-color:var(--accent);background:#83c9ff12}.upgrade-choices>button.selected strong,.upgrade-choices>button[aria-pressed=true] strong{color:var(--accent)}
.touch-controls {position:fixed;left:18px;right:18px;bottom:max(20px,env(safe-area-inset-bottom));z-index:7;display:flex;align-items:end;justify-content:space-between;pointer-events:none;user-select:none;-webkit-user-select:none}.touch-controls button {pointer-events:auto;touch-action:none;user-select:none;border:1px solid #d2e8ff50;background:#101e32cc;backdrop-filter:blur(6px);color:#d6e7ea;box-shadow:0 4px 10px #0003}.touch-controls button.active {background:#83c9ff66;border-color:var(--accent)}.dpad {display:grid;grid-template-columns:44px 44px 44px;grid-template-rows:42px 42px;gap:4px;position:relative}.dpad button {font-size:16px;border-radius:6px}.dpad .up {grid-column:2}.dpad .left {grid-row:2;grid-column:1}.dpad .down {grid-row:2;grid-column:2}.dpad .right {grid-row:2;grid-column:3}.dpad .touch-lock{grid-row:1;grid-column:1;font-size:8px;color:var(--accent)}.touch-actions {display:grid;grid-template-columns:56px 56px 56px;gap:6px}.touch-actions button {font-size:8px;letter-spacing:.5px;width:56px;height:50px;border-radius:7px}.touch-actions .touch-small {height:33px;font-size:7px}.touch-actions .touch-special {background:#83c9ff36;border-color:#83c9ff90;color:var(--accent)}
@keyframes announce-in {from {opacity:0;transform:scale(1.2) skew(-8deg)}to {opacity:1;transform:scale(1) skew(0)}}
@media(min-width:1600px){.hero{width:420px}.hero-description{font-size:14px}.arena-option strong{font-size:12px}.arena-option small{font-size:7px}.map-art{height:49px}.selection-description{font-size:11px}.setting-field label,.section-label{font-size:9px}.primary-button{padding:20px 22px}.arena-caption{width:340px;bottom:15vh}}
@media(max-height:850px) and (min-width:801px){.hero{top:103px;bottom:58px;width:380px}h1{font-size:76px;margin:17px 0 17px}.hero-description{font-size:11px;margin-bottom:17px}.map-art{height:33px}.arena-option>span:nth-child(2){padding:7px 9px 9px}.selection-description{margin-top:8px;margin-bottom:11px}.match-settings{margin-top:11px}.difficulty-description{margin-bottom:0}.mode-description{margin-top:3px}.primary-button{padding:16px 20px}.secondary-button{padding:12px 14px}.best-run{margin-top:10px}.controls-details summary{padding:8px 0}}
@media(max-height:720px) and (min-width:801px){.hero{top:96px;width:356px;bottom:51px}h1{font-size:61px;margin:14px 0}.hero-description{font-size:10px;line-height:1.6;margin-bottom:14px}.section-label{margin-bottom:7px}.map-art{height:26px}.arena-option small{font-size:5.5px}.arena-option strong{font-size:10px}.arena-option>span:nth-child(2){padding:6px 8px 8px}.selection-description{font-size:9px;margin-bottom:8px}.setting-field label{margin-bottom:6px;font-size:7px}.match-settings{margin-top:7px}select{padding:8px 25px 8px 9px;font-size:10px}.difficulty-description{margin-bottom:0}.mode-description{margin:3px 0 10px}.primary-button{padding:14px 17px;font-size:10px}.secondary-button{padding:11px 12px;font-size:7px}.menu-tools{margin-top:4px}.controls-details summary{padding:7px 0}.best-run{font-size:6px;margin-top:9px}.arena-caption{bottom:90px}.topbar{padding-top:21px}.menu-footer{bottom:21px}}
@media(max-width:1100px){.hero{left:5vw}.arena-caption{right:5vw;width:260px}.arena-caption>strong{font-size:22px}.keyboard-guide{display:none}.fight-hud{left:5%;right:5%;gap:22px}.fight-footer{left:5%;right:5%}.topbar{padding-inline:5%}}
@media(max-width:800px){.topbar{padding:21px 24px}.wordmark{font-size:19px;gap:10px}.brand-icon{width:35px;height:35px;font-size:28px}.wordmark small{font-size:6px;letter-spacing:1.55px}.live-label{display:none}.utilities{gap:6px}.utility{width:32px;height:32px}.camera-button{font-size:7px;max-width:118px;padding:0 7px;height:32px}.camera-button span{display:none}.hero{top:106px;bottom:55px;left:28px;width:360px}h1{font-size:80px}.hero-description{font-size:11px;margin-bottom:20px}.arena-caption{right:28px;bottom:86px;width:225px}.arena-caption>strong{font-size:19px}.caption-meta{font-size:7px;letter-spacing:.5px}.caption-bottom{font-size:6px;letter-spacing:.3px}.in-menu .vignette{background:linear-gradient(90deg,#080e17f7,#080e17d9 40%,#080e1759 74%,#080e171f),linear-gradient(0deg,#080e17e6,transparent 45%)}.menu-footer{left:28px;right:28px;font-size:6px;letter-spacing:1px;bottom:23px}.fight-hud{top:87px;left:24px;right:24px;gap:15px;grid-template-columns:1fr 65px 1fr}.clock strong{font-size:47px}.clock small{font-size:7px}.clock>span{font-size:6px;letter-spacing:.5px}.fighter-heading{font-size:11px;letter-spacing:1px;margin-bottom:10px}.fighter-heading small{display:none}.health-track{height:10px;outline-offset:3px}.meter-row{margin-top:10px;gap:5px}.meter-row small{font-size:6px;letter-spacing:.3px}.hp-value{font-size:8px}.fight-footer{left:24px;right:24px;bottom:23px;gap:12px}.arena-mini{font-size:7px}.camera-hint{font-size:6px;letter-spacing:0;max-width:300px;line-height:1.8}.run-progress{top:78px;font-size:8px;padding:6px 9px}.announcement strong{font-size:70px}.combo-display strong{font-size:67px}.hazard-warning{font-size:9px;bottom:105px}}
@media(max-width:650px){.arena-caption{display:none}.hero{width:min(370px,calc(100vw - 44px));left:24px;padding-right:7px}.in-menu .vignette{background:linear-gradient(90deg,#080e17f7,#080e17e6 50%,#080e17a6),linear-gradient(0deg,#080e17e6,transparent 45%)}h1{font-size:76px}.hero-description{font-size:12px}.topbar{padding:20px}.wordmark{font-size:17px}.wordmark small{font-size:5.5px;letter-spacing:1.2px}.brand-icon{width:31px;height:32px;font-size:26px}.utility{width:29px;height:30px}.utilities{gap:5px}.camera-button{font-size:0;width:29px;padding:0;margin:0}.camera-button:after{content:'↗';font-size:16px;color:var(--accent)}.menu-footer{left:24px;right:24px;font-size:5.5px;letter-spacing:.6px}.menu-footer b{margin:0 5px}.fight-hud{left:18px;right:18px;gap:10px;grid-template-columns:1fr 56px 1fr}.fighter-heading{font-size:10px}.fighter-heading i{width:5px;height:5px;margin-right:4px}.round-pips{gap:5px}.round-pips b{width:6px;height:6px}.meter-row small{display:none}.energy-track{width:76%}.guard-track{width:76%}.clock strong{font-size:44px}.fight-footer{bottom:133px;left:20px;right:20px;align-items:flex-end}.camera-hint{max-width:200px;font-size:6px;line-height:1.65}.lock-status{font-size:7px;padding:8px;max-width:132px;white-space:normal}.lock-status kbd{display:none}.lock-status>span{font-size:13px;margin-right:4px}.arena-mini{font-size:6px;letter-spacing:.3px}.arena-mini>span:not(:first-of-type){margin-left:4px}.hazard-warning{bottom:197px;font-size:8px;max-width:94vw;white-space:normal}.threat-indicator{font-size:8px;max-width:94vw;white-space:normal;top:31%}.announcement strong{font-size:60px;letter-spacing:-3px}.announcement small{font-size:8px;letter-spacing:2px}.announcement>span{font-size:8px;letter-spacing:1px}.combo-display{top:34%;left:6%}.combo-display strong{font-size:53px}.combo-display span{font-size:11px}.combat-toast{top:25%;font-size:9px;letter-spacing:1px;max-width:94vw;white-space:normal;text-align:center}.modal{padding:26px}.modal h2{font-size:38px}.result-modal h2{font-size:47px}.result-rank{font-size:13px;min-width:41px;height:41px}.touch-controls{left:12px;right:12px}.dpad{grid-template-columns:39px 39px 39px;grid-template-rows:39px 39px}.touch-actions{grid-template-columns:50px 50px 50px;gap:5px}.touch-actions button{width:50px;height:46px;font-size:7px}.touch-actions .touch-small{height:31px;font-size:6px}}
@media(max-height:780px) and (max-width:800px){.hero{top:92px}h1{font-size:64px;margin:16px 0}.hero-description{font-size:11px;line-height:1.6;margin-bottom:17px}.map-art{height:29px}.arena-option>span:nth-child(2){padding:7px 8px 8px}.selection-description{font-size:9px;margin-bottom:9px}.match-settings{margin-top:9px}.difficulty-description{margin-bottom:0}.mode-description{margin:3px 0 11px}.primary-button{padding:16px 17px}.secondary-button{padding:12px}.menu-tools{margin-top:4px}.best-run{font-size:6px;margin-top:8px}.controls-details summary{padding:8px 0}}
@media(orientation:landscape) and (max-height:520px){.topbar{padding:14px 24px}.hero{top:69px;left:31px;bottom:38px;width:315px}h1{font-size:48px;margin:12px 0}.hero-description{font-size:10px;margin-bottom:13px}.eyebrow{font-size:7px}.section-label,.setting-field label{font-size:7px}.map-art{height:23px}.map-check{top:6px;right:6px}.arena-option strong{font-size:10px}.arena-option small{font-size:5px}.arena-option>span:nth-child(2){padding:6px 7px}.selection-description{font-size:9px}.primary-button{padding:13px 15px;font-size:9px}.secondary-button{padding:11px 12px;font-size:7px}.menu-footer{bottom:16px}.arena-caption{display:block;right:28px;bottom:60px;width:230px}.fight-hud{top:67px;left:6%;right:6%;gap:15px;grid-template-columns:1fr 55px 1fr}.clock strong{font-size:39px}.fighter-heading{font-size:9px;margin-bottom:8px}.health-track{height:8px}.meter-row{margin-top:8px}.clock{transform:translateY(-8px)}.run-progress{top:66px;font-size:7px;padding:4px 8px}.fight-footer{bottom:113px;left:24px;right:24px}.fight-context{display:none}.lock-status{margin-left:auto;font-size:7px;padding:7px}.announcement{top:31%}.announcement strong{font-size:55px}.combat-toast{top:34%;font-size:8px}.threat-indicator{top:49%;font-size:8px}.hazard-warning{bottom:33px;font-size:8px;max-width:37vw;white-space:normal;padding:6px 9px}.touch-controls{bottom:14px}.dpad{grid-template-columns:36px 36px 36px;grid-template-rows:34px 34px}.touch-actions{grid-template-columns:47px 47px 47px}.touch-actions button{width:47px;height:37px}.touch-actions .touch-small{height:27px}.modal{padding:23px;width:410px}.modal h2{font-size:36px;margin-top:15px}.result-modal h2{font-size:44px}.modal>p{font-size:11px;margin-bottom:17px}.pause-hint{display:none}.result-stats{padding:12px 0;margin-bottom:19px}.result-stats strong{font-size:25px}.text-button{margin-top:15px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.dpad .touch-sprint {grid-row:1;grid-column:3;font-size:7px;letter-spacing:0;color:var(--accent)}

.online-panel {margin-top:14px;padding:0 13px;border:1px solid #83c9ff45;background:#0b1b28d9}
.online-panel summary {display:flex;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;padding:14px 0;font:600 10px var(--mono);letter-spacing:1px;color:var(--cyan)}
.online-panel summary::-webkit-details-marker {display:none}
.online-panel>p {font-size:11px;line-height:1.6;color:#aebfc9;margin:0 0 12px}
.online-panel .online-status {color:var(--accent);margin:14px 0;overflow-wrap:anywhere}
.join-form {margin:14px 0}.join-form label {display:block;font:9px var(--mono);color:#aebfc9;margin-bottom:8px}
.join-form>div {display:flex;gap:8px}.join-form input {min-width:0;width:100%;background:#060f1a;border:1px solid var(--line);padding:11px;color:var(--ink);font:600 15px var(--mono);letter-spacing:3px;text-transform:uppercase}
.join-form button,.room-invite button {border:1px solid #83c9ff55;background:#18333e;color:var(--cyan);padding:10px;font:600 9px var(--mono);white-space:nowrap}
.room-invite {display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:16px;align-items:center}
.room-invite>span {font:8px var(--mono);color:#aebfc9;grid-column:1/-1}.room-invite strong {font:700 24px var(--mono);letter-spacing:3px;color:var(--accent)}
.online-panel>.text-button {margin:6px 0 14px}
.network-indicator {position:fixed;z-index:5;right:5%;top:178px;padding:7px 10px;max-width:85vw;background:#081420d9;border:1px solid #83c9ff38;color:var(--cyan);font:9px var(--mono);pointer-events:none}
.network-indicator.delayed {color:#ffbe75;border-color:#ffbe7555}
.local-crimson .player .health-fill {background:linear-gradient(90deg,#b44c54,var(--coral))}
.local-crimson .enemy .health-fill {background:linear-gradient(90deg,var(--cyan),#339daf)}
.local-crimson .player .fighter-heading i {background:var(--coral)}.local-crimson .enemy .fighter-heading i {background:var(--cyan)}
@media(max-width:800px){.network-indicator{top:157px;font-size:8px;right:24px}}
@media(orientation:landscape) and (max-height:520px){.network-indicator{top:126px;right:6%;font-size:7px}}

/* Oil Island — character selection and a compact, readable fight interface. */
.launch-actions {position:fixed;z-index:6;left:5.6vw;bottom:48px;width:426px;display:grid;grid-template-columns:1fr 110px;gap:8px;padding-top:13px;background:linear-gradient(0deg,#080e17 70%,#080e1700);pointer-events:auto}
.launch-actions .primary-button,.launch-actions .secondary-button {margin:0;min-height:49px}
.launch-actions .secondary-button {border:1px solid #ccddeb3d;font-size:9px;gap:8px;background:#14212ded}
.hero {width:440px;top:104px;bottom:121px;left:5.6vw;padding-right:14px;scrollbar-color:#68829155 transparent;overscroll-behavior:contain;scroll-padding-block:12px}
.hero h1 {font-size:56px;line-height:.94;letter-spacing:-2.5px;margin:20px 0 12px}
.hero .hero-description {font-size:12px;line-height:1.6;margin:0 0 23px;color:#b2c1cc}
.character-picker {margin-bottom:22px}
.character-options {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.character-option {position:relative;padding:4px 2px 8px;border:1px solid #bacfe525;background:#101c28;text-align:center;overflow:hidden;transition:background .15s,border-color .15s,transform .15s}
.character-option:hover {transform:translateY(-3px);background:#23343b}
.character-option svg {display:block;width:100%;height:74px;filter:drop-shadow(0 4px 5px #0005)}
.character-option strong {display:block;font:700 9px var(--mono);letter-spacing:.1px;padding-top:5px}
.character-option small {display:block;font:6px var(--mono);letter-spacing:.5px;color:#9dadbb;margin-top:5px}
.character-option.selected {border-color:var(--accent);background:linear-gradient(0deg,#83c9ff24,#14202c)}
.character-option.selected:before {content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent)}
.character-option.selected strong {color:var(--accent)}
.character-heading {display:flex;align-items:center;justify-content:space-between;gap:10px;margin:17px 0 7px}
.character-heading h2 {font-size:25px;letter-spacing:-.4px;line-height:1;margin:0;font-weight:750}
.character-heading>span {font:7px var(--mono);letter-spacing:.65px;color:var(--accent);text-align:right}
.character-description {font-size:11px;line-height:1.65;color:#a9bac8;min-height:35px;margin:0 0 12px}
.character-moves {display:grid;grid-template-columns:1fr 1fr;gap:10px;border-block:1px solid #c0d5e321;padding:11px 0}
.character-moves>span {display:grid;grid-template-columns:24px 1fr;gap:4px 7px;align-items:center}
.character-moves kbd {grid-row:1/3;width:23px;height:29px;display:grid;place-items:center;border:1px solid #b9d8eb42;color:#83c9ff;font:11px var(--mono);background:#1d2b3655}
.character-moves b {font-size:10px;font-weight:600;line-height:1.35}
.character-moves small {font:6px var(--mono);color:#899cae;letter-spacing:.8px}
.character-extra {font-size:9px;color:#a9b8c4;line-height:1.6;min-height:28px;margin:8px 0 10px}
.opponent-field {display:flex;align-items:center;gap:14px;justify-content:space-between}
.opponent-field label {font:7px var(--mono);margin:0!important;color:#8fa3b4;letter-spacing:.7px}
.opponent-field select {width:142px;padding:7px 25px 7px 9px;font-size:10px}
.hero .arena-options .map-art {height:28px}
.hero .arena-option>span:nth-child(2) {padding:7px 8px}
.hero .arena-option small {font-size:6px}
.hero .arena-option strong {font-size:11px}
.hero .selection-description {font-size:10px;line-height:1.6}
.hero .match-settings {margin-top:13px}
.hero .primary-button {padding:16px 20px}
.hero .secondary-button {padding:13px 16px}
.in-menu .arena-caption {right:6%;bottom:85px;background:linear-gradient(90deg,#06101a00,#06101abb);padding:20px 0 14px 24px;width:355px}
.super-indicator {position:absolute;left:0;top:107px;border:1px solid #e6e9df25;padding:9px 12px;color:#99a9b9;background:#06101999;font:8px var(--mono);letter-spacing:.8px;pointer-events:none}
.super-indicator.ready {color:var(--accent);border-color:#83c9ff90;box-shadow:inset 3px 0 var(--accent);background:#132d43ed}
.touch-actions .touch-super {grid-column:1/-1;width:100%;height:28px;color:#ffe196;border-color:#ffdb8370;background:#523d2177;font-size:8px;letter-spacing:1.5px}
.touch-actions [data-control=block] {border-color:#77d3ffb0;background:#173957c9}
.touch-actions [data-control=dodge] {border-color:#83c9ffb0;background:#173750c9}
.touch-actions [data-control=punch] {font-size:9px;background:#243f50e6;border-color:#a7d4edb0}
@media(min-width:1650px){.hero{width:462px}.character-option svg{height:82px}.character-option strong{font-size:10px}.character-description{font-size:12px}.character-moves b{font-size:11px}}
@media(max-width:1100px){.hero{left:4vw;width:394px}.hero h1{font-size:49px}.character-option svg{height:66px}.character-option strong{font-size:8px}.character-option small{font-size:5.5px}.in-menu .arena-caption{width:270px;right:4%}}
@media(max-width:650px){.hero{left:22px;width:calc(100vw - 36px);top:93px;bottom:40px}.hero h1{font-size:46px;margin-top:15px}.hero .hero-description{font-size:11px;margin-bottom:20px}.character-option svg{height:68px}.character-heading h2{font-size:23px}.character-picker{margin-bottom:19px}.in-menu .arena-caption{display:none}.hero .arena-options .map-art{height:24px}.character-options{gap:4px}.character-option strong{font-size:8px}.character-option small{font-size:5.5px}.super-indicator{top:83px;font-size:7px;padding:7px}.fight-footer{bottom:165px}.hazard-warning{bottom:210px}}
@media(max-height:700px) and (min-width:651px){.hero{top:85px;bottom:40px;width:368px}.hero h1{font-size:43px;margin:13px 0 9px}.hero .hero-description{margin-bottom:15px}.character-option svg{height:60px}.character-heading{margin-top:13px}.character-heading h2{font-size:22px}.character-description{font-size:10px}.character-picker{margin-bottom:15px}.character-moves{padding:8px 0}.character-extra{font-size:8px}.in-menu .arena-caption{bottom:60px}.super-indicator{top:87px}}
@media(orientation:landscape) and (max-height:520px){.hero{top:66px;bottom:29px;left:24px;width:325px}.hero h1{font-size:37px}.character-option svg{height:55px}.character-option strong{font-size:7px}.character-option small{font-size:5px}.character-heading h2{font-size:21px}.character-description{font-size:10px}.in-menu .arena-caption{width:230px;right:25px;bottom:50px}.super-indicator{top:72px;font-size:6px;padding:5px 8px}.touch-actions .touch-super{height:23px}.fight-footer{bottom:141px}}
@media(min-width:1650px){.launch-actions{width:448px}}
@media(max-width:1100px){.launch-actions{left:4vw;width:380px}}
@media(max-height:700px) and (min-width:651px){.launch-actions{width:354px;bottom:31px}.hero{bottom:100px}}
@media(max-width:650px){.launch-actions{left:22px;width:calc(100vw - 50px);bottom:32px;grid-template-columns:1fr 95px}.hero{bottom:105px}.launch-actions .primary-button{padding:14px 12px;font-size:9px}.launch-actions .secondary-button{padding:10px;font-size:8px}}
@media(orientation:landscape) and (max-height:520px){.launch-actions{left:24px;width:311px;bottom:27px;grid-template-columns:1fr 90px}.hero{bottom:98px}.launch-actions .primary-button,.launch-actions .secondary-button{min-height:40px}}
.performance-readout{font:9px var(--mono);color:#b3c4ce;min-width:42px;text-align:right}
.preview-orbit{position:absolute;right:6%;bottom:222px;display:flex;gap:8px;pointer-events:auto}.preview-orbit button{width:36px;height:34px;border:1px solid #67818b66;background:#07111bbb;color:#c8d7dd;font-size:22px;cursor:pointer}.preview-orbit button:hover,.preview-orbit button:focus-visible{border-color:var(--accent);color:var(--accent);outline:none}@media(max-width:650px){.preview-orbit{display:none}}

/* Portraits share the very same atlas used by the 3D heads. */
.character-portrait{position:relative;display:block;width:100%;height:92px;overflow:hidden;background-repeat:no-repeat;border-radius:2px}
.character-portrait img{position:absolute;width:200%;height:200%;max-width:none;left:0;top:0;object-fit:fill;pointer-events:none}
.portrait-titan img{left:-100%}.portrait-mimico img{top:-100%}.portrait-pixel img{left:-100%;top:-100%}
.portrait-orelha{background-image:var(--dog-portrait);background-size:auto 140%;background-position:43% 9%}
@media(max-width:1100px){.character-portrait{height:78px}}@media(max-width:650px){.character-portrait{height:76px}}@media(orientation:landscape) and (max-height:520px){.character-portrait{height:63px}}

/* Keep the score readable over both sunlit sand and the club's moving lights. */
body:not(.in-menu) .vignette {background:linear-gradient(180deg,#06101ac9 0,#06101a66 92px,#06101a00 235px),linear-gradient(0deg,#050a14a6,transparent 24%)}
.topbar {background:linear-gradient(180deg,#06101a85,transparent)}
.wordmark,.live-label,.performance-readout {text-shadow:0 1px 2px #030910,0 0 12px #030910}
.wordmark small {color:#c5d1d8}
.fighter-hud,.clock {position:relative;isolation:isolate;min-width:0}
.fighter-hud::before,.clock::before {content:'';position:absolute;z-index:-1;pointer-events:none;inset:-10px -12px -9px;background:linear-gradient(180deg,#07121de8,#07121dcc);border:1px solid #bddeec26;box-shadow:0 5px 20px #02080e26}
.clock::before {inset:-6px -4px -4px;border-color:#bddeec1c;background:#07121dd9}
.fighter-heading,.clock {text-shadow:0 1px 2px #02080e}
.fighter-heading small,.meter-row small,.hp-value,.clock>span {color:#dce6ec;text-shadow:0 1px 2px #02080e}
.health-track {background:#030b12;outline-color:#c4e4f066;box-shadow:0 0 0 4px #07121dcc}
.energy-track {background:#020910;box-shadow:0 0 0 1px #c1dfed38}
.guard-track {height:3px;background:#020910}
.guard-track>div {background:#bacbd5}
.clock strong {text-shadow:0 2px 2px #02080e}
.round-pips b {border-color:#cbdce4;background:#07121d}
.announcement {right:0;width:max-content;max-width:calc(100vw - 40px);margin-inline:auto;padding:15px 26px 17px;background:#06101ad9;border-block:1px solid #83c9ff3d;box-shadow:0 10px 36px #02080e33;text-shadow:0 2px 2px #02080e}
.announcement strong {text-shadow:0 2px 2px #02080e,0 4px 16px #02080e80}
.announcement>span {display:block;color:#e0e9ed;line-height:1.6}
.combo-display {text-shadow:0 2px 2px #02080e,0 0 8px #02080e,0 0 18px #02080e}
.fight-context,.keyboard-guide {padding:9px 12px;background:#06101ad9;border:1px solid #bddeec26;box-shadow:0 4px 18px #02080e24}
.arena-mini,.arena-mini>span:not(:first-of-type),.camera-hint,.keyboard-guide {color:#cddde6;text-shadow:0 1px 2px #02080e}
.arena-mini {white-space:normal;line-height:1.5}
.camera-hint {line-height:1.6;margin-top:5px}
body:has(#touch-controls:not([hidden])) .fight-footer {bottom:calc(147px + env(safe-area-inset-bottom))}
.hero .arena-option {min-height:76px}
.hero .arena-option small {font-size:7px;line-height:1.45;white-space:normal;color:#b8c9d5}
.hero .arena-option strong {line-height:1.25}
.arena-option:focus-visible,.character-option:focus-visible {outline-offset:2px}
@media(max-width:800px){
  .fighter-hud::before {inset:-8px -8px -8px}
  .clock::before {inset:-4px -3px}
  .announcement {padding:13px 20px}
  .announcement small {line-height:1.6;letter-spacing:2px}
}
@media(max-width:650px){
  body:not(.in-menu) .vignette {background:linear-gradient(180deg,#06101ad9 0,#06101a66 80px,#06101a00 195px),linear-gradient(0deg,#050a14b3,transparent 28%)}
  .fighter-hud::before {inset:-7px -7px -8px}
  .clock::before {inset:-4px -2px}
  .fight-context {padding:7px 9px;max-width:60%}
  .announcement {max-width:calc(100vw - 28px);padding:12px 14px}
  .announcement strong {font-size:clamp(34px,8.2vw,54px);letter-spacing:-1.5px}
  .announcement>span {font-size:8px;letter-spacing:.7px}
  .hero .arena-option small {font-size:7px;letter-spacing:.2px;min-height:20px}
  .hero .arena-option strong {font-size:10px;letter-spacing:.3px}
  .hero .arena-option {min-height:81px}
  .launch-actions {bottom:calc(32px + env(safe-area-inset-bottom))}
  .hero {bottom:calc(105px + env(safe-area-inset-bottom))}
}
@media(max-width:430px){
  .topbar {padding-inline:16px;gap:10px}
  .wordmark {font-size:16px;flex-shrink:0}
  .wordmark .brand-icon {display:none}
  .performance-readout {position:absolute;right:16px;top:58px;font-size:8px}
  .utilities {gap:4px}
}
@media(orientation:landscape) and (max-height:520px){
  body:not(.in-menu) .vignette {background:linear-gradient(180deg,#06101ac9,transparent 180px),linear-gradient(0deg,#050a1480,transparent 28%)}
  .announcement {padding:8px 18px}
  .announcement strong {font-size:44px}
  .hero .arena-option {min-height:73px}
  body:has(#touch-controls:not([hidden])) .fight-footer {bottom:calc(138px + env(safe-area-inset-bottom))}
}
/* The helipad entrance reserves the image for the approaching aircraft. */
body.in-cutscene #fight-hud,
body.in-cutscene #fight-footer,
body.in-cutscene #touch-controls,
body.in-cutscene #lock-status,
body.in-cutscene #fight-reticle,
body.in-cutscene #camera-hint,
body.in-cutscene #camera-button { visibility: hidden; pointer-events: none; }
body.in-cutscene::after { content: ''; position: fixed; inset: 0; z-index: 8; pointer-events: none; border-top: min(6vh, 48px) solid #090e14; border-bottom: min(6vh, 48px) solid #090e14; }
body.in-menu::after { display: none; }
/* Compact keyboard combo readout stays beside the duel, never over the target. */
.combo-display {gap:10px;left:4%;top:39%;transform:none;padding:10px 15px;background:linear-gradient(90deg,#07121ce8,#07121c9c);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;max-width:265px}
.combo-display strong {font-size:66px;min-width:45px}
.combo-details {min-width:126px;max-width:180px}
.combo-details>span {font-size:10px;letter-spacing:1px;display:block}
.combo-details b {font-size:10px}
.combo-route {font:600 12px/1.6 monospace;color:#fff;margin-top:6px;letter-spacing:1px}
.combo-window {height:3px;background:#ffffff20;margin:7px 0 5px;overflow:hidden}
.combo-window i {display:block;height:100%;background:#a4d7ff;transform-origin:left;transition:transform 50ms linear}
.combo-details small {display:block;font:600 8px/1.5 monospace;letter-spacing:.45px;color:#c5d8d7}
.combo-open .combo-window i {background:#f0d8ad;box-shadow:0 0 8px #a4d7ff}
.combo-hot {border-color:#ffc17e}.combo-hot strong,.combo-hot b {color:#ffc17e}
.combo-guide {display:grid;gap:7px;margin-top:14px;padding-top:12px;border-top:1px solid #ffffff18;font:10px/1.6 monospace;color:#c4d3dc}
.combo-guide b {color:#e6efed;font-weight:600}.combo-guide kbd {color:#cafa9a}
@media(max-width:650px){.combo-display{top:37%;left:12px;padding:8px 10px;max-width:202px}.combo-display strong{font-size:44px;min-width:30px}.combo-details{min-width:100px;max-width:130px}.combo-route{font-size:10px}.combo-details>span,.combo-details b{font-size:8px}.combo-details small{font-size:7px}}
@media(prefers-reduced-motion:reduce){.combo-window i{transition:none}}

/* Posture remains labelled beside its meter, even during a long combo. */
.guard-track {position:relative}
.guard-track::after {content:"POSTURA";position:absolute;left:calc(100% + 7px);top:-3px;font:6px var(--mono);letter-spacing:.5px;color:#cad7e0;white-space:nowrap}
.enemy .guard-track::after {left:auto;right:calc(100% + 7px)}
@media(max-width:650px){.guard-track{width:63%}.guard-track::after{font-size:5px;letter-spacing:0}}

/* Touch layout keeps the duel between the two thumbs, inside device safe areas. */
.mobile-play-tip {display:none}
.touch-controls {
  --touch-key:56px;
  left:calc(14px + env(safe-area-inset-left));right:calc(14px + env(safe-area-inset-right));
  bottom:calc(16px + env(safe-area-inset-bottom));gap:18px;align-items:flex-end;
}
.touch-controls button {min-width:44px;min-height:44px;border-radius:12px;backdrop-filter:none;-webkit-backdrop-filter:none;font:700 9px var(--mono);letter-spacing:0;box-shadow:0 3px 10px #0003;background:#0e1d30e0}
.touch-controls button.active {background:#235378f0;border-color:var(--accent);box-shadow:0 0 0 2px #83c9ff30}
.touch-movement {display:grid;grid-template-columns:116px;gap:8px;flex:0 0 auto}
.touch-movement-actions {display:grid;grid-template-columns:1fr 1fr;gap:6px}
.touch-movement-actions button {padding:0 3px;font-size:8px}
.touch-lock {color:var(--accent)!important}
.touch-lock[aria-pressed=false] {color:#c2d3df!important;border-color:#c2d3df44}
.touch-stick {position:relative;width:116px;height:116px;border:1px solid #cbe5f05c;border-radius:50%;background:radial-gradient(circle,#1e344080 0 48%,#0b172aa8 49% 100%);box-shadow:inset 0 0 0 12px #0915252b,0 4px 16px #0002;touch-action:none;pointer-events:auto;overflow:hidden;user-select:none;-webkit-user-select:none}
.touch-stick::before,.touch-stick::after {content:'';position:absolute;pointer-events:none;background:#c9e1eb25;inset:15px calc(50% - .5px);width:1px}
.touch-stick::after {inset:calc(50% - .5px) 15px;height:1px;width:auto}
.touch-stick-guide {position:absolute;bottom:11px;left:0;right:0;text-align:center;font:600 7px var(--mono);letter-spacing:1.2px;color:#d5e3e5ab;pointer-events:none}
.touch-stick-knob {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;border:1px solid #daf0f09c;background:linear-gradient(145deg,#7e9dabb8,#233b4fe8);box-shadow:0 3px 12px #0005;pointer-events:none;will-change:transform}
.touch-stick.active {border-color:#83c9ffb0;background:radial-gradient(circle,#23496380 0 48%,#0b172ac9 49% 100%)}
.touch-stick.active .touch-stick-knob {border-color:var(--accent);background:#4684ace6}
.touch-actions {grid-template-columns:repeat(3,var(--touch-key));grid-template-rows:44px 48px 56px;gap:6px;flex:0 0 auto}
.touch-actions button,.touch-actions .touch-small {width:var(--touch-key);height:100%;font-size:8px;padding:0 2px}
.touch-actions [data-control=punch] {font-size:10px;background:#29475cea;border-color:#c3e9f6cc}
.touch-actions .touch-super {height:100%;font-size:9px;letter-spacing:1px;background:#3f321dea}
.touch-actions .touch-special {background:#173a56ed}
.touch-controls .touch-pause {position:fixed;top:calc(10px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right));width:44px;height:44px;display:grid;place-items:center;padding:11px;border-radius:10px;background:#081523e8}
.touch-pause svg {display:block;width:22px;height:22px}
body:has(#touch-controls:not([hidden])) .fight-footer {display:none}
body:has(#touch-controls:not([hidden])) .topbar {padding:0;top:calc(10px + env(safe-area-inset-top));left:calc(14px + env(safe-area-inset-left));right:calc(68px + env(safe-area-inset-right));justify-content:flex-start}
body:has(#touch-controls:not([hidden])) .topbar .wordmark,
body:has(#touch-controls:not([hidden])) .topbar .live-label,
body:has(#touch-controls:not([hidden])) #camera-button,
body:has(#touch-controls:not([hidden])) #pause-button {display:none!important}
body:has(#touch-controls:not([hidden])) .utility {width:44px;height:44px}
body:has(#touch-controls:not([hidden])) .performance-readout {position:static;font-size:9px;min-width:40px;order:5}
body:has(#touch-controls:not([hidden])) .fight-hud {top:calc(82px + env(safe-area-inset-top));left:calc(22px + env(safe-area-inset-left));right:calc(22px + env(safe-area-inset-right));grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);gap:16px}
body:has(#touch-controls:not([hidden])) .fighter-heading {font-size:10px;letter-spacing:.1px;gap:4px;margin-bottom:9px;min-height:12px}
body:has(#touch-controls:not([hidden])) .fighter-heading>span {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body:has(#touch-controls:not([hidden])) .fighter-heading small {display:none}
body:has(#touch-controls:not([hidden])) .round-pips {gap:4px;flex-shrink:0}
body:has(#touch-controls:not([hidden])) .round-pips b {width:5px;height:5px}
body:has(#touch-controls:not([hidden])) .health-track {height:8px}
body:has(#touch-controls:not([hidden])) .meter-row {margin-top:8px;gap:6px}
body:has(#touch-controls:not([hidden])) .meter-row small {display:none}
body:has(#touch-controls:not([hidden])) .energy-track {width:76%}
body:has(#touch-controls:not([hidden])) .guard-track {width:60%;margin-top:7px}
body:has(#touch-controls:not([hidden])) .guard-track::after {font-size:5px;letter-spacing:0}
body:has(#touch-controls:not([hidden])) .clock {transform:translateY(-6px)}
body:has(#touch-controls:not([hidden])) .clock strong {font-size:38px;letter-spacing:-2px}
body:has(#touch-controls:not([hidden])) .clock small {font-size:7px;letter-spacing:.5px}
body:has(#touch-controls:not([hidden])) .clock>span {font-size:6px;letter-spacing:0}
body:has(#touch-controls:not([hidden])) .super-indicator {top:67px;padding:6px 8px;font-size:7px}
body:has(#touch-controls:not([hidden])) .run-progress {top:67px;padding:6px;font-size:7px}
body:has(#touch-controls:not([hidden])) .network-indicator {top:calc(157px + env(safe-area-inset-top));right:calc(16px + env(safe-area-inset-right));font-size:7px;max-width:45vw}
body:has(#touch-controls:not([hidden])) .combo-display {top:calc(198px + env(safe-area-inset-top));left:calc(14px + env(safe-area-inset-left));max-width:190px;padding:7px 9px;gap:7px}
body:has(#touch-controls:not([hidden])) .combo-display strong {font-size:36px;min-width:26px}
body:has(#touch-controls:not([hidden])) .combo-details {min-width:100px;max-width:125px}
body:has(#touch-controls:not([hidden])) .combo-details>span,
body:has(#touch-controls:not([hidden])) .combo-details b {font-size:8px;letter-spacing:.3px}
body:has(#touch-controls:not([hidden])) .combo-route {font-size:9px;letter-spacing:.3px;margin-top:3px}
body:has(#touch-controls:not([hidden])) .combo-details small {font-size:7px}
body:has(#touch-controls:not([hidden])) .combat-toast {top:calc(178px + env(safe-area-inset-top));font-size:9px;max-width:90vw;white-space:normal;text-align:center;letter-spacing:.3px}
body:has(#touch-controls:not([hidden])) .threat-indicator {top:34%;max-width:90vw;font-size:8px;white-space:normal}
body:has(#touch-controls:not([hidden])) .hazard-warning {bottom:calc(202px + env(safe-area-inset-bottom));max-width:85vw;font-size:8px;white-space:normal}

@media(pointer:coarse),(max-width:650px) {
  .mobile-play-tip {display:block;font-size:11px;line-height:1.65;color:#cbd8e3;margin:0 0 19px;border-left:2px solid #83c9ff66;padding-left:10px}
  .topbar {padding-top:calc(12px + env(safe-area-inset-top));padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right))}
  .utility {width:44px;height:44px}
  .utilities {gap:4px}
  .live-label {display:none}
  .hero {top:calc(82px + env(safe-area-inset-top));bottom:calc(91px + env(safe-area-inset-bottom));scroll-padding-block:14px;padding-bottom:14px}
  .hero .hero-description {margin-bottom:12px}
  .launch-actions {bottom:calc(14px + env(safe-area-inset-bottom));padding-top:16px}
  .launch-actions .primary-button,.launch-actions .secondary-button {min-height:52px}
  .hero select,.opponent-field select,.join-form input {min-height:44px;font-size:16px}
  .hero .setting-field label {font-size:8px;line-height:1.5}
  .hero .opponent-field label {max-width:120px}
  .hero .controls-details summary,.hero .online-panel summary {min-height:44px;font-size:10px}
  .hero .text-button,.join-form button,.room-invite button,.modal button {min-height:44px}
  .settings-content>label {min-height:44px;font-size:12px}
  .settings-content input[type=range] {height:28px;margin-top:4px}
  .check-setting input {width:24px;height:24px;flex:0 0 auto}
  .character-option strong {font-size:8px}
  .character-option:hover {transform:none}
  .preview-orbit button {width:44px;height:44px}
  .menu-footer {display:none}
  .overlay {padding:calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));backdrop-filter:none;background:#06101ae8}
  .modal {max-width:100%;max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:24px}
  .modal .text-button {margin-top:12px}
  .pause-hint {display:none}
}
@media(max-width:650px) {
  .hero {left:calc(16px + env(safe-area-inset-left));width:calc(100% - 28px - env(safe-area-inset-left) - env(safe-area-inset-right));padding-right:4px}
  .launch-actions {left:calc(16px + env(safe-area-inset-left));width:calc(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));grid-template-columns:1fr 92px}
  .hero h1 {font-size:42px;line-height:.95;margin:12px 0}
  .hero h1 br {display:none}
  .hero h1 span {margin-left:.12em}
  .wordmark {font-size:15px}
  .wordmark .brand-icon {display:none}
  .wordmark small {font-size:5px;letter-spacing:1px}
  .hero .arena-options {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .hero .arena-option {min-height:80px}
  .hero .arena-option small {font-size:8px;min-height:12px}
  .hero .arena-option strong {font-size:12px}
  .hero .arena-options .map-art {height:30px}
  .character-heading>span {font-size:7px;letter-spacing:.2px}
  .character-description {font-size:12px}
  .character-moves b {font-size:11px}
  .hero .selection-description {font-size:11px}
  .hero .character-extra {font-size:10px}
  .in-menu .performance-readout {top:64px;right:16px;font-size:8px}
}
@media(max-width:374px) {
  .touch-controls {--touch-key:52px;left:12px;right:12px;gap:12px}
  .touch-movement {grid-template-columns:108px}
  .touch-stick {width:108px;height:108px}
  .touch-actions {grid-template-rows:44px 48px 52px}
  .touch-actions button,.touch-actions .touch-small {font-size:7px}
  .touch-actions [data-control=punch] {font-size:9px}
  .character-option strong {font-size:7px}
  .hero h1 {font-size:38px}
}
@media(orientation:landscape) and (max-height:520px) {
  .topbar {padding-top:calc(8px + env(safe-area-inset-top))}
  .hero {left:calc(18px + env(safe-area-inset-left));top:calc(64px + env(safe-area-inset-top));bottom:calc(80px + env(safe-area-inset-bottom));width:min(360px,47vw);padding-right:8px}
  .hero h1 {font-size:34px;line-height:1;margin:10px 0}
  .hero h1 br {display:none}
  .hero h1 span {margin-left:.12em}
  .hero .hero-description {margin-bottom:9px}
  .mobile-play-tip {font-size:10px;margin-bottom:14px}
  .launch-actions {left:calc(18px + env(safe-area-inset-left));bottom:calc(10px + env(safe-area-inset-bottom));width:calc(min(360px,47vw) - 8px);grid-template-columns:1fr 84px;padding-top:10px}
  .launch-actions .primary-button,.launch-actions .secondary-button {min-height:48px}
  .in-menu .arena-caption {right:calc(20px + env(safe-area-inset-right));bottom:calc(24px + env(safe-area-inset-bottom));width:40vw}
  .preview-orbit {right:calc(20px + env(safe-area-inset-right));bottom:calc(144px + env(safe-area-inset-bottom))}
  .touch-controls {--touch-key:54px;bottom:calc(12px + env(safe-area-inset-bottom))}
  .touch-movement {grid-template-columns:112px 54px;align-items:center;gap:8px}
  .touch-movement-actions {grid-column:2;grid-row:1;grid-template-columns:1fr;gap:8px}
  .touch-stick {grid-column:1;grid-row:1;width:112px;height:112px}
  .touch-actions {grid-template-columns:repeat(4,var(--touch-key));grid-template-rows:52px 52px;grid-template-areas:'block dodge jump super' 'punch kick special special';gap:8px}
  .touch-actions [data-control=block] {grid-area:block}
  .touch-actions [data-control=dodge] {grid-area:dodge}
  .touch-actions [data-control=jump] {grid-area:jump}
  .touch-actions [data-control=super] {grid-area:super;width:100%;font-size:8px;letter-spacing:0}
  .touch-actions [data-control=punch] {grid-area:punch}
  .touch-actions [data-control=kick] {grid-area:kick}
  .touch-actions [data-control=special] {grid-area:special;width:100%}
  body:has(#touch-controls:not([hidden])) .topbar {top:calc(8px + env(safe-area-inset-top));right:auto}
  body:has(#touch-controls:not([hidden])) #sound-button,
  body:has(#touch-controls:not([hidden])) #fullscreen-button {display:none}
  body:has(#touch-controls:not([hidden])) .performance-readout {position:fixed;left:calc(16px + env(safe-area-inset-left));top:calc(60px + env(safe-area-inset-top));min-width:0;font-size:8px}
  .touch-controls .touch-pause {top:calc(8px + env(safe-area-inset-top))}
  body:has(#touch-controls:not([hidden])) .fight-hud {top:calc(20px + env(safe-area-inset-top));left:calc(86px + env(safe-area-inset-left));right:calc(86px + env(safe-area-inset-right));grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr);gap:19px}
  body:has(#touch-controls:not([hidden])) .clock strong {font-size:32px}
  body:has(#touch-controls:not([hidden])) .super-indicator {top:62px;padding:4px 6px;font-size:6px}
  body:has(#touch-controls:not([hidden])) .run-progress {top:62px;padding:4px;font-size:6px}
  body:has(#touch-controls:not([hidden])) .network-indicator {top:calc(83px + env(safe-area-inset-top));right:calc(86px + env(safe-area-inset-right));padding:4px 6px;font-size:6px}
  body:has(#touch-controls:not([hidden])) .combo-display {top:calc(104px + env(safe-area-inset-top));left:calc(15px + env(safe-area-inset-left));padding:5px 7px;max-width:165px}
  body:has(#touch-controls:not([hidden])) .combo-display strong {font-size:30px;min-width:21px}
  body:has(#touch-controls:not([hidden])) .combo-details {min-width:95px;max-width:108px}
  body:has(#touch-controls:not([hidden])) .combo-details small {display:none}
  body:has(#touch-controls:not([hidden])) .combat-toast {top:calc(102px + env(safe-area-inset-top));font-size:8px;max-width:45vw;padding:5px 8px}
  body:has(#touch-controls:not([hidden])) .threat-indicator {top:calc(139px + env(safe-area-inset-top));padding:5px 8px;font-size:7px;max-width:45vw}
  body:has(#touch-controls:not([hidden])) .hazard-warning {bottom:calc(15px + env(safe-area-inset-bottom));max-width:calc(100vw - 450px);font-size:7px;padding:5px 6px;letter-spacing:0}
  body:has(#touch-controls:not([hidden])) .announcement {top:33%;padding:8px 14px;max-width:58vw}
  body:has(#touch-controls:not([hidden])) .announcement strong {font-size:38px}
  .modal {max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:18px 22px}
}

/* One menu task at a time. The arena and HUD retain their own layout. */
.menu-nav {position:absolute;z-index:7;left:4vw;top:100px;width:470px;pointer-events:auto}
.menu-tabs {display:grid;grid-template-columns:1.22fr 1fr 1fr 1fr 1fr;gap:3px;border-bottom:1px solid #c1d5e02e;padding-bottom:9px}
.menu-tabs button {min-width:0;min-height:48px;padding:9px 7px;background:transparent;border:0;border-radius:5px;font-size:13px;font-weight:650;color:#b5c4ce;white-space:nowrap}
.menu-tabs button:hover {background:#bdd4e011;color:#f2f5ec}
.menu-tabs button[aria-selected=true] {background:#83c9ff14;color:var(--accent);box-shadow:inset 0 -2px var(--accent)}
.menu-screen .hero.menu-content {left:4vw;top:177px;bottom:30px;width:484px;padding:0 14px 24px 0;margin:0;scroll-padding-block:18px;scrollbar-gutter:stable}
.menu-screen[data-menu-page=solo] .hero.menu-content {bottom:107px}
.menu-intro .eyebrow {font-size:10px;letter-spacing:1.7px}
.menu-screen .hero h1 {font-size:38px;line-height:1.08;letter-spacing:-1px;margin:15px 0 10px;font-weight:750;text-transform:none}
.menu-screen .hero .hero-description {font-size:14px;line-height:1.6;margin:0 0 25px;color:#afc1cd;max-width:390px}
.menu-page {outline:none}
.menu-page h2 {font-size:24px;font-weight:650;line-height:1.2;letter-spacing:-.4px;margin:0 0 12px}
.menu-page p {overflow-wrap:anywhere}
.menu-page .section-label {font-size:10px;line-height:1.4;letter-spacing:.75px;margin-bottom:14px}
.menu-page .muted-copy,.menu-page .selection-description,.menu-page .character-description {font-size:13px;line-height:1.6;color:#adbdc9;margin:10px 0 16px}
.menu-page .inline-status {font-size:12px;line-height:1.6;color:#bbd5e7;margin:12px 0;min-height:1.5em}
.menu-page .inline-status:empty,.result-reward:empty {display:none}
.selected-fighter-summary {width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:left;background:#10212bdd;border:1px solid #8eafc22f;border-left:3px solid #83c9ff;padding:14px 16px;border-radius:4px}
.selected-fighter-summary small {display:block;font:9px var(--mono);letter-spacing:.6px;color:#9dafba;margin-bottom:6px}
.selected-fighter-summary strong {display:block;font-size:20px;line-height:1.15;color:#f0f3f5;overflow-wrap:anywhere}
.selected-fighter-summary>span:last-child {font-size:12px;color:var(--accent);white-space:nowrap}
.selected-fighter-summary b {font-size:18px;margin-left:6px}
.online-fighter-summary {margin-bottom:20px}
.menu-page #custom-use[aria-pressed=true] {opacity:1;background:#17344b;color:#bcdef7;border:1px solid #bcdef755;cursor:default}
.menu-page #custom-use[aria-pressed=true]>span:last-child {visibility:hidden}
.solo-challenge-note {display:flex;gap:8px;align-items:center;margin:12px 0 22px;font-size:12px;color:#9fb5bf}
.status-dot {display:inline-block;width:6px;height:6px;border-radius:50%;background:#a1cff0}
.menu-page .match-settings {margin-top:0;gap:12px}
.menu-page .setting-field label {font-size:10px;line-height:1.5;letter-spacing:.5px;margin-bottom:7px}
.menu-page .setting-field label b {display:none}
.menu-page select,.menu-page input[type=text] {width:100%;min-height:46px;padding:11px 30px 11px 12px;font-size:14px;line-height:1.25;border:1px solid #819cb83d;border-radius:4px;background-color:#0d1c29;color:#f0f3f5}
.menu-page input[type=text] {padding-right:12px}
.menu-page .difficulty-description {margin-bottom:3px}
.menu-page .mode-description {margin-top:4px;margin-bottom:18px;color:#c7d9e7}
.menu-page .opponent-field {border-top:1px solid #c1d5e020;padding-top:16px;margin:17px 0 18px;gap:12px}
.menu-page .opponent-field label {font-size:10px;max-width:180px}
.menu-page .opponent-field select {width:190px}
.arena-disclosure {border-top:1px solid #c1d5e026;padding-top:4px}
.arena-disclosure>summary {display:flex;justify-content:space-between;align-items:center;list-style:none;cursor:pointer;min-height:52px;font-size:14px;font-weight:650;color:#f0f3f5}
.arena-disclosure>summary::-webkit-details-marker {display:none}
.arena-disclosure>summary span {color:#91a6b5}
.arena-disclosure .arena-picker>.section-label {display:none}
.menu-page .arena-options {gap:8px}
.menu-page .arena-option {min-height:95px;border-radius:4px}
.menu-page .arena-options .map-art {height:43px}
.menu-page .arena-option>span:nth-child(2) {padding:10px}
.menu-page .arena-option small {font-size:8px;line-height:1.5;color:#b8c6cc}
.menu-page .arena-option strong {font-size:13px}
.menu-page .best-run {font-size:10px;line-height:1.7;color:#b9d3e6;margin:16px 0 10px;border:0}
.menu-page .launch-actions {left:4vw;bottom:27px;width:470px;padding-top:19px;grid-template-columns:minmax(0,1fr) 112px;background:linear-gradient(0deg,#080e17 72%,#080e1700);gap:9px}
.menu-page .primary-button,.menu-page .secondary-button {min-height:48px;font-size:12px;letter-spacing:.7px;padding:15px 17px;border-radius:4px}
.menu-page .launch-actions .primary-button,.menu-page .launch-actions .secondary-button {min-height:54px;margin:0}
.menu-page .launch-actions .secondary-button {padding-inline:12px;gap:6px}
.menu-page .launch-actions .secondary-button b {margin-left:0}

.menu-page .menu-link {display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:44px;padding:10px 0;margin:4px 0;background:none;border:0;text-align:left;font-size:12px;line-height:1.5;color:#b7c8d0}
.menu-page .menu-link:hover,.menu-page .inline-link:hover {color:var(--accent)}
.menu-page .inline-link {font-size:inherit;color:var(--accent);background:none;border:0;border-bottom:1px solid #83c9ff55;padding:2px 0;min-height:36px}
.menu-page .ranked-card {padding:21px;border:1px solid #83c9ff40;background:linear-gradient(140deg,#183246b8,#0b1926e0);border-radius:6px}
.division-heading {display:flex;align-items:center;gap:20px;margin:17px 0 23px}
.division-medal {display:grid;place-items:center;flex:0 0 76px;height:83px;background:#83c9ff0c;clip-path:polygon(50% 0,100% 20%,100% 73%,50% 100%,0 73%,0 20%);font:750 39px var(--mono);color:var(--accent);border-top:2px solid #83c9ff}
.division-heading h2 {font-size:25px;margin:0 0 7px}
.division-heading p {font:11px var(--mono);color:#b9cddc;line-height:1.5;margin:0}
.division-track {display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;margin-bottom:13px}
.division-track span {display:grid;place-items:center;min-height:29px;border:1px solid #a7bbc320;color:#889daa;font:11px var(--mono);border-radius:3px}
.division-track .current {border-color:#83c9ff;color:var(--accent);background:#83c9ff14}
.progress-track {height:5px;background:#b5c8d018;overflow:hidden;border-radius:3px}
.progress-track i {display:block;width:0;height:100%;background:#83c9ff;transition:width .25s ease-out}
.menu-page .online-panel {margin-top:21px;padding:0 17px;border-radius:5px;background:#101d29ba}
.menu-page .online-panel summary {min-height:57px;font-size:14px;letter-spacing:0;text-transform:none;color:#e2e8e6}
.menu-page .online-panel summary>span {font:9px var(--mono);color:#97b2bf}
.menu-page .online-panel>p {font-size:13px}
.menu-page .join-form label {font-size:12px;margin-bottom:9px}
.menu-page .join-form button,.menu-page .room-invite button {min-height:46px;font-size:11px;border-radius:4px}
.menu-page .character-picker {margin-bottom:26px}
.menu-page .character-options {gap:6px}
.menu-page .character-option {border-radius:4px;padding-bottom:10px}
.menu-page .character-option strong {font-size:9px;line-height:1.45}
.menu-page .character-option small {font-size:7px;line-height:1.4}
.menu-page .character-heading {margin-top:20px;align-items:flex-start}
.menu-page .character-heading h2 {font-size:25px}
.menu-page .character-heading>span {font-size:8px;line-height:1.5;max-width:160px}
.menu-page .character-moves b {font-size:12px}
.menu-page .character-moves small {font-size:8px;line-height:1.45}
.menu-page .character-extra {font-size:12px;line-height:1.6;margin:10px 0}
.creator-section {padding-top:23px;border-top:1px solid #b8c8d334}
.menu-page .editor-name,.menu-page .account-section>label {display:block;font-size:12px;color:#c4d0d5;line-height:1.5;margin:18px 0 14px}
.menu-page .editor-name input,.menu-page .account-section input {display:block;margin-top:8px}
.custom-fields {display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;margin-bottom:23px}
.custom-fields label {min-width:0;display:block;font-size:12px;line-height:1.5;color:#b8c9d0}
.custom-fields select {margin-top:7px}
.menu-page .creator-preview-button {display:none}
.career-overview {border-left:3px solid #83c9ff;padding:0 0 0 18px;margin-bottom:31px}
.career-overview h2 {font-size:31px;margin:0 0 8px}
.record-heading {display:flex;align-items:center;justify-content:space-between;gap:10px;margin:25px 0 12px;font:10px var(--mono);letter-spacing:.5px;color:#9db4c2}
.record-heading strong {color:#d4e3ee;font-size:11px}
.tier-track {display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.tier-track span {padding:10px;text-align:center;border:1px solid #aebdcc26;color:#849ba9;font:13px var(--mono);border-radius:3px}
.tier-track .reached {background:#83c9ff12;border-color:#83c9ff60;color:var(--accent)}
.daily-section,.cosmetic-section,.account-section,.leaderboard-section,.ads-settings {padding-top:23px;margin-top:24px;border-top:1px solid #b9cbd22b}
.daily-tasks,.leaderboard-rows {list-style:none;margin:0;padding:0}
.daily-tasks li {display:grid;grid-template-columns:1fr auto;gap:7px 16px;padding:16px 0;border-top:1px solid #b8cad31c;font-size:13px;line-height:1.45}
.daily-tasks li:first-child {border-top:0}
.daily-tasks strong {grid-column:2;grid-row:1/3;align-self:center;font:12px var(--mono);color:#c6d7e0}
.daily-tasks small {color:#91a7b5;font-size:11px}
.daily-tasks .done>span,.daily-tasks .done strong {color:var(--accent)}
.career-cosmetics {display:flex;flex-wrap:wrap;gap:8px}
.career-cosmetics button,.compact-button {min-height:44px;padding:10px 13px;background:#142732;border:1px solid #93afbf38;color:#d6e3e6;border-radius:4px;font-size:11px;line-height:1.3}
.career-cosmetics button:not(:disabled):hover,.compact-button:hover {border-color:#83c9ff;color:var(--accent)}
.section-heading {display:flex;align-items:center;justify-content:space-between;gap:12px}
.section-heading h2 {margin:0}
.leaderboard-rows li {display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid #bac9d026;font-size:13px;line-height:1.5}
.leaderboard-rows li span {overflow-wrap:anywhere;min-width:0}
.leaderboard-rows li strong {font:11px var(--mono);white-space:nowrap;color:var(--accent)}
.menu-page .menu-tools {display:block;margin-top:0}
.menu-page .controls-details {border-bottom:1px solid #b5c9d026;padding-bottom:10px}
.menu-page .controls-details summary {min-height:52px;padding:15px 0;font-size:13px;letter-spacing:.7px}
.menu-page .control-list p {font-size:12px;line-height:1.6}
.menu-page .control-list kbd {font-size:10px;min-width:100px}
.menu-page .control-tip,.menu-page .combo-guide span,.menu-page .mobile-play-tip {font-size:12px;line-height:1.7;letter-spacing:0}
.menu-page .combo-guide b {font-size:11px}
.menu-page .settings-content>label {font-size:13px;min-height:48px}
.menu-page .check-setting {display:flex;gap:12px;align-items:center;min-height:48px;font-size:13px}
.menu-page input[type=checkbox] {width:22px;height:22px;accent-color:#83c9ff;flex:0 0 auto}
.menu-page .settings-content input[type=range] {height:30px;accent-color:#83c9ff}
.menu-page .text-button {min-height:44px;font-size:11px}
.result-reward {font-size:13px;line-height:1.5;color:var(--accent);margin:12px 0}
.preview-done {position:absolute;pointer-events:auto;left:50%;transform:translateX(-50%);bottom:calc(24px + env(safe-area-inset-bottom));z-index:8;min-height:48px;padding:12px 20px;border:1px solid #83c9ff77;border-radius:4px;background:#0b1725ed;color:var(--accent);font-size:12px;white-space:nowrap}
.menu-screen.preview-only .hero {display:none}
body.in-menu:has(.preview-only) .vignette {background:linear-gradient(0deg,#080e1799,transparent 40%,transparent 60%,#080e1755)}
.menu-screen.preview-only .preview-orbit {display:flex!important;right:24px;bottom:calc(90px + env(safe-area-inset-bottom))}
.menu-screen.preview-only .arena-caption {display:none}
@media(min-width:1200px) {.in-menu .vignette {background:linear-gradient(90deg,#080e17fa 0,#080e17ed 28%,#080e17ad 41%,#080e1730 56%,transparent 70%),linear-gradient(0deg,#080e17b3,transparent 40%)}}
@media(max-width:1100px) {
  .menu-nav {width:420px;left:3vw}
  .menu-screen .hero.menu-content {left:3vw;width:434px}
  .menu-page .launch-actions {left:3vw;width:420px}
  .menu-tabs button {font-size:12px;padding-inline:5px}
}
@media(max-height:760px) and (min-width:701px) {
  .menu-nav {top:84px}
  .menu-screen .hero.menu-content {top:155px}
  .menu-intro .eyebrow {display:none}
  .menu-screen .hero h1 {font-size:32px;margin-top:0}
  .menu-screen .hero .hero-description {margin-bottom:20px}
}
@media(max-width:700px) {
  .menu-nav {left:calc(16px + env(safe-area-inset-left));top:calc(80px + env(safe-area-inset-top));width:calc(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right))}
  .menu-tabs {gap:2px;padding-bottom:7px;grid-template-columns:1.22fr 1fr 1fr 1fr 1fr}
  .menu-tabs button {font-size:11px;line-height:1.3;white-space:normal;min-height:46px;padding:8px 3px}
  .menu-screen .hero.menu-content {top:calc(150px + env(safe-area-inset-top));left:calc(16px + env(safe-area-inset-left));bottom:calc(18px + env(safe-area-inset-bottom));width:calc(100% - 27px - env(safe-area-inset-left) - env(safe-area-inset-right));padding-right:9px;scrollbar-gutter:auto}
  .menu-screen[data-menu-page=solo] .hero.menu-content {bottom:calc(98px + env(safe-area-inset-bottom))}
  .menu-intro .eyebrow {display:none}
  .menu-screen .hero h1 {font-size:32px;line-height:1.1;margin:0 0 9px;letter-spacing:-.8px}
  .menu-screen .hero .hero-description {font-size:13px;margin-bottom:21px}
  .menu-page .launch-actions {left:calc(16px + env(safe-area-inset-left));bottom:calc(14px + env(safe-area-inset-bottom));width:calc(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));grid-template-columns:1fr 98px;padding-top:13px}
  .menu-page select,.menu-page input[type=text] {font-size:16px;min-height:46px}
  .menu-page .selected-fighter-summary {padding:12px}
  .menu-page .selected-fighter-summary strong {font-size:19px}
  .menu-page .selected-fighter-summary>span:last-child {font-size:11px}
  .menu-page .arena-options .map-art {height:36px}
  .menu-page .creator-preview-button {display:flex}
  .menu-page .ranked-card {padding:17px}
  .menu-page .character-heading {display:block}
  .menu-page .character-heading>span {display:block;text-align:left;max-width:none;margin:8px 0}
  .menu-page .character-option strong {font-size:8px}
  .menu-page .character-option small {font-size:6px}
  .custom-fields {gap:13px 10px}
  .menu-page .opponent-field label {max-width:110px}
  .menu-page .opponent-field select {width:175px}
  .division-heading {gap:15px}
  .division-medal {flex-basis:64px;height:73px;font-size:32px}
  .division-track {gap:3px}
  .division-track span {font-size:10px;min-height:27px}
  .menu-page .control-list {grid-template-columns:1fr}
  .menu-page .control-list kbd {min-width:110px}
  .menu-screen .arena-caption {display:none}
}
@media(orientation:landscape) and (max-height:520px) {
  .menu-nav {left:calc(18px + env(safe-area-inset-left));top:calc(62px + env(safe-area-inset-top));width:min(390px,53vw)}
  .menu-tabs button {font-size:11px;min-height:44px}
  .menu-screen .hero.menu-content {top:calc(125px + env(safe-area-inset-top));left:calc(18px + env(safe-area-inset-left));bottom:18px;width:calc(min(390px,53vw) + 9px);padding-right:9px}
  .menu-screen[data-menu-page=solo] .hero.menu-content {bottom:80px}
  .menu-screen .hero h1 {font-size:28px}
  .menu-screen .hero .hero-description {font-size:12px;margin-bottom:16px}
  .menu-page .launch-actions {left:calc(18px + env(safe-area-inset-left));width:min(390px,53vw);bottom:12px;grid-template-columns:1fr 95px;padding-top:11px}
  .menu-page .launch-actions .primary-button,.menu-page .launch-actions .secondary-button {min-height:48px;font-size:11px}
  .menu-page .creator-preview-button {display:flex}
  .menu-screen .arena-caption {display:none}
}

/* Ocean and sand controls, shared by menus and match overlays. */
.primary-button {background:var(--sand);color:#16232f;border:1px solid #f6e4c6;border-radius:8px;box-shadow:inset 0 1px #ffffff45;transition:background .16s,border-color .16s,box-shadow .16s}
.primary-button:hover {background:#f8e5c4;transform:none;border-color:#fff2dd;box-shadow:inset 0 1px #ffffff70,0 3px 12px #0002}
.primary-button:active {background:#dec394;transform:none;box-shadow:inset 0 1px 3px #17283c25}
.secondary-button {color:#dce8f0;border-color:#88abc14d;border-radius:8px;background:#13283ce6;transition:background .16s,border-color .16s}
.secondary-button:hover {background:#1c3c56;border-color:#83c9ffad;color:#f0f3f5}
.utility,.camera-button,.preview-orbit button {border-radius:8px;border-color:#96b9d34d;background:#102337dc;min-height:44px}
.utility,.preview-orbit button {min-width:44px}
.modal button,.text-button {min-height:44px}
.utility:hover,.camera-button:hover,.preview-orbit button:hover {background:#204059;border-color:#83c9ffcc;color:#d7edff}
.in-menu .utility {width:44px;height:44px}
.in-menu .preview-orbit button {width:44px;height:44px}
.menu-tabs button {border:1px solid transparent;border-radius:8px;font-weight:650;transition:background .15s,border-color .15s,color .15s}
.menu-tabs button[aria-selected=true] {background:#183c57;border-color:#83c9ff66;color:#d5ecfc;box-shadow:none}
.menu-tabs button:not([aria-selected=true]):hover {background:#173044;border-color:#84b6d52e}
.menu-page .primary-button,.menu-page .secondary-button,.menu-page .selected-fighter-summary,.menu-page .arena-option,.menu-page .character-option,.menu-page .online-panel,.menu-page .ranked-card,.menu-page select,.menu-page input[type=text],.career-cosmetics button,.compact-button,.preview-done {border-radius:8px}
.menu-page select,.menu-page input[type=text] {background-color:#101f2e;border-color:#83aec348;color:#f0f3f5}
.menu-page select:hover,.menu-page input[type=text]:hover {border-color:#83c9ff90}
.menu-page .selected-fighter-summary {background:#12283bdd;border-color:#719ab54f;border-left-color:#83c9ff}
.menu-page .selected-fighter-summary:hover {background:#19364acc;border-color:#83c9ff99}
.menu-page .ranked-card {background:linear-gradient(145deg,#163348e8,#101c29f5);border-color:#8ab9d650}
.menu-page .character-option.selected,.menu-page .arena-option.selected,.menu-page .arena-option[aria-pressed=true] {background:#18364c;border-color:#83c9ffab;box-shadow:none}
.menu-page .character-option.selected:before {display:none}
.menu-page .character-option:hover {transform:none;background:#1c3447}
.menu-page .selected-fighter-summary strong,.menu-page .character-option.selected strong,.menu-page .arena-option.selected strong {color:#f0f3f5}
.menu-page .division-medal {background:#83c9ff0d;color:#b6def9;border-top-color:#83c9ff}
.menu-page .division-track .current,.menu-page .tier-track .reached {background:#173b55;border-color:#83c9ff88;color:#d9edfc}
.menu-page .progress-track i {background:linear-gradient(90deg,#3d83b4,#a2d5f5)}
.combo-display {border-left-color:var(--sand)}
.combo-display strong,.combo-details b,.result-reward {color:var(--sand)}
.combo-window i {background:#83c9ff}
.combo-open .combo-window i {background:var(--sand);box-shadow:0 0 8px #f0d8ad44}
.super-indicator.ready {color:var(--sand);border-color:#f0d8ad88;box-shadow:inset 3px 0 var(--sand);background:#342a1de0}
.touch-controls button {border-radius:8px}
.touch-controls button.active {background:#235378f0;border-color:#a9d9fa;box-shadow:0 0 0 2px #83c9ff25}
.touch-actions [data-control=dodge] {background:#193b54e6;border-color:#83c9ff99}
.touch-actions .touch-special {background:#183a55ed;color:#cee8fb;border-color:#83c9ff90}
.touch-actions .touch-super {color:#f0d8ad;border-color:#f0d8ad77;background:#3b3022ed}
.preview-done {background:#112a40f2;color:#c6e4fa;border-color:#83c9ff8c}