/* theme-overrides.css — Cosmic Drift menus aligned to Gorton Solutions * site theme: navy + cyan-blue + violet, beveled clip-path corners, * monospace accents. Loaded AFTER style.css so it overrides menu chrome * without touching gameplay rendering on the canvas. * * Scope: splash / setup / info-screen / game-over / leaderboard panel + modal, * plus generic .overlay-content buttons and the leaderboard list. */ /* ── Site palette tokens (kept local to this file) ───────────────────── */ #overlay, #leaderboard-overlay { --gs-bg: #0b1020; --gs-card: #111a33; --gs-card-2: #16204a; --gs-text: #eaf0ff; --gs-muted: #a9b6dd; --gs-accent: #4ea3ff; --gs-accent-2: #7c5cff; --gs-ok: #3ddc97; --gs-warn: #ffd36a; --gs-border: rgba(255, 255, 255, 0.12); --gs-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --gs-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif; --gs-bevel: 10px; } /* ── Overlay backdrop: deeper blur, on-brand glow ─────────────────────── */ #overlay, #leaderboard-overlay { background: radial-gradient(900px 700px at 15% 10%, rgba(78, 163, 255, 0.18), transparent 60%), radial-gradient(800px 600px at 85% 90%, rgba(124, 92, 255, 0.18), transparent 55%), rgba(11, 16, 32, 0.86) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Confine the overlay so its panels can't ride up over the site nav (42px) * + the in-game HUD (~70px). Anchored fixed to the viewport so it works even * though is not a positioned ancestor. */ #overlay { position: fixed !important; top: calc(var(--gs-gnav-height, 42px) + 70px) !important; left: 0 !important; right: 0 !important; bottom: 0 !important; align-items: flex-start !important; padding-top: 12px; overflow: hidden; } /* Info panel: cap to the overlay's actual usable height (not 86vh of the * full viewport — that's what made it spill above the headers). */ #info-screen { max-height: calc(100dvh - var(--gs-gnav-height, 42px) - 70px - 24px) !important; margin-top: 0 !important; } @media (max-width: 768px) { #info-screen { max-height: calc(100dvh - var(--gs-gnav-height, 42px) - 70px - 16px) !important; } } /* ── Card containers: site theme ──────────────────────────────────────── */ #overlay .overlay-content, #leaderboard-modal { background: var(--gs-card) !important; border: 1px solid var(--gs-border) !important; color: var(--gs-text) !important; font-family: var(--gs-sans) !important; /* Beveled site-style corners (overrides round border-radius). */ border-radius: 0 !important; clip-path: polygon( var(--gs-bevel) 0, calc(100% - var(--gs-bevel)) 0, 100% var(--gs-bevel), 100% calc(100% - var(--gs-bevel)), calc(100% - var(--gs-bevel)) 100%, var(--gs-bevel) 100%, 0 calc(100% - var(--gs-bevel)), 0 var(--gs-bevel) ); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(78, 163, 255, 0.06); } /* Strip the soft inner glow / curved-corner pseudo elements. */ #overlay .overlay-content::before { display: none !important; } /* ── Headings ─────────────────────────────────────────────────────────── */ #overlay .overlay-content h1, #overlay .overlay-content h2, #leaderboard-modal h2 { font-family: var(--gs-mono) !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--gs-text) !important; text-shadow: 0 0 18px rgba(78, 163, 255, 0.35) !important; background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: initial !important; animation: none !important; } #overlay .overlay-content h1 { font-size: clamp(2rem, 5vw, 2.6rem) !important; font-weight: 800 !important; margin-bottom: 8px !important; } /* Underline gradient bar under H1 (matches site accent gradient). */ #overlay .overlay-content h1::after { content: '' !important; display: block; margin: 12px auto 0 !important; width: 80px !important; height: 2px !important; background: linear-gradient(90deg, var(--gs-accent), var(--gs-accent-2)) !important; border-radius: 0 !important; animation: none !important; } #overlay .overlay-content h2 { font-size: clamp(1.4rem, 3.6vw, 1.8rem) !important; margin-bottom: 14px !important; } #leaderboard-modal h2 { font-size: 1.4rem !important; margin-bottom: 14px !important; color: var(--gs-accent) !important; } /* Body text */ #overlay .overlay-content p, #leaderboard-modal { color: var(--gs-text) !important; font-family: var(--gs-sans) !important; } /* Sales-pitch text block */ #overlay .overlay-content #sales-pitch .cta-text { color: var(--gs-muted) !important; font-style: normal !important; background: rgba(78, 163, 255, 0.06) !important; border: 1px solid rgba(78, 163, 255, 0.2) !important; border-radius: 0 !important; padding: 12px 14px !important; text-shadow: none !important; } /* ── How-to-Play info screen ──────────────────────────────────────────── */ #info-screen .info-section h3 { color: var(--gs-accent) !important; font-family: var(--gs-mono) !important; letter-spacing: 0.04em; } #info-screen .info-section p strong { color: var(--gs-accent-2) !important; } /* ── Buttons ──────────────────────────────────────────────────────────── */ #overlay .overlay-content button, #leaderboard-modal #close-leaderboard-overlay-btn { font-family: var(--gs-mono) !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; font-weight: 700 !important; font-size: 14px !important; padding: 12px 18px !important; background: rgba(78, 163, 255, 0.08) !important; color: var(--gs-text) !important; border: 1px solid rgba(78, 163, 255, 0.4) !important; border-radius: 0 !important; box-shadow: 0 0 14px rgba(78, 163, 255, 0.15) !important; /* Beveled corners */ clip-path: polygon( 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px ); transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease !important; } #overlay .overlay-content button::before { display: none !important; } #overlay .overlay-content button:hover, #leaderboard-modal #close-leaderboard-overlay-btn:hover { background: rgba(78, 163, 255, 0.18) !important; box-shadow: 0 0 22px rgba(78, 163, 255, 0.4) !important; transform: translateY(-1px) !important; } #overlay .overlay-content button:active { transform: translateY(0) !important; } /* Primary action — Start / Replay get the violet+blue gradient */ #start-btn, #replay-btn { background: linear-gradient(135deg, rgba(78, 163, 255, 0.25), rgba(124, 92, 255, 0.25)) !important; border-color: rgba(124, 92, 255, 0.55) !important; box-shadow: 0 0 22px rgba(124, 92, 255, 0.35) !important; } #start-btn:hover, #replay-btn:hover { background: linear-gradient(135deg, rgba(78, 163, 255, 0.45), rgba(124, 92, 255, 0.45)) !important; box-shadow: 0 0 30px rgba(124, 92, 255, 0.6) !important; } /* ── Leaderboard ──────────────────────────────────────────────────────── */ #leaderboard-panel, #leaderboard-modal { background: rgba(22, 32, 74, 0.55) !important; } #leaderboard-panel h3 { color: var(--gs-accent) !important; font-family: var(--gs-mono) !important; letter-spacing: 0.06em; text-transform: uppercase; } #leaderboard-list, #leaderboard-overlay-list { font-family: var(--gs-mono) !important; list-style: none !important; padding: 0 !important; } .lb-entry { display: grid !important; grid-template-columns: 32px 1fr auto !important; align-items: center; gap: 10px; padding: 8px 12px !important; border: 1px solid rgba(78, 163, 255, 0.14) !important; background: rgba(11, 16, 32, 0.5) !important; margin: 4px 0 !important; border-radius: 0 !important; font-size: 14px; color: var(--gs-text) !important; } .lb-entry .lb-rank { color: var(--gs-accent) !important; font-weight: 700; text-align: center; } .lb-entry:first-child .lb-rank { color: var(--gs-warn) !important; } .lb-entry:nth-child(2) .lb-rank { color: #c0c8e0 !important; } .lb-entry:nth-child(3) .lb-rank { color: #d6a36a !important; } .lb-entry .lb-name { color: var(--gs-text) !important; font-family: var(--gs-sans) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lb-entry .lb-score { color: var(--gs-accent-2) !important; font-family: var(--gs-mono) !important; font-weight: 700; } .lb-loading, .lb-empty, .lb-status { color: var(--gs-muted) !important; font-family: var(--gs-mono) !important; font-size: 13px; text-align: center; padding: 8px 0 !important; } /* ── HUD chip refresh (subtle: same colour family, beveled) ──────────── */ #hud { font-family: var(--gs-mono); } @media (prefers-reduced-motion: reduce) { #overlay .overlay-content button, #leaderboard-modal #close-leaderboard-overlay-btn { transition: none !important; } }