:root {
  --sky: #5c94fc;
  --sky-light: #8fb6ff;
  --red: #e52521;
  --green: #43b047;
  --blue: #2a5bd7;
  --gold: #fbd000;
  --brick: #c84c0c;
  --brick-dark: #5a1a00;
  --ink: #1a1a2e;
  --white: #ffffff;
  --ground-h: clamp(36px, 7vh, 64px);
  --font: 'Fredoka', 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background: var(--sky);
  color: var(--ink);
  font-family: var(--font);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button {
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

[hidden] { display: none !important; }

.sprite { display: block; width: 100%; height: 100%; pointer-events: none; }

#app {
  position: relative;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(var(--sky) 60%, var(--sky-light));
  padding-top: env(safe-area-inset-top);
}

/* ---------- Scenery ---------- */
.clouds span {
  position: absolute;
  width: 18vmin;
  height: 7vmin;
  background: #fff;
  border-radius: 50px;
  opacity: 0.9;
  animation: drift 60s linear infinite;
}
.clouds span::before, .clouds span::after {
  content: '';
  position: absolute;
  background: #fff;
  border-radius: 50%;
}
.clouds span::before { width: 8vmin; height: 8vmin; left: 3vmin; top: -4vmin; }
.clouds span::after { width: 6vmin; height: 6vmin; left: 9vmin; top: -2.5vmin; }
.clouds span:nth-child(1) { top: 14%; left: 10%; }
.clouds span:nth-child(2) { top: 30%; left: 60%; animation-duration: 80s; transform: scale(0.8); }
.clouds span:nth-child(3) { top: 8%; left: 80%; animation-duration: 70s; }
@keyframes drift { from { translate: 0 0; } 50% { translate: -6vw 0; } to { translate: 0 0; } }

.ground {
  height: var(--ground-h);
  flex: none;
  background:
    linear-gradient(90deg, transparent 47%, var(--brick-dark) 47% 53%, transparent 53%) 0 0 / 40px 50% repeat-x,
    linear-gradient(90deg, transparent 22%, var(--brick-dark) 22% 28%, transparent 28%) 0 100% / 40px 50% repeat-x,
    linear-gradient(transparent 46%, var(--brick-dark) 46% 54%, transparent 54%),
    var(--brick);
  border-top: 4px solid var(--brick-dark);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---------- Top bar ---------- */
.topbar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 0;
  flex: none;
}
.top-slot { flex: 1; min-width: 0; display: flex; justify-content: center; align-items: center; }
.round-btn {
  width: clamp(56px, 10vmin, 84px);
  height: clamp(56px, 10vmin, 84px);
  border-radius: 50%;
  border: 4px solid #fff;
  background: var(--red);
  font-size: clamp(26px, 5vmin, 40px);
  line-height: 1;
  box-shadow: 0 5px 0 #8b0f0c;
  display: grid;
  place-items: center;
  padding: 0;
}
.round-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #8b0f0c; }
.round-btn.small {
  width: clamp(40px, 7vmin, 56px);
  height: clamp(40px, 7vmin, 56px);
  font-size: clamp(18px, 3.4vmin, 26px);
  background: rgba(255, 255, 255, 0.35);
  border-width: 3px;
  box-shadow: none;
  color: #fff;
}

/* ---------- Views ---------- */
.view {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px 8px;
}

/* ---------- Home ---------- */
.title {
  margin: 0 0 2vh;
  font-size: clamp(40px, 11vmin, 110px);
  font-weight: 700;
  letter-spacing: 0.02em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-shadow: 0.05em 0.06em 0 var(--ink);
  -webkit-text-stroke: 0.035em var(--ink);
  paint-order: stroke fill;
}
.title span { display: inline-block; animation: bounce 2.4s ease-in-out infinite; }
.title .gap { width: 0.35em; }
.title span:nth-child(5n+1) { color: var(--red); }
.title span:nth-child(5n+2) { color: var(--gold); animation-delay: .15s; }
.title span:nth-child(5n+3) { color: var(--green); animation-delay: .3s; }
.title span:nth-child(5n+4) { color: #4cc3ff; animation-delay: .45s; }
.title span:nth-child(5n) { color: #fff; animation-delay: .6s; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8%); } }

.tiles {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(16px, 4vmin, 40px);
  align-content: center;
}
.tile {
  position: relative;
  border: 6px solid #fff;
  border-radius: 32px;
  padding: 3vmin 3vmin 2vmin;
  min-height: 0;
  max-height: 52vh;
  aspect-ratio: 4 / 3;
  justify-self: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.25);
  transition: transform 0.12s;
}
.tile:active { transform: scale(0.96) translateY(6px); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25); }
.tile-letters { background: linear-gradient(#ffd85a, #f8b800); }
.tile-maze { background: linear-gradient(#5fd06a, #2f9e44); }
.tile-art {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 4%;
}
.tile-art .sprite { width: auto; height: 90%; max-width: 45%; }
.tile-letters .tile-art .sprite:first-child { animation: bob 1.6s ease-in-out infinite; align-self: flex-start; height: 60%; }
.tile-maze .tile-art .sprite:first-child { animation: spin 1.4s linear infinite; height: 55%; align-self: center; }
.tile-label {
  font-size: clamp(28px, 6vmin, 60px);
  font-weight: 700;
  color: #fff;
  -webkit-text-stroke: 0.06em var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 4px 0 var(--ink);
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10%); } }
@keyframes spin { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.15); } }

/* ---------- Letters game ---------- */
#view-letters { gap: 1.2vh; }

.lt-modes {
  display: flex;
  gap: 10px;
}
.lt-modes button {
  font-size: clamp(18px, 3.6vmin, 30px);
  font-weight: 700;
  padding: 0.35em 0.8em;
  border-radius: 999px;
  border: 3px solid #fff;
  background: rgba(255, 255, 255, 0.35);
  color: var(--ink);
}
.lt-modes button.on { background: var(--gold); box-shadow: 0 4px 0 #a27a00; }

.lt-progress { display: flex; gap: 6px; height: clamp(28px, 5.5vmin, 48px); flex: none; }
.lt-progress span { width: clamp(22px, 4.5vmin, 40px); opacity: 0.25; filter: grayscale(1); transition: 0.3s; }
.lt-progress span.got { opacity: 1; filter: none; animation: pop 0.4s; }

.lt-stage {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: grid;
  grid-template-rows: 1fr auto auto;
  justify-items: center;
  align-items: end;
}
.lt-reward {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 0;
  height: 100%;
  width: 100%;
}
.lt-reward:has(.count-coin) { flex-direction: row; flex-wrap: wrap; align-content: flex-end; justify-content: center; gap: 1vmin; }
.lt-pic { height: min(18vh, 26vw); aspect-ratio: 1; animation: rise 0.5s ease-out; display: grid; place-items: center; }
.lt-pic .emoji { font-size: min(15vh, 22vw); line-height: 1; }
.lt-word {
  font-size: clamp(22px, 5vmin, 44px);
  font-weight: 700;
  color: #fff;
  -webkit-text-stroke: 0.06em var(--ink);
  paint-order: stroke fill;
  animation: pop 0.4s;
}
.lt-word b { color: var(--gold); }
.count-coin { position: relative; width: min(9vh, 9vw); animation: rise 0.4s ease-out; }
.count-coin b {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: min(4vh, 4vw); color: var(--ink);
}

.lt-block {
  width: min(30vh, 46vw);
  aspect-ratio: 1;
  background: #f8b800;
  border: 6px solid #8a4a00;
  border-radius: 14px;
  display: grid;
  place-items: center;
  position: relative;
  box-shadow: inset 0 0 0 6px #ffd85a, 0 6px 0 rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.lt-block::before, .lt-block::after {
  content: '';
  position: absolute;
  width: 6%; aspect-ratio: 1; border-radius: 50%; background: #8a4a00;
  top: 7%; left: 7%;
  box-shadow: calc(min(30vh, 46vw) * 0.74) 0 #8a4a00;
}
.lt-block::after { top: auto; bottom: 7%; }
.lt-char {
  font-size: min(22vh, 34vw);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-shadow: 0.05em 0.05em 0 #8a4a00;
}
.lt-block.appear { animation: pop 0.35s; }
.lt-block.bump { animation: bump 0.3s; }
.lt-block.shake { animation: shake 0.4s; }

.lt-hero { width: min(15vh, 22vw); aspect-ratio: 1; margin-top: 1vh; }
.lt-hero.jump { animation: jump 0.55s cubic-bezier(.3, .7, .4, 1); }

@keyframes pop { 0% { transform: scale(0.4); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes bump { 50% { transform: translateY(-14%); } }
@keyframes shake { 20%, 60% { transform: translateX(-5%) rotate(-3deg); } 40%, 80% { transform: translateX(5%) rotate(3deg); } }
@keyframes jump { 45% { transform: translateY(-55%); } 100% { transform: translateY(0); } }
@keyframes rise { from { transform: translateY(40%) scale(0.5); opacity: 0; } to { transform: none; opacity: 1; } }

.lt-choices {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(8px, 2vmin, 20px);
  max-width: 100%;
}
.brick-btn {
  width: clamp(48px, 7vmin, 64px);
  aspect-ratio: 1;
  border: 4px solid var(--brick-dark);
  border-radius: 10px;
  background: var(--brick);
  color: #fff;
  font-size: clamp(24px, 4vmin, 38px);
  font-weight: 700;
  line-height: 1;
  padding: 0;
  text-shadow: 0 3px 0 var(--brick-dark);
  box-shadow: inset 0 0 0 3px #f08a5a, 0 5px 0 rgba(0, 0, 0, 0.3);
}
.brick-btn.big { width: min(17vh, 26vw); border-width: 6px; font-size: min(11vh, 16vw); border-radius: 16px; }
.brick-btn:active { transform: translateY(4px); }
.brick-btn.picked { background: #f8b800; border-color: #8a4a00; text-shadow: 0 3px 0 #8a4a00; box-shadow: inset 0 0 0 3px #ffd85a; }
.brick-btn.wobble { animation: shake 0.4s; }
.brick-btn.hint { animation: glow 0.9s ease-in-out infinite; }
@keyframes glow { 50% { transform: scale(1.1); box-shadow: 0 0 0 6px #fff, 0 0 30px 10px var(--gold); } }

[data-mode="free"] .lt-choices { max-width: min(100%, 900px); gap: 8px; }

/* ---------- Coin Maze ---------- */
#view-maze { gap: 1vh; }
.mz-hud {
  display: flex;
  align-items: center;
  gap: 18px;
  height: clamp(56px, 10vmin, 84px);
}
.mz-count { display: flex; align-items: center; gap: 6px; }
.mz-count .sprite { width: clamp(30px, 6vmin, 50px); height: auto; }
.mz-count b {
  font-size: clamp(28px, 6vmin, 52px);
  color: #fff;
  -webkit-text-stroke: 0.07em var(--ink);
  paint-order: stroke fill;
  min-width: 2ch;
}
.mz-level { display: flex; gap: 4px; }
.mz-level span { width: clamp(22px, 4.5vmin, 38px); opacity: 0.3; filter: grayscale(1); }
.mz-level span.on { opacity: 1; filter: none; }

.mz-wrap {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  gap: 2vmin;
  align-items: center;
  justify-content: center;
}
.mz-board {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: grid;
  place-items: center;
}
.mz-board canvas {
  border: 5px solid var(--ink);
  border-radius: 10px;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.25);
  touch-action: none;
  box-sizing: content-box;
}

.dpad {
  display: none;
  grid-template: '. up .' 1fr 'left . right' 1fr '. down .' 1fr / 1fr 1fr 1fr;
  width: clamp(170px, 30vmin, 260px);
  aspect-ratio: 1;
  flex: none;
  gap: 4px;
}
.dpad button {
  border: 4px solid #fff;
  border-radius: 18px;
  background: var(--red);
  color: #fff;
  font-size: clamp(26px, 5vmin, 42px);
  box-shadow: 0 5px 0 #8b0f0c;
  padding: 0;
  touch-action: none;
}
.dpad button:active { transform: translateY(4px); box-shadow: 0 1px 0 #8b0f0c; }
.dpad [data-dir="up"] { grid-area: up; }
.dpad [data-dir="down"] { grid-area: down; }
.dpad [data-dir="left"] { grid-area: left; }
.dpad [data-dir="right"] { grid-area: right; }
@media (any-pointer: coarse) { .dpad { display: grid; } }
@media (orientation: portrait) { .mz-wrap { flex-direction: column; } .mz-board { width: 100%; height: auto; flex: 1; min-height: 0; } }

.mz-pick {
  position: absolute;
  inset: 0 16px 8px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4vmin;
  background: rgba(92, 148, 252, 0.94);
  border-radius: 24px;
}
.mz-pick-title {
  font-size: clamp(32px, 8vmin, 72px);
  font-weight: 700;
  color: #fff;
  -webkit-text-stroke: 0.06em var(--ink);
  paint-order: stroke fill;
}
.mz-pick-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 3vmin; }
.mz-pick-row button {
  width: clamp(110px, 22vmin, 200px);
  aspect-ratio: 1;
  border-radius: 28px;
  border: 6px solid #fff;
  background: var(--gold);
  padding: 8%;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.25);
  animation: bob 1.8s ease-in-out infinite;
}
.mz-pick-row button:nth-child(2) { animation-delay: .2s; }
.mz-pick-row button:nth-child(3) { animation-delay: .4s; }
.mz-pick-row button:nth-child(4) { animation-delay: .6s; }
.mz-pick-row button:active { transform: scale(0.94); }

/* ---------- Celebration ---------- */
.party {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: radial-gradient(circle, rgba(255, 230, 120, 0.95), rgba(248, 184, 0, 0.95));
  display: grid;
  place-items: center;
  overflow: hidden;
}
.party-card { display: flex; flex-direction: column; align-items: center; gap: 2vmin; animation: pop 0.5s; }
.party-hero { width: min(45vh, 60vw); aspect-ratio: 1; animation: dance 0.7s ease-in-out infinite alternate; }
.party-title {
  font-size: clamp(40px, 10vmin, 100px);
  font-weight: 700;
  color: #fff;
  -webkit-text-stroke: 0.06em var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 6px 0 var(--ink);
}
.rain { position: absolute; top: -15vmin; aspect-ratio: 1; animation: fall 2.6s linear infinite; }
@keyframes dance { from { transform: rotate(-8deg) translateY(0); } to { transform: rotate(8deg) translateY(-6%); } }
@keyframes fall { to { transform: translateY(125vh) rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- Layout tweaks by screen shape ---------- */
@media (orientation: landscape) {
  .lt-stage { grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr auto; column-gap: 3vw; }
  .lt-block { grid-column: 2; grid-row: 1; }
  .lt-hero { grid-column: 2; grid-row: 2; }
  .lt-reward { grid-column: 3; grid-row: 1 / span 2; justify-content: center; align-self: center; }
  .lt-reward:has(.count-coin) { justify-content: flex-start; align-content: center; }
  .lt-pic { height: min(28vh, 20vw); }
  .lt-pic .emoji { font-size: min(24vh, 17vw); }
  .count-coin { width: min(11vh, 7vw); }
}
@media (orientation: portrait) {
  .count-coin { width: min(9vh, 10vw); }
}
@media (max-width: 560px) {
  #fsBtn { display: none; }
  .topbar { gap: 6px; padding: 8px 10px 0; }
  .lt-modes { gap: 5px; }
  .lt-modes button { font-size: 16px; padding: 0.35em 0.55em; }
  .mz-hud { gap: 10px; }
}