.gate-page{--gate-cyan:#75efff;--gate-lime:#b6ff58;--gate-red:#ff426b;--gate-gold:#ffc85c}
.gate-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:end}
.gate-page h1{margin:8px 0 0;font-size:clamp(3rem,9vw,7rem);line-height:.84;letter-spacing:-.07em;text-shadow:0 18px 54px rgba(0,0,0,.42)}
.gate-page h1 span{display:block;color:var(--gate-lime);text-shadow:0 0 34px rgba(182,255,88,.3)}
.game-lead{max-width:780px;margin:24px 0 0;color:#b6c7d9;font-size:clamp(.95rem,1.7vw,1.08rem)}
.gate-tags{display:grid;grid-template-columns:repeat(2,auto);gap:8px}
.gate-tags span{padding:8px 10px;border:1px solid #3b6074;border-radius:999px;background:linear-gradient(180deg,#102433,#08131e);color:#b8d2e3;font:800 .62rem/1 ui-monospace,monospace;letter-spacing:.09em;box-shadow:inset 0 0 16px rgba(117,239,255,.04)}
.gate-shell{width:min(720px,100%);margin:36px auto 0;overflow:hidden;border:1px solid #426277;border-radius:24px;background:#050a11;box-shadow:0 34px 100px rgba(0,0,0,.46),0 0 48px rgba(74,205,255,.07)}
.gate-hud{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#29495e;border-bottom:1px solid #35566b}
.gate-hud>div{min-width:0;padding:11px 12px 10px;background:linear-gradient(180deg,#0d1c29,#07111b);text-align:center}
.gate-hud span{display:block;color:#7892a7;font:800 .56rem/1 ui-monospace,monospace;letter-spacing:.12em}
.gate-hud strong{display:block;margin-top:5px;color:#effbff;font:900 1rem/1 ui-monospace,monospace;text-shadow:0 0 18px rgba(117,239,255,.18)}
.gate-hud small{display:block;margin-top:5px;color:#72dff1;font:800 .54rem/1 ui-monospace,monospace;letter-spacing:.08em}
.gate-hud #squad-count{color:var(--gate-lime);font-size:1.3rem;text-shadow:0 0 18px rgba(182,255,88,.25)}
.gate-viewport{position:relative;aspect-ratio:3/4;overflow:hidden;background:#06101c}
#gate-canvas{display:block;width:100%;height:100%;touch-action:none;background:#06101c;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.lane-labels{position:absolute;z-index:2;left:4%;right:4%;bottom:1.5%;display:grid;grid-template-columns:repeat(3,1fr);pointer-events:none}
.lane-labels span{text-align:center;color:rgba(222,244,255,.2);font:900 .68rem/1 ui-monospace,monospace}
.gate-overlay{position:absolute;z-index:5;inset:0;display:grid;place-content:center;justify-items:center;padding:30px;text-align:center;background:radial-gradient(circle at 50% 43%,rgba(16,67,77,.94),rgba(3,8,14,.985) 65%)}
.gate-overlay[hidden]{display:none}
.gate-overlay h2{margin:8px 0 12px;font-size:clamp(2rem,7vw,4.2rem);letter-spacing:-.055em;text-shadow:0 0 32px rgba(117,239,255,.14)}
.gate-overlay p{max-width:560px;margin:0;color:#c1d1df}
.panel-kicker{color:var(--gate-lime)!important;font:900 .68rem/1.3 ui-monospace,monospace!important;letter-spacing:.16em}
.gate-overlay button{margin-top:22px;min-width:180px;padding:13px 20px;border:1px solid #9aea6d;border-radius:999px;color:#07110a;background:linear-gradient(180deg,#c7ff9d,#7fdd5e);font:900 .8rem/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.1em;cursor:pointer;box-shadow:0 0 32px rgba(166,255,111,.16)}
.boss-readout{position:absolute;z-index:3;top:17px;left:50%;width:64%;transform:translateX(-50%);pointer-events:none}
.boss-readout span{display:block;margin-bottom:6px;color:#ffd2da;text-align:center;font:900 .64rem/1 ui-monospace,monospace;letter-spacing:.14em;text-shadow:0 0 12px rgba(255,66,107,.45)}
.boss-readout div{height:10px;overflow:hidden;border:1px solid #a43b55;border-radius:999px;background:#200811;box-shadow:0 0 22px rgba(255,66,107,.12)}
.boss-readout i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#ff315f,#ff8c57);box-shadow:0 0 18px rgba(255,72,112,.55)}
.gate-flash{position:absolute;z-index:4;top:82px;left:50%;width:max-content;max-width:84%;margin:0;transform:translateX(-50%);padding:8px 13px;border:1px solid rgba(142,241,255,.34);border-radius:999px;color:#effdff;background:rgba(4,17,26,.86);font:900 .66rem/1 ui-monospace,monospace;letter-spacing:.07em;opacity:0;transition:opacity .13s ease;box-shadow:0 0 24px rgba(117,239,255,.1)}
.gate-flash[data-active="true"]{opacity:1}
.lane-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#2e4c60;border-top:1px solid #36586e}
.lane-controls button{min-height:52px;border:0;color:#a9bece;background:linear-gradient(180deg,#0c1a27,#08131d);font:900 .66rem/1 ui-monospace,monospace;letter-spacing:.06em;cursor:pointer;touch-action:manipulation}
.lane-controls button[data-active="true"]{color:#06120a;background:linear-gradient(180deg,#c7ff8e,#82e65d);box-shadow:inset 0 0 24px rgba(255,255,255,.22)}
.gate-help{margin:0;padding:10px 14px;color:#6d879a;background:#06101a;text-align:center;font:800 .57rem/1 ui-monospace,monospace;letter-spacing:.09em}
.back-link{margin:26px 0 0;color:var(--muted)}
.sr-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
@media(max-width:850px){.gate-hero{grid-template-columns:1fr}.gate-tags{grid-template-columns:repeat(4,auto);justify-content:start}}
@media(max-width:600px){.gate-page{padding-top:42px}.gate-tags{grid-template-columns:repeat(2,auto)}.gate-shell{border-radius:18px}.gate-overlay{padding:18px 16px}.gate-overlay h2{font-size:clamp(1.9rem,10vw,2.8rem)}.gate-overlay p{max-height:9.5em;overflow-y:auto;font-size:.8rem;line-height:1.48}.gate-overlay button{margin-top:14px}.gate-hud>div{padding:9px 5px}.gate-hud span{font-size:.51rem}.gate-hud small{font-size:.5rem}.lane-controls button{min-height:48px;font-size:.6rem}.gate-flash{top:67px}}
@media(prefers-reduced-motion:reduce){.gate-flash{transition:none}}