/* ============ Raychel · A Journey of Light ============ */
:root{
  --night:#0D141C;      /* 深夜蓝 NETVERSE */
  --night2:#141F2C;
  --dawn:#202F41;       /* 辅助深色 */
  --beige:#F0EFEB;      /* 暖米 */
  --pink:#F59096;       /* 签名粉 */
  --red:#ED1C24;        /* 品牌红 */
  --ink:rgba(240,239,235,.94);
  --ink-dim:rgba(240,239,235,.55);
  --hair:rgba(240,239,235,.16);
  --serif-zh:'ZCOOL XiaoWei',serif;
  --script:'Ma Shan Zheng',cursive;
  --body-en:'Nunito',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{
  background:var(--night);
  color:var(--ink);
  font-family:var(--body-en);
  -webkit-font-smoothing:antialiased;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
html[lang="zh"] body{font-family:var(--serif-zh),var(--body-en)}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
canvas{display:block;position:fixed;inset:0;touch-action:none}
::selection{background:var(--pink);color:var(--night)}

/* ============ Language gate ============ */
#gate{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse 120% 90% at 50% 110%, #17232f 0%, var(--night) 60%);
  transition:opacity 1.4s ease, visibility 1.4s}
#gate.gone{opacity:0;visibility:hidden;pointer-events:none}
#gateCanvas{position:absolute;inset:0;opacity:.9}
.gate-card{position:relative;z-index:2;text-align:center;padding:0 28px;max-width:560px;animation:riseIn 1.6s cubic-bezier(.2,.7,.2,1) both .3s}
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.gate-mark{width:56px;margin:0 auto 14px}
.gate-mark img{width:100%;height:auto;display:block;filter:drop-shadow(0 4px 18px rgba(0,0,0,.45))}
.gate-script{width:min(230px,58vw);height:auto;display:block;margin:0 auto 6px;filter:drop-shadow(0 4px 22px rgba(0,0,0,.5))}
.gate-title{font-size:13px;letter-spacing:.62em;text-indent:.62em;font-weight:400;color:var(--ink-dim);margin:14px 0 26px}
.gate-sub{display:flex;flex-direction:column;gap:13px;margin-bottom:34px}
.gate-sub .sub-en{font-size:clamp(19px,3.2vw,26px);line-height:1.5;letter-spacing:.03em;color:var(--ink)}
.gate-sub .sub-zh{font-size:clamp(14px,2.2vw,17px);line-height:1.6;letter-spacing:.08em;
  color:var(--ink-dim);font-family:var(--serif-zh)}
.gate-lang{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.gate-lang-btn{
  padding:15px 34px;border:1px solid var(--hair);border-radius:999px;
  font-size:15.5px;letter-spacing:.14em;transition:.45s;white-space:nowrap;
}
.gate-lang-btn:hover{border-color:var(--pink);color:var(--pink);transform:translateY(-2px);
  box-shadow:0 6px 30px -8px rgba(245,144,150,.35)}
.gate-hint{margin-top:42px;font-size:12px;letter-spacing:.22em;color:rgba(240,239,235,.34);display:flex;gap:8px;align-items:center;justify-content:center}
.gate-hint svg{animation:swipe 2.6s ease-in-out infinite;transform-origin:center}
@keyframes swipe{0%,100%{transform:translateX(-4px)}50%{transform:translateX(4px)}}
.gate-foot{position:absolute;left:0;right:0;bottom:-9vh;font-size:11px;letter-spacing:.3em;color:rgba(240,239,235,.26)}

/* ============ Stage ============ */
#stage{position:fixed;inset:0}
#sky{z-index:0;transition:background 2.5s ease}
#ink{z-index:2}
#hud{position:fixed;z-index:10;top:0;left:0;right:0;display:flex;align-items:center;
  justify-content:space-between;gap:8px;padding:calc(14px + env(safe-area-inset-top, 0px)) 22px 18px;pointer-events:none;min-width:0}
#hud>*{pointer-events:auto;flex:none}
.hud-center{flex:1 1 0;min-width:0;display:flex;justify-content:center}
#phaseTitle{font-family:var(--script);font-size:20px;color:var(--pink);opacity:0;transition:opacity 1.2s;letter-spacing:.1em;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#phaseTitle.show{opacity:.9}
.hud-mark{font-size:11.5px;letter-spacing:.4em;color:var(--ink-dim);display:flex;align-items:center;gap:10px;white-space:nowrap}
.hud-mark img{height:18px;width:auto;display:block}
.hud-dot{width:4px;height:4px;border-radius:50%;background:var(--pink);box-shadow:0 0 10px var(--pink);animation:blink 3.2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:.4}50%{opacity:1}}
.hud-right{display:flex;gap:10px}
.icon-btn{border:1px solid var(--hair);border-radius:999px;padding:8px 14px;font-size:12px;
  letter-spacing:.18em;color:var(--ink-dim);transition:.3s;backdrop-filter:blur(6px);background:rgba(13,20,28,.35)}
.icon-btn:hover{border-color:var(--pink);color:var(--pink)}
.icon-btn.off{opacity:.45}
.icon-btn.wide{padding:8px 18px}

/* ============ Story card ============ */
#story{position:fixed;z-index:6;left:50%;transform:translateX(-50%);bottom:clamp(104px,14vh,150px);
  width:min(600px,86vw);text-align:center;pointer-events:none;
  transition:opacity .8s ease,transform .8s ease}
#story.hidden{opacity:0;transform:translateX(-50%) translateY(14px)}
#storyTitle{font-family:var(--script);font-weight:400;font-size:clamp(24px,4.2vw,34px);
  color:var(--ink);letter-spacing:.06em;margin-bottom:10px;text-shadow:0 2px 30px rgba(13,20,28,.9)}
#storyBody{font-size:clamp(14px,1.9vw,16px);line-height:1.8;color:var(--ink-dim);
  text-shadow:0 1px 20px rgba(13,20,28,.9)}
#storyTip{margin-top:14px;display:inline-flex;align-items:center;gap:9px;font-size:12.5px;
  letter-spacing:.2em;color:var(--pink);opacity:.92;animation:tipPulse 2.4s ease-in-out infinite}
#storyTip:empty{display:none}
@keyframes tipPulse{0%,100%{opacity:.55}50%{opacity:1}}
#storyTip .tip-ring{width:15px;height:15px;border:1.5px solid var(--pink);border-radius:50%;position:relative;flex:none}
#storyTip .tip-ring::after{content:'';position:absolute;inset:3.5px;border-radius:50%;background:var(--pink);animation:tipDot 2.4s ease-in-out infinite}
@keyframes tipDot{0%,100%{opacity:.3;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}

/* ============ Dock ============ */
#dock{position:fixed;z-index:10;left:50%;transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  display:flex;align-items:center;gap:16px;padding:10px 16px;
  background:rgba(13,20,28,.5);border:1px solid var(--hair);border-radius:999px;
  backdrop-filter:blur(14px);transition:opacity .6s}
#dock.hidden{opacity:0;pointer-events:none}
.dock-btn{font-size:12px;letter-spacing:.2em;color:var(--ink-dim);padding:9px 12px;transition:.3s;white-space:nowrap;min-width:44px;min-height:34px}
#progress{position:absolute;top:0;left:16px;height:2px;border-radius:2px;background:var(--pink);
  box-shadow:0 0 12px var(--pink);transition:width .8s cubic-bezier(.2,.7,.2,1);max-width:calc(100% - 32px)}
.dock-btn:hover{color:var(--pink)}
.dock-btn:disabled{opacity:.25;cursor:default}
#dots{display:flex;gap:9px;padding:0 6px}
.dot{width:9px;height:9px;border-radius:50%;border:1px solid var(--ink-dim);transition:.5s;cursor:pointer;padding:0}
.dot::before{content:'';display:block;width:22px;height:22px;margin:-7px;border-radius:50%;transform:scale(.55)}
.dot.on{background:var(--pink);border-color:var(--pink);box-shadow:0 0 10px var(--pink);transform:scale(1.15)}
.dot.done{border-color:var(--pink);background:rgba(245,144,150,.35)}

/* ============ End card ============ */
#endcard{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity 1.6s ease,visibility 1.6s;
  background:linear-gradient(to bottom, #f7f2ea 0%, var(--beige) 55%, #e9e4da 100%)}
#endcard.show{opacity:1;visibility:visible}
.end-inner{width:min(620px,88vw);max-height:92vh;overflow-y:auto;text-align:center;
  color:#1d2a38;padding:calc(58px + env(safe-area-inset-top, 0px)) 20px 44px;
  animation:riseIn 1.8s cubic-bezier(.2,.7,.2,1) both .5s;
  scrollbar-width:thin;scrollbar-color:rgba(29,42,56,.2) transparent}
.end-inner::-webkit-scrollbar{width:4px}
.end-inner::-webkit-scrollbar-thumb{background:rgba(29,42,56,.2);border-radius:4px}
.end-logos{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:20px}
.end-emblem{height:34px;width:auto}
.end-script{height:44px;width:auto}
.end-editions{font-size:12px;letter-spacing:.26em;color:#66707d;margin-bottom:30px}
.end-badge{display:inline-block;font-size:10.5px;letter-spacing:.5em;text-indent:.5em;
  color:var(--red);border:1px solid rgba(237,28,36,.35);border-radius:999px;
  padding:7px 18px;margin-bottom:26px}
.end-title{font-size:clamp(28px,5vw,42px);font-weight:400;letter-spacing:.05em;line-height:1.3;margin-bottom:14px}
.end-sub{font-size:15px;line-height:1.9;color:#4d5a68;max-width:440px;margin:0 auto 30px}
.end-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:36px}

/* ============ Journey reward (coupon) ============ */
.reward{border:1.5px dashed rgba(237,28,36,.5);border-radius:18px;padding:22px 20px 20px;
  margin:0 auto 30px;max-width:460px;background:rgba(255,255,255,.55);text-align:center;
  animation:rewardPop 1s cubic-bezier(.2,.9,.3,1.4) both .9s}
@keyframes rewardPop{from{opacity:0;transform:scale(.86) translateY(8px)}to{opacity:1;transform:none}}
.reward-badge{font-size:11px;letter-spacing:.34em;text-indent:.34em;color:var(--red);margin-bottom:14px}
.reward-code-row{display:flex;align-items:stretch;gap:10px;justify-content:center;margin-bottom:12px}
.reward-code{font-family:var(--body-en);font-weight:700;font-size:clamp(15px,4.2vw,19px);letter-spacing:.04em;
  color:#1d2a38;background:#fff;border:1px solid rgba(29,42,56,.18);border-radius:12px;
  padding:12px 16px;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reward-copy{flex:none;padding:0 16px;border-radius:12px;background:#1d2a38;color:#F0EFEB;
  font-size:12px;letter-spacing:.14em;transition:.3s;min-height:44px}
.reward-copy:hover{background:var(--red)}
.reward-desc{font-size:12.5px;line-height:1.7;color:#5a6774;margin-bottom:16px}
.reward-link{display:block;padding:13px 18px;border-radius:999px;background:var(--red);color:#fff;
  text-decoration:none;font-size:13.5px;letter-spacing:.14em;transition:.3s;
  box-shadow:0 10px 26px -8px rgba(237,28,36,.45)}
.reward-link:hover{transform:translateY(-2px);box-shadow:0 14px 32px -8px rgba(237,28,36,.55)}
.skip-hint{font-size:12.5px;letter-spacing:.1em;color:#8a93a0;margin:-12px auto 28px;max-width:420px}
.skip-hint[hidden]{display:none}
.cta-primary{display:inline-block;padding:17px 44px;border-radius:999px;background:var(--red);
  color:#fff;text-decoration:none;font-size:15px;letter-spacing:.2em;transition:.35s;
  box-shadow:0 12px 34px -10px rgba(237,28,36,.5)}
.cta-primary:hover{transform:translateY(-3px);box-shadow:0 18px 44px -10px rgba(237,28,36,.6)}
.cta-ghost{padding:17px 40px;border-radius:999px;border:1px solid rgba(29,42,56,.3);
  color:#1d2a38;font-size:15px;letter-spacing:.2em;transition:.35s}
.cta-ghost:hover{border-color:var(--red);color:var(--red);transform:translateY(-3px)}
.end-feats{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:36px}
.feat-chip{font-size:12px;letter-spacing:.12em;color:#5a6774;border:1px solid rgba(29,42,56,.16);
  border-radius:999px;padding:8px 16px}
.feat-chip b{color:var(--red);font-weight:600;margin-right:5px}
.end-foot{font-size:11.5px;letter-spacing:.14em;color:#9aa3af;display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.end-foot a{color:#5a6774;text-decoration:none;border-bottom:1px solid rgba(29,42,56,.25)}
.end-foot a:hover{color:var(--red);border-color:var(--red)}

/* ============ Toast ============ */
#toast{position:fixed;z-index:80;top:26px;left:50%;transform:translateX(-50%) translateY(-8px);
  background:rgba(13,20,28,.92);border:1px solid var(--pink);color:var(--ink);
  padding:13px 26px;border-radius:999px;font-size:13.5px;letter-spacing:.08em;
  box-shadow:0 10px 40px rgba(0,0,0,.4);opacity:0;transition:.45s;pointer-events:none;max-width:86vw;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============ Light-scene overrides (day / finale) ============ */
body.light-scene #storyTitle{color:#1d2a38;text-shadow:0 2px 30px rgba(240,239,235,.95)}
body.light-scene #storyBody{color:#4a5866;text-shadow:0 1px 20px rgba(240,239,235,.9)}
body.light-scene #storyTip{color:#c24046}
body.light-scene #phaseTitle{color:#ED1C24}
body.light-scene .hud-mark{color:rgba(29,42,56,.62)}
body.light-scene .icon-btn{background:rgba(240,239,235,.55);color:#4a5866;border-color:rgba(29,42,56,.22)}
body.light-scene .icon-btn:hover{border-color:#ED1C24;color:#ED1C24}
body.light-scene .dock-btn{color:#8a93a0}
body.light-scene .dock-btn:hover{color:#ED1C24}

/* ============ Platform-bar immunity ============ */
/* The hosting wrapper shifts every position:fixed element down by 48px via an
   inline style.top. Bottom-anchored elements (#dock/#story) then stretch to
   full height and cover the screen; full-bleed canvases get pushed off-center.
   !important beats the injected inline style and restores correct layout. */
#sky, #ink{top:0 !important; left:0 !important}
#story, #dock{top:auto !important}
#endcard{top:0 !important}

/* ============ Responsive ============ */
/* mobile-first: phones and below */
@media (max-width:640px){
  .hud-mark span:last-child{display:none}
  .hud-mark{letter-spacing:.28em;font-size:10.5px}
  #phaseTitle{font-size:15px}
  .icon-btn{padding:9px 12px;font-size:11px;letter-spacing:.12em;min-height:40px}
  .icon-btn.wide{padding:9px 14px}
  .gate-lang{gap:12px}
  .gate-lang-btn{padding:14px 24px;min-width:132px}
  .gate-lang-btn .lang-label{font-size:14px}
  .gate-mark{width:150px}
  #dock{gap:8px;padding:8px 10px;max-width:calc(100vw - 16px)}
  .dock-btn{font-size:11px;letter-spacing:.1em;padding:8px 8px;min-width:36px;min-height:32px}
  #dots{gap:8px;padding:0 2px}
  .dot{width:8px;height:8px}
  #progress{left:10px;max-width:calc(100% - 20px)}
  #story{bottom:calc(88px + env(safe-area-inset-bottom, 0px));width:92vw}
  #storyBody{font-size:13.5px;line-height:1.75}
  .end-title{letter-spacing:.02em}
  .end-inner{padding:34px 18px 58px}
  .end-logos{margin-bottom:16px}
  .cta-primary,.cta-ghost{padding:14px 28px;font-size:14px}
}
/* very narrow phones (≤360px) */
@media (max-width:374px){
  #hud{padding:12px 12px;gap:6px}
  .hud-mark span:last-child{display:none}
  .hud-mark{gap:6px}
  .hud-mark img{height:15px}
  #phaseTitle{font-size:13px;letter-spacing:.06em}
  .icon-btn{padding:8px 9px;font-size:10.5px;letter-spacing:.06em}
  #soundBtn{font-size:0;padding:8px 10px}
  #soundBtn::before{content:'♪';font-size:14px}
  #dock{gap:5px;padding:7px 8px;max-width:calc(100vw - 10px)}
  .dock-btn{font-size:0;min-width:30px;padding:8px 6px}
  .dock-btn::before{font-size:13px;letter-spacing:0}
  #prevBtn::before{content:'‹'}
  #nextBtn::before{content:'›'}
  #dots{gap:7px}
  .dot{width:7px;height:7px}
  #story{width:94vw}
  #storyTitle{font-size:21px}
  #storyBody{font-size:12.5px}
  .gate-title{font-size:13px;letter-spacing:.5em;text-indent:.5em}
  .gate-sub{margin-bottom:28px}
  .gate-sub .sub-en{font-size:17px}
  .gate-sub .sub-zh{font-size:12.5px}
}
/* short landscape (phones rotated) */
@media (max-height:520px) and (orientation:landscape){
  #hud{padding:10px 16px}
  #phaseTitle{font-size:14px}
  #story{bottom:calc(76px + env(safe-area-inset-bottom, 0px))}
  #storyTitle{font-size:20px;margin-bottom:6px}
  #storyBody{font-size:12.5px;line-height:1.55}
  #storyTip{margin-top:8px;font-size:11px}
  #dock{padding:6px 12px;gap:10px}
  #dots{gap:7px}
  .gate-title{margin-bottom:18px}
  .gate-sub{margin-bottom:22px}
  .gate-sub .sub-en{font-size:18px}
  .gate-sub .sub-zh{font-size:13px}
  .gate-lang{gap:12px}
  .gate-lang-btn{padding:12px 20px;min-width:118px}
  .gate-hint{margin-top:24px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01s!important;transition-duration:.2s!important}
}