/* ============================================================================
   OPCG 牌桌 · 官方卡垫布局（R580）
   按官方线下卡垫（COST AREA / CHARACTER AREA / LIFE / LEADER+STAGE / DECK / TRASH）
   重排每个半场；玩家习惯「手牌放在费用区上方」。
   只在 #table 内生效，其余页面不受影响。
   ========================================================================== */

/* ---- 每个半场变成网格：左列生活区+咚卡组，中间角色/手牌/费用，右列领袖/卡组/墓地 ---- */
#table .board > .half { flex: 1 1 0; min-height: 0; }

#table .half {
  display: grid;
  gap: 6px 10px;
  padding: 6px 12px 8px;
  align-content: stretch;
  /* app.js 和 style.css 都用 var(--cw)/var(--ch) 给场地卡定量，这里统一成卡垫上的比例 */
  --cw: 112px;
  --ch: 157px;
}

/* 原来的弹性容器全部拆成网格项（!important 压过 style.css 里的同心选择器） */
#table .half .matRow,
#table .half .field,
#table .half .matRow > .col,
#table .half .topRow,
#table .half.opp .topRow,
#table .half .oppRight {
  display: contents !important;
}

/* 老的绝对定位（对手领袖/场地贴在格子上方、场地格浮在领袖右侧）在网格里一律归位 */
#table .half .leadrow { position: static !important; }
#table .half .charrow { position: relative !important; }
#table .leadrow .stageSlot {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
}

/* 卡垫上印的区名，做成很淡的水印，让空场也能看懂这块是干什么的 */
#table .half .charrow::before {
  content: 'CHARACTER AREA';
  position: absolute;
  left: 8px;
  top: auto;
  bottom: 4px;
  font-size: 9px;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .14);
  pointer-events: none;
}
#table .half.opp #oppDonZone::before { right: auto; left: 8px; }
#table .half .donzone::before {
  content: 'DON!! / COST';
  position: absolute;
  right: 8px;
  top: 3px;
  font-size: 9px;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .14);
  pointer-events: none;
}
/* 对手的角色带翻转 180°，区名跟着贴到他们的下缘（我们看是靠近中线那一侧） */
#table .half.opp .charrow::before { top: 4px; bottom: auto; left: auto; right: 8px; }

/* ---------- 我方：从下往上 费用区 → 手牌 → 角色区 ---------- */
#table .half.me {
  grid-template-columns: 104px minmax(0, 1fr) 240px 72px;
  grid-template-rows: minmax(0, 1fr) auto 64px;
  grid-template-areas:
    "life  chars lead  deck"
    "life  hand  lead  deck"
    "dondeck cost cost trash";
}
#table .half.me #myLifeRow    { grid-area: life; }
#table .half.me #myCharRow    { grid-area: chars; }
#table .half.me #myHand       { grid-area: hand; }
#table .half.me #myLeadRow    { grid-area: lead; align-self: end; }
#table .half.me #myDeckPile   { grid-area: deck; }
#table .half.me #myDonDeckPile{ grid-area: dondeck; }
#table .half.me #myDonZone    { grid-area: cost; }
#table .half.me #myTrashPile  { grid-area: trash; }

/* ---------- 对手：180° 旋转对称（咚!!卡组在他们左手＝屏幕右，卡组/墓地在他们右手＝屏幕左） ---------- */
#table .half.opp {
  grid-template-columns: 72px 240px minmax(0, 1fr) 104px;
  grid-template-rows: 64px auto minmax(0, 1fr);
  grid-template-areas:
    "trash cost  cost  dondeck"
    "deck  lead  hand  life"
    "deck  lead  chars life";
}
#table .half.opp #oppLifeRow    { grid-area: life; align-self: end; }
#table .half.opp #oppCharRow    { grid-area: chars; }
#table .half.opp #oppLeadRow    { grid-area: lead; align-self: start; }
#table .half.opp #oppDeckPile   { grid-area: deck; }
#table .half.opp #oppDonDeckPile{ grid-area: dondeck; }
#table .half.opp #oppDonZone    { grid-area: cost; }
#table .half.opp #oppTrashPile  { grid-area: trash; }
#table .half.opp #oppHandBacks  { grid-area: hand; justify-self: center; }

/* ---- 角色区：一条横带，5 个槽位铺开 ---- */
#table .half .charrow {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(8px, 1.4vw, 20px);
  min-width: 0;
  min-height: 157px;
  overflow: visible;
}
#table .half.me .charrow { align-items: flex-start; }
#table .half.opp .charrow { align-items: flex-end; }

/* 角色卡：跟 --cw/--ch 走（style.css 里那几条 !important 就是量这个变量） */
#table .half .charrow .card { width: var(--cw); }
#table .half .charrow .card > img { width: var(--cw); height: var(--ch); }
#table .half .charrow .slot {
  flex: 0 1 var(--cw); width: var(--cw); height: var(--ch);
  border: 1px dashed rgba(255, 255, 255, .14); border-radius: 8px;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 6px; color: rgba(255, 255, 255, .18); font-size: 12px;
}
#table .half .charrow .card .nm { max-width: var(--cw); font-size: 11px; }

/* ---- 领袖 + 舞台：卡垫右侧那一排 ---- */
#table .half .leadrow {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
}
#table .half.opp .leadrow { align-items: flex-start; }
#table .half.opp .leadrow { flex-direction: row-reverse; }
#table .half .leadrow .card { width: var(--cw); }
#table .half .leadrow .card > img { width: var(--cw); height: var(--ch); }
#table .half .leadrow .slot {
  flex: 0 0 var(--cw); width: var(--cw); height: var(--ch);
  border: 1px dashed rgba(255, 255, 255, .14); border-radius: 8px;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 6px; color: rgba(255, 255, 255, .2); font-size: 12px;
}

/* ---- 生命区：左列竖排（对手在右列） ---- */
#table .half .lifeRow {
  position: static;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  padding: 6px 0 0;
  min-height: 0;
  overflow: visible;
}
#table .half .lifeRow .minicard {
  width: 46px; height: 64px;
  margin-left: 0;
  margin-top: calc(-40px * var(--k, 1));
}
#table .half .lifeRow .minicard:first-child { margin-top: 0; }

/* ---- 卡组 / 咚卡组 / 墓地 ---- */
#table .half .pile.deck,
#table .half .pile.don,
#table .half .pile.trash {
  align-self: center;
  justify-self: center;
}
#table .half .pile.deck img,
#table .half .pile.don img,
#table .half .pile.trash img { width: 44px; height: 62px; }
/* 网格里位置本身说明是什么堆，文字标签会撑高行高，直接藏掉（数量仍由黄色角标显示） */
#table .half .pile.deck small,
#table .half .pile.don small,
#table .half .pile.trash small { display: none; }

/* ---- 手牌：费用区上方，居中扇开 ---- */
#table .half .hand {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  min-height: 0;
  padding: 0;
  overflow: visible;
}
#table .half.me .hand .card { width: 96px; margin-left: -44px; }
#table .half.me .hand .card:first-child { margin-left: 0; }
#table .half.me .hand .card img { width: 96px; height: 134px; }
#table .half.me .hand .card .nm { max-width: 96px; font-size: 10px; display: block; }
/* 手牌一多，卡名会互相压住；10 张以上直接收掉卡名（点开仍有详情） */
#table .half.me .hand:has(.card:nth-child(10)) .card .nm { display: none; }

/* 网格项默认 min-width:auto 会被内容撑破，手牌会挤到领袖列上 */
#table .half .hand,
#table .half .charrow,
#table .half .leadrow { min-width: 0; }
#table .half .hand { max-width: 100%; }

/* ---- 费用区：底部一条横带，咚!! 平铺在里面 ---- */
#table .half .donzone,
#table .half.me .donzone {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  height: 64px !important;
  min-height: 0 !important;
  padding: 4px 8px;
  border: 1px dashed rgba(255, 255, 255, .07);
  border-radius: 10px;
  background: rgba(255, 255, 255, .015);
  overflow: hidden !important;
}
#table .half.opp #oppDonZone {
  height: 64px !important;
  min-height: 64px !important;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  padding: 4px 8px;
  overflow: hidden !important;
}
#table .half .donzone .donpile { width: 44px; }
#table .half .donzone .donimg { width: 42px; height: 58px; }
#table .half .donzone .donpile small { display: none; }

/* 费用区里的咚!!卡：缩小、叠放，和卡垫上一样排成一条 */
#table .half .donzone .doncard,
#table .half.me .donzone .doncard,
#table .half.opp #oppDonZone .doncard {
  width: 44px !important;
  height: 61px !important;
  flex: 0 0 44px !important;
  margin-left: -14px !important;
}
#table .half .donzone .doncard:first-child,
#table .half.opp #oppDonZone .doncard:first-child { margin-left: 0 !important; }
#table .half .donzone .doncard img,
#table .half.opp #oppDonZone .doncard img {
  width: 44px !important;
  height: 61px !important;
}

/* ---- 对手手牌背：放在他们的费用区下一行（我们看是上方中线） ---- */
#table .half .handBacks {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  padding: 0;
}
#table .half .handBacks .miniback { width: 34px; height: 48px; margin-left: -24px; }
#table .half .handBacks .miniback:first-child { margin-left: 0; }

/* ---- 窄屏：竖屏时四条横排（角色带铺满宽度），不再用左右列 ---- */
@media (max-width: 900px) {
  #table .half {
    --cw: 62px;
    --ch: 87px;
    gap: 4px;
    padding: 4px 6px 6px;
  }

  /* 我方：角色带（贴中线）→ 支持行 → 留白 → 手牌 → 费用区（最贴玩家）；多余高度放在中间留白行 */
  #table .half.me {
    grid-template-columns: 42px repeat(5, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr) auto auto 46px;
    grid-template-areas:
      "life chars chars chars chars chars"
      "life dondeck lead lead deck trash"
      "life hand  hand  hand  hand  hand"
      "life cost  cost  cost  cost  cost";
  }
  /* 对手：180° 旋转对称（费用区贴最上缘，手牌在其下，留白行与支持行、角色带依次贴中线） */
  #table .half.opp {
    grid-template-columns: repeat(5, minmax(0, 1fr)) 42px;
    grid-template-rows: 46px auto auto minmax(0, 1fr);
    grid-template-areas:
      "cost  cost  cost  cost  cost  life"
      "hand  hand  hand  hand  hand  life"
      "trash deck  lead  lead  dondeck life"
      "chars chars chars chars chars life";
  }
  #table .half.opp #oppHandBacks { grid-area: hand; justify-self: center; align-self: center; padding: 0; }
  #table .half .handBacks .miniback { width: 58px; height: 81px; margin-left: -44px; }

  #table .half .charrow { gap: 4px; min-height: var(--ch); }
  #table .half.opp .charrow { align-items: flex-end; }
  #table .half .leadrow { justify-content: flex-start; gap: 4px; }
  #table .half .leadrow .slot,
  #table .half .charrow .slot { font-size: 10px; padding-top: 4px; }

  #table .half.me .hand { justify-content: flex-start; padding-left: 2px; }
  #table .half.me .hand .card { width: 62px; margin-left: -34px; }
  #table .half.me .hand .card:first-child { margin-left: 0; }
  #table .half.me .hand .card img { width: 62px; height: 87px; }
  #table .half.me .hand .card .nm { display: none; }

  #table .half .lifeRow { padding-top: 2px; }
  #table .half .lifeRow .minicard { width: 30px; height: 42px; margin-top: -26px; }

  #table .half .pile.deck img,
  #table .half .pile.don img,
  #table .half .pile.trash img { width: 38px; height: 53px; }

  #table .half .donzone,
  #table .half.me .donzone,
  #table .half.opp #oppDonZone {
    height: 46px !important;
    min-height: 46px !important;
    padding: 3px 6px;
    gap: 4px;
  }
  #table .half.opp #oppDonZone::before { right: auto; left: 8px; }
#table .half .donzone::before { font-size: 7px; top: 1px; }
  #table .half .charrow::before { font-size: 7px; }

  #table .half .donzone .doncard,
  #table .half.me .donzone .doncard,
  #table .half.opp #oppDonZone .doncard {
    width: 30px !important;
    height: 42px !important;
    flex: 0 0 30px !important;
    margin-left: -10px !important;
  }
  #table .half .donzone .doncard:first-child,
  #table .half.opp #oppDonZone .doncard:first-child { margin-left: 0 !important; }
  #table .half .donzone .doncard img,
  #table .half.opp #oppDonZone .doncard img { width: 30px !important; height: 42px !important; }

  /* 手机上那三条长提示会把中间挤成 140px，直接收掉，只留按钮 */
  #actions .tag { display: none; }
  #actions { padding: 6px 8px; gap: 6px; flex-wrap: nowrap; overflow-x: auto; }
}


/* ── 对称收口：对手角色带与生命列按镜像轴精确对位（axis = 半场中线） ── */
#table .half.opp .charrow { margin-left: 0 !important; width: 100% !important; }
#table .half.opp .charrow { margin-bottom: -6px; }
#table .half.opp #oppLifeRow { margin-bottom: 12px; }
/* ─────────────────────────────────────────────────────────────
   R581 卡上状态：力量角标（卡片左侧）+ 状态文字条（卡名上方）
   原来 .pw 同时写了 left/right 被拉成整条黑杠，盖掉卡面顶部；
   现在只在数值被改过时出现。角标不压攻击力数字；
   卡面单独包一层 .art，横置时角标跟着卡一起转。
   ───────────────────────────────────────────────────────────── */
#table .card .art {
  position: relative;
  width: 100%;
  aspect-ratio: 112 / 157;
  transform-origin: 50% 50%;
}
#table .card .art > img { width: 100% !important; height: 100% !important; display: block; }
#table .card.rested .art { transform: rotate(90deg) scale(.78); }
#table .card.rested .art > img { transform: none !important; }
#table .card .pw {
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(21px * var(--k)) !important;
  transform: translateX(-50%);
  display: flex;
  align-items: baseline;
  gap: calc(2px * var(--k));
  padding: 0 calc(4px * var(--k)) !important;
  border-radius: calc(6px * var(--k));
  background: rgba(8, 11, 17, .9);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .55);
  font-size: calc(11px * var(--k));
  font-weight: 800;
  line-height: 1.6;
  color: #fff;
  z-index: 7;
  white-space: nowrap;
}
#table .card .pw.up { border-color: #34d399; color: #b7f7d8; }
#table .card .pw.down { border-color: #60a5fa; color: #cfe3ff; }
#table .card .pw .pwd { font-size: calc(8px * var(--k)); font-weight: 800; letter-spacing: .01em; }
#table .card .pw.up .pwd { color: #34d399; }
#table .card .pw.down .pwd { color: #60a5fa; }

#table .card .strow {
  position: absolute;
  left: calc(2px * var(--k));
  right: calc(2px * var(--k));
  bottom: calc(24px * var(--k));
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  gap: calc(1px * var(--k));
  justify-content: center;
  max-height: calc(30px * var(--k));
  overflow: hidden;
  pointer-events: none;
}
#table .card .stchip {
  font-size: calc(8.5px * var(--k));
  line-height: 1.45;
  font-weight: 700;
  padding: 0 calc(3px * var(--k));
  border-radius: calc(3px * var(--k));
  background: rgba(8, 11, 17, .84);
  color: #cbd5e1;
  white-space: nowrap;
}
#table .card .stchip.good { color: #6ee7b7; }
#table .card .stchip.bad { color: #fca5a5; }
#table .card .stchip.warn { color: #fcd34d; }
#table .card .stchip.kw-blocker { color: #7cb8ff; }
#table .card .stchip.kw-unblock { color: #c084fc; }
#table .card .stchip.kw-rush { color: #ff9f40; }
#table .card .stchip.kw-double { color: #ff6fb5; }
#table .card .stchip.kw-active { color: #34d399; }
#table .card .stchip.kw-noattack { color: #ff6b6b; }
#table .card .stchip.kw-nolead { color: #ffb84d; }



/* 卡名居中：领袖/角色/手牌统一 */

/* 卡名要挂到卡框外面（居中），卡本身不能再裁切 */
#table .card { overflow: visible !important; }

/* 卡名放到卡框外面（不压印的卡名条），卡高按内容走 */
#table .half .charrow .card, #table .half .leadrow .card { height: auto !important; }
#table .card .nm {
  position: absolute !important;
  left: 0; right: 0; bottom: 0; top: auto;
  margin: 0 !important;
  height: calc(15px * var(--k));
  line-height: calc(15px * var(--k));
  padding: 0 calc(2px * var(--k));
  font-size: calc(9.5px * var(--k));
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(to top, rgba(6,8,12,.88), rgba(6,8,12,.52));
  color: #dbe3ee;
  border-radius: 0 0 calc(6px * var(--k)) calc(6px * var(--k));
  z-index: 5;
}

/* 有力量角标时，状态文字整条上移，保证「名条 / 角标 / 状态」三层不压在一起 */
#table .card:has(.pw) .strow { bottom: calc(46px * var(--k)); }
/* 手机上卡只有 62px 宽，状态文字会缩成 5px：直接不画，改在长按/双击放大里看「状态」一行 */
@media (max-width: 900px) {
  #table .card .nm { display: none; }
  #table .card .strow { display: none; }
  #table .card .pw { font-size: calc(9px * var(--k)); padding: 0 calc(3px * var(--k)) !important; }
}

/* ── R584 视觉收干净 ────────────────────────────────────────────
   1) 中间动作带：只留当前这一条提示，其余两条常驻会把整条带塞满
   2) 空场占位：空角色槽/空场地槽退成很淡的参考框，不再像 5 个空卡片
   3) 左栏：手牌/生命/卡组/咚 四个 pill 与卡垫上的堆叠+黄角标重复，去掉
   ───────────────────────────────────────────────────────────── */
#table .mid .actions .tag { display: none; }
#table .mid .actions .tag:first-of-type { display: inline-flex; }

#table .half .charrow .slot {
  border-color: rgba(255, 255, 255, .06);
  background: rgba(255, 255, 255, .012);
  color: rgba(255, 255, 255, .10);
}
#table .half .charrow .slot.filled { border-color: transparent; background: none; }
#table .half .leadrow .stageSlot { border-color: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .14); }

#table .roster .pills { display: none; }
#table .roster .rline { padding: 2px 0 6px; }

#table .oppHandBacks img.miniback:nth-child(1) { transform: rotate(-7deg) translateY(2px); }
#table .oppHandBacks img.miniback:nth-child(2) { transform: rotate(-3.5deg) translateY(0.5px); }
#table .oppHandBacks img.miniback:nth-child(4) { transform: rotate(3.5deg) translateY(0.5px); }
#table .oppHandBacks img.miniback:nth-child(5) { transform: rotate(7deg) translateY(2px); }
/* [R584] HUD 收拢：房间码即复制入口，音效/全屏收进「⋯」 */
#table .hud #roomTag { cursor: pointer; }
#table .hud #roomTag.copyable:hover { border-color: rgba(255,255,255,.3); color: #fff; }
#table .hud .hudmore { position: relative; }
#table .hud .hudmore > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 24px; padding: 0 6px; border: 1px solid var(--line); border-radius: 8px;
  color: var(--dim); font-size: 15px; line-height: 1; user-select: none;
}
#table .hud .hudmore > summary::-webkit-details-marker { display: none; }
#table .hud .hudmore[open] > summary { color: #fff; border-color: rgba(255,255,255,.32); }
#table .hud .hudmenu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; display: flex; flex-direction: column;
  gap: 4px; padding: 6px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 12px 28px rgba(0,0,0,.55);
}
#table .hud .hudmenu button { text-align: left; white-space: nowrap; }
/* [R586] 手牌可出性：出不了的牌只压暗一点点（-18% 亮度），不改变尺寸/位置 */
#table .half.me .hand .card.dim { filter: brightness(.82) saturate(.9); }
#table .half.me .hand .card.dim:hover { filter: brightness(.92) saturate(.95); }
/* [R586] 交互层压在箭头之上 */
#table .mid, #table .hud, #table .rail { position: relative; z-index: 3; }

/* [R586] 攻击箭头重做：从攻击卡中心画出、图层压到卡下面、金色渐变 + 流光 + 箭羽 */
#table { position: relative; }
#table .card { z-index: 2; }
#table #arrowLayer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible; z-index: 1; display: none;
}
#table #arrowLayer .atkGlow {
  fill: none; stroke: rgba(255, 130, 50, .38);
  stroke-width: 16; stroke-linecap: round; filter: blur(7px);
}
#table #arrowLayer .atkBody {
  fill: none; stroke: url(#atkGrad); stroke-width: 4.5; stroke-linecap: round;
  filter: drop-shadow(0 0 7px rgba(255, 150, 60, .8));
}
#table #arrowLayer .atkFlow {
  fill: none; stroke: #fff4d2; stroke-width: 1.5; stroke-linecap: round;
  stroke-dasharray: 9 15; opacity: .9; animation: atkFlow 1.05s linear infinite;
}
@keyframes atkFlow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -48; } }

/* [R586] 攻击方（横置）与被选为目标的卡：轻微上下漂浮 + 抖动 */
@keyframes atkFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  18% { transform: translate3d(0, -3px, 0) rotate(-.55deg); }
  36% { transform: translate3d(0, -1px, 0) rotate(.35deg); }
  54% { transform: translate3d(0, 2px, 0) rotate(.55deg); }
  72% { transform: translate3d(0, 1px, 0) rotate(-.35deg); }
  88% { transform: translate3d(0, -1px, 0) rotate(0deg); }
}
#table .card.attacking {
  animation: lunge .45s ease-out both, atkFloat 1.35s ease-in-out .45s infinite;
  z-index: 6;
}
#table .card.target { animation: atkFloat 1.35s ease-in-out infinite; box-shadow: 0 0 0 2px rgba(46, 204, 113, .85), 0 0 18px rgba(46, 204, 113, .35); border-radius: 8px; }
#table .card.attacking { box-shadow: 0 0 0 2px rgba(255, 160, 70, .9), 0 0 22px rgba(255, 140, 60, .5); border-radius: 8px; }
#table .card.target img { box-shadow: 0 0 0 2px var(--ok), 0 0 16px rgba(46, 204, 113, .45); }

@media (prefers-reduced-motion: reduce) {
  #table .card.attacking, #table .card.target, #table .card.defending { animation: none; }
  #table #arrowLayer .atkFlow { animation: none; }
}
/* [R586] 被攻击的那张卡：红环 + 漂浮 */
#table .card.defending { animation: atkFloat 1.35s ease-in-out infinite; box-shadow: 0 0 0 2px rgba(255, 96, 64, .9), 0 0 22px rgba(255, 90, 50, .5); border-radius: 8px; }

@media (max-width: 900px) {
  #table .atkGlow { stroke-width: 10px; }
  #table .atkBody { stroke-width: 3.5px; }
  #table .atkFlow { stroke-width: 1.1px; }
}

/* [R586] 动作条不再铺一条不透明底，避免把箭头切出一条黑边；按钮/标签自己有底色 */
#table .mid .actions { background: none !important; }

/* [R587] 战报吃满左栏剩余高度，字号/行距调大到可读 */
#table .rail .roster { flex: 0 0 auto; }
#table .rail .log {
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
  font-size: 12.5px;
  line-height: 1.65;
  padding: 10px 12px 14px;
}
#table .rail .log div { padding: 1.5px 0; }

/* ===== [R603] 邀请入口 / 手机战报抽屉 / 卡图提示 ===== */
/* 邀请：房间码旁边一个看得见的按钮（等价于点房间码复制链接） */
#table .hud #inviteBtn{ margin-left: 2px; letter-spacing: .02em }
@media (max-width: 900px){ #table .hud #inviteBtn{ padding: 4px 9px; font-size: 11.5px } }

/* 手机战报：HUD 里的入口 + 底部抽屉（桌面端日志在左栏，不显示入口） */
#table .hud #logBtn{ display: none; margin-left: 2px }
@media (max-width: 900px){ #table .hud #logBtn{ display: inline-flex; align-items: center; padding: 4px 9px; font-size: 13px } }
#table .logdrawer{ position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; background: rgba(4, 7, 12, .55) }
#table .logdrawer.hidden{ display: none }
#table .logdrawer .ldcard{
  width: 100%; max-height: 66vh; display: flex; flex-direction: column;
  background: #0f141c; border-top: 1px solid #26303f; border-radius: 14px 14px 0 0;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .5);
}
#table .logdrawer .ldhead{ display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #1d2531; color: #e6e9f0; font-size: 13px }
#table .logdrawer .ldbody{ overflow: auto; padding: 10px 14px 18px; font-size: 12.5px; line-height: 1.7; color: #8b93a7; white-space: pre-wrap }
#table .logdrawer .ldbody div{ color: #8b93a7 }
#table .logdrawer .ldbody div:nth-last-child(-n+3){ color: #e6e9f0 }

/* 首次进牌桌的「卡图能放大」提示，看过一次就不再出现 */
#table .cardhint{
  position: absolute; left: 50%; transform: translateX(-50%);
  padding: 6px 13px; border-radius: 999px; white-space: nowrap; cursor: pointer;
  background: rgba(255, 176, 32, .94); color: #1a1206;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  z-index: 7; animation: hintFloat .5s ease-out both;
}
#table .cardhint::after{
  content: ''; position: absolute; left: 50%; bottom: -4px; width: 9px; height: 9px;
  transform: translateX(-50%) rotate(45deg); background: inherit;
}
@keyframes hintFloat{ from{ opacity: 0; transform: translate(-50%, 6px) } to{ opacity: 1; transform: translate(-50%, 0) } }

/* [R604] 卡组编辑器里的同款提示（编辑器是深色界面，用固定定位浮在底部中央） */
#builder .cardhint.bldhint{
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%);
  padding: 8px 16px; border-radius: 999px; white-space: nowrap; cursor: pointer;
  background: rgba(255, 176, 32, .96); color: #1a1206;
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
  z-index: 90; animation: hintFloat .5s ease-out both;
}

/* [R587] 左栏加宽一点，战报每行少折一次 */
@media (min-width: 1100px) { #table .bshell { grid-template-columns: 248px minmax(0, 1fr); } }