@font-face {
  font-family: Bricolage;
  src: url('/games/assets/bricolage.ttf') format('truetype');
  font-weight: 200 800;
  font-display: swap;
}
:root {
  color-scheme: dark;
  font-family: Bricolage, Arial, sans-serif;
  font-synthesis: none;
  background: #14191e;
  color: #f2f3e9;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100svh; }
a { color: inherit; text-decoration: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 3px solid #d6ff3c; outline-offset: 5px; }
::selection { background: #d6ff3c; color: #14191e; }
h1, h2, p { margin: 0; }
main {
  width: 100%;
  max-width: 1080px;
  margin: auto;
  padding: calc(19px + env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) calc(30px + env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
}
header { display: flex; align-items: center; min-height: 48px; }
.brand { display: inline-flex; align-items: baseline; min-height: 48px; font-size: 35px; font-weight: 800; letter-spacing: -.045em; line-height: 48px; }
.brand-dot { color: #d6ff3c; }
.domain { font-size: .57em; letter-spacing: -.025em; }
.intro { position: relative; margin: 22px 0 24px; }
h1 { font-size: 57px; line-height: .94; letter-spacing: -.04em; font-weight: 800; }
h1 span { color: #d6ff3c; }
.spark { position: absolute; right: 5px; top: -7px; width: 57px; height: 57px; color: #8477ff; transform: rotate(13deg); }
.games { display: grid; gap: 20px; }
.game { display: block; overflow: hidden; border-radius: 4px; background: #d6ff3c; color: #13181d; transition: transform 160ms ease-out; }
.game:active { transform: scale(.985); }
.art { overflow: hidden; }
.art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.snake .art { height: 222px; }
.game-info { padding: 13px 15px; }
h2 { font-size: 28px; line-height: 1.1; font-weight: 800; letter-spacing: -.025em; }
.game-info p { font-size: 11px; font-weight: 650; line-height: 1.4; margin-top: 4px; }
.trail { display: grid; grid-template-columns: 41% 1fr; min-height: 136px; background: #8477ff; }
.trail .art { min-height: 136px; }
.trail .game-info { display: flex; align-items: center; padding: 14px; }
.trail h2 { font-size: 24px; }
@media (min-width: 700px) {
  main { padding-left: 40px; padding-right: 40px; }
  h1 { font-size: 75px; }
  .spark { right: 70px; }
  .games { grid-template-columns: 1fr 1fr; gap: 28px; }
  .snake .art, .trail .art { height: 260px; }
  .trail { display: block; }
  .trail .game-info { min-height: 76px; }
  .trail h2 { font-size: 28px; }
}
@media (max-width: 359px) {
  main { padding-left: 16px; padding-right: 16px; }
  h1 { font-size: 48px; }
  h2 { font-size: 25px; }
  .trail h2 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .game { transition: none; } }