1:root {
2 --bg: #06050d;
3 --fg: #e8eaf5;
4 --aire: #d0dbff;
5 --agua: #6cd0f3;
6 --fuego: #f59056;
7 --tierra: #d49873;
8 --rim: #d8a85d;
9}
10
11* { box-sizing: border-box; }
12
13html, body {
14 margin: 0;
15 padding: 0;
16 width: 100%;
17 height: 100%;
18 background: var(--bg);
19 color: var(--fg);
20 font-family: 'Inter', system-ui, -apple-system, sans-serif;
21 font-weight: 300;
22 overflow: hidden;
23 cursor: default;
24}
25
26#gioser-canvas {
27 position: fixed;
28 inset: 0;
29 width: 100vw;
30 height: 100vh;
31 display: block;
32 z-index: 0;
33}
34
35.brand {
36 position: fixed;
37 top: 4vh;
38 left: 50%;
39 transform: translateX(-50%);
40 text-align: center;
41 z-index: 10;
42 pointer-events: none;
43 user-select: none;
44}
45
46.brand-title {
47 font-family: 'Cinzel', serif;
48 font-weight: 700;
49 font-size: clamp(2.4rem, 5vw, 4.4rem);
50 margin: 0;
51 letter-spacing: 0.08em;
52 color: var(--fg);
53 text-shadow:
54 0 0 18px rgba(108, 208, 243, 0.35),
55 0 0 40px rgba(216, 168, 93, 0.18);
56}
57
58.brand-dot {
59 color: var(--rim);
60 margin: 0 0.05em;
61 text-shadow: 0 0 14px var(--rim), 0 0 28px rgba(245, 144, 86, 0.5);
62}
63
64.brand-sub {
65 font-family: 'Inter', sans-serif;
66 font-weight: 300;
67 letter-spacing: 0.5em;
68 font-size: clamp(0.65rem, 0.9vw, 0.8rem);
69 margin: 0.55rem 0 0;
70 color: rgba(232, 234, 245, 0.6);
71 text-indent: 0.5em;
72}
73
74#tips {
75 position: fixed;
76 inset: 0;
77 pointer-events: none;
78 z-index: 5;
79}
80
81.tip {
82 position: absolute;
83 top: 0; left: 0;
84 pointer-events: auto;
85 text-decoration: none;
86 color: var(--fg);
87 user-select: none;
88
89 display: flex;
90 flex-direction: column;
91 align-items: center;
92 gap: 0.35rem;
93 padding: 0.7rem 1.0rem 0.55rem;
94 min-width: 120px;
95
96 background: rgba(8, 6, 22, 0.42);
97 backdrop-filter: blur(8px) saturate(120%);
98 -webkit-backdrop-filter: blur(8px) saturate(120%);
99 border-radius: 14px;
100 border: 1px solid rgba(255, 255, 255, 0.07);
101 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
102
103 transition:
104 box-shadow 260ms ease,
105 border-color 260ms ease,
106 background 260ms ease,
107 letter-spacing 260ms ease;
108}
109
110.tip::before {
111 content: "";
112 position: absolute;
113 inset: -1px;
114 border-radius: inherit;
115 padding: 1px;
116 background: linear-gradient(135deg,
117 rgba(255,255,255,0.18),
118 rgba(255,255,255,0.0) 40%,
119 rgba(216, 168, 93, 0.18));
120 -webkit-mask:
121 linear-gradient(#000 0 0) content-box,
122 linear-gradient(#000 0 0);
123 -webkit-mask-composite: xor;
124 mask-composite: exclude;
125 pointer-events: none;
126 opacity: 0.7;
127}
128
129.tip:hover {
130 border-color: rgba(255, 255, 255, 0.22);
131 background: rgba(20, 14, 40, 0.6);
132}
133
134.tip-glyph {
135 width: 42px;
136 height: 42px;
137 color: currentColor;
138 filter: drop-shadow(0 0 6px currentColor);
139 transition: filter 240ms ease;
140}
141.tip:hover .tip-glyph {
142 filter: drop-shadow(0 0 12px currentColor) drop-shadow(0 0 20px currentColor);
143}
144
145.tip-label {
146 font-family: 'Cinzel', serif;
147 font-size: 0.74rem;
148 letter-spacing: 0.36em;
149 font-weight: 600;
150 text-indent: 0.36em;
151}
152
153.tip-sub {
154 font-family: 'Inter', sans-serif;
155 font-size: 0.62rem;
156 letter-spacing: 0.18em;
157 font-weight: 300;
158 color: rgba(232, 234, 245, 0.55);
159 text-transform: uppercase;
160}
161
162.tip-aire { color: var(--aire); }
163.tip-aire:hover { box-shadow: 0 0 32px rgba(208, 219, 255, 0.45); }
164.tip-fuego { color: var(--fuego); }
165.tip-fuego:hover { box-shadow: 0 0 32px rgba(245, 144, 86, 0.45); }
166.tip-agua { color: var(--agua); }
167.tip-agua:hover { box-shadow: 0 0 32px rgba(108, 208, 243, 0.45); }
168.tip-tierra { color: var(--tierra); }
169.tip-tierra:hover { box-shadow: 0 0 32px rgba(212, 152, 115, 0.45); }
170
171.quote {
172 position: fixed;
173 bottom: 3vh;
174 left: 50%;
175 transform: translateX(-50%);
176 font-family: 'Cinzel', serif;
177 font-size: 0.7rem;
178 letter-spacing: 0.55em;
179 color: rgba(232, 234, 245, 0.42);
180 pointer-events: none;
181 user-select: none;
182 z-index: 10;
183 text-indent: 0.55em;
184}
185
186@media (max-width: 720px) {
187 .tip { min-width: 90px; padding: 0.5rem 0.7rem; }
188 .tip-glyph { width: 32px; height: 32px; }
189 .tip-label { font-size: 0.6rem; }
190 .tip-sub { display: none; }
191}