:root {
    /* 玩家颜色变量 - 低饱和度扁平色彩 */
    --player-1-color: #a6d8b7;
    /* 玩家1：薄荷绿 */
    --player-2-color: #ecbd99;
    /* 玩家2：浅橘色 */
    --player-3-color: #afccea;
    /* 玩家3：天蓝色 */
    --player-4-color: #f7a099;
    /* 玩家4：浅红色 */

    /* UI元素统一颜色变量 */
    --ui-default-color: rgba(56, 49, 81, 0.7);
    --ui-hover-color: rgba(59, 52, 84, 0.9);

    /* 棋子淡色填充颜色变量 */
    --player-1-fill: #d4ede3;
    --player-2-fill: #f5dcc8;
    --player-3-fill: #dce8f5;
    --player-4-fill: #fcc9c6;

    /* 统计表格专用：极淡色背景变量 */
    --player-1-stats-bg: #e6f5ec;
    --player-2-stats-bg: #f9ede3;
    --player-3-stats-bg: #e9f2fb;
    --player-4-stats-bg: #fdf0ef;

    --player-1-border: #93c8b2;
    --player-2-border: #e9b489;
    --player-3-border: #a3bfdc;
    --player-4-border: #dd9793;
    /* 轨道颜色变量 - 深色线条 */
    --track-primary: #3d3530;
    --track-secondary: #5c534e;
    --track-accent: #2d241f;
    --track-highlight: #1a1614;
    /* 背景颜色变量 - 米色系 */
    --bg-light-1: #f5f2ed;
    --bg-light-2: #ebe8e3;

    /* 透明度变量 */
    --border-opacity-min: 0.5;
    --border-opacity-max: 1;

    /* 边框圆角变量 */
    --radius-base: 8px;
    --radius-full: 50%;

    /* 边框颜色变量 - 深色线条 */
    --border-light: rgba(61, 53, 45, 0.9);
    --border-medium: rgba(61, 53, 45, 0.6);
    --border-soft: rgba(61, 53, 45, 0.4);
    --border-faint: rgba(61, 53, 45, 0.3);
    --border-very-faint: rgba(61, 53, 45, 0.2);
    --border-almost-none: rgba(61, 53, 45, 0.15);

    /* 背景颜色变量 - 浅色背景 */
    --bg-medium: rgba(255, 253, 250, 1);
    --bg-soft: rgba(255, 253, 250, 0.6);
    --bg-faint: rgba(255, 253, 250, 0.4);
    --bg-very-faint: rgba(255, 253, 250, 0.3);
    --bg-almost-none: rgba(0, 0, 0, 0.1);
    --font-faint: rgba(92, 83, 78, 1);

    /* 模态框阴影 - 简约阴影 */
    --modal-shadow: 0 2px 8px rgba(92, 83, 78, 0.15);
}

* {
    -webkit-user-select: none;
    user-select: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

body {
    margin: 0;
    padding: 0px;
    background: var(--bg-light-1);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    color: #2d241f;
}

/* 大屏优化：仅游戏页在宽高充足时垂直居中，避免全屏时整体偏上 */
@media (min-width: 1261px) and (min-height: 860px) {
    body.game-page {
        align-items: center;
    }
}




@keyframes dicePenaltyTremble {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(2px);
    }

    50% {
        transform: translateX(-2px);
    }

    75% {
        transform: translateX(2px);
    }
}

@keyframes overflow-pulse {

    0%,
    100% {
        transform: translateX(-50%) scale(0.8);
        opacity: 0.6;
    }

    50% {
        transform: translateX(-50%) scale(1.2);
        opacity: 0.9;
    }
}

@keyframes particle-rise {
    0% {
        bottom: 0;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        bottom: 60px;
        opacity: 0;
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

@keyframes skillPanelSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mysteryBoxGlow {

    0%,
    100% {
        scale: 1;
        opacity: 1;
    }

    50% {
        scale: 1.1;
        opacity: 0.8;
    }
}

@keyframes energyGainFloat {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.5);
    }

    20% {
        opacity: 1;
        transform: translateY(0) scale(1.2);
    }

    80% {
        opacity: 1;
        transform: translateY(-10px) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-30px) scale(0.8);
    }
}

@keyframes PanelSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes waveDots {

    0%,
    60%,
    100% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-10px);
    }
}

@keyframes diceFlash {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

@keyframes diceShake {

    0%,
    100% {
        transform: translateX(0);
    }

    12.5%,
    37.5%,
    62.5% {
        transform: translateX(3px);
    }

    25%,
    50%,
    75% {
        transform: translateX(-3px);
    }
}

@keyframes chessGlow {
    0% {
        opacity: 0.8;
    }

    100% {
        opacity: 1;
    }
}

@keyframes startAreaGlow {
    0% {
        opacity: 0.8;
    }

    100% {
        opacity: 1;
    }
}

@keyframes glitch-flicker {

    0%,
    19%,
    21%,
    23%,
    25%,
    54%,
    56%,
    100% {
        opacity: 1;
    }

    20%,
    24%,
    55% {
        opacity: 0.7;
    }
}

@keyframes glitch-layer-1 {
    0% {
        transform: translate(0);
        clip-path: inset(0 0 0 0);
        opacity: 0;
    }

    5% {
        transform: translate(-4px, 2px);
        clip-path: inset(40% 0 35% 0);
        opacity: 0.9;
    }

    10% {
        transform: translate(0);
        clip-path: inset(0 0 0 0);
        opacity: 0;
    }

    15% {
        transform: translate(3px, -2px);
        clip-path: inset(60% 0 15% 0);
        opacity: 0.8;
    }

    20% {
        transform: translate(0);
        opacity: 0;
    }

    30% {
        transform: translate(-2px, 3px);
        clip-path: inset(10% 0 70% 0);
        opacity: 0.85;
    }

    35%,
    100% {
        transform: translate(0);
        clip-path: inset(0 0 0 0);
        opacity: 0;
    }
}

@keyframes glitch-layer-2 {
    0% {
        transform: translate(0);
        clip-path: inset(0 0 0 0);
        opacity: 0;
    }

    8% {
        transform: translate(3px, -3px);
        clip-path: inset(25% 0 50% 0);
        opacity: 0.8;
    }

    12% {
        transform: translate(0);
        opacity: 0;
    }

    18% {
        transform: translate(-3px, 2px);
        clip-path: inset(75% 0 10% 0);
        opacity: 0.9;
    }

    25% {
        transform: translate(0);
        opacity: 0;
    }

    35% {
        transform: translate(4px, -1px);
        clip-path: inset(5% 0 80% 0);
        opacity: 0.7;
    }

    40%,
    100% {
        transform: translate(0);
        clip-path: inset(0 0 0 0);
        opacity: 0;
    }
}

@keyframes gradientShift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes diceTilt {
    0% {
        transform: translateY(-50%) rotate(0deg);
    }

    50% {
        transform: translateY(-50%) rotate(20deg);
    }

    100% {
        transform: translateY(-50%) rotate(0deg);
    }
}

@keyframes chatMessageFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes chatMessageFadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@keyframes fadeInOutCenter {
    0% {
        opacity: 0;
        transform: translate(-50%, -10px);
    }

    10% {
        opacity: 1;
        transform: translate(-50%, 0);
    }

    80% {
        opacity: 1;
        transform: translate(-50%, 0);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -10px);
    }
}

@keyframes fadeInOutCenter {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }

    10% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    80% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
}

.is-hidden {
    display: none !important;
}

.players-info {
    position: absolute;
    width: 120%;
    height: 80%;
    pointer-events: none;
    z-index: 10;
}

.board-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
}

.player-info {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: all;
}

.player-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.public-room-list-head {
    display: grid;
    grid-template-columns: 1.6fr 0.7fr 0.7fr 0.7fr 0.9fr;
    gap: 10px;
    padding: 0 14px;
    margin-bottom: 8px;
    color: var(--font-faint);
    font-size: 12px;
    font-weight: bold;
}

.public-room-list-head .head-col:last-child {
    text-align: right;
}

.public-room-list-head .head-col {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.defeat-counts {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.defeat-count {
    width: 30px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: none;
}

/* 为不同玩家的击败次数和积分获得设置颜色 */
.player-1-defeat,
.energy-gain-text.player-1 {
    color: var(--player-1-color);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.player-2-defeat,
.energy-gain-text.player-2 {
    color: var(--player-2-color);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.player-3-defeat,
.energy-gain-text.player-3 {
    color: var(--player-3-color);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.player-4-defeat,
.energy-gain-text.player-4 {
    color: var(--player-4-color);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* 积分条基础样式保持不变 */
.energy-bar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
    padding: 12px 0 0 0;
}

/* 玩家基础位置（桌面端使用） */
.player-info.pos-tr {
    top: 10%;
    right: 10%;
}

.player-info.pos-br {
    bottom: 10%;
    right: 10%;
}

.player-info.pos-bl {
    bottom: 10%;
    left: 10%;
}

.player-info.pos-tl {
    top: 10%;
    left: 10%;
}

/* 桌面端排版顺序 - 使用 flex order 避免 JS 修改 DOM 结构 */
.players-info .pos-tr .defeat-counts,
.players-info .pos-br .defeat-counts {
    order: 1;
}

.players-info .pos-tr .player-main,
.players-info .pos-br .player-main {
    order: 2;
}

.players-info .pos-tr .energy-bar-wrapper,
.players-info .pos-br .energy-bar-wrapper {
    order: 3;
}

.players-info .pos-tl .energy-bar-wrapper,
.players-info .pos-bl .energy-bar-wrapper {
    order: 1;
}

.players-info .pos-tl .player-main,
.players-info .pos-bl .player-main {
    order: 2;
}

.players-info .pos-tl .defeat-counts,
.players-info .pos-bl .defeat-counts {
    order: 3;
}

.energy-bar-container {
    position: relative;
    width: 10px;
    height: 60px;
    background: transparent;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    border: 2px solid var(--current-player-color);
    z-index: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

.energy-bar-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0%;
    border-radius: 2px;
    transition: height 0.5s ease;
}

/* 玩家颜色 - 简约风格 */
.energy-bar-fill.player-1 {
    background: var(--player-1-color);
}

.energy-bar-fill.player-2 {
    background: var(--player-2-color);
}

.energy-bar-fill.player-3 {
    background: var(--player-3-color);
}

.energy-bar-fill.player-4 {
    background: var(--player-4-color);
}

/* 积分数值显示 */
.energy-value {
    font-size: 10px;
    color: #2d241f;
    text-align: center;
    font-weight: bold;
    text-shadow: none;
    width: 24px;
    display: inline-block;
}

.energy-particle {
    width: 5px;
    height: 5px;
    border-radius: var(--radius-full);
    position: absolute;
    background-color: var(--energy-particle-color, rgba(255, 255, 255, 0.9));
    transform: scale(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.4);
}

.energy-particle-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

.player-avatar {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-full);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.player-emoji {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.player-emoji svg {
    width: 100%;
    height: 100%;
}

.multiplayer-emoji {
    width: 80%;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
}

.multiplayer-emoji svg {
    width: 100%;
    height: 100%;
    stroke-width: 0.5;
}

.player-name {
    font-size: 14px;
    font-weight: bold;
    text-shadow: none;
    color: #2d241f;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 90px;
}

.player-1-avatar {
    background: var(--player-1-color);
    border: 2px solid var(--player-1-border);
    color: white;
    /* 默认状态下不显示阴影 */
}

.player-2-avatar {
    background: var(--player-2-color);
    border: 2px solid var(--player-2-border);
    color: white;
}

.player-3-avatar {
    background: var(--player-3-color);
    border: 2px solid var(--player-3-border);
    color: white;
}

.player-4-avatar {
    background: var(--player-4-color);
    border: 2px solid var(--player-4-border);
    color: white;
}

/* 当前玩家头像发光效果 */
.player-avatar-active {
    transform: scale(1.1);
}

/* 各玩家激活状态的发光效果 */
.player-1-avatar.player-avatar-active {
    transform: scale(1.1);
}

.player-2-avatar.player-avatar-active {
    transform: scale(1.1);
}

.player-3-avatar.player-avatar-active {
    transform: scale(1.1);
}

.player-4-avatar.player-avatar-active {
    transform: scale(1.1);
}

/* 桌面端默认样式 */
.players-top,
.players-bottom {
    display: none;
}

/* 游戏控制区域 */
.game-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 101;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    height: 100px;
    padding: 0 20px;
    box-sizing: border-box;
}

.game-controls-left {
    flex: 0 0 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.game-controls-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 100px;
    position: relative;
}

.game-controls-right {
    flex: 0 0 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-icon {
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 4px;
    color: var(--ui-default-color);
}

.chat-icon:hover {
    opacity: 1;
    transform: scale(1.1);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
    color: var(--ui-hover-color);
}

/* 闪电模式图标 */
.lightning-icon {
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px;
    padding: 4px;
    color: var(--ui-default-color);
}

.lightning-icon:hover {
    transform: scale(1.1);
}

.lightning-btn.active .lightning-icon {
    color: #f1c40f;
}

/* 道具图标 */
.skill-icon {
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 4px;
    color: var(--ui-default-color);
}

.skill-icon:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
    color: var(--ui-hover-color);
}

/* 道具按钮容器 */
.skill-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-base);
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 道具按钮提示动画 */
@keyframes skill-btn-q-bounce {
    0%, 100% { transform: scale(1); }
    10% { transform: scale(1.15, 0.85); }
    20% { transform: scale(0.85, 1.15); }
    30% { transform: scale(1.1, 0.9); }
    40% { transform: scale(0.95, 1.05); }
    50% { transform: scale(1.02, 0.98); }
}

.skill-btn-hint {
    animation: skill-btn-q-bounce 1s ease-in-out;
}

.skill-panel {
    position: absolute;
    bottom: 50px;
    right: -2px;
    width: 400px;
    background: var(--bg-light-1);
    border: 2px solid var(--border-medium);
    border-radius: 12px;
    box-shadow: var(--modal-shadow);
    display: none;
    z-index: 1000;
}

.skill-panel.show {
    display: block;
    animation: skillPanelSlideIn 0.2s ease-out;
}

/* 骰子位置的积分获得数值样式 */
.energy-gain-text {
    font-size: 32px;
    color: var(--text-color, #FFD700);
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    animation: energyGainFloat 1s ease-out;
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 90px;
    width: 120px;
    margin: 20px 0;
    padding: 8px;
    box-sizing: border-box;
    white-space: nowrap;
}

.energy-gain-text svg {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

/* 道具面板头部 */
.skill-panel-header {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    background: rgba(255, 255, 255, 0.03);
}

.skill-panel-header h4 {
    margin: 0;
    color: #2d241f;
    font-size: 16px;
    font-weight: bold;
    text-shadow: none;
}

.skill-energy-hint {
    font-size: 11px;
    color: var(--font-faint);
    text-align: center;
    font-style: italic;
}

.skill-energy-display {
    font-size: 14px;
    color: #2d241f;
    font-weight: bold;
    text-shadow: none;
}

/* 道具面板内容 */
.skill-panel-content {
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-height: 350px;
    overflow-y: auto;
}

/* 道具项 */
.skill-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid var(--border-medium);
    border-radius: var(--radius-base);
    cursor: pointer;
    transition: all 0.3s ease;
    transform: translateZ(0);
    will-change: opacity, transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.skill-item:hover {
    border-color: var(--border-light);
    transform: translateY(-2px);
}

.skill-item.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
    filter: none;
}

.skill-item.active {
    border-color: rgba(76, 175, 80, 0.8);
    background: rgba(76, 175, 80, 0.08);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 道具图标容器 */
.skill-icon-container {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--border-faint);
    border-radius: var(--radius-base);
    color: #2d241f;
    box-shadow: none;
}

.skill-item:hover .skill-icon-container {
    border-color: var(--border-medium);
    box-shadow: 0 1px 2px var(--border-faint);
}

/* 道具信息 */
.skill-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* 确保在移动端浏览器下能够正确渲染 */
    min-width: 0;
    transform: translateZ(0);
}

.skill-name {
    font-size: 16px;
    font-weight: bold;
    color: #2d241f;
    text-shadow: none;
}

.skill-desc {
    font-size: 12px;
    color: #2d241f;
    line-height: 1.4;
}

.skill-cost {
    font-size: 11px;
    color: rgba(45, 36, 31, 0.75);
    font-weight: bold;
    text-shadow: none;
}

/* 道具面板滚动条 */
.skill-panel-content::-webkit-scrollbar {
    width: 6px;
}

.skill-panel-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.skill-panel-content::-webkit-scrollbar-thumb {
    background: var(--border-soft);
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.skill-panel-content::-webkit-scrollbar-thumb:hover {
    background: var(--border-soft);
    box-shadow: none;
}

/* 骰子图标 */
.dice-icon {
    font-size: 75px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: rgba(60, 52, 48, 0.85);
    position: relative;
    z-index: 3;
    margin: 20px 0;
    line-height: 1;
    height: 90px;
    width: 120px;
    box-sizing: border-box;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* 骰子未投掷状态 */
.dice-icon.not-rolled {
    color: var(--ui-default-color);
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.2));
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
}

#mysteryBoxIcon svg,
#teleportIcon svg {
    width: 65px;
    height: 65px;
}

.dice-icon:hover {
    transform: scale(1.2);
    color: var(--ui-hover-color);
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3));
    text-shadow: 0 2px 6px rgba(255, 255, 255, 0.15);
}

.dice-icon:active {
    transform: scale(0.95);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.05);
}

/* 骰子禁用状态 */
.dice-icon.disabled {
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.05);
    opacity: 0.6;
}

.dice-icon.disabled:hover {
    cursor: not-allowed;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.05);
}

/* 遥控骰子特效*/
.dice-icon.remote-dice {
    color: #5bd0d6 !important;
    text-shadow: 0 2px 2px rgba(86, 86, 86, 0.5) !important;
    scale: 1.05;
}

/* 骰子已投掷状态 - 玩家颜色 */
.dice-icon.rolled.player-1 {
    color: #35ae61;
    text-shadow: 0 2px 2px rgba(255, 255, 255, 0.15);
}

.dice-icon.rolled.player-2 {
    color: #dd7022;
    text-shadow: 0 2px 2px rgba(255, 255, 255, 0.15);
}

.dice-icon.rolled.player-3 {
    color: #4777c5;
    text-shadow: 0 2px 2px rgba(255, 255, 255, 0.15);
}

.dice-icon.rolled.player-4 {
    color: #fc6666;
    text-shadow: 0 2px 2px rgba(255, 255, 255, 0.15);
}

/* 多面骰子显示样式 */
.polyhedral-dice-display {
    position: relative;
    z-index: 3;
    margin: 20px auto;
    height: 90px;
    width: 120px;
    overflow: hidden;
    font-size: 40px;
    font-weight: bold;
    color: var(--ui-default-color);
    background: transparent;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.polyhedral-dice-display .reel-viewport {
    position: absolute;
    left: 35px;
    top: 20px;
    width: 50px;
    height: 50px;
    overflow: hidden;
}

.polyhedral-dice-display .reel-strip {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: transform 1s cubic-bezier(0.1, 0.7, 0.2, 1);
    will-change: transform;
}

.polyhedral-dice-display .reel-strip span {
    display: block;
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 40px;
    width: 100%;
}

.polyhedral-dice-display .final-number {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
}

.polyhedral-dice-display::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border: 4px solid currentColor;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: -1;
}

/* 多面骰子玩家颜色 */
.polyhedral-dice-display.player-1-color {
    color: var(--player-1-border);
    border-color: var(--player-1-border);
}

.polyhedral-dice-display.player-2-color {
    color: var(--player-2-border);
    border-color: var(--player-2-border);
}

.polyhedral-dice-display.player-3-color {
    color: var(--player-3-border);
    border-color: var(--player-3-border);
}

.polyhedral-dice-display.player-4-color {
    color: var(--player-4-border);
    border-color: var(--player-4-border);
}

/* 传送门图标样式 */
#teleportIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 3;
    margin: 20px 0;
    height: 90px;
    width: 120px;
    box-sizing: border-box;
    color: var(--ui-default-color);
}

#teleportIcon svg {
    width: 60px;
    height: 60px;
}

/* 传送门玩家颜色 */
#teleportIcon.player-1-border {
    color: var(--player-1-border);
}

#teleportIcon.player-2-border {
    color: var(--player-2-border);
}

#teleportIcon.player-3-border {
    color: var(--player-3-border);
}

#teleportIcon.player-4-border {
    color: var(--player-4-border);
}

/* 骰子闪烁动画 */
.dice-flashing {
    animation: diceFlash 0.15s ease-in-out infinite;
}

.dice-penalty-warning {
    color: rgba(242, 47, 47, 0.95) !important;
    animation: dicePenaltyTremble 0.9s ease-in-out infinite;
}

.pulse-animation {
    animation: pulse 1s infinite;
}

.mysteryBox-glow-animation {
    animation: mysteryBoxGlow 0.5s ease-in-out 2;
}

/* 第三次连续 6 投掷过程中的纯红色骰子样式*/
.dice-third-penalty {
    color: rgba(242, 47, 47, 0.95) !important;
}

/* 加载提示样式 */
.loading-indicator,
.pause-indicator,
.chat-input-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--ui-default-color);
    font-size: 18px;
    margin: 20px 0;
    height: 90px;
    min-height: 90px;
    width: 100%;
}

.loading-indicator,
.pause-indicator {
    display: none;
}

.chat-input-area {
    display: none;
    width: 100%;
}

.loading-text,
.pause-text {
    margin-bottom: 15px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
    min-width: 200px;
    text-align: center;
}

/* 聊天输入区域样式 */
.chat-input-container {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 2px;
    background: transparent;
    position: relative;
    width: 100%;
    max-width: 220px;
}

.chat-input {
    flex: 1;
    padding: 5px 10px;
    border: none;
    border-radius: 20px;
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    min-width: 0;
}

.chat-input:focus {
    box-shadow: 0 0 2px white,
        inset 0 0 2px white;
}

.chat-input::placeholder {
    color: #a9a7a7;
}

.chat-send-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--ui-default-color);
}

.chat-send-btn svg {
    width: 100%;
    height: 100%;
}

.chat-send-btn:hover {
    scale: 1.1;
    color: var(--ui-default-color);
}

/* Emoji按钮样式 */
.emoji-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: var(--radius-full);
    margin-right: 5px;
    color: var(--ui-default-color);
}

.emoji-btn:hover {
    transform: scale(1.1);
    color: var(--ui-default-color);
    background: rgba(var(--ui-default-color-rgb), 0.1);
}

.emoji-btn svg {
    width: 100%;
    height: 100%;
}

/* Emoji选择面板样式 */
.emoji-panel {
    position: absolute;
    bottom: 50px;
    left: 0;
    width: 280px;
    max-height: 200px;
    background: rgb(245, 245, 240);
    border: 1.5px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 1000;
}

.emoji-panel.show {
    display: block;
    animation: PanelSlideIn 0.2s ease-out;
}

.emoji-panel-content {
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    max-height: 180px;
    overflow-y: auto;
}

/* 自定义滚动条 */
.emoji-panel-content::-webkit-scrollbar {
    width: 6px;
}

.emoji-panel-content::-webkit-scrollbar-track {
    background: var(--bg-almost-none);
    border-radius: 3px;
}

.emoji-panel-content::-webkit-scrollbar-thumb {
    background: var(--border-soft);
    border-radius: 3px;
}

.emoji-panel-content::-webkit-scrollbar-thumb:hover {
    background: var(--border-soft);
}

/* Emoji项样式 */
.emoji-item {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-size: 24px;
    user-select: none;
    background: transparent;
}

.emoji-item:hover {
    background: rgba(200, 195, 185, 0.3);
    transform: scale(1.15);
}

.emoji-item:active {
    transform: scale(0.95);
}

.loading-spinner {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border: 4px solid var(--border-faint);
    border-top: 4px solid var(--ui-default-color);
    border-radius: var(--radius-full);
    animation: spin 1s linear infinite;
    flex-shrink: 0;
}

/* 房间号加载动画 */
.loading-dots {
    display: inline-block;
}

.loading-dots .dot {
    display: inline-block;
    animation: waveDots 1.4s infinite ease-in-out;
    font-weight: bold;
    text-shadow: none;
}

.loading-dots .dot1 {
    animation-delay: 0s;
}

.loading-dots .dot2 {
    animation-delay: 0.2s;
}

.loading-dots .dot3 {
    animation-delay: 0.4s;
}

/* 骰子震动动画 - 表示无效点数 */
.dice-shake {
    animation: diceShake 0.5s ease-in-out;
}

/* 思考时间进度条容器 */
.thinking-progress-container {
    width: 200px;
    height: 8px;
    background: transparent;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    border: 2px solid var(--current-player-color);
    display: block;
    box-shadow: none;
    transform: translateY(-10px);
}

/* 思考时间进度条 */
.thinking-progress-bar {
    height: 110%;
    width: 100%;
    background: var(--current-player-color);
    transition: width 0.1s linear;
    position: relative;
    overflow: hidden;
}

/* 玩家颜色变量 */
.thinking-progress-container.player-1 {
    --current-player-color: var(--player-1-color);
}

.thinking-progress-container.player-2 {
    --current-player-color: var(--player-2-color);
}

.thinking-progress-container.player-3 {
    --current-player-color: var(--player-3-color);
}

.thinking-progress-container.player-4 {
    --current-player-color: var(--player-4-color);
}

/* 桌面端棋盘样式 */
#board-svg {
    width: min(600px, 75vw);
    height: min(600px, 75vw);
    min-width: 280px;
    min-height: 280px;
    z-index: 2;
}

.neon-red {
    stroke: var(--player-1-color);
    fill: none;
    filter: none;
}

.neon-green {
    stroke: var(--player-2-color);
    fill: none;
    filter: none;
}

.neon-blue {
    stroke: var(--player-3-color);
    fill: none;
    filter: none;
}

.neon-yellow {
    stroke: var(--player-4-color);
    fill: none;
    filter: none;
}

.neon-cyan {
    stroke: var(--track-primary);
    fill: none;
    filter: none;
}

.neon-magenta {
    stroke: var(--track-accent);
    fill: none;
    filter: none;
}

/* 新的语义化玩家类名 */
.player-1 {
    stroke: var(--player-1-color);
    fill: var(--player-1-color);
    color: var(--player-1-color);
    filter: none;
}

.player-2 {
    stroke: var(--player-2-color);
    fill: var(--player-2-color);
    color: var(--player-2-color);
    filter: none;
}

.player-3 {
    stroke: var(--player-3-color);
    fill: var(--player-3-color);
    color: var(--player-3-color);
    filter: none;
}

.player-4 {
    stroke: var(--player-4-color);
    fill: var(--player-4-color);
    color: var(--player-4-color);
    filter: none;
}

/* 棋子填充颜色设置 */
#board-svg use[href="#chess"].player-1 .chess-fill {
    fill: var(--player-1-fill);
}

#board-svg use[href="#chess"].player-2 .chess-fill {
    fill: var(--player-2-fill);
}

#board-svg use[href="#chess"].player-3 .chess-fill {
    fill: var(--player-3-fill);
}

#board-svg use[href="#chess"].player-4 .chess-fill {
    fill: var(--player-4-fill);
}

/* 为整个棋子添加真实的阴影 */
#board-svg use[href="#chess"].player-1 {
    stroke: #7fb089;
    /* 更深的薄荷绿 */
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

#board-svg use[href="#chess"].player-2 {
    stroke: #d4a574;
    /* 更深的橘色 */
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

#board-svg use[href="#chess"].player-3 {
    stroke: #8fb4d4;
    /* 更深的蓝色 */
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

#board-svg use[href="#chess"].player-4 {
    stroke: #e67d73;
    /* 更深的红色 */
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

/* 为到达基地的棋子（勾号）添加相同的样式 */
#board-svg use[href="#checkmark"].player-1 {
    stroke: none;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
    fill: none;
}

#board-svg use[href="#checkmark"].player-2 {
    stroke: none;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
    fill: none;
}

#board-svg use[href="#checkmark"].player-3 {
    stroke: none;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
    fill: none;
}

#board-svg use[href="#checkmark"].player-4 {
    stroke: none;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
    fill: none;
}

/* 棋子基础样式 */
#board-svg use[href="#chess"] {
    filter: drop-shadow(1px 0.5px 0.5px rgba(0, 0, 0, 0.15));
}

/* 为到达终点的棋子（半透明状态）变成纯色单色 */
#board-svg use[href="#chess"].player-1[style*="opacity: 0.5"] {
    stroke: none !important;
}

#board-svg use[href="#chess"].player-1[style*="opacity: 0.5"] .chess-fill {
    fill: var(--player-1-color) !important;
}

#board-svg use[href="#chess"].player-2[style*="opacity: 0.5"] {
    stroke: none !important;
}

#board-svg use[href="#chess"].player-2[style*="opacity: 0.5"] .chess-fill {
    fill: var(--player-2-color) !important;
}

#board-svg use[href="#chess"].player-3[style*="opacity: 0.5"] {
    stroke: none !important;
}

#board-svg use[href="#chess"].player-3[style*="opacity: 0.5"] .chess-fill {
    fill: var(--player-3-color) !important;
}

#board-svg use[href="#chess"].player-4[style*="opacity: 0.5"] {
    stroke: none !important;
}

#board-svg use[href="#chess"].player-4[style*="opacity: 0.5"] .chess-fill {
    fill: var(--player-4-color) !important;
}

.player-1 use,
.player-2 use,
.player-3 use,
.player-4 use {
    stroke: currentColor;
}

/* 轨道相关类名 */
.track-primary {
    stroke: var(--track-primary);
    fill: none;
    filter: none;
}


/* 当前玩家棋子发光效果 */
.chess-active {
    filter: none;
    animation: chessGlow 0.8s ease-in-out infinite alternate;
}

.chess-teleport-fade {
    transition: opacity 0.2s ease-out;
}

/* 传送门：源格子和目标格子高亮 */
.teleport-grid-highlight {
    color: var(--bg-light-1) !important;
}

.no-transition {
    transition: none !important;
}

.chess-transition {
    transition: all 0.3s ease-in-out;
}

/* 到达终点的棋子（勾号）样式 */
use[href="#checkmark"] {
    pointer-events: none;
}

/* 棋子颜色适配 */
.player-1 {
    color: var(--player-1-color);
    --player-border: var(--player-1-border);
}

.player-2 {
    color: var(--player-2-color);
    --player-border: var(--player-2-border);
}

.player-3 {
    color: var(--player-3-color);
    --player-border: var(--player-3-border);
}

.player-4 {
    color: var(--player-4-color);
    --player-border: var(--player-4-border);
}

/* 棋子中心飞机图标样式 */
.chess-airplane {
    opacity: var(--airplane-opacity, 0.5);
    transition: opacity 0.3s ease-in-out;
    filter: drop-shadow(8px 8px 8px rgb(66, 66, 66));
    transform: translate(16.5px, 16.5px) rotate(90deg) scale(0.018) translate(-512px, -512px);
}

.chess-stacked {
    stroke: rgba(0, 0, 0, 0.3) !important;
    stroke-width: 1.5px;
}

.chess-movable {
    --airplane-opacity: 1;
}

/* 主布局容器 */
.main-layout {
    display: flex;
    width: 100%;
    max-width: 1600px;
    gap: 15px;
    padding: 0 15px;
    box-sizing: border-box;
}

.game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-width: 300px;
    position: relative;
}

/* 控制面板 */
.control-panel {
    min-height: 600px;
    background: none;
    border: none;
    padding: 15px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 102;
}

.main-layout .control-panel {
    height: auto;
    max-height: 100vh;
    justify-content: center;
    align-items: center;
}

.control-panel-inner {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

/* 标题区域 */
.control-title {
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 10px;
    box-sizing: border-box;
    box-shadow: none;
}

.control-title h3 {
    font-size: 25px;
    font-weight: bold;
    margin: 0;
    text-align: center;
    position: relative;
    text-transform: uppercase;
    color: #2d241f;
    text-shadow: none;
}

.control-title h3::before,
.control-title h3::after {
    display: none;
}

/* 房间号显示 */
.game-room-code-display {
    text-align: center;
    font-size: 16px;
    color: #86b1c0;
    text-shadow: none;
    font-weight: bold;
    background: rgba(143, 180, 192, 0.1);
    padding: 6px 16px;
    margin: 0 10%;
    border: 2px solid #7ca4b1;
    border-radius: 20px;
    display: block;
    letter-spacing: 0.5px;
}

.game-room-code-display-column {
    display: none;
}

.game-room-label {
    font-weight: normal;
    margin-right: 5px;
}

.game-room-code {
    font-weight: bold;
    letter-spacing: 1px;
}

/* 操控区域容器 */
.control-content {
    --control-content-padding-right: 15px;
    flex: 1;
    width: 100%;
    height: 100%;
    background: none;
    border: 2.5px solid var(--border-light);
    border-radius: 15px;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
}

/* 游戏信息面板 */
.game-info-panel {
    background: var(--bg-soft);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-base);
    height: 250px;
    overflow: hidden;
    position: relative;
    max-width: 250px;
    min-width: 250px;
    box-shadow: none;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.panel-body-container {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-top: 5px;
}

.game-info-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 15px 15px 15px;
    box-sizing: border-box;
}

/* 滚动条样式 */
.game-info-content::-webkit-scrollbar {
    width: 5px;
}

.game-info-content::-webkit-scrollbar-track {
    background: transparent;
}

.game-info-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 3px;
    transition: background 0.3s ease;
}

.game-info-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.7);
}

/* 信息消息样式 */
.info-message {
    margin-bottom: 8px;
    line-height: 1.4;
    font-size: 14px;
    word-wrap: break-word;
    color: #2d241f;
}

.info-message:last-child {
    margin-bottom: 0;
}

/* 玩家文字颜色 */
.player-text.player-1 {
    color: var(--player-1-border);
    font-weight: bold;
}

.player-text.player-2 {
    color: var(--player-2-border);
    font-weight: bold;
}

.player-text.player-3 {
    color: var(--player-3-border);
    font-weight: bold;
}

.player-text.player-4 {
    color: var(--player-4-border);
    font-weight: bold;
}

/* 动作文字样式 */
.action-text {
    color: #2d241f;
}

/* 聊天消息文字样式 */
.chat-message-text {
    color: #2d241f;
    padding: 3px 4px;
    display: inline-block;
}

/* 系统消息文字样式 */
.system-message-text {
    color: #8fb4c0;
    font-weight: bold;
    font-style: italic;
}

/* 击败文字样式 */
.beat-text {
    color: #f26969;
    font-weight: bold;
    font-size: 16px;
    text-shadow: none;
}

.crash-text {
    color: #cc7777;
    font-weight: bold;
    text-shadow: none;
}

/* 移动类型样式 */
.move-type-launch {
    color: #87d687;
    font-weight: bold;
    text-shadow: none;
}

.move-type-move {
    color: #7890d4;
    font-weight: bold;
    text-shadow: none;
}

.move-type-jump {
    color: #7fc5db;
    font-weight: bold;
    text-shadow: none;
}

.move-type-fly {
    color: #de8bef;
    font-weight: bold;
    text-shadow: none;
}
.move-type-bonus {
    color: #efa0c0;
    font-weight: bold;
    text-shadow: none;
}

.finish-text {
    color: #85c594;
    font-weight: bold;
    text-shadow: none;
}

/* 叠子文字特殊颜色效果 */
.stack-text {
    color: #fbb87a;
    font-weight: bold;
    text-shadow: none;
}

/* 道具名称文字样式 */
.skill-name-text {
    color: #b878c4;
    font-weight: bold;
    text-shadow: none;
}

/* 传送距离文字样式 */
.teleport-distance-text {
    color: #2d241f;
    font-weight: bold;
    text-shadow: none;
}

/* 普通骰子点数 */
.dice-text {
    color: #2d241f;
    font-weight: bold;
}

/* 积分点数文字样式 */
.energy-value-text {
    color: #f48d89;
    font-weight: bold;
    text-shadow: none;
}



/* 特殊骰子点数（6点）、连投奖励文字*/
.dice-special,
.consecutive-bonus {
    color: #65bb9e;
    font-weight: bold;
    text-shadow: none;
}
.collision-bonus {
    color: #efa0c0;
    font-weight: bold;
    text-shadow: none;
}

.control-section,
.game-panel-section {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.index-content .control-section {
    flex: 1;
}

.control-content>.control-section:first-child {
    flex-shrink: 0;
    min-height: 0;
}

.game-control-content>.game-panel-section:first-child {
    flex-shrink: 0;
}

/* 游戏内专用控制区域容器 */
.game-control-content {
    flex: none;
    background: none;
    border: none;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* 2x2网格布局容器 */
.control-buttons-grid.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
}

/* 1x2网格布局容器 */
.control-buttons-grid.grid-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 8px;
}

.control-section:last-child,
.game-panel-section:last-child {
    margin-bottom: 0;
}

.control-section h3,
.game-panel-section h3 {
    color: #2d241f;
    margin: 0 0 3px 0;
    font-size: 19px;
    font-weight: bold;
    text-align: center;
    padding-bottom: 4px;
}

/* 信息面板头部容器 */
.info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 10px;
    border-bottom: none;
    background: linear-gradient(to right, var(--border-faint) 60%, transparent 40%) repeat-x 0 100%;
    background-size: 13px 1px;
}

.info-header h3,
.progress-header-container h3 {
    margin: 0;
    padding-bottom: 0;
    font-size: 14px;
    font-weight: 500;
    opacity: 0.6;
}

/* 面板切换按钮 */
.panel-switch-btn {
    position: static;
    /* 取消绝对定位 */
    background: transparent;
    border: 1.5px solid var(--border-light);
    border-radius: 6px;
    padding: 3px 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2d241f;
    font-size: 11px;
    /* 进一步减小字号 */
    font-weight: 500;
    box-shadow: none;
    opacity: 0.7;
}

.panel-switch-btn:hover {
    background: #f5bf60;
    color: #2d241f;
}

.panel-switch-btn:active {
    transform: scale(0.95);
}

/* 聊天信息内容容器 */
.chat-info-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 15px 15px 15px;
    box-sizing: border-box;
}

/* 聊天面板滚动条样式（与游戏信息面板一致） */
.chat-info-content::-webkit-scrollbar {
    width: 6px;
}

.chat-info-content::-webkit-scrollbar-track {
    background: var(--bg-almost-none);
    border-radius: 3px;
}

.chat-info-content::-webkit-scrollbar-thumb {
    background: var(--border-soft);
    border-radius: 3px;
}

.chat-info-content::-webkit-scrollbar-thumb:hover {
    background: var(--border-soft);
}

/* 聊天面板中的信息消息样式 */
.chat-info-content .info-message {
    margin-bottom: 8px;
    line-height: 1.4;
    font-size: 14px;
    word-wrap: break-word;
    color: #2d241f;
}

.chat-info-content .info-message:last-child {
    margin-bottom: 0;
}

/* 控制按钮样式 */
.control-btn {
    top: 20px;
    left: 20px;
    padding: 8px 10px;
    color: #2d241f;
    border: 2px solid var(--border-light);
    background: none;
    border-radius: var(--radius-base);
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: none;
}

.control-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.control-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.control-btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

.game-mode-selection {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* 通用配置面板样式 */
.config-panel {
    display: none;
    flex-direction: column;
    flex: 1;
    width: 90%;
    max-width: 500px;
    margin: 0 auto;
}

.player-config-panel,
.online-multiplayer-config,
.local-multiplayer-config,
.ai-battle-config,
.room-selection,
.room-config {
    display: none;
    flex-direction: column;
    flex: 1 0 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.control-section {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
    /* 禁止收缩 */
}

.player-config-panel {
    transform: translateZ(0);
    will-change: transform, opacity;
    display: none;
    flex-direction: column;
    align-items: stretch;
}

.online-multiplayer-config,
.local-multiplayer-config,
.ai-battle-config {
    width: 100%;
    will-change: opacity;
}

.online-multiplayer-config {
    position: relative;
}

.room-selection,
.room-config {
    width: 100%;
    gap: 16px;
    margin: 0 auto;
}

.public-room-actions-bar {
    width: 100%;
    margin-top: auto;
}

/* 首页主菜单样式 */
.main-menu-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 400px;
    max-width: 95%;
    margin: 20px auto;
}

.menu-card-btn {
    width: 100%;
    height: 60px;
    background: var(--ui-default-color);
    border: none;
    border-radius: 16px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
}

#menuOnlineBtn {
    background-color: var(--player-3-color);
}

/* 天蓝色 */
#menuAiBtn {
    background-color: var(--player-4-color);
}

/* 浅红色 */
#menuLocalBtn {
    background-color: var(--player-1-color);
}

/* 薄荷绿 */
#menuRulesBtn {
    background-color: var(--player-2-color);
}

/* 浅橘色 */

.menu-card-btn:hover {
    transform: translateY(-2px);
    opacity: 0.9;
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.3);
}

.menu-card-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.menu-btn-text {
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.menu-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    color: white;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3));
}

.menu-btn-icon svg {
    width: 28px;
    height: 28px;
}

.mode-buttons {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 20px 0;
    width: 100%;
}

.mode-btn {
    width: 100%;
    padding: 16px 20px;
    color: #2d241f;
    border: 2px solid var(--border-light);
    background: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, border-color 0.2s ease;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 硬件加速 */
    transform: translateZ(0);
}

.mode-btn:hover {
    text-shadow: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px) translateZ(0);
}

.mode-btn-content {
    text-align: center;
}

.mode-btn-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 6px;
}

.mode-btn-desc {
    font-size: 12px;
    opacity: 0.8;
    font-weight: normal;
}

.public-room-list-panel {
    width: 100%;
    flex: 0 0 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: clamp(260px, 45vh, 420px);
}

.public-room-list-header {
    display: flex;
    gap: 8px;
}

.public-room-search {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid var(--border-soft);
    color: #2d241f;
    font-size: 14px;
}

.public-room-search::placeholder {
    color: var(--font-faint);
}

.public-room-search:focus {
    box-shadow: none;
    border-color: var(--border-soft);
}

.public-room-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.public-room-list::-webkit-scrollbar {
    width: 4px;
}

.public-room-list::-webkit-scrollbar-track {
    background: var(--bg-almost-none);
    border-radius: 3px;
}

.public-room-list::-webkit-scrollbar-thumb {
    background: rgba(252, 250, 255, 0.751);
    border-radius: 3px;
    transition: background 0.2s ease;
}

.public-room-list::-webkit-scrollbar-thumb:hover {
    background: var(--border-light);
    cursor: pointer;
}

.public-room-list-empty {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--font-faint);
    font-size: 13px;
    padding: 10px 0;
}

.public-room-item {
    display: grid;
    grid-template-columns: 1.6fr 0.7fr 0.7fr 0.7fr 0.9fr;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1.5px solid var(--border-medium);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: all 0.2s ease;
}

.public-room-status {
    text-align: right;
    display: flex;
    justify-content: flex-end;
}

.status-badge {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
}

.status-badge.waiting {
    color: #5ca45f;
    border: 1.5px solid #5ca45f;
}

.status-badge.playing {
    color: #e8c852;
    border: 1.5px solid #e8c852;
}

.status-badge.finished {
    color: #9e9e9e;
    border: 1px solid #9e9e9e;
}

.public-room-item:hover {
    background: var(--bg-almost-none);
    border-color: var(--border-light);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.public-room-name {
    color: var(--text-primary);
    font-size: 12px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-room-mode,
.public-room-piece-count,
.public-room-player-count {
    color: var(--text-secondary);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-room-actions-bar {
    position: sticky;
    bottom: 0;
    padding-top: 8px;
}

.mode-buttons.mode-buttons-bottom {
    margin-top: 0;
    flex-direction: row;
    gap: 12px;
}

.mode-buttons.mode-buttons-bottom .mode-btn {
    flex: 1;
    min-height: 54px;
    padding: 12px 14px;
}

.mode-buttons.mode-buttons-bottom .mode-btn-title {
    font-size: 16px;
    margin-bottom: 0;
}

/* 配置面板头部样式 */
.config-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    position: relative;
    min-height: 44px;
    padding: 0 44px;
}

.back-btn {
    background: none;
    border: 2px solid transparent;
    color: #2d241f;
    border-radius: var(--radius-full);
    padding: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    box-sizing: border-box;
}

.back-btn:hover {
    border: 2px solid var(--border-light);
    box-shadow: none;
}

.back-btn svg {
    width: 20px;
    height: 20px;
    transition: all 0.3s ease;
}

.back-btn:hover svg {
    scale: 1.2;
}

/* 重试按钮样式 */
.retry-btn {
    background: transparent;
    border: none;
    color: #2d241f;
    padding: 12px 24px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    margin: 10px 5px;
    transition: all 0.3s ease;
    box-shadow: none;
    min-width: 100px;
}

.retry-btn:hover {
    transform: translateY(-2px);
}

#configTitle {
    margin: 0;
    width: 100%;
    text-align: center;
}

.room-title-input {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    text-align: center;
    font-size: 18px;
    font-weight: bold;

    color: var(--text-primary);
    background: transparent;
    border: 1.5px solid var(--border-soft);
    border-radius: 10px;
    padding: 6px 10px;
    outline: none;
    box-sizing: border-box;
}

.room-title-input:focus {
    border-color: var(--border-medium);
    background: rgba(255, 255, 255, 0.08);
}

/* 调试面板样式 */
.debug-section {
    display: none;
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%) translateX(-100%);
    width: 260px;
    background: var(--bg-light-1);
    border: 2px solid var(--border-light);
    border-left: none;
    border-radius: 0 12px 12px 0;
    padding: 0;
    box-shadow: var(--modal-shadow);
    z-index: 9999;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-direction: column;
    max-height: 90vh;
    backdrop-filter: blur(10px);
    overflow: visible;
    /* 允许把手露在外面 */
}

.dice-btn {
    width: 32px;
    height: 32px;
    background-color: transparent;
    font-size: 20px;
    padding: 0;
    border: 1px solid var(--border-soft);
    cursor: pointer;
}

.dice-btn:hover {
    background-color: #78d299;
}

.debug-content-wrapper {
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow-y: auto;
    height: 100%;
}

.debug-toggle-handle {
    position: absolute;
    right: -40px;
    top: 5%;
    color: var(--text-primary);
    transform: translateY(-50%);
    width: 36px;
    height: 30px;
    background: var(--bg-light-1);
    border: 2px solid var(--border-light);
    border-left: none;
    border-radius: 0 10px 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    box-shadow: var(--modal-shadow);
    transition: background 0.3s;
    backdrop-filter: blur(10px);
}

.debug-section.is-enabled {
    display: flex;
}

.debug-section.show-debug {
    transform: translateY(-50%) translateX(0);
}

.room-chat-drawer {
    position: absolute;
    top: 40%;
    right: calc(-1 * var(--control-content-padding-right, 10px));
    transform: translateY(-50%);
    height: min(360px, calc(100% - 24px));
    width: 0;
    max-width: 90%;
    background: transparent;
    border: none;
    border-radius: 12px 0 0 12px;
    z-index: 100;
    box-shadow: none;
    transition: width 0.25s ease;
    display: none;
    overflow: visible;
}

.room-chat-drawer.is-enabled {
    display: block;
}

.room-chat-drawer.is-open {
    width: min(280px, calc(100% - 8px - var(--control-content-padding-right, 10px)));
    background: #fdfaf7;
    border: 2px solid var(--border-light);
    border-right: none;
    box-shadow: var(--modal-shadow);
}

.room-chat-toggle {
    position: absolute;
    left: -34px;
    top: 12%;
    width: 34px;
    height: 30px;
    border: 2px solid var(--border-light);
    border-right: none;
    border-radius: 10px 0 0 10px;
    background: #fdfaf7;
    color: #2d241f;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: visible;
}

.room-chat-toggle-icon {
    width: 18px;
    height: 18px;
}

.room-chat-unread-badge {
    position: absolute;
    top: 1px;
    right: 2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff484e;
    box-sizing: border-box;
    display: none;
}

.room-chat-unread-badge.is-visible {
    display: block;
}

.room-chat-panel {
    margin-left: 0;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    transition: opacity 0.12s ease;
}

.room-chat-drawer.is-open .room-chat-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0.16s;
}

.room-chat-header {
    color: #2d241f;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}

.room-chat-messages {
    flex: 1;
    overflow-y: auto;
    border: 1.5px solid var(--border-soft);
    border-radius: 8px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.35);
}

.room-chat-messages::-webkit-scrollbar {
    width: 5px;
}

.room-chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.room-chat-messages::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 3px;
    transition: background 0.3s ease;
}

.room-chat-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.7);
}

.room-chat-messages::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.room-chat-item {
    margin-bottom: 6px;
    font-size: 12px;
    line-height: 1.35;
    word-break: break-word;
    color: #2d241f;
}

.room-chat-item:last-child {
    margin-bottom: 0;
}

.room-chat-name {
    font-weight: bold;
    margin-right: 4px;
}

.room-chat-input-wrap {
    position: relative;
    display: flex;
    gap: 6px;
    align-items: center;
}

.room-chat-emoji-btn {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #2d241f;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    line-height: 0;
    flex-shrink: 0;
    transition: transform 0.2s ease;
    transform-origin: center;
}

.room-chat-emoji-btn svg {
    width: 20px;
    height: 20px;
}

.room-chat-input {
    flex: 1;
    min-width: 0;
    border: 1.5px solid var(--border-light);
    border-radius: 8px;
    background: transparent;
    padding: 5px 8px;
    color: #2d241f;
    font-size: 13px;
}

.room-chat-send-btn {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #2d241f;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    flex-shrink: 0;
    transition: transform 0.2s ease;
    transform-origin: center;
}

.room-chat-send-btn svg {
    width: 20px;
    height: 20px;
}

.room-chat-emoji-panel {
    position: absolute;
    left: 0;
    bottom: 38px;
    width: 257px;
    max-height: 132px;
    background: #fefcfa;
    border: 1.5px solid var(--border-light);
    border-radius: 4px;
    display: none;
    z-index: 300;
}

.room-chat-emoji-panel.is-open {
    display: block;
}

.room-chat-emoji-panel-content {
    padding: 6px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    max-height: 118px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-soft) transparent;
}

.room-chat-emoji-panel-content::-webkit-scrollbar {
    width: 4px;
}

.room-chat-emoji-panel-content::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
}

.room-chat-emoji-panel-content::-webkit-scrollbar-thumb {
    background: var(--border-soft);
    border-radius: 3px;
}

.room-chat-emoji-item {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-size: 18px;
    user-select: none;
    background: transparent;
}

.room-chat-emoji-item:hover {
    background: rgba(200, 195, 185, 0.3);
    transform: scale(1.1);
}

@media (hover: hover) and (pointer: fine) {
    .room-chat-emoji-btn:hover {
        transform: scale(1.1);
    }

    .room-chat-send-btn:hover {
        transform: scale(1.1);
    }
}

.debug-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.control-group label,
.debug-group-label {
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
}

.debug-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.debug-player-radio-group {
    flex-wrap: nowrap;
}

.debug-piece-radio-group {
    gap: 5px;
}

.debug-radio-option {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.debug-radio-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.debug-radio-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 5px 8px;
    border-radius: 999px;
    border: 1px solid var(--border-faint);
    background: transparent;
    color: var(--text-primary);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
}

.debug-radio-option input[type="radio"]:checked+.debug-radio-label {
    background: var(--bg-soft);
    border-color: var(--border-medium);
    color: var(--text-primary);
    box-shadow: var(--modal-shadow);
}

.debug-radio-option input[type="radio"]:focus-visible+.debug-radio-label {
    outline: 2px solid var(--border-medium);
    outline-offset: 1px;
}

.debug-move-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.debug-move-btn {
    padding: 7px 10px;
    background: var(--bg-soft);
    color: var(--text-primary);
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-base);
    cursor: pointer;
    font-size: 12px;
    transition: all 0.3s ease;
    margin: 0;
}

.debug-move-btn:hover {
    background: var(--bg-medium);
    border-color: var(--border-medium);
    transform: translateY(-1px);
    box-shadow: var(--modal-shadow);
}

.debug-move-btn.forward {
    background: rgba(166, 216, 183, 0.4);
    border-color: rgba(166, 216, 183, 0.6);
    color: var(--text-primary);
}

.debug-move-btn.backward {
    background: rgba(247, 160, 153, 0.4);
    border-color: rgba(247, 160, 153, 0.6);
    color: var(--text-primary);
}

.debug-energy-btn {
    padding: 7px 10px;
    background: rgba(236, 189, 153, 0.4);
    color: var(--text-primary);
    border: 1.5px solid rgba(236, 189, 153, 0.6);
    border-radius: var(--radius-base);
    cursor: pointer;
    font-size: 12px;
    transition: all 0.3s ease;
    width: 100%;
}

.debug-energy-btn:hover {
    background: rgba(236, 189, 153, 0.6);
    border-color: rgba(236, 189, 153, 0.8);
    transform: translateY(-1px);
    box-shadow: var(--modal-shadow);
}

.debug-dice-panel h4,
.debug-move-panel h4,
.debug-energy-panel h4 {
    margin: 0 0 5px 0;
    color: var(--text-primary);
}

/* 完成进度面板样式 */
.progress-panel {
    display: flex;
    flex-direction: column;
    background: var(--bg-soft);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-base);
    min-height: 100px;
    max-height: 250px;
    overflow: hidden;
    box-shadow: none;
}

.progress-header-container {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background: linear-gradient(to right, var(--border-faint) 60%, transparent 40%) repeat-x 0 100%;
    background-size: 13px 1px;
}

.progress-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 15px 15px 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.progress-item {
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.progress-player-name {
    font-size: 14px;
    font-weight: bold;
}

.progress-percentage {
    font-size: 12px;
    color: var(--text-primary);
    font-weight: bold;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--bg-almost-none);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    flex: 1;
}

/* 进度条头像样式 */
.progress-avatar {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    border: 2px solid var(--border-soft);
}

.progress-avatar.player-1 {
    background: var(--player-1-color);
    border-color: var(--player-1-color);
}

.progress-avatar.player-2 {
    background: var(--player-2-color);
    border-color: var(--player-2-color);
}

.progress-avatar.player-3 {
    background: var(--player-3-color);
    border-color: var(--player-3-color);
}

.progress-avatar.player-4 {
    background: var(--player-4-color);
    border-color: var(--player-4-color);
}

.progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
    position: relative;
    width: 0%;
}

.progress-fill.player-1 {
    background: var(--player-1-color);
}

.progress-fill.player-2 {
    background: var(--player-2-color);
}

.progress-fill.player-3 {
    background: var(--player-3-color);
}

.progress-fill.player-4 {
    background: var(--player-4-color);
}

/* 进度条玩家名称颜色 */
.progress-item[data-player="1"] .progress-player-name {
    color: var(--player-1-color);
}

.progress-item[data-player="2"] .progress-player-name {
    color: var(--player-2-color);
}

.progress-item[data-player="3"] .progress-player-name {
    color: var(--player-3-color);
}

.progress-item[data-player="4"] .progress-player-name {
    color: var(--player-4-color);
}

/* 进度条排序动画 */
.progress-item.moving {
    transform: translateY(-5px);
    z-index: 10;
}

/* 结算模态框样式 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.modal-overlay.show {
    display: flex;
    animation: fadeIn 0.3s ease-out;
}

.modal-content {
    background: var(--bg-light-1);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    animation: slideIn 0.3s ease-out;
    display: flex;
    flex-direction: column;
}

/* 规则模态框特殊样式 */
.rules-modal-content {
    width: 90%;
    max-width: 500px;
    min-width: 300px;
    max-height: 90vh;
    background: linear-gradient(135deg, rgba(245, 245, 240, 0.95), rgba(250, 248, 245, 0.9));
    color: #2d241f;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

.rules-modal-content .modal-header {
    background: var(--bg-soft);
    border-bottom: 1px solid rgba(200, 195, 185, 0.3);
    border-radius: 8px 8px 0 0;
    backdrop-filter: blur(5px);
}

.rules-modal-content .modal-header h2 {
    color: #2d241f;
}

.modal-header {
    padding: 15px;
    border-bottom: 1px solid var(--bg-almost-none);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-soft);
    flex-shrink: 0;
}

.modal-header h2 {
    margin: 0;
    color: #2d241f;
    font-size: 18px;
    font-weight: bold;
    text-shadow: none;
}

/* 拓展规则介绍弹窗（简单弹出，无遮罩动效） */
.mode-rules-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.mode-rules-overlay.show {
    display: flex;
}
.mode-rules-popup {
    max-width: 460px;
    width: 90%;
    background: var(--bg-medium);
    border: 2px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}
.mode-rules-popup-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--bg-almost-none);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mode-rules-popup-header h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
}
.mode-rules-close {
    background: none;
    border: none;
    font-size: 22px;
    color: var(--font-faint);
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
.mode-rules-close:hover {
    color: var(--text-primary);
}
.mode-rules-popup-body {
    padding: 18px 20px;
}
.mode-rule-section {
    margin-bottom: 20px;
}
.mode-rule-section:last-child {
    margin-bottom: 0;
}
.mode-rule-section h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: var(--text-primary);
}
.mode-rule-section ul {
    margin: 0;
    padding-left: 18px;
}
.mode-rule-section li {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
}
.mode-rule-section li.sub-item {
    padding-left: 14px;
    list-style: circle;
    font-size: 13px;
}

.settlement-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-left: 5px;
    gap: 10px;
}

.settlement-timestamp,
.settlement-duration {
    color: var(--font-faint);
    font-size: 14px;
    font-weight: normal;
    white-space: nowrap;
}
.settlement-mode {
    color: var(--accent-color);
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
}

/* 窄屏结算弹框：模式独占一行，时间戳和用时靠左挨在一起 */
@media (max-width: 520px) {
    .settlement-info {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 4px 10px;
    }
    .settlement-mode {
        flex: 0 0 100%;
    }
}

.modal-close {
    background: none;
    border: 2px solid transparent;
    color: var(--font-faint);
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    transition: all 0.3s ease;
}

.modal-close:hover {
    border: 2px solid var(--ui-default-color);
    transform: scale(1.1);
}

.modal-body {
    padding: 15px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    background: var(--bg-soft);
}

/* 自定义滚动条样式*/
.modal-body::-webkit-scrollbar {
    width: 5px;
}

.modal-body::-webkit-scrollbar-track {
    background: rgba(67, 60, 40, 0.1);
    border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: rgba(67, 60, 40, 0.4);
    border-radius: 3px;
    transition: background 0.3s ease;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(187, 154, 101, 0.6);
}

.settlement-rankings {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ranking-item {
    perspective: 1000px;
    cursor: pointer;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    height: 75px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.ranking-item.is-flipped .flip-card-inner {
    transform: rotateX(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 10px;
    border: 2px solid var(--border-medium);
    box-shadow: 0 3px 2px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    padding: 15px;
    box-sizing: border-box;
}

.flip-card-front {
    background: var(--bg-soft);
}

.flip-card-back {
    transform: rotateX(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

/* 称号样式 */
.ranking-title-badge {
    font-size: 20px;
    font-weight: bold;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
    letter-spacing: 1px;
}

.ranking-title-desc {
    font-size: 13px;
    color: var(--track-primary);
    opacity: 0.8;
}

.ranking-title-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: opacity 0.2s ease-in;
}

/* 右下角斜角计数带 */
.title-counter-ribbon {
    position: absolute;
    bottom: 10px;
    right: 5px;
    width: 50px;
    height: 20px;
    transform: rotate(-20deg);
    transform-origin: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: bold;
    color: var(--font-faint);
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

.title-counter-ribbon.player-1-ribbon { background: var(--player-1-fill); }
.title-counter-ribbon.player-2-ribbon { background: var(--player-2-fill); }
.title-counter-ribbon.player-3-ribbon { background: var(--player-3-fill); }
.title-counter-ribbon.player-4-ribbon { background: var(--player-4-fill); }

.ranking-position {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    margin-right: 15px;
    background: #fff;
    color: #c6c6c6;
    border: 1.5px solid var(--border-faint);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    margin-right: 15px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}

.ranking-position.first {
    border-color: #c3a14e;
    background-color: #fee39d;
    color: #c3a14e;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}

.ranking-position.second {
    border-color: #c8c8c8;
    background-color: #d9d9d9;
    color: #7a7a7a;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}

.ranking-position.third {
    border-color: #c4a57b;
    background-color: #d4b896;
    color: #8b6f47;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}

/* 结算面板中的玩家头像 */
.ranking-avatar {
    width: 45px;
    height: 45px;
    margin-right: 5px;
    flex-shrink: 0;
}

.ranking-info {
    flex: 1;
    margin-left: 0;
}

.ranking-name {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #2d241f;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}

/* 玩家名称颜色 */
.player-1-name {
    color: var(--player-1-color);
}

.player-2-name {
    color: var(--player-2-color);
}

.player-3-name {
    color: var(--player-3-color);
}

.player-4-name {
    color: var(--player-4-color);
}

.ranking-progress {
    font-size: 14px;
    color: var(--font-faint);
}

.ranking-defeats {
    display: flex;
    gap: 10px;
    align-items: center;
}

.ranking-defeats .defeat-count {
    font-size: 25px;
    font-weight: bold;
    min-width: 25px;
    text-align: center;
}

.modal-footer {
    padding: 15px;
    border-top: 1px solid var(--bg-almost-none);
    display: flex;
    justify-content: center;
    gap: 10px;
    background: var(--bg-soft);
    flex-shrink: 0;
}

/* 数据分析样式 */
.settlement-data-analysis {
    display: flex;
    flex-direction: column;
}

.data-analysis-title {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #2d241f;
    margin: 0 0 20px 0;
    text-shadow: none;
}

/* 完成度折线图样式 */
.progress-chart-section {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    margin-bottom: 10px;
}

.chart-title {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #2d241f;
    margin: 0 0 10px 0;
    text-shadow: none;
}

.chart-container {
    width: 100%;
    height: 240px;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.chart-container::-webkit-scrollbar {
    height: 5px;
}

.chart-container::-webkit-scrollbar-track {
    background: rgba(187, 142, 101, 0.1);
    border-radius: 3px;
}

.chart-container::-webkit-scrollbar-thumb {
    background: rgba(187, 165, 101, 0.4);
    border-radius: 3px;
    transition: background 0.3s ease;
}

.chart-container::-webkit-scrollbar-thumb:hover {
    background: rgba(187, 154, 101, 0.6);
}

.chart-container canvas {
    height: 100%;
    display: block;
}

/* 结算模态框特殊样式 */
.settlement-modal-content {
    max-width: 550px;
}

/* 骰子统计表格区域样式 */
.dice-stats-section {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 10px 10px;
}

.dice-stats-table {
    width: 100%;
    border-collapse: collapse;
    color: #2d241f;
    border: 2px solid var(--border-light);
    table-layout: fixed;
    /* 固定布局，确保宽度可控 */
}

.dice-stats-table thead th {
    padding: 8px 4px;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid var(--border-light);
}

.dice-stats-table .dice-header {
    font-size: 14px;
    width: 40px;
}

.dice-stats-table .player-header {
    color: var(--font-faint);
    word-break: break-all;
    white-space: normal;
    line-height: 1.2;
}

.dice-stats-table .player-header.player-1 {
    color: var(--player-1-color);
    background: none;
}

.dice-stats-table .player-header.player-2 {
    color: var(--player-2-color);
    background: none;
}

.dice-stats-table .player-header.player-3 {
    color: var(--player-3-color);
    background: none;
}

.dice-stats-table .player-header.player-4 {
    color: var(--player-4-color);
    background: none;
}

.dice-stats-table tbody tr {
    transition: background 0.2s ease;
}

.dice-stats-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

.dice-stats-table td {
    text-align: center;
    border: 2px solid var(--border-light);
    padding: 6px 2px;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
    /* 添加极轻微的文字阴影 */
}

.dice-stats-table .dice-cell {
    font-size: 32px;
    text-shadow: none;
}

.skill-icon-cell {
    padding: 2px !important;
    line-height: 0;
    vertical-align: middle;
}

.skill-icon-cell svg {
    display: inline-block;
    width: 24px;
    height: 24px;
    color: var(--font-faint);
    vertical-align: middle;
}

.dice-stats-table .player-cell {
    font-size: 18px;
    /* 取消固定宽度，让其自适应 */
}

.dice-stats-table .player-cell .count {
    display: block;
    font-weight: bold;
    color: #2d241f;
    margin-bottom: 0px;
}

.dice-stats-table .player-cell .percentage {
    display: block;
    color: var(--font-faint);
    font-size: 10px;
}

.dice-stats-table .player-cell.player-1 .count {
    color: var(--player-1-color);
}

.dice-stats-table .player-cell.player-2 .count {
    color: var(--player-2-color);
}

.dice-stats-table .player-cell.player-3 .count {
    color: var(--player-3-color);
}

.dice-stats-table .player-cell.player-4 .count {
    color: var(--player-4-color);
}

/* 高亮最高占比的格子 */
.dice-stats-table .player-cell.player-1.highlight {
    background: var(--player-1-stats-bg);
}

.dice-stats-table .player-cell.player-2.highlight {
    background: var(--player-2-stats-bg);
}

.dice-stats-table .player-cell.player-3.highlight {
    background: var(--player-3-stats-bg);
}

.dice-stats-table .player-cell.player-4.highlight {
    background: var(--player-4-stats-bg);
}

/* 前进距离统计样式 */
.distance-stats-section {
    margin-bottom: 15px;
    padding: 0 10px;
}

.distance-bars-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: none;
    padding: 5px 10px;
}

.distance-bar-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.distance-player-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.distance-player-name {
    font-size: 14px;
    font-weight: bold;
}

.distance-value {
    font-size: 14px;
    font-weight: bold;
    color: var(--track-primary);
}

.distance-value small {
    font-weight: normal;
    opacity: 0.7;
}

.distance-bar-bg {
    height: 8px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

.distance-bar-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 1s cubic-bezier(0.1, 0.5, 0.5, 1);
}

/* 玩家对应颜色 */
.distance-bar-fill.player-1 {
    background: var(--player-1-color);
}

.distance-bar-fill.player-2 {
    background: var(--player-2-color);
}

.distance-bar-fill.player-3 {
    background: var(--player-3-color);
}

.distance-bar-fill.player-4 {
    background: var(--player-4-color);
}

.distance-player-name.player-1 {
    color: var(--player-1-border);
}

.distance-player-name.player-2 {
    color: var(--player-2-border);
}

.distance-player-name.player-3 {
    color: var(--player-3-border);
}

.distance-player-name.player-4 {
    color: var(--player-4-border);
}

.skill-stats-section {
    margin-bottom: 15px;
    padding: 0 10px;
}

.skill-stats-subtitle {
    margin: 12px 0 8px;
    font-size: 13px;
    color: var(--font-faint);
    font-weight: bold;
}

.no-data {
    text-align: center;
    color: var(--font-faint);
    font-size: 18px;
    padding: 40px;
}

.btn-primary {
    padding: 8px 10px;
    color: #2d241f;
    border: 1.5px solid var(--border-light);
    background: none;
    border-radius: var(--radius-base);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: none;
}

.btn-primary:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* 主容器 */
.index-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px 20px 20px;
    background: var(--bg-primary);
    box-sizing: border-box;
    width: 100%;
    overflow-x: hidden;
}

/* 标题区域 */
.index-title {
    text-align: center;
    margin-bottom: 20px;
}

.index-title h1 {
    font-weight: bold;
    font-size: 2.8rem;
    margin: 0;
    text-shadow: none;
    letter-spacing: 2px;
}

.rainbow-title span {
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
}

/* 多色标题样式 */
.rainbow-title {
    display: flex;
    justify-content: center;
    gap: 4px;
}

.rainbow-title span {
    display: inline-block;
    transform-origin: center bottom;
}

.rainbow-title span {
    display: inline-block;
    transform-origin: center bottom;
    animation: titleJump 1s steps(1, end) infinite;
}

.rainbow-title span:nth-child(1) {
    color: var(--player-1-color);
    animation-delay: 0s;
}

.rainbow-title span:nth-child(2) {
    color: var(--player-2-color);
    animation-delay: 0.2s;
}

.rainbow-title span:nth-child(3) {
    color: var(--player-3-color);
    animation-delay: 0.4s;
}

.rainbow-title span:nth-child(4) {
    color: var(--player-4-color);
    animation-delay: 0.5s;
}

.rainbow-title span:nth-child(5) {
    color: var(--player-1-color);
    animation-delay: 0.8s;
}

@keyframes titleJump {

    0%,
    100% {
        transform: rotate(-3deg);
    }

    50% {
        transform: rotate(3deg);
    }
}

/* 游戏提示轮播 */
.game-tips {
    margin-top: 15px;
    height: 18px;
    overflow: hidden;
    position: relative;
}

.tip-content {
    font-size: 0.8rem;
    color: var(--font-faint);
    text-align: center;
    line-height: 18px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
}

.tip-content.slide-up-out {
    transform: translateY(-18px);
    opacity: 0;
}

.tip-content.slide-up-in {
    transform: translateY(18px);
    opacity: 0;
}

.tip-content.show {
    transform: translateY(0);
    opacity: 1;
}

.index-footer {
    font-size: 0.8rem;
    color: #2d241f;
    text-align: center;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.footer-feedback {
    opacity: 0.8;
}

.footer-copyright {
    opacity: 0.8;
}
.qq-group-number{
    user-select: all;
}
.index-footer .heart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 2px;
}

.index-footer a {
    color: #2d241f;
    text-decoration: none;
    text-shadow: none;
}

.index-footer .heart:hover,
.index-footer a:hover {
    transform: scale(1.2);
}

/* 内容区域 */
.index-content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    perspective: 1200px;
    box-sizing: border-box;
}

@keyframes panelFlipIn {
    0% {
        transform: rotateY(-180deg);
    }

    100% {
        transform: rotateY(0deg);
    }
}

.index-content .control-panel,
.index-content .main-menu-container {
    animation: panelFlipIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    position: relative;
}

.local-multiplayer-config,
.online-multiplayer-config,
.ai-battle-config {
    animation: panelFlipIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    position: relative;
}

/* 联机内部的房间列表和房间配置面板取消翻转动画，避免在同一个大面板内切换时过度抖动 */
.room-selection,
.room-config {
    backface-visibility: hidden;
    transform-style: preserve-3d;
    position: relative;
}

/* 模拟卡片背面，填补翻转时的视觉空白 */
.index-content .control-panel::before,
.index-content .main-menu-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-light-1);
    border-radius: 15px;
    border: 2.5px solid var(--border-light);
    transform: rotateY(180deg);
    backface-visibility: hidden;
    z-index: -1;
    box-sizing: border-box;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
}

.index-content .control-panel {
    width: 400px;
    max-width: 95%;
    padding: 0;
    margin: 0 auto;
}

.player-config-panel {
    width: 100%;
    box-sizing: border-box;
}

.index-content .control-content {
    --control-content-padding-right: 10px;
    width: 100%;
    padding: 10px;
    background: var(--bg-medium);
    backdrop-filter: blur(10px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* 区域样式 */
.player-setup-panel {
    display: flex;
    flex-direction: column;
}

/* 房间信息样式 */
.room-info-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.room-info {
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: transparent;
    border-radius: 10px;
    border: 2px solid var(--border-light);
    box-shadow: none;
}

.room-privacy-toggle {
    margin-top: 10px;
    display: inline-flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.privacy-toggle-btn {
    padding: 5px 10px;
    border-radius: 6px;
    border: 2px solid var(--border-light);
    background: transparent;
    color: #2d241f;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
}

.privacy-toggle-btn:hover {
    font-weight: bold;
}

.privacy-toggle-btn.active {
    background: #e9c1df;
}

.room-code-display {
    display: flex;
    align-items: center;

    gap: 10px;
    justify-content: center;
}

.room-code-label {
    color: #2d241f;
    font-size: 18px;
    font-weight: bold;
}

.room-code {
    color: #2d241f;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
    background: transparent;
    padding: 2px 8px;
    border-radius: 5px;
    border: 2px solid var(--border-light);
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: all;
    line-height: 18px;
    min-width: 55px;
    text-align: center;
    user-select: none;
}

.room-code:hover {
    background: #9ddfb5;
    box-shadow: none;
}

.player-count-info {
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
}

.game-config-info {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(45, 36, 31, 0.85);
    font-size: 14px;
    padding-top: 5px;
    border-top: 1px solid var(--border-soft);
    margin-top: 5px;
}

.color-selection h4,
.username-setting h4,
.piece-count-setting h4,
.bot-players-preview h4,
.player-count-setting h4,
.rules-content h4 {
    margin: 10px;
    color: #2d241f;
    font-weight: bold;
    font-size: 16px;
}

.rules-content h5 {
    color: rgba(45, 36, 31, 0.9);
    margin: 0px 0 6px 0;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
}

.color-options {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 10px;
    justify-content: center;
    width: fit-content;
    margin: 0 auto;
}

.color-option {
    cursor: pointer;
    transition: all 0.3s ease;
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-items: start;
    justify-items: center;
    gap: 6px;
    height: 100%;
}

.color-circle {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    cursor: pointer;
    border: 2px solid;
    background: transparent;
    transition: all 0.3s ease;
    position: relative;
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    color: #666;
}

.offline-countdown-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.45);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    z-index: 3;
    pointer-events: none;
}

.kick-player-btn {
    position: absolute;
    top: -10px;
    right: -12px;
    width: 15px;
    height: 15px;
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 4;
}

.kick-player-btn svg {
    width: 8px;
    height: 8px;
    color: #2d241f;
}

.kick-player-btn:hover {
    transform: scale(1.1);
}

.player-1-color {
    border-color: var(--player-1-color);
}

.player-2-color {
    border-color: var(--player-2-color);
}

.player-3-color {
    border-color: var(--player-3-color);
}

.player-4-color {
    border-color: var(--player-4-color);
}

.color-option.selected .color-circle {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.color-option.selected .player-1-color {
    background: var(--player-1-color);
    border: 2px solid var(--player-1-border);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    color: white;
}

.color-option.selected .player-1-color .multiplayer-emoji svg,
.color-option.selected .player-1-color .multiplayer-emoji svg path {
    fill: white !important;
    stroke: white !important;
    color: white !important;
}

.color-option.selected .player-2-color {
    background: var(--player-2-color);
    border: 2px solid var(--player-2-border);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    color: white;
}

.color-option.selected .player-2-color .multiplayer-emoji svg,
.color-option.selected .player-2-color .multiplayer-emoji svg path {
    fill: white !important;
    stroke: white !important;
    color: white !important;
}

.color-option.selected .player-3-color {
    background: var(--player-3-color);
    border: 2px solid var(--player-3-border);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    color: white;
}

.color-option.selected .player-3-color .multiplayer-emoji svg,
.color-option.selected .player-3-color .multiplayer-emoji svg path {
    fill: white !important;
    stroke: white !important;
    color: white !important;
}

.color-option.selected .player-4-color {
    background: var(--player-4-color);
    border: 2px solid var(--player-4-border);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    color: white;
}

.color-option.selected .player-4-color .multiplayer-emoji svg,
.color-option.selected .player-4-color .multiplayer-emoji svg path {
    fill: white !important;
    stroke: white !important;
    color: white !important;
}

.player-nickname {
    font-size: 12px;
    color: rgba(45, 36, 31, 0.75);
    text-align: center;
    max-width: 58px;
    white-space: normal;
    word-break: break-all;
    line-height: 1.2;
}

.player-ready-status {
    font-size: 11px;
    text-align: center;
    padding: 2px 6px;
    border-radius: var(--radius-base);
    font-weight: 500;
    line-height: 14px;
}

.player-ready-status.ready {
    color: rgba(30, 28, 25, 0.9);
    background: rgba(124, 175, 136, 0.16);
    border: 1.5px solid rgba(124, 175, 136, 0.45);
}

.player-ready-status.host {
    color: rgba(30, 28, 25, 0.9);
    background: rgba(94, 164, 196, 0.16);
    border: 1.5px solid rgba(94, 164, 196, 0.45);
}

.player-ready-status.not-ready,
.player-ready-status.offline {
    color: #6b7280;
    background: rgba(120, 130, 145, 0.12);
    border: 1.5px solid rgba(120, 130, 145, 0.35);
}


/* 人数选择器样式 */
.player-count-setting {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.player-count-selector {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.player-count-options {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.player-count-option {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    border: 2px solid var(--border-light);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #2d241f;
    transition: all 0.3s ease;
    cursor: pointer;
}

.player-count-option:hover,
.player-count-option.selected {
    border: 2px solid #f1c40f;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* 玩家设置区域 */
.players-setup-area {
    margin-top: 15px;
}

.player-setup-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    margin-bottom: 10px;
    border-radius: var(--radius-base);
}

.player-setup-row {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}

.player-setup-item h5 {
    color: #2d241f;
    margin: 0;
    font-size: 1rem;
}

/* 本地多人配置面板 */

.piece-count-selector {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.piece-count-options {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 5px 0px;
}

.piece-count-option {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    border: 2px solid var(--border-light);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #2d241f;
    transition: all 0.3s ease;
    cursor: pointer;
}

.piece-count-option:hover,
.piece-count-option.selected {
    border: 2px solid #6e7bb0;
    background: #bec7e9;
    box-shadow: 0 1px 3px rgba(40, 40, 40, 0.6);
}

.local-piece-count-options {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 5px 0px;
}

.local-piece-count-option {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    border: 2px solid var(--border-light);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #2d241f;
    transition: all 0.3s ease;
    cursor: pointer;
}

.local-piece-count-option:hover,
.local-piece-count-option.selected {
    border: 2px solid #6e7bb0;
    background: #bec7e9;
    box-shadow: 0 1px 3px rgba(40, 40, 40, 0.6);
}

.username-input-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
    width: 100%;
    margin: 0 auto;
}

.username-input-with-icon {
    position: relative;
    width: 75%;
    display: flex;
    align-items: center;
}

.username-input {
    padding: 8px 10px;

    padding-right: 48px;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-base);
    background: transparent;
    color: #2d241f;
    font-size: 1rem;
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.form-input:focus {
    color: #2d241f;
    outline: none;
    border-color: var(--primary-color);
    box-shadow: none;
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.743);
}

.nickname-dice-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.nickname-dice-btn.clicking {
    animation: diceTilt 0.5s ease-out;
}

/* 提示文本样式 */
.hint-text {
    font-size: 0.8rem;
    color: var(--font-faint);
    text-align: center;
}

/* 道具模式设置 */
.skill-mode-setting {
    margin: 8px 0;
    display: flex;
    justify-content: center;
}

.toggle-option-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 20px;
    border: 2px solid var(--border-light);
    gap: 15px;
    border-radius: 10px;
    box-shadow: none;
}

.toggle-option-group-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 2px;
}
.toggle-group-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #aaa;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    user-select: none;
    transition: background 0.15s;
}
.toggle-group-help:hover {
    background: #888;
}

.toggle-option {
    display: flex;
    align-items: center;
    gap: 15px;
}

.toggle-label-text {
    color: #2d241f;
    font-size: 16px;
    font-weight: 500;
    text-shadow: none;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 28px;
    cursor: pointer;
}

.toggle-switch input[type="checkbox"] {
    display: none;
}

.toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    border: 2px solid var(--border-light);
    border-radius: 16px;
    transition: all 0.3s ease-in-out;
}

.toggle-slider::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    left: 4px;
    top: 2.5px;
    background: #2d241f;
    border-radius: var(--radius-full);
    transition: all 0.3s ease-in-out;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.toggle-switch input[type="checkbox"]:checked+.toggle-slider {
    background: #abe1f7;
    border-color: #92d5ef;
    box-shadow: none;
}

.toggle-switch input[type="checkbox"]:checked+.toggle-slider::after {
    transform: translateX(24px);
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.toggle-switch input[type="checkbox"]:active+.toggle-slider::after {
    width: 30px;
}

.toggle-switch input[type="checkbox"]:checked:active+.toggle-slider::after {
    transform: translateX(18px);
}

.skill-mode-hint {
    font-size: 0.8rem;
    color: var(--font-faint);
    padding-left: 28px;
    line-height: 1.4;
}

/* 表情切换器 */
.emoji-switcher {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    padding: 5px;
}

.emoji-nav-btn {
    background: none;
    border: none;
    color: #2d241f;
    cursor: pointer;
    font-size: 40px;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    transition: all 0.3s ease;
    transform: translateY(-15px);
}

.emoji-nav-btn:hover {
    border-color: var(--primary-color);
    text-shadow: none;
}

.current-emoji-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 80px;
}

/* 表情预览区域 - 与player-avatar相同的样式 */
.current-emoji-display .emoji-preview {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* 默认状态下透明边框，等待颜色分配 */
    border: 3px solid transparent;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    color: #666;
}

/* 表情内容容器 */
.emoji-preview .emoji-content {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
}

.emoji-preview .emoji-content svg {
    width: 100%;
    height: 100%;
}

/* 玩家颜色样式 - 已分配玩家使用填充背景和白色表情 */
.emoji-preview.player-1-color {
    background: var(--player-1-color);
    border: 2px solid var(--player-1-border);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    color: white;
}

.emoji-preview.player-2-color {
    background: var(--player-2-color);
    border: 2px solid var(--player-2-border);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    color: white;
}

.emoji-preview.player-3-color {
    background: var(--player-3-color);
    border: 2px solid var(--player-3-border);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    color: white;
}

.emoji-preview.player-4-color {
    background: var(--player-4-color);
    border: 2px solid var(--player-4-border);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    color: white;
}

.current-emoji-display .emoji-preview svg {
    width: 100%;
    height: 100%;
}

.emoji-name {
    font-size: 0.9rem;
    color: #2d241f;
    text-align: center;
    font-weight: 500;
}

.bot-players {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    min-height: 73.5px;
}

/* AI添加选项样式 */
.bot-add-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0px 12px;
    background: transparent;
    border-radius: var(--radius-base);
    cursor: pointer;
    transition: all 1s ease;
    border: 1px solid transparent;
    min-height: 72px;
}


.bot-add-option .color-circle,
.bot-player .difficulty-circle {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    border: 2px solid;
    background: transparent;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.bot-add-option .add-icon {
    color: #2d241f;
    font-size: 18px;
    font-weight: bold;
    text-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.black-icon {
    width: 15px;
    height: 15px;
    color: var(--ui-default-color-hover);
}

.bot-add-option .placeholder-text {
    color: transparent;
    font-size: 0.9rem;
    height: 1.2em;
}

/* 已添加的AI玩家样式 */
.bot-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0px 12px;
    border-radius: var(--radius-base);
    position: relative;
    min-height: 72px;
}

.bot-player .color-circle {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    border: 2px solid;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
}

.bot-player .remove-btn {
    position: absolute;
    top: -5px;
    right: -2px;
    width: 15px;
    height: 15px;
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.bot-player .remove-btn svg {
    width: 8px;
    height: 8px;
    color: #2d241f;
}

.bot-player .remove-btn:hover {
    transform: scale(1.1);
}

.bot-add-option .player-1-color,
.bot-player .player-1-color {
    border-color: var(--player-1-border);
}

.bot-add-option .player-2-color,
.bot-player .player-2-color {
    border-color: var(--player-2-border);
}

.bot-add-option .player-3-color,
.bot-player .player-3-color {
    border-color: var(--player-3-border);
}

.bot-add-option .player-4-color,
.bot-player .player-4-color {
    border-color: var(--player-4-border);
}

/* 激活状态的AI玩家样式 */
.bot-player .player-1-color {
    background: var(--player-1-fill);
}

.bot-player .player-2-color {
    background: var(--player-2-fill);
}

.bot-player .player-3-color {
    background: var(--player-3-fill);
}

.bot-player .player-4-color {
    background: var(--player-4-fill);
}

.bot-player span {
    color: #2d241f;
    font-size: 0.9rem;
}

.difficulty-text {
    color: #2d241f;
    font-size: 0.8rem;
    font-weight: bold;
    text-shadow: none;
    pointer-events: none;
}

.start-game-section {
    margin-top: 10px;
    text-align: center;
}

.start-game-section .control-btn {
    position: static;
    padding: 12px 24px;
    font-size: 16px;
}

/* 准备按钮区域样式 */
.player-ready-section {
    margin-top: 10px;
    text-align: center;
}

.player-ready-section .control-btn {
    position: static;
    padding: 12px 24px;
    font-size: 16px;
}

.waiting-for-host-text {
    margin-top: 15px;
}

.game-rules-panel {
    padding: 10px 12px;
    max-height: 480px;
    overflow-y: auto;
    box-sizing: border-box;
    background: transparent;
    width: 100%;
    margin: 0 auto;
}

.rules-content {
    color: rgba(45, 36, 31, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* 机制项目容器 */
.mechanism-item {
    margin: 12px 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: transparent;
    color: rgba(45, 36, 31, 0.9);
    width: 100%;
    max-width: 360px;
    box-sizing: border-box;
}

/* 不同机制项目的边框颜色 */
.win-item {
    border: 2px solid rgb(199, 213, 187);
}

.launch-item {
    border: 2px solid rgba(166, 216, 183, 0.6);
}

.move-item {
    border: 2px solid rgba(120, 144, 212, 0.6);
}

.bonus-item {
    border: 2px solid rgba(101, 187, 158, 0.6);
}

.jump-item {
    border: 2px solid rgba(175, 204, 234, 0.6);
}

.fly-item {
    border: 2px solid rgba(236, 189, 153, 0.6);
}

.stack-item {
    border: 2px solid rgba(247, 160, 153, 0.6);
}

.beat-item {
    border: 2px solid rgba(247, 160, 153, 0.6);
}

.finish-item {
    border: 2px solid rgba(166, 216, 183, 0.6);
}

/* 通用子内容容器 */
.sub-content-item {
    margin: 6px 0;
    padding: 10px 12px;
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
}

.win-sub-item {
    background: rgba(126, 203, 124, 0.15);
}

.launch-sub-item {
    background: rgba(166, 216, 183, 0.15);
}

/* 移动子内容容器 */
.move-sub-item {
    background: rgba(120, 144, 212, 0.15);
}

/* 飞棋子内容容器 */
.jump-sub-item {
    background: rgba(175, 204, 234, 0.15);
}

/* 连投子内容容器 */
.bonus-sub-item {
    background: rgba(101, 187, 158, 0.15);
}

/* 撞机类型容器 */
.beat-sub-item {
    background: rgba(247, 160, 153, 0.15);
}

/* 飞棋子内容容器 */
.fly-sub-item {
    background: rgba(236, 189, 153, 0.15);
}

/* 叠子子内容容器 */
.stack-sub-item {
    background: rgba(247, 160, 153, 0.15);
}

/* 终点子内容容器 */
.finish-sub-item {
    background: rgba(166, 216, 183, 0.15);
}

/* 撞机详情 */
.beat-detail {
    margin-left: 15px;
    color: rgba(45, 36, 31, 0.85);
}

.rule-section p {
    margin: 8px 0;
    color: rgba(45, 36, 31, 0.92);
    line-height: 1.5;
    font-size: 14px;
    font-weight: 500;
}

.rule-section p strong {
    color: #2d241f;
}

/* 游戏规则面板中的特殊操作样式 - 移除边框，只保留颜色 */
.rules-content .move-type-launch,
.rules-content .move-type-move,
.rules-content .move-type-jump,
.rules-content .move-type-fly,
.rules-content .stack-text,
.rules-content .beat-text {
    font-weight: bold;
}

.rules-content .move-type-launch,
.rules-content .move-type-move,
.rules-content .move-type-jump,
.rules-content .move-type-fly,
.rules-content .stack-text,
.rules-content .beat-text {
    color: #2d241f;
    padding: 0;
    border-radius: 0;
}

.rules-content .move-type-launch {
    background: rgba(166, 216, 183, 0.4);
}

.rules-content .move-type-move {
    background: rgba(120, 144, 212, 0.4);
}

.rules-content .move-type-jump {
    background: rgba(175, 204, 234, 0.4);
}

.rules-content .move-type-fly {
    background: rgba(236, 189, 153, 0.4);
}

.rules-content .stack-text {
    background: rgba(247, 160, 153, 0.4);
}

.rules-content .beat-text {
    background: rgba(233, 193, 223, 0.4);
}

/* 滚动条样式 */
.game-rules-panel::-webkit-scrollbar {
    width: 4px;
}

.game-rules-panel::-webkit-scrollbar-track {
    background: var(--bg-almost-none);
    border-radius: 3px;
}

.game-rules-panel::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 3px;
    transition: background 0.2s ease;
}

.game-rules-panel::-webkit-scrollbar-thumb:hover {
    background: var(--border-light);
    cursor: pointer;
}

/* SVG 元素样式 */
#checkmark circle[fill="transparent"],
#chess circle[fill="transparent"] {
    pointer-events: all;
}

/* AI托管遮罩层样式 */
.ai-takeover-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 50;
    display: none;
    pointer-events: none;
}

.ai-takeover-overlay.active {
    display: block;
    pointer-events: auto;
}

/* 模态框样式 */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.room-code-input-section {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* 四个输入框容器 */
.room-code-inputs-container {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
}

/* 单个字符输入框样式 */
.room-code-digit-input {
    width: 50px;
    height: 50px;
    border: 2px solid var(--border-light);
    border-radius: 12px;
    background: transparent;
    color: #2d241f;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    transition: all 0.3s ease;
    box-sizing: border-box;
    text-transform: uppercase;
}

.room-code-digit-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: none;
    transform: scale(1.05);
}

.room-code-digit-input:hover {
    box-shadow: none;
}

/* 输入框有内容时的样式 */
.room-code-digit-input.filled {
    border-color: var(--primary-color);
}

.room-code-input {
    padding: 12px 16px;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-base);
    background: transparent;
    color: #2d241f;
    font-size: 1rem;
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.room-code-input::placeholder {
    color: rgba(255, 255, 255, 0.743);
}

.modal-error {
    padding: 10px;
    background: rgba(244, 67, 54, 0.1);
    border: 1px solid rgba(244, 67, 54, 0.3);
    border-radius: 6px;
    margin-bottom: 15px;
}

.error-message {
    color: #F44336;
    font-size: 14px;
    text-align: center;
}

.modal-footer {
    display: flex;
    gap: 10px;
    padding: 20px;
    border-top: 1px solid var(--bg-almost-none);
    background: var(--bg-soft);
}

.modal-btn {
    flex: 1;
    padding: 6px;
    border: 2px solid var(--border-light);
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.3s ease;
    background: transparent;
    color: #2d241f;
}

.modal-btn.secondary {
    border-color: var(--border-faint);
}

.modal-btn.primary {
    border-color: var(--ui-default-color);
}

.modal-btn:hover {
    border-color: #2d241f;
    box-shadow: none;
}

.modal-btn.primary:disabled {
    cursor: not-allowed;
}

.waiting-for-host {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.waiting-text {
    font-size: 18px;
    color: #2d241f;
    text-shadow: none;
}

.room-error-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 106, 95);
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 8px;
    z-index: 10000;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px);
    border: 2px solid var(--border-light);
    pointer-events: none;
    animation: toast-fade-in 0.3s ease;
}

@keyframes toast-fade-in {
    from {
        opacity: 0;
        transform: translate(-50%, -40%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.multiplayer-error {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(255, 106, 95);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
    border: 2px solid var(--border-light);
    color: white;
    padding: 10px 15px;
    border-radius: 8px;
    z-index: 10000;
    font-size: 14px;
    max-width: 300px;
}

/* 聊天消息显示样式 */
.chat-message-display {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    display: none;
}

.chat-message-content {
    position: absolute;
    background: rgb(245, 245, 240);
    border: 1.5px solid var(--ui-default-color);
    border-radius: 8px;
    color: #2d241f;
    padding: 5px 8px;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    width: auto;
    min-width: 100px;
    max-width: 80%;
    min-height: auto;
    max-height: auto;
    display: inline-block;
    align-items: center;
    justify-content: left;
    word-wrap: nowrap;
    line-height: 1.4;
    overflow: visible;
    animation: chatMessageFadeIn 0.3s ease-out;
    bottom: 20px;
    left: 20px;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}

.chat-message-display.fade-out .chat-message-content {
    animation: chatMessageFadeOut 0.3s ease-in;
}

/* ===== 骰子选择器样式 ===== */
.dice-selection-panel {
    position: absolute;
    bottom: 50px;
    left: 0;
    width: 200px;
    max-height: 200px;
    background: var(--bg-light-1);
    border: 2px solid var(--border-light);
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    display: block;
    z-index: 1000;
}

.dice-selection-panel h3 {
    color: #2d241f;
    margin: 0;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: bold;
    text-shadow: none;
    border-bottom: 1px solid var(--border-soft);
    background: transparent;
}

.dice-selection-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 6px;
    padding: 10px;
}

.dice-selection-btn {
    width: 100%;
    height: 50px;
    font-size: 48px;
    font-weight: normal;
    color: #2d241f;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dice-selection-btn:hover {
    border-radius: var(--radius-base);
    transform: scale(1.15);
}

/* ===== 道具通知样式 ===== */
.game-notification {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-light-1);
    color: rgba(45, 36, 31, 0.95);
    padding: 7px 11px;
    border-radius: var(--radius-base);
    border: 1.5px solid var(--border-light);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    font-size: 16px;
    font-weight: 500;
    z-index: 10000;
    animation: fadeInOutCenter 3s ease forwards;
    backdrop-filter: none;
    pointer-events: none !important; /* 强制不拦截任何鼠标事件 */
    width: max-content;
    max-width: 80%;
    word-break: break-word;
    text-align: center;
    /* 额外的安全措施 */
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

/* 平板和手机端通用样式 */
@media (max-width: 1260px) {
    body {
        padding: 0;
        align-items: flex-start;
    }

    .mode-buttons {
        display: flex;
        flex-direction: column;
        gap: 30px;
        margin: 20px 0;
    }

    .main-layout {
        flex-direction: column;
        align-items: center;
        padding: 10px;
        gap: 15px;
        width: 100%;
    }

    .game-container {
        width: 100%;
        max-width: 100%;
        order: 1;
    }

    .game-notification {
        left: 50%;
        transform: translateX(-50%);
        animation: fadeInOutCenter 3s ease forwards;
        text-align: center;
    }

    .control-panel {
        width: 100%;
        max-width: none;
        order: 2;
        min-height: auto;
    }

    .main-layout .control-panel {
        height: auto;
        justify-content: flex-start;
        align-items: center;
        padding: 20px 0;
    }

    .control-panel-inner {
        max-width: none;
        width: 100%;
    }

    .game-control-content {
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        padding: 10px 0;
    }

    .players-info {
        width: 100%;
        height: 100%;
    }
    .polyhedral-dice-display{
        font-size: 34px;
    }
    .polyhedral-dice-display .reel-strip span,
    .polyhedral-dice-display .final-number {
        font-size: 34px;
    }
    .polyhedral-dice-display .reel-strip span {
        height: 40px;
        line-height: 40px;
    }
    .polyhedral-dice-display::before {
        width: 45px;
        height: 45px;
    }
    .polyhedral-dice-display .reel-viewport {
        width: 45px;
        height: 45px;
        left: 37px;
        top: 22px;
    }
    #board-svg {
        width: min(500px, 90vw);
        height: min(500px, 90vw);
    }

    .player-info.pos-tr {
        top: 8%;
        right: 8%;
    }

    .player-info.pos-br {
        bottom: 8%;
        right: 8%;
    }

    .player-info.pos-bl {
        bottom: 8%;
        left: 8%;
    }

    .player-info.pos-tl {
        top: 8%;
        left: 8%;
    }

    /* 调整控制面板内容 */
    .control-content {
        gap: 10px;
    }

    .game-info-panel {
        max-height: 250px;
        max-width: none;
    }

    .progress-panel {
        max-height: 250px;
    }

    /* 调整房间号显示 */
    .game-room-code-display {
        font-size: 20px;
    }

    .emoji-panel {
        width: 260px;
        bottom: 50px;
    }

    .index-content {
        flex-direction: column;
        gap: 20px;
    }

    .tip-content {
        font-size: 0.7rem;
        line-height: 16px;
    }

    .tip-content.slide-up-out {
        transform: translateY(-16px);
    }

    .tip-content.slide-up-in {
        transform: translateY(16px);
    }

    .tip-content.show {
        transform: translateY(0);
        opacity: 1;
    }

    .color-options {
        grid-template-columns: repeat(auto-fit, minmax(60px, auto));
        gap: 10px;
        width: 100%;
        max-width: none;
    }

    .bot-players {
        flex-wrap: wrap;
        gap: 10px;
    }

    .player-setup-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        justify-content: center;
    }

    /* 聊天消息显示在顶部 */
    .chat-message-content {
        bottom: auto;
        top: 5px;
        left: 20px;
    }

    .skill-icon,
    .lightning-icon,
    .chat-icon {
        width: 32px;
        height: 32px;
        padding: 3px;
    }
}

/* 中屏优化：三个板块水平排列、等高，内部内容均匀分布 */
@media (min-width: 695px) and (max-width: 1260px) {
    .game-control-content {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 12px;
        align-items: stretch;
        width: 100%;
    }
    /* 第2列（完成进度）：内部进度条均匀分布 */
    .game-control-content > .game-panel-section:nth-child(2) {
        display: flex;
        flex-direction: column;
    }
    .game-control-content > .game-panel-section:nth-child(2) .progress-panel {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .game-control-content > .game-panel-section:nth-child(2) .panel-body-container {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .game-control-content > .game-panel-section:nth-child(2) .progress-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }
    /* 第3列（操作按钮）：内部按钮均匀分布 */
    .game-control-content > .game-panel-section:nth-child(3) {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }
    .game-control-content > .game-panel-section:nth-child(3) .game-room-code-display-column {
        display: block;
        margin: 0 10% 6px 10%;
        padding: 8px 12px;
        font-size: 16px;
    }
    .control-title .game-room-code-display {
        display: none !important;
    }
}

/* 小型平板优化 (480px - 1000px) - 防止user-info和棋盘重叠 */
@media (max-width: 1000px) and (min-width: 520px) {

    #board-svg {
        width: min(380px, 75vw);
        height: min(380px, 75vw);
    }

    .players-info {
        width: 110%;
        height: 75%;
    }

    /* 调整玩家头像位置，更靠近边缘 */
    .player-info.pos-tr {
        top: 5%;
        right: 5%;
    }

    .player-info.pos-br {
        bottom: 5%;
        right: 5%;
    }

    .player-info.pos-bl {
        bottom: 5%;
        left: 5%;
    }

    .player-info.pos-tl {
        top: 5%;
        left: 5%;
    }

    /* 减小玩家头像大小 */
    .player-avatar {
        width: 42px;
        height: 42px;
        border-width: 2.5px;
    }

    .player-emoji {
        width: 42px;
        height: 42px;
    }

    .player-name {
        max-width: 80px;
        font-size: 12px;
    }

    /* 调整棋盘大小 */
    .energy-bar-container {
        height: 50px;
        border-radius: 10px;
    }

    .energy-value {
        font-size: 9px;
    }

    /* 减小击败次数显示 */
    .defeat-count {
        width: 25px;
        height: 18px;
        font-size: 18px;
    }

    /* 调整控制面板字体大小 */
    .control-title h3 {
        font-size: 20px;
    }

    .control-section h3,
    .game-panel-section h3 {
        font-size: 16px;
    }

    /* 调整游戏控制区域 */
    .dice-icon {
        font-size: 60px;
        height: 80px;
        width: 100px;
        line-height: 1;
        padding: 0;
    }

    .thinking-progress-container {
        width: 160px;
    }

    .polyhedral-dice-display {
        height: 80px;
        width: 100px;
        font-size: 30px;
        margin: 18px 0;
    }

    .polyhedral-dice-display .reel-strip span,
    .polyhedral-dice-display .final-number {
        font-size: 30px;
    }

    .polyhedral-dice-display .reel-strip span {
        height: 37px;
        line-height: 37px;
    }

    .polyhedral-dice-display::before {
        width: 42px;
        height: 42px;
    }

    .polyhedral-dice-display .reel-viewport {
        width: 42px;
        height: 42px;
        left: 29px;
        top: 19px;
    }

    /* 调整传送门和盲盒图标 */
    #teleportIcon,
    #mysteryBoxIcon {
        height: 80px;
        width: 100px;
        margin: 18px 0;
    }

    #teleportIcon svg,
    #mysteryBoxIcon svg {
        width: 48px;
        height: 48px;
    }

    .loading-indicator,
    .pause-indicator,
    .chat-input-area {
        height: 80px;
        min-height: 80px;
        margin: 18px 0;
    }

    /* 聊天消息显示在顶部 */
    .chat-message-content {
        bottom: auto;
        top: 5px;
        left: 20px;
    }

    .skill-icon,
    .lightning-icon,
    .chat-icon {
        width: 32px;
        height: 32px;
        padding: 3px;
    }
}

/* 手机端媒体查询 */
@media (max-width: 695px) {
    body {
        margin: 0
    }

    /* 手机端聊天消息圆角更小 */
    .chat-message-content {
        border-radius: 5px;
    }

    .rules-modal-content {
        max-width: 70%;
    }

    .room-chat-drawer {
        height: min(320px, calc(100% - 16px));
        width: 0;
        max-width: 94%;
    }

    .room-chat-drawer.is-open {
        width: min(250px, calc(100% - 6px - var(--control-content-padding-right, 10px)));
    }

    .room-chat-emoji-panel {
        left: 0;
        right: 0;
        width: auto;
        max-width: 100%;
        bottom: 36px;
    }

    .room-chat-emoji-panel-content {
        padding: 5px;
        gap: 3px;
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .room-chat-emoji-item {
        width: auto;
        min-width: 0;
        height: 23px;
        font-size: 16px;
        border-radius: 4px;
    }

    .username-input-group {
        width: 85%;
        max-width: none;
    }

    .username-input-with-icon {
        width: 100%;
    }

    /* 主布局在移动端改为垂直布局 */
    .main-layout {
        flex-direction: column;
        padding: 0;
        gap: 0;
        width: 100%;
    }

    .control-panel-inner {
        order: 2;
        border-radius: 12px;
        padding: 15px;
        box-sizing: border-box;
        min-height: 100px;
        margin: 0 15px 15px 15px;
        width: calc(100% - 50px);
        align-self: center;
    }

    .game-info-panel {
        height: 320px;
        width: auto;
        min-width: auto;
        max-width: none;
        margin-bottom: 15px;
    }

    .progress-panel {
        height: auto;
        min-height: auto;
        max-height: 200px;
        margin-bottom: 0;
    }

    .game-container {
        flex-direction: column;
        width: 100%;
        min-width: auto;
        padding: 10px 0;
        box-sizing: border-box;
        order: 1;
    }

    /* 隐藏桌面端玩家信息 */
    .players-info {
        display: none;
    }

    /* 显示移动端玩家信息 */
    .players-top,
    .players-bottom {
        display: flex;
        justify-content: space-between;
        padding: 0px 20px;
        width: 100%;
        box-sizing: border-box;
    }

    .players-top {
        order: 1;
    }

    .players-bottom {
        order: 3;
    }

    /* 移动端棋盘样式*/
    #board-svg {
        width: 100% !important;
        height: auto !important;
        max-width: 100vw;
        aspect-ratio: 1;
        min-width: 280px;
    }

    .board-container {
        width: 100%;
        order: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        box-sizing: border-box;
    }

    .player-info {
        position: static;
        flex-direction: row;
        align-items: center;
        gap: 5px;
    }

    /* 移动端击败次数样式 */
    .defeat-counts-mobile {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    /* 移动端积分条样式 */
    .energy-bar-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding-left: 0;
        padding-right: 0;
    }

    .energy-value {
        font-size: 9px;
    }

    .player-info.mobile-right .energy-bar-wrapper {
        order: 3;
    }

    .player-info.mobile-left .energy-bar-wrapper {
        order: 1;
    }

    .player-info.mobile-left .player-main {
        order: 2;
    }

    .player-info.mobile-left .defeat-counts {
        order: 3;
    }

    .player-info.mobile-right .defeat-counts {
        order: 1;
    }

    .player-info.mobile-right .player-main {
        order: 2;
    }

    .player-main {
        order: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }

    .player-avatar {
        width: 40px;
        height: 40px;
    }

    .player-name {
        max-width: 80px;
        font-size: 12px;
    }

    /* 移动端游戏控制区域 */
    .game-controls {
        order: 4;
        margin-top: 10px;
    }

    .dice-icon {
        font-size: 60px;
        height: 75px;
        width: 100px;
        line-height: 1;
        margin: 15px 0;
        padding: 0;
    }

    .dice-icon:hover {
        transform: scale(1);
    }

    /* 移动端多面骰子 */
    .polyhedral-dice-display {
        height: 75px;
        width: 100px;
        font-size: 28px;
        margin: 15px 0;
    }

    .polyhedral-dice-display .reel-strip span,
    .polyhedral-dice-display .final-number {
        font-size: 28px;
    }

    .polyhedral-dice-display .reel-strip span {
        height: 30px;
        line-height: 30px;
    }

    .polyhedral-dice-display::before {
        width: 35px;
        height: 35px;
    }

    .polyhedral-dice-display .reel-viewport {
        width: 35px;
        height: 35px;
        left: 33px;
        top: 20px;
    }

    /* 移动端传送门和盲盒图标 */
    #teleportIcon,
    #mysteryBoxIcon {
        height: 75px;
        width: 100px;
        margin: 15px 0;
    }

    .energy-gain-text {
        height: 75px;
        width: 100px;
        margin: 15px 0;
        padding: 6px;
        border-radius: 10px;
        gap: 2px;
    }

    .loading-indicator,
    .pause-indicator,
    .chat-input-area {
        height: 75px;
        min-height: 75px;
        margin: 15px 0;
    }

    .dice-selector {
        grid-template-columns: repeat(6, 1fr);
        gap: 6px;
    }

    .dice-btn {
        padding: 5px;
        font-size: 22px;
    }

    .debug-move-btn {
        padding: 6px 10px;
        font-size: 11px;
    }

    .index-content {
        flex-direction: column;
        gap: 20px;
    }

    .tip-content.slide-up-out {
        transform: translateY(-16px);
    }

    .tip-content.slide-up-in {
        transform: translateY(16px);
    }

    .color-options {
        grid-template-columns: repeat(auto-fit, minmax(60px, auto));
        gap: 10px;
        width: 100%;
        max-width: 400px;
    }

    .bot-players {
        flex-wrap: wrap;
        gap: 10px;
    }

    .modal-content {
        width: 90%;
        margin: 10px;
        max-height: 90vh;
        display: flex;
        flex-direction: column;
    }

    .modal-header {
        padding: 12px 15px;
        flex-shrink: 0;
    }

    .modal-body {
        flex: 1;
        overflow-y: auto;
        padding: 10px 15px;
        min-height: 0;
    }

    .modal-footer {
        padding: 10px 15px;
        flex-shrink: 0;
    }

    .modal-header h2 {
        font-size: 18px;
        white-space: nowrap;
    }

    .settlement-rankings {
        gap: 10px;
    }

    .settlement-rankings .flip-card-front {
        padding: 6px;
    }

    .ranking-item {
        padding: 6px 8px;
        min-height: 35px;
    }

    .ranking-name {
        font-size: 14px;
    }

    .ranking-progress {
        font-size: 12px;
    }

    .ranking-position {
        font-size: 10px;
        min-width: 20px;
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        margin-right: 10px;
    }

    .ranking-info {
        flex: 1;
        margin-left: 0;
        min-width: 0;
    }

    .ranking-defeats {
        gap: 0px;
        flex-shrink: 0;
    }

    .ranking-defeats .defeat-count {
        font-size: 20px;
        min-width: 20px;
    }

    .ranking-avatar {
        width: 30px;
        height: 30px;
        margin-right: 8px;
        flex-shrink: 0;
    }

    .btn-primary {
        padding: 10px 16px;
        font-size: 14px;
    }

    .player-setup-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        justify-content: center;
    }

    .chat-icon,
    .skill-icon,
    .lightning-icon {
        width: 30px;
        height: 30px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .chat-message-content {
        padding: 10px;
        font-size: 12px;
        font-weight: 500;
        text-align: center;
        width: 400px;
        min-height: 20px;
        max-height: 20px;
        display: flex;
        align-items: center;
        justify-content: left;
        left: 22%;
        word-wrap: nowrap;
        line-height: 1.4;
        overflow: hidden;
        animation: chatMessageFadeIn 0.3s ease-out;
        top: 20px;
        box-sizing: border-box;
    }

    /* 移动端emoji面板适配 */
    .emoji-panel {
        width: 250px;
        bottom: 45px;
    }

    .emoji-panel-content {
        grid-template-columns: repeat(6, 1fr);
        gap: 6px;
        max-height: 150px;
    }

    .emoji-item {
        width: 32px;
        height: 32px;
        font-size: 20px;
    }

    .emoji-btn {
        width: 24px;
        height: 24px;
        margin-right: 3px;
    }

    .chat-send-btn {
        width: 24px;
        height: 24px;
    }

    /* 移动端道具面板样式 */
    .skill-panel {
        width: 340px;
        bottom: 45px;
        right: 20px;
        left: auto;
    }


    .skill-panel-header {
        padding: 8px 10px;
        gap: 4px;
    }

    .skill-panel-header h4 {
        font-size: 13px;
    }

    .skill-energy-hint {
        font-size: 9px;
    }

    .skill-energy-display {
        font-size: 11px;
    }

    .skill-panel-content {
        padding: 8px;
        gap: 8px;
        max-height: 300px;
        grid-template-columns: repeat(2, 1fr);
    }

    .skill-item {
        padding: 8px;
        gap: 8px;
    }

    .skill-icon-container {
        width: 36px;
        height: 36px;
    }

    .skill-icon-container svg {
        width: 28px;
        height: 28px;
    }

    .skill-name {
        font-size: 13px;
    }

    .skill-desc {
        font-size: 10px;
    }

    .skill-cost {
        font-size: 9px;
    }

    /* 移动端骰子选择面板 */
    .dice-selection-panel {
        width: 200px;
        bottom: 45px;
    }

    .dice-selection-panel h3 {
        font-size: 12px;
        padding: 6px 10px;
    }

    .dice-selection-container {
        gap: 5px;
        padding: 8px;
    }

    .dice-selection-btn {
        height: 45px;
        font-size: 36px;
    }

    /* 移动端游戏通知弹窗适配 */
    .game-notification {
        left: 50%;
        transform: translateX(-50%);
        animation: fadeInOutCenter 3s ease forwards;
        max-width: 90%;
        font-size: 14px;
        padding: 6px 10px;
        width: max-content;
        text-align: center;
    }

    /* 移动端积分粒子适配 */
    .energy-particle {
        width: 4px;
        height: 4px;
    }

    /* 移动端隐藏棋子数这一列 */
    .public-room-list-head,
    .public-room-item {
        grid-template-columns: 1.6fr 1fr 0.8fr 1.1fr;
    }

    .public-room-list-head .head-col:nth-child(3),
    .public-room-piece-count {
        display: none;
    }

    .public-room-list-head .head-col:last-child,
    .public-room-status {
        text-align: right;
    }
}

@media(max-width: 380px) {
    .skill-panel {
        width: calc(100% - 20px);
        right: 10px;
        left: 10px;
        max-width: 340px;
    }
}