/* ===================== 职场杀 · 圆桌牌局（三国杀式布局） ===================== */
/* ---------- 设计令牌：高端深色鎏金 ---------- */
:root{
  --c-bg:#0E1116;--c-panel:#161B22;--c-elev:#1D232C;
  --c-card:rgba(255,255,255,.04);
  --c-edge:rgba(232,196,118,.18);--c-edge-hover:rgba(232,196,118,.38);
  --c-divide:rgba(255,255,255,.06);--c-divide-gold:rgba(232,196,118,.28);
  --c-text:#F2EDE3;--c-sub:#9AA3AD;--c-faint:#6B7280;
  --c-gold:#E8C476;--c-gold-deep:#B8904A;--c-gold-hi:#F5E3B0;--c-gold-ink:#1A1408;--c-gold-glow:rgba(232,196,118,.28);
  --c-boss:#E8C476;--c-ally:#5FB98A;--c-slack:#E08080;--c-spy:#A98BD6;
  --c-ok:#5FB98A;--c-warn:#E0A93A;--c-bad:#E08080;--c-info:#7FA2F8;
  --r-8:8px;--r-12:12px;--r-16:16px;--r-24:24px;
  --sp-1:8px;--sp-2:16px;--sp-3:24px;
  --sh-card:inset 0 1px 0 rgba(255,255,255,.06),0 8px 24px rgba(0,0,0,.35);
  --sh-elev:inset 0 1px 0 rgba(255,255,255,.08),0 16px 40px rgba(0,0,0,.45);
  --sh-gold:0 6px 18px rgba(232,196,118,.28);
  --ease:cubic-bezier(.22,1,.36,1);
  --sgs-felt-1:#1E4E3C;--sgs-felt-2:#123527;--sgs-felt-3:#081C14;
}
.sgs{position:fixed;inset:0;z-index:330;display:flex;flex-direction:column;overflow:hidden;color:var(--c-text);font-size:12px;
  background:radial-gradient(120% 90% at 50% 0%,#2a1b12 0%,#15100c 45%,#070504 100%)}
@media (min-width:560px){
  /* 桌面/平板：按手机宽度居中显示，避免牌桌被拉得过宽 */
  .sgs{left:50%;right:auto;width:480px;transform:translateX(-50%);box-shadow:0 0 0 100vmax #060403}
}
.sgs *{box-sizing:border-box}

/* ---------- 顶栏 ---------- */
.sgs-hd{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:calc(env(safe-area-inset-top,0px) + 7px) 10px 7px;
  background:linear-gradient(180deg,rgba(48,30,16,.96),rgba(24,16,10,.9));border-bottom:1px solid rgba(232,196,118,.28);z-index:4}
.sgs-hd .t{font-size:14px;font-weight:900;letter-spacing:.5px;color:var(--c-text);display:flex;align-items:center;gap:5px;text-shadow:0 2px 6px #000}
.sgs-hd .t b{font-size:10px;font-weight:900;color:var(--c-gold-ink);background:linear-gradient(120deg,var(--c-gold-hi),var(--c-gold-deep));padding:2px 6px;border-radius:999px;letter-spacing:0}
.sgs-hd .cnt{margin-left:auto;font-size:9.5px;font-weight:800;color:var(--c-sub);background:rgba(0,0,0,.28);border:1px solid rgba(232,196,118,.26);padding:3px 7px;border-radius:999px;white-space:nowrap}
.sgs-ib{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.08);border:1px solid rgba(232,196,118,.35);color:var(--c-text);font-size:14px;font-weight:900;display:grid;place-items:center;flex:none}
.sgs-ib:active{transform:scale(.94)}

/* ---------- 牌桌区域 ---------- */
.sgs-stage{position:relative;flex:1 1 auto;min-height:0;overflow:hidden}
.sgs-felt{position:absolute;inset:8px 6px 6px;border-radius:50%/38%;
  background:
    radial-gradient(60% 50% at 50% 40%,#255741 0%,#173d2d 55%,#0d241b 100%);
  border:3px solid var(--c-gold-deep);
  box-shadow:inset 0 0 60px rgba(0,0,0,.65),inset 0 0 0 6px rgba(232,196,118,.06),0 10px 26px rgba(0,0,0,.5)}
.sgs-felt::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.018) 0 2px,transparent 2px 6px)}
.sgs-pile{position:absolute;bottom:10px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none}
.sgs-pile.deck{left:12px}
.sgs-pile.disc{right:12px}
.sgs-pile em{width:26px;height:34px;border-radius:5px;background:linear-gradient(160deg,#2b4a7a,#16233c);border:1px solid rgba(160,190,240,.35);box-shadow:0 3px 8px rgba(0,0,0,.5);position:relative}
.sgs-pile.disc em{background:linear-gradient(160deg,#4a2b2b,#2a1515);border-color:rgba(240,160,160,.25);transform:rotate(-8deg)}
.sgs-pile span{font-size:8.5px;font-weight:800;color:var(--c-sub);background:rgba(0,0,0,.3);padding:1px 5px;border-radius:999px}
.sgs-pile b{font-size:8px;color:var(--c-faint);font-weight:700}

/* ---------- 对手座位 ---------- */
.sgs-seat{position:absolute;z-index:3;width:76px;padding:5px 3px 4px;border-radius:11px;text-align:center;
  background:linear-gradient(170deg,rgba(58,38,22,.96),rgba(26,17,11,.96));
  border:1px solid rgba(232,196,118,.3);box-shadow:0 6px 16px rgba(0,0,0,.55);transition:border-color .12s,transform .12s,box-shadow .12s}
.sgs-seat.pos-0{right:8px;bottom:64px}
.sgs-seat.pos-1{right:8px;top:6px}
.sgs-seat.pos-2{left:8px;top:6px}
.sgs-seat.pos-3{left:8px;bottom:64px}
.sgs-seat.cur{border-color:var(--c-gold);box-shadow:0 0 0 1px rgba(232,196,118,.55),0 0 18px rgba(232,196,118,.35)}
.sgs-seat.cur::after{content:'';position:absolute;inset:-4px;border-radius:14px;border:2px dashed rgba(232,196,118,.5);animation:sgsSpin 8s linear infinite;pointer-events:none}
@keyframes sgsSpin{to{transform:rotate(360deg)}}
.sgs-seat.targetable{border-color:var(--c-gold);animation:sgsBreath 1.3s ease-in-out infinite;transform:scale(1.03)}
@keyframes sgsBreath{0%,100%{box-shadow:0 0 0 2px rgba(232,196,118,.4),0 0 12px rgba(232,196,118,.25)}50%{box-shadow:0 0 0 3px rgba(232,196,118,.75),0 0 24px rgba(232,196,118,.55)}}
.sgs-seat.unreach{opacity:.55}
.sgs-seat.dead{opacity:.52;filter:grayscale(.9)}
.sgs-seat .roleb{position:absolute;left:50%;top:-9px;transform:translateX(-50%);white-space:nowrap;
  font-size:8px;font-weight:900;padding:1px 5px;border-radius:999px;background:var(--c-gold-ink);border:1px solid rgba(232,196,118,.5);color:var(--c-gold-hi)}
.sgs-seat .handb{position:absolute;right:3px;top:4px;font-size:8px;font-weight:900;color:#0b1220;background:#C7D7FF;border-radius:999px;padding:0 4px;line-height:1.6;min-width:14px}
.sgs-seat .curtag{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);font-size:7.5px;font-weight:900;color:var(--c-gold-ink);
  background:linear-gradient(120deg,var(--c-gold-hi),var(--c-gold-deep));padding:1px 6px;border-radius:999px;white-space:nowrap}
.sgs-seat .ava{width:44px;height:44px;margin:3px auto 2px;border-radius:10px;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(70% 70% at 50% 25%,#4a6a97,#1d2c44);border:1px solid rgba(255,255,255,.18)}
.sgs-seat .ava svg{width:100%;height:100%}
.sgs-seat.av-juan .ava{background:radial-gradient(70% 70% at 50% 25%,#7a2c1c,#2b0e09)}
.sgs-seat.av-fish .ava{background:radial-gradient(70% 70% at 50% 25%,#1c5a6e,#08222b)}
.sgs-seat.av-lick .ava{background:radial-gradient(70% 70% at 50% 25%,#6b3a7a,#241030)}
.sgs-seat.av-scape .ava{background:radial-gradient(70% 70% at 50% 25%,#5a5a34,#1e1e10)}
.sgs-seat.av-vet .ava{background:radial-gradient(70% 70% at 50% 25%,#3a3a4a,#14141c)}
.sgs-seat.av-intern .ava{background:radial-gradient(70% 70% at 50% 25%,#2c5a3a,#0c2016)}
.sgs-seat .nm{font-size:10px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--c-text)}
.sgs-seat .hn{font-size:8px;color:#B7A98D;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sgs-seat .orbs{display:flex;justify-content:center;gap:1.5px;margin-top:2px;flex-wrap:wrap}
.sgs-seat .orbs i{width:6px;height:7px;border-radius:1px;background:#E24B4B;box-shadow:0 0 4px rgba(226,75,75,.6);transform:rotate(45deg)}
.sgs-seat .orbs i.off{background:rgba(255,255,255,.12);box-shadow:none}
.sgs-seat .eq{display:flex;justify-content:center;gap:2px;margin-top:3px;height:22px}
.sgs-seat .eq b{width:23px;height:22px;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;
  color:var(--c-gold-hi);background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.14);overflow:hidden}
.sgs-seat .eq b.on{border-style:solid;border-color:rgba(232,196,118,.5);background:rgba(232,196,118,.13)}
.sgs-seat .eq b i{display:block;line-height:0}
.sgs-seat .eq b svg{width:10px;height:10px;display:block}
.sgs-seat .eq b em{font-style:normal;font-size:6.5px;line-height:1.2;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#D8C9A8}
.sgs-seat .eq b u{position:absolute;right:1px;top:0;text-decoration:none;font-size:6.5px;font-weight:900;color:#0e0b06;background:var(--c-gold);border-radius:3px;padding:0 2px;line-height:1.4}
.sgs-seat .eq b.empty{color:rgba(255,255,255,.16);background:rgba(255,255,255,.03);border-style:dashed}
.sgs-seat .jbadges{position:absolute;left:3px;bottom:3px;display:flex;gap:2px}
.sgs-seat .jbadges s{text-decoration:none;font-size:7px;font-weight:900;padding:0 3px;border-radius:3px;color:#E9D5FF;background:rgba(168,85,247,.3);border:1px solid rgba(192,132,252,.45)}
.sgs-seat .dmg{position:absolute;left:50%;top:26%;transform:translateX(-50%);font-size:16px;font-weight:900;color:#FF6B6B;
  text-shadow:0 2px 6px #000;animation:sgsDmg .9s ease-out forwards;pointer-events:none}
@keyframes sgsDmg{0%{opacity:0;transform:translate(-50%,6px) scale(.7)}25%{opacity:1;transform:translate(-50%,-6px) scale(1.15)}100%{opacity:0;transform:translate(-50%,-26px) scale(1)}}

/* ---------- 中央出牌区 ---------- */
.sgs-center{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;width:132px}
.sgs-center .turnhint{font-size:10px;font-weight:800;color:var(--c-sub);text-align:center;line-height:1.4;text-shadow:0 2px 6px #000}
.sgs-center .turnhint b{color:var(--c-gold-hi)}
.sgs-center .playcard{animation:sgsFly .35s ease-out}
.sgs-center .playcard .sgs-card{width:62px;height:88px;transform:rotate(-3deg);box-shadow:0 10px 24px rgba(0,0,0,.6)}
@keyframes sgsFly{from{opacity:0;transform:translateY(18px) scale(.8)}to{opacity:1;transform:none}}
.sgs-center .ptxt{font-size:9px;color:var(--c-sub);text-align:center;background:rgba(0,0,0,.35);padding:2px 7px;border-radius:999px;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- 战报条 ---------- */
.sgs-ticker{position:absolute;left:8px;right:8px;bottom:2px;z-index:3;display:flex;align-items:center;gap:5px;
  background:rgba(8,6,4,.72);border:1px solid rgba(232,196,118,.18);border-radius:999px;padding:4px 9px;pointer-events:none}
.sgs-ticker span{font-size:9.5px;color:#C9BCA2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sgs-ticker i{width:5px;height:5px;border-radius:50%;background:var(--c-gold);flex:none;animation:sgsPulse 1.5s infinite}
@keyframes sgsPulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- 我的面板 ---------- */
.sgs-me{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:6px 10px;background:linear-gradient(180deg,rgba(30,20,12,.96),rgba(18,12,8,.96));border-top:1px solid rgba(232,196,118,.22)}
.sgs-me .ava{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;overflow:hidden;flex:none;border:1px solid rgba(255,255,255,.2);
  background:radial-gradient(70% 70% at 50% 25%,#4a6a97,#1d2c44)}
.sgs-me .ava svg{width:100%;height:100%}
.sgs-me .info{flex:1;min-width:0}
.sgs-me .l1{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:900;color:var(--c-text)}
.sgs-me .l1 em{font-style:normal;font-size:9px;font-weight:800;color:var(--c-sub);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:0 4px;border-radius:4px}
.sgs-me .l2{display:flex;align-items:center;gap:5px;margin-top:2px;font-size:9px;color:#B7A98D;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sgs-me .role{font-size:9px;font-weight:900;padding:1px 6px;border-radius:999px;border:1px solid var(--rc,var(--c-gold));color:var(--rc,var(--c-gold));flex:none}
.sgs-me .orbs{display:flex;gap:2px;margin-top:3px}
.sgs-me .orbs i{width:7px;height:8px;border-radius:1.5px;background:#E24B4B;transform:rotate(45deg);box-shadow:0 0 5px rgba(226,75,75,.55)}
.sgs-me .orbs i.off{background:rgba(255,255,255,.13);box-shadow:none}
.sgs-me .eqs{display:flex;gap:3px;flex:none}
.sgs-me .eqs b{width:30px;height:36px;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;position:relative;
  background:rgba(255,255,255,.04);border:1px solid rgba(232,196,118,.45);color:var(--c-faint);font-size:7px}
.sgs-me .eqs b.on{background:rgba(232,196,118,.16);color:var(--c-gold-hi);box-shadow:0 0 8px rgba(232,196,118,.25)}
.sgs-me .eqs b u{position:absolute;right:1px;top:0;font-size:7px;font-weight:900;color:#0e0b06;background:var(--c-gold);border-radius:3px;padding:0 2px;text-decoration:none}
.sgs-me .eqs b em{font-style:normal;font-size:6.5px;color:#D8C9A8;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sgs-me .eqs b i{font-style:normal;line-height:0}
.sgs-me .eqs b svg{width:13px;height:13px;display:block}

/* ---------- 手牌 ---------- */
.sgs-handwrap{flex:0 0 auto;background:linear-gradient(180deg,rgba(14,10,7,.9),rgba(8,6,4,.98));border-top:1px solid rgba(232,196,118,.14);padding:3px 0 2px}
.sgs-hand{display:flex;gap:5px;overflow-x:auto;overflow-y:hidden;padding:8px 10px 10px;-webkit-overflow-scrolling:touch;min-height:132px;align-items:flex-end}
.sgs-hand .empty{font-size:10px;color:var(--c-faint);padding:34px 8px;line-height:1.6}
.sgs-card{position:relative;flex:0 0 auto;width:82px;height:116px;border-radius:9px;overflow:hidden;text-align:left;border:2px solid var(--edge,var(--c-info));
  background:linear-gradient(165deg,var(--bg1,#2b3f66),var(--bg2,#111a2b));box-shadow:0 6px 14px rgba(0,0,0,.55);transition:transform .12s,box-shadow .12s}
.sgs-card:active{transform:translateY(-3px)}
.sgs-card.sel{transform:translateY(-8px);box-shadow:0 0 0 2px rgba(232,196,118,.6),0 10px 22px rgba(0,0,0,.6)}
.sgs-card .suit{position:absolute;left:3px;top:3px;z-index:2;font-size:8.5px;font-weight:900;color:#0e0b06;background:rgba(255,255,255,.82);padding:0 3px;border-radius:3px;line-height:1.5}
.sgs-card .tp{position:absolute;right:3px;top:3px;z-index:2;font-size:7.5px;font-weight:900;color:var(--c-text);background:rgba(0,0,0,.42);padding:0 4px;border-radius:3px;line-height:1.6}
.sgs-card .art{position:absolute;left:0;right:0;top:0;bottom:26px;display:grid;place-items:center;
  background:radial-gradient(65% 60% at 50% 35%,rgba(255,255,255,.16),transparent 70%)}
.sgs-card .art svg{width:62%;height:62%;opacity:.96}
.sgs-card .nm{position:absolute;left:0;right:0;bottom:0;height:26px;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:900;letter-spacing:.5px;color:var(--c-text);background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.55));border-top:1px solid rgba(255,255,255,.14)}
.sgs-card.t-basic{--edge:#5B8CF0;--bg1:#28406e;--bg2:#0f1829}
.sgs-card.t-trick{--edge:#B06CFF;--bg1:#412a6e;--bg2:#1a1030}
.sgs-card.t-equip{--edge:var(--c-gold-deep);--bg1:#5a4218;--bg2:#241a08}
.sgs-card.faded{opacity:.45}
.sgs-card.hint{animation:sgsHintP 1.4s ease-in-out infinite}
@keyframes sgsHintP{0%,100%{box-shadow:0 6px 14px rgba(0,0,0,.55)}50%{box-shadow:0 0 0 2px rgba(232,196,118,.55),0 0 18px rgba(232,196,118,.5)}}
.sgs-card.mini{width:62px;height:88px}
.sgs-card.mini .nm{height:22px;font-size:9.5px}
.sgs-card.mini .art{bottom:22px}

/* ---------- 底部操作 ---------- */
.sgs-foot{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:5px 10px calc(env(safe-area-inset-bottom,0px) + 6px);background:#0a0705;border-top:1px solid rgba(232,196,118,.12)}
.sgs-foot .hint{flex:1;min-width:0;font-size:9.5px;line-height:1.4;color:var(--c-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sgs-foot .hint b{color:var(--c-gold-hi)}
.sgs-b{flex:none;border-radius:9px;padding:8px 12px;font-size:11px;font-weight:900;white-space:nowrap;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#EEE3CC}
.sgs-b:active{transform:scale(.97)}
.sgs-b.pri{background:linear-gradient(120deg,var(--c-gold),#D99A2B);color:var(--c-gold-ink);border-color:rgba(232,196,118,.85);box-shadow:0 4px 12px rgba(232,196,118,.28)}
.sgs-b.ghost{color:var(--c-sub);font-weight:800}
.sgs-b.dis{opacity:.4}

/* ---------- 底部弹层（预览/响应） ---------- */
.sgs-sheet{position:absolute;left:8px;right:8px;bottom:calc(env(safe-area-inset-bottom,0px) + 174px);z-index:7;border-radius:14px;padding:10px 12px;
  background:linear-gradient(165deg,rgba(48,32,18,.99),rgba(18,12,7,.99));border:1px solid rgba(232,196,118,.5);
  box-shadow:0 14px 34px rgba(0,0,0,.7);animation:sgsUp .18s ease}
@keyframes sgsUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sgs-sheet .pv{display:flex;gap:10px;align-items:flex-start}
.sgs-sheet .pv .art{width:58px;height:78px;border-radius:8px;border:2px solid var(--edge,var(--c-info));display:grid;place-items:center;flex:none;
  background:linear-gradient(160deg,var(--bg1,#28406e),var(--bg2,#0f1829))}
.sgs-sheet .pv .art svg{width:64%;height:64%}
.sgs-sheet .pv .ti{flex:1;min-width:0}
.sgs-sheet .pv .ti .n{font-size:13px;font-weight:900;color:var(--c-text);display:flex;align-items:center;gap:6px}
.sgs-sheet .pv .ti .n em{font-style:normal;font-size:8.5px;font-weight:900;padding:1px 5px;border-radius:4px;background:rgba(232,196,118,.16);border:1px solid rgba(232,196,118,.35);color:var(--c-gold-hi)}
.sgs-sheet .pv .ti .d{font-size:10px;line-height:1.55;color:var(--c-sub);margin-top:4px}
.sgs-sheet .btns{display:flex;gap:7px;margin-top:9px}
.sgs-sheet .btns .sgs-b{flex:1;text-align:center;padding:9px 8px}
.sgs-sheet.prompt{border-color:rgba(242,85,95,.55)}
.sgs-sheet .q{font-size:11.5px;font-weight:800;line-height:1.55;color:var(--c-text);margin-bottom:8px}
.sgs-sheet .q em{font-style:normal;color:#FFB4B8}
.sgs-sheet .opts{display:flex;gap:7px;align-items:flex-end}
.sgs-sheet .opts .sgs-card{flex:none}
.sgs-sheet .opts .sgs-b{flex:1;padding:12px 8px;text-align:center}

/* ---------- 结算 ---------- */
.sgs-over{position:absolute;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto;
  background:rgba(5,3,2,.86);backdrop-filter:blur(3px)}
.sgs-panel{width:100%;max-width:340px;border-radius:16px;padding:16px;text-align:center;
  background:linear-gradient(165deg,#2a1c11,#120c07);border:1px solid rgba(232,196,118,.42);box-shadow:0 24px 60px rgba(0,0,0,.7)}
.sgs-panel .ic{font-size:34px;line-height:1.2}
.sgs-panel .pt{font-size:18px;font-weight:900;color:var(--c-text);margin:4px 0 2px}
.sgs-panel .ps{font-size:10.5px;color:var(--c-sub);line-height:1.6}
.sgs-panel .roles{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:11px 0 2px}
.sgs-panel .roles div{border-radius:8px;padding:4px 2px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.sgs-panel .roles div.me{border-color:rgba(232,196,118,.6);background:rgba(232,196,118,.1)}
.sgs-panel .roles span{display:block;font-size:8px;color:var(--c-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sgs-panel .roles b{display:block;font-size:8.5px;font-weight:900;color:var(--c-text);margin-top:1px}
.sgs-rw{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0 4px}
.sgs-rw div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:9px;padding:7px 3px}
.sgs-rw span{display:block;font-size:8.5px;color:var(--c-sub)}
.sgs-rw b{font-size:14px;font-weight:900;color:var(--c-gold-hi)}
.sgs-rw b.neg{color:#F2555F}
.sgs-panel .pbtns{display:flex;gap:8px;margin-top:12px}
.sgs-panel .pbtns .sgs-b{flex:1;padding:11px 8px;text-align:center}
.sgs-tip2{font-size:9px;color:var(--c-faint);line-height:1.6;margin-top:8px}
.sgs-dead{display:flex;align-items:center;gap:8px;padding:10px 12px;min-height:112px}
.sgs-dead b{font-size:12px;font-weight:900;color:#FFB4B8;flex:none}
.sgs-dead span{flex:1;font-size:9.5px;line-height:1.5;color:var(--c-sub)}

/* ---------- 新手引导 / 规则 ---------- */
.sgs-guide{position:absolute;inset:0;z-index:14;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(4,3,2,.9);backdrop-filter:blur(2px)}
.gd{width:100%;max-width:330px;border-radius:18px;padding:16px;text-align:center;background:linear-gradient(165deg,#2c1e12,#120c07);border:1px solid rgba(232,196,118,.45)}
.gd .ill{height:128px;border-radius:12px;display:grid;place-items:center;margin-bottom:10px;
  background:radial-gradient(70% 70% at 50% 30%,rgba(232,196,118,.12),rgba(0,0,0,.3));border:1px solid rgba(232,196,118,.18)}
.gd .ill svg{width:110px;height:110px}
.gd .step{font-size:8.5px;font-weight:900;color:var(--c-sub);letter-spacing:1px}
.gd .t{font-size:16px;font-weight:900;color:var(--c-text);margin:3px 0 6px}
.gd .d{font-size:11px;line-height:1.7;color:var(--c-sub);text-align:left}
.gd .d b{color:var(--c-gold-hi)}
.gd .dots{display:flex;justify-content:center;gap:5px;margin:10px 0 0}
.gd .dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.2)}
.gd .dots i.on{background:var(--c-gold);box-shadow:0 0 8px rgba(232,196,118,.6)}
.gd .btns{display:flex;gap:8px;margin-top:12px}
.gd .btns .sgs-b{flex:1;text-align:center;padding:10px}

.sgs-rules{position:absolute;inset:0;z-index:13;display:flex;flex-direction:column;background:rgba(8,5,3,.97)}
.sgs-rules .rh{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top,0px) + 8px) 12px 8px;border-bottom:1px solid rgba(232,196,118,.25);background:rgba(30,20,12,.96)}
.sgs-rules .rh .t{font-size:14px;font-weight:900;color:var(--c-text);flex:1}
.sgs-rules .rb{flex:1 1 auto;overflow-y:auto;padding:10px 12px calc(env(safe-area-inset-bottom,0px) + 16px);-webkit-overflow-scrolling:touch}
.sgs-rules h4{font-size:11.5px;font-weight:900;color:var(--c-gold-hi);margin:12px 0 6px;display:flex;align-items:center;gap:5px}
.sgs-rules h4:first-child{margin-top:0}
.sgs-rules .rcard{display:flex;gap:9px;align-items:center;padding:6px 8px;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);margin-bottom:5px}
.sgs-rules .rcard .art{width:38px;height:50px;border-radius:6px;border:1.5px solid var(--edge,var(--c-info));display:grid;place-items:center;flex:none;
  background:linear-gradient(160deg,var(--bg1,#28406e),var(--bg2,#0f1829))}
.sgs-rules .rcard .art svg{width:70%;height:70%}
.sgs-rules .rcard .ti{flex:1;min-width:0}
.sgs-rules .rcard .n{font-size:10.5px;font-weight:900;color:var(--c-text)}
.sgs-rules .rcard .n em{font-style:normal;font-size:8px;font-weight:800;color:var(--c-gold-hi);margin-left:5px}
.sgs-rules .rcard .d{font-size:9px;line-height:1.5;color:var(--c-sub);margin-top:1px}
.sgs-rules .rrole{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:4px}
.sgs-rules .rrole div{padding:7px 9px;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid var(--rc,rgba(255,255,255,.12))}
.sgs-rules .rrole b{display:block;font-size:10.5px;color:var(--rc,var(--c-text))}
.sgs-rules .rrole span{display:block;font-size:8.5px;line-height:1.5;color:var(--c-sub);margin-top:2px}
.sgs-rules p{font-size:9.5px;line-height:1.7;color:var(--c-sub)}

/* ---------- 战报面板 ---------- */
.sgs-logp{position:absolute;left:0;right:0;bottom:0;top:0;z-index:11;display:flex;flex-direction:column;background:rgba(8,5,3,.96)}
.sgs-logp .lh{display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top,0px) + 8px) 12px 8px;border-bottom:1px solid rgba(232,196,118,.22)}
.sgs-logp .lh .t{font-size:13px;font-weight:900;color:var(--c-text);flex:1}
.sgs-logp .lb{flex:1;overflow-y:auto;padding:8px 10px calc(env(safe-area-inset-bottom,0px) + 14px);-webkit-overflow-scrolling:touch}
.sgs-li{font-size:10px;line-height:1.5;color:#B9AC93;padding:3px 8px;margin-bottom:3px;border-radius:7px;background:rgba(255,255,255,.035);border-left:2px solid rgba(255,255,255,.14);word-break:break-word}
.sgs-li.use{border-left-color:#5B8CF0;color:#D7E2F7}
.sgs-li.bad{border-left-color:#F2555F;color:#FFC3C6;background:rgba(242,85,95,.08)}
.sgs-li.good{border-left-color:var(--c-ally);color:#C4F4DD;background:rgba(61,214,140,.07)}
.sgs-li.note{border-left-color:var(--c-gold);color:#F7E1AE}
.sgs-li.joke{border-left-color:#B06CFF;color:#E2D2FF;background:rgba(176,108,255,.07)}

/* ---------- 入口介绍 ---------- */
.sgs-intro{position:absolute;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto;
  background:radial-gradient(120% 90% at 50% 0%,#2c1e12 0%,#0d0906 70%)}
.sgs-intro .box{width:100%;max-width:350px;text-align:center}
.sgs-intro .ttl{font-size:26px;font-weight:900;letter-spacing:3px;color:var(--c-text);text-shadow:0 4px 16px rgba(232,196,118,.35)}
.sgs-intro .sub{font-size:10.5px;color:#B7A98D;margin-top:3px;letter-spacing:1px}
.sgs-intro .roles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:14px 0}
.sgs-intro .roles div{padding:8px 3px;border-radius:10px;border:1px solid var(--rc,rgba(255,255,255,.14));background:rgba(255,255,255,.04)}
.sgs-intro .roles b{display:block;font-size:10px;color:var(--rc,var(--c-text))}
.sgs-intro .roles span{display:block;font-size:8px;line-height:1.4;color:var(--c-sub);margin-top:2px}
.sgs-intro .sample{display:flex;gap:6px;justify-content:center;margin:4px 0 10px}
.sgs-intro .desc{font-size:10px;line-height:1.8;color:var(--c-sub);margin:8px 0 12px}
.sgs-intro .btns{display:flex;gap:8px}
.sgs-intro .btns .sgs-b{flex:1;padding:12px;text-align:center}
.sgs-intro .tips{font-size:8.5px;color:#7d6f5a;margin-top:9px;line-height:1.6}

/* ---------- 阶段指示 / 目标连线 / 判定翻牌 / 技能横幅 ---------- */
.sgs-phase{position:absolute;left:50%;top:4px;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:3px;
  padding:3px 8px;border-radius:999px;background:rgba(8,6,4,.66);border:1px solid rgba(232,196,118,.2);pointer-events:none;white-space:nowrap}
.sgs-phase b{font-size:8.5px;font-weight:800;color:#7d6f5a}
.sgs-phase b.on{color:#0e0b06;background:linear-gradient(120deg,var(--c-gold-hi),var(--c-gold-deep));padding:1px 6px;border-radius:999px}
.sgs-phase i{width:8px;height:1px;background:rgba(255,255,255,.18)}

.sgs-arrows{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:visible}
.sgs-arrows line{stroke:var(--c-ally);stroke-width:1.2;stroke-dasharray:3 2;animation:sgsArrowFlow 1s linear infinite;opacity:.92}
@keyframes sgsArrowFlow{to{stroke-dashoffset:-10}}

.sgs-judge{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:9;display:flex;flex-direction:column;align-items:center;gap:5px;
  pointer-events:none;animation:sgsJudgeIn .25s ease}
.jface{width:58px;height:80px;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:linear-gradient(165deg,#F7EFDD,#DBCBA8);border:2px solid #8a6a2a;
  box-shadow:0 10px 26px rgba(0,0,0,.65),0 0 22px rgba(232,196,118,.35);
  animation:sgsFlip .55s cubic-bezier(.3,.9,.3,1.1);backface-visibility:hidden}
.jface b{font-size:16px;line-height:1}
.jface strong{font-size:24px;font-weight:900;line-height:1}
.jface span{font-size:8px;font-weight:800;opacity:.65}
.jface.red{color:#B02525}
.jface.blk{color:#1c1c1c}
.jname{font-size:9.5px;font-weight:900;color:var(--c-gold-hi);background:rgba(8,6,4,.8);padding:2px 9px;border-radius:999px;border:1px solid rgba(232,196,118,.3)}
@keyframes sgsFlip{0%{transform:rotateY(90deg) scale(.85);opacity:.2}60%{transform:rotateY(-8deg) scale(1.06)}100%{transform:rotateY(0) scale(1);opacity:1}}
@keyframes sgsJudgeIn{from{opacity:0}to{opacity:1}}

.sgs-skillfx{position:absolute;left:50%;top:33%;transform:translate(-50%,-50%);z-index:9;display:flex;align-items:center;gap:7px;pointer-events:none;
  padding:6px 12px;border-radius:999px;background:linear-gradient(120deg,rgba(60,36,10,.95),rgba(24,14,4,.95));
  border:1px solid rgba(232,196,118,.65);box-shadow:0 8px 22px rgba(0,0,0,.6),0 0 22px rgba(232,196,118,.3);animation:sgsSkillIn .3s ease}
.sgs-skillfx em{font-style:normal;font-size:9px;font-weight:900;color:var(--c-sub)}
.sgs-skillfx b{font-size:11.5px;font-weight:900;color:var(--c-gold-hi);letter-spacing:.5px}
@keyframes sgsSkillIn{from{opacity:0;transform:translate(-50%,-40%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

.sgs-stage.shake{animation:sgsShake .36s ease}
@keyframes sgsShake{0%,100%{transform:none}20%{transform:translate(-3px,2px)}40%{transform:translate(3px,-2px)}60%{transform:translate(-2px,-1px)}80%{transform:translate(2px,1px)}}

/* ---------- 拖拽出牌 ---------- */
.sgs-hand .sgs-card{touch-action:pan-x}
.sgs-card.dragghost{position:fixed;z-index:400;width:82px;height:116px;pointer-events:none;
  transform:translate(-50%,-72%) rotate(-5deg) scale(1.08);opacity:.96;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.65));transition:none}
.sgs-card.dragghost.cancelled{transition:transform .18s ease,opacity .18s ease;transform:translate(-50%,-72%) rotate(-5deg) scale(.72);opacity:0}
.sgs-arrows.dragarrows line{stroke-width:1.6;opacity:1}
.sgs-seat.dragok{outline:2px dashed rgba(61,214,140,.55);outline-offset:2px}
.sgs-seat.dragbad{opacity:.42}
.sgs-seat.dragover{border-color:var(--c-ally);box-shadow:0 0 0 2px rgba(61,214,140,.7),0 0 22px rgba(61,214,140,.55);transform:scale(1.05)}
.sgs-sheet.inspect{border-color:rgba(194,158,74,.6)}

/* ---------- 命中闪光 ---------- */
.sgs-seat.fx-red{animation:sgsFxRed .62s ease}
.sgs-seat.fx-purple{animation:sgsFxPurple .62s ease}
.sgs-seat.fx-green{animation:sgsFxGreen .62s ease}
@keyframes sgsFxRed{0%{box-shadow:0 0 0 0 rgba(242,85,95,.85)}45%{box-shadow:0 0 0 4px rgba(242,85,95,.45),0 0 26px rgba(242,85,95,.75)}100%{box-shadow:0 0 0 0 rgba(242,85,95,0)}}
@keyframes sgsFxPurple{0%{box-shadow:0 0 0 0 rgba(176,108,255,.85)}45%{box-shadow:0 0 0 4px rgba(176,108,255,.45),0 0 26px rgba(176,108,255,.75)}100%{box-shadow:0 0 0 0 rgba(176,108,255,0)}}
@keyframes sgsFxGreen{0%{box-shadow:0 0 0 0 rgba(61,214,140,.85)}45%{box-shadow:0 0 0 4px rgba(61,214,140,.45),0 0 26px rgba(61,214,140,.75)}100%{box-shadow:0 0 0 0 rgba(61,214,140,0)}}
.sgs-pile.dragover em{border-color:var(--c-gold);box-shadow:0 0 16px rgba(232,196,118,.7);transform:scale(1.1)}
.sgs-pile.dragover span{color:var(--c-gold-hi)}

/* ---------- v7：回合条 / 距离 / 身份卡 / 规则分页 / 战报统计 ---------- */
.sgs-card.canplay{box-shadow:0 0 0 1.5px rgba(232,196,118,.6),0 0 16px rgba(232,196,118,.35)}
.sgs-seat .distb{position:absolute;right:3px;bottom:3px;font-size:6.5px;font-weight:900;color:var(--c-gold-hi);background:rgba(8,6,4,.82);
  border:1px solid rgba(232,196,118,.45);border-radius:999px;padding:0 3px;line-height:1.5}
.sgs-seat .jbadges{position:absolute;left:3px;top:-7px;bottom:auto;z-index:2}
.sgs-turnbar{display:flex;align-items:center;gap:6px;padding:4px 10px 3px;border-bottom:1px solid rgba(232,196,118,.12)}
.sgs-turnbar b{font-size:10px;color:var(--c-text);white-space:nowrap}
.sgs-turnbar em{font-style:normal;font-size:8.5px;font-weight:900;color:var(--c-gold);background:rgba(232,196,118,.14);
  border:1px solid rgba(232,196,118,.3);padding:0 5px;border-radius:999px;white-space:nowrap}
.sgs-turnbar span{font-size:8.5px;color:var(--c-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.sgs-idcard{position:absolute;inset:0;z-index:15;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(4,3,2,.93);backdrop-filter:blur(3px)}
.id-box{width:100%;max-width:300px;border-radius:18px;padding:18px;text-align:center;
  background:linear-gradient(165deg,#2c1e12,#120c07);border:1px solid rgba(232,196,118,.45);box-shadow:0 20px 50px rgba(0,0,0,.7)}
.id-tag{font-size:9px;letter-spacing:3px;color:var(--c-faint)}
.id-ico{width:64px;height:64px;margin:10px auto 6px;border-radius:50%;display:grid;place-items:center;font-size:30px;
  border:2px solid var(--c-gold);background:rgba(232,196,118,.1)}
.id-name{font-size:20px;font-weight:900}
.id-goal{font-size:10.5px;color:var(--c-sub);line-height:1.6;margin-top:6px}
.id-hp{font-size:10px;color:var(--c-sub);margin-top:8px}
.id-hp b{color:#FF8A8A;font-size:12px}

.sgs-rules .rtabs{flex:0 0 auto;display:flex;gap:5px;overflow-x:auto;padding:7px 10px;border-bottom:1px solid rgba(255,255,255,.08)}
.sgs-rules .rtabs button{flex:0 0 auto;font-size:9.5px;font-weight:800;color:var(--c-sub);background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:4px 10px}
.sgs-rules .rtabs button.on{color:#0e0b06;background:linear-gradient(120deg,var(--c-gold-hi),var(--c-gold-deep));border-color:var(--c-gold)}
.sgs-rules .rtip{flex:0 0 auto;font-size:8.5px;color:var(--c-faint);padding:4px 12px 0}
.sgs-stats{flex:0 0 auto;display:flex;gap:5px;flex-wrap:wrap;padding:7px 10px;border-bottom:1px solid rgba(255,255,255,.08)}
.sgs-stats span{font-size:8.5px;font-weight:800;color:var(--c-gold-hi);background:rgba(232,196,118,.12);
  border:1px solid rgba(232,196,118,.3);border-radius:999px;padding:1px 6px}

/* ---------- 小屏适配 ---------- */
@media (max-height:780px){
  .sgs-hand{min-height:118px;padding:6px 10px 8px}
  .sgs-card{width:76px;height:106px}
  .sgs-me{padding:5px 10px}
  .sgs-me .ava{width:38px;height:38px}
  .sgs-sheet{bottom:calc(env(safe-area-inset-bottom,0px) + 158px)}
}
@media (max-height:660px){
  .sgs-seat{width:68px}
  .sgs-seat .ava{width:38px;height:38px}
  .sgs-card{width:74px;height:104px}
  .sgs-sheet{bottom:calc(env(safe-area-inset-bottom,0px) + 146px)}
  .sgs-center{top:44%}
}
@media (max-height:560px){
  .sgs-hand{min-height:112px}
  .sgs-card{width:66px;height:94px}
  .sgs-card .art{bottom:22px}
  .sgs-card .nm{height:22px;font-size:10px}
  .sgs-seat .ava{width:32px;height:32px}
  .sgs-seat{width:62px}
  .sgs-sheet{bottom:calc(env(safe-area-inset-bottom,0px) + 124px);padding:8px 10px}
  .sgs-ticker{display:none}
}
/* ===================== 组件统一：鎏金质感（只换皮，不改布局） ===================== */
.sgs{
  font-family:"Noto Sans SC",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--c-text);font-variant-numeric:tabular-nums;
  background:radial-gradient(120% 90% at 50% 0%,#1A2230 0%,#121820 45%,#0E1116 100%);
}
.sgs-hd .t,.sgs-panel .pt,.sgs-sheet .pv .ti .n,.sgs-rules .rh .t{letter-spacing:.05em}
/* 线性 SVG 图标尺寸（替代 emoji） */
.sgs .ico{width:1em;height:1em;display:inline-block;vertical-align:-.14em;flex:none;stroke-width:2}
.sgs .sgs-ib .ico{width:16px;height:16px;vertical-align:0}
.sgs .id-ico .ico{width:34px;height:34px;vertical-align:0}
.sgs-panel .ic .ico,.sgs-over .ic .ico{width:34px;height:34px;vertical-align:0}
/* 身份揭示卡：与全站玻璃卡统一 */
.sgs-idcard{background:rgba(6,8,11,.88);backdrop-filter:blur(6px)}
.id-box{
  background:linear-gradient(180deg,#1D232C,#161B22);
  border:1px solid var(--c-edge);
  border-radius:var(--r-24);
  box-shadow:var(--sh-elev);
}
.id-hp b{color:var(--c-bad)}
.sgs::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}
/* 顶栏 */
.sgs-hd{background:linear-gradient(180deg,rgba(29,35,44,.95),rgba(14,17,22,.9));border-bottom:1px solid var(--c-divide-gold)}
.sgs-hd .t{color:var(--c-text);letter-spacing:.05em}
.sgs-hd .t b{background:linear-gradient(120deg,var(--c-gold-hi),var(--c-gold-deep));color:var(--c-gold-ink)}
.sgs-hd .cnt{background:rgba(255,255,255,.05);border:1px solid var(--c-edge);color:var(--c-sub)}
.sgs-ib{background:rgba(255,255,255,.05);border:1px solid var(--c-edge);color:var(--c-gold-hi);border-radius:var(--r-8);transition:transform .2s var(--ease),border-color .2s var(--ease)}
.sgs-ib:hover{border-color:var(--c-edge-hover)}
/* 圆桌绒面：深墨绿 + 鎏金细边 + 内圈金线 */
.sgs-felt{
  background:radial-gradient(60% 50% at 50% 40%,var(--sgs-felt-1) 0%,var(--sgs-felt-2) 55%,var(--sgs-felt-3) 100%);
  border:2px solid var(--c-gold-deep);
  box-shadow:inset 0 0 60px rgba(0,0,0,.7),inset 0 0 0 6px rgba(232,196,118,.08),0 12px 30px rgba(0,0,0,.55);
}
.sgs-felt::before{content:'';position:absolute;inset:10px;border-radius:inherit;pointer-events:none;border:1px solid rgba(232,196,118,.16)}
.sgs-pile em{background:linear-gradient(160deg,#2A3441,#161C24);border:1px solid var(--c-edge)}
.sgs-pile.disc em{background:linear-gradient(160deg,#3A2A28,#1F1513);border-color:rgba(224,128,128,.28)}
.sgs-pile span{background:rgba(14,17,22,.55);color:var(--c-sub)}
/* 座位：玻璃卡 + 金边 + 双层阴影 */
.sgs-seat{
  background:var(--c-card);
  border:1px solid var(--c-edge);
  border-radius:var(--r-12);
  box-shadow:var(--sh-card);
  backdrop-filter:blur(12px);
  transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
.sgs-seat:hover{transform:translateY(-2px);border-color:var(--c-edge-hover)}
.sgs-seat.cur{border-color:var(--c-gold);box-shadow:0 0 0 1px rgba(232,196,118,.55),0 0 18px rgba(232,196,118,.32)}
.sgs-seat .roleb{background:rgba(14,17,22,.9);border:1px solid var(--c-edge);color:var(--rc,var(--c-gold))}
.sgs-seat .curtag{background:linear-gradient(120deg,var(--c-gold-hi),var(--c-gold-deep));color:var(--c-gold-ink)}
.sgs-seat .handb{background:rgba(232,196,118,.16);color:var(--c-gold-hi);border:1px solid var(--c-edge)}
/* 手牌区 */
.sgs-handwrap{background:linear-gradient(180deg,rgba(14,17,22,.94),rgba(10,12,16,.99));border-top:1px solid var(--c-divide-gold)}
.sgs-card{
  border-radius:var(--r-8);
  box-shadow:0 6px 16px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.sgs-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,0,0,.5),0 0 0 1px rgba(232,196,118,.35)}
.sgs-card.sel{box-shadow:0 0 0 2px rgba(232,196,118,.6),0 12px 24px rgba(0,0,0,.55)}
.sgs-card .nm{letter-spacing:.02em}
/* 面板 / 弹层 / 说明 / 战报 */
.sgs-sheet{background:rgba(29,35,44,.97);border:1px solid var(--c-edge);border-radius:var(--r-16);box-shadow:var(--sh-elev);backdrop-filter:blur(12px)}
.sgs-panel{background:linear-gradient(180deg,#1D232C,#161B22);border:1px solid var(--c-edge);border-radius:var(--r-24);box-shadow:var(--sh-elev)}
.sgs-over{background:rgba(6,8,11,.82);backdrop-filter:blur(6px)}
.sgs-guide{background:rgba(6,8,11,.9)}
.sgs-rules{background:rgba(10,12,16,.98)}
.sgs-rules .rh{background:rgba(29,35,44,.97);border-bottom:1px solid var(--c-divide-gold)}
.sgs-ticker{background:rgba(22,27,34,.86);border:1px solid var(--c-edge);border-radius:var(--r-12);box-shadow:var(--sh-card);backdrop-filter:blur(12px)}
.sgs-ticker span{color:var(--c-sub)}
.sgs-logp{background:rgba(14,17,22,.55);border-left:1px solid var(--c-divide-gold)}
/* 按钮层级：主金 / 次幽灵 */
.sgs-b{
  background:linear-gradient(135deg,var(--c-gold-hi),var(--c-gold) 55%,var(--c-gold-deep));
  color:var(--c-gold-ink);border:none;border-radius:var(--r-8);
  box-shadow:var(--sh-gold),inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.sgs-b:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(232,196,118,.34),inset 0 1px 0 rgba(255,255,255,.45)}
.sgs-b.ghost,.sgs-b.off{background:rgba(255,255,255,.05);color:var(--c-text);border:1px solid var(--c-edge);box-shadow:none}
@media (prefers-reduced-motion:reduce){
  .sgs *,.sgs *::before,.sgs *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ---------- v11：他人满血不显示体力，受伤只留 1 个红点 ---------- */
.sgs-seat .orbs.none{display:none}
.sgs-seat .orbs.hurt i{width:7px;height:9px;background:#E24B4B;box-shadow:0 0 6px rgba(226,75,75,.8)}
.sgs-seat.hp-none .ava{box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.sgs-seat.hp-good .ava{box-shadow:0 0 0 2px rgba(61,214,140,.42),0 0 10px rgba(61,214,140,.22)}
.sgs-seat.hp-mid .ava{box-shadow:0 0 0 2px rgba(232,196,118,.5),0 0 10px rgba(232,196,118,.22)}
.sgs-seat.hp-low .ava{box-shadow:0 0 0 2px rgba(242,153,74,.55),0 0 10px rgba(242,153,74,.25)}
.sgs-seat.hp-crit .ava{box-shadow:0 0 0 2px rgba(242,85,95,.72),0 0 14px rgba(242,85,95,.45);animation:sgsPulse 1.6s ease-in-out infinite}
.sgs-seat.hp-dead .ava{box-shadow:none;filter:grayscale(1)}
.sgs-seat .hn{color:var(--c-sub,#B7A98D)}