/* ═══ NEXUS ARCADE — 星域入口 ═══ */
:root{
  --void:#050308; --ink:#0d0919; --panel:rgba(18,13,30,.62); --panel-2:rgba(12,8,22,.78);
  --line:rgba(255,207,107,.20); --line-cool:rgba(140,110,255,.24);
  --text:#f7f2ff; --dim:#a89ad0; --dimmer:#6f6494;
  --gold:#ffcf6b; --hot:#ff9d4d; --cool:#7fd8ff; --violet:#a475ff; --live:#63e6a8;
  --mono:'Space Grotesk','DM Mono',ui-monospace,monospace;
  --sans:'DM Sans',system-ui,'Segoe UI','Noto Sans TC',sans-serif;
  --pad:clamp(12px,2.4vw,30px);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--void); color:var(--text); font-family:var(--sans);
  overflow:hidden; -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
}
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#scene.dragging{cursor:grabbing}
#scene.pointing{cursor:pointer}
#vignette{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 46%, transparent 38%, rgba(5,3,8,.55) 78%, rgba(5,3,8,.92) 100%);
}

/* ── stage shells ── */
.stage{position:fixed;inset:0;z-index:6;pointer-events:none;display:flex;flex-direction:column;
  padding:max(var(--pad),env(safe-area-inset-top)) var(--pad) max(var(--pad),env(safe-area-inset-bottom));
  transition:opacity .7s ease}
.stage.hidden{opacity:0;pointer-events:none!important;visibility:hidden}
.stage *{pointer-events:auto}
.stage.hidden *{pointer-events:none}

/* ── 通用按鈕 ── */
.btn{font-family:var(--sans);font-size:.78rem;font-weight:700;color:#f2ecff;
  background:rgba(140,110,255,.12);border:1px solid var(--line-cool);border-radius:11px;
  padding:.52rem .9rem;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .18s cubic-bezier(.2,1,.3,1),background .2s,box-shadow .25s,color .2s}
.btn:hover{transform:translateY(-2px);background:rgba(140,110,255,.24);box-shadow:0 10px 26px rgba(90,50,190,.34)}
.btn:active{transform:translateY(0) scale(.97)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.btn.gold{border-color:var(--line);background:rgba(255,207,107,.14);color:#ffe9b8}
.btn.gold:hover{background:rgba(255,207,107,.26);box-shadow:0 10px 26px rgba(190,110,20,.3)}
.btn.big{font-size:.92rem;padding:.72rem 1.35rem;border-radius:13px}
.btn.mini{position:fixed;right:var(--pad);bottom:var(--pad);z-index:9;font-size:.66rem;padding:.36rem .6rem;
  opacity:.62;border-radius:9px}
.btn.mini:hover{opacity:1}
.btn[disabled]{opacity:.34;pointer-events:none}

/* ═══ 第一幕：黑洞 ═══ */
#gate{justify-content:flex-end}
.gate-block{max-width:min(640px,94vw);margin-left:clamp(2px,4vw,64px);margin-bottom:clamp(6px,3vh,42px)}
.eyebrow{font-family:var(--mono);font-size:clamp(.56rem,1.5vw,.72rem);font-weight:500;letter-spacing:.42em;
  text-transform:uppercase;color:var(--gold);opacity:.82;margin-bottom:clamp(8px,1.6vh,18px)}
.title{font-family:var(--mono);font-weight:700;font-size:clamp(2.9rem,11.5vw,7.6rem);line-height:.86;
  letter-spacing:-.055em;text-shadow:0 0 60px rgba(255,157,77,.34),0 0 140px rgba(140,110,255,.28)}
.title em{font-style:normal;color:var(--gold);display:block;font-size:.365em;letter-spacing:.22em;
  margin-top:.42em;text-shadow:0 0 34px rgba(255,207,107,.5)}
.lede{margin-top:clamp(14px,2.6vh,26px);font-size:clamp(.85rem,2.4vw,1.02rem);line-height:1.72;color:var(--dim);max-width:34ch}
.cta-row{display:flex;align-items:center;gap:clamp(12px,3vw,26px);flex-wrap:wrap;margin-top:clamp(18px,3.4vh,34px)}
.cta-hint{font-size:.7rem;color:var(--dimmer);line-height:1.6}
.cta-hint b{color:var(--dim);font-weight:500}

/* 黑洞按鈕：雙脈動環 */
.hole-btn{position:relative;display:grid;place-items:center;width:clamp(112px,26vw,142px);aspect-ratio:1;
  border-radius:50%;border:1px solid rgba(255,207,107,.42);cursor:pointer;color:#ffeecb;
  background:radial-gradient(circle at 50% 42%, rgba(255,157,77,.20), rgba(12,8,22,.86) 62%, #050308 78%);
  box-shadow:0 0 44px rgba(255,150,60,.24),inset 0 0 34px rgba(255,180,90,.16);
  transition:transform .28s cubic-bezier(.2,1,.3,1),box-shadow .3s}
.hole-btn span{font-family:var(--mono);font-weight:700;font-size:clamp(.76rem,2.2vw,.92rem);letter-spacing:.06em;z-index:2}
.hole-btn:hover{transform:scale(1.07);box-shadow:0 0 74px rgba(255,160,70,.42),inset 0 0 44px rgba(255,190,110,.26)}
.hole-btn:active{transform:scale(.98)}
.hole-btn:focus-visible{outline:2px solid var(--gold);outline-offset:8px}
.hole-btn .ring{position:absolute;inset:-2px;border-radius:50%;border:1px solid rgba(255,207,107,.5);
  animation:pulse 3.1s cubic-bezier(.2,.7,.3,1) infinite;pointer-events:none}
.hole-btn .ring.d2{animation-delay:1.55s;border-color:rgba(160,120,255,.42)}
@keyframes pulse{0%{transform:scale(1);opacity:.9}70%{transform:scale(1.62);opacity:0}100%{transform:scale(1.62);opacity:0}}

.gate-meta{position:absolute;right:clamp(10px,3vw,44px);top:clamp(58px,13vh,120px);display:flex;flex-direction:column;
  gap:clamp(10px,2.2vh,20px);text-align:right;list-style:none}
.gate-meta li{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.gate-meta b{font-family:var(--mono);font-size:clamp(1.1rem,3.4vw,1.7rem);font-weight:700;color:var(--gold);line-height:1}
.gate-meta i{font-style:normal;font-size:.55rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dimmer)}
.gate-meta li.dim b{color:var(--dim)}

/* ═══ 第三幕：宇宙 ═══ */
#uni{justify-content:space-between}
.uni-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.brand h1{font-family:var(--mono);font-size:clamp(1rem,3.2vw,1.42rem);font-weight:700;letter-spacing:-.02em;
  text-shadow:0 0 26px rgba(255,157,77,.4)}
.brand h1 em{font-style:normal;color:var(--gold)}
.brand p{margin-top:.3rem;font-size:.54rem;letter-spacing:.3em;text-transform:uppercase;color:var(--dimmer)}
.uni-actions{display:flex;gap:8px}

/* 星球標籤（HTML 覆蓋 3D） */
#labels{position:absolute;inset:0}
.plabel{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:none;border:0;cursor:pointer;color:var(--text);padding:.3rem .5rem;border-radius:10px;
  transform:translate(-50%,-100%);transition:opacity .3s,filter .3s;white-space:nowrap;will-change:transform}
.plabel .n{font-family:var(--mono);font-weight:700;font-size:.82rem;letter-spacing:.02em;
  text-shadow:0 0 16px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.9)}
.plabel .s{font-size:.53rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);opacity:.9}
.plabel.locked{filter:saturate(.35) brightness(.78)}
.plabel.locked .s{color:var(--dimmer)}
.plabel.on{background:rgba(18,13,30,.55);border:1px solid var(--line);backdrop-filter:blur(8px)}
.plabel.on .n{color:var(--gold)}
.plabel:hover .n,.plabel:focus-visible .n{text-shadow:0 0 22px rgba(255,207,107,.9),0 1px 3px rgba(0,0,0,.9)}
.plabel small{font-size:.5rem;letter-spacing:.14em;color:var(--live)}

/* 資訊面板 */
.info{position:absolute;left:clamp(10px,3vw,44px);bottom:clamp(74px,13vh,104px);width:min(340px,86vw);
  background:var(--panel);border:1px solid var(--line-cool);border-radius:16px;padding:.9rem 1rem 1rem;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 22px 60px rgba(0,0,0,.5);
  opacity:0;transform:translateY(18px) scale(.98);transition:opacity .42s cubic-bezier(.2,1,.3,1),transform .42s cubic-bezier(.2,1,.3,1);
  pointer-events:none}
.info.on{opacity:1;transform:none;pointer-events:auto}
.info-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.badge{font-family:var(--mono);font-size:.53rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  padding:.22rem .5rem;border-radius:99px;border:1px solid rgba(99,230,168,.42);color:var(--live);background:rgba(99,230,168,.1)}
.badge.soon{border-color:rgba(160,120,255,.34);color:var(--dim);background:rgba(160,120,255,.08)}
.info .x{background:none;border:0;color:var(--dimmer);font-size:1.25rem;line-height:1;cursor:pointer;padding:0 .2rem}
.info .x:hover{color:var(--text)}
.info h2{font-family:var(--mono);font-size:1.42rem;font-weight:700;letter-spacing:-.02em;margin-top:.62rem;line-height:1.1}
.g-sub{margin-top:.28rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.tags{display:flex;flex-wrap:wrap;gap:5px;list-style:none;margin-top:.62rem}
.tags li{font-size:.6rem;padding:.2rem .48rem;border-radius:7px;background:rgba(140,110,255,.13);
  border:1px solid rgba(140,110,255,.2);color:var(--dim)}
.g-desc{margin-top:.7rem;font-size:.78rem;line-height:1.72;color:var(--dim)}
.info-foot{display:flex;align-items:center;gap:10px;margin-top:.9rem;flex-wrap:wrap}
.g-note{font-size:.6rem;color:var(--dimmer);letter-spacing:.06em}

/* 星球快速導覽 */
.chips{position:absolute;left:50%;bottom:clamp(52px,8vh,68px);transform:translateX(-50%);display:flex;gap:7px;
  max-width:min(96vw,760px);overflow-x:auto;padding:.3rem;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{display:flex;align-items:center;gap:.4rem;flex:0 0 auto;font-family:var(--sans);font-size:.72rem;font-weight:500;
  color:var(--dim);background:rgba(14,10,24,.6);border:1px solid rgba(140,110,255,.2);border-radius:99px;
  padding:.42rem .8rem;cursor:pointer;white-space:nowrap;backdrop-filter:blur(10px);
  transition:transform .18s cubic-bezier(.2,1,.3,1),color .2s,border-color .2s}
.chip i{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;flex:0 0 auto}
.chip:hover{transform:translateY(-2px);color:var(--text);border-color:var(--line)}
.chip.on{color:#0d0919;background:var(--gold);border-color:var(--gold);font-weight:700}
.chip.soon{opacity:.5}

.uni-hint{position:absolute;left:50%;bottom:clamp(20px,3.4vh,34px);transform:translateX(-50%);
  font-size:.66rem;color:var(--dimmer);letter-spacing:.04em;text-align:center;white-space:nowrap}
kbd{font-family:var(--mono);font-size:.6rem;padding:.08rem .28rem;border-radius:5px;
  background:rgba(140,110,255,.16);color:var(--dim);border:1px solid rgba(140,110,255,.18)}

/* ═══ 轉場 ═══ */
.warp-text{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:7;text-align:center;
  font-family:var(--mono);font-size:clamp(.72rem,2.6vw,1.02rem);font-weight:500;letter-spacing:.4em;
  text-transform:uppercase;color:#fff3d8;opacity:0;transition:opacity .5s;pointer-events:none;
  text-shadow:0 0 40px rgba(255,180,90,.8)}
.warp-text.on{opacity:1}

/* ═══ Toast ═══ */
#toasts{position:fixed;left:50%;top:7%;transform:translateX(-50%);z-index:11;display:flex;flex-direction:column;
  align-items:center;gap:7px;pointer-events:none}
.toast{background:var(--panel-2);border:1px solid var(--line-cool);border-radius:11px;padding:.5rem .9rem;
  font-size:.76rem;color:var(--text);backdrop-filter:blur(12px);box-shadow:0 12px 30px rgba(0,0,0,.44);
  animation:tin .32s cubic-bezier(.2,1.2,.3,1) both}
.toast.out{animation:tout .34s ease forwards}
@keyframes tin{from{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes tout{to{opacity:0;transform:translateY(-8px)}}

/* ═══ Boot / Error ═══ */
#boot{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:var(--void);
  transition:opacity .8s ease,visibility .8s}
#boot.off{opacity:0;visibility:hidden}
#boot h1{font-family:var(--mono);font-size:clamp(1.5rem,6vw,2.4rem);font-weight:700;letter-spacing:-.02em;text-align:center}
#boot h1 em{font-style:normal;color:var(--gold)}
#boot p{margin-top:.9rem;text-align:center;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--dimmer)}
#err{position:fixed;left:50%;top:50%;transform:translateX(-50%);z-index:40;display:none;max-width:82vw;
  text-align:center;color:var(--hot);font-size:.9rem;line-height:1.7}

/* ═══ 響應式 ═══ */
@media (max-width:820px){
  .gate-meta{top:auto;bottom:calc(100% + 10px);right:0;flex-direction:row;gap:14px}
  .gate-meta li{align-items:flex-end}
  .info{left:50%;transform:translate(-50%,18px) scale(.98);bottom:calc(100% - 100vh + 92px);
    width:min(520px,94vw);left:50%;bottom:96px}
  .info.on{transform:translateX(-50%)}
  .chips{bottom:auto;top:calc(var(--pad) + 58px);max-width:100vw;justify-content:flex-start;padding-inline:var(--pad)}
  .uni-hint{font-size:.6rem;white-space:normal;max-width:92vw}
  #muteBtn{bottom:auto;top:var(--pad);right:var(--pad)}
}
@media (max-height:520px){
  .lede{display:none}
  .title{font-size:clamp(2rem,8vw,3.2rem)}
  .uni-hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hole-btn .ring{animation:none;opacity:.3}
  .stage,.info,.chip,.btn{transition-duration:.01s}
}