@font-face {
  font-family: 'Fredoka';
  src: url('fonts/fredoka.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff3c4;
  font-family: 'Fredoka', "Arial Rounded MT Bold", system-ui, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}
body.started { cursor: none; }

/* ---------- title screen ---------- */

#start {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 15%, #fff8dc 0, transparent 45%),
    radial-gradient(circle at 85% 85%, #ffe0ec 0, transparent 50%),
    linear-gradient(160deg, #ffe066 0%, #ffd8a8 45%, #ffc9de 100%);
  color: #3d2c5e;
  cursor: pointer;
  z-index: 10;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}
body.started #start { display: none; }

.title {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: min(2.5vh, 1.5rem);
  max-width: 100%;
  min-height: 0;
  padding-bottom: min(2.5vh, 1.5rem);
}
.title > * { flex-shrink: 0; }

/* Per-letter pages: small logo link above a "T is for Truck" heading. */
.logo.logo-small {
  font-size: clamp(1.6rem, min(5vw, 6vh), 3rem);
  text-decoration: none;
}
.letter-heading {
  font-size: clamp(2.2rem, min(8vw, 9vh), 5.5rem);
  font-weight: 700;
  line-height: 1.05;
  color: #3d2c5e;
  text-align: center;
  text-shadow: 0 0.06em 0 rgba(255, 255, 255, 0.8);
}
.letter-heading b { color: #ff5c8a; font-size: 1.15em; }

.logo {
  font-size: clamp(3rem, min(13vw, 15vh), 9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  animation: logo-in 0.8s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
.logo span {
  display: inline-block;
  color: var(--c);
  text-shadow:
    0 0 0.06em #fff,
    0 0.05em 0 color-mix(in srgb, var(--c) 60%, #000),
    0 0.12em 0.18em rgba(61, 44, 94, 0.18);
  animation: hop 2.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.12s);
}
.logo span:nth-child(1) { --c: #ff5c5c; --i: 0; }
.logo span:nth-child(2) { --c: #ff922b; --i: 1; }
.logo span:nth-child(3) { --c: #f5b700; --i: 2; }
.logo span:nth-child(4) { --c: #51cf66; --i: 3; }
.logo span:nth-child(5) { --c: #339af0; --i: 4; margin-left: 0.04em; }
.logo span:nth-child(6) { --c: #845ef7; --i: 5; }
.logo span:nth-child(7) { --c: #f06595; --i: 6; }
.logo span:nth-child(8) { --c: #20c997; --i: 7; }
.logo span:nth-child(9) { --c: #ff5c5c; --i: 8; }

@keyframes hop {
  0%, 70%, 100% { transform: translateY(0) rotate(0); }
  80%           { transform: translateY(-0.12em) rotate(-4deg); }
  90%           { transform: translateY(0.02em) rotate(2deg); }
}
@keyframes logo-in {
  from { transform: scale(0.3); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.hero {
  width: min(78vw, 92vh, 760px);
  height: auto;
  max-height: 46vh;
  min-height: 0;
  flex-shrink: 1;
  object-fit: contain;
  filter: drop-shadow(0 1.2vh 1.5vh rgba(61, 44, 94, 0.18));
  animation: bob 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-1.5vh) rotate(1deg); }
}

.play {
  font-size: clamp(1.3rem, min(4.5vw, 5vh), 2.4rem);
  font-weight: 700;
  color: #fff;
  background: #ff5c8a;
  padding: 0.45em 1.3em 0.5em;
  border-radius: 999px;
  box-shadow: 0 0.2em 0 #d63a6a, 0 0.5em 1em rgba(214, 58, 106, 0.3);
  animation: pulse 1.6s ease-in-out infinite;
  text-align: center;
}
.for-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .for-keys, .hint { display: none; }
  .for-touch { display: inline; }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

.about {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  max-width: 56rem;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(61, 44, 94, 0.7);
}
.about nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.letters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  list-style: none;
}
.letters a {
  display: inline-grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  color: #3d2c5e;
  font-weight: 700;
  text-decoration: none;
}
.letters a:hover, .letters a:focus-visible { background: #fff; color: #ff5c8a; }
.letters a[aria-current] { background: #ff5c8a; color: #fff; }
.hint { color: rgba(61, 44, 94, 0.55); }
@media (max-height: 560px) {
  .about > p:first-child { display: none; }
}
kbd {
  border: 2px solid rgba(61, 44, 94, 0.35);
  border-bottom-width: 3px;
  border-radius: 6px;
  padding: 0 6px;
  background: rgba(255, 255, 255, 0.7);
  font-family: inherit;
}

.bubbles span {
  position: absolute;
  bottom: -20vmin;
  width: var(--s);
  height: var(--s);
  left: var(--x);
  border-radius: 50%;
  background: var(--c);
  opacity: 0.35;
  animation: rise var(--d) linear infinite;
  animation-delay: var(--delay);
}
.bubbles span:nth-child(1) { --s: 9vmin;  --x: 6%;  --c: #ff8787; --d: 14s; --delay: -2s; }
.bubbles span:nth-child(2) { --s: 5vmin;  --x: 18%; --c: #74c0fc; --d: 11s; --delay: -7s; }
.bubbles span:nth-child(3) { --s: 12vmin; --x: 30%; --c: #b197fc; --d: 18s; --delay: -11s; }
.bubbles span:nth-child(4) { --s: 6vmin;  --x: 47%; --c: #63e6be; --d: 12s; --delay: -4s; }
.bubbles span:nth-child(5) { --s: 10vmin; --x: 62%; --c: #ffa94d; --d: 16s; --delay: -9s; }
.bubbles span:nth-child(6) { --s: 4vmin;  --x: 74%; --c: #f783ac; --d: 10s; --delay: -1s; }
.bubbles span:nth-child(7) { --s: 8vmin;  --x: 86%; --c: #4dabf7; --d: 15s; --delay: -6s; }
.bubbles span:nth-child(8) { --s: 6vmin;  --x: 94%; --c: #a9e34b; --d: 13s; --delay: -12s; }
@keyframes rise {
  from { transform: translateY(0) scale(0.8); }
  to   { transform: translateY(-140vh) scale(1.1); }
}

/* ---------- play screen ---------- */

#stage {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background-color 0.25s ease;
}

#picture {
  width: 100vw;
  height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: min(62vh, 80vw);
  line-height: 1;
}
#picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#picture.digit {
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0.04em 0 rgba(0, 0, 0, 0.18);
}

#word {
  font-size: min(10vh, 12vw);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0.06em 0 rgba(0, 0, 0, 0.2);
  letter-spacing: 0.02em;
}
#word .letter { font-size: 1.15em; }

.pop { animation: pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes pop {
  0%   { transform: scale(0.2) rotate(-12deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
#picture span { display: inline-block; }
.wiggle { animation: wiggle 1.2s ease-in-out 0.45s infinite; }
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-4deg) scale(1.03); }
  75%      { transform: rotate(4deg) scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  .pop, .wiggle, .logo, .logo span, .hero, .play, .bubbles span { animation: none; }
}