/* ============================================================
   真实棋子光影与三端布局（PC / 平板 / 手机）
   说明：本文件专注"棋子质感 + 棋盘质感 + 三端差异化布局"，
        与 common.css / room.css 互补，不重复定义通用组件。
   ============================================================ */

/* ---------- 1. 全局质感变量（覆盖 root，所有棋种共用） ---------- */
:root {
    /* 木纹棋盘主色 */
    --wood-light: #f3d9a4;
    --wood-mid:    #d9a25e;
    --wood-dark:   #8b6f47;
    --wood-edge:   #5a3d1b;
    /* 国际象棋格色 */
    --sq-light: #f0d9b5;
    --sq-dark:  #b58863;
    /* 通用阴影 */
    --piece-shadow: 0 2px 4px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.22);
    --piece-shadow-lift: 0 6px 14px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.25);
}

/* ---------- 2. 棋盘容器质感（木纹背景 + 内嵌阴影） ---------- */
.board-box {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.15), transparent 55%),
        linear-gradient(135deg, var(--wood-light) 0%, var(--wood-mid) 100%);
    border: 1px solid var(--wood-edge);
    box-shadow:
        inset 0 0 24px rgba(90,61,27,0.25),
        0 10px 30px rgba(70,130,180,0.18);
    position: relative;
}
.board-box::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        repeating-linear-gradient(90deg, rgba(139,111,71,0.06) 0 2px, transparent 2px 7px),
        repeating-linear-gradient(0deg,  rgba(139,111,71,0.05) 0 2px, transparent 2px 9px);
    pointer-events: none;
    border-radius: inherit;
}

/* ---------- 3. 棋子通用光影（SVG <g> 平台） ---------- */
/* 选中态：外圈金光 + 浮起阴影 */
.piece-sel {
    filter: drop-shadow(0 0 6px rgba(212,160,23,0.9));
}
/* 落子动画：放大淡入 */
@keyframes pieceDrop {
    from { transform: scale(0.4); opacity: 0; }
    60%  { transform: scale(1.12); opacity: 1; }
    to   { transform: scale(1); }
}
.piece-drop { transform-box: fill-box; transform-origin: center; animation: pieceDrop 0.28s cubic-bezier(0.34,1.56,0.64,1); }

/* 黑白棋子的立体高光（径向渐变模拟球面） */
.stone-black { fill: url(#stoneBlackGrad); }
.stone-white { fill: url(#stoneWhiteGrad); }

/* ============================================================
   4. 三端差异化布局
   断点约定：
     PC    : min-width 1025px
     平板  : 769px ~ 1024px
     手机  : max-width 768px
   ============================================================ */

/* ===== 4.1 PC 端：宽屏双栏，棋盘居中、信息侧栏 ===== */
@media (min-width: 1025px) {
    .room-body { flex-direction: row; align-items: stretch; }
    .room-header { width: 100%; }
    /* 主棋盘区 */
    .board-wrap {
        flex: 1 1 auto; padding: 24px 32px; order: 1;
    }
    .board-box { max-width: 720px; margin: 0 auto; }
    /* 右侧信息栏（状态/计时/按钮/成员） */
    .pc-sidebar {
        flex: 0 0 300px; order: 2;
        padding: 24px 20px; background: rgba(255,255,255,0.7);
        box-shadow: -4px 0 16px rgba(0,0,0,0.06);
        display: flex; flex-direction: column; gap: 16px;
        overflow-y: auto; max-height: 100vh;
    }
    .status-bar { padding: 0; }
    /* 桌面端 hover 浮起 */
    .game-card:hover .g-icon { transform: translateY(-2px) rotate(-3deg); transition: transform .3s; }
}

/* ===== 4.2 平板端：上下分区，棋盘居中放大 ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    .container { max-width: 960px; }
    .room-body { flex-direction: column; }
    .board-wrap { padding: 16px; }
    .board-box { max-width: 600px; padding: 14px; }
    .panel-cols { grid-template-columns: 1fr; }
    .game-grid { grid-template-columns: repeat(2, 1fr) !important; }
    /* 平板信息精简：隐藏次要 meta 行 */
    .pub-meta span:nth-child(n+3) { display: none; }
}

/* ===== 4.3 手机端：紧凑栈式，信息分层折叠（非平铺） ===== */
@media (max-width: 768px) {
    :root { --radius: 10px; }
    body { font-size: 0.92rem; }
    .container { padding: 12px 10px; }
    .topbar { padding: 6px 2px 12px; }
    .topbar .brand { font-size: 1.05rem; }
    .topbar .brand small { display: none; }

    /* 手机端棋盘自适应宽度 */
    .board-box { padding: 8px; max-width: 100%; }
    .board-box svg.board-svg { width: 100%; height: auto; }

    /* 手机端信息要素折叠为"信息抽屉"，避免平铺 */
    .mobile-drawer {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 220;
        background: #fff; border-radius: 16px 16px 0 0;
        box-shadow: 0 -6px 24px rgba(0,0,0,0.18);
        max-height: 70vh; overflow-y: auto;
        transform: translateY(100%); transition: transform .3s cubic-bezier(0.22,1,0.36,1);
    }
    .mobile-drawer.open { transform: translateY(0); }
    .mobile-drawer-toggle {
        position: fixed; right: 12px; bottom: 12px; z-index: 221;
        width: 48px; height: 48px; border-radius: 50%;
        background: var(--primary-dark); color: #fff; border: none;
        box-shadow: 0 4px 12px rgba(0,0,0,0.25); cursor: pointer;
        display: flex; align-items: center; justify-content: center;
    }

    /* 手机端状态栏精简为一行 */
    .status-bar { padding: 6px 10px; font-size: 0.82rem; }
    .room-header { padding: 8px 10px; }
    .room-header .rh-left { gap: 8px; }
    .room-header .rh-game { font-size: 0.92rem; }

    /* 手机端卡片单列 */
    .game-grid { grid-template-columns: 1fr !important; }
    .panel-cols { grid-template-columns: 1fr; }

    /* 手机端棋子尺寸自动收缩（JS 动态调整 viewBox 时配合） */
    .board-box svg.board-svg { max-height: 70vh; }

    /* 手机端公共房间列表精简 */
    .pub-item { padding: 10px 12px; }
    .pub-meta { gap: 8px; }
    .pub-meta span:nth-child(n+2) { display: none; }

    /* 手机端按钮高度增大便于触控 */
    .btn { padding: 12px 20px; }
    .btn-sm { padding: 9px 14px; }
}

/* ============================================================
   5. 各棋种 SVG defs 渐变（由 JS 注入到 <svg>）
   ------------------------------------------------------------
   这些 <linearGradient>/<radialGradient> 定义会被棋子 pieces.js
   引用（fill="url(#xxx)"），实现真实球面光影。
   ============================================================ */

/* 预留：实际 defs 由 JS 动态插入，CSS 仅兜底防止渐变未加载时透明 */
.stone-black, .stone-white { opacity: 1; }