@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#090d18;--panel:#111827;--line:#27344a;--text:#f4f7ff;--muted:#8a98ad;--cyan:#59e5ff;--lime:#d7ff6b;--pink:#ff5b87;font-family:'DM Sans',system-ui,sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}body{background:radial-gradient(circle at 60% -20%,#183456 0,transparent 36%),radial-gradient(circle at -10% 60%,#171c39 0,transparent 36%),var(--bg)}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.48}button:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}button:hover:not(:disabled){filter:brightness(1.12)}[hidden]{display:none!important}.site-shell{min-height:100dvh;max-width:1500px;margin:auto;display:flex;flex-direction:column}.masthead{height:86px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4.5vw,64px);border-bottom:1px solid #29324780}.brand{font:900 29px/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:.08em;display:flex;align-items:center;gap:11px}.brand-mark{font:900 28px/1 system-ui;color:var(--cyan);text-shadow:0 0 18px #59e5ffaa;transform:rotate(-18deg)}.brand-accent{color:var(--cyan)}.mast-note,.eyebrow,.mode-heading,.divider,.briefing-kicker,.pad-block>span,.desktop-hint,footer{font-size:11px;font-weight:700;letter-spacing:.15em;color:var(--muted)}.mast-dot,.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime);vertical-align:middle;margin:0 5px}.entry-layout{flex:1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(325px,.75fr);gap:clamp(25px,5vw,90px);align-items:center;padding:clamp(36px,6vw,90px) clamp(20px,6vw,86px)}.intro{max-width:760px}.intro h1{font:900 clamp(62px,8vw,130px)/.84 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.015em;text-transform:uppercase;margin:24px 0 28px}.intro h1 em{font-style:normal;color:var(--cyan);text-shadow:0 0 45px #59e5ff45}.intro p{max-width:570px;color:#b9c7d7;font-size:16px;line-height:1.75}.how-row{display:flex;align-items:center;gap:14px;margin-top:48px;color:#e1e9f6;font:700 13px 'Barlow Condensed',sans-serif;letter-spacing:.13em}.how-row b{color:var(--cyan);margin-right:6px}.how-row i{width:22px;height:1px;background:#57738d}.entry-card{background:linear-gradient(135deg,#192435,#101827);border:1px solid #324258;box-shadow:0 20px 80px #0007,0 0 50px #59e5ff10;border-radius:18px;padding:clamp(24px,3vw,38px)}.entry-card label{display:block;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.16em;margin-bottom:10px}.entry-card input{width:100%;border:1px solid #43536a;border-radius:8px;padding:14px 16px;background:#0c1420;color:white}.entry-card input::placeholder{color:#64758c}.mode-heading{margin:28px 0 12px}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mode-option{background:#111b2a;color:#d7e2f0;border:1px solid #3b4c63;border-radius:9px;padding:16px;text-align:left;min-height:91px}.mode-option.selected{border-color:var(--cyan);background:#173347;box-shadow:inset 0 0 24px #59e5ff16}.mode-option b,.mode-option span{display:block}.mode-option b{font:800 19px 'Barlow Condensed',sans-serif;letter-spacing:.08em}.mode-option span{font-size:11px;color:#94a8b9;line-height:1.35;margin-top:6px}.primary-button{width:100%;background:var(--cyan);border:0;border-radius:8px;color:#06111b;font:900 20px 'Barlow Condensed',sans-serif;letter-spacing:.08em;padding:15px 20px;display:flex;justify-content:space-between;align-items:center}.entry-card>.primary-button{margin-top:22px}.primary-button span{font-size:24px}.divider{position:relative;text-align:center;margin:30px 0 19px;font-size:10px}.divider:before{content:'';position:absolute;top:50%;left:0;width:100%;height:1px;background:#344359}.divider span{position:relative;background:#121b2a;padding:0 10px}.join-row{display:flex;gap:9px}.join-row input{text-transform:uppercase;letter-spacing:.18em;min-width:0}.join-row button,.subtle-button,.ability-button{border:1px solid #4b647d;background:#223148;color:white;border-radius:8px;padding:12px 17px;font:800 14px 'Barlow Condensed',sans-serif;letter-spacing:.06em}.form-error{min-height:20px;font-size:12px;color:#ff9eaf}.game-layout{width:min(1270px,100%);margin:0 auto;padding:25px clamp(12px,3vw,38px) 50px;flex:1}.game-top{display:flex;align-items:end;justify-content:space-between;gap:15px;margin-bottom:15px}.game-top .eyebrow strong{color:var(--lime);font-size:16px;letter-spacing:.12em}.game-mode{font:900 clamp(28px,4vw,46px) 'Barlow Condensed',sans-serif;letter-spacing:.04em}.game-actions{display:flex;gap:14px;align-items:center}.network{font-size:10px;letter-spacing:.12em;color:var(--lime)}.network.offline{color:var(--pink)}.arena-wrap{position:relative;padding:10px;background:#0a101d;border:1px solid #3c5774;border-radius:12px;box-shadow:0 0 0 3px #59e5ff08,0 24px 60px #0009;overflow:hidden}.arena-topline{display:flex;justify-content:space-between;align-items:center;padding:3px 7px 9px;font:800 12px 'Barlow Condensed',sans-serif;letter-spacing:.13em;color:#a8bfd3}.arena-topline strong{color:var(--cyan)}.arena-topline span:last-child{font-size:21px;color:var(--text)}#arena{width:100%;height:auto;display:block;border-radius:4px;background:#101b2d;touch-action:none}.center-callout{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);pointer-events:none;text-align:center;font:900 clamp(30px,6vw,85px)/.85 'Barlow Condensed',sans-serif;letter-spacing:.06em;text-shadow:0 4px 25px #000,0 0 24px #59e5ff70;white-space:nowrap}.center-callout small{display:block;margin-top:12px;color:#b7dcf1;font:700 11px 'DM Sans',sans-serif;letter-spacing:.2em}.game-bottom{display:grid;grid-template-columns:minmax(180px,1fr) minmax(230px,1.3fr) auto;gap:20px;align-items:start;margin-top:20px}.briefing{display:flex;flex-direction:column;gap:7px}.briefing strong{font:800 22px 'Barlow Condensed',sans-serif;letter-spacing:.02em}.briefing>span:last-child{color:var(--muted);font-size:12px;line-height:1.45}.class-picker{grid-column:1/-1;order:2}.class-options{display:flex;gap:9px;margin-top:10px}.class-options button{flex:1;padding:12px;background:#131f30;border:1px solid #42546c;border-radius:8px;color:white;text-align:left}.class-options button.active{border-color:var(--lime);box-shadow:inset 0 0 16px #d7ff6b20}.class-options b,.class-options small{display:block}.class-options b{font:800 17px 'Barlow Condensed',sans-serif}.class-options small{font-size:10px;color:#a3b3c4;margin-top:3px}.roster{display:flex;flex-wrap:wrap;gap:8px}.roster-item{display:flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid #34475e;background:#101b2a;border-radius:6px;font-size:11px;color:#ddeaf4}.roster-item .swatch{width:8px;height:8px;background:var(--player);border-radius:50%;box-shadow:0 0 8px var(--player)}.roster-item.out{opacity:.4}.roster-item.offline{border-style:dashed}.room-controls{min-width:180px}.room-controls button+button{margin-top:8px}.ability-button{width:100%;border-color:var(--lime);color:var(--lime)}.ability-button.armed{background:var(--lime);color:#152017}.touch-controls{display:flex;justify-content:space-between;padding:18px 20px 4px;user-select:none}.pad-block{text-align:center}.pad{width:120px;height:120px;border:1px solid #427d9b;border-radius:50%;background:radial-gradient(circle,#19374d,#0e1b2a 70%);display:grid;place-items:center;touch-action:none;position:relative}.aim-pad{border-color:#dd6687;background:radial-gradient(circle,#472136,#201623 70%)}.pad-core{width:42px;height:42px;background:var(--cyan);border-radius:50%;box-shadow:0 0 22px #59e5ff99;opacity:.8;transform:translate(var(--dx,0px),var(--dy,0px));pointer-events:none}.aim-pad .pad-core{background:var(--pink);box-shadow:0 0 22px #ff5b8799}.pad-block>span{display:block;margin-bottom:10px}.desktop-hint{margin-top:12px;text-align:center;letter-spacing:.02em}.site-shell>footer{padding:25px clamp(20px,4.5vw,64px);border-top:1px solid #27344a;font-size:10px}.site-shell>footer span{color:var(--cyan);padding:0 5px}
@media(max-width:850px){.entry-layout{grid-template-columns:1fr;gap:28px;padding-top:50px}.intro h1{font-size:clamp(62px,13vw,100px)}.intro p{margin-bottom:0}.how-row{margin-top:26px}.game-bottom{grid-template-columns:1fr 1fr}.room-controls{grid-column:1/-1}.room-controls .primary-button{max-width:none}.mast-note{display:none}}
@media(max-width:560px){.masthead{height:65px}.brand{font-size:23px}.entry-layout{padding-top:30px}.intro h1{font-size:clamp(58px,14vw,78px)}.intro p{font-size:13px}.how-row{gap:7px;font-size:10px}.how-row i{width:10px}.entry-card{padding:22px}.game-layout{padding:16px 9px 30px}.game-top{align-items:center}.game-actions{gap:5px;flex-direction:column;align-items:end}.subtle-button{font-size:11px;padding:8px}.network{font-size:9px}.arena-wrap{padding:5px}.arena-topline{font-size:10px}.arena-topline span:last-child{font-size:15px}.game-bottom{grid-template-columns:1fr;gap:14px}.briefing strong{font-size:19px}.roster{min-height:30px}.class-options{gap:5px}.class-options button{padding:8px}.class-options b{font-size:14px}.class-options small{font-size:9px}.desktop-hint{display:none}.touch-controls{padding:16px 10px 2px}.pad{width:108px;height:108px}.site-shell>footer{font-size:8px}}
.arena-stage{position:relative;width:100%;aspect-ratio:1000/620;overflow:hidden;background:#070f1c}
.arena-stage #arena{position:relative;z-index:2;background:transparent}
.center-callout{z-index:4}
.kaykit-layer{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}
.rotate-notice{display:none}
@media (max-width:900px) and (orientation:portrait){
  .playing .rotate-notice{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:32px;text-align:center;background:radial-gradient(circle at center,#183456,#090d18 70%)}
  .rotate-notice span{font-size:70px;line-height:1;color:var(--cyan)}
  .rotate-notice strong{font:900 38px 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.06em}
  .rotate-notice small{max-width:260px;color:#b9c7d7;line-height:1.5}
}
@media (orientation:landscape) and (max-height:650px){
  body:not(.playing) .masthead{height:42px;padding:0 16px}
  body:not(.playing) .mast-note,body:not(.playing) .site-shell>footer{display:none}
  body:not(.playing) .entry-layout{grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:14px;padding:8px max(14px,env(safe-area-inset-right)) 8px max(14px,env(safe-area-inset-left));align-items:center}
  body:not(.playing) .intro h1{font-size:clamp(42px,6vw,64px);margin:12px 0;line-height:.85}
  body:not(.playing) .intro p,body:not(.playing) .how-row{display:none}
  body:not(.playing) .entry-card{padding:10px 14px;max-height:calc(100dvh - 48px);overflow:auto}
  body:not(.playing) .entry-card label{margin-bottom:4px}
  body:not(.playing) .entry-card input{padding:8px 10px}
  body:not(.playing) .mode-heading{margin:8px 0 5px}
  body:not(.playing) .mode-option{min-height:52px;padding:7px 9px}
  body:not(.playing) .mode-option span{margin-top:2px}
  body:not(.playing) .entry-card>.primary-button{margin-top:8px;padding:7px 11px}
  body:not(.playing) .solo-button{margin-top:5px;padding:7px 11px}
  body:not(.playing) .divider{margin:10px 0 7px}
  body:not(.playing) .join-row button{padding:7px 11px}
  body:not(.playing) .form-error{min-height:0;margin:5px 0 0}
  body.playing{overflow:hidden;overscroll-behavior:none}
  .playing .masthead,.playing .site-shell>footer,.playing .game-mode,.playing .network,.playing .desktop-hint{display:none}
  .playing .game-layout{position:relative;width:100vw;max-width:none;height:100dvh;min-height:0;margin:0;padding:0;overflow:hidden}
  .playing .arena-wrap{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:#070f1c;overflow:hidden}
  .playing .arena-stage{position:absolute;left:50%;top:50%;width:min(92vw,162dvh);height:auto;transform:translate(-50%,-50%)}
  .playing .game-top{position:absolute;top:3px;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));height:22px;margin:0;z-index:5;align-items:center}
  .playing .game-top .eyebrow{font-size:9px}
  .playing .game-top .eyebrow strong{font-size:11px}
  .playing .game-actions .subtle-button{padding:3px 7px;font-size:10px}
  .playing .arena-topline{position:absolute;top:3px;left:115px;right:105px;z-index:4;padding:0;font-size:10px;line-height:22px}
  .playing .arena-topline span:last-child{font-size:14px}
  .playing .center-callout{z-index:4;top:48%}
  .playing .game-bottom{position:absolute;bottom:6px;left:50%;width:100%;max-width:640px;transform:translateX(-50%);display:flex;justify-content:center;align-items:end;gap:10px;margin:0;padding:0 6px;z-index:5;pointer-events:none}
  .playing .game-bottom>*{pointer-events:auto}
  .playing .briefing,.playing .roster{display:none}
  .playing .class-picker{order:0;max-width:350px;min-width:0;flex:1}
  .playing .class-picker .briefing-kicker{display:none}
  .playing .class-options{margin-top:0;gap:3px}
  .playing .class-options button{padding:4px 6px}
  .playing .class-options b{font-size:12px}
  .playing .class-options small{font-size:8px;margin-top:0}
  .playing .room-controls{min-width:0;width:min(360px,48vw);display:flex;gap:6px}
  .playing .room-controls button+button{margin-top:0}
  .playing .room-controls button{flex:1;min-width:0;padding:5px 8px;font-size:14px}
  .playing .touch-controls{position:absolute;inset:0;display:flex;align-items:end;justify-content:space-between;padding:0 max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));pointer-events:none;z-index:6}
  .playing .touch-controls[hidden]{display:none}
  .playing .pad-block{pointer-events:auto}
  .playing .pad-block>span{font-size:9px;margin-bottom:4px;text-shadow:0 2px 5px #000}
  .playing .pad{width:90px;height:90px;background:#102638cc;backdrop-filter:blur(4px)}
  .playing .aim-pad{background:#321a2ecc}
  .playing .pad-core{width:30px;height:30px}
}
@media (orientation:landscape) and (max-height:650px) and (max-width:700px){
  body:not(.playing) .mode-option{min-height:38px}
  body:not(.playing) .mode-option span{display:none}
}

.solo-button{width:100%;margin-top:10px;padding:12px 16px;border:1px solid var(--lime);border-radius:8px;background:#202c24;color:var(--lime);text-align:left;display:flex;align-items:center;justify-content:space-between;gap:12px}
.solo-button strong{font:900 18px 'Barlow Condensed',sans-serif;letter-spacing:.06em}
.solo-button span{font-size:11px;color:#d7e8c2}
@media(max-width:560px){.solo-button{padding:13px 14px}.solo-button span{max-width:130px;text-align:right}}
.room-controls #lock{margin-top:0;background:var(--lime);color:#152017;justify-content:center;text-align:center;white-space:nowrap}
.room-controls #lock.locked{background:#294237;color:#d7ffde;opacity:1;cursor:default}
.arena-wrap,.playing .arena-wrap{background:#8db9d8 url('/assets/sky/skybox-day.png') center 42% / cover no-repeat}
.arena-stage{background:transparent}
.arena-topline,.playing .arena-topline,.playing .game-top{color:#f2fbff;text-shadow:0 2px 7px #14334e,0 0 9px #14334e}
.arena-topline span:last-child{color:#f2fbff}
.room-controls #collapsePreview{width:100%;border-color:#9ed9ed;background:#123c56e8;color:#e9faff;text-align:center;font-size:14px;white-space:nowrap}
@media (orientation:landscape) and (max-height:650px){.playing .room-controls #collapsePreview{font-size:11px;padding:5px 7px}}
.class-options{overflow-x:auto;scrollbar-width:thin}
.class-options button{min-width:112px}
.break-options{display:grid;grid-template-columns:1fr 1fr;gap:9px}.break-option{padding:11px 8px;border:1px solid #3b4c63;border-radius:8px;background:#111b2a;color:#d7e2f0;font:800 14px 'Barlow Condensed',sans-serif;letter-spacing:.04em}.break-option.selected{border-color:var(--cyan);background:#173347;box-shadow:inset 0 0 20px #59e5ff14}.break-explain{margin:9px 0 0;color:#94a8b9;font-size:11px;line-height:1.45}
.leave-button{border-color:#76556b;color:#ffb9cc}.leave-button:hover:not(:disabled){background:#44243a}
@media (orientation:landscape) and (max-height:650px){
  .playing .game-bottom{flex-direction:column;align-items:center;gap:5px}
  .playing .class-picker{order:0;flex:none;width:min(640px,calc(100vw - 174px));max-width:none}
  .playing .class-options button{flex:0 0 112px}
  .playing .room-controls{flex:none}
}