/* ===========================================================================
   三国杀风皮肤 v1 —— 可整体删除本文件引用即回到原皮肤
   背景素材：assets/gen/bg-sgs.jpg（无名杀桌布，用户提供）
   思路：只覆盖样式，不改游戏逻辑；座位坐标仍沿用 RING。
   =========================================================================== */

/* 告诉 ui.js 当前是三国杀皮肤：切到「右侧 + 顶排 + 左侧」的坐席布局 */
:root{--sgs-layout:1}

/* ---------------------------------------------------------------- 全局 */
#stage{background:#241a11 url("../assets/gen/bg-sgs.jpg") center/cover no-repeat}
#app{background:transparent}
.table{background:none}
.table::after{background:radial-gradient(ellipse at 50% 47%,transparent 46%,rgba(38,24,10,.30) 100%)}
.felt{border-color:rgba(120,90,50,.16);background:radial-gradient(closest-side,rgba(255,242,214,.05),transparent 72%)}
.corner{border-color:rgba(120,90,50,.22)}

/* ---------------------------------------------------------------- 顶栏 */
.top{position:static;flex:0 0 46px;background:transparent;border-bottom:0;padding:0 18px}
.brand h1{color:#1f1103;font-size:19px;text-shadow:0 1px 0 rgba(255,248,228,.65)}
.brand .sub{color:#3f2a10;text-shadow:0 1px 0 rgba(255,248,228,.55)}
.topinfo{color:#241305;text-shadow:0 1px 0 rgba(255,248,228,.6);font-weight:600}
.topinfo b{color:#160b02}
.phasebar i{color:#4a3216}
.phasebar i.done{color:#3a2609;border-color:rgba(80,60,35,.35)}
.phasebar i.now{color:#160b02;background:#c9a55b;border-color:#a98544}
.tin-seed{color:#4a3216}

/* 左列竖排按钮（三国杀式） */
/* 左列竖排按钮（三国杀式，放屏幕左下角空区） */
.topbtns{position:absolute;left:14px;bottom:74px;flex-direction:column;gap:8px;z-index:12}
.topbtns .btn{width:76px;height:34px;padding:0;border-radius:8px;font-size:12.5px;
  color:#f3e6c8;border:1px solid #8a6d3d;
  background:linear-gradient(180deg,rgba(84,64,42,.94),rgba(48,36,24,.94));
  box-shadow:0 3px 8px rgba(40,28,15,.35),inset 0 1px 0 rgba(255,240,210,.16)}
.topbtns .btn:hover{filter:brightness(1.16);border-color:#c9a55b;color:#fff3d8}

/* ---------------------------------------------------------------- 语料库 / 回收：贴右上角 */
.center{left:auto;right:14px;top:8px;transform:none;gap:6px;align-items:flex-start}
.pile{width:50px;height:64px;border-radius:6px;font-size:8px;letter-spacing:.04em;box-shadow:0 4px 10px rgba(40,28,15,.4)}
.pile b{font-size:15px;margin-bottom:1px}
/* 三国杀式布局不常驻展示「上一张打出的牌」，避免和中央牌堆叠在一起 */
.lastplay{display:none}
.pile{background:linear-gradient(160deg,rgba(80,60,40,.96),rgba(48,34,22,.96));border-color:#8a6d3d;color:#e6d3ab;box-shadow:0 8px 20px rgba(40,28,15,.45)}
.pile b{color:#f4dfae}
.pile.rune{background-image:linear-gradient(rgba(30,20,10,.55),rgba(30,20,10,.72)),url('../assets/gen/card-back.png')}
.turnbadge{color:#33200a;text-shadow:0 1px 0 rgba(255,248,228,.55)}
.turnbadge b{color:#1c0e02;text-shadow:0 1px 0 rgba(255,248,228,.55)}

/* ---------------------------------------------------------------- 座位卡（竖卡） */
.seat{width:124px;filter:drop-shadow(0 5px 10px rgba(40,25,10,.42))}
.seat .seatcard{width:124px;height:174px;border-radius:5px;border:2px solid #b08d4f;overflow:visible;
  background:#0b0f15;
  box-shadow:0 4px 10px rgba(40,25,10,.4),inset 0 0 0 2px rgba(255,244,214,.32)}
.seat .seatcard::before{content:"";position:absolute;inset:3px;border:1px solid rgba(255,240,200,.30);border-radius:3px;z-index:2;pointer-events:none}
.seat .sc-art{border-radius:3px;overflow:hidden}
.seat .sc-art img{object-position:50% 10%}
.seat.turn .seatcard{border-color:#f0d69c;box-shadow:0 0 0 1px rgba(240,214,156,.75),0 0 18px rgba(232,203,142,.6),inset 0 0 0 2px rgba(255,246,222,.45)}
.seat.dead{filter:grayscale(1) brightness(.6);opacity:.7}

/* 身份徽记：卡牌右上角（收进卡内，避免被卡面裁掉一半） */
.seat .idbadge{left:auto;right:2px;top:2px;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:8.5px;font-weight:700;line-height:1.05;color:#4a2f16;padding:1px;
  background:radial-gradient(circle at 35% 30%,#f9efd6,#e2ca9c 62%,#b08d4f);
  border:2px solid #8a6d3d;box-shadow:0 2px 6px rgba(40,25,10,.45),inset 0 1px 2px rgba(255,255,255,.65)}
.seat .idbadge:hover{color:#2e1c0b;box-shadow:0 3px 10px rgba(40,25,10,.5),inset 0 1px 2px rgba(255,255,255,.75)}
.seat .facbadge{left:4px;top:4px;right:auto;font-size:8px;line-height:13px;padding:0 3px;background:rgba(20,13,6,.72);border-color:currentColor}
.seat .facbadge img{width:9px;height:9px}

/* 名字 / 数值区 */
.seat .sc-info{position:absolute;inset:0;padding:0;background:none;pointer-events:none}
.seat .sc-name{position:absolute;left:3px;right:3px;bottom:20px;font-size:12px;color:#f9efd8;
  text-shadow:0 1px 2px rgba(0,0,0,.75),0 0 10px rgba(0,0,0,.5)}
.seat .sc-name em{font-size:7px;padding:0 1px}
.seat .sc-line{position:absolute;left:3px;right:3px;bottom:6px;font-size:8px;color:#eadcb8;
  text-shadow:0 1px 2px rgba(0,0,0,.7)}
.seat .sc-status{position:absolute;left:0;right:0;top:calc(100% + 16px);bottom:auto;margin:0;display:flex;flex-wrap:wrap;gap:1px;justify-content:center}
.seat .sc-status .stchip{font-size:7.5px;line-height:11px;padding:0 2px;background:rgba(18,12,6,.72);border-color:rgba(201,165,91,.45)}
/* 稳定度：三国杀式「左下角血量数字 + 竖排血格向上」 */
.seat .sc-stats{position:absolute;left:2px;bottom:1px;top:auto;margin:0;display:flex;flex-direction:column;align-items:center;gap:1px}
.seat .sc-stats .bar:first-child{flex-direction:column-reverse;gap:1.5px;align-items:center}
/* 算力/温度小点在角色卡上先不显示，点角色卡看详情 */
.seat .sc-stats .bar.ramrow,.seat .sc-stats .temp{display:none}
.seat .hp-num{position:static;left:auto;bottom:auto;width:16px;height:16px}
.seat .pip{width:7px;height:7px;border-radius:50%;background:rgba(18,12,6,.5);border:1px solid rgba(255,240,210,.4)}
.seat .pip.on{background:radial-gradient(circle at 35% 30%,#b8f0a8,#4fae4c 72%);border-color:rgba(36,70,26,.7);box-shadow:0 0 5px rgba(96,204,90,.75)}
.seat .pip.lost{border-color:rgba(226,88,79,.65);background:transparent}
.seat .pip.preview{border-color:#ff8a72}
.seat .pip.ram{width:5px;height:5px}
.seat .pip.ram.on{background:radial-gradient(circle at 35% 30%,#cfe0ff,#5b8def)}
.seat .temp{margin-top:1px;gap:1px}
.seat .tcell{width:4px;height:2.5px}
.seat .preview-num{font-size:8px}
/* 装备 / 技能 / 判定区：技能与判定不占卡面，点角色卡看详情；装备贴在卡牌正下方 */
.seat .sc-skills,.seat .sc-judge{display:none}
.seat .sc-equips{position:absolute;left:0;right:0;top:100%;margin-top:2px;display:flex;justify-content:center;
  gap:2px;max-width:124px;overflow:hidden}
.seat .sc-equips .eqchip{display:inline-block;font-size:8px;line-height:12px;padding:0 2px;border-radius:2px;
  white-space:nowrap;background:rgba(26,17,8,.84);border:1px solid rgba(201,165,91,.45);
  color:#e8d3a4;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-style:normal}
.seat .sc-equips .eqchip.weapon{color:#f3d69b;border-color:rgba(201,165,91,.55)}
.seat .sc-equips .eqchip.armor{color:#b9d7ff;border-color:rgba(120,160,220,.5)}
.seat .sc-equips .eqchip.accessory{color:#d8c6ff;border-color:rgba(150,120,220,.45)}
.seat .sc-equips .eqchip.agent{color:#f0d69c;border-color:#a98544}

/* ---------------------------------------------------------------- 底部（手牌区） */
.foot{display:none}
.bottom{flex:0 0 306px;padding:4px 14px 6px;border-top:0;gap:10px;align-items:flex-end;flex-direction:row-reverse;
  background:linear-gradient(180deg,rgba(30,20,10,0),rgba(30,20,10,.05) 26%,rgba(30,20,10,.28) 100%)}
.selfpanel{width:158px;flex:0 0 158px}
.handzone{order:0;align-self:stretch}
.selfbar{order:0;height:18px;color:#241305;text-shadow:0 1px 0 rgba(255,248,228,.6);font-weight:600}
.selfbar .who{color:#1a0d02}
.selfbar .phase{border-color:rgba(90,66,38,.6);color:#241305}
.selfbar .phase.play{background:#c9a55b;border-color:#a98544;color:#2e2114}
.actions{order:1;min-height:30px;height:auto;gap:10px;flex-wrap:wrap;row-gap:2px}
.pend-brief{color:#241305;text-shadow:0 1px 0 rgba(255,248,228,.6);font-weight:600;font-size:12.5px}
.pend-brief b{color:#1a0d02}
.pend-brief em{color:#9e2417}
.hand{order:2;overflow:visible;align-items:flex-end;justify-content:center;padding:0 10px 4px;min-height:0}

/* 动作按钮：主按钮=三国杀“确定”绿，次按钮=“取消”棕 */
.actions .btn{padding:6px 20px;border-radius:6px;font-size:12.5px;letter-spacing:.1em;border:1px solid #6b5731;
  color:#f6e9c9;background:linear-gradient(180deg,#7a5f3a,#4a3620);
  box-shadow:0 3px 8px rgba(40,25,10,.45),inset 0 1px 0 rgba(255,240,210,.2);text-shadow:0 1px 1px rgba(0,0,0,.35)}
.actions .btn:hover{filter:brightness(1.14)}
.actions .btn.gold,.actions .btn:not(.ghost):not(.danger):not(.pass){
  background:linear-gradient(180deg,#b6cd77,#7d9a48);border-color:#4f6526;color:#1f2d0d;
  text-shadow:0 1px 0 rgba(255,255,255,.3);box-shadow:0 3px 8px rgba(40,25,10,.45),inset 0 1px 0 rgba(255,255,255,.45)}
.actions .btn.ghost{background:linear-gradient(180deg,#6b5334,#43301c);border-color:#8a6d3d;color:#f0e2bf}
.actions .btn.danger,.actions .btn.pass{background:linear-gradient(180deg,#8a4a3a,#5a2a20);border-color:#a55644;color:#ffe3d8}
.actions .hint{color:#241305;text-shadow:0 1px 0 rgba(255,248,228,.65);font-weight:600}
.actions .hint.warn{color:#8a2a18}
.actions .flashmsg{color:#9e2417!important}

/* ---------------------------------------------------------------- 手牌（炉石传说式大卡 + 扇形） */
.hand .card{width:156px;height:208px;margin-left:-54px;flex:0 0 auto;border-radius:13px;
  border:3px solid #3f2c18;position:relative;overflow:visible;cursor:pointer;
  background:
    radial-gradient(ellipse at 50% 118%,rgba(255,214,140,.20),transparent 58%),
    linear-gradient(180deg,#6a5030,#3a2815 16%,#2a1c10 52%,#3d2c19 82%,#21150a);
  box-shadow:0 10px 22px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.4),
    inset 0 0 0 2px rgba(232,203,142,.30),inset 0 0 0 7px rgba(16,9,4,.55);
  transform-origin:50% 155%;
  transform:translateY(var(--lift,0px)) rotate(var(--rot,0deg));
  transition:transform .16s ease,box-shadow .16s ease,filter .16s}
.hand .card:first-child{margin-left:0}
/* 金色内框 */
.hand .card::before{content:"";position:absolute;inset:6px;border-radius:10px;border:1px solid rgba(232,203,142,.45);
  box-shadow:inset 0 0 18px rgba(0,0,0,.55);pointer-events:none;z-index:5}
/* 画心 */
.hand .card-art{inset:auto;left:8px;right:8px;top:8px;bottom:auto;width:auto;height:106px;
  object-fit:cover;object-position:50% 40%;border-radius:8px 8px 2px 2px;border:1px solid rgba(0,0,0,.65);
  opacity:1;mix-blend-mode:normal;z-index:2;filter:saturate(1.22) brightness(1.12);
  box-shadow:inset 0 0 0 1px rgba(255,248,225,.16),0 2px 6px rgba(0,0,0,.4)}
/* 左上法力水晶（算力费） */
.hand .card .cost{left:-9px;top:-9px;right:auto;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:#fff;
  background:radial-gradient(circle at 34% 28%,#d8f4ff,#5ec4f2 34%,#1f6fa8 68%,#0d3d61 100%);
  border:3px solid #e2c07d;z-index:7;text-shadow:0 2px 3px rgba(0,20,40,.65);
  box-shadow:0 4px 10px rgba(0,0,0,.55),inset 0 0 10px rgba(255,255,255,.55),0 0 14px rgba(94,196,242,.35)}
/* 右上花色/点数（做小的判定信息徽记） */
.hand .card .cs{left:auto;right:9px;top:9px;font-size:11px;font-weight:800;line-height:1;
  padding:2px 4px;border-radius:5px;background:rgba(12,8,4,.72);border:1px solid rgba(232,203,142,.45);
  color:#f2e7cd;text-shadow:none;z-index:6}
.hand .card .cs.red{color:#ffb2a2}
/* 牌名条 */
.hand .card .nm2{left:6px;right:6px;bottom:auto;top:117px;height:27px;
  display:flex;align-items:center;justify-content:center;padding:0 5px;
  font-family:"Noto Serif SC",serif;font-size:15px;font-weight:900;color:#f8e9c4;letter-spacing:.04em;
  background:linear-gradient(180deg,#8a6a3c,#5c4322 55%,#4a351b);
  border:1px solid #d8b46a;border-radius:5px;white-space:nowrap;overflow:hidden;max-height:none;z-index:4;
  box-shadow:0 2px 5px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,240,200,.28);text-shadow:0 1px 2px rgba(0,0,0,.7)}
.hand .card .nm2.sm{font-size:11.5px;letter-spacing:0}
/* 说明文字羊皮纸框 */
.hand .card .hs-text{position:absolute;left:8px;right:8px;top:150px;bottom:8px;border-radius:5px;
  padding:4px 6px 12px;font-size:8.5px;line-height:1.24;color:#3a2a16;text-align:center;overflow:hidden;z-index:3;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;word-break:break-word;
  background:linear-gradient(180deg,#efe3c8,#dcc9a2);border:1px solid #8a6d3d;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 8px rgba(120,90,50,.18)}
.hand .card .hs-text:empty{display:none}
/* 类型字（压在说明框下沿） */
.hand .card .ft{left:0;right:0;bottom:9px;font-size:7.5px;color:#5f4a2c;letter-spacing:.08em;z-index:4;
  text-shadow:0 1px 0 rgba(255,250,235,.55)}
/* 稀有度宝石（按牌类型上色，钉在牌名条下沿） */
.hand .card .hs-gem{position:absolute;left:50%;top:139px;transform:translateX(-50%);width:13px;height:13px;
  border-radius:50%;border:2px solid #d8b46a;z-index:6;
  background:radial-gradient(circle at 35% 30%,#fff,#9aa6b2 55%,#5e6873);
  box-shadow:0 1px 4px rgba(0,0,0,.6),0 0 8px rgba(255,255,255,.15)}
.hand .card.t-basic .hs-gem{background:radial-gradient(circle at 35% 30%,#fff,#c9d2dc 55%,#8c97a3)}
.hand .card.t-trick .hs-gem{background:radial-gradient(circle at 35% 30%,#cfe8ff,#5aa8e0 55%,#1f6fa8)}
.hand .card.t-delayed .hs-gem{background:radial-gradient(circle at 35% 30%,#e8d8ff,#a78bfa 55%,#6d4fbc)}
.hand .card.t-equip .hs-gem{background:radial-gradient(circle at 35% 30%,#d8ffe4,#57c98a 55%,#2c8b58)}
.hand .card.t-arms .hs-gem{background:radial-gradient(circle at 35% 30%,#fff1c8,#f0b23c 55%,#b87614);box-shadow:0 0 10px rgba(240,178,60,.6)}
.hand .card.t-agent .hs-gem{background:radial-gradient(circle at 35% 30%,#fff,#b9c2cf 55%,#7a8697)}
/* 悬停：抽出来放大 */
.hand .card:hover{transform:translateY(-64px) scale(1.22) rotate(0deg);z-index:50;
  box-shadow:0 22px 40px rgba(0,0,0,.6),0 0 0 1px #f0d69c,0 0 26px rgba(232,203,142,.4)}
.hand .card.sel{transform:translateY(-34px) scale(1.05) rotate(0deg);z-index:40;
  box-shadow:0 16px 30px rgba(0,0,0,.55),0 0 0 3px #e8cb8e,0 0 26px rgba(232,203,142,.55)}
.hand .card.dim{opacity:.5;filter:grayscale(.5)}
.hand .card.unplay{cursor:not-allowed}
.hand .card.unplay::after{content:"";position:absolute;inset:0;border-radius:11px;pointer-events:none;z-index:8;
  background:repeating-linear-gradient(135deg,rgba(10,6,2,.34) 0 8px,rgba(10,6,2,.12) 8px 16px)}

/* ---------------------------------------------------------------- 自己的面板 */
.selfcard{width:148px;border-radius:5px;border:2px solid #b08d4f;background:#0b0f15;
  box-shadow:0 6px 16px rgba(40,25,10,.4),inset 0 0 0 2px rgba(255,244,214,.28)}
.selfcard::after{content:"";position:absolute;inset:3px;border:1px solid rgba(255,240,200,.26);border-radius:3px;pointer-events:none;z-index:3}
.selfart{height:196px}
.self-ident{font-size:8.5px;line-height:13px;padding:0 5px}
.self-turn{font-size:8px;line-height:13px;padding:0 3px}
.selfbody b{font-size:14.5px}
.selfbody>span{font-size:9.5px}
.selfskills .skillchip{font-size:8px;line-height:12px;padding:0 2px;background:rgba(30,20,10,.8);border-color:rgba(201,165,91,.45);color:#ecd9ae}
.selfbody{background:linear-gradient(transparent,rgba(22,14,6,.94) 34%)}
.selfbody b{color:#f9efd8;font-size:14.5px}
.selfbody>span{color:#e2d3b3;font-size:9.5px}
.self-ident{background:rgba(20,13,6,.8);border-color:currentColor}
.self-turn{background:rgba(20,13,6,.8);color:#cbbd9d;border-color:rgba(201,165,91,.4)}
.self-turn.on{background:#c9a55b;color:#2a1a08;border-color:#a98544}
.selfstatus{bottom:0;left:auto;right:150px;width:100px;align-items:flex-end}
.selfstatus .stchip{background:rgba(24,16,8,.88);border-color:rgba(201,165,91,.4);color:#eadcb8}
.selfstatus .stchip.dim{color:#b3a385}
.selfstatus .stchip.gold{color:#f6dfae;border-color:rgba(232,203,142,.65);background:rgba(232,203,142,.16)}

/* ---------------------------------------------------------------- 战报抽屉 */
.logpanel{background:rgba(30,20,10,.95);border-left:1px solid rgba(201,165,91,.35)}
.loghead{border-bottom-color:rgba(201,165,91,.3)}
.logbody{color:#e6d7b8}
.logline{color:#dfd0b0;border-bottom-color:rgba(255,240,210,.06)}
.logline.turn{color:#f0d69c}
.logclose{color:#cbbd9d}

/* ---------------------------------------------------------------- 主菜单 / 结算 / 提示 */
.menu-bg{background-image:linear-gradient(90deg,rgba(18,12,6,.9),rgba(26,18,8,.58) 45%,rgba(18,12,6,.82)),url("../assets/gen/bg-sgs.jpg");background-size:cover;background-position:center}
.menu-tip,.menu-desc{color:#d8c9a8}
.overlay{background:rgba(26,17,8,.9)}
.tooltip,.tipbox{background:rgba(30,20,10,.98);border-color:rgba(201,165,91,.5);color:#efe3c8}
.dlg{background:rgba(40,28,16,.94);border-color:rgba(167,139,250,.45)}
.midpick{background:rgba(34,24,12,.97);border-color:rgba(201,165,91,.5)}

/* ---------------------------------------------------------------- 出牌动画：中央大卡 + 「谁对谁」 */
.fx-caption{position:absolute;z-index:8;transform:translateX(-50%);text-align:center;white-space:nowrap;pointer-events:none}
.fxc-cap-user{font-family:"Noto Serif SC",serif;font-size:22px;font-weight:800;color:#fff4d8;letter-spacing:.08em;
  text-shadow:0 2px 10px rgba(0,0,0,.92),0 0 22px rgba(201,165,91,.5)}
.fxc-cap-line{margin-top:3px;font-size:13px;color:#f2dca8;letter-spacing:.06em;
  text-shadow:0 1px 5px rgba(0,0,0,.92)}
.fxc-cap-line b{color:#ffd28a;font-weight:700}
.fxc-cap-arrow{color:#ffb46a;font-weight:700}
.fxc-cap-none{color:#cbb88f}
/* 三国杀皮肤：文字只在中央卡下显示，隐藏顶部横幅与卡内的使用者/目标小字 */
.fx-action{display:none}
.fx-card .fxc-owner,.fx-card .fxc-targets{display:none}
/* 中央大卡换成和手牌统一的深棕石框 + 金线 */
.fx-card{border:3px solid #3f2c18;border-radius:13px;
  background:linear-gradient(180deg,#5b4527,#2a1c10 60%,#21150a);
  box-shadow:0 20px 50px rgba(0,0,0,.7),0 0 0 1px rgba(226,192,125,.85),0 0 30px rgba(232,203,142,.3)}

/* 出牌动画期间隐藏中央的回合提示，避免和卡牌下方的「谁对谁」说明叠在一起 */
.fx-busy .turnbadge{opacity:0}

/* ---------------------------------------------------------------- 血量数字徽记（菱形）+ 自己的血条 */
.hp-num{width:17px;height:17px;transform:rotate(45deg);flex:0 0 auto;
  border:1px solid #e2c07d;background:linear-gradient(180deg,#8a3a25,#5a1c10);
  box-shadow:0 1px 4px rgba(0,0,0,.55),inset 0 0 3px rgba(255,220,160,.35);z-index:3}
.hp-num span{display:block;width:100%;height:100%;transform:rotate(-45deg);
  line-height:17px;text-align:center;font-size:10px;font-weight:800;color:#ffe9c4;
  font-family:"Noto Serif SC",serif}
.self-hp{position:absolute;left:4px;bottom:78px;z-index:5;display:flex;align-items:flex-end;gap:4px;pointer-events:none}
.self-hp .bar{display:flex;flex-direction:column-reverse;gap:1.5px;align-items:center}
.self-hp .pip{width:7px;height:7px;border-radius:50%;background:rgba(18,12,6,.5);border:1px solid rgba(255,240,210,.45)}
.self-hp .pip.on{background:radial-gradient(circle at 35% 30%,#b8f0a8,#4fae4c 72%);border-color:rgba(36,70,26,.7);box-shadow:0 0 5px rgba(96,204,90,.75)}
.self-hp .hp-num{width:16px;height:16px}
.self-hp .hp-num span{line-height:16px;font-size:9px}

/* 左上角剩余身份数（三国杀皮肤：暖棕底 + 同色系字） */
.ident-hud{background:rgba(28,18,8,.78);border-color:rgba(201,165,91,.5);color:#eadcb8;
  box-shadow:0 2px 8px rgba(40,25,10,.35);top:50px}
.ident-hud .lord{color:#F0D69C}
.ident-hud .loyal{color:#9CC0F5}
.ident-hud .rebel{color:#FFA69C}
.ident-hud .spy{color:#CBB6FF}

/* 出牌确认栏（三国杀皮肤：暖棕面板 + 绿确定 / 棕取消） */
.play-confirm{background:rgba(30,20,10,.92);border-color:rgba(201,165,91,.6);
  box-shadow:0 14px 34px rgba(40,25,10,.55)}
.play-confirm .pc-card{color:#f4dfae;text-shadow:0 1px 0 rgba(255,248,228,.45)}
.play-confirm .btn{padding:6px 20px;border-radius:6px;font-size:12.5px;letter-spacing:.1em;
  border:1px solid #6b5731;color:#f6ead0;background:linear-gradient(180deg,#5a4527,#3a2a17);
  cursor:pointer;font-family:inherit}
.play-confirm .btn:hover{filter:brightness(1.14)}
.play-confirm .btn.gold{background:linear-gradient(180deg,#7fae55,#4e7a32);border-color:#9cc06a;color:#08240a;font-weight:700}
.play-confirm .btn.ghost{background:linear-gradient(180deg,#6b5334,#43301c);border-color:#8a6d3d;color:#f0e2bf}
.play-confirm .btn:disabled{opacity:.45;cursor:not-allowed;filter:none}

/* 主动技能按钮（三国杀皮肤：和「结束出牌」同款绿按钮，竖排在状态栏上方） */
.selfstatus{max-height:230px}
.selfskillbtn{background:linear-gradient(180deg,#7fae55,#4e7a32);border-color:#9cc06a;color:#08240a;
  font-weight:700;font-size:10.5px;letter-spacing:.04em;padding:4px 5px;border-radius:6px;
  box-shadow:0 2px 6px rgba(40,25,10,.35)}
.selfskillbtn:hover{filter:brightness(1.1)}

/* 技能确认框（三国杀皮肤：暖棕描金面板 + 绿确定 / 棕取消） */
.skill-confirm{background:linear-gradient(180deg,rgba(48,32,17,.97),rgba(30,20,10,.97));
  border:2px solid #8a6d3d;box-shadow:0 16px 40px rgba(40,25,10,.6),inset 0 0 0 1px rgba(255,240,200,.16)}
.skill-confirm .sk-kicker{color:#c9a55b}
.skill-confirm .sk-title{color:#f9efd8;text-shadow:0 1px 0 rgba(255,248,228,.35)}
.skill-confirm .sk-desc{color:#eadcb8}
.skill-confirm .btn{padding:6px 22px;border-radius:6px;font-size:12.5px;letter-spacing:.1em;
  border:1px solid #6b5731;color:#f6ead0;background:linear-gradient(180deg,#5a4527,#3a2a17);
  cursor:pointer;font-family:inherit}
.skill-confirm .btn:hover{filter:brightness(1.14)}
.skill-confirm .btn.gold{background:linear-gradient(180deg,#7fae55,#4e7a32);border-color:#9cc06a;color:#08240a;font-weight:700}
.skill-confirm .btn.ghost{background:linear-gradient(180deg,#6b5334,#43301c);border-color:#8a6d3d;color:#f0e2bf}

/* 手牌过多时的紧凑模式：牌名改到左侧可见条内，说明文字收起 */
.hand.compact .card .nm2{left:5px;right:auto;width:calc(var(--strip,72px) - 12px);min-width:44px;
  justify-content:flex-start;padding:0 3px;font-size:10px;letter-spacing:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hand.compact .card .hs-text{display:none}
.hand.compact .card .hs-gem{left:var(--strip,72px);right:auto;margin-left:-8px}
.hand.compact .card .ft{display:none}

/* 紧凑模式：悬停时恢复完整牌名和说明文字（放大查看效果） */
.hand.compact .card:hover .nm2{width:calc(100% - 12px);justify-content:center;text-align:center;font-size:15px}
.hand.compact .card:hover .nm2.sm{font-size:11.5px}
.hand.compact .card:hover .hs-text{display:-webkit-box}
.hand.compact .card:hover .ft{display:block}

/* 技能交互中选中的手牌只抬一点，避免盖住操作条 */
.hand.ia-active .card.sel{transform:translateY(-14px) scale(1.04) rotate(0deg)}