:root {
            /* Branding Colors (Primary Blue) */
            --primary-blue-dark: #0a3c6e;
            --primary-blue: #0088ff;
            --primary-blue-light: #4da6ff;
            --primary-blue-faint: rgba(0, 136, 255, 0.38); /* Wrapper BG */

            /* Gradient/Accent Colors (Gold/Yellow) */
            --accent-gold: #ffc107; /* Button base */
            --accent-gold-light: #ffeb3b; /* Button top */
            --accent-gold-dark: #ca8a00; /* Button shadow/stroke */

            /* Background & Text */
            --bg-gradient-light: #f1f9ff;
            --bg-gradient-dark: #08f;
            --text-shadow-color: var(--bg-gradient-dark);
            --card-text-color: #eaf4ff;
            --shadow-global: rgba(0, 0, 0, 0.2);

            /* Typography */
            --font-display: 'Luckiest Guy', Arial, sans-serif;
        }

        /*
        =====================================================================
        | GENERAL & BODY STYLES |
        =====================================================================
        */
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            color: black;
            padding: 20px;
            margin: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: -1;
            /* Base Background */
            background:
                url("../images/background.png") repeat,
                radial-gradient(var(--bg-gradient-light), var(--bg-gradient-dark));
            background-size: 500px 500px, auto;
            background-blend-mode: normal, normal;
        }

        .bg-overlay-2 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url("../images/light.png") no-repeat;
            background-size: 100%;
            opacity: 1;
            z-index: -1;
            pointer-events: none;
        }

        /* Utility Class for Hiding */
        .codesecdef {
            display: none;
        }

        /*
        =====================================================================
        | HEADER & LOGO |
        =====================================================================
        */
        .top-logo {
            text-align: center;
            padding: 16px 10px 0;
        }

        .top-logo img {
            width: min(450px, 95vw);
            height: auto;
            display: block;
            margin: 75px auto 10px;
        }

        .tagline, .title, .lalamo {
            font-family: var(--font-display);
            font-weight: 400;
            color: white;
            letter-spacing: 1px;
            text-align: center;
            text-shadow: 3px 2px 0 var(--text-shadow-color);
            /* Prevents anti-aliasing issues on web fonts */
            filter: drop-shadow(0.1px 0 0 var(--text-shadow-color))
                    drop-shadow(-0.1px 0 0 var(--text-shadow-color))
                    drop-shadow(0 0.1px 0 var(--text-shadow-color))
                    drop-shadow(0 -0.1px 0 var(--text-shadow-color));
        }

        .tagline {
            margin: 6px 0 330px;
            font-size: 28px;
        }

        /*
        =====================================================================
        | WRAPPER (Main Dice Area) |
        =====================================================================
        */
        .wrapper {
            width: 37.5vw;
            max-width: 600px;
            min-width: 300px;
            background-color: var(--primary-blue-faint);
            border: 5px solid rgba(255, 255, 255, 0.5);
            border-radius: 20px;
            box-shadow: 0 5px 10px var(--shadow-global);
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            z-index: 1;
        }

        .title {
            margin: 6px 0 15px;
            font-size: 34px;
        }

        /*
        =====================================================================
        | DROPDOWNS & SELECTS |
        =====================================================================
        */
        .dropdown-container {
            display: flex;
            gap: 10px;
            margin-bottom: 0;
        }

        select {
            font-family: var(--font-display);
            font-size: 20px;
            padding: 10px 0.5vw;
            border: 3px solid var(--primary-blue);
            border-radius: 2px;
            background-color: white;
            color: var(--primary-blue);
            cursor: pointer;
            width: 18.5vw;
            max-width: 300px;
            min-width: 150px;
        }

        /*
        =====================================================================
        | DICE STYLES |
        =====================================================================
        */
        .dice-result {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            padding: 1vw;
            margin-bottom: 1vw;
        }

        .color-block {
            width: 80px;
            height: 80px;
            border-radius: 22px;
            border: 10px solid #fff;
            position: relative;
            background-color: #e0e0e0; /* Default neutral color */
            transition: background-color 0.2s ease-in-out;
        }

        .dot {
            width: 14px;
            height: 14px;
            background-color: white;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 6px white;
        }

        @keyframes shake-dice {
            0% { transform: translate(1px, 1px) rotate(0deg); }
            10% { transform: translate(-1px, -2px) rotate(-1deg); }
            20% { transform: translate(-3px, 0px) rotate(1deg); }
            30% { transform: translate(3px, 2px) rotate(0deg); }
            40% { transform: translate(1px, -1px) rotate(1deg); }
            50% { transform: translate(-1px, 2px) rotate(-1deg); }
            60% { transform: translate(-3px, 1px) rotate(0deg); }
            70% { transform: translate(3px, 1px) rotate(-1deg); }
            80% { transform: translate(-1px, -1px) rotate(1deg); }
            90% { transform: translate(1px, 2px) rotate(0deg); }
            100% { transform: translate(1px, -2px) rotate(-1deg); }
        }

        .rolling-message {
            font-family: var(--font-display);
            font-weight: 400;
            color: white;
            text-align: center;
            font-size: 40px;
            letter-spacing: 1px;
            text-shadow: 3px 2px 0 var(--text-shadow-color);
            filter: drop-shadow(0.1px 0 0 var(--text-shadow-color))
                    drop-shadow(-0.1px 0 0 var(--text-shadow-color))
                    drop-shadow(0 0.1px 0 var(--text-shadow-color))
                    drop-shadow(0 -0.1px 0 var(--text-shadow-color));
            margin-bottom: 20px;
        }


        /*
        =====================================================================
        | BUTTONS |
        =====================================================================
        */
        button {
            background: linear-gradient(to bottom, var(--accent-gold-light), var(--accent-gold));
            color: white;
            font-family: var(--font-display);
            font-size: 28px;
            font-weight: bold;
            text-transform: uppercase;
            border: 3px solid white;
            border-radius: 2px;
            cursor: pointer;
            padding: 10px;
            width: 37.5vw;
            max-width: 600px;
            min-width: 300px;
            margin-top: 10px;
            /* Text effects */
            -webkit-text-stroke: 0.1px var(--accent-gold-dark);
            text-shadow: 1px 2px 0 var(--accent-gold-dark);
        }

        button:hover {
            background: linear-gradient(to top, var(--accent-gold-light), #fbc02d); /* Slightly different hover */
        }

        /* Read More Button (Blog) */
        .read-more {
            display: block;
            width: fit-content;
            margin-top: 10px;
			margin-left: auto;
			margin-bottom: 0;
            font-family: var(--font-display);
            font-size: 20px;
            padding: 12px 25px;
            background: gold;
            color: #fff;
            text-shadow: -1px -1px 0 var(--accent-gold-dark),
                         1px -1px 0 var(--accent-gold-dark),
                         -1px 1px 0 var(--accent-gold-dark),
                         2px 2px 0 var(--accent-gold-dark);
            border-radius: 5px;
            box-shadow: inset 0 0 0 2px rgba(255,255,255,.25),
                        0 6px 14px rgba(0,56,119,.35); /* Using the original shadow value */
            user-select: none;
            pointer-events: none; /* Make it look like a button without being interactive */
        }

        /*
        =====================================================================
        | INFO & COLOR DETAILS |
        =====================================================================
        */
        .color-container {
            background-color: #2d98ff; /* Darker blue shade */
            border-radius: 2px;
            padding: 5px;
            margin-top: 20px;
            margin-bottom: 20px;
            width: 38.5vw;
			min-width: 250px;
			max-width: 600px;
        }

        .color-info {
            color: white;
            font-weight: bold;
            font-size: 14px;
        }

        /* Color Spans */
        .t-red { color: red; font-weight: 700; }
        .t-orange { color: orange; font-weight: 700; }
        .t-yellow { color: gold; font-weight: 700; }
        .t-green { color: green; font-weight: 700; }
        .t-blue { color: blue; font-weight: 700; }
        .t-purple { color: purple; font-weight: 700; }


        /*
        =====================================================================
        | BLOG & CARD STYLES |
        =====================================================================
        */
        .lalamo {
            margin-bottom: 0;
            font-size: 26px;
        }

        .info {
            display: grid;
            gap: 22px;
            justify-content: center;
            padding: 8px 8px 28px;
            position: relative;
            z-index: 1;
        }

        .card, .card2 {
            position: relative;
            margin-bottom: 0px;
            text-align: center;
            border: 5px solid rgba(255, 255, 255, 0.5);
            border-radius: 20px;
            box-shadow: 0 5px 10px var(--shadow-global);
            color: #083b73;
            overflow: hidden;
        }

        .card {
            width: 65vw;
            max-width: 1000px;
            min-width: 400px;
            background-color: rgba(0, 136, 255, 0.70);
            padding: 20px 50px 50px;
        }

        .card2 {
            width: 60vw;
            max-width: 950px;
            min-width: 350px;
            background-color: var(--primary-blue-light);
            padding: 20px;
        }

        .card::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 14px;
            background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,0) 40%);
            pointer-events: none;
            mix-blend-mode: screen;
        }

        .card h3, .card2 h4 {
            font-family: var(--font-display);
            font-weight: 400;
            letter-spacing: 1px;
            text-align: center;
            margin: 6px 0 15px;
            font-size: 26px;
        }

        .card h3 {
            color: white;
            text-shadow: 3px 2px 0 var(--text-shadow-color);
            filter: drop-shadow(0.1px 0 0 var(--text-shadow-color))
                    drop-shadow(-0.1px 0 0 var(--text-shadow-color))
                    drop-shadow(0 0.1px 0 var(--text-shadow-color))
                    drop-shadow(0 -0.1px 0 var(--text-shadow-color));
        }

        .blog-list {
            display: grid;
            gap: 18px;
            justify-items: center;
        }

        .blog-list .post-title {
            font-size: 22px;
            color: white;
        }

        .blog-list .post-title.gold {
            color: gold;
        }

        .card p {
            margin: 8px 0 10px;
            font-size: 16px;
            line-height: 1.6;
            color: var(--card-text-color);
        }

        .blog-list p {
            margin: 6px 0 8px;
            line-height: 1.6;
            text-align: center;
            color: var(--card-text-color);
        }

        .footer-spacer { height: 24px; }


        /*
        =====================================================================
        | ROLLING ANIMATION STATE |
        =====================================================================
        */

        /* Base Rolling Background (Stays on top) */
        body.rolling {
            background-attachment: fixed;
            transition: opacity 0.15s ease-in;
        }

        /* Hide overlay instantly during rolling */
        body.rolling .bg-overlay-2 {
            display: none !important;
        }

        /* Hide all UI elements *except* the rolling state instantly */
        body.rolling header,
        body.rolling .wrapper,
        body.rolling .info,
        body.rolling .lalamo {
            opacity: 0;
            pointer-events: none;
            transition: none;
        }

        /* Show all UI elements instantly when rolling ends (reverse transition) */
        body:not(.rolling) header,
        body:not(.rolling) .wrapper,
        body:not(.rolling) .info,
        body:not(.rolling) .lalamo,
        body:not(.rolling) .bg-overlay-2 {
            opacity: 1;
            pointer-events: auto;
            transition: opacity 0.15s ease-in;
        }

        /* Prevent flicker on initial load */
        body:not(.initialized) .wrapper,
        body:not(.initialized) header,
        body:not(.initialized) .info,
        body:not(.initialized) .lalamo {
            display: none !important;
        }