.firework-game-page { margin: 0; overflow: hidden; background: #02030a; color: #edf8ff; cursor: default; }
.firework-game-page.admin-bar .game-shell { height: calc(100svh - 32px); }
.game-shell { --hud: #66e8ff; position: relative; width: 100%; height: 100svh; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 35%, #151d4b 0, #050713 55%, #02030a 100%); font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
#game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; outline: 0; cursor: crosshair; }
.game-shell:not(.is-playing) #game-canvas { opacity: .25; }
.game-chrome { position: absolute; z-index: 5; inset: 78px 18px 18px; pointer-events: none; border: 1px solid rgba(102,232,255,.08); }
.corner { position: absolute; width: 32px; height: 32px; border-color: rgba(102,232,255,.7); }
.corner-tl { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }.corner-tr { top: -1px; right: -1px; border-top: 2px solid; border-right: 2px solid; }.corner-bl { bottom: -1px; left: -1px; border-bottom: 2px solid; border-left: 2px solid; }.corner-br { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }
.game-topbar { position: absolute; z-index: 20; inset: 0 0 auto; height: 78px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 0 26px; border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(2,3,10,.78); backdrop-filter: blur(18px); }
.game-brand { display: inline-flex; width: max-content; align-items: center; gap: 10px; color: #fff; font-size: .73rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }.game-brand img { width: 37px; height: 37px; }
.mission-label { color: #a5b3cd; font: 700 .68rem/1 monospace; letter-spacing: .15em; }.online-dot { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: #57ffbd; box-shadow: 0 0 12px #57ffbd; animation: gamePulse 1.5s infinite; }
.game-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }.game-actions button,.game-actions a { padding: 9px 12px; border: 1px solid rgba(255,255,255,.15); color: #cbd7e9; background: transparent; font: 800 .62rem/1 inherit; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }.game-actions button:hover,.game-actions a:hover { color: #fff; border-color: var(--hud); }
.game-hud { position: absolute; z-index: 10; inset: 92px 34px auto; display: flex; justify-content: space-between; pointer-events: none; opacity: 0; transform: translateY(-8px); transition: .35s ease; }.is-playing .game-hud { opacity: 1; transform: none; }
.hud-cluster { padding: 14px 16px; border: 1px solid rgba(102,232,255,.15); background: rgba(3,8,19,.62); backdrop-filter: blur(8px); }.hud-title { margin-bottom: 9px; color: var(--hud); font: 700 .58rem/1 monospace; letter-spacing: .15em; }
.pilot-rank { display:flex; align-items:center; gap:13px; margin-bottom:10px; color:#a7f4ff; font:700 .72rem/1 monospace; }.pilot-rank span { color:#56efff; font-size:1.3rem; text-shadow:0 0 12px #4ae9ff; }.pilot-rank b { font-size:1.2rem; }.pilot-rank i,.pilot-rank em { color:#c2cad7; font-style:normal; }.pilot-line { display:grid; grid-template-columns:8px auto auto; align-items:center; gap:6px; margin:5px 0; font:700 .58rem/1 monospace; }.pilot-line>i { width:6px;height:6px;border-radius:50%;background:#52ecff;box-shadow:0 0 7px #52ecff; }.pilot-line span { color:#8cecff; }.pilot-line small { color:#78859a; }.pilot-line.ally>i{background:#6dffb3;box-shadow:0 0 7px #6dffb3}.pilot-line.ally span{color:#73eeb5}
.meter-row { display: grid; grid-template-columns: 42px 130px 28px; align-items: center; gap: 8px; margin-top: 7px; color: #aebbd1; font: 700 .57rem/1 monospace; }.meter { height: 4px; background: rgba(255,255,255,.12); }.meter i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,#ff476f,#ffb06c); box-shadow: 0 0 8px rgba(255,71,111,.5); transition: width .15s; }.meter.energy i { background: linear-gradient(90deg,#5b8cff,#63f3ff); box-shadow: 0 0 8px rgba(99,243,255,.5); }
.hud-right { display: flex; gap: 28px; text-align: right; }.hud-right span { display: block; margin-bottom: 5px; color: #7e8aa0; font: 700 .52rem/1 monospace; letter-spacing: .12em; }.hud-right strong { color: #fff; font: 800 1.2rem/1 monospace; text-shadow: 0 0 14px rgba(102,232,255,.3); }
.match-clock { position:absolute; z-index:11; right:35px; top:175px; display:grid; gap:4px; opacity:0; pointer-events:none; transition:.3s; }.is-playing .match-clock{opacity:1}.match-clock div{display:flex;align-items:center;gap:9px;min-width:94px;padding:6px 10px;border:1px solid rgba(102,232,255,.22);background:rgba(5,13,25,.66);clip-path:polygon(7px 0,100% 0,100% 100%,0 100%,0 7px)}.match-clock span{color:#71efff}.match-clock b{font:800 .86rem/1 monospace;color:#d8f9ff;text-shadow:0 0 8px #53dff5}
.flight-telemetry { position:absolute; z-index:11; left:50%; bottom:20px; transform:translateX(-50%); display:flex; align-items:end; gap:13px; opacity:0; pointer-events:none; transition:.3s; }.is-playing .flight-telemetry{opacity:1}.weapon-count,.ability-count{min-width:78px;padding:8px 12px;border:1px solid rgba(102,232,255,.16);background:rgba(5,13,24,.65);color:#8df2ff;text-align:center}.weapon-count b{font:800 1.1rem/1 monospace}.weapon-count span{display:block;margin-top:3px;color:#6e7f97;font:700 .47rem/1 monospace;letter-spacing:.1em}.ability-count{min-width:44px;font:800 1.1rem/1 monospace}.ship-bars{width:270px;text-align:center}.ship-bars>i{display:block;height:7px;margin:4px 0;border:1px solid rgba(102,232,255,.3);background:linear-gradient(90deg,#71efff 0 78%,rgba(59,89,105,.25) 78%);box-shadow:0 0 9px rgba(73,225,255,.25) inset}.ship-bars>i:nth-child(2){background:linear-gradient(90deg,#d7faff 0 92%,rgba(59,89,105,.25) 92%)}.ship-bars strong{color:#b8edf5;font:700 .65rem/1 monospace}.ship-bars strong span{font-size:.9rem;color:#fff}
.boost-control { position:absolute; z-index:11; left:42px; top:54%; width:76px;height:76px;display:grid;place-content:center;border:3px solid rgba(87,221,255,.55);border-radius:50%;background:radial-gradient(circle,rgba(57,185,255,.22),rgba(5,13,27,.68));color:#82f2ff;text-align:center;opacity:0;pointer-events:none;box-shadow:0 0 18px rgba(61,214,255,.2); }.is-playing .boost-control{opacity:1}.boost-control span{font-size:1.45rem}.boost-control small{font:700 .46rem/1 monospace;letter-spacing:.1em}
.ability-stack{position:absolute;z-index:11;right:38px;top:43%;display:grid;gap:13px;opacity:0;pointer-events:none}.is-playing .ability-stack{opacity:1}.ability-stack button{width:66px;height:66px;border:3px solid rgba(98,226,255,.45);border-radius:50%;color:#92ecff;background:radial-gradient(circle,rgba(61,150,216,.3),rgba(4,10,22,.75));font-size:1.4rem;box-shadow:0 0 16px rgba(69,213,255,.18)}
.is-playing .game-topbar { border-color:transparent; background:linear-gradient(180deg,rgba(1,3,8,.72),transparent); backdrop-filter:none; }.is-playing .game-brand,.is-playing .mission-label{opacity:.18}.is-playing .game-actions{opacity:.38;pointer-events:auto}
.crosshair { position: absolute; z-index: 12; width: 31px; height: 31px; margin: -15px; border: 1px solid rgba(102,232,255,.55); border-radius: 50%; pointer-events: none; opacity: 0; }.is-playing .crosshair { opacity: 1; }.crosshair::before,.crosshair::after { content:""; position:absolute; background:var(--hud); }.crosshair::before { width: 43px; height: 1px; left: -7px; top: 14px; }.crosshair::after { height:43px; width:1px; top:-7px; left:14px; }.crosshair i { position:absolute; width:3px; height:3px; left:13px; top:13px; border-radius:50%; background:#fff; box-shadow:0 0 8px var(--hud); }
.game-lobby { position: absolute; z-index: 15; inset: 78px 0 0; display: grid; grid-template-columns: minmax(0,1fr) 330px; align-items: center; overflow: hidden; }.game-lobby.is-hidden { opacity: 0; visibility: hidden; transition: .25s ease; }
.lobby-video,.lobby-shade { position:absolute; inset:0; width:100%; height:100%; }.lobby-video { object-fit:cover; }.lobby-shade { background: linear-gradient(90deg,rgba(2,3,10,.97) 0%,rgba(2,3,10,.69) 48%,rgba(2,3,10,.78) 100%),linear-gradient(0deg,rgba(2,3,10,.9),transparent 55%); }
.lobby-content { position:relative; z-index:2; max-width: 800px; padding: 40px 7vw; }.game-overline { color: var(--hud); font: 800 .7rem/1 monospace; letter-spacing:.19em; text-transform:uppercase; }.lobby-content h1 { margin:20px 0; font-size:clamp(3.7rem,8vw,8.5rem); line-height:.82; letter-spacing:-.07em; }.lobby-content h1 em { color:transparent; background:linear-gradient(95deg,#fff,#72eaff 45%,#9c7aff); -webkit-background-clip:text; background-clip:text; font-style:normal; }.lobby-copy { max-width:610px; color:#b8c2d5; font-size:1rem; }
.play-launch { position:relative; width:210px; height:70px; margin-top:20px; overflow:hidden; border:1px solid rgba(102,232,255,.72); color:#03101a; background:linear-gradient(105deg,#56dcff,#e7fbff); box-shadow:0 15px 50px rgba(73,207,255,.2); cursor:pointer; text-align:left; padding:0 25px; clip-path:polygon(0 0,91% 0,100% 28%,100% 100%,9% 100%,0 72%); }.play-launch::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.8),transparent 65%); transform:translateX(-120%); transition:.5s; }.play-launch:hover::after { transform:translateX(120%); }.play-launch span { display:block; font-size:1.3rem; font-weight:1000; letter-spacing:.15em; }.play-launch small { display:block; margin-top:2px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.control-grid { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:28px; }.control-grid div { display:flex; align-items:center; gap:8px; color:#8f9cb3; font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; }.control-grid kbd { min-width:48px; padding:6px 8px; border:1px solid rgba(255,255,255,.16); color:#eafaff; background:rgba(3,6,17,.7); font:800 .6rem/1 monospace; text-align:center; }
.mission-feed { position:relative; z-index:3; align-self:stretch; display:flex; flex-direction:column; justify-content:center; gap:9px; padding:35px; border-left:1px solid rgba(255,255,255,.09); background:rgba(3,5,13,.53); backdrop-filter:blur(12px); }.mission-feed>p { margin:0 0 10px; color:#728097; font:700 .61rem/1 monospace; letter-spacing:.17em; }.archive-card { display:grid; grid-template-columns:28px 1fr; padding:17px; border:1px solid rgba(255,255,255,.1); color:#aeb9cb; background:rgba(7,11,26,.72); text-align:left; cursor:pointer; }.archive-card:hover,.archive-card.active { color:#fff; border-color:rgba(102,232,255,.5); background:rgba(14,32,55,.82); }.archive-card span { grid-row:1/3; color:var(--hud); font:700 .65rem/1 monospace; }.archive-card b { font-size:.73rem; letter-spacing:.05em; text-transform:uppercase; }.archive-card small { margin-top:4px; color:#7f8ba1; font-size:.62rem; }
.pause-panel,.result-panel { position:absolute; z-index:30; inset:0; display:grid; place-items:center; background:rgba(1,2,7,.76); backdrop-filter:blur(12px); }.pause-panel[hidden],.result-panel[hidden] { display:none; }.pause-panel>div,.result-panel>div { min-width:min(90vw,430px); padding:45px; border:1px solid rgba(102,232,255,.3); background:linear-gradient(145deg,rgba(11,21,43,.95),rgba(3,5,13,.98)); text-align:center; }.pause-panel p,.result-panel p { color:var(--hud); font:800 .65rem/1 monospace; letter-spacing:.2em; }.pause-panel h2,.result-panel h2 { font-size:2.4rem; letter-spacing:-.04em; }.pause-panel button,.result-panel button,.result-panel a { display:block; width:100%; margin-top:12px; padding:14px; border:1px solid rgba(102,232,255,.5); color:#07101b; background:var(--hud); font-weight:900; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; }.result-panel a { color:#c8d5e7; background:transparent; }.result-panel strong { display:block; font:900 3.2rem/1 monospace; }.result-panel span { color:#718098; font:.65rem/1 monospace; letter-spacing:.15em; }
.game-notice { position:absolute; z-index:14; left:50%; top:26%; transform:translate(-50%,-15px); padding:10px 18px; border-block:1px solid rgba(102,232,255,.35); color:#e7fbff; background:rgba(3,8,18,.72); font:800 .7rem/1 monospace; letter-spacing:.18em; opacity:0; pointer-events:none; }.game-notice.show { animation:notice 2.3s ease; }
@keyframes notice { 0%{opacity:0;transform:translate(-50%,-15px)} 18%,70%{opacity:1;transform:translate(-50%,0)} 100%{opacity:0;transform:translate(-50%,15px)} } @keyframes gamePulse { 50%{opacity:.35} }
@media(max-width:800px){.firework-game-page.admin-bar .game-shell{height:calc(100svh - 46px)}.game-topbar{grid-template-columns:1fr auto;height:66px;padding:0 14px}.mission-label{display:none}.game-brand span{display:none}.game-actions button{display:none}.game-lobby{inset:66px 0 0;grid-template-columns:1fr}.mission-feed{display:none}.lobby-content{padding:28px 22px}.lobby-content h1{font-size:clamp(3.4rem,17vw,6rem)}.game-hud{inset:76px 10px auto}.hud-left{display:none}.hud-right{margin-left:auto;gap:15px}.game-chrome{inset:66px 8px 8px}.control-grid{max-width:330px}.crosshair{display:none}.match-clock{right:12px;top:145px}.ability-stack{right:11px}.ability-stack button{width:50px;height:50px}.boost-control{left:12px;width:56px;height:56px}.ship-bars{width:170px}.weapon-count{min-width:55px}.flight-telemetry{bottom:10px}}
@media(prefers-reduced-motion:reduce){.online-dot{animation:none}}