:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--bg:#11161d;--panel:#1a212a;--line:#303b45;--ink:#f5efdf;--muted:#9eaaaE;--amber:#efb17d;--green:#acccba;color:var(--ink);background:var(--bg);color-scheme:dark}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible,a:focus-visible{outline:2px solid var(--amber);outline-offset:4px}a{text-decoration:none;color:inherit}[hidden]{display:none!important}header,main,footer{max-width:1240px;margin:auto}header{height:96px;padding:0 42px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:6px;font-size:19px;font-weight:800;letter-spacing:1.4px}.brand>span:last-child{font-weight:350}.sun-icon{width:28px;height:28px;background:linear-gradient(to bottom,var(--amber) 0 66%,transparent 66% 74%,var(--amber) 74% 80%,transparent 80% 87%,var(--amber) 87%);border-radius:50%;margin-right:6px}nav{display:flex;align-items:center;gap:30px}nav button,.quiet{border:0;background:none;color:#b7c0bf;font-size:11px;padding:9px 12px;border-radius:6px}nav button:hover,.quiet:hover{background:#26313a}.status{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:7px}.status i,.seat i{width:6px;height:6px;border-radius:50%;background:var(--green)}main{padding:55px 42px 45px}.welcome{display:grid;grid-template-columns:1fr 420px;gap:65px;align-items:center;margin-bottom:48px}.eyebrow{font-size:9px;letter-spacing:2.2px;color:var(--amber);font-weight:600}.intro h1{font-size:84px;line-height:1.03;letter-spacing:-4px;margin:23px 0}.intro h1 em{font-family:Georgia,serif;font-weight:400;color:var(--amber)}.intro p{font-size:14px;line-height:1.9;color:var(--muted)}.hero-tags{display:flex;gap:23px;font-size:8px;letter-spacing:1.3px;margin-top:26px;color:#c6caba}.hero-tags span:before{content:'✦';color:var(--amber);margin-right:8px}.setup-card{background:var(--panel);border:1px solid var(--line);padding:27px;border-radius:15px}.setup-card h2{font-size:24px;letter-spacing:-.7px;line-height:1.3;margin:17px 0 23px;max-width:280px}label{display:block;font-size:11px;margin:0 0 8px;color:#bdc5c4}input{width:100%;background:#121a22;border:1px solid #3c4b54;border-radius:7px;color:var(--ink);padding:12px;font-size:12px;outline:none}input:focus{border-color:var(--amber)}.fighter-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:15px 0 19px}.fighter-picker button{border:1px solid #39434c;background:#161d25;padding:10px 7px 11px;border-radius:9px;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:3px;transition:background .15s}.fighter-picker button.selected{background:#343229;border-color:#a88764}.fighter-picker strong{font-size:10px;font-weight:600}.fighter-picker small{font-size:8px;color:var(--muted)}.fighter-icon{font-size:27px;line-height:1.4}.raven{color:var(--green)}.onyx{color:#d8b27e}.ember{color:#df8e77}.primary,.secondary{display:flex;align-items:center;justify-content:space-between;width:100%;padding:13px 15px;border:1px solid transparent;border-radius:7px;font-size:11px;font-weight:650}.primary{background:var(--amber);color:#292217}.primary:hover{background:#f5c190}.secondary{background:#242d36;border-color:#38434c;color:#d2d9d4;margin-top:9px}.secondary:hover{background:#2c3842}.hint{font-size:9px;line-height:1.7;color:var(--muted);margin:14px 0 0}.arena-caption{display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:1.5px;color:var(--muted);padding:0 1px 12px}.arena-caption>div{display:flex;align-items:center;gap:10px}.arena-caption .quiet{font-size:10px;padding:5px 6px}.arena-shell{position:relative;overflow:hidden;border-radius:13px;border:1px solid #5d626755;box-shadow:0 15px 70px #0003;background:#11151e}.arena-shell canvas{display:block;width:100%;height:auto;aspect-ratio:16/9}.arena-cover{position:absolute;left:0;right:0;top:19%;text-align:center;pointer-events:none}.arena-cover>span{letter-spacing:5px;font-size:9px;color:#fff2d8aa}.arena-cover>p{font-family:Georgia,serif;font-style:italic;font-size:26px;letter-spacing:-.5px;margin-top:13px;text-shadow:0 2px 10px #202431}.controls{display:flex;gap:60px;border-top:1px solid var(--line);padding-top:28px;margin-top:35px}.controls .eyebrow{font-size:8px;color:var(--muted)}.controls h3{font-size:18px;line-height:1.5;letter-spacing:-.5px;font-weight:500;margin:13px 0;min-width:160px}.keys{display:flex;align-content:flex-start;flex-wrap:wrap;gap:16px 24px;padding-top:8px;font-size:10px;color:#b6c1bf}.keys span{display:flex;align-items:center;gap:6px}kbd{display:inline-grid;place-items:center;min-width:25px;height:26px;padding:0 7px;font-family:inherit;font-size:9px;border:1px solid #485660;background:#202c36;color:#e4e6d8;border-radius:5px;box-shadow:0 3px 0 #090f15}.keys small{width:100%;line-height:1.7;font-size:9px;color:var(--muted)}footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:25px 42px;color:#c5ccca;font-size:10px;letter-spacing:1px}footer small{margin-left:15px;font-size:7px;letter-spacing:1px;color:var(--muted)}footer a{font-size:9px;color:var(--muted);letter-spacing:0}.lobby{display:grid;grid-template-columns:1fr auto;gap:22px;margin-bottom:30px}.lobby h2{font-size:34px;font-weight:600;letter-spacing:-1px;margin:12px 0 7px}.lobby p{font-size:12px;color:var(--muted);line-height:1.7;margin:0}.lobby-actions{display:flex;align-items:center;gap:12px}.lobby-actions .primary,.lobby-actions .secondary{width:auto;white-space:nowrap;margin:0}.seats{grid-column:1/-1;display:flex;gap:24px;align-items:center}.seat{flex:1;display:flex;align-items:center;gap:16px;padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:10px}.seat-badge{font-size:24px;font-weight:300;letter-spacing:-1px;color:var(--amber)}.seat>span:nth-child(2){flex:1}.seat strong{display:block;font-size:13px}.seat small{display:block;font-size:9px;color:var(--muted);margin-top:5px}.seat i{background:#62696d}.seat.is-ready{border-color:#668977}.seat.is-ready i{background:var(--green)}.versus{font-family:Georgia,serif;font-style:italic;color:var(--muted);font-size:17px}.ready-row{grid-column:1/-1;display:flex;gap:15px;align-items:center}.ready-row>span{margin-right:auto;font-size:11px;color:var(--muted)}.ready-row .primary{width:160px}.ready-row .quiet{font-size:9px}.hud{display:flex;position:absolute;left:4%;right:4%;top:5%;align-items:flex-start;gap:20px;z-index:2}.health{flex:1}.health>div:first-child{display:flex;justify-content:space-between;gap:10px;color:#ffecd4;margin-bottom:9px;font-size:10px;text-shadow:0 2px 7px #000}.health strong{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.health-track{height:11px;background:#372d3299;border:1px solid #f0dab333;box-shadow:0 1px 7px #0003}.health-track i{display:block;height:100%;background:linear-gradient(90deg,#bc835f,#eed293);transition:width .08s linear}.energy-track{height:3px;margin-top:6px;background:#e4d5bd22;width:70%}.energy-track i{display:block;height:100%;background:#a9dbd0}.side1 .health-track i,.side1 .energy-track{float:right}.side1 .energy-track i{float:right}.timer{text-align:center;color:#fff1d6;min-width:58px;text-shadow:0 2px 8px #0005}.timer strong{font-size:32px;line-height:1;display:block;font-weight:650}.timer small{display:block;font-size:7px;letter-spacing:1.2px;margin-top:7px}.match-bar{display:flex;align-items:center;justify-content:space-between;font-size:9px;color:var(--muted);padding:10px 0}.match-bar>div{display:flex;gap:10px}.match-bar .quiet{font-size:10px}.result{position:absolute;inset:0;background:#101822ce;backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:20px;z-index:3}.result h2{font-family:Georgia,serif;font-style:italic;font-weight:400;font-size:52px;margin:14px 0}.result p{font-size:12px;color:var(--muted);line-height:1.6}.result .primary{max-width:210px;margin:18px 0 5px}.touch{display:flex;justify-content:space-between;gap:15px;padding:15px 0;user-select:none;-webkit-user-select:none;touch-action:none}.touch button{user-select:none;touch-action:none;background:#26313b;border:1px solid #46565f;color:#d9e2dd;border-radius:10px;min-height:45px;padding:8px 14px;font-size:10px}.touch button.pressed{background:#77624d;border-color:var(--amber)}.movement{display:flex;align-items:center;gap:7px}.movement>button{height:65px;font-size:20px}.movement>div{display:flex;flex-direction:column;gap:7px}.movement>div button{min-height:34px;font-size:9px}.attacks{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.attacks .special{color:var(--amber);border-color:#9d774c}dialog{max-width:560px;max-height:85vh;background:#1a232d;border:1px solid #4b5c65;border-radius:16px;padding:32px;color:var(--ink)}dialog::backdrop{background:#060c12bb;backdrop-filter:blur(4px)}dialog>button{float:right}dialog h2{font-size:29px;letter-spacing:-1px}dialog p{font-size:13px;line-height:1.9;color:#bfcbc8}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);max-width:92vw;padding:14px 21px;border-radius:9px;background:#e8d4b4;color:#2c281f;box-shadow:0 12px 40px #0008;z-index:10;font-size:12px}#toast.error{background:#e9b0a0}:fullscreen{background:#11151e;display:flex;align-items:center;justify-content:center}:fullscreen canvas{width:100%;height:100%;object-fit:contain}:fullscreen .hud{top:4%}body.in-match main{padding-top:28px}body.in-match .arena-section{max-width:1156px;margin:auto}body.in-match .controls{margin-top:18px}.about{max-width:800px}.about p{font-size:14px;line-height:1.9;color:var(--muted)}.about h2{font-size:22px;margin-top:32px}
@media(max-width:1000px){.welcome{grid-template-columns:1fr 370px;gap:35px}.intro h1{font-size:70px}.hero-tags{gap:15px;font-size:7px}header,footer{padding-left:28px;padding-right:28px}main{padding:40px 28px}.setup-card{padding:23px}.lobby-actions{flex-wrap:wrap;justify-content:flex-end}.controls{gap:30px}}@media(max-width:740px){header{height:76px;padding:0 20px}.brand{font-size:16px}.sun-icon{width:23px;height:23px}nav{gap:8px}nav button{font-size:9px}.status{font-size:8px}main{padding:32px 19px}.welcome{grid-template-columns:1fr;gap:27px;margin-bottom:32px}.intro h1{font-size:64px;letter-spacing:-3px;margin:19px 0}.intro p{font-size:12px}.hero-tags{font-size:7px;margin-top:19px}.setup-card{padding:23px}.setup-card h2{max-width:none;font-size:23px}.fighter-picker{gap:10px}.fighter-picker button{padding:12px}.arena-cover>p{font-size:18px;margin-top:10px}.arena-cover>span{font-size:6px;letter-spacing:3px}.arena-caption{font-size:6px;letter-spacing:1px}.arena-caption>div{gap:4px}.arena-caption .quiet{font-size:8px}.arena-shell{border-radius:9px}.controls{flex-direction:column;gap:9px;margin-top:27px;padding-top:22px}.controls h3{font-size:17px;margin:10px 0}.controls h3 br{display:none}.keys{gap:14px 16px;font-size:9px}footer{padding:23px 20px;flex-direction:column;gap:15px;font-size:9px}footer small{font-size:6px}.lobby{grid-template-columns:1fr;gap:17px}.lobby h2{font-size:28px}.lobby-actions{justify-content:flex-start;gap:7px}.lobby-actions .primary,.lobby-actions .secondary{font-size:10px;padding:11px 13px}.seats{gap:10px}.seat{padding:13px 10px;gap:9px}.seat-badge{font-size:20px}.seat strong{font-size:11px;max-width:95px;overflow:hidden;text-overflow:ellipsis}.seat small{font-size:8px}.versus{font-size:13px}.ready-row .primary{width:135px;font-size:10px}.ready-row>span{font-size:9px}.ready-row{flex-wrap:wrap}.hud{gap:10px;left:4%;right:4%}.health>div:first-child{font-size:7px;margin-bottom:5px}.health strong{max-width:78px}.health-track{height:7px}.energy-track{height:2px;margin-top:4px}.timer{min-width:32px}.timer strong{font-size:21px}.timer small{font-size:5px;letter-spacing:.7px;margin-top:4px}.match-bar{font-size:7px}.match-bar>div{gap:0}.match-bar .quiet{font-size:8px;padding:9px 7px}.result h2{font-size:30px;margin:6px 0}.result .eyebrow{font-size:7px}.result p{font-size:9px;margin:5px 0}.result .primary{font-size:10px;max-width:170px;margin-top:8px;padding:10px}.result .quiet{font-size:9px}.touch{padding-top:7px;gap:9px}.touch button{padding:7px 10px;font-size:8px}.movement>button{font-size:17px;min-width:40px}body.in-match main{padding-top:20px}dialog{margin:16px;padding:24px}.about p{font-size:12px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}