"use strict";

/** @type {Dictionary.<string, any|null>} */
const SCSS = {
    ...{
        "body,html" : {
            height : "100%", 
            margin : "0em", 
            background_color : "#050505", 
            overflow : "hidden", 
            user_select : "none"
        }
    }, 
    ...{
        ".hollow-bond" : {
            position : "relative", 
            top : "0em", 
            left : "0em", 
            width : "100%", 
            height : "100%", 
            font_family : "monospace", 
            color : "#e0e0e0"
        }
    }, 
    ...{
        ".menu-view" : {
            position : "absolute", 
            top : "0em", 
            left : "0em", 
            width : "100%", 
            height : "100%", 
            display : "flex", 
            flex_direction : "column", 
            align_items : "center", 
            justify_content : "center", 
            background_color : "rgba(8, 8, 10, 0.92)", 
            z_index : "10"
        }, 
        ".menu-header" : {
            text_align : "center", 
            margin_bottom : "3em"
        }, 
        ".menu-title" : {
            font_size : "2.6em", 
            font_weight : "bold", 
            letter_spacing : "0.3em", 
            color : "#d6d0ba", 
            text_shadow : "0 0 0.4em rgba(214, 208, 186, 0.3)"
        }, 
        ".menu-subtitle" : {
            font_size : "0.8em", 
            letter_spacing : "0.15em", 
            color : "#6e6c62", 
            margin_top : "0.6em"
        }, 
        ".menu-actions" : {
            display : "flex", 
            flex_direction : "column", 
            gap : "1em", 
            width : "14em"
        }, 
        ".menu-button" : {
            display : "block", 
            width : "100%", 
            box_sizing : "border-box", 
            padding : "0.7em 1.2em", 
            font_family : "monospace", 
            font_size : "0.9em", 
            color : "#b0aba0", 
            background_color : "rgba(25, 25, 28, 0.7)", 
            border : "0.05em solid #383733", 
            text_align : "center", 
            cursor : "pointer", 
            letter_spacing : "0.1em", 
            transition : "all 0.2s ease", 
            "&:hover" : {
                color : "#ffffff", 
                background_color : "rgba(45, 45, 52, 0.9)", 
                border_color : "#8c8777"
            }
        }, 
        ".credits-modal" : {
            position : "absolute", 
            top : "0em", 
            left : "0em", 
            width : "100%", 
            height : "100%", 
            background_color : "rgba(0, 0, 0, 0.85)", 
            display : "flex", 
            flex_direction : "column", 
            align_items : "center", 
            justify_content : "center", 
            gap : "1.2em", 
            z_index : "20"
        }, 
        ".credits-box" : {
            padding : "2em", 
            border : "0.05em solid #42403b", 
            background_color : "#0f0f12", 
            text_align : "center", 
            min_width : "16em", 
            h2 : {
                margin : "0 0 1em 0", 
                font_size : "1.4em", 
                color : "#d6d0ba", 
                letter_spacing : "0.15em"
            }, 
            p : {
                margin : "0.6em 0", 
                font_size : "0.85em", 
                color : "#9c988d"
            }
        }, 
        ".new-game-modal" : {
            position : "absolute", 
            top : "0em", 
            left : "0em", 
            width : "100%", 
            height : "100%", 
            background_color : "rgba(0, 0, 0, 0.85)", 
            display : "flex", 
            flex_direction : "column", 
            align_items : "center", 
            justify_content : "center", 
            z_index : "20"
        }, 
        ".new-game-box" : {
            box_sizing : "border-box", 
            padding : "2.2em 2.5em", 
            border : "0.05em solid #42403b", 
            background_color : "#0f0f12", 
            width : "22em", 
            display : "flex", 
            flex_direction : "column", 
            gap : "1.5em", 
            h2 : {
                margin : "0 0 0.5em 0", 
                font_size : "1.2em", 
                color : "#d6d0ba", 
                letter_spacing : "0.15em", 
                text_align : "center"
            }
        }, 
        ".field-group" : {
            display : "flex", 
            flex_direction : "column", 
            gap : "0.6em", 
            label : {
                font_size : "0.85em", 
                color : "#a8a499", 
                letter_spacing : "0.05em"
            }, 
            ".height-value" : {
                color : "#ffffff", 
                font_weight : "bold"
            }
        }, 
        ".range-input" : {
            width : "100%", 
            box_sizing : "border-box", 
            accent_color : "#8c8777", 
            cursor : "pointer", 
            background : "transparent"
        }, 
        ".text-input,.number-input" : {
            box_sizing : "border-box", 
            width : "100%", 
            padding : "0.6em 0.8em", 
            background_color : "#17171c", 
            border : "0.05em solid #383733", 
            color : "#ffffff", 
            font_family : "monospace", 
            font_size : "0.9em", 
            letter_spacing : "0.05em", 
            outline : "none", 
            "&:focus" : {
                border_color : "#8c8777", 
                background_color : "#1c1c22"
            }
        }, 
        ".modal-actions" : {
            display : "flex", 
            flex_direction : "column", 
            gap : "0.8em", 
            margin_top : "0.8em"
        }, 
        ".options-modal" : {
            position : "absolute", 
            top : "0em", 
            left : "0em", 
            width : "100%", 
            height : "100%", 
            background_color : "rgba(0, 0, 0, 0.85)", 
            display : "flex", 
            flex_direction : "column", 
            align_items : "center", 
            justify_content : "center", 
            z_index : "20"
        }, 
        ".options-box" : {
            box_sizing : "border-box", 
            padding : "2.2em 2.5em", 
            border : "0.05em solid #42403b", 
            background_color : "#0f0f12", 
            width : "22em", 
            display : "flex", 
            flex_direction : "column", 
            gap : "1.5em", 
            h2 : {
                margin : "0 0 0.5em 0", 
                font_size : "1.2em", 
                color : "#d6d0ba", 
                letter_spacing : "0.15em", 
                text_align : "center"
            }
        }, 
        ".field-group-checkbox" : {
            display : "flex", 
            align_items : "center", 
            label : {
                display : "flex", 
                align_items : "center", 
                gap : "0.6em", 
                font_size : "0.85em", 
                color : "#a8a499", 
                cursor : "pointer"
            }
        }, 
        ".checkbox-input" : {
            accent_color : "#8c8777", 
            cursor : "pointer", 
            width : "1.1em", 
            height : "1.1em"
        }, 
        ".fps-hud" : {
            position : "absolute", 
            top : "0.8em", 
            right : "1em", 
            padding : "0.4em 0.8em", 
            background_color : "rgba(15, 15, 18, 0.8)", 
            border : "0.05em solid #383733", 
            color : "#8c8777", 
            font_size : "0.85em", 
            letter_spacing : "0.1em", 
            z_index : "5", 
            pointer_events : "none", 
            ".fps-value" : {
                color : "#ffffff", 
                font_weight : "bold"
            }
        }, 
        ".hb-canvas-view" : {
            display : "block", 
            width : "100%", 
            height : "100%", 
            outline : "none", 
            cursor : "crosshair"
        }, 

        ".select-input" : {
            "width" : "100%",
            "box-sizing" : "border-box",
            "background-color" : "#13141a",
            "color" : "#e0ded3",
            "border" : "1px solid #3d4450",
            "border-radius" : "4px",
            "padding" : "8px 32px 8px 12px",
            "font-family" : "inherit",
            "font-size" : "0.95rem",
            "outline" : "none",
            "cursor" : "pointer",
            "transition" : "border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease",
            
            /* Quitar flecha nativa del navegador */
            "appearance" : "none",
            "-webkit-appearance" : "none",
            "-moz-appearance" : "none",

            /* Flecha personalizada en SVG limpia y sutil */
            "background-image" : "url(\"data:image/svg+xml;utf8,<svg fill='%238c92a4' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>\")",
            "background-repeat" : "no-repeat",
            "background-position" : "right 8px center",
            "background-size" : "18px", 

            "&:hover" : {
                "border-color" : "#606b7d",
                "background-color" : "#181a22"
            }, 
            "&:focus" : {
                "border-color" : "#8ca0ba",
                "box-shadow" : "0 0 0 2px rgba(140, 160, 186, 0.25)"
            }, 
            /* Opciones dentro del desplegable */
            option : {
                "background-color" : "#13141a",
                "color" : "#e0ded3",
                "padding" : "8px"
            }

        },

        ".inspector-hud" : {
            "position" : "fixed",
            "top" : "20px",
            "left" : "20px",
            "background-color" : "rgba(19, 20, 26, 0.85)",
            "backdrop-filter" : "blur(6px)",
            "border" : "1px solid #3d4450",
            "border-radius" : "6px",
            "padding" : "12px 16px",
            "color" : "#e0ded3",
            "font-family" : "monospace",
            "font-size" : "0.85rem",
            "pointer-events" : "none",
            "z-index" : "100",
            "display" : "flex",
            "flex-direction" : "column",
            "gap" : "6px",

            ".hud-title" : {
                "color" : "#00bcd4",
                "font-weight" : "bold",
                "letter-spacing" : "1px",
                "margin-bottom" : "4px"
            },
            ".hud-row" : {
                "display" : "flex",
                "justify-content" : "space-between",
                "gap" : "12px",
                "b" : {
                    "color" : "#ffeb3b"
                }
            },
            ".hud-controls-hint" : {
                "color" : "#8c92a4",
                "font-size" : "0.75rem",
                "margin-top" : "6px",
                "border-top" : "1px solid #2d333f",
                "padding-top" : "6px"
            }
        }

    }, 
    ...(typeof custom_styles == "undefined" ? {} : custom_styles)
};