*{box-sizing:border-box}
:root{--lake:#69d9f1;--pine:#31bb82;--snow:#eaf8ff;--night:#061522;--gold:#ffe58d}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#061522;color:#fff;font-family:system-ui,-apple-system,Segoe UI,sans-serif;touch-action:none}
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#tahoeApp{position:fixed;inset:0;background:#061522;overflow:hidden}
#tahoeCanvas{display:block;width:100%;height:100%;object-fit:contain;background:#071b28;image-rendering:auto}
button,a{font:inherit}
button{color:#fff;border:0;font-weight:950;cursor:pointer}
.hidden{display:none!important}

#tahoeHud{position:absolute;z-index:8;top:10px;left:12px;right:126px;display:flex;gap:8px;align-items:center;pointer-events:none}
.tahoeChip{min-height:42px;display:flex;align-items:center;gap:7px;padding:7px 12px;border:2px solid rgba(255,255,255,.72);border-radius:999px;background:rgba(5,25,38,.78);box-shadow:0 8px 20px rgba(0,0,0,.22);backdrop-filter:blur(8px)}
.dudeChip span{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#ff54bd,#7b72ff);border:2px solid white}
.altitudeChip{color:var(--gold)}
.trailProgress{position:relative;flex:1;max-width:380px;height:28px;border:2px solid rgba(255,255,255,.72);border-radius:999px;overflow:hidden;background:rgba(5,25,38,.78);text-align:center}
.trailProgress span{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#52dce7,#48d596,#ffe58d);transition:width .18s}
.trailProgress b{position:relative;z-index:2;line-height:24px;font-size:.64rem;letter-spacing:.09em;text-shadow:0 1px 3px #000}

#pauseBtn,#returnBtn{position:absolute;z-index:10;top:10px;width:46px;height:46px;border:2px solid rgba(255,255,255,.72);border-radius:50%;display:grid;place-items:center;background:rgba(5,25,38,.82);text-decoration:none;color:#fff}
#pauseBtn{right:64px}
#returnBtn{right:10px;font-size:1.35rem}

.storyCard,.pauseMenu,.trailheadCard{position:absolute;z-index:20;left:50%;top:50%;transform:translate(-50%,-50%);width:min(650px,92vw);text-align:center;padding:32px;border:2px solid rgba(255,255,255,.65);border-radius:30px;background:linear-gradient(145deg,rgba(5,25,38,.95),rgba(13,50,67,.94));box-shadow:0 30px 100px rgba(0,0,0,.62);backdrop-filter:blur(15px)}
.storyCard small,.pauseMenu small,.trailheadCard small{color:#7ff0d2;letter-spacing:.22em;font-weight:1000}
.storyCard h1{margin:.08em 0;font-size:clamp(3.2rem,10vw,6.2rem);line-height:.9;background:linear-gradient(100deg,#fff,#81eaff,#6ef0ac);-webkit-background-clip:text;color:transparent}
.storyCard h2{margin:.55rem 0;color:#ffe58d}
.storyCard p,.trailheadCard p{line-height:1.5;color:rgba(255,255,255,.85)}
.storyCard button,.pauseMenu button,.trailheadCard button{display:block;width:min(390px,100%);margin:12px auto 0;padding:14px 20px;border-radius:999px;background:linear-gradient(90deg,#27b686,#2787b6);box-shadow:0 10px 30px rgba(39,182,134,.28)}
.pauseMenu a,.trailheadCard a{display:block;width:min(390px,100%);margin:10px auto 0;padding:13px 20px;border-radius:999px;background:#334b64;color:#fff;text-decoration:none;font-weight:950}
.pauseMenu h2,.trailheadCard h2{font-size:2.3rem;margin:.35em 0}

.dialogue{position:absolute;z-index:16;left:50%;bottom:100px;transform:translateX(-50%);width:min(830px,92vw);display:grid;grid-template-columns:76px 1fr auto;gap:14px;align-items:center;padding:13px 15px;border:3px solid rgba(255,255,255,.9);border-radius:20px;background:rgba(4,21,34,.95);box-shadow:0 15px 55px rgba(0,0,0,.55)}
.dialogue img{width:68px;height:68px;object-fit:cover;border:3px solid #fff;border-radius:17px;background:#305970}
.dialogue small{color:#75ecd4;font-weight:1000;margin:0}
.dialogue p{margin:3px 0;line-height:1.35}
.dialogue button{padding:11px 16px;border-radius:999px;background:linear-gradient(90deg,#27b686,#2787b6)}

.memoryCard{position:absolute;z-index:18;left:50%;top:16%;transform:translateX(-50%);width:min(470px,88vw);display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;padding:15px 20px;border:2px solid #ffe58d;border-radius:20px;background:rgba(5,31,43,.95);box-shadow:0 18px 65px rgba(0,0,0,.55)}
.memoryCard>span{grid-row:1/4;font-size:2.7rem}
.memoryCard small{letter-spacing:.16em;color:#73e6ce;font-weight:1000}
.memoryCard strong{font-size:1.35rem}
.memoryCard p{margin:0;opacity:.78}

#objective{position:absolute;z-index:9;left:15px;bottom:94px;max-width:min(430px,65vw);padding:11px 15px;border-left:4px solid #69e3c0;border-radius:5px 14px 14px 5px;background:rgba(4,24,37,.82);backdrop-filter:blur(8px);pointer-events:none}
#objective small{display:block;color:#73e6ce;font-size:.62rem;letter-spacing:.16em;font-weight:1000}
#objective strong{display:block;margin:2px 0}
#objective span{font-size:.8rem;opacity:.78}

#touchControls{
  position:absolute;z-index:12;
  left:max(12px,env(safe-area-inset-left));
  right:max(12px,env(safe-area-inset-right));
  bottom:max(10px,env(safe-area-inset-bottom));
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:8px;padding:0;pointer-events:none;opacity:.84;
  transition:opacity .2s ease,filter .2s ease
}
.touchGroup{
  display:flex;gap:6px;align-items:flex-end;padding:5px;
  border-radius:19px;background:rgba(18,14,42,.48);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 28px rgba(0,0,0,.27);
  backdrop-filter:blur(10px);pointer-events:auto
}
.touchGroup button{
  width:58px;min-width:58px;height:58px;padding:4px!important;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:2px solid rgba(255,255,255,.72);border-radius:16px;
  color:#fff;background:linear-gradient(155deg,#384a72,#1d2e53);
  box-shadow:0 8px 18px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.22);
  user-select:none;-webkit-user-select:none;touch-action:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .09s,filter .09s,box-shadow .09s
}
.touchGroup button>span:first-child{font-size:21px;line-height:1}
.touchGroup .mini{width:52px;min-width:52px;background:linear-gradient(155deg,#7757e6,#5545bb)}
.touchGroup .power{background:linear-gradient(155deg,#ef49ad,#a63fca)}
.touchGroup .jump{background:linear-gradient(155deg,#40d8ca,#278fb8)}
.controlIcon{font-size:19px!important;line-height:1;margin-bottom:3px;pointer-events:none}
.controlLabel{font-size:8px;font-weight:1000;letter-spacing:-.045em;line-height:.95;pointer-events:none}
.touchGroup button.isPressed{
  transform:translateY(3px) scale(.93);
  filter:brightness(1.28);
  box-shadow:0 3px 9px rgba(0,0,0,.35),0 0 0 3px rgba(255,255,255,.2)
}
#rotateHint{display:none}

@media(hover:hover) and (pointer:fine){#touchControls{opacity:.7}#touchControls:hover{opacity:1}.touchGroup button:hover{transform:translateY(-2px);filter:brightness(1.12)}}
@media(max-width:760px){
  #tahoeHud{right:112px;gap:5px}.tahoeChip{padding:6px 9px;font-size:.78rem}.altitudeChip{display:none}.trailProgress{max-width:none}
  .inputStatus{
  position:absolute;z-index:13;right:18px;bottom:92px;
  display:grid;grid-template-columns:auto auto;column-gap:7px;align-items:center;
  padding:8px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.42);
  background:rgba(4,25,36,.84);backdrop-filter:blur(8px);pointer-events:none;
  transition:opacity .2s,transform .2s;
}
.inputStatus .inputDot{width:9px;height:9px;border-radius:50%;background:#ffe58d;box-shadow:0 0 10px #ffe58d}
.inputStatus b{font-size:.72rem;letter-spacing:.12em}
.inputStatus small{grid-column:1/-1;font-size:.62rem;opacity:.7;margin-top:1px}
.inputStatus.active .inputDot{background:#70f0bd;box-shadow:0 0 14px #70f0bd}
.inputStatus.active{transform:translateY(-2px)}
@media(max-width:760px){.inputStatus{display:none}}


/* v2.0.5v — World Polish */
.saveToast{
  position:absolute;z-index:24;left:50%;top:76px;transform:translate(-50%,-12px);
  padding:9px 15px;border-radius:999px;background:rgba(4,26,37,.92);
  border:1px solid rgba(126,244,202,.7);box-shadow:0 12px 35px rgba(0,0,0,.35);
  font-weight:900;font-size:.75rem;letter-spacing:.08em;opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s
}
.saveToast.show{opacity:1;transform:translate(-50%,0)}


/* v2.0.6 — Tahoe Playable & Scenic Pass */
.powerReadyPulse{animation:powerReadyPulse .7s ease}
@keyframes powerReadyPulse{50%{filter:brightness(1.45);box-shadow:0 0 0 5px rgba(255,91,194,.22),0 0 26px rgba(255,91,194,.7)}}
@media(max-width:760px){
  #touchControls{left:max(7px,env(safe-area-inset-left));right:max(7px,env(safe-area-inset-right));bottom:max(6px,env(safe-area-inset-bottom))}
  .touchGroup{gap:4px;padding:4px}
  .touchGroup button{width:52px;min-width:52px;height:55px;border-radius:15px}
  .touchGroup .mini{width:47px;min-width:47px}
  .controlIcon{font-size:17px!important}.controlLabel{font-size:7px}
}


/* v2.0.7v — Great Tahoe Rebuild */
.zoneBanner{
  position:absolute;z-index:18;left:50%;top:118px;
  transform:translate(-50%,-14px);
  min-width:min(360px,76vw);padding:12px 22px;
  border-radius:18px;text-align:center;pointer-events:none;
  background:linear-gradient(135deg,rgba(8,33,48,.94),rgba(27,62,67,.9));
  border:1px solid rgba(185,255,226,.55);
  box-shadow:0 18px 50px rgba(0,0,0,.35);
  opacity:0;transition:opacity .3s,transform .3s
}
.zoneBanner.show{opacity:1;transform:translate(-50%,0)}
.zoneBanner small{display:block;font-weight:900;letter-spacing:.16em;color:#8ff1d4;font-size:.62rem}
.zoneBanner strong{display:block;margin-top:3px;font-size:1.05rem}
.companionHint{
  position:absolute;z-index:17;left:18px;bottom:150px;
  max-width:245px;padding:10px 13px;border-radius:14px;
  background:rgba(23,20,45,.88);border:1px solid rgba(255,225,126,.55);
  box-shadow:0 12px 30px rgba(0,0,0,.3);font-size:.75rem;
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .22s,transform .22s
}
.companionHint.show{opacity:1;transform:translateY(0)}
.companionHint b{color:#ffe176}
@media(max-width:760px){
  .zoneBanner{top:94px;padding:9px 14px}
  .companionHint{left:10px;bottom:132px;max-width:205px;font-size:.68rem}
}


/* v2.1.0 — Adventure 2 Complete */
.tahoeEnter{display:inline-flex!important;align-items:center;justify-content:center;text-decoration:none;margin-top:14px}
.finaleBanner{
  position:absolute;z-index:23;left:50%;top:95px;transform:translate(-50%,-16px);
  min-width:min(480px,82vw);padding:15px 22px;border-radius:20px;text-align:center;
  background:linear-gradient(135deg,rgba(20,52,48,.95),rgba(25,28,70,.94));
  border:1px solid rgba(127,255,207,.7);box-shadow:0 18px 55px rgba(0,0,0,.42);
  opacity:0;transition:opacity .3s,transform .3s;pointer-events:none
}
.finaleBanner:not(.hidden){opacity:1;transform:translate(-50%,0)}
.finaleBanner small{display:block;color:#7fffcf;font-weight:1000;letter-spacing:.17em;font-size:.62rem}
.finaleBanner strong{display:block;margin:4px 0;font-size:1.08rem}
.finaleBanner span{font-size:.78rem;color:#dcefff}
.trailheadCard button,.trailheadCard a{display:block;width:100%;box-sizing:border-box;margin-top:9px}
@media(max-width:760px){.finaleBanner{top:82px;padding:11px 15px}}

/* v2.2 — Superman Combat */
#comboHud{position:absolute;z-index:22;left:50%;top:132px;transform:translate(-50%,-12px) scale(.9);font:1000 clamp(1.15rem,3vw,2rem)/1 system-ui;color:#fff;text-shadow:0 3px 0 #7b246a,0 0 18px #ff5ab7;opacity:0;pointer-events:none;transition:.18s}
#comboHud.show{opacity:1;transform:translate(-50%,0) scale(1)}
#powerCharge{position:absolute;z-index:15;left:50%;bottom:28px;transform:translateX(-50%);width:min(360px,42vw);height:18px;border-radius:999px;background:rgba(5,20,36,.78);border:2px solid rgba(255,255,255,.72);overflow:hidden;box-shadow:0 8px 25px rgba(0,0,0,.3);pointer-events:none}
#powerChargeFill{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#55e8d0,#60cfff,#a776ff,#ff59b9,#ffe56a);box-shadow:0 0 18px #ff59b9;transition:width .05s linear}
#powerCharge b{position:absolute;inset:0;display:grid;place-items:center;font:1000 9px/1 system-ui;letter-spacing:.14em;color:#fff;text-shadow:0 1px 3px #10243a}
#powerBtn.charging{animation:supermanCharge .5s ease-in-out infinite alternate;filter:brightness(1.2)}
@keyframes supermanCharge{to{transform:translateY(-3px) scale(1.06);box-shadow:0 0 0 5px rgba(255,255,255,.18),0 0 32px #ff59b9}}
@media(max-width:760px){#comboHud{top:105px}#powerCharge{bottom:78px;width:42vw;height:15px}#powerCharge b{font-size:7px}}
/* v2.4 Pine Beetle Queen boss HUD */
.bossHud{position:fixed;left:50%;top:88px;transform:translateX(-50%);z-index:22;width:min(560px,72vw);padding:10px 16px;border-radius:18px;background:rgba(18,8,25,.88);border:2px solid rgba(255,91,145,.8);box-shadow:0 0 28px rgba(255,64,132,.35);text-align:center;color:#fff;backdrop-filter:blur(8px)}
.bossHud small{display:block;font-weight:1000;letter-spacing:.16em;color:#ffd65d;margin-bottom:7px}
.bossHud>div{height:16px;background:rgba(255,255,255,.13);border-radius:999px;overflow:hidden;border:1px solid rgba(255,255,255,.25)}
.bossHud span{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff4d73,#ff9d45,#ffe35f);transition:width .18s ease}
.bossHud b{display:block;margin-top:6px;font-size:12px;letter-spacing:.14em;color:#ffc7de}

/* v2.4.3 Level 1 parity pass */
#powerCharge{height:22px;bottom:25px}
#powerCharge b{font-size:8px;letter-spacing:.08em;padding:0 8px;white-space:nowrap}
#bossHud{border-color:#ff6d94!important;box-shadow:0 0 30px rgba(255,70,120,.36),0 16px 45px rgba(0,0,0,.45)!important}
#bossHud small{color:#ffd55f!important}
@media(hover:hover) and (pointer:fine){#touchControls{display:flex!important;opacity:.72!important}}