@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Barlow:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#101214;--panel:#191c1e;--muted:#8e969a;--line:#303638;--orange:#ff7142;--mint:#88d4c1;--white:#f5f2e9}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--white);font:15px 'Barlow',Arial,sans-serif}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer;color:inherit;background:#24292b;border:1px solid #3d4548;padding:12px 16px;border-radius:3px;font-weight:600;transition:background .15s,transform .15s}button:hover{background:#343d40}button:active{transform:translateY(1px)}button:disabled{opacity:.38;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--orange);outline-offset:4px}button.primary{background:var(--orange);color:#171a1c;border-color:var(--orange)}button.primary:hover{background:#ff916c}.full{width:100%;display:flex;justify-content:space-between}.quiet{background:transparent;border-color:#363c3f;font-size:12px}.topbar{height:93px;display:flex;align-items:center;justify-content:space-between;margin:0 3.5%;border-bottom:1px solid var(--line)}.brand{color:inherit;text-decoration:none;display:flex;align-items:center;gap:12px;font:700 16px/.94 'Barlow Condensed',Arial,sans-serif;letter-spacing:1px}.brand b{font-size:22px}.brand-icon{position:relative;background:var(--orange);color:#171a1c;font:900 40px/.9 'Barlow Condensed';height:48px;width:45px;display:grid;place-content:center;transform:skew(-7deg)}.brand-icon span{font-size:20px;position:absolute;right:1px;bottom:0}.top-right{display:flex;align-items:center;gap:12px}.edition{font-size:10px;letter-spacing:2px;color:var(--muted);margin-right:22px}main{margin:26px 3.5% 0;display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:18px}.game-shell{position:relative;min-height:650px;overflow:hidden;background:#18201f;border:1px solid var(--line)}#arena{position:absolute;inset:0;width:100%;height:100%;display:block}.arena-tag{position:absolute;left:25px;top:23px;display:flex;gap:10px;align-items:center;font-size:9px;letter-spacing:1.4px;color:#d8e1dc}.live-dot{width:6px;height:6px;background:var(--mint);display:inline-block;border-radius:50%;box-shadow:0 0 9px #88d4c155}.divider{color:#7d8f88}.arena-footer{position:absolute;bottom:20px;left:25px;right:25px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.5px;color:#b2c0b8}.welcome{position:relative;z-index:2;margin:110px 34px 70px;max-width:720px;text-shadow:0 2px 25px #0008}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:600;color:var(--orange);margin:0 0 18px}h1{font:900 clamp(48px,5.2vw,85px)/.91 'Barlow Condensed','Arial Narrow',sans-serif;letter-spacing:-1px;margin:0 0 24px}h1 em{color:var(--orange);font-style:normal}.intro-copy{font-size:14px;line-height:1.6;color:#d0d7d3;max-width:390px;margin-bottom:27px}.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.mode-card{text-align:left;background:#131918ed;backdrop-filter:blur(10px);padding:17px 15px;border-color:#5d6961;min-height:126px;text-shadow:none}.mode-card>span{color:#9aa9a1;font-size:8px;letter-spacing:1.6px}.mode-card b{display:block;font:600 21px 'Barlow Condensed';margin:12px 0 8px;white-space:nowrap}.mode-card b i{float:right;font-style:normal}.mode-card small{font-size:10px;line-height:1.5;color:#a3b0a9}.mode-card.accent{background:#ff7142;border-color:var(--orange);color:#181d1a}.mode-card.accent span,.mode-card.accent small{color:#3b352c}.mode-card.accent:hover{background:#ff916c}.join-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px;font-size:11px}.join-row label{color:#c3cec6}.join-row input{width:122px;letter-spacing:2px;padding:9px;background:#101714cc;border:1px solid #53635a;border-radius:2px;font-size:10px;text-transform:uppercase}.join-row button{padding:9px 13px;background:#1b2922d9;font-size:11px}.corner-panel{padding:23px;background:var(--panel);border:1px solid var(--line)}.panel-title{display:flex;justify-content:space-between}.panel-title .eyebrow{color:var(--muted);font-size:9px}.number{font:500 12px 'Barlow Condensed';color:#6f777b}h2{font:700 34px/.98 'Barlow Condensed';margin:0 0 20px}.camera-preview{aspect-ratio:4/3;position:relative;background:#101416;border:1px solid #394340;overflow:hidden}.camera-preview video,.camera-preview canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:scaleX(-1)}#camera-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse,#24322b,#111815);gap:7px}.camera-icon{font-size:38px;color:#8aaf9b;margin-bottom:8px}#camera-empty b{font-size:8px;letter-spacing:1.4px}#camera-empty small{font-size:9px;color:var(--muted)}#camera-tag{position:absolute;top:8px;left:8px;font-size:8px;letter-spacing:1px;padding:5px 7px;background:#101411bd;color:#a6baad}#camera-status{color:#9fa8aa;font-size:11px;line-height:1.6;min-height:53px;margin:12px 0}.camera-tools{display:flex;gap:8px;margin:8px 0 19px}.camera-tools button{font-size:10px;padding:8px;flex:1}.settings{border-top:1px solid var(--line)}.settings label{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);font-size:11px;gap:10px}.settings small{display:block;color:var(--muted);font-size:9px;margin-top:4px}input[type=checkbox]{accent-color:var(--orange);width:28px;height:16px}.settings select,.settings input:not([type=checkbox]){font-size:10px;max-width:113px;padding:6px;border:1px solid #384144;background:#202628;color:#d5ddda;border-radius:2px}.tip{display:flex;gap:10px;margin-top:18px}.tip>span{color:var(--orange);font-size:20px}.tip p{font-size:10px;line-height:1.5;color:#8e9a9c;margin:0}.tip b{color:#c1cbcc;display:block;font-weight:500}.coming-soon{font-size:9px;color:#889294;margin:18px 0 0}.coming-soon span{color:var(--orange);letter-spacing:1px;font-size:8px;display:block;margin-bottom:5px}.controls-panel{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:22px 25px;background:#181c1d;border:1px solid var(--line)}.controls-panel .eyebrow{font-size:8px;margin:0 0 5px;color:var(--muted)}h3{font:600 22px 'Barlow Condensed';margin:0}.control{display:flex;align-items:center;gap:8px;font-size:10px;color:#b0babb}kbd{font:500 10px 'Barlow';display:inline-block;border:1px solid #4b5659;border-bottom:3px solid #4b5659;min-width:29px;padding:7px;text-align:center;border-radius:3px;color:#e8e9df}.page-footer{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:#7d8789;padding:23px 3.5%}.page-footer>span:first-child{color:#a2aeaf;font-weight:600}.hud{position:absolute;top:65px;left:25px;right:25px;display:grid;grid-template-columns:1fr 100px 1fr;gap:25px;pointer-events:none}.fighter-heading{display:flex;justify-content:space-between;gap:8px;font:600 16px 'Barlow Condensed'}.fighter-heading small{color:#b0beb7;font-size:8px;align-self:center}.health-track{height:8px;background:#29322dbb;margin-top:9px}.health-track i{height:100%;background:var(--mint);display:block;transition:width .1s}.opponent .health-track i{background:var(--orange)}.stamina-track{height:3px;background:#2c332eaa;margin-top:4px;margin-bottom:6px}.stamina-track i{height:100%;background:#cfc58c;display:block}.fighter-card>small{font-size:8px;letter-spacing:1px;color:#b3c0b8}.opponent>small{display:block;text-align:right}.clock{text-align:center}.clock>small{font-size:8px;letter-spacing:1.5px}.clock strong{display:block;font:700 39px/.95 'Barlow Condensed';margin:6px}.clock>span{font-size:8px;letter-spacing:1px;color:var(--orange)}.fight-event{position:absolute;top:34%;left:10%;right:10%;text-align:center;pointer-events:none;font:800 47px 'Barlow Condensed';text-shadow:0 4px 20px #000;color:var(--white)}.room-panel{position:absolute;z-index:4;width:min(460px,90%);top:50%;left:50%;transform:translate(-50%,-50%);background:#131c19f5;border:1px solid #6a7a70;backdrop-filter:blur(14px);padding:35px;box-shadow:0 20px 90px #0008;text-align:center}.room-panel h2{font-size:38px;margin-bottom:12px}.room-panel p:not(.eyebrow){font-size:13px;color:#adbbb3;line-height:1.5}.room-panel>strong{display:block;font:700 40px 'Barlow Condensed';letter-spacing:9px;margin:20px 0}.room-actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}.room-panel>small{display:block;color:#91a699;font-size:10px;margin-top:17px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);z-index:30;background:#e3eee6;color:#1a3023;padding:15px 22px;border-radius:3px;font-size:13px;box-shadow:0 10px 40px #0008;max-width:90vw}#render-error{position:absolute;inset:0;display:grid;place-content:center;padding:35px;z-index:10;background:#161d1c;color:#ffd5bf;font-size:16px;line-height:1.7}.touch-controls{display:none}[hidden]{display:none!important}
@media(min-width:1600px){main{grid-template-columns:minmax(0,1fr) 330px}.game-shell{min-height:780px}.welcome{margin-top:160px;max-width:780px}.mode-card b{font-size:24px}.corner-panel{padding:28px}}
@media(max-width:1100px){main{grid-template-columns:minmax(0,1fr) 260px;margin-left:20px;margin-right:20px}.game-shell{min-height:690px}.welcome{margin:130px 22px 65px}.mode-grid{grid-template-columns:1fr}.mode-card{min-height:0;padding:11px 14px}.mode-card b{margin:4px 0;font-size:20px}.mode-card small{display:none}.intro-copy{font-size:12px}.controls-panel{flex-wrap:wrap;justify-content:flex-start;gap:17px}.controls-panel>div:first-child{width:100%}.corner-panel{padding:18px}h1{font-size:59px}.edition{display:none}}
@media(max-width:760px){.topbar{height:76px;margin:0 16px}.brand{font-size:12px}.brand b{font-size:18px}.brand-icon{height:39px;width:36px;font-size:32px}.top-right{gap:6px}.quiet{padding:9px;font-size:10px}main{margin:14px 12px 0;display:flex;flex-direction:column;gap:12px}.game-shell{min-height:680px}.welcome{margin:100px 23px 65px}.welcome h1{font-size:64px}.intro-copy{max-width:320px;font-size:13px}.mode-card{padding:13px 15px}.mode-card small{display:block;font-size:10px}.corner-panel{display:grid;grid-template-columns:1fr 1fr;gap:0 17px;padding:20px}.corner-panel .panel-title,.corner-panel>h2,.corner-panel .settings,.corner-panel .tip,.corner-panel .coming-soon{grid-column:1/-1}.corner-panel>h2{font-size:32px}.camera-preview{grid-column:1;grid-row:3/6}.corner-panel>#camera-status{grid-column:2;grid-row:3;margin:0;min-height:0}.corner-panel>.full{grid-column:2;grid-row:4;font-size:11px;padding:11px}.camera-tools{grid-column:2;grid-row:5;margin-bottom:0}.settings{margin-top:20px}.settings label{padding:11px 0}.settings select,.settings input:not([type=checkbox]){max-width:145px}.tip{max-width:420px}.controls-panel{padding:18px;gap:12px}.control{font-size:9px}.controls-panel>div:first-child{width:100%;margin-bottom:5px}.page-footer{padding:20px 15px;gap:20px;font-size:8px;line-height:1.5}.page-footer>span:last-child{max-width:185px;text-align:right}.hud{left:13px;right:13px;gap:12px;grid-template-columns:1fr 70px 1fr;top:60px}.fighter-heading{font-size:14px}.fighter-heading small{display:none}.clock strong{font-size:32px}.clock>small{font-size:7px}.arena-tag{left:15px;font-size:7px;gap:7px}.arena-footer{left:15px;right:15px;font-size:7px}.fight-event{font-size:39px;top:32%}.touch-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.touch-controls button{min-height:45px;font-size:12px}.room-panel{padding:25px}.room-panel h2{font-size:32px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(max-width:760px){.game-shell>.touch-controls{position:absolute;z-index:3;left:14px;right:14px;bottom:43px;grid-template-columns:repeat(3,1fr);gap:6px}.game-shell>.touch-controls button{background:#14221ee8;border-color:#586c61;backdrop-filter:blur(8px)}}
.resume-overlay{position:absolute;z-index:5;top:47%;left:50%;transform:translateX(-50%)}.resume-overlay:active{transform:translateX(-50%)}
.view-tools{position:absolute;z-index:6;right:20px;top:13px}.view-tools button{padding:8px 10px;background:#101915b8;font-size:10px}.motion-feedback{position:absolute;z-index:3;top:25%;left:50%;transform:translateX(-50%);padding:8px 14px;background:#18291fe8;border:1px solid #9fbe98;color:#c6ff9b;font:600 20px 'Barlow Condensed';letter-spacing:1px;pointer-events:none;max-width:85%;text-align:center}#calibration-status{font-size:10px;color:#d5b184;line-height:1.5;padding:10px 0;margin:0;border-bottom:1px solid var(--line)}#expand-preview{position:absolute;right:7px;bottom:7px;z-index:3;background:#13221dd9;font-size:9px;padding:6px}.call-panel{position:absolute;z-index:5;right:22px;bottom:49px;width:220px;padding:9px;background:#101a16ec;border:1px solid #586e60;backdrop-filter:blur(12px);box-shadow:0 8px 30px #0004}.call-title{display:flex;justify-content:space-between;align-items:center;font-size:8px;letter-spacing:1.5px;margin-bottom:7px}.call-title button{padding:3px 7px;font-size:9px;background:transparent}.remote-video-wrap{height:124px;position:relative;background:#0b120f;overflow:hidden}.remote-video-wrap video{width:100%;height:100%;object-fit:cover}.remote-video-wrap #shared-self{position:absolute;right:4px;bottom:20px;width:45px;height:48px;border:1px solid #adbea7;transform:scaleX(-1)}#opponent-placeholder{position:absolute;inset:0;display:grid;place-content:center;color:#84998c;font-size:11px;pointer-events:none}#remote-media-status{position:absolute;bottom:5px;left:7px;font-size:8px;padding:2px 4px;background:#0b120fd9;color:#c1d5c4}.call-buttons{display:flex;gap:5px;margin-top:7px}.call-buttons button{font-size:10px;padding:8px 6px;flex:1;min-height:35px}.call-buttons button[aria-pressed=true]{background:#b2e28c;color:#142117;border-color:#b2e28c}.call-panel p{font-size:9px;line-height:1.5;color:#b4c4b8;margin:7px 0 4px}.call-panel>small{font-size:8px;color:#879b8c;display:block}.call-panel>#play-call{font-size:9px;width:100%;padding:6px;margin-bottom:5px}.call-panel.collapsed .remote-video-wrap,.call-panel.collapsed p,.call-panel.collapsed>small{display:none}.game-shell:fullscreen,.game-shell.theater-view{width:100vw!important;height:100dvh!important;min-height:0!important;border:0!important;background:#101b28}.theater-view{position:fixed!important;inset:0!important;margin:0!important;z-index:1000!important}.expanded-view{overflow:hidden}.camera-preview:fullscreen,.camera-preview.theater-view{width:100vw!important;height:100dvh!important;aspect-ratio:auto!important;background:#090e0c}.camera-preview:fullscreen #expand-preview,.camera-preview.theater-view #expand-preview{font-size:14px;padding:12px;bottom:20px;right:20px}.camera-preview:fullscreen #camera-tag,.camera-preview.theater-view #camera-tag{font-size:12px;padding:10px}.camera-preview:fullscreen video,.camera-preview:fullscreen canvas,.camera-preview.theater-view video,.camera-preview.theater-view canvas{object-fit:contain}.game-shell:fullscreen .welcome,.game-shell.theater-view .welcome{margin-top:17vh}.game-shell:fullscreen .call-panel,.game-shell.theater-view .call-panel{bottom:40px}
@media(max-width:760px){.view-tools{top:12px;right:12px}.view-tools button{font-size:9px;padding:7px}.arena-tag{right:112px;white-space:nowrap;overflow:hidden}.arena-tag .divider,.arena-tag>span:last-child{display:none}.call-panel{width:148px;right:12px;top:151px;bottom:auto;padding:7px}.remote-video-wrap{height:83px}.call-title{font-size:7px}.call-buttons button{font-size:9px;padding:8px 4px;min-height:37px}.call-panel>small{font-size:7px}.call-panel p{font-size:8px}.motion-feedback{top:20%;font-size:17px}.game-shell:fullscreen .call-panel,.game-shell.theater-view .call-panel{bottom:auto;top:150px}.settings select{max-width:160px}}