/* ===================================================================== game-hud.css — combat HUD instruments that take over the side rails while body.cleared is set. Matches the existing deck-panels.css visual language: cyan borders, dark glass panels, scanlines, subtle glow. ===================================================================== */ /* HUD scale — set on by game-hud.js based on viewport width so the rails read the same on a 1920 monitor and a 4K/32" display. We DON'T use transform: scale here (that would blow the rail's vertical extent past the viewport). Instead we scale the rail's WIDTH and the typography inside the panels — layout positions stay anchored to viewport edges. */ :root{ --gh-scale:1; } body.cleared .cs-deck-rail{ width:calc(280px * var(--gh-scale)); font-size:calc(11px * var(--gh-scale)); } body.cleared .cs-deck-rail .gh-panel{ font-size:calc(11px * var(--gh-scale)); padding:calc(10px * var(--gh-scale)) calc(12px * var(--gh-scale)) calc(12px * var(--gh-scale)); margin-bottom:calc(12px * var(--gh-scale)); } body.cleared .cs-deck-rail .gh-big{ font-size:calc(24px * var(--gh-scale)); } body.cleared .cs-deck-rail .gh-row, body.cleared .cs-deck-rail .gh-bank, body.cleared .cs-deck-rail .gh-bank-b-row{ font-size:calc(10.5px * var(--gh-scale)); } body.cleared .cs-deck-rail .gh-head{ font-size:calc(9.5px * var(--gh-scale)); } body.cleared .gh-radarbar{ width:calc(48vw * var(--gh-scale)); max-width:calc(820px * var(--gh-scale)); font-size:calc(11px * var(--gh-scale)); } /* Hide the regular live-data panels while in game mode so the rails turn into combat instruments. The .cs-deck-rail itself stays visible. */ body.cleared .cs-deck-rail .cs-deck-banner, body.cleared .cs-deck-rail > .hud-panel{ display:none; } /* Hide game panels by default — they only appear when cleared mode is on. */ .gh-panel{ display:none; } body.cleared .cs-deck-rail .gh-panel{ display:block; } /* ----- panel base — mirrors .hud-panel from deck-panels.css ----- */ .gh-panel{ position:relative; width:100%; margin-bottom:12px; padding:10px 12px 12px; background:linear-gradient(180deg, rgba(2,6,23,.82), rgba(2,6,23,.55)); border:1.5px solid rgba(56,189,248,.55); border-radius:6px; -webkit-backdrop-filter:blur(8px) saturate(140%); backdrop-filter:blur(8px) saturate(140%); box-shadow: inset 0 0 0 1px rgba(2,6,23,.45), inset 0 1px 0 rgba(148,163,184,.06), 0 0 14px rgba(34,211,238,.14), 0 4px 12px rgba(0,0,0,.38); color:#cfe; font-family:'Space Grotesk','Inter',sans-serif; pointer-events:auto; overflow:hidden; } .gh-panel::before, .gh-panel::after{ content:""; position:absolute; width:8px; height:8px; border:1px solid rgba(56,189,248,.6); pointer-events:none; } .gh-panel::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; } .gh-panel::after { bottom:-1px; right:-1px; border-left:0; border-top:0; } .gh-panel.is-pulsing{ animation: ghPanelPulse 1.4s ease-out 1; } @keyframes ghPanelPulse{ 0% { box-shadow: 0 0 0 1px rgba(34,211,238,1), 0 0 24px rgba(34,211,238,.7), inset 0 0 18px rgba(34,211,238,.25); } 100% { box-shadow: inset 0 0 0 1px rgba(2,6,23,.45), inset 0 1px 0 rgba(148,163,184,.06), 0 0 14px rgba(34,211,238,.14), 0 4px 12px rgba(0,0,0,.38); } } .gh-panel.is-pulsing .gh-wipe{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, transparent 0%, rgba(34,211,238,.35) 50%, transparent 100%); animation: ghWipe 1.1s ease-out 1; } @keyframes ghWipe{ 0% { transform:translateX(-100%); opacity:0; } 20% { opacity:1; } 100% { transform:translateX(100%); opacity:0; } } .gh-head{ display:flex; align-items:center; gap:8px; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:#dbe6f5; font-weight:600; padding-bottom:6px; margin-bottom:7px; border-bottom:1px solid rgba(56,189,248,.18); } .gh-led{ width:6px; height:6px; border-radius:50%; background:#22d3ee; box-shadow:0 0 5px #22d3ee; animation: ghLed 3.1s ease-in-out infinite; } .gh-led.warn{ background:#ffd87a; box-shadow:0 0 5px #ffd87a; } .gh-led.bad { background:#f97316; box-shadow:0 0 5px #f97316; } .gh-led.ok { background:#4ade80; box-shadow:0 0 5px #4ade80; } @keyframes ghLed{ 0%,100%{opacity:.55} 50%{opacity:1} } .gh-rule{ flex:1; height:1px; background:linear-gradient(90deg, rgba(56,189,248,.45), transparent); } .gh-stat{ font-size:9px; letter-spacing:.2em; color:#7dd3e0; } .gh-row{ display:flex; justify-content:space-between; align-items:center; font-size:10.5px; letter-spacing:.08em; padding:3px 0; color:#9fb6cd; } .gh-row .k{ text-transform:uppercase; font-size:9.5px; letter-spacing:.16em; color:#7d92ad; } .gh-row .v{ color:#dbe6f5; font-weight:600; font-variant-numeric:tabular-nums; } .gh-row .v.warn{ color:#ffd87a; } .gh-row .v.bad { color:#f97316; } .gh-row .v.ok { color:#4ade80; } .gh-bar{ position:relative; height:6px; border-radius:3px; background:rgba(2,6,23,.7); border:1px solid rgba(56,189,248,.22); overflow:hidden; margin:3px 0 6px; } .gh-bar > i{ display:block; height:100%; width:0%; background:linear-gradient(90deg, #22d3ee, #38bdf8); box-shadow:0 0 8px rgba(34,211,238,.55); transition:width .35s cubic-bezier(.2,.8,.25,1); } .gh-bar.warn > i{ background:linear-gradient(90deg,#ffd87a,#f59e0b); box-shadow:0 0 8px rgba(245,158,11,.55); } .gh-bar.bad > i{ background:linear-gradient(90deg,#f97316,#dc2626); box-shadow:0 0 10px rgba(220,38,38,.6); } /* big number */ .gh-big{ font-family:'Space Grotesk','Inter',sans-serif; font-size:24px; font-weight:700; letter-spacing:.04em; color:#dbe6f5; text-shadow:0 0 12px rgba(34,211,238,.45); font-variant-numeric:tabular-nums; } .gh-mini{ font-size:9px; letter-spacing:.2em; color:#7d92ad; text-transform:uppercase; } /* ----- photon banks ----- */ .gh-banks{ display:flex; flex-direction:column; gap:6px; margin-top:4px; } .gh-bank{ display:flex; align-items:center; gap:8px; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:#7d92ad; } .gh-bank .lbl{ width:46px; color:#9fb6cd; } .gh-bank .cells{ flex:1; display:flex; gap:3px; height:8px; } .gh-bank .cells > i{ flex:1; background:rgba(2,6,23,.7); border:1px solid rgba(56,189,248,.25); box-shadow:inset 0 0 4px rgba(34,211,238,.06); } .gh-bank.charged .cells > i{ background:linear-gradient(180deg,#5dd5e8,#22d3ee); border-color:rgba(34,211,238,.7); box-shadow:0 0 6px rgba(34,211,238,.55), inset 0 0 4px rgba(255,255,255,.25); } .gh-bank.firing .cells > i{ background:rgba(2,6,23,.85); border-color:rgba(56,189,248,.18); box-shadow:none; } .gh-bank .stat{ width:54px; text-align:right; font-weight:600; color:#9fb6cd; } .gh-bank.charged .stat{ color:#5dd5e8; } .gh-bank.firing .stat{ color:#f97316; } /* ----- Bank B (heat + overcharge) ----- */ .gh-bank-b{ display:flex; flex-direction:column; gap:5px; padding:6px 0 2px; margin-top:2px; border-top:1px dashed rgba(56,189,248,.18); } .gh-bank-b-row{ display:flex; align-items:center; gap:8px; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:#7d92ad; } .gh-bank-b-row .lbl{ width:62px; color:#9fb6cd; } .gh-bank-b-row .stat{ width:78px; text-align:right; font-weight:600; font-size:9px; color:#9fb6cd; } .gh-bank-b-row .stat.ok { color:#4ade80; } .gh-bank-b-row .stat.warn{ color:#ffd87a; } .gh-bank-b-row .stat.bad { color:#f97316; text-shadow:0 0 6px rgba(220,38,38,.5); } .gh-heat, .gh-over{ flex:1; position:relative; height:8px; background:rgba(2,6,23,.7); border:1px solid rgba(56,189,248,.25); border-radius:3px; overflow:hidden; } .gh-heat > i{ display:block; height:100%; width:0%; background:linear-gradient(90deg, #4ade80 0%, #ffd87a 60%, #f97316 90%, #dc2626 100%); box-shadow:0 0 8px rgba(245,158,11,.45); transition:width .12s linear; } .gh-heat.warn{ border-color:rgba(245,158,11,.5); } .gh-heat.bad{ border-color:rgba(220,38,38,.7); animation:ghHeatThrob .55s ease-in-out infinite; } .gh-heat.locked{ border-color:rgba(220,38,38,.95); animation:ghHeatLock .35s steps(2) infinite; } .gh-heat.locked > i{ background:#dc2626; box-shadow:0 0 14px rgba(220,38,38,.7); } @keyframes ghHeatThrob{ 0%,100%{ box-shadow:0 0 0 1px rgba(220,38,38,.0), inset 0 0 4px rgba(220,38,38,.0); } 50% { box-shadow:0 0 6px rgba(220,38,38,.55), inset 0 0 6px rgba(220,38,38,.45); } } @keyframes ghHeatLock{ 0%,100%{ background:rgba(2,6,23,.7); } 50% { background:rgba(120,8,8,.5); } } .gh-over > i{ display:block; height:100%; width:0%; background:linear-gradient(90deg, #38bdf8, #22d3ee 50%, #a855f7); box-shadow:0 0 8px rgba(168,85,247,.45); transition:width .25s cubic-bezier(.2,.85,.25,1); } .gh-over.full{ border-color:rgba(168,85,247,.85); animation:ghOverPulse .9s ease-in-out infinite; } .gh-over.active > i{ background:linear-gradient(90deg, #c084fc, #f0abfc, #a855f7); box-shadow:0 0 12px rgba(217,70,239,.6); } @keyframes ghOverPulse{ 0%,100%{ box-shadow:0 0 4px rgba(168,85,247,.45); } 50% { box-shadow:0 0 14px rgba(217,70,239,.85), inset 0 0 8px rgba(217,70,239,.45); } } /* Banks panel state — overcharge / overheat affect the panel border + LED. */ .gh-banks-panel.overcharge{ border-color:rgba(168,85,247,.7); box-shadow: inset 0 0 0 1px rgba(2,6,23,.45), 0 0 16px rgba(217,70,239,.45), 0 4px 12px rgba(0,0,0,.38); } .gh-banks-panel.overcharge .gh-led{ background:#c084fc; box-shadow:0 0 8px #c084fc; } .gh-banks-panel.overheated{ border-color:rgba(220,38,38,.75); box-shadow: inset 0 0 0 1px rgba(2,6,23,.45), 0 0 16px rgba(220,38,38,.55), 0 4px 12px rgba(0,0,0,.38); } .gh-banks-panel.overheated .gh-led{ background:#dc2626; box-shadow:0 0 8px #dc2626; } .gh-banks-panel .banks-armed{ font-weight:700; } /* ----- target lock ----- */ .gh-lock-state{ display:flex; align-items:center; justify-content:space-between; padding:4px 0; } .gh-lock-state .word{ font-size:11px; letter-spacing:.2em; color:#9fb6cd; } .gh-lock-state.searching .word{ color:#7d92ad; } .gh-lock-state.acquiring .word{ color:#ffd87a; text-shadow:0 0 6px rgba(245,158,11,.4); } .gh-lock-state.locked .word{ color:#4ade80; text-shadow:0 0 8px rgba(74,222,128,.5); } .gh-lock-tgt{ font-size:9.5px; letter-spacing:.2em; color:#5dd5e8; } .gh-torp{ margin-top:6px; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:#9fb6cd; } .gh-torp.ready { color:#4ade80; } .gh-torp.fired { color:#ffd87a; } .gh-torp.reloading{ color:#f97316; } /* The cyan lock box that floats over the target enemy. */ .gh-lockbox{ position:fixed; pointer-events:none; z-index:9990; width:80px; height:80px; transform:translate(-50%,-50%); opacity:0; transition:opacity .15s linear; } .gh-lockbox.show{ opacity:1; } .gh-lockbox .corner{ position:absolute; width:14px; height:14px; border:1.5px solid rgba(56,189,248,.85); filter:drop-shadow(0 0 6px rgba(34,211,238,.55)); } .gh-lockbox .c-tl{ top:0; left:0; border-right:0; border-bottom:0; } .gh-lockbox .c-tr{ top:0; right:0; border-left:0; border-bottom:0; } .gh-lockbox .c-bl{ bottom:0; left:0; border-right:0; border-top:0; } .gh-lockbox .c-br{ bottom:0; right:0; border-left:0; border-top:0; } .gh-lockbox.locked .corner{ border-color:#4ade80; filter:drop-shadow(0 0 8px rgba(74,222,128,.7)); } .gh-lockbox .ring{ position:absolute; inset:18%; border-radius:50%; border:1px dashed rgba(56,189,248,.4); animation: ghLockSpin 4s linear infinite; } .gh-lockbox.locked .ring{ border-color:rgba(74,222,128,.7); border-style:solid; } @keyframes ghLockSpin{ to{ transform:rotate(360deg); } } .gh-lockbox .lbl{ position:absolute; left:50%; bottom:-18px; transform:translateX(-50%); font:600 9px/1 'Space Grotesk','Inter',sans-serif; letter-spacing:.22em; color:#5dd5e8; white-space:nowrap; } .gh-lockbox.locked .lbl{ color:#4ade80; } .gh-lockbox .progress{ position:absolute; left:0; right:0; top:-10px; height:2px; background:rgba(56,189,248,.18); } .gh-lockbox .progress > i{ display:block; height:100%; width:0%; background:#5dd5e8; box-shadow:0 0 6px #22d3ee; } .gh-lockbox.locked .progress > i{ background:#4ade80; box-shadow:0 0 6px #4ade80; } /* ----- threat radar (bottom-bar overlay) ----- */ .gh-radarbar{ display:none; position:fixed; left:50%; bottom:14px; transform:translateX(-50%); width:48vw; max-width:820px; z-index:7; margin-bottom:0; padding:5px 10px 6px; } body.cleared .gh-radarbar{ display:block; } .gh-radarbar .gh-head{ padding-bottom:3px; margin-bottom:3px; font-size:9px; } .gh-radar{ position:relative; height:11px; margin-top:2px; background: radial-gradient(ellipse at 50% 100%, rgba(34,211,238,.10) 0%, transparent 70%), linear-gradient(90deg, rgba(2,6,23,.85), rgba(2,6,23,.45), rgba(2,6,23,.85)); border:1px solid rgba(56,189,248,.28); border-radius:4px; overflow:hidden; } .gh-radar::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:linear-gradient(90deg, transparent, rgba(56,189,248,.55), transparent); } .gh-radar::after{ content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:rgba(56,189,248,.6); box-shadow:0 0 6px rgba(34,211,238,.55); } .gh-radar .tick{ position:absolute; top:0; bottom:0; width:1px; background:rgba(56,189,248,.18); } .gh-radar .center0{ display:none; } .gh-radarbar .gh-radar-readout{ display:flex; justify-content:space-between; font:600 7.5px/1 'Space Grotesk','Inter',sans-serif; letter-spacing:.18em; color:#7d92ad; text-transform:uppercase; padding:2px 1px 0; } /* Animated horizontal scan line. Strong+continuous when idle, faint when tracking (so the blips read clearly). */ .gh-radar-sweep{ position:absolute; top:0; bottom:0; left:0; width:32%; background:linear-gradient(90deg, transparent 0%, rgba(34,211,238,.05) 30%, rgba(34,211,238,.45) 75%, rgba(125,211,224,.85) 100%); border-right:1px solid rgba(34,211,238,.85); box-shadow:0 0 18px rgba(34,211,238,.55); pointer-events:none; animation:ghRadarSweep 2.4s linear infinite; opacity:.45; } .gh-radar.idle .gh-radar-sweep{ opacity:1; animation-duration:1.8s; } @keyframes ghRadarSweep{ 0% { transform:translateX(-100%); } 100% { transform:translateX(312%); } } /* Soft radial pings when idle — faint pulses spreading from center. */ .gh-radar.idle::before{ background:linear-gradient(90deg, transparent, rgba(56,189,248,.85), transparent); animation:ghRadarPulse 2.8s ease-out infinite; } @keyframes ghRadarPulse{ 0% { opacity:.25; transform:scaleX(.2); } 60% { opacity:.6; transform:scaleX(1); } 100% { opacity:0; transform:scaleX(1); } } .gh-stat.radar-state.active{ color:#ffd87a; } .gh-blip{ position:absolute; top:50%; transform:translate(-50%,-50%); width:5px; height:5px; border-radius:50%; background:#22d3ee; box-shadow:0 0 4px #22d3ee, 0 0 8px rgba(34,211,238,.5); pointer-events:none; } .gh-blip.warn{ background:#ffd87a; box-shadow:0 0 6px #ffd87a, 0 0 12px rgba(245,158,11,.55); } .gh-blip.bad { background:#f97316; box-shadow:0 0 8px #f97316, 0 0 16px rgba(220,38,38,.65); } .gh-blip.locked{ background:#4ade80; box-shadow:0 0 8px #4ade80, 0 0 14px rgba(74,222,128,.6); } .gh-radar-readout{ display:flex; justify-content:space-between; font:600 8.5px/1 'Space Grotesk','Inter',sans-serif; letter-spacing:.2em; color:#7d92ad; text-transform:uppercase; padding:5px 2px 0; } /* ----- floating score popup ----- */ .gh-score-pop{ position:fixed; pointer-events:none; z-index:9991; transform:translate(-50%,-50%); font-family:'Space Grotesk','Inter',sans-serif; text-align:center; text-shadow:0 0 10px rgba(34,211,238,.55), 0 0 18px rgba(34,211,238,.25); animation: ghScorePop 1.4s cubic-bezier(.2,.8,.2,1) forwards; } .gh-score-pop .pts{ display:block; font-size:22px; font-weight:700; color:#fff; letter-spacing:.05em; } .gh-score-pop .tag{ display:block; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:#5dd5e8; margin-top:1px; } .gh-score-pop .streak{ display:block; font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:#ffd87a; } .gh-score-pop.fast .pts{ color:#ffd87a; text-shadow:0 0 12px rgba(245,158,11,.7); } @keyframes ghScorePop{ 0% { opacity:0; transform:translate(-50%,-50%) scale(.7); } 15% { opacity:1; transform:translate(-50%,-65%) scale(1.1); } 100% { opacity:0; transform:translate(-50%,-160%) scale(1); } } /* ----- torpedo bolt ----- */ .gh-torpedo{ position:fixed; left:0; top:0; pointer-events:none; z-index:9; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; background:radial-gradient(circle, #f0fff5 0%, #4ade80 30%, rgba(34,197,94,.7) 60%, rgba(34,197,94,0) 100%); box-shadow: 0 0 10px #4ade80, 0 0 22px rgba(34,197,94,.65), 0 0 40px rgba(34,197,94,.35); will-change:transform; } .gh-torpedo::after{ content:""; position:absolute; left:50%; top:50%; width:34px; height:4px; transform:translate(-100%,-50%); background:linear-gradient(90deg, rgba(74,222,128,0), rgba(74,222,128,.55)); border-radius:2px; } /* ===================================================================== DAMAGE FX — shield impact, edge indicators, vignette, glitch, wobble ===================================================================== */ .gh-dmg-host{ position:fixed; inset:0; pointer-events:none; z-index:8; overflow:hidden; } /* Force-field shield canvas — fills the viewport, drawn into by JS only while a hit is active. Sits behind the edge indicators / vignette so they still glow on top of the shield wash. */ .gh-shield-canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; mix-blend-mode:screen; } /* Edge indicators — thin glowing arcs, NEVER thick bars. */ .gh-dmg-edge{ position:absolute; pointer-events:none; opacity:0; --tint: 56,189,248; --tint2: 34,211,238; } .gh-dmg-edge.sev-mid{ --tint:245,158,11; --tint2:251,191,36; } .gh-dmg-edge.sev-hi { --tint:239,68,68; --tint2:251,113,133; } .gh-dmg-top, .gh-dmg-bottom{ left:0; right:0; height:32px; } .gh-dmg-left, .gh-dmg-right{ top:0; bottom:0; width:32px; } .gh-dmg-top{ top:0; background:linear-gradient(180deg, rgba(var(--tint),.55) 0%, rgba(var(--tint2),.18) 35%, transparent 100%); border-bottom:0; box-shadow:inset 0 1px 0 rgba(var(--tint2),.7); } .gh-dmg-bottom{ bottom:0; background:linear-gradient(0deg, rgba(var(--tint),.55) 0%, rgba(var(--tint2),.18) 35%, transparent 100%); box-shadow:inset 0 -1px 0 rgba(var(--tint2),.7); } .gh-dmg-left{ left:0; background:linear-gradient(90deg, rgba(var(--tint),.55) 0%, rgba(var(--tint2),.18) 35%, transparent 100%); box-shadow:inset 1px 0 0 rgba(var(--tint2),.7); } .gh-dmg-right{ right:0; background:linear-gradient(-90deg, rgba(var(--tint),.55) 0%, rgba(var(--tint2),.18) 35%, transparent 100%); box-shadow:inset -1px 0 0 rgba(var(--tint2),.7); } .gh-dmg-edge.go{ animation:ghDmgEdge .38s cubic-bezier(.3,.9,.4,1) forwards; } @keyframes ghDmgEdge{ 0% { opacity:0; filter:blur(2px); } 18% { opacity:.95; filter:blur(0); } 60% { opacity:.5; filter:blur(.4px); } 100% { opacity:0; filter:blur(.8px); } } /* Subtle full-screen energy surge — vignette tightens + tiny brightness pulse. Sits under the edges so the edges still glow on top. */ .gh-dmg-vignette{ position:absolute; inset:0; pointer-events:none; opacity:0; background: radial-gradient(ellipse at center, transparent 35%, rgba(56,189,248,.08) 70%, rgba(2,6,23,.55) 100%); mix-blend-mode:screen; } .gh-dmg-vignette.sev-mid{ background:radial-gradient(ellipse at center, transparent 30%, rgba(245,158,11,.10) 70%, rgba(2,6,23,.6) 100%); } .gh-dmg-vignette.sev-hi{ background:radial-gradient(ellipse at center, transparent 25%, rgba(239,68,68,.14) 70%, rgba(2,6,23,.65) 100%); } .gh-dmg-vignette.go{ animation:ghDmgVignette .22s ease-out forwards; } @keyframes ghDmgVignette{ 0% { opacity:0; } 35% { opacity:1; } 100% { opacity:0; } } /* Panel glitch — quick flicker + tiny shift. Used on every game panel for ~260ms when damage lands. */ .gh-glitch{ animation:ghPanelGlitch .26s steps(3) 1; } @keyframes ghPanelGlitch{ 0% { transform:translate(0,0); filter:none; } 20% { transform:translate(.6px,-.4px); filter:hue-rotate(-12deg) brightness(1.15); } 40% { transform:translate(-.5px,.3px); filter:hue-rotate(8deg) brightness(.92); } 70% { transform:translate(.3px,.5px); filter:none; } 100% { transform:translate(0,0); filter:none; } } /* Reticle wobble — tiny separation/jitter on the cursor ring + dot. */ .cursor-ring.gh-shake{ animation:ghReticleWobble .32s ease-out 1; } .cursor-dot.gh-shake { animation:ghReticleWobbleDot .32s ease-out 1; } @keyframes ghReticleWobble{ 0% { transform:translate(-50%,-50%) scale(1); } 20% { transform:translate(calc(-50% + 3px), calc(-50% - 2px)) scale(1.18); } 45% { transform:translate(calc(-50% - 2px), calc(-50% + 3px)) scale(1.05); } 75% { transform:translate(calc(-50% + 1px), calc(-50% + 1px)) scale(1.02); } 100% { transform:translate(-50%,-50%) scale(1); } } @keyframes ghReticleWobbleDot{ 0% { transform:translate(-50%,-50%); } 25% { transform:translate(calc(-50% - 2px), calc(-50% + 2px)); } 60% { transform:translate(calc(-50% + 2px), calc(-50% - 1px)); } 100% { transform:translate(-50%,-50%); } } /* Hull panel — extended states for HIGH and CRITICAL. */ .gh-bar.crit{ border-color:rgba(239,68,68,.85); } .gh-bar.crit > i{ background:linear-gradient(90deg,#dc2626,#7f1d1d); box-shadow:0 0 12px rgba(239,68,68,.7); } .gh-row .v.crit, .gh-stat.crit, .gh-led.crit{ color:#fecaca; } .gh-led.crit{ background:#dc2626; box-shadow:0 0 8px #dc2626; animation:ghLedCrit .8s ease-in-out infinite; } @keyframes ghLedCrit{ 0%,100%{ opacity:.65 } 50%{ opacity:1 } } .gh-panel.warn{ border-color:rgba(245,158,11,.55); box-shadow: inset 0 0 0 1px rgba(2,6,23,.45), 0 0 14px rgba(245,158,11,.30), 0 4px 12px rgba(0,0,0,.38); } .gh-panel.bad{ border-color:rgba(239,68,68,.6); box-shadow: inset 0 0 0 1px rgba(2,6,23,.45), 0 0 16px rgba(239,68,68,.35), 0 4px 12px rgba(0,0,0,.38); } .gh-panel.crit{ border-color:rgba(239,68,68,.95); box-shadow: inset 0 0 0 1px rgba(2,6,23,.45), 0 0 20px rgba(239,68,68,.55), 0 0 40px rgba(239,68,68,.18), 0 4px 12px rgba(0,0,0,.38); animation:ghPanelCritThrob 1.1s ease-in-out infinite; } @keyframes ghPanelCritThrob{ 0%,100%{ box-shadow: inset 0 0 0 1px rgba(2,6,23,.45), 0 0 20px rgba(239,68,68,.55), 0 0 40px rgba(239,68,68,.18), 0 4px 12px rgba(0,0,0,.38); } 50%{ box-shadow: inset 0 0 0 1px rgba(2,6,23,.45), 0 0 28px rgba(239,68,68,.85), 0 0 56px rgba(239,68,68,.35), 0 4px 12px rgba(0,0,0,.38); } } .gh-sysmsg{ margin-top:6px; padding:5px 7px; font:600 9px/1.2 'Space Grotesk','Inter',sans-serif; letter-spacing:.18em; text-transform:uppercase; color:#7d92ad; background:rgba(2,6,23,.55); border:1px solid rgba(56,189,248,.18); border-radius:3px; text-align:center; } .gh-sysmsg.alert{ color:#fca5a5; border-color:rgba(239,68,68,.55); box-shadow:0 0 10px rgba(239,68,68,.25); animation:ghSysAlert .35s steps(2) 2; } @keyframes ghSysAlert{ 0%,100%{ background:rgba(2,6,23,.55); } 50% { background:rgba(120,8,8,.45); } } /* ----- mobile: hide game HUD on small viewports — combat doesn't fit ----- */ @media (max-width: 1200px){ body.cleared .cs-deck-rail{ display:none; } body.cleared .gh-radarbar { display:none; } }