/* Self-hosted fonts (SIL Open Font License, see fonts/LICENSE-*.txt), latin subset.
   No third-party requests; the system fallbacks in --display/--body still apply. */
@font-face {
  font-family: "Lilita One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/lilita-one-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/nunito-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/nunito-latin-800-normal.woff2") format("woff2");
}

/* layout: one 16:9 canvas, letterboxed in a dark frame; touch buttons overlay it in landscape and sit below it in portrait */
:root {
  --ink: #1b1530;
  --paper: #fff6e6;
  --gold: #ffd166;
  --display: "Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --body: "Nunito", "Trebuchet MS", system-ui, sans-serif;
  color-scheme: dark;
}
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--ink); color: var(--paper); font-family: var(--body);
  display: flex; align-items: center; justify-content: center; overflow: hidden; box-sizing: border-box;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
#wrap { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
#stage {
  position: relative;
  width: min(100%, calc((100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * 16 / 9));
  aspect-ratio: 16 / 9; max-width: 100%; max-height: 100%;
}
#game { display: block; width: 100%; height: 100%; border-radius: 10px; touch-action: none; }
:fullscreen #game { border-radius: 0; }
#touch {
  position: absolute; inset: auto 0 0 0;
  display: flex; justify-content: space-between; align-items: flex-end;
  padding-bottom: 10px; pointer-events: none;
}
.grp { display: flex; gap: 10px; pointer-events: auto; }
.grp.steer { flex-direction: column; }
.grp.steer.row { flex-direction: row; }
.grp.go { flex-direction: row; align-items: flex-end; }
.tb {
  width: clamp(54px, 13vmin, 88px); aspect-ratio: 1; border-radius: 50%;
  background: rgba(27, 21, 48, .55); color: var(--paper);
  border: 2px solid rgba(255, 246, 230, .55);
  font: 15px/1 var(--display);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.tb.big { width: clamp(72px, 18vmin, 118px); font-size: 22px; }
.tb.on { background: rgba(255, 209, 102, .6); color: var(--ink); border-color: var(--gold); }
#rotate { display: none; margin: 0; font: 800 14px/1.4 var(--body); opacity: .75; text-align: center; }
@media (orientation: portrait) {
  #wrap { flex-direction: column; justify-content: center; gap: 20px; }
  #touch { position: static; width: 100%; padding-bottom: 0; }
  body[data-scheme="touch"] #rotate { display: block; }
}

/* 404 page */
.notfound { text-align: center; font-family: var(--body); }
.notfound h1 { font: 48px/1.1 var(--display); color: var(--gold); margin: 0 0 12px; }
.notfound a { color: var(--gold); }