*{box-sizing:border-box}
:root{--pink:#ff4fb8;--orange:#ff9a3c;--yellow:#ffe66d;--teal:#3ce7d2;--purple:#8d5cff;--ink:#fff}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0d0924;color:var(--ink);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)}
#app,.screen{position:absolute;inset:0}
.screen{display:none;align-items:center;justify-content:center}
.screen.active{display:flex}
#titleScreen,#helpScreen,#completeScreen,#portalScreen{
  background:
  radial-gradient(circle at 18% 20%,rgba(255,79,184,.32),transparent 30%),
  radial-gradient(circle at 80% 18%,rgba(60,231,210,.24),transparent 32%),
  linear-gradient(180deg,#22165f,#120b35 62%,#09071a);
  overflow:auto;padding:20px
}
.card{width:min(760px,94vw);max-height:94vh;overflow:auto;text-align:center;background:rgba(20,13,52,.94);border:3px solid rgba(255,255,255,.72);border-radius:28px;padding:28px;box-shadow:0 22px 75px rgba(0,0,0,.5)}
.card.compact{width:min(560px,94vw)}
.eyebrow{font-weight:900;letter-spacing:.18em;color:var(--teal);font-size:.78rem}
h1{font-size:clamp(2.8rem,8vw,5.5rem);line-height:.9;margin:.2em 0;background:linear-gradient(90deg,var(--pink),var(--orange),var(--yellow),var(--teal),var(--purple));-webkit-background-clip:text;color:transparent}
h2{margin:.8em 0}
p{line-height:1.48}
small{display:block;opacity:.7;margin-top:10px}
button{border:0;border-radius:999px;color:#fff;font-weight:900;font-size:1rem;padding:14px 22px;cursor:pointer}
.primary{display:block;width:min(420px,100%);margin:10px auto;background:linear-gradient(90deg,var(--pink),var(--orange));box-shadow:0 10px 28px rgba(255,79,184,.28)}
.secondary{display:block;width:min(420px,100%);margin:10px auto;background:#3d3269}
#gameScreen{background:#000}
#gameCanvas{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;background:#15102f}
#hud{position:absolute;z-index:5;left:10px;top:10px;display:flex;gap:8px;flex-wrap:wrap;pointer-events:none}
.chip{background:rgba(14,10,35,.82);border:2px solid rgba(255,255,255,.72);border-radius:999px;padding:7px 12px;font-weight:900;backdrop-filter:blur(6px)}
#pauseBtn{position:absolute;right:10px;top:10px;z-index:7;width:46px;height:46px;padding:0;background:rgba(14,10,35,.82);border:2px solid rgba(255,255,255,.72)}
#message{position:absolute;z-index:8;left:50%;top:16%;transform:translateX(-50%);max-width:82%;text-align:center;background:rgba(14,10,35,.92);border:2px solid #fff;border-radius:16px;padding:10px 16px;font-weight:900;opacity:0;transition:.2s;pointer-events:none}
#message.show{opacity:1}
#touchControls{position:absolute;z-index:6;left:0;right:0;bottom:max(10px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;padding:0 14px}
.touchGroup{display:flex;gap:10px;align-items:flex-end}
.touchGroup button{width:74px;height:74px;padding:0;background:rgba(24,16,58,.8);border:3px solid rgba(255,255,255,.75);box-shadow:0 8px 22px rgba(0,0,0,.28);user-select:none;-webkit-user-select:none}
.touchGroup:first-child button{font-size:1.55rem}
.touchGroup .mini{width:64px;height:54px;font-size:.65rem;background:rgba(141,92,255,.85)}
.touchGroup .power{background:rgba(255,79,184,.85)}
.touchGroup .jump{background:rgba(60,231,210,.85)}
.stamp{display:inline-block;border:4px dashed var(--pink);border-radius:18px;padding:18px;margin:18px;transform:rotate(-3deg);color:var(--yellow)}
.portalWrap{text-align:center}
.portal{width:min(360px,70vw);aspect-ratio:1;margin:0 auto 20px;border-radius:50%;background:conic-gradient(from 0deg,var(--pink),var(--orange),var(--yellow),var(--teal),#4aa3ff,var(--purple),var(--pink));box-shadow:0 0 35px #fff,0 0 90px var(--pink);animation:spin 2.2s linear infinite}
.portal::after{content:"";display:block;width:64%;height:64%;margin:18%;border-radius:50%;background:radial-gradient(circle,#fff 0,#9be7ff 18%,#402273 45%,#09071a 70%);box-shadow:inset 0 0 45px #fff}
@keyframes spin{to{transform:rotate(360deg)}}
@media (hover:hover) and (pointer:fine){#touchControls{opacity:.35}.touchGroup button:hover{transform:translateY(-2px)}}
@media (max-width:700px){.card{padding:20px}.touchGroup button{width:64px;height:64px}}
@media (max-height:520px){.card{padding:16px}h1{font-size:2.7rem}.card p{font-size:.86rem}}


#journalBtn{position:absolute;right:64px;top:10px;z-index:7;width:46px;height:46px;padding:0;background:rgba(14,10,35,.82);border:2px solid rgba(255,255,255,.72)}
.chip.triangle{color:#ffe66d}
.dialogue{position:absolute;z-index:12;left:50%;bottom:100px;transform:translateX(-50%);width:min(820px,92vw);display:grid;grid-template-columns:84px 1fr auto;gap:14px;align-items:center;background:rgba(15,10,38,.96);border:3px solid #fff;border-radius:20px;padding:14px;box-shadow:0 15px 50px rgba(0,0,0,.5)}
.dialogue.hidden,.journal.hidden{display:none}
.portrait{width:72px;height:72px;border-radius:18px;border:3px solid #fff;background:linear-gradient(135deg,#ff4fb8,#8d5cff);position:relative}
.portrait::after{content:"";position:absolute;left:18px;top:12px;width:36px;height:45px;background:#d8a57d;border-radius:14px 14px 12px 12px;box-shadow:inset 0 8px #2b1a18}
.dialogueName{font-weight:950;color:#3ce7d2;margin-bottom:4px}
.dialogueCopy{line-height:1.35}
#dialogueNext{padding:10px 16px;background:linear-gradient(90deg,#ff4fb8,#ff9a3c)}
.journal{position:absolute;z-index:15;inset:5% 6%;background:#efe0b9;color:#2d2545;border:10px solid #6d3f2d;border-radius:18px;box-shadow:0 25px 80px rgba(0,0,0,.7);padding:18px;overflow:auto;background-image:linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,.28)),repeating-linear-gradient(0deg,transparent 0 30px,rgba(88,75,120,.12) 31px 32px)}
.journalTop{display:flex;justify-content:space-between;align-items:center}
.journalTop h2{margin:0;font-family:Georgia,serif;font-size:2rem}
#journalClose{width:44px;height:44px;padding:0;background:#4d3b63}
.journalTabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.journalTabs button{background:#7d6b96;padding:9px 14px}
.journalTabs button.active{background:#ff4fb8}
.journalPage{background:rgba(255,255,255,.55);border:2px dashed #6d557c;border-radius:14px;padding:18px;min-height:260px}
.route{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;text-align:center}
.route div{padding:14px 6px;border-radius:12px;background:#fff;box-shadow:0 5px 0 rgba(67,52,86,.16)}
.cardGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.journalCard{aspect-ratio:1.3;border-radius:12px;background:linear-gradient(135deg,#fff,#ead9ff);display:flex;align-items:center;justify-content:center;font-weight:900;border:2px solid #7d6b96}
.journalCard.found{background:linear-gradient(135deg,#ff4fb8,#ffe66d,#3ce7d2)}
.bioGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.bio{background:#fff;border-radius:12px;padding:14px;text-align:center}
.passportPage{text-align:center}
.miniStamp{display:inline-block;border:4px dashed #ff4fb8;border-radius:50%;padding:34px 20px;transform:rotate(-5deg);font-weight:950;color:#8d2a6a}
.portalDudes{display:flex;justify-content:center;gap:8px;margin-top:-58px;margin-bottom:22px;position:relative;z-index:3}
.portalDudes span{display:flex;align-items:center;justify-content:center;width:46px;height:58px;border-radius:18px 18px 10px 10px;background:#ff4fb8;border:3px solid #fff;font-weight:950}
.portalDudes span:nth-child(2){background:#8d5cff}.portalDudes span:nth-child(3){background:#ff9a3c}.portalDudes .rigsby{background:#fff;font-size:1.5rem}
@media(max-width:760px){
  .dialogue{grid-template-columns:60px 1fr;bottom:88px}.portrait{width:56px;height:56px}.portrait::after{left:12px;top:9px;width:30px;height:36px}#dialogueNext{grid-column:1/-1;width:100%}
  .route{grid-template-columns:repeat(2,1fr)}.bioGrid{grid-template-columns:1fr}.journal{inset:3%}.cardGrid{grid-template-columns:repeat(2,1fr)}
}

.hidden{display:none!important}
.continue{background:linear-gradient(90deg,#3ce7d2,#8d5cff)}
.saveStatus{font-size:.85rem;opacity:.75;margin:8px 0 14px}
.saveToast{position:absolute;z-index:18;right:18px;top:72px;background:#173f38;border:2px solid #3ce7d2;border-radius:999px;padding:9px 14px;font-weight:950;opacity:0;transform:translateY(-8px);transition:.22s;pointer-events:none}
.saveToast.show{opacity:1;transform:translateY(0)}
.bossPhase{position:absolute;z-index:10;left:50%;top:100px;transform:translateX(-50%);padding:12px 22px;border:3px solid #fff;border-radius:16px;background:rgba(92,73,53,.94);font-size:1.2rem;font-weight:1000;text-align:center}
.cutscene{position:absolute;z-index:30;inset:0;display:flex;align-items:center;justify-content:center;background:
radial-gradient(circle at center,rgba(255,79,184,.34),transparent 42%),
rgba(8,5,24,.9);padding:20px}
.cutscenePanel{width:min(700px,94vw);text-align:center;border:3px solid #fff;border-radius:26px;padding:28px;background:rgba(18,11,50,.97);box-shadow:0 20px 80px #000}
.cutscenePanel h2{font-size:clamp(2rem,6vw,4rem);margin:.25em 0;background:linear-gradient(90deg,#ff4fb8,#ffe66d,#3ce7d2);-webkit-background-clip:text;color:transparent}
.cutscenePanel p{font-size:1.08rem}
.cutsceneEyebrow{letter-spacing:.22em;color:#3ce7d2;font-weight:950;font-size:.75rem}
.journalActions{display:flex;gap:8px}
#saveBtn{height:44px;padding:0 16px;background:#287963}
.npcLabel{font-weight:950}

.routeProgress{position:absolute;left:50%;top:58px;transform:translateX(-50%);width:min(420px,52vw);height:26px;border:2px solid rgba(255,255,255,.78);border-radius:999px;background:rgba(10,7,30,.75);overflow:hidden;text-align:center}
.routeProgress span{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#ff4fb8,#ffe66d,#3ce7d2);transition:width .2s}
.routeProgress b{position:relative;z-index:2;font-size:.7rem;line-height:22px;letter-spacing:.14em;text-shadow:0 1px 3px #000}
.memoryGrid,.secretGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.memory,.secret{min-height:110px;border:2px dashed #7d6b96;border-radius:14px;background:rgba(255,255,255,.65);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px;font-weight:900}
.memory.unlocked,.secret.unlocked{background:linear-gradient(135deg,#fff,#ffd6f0,#d8fff8);border-style:solid}
.memory .icon,.secret .icon{font-size:2rem}
.victoryRank{width:90px;height:90px;margin:10px auto;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:3.3rem;font-weight:1000;background:linear-gradient(135deg,#ff4fb8,#ffe66d,#3ce7d2);color:#17102f;border:5px solid #fff;box-shadow:0 0 35px rgba(255,230,109,.55)}
.selfieFlash{animation:selfieFlash .55s ease both}
@keyframes selfieFlash{0%{filter:brightness(1)}35%{filter:brightness(3)}100%{filter:brightness(1)}}
@media(max-width:760px){.routeProgress{top:62px;width:58vw}.memoryGrid,.secretGrid{grid-template-columns:1fr 1fr}}

.objectiveCard{position:absolute;z-index:8;left:16px;top:94px;width:min(285px,42vw);padding:12px 14px;border:2px solid rgba(255,255,255,.75);border-radius:15px;background:rgba(15,10,38,.88);box-shadow:0 8px 28px rgba(0,0,0,.3);pointer-events:none}
.objectiveCard small{display:block;color:#3ce7d2;font-weight:950;letter-spacing:.14em;font-size:.62rem}
.objectiveCard strong{display:block;margin:4px 0 2px;font-size:.95rem}
.objectiveCard span{display:block;font-size:.75rem;opacity:.82;line-height:1.3}
.objectiveGrid{display:grid;gap:10px}
.objectiveRow{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:12px;border-radius:12px;background:#fff}
.objectiveRow.done{background:linear-gradient(90deg,#d8fff8,#fff3c2)}
.objectiveRow b:last-child{color:#287963}
.zoneComplete{animation:zoneComplete .7s ease both}
@keyframes zoneComplete{0%{filter:saturate(.2)}45%{filter:saturate(2.4) brightness(1.6)}100%{filter:none}}
@media(max-width:760px){.objectiveCard{top:95px;left:8px;width:210px;padding:8px 10px}.objectiveCard span{display:none}.objectiveCard strong{font-size:.78rem}}

.dialogueBox{display:grid!important;grid-template-columns:92px 1fr;gap:14px;align-items:center}
.dialogueBox.hidden{display:none!important}
.dialoguePortrait{width:88px;height:88px;object-fit:cover;border-radius:18px;border:3px solid #fff;box-shadow:0 6px 18px rgba(0,0,0,.28);background:#17102f}
#dialogueName,#dialogueText{grid-column:2}
#dialogueName{align-self:end}
#dialogueText{align-self:start}
canvas{filter:saturate(1.08) contrast(1.02)}
.releaseBadge{display:inline-block;margin:8px auto 14px;padding:7px 12px;border:1px solid rgba(255,255,255,.55);border-radius:999px;background:rgba(60,231,210,.14);color:#fff;font-size:.75rem;font-weight:900;letter-spacing:.08em}
#dialoguePortrait.portrait{display:block;object-fit:cover;background:#17102f;position:relative}
#dialoguePortrait.portrait::after{content:none}

/* v1.0.2V Phase 1 — HD Character Presentation */
canvas{image-rendering:auto!important;filter:saturate(1.12) contrast(1.035) brightness(1.01)}
.releaseBadge{background:linear-gradient(135deg,rgba(255,79,184,.22),rgba(60,231,210,.2));border-color:rgba(255,255,255,.28);box-shadow:0 10px 35px rgba(255,79,184,.18)}
.dialogue .portrait{image-rendering:auto;box-shadow:0 12px 35px rgba(0,0,0,.35),0 0 0 3px rgba(255,255,255,.13)}

/* Phase 2 — HD Southern California environments */
canvas{filter:saturate(1.16) contrast(1.04) brightness(1.015)}
.gameShell{box-shadow:0 35px 90px rgba(20,8,45,.34),0 0 0 1px rgba(255,255,255,.08)}

/* Phase 3 — Lighting & Effects */
canvas{
  filter:saturate(1.2) contrast(1.055) brightness(1.02);
  transition:filter .25s ease;
}
.gameShell{
  position:relative;
  overflow:hidden;
  box-shadow:
    0 40px 100px rgba(18,7,42,.42),
    0 0 70px rgba(255,79,184,.10),
    inset 0 0 0 1px rgba(255,255,255,.08);
}
.gameShell::after{
  content:"";
  pointer-events:none;
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg,rgba(255,255,255,.045),transparent 28%),
    radial-gradient(circle at 50% -10%,rgba(255,255,255,.08),transparent 42%);
  mix-blend-mode:screen;
}
.releaseBadge{
  box-shadow:
    0 10px 35px rgba(255,79,184,.2),
    0 0 24px rgba(60,231,210,.1);
}

/* Phase 4 — Premium UI Overhaul */
:root{
  --ui-bg:rgba(18,14,34,.88);
  --ui-border:rgba(255,255,255,.14);
  --ui-text:#fffafc;
  --ui-muted:#cabfd5;
  --pink:#ff4fb8;
  --teal:#3ce7d2;
  --gold:#ffe05d;
  --purple:#a45cff;
}
body{
  background:
    radial-gradient(circle at 20% 10%,rgba(255,79,184,.12),transparent 30%),
    radial-gradient(circle at 80% 0%,rgba(60,231,210,.10),transparent 30%),
    linear-gradient(160deg,#11091e,#1a1230 55%,#0d1322);
}
.gameShell{
  border-radius:28px;
  border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(18px);
}
.uiAmbientSheen{
  position:absolute;
  inset:-30%;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.055) 50%,transparent 58%);
  transform:translateX(-45%);
  animation:uiSheen 8s ease-in-out infinite;
  z-index:1;
}
@keyframes uiSheen{
  0%,55%{transform:translateX(-48%)}
  75%,100%{transform:translateX(48%)}
}
.hud,.topHud,.statusBar,.objective,.objectiveCard,.dialogue,.journal,.menu,.panel{
  backdrop-filter:blur(16px) saturate(1.15);
}
.hud,.topHud,.statusBar{
  background:linear-gradient(180deg,rgba(22,16,40,.92),rgba(13,10,25,.82));
  border:1px solid var(--ui-border);
  border-radius:20px;
  box-shadow:
    0 18px 50px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.objective,.objectiveCard{
  background:linear-gradient(145deg,rgba(20,16,38,.94),rgba(12,22,34,.88));
  border:1px solid rgba(60,231,210,.28);
  border-radius:18px;
  box-shadow:0 14px 34px rgba(0,0,0,.25),0 0 24px rgba(60,231,210,.08);
  animation:objectiveIn .45s cubic-bezier(.2,.8,.2,1);
}
@keyframes objectiveIn{
  from{opacity:0;transform:translateY(-10px) scale(.98)}
  to{opacity:1;transform:none}
}
.dialogue{
  background:linear-gradient(155deg,rgba(22,16,40,.96),rgba(11,12,25,.94));
  border:1px solid rgba(255,224,93,.3);
  border-radius:24px;
  box-shadow:
    0 28px 65px rgba(0,0,0,.38),
    0 0 30px rgba(255,224,93,.07);
  padding:24px;
}
.dialogue .name,.speakerName{
  color:var(--gold);
  letter-spacing:.04em;
  text-transform:uppercase;
  font-weight:800;
}
.dialogue .text,.dialogueText{
  color:var(--ui-text);
  line-height:1.55;
  font-size:1.06rem;
}
.dialogue .portrait{
  border-radius:20px;
  border:2px solid rgba(255,255,255,.16);
  background:radial-gradient(circle at 50% 25%,rgba(255,255,255,.12),transparent 55%),rgba(255,255,255,.03);
  transform:translateZ(0);
}
.releaseBadge{
  border-radius:999px;
  padding:.55rem 1rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:
    linear-gradient(135deg,rgba(255,79,184,.28),rgba(164,92,255,.25) 50%,rgba(60,231,210,.24));
  border:1px solid rgba(255,255,255,.18);
}
button,.button,.menu button{
  border-radius:14px;
  border:1px solid rgba(255,255,255,.13);
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  color:var(--ui-text);
  box-shadow:0 8px 20px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease;
}
button:hover,.button:hover,.menu button:hover{
  transform:translateY(-2px);
  border-color:rgba(255,79,184,.38);
  background:linear-gradient(180deg,rgba(255,79,184,.16),rgba(60,231,210,.08));
  box-shadow:0 12px 28px rgba(0,0,0,.28),0 0 22px rgba(255,79,184,.08);
}
button:active,.button:active{transform:translateY(0) scale(.985)}
.healthBar,.meter,.progressBar{
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.28);
}
.healthBar > *, .meter > *, .progressBar > *{
  border-radius:inherit;
  background:linear-gradient(90deg,var(--pink),var(--gold));
  box-shadow:0 0 18px rgba(255,79,184,.28);
  transition:width .32s ease;
}
.journal{
  background:
    radial-gradient(circle at 15% 10%,rgba(255,79,184,.10),transparent 28%),
    radial-gradient(circle at 90% 15%,rgba(60,231,210,.08),transparent 28%),
    linear-gradient(160deg,rgba(24,17,42,.97),rgba(12,11,25,.97));
  border:1px solid rgba(164,92,255,.3);
  border-radius:28px;
  box-shadow:0 40px 90px rgba(0,0,0,.45),0 0 45px rgba(164,92,255,.09);
}
.journal h1,.journal h2,.journal h3{
  color:#fff;
  text-shadow:0 2px 14px rgba(164,92,255,.18);
}
.journal .tab,.journalTab{
  border-radius:14px;
  color:var(--ui-muted);
}
.journal .tab.active,.journalTab.active{
  color:#fff;
  background:linear-gradient(135deg,rgba(255,79,184,.22),rgba(164,92,255,.2));
  box-shadow:0 0 20px rgba(255,79,184,.08);
}
.toast,.notification{
  background:rgba(19,14,34,.94);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  box-shadow:0 18px 45px rgba(0,0,0,.35);
  animation:toastIn .4s cubic-bezier(.2,.8,.2,1);
}
@keyframes toastIn{
  from{opacity:0;transform:translateY(12px) scale(.97)}
  to{opacity:1;transform:none}
}
canvas{border-radius:22px}

/* v1.0.3V — Responsive UX Rebuild */
html,body{
  width:100%;
  min-height:100%;
  margin:0;
  overflow-x:hidden;
}
body{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  box-sizing:border-box;
}
.gameShell{
  width:min(1440px,calc(100vw - 24px));
  height:auto;
  aspect-ratio:16/9;
  max-height:calc(100vh - 24px);
  margin:auto;
  border-radius:24px;
  overflow:hidden;
  position:relative;
}
canvas{
  display:block;
  width:100%!important;
  height:100%!important;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:20px;
}
.hud,.topHud,.statusBar{
  max-width:calc(100% - 24px);
}
.objective,.objectiveCard{
  max-width:min(320px,calc(100vw - 48px));
}
.dialogue{
  left:18px!important;
  right:18px!important;
  width:auto!important;
  max-width:none!important;
}
.mobileControls,
.touchControls{
  opacity:.78;
}
@media (max-width:900px){
  body{padding:0}
  .gameShell{
    width:100vw;
    max-height:none;
    border-radius:0;
  }
  canvas{border-radius:0}
  .releaseBadge{font-size:.72rem}
  .objective,.objectiveCard{
    transform:scale(.9);
    transform-origin:top left;
  }
}
@media (min-width:1200px){
  .mobileControls,.touchControls{
    opacity:.38;
  }
}

/* v1.0.4V — REMASTERED */
:root{
  --remaster-pink:#ff4fb8;
  --remaster-teal:#3ce7d2;
  --remaster-gold:#ffe05d;
  --remaster-purple:#8e5cff;
}
body{
  background:
    radial-gradient(circle at 50% -20%,rgba(255,79,184,.18),transparent 36%),
    radial-gradient(circle at 12% 80%,rgba(60,231,210,.12),transparent 34%),
    linear-gradient(160deg,#0b0714,#15102a 58%,#08121d);
}
.gameShell{
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    0 50px 140px rgba(3,0,14,.58),
    0 0 80px rgba(255,79,184,.10),
    0 0 110px rgba(60,231,210,.07),
    inset 0 0 0 1px rgba(255,255,255,.045);
}
.gameShell::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:12;
  border-radius:inherit;
  box-shadow:inset 0 0 110px rgba(4,2,14,.32);
}
.bootSequence{
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#090513;
  transition:opacity .7s ease,visibility .7s ease;
}
.bootSequence.isHidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.bootBackdrop{
  position:absolute;
  inset:-8%;
  background:
    radial-gradient(circle at 25% 30%,rgba(255,79,184,.26),transparent 24%),
    radial-gradient(circle at 75% 35%,rgba(60,231,210,.20),transparent 24%),
    radial-gradient(circle at 55% 90%,rgba(255,224,93,.16),transparent 28%),
    linear-gradient(145deg,#13071d,#0b1024 60%,#07121b);
  animation:bootDrift 10s ease-in-out infinite alternate;
}
@keyframes bootDrift{
  from{transform:scale(1.02) translate3d(-1%,0,0)}
  to{transform:scale(1.08) translate3d(1%,-1%,0)}
}
.bootBackdrop::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg,transparent 35%,rgba(255,255,255,.05) 49%,transparent 61%);
  transform:translateX(-50%);
  animation:bootSweep 5.5s ease-in-out infinite;
}
@keyframes bootSweep{
  0%,35%{transform:translateX(-65%)}
  70%,100%{transform:translateX(65%)}
}
.bootLogoWrap{
  position:relative;
  z-index:2;
  width:min(680px,88vw);
  text-align:center;
  padding:44px 34px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:34px;
  background:linear-gradient(160deg,rgba(27,17,48,.72),rgba(8,13,27,.58));
  backdrop-filter:blur(24px) saturate(1.3);
  box-shadow:0 35px 100px rgba(0,0,0,.45),0 0 80px rgba(255,79,184,.08);
}
.bootEyebrow{
  color:rgba(255,255,255,.64);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.24em;
  margin-bottom:18px;
}
.bootLogo{
  margin:0;
  line-height:.82;
  text-transform:uppercase;
  filter:drop-shadow(0 18px 35px rgba(0,0,0,.32));
}
.bootLogo span{
  display:block;
  font-size:clamp(3.4rem,9vw,7.4rem);
  font-weight:950;
  letter-spacing:-.08em;
  color:#fff;
}
.bootLogo strong{
  display:block;
  font-size:clamp(2.4rem,6vw,5rem);
  letter-spacing:.08em;
  background:linear-gradient(90deg,var(--remaster-pink),var(--remaster-gold),var(--remaster-teal),var(--remaster-purple));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
}
.bootTagline{
  margin-top:18px;
  color:#efe7f6;
  letter-spacing:.08em;
  font-weight:700;
}
.bootProgress{
  width:min(420px,82%);
  height:10px;
  margin:28px auto 12px;
  padding:2px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.055);
  overflow:hidden;
}
.bootProgressFill{
  height:100%;
  width:0%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--remaster-pink),var(--remaster-gold),var(--remaster-teal));
  box-shadow:0 0 24px rgba(255,79,184,.35);
  transition:width .28s ease;
}
.bootStatus{
  color:rgba(255,255,255,.62);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.14em;
}
.enterQuest{
  display:none;
  margin:28px auto 0;
  min-width:240px;
  padding:15px 24px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(135deg,var(--remaster-pink),var(--remaster-purple));
  color:#fff;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
  box-shadow:0 18px 40px rgba(255,79,184,.22);
}
.enterQuest.isReady{
  display:block;
  animation:enterPulse 1.6s ease-in-out infinite;
}
@keyframes enterPulse{
  0%,100%{transform:translateY(0);box-shadow:0 18px 40px rgba(255,79,184,.22)}
  50%{transform:translateY(-3px);box-shadow:0 22px 55px rgba(255,79,184,.35)}
}
.bootParticles{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.bootParticle{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#fff;
  opacity:.35;
  animation:bootFloat linear infinite;
}
@keyframes bootFloat{
  from{transform:translateY(110vh) scale(.7)}
  to{transform:translateY(-12vh) scale(1.2)}
}
.sceneCurtain{
  position:fixed;
  inset:0;
  z-index:9000;
  display:grid;
  place-items:center;
  background:rgba(6,4,14,.96);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease,visibility .28s ease;
}
.sceneCurtain.isActive{
  opacity:1;
  visibility:visible;
}
.sceneCurtainGlow{
  position:absolute;
  width:52vmin;
  height:52vmin;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,79,184,.22),rgba(60,231,210,.10) 40%,transparent 72%);
  filter:blur(16px);
  animation:curtainPulse 1.2s ease-in-out infinite alternate;
}
@keyframes curtainPulse{
  from{transform:scale(.88);opacity:.7}
  to{transform:scale(1.08);opacity:1}
}
.sceneCurtainTitle{
  position:relative;
  color:#fff;
  font-size:clamp(2rem,6vw,5rem);
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-shadow:0 15px 50px rgba(0,0,0,.5);
}
.achievementStack{
  position:fixed;
  right:20px;
  top:20px;
  z-index:9200;
  display:flex;
  flex-direction:column;
  gap:12px;
  pointer-events:none;
}
.achievementCard{
  width:min(390px,calc(100vw - 40px));
  display:grid;
  grid-template-columns:52px 1fr;
  gap:14px;
  align-items:center;
  padding:15px 17px;
  border-radius:18px;
  background:linear-gradient(145deg,rgba(23,16,42,.96),rgba(10,15,28,.94));
  border:1px solid rgba(255,224,93,.27);
  box-shadow:0 20px 48px rgba(0,0,0,.38),0 0 26px rgba(255,224,93,.07);
  transform:translateX(120%);
  opacity:0;
  animation:achievementIn 4.6s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes achievementIn{
  0%{transform:translateX(120%);opacity:0}
  10%,82%{transform:translateX(0);opacity:1}
  100%{transform:translateX(20%);opacity:0}
}
.achievementIcon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:linear-gradient(135deg,var(--remaster-gold),#ff9c4d);
  color:#1a1025;
  font-size:1.45rem;
  box-shadow:0 10px 24px rgba(255,224,93,.16);
}
.achievementLabel{
  color:var(--remaster-gold);
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.14em;
}
.achievementTitle{
  color:#fff;
  font-weight:900;
  margin-top:3px;
}
.collectibleToast{
  position:fixed;
  left:50%;
  bottom:28px;
  z-index:9200;
  transform:translate(-50%,30px);
  opacity:0;
  pointer-events:none;
  min-width:min(440px,calc(100vw - 40px));
  padding:15px 20px;
  border-radius:999px;
  text-align:center;
  color:#fff;
  font-weight:850;
  letter-spacing:.04em;
  background:linear-gradient(135deg,rgba(255,79,184,.93),rgba(142,92,255,.93));
  box-shadow:0 18px 50px rgba(255,79,184,.25);
  transition:opacity .3s ease,transform .3s ease;
}
.collectibleToast.isVisible{
  opacity:1;
  transform:translate(-50%,0);
}
.premiumDialogue{
  animation:dialogueRise .32s cubic-bezier(.2,.8,.2,1);
}
@keyframes dialogueRise{
  from{opacity:0;transform:translateY(18px) scale(.985)}
  to{opacity:1;transform:none}
}
.typeCursor::after{
  content:"";
  display:inline-block;
  width:8px;
  height:1em;
  margin-left:4px;
  vertical-align:-.12em;
  background:var(--remaster-gold);
  animation:cursorBlink .7s steps(1) infinite;
}
@keyframes cursorBlink{50%{opacity:0}}
@media (max-width:760px){
  .bootLogoWrap{padding:34px 20px;border-radius:24px}
  .achievementStack{right:10px;top:10px}
  .achievementCard{width:calc(100vw - 20px)}
}


/* v1.0.5 emergency cleanup */
.bootSequence{z-index:9999}
.gameShell::before{display:none!important}
.sceneCurtainGlow{display:none!important}
.collectibleToast,.achievementStack{pointer-events:none}

/* v1.0.7V — verified fixed-resolution runtime */
html,body,#app,.screen{
  width:100%;
  height:100%;
}
body{
  margin:0;
  overflow:hidden;
  background:#070b18;
}
#gameScreen{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 20%,rgba(255,79,184,.13),transparent 35%),
    #070b18;
}
#gameCanvas{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  display:block!important;
  max-width:100vw!important;
  max-height:100vh!important;
  object-fit:contain!important;
  background:#15102f;
  outline:none;
}
#hud,#objectiveCard,#pauseBtn,#journalBtn,#touchControls,#message,.saveToast,.bossPhase{
  z-index:30;
}
#touchControls{
  pointer-events:none;
}
#touchControls button{
  pointer-events:auto;
  touch-action:none;
}
@media (hover:hover) and (pointer:fine){
  #touchControls{opacity:.48}
  #touchControls:hover{opacity:.95}
}

/* v1.0.8V — self-contained runtime and boot failsafe */
.bootSequence.isHidden{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.enterQuest.isReady{display:block!important;cursor:pointer!important}
#titleScreen.active,#gameScreen.active,#helpScreen.active,#completeScreen.active,#portalScreen.active{display:flex}

/* v1.0.8B complete campaign polish */
#bossPhase{position:absolute;top:72px;left:50%;transform:translateX(-50%);z-index:45;padding:10px 24px;border-radius:999px;background:linear-gradient(90deg,#a99480,#e9dccb,#a99480);color:#3d3130;font-weight:950;letter-spacing:.08em;box-shadow:0 16px 42px rgba(0,0,0,.34)}
#gameCanvas{image-rendering:auto!important}
.routeProgress{min-width:270px}
.objectiveCard{backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.13);box-shadow:0 18px 45px rgba(0,0,0,.28)}
@media(max-width:760px){.routeProgress{min-width:170px}.objectiveCard{max-width:290px}}

/* v1.0.8C — Adventure 1 Director's Cut */
#bossPhase{min-width:360px;text-align:center;background:linear-gradient(90deg,#8d7b69,#f2e8da,#8d7b69);border:2px solid rgba(255,255,255,.35);box-shadow:0 18px 55px rgba(0,0,0,.42),0 0 34px rgba(255,224,93,.12)}
.sceneCurtainTitle span{display:inline-block;margin-top:14px;letter-spacing:.24em}
#powerBtn{background:linear-gradient(145deg,#ff4fb8,#8d5cff)!important;box-shadow:0 0 25px rgba(255,79,184,.26)}
#powerBtn:active{filter:brightness(1.35);box-shadow:0 0 38px rgba(255,224,93,.45)}

/* v1.0.8D — uninterrupted zone flow */
.sceneCurtain{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
#gameCanvas{
  transition:none!important;
}
#bossPhase{
  transition:opacity .28s ease,transform .28s ease;
}


/* v1.0.8F — Choose Your Starting Dude */
#titleScreen .card{
  width:min(850px,calc(100vw - 28px));
  max-width:850px;
}

.startingDudePicker{
  margin:20px 0 16px;
  padding:16px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 50% 0,rgba(255,255,255,.07),transparent 50%),
    rgba(8,8,25,.32);
}

.chooseDudeHeader{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px;
  text-align:left;
}

.chooseDudeHeader small{
  color:#3ce7d2;
  font-weight:900;
  letter-spacing:.13em;
}

.chooseDudeHeader strong{
  color:#fff;
  font-size:.95rem;
}

.dudeSelectGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.dudeSelectCard{
  position:relative;
  min-width:0;
  display:grid;
  grid-template-columns:62px minmax(0,1fr);
  gap:12px;
  align-items:center;
  min-height:102px;
  padding:12px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:18px;
  color:#fff;
  text-align:left;
  background:linear-gradient(150deg,rgba(30,23,51,.94),rgba(13,16,32,.9));
  box-shadow:0 14px 28px rgba(0,0,0,.2);
  cursor:pointer;
  overflow:hidden;
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.dudeSelectCard::before{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:4px;
  opacity:.55;
}

.dudeSelectCard.will::before{background:linear-gradient(90deg,#ff4fb8,#ffe66d)}
.dudeSelectCard.daniel::before{background:linear-gradient(90deg,#8d5cff,#3ce7d2)}
.dudeSelectCard.caleb::before{background:linear-gradient(90deg,#ff9a3c,#fff)}

.dudeSelectCard:hover,
.dudeSelectCard:focus-visible{
  transform:translateY(-3px);
  filter:brightness(1.1);
  outline:none;
}

.dudeSelectCard.selected{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.64);
  box-shadow:
    0 18px 38px rgba(0,0,0,.3),
    0 0 30px rgba(255,79,184,.12),
    inset 0 0 0 2px rgba(255,255,255,.08);
}

.dudeSelectCard.daniel.selected{
  box-shadow:0 18px 38px rgba(0,0,0,.3),0 0 30px rgba(60,231,210,.14),inset 0 0 0 2px rgba(255,255,255,.08);
}

.dudeSelectCard.caleb.selected{
  box-shadow:0 18px 38px rgba(0,0,0,.3),0 0 30px rgba(255,154,60,.14),inset 0 0 0 2px rgba(255,255,255,.08);
}

.dudePortraitWrap{
  width:62px;
  height:76px;
  display:grid;
  place-items:end center;
  overflow:hidden;
  border-radius:15px;
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.025));
}

.dudePortraitWrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
}

.dudeSelectCopy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.dudeSelectCopy b{
  font-size:1.08rem;
}

.dudeSelectCopy small{
  color:#ffe66d;
  font-size:.66rem;
  font-weight:950;
  letter-spacing:.08em;
}

.dudeSelectCopy em{
  color:rgba(255,255,255,.68);
  font-size:.72rem;
  font-style:normal;
  line-height:1.25;
}

.selectedCheck{
  position:absolute;
  right:9px;
  top:8px;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#101126;
  background:#3ce7d2;
  font-size:.75rem;
  font-weight:950;
  opacity:0;
  transform:scale(.6);
  transition:opacity .18s ease,transform .18s ease;
}

.dudeSelectCard.selected .selectedCheck{
  opacity:1;
  transform:scale(1);
}

.selectedDudeSummary{
  margin-top:12px;
  color:rgba(255,255,255,.72);
  font-size:.82rem;
}

.selectedDudeSummary b{
  color:#fff;
}

.selectedDudeSummary span{
  margin:0 7px;
  color:#3ce7d2;
}

@media(max-width:760px){
  #titleScreen{
    overflow:auto;
    align-items:flex-start;
    padding:18px 10px;
  }

  .chooseDudeHeader{
    display:block;
  }

  .chooseDudeHeader strong{
    display:block;
    margin-top:3px;
  }

  .dudeSelectGrid{
    grid-template-columns:1fr;
  }

  .dudeSelectCard{
    min-height:86px;
    grid-template-columns:54px minmax(0,1fr);
  }

  .dudePortraitWrap{
    width:54px;
    height:62px;
  }
}


/* v1.0.8G — Living cinematic title world */
#titleScreen{
  isolation:isolate;
  justify-content:flex-end;
  padding:24px clamp(18px,4vw,64px);
  overflow:hidden;
  background:#17113d;
}
#titleWorldCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-3;
  filter:saturate(1.12) contrast(1.04);
}
.titleWorldVignette{
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(8,6,23,.05) 0%,rgba(8,6,23,.08) 48%,rgba(8,6,23,.82) 100%),
    linear-gradient(0deg,rgba(5,4,18,.5),transparent 42%);
}
.titleWorldHint{
  position:absolute;
  left:clamp(24px,5vw,78px);
  top:clamp(28px,6vh,72px);
  z-index:-1;
  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:left;
  text-shadow:0 3px 20px rgba(0,0,0,.5);
}
.titleWorldHint span{font-size:.72rem;font-weight:950;letter-spacing:.17em;color:#ffe66d}
.titleWorldHint b{font-size:clamp(1.2rem,2.3vw,2.15rem);color:#fff;letter-spacing:-.03em}
#titleScreen .titleMenuCard{
  width:min(680px,54vw);
  max-height:calc(100vh - 48px);
  overflow:auto;
  margin:0;
  padding:clamp(20px,2.6vw,34px);
  background:linear-gradient(145deg,rgba(17,12,42,.88),rgba(10,9,27,.78));
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 30px 90px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(20px) saturate(1.25);
  -webkit-backdrop-filter:blur(20px) saturate(1.25);
}
#titleScreen .titleMenuCard h1{margin-top:4px;text-shadow:0 0 28px rgba(255,79,184,.35)}
#titleScreen[data-hero="0"] .titleMenuCard{border-color:rgba(255,79,184,.34)}
#titleScreen[data-hero="1"] .titleMenuCard{border-color:rgba(60,231,210,.38)}
#titleScreen[data-hero="2"] .titleMenuCard{border-color:rgba(255,154,60,.4)}
#titleScreen .startingDudePicker{margin:15px 0 12px;padding:12px}
#titleScreen .dudeSelectCard{min-height:88px;grid-template-columns:52px minmax(0,1fr);padding:10px;gap:9px}
#titleScreen .dudePortraitWrap{width:52px;height:63px}
#titleScreen .dudeSelectCopy em{display:none}
#titleScreen .dudeSelectCopy b{font-size:1rem}
#titleScreen .dudeSelectGrid{gap:8px}
#titleScreen .primary,#titleScreen .secondary{margin-top:8px}
@media(max-width:900px){
  #titleScreen{justify-content:center;padding:16px;overflow:auto}
  #titleScreen .titleMenuCard{width:min(760px,calc(100vw - 24px));max-height:none;margin-top:110px}
  .titleWorldVignette{background:linear-gradient(0deg,rgba(8,6,23,.84),rgba(8,6,23,.12) 72%)}
  .titleWorldHint{top:26px;left:24px}
}
@media(max-width:620px){
  #titleScreen .titleMenuCard{margin-top:96px;padding:18px}
  #titleScreen .dudeSelectGrid{grid-template-columns:1fr}
  #titleScreen .dudeSelectCopy em{display:block}
  .titleWorldHint b{font-size:1.12rem}
}
@media(prefers-reduced-motion:reduce){#titleWorldCanvas{filter:saturate(1.05)}}


/* v1.0.8H — AAA Polish Update */
:root{
  --active-hero:#ff4fb8;
  --active-accent:#ffe66d;
}

#hud .chip:first-child{
  border-color:color-mix(in srgb,var(--active-hero) 58%,rgba(255,255,255,.16));
  box-shadow:
    0 8px 22px rgba(0,0,0,.24),
    0 0 20px color-mix(in srgb,var(--active-hero) 24%,transparent);
  transition:border-color .25s ease,box-shadow .25s ease;
}

#message{
  border-color:color-mix(in srgb,var(--active-hero) 42%,rgba(255,255,255,.15));
  box-shadow:
    0 18px 40px rgba(0,0,0,.3),
    0 0 30px color-mix(in srgb,var(--active-hero) 18%,transparent);
}

.routeProgress span{
  background:linear-gradient(90deg,var(--active-hero),var(--active-accent),#3ce7d2);
  box-shadow:0 0 16px color-mix(in srgb,var(--active-hero) 45%,transparent);
}

#gameCanvas{
  filter:saturate(1.08) contrast(1.025);
}

.bossPhase{
  animation:bossPulse108h 1.6s ease-in-out infinite;
}

@keyframes bossPulse108h{
  0%,100%{transform:translateX(-50%) scale(1);filter:brightness(1)}
  50%{transform:translateX(-50%) scale(1.025);filter:brightness(1.15)}
}

@media(prefers-reduced-motion:reduce){
  .bossPhase{animation:none}
}

/* v1.0.8H Superman Rebuild — gameplay-first UX */
#gameCanvas{filter:saturate(1.03) contrast(1.01)}

/* Keep the HUD compact and away from the playfield. */
#hud{gap:8px;padding:10px 12px}
#hud .chip{min-height:34px;padding:6px 10px;font-size:13px}
#objectivePanel{top:62px;left:12px;max-width:220px;padding:11px 13px}
#objectivePanel small{font-size:9px}
#objectivePanel strong{font-size:14px}
#objectivePanel span{font-size:11px;line-height:1.3}
#message{top:72px;max-width:320px;padding:8px 14px;font-size:13px}
.achievementToast{transform:scale(.86);transform-origin:top right}

/* Desktop players use keyboard; do not cover the game with giant touch buttons. */
@media (hover:hover) and (pointer:fine){
  #touchControls{display:none!important}
}

/* Touch controls stay usable but much less intrusive. */
@media (hover:none), (pointer:coarse){
  #touchControls{padding:10px;gap:8px}
  #touchControls button{width:54px;height:54px;font-size:12px;opacity:.78}
  #touchControls .mini{width:48px;height:48px;font-size:9px}
}


/* =========================================================
   v1.0.8J — Mobile Stable Rebuild
   Non-blocking Apple-inspired controls and safe notification flow
   ========================================================= */
:root{
  --safe-t:max(10px,env(safe-area-inset-top));
  --safe-r:max(10px,env(safe-area-inset-right));
  --safe-b:max(10px,env(safe-area-inset-bottom));
  --safe-l:max(10px,env(safe-area-inset-left));
}

@media (hover:none), (pointer:coarse){
  html,body{overscroll-behavior:none;touch-action:none}
  #gameScreen{background:#09071a}

  #touchControls{
    left:var(--safe-l);right:var(--safe-r);bottom:var(--safe-b);
    align-items:flex-end;gap:10px;padding:0;
    filter:drop-shadow(0 14px 26px rgba(0,0,0,.34));
  }
  .touchGroup{
    display:flex;gap:7px;padding:6px;border-radius:22px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(18,14,42,.56);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 12px 28px rgba(0,0,0,.28);
    backdrop-filter:blur(20px) saturate(1.35);
    -webkit-backdrop-filter:blur(20px) saturate(1.35);
  }
  #touchControls button,#touchControls .mini{
    width:60px;height:60px;min-width:60px;margin:0;padding:0;border-radius:18px;
    border:1px solid rgba(255,255,255,.32);
    background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.08));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 7px 17px rgba(0,0,0,.22);
    color:#fff;font-size:14px;font-weight:900;opacity:1;
    -webkit-tap-highlight-color:transparent;
  }
  #touchControls button:active{transform:scale(.92);filter:brightness(1.22)}
  #touchControls .mini{width:53px;min-width:53px;font-size:9px;background:linear-gradient(155deg,#7757e6,#5545bb)}
  #touchControls .power{background:linear-gradient(155deg,#ef49ad,#a63fca)}
  #touchControls .jump{background:linear-gradient(155deg,#40d8ca,#278fb8)}

  /* Notifications never overlap the control deck. */
  .collectibleToast{
    left:50%;bottom:calc(var(--safe-b) + 82px);top:auto;
    width:auto;min-width:0;max-width:calc(100vw - 28px);
    padding:10px 17px;border-radius:17px;white-space:nowrap;
    transform:translate(-50%,12px) scale(.96);
    border:1px solid rgba(255,255,255,.22);
    background:rgba(25,19,59,.84);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 12px 30px rgba(0,0,0,.34);
    backdrop-filter:blur(20px) saturate(1.35);
    -webkit-backdrop-filter:blur(20px) saturate(1.35);
    font-size:14px;letter-spacing:0;
  }
  .collectibleToast.isVisible{transform:translate(-50%,0) scale(1)}
  #message{
    top:auto;bottom:calc(var(--safe-b) + 84px);
    max-width:min(350px,calc(100vw - 34px));padding:9px 13px;border-radius:16px;
    background:rgba(20,15,47,.84);border:1px solid rgba(255,255,255,.2);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    font-size:12px;
  }

  .achievementStack{
    top:calc(var(--safe-t) + 52px);left:50%;right:auto;
    width:min(350px,calc(100vw - 26px));transform:translateX(-50%);gap:7px;
  }
  .achievementCard{
    width:100%;min-height:54px;padding:8px 11px;grid-template-columns:40px 1fr;gap:9px;
    border-radius:18px;background:rgba(18,14,40,.86);
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  }
  .achievementIcon{width:40px;height:40px;border-radius:12px}
  .achievementLabel{font-size:.53rem}.achievementTitle{font-size:.83rem}

  #pauseBtn,#journalBtn{
    top:var(--safe-t);width:40px;height:40px;border-radius:14px;
    background:rgba(18,14,40,.72);border:1px solid rgba(255,255,255,.2);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  }
  #pauseBtn{right:var(--safe-r)}
  #journalBtn{right:calc(var(--safe-r) + 47px)}

  #hud{
    top:var(--safe-t);left:var(--safe-l);right:calc(var(--safe-r) + 96px);
    display:grid;grid-template-columns:repeat(5,max-content);gap:5px;padding:0;align-items:center;
  }
  #hud .chip{
    min-height:34px;padding:5px 9px;border-radius:13px;font-size:11px;white-space:nowrap;
    border:1px solid rgba(255,255,255,.25);background:rgba(18,14,40,.7);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  }
  .routeProgress{grid-column:1/-1;width:100%;height:15px;margin-top:0;border-width:1px}
  .routeProgress b{font-size:8px}
  .objectiveCard{
    top:calc(var(--safe-t) + 58px);left:var(--safe-l);width:auto;max-width:min(230px,54vw);
    padding:7px 10px;border-radius:14px;background:rgba(18,14,40,.76);
    backdrop-filter:blur(17px);-webkit-backdrop-filter:blur(17px);
  }
  .objectiveCard small{font-size:7px;margin:0}.objectiveCard strong{font-size:11px;margin:2px 0 0}.objectiveCard span{display:none}
  .dialogue{bottom:calc(var(--safe-b) + 84px)}
}

@media (hover:none) and (pointer:coarse) and (orientation:landscape){
  #gameCanvas{width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important}
  #hud{max-width:calc(100vw - 122px)}
  .routeProgress{width:min(330px,42vw)}
}

@media (hover:none) and (pointer:coarse) and (orientation:portrait){
  #hud{right:var(--safe-r);grid-template-columns:repeat(5,1fr)}
  #hud .chip{min-width:0;padding:5px 4px;text-align:center;overflow:hidden}
  #pauseBtn,#journalBtn{top:calc(var(--safe-t) + 52px)}
  .objectiveCard{top:calc(var(--safe-t) + 101px);max-width:45vw}
  .achievementStack{top:calc(var(--safe-t) + 142px)}
  #touchControls{gap:7px}
  .touchGroup{gap:5px;padding:5px}
  #touchControls button,#touchControls .mini{width:54px;height:54px;min-width:54px;border-radius:16px}
  #touchControls .mini{width:48px;min-width:48px}
  .collectibleToast,#message{bottom:calc(var(--safe-b) + 75px)}
}


/* =========================================================
   v1.0.8K — Safari Game Mode
   Stops iOS Safari from zooming, selecting, or hijacking taps.
   ========================================================= */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

html,body,#app,.screen,#gameScreen,#gameCanvas{
  overscroll-behavior:none;
  -webkit-overflow-scrolling:auto;
}

#gameScreen,
#gameCanvas,
#touchControls,
#touchControls *,
#pauseBtn,
#journalBtn,
#dialogueNext,
#cutsceneNext,
#journal,
#journal *{
  touch-action:none!important;
  -ms-touch-action:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-touch-callout:none!important;
  -webkit-tap-highlight-color:transparent!important;
}

#touchControls button,
#touchControls button *,
#pauseBtn,
#pauseBtn *,
#journalBtn,
#journalBtn *{
  cursor:pointer;
  font-size:16px; /* avoids Safari's small-control zoom heuristics */
  line-height:1;
  appearance:none;
  -webkit-appearance:none;
  transform-origin:center;
}

#touchControls .mini,
#touchControls .mini *{
  font-size:10px;
}

#touchControls button.isPressed,
#switchBtn.isPressed{
  transform:scale(.91)!important;
  filter:brightness(1.24)!important;
}

body.touchDevice #gameScreen.active{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
}

body.touchDevice #gameCanvas{
  display:block;
  max-width:none;
  max-height:none;
}

/* Ensure button labels cannot become their own Safari tap target. */
#touchControls button span,
#pauseBtn span,
#journalBtn span{
  pointer-events:none;
}

/* Keep controls inside the visual viewport when Safari chrome changes size. */
@supports (height:100dvh){
  body.touchDevice #gameScreen.active{
    height:100dvh;
  }
  body.touchDevice.landscapeGame #gameCanvas{
    width:100dvw!important;
    height:100dvh!important;
  }
}

@media (hover:none), (pointer:coarse){
  body{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    overflow:hidden;
  }

  #touchControls{
    z-index:40;
    isolation:isolate;
  }

  #touchControls button{
    will-change:transform;
  }
}


/* =========================================================
   v1.0.8L — Living World Update
   ========================================================= */

#gameCanvas{
  transition:filter .6s ease;
}

.collectibleToast{
  background:
    linear-gradient(135deg,rgba(255,79,184,.84),rgba(141,92,255,.82) 56%,rgba(60,231,210,.78));
  border-color:rgba(255,255,255,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 16px 40px rgba(0,0,0,.36),
    0 0 32px rgba(255,79,184,.24);
}

.achievementCard{
  border-color:rgba(60,231,210,.32);
  background:
    linear-gradient(145deg,rgba(20,16,48,.90),rgba(31,27,70,.84));
}

.achievementIcon{
  background:
    linear-gradient(145deg,#ffe66d,#ff8f5c 48%,#ff4fb8);
}

@media (hover:none), (pointer:coarse){
  .collectibleToast{
    font-weight:950;
    letter-spacing:.015em;
  }

  .achievementCard{
    animation:achievement108l 3s cubic-bezier(.2,.8,.2,1) both;
  }
}

@keyframes achievement108l{
  0%{opacity:0;transform:translateY(-14px) scale(.96)}
  12%,82%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-10px) scale(.98)}
}

@media(prefers-reduced-motion:reduce){
  .achievementCard{animation:none}
}


/* =========================================================
   v1.0.8M — Cinematic Adventure Update
   ========================================================= */

#photoBtn{
  position:absolute;
  top:max(72px,calc(env(safe-area-inset-top) + 58px));
  right:max(14px,calc(env(safe-area-inset-right) + 14px));
  z-index:24;
  width:44px;
  height:44px;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(18,14,45,.72);
  color:#fff;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 10px 30px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.18);
}

.cinematicZoneCard{
  position:absolute;
  left:50%;
  top:16%;
  z-index:22;
  width:min(560px,72vw);
  padding:20px 28px 22px;
  transform:translate(-50%,-20px);
  text-align:center;
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
  border-radius:24px;
  background:
    radial-gradient(circle at 50% 0,rgba(255,79,184,.24),transparent 55%),
    rgba(12,9,35,.82);
  box-shadow:0 24px 65px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.18);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  pointer-events:none;
}
.cinematicZoneCard.play{animation:zoneCinemaM 2.55s cubic-bezier(.2,.8,.2,1) both}
.cinematicZoneCard small{display:block;color:#3ce7d2;font-weight:950;letter-spacing:.2em;font-size:11px}
.cinematicZoneCard strong{display:block;margin:5px 0 2px;font-size:clamp(28px,4vw,50px);font-weight:1000;letter-spacing:.02em;text-shadow:0 7px 30px rgba(255,79,184,.38)}
.cinematicZoneCard span{font-size:12px;font-weight:900;letter-spacing:.14em;color:rgba(255,255,255,.72)}
@keyframes zoneCinemaM{
  0%{opacity:0;transform:translate(-50%,-26px) scale(.94);filter:blur(6px)}
  15%,72%{opacity:1;transform:translate(-50%,0) scale(1);filter:blur(0)}
  100%{opacity:0;transform:translate(-50%,14px) scale(1.02);filter:blur(3px)}
}

.petMoment{
  position:absolute;
  z-index:25;
  left:50%;
  bottom:150px;
  width:min(410px,70vw);
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:14px;
  padding:13px 18px;
  border-radius:22px;
  color:#fff;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(20,14,45,.88);
  box-shadow:0 18px 50px rgba(0,0,0,.38),0 0 28px rgba(255,230,109,.13);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  pointer-events:none;
}
.petMoment.show{animation:petMomentM 2.55s ease both}
.petMoment>span{font-size:31px}
.petMoment b,.petMoment small{display:block}
.petMoment b{font-size:15px}
.petMoment small{margin-top:2px;color:rgba(255,255,255,.68)}
@keyframes petMomentM{
  0%{opacity:0;transform:translate(-50%,18px) scale(.96)}
  12%,82%{opacity:1;transform:translate(-50%,0) scale(1)}
  100%{opacity:0;transform:translate(-50%,-10px) scale(.98)}
}

.adventureHub{
  width:min(760px,92vw)!important;
  max-height:min(620px,88dvh);
  border-radius:28px!important;
  background:
    radial-gradient(circle at 14% 0,rgba(255,79,184,.19),transparent 35%),
    radial-gradient(circle at 90% 15%,rgba(60,231,210,.14),transparent 32%),
    rgba(15,11,38,.95)!important;
}
.hubEyebrow{color:#3ce7d2;font-weight:950;letter-spacing:.2em}
.hubPrimaryActions{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:10px;
  padding:4px 0 18px;
}
.hubPrimaryActions button{
  min-height:64px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.075);
  color:#fff;
  font-weight:900;
}
.hubPrimaryActions .hubPrimary{
  background:linear-gradient(135deg,#ff4fb8,#8d5cff);
  box-shadow:0 14px 35px rgba(255,79,184,.24);
}

.featureOverlay{
  position:absolute;
  inset:0;
  z-index:70;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(6,4,20,.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.featurePanel{
  position:relative;
  width:min(900px,94vw);
  max-height:88dvh;
  overflow:auto;
  padding:32px;
  border-radius:30px;
  color:#fff;
  border:1px solid rgba(255,255,255,.2);
  background:
    radial-gradient(circle at 20% 0,rgba(255,79,184,.18),transparent 38%),
    linear-gradient(145deg,rgba(25,18,59,.98),rgba(12,9,32,.98));
  box-shadow:0 35px 90px rgba(0,0,0,.55);
}
.featureClose{
  position:absolute;
  top:15px;
  right:15px;
  width:42px;height:42px;border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);color:#fff;font-weight:900;
}
.mapPanel>small,.passportPage>small{color:#3ce7d2;font-weight:950;letter-spacing:.18em}
.mapPanel h2,.passportPage h2{font-size:clamp(32px,5vw,58px);margin:4px 0 24px}
.worldMapRoute{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-width:700px;
  padding:34px 10px 26px;
}
.worldMapRoute i{height:4px;flex:1;background:rgba(255,255,255,.14)}
.mapStop{
  min-width:110px;
  text-align:center;
  opacity:.35;
}
.mapStop span{
  display:grid;place-items:center;
  width:68px;height:68px;margin:auto auto 10px;
  border-radius:24px;
  font-size:30px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}
.mapStop b,.mapStop small{display:block}
.mapStop b{font-size:12px}
.mapStop small{font-size:9px;color:rgba(255,255,255,.55);margin-top:3px}
.mapStop.reached{opacity:1}
.mapStop.reached span{background:linear-gradient(145deg,rgba(255,79,184,.3),rgba(60,231,210,.22))}
.mapStop.active span{box-shadow:0 0 0 5px rgba(255,230,109,.16),0 0 32px rgba(255,230,109,.42);transform:scale(1.08)}
.mapProgressCopy{text-align:center;font-weight:850;color:rgba(255,255,255,.7)}

.passportBook{
  width:min(720px,92vw);
  background:#e7d7bb!important;
  color:#322437;
  border:12px solid #3b2551;
  box-shadow:0 40px 100px rgba(0,0,0,.62),inset 0 0 0 2px rgba(255,255,255,.42);
}
.passportPage{
  padding:24px;
  border:2px dashed rgba(74,49,67,.28);
  min-height:470px;
}
.passportPage>small{color:#8d3d72}
.passportDestination{
  display:flex;align-items:center;gap:16px;
  border-top:1px solid rgba(70,45,63,.2);
  border-bottom:1px solid rgba(70,45,63,.2);
  padding:18px 0;
}
.passportDestination>span{font-size:34px;font-weight:1000;color:#8d3d72}
.passportDestination b,.passportDestination small{display:block}
.passportDestination small{font-size:10px;letter-spacing:.12em;margin-top:3px}
.passportStampM{
  width:210px;height:142px;margin:28px auto;
  display:grid;place-content:center;text-align:center;
  border:7px double #9b4d67;border-radius:50%;
  color:#9b4d67;transform:rotate(-7deg);
  opacity:.68;
}
.passportStampM strong{font-size:40px}
.passportStampM span{font-weight:1000;letter-spacing:.14em;font-size:11px}
.passportStampM.complete{color:#297c6e;border-color:#297c6e;opacity:1;animation:stampSlamM .6s cubic-bezier(.15,.9,.2,1.2)}
@keyframes stampSlamM{0%{transform:rotate(-7deg) scale(2.2);opacity:0}100%{transform:rotate(-7deg) scale(1);opacity:1}}
.passportStatsM{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.passportStatsM div{padding:14px;text-align:center;background:rgba(255,255,255,.35);border-radius:14px}
.passportStatsM b,.passportStatsM span{display:block}
.passportStatsM b{font-size:24px}
.passportStatsM span{font-size:10px;font-weight:850}

.photoMode{
  position:absolute;inset:0;z-index:80;
  pointer-events:none;
}
.photoModeTop,.photoModeBottom{
  position:absolute;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:12px;
  padding:10px 15px;border-radius:16px;
  color:#fff;background:rgba(8,6,24,.72);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  pointer-events:auto;
}
.photoModeTop{top:max(18px,env(safe-area-inset-top));}
.photoModeTop span{font-size:11px;color:rgba(255,255,255,.6)}
.photoModeBottom{bottom:max(22px,env(safe-area-inset-bottom))}
.photoModeBottom button{border:0;border-radius:12px;padding:10px 14px;font-weight:900}
.photoFrame{
  position:absolute;inset:6%;
  border:1px solid rgba(255,255,255,.42);
  border-radius:18px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);
}
.photoModeActive #hud,
.photoModeActive #pauseBtn,
.photoModeActive #journalBtn,
.photoModeActive #photoBtn,
.photoModeActive #objectiveCard,
.photoModeActive #touchControls,
.photoModeActive #message,
.photoModeActive #bossPhase{opacity:0!important;pointer-events:none!important}

#photoBtn,#photoBtn *,
.featureOverlay,.featureOverlay *,
#photoMode,#photoMode *{
  touch-action:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-touch-callout:none!important;
  -webkit-tap-highlight-color:transparent!important;
}

.portalDudes .zoey{transform:translateY(4px) scale(.9)}

@media(max-width:760px){
  #photoBtn{top:max(60px,calc(env(safe-area-inset-top) + 50px));width:39px;height:39px}
  .cinematicZoneCard{top:12%;width:68vw;padding:13px 16px}
  .cinematicZoneCard strong{font-size:25px}
  .petMoment{bottom:125px;width:62vw;padding:10px 13px}
  .hubPrimaryActions{grid-template-columns:1fr 1fr}
  .hubPrimaryActions .hubPrimary{grid-column:1/-1}
  .featurePanel{padding:24px 18px}
  .worldMapRoute{min-width:610px}
  .passportStatsM{grid-template-columns:1fr 1fr}
  .photoModeTop span{display:none}
}

@media(prefers-reduced-motion:reduce){
  .cinematicZoneCard.play,.petMoment.show,.passportStampM.complete{animation:none}
}


/* =========================================================
   v1.0.8N — Zoey Rescue UX Fix
   ========================================================= */

.releaseBadge::after{
  content:" • RESCUE ZOEY";
  color:#ffe66d;
}

.portalDudes .rigsby,
.portalDudes .zoey{
  display:inline-grid;
  place-items:center;
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.25));
}

.portalDudes .zoey{
  position:relative;
}
.portalDudes .zoey::after{
  content:"♥";
  position:absolute;
  top:-10px;
  right:-7px;
  color:#ff6b9d;
  font-size:12px;
}

@media(max-width:760px){
  .portalDudes .rigsby,
  .portalDudes .zoey{
    font-size:.88em;
  }
}


/* =========================================================
   v1.0.8O — Boss Input & Graphics Update
   ========================================================= */

#bossPhase{
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(215,198,176,.95),rgba(157,136,119,.92));
  border:1px solid rgba(255,255,255,.55);
  box-shadow:
    inset 0 1px rgba(255,255,255,.55),
    0 10px 30px rgba(0,0,0,.38),
    0 0 32px rgba(215,198,176,.14);
}

#bossPhase::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(115deg,transparent 0 18px,rgba(255,255,255,.08) 18px 20px);
  animation:bossBarSheenO 3.4s linear infinite;
  pointer-events:none;
}

@keyframes bossBarSheenO{
  from{transform:translateX(-12%)}
  to{transform:translateX(12%)}
}

#dialogueBox{
  border-color:rgba(255,230,109,.28);
  background:
    radial-gradient(circle at 12% 20%,rgba(255,79,184,.14),transparent 30%),
    linear-gradient(145deg,rgba(14,10,38,.97),rgba(8,6,25,.98));
  box-shadow:
    0 24px 70px rgba(0,0,0,.58),
    inset 0 1px rgba(255,255,255,.12),
    0 0 35px rgba(141,92,255,.12);
}

#dialogueNext:focus-visible,
#pauseBtn:focus-visible,
#journalBtn:focus-visible{
  outline:3px solid #ffe66d;
  outline-offset:3px;
}

/* Buttons should never retain a hidden Space-trigger focus state during play. */
#gameScreen:not(:has(.journal:not(.hidden))):not(:has(.dialogue:not(.hidden))) button{
  -webkit-tap-highlight-color:transparent;
}

@media(prefers-reduced-motion:reduce){
  #bossPhase::before{animation:none}
}


/* =========================================================
   v1.0.8Q — Superman Combat & Graphics
   ========================================================= */

#bossPhase{
  --boss-health:100%;
  isolation:isolate;
  background:
    linear-gradient(90deg,
      rgba(255,79,184,.94) 0 var(--boss-health),
      rgba(96,80,87,.88) var(--boss-health) 100%);
  transition:background .25s ease,transform .18s ease;
}
#bossPhase[data-phase="2"]{
  box-shadow:inset 0 1px rgba(255,255,255,.55),0 10px 30px rgba(0,0,0,.38),0 0 34px rgba(141,92,255,.28);
}
#bossPhase[data-phase="3"]{
  animation:bossDangerP .72s ease-in-out infinite alternate;
}
@keyframes bossDangerP{
  from{transform:translateX(-50%) scale(1)}
  to{transform:translateX(-50%) scale(1.025)}
}

.bossTaunt{
  position:absolute;
  z-index:29;
  top:max(118px,calc(env(safe-area-inset-top) + 105px));
  left:50%;
  width:min(520px,68vw);
  transform:translateX(-50%);
  padding:12px 18px 14px;
  text-align:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:18px;
  color:#fff;
  background:
    linear-gradient(135deg,rgba(67,48,57,.94),rgba(20,13,42,.92));
  box-shadow:0 15px 44px rgba(0,0,0,.42),0 0 30px rgba(255,79,184,.14);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  pointer-events:none;
}
.bossTaunt small{
  display:block;
  color:#ffe66d;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.18em;
}
.bossTaunt strong{
  display:block;
  margin-top:4px;
  font-size:clamp(13px,1.8vw,18px);
}
.bossTaunt.show{animation:bossTauntP 2.25s cubic-bezier(.2,.8,.2,1) both}
@keyframes bossTauntP{
  0%{opacity:0;transform:translate(-50%,-14px) scale(.96)}
  12%,80%{opacity:1;transform:translate(-50%,0) scale(1)}
  100%{opacity:0;transform:translate(-50%,-8px) scale(.985)}
}

.combatStatus{
  position:absolute;
  z-index:27;
  left:50%;
  bottom:118px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:12px;
  width:min(430px,66vw);
  padding:12px 16px;
  color:#fff;
  border:1px solid rgba(255,230,109,.25);
  border-radius:20px;
  background:rgba(15,10,38,.9);
  box-shadow:0 18px 50px rgba(0,0,0,.42),0 0 28px rgba(255,230,109,.13);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  pointer-events:none;
}
.combatStatus>span{font-size:29px}
.combatStatus b,.combatStatus small{display:block}
.combatStatus b{font-size:14px;color:#ffe66d}
.combatStatus small{margin-top:2px;color:rgba(255,255,255,.72)}
.combatStatus.show{animation:combatStatusP 2.45s ease both}
@keyframes combatStatusP{
  0%{opacity:0;transform:translate(-50%,16px) scale(.96)}
  12%,82%{opacity:1;transform:translate(-50%,0) scale(1)}
  100%{opacity:0;transform:translate(-50%,-8px) scale(.98)}
}

/* During active gameplay, keyboard focus may not create a native Space-button action. */
#gameScreen.active button:focus:not(:focus-visible){
  outline:none;
}
#gameCanvas:focus{outline:none}

@media(max-width:760px){
  .bossTaunt{top:max(93px,calc(env(safe-area-inset-top) + 78px));width:62vw;padding:9px 12px}
  .combatStatus{bottom:105px;width:58vw;padding:9px 12px}
}

@media(prefers-reduced-motion:reduce){
  #bossPhase[data-phase="3"],
  .bossTaunt.show,
  .combatStatus.show{animation:none}
}


/* v1.0.8Q cumulative polish */
#gameScreen::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:18;
  background:
    radial-gradient(circle at 50% 12%,rgba(255,230,109,.035),transparent 32%),
    linear-gradient(180deg,rgba(255,255,255,.018),transparent 40%,rgba(8,5,22,.055));
  mix-blend-mode:screen;
}
#bossPhase{
  letter-spacing:.055em;
  text-shadow:0 2px 9px rgba(0,0,0,.55);
}
.bossTaunt{
  border-color:rgba(255,230,109,.34);
  box-shadow:0 18px 55px rgba(0,0,0,.48),0 0 38px rgba(255,79,184,.19),inset 0 1px rgba(255,255,255,.12);
}
.combatStatus{
  border-color:rgba(60,231,210,.3);
  box-shadow:0 18px 55px rgba(0,0,0,.46),0 0 32px rgba(60,231,210,.15);
}
#routeProgressFill{
  box-shadow:0 0 18px rgba(60,231,210,.35),0 0 28px rgba(255,79,184,.18);
}
#objectiveCard{
  box-shadow:0 18px 50px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.09),0 0 26px rgba(141,92,255,.08);
}


/* =========================================================
   v1.0.8R — Cinematic Finale Update
   ========================================================= */
.triangleUltimateBtn{
  position:absolute;z-index:31;top:82px;left:50%;transform:translateX(-50%);
  border:1px solid rgba(255,255,255,.55);border-radius:999px;padding:12px 22px;
  font:1000 13px/1 system-ui,-apple-system,sans-serif;letter-spacing:.09em;color:#160d34;
  background:linear-gradient(90deg,#ff4fb8,#ffe66d,#3ce7d2,#8d5cff);
  box-shadow:0 0 30px rgba(255,79,184,.45),0 12px 40px rgba(0,0,0,.36);
  animation:triangleReadyR .72s ease-in-out infinite alternate;cursor:pointer;
}
@keyframes triangleReadyR{from{filter:brightness(1);transform:translateX(-50%) scale(1)}to{filter:brightness(1.22);transform:translateX(-50%) scale(1.045)}}
.finaleCard{
  position:absolute;z-index:45;left:50%;top:48%;transform:translate(-50%,-50%);
  width:min(650px,82vw);padding:23px 28px;text-align:center;color:#fff;
  border:1px solid rgba(255,255,255,.34);border-radius:28px;
  background:linear-gradient(145deg,rgba(14,9,38,.95),rgba(60,24,73,.9));
  box-shadow:0 25px 90px rgba(0,0,0,.5),0 0 55px rgba(255,79,184,.24);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);pointer-events:none;
}
.finaleCard small,.finaleCard strong,.finaleCard span{display:block}
.finaleCard small{font:900 11px system-ui;letter-spacing:.22em;color:#3ce7d2}
.finaleCard strong{margin-top:8px;font:1000 clamp(28px,5vw,56px)/1 system-ui;color:#fff;text-shadow:0 0 28px rgba(255,79,184,.5)}
.finaleCard span{margin-top:10px;font:700 clamp(14px,2vw,20px)/1.4 system-ui;color:rgba(255,255,255,.8)}
.finaleCard.show{animation:finaleCardR 2.3s cubic-bezier(.2,.8,.2,1) both}
@keyframes finaleCardR{0%{opacity:0;transform:translate(-50%,-43%) scale(.92)}13%,78%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-56%) scale(.98)}}
@media(max-width:760px){.triangleUltimateBtn{top:68px;padding:10px 15px;font-size:10px}.finaleCard{padding:18px 20px}}
@media(prefers-reduced-motion:reduce){.triangleUltimateBtn,.finaleCard.show{animation:none}}


/* =========================================================
   v1.0.8S — Superman Finale Rebuild
   ========================================================= */
.releaseBadge{
  box-shadow:0 0 24px rgba(255,79,184,.18),inset 0 1px rgba(255,255,255,.12);
}
#finaleCard{
  backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
}
#gameCanvas{
  filter:saturate(1.04) contrast(1.02);
}

/* v1.0.8T Finale UX Remaster */
#gameCanvas{filter:saturate(1.06) contrast(1.025) brightness(1.01)}
#bossPhase{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}