"use strict";

/** @type {Dictionary.<string, any|null>} */
const SCSS = {
    ...{
        "body,html" : {
            height : "100%", 
            margin : "0em",
            "background-color" : "#05070d",
            color : "#e2e8f0",
            "font-family" : "monospace, 'Courier New', sans-serif",
            overflow : "hidden"
        }
    }, 
    ...{
        ".xgravity" : {
            position : "relative", 
            top : "0em", 
            left : "0em", 
            width : "100%", 
            height : "100%",
            display : "flex",
            "justify-content" : "center",
            "align-items" : "center"
        },
        ".xg-view" : {
            position : "absolute",
            top : "0em",
            left : "0em",
            width : "100%",
            height : "100%",
            display : "flex",
            "flex-direction" : "column",
            "justify-content" : "center",
            "align-items" : "center",
            "box-sizing" : "border-box",
            padding : "2em",
            "text-align" : "center",
            "background-color" : "rgba(5, 7, 13, 0.9)"
        },
        ".xg-game-container" : {
            position : "absolute",
            top : "0em",
            left : "0em",
            width : "100%",
            height : "100%",
            overflow : "hidden",
            "background-color" : "#020408"
        },
        ".xg-canvas" : {
            position : "absolute",
            top : "0em",
            left : "0em",
            width : "100%",
            height : "100%",
            display : "block"
        },
        ".xg-hud" : {
            position : "absolute",
            top : "0em",
            left : "0em",
            width : "100%",
            height : "100%",
            "pointer-events" : "none",
            "box-sizing" : "border-box",
            padding : "1em",
            display : "flex",
            "flex-direction" : "column",
            "justify-content" : "space-between"
        },
        ".xg-hud-top" : {
            display : "flex",
            "justify-content" : "space-between",
            "align-items" : "flex-end",
            "font-size" : "1.1em",
            "font-weight" : "bold",
            "text-shadow" : "0 0 0.4em #38bdf8"
        },
        ".xg-hud-shield-container" : {
            display : "flex",
            "align-items" : "center",
            gap : "0.5em"
        },
        ".xg-shield-bar-bg" : {
            width : "8em",
            height : "0.8em",
            background : "rgba(15, 23, 42, 0.8)",
            border : "0.1em solid #0284c7",
            "border-radius" : "0.2em",
            overflow : "hidden"
        },
        ".xg-shield-bar-fill" : {
            width : "100%",
            height : "100%",
            background : "linear-gradient(90deg, #0284c7, #38bdf8)",
            transition : "width 0.1s linear"
        },
        ".xg-hud-bottom" : {
            display : "flex",
            "justify-content" : "flex-end",
            "align-items" : "flex-end",
            "pointer-events" : "none"
        },
        ".xg-hud-pause-btn" : {
            display : "flex",
            "pointer-events" : "auto",
            "font-size" : "0.85em",
            padding : "0.5em 1em",
            cursor : "pointer",
            "z-index" : "20"
        },
        ".xg-pause-modal" : {
            position : "absolute",
            top : "0em",
            left : "0em",
            width : "100%",
            height : "100%",
            background : "rgba(5, 7, 13, 0.75)",
            display : "flex",
            "flex-direction" : "column",
            "justify-content" : "center",
            "align-items" : "center",
            gap : "1em",
            "z-index" : "10"
        },
        ".xg-title" : {
            "font-size" : "2.5em",
            "font-weight" : "bold",
            "margin-bottom" : "1.2em",
            color : "#38bdf8",
            "text-shadow" : "0 0 0.5em #0284c7",
            "letter-spacing" : "0.1em"
        },
        ".xg-subtitle" : {
            "font-size" : "1.5em",
            "font-weight" : "bold",
            "margin-bottom" : "0.8em",
            color : "#7dd3fc"
        },
        ".xg-menu-list" : {
            display : "flex",
            "flex-direction" : "column",
            gap : "0.8em",
            width : "14em"
        },
        ".xg-btn" : {
            background : "#0f172a",
            color : "#38bdf8",
            border : "0.1em solid #0284c7",
            padding : "0.6em 1em",
            "font-size" : "1em",
            "font-family" : "inherit",
            cursor : "pointer",
            "border-radius" : "0.3em",
            transition : "all 0.2s ease-in-out"
        },
        ".xg-btn:hover" : {
            background : "#0284c7",
            color : "#ffffff",
            "box-shadow" : "0 0 0.8em #38bdf8"
        },
        ".xg-panel" : {
            width : "26em",
            "max-width" : "90%",
            "max-height" : "28em",
            "overflow-y" : "auto",
            background : "rgba(15, 23, 42, 0.7)",
            border : "0.1em solid #1e293b",
            "border-radius" : "0.5em",
            padding : "1.5em",
            "box-sizing" : "border-box",
            display : "flex",
            "flex-direction" : "column",
            gap : "1em"
        },
        ".xg-panel::-webkit-scrollbar" : {
            width : "0.4em"
        },
        ".xg-panel::-webkit-scrollbar-track" : {
            background : "rgba(15, 23, 42, 0.5)"
        },
        ".xg-panel::-webkit-scrollbar-thumb" : {
            background : "#0284c7",
            "border-radius" : "0.2em"
        },
        ".xg-panel::-webkit-scrollbar-thumb:hover" : {
            background : "#38bdf8"
        },
        ".xg-field-row" : {
            display : "flex",
            "justify-content" : "space-between",
            "align-items" : "center",
            "font-size" : "0.9em"
        },
        ".xg-range" : {
            cursor : "pointer",
            width : "10em"
        },
        ".xg-select" : {
            background : "#0f172a",
            color : "#38bdf8",
            border : "0.1em solid #0284c7",
            padding : "0.4em 0.6em",
            "font-family" : "inherit",
            "border-radius" : "0.3em",
            cursor : "pointer"
        },
        ".xg-credits-text" : {
            "font-size" : "0.8em",
            "line-height" : "1.5",
            color : "#94a3b8",
            "text-align" : "left"
        },
        ".xg-link" : {
            color : "#38bdf8",
            "text-decoration" : "none",
            "word-break" : "break-all"
        },
        ".xg-link:hover" : {
            "text-decoration" : "underline"
        }, 
        ".xg-btn-selected" : {
            "border-color": "#38bdf8 !important", 
            "box-shadow": "0 0 12px rgba(56, 189, 248, 0.4)", 
            color: "#e0f2fe !important"
        }, 
        ".xg-btn-back" : {
            "margin-top": "10px", 
            opacity: 0.85
        }, 
        ".xg-checkbox" : {
            cursor : "pointer",
            width : "1.2em",
            height : "1.2em",
            "accent-color" : "#0284c7"
        },
        ".xg-fps-overlay" : {
            position : "absolute",
            top : "0.5em",
            right : "0.5em", // <-- Cambiado a la esquina superior derecha
            background : "rgba(15, 23, 42, 0.75)",
            border : "0.08em solid #0284c7",
            "border-radius" : "0.25em",
            padding : "0.2em 0.5em",
            "font-size" : "0.85em",
            "font-weight" : "bold",
            color : "#38bdf8",
            "text-shadow" : "0 0 0.3em #0284c7",
            "pointer-events" : "none",
            "z-index" : "9999",
            "user-select" : "none"
        },
    }, 
    // Capa completa superpuesta que cubre el juego y el HUD
    ".xg-game-over-view": {
        "position": "absolute",
        "inset": "0",
        "display": "flex",
        "flex-direction": "column",
        "align-items": "center",
        "justify-content": "center",
        "background": "rgba(2, 6, 23, 0.78)",
        "backdrop-filter": "blur(8px)",
        "z-index": "100",
        "padding": "20px",
        "box-sizing": "border-box",

        "& .xg-title": {
            "font-family": "'Courier New', monospace",
            "font-size": "2.8rem",
            "color": "#38bdf8",
            "text-shadow": "0 0 20px rgba(56, 189, 248, 0.6)",
            "letter-spacing": "4px",
            "margin": "0 0 10px 0"
        },

        // Insignia de motivo de derrota
        "& .xg-game-over-reason": {
            "margin-bottom": "22px",

            "& .xg-badge-danger": {
                "display": "inline-block",
                "padding": "6px 14px",
                "background": "rgba(239, 68, 68, 0.15)",
                "border": "1px solid rgba(239, 68, 68, 0.5)",
                "color": "#f87171",
                "font-family": "monospace",
                "font-size": "0.9rem",
                "letter-spacing": "2px",
                "border-radius": "4px",
                "text-transform": "uppercase"
            }
        },

        // Tarjeta central de estadísticas
        "& .xg-stats-card": {
            "width": "100%",
            "max-width": "460px",
            "background": "rgba(15, 23, 42, 0.85)",
            "border": "1px solid rgba(56, 189, 248, 0.35)",
            "box-shadow": "0 0 25px rgba(2, 6, 23, 0.9), inset 0 0 15px rgba(56, 189, 248, 0.08)",
            "border-radius": "6px",
            "padding": "16px 20px",
            "margin-bottom": "24px",
            "display": "flex",
            "flex-direction": "column",
            "gap": "10px",
            "box-sizing": "border-box"
        },

        // Filas de estadísticas: aquí se resuelve la separación del texto
        "& .xg-stat-row": {
            "display": "flex",
            "justify-content": "space-between",
            "align-items": "center",
            "width": "100%",
            "padding": "6px 0",
            "border-bottom": "1px dashed rgba(56, 189, 248, 0.15)",
            "font-family": "monospace",
            "font-size": "1rem",

            "&:last-child": {
                "border-bottom": "none"
            },

            "& .xg-stat-label": {
                "color": "#94a3b8",
                "letter-spacing": "1px",
                "text-align": "left"
            },

            "& .xg-stat-value": {
                "color": "#f1f5f9",
                "font-weight": "bold",
                "text-align": "right",
                "letter-spacing": "1px"
            },

            // Fila destacada de la puntuación
            "&.xg-stat-score": {
                "border-bottom": "1px solid rgba(56, 189, 248, 0.4)",
                "padding-bottom": "10px",
                "margin-bottom": "4px",

                "& .xg-val-score": {
                    "color": "#38bdf8",
                    "font-size": "1.25rem",
                    "text-shadow": "0 0 10px rgba(56, 189, 248, 0.5)"
                }
            }
        },

        // Botonera inferior
        "& .xg-menu-list": {
            "display": "flex",
            "flex-direction": "column",
            "gap": "12px",
            "width": "100%",
            "max-width": "280px",

            "& .xg-btn": {
                "width": "100%",
                "padding": "12px 0",
                "font-family": "monospace",
                "font-size": "1.05rem",
                "letter-spacing": "2px"
            }
        }
    }, 
    ".xg-main-menu": {
        // ... tus estilos actuales del menú ...

        "& .xg-menu-header": {
            "display": "flex",
            "flex-direction": "column",
            "align-items": "center",
            "justify-content": "center",
            "margin-bottom": "24px"
        },

        "& .xg-main-logo": {
            "width": "120px",
            "height": "120px",
            "margin-bottom": "14px",
            "filter": "drop-shadow(0 0 16px rgba(56, 189, 248, 0.45))",
            "transition": "transform 0.3s ease, filter 0.3s ease",
            "user-select": "none",
            "pointer-events": "none"
        }
    }, 
    ...(typeof custom_styles == "undefined" ? {} : custom_styles)
};