body {
    /* font-family: 'Inter', sans-serif; */
    font-family: 'Google Sans', sans-serif;
    overscroll-behavior: none;
    margin: 0; /* Ensure no default margins cause scrollbars */
    overflow-x: hidden; /* Prevent horizontal scroll */
    
}
:host, html, body{line-height: 1.9 !important}

/* Dark mode text styling - make ALL text content white in dark mode across all pages */
/* This is a comprehensive rule that applies to all text content on the entire site */
/* Using high specificity to override any other color classes */
html.dark p,
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6,
html.dark li,
html.dark strong,
html.dark em,
html.dark span:not(.sudoku-cell span):not(button span):not(input span):not(.fa):not(.fas):not(.far):not(.fab) {
    color: #ffffff !important;
}

h1,
h2,
h3,
h4,
h5,
h6
{
    font-family: "Sora",Arial, Helvetica, sans-serif;
}

/* Additional coverage for dark mode */
.dark p,
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6,
.dark li,
.dark strong,
.dark em,
.dark span:not(.sudoku-cell span):not(button span):not(input span):not(.fa):not(.fas):not(.far):not(.fab) {
    color: #ffffff !important;
}

/* Exclude text inside buttons, inputs, and specific interactive elements */
.dark button p,
.dark button h1,
.dark button h2,
.dark button h3,
.dark button h4,
.dark button h5,
.dark button h6,
.dark button li,
.dark button strong,
.dark button em,
.dark input p,
.dark input h1,
.dark input h2,
.dark input h3,
.dark input h4,
.dark input h5,
.dark input h6,
.dark input li,
.dark input strong,
.dark input em,
.dark .modal-content p,
.dark .modal-content h1,
.dark .modal-content h2,
.dark .modal-content h3,
.dark .modal-content h4,
.dark .modal-content h5,
.dark .modal-content h6 {
    /* Modal content uses its own dark mode styling */
}

/* Comprehensive coverage for all content areas - ALL pages and difficulty levels */
/* Easy, Medium, Hard, Expert, Master, Extreme, Challenges - ALL covered */
html.dark #content p,
html.dark #content h1,
html.dark #content h2,
html.dark #content h3,
html.dark #content h4,
html.dark #content h5,
html.dark #content h6,
html.dark #content li,
html.dark #content strong,
html.dark #content em,
html.dark #content span:not(.sudoku-cell span),
html.dark #Conclusion p,
html.dark #Conclusion h1,
html.dark #Conclusion h2,
html.dark #Conclusion h3,
html.dark #Conclusion h4,
html.dark #Conclusion h5,
html.dark #Conclusion h6,
html.dark #Conclusion li,
html.dark #Conclusion strong,
html.dark #Conclusion em,
html.dark .inner-pages-main p,
html.dark .inner-pages-main h1,
html.dark .inner-pages-main h2,
html.dark .inner-pages-main h3,
html.dark .inner-pages-main h4,
html.dark .inner-pages-main h5,
html.dark .inner-pages-main h6,
html.dark .inner-pages-main li,
html.dark .inner-pages-main strong,
html.dark .inner-pages-main em,
html.dark .w-full p,
html.dark .w-full h1,
html.dark .w-full h2,
html.dark .w-full h3,
html.dark .w-full h4,
html.dark .w-full h5,
html.dark .w-full h6,
html.dark .w-full li,
html.dark .w-full strong,
html.dark .w-full em,
html.dark .w-full span:not(.sudoku-cell span),
html.dark .page-content p,
html.dark .page-content h1,
html.dark .page-content h2,
html.dark .page-content h3,
html.dark .page-content h4,
html.dark .page-content h5,
html.dark .page-content h6,
html.dark .page-content li,
html.dark .page-content strong,
html.dark .page-content em,
html.dark .card-body p,
html.dark .card-body h1,
html.dark .card-body h2,
html.dark .card-body h3,
html.dark .card-body h4,
html.dark .card-body h5,
html.dark .card-body h6,
html.dark .card-body li,
html.dark .card-body strong,
html.dark .card-body em,
html.dark section p,
html.dark section h1,
html.dark section h2,
html.dark section h3,
html.dark section h4,
html.dark section h5,
html.dark section h6,
html.dark section li,
html.dark section strong,
html.dark section em,
.dark #content p,
.dark #content h1,
.dark #content h2,
.dark #content h3,
.dark #content h4,
.dark #content h5,
.dark #content h6,
.dark #content li,
.dark #content strong,
.dark #content em,
.dark #content span:not(.sudoku-cell span),
.dark #Conclusion p,
.dark #Conclusion h1,
.dark #Conclusion h2,
.dark #Conclusion h3,
.dark #Conclusion h4,
.dark #Conclusion h5,
.dark #Conclusion h6,
.dark #Conclusion li,
.dark #Conclusion strong,
.dark #Conclusion em,
.dark .inner-pages-main p,
.dark .inner-pages-main h1,
.dark .inner-pages-main h2,
.dark .inner-pages-main h3,
.dark .inner-pages-main h4,
.dark .inner-pages-main h5,
.dark .inner-pages-main h6,
.dark .inner-pages-main li,
.dark .inner-pages-main strong,
.dark .inner-pages-main em,
.dark .w-full p,
.dark .w-full h1,
.dark .w-full h2,
.dark .w-full h3,
.dark .w-full h4,
.dark .w-full h5,
.dark .w-full h6,
.dark .w-full li,
.dark .w-full strong,
.dark .w-full em,
.dark .w-full span:not(.sudoku-cell span),
.dark .page-content p,
.dark .page-content h1,
.dark .page-content h2,
.dark .page-content h3,
.dark .page-content h4,
.dark .page-content h5,
.dark .page-content h6,
.dark .page-content li,
.dark .page-content strong,
.dark .page-content em,
.dark .card-body p,
.dark .card-body h1,
.dark .card-body h2,
.dark .card-body h3,
.dark .card-body h4,
.dark .card-body h5,
.dark .card-body h6,
.dark .card-body li,
.dark .card-body strong,
.dark .card-body em,
.dark section p,
.dark section h1,
.dark section h2,
.dark section h3,
.dark section h4,
.dark section h5,
.dark section h6,
.dark section li,
.dark section strong,
.dark section em {
    color: #ffffff !important;
}

/* Preserve specific color classes for buttons, links, and interactive elements */
.dark button,
.dark a,
.dark .text-blue-600,
.dark .text-blue-700,
.dark .text-blue-400,
.dark .text-indigo-600,
.dark .text-indigo-700,
.dark .text-indigo-400,
.dark .text-yellow-500,
.dark .text-yellow-400,
.dark .text-gray-300,
.dark .text-gray-200,
.dark .text-gray-400,
.dark input,
.dark select,
.dark textarea {
    /* These will use their specific dark mode classes from Tailwind */
}
.dark .modal-content {
    background-color: #1f2937; /* gray-800 */
    border-color: #4b5563; /* gray-600 */
    color: #e5e7eb; /* gray-200 */
}
.dark .modal-close {
    color: #9ca3af; /* gray-400 */
}

.dark .modal-close:hover,
.dark .modal-close:focus {
    color: #e5e7eb; /* gray-200 */
}
.dark .right-sidebar {
    background: #1e293b; /* slate-800 */
}


.dark .bg-white:not(.dark\:bg-gray-700) {
    background: #1f2937;
}

.dark .footer-menu ul li a {
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.dark .sudoku-cell.prefilled {
    color: #e5e7eb; /* gray-200 */
}

.dark .sudoku-cell.user-filled {
    color: #60a5fa; /* blue-400 */
}

.dark .sudoku-cell {
    border-color: #4b5563; /* gray-600 */
    background-color: #1f2937; /* gray-800 */
    color: #e5e7eb; /* gray-200 */
}
.dark .sudoku-cell.selected {
    background-color: #1e40af; /* blue-800 */
    color: #e5e7eb; /* gray-200 */
}
.dark .sudoku-grid {
    border-color: #4b5563; /* gray-600 */
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
.dark .sudoku-cell.selected {
    background-color: #1e40af; /* blue-800 */
    color: #e5e7eb; /* gray-200 */
}

.sudoku-cell.highlighted-rcb { /* Row, Column, Block highlight */
    background-color: #e0efff !important; /* blue-300 */
}

.dark .sudoku-cell.highlighted-rcb {
    background-color: #1e3a8a !important; /* blue-900 */
}

.dark .sudoku-cell.highlighted-num {
    background-color: #1e3a8a !important; /* blue-900 */
}

.dark .sudoku-cell.selected.highlighted-rcb,
.dark .sudoku-cell.selected.highlighted-num {
     background-color: #1e40af !important; /* blue-800 */
}
.dark .sudoku-cell.prefilled {
    color: #e5e7eb; /* gray-200 */
}

.dark .sudoku-cell.user-filled {
    color: #60a5fa; /* blue-400 */
}

.sudoku-cell.error {
    background-color: #fecaca !important; /* red-200 */
    color: #dc2626 !important; /* red-600 */
}

.dark .sudoku-cell.error {
    background-color: #7f1d1d !important; /* red-900 */
    color: #fca5a5 !important; /* red-300 */
}
/* Add thicker borders for 3x3 subgrids */

.sudoku-cell:nth-child(9n) {
    border-right-width: 1px; /* Reset for the last cell in a row */
    border-right-color: #d1d5db;
}

.dark .sudoku-cell:nth-child(9n) {
    border-right-color: #4b5563; /* gray-600 */
}


.toggle-btn {
    position: relative;
    font-weight: bold;

}

.toggle-btn::after {
    content: '+';
    transform: rotate(0deg);
    transition: transform 0.3s ease;
    background-color: #0ea5e9;
    color: white;
    width: 25px;
    height: 25px;
    border-radius: 9999px;
    text-align: center;
    font-size: 19px;
    font-weight: bold;
    padding: 0;
    position: relative;
    top: initial;
    right: initial;
    margin: 0 0 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-btn.expanded::after {
    transform: rotate(45deg);
}
.border-radius-7{
    border-radius:7px;
}
.has-pencil-marks .pencil-mark {
    line-height: 1 !important;
    font-size: 10px;
    font-weight: 700;
}
.sudoku-4x4 .pencil-mark {
    font-size: 18px;
    font-weight: 700;
    color: #7993af;
}

.dark .sudoku-4x4 .pencil-mark {
    color: #60a5fa;
}
.right-sidebar {
    width: 100%;
    max-width: 200px;
    /* background: #eaf4ff; */
    margin-right: 15px;
    padding: 10px 10px 10px 10px;
    position: sticky;
    top: 0;
}

.dark .right-sidebar {
    background: #1e293b; /* slate-800 */
}
.games-menu .active{
    background: linear-gradient(90deg, #6366f1, #d946ef ) !important;
    color: #fff;
    font-weight: 600 !important;
}
.games-menu .active:hover{
    color: #fff;
}
.games-menu a{
    transition:0.2s all linear;
    font-weight: 400 !important;
}
.games-menu a:hover{
    font-weight: 600 !important;
}
.number-palette button {
    font-size: 22px !important;
    font-size: 1.8cqi !important;
    font-weight: 600  !important;
    color: #4a3728 !important;
    background: linear-gradient(to bottom, #f2e6d2 0%, #f2e6d2 49%, #e5ccb0 50%, #e5ccb0 100%) !important;
    border: 2px solid #6b4a2b !important;
    border-radius: 10px !important;
    box-shadow: 0px 4px 0px #fff7ea inset, 0px -4px 0px #a0896e inset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    user-select: none;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.number-palette button:hover {
    transform: translateY(-1px);
}
.number-palette button:active {
    transform: translateY(3px);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.6),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2),
        0 1px 0 #6b4a2b;
}
.number-palette button.active-tool {
    outline: none !important;
    box-shadow: none;
    border-color: #3b82f6 !important;
    background: linear-gradient(to bottom, #d5e1ff 0%, #f2f6ff 49%, #e1eefe 50%, #bfdbfe 100%) !important;
    box-shadow: 0px 4px 0px #ffffff inset, 0px -4px 0px #9cc2ff inset !important;
    color: #0056e3 !important;
}
.sudoku-grid,.number-palette {
    max-width: calc(100vh - 250px);
    margin-left: auto;
    margin-right: auto;
}
.number-palette button {height: 7vh !important;width: 100%;}
.sudoku-grid {
    container-type: inline-size;
}

.sudoku-cell {
    font-size: 22px;
    font-size: 7cqi;
    line-height: 1;
    font-weight: 700;
    color:#7f1d1d;
    border: 1px solid #e6d4b1; 
    /* background: #fff8e2; */
}
.sudoku-cell.prefilled{
    color: #4a3728;
}
.sudoku-cell.user-filled {
    color: #92490f;
}
.sudoku-cell.highlighted-rcb { /* Row, Column, Block highlight */
    background-color: #fff1c2 !important; /* blue-300 */
}

.sudoku-cell.highlighted-num { /* Same number highlight */
    background-color: #e5c097 !important; /* blue-200 */
}
.sudoku-cell.selected.highlighted-rcb,
.sudoku-cell.selected.highlighted-num {
     background-color: #c2a483 !important; /* blue-400 for selected cell itself */
}

.sudoku-12x12 .sudoku-cell {
    font-size: 35px;
    font-weight: 600;
    font-size: 4.75cqi;
}
.btn-custom{
    color: #4a3728 !important;
    background: linear-gradient(to bottom, #f2e6d2 0%, #f2e6d2 49%, #e5ccb0 50%, #e5ccb0 100%) !important;
    border: 2px solid #6b4a2b !important;
    border-radius: 10px !important;
    box-shadow: 0px 4px 0px #fff7ea inset, 0px -4px 0px #a0896e inset !important;
        display: flex;
    align-items: center;
    gap: 10px;
}
.btn-custom .icon{max-width: 24px; max-height: 24px;min-width: 24px; min-height: 24px;}
.btn-custom svg{max-width: 24px; max-height: 24px;min-width: 24px; min-height: 24px;}
.sudoku-grid {
    background: #fff;
    border-radius: 9px;
    overflow: hidden;
}
.dark .sudoku-grid{
    background:transparent;
}
.btn-custom.with-tooltip {
    position: relative;
}

.btn-custom.with-tooltip:after {content: attr(data-tooltip);position: absolute;top: -30px;white-space: nowrap;background: #000000;transform: translateX(-2px) translateY(8px) scale(0.9);left: -10px;color: #fff;padding: 0 10px;font-size: 12px;text-transform: uppercase;border-radius: 6px;opacity: 0;visibility: hidden;transition: 0.2s all linear;min-width: 85px;}

.btn-custom.with-tooltip:hover:after {
    transform: translateX(-2px) translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
}
.content-main a{text-decoration: underline;color: #0051ff;}
.content-main blockquote {
    padding: 1rem;
    padding-right: 5rem;
    position: relative;
    font-size: 110%;
    background: no-repeat 97% 90% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='40' height='40'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M19.417 6.679C20.447 7.773 21 9 21 10.989c0 3.5-2.457 6.637-6.03 8.188l-.893-1.378c3.335-1.804 3.987-4.145 4.247-5.621-.537.278-1.24.375-1.929.311-1.804-.167-3.226-1.648-3.226-3.489a3.5 3.5 0 0 1 3.5-3.5c1.073 0 2.099.49 2.748 1.179zm-10 0C10.447 7.773 11 9 11 10.989c0 3.5-2.457 6.637-6.03 8.188l-.893-1.378c3.335-1.804 3.987-4.145 4.247-5.621-.537.278-1.24.375-1.929.311C4.591 12.322 3.17 10.841 3.17 9a3.5 3.5 0 0 1 3.5-3.5c1.073 0 2.099.49 2.748 1.179z' fill='rgba(218,222,237,1)'/%3E%3C/svg%3E");
    margin: 15px 0;
    border-style: none;
    border-left-style: solid;
    border-width: 0.4rem;
    line-height: inherit;
    border-radius: 9px;
    background-color: rgba(185, 185, 185, 0.15);
    border-color: #e5ccb0;
    display: inline-block;
    max-width: initial;
}


@media screen and (max-width:1550px) {
    .sudoku-grid,.number-palette { 
        max-width: calc(100vh - 100px); 
    }
}

@media screen and (max-width:900px) {
    .games-menu {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        max-width: 100%;
        overflow: auto;
        white-space: nowrap;
        align-items: center;
    }
    .right-sidebar{max-width: 100%;
            position: relative;}
    .number-palette button {
        font-size: 22px !important;
        font-size: 3cqi !important;
    }
    .controls button {
        width: 32.33%;
        margin: 1% 0.5%;
    }
    .controls{gap:0 !important}
    .btn-custom.with-tooltip:after{        position: relative;
        opacity: 1;
        visibility: visible;
        top: initial;
        left: initial;
        transform: initial;
        background: transparent;
        padding: 0;
        color: inherit;
        font-weight: 800;
        font-size: inherit;
        text-transform: initial;
        min-width: initial;
        white-space: normal;
    }
    .btn-custom.with-tooltip:hover:after {
        transform: none;
        opacity: 1;
        visibility: visible;
    }

}
@media screen and (max-width:660px) {
    .number-palette button {
        width: 19%;
        margin-bottom: 5px;
        height: 14vw !important;
    }
    .sudoku-12x12 .number-palette button {
        width: 15.5%;
        height: 14vw !important;
    }
    .number-palette {
        flex-wrap: wrap;
        gap: 1% !important;
        margin-top: 10px;
    }

}
@media screen and (max-width:600px) {
    .number-palette button {
        font-size: 22px !important;
        font-size: 6cqi !important;
    }
    .right-sidebar {
        padding: 0 0 10px 0;
        margin:0 0 0 0;
    }
    .number-palette {
        flex-wrap: wrap;
        gap: 1% !important;
        margin-top: 10px;
    }
    .number-palette button {
        width: 19%;
        margin-bottom: 5px;
        height: 14vw !important;
    }
    .sudoku-12x12 .number-palette button {
        width: 15.5%;
        height: 14vw !important;
    }
    .games-menu {
        padding: 5px 5px !important;
        border-radius: 59px !important;
        border: none !important;
    }

    .games-menu a {
        border-radius: 39px;
        padding: 3px 20px !important;
        margin: 0 5px 0 0px;
    }
    .sudoku-cell{font-size: 22px;
    font-size: 6cqi;}
    .btn-custom.with-tooltip:after {
        font-size: 12px;
        text-align: left;
    }
    .btn-custom .icon,.btn-custom svg {
        max-width: 20px;
        max-height: 20px;
        min-width: 20px;
        min-height: 20px;
    }
}