/* ═══════════════════════════════════════════════════════════════
REPO DEFENSE — self-contained easter-egg game styles
Drop-in embed for any page (3 pieces):
1.
2. (end of , or defer)
3. Any trigger element with a [data-game] attribute
The game modal markup is injected by the JS — nothing else needed.
Deep link: #defense opens the game directly (trigger optional).
Host-page expectations (graceful without them):
- Font Awesome 5 for icons (close ✕, GitHub earth, speaker)
- Orbitron + JetBrains Mono fonts (system fallbacks otherwise)
Theming: every rule reads the --rd-* map below, which inherits the
gasa theme tokens when present and falls back to standalone values.
repo-defense.js reads the same --rd-* tokens for canvas colors.
═══════════════════════════════════════════════════════════════ */
:root {
--rd-accent: var(--cyan, #2de2ff);
--rd-accent-glow: var(--cyan-glow, rgba(45, 226, 255, 0.45));
--rd-alert: var(--alert, #ff2d55);
--rd-alert-glow: var(--alert-glow, rgba(255, 45, 85, 0.45));
--rd-good: var(--green, #3bf0a0);
--rd-good-glow: var(--green-glow, rgba(59, 240, 160, 0.4));
--rd-yellow: var(--yellow, #ffe14d);
--rd-yellow-glow: var(--yellow-glow, rgba(255, 225, 77, 0.5));
--rd-orange: var(--orange, #ff7a1f);
--rd-orange-glow: var(--orange-glow, rgba(255, 122, 31, 0.5));
--rd-line: var(--line-bright, #2c416f);
--rd-bg: var(--space-900, #04050c);
--rd-surface: var(--space-700, #0e1428);
--rd-text: var(--text, #e9eefc);
--rd-text-soft: var(--text-soft, #b9c6e6);
--rd-text-muted: var(--text-muted, #7d8cb0);
--rd-text-faint: var(--text-faint, #51618a);
--rd-font-display: var(--font-display, "Orbitron", system-ui, sans-serif);
--rd-font-mono: var(--font-mono, "JetBrains Mono", "SFMono-Regular", Menlo, monospace);
--rd-radius-sm: var(--radius-sm, 4px);
--rd-radius-lg: var(--radius-lg, 14px);
--rd-shadow: var(--shadow-panel, 0 18px 50px -18px rgba(0, 0, 0, 0.8));
--rd-gap-sm: var(--space-sm, 0.75rem);
--rd-gap-md: var(--space-md, 1rem);
--rd-gap-lg: var(--space-lg, 1.5rem);
}
/* ── Trigger (default look — host pages may restyle) ──────────── */
.game-trigger {
font: inherit;
letter-spacing: inherit;
padding: 0 0.55em;
background: transparent;
border: 1px solid rgba(59, 240, 160, 0.4);
border-radius: var(--rd-radius-sm);
color: var(--rd-good);
cursor: pointer;
text-shadow: 0 0 8px var(--rd-good-glow);
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.game-trigger:hover {
border-color: var(--rd-good);
background: rgba(59, 240, 160, 0.08);
box-shadow: 0 0 16px var(--rd-good-glow);
}
@media (prefers-reduced-motion: no-preference) {
.game-trigger { animation: game-trigger-pulse 2.4s ease-in-out infinite; }
.game-trigger:hover { animation: none; }
}
@keyframes game-trigger-pulse {
0%, 100% { box-shadow: 0 0 0 rgba(59, 240, 160, 0); }
50% { box-shadow: 0 0 14px var(--rd-good-glow); }
}
/* Idle when covered by the game modal or the window is unfocused */
body.game-open .game-trigger,
body.page-idle .game-trigger {
animation-play-state: paused;
}
/* ── Modal shell ──────────────────────────────────────────────── */
.game-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.game-modal[hidden] { display: none; }
.game-backdrop {
position: absolute;
inset: 0;
/* No backdrop-filter: blurring a continuously-animating page behind the
modal re-blurs the whole viewport every frame (major CPU). A heavier
dim reads nearly the same at a fraction of the cost. */
background: rgba(2, 4, 10, 0.9);
}
.game-frame {
position: relative;
width: 80vw;
height: 80vh;
background: var(--rd-bg);
border: 1px solid var(--rd-line);
border-radius: var(--rd-radius-lg);
overflow: hidden;
box-shadow: var(--rd-shadow), 0 0 40px -10px var(--rd-accent-glow);
animation: game-rise 0.25s ease both;
}
@keyframes game-rise {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.game-close {
position: absolute;
top: 10px;
right: 10px;
z-index: 6;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--rd-surface);
border: 1px solid var(--rd-line);
color: var(--rd-text);
cursor: pointer;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
.game-close:hover { border-color: var(--rd-accent); color: var(--rd-accent); }
/* ── Radar backdrop (rings + crosshair + rotating sweep) ──────── */
.game-radar-bg {
position: absolute;
inset: 0;
pointer-events: none;
background:
repeating-radial-gradient(circle at 50% 50%, transparent 0 64px, rgba(45, 226, 255, 0.07) 64px 65px),
linear-gradient(rgba(45, 226, 255, 0.09), rgba(45, 226, 255, 0.09)) center / 1px 100% no-repeat,
linear-gradient(rgba(45, 226, 255, 0.09), rgba(45, 226, 255, 0.09)) center / 100% 1px no-repeat,
radial-gradient(circle at 50% 50%, rgba(45, 226, 255, 0.06), transparent 70%);
}
.game-sweep {
position: absolute;
left: 50%;
top: 50%;
/* Sized to just cover the frame diagonal (was 160vmax — a 2×-oversized
GPU texture that the compositor rotated every frame for nothing) */
width: 115vmax;
height: 115vmax;
margin: -57.5vmax 0 0 -57.5vmax;
border-radius: 50%;
pointer-events: none;
opacity: 0.45;
background: conic-gradient(
from 0deg,
transparent 0deg,
transparent 250deg,
rgba(45, 226, 255, 0.02) 250deg,
rgba(45, 226, 255, 0.16) 358deg,
rgba(45, 226, 255, 0.38) 360deg
);
}
@media (prefers-reduced-motion: no-preference) {
.game-sweep { animation: game-sweep-spin 4.2s linear infinite; }
}
@keyframes game-sweep-spin { to { transform: rotate(360deg); } }
/* ── Play surface ─────────────────────────────────────────────── */
.game-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
touch-action: none; /* pointer events own the surface — no scroll/zoom */
cursor: crosshair;
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
.game-earth {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
font-size: 2.4rem;
color: var(--rd-text);
text-shadow: 0 0 18px var(--rd-accent-glow);
pointer-events: none;
}
/* ── HUD ──────────────────────────────────────────────────────── */
.game-hud {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 3;
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--rd-gap-sm) var(--rd-gap-md);
font-family: var(--rd-font-mono);
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--rd-text-muted);
pointer-events: none;
}
.game-score b {
color: var(--rd-good);
font-size: 0.95rem;
text-shadow: 0 0 10px var(--rd-good-glow);
}
.game-shield {
display: flex;
align-items: center;
gap: 7px;
margin-right: 48px; /* clear the close button */
}
.game-shield .pip {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--rd-good);
box-shadow: 0 0 8px var(--rd-good-glow);
transition: background 0.2s ease, opacity 0.2s ease;
}
.game-shield .pip.is-hit {
background: var(--rd-alert);
box-shadow: none;
opacity: 0.35;
}
/* ── Key legend + sound toggle ────────────────────────────────── */
.game-keys {
position: absolute;
bottom: 10px;
left: var(--rd-gap-md);
z-index: 3;
font-family: var(--rd-font-mono);
font-size: 0.68rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rd-text-faint);
pointer-events: none;
}
.game-audio {
position: absolute;
bottom: 10px;
right: 10px;
z-index: 6;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--rd-surface);
border: 1px solid var(--rd-line);
color: var(--rd-text-muted);
cursor: pointer;
font-size: 0.85rem;
display: flex;
align-items: center;
justify-content: center;
}
.game-audio:hover { border-color: var(--rd-accent); color: var(--rd-accent); }
.game-audio.is-muted { color: var(--rd-text-faint); }
/* ── Briefing (intro + pause) ─────────────────────────────────── */
.game-brief {
position: absolute;
inset: 0;
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--rd-gap-md);
text-align: center;
padding: var(--rd-gap-lg);
overflow-y: auto;
background: rgba(2, 4, 10, 0.7);
}
.game-brief[hidden] { display: none; }
.game-brief-title {
font-family: var(--rd-font-display);
font-weight: 900;
font-size: clamp(1.6rem, 4.5vw, 2.8rem);
letter-spacing: 0.14em;
color: var(--rd-accent);
text-shadow: 0 0 26px var(--rd-accent-glow);
}
.game-brief-info {
max-width: 580px;
display: flex;
flex-direction: column;
gap: var(--rd-gap-sm);
margin-top: var(--rd-gap-sm);
}
.game-brief-plot {
margin: 0;
color: var(--rd-text-soft);
font-size: 0.95rem;
line-height: 1.65;
}
.game-brief-rules {
list-style: none;
margin: 0;
padding: 0;
font-family: var(--rd-font-mono);
font-size: 0.76rem;
line-height: 2;
color: var(--rd-text-muted);
}
.game-brief-keys {
font-family: var(--rd-font-mono);
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rd-text-faint);
}
.dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 5px;
vertical-align: baseline;
}
.dot-yellow { background: var(--rd-yellow); box-shadow: 0 0 8px var(--rd-yellow-glow); }
.dot-orange { background: var(--rd-orange); box-shadow: 0 0 8px var(--rd-orange-glow); }
.dot-red { background: var(--rd-alert); box-shadow: 0 0 8px var(--rd-alert-glow); }
.dot-white { background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, 0.6); }
/* ── Game over ────────────────────────────────────────────────── */
.game-over {
position: absolute;
inset: 0;
z-index: 4;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--rd-gap-md);
text-align: center;
background: rgba(2, 4, 10, 0.55); /* dims the frozen radar behind it */
}
.game-over[hidden] { display: none; }
.game-over-title {
font-family: var(--rd-font-display);
font-weight: 900;
font-size: clamp(2.2rem, 7vw, 4.5rem);
letter-spacing: 0.14em;
color: var(--rd-alert);
text-shadow: 0 0 26px var(--rd-alert-glow);
}
.game-over-score {
font-family: var(--rd-font-mono);
font-size: 1.1rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--rd-text-soft);
}
.game-over-score b { color: var(--rd-good); text-shadow: 0 0 10px var(--rd-good-glow); }
.game-restart {
font-family: var(--rd-font-display);
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 0.22em;
text-transform: uppercase;
padding: 0.7em 1.4em;
background: transparent;
border: 1px solid var(--rd-accent);
border-radius: var(--rd-radius-sm);
color: var(--rd-accent);
cursor: pointer;
text-shadow: 0 0 10px var(--rd-accent-glow);
}
.game-restart:hover { background: rgba(45, 226, 255, 0.1); box-shadow: 0 0 18px var(--rd-accent-glow); }
@media (prefers-reduced-motion: no-preference) {
.game-restart { animation: game-restart-blink 1.6s ease-in-out infinite; }
.game-restart:hover { animation: none; }
}
@keyframes game-restart-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
/* ── Mobile: full screen, keyboard hints are moot ─────────────── */
@media (max-width: 768px) {
.game-frame {
width: 100vw;
height: 100dvh;
border: none;
border-radius: 0;
}
.game-keys { display: none; }
}