style.css
4880 bytes
1:root {
2 --bg: #23262e;
3 --bg-2: #2c3038;
4 --card: #2a2e37;
5 --fg: #e6e9ef;
6 --dim: #8b93a1;
7 --accent: #e0a458;
8 --green: #7fbf6a;
9 --red: #d97b74;
10 --yellow: #e0c058;
11 --orange: #e0955c;
12 --line: #3a3f4a;
13}
14
15* { box-sizing: border-box; }
16
17html, body { height: 100%; }
18
19body {
20 margin: 0;
21 min-height: 100vh;
22 display: flex;
23 align-items: center;
24 justify-content: center;
25 padding: 24px;
26 background: radial-gradient(120% 130% at 50% -10%, var(--bg-2), var(--bg) 62%);
27 color: var(--fg);
28 font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
29}
30
31.game {
32 width: min(94vw, 540px);
33 background: linear-gradient(180deg, var(--card), #242832);
34 border: 1px solid var(--line);
35 border-radius: 16px;
36 padding: 26px 28px 30px;
37 box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
38}
39
40.hud {
41 display: flex;
42 align-items: baseline;
43 justify-content: space-between;
44 gap: 12px;
45}
46
47h1 {
48 margin: 0;
49 font-size: 1.7rem;
50 letter-spacing: 0.4px;
51 color: var(--accent);
52}
53
54.score {
55 font-size: 1rem;
56 color: var(--dim);
57 white-space: nowrap;
58 font-variant-numeric: tabular-nums;
59}
60
61.round {
62 color: var(--dim);
63 margin: 2px 0 18px;
64 font-size: 0.9rem;
65}
66
67/* Guess form */
68.guess { display: flex; flex-direction: column; gap: 14px; }
69
70.field { display: flex; flex-direction: column; gap: 6px; }
71
72.field label {
73 font-size: 0.78rem;
74 text-transform: uppercase;
75 letter-spacing: 0.8px;
76 color: var(--dim);
77}
78
79.field input {
80 background: #20242c;
81 border: 1px solid var(--line);
82 border-radius: 10px;
83 color: var(--fg);
84 font-size: 1rem;
85 padding: 11px 13px;
86 outline: none;
87 transition: border-color 0.15s, box-shadow 0.15s;
88}
89
90.field input:focus {
91 border-color: var(--accent);
92 box-shadow: 0 0 0 3px rgba(224, 164, 88, 0.18);
93}
94
95/* Buttons */
96button {
97 background: var(--accent);
98 color: #20242c;
99 border: none;
100 border-radius: 10px;
101 font-size: 1rem;
102 font-weight: 600;
103 padding: 12px 18px;
104 cursor: pointer;
105 transition: filter 0.15s, transform 0.05s;
106}
107
108button:hover { filter: brightness(1.08); }
109button:active { transform: translateY(1px); }
110button:focus {
111 outline: none;
112 box-shadow: 0 0 0 3px rgba(224, 164, 88, 0.45);
113}
114
115/* Result */
116.result { display: flex; flex-direction: column; gap: 16px; margin-bottom: 18px; }
117
118.result-summary { font-size: 1.15rem; font-weight: 600; }
119.result-summary.green { color: var(--green); }
120.result-summary.yellow { color: var(--yellow); }
121.result-summary.orange { color: var(--orange); }
122.result-summary.red { color: var(--red); }
123
124.field-rows { display: flex; flex-direction: column; gap: 10px; }
125.frow { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
126.flabel {
127 width: 72px;
128 flex: none;
129 color: var(--dim);
130 font-size: 0.8rem;
131 text-transform: uppercase;
132 letter-spacing: 0.6px;
133}
134.fguess { text-decoration: line-through; text-decoration-thickness: 2px; opacity: 0.85; }
135.fguess.partial { color: var(--yellow); }
136.fguess.wrong { color: var(--red); }
137.fval.correct { color: var(--green); font-weight: 600; }
138.fval.empty { color: var(--yellow); }
139
140.hinted { color: var(--orange); font-size: 0.85rem; }
141
142/* Game over */
143.final-sep { border: none; border-top: 1px solid var(--line); margin: 18px 0; }
144.final-wrap {
145 display: flex;
146 flex-direction: column;
147 align-items: center;
148 gap: 12px;
149 text-align: center;
150 margin-top: 4px;
151}
152.final-score { font-size: 3.4rem; font-weight: 700; color: var(--accent); line-height: 1; }
153.final-sub { color: var(--dim); margin: 0; }
154
155/* Round progress dots */
156.progress { display: flex; gap: 6px; margin-bottom: 18px; }
157.dot {
158 width: 9px;
159 height: 9px;
160 border-radius: 50%;
161 background: var(--line);
162 transition: background 0.2s, box-shadow 0.2s;
163}
164.dot.done { background: var(--accent); box-shadow: 0 0 6px rgba(224, 164, 88, 0.5); }
165
166/* Now-playing equalizer */
167.now-playing {
168 display: flex;
169 align-items: center;
170 gap: 8px;
171 color: var(--dim);
172 font-size: 0.85rem;
173 margin-bottom: 14px;
174}
175.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
176.eq i {
177 width: 3px;
178 background: var(--accent);
179 border-radius: 2px;
180 animation: eq 0.9s ease-in-out infinite;
181}
182.eq i:nth-child(2) { animation-delay: 0.25s; }
183.eq i:nth-child(3) { animation-delay: 0.5s; }
184@keyframes eq {
185 0%, 100% { height: 4px; }
186 50% { height: 14px; }
187}
188
189/* Smooth htmx state swaps */
190#game .htmx-added { animation: fadeIn 0.28s ease; }
191@keyframes fadeIn {
192 from { opacity: 0; transform: translateY(5px); }
193 to { opacity: 1; transform: none; }
194}
195
196/* Secondary audio-control buttons */
197.audio-controls { display: flex; gap: 10px; margin-bottom: 16px; }
198.audio-controls button {
199 background: transparent;
200 color: var(--accent);
201 border: 1px solid var(--accent);
202 font-size: 0.85rem;
203 font-weight: 600;
204 padding: 7px 14px;
205}
206.audio-controls button:hover { background: rgba(224, 164, 88, 0.12); }