/* Global Styles */
:root {
    --primary-color: #FF6B6B;
    /* Default Meal Theme */
    --secondary-color: #9B59B6;
    --background-color: #F7F8FA;
    --text-color: #333;
    --text-light: #777;
    --card-bg: #FFFFFF;
    --border-radius: 16px;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --font-family: 'Noto Sans TC', sans-serif;
}

/* Utility Classes */
.hidden {
    display: none !important;
}

/* ========================================
   進場動畫 (Splash Screen)
======================================== */
.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 50%, #8e1d1d 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.splash-screen.fade-out {
    opacity: 0;
    transform: scale(1.1);
    pointer-events: none;
}

.splash-screen.hidden,
#splash-screen.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.splash-content {
    text-align: center;
    animation: splashBounceIn 0.8s ease-out;
}

@keyframes splashBounceIn {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    60% {
        transform: scale(1.05);
    }

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

.splash-image {
    max-width: 250px;
    width: 70%;
    height: auto;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    animation: splashFloat 2.5s ease-in-out infinite;
    margin-bottom: 24px;
}

@keyframes splashFloat {

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

    50% {
        transform: translateY(-15px) rotate(2deg);
    }
}

.splash-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    margin-bottom: 8px;
    animation: splashPulse 1.5s ease-in-out infinite;
}

@keyframes splashPulse {

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

    50% {
        transform: scale(1.03);
    }
}

.splash-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    margin-bottom: 30px;
}

/* Loading dots */
.splash-loader {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.splash-loader span {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: splashDots 1.2s ease-in-out infinite;
}

.splash-loader span:nth-child(2) {
    animation-delay: 0.2s;
}

.splash-loader span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes splashDots {

    0%,
    80%,
    100% {
        transform: scale(0.6);
        opacity: 0.5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Mobile optimization */
@media (max-width: 480px) {
    .splash-image {
        max-width: 200px;
    }

    .splash-title {
        font-size: 2rem;
    }

    .splash-subtitle {
        font-size: 1rem;
    }
}

/* Theme Variations */
.theme-meal {
    --primary-color: #FF6B6B;
    /* Salmon */
    --secondary-color: #9B59B6;
    /* Purple */
}

.theme-tea {
    --primary-color: #E67E22;
    /* Orange/Brown for Tea */
    --secondary-color: #9B59B6;
}

.theme-special {
    --primary-color: #9B59B6;
    /* Purple for Special */
    --secondary-color: #9B59B6;
}

/* Special Theme Button Override */
.theme-special .btn-primary {
    background: linear-gradient(135deg, #A569BD, #8E44AD);
    /* Purple gradient */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-family);
    background-color: var(--background-color);
    color: var(--text-color);
    display: flex;
    justify-content: center;
    min-height: 100dvh;
    height: 100dvh;
    overflow: hidden;
}

.app-container {
    width: 100%;
    max-width: 480px;
    /* Mobile-first */
    background-color: #fff;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    /* Changed to hidden to prevent main container scroll */
}

/* PC/Tablet Layout */
@media (min-width: 768px) {
    .app-container {
        max-width: 1200px;
        /* Wider on PC */
    }
}

/* Game Board Layout */
.game-board-section {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.game-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
    padding: 16px 8px 8px 8px;
    position: relative;
    /* Allow absolute positioning within */
}

/* Back button removed from header style */

.game-title {
    flex: 1;
    text-align: center;
    margin: 0;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Space between title and label */
}

.mode-label {
    /* Adjusted for inline display */
    font-size: 14px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.personal-label {
    background-color: var(--primary-color);
    color: white;
    box-shadow: 0 2px 6px rgba(231, 76, 60, 0.3);
}

.group-label {
    background-color: var(--secondary-color);
    color: white;
    box-shadow: 0 2px 6px rgba(155, 89, 182, 0.3);
}

/* Game Mode Labels (shown during group game) */
.game-mode-label {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
    margin-left: 4px;
}

.click-battle-label {
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
    color: white;
    box-shadow: 0 2px 6px rgba(40, 167, 69, 0.4);
}

.voting-label {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    box-shadow: 0 2px 6px rgba(0, 123, 255, 0.4);
}

.elimination-label {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
    color: #856404;
    box-shadow: 0 2px 6px rgba(255, 193, 7, 0.4);
}

.icon-btn,
.room-info-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: white;
    color: #555;
    font-size: 18px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

/* Filter Controls - collapsible */
.filter-controls-wrapper {
    width: 100%;
}

.filter-toggle-btn {
    width: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 12px;
    padding: 12px 16px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    transition: all 0.3s;
}

.filter-toggle-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.filter-summary {
    display: flex;
    gap: 12px;
    align-items: center;
}

.toggle-icon {
    transition: transform 0.3s;
}

.filter-toggle-btn.expanded .toggle-icon {
    transform: rotate(180deg);
}

.filter-controls {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 12px;
    margin-top: 8px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    max-height: 500px;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease, opacity 0.3s ease;
    opacity: 1;
}

.filter-controls.collapsed {
    max-height: 0;
    padding: 0 12px;
    margin-top: 0;
    opacity: 0;
}

.filter-section {
    margin-bottom: 12px;
}

.filter-section:last-child {
    margin-bottom: 0;
}

.filter-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
}

.filter-icon {
    font-size: 18px;
}

/* Game Slider */
.game-slider {
    width: 100%;
    height: 8px;
    border-radius: 5px;
    background: linear-gradient(to right, #f39c12, #e74c3c);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.game-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border: 3px solid #f39c12;
    transition: transform 0.2s;
}

.game-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.game-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border: 3px solid #f39c12;
    transition: transform 0.2s;
}

.game-slider::-moz-range-thumb:hover {
    transform: scale(1.2);
}

/* Group Mode Controls */
.group-controls {
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    margin-bottom: 16px;
}

.mode-toggle-container {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    justify-content: center;
}

.mode-toggle-btn {
    flex: 1;
    padding: 14px 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.mode-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
}

.mode-toggle-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #fff;
    color: #fff;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    transform: scale(1.02);
}

.mode-toggle-btn i {
    font-size: 18px;
}

/* Price Buttons */
.price-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: center;
}

.price-btn {
    flex: 1;
    min-width: 50px;
    padding: 12px 10px;
    border: none;
    border-radius: 25px;
    background: linear-gradient(145deg, #f0f0f0, #ffffff);
    color: #555;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.1), -2px -2px 6px rgba(255, 255, 255, 0.9);
}

.price-btn:hover {
    background: linear-gradient(145deg, #e8e8e8, #f5f5f5);
    transform: translateY(-2px);
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.15), -3px -3px 8px rgba(255, 255, 255, 1);
}

.price-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5), inset 0 -2px 5px rgba(0, 0, 0, 0.1);
    transform: scale(1.1);
    font-weight: 800;
}

/* Price buttons in leader settings (on white background) */
#leader-settings .price-buttons {
    flex-wrap: nowrap !important;
    gap: 8px;
}

#leader-settings .price-btn {
    background: linear-gradient(145deg, #f8f9ff, #ffffff);
    color: #667eea;
    box-shadow: 3px 3px 8px rgba(102, 126, 234, 0.15), -2px -2px 6px rgba(255, 255, 255, 0.9);
    padding: 10px 6px;
    font-size: 13px;
    min-width: 45px;
}

#leader-settings .price-btn:hover {
    background: linear-gradient(145deg, #eef0ff, #f5f7ff);
    transform: translateY(-3px);
    box-shadow: 4px 4px 12px rgba(102, 126, 234, 0.25), -3px -3px 8px rgba(255, 255, 255, 1);
}

#leader-settings .price-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
    transform: scale(1.1);
    font-weight: 800;
}

/* ===== Personal Mode: Clean & Simple Game Grid ===== */
.game-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 columns for mobile */
    gap: 6px;
    padding: 10px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 2px solid #dee2e6;
    width: 100%;
    max-width: 100%;
    margin-bottom: 16px;
    transition: all 0.3s ease;
    opacity: 1;
    /* Allow content to flow naturally - no fixed height or overflow hidden */
}

/* Tablet: 5-6 columns */
@media (min-width: 480px) {
    .game-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
        padding: 12px;
    }
}

@media (min-width: 768px) {
    .game-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 10px;
        padding: 14px;
        border-radius: 16px;
    }
}

/* PC: 7-8 columns */
@media (min-width: 1024px) {
    .game-grid {
        grid-template-columns: repeat(8, 1fr);
        gap: 12px;
        padding: 16px;
    }
}


/* ===== Group Mode: Neon Casino Style Game Grid ===== */
body.group-mode .game-grid {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 4px solid #f1c40f;
    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(241, 196, 15, 0.5),
        0 0 40px rgba(241, 196, 15, 0.3);
    animation: neonGlow 2s ease-in-out infinite;
}

/* Neon border animation (Group Mode Only) */
@keyframes neonGlow {

    0%,
    100% {
        box-shadow:
            inset 0 0 30px rgba(0, 0, 0, 0.8),
            0 0 20px rgba(241, 196, 15, 0.8),
            0 0 40px rgba(241, 196, 15, 0.5),
            0 0 60px rgba(241, 196, 15, 0.3);
    }

    50% {
        box-shadow:
            inset 0 0 30px rgba(0, 0, 0, 0.8),
            0 0 10px rgba(241, 196, 15, 0.6),
            0 0 20px rgba(241, 196, 15, 0.4),
            0 0 30px rgba(241, 196, 15, 0.2);
    }
}

/* Center content area */
.center-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 50%;
    background: radial-gradient(circle, rgba(231, 76, 60, 0.15) 0%, rgba(192, 57, 43, 0.05) 100%);
    border: 2px dashed rgba(241, 196, 15, 0.5);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
    z-index: 1;
}

/* Smaller center content for double ring mode */
.center-content-small {
    width: 35%;
    height: 35%;
    gap: 4px;
}

.center-content-small .center-icon {
    font-size: 24px;
}

.center-content-small .center-text {
    font-size: 12px;
}

.center-content-small .rolling-text {
    font-size: 9px;
}

.center-icon {
    font-size: 32px;
    animation: bounce 1s ease-in-out infinite;
}

@keyframes bounce {

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

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

.center-text {
    font-size: 16px;
    font-weight: bold;
    color: #f1c40f;
    text-shadow:
        0 0 10px rgba(241, 196, 15, 0.8),
        0 0 20px rgba(241, 196, 15, 0.6),
        0 0 30px rgba(241, 196, 15, 0.4);
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {

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

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

.rolling-text {
    font-size: 11px;
    color: #ecf0f1;
    opacity: 0.8;
    text-align: center;
}

/* Tablet: Larger grid */
@media (min-width: 768px) {
    .game-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 10px;
        padding: 12px;
        border: 5px solid #f1c40f;
    }
}

/* PC: Even larger grid */
@media (min-width: 1024px) {
    .game-grid {
        grid-template-columns: repeat(8, 1fr);
        gap: 12px;
        padding: 14px;
        border: 6px solid #f1c40f;
    }
}

/* Card Updates for Mobile-First Grid */
.card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 2px solid #adb5bd;
    border-radius: 10px;
    padding: 6px 4px;
    height: auto;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.2s;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.card:hover {
    transform: scale(1.05);
    border-color: #667eea;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
}

.card:active {
    transform: scale(0.98);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.card .card-emoji {
    font-size: 24px;
    margin-bottom: 2px;
}

.card .card-label {
    font-size: 10px;
    font-weight: 600;
    color: #495057;
    line-height: 1.1;
    text-align: center;
    word-break: keep-all;
}

/* Promotional Badge for special items */
.promo-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
    color: #fff;
    font-size: 7px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(255, 107, 107, 0.4);
    z-index: 10;
    animation: promoPulse 2s ease-in-out infinite;
}

.card.has-promo {
    position: relative;
    overflow: visible;
}

@keyframes promoPulse {

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

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

/* ===== Group Mode: Casino Style Cards (瘋狂點擊風格) ===== */
body.group-mode .card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.1) 100%);
    border: 2px solid #34495e;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

body.group-mode .card:hover {
    border-color: #f39c12;
    box-shadow: 0 4px 10px rgba(243, 156, 18, 0.4);
}

body.group-mode .card .card-label {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

body.group-mode .card.selected {
    border-color: #e74c3c;
    background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
    box-shadow: 0 0 15px rgba(231, 76, 60, 0.8),
        0 0 30px rgba(231, 76, 60, 0.4);
    transform: scale(1.1);
    animation: selectedPulse 1.5s ease-in-out infinite;
}

body.group-mode .card.selected .card-label {
    color: #2c3e50;
    text-shadow: none;
}

/* Small phones: slightly smaller cards */
@media (max-width: 360px) {
    .card .card-emoji {
        font-size: 20px;
    }

    .card .card-label {
        font-size: 9px;
    }
}

/* Center cards are hidden */
.card.center-placeholder {
    opacity: 0;
    pointer-events: none;
    border: none;
    background: transparent;
    box-shadow: none;
}

/* Tablet: Medium cards */
@media (min-width: 768px) {
    .card {
        border: 3px solid #34495e;
        border-radius: 10px;
        padding: 6px 4px;
    }

    .card .card-emoji {
        font-size: 28px;
    }

    .card .card-label {
        font-size: 11px;
        line-height: 1.1;
    }
}

/* PC: Larger cards */
@media (min-width: 1024px) {
    .card {
        border-radius: 12px;
        padding: 8px 4px;
    }

    .card .card-emoji {
        font-size: 32px;
        margin-bottom: 4px;
    }

    .card .card-label {
        font-size: 12px;
    }
}

/* Selected State (Light up with glowing effect) */
.card.selected {
    border-color: #e74c3c;
    background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
    box-shadow: 0 0 15px rgba(231, 76, 60, 0.8),
        0 0 30px rgba(231, 76, 60, 0.4);
    transform: scale(1.1);
    animation: selectedPulse 1.5s ease-in-out infinite;
    z-index: 2;
}

/* Card Vote Count (Group Mode) */
.card-vote-count {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(231, 76, 60, 0.9);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.card-vote-count .vote-icon {
    font-size: 10px;
}

.card.voted .card-vote-count {
    background: rgba(46, 213, 115, 0.9);
}

@keyframes selectedPulse {
    0% {
        box-shadow:
            0 0 20px rgba(231, 76, 60, 0.8),
            0 0 40px rgba(231, 76, 60, 0.6),
            0 4px 8px rgba(0, 0, 0, 0.3);
    }

    100% {
        box-shadow:
            0 0 30px rgba(231, 76, 60, 1),
            0 0 60px rgba(231, 76, 60, 0.8),
            0 4px 8px rgba(0, 0, 0, 0.3);
    }
}

/* Footer Updates */
.content-area {
    /* Ensure enough space for the fixed footer */
    padding-bottom: 200px;
    /* Reduced for mobile */
    flex: 1;
    width: 100%;
    overflow-y: auto;
    /* Enable scrolling */
    -webkit-overflow-scrolling: touch;
    /* Smooth scrolling on iOS */
}

/* Mobile: Adjust content area padding */
@media (max-width: 480px) {
    .content-area {
        padding-bottom: 180px;
        padding-left: 8px;
        padding-right: 8px;
    }
}

.action-footer {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    background-color: rgba(255, 255, 255, 0.95);
    /* Slightly transparent */
    backdrop-filter: blur(10px);
    padding: 10px 12px 16px;
    /* Reduced padding */
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Reduced gap */
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    z-index: 200;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.footer-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    /* Fix alignment issues */
    /* Reduced gap */
    width: 100%;
    margin-bottom: 0;
}

.footer-controls .category-filter-toggle {
    flex: 1;
    width: auto;
    margin-bottom: 0;
}

/* Share Button */
.share-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border: 2px solid #27ae60;
    border-radius: 12px;
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
    transition: all 0.3s ease;
    height: 40px;
}

.share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(46, 204, 113, 0.4);
}

.share-btn:active {
    transform: scale(0.98);
}

/* Copy Link Button (icon only) */
.copy-link-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 2px solid #3498db;
    border-radius: 12px;
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.copy-link-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4);
}

.copy-link-btn:active {
    transform: scale(0.95);
}

.footer-back-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    background: #ffffff;
    color: #555;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    height: 40px;
    /* Explicit smaller height */
}

.footer-back-btn:hover {
    background: #ffffff;
    border-color: #b2bec3;
    color: #2d3436;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* Group Mode Override for Back Button (Neon Style) */
body.group-mode .footer-back-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

body.group-mode .footer-back-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #fff;
    color: #fff;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.footer-back-btn:active {
    transform: translateY(0);
}

@media (min-width: 768px) {
    .action-footer {
        max-width: 1200px;
        padding: 16px 24px 24px;
    }
}

.category-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    max-height: none;
    overflow: visible;
}

.toggle-btn {
    padding: 8px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 20px;
    background-color: #ffffff;
    color: #666;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    white-space: nowrap;
}

.toggle-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
    border-color: #ccc;
}

.toggle-btn.active {
    background: linear-gradient(135deg, #FF6B6B 0%, #FF5252 100%);
    color: #fff;
    border-color: #FF5252;
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
    transform: translateY(-1px);
}

/* Select All Button - Special Style */
#select-all-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border-color: #667eea;
    font-weight: 600;
}

#select-all-btn.active {
    background: linear-gradient(135deg, #764ba2, #667eea);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.5);
}

.main-action {
    width: 100%;
    margin-bottom: 4px;
    /* Reduced margin */
}

.button-group {
    display: flex;
    gap: 8px;
    /* Slightly increased gap for visual separation */
    flex-direction: row;
    width: 100%;
}

.btn-large {
    flex: 1;
    padding: 10px 12px;
    /* Reduced padding */
    font-size: 15px;
    /* Reduced font size */
    border-radius: 12px;
    font-weight: 600;
    border: none;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Added gap for icon/text */
}

.btn-large:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}

#btn-random {
    background: linear-gradient(135deg, #FF6B6B, #FF4757);
    box-shadow: 0 4px 0 #c0392b;
}

#btn-random:hover {
    background: linear-gradient(135deg, #ff7979, #ff5565);
}

/* #btn-direct-search {
    background: linear-gradient(135deg, #3498db, #2980b9);
    box-shadow: 0 4px 0 #1c5a85;
    flex-direction: column;
    line-height: 1.1;
    padding: 8px 12px;
} */

.footer-controls {
    display: flex;
    gap: 12px;
    width: 100%;
    margin-bottom: 0;
}

.footer-controls .category-filter-toggle {
    flex: 1;
    width: auto;
    margin-bottom: 0;
}

.footer-back-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 20px;
    /* Match category-filter-toggle padding */
    border: none;
    border-radius: 16px;
    /* Match category-filter-toggle radius */
    background: #f1f2f6;
    /* Secondary style */
    color: #2c3e50;
    font-size: 15px;
    /* Match category-filter-toggle font size */
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    /* Subtle shadow */
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.footer-back-btn:hover {
    background: #dfe6e9;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.footer-back-btn:active {
    transform: translateY(0);
}

@media (min-width: 768px) {
    .action-footer {
        max-width: 1200px;
        padding: 16px 24px 24px;
    }
}

/* Wide Screen RWD - Group buttons at bottom-right */
@media (min-width: 1024px) {
    .action-footer {
        position: fixed;
        bottom: 20px;
        right: 20px;
        left: auto;
        width: auto;
        max-width: none;
        padding: 12px;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        z-index: 100;
    }

    .action-footer .main-action {
        width: auto;
        margin-bottom: 0;
    }

    .action-footer .button-group {
        width: auto;
        flex-wrap: nowrap;
    }

    .action-footer .btn-large {
        flex: none;
        padding: 10px 16px;
        font-size: 14px;
        white-space: nowrap;
    }

    .action-footer .footer-controls {
        width: auto;
        margin-bottom: 0;
    }

    .action-footer .footer-back-btn {
        flex: none;
        padding: 10px 16px;
    }

    .action-footer .category-filter-toggle {
        flex: none;
        padding: 10px 16px;
    }

    .action-footer .social-proof {
        display: none;
    }
}

.category-toggles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 12px;
    justify-content: center;
    max-height: none;
    overflow: visible;
}

.toggle-btn {
    padding: 10px 18px;
    border: 2px solid #e0e0e0;
    border-radius: 24px;
    background-color: #ffffff;
    color: #666;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    white-space: nowrap;
}

.toggle-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
    border-color: #ccc;
}

.toggle-btn.active {
    background: linear-gradient(135deg, #FF6B6B 0%, #FF5252 100%);
    color: #fff;
    border-color: #FF5252;
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
    transform: translateY(-1px);
}

/* Select All Button - Special Style */
#select-all-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border-color: #667eea;
    font-weight: 600;
}

#select-all-btn.active {
    background: linear-gradient(135deg, #764ba2, #667eea);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.5);
}

.main-action {
    width: 100%;
    margin-bottom: 8px;
}

.button-group {
    display: flex;
    gap: 6px;
    flex-direction: row;
    width: 100%;
}

.btn-large {
    flex: 1;
    padding: 16px 12px;
    font-size: 16px;
    border-radius: 12px;
    font-weight: 600;
    border: none;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
}

.btn-large:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}

#btn-random {
    background: linear-gradient(135deg, #FF6B6B, #FF4757);
    box-shadow: 0 4px 0 #c0392b;
}

#btn-random:hover {
    background: linear-gradient(135deg, #ff7979, #ff5565);
}

/* #btn-direct-search {
    background: linear-gradient(135deg, #3498db, #2980b9);
    box-shadow: 0 4px 0 #1c5a85;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    padding: 8px 12px;
} */

.btn-main-text {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-helper-text {
    font-size: 11px;
    font-weight: normal;
    opacity: 0.9;
    margin-top: 2px;
}

/* #btn-direct-search:hover {
    background: linear-gradient(135deg, #5dade2, #3498db);
} */

.btn-large:active {
    transform: translateY(4px);
    box-shadow: none;
}

.social-proof {
    font-size: 11px;
    text-align: center;
    color: #aaa;
    background: none;
    padding: 0;
}

/* Header Button */
.header-btn {
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 16px;
}

/* Jump Animation */
@keyframes jump {

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

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

/* Waiting Overlay */
.waiting-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.waiting-overlay.hidden {
    display: none !important;
}

.waiting-content {
    text-align: center;
    color: white;
}

.waiting-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    margin: 0 auto 20px;
}

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

/* 遊戲規則卡片樣式 */
.waiting-game-rules {
    margin: 20px 0;
    max-width: 320px;
}

.game-rules-card {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.15));
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    animation: rulesCardPop 0.5s ease-out;
}

.game-rules-card.hidden {
    display: none;
}

.rules-icon {
    font-size: 48px;
    margin-bottom: 12px;
    animation: iconBounce 2s ease-in-out infinite;
}

@keyframes iconBounce {

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

    50% {
        transform: translateY(-8px) scale(1.1);
    }
}

.rules-title {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 16px 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.rules-steps {
    text-align: left;
    margin-bottom: 16px;
}

.rule-step {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

.step-num {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

.rules-tip {
    background: rgba(255, 193, 7, 0.2);
    border: 1px solid rgba(255, 193, 7, 0.4);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: #ffc107;
    font-weight: 500;
}

@keyframes rulesCardPop {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    50% {
        transform: scale(1.05);
    }

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

/* Mobile Optimization for Waiting Overlay */
@media (max-height: 700px) {
    .waiting-content {
        padding: 10px 20px;
        overflow-y: auto;
        max-height: 100vh;
        -webkit-overflow-scrolling: touch;
    }

    .waiting-spinner {
        width: 40px;
        height: 40px;
        margin-bottom: 10px;
    }

    .waiting-game-rules {
        margin: 10px 0;
        max-width: 280px;
    }

    .game-rules-card {
        padding: 14px;
    }

    .rules-icon {
        font-size: 32px;
        margin-bottom: 8px;
    }

    .rules-title {
        font-size: 15px;
        margin: 0 0 10px 0;
    }

    .rule-step {
        font-size: 12px;
        margin-bottom: 6px;
        gap: 8px;
    }

    .step-num {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }

    .rules-tip {
        padding: 8px 10px;
        font-size: 11px;
    }

    .waiting-title {
        font-size: 18px;
        margin-top: 10px;
    }

    .waiting-subtitle {
        font-size: 12px;
    }

    .player-count-display {
        margin: 8px 0;
    }

    .player-count-number {
        font-size: 32px;
    }

    .nickname-display {
        margin-bottom: 5px;
    }

    .battle-warning {
        font-size: 12px;
        margin: 5px 0;
    }

    .leave-room-btn {
        margin-top: 10px;
        padding: 10px 20px;
        font-size: 14px;
    }
}

/* Game Start Modal */
.start-modal-content {
    text-align: center;
    padding: 30px !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 24px;
}

.start-header h3 {
    color: #2d3436;
    margin-bottom: 20px;
    font-size: 24px;
}

.start-settings {
    margin-bottom: 30px;
    padding: 15px;
    background: #f1f2f6;
    border-radius: 12px;
}

.setting-item {
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #2d3436;
}

.start-countdown {
    width: 150px !important;
    height: 150px !important;
    margin: 20px auto !important;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 12px 40px rgba(15, 52, 96, 0.6),
        0 0 0 6px rgba(102, 126, 234, 0.3),
        inset 0 0 30px rgba(102, 126, 234, 0.2) !important;
}

#start-countdown-number {
    font-size: 80px !important;
    font-weight: 900 !important;
    color: #FFD700 !important;
    text-shadow: 0 0 10px #FFD700, 0 0 20px #FFA500, 0 0 30px #FFA500, 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
    animation: pulse 1s infinite;
}

.start-footer {
    color: #636e72;
    font-size: 16px;
    font-weight: 500;
}

#btn-random {
    animation: jump 0.5s ease-in-out 6;
    /* 0.5s * 6 = 3s */
}

/* Ensure animation doesn't conflict with hover transform if needed, 
   but keyframes usually override unless !important or specific. 
   Actually, transform in keyframes will override the hover transform during animation.
   After animation ends, it returns to normal state.
*/

/* Dialog Overlay Styles (Join Room Dialog) */
.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: fadeIn 0.2s ease-out;
}

.dialog-overlay.hidden {
    display: none !important;
}

.dialog-box {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 24px;
    padding: 32px;
    max-width: 380px;
    width: 90%;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dialog-box h2 {
    font-size: 24px;
    font-weight: 700;
    color: #2c3e50;
    text-align: center;
    margin-bottom: 24px;
}

.room-code-input {
    width: 100%;
    padding: 16px;
    font-size: 24px;
    text-align: center;
    letter-spacing: 8px;
    border: 3px solid #e0e0e0;
    border-radius: 16px;
    background: #f8f9fa;
    color: #2c3e50;
    font-weight: 700;
    transition: all 0.3s;
}

.room-code-input:focus {
    outline: none;
    border-color: #667eea;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
}

.room-code-input::placeholder {
    letter-spacing: 2px;
    font-size: 16px;
    color: #adb5bd;
}

.dialog-buttons {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.dialog-btn {
    flex: 1;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.dialog-btn.btn-cancel {
    background: #ffffff;
    border: 2px solid #e0e0e0;
    color: #6c757d;
}

.dialog-btn.btn-cancel:hover {
    background: #f8f9fa;
    border-color: #b2bec3;
    transform: translateY(-2px);
}

.dialog-btn.btn-confirm {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.dialog-btn.btn-confirm:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.modal.hidden {
    display: none !important;
}

.modal-content {
    background-color: #fff;
    width: 90%;
    max-width: 400px;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.3s ease;
}

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

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

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

.modal-header h3 {
    font-size: 20px;
    color: var(--text-color);
}

.close-btn {
    background: none;
    border: none;
    font-size: 28px;
    color: #999;
    cursor: pointer;
}

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

.input-group input {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border: 2px solid #eee;
    border-radius: 12px;
    text-align: center;
    letter-spacing: 2px;
}

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

.modal-actions {
    display: flex;
    gap: 12px;
}

.room-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.room-badge,
.status-badge {
    background-color: #f0f2f5;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    color: #555;
}

.status-badge {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.instruction {
    text-align: center;
    color: #777;
    margin-bottom: 20px;
}

.vote-stats {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.stat-item {
    text-align: center;
}

.stat-label {
    display: block;
    font-size: 12px;
    color: #999;
}

.stat-value {
    font-size: 24px;
    font-weight: bold;
    color: var(--primary-color);
}

/* Vote Badge on Cards */
.vote-badge {
    position: absolute;
    top: 8px;
    background-color: var(--primary-color);
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transform: scale(0);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.vote-badge.show {
    transform: scale(1);
}

/* Leader Settings Styles */
.settings-panel {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.setting-section {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e8e8e8;
    transition: all 0.3s ease;
}

.setting-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.slider-container {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #555;
}

.slider-value {
    font-size: 24px;
    font-weight: bold;
    color: var(--primary-color);
    min-width: 40px;
    text-align: center;
}

#btn-confirm-settings {
    width: 100%;
    margin-top: 24px;
    padding: 18px 24px;
    font-size: 18px;
    font-weight: 700;
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    border: none;
    color: #fff;
    border-radius: 16px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#btn-confirm-settings:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(46, 204, 113, 0.5);
    background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
}

#btn-confirm-settings:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4);
}

#btn-confirm-settings:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Subtitle Text */
.subtitle-text {
    font-size: 14px;
    color: #7f8c8d;
    font-weight: normal;
    margin-left: 8px;
    vertical-align: middle;
}

@media (max-width: 480px) {
    .subtitle-text {
        display: block;
        margin-left: 0;
        margin-top: 4px;
        font-size: 12px;
    }

    /* Compact Game Type Selection for Mobile */
    #game-type-selection .mode-container {
        padding: 16px 20px;
        max-width: 100%;
        border-radius: 20px;
    }

    #game-type-selection .mode-title {
        font-size: 24px;
        margin-bottom: 4px;
    }

    #game-type-selection .mode-subtitle {
        font-size: 14px;
        margin-bottom: 16px;
    }

    #game-type-selection .setting-section {
        padding: 12px;
        margin-bottom: 12px;
    }

    #game-type-selection .setting-title {
        font-size: 14px;
        margin-bottom: 8px;
    }

    #game-type-selection .slider-container {
        font-size: 12px;
    }

    #game-type-selection .slider-value {
        font-size: 20px;
    }

    #game-type-selection .price-btn {
        padding: 8px 4px;
        font-size: 12px;
        min-width: unset;
        flex: 1;
    }

    /* Large action buttons (Game Footer) */
    .action-btn.btn-large {
        width: 100%;
        min-height: 44px;
        /* Reduced further */
        padding: 6px 16px;
        font-size: 15px;
        display: flex;
        flex-direction: row;
        /* Default row */
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    /* Specific override for search buttons to stack text */
    #btn-direct-search,
    #btn-pachinko-search {
        flex-direction: column;
        line-height: 1.2;
        padding: 4px 10px;
    }

    .action-btn.btn-large i {
        font-size: 18px;
        margin-bottom: 0;
    }

    .btn-main-text {
        font-size: 15px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .btn-helper-text {
        font-size: 11px;
        opacity: 0.9;
        font-weight: normal;
        margin-top: 0;
        margin-left: 0;
        /* reset margin */
    }

    #game-type-selection .mode-options {
        flex-direction: row;
        gap: 10px;
    }

    #game-type-selection .mode-btn {
        padding: 16px 8px;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #game-type-selection .mode-icon {
        font-size: 32px;
        margin-bottom: 8px;
    }

    #game-type-selection .mode-name {
        font-size: 16px;
        margin-bottom: 4px;
    }

    #game-type-selection .mode-desc {
        font-size: 11px;
        line-height: 1.2;
    }
}

/* ===== Mode Selection Screen Styles ===== */

/* Animated gradient background */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

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

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

.mode-selection-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.mode-container {
    width: 100%;
    max-width: 440px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: 32px 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 0.6s ease-out;
    position: relative;
    max-height: 95dvh;
    /* Prevent header/footer clipping on smaller/shorter screens */
    overflow-y: auto;
    /* Allow internal scroll only if absolutely necessary */
    -webkit-overflow-scrolling: touch;
    /* Smooth scroll on iOS */
}

/* Extra tight for very short screens */
@media (max-height: 667px) {
    .mode-container {
        padding: 16px 20px;
    }
}

/* Leader Settings - Compact mode for mobile */
#leader-settings .mode-container {
    padding: 16px 16px 20px;
    max-height: 90vh;
    overflow-y: auto;
}

/* Compact settings panel */
.settings-panel.compact-settings {
    margin-bottom: 10px !important;
}

.setting-section.compact-section {
    padding: 10px 14px;
    margin-bottom: 8px;
}

.setting-section.compact-section:last-child {
    margin-bottom: 0;
}

/* Compact mode options */
.mode-options.compact-mode-options {
    margin-bottom: 0;
}

/* Language Switcher */
.language-switcher {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 4px;
    background: rgba(0, 0, 0, 0.05);
    padding: 4px;
    border-radius: 20px;
    z-index: 10;
}

.lang-btn {
    border: none;
    background: transparent;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 700;
    color: #888;
    cursor: pointer;
    transition: all 0.2s;
}

.lang-btn.active {
    background: #fff;
    color: #667eea;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.lang-btn:hover:not(.active) {
    color: #667eea;
    background: rgba(255, 255, 255, 0.5);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

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

/* Settings Footer */
.settings-footer {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.secondary-btn {
    background-color: #ffffff;
    color: #2c3e50;
    border: 2px solid #e0e0e0;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.secondary-btn:hover {
    background-color: #f8f9fa;
    border-color: #b2bec3;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

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

/* App Logo on Home Screen */
.app-logo-wrapper {
    text-align: center;
    margin-bottom: 20px;
}

.app-logo {
    width: 120px;
    height: 120px;
    border-radius: 28px;
    box-shadow: 0 12px 40px rgba(255, 107, 107, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.15);
    animation: logoFloat 3s ease-in-out infinite;
}

@keyframes logoFloat {

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

    50% {
        transform: translateY(-8px);
    }
}

/* Welcome Tagline */
.welcome-tagline {
    font-size: 18px;
    text-align: center;
    color: #e74c3c;
    margin-bottom: 24px;
    font-weight: 600;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Game Intro Section */
.game-intro {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.intro-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.9);
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 13px;
    color: #555;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s;
}

.intro-item:hover {
    transform: translateY(-2px);
}

.intro-icon {
    font-size: 16px;
}

/* Home Footer */
.home-footer {
    text-align: center;
    font-size: 12px;
    color: #aaa;
    margin-top: 32px;
    letter-spacing: 0.5px;
}

.mode-title {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    color: #2c3e50;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mode-subtitle {
    font-size: 16px;
    text-align: center;
    color: #7f8c8d;
    margin-bottom: 24px;
    font-weight: 500;
}

/* Quick Start CTA Button */
.quick-start-btn {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    line-height: normal;
    width: 100%;
    max-width: 280px;
    margin: 0 auto 30px auto;
    padding: 12px 32px;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 50%, #ff6b6b 100%);
    background-size: 200% 200%;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
    transition: all 0.3s ease;
    animation: quickStartPulse 2s ease-in-out infinite, gradientShift 3s ease infinite;
}

.quick-start-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 30px rgba(255, 107, 107, 0.5);
}

.quick-start-btn:active {
    transform: scale(0.98);
}

.quick-start-btn .btn-sub-text {
    font-size: 16px;
    font-weight: 500;
    opacity: 0.9;
    margin-top: 0;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

@keyframes quickStartPulse {

    0%,
    100% {
        box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
    }

    50% {
        box-shadow: 0 8px 30px rgba(255, 107, 107, 0.6);
    }
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

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

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

/* Revised Mode Options: Grid for Side-by-Side */
.mode-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 10px;
}

.mode-btn {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 2px solid #e0e0e0;
    border-radius: 16px;
    padding: 24px 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.mode-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.mode-btn:hover::before {
    left: 100%;
}

/* Feedback Button - Floating style */
.feedback-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #4a5568 !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 30px;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 9999;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.feedback-btn:hover {
    transform: translateY(-4px) scale(1.05);
    background: #fff;
    box-shadow: 0 12px 40px rgba(31, 38, 135, 0.25);
    color: #2d3748 !important;
}

.feedback-btn i {
    font-size: 18px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mode-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.mode-btn:active {
    transform: translateY(-1px);
}

.mode-btn-personal {
    border-color: #3498db;
}

.mode-btn-personal:hover {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    border-color: #2980b9;
}

.mode-btn-personal:hover .mode-icon,
.mode-btn-personal:hover .mode-name,
.mode-btn-personal:hover .mode-desc {
    color: #ffffff;
}

.mode-btn-group {
    border-color: #9b59b6;
}

.mode-btn-group:hover {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    border-color: #8e44ad;
}

.mode-btn-group:hover .mode-icon,
.mode-btn-group:hover .mode-name,
.mode-btn-group:hover .mode-desc {
    color: #ffffff;
}

.mode-btn-leader {
    border-color: #f39c12;
}

.mode-btn-leader:hover {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    border-color: #e67e22;
}

.mode-btn-leader:hover .mode-icon,
.mode-btn-leader:hover .mode-name,
.mode-btn-leader:hover .mode-desc {
    color: #ffffff;
}

.mode-btn-member {
    border-color: #1abc9c;
}

.mode-btn-member:hover {
    background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%);
    border-color: #16a085;
}

.mode-btn-member:hover .mode-icon,
.mode-btn-member:hover .mode-name,
.mode-btn-member:hover .mode-desc {
    color: #ffffff;
}

/* Personal Mode Label - Red Title */
.personal-mode-label {
    color: #e74c3c;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 4px;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(231, 76, 60, 0.2);
}

/* Team Mode Label - Orange Title */
.team-mode-label {
    color: #f39c12;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 4px;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(243, 156, 18, 0.2);
}

/* Game Mode Button Active State */
.mode-btn.mode-btn-game.active {
    border-color: #667eea;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
    transform: translateY(-2px);
}

/* Compact mode-btn-game for leader-settings */
#leader-settings .mode-options {
    flex-direction: row;
    gap: 12px;
}

#leader-settings .mode-btn-game {
    padding: 16px 12px;
    flex: 1;
    min-height: auto;
}

#leader-settings .mode-btn-game .mode-icon {
    font-size: 32px;
    margin-bottom: 6px;
}

#leader-settings .mode-btn-game .mode-name {
    font-size: 16px;
    margin-bottom: 4px;
}

#leader-settings .mode-btn-game .mode-desc {
    font-size: 12px;
}

.mode-icon {
    font-size: 48px;
    text-align: center;
    margin-bottom: 12px;
    transition: all 0.3s;
}

.mode-name {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    color: #2c3e50;
    margin-bottom: 8px;
    transition: all 0.3s;
}

.mode-desc {
    font-size: 14px;
    text-align: center;
    color: #7f8c8d;
    transition: all 0.3s;
}

.back-btn {
    background: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 10px 18px;
    font-size: 15px;
    font-weight: 700;
    color: #555;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
}

.back-btn:hover {
    background: #ffffff;
    border-color: #b2bec3;
    color: #2d3436;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* Tablet responsive styles */
@media (min-width: 768px) {
    .mode-container {
        max-width: 600px;
        padding: 48px 40px;
    }

    .mode-title {
        font-size: 40px;
    }

    .mode-subtitle {
        font-size: 18px;
        margin-bottom: 40px;
    }

    .mode-options {
        flex-direction: row;
        gap: 20px;
    }

    .mode-btn {
        flex: 1;
        padding: 32px 24px;
    }

    .mode-icon {
        font-size: 64px;
        margin-bottom: 16px;
    }

    .mode-name {
        font-size: 22px;
        margin-bottom: 10px;
    }

    .mode-desc {
        font-size: 15px;
    }
}

/* PC responsive styles */
@media (min-width: 1024px) {
    .mode-container {
        max-width: 800px;
        padding: 56px 48px;
    }

    .mode-title {
        font-size: 48px;
        margin-bottom: 12px;
    }

    .mode-subtitle {
        font-size: 20px;
        margin-bottom: 48px;
    }

    .mode-options {
        gap: 24px;
    }

    .mode-btn {
        padding: 40px 28px;
    }

    .mode-icon {
        font-size: 72px;
        margin-bottom: 20px;
    }

    .mode-name {
        font-size: 24px;
        margin-bottom: 12px;
    }

    .mode-desc {
        font-size: 16px;
    }

    .back-btn {
        padding: 10px 20px;
        font-size: 15px;
    }
}

/* ===== Group Info Bar Styles ===== */
.group-info-bar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 12px 16px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

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

.room-label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 500;
}

.room-code {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    font-family: 'Courier New', monospace;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.copy-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
}

.copy-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

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

.online-count {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.online-count i {
    font-size: 16px;
}

/* ===== Game Mode Selector Styles ===== */
.game-mode-selector {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 20px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 12px;
}

.game-mode-btn {
    flex: 1;
    max-width: 180px;
    padding: 12px 20px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    background: #ffffff;
    color: #666;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.game-mode-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.game-mode-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* ===== Pachinko Game Styles ===== */
/* Personal Mode: Clean Simple Style */
.pachinko-container {
    background: linear-gradient(180deg, #3a506b 0%, #2c3e50 100%);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    border: 3px solid #495057;
    position: relative;
}

/* Group Mode: Neon Casino Style */
body.group-mode .pachinko-container {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(241, 196, 15, 0.5);
    border: 4px solid #f1c40f;
}

/* Ball Count Selector */
.ball-count-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(241, 196, 15, 0.3);
}

.ball-count-label {
    color: #f1c40f;
    font-size: 14px;
    font-weight: 600;
}

.ball-count-buttons {
    display: flex;
    gap: 6px;
}

.ball-count-btn {
    width: 36px;
    height: 36px;
    border: 2px solid rgba(241, 196, 15, 0.5);
    border-radius: 50%;
    background: rgba(26, 26, 46, 0.8);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ball-count-btn:hover {
    background: rgba(241, 196, 15, 0.2);
    border-color: #f1c40f;
    transform: scale(1.1);
}

.ball-count-btn.active {
    background: linear-gradient(135deg, #f1c40f 0%, #e67e22 100%);
    border-color: #f39c12;
    color: #1a1a2e;
    box-shadow: 0 0 12px rgba(241, 196, 15, 0.6);
}


/* Pachinko Ball Selector (In-Game) */
.ball-count-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ball-count-btn {
    width: 32px;
    height: 32px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ball-count-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #fff;
    transform: scale(1.1);
}

.ball-count-btn.active {
    background: #f1c40f;
    border-color: #f1c40f;
    color: #2c3e50;
    box-shadow: 0 0 10px rgba(241, 196, 15, 0.5);
    transform: scale(1.1);
}

/* Modal Ball Selector REMOVED */




/* Modal Duration Selector Styles */
.modal-duration-selector {
    background: #ffffff;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #e2e8f0;
    width: 100%;
}

.modal-duration-selector.hidden {
    display: none !important;
}

.modal-duration-selector .duration-label {
    color: #4a5568;
    font-size: 15px;
    font-weight: 700;
}

.modal-duration-selector .duration-buttons {
    display: flex;
    gap: 8px;
}

.modal-duration-selector .duration-btn {
    padding: 10px 16px;
    border: 2px solid #667eea;
    border-radius: 10px;
    background: #fff;
    color: #667eea;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-duration-selector .duration-btn:hover {
    background: #f8f9ff;
    transform: translateY(-2px);
}

.modal-duration-selector .duration-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-color: #667eea;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.4);
    transform: scale(1.05);
}

/* Modal Group Start Button */
.modal-group-start {
    padding: 16px 20px;
    background: #f8f9fa;
    border-top: 1px solid #e2e8f0;
}

.modal-group-start.hidden {
    display: none !important;
}

.modal-group-start .group-start-btn {
    width: 100%;
}

#pachinko-canvas {
    width: 100%;
    height: 500px;
    background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
    border-radius: 12px;
    border: 2px solid #34495e;
    display: block;
    margin-bottom: 12px;
}

.pachinko-slots {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    margin-bottom: 12px;
    position: relative;
    z-index: 10;
    width: 100%;
    overflow: hidden;
    /* Hide overflow to ensure it fits exactly */
    padding: 4px 0;
}

/* Personal Mode: Simple slot style */
.pachinko-slot {
    flex: 1;
    min-width: 0;
    /* Allow shrinking below content size */
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #6c757d;
    border-radius: 6px;
    padding: 4px 2px;
    text-align: center;
    color: #343a40;
    font-size: 10px;
    font-weight: 600;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: all 0.3s;
    position: relative;
    overflow: visible;
    /* Allow badge to pop out */
    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards;
}

/* Group Mode: Gold border style */
body.group-mode .pachinko-slot {
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid #f39c12;
    color: #fff;
}

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

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

.slot-hit-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #e74c3c;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    border: 2px solid #fff;
    z-index: 20;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.pachinko-slot-icon {
    font-size: 18px;
}

.pachinko-slot-label {
    font-size: 10px;
    line-height: 1.2;
}

.pachinko-slot.active,
.pachinko-slot.selected {
    background: rgba(231, 76, 60, 0.4);
    border-color: #e74c3c;
    box-shadow:
        0 0 20px rgba(231, 76, 60, 0.8),
        inset 0 0 20px rgba(231, 76, 60, 0.4);
}

.pachinko-slot.active {
    animation: slotGlow 0.5s ease-in-out;
}

.pachinko-slot:hover {
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

@keyframes slotGlow {

    0%,
    100% {
        box-shadow:
            0 0 20px rgba(231, 76, 60, 0.8),
            inset 0 0 20px rgba(231, 76, 60, 0.4);
    }

    50% {
        box-shadow:
            0 0 40px rgba(231, 76, 60, 1),
            inset 0 0 30px rgba(231, 76, 60, 0.6);
    }
}

@keyframes hitAnimation {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(231, 76, 60, 0.8);
    }

    50% {
        transform: scale(1.15);
        box-shadow: 0 0 40px rgba(231, 76, 60, 1),
            0 0 60px rgba(241, 196, 15, 0.8);
    }
}

.pachinko-slot.hit-animation {
    animation: hitAnimation 0.6s ease-in-out 3;
    background: rgba(241, 196, 15, 0.4);
    border-color: #f1c40f;
}

.pachinko-slot.winner {
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.6) 0%, rgba(230, 126, 34, 0.6) 100%);
    border-color: #f1c40f;
    box-shadow: 0 0 20px rgba(241, 196, 15, 0.8), inset 0 0 20px rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
    z-index: 5;
    animation: winnerPulse 1.5s infinite;
}

@keyframes winnerPulse {
    0% {
        transform: scale(1.05);
        box-shadow: 0 0 20px rgba(241, 196, 15, 0.8);
    }

    50% {
        transform: scale(1.1);
        box-shadow: 0 0 40px rgba(241, 196, 15, 1);
    }

    100% {
        transform: scale(1.05);
        box-shadow: 0 0 20px rgba(241, 196, 15, 0.8);
    }
}

/* History Styles */
.pachinko-history {
    display: flex;
    gap: 6px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    margin-bottom: 12px;
    overflow-x: auto;
    max-width: 100%;
    min-height: 50px;
}

/* History styles removed */

/* Pachinko Buttons Container */
.pachinko-buttons {
    display: flex;
    gap: 12px;
    width: 100%;
}

.pachinko-buttons .drop-ball-btn {
    flex: 1;
}

.pachinko-search-btn {
    flex: 1;
    padding: 12px 16px;
    background: linear-gradient(135deg, #4fa3d7 0%, #3b8dc5 100%);
    border: none;
    border-radius: 50px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 6px 0 #2980b9, 0 10px 20px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: relative;
    overflow: hidden;
}

.pachinko-search-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
    transform: rotate(45deg);
    pointer-events: none;
}

.pachinko-search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 #2980b9, 0 15px 25px rgba(0, 0, 0, 0.3);
    filter: brightness(1.1);
}

.pachinko-search-btn:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #2980b9, 0 5px 10px rgba(0, 0, 0, 0.2);
}

.pachinko-search-btn .btn-main-text {
    font-size: 18px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pachinko-search-btn .btn-helper-text {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.9;
}

/* Mobile responsive for pachinko buttons */
@media (max-width: 480px) {
    .pachinko-buttons {
        flex-direction: column;
        gap: 8px;
    }

    .pachinko-search-btn .btn-main-text {
        font-size: 16px;
    }

    .pachinko-search-btn .btn-helper-text {
        font-size: 10px;
    }
}

.drop-ball-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #ff9966 0%, #ff5e62 100%);
    /* Orange-Red Gradient */
    border: none;
    border-radius: 50px;
    /* Pill shape */
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    animation: jump 0.5s ease-in-out 6;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 6px 0 #d35400, 0 10px 20px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

.drop-ball-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
    transform: rotate(45deg);
    pointer-events: none;
}

.drop-ball-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 #d35400, 0 15px 25px rgba(0, 0, 0, 0.3);
    filter: brightness(1.1);
}

.drop-ball-btn:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #d35400, 0 5px 10px rgba(0, 0, 0, 0.2);
}

.drop-ball-btn:disabled {
    background: #95a5a6;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    filter: grayscale(1);
}

.drop-ball-btn i {
    font-size: 24px;
    animation: none;
    /* Removed bounce to look cleaner */
}

@keyframes ballBounce {

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

    50% {
        transform: translateY(-4px);
    }
}

/* Responsive adjustments for Pachinko */
@media (min-width: 768px) {
    #pachinko-canvas {
        height: 600px;
    }

    .pachinko-slot {
        min-height: 60px;
        padding: 10px 6px;
    }

    .pachinko-slot-icon {
        font-size: 22px;
    }

    .pachinko-slot-label {
        font-size: 11px;
    }
}

@media (min-width: 1024px) {
    #pachinko-canvas {
        height: 700px;
    }

    .pachinko-slot {
        min-height: 70px;
        padding: 12px 8px;
    }

    .pachinko-slot-icon {
        font-size: 26px;
    }

    .pachinko-slot-label {
        font-size: 12px;
    }
}

/* ===== Group Mode Controls ===== */
.group-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.mode-toggle-container {
    display: flex;
    background: #f0f2f5;
    padding: 4px;
    border-radius: 12px;
    gap: 4px;
}

.mode-toggle-btn {
    padding: 8px 16px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: #666;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mode-toggle-btn.active {
    background: #fff;
    color: #667eea;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.battle-timer {
    font-size: 48px;
    font-weight: 800;
    color: #ff4757;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
    animation: pulse 1s infinite;
}

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

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.group-actions {
    display: flex;
    gap: 12px;
    width: 100%;
    justify-content: center;
}

.action-btn {
    flex: 1;
    max-width: 200px;
    padding: 12px;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.primary-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.primary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

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

/* ===== Group Mode Specifics ===== */
/* In group mode, show footer but hide personal buttons */
body.group-mode .action-footer .main-action {
    display: none !important;
}

/* Ensure filter toggle is visible in group mode so users can open settings */
body.group-mode .action-footer .category-filter-toggle {
    display: flex !important;
    background: linear-gradient(135deg, #f1c40f 0%, #f39c12 100%);
    border: 2px solid #e67e22;
    color: #1a1a2e;
    box-shadow: 0 4px 15px rgba(241, 196, 15, 0.4);
    width: 100%;
    justify-content: center;
    padding: 12px;
    border-radius: 12px;
    margin-top: 0;
}

body.group-mode .action-footer .category-filter-toggle i {
    color: #1a1a2e;
}

body.group-mode .action-footer .social-proof {
    display: none !important;
}

/* Group Mode Header Styling - Casino Style */
body.group-mode .game-header {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
    border-bottom: 2px solid #f1c40f;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    margin-bottom: 20px;
    border-radius: 0 0 16px 16px;
    padding-bottom: 16px;
}

/* Hide elements in Group Mode Header/Top */
body.group-mode .game-header .back-btn,
body.group-mode #btn-start-battle,
body.group-mode #classic-mode .section-title {
    display: none !important;
}

body.group-mode .game-title {
    color: #f1c40f;
    text-shadow: 0 0 10px rgba(241, 196, 15, 0.5);
    font-weight: 800;
}

body.group-mode .back-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.group-mode .icon-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #f1c40f;
    border: 1px solid rgba(241, 196, 15, 0.3);
}

body.group-mode {
    background-color: #0f0f1a;
    /* Dark background for the whole page in group mode */
}

body.group-mode .app-container {
    background-color: #1a1a2e;
}

body.group-mode .group-duration-selector {
    display: flex !important;
}

/* Group Mode Footer Layout */
body.group-mode .action-footer {
    display: flex !important;
    gap: 12px;
    padding: 12px 16px;
    align-items: center;
}

/* Footer Back Button */
body.group-mode .footer-back-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 20px;
    background: #34495e;
    color: #fff;
    border: 1px solid #2c3e50;
    border-radius: 12px;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    flex: 0 0 auto;
    font-size: 14px;
}

body.group-mode .footer-back-btn:active {
    transform: scale(0.95);
}

body.group-mode .footer-back-btn i {
    margin-right: 6px;
}

/* Ensure filter toggle is visible and takes remaining space */
body.group-mode .action-footer .category-filter-toggle {
    display: flex !important;
    flex: 1;
    /* Take remaining space */
    background: linear-gradient(135deg, #f1c40f 0%, #f39c12 100%);
    border: 2px solid #e67e22;
    color: #1a1a2e;
    box-shadow: 0 4px 15px rgba(241, 196, 15, 0.4);
    justify-content: center;
    padding: 0;
    height: 48px;
    /* Match back button height */
    border-radius: 12px;
    margin-top: 0;
    align-items: center;
    font-weight: 700;
    font-size: 16px;
}

body.group-mode .app-container {
    padding-bottom: 180px;
    /* Space for footer */
}

/* Group Duration Selector Styles */
.group-duration-selector {
    display: none;
    flex-direction: column;
    gap: 16px;
    padding: 8px 0;
}

.duration-label {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    text-align: center;
}

.duration-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.duration-btn {
    padding: 12px 20px;
    border: 3px solid #667eea;
    border-radius: 12px;
    background: #fff;
    color: #667eea;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.duration-btn:hover {
    background: #f8f9ff;
    transform: translateY(-2px);
}

.duration-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    transform: scale(1.05);
}

.group-start-btn {
    padding: 16px 32px;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    border: none;
    border-radius: 16px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.group-start-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.5);
}

.group-start-btn:active {
    transform: translateY(-1px);
}

.group-start-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Instruction Modal */
.instruction-body {
    text-align: left;
    margin: 20px 0;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 12px;
}

.instr-section h4 {
    color: #667eea;
    margin-bottom: 12px;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.instr-section p {
    margin-bottom: 8px;
    color: #555;
    line-height: 1.5;
}

.full-width {
    width: 100%;
}

/* Combo Display */
.combo-display {
    position: fixed;
    bottom: 180px;
    left: 20px;
    transform: none;
    font-size: 36px;
    font-weight: 900;
    color: #ffd700;
    text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.4),
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
    z-index: 500;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5));
    padding: 12px 20px;
    border-radius: 16px;
    border: 2px solid rgba(255, 215, 0, 0.5);
}

.combo-display.pulse {
    animation: comboPulse 0.2s ease-out;
}

@keyframes comboPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.combo-num {
    font-size: 48px;
    color: #ff6b6b;
    text-shadow: 2px 2px 0 #fff, 3px 3px 0 #000;
}

/* Floating Number */
.floating-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    font-weight: 700;
    color: #4ecdc4;
    animation: floatUp 0.8s ease-out forwards;
    pointer-events: none;
    z-index: 100;
}

@keyframes floatUp {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0);
    }

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

/* Clicked Card Effect */
.category-card.clicked {
    transform: scale(0.95);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
}

/* Eliminated Card Effect (淘汰賽翻卡蓋牌) */
.category-card.eliminated {
    position: relative;
    transform: rotateY(180deg);
    transition: transform 0.4s ease-in-out;
}

.category-card.eliminated::before {
    content: '❌';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.9) 0%, rgba(200, 35, 51, 0.95) 100%);
    border-radius: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    transform: rotateY(180deg);
    z-index: 10;
}

.category-card.eliminated .card-emoji,
.category-card.eliminated .card-label {
    opacity: 0.3;
}

/* 淘汰賽模式下卡片的 hover 效果 */
body.group-mode .category-card:hover:not(.eliminated) {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
}

/* ===== Mobile RWD Improvements ===== */
@media (max-width: 768px) {

    /* Larger touch targets for mobile */
    .mode-btn {
        min-height: 140px;
        padding: 24px;
    }

    .mode-icon {
        font-size: 56px;
        margin-bottom: 12px;
    }

    .mode-name {
        font-size: 20px;
        margin-bottom: 6px;
    }

    .mode-desc {
        font-size: 14px;
    }

    /* Larger price buttons on mobile */
    .price-btn {
        min-width: 80px;
        padding: 16px 18px;
        font-size: 18px;
        min-height: 52px;
    }

    /* Larger slider */
    .game-slider {
        height: 8px;
    }

    .slider-value {
        font-size: 28px;
    }

    /* Settings sections spacing */
    .setting-section {
        margin-bottom: 24px;
    }

    .setting-title {
        font-size: 18px;
        margin-bottom: 12px;
    }

    /* Back button larger */
    .back-btn {
        padding: 12px 20px;
        font-size: 16px;
    }

    /* Category toggles larger */
    .toggle-btn {
        padding: 12px 18px;
        font-size: 15px;
        min-height: 48px;
    }
}

/* ===== Group Mode UI Improvements ===== */

/* Prevent text selection on fast clicks */
.category-card,
.mode-btn,
.price-btn,
.toggle-btn,
.action-btn {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Room Info Button (replaces group-btn) */
.room-info-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

.room-info-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.05);
}

/* Start Battle Button (in header) */
.start-battle-btn {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px 20px;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    border: none;
    border-radius: 25px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(245, 87, 108, 0.4);
    display: flex;
    align-items: center;
    gap: 6px;
}

.start-battle-btn:hover {
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 6px 16px rgba(245, 87, 108, 0.5);
}

.start-battle-btn:active {
    transform: translateY(-50%) scale(0.98);
}

/* Room Info Modal */
.room-info-body {
    padding: 20px 0;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

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

.info-label {
    font-size: 16px;
    color: #666;
    font-weight: 600;
}

.info-value {
    font-size: 18px;
    color: #333;
    font-weight: 700;
}

.modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.modal-actions .primary-btn {
    flex: 1;
    padding: 12px 16px;
    font-size: 14px;
}

/* Game Start Modal - Countdown Animation */
.game-start-content {
    text-align: center;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.game-start-content h2 {
    font-size: 28px;
    margin-bottom: 12px;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.game-start-content p {
    font-size: 18px;
    color: #666;
    margin-bottom: 30px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
}

.start-countdown {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: countdownPulse 1s infinite;
    box-shadow: 0 12px 40px rgba(15, 52, 96, 0.6),
        0 0 0 6px rgba(102, 126, 234, 0.3),
        inset 0 0 30px rgba(102, 126, 234, 0.2);
}

.start-countdown span {
    font-size: 80px;
    font-weight: 900;
    color: #FFD700;
    text-shadow:
        0 0 10px #FFD700,
        0 0 20px #FFA500,
        0 0 30px #FFA500,
        2px 2px 4px rgba(0, 0, 0, 0.8);
    letter-spacing: -2px;
}

@keyframes countdownPulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 12px 40px rgba(15, 52, 96, 0.6),
            0 0 0 6px rgba(102, 126, 234, 0.3),
            inset 0 0 30px rgba(102, 126, 234, 0.2);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 16px 50px rgba(15, 52, 96, 0.8),
            0 0 0 10px rgba(102, 126, 234, 0.4),
            inset 0 0 40px rgba(102, 126, 234, 0.3);
    }
}

/* 心戰喊話文字樣式 */
.trash-talk-text {
    margin-top: 20px;
    padding: 12px 20px;
    font-size: 18px;
    font-weight: 600;
    color: #764ba2;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    border-radius: 50px;
    border: 2px solid rgba(118, 75, 162, 0.3);
    animation: trashTalkBounce 0.5s ease;
    text-align: center;
    max-width: 280px;
}

.trash-talk-text.trash-talk-animate {
    animation: trashTalkPop 0.4s ease-out;
}

@keyframes trashTalkPop {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    50% {
        transform: scale(1.1);
    }

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

@keyframes trashTalkBounce {

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

    50% {
        transform: translateY(-5px);
    }
}

/* Battle Timer Overlay - positioned to not block combo */
.battle-timer-overlay {
    position: fixed;
    top: 20px;
    right: 20px;
    left: auto;
    bottom: auto;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    pointer-events: none;
}

.battle-timer-display {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff4757 100%);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(255, 71, 87, 0.5);
    animation: timerPulse 1s infinite;
}

.battle-timer-display span {
    font-size: 36px;
    font-weight: 900;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

@keyframes timerPulse {

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

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

/* Card Click Count Badge */
.card-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: #fff;
    min-width: 28px;
    height: 28px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.5);
    transform: scale(0);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding: 0 6px;
    z-index: 10;
}

.card-count.show {
    transform: scale(1);
}

/* Submit Vote Button (floating) */
.submit-vote-btn {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    padding: 16px 32px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 30px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
}

.submit-vote-btn:hover {
    transform: translateX(-50%) scale(1.05);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.5);
}

.submit-vote-btn:active {
    transform: translateX(-50%) scale(0.98);
}

/* Hide footer buttons in group mode */
body.group-mode .main-action {
    display: none !important;
}

/* === Modal Filter Styles === */
.category-filter-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.category-filter-modal.show {
    display: flex !important;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-panel {
    position: relative;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 24px;
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    animation: fadeIn 0.2s ease-out;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

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

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 20px 16px 20px;
    border-bottom: 2px solid #e9ecef;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 24px 24px 0 0;
}

.modal-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-header h3 i {
    font-size: 22px;
}

.modal-close {
    background: rgba(255, 255, 255, 0.25);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: #fff;
    font-size: 18px;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.1) rotate(90deg);
}

.modal-close:active {
    transform: scale(0.95) rotate(90deg);
}

.modal-body {
    padding: 24px 16px;
    overflow-y: auto;
    flex: 1;
}

/* Scrollbar styling */
.modal-body::-webkit-scrollbar {
    width: 6px;
}

.modal-body::-webkit-scrollbar-track {
    background: #f1f3f5;
    border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: #adb5bd;
    border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: #868e96;
}

/* Category Filter Toggle Button */
.category-filter-toggle {
    width: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 16px;
    padding: 10px 16px;
    /* Reduced padding */
    color: #fff;
    font-size: 14px;
    /* Reduced font size */
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.35);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 0;
    /* Align with footer controls */
    position: relative;
    overflow: hidden;
}

.category-filter-toggle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: opacity 0.3s;
}

.category-filter-toggle:hover::before {
    opacity: 1;
}

.category-filter-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.45);
}

.category-filter-toggle:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
}

.category-filter-toggle i:first-child {
    margin-right: 10px;
    font-size: 16px;
}

.category-filter-toggle .toggle-icon {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-size: 14px;
}

.category-filter-toggle:hover .toggle-icon {
    transform: translateY(2px);
}

.btn-helper {
    display: block;
    font-size: 11px;
    font-weight: 400;
    opacity: 0.8;
    margin-top: 2px;
}

.content-area {
    padding-bottom: 220px;
}

/* Game Rules Modal Styles - Enhanced Design */
#game-rules-modal {
    z-index: 10000;
}

#game-rules-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#game-rules-modal .modal-content {
    max-width: 420px;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    border-radius: 24px;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    position: relative;
    animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

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

#game-rules-modal .modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 24px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    position: relative;
    overflow: hidden;
}

#game-rules-modal .modal-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {

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

    50% {
        transform: translateX(30%) translateY(30%);
    }
}

#game-rules-modal .modal-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#game-rules-modal .close-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

#game-rules-modal .close-btn:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: rotate(90deg) scale(1.1);
}

#game-rules-modal .instruction-body {
    padding: 28px;
    overflow-y: auto;
    flex: 1;
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
}

#game-rules-modal .instr-section {
    margin-bottom: 20px;
    background: #ffffff;
    padding: 20px;
    border-radius: 16px;
    border-left: 5px solid #667eea;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

#game-rules-modal .instr-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #667eea 100%);
    opacity: 0;
    transition: opacity 0.3s;
}

#game-rules-modal .instr-section:hover {
    transform: translateY(-2px);
    box-shadow:
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

#game-rules-modal .instr-section:hover::before {
    opacity: 1;
}

#game-rules-modal .instr-section:last-child {
    margin-bottom: 0;
}

#game-rules-modal .instr-section h4 {
    margin: 0 0 14px 0;
    color: #2c3e50;
    font-size: 17px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

#game-rules-modal .instr-section h4 i {
    color: #667eea;
    font-size: 20px;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#game-rules-modal .instr-section p {
    margin: 0 0 10px 0;
    color: #4a5568;
    font-size: 15px;
    line-height: 1.6;
    padding-left: 42px;
}

#game-rules-modal .instr-section p:last-child {
    margin-bottom: 0;
}

#game-rules-modal .instr-section p strong {
    color: #667eea;
    font-weight: 600;
}

#game-rules-modal #btn-close-rules {
    margin: 0 28px 28px 28px;
    width: calc(100% - 56px);
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 14px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    position: relative;
    overflow: hidden;
}

#game-rules-modal #btn-close-rules::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

#game-rules-modal #btn-close-rules:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
}

#game-rules-modal #btn-close-rules:hover::before {
    left: 100%;
}

#game-rules-modal #btn-close-rules:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.4);
}

/* View Rules Button in Header */
.icon-btn {
    background: transparent;
    border: none;
    color: #667eea;
    font-size: 24px;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-btn:hover {
    background: rgba(102, 126, 234, 0.1);
    transform: scale(1.1);
}

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

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

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

/* Waiting Overlay */
.waiting-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.waiting-overlay.hidden {
    display: none !important;
}

.waiting-content {
    text-align: center;
    color: white;
}

.waiting-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    margin: 0 auto 20px;
}

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

/* Game Start Modal */
.start-modal-content {
    text-align: center;
    padding: 30px !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 24px;
}

.start-header h3 {
    color: #2d3436;
    margin-bottom: 20px;
    font-size: 24px;
}

.start-settings {
    margin-bottom: 30px;
    padding: 15px;
    background: #f1f2f6;
    border-radius: 12px;
}

.setting-item {
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #2d3436;
}

.start-countdown {
    width: 150px !important;
    height: 150px !important;
    margin: 20px auto !important;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 12px 40px rgba(15, 52, 96, 0.6),
        0 0 0 6px rgba(102, 126, 234, 0.3),
        inset 0 0 30px rgba(102, 126, 234, 0.2) !important;
}

#start-countdown-number {
    font-size: 80px !important;
    font-weight: 900 !important;
    color: #FFD700 !important;
    text-shadow: 0 0 10px #FFD700, 0 0 20px #FFA500, 0 0 30px #FFA500, 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
    animation: pulse 1s infinite;
}

.start-footer {
    color: #636e72;
    font-size: 16px;
    font-weight: 500;
}

/* Strict Back Button Visibility for Group Mode */
body.group-mode #btn-footer-back-personal {
    display: none !important;
}

body.group-mode #btn-footer-back {
    display: flex !important;
}

/* Ensure default state is correct for non-group */
#btn-footer-back {
    display: none;
}

/* Mode Footer within Card */
.mode-footer {
    display: flex;
    justify-content: flex-start;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #eee;
    width: 100%;
}

/* Footer Back Button (Override generic back-btn) */
.footer-back {
    position: static !important;
    /* Override absolute */
    background: #f1f2f6;
    color: #636e72;
    border: none;
    box-shadow: none;
    margin: 0;
}

.footer-back:hover {
    background: #dfe6e9;
    color: #2d3436;
    transform: translateX(-2px);
    box-shadow: none;
}

/* Member Read-Only Mode for Settings Modal */
.member-readonly .toggle-btn,
.member-readonly .price-btn,
.member-readonly .toggle-btn:hover,
.member-readonly .price-btn:hover {
    pointer-events: none;
    opacity: 0.7;
    cursor: not-allowed;
}

.member-readonly .modal-actions,
.member-readonly .game-type-selector,
.member-readonly #leader-duration-slider {
    pointer-events: none;
    opacity: 0.6;
}

.member-readonly .modal-panel::after {
    content: '此設定由房主控制，您只能查看';
    display: block;
    text-align: center;
    padding: 12px 20px;
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
    font-size: 14px;
    font-weight: 600;
    margin-top: auto;
    border-radius: 0 0 24px 24px;
}

/* Real-time Click Sync Animation */
.card-count.sync-pulse {
    animation: syncPulse 0.3s ease-out;
}

@keyframes syncPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.7);
    }

    50% {
        transform: scale(1.3);
        box-shadow: 0 0 0 8px rgba(255, 107, 107, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 107, 107, 0);
    }
}

/* ========================================
   TABLET PORTRAIT (max-width: 768px)
   iPad Pro 11 in portrait, etc.
======================================== */
@media (max-width: 768px) and (min-width: 481px) {
    .mode-options {
        flex-direction: row;
        gap: 16px;
    }

    .mode-btn {
        flex: 1;
        padding: 28px 16px;
    }

    .game-intro {
        flex-wrap: nowrap;
    }

    .intro-item {
        white-space: nowrap;
    }
}

/* ========================================
   MOBILE-SPECIFIC RWD (max-width: 480px)
   Make everything fit in one screen
======================================== */
@media (max-width: 480px) {

    /* Home Screen Container */
    .mode-selection-screen {
        padding: 16px 12px;
        height: 100dvh;
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    .mode-container {
        padding: clamp(4px, 1dvh, 12px) 12px;
        width: 100dvw;
        max-width: 100dvw;
        height: 100%;
        max-height: 100dvh;
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        box-sizing: border-box;
        margin: 0;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    /* Force Hide Scrollbars Globally and on Container */
    html,
    body {
        overflow: hidden !important;
        width: 100vw !important;
        height: 100dvh !important;
        margin: 0;
        padding: 0;
    }

    * {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    *::-webkit-scrollbar {
        display: none !important;
    }

    .container {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100% !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    .price-buttons {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 4px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    .price-btn {
        min-width: 0 !important;
        padding: 8px 4px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    .app-logo-wrapper {
        margin-bottom: clamp(2px, 1dvh, 8px);
    }

    .app-logo {
        width: clamp(40px, 10dvh, 60px);
        height: clamp(40px, 10dvh, 60px);
        border-radius: 16px;
    }

    /* Compact Title */
    .mode-title {
        font-size: clamp(18px, 3.5dvh, 24px);
        margin-bottom: 0;
    }

    .welcome-tagline {
        font-size: clamp(11px, 1.8dvh, 13px);
        margin-bottom: clamp(4px, 1dvh, 10px);
    }

    /* Inline Game Intro - hide text, show only icons on very small */
    .game-intro {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: clamp(4px, 1dvh, 10px);
        margin-bottom: clamp(10px, 2.5dvh, 20px);
        justify-content: center;
    }

    .intro-item {
        white-space: nowrap;
        padding: 4px 8px;
        font-size: clamp(9px, 1.5dvh, 11px);
        gap: 4px;
    }

    .intro-icon {
        font-size: clamp(12px, 2dvh, 14px);
    }

    /* Compact Subtitle */
    .mode-subtitle {
        font-size: clamp(12px, 2dvh, 14px);
        margin-bottom: clamp(10px, 2.5dvh, 16px);
    }

    /* Side-by-side Mode Buttons */
    .mode-options {
        flex-direction: row;
        gap: 12px;
    }

    .mode-btn {
        flex: 1;
        padding: clamp(12px, 3dvh, 20px) 12px;
    }

    .mode-icon {
        font-size: 36px;
        margin-bottom: 8px;
    }

    .mode-name {
        font-size: 16px;
        margin-bottom: 4px;
    }

    .mode-desc {
        font-size: 11px;
    }

    .cta-section {
        margin-bottom: clamp(10px, 2.5dvh, 20px) !important;
    }

    .quick-start-btn {
        padding: clamp(10px, 2.5dvh, 16px) 20px !important;
    }

    .btn-main-text {
        font-size: clamp(14px, 3.5dvh, 18px) !important;
    }

    /* Footer */
    .home-footer {
        margin-top: clamp(8px, 2dvh, 16px);
        font-size: 10px;
    }
}

@media (max-width: 414px) and (min-width: 376px) {
    .mode-container {
        padding: 20px 14px;
        height: 100%;
        overflow: hidden !important;
    }

    .price-buttons {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 6px !important;
    }

    .app-logo {
        width: 72px;
        height: 72px;
    }

    .mode-title {
        font-size: 24px;
    }

    .welcome-tagline {
        font-size: 13px;
        margin-bottom: 14px;
    }

    .game-intro {
        margin-bottom: 14px;
        gap: 6px;
    }

    .intro-item {
        padding: 5px 8px;
        font-size: 10px;
        gap: 3px;
    }

    .intro-icon {
        font-size: 12px;
    }

    .mode-subtitle {
        font-size: 13px;
        margin-bottom: 14px;
    }

    .mode-btn {
        padding: 18px 10px;
    }

    .mode-icon {
        font-size: 34px;
    }

    .mode-name {
        font-size: 15px;
    }

    .mode-desc {
        font-size: 10px;
    }

    .home-footer {
        margin-top: 16px;
        font-size: 10px;
    }
}

@media (max-width: 375px) {

    #game-type-selection .mode-container,
    #leader-settings .mode-container,
    .mode-container {
        padding: 8px 10px 12px !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    .mode-title {
        font-size: 18px !important;
        margin-top: 0 !important;
        margin-bottom: 2px !important;
    }

    .mode-subtitle {
        font-size: 13px !important;
        margin-bottom: 4px !important;
    }

    .setting-section {
        margin-bottom: 4px !important;
    }

    .section-title {
        margin-bottom: 2px !important;
        font-size: 12px !important;
    }

    .back-btn {
        margin-top: 4px !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
    }

    .price-buttons {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 4px !important;
    }

    .app-logo {
        width: 56px;
        height: 56px;
    }

    .mode-title {
        font-size: 20px;
    }

    .welcome-tagline {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .game-intro {
        margin-bottom: 10px;
        gap: 4px;
    }

    .intro-item {
        padding: 4px 6px;
        font-size: 9px;
        gap: 2px;
    }

    .intro-icon {
        font-size: 11px;
    }

    .mode-subtitle {
        font-size: 12px;
        margin-bottom: 12px;
    }

    .mode-btn {
        padding: 14px 8px;
    }

    .mode-icon {
        font-size: 28px;
    }

    .mode-name {
        font-size: 13px;
    }

    .mode-desc {
        font-size: 9px;
    }

    .home-footer {
        margin-top: 12px;
        font-size: 9px;
    }
}

/* ========================================
   LARGE SCREENS OPTIMIZATION (1200px+)
   Better layout for desktop and large tablets
======================================== */
@media (min-width: 1200px) {
    .mode-container {
        max-width: 900px;
        padding: 60px 56px;
    }

    .mode-title {
        font-size: 52px;
        margin-bottom: 16px;
    }

    .mode-subtitle {
        font-size: 22px;
        margin-bottom: 56px;
    }

    .mode-options {
        gap: 32px;
    }

    .mode-btn {
        padding: 48px 36px;
        border-radius: 20px;
    }

    .mode-icon {
        font-size: 80px;
        margin-bottom: 24px;
    }

    .mode-name {
        font-size: 28px;
        margin-bottom: 14px;
    }

    .mode-desc {
        font-size: 18px;
    }

    .app-logo {
        width: 140px;
        height: 140px;
        border-radius: 32px;
    }

    .welcome-tagline {
        font-size: 22px;
        margin-bottom: 32px;
    }

    .game-intro {
        gap: 20px;
        margin-bottom: 40px;
    }

    .intro-item {
        padding: 12px 20px;
        font-size: 16px;
        border-radius: 24px;
    }

    .intro-icon {
        font-size: 20px;
    }

    .home-footer {
        margin-top: 40px;
        font-size: 14px;
    }
}

/* ========================================
   TABLET/DESKTOP SETTINGS PANEL OPTIMIZATION
   Horizontal layout for settings sections
======================================== */
@media (min-width: 768px) {
    .settings-panel {
        max-width: 100%;
    }

    /* Make settings sections horizontal on larger screens */
    #game-type-selection .settings-panel,
    #leader-settings .settings-panel {
        display: flex;
        gap: 16px;
    }

    #game-type-selection .setting-section,
    #leader-settings .setting-section {
        flex: 1;
        margin-bottom: 0;
        min-width: 0;
        /* Allow flex items to shrink below content size */
    }

    /* Improve slider appearance */
    .slider-container {
        flex-direction: row;
        align-items: center;
    }

    .game-slider {
        flex: 1;
        min-width: 80px;
    }

    /* Better price buttons on tablet/desktop - allow wrap on smaller tablets */
    .price-buttons {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 6px;
    }

    .price-btn {
        min-width: auto;
        padding: 10px 12px;
        font-size: 13px;
        flex: 0 1 auto;
    }
}

/* Medium tablets (768-900px) - stack settings vertically if needed */
@media (min-width: 768px) and (max-width: 900px) {

    #game-type-selection .settings-panel,
    #leader-settings .settings-panel {
        flex-direction: column;
        gap: 12px;
    }

    .price-buttons {
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .price-btn {
        flex: 1;
        min-width: 0;
        padding: 10px 8px;
        font-size: 13px;
    }
}

/* Larger tablets and desktops */
@media (min-width: 900px) {

    #game-type-selection .settings-panel,
    #leader-settings .settings-panel {
        gap: 20px;
    }

    .price-btn {
        min-width: 55px;
        padding: 10px 14px;
        font-size: 14px;
    }
}

@media (min-width: 1024px) {

    #game-type-selection .settings-panel,
    #leader-settings .settings-panel {
        gap: 28px;
    }

    .setting-section {
        padding: 28px;
    }

    .setting-title {
        font-size: 18px;
    }

    .slider-value {
        font-size: 28px;
    }

    .game-slider {
        height: 10px;
    }

    .price-btn {
        min-width: 70px;
        padding: 14px 16px;
        font-size: 16px;
    }
}

/* ========================================
   WAITING OVERLAY FOR GROUP MEMBERS
======================================== */
.waiting-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 26, 46, 0.95);
    backdrop-filter: blur(10px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.waiting-overlay.hidden {
    display: none !important;
}

.waiting-content {
    text-align: center;
    padding: 40px;
}

.waiting-spinner {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 30px;
}

.spinner-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid transparent;
    animation: spinnerRotate 1.5s linear infinite;
}

.spinner-ring:nth-child(1) {
    border-top-color: #667eea;
    animation-delay: 0s;
}

.spinner-ring:nth-child(2) {
    border-right-color: #764ba2;
    width: 65px;
    height: 65px;
    top: 7.5px;
    left: 7.5px;
    animation-delay: 0.2s;
    animation-direction: reverse;
}

.spinner-ring:nth-child(3) {
    border-bottom-color: #f39c12;
    width: 50px;
    height: 50px;
    top: 15px;
    left: 15px;
    animation-delay: 0.4s;
}

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

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

.waiting-title {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.waiting-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 30px;
}

.leave-room-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.leave-room-btn:hover {
    background: rgba(231, 76, 60, 0.8);
    border-color: #e74c3c;
    transform: translateY(-2px);
}

/* Nickname Display in Waiting Overlay */
.nickname-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 25px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.nickname-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.nickname-value {
    font-size: 16px;
    font-weight: 700;
    color: #f39c12;
    animation: nicknameGlow 2s ease-in-out infinite;
}

@keyframes nicknameGlow {

    0%,
    100% {
        text-shadow: 0 0 5px rgba(243, 156, 18, 0.5);
    }

    50% {
        text-shadow: 0 0 15px rgba(243, 156, 18, 0.8);
    }
}

.nickname-refresh {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.nickname-refresh:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(180deg);
}

/* Player Count Display */
.player-count-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 15px;
}

.player-count-number {
    font-size: 42px;
    font-weight: 800;
    color: #2ecc71;
    text-shadow: 0 0 20px rgba(46, 204, 113, 0.5);
    animation: countPulse 1s ease-in-out infinite;
}

@keyframes countPulse {

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

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

.player-count-text {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
}

.battle-warning {
    font-size: 14px;
    color: #f39c12;
    margin-bottom: 20px;
    animation: warningBlink 1.5s ease-in-out infinite;
}

@keyframes warningBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* ========================================
   戰鬥名卡片 (重新設計)
======================================== */
.battle-name-card {
    background: linear-gradient(145deg, #ffffff 0%, #f8f9ff 100%);
    border-radius: 24px;
    padding: 24px;
    margin: 20px 0;
    box-shadow: 0 10px 40px rgba(102, 126, 234, 0.15);
    border: 2px solid rgba(102, 126, 234, 0.2);
    text-align: center;
}

.battle-name-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
}

.battle-name-emoji {
    font-size: 28px;
    animation: battleShake 2s ease-in-out infinite;
}

@keyframes battleShake {

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

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

.battle-name-label {
    font-size: 18px;
    font-weight: 700;
    color: #667eea;
}

.battle-name-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.battle-name-value {
    font-size: 28px;
    font-weight: 800;
    color: #333;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

.battle-name-refresh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(240, 147, 251, 0.4);
}

.battle-name-refresh:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(240, 147, 251, 0.5);
}

.battle-name-refresh:active {
    transform: scale(0.95);
}

.battle-name-hint {
    font-size: 14px;
    color: #888;
    margin: 0 0 16px 0;
}

/* 開始揪團按鈕 */
.start-group-btn {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 20px auto;
    padding: 18px 32px;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 25px rgba(56, 239, 125, 0.4);
}

.start-group-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 35px rgba(56, 239, 125, 0.5);
}

.start-group-btn:active {
    transform: scale(0.95);
}

/* Homepage and Group Mode Nickname Display (保留舊的相容性) */
.homepage-nickname,
.group-nickname-selector {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 20px 0;
    padding: 14px 20px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 16px;
    border: 1px solid rgba(102, 126, 234, 0.3);
}

.homepage-nickname .nickname-row,
.group-nickname-selector .nickname-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.homepage-nickname .nickname-label,
.group-nickname-selector .nickname-label {
    font-size: 14px;
    color: #666;
}

.homepage-nickname .nickname-value,
.group-nickname-selector .nickname-value {
    font-size: 18px;
    font-weight: 700;
    color: #667eea;
}

.homepage-nickname .nickname-refresh,
.group-nickname-selector .nickname-refresh {
    width: 32px;
    height: 32px;
    font-size: 16px;
    background: rgba(102, 126, 234, 0.15);
}

/* Nickname Category Selector */
.nickname-category-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 4px;
}

.nickname-category-btn {
    padding: 4px 10px;
    font-size: 11px;
    border: 1px solid rgba(102, 126, 234, 0.3);
    background: rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
    color: #666;
}

.nickname-category-btn:hover {
    background: rgba(102, 126, 234, 0.15);
    border-color: #667eea;
}

.nickname-category-btn.active {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

/* Player Join Popups Container */
.player-join-popups {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.player-join-popup {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.9) 0%, rgba(39, 174, 96, 0.9) 100%);
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(46, 204, 113, 0.4);
    animation: popupSlideIn 0.5s ease-out, popupFadeOut 0.5s ease 2.5s forwards;
    backdrop-filter: blur(10px);
}

.join-emoji {
    font-size: 18px;
    animation: emojiShake 0.5s ease-in-out;
}

.join-text {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.join-action {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

@keyframes popupSlideIn {
    0% {
        transform: translateX(100px) scale(0.8);
        opacity: 0;
    }

    60% {
        transform: translateX(-10px) scale(1.05);
    }

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

@keyframes popupFadeOut {
    to {
        transform: translateX(50px);
        opacity: 0;
    }
}

@keyframes emojiShake {

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

    25% {
        transform: rotate(-15deg);
    }

    75% {
        transform: rotate(15deg);
    }
}

/* ==================== 淘汰賽模式 Elimination Mode Styles ==================== */

.elimination-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.elimination-container {
    width: 100%;
    max-width: 500px;
    text-align: center;
}

.elimination-header {
    margin-bottom: 24px;
}

.elimination-round {
    font-size: 18px;
    color: #f1c40f;
    font-weight: 600;
    margin-bottom: 12px;
    text-shadow: 0 0 10px rgba(241, 196, 15, 0.5);
}

.elimination-timer-display {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(231, 76, 60, 0.6);
    animation: timerPulse 1s ease-in-out infinite;
}

.elimination-timer-display span {
    font-size: 36px;
    font-weight: 800;
    color: #fff;
}

@keyframes timerPulse {

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

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

.elimination-subtitle {
    font-size: 16px;
    color: #ecf0f1;
    opacity: 0.9;
}

.elimination-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.elimination-option {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 3px solid #34495e;
    border-radius: 16px;
    padding: 16px 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.elimination-option:hover {
    border-color: #e74c3c;
    transform: scale(1.02);
    box-shadow: 0 0 15px rgba(231, 76, 60, 0.4);
}

.elimination-option.voted {
    border-color: #e74c3c;
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.3) 0%, rgba(192, 57, 43, 0.2) 100%);
    box-shadow: 0 0 20px rgba(231, 76, 60, 0.6);
}

.elimination-option.eliminated {
    opacity: 0.3;
    pointer-events: none;
    border-color: #7f8c8d;
    text-decoration: line-through;
}

.elimination-option-emoji {
    font-size: 32px;
}

.elimination-option-label {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.elimination-option-votes {
    font-size: 12px;
    color: #e74c3c;
    font-weight: 700;
}

.elimination-status {
    font-size: 14px;
    color: #95a5a6;
}

/* Elimination Result Modal */
.elimination-result-content {
    text-align: center;
    padding: 30px;
}

.elimination-result-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.elimination-result-item {
    font-size: 28px;
    font-weight: 800;
    color: #e74c3c;
    margin: 16px 0;
    padding: 12px 24px;
    background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
    border-radius: 12px;
    display: inline-block;
}

.elimination-remaining {
    margin-top: 20px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    font-size: 13px;
    color: #666;
}

/* Elimination Winner Modal */
.elimination-winner-content {
    text-align: center;
    padding: 40px 30px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.winner-confetti {
    font-size: 64px;
    animation: confettiPop 0.5s ease-out;
}

@keyframes confettiPop {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(1.3);
    }

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

.winner-item {
    font-size: 18px;
    font-weight: 700;
    margin: 10px 0;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: block;
    max-height: 100px;
    overflow-y: auto;
    text-align: center;
    animation: winnerGlow 2s ease-in-out infinite;
}

@keyframes winnerGlow {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    }

    50% {
        box-shadow: 0 0 40px rgba(255, 255, 255, 0.6);
    }
}

.winner-subtitle {
    font-size: 16px;
    opacity: 0.9;
    margin-bottom: 24px;
}

.elimination-winner-content .primary-btn {
    background: #fff;
    color: #667eea;
    border: none;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s;
}

.elimination-winner-content .primary-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Mobile adjustments */
@media (max-width: 400px) {
    .elimination-options {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .elimination-option {
        padding: 12px 8px;
    }

    .elimination-option-emoji {
        font-size: 24px;
    }

    .elimination-option-label {
        font-size: 12px;
    }
}

/* ========================================
   超小螢幕優化 (iPhone SE, 小型手機)
======================================== */
@media (max-width: 375px) {

    /* 選擇玩法頁面優化 */
    #game-type-selection .mode-container {
        padding: 12px 16px;
        margin: 0 8px;
    }

    #game-type-selection .personal-mode-label {
        font-size: 14px;
        padding: 4px 12px;
        margin-bottom: 8px;
    }

    #game-type-selection .mode-title {
        font-size: 20px;
        margin-bottom: 4px;
    }

    #game-type-selection .mode-subtitle {
        font-size: 12px;
        margin-bottom: 12px;
    }

    #game-type-selection .setting-section {
        padding: 10px;
        margin-bottom: 8px;
    }

    #game-type-selection .setting-title {
        font-size: 12px;
        margin-bottom: 6px;
    }

    #game-type-selection .slider-value {
        font-size: 18px;
    }

    #game-type-selection .price-btn {
        padding: 6px 3px;
        font-size: 11px;
    }

    #game-type-selection .mode-options {
        gap: 8px;
        margin-top: 10px;
    }

    #game-type-selection .mode-btn {
        padding: 12px 6px;
    }

    #game-type-selection .mode-icon {
        font-size: 28px;
        margin-bottom: 6px;
    }

    #game-type-selection .mode-name {
        font-size: 14px;
        margin-bottom: 3px;
    }

    #game-type-selection .mode-desc {
        font-size: 10px;
    }

    #game-type-selection .btn-back {
        margin-top: 10px;
        padding: 8px 16px;
        font-size: 12px;
    }
}

/* 小手機優化 (iPhone 14 Pro 等) */
@media (max-width: 430px) and (min-width: 376px) {
    #game-type-selection .mode-container {
        padding: 14px 18px;
    }

    #game-type-selection .mode-title {
        font-size: 22px;
    }

    #game-type-selection .setting-section {
        padding: 11px;
        margin-bottom: 10px;
    }

    #game-type-selection .mode-btn {
        padding: 14px 8px;
    }

    #game-type-selection .mode-icon {
        font-size: 30px;
    }
}

/* 矮螢幕優化 (橫向或短螢幕) */
@media (max-height: 700px) {

    #game-type-selection .mode-container,
    #group-role-selection .mode-container,
    #leader-settings .mode-container {
        padding: clamp(6px, 1.5dvh, 12px) clamp(10px, 2dvw, 20px);
    }

    #game-type-selection .mode-title,
    #group-role-selection .mode-title,
    #leader-settings .mode-title {
        font-size: clamp(18px, 4dvh, 22px);
        margin-bottom: 4px;
    }

    #game-type-selection .mode-subtitle,
    #group-role-selection .mode-subtitle,
    #leader-settings .mode-subtitle {
        font-size: clamp(11px, 2dvh, 14px);
        margin-bottom: clamp(6px, 1.5dvh, 12px);
    }

    #group-role-selection .mode-container {
        padding: 8px 16px !important;
        justify-content: center;
    }

    /* Smaller Game Card */
    .battle-name-card {
        padding: 4px 10px !important;
        margin-bottom: 4px !important;
    }

    .battle-name-display {
        padding: 4px 10px !important;
        font-size: 16px !important;
    }

    .nickname-category-selector {
        gap: 2px !important;
        margin-top: 4px !important;
    }

    .nickname-category-btn {
        padding: 2px 6px !important;
        font-size: 9px !important;
    }

    #group-role-selection .mode-options {
        gap: 4px !important;
        margin-top: 4px !important;
    }

    #group-role-selection .mode-btn {
        padding: 6px !important;
    }

    #group-role-selection .mode-subtitle {
        display: none;
        /* Hide subtitle on very short Screens to save space */
    }

    .start-group-btn {
        padding: 10px 16px !important;
        font-size: 16px !important;
        margin-top: 6px !important;
    }

    /* Game Type Selection (Personal Mode Screen) Aggressive Compactness */
    #game-type-selection .mode-container {
        padding: 6px 10px !important;
        justify-content: center;
        padding-top: 6px !important;
        width: 100dvw !important;
        box-sizing: border-box !important;
    }

    .price-selector-container {
        padding: 2px 0 !important;
    }

    .price-btn {
        padding: 4px 2px !important;
        min-width: 0 !important;
    }

    #game-type-selection .mode-options,
    #leader-settings .mode-options {
        margin-top: 2px;
        gap: 4px;
    }

    .setting-section {
        padding: 4px 10px !important;
        margin-bottom: 2px !important;
        border-radius: 12px !important;
    }

    .setting-title {
        font-size: 11px !important;
        margin-bottom: 2px !important;
    }

    .slider-value {
        font-size: 16px !important;
    }

    .game-slider {
        margin: 2px 0 !important;
    }

    /* Compact Cards at bottom of Personal Mode */
    #game-type-selection .mode-btn {
        padding: 4px !important;
        min-height: 60px;
    }

    #game-type-selection .mode-icon {
        font-size: 18px !important;
        margin-bottom: 0 !important;
    }

    #game-type-selection .mode-btn h3 {
        font-size: 13px !important;
    }

    #game-type-selection .mode-btn p {
        font-size: 10px !important;
        display: none;
        /* Hide descriptions on ultra short */
    }
}

/* 平板優化 */
@media (min-width: 600px) and (max-width: 900px) {
    #game-type-selection .mode-container {
        max-width: 550px;
        padding: 24px;
    }

    #game-type-selection .settings-panel {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    #game-type-selection .setting-section {
        margin-bottom: 0;
    }

    #game-type-selection .mode-options {
        margin-top: 20px;
    }

    #game-type-selection .mode-btn {
        padding: 20px;
    }
}

/* 大螢幕桌面優化 */
@media (min-width: 1024px) {
    #game-type-selection .mode-container {
        max-width: 700px;
        padding: 32px 40px;
    }

    #game-type-selection .settings-panel {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    #game-type-selection .mode-options {
        margin-top: 28px;
        gap: 20px;
    }

    #game-type-selection .mode-btn {
        padding: 28px 20px;
    }

    #game-type-selection .mode-icon {
        font-size: 48px;
    }

    #game-type-selection .mode-name {
        font-size: 20px;
    }

    #game-type-selection .mode-desc {
        font-size: 14px;
    }
}

/* ========================================
   首頁分享給朋友按鈕
======================================== */
.share-friends-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    margin-top: 20px;
}

.share-friends-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
}

.share-friends-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.share-friends-btn i {
    font-size: 18px;
}

/* 小螢幕優化 */
@media (max-width: 375px) {
    .share-friends-btn {
        padding: 12px 24px;
        font-size: 14px;
        margin-top: 16px;
    }
}

/* 首頁整體小螢幕優化 */
@media (max-width: 375px) {
    #mode-selection .mode-container {
        padding: 16px;
    }

    #mode-selection .app-logo {
        width: 60px;
        height: 60px;
    }

    #mode-selection .mode-title {
        font-size: 22px;
        margin-bottom: 4px;
    }

    #mode-selection .welcome-tagline {
        font-size: 13px;
        margin-bottom: 12px;
    }

    #mode-selection .game-intro {
        gap: 6px;
        margin-bottom: 12px;
    }

    #mode-selection .intro-item {
        font-size: 12px;
        padding: 6px 10px;
    }

    #mode-selection .quick-start-btn {
        padding: 12px 24px;
        font-size: 16px;
    }

    #mode-selection .mode-subtitle {
        font-size: 13px;
        margin: 12px 0 10px;
    }

    #mode-selection .mode-options {
        gap: 10px;
    }

    #mode-selection .mode-btn {
        padding: 14px 10px;
    }

    #mode-selection .mode-icon {
        font-size: 28px;
    }

    #mode-selection .mode-name {
        font-size: 14px;
    }

    #mode-selection .mode-desc {
        font-size: 11px;
    }

    #mode-selection .home-footer {
        font-size: 11px;
        margin-top: 12px;
    }
}

/* 矮螢幕優化 */
@media (max-height: 700px) {
    #mode-selection .mode-container {
        padding: 12px 16px;
    }

    #mode-selection .app-logo {
        width: 50px;
        height: 50px;
    }

    #mode-selection .mode-title {
        font-size: 20px;
    }

    #mode-selection .game-intro {
        gap: 4px;
        margin-bottom: 10px;
    }

    #mode-selection .intro-item {
        padding: 5px 8px;
        font-size: 11px;
    }

    #mode-selection .quick-start-btn {
        padding: 10px 20px;
        font-size: 15px;
    }

    #mode-selection .mode-subtitle {
        margin: 10px 0 8px;
    }

    #mode-selection .mode-btn {
        padding: 12px 8px;
    }

    #mode-selection .mode-icon {
        font-size: 24px;
    }

    .share-friends-btn {
        margin-top: 10px;
        padding: 8px 16px;
    }
}

/* ========================================
   桌面版 Footer 優化
======================================== */
@media (min-width: 768px) {
    .action-footer {
        max-width: 800px;
        padding: 16px 24px 20px;
        left: 50%;
        transform: translateX(-50%);
    }

    .main-action .button-group {
        gap: 16px;
        justify-content: center;
    }

    .action-btn.btn-large {
        padding: 16px 32px;
        font-size: 18px;
    }

    .footer-controls {
        gap: 16px;
        justify-content: center;
    }

    .footer-back-btn {
        flex: 0 0 auto;
        padding: 12px 24px;
    }

    .category-filter-toggle {
        flex: 0 0 auto !important;
        padding: 12px 24px;
    }
}

@media (min-width: 1024px) {
    .action-footer {
        max-width: 900px;
        padding: 20px 32px 24px;
    }

    .action-btn.btn-large {
        padding: 18px 40px;
        font-size: 20px;
        border-radius: 16px;
    }

    .footer-back-btn,
    .category-filter-toggle {
        padding: 14px 28px;
        font-size: 16px;
    }
}

/* Manual Meal Period Selector */
.meal-period-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 16px;
    border-radius: 20px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.meal-period-selector span {
    color: #555;
    font-size: 14px;
    font-weight: 500;
}

.period-toggle-btn {
    background: transparent;
    border: none;
    color: #4facfe;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 8px;
    transition: all 0.2s;
}

.period-toggle-btn:hover {
    background: rgba(79, 172, 254, 0.15);
    color: #00f2fe;
}

/* Period Selection Modal */
.period-selection-content {
    max-width: 320px;
    width: 90%;
}

.period-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 0;
}

.period-option-btn {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    padding: 12px;
    border-radius: 12px;
    font-size: 16px;
    color: #495057;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.period-option-btn:hover {
    background: #e7f5ff;
    border-color: #4facfe;
    color: #4facfe;
    transform: translateY(-2px);
}

.period-option-btn.active {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 10px rgba(79, 172, 254, 0.3);
}

.period-option-btn.active::after {
    content: '✓';
    font-weight: bold;
}

/* Optimized Pachinko Canvas for Mobile */
#pachinko-canvas {
    width: 100%;
    /* Mobile-first: Reduce base height to allow buttons to show */
    height: 480px;
    /* Use viewport height to ensure it fits: 100vh - header(60) - footer(120) - padding(40) approx */
    max-height: calc(100vh - 220px);
    background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
    border-radius: 12px;
    border: 2px solid #34495e;
    display: block;
    margin-bottom: 12px;
}

/* Modal Pachinko Settings Styles */
#modal-pachinko-settings .ball-count-btn {
    background: #f0f0f0;
    color: #333;
    border: 1px solid #ccc;
    box-shadow: none;
}

#modal-pachinko-settings .ball-count-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Ensure canvas is taller on desktop */
@media (min-width: 768px) {
    #pachinko-canvas {
        height: 600px;
        max-height: 80vh;
    }
}

/* ============================================================
   MODAL OVERRIDES FOR BALL SELECTOR (Light Background)
   ============================================================ */
#modal-pachinko-settings.ball-count-selector {
    background: #f0f0f0 !important;
    border: 1px solid #ddd !important;
    color: #333 !important;
}

#modal-pachinko-settings .ball-count-label {
    color: #333 !important;
}

#modal-pachinko-settings .ball-count-btn {
    background: #fff !important;
    color: #333 !important;
    border: 2px solid #ccc !important;
    width: 36px;
    height: 36px;
}

#modal-pachinko-settings .ball-count-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #fff !important;
    border-color: #667eea !important;
}

/* ============================================================
   AGGRESSIVE CANVAS HEIGHT FIX FOR MOBILE
   ============================================================ */
#pachinko-canvas {
    height: 400px !important;
    max-height: calc(100vh - 300px) !important;
}

/* Tablet */
@media (min-width: 768px) {
    #pachinko-canvas {
        height: 550px !important;
        max-height: calc(100vh - 250px) !important;
    }
}

/* ============================================================
   POWER METER STYLES
   ============================================================ */
.power-meter-container {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.power-meter-label {
    color: #f1c40f;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.power-meter-bar {
    flex: 1;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.power-meter-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #2ecc71, #f1c40f, #e74c3c);
    border-radius: 8px;
    transition: width 0.05s linear;
}

.power-meter-value {
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    min-width: 45px;
    text-align: right;
}

/* Balls remaining indicator */
.balls-remaining {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 16px;
    background: rgba(241, 196, 15, 0.2);
    border: 1px solid rgba(241, 196, 15, 0.5);
    border-radius: 20px;
    color: #f1c40f;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
}

.balls-remaining #balls-remaining-count {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
}

/* Power mode charging animation on button */
.drop-ball-btn.charging {
    animation: chargePulse 0.3s infinite;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
}

@keyframes chargePulse {

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

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

/* ============================================================
   PACHINKO LAUNCH TRACK VISUAL
   ============================================================ */
.pachinko-container::after {
    content: '';
    position: absolute;
    right: 0;
    top: 5%;
    bottom: 20%;
    width: 8px;
    background: linear-gradient(180deg,
            rgba(241, 196, 15, 0.8) 0%,
            rgba(230, 126, 34, 0.6) 50%,
            rgba(192, 57, 43, 0.4) 100%);
    border-radius: 4px 0 0 4px;
    box-shadow: -2px 0 10px rgba(241, 196, 15, 0.5);
    pointer-events: none;
    z-index: 5;
}

/* Launch track glow animation when charging */
.pachinko-container.charging::after {
    animation: launchTrackGlow 0.3s infinite alternate;
}

@keyframes launchTrackGlow {
    from {
        box-shadow: -2px 0 10px rgba(241, 196, 15, 0.5);
    }

    to {
        box-shadow: -4px 0 20px rgba(241, 196, 15, 1),
            -2px 0 30px rgba(230, 126, 34, 0.8);
    }
}

/* Power indicator on the track */
.power-track-indicator {
    position: absolute;
    right: 2px;
    width: 12px;
    height: 12px;
    background: #f1c40f;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(241, 196, 15, 1);
    transition: top 0.05s linear;
    z-index: 6;
    pointer-events: none;
}

/* PWA Install Button & Home Actions */
.home-action-buttons {
    display: flex;
    gap: 12px;
    width: 100%;
    margin-top: 15px;
}

.home-action-buttons .share-friends-btn,
.home-action-buttons .install-pwa-btn {
    flex: 1;
    margin-top: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.install-pwa-btn {
    background: linear-gradient(135deg, #FF9966 0%, #FF5E62 100%);
    color: white;
    border: none;
    padding: 14px 24px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255, 94, 98, 0.4);
    transition: all 0.3s ease;
}

.install-pwa-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 94, 98, 0.5);
}

.install-pwa-btn.hidden {
    display: none !important;
}

.install-pwa-btn:active {
    transform: scale(0.98);
}

/* Period Display Only Style */
.period-display-only {
    background: transparent;
    border: none;
    font-size: 16px;
    color: #555;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
}

/* ========================================
   New Footer Layout (Optimized)
   ======================================== */
.action-footer {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    background: #fff;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9000;
    gap: 12px;
    /* Fix for RWD "Run away" issue: Override legacy center alignment */
    transform: none;
    max-width: none;
}

/* Primary Action: Full Width on Mobile */
.footer-primary-action {
    width: 100%;
}

.footer-primary-action .action-btn.btn-large {
    width: 100%;
    height: 56px;
    font-size: 1.2rem;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
}

/* Secondary Actions: Row */
.footer-secondary-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.footer-icon-btn {
    border: none;
    background: #f1f3f5;
    color: #495057;
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    height: 50px;
    gap: 4px;
}

.footer-icon-btn i {
    font-size: 1.2rem;
    color: #868e96;
}

.footer-icon-btn:active {
    transform: scale(0.96);
    background: #e9ecef;
}

/* Specific colors for specific buttons */
.footer-icon-btn#btn-footer-back-personal i,
.footer-icon-btn#btn-footer-back i {
    color: #7f8c8d;
}

.footer-icon-btn#btn-direct-search i,
.footer-icon-btn#btn-pachinko-search i {
    color: #3498db;
}

.footer-icon-btn#category-filter-toggle {
    /* Special gradient for Settings button */
    background: #f8f0fc;
    color: #764ba2;
}

.footer-icon-btn#category-filter-toggle i {
    color: #764ba2;
}

/* ========================================
   New Header Game Mode Labels
   ======================================== */
.game-mode-label {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 700;
    background: rgba(255, 71, 87, 0.1);
    color: #ff4757;
    margin-left: 8px;
    vertical-align: middle;
    animation: fadeIn 0.3s ease-out;
}

@media (min-width: 768px) {
    .action-footer {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 16px 32px;
        max-width: 1200px;
        margin: 0 auto;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 24px 24px 0 0;
        bottom: 0;
        width: 100%;
    }

    .footer-primary-action {
        width: auto;
        flex: 0 0 300px;
    }

    .footer-secondary-actions {
        display: flex;
        gap: 16px;
    }

    .footer-icon-btn {
        flex-direction: row;
        height: 56px;
        padding: 0 20px;
        font-size: 1rem;
    }
}

/* ========================================
   GAME RESULT MODAL STYLES
   Unified styling for Classic & Pachinko results
======================================== */
.result-modal-content {
    max-width: 360px;
    text-align: center;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: resultModalIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes resultModalIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }

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

.result-modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 24px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.result-modal-header h3 {
    color: white;
    font-size: 26px;
    font-weight: 800;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.result-icon {
    font-size: 36px;
    animation: iconBounce 1s ease infinite;
}

@keyframes iconBounce {

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

    50% {
        transform: scale(1.15);
    }
}

.result-modal-body {
    padding: 28px 24px;
    background: white;
}

.result-subtitle {
    font-size: 16px;
    color: #666;
    margin-bottom: 16px;
}

.result-winner-name {
    font-size: 22px;
    font-weight: 800;
    color: #2d3436;
    margin-bottom: 28px;
    line-height: 1.4;
    padding: 16px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 16px;
    border: 2px solid #dee2e6;
    max-height: 120px;
    overflow-y: auto;
}

/* Single winner (classic mode) - larger display */
.result-winner-single {
    font-size: 32px;
    max-height: none;
    overflow: visible;
    background: linear-gradient(135deg, #fff3cd 0%, #ffeeba 100%);
    border-color: #ffc107;
    color: #856404;
}

.result-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.result-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    font-size: 18px;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(66, 133, 244, 0.4);
}

.result-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(66, 133, 244, 0.5);
}

.result-btn-primary:active {
    transform: scale(0.98);
}

.result-btn-secondary {
    width: 100%;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 600;
    color: #555;
    background: white;
    border: 2px solid #ddd;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.result-btn-secondary:hover {
    background: #f8f9fa;
    border-color: #667eea;
    color: #667eea;
}

/* Mobile responsiveness for result modals */
@media (max-width: 420px) {
    .result-modal-content {
        max-width: 90vw;
        margin: 16px;
    }

    .result-modal-header {
        padding: 20px 16px;
    }

    .result-modal-header h3 {
        font-size: 22px;
    }

    .result-icon {
        font-size: 30px;
    }

    .result-modal-body {
        padding: 20px 16px;
    }

    .result-winner-name {
        font-size: 18px;
        padding: 12px;
    }

    .result-winner-single {
        font-size: 26px;
    }

    .result-btn-primary {
        font-size: 16px;
        padding: 14px 20px;
    }
}

/* Total Shots Buttons (Traditional Mode) */
/* Total Shots Buttons (Traditional Mode) & Shot Count Buttons */
.total-shots-btn,
.shot-count-btn {
    flex: 1;
    min-width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: #e0e0e0;
    color: #555;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    margin: 0 2px;
}

.total-shots-btn:hover,
.shot-count-btn:hover {
    background: #d0d0d0;
    transform: translateY(-2px);
}

.total-shots-btn.active,
.shot-count-btn.active {
    background: #FF6B6B;
    /* Primary Color */
    color: white;
    box-shadow: 0 4px 10px rgba(255, 107, 107, 0.4);
    transform: scale(1.05);
}

/* ========================================
   RWD 優化：個人版選擇玩法頁面 - 確保一頁全顯
   ======================================== */

/* 基礎優化：所有裝置都適用 */
#game-type-selection .mode-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-height: calc(100dvh - 80px);
    /* 預留瀏覽器 UI 空間 */
    overflow: hidden;
}

#game-type-selection .mode-options {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
}

#game-type-selection .mode-btn {
    padding: 12px 6px !important;
    min-height: auto !important;
}

#game-type-selection .mode-icon {
    font-size: 24px !important;
    margin-bottom: 4px !important;
}

#game-type-selection .mode-name {
    font-size: 12px !important;
    margin-bottom: 2px !important;
}

#game-type-selection .mode-desc {
    font-size: 9px !important;
    line-height: 1.2 !important;
}

#game-type-selection .mode-footer-actions {
    margin-top: 10px !important;
}

/* 針對較高的手機 (如 iPhone 14 Plus, 926px 高度) */
@media (max-height: 950px) {
    #game-type-selection .settings-panel {
        margin-bottom: 12px !important;
    }

    #game-type-selection .setting-section {
        padding: 8px 12px !important;
        margin-bottom: 6px !important;
    }

    #game-type-selection .setting-title {
        font-size: 13px !important;
        margin-bottom: 4px !important;
    }
}

/* 針對中等高度手機 (如 iPhone 14, 844px) */
@media (max-height: 860px) {
    #game-type-selection .mode-container {
        padding: 12px 16px !important;
    }

    #game-type-selection .personal-mode-label {
        font-size: 14px !important;
        margin-bottom: 2px !important;
    }

    #game-type-selection .mode-title {
        font-size: 18px !important;
        margin-bottom: 2px !important;
    }

    #game-type-selection .mode-subtitle {
        font-size: 12px !important;
        margin-bottom: 8px !important;
    }

    #game-type-selection .settings-panel {
        margin-bottom: 8px !important;
    }

    #game-type-selection .slider-value {
        font-size: 20px !important;
    }

    #game-type-selection .price-btn {
        padding: 6px 8px !important;
        font-size: 12px !important;
    }
}

/* 針對較矮的手機 (如 iPhone SE, 667px) */
@media (max-height: 700px) {
    #game-type-selection .mode-container {
        padding: 8px 12px !important;
    }

    #game-type-selection .personal-mode-label {
        font-size: 12px !important;
    }

    #game-type-selection .mode-title {
        font-size: 16px !important;
    }

    #game-type-selection .mode-subtitle {
        font-size: 11px !important;
        margin-bottom: 6px !important;
    }

    #game-type-selection .setting-section {
        padding: 6px 10px !important;
        margin-bottom: 4px !important;
    }

    #game-type-selection .setting-title {
        font-size: 12px !important;
    }

    #game-type-selection .slider-value {
        font-size: 18px !important;
    }

    #game-type-selection .price-btn {
        padding: 4px 6px !important;
        font-size: 11px !important;
    }

    #game-type-selection .mode-btn {
        padding: 8px 4px !important;
    }

    #game-type-selection .mode-icon {
        font-size: 20px !important;
    }

    #game-type-selection .mode-name {
        font-size: 11px !important;
    }

    #game-type-selection .mode-desc {
        font-size: 8px !important;
    }

    #game-type-selection .back-btn {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }

    #game-type-selection .mode-footer-actions {
        margin-top: 6px !important;
    }
}

/* iPad 橫向與直向優化 */
@media (min-width: 768px) {
    #game-type-selection .mode-container {
        max-width: 500px;
    }

    #game-type-selection .mode-options {
        gap: 12px !important;
    }

    #game-type-selection .mode-btn {
        padding: 16px 10px !important;
    }

    #game-type-selection .mode-icon {
        font-size: 32px !important;
    }

    #game-type-selection .mode-name {
        font-size: 14px !important;
    }

    #game-type-selection .mode-desc {
        font-size: 11px !important;
    }
}

/* ========================================
   RWD 優化：團體模式設定頁面 (#leader-settings, #group-role-selection)
   ======================================== */

/* leader-settings 頁面 */
#leader-settings .mode-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-height: calc(100dvh - 80px);
    overflow: hidden;
}

#leader-settings .mode-options {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
}

#leader-settings .mode-btn {
    padding: 12px 8px !important;
    min-height: auto !important;
}

#leader-settings .mode-icon {
    font-size: 24px !important;
    margin-bottom: 4px !important;
}

#leader-settings .mode-name {
    font-size: 13px !important;
}

#leader-settings .mode-desc {
    font-size: 9px !important;
}

/* group-role-selection 頁面 */
#group-role-selection .mode-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-height: calc(100dvh - 80px);
    overflow: hidden;
}

/* 高度適配 - 較高的手機 */
@media (max-height: 950px) {
    #leader-settings .settings-panel {
        margin-bottom: 8px !important;
    }

    #leader-settings .setting-section {
        padding: 8px 12px !important;
        margin-bottom: 4px !important;
    }

    #leader-settings .rules-hint {
        padding: 8px 10px !important;
        margin-top: 6px !important;
    }

    #leader-settings .rules-hint h4 {
        font-size: 11px !important;
    }

    #leader-settings .rules-hint ol {
        font-size: 10px !important;
    }
}

/* 高度適配 - 中等高度手機 */
@media (max-height: 860px) {

    #leader-settings .mode-container,
    #group-role-selection .mode-container {
        padding: 12px 14px !important;
    }

    #leader-settings .mode-title,
    #group-role-selection .mode-title {
        font-size: 18px !important;
        margin-bottom: 4px !important;
    }

    #leader-settings .mode-subtitle,
    #group-role-selection .mode-subtitle {
        font-size: 12px !important;
        margin-bottom: 6px !important;
    }

    #leader-settings .setting-title {
        font-size: 12px !important;
    }

    #leader-settings .slider-value {
        font-size: 18px !important;
    }

    #leader-settings .price-btn {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }

    #leader-settings .action-buttons-row {
        margin-top: 8px !important;
        gap: 8px !important;
    }

    #group-role-selection .battle-name-card {
        padding: 10px !important;
        margin-bottom: 10px !important;
    }

    #group-role-selection .mode-options {
        gap: 8px !important;
    }

    #group-role-selection .mode-btn {
        padding: 12px 8px !important;
    }
}

/* 高度適配 - 較矮的手機 (iPhone SE) */
@media (max-height: 700px) {

    #leader-settings .mode-container,
    #group-role-selection .mode-container {
        padding: 8px 10px !important;
    }

    #leader-settings .team-mode-label {
        font-size: 14px !important;
        margin-top: 6px !important;
    }

    #leader-settings .mode-title,
    #group-role-selection .mode-title {
        font-size: 16px !important;
        margin: 4px 0 !important;
    }

    #leader-settings .mode-subtitle,
    #group-role-selection .mode-subtitle {
        font-size: 11px !important;
        margin-bottom: 4px !important;
    }

    #leader-settings .setting-section {
        padding: 6px 10px !important;
        margin-bottom: 3px !important;
    }

    #leader-settings .setting-title {
        font-size: 11px !important;
        margin-bottom: 3px !important;
    }

    #leader-settings .slider-value {
        font-size: 16px !important;
    }

    #leader-settings .price-btn {
        padding: 4px 6px !important;
        font-size: 10px !important;
    }

    #leader-settings .mode-btn {
        padding: 8px 6px !important;
    }

    #leader-settings .mode-icon {
        font-size: 20px !important;
    }

    #leader-settings .mode-name {
        font-size: 11px !important;
    }

    #leader-settings .mode-desc {
        font-size: 8px !important;
    }

    #leader-settings .rules-hint {
        padding: 6px 8px !important;
        margin-top: 4px !important;
    }

    #leader-settings .rules-hint h4 {
        font-size: 10px !important;
        margin-bottom: 3px !important;
    }

    #leader-settings .rules-hint ol {
        font-size: 9px !important;
        padding-left: 14px !important;
    }

    #leader-settings .action-buttons-row {
        margin-top: 6px !important;
        gap: 6px !important;
    }

    #leader-settings .back-btn {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }

    #leader-settings .primary-btn {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }

    #group-role-selection .battle-name-card {
        padding: 8px !important;
        margin-bottom: 8px !important;
    }

    #group-role-selection .mode-btn {
        padding: 10px 6px !important;
    }

    #group-role-selection .mode-icon {
        font-size: 22px !important;
    }

    #group-role-selection .mode-name {
        font-size: 12px !important;
    }

    #group-role-selection .mode-desc {
        font-size: 9px !important;
    }

    #group-role-selection .mode-footer-actions {
        margin-top: 6px !important;
    }
}

/* ========================================
   RWD 優化：團體模式設定彈窗 (.category-filter-modal)
   確保底部按鈕在所有裝置上可見
   ======================================== */

/* 讓 modal-panel 使用 dvh 並預留瀏覽器 UI 空間 */
.category-filter-modal .modal-panel {
    max-height: calc(100dvh - 100px);
    /* 預留瀏覽器 UI + 上下安全區 */
}

/* 壓縮 modal-body 內容間距 */
.category-filter-modal .modal-body {
    padding: 12px 16px !important;
}

/* 確保底部按鈕容器緊貼底部且不被切掉 */
.category-filter-modal .modal-footer,
.category-filter-modal .action-buttons-row,
.category-filter-modal #modal-personal-actions,
.category-filter-modal #modal-group-actions,
.category-filter-modal #modal-elimination-actions {
    flex-shrink: 0;
    padding: 12px 16px !important;
}

/* 針對較高的手機 (iPhone 14 Plus, 926px) */
@media (max-height: 950px) {
    .category-filter-modal .modal-panel {
        max-height: calc(100dvh - 120px);
    }

    .category-filter-modal .modal-header {
        padding: 16px 16px 12px !important;
    }

    .category-filter-modal .modal-header h3 {
        font-size: 17px !important;
    }

    .category-filter-modal .modal-body {
        padding: 10px 14px !important;
    }

    /* 團體模式專屬區塊 */
    .category-filter-modal .group-info-display {
        padding: 12px !important;
        margin-bottom: 10px !important;
    }

    .category-filter-modal .group-info-display h4 {
        font-size: 14px !important;
    }

    .category-filter-modal .room-code-display {
        font-size: 22px !important;
        margin: 6px 0 !important;
    }

    .category-filter-modal .room-actions {
        gap: 8px !important;
        margin-top: 8px !important;
    }

    .category-filter-modal .room-actions button {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    /* 倒數時間選擇區 */
    .category-filter-modal .countdown-selection {
        margin-bottom: 8px !important;
    }

    .category-filter-modal .countdown-selection h4 {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }

    .category-filter-modal .countdown-options {
        gap: 6px !important;
    }

    .category-filter-modal .countdown-btn {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }

    /* 分類標籤區 */
    .category-filter-modal .category-toggles {
        gap: 6px !important;
        margin-top: 6px !important;
    }

    .category-filter-modal .category-toggle {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }

    /* 底部按鈕區 */
    .category-filter-modal .action-buttons-row,
    .category-filter-modal #modal-group-actions,
    .category-filter-modal #modal-elimination-actions {
        padding: 10px 14px !important;
        gap: 8px !important;
    }

    .category-filter-modal .back-btn {
        padding: 8px 14px !important;
        font-size: 12px !important;
    }

    .category-filter-modal .primary-btn {
        padding: 12px 16px !important;
        font-size: 14px !important;
    }
}

/* 針對中等高度手機 (iPhone 14, 844px) */
@media (max-height: 860px) {
    .category-filter-modal .modal-panel {
        max-height: calc(100dvh - 80px);
    }

    .category-filter-modal .modal-header {
        padding: 12px 14px 10px !important;
    }

    .category-filter-modal .modal-header h3 {
        font-size: 15px !important;
    }

    .category-filter-modal .group-info-display {
        padding: 10px !important;
        margin-bottom: 8px !important;
    }

    .category-filter-modal .room-code-display {
        font-size: 20px !important;
    }

    .category-filter-modal .countdown-btn {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }

    .category-filter-modal .category-toggle {
        padding: 5px 10px !important;
        font-size: 11px !important;
    }
}

/* 針對較矮的手機 (iPhone SE, 667px) */
@media (max-height: 700px) {
    .category-filter-modal .modal-panel {
        max-height: calc(100dvh - 60px);
    }

    .category-filter-modal .modal-header {
        padding: 10px 12px 8px !important;
    }

    .category-filter-modal .modal-header h3 {
        font-size: 14px !important;
    }

    .category-filter-modal .modal-body {
        padding: 8px 12px !important;
    }

    .category-filter-modal .group-info-display {
        padding: 8px !important;
        margin-bottom: 6px !important;
    }

    .category-filter-modal .group-info-display h4 {
        font-size: 12px !important;
    }

    .category-filter-modal .room-code-display {
        font-size: 18px !important;
        margin: 4px 0 !important;
    }

    .category-filter-modal .room-actions button {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }

    .category-filter-modal .countdown-selection h4 {
        font-size: 12px !important;
        margin-bottom: 4px !important;
    }

    .category-filter-modal .countdown-btn {
        padding: 5px 10px !important;
        font-size: 11px !important;
    }

    .category-filter-modal .category-toggle {
        padding: 4px 8px !important;
        font-size: 10px !important;
    }

    .category-filter-modal .action-buttons-row,
    .category-filter-modal #modal-group-actions,
    .category-filter-modal #modal-elimination-actions {
        padding: 8px 12px !important;
        gap: 6px !important;
    }

    .category-filter-modal .back-btn {
        padding: 6px 12px !important;
        font-size: 11px !important;
    }

    .category-filter-modal .primary-btn {
        padding: 10px 14px !important;
        font-size: 13px !important;
    }
}

/* ========================================
   結果彈窗關閉按鈕樣式
   ======================================== */

.result-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.result-modal-close i {
    font-size: 16px;
    color: #666;
}

.result-modal-close:hover {
    background: rgba(0, 0, 0, 0.2);
}

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

/* 確保 result-modal-content 相對定位 */
.result-modal-content {
    position: relative;
}

/* ========================================
   統一結果彈窗按鈕樣式 (紫色漸層風格)
   ======================================== */

.result-actions-unified {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    align-items: center;
    width: 100%;
}

/* 按鈕橫向排列容器 */
.result-actions-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.result-actions-row .primary-btn,
.result-actions-row .secondary-btn-purple {
    flex: 1;
    max-width: 150px;
    min-width: 120px;
}

.result-actions-row .close-btn-purple,
.result-actions-row .feedback-btn-result {
    flex: 1;
    max-width: 160px;
}

/* 再玩一次 / 再轉一次按鈕 */
.secondary-btn-purple {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s;
    min-width: 160px;
}

.secondary-btn-purple:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: #fff;
}

/* 關閉按鈕 - 優化為明顯的按鈕樣式 */
.close-btn-purple {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 100px;
}

.close-btn-purple:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
    transform: translateY(-1px);
}

.close-btn-purple:active {
    transform: translateY(0);
}

/* 移除舊的 X 關閉按鈕樣式 */
.result-modal-close {
    display: none !important;
}

/* 版本號顯示樣式 */
.app-version {
    font-size: 10px;
    color: rgba(136, 136, 136, 0.7);
    text-align: center;
    margin-top: 8px;
    font-style: italic;
}

/* 結果彈窗內的給我建議喔按鈕 */
.feedback-btn-result {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    min-width: 140px;
}

.feedback-btn-result:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
    transform: scale(1.02);
}

.feedback-btn-result i {
    font-size: 16px;
}