* {
        box-sizing: border-box;
    }
    /* CSS Variables from main.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;
    }

    /* Slot Machine Container - Styled as a .card */
    .slot-machine {
        background-color: var(--color-white);
        border: 1px solid var(--secondary-color);
        box-shadow: 0 3px 10px var(--secondary-color);
        padding: 2rem; /* Using card padding */
        border-radius: 8px; /* Using card border-radius */
        width: 100%;
        max-width: 28rem;
        margin: 0; /* Removed horizontal margin */
        position: relative;
    }
    
    /* Sound Toggle Button - Themed */
    .sound-toggle {
        position: absolute;
        top: 1rem;
        right: 1rem;
        background: var(--secondary-background);
        border: 1px solid var(--border-color);
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color 0.2s;
    }
    .sound-toggle:hover {
        background: var(--color-very-light-gray);
    }
    .sound-toggle svg {
        width: 24px;
        height: 24px;
        fill: var(--color-gray);
        flex-shrink: 0; 
    }

    /* Header - Themed */
    .header {
        text-align: center;
        margin-bottom: 1.5rem;
        font-family: 'Inter', sans-serif; /* Keep Inter for header */
        margin-top: 1.5rem;
    }
    .header h1 {
        font-size: 2.25rem;
        line-height: 2.5rem;
        font-weight: 700;
        color: var(--main-color); /* Use theme main color */
        letter-spacing: 0.05em;
    }
    .header p {
        color: var(--color-gray);
        margin-top: 0.5rem;
    }
    
    /* Balance Display - Themed */
    .balance-display {
        background-color: var(--secondary-background);
        padding: 0.75rem;
        border-radius: 0.5rem;
        text-align: center;
        margin-bottom: 1.5rem;
        border: 1px solid var(--border-color);
        font-family: 'Inter', sans-serif;
    }
    .balance-display span {
        font-size: 1.125rem;
        line-height: 1.75rem;
        font-weight: 600;
        color: var(--color-gray);
        letter-spacing: 0.1em;
    }
    .balance-display p {
        font-size: 2.25rem;
        line-height: 2.5rem;
        font-weight: 700;
        color: var(--main-color); /* Use theme primary amount color */
        transition: color 0.3s ease;
    }

    .balance-display p.negative-balance {
        color: var(--color-error-dark); /* Use theme error color */
        text-shadow: none;
    }

    /* Debt Display - Themed */
    .debt-display {
        text-align: center;
        margin-bottom: 1rem;
        font-size: 0.875rem;
        color: var(--color-error-dark);
        font-family: 'Inter', sans-serif;
    }
    .debt-display.hidden {
        display: none;
    }

    /* Reels - Themed but preserving glow */
    .reels-container {
        display: flex;
        justify-content: center;
        gap: 1rem;
        padding: 1rem;
        border-radius: 0.5rem;
        margin-bottom: 1.5rem;
        background: var(--secondary-background);
        border: 2px solid var(--border-color);
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
    }
    .reel {
        background: var(--color-white);
        font-family: 'Roboto Mono', monospace; /* Keep special font */
        font-size: 3.75rem;
        line-height: 1;
        /* Use theme color for glow to maintain appeal */
        text-shadow: 0 0 10px var(--secondary-color), 0 0 20px var(--secondary-color);
        border-radius: 0.5rem;
        transition: transform 0.1s ease-in-out;
        width: 80px;
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .spinning {
        animation: spin-effect 0.1s linear infinite;
    }
    @keyframes spin-effect {
        0% { transform: translateY(-10%); }
        50% { transform: translateY(10%); }
        100% { transform: translateY(-10%); }
    }

    /* Message Display - Themed */
    .message-display {
        text-align: center;
        height: 2rem;
        margin-bottom: 1rem;
        font-size: 1.25rem;
        line-height: 1.75rem;
        font-weight: 600;
        font-family: 'Inter', sans-serif;
        color: var(--color-gray); /* Default color */
        text-shadow: none;
    }
    .message-display.win-message {
         color: var(--color-green-dark); /* Use theme green for wins */
    }

    /* Spin Button - Styled as a theme button */
    .spin-button {
        width: 100%;
        padding: 1rem 0;
        font-size: 1.5rem;
        line-height: 2rem;
        font-weight: 700;
        font-family: 'Inter', sans-serif;
        color: var(--color-white);
        border-radius: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        background-color: var(--main-color);
        transition: background-color 0.3s ease;
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
        border: none;
        cursor: pointer;
    }
    .spin-button:hover {
        background-color: var(--secondary-color);
        transform: none; /* Remove original hover effect */
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    }
    .spin-button:active {
        transform: translateY(1px);
    }
    .spin-button:disabled {
        background: var(--color-light-gray);
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }
    
    /* Payouts and Rules Section - Themed */
    .info-section {
        margin-top: 2rem;
        text-align: center;
        color: var(--color-gray);
        max-width: 28rem;
        width: 100%;
        margin: 2rem 1rem 0 1rem;
        font-family: 'Inter', sans-serif;
    }
    .info-section h2 {
        font-size: 1.5rem;
        line-height: 2rem;
        font-weight: 700;
        color: var(--main-color);
        margin-bottom: 1rem;
        letter-spacing: 0.05em;
    }
    .info-box {
        background-color: var(--secondary-background);
        padding: 1.5rem;
        border-radius: 0.5rem;
        border: 1px solid var(--border-color);
    }
    .payout-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 1.125rem;
        line-height: 1.75rem;
        margin-bottom: 1rem;
    }
     .payout-item:last-child {
        margin-bottom: 0;
    }
    .payout-item .symbols {
        font-family: 'Roboto Mono', monospace; /* Keep special font */
    }
    .payout-item .amount {
        font-weight: 700;
        color: var(--color-green-dark);
    }
    .info-section .info-text {
        margin-top: 1rem;
        color: var(--color-gray);
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
     .info-section .disclaimer-text {
        margin-top: 1rem;
        font-size: 0.75rem;
        line-height: 1rem;
        color: var(--color-gray);
        font-style: italic;
     }
     .info-section .help-text {
        margin-top: 0.5rem;
        font-size: 0.75rem;
        line-height: 1rem;
        color: var(--color-gray);
         font-style: italic;
     }
     .info-section a {
        color: var(--main-color);
        text-decoration: underline;
     }
     .info-section a:hover {
        color: var(--secondary-color);
     }
     .educational-content {
        text-align: left;
        line-height: 1.6;
        color: var(--color-gray);
        font-family: Arial, Helvetica, sans-serif; /* Use base font */
     }
     .educational-content p {
        margin-bottom: 1rem;
     }

    /* History Section - Themed */
    .history-stats {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.75rem;
        padding: 0 0.5rem;
        font-weight: 600;
        color: var(--color-gray);
    }
    .history-stats .wins {
        color: var(--color-green-dark);
    }
    .history-stats .losses {
        color: var(--color-error-dark);
    }
    .history-box {
        max-height: 250px;
        overflow-y: auto;
        text-align: left;
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    .history-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem;
        border-bottom: 1px solid var(--border-color);
    }
    .history-item:last-child {
        border-bottom: none;
    }
    .history-item .symbols {
        font-family: 'Roboto Mono', monospace; /* Keep special font */
        font-size: 1rem;
    }
    .result-balance-wrapper {
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    .history-item .result {
        font-weight: 600;
    }
    .history-item .result.win {
        color: var(--color-green-dark);
    }
    .history-item .result.loss {
        color: var(--color-error-dark);
    }
    .history-item .balance-history {
        color: var(--color-gray);
        width: 80px;
        text-align: right;
        font-size: 0.875rem;
    }
    .no-history {
        color: var(--color-gray);
        text-align: center;
        padding: 1rem;
    }

    /* Visually Hidden Utility */
    .visually-hidden {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }


    /* Game Layout Container */
    .game-layout-container {
        display: grid; /* Changed to grid */
        justify-items: center; /* This will center the columns */
        width: 100%;
        gap: 2rem; /* This will be the space between elements on mobile */
    }

    .game-column-main, .game-column-info {
        width: 100%;
        max-width: 28rem;
    }

    /* The info column just needs to stack its children */
    .game-column-info {
        display: flex;
        flex-direction: column;
        gap: 2rem; /* This will be the space between info sections */
        width: 100%;
    }

    /* Override margins for info sections inside the 2-column layout's info column.
      This is the fix: Remove all margins, as the parent's gap handles spacing.
    */
    .game-column-info .info-section {
        margin: 0;
    }

    /* The "About" section is outside the layout, it needs its margin */
    /* This rule now targets the .articlecontainer > .info-section */
    .articlecontainer > .info-section {
         margin-top: 2rem;
         margin-left: auto; /* Changed */
         margin-right: auto; /* Changed */
    }

    /* Ad Container from index.html */
    .ad-container {
        width: 100%;
        margin: 2rem auto;
        text-align: center;
        min-height: 90px;
    }


    /* Modal Styles - Themed */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
    }

    .modal-content {
        background-color: var(--color-white);
        padding: 2rem;
        border-radius: 1rem;
        border: 1px solid var(--border-color);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
        text-align: center;
        max-width: 90%;
        width: 400px;
        font-family: 'Inter', sans-serif;
    }

    .modal-content h2 {
        font-size: 1.75rem;
        font-weight: 700;
        color: var(--main-color);
        margin-bottom: 1rem;
    }

    .modal-content p {
        color: var(--color-gray);
        margin-bottom: 1.5rem;
    }
    
    .modal-buttons {
        display: flex;
        gap: 1rem;
    }

    .modal-buttons button {
        flex-grow: 1;
        padding: 0.75rem 0;
        font-size: 1rem;
        font-weight: 600;
        border-radius: 0.5rem;
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .modal-buttons .borrow-btn {
        background-color: var(--color-green-dark);
        color: white;
    }
    .modal-buttons .borrow-btn:hover {
        background-color: var(--color-green-dark);
    }
    .modal-buttons .borrow-btn:disabled {
        background-color: var(--color-light-gray);
        cursor: not-allowed;
    }
    
    .modal-buttons .end-btn {
        background-color: var(--color-error-dark);
        color: white;
    }
    .modal-buttons .end-btn:hover {
        background-color: #d32f2f; /* Darker red from calc.css */
    }

    /* Small screen adjustments for < 420px */
    @media (max-width: 420px) {
        /* body padding removed, handled by host page */
        .slot-machine {
            padding: 1rem;
        }
        .reels-container {
            padding: 0.5rem;
            gap: 0.5rem;
        }
        .reel {
            width: 70px; /* reduce fixed width */
            height: 100px; /* reduce height */
            font-size: 3rem; /* reduce font size */
        }
        .modal-content {
            width: 90%;
            padding: 1.5rem;
        }
        .header h1 {
            font-size: 1.75rem;
            line-height: 2rem;
        }
        .balance-display p {
            font-size: 2rem;
        }
        .spin-button {
            font-size: 1.25rem;
            padding: 0.75rem 0;
        }
    }
    
    /* Very small screen adjustment for sound button overlap */
    @media (max-width: 350px) {
        .sound-toggle {
            position: relative; /* Take it out of absolute positioning */
            top: auto;          /* Reset position properties */
            right: auto;        /* Reset position properties */
            margin: 0 auto 0.5rem auto; /* Center it and add margin-bottom */
        }
    }

    /* Extra small screen adjustments for < 320px */
    @media (max-width: 319px) {
         /* body padding removed, handled by host page */
        .slot-machine {
            padding: 0.5rem; /* 8px */
        }
        .reels-container {
            padding: 0.5rem; /* 8px */
            gap: 0.25rem; /* 4px */
        }
        .reel {
            width: 60px; /* reduce fixed width */
            height: 90px; /* reduce height */
            font-size: 2.5rem; /* reduce font size */
        }
         .header h1 {
            font-size: 1.5rem; /* 24px */
            line-height: 1.75rem;
        }
        .balance-display p {
            font-size: 1.75rem;
        }
        .spin-button {
            font-size: 1rem;
            padding: 0.75rem 0;
        }
    }

    /* Responsive Styles */
    @media (min-width: 640px) {
        .slot-machine {
            padding: 2rem;
        }
        .header h1 {
            font-size: 3rem;
            line-height: 1;
        }
    }

    /* Large screen layout */
    @media (min-width: 992px) { /* lg breakpoint */
        .game-layout-container {
            display: grid; /* Explicitly set grid */
            grid-template-columns: 1fr 1fr; /* Two equal-width fractional columns */
            align-items: start; /* Align items to the top */
            justify-items: center; /* Center items within grid cells */
            gap: 2rem; /* Define the gap between columns */
            max-width: 60rem; /* Set a max-width for the entire layout */
            margin: 0 auto; /* Center the layout */
        }

        .game-column-main {
            /* This column wrapper should just fill its cell */
            width: 100%;
            max-width: none; /* Override the mobile max-width */
            display: flex; /* Use flex to center the slot machine inside */
            justify-content: center;
        }

        .game-column-info {
            /* This column wrapper should just fill its cell */
            width: 100%;
            max-width: none; /* Override the mobile max-width */
        }
        
        /* The "About" section needs to center itself and expand */
         .articlecontainer > .info-section {
             max-width: 60rem; /* Match the grid's max-width */
             margin-left: auto;
             margin-right: auto;
         }
    }


    /* Utility Class - Placed last to ensure it overrides other display properties */
    .hidden {
         display: none;
    }