/* touch-action: manipulation kills the double-tap-to-zoom delay on tablets,
   which otherwise swallows fast repeated taps on the arrow buttons. */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

html, body { height: 100%; overscroll-behavior: none; }

body {
  font-family: "Comic Sans MS", "Segoe UI", sans-serif;
  background: linear-gradient(160deg, #aee7ff 0%, #d8f7c9 60%, #ffefb8 100%);
  overflow: hidden;
  user-select: none;
}

.screen {
  display: none;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  /* dvh keeps the board off the iPad address bar when it slides in and out */
  height: 100dvh;
  padding: 12px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  overflow-y: auto;
}
.screen.active { display: flex; }

.hidden { display: none !important; }

/* ---------- character select ---------- */
.title {
  font-size: clamp(2.2rem, 7vw, 4rem);
  color: #ff6f3c;
  text-shadow: 3px 3px 0 #fff, 5px 5px 0 rgba(0,0,0,.15);
  margin-top: 2vh;
  letter-spacing: 2px;
}
.subtitle { font-size: clamp(1.1rem, 3vw, 1.6rem); color: #3a6b35; margin: 1.5vh 0 2.5vh; }

.char-cards { display: flex; gap: 1.6vw 1.8vw; flex-wrap: wrap; justify-content: center; max-width: 1200px; }

/* twelve characters now, so the cards are a little smaller and wrap freely */
.char-card {
  width: clamp(104px, 13vw, 172px);
  padding: 14px 10px 12px;
  border: 6px solid transparent;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 8px 0 rgba(0,0,0,.15);
  cursor: pointer;
  transition: transform .15s;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.char-card:active { transform: scale(.94); }
.char-card:hover { transform: translateY(-6px); }
.char-card img { width: 80%; height: auto; image-rendering: pixelated; }
.char-card.puppy   { border-color: #ffb63c; }
.char-card.princess{ border-color: #ff8ac9; }
.char-card.robot   { border-color: #6fb7ff; }
.char-card.ptero   { border-color: #2ec4b6; }
.char-card.trex    { border-color: #ff8c1a; }
.char-card.bear    { border-color: #8a5a2b; }
.char-card.penguin { border-color: #4fc3f7; }
.char-card.owl     { border-color: #9575cd; }
.char-card.fox     { border-color: #ff7043; }
.char-card.turtle  { border-color: #43a047; }
.char-card.octopus { border-color: #ec407a; }
.char-card.dragon  { border-color: #c62828; }
.char-name { font-size: clamp(1.1rem, 2.4vw, 1.7rem); font-weight: bold; color: #444; }
.char-stars { font-size: 1rem; min-height: 1.2em; color: #f5a623; }

/* trophy + mute, tucked in the top right corner of the character select */
.corner-btns { position: absolute; top: 14px; right: 14px; display: flex; gap: 10px; }
#btn-trophies { border-color: #f5a623; background: #fffaf0; }

/* ---------- HUD ---------- */
.hud {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px;
  flex-shrink: 0;
}
.hud-title { font-size: clamp(1.2rem, 3vw, 1.8rem); font-weight: bold; color: #444; }
.hud-char { height: 44px; image-rendering: pixelated; }

.icon-btn {
  font-size: 1.6rem;
  background: #fff;
  border: 4px solid #ddd;
  border-radius: 16px;
  width: 58px; height: 58px;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,.12);
  flex-shrink: 0;
}
.icon-btn:active { transform: translateY(3px); box-shadow: none; }

.bolt-counter {
  margin-left: auto;
  font-size: 1.4rem;
  font-weight: bold;
  background: #fff;
  border-radius: 14px;
  padding: 6px 14px;
  border: 3px solid #f5a623;
  color: #b8860b;
}

.gem-counter {
  margin-left: auto;
  font-size: 1.4rem;
  font-weight: bold;
  background: #fff;
  border-radius: 14px;
  padding: 6px 14px;
  border: 3px solid #7b3fbf;
  color: #6a2fa8;
}
.key-counter {
  margin-left: auto;
  font-size: 1.4rem;
  font-weight: bold;
  background: #fff;
  border-radius: 14px;
  padding: 6px 14px;
  border: 3px solid #3fa14a;
  color: #2e7d32;
}
/* only the FIRST visible counter gets pushed to the right edge */
.bolt-counter:not(.hidden) + .gem-counter,
.gem-counter:not(.hidden) + .key-counter,
.bolt-counter:not(.hidden) + .gem-counter.hidden + .key-counter { margin-left: 10px; }

/* ---------- level select ---------- */
.level-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  align-content: center;
  flex: 1;
  max-width: 720px;
}
.level-btn {
  width: 96px; height: 96px;
  border-radius: 24px;
  border: 5px solid #6fb7ff;
  background: #fff;
  font-family: inherit;
  font-size: 2rem;
  font-weight: bold;
  color: #444;
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(0,0,0,.15);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.level-btn:active { transform: scale(.93); }
.level-btn.locked { filter: grayscale(1); opacity: .55; }
.level-btn .stars { font-size: .95rem; color: #f5a623; }

/* ---------- game board ---------- */
#board-wrap { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 0; }

#board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--grid), var(--cell));
  grid-template-rows: repeat(var(--grid), var(--cell));
  border: 6px solid #8a5a2b;
  border-radius: 14px;
  overflow: hidden;
  background: #b9e48b;
  box-shadow: 0 10px 0 rgba(0,0,0,.15);
}
.tile { width: var(--cell); height: var(--cell); }
.tile.alt { background: #a8d97a; }

/* ---------- ice (Penguin, Dragon): pure CSS, no sprite ---------- */
.tile.ice {
  position: relative;
  overflow: hidden;
  background: #dff1fb;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85);
}
.tile.ice.alt { background: #cfe9f8; }
/* a specular streak so it reads as slippery */
.tile.ice::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(118deg,
    transparent 34%, rgba(255, 255, 255, .95) 46%, rgba(255, 255, 255, .35) 52%, transparent 62%);
}
.tile-img {
  position: absolute;
  width: calc(var(--cell) * .82);
  height: calc(var(--cell) * .82);
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
  transition: transform .3s, opacity .3s;
}
.tile-img.collected { transform: scale(0); opacity: 0; }

/* numbered gems (T-Rex): must be collected in order */
.gem-wrap {
  position: absolute;
  width: calc(var(--cell) * .82);
  height: calc(var(--cell) * .82);
  pointer-events: none;
  transition: transform .3s, opacity .3s;
}
.gem-wrap img {
  width: 100%; height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.gem-wrap.collected { transform: scale(0); opacity: 0; }
.gem-badge {
  position: absolute;
  top: -4px; left: -4px;
  min-width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #7b3fbf;
  color: #6a2fa8;
  font-size: 1rem;
  font-weight: bold;
  line-height: 20px;
  text-align: center;
}
.gem-wrap.next .gem-badge { background: #7b3fbf; color: #fff; animation: gempulse 1.1s infinite; }
@keyframes gempulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.22); }
}

/* ---------- portals (Fox, Dragon) ---------- */
.tile-img.portal { animation: swirl 5s linear infinite; }
.tile-img.portal.pair2 { filter: hue-rotate(150deg); }
@keyframes swirl { to { transform: rotate(360deg); } }

/* ---------- keys & gates (Turtle, Dragon): tinted per index ---------- */
.tile-img.key.k1, .tile-img.gate.k1 { filter: hue-rotate(115deg); }
.tile-img.key.k2, .tile-img.gate.k2 { filter: hue-rotate(230deg); }
.tile-img.key { animation: keybob 1.6s ease-in-out infinite; }
@keyframes keybob {
  0%,100% { margin-top: 0; }
  50% { margin-top: -6px; }
}
/* an opened gate fades away and stops blocking */
.tile-img.gate { transition: opacity .4s, transform .4s; }
.tile-img.gate.open { opacity: .2; transform: scale(.8) rotate(-14deg); }

#actor {
  position: absolute;
  width: calc(var(--cell) * .9);
  height: calc(var(--cell) * .9);
  object-fit: contain;
  image-rendering: pixelated;
  transition: left .32s ease, top .32s ease;
  z-index: 5;
  pointer-events: none;
}
#actor.flip { transform: scaleX(-1); }
#actor.bounce { animation: bounce .5s; }
@keyframes bounce {
  0%,100% { margin-top: 0; }
  30% { margin-top: -12px; }
  60% { margin-top: 4px; }
}
#actor.celebrate { animation: celebrate .6s 2; }
@keyframes celebrate {
  0%,100% { margin-top: 0; }
  50% { margin-top: -18px; }
}
/* flying two tiles takes a little longer and hops up on the way */
#actor.flying {
  transition: left .46s ease-in-out, top .46s ease-in-out;
  animation: flyhop .46s;
  z-index: 6;
}
@keyframes flyhop {
  0%,100% { margin-top: 0; }
  50% { margin-top: -22px; }
}
/* one tile of an ice slide or a zoom run: quick and linear */
#actor.sliding { transition: left .13s linear, top .13s linear; }
/* popping through a portal */
#actor.warping { animation: warp .48s; }
@keyframes warp {
  0% { transform: scale(1) rotate(0); }
  45% { transform: scale(.15) rotate(240deg); }
  55% { transform: scale(.15) rotate(300deg); }
  100% { transform: scale(1) rotate(360deg); }
}
#actor.flip.warping { animation: warpflip .48s; }
@keyframes warpflip {
  0% { transform: scaleX(-1) scale(1) rotate(0); }
  45% { transform: scaleX(-1) scale(.15) rotate(240deg); }
  55% { transform: scaleX(-1) scale(.15) rotate(300deg); }
  100% { transform: scaleX(-1) scale(1) rotate(360deg); }
}

/* ---------- program bar ---------- */
#program-bar { width: 100%; max-width: 900px; display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; flex-shrink: 0; }

.tray {
  min-height: 68px;
  background: rgba(255,255,255,.75);
  border: 4px dashed #999;
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  flex-wrap: wrap;
}
.tray:empty::after {
  content: "Tap arrows to make your plan!";
  color: #999;
  font-size: 1rem;
}
.tray-block {
  font-size: 1.6rem;
  background: #fff;
  border: 3px solid #6fb7ff;
  border-radius: 12px;
  padding: 6px 10px;
  cursor: pointer;
  font-family: inherit;
  font-weight: bold;
  box-shadow: 0 3px 0 rgba(0,0,0,.12);
}
.tray-block.running { border-color: #ff6f3c; background: #ffe8dd; }
.tray-block .rep { color: #d33; font-size: 1.1rem; vertical-align: middle; }
.tray-block.fly { border-color: #2ec4b6; background: #eefbf9; }
.tray-block .wing { font-size: 1.2rem; vertical-align: middle; }
.tray-block.zoom { border-color: #7e57c2; background: #f2edfb; }
.tray-block .puff { font-size: 1.2rem; vertical-align: middle; }
.tray-block.macro { border-color: #8a5a2b; background: #fff4e6; }
.tray-block.macro2 { border-color: #ec407a; background: #ffeef4; }

/* ---------- trick trays (Bear's Paw Power, Octopus' two tricks) ---------- */
.macro-bar { display: flex; align-items: center; gap: 8px; }
.macro-label { font-size: 1.8rem; flex-shrink: 0; }
.macro-tray {
  flex: 1;
  min-height: 56px;
  border-color: #8a5a2b;
  background: rgba(255, 244, 230, .8);
}
.macro-tray:empty::after {
  content: "Tap the pencil, then arrows, to teach a trick!";
  color: #a1815e;
  font-size: 1rem;
}
.macro-bar.teaching .macro-tray { border-style: solid; background: #ffe9cc; box-shadow: 0 0 0 4px #f0c48a; }
.tray-block.macro-step { border-color: #8a5a2b; }

/* second tray (Octopus): same shape, pink so the two never get mixed up */
.macro2-bar .macro-tray { border-color: #ec407a; background: rgba(255, 238, 244, .85); }
.macro2-bar .macro-tray:empty::after { color: #c2185b; }
.macro2-bar.teaching .macro-tray { border-style: solid; background: #ffdfe9; box-shadow: 0 0 0 4px #f7a8c4; }
.tray-block.macro-step.macro2 { border-color: #ec407a; }

.palette { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; align-items: center; }

.cmd-btn {
  font-size: 1.8rem;
  font-family: inherit;
  width: 64px; height: 64px;
  border-radius: 18px;
  border: 5px solid #6fb7ff;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 5px 0 rgba(0,0,0,.15);
}
.cmd-btn:active { transform: translateY(3px); box-shadow: none; }
.cmd-btn.repeat { border-color: #d33; color: #d33; font-weight: bold; }
.cmd-btn.repeat.armed { background: #ffd9d9; transform: scale(1.08); }
.cmd-btn.fly { border-color: #2ec4b6; }
.cmd-btn.fly.armed { background: #cbf4ef; transform: scale(1.08); }
.cmd-btn.zoom { border-color: #7e57c2; }
.cmd-btn.zoom.armed { background: #e2d6f7; transform: scale(1.08); }
.cmd-btn.macro-teach {
  border-color: #8a5a2b;
  border-style: dashed;
  font-size: 1.2rem;
}
.cmd-btn.macro-teach.armed { background: #ffe0b8; border-style: solid; transform: scale(1.08); }
.cmd-btn.macro-call { border-color: #8a5a2b; background: #fff4e6; }
.cmd-btn.macro-teach.macro2 { border-color: #ec407a; }
.cmd-btn.macro-teach.macro2.armed { background: #ffdfe9; }
.cmd-btn.macro-call.macro2 { border-color: #ec407a; background: #ffeef4; }
.cmd-btn.util { border-color: #f5a623; }
.cmd-btn.play {
  border-color: #2e9e44;
  background: #3fbf5a;
  color: #fff;
  width: 100px;
  font-size: 2.2rem;
}
.cmd-btn:disabled { opacity: .4; cursor: default; }

/* ---------- win overlay ---------- */
.overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
}
.overlay-card {
  background: #fff;
  border-radius: 30px;
  padding: 36px 48px;
  text-align: center;
  box-shadow: 0 12px 0 rgba(0,0,0,.25);
  animation: pop .35s;
}
@keyframes pop { from { transform: scale(.5); } to { transform: scale(1); } }
.win-stars { font-size: 3rem; color: #f5a623; }
.win-text { font-size: 2rem; color: #444; margin: 10px 0 22px; }
.big-btn {
  font-family: inherit;
  font-size: 1.8rem;
  padding: 14px 30px;
  border-radius: 20px;
  border: 5px solid #2e9e44;
  background: #3fbf5a;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(0,0,0,.18);
  margin: 0 8px;
}
.big-btn:active { transform: translateY(3px); box-shadow: none; }
.big-btn.small { background: #fff; color: #444; border-color: #bbb; font-size: 1.4rem; }

/* ---------- trophy room ---------- */
.badge-count {
  margin-left: auto;
  font-size: 1.4rem;
  font-weight: bold;
  background: #fff;
  border-radius: 14px;
  padding: 6px 14px;
  border: 3px solid #f5a623;
  color: #b8860b;
}

.badge-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-content: flex-start;
  width: 100%;
  max-width: 960px;
  padding: 10px 4px 24px;
}
.badge-card {
  width: clamp(104px, 12vw, 140px);
  min-height: 132px;
  padding: 12px 8px 10px;
  border: 5px solid #f5a623;
  border-radius: 24px;
  background: #fff;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(0,0,0,.15);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.badge-card:active { transform: scale(.93); }
.badge-card:hover { transform: translateY(-4px); }
.badge-emoji { font-size: 2.8rem; line-height: 1.1; }
.badge-name { font-size: .95rem; font-weight: bold; color: #444; text-align: center; line-height: 1.15; }
.badge-card.earned { background: linear-gradient(160deg, #fff8e1 0%, #ffe9a8 100%); }
.badge-card.locked {
  border-color: #c7c7c7;
  border-style: dashed;
  background: #ededed;
}
.badge-card.locked .badge-emoji { color: #9a9a9a; }
.badge-card.locked .badge-name { color: #9a9a9a; }

/* ---------- badge unlock toast ---------- */
.badge-toast {
  position: fixed;
  top: 0; left: 50%;
  z-index: 200;                      /* above the win overlay (50) */
  transform: translate(-50%, -140%);
  transition: transform .42s cubic-bezier(.2, 1.4, .4, 1);
  display: flex; align-items: center; gap: 16px;
  padding: 14px 30px 16px;
  border: 6px solid #f5a623;
  border-top: none;
  border-radius: 0 0 28px 28px;
  background: linear-gradient(160deg, #fffdf3 0%, #ffe9a8 100%);
  box-shadow: 0 8px 0 rgba(0,0,0,.2);
  pointer-events: none;
  max-width: 92vw;
}
.badge-toast.show { transform: translate(-50%, 0); }
.badge-toast-emoji { font-size: clamp(2.4rem, 7vw, 3.4rem); }
/* keyed off .show so the pop replays for the second badge in a queue */
.badge-toast.show .badge-toast-emoji { animation: badgepop .5s; }
@keyframes badgepop {
  0% { transform: scale(0) rotate(-40deg); }
  70% { transform: scale(1.35) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}
.badge-toast-text { display: flex; flex-direction: column; align-items: flex-start; }
.badge-toast-kicker { font-size: 1rem; color: #b8860b; }
.badge-toast-name { font-size: clamp(1.3rem, 4vw, 2rem); font-weight: bold; color: #d2691e; }

/* ---------- confetti ---------- */
#confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 100; overflow: hidden; }
.confetto {
  position: absolute;
  width: 12px; height: 12px;
  top: -20px;
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translateY(110vh) rotate(720deg); }
}