@font-face {
  font-family: "Andika";
  src: url("fonts/andika-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: "Andika";
  src: url("fonts/andika-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-display: block;
}

:root {
  --bg: #fff6e9;
  --ink: #23314f;
  --vowel: #e2553f;
  --card: #ffffff;
  --line: #f0dcc0;
  --glow: #ffc53d;
  --good: #3fa66b;
  --tile: min(17vmin, 150px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1d2233;
    --ink: #f4efe6;
    --vowel: #ff8a73;
    --card: #2a3047;
    --line: #3b425e;
  }
}
:root[data-theme="dark"] {
  --bg: #1d2233;
  --ink: #f4efe6;
  --vowel: #ff8a73;
  --card: #2a3047;
  --line: #3b425e;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: "Andika", system-ui, sans-serif;
  overscroll-behavior: none;
  touch-action: manipulation;
}
#app {
  height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

/* ---- start ---------------------------------------------------------- */
.start {
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4vmin;
}
.start h1 {
  font-size: 22vmin;
  margin: 0;
  letter-spacing: 0.04em;
}
.start h1 span,
.vowel-ink {
  color: var(--vowel);
}
.go {
  width: 30vmin;
  height: 30vmin;
  border-radius: 50%;
  background: var(--good);
  color: #fff;
  font-size: 12vmin;
  box-shadow: 0 1.2vmin 0 #2b7a4d;
  animation: pulse 1.6s ease-in-out infinite;
  display: grid;
  place-items: center;
}
.go svg {
  width: 45%;
  margin-left: 8%;
}

/* ---- home ----------------------------------------------------------- */
.home {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 3vmin;
  padding: 4vmin;
}
.level {
  /* five across in landscape, 3 + 2 in portrait */
  width: min(calc((100vw - 8vmin - 12vmin) / 5), 220px);
  background: var(--card);
  border-radius: 4vmin;
  padding: 3vmin 2vmin;
  display: grid;
  justify-items: center;
  gap: 1vmin;
  box-shadow: 0 1vmin 0 var(--line);
}
.level:active {
  transform: translateY(0.6vmin);
  box-shadow: 0 0.4vmin 0 var(--line);
}
.level .vowel {
  font-size: 16vmin;
  line-height: 1;
  font-weight: 700;
  color: var(--vowel);
}
.level .pics {
  font-size: min(5.5vmin, 44px);
  white-space: nowrap;
}
@media (orientation: portrait) {
  .level {
    width: min(calc((100vw - 8vmin - 6vmin) / 3), 240px);
  }
}
.level .stars {
  font-size: 4vmin;
  color: var(--glow);
  letter-spacing: 0.1em;
}

/* ---- build ---------------------------------------------------------- */
.build {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: 1.1fr auto 1fr;
  justify-items: center;
  align-items: center;
  padding: 3vmin;
  overflow: hidden;
}
.back {
  position: absolute;
  top: 2vmin;
  left: 2vmin;
  font-size: 6vmin;
  width: 11vmin;
  height: 11vmin;
  border-radius: 50%;
  background: var(--card);
  opacity: 0.8;
}
.picture {
  font-size: min(30vmin, 260px);
  line-height: 1;
  filter: drop-shadow(0 1vmin 0 rgba(0, 0, 0, 0.08));
}
.word-row {
  display: grid;
  gap: 1.5vmin;
  justify-items: center;
}
.slots {
  display: flex;
  gap: 2.5vmin;
}
.slot,
.tile {
  width: var(--tile);
  height: var(--tile);
  border-radius: 3vmin;
  display: grid;
  place-items: center;
  font-size: calc(var(--tile) * 0.72);
  font-weight: 700;
  line-height: 1;
}
.slot {
  border: 0.8vmin dashed var(--line);
  color: var(--ink);
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.slot.active {
  border-color: var(--glow);
  border-style: solid;
  background: color-mix(in srgb, var(--glow) 18%, transparent);
  animation: breathe 1.4s ease-in-out infinite;
}
.slot.filled {
  border-style: solid;
  border-color: transparent;
  background: var(--card);
  box-shadow: 0 0.8vmin 0 var(--line);
}
.slot.vowel,
.tile.vowel {
  color: var(--vowel);
}
.slot.lit {
  transform: translateY(-1.5vmin) scale(1.08);
  background: color-mix(in srgb, var(--glow) 35%, var(--card));
}
.sweep {
  width: calc(var(--tile) * 3 + 5vmin);
  height: 6vmin;
  position: relative;
  opacity: 0;
  border-bottom: 0.8vmin solid var(--line);
  border-radius: 1vmin;
}
.complete .sweep {
  opacity: 1;
}
.sweep .hand {
  position: absolute;
  left: 0;
  top: -1vmin;
  font-size: 6vmin;
  transform: translateX(-50%);
}
.sweep.sweeping .hand {
  animation: sweep var(--sweep-ms, 1500ms) linear forwards;
}
.tiles {
  display: flex;
  gap: 3vmin;
  flex-wrap: wrap;
  justify-content: center;
  align-self: start;
}
.tile {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 1vmin 0 var(--line);
  touch-action: none;
  position: relative;
  z-index: 1;
}
.tile.dragging {
  z-index: 5;
  box-shadow: 0 2.5vmin 3vmin rgba(0, 0, 0, 0.18);
}
.tile.flying {
  transition: transform 0.25s ease-out;
  z-index: 5;
}
.tile.used {
  visibility: hidden;
}
.next {
  position: absolute;
  right: 4vmin;
  bottom: 4vmin;
  width: 22vmin;
  height: 22vmin;
  border-radius: 50%;
  background: var(--good);
  color: #fff;
  font-size: 11vmin;
  box-shadow: 0 1.2vmin 0 #2b7a4d;
  animation: pop 0.35s ease-out, pulse 1.6s 0.35s ease-in-out infinite;
}
.next[hidden] {
  display: none;
}
.confetti {
  position: absolute;
  left: 50%;
  top: 35%;
  pointer-events: none;
}
.confetti span {
  position: absolute;
  font-size: 6vmin;
  animation: burst 1.2s var(--d) ease-out forwards;
  opacity: 0;
}

/* ---- motion --------------------------------------------------------- */
.wiggle {
  animation: wiggle 0.45s;
}
.bounce {
  animation: bounce 0.6s;
}
@keyframes wiggle {
  20%, 60% { transform: rotate(-9deg); }
  40%, 80% { transform: rotate(9deg); }
}
@keyframes bounce {
  30% { transform: scale(1.18) translateY(-3vmin); }
  60% { transform: scale(0.95); }
}
@keyframes breathe {
  50% { transform: scale(1.06); }
}
@keyframes pulse {
  50% { transform: scale(1.06); }
}
@keyframes pop {
  from { transform: scale(0); }
}
@keyframes sweep {
  to { left: 100%; }
}
@keyframes burst {
  0% { opacity: 1; transform: translate(0, 0) scale(0.4); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}