1:root {
2 --bg: #05010e;
3 --panel: rgba(10, 4, 28, 0.85);
4 --cyan: #00f0ff;
5 --pink: #ff2d95;
6 --purple: #b026ff;
7 --text: #d9f7ff;
8 --dim: #6fa8b8;
9}
10
11* { box-sizing: border-box; }
12
13html, body { height: 100%; }
14
15body {
16 margin: 0;
17 display: flex;
18 align-items: center;
19 justify-content: center;
20 min-height: 100vh;
21 background:
22 radial-gradient(1200px 600px at 50% -10%, rgba(176, 38, 255, 0.18), transparent 60%),
23 radial-gradient(900px 500px at 50% 110%, rgba(0, 240, 255, 0.12), transparent 60%),
24 var(--bg);
25 color: var(--text);
26 font-family: "Courier New", ui-monospace, Menlo, Consolas, monospace;
27 letter-spacing: 0.08em;
28 user-select: none;
29 -webkit-user-select: none;
30}
31
32.frame {
33 padding: 16px;
34 width: min(840px, 100%);
35}
36
37.hud {
38 display: flex;
39 justify-content: space-between;
40 align-items: center;
41 flex-wrap: wrap;
42 gap: 10px 18px;
43 padding: 10px 14px;
44 margin-bottom: 10px;
45 border: 1px solid rgba(0, 240, 255, 0.35);
46 border-radius: 6px;
47 background: var(--panel);
48 box-shadow: 0 0 18px rgba(0, 240, 255, 0.12), inset 0 0 18px rgba(0, 240, 255, 0.05);
49}
50
51.hud-group { display: flex; gap: 18px; align-items: baseline; }
52.hud-label {
53 color: var(--dim);
54 font-size: 11px;
55 text-transform: uppercase;
56 margin-right: 6px;
57}
58.hud-value {
59 color: var(--cyan);
60 font-weight: bold;
61 font-size: 18px;
62 text-shadow: 0 0 8px rgba(0, 240, 255, 0.8);
63}
64.hearts { color: var(--pink); text-shadow: 0 0 8px rgba(255, 45, 149, 0.9); }
65
66button {
67 font: inherit;
68 letter-spacing: inherit;
69 cursor: pointer;
70 color: var(--cyan);
71 background: transparent;
72 border: 1px solid rgba(0, 240, 255, 0.5);
73 border-radius: 4px;
74 padding: 6px 12px;
75 text-transform: uppercase;
76 font-size: 12px;
77 text-shadow: 0 0 6px rgba(0, 240, 255, 0.7);
78 transition: box-shadow 0.15s, background 0.15s;
79}
80button:hover {
81 background: rgba(0, 240, 255, 0.1);
82 box-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
83}
84button.off {
85 color: var(--dim);
86 border-color: rgba(111, 168, 184, 0.4);
87 text-shadow: none;
88}
89
90.stage { position: relative; }
91
92
93.stage::after {
94 content: "";
95 position: absolute;
96 inset: 0;
97 pointer-events: none;
98 background: repeating-linear-gradient(
99 to bottom,
100 rgba(255, 255, 255, 0.03) 0 1px,
101 transparent 1px 3px
102 );
103 border-radius: 4px;
104}
105
106canvas {
107 display: block;
108 width: 100%;
109 height: auto;
110 background: #04000d;
111 border: 2px solid rgba(0, 240, 255, 0.6);
112 border-radius: 4px;
113 box-shadow: 0 0 24px rgba(0, 240, 255, 0.25), inset 0 0 60px rgba(176, 38, 255, 0.08);
114 cursor: none;
115}
116
117.overlay {
118 position: absolute;
119 inset: 0;
120 z-index: 2;
121 display: flex;
122 flex-direction: column;
123 align-items: center;
124 justify-content: center;
125 gap: 12px;
126 text-align: center;
127 padding: 20px;
128 background: rgba(5, 1, 14, 0.78);
129 backdrop-filter: blur(2px);
130 border-radius: 4px;
131 cursor: pointer;
132}
133.overlay.hidden { display: none; }
134
135#overlayTitle {
136 margin: 0;
137 font-size: clamp(28px, 6vw, 52px);
138 letter-spacing: 0.18em;
139 color: var(--pink);
140 text-shadow:
141 0 0 10px var(--pink),
142 0 0 30px rgba(255, 45, 149, 0.7),
143 0 0 60px rgba(176, 38, 255, 0.5);
144 animation: flicker 2.4s infinite;
145}
146
147#overlayMsg {
148 margin: 0;
149 font-size: 16px;
150 color: var(--cyan);
151 text-shadow: 0 0 10px rgba(0, 240, 255, 0.8);
152}
153
154.overlay-hint { margin: 0; font-size: 12px; color: var(--dim); }
155
156@keyframes flicker {
157 0%, 91%, 94%, 98%, 100% { opacity: 1; }
158 92% { opacity: 0.55; }
159 96% { opacity: 0.75; }
160}
161
162.controls {
163 margin-top: 10px;
164 text-align: center;
165 font-size: 12px;
166 color: var(--dim);
167}
168
Discussion
No comments yet. Start the discussion. Recorded by @patrick-toulme.