1  :root {
  2    --background-color: #f7f3ef;
  3    --dark-background-color: #222;
  4  
  5    --primary-color: #177355;
  6    --primary-color-darker: #053123;
  7  
  8    --secondary-color: #cf5600;
  9    --secondary-color-darker: #642d06;
 10  }
 11  
 12  html,
 13  body {
 14    margin: 0;
 15    padding: 0;
 16  }
 17  
 18  html {
 19    font-size: 1.2em;
 20    scrollbar-color: var(--primary-color) rgba(0, 0, 0, 0.3);
 21  }
 22  
 23  /* Pour les écrans tactiles : barre de défilement fine */
 24  @media (pointer: coarse) {
 25    html {
 26      scrollbar-width: thin;
 27    }
 28  }
 29  
 30  body {
 31    background-color: var(--background-color);
 32    font-family: -apple-system, 'Ubuntu', system-ui, sans-serif;
 33  }
 34  
 35  button {
 36    font: inherit;
 37    color: inherit;
 38  }
 39  
 40  p {
 41    padding: 8px;
 42    margin: 8px;
 43  }
 44  
 45  h2 {
 46    padding: 8px;
 47    margin: 8px;
 48    margin-bottom: 0;
 49    font-size: 2em;
 50  }
 51  
 52  .center {
 53    text-align: center;
 54  }
 55  
 56  .overflow-hidden {
 57    overflow: hidden;
 58  }
 59  
 60  .bg-dark {
 61    background-color: var(--dark-background-color);
 62  }
 63  
 64  .btn {
 65    padding: 10px 20px;
 66    display: inline-block;
 67    border: none;
 68    background-color: var(--secondary-color);
 69    text-align: center;
 70    font-size: 1.2em;
 71    color: white;
 72    text-decoration: none;
 73    margin: 16px auto;
 74  }
 75  
 76  .btn:focus,
 77  .btn:hover {
 78    outline: 3px solid var(--secondary-color-darker);
 79    cursor: pointer;
 80  }
 81  
 82  .btn-play {
 83    padding: 20px 40px;
 84    display: inline-block;
 85    color: var(--secondary-color);
 86    border: 2px solid currentColor;
 87    border-bottom-width: 12px;
 88    text-align: center;
 89    font-size: 2em;
 90    text-transform: uppercase;
 91    text-decoration: none;
 92    margin: 16px auto;
 93  }
 94  
 95  .btn-play:focus,
 96  .btn-play:hover {
 97    color: var(--secondary-color-darker);
 98    cursor: pointer;
 99    outline: none;
100  }
101  
102  .logo {
103    margin: 0 auto 64px auto;
104    font-size: 120px;
105    color: var(--primary-color);
106    text-transform: uppercase;
107    font-weight: normal;
108  }
109  
110  @media (max-width: 600px), (max-height: 600px) {
111    .logo {
112      font-size: 80px;
113      margin-bottom: 32px;
114    }
115  }
116  
117  .levels {
118    list-style: none;
119    display: grid;
120    grid-template-columns: repeat(auto-fill, 60px);
121    gap: 16px;
122    margin: 12px;
123    justify-content: center;
124    padding: 16px;
125  }
126  
127  .level a {
128    display: block;
129    background-color: #767676;
130    padding: 20px 8px;
131    color: white;
132    text-decoration: none;
133    text-align: center;
134    border: none;
135    width: 100%;
136    box-sizing: border-box;
137  }
138  
139  .level a:focus,
140  .level a:hover {
141    outline: 3px solid var(--primary-color-darker);
142    cursor: pointer;
143  }
144  
145  .level.accessible a {
146    background-color: #842733;
147  }
148  
149  .level.success.accessible a {
150    background-color: var(--primary-color);
151  }
152  
153  #topbar {
154    background-color: var(--primary-color);
155    display: flex;
156  }
157  
158  .topbar-gamename {
159    padding: 12px;
160    color: #fff;
161    margin: 0;
162    text-align: center;
163    text-transform: uppercase;
164  }
165  
166  .topbar-level {
167    padding: 12px;
168    color: #fff;
169  }
170  
171  .topbar-menu {
172    margin-left: auto;
173    position: relative;
174  }
175  
176  .topbar-button {
177    padding: 12px 18px;
178    margin: 0;
179    border: none;
180    background: transparent;
181    display: inline-block;
182    color: #fff;
183    height: 100%;
184    box-sizing: border-box;
185    text-decoration: none;
186  }
187  
188  .topbar-button:focus,
189  .topbar-button:hover {
190    background-color: rgba(0, 0, 0, 0.3);
191    outline: none;
192    cursor: pointer;
193  }
194  
195  .topbar-menu-nav {
196    position: absolute;
197    top: 100%;
198    right: 0;
199    display: flex;
200    flex-direction: column;
201    width: 290px;
202    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.4);
203    display: none;
204  }
205  
206  .topbar-menu-nav-displayed {
207    display: block;
208  }
209  
210  .topbar-nav-button {
211    padding: 12px 24px;
212    border: none;
213    background: #fff;
214    text-align: left;
215    width: 100%;
216    text-decoration: none;
217    display: inline-block;
218    color: inherit;
219    box-sizing: border-box;
220  }
221  
222  .topbar-nav-button:focus,
223  .topbar-nav-button:hover {
224    background: #ccc;
225    cursor: pointer;
226  }
227  
228  .main-wrapper {
229    flex: 1;
230    display: flex;
231    align-items: center;
232    overflow: auto;
233  }
234  
235  .main-wrapper-unaligned {
236    align-items: initial;
237  }
238  
239  .main-content {
240    flex: 1;
241    display: flex;
242    flex-direction: column;
243  }
244  
245  #bottombar {
246    background-color: var(--primary-color);
247    display: flex;
248    font-size: 80%;
249    flex-wrap: wrap;
250  }
251  
252  #bottombar .btn {
253    background-color: rgba(0, 0, 0, 0.3);
254  }
255  
256  #bottombar .btn:focus,
257  #bottombar .btn:hover {
258    outline-color: var(--primary-color-darker);
259  }
260  
261  #app {
262    margin: 0 auto;
263    display: flex;
264    flex-direction: column;
265    justify-content: space-between;
266  }
267  
268  #app-wrapper {
269    height: 100%;
270    display: grid;
271    align-content: center;
272  }
273  
274  #game {
275    image-rendering: crisp-edges;
276    image-rendering: pixelated;
277  }
278  
279  #joystick {
280    position: fixed;
281  }
282  
283  @keyframes end-game-text-animation {
284    0% {
285      color: var(--primary-color-darker);
286    }
287  
288    100% {
289      color: var(--secondary-color-darker);
290    }
291  }
292  
293  #end-game {
294    position: absolute;
295    top: 44%;
296    left: 0;
297    right: 0;
298    font-size: 140%;
299    font-weight: bold;
300    animation: end-game-text-animation 2s;
301    animation-direction: alternate-reverse;
302    animation-iteration-count: infinite;
303    animation-timing-function: linear;
304  }