/* ============================================================
   文件：style.css
   作用：广州地铁大富翁 - 全局样式表
   说明：将所有视觉展现、布局、动画从 HTML 中抽离，便于独立维护和换肤
   ============================================================ */

/* ------------------------------------------------------------
   1. 全局变量与核心重置 (Reset & Variables)
   ------------------------------------------------------------ */
:root {
    --bg-color: #121212;                  /* 游戏主背景色（深黑） */
    --panel-bg: rgba(28, 28, 28, 0.98);   /* 控制面板半透明背景 */
    --accent: #009b4c;                    /* 广州地铁经典绿色主调 */
    --highlight: #ffcc00;                 /* 黄金高亮色（用于按钮、核心提示） */
    --danger: #ff4444;                    /* 警告/破产/危险状态红 */
}

body { 
    margin: 0; 
    background: var(--bg-color); 
    font-family: 'Microsoft YaHei', -apple-system, sans-serif; 
    color: white; 
    overflow: hidden;                     /* 禁止浏览器自带滚动条，全屏完全由游戏接管 */
    touch-action: none;                   /* 禁用浏览器默认手势，防止移动端缩放冲突 */
    user-select: none;                    /* 阻止玩家误触导致文本被选中，影响体验 */
    -webkit-user-select: none; 
}

/* ------------------------------------------------------------
   2. 游戏流程全屏界面 UI (Game Flow Screens)
   ------------------------------------------------------------ */
/* 适用于大厅、选角、转盘、结算等全屏覆盖的纯色背景界面 */
.screen { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    background: var(--bg-color); 
    z-index: 100; 
    transition: opacity 0.4s;              /* 界面切换时的淡入淡出动画 */
}

/* 隐藏界面的工具类：配合透明度和指针事件禁用，防止挡住底层交互 */
.hidden { 
    opacity: 0; 
    pointer-events: none; 
    z-index: -1; 
}

h1, h2 { 
    color: var(--highlight); 
    text-align: center; 
    text-shadow: 0 2px 5px black;         /* 加深文字阴影，使标题在暗色背景下更有立体感 */
}

/* 游戏通用圆角渐变按钮 */
.btn { 
    background: linear-gradient(135deg, #009b4c, #007a3b); /* 翠绿到深绿渐变 */
    color: white; 
    border: none; 
    padding: 12px 32px; 
    font-size: 18px; 
    cursor: pointer; 
    border-radius: 30px; 
    margin: 10px; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.4); 
    transition: transform 0.1s; 
}

.btn:active { 
    transform: scale(0.95);               /* 点击时轻微缩小，提供极佳的按压物理反馈 */
}

.btn:disabled { 
    background: #555; 
    filter: grayscale(1);                 /* 禁用时变成灰色且不可点击 */
    cursor: not-allowed; 
}

/* 大厅房间输入框 */
.lobby-input { 
    padding: 15px; 
    border-radius: 30px; 
    border: none; 
    font-size: 18px; 
    text-align: center; 
    width: 60%; 
    margin-bottom: 20px; 
    outline: none; 
}

/* ------------------------------------------------------------
   3. 网格选择器与卡片组件 (Grid Select & Cards)
   ------------------------------------------------------------ */
/* 适用于模式选择、身份选择的 2x2 或响应式双列布局 */
.grid-select { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 15px; 
    max-width: 600px; 
    padding: 10px; 
    width: 90%; 
}

/* 可点击的选择卡片基础样式 */
.select-card { 
    background: #333; 
    padding: 15px; 
    border-radius: 12px; 
    border: 2px solid #444; 
    text-align: center; 
    cursor: pointer; 
    transition: 0.2s; 
    position: relative; 
}

/* 选中状态：边框变高亮，并带有微弱的金色发光特效 */
.select-card.selected { 
    border-color: var(--highlight); 
    background: #444; 
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.2); 
}

/* 房间内其他玩家已选/抢占的身份置灰并禁用交互 */
.select-card.taken { 
    opacity: 0.5; 
    pointer-events: none; 
    filter: grayscale(1); 
}

/* 卡片右上角小标签（如：“已选”提示） */
.tag { 
    font-size: 10px; 
    background: #000; 
    padding: 2px 5px; 
    border-radius: 3px; 
    position: absolute; 
    top: 5px; 
    right: 5px; 
}

/* ------------------------------------------------------------
   4. 命运大转盘组件 (Fortune Wheel)
   ------------------------------------------------------------ */
#wheel-wrapper { 
    position: relative; 
    width: 280px; 
    height: 280px; 
    margin: 30px; 
}

/* 圆形转盘主体，利用 CSS transition 实现顺滑减速盘旋效果 */
#wheel { 
    width: 100%; 
    height: 100%; 
    border-radius: 50%; 
    border: 6px solid #eee; 
    position: relative; 
    overflow: hidden; 
    background: #222; 
    transition: transform 3s cubic-bezier(0.1, 0.7, 0.1, 1); /* 贝塞尔曲线：前快后慢 */
}

/* 转盘扇区文字的定位基准点 */
.wheel-label { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    width: 0; 
    height: 0; 
    pointer-events: none; 
}

/* 转盘顶部的正三角黄金指针 */
#wheel-pointer { 
    position: absolute; 
    top: -15px; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 0; 
    height: 0; 
    border-left: 12px solid transparent; 
    border-right: 12px solid transparent; 
    border-top: 25px solid var(--highlight); 
    z-index: 10; 
    filter: drop-shadow(0 2px 2px black); /* 给指针加一层阴影，使其更具悬浮感 */
}

/* ------------------------------------------------------------
   5. 地图层与 SVG 渲染样式 (Map & SVG Elements)
   ------------------------------------------------------------ */
/* 视窗容器：承载整个庞大的 SVG 地铁图 */
#game-container { 
    width: 100vw; 
    height: 100vh; 
    background: #1a1a1a; 
    cursor: grab;                         /* 未拖拽时鼠标显示为手掌形状 */
    overflow: hidden; 
    position: relative; 
    touch-action: none; 
}

/* 地图根节点：缩放和位移（Pan & Zoom）的核心作用目标 */
#map-root { 
    transform-origin: 0 0; 
    will-change: transform;               /* 告诉浏览器该元素经常变动，开启 GPU 硬件加速 */
    -webkit-transform: translateZ(0); 
    transform: translateZ(0); 
}

#metro-svg { 
    pointer-events: none;                 /* 防止 SVG 视窗本身阻挡鼠标点击事件 */
} 

/* SVG 地铁线路轨迹基础样式 */
.metro-line { 
    fill: none; 
    stroke-width: 8;                      /* 线路粗细 */
    stroke-linecap: round;                /* 线条两端采用圆头，过渡更自然 */
    stroke-linejoin: round;               /* 转折处平滑处理 */
    opacity: 0.8; 
}

/* 包含圆形车站和文字的 SVG 组合容器 */
.station-group { 
    cursor: pointer; 
    transition: opacity 0.3s; 
    pointer-events: auto;                 /* 明确允许接收鼠标点击事件 */
}

/* 普通未购买站点的空心小圆点样式 */
.station-circle { 
    fill: #fff; 
    stroke: #333; 
    stroke-width: 2; 
    r: 5; 
    transition: all 0.2s; 
}

/* 换乘大站的默认圆形规格（稍大一些） */
.station-circle.transfer { 
    r: 8; 
    stroke-width: 3; 
}

/* 地铁站名文字样式 */
.station-label { 
    font-size: 11px; 
    fill: #ddd; 
    font-weight: bold; 
    text-shadow: 1px 1px 2px #000;       /* 黑影描边，防止站名在亮色线路上看不清 */
    pointer-events: none; 
    user-select: none; 
}

/* 已被玩家买下的站点圆形外观（优先级通常由JS内联样式进一步细化） */
.station-circle.owned { 
    stroke-width: 6; 
    stroke-opacity: 0.8; 
}

/* ------------------------------------------------------------
   6. 动态可达目的地高亮与脉冲动画 (Highlights & Keyframes)
   ------------------------------------------------------------ */
/* 玩家掷骰子后，可供点击落脚的车站高亮外发光动效 */
.station-group.target-highlight .station-circle { 
    stroke: white; 
    stroke-width: 4; 
    opacity: 1; 
    fill: #ffcc00; 
    r: 15px;                              /* 高亮时强制放大圆点 */
    animation: pulse 1s infinite;         /* 呼吸灯效果 */
    transform-box: fill-box; 
    transform-origin: center;
}

/* 圆点呼吸缩放核心动画 */
@keyframes pulse { 
    0% { transform: scale(1); } 
    50% { transform: scale(1.2); } 
    100% { transform: scale(1); } 
}

/* ------------------------------------------------------------
   7. 游戏标记：玩家棋子与路障 (Tokens & Roadblocks)
   ------------------------------------------------------------ */
/* 代表玩家当前所在位置的 SVG 棋子小圆圈 */
.player-token { 
    stroke: #fff; 
    stroke-width: 2; 
    pointer-events: none; 
    z-index: 50; 
    transition: all 0.3s;                 /* 玩家走路时的丝滑移动过渡 */
}

/* emoji 路障图标的对齐与排版样式 */
.roadblock-icon { 
    font-size: 20px; 
    text-anchor: middle; 
    pointer-events: none; 
    text-shadow: 0 2px 4px black; 
}

/* ------------------------------------------------------------
   8. 底部游戏控制中心面板 (UI Control Panel)
   ------------------------------------------------------------ */
#ui-panel { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    background: var(--panel-bg); 
    padding: 10px 15px 20px 15px; 
    border-top: 1px solid #444; 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    z-index: 90; 
    backdrop-filter: blur(10px);          /* iOS/高级浏览器毛玻璃滤镜特效 */
    -webkit-backdrop-filter: blur(10px); 
    box-shadow: 0 -5px 20px rgba(0,0,0,0.5); 
    box-sizing: border-box; 
}

/* 控制台底部的操作排版（提示文字与骰子区域两端对齐） */
#controls-row { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
}

/* 左侧状态/引导流进程核心文字提示 */
#ui-tip { 
    flex: 1; 
    color: var(--highlight); 
    font-size: 14px; 
    font-weight: bold; 
    text-align: left; 
    padding-left: 5px; 
}

/* 右侧骰子模块（包含点数盒子和掷按钮） */
#dice-group { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
}

/* 3D白色立体圆角骰子展示盒 */
#dice-box { 
    width: 50px; 
    height: 50px; 
    background: white; 
    color: black; 
    border-radius: 10px; 
    font-size: 28px; 
    font-weight: bold; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2), 0 4px 8px rgba(0,0,0,0.3); 
}

#roll-btn { 
    margin: 0; 
    padding: 10px 24px; 
    font-size: 16px; 
}

/* ------------------------------------------------------------
   9. 资产状态卡片横廊 (Player Info Row)
   ------------------------------------------------------------ */
/* 承载全场玩家状态卡片的横向滚动条区域 */
#players-row { 
    display: flex; 
    gap: 10px; 
    width: 100%; 
    overflow-x: auto;                     /* 玩家过多时允许横向滑动查看 */
    padding: 5px 2px; 
    scrollbar-width: none;                /* 隐藏火狐浏览器滚动条 */
}
#players-row::-webkit-scrollbar { 
    display: none;                        /* 隐藏谷歌/Safari浏览器滚动条，保持极致整洁 */
}

/* 单个玩家资产卡片 */
.p-card { 
    flex: 0 0 auto; 
    width: 90px; 
    background: #2a2a2a; 
    border: 2px solid #444; 
    border-radius: 10px; 
    padding: 8px; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    transition: all 0.3s; 
    opacity: 0.7; 
}

/* 当前正在操作/属于其回合的玩家卡片高亮放大展示 */
.p-card.active-turn { 
    border-color: var(--highlight); 
    background: #3a3a3a; 
    transform: scale(1.05); 
    opacity: 1; 
    box-shadow: 0 5px 15px rgba(255, 204, 0, 0.2); 
    z-index: 2; 
}

/* 破产出局的玩家卡片完全黑白化并调低透明度 */
.p-card.bankrupt { 
    filter: grayscale(1); 
    opacity: 0.3; 
    border-color: #555; 
}

.p-name { 
    font-size: 13px; 
    font-weight: bold; 
    margin-bottom: 4px; 
    display: flex; 
    justify-content: space-between; 
}

.p-money { 
    font-size: 14px; 
    color: var(--highlight); 
    font-family: monospace;              /* 等宽字体让资金数字增减闪烁时排版不抖动 */
    font-weight: bold; 
}

.p-station { 
    font-size: 10px; 
    color: #aaa; 
    margin-top: 4px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;             /* 站名过长时自动缩略为三个点，防止撑爆卡片 */
}

.p-status { 
    font-size: 10px; 
    color: var(--danger); 
    font-weight: bold; 
    height: 14px; 
}

/* ------------------------------------------------------------
   10. 地图辅助悬浮按钮 (Floating Control Action Buttons)
   ------------------------------------------------------------ */
/* 右侧纵向排列的缩放按钮组 */
#zoom-controls { 
    position: fixed; 
    bottom: 180px; 
    right: 15px; 
    z-index: 85; 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
}

.zoom-btn { 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    background: rgba(0,0,0,0.6); 
    color: white; 
    border: 1px solid #555; 
    font-size: 20px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    backdrop-filter: blur(4px); 
    cursor: pointer; 
}

/* 左下角炫彩圆形背包/道具按钮 */
#item-btn { 
    position: fixed; 
    bottom: 180px; 
    left: 15px; 
    z-index: 95; 
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    background: linear-gradient(135deg, #6a11cb, #2575fc); /* 紫蓝高亮渐变 */
    color: white; 
    border: 2px solid white; 
    font-size: 24px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.5); 
    cursor: pointer; 
}
#item-btn:active { transform: scale(0.9); }

/* 房主专用紧急解除卡死红按钮 */
#rescue-btn { 
    position: fixed; 
    bottom: 250px; 
    left: 15px; 
    z-index: 95; 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    background: #ff4444; 
    color: white; 
    border: 2px solid white; 
    font-size: 20px; 
    display: none;                        /* 默认隐藏，仅在JS判断为房主时赋予flex显示 */
    align-items: center; 
    justify-content: center; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.5); 
    cursor: pointer; 
}

/* ------------------------------------------------------------
   11. 系统全局通知弹窗与道具背包列表 (Modals & Popups)
   ------------------------------------------------------------ */
/* 黑色半透明全屏遮罩层 */
#modal-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.85); 
    z-index: 199; 
    display: none;                        /* 由游戏进程控制显示和隐藏 */
}

/* 大富翁命运/购买地产/提示通用居中卡片弹窗 */
#modal { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    background: #2d2d2d; 
    color: white; 
    padding: 25px; 
    width: 85%; 
    max-width: 360px; 
    border-radius: 16px; 
    text-align: center; 
    z-index: 200; 
    display: none; 
    border: 1px solid #555; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.8); 
}

/* 背包道具纵向列表容器 */
.item-list { 
    text-align: left; 
    max-height: 300px; 
    overflow-y: auto; 
}

/* 道具背包里的单行道具行排版 */
.item-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    background: #333; 
    padding: 10px; 
    margin-bottom: 8px; 
    border-radius: 8px; 
}

/* 道具行右侧的明黄使用按钮 */
.item-use-btn { 
    background: var(--highlight); 
    color: black; 
    border: none; 
    padding: 5px 12px; 
    border-radius: 15px; 
    font-weight: bold; 
    font-size: 12px; 
}

#line-legend {
    position: fixed; 
    top: 15px; 
    left: 15px; 
    background: rgba(30,30,30,0.85); 
    padding: 10px 15px; 
    border-radius: 12px; 
    z-index: 85; 
    border: 1px solid #555; 
    backdrop-filter: blur(5px); 
    pointer-events: none;
}


/* ------------------------------------------------------------
   12. 背景音乐控制按钮
   ------------------------------------------------------------ */
#music-btn {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 95;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: 1px solid #555;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    cursor: pointer;
    transition: all 0.3s;
}

/* 静音状态下，按钮变红并略微透明 */
#music-btn.muted {
    background: rgba(255, 68, 68, 0.8);
    border-color: rgba(255, 255, 255, 0.5);
}