/* Superkids V1 -- Maze 🌀 (chunky hedge walls, grass floor, big D-pad) */
.maze-root { overflow: hidden !important; justify-content: center; }
.maze-wrap {
  width: 100%; flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
}
.maze-wrap.maze-wide { flex-direction: row; gap: 40px; }

.maze-stage { perspective: 1200px; flex: none; }
.maze-board {
  --S: 60px; --T: 12px; --P: 8px;
  position: relative; border-radius: 30px;
  background: #5cbf3f;
  box-shadow: 0 12px 0 #3d8f2a, 0 22px 34px rgba(0,0,0,.22), inset 0 0 0 4px rgba(255,255,255,.25);
  transform: rotateX(8deg);
  transform-origin: 50% 100%;
  touch-action: none; cursor: pointer;
  animation: maze-in .6s cubic-bezier(.34,1.56,.64,1) backwards;
}
.maze-floor {
  position: absolute; inset: var(--P); border-radius: 8px;
  background:
    repeating-conic-gradient(#8ee36a 0 25%, #7fd85b 0 50%) 0 0 / calc(var(--S) * 2) calc(var(--S) * 2);
}
.maze-trail, .maze-walls { position: absolute; inset: 0; pointer-events: none; }

.maze-wall {
  position: absolute; display: block;
  border-radius: calc(var(--T) / 2);
  background: linear-gradient(#b07bff, #8a5cf0);
  box-shadow: 0 calc(var(--T) * .45) 0 #5b37b8, 0 calc(var(--T) * .6) calc(var(--T) * .5) rgba(0,0,0,.25), inset 0 3px 0 rgba(255,255,255,.35);
}

.maze-step {
  position: absolute; width: var(--S); height: var(--S);
  display: grid; place-items: center; font-style: normal;
  font-size: calc(var(--S) * .34);
  transform: rotate(var(--rot, 0deg));
  filter: grayscale(1) brightness(.25); opacity: .4;
  animation: maze-step .35s ease-out backwards;
}

.maze-hero, .maze-goal {
  position: absolute; width: var(--S); height: var(--S);
  display: grid; place-items: center; pointer-events: none;
}
.maze-hero { z-index: 3; transition: left .18s ease-out, top .18s ease-out; }
.maze-hero span, .maze-goal span {
  display: block; line-height: 1;
  font-size: calc(var(--S) * .72);
  filter: drop-shadow(0 5px 0 rgba(0,0,0,.2));
}
.maze-hero::before {
  content: ''; position: absolute; left: 14%; right: 14%; bottom: 6%; height: 18%;
  border-radius: 50%; background: rgba(0,0,0,.18);
}
.maze-hero.maze-hop span { animation: maze-hop .22s ease-out; }
.maze-hero.maze-bump span { animation: maze-bump .35s ease-in-out; }
.maze-hero.maze-jump span { animation: maze-jump .5s cubic-bezier(.34,1.56,.64,1) 3; }

.maze-goal span { animation: maze-bob 1.4s ease-in-out infinite; }
.maze-goal::before {
  content: ''; position: absolute; inset: 10%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,240,120,.95), rgba(255,220,80,0) 70%);
  animation: maze-glow 1.4s ease-in-out infinite;
}
.maze-goal.maze-got span { animation: maze-jump .5s cubic-bezier(.34,1.56,.64,1) 3; }

/* D-pad */
.maze-pad {
  flex: none;
  display: grid; grid-template-columns: repeat(3, 88px); grid-template-rows: repeat(2, 88px);
  gap: 12px;
}
.maze-say, .maze-arrow {
  width: 88px; height: 88px; border-radius: 26px;
  display: grid; place-items: center; font-size: 46px; line-height: 1;
  transition: transform .08s, box-shadow .08s;
  touch-action: none;
}
.maze-say {
  grid-column: 1; grid-row: 1; border-radius: 50%; width: 80px; height: 80px; margin: 4px;
  background: var(--sun); font-size: 38px;
  box-shadow: 0 7px 0 var(--sun-d), 0 12px 20px rgba(0,0,0,.14);
}
.maze-arrow {
  --c: var(--sky); --d: var(--sky-d);
  background: var(--c);
  box-shadow: 0 9px 0 var(--d), 0 14px 22px rgba(0,0,0,.18), inset 0 4px 0 rgba(255,255,255,.3);
}
.maze-tri { display: block; width: 46px; height: 46px; pointer-events: none; filter: drop-shadow(0 4px 0 rgba(0,0,0,.22)); }
.maze-tri::before { content: ""; display: block; width: 100%; height: 100%; background: #fff; clip-path: polygon(50% 4%, 96% 52%, 68% 52%, 68% 96%, 32% 96%, 32% 52%, 4% 52%); border-radius: 6px; }
.maze-up { grid-column: 2; grid-row: 1; --c: var(--pink); --d: var(--pink-d); }
.maze-left { grid-column: 1; grid-row: 2; --c: var(--sky); --d: var(--sky-d); }
.maze-down { grid-column: 2; grid-row: 2; --c: var(--orange); --d: #d97a1c; }
.maze-right { grid-column: 3; grid-row: 2; --c: var(--grape); --d: var(--grape-d); }
.maze-arrow:active, .maze-arrow.down, .maze-say:active { transform: translateY(8px); box-shadow: 0 1px 0 var(--d); }
.maze-say:active { box-shadow: 0 1px 0 var(--sun-d); }

@keyframes maze-in { from { transform: rotateX(8deg) translateY(40px) scale(.85); opacity: 0; } }
@keyframes maze-hop { 0% { transform: translateY(0) scale(1, 1); } 45% { transform: translateY(-14%) scale(.95, 1.08); } 100% { transform: translateY(0) scale(1, 1); } }
@keyframes maze-bump {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(var(--bx, 0), var(--by, 0)) rotate(-10deg); }
  50% { transform: translate(0, 0) rotate(8deg); }
  75% { transform: rotate(-5deg); }
}
@keyframes maze-jump { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-45%) scale(1.25) rotate(-8deg); } }
@keyframes maze-bob { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-8%) rotate(5deg); } }
@keyframes maze-glow { 0%, 100% { transform: scale(.9); opacity: .7; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes maze-step { from { transform: rotate(var(--rot, 0deg)) scale(0); } }

@media (max-width: 600px) {
  .maze-wrap { gap: 22px; }
}
@media (max-height: 560px) {
  .maze-pad { grid-template-columns: repeat(3, 80px); grid-template-rows: repeat(2, 80px); gap: 8px; }
  .maze-arrow { width: 80px; height: 80px; font-size: 40px; }
  .maze-say { width: 72px; height: 72px; }
}

/* 🧩 Puzzle Path button (Laravel Kid Mode ke 50 maze) -- D-pad ki khaali jagah (upar daayein) */
.maze-path-btn {
  grid-column: 3; grid-row: 1; width: 88px; height: 88px; border-radius: 26px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  background: linear-gradient(150deg, #55EFC4, #00B894); color: #fff;
  box-shadow: 0 9px 0 var(--mint-d), 0 14px 22px rgba(0,0,0,.18), inset 0 4px 0 rgba(255,255,255,.3);
  transition: transform .08s, box-shadow .08s;
  animation: maze-path-wiggle 3.2s ease-in-out 1.5s infinite;
}
.maze-path-btn .e { font-size: 40px; line-height: 1; }
.maze-path-btn .t { font-size: 18px; font-weight: 800; line-height: 1; }
.maze-path-btn:active { transform: translateY(8px); box-shadow: 0 1px 0 var(--mint-d); }
@keyframes maze-path-wiggle { 0%, 86%, 100% { transform: rotate(0); } 90% { transform: rotate(-6deg) scale(1.06); } 95% { transform: rotate(6deg) scale(1.06); } }
@media (max-height: 560px) { .maze-path-btn { width: 80px; height: 80px; } }