/* ============================================================
   V10 · 水墨金纹界面
   ============================================================ */
:root{
  --ink:#090c11;
  --ink-2:#0f141c;
  --ink-3:#161e29;
  --panel:rgba(22,30,41,.94);
  --panel-2:rgba(30,41,55,.94);
  --line:rgba(201,162,77,.24);
  --line-strong:rgba(201,162,77,.58);
  --gold:#c9a24d;
  --gold-2:#f0d58f;
  --gold-3:#8a682e;
  --paper:#ebdfc5;
  --paper-2:#d9c9a7;
  --muted:#94a1b2;
  --muted-2:#6d7a8b;
  --red:#c04a4a;
  --red-2:#ff8080;
  --green:#5d9a6b;
  --blue:#5f86bd;
  --purple:#a06fc0;
  --orange:#d08a45;
  --shadow:0 20px 60px rgba(0,0,0,.55);
  --radius:14px;
  --serif:"STSong","Songti SC","SimSun","Noto Serif SC",serif;
}
*{box-sizing:border-box;user-select:none;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0;overflow:hidden;color:var(--paper);
  font-family:"Microsoft YaHei","PingFang SC","Noto Sans SC",system-ui,sans-serif;
  background:
    radial-gradient(1200px 760px at 50% -14%,#243247 0%,rgba(36,50,71,0) 62%),
    radial-gradient(900px 640px at 84% 110%,#1a2431 0%,rgba(26,36,49,0) 58%),
    repeating-linear-gradient(115deg,rgba(201,162,77,.032) 0 1px,transparent 1px 19px),
    var(--ink);
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 50% 42%,transparent 0 44%,rgba(0,0,0,.52) 100%);
}
button{font-family:inherit;outline:none;}
.screen{position:fixed;inset:0;display:none;flex-direction:column;z-index:1;}
.screen.active{display:flex;animation:screenIn .3s ease;}
@keyframes screenIn{from{transform:translateY(7px)}to{transform:none}}

/* ---------- 通用按钮 ---------- */
.btn{
  position:relative;padding:10px 18px;border-radius:9px;
  border:1px solid rgba(201,162,77,.32);
  background:linear-gradient(180deg,rgba(38,49,64,.96),rgba(19,26,36,.96));
  color:var(--paper);font-size:14px;font-weight:600;letter-spacing:.04em;
  cursor:pointer;transition:transform .12s ease,border-color .18s,box-shadow .18s,color .18s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 6px 16px rgba(0,0,0,.22);
}
.btn:hover:not(:disabled){border-color:var(--line-strong);color:var(--gold-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 8px 20px rgba(0,0,0,.3);}
.btn:active:not(:disabled){transform:translateY(1px) scale(.99);}
.btn:disabled{opacity:.34;cursor:not-allowed;filter:grayscale(.35);}
.btn.primary{
  background:linear-gradient(180deg,#efd28a 0%,#c9a24d 55%,#9a7532 100%);
  color:#1a1409;border-color:#f2d894;
  text-shadow:0 1px 0 rgba(255,255,255,.3);
  box-shadow:0 0 18px rgba(201,162,77,.18),inset 0 1px 0 rgba(255,255,255,.5);
}
.btn.primary:hover:not(:disabled){color:#120d06;box-shadow:0 0 26px rgba(201,162,77,.3),inset 0 1px 0 rgba(255,255,255,.55);}
.btn.ghost{background:rgba(12,16,22,.5);border-color:rgba(255,255,255,.12);color:var(--muted);}
.btn.danger{background:linear-gradient(180deg,rgba(107,39,39,.92),rgba(57,20,20,.95));border-color:rgba(224,90,90,.45);color:#ffd3d3;}
.btn.small{padding:7px 12px;font-size:12px;border-radius:7px;}
.btn.highlight{animation:pulseGold 1.2s infinite alternate;}
@keyframes pulseGold{from{box-shadow:0 0 6px rgba(201,162,77,.25)}to{box-shadow:0 0 22px rgba(201,162,77,.65),inset 0 0 8px rgba(201,162,77,.2)}}

/* ---------- 主页 ---------- */
#screen-home{align-items:center;justify-content:center;overflow:hidden;}
#screen-home::before{
  content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(circle at 50% 48%,rgba(201,162,77,.12) 0 1px,transparent 2px) 0 0/34px 34px,
    radial-gradient(circle at 50% 35%,rgba(201,162,77,.12),transparent 52%);
  opacity:.5;pointer-events:none;
  mask-image:radial-gradient(circle at 50% 50%,#000 0 30%,transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0 30%,transparent 72%);
}
.home-content{position:relative;z-index:2;text-align:center;padding:24px;animation:homeIn .8s ease both;}
@keyframes homeIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.home-seal{
  width:96px;height:96px;margin:0 auto 18px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--serif);font-size:46px;color:var(--gold-2);
  background:radial-gradient(circle at 40% 35%,rgba(201,162,77,.24),rgba(201,162,77,.03) 62%);
  border:1px solid var(--line-strong);
  box-shadow:0 0 0 7px rgba(201,162,77,.04),0 0 38px rgba(201,162,77,.18),inset 0 0 24px rgba(201,162,77,.1);
  position:relative;
}
.home-seal::after{content:"";position:absolute;inset:9px;border:1px solid rgba(201,162,77,.25);border-radius:50%;}
.home-title{
  margin:0;font-family:var(--serif);font-weight:700;
  font-size:clamp(46px,9vw,76px);letter-spacing:.16em;color:var(--paper);
  text-shadow:0 4px 36px rgba(201,162,77,.38),0 1px 0 rgba(255,255,255,.12);
  padding-left:.16em;
}
.home-subtitle{margin-top:10px;font-size:13px;letter-spacing:.34em;color:var(--gold);opacity:.9;}
.home-divider{width:240px;height:1px;margin:22px auto 26px;position:relative;background:linear-gradient(90deg,transparent,var(--gold),transparent);}
.home-divider::after{content:"◆";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:8px;color:var(--gold-2);background:var(--ink);padding:0 8px;}
.home-menu{display:flex;flex-direction:column;gap:12px;width:min(310px,78vw);margin:0 auto;}
.menu-btn{
  position:relative;padding:15px 20px;border-radius:11px;cursor:pointer;
  background:linear-gradient(180deg,rgba(31,42,57,.95),rgba(17,23,32,.96));
  border:1px solid rgba(201,162,77,.27);color:var(--paper);
  font-size:15px;letter-spacing:.16em;font-weight:600;
  transition:all .18s ease;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 6px 18px rgba(0,0,0,.25);
}
.menu-btn::before{content:"";position:absolute;left:13px;top:50%;width:6px;height:6px;transform:translateY(-50%) rotate(45deg);background:var(--gold);opacity:.55;transition:all .18s;}
.menu-btn:hover{border-color:var(--line-strong);color:var(--gold-2);transform:translateY(-1px);box-shadow:0 10px 26px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);}
.menu-btn:hover::before{opacity:1;box-shadow:0 0 10px var(--gold);}
.menu-btn.primary{
  background:linear-gradient(180deg,#efd28a 0%,#c9a24d 58%,#9a7532 100%);
  color:#1a1409;border-color:#f2d894;text-shadow:0 1px 0 rgba(255,255,255,.35);
  box-shadow:0 0 28px rgba(201,162,77,.16),inset 0 1px 0 rgba(255,255,255,.55);
}
.menu-btn.primary::before{background:#1a1409;opacity:.8;}
.home-footer{margin-top:30px;font-size:11px;letter-spacing:.24em;color:var(--muted-2);opacity:.85;}

/* ---------- 模式选择 ---------- */
#screen-mode,#screen-select,#screen-guide{align-items:center;overflow-y:auto;padding:26px 18px;}
.screen-heading{font-family:var(--serif);font-size:clamp(26px,4.4vw,38px);letter-spacing:.18em;color:var(--gold-2);margin:12px 0 6px;text-align:center;text-shadow:0 4px 24px rgba(201,162,77,.2);}
.screen-subheading{font-size:12px;letter-spacing:.18em;color:var(--muted);margin-bottom:24px;text-align:center;}
.mode-list{display:flex;flex-direction:column;gap:13px;width:min(420px,92vw);margin:8px auto 0;}
.mode-card{
  position:relative;text-align:left;padding:16px 18px 16px 56px;border-radius:13px;cursor:pointer;
  background:linear-gradient(145deg,rgba(31,42,57,.92),rgba(15,21,29,.95));
  border:1px solid rgba(201,162,77,.22);color:var(--paper);transition:all .18s;
}
.mode-card::before{
  content:attr(data-mark);position:absolute;left:16px;top:50%;transform:translateY(-50%);
  font-family:var(--serif);font-size:24px;color:var(--gold);opacity:.82;
}
.mode-card:hover{border-color:var(--line-strong);transform:translateX(3px);box-shadow:0 12px 28px rgba(0,0,0,.34);}
.mode-name{font-size:17px;font-weight:700;color:var(--gold-2);letter-spacing:.1em;}
.mode-desc{font-size:12px;color:var(--muted);margin-top:5px;letter-spacing:.04em;}
.mode-card.featured{border-color:rgba(201,162,77,.45);background:linear-gradient(145deg,rgba(52,54,42,.92),rgba(21,25,30,.96));}
.mode-actions{display:flex;justify-content:center;margin-top:24px;}
.back-home-btn{margin-top:18px;}
#screen-select .screen-heading{margin-top:0;}
.identity-bar{
  width:min(520px,94vw);display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  padding:11px 16px;border-radius:11px;background:rgba(16,22,30,.7);border:1px solid rgba(201,162,77,.16);
  margin-bottom:16px;font-size:13px;color:var(--muted);
}
.identity-bar select{
  padding:6px 10px;border-radius:7px;background:#111821;color:var(--paper);
  border:1px solid rgba(201,162,77,.3);outline:none;font-family:inherit;
}
.identity-bar label{display:flex;align-items:center;gap:6px;cursor:pointer;}
.identity-bar input[type=checkbox]{accent-color:var(--gold);}
.hero-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:11px;width:min(620px,94vw);margin:4px auto 0;}
.hero-select-card{
  position:relative;min-height:164px;padding:12px 8px 10px;border-radius:14px;cursor:pointer;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  background:linear-gradient(160deg,rgba(32,43,58,.94),rgba(14,19,26,.97));
  border:1px solid rgba(255,255,255,.08);transition:all .2s ease;
}
.hero-select-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 8%,var(--hero-glow,rgba(201,162,77,.18)),transparent 62%);pointer-events:none;}
.hero-select-card:hover{transform:translateY(-3px);border-color:rgba(201,162,77,.4);box-shadow:0 14px 30px rgba(0,0,0,.34);}
.hero-select-card.active{border-color:var(--gold-2);box-shadow:0 0 0 1px rgba(240,213,143,.28),0 0 26px rgba(201,162,77,.24),0 14px 30px rgba(0,0,0,.4);transform:translateY(-3px) scale(1.015);}
.hero-select-card .h-avatar{
  width:66px;height:66px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--serif);font-size:30px;color:#fff5dc;position:relative;z-index:1;
  background:radial-gradient(circle at 38% 32%,var(--hero-a,#685a3c),var(--hero-b,#241d13) 72%);
  border:1px solid rgba(255,255,255,.22);box-shadow:0 8px 18px rgba(0,0,0,.35),inset 0 0 16px rgba(0,0,0,.25);
}
.hero-select-card .h-name{font-family:var(--serif);font-size:16px;font-weight:700;color:var(--paper);position:relative;z-index:1;text-align:center;line-height:1.2;}
.hero-select-card .h-title{font-size:9px;color:var(--muted);letter-spacing:.08em;position:relative;z-index:1;}
.hero-select-card .h-meta{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--muted);position:relative;z-index:1;}
.kingdom-dot{width:7px;height:7px;border-radius:50%;display:inline-block;}
.select-actions{display:flex;flex-direction:column;gap:9px;width:min(300px,80vw);margin-top:22px;}

/* ---------- 图鉴 ---------- */
.guide-top{width:min(820px,94vw);display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.guide-title{font-family:var(--serif);font-size:clamp(22px,3.8vw,30px);color:var(--gold-2);letter-spacing:.14em;}
.guide-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:11px;width:min(920px,94vw);padding-bottom:30px;}
.guide-item{
  padding:14px 15px;border-radius:12px;background:linear-gradient(160deg,rgba(25,34,46,.94),rgba(13,18,25,.96));
  border:1px solid rgba(255,255,255,.07);position:relative;overflow:hidden;
}
.guide-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent,var(--gold));opacity:.7;}
.guide-item h4{margin:0 0 7px;font-family:var(--serif);font-size:16px;color:var(--gold-2);letter-spacing:.05em;display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.guide-item .skill-line{margin:6px 0 0;font-size:12px;line-height:1.6;color:#b9c3cf;}
.guide-item .skill-line b{color:#8fc09a;font-weight:600;}
.guide-item .skill-line em{font-style:normal;color:var(--gold);opacity:.9;}
.guide-item .tag{font-size:9px;padding:1px 5px;border-radius:4px;background:rgba(201,162,77,.13);color:var(--gold);font-weight:400;letter-spacing:0;}
.guide-item .tag.off{background:rgba(180,70,70,.16);color:#e09090;}
.tag{font-size:9px;padding:1px 5px;border-radius:4px;background:rgba(201,162,77,.13);color:var(--gold);font-weight:400;letter-spacing:0;white-space:nowrap;}
.tag.off{background:rgba(180,70,70,.16);color:#e09090;}
.guide-card-face{display:flex;gap:10px;align-items:flex-start;}
.guide-card-face .mini-card{flex:0 0 auto;}
.card-help{font-size:11px;color:var(--muted);line-height:1.55;margin:5px 0 0;}

/* ---------- 游戏主界面 ---------- */
#screen-game{padding:8px 10px 10px;gap:6px;overflow:hidden;}
.game-topbar{
  flex:0 0 38px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 4px;border-bottom:1px solid rgba(201,162,77,.13);
}
.topbar-left{display:flex;align-items:center;gap:10px;min-width:0;}
.brand-mini{font-family:var(--serif);font-size:17px;letter-spacing:.12em;color:var(--gold-2);white-space:nowrap;}
.brand-mini em{font-style:normal;font-size:9px;color:var(--muted);letter-spacing:.1em;margin-left:4px;}
.mode-badge{font-size:10px;color:var(--muted);border:1px solid rgba(201,162,77,.2);padding:3px 8px;border-radius:20px;white-space:nowrap;}
.turn-indicator{font-size:12px;color:var(--gold);letter-spacing:.06em;text-align:center;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.icon-btn{
  padding:6px 11px;border-radius:7px;border:1px solid rgba(255,255,255,.12);
  background:rgba(12,16,22,.6);color:var(--muted);font-size:11px;cursor:pointer;white-space:nowrap;transition:all .16s;
}
.icon-btn:hover{border-color:var(--line-strong);color:var(--gold-2);}
.game-main{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;}

/* 对手区 */
.opponents{flex:0 0 auto;display:flex;gap:7px;flex-wrap:wrap;justify-content:center;align-items:stretch;padding:2px 0;}
.opponent-card{
  position:relative;flex:1 1 118px;max-width:180px;min-width:106px;padding:7px 8px 7px 9px;border-radius:11px;
  background:linear-gradient(150deg,rgba(31,42,57,.94),rgba(13,18,25,.97));
  border:1px solid rgba(255,255,255,.075);overflow:hidden;cursor:pointer;
  transition:transform .18s,border-color .18s,box-shadow .18s,opacity .18s;
  box-shadow:0 8px 18px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.035);
}
.opponent-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--kingdom-color,var(--gold));opacity:.65;}
.opponent-card::after{content:"";position:absolute;right:-24px;top:-32px;width:82px;height:82px;border-radius:50%;background:radial-gradient(circle,var(--kingdom-glow,rgba(201,162,77,.12)),transparent 70%);pointer-events:none;}
.opponent-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.14);}
.opponent-card.dead{opacity:.32;filter:grayscale(1);cursor:default;}
.opponent-card.flipped{background:linear-gradient(150deg,rgba(20,20,22,.96),rgba(9,9,12,.98));}
.opponent-card.flipped .opp-portrait,.opponent-card.flipped .opp-name{filter:grayscale(1);}
.opponent-card.active-turn{border-color:rgba(95,134,189,.6);box-shadow:0 0 0 1px rgba(95,134,189,.22),0 0 16px rgba(95,134,189,.18),0 8px 18px rgba(0,0,0,.28);}
.opponent-card.targetable{border-color:var(--gold-2);box-shadow:0 0 0 1px rgba(240,213,143,.2),0 0 18px rgba(201,162,77,.32),0 8px 18px rgba(0,0,0,.32);animation:targetPulse 1.4s infinite alternate;cursor:pointer;}
.opponent-card.targetable::before{opacity:1;}
.opponent-card.selected-target{border-color:#ff7b7b;box-shadow:0 0 0 1px rgba(255,123,123,.28),0 0 18px rgba(192,74,74,.5),0 8px 18px rgba(0,0,0,.32);}
.opponent-card.targetable.selected-target{animation:none;}
@keyframes targetPulse{from{box-shadow:0 0 0 1px rgba(240,213,143,.15),0 0 10px rgba(201,162,77,.18),0 8px 18px rgba(0,0,0,.3)}to{box-shadow:0 0 0 1px rgba(240,213,143,.35),0 0 24px rgba(201,162,77,.42),0 8px 18px rgba(0,0,0,.3)}}
.opp-top{display:flex;align-items:center;gap:7px;min-width:0;}
.opp-portrait{
  width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-family:var(--serif);font-size:16px;color:#fff1d4;
  background:radial-gradient(circle at 36% 30%,var(--hero-a,#5a4a30),var(--hero-b,#211a11) 75%);
  border:1px solid rgba(255,255,255,.18);box-shadow:0 4px 10px rgba(0,0,0,.3);
}
.opp-name-wrap{min-width:0;flex:1;}
.opp-name{font-size:12px;font-weight:700;color:var(--gold-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25;}
.opp-hero{font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.opp-identity{font-size:8px;padding:1px 4px;border-radius:3px;background:rgba(201,162,77,.13);color:var(--gold);border:1px solid rgba(201,162,77,.18);white-space:nowrap;}
.opp-hp-row{display:flex;align-items:center;gap:5px;margin-top:5px;}
.opp-hp-text{font-size:9px;color:#e09090;white-space:nowrap;}
.opp-hp-pips{display:flex;gap:2px;flex-wrap:wrap;}
.hp-pip{width:5px;height:8px;border-radius:1px;background:rgba(255,255,255,.1);}
.hp-pip.on{background:linear-gradient(180deg,#e66a6a,#a83232);box-shadow:0 0 4px rgba(224,80,80,.35);}
.opp-hand-count{font-size:8px;color:var(--muted);margin-left:auto;white-space:nowrap;}
.opp-skills{font-size:8px;color:#7fa38a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px;opacity:.9;}
.opp-equip-row{display:flex;gap:3px;flex-wrap:wrap;margin-top:3px;min-height:12px;}
.opp-equip-chip{font-size:8px;background:rgba(201,162,77,.08);border:1px solid rgba(201,162,77,.16);padding:0 3px;border-radius:2px;color:#c8b98e;}
.opp-badges{display:flex;gap:3px;flex-wrap:wrap;margin-top:3px;}
.badge{font-size:8px;padding:1px 4px;border-radius:3px;border:1px solid transparent;white-space:nowrap;line-height:1.4;}
.badge-yin{background:rgba(160,111,192,.15);border-color:rgba(160,111,192,.4);color:#d9b8ef;}
.badge-fog{background:rgba(95,134,189,.13);border-color:rgba(95,134,189,.35);color:#b9d2f5;}
.badge-flip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#c8c8c8;}
.badge-rage{background:rgba(208,138,69,.14);border-color:rgba(208,138,69,.4);color:#f0c090;}
.badge-star{background:rgba(201,162,77,.12);border-color:rgba(201,162,77,.35);color:var(--gold-2);}
.opp-judge{position:absolute;top:3px;right:5px;display:flex;gap:2px;max-width:60%;flex-wrap:wrap;justify-content:flex-end;}
.judge-badge{font-size:8px;background:rgba(120,40,40,.7);border:1px solid rgba(224,90,90,.55);padding:0 3px;border-radius:2px;color:#ffd8d8;}
.dying-pulse{animation:dyingPulse .65s infinite alternate!important;border-color:#ff5b5b!important;}
@keyframes dyingPulse{from{box-shadow:0 0 0 1px rgba(255,80,80,.25),0 0 10px rgba(255,60,60,.25)}to{box-shadow:0 0 0 2px rgba(255,80,80,.55),0 0 26px rgba(255,40,40,.6)}}

/* 中央区 */
.center-area{
  flex:0 0 auto;display:flex;align-items:stretch;gap:9px;min-height:76px;max-height:92px;
  padding:7px 10px;border-radius:12px;background:linear-gradient(180deg,rgba(16,22,30,.86),rgba(9,12,17,.9));
  border:1px solid rgba(255,255,255,.055);box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.pile{flex:0 0 74px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;position:relative;}
.pile-stack{width:40px;height:56px;border-radius:4px;position:relative;}
.pile-stack::before,.pile-stack::after{content:"";position:absolute;inset:0;border-radius:4px;border:1px solid rgba(201,162,77,.25);background:linear-gradient(145deg,#1d2836,#0d131b);box-shadow:0 3px 7px rgba(0,0,0,.3);}
.pile-stack::before{transform:translate(-5px,-3px) rotate(-5deg);opacity:.55;}
.pile-stack::after{transform:translate(2px,1px) rotate(2deg);}
.pile.deck-pile .pile-stack{background:
  radial-gradient(circle at 50% 50%,rgba(201,162,77,.15),transparent 65%),
  repeating-linear-gradient(45deg,rgba(201,162,77,.14) 0 1px,transparent 1px 5px),
  linear-gradient(145deg,#26364a,#101822);
  border:1px solid rgba(201,162,77,.35);}
.pile.deck-pile .pile-stack::after{content:"牌";display:grid;place-items:center;font-family:var(--serif);font-size:16px;color:rgba(240,213,143,.5);}
.pile.discard-pile .pile-stack{background:linear-gradient(145deg,#2a2027,#161116);border:1px solid rgba(192,74,74,.3);}
.pile.discard-pile .pile-stack::after{content:"弃";display:grid;place-items:center;font-family:var(--serif);font-size:16px;color:rgba(224,120,120,.45);}
.pile-label{font-size:9px;color:var(--muted);letter-spacing:.06em;}
.pile-label b{color:var(--gold-2);font-size:11px;margin-left:2px;}
.battle-log{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between;padding:1px 6px;overflow:hidden;}
.log-head{display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:.12em;color:var(--muted-2);border-bottom:1px solid rgba(255,255,255,.055);padding-bottom:4px;}
.log-head b{font-weight:400;color:var(--gold);letter-spacing:.04em;}
.log-list{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;overflow:hidden;padding-top:4px;}
.log-line{font-size:10.5px;line-height:1.35;color:#98a5b4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.72;}
.log-line:first-child{color:#d3c49e;opacity:1;}
.log-line.hl{color:var(--gold-2);}
.log-line.dmg{color:#e58c8c;}
.log-line.skill{color:#8fc0a0;}
.log-line.sys{color:var(--muted-2);font-style:italic;}
.log-line.heal{color:#8fc0a0;}
.log-line.dim{color:#6d7a8b;}

/* 玩家区 */
.player-area{
  flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:5px;padding:10px 12px 8px;
  border-radius:16px;position:relative;overflow:hidden;
  background:
    radial-gradient(900px 160px at 15% 0%,rgba(201,162,77,.08),transparent 70%),
    linear-gradient(180deg,rgba(24,34,47,.97),rgba(10,14,20,.98));
  border:1px solid rgba(201,162,77,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 18px 44px rgba(0,0,0,.35);
}
.player-area::before{content:"";position:absolute;inset:5px;border:1px solid rgba(201,162,77,.08);border-radius:12px;pointer-events:none;}
.player-area::after{
  content:"殺";position:absolute;right:9%;top:47%;transform:translateY(-50%);
  font-family:var(--serif);font-size:clamp(120px,20vw,260px);line-height:1;
  color:rgba(201,162,77,.035);pointer-events:none;z-index:0;
  text-shadow:0 0 40px rgba(201,162,77,.02);user-select:none;
}
.player-main{display:flex;align-items:center;gap:11px;position:relative;z-index:1;}
.player-portrait{
  width:62px;height:62px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  font-family:var(--serif);font-size:29px;color:#fff2d6;position:relative;
  background:radial-gradient(circle at 38% 30%,var(--hero-a,#5e4c30),var(--hero-b,#1d1710) 74%);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 8px 22px rgba(0,0,0,.4),inset 0 0 18px rgba(0,0,0,.3),0 0 0 4px rgba(201,162,77,.06);
}
.player-portrait::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(201,162,77,.25);}
.player-details{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.player-head{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0;}
.player-name{font-family:var(--serif);font-size:18px;font-weight:700;color:var(--paper);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;}
.player-name small{font-family:inherit;font-size:10px;color:var(--muted);font-weight:400;margin-left:4px;letter-spacing:.02em;}
.kingdom-chip{font-size:9px;padding:1px 5px;border-radius:3px;border:1px solid var(--kingdom-color,var(--gold));color:var(--kingdom-color,var(--gold));background:rgba(255,255,255,.03);}
.identity-chip{font-size:9px;padding:1px 5px;border-radius:3px;background:rgba(201,162,77,.12);border:1px solid rgba(201,162,77,.25);color:var(--gold-2);}
.hp-num{font-size:11px;color:#e89a9a;margin-left:auto;white-space:nowrap;font-weight:700;letter-spacing:.04em;}
.hp-pips{display:flex;gap:3px;flex-wrap:wrap;}
.hp-pips .hp-pip{width:5px;height:10px;border-radius:1px;}
.skill-chips{display:flex;gap:4px;flex-wrap:wrap;min-height:16px;}
.skill-chip{
  font-size:9.5px;padding:1px 6px;border-radius:10px;cursor:pointer;white-space:nowrap;
  background:rgba(93,154,107,.1);border:1px solid rgba(93,154,107,.24);color:#9fc8aa;transition:all .15s;
}
.skill-chip:hover{background:rgba(93,154,107,.2);color:#c8e6d0;}
.skill-chip.passive{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.11);color:#9aa6b3;}
.skill-chip.off{background:rgba(192,74,74,.1);border-color:rgba(192,74,74,.28);color:#d89a9a;}
.status-row{display:flex;gap:4px;flex-wrap:wrap;min-height:13px;}
.judge-row{display:flex;gap:3px;flex-wrap:wrap;min-height:13px;}
.player-equip{display:flex;gap:5px;flex:0 0 auto;align-items:center;}
.equip-slot{
  width:48px;height:62px;border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:8px;color:#6f7b89;background:rgba(0,0,0,.18);border:1px dashed rgba(255,255,255,.12);position:relative;text-align:center;padding:3px;
}
.equip-slot.has-card{border-style:solid;border-color:rgba(201,162,77,.6);background:linear-gradient(180deg,rgba(43,54,64,.85),rgba(20,27,34,.9));box-shadow:0 0 12px rgba(201,162,77,.12),inset 0 0 0 1px rgba(201,162,77,.12);}
.equip-slot .eq-icon{font-family:var(--serif);font-size:14px;color:var(--gold-2);line-height:1;}
.equip-slot .eq-name{font-size:8px;color:var(--gold-2);line-height:1.15;word-break:break-all;}
.equip-slot .eq-slot-name{font-size:8px;color:#6f7b89;letter-spacing:.04em;}
.action-hint-bar{
  position:relative;z-index:1;text-align:center;font-size:12px;font-weight:600;color:var(--gold-2);
  background:linear-gradient(90deg,transparent,rgba(201,162,77,.1),transparent);
  border-top:1px solid rgba(201,162,77,.12);border-bottom:1px solid rgba(201,162,77,.12);
  padding:5px 10px;letter-spacing:.05em;min-height:28px;display:flex;align-items:center;justify-content:center;gap:8px;
}
.action-hint-bar .hint-sub{font-size:10px;color:var(--muted);font-weight:400;}
.hand-wrap{position:relative;z-index:1;flex:1;min-height:0;display:flex;align-items:flex-end;gap:6px;}
.hand-container{flex:1;height:100%;display:flex;align-items:flex-end;gap:8px;overflow-x:auto;overflow-y:visible;padding:10px 4px 2px;min-height:100px;scrollbar-width:none;}
.hand-container::-webkit-scrollbar{display:none;}
.card{
  width:64px;height:90px;flex:0 0 auto;border-radius:7px;position:relative;cursor:pointer;
  background:linear-gradient(155deg,#f3e9d5 0%,#e3d4b7 58%,#d2bd98 100%);
  border:2px solid #2a2016;color:#251b10;
  box-shadow:0 7px 12px rgba(0,0,0,.42),inset 0 0 0 1px rgba(201,162,77,.65),inset 0 0 18px rgba(120,86,40,.09);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s;overflow:hidden;
}
.card::before{content:"";position:absolute;inset:4px;border:1px solid rgba(90,64,32,.24);border-radius:3px;pointer-events:none;}
.card::after{content:"";position:absolute;left:50%;top:50%;width:92px;height:92px;transform:translate(-50%,-50%);border:1px solid rgba(90,64,32,.09);border-radius:50%;pointer-events:none;}
.card:hover{transform:translateY(-5px);box-shadow:0 14px 22px rgba(0,0,0,.5),inset 0 0 0 1px rgba(201,162,77,.75);}
.card.selected{transform:translateY(-11px);border-color:#8c6a2f;box-shadow:0 16px 28px rgba(0,0,0,.55),0 0 0 2px rgba(240,213,143,.65),0 0 22px rgba(201,162,77,.35);}
.card.disabled{opacity:.34;filter:grayscale(.55);pointer-events:none;}
.card.fire{background:linear-gradient(155deg,#f4e1cf,#e6c4a7 55%,#d6a37f);border-color:#5f241e;}
.card .corner{position:absolute;top:4px;left:5px;display:flex;flex-direction:column;align-items:center;line-height:1;font-family:var(--serif);}
.card .corner .suit{font-size:12px;}
.card .corner .point{font-size:10px;font-weight:700;margin-top:1px;}
.card .corner.red{color:#b83232;}
.card .corner.black{color:#262a30;}
.card .card-name{position:absolute;left:0;right:0;top:50%;transform:translateY(-55%);text-align:center;font-family:var(--serif);font-size:19px;font-weight:700;letter-spacing:0;color:#2b1e0f;text-shadow:0 1px 0 rgba(255,255,255,.3);line-height:1.1;padding:0 4px;}
.card .card-sub{position:absolute;left:0;right:0;bottom:7px;text-align:center;font-size:8px;color:#6d5636;letter-spacing:.06em;}
.card .card-kicker{position:absolute;right:4px;top:4px;font-size:7px;color:#8a6a3c;border:1px solid rgba(90,64,32,.25);padding:0 2px;border-radius:2px;}
.card.fire .card-name{color:#6f241d;}
.card.fire .card-sub{color:#8c523c;}
.card.equip-card{background:linear-gradient(155deg,#e6e2d6,#cfd0c2 58%,#b7b9aa);}
.card.equip-card .card-name{font-size:15px;color:#26302c;}
.card.equip-card .card-sub{color:#4d5c50;}
.self-target-chip{
  flex:0 0 auto;display:none;align-items:center;gap:5px;padding:8px 10px;border-radius:8px;cursor:pointer;
  background:rgba(201,162,77,.12);border:1px dashed rgba(201,162,77,.5);color:var(--gold-2);font-size:11px;white-space:nowrap;
  animation:targetPulse 1.4s infinite alternate;
}
.self-target-chip.show{display:flex;}
.self-target-chip.selected{background:rgba(192,74,74,.16);border-color:#ff7b7b;color:#ffd1d1;}
.actions{position:relative;z-index:1;display:flex;gap:7px;justify-content:center;flex-wrap:wrap;min-height:34px;padding-bottom:1px;}
.actions .btn{min-width:92px;padding:8px 16px;font-size:12.5px;}

/* 横幅 */
#turnBanner{
  position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(.82);
  padding:16px 52px;border-radius:12px;opacity:0;pointer-events:none;z-index:1200;
  background:linear-gradient(90deg,rgba(9,12,17,0),rgba(11,15,21,.94) 18%,rgba(11,15,21,.94) 82%,rgba(9,12,17,0));
  border-top:1px solid rgba(201,162,77,.5);border-bottom:1px solid rgba(201,162,77,.5);
  color:var(--gold-2);font-family:var(--serif);font-size:clamp(20px,3vw,28px);font-weight:700;letter-spacing:.16em;
  text-shadow:0 0 24px rgba(201,162,77,.35);transition:all .42s cubic-bezier(.2,.8,.2,1);white-space:nowrap;
}
#turnBanner.show{opacity:1;transform:translate(-50%,-50%) scale(1);}
#killBanner{
  position:absolute;left:50%;top:32%;transform:translate(-50%,-50%) scale(1.6);
  font-family:var(--serif);font-size:clamp(30px,5vw,46px);font-weight:700;color:#ff6b6b;letter-spacing:.16em;
  text-shadow:0 0 22px rgba(255,60,60,.75),0 0 60px rgba(255,20,20,.4);opacity:0;pointer-events:none;z-index:2500;white-space:nowrap;
  transition:all .5s cubic-bezier(.175,.885,.32,1.275);
}
#killBanner.show{opacity:1;transform:translate(-50%,-50%) scale(1);}

/* 浮动伤害 */
.float-text{
  position:fixed;z-index:2600;pointer-events:none;font-family:var(--serif);font-size:24px;font-weight:700;
  color:#ff6b6b;text-shadow:0 2px 6px rgba(0,0,0,.7),0 0 16px rgba(255,50,50,.25);
  animation:floatUp 1.05s ease-out forwards;
}
.float-text.loss{color:#c9a2e8;text-shadow:0 2px 6px rgba(0,0,0,.7),0 0 16px rgba(160,111,192,.3);}
.float-text.heal{color:#8fe0a5;text-shadow:0 2px 6px rgba(0,0,0,.7),0 0 16px rgba(93,154,107,.3);}
@keyframes floatUp{0%{opacity:0;transform:translateY(8px) scale(.7)}20%{opacity:1;transform:translateY(0) scale(1.12)}100%{opacity:0;transform:translateY(-48px) scale(1)}}
.anim-shake{animation:shake .42s ease-in-out;}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.card-fly{
  position:fixed;z-index:2800;width:64px;height:90px;border-radius:7px;pointer-events:none;
  background:linear-gradient(155deg,#f3e9d5,#d7c19b);border:2px solid #2a2016;color:#251b10;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 0 22px rgba(201,162,77,.5),0 14px 30px rgba(0,0,0,.5);
  transition:all .42s cubic-bezier(.22,.8,.25,1);opacity:.96;font-family:var(--serif);
}
.card-fly .cf-name{font-size:18px;font-weight:700;line-height:1.1;text-align:center;padding:0 4px;}
.card-fly .cf-sub{font-size:9px;color:#6d5636;margin-top:4px;}
.card-fly.back{background:linear-gradient(145deg,#26364a,#101822);border-color:#8a682e;}
.card-fly.back::after{content:"杀";font-size:26px;color:rgba(240,213,143,.65);}

/* ---------- 弹窗 ---------- */
.modal-overlay{
  position:fixed;inset:0;z-index:4000;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(4,6,9,.68);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
}
.modal-overlay.show{display:flex;animation:fadeIn .2s ease;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-box{
  position:relative;width:100%;max-width:420px;max-height:84vh;overflow-y:auto;padding:20px 20px 16px;border-radius:16px;
  background:
    radial-gradient(500px 160px at 50% -10%,rgba(201,162,77,.12),transparent 70%),
    linear-gradient(165deg,rgba(30,41,55,.99),rgba(12,17,24,.99));
  border:1px solid rgba(201,162,77,.4);box-shadow:0 30px 80px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.06);
  animation:modalIn .25s cubic-bezier(.2,.8,.2,1);scrollbar-width:thin;
}
.modal-box.wide{max-width:560px;}
@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.modal-ornament{position:absolute;left:20px;right:20px;top:8px;height:1px;background:linear-gradient(90deg,transparent,var(--line-strong),transparent);}
.modal-title{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--gold-2);letter-spacing:.08em;text-align:center;margin:2px 0 12px;line-height:1.4;}
.modal-title small{display:block;font-family:inherit;font-size:10px;color:var(--muted);font-weight:400;letter-spacing:.04em;margin-top:3px;}
.modal-body{font-size:13px;line-height:1.65;color:#c3ccd8;}
.modal-body p{margin:0 0 8px;}
.modal-body .dim{color:var(--muted);font-size:11px;}
.modal-actions{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
.modal-actions .btn{padding:10px 12px;font-size:13px;}
.modal-actions.row{flex-direction:row;flex-wrap:wrap;}
.modal-actions.row .btn{flex:1;min-width:110px;}
.modal-scroll{max-height:48vh;overflow-y:auto;padding-right:2px;scrollbar-width:thin;}
.choose-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:7px;margin-top:8px;}
.choose-card{
  padding:8px 6px;border-radius:7px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035);
  cursor:pointer;text-align:center;font-size:11px;color:#cbd4df;transition:all .15s;
}
.choose-card:hover{border-color:var(--line-strong);background:rgba(201,162,77,.08);}
.choose-card.on{border-color:var(--gold-2);background:rgba(201,162,77,.16);color:var(--gold-2);box-shadow:0 0 12px rgba(201,162,77,.13);}
.choose-card .cc-name{font-family:var(--serif);font-size:14px;color:var(--paper);}
.choose-card .cc-meta{font-size:9px;color:var(--muted);margin-top:2px;}
.preview-card{display:flex;gap:9px;align-items:center;padding:7px;border-radius:8px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.075);margin-top:4px;}
.preview-card .mini-card{flex:0 0 auto;}
.mini-card{width:40px;height:56px;border-radius:5px;background:linear-gradient(155deg,#f3e9d5,#d8c29d);border:1px solid #2a2016;color:#2a1d0f;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--serif);font-size:10px;box-shadow:0 4px 8px rgba(0,0,0,.35);}
.mini-card .mc-suit{font-size:9px;}
.mini-card .mc-name{font-size:12px;font-weight:700;margin-top:2px;}
.mini-card.fire{background:linear-gradient(155deg,#f4e1cf,#dda57f);border-color:#5f241e;}
.mini-card.equip{background:linear-gradient(155deg,#e6e2d6,#bfc2b3);}

/* ---------- 响应面板 ---------- */
.respond-panel{position:fixed;inset:0;z-index:4500;display:none;align-items:flex-end;justify-content:center;padding:20px 14px 24px;background:rgba(4,6,9,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.respond-panel.show{display:flex;animation:fadeIn .18s ease;}
.respond-sheet{
  width:100%;max-width:560px;border-radius:16px;padding:14px 16px 16px;position:relative;
  background:radial-gradient(500px 160px at 50% -20%,rgba(201,162,77,.14),transparent 70%),linear-gradient(170deg,rgba(31,42,57,.99),rgba(13,18,25,.99));
  border:1px solid rgba(201,162,77,.45);box-shadow:0 -10px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04) inset;
  animation:sheetIn .25s cubic-bezier(.2,.8,.2,1);
}
@keyframes sheetIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.respond-sheet::before{content:"";position:absolute;left:18px;right:18px;top:7px;height:1px;background:linear-gradient(90deg,transparent,var(--line-strong),transparent);}
.respond-head{font-size:10px;letter-spacing:.16em;color:var(--muted);text-align:center;margin-bottom:7px;}
.respond-info{text-align:center;font-size:15px;font-weight:600;color:var(--gold-2);margin-bottom:11px;line-height:1.45;}
.respond-info small{display:block;font-size:10px;font-weight:400;color:var(--muted);margin-top:3px;letter-spacing:.03em;}
.respond-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;max-height:42vh;overflow-y:auto;padding:2px;scrollbar-width:thin;}
.respond-btn{flex:1 1 120px;min-width:100px;max-width:190px;padding:11px 10px;font-size:12px;border-radius:8px;}
.respond-btn .rb-sub{display:block;font-size:9px;font-weight:400;color:rgba(255,255,255,.5);margin-top:2px;}

/* ---------- 结算 ---------- */
.game-over-overlay{
  position:fixed;inset:0;z-index:5000;display:none;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(circle at 50% 40%,rgba(20,26,34,.72),rgba(3,4,7,.9));backdrop-filter:blur(6px);
}
.game-over-overlay.show{display:flex;animation:fadeIn .4s ease;}
.result-box{
  width:100%;max-width:430px;padding:28px 24px 22px;border-radius:20px;text-align:center;position:relative;overflow:hidden;
  background:radial-gradient(500px 200px at 50% 0%,rgba(201,162,77,.16),transparent 70%),linear-gradient(170deg,rgba(31,42,57,.99),rgba(10,14,20,.99));
  border:1px solid rgba(201,162,77,.45);box-shadow:0 40px 100px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);
  animation:resultIn .55s cubic-bezier(.18,.9,.25,1.1);
}
@keyframes resultIn{from{opacity:0;transform:scale(.88) translateY(16px)}to{opacity:1;transform:none}}
.result-box::before{content:"";position:absolute;inset:8px;border:1px solid rgba(201,162,77,.13);border-radius:14px;pointer-events:none;}
.result-seal{
  width:86px;height:86px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--serif);font-size:44px;font-weight:700;color:var(--gold-2);
  background:radial-gradient(circle at 40% 35%,rgba(201,162,77,.25),rgba(201,162,77,.03) 65%);
  border:1px solid var(--line-strong);box-shadow:0 0 0 8px rgba(201,162,77,.045),0 0 36px rgba(201,162,77,.2);
}
.result-box.lose .result-seal{color:#e88a8a;border-color:rgba(192,74,74,.55);background:radial-gradient(circle at 40% 35%,rgba(192,74,74,.24),rgba(192,74,74,.03) 65%);box-shadow:0 0 0 8px rgba(192,74,74,.04),0 0 36px rgba(192,74,74,.18);}
.result-box.draw .result-seal{color:#aeb9c8;border-color:rgba(255,255,255,.28);background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.13),transparent 65%);box-shadow:0 0 0 8px rgba(255,255,255,.03);}
.result-title{font-family:var(--serif);font-size:28px;font-weight:700;letter-spacing:.14em;color:var(--gold-2);margin-bottom:6px;}
.result-box.lose .result-title{color:#e0a0a0;}
.result-sub{font-size:12px;color:var(--muted);line-height:1.6;letter-spacing:.03em;}
.result-detail{font-size:11px;color:var(--muted-2);line-height:1.7;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07);}
.result-actions{display:flex;gap:9px;margin-top:20px;flex-wrap:wrap;justify-content:center;}
.result-actions .btn{flex:1;min-width:120px;}

/* ---------- toast ---------- */
.toast-stack{position:fixed;left:50%;top:54px;transform:translateX(-50%);z-index:6000;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;}
.toast{
  padding:8px 16px;border-radius:20px;font-size:12px;color:var(--paper);
  background:rgba(15,21,29,.94);border:1px solid rgba(201,162,77,.35);box-shadow:0 10px 26px rgba(0,0,0,.4);
  animation:toastIn .25s ease both;white-space:nowrap;
}
.toast.warn{border-color:rgba(192,74,74,.5);color:#f0b0b0;}
@keyframes toastIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- 响应式 ---------- */
@media (max-width:760px){
  #screen-game{padding:6px 6px 7px;}
  .brand-mini{font-size:14px;}
  .mode-badge{display:none;}
  .game-topbar{flex-basis:34px;min-width:0;}
  .topbar-left{min-width:0;}
  .brand-mini{font-size:13px;}
  .turn-indicator{font-size:10px;min-width:0;overflow:hidden;}
  .icon-btn{padding:5px 8px;font-size:10px;}
  .opponents{max-width:100%;}
  .opponent-card{flex:1 1 88px;min-width:82px;padding:6px;}
  .player-main{flex-wrap:wrap;gap:8px;}
  .player-details{min-width:0;flex:1 1 0;}
  .player-head{min-width:0;}
  .player-name{min-width:0;flex:1 1 auto;}
  .player-equip{flex:1 1 100%;justify-content:flex-end;margin-top:2px;}
  .player-equip .equip-slot{width:34px;height:46px;}
  .hand-wrap{align-items:flex-end;}
  .hand-container{align-items:flex-end;}
  .opp-portrait{width:28px;height:28px;font-size:13px;}
  .opp-name{font-size:11px;}
  .opp-hero{font-size:8px;}
  .opp-skills{display:none;}
  .opp-equip-row{display:none;}
  .center-area{min-height:62px;max-height:74px;padding:5px 7px;}
  .pile{flex-basis:56px;}
  .pile-stack{width:30px;height:44px;}
  .pile-label{font-size:8px;}
  .log-line{font-size:9.5px;}
  .player-area{padding:8px 8px 6px;gap:4px;}
  .player-portrait{width:48px;height:48px;font-size:22px;}
  .player-name{font-size:15px;}
  .player-equip{gap:3px;}
  .equip-slot{width:38px;height:50px;font-size:7px;}
  .equip-slot .eq-icon{font-size:11px;}
  .hand-container{min-height:84px;gap:6px;padding-top:7px;}
  .card{width:54px;height:78px;}
  .card .card-name{font-size:16px;}
  .card .card-sub{font-size:7px;bottom:5px;}
  .card .corner .suit{font-size:10px;}
  .card .corner .point{font-size:8px;}
  .actions .btn{min-width:78px;padding:7px 10px;font-size:11.5px;}
  .skill-chip{font-size:8.5px;}
  .self-target-chip{font-size:10px;padding:6px 8px;}
  .modal-box{padding:16px 15px 13px;}
  .respond-panel{padding:0;}
  .respond-sheet{border-radius:16px 16px 0 0;max-width:none;padding:14px 12px 18px;}
  .respond-btn{flex:1 1 42%;}
  .result-box{padding:22px 18px 18px;}
}
@media (max-width:430px){
  #screen-game{padding:4px 4px 6px;}
  .brand-mini{font-size:12px;}
  .brand-mini em{display:none;}
  .turn-indicator{font-size:9px;letter-spacing:0;}
  .icon-btn{padding:4px 6px;font-size:9px;}
  .opponents{gap:4px;}
  .opponent-card{flex:1 1 0;min-width:0;padding:5px;}
  .opp-portrait{width:24px;height:24px;font-size:12px;}
  .opp-name{font-size:10px;}
  .opp-hero{font-size:7px;}
  .opp-identity{font-size:7px;padding:0 3px;}
  .opp-hand-count{font-size:7px;}
  .opp-hp-pips{display:none;}
  .opp-hp-text{font-size:8px;}
  .player-portrait{width:42px;height:42px;font-size:20px;}
  .player-name{font-size:13px;}
  .player-head{gap:5px;}
  .hp-num{font-size:10px;}
  .equip-slot,.player-equip .equip-slot{width:30px;height:42px;font-size:6px;}
  .equip-slot .eq-icon{font-size:10px;}
  .hand-container{gap:5px;min-height:78px;}
  .card{width:50px;height:72px;}
  .card .card-name{font-size:15px;}
  .actions .btn{min-width:70px;font-size:11px;padding:7px 8px;}
  .action-hint-bar{font-size:11px;padding:4px 6px;}
  .center-area{min-height:58px;max-height:66px;}
  .log-line{font-size:9px;}
}
@media (max-height:660px){
  .opp-skills,.opp-equip-row{display:none;}
  .center-area{min-height:58px;max-height:64px;}
  .player-portrait{width:46px;height:46px;font-size:21px;}
  .player-equip .equip-slot{height:46px;}
  .hand-container{min-height:76px;}
  .card{width:50px;height:72px;}
  .card .card-name{font-size:15px;}
}