/* ============================================================
   Talking Gorilla - ad-free web build
   ============================================================ */

:root{
  --bg-deep:#07130c;
  --ink:#f3ece1;
  --ink-dim:#a9bbaf;
  --gold:#ffc24a;
  --gold-deep:#e0921c;
  --leaf:#2f7d42;
  --glass:rgba(12,26,18,.62);
  --glass-line:rgba(255,255,255,.12);
  --dock-h:clamp(74px,12vh,104px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  --shadow-lg:0 18px 50px rgba(0,0,0,.55);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden}
body{
  background:var(--bg-deep);
  color:var(--ink);
  font:500 16px/1.45 ui-rounded,"SF Pro Rounded",-apple-system,"Segoe UI Variable Display","Segoe UI",Roboto,system-ui,sans-serif;
  overscroll-behavior:none;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
}

/* ---------------------------- STAGE ---------------------------- */
#stage{
  position:fixed;
  inset:0;
  overflow:hidden;
  background:#07130c;
  cursor:pointer;
}
#stage > svg,
#stage > canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
#scene{z-index:1}
#weather{z-index:2;pointer-events:none}
#gorilla{z-index:3;pointer-events:none;will-change:transform}
#foreground{z-index:4;pointer-events:none}
#fx{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}
#hitmap{z-index:6;opacity:0}
#hitmap *{cursor:pointer}

/* debug helper: body.show-hits reveals the tap regions */
body.show-hits #hitmap{opacity:.34}

/* ---------------------------- HUD ---------------------------- */
#hud-top{
  position:fixed;
  top:calc(var(--safe-t) + 10px);
  left:0;right:0;
  z-index:20;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  pointer-events:none;
}
#hud-top > *{pointer-events:auto}

.chip{
  width:44px;height:44px;
  flex:0 0 auto;
  display:grid;place-items:center;
  border:1px solid var(--glass-line);
  border-radius:50%;
  background:var(--glass);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  color:var(--ink);
  cursor:pointer;
  transition:transform .18s var(--ease-back),background .18s;
}
.chip:active{transform:scale(.9)}
.chip svg{width:22px;height:22px;fill:currentColor}
.chip.off{color:#ff8b7a}

#mic-meter{
  flex:1 1 auto;
  position:relative;
  height:44px;
  border-radius:22px;
  border:1px solid var(--glass-line);
  background:var(--glass);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  overflow:hidden;
  display:grid;
  place-items:center;
  max-width:320px;
  margin:0 auto;
  transition:opacity .3s,border-color .3s;
}
#mic-meter-fill{
  position:absolute;
  inset:0;
  transform-origin:left center;
  transform:scaleX(0);
  background:linear-gradient(90deg,#2f7d42,#63c96f 70%,#a6f08a);
  opacity:.5;
  transition:transform .06s linear;
}
#mic-state{
  position:relative;
  font-size:12.5px;
  letter-spacing:.09em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--ink);
  text-shadow:0 1px 3px rgba(0,0,0,.6);
  white-space:nowrap;
}
#mic-meter.listening{border-color:rgba(160,240,140,.55)}
#mic-meter.talking #mic-meter-fill{background:linear-gradient(90deg,#c9761f,#ffc24a 70%,#ffe6a0)}

/* ---------------------------- DOCK ---------------------------- */
#dock{
  position:fixed;
  left:0;right:0;
  bottom:0;
  z-index:20;
  height:calc(var(--dock-h) + var(--safe-b));
  padding:0 8px var(--safe-b);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  background:linear-gradient(180deg,transparent,rgba(5,14,9,.82) 45%,rgba(5,14,9,.96));
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
}
#dock::-webkit-scrollbar{display:none}

.act{
  flex:0 0 auto;
  width:clamp(58px,11.6vw,78px);
  height:calc(var(--dock-h) - 16px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  border:0;
  border-radius:18px;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  transition:transform .2s var(--ease-back),background .2s,opacity .2s;
}
.act:active{transform:scale(.88)}
.act:hover{background:rgba(255,255,255,.07)}
.act svg{
  width:clamp(24px,5.6vw,31px);
  height:clamp(24px,5.6vw,31px);
  fill:currentColor;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.55));
}
.act b{
  font-size:clamp(9.5px,2.2vw,11.5px);
  font-weight:700;
  letter-spacing:.055em;
  text-transform:uppercase;
  opacity:.82;
}
.act[data-act="mic"]{color:var(--gold)}
.act[data-act="mic"].hot{color:#8ef08a}
.act[data-act="mic"].hot svg{filter:drop-shadow(0 0 10px rgba(140,240,140,.9))}
.act.busy{opacity:.3;pointer-events:none}

/* ---------------------------- GATE ---------------------------- */
#gate{
  position:fixed;inset:0;z-index:60;
  display:grid;place-items:center;
  padding:24px;
  background:radial-gradient(120% 90% at 50% 20%,#17351f,#050d08 75%);
  transition:opacity .55s var(--ease-out),visibility .55s;
}
#gate.gone{opacity:0;visibility:hidden;pointer-events:none}
.gate-card{text-align:center;max-width:390px;animation:rise .7s var(--ease-out) both}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.gate-logo{
  width:128px;height:128px;margin:0 auto 20px;
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.62));
  animation:bob 3.4s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-11px) rotate(2deg)}}
.gate-logo svg{width:100%;height:100%}
.gate-card h1{
  margin:0 0 10px;
  font-size:clamp(32px,8.5vw,45px);
  font-weight:800;
  letter-spacing:-.02em;
  background:linear-gradient(180deg,#fff6e2,#ffc24a);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.gate-card p{margin:0 0 26px;color:var(--ink-dim);font-size:15.5px;line-height:1.6}
.noads{color:#8ef08a;font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase}
#gate-go{
  border:0;cursor:pointer;
  padding:17px 46px;
  border-radius:999px;
  font:800 17.5px/1 inherit;
  letter-spacing:.03em;
  color:#3a2503;
  background:linear-gradient(180deg,#ffd979,var(--gold-deep));
  box-shadow:0 12px 30px rgba(224,146,28,.42),inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .2s var(--ease-back),box-shadow .2s;
}
#gate-go:active{transform:scale(.94);box-shadow:0 6px 16px rgba(224,146,28,.4)}
#gate-note{display:block;margin-top:20px;color:#7d8f84;font-size:12.5px;line-height:1.5}

/* ---------------------------- SETTINGS ---------------------------- */
#settings{position:fixed;inset:0;z-index:70;display:grid;place-items:end center;background:rgba(3,9,6,.6);backdrop-filter:blur(4px)}
#settings[hidden]{display:none}
.sheet{
  width:min(520px,100%);
  max-height:88vh;
  overflow-y:auto;
  padding:8px 20px calc(26px + var(--safe-b));
  border-radius:26px 26px 0 0;
  border-top:1px solid var(--glass-line);
  background:linear-gradient(180deg,#132318,#0a160e);
  box-shadow:var(--shadow-lg);
  animation:slideUp .34s var(--ease-out) both;
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:none}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:inherit;padding:14px 0 10px;z-index:2}
.sheet-head h2{margin:0;font-size:20px;font-weight:800}
#settings-close{border:0;background:rgba(255,255,255,.08);color:var(--ink);width:34px;height:34px;border-radius:50%;font-size:22px;line-height:1;cursor:pointer}
.row{display:flex;align-items:center;gap:14px;padding:15px 2px;border-top:1px solid rgba(255,255,255,.06);font-size:15px}
.row > span{flex:1 1 auto}
.row small{opacity:.5;font-weight:400}
.row input[type=range]{flex:0 0 46%;accent-color:var(--gold)}
.row output{flex:0 0 52px;text-align:right;font-variant-numeric:tabular-nums;color:var(--gold);font-weight:700;font-size:13.5px}
.row.switch{cursor:pointer}
.row.switch input{position:absolute;opacity:0;pointer-events:none}
.row.switch i{flex:0 0 auto;width:48px;height:28px;border-radius:999px;background:rgba(255,255,255,.14);position:relative;transition:background .2s}
.row.switch i::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .22s var(--ease-back)}
.row.switch input:checked + i{background:var(--leaf)}
.row.switch input:checked + i::after{transform:translateX(20px)}
.row.btns{gap:10px}
.row.btns button{flex:1;padding:12px;border-radius:13px;border:1px solid var(--glass-line);background:rgba(255,255,255,.06);color:var(--ink);font:600 13.5px/1 inherit;cursor:pointer}
.row.btns button:active{transform:scale(.97)}
.fineprint{margin:18px 0 0;font-size:12px;line-height:1.6;color:#6f8177;border-top:1px solid rgba(255,255,255,.06);padding-top:16px}

/* ---------------------------- TOAST ---------------------------- */
#toast{
  position:fixed;
  left:50%;
  bottom:calc(var(--dock-h) + var(--safe-b) + 18px);
  transform:translate(-50%,14px);
  z-index:50;
  padding:11px 20px;
  border-radius:999px;
  background:rgba(8,18,12,.9);
  border:1px solid var(--glass-line);
  backdrop-filter:blur(12px);
  font-size:14px;font-weight:600;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s,transform .3s var(--ease-back);
  max-width:80vw;text-align:center;
}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------------------------- FX ---------------------------- */
.fx-item{
  position:absolute;
  font-size:34px;
  line-height:1;
  will-change:transform,opacity;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.5));
}
#flash{
  position:fixed;inset:0;z-index:80;background:#fff;pointer-events:none;opacity:0;
}
#flash.pop{animation:flash .5s ease-out}
@keyframes flash{0%{opacity:.96}100%{opacity:0}}

/* ---------------------------- RESPONSIVE ---------------------------- */
@media (max-width:420px){
  .act b{display:none}
  .act{width:auto;flex:1 1 0;min-width:0;padding:0 2px}
  #dock{gap:0}
}
@media (min-width:900px){
  #dock{
    left:50%;right:auto;bottom:18px;
    transform:translateX(-50%);
    width:auto;
    border-radius:26px;
    border:1px solid var(--glass-line);
    background:var(--glass);
    backdrop-filter:blur(18px) saturate(1.4);
    -webkit-backdrop-filter:blur(18px) saturate(1.4);
    padding:0 12px;
    height:var(--dock-h);
    box-shadow:var(--shadow-lg);
  }
}
@media (prefers-reduced-motion:reduce){
  .gate-logo{animation:none}
}

/* ============================================================
   BANANA CHIP
   ============================================================ */
#banana-chip{
  flex:0 0 auto;
  display:flex;align-items:center;gap:7px;
  height:44px;padding:0 15px 0 12px;
  border-radius:22px;
  border:1px solid var(--glass-line);
  background:var(--glass);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  font-weight:800;font-size:15px;
  font-variant-numeric:tabular-nums;
}
#banana-chip svg{width:19px;height:19px;fill:var(--gold)}
#banana-chip.bump{animation:bump .4s var(--ease-back)}
@keyframes bump{0%,100%{transform:scale(1)}40%{transform:scale(1.22)}}

.act.hi{color:var(--gold)}

/* ============================================================
   VOICE MODE CHIPS
   ============================================================ */
.row.col{flex-direction:column;align-items:stretch;gap:11px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.vmode{
  border:1px solid var(--glass-line);
  background:rgba(255,255,255,.05);
  color:var(--ink);
  padding:9px 15px;border-radius:999px;
  font:700 13px/1 inherit;cursor:pointer;
  transition:transform .16s var(--ease-back),background .16s,border-color .16s,color .16s;
}
.vmode:active{transform:scale(.93)}
.vmode.on{
  background:linear-gradient(180deg,#ffd979,var(--gold-deep));
  border-color:transparent;color:#3a2503;
  box-shadow:0 5px 16px rgba(224,146,28,.34);
}

/* ============================================================
   SHOP
   ============================================================ */
#shop{position:fixed;inset:0;z-index:72;display:grid;place-items:end center;background:rgba(3,9,6,.6);backdrop-filter:blur(4px)}
#shop[hidden]{display:none}
#shop-grid h3{
  margin:22px 0 11px;font-size:13px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-dim);
}
.shop-bal{
  display:flex;align-items:center;gap:9px;
  padding:15px 17px;border-radius:17px;
  background:linear-gradient(135deg,rgba(255,194,74,.2),rgba(255,194,74,.06));
  border:1px solid rgba(255,194,74,.3);
  font-size:15px;
}
.shop-bal svg{width:22px;height:22px;fill:var(--gold);flex:0 0 auto}
.shop-bal b{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums}
.shop-bal em{margin-left:auto;font-style:normal;font-size:12.5px;color:var(--ink-dim)}

.shop-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.item{
  position:relative;text-align:left;
  display:grid;grid-template-rows:auto auto 1fr auto;gap:5px;
  padding:13px;border-radius:17px;
  border:1px solid var(--glass-line);
  background:rgba(255,255,255,.045);
  color:var(--ink);cursor:pointer;
  transition:transform .18s var(--ease-back),border-color .18s,background .18s;
}
.item:active{transform:scale(.96)}
.item.owned{background:rgba(255,255,255,.08)}
.item.worn{border-color:var(--gold);background:rgba(255,194,74,.14)}
.sw{
  display:block;width:100%;height:50px;border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.acc-sw{display:grid;place-items:center;background:rgba(255,255,255,.07)}
.acc-sw svg{width:34px;height:34px}
.item .nm{font-size:13.5px;font-weight:800;line-height:1.2}
.item .bl{font-size:11px;line-height:1.4;color:var(--ink-dim)}
.item .pr{
  font-size:12px;font-weight:800;color:var(--gold);
  letter-spacing:.03em;padding-top:3px;
}
.item.worn .pr{color:#8ef08a}

/* ============================================================
   RUNNER
   ============================================================ */
#runner{position:fixed;inset:0;z-index:40;background:#0a1410;touch-action:none}
#runner[hidden]{display:none}
#runner-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

#runner-hud{
  position:absolute;top:calc(var(--safe-t) + 12px);left:0;right:0;
  display:flex;align-items:center;gap:10px;padding:0 14px;
  pointer-events:none;
}
.rstat{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:8px 15px;border-radius:15px;
  background:rgba(6,14,10,.6);
  border:1px solid var(--glass-line);
  backdrop-filter:blur(10px);
}
.rstat span{font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;opacity:.65;font-weight:700}
.rstat b{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.rstat.nanas{flex-direction:row;align-items:center;gap:7px}
.rstat.nanas svg{width:19px;height:19px;fill:var(--gold)}
#runner-power{
  margin-left:auto;margin-right:8px;
  font-size:12px;font-weight:800;letter-spacing:.1em;
  color:#8ef08a;opacity:0;transition:opacity .25s;
  text-shadow:0 0 12px rgba(140,240,140,.7);
}
#runner-quit{
  pointer-events:auto;flex:0 0 auto;
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--glass-line);
  background:rgba(6,14,10,.6);color:var(--ink);
  font-size:24px;line-height:1;cursor:pointer;
  backdrop-filter:blur(10px);
}

#runner-help{
  position:absolute;left:0;right:0;
  bottom:calc(var(--safe-b) + 18px);
  text-align:center;pointer-events:none;
  font-size:12px;letter-spacing:.04em;
  color:rgba(255,255,255,.62);
  text-shadow:0 2px 6px rgba(0,0,0,.7);
  animation:fadeHelp 1s ease-out 5s both;
}
@keyframes fadeHelp{to{opacity:0}}

#runner-over{
  position:absolute;inset:0;z-index:2;
  display:grid;place-items:center;padding:24px;
  background:rgba(4,10,7,.76);backdrop-filter:blur(7px);
}
#runner-over[hidden]{display:none}
.ro-card{
  width:min(380px,100%);text-align:center;
  padding:30px 26px;border-radius:26px;
  background:linear-gradient(180deg,#152619,#0a160e);
  border:1px solid var(--glass-line);
  box-shadow:var(--shadow-lg);
  animation:rise .4s var(--ease-out) both;
}
.ro-card h2{
  margin:0 0 20px;font-size:25px;font-weight:800;
  background:linear-gradient(180deg,#fff6e2,#ffc24a);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ro-stats{display:flex;justify-content:center;gap:10px;margin-bottom:24px}
.ro-stats > div{
  flex:1;padding:13px 6px;border-radius:15px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--glass-line);
}
.ro-stats span{display:block;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.6;font-weight:700;margin-bottom:4px}
.ro-stats b{font-size:23px;font-weight:800;font-variant-numeric:tabular-nums}
.ro-card button{
  display:block;width:100%;margin-bottom:9px;
  padding:15px;border-radius:14px;border:0;cursor:pointer;
  font:800 15.5px/1 inherit;color:#3a2503;
  background:linear-gradient(180deg,#ffd979,var(--gold-deep));
  box-shadow:0 8px 22px rgba(224,146,28,.34);
  transition:transform .18s var(--ease-back);
}
.ro-card button:active{transform:scale(.96)}
.ro-card button.ghost{
  background:rgba(255,255,255,.07);color:var(--ink);
  border:1px solid var(--glass-line);box-shadow:none;
  font-weight:700;font-size:14px;padding:13px;
}

body.in-runner #dock,
body.in-runner #hud-top{display:none}

@media (min-width:900px){
  #runner-help{font-size:13px}
}