/* ============================================================
   星际大战 · FORCE STRIKE — 原力反击
   史诗太空歌剧视觉系统
   ============================================================ */

:root {
  --space-0: #01030a;
  --space-1: #040a18;
  --space-2: #0a1630;
  --cyan:   #7ff7ff;
  --holo:   #3fd0ff;
  --green:  #4dff9e;
  --green-d:#19c96f;
  --red:    #ff3b5c;
  --red-d:  #a31233;
  --amber:  #ffd76a;
  --gold:   #ffe9a3;
  --dim:    #7c93b8;
  --dim-2:  #46587a;
  --font-disp: 'Orbitron','Noto Sans SC',sans-serif;
  --font-crawl:'Cinzel','Noto Sans SC',serif;
  --font-body: 'Noto Sans SC','PingFang SC',system-ui,sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }

html,body { width:100%; height:100%; overflow:hidden; background:var(--space-0); }
body { font-family:var(--font-body); color:#dfe9ff; -webkit-font-smoothing:antialiased; }

#stage { position:fixed; inset:0; overflow:hidden; background:radial-gradient(120% 120% at 50% 20%, #060d22 0%, #02050f 45%, #01030a 100%); }
#game { position:absolute; inset:0; width:100%; height:100%; display:block; cursor:crosshair; }

/* ---------- 氛围层 ---------- */
.fx { position:absolute; inset:0; pointer-events:none; }

/* 扫描线 */
.fx-scan {
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,0.028) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
  animation:scan-drift 9s linear infinite;
  opacity:.7;
}
@keyframes scan-drift { from{background-position-y:0} to{background-position-y:120px} }

/* 暗角 */
.fx-vignette { background:radial-gradient(120% 100% at 50% 42%, transparent 52%, rgba(0,0,0,.55) 82%, rgba(0,0,0,.85) 100%); }

/* 胶片颗粒 */
.fx-grain {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity:.05;
  animation:grain-shift .55s steps(4) infinite;
}
@keyframes grain-shift { 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-2%)} 100%{transform:translate(0,0)} }

.hidden { display:none !important; }

/* ============================================================
   开场爬行文字
   ============================================================ */
#crawl { z-index:30; display:flex; flex-direction:column; align-items:center; cursor:pointer; background:#000; }
#crawl .crawl-faraway {
  margin-top:15vh; font-family:var(--font-crawl); font-weight:700; font-size:clamp(14px,2.6vh,22px);
  letter-spacing:.22em; text-indent:.22em; color:#7fb0ff; text-align:center; opacity:0;
  text-shadow:0 0 18px rgba(77,143,255,.55);
  animation:fade-in 3s ease .3s forwards;
}
#crawl .crawl-stage {
  position:absolute; top:0; left:0; right:0; bottom:0;
  perspective:320px; overflow:hidden;
  display:flex; justify-content:center;
}
#crawl .crawl-text {
  position:absolute; top:78%; width:min(820px,88vw); text-align:center;
  color:var(--amber); font-size:clamp(15px,2.6vw,26px); line-height:1.9;
  transform:rotateX(24deg) translateZ(0);
  transform-origin:50% 100%;
  animation:crawl-scroll 46s linear 3.6s both;
}
#crawl .crawl-text h2 { font-family:var(--font-crawl); font-weight:900; font-size:2.4em; letter-spacing:.28em; text-indent:.28em; text-shadow:0 0 24px rgba(255,214,106,.35); }
#crawl .crawl-text h3 { font-family:var(--font-crawl); font-weight:700; font-size:1.35em; letter-spacing:.5em; text-indent:.5em; margin:1.2em 0 2.6em; color:var(--gold); }
#crawl .crawl-text p { margin:.9em 0; font-weight:400; }
#crawl .crawl-text .crawl-em { font-weight:700; letter-spacing:.12em; }
@keyframes crawl-scroll {
  0%   { transform:rotateX(24deg) translateZ(0); opacity:0; }
  3%   { opacity:1; }
  100% { transform:rotateX(24deg) translateZ(-2400px); opacity:0; }
}
@keyframes fade-in { to { opacity:1; } }
#crawl .crawl-hint {
  position:absolute; bottom:6vh; font-family:var(--font-disp); font-size:11px;
  letter-spacing:.5em; text-indent:.5em; color:var(--dim); opacity:0;
  animation:fade-in 1s ease 14s forwards, hint-pulse 2.4s ease 14s infinite;
}
@keyframes hint-pulse { 0%,100%{opacity:.35} 50%{opacity:.9} }

/* ============================================================
   主菜单
   ============================================================ */
#menu { z-index:20; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(90% 70% at 50% 38%, rgba(20,45,95,.42) 0%, rgba(2,6,18,.72) 60%, rgba(1,3,10,.94) 100%); }
.menu-inner { text-align:center; animation:menu-rise 1.1s cubic-bezier(.16,1,.3,1) both; padding:0 20px; }
@keyframes menu-rise { from { opacity:0; transform:translateY(34px) scale(.985); } to { opacity:1; transform:none; } }

.menu-kicker { font-family:var(--font-disp); font-size:11px; letter-spacing:.55em; text-indent:.55em; color:var(--holo); margin-bottom:22px;
  text-shadow:0 0 14px rgba(63,208,255,.6); opacity:.9; }

.menu-title { margin-bottom:20px; }
.menu-title .t-english {
  display:block; font-family:var(--font-disp); font-weight:900; font-size:clamp(40px,9.5vw,104px);
  line-height:1.02; letter-spacing:.06em; color:#fff;
  background:linear-gradient(180deg,#ffffff 0%,#bfe3ff 38%,#5fa8ff 55%,#123a7a 78%,#7fb0ff 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 26px rgba(80,160,255,.45)) drop-shadow(0 4px 0 rgba(0,10,30,.9));
  animation:title-flicker 7s linear infinite;
}
@keyframes title-flicker { 0%,94%,100%{opacity:1} 95%{opacity:.82} 96%{opacity:1} 97%{opacity:.9} 98%{opacity:1} }
.menu-title .t-chinese {
  display:block; margin-top:14px; font-family:var(--font-body); font-weight:500;
  font-size:clamp(15px,2.6vw,24px); letter-spacing:.72em; text-indent:.72em; color:var(--dim);
}

/* 光剑分割线 */
.saber { display:flex; align-items:center; justify-content:center; gap:0; margin:26px auto 30px; width:min(560px,80vw); }
.saber::before,.saber::after { content:""; height:1px; flex:1;
  background:linear-gradient(to right, transparent, rgba(77,255,158,.45)); }
.saber::after { background:linear-gradient(to left, transparent, rgba(77,255,158,.45)); }
.saber-blade {
  position:relative; width:190px; height:4px; border-radius:2px; margin:0 14px;
  background:linear-gradient(90deg, rgba(120,255,200,.0), var(--green) 20%, #eafff2 50%, var(--green) 80%, rgba(120,255,200,0));
  box-shadow:0 0 8px rgba(77,255,158,.9), 0 0 22px rgba(77,255,158,.55), 0 0 46px rgba(77,255,158,.3);
}
.saber-blade::after { content:""; position:absolute; left:-26px; top:50%; width:26px; height:14px; transform:translateY(-50%);
  background:linear-gradient(90deg,#8a5a22,#d9a44f); border-radius:3px 0 0 3px;
  box-shadow:inset -3px 0 6px rgba(0,0,0,.6); }
@keyframes saber-ignite { from { transform:scaleX(0); opacity:0; } to { transform:scaleX(1); opacity:1; } }
.saber-blade { transform-origin:left center; animation:saber-ignite .8s cubic-bezier(.2,.9,.3,1) .25s both; }

/* 按钮 */
.btn {
  position:relative; border:none; cursor:pointer; color:#eaffff;
  font-family:var(--font-disp); background:transparent; overflow:hidden;
  transition:transform .18s ease, box-shadow .3s ease, background .3s ease;
}
.btn-start {
  min-width:300px; padding:17px 46px 15px; border-radius:4px;
  border:1px solid rgba(127,247,255,.55);
  background:linear-gradient(180deg, rgba(63,208,255,.16), rgba(20,60,120,.22));
  clip-path:polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  box-shadow:0 0 22px rgba(63,208,255,.25), inset 0 0 24px rgba(63,208,255,.12);
}
.btn-start::before { content:""; position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 30%, rgba(160,245,255,.5) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .7s ease; }
.btn-start:hover::before { transform:translateX(120%); }
.btn-start:hover { background:linear-gradient(180deg, rgba(63,208,255,.32), rgba(30,90,170,.4)); box-shadow:0 0 38px rgba(63,208,255,.5), inset 0 0 30px rgba(63,208,255,.25); transform:translateY(-2px); }
.btn-main { display:block; font-weight:700; font-size:21px; letter-spacing:.42em; text-indent:.42em; }
.btn-sub { display:block; margin-top:7px; font-size:10px; letter-spacing:.34em; text-indent:.34em; color:var(--holo); }
.btn-small { padding:12px 30px 11px; border:1px solid rgba(127,247,255,.45); border-radius:3px;
  font-size:13px; letter-spacing:.3em; text-indent:.3em; color:#cfeaff;
  background:rgba(20,60,110,.18); box-shadow:0 0 14px rgba(63,208,255,.15); }
.btn-small:hover { background:rgba(63,208,255,.2); box-shadow:0 0 24px rgba(63,208,255,.4); transform:translateY(-1px); }
.btn-ghost { border-color:rgba(255,255,255,.18); background:transparent; color:var(--dim); box-shadow:none; }
.btn-ghost:hover { color:#dfe9ff; border-color:rgba(255,255,255,.4); box-shadow:0 0 18px rgba(255,255,255,.12); background:rgba(255,255,255,.05); }

/* 菜单统计 */
.menu-stats { display:flex; justify-content:center; gap:44px; margin:34px 0 30px; }
.stat { text-align:center; }
.stat-label { display:block; font-family:var(--font-disp); font-size:10px; letter-spacing:.4em; text-indent:.4em; color:var(--dim-2); margin-bottom:8px; }
.stat-value { font-family:var(--font-disp); font-weight:700; font-size:26px; color:var(--amber);
  text-shadow:0 0 18px rgba(255,215,106,.5); }

/* 操作指引 */
.controls { width:min(560px,86vw); margin:0 auto; padding:18px 22px;
  border:1px solid rgba(124,147,184,.22); border-radius:3px;
  background:rgba(8,16,36,.5); backdrop-filter:blur(2px); }
.controls-title { font-family:var(--font-disp); font-size:10px; letter-spacing:.5em; text-indent:.5em; color:var(--holo); text-align:center; margin-bottom:14px; opacity:.85; }
.controls-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.ctrl { text-align:center; }
.ctrl kbd { display:inline-block; min-width:44px; padding:6px 10px; border-radius:4px;
  font-family:var(--font-disp); font-size:12px; color:#eaffff;
  border:1px solid rgba(127,247,255,.35); border-bottom-width:3px;
  background:linear-gradient(180deg, rgba(63,208,255,.14), rgba(10,30,60,.3));
  box-shadow:0 0 10px rgba(63,208,255,.12); margin-bottom:7px; }
.ctrl span { display:block; font-size:12px; color:var(--dim); letter-spacing:.1em; }

.menu-bless { margin-top:34px; font-family:var(--font-crawl); font-size:12px; letter-spacing:.5em; text-indent:.5em; color:var(--dim); opacity:.75; }

/* ============================================================
   HUD
   ============================================================ */
#hud { position:absolute; inset:0; z-index:12; pointer-events:none; font-family:var(--font-disp); }
.hud-top { position:absolute; top:0; left:0; right:0; padding:16px 22px 0;
  display:flex; justify-content:space-between; align-items:flex-start; }
.hud-left,.hud-right { min-width:150px; }
.hud-label { display:block; font-size:9px; letter-spacing:.42em; text-indent:.42em; color:var(--dim-2); margin-bottom:5px; }
.hud-value { font-size:24px; font-weight:700; color:#eaffff; text-shadow:0 0 14px rgba(127,247,255,.55); letter-spacing:.08em; }
.hud-right .hud-label { margin-top:10px; }
.hud-center { text-align:center; }
.hud-wave-label { display:block; font-size:9px; letter-spacing:.5em; text-indent:.5em; color:var(--dim-2); margin-bottom:4px; }
.hud-wave { font-size:30px; font-weight:900; color:var(--cyan); text-shadow:0 0 20px rgba(63,208,255,.8); letter-spacing:.2em; }
.encounter-status { display:block; margin-top:4px; font-size:9px; letter-spacing:.16em; color:var(--cyan); text-shadow:0 0 10px rgba(63,208,255,.5); }
.encounter-status.danger { color:var(--amber); text-shadow:0 0 12px rgba(255,215,106,.65); }
.encounter-status.clear { color:var(--green); }
.control-coach { position:absolute; z-index:14; left:50%; top:112px; transform:translateX(-50%); display:flex; align-items:center; gap:12px;
  padding:9px 16px; border:1px solid rgba(127,247,255,.28); border-radius:3px; background:rgba(3,12,28,.78); color:var(--dim);
  font-family:var(--font-disp); font-size:10px; letter-spacing:.1em; pointer-events:none; white-space:nowrap; transition:opacity .3s ease; }
.control-coach kbd { min-width:auto; padding:4px 7px; margin-right:4px; color:#eaffff; border-color:rgba(127,247,255,.5); }
.control-coach.moved .coach-move,.control-coach.aimed .coach-aim { color:var(--green); text-shadow:0 0 10px rgba(77,255,158,.55); }
.control-coach.moved .coach-move kbd,.control-coach.aimed .coach-aim kbd { border-color:var(--green); }

/* 连击 */
.hud-combo { margin-top:16px; text-align:center; }
.combo-value { font-size:34px; font-weight:900; color:var(--amber); text-shadow:0 0 20px rgba(255,215,106,.7); }
.combo-label { display:block; font-size:9px; letter-spacing:.4em; color:var(--dim); margin-top:2px; }
.combo-bar { width:120px; height:3px; background:rgba(255,255,255,.12); margin:6px auto 0; border-radius:2px; overflow:hidden; }
.combo-bar i { display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--amber),var(--red)); box-shadow:0 0 8px var(--amber); transition:width .1s linear; }

/* 底部状态 */
.hud-bottom { position:absolute; left:0; right:0; bottom:0; padding:0 22px 18px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:18px; }
.weapon { min-width:150px; }
.weapon-pips { display:flex; gap:7px; margin-top:8px; }
.weapon-pips i { width:30px; height:5px; border-radius:2px; background:rgba(255,255,255,.1);
  border:1px solid rgba(127,247,255,.25); transition:all .3s; }
.weapon-pips i.on { background:linear-gradient(90deg,var(--green-d),var(--green)); box-shadow:0 0 10px rgba(77,255,158,.8); border-color:var(--green); }
.combat-mode { display:block; margin-top:9px; font-size:9px; letter-spacing:.18em; color:var(--dim); transition:color .15s ease, text-shadow .15s ease; }
.combat-mode.focused { color:#eaffff; text-shadow:0 0 7px #7ff7ff,0 0 18px rgba(127,247,255,.9); animation:focus-mode-pulse .55s ease-in-out infinite alternate; }
@keyframes focus-mode-pulse { from{letter-spacing:.16em;opacity:.82} to{letter-spacing:.2em;opacity:1} }
.torpedo-status { display:block; max-width:230px; margin-top:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:9px; letter-spacing:.12em; color:rgba(124,147,184,.7); transition:color .15s ease, text-shadow .15s ease; }
.torpedo-status.ready { color:rgba(255,215,106,.74); }
.torpedo-status.acquiring { color:var(--cyan); text-shadow:0 0 10px rgba(127,247,255,.55); }
.torpedo-status.locked { color:var(--amber); text-shadow:0 0 12px rgba(255,215,106,.65); animation:torpedo-lock 1s ease-in-out infinite; }
.torpedo-status.empty { color:var(--red); animation:torpedo-empty .22s linear 2; }
@keyframes torpedo-lock { 0%,100%{opacity:.75} 50%{opacity:1} }
@keyframes torpedo-empty { 0%,100%{transform:translateX(0)} 35%{transform:translateX(-5px)} 70%{transform:translateX(5px)} }

.armor { flex:1; max-width:520px; }
.armor-row { display:flex; align-items:center; gap:12px; margin-bottom:9px; }
.armor-row .hud-label { margin:0; width:118px; flex:none; }
.bar { position:relative; flex:1; height:12px; border-radius:3px; overflow:hidden;
  background:rgba(255,255,255,.07); border:1px solid rgba(124,147,184,.28); }
.bar i { position:absolute; inset:1px; border-radius:2px; transform-origin:left; transition:width .18s ease, background .3s; }
.bar-shield i { background:linear-gradient(90deg,#0d7fb8,var(--cyan)); box-shadow:0 0 12px rgba(127,247,255,.6); }
.bar-hull i { background:linear-gradient(90deg,var(--green-d),var(--green)); box-shadow:0 0 12px rgba(77,255,158,.55); }
.bar-force i { background:linear-gradient(90deg,#264fb0,#7ff7ff 70%,#ffffff); box-shadow:0 0 14px rgba(127,247,255,.7); }
.bar-force::after { content:""; position:absolute; top:0; bottom:0; left:50%; width:1px; background:rgba(255,255,255,.45); box-shadow:0 0 8px rgba(127,247,255,.8); }
.bar-force.force-ready { border-color:rgba(127,247,255,.7); box-shadow:0 0 16px rgba(63,208,255,.2); }
.bar-force.force-ready i { animation:force-ready 1.2s ease-in-out infinite; }
@keyframes force-ready { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.5)} }
.force-value { position:absolute; inset:0 6px 0 auto; display:flex; align-items:center; z-index:2; font-size:8px; letter-spacing:.12em; color:#eaffff; text-shadow:0 1px 4px #02050f; }
.bar-hull.low i { background:linear-gradient(90deg,#b3123a,var(--red)); box-shadow:0 0 12px rgba(255,59,92,.7); animation:low-pulse 1s infinite; }
@keyframes low-pulse { 0%,100%{opacity:1} 50%{opacity:.55} }
.hull-ships { position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:9px; letter-spacing:.2em; color:rgba(255,255,255,.75); text-shadow:0 0 6px rgba(0,0,0,.8); }

.nuke { text-align:center; }
.nuke-btn { pointer-events:auto; width:44px; height:44px; border-radius:50%; cursor:pointer; font-size:19px; line-height:1;
  border:1px solid rgba(255,215,106,.5); background:radial-gradient(circle at 35% 30%, rgba(255,215,106,.35), rgba(120,60,10,.5));
  color:var(--amber); box-shadow:0 0 16px rgba(255,180,60,.35), inset 0 0 12px rgba(255,200,100,.25);
  transition:transform .15s ease, box-shadow .3s; }
.nuke-btn:disabled { filter:grayscale(.9); opacity:.45; box-shadow:none; cursor:not-allowed; }
.nuke-btn:not(:disabled):hover { transform:scale(1.1); box-shadow:0 0 30px rgba(255,180,60,.7); }
.nuke-count { display:block; margin-top:6px; font-size:13px; color:var(--amber); }

/* Boss 血条 */
#bossbar { position:absolute; top:74px; left:50%; transform:translateX(-50%); z-index:13;
  width:min(620px,82vw); pointer-events:none; text-align:center;
  animation:boss-in .6s cubic-bezier(.16,1,.3,1) both; }
@keyframes boss-in { from { opacity:0; transform:translateX(-50%) translateY(-16px);} to { opacity:1; transform:translateX(-50%);} }
.boss-name { display:flex; justify-content:center; gap:18px; align-items:baseline; margin-bottom:8px; }
#boss-title { font-size:19px; font-weight:900; letter-spacing:.34em; text-indent:.34em; color:var(--red);
  text-shadow:0 0 16px rgba(255,59,92,.8); animation:boss-blink 1.1s infinite; }
@keyframes boss-blink { 0%,100%{opacity:1} 50%{opacity:.55} }
.boss-alert { font-size:9px; letter-spacing:.4em; color:var(--dim); }
.boss-bar { height:10px; border-radius:2px; overflow:hidden; border:1px solid rgba(255,59,92,.45);
  background:rgba(60,5,16,.5); box-shadow:0 0 18px rgba(255,59,92,.25), inset 0 0 10px rgba(0,0,0,.6); }
.boss-bar i { display:block; height:100%; width:100%; background:linear-gradient(90deg,#6b0f2a,var(--red),#ff9db0);
  box-shadow:0 0 14px rgba(255,59,92,.8); transition:width .2s ease; }

/* 核弹闪光 */
#nukeflash { position:absolute; inset:0; z-index:11; background:radial-gradient(circle at 50% 55%, rgba(255,255,255,.98), rgba(255,220,150,.85) 30%, rgba(255,120,40,.4) 55%, transparent 80%);
  opacity:0; pointer-events:none; }
#nukeflash.go { animation:nuke-flash 1.3s ease-out both; }
@keyframes nuke-flash { 0%{opacity:0} 12%{opacity:1} 100%{opacity:0} }

/* ============================================================
   暂停 / 结算
   ============================================================ */
.overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
#pause { z-index:25; background:rgba(1,4,12,.82); backdrop-filter:blur(6px); }
.pause-inner { text-align:center; animation:menu-rise .5s ease both; }
.pause-title { font-family:var(--font-disp); font-size:38px; letter-spacing:.5em; text-indent:.5em; color:var(--cyan); text-shadow:0 0 30px rgba(63,208,255,.7); }
.pause-sub { margin:10px 0 34px; font-size:10px; letter-spacing:.5em; text-indent:.5em; color:var(--dim); }
.pause-btns { display:flex; gap:18px; justify-content:center; }

#gameover { z-index:24; background:radial-gradient(90% 80% at 50% 60%, rgba(30,5,12,.6) 0%, rgba(4,1,4,.88) 62%, rgba(1,1,3,.96) 100%); backdrop-filter:blur(3px); }
.go-inner { text-align:center; animation:menu-rise .7s cubic-bezier(.16,1,.3,1) both; padding:0 20px; }
.go-kicker { font-family:var(--font-disp); font-size:10px; letter-spacing:.6em; text-indent:.6em; color:var(--red); text-shadow:0 0 12px rgba(255,59,92,.6); }
.go-title { margin:12px 0 4px; font-family:var(--font-disp); font-size:clamp(30px,6vw,54px); font-weight:900; letter-spacing:.16em; color:#fff; text-shadow:0 0 34px rgba(255,120,140,.55); }
.go-sub { font-size:13px; letter-spacing:.3em; color:var(--dim); margin-bottom:28px; }
.go-stats { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; max-width:720px; margin:0 auto 30px; }
.go-stat { padding:14px 6px 12px; border:1px solid rgba(124,147,184,.25); border-radius:3px; background:rgba(10,18,38,.55); }
.go-stat span { display:block; font-size:10px; letter-spacing:.18em; color:var(--dim); margin-bottom:8px; }
.go-stat b { font-family:var(--font-disp); font-size:22px; color:var(--amber); text-shadow:0 0 12px rgba(255,215,106,.45); }
.rank-badge { position:relative; display:inline-flex; flex-direction:column; align-items:center; margin-bottom:22px; }
.rank-letter { font-family:var(--font-disp); font-weight:900; font-size:96px; line-height:1; color:var(--gold);
  text-shadow:0 0 40px rgba(255,215,106,.6), 0 0 90px rgba(255,180,60,.3);
  animation:rank-pop .7s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes rank-pop { from { transform:scale(.3) rotate(-14deg); opacity:0; } to { transform:scale(1) rotate(0); opacity:1; } }
.rank-label { margin-top:8px; font-size:10px; letter-spacing:.5em; text-indent:.5em; color:var(--dim); }
.go-bless { margin-bottom:26px; font-family:var(--font-crawl); letter-spacing:.4em; text-indent:.4em; font-size:14px; color:var(--holo); text-shadow:0 0 16px rgba(63,208,255,.5); }
.go-btns { display:flex; gap:18px; justify-content:center; }

/* 提示 / 吐司 */
#hint { position:absolute; left:50%; bottom:9vh; transform:translateX(-50%); z-index:26;
  font-family:var(--font-disp); font-size:11px; letter-spacing:.4em; text-indent:.4em; color:var(--cyan);
  text-shadow:0 0 12px rgba(63,208,255,.7); animation:hint-pulse 2s infinite; pointer-events:none; }
#toast { position:absolute; left:50%; top:16%; transform:translateX(-50%); z-index:27;
  font-family:var(--font-disp); font-size:17px; letter-spacing:.35em; text-indent:.35em; color:#fff;
  padding:12px 30px; border-radius:3px; pointer-events:none;
  background:rgba(10,30,60,.7); border:1px solid rgba(127,247,255,.4);
  box-shadow:0 0 26px rgba(63,208,255,.35); opacity:0; transition:opacity .35s; white-space:nowrap; }
#toast.show { opacity:1; }
#toast.warn { color:#ffd9a0; border-color:rgba(255,215,106,.5); background:rgba(60,30,6,.75); box-shadow:0 0 26px rgba(255,180,60,.3); }

/* 移动端微调 */
@media (max-width:720px) {
  .controls-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .hud-top { padding:12px 14px 0; }
  .hud-left { min-width:0; }
  .hud-right { display:none; }
  .hud-left .hud-value { font-size:20px; }
  .hud-center { position:absolute; top:12px; right:14px; text-align:right; }
  .hud-bottom { display:block; padding:0; }
  .weapon { position:absolute; left:14px; bottom:14px; min-width:94px; }
  .weapon-pips { gap:4px; }
  .weapon-pips i { width:22px; }
  .combat-mode,.torpedo-status { max-width:120px; font-size:7px; letter-spacing:.08em; }
  .armor { position:absolute; left:110px; right:64px; bottom:14px; max-width:none; }
  .armor-row { gap:6px; margin-bottom:5px; }
  .armor-row .hud-label { width:54px; font-size:7px; letter-spacing:.12em; }
  .bar { height:9px; }
  .force-value { font-size:6px; }
  .nuke { position:absolute; right:14px; bottom:12px; }
  .nuke-btn { width:40px; height:40px; }
  .go-stats { grid-template-columns:repeat(3,1fr); }
  .hud-wave { font-size:22px; }
  .encounter-status { max-width:190px; margin-left:auto; font-size:7px; line-height:1.45; }
  #bossbar { top:92px; width:86vw; }
  .boss-alert { display:none; }
  .control-coach { top:118px; max-width:88vw; flex-wrap:wrap; justify-content:center; gap:6px 9px; white-space:normal; text-align:center; line-height:1.6; }
}