/* ============================================================
   Swipe Labyrinth - themes.css
   Thèmes visuels : Néon, Dark, Pastel
   ============================================================ */

/* ------------------------------------------------------------
   BASE : variables par défaut
------------------------------------------------------------ */

:root {
    --color-bg: #000;
    --color-text: #fff;
    --color-accent: #fff;
    --color-overlay: rgba(255,255,255,0.1);
    --color-popup-bg: #111;
    --color-btn-border: #fff;
    --color-btn-hover-bg: #fff;
    --color-btn-hover-text: #000;
    --color-particle: #fff;
}

/* ------------------------------------------------------------
   THÈME NÉON
------------------------------------------------------------ */

[data-theme="neon"] {
    --color-bg: #05010a;
    --color-text: #d8caff;
    --color-accent: #8b4dff;
    --color-overlay: rgba(139,77,255,0.15);
    --color-popup-bg: #120022;
    --color-btn-border: #8b4dff;
    --color-btn-hover-bg: #8b4dff;
    --color-btn-hover-text: #fff;
    --color-particle: #b57aff;
}

/* ------------------------------------------------------------
   THÈME DARK
------------------------------------------------------------ */

[data-theme="dark"] {
    --color-bg: #0a0a0a;
    --color-text: #e0e0e0;
    --color-accent: #444;
    --color-overlay: rgba(255,255,255,0.05);
    --color-popup-bg: #1a1a1a;
    --color-btn-border: #888;
    --color-btn-hover-bg: #888;
    --color-btn-hover-text: #000;
    --color-particle: #ccc;
}

/* ------------------------------------------------------------
   THÈME PASTEL
------------------------------------------------------------ */

[data-theme="pastel"] {
    --color-bg: #f8f6ff;
    --color-text: #4a3f6b;
    --color-accent: #ffb3c1;
    --color-overlay: rgba(255,179,193,0.25);
    --color-popup-bg: #fff0f6;
    --color-btn-border: #ffb3c1;
    --color-btn-hover-bg: #ffb3c1;
    --color-btn-hover-text: #4a3f6b;
    --color-particle: #ffccd8;
}

/* ------------------------------------------------------------
   APPLICATION DES VARIABLES
------------------------------------------------------------ */

body {
    background: var(--color-bg);
    color: var(--color-text);
}

#menu {
    background: rgba(0,0,0,0.75);
}

.menu-title {
    color: var(--color-text);
}

.menu-btn {
    border-color: var(--color-btn-border);
    color: var(--color-text);
}

.menu-btn:hover {
    background: var(--color-btn-hover-bg);
    color: var(--color-btn-hover-text);
}

#hud {
    color: var(--color-text);
}

#ui-loading,
#ui-popup,
#ui-message {
    background: var(--color-overlay);
}

.ui-popup-box {
    background: var(--color-popup-bg);
    color: var(--color-text);
}

.ui-btn {
    border-color: var(--color-btn-border);
    color: var(--color-text);
}

.ui-btn:hover {
    background: var(--color-btn-hover-bg);
    color: var(--color-btn-hover-text);
}

.particle {
    background: var(--color-particle);
}

#defeat-overlay {
    background: rgba(255,0,0,0.15);
}