/* ================= 战局统计（js/ui/stats-ui.js） ================= */
#overScreen{overflow-y:auto;overscroll-behavior:contain;isolation:isolate}
#overScreen.st-on{background:rgba(4,3,2,.97)}
.over-list[hidden]{display:none}
/* 统计很长，「再来一局」贴在屏幕底边，不用滚到底才点得到 */
#overScreen.st-on #btnAgain{position:sticky;bottom:14px;z-index:2;box-shadow:0 6px 24px rgba(0,0,0,.7),0 0 0 6px rgba(4,3,2,.6)}
#overScreen .over-inner{position:relative;z-index:1;width:min(1060px,100%);margin:auto;padding:28px 16px 36px}
#overFx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
/* 结算页不透明，底下的对局界面藏掉：余烬、旗帜、锁定圈那些循环动画不再在背后空转 */
#gameScreen.st-behind{display:none}
/* 背后一圈慢慢转的光芒，输了换成冷灰 */
#overScreen::before{content:'';position:fixed;inset:-50%;pointer-events:none;z-index:0;
  background:repeating-conic-gradient(from 0deg,rgba(232,200,106,.07) 0 5deg,transparent 5deg 15deg);
  -webkit-mask:radial-gradient(circle at 50% 34%,#000 0,transparent 26%);mask:radial-gradient(circle at 50% 34%,#000 0,transparent 26%);
  animation:stSpin 80s linear infinite}
#overScreen.st-lost::before{background:repeating-conic-gradient(from 0deg,rgba(150,170,200,.05) 0 5deg,transparent 5deg 15deg)}
@keyframes stSpin{to{transform:rotate(360deg)}}

/* 胜利 / 失败 砸下来，带一圈冲击波 */
#overTitle{position:relative}
#overScreen:not(.hidden) #overTitle{animation:stTitle .9s cubic-bezier(.2,1.35,.4,1) both}
#overScreen:not(.hidden) #overTitle::after{content:'';position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;
  border-radius:50%;border:2px solid var(--gold);opacity:0;pointer-events:none;animation:stRing 1.1s .4s ease-out both}
.st-lost #overTitle::after{border-color:#8f9aa3!important}
#overScreen:not(.hidden) #overDesc{animation:stFade .6s .5s both}
@keyframes stTitle{0%{opacity:0;transform:scale(2.6);filter:blur(12px)}60%{opacity:1;filter:blur(0)}100%{transform:scale(1)}}
@keyframes stRing{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(10)}}
@keyframes stFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.st-board{margin:18px auto 24px;text-align:left}
.st-board[hidden]{display:none}

/* ---- 标题 ---- */
.st-head{position:relative;text-align:center;margin-bottom:16px}
.st-title{display:inline-flex;align-items:center;gap:.45em;font-size:28px;font-weight:700;color:var(--gold-l);
  text-shadow:0 0 18px rgba(232,200,106,.55),0 2px 0 #5a4210}
.st-title::before,.st-title::after{content:'';width:clamp(40px,12vw,140px);height:1px;margin:0 .4em;
  background:linear-gradient(90deg,transparent,var(--gold))}
.st-title::after{background:linear-gradient(90deg,var(--gold),transparent)}
.st-title span{display:inline-block;animation:stChar .6s cubic-bezier(.2,1.4,.4,1) both}
.st-title span:nth-child(1){animation-delay:.55s}.st-title span:nth-child(2){animation-delay:.64s}
.st-title span:nth-child(3){animation-delay:.73s}.st-title span:nth-child(4){animation-delay:.82s}
@keyframes stChar{0%{opacity:0;transform:translateY(-26px) scale(1.6);filter:blur(6px)}100%{opacity:1;transform:none;filter:none}}
.st-summary{margin-top:6px;color:#cbb88f;font-size:14px;letter-spacing:.05em;animation:stFade .6s .95s both}
.st-summary i{margin:0 .7em;color:var(--gold-d);font-style:normal}

/* ---- 行 ---- */
.st-rows{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.st-row{position:relative;display:grid;grid-template-columns:44px 64px minmax(0,1fr) 124px 86px;align-items:center;gap:12px;
  padding:10px 14px;border-radius:10px;overflow:hidden;
  background:linear-gradient(90deg,rgba(44,32,20,.94),rgba(22,17,12,.9));
  border:1px solid rgba(232,200,106,.18);box-shadow:0 8px 24px rgba(0,0,0,.45);
  opacity:0;transform:translateY(-38px) scale(.96)}
/* 从顶上落下来；已经在榜上的往下挤由 js 的 FLIP 动画负责。只动 transform / opacity，不做模糊。
   每行常驻自己的合成层：新插一行时，下面几行只是整块往下滑，不用每次临时建层、连阴影一起重画 */
.st-row{will-change:transform}
.st-row.in{opacity:1;transform:none;
  transition:opacity .4s,transform .6s cubic-bezier(.2,1.3,.4,1)}
.st-row.me{border-color:rgba(120,190,255,.55);box-shadow:0 0 0 1px rgba(120,190,255,.2),0 8px 24px rgba(0,0,0,.45)}
.st-row.dead .st-face{filter:grayscale(.85) brightness(.7)}
.st-drumroll .st-row.in:not(.mvp){opacity:.45;transition:opacity .35s}

.st-rank{font:italic 700 26px/1 Georgia,"Times New Roman",serif;color:#8f805f;text-align:center}
.st-row:nth-child(2) .st-rank{color:#dfe4ee;text-shadow:0 0 10px rgba(220,230,255,.4)}
.st-row:nth-child(3) .st-rank{color:#d69b62;text-shadow:0 0 10px rgba(214,155,98,.35)}
.st-crown{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:6px;font-size:22px;font-weight:700;font-style:normal;
  color:#3a2500;background:linear-gradient(145deg,#ffe8a0,#c9951f 60%,#8a5a0c);box-shadow:0 0 18px rgba(255,210,110,.75);transform:rotate(-6deg)}

.st-face{position:relative;width:64px;height:64px;border-radius:50%;overflow:hidden;background:#241a12 center/cover no-repeat;
  border:2px solid rgba(232,200,106,.5);box-shadow:0 0 0 3px rgba(0,0,0,.35)}
.st-face svg{width:100%;height:100%;display:block}
.st-face.img-bg svg{display:none}
.mvp .st-face{border-color:#ffd978;box-shadow:0 0 0 3px rgba(0,0,0,.35),0 0 20px rgba(255,200,90,.7)}

.st-main{min-width:0}
.st-who{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.st-who b{font-size:18px;color:#f3e6c4;letter-spacing:.06em}
.st-id{font-size:12px;padding:1px 7px;border-radius:3px;border:1px solid;letter-spacing:.1em}
.st-id.zhu{background:linear-gradient(90deg,#c9a227,#8a6a14);color:#fff;border-color:#f0d78a}
.st-id.zhong{background:#2c5f9e;color:#dbe9ff;border-color:#6ba0e0}
.st-id.fan{background:#8f2f28;color:#ffd9d4;border-color:#d4685c}
.st-id.nei{background:#5b3a86;color:#e6d6ff;border-color:#a37fd4}
.st-id.nong{background:#256b3c;color:#dcf7e2;border-color:#6cc58a}
.st-id.chu{background:linear-gradient(90deg,#c0391b,#7a1a0c);color:#ffe7c2;border-color:#f2b45c}
.st-id.ci{background:linear-gradient(90deg,#1f8a4c,#0b3d22);color:#dcffe8;border-color:#d9b860}
/* 继位的储君：「储君 → 主公」两枚身份牌 */
.st-arrow{margin:0 -2px;font-size:12px;color:#e8c86a;opacity:.8}
.st-id.ye{background:linear-gradient(90deg,#1f47d6,#0c1f6e);color:#d8f1ff;border-color:#6cc0ff}
.st-state{font-size:12px;color:#8fd08f}
.dead .st-state{color:#c98a80}
.st-me{font-size:11px;padding:0 7px;border-radius:9px;background:#2d6bb0;color:#fff;line-height:18px}
/* ---- 战绩标签 ----
   外层 .st-tag 管入场和背后的光晕，.st-tag-body 用 clip-path 裁成平行四边形。
   不用 skew（斜着的文字每次都得重新光栅化），也不用 box-shadow 发光（大模糊半径很费光栅，
   而且会被 clip-path 裁掉）：光晕是背后一层径向渐变，要动也只动透明度。
   越稀有越炫：稀有有扫光，史诗加光晕、扫得更快，传说的光晕会呼吸、落地是砸下来的，神话是流动的彩虹。
   循环动画全是 transform / opacity，交给合成器，不重绘。 */
.st-tags{display:flex;flex-wrap:wrap;gap:7px 8px;margin:6px 0 2px}
.st-tag{--tag-bg:linear-gradient(90deg,#f7d98a,#d5a63e);--tag-fg:#2a1a05;
  position:relative;display:inline-block;font-style:normal;cursor:help;outline:none;isolation:isolate;
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  opacity:0;transform:translateY(6px) scale(.8);
  transition:opacity .3s calc(.25s + var(--i,0)*.12s),transform .45s cubic-bezier(.3,1.6,.5,1) calc(.25s + var(--i,0)*.12s)}
.stamped .st-tag{opacity:1;transform:none}
.st-tag-body{--cut:6px;position:relative;display:block;overflow:hidden;padding:0 12px;
  clip-path:polygon(var(--cut) 0,100% 0,calc(100% - var(--cut)) 100%,0 100%);
  font-size:12.5px;line-height:22px;letter-spacing:.08em;font-weight:700;color:var(--tag-fg);background:var(--tag-bg)}
.st-tag-txt{position:relative;z-index:1;display:block;white-space:nowrap;font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif}
.st-tag:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:3px}
@media (hover:hover){.st-tag:hover .st-tag-body{filter:brightness(1.15)}}
/* 本局之最 */
.tg-kills{--tag-bg:linear-gradient(90deg,#ff9a7a,#c8402c);--tag-fg:#2a0600}
.tg-saves{--tag-bg:linear-gradient(90deg,#a8f0b0,#3f9f59);--tag-fg:#062a0e}
.tg-damage{--tag-bg:linear-gradient(90deg,#ffc98a,#dd7a22);--tag-fg:#2a1200}
.tg-tank{--tag-bg:linear-gradient(90deg,#c9d6e6,#6f86a3);--tag-fg:#0d1826}
/* 糗事 */
.t-shame{--tag-bg:repeating-linear-gradient(135deg,#3b3b3b 0 6px,#2f2f2f 6px 12px);--tag-fg:#a8a8a8}
/* 稀有：金 */
.t-rare{--tag-bg:linear-gradient(90deg,#fff1b0,#f0c14b 45%,#b9831c);--tag-fg:#3a2300}
/* 史诗：紫 */
.t-epic{--tag-bg:linear-gradient(90deg,#f4c2ff,#b451e6 42%,#5a1a9c);--tag-fg:#fff;--glow:rgba(190,90,255,.6)}
.t-epic .st-tag-body{--cut:7px;font-size:13.5px;line-height:23px;font-weight:700;text-shadow:0 1px 1px #3a0a5a}
/* 传说：烈焰 */
.t-legendary{--tag-bg:linear-gradient(90deg,#fff3b0,#ffae3b 28%,#ff4d1f 68%,#9e1208);--tag-fg:#fff;--glow:rgba(255,110,40,.75)}
.t-legendary .st-tag-body{--cut:8px;font-size:14.5px;line-height:25px;padding:0 15px;font-weight:800;letter-spacing:.14em;text-shadow:0 1px 1px #5a0a00}
/* 神话：流动彩虹 */
.t-mythic{--tag-bg:#12081e;--tag-fg:#fff}
.t-mythic .st-tag-body{--cut:9px;font-size:15.5px;line-height:27px;padding:0 17px;font-weight:900;letter-spacing:.16em;text-shadow:0 1px 2px #000,0 0 1px #000}
.t-mythic .st-tag-body::before{content:'';position:absolute;top:0;bottom:0;left:0;width:300%;opacity:.92;
  background:linear-gradient(90deg,#ff3d6e,#ffb13d,#f7ff5a,#3dffa8,#3dc5ff,#a45bff,#ff3d6e,#ffb13d,#f7ff5a,#3dffa8,#3dc5ff,#a45bff,#ff3d6e);
  animation:stRainbow 2.6s linear infinite}
.t-mythic .st-tag-txt::before{content:'✦ ';color:#fff}
.t-mythic .st-tag-txt::after{content:' ✦';color:#fff}
@keyframes stRainbow{to{transform:translateX(-50%)}}
/* 扫光：稀有以上 */
.t-rare .st-tag-body::after,.t-epic .st-tag-body::after,.t-legendary .st-tag-body::after,.t-mythic .st-tag-body::after{
  content:'';position:absolute;top:0;bottom:0;left:0;width:40%;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);transform:translateX(-130%);
  animation:stTagSheen var(--sheen,3.6s) ease-in-out calc(var(--i,0)*.3s + 1s) infinite}
.t-epic{--sheen:2.8s}.t-legendary{--sheen:2.2s}.t-mythic{--sheen:1.8s}
@keyframes stTagSheen{0%,50%{transform:translateX(-130%)}100%{transform:translateX(330%)}}
/* 光晕：史诗静止，传说、神话呼吸；稀有只有扫光 */
.t-epic::before,.t-legendary::before,.t-mythic::before{content:'';position:absolute;inset:-8px -10px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,var(--glow,transparent),transparent);opacity:.8}
.t-legendary::before,.t-mythic::before{opacity:.35;animation:stAura 1.6s ease-in-out infinite alternate}
.t-mythic::before{background:radial-gradient(closest-side,rgba(255,120,230,.8),rgba(90,190,255,.4) 60%,transparent)}
@keyframes stAura{to{opacity:1;transform:scale(1.08)}}
/* 传说、神话落地是砸下来的 */
.stamped .t-legendary,.stamped .t-mythic{transition:none;animation:stTagSlam .6s cubic-bezier(.3,1.5,.5,1) calc(.25s + var(--i,0)*.12s) both}
@keyframes stTagSlam{0%{opacity:0;transform:scale(2.6) rotate(-6deg)}55%{opacity:1;transform:scale(.92)}100%{opacity:1;transform:none}}

/* ---- 标签说明（悬停 / 长按） ---- */
.st-tip{position:fixed;left:0;top:0;z-index:60;width:max-content;max-width:min(270px,calc(100vw - 16px));box-sizing:border-box;
  padding:9px 12px 10px;border-radius:9px;background:rgba(18,13,8,.97);border:1px solid rgba(232,200,106,.45);
  box-shadow:0 10px 28px rgba(0,0,0,.65);color:#eadcbc;font-size:13px;line-height:1.55;pointer-events:none;
  opacity:0;transition:opacity .15s}
.st-tip.show{opacity:1}
.st-tip-head{display:flex;align-items:center;gap:8px}
.st-tip-head b{font-size:15px;color:#fff3cf;letter-spacing:.08em}
.st-tip-head em{font-style:normal;font-size:11px;line-height:17px;padding:0 7px;border-radius:9px;color:#1b1206;background:#d9b867}
.st-tip p{margin:4px 0 0}
.st-tip small{display:block;margin-top:3px;font-size:11.5px;color:#ffd878}
.st-tip.tip-shame em{background:#777;color:#111}.st-tip.tip-shame{border-color:#666}
.st-tip.tip-common em{background:#c9a85a}
.st-tip.tip-rare em{background:linear-gradient(90deg,#fff1b0,#f0c14b)}
.st-tip.tip-epic{border-color:rgba(190,90,255,.7)}.st-tip.tip-epic em{background:#b451e6;color:#fff}
.st-tip.tip-legendary{border-color:rgba(255,120,40,.8)}.st-tip.tip-legendary em{background:linear-gradient(90deg,#ffae3b,#ff4d1f);color:#fff}
.st-tip.tip-mythic{border-color:rgba(255,140,230,.85);box-shadow:0 10px 28px rgba(0,0,0,.65),0 0 18px rgba(200,110,255,.45)}
.st-tip.tip-mythic em{background:linear-gradient(90deg,#ff3d6e,#ffb13d,#3dffa8,#3dc5ff,#a45bff);color:#fff;text-shadow:0 0 3px #000}

/* ---- 传说 / 神话：全屏横幅字幕 ---- */
.st-callout{position:fixed;left:50%;top:44%;z-index:55;pointer-events:none;text-align:center;white-space:nowrap;
  transform:translate(-50%,-50%);animation:stCallout 1.75s cubic-bezier(.2,.9,.3,1) both}
.st-callout::before{content:'';position:absolute;left:50%;top:50%;z-index:-1;width:150vw;height:calc(100% + 44px);transform:translate(-50%,-50%);
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.8) 22%,rgba(0,0,0,.8) 78%,transparent);
  border-block:1px solid rgba(255,160,70,.55)}
.st-callout b{display:block;font:900 clamp(44px,9vw,92px)/1.12 STKaiti,KaiTi,serif;letter-spacing:.22em;margin-right:-.22em;
  color:#fff1c2;text-shadow:0 0 18px rgba(255,130,40,.95),0 0 44px rgba(255,70,20,.6),0 3px 0 #7a1b00}
.st-callout small{display:block;margin-top:4px;font-size:clamp(13px,2.2vw,18px);letter-spacing:.14em;color:#ffdca0}
.st-callout.co-mythic::before{border-image:linear-gradient(90deg,transparent,#ff3d6e,#ffb13d,#3dffa8,#3dc5ff,#a45bff,transparent) 1}
.st-callout.co-mythic b{color:transparent;text-shadow:none;
  background:linear-gradient(90deg,#ff5d86,#ffc35d,#f9ff7a,#5dffb8,#5dcfff,#b87bff);-webkit-background-clip:text;background-clip:text}
@keyframes stCallout{0%{opacity:0;transform:translate(-50%,-50%) scale(2.3)}16%{opacity:1;transform:translate(-50%,-50%) scale(.95)}
  24%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1;transform:translate(-50%,-50%) scale(1.02)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.06)}}
/* SS / SSS 盖章时全屏一闪 */
.st-flash{position:fixed;inset:0;z-index:54;pointer-events:none;opacity:0;animation:stFlash .85s ease-out both;
  background:radial-gradient(circle at 50% 45%,rgba(255,140,70,.55),transparent 60%)}
.st-flash.sss{background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.6),rgba(200,120,255,.35) 35%,transparent 70%)}
@keyframes stFlash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}

.st-nums{display:flex;gap:14px;margin-top:4px;font-size:13px;color:#bba77f;flex-wrap:wrap}
.st-nums em{font-style:normal;margin-right:4px;color:#8f7f60}
.st-nums b{color:#f1ddb0;font-size:15px;font-variant-numeric:tabular-nums}
.st-comment{margin:5px 0 0;min-height:1.45em;font-size:14px;line-height:1.45;color:#e9d29a}
.stamped .st-comment::before{content:'「';color:var(--gold-d)}
.st-board.done .st-comment::after,.instant .st-comment::after{content:'」';color:var(--gold-d)}

.st-score{text-align:right}
.st-val{font:700 30px/1 Georgia,"Times New Roman",serif;color:#fff3cf;font-variant-numeric:tabular-nums;text-shadow:0 0 12px rgba(255,200,90,.45)}
.st-score small{margin-left:3px;color:#a8946a;font-size:12px}
.st-bar{height:6px;margin-top:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.st-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#8a5a14,#f3c75a,#fff1b8);
  box-shadow:0 0 10px rgba(255,200,90,.7);transition:width .9s cubic-bezier(.2,.8,.2,1)}
.grade-C .st-bar i{background:linear-gradient(90deg,#4f4130,#9a8563)}
.grade-D .st-bar i{background:linear-gradient(90deg,#3a3a3a,#777);box-shadow:none}

/* ---- 评级印章 ---- */
.st-grade{text-align:center}
.st-seal{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:8px;
  font:900 32px/1 Georgia,"Times New Roman",serif;color:#fff4e0;background:#b3261e;
  border:3px double rgba(255,230,200,.75);box-shadow:0 4px 12px rgba(0,0,0,.5);opacity:0;transform:rotate(-8deg) scale(0)}
.stamped .st-seal{animation:stStamp .42s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes stStamp{0%{opacity:0;transform:rotate(-26deg) scale(2.8)}60%{opacity:1;transform:rotate(-6deg) scale(.9)}100%{opacity:1;transform:rotate(-8deg) scale(1)}}
.st-grade small{display:block;margin-top:6px;font-size:12px;color:#d8c08a;letter-spacing:.12em;opacity:0;transition:opacity .4s .2s}
.stamped .st-grade small{opacity:1}
.grade-S .st-seal{color:#4a2a00;background:linear-gradient(145deg,#fff2b8,#e6ad2e 55%,#8a5a0c);border-color:#fff6d8;
  box-shadow:0 0 24px rgba(255,200,80,.85),0 4px 12px rgba(0,0,0,.5)}
.grade-S .st-grade small{color:#ffe08a;text-shadow:0 0 8px rgba(255,200,80,.6)}
/* SS：赤金，外圈一道转动的光；SSS：彩虹光环绕着转 */
.grade-SS .st-seal,.grade-SSS .st-seal{position:relative;overflow:hidden;isolation:isolate;border:none;letter-spacing:-.04em}
.grade-SS .st-seal::before,.grade-SSS .st-seal::before{content:'';position:absolute;inset:-40%;z-index:-2;animation:stSpin 2.6s linear infinite}
.grade-SS .st-seal::after,.grade-SSS .st-seal::after{content:'';position:absolute;inset:3px;z-index:-1;border-radius:6px}
.grade-SS .st-seal{font-size:25px;color:#fff6e0;text-shadow:0 0 8px rgba(255,120,60,.9),0 1px 2px #000;
  box-shadow:0 0 26px rgba(255,90,40,.85),0 4px 12px rgba(0,0,0,.5)}
.grade-SS .st-seal::before{background:conic-gradient(#fff2b8,#ff5a2a 25%,#8a0f05 40%,#ffd060 60%,#ff5a2a 80%,#fff2b8)}
.grade-SS .st-seal::after{background:radial-gradient(circle at 50% 30%,#d8341c,#6e0a05)}
.grade-SSS .st-seal{font-size:19px;color:#fff;text-shadow:0 0 6px #fff,0 0 12px rgba(255,150,255,.9),0 1px 2px #000;
  box-shadow:0 0 30px rgba(255,120,255,.75),0 0 60px rgba(90,190,255,.45),0 4px 12px rgba(0,0,0,.5)}
.grade-SSS .st-seal::before{background:conic-gradient(#ff3d6e,#ffb13d,#f7ff5a,#3dffa8,#3dc5ff,#a45bff,#ff3d6e);animation-duration:1.8s}
.grade-SSS .st-seal::after{background:radial-gradient(circle at 50% 30%,#4b1d6e,#140620)}
.grade-SS .st-grade small{color:#ffb38a;text-shadow:0 0 8px rgba(255,100,50,.7)}
.grade-SSS .st-grade small{color:#ffd6ff;text-shadow:0 0 8px rgba(220,120,255,.8)}
.st-row.grade-SS{border-color:rgba(255,120,70,.6)}
.st-row.grade-SSS{border-color:rgba(230,150,255,.7);box-shadow:0 0 0 1px rgba(200,120,255,.3),0 0 34px rgba(170,90,255,.3),0 8px 24px rgba(0,0,0,.45)}
.grade-SS .st-bar i{background:linear-gradient(90deg,#7a1005,#ff5a2a,#ffe39a)}
.grade-SSS .st-bar i{background:linear-gradient(90deg,#ff3d6e,#ffb13d,#f7ff5a,#3dffa8,#3dc5ff,#a45bff);box-shadow:0 0 12px rgba(220,140,255,.8)}
.grade-B .st-seal{background:#2f6b8f}
.grade-C .st-seal{background:#6b5a45}
.grade-D .st-seal{background:#474747;color:#bdbdbd;border-color:rgba(200,200,200,.4)}
.grade-D .st-grade small{color:#9a9a9a}

/* ---- MVP ---- */
.st-row.mvp{border-color:rgba(255,215,120,.75);background:linear-gradient(90deg,rgba(86,60,16,.96),rgba(34,24,10,.93));
  box-shadow:0 0 0 1px rgba(255,215,120,.35),0 0 40px rgba(255,190,70,.32),0 10px 30px rgba(0,0,0,.5)}
.st-row.mvp.in{animation:stMvpIn .75s cubic-bezier(.2,1.3,.4,1)}
@keyframes stMvpIn{0%{transform:scale(1.12)}100%{transform:none}}
.st-row.mvp::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:linear-gradient(110deg,transparent 35%,rgba(255,240,190,.26) 48%,transparent 60%);background-size:260% 100%;
  animation:stSheen 3.4s ease-in-out infinite}
.st-row.mvp.stamped::before{opacity:1}
@keyframes stSheen{0%{background-position:130% 0}60%,100%{background-position:-60% 0}}

.st-shake{animation:stShake .3s}
.st-shake-hard{animation:stShakeHard .45s}
@keyframes stShakeHard{0%,100%{transform:none}15%{transform:translate(6px,-4px)}35%{transform:translate(-6px,4px)}55%{transform:translate(4px,2px)}75%{transform:translate(-3px,-2px)}}
@keyframes stShake{0%,100%{transform:none}25%{transform:translate(3px,-2px)}50%{transform:translate(-3px,2px)}75%{transform:translate(2px,1px)}}

.st-hint{text-align:center;font-size:12px;color:#7d6f55;margin:12px 0 0;transition:opacity .4s}
.st-board.done .st-hint{opacity:0}
.instant .st-row,.instant .st-seal,.instant .st-tag,.instant .st-bar i{transition:none!important;animation:none!important}
.instant .st-tag{opacity:1;transform:none}
.instant .st-seal{opacity:1;transform:rotate(-8deg)}

/* ---- 窄屏：分数和评级叠在右边一栏 ---- */
@media (max-width:720px){
  #overScreen .over-inner{padding:20px 10px 28px}
  .st-title{font-size:22px}
  .st-row{grid-template-columns:28px 46px minmax(0,1fr) 62px;grid-template-areas:"rank face main grade" "rank face main score";
    gap:4px 8px;padding:8px 10px}
  .st-rank{grid-area:rank;font-size:20px}.st-face{grid-area:face;width:46px;height:46px}
  .st-main{grid-area:main}.st-score{grid-area:score;text-align:center}.st-grade{grid-area:grade}
  .st-crown{width:28px;height:28px;font-size:16px}
  .st-who b{font-size:15px}
  .st-nums{gap:8px;font-size:12px}.st-nums b{font-size:13px}
  .st-comment{font-size:12.5px}
  .st-val{font-size:20px}.st-bar{height:4px;margin-top:3px}
  .st-seal{width:38px;height:38px;font-size:22px}
  .grade-SS .st-seal{font-size:17px}.grade-SSS .st-seal{font-size:13px}
  .st-tags{gap:5px 6px}
  .st-tag-body{font-size:11.5px;line-height:20px;padding:0 8px}.t-epic .st-tag-body{font-size:12px;line-height:21px}
  .t-legendary .st-tag-body{font-size:13px;line-height:22px}.t-mythic .st-tag-body{font-size:13.5px;line-height:23px;padding:0 11px}
  .st-grade small{font-size:10.5px;letter-spacing:.04em}
}

@media (prefers-reduced-motion:reduce){
  #overScreen::before,#overScreen:not(.hidden) #overTitle,#overScreen:not(.hidden) #overTitle::after,.st-title span,.st-summary,
  .st-row.mvp::before,.st-row.mvp.in,.st-tag,.st-tag::before,.st-tag-body::before,.st-tag-body::after,.st-seal::before{animation:none!important}
}