/* PooPoo Panik — shell styles, adapted from ~/test2-maze/css/style.css.
   RULE (GAME-SPEC.md): keep every media query well-formed — a malformed one
   caused all three test2 bugs. This file has exactly two, at the bottom. */
:root{ --accent:#a05a2c; --ink:#20232a; --panel:#fff; --bg-top:#ffe9c9; --bg-bot:#ffd9a8; --radius:22px; }
*{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;}
.screen{position:absolute;inset:0;display:none;}
.screen.active{display:block;}

/* ---- home / character picker ---- */
#home{display:none;flex-direction:column;}
#home.active{display:flex;}
.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(34px,9vw,60px);font-weight:800;color:#fff;text-shadow:0 3px 0 var(--accent),0 6px 14px rgba(0,0,0,.18);-webkit-text-stroke:2px var(--accent);paint-order:stroke fill;}
.home-sub{margin:4px 0 0;font-size:clamp(14px,3.8vw,21px);color:#7a5230;font-weight:700;}
.gallery{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:clamp(10px,2.5vw,18px);
  padding:14px calc(16px + env(safe-area-inset-right)) calc(26px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  align-content:start;touch-action:pan-y;overscroll-behavior:contain;}
.card{border:4px solid var(--accent);background:var(--panel);border-radius:var(--radius);padding:10px;
  box-shadow:0 6px 0 rgba(0,0,0,.08),0 10px 22px rgba(0,0,0,.10);cursor:pointer;font-family:inherit;color:inherit;
  display:flex;flex-direction:column;gap:6px;touch-action:manipulation;}
.card:active{transform:scale(.96);}
.card-thumb{width:100%;aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:#fdf3e3;}
.card-thumb canvas{width:100%;height:100%;display:block;}
.card-name{font-weight:800;font-size:clamp(14px,4vw,20px);text-align:center;line-height:1.1;}

/* ---- game (canvas fills the screen) ---- */
#game.active{display:block;}
#gameCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;}
.home-btn{position:absolute;top:calc(8px + env(safe-area-inset-top));left:calc(8px + env(safe-area-inset-left));
  width:clamp(48px,8vmin,60px);height:clamp(48px,8vmin,60px);border-radius:16px;border:none;background:rgba(255,255,255,.9);
  box-shadow:0 3px 0 rgba(0,0,0,.2);font-size:clamp(22px,4.5vmin,28px);cursor:pointer;z-index:20;touch-action:manipulation;}
.home-btn:active{transform:translateY(2px);}
.fs-btn{position:absolute;top:calc(8px + env(safe-area-inset-top));right:calc(8px + env(safe-area-inset-right));
  width:clamp(46px,8vmin,56px);height:clamp(46px,8vmin,56px);border-radius:12px;border:2px solid rgba(0,0,0,.15);background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 0 rgba(0,0,0,.15);font-size:clamp(18px,4vmin,22px);cursor:pointer;z-index:20;touch-action:manipulation;}
.fs-btn:active{transform:translateY(2px);}

.stick{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(28px + env(safe-area-inset-bottom));
  width:min(36vw,150px);height:min(36vw,150px);border-radius:50%;z-index:20;touch-action:none;
  background:rgba(255,255,255,.28);border:3px solid rgba(255,255,255,.65);box-shadow:0 4px 12px rgba(0,0,0,.25);
  display:flex;align-items:center;justify-content:center;}
.stick.active{background:rgba(255,255,255,.42);}
.stick-knob{width:46%;height:46%;border-radius:50%;background:rgba(255,255,255,.88);box-shadow:0 3px 8px rgba(0,0,0,.3);transition:transform .04s linear;pointer-events:none;}

/* ---- 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;}
.rotate-card{text-align:center;color:#fff;}
.rotate-emoji{font-size:64px;animation:spin 2.2s ease-in-out infinite;}
@keyframes spin{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(78deg)}}

.replay-wrap{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(26px + env(safe-area-inset-bottom));z-index:45;}
.replay-wrap.hidden{display:none;}
.big-btn{border:none;border-radius:18px;padding:14px 26px;font-size:clamp(22px,6vw,30px);font-weight:800;background:var(--accent);color:#fff;cursor:pointer;
  box-shadow:0 4px 0 rgba(0,0,0,.2);font-family:inherit;min-width:64px;touch-action:manipulation;}
.big-btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.2);}
.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}}

.fx-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:60;pointer-events:none;}
.build-tag{position:fixed;bottom:3px;left:5px;font-size:11px;font-weight:800;color:rgba(0,0,0,.5);z-index:70;pointer-events:none;background:rgba(255,255,255,.6);padding:1px 6px;border-radius:6px;}

/* Desktop (mouse) hides touch-only chrome. KEEP WELL-FORMED. */
@media (hover:hover) and (pointer:fine){ .stick{display:none;} .fs-btn{display:none;} }
@media (prefers-reduced-motion:reduce){ *{animation-duration:.001s!important;} }