/* ═══════════════════════════════════════════════════════════════
   🍆 STACK THE EGGPLANT — game.css
   ═══════════════════════════════════════════════════════════════ */

.gamebody{
  height:100svh;
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:manipulation;
  background:var(--void);
}

.stage{
  position:relative;
  width:100%; height:100svh;
  overflow:hidden;
  user-select:none; -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
#c{ display:block; width:100%; height:100%; cursor:pointer }

/* ── HUD ────────────────────────────────────────────────────── */
.hud{
  position:absolute; inset:0;
  pointer-events:none;
  padding:max(1rem,env(safe-area-inset-top)) 1rem 1rem;
  font-family:var(--body);
}
.hud[hidden]{ display:none }

.hud__btn{
  pointer-events:auto;
  display:grid; place-items:center;
  width:44px; height:44px;
  border:1px solid var(--line); border-radius:12px;
  background:rgba(20,8,32,.6); backdrop-filter:blur(10px);
  color:var(--lilac); font-size:1.05rem; font-family:var(--body);
  cursor:pointer; transition:background .2s, border-color .2s, transform .2s;
}
.hud__btn:hover{ background:rgba(168,85,247,.22); border-color:rgba(200,150,255,.4) }
.hud__btn:active{ transform:scale(.94) }
.hud__btn.is-off{ opacity:.42 }

.hud__back{ position:absolute; top:max(1rem,env(safe-area-inset-top)); left:1rem }

.hud__right{
  position:absolute; top:max(1rem,env(safe-area-inset-top)); right:1rem;
  display:flex; flex-direction:column; align-items:flex-end; gap:.5rem;
}
.hud__best{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint);
}
.hud__best b{ color:var(--lilac); font-size:.85rem; margin-left:.25rem }

.hud__score{
  position:absolute; top:max(1.1rem,env(safe-area-inset-top)); left:50%;
  translate:-50% 0; text-align:center;
}
.hud__score b{
  display:block;
  font-family:var(--display);
  font-size:clamp(2.6rem,10vw,4.2rem);
  line-height:.9; letter-spacing:-.03em;
  color:#fff;
  text-shadow:0 4px 30px rgba(168,85,247,.85), 0 2px 0 rgba(43,9,64,.9);
  transition:scale .16s var(--ease);
}
.hud__score b.pop{ scale:1.22 }
.hud__score small{
  display:block; margin-top:.15rem;
  font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--faint);
}

/* balance meter */
.wobble{
  position:absolute; left:50%; bottom:max(1.1rem,env(safe-area-inset-bottom));
  translate:-50% 0; width:min(58vw,230px); text-align:center;
  padding:.6rem .9rem .5rem; border-radius:14px;
  background:rgba(11,4,16,.45); backdrop-filter:blur(6px);
}
.wobble__track{
  position:relative; height:5px; border-radius:99px;
  background:rgba(200,150,255,.16); overflow:hidden;
}
.wobble__track::after{
  content:''; position:absolute; left:50%; top:0; width:1px; height:100%;
  background:rgba(255,255,255,.5);
}
.wobble__track i{
  position:absolute; top:0; height:100%; border-radius:99px;
  background:var(--stem); transition:left .25s var(--ease), width .25s var(--ease), background .25s;
  left:50%; width:0;
}
.wobble.is-hot .wobble__track i{ background:#ff9f43 }
.wobble.is-danger .wobble__track i{ background:#ff4d6d }
.wobble span{
  display:block; margin-top:.45rem;
  font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--faint);
}

/* ── toast ──────────────────────────────────────────────────── */
.toast{
  position:absolute; left:50%; top:34%;
  translate:-50% 0;
  font-family:var(--display);
  font-size:clamp(1.4rem,5.5vw,2.4rem);
  letter-spacing:.02em; color:var(--stem);
  text-shadow:0 4px 26px rgba(140,224,63,.6);
  opacity:0; pointer-events:none; white-space:nowrap;
}
.toast.show{ animation:toastPop .85s var(--ease) forwards }
@keyframes toastPop{
  0%{ opacity:0; transform:translateY(14px) scale(.8) }
  22%{ opacity:1; transform:translateY(0) scale(1.06) }
  70%{ opacity:1; transform:translateY(-10px) scale(1) }
  100%{ opacity:0; transform:translateY(-30px) scale(.96) }
}

/* ── panels ─────────────────────────────────────────────────── */
/* the grain layer must never sit over the canvas with a blend mode:
   it forces a full re-composite of the game every single frame */
.gamebody .grain{ inset:0; mix-blend-mode:normal; opacity:.07; animation:none }

.panel{
  position:absolute; inset:0; z-index:20;
  display:grid; justify-items:center; align-content:safe center;
  overflow-y:auto; overscroll-behavior:contain;
  pointer-events:none;
  padding:2rem 1.25rem;
  background:radial-gradient(120% 90% at 50% 40%,rgba(30,11,46,.82),rgba(11,4,16,.96));
  backdrop-filter:blur(9px);
  opacity:0; visibility:hidden;
  transition:opacity .4s var(--ease), visibility .4s;
}
.panel.is-open{ opacity:1; visibility:visible; pointer-events:auto }

.panel__inner{
  max-width:30rem; width:100%; text-align:center;
  transform:translateY(16px); opacity:0;
  transition:transform .5s .07s var(--ease), opacity .5s .07s var(--ease);
}
.panel.is-open .panel__inner{ transform:none; opacity:1 }

.panel__mark{
  width:78px; height:101px; margin:0 auto 1.4rem;
  filter:drop-shadow(0 18px 30px rgba(43,9,64,.9)) drop-shadow(0 0 40px rgba(168,85,247,.45));
  animation:float 6s ease-in-out infinite;
}
.panel__title{
  font-family:var(--display);
  font-size:clamp(2rem,8.5vw,3.1rem);
  line-height:.94; letter-spacing:-.035em; margin:0 0 1rem;
}
.panel__title span{
  background:linear-gradient(100deg,var(--orchid),var(--lilac) 50%,var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.panel__verdict{
  font-family:var(--display);
  font-size:clamp(1.7rem,7vw,2.6rem);
  letter-spacing:-.02em; margin:0 0 1.4rem; color:#fff;
}
.panel__text{
  margin:0 0 1.8rem; color:var(--muted);
  font-size:.98rem; line-height:1.65; text-wrap:balance;
}
.panel__stats{
  display:flex; justify-content:center; gap:1rem; margin-bottom:1.6rem;
}
.panel__stats div{
  flex:1; max-width:9rem; padding:1rem .5rem;
  border:1px solid var(--line); border-radius:18px;
  background:var(--glass);
}
.panel__stats b{
  display:block; font-family:var(--display);
  font-size:2.2rem; line-height:1; color:#fff;
}
.panel__stats small{
  display:block; margin-top:.4rem;
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--faint);
}
.panel__actions{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap }
.panel__keys{ margin:1.3rem 0 0; font-size:.72rem; color:var(--faint) }
.panel__keys kbd{
  display:inline-block; margin:0 .12rem;
  padding:.25em .6em; border-radius:7px;
  border:1px solid var(--line); background:var(--glass);
  font-family:var(--body); font-size:.68rem; color:var(--muted);
}
.panel__home{
  display:block; width:max-content; margin:1.6rem auto 0;
  font-size:.82rem; color:var(--faint); transition:color .25s;
}
.panel__home:hover{ color:var(--lilac) }
.panel__note{
  margin:1.6rem 0 0; font-size:.7rem; line-height:1.6; color:var(--faint);
  max-width:24rem; margin-inline:auto;
}

@media (max-height:620px){
  .panel{ padding:1.25rem 1.25rem }
  .panel__mark{ width:52px; height:68px; margin-bottom:.8rem }
  .panel__title{ font-size:clamp(1.5rem,6vw,2.2rem); margin-bottom:.7rem }
  .panel__verdict{ font-size:clamp(1.3rem,5vw,1.9rem); margin-bottom:.8rem }
  .panel__text{ margin-bottom:1.1rem; font-size:.88rem }
  .panel__stats{ margin-bottom:1rem }
  .panel__stats b{ font-size:1.7rem }
  .panel__note,
  .panel__keys{ display:none }
  .panel__home{ margin-top:.9rem }
}