/* ══════════════════════════════════════════════════════════
   game-ui.css — 联机模块统一视觉层
   ──────────────────────────────────────────────────────────
   各游戏模块（doudizhu / gomoku / xiangqi /
   battle / monopoly）在打开时才把自己的 <style> 注入 <head>，
   排序在本文件之后。因此这里一律使用更高优先级的选择器
   （body #xx-root、#xx-root .xx-xxx）来覆盖，不依赖加载顺序。

   设计方向：深色玻璃质感 + 发丝边框 + 内侧高光 + 柔和大阴影，
   每个游戏保留自己的主色（--g-accent），但结构与手感统一。
   ══════════════════════════════════════════════════════════ */

:root{
  --g-radius:     18px;
  --g-radius-sm:  12px;
  --g-hairline:   rgba(255,255,255,.10);
  --g-hairline-2: rgba(255,255,255,.16);
  --g-ink:        #f2f5ff;
  --g-ink-dim:    rgba(242,245,255,.62);
  --g-ink-faint:  rgba(242,245,255,.38);
  --g-surface:    rgba(255,255,255,.045);
  --g-surface-2:  rgba(255,255,255,.075);
  --g-shadow:     0 24px 70px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35);
  --g-shadow-lift:0 30px 90px rgba(0,0,0,.62), 0 3px 10px rgba(0,0,0,.4);
  --g-spring:     cubic-bezier(.16,1,.3,1);
  --g-fast:       .18s var(--g-spring);
}

/* 每个游戏的主色调（保留各自识别度，只统一结构） */
body #ddz-root{ --g-accent:#4ade80; --g-accent-2:#fbbf24; }
body #gmk-root{ --g-accent:#e6be87; --g-accent-2:#f59e0b; }
body #xq-root { --g-accent:#e8c887; --g-accent-2:#dc2626; }
body #mp-root { --g-accent:#818cf8; --g-accent-2:#a78bfa; }
body #bt-mask { --g-accent:#f472b6; --g-accent-2:#818cf8; }

/* ── 1. 舞台底色：统一为「深空 + 主色辉光」，去掉各自的浓艳大色块 ── */
body #ddz-root,
body #gmk-root,
body #xq-root,
body #mp-root{
  color: var(--g-ink);
  background:
    radial-gradient(70% 50% at 50% 0%,   color-mix(in oklab, var(--g-accent) 14%, transparent), transparent 70%),
    radial-gradient(60% 45% at 12% 100%, color-mix(in oklab, var(--g-accent-2) 10%, transparent), transparent 72%),
    linear-gradient(175deg, #14121f 0%, #0c0a16 45%, #07060e 100%);
}
/* 细颗粒质感：避免大面积渐变出现色带，是「高级感」最省力的一步 */
body #ddz-root::after,
body #gmk-root::after,
body #xq-root::after,
body #mp-root::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}

/* ── 2. 顶栏：从「实心色块」改为渐隐玻璃条 ── */
#ddz-root .ddz-top,
#gmk-root .gmk-top,
#xq-root  .xq-top,
#mp-root  .mp-top{
  position:relative; z-index:3;
  padding:12px 18px;
  background:linear-gradient(180deg, rgba(10,8,20,.72), rgba(10,8,20,0));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--g-hairline);
}
#ddz-root .ddz-top h3,
#gmk-root .gmk-top h3,
#xq-root  .xq-top h3,
#mp-root  .mp-top h3{
  font-size:1rem; font-weight:700; letter-spacing:.06em;
  background:linear-gradient(92deg, var(--g-ink), color-mix(in oklab, var(--g-accent) 70%, #fff));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* ── 3. 图标按钮：去边框、加压感 ── */
#ddz-root .ddz-ico,
#gmk-root .gmk-ico,
#xq-root  .xq-ico,
#mp-root  .mp-ico{
  width:34px; height:34px; border-radius:11px;
  border:1px solid var(--g-hairline);
  background:var(--g-surface);
  color:var(--g-ink); font-size:.92rem;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--g-fast), transform var(--g-fast), border-color var(--g-fast);
}
#ddz-root .ddz-ico:hover,
#gmk-root .gmk-ico:hover,
#xq-root  .xq-ico:hover,
#mp-root  .mp-ico:hover{
  background:var(--g-surface-2); border-color:var(--g-hairline-2); transform:translateY(-1px);
}
#ddz-root .ddz-ico:active,
#gmk-root .gmk-ico:active,
#xq-root  .xq-ico:active,
#mp-root  .mp-ico:active{ transform:translateY(0) scale(.94); }

/* ── 4. 房间码 chip：等宽数字 + 主色微光 ── */
#ddz-root .ddz-room-chip,
#gmk-root .gmk-chip,
#xq-root  .xq-chip,
#mp-root  .mp-room-chip{
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-variant-numeric:tabular-nums; font-size:.76rem; font-weight:600;
  letter-spacing:.22em; padding:6px 12px; border-radius:999px;
  color:color-mix(in oklab, var(--g-accent) 82%, #fff);
  background:color-mix(in oklab, var(--g-accent) 12%, transparent);
  border:1px solid color-mix(in oklab, var(--g-accent) 32%, transparent);
  transition:background var(--g-fast), transform var(--g-fast);
}
#ddz-root .ddz-room-chip:hover,
#gmk-root .gmk-chip:hover,
#xq-root  .xq-chip:hover,
#mp-root  .mp-room-chip:hover{
  background:color-mix(in oklab, var(--g-accent) 20%, transparent); transform:translateY(-1px);
}

/* ── 5. 遮罩：更深、更强的景深 ── */
#ddz-root .ddz-mask,
#gmk-root .gmk-mask,
#xq-root  .xq-mask,
#mp-root  .mp-mask,
body      .bt-mask{
  background:radial-gradient(ellipse at 50% 40%, rgba(6,4,14,.55), rgba(4,3,10,.86));
  backdrop-filter:blur(10px) saturate(1.2); -webkit-backdrop-filter:blur(10px) saturate(1.2);
}

/* ── 6. 核心卡片：玻璃 + 发丝边 + 顶部内高光 ──
   这是六个模块观感最「平」的地方，也是提升最明显的一处。 */
#ddz-root .ddz-card-box,
#gmk-root .gmk-box,
#xq-root  .xq-box,
#mp-root  .mp-card-box,
body      .bt-card{
  position:relative;
  border-radius:22px;
  padding:26px 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    rgba(16,13,28,.82);
  border:1px solid var(--g-hairline-2);
  box-shadow:var(--g-shadow), inset 0 1px 0 rgba(255,255,255,.09);
  backdrop-filter:blur(26px) saturate(1.5); -webkit-backdrop-filter:blur(26px) saturate(1.5);
}
/* 卡片顶部的主色细线，点睛用 */
#ddz-root .ddz-card-box::before,
#gmk-root .gmk-box::before,
#xq-root  .xq-box::before,
#mp-root  .mp-card-box::before,
body      .bt-card::before{
  content:''; position:absolute; top:0; left:22%; right:22%; height:1px;
  background:linear-gradient(90deg, transparent, var(--g-accent), transparent);
  opacity:.85;
}
#ddz-root .ddz-card-box h3,
#gmk-root .gmk-box h3,
#xq-root  .xq-box h3,
#mp-root  .mp-card-box h3{
  font-size:1.22rem; font-weight:700; letter-spacing:-.01em; margin:0 0 8px;
}

/* ── 7. 说明文字：拉开层级，别再都是一个灰 ── */
#ddz-root .ddz-sub,
#gmk-root .gmk-seat-hint,
#xq-root  .xq-hint,
#mp-root  .mp-sub,
#mp-root  .mp-hint,
body      .bt-sub{
  color:var(--g-ink-dim); font-size:.82rem; line-height:1.65;
}

/* ── 8. 主行动按钮：渐变 + 悬浮 + 按压，替换扁平色块 ── */
#ddz-root .ddz-full,
#gmk-root .gmk-full,
#xq-root  .xq-full,
#mp-root  .mp-full,
#mp-root  .mp-btn,
#xq-root  .xq-btn,
body      .bt-btn{
  position:relative;
  width:100%; padding:13px 18px; margin-top:11px;
  border-radius:14px; cursor:pointer;
  font-size:.92rem; font-weight:600; letter-spacing:.01em;
  color:var(--g-ink);
  background:var(--g-surface-2);
  border:1px solid var(--g-hairline-2);
  transition:transform var(--g-fast), background var(--g-fast),
             border-color var(--g-fast), box-shadow var(--g-fast);
}
#ddz-root .ddz-full:hover:not(:disabled),
#gmk-root .gmk-full:hover:not(:disabled),
#xq-root  .xq-full:hover:not(:disabled),
#mp-root  .mp-full:hover:not(:disabled),
#mp-root  .mp-btn:hover:not(:disabled),
#xq-root  .xq-btn:hover:not(:disabled),
body      .bt-btn:hover:not(:disabled){
  transform:translateY(-2px);
  border-color:color-mix(in oklab, var(--g-accent) 40%, transparent);
  box-shadow:0 10px 26px rgba(0,0,0,.4);
}
#ddz-root .ddz-full:active:not(:disabled),
#gmk-root .gmk-full:active:not(:disabled),
#xq-root  .xq-full:active:not(:disabled),
#mp-root  .mp-full:active:not(:disabled),
#mp-root  .mp-btn:active:not(:disabled),
#xq-root  .xq-btn:active:not(:disabled),
body      .bt-btn:active:not(:disabled){ transform:translateY(0) scale(.985); }

/* 主按钮（primary）：主色渐变 + 主色投影 */
#ddz-root .ddz-full.primary,
#gmk-root .gmk-full.primary,
#xq-root  .xq-full.primary,
#mp-root  .mp-full.primary,
#mp-root  .mp-btn.primary,
#mp-root  .mp-btn.buy,
body      .bt-btn.primary{
  color:#0b0913; font-weight:700;
  background:linear-gradient(135deg,
      color-mix(in oklab, var(--g-accent) 92%, #fff),
      var(--g-accent-2));
  border-color:transparent;
  box-shadow:0 10px 26px color-mix(in oklab, var(--g-accent) 28%, transparent),
             inset 0 1px 0 rgba(255,255,255,.35);
}
#ddz-root .ddz-full.primary:hover:not(:disabled),
#gmk-root .gmk-full.primary:hover:not(:disabled),
#xq-root  .xq-full.primary:hover:not(:disabled),
#mp-root  .mp-full.primary:hover:not(:disabled),
#mp-root  .mp-btn.primary:hover:not(:disabled),
#mp-root  .mp-btn.buy:hover:not(:disabled),
body      .bt-btn.primary:hover:not(:disabled){
  box-shadow:0 16px 38px color-mix(in oklab, var(--g-accent) 38%, transparent),
             inset 0 1px 0 rgba(255,255,255,.4);
}
/* ghost：更克制 */
#ddz-root .ddz-full.ghost,
#gmk-root .gmk-full.ghost,
#xq-root  .xq-full.ghost,
#mp-root  .mp-full.ghost,
body      .bt-btn.ghost{
  background:transparent; border-color:var(--g-hairline);
  color:var(--g-ink-dim); font-weight:500;
}
#ddz-root .ddz-full.ghost:hover,
#gmk-root .gmk-full.ghost:hover,
#xq-root  .xq-full.ghost:hover,
#mp-root  .mp-full.ghost:hover,
body      .bt-btn.ghost:hover{ background:var(--g-surface); color:var(--g-ink); }

/* 键盘可达性：原来完全没有焦点样式 */
#ddz-root button:focus-visible, #gmk-root button:focus-visible,
#xq-root  button:focus-visible, 
#mp-root  button:focus-visible, body .bt-mask button:focus-visible,
#ddz-root input:focus-visible,  #gmk-root input:focus-visible,
#xq-root  input:focus-visible,  
#mp-root  input:focus-visible,  body .bt-mask input:focus-visible{
  outline:2px solid var(--g-accent); outline-offset:2px;
}

/* ── 9. 房间码输入框：等宽 + 宽字距，像验证码而不是普通输入框 ── */
#ddz-root .ddz-join-in, #ddz-root #ddz-join-in,
#gmk-root .gmk-join-in,
#xq-root  .xq-join-in,
#mp-root  #mp-join-in,
body      .bt-input{
  width:100%; box-sizing:border-box;
  padding:14px 12px; border-radius:14px;
  background:rgba(0,0,0,.32);
  border:1px solid var(--g-hairline-2);
  color:var(--g-ink);
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:1.28rem; font-weight:600;
  text-align:center; letter-spacing:.45em; text-indent:.45em;
  text-transform:uppercase;
  transition:border-color var(--g-fast), box-shadow var(--g-fast), background var(--g-fast);
}
#ddz-root .ddz-join-in:focus, #ddz-root #ddz-join-in:focus,
#gmk-root .gmk-join-in:focus,
#xq-root  .xq-join-in:focus,
#mp-root  #mp-join-in:focus,
body      .bt-input:focus{
  outline:none; background:rgba(0,0,0,.42);
  border-color:color-mix(in oklab, var(--g-accent) 55%, transparent);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--g-accent) 14%, transparent);
}

/* ── 10. 房间码展示：等宽 tabular，避免数字宽度跳动 ── */
#gmk-root .gmk-code, #xq-root .xq-code, body .bt-code{
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-variant-numeric:tabular-nums;
  letter-spacing:.3em; font-weight:700;
  color:color-mix(in oklab, var(--g-accent) 85%, #fff);
}

/* ── 11. 玩家/座位卡：统一为可呼吸的玻璃行 ── */
#gmk-root .gmk-seat, #xq-root .xq-seat,
#gmk-root .gmk-pl,   #xq-root .xq-pl,
body .bt-pl,
#mp-root  .mp-pcard{
  border-radius:var(--g-radius-sm);
  background:var(--g-surface);
  border:1px solid var(--g-hairline);
  transition:background var(--g-fast), border-color var(--g-fast), transform var(--g-fast);
}
#gmk-root .gmk-seat:hover, #xq-root .xq-seat:hover, #mp-root .mp-pcard:hover{
  background:var(--g-surface-2);
}
/* 当前回合高亮：柔和主色光晕，不再是刺眼描边 */
#mp-root .mp-pcard.active{
  border-color:color-mix(in oklab, var(--g-accent) 55%, transparent);
  background:color-mix(in oklab, var(--g-accent) 10%, var(--g-surface));
  box-shadow:0 0 0 1px color-mix(in oklab, var(--g-accent) 30%, transparent),
             0 8px 24px color-mix(in oklab, var(--g-accent) 16%, transparent);
}

/* ── 12. 头像：内圈高光 + 柔阴影 ── */
#ddz-root .ddz-av, #gmk-root .gmk-av, #xq-root .xq-av,
#mp-root  .mp-av{
  border:1px solid var(--g-hairline-2);
  box-shadow:0 4px 14px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.16);
}

/* ── 13. 大富翁棋盘：格子做出材质与层次 ── */
#mp-root .mp-board{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid var(--g-hairline-2);
  border-radius:20px;
  box-shadow:var(--g-shadow), inset 0 1px 0 rgba(255,255,255,.07);
  padding:5px; gap:4px;
}
#mp-root .mp-tile{
  border-radius:8px;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:background var(--g-fast), transform var(--g-fast), box-shadow var(--g-fast);
}
#mp-root .mp-tile.corner{
  background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
}
#mp-root .mp-tile.buildable{
  outline:none;
  border-color:color-mix(in oklab, var(--g-accent) 60%, transparent);
  box-shadow:0 0 0 1px color-mix(in oklab, var(--g-accent) 45%, transparent),
             0 0 18px color-mix(in oklab, var(--g-accent) 22%, transparent);
}
#mp-root .mp-tile.buildable:hover{ transform:translateY(-2px); }
#mp-root .mp-tile-bar{ height:4px; border-radius:8px 8px 0 0; }
#mp-root .mp-pawn{ box-shadow:0 1px 4px rgba(0,0,0,.6); border-width:1px; }
#mp-root .mp-die{
  border-radius:12px;
  background:linear-gradient(160deg,#fff,#dfe3ef);
  color:#14121f; font-weight:800;
  box-shadow:0 8px 22px rgba(0,0,0,.5), inset 0 -2px 0 rgba(0,0,0,.12);
}
#mp-root .mp-log{
  background:rgba(0,0,0,.22); border:1px solid var(--g-hairline);
  border-radius:12px; padding:8px 10px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent;
}
#mp-root .mp-log div{ border-bottom:1px solid rgba(255,255,255,.04); padding:1px 0; }
#mp-root .mp-turn-lbl{ letter-spacing:.02em; text-shadow:0 2px 12px rgba(0,0,0,.5); }

/* ── 14. 滚动条：默认那条又粗又亮，很拉观感 ── */
#ddz-root ::-webkit-scrollbar, #gmk-root ::-webkit-scrollbar,
#xq-root  ::-webkit-scrollbar, 
#mp-root  ::-webkit-scrollbar{ width:7px; height:7px; }
#ddz-root ::-webkit-scrollbar-thumb, #gmk-root ::-webkit-scrollbar-thumb,
#xq-root  ::-webkit-scrollbar-thumb, 
#mp-root  ::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.16); border-radius:99px;
}
#ddz-root ::-webkit-scrollbar-thumb:hover, #gmk-root ::-webkit-scrollbar-thumb:hover,
#xq-root  ::-webkit-scrollbar-thumb:hover, 
#mp-root  ::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.28); }
#ddz-root ::-webkit-scrollbar-track, #gmk-root ::-webkit-scrollbar-track,
#xq-root  ::-webkit-scrollbar-track, 
#mp-root  ::-webkit-scrollbar-track{ background:transparent; }

/* ── 15. 卡片入场：一次轻微的上浮，别做夸张动画 ── */
@keyframes gUiRise{
  from{ opacity:0; transform:translateY(14px) scale(.985); }
  to  { opacity:1; transform:none; }
}
#ddz-root .ddz-card-box, #gmk-root .gmk-box, #xq-root .xq-box,
#mp-root  .mp-card-box, body .bt-mask.show .bt-card{
  animation:gUiRise .34s var(--g-spring) both;
}

/* ── 16. 移动端：卡片贴边、按钮加大到易点尺寸 ── */
@media (max-width:600px){
  #ddz-root .ddz-card-box, #gmk-root .gmk-box, #xq-root .xq-box,
  #mp-root  .mp-card-box, body .bt-card{
    width:min(94vw,440px); padding:22px 18px; border-radius:20px;
  }
  #ddz-root .ddz-full, #gmk-root .gmk-full, #xq-root .xq-full,
  #mp-root  .mp-full, #mp-root .mp-btn, body .bt-btn{
    padding:15px 18px; font-size:.95rem;
  }
}

/* ── 17. 无障碍：尊重系统的减弱动态偏好 ── */
@media (prefers-reduced-motion: reduce){
  #ddz-root *, #gmk-root *, #xq-root *, #mp-root *, body .bt-mask *{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ── 18. 收尾修正 ─────────────────────────────────────────── */

/* mp 的操作区用 flex gap 排列，按钮不需要再带 margin-top，否则间距翻倍 */
#mp-root .mp-actions .mp-btn{ margin-top:0; }

/* color-mix() 需要较新的浏览器（Chrome 111+/Safari 16.2+/FF 113+）。
   老浏览器会整条丢弃声明，这里先给一份纯色兜底，确保按钮不会变成没有背景的裸文字。
   下面的 @supports 块只在支持时才用主色混合覆盖。 */
#ddz-root .ddz-full.primary, #gmk-root .gmk-full.primary,
#xq-root  .xq-full.primary,  
#mp-root  .mp-full.primary,  #mp-root  .mp-btn.primary,
#mp-root  .mp-btn.buy,       body      .bt-btn.primary{
  background:linear-gradient(135deg, #a5b4fc, #818cf8);
  color:#0b0913;
}
@supports (color: color-mix(in oklab, red 50%, blue)){
  #ddz-root .ddz-full.primary, #gmk-root .gmk-full.primary,
  #xq-root  .xq-full.primary,  
  #mp-root  .mp-full.primary,  #mp-root  .mp-btn.primary,
  #mp-root  .mp-btn.buy,       body      .bt-btn.primary{
    background:linear-gradient(135deg,
        color-mix(in oklab, var(--g-accent) 92%, #fff),
        var(--g-accent-2));
  }
}
