:root { 
            --bg-app: #f8fafc; 
            --brand: #dc2626; 
            --text-main: #0f172a; 
            --text-light: #64748b; 
            --gold: #d97706; 
            --sidebar-width: 150px; 
        }
        * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; }
        
        body { 
            margin: 0; 
            background: linear-gradient(to right, #7b4397, #dc2430); 
            font-family: 'Poppins', sans-serif; 
            color: var(--text-main); 
            width: 100vw; 
            height: 100dvh; 
            overflow: hidden; 
            display: flex; 
            justify-content: center; 
            align-items: center;
        }
        
        .app-container { 
            width: 100%; 
            height: 100%; 
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            display: flex; 
            flex-direction: column; 
            position: relative; 
            max-width: 400px;
            border-radius: 20px;
            box-shadow: 0 0 20px rgba(0,0,0,0.2);
            overflow: hidden;
        }
        .screen { position: absolute; inset: 0; background: transparent; z-index: 10; display: flex; flex-direction: column; transition: transform 0.3s; }
        .hidden { display: none !important; }

        /* LOADING */
        #screen-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'Orbitron'; gap: 15px; color: white; }
        .spinner { width: 40px; height: 40px; border: 4px solid rgba(255,255,255,0.3); border-top: 4px solid white; border-radius: 50%; animation: spin 1s linear infinite; }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

        /* UI */
        .auth-content { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 30px; }
        
        .auth-content h1 {
            color: white;
            text-align: center;
            font-family: 'Orbitron';
            font-size: 50px;
            text-shadow: 0 0 10px rgba(0,0,0,0.5);
        }

        .input-field { 
            width: 100%; 
            padding: 16px; 
            background: rgba(255,255,255,0.2); 
            border: 1px solid rgba(255,255,255,0.3); 
            border-radius: 12px; 
            color: white; 
            margin-bottom: 15px; 
            font-size: 16px; 
            outline: none;
        }
        .input-field::placeholder {
            color: rgba(255,255,255,0.7);
        }
        .input-field:focus {
            box-shadow: 0 0 10px rgba(255,255,255,0.5);
        }

        .btn-large { 
            width: 100%; 
            padding: 18px; 
            background: #dc2626; 
            color: white; 
            border: none; 
            border-radius: 12px; 
            font-family: 'Orbitron'; 
            cursor: pointer; 
            font-size: 16px; 
            font-weight: bold; 
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        .btn-toggle-auth {
            background: none;
            border: none;
            color: rgba(255,255,255,0.7);
            margin-top: 20px;
            cursor: pointer;
        }

        .auth-msg {
            text-align: center;
            color: red;
            margin-top: 15px;
        }

        .dash-header { padding: 15px; display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.2); }
        
        .dash-username {
            color: white;
            font-family: 'Orbitron';
            font-weight: bold;
        }

        .btn-logout {
            color: white;
            background: none;
            border: 1px solid rgba(255,255,255,0.2);
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .btn-icon {
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
        }

        .balance-card { margin: 15px; padding: 20px; background: rgba(255,255,255,0.1); border-radius: 20px; text-align: center; border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); color: white; }
        
        .balance-label {
            font-size: 10px;
            color: white;
            font-weight: bold;
        }

        .balance-amount {
            font-family: 'Orbitron';
            font-size: 36px;
            margin: 5px 0;
        }

        .balance-currency {
            font-size: 16px;
            color: white;
        }

        .wallet-actions { display: flex; gap: 10px; justify-content: center; margin-top: 15px; }
        .btn-wallet { flex: 1; padding: 10px; border-radius: 8px; font-weight: bold; cursor: pointer; border: 1px solid rgba(255,255,255,0.2); font-size: 12px; background: rgba(255,255,255,0.1); color: white; }
        .btn-dep-act { background: var(--brand); color: white; border: none; }
        .play-button-container {
            display: flex;
            justify-content: center;
            margin-top: 15px;
        }
        .dash-grid {
    display: flex;
    justify-content: center;
    padding: 15px;
}
        .dash-btn { padding: 20px; border-radius: 12px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1); color: white; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
        .btn-play { background: var(--brand); color: white; font-size: 18px; border: none; font-weight: bold; padding: 15px 30px; border-radius: 25px; cursor: pointer; box-shadow: 0 4px 10px rgba(220, 38, 38, 0.3); }

        #screen-dashboard {
            overflow-y: auto;
        }
        .recent-history h3 {
            color: white;
            font-family: 'Orbitron';
        }
        .history-list {
        }
        .hist-card {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(255,255,255,0.05);
            padding: 10px;
            border-radius: 8px;
            margin-bottom: 10px;
            border: 1px solid rgba(255,255,255,0.1);
        }

        /* GAME LAYOUT */
        .game-layout { display: flex; flex-direction: column; height: 100%; width: 100%; overflow: hidden; background: transparent; }
        
        .top-stats { 
            height: 90px; background: rgba(255,255,255,0.1); 
            display: grid; grid-template-columns: 80px auto 140px; 
            align-items: center; padding: 0 15px; 
            border-bottom: 1px solid rgba(255,255,255,0.2); flex-shrink: 0; z-index: 30;
        }
        
        .btn-home-game {
            background: rgba(255,255,255,0.1); color: white; border: 1px solid rgba(255,255,255,0.2);
            height: 40px; border-radius: 8px; font-family: 'Orbitron';
            font-size: 12px; font-weight: bold; cursor: pointer; 
            display: flex; align-items: center; justify-content: center;
        }

        .stats-group { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
        .stat-row { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: bold; color: white; }
        .stat-val { font-family: 'Orbitron'; font-size: 14px; color: white; min-width: 40px; text-align: right; }
        .gold-text { color: var(--gold); font-size: 16px; }

        .ball-display-container { display: flex; justify-content: center; align-items: center; }
        .ball-drop { 
            width: 80px; height: 80px; border-radius: 50%; 
            display: flex; align-items: center; justify-content: center; 
            font-family: 'Orbitron'; font-weight: bold; font-size: 32px; color: white; 
            box-shadow: inset -5px -5px 15px rgba(0,0,0,0.2), 0 5px 15px rgba(0,0,0,0.2); 
            border: 4px solid white; 
            background: radial-gradient(circle at 30% 30%, #64748b, #0f172a); z-index: 50;
        }
        .anim-drop { animation: dropBounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        @keyframes dropBounce { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

        .middle-content { flex: 1; display: flex; flex-direction: row; overflow: hidden; position: relative; }
        .left-sidebar { 
            width: var(--sidebar-width); background: rgba(255,255,255,0.1); border-right: 1px solid rgba(255,255,255,0.2);
            display: flex; flex-direction: column; padding: 10px 5px; 
            overflow-y: auto; flex-shrink: 0; z-index: 20; 
        }
        .ball-tray { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; align-content: start; }
        
        .mini-ball { 
            width: 42px; height: 42px; border-radius: 50%; 
            display: flex; flex-direction: column; align-items: center; justify-content: center; 
            font-family: 'Orbitron'; color: white; border: 2px solid rgba(255,255,255,0.5); 
            background: #cbd5e1; line-height: 0.9; box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .mb-letter { font-size: 8px; opacity: 0.9; margin-bottom: 1px; }
        .mb-num { font-size: 14px; font-weight: bold; }

        .game-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px; overflow: hidden; background: transparent; gap: 8px; }

        .bottom-bar { 
            height: 70px; background: rgba(255,255,255,0.1); border-top: 1px solid rgba(255,255,255,0.2);
            display: flex; padding: 10px; gap: 10px; flex-shrink: 0; 
            padding-bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 30;
        }
        .btn { flex: 1; border: none; border-radius: 12px; font-family: 'Orbitron'; font-size: 14px; font-weight: bold; color: white; cursor: pointer; transition: transform 0.1s;}
        .btn:active { transform: scale(0.98); }
        .btn-add { background: rgba(255,255,255,0.1); color: white; border: 1px solid rgba(255,255,255,0.2); } 
        .btn-claim { background: var(--brand); color: white; box-shadow: 0 4px 10px rgba(220, 38, 38, 0.3); }

        /* CARDS */
        .layout-1 .bingo-card { width: 100%; max-width: 350px; }
        .layout-2 .bingo-card { width: 100%; max-width: 350px; }
        .layout-3 .bingo-card { width: 90%; max-width: 350px; }
        .layout-4 { flex-direction: row; flex-wrap: wrap; align-content: center; }
        .layout-4 .bingo-card { width: 48%; }

        .bingo-card {
            background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 12px; padding: 4px;
            display: flex; flex-direction: column; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            min-height: 0; min-width: 0;
            color: white;
            aspect-ratio: 5/6;
        }
        .card-head { height: 16px; font-size: 10px; color: white; text-align: center; font-weight: bold; text-transform: uppercase; display: flex; align-items: center; justify-content: center; }
        .card-grid { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: 1fr repeat(5, 1fr); gap: 3px; min-height: 0; }
        
        .header-cell {
            display: flex; align-items: center; justify-content: center;
            font-family: 'Orbitron'; font-weight: 900; font-size: clamp(8px, 2vh, 18px);
            background: rgba(255,255,255,0.1); border-radius: 4px; color: white; border: 1px solid rgba(255,255,255,0.2);
        }
        .n-cell {
            display: flex; align-items: center; justify-content: center;
            background: rgba(255,255,255,0.1); border-radius: 4px;
            font-family: 'Poppins'; font-weight: 700; font-size: clamp(10px, 2.5vh, 20px); 
            color: white; cursor: pointer; border: 1px solid rgba(255,255,255,0.2);
            box-shadow: 0 2px 0 rgba(0,0,0,0.2);
        }
        .n-cell:active { transform: translateY(2px); box-shadow: none; }
        .n-cell.marked { background: var(--brand); color: white; border-color: #b91c1c; box-shadow: inset 0 2px 5px rgba(0,0,0,0.2); }
        .n-cell.free { color: var(--gold); background: rgba(217, 119, 6, 0.2); border-color: var(--gold); }

        /* PICKER */
        .overlay { background: rgba(0,0,0,0.8); padding: 20px; display: flex; flex-direction: column; position: absolute; inset: 0; z-index: 1000; color: white !important; }
        .picker-header { display: flex; justify-content: space-between; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 10px; }
        .picker-title { margin: 0; font-family: 'Orbitron'; color: white; font-size: 20px; }
        .grid-100 { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; overflow-y: auto; flex:1; align-content: start; }
        .chip { aspect-ratio: 1; background: rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; font-size:10px; border-radius:4px; color: white; border: 1px solid rgba(255,255,255,0.2); cursor: pointer; }
        .chip.selected { background: var(--brand); color: white; font-weight: bold; border-color: var(--brand); }
        .chip.owned { background: rgba(255,255,255,0.2); color: #aaa; opacity: 0.5; }
        .chip.taken { background: rgba(0,0,0,0.2); opacity: 0.3; pointer-events: none; }
        .picker-footer { height: 60px; margin-top: 10px; display: flex; gap: 10px; flex-shrink: 0; color: white; }

        #winner-screen { display: none; flex-direction: column; align-items: center; justify-content: center; background: rgba(220, 38, 38, 0.95); text-align: center; z-index: 2000; padding: 40px; }
        .win-btn { background: white; color: var(--brand); font-family: 'Orbitron'; padding: 15px; border: none; border-radius: 12px; font-weight: bold; cursor: pointer; margin-top: 20px; }
        
#status-bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    z-index: 9999;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    display: none; /* Hidden by default */
    white-space: nowrap;
}

#custom-alert-overlay {
    justify-content: center;
    align-items: center;
}

#custom-alert-box {
    background: rgba(0,0,0,0.7);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 30px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    max-width: 90vw;
    animation: zoomIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#custom-alert-message {
    margin: 0 0 25px 0;
    color: white;
    font-size: 16px;
    font-weight: 500;
}

#custom-alert-box button {
    background: var(--brand); /* Use brand color for visibility */
    color: white; /* Ensure text is white */
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 20px; /* Add some margin */
}

#screen-wallet .modal-body {
    padding: 20px;
}
#picker-balance,
#picker-balance * {
  color: white !important;
}