/* ========================================
   Base Styles & Layout (Modern Digital Edition)
   ======================================== */
:root {
    /* Digital Theme (Default) */
    --bg-dark: #f3f4f6;
    --bg-panel: #ffffff;
    --primary: #2563eb;
    /* Royal Blue */
    --secondary: #dbeafe;
    --accent: #1e40af;
    --text-main: #111827;
    --text-muted: #6b7280;

    --grad-main: linear-gradient(135deg, #2563eb, #3b82f6);
    --glass-border: 1px solid rgba(0, 0, 0, 0.1);

    --font-head: 'Orbitron', sans-serif;
    --font-body: 'Roboto Mono', monospace;
}

/* Retro Theme */
[data-theme="retro"] {
    --bg-dark: #fdf6e3;
    --bg-panel: #eee8d5;
    --primary: #cb4b16;
    /* Orange */
    --secondary: #eee8d5;
    --text-main: #073642;
    --text-muted: #586e75;
    --grad-main: linear-gradient(135deg, #cb4b16, #dc322f);
    --glass-border: 1px solid #93a1a1;
}

/* Cyber Theme */
[data-theme="cyber"] {
    --bg-dark: #0f172a;
    --bg-panel: rgba(30, 41, 59, 0.95);
    --primary: #06b6d4;
    /* Cyan */
    --secondary: #164e63;
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --grad-main: linear-gradient(135deg, #06b6d4, #22d3ee);
    --glass-border: 1px solid rgba(34, 211, 238, 0.3);
}

/* Minimal Theme */
[data-theme="minimal"] {
    --bg-dark: #ffffff;
    --bg-panel: #ffffff;
    --primary: #000000;
    --secondary: #f3f4f6;
    --text-main: #000000;
    --text-muted: #666666;
    --grad-main: linear-gradient(to right, #000, #333);
    --glass-border: 2px solid #000;
}

/* Neon Theme */
[data-theme="neon"] {
    --bg-dark: #000;
    --primary: #39ff14;
    --secondary: #ff00ff;
    --text-main: #fff;
    --grad-main: linear-gradient(45deg, #39ff14, #ff00ff);
    --glass-border: 1px solid #39ff14;
}

/* 1. Party Theme */
[data-theme="party"] {
    --bg-dark: #2c003e;
    --bg-panel: rgba(255, 255, 255, 0.9);
    --primary: #ff0099;
    --secondary: #00ffff;
    --text-main: #333;
    --text-muted: #555;
    --grad-main: linear-gradient(to right, #ff0099, #493240);
    --glass-border: 2px solid #ff0099;
}

/* 2. Shiny Theme */
[data-theme="shiny"] {
    --bg-dark: #e0e0e0;
    --bg-panel: rgba(255, 255, 255, 0.7);
    --primary: #757575;
    --secondary: #bdbdbd;
    --text-main: #212121;
    --text-muted: #616161;
    --grad-main: linear-gradient(135deg, #e0e0e0 0%, #ffffff 50%, #e0e0e0 100%);
    --glass-border: 1px solid white;
}

/* 3. OS Theme */
[data-theme="os"] {
    --bg-dark: #3e3e3e;
    /* MacOS Dark vibe */
    --bg-panel: rgba(0, 0, 0, 0.4);
    --primary: #007aff;
    --secondary: #5ac8fa;
    --text-main: #fff;
    --text-muted: #8e8e93;
    --grad-main: linear-gradient(to bottom, #007aff, #005ecb);
    --glass-border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 4. 3D Fun Theme */
[data-theme="3d"] {
    --bg-dark: #ffecb3;
    --bg-panel: #fff;
    --primary: #ff6f00;
    --secondary: #ffca28;
    --text-main: #3e2723;
    --text-muted: #5d4037;
    --grad-main: linear-gradient(to bottom, #ff9800, #f57c00);
    --glass-border: 4px solid #3e2723;
}

/* 5. Storm Theme */
[data-theme="storm"] {
    --bg-dark: #263238;
    --bg-panel: rgba(30, 40, 45, 0.9);
    --primary: #cfd8dc;
    --secondary: #546e7a;
    --text-main: #eceff1;
    --text-muted: #b0bec5;
    --grad-main: linear-gradient(to bottom, #455a64, #37474f);
    --glass-border: 1px solid #78909c;
}

/* 6. Fizzy Theme */
[data-theme="fizzy"] {
    --bg-dark: #fff3e0;
    --bg-panel: rgba(255, 255, 255, 0.8);
    --primary: #ff9800;
    --secondary: #ffe0b2;
    --text-main: #e65100;
    --text-muted: #f57c00;
    --grad-main: radial-gradient(circle, #ffcc80, #ffa726);
    --glass-border: 2px dashed #ff9800;
}

/* 7. Rainbow Theme */
[data-theme="rainbow"] {
    --bg-dark: #121212;
    --bg-panel: rgba(20, 20, 20, 0.9);
    --primary: #ff0000;
    --secondary: #00ff00;
    --text-main: #fff;
    --text-muted: #aaa;
    --grad-main: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    --glass-border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 8. Kinetic Theme */
[data-theme="kinetic"] {
    --bg-dark: #1a237e;
    --bg-panel: rgba(255, 255, 255, 0.1);
    --primary: #00e676;
    --secondary: #2979ff;
    --text-main: #fff;
    --text-muted: #8c9eff;
    --grad-main: linear-gradient(45deg, #00e676, #00b0ff);
    --glass-border: 1px solid #00e676;
}

/* 9. Deep Sea Theme */
[data-theme="deepsea"] {
    --bg-dark: #001f3f;
    --bg-panel: rgba(0, 31, 63, 0.9);
    --primary: #7fdbff;
    --secondary: #0074d9;
    --text-main: #e0f7fa;
    --text-muted: #39cccc;
    --grad-main: linear-gradient(to bottom, #0074d9, #001f3f);
    --glass-border: 1px solid #7fdbff;
}

/* 10. Sugar Theme */
[data-theme="sugar"] {
    --bg-dark: #fce4ec;
    --bg-panel: #fff;
    --primary: #f06292;
    --secondary: #f8bbd0;
    --text-main: #880e4f;
    --text-muted: #ad1457;
    --grad-main: repeating-linear-gradient(45deg, #f06292, #f06292 10px, #f48fb1 10px, #f48fb1 20px);
    --glass-border: 4px solid #f06292;
}

/* 11. Matrix Theme */
[data-theme="matrix"] {
    --bg-dark: #000;
    --bg-panel: rgba(0, 20, 0, 0.9);
    --primary: #0f0;
    --secondary: #003300;
    --text-main: #0f0;
    --text-muted: #00cc00;
    --grad-main: linear-gradient(180deg, #0f0, #003300);
    --glass-border: 1px solid #0f0;
    --font-heading: 'Courier New', monospace;
}

/* 12. Coffee Theme */
[data-theme="coffee"] {
    --bg-dark: #3e2723;
    --bg-panel: #d7ccc8;
    --primary: #795548;
    --secondary: #a1887f;
    --text-main: #3e2723;
    --text-muted: #5d4037;
    --grad-main: linear-gradient(45deg, #795548, #5d4037);
    --glass-border: 1px solid #795548;
}

/* 13. Luxury Theme */
[data-theme="luxury"] {
    --bg-dark: #000;
    --bg-panel: #111;
    --primary: #d4af37;
    --secondary: #fff;
    --text-main: #d4af37;
    --text-muted: #888;
    --grad-main: linear-gradient(135deg, #d4af37, #fcf6ba, #d4af37);
    --glass-border: 1px solid #d4af37;
}

/* 14. Nature Theme */
[data-theme="nature"] {
    --bg-dark: #1b5e20;
    --bg-panel: rgba(255, 255, 255, 0.9);
    --primary: #4caf50;
    --secondary: #81c784;
    --text-main: #1b5e20;
    --text-muted: #388e3c;
    --grad-main: linear-gradient(135deg, #4caf50, #81c784);
    --glass-border: 1px solid #4caf50;
}

/* 15. Dracula Theme */
[data-theme="dracula"] {
    --bg-dark: #282a36;
    --bg-panel: #44475a;
    --primary: #bd93f9;
    --secondary: #6272a4;
    --text-main: #f8f8f2;
    --text-muted: #6272a4;
    --grad-main: linear-gradient(135deg, #bd93f9, #ff79c6);
    --glass-border: 1px solid #bd93f9;
}

/* 17. Pastel Theme */
[data-theme="pastel"] {
    --bg-dark: #f0f4f8;
    --bg-panel: #ffffff;
    --primary: #ffb7b2;
    --secondary: #b5ead7;
    --text-main: #334;
    --text-muted: #778;
    --grad-main: linear-gradient(135deg, #ff9aa2, #c7ceea);
    --glass-border: 2px solid #ffb7b2;
}

/* 18. Cyberpunk Theme */
[data-theme="cyberpunk"] {
    --bg-dark: #0b0b0b;
    --primary: #fcee0a;
    --secondary: #00f0ff;
    --text-main: #fcee0a;
    --text-muted: #00f0ff;
    --grad-main: linear-gradient(to right, #fcee0a, #ff003c, #00f0ff);
    --glass-border: 1px solid #fcee0a;
}

/* 19. Monochrome Theme */
[data-theme="monochrome"] {
    --bg-dark: #333333;
    --bg-panel: #444;
    --primary: #999;
    --secondary: #eee;
    --text-main: #ffffff;
    --grad-main: linear-gradient(to right, #000, #fff);
    --glass-border: 1px solid #999;
}

/* 20. Candy Theme */
[data-theme="candy"] {
    --bg-dark: #FFF0F5;
    --bg-panel: #FFFAF0;
    --text-main: #DB7093;
    --text-muted: #FFB6C1;
    --primary: #FF69B4;
    --secondary: #FF1493;
    --grad-main: linear-gradient(45deg, #FF69B4, #FF1493, #FFB6C1);
    --glass-border: 2px dashed #FF69B4;
}

/* 21. Space Theme */
[data-theme="space"] {
    --bg-dark: #000000;
    --bg-panel: rgba(255, 255, 255, 0.1);
    --primary: #9b59b6;
    --secondary: #8e44ad;
    --grad-main: linear-gradient(45deg, #000000, #9b59b6);
    --glass-border: 1px solid #9b59b6;
}

/* 22. Snow Theme */
[data-theme="snow"] {
    --bg-dark: #f8f9fa;
    --bg-panel: #ffffff;
    --primary: #a0c4ff;
    --secondary: #b9d6f2;
    --text-main: #333;
    --grad-main: linear-gradient(to bottom, #a0c4ff, #ffffff);
    --glass-border: 1px solid #a0c4ff;
}

/* 23. Ocean Theme */
[data-theme="ocean"] {
    --bg-dark: #001f3f;
    --primary: #7FDBFF;
    --secondary: #0074D9;
    --text-main: #fff;
    --grad-main: linear-gradient(to bottom right, #7FDBFF, #0074D9, #001f3f);
    --glass-border: 1px solid #7FDBFF;
}

/* 24. Holographic Theme Override (from root default) */
[data-theme="holographic"] {
    /* Uses default root vars but ensure they are set if user switches back */
    --bg-dark: #0a0a12;
    --bg-panel: rgba(255, 255, 255, 0.05);
    --primary: #00f2ea;
    --secondary: #ff0050;
    --accent: #ffee00;
    --text-main: #ffffff;
    --grad-main: linear-gradient(135deg, rgba(0, 242, 234, 0.8), rgba(255, 0, 80, 0.8));
    --glass-border: 1px solid rgba(255, 255, 255, 0.1);




}

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

body {
    background: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-body);
    height: 100vh;
    overflow: hidden;
    transition: background 0.5s ease;
}

/* Layout Wrapper */
.layout-wrapper {
    display: grid;
    grid-template-columns: 350px 1fr;
    height: 100vh;
    position: relative;
    z-index: 2;
    /* Content above background */
}

/* Controls Panel */
.controls-panel {
    background: var(--bg-panel);
    border-right: var(--glass-border);
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    z-index: 10;
    box-shadow: 20px 0 40px rgba(0, 0, 0, 0.05);
    height: 100vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
}

.controls-panel::-webkit-scrollbar {
    width: 6px;
}

.controls-panel::-webkit-scrollbar-thumb {
    background: var(--primary);
    opacity: 0.3;
    border-radius: 10px;
}

.app-title {
    font-family: var(--font-head);
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.app-title span {
    color: var(--primary);
    background: var(--grad-main);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Inputs & Buttons */
label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

textarea {
    width: 100%;
    background: var(--bg-panel);
    /* Changed from bg-dark for better contrast */
    border: var(--glass-border);
    color: var(--text-main);
    padding: 1rem;
    border-radius: 8px;
    font-family: inherit;
    resize: none;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.btn-primary {
    width: 100%;
    padding: 1rem;
    background: var(--grad-main);
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-head);
    letter-spacing: 1px;
}

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

/* Theme Select */
.theme-select {
    width: 100%;
    background: var(--bg-panel);
    /* Changed from bg-dark */
    border: var(--glass-border);
    color: var(--text-main);
    padding: 1rem;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    appearance: none;
    /* Custom Arrow */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem;
}

.theme-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

/* History List */
.winner-history {
    margin-top: 1rem;
}

#historyList li {
    padding: 0.8rem 0;
    border-bottom: var(--glass-border);
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-main);
}

/* Result Overlay (Modern Modal) */
.result-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.result-overlay:not(.hidden) {
    opacity: 1;
    pointer-events: all;
}

.result-card {
    background: var(--bg-panel);
    border: var(--glass-border);
    padding: 4rem;
    text-align: center;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 90%;
}

.result-label {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.winner-name {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--primary);
    margin-bottom: 2rem;
    line-height: 1.2;
}

.result-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.remove-option {
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

#confettiCanvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

/* Responsive */
@media (max-width: 900px) {
    .layout-wrapper {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .controls-panel {
        padding: 1rem;
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
        gap: 1rem;
    }

    .controls-panel>* {
        min-width: 200px;
    }

    textarea {
        display: none;
    }
}