ec6dc0aa01
Some checks failed
CI / validate (pull_request) Has been cancelled
Implement Three.js scene with procedural lens flare using CanvasTexture: - Build radial glow, star-burst streak, ring, dot, and hex aperture textures from canvas draws — no image assets required - Attach Lensflare + LensflareElement chain to the sun PointLight; Three.js handles screen-space projection and occlusion automatically - Sun arcs slowly across sky, so flare angle and ghost positions shift over time giving a live optical effect - Add starfield (4 000 points), grid floor, and portal rings loaded from portals.json to give the flare context in a real 3D scene - Wire audio toggle, chat panel, and WebSocket events Fixes #109 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
164 lines
3.1 KiB
CSS
164 lines
3.1 KiB
CSS
/* === DESIGN SYSTEM === */
|
|
:root {
|
|
--color-bg: #0a0a0f;
|
|
--color-primary: #00ffcc;
|
|
--color-secondary: #ff6600;
|
|
--color-accent: #8866ff;
|
|
--color-text: #e0e0f0;
|
|
--color-text-muted: #556677;
|
|
--color-panel: rgba(10, 10, 20, 0.85);
|
|
--color-panel-border: rgba(0, 255, 204, 0.25);
|
|
--font-body: 'Courier New', Courier, monospace;
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
background: var(--color-bg);
|
|
color: var(--color-text);
|
|
font-family: var(--font-body);
|
|
overflow: hidden;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
|
|
#nexus-canvas {
|
|
display: block;
|
|
position: fixed;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* === HUD === */
|
|
#hud {
|
|
position: fixed;
|
|
top: 16px;
|
|
left: 16px;
|
|
pointer-events: none;
|
|
z-index: 10;
|
|
}
|
|
|
|
#hud-title {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: var(--color-primary);
|
|
letter-spacing: 0.1em;
|
|
text-shadow: 0 0 12px var(--color-primary);
|
|
}
|
|
|
|
#hud-hint {
|
|
font-size: 11px;
|
|
color: var(--color-text-muted);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* === AUDIO TOGGLE === */
|
|
#audio-control {
|
|
position: fixed;
|
|
top: 8px;
|
|
right: 8px;
|
|
z-index: 10;
|
|
}
|
|
|
|
#audio-toggle {
|
|
font-size: 14px;
|
|
background: var(--color-panel);
|
|
color: var(--color-text);
|
|
border: 1px solid var(--color-panel-border);
|
|
padding: 4px 10px;
|
|
border-radius: 4px;
|
|
font-family: var(--font-body);
|
|
cursor: pointer;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
#audio-toggle:hover { border-color: var(--color-primary); }
|
|
#audio-toggle.muted { color: var(--color-text-muted); }
|
|
|
|
/* === CHAT PANEL === */
|
|
#chat-panel {
|
|
position: fixed;
|
|
bottom: 16px;
|
|
right: 16px;
|
|
width: 280px;
|
|
background: var(--color-panel);
|
|
border: 1px solid var(--color-panel-border);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
z-index: 10;
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
#chat-messages {
|
|
height: 120px;
|
|
overflow-y: auto;
|
|
padding: 8px;
|
|
font-size: 12px;
|
|
color: var(--color-text);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
#chat-form {
|
|
display: flex;
|
|
border-top: 1px solid var(--color-panel-border);
|
|
}
|
|
|
|
#chat-input {
|
|
flex: 1;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--color-text);
|
|
font-family: var(--font-body);
|
|
font-size: 12px;
|
|
padding: 6px 8px;
|
|
outline: none;
|
|
}
|
|
|
|
#chat-form button {
|
|
background: transparent;
|
|
border: none;
|
|
border-left: 1px solid var(--color-panel-border);
|
|
color: var(--color-primary);
|
|
font-family: var(--font-body);
|
|
font-size: 12px;
|
|
padding: 6px 10px;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
#chat-form button:hover { background: rgba(0, 255, 204, 0.08); }
|
|
|
|
/* === LOADING SCREEN === */
|
|
#loading-screen {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: var(--color-bg);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 100;
|
|
transition: opacity 0.8s ease;
|
|
}
|
|
|
|
#loading-screen.hidden {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#loading-text {
|
|
color: var(--color-primary);
|
|
font-size: 20px;
|
|
letter-spacing: 0.15em;
|
|
text-shadow: 0 0 20px var(--color-primary);
|
|
animation: pulse 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 0.6; }
|
|
50% { opacity: 1; }
|
|
}
|