/* Global Styles */
:root {
    --primary-color: #1b8050;
    --secondary-color: #20332a;
    --accent-color: #e74c3c;
    --light-color: #f5f5f5;
    --dark-color: #333;
    --gray-color: #7f8c8d;
    --border-color: #ddd;
    --success-color: #2ecc71;
    --warning-color: #f39c12;
    --danger-color: #e74c3c;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
}

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

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

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: var(--transition);
}

a:hover {
    color: var(--secondary-color);
}

ul {
    list-style: none;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: var(--transition);
    text-align: center;
}

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

.primary-btn:hover {
    background-color: #15683f;
    color: white;
}

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

.secondary-btn:hover {
    background-color: #16261e;
    color: white;
}

/* CTA Section - How to Play 頁面按鈕區塊 */
.cta-section {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
    text-align: center;
}

.cta-section .btn {
    min-width: 180px;
}

@media (max-width: 480px) {
    .cta-section {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .cta-section .btn {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }
}

.hidden {
    display: none !important;
}

/* Header Styles */
header {
    background-color: white;
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 100;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
}

.logo h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-color);
}

nav ul {
    display: flex;
    align-items: center;
}

nav ul li {
    margin-left: 20px;
    display: flex;
    align-items: center;
}

nav ul li a {
    color: var(--dark-color);
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    line-height: 1.6;
}

nav ul li a:hover,
nav ul li a.active {
    color: var(--primary-color);
}

/* Nav Dropdown Styles */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-trigger {
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--dark-color);
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 4px;
    background: none;
    border: none;
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.6;
}

.nav-dropdown-trigger:hover,
.nav-dropdown-trigger.active {
    color: var(--primary-color);
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    min-width: 180px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
    overflow: hidden;
}

.nav-dropdown.active .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown-item {
    display: block;
    padding: 12px 16px;
    text-decoration: none;
    color: #20332a;
    transition: all 0.15s ease;
    border-bottom: 1px solid #f1f3f5;
}

.nav-dropdown-item:last-child {
    border-bottom: none;
}

.nav-dropdown-item:hover {
    background: #f8f9fa;
    color: var(--primary-color);
}

.nav-dropdown-item .item-title {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.nav-dropdown-item .item-desc {
    display: block;
    font-size: 0.75rem;
    color: #7f8c8d;
}

.nav-dropdown-item:hover .item-desc {
    color: #95a5a6;
}

/* Mobile nav dropdown styles */
@media (max-width: 768px) {
    .nav-dropdown {
        display: block;
        width: 100%;
        position: static;
    }
    
    .nav-dropdown-menu {
        position: static;
        transform: none;
        box-shadow: none;
        border-radius: 0;
        background: #f8f9fa;
        max-height: 0;
        overflow: hidden;
        opacity: 1;
        visibility: visible;
        transition: max-height 0.3s ease;
        width: 100%;
        left: 0;
    }
    
    .nav-dropdown.active .nav-dropdown-menu {
        max-height: 200px;
        transform: none;
    }
    
    .nav-dropdown-item {
        display: block;
        padding: 10px 20px;
        border-bottom: 1px solid #e9ecef;
        text-align: left;
        width: 100%;
    }
    
    .nav-dropdown-item .item-title,
    .nav-dropdown-item .item-desc {
        text-align: left;
    }
    
    .nav-dropdown-trigger {
        display: block;
        padding: 13px 10px;
        width: 100%;
        text-align: left;
        border-bottom: 1px solid var(--border-color);
        line-height: normal;
    }
}

.auth-buttons {
    display: flex;
    gap: 10px;
}

.auth-buttons button {
    padding: 8px 15px;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

/* 🎯 智慧響應式登入/註冊按鈕 - 支援多語言長文字 */
.login-btn, .signup-btn {
    /* 基礎樣式 */
    padding: clamp(8px, 2vw, 12px) clamp(12px, 3vw, 20px);
    font-size: clamp(13px, 2.5vw, 16px);
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid var(--primary-color);
    
    /* 防止斷行和確保單行顯示 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0; /* 允許彈性縮小 */
    flex-shrink: 1; /* 允許在父容器中縮小 */
    
    /* 確保最小可讀性 */
    min-width: clamp(60px, 15vw, 80px);
    max-width: clamp(120px, 25vw, 150px);
}

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

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

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

.signup-btn:hover {
    background-color: #15683f;
}

/* 🌍 語言特定的按鈕優化 */
/* 為越南文和其他長文字語言提供額外空間 */
[lang="vi"] .login-btn,
[lang="vi"] .signup-btn,
body[data-lang="vi"] .login-btn,
body[data-lang="vi"] .signup-btn {
    font-size: clamp(11px, 2.2vw, 14px); /* 稍微縮小字體 */
    padding: clamp(7px, 1.8vw, 10px) clamp(10px, 2.5vw, 16px); /* 稍微縮小內距 */
    max-width: clamp(100px, 22vw, 140px); /* 稍微縮小最大寬度 */
}

/* 🔄 確保 auth-buttons 容器也支援彈性佈局 */
.auth-buttons {
    display: flex;
    gap: clamp(8px, 2vw, 12px);
    align-items: center;
    flex-wrap: nowrap; /* 確保不換行 */
}

/* 📱 極小螢幕的額外保護 (320px 以下) */
@media (max-width: 320px) {
    .login-btn, .signup-btn {
        font-size: 11px !important;
        padding: 6px 8px !important;
        min-width: 50px !important;
        max-width: 70px !important;
    }
    
    [lang="vi"] .login-btn,
    [lang="vi"] .signup-btn,
    body[data-lang="vi"] .login-btn,
    body[data-lang="vi"] .signup-btn {
        font-size: 10px !important;
        padding: 5px 6px !important;
        max-width: 65px !important;
    }
    
    [lang="de"] .login-btn, [lang="de"] .signup-btn,
    [lang="es"] .login-btn, [lang="es"] .signup-btn,
    [lang="fr"] .login-btn, [lang="fr"] .signup-btn,
    [lang="it"] .login-btn, [lang="it"] .signup-btn,
    [lang="ru"] .login-btn, [lang="ru"] .signup-btn,
    [lang="th"] .login-btn, [lang="th"] .signup-btn,
    [lang="pl"] .login-btn, [lang="pl"] .signup-btn,
    [lang="cs"] .login-btn, [lang="cs"] .signup-btn,
    [lang="hu"] .login-btn, [lang="hu"] .signup-btn,
    [lang="et"] .login-btn, [lang="et"] .signup-btn,
    body[data-lang="de"] .login-btn, body[data-lang="de"] .signup-btn,
    body[data-lang="es"] .login-btn, body[data-lang="es"] .signup-btn,
    body[data-lang="fr"] .login-btn, body[data-lang="fr"] .signup-btn,
    body[data-lang="it"] .login-btn, body[data-lang="it"] .signup-btn,
    body[data-lang="ru"] .login-btn, body[data-lang="ru"] .signup-btn,
    body[data-lang="th"] .login-btn, body[data-lang="th"] .signup-btn,
    body[data-lang="pl"] .login-btn, body[data-lang="pl"] .signup-btn,
    body[data-lang="cs"] .login-btn, body[data-lang="cs"] .signup-btn,
    body[data-lang="hu"] .login-btn, body[data-lang="hu"] .signup-btn,
    body[data-lang="et"] .login-btn, body[data-lang="et"] .signup-btn {
        font-size: 10px !important;
        padding: 5px 6px !important;
        max-width: 65px !important;
    }
    
    .auth-buttons {
        gap: 6px;
    }
}

/* 📱 小手機螢幕優化 (321px - 480px) */
@media (max-width: 480px) {
    .login-btn, .signup-btn {
        font-size: clamp(12px, 3vw, 14px);
        padding: clamp(6px, 2vw, 10px) clamp(8px, 2.5vw, 14px);
    }
    
    [lang="vi"] .login-btn,
    [lang="vi"] .signup-btn,
    body[data-lang="vi"] .login-btn,
    body[data-lang="vi"] .signup-btn {
        font-size: clamp(11px, 2.8vw, 13px);
        padding: clamp(5px, 1.8vw, 9px) clamp(7px, 2.2vw, 12px);
    }
    
    [lang="de"] .login-btn, [lang="de"] .signup-btn,
    [lang="es"] .login-btn, [lang="es"] .signup-btn,
    [lang="fr"] .login-btn, [lang="fr"] .signup-btn,
    [lang="it"] .login-btn, [lang="it"] .signup-btn,
    [lang="ru"] .login-btn, [lang="ru"] .signup-btn,
    [lang="th"] .login-btn, [lang="th"] .signup-btn,
    [lang="pl"] .login-btn, [lang="pl"] .signup-btn,
    [lang="cs"] .login-btn, [lang="cs"] .signup-btn,
    [lang="hu"] .login-btn, [lang="hu"] .signup-btn,
    [lang="et"] .login-btn, [lang="et"] .signup-btn,
    body[data-lang="de"] .login-btn, body[data-lang="de"] .signup-btn,
    body[data-lang="es"] .login-btn, body[data-lang="es"] .signup-btn,
    body[data-lang="fr"] .login-btn, body[data-lang="fr"] .signup-btn,
    body[data-lang="it"] .login-btn, body[data-lang="it"] .signup-btn,
    body[data-lang="ru"] .login-btn, body[data-lang="ru"] .signup-btn,
    body[data-lang="th"] .login-btn, body[data-lang="th"] .signup-btn,
    body[data-lang="pl"] .login-btn, body[data-lang="pl"] .signup-btn,
    body[data-lang="cs"] .login-btn, body[data-lang="cs"] .signup-btn,
    body[data-lang="hu"] .login-btn, body[data-lang="hu"] .signup-btn,
    body[data-lang="et"] .login-btn, body[data-lang="et"] .signup-btn {
        font-size: clamp(11px, 2.8vw, 13px);
        padding: clamp(5px, 1.8vw, 9px) clamp(7px, 2.2vw, 12px);
    }
}

/* 🌐 德文、西班牙文、法文、義大利文等長文字語言按鈕優化 */
[lang="de"] .login-btn, [lang="de"] .signup-btn,
[lang="es"] .login-btn, [lang="es"] .signup-btn,
[lang="fr"] .login-btn, [lang="fr"] .signup-btn,
[lang="it"] .login-btn, [lang="it"] .signup-btn,
body[data-lang="de"] .login-btn, body[data-lang="de"] .signup-btn,
body[data-lang="es"] .login-btn, body[data-lang="es"] .signup-btn,
body[data-lang="fr"] .login-btn, body[data-lang="fr"] .signup-btn,
body[data-lang="it"] .login-btn, body[data-lang="it"] .signup-btn {
    font-size: clamp(11px, 2.2vw, 14px);
    padding: clamp(7px, 1.8vw, 10px) clamp(10px, 2.5vw, 16px);
    max-width: clamp(100px, 22vw, 140px);
}


/* 🌐 俄文、泰文、波蘭文、捷克文、匈牙利文、愛沙尼亞文按鈕優化 */
[lang="ru"] .login-btn, [lang="ru"] .signup-btn,
[lang="th"] .login-btn, [lang="th"] .signup-btn,
[lang="pl"] .login-btn, [lang="pl"] .signup-btn,
[lang="cs"] .login-btn, [lang="cs"] .signup-btn,
[lang="hu"] .login-btn, [lang="hu"] .signup-btn,
[lang="et"] .login-btn, [lang="et"] .signup-btn,
body[data-lang="ru"] .login-btn, body[data-lang="ru"] .signup-btn,
body[data-lang="th"] .login-btn, body[data-lang="th"] .signup-btn,
body[data-lang="pl"] .login-btn, body[data-lang="pl"] .signup-btn,
body[data-lang="cs"] .login-btn, body[data-lang="cs"] .signup-btn,
body[data-lang="hu"] .login-btn, body[data-lang="hu"] .signup-btn,
body[data-lang="et"] .login-btn, body[data-lang="et"] .signup-btn {
    font-size: clamp(11px, 2.2vw, 14px);
    padding: clamp(7px, 1.8vw, 10px) clamp(10px, 2.5vw, 16px);
    max-width: clamp(100px, 22vw, 140px);
}

/* 📱 防止長文字語言在手機版 header 按鈕斷行到下一列 */
@media (max-width: 768px) {
    [lang="de"] .auth-buttons,
    [lang="es"] .auth-buttons,
    [lang="fr"] .auth-buttons,
    [lang="it"] .auth-buttons,
    [lang="ru"] .auth-buttons,
    [lang="pl"] .auth-buttons,
    [lang="cs"] .auth-buttons,
    [lang="hu"] .auth-buttons,
    [lang="et"] .auth-buttons {
        flex-shrink: 1 !important;
        min-width: 0;
        max-width: calc(100vw - 215px);
    }

    [lang="de"] .login-btn, [lang="de"] .signup-btn,
    [lang="es"] .login-btn, [lang="es"] .signup-btn,
    [lang="fr"] .login-btn, [lang="fr"] .signup-btn,
    [lang="it"] .login-btn, [lang="it"] .signup-btn,
    [lang="ru"] .login-btn, [lang="ru"] .signup-btn,
    [lang="pl"] .login-btn, [lang="pl"] .signup-btn,
    [lang="cs"] .login-btn, [lang="cs"] .signup-btn,
    [lang="hu"] .login-btn, [lang="hu"] .signup-btn,
    [lang="et"] .login-btn, [lang="et"] .signup-btn {
        flex-shrink: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 12px !important;
        padding: 6px 8px !important;
    }

}

@media (max-width: 400px) {
    [lang="de"] .auth-buttons,
    [lang="es"] .auth-buttons,
    [lang="fr"] .auth-buttons,
    [lang="it"] .auth-buttons,
    [lang="ru"] .auth-buttons,
    [lang="pl"] .auth-buttons,
    [lang="cs"] .auth-buttons,
    [lang="hu"] .auth-buttons,
    [lang="et"] .auth-buttons {
        max-width: calc(100vw - 185px);
    }

    [lang="de"] .login-btn, [lang="de"] .signup-btn,
    [lang="es"] .login-btn, [lang="es"] .signup-btn,
    [lang="fr"] .login-btn, [lang="fr"] .signup-btn,
    [lang="it"] .login-btn, [lang="it"] .signup-btn,
    [lang="ru"] .login-btn, [lang="ru"] .signup-btn,
    [lang="pl"] .login-btn, [lang="pl"] .signup-btn,
    [lang="cs"] .login-btn, [lang="cs"] .signup-btn,
    [lang="hu"] .login-btn, [lang="hu"] .signup-btn,
    [lang="et"] .login-btn, [lang="et"] .signup-btn {
        font-size: 11px !important;
        padding: 5px 6px !important;
    }

}

.menu-toggle {
    display: none;
    font-size: 24px;
    cursor: pointer;
}

/* Main Content Styles */
main {
    min-height: calc(100vh - 70px - 250px);
    padding: 40px 0;
}

.page {
    display: none;
}

.page.active {
    display: block;
}

/* Home Page Styles */
.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 50px;
}

.hero-content {
    flex: 1;
    padding-right: 40px;
    text-align: center;
}

.hero-content h2 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--secondary-color);
}

.hero-content p {
    font-size: 18px;
    margin-bottom: 30px;
    color: var(--gray-color);
}

.hero-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

/* Live Players Stats - 首頁線上玩家即時統計 (feature-card 風格) */
.live-players-stats {
    margin-top: 30px;
    padding: 20px 25px;
    background-color: white;
    border-radius: 8px;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.live-players-stats:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.live-stats-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
}

.live-indicator {
    width: 10px;
    height: 10px;
    background: var(--success-color);
    border-radius: 50%;
    animation: pulse-live 2s ease-in-out infinite;
}

@keyframes pulse-live {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

.live-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--secondary-color);
}

.live-stats-grid {
    display: flex;
    gap: 15px;
}

.live-stat-item {
    flex: 1;
    text-align: center;
    padding: 12px 10px;
    background: var(--light-color);
    border-radius: 8px;
    transition: var(--transition);
}

.live-stat-item:hover {
    background: #e6f4ec;
}

.live-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.2;
    margin-bottom: 6px;
}

.live-stat-label {
    font-size: 12px;
    color: var(--gray-color);
    font-weight: 500;
}

/* 手機版 Live Players Stats */
@media (max-width: 768px) {
    .live-players-stats {
        margin-top: 25px;
        padding: 18px 20px;
    }
    
    .live-stats-header {
        margin-bottom: 15px;
    }
    
    .live-label {
        font-size: 14px;
    }
    
    .live-stats-grid {
        gap: 10px;
    }
    
    .live-stat-item {
        padding: 10px 8px;
    }
    
    .live-stat-value {
        font-size: 22px;
    }
    
    .live-stat-label {
        font-size: 11px;
    }
}

.hero-image {
    flex: 1;
    text-align: center;
}

.hero-image img {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.features {
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
    gap: 20px;
}

/* Feature Card Link Wrapper */
.feature-card-link {
    flex: 1;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: var(--transition);
}

.feature-card-link:hover {
    text-decoration: none;
    color: inherit;
}

.feature-card {
    background-color: white;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: var(--transition);
    height: 100%;
    cursor: pointer;
}

.feature-card-link:hover .feature-card {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.feature-card i {
    font-size: 36px;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.feature-card h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: var(--secondary-color);
}

.feature-card p {
    color: var(--gray-color);
}

.leaderboard-preview {
    background-color: white;
    border-radius: 8px;
    padding: 30px;
    box-shadow: var(--shadow);
}

.leaderboard-preview h2 {
    font-size: 24px;
    margin-bottom: 20px;
    color: var(--secondary-color);
    text-align: center;
}

.leaderboard-table {
    width: 100%;
    margin-bottom: 20px;
}

.leaderboard-header {
    display: grid;
    background-color: var(--secondary-color);
    color: white;
    font-weight: 600;
    border-radius: 4px 4px 0 0;
    grid-template-columns: 80px 1fr 120px;  /* 桌機版：Rank 80px, Player 彈性, Rating 120px */
    gap: 15px;
    align-items: center;
}

.leaderboard-header div,
.leaderboard-row div {
    padding: 12px 15px;
}

.leaderboard-row {
    display: grid;
    border-bottom: 1px solid var(--border-color);
    transition: var(--transition);
    grid-template-columns: 80px 1fr 120px;  /* 桌機版：Rank 80px, Player 彈性, Rating 120px */
    gap: 15px;
    align-items: center;
}

.leaderboard-row:last-child {
    border-bottom: none;
}

.leaderboard-row:hover {
    background-color: rgba(27, 128, 80, 0.05);
}

.rank {
    text-align: center;
}

.player {
    min-width: 0; /* 允許縮小防止溢出 */
}

.wins,
.losses,
.win-rate,
.rating {
    text-align: center;
}

.leaderboard-preview .btn {
    display: block;
    width: 200px;
    margin: 0 auto;
}

/* 響應式Grid佈局 */
/* 平板版：適中佈局 */
@media (max-width: 768px) {
    .leaderboard-header,
    .leaderboard-row {
        grid-template-columns: 60px 1fr 90px;  /* 平板版：Rank 60px, Player 彈性, Rating 90px */
        gap: 12px;
    }
}

/* 手機版：緊湊佈局 */
@media (max-width: 480px) {
    .leaderboard-header,
    .leaderboard-row {
        grid-template-columns: 50px 1fr 70px;  /* 手機版：Rank 50px, Player 彈性, Rating 70px */
        gap: 10px;
    }
    
    .leaderboard-header div,
    .leaderboard-row div {
        padding: 8px 10px;  /* 手機版減少padding */
    }
}

/* Game Board Styles */
.game-container {
    max-width: 800px;
    margin: 0 auto;
}

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

.game-header h2 {
    font-size: 28px;
    color: var(--secondary-color);
}

.difficulty-selector,
.room-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.difficulty-selector select {
    padding: 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background-color: white;
}

/* ═══════════════════════════════════════════════════════════════════════
   黑白棋棋盤
   傳統オセロ規格：綠底、8×8 方格、黑白子直徑約為格寬的 82%。
   比例參照日本標準棋具 —— 石幾乎填滿格子、只留一圈細窄的綠邊。
   子畫太小會像西洋跳棋，是日本玩家一眼就會覺得不對的地方。
   ═══════════════════════════════════════════════════════════════════════ */

/* 棋盤外框（深墨綠，模擬傳統棋盤的塑膠／木框） */
.game-board-container {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 560px;
    margin: 0 auto 32px;
    padding: 3%;                       /* 框寬隨盤面等比縮放，RWD 不必另外調 */
    box-sizing: border-box;
    border-radius: 10px;
    background: linear-gradient(160deg, #33503f 0%, #23372c 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 10px 28px rgba(16, 38, 28, 0.26),
        0 2px 6px rgba(16, 38, 28, 0.16);
    overflow: visible;
}

/* 綠色盤面：8×8 CSS Grid */
.game-board {
    position: relative;
    width: 100%;
    /* 高度靠自己的 aspect-ratio 推出來，不寫 height: 100%。
       外框的高度來自 aspect-ratio 又帶百分比 padding，Safari 會把子層的 100% 算成
       外框的整個高度（沒扣 padding），盤面就比外框高出兩倍框寬、棋子也跟著被拉長。 */
    aspect-ratio: 1 / 1;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    box-sizing: border-box;
    border-radius: 3px;
    overflow: hidden;
    /* 傳統オセロ的深綠絨面，中心略亮、四角略暗 */
    background-color: #1b8050;
    background-image:
        radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, 0.07) 0%, rgba(0, 0, 0, 0) 62%),
        radial-gradient(ellipse at 50% 120%, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 60%);
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.42),
        inset 0 2px 10px rgba(0, 0, 0, 0.16);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* 單一格子；格線用 inset 陰影畫，比 border 少一層盒模型換算 */
.board-cell {
    position: relative;
    box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.34);
    cursor: default;
}

/* 棋盤上的四個定位點：位於中央 4×4 區塊的四個角，與實體棋盤一致 */
.board-cell:nth-child(10)::after,
.board-cell:nth-child(14)::after,
.board-cell:nth-child(42)::after,
.board-cell:nth-child(46)::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    transform: translate(50%, 50%);
    z-index: 2;
    pointer-events: none;
}

/* ── 可下點提示 ─────────────────────────────────────────────────────── */
/* 黑白棋沒有「哪裡都能下」，標出合法手是這個遊戲的基本可用性，不是輔助功能 */
.board-cell.is-legal {
    cursor: pointer;
}

.board-cell.is-legal::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 26%;
    height: 26%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.30);
    z-index: 3;
    pointer-events: none;
    transition: width 0.16s ease, height 0.16s ease, background-color 0.16s ease;
}

.game-board.turn-white .board-cell.is-legal::before {
    background: rgba(255, 255, 255, 0.46);
}

/* 滑過時放大成一顆半透明的預覽石，直接看出會下在哪 */
@media (hover: hover) and (pointer: fine) {
    .board-cell.is-legal:hover::before {
        width: 82%;
        height: 82%;
        background: rgba(0, 0, 0, 0.30);
    }

    .game-board.turn-white .board-cell.is-legal:hover::before {
        background: rgba(255, 255, 255, 0.46);
    }
}

/* 手機的預覽確認模式：先點一下顯示預覽，再點一次才落子 */
.board-cell.is-preview::before {
    width: 82%;
    height: 82%;
    background: rgba(0, 0, 0, 0.34);
}

.game-board.turn-white .board-cell.is-preview::before {
    background: rgba(255, 255, 255, 0.52);
}

/* 觀戰不能落子，不給任何互動暗示 */
#spectate-board .board-cell.is-legal,
.game-board.is-readonly .board-cell.is-legal {
    cursor: default;
}

#spectate-board .board-cell.is-legal::before,
.game-board.is-readonly .board-cell.is-legal::before {
    display: none;
}

/* ── 棋石 ───────────────────────────────────────────────────────────── */
/* 直徑 = 格寬 82%（inset 9% 上下左右各留 9%），對齊日本標準棋具比例 */
.disc {
    position: absolute;
    left: 9%;
    top: 9%;
    width: 82%;
    height: 82%;
    border-radius: 50%;
    z-index: 4;
    pointer-events: none;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    /* 翻子是黑白棋的核心動作，用真正的 3D 翻轉而不是淡入淡出 */
    transition: transform 0.42s cubic-bezier(0.34, 0.08, 0.24, 1);
    will-change: transform;
}

.disc.is-white {
    transform: rotateY(180deg);
}

.disc-face {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.disc-face.face-black {
    background: radial-gradient(circle at 34% 28%, #4a4a4a 0%, #1c1c1c 46%, #050505 100%);
    box-shadow:
        inset 0 -2px 4px rgba(0, 0, 0, 0.55),
        inset 0 2px 3px rgba(255, 255, 255, 0.10),
        0 2px 5px rgba(0, 0, 0, 0.38);
}

.disc-face.face-white {
    transform: rotateY(180deg);
    background: radial-gradient(circle at 34% 28%, #ffffff 0%, #f4f4f2 48%, #d8d8d4 100%);
    box-shadow:
        inset 0 -2px 4px rgba(0, 0, 0, 0.16),
        inset 0 2px 3px rgba(255, 255, 255, 0.95),
        0 2px 5px rgba(0, 0, 0, 0.28);
}

/* 新落下的石：從中心彈出，和「被翻」的動作在視覺上區分開。
   刻意用獨立的 scale 屬性而不是 transform: scale() —— transform 會整個蓋掉
   .disc.is-white 的 rotateY(180deg)，害每顆白子落下的瞬間先閃一下黑色。
   scale 與 transform 是各自獨立的屬性，可以同時生效。 */
@keyframes disc-place {
    0%   { scale: 0.30; opacity: 0; }
    60%  { scale: 1.06; opacity: 1; }
    100% { scale: 1; opacity: 1; }
}

.disc.is-placing {
    animation: disc-place 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 預覽石（手機二次確認用） */
.disc.is-ghost {
    opacity: 0.35;
}

/* ── 最新一手標記 ───────────────────────────────────────────────────── */
.last-move-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30%;
    height: 30%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 6;
    pointer-events: none;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.95);
}

.board-cell.has-black .last-move-ring {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92);
}

.board-cell.has-white .last-move-ring {
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.95);
}

/* ── 棋盤座標（a–h / 1–8）─────────────────────────────────────────── */
/* 標準 Othello 棋譜座標，看棋、覆盤與教學內容都要用到 */
.board-coord {
    position: absolute;
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

.board-coord.coord-file {
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
}

.board-coord.coord-rank {
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
}

.game-board.hide-coords .board-coord {
    display: none;
}

/* ── 石數計分條 ─────────────────────────────────────────────────────── */
/* 黑白棋的即時比分不是附加資訊，是玩家每一手都在看的東西 */
.disc-count-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    max-width: 560px;
    margin: 0 auto 14px;
}

.disc-count {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    padding: 6px 14px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* 輪到誰，誰的計分就浮起來 */
.disc-count.is-turn {
    box-shadow: 0 2px 8px rgba(27, 128, 80, 0.28), 0 0 0 2px #1b8050;
    transform: translateY(-1px);
}

.disc-count-chip {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
}

.disc-count-chip.chip-black {
    background: radial-gradient(circle at 34% 28%, #4a4a4a, #050505);
    box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.5);
}

.disc-count-chip.chip-white {
    background: radial-gradient(circle at 34% 28%, #ffffff, #d8d8d4);
    box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.game-start-overlay,
.game-end-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    border-radius: 8px;
}

/* Hide overlay button (down arrow in content) */
.hide-overlay-btn {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.95);
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 12;
    transition: all 0.3s ease;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}

.hide-overlay-btn:hover {
    background-color: var(--primary-color);
    transform: translateX(-50%) scale(1.1);
    animation: none;
}

.hide-overlay-btn i {
    font-size: 18px;
    color: var(--primary-color);
    transition: color 0.3s ease;
    animation: bounceDown 2s infinite;
}

.hide-overlay-btn:hover i {
    color: white;
    animation: none;
}

@keyframes bounceDown {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-8px);
    }
    60% {
        transform: translateY(-4px);
    }
}

@keyframes bounceUp {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(8px);
    }
    60% {
        transform: translateY(4px);
    }
}

/* Show overlay button (up arrow below overlay) */
.show-overlay-btn {
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.95);
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    display: none;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 12;
    transition: all 0.3s ease;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}

.show-overlay-btn:hover {
    background-color: var(--primary-color);
    transform: translateX(-50%) scale(1.1);
    animation: none;
}

.show-overlay-btn i {
    font-size: 18px;
    color: var(--primary-color);
    transition: color 0.3s ease;
    animation: bounceUp 2s infinite;
}

.show-overlay-btn:hover i {
    color: white;
    animation: none;
}

.show-overlay-btn.visible {
    display: flex !important;
    pointer-events: auto !important;
}

/* Hidden overlay state - only show the show button */
.game-end-overlay.overlay-hidden {
    background-color: transparent;
    pointer-events: none;
}

.game-end-overlay.overlay-hidden .game-end-content {
    display: none;
}

.game-end-overlay.overlay-hidden .hide-overlay-btn {
    display: none;
}

.game-end-overlay.overlay-hidden .show-overlay-btn {
    pointer-events: auto !important;
}

.game-start-content,
.game-end-content {
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    max-width: 80%;
}

.game-start-content h2,
.game-end-content h2 {
    font-size: 28px;
    margin-bottom: 15px;
    color: var(--secondary-color);
}

.game-start-content p {
    margin-bottom: 20px;
    color: var(--gray-color);
}

.game-start-content .rules-info-toggle {
    display: none;
}

.game-start-content .rules-tooltip {
    display: none;
}

.game-start-content .difficulty-cta {
    font-size: 12px;
    color: #95a5a6;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.difficulty-start-btns {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.difficulty-start-btn {
    display: block;
    width: 100%;
    padding: 11px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    color: white;
    transition: all 0.2s ease;
}

@media (max-width: 768px) {
    .game-start-content {
        padding: 20px 18px;
    }
    .game-start-content h2 {
        font-size: 22px;
        margin-bottom: 8px;
    }
    .game-start-content p {
        display: none;
    }
    .game-start-content .rules-info-toggle {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: none;
        border: 1px solid #bdc3c7;
        border-radius: 14px;
        padding: 3px 10px 3px 6px;
        font-size: 12px;
        color: #7f8c8d;
        cursor: pointer;
        margin-bottom: 10px;
        transition: all 0.2s ease;
    }
    .game-start-content .rules-info-toggle .info-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: #bdc3c7;
        color: white;
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
        flex-shrink: 0;
    }
    .game-start-content .rules-info-toggle:active {
        background-color: #f0f0f0;
    }
    .game-start-content .rules-tooltip {
        display: none;
        background-color: #f8f9fa;
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        padding: 8px 12px;
        margin-bottom: 10px;
        font-size: 12px;
        color: #555;
        line-height: 1.4;
        text-align: left;
    }
    .game-start-content .rules-tooltip.show {
        display: block;
    }
    .game-start-content .difficulty-cta {
        margin-bottom: 8px;
        font-size: 11px;
    }
    .difficulty-start-btns {
        gap: 6px;
    }
    .difficulty-start-btn {
        padding: 10px 16px;
        font-size: 14px;
    }
}

.difficulty-start-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

.difficulty-start-btn[data-diff="easy"] {
    background-color: #27ae60;
}
.difficulty-start-btn[data-diff="easy"]:hover {
    background-color: #219a52;
}

/* 難度色是「標示」不是站台主色：四級用四種不同色相（綠／藍／橘／紅）才能一眼分辨，
   所以中等維持藍色，不跟著主色改成綠。 */
.difficulty-start-btn[data-diff="medium"] {
    background-color: #3498db;
}
.difficulty-start-btn[data-diff="medium"]:hover {
    background-color: #2980b9;
}

.difficulty-start-btn[data-diff="hard"] {
    background-color: #e67e22;
}
.difficulty-start-btn[data-diff="hard"]:hover {
    background-color: #d35400;
}

.difficulty-start-btn[data-diff="extreme"] {
    background-color: #e74c3c;
}
.difficulty-start-btn[data-diff="extreme"]:hover {
    background-color: #c0392b;
}

.countdown {
    font-size: 48px;
    font-weight: 700;
    color: var(--primary-color);
    margin: 20px 0;
}

.game-stats {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 20px 0;
}

.stat {
    text-align: center;
}

.stat-label {
    display: block;
    font-size: 14px;
    color: var(--gray-color);
    margin-bottom: 5px;
}

.stat-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--secondary-color);
}

.game-end-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.game-info {
    display: grid;
    /* 兩側玩家欄依「內容寬度」(名稱有 max-width 上限)、中間狀態欄吃掉剩餘空間(1fr)。
       中間欄最小寬度 = min-content(= 時鐘寬),長名字時左右欄多截斷以保護中間欄,時鐘/回合不被壓斷;
       名字短時中間欄以 1fr 吃剩餘空間,turn-indicator 從中央往兩邊撐滿、快碰到左右才換行。 */
    grid-template-columns: minmax(0, 1fr) minmax(min-content, 1fr) minmax(0, 1fr);
    align-items: start;
    margin-bottom: 20px;
    background-color: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.player-info {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0; /* 允許內部名稱在自己那欄內截斷,不撐開欄寬 */
}

/* 第一個玩家靠左對齊 */
.player-info:first-child {
    justify-self: start;
}

/* 第二個玩家靠右對齊 */
.player-info:last-child {
    justify-self: end;
}

/* 黑子玩家向左對齊 */
.player-info:first-child .player-details {
    align-items: flex-start;
    text-align: left;
}

/* 白子玩家向右對齊 */
.player-info:last-child .player-details {
    align-items: flex-end;
    text-align: right;
}

.player-avatar {
    width: 40px;
    height: 40px;
    background-color: var(--light-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: var(--gray-color);
}

.player-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0; /* 讓 h3 名稱能在欄內 ellipsis 截斷 */
}

.player-details h3 {
    font-size: 16px;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px; /* 桌機版最大寬度 */
}

.player-details .disc-count-chip {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.game-status {
    text-align: center;
    justify-self: stretch; /* 填滿中間欄 → turn-indicator 用滿左右棋子之間的寬度、快碰到才換行 */
    /* 不設 min-width:0:讓中間欄以 min-content(=時鐘寬)為最小,長名字時保護時鐘不被壓斷 */
    max-width: 100%;
}

.timer {
    font-size: 18px;
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 5px;
    white-space: nowrap; /* 時鐘「00:44」永不斷行 */
}

.turn-indicator {
    font-size: 14px;
    color: var(--primary-color);
    font-weight: 500;
    /* 過長時「換行」而非截斷 → 不遺失任何狀態資訊;欄寬固定 1/3 仍不影響左右名稱 */
    overflow-wrap: anywhere;
    max-width: 100%;
}

.game-controls {
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* Online Battle Styles */
.player-setup {
    background-color: white;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    box-shadow: var(--shadow);
    max-width: 500px;
    margin: 0 auto;
}

.player-setup h3 {
    font-size: 22px;
    margin-bottom: 20px;
    color: var(--secondary-color);
}

.player-form {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.player-form input {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 16px;
}

/* 🔧 Room Full - Disabled State */
.player-form input:disabled,
.player-form input.disabled {
    background-color: #f5f5f5;
    color: #999;
    cursor: not-allowed;
    border-color: #ddd;
}

.player-form button:disabled,
.player-form button.disabled,
#join-game:disabled,
#join-game.disabled {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
    opacity: 0.7;
    pointer-events: none;
}

.waiting-message {
    text-align: center;
    color: var(--gray-color);
}

.spinner {
    margin: 20px auto;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.chat-container {
    background-color: white;
    border-radius: 8px;
    box-shadow: var(--shadow);
    margin-top: 20px;
    overflow: hidden;
}

.chat-header {
    padding: 10px 15px;
    background-color: #20332a;
    color: white;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
}

.chat-messages {
    height: 200px;
    padding: 15px;
    overflow-y: auto;
    border-bottom: 1px solid var(--border-color);
}

.chat-input {
    display: flex;
    padding: 10px;
}

.chat-input input {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: 4px 0 0 4px;
    font-size: 16px;
}

.chat-input button {
    padding: 10px 15px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
}

/* ========== Spectate Info Bar ========== */
.spectate-info-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f4 100%);
    border-top: 1px solid var(--border-color);
    font-size: 0.85rem;
}

.spectate-info-bar.hidden {
    display: none;
}

.spectate-viewers {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    background: linear-gradient(135deg, #ff7675, #e17055);
    color: white;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.8rem;
    white-space: nowrap;
    min-width: fit-content;
    flex-shrink: 0; /* 不會被壓縮 */
}

.spectate-viewers i {
    font-size: 0.75rem;
    flex-shrink: 0;
}

.spectate-url-section {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.spectate-url-input {
    flex: 1;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: #fff;
    color: #555;
    font-size: 0.8rem;
    font-family: 'Courier New', monospace;
    min-width: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.spectate-url-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.copy-url-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.6rem;
    background: linear-gradient(135deg, var(--primary-color), #15683f);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 34px;
}

.copy-url-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(27, 128, 80, 0.4);
}

.copy-url-btn:active {
    transform: translateY(0);
}

.copy-url-btn.copied {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
}

.copy-url-btn.copied i::before {
    content: "\f00c"; /* fa-check */
}

/* Mobile responsive for spectate info bar */
@media (max-width: 480px) {
    .spectate-info-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding: 0.5rem;
    }
    
    .spectate-viewers {
        justify-content: center;
        padding: 0.3rem 0.5rem;
    }
    
    .spectate-url-section {
        width: 100%;
    }
    
    .spectate-url-input {
        font-size: 0.75rem;
    }
}

.message {
    margin-bottom: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    max-width: 80%;
    word-break: break-word;
}

.user-message {
    background-color: var(--primary-color);
    color: white;
    margin-left: auto;
}

.opponent-message {
    background-color: var(--light-color);
}

.system-message {
    text-align: center;
    color: var(--gray-color);
    font-style: italic;
    margin: 10px 0;
}

/* Leaderboard Page Styles */
.leaderboard-container {
    background-color: white;
    border-radius: 8px;
    padding: 30px;
    box-shadow: var(--shadow);
}

.leaderboard-container h2 {
    font-size: 28px;
    margin-bottom: 20px;
    color: var(--secondary-color);
    text-align: center;
}

.leaderboard-filters {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.leaderboard-filters select {
    padding: 8px 15px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: white;
}

.full-leaderboard {
    margin-bottom: 0;
}

/* How to Play Page Styles */
.how-to-play-content {
    background-color: white;
    border-radius: 8px;
    padding: 30px;
    box-shadow: var(--shadow);
}

.how-to-play-content h2 {
    font-size: 28px;
    margin-bottom: 30px;
    color: var(--secondary-color);
    text-align: center;
}

.rules-section,
.strategy-section {
    margin-bottom: 30px;
}

.rules-section h3,
.strategy-section h3,
.example-section h3 {
    font-size: 22px;
    margin-bottom: 15px;
    color: var(--secondary-color);
}

.rules-section ul,
.strategy-section ul {
    padding-left: 20px;
}

.rules-section li,
.strategy-section li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 15px;
}

.rules-section li::before,
.strategy-section li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--primary-color);
}

.patterns-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.pattern {
    flex: 1;
    min-width: 200px;
    text-align: center;
}

.pattern h4 {
    margin-bottom: 10px;
    color: var(--secondary-color);
}

.pattern-board {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #e6c88e;
    border-radius: 8px;
    position: relative;
    box-shadow: var(--shadow);
}

/* Contact Us Page Styles */
.contact-content {
    background-color: white;
    border-radius: 8px;
    padding: 30px;
    box-shadow: var(--shadow);
}

.contact-content h2 {
    font-size: 28px;
    margin-bottom: 30px;
    color: var(--secondary-color);
    text-align: center;
}

.contact-intro {
    margin-bottom: 30px;
    text-align: center;
    font-size: 16px;
    color: var(--gray-color);
}

.contact-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

.contact-card {
    background-color: var(--light-color);
    border-radius: 8px;
    padding: 25px;
    text-align: center;
    transition: var(--transition);
}

.contact-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

.contact-header {
    margin-bottom: 15px;
}

.contact-header i {
    font-size: 32px;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.contact-header h3 {
    font-size: 20px;
    color: var(--secondary-color);
    margin-bottom: 10px;
}

.contact-card p {
    margin-bottom: 15px;
    color: var(--gray-color);
    line-height: 1.6;
}

.contact-email {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
}

.contact-email:hover {
    color: var(--secondary-color);
}

.about-company,
.response-time {
    background-color: var(--light-color);
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 30px;
}

.about-company h3,
.response-time h4 {
    color: var(--secondary-color);
    margin-bottom: 15px;
}

.response-time h4 i {
    margin-right: 8px;
    color: var(--primary-color);
}

/* Privacy Policy Page Styles */
.privacy-content {
    background-color: white;
    border-radius: 8px;
    padding: 30px;
    box-shadow: var(--shadow);
}

.privacy-content h2 {
    font-size: 28px;
    margin-bottom: 20px;
    color: var(--secondary-color);
    text-align: center;
}

.last-updated {
    text-align: center;
    margin-bottom: 30px;
    color: var(--gray-color);
    font-style: italic;
}

.privacy-intro {
    margin-bottom: 30px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--dark-color);
    background-color: var(--light-color);
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid var(--primary-color);
}

.privacy-section {
    margin-bottom: 30px;
}

.privacy-section h3 {
    font-size: 22px;
    color: var(--secondary-color);
    margin-bottom: 15px;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 8px;
}

.privacy-section h4 {
    font-size: 18px;
    color: var(--secondary-color);
    margin: 20px 0 10px 0;
}

.privacy-section p {
    margin-bottom: 15px;
    line-height: 1.6;
    color: var(--dark-color);
}

.privacy-section ul {
    margin-bottom: 15px;
    padding-left: 20px;
}

.privacy-section li {
    margin-bottom: 8px;
    line-height: 1.6;
    position: relative;
    padding-left: 15px;
}

.privacy-section li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
}

.company-info {
    background-color: var(--light-color);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    border-left: 4px solid var(--primary-color);
}

/* Terms of Service Page Styles */
.terms-content {
    background-color: white;
    border-radius: 8px;
    padding: 30px;
    box-shadow: var(--shadow);
}

.terms-content h2 {
    font-size: 28px;
    margin-bottom: 20px;
    color: var(--secondary-color);
    text-align: center;
}

.terms-intro {
    margin-bottom: 30px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--dark-color);
    background-color: var(--light-color);
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid var(--primary-color);
}

.terms-section {
    margin-bottom: 30px;
}

.terms-section h3 {
    font-size: 22px;
    color: var(--secondary-color);
    margin-bottom: 15px;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 8px;
}

.terms-section h4 {
    font-size: 18px;
    color: var(--secondary-color);
    margin: 20px 0 10px 0;
}

.terms-section p {
    margin-bottom: 15px;
    line-height: 1.6;
    color: var(--dark-color);
}

.terms-section ul {
    margin-bottom: 15px;
    padding-left: 20px;
}

.terms-section li {
    margin-bottom: 8px;
    line-height: 1.6;
    position: relative;
    padding-left: 15px;
}

.terms-section li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
}

.agreement-notice {
    background-color: var(--light-color);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    border-left: 4px solid var(--warning-color);
    margin-top: 30px;
}

.rules-section,
.strategy-section {
    margin-bottom: 30px;
}

.rules-section h3,
.strategy-section h3,
.example-section h3 {
    font-size: 22px;
    margin-bottom: 15px;
    color: var(--secondary-color);
}

.rules-section ul,
.strategy-section ul {
    padding-left: 20px;
}

.rules-section li,
.strategy-section li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 15px;
}

.rules-section li::before,
.strategy-section li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--primary-color);
}

.patterns-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.pattern {
    flex: 1;
    min-width: 200px;
    text-align: center;
}

.pattern h4 {
    margin-bottom: 10px;
    color: var(--secondary-color);
}

.pattern-board {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #e6c88e;
    border-radius: 8px;
    position: relative;
    box-shadow: var(--shadow);
}

/* Modal Styles */
.modal {
    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;
}

.modal.active {
    display: flex;
}

.modal-content {
    background-color: white;
    border-radius: 8px;
    width: 100%;
    max-width: 500px;
    box-shadow: var(--shadow);
    animation: modalFadeIn 0.3s;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    font-size: 22px;
    color: var(--secondary-color);
}

.close-modal {
    font-size: 24px;
    cursor: pointer;
    color: var(--gray-color);
    transition: var(--transition);
}

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

.modal-body {
    padding: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.form-group input {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 16px;
}

.form-footer {
    text-align: center;
    margin-top: 20px;
    color: var(--gray-color);
}

/* Footer Styles */
footer {
    background-color: var(--secondary-color);
    color: white;
    padding: 50px 0 20px;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 30px;
}

.footer-logo,
.footer-links,
.footer-social {
    margin-bottom: 20px;
}

.footer-logo h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.footer-logo p {
    color: rgba(255, 255, 255, 0.7);
}

.footer-links h3,
.footer-social h3 {
    font-size: 18px;
    margin-bottom: 15px;
    font-weight: 600;
}

.footer-links ul li {
    margin-bottom: 10px;
}

.footer-links ul li a {
    color: rgba(255, 255, 255, 0.7);
    transition: var(--transition);
}

.footer-links ul li a:hover {
    color: white;
}

/* Footer Dropdown Styles */
.footer-dropdown {
    position: relative;
}

.footer-dropdown-trigger {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    transition: var(--transition);
    text-align: left;
}

.footer-dropdown-trigger:hover {
    color: white;
}

.footer-dropdown-menu {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    z-index: 1000;
    margin-bottom: 8px;
    overflow: hidden;
}

.footer-dropdown.active .footer-dropdown-menu {
    display: block;
}

.footer-links .footer-dropdown-item,
.footer-dropdown-item {
    display: block;
    padding: 12px 16px;
    color: #333 !important;
    text-decoration: none;
    transition: background-color 0.2s;
    border-bottom: 1px solid #f0f0f0;
}

.footer-dropdown-item:last-child {
    border-bottom: none;
}

.footer-links .footer-dropdown-item:hover,
.footer-dropdown-item:hover {
    background-color: #f5f5f5;
    color: var(--primary-color) !important;
}

.footer-dropdown-item .item-title {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 2px;
    color: #333;
}

.footer-dropdown-item .item-desc {
    display: block;
    font-size: 12px;
    color: #888;
}

.footer-dropdown-item:hover .item-title {
    color: var(--primary-color);
}

.footer-dropdown-item:hover .item-desc {
    color: #666;
}

/* Mobile adjustments for footer dropdown */
@media (max-width: 768px) {
    .footer-dropdown-menu {
        position: fixed;
        bottom: auto;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin-bottom: 0;
        min-width: 250px;
    }
    
    .footer-dropdown.active::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: white;
    transition: var(--transition);
}

.social-icons a:hover {
    background-color: var(--primary-color);
    transform: translateY(-3px);
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
}

/* Pattern Board Styles */
.five-in-row::before,
.open-four::before,
.double-three::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.five-in-row::before {
    background-image: url('/images/pattern-five.png');
}

.open-four::before {
    background-image: url('/images/pattern-open-four.png');
}

.double-three::before {
    background-image: url('/images/pattern-double-three.png');
}

/* Responsive Styles */
@media (min-width: 769px) and (max-width: 1024px) {
    header .container {
        padding: 12px 15px;
    }
    
    /* 縮小 logo 字體 */
    .logo h1 {
        font-size: 20px !important;
    }
    
    /* 縮小導航選單間距和字體 */
    nav ul li {
        margin-left: 12px;
    }
    
    nav ul li a {
        font-size: 14px;
        padding: 4px 8px;
    }
    
    /* 縮小按鈕尺寸 */
    .auth-buttons {
        gap: 6px;
    }
    
    .auth-buttons button {
        padding: 6px 12px;
        font-size: 13px;
        border-radius: 4px;
        font-weight: 500;
        cursor: pointer;
        transition: var(--transition);
    }
    
    /* 平板版玩家名稱截斷 */
    .player-details h3 {
        max-width: 180px; /* 平板版最大寬度 */
        font-size: 15px;
    }
    
    /* 平板版佈局:兩側依內容、中間吃剩餘空間;中間最小 min-content(保護時鐘)(同桌機邏輯) */
    .game-info {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(min-content, 1fr) minmax(0, 1fr);
        align-items: start;
    }
    
    .player-info:first-child {
        justify-self: start;
    }
    
    .player-info:last-child {
        justify-self: end;
    }
    
    .game-status {
        justify-self: center;
    }
}

@media (max-width: 992px) {
    .hero {
        flex-direction: column;
    }

    .hero-content {
        padding-right: 0;
        margin-bottom: 30px;
        text-align: center;
    }

    .hero-buttons {
        justify-content: center;
    }

    .features {
        flex-direction: column;
    }

    .footer-content {
        flex-direction: column;
    }

    .footer-logo,
    .footer-links,
    .footer-social {
        width: 100%;
        margin-bottom: 30px;
    }
}

/* 修復聊天訊息樣式（確保不被彈窗樣式覆蓋，同時保持原始樣式） */
.chat-messages .message {
    opacity: 1 !important;
    position: static !important;
    z-index: auto !important;
    display: block !important;
    visibility: visible !important;
    /* 恢復原始聊天訊息樣式 */
    margin-bottom: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    max-width: 80%;
    word-break: break-word;
}

.chat-messages .message.user-message {
    background-color: var(--primary-color) !important;
    color: white !important;
    margin-left: auto;
}

.chat-messages .message.opponent-message {
    background-color: var(--light-color) !important;
    color: inherit !important;
}

/* 右上角聊天彈窗樣式 */
.chat-notifications {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 1000;
    pointer-events: none;
}

.chat-popup {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    margin-bottom: 10px;
    padding: 12px 16px;
    max-width: 300px;
    animation: slideInRight 0.3s ease-out;
    pointer-events: auto;
    border-left: 4px solid #b8845a;
    background: linear-gradient(135deg, #fdf9f4 0%, #faf6f1 100%);
}

.chat-popup.user-message {
    border-left-color: #b8845a;
    background: linear-gradient(135deg, #fdf9f4 0%, #faf6f1 100%);
}

.chat-popup.opponent-message {
    border-left-color: #b8845a;
    background: linear-gradient(135deg, #fdf9f4 0%, #faf6f1 100%);
}

.chat-popup .popup-content {
    font-size: 14px;
    line-height: 1.4;
}

.chat-popup .popup-sender {
    font-weight: 600;
    color: #b8845a;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.chat-popup.user-message .popup-sender {
    color: #b8845a;
}

.chat-popup.opponent-message .popup-sender {
    color: #b8845a;
}

.chat-popup .popup-message {
    color: #555;
    word-wrap: break-word;
    /* 聊天彈窗預覽最多 3 行,超過以 … 截斷(line-clamp 按「實際渲染行」裁切,
       全形字寬、半形字窄 → 每行可容納字數自動不同,無需分開數字元)。 */
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 棋子圖示樣式 - 經典光澤風格 */
.stone-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.stone-icon.black-stone {
    background: radial-gradient(circle at 30% 30%, #555, #000);
    border: 1px solid #111;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 1px 1px 2px rgba(255,255,255,0.1);
}

.stone-icon.white-stone {
    background: radial-gradient(circle at 30% 30%, #fff, #e8e8e8);
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2), inset 1px 1px 2px rgba(255,255,255,0.8);
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.chat-popup.fade-out {
    animation: fadeOut 0.3s ease-out forwards;
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

@media (max-width: 768px) {
    /* 手機版聊天彈窗調整 */
    .chat-notifications {
        top: 70px;
        right: 10px;
        left: 10px;
    }
    
    .chat-popup {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
    
    header .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        flex-wrap: wrap;
        position: relative;
    }
    
    /* 將menu-toggle移到最左邊 */
    .menu-toggle {
        order: -1;
        display: block;
        font-size: 24px;
        cursor: pointer;
        margin-right: 15px;
        flex-shrink: 0;
    }
    
    /* Logo在一般手機保持24px */
    .logo {
        flex: 1;
        margin-left: 0;
    }
    
    .logo h1 {
        font-size: 24px !important;
        font-weight: 700;
        color: var(--primary-color);
    }
    
    /* 縮小按鈕以適應小屏幕 */
    .auth-buttons {
        display: flex;
        gap: 6px;
        flex-shrink: 0;
        order: 2;
    }
    
    .auth-buttons button {
        padding: 6px 10px;
        font-size: 13px;
        border-radius: 4px;
        font-weight: 500;
        cursor: pointer;
        transition: var(--transition);
        white-space: nowrap;
    }
    
    /* 確保nav保持在下方 */
    nav {
        order: 3;
        width: 100%;
        margin-top: 15px;
        display: none;
    }
    
    nav.active {
        display: block;
    }
    
    nav ul {
        flex-direction: column;
        width: 100%;
        align-items: stretch;
    }
    
    nav ul li {
        margin: 0;
        display: block;
        width: 100%;
    }
    
    nav ul li a {
        display: block;
        padding: 13px 10px;
        border-bottom: 1px solid var(--border-color);
        text-align: left;
        width: 100%;
        line-height: normal;
    }
    
    /* Mobile nav-dropdown fixes */
    nav ul li.nav-dropdown {
        display: block;
        width: 100%;
    }

    .player-form {
        flex-direction: column;
    }

    .game-info {
        flex-direction: column;
        gap: 15px;
    }

    .game-status {
        order: -1;
    }

    .leaderboard-header div,
    .leaderboard-row div {
        padding: 8px;
        font-size: 14px;
    }

    .patterns-container {
        flex-direction: column;
    }

    /* ≤768px 時 mobile-optimized.css 用 height:0 + padding-bottom:100% 撐出正方形，
       盤面絕對定位鋪滿整個外框（手機上沒有框）。這裡若留著上方 padding，
       外框會比寬度高出那一段，整個盤面與棋子被垂直拉長約 2%。 */
    .game-board-container {
        padding: 0;
        border-radius: 8px;
    }

    .board-cell:nth-child(10)::after,
    .board-cell:nth-child(14)::after,
    .board-cell:nth-child(42)::after,
    .board-cell:nth-child(46)::after {
        width: 5px;
        height: 5px;
    }

    .board-coord {
        font-size: 9px;
    }
}

/* iPhone 13 mini 及類似小屏幕優化 (400px以下) */
@media (max-width: 400px) {
    header .container {
        padding: 12px 15px;
    }
    
    .menu-toggle {
        margin-right: 10px !important;
        font-size: 22px !important;
    }
    
    /* Logo在400px以下保持22px */
    .logo h1 {
        font-size: 22px !important;
    }
    
    .auth-buttons {
        gap: 4px;
    }
    
    .auth-buttons button {
        padding: 5px 8px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .logo h1 {
        font-size: 18px;
    }

    .auth-buttons button {
        padding: 5px 10px;
        font-size: 12px;
    }

    .hide-overlay-btn {
        width: 36px;
        height: 36px;
        bottom: -6px;
    }
}

@media (max-width: 360px) {
    .logo h1 {
        font-size: 16px;
    }

    .auth-buttons button {
        padding: 4px 8px;
        font-size: 11px;
    }
}

@media (max-width: 576px) {
    .hero-content h2 {
        font-size: 32px;
    }

    .game-end-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .modal-content {
        width: 90%;
    }

    .game-board-container {
        padding: 0;
        margin-bottom: 22px;
    }

    .disc-count-bar {
        gap: 12px;
    }

    .disc-count {
        font-size: 17px;
        padding: 5px 11px;
    }

    .disc-count-chip {
        width: 17px;
        height: 17px;
    }
}

/* Authentication Styles */
.profile-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    position: relative;
}

.player-name {
    font-weight: 500;
}

.profile-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: white;
    border-radius: 4px;
    box-shadow: var(--shadow);
    min-width: 150px;
    z-index: 100;
    display: none;
}

.profile-dropdown.active {
    display: block;
}

.profile-dropdown ul {
    padding: 0;
}

.profile-dropdown ul li {
    margin: 0;
}

.profile-dropdown ul li a {
    display: block;
    padding: 10px 15px;
    color: var(--dark-color);
    transition: var(--transition);
    border-bottom: 1px solid var(--border-color);
}

.profile-dropdown ul li:last-child a {
    border-bottom: none;
}

.profile-dropdown ul li a:hover {
    background-color: var(--light-color);
    color: var(--primary-color);
}

/* Notification Styles */
.notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notification {
    background-color: white;
    border-radius: 4px;
    box-shadow: var(--shadow);
    padding: 15px;
    min-width: 300px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.notification.success {
    border-left: 4px solid var(--success-color);
}

.notification.error {
    border-left: 4px solid var(--danger-color);
}

.notification.warning {
    border-left: 4px solid var(--warning-color);
}

.notification-message {
    flex: 1;
}

.notification-close {
    cursor: pointer;
    font-size: 18px;
    color: var(--gray-color);
    transition: var(--transition);
}

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

/* Private Room Toggle Switch */
.private-room-toggle {
    margin: 1rem 0 1.5rem 0;
    display: flex;
    justify-content: center;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
}

.toggle-text {
    font-weight: 500;
    color: var(--text-color);
    font-size: 0.95rem;
}

.toggle-switch {
    position: relative;
    width: 50px;
    height: 26px;
}

.toggle-switch input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 26px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

input:checked + .slider {
    background-color: var(--primary-color);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--primary-color);
}

input:checked + .slider:before {
    transform: translateX(24px);
}

/* Room Options Row - Container for Private Room & Spectate */
.room-options-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin: 1rem 0 1.5rem 0;
    flex-wrap: wrap;
}

.room-options-row .private-room-toggle {
    margin: 0;
}

/* Spectate Toggle */
.spectate-toggle {
    display: flex;
    align-items: center;
}

.spectate-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
}

.spectate-text {
    font-weight: 500;
    color: var(--text-color);
    font-size: 0.95rem;
}

/* Spectate Info Icon with Tooltip */
.spectate-info-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #888;
    font-size: 0.85rem;
    transition: color 0.2s ease;
    outline: none;
}

.spectate-info-icon:hover,
.spectate-info-icon:focus {
    color: var(--primary-color);
}

.spectate-info-icon i {
    pointer-events: none;
}

.spectate-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 400;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Tooltip arrow */
.spectate-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #333;
}

/* Show tooltip on hover and focus */
.spectate-info-icon:hover .spectate-tooltip,
.spectate-info-icon:focus .spectate-tooltip,
.spectate-info-icon.active .spectate-tooltip {
    opacity: 1;
    visibility: visible;
}

.spectate-select {
    padding: 0.4rem 0.8rem;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    background-color: white;
    color: var(--text-color);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 70px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 28px;
}

.spectate-select:hover {
    border-color: var(--primary-color);
}

.spectate-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(27, 128, 80, 0.15);
}

.spectate-select option {
    padding: 0.5rem;
}

/* Spectate Eye Icon in Dashboard */
.spectate-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-right: 8px;
    transition: all 0.3s ease;
}

.spectate-icon i {
    font-size: 14px;
}

.spectate-icon.disabled {
    color: #aaa;
    background: #f0f0f0;
    cursor: not-allowed;
    opacity: 0.6;
}

.spectate-icon.active {
    color: white;
    background: linear-gradient(135deg, #ff7675, #e17055);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(255, 118, 117, 0.4);
}

.spectate-icon.active:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 12px rgba(255, 118, 117, 0.5);
}

/* Spectate Consent Modal */
.spectate-consent-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}

.spectate-consent-content {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
}

.spectate-consent-content h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.spectate-consent-content h3 i {
    color: #e17055;
}

.spectate-consent-content p {
    color: #555;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    font-size: 0.95rem;
}

.spectate-consent-content .player-name {
    font-weight: 600;
    color: var(--primary-color);
}

.spectate-consent-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.spectate-consent-buttons button {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    min-width: 100px;
}

.spectate-consent-buttons .btn-accept {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: white;
    border: none;
}

.spectate-consent-buttons .btn-accept:hover {
    background: linear-gradient(135deg, #219a52, #27ae60);
    transform: translateY(-1px);
}

.spectate-consent-buttons .btn-decline {
    background: #f8f9fa;
    color: #555;
    border: 1px solid #ddd;
}

.spectate-consent-buttons .btn-decline:hover {
    background: #e9ecef;
}

/* Spectator Mode Header - h2 with LIVE badge */
.game-header h2:has(.spectator-mode-indicator) {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

/* Spectator Mode Header Indicator */
.spectator-mode-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: linear-gradient(135deg, #ff7675, #e17055);
    color: white;
    padding: 0.2rem 0.55rem;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 600;
    margin-left: 0.6rem;
    vertical-align: middle;
    animation: pulse 2s infinite;
    line-height: 1;
    white-space: nowrap;
}

.spectator-mode-indicator i {
    font-size: 0.6rem;
}

/* Spectator Mode Indicator - ENDED/OFFLINE State */
.spectator-mode-indicator.ended {
    background: linear-gradient(135deg, #95a5a6, #7f8c8d);
    animation: none;
}

/* Spectator Mode Indicator - INVALID/ERROR State */
.spectator-mode-indicator.invalid {
    background: linear-gradient(135deg, #636e72, #2d3436);
    animation: none;
}

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

/* Spectator Disabled Chat */
.chat-input.spectator-disabled {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.chat-input.spectator-disabled input,
.chat-input.spectator-disabled button {
    background-color: #f0f0f0;
    color: #999;
    cursor: not-allowed;
}

.chat-input.spectator-disabled::after {
    content: "Spectators cannot send messages";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.chat-input.spectator-disabled:hover::after {
    opacity: 1;
}

/* Muted (24h) Read-Only Chat — 被禁言者的對戰聊天唯讀狀態（Phase 3） */
.chat-input.muted-disabled {
    opacity: 0.6;
    position: relative;
}

.chat-input.muted-disabled input,
.chat-input.muted-disabled button {
    background-color: #f0f0f0;
    color: #999;
    cursor: not-allowed;
}

/* 聊天標題的「已被禁言」徽章 */
.chat-header .muted-badge {
    font-size: 0.75rem;
    color: #e74c3c;
    font-weight: 600;
    margin-left: 0.3rem;
    vertical-align: middle;
}

/* 被禁言唯讀的系統提示訊息 */
.muted-system-message p {
    color: #e74c3c;
    font-weight: 500;
}

/* Spectator Game End - result display with player names and stones */
.game-end-content .result-players {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.3rem 0;
}

.game-end-content .result-players.loser {
    opacity: 0.7;
}

.game-end-content .result-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #27ae60;
    margin-left: 0.5rem;
}

.game-end-content .result-versus {
    font-size: 0.75rem;
    color: #888;
    margin: 0.2rem 0;
}

.game-end-content .result-stone {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.game-end-content .result-stone.black-stone {
    background: radial-gradient(circle at 30% 30%, #555, #111);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

.game-end-content .result-stone.white-stone {
    background: radial-gradient(circle at 30% 30%, #fff, #ddd);
    border: 1px solid #ccc;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.game-end-content .winner-name {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    color: #27ae60;
    font-size: 1rem;
}

.game-end-content .loser-name {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 500;
    color: #e74c3c;
    font-size: 0.95rem;
}

.game-end-content .draw-text {
    display: block;
    font-size: 1rem;
    color: #666;
    margin: 0.5rem 0;
}

/* Spectator note in game end buttons */
.spectator-note {
    font-size: 0.8rem;
    color: #888;
    font-style: italic;
    margin: 0 0 0.5rem 0;
}

/* Player profile link in spectate and online battle modes */
.player-profile-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.player-profile-link:hover {
    color: var(--primary-color) !important;
    text-decoration: underline;
}

/* Clickable avatar for profile link */
.player-avatar[style*="cursor: pointer"] {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.player-avatar[style*="cursor: pointer"]:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Spectate page game-end-buttons layout */
#spectate-game-end-overlay .game-end-buttons {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

/* Spectate page hide button positioning - inside the content */
#spectate-game-end-overlay .game-end-content {
    padding-bottom: 70px; /* Space for hide button */
    position: relative;
}

#spectate-game-end-overlay .hide-overlay-btn {
    bottom: 15px;
}

/* ========== Spectate Result List - Clean Design ========== */
.spectate-result-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1rem 0;
    padding: 0 0.5rem;
}

.spectate-result-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.spectate-result-row.winner {
    background: linear-gradient(135deg, rgba(218, 160, 109, 0.15), rgba(196, 154, 108, 0.1));
    border-left: 3px solid #daa06d;
}

.spectate-result-row.loser {
    background: rgba(0, 0, 0, 0.03);
    border-left: 3px solid #bdc3c7;
    opacity: 0.75;
}

.spectate-result-row .player-name {
    font-weight: 600;
    font-size: 1rem;
    color: #20332a;
    flex: 1;
    text-align: left;
}

.spectate-result-row.winner .player-name {
    color: #8b5a2b;
}

.spectate-result-row.loser .player-name {
    color: #7f8c8d;
}

.result-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.result-badge.winner-badge {
    background: linear-gradient(135deg, #daa06d, #c49a6c);
    color: #4a3520;
}

/* Room item with spectate icon - 樣式已整合到下方 .rooms-list 區域 */
/* 保留這些子元素樣式用於兼容性 */

.room-item .room-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Mobile responsive for room options */
@media (max-width: 480px) {
    .room-options-row {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0.75rem;
        justify-content: center;
    }
    
    .room-options-row .toggle-label {
        gap: 0.4rem;
    }
    
    .room-options-row .toggle-text {
        font-size: 0.85rem;
    }
    
    .room-options-row .toggle-switch {
        width: 42px;
        height: 22px;
    }
    
    .room-options-row .toggle-switch .slider:before {
        height: 16px;
        width: 16px;
        left: 3px;
        bottom: 3px;
    }
    
    .room-options-row input:checked + .slider:before {
        transform: translateX(20px);
    }
    
    .spectate-label {
        gap: 0.4rem;
    }
    
    .spectate-text {
        font-size: 0.85rem;
    }
    
    .spectate-info-icon {
        font-size: 0.75rem;
    }
    
    /* Mobile tooltip - position to the left of the icon */
    .spectate-tooltip {
        font-size: 0.75rem;
        padding: 8px 12px;
        white-space: nowrap;
        max-width: none;
        text-align: center;
        /* Position to the left instead of above */
        bottom: auto;
        top: 50%;
        left: auto;
        right: calc(100% + 10px);
        transform: translateY(-50%);
    }
    
    /* Arrow points right on mobile */
    .spectate-tooltip::after {
        top: 50%;
        left: 100%;
        right: auto;
        bottom: auto;
        transform: translateY(-50%);
        border: 6px solid transparent;
        border-left-color: #333;
        border-top-color: transparent;
    }
    
    .spectate-select {
        min-width: 55px;
        font-size: 0.8rem;
        padding: 0.3rem 0.5rem;
        padding-right: 20px;
    }
    
    .spectate-select {
        min-width: 65px;
        font-size: 0.85rem;
        padding: 0.35rem 0.6rem;
        padding-right: 24px;
    }
    
    .spectator-mode-indicator {
        margin-left: 0.5rem;
        font-size: 0.6rem;
        padding: 0.2rem 0.5rem;
        border-radius: 10px;
        gap: 0.25rem;
    }
    
    .spectator-mode-indicator i {
        font-size: 0.6rem;
    }
    
    .spectate-consent-content {
        padding: 1.5rem;
    }
    
    .spectate-consent-buttons {
        flex-direction: column;
    }
    
    .spectate-consent-buttons button {
        width: 100%;
    }
    
    /* 📱 Spectate Page Header Mobile Layout */
    /* Row 1: Title (Player1 vs Player2) - full width */
    /* Row 2: LIVE icon on left, Room ID on right */
    #spectate-page .game-header {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        grid-template-areas:
            "title title"
            "live room-id";
        gap: 0.5rem;
        align-items: center;
    }
    
    #spectate-page .game-header h2 {
        display: contents;
    }
    
    #spectate-page .game-header #spectate-title {
        grid-area: title;
        font-size: 28px;
        color: var(--secondary-color);
        line-height: 1.3;
        word-break: break-word;
    }
    
    #spectate-page .game-header .spectator-mode-indicator {
        grid-area: live;
        justify-self: start;
        margin-left: 0;
    }
    
    #spectate-page .game-header .room-info {
        grid-area: room-id;
        justify-self: end;
    }
}

/* Spectate Page Loading State */
.spectate-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    padding: 2rem;
}

.spectate-loading .loading-content {
    text-align: center;
}

.spectate-loading .spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

.spectate-loading p {
    color: #666;
    font-size: 1.1rem;
}

/* Spectate Page Error State */
.spectate-error {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    padding: 2rem;
}

.spectate-error .error-content {
    text-align: center;
    max-width: 400px;
}

.spectate-error .error-content i {
    font-size: 4rem;
    color: #e74c3c;
    margin-bottom: 1rem;
}

.spectate-error .error-content h3 {
    color: #333;
    margin-bottom: 0.5rem;
}

.spectate-error .error-content p {
    color: #666;
    margin-bottom: 1.5rem;
}

/* Spectator Badge in Chat Header */
.chat-header h3 {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.spectator-badge {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: normal;
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* Spectate Chat Message Styling */
.chat-message .message-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.chat-message .message-header .player-name {
    font-weight: 600;
    color: #333;
}

.chat-message.player1-message .message-header .player-name {
    color: #333;
}

.chat-message.player2-message .message-header .player-name {
    color: #333;
}

.chat-message .message-header .stone-icon {
    width: 14px;
    height: 14px;
}

/* Animation Keyframes */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

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

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Private Room URL */
.private-room-url {
    margin: 1rem 0;
    padding: 1rem;
    background: var(--card-bg);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.private-room-url h4 {
    margin: 0 0 0.75rem 0;
    color: var(--primary-color);
    font-size: 0.9rem;
    text-align: center;
}

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

.url-container input {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 0.85rem;
}

.url-container button {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Join Private Room */
.join-private-room {
    margin: 1rem 0;
    padding: 1rem;
    background: var(--success-color-light, #e8f5e8);
    border-radius: 8px;
    border: 1px solid var(--success-color);
}

.private-room-info h4 {
    margin: 0 0 0.5rem 0;
    color: var(--success-color);
    font-size: 0.95rem;
    text-align: center;
}

.private-room-info p {
    margin: 0;
    color: var(--text-color);
    font-size: 0.85rem;
    text-align: center;
    opacity: 0.8;
}

/* Battle Dashboard */
.battle-dashboard {
    margin: 2rem 0;
    padding: 0;
    background: white;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: visible;
}

.battle-dashboard h3 {
    margin: 0;
    padding: 1.25rem 1.5rem;
    color: white;
    background: linear-gradient(135deg, var(--primary-color), #15683f);
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.dashboard-content {
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
    padding: 1rem;
}

.rooms-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.room-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--light-color);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.room-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: var(--gray-color);
    transition: all 0.3s ease;
}

.room-item:hover {
    background: #f8f9fa;
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(27, 128, 80, 0.15);
}

.room-item.waiting::before {
    background: var(--warning-color, #f39c12);
}

.room-item.playing::before {
    background: var(--success-color);
}

.room-item.private::before {
    background: var(--primary-color);
}

.room-item .room-info {
    flex: 1;
}

.room-item .room-info .room-id {
    font-weight: 600;
    color: var(--secondary-color);
    font-size: 0.95rem;
    margin-bottom: 0.3rem;
}

.room-item .room-info .room-players {
    font-size: 0.85rem;
    color: var(--gray-color);
    line-height: 1.3;
}

/* 🎨 Dashboard Avatar Styles */
.room-players-with-avatars {
    display: flex;
    align-items: center;
    gap: 6px;
    /* 維持原本 .room-players 的字體大小和顏色 */
    font-size: 0.85rem;
    color: var(--gray-color);
    line-height: 1.3;
    flex-wrap: nowrap;
    min-width: 0;
}

.room-players-with-avatars .player-name-text {
    /* 桌機版：不截斷名稱，保持完整顯示 */
    white-space: nowrap;
}

.room-players-with-avatars .vs-separator {
    flex-shrink: 0;
    /* 維持原本的顏色 */
    color: var(--gray-color);
    padding: 0 2px;
}

/* Dashboard Avatar - matching spectate icon size (28px) */
.dashboard-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-avatar.guest {
    background: linear-gradient(145deg, #e0e0e0, #c8c8c8);
    color: #888;
    cursor: default;
}

.dashboard-avatar.guest i {
    font-size: 12px;
}

.dashboard-avatar.authenticated {
    background: linear-gradient(145deg, #f8f9fa, #e9ecef);
    border: 2px solid #ddd;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dashboard-avatar.authenticated img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dashboard-avatar.authenticated:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

a.dashboard-avatar.authenticated:hover {
    border-color: var(--primary-color);
}

/* Mobile RWD for Dashboard Avatars */
/* 臨界值 768px: 平板/小螢幕筆電 */
@media (max-width: 768px) {
    .room-players-with-avatars {
        gap: 4px;
    }
    
    /* 暫時移除名稱最大寬度限制，測試效果 */
    /* .room-players-with-avatars .player-name-text {
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 140px;
        flex-shrink: 1;
    } */
    
    .dashboard-avatar {
        width: 24px;
        height: 24px;
        min-width: 24px;
    }
    
    .dashboard-avatar.guest i {
        font-size: 10px;
    }
}

/* 臨界值 480px: 手機版 */
@media (max-width: 480px) {
    .room-players-with-avatars {
        gap: 3px;
    }
    
    /* 暫時移除名稱最大寬度限制，測試效果 */
    /* .room-players-with-avatars .player-name-text {
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100px;
        flex-shrink: 1;
    } */
    
    .room-players-with-avatars .vs-separator {
        padding: 0 1px;
    }
    
    .dashboard-avatar {
        width: 20px;
        height: 20px;
        min-width: 20px;
    }
    
    .dashboard-avatar.guest i {
        font-size: 9px;
    }
    
    .dashboard-avatar.authenticated {
        border-width: 1px;
    }
}

.room-status {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--secondary-color);
}

.status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.status-indicator.waiting {
    background-color: var(--warning-color, #f39c12);
    animation: pulse 2s infinite;
}

.status-indicator.playing {
    background-color: var(--success-color);
}

.status-indicator.private {
    background-color: var(--primary-color);
}

.no-rooms {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 2rem;
    color: var(--gray-color);
    background: linear-gradient(145deg, #f8f9fa, #e9ecef);
    border-radius: 8px;
    border: 2px dashed var(--border-color);
    margin: 0;
}

.no-rooms::before {
    content: '🎯';
    font-size: 2.5rem;
    margin-bottom: 1rem;
    opacity: 0.6;
}

.no-rooms .no-rooms-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 0.5rem;
}

.no-rooms .no-rooms-subtitle {
    font-size: 0.9rem;
    color: var(--gray-color);
    line-height: 1.4;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

/* Custom scrollbar for dashboard */
.dashboard-content::-webkit-scrollbar {
    width: 6px;
}

.dashboard-content::-webkit-scrollbar-track {
    background: var(--light-color);
    border-radius: 3px;
}

.dashboard-content::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.dashboard-content::-webkit-scrollbar-thumb:hover {
    background: var(--gray-color);
}

/* Responsive Design for New Elements */
@media (max-width: 768px) {
    .battle-dashboard {
        margin: 1.5rem 0;
    }
    
    .battle-dashboard h3 {
        padding: 1rem;
        font-size: 1rem;
    }
    
    .dashboard-content {
        padding: 0.75rem;
        min-height: 150px;
        max-height: 300px;
    }
    
    .private-room-url {
        padding: 0.75rem;
    }
    
    .url-container {
        flex-direction: column;
    }
    
    .url-container button {
        width: 100%;
    }
    
    /* 手機版 room-item 使用 CSS Grid 重新佈局 */
    /* Row 1: Room ID (左) + Room Status (右) */
    /* Row 2: Players (左) */
    .room-item {
        padding: 0.75rem;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        grid-template-areas: 
            "room-id room-status"
            "players players";
        gap: 0.4rem 0.5rem;
        align-items: center;
    }
    
    .room-item .room-info {
        display: contents;
    }
    
    .room-item .room-info .room-id {
        grid-area: room-id;
        margin-bottom: 0;
    }
    
    .room-item .room-info .room-players,
    .room-item .room-info .room-players-with-avatars {
        grid-area: players;
        justify-self: start;
    }
    
    .room-status {
        grid-area: room-status;
        justify-self: end;
    }
    
    .toggle-label {
        gap: 0.5rem;
    }
    
    .toggle-text {
        font-size: 0.9rem;
    }
    
    .no-rooms {
        padding: 2rem 1rem;
    }
    
    .no-rooms::before {
        font-size: 2rem;
        margin-bottom: 0.75rem;
    }
    
    .no-rooms .no-rooms-title {
        font-size: 1rem;
    }
    
    .no-rooms .no-rooms-subtitle {
        font-size: 0.85rem;
    }
}

/* Room Error Container */
.room-error-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    padding: 2rem;
    width: 100%;
    background: var(--light-color);
    border-radius: 8px;
    margin: 2rem 0;
}

.room-error-message {
    text-align: center;
    background: white;
    padding: 3rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 100%;
    border: 2px solid var(--border-color);
}

.room-error-message h3 {
    color: var(--danger-color);
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.room-error-message p {
    color: var(--gray-color);
    margin-bottom: 2rem;
    line-height: 1.6;
    font-size: 1rem;
}

.room-error-message .btn {
    padding: 12px 24px;
    font-size: 1rem;
    min-width: 200px;
}

/* Language Dropdown Styles */
.language-dropdown {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.language-dropdown label {
    color: #bdc3c7;
    font-size: 0.9rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.language-dropdown label i {
    font-size: 1rem;
}

.language-dropdown select {
    background-color: #2c4638;
    color: #bdc3c7;
    border: 1px solid #3d5c4c;
    border-radius: 5px;
    padding: 0.5rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.language-dropdown select:hover {
    border-color: #e74c3c;
    background-color: #32503f;
}

.language-dropdown select:focus {
    outline: none;
    border-color: #e74c3c;
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2);
}

.language-dropdown select option {
    background-color: #2c4638;
    color: #bdc3c7;
    padding: 0.5rem;
}

@media (max-width: 768px) {
    .language-dropdown {
        align-items: center;
        flex-direction: row;
        gap: 1rem;
        justify-content: center;
    }
    
    .language-dropdown label {
        margin-bottom: 0;
        white-space: nowrap;
    }
    
    .language-dropdown select {
        min-width: 120px;
    }
}

/* 大螢幕設備（電腦版和大平板）的按鈕位置調整 */
@media (min-width: 769px) {
    .hide-overlay-btn {
        bottom: 105px;
    }
    
    .show-overlay-btn {
        bottom: -8px;
    }
}





/* 手機版響應式調整 */
@media (max-width: 768px) {
    .hide-overlay-btn {
        width: 40px;
        height: 40px;
        bottom: 50px;
    }
    
    .hide-overlay-btn i {
        font-size: 16px;
    }
    
    .show-overlay-btn {
        width: 40px;
        height: 40px;
        bottom: -8px;
    }
    
    .show-overlay-btn i {
        font-size: 16px;
        animation: bounceUp 2s infinite;
    }
}

/* 小屏幕進一步調整 */
@media (max-width: 480px) {
    .hide-overlay-btn {
        width: 36px;
        height: 36px;
        bottom: -8px;
    }
    
    .hide-overlay-btn i {
        font-size: 14px;
    }
    
    .show-overlay-btn {
        width: 36px;
        height: 36px;
        bottom: -8px;
    }
    
    .show-overlay-btn i {
        font-size: 14px;
        animation: bounceUp 2s infinite;
    }
}

/* 等待手机版创建者重连的提示样式 */
.wait-creator-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
}

.wait-creator-content {
    background: white;
    padding: 40px 30px;
    border-radius: 16px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    animation: waitCreatorSlideIn 0.5s ease-out;
}

@keyframes waitCreatorSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.wait-creator-icon {
    margin-bottom: 20px;
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

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

.wait-creator-title {
    color: var(--secondary-color);
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 15px;
}

.wait-creator-message {
    color: var(--gray-color);
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 25px;
}

.wait-creator-room-info {
    background: var(--light-color);
    padding: 12px 20px;
    border-radius: 8px;
    border-left: 4px solid var(--primary-color);
}

.wait-creator-room-info span {
    font-weight: 600;
    color: var(--secondary-color);
    font-family: 'Courier New', monospace;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .wait-creator-content {
        padding: 30px 20px;
        margin: 20px;
    }
    
    .wait-creator-title {
        font-size: 20px;
    }
    
    .wait-creator-message {
        font-size: 14px;
    }
    
    .loading-spinner {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 480px) {
    .wait-creator-content {
        padding: 25px 15px;
    }
    
    .wait-creator-title {
        font-size: 18px;
    }
    
    .wait-creator-message {
        font-size: 13px;
    }
}

/* 系統通知樣式 */
.system-notifications {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 1001;
    pointer-events: none;
    max-width: 350px;
}

.system-notification {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
    margin-bottom: 15px;
    padding: 0;
    animation: slideInRight 0.4s ease-out;
    pointer-events: auto;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 2px solid rgba(255,255,255,0.1);
}

.system-notification:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.35);
    border-color: rgba(255,255,255,0.2);
}

.online-battle-notification {
    background: linear-gradient(135deg, #20332a 0%, #2c4638 100%);
    border: 1px solid #4a6741;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    position: relative;
    overflow: visible;
}

.online-battle-notification:hover {
    background: linear-gradient(135deg, #2c4638 0%, #20332a 100%);
    border-color: #5a7a51;
    transform: translateY(-2px);
    box-shadow: 0 15px 45px rgba(0,0,0,0.4);
}

.online-battle-notification::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 50%, rgba(0,0,0,0.1) 100%);
    border-radius: inherit;
    pointer-events: none;
}

.notification-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(231, 76, 60, 0.8);
    border: 1px solid rgba(231, 76, 60, 0.6);
    color: #fff;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* iOS Safari 的系統字型(SF Pro)「×」字符在字框內偏低,用字元置中會看起來下沉。
       改為 font-size:0 隱藏文字字符,叉叉由下方偽元素以純幾何方式繪製 → 任何平台都絕對正中。 */
    font-size: 0;
    font-weight: bold;
    transition: all 0.2s ease;
    line-height: 1;
    padding: 0;
    z-index: 3;
}

/* 幾何繪製的 ×:兩條 45° 交叉短棒,以圓心為中心旋轉,與字型無關、永遠置中 */
.notification-close::before,
.notification-close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
}
.notification-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.notification-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.notification-close:hover {
    background: rgba(231, 76, 60, 1);
    border-color: rgba(231, 76, 60, 0.8);
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4);
}

.notification-close:active {
    transform: scale(0.95);
}

.notification-content {
    padding: 16px 20px;
    color: #ecf0f1;
    position: relative;
    z-index: 2;
}



.notification-text {
    line-height: 1.5;
    overflow: hidden; /* 清除浮動 */
}

.notification-text::after {
    content: "";
    display: table;
    clear: both;
}

.notification-title {
    font-weight: 700;
    font-size: 17px;
    margin-bottom: 6px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    letter-spacing: 0.3px;
    color: #ecf0f1;
}

.notification-message {
    font-size: 14px;
    margin-bottom: 8px;
    opacity: 0.9;
    font-weight: 500;
    line-height: 1.4;
    color: #bdc3c7;
}

.notification-action {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #fff;
    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
    padding: 8px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    border: none;
    transition: all 0.2s ease;
    box-shadow: 0 3px 10px rgba(230, 126, 34, 0.3);
    float: right;
    margin-left: auto;
}

.notification-action:hover {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(230, 126, 34, 0.4);
}

.action-icon {
    font-size: 14px;
    animation: bounce 2s infinite;
}

.reversi-disc {
    width: 14px;
    height: 14px;
    background: radial-gradient(circle at 30% 30%, #4a4a4a, #1a1a1a, #000000);
    border-radius: 50%;
    display: inline-block;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.8),
        inset 0 1px 2px rgba(255, 255, 255, 0.3),
        inset 0 -1px 2px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.reversi-disc::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    filter: blur(0.5px);
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-3px);
    }
    60% {
        transform: translateY(-2px);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.system-notification.fade-out {
    animation: fadeOutRight 0.4s ease-out forwards;
}

@keyframes fadeOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

@media (max-width: 768px) {
    .system-notifications {
        top: 70px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
    
    .system-notification {
        margin-left: 0;
        margin-right: 0;
    }
    
    .notification-content {
        padding: 14px 16px;
    }
    
    .notification-icon {
        font-size: 28px;
        margin-right: 12px;
    }
    
    .notification-title {
        font-size: 15px;
    }
    
    .notification-message {
        font-size: 13px;
    }
    
    .notification-action {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .system-notifications {
        top: 60px;
        right: 5px;
        left: 5px;
    }
    
    .notification-content {
        padding: 12px 14px;
    }
    
    .notification-icon {
        font-size: 24px;
        margin-right: 10px;
    }
    
    .notification-title {
        font-size: 14px;
    }
    
    .notification-message {
        font-size: 12px;
    }
}

/* Toast Notification System */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    pointer-events: none;
}

/* 對手斷線 Toast 容器 - 與聊天訊息位置一致 */
.toast-container.chat-position {
    top: 80px;
    right: 20px;
}

/* 積分變化 Toast 樣式 */
.toast-rating-gain {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-left: 4px solid #dc2626;
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.15);
}

.toast-rating-loss {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-left: 4px solid #16a34a;
    box-shadow: 0 8px 25px rgba(22, 163, 74, 0.15);
}

/* 積分變化箭頭圖標 - 風格 4: 雙層箭頭 */
.rating-arrow-up,
.rating-arrow-down {
    width: 24px;
    height: 24px;
    position: relative;
}

.rating-arrow-up::before,
.rating-arrow-up::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 12px solid #dc2626;
}

.rating-arrow-up::before {
    top: 20%;
}

.rating-arrow-up::after {
    top: 50%;
    opacity: 0.6;
}

.rating-arrow-down::before,
.rating-arrow-down::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 12px solid #16a34a;
}

.rating-arrow-down::before {
    bottom: 20%;
}

.rating-arrow-down::after {
    bottom: 50%;
    opacity: 0.6;
}

/* 等級升級 Toast 特殊樣式 */
.toast-rank-upgrade {
    min-width: 350px;
    padding: 16px;
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
    border-left: 4px solid #10b981;
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.15);
}

.toast-rank-icon {
    width: 48px;
    height: 48px;
    margin-right: 12px;
    flex-shrink: 0;
}

.toast-rank-icon .rank-badge-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #10b981;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.toast {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-bottom: 10px;
    padding: 12px 16px;
    min-width: 300px;
    max-width: 400px;
    pointer-events: auto;
    transform: translateX(400px);
    transition: all 0.3s ease-in-out;
    border-left: 4px solid #ccc;
}

.toast.show {
    transform: translateX(0);
}

.toast.hide {
    transform: translateX(400px);
    opacity: 0;
}

.toast-success {
    border-left-color: #10b981;
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
}

.toast-error {
    border-left-color: #ef4444;
    background: linear-gradient(135deg, #fef2f2 0%, #fef2f2 100%);
}

.toast-warning {
    border-left-color: #f59e0b;
    background: linear-gradient(135deg, #fffbeb 0%, #fefce8 100%);
}

.toast-info {
    border-left-color: #4f7564;
    background: linear-gradient(135deg, #f1f6f3 0%, #f4f8f6 100%);
}

.toast-icon {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    color: white;
}

.toast-success .toast-icon {
    background: #10b981;
}

.toast-error .toast-icon {
    background: #ef4444;
}

.toast-warning .toast-icon {
    background: #f59e0b;
}

.toast-info .toast-icon {
    background: #4f7564;
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-weight: 600;
    margin-bottom: 4px;
    color: #1f2937;
    font-size: 14px;
}

.toast-message {
    color: #6b7280;
    font-size: 13px;
    line-height: 1.4;
}

.toast-close {
    margin-left: 12px;
    background: none;
    border: none;
    font-size: 18px;
    color: #9ca3af;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

.toast-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #374151;
}

/* Toast animations */
@keyframes toastSlideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toastSlideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

/* Mobile responsive for toasts */
@media (max-width: 768px) {
    .toast-container {
        top: 10px;
        right: 10px;
        left: 10px;
    }
    
    .toast {
        min-width: auto;
        max-width: none;
        transform: translateY(-100px);
    }
    
    .toast.show {
        transform: translateY(0);
    }
    
    .toast.hide {
        transform: translateY(-100px);
        opacity: 0;
    }
}

/* 最新一手標記的 RWD：小螢幕縮小圈徑，免得蓋住整顆石 */
@media (max-width: 599px) {
    .last-move-ring {
        width: 34%;
        height: 34%;
        box-shadow: 0 0 0 1.5px rgba(220, 38, 38, 0.95);
    }

    .board-cell.has-black .last-move-ring {
        box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.92);
    }
}


/* ===== Single Player 廣告提示文字(結束彈窗 / Restart+Undo 下方,2026-07)=====
   小字 + 灰字 + 不斷行。字級用 clamp(vw) 隨視窗縮放,讓長語系(德/俄/葡/匈)在窄螢幕也能單行顯示。 */
.ad-notice {
    margin: 14px 0 0;
    text-align: center;
    color: #9aa3ad;
    font-size: clamp(0.68rem, 2.9vw, 0.8rem);
    line-height: 1.4;
    white-space: nowrap;
}
/* 只有「含提示文字」的結束彈窗才放寬(用 :has 精準限定 Single Player,不影響 Online Battle 彈窗) */
.game-end-content:has(.ad-notice) {
    max-width: 94%;
}
@media (max-width: 768px) {
    .game-end-content:has(.ad-notice) {
        padding-left: 12px;
        padding-right: 12px;
    }
}
/* Restart / Undo 按鈕列下方的提示:保持適當距離 */
.game-controls + .ad-notice {
    margin-top: 16px;
}

/* ===== 🏆 房內連戰比分表(2026-08,Online Battle + Spectate 共用)=====
   ⚠️ 這塊是 .game-info 的「兄弟節點」,不是它的子元素。
      原因:CSS 有 8 條 .player-info:last-child 規則負責右側玩家的靠右對齊 / row-reverse /
      文字與棋子位置。若把比分表放進 .game-info 當第 4 個子元素,右側玩家就不再是 :last-child,
      那些規則會全部失效導致跑位重疊。放在外面 → .game-info 的結構與樣式 100% 維持原狀。
   視覺上用「上方無圓角 + 負 margin」與 game-info 底部相接,看起來仍是同一張卡。 */
.series-score {
    background-color: white;
    border-radius: 0 0 8px 8px;
    box-shadow: var(--shadow);
    padding: 12px 15px 14px;
    margin: 0 0 20px;
    border-top: 1px solid #eee;      /* 與上方玩家列之間的分隔線 */
}
/* 只有「後面接著比分表」的 game-info 才調整;不影響其他任何頁面的 game-info。
   ⚠️ 這裡改用「把 game-info 的 margin-bottom 歸零」讓兩張卡相接,
      而不是在比分表用寫死的負 margin —— 因為 game-info 的 margin-bottom
      桌機是 20px、手機被覆寫成 10px,寫死負值會在手機上多吃掉 10px,
      把「時鐘 / 對手回合」下方的內距整個吞掉(上下間距變得不對稱)。 */
.game-info:has(+ .series-score) {
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;
}
/* 手機版:讓「時鐘 + 對手回合」上下留白一致且與桌機觀感接近(桌機 15px) */
@media (max-width: 768px) {
    .game-info:has(+ .series-score) {
        padding-top: 14px;
        padding-bottom: 14px;
    }
}
.series-score table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}
.series-score th {
    font-weight: 600;
    color: #95a5a6;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0 0 5px;
    text-align: center;
    white-space: nowrap;
}
.series-score th:first-child { text-align: left; }
.series-score td {
    padding: 5px 0;
    border-top: 1px solid #f0f2f3;
    text-align: center;
    font-weight: 700;
    color: var(--secondary-color);
}
.series-score td:first-child {
    text-align: left;
    font-weight: 600;
    color: #5b6b78;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.series-score .ss-stone {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: -1px;
    margin-right: 5px;
    flex-shrink: 0;
}
.series-score .ss-stone.black-stone { background: radial-gradient(circle at 30% 30%, #555, #111); box-shadow: 1px 1px 2px rgba(0,0,0,.35); }
.series-score .ss-stone.white-stone { background: radial-gradient(circle at 30% 30%, #fff, #ddd); border: 1px solid #ccc; }
@media (max-width: 480px) {
    .series-score table { font-size: 11.5px; }
    .series-score td:first-child { max-width: 96px; }
}

/* ===== ⚫⚪ [2026-08] 單人遊戲：先後手選擇（設計 ① 棋子圓鈕）=====
   位置在「規則說明」與「選擇難度」之間。預設執黑先手。 */
.side-choice-cta {
    font-size: 12px;
    color: #95a5a6;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 10px;
}
.side-choice {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}
.side-choice-btn {
    flex: 1;
    min-width: 0;                /* 允許長翻譯收縮，避免撐破 modal */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 6px;
    border: 2px solid #dfe4e8;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #20332a;
    line-height: 1.3;
    transition: all .15s ease;
}
.side-choice-btn:hover { border-color: #b8c4cc; }
.side-choice-btn.active { border-color: #1b8050; background: #e6f4ec; }
.side-choice-btn .side-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.side-choice-btn .side-dot.black {
    background: radial-gradient(circle at 32% 30%, #5b6b7a, #16261e);
}
.side-choice-btn .side-dot.white {
    background: radial-gradient(circle at 32% 30%, #fff, #d5dbe0);
    border: 1px solid #c3ccd3;
}
.side-choice-btn .side-label { overflow-wrap: anywhere; }

/* ===== ⚫⚪ 手機版：規則說明改成標題句末的 ⓘ 圖示 =====
   加入先後手選項後 modal 變高，原本那顆「ⓘ 規則」膠囊會讓版面更擁擠，
   改成接在標題句末、與該行文字垂直置中的小圓圖示。桌機版維持原本的長規則文字。 */
.rules-info-icon { display: none; }
.game-start-content h2 .title-tail { white-space: nowrap; }   /* 句尾文字 + ⓘ 不拆行 */
/* 浮出式提示的定位錨點用 .game-start-content（modal 內容區）。
   ⚠️ 不放在 <h2> 內：提示文字會被算進標題的文字內容，污染 SEO 與螢幕閱讀器的標題語意。
   ⚠️ 也不用 .title-tail 當錨點：標題換行時 ⓘ 會偏左，靠右對齊的氣泡會溢出畫面。 */
.game-start-content { position: relative; }
.rules-info-pop { display: none; }

@media (max-width: 768px) {
    .game-start-content .rules-info-toggle { display: none !important; }  /* 舊的規則膠囊 */
    .game-start-content .rules-info-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background: #bdc3c7;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        font-style: normal;
        line-height: 1;
        border: 0;
        padding: 0;
        cursor: pointer;
        vertical-align: middle;
        margin-left: 7px;
        position: relative;
        top: -1px;
        transition: background .15s ease;
    }
    .game-start-content .rules-info-icon:hover,
    .game-start-content .rules-info-icon.open { background: #7f8c8d; }
    /* 浮出式提示（tooltip / popover）：脫離文件流，不會把 modal 內容往下擠。
       錨點是 .title-tail —— 它的右緣就是 ⓘ 圖示的右緣，所以用 right 對齊，
       氣泡只會往左長，永遠不會超出 modal 右側；箭頭因此天然指在圖示正下方。 */
    .game-start-content .rules-info-pop {
        display: block;
        position: absolute;
        top: 0;                /* 實際 top 由處理器依標題高度寫入 */
        left: 18px;
        right: 18px;           /* 與 modal 內距切齊 → 任何語系、任何螢幕寬都不可能溢出 */
        z-index: 30;

        box-sizing: border-box;
        padding: 9px 12px;

        background: #20332a;
        color: #fff;
        border-radius: 8px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .28);

        font-size: 12px;
        font-weight: 400;
        line-height: 1.55;
        letter-spacing: normal;
        text-align: left;
        white-space: normal;      /* 抵銷 .title-tail 的 nowrap */
        word-break: break-word;

        /* 收合狀態：不佔位、不可點、螢幕閱讀器也讀不到 */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-4px);
        transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
    }
    /* 箭頭：指向 ⓘ 圖示 */
    .game-start-content .rules-info-pop::after {
        content: '';
        position: absolute;
        top: -5px;
        left: var(--tip-x, 50%);   /* 由 ⓘ 的實際位置決定，處理器在展開時寫入 */
        margin-left: -5px;
        width: 10px;
        height: 10px;
        background: #20332a;
        transform: rotate(45deg);
        border-radius: 2px;
    }
    .game-start-content .rules-info-pop.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        transition: opacity .16s ease, transform .16s ease, visibility 0s;
    }
    @media (prefers-reduced-motion: reduce) {
        .game-start-content .rules-info-pop { transition: none; transform: none; }
        .game-start-content .rules-info-pop.show { transform: none; }
    }
    .side-choice-cta { font-size: 11px; margin-bottom: 8px; }
    .side-choice { margin-bottom: 16px; }
}

/* ===== ⚫⚪ 結束畫面：終局比分副標 ===== */
.result-subreason {
    margin: 0 0 14px;
    font-size: 13px;
    color: #c0392b;
    font-weight: 600;
    line-height: 1.5;
}
@media (min-width: 769px) {
    .result-subreason { font-size: 14px; }
}


/* ═══ 規則說明頁（how-to-play）═══════════════════════════════════════════ */
.how-to-intro {
    font-size: 1.05rem;
    line-height: 1.75;
    color: #3f4a44;
    margin: 0 0 28px;
}

.how-to-play-content .rules-section li,
.how-to-play-content .strategy-section li,
.how-to-play-content .xot-section li {
    line-height: 1.7;
    margin-bottom: 10px;
}

.how-to-play-content .rules-section p,
.how-to-play-content .xot-section p {
    line-height: 1.7;
}

.how-to-play-content .xot-section {
    border-top: 1px solid #e3e8e5;
    padding-top: 28px;
}

/* 商標聲明：Othello 是他人的註冊商標，站上只做指示性使用，這行必須看得到但不喧賓奪主 */
.trademark-note {
    margin-top: 36px;
    padding-top: 16px;
    border-top: 1px solid #e3e8e5;
    font-size: 0.82rem;
    line-height: 1.6;
    color: #7b8781;
}

/* 頁尾商標聲明：Othello 為他人註冊商標，本站只作指示性使用 */
.footer-trademark {
    margin: 8px auto 0;
    text-align: center;
    font-size: 0.72rem;
    line-height: 1.55;
    opacity: 0.68;
}

/* ═══ 規則說明頁的棋盤圖解（由 /js/reversi-howto.js 依 data-* 畫出）═══════ */
.howto-figs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 22px 28px;
    margin: 26px 0 10px;
}
.howto-fig { margin: 0; width: 240px; max-width: 100%; text-align: center; }
/* 圖解棋盤用固定的正方形尺寸，並明確蓋掉 mobile-optimized.css 給正式棋盤的規則。
   那支檔案在 ≤768px 時把 .game-board-container 設成 height:0 + padding-bottom:100%
  （舊式的正方形寫法）、把 .game-board 設成 absolute；圖解若沿用，容器高度會只剩邊框，
   整張圖被壓扁成一條線。 */
.howto-fig .game-board-container {
    width: 240px;
    height: 240px !important;
    max-width: 100%;
    margin: 0 auto 10px !important;
    padding: 6px !important;
    border-radius: 8px !important;
    aspect-ratio: auto;
    overflow: hidden;
}
.howto-fig .game-board {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 100% !important;
}
.howto-fig figcaption { font-size: 0.9rem; line-height: 1.5; color: #4a5a52; }
.howto-fig figcaption strong { color: #1f2d27; }
.howto-arrow { align-self: center; font-size: 28px; color: #9aa5a0; margin-top: -30px; }
.howto-board .board-cell.is-legal { cursor: default; }
.howto-board .board-coord { font-size: 8px; }
.howto-board .board-coord.coord-file { top: 1px; }
.howto-board .board-coord.coord-rank { left: 2px; }
/* 這一手翻掉的子：黃框標出 */
.howto-board .board-cell.is-flipped { box-shadow: inset 0 0 0 2px #ffd54a, inset -1px -1px 0 rgba(0, 0, 0, 0.34); }
/* 角／X 位／C 位 */
.howto-board .board-cell.zone-corner { background: rgba(255, 213, 74, 0.62); }
.howto-board .board-cell.zone-x { background: rgba(231, 76, 60, 0.58); }
.howto-board .board-cell.zone-c { background: rgba(243, 156, 18, 0.42); }
.howto-board .zone-mark {
    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
@media (max-width: 600px) {
    .howto-fig { width: 200px; }
    .howto-fig .game-board-container { width: 200px; height: 200px !important; padding: 5px !important; }
    .howto-arrow { display: none; }
}

/* ADSENSE-PENDING：AdSense 尚未核准，「…前會播放一段簡短廣告」這類提示全站先不顯示。
   18 個語系的文字都還留在 HTML 裡，核准後把這條規則刪掉就會恢復。 */
.ad-notice { display: none !important; }