*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
html,body{width:100%;height:100%;overflow:hidden;font-family:'Songti SC',STSong,'Noto Serif CJK SC','SimSun',serif;background:#2a1508;user-select:none;-webkit-user-select:none}

/* fallback bg color for each page */
#page1{background:linear-gradient(135deg,#8B4513,#5a2d0c)}
#page2{background:linear-gradient(135deg,#6b3a1a,#4a2510)}
#page3{background:linear-gradient(135deg,#7a6b4a,#4a3d2a)}
#page4{background:linear-gradient(135deg,#1a4a3a,#0d2a20)}
#page5{background:linear-gradient(135deg,#3a2a1a,#2a1a0a)}
#page6{background:linear-gradient(135deg,#8a2a0a,#5a1a00)}
#page7{background:linear-gradient(135deg,#6b4a2a,#3a2a1a)}
#page8{background:linear-gradient(135deg,#1a2a4a,#0a1a2a)}
#page9{background:linear-gradient(135deg,#0a2a4a,#051a2a)}
#page10{background:linear-gradient(135deg,#2a1a3a,#1a0a2a)}
#page11{background:linear-gradient(135deg,#5a3a1a,#3a2a0a)}
#page12{background:linear-gradient(135deg,#3a2a1a,#2a1a0a)}

#app{width:100%;height:100%;position:relative;overflow:hidden}

/* ---- Page Base ---- */
.page{
  position:fixed;inset:0;z-index:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s;overflow:hidden
}
.page.active{opacity:1;visibility:visible;z-index:1}
.page.exit{opacity:0;visibility:hidden;z-index:0}

.bg-layer{position:absolute;inset:0}
.bg-layer img,.bg-layer video{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.bg-video{opacity:1;transition:opacity .5s}

/* ---- Absolutely positioned layers (not flex children) ---- */
.particle-container,.scroll-overlay{position:absolute;inset:0;z-index:1;pointer-events:none}

/* ---- Content ---- */
.content{
  position:relative;z-index:2;width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;
  padding:env(safe-area-inset-top,20px) 16px env(safe-area-inset-bottom,30px);
  background:linear-gradient(180deg,rgba(0,0,0,.4),transparent 25%,transparent 70%,rgba(0,0,0,.5))
}
.content.center{justify-content:center}

.top-bar{width:100%;display:flex;align-items:center;gap:10px;padding:8px 0 4px;flex-shrink:0}
.page-num{font-size:11px;color:rgba(255,255,255,.5);background:rgba(0,0,0,.4);padding:2px 10px;border-radius:10px;white-space:nowrap}
.top-bar h2{font-size:clamp(18px,4.5vw,24px);color:#f5e6d3;text-shadow:1px 2px 6px rgba(0,0,0,.6)}
.page-desc{font-size:clamp(12px,3vw,14px);color:#d4c5b0;text-align:center;padding:0 10px;line-height:1.6;margin-bottom:auto;flex-shrink:0}

/* ---- Nav Dots ---- */
.nav-dots{
  position:fixed;right:6px;top:50%;transform:translateY(-50%);z-index:99;
  display:flex;flex-direction:column;gap:6px
}
.nav-dots .dot{
  width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.25);border:1px solid rgba(255,255,255,.15);
  cursor:pointer;transition:all .3s
}
.nav-dots .dot.active{background:#D4AF37;border-color:#D4AF37;transform:scale(1.4)}

/* ---- Audio Toggle ---- */
.audio-toggle{
  position:fixed;top:env(safe-area-inset-top,12px);right:14px;z-index:100;
  width:36px;height:36px;border-radius:50%;border:none;
  background:rgba(0,0,0,.4);color:#fff;font-size:16px;cursor:pointer;
  backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center
}

/* ===================== P1 Cover ===================== */
.scroll-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(212,165,116,.08) 50%,transparent 100%);
  animation:scrollPan 10s ease-in-out infinite
}
@keyframes scrollPan{0%,100%{transform:translateX(-4%)}50%{transform:translateX(4%)}}
#p1Canvas{position:absolute;inset:0;z-index:2;pointer-events:none}
.title-main{
  font-size:clamp(36px,9vw,52px);color:#f5e6d3;letter-spacing:10px;
  text-shadow:2px 3px 8px rgba(0,0,0,.7);z-index:3;position:relative;
  animation:titleIn 1.4s ease-out forwards
}
@keyframes titleIn{0%{opacity:0;transform:scale(.8) translateY(20px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.title-sub{
  font-size:clamp(11px,2.8vw,14px);color:#d4c5b0;letter-spacing:3px;margin-top:10px;
  z-index:3;position:relative;animation:fadeUp 1s .5s both
}
@keyframes fadeUp{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:translateY(0)}}
.btn-start{
  margin-top:30px;padding:14px 48px;font-size:clamp(15px,4vw,19px);font-family:inherit;
  background:linear-gradient(135deg,#D4AF37,#E8B042);color:#3d2200;
  border:none;border-radius:30px;cursor:pointer;z-index:3;position:relative;
  box-shadow:0 4px 25px rgba(212,175,55,.35);
  animation:pulse 2.2s ease-in-out infinite,fadeUp 1s 1.2s both
}
@keyframes pulse{0%,100%{transform:scale(1);box-shadow:0 4px 25px rgba(212,175,55,.35)}50%{transform:scale(1.06);box-shadow:0 8px 35px rgba(212,175,55,.5)}}
.btn-start:active{transform:scale(.95)}

/* ===================== P2 Cargo ===================== */
.cards-row{display:flex;gap:10px;width:100%;max-width:400px;flex:1;align-items:center;justify-content:center;padding:0 4px}
.cargo-card{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:14px 6px 10px;border-radius:12px;
  background:rgba(245,230,211,.1);border:1px solid rgba(255,255,255,.12);
  cursor:pointer;transition:all .4s;backdrop-filter:blur(4px);
  animation:cardIn .5s both
}
.cargo-card:nth-child(1){animation-delay:0s}
.cargo-card:nth-child(2){animation-delay:.15s}
.cargo-card:nth-child(3){animation-delay:.3s}
@keyframes cardIn{0%{opacity:0;transform:translateY(30px)}100%{opacity:1;transform:translateY(0)}}
.cargo-card img{width:clamp(44px,12vw,64px);height:clamp(44px,12vw,64px);object-fit:contain}
.cargo-name{font-size:clamp(13px,3.5vw,17px);color:#f5e6d3}
.cargo-hint{font-size:clamp(10px,2.5vw,12px);color:#b8a88d;text-align:center;line-height:1.3}
.cargo-card.chosen{transform:scale(1.12);border-color:#D4AF37;box-shadow:0 0 30px rgba(212,175,55,.45);background:rgba(212,175,55,.15)}
.cargo-card.dim{opacity:.3;transform:scale(.88)}

/* ===================== P3 Drag ===================== */
.drag-wrap{width:90%;max-width:360px;margin-top:auto;margin-bottom:auto;flex-shrink:0}
.drag-track{position:relative;width:100%;height:56px;cursor:pointer;touch-action:none}
.track-bg{position:absolute;top:18px;left:0;right:0;height:20px;background:rgba(139,69,19,.35);border-radius:12px;border:1px solid rgba(255,255,255,.12)}
.track-fill{position:absolute;top:18px;left:0;height:20px;background:linear-gradient(90deg,#D4AF37,#E8B042);border-radius:12px;width:0%;transition:width .08s}
.track-handle{position:absolute;top:0;left:0;font-size:32px;transform:translateX(-50%);transition:left .05s;z-index:2;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6));cursor:grab}
.track-labels{display:flex;justify-content:space-between;margin-top:6px}
.track-labels span{font-size:11px;color:rgba(255,255,255,.5)}
.drag-pct{color:#D4AF37!important;font-weight:bold}

/* ===================== P4 Ripple ===================== */
.water-wrap{
  position:relative;width:clamp(200px,55vw,280px);height:clamp(200px,55vw,280px);
  border-radius:50%;overflow:hidden;flex-shrink:0;
  box-shadow:0 0 40px rgba(0,100,150,.25);margin:auto
}
#rippleCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.water-hint{
  position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.6);font-size:13px;z-index:3;animation:pulse 2.2s infinite;pointer-events:none
}
.water-reveal{position:absolute;inset:0;opacity:0;transition:opacity 1.2s;z-index:1}
.water-reveal.show{opacity:1}
.water-reveal img{width:100%;height:100%;object-fit:cover}

/* ===================== P5 Erase ===================== */
.erase-wrap{
  position:relative;width:92%;max-width:360px;flex:1;max-height:50vh;
  border-radius:12px;overflow:hidden;border:2px solid rgba(255,255,255,.08);margin:auto
}
#eraseCanvas{width:100%;height:100%;cursor:crosshair;touch-action:none;display:block}
.erase-pct{
  position:absolute;bottom:8px;left:8px;font-size:12px;color:rgba(255,255,255,.7);
  background:rgba(0,0,0,.5);padding:3px 12px;border-radius:10px;pointer-events:none
}

/* ===================== P6 Temperature ===================== */
.temp-card{
  display:flex;align-items:center;gap:14px;
  background:rgba(0,0,0,.35);padding:14px 20px;border-radius:16px;
  backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.08);margin:auto
}
.temp-icon{font-size:32px}
.temp-bar-wrap{width:14px;height:130px;background:rgba(255,255,255,.08);border-radius:8px;position:relative;overflow:hidden}
.temp-fill{position:absolute;bottom:0;width:100%;background:linear-gradient(to top,#ff6b35,#ff4500);border-radius:8px;transition:height .3s;height:100%}
.temp-val{font-size:clamp(22px,6vw,30px);color:#ff6b35;min-width:60px;text-align:center;font-weight:bold}
.btn-fan{
  margin-top:14px;padding:12px 32px;font-size:15px;font-family:inherit;
  background:linear-gradient(135deg,#ff6b35,#ff4500);color:#fff;
  border:none;border-radius:25px;cursor:pointer;box-shadow:0 4px 15px rgba(255,69,0,.35)
}
.btn-fan:active{transform:scale(.93)}
.fan-count{font-size:12px;color:rgba(255,255,255,.5);margin-top:6px}

/* ===================== P7 Trade ===================== */
.trade-list{width:100%;max-width:380px;display:flex;flex-direction:column;gap:8px;flex:1;justify-content:center;padding:0 4px}
.trade-item{
  display:flex;align-items:center;gap:10px;padding:13px 14px;
  background:rgba(245,230,211,.08);border:1px solid rgba(255,255,255,.1);
  border-radius:10px;cursor:pointer;transition:all .3s;backdrop-filter:blur(4px);
  animation:cardIn .4s both
}
.trade-item:active{transform:scale(.97)}
.trade-item.pick{border-color:#D4AF37;background:rgba(212,175,55,.18)}
.trade-item .ti-icon{font-size:26px}
.trade-item .ti-text{flex:1;color:#f5e6d3;font-size:clamp(12px,3vw,14px)}
.trade-item .ti-gain{font-size:13px;color:#D4AF37;white-space:nowrap}
.wealth-bar{font-size:15px;color:#D4AF37;margin-top:6px;padding:4px 0}

/* ===================== P8 Torch ===================== */
.torch-wrap{
  width:130px;height:130px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  position:relative;touch-action:none;margin:auto;flex-shrink:0
}
.torch-glow{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,rgba(255,150,50,.3),transparent 70%);
  transition:all .3s
}
.torch-glow.on{transform:scale(1.4);background:radial-gradient(circle,rgba(255,200,50,.5),transparent 70%)}
.torch-icon{font-size:52px;position:relative;z-index:1;filter:drop-shadow(0 0 18px rgba(255,150,50,.4));transition:transform .3s}
.torch-timer{font-size:13px;color:rgba(255,255,255,.6);margin-top:10px}

/* ===================== P9 Puzzle ===================== */
.puzzle-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;width:180px;height:180px;flex-shrink:0}
.puzzle-grid .slot{
  border:2px dashed rgba(255,255,255,.2);border-radius:6px;
  background:rgba(0,0,0,.2);transition:all .3s;display:flex;align-items:center;justify-content:center
}
.puzzle-grid .slot.fill{border-color:#D4AF37;background:rgba(212,175,55,.08)}
.puzzle-grid .slot img{width:100%;height:100%;object-fit:cover;border-radius:4px}
.puzzle-pool{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:10px 0 6px}
.puzzle-piece{
  width:64px;height:64px;border-radius:6px;overflow:hidden;
  border:2px solid rgba(255,255,255,.15);cursor:pointer;transition:all .3s
}
.puzzle-piece img{width:100%;height:100%;object-fit:cover}
.puzzle-piece.sel{border-color:#D4AF37;transform:scale(1.12);box-shadow:0 0 16px rgba(212,175,55,.35)}
.puzzle-stat{font-size:13px;color:rgba(255,255,255,.6)}

/* ===================== P10 Matching ===================== */
.match-area{
  display:flex;align-items:stretch;gap:0;width:100%;max-width:380px;
  flex:1;position:relative;justify-content:center
}
.match-col{display:flex;flex-direction:column;gap:6px;justify-content:center;z-index:2}
.match-item{
  padding:8px 12px;border-radius:8px;font-size:clamp(11px,2.8vw,13px);white-space:nowrap;
  background:rgba(245,230,211,.08);border:1px solid rgba(255,255,255,.1);
  cursor:pointer;transition:all .3s;color:#f5e6d3;text-align:center
}
.match-item.sel{border-color:#D4AF37;background:rgba(212,175,55,.18)}
.match-item.done{border-color:#D4AF37;background:rgba(212,175,55,.12);color:#D4AF37;cursor:default}
.match-item.err{border-color:#ff4444;background:rgba(255,68,68,.18);animation:shake .35s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
#lineCanvas{flex:1;min-width:50px;z-index:1;touch-action:none}
.match-stat{font-size:13px;color:rgba(255,255,255,.6);margin-top:6px}

/* ===================== P11 Archive ===================== */
.archive{
  background:linear-gradient(135deg,#f5e6d3,#e8d5b8,#f5e6d3);
  border-radius:12px;padding:20px 18px;width:90%;max-width:350px;
  box-shadow:0 8px 40px rgba(0,0,0,.35);flex-shrink:0;margin:auto
}
.archive h3{text-align:center;color:#5a3d1a;font-size:18px;margin-bottom:12px;letter-spacing:3px}
.a-line{color:#5a3d1a;font-size:13px;padding:5px 0;border-bottom:1px solid rgba(90,61,26,.08)}
.badge-row{display:flex;gap:8px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.badge-item{font-size:26px;animation:popIn .4s both}
@keyframes popIn{0%{transform:scale(0) rotate(-25deg)}100%{transform:scale(1) rotate(0)}}
.btn-gold{
  padding:12px 36px;font-size:15px;font-family:inherit;
  background:linear-gradient(135deg,#D4AF37,#E8B042);color:#3d2200;
  border:none;border-radius:25px;cursor:pointer;box-shadow:0 4px 15px rgba(212,175,55,.35);flex-shrink:0
}
.btn-gold:active{transform:scale(.94)}

/* ===================== P12 Epilogue ===================== */
.map-svg-wrap{width:100%;max-width:400px;padding:0 8px;flex-shrink:0}
.map-svg{width:100%;height:auto}
.route-line{stroke-dasharray:1000;stroke-dashoffset:1000;animation:draw 3s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.city{animation:glow 1.5s ease-in-out infinite alternate}
@keyframes glow{0%{opacity:.4;r:4}100%{opacity:1;r:7}}
.epilogue{text-align:center;color:#f5e6d3;font-size:clamp(13px,3.5vw,16px);line-height:2.2;margin:12px 0;letter-spacing:1px;flex-shrink:0}
.final-btns{display:flex;gap:12px;flex-shrink:0}
.btn-ghost{
  padding:12px 26px;font-size:14px;font-family:inherit;
  background:transparent;color:#D4AF37;border:1px solid #D4AF37;border-radius:25px;cursor:pointer
}
.btn-ghost:active{background:rgba(212,175,55,.1)}

/* ===================== Responsive ===================== */
@media(max-width:359px){
  .content{padding-left:8px;padding-right:8px}
  .cargo-card{padding:10px 4px}
  .puzzle-grid{width:150px;height:150px}
  .puzzle-piece{width:54px;height:54px}
  .torch-wrap{width:100px;height:100px}
  .torch-icon{font-size:40px}
}
@media(min-height:800px){
  .page-desc{margin-bottom:20px}
}