:root{
  --cream:#F4ECD8;
  --cream-2:#EFE4CB;
  --navy:#1B2A4A;
  --navy-soft:#2c3e63;
  --sage:#8FA37E;
  --coral:#D98B7A;
  --ink:#16213c;
  --paper-line: rgba(27,42,74,.12);
  --shadow: 0 18px 40px -16px rgba(27,42,74,.55);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Source Sans 3",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--navy);font-family:var(--sans);color:var(--navy);}
img{user-select:none;-webkit-user-drag:none;}
.hidden{display:none !important;}

#game{position:fixed;inset:0;overflow:hidden;background:var(--cream);}

/* ---------- Sky / parallax / dust ---------- */
#sky{position:absolute;inset:0;z-index:0;transition:background 1.1s ease;
  background:linear-gradient(180deg,#f7f0df 0%,#f4ecd8 55%,#ecdfc4 100%);}
#dust{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;}
.mote{position:absolute;border-radius:50%;background:rgba(27,42,74,.18);opacity:.0;animation:drift linear infinite;}
@keyframes drift{0%{transform:translateY(20px);opacity:0}10%{opacity:.5}90%{opacity:.5}100%{transform:translateY(-110vh);opacity:0}}

/* ---------- Viewport / world ---------- */
#viewport{position:absolute;inset:0;z-index:2;overflow:hidden;}
#world{position:absolute;top:0;left:0;height:100%;will-change:transform;}
.zone{position:absolute;top:0;height:100%;overflow:hidden;}
.zone-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;}
.zone-tint{position:absolute;inset:0;mix-blend-mode:multiply;opacity:0;transition:opacity .8s;}
.zone-edge{position:absolute;top:0;bottom:0;width:14%;pointer-events:none;}
.zone-edge.l{left:0;background:linear-gradient(90deg,rgba(27,42,74,.10),transparent);}
.zone-edge.r{right:0;background:linear-gradient(270deg,rgba(27,42,74,.10),transparent);}

/* zone signage (HTML text overlays, crisp) */
.zone-sign{position:absolute;top:9%;left:50%;transform:translateX(-50%);text-align:center;
  pointer-events:none;}
.zone-sign .no{font-family:var(--sans);font-weight:700;letter-spacing:.32em;font-size:12px;color:var(--coral);}
.zone-sign .nm{font-family:var(--serif);font-weight:700;font-size:clamp(26px,3.6vh,46px);line-height:1;color:var(--navy);
  text-shadow:0 2px 0 var(--cream),0 0 18px rgba(244,236,216,.8);}

/* scoreboard overlay (zone 2) */
.scoreboard{position:absolute;border:3px solid var(--navy);border-radius:10px;background:rgba(20,28,52,.92);
  color:var(--cream);padding:14px 18px;box-shadow:var(--shadow);font-family:var(--sans);min-width:240px;}
.scoreboard h4{margin:0 0 8px;font-size:11px;letter-spacing:.25em;color:var(--coral);font-weight:700;text-transform:uppercase;}
.scoreboard .row{display:flex;justify-content:space-between;gap:18px;font-size:15px;padding:3px 0;border-bottom:1px solid rgba(244,236,216,.12);}
.scoreboard .row b{color:#a9e7b0;font-weight:700;}
.scoreboard .row.big{margin-top:6px;border:0;font-family:var(--serif);font-size:19px;}
.scoreboard .row.big b{color:var(--coral);}

/* hotspot beacons */
.hotspot{position:absolute;transform:translate(-50%,-50%);z-index:4;cursor:pointer;}
.beacon{width:38px;height:38px;border-radius:50%;border:2px solid var(--navy);
  background:rgba(244,236,216,.85);display:grid;place-items:center;font-size:18px;
  box-shadow:0 6px 16px -6px rgba(27,42,74,.6);animation:bob 2.4s ease-in-out infinite;}
.beacon::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--coral);opacity:.0;animation:ring 2.4s ease-out infinite;}
@keyframes ring{0%{transform:scale(.7);opacity:.6}100%{transform:scale(1.5);opacity:0}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* NPC sprites live in the world */
.npc{position:absolute;bottom:0;transform-origin:bottom center;z-index:4;pointer-events:none;
  filter:drop-shadow(0 14px 12px rgba(27,42,74,.28));animation:npcbob 3.4s ease-in-out infinite;}
@keyframes npcbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.npc.ground{animation:npcbreath 4s ease-in-out infinite;}
@keyframes npcbreath{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}

/* ---------- Player ---------- */
#player{position:absolute;z-index:6;bottom:16%;left:0;height:26vh;transform-origin:bottom center;
  pointer-events:none;will-change:transform,left;}
#player.walk{animation:step .42s ease-in-out infinite;}
@keyframes step{0%,100%{transform:var(--face) translateY(0) rotate(0deg)}
  25%{transform:var(--face) translateY(-2.5%) rotate(-1.2deg)}
  75%{transform:var(--face) translateY(-2.5%) rotate(1.2deg)}}
#player.idle{animation:breath 3.6s ease-in-out infinite;}
@keyframes breath{0%,100%{transform:var(--face) scaleY(1)}50%{transform:var(--face) scaleY(1.018)}}
#player-shadow{position:absolute;z-index:5;width:11vh;height:2.4vh;border-radius:50%;
  background:radial-gradient(ellipse,rgba(27,42,74,.34),transparent 70%);pointer-events:none;}

/* ---------- Interact prompt ---------- */
#prompt{position:absolute;z-index:7;transform:translate(-50%,-100%);display:flex;align-items:center;gap:8px;
  background:var(--navy);color:var(--cream);padding:7px 13px 7px 8px;border-radius:30px;font-size:14px;font-weight:600;
  box-shadow:var(--shadow);animation:bob 1.8s ease-in-out infinite;white-space:nowrap;}
#prompt .key{display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:6px;
  background:var(--coral);color:var(--navy);font-weight:800;font-size:12px;}

/* ---------- Speech bubble ---------- */
#bubble{position:absolute;z-index:9;max-width:min(440px,82vw);transform:translate(-50%,-100%);
  background:var(--cream);border:2.5px solid var(--navy);border-radius:16px;padding:14px 16px 12px;box-shadow:var(--shadow);}
#bubble::after{content:"";position:absolute;bottom:-13px;left:calc(var(--tail,50%) - 10px);width:20px;height:14px;
  background:var(--cream);border-right:2.5px solid var(--navy);border-bottom:2.5px solid var(--navy);transform:rotate(45deg) skew(8deg,8deg);}
.bubble-name{font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--coral);text-transform:uppercase;margin-bottom:3px;}
.bubble-text{font-family:var(--serif);font-size:clamp(18px,2.5vh,23px);line-height:1.32;color:var(--navy);font-weight:600;}
.bubble-cue{margin-top:8px;font-size:11px;color:var(--navy-soft);opacity:.6;font-weight:600;letter-spacing:.08em;}

/* ---------- HUD ---------- */
#hud{position:absolute;top:0;left:0;right:0;z-index:8;display:flex;align-items:center;gap:14px;
  padding:10px 16px;pointer-events:none;
  background:linear-gradient(180deg,rgba(244,236,216,.9),rgba(244,236,216,0));}
.hud-brand{font-family:var(--serif);font-weight:700;font-size:20px;letter-spacing:.02em;color:var(--navy);flex:0 0 auto;}
.hud-stats{display:flex;gap:9px;flex-wrap:wrap;flex:1;}
.chip{display:flex;align-items:center;gap:7px;background:var(--cream);border:1.5px solid var(--navy);
  border-radius:30px;padding:5px 12px;font-size:13px;font-weight:600;color:var(--navy);box-shadow:0 3px 0 rgba(27,42,74,.12);transition:.4s;}
.chip .ic{font-size:14px;}
.chip b{font-variant-numeric:tabular-nums;}
.chip .up{color:var(--sage);font-weight:800;}
.chip.cost{border-color:var(--coral);}
.chip.cost .up{color:var(--coral);}
.chip.flash{animation:flash 1s ease;}
@keyframes flash{0%,100%{background:var(--cream)}50%{background:#f6d9cf}}
.chip.pulse{box-shadow:0 0 0 0 rgba(217,139,122,.7);animation:pulsecost 1.8s infinite;}
@keyframes pulsecost{0%{box-shadow:0 0 0 0 rgba(217,139,122,.55)}70%{box-shadow:0 0 0 12px rgba(217,139,122,0)}100%{box-shadow:0 0 0 0 rgba(217,139,122,0)}}

/* ---------- Atlas companion (tap-to-ask orb) ---------- */
#atlas-bar{position:absolute;left:16px;bottom:16px;z-index:9;pointer-events:none;}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
#atlas-orb{position:relative;width:62px;height:62px;cursor:pointer;pointer-events:auto;animation:float 4s ease-in-out infinite;
  transition:transform .15s;}
#atlas-orb:hover{transform:scale(1.07);}
#atlas-orb:active{transform:scale(.94);}
#atlas-face{width:62px;height:62px;object-fit:contain;display:block;filter:drop-shadow(0 6px 11px rgba(27,42,74,.4));}
#atlas-badge{position:absolute;top:-3px;right:-3px;width:21px;height:21px;border-radius:50%;background:var(--coral);color:var(--navy);
  font-size:12px;font-weight:800;display:grid;place-items:center;border:2px solid var(--cream);opacity:0;transform:scale(.5);transition:.2s;}
#atlas-bar.nudge #atlas-badge{opacity:1;transform:scale(1);animation:badgepulse 1.7s ease-in-out infinite;}
@keyframes badgepulse{0%,100%{box-shadow:0 0 0 0 rgba(217,139,122,.6)}60%{box-shadow:0 0 0 9px rgba(217,139,122,0)}}
#atlas-copy{position:absolute;left:0;bottom:74px;width:max-content;max-width:min(380px,78vw);background:var(--navy);color:var(--cream);
  border-radius:14px;padding:12px 16px 11px;box-shadow:var(--shadow);opacity:0;transform:translateY(8px) scale(.97);
  transform-origin:bottom left;pointer-events:none;transition:opacity .25s,transform .25s;cursor:pointer;}
#atlas-bar.open #atlas-copy{opacity:1;transform:none;pointer-events:auto;}
#atlas-copy::after{content:"";position:absolute;left:21px;bottom:-8px;width:16px;height:16px;background:var(--navy);transform:rotate(45deg);}
#atlas-name{display:block;font-size:10px;letter-spacing:.24em;color:#a9e7b0;font-weight:800;margin-bottom:3px;}
#atlas-line{font-family:var(--serif);font-size:clamp(15px,2.2vh,20px);line-height:1.3;font-weight:600;display:block;}
#atlas-more{display:block;margin-top:8px;font-size:10px;color:#9fb6cf;letter-spacing:.08em;text-transform:uppercase;font-weight:700;}

/* ---------- Zone intro card (opaque, animates fully out) ---------- */
#zonecard{position:absolute;inset:0;z-index:12;display:grid;place-content:center;pointer-events:none;}
.zc-inner{background:rgba(244,236,216,.97);border:2.5px solid var(--navy);border-radius:16px;padding:15px 34px;text-align:center;
  box-shadow:var(--shadow);opacity:0;}
#zonecard.show .zc-inner{animation:zonepop 2.5s ease forwards;}
@keyframes zonepop{0%{opacity:0;transform:translateY(10px) scale(.96)}10%{opacity:1;transform:none}78%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px) scale(.99)}}
.zonecard-no{font-weight:800;letter-spacing:.36em;color:var(--coral);font-size:12px;}
.zonecard-name{font-family:var(--serif);font-weight:700;font-size:clamp(30px,5.2vh,54px);line-height:1.02;color:var(--navy);margin-top:3px;}
.zonecard-sub{margin-top:5px;font-size:13.5px;color:var(--navy-soft);font-style:italic;letter-spacing:.02em;}

/* persistent small zone label, above the rail */
#zonelabel{position:absolute;z-index:8;left:50%;transform:translateX(-50%);bottom:28px;font-size:11px;font-weight:700;
  letter-spacing:.2em;color:var(--navy-soft);text-transform:uppercase;pointer-events:none;white-space:nowrap;
  text-shadow:0 1px 0 rgba(244,236,216,.9);}

/* collectible "optimization" sparkles */
.token{position:absolute;transform:translate(-50%,-50%);z-index:5;font-size:26px;pointer-events:none;
  filter:drop-shadow(0 0 8px rgba(217,139,122,.75));animation:tokfloat 2.2s ease-in-out infinite;}
.token::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid rgba(217,139,122,.5);animation:ring 2.2s ease-out infinite;}
@keyframes tokfloat{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-64%)}}
.token.got{animation:tokget .5s ease forwards;}
@keyframes tokget{0%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-150%) scale(1.9);opacity:0}}

/* landing dust */
.puff{position:absolute;z-index:5;border-radius:50%;background:rgba(27,42,74,.2);pointer-events:none;animation:puff .5s ease-out forwards;}
@keyframes puff{0%{transform:scale(.4);opacity:.6}100%{transform:scale(1.7);opacity:0}}

/* ---------- Touch controls ---------- */
#touch{position:absolute;z-index:9;bottom:18px;right:16px;display:flex;gap:12px;align-items:center;}
.tbtn{width:62px;height:62px;border-radius:50%;border:2.5px solid var(--navy);background:rgba(244,236,216,.92);
  color:var(--navy);font-size:24px;font-weight:800;box-shadow:var(--shadow);display:grid;place-items:center;
  touch-action:none;cursor:pointer;}
.tbtn:active{background:var(--coral);}
.tbtn-act{width:74px;height:74px;font-size:30px;background:var(--coral);}

/* ---------- Progress rail ---------- */
#rail{position:absolute;z-index:8;left:50%;transform:translateX(-50%);bottom:14px;width:min(360px,52vw);height:5px;
  background:rgba(27,42,74,.18);border-radius:6px;}
#rail-fill{height:100%;width:0;background:var(--coral);border-radius:6px;transition:width .25s;}
#rail-dot{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:var(--navy);border:2px solid var(--cream);
  transform:translate(-50%,-50%);left:0;transition:left .25s;}

/* ---------- Modal ---------- */
#modal{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:18px;
  background:rgba(20,28,52,.7);backdrop-filter:blur(4px);animation:fade .3s ease;}
@keyframes fade{from{opacity:0}to{opacity:1}}
#modal-card{position:relative;width:min(740px,94vw);max-height:90vh;overflow:auto;background:var(--cream);
  border:3px solid var(--navy);border-radius:18px;box-shadow:0 30px 70px -20px rgba(0,0,0,.7);padding:30px 30px 26px;
  animation:pop .34s cubic-bezier(.2,1.2,.4,1);}
@keyframes pop{from{transform:scale(.92) translateY(14px);opacity:0}to{transform:none;opacity:1}}
#modal-close{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:2px solid var(--navy);
  background:var(--cream);color:var(--navy);font-size:16px;font-weight:800;cursor:pointer;z-index:2;}
#modal-close:hover{background:var(--coral);}
.m-kicker{font-size:12px;font-weight:800;letter-spacing:.24em;color:var(--coral);text-transform:uppercase;}
.m-title{font-family:var(--serif);font-weight:700;font-size:clamp(26px,4.4vh,40px);line-height:1.05;margin:4px 0 12px;color:var(--navy);}
.m-body{font-size:16.5px;line-height:1.6;color:var(--ink);}
.m-body p{margin:0 0 12px;}
.m-body em{color:var(--navy-soft);}
.m-video{width:100%;border-radius:12px;border:2px solid var(--navy);background:#000;margin:6px 0 14px;display:block;}
.m-labs{list-style:none;margin:6px 0 14px;padding:14px 16px;border:2px dashed var(--navy);border-radius:12px;background:var(--cream-2);}
.m-labs li{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--paper-line);font-variant-numeric:tabular-nums;}
.m-labs li:last-child{border:0;}
.m-labs .good{color:var(--sage);font-weight:800;}
.m-labs .meh{color:var(--coral);font-weight:800;}
.m-btn{display:inline-block;margin:4px 8px 4px 0;padding:11px 18px;border-radius:30px;border:2px solid var(--navy);
  background:var(--navy);color:var(--cream);font-family:var(--sans);font-weight:700;font-size:15px;cursor:pointer;text-decoration:none;}
.m-btn:hover{background:var(--coral);color:var(--navy);border-color:var(--coral);}
.m-btn.ghost{background:transparent;color:var(--navy);}
.m-btn.ghost:hover{background:var(--navy);color:var(--cream);}
.m-fail{padding:22px;border:2px solid var(--coral);border-radius:12px;background:#2a1f22;color:var(--coral);
  font-family:ui-monospace,Menlo,monospace;text-align:center;margin:6px 0 14px;letter-spacing:.04em;}
.m-fail .big{font-size:22px;font-weight:800;letter-spacing:.18em;}
.m-quiet{font-style:italic;color:var(--navy-soft);}
.m-note{font-size:12.5px;color:var(--navy-soft);border-top:1px solid var(--paper-line);margin-top:14px;padding-top:10px;}

/* sober styling for the reality modals */
#modal-card.sober{background:#e9e3d6;border-color:#34415f;}
#modal-card.sober .m-kicker{color:#6f7f9a;}
#modal-card.sober .m-title{color:#28344f;}

/* ---------- Title card ---------- */
#title{position:absolute;inset:0;z-index:30;display:grid;place-content:center;text-align:center;padding:24px;
  background:radial-gradient(120% 90% at 50% 0%,#f8f1e0,#ecdfc3 70%,#e3d4b6);}
.title-inner{max-width:680px;margin:auto;}
.title-kicker{font-size:13px;font-weight:700;letter-spacing:.3em;color:var(--coral);text-transform:uppercase;margin-bottom:10px;}
.title-main{font-family:var(--serif);font-weight:700;font-size:clamp(46px,12vw,120px);line-height:.9;margin:0;color:var(--navy);
  text-shadow:0 3px 0 rgba(244,236,216,.9);overflow-wrap:break-word;}
.title-sub{font-size:clamp(15px,2.1vh,18px);line-height:1.5;color:var(--navy-soft);max-width:560px;margin:16px auto 24px;}
#start-btn{font-family:var(--sans);font-weight:800;font-size:19px;padding:15px 34px;border-radius:40px;border:0;
  background:var(--navy);color:var(--cream);cursor:pointer;box-shadow:var(--shadow);transition:.2s;}
#start-btn:hover{background:var(--coral);color:var(--navy);transform:translateY(-2px);}
.title-controls{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:22px;font-size:13.5px;color:var(--navy-soft);}
.title-controls b{color:var(--navy);background:var(--cream);border:1.5px solid var(--navy);border-radius:6px;padding:1px 7px;font-size:12px;}
.title-credit{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-size:12.5px;color:var(--navy-soft);font-style:italic;}
.ghost{margin-top:18px;background:transparent;border:1.5px solid var(--navy-soft);color:var(--navy-soft);
  border-radius:30px;padding:7px 16px;font-family:var(--sans);font-weight:600;font-size:13px;cursor:pointer;}
.ghost:hover{border-color:var(--navy);color:var(--navy);}
body:not(.is-touch) .touchhint{display:none;}
body.is-touch .title-controls span:not(.touchhint){display:none;}

/* ---------- Loading ---------- */
#loading{position:absolute;inset:0;z-index:40;display:grid;place-content:center;justify-items:center;gap:18px;
  background:var(--navy);color:var(--cream);}
.loading-pulse{width:54px;height:54px;border-radius:50%;border:4px solid rgba(244,236,216,.25);border-top-color:var(--coral);
  animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{font-family:var(--serif);font-size:20px;letter-spacing:.02em;}

@media (max-width:760px){
  .hud-brand{display:none;}
  #atlas-orb,#atlas-face{width:52px;height:52px;}
  #atlas-bar{bottom:98px;left:10px;}
  #atlas-copy{bottom:64px;}
  #player{height:22vh;}
}
@media (max-height:520px){
  #player{height:34vh;}
}