/* ============================================================
   COMET TETHER · 彗尾引力
   ============================================================ */
@font-face{
  font-family:'Chakra Petch';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/chakrapetch-400.woff2') format('woff2');
}
@font-face{
  font-family:'Chakra Petch';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/chakrapetch-500.woff2') format('woff2');
}
@font-face{
  font-family:'Chakra Petch';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/chakrapetch-600.woff2') format('woff2');
}
@font-face{
  font-family:'Chakra Petch';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/chakrapetch-700.woff2') format('woff2');
}

:root{
  --bg:#04060e;
  --bg2:#080d1a;
  --ink:#eaf8ff;
  --muted:#92a7bd;
  --dim:#5d738b;
  --accent:#6ef3ff;
  --accent-2:#ff5fa2;
  --gold:#ffd166;
  --danger:#ff4d6d;
  --line:rgba(110,243,255,.17);
  --line-2:rgba(255,255,255,.08);
  --line-3:rgba(255,255,255,.14);
  --panel:rgba(8,14,26,.82);
  --panel-2:rgba(12,20,36,.72);
  --font:'Chakra Petch',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --zh:'PingFang SC','Hiragino Sans GB','Noto Sans SC','Microsoft YaHei',sans-serif;
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --sar:env(safe-area-inset-right,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{
  margin:0;padding:0;height:100%;width:100%;
  background:var(--bg);color:var(--ink);
  font-family:var(--font),var(--zh);
  overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  position:fixed;inset:0;overflow:hidden;
  user-select:none;-webkit-user-select:none;
  touch-action:manipulation;
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;touch-action:manipulation;}
button:focus{outline:none;}
button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
b,strong{font-weight:700;}
svg{display:block;}
.sprite{position:absolute;width:0;height:0;overflow:hidden;}
.icon{width:20px;height:20px;flex:none;}
.icon.inline{display:inline-block;vertical-align:-4px;width:16px;height:16px;margin-right:4px;}

#app{position:relative;width:100%;height:100%;height:100dvh;overflow:hidden;background:var(--bg);}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;}

#vignette{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse at 50% 46%,transparent 42%,rgba(0,0,0,.18) 72%,rgba(0,0,0,.58) 100%);
}
#danger{
  position:absolute;left:0;right:0;bottom:0;height:34%;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(to top,rgba(255,36,86,.38),rgba(255,60,100,.08) 45%,transparent 100%);
  transition:opacity .18s linear;
  mix-blend-mode:screen;
}
#flash{
  position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.9),rgba(160,250,255,.25) 45%,transparent 72%);
  mix-blend-mode:screen;
}

/* ============================================================
   HUD
   ============================================================ */
#hud{
  position:absolute;inset:0;z-index:10;pointer-events:none;
  display:flex;flex-direction:column;justify-content:space-between;
  opacity:0;transition:opacity .25s ease;
  padding-left:var(--sal);padding-right:var(--sar);
}
#hud.visible{opacity:1;}
.hud-top{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:start;
  padding:calc(var(--sat) + 14px) 16px 0;
}
.alt-block{justify-self:start;}
.hud-label{
  font-size:8.5px;letter-spacing:.22em;color:var(--dim);font-weight:600;
  white-space:nowrap;
}
.alt-value{
  display:flex;align-items:baseline;gap:3px;
  font-size:clamp(26px,7.4vw,36px);line-height:1;font-weight:600;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 22px rgba(110,243,255,.22);
  margin-top:2px;
}
.alt-value .unit{font-size:10px;letter-spacing:.12em;color:var(--muted);font-weight:500;}
.hud-sub{font-size:8px;letter-spacing:.14em;color:var(--dim);margin-top:4px;}
.score-block{justify-self:center;text-align:center;padding-top:1px;}
.score-value{
  font-size:clamp(20px,5.6vw,26px);line-height:1.1;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:.03em;
  margin-top:2px;
  text-shadow:0 0 18px rgba(110,243,255,.18);
}
.hud-btn{justify-self:end;background:rgba(5,10,20,.48);border-color:var(--line-2);}
.hud-btn:active{transform:scale(.94);}
.icon-btn{
  width:44px;height:44px;border-radius:13px;
  border:1px solid var(--line-2);background:rgba(8,14,26,.5);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink);transition:transform .12s ease,background .2s,border-color .2s;
}
.icon-btn:active{transform:scale(.93);background:rgba(110,243,255,.1);}
.icon-btn .icon{width:21px;height:21px;opacity:.9;}

.combo-pill{
  position:absolute;left:50%;top:calc(var(--sat) + 88px);
  transform:translate(-50%,-8px);
  min-width:132px;padding:7px 12px 6px;
  background:rgba(6,12,24,.82);border:1px solid rgba(110,243,255,.3);
  border-radius:999px;text-align:center;opacity:0;
  transition:opacity .18s ease,transform .18s ease;
  box-shadow:0 0 28px rgba(110,243,255,.12),inset 0 0 20px rgba(110,243,255,.05);
  backdrop-filter:blur(2px);
}
.combo-pill.is-on{opacity:1;transform:translate(-50%,0);}
.combo-main{display:flex;align-items:baseline;justify-content:center;gap:6px;font-variant-numeric:tabular-nums;}
#hud-combo-x{font-size:15px;font-weight:700;color:var(--accent);letter-spacing:.02em;}
.combo-word{font-size:7.5px;letter-spacing:.18em;color:var(--dim);}
#hud-combo-n{font-size:13px;font-weight:600;}
.combo-track{height:2px;background:rgba(255,255,255,.08);border-radius:2px;margin-top:5px;overflow:hidden;}
.combo-track i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--accent),var(--gold));border-radius:2px;transform-origin:left center;}

.hud-bottom{
  display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:14px;align-items:end;
  padding:34px 16px calc(var(--sab) + 14px);
  position:relative;
}
.hud-bottom::before{
  content:'';position:absolute;inset:0 0 0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,rgba(3,6,14,.92),rgba(3,6,14,.62) 55%,transparent);
}
.res-block{display:flex;flex-direction:column;gap:6px;min-width:0;}
.res-right{align-items:flex-end;text-align:right;}
#hud-pulse-n{color:var(--muted);letter-spacing:.06em;}
.pips{display:flex;gap:4px;align-items:center;height:10px;flex-wrap:nowrap;}
.pulse-pips .pip{
  width:13px;height:5px;border-radius:3px;background:rgba(255,255,255,.1);
  transition:background .15s,box-shadow .15s;
}
.pulse-pips .pip.on{background:var(--accent);box-shadow:0 0 8px rgba(110,243,255,.6);}
.shield-pips .pip{
  width:9px;height:9px;background:rgba(255,255,255,.09);
  transform:rotate(45deg);border-radius:2px;
  transition:background .15s,box-shadow .15s;
}
.shield-pips .pip.on{background:var(--gold);box-shadow:0 0 9px rgba(255,209,102,.55);}
.xp-block{min-width:0;padding-bottom:1px;}
.xp-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;font-size:8px;letter-spacing:.12em;color:var(--dim);font-variant-numeric:tabular-nums;gap:6px;}
#hud-level{color:var(--muted);font-weight:600;white-space:nowrap;}
#hud-xp-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.xp-track{height:4px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;position:relative;}
.xp-track i{
  display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,#3bd6ff,var(--accent) 60%,#d6fbff);
  box-shadow:0 0 10px rgba(110,243,255,.5);
  transition:width .18s ease;
}

.sector-banner{
  position:absolute;left:50%;top:27%;transform:translate(-50%,10px);
  font-size:clamp(14px,4.2vw,19px);letter-spacing:.3em;color:var(--ink);
  font-weight:600;text-align:center;text-transform:uppercase;
  opacity:0;pointer-events:none;white-space:nowrap;
  text-shadow:0 0 24px rgba(110,243,255,.4);
  transition:opacity .35s ease,transform .5s cubic-bezier(.2,.8,.2,1);
}
.sector-banner::before,.sector-banner::after{
  content:'';display:inline-block;width:26px;height:1px;vertical-align:middle;
  background:linear-gradient(90deg,transparent,var(--accent));margin:0 12px;opacity:.6;
}
.sector-banner::after{background:linear-gradient(90deg,var(--accent),transparent);}
.sector-banner.show{opacity:1;transform:translate(-50%,0);}
.sector-banner small{display:block;font-size:8px;letter-spacing:.32em;color:var(--muted);margin-top:5px;font-weight:400;}

.toast{
  position:absolute;left:50%;bottom:calc(var(--sab) + 92px);
  transform:translate(-50%,10px);
  max-width:min(86%,420px);padding:9px 15px;
  border-radius:999px;border:1px solid var(--line-2);
  background:rgba(4,9,18,.9);
  font-family:var(--zh);font-size:12px;line-height:1.35;letter-spacing:.02em;
  color:var(--ink);text-align:center;
  opacity:0;pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;
  box-shadow:0 8px 30px rgba(0,0,0,.3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.toast.show{opacity:1;transform:translate(-50%,0);}
.toast.accent{border-color:rgba(110,243,255,.35);}
.toast.gold{border-color:rgba(255,209,102,.38);color:#fff3d0;}

/* ============================================================
   SCREENS
   ============================================================ */
#screens{position:absolute;inset:0;z-index:20;pointer-events:none;}
.screen{
  position:absolute;inset:0;display:none;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  pointer-events:none;
}
.screen.active{display:flex;pointer-events:auto;animation:screenIn .28s cubic-bezier(.2,.8,.2,1) both;}
@keyframes screenIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.screen-title{
  padding:calc(var(--sat) + 14px) calc(18px + var(--sal)) calc(var(--sab) + 12px) calc(18px + var(--sar));
  background:transparent;
}
.title-scrim{
  position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(ellipse at 50% 34%,rgba(4,8,18,.1) 0%,rgba(4,8,18,.42) 52%,rgba(3,5,12,.82) 100%),
    linear-gradient(to bottom,rgba(3,5,12,.55),transparent 24%,transparent 56%,rgba(3,5,12,.88));
}
.safe{width:100%;max-width:462px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;}
.title-safe{padding:0 2px;}
.title-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.top-actions{display:flex;gap:8px;}
.kicker{
  display:flex;align-items:center;gap:7px;
  font-size:8.5px;font-weight:600;letter-spacing:.24em;color:var(--muted);
  text-transform:uppercase;white-space:nowrap;
}
.kicker.center{justify-content:center;}
.live-dot{
  width:5px;height:5px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px rgba(110,243,255,.1),0 0 10px rgba(110,243,255,.7);
  animation:live 2.6s ease-in-out infinite;
}
@keyframes live{0%,100%{opacity:.55;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}

.title-hero{
  flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(10px,4.5vh,46px) 0 clamp(12px,2.4vh,26px);
  min-height:0;text-align:center;
}
.emblem{
  width:clamp(94px,24vw,116px);height:clamp(94px,21vw,116px);
  margin-bottom:clamp(2px,.8vh,8px);
  filter:drop-shadow(0 8px 30px rgba(110,243,255,.12));
  animation:float 7s ease-in-out infinite;
}
.emblem svg{width:100%;height:100%;overflow:visible;}
.emblem-orbit{transform-origin:80px 80px;animation:spin 26s linear infinite;}
.emblem-glow{animation:corePulse 4s ease-in-out infinite;transform-origin:80px 80px;}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes corePulse{0%,100%{opacity:.72;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.wordmark{margin:0;display:flex;flex-direction:column;align-items:center;line-height:.9;}
.wm-a{
  font-size:clamp(11px,3.3vw,14px);font-weight:600;letter-spacing:.62em;
  color:var(--accent);padding-left:.62em;opacity:.92;
}
.wm-b{
  font-size:clamp(43px,13.2vw,62px);font-weight:700;letter-spacing:.015em;
  background:linear-gradient(180deg,#ffffff 10%,#d8fbff 52%,#85dce9 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 24px rgba(110,243,255,.18));
  padding-left:.04em;
}
.cn-title{
  font-family:var(--zh);font-size:11px;font-weight:500;letter-spacing:.66em;
  color:rgba(203,231,241,.65);margin-top:clamp(8px,1.6vh,14px);padding-left:.66em;
}
.tagline{
  font-family:var(--zh);font-size:clamp(11.5px,3.2vw,13px);line-height:1.65;
  color:var(--muted);margin:clamp(9px,1.8vh,14px) 0 0;letter-spacing:.06em;
}
.tagline-sub{
  display:block;font-family:var(--font);font-size:8px;letter-spacing:.28em;
  color:var(--dim);margin-top:7px;
}
.title-mid{margin-top:auto;display:flex;flex-direction:column;gap:12px;}
.record-strip{
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;
  padding:11px 6px;border:1px solid var(--line-2);border-radius:14px;
  background:rgba(6,11,22,.62);
  backdrop-filter:blur(2px);
}
.rec{min-width:0;text-align:center;padding:0 4px;}
.rec-label{display:block;font-size:7.5px;letter-spacing:.15em;color:var(--dim);margin-bottom:3px;white-space:nowrap;}
.rec b{
  display:block;font-size:clamp(14px,4vw,18px);font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rec b small{font-size:8px;color:var(--dim);margin-left:1px;font-weight:500;}
.rec-sep{width:1px;height:24px;background:var(--line-2);}

.cta-stack{display:flex;flex-direction:column;gap:8px;}
.btn-primary{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:12px;width:100%;min-height:62px;
  padding:0 16px;border-radius:16px;
  background:linear-gradient(100deg,#6ef3ff 0%,#b6faff 54%,#ffe6a3 100%);
  color:#04121a;text-align:left;
  box-shadow:0 12px 42px rgba(110,243,255,.18),0 2px 0 rgba(255,255,255,.34) inset;
  transition:transform .12s ease,box-shadow .2s ease,filter .2s;
}
.btn-primary::after{
  content:'';position:absolute;top:-60%;bottom:-60%;left:-40%;width:32%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);animation:sheen 5.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sheen{0%,64%{left:-45%;opacity:0}72%{opacity:.9}88%,100%{left:130%;opacity:0}}
.btn-primary:active{transform:scale(.982);filter:brightness(1.06);}
.bp-icon{
  width:36px;height:36px;border-radius:11px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(4,18,26,.13);border:1px solid rgba(4,18,26,.12);
}
.bp-icon .icon{width:19px;height:19px;}
.bp-copy{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.bp-copy b{font-family:var(--zh);font-size:16.5px;font-weight:700;letter-spacing:.08em;line-height:1.1;}
.bp-copy small{font-family:var(--font);font-size:7.5px;font-weight:700;letter-spacing:.24em;opacity:.56;}
.bp-arrow{font-size:28px;font-weight:300;line-height:1;opacity:.7;transform:translateY(-1px);}
.btn-primary.wide{max-width:100%;}
.btn-primary:disabled{opacity:.5;filter:grayscale(.5);}

.cta-row{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:8px;}
.btn-ghost{
  min-height:46px;padding:6px 8px;border-radius:12px;
  border:1px solid var(--line-2);background:rgba(8,14,26,.62);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  transition:background .2s,border-color .2s,transform .12s;
  min-width:0;
}
.btn-ghost:active{transform:scale(.97);background:rgba(110,243,255,.08);}
.bg-main{font-family:var(--zh);font-size:11.5px;font-weight:500;letter-spacing:.03em;white-space:nowrap;}
.bg-tag{font-family:var(--font);font-size:7px;letter-spacing:.18em;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.daily-btn{border-color:rgba(255,209,102,.18);}
.daily-btn .bg-tag{color:rgba(255,209,102,.72);}
.daily-btn.played{border-color:rgba(255,209,102,.34);}
.title-foot{
  display:flex;justify-content:space-between;gap:10px;padding-top:12px;
  font-size:7.5px;letter-spacing:.09em;color:var(--dim);opacity:.62;
  font-family:var(--font),var(--zh);
}
.title-foot span:first-child{font-family:var(--zh);letter-spacing:.04em;}

/* ============================================================
   SHEETS (hangar / howto / settings)
   ============================================================ */
.screen-sheet{
  background:
    radial-gradient(ellipse at 50% 0%,rgba(20,46,66,.36),transparent 55%),
    linear-gradient(180deg,rgba(4,8,16,.97),rgba(3,6,13,.99));
}
.sheet{
  width:100%;max-width:560px;margin:0 auto;min-height:100%;
  padding:calc(var(--sat) + 16px) calc(18px + var(--sal)) calc(var(--sab) + 26px) calc(18px + var(--sar));
  display:flex;flex-direction:column;
}
.sheet-head{
  display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:10px;
  margin-bottom:18px;
}
.sheet-title{text-align:center;}
.sheet-title h2{margin:3px 0 0;font-family:var(--zh);font-size:22px;font-weight:600;letter-spacing:.12em;}
.sheet-title .kicker{justify-content:center;font-size:7.5px;}
.head-pad{width:44px;}
.fine{font-family:var(--zh);font-size:10px;line-height:1.65;color:var(--dim);letter-spacing:.02em;margin:14px 0 0;}
.fine.center{text-align:center;}

/* manual */
.manual{display:flex;flex-direction:column;gap:8px;}
.manual-step{
  display:grid;grid-template-columns:25px 1fr 78px;gap:10px;align-items:center;
  padding:12px 12px 12px 10px;border-radius:14px;
  border:1px solid var(--line-2);background:rgba(9,16,30,.6);
}
.manual-step.perfect{border-color:rgba(110,243,255,.26);background:rgba(10,24,36,.66);}
.ms-num{font-size:11px;font-weight:600;color:var(--dim);letter-spacing:.06em;align-self:start;padding-top:2px;}
.ms-copy h3{margin:0 0 3px;font-family:var(--zh);font-size:13.5px;font-weight:600;letter-spacing:.04em;}
.ms-copy p{margin:0;font-family:var(--zh);font-size:10.5px;line-height:1.6;color:var(--muted);}
.ms-copy b{color:var(--accent);font-family:var(--font);letter-spacing:.08em;font-size:10px;}
.ms-demo{position:relative;width:78px;height:62px;border-radius:9px;background:rgba(3,7,14,.7);border:1px solid rgba(255,255,255,.05);overflow:hidden;flex:none;}
.d-anchor{position:absolute;width:16px;height:16px;border-radius:50%;border:1px solid rgba(110,243,255,.6);background:radial-gradient(circle at 35% 30%,#34525e,#0b141d);left:46px;top:12px;}
.d-probe{position:absolute;width:6px;height:6px;border-radius:50%;background:#eafcff;box-shadow:0 0 8px rgba(110,243,255,.9);}
.d-line{position:absolute;left:20px;top:44px;width:32px;height:1px;background:linear-gradient(90deg,transparent,rgba(110,243,255,.7));transform:rotate(-32deg);transform-origin:right center;}
.d-touch{position:absolute;left:14px;top:40px;width:13px;height:13px;border-radius:50%;border:1px solid rgba(110,243,255,.5);box-shadow:0 0 0 5px rgba(110,243,255,.05);}
.demo-hold .d-probe{left:24px;top:36px;}
.demo-orbit .d-orbit{position:absolute;left:34px;top:15px;width:42px;height:42px;border-radius:50%;border:1px dashed rgba(110,243,255,.3);}
.demo-orbit .d-anchor{left:47px;top:28px;}
.demo-orbit .d-probe{left:62px;top:20px;}
.demo-orbit .d-orbit::after{content:'';position:absolute;inset:9px;border-radius:50%;border:1px solid rgba(255,255,255,.04);}
.demo-perfect .d-arc{position:absolute;left:32px;top:6px;width:36px;height:36px;border-radius:50%;border:3px solid transparent;border-top-color:rgba(110,243,255,.9);border-left-color:rgba(110,243,255,.55);transform:rotate(-28deg);filter:drop-shadow(0 0 5px rgba(110,243,255,.5));}
.demo-perfect .d-anchor{left:42px;top:14px;}
.demo-perfect .d-probe{left:35px;top:26px;background:#b9ffd8;box-shadow:0 0 8px rgba(110,243,255,.9);}
.demo-perfect .d-arrow{position:absolute;left:22px;top:30px;width:1px;height:22px;background:linear-gradient(to top,transparent,rgba(185,255,216,.8));transform:rotate(18deg);}
.demo-perfect .d-arrow::before{content:'';position:absolute;top:-1px;left:-3px;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-bottom:5px solid rgba(185,255,216,.8);}
.demo-danger .d-tail{position:absolute;left:-10%;right:-10%;bottom:-26px;height:40px;border-radius:50%;background:radial-gradient(ellipse at 50% 80%,rgba(255,60,100,.55),rgba(255,60,100,.1) 55%,transparent 72%);filter:blur(3px);}
.demo-danger .d-spark{position:absolute;left:48px;top:15px;width:5px;height:5px;background:var(--gold);border-radius:50%;box-shadow:0 0 7px rgba(255,209,102,.9);}
.tip-box{
  margin:12px 0;padding:11px 12px;border-left:2px solid rgba(110,243,255,.4);
  background:rgba(110,243,255,.04);border-radius:0 8px 8px 0;
  font-family:var(--zh);font-size:10.5px;line-height:1.7;color:var(--muted);
}
.tip-box b{color:var(--ink);margin-right:4px;}
.tip-box div+div{margin-top:4px;}

/* hangar */
.probe-list{display:flex;flex-direction:column;gap:10px;}
.probe-card{
  position:relative;display:grid;grid-template-columns:56px 1fr;gap:13px;
  padding:13px;border-radius:15px;
  border:1px solid var(--line-2);background:rgba(9,16,30,.62);
  transition:border-color .2s,background .2s,opacity .2s;
}
.probe-card.selected{
  border-color:rgba(110,243,255,.45);background:rgba(11,27,40,.7);
  box-shadow:inset 0 0 34px rgba(110,243,255,.055);
}
.probe-card.locked{opacity:.58;}
.probe-orb{
  width:54px;height:54px;border-radius:50%;position:relative;flex:none;align-self:start;
  background:radial-gradient(circle at 34% 28%,#f6feff 0%,var(--pc) 22%,rgba(10,24,34,.9) 62%,#050a12 100%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 0 24px color-mix(in srgb,var(--pc) 30%,transparent);
}
.probe-orb::before{content:'';position:absolute;inset:-7px;border-radius:50%;border:1px dashed color-mix(in srgb,var(--pc) 35%,transparent);}
.probe-orb::after{content:'';position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:#fff;box-shadow:0 0 10px var(--pc);}
.probe-card.locked .probe-orb{filter:grayscale(.8);}
.probe-info{min-width:0;}
.pc-top{display:flex;align-items:center;gap:8px;justify-content:space-between;}
.pc-name{margin:0;font-family:var(--zh);font-size:14.5px;font-weight:600;letter-spacing:.06em;display:flex;align-items:baseline;gap:7px;min-width:0;}
.pc-code{font-family:var(--font);font-size:7.5px;letter-spacing:.16em;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pc-desc{margin:3px 0 8px;font-family:var(--zh);font-size:10px;line-height:1.5;color:var(--muted);}
.pc-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.ps{min-width:0;}
.ps span{display:flex;justify-content:space-between;font-size:7px;letter-spacing:.1em;color:var(--dim);margin-bottom:3px;}
.ps span b{color:var(--muted);font-weight:500;}
.ps-track{height:2px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;}
.ps-track i{display:block;height:100%;background:linear-gradient(90deg,rgba(110,243,255,.5),var(--accent));border-radius:2px;}
.pselect{
  flex:none;align-self:center;font-family:var(--zh);font-size:9.5px;letter-spacing:.06em;
  padding:5px 10px;border-radius:8px;border:1px solid var(--line-2);
  color:var(--muted);background:rgba(255,255,255,.02);white-space:nowrap;
}
.pselect.on{color:var(--accent);border-color:rgba(110,243,255,.35);background:rgba(110,243,255,.07);}
.pselect[disabled]{opacity:.5;cursor:not-allowed;}
.pc-lock{margin-top:5px;font-size:8px;color:var(--gold);letter-spacing:.06em;font-family:var(--zh);}
.unlock-card{
  margin-top:12px;padding:12px 14px;border-radius:13px;
  border:1px dashed var(--line-2);background:rgba(8,14,26,.4);
}
.uc-top{display:flex;justify-content:space-between;gap:10px;font-family:var(--zh);font-size:10px;color:var(--muted);}
.uc-top b{color:var(--ink);font-weight:500;}
.uc-track{height:3px;border-radius:3px;background:rgba(255,255,255,.07);margin:9px 0 6px;overflow:hidden;}
.uc-track i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--gold),#ffe9b0);transition:width .4s ease;}
.uc-sub{font-size:8px;letter-spacing:.05em;color:var(--dim);font-family:var(--zh);}
.meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;}
.meta-item{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.045);}
.meta-item span{display:block;font-family:var(--zh);font-size:8.5px;color:var(--dim);margin-bottom:3px;letter-spacing:.05em;}
.meta-item b{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;}
.meta-item b small{font-size:8px;color:var(--dim);font-weight:500;margin-left:1px;}
.record-block{margin-top:14px;}
.rb-head{display:flex;justify-content:space-between;font-size:8px;letter-spacing:.16em;color:var(--dim);padding:0 2px 7px;border-bottom:1px solid rgba(255,255,255,.05);}
.record-list{display:flex;flex-direction:column;}
.record-row{
  display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;
  padding:9px 2px;border-bottom:1px solid rgba(255,255,255,.04);font-size:11px;
}
.record-row .rr-meta{font-family:var(--font);font-size:8px;letter-spacing:.08em;color:var(--dim);white-space:nowrap;}
.record-row .rr-score{font-weight:600;font-variant-numeric:tabular-nums;font-size:12.5px;}
.record-row .rr-score small{font-size:7.5px;color:var(--dim);font-weight:400;margin-left:3px;}
.empty-record{padding:16px 2px;font-family:var(--zh);font-size:10px;color:var(--dim);text-align:center;}

/* settings */
.setting-list{display:flex;flex-direction:column;gap:8px;}
.setting-row{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:12px 13px;border-radius:13px;border:1px solid var(--line-2);
  background:rgba(9,16,30,.55);text-align:left;
  transition:background .2s,border-color .2s;
}
.setting-row:active{background:rgba(110,243,255,.05);}
.sr-icon{width:32px;height:32px;border-radius:9px;background:rgba(110,243,255,.06);display:flex;align-items:center;justify-content:center;flex:none;color:var(--muted);}
.sr-icon .icon{width:17px;height:17px;}
.sr-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.sr-copy b{font-family:var(--zh);font-size:12px;font-weight:500;letter-spacing:.03em;}
.sr-copy small{font-family:var(--zh);font-size:9px;color:var(--dim);line-height:1.45;}
.switch{width:42px;height:24px;border-radius:99px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.06);position:relative;flex:none;transition:background .2s;}
.switch i{position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#7e8fa3;transition:transform .2s cubic-bezier(.2,.8,.2,1),background .2s;box-shadow:0 1px 3px rgba(0,0,0,.3);}
.setting-row[aria-checked="true"] .switch{background:rgba(110,243,255,.22);border-color:rgba(110,243,255,.2);}
.setting-row[aria-checked="true"] .switch i{transform:translateX(18px);background:var(--accent);box-shadow:0 0 10px rgba(110,243,255,.55);}
.setting-row[aria-checked="true"] .sr-icon{color:var(--accent);background:rgba(110,243,255,.09);}
.danger-zone{
  margin-top:18px;display:flex;align-items:center;gap:12px;justify-content:space-between;
  padding:13px;border-radius:13px;border:1px solid rgba(255,77,109,.16);background:rgba(255,77,109,.035);
}
.dz-copy{display:flex;flex-direction:column;gap:3px;min-width:0;}
.dz-copy b{font-family:var(--zh);font-size:11.5px;font-weight:500;color:#ffb3c1;}
.dz-copy small{font-family:var(--zh);font-size:8.5px;color:var(--dim);line-height:1.45;}
.btn-danger{
  flex:none;font-family:var(--zh);font-size:10px;padding:8px 12px;border-radius:9px;
  border:1px solid rgba(255,77,109,.3);color:#ff97aa;background:rgba(255,77,109,.06);
}
.btn-danger.confirm{background:rgba(255,77,109,.16);color:#fff;}

/* ============================================================
   MODALS
   ============================================================ */
.screen-modal{
  align-items:center;justify-content:center;
  padding:calc(var(--sat) + 16px) calc(18px + var(--sal)) calc(var(--sab) + 16px) calc(var(--sar));
  background:rgba(3,6,13,.8);
  animation:modalFade .2s ease both;
}
@keyframes modalFade{from{opacity:0}to{opacity:1}}
.modal{
  width:100%;max-width:400px;text-align:center;
  padding:24px 20px 20px;border-radius:22px;
  background:linear-gradient(180deg,rgba(15,26,44,.94),rgba(6,11,21,.98));
  border:1px solid var(--line-3);
  box-shadow:0 30px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05);
  animation:modalIn .26s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.modal-title{font-family:var(--zh);font-size:25px;font-weight:600;letter-spacing:.14em;margin:6px 0 16px;}
.pause-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:18px;}
.pause-stats div{padding:9px 4px;border-radius:10px;background:rgba(255,255,255,.025);}
.pause-stats span{display:block;font-family:var(--zh);font-size:8px;color:var(--dim);margin-bottom:3px;}
.pause-stats b{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;}
.pause-stats b small{font-size:7.5px;color:var(--dim);margin-left:1px;font-weight:400;}
.modal-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px;}
.text-btn{
  display:inline-block;margin-top:14px;padding:8px 10px;
  font-family:var(--zh);font-size:10.5px;color:var(--dim);letter-spacing:.06em;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
  align-self:center;
}
.text-btn:active{color:var(--accent);border-color:rgba(110,243,255,.3);}

/* upgrade */
.upgrade-wrap{
  width:100%;max-width:500px;padding:4px;
  animation:modalIn .28s cubic-bezier(.2,.8,.2,1) both;
}
.upgrade-title{font-family:var(--zh);font-size:26px;font-weight:600;letter-spacing:.14em;margin:5px 0 3px;text-align:center;}
.upgrade-sub{text-align:center;font-size:8px;letter-spacing:.14em;color:var(--dim);margin-bottom:14px;}
.upgrade-sub b{color:var(--accent);font-weight:600;}
.up-cards{display:flex;flex-direction:column;gap:9px;}
.up-card{
  display:grid;grid-template-columns:46px 1fr 22px;gap:12px;align-items:center;
  min-height:82px;padding:12px 13px;text-align:left;
  border-radius:15px;border:1px solid var(--line-2);
  background:linear-gradient(120deg,rgba(13,23,40,.94),rgba(7,12,23,.94));
  transition:transform .12s ease,border-color .2s,background .2s;
  animation:cardIn .3s cubic-bezier(.2,.8,.2,1) both;
}
.up-card:nth-child(2){animation-delay:.04s;}
.up-card:nth-child(3){animation-delay:.08s;}
@keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.up-card:active{transform:scale(.985);background:rgba(110,243,255,.06);}
.up-card.rarity-common{border-color:rgba(110,243,255,.2);}
.up-card.rarity-rare{border-color:rgba(255,209,102,.24);}
.up-card.rarity-epic{border-color:rgba(255,95,162,.28);}
.up-icon{
  width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:rgba(110,243,255,.06);border:1px solid rgba(110,243,255,.1);flex:none;
  color:var(--accent);
}
.rarity-rare .up-icon{background:rgba(255,209,102,.07);border-color:rgba(255,209,102,.16);color:var(--gold);}
.rarity-epic .up-icon{background:rgba(255,95,162,.07);border-color:rgba(255,95,162,.16);color:var(--accent-2);}
.up-icon svg{width:23px;height:23px;}
.up-copy{min-width:0;display:flex;flex-direction:column;gap:2px;}
.up-copy b{font-family:var(--zh);font-size:14px;font-weight:600;letter-spacing:.04em;}
.up-copy small{font-family:var(--zh);font-size:10px;line-height:1.45;color:var(--muted);}
.up-copy em{font-style:normal;font-family:var(--font);font-size:7.5px;letter-spacing:.12em;color:var(--dim);margin-top:3px;}
.up-plus{font-size:20px;font-weight:300;color:var(--dim);text-align:center;}
.up-card:active .up-plus{color:var(--accent);}
.rarity-tag{
  position:absolute;right:12px;top:10px;font-size:6.5px;letter-spacing:.16em;color:var(--dim);
}

/* game over */
.over-wrap{
  width:100%;max-width:470px;padding:6px;text-align:center;
  animation:modalIn .3s cubic-bezier(.2,.8,.2,1) both;
}
.over-head{position:relative;}
.over-title{font-family:var(--zh);font-size:24px;font-weight:600;letter-spacing:.16em;margin:6px 0 4px;}
.record-badge{
  display:inline-block;margin-top:6px;padding:3px 11px;border-radius:999px;
  font-size:8px;font-weight:700;letter-spacing:.2em;
  color:#2a1c00;background:linear-gradient(90deg,#ffe3a0,#ffd166);
  box-shadow:0 0 24px rgba(255,209,102,.3);
  animation:badgePop .5s cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes badgePop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.record-badge[hidden]{display:none;}
.final-score{padding:14px 0 4px;}
.final-score>span{display:block;font-size:8px;letter-spacing:.3em;color:var(--dim);}
.final-score b{
  display:block;font-size:clamp(46px,14vw,64px);line-height:1;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
  background:linear-gradient(180deg,#fff,#c6f9ff 60%,#69cfe0);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 30px rgba(110,243,255,.16));
  margin-top:2px;
}
.over-breakdown{font-size:8px;letter-spacing:.1em;color:var(--dim);margin:7px 0 14px;font-family:var(--font),var(--zh);}
.over-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px;}
.over-stats div{padding:9px 4px;border-radius:11px;background:rgba(255,255,255,.027);border:1px solid rgba(255,255,255,.04);}
.over-stats span{display:block;font-family:var(--zh);font-size:8px;color:var(--dim);margin-bottom:3px;white-space:nowrap;}
.over-stats b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;}
.over-stats b small{font-size:7.5px;color:var(--dim);font-weight:400;margin-left:1px;}
.unlock-note{
  display:none;margin:0 0 12px;padding:9px 12px;border-radius:11px;
  border:1px solid rgba(255,209,102,.24);background:rgba(255,209,102,.05);
  font-family:var(--zh);font-size:10px;color:#ffe9b0;line-height:1.5;
}
.unlock-note.show{display:block;animation:screenIn .3s ease both;}
.daily-note{display:none;margin:0 0 12px;font-size:9px;letter-spacing:.08em;color:var(--muted);}
.daily-note.show{display:block;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-height:700px){
  .title-hero{padding:6px 0 10px;}
  .emblem{width:76px;height:76px;}
  .wm-b{font-size:clamp(38px,12vw,50px);}
  .cn-title{margin-top:7px;}
  .tagline{margin-top:7px;font-size:11px;}
  .record-strip{padding:8px 4px;}
  .rec b{font-size:14px;}
  .btn-primary{min-height:56px;}
  .cta-row .btn-ghost{min-height:42px;}
  .title-foot{padding-top:8px;}
  .combo-pill{top:calc(var(--sat) + 82px);}
  .up-card{min-height:68px;padding:9px 11px;}
  .up-icon{width:40px;height:40px;}
  .up-copy b{font-size:12.5px;}
  .up-copy small{font-size:9.5px;}
  .over-stats div{padding:7px 3px;}
  .final-score{padding-top:8px;}
}
@media (max-height:600px){
  .emblem{display:none;}
  .title-hero{padding-top:2px;}
  .tagline-sub{display:none;}
  .title-foot{display:none;}
  .hud-bottom{padding-top:18px;}
  .sector-banner{top:21%;}
  .manual-step{padding:9px;grid-template-columns:22px 1fr 64px;}
  .ms-demo{width:64px;height:52px;transform:scale(.92);}
  .tip-box{margin:8px 0;}
  .modal{padding:18px 16px 16px;}
  .pause-stats{margin-bottom:12px;}
  .over-stats{margin-bottom:10px;}
  .over-breakdown{margin-bottom:10px;}
}
@media (orientation:landscape) and (max-height:560px){
  .screen-title{padding-top:calc(var(--sat) + 8px);padding-bottom:calc(var(--sab) + 8px);}
  .title-safe{max-width:820px;height:100%;display:grid;grid-template-columns:1.08fr 1fr;grid-template-rows:auto 1fr auto;column-gap:26px;align-items:center;}
  .title-top{grid-column:1/3;grid-row:1;align-self:start;}
  .title-hero{grid-column:1;grid-row:2;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;gap:2px;padding:0;min-height:0;}
  .title-mid{grid-column:2;grid-row:2;margin:0;align-self:center;justify-content:center;gap:9px;}
  .title-foot{grid-column:1/3;grid-row:3;display:flex;padding-top:6px;}
  .emblem{display:block;width:66px;height:66px;margin:0 0 0;flex:none;}
  .title-hero .wordmark{align-items:flex-start;}
  .wm-a{font-size:9px;letter-spacing:.58em;}
  .wm-b{font-size:34px;}
  .cn-title{display:block;font-size:9.5px;margin-top:7px;letter-spacing:.6em;align-self:flex-start;}
  .tagline{display:block;font-size:10.5px;margin-top:5px;line-height:1.45;}
  .tagline-sub{display:none;}
  .record-strip{padding:8px 4px;}
  .cta-stack{gap:7px;}
  .btn-primary{min-height:50px;}
  .btn-primary .bp-copy b{font-size:15px;}
  .cta-row .btn-ghost{min-height:40px;}
  .hud-top{padding-top:calc(var(--sat) + 8px);}
  .hud-bottom{padding-bottom:calc(var(--sab) + 8px);padding-top:12px;}
  .combo-pill{top:calc(var(--sat) + 66px);}
  .alt-value{font-size:26px;}
  .sector-banner{top:56%;font-size:12px;}
  .sector-banner small{font-size:7px;}
  .toast{bottom:calc(var(--sab) + 64px);font-size:11px;padding:7px 12px;}
  .screen-modal{padding:6px 10px;}
  .modal{padding:14px 16px;max-width:380px;}
  .modal-title{font-size:21px;margin-bottom:9px;}
  .pause-stats{margin-bottom:10px;}
  .pause-stats div{padding:6px 4px;}
  .up-card{min-height:54px;padding:6px 10px;grid-template-columns:38px 1fr 18px;}
  .up-icon{width:34px;height:34px;}
  .up-copy b{font-size:12px;}
  .up-copy small{font-size:9px;}
  .up-copy em{display:none;}
  .upgrade-title{font-size:21px;}
  .upgrade-sub{margin-bottom:7px;}
  .up-cards{gap:5px;}
  .upgrade-wrap{max-width:560px;}
  .over-wrap{max-width:720px;}
  .over-head{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;}
  .over-title{font-size:20px;margin:0;}
  .record-badge{margin:0;}
  .final-score{padding:4px 0 0;}
  .final-score b{font-size:40px;}
  .over-breakdown{margin:3px 0 8px;font-size:7.5px;}
  .over-stats{grid-template-columns:repeat(6,1fr);gap:5px;margin-bottom:8px;}
  .over-stats div{padding:6px 2px;}
  .over-stats b{font-size:13px;}
  .over-stats span{font-size:7px;}
  .over-wrap .btn-primary{min-height:46px;}
  .over-wrap .modal-row{margin-top:6px;}
  .over-wrap .modal-row .btn-ghost{min-height:38px;}
  .over-wrap .fine{margin-top:7px;font-size:9px;}
  .unlock-note,.daily-note{margin-bottom:6px;padding:5px 10px;font-size:9px;}
  .sheet{max-width:720px;}
  .upgrade-wrap .text-btn{margin-top:6px;padding:4px;}
}
@media (min-width:700px) and (min-height:700px){
  .title-safe{max-width:480px;}
  .sheet{max-width:600px;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}
body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after{
  animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;
}

/* engine additions */
#hud .icon-btn{pointer-events:auto;}
.pulse-pips .pip.chg{
  background:linear-gradient(90deg,var(--accent) var(--p,0%),rgba(255,255,255,.09) 0);
  box-shadow:0 0 6px rgba(110,243,255,.25);
}
#danger{will-change:opacity;}
#flash{will-change:opacity;}
.combo-pill{will-change:transform,opacity;}
#btnShare{flex-direction:row;gap:6px;}
#btnShare .icon{margin-right:0;}
.upgrade-wrap .text-btn{align-self:center;}

/* wide screens: keep the HUD close to the centred play strip */
@media (min-width:820px){
  .hud-top,.hud-bottom{width:100%;max-width:760px;margin-left:auto;margin-right:auto;}
}