:root{
  --accent:#4361ee;
  --ink:#20232a;
  --panel:#ffffff;
  --bg-top:#eaf4ff;
  --bg-bot:#d7ecff;
  --radius:22px;
  --dpad:min(23vw,104px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none;}
body{
  font-family:"Baloo 2","Comic Sans MS",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:linear-gradient(160deg,var(--bg-top),var(--bg-bot));
  -webkit-user-select:none;user-select:none;
}
#app{position:fixed;inset:0;}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;display:none;flex-direction:column;}
.screen.active{display:flex;}

/* ---------- home / gallery ---------- */
.home-head{padding:calc(clamp(10px,3vh,26px) + env(safe-area-inset-top)) 16px 6px;text-align:center;flex:0 0 auto;}
.home-title{
  margin:0;font-size:clamp(30px,8vw,56px);font-weight:800;letter-spacing:.5px;
  color:#fff;text-shadow:0 3px 0 #4361ee,0 6px 14px rgba(0,0,0,.18);-webkit-text-stroke:2px #4361ee;paint-order:stroke fill;
}
.home-sub{margin:4px 0 0;font-size:clamp(13px,3.6vw,20px);color:#4a5568;font-weight:700;}
.gallery{
  flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,3vw,18px);
  padding:14px calc(clamp(12px,4vw,26px) + env(safe-area-inset-right)) 26px calc(clamp(12px,4vw,26px) + env(safe-area-inset-left));align-content:start;
  touch-action:pan-y;overscroll-behavior:contain;
}
.card{
  border:none;background:var(--panel);border-radius:var(--radius);padding:10px 10px 12px;
  box-shadow:0 6px 0 rgba(0,0,0,.08),0 10px 22px rgba(0,0,0,.10);
  border:4px solid var(--accent);cursor:pointer;font-family:inherit;color:inherit;
  display:flex;flex-direction:column;gap:6px;transition:transform .12s ease;
}
.card{touch-action:manipulation;}
.card:active{transform:scale(.96);}
.card-thumb{width:100%;aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:#eef;}
.card-thumb .thumb-svg{width:100%;height:100%;display:block;}
.card-name{font-weight:800;font-size:clamp(14px,4vw,20px);text-align:center;line-height:1.1;}
.card-prog{font-size:clamp(11px,3vw,14px);font-weight:700;color:#6b7280;text-align:center;}

/* ---------- game ---------- */
#game{padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);}
.hud{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:8px clamp(8px,3vw,16px);
}
.hud-btn{
  width:clamp(48px,11vw,56px);height:clamp(48px,11vw,56px);border-radius:16px;border:none;touch-action:manipulation;
  background:#fff;box-shadow:0 3px 0 rgba(0,0,0,.12);font-size:clamp(20px,6vw,26px);
  cursor:pointer;display:flex;align-items:center;justify-content:center;color:inherit;
}
.hud-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.12);}
.level-label{
  flex:1;text-align:center;font-weight:800;font-size:clamp(16px,5vw,24px);
  background:#fff;border-radius:16px;padding:8px 6px;box-shadow:0 3px 0 rgba(0,0,0,.10);
}
.maze-surface{
  flex:1 1 auto;display:flex;align-items:center;justify-content:center;
  padding:clamp(6px,2vw,16px);min-height:0;touch-action:none;
}
.maze-svg{
  width:auto;height:100%;max-width:100%;max-height:100%;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.18));border-radius:20px;
}
.maze-surface.nudge{animation:nudge .28s;}
@keyframes nudge{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

.dpad{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:6px 0 calc(clamp(8px,3vh,20px) + env(safe-area-inset-bottom));touch-action:none;
}
.dpad-mid{display:flex;gap:calc(var(--dpad) * .55);}
.dbtn{
  width:var(--dpad);height:var(--dpad);border-radius:26px;border:none;cursor:pointer;
  background:var(--accent);color:#fff;font-size:calc(var(--dpad) * .42);line-height:1;
  box-shadow:0 6px 0 rgba(0,0,0,.22);display:flex;align-items:center;justify-content:center;
  font-family:inherit;touch-action:none;
}
.dbtn.pressed,.dbtn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.22);filter:brightness(1.08);}

/* ---------- landscape / desktop: maze centered, dpad to the side ---------- */
@media (orientation:landscape) and (min-width:760px){
  #game{flex-direction:row;align-items:stretch;}
  .hud{flex-direction:column;width:clamp(64px,8vw,88px);justify-content:flex-start;padding-top:14px;}
  .level-label{flex:0 0 auto;writing-mode:horizontal-tb;}
  .maze-surface{flex:1 1 auto;}
  .dpad{justify-content:center;width:clamp(240px,26vw,340px);}
  :root{--dpad:min(15vh,120px);}
}

/* ---------- overlays ---------- */
.overlay{
  position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:rgba(20,24,40,.42);backdrop-filter:blur(2px);
  padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
}
.overlay.hidden{display:none;}
.overlay-card{
  background:#fff;border-radius:28px;padding:clamp(18px,5vw,34px);text-align:center;
  box-shadow:0 18px 50px rgba(0,0,0,.3);max-width:min(92vw,460px);width:100%;
  border:6px solid var(--accent);
}
.big-word{font-size:clamp(38px,12vw,72px);font-weight:800;color:var(--accent);line-height:1;}
.win-star{font-size:clamp(44px,14vw,84px);margin:6px 0;}
.trophy{font-size:clamp(56px,18vw,110px);}
.finale-sub{font-size:clamp(15px,4.5vw,22px);font-weight:700;margin-top:6px;color:#4a5568;}
.overlay-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px;}
.big-btn{
  border:none;border-radius:18px;padding:14px 20px;font-size:clamp(18px,5vw,24px);font-weight:800;
  background:#eef1f6;color:var(--ink);cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.14);font-family:inherit;
  min-width:64px;touch-action:manipulation;
}
.big-btn.primary{background:var(--accent);color:#fff;}
.big-btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.14);}

.map-title{font-weight:800;font-size:clamp(18px,5vw,24px);margin-bottom:12px;}
.map-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:16px;}
.map-cell{
  aspect-ratio:1/1;border-radius:14px;border:none;font-weight:800;font-size:clamp(15px,4.5vw,20px);
  background:#eef1f6;color:var(--ink);cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.1);font-family:inherit;
}
.map-cell{touch-action:manipulation;position:relative;}
.map-cell.done{background:#c9f5d1;}
.map-cell.done::after{content:'✓';position:absolute;top:2px;right:5px;font-size:11px;color:#2b8a3e;}
.map-cell.current{outline:4px solid var(--accent);outline-offset:-4px;}

.rotate-card{text-align:center;color:#fff;}
.rotate-emoji{font-size:64px;animation:spin 2.4s ease-in-out infinite;}
.rotate-text{font-size:clamp(18px,6vw,26px);font-weight:800;margin-top:12px;}
@keyframes spin{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}

.fx-canvas{position:fixed;inset:0;z-index:60;pointer-events:none;}

/* ---------- sprite animations ---------- */
.pop-in{animation:popIn .3s cubic-bezier(.2,1.3,.5,1);}
@keyframes popIn{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.goal.pulse{transform-box:fill-box;transform-origin:center;animation:pulse 1.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:.85}50%{opacity:1}}
.hero{transform-box:fill-box;}
.hero.whoosh{animation:whoosh .3s;}
@keyframes whoosh{0%{opacity:.2}50%{opacity:.4}100%{opacity:1}}
.goal.bounce{animation:goalBounce .5s ease;}
@keyframes goalBounce{0%,100%{}50%{filter:brightness(1.3)}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.05s!important;}
}