/* Global Box Sizing Fix for layout integrity */
        *, *::before, *::after {
            box-sizing: border-box;
        }

        /* 1. Theme Variables (from main.css and calculators.css) */
        :root{
            --main-color:#1A48EE;
            --secondary-color:#008AFF;
            --tertiary-color:#2c20E6;
            --secondary-background:#f9f9f9;
            --main-background:#e5f3ff;
            --tertiary-background:#e6e5ea;
            --color-white:#ffffff;
            --color-error-dark: #c53030;
            --color-green: #16a34a;
            --color-green-dark: #047857;
            --color-light-green: #D1FAE5;
            --color-contrast-green:#065F46;
            --border-color:#e2e8f0;
            --color-gray:#4a5568;
            --color-light-gray:#ccc;
            --color-very-light-gray:#e0e0e0;

            /* Custom variables updated for flat color interaction */
            --cell-bg-default: #bdbdbd; 
            --cell-bg-hover: #bdbdbd;   
            --table-bg: #bdbdbd;        
            --header-bg: #bdbdbd;       
            --game-border-color: #a1a1a1; 
            
            /* Fixed original cell size - JS updates these */
            --cell-size: 30px; 
            --cols: 9; 
            --grid-gap: 1px; /* Default gap */
        }
        
        /* 2. Global Styles & Layout */
        html, body {
            font-family: Arial, sans-serif;
            touch-action: manipulation;
            /* ADDED: Enforce page width to screen size so internal scrollbars work */
            width: 100%;
            max-width: 100vw;
            overflow-x: hidden;
            margin: 0;
            padding: 0;
            /* Global text safety */
            overflow-wrap: break-word;
            word-wrap: break-word;
        }

        /* Wrapper for external footer/header injection to prevent them from breaking layout */
        #headerwrapper, #footer, .wrapper {
            max-width: 100vw;
            box-sizing: border-box;
        }

        h1 {
            /* Ensure title wraps on small screens */
            white-space: normal; 
            word-break: break-word; 
            padding: 0 10px; /* Add padding to prevent edge touching */
        }

        /* FIX: Allow main container to use full width for responsive content */
        .game-main {
            margin-bottom: 2rem;
            margin-top: 0.5rem; 
            
            width: 100%; /* Take up full body width */
            max-width: 1280px; /* Max content width */
            padding: 0 1rem; /* Add back horizontal padding for edge spacing */
            
            display: flex;
            flex-direction: column;
            align-items: center; /* Center fixed-width children like #game-viewport */
        }

        /* WRAPPER: Handles scroll logic based on screen size */
        #game-scroll-wrapper {
            width: 100%;
            display: flex;
            justify-content: center; /* Center the game board by default */
            /* Ensure wrapper itself doesn't overflow parent */
            max-width: 100%; 
        }

        /* Custom Scrollbar Styling for WebKit (Chrome, Safari, Edge) */
        #game-scroll-wrapper::-webkit-scrollbar {
            height: 12px; /* Height of horizontal scrollbar */
        }
        
        #game-scroll-wrapper::-webkit-scrollbar-track {
            background: var(--tertiary-background);
            border-radius: 6px;
        }
        
        #game-scroll-wrapper::-webkit-scrollbar-thumb {
            background-color: var(--color-gray);
            border-radius: 6px;
            border: 3px solid var(--tertiary-background); /* Creates padding effect */
        }
        
        /* SCROLL LOGIC: Dynamic breakpoints per difficulty */
        
        /* LOW RISK (Easy) - Scroll below 346px */
        @media (max-width: 346px) {
            #game-scroll-wrapper.mode-easy {
                display: block; 
                overflow-x: auto;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: thin;
                scrollbar-color: var(--color-gray) var(--tertiary-background); 
                padding-bottom: 10px; 
            }
            #game-scroll-wrapper.mode-easy .game-viewport {
                margin: 0 auto; 
                width: max-content; 
                /* FIXED: Remove constraint so it can be wider than screen */
                max-width: none; 
            }
        }

        /* MED RISK (Medium) - Scroll below 538px */
        @media (max-width: 538px) {
            #game-scroll-wrapper.mode-medium {
                display: block; 
                overflow-x: auto;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: thin;
                scrollbar-color: var(--color-gray) var(--tertiary-background); 
                padding-bottom: 10px; 
            }
            #game-scroll-wrapper.mode-medium .game-viewport {
                margin: 0 auto; 
                width: max-content; 
                /* FIXED: Remove constraint so it can be wider than screen */
                max-width: none; 
            }
        }

        /* HIGH RISK (Hard) - Scroll below 1024px */
        @media (max-width: 1024px) {
            #game-scroll-wrapper.mode-hard {
                display: block; 
                overflow-x: auto;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: thin;
                scrollbar-color: var(--color-gray) var(--tertiary-background); 
                padding-bottom: 10px; 
            }
            #game-scroll-wrapper.mode-hard .game-viewport {
                margin: 0 auto; 
                width: max-content; 
                /* FIXED: Remove constraint so it can be wider than screen */
                max-width: none; 
            }
        }
        
        /* Game Viewport: REMAINS STATIC and centered by parent */
        .game-viewport {
            /* CHANGED: Use flex column to stack header and grid independently */
            display: flex;
            flex-direction: column;
            align-items: center; /* Center the grid if header is wider */
            width: fit-content;  /* Shrink to fit the content (default behavior) */
            
            border: 4px solid var(--game-border-color);
            background-color: var(--table-bg);
            box-sizing: border-box; 
            
            border-radius: 8px;
            
            /* Ensure it doesn't force page scroll when not in scroll mode */
            max-width: 100%;
            
            /* Default to allowing scroll (will be toggled to 'none' by JS for Analysis Mode) */
            touch-action: auto; 
        }

        /* 4. Game-specific Styles (Classic Minesweeper Look) */
        
        /* Header and Grid containers are now children of .game-viewport */
        .header-panel-container {
            width: 100%;
            padding: 0; 
            margin: 0;
            /* Removed min-width: fit-content to allow shrinking */
        }
        
        /* The header panel itself (cloned) */
        .header-panel {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            
            /* ADDED: Allow items to wrap on very small screens to avoid overflow */
            flex-wrap: wrap;
            gap: 5px; 
            justify-content: center; /* Center items if they wrap */
            
            background-color: var(--header-bg);
            width: 100%;
            
            box-sizing: border-box;
            
            border-bottom: 4px solid var(--game-border-color);
        }

        /* GRID/TABLE STYLES - Individual Cells */
        .game-grid {
             display: block; 
        }
        
        .grid-row {
            display: grid;
            grid-template-columns: repeat(var(--cols), var(--cell-size));
            gap: var(--grid-gap);
        }

        .grid-cell-wrapper {
            padding: 0;
            width: var(--cell-size);
            height: var(--cell-size);
        }

        /* End GRID/TABLE STYLES */
        
        /* Cell Button Styles (unchanged) */
        .cell-btn {
            width: 100%; 
            height: 100%; 
            padding: 0;
            margin: 0;
            border: 2px outset var(--game-border-color);
            background-color: var(--cell-bg-default);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            cursor: pointer;
            user-select: none;
            position: relative;
            font-weight: bold;
            font-family: inherit;
            line-height: 1;
            transition: background-color 0.1s ease-out, border 0.1s ease-out;
        }

        .cell-btn:hover { background-color: var(--cell-bg-hover); }
        .cell-btn:active { background-color: var(--cell-bg-hover); border: 2px inset var(--game-border-color); }
        .cell-btn:focus { outline: 3px solid var(--main-color); outline-offset: -2px; z-index: 10; }
        
        /* ... (rest of cell styles are unchanged) ... */
        .cell-btn .prob-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.6); color: white; font-size: 12px; display: none; align-items: center; justify-content: center; font-weight: normal; pointer-events: none; }
        .cell-btn:hover .prob-overlay { display: flex; }
        .cell-btn.revealed { border: 1px solid #7b7b7b; background-color: #d1d1d1; }
        .cell-btn.risk { background-color: var(--color-error-dark); }
        .cell-btn.mitigated { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231A48EE"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z"/></svg>'); background-size: 70%; background-repeat: no-repeat; background-position: center; }
        .cell-btn.asset { background-color: #FFD700; }
        .color-1 { color: #0000ff; }
        .color-2 { color: #008200; }
        .color-3 { color: #ff0000; }
        .color-4 { color: #000084; }
        .color-5 { color: #840000; }
        .color-6 { color: #008284; }
        .color-7 { color: #840084; }
        .color-8 { color: #000000; }

        /* Fixed size for info boxes and smiley button, matching the original 40px/60px */
        .info-box { 
            background-color: #000; 
            color: var(--color-error-dark); 
            padding: 5px 10px; 
            font-size: 24px; 
            border: 2px inset #fff; 
            text-align: center; 
            min-width: 60px; 
            /* Added safety for wrapping if screen is tiny */
            white-space: normal; 
            word-break: break-all; 
        }
        .smiley-button { width: 40px; height: 40px; font-size: 30px; border: 2px outset var(--game-border-color); background-color: var(--cell-bg-default); display: flex; justify-content: center; align-items: center; cursor: pointer; flex-shrink: 0; }
        .smiley-button:focus { outline: 3px solid var(--main-color); }
        
        /* 5. Custom Utility and Component Styles (RESPONSE CHANGES START HERE) */
        
        /* FIX: Centering and width for responsive control blocks */
        .controls-outer-wrapper, 
        .seo-article {
            width: 100%;
            max-width: 42rem; /* Max width for readability (approx 672px) */
            margin-left: auto;
            margin-right: auto;
        }

        .controls-outer-wrapper {
             /* Remove flex, rely on margin auto and w:100% */
             display: block; 
             margin-top: 1rem;
        }
        
        .game-controls-container { 
            width: 100%; /* Must be 100% to fill the controls-outer-wrapper */
            min-width: unset; /* Remove min-width to allow fluid shrink */
            padding: 1.5rem; 
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(0, 138, 255, 0.4); 
            background-color: var(--color-white);
            margin: 0;
        }

        .seo-article {
            width: 100%;
            max-width: 42rem;
            margin: 3rem auto 0 auto;
            padding: 1.5rem;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
            background-color: var(--color-white);
            color: var(--color-gray);
        }

        /* --- Other Utilities --- */
        .mt-4 { margin-top: 1rem; }
        .mb-4 { margin-bottom: 1rem; }
        .text-center { text-align: center; }
        .w-full { width: 100%; }
        .p-2 { padding: 0.5rem; }
        .p-4 { padding: 1rem; }
        .rounded-lg { border-radius: 0.5rem; }
        .shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.06); }
        .hidden { display: none; }
        .text-sm { font-size: 0.875rem; }
        .text-xl { font-size: 1.25rem; }
        .font-bold { font-weight: bold; }
        .text-white { color: var(--color-white); }
        .text-gray-800 { color: #1f2937; }
        .list-disc { list-style-type: disc; }
        .list-inside { list-style-position: inside; }
        .ml-4 { margin-left: 1rem; }
        .space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }
        .max-w-2xl { max-width: 42rem; }
        .button-group { display: flex; gap: 0.5rem; margin-bottom: 1rem; justify-content: center; }
        .diff-btn { 
            padding: 0.5rem 1rem; 
            border-radius: 0.375rem; 
            border: none; 
            font-weight: bold; 
            cursor: pointer; 
            transition: background-color 0.3s, box-shadow 0.3s; 
            color: var(--color-white); 
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 
            /* ADDED: Ensure button text wraps if needed */
            white-space: normal; 
            word-wrap: break-word;
        }
        #easy-btn { background-color: var(--main-color); }
        #easy-btn:hover { background-color: #143aae; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); }
        #medium-btn { background-color: var(--color-contrast-green); }
        #medium-btn:hover { background-color: #107c39; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); }
        #hard-btn { background-color: var(--color-error-dark); }
        #hard-btn:hover { background-color: #d32f2f; }
        .toggle-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
        .toggle-item { 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            gap: 0.5rem; 
            background-color: var(--tertiary-background); 
            padding: 0.5rem; 
            border-radius: 0.5rem; 
            /* ADDED: Allow flexible wrapping inside toggle items */
            flex-wrap: wrap; 
            white-space: normal;
        }
        .toggle-btn { padding: 0.5rem 1rem; color: var(--color-white); border: none; border-radius: 0.375rem; cursor: pointer; transition: background-color 0.3s; background-color: var(--color-gray); }
        .toggle-btn:hover { background-color: var(--main-color); }
        .toggle-switch-wrapper { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
        .toggle-switch { width: 2.75rem; height: 1.5rem; background-color: var(--color-gray); border-radius: 9999px; transition: background-color 0.3s; position: relative; }
        .toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; background-color: white; border: 1px solid transparent; border-radius: 9999px; height: 1.25rem; width: 1.25rem; transition: transform 0.3s; }
        .toggle-checkbox:checked + .toggle-switch { background-color: var(--main-color); }
        .toggle-checkbox:checked + .toggle-switch::after { transform: translateX(1.25rem); }
        .sr-only { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
        #instructions-panel { background-color: var(--secondary-background); border: 1px solid var(--border-color); text-align: left; padding: 1rem; }
        #instructions-panel h2 { color: var(--main-color); margin-top: 0; }
        #instructions-panel h3 { color: var(--color-gray); margin-top: 0.5rem; }
        .seo-article h2 { color: var(--main-color); }
        .seo-article section h3 { color: var(--main-color); }
        .seo-article-footer { padding-top: 1rem; border-top: 1px solid var(--border-color); margin-top: 1.5rem; font-size: 0.875rem; text-align: center; color: #6b7280; }
        .modal { display: none; position: fixed; z-index: 50; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); }
        .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 400px; text-align: center; border-radius: 8px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); }
        .modal-message { font-size: 1.25rem; margin-bottom: 1rem; white-space: pre-line; }
        .modal-close-btn { padding: 0.5rem 1rem; background-color: var(--color-gray); color: var(--color-white); border-radius: 0.375rem; border: none; cursor: pointer; transition: background-color 0.3s; }
        .modal-close-btn:hover { background-color: #4b5563; }

        /* Ad Container Styling for Display Ads */
        .ad-container {
            width: 100%;
            margin: 2rem auto;
            text-align: center;
            min-height: 90px; /* Standard height for banners to reduce layout shift */
            max-width: 42rem; /* Match max content width */
        }
        @media (max-width: 640px) {
            .toggle-grid {
                grid-template-columns: 1fr; /* Stack toggle items vertically */
            }
            .button-group {
                flex-direction: column; /* Stack difficulty buttons vertically */
                width: 100%;
            }
            .diff-btn {
                width: 100%; /* Make buttons full width */
            }
        }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }