/* ══════════════════════════════════════════════════════════
   table-ui.css — 斗地主 / 大富翁 牌桌视觉层
   在各模块运行时注入的 <style> 之后加载（用 body 前缀提高优先级）
   ══════════════════════════════════════════════════════════ */

/* ══════════ 公共：顶栏图标按钮 ══════════ */
body #ddz-root .ddz-ico,
body #mp-root .mp-ico{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);color:#f2f5ff;transition:background .15s,transform .12s}
body #ddz-root .ddz-ico svg.ico,
body #mp-root .mp-ico svg.ico{width:16px;height:16px}
body #ddz-root .ddz-ico:hover,
body #mp-root .mp-ico:hover{background:rgba(255,255,255,.18);transform:none}
body #ddz-root .ddz-ico:active,
body #mp-root .mp-ico:active{transform:scale(.92)}

/* ══════════ 斗地主：绿绒牌桌 ══════════ */
body #ddz-root{
  background:
    radial-gradient(58% 42% at 50% 46%,rgba(80,220,150,.20),transparent 72%),
    radial-gradient(120% 120% at 50% -12%,#1f6a4a 0%,#12523a 34%,#0a3527 62%,#061d15 100%)}
/* 绒布纹理 + 桌沿压暗 */
body #ddz-root::before{
  background:
    radial-gradient(closest-side,transparent 52%,rgba(0,0,0,.5) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  opacity:.8;mix-blend-mode:multiply}
/* 中央聚光 + 落牌区圆环 */
body #ddz-root .ddz-center::before{
  content:'';position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);
  width:min(58vw,430px);aspect-ratio:1.5;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side,rgba(255,255,255,.09),rgba(255,255,255,.03) 62%,transparent 72%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
body #ddz-root .ddz-top{
  background:linear-gradient(180deg,rgba(3,18,12,.6),transparent);
  border-bottom:1px solid rgba(255,255,255,.06)}
body #ddz-root .ddz-top h3{letter-spacing:3px;font-size:1rem;display:flex;align-items:center;gap:8px}
body #ddz-root .ddz-top h3 svg.ico{width:18px;height:18px;color:#ffd166;-webkit-text-fill-color:initial}
body #ddz-root .ddz-room-chip{font-family:ui-monospace,'SF Mono',Menlo,monospace;letter-spacing:.2em;
  background:rgba(0,0,0,.3);border-color:rgba(255,255,255,.14);color:#cdf2dd}

/* 玩家面板 */
body #ddz-root .ddz-pp{
  padding:10px 14px;border-radius:18px;border:0;min-width:132px;
  background:linear-gradient(180deg,rgba(9,42,30,.9),rgba(5,26,19,.9));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 12px 30px -16px rgba(0,0,0,.9)}
body #ddz-root .ddz-pp.turn{
  background:linear-gradient(180deg,rgba(62,48,10,.85),rgba(28,20,4,.9));
  box-shadow:inset 0 0 0 1px rgba(255,224,138,.6),0 0 24px -6px rgba(255,209,102,.55)}
body #ddz-root .ddz-nm{font-size:.84rem;letter-spacing:.5px}
body #ddz-root .ddz-cnt{font-size:.76rem;color:#ffd79a;font-variant-numeric:tabular-nums}
body #ddz-root .ddz-role-ll{padding:1px 8px;border-radius:999px;background:rgba(255,209,102,.16);box-shadow:inset 0 0 0 1px rgba(255,209,102,.36)}
body #ddz-root .ddz-role-fm{padding:1px 8px;border-radius:999px;background:rgba(125,211,252,.14);box-shadow:inset 0 0 0 1px rgba(125,211,252,.32)}
body #ddz-root .ddz-timer{border-radius:999px;box-shadow:0 4px 12px -4px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.4)}

/* 底牌 */
body #ddz-root .ddz-dipai{
  padding:8px 12px;border-radius:16px;
  background:linear-gradient(180deg,rgba(6,30,22,.86),rgba(3,18,13,.9));
  box-shadow:inset 0 0 0 1px rgba(255,209,102,.24),0 10px 26px -14px rgba(0,0,0,.9)}
body #ddz-root .ddz-dipai > span:first-child{color:#ffd79a;letter-spacing:3px;font-size:.66rem}

/* 提示语 / 出牌区 */
body #ddz-root .ddz-tip{font-size:.95rem;color:#e8fff4;text-shadow:0 2px 8px rgba(0,0,0,.6)}
body #ddz-root .ddz-tip b{color:#ffd166}
body #ddz-root .ddz-pass-tag{background:rgba(120,10,30,.55);color:#ffc9d0;box-shadow:inset 0 0 0 1px rgba(255,150,170,.35)}

/* 我的回合横幅 */
body #ddz-root .ddz-myturn{border-radius:999px;padding:9px 24px;
  background:linear-gradient(135deg,#ffe9a8,#ffc94d);box-shadow:0 10px 30px -10px rgba(255,201,77,.8)}

/* 操作按钮 */
body #ddz-root .ddz-controls{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:10px}
body #ddz-root .ddz-btn{
  min-width:104px;height:44px;padding:0 22px;border-radius:14px;border:0;cursor:pointer;
  font:inherit;font-size:.95rem;font-weight:800;letter-spacing:2px;color:#eafff4;
  background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 8px 20px -12px rgba(0,0,0,.9);
  transition:transform .12s,filter .15s,background .15s}
body #ddz-root .ddz-btn:hover:not(:disabled){background:rgba(255,255,255,.16);transform:translateY(-1px)}
body #ddz-root .ddz-btn:active:not(:disabled){transform:scale(.96)}
body #ddz-root .ddz-btn:disabled{opacity:.35;cursor:not-allowed}
body #ddz-root .ddz-btn.play{
  background:linear-gradient(135deg,#ffe08a,#f59e0b);color:#3a2503;
  box-shadow:0 12px 28px -12px rgba(245,158,11,.95),inset 0 1px 0 rgba(255,255,255,.5)}
body #ddz-root .ddz-btn.hint{background:linear-gradient(135deg,rgba(125,211,252,.3),rgba(59,130,246,.22));color:#dbeafe;
  box-shadow:inset 0 0 0 1px rgba(125,211,252,.35)}
body #ddz-root .ddz-btn.pass{background:rgba(255,255,255,.07)}

/* 底部信息行 / 日志 */
body #ddz-root .ddz-me{background:linear-gradient(0deg,rgba(2,16,11,.72),transparent)}
body #ddz-root .ddz-me-info{font-size:.82rem;color:#cdf2dd}
body #ddz-root .ddz-log{
  left:14px;bottom:auto;top:calc(50% + 40px);max-width:200px;font-size:.7rem;line-height:1.7;
  color:rgba(215,240,228,.5);text-shadow:0 1px 3px rgba(0,0,0,.8)}
@media (max-width:820px){ body #ddz-root .ddz-log{display:none} }

/* ══════════ 大富翁：棋盘（模块自带样式已经做得不错，这里只做增补）══════════ */
body #mp-root .mp-top h3{display:flex;align-items:center;gap:8px}
body #mp-root .mp-top h3 svg.ico{width:18px;height:18px;color:#a5b4fc}
/* 格子：加一点悬停反馈和更清楚的可盖房提示 */
body #mp-root .mp-cell{transition:transform .14s var(--g-spring,cubic-bezier(.16,1,.3,1)),filter .15s,box-shadow .15s}
body #mp-root .mp-cell:hover{transform:translateY(-2px);filter:brightness(1.06)}
body #mp-root .mp-cell.buildable{box-shadow:inset 0 0 0 2px rgba(93,224,166,.9),0 0 18px -4px rgba(93,224,166,.7)}
body #mp-root .mp-cell .pr{font-variant-numeric:tabular-nums}
/* 中央：日志空的时候给句提示，别留一块黑 */
body #mp-root .mp-log:empty::after{content:'对局记录会显示在这里';display:block;text-align:center;padding:10px 0;
  color:rgba(233,230,255,.32);font-size:.92em}
body #mp-root .mp-log div:last-child{color:#fff}
body #mp-root .mp-turn-lbl{letter-spacing:1px}
/* 侧栏：当前回合更醒目，数字等宽 */
body #mp-root .mp-pcard{border-radius:16px}
body #mp-root .mp-pcard.active{box-shadow:inset 0 0 0 1.5px rgba(165,180,252,.75),0 0 26px -8px rgba(129,140,248,.85)}
body #mp-root .mp-pcard b,body #mp-root .mp-pcard .mp-money,body #mp-root .mp-pcard i{font-variant-numeric:tabular-nums}
body #mp-root .mp-btn{border-radius:13px;font-weight:700;letter-spacing:1px}
body #mp-root .mp-btn.primary,body #mp-root .mp-btn.buy{
  background:linear-gradient(135deg,#a98bff,#6d28d9);color:#fff;border:0;
  box-shadow:0 12px 28px -14px rgba(139,92,246,.95),inset 0 1px 0 rgba(255,255,255,.28)}

@media (prefers-reduced-motion:reduce){
  body #mp-root .mp-cell{transition:none}
}