/* ===========================================================
   Kibi's Corner, shared game styles.
   One look for every game so the whole trail feels like one place.
   Rules baked in: large targets, no timers, no scores, no losing.
   =========================================================== */

.gwrap{max-width:860px;margin:0 auto;padding:0 22px}

/* Kibi, standing beside the game, saying things */
.kbuddy{display:flex;align-items:flex-end;justify-content:center;gap:16px;
  max-width:640px;margin:0 auto 26px;min-height:132px}
.kbuddy img{height:clamp(96px,15vw,136px);flex:none;
  filter:drop-shadow(0 9px 10px rgba(23,52,91,.22))}
.kbuddy .bubble{position:relative;background:#fff;border:3px solid var(--navy);border-radius:20px;
  padding:14px 20px;font-family:var(--disp);font-weight:800;color:var(--navy);
  font-size:clamp(16px,2.2vw,22px);line-height:1.3;box-shadow:0 6px 0 rgba(23,52,91,.14);
  max-width:400px;text-align:left}
.kbuddy .bubble::after{content:"";position:absolute;left:-13px;bottom:22px;
  border:8px solid transparent;border-right-color:#fff}
.kbuddy .bubble::before{content:"";position:absolute;left:-19px;bottom:22px;
  border:8px solid transparent;border-right-color:var(--navy)}
.kbuddy.cheer img{animation:kbHop .62s ease}
@keyframes kbHop{0%,100%{transform:translateY(0)}35%{transform:translateY(-15px) scale(1.04)}65%{transform:translateY(-3px)}}

/* the speak button, tap to hear Kibi say it again */
.speak{margin-left:8px;width:38px;height:38px;border-radius:50%;background:var(--yellow);
  border:3px solid var(--navy);cursor:pointer;display:none;place-items:center;padding:0;flex:none;
  box-shadow:0 3px 0 rgba(23,52,91,.2);transition:transform .18s ease}
.speak.ready{display:grid}
.speak:hover{transform:translateY(-2px)}
.speak svg{width:17px;height:17px;fill:var(--navy)}

/* the choices */
.picks{display:grid;gap:16px;max-width:640px;margin:0 auto;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.picks.two{grid-template-columns:repeat(2,1fr);max-width:460px}
.picks.three{grid-template-columns:repeat(3,1fr);max-width:560px}
.pick{position:relative;aspect-ratio:1;border:4px solid var(--navy);border-radius:26px;
  background:#FFFDF6;cursor:pointer;padding:10%;display:grid;place-items:center;
  box-shadow:0 6px 0 rgba(23,52,91,.18);transition:transform .18s ease,box-shadow .18s ease}
.pick svg,.pick img{width:100%;height:100%;object-fit:contain}
.pick:hover{transform:translateY(-4px);box-shadow:0 10px 0 rgba(23,52,91,.18)}
.pick:active{transform:translateY(2px);box-shadow:0 3px 0 rgba(23,52,91,.18)}
.pick.right{background:#EAF7E2;animation:pkPop .55s ease}
.pick.wrong{animation:pkWobble .5s ease}
.pick[disabled]{cursor:default}
@keyframes pkPop{0%{transform:scale(1)}40%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes pkWobble{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

/* a row of little dots showing how far along we are. no numbers, no pressure */
.trailmarks{display:flex;gap:9px;justify-content:center;margin:28px 0 0}
.trailmarks i{width:13px;height:13px;border-radius:50%;background:rgba(23,52,91,.16);
  transition:background .3s ease,transform .3s ease}
.trailmarks i.done{background:var(--leaf);transform:scale(1.16)}

.gbar{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:30px 0 0}
.gbtn{font-family:var(--disp);font-weight:800;font-size:16px;color:#fff;background:var(--btn-teal);
  border:0;cursor:pointer;padding:13px 28px;border-radius:999px;text-decoration:none;
  display:inline-block;box-shadow:0 4px 0 rgba(23,52,91,.2);transition:transform .18s ease}
.gbtn.alt{background:var(--btn-coral);color:var(--navy)}
.gbtn:hover{transform:translateY(-2px)}
.gnote{max-width:600px;margin:30px auto 0;text-align:center;font-weight:600;font-size:14px;
  opacity:.72;line-height:1.6}

/* sparkles when something goes right */
.sparkhost2{position:fixed;inset:0;pointer-events:none;z-index:80;overflow:hidden}
.spark2{position:absolute;width:18px;height:18px;opacity:0}

/* the shelf of games on Wonder Trail */
.gamegrid{max-width:1180px;margin:0 auto;padding:0 22px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}

@media (prefers-reduced-motion: reduce){
  .kbuddy.cheer img{animation:none}
  .pick.right,.pick.wrong{animation:none}
  .pick:hover,.pick:active,.gbtn:hover,.speak:hover{transform:none}
}
@media(max-width:560px){
  .kbuddy{flex-direction:column;align-items:center;gap:10px}
  .kbuddy .bubble{text-align:center}
  .kbuddy .bubble::after,.kbuddy .bubble::before{display:none}
  .picks{gap:12px}
  .pick{border-radius:22px;border-width:3px}
}

/* the start gate. One tap to begin, which is also what lets Kibi speak */
.startgate{max-width:520px;margin:0 auto 30px;text-align:center;background:#FFF3D7;
  border-radius:26px;padding:30px 26px;box-shadow:0 8px 22px rgba(23,52,91,.10)}
.startgate p{font-weight:700;line-height:1.6;margin:0 0 18px}
.startgate .gbtn{font-size:19px;padding:15px 36px}

/* the kind note about pace */
.slownote{max-width:640px;margin:34px auto 0;background:#EAF7F4;border-radius:22px;
  padding:22px 26px;text-align:center;box-shadow:0 5px 16px rgba(23,52,91,.07)}
.slownote p{margin:0;font-weight:700;line-height:1.65;font-size:15px}
.slownote strong{font-family:var(--disp);font-size:16px}

/* the thing being looked at, above the choices */
.showcase{max-width:520px;margin:0 auto 26px;background:#FFFDF6;border:4px solid var(--navy);
  border-radius:26px;padding:22px;box-shadow:0 6px 0 rgba(23,52,91,.16);min-height:120px;
  display:flex;align-items:center;justify-content:center;gap:5%;flex-wrap:wrap}
.showcase svg{width:clamp(46px,10vw,74px);height:auto}
.showcase .seq{display:flex;align-items:center;gap:4%;flex-wrap:nowrap;width:100%;justify-content:center}
.showcase .qmark{font-family:var(--disp);font-weight:800;font-size:clamp(34px,7vw,54px);color:var(--navy);opacity:.35}

/* the maze */
.maze{--cell:clamp(46px,11vw,74px);display:grid;gap:0;margin:0 auto;width:max-content;
  background:#EAF6E2;border:5px solid var(--navy);border-radius:22px;padding:8px;
  box-shadow:0 7px 0 rgba(23,52,91,.18)}
.mcell{width:var(--cell);height:var(--cell);position:relative;display:grid;place-items:center}
.mcell.w-t{box-shadow:inset 0 5px 0 var(--navy)}
.mcell.w-b{box-shadow:inset 0 -5px 0 var(--navy)}
.mcell.w-t.w-b{box-shadow:inset 0 5px 0 var(--navy),inset 0 -5px 0 var(--navy)}
.mcell.w-l{outline:none}
.mwall{position:absolute;background:var(--navy);border-radius:3px}
.mcell .goal svg{width:78%;height:78%}
.mkibi{position:absolute;width:var(--cell);height:var(--cell);display:grid;place-items:center;
  transition:transform .3s cubic-bezier(.34,1.4,.5,1);z-index:3;pointer-events:none}
.mkibi img{width:76%;height:auto;filter:drop-shadow(0 4px 5px rgba(23,52,91,.3))}
.mpad{display:grid;grid-template-columns:repeat(3,72px);grid-template-rows:repeat(2,72px);
  gap:10px;justify-content:center;margin:30px auto 0}
.mpad button{border:4px solid var(--navy);background:#fff;border-radius:20px;cursor:pointer;
  display:grid;place-items:center;box-shadow:0 5px 0 rgba(23,52,91,.18);transition:transform .15s ease}
.mpad button:hover{transform:translateY(-2px)}
.mpad button:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(23,52,91,.18)}
.mpad button svg{width:34px;height:34px;fill:none;stroke:var(--navy);stroke-width:3.4;
  stroke-linecap:round;stroke-linejoin:round}
.mpad .up{grid-column:2;grid-row:1}
.mpad .left{grid-column:1;grid-row:2}
.mpad .down{grid-column:2;grid-row:2}
.mpad .right{grid-column:3;grid-row:2}
@media (prefers-reduced-motion: reduce){.mkibi{transition:none}.mpad button:hover,.mpad button:active{transform:none}}
@media(max-width:560px){.mpad{grid-template-columns:repeat(3,62px);grid-template-rows:repeat(2,62px)}}