/* Learn & Play with Bryce — Maze Adventures */

:root{
  --blue:#2f7fd0; --blue-d:#1f5fa4; --blue-l:#7cc0f5;
  --sun:#ffcf3f; --sun-d:#e8a91b;
  --grass:#4cbb6c; --grass-d:#2f8f4c;
  --berry:#ef5b5b; --berry-d:#c93b3b;
  --cream:#fff8ec; --ink:#23324a; --ink-soft:#5b6b83;
  --radius:22px;
  --tap:64px;
  --sat: env(safe-area-inset-top,0px);
  --sab: env(safe-area-inset-bottom,0px);
  --sal: env(safe-area-inset-left,0px);
  --sar: env(safe-area-inset-right,0px);
  --font:"Baloo 2","Fredoka",ui-rounded,"Chalkboard SE","Comic Sans MS","Trebuchet MS",system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0; font-family:var(--font); color:var(--ink);
  background:linear-gradient(#8fd4ff 0%, #bfe7ff 45%, #ffe9b8 100%);
  overscroll-behavior:none; overflow:hidden;
  -webkit-user-select:none; user-select:none;
  -webkit-text-size-adjust:100%;
}
button{font-family:inherit; color:inherit; border:0; background:none; cursor:pointer;}

.screen{display:none; position:fixed; inset:0; flex-direction:column;}
.screen.show{display:flex;}

/* ---------------- HOME ---------------- */
.home-scroll{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:calc(var(--sat) + 34px) calc(var(--sar) + 18px) calc(var(--sab) + 28px) calc(var(--sal) + 18px);
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.brand{display:flex; align-items:center; gap:14px; width:100%; max-width:560px;}
.brand-mascot{width:132px; height:132px; flex:0 0 auto; filter:drop-shadow(0 5px 4px rgba(20,50,90,.22));}
.brand-mascot svg{width:100%; height:100%; display:block;}
.mascot-img{width:100%; height:100%; display:block; object-fit:contain;}
.brand-words{min-width:0;}
.brand-kicker{margin:0; font-size:17px; font-weight:700; color:var(--blue-d); letter-spacing:.02em;}
.brand-name{
  margin:-2px 0 0; font-size:clamp(38px,11vw,56px); line-height:.95; font-weight:900; letter-spacing:.01em;
  color:#fff; -webkit-text-stroke:5px var(--blue-d); paint-order:stroke fill;
  text-shadow:0 5px 0 var(--blue-d);
}
.brand-sub{margin:6px 0 0; font-size:14px; font-weight:700; color:#4b6b52;}
.game-title{
  width:100%; max-width:560px; margin:2px 0 -4px; color:var(--blue-d);
  font-size:clamp(28px,7vw,42px); line-height:1; font-weight:900; text-align:center;
  text-shadow:0 3px 0 #fff; letter-spacing:0;
}

.card{
  width:100%; max-width:560px; background:var(--cream); border-radius:var(--radius);
  border:4px solid #fff; box-shadow:0 8px 0 rgba(31,95,164,.18), 0 14px 26px rgba(20,50,90,.16);
  padding:16px;
}
.card-title{margin:0 0 12px; font-size:20px; font-weight:800; display:flex; align-items:center; gap:9px;}
.ico{width:1.15em; height:1.15em; display:inline-block; flex:0 0 auto;}
.ico svg{width:100%; height:100%; display:block;}

.name-input{
  width:100%; height:var(--tap); border-radius:16px; border:4px solid #ffd98a; background:#fff;
  font-family:inherit; font-size:26px; font-weight:800; text-align:center; color:var(--ink);
  outline:none; padding:0 12px;
}
.name-input:focus{border-color:var(--sun-d); box-shadow:0 0 0 4px rgba(255,207,63,.35);}
.name-input::placeholder{color:#b9c3d2; font-weight:700;}

.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.chip{
  min-height:44px; padding:8px 16px; border-radius:999px; background:#fff; border:3px solid #d8e6f5;
  font-weight:800; font-size:16px; display:flex; align-items:center; gap:6px;
}
.chip:active{transform:translateY(2px);}
.chip b{color:var(--sun-d);}

.levels{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.level{
  background:#fff; border:4px solid #d8e6f5; border-radius:18px; padding:10px 6px 12px;
  display:flex; flex-direction:column; align-items:center; gap:7px; transition:transform .08s, border-color .12s;
}
.level:active{transform:translateY(2px);}
.level[aria-checked="true"]{border-color:var(--sun); background:#fffdf3; box-shadow:0 0 0 4px rgba(255,207,63,.35);}
.level-art{width:100%; aspect-ratio:1; display:block;}
.level-art svg{width:100%; height:100%; display:block;}
.level-name{font-weight:900; font-size:17px;}
.level-dots{display:flex; gap:4px;}
.level-dots i{width:9px; height:9px; border-radius:50%; background:#dbe6f2;}
.level-dots i.on{background:var(--grass);}

.play-btn{
  width:100%; max-width:560px; min-height:82px; border-radius:26px;
  background:linear-gradient(#57d47c,#3aa85c); color:#fff;
  font-size:34px; font-weight:900; letter-spacing:.06em;
  display:flex; align-items:center; justify-content:center; gap:14px;
  box-shadow:0 8px 0 var(--grass-d), 0 16px 26px rgba(20,80,40,.28);
  border:4px solid #fff; transition:transform .08s, box-shadow .08s;
}
.play-btn:active{transform:translateY(6px); box-shadow:0 2px 0 var(--grass-d), 0 6px 14px rgba(20,80,40,.28);}
.play-btn.small{min-height:66px; font-size:26px; max-width:none; flex:1;}
.play-btn[disabled]{filter:grayscale(.55) brightness(.95); opacity:.75;}
.play-tri{width:0; height:0; border-left:26px solid #fff; border-top:16px solid transparent; border-bottom:16px solid transparent;}
.play-btn.small .play-tri{border-left-width:20px; border-top-width:13px; border-bottom-width:13px;}

.home-toggles{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
.toggle{
  min-height:52px; padding:8px 18px; border-radius:999px; background:#ffffffcc; border:3px solid #fff;
  font-weight:800; font-size:16px; display:flex; align-items:center; gap:8px; color:var(--ink);
  box-shadow:0 4px 0 rgba(31,95,164,.15);
}
.toggle[aria-pressed="false"]{opacity:.5; text-decoration:line-through;}
.toggle:active{transform:translateY(2px);}

.voice-pick{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center;
  background:#ffffffb0; border:3px solid #fff; border-radius:999px; padding:7px 8px 7px 16px;
  font-weight:800; font-size:15px; color:var(--ink-soft); max-width:560px;
}
.voice-pick[hidden]{display:none;}
.voice-pick select{
  font-family:inherit; font-size:15px; font-weight:700; color:var(--ink);
  border:3px solid #dcebf8; border-radius:999px; padding:8px 12px; background:#fff;
  max-width:230px; min-height:44px;
}
.voice-pick button{
  min-height:44px; padding:0 18px; border-radius:999px; background:var(--blue); color:#fff;
  font-weight:800; font-size:15px;
}
.voice-pick button:active{transform:translateY(2px);}

.star-line{margin:2px 0 0; font-weight:800; color:#6a5320; font-size:17px; text-align:center;}
.footer-note{margin:0; font-size:12px; font-weight:700; color:#5f7f8f; opacity:.8;}

/* ---------------- GAME ---------------- */
/* Reserve the home-indicator strip so the board never sits under it. */
#game{background:#cfe9ff; padding-bottom:var(--sab);}
.topbar{
  display:flex; align-items:center; gap:8px; flex:0 0 auto;
  padding:calc(var(--sat) + 8px) calc(var(--sar) + 10px) 8px calc(var(--sal) + 10px);
  background:#fbfdff;
  box-shadow:0 3px 0 rgba(31,95,164,.12);
}
.tb-btn{
  width:54px; height:54px; flex:0 0 auto; border-radius:16px; background:#fff; border:3px solid #dcebf8;
  display:flex; align-items:center; justify-content:center; font-size:26px; color:var(--blue-d);
  box-shadow:0 4px 0 rgba(31,95,164,.18);
}
.tb-btn:active{transform:translateY(3px); box-shadow:0 1px 0 rgba(31,95,164,.18);}
.tb-btn[aria-pressed="false"]{opacity:.42;}
.tb-right{display:flex; align-items:center; gap:8px; margin-left:auto;}
.stars{
  display:flex; align-items:center; gap:5px; font-size:22px; font-weight:900; color:#8a6a12;
  background:#fff5d4; border:3px solid #ffe08a; border-radius:999px; padding:6px 14px 6px 10px; height:54px;
}
.stars .ico{font-size:22px;}
.quest{
  display:flex; align-items:center; gap:8px; min-width:0; flex:1;
  font-weight:900; font-size:clamp(14px,3.4vw,20px); color:var(--ink);
}
.quest span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.quest-arrow{
  flex:0 0 auto; width:22px; height:12px; background:var(--blue);
  clip-path:polygon(0 35%,62% 35%,62% 0,100% 50%,62% 100%,62% 65%,0 65%);
}
/* No width/height 100% here: as a flex item those resolve against the whole
   container, so the canvas overflowed the rail in landscape and older WebKit
   in portrait. Stretch handles both axes; layout() pins the real height. */
#stage{flex:1 1 auto; min-height:0; min-width:0; display:block; touch-action:none;}

.tap-hint{
  position:absolute; left:50%; bottom:calc(var(--sab) + 22px); transform:translateX(-50%);
  background:#ffffffe8; border:3px solid #fff; border-radius:999px; padding:10px 22px;
  font-weight:800; font-size:17px; color:var(--ink); box-shadow:0 6px 16px rgba(20,50,90,.2);
  animation:bob 1.4s ease-in-out infinite; pointer-events:none;
}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-7px);}}

/* ---------------- WIN ---------------- */
.overlay{
  position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
  /* No backdrop-filter: it costs a full-screen blur every frame on an older
     iPad, and a plain scrim reads just as well. */
  background:rgba(16,40,70,.58); padding:20px;
  animation:fade .25s ease both;
}
.overlay[hidden]{display:none;}
@keyframes fade{from{opacity:0}to{opacity:1}}
.win-card{
  width:100%; max-width:440px; background:var(--cream); border:6px solid #fff; border-radius:30px;
  padding:20px; text-align:center; box-shadow:0 14px 0 rgba(31,95,164,.25), 0 26px 50px rgba(10,30,60,.35);
  animation:pop .4s cubic-bezier(.2,1.5,.5,1) both;
}
@keyframes pop{from{transform:scale(.6) translateY(30px); opacity:0}to{transform:none; opacity:1}}
.win-burst{width:150px; height:150px; margin:0 auto 4px; animation:cheer 1.1s ease-in-out infinite;}
.win-burst svg{width:100%; height:100%; display:block;}
@keyframes cheer{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(4deg) translateY(-9px)}}
#winTitle{margin:0; font-size:36px; font-weight:900; color:var(--grass-d);}
#winSub{margin:6px 0 16px; font-size:19px; font-weight:700; color:var(--ink-soft);}
.win-btns{display:flex; gap:10px; align-items:stretch;}
.ghost-btn{
  min-height:66px; padding:0 18px; border-radius:22px; background:#fff; border:4px solid #dcebf8;
  font-size:19px; font-weight:800; color:var(--blue-d); display:flex; align-items:center; gap:8px;
  box-shadow:0 6px 0 rgba(31,95,164,.18);
}
.ghost-btn:active{transform:translateY(4px); box-shadow:0 2px 0 rgba(31,95,164,.18);}

/* ---------------- LEARNING GATE ---------------- */
.gate-card{
  width:100%; max-width:520px; background:var(--cream); border:6px solid #fff; border-radius:30px;
  padding:22px 20px 18px; text-align:center;
  box-shadow:0 14px 0 rgba(31,95,164,.25), 0 26px 50px rgba(10,30,60,.35);
  animation:pop .34s cubic-bezier(.2,1.5,.5,1) both;
  max-height:100%; overflow-y:auto;
}
.gate-title{
  margin:0 0 10px; font-size:clamp(20px,5vw,26px); font-weight:900; color:var(--blue-d);
  letter-spacing:.02em;
}
.gate-pic{font-size:clamp(56px,15vw,84px); line-height:1; margin:2px 0 6px;}
.gate-pic[hidden]{display:none;}
.gate-q{
  margin:4px 0 18px; font-size:clamp(38px,10vw,54px); font-weight:900; color:var(--ink);
  letter-spacing:.06em;
}
.gate-choices{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.gate-choice{
  flex:1 1 0; min-width:96px; min-height:92px; border-radius:24px;
  background:linear-gradient(#fff,#f2f7fd); border:5px solid #cfe2f5;
  font-family:inherit; font-size:clamp(32px,8vw,44px); font-weight:900; color:var(--blue-d);
  box-shadow:0 7px 0 rgba(31,95,164,.22);
  transition:transform .08s, box-shadow .08s;
}
.gate-choice:active{transform:translateY(5px); box-shadow:0 2px 0 rgba(31,95,164,.22);}
.gate-choice.wrong{
  background:#f4dcdc; border-color:#e3a8a8; color:#a35050; opacity:.65;
  box-shadow:0 4px 0 rgba(160,60,60,.2);
}
.gate-msg{
  margin:12px 0 0; min-height:24px; font-size:17px; font-weight:800; color:var(--berry-d);
}
.gate-home{min-height:52px; font-size:16px; margin-top:6px; padding:0 22px; display:inline-flex;}

/* fireworks sit above the scrim but behind the card */
.fx{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0;}
.fx[hidden]{display:none;}
.gate-card{position:relative; z-index:1;}

/* ---- celebration state ---- */
.gate-card.correct{
  border-color:#bdf0c8;
  box-shadow:0 14px 0 rgba(47,143,76,.3), 0 26px 60px rgba(10,30,60,.4);
  animation:cheerPop .45s cubic-bezier(.2,1.6,.5,1) both;
}
@keyframes cheerPop{from{transform:scale(.85)}60%{transform:scale(1.04)}to{transform:scale(1)}}
.gate-card.correct .gate-title{color:var(--grass-d); font-size:clamp(24px,6vw,32px);}
.gate-card.correct .gate-q{
  color:var(--grass-d); letter-spacing:.1em; margin-bottom:6px;
  animation:answerPop .5s cubic-bezier(.2,1.6,.5,1) both;
}
@keyframes answerPop{from{transform:scale(.6); opacity:0}to{transform:none; opacity:1}}
.gate-q .lit{color:var(--berry); }
.gate-say{
  margin:2px 0 4px; font-size:clamp(18px,4.6vw,24px); font-weight:800; color:var(--ink);
}
.gate-say[hidden]{display:none;}
.gate-say b{color:var(--grass-d);}

/* ================= TABLET LANDSCAPE =================
   The board is square, so in landscape it is limited by height while a lot of
   width goes spare. The controls move into a side rail that uses that spare
   width, which hands the full screen height back to the maze. */
@media (orientation:landscape) and (min-width:820px){
  #game{flex-direction:row;}

  .topbar{
    flex-direction:column; width:96px; height:100%; flex:0 0 96px;
    padding:calc(var(--sat) + 12px) 10px calc(var(--sab) + 12px);
    gap:12px; box-shadow:3px 0 0 rgba(31,95,164,.12);
  }
  .tb-right{flex-direction:column; margin-left:0; margin-top:auto; gap:12px;}
  .tb-btn{width:64px; height:64px; font-size:30px;}
  .stars{
    height:auto; width:64px; padding:10px 4px; flex-direction:column; gap:2px;
    font-size:20px; border-radius:20px;
  }

  /* Floats over the empty sky instead of costing a strip of height. */
  .quest{
    position:absolute; top:calc(var(--sat) + 12px); left:50%; transform:translateX(-50%);
    flex:0 0 auto; max-width:min(70vw,620px); z-index:5;
    background:#ffffffe6; border:3px solid #fff; border-radius:999px;
    padding:8px 20px; box-shadow:0 5px 14px rgba(20,50,90,.18);
  }

  /* Home screen: two columns so PLAY is reachable without scrolling. */
  .home-scroll{
    display:grid; align-content:center; justify-content:center;
    grid-template-columns:minmax(300px,1fr) minmax(340px,1.05fr);
    grid-template-areas:
      "brand  title"
      "name   levels"
      "play   levels"
      "tog    tog"
      "voice  voice"
      "star   star";
    gap:12px 24px; max-width:1060px; margin:0 auto;
    padding-top:calc(var(--sat) + 28px); padding-bottom:calc(var(--sab) + 12px);
  }
  .brand{grid-area:brand; max-width:none;}
  .game-title{grid-area:title; max-width:none; align-self:end; margin:0 0 -2px; font-size:34px;}
  #nameCard{grid-area:name; max-width:none;}
  #levelCard{grid-area:levels; max-width:none; align-self:start;}
  #playBtn{grid-area:play; max-width:none;}
  .home-toggles{grid-area:tog;}
  .voice-pick{grid-area:voice; justify-self:center;}
  #starLine{grid-area:star;}
  .footer-note{display:none;}
  .brand-mascot{width:112px; height:112px;}
  .level-name{font-size:16px;}
}

/* landscape phones / short screens */
@media (max-height:520px) and (orientation:landscape){
  .brand-mascot{width:96px; height:96px;}
  .brand-name{font-size:34px;}
  .play-btn{min-height:66px; font-size:27px;}
  .home-scroll{
    align-content:start;
    gap:11px;
    padding-top:calc(var(--sat) + 18px);
  }
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important;}
}