:root{
  --void:#07060f; --deep:#100b20; --panel:#0d0918;
  --gold:#ffc94a; --gold-d:#a8791d;
  --ember:#ff4d6d; --ion:#45f0e0; --violet:#a06bff;
  --bone:#efe7d8; --ash:#7b7296; --ash-d:#443e5c;
  --ui: "Chakra Petch", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif;
  --cn: "Noto Sans SC", "Chakra Petch", ui-sans-serif, system-ui, sans-serif;
}
/* 中文界面使用自托管字体，键位符号保留原始字形。 */
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0; background:var(--void); color:var(--bone);
  font-family:var(--ui); overscroll-behavior:none;
  background-image:
    radial-gradient(120% 80% at 50% 0%, #1a1130 0%, rgba(16,11,32,0) 60%),
    radial-gradient(90% 60% at 50% 100%, #150d24 0%, rgba(7,6,15,0) 65%);
}
/* 整数缩放下，任何边距都可能把机舱框挤到下一个倍率档位以下，代价是整整一档。
   实例：1125px 高的窗口，上下各 10px 边距 → 可用 1105，取 k=3（1080）刚好；
   留着边距则只能取 k=2，画面从 720×1080 掉到 480×720，面积少一半以上。
   机舱框自己有边框和暗角，本来就是个「框」，不需要再套一层留白。 */
#app{height:100%; display:grid; place-items:center; padding:0;}

/* ---- 机舱框 ---- */
.frame{
  --s:1;
  position:relative; aspect-ratio:2/3;
  /* 上限交给整数缩放去算（resize() 会把尺寸钉成美术分辨率的整数倍），
     这里再加一个 1000px 的硬上限只会白白吃掉一档倍率。 */
  height:100%; max-width:100%; width:auto;
  border-radius:calc(10px * var(--s));
  overflow:hidden; background:var(--void);
  border:1px solid rgba(160,107,255,.22);
  box-shadow:
    0 0 0 1px rgba(255,201,74,.06),
    0 calc(24px*var(--s)) calc(70px*var(--s)) rgba(80,40,140,.34),
    inset 0 0 calc(60px*var(--s)) rgba(70,30,120,.28);
  touch-action:none; user-select:none; -webkit-user-select:none;
  cursor:crosshair;
}
.frame.playing{cursor:none;
}
canvas{display:block; width:100%; height:100%;}

/* 叠加层：扫描线 + 暗角 + 卡角 */
.scan,.vig,.corner{position:absolute; inset:0; pointer-events:none;}
/* 扫描线周期跟着 --s 走，这样它在任何屏幕上都是同一个视觉粗细。
   强度刻意压得很低：盖在平滑画面上的扫描线一重就变成廉价 CRT 滤镜，
   它要做的是「这是一块屏幕」的暗示，不是一层贴上去的特效。 */
.scan{
  background:repeating-linear-gradient(to bottom,
    rgba(255,255,255,.030) 0 calc(2px*var(--s)), rgba(0,0,0,0) calc(2px*var(--s)) calc(4px*var(--s)));
  mix-blend-mode:overlay; opacity:.14;
}
.vig{box-shadow:inset 0 0 calc(90px*var(--s)) calc(30px*var(--s)) rgba(5,3,12,.82);}
.corner span{
  position:absolute; width:calc(16px*var(--s)); height:calc(16px*var(--s));
  border:calc(2px*var(--s)) solid var(--gold); opacity:.5;
}
.corner span:nth-child(1){top:8px;left:8px;border-right:0;border-bottom:0}
.corner span:nth-child(2){top:8px;right:8px;border-left:0;border-bottom:0}
.corner span:nth-child(3){bottom:8px;left:8px;border-right:0;border-top:0}
.corner span:nth-child(4){bottom:8px;right:8px;border-left:0;border-top:0}

/* ---- HUD ---- */
.hud{position:absolute; inset:0; pointer-events:none; padding:calc(12px*var(--s)); display:flex; flex-direction:column; gap:calc(6px*var(--s));}
.lab{
  font-family:var(--cn); font-weight:700; letter-spacing:.14em;
  font-size:calc(9.5px*var(--s)); color:var(--ash); text-transform:uppercase;
  display:block; line-height:1.2;
}
.row{display:flex; justify-content:space-between; align-items:flex-start; gap:calc(10px*var(--s));}
.val{
  font-family:var(--ui); font-weight:700; font-variant-numeric:tabular-nums;
  font-size:calc(26px*var(--s)); line-height:1; color:var(--gold);
  text-shadow:0 0 calc(14px*var(--s)) rgba(255,201,74,.45);
  display:block; margin-top:calc(2px*var(--s));
}
.right{text-align:right}
.combo{
  display:block; margin-top:calc(4px*var(--s)); font-weight:700;
  font-size:calc(14px*var(--s)); color:var(--ember); letter-spacing:.04em;
  text-shadow:0 0 calc(12px*var(--s)) rgba(255,77,109,.5);
}
.combo .bar{display:block; width:calc(64px*var(--s)); height:calc(2px*var(--s)); background:rgba(255,77,109,.2); margin-top:calc(3px*var(--s));}
.combo .bar i{display:block; height:100%; background:var(--ember); transform-origin:left;}
.graze{display:block; margin-top:calc(5px*var(--s)); font-weight:700; font-size:calc(12px*var(--s));
  color:var(--ion); letter-spacing:.05em; font-variant-numeric:tabular-nums;
  text-shadow:0 0 calc(12px*var(--s)) rgba(69,240,224,.55);}
.graze .x{color:var(--bone); font-size:calc(10px*var(--s)); margin-left:calc(6px*var(--s)); letter-spacing:.1em}
.rim{position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .2s linear;
  box-shadow:inset 0 0 calc(64px*var(--s)) rgba(69,240,224,.5), inset 0 0 calc(14px*var(--s)) rgba(69,240,224,.32);}
.turrets{display:flex; gap:calc(5px*var(--s)); justify-content:center; margin-top:calc(4px*var(--s));}
.turrets i{width:calc(18px*var(--s)); height:calc(4px*var(--s)); background:var(--gold);
  box-shadow:0 0 calc(7px*var(--s)) rgba(255,201,74,.7); transition:background .2s}
.turrets i.dead{background:rgba(123,114,150,.3); box-shadow:none}
.wave{font-family:var(--ui); font-weight:700; font-size:calc(15px*var(--s)); color:var(--bone); letter-spacing:.05em;}
.wave b{color:var(--ion); font-variant-numeric:tabular-nums}
.lives{display:flex; gap:calc(5px*var(--s)); justify-content:flex-end; margin-top:calc(6px*var(--s));}
.lives i{
  width:calc(11px*var(--s)); height:calc(13px*var(--s)); background:var(--gold);
  clip-path:polygon(50% 0, 100% 100%, 50% 74%, 0 100%);
  box-shadow:0 0 calc(8px*var(--s)) rgba(255,201,74,.6);
}
/* Boss 血条 */
.bossbar{margin-top:calc(2px*var(--s));}
.bossbar .bn{
  font-family:var(--cn); font-weight:700; font-size:calc(10px*var(--s));
  letter-spacing:.2em; color:var(--ember); display:block; text-align:center;
  margin-bottom:calc(3px*var(--s)); text-shadow:0 0 calc(10px*var(--s)) rgba(255,77,109,.6);
}
.bossbar .track{display:block; height:calc(5px*var(--s)); background:rgba(255,77,109,.14); border:1px solid rgba(255,77,109,.3);}
.bossbar .track i{display:block; height:100%; background:linear-gradient(90deg,var(--violet),var(--ember)); transform-origin:left; transition:transform .08s linear;}
/* 中央横幅 */
.banner{
  position:absolute; left:0; right:0; top:38%; text-align:center; pointer-events:none;
  font-family:var(--cn); font-weight:900; letter-spacing:.24em;
  font-size:calc(30px*var(--s)); color:var(--bone);
  text-shadow:0 0 calc(26px*var(--s)) rgba(160,107,255,.9);
}
.banner small{display:block; font-size:calc(11px*var(--s)); letter-spacing:.4em; color:var(--ash); margin-top:calc(6px*var(--s)); font-weight:700;}
.banner.alert{color:var(--ember); text-shadow:0 0 calc(26px*var(--s)) rgba(255,77,109,.95); animation:blink .32s steps(2,end) infinite;}
@keyframes blink{50%{opacity:.25}}
/* 序章提示：画框上部的一块小卷轴，不挡中央弹道 */
.tut{
  position:absolute; left:50%; top:calc(64px*var(--s)); transform:translateX(-50%);
  width:min(86%, calc(330px*var(--s))); padding:calc(10px*var(--s)) calc(14px*var(--s)) calc(8px*var(--s));
  background:linear-gradient(180deg, rgba(17,19,25,.9), rgba(17,19,25,.78));
  border:1px solid rgba(238,229,208,.18); border-left:3px solid var(--ember);
  box-shadow:0 8px 30px rgba(0,0,0,.45); pointer-events:none; text-align:left;
}
.tut.pop{animation:tutIn .32s cubic-bezier(.2,.7,.2,1)}
@keyframes tutIn{from{opacity:0; transform:translate(-50%, calc(-8px*var(--s)))}}
.tut p{margin:0}
.tut-count{font-family:var(--cn); font-size:calc(9.5px*var(--s)); letter-spacing:.2em; color:var(--ash)}
.tut-head{font-family:var(--kai, var(--cn)); font-size:calc(22px*var(--s)); line-height:1.2; color:var(--bone); margin-top:calc(2px*var(--s)) !important}
.tut-text{font-family:var(--cn); font-size:calc(12px*var(--s)); line-height:1.6; color:var(--bone); opacity:.9; margin-top:calc(4px*var(--s)) !important}
.tut-text b{color:var(--gold); font-weight:600}
.tut-skip{
  display:block; margin:calc(6px*var(--s)) 0 0 auto; padding:calc(3px*var(--s)) calc(6px*var(--s));
  font-family:var(--cn); font-size:calc(10px*var(--s)); letter-spacing:.12em; color:var(--ash);
  background:none; border:0; cursor:pointer; pointer-events:auto;
}
.tut-skip:hover,.tut-skip:focus-visible{color:var(--bone)}
/* 首次提示：底部一行，几秒后自动消失 */
.tip{
  position:absolute; left:50%; bottom:calc(92px*var(--s)); transform:translateX(-50%); margin:0;
  width:min(88%, calc(360px*var(--s))); padding:calc(7px*var(--s)) calc(12px*var(--s));
  font-family:var(--cn); font-size:calc(11.5px*var(--s)); line-height:1.55; color:var(--bone); text-align:center;
  background:rgba(17,19,25,.82); border:1px solid rgba(238,229,208,.16); pointer-events:none;
  animation:tutIn .32s cubic-bezier(.2,.7,.2,1);
}
.tip b{color:var(--ion); font-weight:600}
/* 底部 */
.build{margin-top:auto; margin-bottom:calc(7px*var(--s)); display:flex; align-items:center;
  gap:calc(7px*var(--s)); flex-wrap:wrap;}
.build .wn{font-family:var(--cn); font-weight:700; font-size:calc(12px*var(--s)); letter-spacing:.1em;}
.build .wlv{display:flex; gap:calc(2px*var(--s));}
.build .wlv i{width:calc(4px*var(--s)); height:calc(10px*var(--s)); background:currentColor;}
.build .wlv i.off{background:rgba(123,114,150,.28);}
.build .frags{display:flex; gap:calc(3px*var(--s)); margin-left:calc(2px*var(--s));}
.build .frags i{width:calc(5px*var(--s)); height:calc(5px*var(--s)); background:var(--ion); transform:rotate(45deg);}
.build .frags i.off{background:rgba(123,114,150,.26);}
.build .mods{display:flex; gap:calc(4px*var(--s)); margin-left:auto; flex-wrap:wrap; justify-content:flex-end; max-width:60%;}
.build .mods b{font-family:var(--cn); font-weight:700; font-size:calc(9px*var(--s)); letter-spacing:.05em;
  padding:calc(2px*var(--s)) calc(5px*var(--s)); border:1px solid currentColor;}
.bot{ display:flex; align-items:flex-end; justify-content:space-between; gap:calc(12px*var(--s));}
.od{flex:1; max-width:calc(190px*var(--s));}
.od .track{position:relative; display:block; height:calc(6px*var(--s)); background:rgba(160,107,255,.14); border:1px solid rgba(160,107,255,.32); margin-top:calc(4px*var(--s));}
.od .track i{display:block; height:100%; background:linear-gradient(90deg,var(--ion),var(--violet)); transform-origin:left;}
.od .tick{position:absolute; top:calc(-2px*var(--s)); bottom:calc(-2px*var(--s)); left:25%;
  width:1px; background:rgba(239,231,216,.5);}
.od.can .lab{color:var(--ion)}
.od.can .track{border-color:rgba(69,240,224,.5)}
.od.ready .lab{color:var(--violet)}
.od.ready .track{border-color:var(--violet); box-shadow:0 0 calc(14px*var(--s)) rgba(160,107,255,.75); animation:pulse .7s ease-in-out infinite;}
.od.burn .track i{background:linear-gradient(90deg,var(--gold),var(--ember))}
@keyframes pulse{50%{box-shadow:0 0 calc(4px*var(--s)) rgba(160,107,255,.3)}}
.bombs{text-align:right}
.bombs .pips{display:flex; gap:calc(4px*var(--s)); justify-content:flex-end; margin-top:calc(5px*var(--s));}
.bombs .pips i{width:calc(9px*var(--s)); height:calc(9px*var(--s)); background:var(--violet); transform:rotate(45deg); box-shadow:0 0 calc(8px*var(--s)) rgba(160,107,255,.7);}
.bombs .pips.dodge i{background:#8ef0ff; box-shadow:0 0 calc(8px*var(--s)) rgba(142,240,255,.7);}
.bombs .pips.dodge i.off{background:rgba(123,114,150,.26); box-shadow:none;}

/* ---- 触屏按键 ---- */
.pads{position:absolute; left:0; right:0; bottom:calc(46px*var(--s)); display:flex; justify-content:space-between; padding:0 calc(14px*var(--s)); pointer-events:none;}
.pad{
  pointer-events:auto; width:calc(62px*var(--s)); height:calc(62px*var(--s)); border-radius:50%;
  background:rgba(13,9,24,.62); color:var(--violet); font-family:var(--cn); font-weight:700;
  font-size:calc(13px*var(--s)); letter-spacing:.1em; border:1px solid rgba(160,107,255,.45);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.pad:active{background:rgba(160,107,255,.3)}
.pad.bomb{color:var(--ion); border-color:rgba(69,240,224,.45)}

/* ---- 覆盖面板 ---- */
.ov{
  position:absolute; inset:0; display:grid; place-items:center; padding:calc(22px*var(--s));
  background:radial-gradient(70% 55% at 50% 45%, rgba(9,6,18,.7), rgba(6,4,13,.94));
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.panel{width:100%; max-width:calc(360px*var(--s)); text-align:center;}
.eyebrow{
  font-family:var(--cn); font-weight:700; font-size:calc(10px*var(--s));
  letter-spacing:.42em; color:var(--ash); margin:0 0 calc(10px*var(--s)); text-indent:.42em;
}
h1{
  font-family:var(--cn); font-weight:900; margin:0;
  font-size:calc(52px*var(--s)); line-height:.95; letter-spacing:.06em;
  color:var(--bone); text-wrap:balance;
  text-shadow:0 0 calc(30px*var(--s)) rgba(160,107,255,.6), 0 calc(2px*var(--s)) 0 rgba(255,77,109,.35);
}
h1 .g{color:var(--gold); text-shadow:0 0 calc(30px*var(--s)) rgba(255,201,74,.65)}
.rule{height:1px; background:linear-gradient(90deg,transparent,var(--gold-d),transparent); margin:calc(14px*var(--s)) 0;}
.tag{font-family:var(--cn); font-size:calc(12px*var(--s)); line-height:1.85; color:var(--ash); margin:0 auto; max-width:calc(280px*var(--s));}
.keys{
  display:grid; grid-template-columns:auto 1fr; gap:calc(7px*var(--s)) calc(12px*var(--s));
  margin:calc(18px*var(--s)) 0; text-align:left; align-items:center;
}
kbd{
  font-family:var(--ui); font-weight:600; font-size:calc(10px*var(--s)); letter-spacing:.06em;
  color:var(--gold); border:1px solid rgba(255,201,74,.35); padding:calc(3px*var(--s)) calc(7px*var(--s));
  white-space:nowrap; display:inline-block; min-width:calc(46px*var(--s)); text-align:center;
}
.keys span{font-family:var(--cn); font-size:calc(11px*var(--s)); color:var(--ash);}
/* 手机上标题面板装不下七行操作说明，开始按钮会被挤出画框；触屏玩家也用不上键鼠那六行 */
@media (pointer: coarse){ .keys .desk{display:none} }
.hi{font-family:var(--cn); font-size:calc(11px*var(--s)); letter-spacing:.14em; color:var(--ash); margin:calc(14px*var(--s)) 0 0;}
.hi b{font-family:var(--ui); font-variant-numeric:tabular-nums; color:var(--bone); font-size:calc(15px*var(--s));}
.hi em{
  font-style:normal; font-weight:700; color:var(--ember); letter-spacing:.16em;
  font-size:calc(9.5px*var(--s)); margin-left:calc(8px*var(--s)); animation:blink .5s steps(2,end) infinite;
}
.cta{
  margin-top:calc(18px*var(--s)); pointer-events:auto; cursor:pointer;
  font-family:var(--cn); font-weight:700; font-size:calc(14px*var(--s)); letter-spacing:.3em; text-indent:.3em;
  color:var(--void); background:var(--gold); border:0;
  padding:calc(12px*var(--s)) calc(30px*var(--s));
  box-shadow:0 0 calc(26px*var(--s)) rgba(255,201,74,.45);
  transition:transform .12s ease, box-shadow .12s ease;
}
.cta:hover{transform:translateY(-2px); box-shadow:0 0 calc(38px*var(--s)) rgba(255,201,74,.7)}
.cta:focus-visible{outline:2px solid var(--ion); outline-offset:3px}
.cta.ghost{background:transparent; color:var(--gold); border:1px solid rgba(255,201,74,.5); box-shadow:none}
/* 选牌 */
.dtitle{font-family:var(--cn); font-weight:900; font-size:calc(22px*var(--s)); letter-spacing:.12em;
  color:var(--bone); margin:0 0 calc(14px*var(--s)); text-shadow:0 0 calc(22px*var(--s)) rgba(160,107,255,.5);}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:calc(9px*var(--s));}
/* 单栏时卡片按内容高度排：最小高度是给三栏对齐用的，单栏里它只会把三张卡撑出画框 */
@media (max-width:460px){ .cards{grid-template-columns:1fr;} .card{min-height:0;} }
.card{
  position:relative; cursor:pointer; text-align:left; pointer-events:auto;
  background:linear-gradient(180deg, rgba(20,14,38,.95), rgba(10,7,20,.95));
  border:1px solid var(--cc); border-top-width:calc(3px*var(--s));
  padding:calc(15px*var(--s)) calc(12px*var(--s)) calc(12px*var(--s));
  display:flex; flex-direction:column; gap:calc(7px*var(--s)); min-height:calc(132px*var(--s));
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  box-shadow:0 0 calc(16px*var(--s)) rgba(0,0,0,.5);
}
.card::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--cc) 16%, transparent), transparent 70%);}
.card:hover,.card:focus-visible{transform:translateY(calc(-4px*var(--s)));
  box-shadow:0 0 calc(28px*var(--s)) color-mix(in srgb, var(--cc) 55%, transparent); outline:none;}
.card .ct{font-family:var(--cn); font-weight:700; font-size:calc(8.5px*var(--s));
  letter-spacing:.24em; color:var(--cc);}
.card .cn{font-family:var(--cn); font-weight:900; font-size:calc(17.5px*var(--s));
  letter-spacing:.06em; color:var(--bone); line-height:1.15;}
.card .cd{font-family:var(--cn); font-size:calc(11.5px*var(--s)); line-height:1.7; color:var(--ash);}
.card .ck{margin-top:auto; font-family:var(--ui); font-size:calc(9px*var(--s));
  letter-spacing:.1em; color:var(--ash-d); font-variant-numeric:tabular-nums;}
.card .cnum{position:absolute; top:calc(7px*var(--s)); right:calc(9px*var(--s));
  font-family:var(--ui); font-weight:700; font-size:calc(11px*var(--s)); color:var(--cc); opacity:.75;}
.build .mods .rr{ color:#c8a2ff !important; border:1px solid rgba(160,107,255,.45);
  padding:0 calc(4px*var(--s)); }

/* 稀有度视觉层级：越稀有，边框越重、光晕越强、背景越暖。
   目标是「不看字也能排序」——扫一眼就知道哪张最值钱。 */
.card .crar{
  position:absolute; top:0; left:0; padding:calc(2px*var(--s)) calc(7px*var(--s));
  font-family:var(--cn); font-weight:700; font-size:calc(8px*var(--s)); letter-spacing:.18em;
  color:#0a0714; background:var(--cc);
}
.card .ct{display:flex; align-items:center; gap:calc(4px*var(--s)); margin-top:calc(6px*var(--s));}
.card .ct em{font-style:normal;}
.card .ic{flex:none; display:block;}
.card[data-r="0"]{border-width:1px; border-top-width:calc(3px*var(--s));}
.card[data-r="1"]{border-top-width:calc(4px*var(--s));}
.card[data-r="2"]{border-top-width:calc(5px*var(--s));
  box-shadow:0 0 calc(18px*var(--s)) color-mix(in srgb, var(--cc) 26%, transparent);}
.card[data-r="3"]{border-width:calc(1.5px*var(--s)); border-top-width:calc(6px*var(--s));
  box-shadow:0 0 calc(26px*var(--s)) color-mix(in srgb, var(--cc) 40%, transparent);}
.card[data-r="4"]{border-width:calc(2px*var(--s)); border-top-width:calc(7px*var(--s));
  box-shadow:0 0 calc(34px*var(--s)) color-mix(in srgb, var(--cc) 62%, transparent);}
.card[data-r="4"] .cn{color:var(--cc); text-shadow:0 0 calc(16px*var(--s)) color-mix(in srgb, var(--cc) 70%, transparent);}
/* 传说：一道缓慢扫过的流光。只有最高档有动效，动效本身就是稀有度信号 */
.card[data-r="4"]::before{
  content:''; position:absolute; inset:0; pointer-events:none; overflow:hidden;
  background:linear-gradient(115deg, transparent 38%, color-mix(in srgb, var(--cc) 30%, transparent) 50%, transparent 62%);
  background-size:280% 100%; animation:shine 2.6s linear infinite;
}
@keyframes shine{from{background-position:180% 0} to{background-position:-80% 0}}
/* 诅咒：红色 + 斜纹底，和稀有度阶梯明确区分开——它不是「更好」，是「另一种交易」 */
.card[data-r="-1"]{border-width:calc(1.5px*var(--s)); border-top-width:calc(5px*var(--s));
  box-shadow:0 0 calc(22px*var(--s)) color-mix(in srgb, var(--cc) 34%, transparent);}
.card[data-r="-1"]::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(135deg, transparent 0 calc(7px*var(--s)),
    color-mix(in srgb, var(--cc) 9%, transparent) calc(7px*var(--s)) calc(14px*var(--s)));
}
@media (prefers-reduced-motion: reduce){ .card[data-r="4"]::before{animation:none} }
.build .mods b{display:inline-flex; align-items:center; gap:calc(3px*var(--s));}
.build .mods b[data-r="4"]{box-shadow:0 0 calc(10px*var(--s)) currentColor;}

/* 重抽券：掉落给的是决定权，不是又一次打断 */
.reroll{
  margin:calc(13px*var(--s)) auto calc(2px*var(--s)); display:block; pointer-events:auto; cursor:pointer;
  font-family:var(--cn); font-weight:700; font-size:calc(12px*var(--s)); letter-spacing:.12em;
  color:#dcc9ff; background:rgba(160,107,255,.10); border:1px solid rgba(160,107,255,.5);
  padding:calc(7px*var(--s)) calc(20px*var(--s));
  transition:background .12s ease, box-shadow .12s ease, color .12s ease;
}
.reroll:hover:not(:disabled){ background:rgba(160,107,255,.24);
  box-shadow:0 0 calc(20px*var(--s)) rgba(160,107,255,.45); color:#fff; }
.reroll:disabled{ cursor:default; color:var(--ash-d); border-color:rgba(123,114,150,.3); background:transparent; }
.reroll b{ font-family:var(--ui); font-variant-numeric:tabular-nums; }
.reroll .k{ font-family:var(--ui); font-size:calc(9px*var(--s)); opacity:.6; margin-left:calc(5px*var(--s));
  border:1px solid currentColor; padding:0 calc(4px*var(--s)); }
.reroll .off{ font-weight:500; letter-spacing:.16em; }

/* 结算 */
.rank{display:flex; align-items:center; justify-content:center; gap:calc(14px*var(--s)); margin:calc(6px*var(--s)) 0 calc(4px*var(--s));}
.rank .letter{
  font-family:var(--ui); font-weight:700; font-size:calc(76px*var(--s)); line-height:.85; color:var(--gold);
  text-shadow:0 0 calc(34px*var(--s)) rgba(255,201,74,.55);
}
.rank .note{text-align:left; font-family:var(--cn);}
.rank .note b{display:block; font-size:calc(14px*var(--s)); color:var(--bone); letter-spacing:.1em}
.rank .note span{display:block; font-size:calc(10px*var(--s)); color:var(--ash); letter-spacing:.14em; margin-top:calc(3px*var(--s))}
.stats{display:grid; grid-template-columns:1fr 1fr; gap:calc(1px*var(--s)); background:rgba(160,107,255,.16); border:1px solid rgba(160,107,255,.18); margin-top:calc(14px*var(--s));}
.stats dl{margin:0; background:var(--panel); padding:calc(8px*var(--s)) calc(10px*var(--s)); text-align:left;}
.stats dt{font-family:var(--cn); font-size:calc(9.5px*var(--s)); letter-spacing:.16em; color:var(--ash); margin:0}
.stats dd{margin:calc(3px*var(--s)) 0 0; font-family:var(--ui); font-weight:700; font-variant-numeric:tabular-nums; font-size:calc(17px*var(--s)); color:var(--bone)}
.stats dd.acc{color:var(--ion)}
.stats dd.bad{color:var(--ember)}
.muted{font-family:var(--cn); font-size:calc(10px*var(--s)); color:var(--ash-d); letter-spacing:.14em; margin:calc(14px*var(--s)) 0 0}
/* 音效 / 震动：纯图标，挂在右上角的信息组里。
   以前它是 position:absolute; bottom:11px; left:50%，正好压在超载条上——
   两个 pointer-events:auto 的按钮横在操作区中央，既难看又挡手。
   设置就该待在角落，而且不需要文字：喇叭有没有划掉、震动有几道弧，一眼就够。 */
.sound{
  position:absolute; top:calc(11px*var(--s)); left:50%; transform:translateX(-50%);
  z-index:6; display:flex; gap:calc(4px*var(--s)); pointer-events:auto;
}
.sound button{
  background:transparent; border:1px solid rgba(123,114,150,.28); color:var(--ash-d);
  cursor:pointer; padding:calc(3px*var(--s)); line-height:0;
  display:inline-flex; align-items:center; justify-content:center;
}
.sound button svg{display:block; width:calc(13px*var(--s)); height:calc(13px*var(--s));}
.sound button[data-on="1"]{color:var(--ash); border-color:rgba(123,114,150,.45)}
.sound button:hover{color:var(--ion); border-color:rgba(69,240,224,.5)}
/* 返回游戏列表：只出现在标题、结算、暂停三块面板里，战斗中不存在可误触的入口 */
.back{
  display:block; width:max-content; margin:calc(14px*var(--s)) auto 0; padding:calc(4px*var(--s)) calc(6px*var(--s));
  font-family:var(--cn); font-weight:700; font-size:calc(10.5px*var(--s)); letter-spacing:.14em;
  color:var(--ash); text-decoration:none; background:none; border:0; cursor:pointer; pointer-events:auto;
}
.back:hover,.back:focus-visible{color:var(--ion)}
.back:focus-visible{outline:1px solid var(--ion); outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  .banner.alert,.hi em,.od.ready .track,.tut.pop,.tip{animation:none}
  .cta{transition:none}
}

/* 流派显式化：徽记形状是主信号，颜色只是辅助；卡框颜色留给稀有度 */
.card .ct .cf{margin-left:auto; display:inline-flex; align-items:center; gap:calc(3px*var(--s));
  color:var(--fc); letter-spacing:.12em;}
.card .ct .cf em{font-style:normal;}
.card .cfoot{margin-top:auto; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:calc(2px*var(--s)) calc(8px*var(--s));}
.card .cfoot .ck{margin-top:0; margin-left:auto;}
.card .cr{font-family:var(--cn); font-size:calc(10px*var(--s)); letter-spacing:.06em;
  color:color-mix(in srgb, var(--fc) 70%, var(--ash));}
.card .cr.hit{font-weight:700; color:var(--fc);
  text-shadow:0 0 calc(10px*var(--s)) color-mix(in srgb, var(--fc) 60%, transparent);}
.fambar{display:flex; flex-wrap:wrap; justify-content:center; gap:calc(6px*var(--s)) calc(14px*var(--s));
  margin:calc(-4px*var(--s)) 0 calc(12px*var(--s));}
.fambar .fb{display:inline-flex; align-items:center; gap:calc(4px*var(--s)); color:var(--fc); opacity:.5;
  font-family:var(--cn); font-weight:700; font-size:calc(10px*var(--s)); letter-spacing:.08em;}
.fambar .fb.lit{opacity:1;}
.fambar .fb em{font-style:normal;}
.fambar .pips{display:flex; gap:calc(2px*var(--s));}
.fambar .pips i{width:calc(4px*var(--s)); height:calc(9px*var(--s)); background:rgba(123,114,150,.28);}
.fambar .pips i.on{background:currentColor;}
.fambar .pips i.gate{margin-right:calc(3px*var(--s)); box-shadow:0 calc(-2px*var(--s)) 0 0 currentColor;}
.fambar .fb b{font-family:var(--ui); font-size:calc(9px*var(--s));}
.fambar .fb small{font-size:calc(9px*var(--s)); letter-spacing:.1em;
  text-shadow:0 0 calc(8px*var(--s)) color-mix(in srgb, var(--fc) 60%, transparent);}
.melt{margin:calc(10px*var(--s)) 0 0; font-family:var(--cn); font-size:calc(10px*var(--s)); letter-spacing:.06em;
  color:color-mix(in srgb, var(--ember) 65%, var(--ash));}
.build .famhud{display:flex; gap:calc(5px*var(--s)); margin-left:calc(4px*var(--s));}
.build .famhud b{display:inline-flex; align-items:center; gap:calc(2px*var(--s)); color:var(--fc); opacity:.55;
  font-family:var(--ui); font-weight:700; font-size:calc(9px*var(--s)); font-variant-numeric:tabular-nums;}
.build .famhud b[data-l="1"]{opacity:1;}
.build .famhud b[data-l="2"]{opacity:1; text-shadow:0 0 calc(6px*var(--s)) currentColor;}
/* 窄屏：流派条只留徽记、层数和点亮——三个共鸣名会把它挤成两行，三张卡就装不进画框了。
   共鸣名在卡面的进度提示里会出现，不靠这里。 */
@media (max-width:460px){ .fambar .fb small{display:none;} .fambar{margin-bottom:calc(7px*var(--s));} .melt{margin-top:calc(6px*var(--s));} }