/* 围棋平台统一样式 - 202604021200 */

/* 全局样式 */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;background:#f0f2f5;padding:15px;color:#333}

/* 顶部信息栏 */
.top-bar{background:linear-gradient(180deg,#e8f5e9 0%,#c8e6c9 100%);border-bottom:2px solid #a5d6a7;padding:12px;margin-bottom:15px;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,0.08)}
.player-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.player-info{display:flex;align-items:center;gap:10px}
.avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold;color:#fff;font-size:16px;box-shadow:0 2px 4px rgba(0,0,0,0.2)}
.avatar.black{background:linear-gradient(180deg,#555 0%,#1a1a1a 100%)}
.avatar.white{background:linear-gradient(180deg,#fff 0%,#e0e0e0 100%);color:#333;border:2px solid #ccc}
.timer{background:#fff;padding:8px 16px;border-radius:8px;font-weight:bold;font-family:monospace;font-size:16px;color:#f57c00;box-shadow:0 2px 4px rgba(0,0,0,0.1)}
.status{padding:10px;background:linear-gradient(180deg,#ffcdd2 0%,#ef9a9a 100%);border-radius:8px;text-align:center;color:#c62828;font-weight:600;margin:10px 0;box-shadow:0 2px 4px rgba(0,0,0,0.1)}

/* 棋盘容器 - 20260403 统一样式（所有对弈和记谱页面） */
.board-wrap{display:flex;justify-content:center;margin:0;padding:5px;background:transparent}
.board{background:#dcb35c;border:3px solid #8b6914;border-radius:6px;width:98vw;height:98vw;max-width:800px;max-height:800px;position:relative;cursor:pointer;box-shadow:0 4px 15px rgba(139,105,20,0.3),inset 0 0 30px rgba(139,69,19,0.15)}
.board svg{position:absolute;top:0;left:0;width:100%;height:100%;display:block}

/* 记谱页面专用 */
.board-container{position:relative;width:98vw;height:98vw;max-width:800px;max-height:800px;margin:0 auto;padding:5px}

/* 工具栏 */
.toolbar{background:linear-gradient(180deg,#f1f8e9 0%,#dcedc8 100%);padding:12px;border-radius:10px;margin-top:15px;box-shadow:0 1px 4px rgba(0,0,0,0.08)}
.tool-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.tool-btn{padding:10px 16px;background:linear-gradient(180deg,#81c784 0%,#66bb6a 100%);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;box-shadow:0 2px 4px rgba(0,0,0,0.15);transition:all 0.15s}
.tool-btn:hover{background:linear-gradient(180deg,#66bb6a 0%,#4caf50 100%);box-shadow:0 3px 6px rgba(0,0,0,0.2)}
.tool-btn:active{transform:scale(0.98);box-shadow:0 1px 2px rgba(0,0,0,0.1)}
.tool-btn.danger{background:linear-gradient(180deg,#ef5350 0%,#e53935 100%)}
.tool-btn.danger:hover{background:linear-gradient(180deg,#e53935 0%,#d32f2f 100%)}

/* 卡片容器 */
.card{background:#fff;border-radius:12px;padding:15px;margin-bottom:15px;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.card h3{color:#2e7d32;margin-bottom:10px;font-size:15px;font-weight:600}

/* 按钮统一样式 */
.btn{display:inline-block;padding:10px 18px;margin:5px 5px 0 0;background:linear-gradient(180deg,#81c784 0%,#66bb6a 100%);color:#fff;border-radius:8px;text-decoration:none;font-size:13px;font-weight:500;cursor:pointer;border:none;box-shadow:0 2px 4px rgba(0,0,0,0.15);transition:all 0.15s}
.btn:hover{background:linear-gradient(180deg,#66bb6a 0%,#4caf50 100%);box-shadow:0 3px 6px rgba(0,0,0,0.2)}
.btn:active{transform:scale(0.98)}
.btn-del{background:linear-gradient(180deg,#ef5350 0%,#e53935 100%)}
.btn-down{background:linear-gradient(180deg,#42a5f5 0%,#2196f3 100%)}
.btn-share{background:linear-gradient(180deg,#ffa726 0%,#ff9800 100%)}

/* 聊天框 */
.chat{background:#fff;border-radius:10px;padding:10px;margin-top:15px;max-height:150px;overflow-y:auto;box-shadow:0 1px 4px rgba(0,0,0,0.08)}
.chat-msg{padding:8px 12px;margin:6px 0;background:#f5f5f5;border-radius:6px;font-size:13px;color:#333}
.chat-msg.system{background:linear-gradient(180deg,#ffcdd2 0%,#ef9a9a 100%);color:#c62828;font-weight:500}

/* 进度条 */
.progress-bar{width:100%;height:8px;background:#e0e0e0;border-radius:4px;margin:15px 0;overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,0.1)}
.progress{height:100%;background:linear-gradient(90deg,#81c784 0%,#66bb6a 100%);transition:width 0.3s}

/* 控制按钮组 */
.control-bar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:15px;padding-top:12px;border-top:1px solid #e0e0e0}
.control-btn{padding:10px 16px;background:linear-gradient(180deg,#81c784 0%,#66bb6a 100%);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;box-shadow:0 2px 4px rgba(0,0,0,0.15);transition:all 0.15s}
.control-btn:hover{background:linear-gradient(180deg,#66bb6a 0%,#4caf50 100%);box-shadow:0 3px 6px rgba(0,0,0,0.2)}
.control-btn:active{transform:scale(0.98);box-shadow:0 1px 2px rgba(0,0,0,0.1)}
.control-btn:disabled{background:#ccc;cursor:not-allowed;transform:none;box-shadow:none}

/* 信息列表 */
.info-list{font-size:14px;color:#666;line-height:2}
.info-list strong{color:#1a1a1a;font-weight:600}

/* 着法列表 */
.moves{max-height:200px;overflow-y:auto;background:#f8f8f8;padding:12px;border-radius:8px;font-size:12px;line-height:1.8}
.move-item{display:inline-block;margin:3px 6px;padding:4px 8px;background:#fff;border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,0.08)}