:root {
    --md-sys-color-primary: #6750A4;
    --md-sys-color-on-background: #1D1B20;
    --md-color-cell-bg: #F7F2FA;
    --md-color-cell-border: #141218;
    --md-color-grid-border: #141218;;
    --md-color-btn-green: #1AA64A;
    --md-color-on-btn-green: #F2FCEF;
    --md-color-btn-green-hover: #BEEFBB;
    --md-color-on-btn-green-hover: #00522C;
}
[data-bs-theme="dark"] {
    --md-sys-color-primary: #D0BCFF;
    --md-sys-color-on-background: #E6E0E9;
    --md-color-cell-bg: #ECE6F0;
    --md-color-cell-border: #211F26;
    --md-color-grid-border: #938F96;
    --md-color-btn-green: #80DA88;
    --md-color-on-btn-green: #00381F;
    --md-color-btn-green-hover: #006C35;
    --md-color-on-btn-green-hover: #DDF8D8;
}
        .grid-wrapper {
            width: 100%;
            max-width: 500px;
            margin: 0 auto;
        }

        .grid-container {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            width: 100%;
            border: 2px solid var(--md-color-grid-border);
            background-color: var(--md-color-cell-border);
            gap: 2px;
        }

        .cell {
            aspect-ratio: 1/1;
            background-color: var(--md-color-cell-border);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .cell.active { background-color: var(--md-color-cell-bg); }
        
        .cell-num {
            position: absolute;
            top: 2px;
            left: 3px;
            font-size: clamp(0.6rem, 2vw, 0.75rem);
            line-height: 1;
            color: #3B383E;
            pointer-events: none;
            font-weight: bold;
        }

        .letter-input {
            width: 100%;
            height: 100%;
            border: none;
            text-align: center;
            text-transform: uppercase;
            font-size: clamp(0.9rem, 4vw, 1.4rem);
            font-weight: 700;
            background: transparent;
            caret-color: transparent;
            color: #0F0D13;
        }

        .letter-input:focus { 
            background-color: #D0BCFF; 
            outline: none; 
        }

        .is-correct { color: #198754 !important; }
        .is-wrong { color: #dc3545 !important; }

        /* Clue Layout Styling */
        .clue-header { 
            text-transform: uppercase; 
            font-weight: 700; 
            border-bottom: 2px solid var(--md-sys-color-primary);
            padding-bottom: 5px;
            margin-bottom: 15px;
            letter-spacing: 1px;
            color: var(--md-sys-color-on-background);
        }
        
        .clue-list { 
            font-size: 0.9rem; 
            height: 450px; 
            overflow-y: auto; 
            padding-right: 10px;
        }

        .clue-item { 
            margin-bottom: 8px; 
            display: flex; 
            align-items: flex-start;
        }

        .clue-num { 
            font-weight: 900; 
            min-width: 28px; 
            color: var(--md-sys-color-primary);
        }
        
        @media (max-width: 768px) {
            .clue-list { height: auto; margin-bottom: 30px; }
            .grid-wrapper { margin-bottom: 20px; }
        }

        .btn-md3-green {
            background-color: var(--md-color-btn-green);
            color: var(--md-color-on-btn-green);
            border-radius: 20px;
            border: none;
            padding: 10px 24px;
        }
            .btn-md3-green:hover {
            background-color: var(--md-color-btn-green-hover);
            color: var(--md-color-on-btn-green-hover);
        }