:root {
    --symbol-bell-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.22"><defs><linearGradient id="bg" x1="0%25" y1="0%25" x2="0%25" y2="100%25"><stop offset="0%25" style="stop-color:%23FFE5A6"/><stop offset="100%25" style="stop-color:%23FFD700"/></linearGradient></defs><path d="M 20 40 Q 20 20 50 15 Q 80 20 80 40 L 75 65 Q 75 75 65 78 L 35 78 Q 25 75 25 65 Z" fill="url(%23bg)" stroke="%23CC9900" stroke-width="1.5"/><path d="M 50 78 L 50 88 Q 50 92 46 92 L 54 92 Q 50 92 50 88 Z" fill="%23CC9900"/><ellipse cx="50" cy="30" rx="8" ry="6" fill="%23FFFFFF" opacity="0.4"/></svg>');

    --symbol-cherry-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.22"><defs><radialGradient id="cg" cx="35%25" cy="35%25"><stop offset="0%25" style="stop-color:%23FF9999"/><stop offset="100%25" style="stop-color:%23CC3333"/></radialGradient></defs><path d="M 35 35 L 40 20 L 50 10 L 60 20 L 65 35" stroke="%23228B22" stroke-width="2" fill="none"/><circle cx="35" cy="55" r="18" fill="url(%23cg)"/><circle cx="65" cy="50" r="16" fill="url(%23cg)"/><ellipse cx="30" cy="48" rx="5" ry="7" fill="%23FFFFFF" opacity="0.3"/><ellipse cx="60" cy="43" rx="4" ry="6" fill="%23FFFFFF" opacity="0.3"/></svg>');

    --symbol-grape-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.22"><defs><radialGradient id="gg" cx="35%25" cy="35%25"><stop offset="0%25" style="stop-color:%23C77DDB"/><stop offset="100%25" style="stop-color:%236C3483"/></radialGradient></defs><path d="M 50 10 L 50 30" stroke="%23228B22" stroke-width="2.5"/><circle cx="40" cy="38" r="12" fill="url(%23gg)"/><circle cx="60" cy="38" r="12" fill="url(%23gg)"/><circle cx="35" cy="55" r="11" fill="url(%23gg)"/><circle cx="65" cy="55" r="11" fill="url(%23gg)"/><circle cx="50" cy="68" r="10" fill="url(%23gg)"/><circle cx="50" cy="50" r="10" fill="url(%23gg)"/><circle cx="45" cy="42" r="3" fill="%23FFFFFF" opacity="0.4"/></svg>');

    --symbol-lemon-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.22"><defs><radialGradient id="lg" cx="40%25" cy="40%25"><stop offset="0%25" style="stop-color:%23FFEB99"/><stop offset="100%25" style="stop-color:%23FFD700"/></radialGradient></defs><ellipse cx="50" cy="55" rx="25" ry="28" fill="url(%23lg)" stroke="%23CCB300" stroke-width="1.5"/><path d="M 65 40 Q 75 35 80 38 Q 78 45 70 48 Z" fill="%23228B22"/><path d="M 68 43 Q 72 42 74 44" stroke="%2390EE90" stroke-width="1" fill="none"/><ellipse cx="40" cy="45" rx="5" ry="8" fill="%23FFFFFF" opacity="0.3"/></svg>');
}

/* =============================================
   Lobby Styles — Game Platform Hall
   ============================================= */

/* ── View transitions ─────────────────────── */
.view-hidden {
    display: none !important;
}

.view-active {
    animation: viewFadeIn 300ms ease forwards;
}

@keyframes viewFadeIn {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Lobby Container ──────────────────────── */
#lobby-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    font-family: 'Segoe UI', 'Noto Sans TC', Arial, sans-serif;
    color: var(--text-primary);
}

/* ── Header ───────────────────────────────── */
.lobby-header {
    background: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-amber) 100%);
    color: #fff;
    text-align: center;
    padding: 28px 16px 20px;
    box-shadow: 0 4px 16px rgba(0, 119, 204, 0.25);
    position: relative;
}

.lobby-header h1 {
    margin: 0;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: 3px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.lobby-header .lobby-tagline {
    margin: 6px 0 0;
    font-size: 14px;
    opacity: 0.9;
    letter-spacing: 1px;
}

/* ── Balance Bar ──────────────────────────── */
.lobby-balance-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--bg-tertiary);
}

.lobby-balance-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

#lobby-balance-amount {
    font-size: 24px;
    font-weight: 800;
    color: var(--accent-gold);
}

/* ── Main Content Area ────────────────────── */
.lobby-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 16px;
}

.lobby-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 2px;
    margin: 0 0 20px;
    text-transform: uppercase;
}

/* ── Game Grid ────────────────────────────── */
#games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    width: 100%;
    max-width: 960px;
    justify-items: center;
}

/* ── Game Card ────────────────────────────── */
.game-card {
    width: 100%;
    max-width: 320px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 77, 153, 0.1);
    display: flex;
    flex-direction: column;
    transition: transform 200ms ease, box-shadow 200ms ease;
    cursor: pointer;
}

.game-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 119, 204, 0.2);
}

.game-card:active {
    transform: translateY(-2px);
}

/* Card icon area */
.game-card-icon {
    height: 160px;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 3px solid var(--accent-gold);
}

.game-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
    box-sizing: border-box;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}

/* Card body */
.game-card-body {
    padding: 16px 18px 12px;
    flex: 1;
    position: relative;
    z-index: 0;
}

.game-card-body::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        /* Scattered symbols — 3 rows, filling the entire card */
        var(--symbol-bell-svg) no-repeat 2% 3%,
        var(--symbol-cherry-svg) no-repeat 55% 0%,
        var(--symbol-lemon-svg) no-repeat 92% 8%,
        var(--symbol-grape-svg) no-repeat 8% 42%,
        var(--symbol-cherry-svg) no-repeat 48% 38%,
        var(--symbol-bell-svg) no-repeat 88% 48%,
        var(--symbol-lemon-svg) no-repeat 0% 82%,
        var(--symbol-grape-svg) no-repeat 42% 78%,
        var(--symbol-cherry-svg) no-repeat 82% 88%,
        /* Soft blue-tinted background instead of plain white */
        linear-gradient(135deg, rgba(224, 240, 255, 0.6) 0%, rgba(200, 225, 255, 0.5) 50%, rgba(224, 240, 255, 0.55) 100%),
        #f0f7ff;

    background-size:
        72px, 62px, 55px,
        65px, 58px, 68px,
        60px, 70px, 55px,
        100% 100%, 100% 100%;
}

.game-card-body h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.game-card-subtitle {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.game-card-desc {
    margin: 10px 0 12px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.rtp-badge {
    display: inline-block;
    background: var(--accent-gold);
    color: #fff;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}

/* Play button */
.btn-play {
    display: block;
    width: calc(100% - 32px);
    margin: 0 16px 16px;
    padding: 14px 0;
    background: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-amber) 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    transition: opacity 150ms, transform 150ms;
}

.btn-play:hover {
    opacity: 0.92;
    transform: scale(1.02);
}

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

/* ── Footer ───────────────────────────────── */
.lobby-footer {
    padding: 14px 20px;
    background: rgba(0,0,0,0.04);
    border-top: 1px solid var(--bg-tertiary);
    display: flex;
    justify-content: center;
    gap: 12px;
}

.lobby-footer button {
    padding: 7px 14px;
    background: #fff;
    border: 1px solid var(--accent-gold);
    color: var(--accent-gold);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 150ms, color 150ms;
}

.lobby-footer button:hover {
    background: var(--accent-gold);
    color: #fff;
}

/* ── Return-to-Lobby Button (inside game) ── */
#btn-return-lobby {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 100;
    padding: 6px 14px;
    background: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-amber) 100%);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 200ms;
    letter-spacing: 0.5px;
}

#btn-return-lobby:hover {
    opacity: 0.88;
}

#btn-return-lobby:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── RWD ──────────────────────────────────── */

/* Tablet */
@media (max-width: 768px) {
    .lobby-header h1 { font-size: 26px; }
    .lobby-header { padding: 22px 14px 16px; }
    #lobby-balance-amount { font-size: 22px; }
    .lobby-main { padding: 24px 12px; }
    #games-grid { gap: 18px; }
    .game-card-icon { height: 140px; }
    .game-card-icon img { max-width: unset; max-height: unset; }

    .game-card-body::before {
        background-size:
            62px, 54px, 48px,
            56px, 50px, 58px,
            52px, 60px, 48px,
            100% 100%, 100% 100%;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .lobby-header h1 { font-size: 22px; letter-spacing: 2px; }
    .lobby-header .lobby-tagline { font-size: 12px; }
    .lobby-balance-bar { padding: 10px 14px; }
    #lobby-balance-amount { font-size: 20px; }
    .lobby-main { padding: 18px 10px; }
    #games-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0 6px;
    }
    .game-card { max-width: 100%; }
    .game-card-icon { height: 120px; }
    .game-card-icon img { max-width: unset; max-height: unset; padding: 6px; }
    .game-card-body h3 { font-size: 18px; }
    .btn-play { padding: 12px 0; font-size: 14px; }
    #btn-return-lobby { font-size: 12px; padding: 5px 10px; }

    .game-card-body::before {
        background-size:
            55px, 48px, 42px,
            50px, 44px, 52px,
            46px, 54px, 42px,
            100% 100%, 100% 100%;
    }
}

/* ── Low Balance Popup ────────────────────── */
.lb-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 25, 41, 0.72);
    backdrop-filter: blur(4px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    touch-action: manipulation;         /* Fix: iOS double-tap zoom prevention */
}

.lb-popup {
    background: #fff;
    border-radius: 18px;
    padding: 36px 32px 28px;
    max-width: 380px;
    width: 100%;
    box-shadow: 0 16px 48px rgba(0, 77, 153, 0.28);
    text-align: center;
    position: relative;
}

.lb-popup.lb-pop-in {
    animation: lbPopIn 380ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes lbPopIn {
    from { opacity: 0; transform: scale(0.7); }
    to   { opacity: 1; transform: scale(1); }
}

.lb-title {
    margin: 0 0 12px;
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
}

.lb-msg {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.lb-current {
    margin: 0 0 24px;
    font-size: 14px;
    color: var(--text-secondary);
}

#lb-current-amount {
    font-size: 20px;
    font-weight: 800;
    color: var(--accent-gold);
}

.lb-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.lb-btn {
    flex: 1;
    max-width: 140px;
    padding: 13px 0;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 150ms, transform 150ms;
    letter-spacing: 1px;
}

.lb-btn:hover  { opacity: 0.88; transform: scale(1.03); }
.lb-btn:active { transform: scale(0.97); }
.lb-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.lb-btn-yes {
    background: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-amber) 100%);
    color: #fff;
}

.lb-btn-no {
    background: #fff;
    border: 2px solid var(--accent-gold);
    color: var(--accent-gold);
}

/* Success state */
.lb-success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-amber) 100%);
    color: #fff;
    font-size: 32px;
    line-height: 64px;
    margin: 0 auto 16px;
    box-shadow: 0 4px 16px rgba(0, 153, 255, 0.35);
}

/* RWD */
@media (max-width: 480px) {
    .lb-popup { padding: 28px 20px 22px; }
    .lb-title { font-size: 19px; }
    .lb-msg { font-size: 14px; }
    .lb-btn { padding: 12px 0; font-size: 15px; }
}

@media (max-width: 360px) {
    .lb-popup { padding: 24px 16px 18px; border-radius: 14px; }
    .lb-buttons { gap: 8px; }
}

/* Small mobile */
@media (max-width: 360px) {
    .lobby-header h1 { font-size: 18px; }
    .game-card-desc { font-size: 11px; }
    .game-card-body h3 { font-size: 16px; }

    .game-card-body::before {
        background-size:
            48px, 42px, 36px,
            44px, 38px, 46px,
            40px, 48px, 36px,
            100% 100%, 100% 100%;
    }
}