/* ============ 群雄逐鹿 · 国风水墨 + 暗金 + 像素风 ============ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { width:100%; height:100%; overflow:hidden; background:#12100d; font-family:"KaiTi","STKaiti","SimSun","Kaiti SC",serif; user-select:none; }
.hidden { display:none !important; }
.bg-canvas { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; }

/* ============ 大厅 ============ */
#lobby { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; }
#lobbyBg { z-index:0; }
.lobby-mid { position:relative; z-index:2; text-align:center; padding:20px; }
.title { font-size:9vw; letter-spacing:0.2em; color:#f0d9a8; text-shadow:0 4px 0 #3a2a12, 0 0 20px rgba(240,217,168,.4); font-weight:700; white-space:nowrap; }
.subtitle { font-size:3.6vw; color:#f5ddb8; letter-spacing:.5em; margin:10px 0 26px;
  text-shadow:2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000, 0 2px 10px rgba(0,0,0,.9); }
.big-btn {
  display:inline-block; padding:14px 44px; font-size:4.6vw; letter-spacing:.35em; font-family:inherit;
  color:#2a1a08; background:linear-gradient(180deg,#f0d9a8,#c9a86a 60%,#9c7a3e);
  border:3px solid #6b4f1f; border-radius:10px; cursor:pointer; box-shadow:0 5px 0 #4a3615, 0 8px 20px rgba(0,0,0,.6);
}
.big-btn:active { transform:translateY(3px); box-shadow:0 2px 0 #4a3615; }
.tip { margin-top:16px; font-size:3.1vw; color:#f2e6c8;
  text-shadow:1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000, 0 1px 8px rgba(0,0,0,.95); }

/* 大厅底部二维码 */
#lobbyFooter { position:absolute; left:0; right:0; bottom:14px; z-index:2; display:flex; gap:28px; justify-content:center; align-items:flex-start; }
#lobbyFooter .qr-item { display:flex; flex-direction:column; align-items:center; gap:6px; }
#lobbyFooter .qr-box { width:94px; height:94px; background:#fff; border-radius:10px; padding:5px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.55); }
#lobbyFooter .qr-box img, #lobbyFooter .qr-box canvas { width:100% !important; height:100% !important; display:block; border-radius:6px; }
#lobbyFooter .qr-label { font-size:13px; font-weight:700; color:#f0d9a8; letter-spacing:.1em;
  text-shadow:0 1px 2px #000, -1px 0 1px #000, 1px 0 1px #000, 0 0 6px rgba(0,0,0,.95); }
#lobbyFooter .qr-sub { font-size:11px; color:#e8d9b8;
  text-shadow:0 1px 2px #000, -1px 0 1px #000, 1px 0 1px #000, 0 0 5px rgba(0,0,0,.95); }

/* ============ 牌桌 ============ */
#table { position:fixed; inset:0; }
#tableBg { z-index:0; opacity:.9; }

/* 座位卡通用（方形武将卡：立绘铺满 + 底部悬浮信息） */
.seat-card { position:relative; background:rgba(18,14,8,.85); border:3px solid #c9a86a; border-radius:10px;
  box-shadow:0 3px 10px rgba(0,0,0,.6); overflow:hidden; }
.seat-card .portrait { position:absolute; inset:0; width:100%; height:100%; border:none; image-rendering:pixelated; background:#1a150e; }
.seat-card .cap { position:absolute; left:0; right:0; bottom:0; padding:3px 5px 8px; text-align:center;
  background:linear-gradient(180deg,transparent,rgba(10,8,5,.55) 30%,rgba(10,8,5,.9)); }
.seat-card .cap .equips { display:flex; gap:3px; justify-content:center; margin-bottom:2px; }
.seat-card .cap .equips canvas { width:20px; height:20px; border-radius:4px; border:1px solid #6b4f1f; image-rendering:pixelated; background:rgba(36,26,14,.9); }
.seat-card .cap .nm { font-size:13px; color:#f0d9a8; font-weight:700; text-shadow:0 1px 2px #000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.seat-card .cap .id { font-size:11px; margin:1px 0 3px; text-shadow:0 1px 2px #000; }
.seat-card .cap .hprow { display:flex; align-items:center; gap:4px; }
.seat-card .cap .hpnum { font-size:11px; color:#ffd9b0; font-weight:700; text-shadow:0 1px 2px #000, 0 0 4px rgba(0,0,0,.8); min-width:24px; text-align:right; }
.seat-card .cap .hpbar { flex:1; height:7px; background:rgba(58,42,18,.9); border-radius:4px; overflow:hidden; }
.seat-card .cap .hpbar i { display:block; height:100%; background:linear-gradient(90deg,#c0392b,#e74c3c); transition:width .3s; }
.seat-card .badge { position:absolute; right:5px; top:5px; min-width:20px; height:20px; line-height:20px; text-align:center;
  background:#8c2f1d; color:#ffd; font-size:11px; border-radius:50%; border:1px solid #c0392b; font-weight:700; z-index:2; }
.seat-card .turn { position:absolute; left:5px; top:5px; width:11px; height:11px; background:#ffd700; border-radius:50%; box-shadow:0 0 8px 2px #ffd700; animation:turnBlink .55s ease-in-out infinite; z-index:2; }
@keyframes turnBlink { 0%,100% { opacity:1; box-shadow:0 0 10px 3px #ffd700; } 50% { opacity:.15; box-shadow:0 0 2px #ffd700; } }
.seat-card.me { border-width:3px; border-color:#e8c06a; }
/* 主公：亮金边 + 顶部金字印章 */
.seat-card.lord { border-color:#ffd700; box-shadow:0 0 14px rgba(255,215,0,.55); }
.seat-card.lord::after { content:"主 公"; position:absolute; top:6px; left:50%; transform:translateX(-50%);
  background:linear-gradient(180deg,#f0d9a8,#9c7a3e); color:#2a1a08; font-size:11px; font-weight:700;
  padding:2px 10px; border-radius:4px; border:1px solid #6b4f1f; letter-spacing:.1em; z-index:2; box-shadow:0 2px 5px rgba(0,0,0,.5); }
.seat-card.dead { filter:grayscale(1) brightness(.6); }
.seat-card.dead::before { content:"亡"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:30px; color:#c0392b; font-weight:700; text-shadow:0 2px 4px #000; z-index:3; }

/* ============ 竖屏布局（默认） ============ */
#table { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr 1fr auto;
  grid-template-areas:"l r" "l r" "l r" "m m"; gap:8px; padding:36px 8px 4px; }
#leftCol  { grid-area:l; display:flex; flex-direction:column; gap:8px; z-index:2; }
#rightCol { grid-area:r; display:flex; flex-direction:column; gap:8px; z-index:2; }
#topRow, #botRow { display:none; }
#leftCol .seat-card { flex:1; }
#rightCol .seat-card { flex:1; }

/* 自己区域：左=战斗记录（可滚动），右=装备+手牌+按钮 */
#myArea { grid-area:m; position:relative; z-index:3; background:rgba(18,14,8,.85); border:2px solid #c9a86a;
  border-radius:12px; padding:8px; display:flex; gap:8px; overflow:hidden; }
#battleLog { flex:1 1 33%; min-width:0; display:flex; flex-direction:column; border-right:1px solid rgba(201,168,106,.4); margin:2px 0; }
#logHead { font-size:12px; color:#e8c06a; text-align:center; letter-spacing:.2em; padding:3px 0 5px; border-bottom:1px solid rgba(201,168,106,.4); text-shadow:0 1px 2px #000; }
#logBody { flex:1; overflow-y:auto; padding:4px 6px; font-size:12px; color:#d8c9a8; line-height:1.5; text-shadow:0 1px 2px #000; }
#logBody div { padding:2px 0; border-bottom:1px dashed rgba(201,168,106,.14); }
#myRight { flex:2 2 67%; min-width:0; display:flex; flex-direction:column; gap:6px; }
#myEquip { display:flex; gap:16px; justify-content:center; align-items:flex-start; min-height:81px; }
#myEquip .eslot { display:flex; flex-direction:column; align-items:center; gap:5px; }
#myEquip .eslot canvas { width:56px; height:56px; border:2px solid #6b4f1f; border-radius:9px; background:#241a0e; image-rendering:pixelated; }
#myEquip .eslot .eslot-tag { font-size:12px; color:#e8c06a; text-shadow:0 1px 2px #000; }
#myEquip .eslot .eslot-empty { width:56px; height:56px; border:2px dashed #6b4f1f; border-radius:9px; background:rgba(36,26,14,.5);
  color:#b09a6a; font-size:16px; display:flex; align-items:center; justify-content:center; }
#myHand { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; align-content:flex-start; padding:2px 0 4px; min-height:84px;
  max-width:256px; margin:0 auto; }
.hand-empty { width:100%; align-self:center; text-align:center; font-size:14px; letter-spacing:.3em; color:#8a7a5a; text-shadow:0 1px 2px #000; }
.hcard { position:relative; width:80px; height:80px; flex:0 0 auto; cursor:pointer; transition:transform .12s; }
.hcard canvas { width:100%; height:100%; image-rendering:pixelated; border-radius:6px; border:2px solid #c9a86a; }
.hcard.selected { transform:translateY(-12px); border:2px solid #ffd700; }
.hcard.selected canvas { border-color:#ffd700; }

/* 顶部信息条（单行） */
#topBar { position:fixed; top:0; left:0; right:0; z-index:10; display:flex; align-items:center; gap:10px;
  padding:5px 10px; background:rgba(18,14,8,.9); border-bottom:1px solid #c9a86a; font-size:14px; color:#f5ddb8; text-shadow:0 1px 2px #000; }
#topBar span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#btnExit { background:#3a2a12; color:#c9a86a; border:1px solid #c9a86a; border-radius:6px; padding:2px 10px; font-family:inherit; font-size:13px; cursor:pointer; }

/* 弹层 */
#overlay { position:fixed; inset:0; z-index:20; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; }
#overlayBox { background:linear-gradient(180deg,#2a1f12,#1a130a); border:3px solid #c9a86a; border-radius:14px; padding:18px 22px;
  min-width:260px; max-width:92%; text-align:center; color:#f0d9a8; box-shadow:0 10px 30px rgba(0,0,0,.8); }
#overlayBox h3 { font-size:20px; letter-spacing:.15em; margin-bottom:8px; color:#ffd; }
#overlayBox .ov-txt { font-size:14px; margin-bottom:14px; color:#e8d9b0; line-height:1.6; }
#overlayBox .ov-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.ov-btn { padding:10px 26px; font-size:16px; letter-spacing:.2em; font-family:inherit; cursor:pointer;
  color:#2a1a08; background:linear-gradient(180deg,#f0d9a8,#c9a86a 60%,#9c7a3e); border:2px solid #6b4f1f; border-radius:8px; }
.ov-btn.alt { background:linear-gradient(180deg,#5a4a32,#3a2a12); color:#f0d9a8; border-color:#6b4f1f; }
.ov-btn:active { transform:translateY(2px); }

/* 目标选择提示 */
.seat-card.targetable { border-color:#ffd700; box-shadow:0 0 12px rgba(255,215,0,.7); cursor:pointer; }
.seat-card.targetable:active { transform:scale(.97); }
.hcard.tappable { border:2px solid rgba(255,215,0,.4); }
.hcard.disabled { opacity:.55; cursor:default; }

/* ============ 横屏 ============ */
@media (orientation: landscape) {
  #table { grid-template-columns:1fr; grid-template-rows:1fr 1fr auto; grid-template-areas:"t" "b" "m"; gap:8px; padding:38px 10px 6px; }
  #topRow { grid-area:t; display:flex; gap:12px; justify-content:center; z-index:2; }
  #botRow { grid-area:b; display:flex; gap:12px; justify-content:center; z-index:2; }
  #leftCol, #rightCol { display:none; }
  #topRow .seat-card, #botRow .seat-card { width:206px; aspect-ratio:1; }
  #myArea { padding:6px 10px; }
  #myHand { min-height:70px; }
}

/* 小屏手机优化 */
@media (max-width: 420px) {
  .seat-card .cap .nm { font-size:12px; }
  #myHand { min-height:68px; }
  .title { font-size:11vw; }
}