/* 班级点名抽选 · G的召唤台
   深色星空主题；抽卡演出相关类以 .st- / .gcard 前缀（fx.js 用）。
   约定：颜色走变量；不要写死浅色底（这套只有深色主题）。 */
:root{
  --bg:#0b1023;
  --panel:rgba(20,29,56,.72);
  --panel-2:rgba(28,40,74,.72);
  --line:rgba(126,156,220,.22);
  --ink:#e8eeff; --ink2:#a7b6d8; --ink3:#7183a8;
  --pri:#5b8cff; --pri-2:#7c5cff; --pri-d:#3f6ae0;
  --ok:#22c98b; --warn:#ffb020; --bad:#ff5d6c;
  --n:#c9d6ea; --r:#63b3ff; --sr:#c58bff; --ssr:#ffcf4d;
  --radius:16px;
  --shadow:0 10px 34px rgba(4,10,30,.5);
  --glow:0 0 26px rgba(91,140,255,.35);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%}
body{
  background:
    radial-gradient(1200px 780px at 18% -12%, #1b2a5e 0%, transparent 62%),
    radial-gradient(940px 720px at 104% -4%, #3b1d5e 0%, transparent 58%),
    radial-gradient(900px 700px at 50% 118%, #122a4e 0%, transparent 60%),
    var(--bg);
  color:var(--ink);
  font:15px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei","PingFang SC","Hiragino Sans GB",Roboto,sans-serif;
  -webkit-text-size-adjust:100%;
}
a{color:var(--pri);text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit}
input,select,textarea{font:inherit;color:inherit}
kbd{background:rgba(255,255,255,.1);border:1px solid var(--line);border-radius:6px;padding:0 6px;font-size:12.5px}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(140,170,230,.32);border-radius:8px}
#sky{position:fixed;inset:0;z-index:0;pointer-events:none}
.nebula{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background:
    radial-gradient(520px 320px at 12% 22%, rgba(90,140,255,.16), transparent 70%),
    radial-gradient(640px 360px at 88% 12%, rgba(190,110,255,.14), transparent 70%),
    radial-gradient(520px 420px at 62% 96%, rgba(80,220,255,.10), transparent 70%);
  animation:neb 26s ease-in-out infinite alternate}
@keyframes neb{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-2%,1.5%,0) scale(1.06)}}
#app{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:26px 18px 40px}
.foot{position:relative;z-index:1;padding:22px 18px 30px;text-align:center;color:var(--ink3);font-size:12.5px;line-height:2}
.foot a{color:var(--ink3)}
.foot .police img{height:12px;vertical-align:-1px;margin-right:3px;opacity:.85}
.foot-brand{color:var(--ink2)}

/* ---------------- 通用 ---------------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);
  backdrop-filter:blur(6px)}
.card+.card,.card+.features,.features+.card{margin-top:16px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.card-head h2{margin:0;font-size:17px;letter-spacing:.4px}
h3.mt{margin:20px 0 8px;font-size:15px}
.mt12{margin-top:12px}
.muted{color:var(--ink3)}
.small{font-size:12.5px}
.tiny{font-size:11.5px;line-height:1.7}
.pill{font-size:12.5px;color:var(--ink2);background:rgba(120,160,255,.12);border:1px solid var(--line);
  border-radius:999px;padding:2px 11px}
.pill b{color:var(--ssr);letter-spacing:1px}
.row{display:flex;align-items:center;gap:10px}
.wrap{flex-wrap:wrap}
.gap8{gap:8px}
.btn-row{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.btn-row.center{justify-content:center}
.empty{padding:26px 12px;text-align:center;color:var(--ink3)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{font-size:12.5px;background:rgba(120,160,255,.1);border:1px solid var(--line);border-radius:9px;padding:2px 9px}
.chip i{font-style:normal}

.btn{border:1px solid var(--line);background:rgba(255,255,255,.05);border-radius:11px;padding:8px 15px;font-size:14px;
  transition:.16s;display:inline-flex;align-items:center;gap:6px;line-height:1.4}
.btn:hover{background:rgba(255,255,255,.1);border-color:rgba(140,180,255,.4)}
.btn.pri{background:linear-gradient(135deg,#5b8cff,#7c5cff);border-color:transparent;color:#fff;
  box-shadow:0 6px 18px rgba(91,120,255,.35)}
.btn.pri:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent}
.btn.danger{color:#ffb3ba;border-color:rgba(255,110,125,.4)}
.btn.danger:hover{background:rgba(255,90,110,.14)}
.btn.lg{padding:12px 22px;font-size:15.5px;border-radius:13px}
.btn.mini{padding:2px 9px;font-size:12.5px;border-radius:8px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.chip-btn{padding:7px 12px;font-size:13px;border-radius:999px}
.btn.chip-btn.on{background:linear-gradient(135deg,rgba(91,140,255,.35),rgba(124,92,255,.35));border-color:rgba(150,180,255,.55);
  color:#fff;box-shadow:0 0 14px rgba(91,140,255,.25)}

.inp,.sel,.txta{border:1px solid rgba(140,170,230,.32);border-radius:11px;padding:8px 12px;background:rgba(9,15,34,.72);outline:none}
.inp:focus,.sel:focus,.txta:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(91,140,255,.2)}
.inp.block,.txta.block,.sel.block{width:100%;display:block}
.inp.wide{min-width:230px;flex:1}
.txta{resize:vertical;line-height:1.6}
.lbl{display:block;font-size:12.5px;color:var(--ink2);margin:12px 0 5px}
.inp.code{letter-spacing:6px;font-size:20px;text-align:center;text-transform:uppercase}

.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;margin-top:12px}
.table-wrap.short{max-height:330px}
table.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
.tbl th{position:sticky;top:0;background:#16203c;text-align:left;padding:9px 11px;border-bottom:1px solid var(--line);
  color:var(--ink2);font-weight:600;white-space:nowrap;z-index:1}
.tbl td{padding:6px 10px;border-bottom:1px solid rgba(126,156,220,.12);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .idx{color:var(--ink3);width:42px}
.inp.cell{padding:5px 9px;border-radius:9px;width:100%;min-width:90px}
.inp.cell.no{min-width:110px}
.inp.cell.grp{min-width:80px}
.sel.cell{padding:5px 6px;border-radius:9px}

/* 弹窗 / toast */
#modal{position:fixed;inset:0;z-index:60;background:rgba(5,9,22,.66);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:18px}
.mbox{position:relative;max-width:560px;width:100%;max-height:90vh;overflow:auto;background:#131c38;
  border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.mbox.wide{max-width:760px}
.mbox h3{margin:0 0 6px;font-size:17px}
.mbox p{margin:6px 0 12px;line-height:1.75;font-size:14px}
.mx{position:absolute;top:12px;right:12px;background:transparent;border:none;font-size:17px;color:var(--ink3)}
.mx:hover{color:var(--ink)}
#toastWrap{position:fixed;left:0;right:0;bottom:26px;z-index:70;display:flex;flex-direction:column;align-items:center;gap:8px;
  pointer-events:none;padding:0 14px}
.toast{background:rgba(20,30,58,.94);border:1px solid var(--line);color:var(--ink);border-radius:12px;padding:9px 18px;
  font-size:14px;box-shadow:var(--shadow);opacity:0;transform:translateY(8px);animation:tin .22s forwards}
.toast.out{opacity:0;transition:.4s}
.toast.err{border-color:rgba(255,110,125,.5);color:#ffd3d8}
.toast.ok{border-color:rgba(60,220,150,.45);color:#c8ffe6}
@keyframes tin{to{opacity:1;transform:none}}

/* ---------------- 首页 ---------------- */
.hero{text-align:center;padding:26px 8px 8px}
.hero-crystal{position:relative;width:132px;height:132px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center}
.hero-crystal b{font-size:44px;color:#cfe0ff;text-shadow:0 0 22px rgba(120,180,255,.9),0 0 60px rgba(150,110,255,.7);
  animation:bob 4.6s ease-in-out infinite}
.hero-crystal i{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(150,190,255,.45);
  animation:ringPulse 4s ease-out infinite}
.hero-crystal .cr2{animation-delay:1.3s}
.hero-crystal::before{content:"";position:absolute;inset:14px;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(124,92,255,.5),rgba(91,140,255,.5),rgba(80,220,255,.5),rgba(124,92,255,.5));
  filter:blur(16px);opacity:.6;animation:spin 12s linear infinite}
@keyframes ringPulse{0%{transform:scale(.86);opacity:.85}70%{transform:scale(1.18);opacity:0}100%{opacity:0}}
@keyframes bob{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
.hero-title{margin:0;font-size:38px;letter-spacing:3px;
  background:linear-gradient(100deg,#dbe7ff,#9cc0ff 40%,#d9a9ff 70%,#ffe08a);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{color:var(--ink2);margin-top:8px;font-size:14.5px}
.hero-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:22px 0 12px}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px}
.rcard{position:relative;border:1px solid var(--line);border-radius:14px;padding:13px 14px;background:var(--panel-2);
  cursor:pointer;transition:.16s}
.rcard:hover{transform:translateY(-2px);border-color:rgba(150,185,255,.5);box-shadow:0 10px 26px rgba(20,40,110,.4)}
.rc-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rc-title{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-del{background:none;border:none;color:var(--ink3);font-size:13px;padding:2px 4px}
.rc-del:hover{color:var(--bad)}
.rc-meta{color:var(--ink3);font-size:12.5px;margin-top:5px}
.rc-meta b{color:var(--ssr);letter-spacing:1px}
.rc-go{margin-top:9px;color:var(--pri);font-size:13px}
.features{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:16px}
.feat{border:1px solid var(--line);border-radius:14px;padding:14px;background:rgba(255,255,255,.03)}
.feat b{display:block;font-size:14.5px;margin-bottom:5px}
.feat span{color:var(--ink3);font-size:13px;line-height:1.7}

/* ---------------- 抽选台 ---------------- */
.gacha{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);
  overflow:hidden}                     /* 裁掉装饰圆环：否则窄屏会被 380~500px 的圆环撑出横向滚动条 */
.g-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.g-title{display:flex;align-items:center;gap:10px;min-width:0}
.g-title h2{margin:0;font-size:19px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-back{border:1px solid var(--line);border-radius:10px;width:32px;height:32px;display:flex;align-items:center;
  justify-content:center;color:var(--ink2);flex:0 0 auto}
.g-back:hover{background:rgba(255,255,255,.08)}
.g-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.g-tools .sel{padding:7px 10px;border-radius:999px;font-size:13px}
.g-stat{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.stat-pill{font-size:13px;color:var(--ink2);background:rgba(255,255,255,.05);border:1px solid var(--line);
  border-radius:999px;padding:4px 13px}
.stat-pill b{color:var(--ink);font-variant-numeric:tabular-nums}
.g-stage{margin-top:20px;padding:26px 10px 8px;text-align:center;border-radius:20px;
  background:radial-gradient(600px 320px at 50% 10%, rgba(91,140,255,.16), transparent 70%)}
.g-core{position:relative;display:flex;gap:34px;justify-content:center;align-items:center;flex-wrap:wrap;min-height:230px}
.core-ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid rgba(150,190,255,.18);
  transform:translate(-50%,-50%);pointer-events:none}
.core-ring.r1{width:290px;height:290px}
.core-ring.r2{width:390px;height:390px;border-style:dashed;animation:spin 40s linear infinite}
.core-ring.r3{width:500px;height:500px;opacity:.5}
@keyframes spin{to{transform:rotate(360deg)}}
.summon{position:relative;border-radius:50%;border:none;color:#fff;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;transition:transform .16s,filter .16s;z-index:2}
.summon:hover{transform:translateY(-2px) scale(1.02)}
.summon:active{transform:scale(.97)}
.summon .s-ico{font-size:15px;opacity:.9;letter-spacing:3px}
.summon .s-sub{font-size:11.5px;opacity:.8}
.summon.ten{width:196px;height:196px;font-size:22px;font-weight:700;letter-spacing:2px;
  background:
    radial-gradient(circle at 50% 34%, rgba(255,255,255,.3), transparent 46%),
    conic-gradient(from 210deg,#ffd75e,#ff8a5c,#ff6bd6,#7cc4ff,#7cffb2,#ffd75e);
  box-shadow:0 0 34px rgba(255,190,90,.4),0 0 80px rgba(140,110,255,.35)}
.summon.ten::before{content:"";position:absolute;inset:7px;border-radius:50%;
  background:linear-gradient(160deg,#1a2350,#2b1b52 55%,#12203f)}
.summon.ten::after{content:"";position:absolute;inset:7px;border-radius:50%;
  background:radial-gradient(circle at 50% 26%, rgba(255,255,255,.28), transparent 52%);
  animation:hue 6s linear infinite}
.summon.ten>*{position:relative;z-index:2}
@keyframes hue{0%,100%{opacity:.5}50%{opacity:1}}
.summon.one{width:132px;height:132px;font-size:16.5px;font-weight:600;
  background:radial-gradient(circle at 50% 30%, #6fa4ff, #3a5fd0 62%, #26398f);
  box-shadow:0 0 22px rgba(91,140,255,.45)}
.g-hint{margin-top:18px;color:var(--ink3);font-size:12.5px}
.g-recent{margin-top:16px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rc-chip{font-size:13px;border-radius:9px;padding:2px 10px;border:1px solid var(--line);background:rgba(255,255,255,.05)}
.rc-chip.rar-N{color:var(--n)}
.rc-chip.rar-R{color:var(--r);border-color:rgba(99,179,255,.45)}
.rc-chip.rar-SR{color:var(--sr);border-color:rgba(197,139,255,.5)}
.rc-chip.rar-SSR{color:var(--ssr);border-color:rgba(255,207,77,.6);box-shadow:0 0 12px rgba(255,207,77,.25)}
.g-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;padding-top:14px;border-top:1px solid var(--line)}

/* ---------------- 抽卡演出舞台 ---------------- */
body.summoning{overflow:hidden}
#stage{position:fixed;inset:0;z-index:50;background:rgba(4,7,18,.92);overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.st-px{position:absolute;inset:0;pointer-events:none;z-index:6}
.st-bg{position:absolute;inset:0;
  background:radial-gradient(760px 520px at 50% 46%, rgba(70,110,220,.22), transparent 70%),
             radial-gradient(560px 420px at 50% 100%, rgba(140,80,255,.18), transparent 70%)}
.st-rings i{position:absolute;left:50%;top:50%;width:46vmin;height:46vmin;margin:-23vmin;border-radius:50%;
  border:2px solid rgba(170,205,255,.5);opacity:0}
.stage.charging .st-rings i{animation:ringIn .95s cubic-bezier(.2,.8,.2,1) forwards}
.stage.charging .st-rings i:nth-child(2){animation-delay:.14s}
.stage.charging .st-rings i:nth-child(3){animation-delay:.28s}
@keyframes ringIn{0%{transform:scale(2.1);opacity:.05}55%{opacity:.85}100%{transform:scale(.28);opacity:0}}
.st-beam{position:absolute;left:50%;top:-12%;width:min(340px,46vw);height:132%;transform:translateX(-50%) scaleY(.02);
  transform-origin:50% 100%;opacity:0;
  background:linear-gradient(180deg,rgba(190,225,255,0) 0%,rgba(190,225,255,.5) 46%,rgba(255,255,255,.85) 60%,rgba(190,225,255,0) 100%);
  filter:blur(7px)}
.stage.beam .st-beam{animation:beamRise 1s ease-out forwards}
@keyframes beamRise{0%{opacity:0;transform:translateX(-50%) scaleY(.02)}25%{opacity:1}
  70%{transform:translateX(-50%) scaleY(1);opacity:.9}100%{transform:translateX(-50%) scaleY(1.06);opacity:0}}
.st-omen{position:absolute;inset:0;opacity:0;transition:opacity .4s;
  background:radial-gradient(52vmin 52vmin at 50% 52%, rgba(255,215,110,.34), transparent 72%)}
.stage.omen-gold .st-omen{opacity:1;animation:omenPulse 1.05s ease-in-out infinite alternate}
.stage.omen-purple .st-omen{opacity:.85;animation:omenPulse 1.2s ease-in-out infinite alternate;
  background:radial-gradient(50vmin 50vmin at 50% 52%, rgba(180,120,255,.34), transparent 72%)}
@keyframes omenPulse{from{transform:scale(.96)}to{transform:scale(1.05)}}
.st-sweep{position:absolute;top:-10%;bottom:-10%;left:-70%;width:52%;opacity:0;transform:skewX(-14deg);
  background:linear-gradient(90deg,transparent,rgba(255,215,110,.85),rgba(255,140,120,.8),rgba(255,110,215,.8),rgba(130,200,255,.8),rgba(140,255,190,.75),transparent);
  filter:blur(2px);z-index:5;pointer-events:none}
.st-sweep.run{animation:sweepRun 1.15s cubic-bezier(.3,.7,.2,1)}
@keyframes sweepRun{0%{left:-70%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:112%;opacity:0}}
.st-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:7}
.stage.shake{animation:shake .42s}
.stage.shake-big{animation:shakeBig .78s}
@keyframes shake{0%,100%{transform:translate(0,0)}25%{transform:translate(-5px,3px)}
  50%{transform:translate(4px,-3px)}75%{transform:translate(-3px,-2px)}}
@keyframes shakeBig{0%,100%{transform:translate(0,0) scale(1)}15%{transform:translate(-11px,6px) scale(1.01)}
  32%{transform:translate(9px,-7px) scale(1.012)}50%{transform:translate(-7px,4px) scale(1.008)}
  68%{transform:translate(6px,-4px) scale(1.006)}84%{transform:translate(-3px,2px) scale(1.003)}}
/* 网格宽度由"两排卡必须放得下"反推：卡高 = 列宽×1.28，2 排 + 间距 + 内边距 ≤ 80vh
   → 宽度上限 ≈ (80vh − 34px) × 1.95（比理论值再留 ~90px 余量）。这样任何窗口高度都不用滚动。
   overflow 用 visible：卡牌外发光（.gcard-aura inset:-16%）超出网格盒子时不该触发滚动条；
   真装不下时由 #stage 的 overflow:hidden 兜底裁切，窄屏（≤900px，排数变多）才允许滚动。 */
.st-grid{position:relative;z-index:8;display:grid;gap:clamp(7px,1.5vw,18px);
  width:min(1240px,94vw,calc((80vh - 34px) * 1.95));
  max-height:84vh;overflow:visible;padding:6px;align-content:center}
.stage.one .st-grid{display:flex;align-items:center;justify-content:center;width:auto;max-height:none;overflow:visible}
.stage.ten .st-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
/* 十连卡略扁一点：1440×900 下两排要能"一屏看全"，不靠滚动 */
.stage.ten .gcard{aspect-ratio:5/6.4}
/* 矮屏（不少教室一体机是 768~820 高）：藏掉台词行，保证 10 张卡不滚动 */
@media(max-height:840px){
  .stage.ten .gcard{aspect-ratio:5/5.9}
  .stage.ten .gcf-flav{display:none}
}
.st-title{position:absolute;top:26px;left:0;right:0;text-align:center;font-size:15px;letter-spacing:6px;color:var(--ink2);z-index:9}
.st-title:empty{display:none}
.st-foot{position:absolute;left:0;right:0;bottom:0;z-index:10;padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;pointer-events:none;transition:.35s;
  background:linear-gradient(180deg,transparent,rgba(4,8,20,.86) 46%)}
.st-foot.on{opacity:1;pointer-events:auto}
.stf-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.stf-note{font-size:12px;color:var(--ink3)}
.st-skip{position:absolute;top:calc(14px + env(safe-area-inset-top));right:14px;z-index:12;
  background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--ink2);border-radius:999px;
  padding:6px 14px;font-size:13px}
.st-skip:hover{background:rgba(255,255,255,.16);color:#fff}
.st-stage .st-tapnote,.st-tapnote{position:absolute;left:14px;bottom:14px;z-index:12;font-size:11.5px;color:var(--ink3)}
.stage.revealed .st-tapnote,.stage.revealed .st-skip{display:none}

/* 卡牌 */
.gwrap{perspective:1200px}
.gcard{position:relative;width:100%;aspect-ratio:5/7;opacity:0;transform:translateY(46px) scale(.62);
  transition:opacity .42s ease-out,transform .5s cubic-bezier(.2,.9,.25,1.25)}
.stage.one .gcard{width:min(330px,74vw)}
.gcard.in{opacity:1;transform:none}
.gcard.done{opacity:1;transform:none}
/* .instant = 强制终态：卡片入场（外层）与翻面（内层 .gcard-in）都不依赖 transition 是否推进。
   跳过演出、快速模式、以及"环境不产帧"时靠它保证学生名字一定露出来（踩过：只加 done 时停在卡背） */
.gcard.instant,.gcard.instant .gcard-in{transition:none!important}
.gcard-aura{position:absolute;inset:-16%;border-radius:50%;opacity:0;filter:blur(16px);z-index:0;pointer-events:none;
  transition:opacity .5s}
.gcard.done[data-r="N"] .gcard-aura{opacity:.4;background:radial-gradient(circle,rgba(190,210,240,.55),transparent 66%)}
.gcard.done[data-r="R"] .gcard-aura{opacity:.55;background:radial-gradient(circle,rgba(99,179,255,.6),transparent 66%)}
.gcard.done[data-r="SR"] .gcard-aura{opacity:.7;background:radial-gradient(circle,rgba(197,139,255,.7),transparent 68%);
  animation:auraP 1.6s ease-in-out infinite alternate}
.gcard.done[data-r="SSR"] .gcard-aura{opacity:.95;background:radial-gradient(circle,rgba(255,207,77,.85),transparent 70%);
  animation:auraP 1.2s ease-in-out infinite alternate}
@keyframes auraP{from{transform:scale(.94)}to{transform:scale(1.08)}}
.gcard-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .62s cubic-bezier(.3,.75,.2,1)}
.gcard.done .gcard-in{transform:rotateY(180deg)}
.gcard-back,.gcard-face{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.gcard-back{background:
    radial-gradient(circle at 50% 30%, rgba(120,160,255,.28), transparent 58%),
    linear-gradient(160deg,#1b2450,#141a3a 60%,#0f1430);
  border:1px solid rgba(150,185,255,.45);box-shadow:inset 0 0 30px rgba(90,130,255,.25)}
.gcb-emblem{font-size:clamp(22px,3.2vw,40px);color:#cfe0ff;text-shadow:0 0 18px rgba(140,180,255,.9)}
.gcb-txt{margin-top:6px;font-size:clamp(9px,1.1vw,12px);letter-spacing:2px;color:rgba(200,215,255,.7)}
.gcard-face{transform:rotateY(180deg);gap:clamp(2px,.5vw,6px);
  background:linear-gradient(168deg,#1a2442,#0f1734 62%,#0b1226);
  border:1.5px solid rgba(150,185,255,.4);padding:clamp(6px,1.2vw,14px)}
.gcard[data-r="R"] .gcard-face{background:linear-gradient(168deg,#12294a,#0b1a35 60%,#081226);border-color:rgba(99,179,255,.7);
  box-shadow:inset 0 0 26px rgba(99,179,255,.22)}
.gcard[data-r="SR"] .gcard-face{background:linear-gradient(168deg,#251a4e,#140d2c 60%,#0c0820);border-color:rgba(197,139,255,.8);
  box-shadow:inset 0 0 30px rgba(197,139,255,.26)}
.gcard[data-r="SSR"] .gcard-face{background:linear-gradient(168deg,#3a2b12,#1d1306 62%,#120c04);border-color:rgba(255,207,77,.95);
  box-shadow:inset 0 0 34px rgba(255,207,77,.3),0 0 26px rgba(255,190,70,.35)}
.gcf-rain{position:absolute;inset:-45%;opacity:0;z-index:0;
  background:conic-gradient(from 0deg,rgba(255,215,94,.55),rgba(255,138,92,.5),rgba(255,107,214,.5),rgba(124,196,255,.5),rgba(124,255,178,.5),rgba(255,215,94,.55))}
.gcard[data-r="SSR"] .gcf-rain{opacity:.22;animation:spin 7s linear infinite}
.gcf-top{position:relative;z-index:1;display:flex;align-items:center;gap:6px;width:100%;justify-content:space-between;
  padding:0 2px}
.gcf-rar{font-size:clamp(9.5px,1.15vw,13px);letter-spacing:1px;padding:1px 8px;border-radius:999px;
  border:1px solid currentColor;color:var(--n)}
.gcard[data-r="R"] .gcf-rar{color:var(--r)}
.gcard[data-r="SR"] .gcf-rar{color:var(--sr)}
.gcard[data-r="SSR"] .gcf-rar{color:var(--ssr);box-shadow:0 0 12px rgba(255,207,77,.4)}
.gcf-stars{font-size:clamp(9px,1vw,12px);color:var(--ssr);letter-spacing:1px;font-style:normal}
.gcf-stars i{font-style:normal}
.gcf-av{position:relative;z-index:1;width:clamp(38px,5.4vw,74px);height:clamp(38px,5.4vw,74px);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:clamp(19px,2.7vw,36px);font-weight:700;color:#fff;
  background:linear-gradient(150deg,#5b8cff,#7c5cff);border:2px solid rgba(200,220,255,.5);
  box-shadow:0 0 18px rgba(110,150,255,.45);margin:clamp(2px,.6vw,8px) 0}
.gcard[data-r="SR"] .gcf-av{background:linear-gradient(150deg,#a86bff,#6a3df0);box-shadow:0 0 20px rgba(190,130,255,.5)}
.gcard[data-r="SSR"] .gcf-av{background:linear-gradient(150deg,#ffd75e,#f08a2e);color:#3a2400;
  box-shadow:0 0 24px rgba(255,200,80,.6)}
.gcf-name{position:relative;z-index:1;font-size:clamp(15px,2.05vw,26px);font-weight:800;letter-spacing:1px;
  color:#f2f6ff;text-shadow:0 2px 12px rgba(20,40,110,.7);text-align:center;line-height:1.25;padding:0 4px;
  word-break:break-all}
.gcard[data-r="SSR"] .gcf-name{background:linear-gradient(100deg,#fff6d0,#ffd75e 45%,#ffb03a);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.gcf-meta{position:relative;z-index:1;font-size:clamp(9.5px,1.05vw,12.5px);color:var(--ink2)}
.gcf-flav{position:relative;z-index:1;font-size:clamp(9.5px,1.05vw,13px);color:#cfe0ff;opacity:.92;
  text-align:center;padding:0 8px;line-height:1.5}
.stage.one .gcf-name{font-size:clamp(30px,5.4vw,52px)}
.stage.one .gcf-av{width:clamp(78px,12vw,116px);height:clamp(78px,12vw,116px);font-size:clamp(38px,6vw,60px)}
.stage.one .gcf-flav{font-size:clamp(13px,1.7vw,18px)}
.stage.one .gcf-meta{font-size:clamp(11.5px,1.4vw,15px)}

/* ---------------- 导入 / 记录 ---------------- */
.imp-steps ol{margin:4px 0 6px;padding-left:20px}
.imp-prev{margin-top:12px}
.imp-note{border-radius:11px;padding:8px 12px;font-size:13px;margin-bottom:8px}
.imp-note.ok{background:rgba(34,201,139,.12);border:1px solid rgba(34,201,139,.35);color:#c8ffe6}
.imp-note.err{background:rgba(255,93,108,.12);border:1px solid rgba(255,93,108,.4);color:#ffd3d8}
.ro-wrap{text-align:center;padding:6px 4px}
.ro-ico{font-size:44px}
.ro-title{font-size:22px;font-weight:800;letter-spacing:2px;margin-top:4px}
.ro-sub{color:var(--ink2);margin:6px 0 14px}
.evlist{border:1px solid var(--line);border-radius:12px;overflow:hidden;max-height:420px;overflow-y:auto}
.ev{display:flex;gap:12px;align-items:baseline;padding:9px 12px;border-bottom:1px solid rgba(126,156,220,.12);font-size:14px}
.ev:last-child{border-bottom:none}
.ev-time{color:var(--ink3);font-size:12.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ev-mode{font-size:11.5px;border:1px solid var(--line);border-radius:999px;padding:1px 9px;color:var(--ink2);white-space:nowrap}
.ev-mode.ten{color:var(--ssr);border-color:rgba(255,207,77,.5)}
.ev-names{min-width:0}
.ev-names .rar-SSR{color:var(--ssr);font-weight:700}
.ev-names .rar-SR{color:var(--sr)}
.ev-names .rar-R{color:var(--r)}
.help h3{color:#cfe0ff}
.help p{color:var(--ink2);line-height:1.85;font-size:14px}

/* ---------------- 响应式 ---------------- */
@media(max-width:900px){
  /* 4 列时排数变多，宽度不再受"两排"公式约束（手机上允许滚动看结果） */
  .stage.ten .st-grid{grid-template-columns:repeat(4,minmax(0,1fr));width:min(1240px,94vw);max-height:74vh;overflow:auto}
}
@media(max-width:680px){
  #app{padding:18px 12px 30px}
  .hero-title{font-size:30px;letter-spacing:2px}
  .g-core{gap:22px;min-height:200px}
  .summon.ten{width:164px;height:164px;font-size:19px}
  .summon.one{width:112px;height:112px;font-size:15px}
  .core-ring.r2{width:300px;height:300px}
  .core-ring.r3{width:380px;height:380px}
  .g-stage{padding:18px 6px 6px}
  .stage.ten .st-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:70vh}
  .gcf-flav{display:none}
  .st-skip{top:10px;right:10px;padding:5px 11px;font-size:12.5px}
  .st-foot{padding:12px 10px calc(14px + env(safe-area-inset-bottom))}
  .stf-row .btn.lg{padding:10px 14px;font-size:14px}
}
@media(max-width:420px){
  .stage.ten .st-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gcf-meta{display:none}
}
@media(min-width:1400px){
  #app{max-width:1180px}
  .stage.one .gcard{width:min(400px,60vw)}
}
@media(prefers-reduced-motion:reduce){
  .nebula,.hero-crystal b,.hero-crystal::before,.core-ring.r2,.gcf-rain,
  .gcard-aura,.gcard.done[data-r="SR"] .gcard-aura,.gcard.done[data-r="SSR"] .gcard-aura{animation:none!important}
  .gcard-in{transition:transform .3s}
  .stage.shake,.stage.shake-big{animation:none}
}