/* ---------- Character select ---------- */
.screen-select .picker {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 28px;
}
.screen-select .vs { font-size: 1.6rem; }
@media (max-width: 560px) {
  .screen-select .picker { flex-direction: column; gap: 10px; }
  .screen-select .hero-card { width: min(82vw, 300px); }
}

/* ---------- Home / hub ---------- */
.screen-home {
  position: relative;
  padding-top: calc(var(--space-4) + var(--tap-min) + var(--space-3));
}
.home-topbar {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: calc(14px + env(safe-area-inset-right, 0px));
  display: flex;
  gap: 10px;
  z-index: 20;
}
.home-mascot {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: 16px;
  width: 96px;
  height: 96px;
  z-index: 5;
  pointer-events: none;
}

/* ---------- Settings / parents ---------- */
.screen-settings, .screen-parents {
  gap: 14px;
}
.gate-display {
  font-size: 2rem;
  font-weight: 800;
  min-width: 100px;
  text-align: center;
  padding: 10px 24px;
}
.gate-keypad {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  max-width: 340px;
}
.gate-key { min-width: var(--tap-min); font-size: 1.2rem; }
.settings-row {
  width: 100%;
  max-width: 320px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,.8);
}
.settings-icon { font-size: 1.6rem; }

/* ---------- Maze HUD ---------- */
.hud {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  background: rgba(255,255,255,.8);
  border-radius: 999px;
  padding: 8px 18px;
  margin: 0 auto 16px;
  max-width: calc(100% - 66px);
  box-shadow: 0 4px 0 rgba(0,0,0,.08);
}
.hud-item { font-weight: 700; font-size: .95rem; white-space: nowrap; }

/* ---------- Maze board ---------- */
.stage { display: flex; justify-content: center; width: 100%; }
.maze-wrap {
  background: linear-gradient(180deg, var(--stone-light), var(--stone-dark));
  padding: 14px;
  border-radius: 18px;
  box-shadow: var(--shadow-lg), inset 0 0 0 4px rgba(255,255,255,.25);
  position: relative;
}
.maze { position: relative; display: grid; background: var(--floor-a); border-radius: 8px; overflow: hidden; }
.cell { position: relative; background-color: var(--floor-a); }
.cell.floor-alt { background-color: var(--floor-b); }
.cell .w { position: absolute; background: var(--wall); box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.15); border-radius: 3px; }
.cell .w-top { top: -3px; left: -3px; right: -3px; height: 8px; }
.cell .w-bottom { bottom: -3px; left: -3px; right: -3px; height: 8px; }
.cell .w-left { top: -3px; bottom: -3px; left: -3px; width: 8px; }
.cell .w-right { top: -3px; bottom: -3px; right: -3px; width: 8px; }

.token { position: absolute; z-index: 5; transition: transform .14s ease-out; pointer-events: none; filter: drop-shadow(0 4px 4px rgba(0,0,0,.3)); }
.token svg { width: 100%; height: 100%; display: block; }
.token.player { z-index: 6; }
.token.goal { animation: goalPulse 1.6s ease-in-out infinite; }
@keyframes goalPulse { 0%, 100% { transform: translate(var(--tx), var(--ty)) scale(1); } 50% { transform: translate(var(--tx), var(--ty)) scale(1.12); } }
.token.step { animation: step .14s ease-out; }
@keyframes step { 0% { transform: translate(var(--tx), var(--ty)) scale(1, 1); } 40% { transform: translate(var(--tx), var(--ty)) scale(1.12, .88); } 100% { transform: translate(var(--tx), var(--ty)) scale(1, 1); } }

.sparkle { position: absolute; pointer-events: none; z-index: 4; font-size: 14px; animation: sparkle 1.4s ease-in-out infinite; opacity: .9; }
@keyframes sparkle { 0%, 100% { transform: translateY(0) scale(.8); opacity: .4; } 50% { transform: translateY(-6px) scale(1.15); opacity: 1; } }

.dir-label {
  position: absolute; z-index: 7; left: 0; top: 0;
  transform: translate(var(--tx), var(--ty)) translate(-20%, -70%) scale(0.6);
  pointer-events: none; font-weight: 800; font-size: 1rem; white-space: nowrap;
  color: #4a2e00; background: #fff9e8; border: 2px solid #ffb347; border-radius: 999px;
  padding: 3px 10px; box-shadow: 0 3px 0 rgba(0,0,0,.12); opacity: 0;
}
.dir-label.show { animation: dirLabelPop .65s ease-out; }
@keyframes dirLabelPop {
  0%   { opacity: 0; transform: translate(var(--tx), var(--ty)) translate(-20%, -70%) scale(0.5); }
  20%  { opacity: 1; transform: translate(var(--tx), var(--ty)) translate(-20%, -95%) scale(1.08); }
  75%  { opacity: 1; transform: translate(var(--tx), var(--ty)) translate(-20%, -95%) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) translate(-20%, -110%) scale(0.9); }
}

/* ---------- D-Pad ---------- */
.dpad {
  margin-top: 18px;
  margin-bottom: env(safe-area-inset-bottom, 0px);
  display: grid;
  grid-template-columns: 62px 62px 62px;
  grid-template-rows: 62px 62px;
  gap: 8px;
  justify-content: center;
  flex-shrink: 0;
}
.dbtn {
  border: none; border-radius: 16px; background: rgba(255,255,255,.85);
  box-shadow: 0 5px 0 rgba(0,0,0,.15); color: #7a5a3a; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; line-height: 1;
}
.dbtn-arrow { font-size: 1.15rem; }
.dbtn-word { font-size: .55rem; font-weight: 800; letter-spacing: .02em; }
.dbtn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.15); }
.dup { grid-column: 2; grid-row: 1; }
.dleft { grid-column: 1; grid-row: 2; }
.dright { grid-column: 3; grid-row: 2; }
.ddown { grid-column: 2; grid-row: 2; }
@media (hover: hover) and (pointer: fine) {
  .dpad { display: none; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .hud { margin-bottom: 8px; }
  .dpad { margin-top: 10px; grid-template-columns: 50px 50px 50px; grid-template-rows: 50px 50px; }
  .dbtn-arrow { font-size: .95rem; }
  .dbtn-word { font-size: .42rem; }
}
@media (max-width: 420px) {
  .dbtn-word { font-size: .5rem; }
}

/* ---------- Memory Match ---------- */
.memory-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: 8px;
  width: min(94vw, 600px);
  margin: 0 auto;
}
.mem-card {
  aspect-ratio: 1;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  perspective: 600px;
  min-width: 0;
}
.mem-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform .3s;
  transform-style: preserve-3d;
}
.mem-card.flipped .mem-card-inner { transform: rotateY(180deg); }
.mem-card.wobble .mem-card-inner { animation: memWobble .3s ease; }
@keyframes memWobble {
  0%, 100% { transform: rotateY(180deg) translateX(0); }
  25% { transform: rotateY(180deg) translateX(-6px); }
  75% { transform: rotateY(180deg) translateX(6px); }
}
.mem-card-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.mem-card-back {
  background: linear-gradient(160deg, var(--stone-light), var(--stone-dark));
}
.mem-card-back::after {
  content: "";
  width: 44%; height: 60%;
  background: #fff8ea;
  border-radius: 50% 50% 6px 6px / 60% 60% 6px 6px;
  opacity: .85;
}
.mem-card-front {
  background: #fff;
  transform: rotateY(180deg);
  padding: 10%;
}
.mem-card-front svg { width: 100%; height: 100%; }
.mem-card.matched .mem-card-front { background: #eafff0; }

/* ---------- Gem Collector ---------- */
.gems-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-3);
}
.gems-target { width: 48px; height: 48px; }
.gems-target svg { width: 100%; height: 100%; }
.gems-dots { display: flex; gap: 6px; flex-wrap: wrap; }
.gems-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 3px solid #e0d3b8;
  background: transparent;
}
.gems-dot.filled { background: var(--gem-gold); border-color: #e8a622; }

.gems-chest {
  width: 84px;
  height: 84px;
  margin-bottom: var(--space-3);
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.2));
}
.gems-chest svg { width: 100%; height: 100%; }
.gems-chest.bounce { animation: chestBounce .4s ease; }
@keyframes chestBounce {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.25); }
}

.gems-field {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  max-width: 640px;
  padding: var(--space-3);
}
.gem {
  width: var(--tap-min);
  height: var(--tap-min);
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  transform: rotate(var(--rot, 0deg));
  transition: transform .15s ease;
}
.gem svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 3px rgba(0,0,0,.2)); }
.gem.wobble { animation: gemWobble .4s ease; }
@keyframes gemWobble {
  0%, 100% { transform: rotate(var(--rot, 0deg)) translateX(0); }
  25% { transform: rotate(var(--rot, 0deg)) translateX(-8px); }
  75% { transform: rotate(var(--rot, 0deg)) translateX(8px); }
}
.gem.collected { pointer-events: none; }

/* ---------- Hidden Objects ---------- */
.hidden-tray {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: var(--space-3);
}
.hidden-tray-icon {
  width: 48px; height: 48px;
  filter: brightness(0) opacity(0.35);
  transition: filter .25s ease;
}
.hidden-tray-icon.filled { filter: none; animation: trayPop .3s ease; }
@keyframes trayPop { 0% { transform: scale(0.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.hidden-tray-icon svg { width: 100%; height: 100%; }

.hidden-scene {
  position: relative;
  width: min(94vw, 640px);
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.hidden-scene > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hidden-item {
  position: absolute;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  transform: translate(-50%, -50%);
}
.hidden-item svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.hidden-item.found { animation: hiddenFound .35s ease forwards; pointer-events: none; }
@keyframes hiddenFound { to { opacity: 0; transform: translate(-50%, -50%) scale(0.3); } }
.hidden-item.wobble { animation: hiddenWobble .4s ease; }
@keyframes hiddenWobble {
  0%, 100% { transform: translate(-50%, -50%) rotate(0); }
  25% { transform: translate(-50%, -50%) rotate(-10deg); }
  75% { transform: translate(-50%, -50%) rotate(10deg); }
}

/* ---------- Castle Paint ---------- */
.paint-canvas-wrap {
  width: min(90vw, 480px);
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 10px;
  margin-bottom: var(--space-3);
}
.paint-canvas-wrap svg { width: 100%; height: auto; display: block; }
.paint-canvas-wrap [data-region] { cursor: pointer; }

.paint-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 480px;
  margin-bottom: var(--space-3);
}
.paint-swatch, .paint-tool {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 3px solid rgba(0,0,0,.1);
  cursor: pointer;
  font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
}
.paint-swatch.selected, .paint-tool.selected {
  border-color: #4a2e00;
  transform: scale(1.15);
}
.paint-magic { background: conic-gradient(red, orange, yellow, green, blue, purple, red); }

.paint-done {
  position: relative;
  overflow: visible;
  width: 64px; height: 64px;
  border-radius: 50%;
  font-size: 1.6rem;
  padding: 0;
}

/* ---------- Celebrate overlay ---------- */
.celebrate-overlay {
  position: fixed; inset: 0;
  background: rgba(60, 40, 20, .45);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 100;
}
.celebrate-overlay > * { pointer-events: auto; }
.celebrate-hug { display: flex; width: 220px; justify-content: center; margin-bottom: 8px; }
.celebrate-mascot { width: 50%; }
.celebrate-mascot + .celebrate-mascot { margin-left: -18px; }
.celebrate-mascot svg { width: 100%; height: auto; }
.celebrate-stars { display: flex; gap: 6px; justify-content: center; margin-bottom: 4px; }
.celebrate-title { font-size: 2rem; margin: 4px 0 12px; text-align: center; }
.celebrate-actions { display: flex; gap: 16px; align-items: center; }
.celebrate-next { position: relative; overflow: visible; font-size: 1.4rem; }
.auto-ring { position: absolute; inset: -6px; transform: rotate(-90deg); pointer-events: none; }
.auto-ring-fill { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .8; }