:root{--bg:#0b1020;--panel:#131b2c;--line:#ffffff0d;--muted:#8290a7;--text:#eef3fc;--gold:#ffd366;--cyan:#52e0d1}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% -20%,#23324766,transparent 55%),var(--bg);color:var(--text);font-family:Tahoma,'Segoe UI',sans-serif;font-size:13px}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{opacity:.38;cursor:default}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:4px}button{transition:background .18s,transform .18s,border-color .18s}button:not(:disabled):active{transform:translateY(2px)}[hidden]{display:none!important}.app{max-width:1400px;margin:auto;padding:0 56px}.header{display:flex;align-items:center;justify-content:space-between;height:103px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}.brand-mark{background:var(--gold);border-radius:14px;width:47px;height:49px;display:grid;place-items:center;font-size:29px;transform:rotate(-7deg);box-shadow:0 5px 18px #ffd36615}.brand b{font:900 21px 'Segoe UI',sans-serif;letter-spacing:1.2px}.brand small{display:block;font-size:9px;color:var(--muted);margin-top:5px}.gold{color:var(--gold)}nav{display:flex;gap:31px;height:100%;align-items:center}.nav-active{height:100%;display:flex;align-items:center;border-bottom:2px solid var(--gold);font-weight:bold;color:var(--gold)}.nav-button{border:0;background:none;color:var(--muted)}.profile{display:flex;gap:11px;align-items:center;font-size:11px}.profile small{display:block;color:var(--muted);font-size:10px;margin-top:6px}.rank{color:var(--gold);border:1px solid #ffd36630;border-radius:50%;width:39px;height:39px;display:grid;place-items:center;font-size:23px}.intro{display:flex;align-items:center;justify-content:space-between;padding:35px 0 28px}.eyebrow{font:700 9px 'Segoe UI',sans-serif;letter-spacing:2.2px;color:var(--cyan);display:flex;gap:8px;align-items:center}.eyebrow span{width:5px;height:5px;border-radius:50%;background:var(--cyan)}h1{font-size:27px;line-height:1.8;margin:9px 0 3px;font-weight:900;letter-spacing:-1px}h1 em{font-style:normal;color:var(--gold)}.intro p{color:var(--muted);margin:0;font-size:11px}.season{display:flex;gap:14px;align-items:center;font-size:11px}.season>span{font-size:35px;color:var(--gold)}.season small{font:9px 'Segoe UI',sans-serif;letter-spacing:1.5px;color:var(--muted);display:block;margin-top:8px}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;direction:ltr;gap:20px;align-items:stretch}.arena-panel{border:1px solid #3242596b;border-radius:18px;overflow:hidden;align-self:stretch;background:#101928;display:flex;flex-direction:column}.arena-top,.arena-bottom{direction:rtl;display:flex;justify-content:space-between;align-items:center;padding:0 19px;height:53px;font-size:10px;color:var(--muted);flex-shrink:0}.arena-top>div{display:flex;gap:9px;align-items:center}.arena-top b{color:#c5d2e5;font-weight:normal}.live-dot,.arena-bottom i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px #52e0d155}.divider{margin:0 3px;color:#39475c}.arena-actions{direction:ltr;gap:5px!important}.icon-button{background:#ffffff05;border:1px solid #ffffff0a;border-radius:7px;width:30px;height:29px;font:18px 'Segoe UI',sans-serif;color:#b1c0d5}.icon-button:hover{background:#ffffff10;color:white}.stage{position:relative;aspect-ratio:1200/650;isolation:isolate;background:#0a1526;overflow:hidden;flex:1;min-height:360px}.stage canvas#game{display:block;width:100%;height:100%;object-fit:fill}.scoreboard{position:absolute;top:5%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:16px;color:white;pointer-events:none}.team{display:flex;gap:9px;align-items:center;font-size:11px;font-weight:bold;min-width:90px}.team small{display:block;font:7px 'Segoe UI',sans-serif;letter-spacing:2px;margin-top:5px;color:#98adc5}.team-orange{text-align:right}.team-badge{display:grid;place-items:center;width:28px;height:33px;clip-path:polygon(0 0,100% 0,94% 74%,50% 100%,6% 74%);background:linear-gradient(135deg,#4cc9ff,#2561e8);font:bold 16px 'Segoe UI',sans-serif}.team-orange .team-badge{background:linear-gradient(135deg,#ffb35b,#ed6437)}.score{display:flex;align-items:center;gap:13px;position:relative;background:#0a132add;border:1px solid #a9c1eb22;border-radius:10px;padding:7px 19px;font:900 28px 'Segoe UI',sans-serif;box-shadow:0 8px 25px #0003}.score>span{font-size:16px;color:#667992}.score small{position:absolute;top:100%;left:50%;transform:translateX(-50%);background:#ffd366;color:#252319;padding:3px 14px;border-radius:0 0 6px 6px;font:bold 12px Consolas,monospace;letter-spacing:1px}.lobby-banner{position:absolute;top:27%;left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap;pointer-events:none}.arena-tag{font:600 8px 'Segoe UI',sans-serif;letter-spacing:3.5px;color:#c4d5e6}.lobby-banner h2{font:1000 italic clamp(38px,4.8vw,68px)/1 'Arial Black','Segoe UI',sans-serif;letter-spacing:-4px;margin:13px 0 10px;filter:drop-shadow(0 5px 0 #0a182d);transform:rotate(-4deg)}.lobby-banner h2 span{color:var(--gold)}.arena-sub{color:var(--gold);font:700 9px 'Segoe UI',sans-serif;letter-spacing:2px}.lobby-banner p{margin-top:18px;font-size:10px;color:#b2c6da}.player-label{position:absolute;bottom:8%;font-size:10px;color:white;text-align:center;transform:translateX(-50%);background:#0b182a99;border:1px solid #4ac1f944;padding:6px 14px;border-radius:6px}.label-blue{left:27%}.label-orange{left:73%;border-color:#ff9a4944}.player-label span{font-size:8px;margin-right:7px;color:#8eabc9}.arena-bottom{height:42px;background:#111a29;font-size:9px}.arena-bottom i{width:4px;height:4px;margin-left:6px}.arena-bottom b{font-size:12px;margin-right:7px}.setup{direction:rtl;background:linear-gradient(135deg,#182235,#111a2b);border:1px solid #ffffff0a;border-radius:18px;padding:23px 21px;display:flex;flex-direction:column}.panel-heading{display:flex;align-items:center;gap:11px;margin-bottom:25px}.step-number{font:600 14px Consolas,monospace;color:var(--gold);background:#ffd3660c;border:1px solid #ffd36618;display:grid;place-items:center;width:33px;height:36px;border-radius:9px}.panel-heading h2{font-size:15px;margin:0 0 8px}.panel-heading p{font-size:10px;margin:0;color:var(--muted)}.heading-icon{font-size:25px;color:#526076;margin-right:auto}.field-label{display:flex;justify-content:space-between;font-size:10px;margin-bottom:12px;color:#bcc7d8;align-items:center}.field-label small{font:7px 'Segoe UI',sans-serif;color:#5e708a;letter-spacing:1.2px}.segmented{display:flex;padding:4px;border:1px solid #ffffff07;background:#080f1e80;border-radius:9px;gap:4px}.segmented button{border:1px solid transparent;border-radius:6px;background:transparent;flex:1;padding:10px 3px;font-size:10px;color:#8c9bb0}.segmented button.selected{background:#263447;color:#f4f7fd;border-color:#ffffff09;box-shadow:0 3px 6px #0002}.field-row{display:flex;align-items:center;justify-content:space-between;margin:17px 0 24px;font-size:10px;color:#9eacc0}.field-row select{color:var(--cyan);background:#142b32;border:1px solid #52e0d122;border-radius:6px;padding:6px;font-size:10px;outline-offset:3px}.characters{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}.character{padding:0 0 9px;position:relative;border-radius:10px;background:#0d1626;border:1px solid #ffffff09;overflow:hidden;min-width:0}.character canvas{display:block;width:100%;height:auto;max-height:90px;object-fit:contain;background:radial-gradient(ellipse at 50% 80%,#334d6840,transparent 70%)}.character b{display:block;font-size:11px;margin-top:1px}.character small{color:#7c8ba3;display:block;font-size:8px;margin-top:6px}.character.selected{border-color:var(--gold);background:linear-gradient(#ffd36610,#ffd36605)}.check{display:none;position:absolute;top:4px;right:5px;border-radius:50%;background:var(--gold);color:#121b2a;font-size:8px;width:13px;height:13px;line-height:13px}.selected .check{display:block}.player-stat{display:flex;align-items:center;gap:12px;font-size:9px;color:#91a0b4;margin:12px 0}.player-stat>div{height:4px;flex:1;background:#ffffff08;border-radius:3px;overflow:hidden}.player-stat i{display:block;background:var(--cyan);height:100%;border-radius:3px;transition:width .3s}.player-stat:nth-last-child(1) i{background:var(--gold)}.player-stat b{font-size:10px;color:#c8d4e5;font-weight:normal;width:20px;text-align:left}.primary{display:flex;justify-content:center;align-items:center;gap:16px;border:0;border-radius:10px;background:linear-gradient(115deg,#ffda7e,#ffc04a);box-shadow:0 4px 0 #b67b26,0 8px 24px #ffc85212;color:#372813;font-weight:bold;padding:15px 20px;font-size:14px;width:100%}.primary:hover{background:linear-gradient(115deg,#ffe5a3,#ffd16e);box-shadow:0 4px 0 #b67b26,0 8px 24px #ffc85225}.primary span{font-size:11px;margin-right:auto}.start-button{margin-top:auto}.start-hint{color:#6f8098;font-size:8px;text-align:center;margin:14px 0 0}.guide{margin-top:20px;border:1px solid #ffffff09;border-radius:13px;background:#121a2a80;display:flex;align-items:center;justify-content:space-between;padding:20px 24px;gap:12px}.guide-title{display:flex;gap:11px;align-items:center}.guide-title>span{font-size:25px;color:#a5b3c7}.guide-title b{font-size:11px}.guide-title small{display:block;margin-top:6px;font-size:8px;color:#718198}.control{display:flex;align-items:center;gap:10px;font-size:9px;color:#97a6ba}.control>div{display:flex;align-items:center;gap:4px}kbd{font:10px Consolas,monospace;display:inline-grid;place-items:center;min-width:23px;height:24px;padding:0 5px;background:#202b3c;border:1px solid #344156;border-bottom:3px solid #3d4c63;border-radius:5px;color:#c6d1e3}.wide{font-size:8px;padding:0 8px}.gold-key{background:#332d22;border-color:#6c5931;color:var(--gold)}.or{color:#526079;font-size:9px;margin:0 2px}.help-link{background:transparent;border:0;font-size:9px;color:#9baabf}.help-link span{margin-right:8px;color:var(--gold)}footer{display:flex;justify-content:space-between;color:#526078;font-size:9px;padding:24px 2px 28px}footer>span:last-child{font:8px 'Segoe UI',sans-serif;letter-spacing:1.2px}footer i{color:var(--gold);font-style:normal;margin:0 9px}.announcement{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font:900 italic 80px 'Arial Black','Segoe UI',sans-serif;text-shadow:0 5px 0 #102133,0 0 40px #ffc04a55;color:var(--gold);pointer-events:none}.announcement small{font:14px Tahoma,sans-serif;color:white;display:block;margin-top:10px}.overlay{position:absolute;inset:0;z-index:10;display:grid;place-items:center;background:#060e20ce;backdrop-filter:blur(8px);direction:rtl}.modal{text-align:center;width:min(300px,85%);padding:18px 0}.modal-icon{color:var(--gold);font:36px 'Segoe UI',sans-serif}.modal h2{font-size:24px;margin:12px 0}.modal p{font-size:11px;line-height:2;color:#a9bad3;margin:0 0 17px}.secondary{width:100%;background:transparent;border:1px solid #ffffff1a;border-radius:8px;margin-top:13px;padding:11px;color:#acbbd1;font-size:11px}.result-score{font:900 40px 'Segoe UI',sans-serif;letter-spacing:15px;color:var(--gold);margin:6px 0 18px}.match-info{flex:1;text-align:center}.match-symbol{font-size:46px;display:block;padding:10px}.match-info h3{font-size:14px}.match-info>p{font-size:10px;line-height:2;color:#8a9cb5}.match-tip{text-align:right;padding:15px 0;border-top:1px solid var(--line)}.match-tip b{font-size:11px;color:var(--gold);display:block;margin-bottom:8px}.match-tip span{font-size:9px;color:#8a9cb5;line-height:2}.power-hud{position:absolute;bottom:5%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;direction:rtl;padding:7px 11px;background:#091524b0;border:1px solid #ffffff12;border-radius:8px;font-size:8px;white-space:nowrap}.power-hud>div{width:65px;background:#ffffff13;border-radius:4px;height:4px;overflow:hidden}.power-hud i{height:100%;display:block;background:var(--gold)}.power-hud b{font-size:8px;font-weight:normal;color:var(--gold)}.touch-controls{position:absolute;inset:auto 12px 12px;display:none;justify-content:space-between;pointer-events:none;direction:ltr}.touch-controls>div{display:flex;align-items:center;gap:8px}.touch-controls button{width:48px;height:48px;border-radius:50%;border:1px solid #ffffff40;background:#142739cc;color:white;pointer-events:auto;touch-action:none;font-size:21px;user-select:none}.touch-controls .touch-kick{background:#d99422d9;width:58px;height:58px}.touch-controls .touch-power{color:var(--gold);width:40px;height:40px}.touch-controls button.held{background:#658caa;transform:scale(.9)}dialog{background:#152034;color:var(--text);border:1px solid #35445e;border-radius:18px;max-width:550px;width:calc(100% - 32px);padding:30px;box-shadow:0 20px 100px #0008}dialog::backdrop{background:#030915c9;backdrop-filter:blur(5px)}dialog h2{font-size:20px;line-height:1.7}dialog p{color:#aab9ce;font-size:11px;line-height:2.2}.close-dialog{position:absolute;left:18px;top:13px;border:0;background:none;color:#c9d5e7;font-size:26px}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.help-grid>div{background:#0e1728;border-radius:10px;padding:10px 15px}.help-grid h3{font-size:12px;color:var(--gold)}.help-note{border-top:1px solid var(--line);padding-top:10px}.stage:fullscreen{width:100vw;height:100dvh;min-height:0;aspect-ratio:auto;flex:none}.stage:fullscreen canvas#game{object-fit:contain}.stage:fullscreen .scoreboard{top:3%}@media(min-width:1500px){.app{padding-top:12px}.intro{padding:42px 0 34px}.stage{min-height:455px}}@media(max-width:1150px){.app{padding:0 25px}.game-layout{grid-template-columns:minmax(0,1fr) 275px;gap:15px}.setup{padding:20px 16px}.stage{min-height:375px}.control{flex-direction:column;gap:8px}.guide-title>span{display:none}.lobby-banner h2{font-size:49px}.scoreboard{gap:7px}.team{min-width:70px;font-size:9px}.team-badge{width:23px;height:28px}.score{font-size:23px;padding:6px 13px}.season{display:none}}@media(max-width:850px){.header{height:82px}.app{padding:0 20px}.profile{display:none}h1{font-size:25px}.intro{padding:25px 0}.game-layout{grid-template-columns:1fr;gap:16px}.stage{min-height:0;aspect-ratio:1200/650;flex:none}.setup{display:block}.panel-heading{margin-bottom:20px}.characters{max-width:350px}.character canvas{max-height:95px}.field-label{margin-top:15px}.field-row{margin-bottom:10px}#settings{display:grid;grid-template-columns:1fr 1fr;column-gap:25px}.field-label:first-child{grid-column:1;grid-row:1}.segmented{grid-column:1;grid-row:2;align-self:start}.field-row{grid-column:1;grid-row:3}.field-label:nth-of-type(2){grid-column:2;grid-row:1}.characters{grid-column:2;grid-row:2/5}.player-stat{grid-column:1}.start-button{margin-top:20px}.start-hint{font-size:9px}.lobby-banner h2{font-size:60px}.guide{padding:17px 15px}.guide-title{display:none}.match-info{display:none}footer{font-size:8px}.arena-bottom{font-size:9px}}@media(max-width:520px){.app{padding:0 12px}.brand b{font-size:17px}.brand-mark{width:37px;height:40px;font-size:23px}.brand small{font-size:8px}nav{gap:12px;font-size:10px}.intro{padding:25px 3px 22px}.eyebrow{font-size:8px}h1{font-size:20px;letter-spacing:-.6px}.intro p{font-size:10px}.arena-top{height:43px;padding:0 10px;font-size:8px}.icon-button{width:26px;height:26px}.arena-panel{border-radius:12px}.stage{aspect-ratio:1.45}.scoreboard{top:5%;gap:7px}.team{min-width:58px;font-size:8px;gap:6px}.team small{font-size:6px}.team-badge{width:19px;height:23px;font-size:12px}.score{font-size:21px;gap:9px;padding:3px 10px}.score small{font-size:9px;padding:2px 9px}.lobby-banner{top:31%}.lobby-banner h2{font-size:42px;letter-spacing:-3px;margin:8px 0}.arena-tag{font-size:6px;letter-spacing:2px}.arena-sub{font-size:6px}.lobby-banner p{font-size:8px;margin-top:10px}.player-label{font-size:8px;padding:4px 8px;bottom:7%}.player-label span{font-size:6px}.arena-bottom{font-size:8px;padding:0 10px;height:35px}.setup{padding:20px 16px}.panel-heading{margin-bottom:10px}.guide{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 3px;padding:17px 7px}.control{font-size:8px}.control:first-of-type>div{gap:2px}.control kbd{font-size:9px;min-width:19px;padding:0 3px}.control .or{display:none}.help-link{grid-column:1/-1;margin-top:3px}footer{flex-direction:column;gap:14px;text-align:center}.announcement{font-size:55px}.announcement small{font-size:11px}.modal h2{font-size:20px}.modal-icon{font-size:24px}.modal p{font-size:10px;margin-bottom:8px}.modal .primary{padding:10px;font-size:12px}.modal .secondary{padding:8px;margin-top:10px}.result-score{font-size:28px;margin:5px 0 10px}.power-hud{bottom:27%;font-size:7px}.touch-controls{bottom:8px;left:8px;right:8px}.touch-controls>div{gap:5px}.touch-controls button{width:37px;height:37px;font-size:17px}.touch-controls .touch-kick{width:44px;height:44px}.touch-controls .touch-power{width:31px;height:31px}}@media(pointer:coarse){.touch-controls{display:flex}body.playing .stage{touch-action:none}body.playing .power-hud{bottom:27%}}@media(prefers-reduced-motion:reduce){*{transition:none!important}} 

@media(max-width:850px){.touch-controls{display:flex}body.playing .power-hud{bottom:25%}.field-label small{font-size:6px;letter-spacing:.6px}}
