/* One <style> block, lifted in place. Separate per block: merging
   blocks changes which rule wins. */

/* Basic page styling */
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f0f2f5;
            color: #333;
        }

        /* Container for our content */
        .container {
            text-align: center;
            background-color: white;
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        /* The dice icon display area */
        #dice-display {
            font-size: 10rem; /* Makes the icon really big */
            margin-bottom: 30px;
            color: #1a73e8;
            /* Prevents layout shift during animation */
            min-height: 160px; 
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        /* The "ROLL" button */
        #roll-button {
            font-size: 1.5rem;
            font-weight: bold;
            padding: 15px 40px;
            border: none;
            border-radius: 10px;
            background-color: #1a73e8;
            color: white;
            cursor: pointer;
            transition: background-color 0.2s, transform 0.2s;
        }

        #roll-button:hover {
            background-color: #155ab6;
        }

        #roll-button:active {
            transform: scale(0.95);
        }
        
        /* Animation for the dice roll */
        @keyframes spin {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        
        /* Class added by JavaScript to trigger the animation */
        .rolling {
            animation: spin 0.4s ease-out;
        }