:root{--ink:#eef5ff;--muted:#9fb0cb;--navy:#071126;--panel:#0e1c39;--line:#253a62;--cyan:#43e6d4;--gold:#ffc857;--red:#ff4d6d;--blue:#4299ff}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% -20%,#173e72 0,#08152e 38%,#050b18 75%);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}body{min-height:100vh;overflow-x:hidden}.shell{max-width:1500px;margin:auto;min-height:calc(100vh - 42px);padding:18px 24px}.topbar{height:58px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff18}.brand{display:flex;align-items:center;gap:11px;font-weight:900;letter-spacing:.04em}.brand-mark{display:grid;place-items:center;width:36px;height:36px;background:linear-gradient(135deg,var(--cyan),#238cff);color:#061027;border-radius:9px;box-shadow:0 0 26px #43e6d455}.top-actions{display:flex;gap:8px}.icon-btn,.back-btn,.secondary-btn,.exit-btn{border:1px solid var(--line);background:#101f3d;color:var(--ink);border-radius:10px;padding:10px 14px;cursor:pointer}.screen{display:none}.screen.active{display:block}.menu-screen.active{display:grid;grid-template-columns:minmax(340px,.82fr) minmax(420px,1.18fr);gap:34px;align-items:center;min-height:calc(100vh - 142px)}.eyebrow{color:var(--cyan);font-size:.78rem;font-weight:900;letter-spacing:.18em}.menu-copy h1{font-size:clamp(2.6rem,5vw,5.6rem);line-height:.9;letter-spacing:-.055em;margin:14px 0 20px;max-width:760px}.menu-copy>p{font-size:1.08rem;line-height:1.65;color:var(--muted);max-width:620px}.mode-grid{display:grid;gap:11px;margin-top:28px}.mode-card{display:flex;flex-direction:column;text-align:left;gap:5px;padding:17px 19px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(135deg,#112443,#0c1932);color:var(--ink);cursor:pointer;transition:.2s}.mode-card:hover{transform:translateY(-2px);border-color:var(--cyan);box-shadow:0 10px 35px #0006}.mode-card.primary{border-color:#43e6d477;background:linear-gradient(135deg,#123c52,#0d2340)}.mode-card strong{font-size:1.03rem}.mode-card span{color:var(--muted);font-size:.9rem}.roster-showcase{aspect-ratio:3/2;background:url('assets/roster.png') center/contain no-repeat;filter:drop-shadow(0 25px 40px #0008)}.section-heading{display:flex;align-items:center;gap:24px;margin:28px 0 20px}.section-heading h2{font-size:clamp(1.8rem,4vw,3rem);margin:5px 0}.fighter-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.fighter-card{position:relative;aspect-ratio:1/1.1;border:1px solid var(--line);border-radius:15px;overflow:hidden;background:#0b1831;cursor:pointer;transition:.18s}.fighter-card:hover,.fighter-card.selected-p1,.fighter-card.selected-p2{transform:translateY(-4px);border-color:var(--cyan);box-shadow:0 12px 30px #0006}.fighter-card.selected-p1:after,.fighter-card.selected-p2:after{content:attr(data-badge);position:absolute;inset:8px 8px auto auto;background:var(--cyan);color:#061027;font-weight:900;padding:5px 8px;border-radius:7px}.fighter-card.selected-p2{border-color:var(--gold)}.fighter-card.selected-p2:after{background:var(--gold)}.fighter-portrait{height:76%;background-image:url('assets/roster.png');background-repeat:no-repeat;background-size:500% 200%}.fighter-card strong{display:block;padding:9px 10px 0;font-size:.86rem}.fighter-card small{padding:0 10px;color:var(--muted)}.selection-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;padding:15px 0}.cta{border:0;border-radius:10px;padding:13px 20px;background:linear-gradient(135deg,var(--cyan),#3ba3ff);color:#051025;font-weight:900;cursor:pointer}.cta:disabled{opacity:.4;cursor:not-allowed}.online-screen{max-width:780px;margin:auto}.room-panel{background:linear-gradient(145deg,#12274b,#0a162d);border:1px solid var(--line);border-radius:18px;padding:28px}.room-panel p{color:var(--muted)}.room-panel label{display:grid;gap:8px;margin:24px 0;color:var(--muted)}.room-panel input{font:800 1.5rem monospace;text-transform:uppercase;letter-spacing:.18em;padding:15px;border-radius:10px;border:1px solid var(--line);background:#071126;color:white}.room-actions{display:flex;gap:10px}.room-status{margin-top:20px;padding:14px;border-radius:10px;background:#061027;color:var(--muted)}.game-screen{padding-top:15px}.hud{display:grid;grid-template-columns:1fr 150px 1fr;align-items:center;gap:18px;margin-bottom:8px}.candidate{font-weight:900;text-transform:uppercase}.candidate-two{text-align:right}.meter{height:18px;border:2px solid #d9e7ff;background:#060b17;margin-top:7px;overflow:hidden;clip-path:polygon(0 0,100% 0,96% 100%,0 100%)}.candidate-two .meter{clip-path:polygon(4% 0,100% 0,100% 100%,0 100%)}.meter i{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--cyan),#43a2ff);transition:width .2s}.candidate-two .meter i{margin-left:auto;background:linear-gradient(90deg,var(--gold),var(--red))}.round{text-align:center}.round strong{display:block;font-size:2rem}.round span{font-size:.68rem;color:var(--muted);letter-spacing:.1em}.arena-wrap{position:relative;border:2px solid #4e6b9d;border-radius:13px;overflow:hidden;box-shadow:0 22px 65px #0009,0 0 35px #238cff20;background:#081126}.arena-wrap canvas{display:block;width:100%;aspect-ratio:16/9;image-rendering:pixelated}.announcement{position:absolute;inset:38% 0 auto;text-align:center;font-weight:1000;font-size:clamp(2rem,8vw,6rem);color:white;text-shadow:0 5px 0 #101936,0 0 26px #43e6d4;pointer-events:none}.desktop-help{display:flex;justify-content:space-between;color:var(--muted);font-size:.76rem;padding:8px}.touch-controls{display:none;justify-content:space-between;margin-top:8px}.touch-controls button{width:58px;height:48px;border:1px solid #ffffff33;border-radius:11px;background:#102a50;color:white;font-weight:900}.exit-btn{display:block;margin:8px auto}footer{text-align:center;color:#71829e;font-size:.78rem;padding:10px 20px 18px}@media(max-width:850px){.shell{padding:10px}.menu-screen.active{grid-template-columns:1fr;align-content:start;padding-top:35px}.roster-showcase{order:-1}.menu-copy h1{font-size:3.15rem}.fighter-grid{grid-template-columns:repeat(2,1fr)}.hud{grid-template-columns:1fr 70px 1fr;gap:7px}.desktop-help{display:none}.touch-controls{display:flex}.topbar{height:50px}.game-screen{padding-top:8px}}@media(max-height:650px) and (orientation:landscape){.topbar,footer,.desktop-help{display:none}.shell{padding:4px}.game-screen{padding:0}.hud{margin:0}.touch-controls{position:absolute;inset:auto 12px 10px;z-index:3;opacity:.72}.exit-btn{position:absolute;right:8px;top:8px;z-index:5}.arena-wrap{max-height:calc(100vh - 50px);width:min(100%,calc((100vh - 50px)*1.777));margin:auto}}