:root {
    --primary-color: #4a6bdf;
    --secondary-color: #6c757d;
    --info-color: #17a2b8;
    --success-color: #28a745;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
    --bg-color: #f8f9fa;
    --card-bg: #ffffff;
    --text-color: #212529;
    --border-color: #dee2e6;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

h1, h2, h3 {
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.card {
    background-color: var(--card-bg);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.form-group {
    margin-bottom: 1rem;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

input, textarea, select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 1rem;
}

textarea {
    min-height: 100px;
    resize: vertical;
}

.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
    text-decoration: none;
    text-align: center;
}

.btn:hover {
    opacity: 0.9;
}

.btn.primary {
    background-color: var(--primary-color);
}

.btn.secondary {
    background-color: var(--secondary-color);
}

.btn.info {
    background-color: var(--info-color);
}

.btn.success {
    background-color: var(--success-color);
}

.btn.warning {
    background-color: var(--warning-color);
    color: var(--text-color);
}

.btn.danger {
    background-color: var(--danger-color);
}

.btn.small {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.btn-block {
    display: block;
    width: 100%;
    margin-top: 1rem;
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

/* Game Page Styles */
.game-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
}

.game-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.room-info {
    font-size: 1rem;
    color: var(--secondary-color);
}

#game-status {
    font-size: 1.2rem;
    margin: 0.5rem 0;
    font-weight: 500;
}

#round-info, #word-display {
    font-size: 1.1rem;
    margin: 0.5rem 0;
}

.game-main {
    display: flex;
    gap: 2rem;  /* 增加间距 */
    flex-wrap: wrap;
}

/* 准备状态样式 */
.player-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.player-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.player-ready {
    color: var(--success-color);
    font-weight: bold;
}

.player-not-ready {
    color: var(--secondary-color);
    font-style: italic;
}

/* 倒计时悬浮窗样式 */
.countdown-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.countdown-content {
    background-color: white;
    padding: 30px 60px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.countdown-display {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--primary-color);
}

/* 游戏按钮容器，减小间距 */
.game-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;  /* 减小间距 */
    margin-top: 0.5rem;
}

.game-buttons .btn {
    margin: 0;  /* 移除默认margin */
}

/* 隐藏玩家准备状态的样式，用于游戏开始后 */
.player-ready-status {
    transition: opacity 0.3s;
}

.hide-ready-status .player-ready-status {
    display: none;
}

/* 聊天标题样式 */
#chat-heading {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

#chat-heading::after {
    content: '';
    display: inline-block;
    margin-left: 10px;
    height: 10px;
    width: 10px;
    border-radius: 50%;
}

#chat-heading.guessing::after {
    background-color: var(--danger-color);
}

#chat-heading.chatting::after {
    background-color: var(--success-color);
}

/* 画布容器样式 */
.canvas-container {
    flex: 1 1 70%;  /* 增加比例，让画布占更多空间 */
    display: flex;
    flex-direction: column;
}

#drawing-board {
    width: 100%;
    height: auto;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);  /* 增强阴影效果 */
    touch-action: none;
    margin-bottom: 0;  /* 移除底部边距 */
}

.drawing-tools {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;  /* 减少顶部边距 */
    padding: 1rem;
    background-color: var(--card-bg);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    align-items: center;
}

/* 增大工具栏中的按钮和控件 */
.tool-group {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.25rem 0;
}

.tool-group label {
    margin-bottom: 0;  /* 移除标签底部边距 */
    font-weight: 500;
    min-width: 50px;  /* 固定标签宽度 */
}

.tool-group select,
.tool-group input {
    padding: 0.5rem;
    font-size: 1rem;
}

/* 隐藏原生颜色选择器但保持可访问性 */
.hidden-color-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* 自定义颜色预览区域 */
.color-preview {
    width: 36px;
    height: 36px;
    border: 2px solid #ccc;
    border-radius: 4px;
    display: inline-block;
    cursor: pointer;
    transition: all 0.2s ease;
}

.color-preview:hover {
    transform: scale(1.1);
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

/* 增大工具栏按钮 */
.btn.small {
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
}

.game-sidebar {
    flex: 1 1 25%;  /* 减少侧边栏比例 */
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.player-list-container, .chat-container {
    background-color: var(--card-bg);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    padding: 1rem;
}

#player-list {
    list-style: none;
}

#chat-messages {
    height: 300px;
    overflow-y: auto;
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.5rem;
}

.chat-message {
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    border-radius: 4px;
}

.chat-message.system {
    background-color: rgba(108, 117, 125, 0.1);
    color: var(--secondary-color);
}

.chat-message.correct {
    background-color: rgba(40, 167, 69, 0.1);
    color: var(--success-color);
}

.chat-message.warning {
    background-color: rgba(255, 193, 7, 0.1);
    color: #d97706;
    font-weight: bold;
}

.chat-message.error {
    background-color: rgba(220, 53, 69, 0.1);
    color: var(--danger-color);
}

.chat-message.chat {
    background-color: rgba(74, 107, 223, 0.05);
}

.chat-message.guess {
    background-color: rgba(220, 53, 69, 0.05);
}

.chat-input-container {
    display: flex;
    gap: 0.5rem;
}

#chat-input {
    flex: 1;
}

/* 计时器样式 */
#timer-display {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0.5rem 0;
}

.timer-warning {
    color: var(--danger-color);
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* 房间列表样式 */
.room-list-container {
    margin-top: 2rem;
}

.room-card {
    background-color: var(--card-bg);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.room-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.room-id {
    font-weight: bold;
    color: var(--primary-color);
}

.loading, .no-rooms, .error {
    text-align: center;
    padding: 1rem;
    color: var(--secondary-color);
}

.error {
    color: var(--danger-color);
}

/* 游戏结束样式 */
.game-over-container {
    background-color: var(--card-bg);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    margin: 2rem auto;
    max-width: 600px;
    text-align: center;
}

.rankings-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.rankings-table th, .rankings-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}

.rankings-table th {
    background-color: rgba(74, 107, 223, 0.1);
    font-weight: 600;
}

.first-place {
    background-color: rgba(255, 215, 0, 0.1);
}

.second-place {
    background-color: rgba(192, 192, 192, 0.1);
}

.third-place {
    background-color: rgba(205, 127, 50, 0.1);
}

/* 游戏结束容器样式 */
.game-over-container {
    background-color: var(--card-bg);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    margin: 2rem auto;
    max-width: 600px;
    text-align: center;
}

.game-over-container #return-to-lobby {
    font-size: 1.2rem;
    padding: 0.8rem 2rem;
    margin-top: 1.5rem;
    transition: transform 0.2s;
}

.game-over-container #return-to-lobby:hover {
    transform: scale(1.05);
}

/* 游戏结束关闭提示样式 */
.game-closing-notice {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 15px 25px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    font-size: 1rem;
    z-index: 900;
    animation: fadeIn 0.5s;
}

.game-closing-notice p {
    margin: 5px 0;
}

#closing-countdown {
    font-weight: bold;
    color: var(--warning-color);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 导航栏样式 */
.nav-bar {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.nav-item {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}

.nav-item:hover {
    text-decoration: underline;
}

/* 模态框样式 */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
}

.modal-content {
    background-color: var(--card-bg);
    margin: 15% auto;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    max-width: 600px;
    position: relative;
}

.close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--secondary-color);
    cursor: pointer;
}

.close:hover {
    color: var(--primary-color);
}

.rules-content {
    margin-top: 1rem;
}

.rules-content p {
    margin-bottom: 1rem;
}

.rules-content ul {
    margin-left: 2rem;
    margin-bottom: 1rem;
}

/* 调整查看规则按钮样式 */
#show-rules {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    padding: 0.4rem 0.8rem;
}

/* 准备按钮样式 */
#ready-game.btn-success {
    background-color: var(--success-color);
}

/* 早结游戏提示样式 */
.early-end-note {
    color: var(--danger-color);
    margin-top: 1rem;
    font-style: italic;
}

/* 响应式布局调整 */
@media (max-width: 1200px) {
    .game-main {
        flex-direction: column;
    }
    
    .canvas-container, .game-sidebar {
        flex: 1 1 100%;
    }
    
    #drawing-board {
        height: 500px;  /* 在中等屏幕上使用固定高度 */
    }
}

@media (max-width: 768px) {
    #drawing-board {
        height: 400px;  /* 在小屏幕上减小高度 */
    }
    
    .drawing-tools {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .tool-group {
        width: 100%;
    }
    
    .form-actions {
        flex-direction: column;
    }
}

@media (min-width: 601px) and (max-width: 768px) {
    .countdown-content {
       padding: 25px 30px;
    }
    .countdown-display {
       font-size: 2.2rem;
       white-space: nowrap;
    }
}

@media (max-width: 600px) {
    .countdown-content {
        padding: 20px 15px;
        max-width: 90vw;
        width: auto;
    }

    .countdown-display {
        font-size: 2rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .game-closing-notice {
        padding: 10px 15px;
        width: auto;
        max-width: 95vw;
    }

    .game-closing-notice p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 3px 0;
    }

    .game-header h1 {
        font-size: 1.5rem; 
    }

    .btn {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
    }

     .btn.small {
        padding: 0.5rem 0.8rem;
        font-size: 0.8rem;
    }
    
    #chat-messages {
        height: 150px;
    }
}