/* Fredoka (SIL OFL, see fonts/OFL.txt), self-hosted: latin subset,
   variable weight 400–700. */
@font-face {
  font-family: "Fredoka";
  src: url("fonts/fredoka-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --font-fun: "Fredoka", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bg: #ffeedd;
  --fg: #3b2f2a;
  --accent: #f07a3b;
  --accent-fg: #ffffff;
  --muted: #7d6a60;
  --cell-radius: 18px;
  /* Colour blobs of the animated background */
  --blob-1: #ffb98f;
  --blob-2: #ffc2dd;
  --blob-3: #ffe98a;
  --blob-4: #b9ecd6;
  /* Title letters cycle through these */
  --title-1: #e2475a;
  --title-2: #7a4fd8;
  --title-3: #168f7c;
  --title-4: #e07400;
  --title-5: #2c78d4;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #3b2150;
    --fg: #fbf1ea;
    --accent: #ffa36b;
    --accent-fg: #2d1840;
    --muted: #dcc6d6;
    --blob-1: #a8436f;
    --blob-2: #6d3c9c;
    --blob-3: #c0703a;
    --blob-4: #2f6a8f;
    --title-1: #ff8a8a;
    --title-2: #ffd166;
    --title-3: #7ee6c6;
    --title-4: #ffa86b;
    --title-5: #9fc3ff;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* Slowly drifting colour blobs. An oversized layer moved only with
   transform, so the animation stays on the compositor (no repaints). */
body::before {
  content: "";
  position: fixed;
  inset: -50vmax;
  z-index: -1;
  background:
    radial-gradient(circle at 35% 35%, var(--blob-1) 0, transparent 22%),
    radial-gradient(circle at 65% 38%, var(--blob-2) 0, transparent 24%),
    radial-gradient(circle at 40% 66%, var(--blob-3) 0, transparent 22%),
    radial-gradient(circle at 63% 63%, var(--blob-4) 0, transparent 22%),
    var(--bg);
  animation: background-drift 36s ease-in-out infinite alternate;
}

@keyframes background-drift {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(40deg) scale(1.15) translate(3%, -2%); }
  100% { transform: rotate(-25deg) scale(1.05) translate(-3%, 2%); }
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
  }
}

/* ---- Stage and character cells ---- */

#stage {
  position: fixed;
  inset: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.cell {
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              width 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* The gap between cells comes from the SVG being a bit smaller than its
   cell (percentages of the cell, so it scales with the grid). */
.cell svg {
  display: block;
  width: 94%;
  height: 94%;
  margin: 3%;
  border-radius: var(--cell-radius);
  box-shadow: 0 6px 20px rgb(40 10 40 / 0.18);
}

.cell.entering svg {
  animation: pop-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes pop-in {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Less movement: cells jump to their new places and fade in. */
@media (prefers-reduced-motion: reduce) {
  .cell {
    transition: none;
  }

  .cell.entering svg {
    animation-name: fade-in;
  }
}

/* ---- Screens ---- */

.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 16px;
  text-align: center;
}

.screen[hidden] {
  display: none;
}

#screen-end {
  background: color-mix(in srgb, var(--bg) 55%, transparent);
}

h1 {
  --bounce: 0.14em;
  margin: 0;
  font-family: var(--font-fun);
  font-size: clamp(3rem, 10vw, 6rem);
  font-weight: 600;
  text-shadow: 0 0.05em 0 rgb(40 10 40 / 0.18);
}

/* Every letter of the title in a different colour. */
h1 > span:nth-child(5n + 1) { color: var(--title-1); }
h1 > span:nth-child(5n + 2) { color: var(--title-2); }
h1 > span:nth-child(5n + 3) { color: var(--title-3); }
h1 > span:nth-child(5n + 4) { color: var(--title-4); }
h1 > span:nth-child(5n + 5) { color: var(--title-5); }

.big-button {
  --bounce: 0.08em;
  min-width: 12rem;
  padding: 0.9rem 2.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-fg);
  font: inherit;
  font-family: var(--font-fun);
  font-size: 1.6rem;
  font-weight: 600;
  cursor: pointer;
}

/* Letters that bob and tilt in a wave, as if the text were laughing.
   Spans are created by setBouncyText() in main.js. */
.bouncy > span {
  display: inline-block;
  animation: letter-bounce 1.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.11s - 2s);
}

@keyframes letter-bounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(calc(var(--bounce) * -1)) rotate(-5deg); }
  50% { transform: translateY(calc(var(--bounce) * 0.25)) rotate(3deg); }
  75% { transform: translateY(calc(var(--bounce) * -0.4)) rotate(-1deg); }
}

.big-button:disabled > span {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .bouncy > span {
    animation: none;
  }
}

.big-button:disabled {
  opacity: 0.6;
  cursor: default;
}

.big-button:focus-visible,
.stop-button:focus-visible {
  outline: 3px solid var(--fg);
  outline-offset: 3px;
}

.hint {
  margin: 0;
  color: var(--muted);
}

.error {
  max-width: 32rem;
  margin: 0;
  color: #d64545;
}

/* The only way to end a session, so it must be easy to find, but it
   shouldn't compete with the faces. */
.stop-button {
  position: fixed;
  z-index: 1;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  padding: 0.6rem 1.4rem;
  border: 2px solid color-mix(in srgb, var(--fg) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  box-shadow: 0 4px 14px rgb(40 10 40 / 0.25);
  color: var(--fg);
  font: inherit;
  font-family: var(--font-fun);
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
}

.stop-button[hidden] {
  display: none;
}