@font-face {
    font-family: digital;
    src: url('fonts/digital-7.ttf');

    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Defines how the font is loaded/displayed */
}
        :root {
            --bg-body: #0a0c10;
            --bg-card: #151921;
            --accent-blue: #00d2ff;
            --text-main: #ffffff;
            --text-dim: #8e99a8;
            --board-empty: #1c232e;
            --board-active: #00d2ff;
            --win-green: #22c55e;
            --lose-red: #ef4444;
            --btn-red: #ff4757;
            --btn-gold: #facc15;
            --modal-overlay: rgba(0, 0, 0, 0.9);
            
            --color-b: #4ade80;
            --color-i: #facc15;
            --color-n: #f87171;
            --color-g: #60a5fa;
            --color-o: #c084fc;
        }

        * { box-sizing: border-box; }
        body {
			
            background-color: var(--bg-body);
            color: var(--text-main);
            margin: 0;
            padding: 0;
            min-height: 100vh;
        }

        .top-nav {
            background: #11151c;
            height: 50px;
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
            border-bottom: 1px solid #232a35;
            position: sticky;
            z-index: 1000;
        }
		
        .pattern-preview-container {
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid #374151;
            border-radius: 8px;
            padding: 10px;
            margin-top: 5px;
            text-align: center;
        }

        .preview-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 3px;
            width: 100px;
            margin: 4px auto;
        }

        .preview-cell {
            aspect-ratio: 1;
            background: white;
            border-radius: 1px;
            transition: background 0.3s ease;
        }

        .preview-cell.active {
            background: var(--win-green);
            box-shadow: 0 0 5px var(--win-green);
        }

        #patternNameLabel {
            font-size: 0.6rem;
            color: var(--accent-blue);
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .logo { font-weight: 900; color: red; font-size: 1.99rem; letter-spacing: -1px; }

        .menu-btn {
            background: none; border: none; cursor: pointer; padding: 10px;
            display: flex; flex-direction: column; gap: 5px;
        }
        .menu-btn div { width: 25px; height: 3px; background: var(--text-main); border-radius: 2px; transition: 0.3s; }

        .sidebar-menu {
            position: fixed; top: 0; right: -300px; width: 300px; height: 100%;
            background: #11151c; border-left: 1px solid #232a35;
            transition: 0.3s ease-in-out; z-index: 1001; padding: 20px;
            box-shadow: -10px 0 30px rgba(0,0,0,0.5);
            display: flex;
            flex-direction: column;
            overflow-y: auto;
			font-family: 'JetBrains Mono', monospace;
			font-size: 14px;
        }
        .sidebar-menu.open { right: 0; }
        .sidebar-item {
            display: flex; align-items: center; gap: 12px; padding: 15px;
            color: var(--text-main); text-decoration: none; cursor: pointer;
            border-bottom: 1px solid #1c232e; font-weight: 600;
        }
        .sidebar-item:hover { background: #1c232e; color: var(--accent-blue); }

        .stats-panel {
		 font-family: 'JetBrains Mono', monospace;
            margin-top: 10px;
            background: #0a0c10;
            padding: 15px;
            border-radius: 8px;
            border: 1px solid #232a35;
        }
        .stats-title { 
		font-size: 0.7rem; 
		color: var(--accent-blue); 
		font-weight: 800; 
		text-transform: uppercase; 
		margin-bottom: 10px; 
		border-bottom: 1px solid #232a35; 
		padding-bottom: 5px; 
		}
        .stat-row { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 0.75rem; }
        .stat-val { font-weight: 700; color: var(--text-main); }

        .admin-box {
            background: #1c232e;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 15px;
            border: 1px solid #374151;
        }
        .balance-display {
            font-size: 1.5rem;
            font-weight: 900;
            color: var(--win-green);
            text-align: center;
            margin: 10px 0;
        }

        .overlay-dim {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.7); display: none; z-index: 1000;
        }

        .app-container {
            display: grid;
            grid-template-columns: 1fr 320px;
            gap: 30px;
            max-width: 1300px;
			font-family: 'Orbitron', sans-serif;
            width: 100%;
            margin: 5px auto;
            padding: 0 15px;
        }

        @media (max-width: 1000px) { .app-container { grid-template-columns: 1fr; } }

        .panel {
            background: var(--bg-card);
            border-radius: 12px;
            padding: 10px;
            border: 1px solid #232a35;
			font-family: 'JetBrains Mono', monospace;
            height: fit-content;
        }

        .board-container { display: flex; flex-direction: column; gap: 12px; }
        .board-row {
            display: flex; align-items: center; gap: 20px; padding: 6px;
			font-family: digital !important;
            background: rgba(255,255,255,0.02); border-radius: 10px 10px 10px 40px;
        }
        .row-label {
            width: 45px; height: 45px; font-size: 1.9rem; font-weight: 900;
            display: flex; align-items: center; justify-content: center;
            border-radius: 20%; background: #1c232e; flex-shrink: 0;
        }
        .row-b .row-label { color: var(--color-b); border: 2px solid var(--color-b); }
        .row-i .row-label { color: var(--color-i); border: 2px solid var(--color-i); }
        .row-n .row-label { color: var(--color-n); border: 2px solid var(--color-n); }
        .row-g .row-label { color: var(--color-g); border: 2px solid var(--color-g); }
        .row-o .row-label { color: var(--color-o); border: 2px solid var(--color-o); }

        .numbers-grid { display: grid; grid-template-columns: repeat(15, 1fr); gap: 15px; flex: 1; }
        .num-slot {
            aspect-ratio: 1; background: var(--board-empty); 
            display: flex; align-items: center; justify-content: center;
		  

            font-weight: 700; font-size: 2.5rem; color: #E9EEF0;
            transition: background 0.2s, color 0.2s;
        }
		@keyframes callPop {
            0% { transform: scale(1); filter: brightness(1); }
            50% { transform: scale(1.5); filter: brightness(1.5); z-index: 10; }
            100% { transform: scale(2); filter: brightness(1); }
        }
        .num-slot.active { color: white; transform: scale(1.05); }
		.num-slot.just-called { animation: callPop 0.9s cubic-bezier(0.185, 0.985, 0.49, 1.375); z-index: 15; }
        .row-b .num-slot.active { background: radial-gradient(circle at 30% 30%, red, red); }
        .row-i .num-slot.active { background: radial-gradient(circle at 30% 30%, red, red); }
        .row-n .num-slot.active { background: radial-gradient(circle at 30% 30%, red, red); }
        .row-g .num-slot.active { background: radial-gradient(circle at 30% 30%, red, red); }
        .row-o .num-slot.active { background: radial-gradient(circle at 30% 30%, red, red); }

        .status-bar {
            display: flex; justify-content: space-between; align-items: center;
            margin-bottom: 15px; padding: 15px 20px; background: #11151c;
            border-radius: 12px; border-left: 4px solid var(--accent-blue);
            position: relative; overflow: hidden;
			border: 1px solid var(--accent-blue);
        }

       .ball-outer {
            width: 100px; 
            height: 100px; 
            border-radius: 50%; 
            display: flex;
            flex-direction: column; 
            align-items: center; 
            justify-content: center;
            position: relative;
            /* Outer shadow for depth on the floor */
            box-shadow: 0 15px 35px rgba(0,0,0,0.5), inset 0 -8px 15px rgba(0,0,0,0.3);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.1);
        }

        /* The Specular Shine (Light hitting the top) */
        .ball-outer::before {
            content: "";
            position: absolute;
            top: 10%;
            left: 15%;
            width: 35%;
            height: 20%;
            background: linear-gradient(to bottom, rgba(255,255,255,0.6), rgba(255,255,255,0));
            border-radius: 50%;
            transform: rotate(-15deg);
            z-index: 3;
        }

        /* The White Center Face */
        .ball-outer::after {
            content: "";
            position: absolute;
            width: 68%;
            height: 68%;
            background: #ffffff;
            border-radius: 50%;
            z-index: 1;
            box-shadow: inset 0 2px 8px rgba(0,0,0,0.3);
        }

        .ball-outer .letter { 
            font-family: 'Orbitron', sans-serif;
            font-size: 1.1rem; 
            z-index: 2; 
            font-weight: 900; 
            color: #444;
            line-height: 1;
            margin-bottom: -2px;
        }
        .ball-outer .number { 
            font-family: 'Orbitron', sans-serif;
            font-size: 2.2rem; 
            z-index: 2; 
            font-weight: 900; 
            color: #000;
            line-height: 1;
        }
        .ball-outer .letter { font-size: 1.4rem; }
        .ball-outer .number { font-size: 1.8rem; }
        .ball-outer.ball-b { background: radial-gradient(circle at 30% 30%, #a7f3d0, var(--color-b)); }
        .ball-outer.ball-i { background: radial-gradient(circle at 30% 30%, #fef08a, var(--color-i)); }
        .ball-outer.ball-n { background: radial-gradient(circle at 30% 30%, #fecaca, var(--color-n)); }
        .ball-outer.ball-g { background: radial-gradient(circle at 30% 30%, #bfdbfe, var(--color-g)); }
        .ball-outer.ball-o { background: radial-gradient(circle at 30% 30%, #e9d5ff, var(--color-o)); }

        .countdown-timer { position: absolute; bottom: 0; left: 0; height: 0px; background: var(--accent-blue); width: 0%; transition: width linear; }

        button { border-radius: 8px; border: none; font-weight: 700; cursor: pointer; text-transform: uppercase; transition: all 0.2s; padding: 14px 10px; font-size: 0.7rem; }
        button:disabled { opacity: 0.3; cursor: not-allowed; color}
        
        .btn-draw { background: var(--accent-blue); color: #000; }
        .btn-auto { background: #232a35; color: var(--accent-blue); border: 1px solid var(--accent-blue); }
        .btn-auto.active { background: var(--btn-red); border-color: var(--btn-red); color: white; }
        .btn-new { background: var(--win-green); color: white; }
        .btn-verify { background: var(--btn-gold); color: #000; }
        .btn-reset { background: var(--btn-red); color: white; }

        

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

        .control-group { background: #1c232e; border-radius: 10px; padding: 15px; border: 1px solid #374151; margin-bottom: 12px;}
        .control-group label { display: block; font-size: 0.7rem; color: var(--text-dim); margin-bottom: 8px; font-weight: 800; text-transform: uppercase; }
        
        select, input[type="number"], input[type="range"], input[type="password"] { 
            width: 100%; background: #0a0c10; color: white; border: 1px solid #374151; padding: 10px; border-radius: 6px; font-size: 0.9rem;
        }
  /*bet Amount display area*/
        .bet-card { 
		background: rgba(34, 197, 94, 0.05); 
		border: 1px solid var(--win-green); 
		padding: 15px; border-radius: 10px; 
		margin-bottom: 15px; 
		color:#B81D5B;font-family: digital !important; 
		}
        .bet-tag { 
		display: inline-block; 
		background: red; 
		padding: 2px 6px; 
		font-size: 0.65rem; 
		border: 1px solid var(--win-green); 
		border-radius: 4px; margin: 2px; }

        .modal-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: var(--modal-overlay); display: none; align-items: center;
            justify-content: center; z-index: 1001; backdrop-filter: blur(8px);
        }
        .modal-content { 
            background: var(--bg-card); 
            width: 95%; 
            max-width: 400px; 
            padding: 24px; 
            border-radius: 20px; 
            position: relative; 
            box-shadow: 0 20px 60px rgba(0,0,0,0.6);
            border: 1px solid rgba(255,255,255,0.1);
        }
        .modal-close { 
            position: absolute; 
            top: 20px; 
            right: 20px; 
            cursor: pointer; 
            color: var(--text-dim); 
            font-size: 1.2rem; 
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255,255,255,0.05);
            border-radius: 50%;
            z-index: 1002;
            transition: 0.2s;
        }
        .modal-close:hover { background: rgba(255,255,255,0.1); color: #fff; }

        #newGameModal .modal-content.wide {
            background: #ffffff;
            max-width: 850px;
            padding: 0;
            overflow: hidden;
            border-radius: 8px;
            border: none;
        }

        #newGameModal h2 {
            background: #2196F3;
            color: white !important;
            margin: 0;
            padding: 15px 10px;
            font-family: 'Orbitron', sans-serif;
            font-size: 1.0rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .modal-setup-controls {
            padding: 15px 20px;
            background: #f8fafc;
            border-bottom: 1px solid #e2e8f0;
            display: flex;
            align-items: center;
            gap: 5px;
            color: #475569;
        }

        .selection-grid { 
            display: grid; grid-template-columns: repeat(10, 1fr); 
            max-height: 450px; 
			overflow-y: auto; 
			padding: 2px; 
			background: #ffffff; 
            border-radius: 0; 
			margin-bottom: 0; 
			gap: 2px;
        }

        .select-num-btn { 
            aspect-ratio: 2.1; 
			padding:2px;
            background: transparent; 
            color: #333; 
            font-family: digital !important;
            font-size: 1.6rem; 
            border: none; 
            border-radius: 4px;
            font-weight: 700; 
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .select-num-btn:hover { background: #f0f7ff; color: #2196F3; }
        .select-num-btn.selected { 
            background: #2196F3 !important; 
            color: white !important; 
            font-weight: 900;
        }

        .verifier-header { text-align: center; margin-bottom: 20px; }
        .verifier-header h3 { margin: 0; font-size: 1.1rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }
        .verifier-header .card-id { font-size: 2.2rem; font-weight: 900; color: var(--accent-blue); line-height: 1; margin-top: 5px; }

        .verifier-input-group {
            display: flex; background: #0a0c10; border: 1px solid #232a35; border-radius: 12px; padding: 6px; margin-bottom: 20px;
        }
        .verifier-input-group input { background: transparent; border: none; font-weight: 900; font-size: 1.2rem; text-align: center; padding: 10px; }
        .verifier-input-group button { border-radius: 8px; padding: 0 20px; }

        
/* Ensure the modal content can grow and doesn't hide elements */
#verifierModal .modal-content {
    max-width: 550px;
	max-hight: 350px;
    width: 95%;
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 30px 20px 20px 20px;
    overflow: visible !important; /* Prevents X button from hiding */
}

.mini-card {
    background: #ffffff;
    padding: 5px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border: 4px solid var(--win-green);
    border-radius: 6px;
    width: 100%;
}

.mini-card .cell {
    font-family: 'digital', sans-serif !important;
    font-size: 1.8rem;
    height: 45px;
	width: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    color: #000;
    border-radius: 6px;
}

/* The Refund Button - Always at the bottom */
#modalRefundBtn {
    width: 100%;
    height: 50px;
    margin-top: 10px;
    background: #1c232e;
    color: #4b5a6e;
    border: 1px solid #333;
    border-radius: 14px;
    font-weight: 800;
    font-size: 1rem;
    cursor: not-allowed;
    transition: 0.3s;
	 z-index: 2;
	 position: relative;
}

#modalRefundBtn.active {
    
    width: 100%;
    height: 50px;
    background: linear-gradient(135deg, #d4af37 0%, #aa8413 100%); /* Solid Premium Metallic Gold */
    color: #0b0f19;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 2;

}

        .mini-card .header-cell {
            text-align: center; font-weight: 900; font-size: 2.5rem; color: #B81D5B; padding-bottom: 5px;
			font-family: 'digital', sans-serif !important;
        }
        .mini-card .cell {
            aspect-ratio: 1; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px;
            display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.5rem; color: #1e293b;border: 1px solid #B2E2ED;
            transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .mini-card .cell.marked { background: #4056B8; color: #94a3b8; }
        .mini-card .cell.winner { 
            background: var(--win-green) !important; 
            color: #fff !important; 
            border-color: white;
            box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
            //transform: scale(1.2);
            
        }
        .mini-card .cell.free { font-size: 0.9rem; color: var(--win-green); }

        .result-banner {
            margin-top: 15px; padding: 12px; border-radius: 12px; text-align: center; font-weight: 900;
            font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; display: none;
            animation: slideUp 0.3s ease-out;
        }
        .result-banner.win { background: rgba(34, 197, 94, 0.2); color: var(--win-green); border: 1px solid var(--win-green); }
        .result-banner.disqualified { background: rgba(239, 68, 68, 0.2); color: var(--lose-red); border: 1px solid var(--lose-red); }
        .result-banner.lose { background: rgba(239, 68, 68, 0.2); color: var(--lose-red); border: 1px solid var(--lose-red); }

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

        .toast {
            position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
            background: #ef4444; color: white; padding: 10px 20px; border-radius: 30px;
            font-weight: bold; z-index: 2000; display: none;
        }

        .winner-counter {
            background: #11151c; border: 1px solid #232a35; padding: 10px; border-radius: 8px; margin-top: 10px;
            display: flex; justify-content: space-between; align-items: center;
        }
        .winner-dot { width: 12px; height: 12px; border-radius: 50%; background: #232a35; transition: 0.3s; }
        .winner-dot.filled { background: var(--win-green); box-shadow: 0 0 8px var(--win-green); }
		
        .action-buttons-grid {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
            padding: 10px;
        }

        .circle-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            color: white;
            font-size: 1.2rem;
        }

        .circle-btn:hover:not(:disabled) { transform: scale(1.1); }
        .circle-btn:active { transform: scale(0.95); }
        //.circle-btn:disabled { opacity: 0.3; cursor: not-allowed; filter: grayscale(1);  
		}

        .btn-shuffle { background: linear-gradient(135deg, #6366f1, #1E097D); }
        .btn-draw-circ { background: linear-gradient(135deg, #f97316, #ef4444); }
        .btn-auto-circ { background: linear-gradient(135deg, #22c55e, #10b981); }
        .btn-reset-circ { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
        .btn-verify-circ { background: linear-gradient(135deg, #facc15, #eab308); }  
        .btn-new-circ{ background: linear-gradient(135deg, #00d2ff, #0091ff); }

        /* NEW LOCK & CELEBRATION STYLES */
        #cardDisplayArea { position: relative; }

        .stamp-overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-20deg);
			font-family: 'JetBrains Mono', monospace;
            border: 2px solid #ff4757;
            color: #ff4757;
            font-size: 3.5rem;
            font-weight: 900;
            padding: 10px 30px;
            background: rgba(0,0,0,0.75);
            z-index: 100;
            display: none;
            pointer-events: none;
            border-radius: 15px;
            animation: slam 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            text-shadow: 2px 2px 5px black;
            box-shadow: 0 0 20px rgba(255, 71, 87, 0.5);
        }

        @keyframes slam {
            0% { transform: translate(-50%, -50%) scale(5); opacity: 0; }
            100% { transform: translate(-50%, -50%) rotate(-20deg) scale(1); opacity: 1; }
        }

       .win-celebration {
    border: 3px solid #22c55e !important;
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.8) !important;
    animation: celebrate 0.5s ease infinite alternate, glow 2.5s infinite;
}

@keyframes glow {
    0% { box-shadow: 0 0 10px #22c55e; }
    50% { box-shadow: 0 0 40px #22c55e, 0 0 60px #00d2ff; }
    100% { box-shadow: 0 0 10px #22c55e; }
}
/* --- BEAUTIFUL 3D SHINY BINY BALL (MAIN & HISTORY) --- */
.ball-outer, .history-ball {
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    /* Outer shadow for floor depth */
    box-shadow: 0 8px 20px rgba(0,0,0,0.5), inset 0 -4px 10px rgba(0,0,0,0.3);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
}

/* Main Ball Size */
.ball-outer { width: 100px; height: 100px; }

/* History Ball Size */
.history-ball { width: 55px; height: 55px; }

/* The Specular Shine (Light hitting the top) */
.ball-outer::before, .history-ball::before {
    content: "";
    position: absolute;
    top: 10%;
    left: 15%;
    width: 35%;
    height: 20%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.6), rgba(255,255,255,0));
    border-radius: 50%;
    transform: rotate(-15deg);
    z-index: 3;
}

/* The White Center Face */
.ball-outer::after, .history-ball::after {
    content: "";
    position: absolute;
    width: 68%;
    height: 68%;
    background: #ffffff;
    border-radius: 50%;
    z-index: 1;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.3);
}

/* Typography for Balls */
.ball-outer .letter, .history-ball .letter { 
    font-family: 'Orbitron', sans-serif;
    z-index: 2; font-weight: 900; color: #444; line-height: 1;
}
.ball-outer .number, .history-ball .number { 
    font-family: 'Orbitron', sans-serif;
    z-index: 2; font-weight: 900; color: #000; line-height: 1;
}

/* Sizes for Main Ball */
.ball-outer .letter { font-size: 1.1rem; margin-bottom: -2px; }
.ball-outer .number { font-size: 2.2rem; }

/* Sizes for History Balls */
.history-ball .letter { font-size: 0.6rem; margin-bottom: -1px; }
.history-ball .number { font-size: 1.2rem; }

/* 3D Radial Gradients for all balls */
.ball-b { background: radial-gradient(circle at 35% 35%, #9fffcc, #4ade80 50%, #1e5e36); }
.ball-i { background: radial-gradient(circle at 35% 35%, #fff9c4, #facc15 50%, #854d0e); }
.ball-n { background: radial-gradient(circle at 35% 35%, #ffcdd2, #f87171 50%, #7f1d1d); }
.ball-g { background: radial-gradient(circle at 35% 35%, #bbdefb, #60a5fa 50%, #1e3a8a); }
.ball-o { background: radial-gradient(circle at 35% 35%, #e1bee7, #c084fc 50%, #581c87); }


.fixed-corner-logo {
    position: fixed;
    bottom: 1px;
    left: 50px;
    width: 100px;         /* Adjust size as needed */
    height: 100px;
    border-radius: 50%;   /* Makes it circular if it's a square image */
    z-index: 999;         /* Ensures it stays above the panels */
    pointer-events: none; /* Allows you to click things 'behind' the logo */
    opacity: 0.9;         /* Makes it slightly transparent */
    border: 2px solid var(--accent-red);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}