/*
WarGames UI Theme
Applies when has class "theme-wargames".
Keeps original styles intact by only overriding with a prefixed scope.
*/
html.theme-wargames {
/* Global palette (neon vector radar style) */
--wg-bg: #020614;
--wg-panel: rgba(2, 10, 24, 0.92);
--wg-panel-border: #1cc7ff;
--wg-cyan: #79e6ff;
--wg-cyan-strong: #44d6ff;
--wg-green: #7aff7a;
--wg-yellow: #ffe47a;
--wg-orange: #ff6a3d;
--wg-red: #ff4d57;
--wg-pink: #ff5ea1;
/* Continents outline (neon purple) used in mesh mode */
--wg-continents: #b07dff;
--wg-text: #d9f6ff;
--wg-dim: rgba(217, 246, 255, 0.7);
--wg-faint: rgba(217, 246, 255, 0.45);
--site-name-accent: var(--wg-pink);
}
/* Base look */
html.theme-wargames body {
background: var(--wg-bg);
color: var(--wg-text);
font-family: Consolas, "Courier New", ui-monospace, Menlo, Monaco, monospace;
letter-spacing: 0.02em;
}
/* CRT scanlines + glow vignette */
html.theme-wargames body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.55) 100%),
repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04) 1px, transparent 2px, transparent 3px);
mix-blend-mode: screen;
opacity: 0.35;
z-index: 1;
}
/* Layering note: keep default absolute/fixed positioning from main.css. */
html.theme-wargames #globeViz { z-index: 0; }
/* Panels */
html.theme-wargames #infoPanel,
html.theme-wargames .pinned-hover,
html.theme-wargames #hoverBox {
background: var(--wg-panel);
border: 1px solid var(--wg-panel-border);
box-shadow:
0 0 0 1px rgba(28, 199, 255, 0.18) inset,
0 0 18px rgba(28, 199, 255, 0.25);
}
/* Headings & labels */
html.theme-wargames #infoPanel h2 {
color: var(--site-name-accent);
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* Links */
html.theme-wargames a,
html.theme-wargames .cluster-item-name,
html.theme-wargames .pinned-hover a,
html.theme-wargames #hoverBox a {
color: var(--wg-cyan);
}
html.theme-wargames a:hover { color: #b6f0ff; }
/* Buttons: outline neon look */
html.theme-wargames .next-site-button,
html.theme-wargames #textFilterButton {
background: rgba(10, 24, 40, 0.5);
border: 1px solid var(--wg-cyan-strong);
color: var(--wg-text);
text-transform: none;
letter-spacing: 0.08em;
box-shadow: 0 0 12px rgba(68, 214, 255, 0.35);
}
html.theme-wargames .next-site-button:hover,
html.theme-wargames #textFilterButton:hover {
background: rgba(16, 40, 70, 0.6);
color: #e2fbff;
box-shadow: 0 0 16px rgba(68, 214, 255, 0.55);
}
/* Form elements */
html.theme-wargames #textFilterInput {
background: rgba(2, 12, 26, 0.6);
border: 1px solid rgba(28, 199, 255, 0.65);
color: var(--wg-text);
}
html.theme-wargames #textFilterInput::placeholder { color: var(--wg-faint); }
html.theme-wargames #textFilterInput:focus {
outline: none;
border-color: var(--wg-yellow);
box-shadow: 0 0 0 2px rgba(255, 228, 122, 0.25);
}
html.theme-wargames #textFilterClear { color: var(--wg-dim); }
html.theme-wargames #textFilterClear:hover { color: var(--wg-yellow); }
html.theme-wargames .text-filter-wrapper.has-value #textFilterInput {
border-color: var(--wg-yellow);
background: rgba(64, 40, 0, 0.75);
box-shadow:
0 0 0 1px rgba(255, 228, 122, 0.4),
0 12px 24px rgba(0, 0, 0, 0.45);
}
html.theme-wargames .text-filter-wrapper.has-value + #textFilterButton {
background: linear-gradient(135deg, #ffb347, #ffc94b);
color: #0d1118;
box-shadow: 0 14px 30px rgba(255, 190, 86, 0.45);
}
html.theme-wargames .share-card-button {
border-color: rgba(0, 255, 191, 0.55);
background: rgba(4, 18, 32, 0.9);
color: var(--wg-cyan);
text-transform: uppercase;
letter-spacing: 0.12em;
}
html.theme-wargames .share-card-button:hover:not(:disabled),
html.theme-wargames .share-card-button:focus-visible {
background: rgba(0, 255, 191, 0.2);
border-color: rgba(0, 255, 191, 0.85);
color: #e2fbff;
}
html.theme-wargames .share-card-button.is-copied {
background: rgba(0, 255, 191, 0.28);
border-color: rgba(0, 255, 191, 0.95);
color: var(--wg-text);
}
html.theme-wargames .share-card-button.is-error {
background: rgba(255, 77, 87, 0.3);
border-color: rgba(255, 77, 87, 0.9);
}
/* Info rows */
html.theme-wargames .info-detail-key { color: var(--wg-faint); }
html.theme-wargames .info-detail-value { color: var(--wg-text); }
html.theme-wargames .info-detail-empty { color: rgba(255, 255, 255, 0.35); }
/* Hover boxes */
html.theme-wargames #hoverBox,
html.theme-wargames .pinned-hover {
color: var(--wg-text);
}
/* Markers on the globe */
html.theme-wargames .marker-single {
background: radial-gradient(circle, rgba(122, 255, 210, 0.95) 0%, rgba(6, 25, 21, 0.9) 72%);
border: 1px solid rgba(122, 255, 210, 0.85);
box-shadow:
0 0 8px rgba(122, 255, 210, 0.9),
0 0 18px rgba(0, 114, 90, 0.8);
}
html.theme-wargames .marker-focused {
background: radial-gradient(circle, rgba(255, 70, 70, 0.95) 0%, rgba(70, 0, 0, 0.95) 70%);
border: 1px solid rgba(255, 120, 120, 0.95);
box-shadow:
0 0 14px rgba(255, 70, 70, 0.85),
0 0 26px rgba(120, 0, 0, 0.75);
}
html.theme-wargames .marker-focused::after {
content: '';
position: absolute;
inset: -6px;
border: 1px dashed rgba(255, 70, 70, 0.45);
border-radius: 50%;
box-shadow: 0 0 14px rgba(255, 70, 70, 0.4);
}
html.theme-wargames .marker-cluster {
background: rgba(4, 18, 32, 0.92);
border: 1px solid rgba(0, 255, 191, 0.6);
color: #7dffdf;
box-shadow:
0 0 10px rgba(0, 255, 191, 0.45),
inset 0 0 8px rgba(0, 45, 38, 0.9);
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* City overlay markers */
html.theme-wargames .city-marker {
position: absolute;
transform: translate(-50%, -50%);
pointer-events: none;
color: var(--wg-yellow);
text-shadow: 0 0 10px rgba(255, 228, 122, 0.9);
}
html.theme-wargames .city-major {
font-size: 16px;
font-weight: 700;
}
html.theme-wargames .city-large {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--wg-yellow);
box-shadow: 0 0 8px rgba(255, 228, 122, 0.75);
}
/* Point count + texture indicator */
html.theme-wargames #pointCount {
color: var(--wg-dim);
border-color: rgba(28, 199, 255, 0.35);
}
html.theme-wargames .texture-indicator {
background: rgba(2, 10, 24, 0.7);
color: var(--wg-dim);
border: 1px solid rgba(28, 199, 255, 0.35);
}
/* Small accents in lists */
html.theme-wargames .cluster-item-country,
html.theme-wargames .info-detail-key { color: var(--wg-faint); }
html.theme-wargames .cluster-item-link { color: var(--wg-yellow); }