/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-joxr4rzqv9] {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #000000;
    color: #ffffff;
}

main[b-joxr4rzqv9] {
    flex: 1;
    /* Flex items default to min-width:auto, so this column refused to shrink
       below its content's intrinsic width - the About page's 5-item timeline
       (5 x 180px + gaps) then pushed the whole page into horizontal overflow
       and clipped the body text. min-width:0 lets it shrink; the timeline
       still scrolls inside its own overflow-x:auto section. */
    min-width: 0;
    background: #000000;
}

.sidebar[b-joxr4rzqv9] {
    background-image: linear-gradient(180deg, #000000 0%, #0a0a0a 70%);
}

.top-row[b-joxr4rzqv9] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-joxr4rzqv9]  a, .top-row[b-joxr4rzqv9]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-joxr4rzqv9]  a:hover, .top-row[b-joxr4rzqv9]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-joxr4rzqv9]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-joxr4rzqv9] {
        justify-content: space-between;
    }

    .top-row[b-joxr4rzqv9]  a, .top-row[b-joxr4rzqv9]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-joxr4rzqv9] {
        flex-direction: row;
    }

    .sidebar[b-joxr4rzqv9] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-joxr4rzqv9] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-joxr4rzqv9]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-joxr4rzqv9], article[b-joxr4rzqv9] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-joxr4rzqv9] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-joxr4rzqv9] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Black Fluorescent Neon Title with Green Accents */
.navbar-brand[b-2f8ropg7f7] {
    font-size:1.5rem;
    font-weight:700;
    color:#000000; /* black core */
    text-transform:uppercase;
    letter-spacing:2px;
    position:relative;
    z-index:1;
    text-decoration:none;
    display:flex;
    align-items:center;
    height:100%;
    padding:0;
    margin:0;
    margin-left:2.5rem;
    line-height:1;
    /* crisp black outline + neon halo */
    text-shadow:
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000,
        0 0 8px rgba(255,255,255,0.95),
        0 0 16px rgba(220,230,255,0.9),
        0 0 28px rgba(180,210,255,0.8),
        0 0 42px rgba(150,200,255,0.7),
        0 0 58px rgba(120,190,255,0.6),
        0 0 24px rgba(57,255,20,0.6),
        0 0 44px rgba(57,255,20,0.55),
        0 0 72px rgba(57,255,20,0.5);
    animation:black-green-neon-b-2f8ropg7f7 3s ease-in-out infinite alternate;
}
.navbar-brand:hover[b-2f8ropg7f7] {
    text-decoration:none;
}

@keyframes black-green-neon-b-2f8ropg7f7 {
    from {
        text-shadow:
            -2px -2px 0 #000,
            2px -2px 0 #000,
            -2px 2px 0 #000,
            2px 2px 0 #000,
            0 0 6px rgba(255,255,255,0.9),
            0 0 12px rgba(220,230,255,0.85),
            0 0 22px rgba(180,210,255,0.75),
            0 0 34px rgba(150,200,255,0.65),
            0 0 48px rgba(120,190,255,0.55),
            0 0 18px rgba(57,255,20,0.5),
            0 0 32px rgba(57,255,20,0.45);
    }
    to {
        text-shadow:
            -2px -2px 0 #000,
            2px -2px 0 #000,
            -2px 2px 0 #000,
            2px 2px 0 #000,
            0 0 10px rgba(255,255,255,1),
            0 0 22px rgba(220,230,255,0.95),
            0 0 36px rgba(180,210,255,0.9),
            0 0 54px rgba(150,200,255,0.8),
            0 0 80px rgba(120,190,255,0.7),
            0 0 30px rgba(57,255,20,0.7),
            0 0 60px rgba(57,255,20,0.6),
            0 0 90px rgba(57,255,20,0.5);
    }
}

.navbar-toggler[b-2f8ropg7f7] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-2f8ropg7f7] { background-color: rgba(255, 255, 255, 0.5); }

.top-row[b-2f8ropg7f7] { min-height: 3.5rem; background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 100%); border-bottom: 2px solid rgba(100, 150, 255, 0.3); position: relative; overflow: hidden; display: flex; align-items: center; }
.top-row .container-fluid[b-2f8ropg7f7] { display: flex; align-items: center; justify-content: center; height: 100%; }


.top-row[b-2f8ropg7f7]::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 80%, rgba(100,150,255,0.1) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(150,100,255,0.1) 0%, transparent 50%), radial-gradient(circle at 50% 90%, rgba(255,150,100,0.08) 0%, transparent 50%); animation: fireworks-shimmer-b-2f8ropg7f7 4s ease-in-out infinite; pointer-events: none; }
@keyframes fireworks-shimmer-b-2f8ropg7f7 { 0%,100% { opacity: 0.3; } 50% { opacity: 0.6; } }

.nav-item[b-2f8ropg7f7] { font-size:0.95rem; padding-bottom:0.5rem; display: flex; justify-content: center; }
.nav-item:first-of-type[b-2f8ropg7f7] { padding-top:1rem; }
.nav-item:last-of-type[b-2f8ropg7f7] { padding-bottom:1rem; }

.nav-item[b-2f8ropg7f7]  .nav-link { color:#b8c5ff; background:linear-gradient(135deg, rgba(20,30,50,0.4) 0%, rgba(30,40,60,0.4) 100%); border:1px solid rgba(100,150,255,0.2); border-radius:8px; height:3rem; display:flex; align-items:center; line-height:3rem; width:70%; font-weight:600; text-transform:uppercase; letter-spacing:1px; position:relative; overflow:hidden; transition:all 0.4s ease; text-decoration:none; }
.nav-item[b-2f8ropg7f7]  .nav-link:hover { background:linear-gradient(135deg, rgba(150,100,255,0.3) 0%, rgba(255,150,100,0.3) 100%); color:#ffffff; border:1px solid rgba(255,200,150,0.6); transform:translateY(-2px); box-shadow:0 4px 20px rgba(255,150,100,0.3),0 0 40px rgba(255,150,100,0.2), inset 0 0 20px rgba(255,200,150,0.15); text-decoration:none; }
.nav-item[b-2f8ropg7f7]  a.active { background:linear-gradient(135deg, rgba(100,150,255,0.25) 0%, rgba(150,100,255,0.25) 100%); color:#ffffff; border:1px solid rgba(150,100,255,0.6); box-shadow:0 0 15px rgba(150,100,255,0.4),0 0 30px rgba(150,100,255,0.2), inset 0 0 15px rgba(150,100,255,0.15); text-decoration:none; }

/* Neon Fluorescent Overrides */
.nav-item:first-of-type[b-2f8ropg7f7]  .nav-link {
    color:#ff1493 !important;
    border-color:rgba(255,20,147,0.5) !important;
}
.nav-item:first-of-type[b-2f8ropg7f7]  .nav-link:hover,
.nav-item:first-of-type[b-2f8ropg7f7]  .nav-link:focus {
    color:#ff1493 !important;
    background:linear-gradient(135deg, rgba(255,20,147,0.2) 0%, rgba(255,105,180,0.2) 100%) !important;
    border-color:rgba(255,20,147,0.8) !important;
    box-shadow:0 0 15px rgba(255,20,147,0.5), inset 0 0 10px rgba(255,20,147,0.2) !important;
}
.nav-item:first-of-type[b-2f8ropg7f7]  a.active {
    color:#ff1493 !important;
    background:linear-gradient(135deg, rgba(255,20,147,0.3) 0%, rgba(255,105,180,0.3) 100%) !important;
    border-color:rgba(255,20,147,0.8) !important;
    box-shadow:0 0 20px rgba(255,20,147,0.6) !important;
}

.nav-item:last-of-type[b-2f8ropg7f7]  .nav-link {
    color:#00b7ff !important;
    border-color:rgba(0,183,255,0.5) !important;
}
.nav-item:last-of-type[b-2f8ropg7f7]  .nav-link:hover,
.nav-item:last-of-type[b-2f8ropg7f7]  .nav-link:focus {
    color:#00b7ff !important;
    background:linear-gradient(135deg, rgba(0,183,255,0.2) 0%, rgba(0,153,255,0.2) 100%) !important;
    border-color:rgba(0,183,255,0.8) !important;
    box-shadow:0 0 15px rgba(0,183,255,0.5), inset 0 0 10px rgba(0,183,255,0.2) !important;
}
.nav-item:last-of-type[b-2f8ropg7f7]  a.active {
    color:#00b7ff !important;
    background:linear-gradient(135deg, rgba(0,183,255,0.3) 0%, rgba(0,153,255,0.3) 100%) !important;
    border-color:rgba(0,183,255,0.8) !important;
    box-shadow:0 0 20px rgba(0,183,255,0.6) !important;
}

.nav-scrollable[b-2f8ropg7f7] { display:none; background:linear-gradient(180deg,#0a0a1a 0%, #12121f 100%); }
.navbar-toggler:checked ~ .nav-scrollable[b-2f8ropg7f7] { display:block; }
@media (min-width:641px) { .navbar-toggler[b-2f8ropg7f7]{display:none;} .nav-scrollable[b-2f8ropg7f7]{display:block; height:calc(100vh - 3.5rem); overflow-y:auto;} }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-fel9ms8w2y],
.components-reconnect-repeated-attempt-visible[b-fel9ms8w2y],
.components-reconnect-failed-visible[b-fel9ms8w2y],
.components-pause-visible[b-fel9ms8w2y],
.components-resume-failed-visible[b-fel9ms8w2y],
.components-rejoining-animation[b-fel9ms8w2y] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-fel9ms8w2y],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-fel9ms8w2y],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-fel9ms8w2y],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-fel9ms8w2y],
#components-reconnect-modal.components-reconnect-retrying[b-fel9ms8w2y],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-fel9ms8w2y],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-fel9ms8w2y],
#components-reconnect-modal.components-reconnect-failed[b-fel9ms8w2y],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-fel9ms8w2y] {
    display: block;
}


#components-reconnect-modal[b-fel9ms8w2y] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-fel9ms8w2y 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-fel9ms8w2y 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-fel9ms8w2y 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-fel9ms8w2y]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-fel9ms8w2y 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-fel9ms8w2y {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-fel9ms8w2y {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-fel9ms8w2y {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-fel9ms8w2y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-fel9ms8w2y] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-fel9ms8w2y] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-fel9ms8w2y] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-fel9ms8w2y] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-fel9ms8w2y] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-fel9ms8w2y] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-fel9ms8w2y 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-fel9ms8w2y] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-fel9ms8w2y {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/About.razor.rz.scp.css */
.about-container[b-pz69bf9c8u]{max-width:1200px;padding:20px;line-height:1.6;color:#333}
.about-container h1[b-pz69bf9c8u]{color:#667eea;font-size:2.5rem;margin-bottom:1.5rem;border-bottom:3px solid #667eea;padding-bottom:0.5rem}
.about-section[b-pz69bf9c8u]{margin-bottom:2.5rem;background:#fff;padding:1.5rem;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.about-section h2[b-pz69bf9c8u]{color:#764ba2;font-size:1.8rem;margin-bottom:1.5rem;display:flex;align-items:center;gap:0.5rem}
.about-section h3[b-pz69bf9c8u]{color:#5568d3;font-size:1.3rem;margin-top:1.5rem;margin-bottom:0.8rem}
.about-section p[b-pz69bf9c8u]{margin-bottom:1rem;font-size:1.05rem}

/* Timeline Section */
.timeline-section[b-pz69bf9c8u]{padding:2rem;overflow-x:auto}
.timeline[b-pz69bf9c8u]{display:flex;position:relative;padding:3rem 1rem 2rem;gap:2rem;margin-bottom:2rem}
.timeline[b-pz69bf9c8u]::before{content:'';position:absolute;top:60px;left:0;right:0;height:4px;background:linear-gradient(90deg,#667eea 0%,#764ba2 50%,#f093fb 100%);z-index:0}
.timeline-item[b-pz69bf9c8u]{flex:1;min-width:180px;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.timeline-year[b-pz69bf9c8u]{font-size:1.3rem;font-weight:700;color:#667eea;background:#fff;padding:0.5rem 1rem;border-radius:20px;box-shadow:0 2px 8px rgba(102,126,234,.3);margin-bottom:1rem;z-index:2;position:relative}
.timeline-dot[b-pz69bf9c8u]{width:20px;height:20px;background:#fff;border:4px solid #667eea;border-radius:50%;position:relative;z-index:2;box-shadow:0 0 0 4px rgba(102,126,234,.2)}
.timeline-content[b-pz69bf9c8u]{margin-top:1.5rem;background:linear-gradient(135deg,#f5f7ff 0%,#e8ebff 100%);padding:1rem;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.08);transition:all .3s ease}
.timeline-content h3[b-pz69bf9c8u]{color:#764ba2;font-size:1.1rem;margin:0 0 0.5rem 0}
.timeline-content p[b-pz69bf9c8u]{font-size:0.95rem;margin:0;color:#555}
.timeline-item:hover .timeline-content[b-pz69bf9c8u]{transform:translateY(-5px);box-shadow:0 4px 12px rgba(102,126,234,.2)}
.timeline-item:hover .timeline-dot[b-pz69bf9c8u]{transform:scale(1.3);background:#667eea;border-color:#764ba2}
.history-details[b-pz69bf9c8u]{margin-top:1.5rem;padding-top:1.5rem;border-top:2px solid #e8ebff}

/* How to Play Cards */
.how-to-play[b-pz69bf9c8u]{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-top:1.5rem}
.rule-card[b-pz69bf9c8u]{background:linear-gradient(135deg,#f5f7ff 0%,#e8ebff 100%);padding:1.5rem;border-radius:12px;box-shadow:0 2px 6px rgba(0,0,0,.08);transition:all .3s ease;display:flex;flex-direction:column;align-items:center;text-align:center}
.rule-card:hover[b-pz69bf9c8u]{transform:translateY(-5px);box-shadow:0 4px 12px rgba(102,126,234,.2)}
.rule-number[b-pz69bf9c8u]{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;font-size:1.5rem;font-weight:700;border-radius:50%;margin-bottom:1rem;box-shadow:0 2px 8px rgba(102,126,234,.4)}
.rule-card p[b-pz69bf9c8u]{margin:0;font-size:1rem;color:#555}

/* Play Section */
.play-section[b-pz69bf9c8u]{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;text-align:center;padding:2.5rem}
.play-section h2[b-pz69bf9c8u]{color:#fff;font-size:2rem;margin-bottom:1rem}
.play-section p[b-pz69bf9c8u]{font-size:1.2rem;margin-bottom:1.5rem;color:#f0f0f0}
.play-now-btn[b-pz69bf9c8u]{display:inline-flex;align-items:center;gap:0.5rem;background:#fff;color:#667eea;padding:14px 32px;border-radius:50px;text-decoration:none;font-size:1.2rem;font-weight:600;box-shadow:0 4px 12px rgba(0,0,0,.2);transition:all .3s ease}
.play-now-btn:hover[b-pz69bf9c8u]{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.3);color:#764ba2}
.play-now-btn .bi[b-pz69bf9c8u]{font-size:1.5rem}

/* Responsive Design */
@media (max-width:768px){
    .timeline[b-pz69bf9c8u]{flex-direction:column;padding:1rem}
    .timeline[b-pz69bf9c8u]::before{width:4px;height:100%;top:0;left:50%;transform:translateX(-50%)}
    .timeline-item[b-pz69bf9c8u]{min-width:100%}
}
/* /Components/Pages/SudokuBoard.razor.rz.scp.css */
.sudoku-root[b-6nfv1y3xa2]{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:20px;position:relative;background:var(--page-bg,#0a0a0a);border-radius:12px}

/* Header strip: difficulty pills left, stats right, spanning the play area.
   The fixed dark backdrop is the visibility guarantee: whatever the colour
   wheels do to the page behind it, everything in here stays readable. */
.top-strip[b-6nfv1y3xa2]{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;width:100%;max-width:700px;background:#101014;border:1px solid #26262e;border-radius:12px;padding:8px 12px}

/* Board on the left, control panel on the right; the panel wraps below the
   board on narrow screens */
.play-area[b-6nfv1y3xa2]{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
/* Board and colour panel stack in one column, so the panel below the board
   starts at the board's left edge and stretches to exactly the board's width. */
.board-column[b-6nfv1y3xa2]{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.side-panel[b-6nfv1y3xa2]{display:flex;flex-direction:column;gap:10px;width:200px;background:#101014;border:1px solid #26262e;border-radius:14px;padding:12px}
.pill-row[b-6nfv1y3xa2]{display:flex;flex-wrap:wrap;gap:6px}

/* Icon tiles: Undo / Redo / Erase / Notes */
.tile-grid[b-6nfv1y3xa2]{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile[b-6nfv1y3xa2]{
    display:flex;flex-direction:column;align-items:center;gap:5px;
    padding:10px 0 8px;border-radius:12px;cursor:pointer;
    background:#1c1c22;border:1px solid #2e2e38;
    color:#e2e8f0;font-size:12px;font-weight:600;
    transition:border-color .15s ease,background .15s ease;
}
.tile:hover:not(:disabled)[b-6nfv1y3xa2]{border-color:#4b4b5a;background:#232330}
.tile:disabled[b-6nfv1y3xa2]{cursor:default;color:#475569}
.tile svg[b-6nfv1y3xa2]{width:20px;height:20px}
.tile.undo svg[b-6nfv1y3xa2]{color:#4ade80}
.tile.redo svg[b-6nfv1y3xa2]{color:#22d3ee}
.tile.erase svg[b-6nfv1y3xa2]{color:#fb923c}
.tile.notes svg[b-6nfv1y3xa2]{color:#a78bfa}
.tile:disabled svg[b-6nfv1y3xa2]{color:#3f3f46}

/* The little notes-mode switch inside the Notes tile */
.mini-switch[b-6nfv1y3xa2]{width:26px;height:14px;border-radius:999px;background:#3f3f46;position:relative;transition:background .15s ease}
.mini-switch .knob[b-6nfv1y3xa2]{position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:#e2e8f0;transition:transform .15s ease}
.mini-switch.on[b-6nfv1y3xa2]{background:#7c3aed}
.mini-switch.on .knob[b-6nfv1y3xa2]{transform:translateX(12px)}

/* Full-width action buttons: Validate / Hint / Solve */
.bigbtn[b-6nfv1y3xa2]{
    display:flex;align-items:center;justify-content:center;gap:8px;
    width:100%;padding:10px 0;border-radius:12px;cursor:pointer;
    font-size:14px;font-weight:600;
    transition:filter .15s ease;
}
.bigbtn svg[b-6nfv1y3xa2]{width:18px;height:18px}
.bigbtn:hover:not(:disabled)[b-6nfv1y3xa2]{filter:brightness(1.25)}
.bigbtn:disabled[b-6nfv1y3xa2]{cursor:default;filter:saturate(0.3) brightness(0.7)}
.bigbtn.validate[b-6nfv1y3xa2]{background:rgba(22,101,52,0.18);border:1px solid #16a34a;color:#4ade80}
.bigbtn.hint[b-6nfv1y3xa2]{background:rgba(2,132,199,0.15);border:1px solid #0284c7;color:#38bdf8}
.bigbtn.solve[b-6nfv1y3xa2]{background:rgba(124,58,237,0.15);border:1px solid #7c3aed;color:#a78bfa}

/* Collapsible colour customisation - its own card under the board */
.customize[b-6nfv1y3xa2]{box-sizing:border-box;background:#101014;border:1px solid #26262e;border-radius:14px;padding:8px 12px 12px}
.customize-header[b-6nfv1y3xa2]{
    width:100%;display:flex;justify-content:space-between;align-items:center;
    background:none;border:none;cursor:pointer;padding:4px 2px;
    color:#94a3b8;font-size:12px;font-weight:600;
}
.customize-header:hover[b-6nfv1y3xa2]{color:#e2e8f0}
/* Four wheels side by side across the panel; each stacks its own label below. */
.wheel-list[b-6nfv1y3xa2]{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px;padding-top:8px}
.wheel-row[b-6nfv1y3xa2]{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1 1 0;min-width:96px}
.reset-colors[b-6nfv1y3xa2]{margin-top:10px}
.wheel[b-6nfv1y3xa2]{
    width:44px;height:44px;border-radius:50%;cursor:pointer;position:relative;flex:none;
    background:conic-gradient(#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
    touch-action:none;user-select:none;
}
/* The hole doubles as a live preview of the current pick */
.wheel[b-6nfv1y3xa2]::after{
    content:'';position:absolute;inset:10px;border-radius:50%;
    background:var(--wheel-fill,#101014);border:2px solid #101014;
    pointer-events:none;
}
/* Explains the two gestures the section supports */
.customize-hint[b-6nfv1y3xa2]{font-size:11px;color:#94a3b8;padding:6px 2px 2px;line-height:1.5}
.wheel-meta[b-6nfv1y3xa2]{display:flex;flex-direction:column;gap:4px;min-width:0;width:100%;align-items:center}
.wheel-name[b-6nfv1y3xa2]{font-size:12px;font-weight:600;color:#e2e8f0;text-align:center}
.swatch[b-6nfv1y3xa2]{
    font-size:11px;font-variant-numeric:tabular-nums;color:#0f172a;
    background:#fff;border:1px solid #2e2e38;border-radius:6px;padding:2px 6px;
    text-shadow:0 0 3px rgba(255,255,255,0.9), 0 0 3px rgba(255,255,255,0.9);
    font-weight:700;width:fit-content;
}

/* Color picker chip: label with color preview, hex value, and picker icon */
.chip[b-6nfv1y3xa2]{
    display:flex;align-items:center;gap:8px;cursor:pointer;
    padding:4px;border-radius:6px;background:transparent;border:1px solid #2e2e38;
    justify-content:center;position:relative;
    transition:border-color .15s ease,background .15s ease;
}
.chip:hover[b-6nfv1y3xa2]{border-color:#3f3f46;background:rgba(63,63,70,0.3)}
/* The native picker pops up anchored to this input's box. display:none left it
   with no box, so the browser fell back to the top-left corner of the page -
   keep the input over the chip and make it invisible instead. */
.chip input[type="color"][b-6nfv1y3xa2]{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;padding:0;border:none;background:none;cursor:pointer}
.chip-color[b-6nfv1y3xa2]{
    width:20px;height:20px;border-radius:4px;border:1px solid #2e2e38;flex:none;
}
.chip-hex[b-6nfv1y3xa2]{font-size:11px;color:#cbd5e1;font-weight:600;font-family:monospace}
.chip-icon[b-6nfv1y3xa2]{width:16px;height:16px;flex:none;color:#94a3b8;transition:color .15s ease}
.chip:hover .chip-icon[b-6nfv1y3xa2]{color:#cbd5e1}

/* Pills: small, flat, crisp - solid fill when active, outline otherwise */
.pill[b-6nfv1y3xa2]{
    font-size:12px;font-weight:600;line-height:1.2;
    padding:5px 12px;border-radius:999px;
    background:transparent;border:1px solid transparent;
    cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.pill:disabled[b-6nfv1y3xa2]{cursor:default}
.pill.easy[b-6nfv1y3xa2]{color:#4ade80;border-color:#166534}
.pill.easy:hover:not(:disabled):not(.active)[b-6nfv1y3xa2]{background:rgba(22,163,74,0.15)}
.pill.easy.active[b-6nfv1y3xa2]{background:#15803d;border-color:#15803d;color:#fff}
.pill.med[b-6nfv1y3xa2]{color:#fbbf24;border-color:#92400e}
.pill.med:hover:not(:disabled):not(.active)[b-6nfv1y3xa2]{background:rgba(217,119,6,0.15)}
.pill.med.active[b-6nfv1y3xa2]{background:#b45309;border-color:#b45309;color:#fff}
.pill.hard[b-6nfv1y3xa2]{color:#f87171;border-color:#991b1b}
.pill.hard:hover:not(:disabled):not(.active)[b-6nfv1y3xa2]{background:rgba(220,38,38,0.15)}
.pill.hard.active[b-6nfv1y3xa2]{background:#b91c1c;border-color:#b91c1c;color:#fff}
.pill.pro[b-6nfv1y3xa2]{color:#a78bfa;border-color:#5b21b6}
.pill.pro:hover:not(:disabled):not(.active)[b-6nfv1y3xa2]{background:rgba(124,58,237,0.15)}
.pill.pro.active[b-6nfv1y3xa2]{background:#6d28d9;border-color:#a78bfa;color:#fff}

/* Demoted actions: quiet text links below the keypad */
.link-row[b-6nfv1y3xa2]{display:flex;gap:12px;justify-content:center}
.linkbtn[b-6nfv1y3xa2]{
    background:none;border:none;padding:2px 4px;cursor:pointer;
    font-size:12px;color:#94a3b8;text-decoration:underline;
}
.linkbtn:hover:not(:disabled)[b-6nfv1y3xa2]{color:#cbd5e1}
.linkbtn:disabled[b-6nfv1y3xa2]{color:#334155;cursor:default}

/* The board: black canvas, neon 3x3 separators */
.board[b-6nfv1y3xa2]{display:inline-block;position:relative;overflow:hidden;user-select:none;background:#000000;border:2px solid #ffffff;transition:all .3s ease}
.board.celebration[b-6nfv1y3xa2]{animation:board-flash-b-6nfv1y3xa2 0.5s ease-in-out 3, board-rainbow-b-6nfv1y3xa2 2s ease-in-out infinite 1.5s;box-shadow:0 0 30px rgba(255,215,0,.8),0 0 60px rgba(255,0,255,.6),0 0 90px rgba(0,255,255,.4)}
.board:focus-visible[b-6nfv1y3xa2]{outline:3px solid #4b9cff;outline-offset:3px}

.srow[b-6nfv1y3xa2]{display:flex}
.cell[b-6nfv1y3xa2]{
    width:52px;height:52px;display:flex;align-items:center;justify-content:center;
    font-size:22px;outline:none;cursor:pointer;
    border:1px solid #3a3a3a;background:var(--grid-bg,#1a1a1a);color:var(--grid-num,#ffffff);
    /* box-shadow only: transitioning background freezes in Chromium when the
       change arrives through an inherited custom property (the colour wheels). */
    transition:box-shadow .2s ease;
}
.cell span[b-6nfv1y3xa2]{color:var(--grid-num,#ffffff)}
.cell.given[b-6nfv1y3xa2]{font-weight:bold}
.cell.left3[b-6nfv1y3xa2]{border-left:4px solid var(--grid-border,#39ff14);box-shadow:-3px 0 6px -1px color-mix(in srgb, var(--grid-border,#39ff14) 50%, transparent)}
.cell.top3[b-6nfv1y3xa2]{border-top:4px solid var(--grid-border,#39ff14);box-shadow:0 -3px 6px -1px color-mix(in srgb, var(--grid-border,#39ff14) 50%, transparent)}
.cell.right3[b-6nfv1y3xa2]{border-right:4px solid var(--grid-border,#39ff14);box-shadow:3px 0 6px -1px color-mix(in srgb, var(--grid-border,#39ff14) 50%, transparent)}
.cell.bottom3[b-6nfv1y3xa2]{border-bottom:4px solid var(--grid-border,#39ff14);box-shadow:0 3px 6px -1px color-mix(in srgb, var(--grid-border,#39ff14) 50%, transparent)}

.cell.selected[b-6nfv1y3xa2]{animation:selpulse-b-6nfv1y3xa2 1.2s ease-in-out infinite;background:var(--grid-bg,#1a1a1a)}
@keyframes selpulse-b-6nfv1y3xa2 {
    0% { box-shadow: inset 0 0 0 0 #4b9cff; }
    50% { box-shadow: inset 0 0 0 3px #4b9cff; }
    100% { box-shadow: inset 0 0 0 0 #4b9cff; }
}

.cell.rowhl:not(.selected):not(.conflict)[b-6nfv1y3xa2]{background:rgba(70,70,90,0.6);color:#ffffff;box-shadow:none}
.cell.colhl:not(.selected):not(.conflict)[b-6nfv1y3xa2]{background:rgba(70,70,90,0.6);color:#ffffff;box-shadow:none}
/* Drawn on the cells themselves. An absolutely-positioned overlay cannot line
   up with the block: the 4px 3x3 separators make the column pitch non-uniform
   (57px vs 54px), and at fractional device-pixel ratios those borders land on
   sub-pixel boundaries. Tinting the cells is exact at any zoom or DPR. */
.cell.blockhl:not(.selected):not(.conflict):not(.valhl):not(.rowhl):not(.colhl)[b-6nfv1y3xa2]{background:rgba(70,70,90,0.3)}

.cell.conflict[b-6nfv1y3xa2]{animation:conflictpulse-b-6nfv1y3xa2 1.5s ease-in-out infinite;background:#4a0000;color:#ff6b6b;font-weight:bold}
@keyframes conflictpulse-b-6nfv1y3xa2 {
    0% { background: #4a0000; box-shadow: inset 0 0 0 0 rgba(255, 107, 107, 0.3); }
    50% { background: #660000; box-shadow: inset 0 0 0 3px rgba(255, 107, 107, 0.5); }
    100% { background: #4a0000; box-shadow: inset 0 0 0 0 rgba(255, 107, 107, 0.3); }
}

/* Matching value highlight */
.cell.valhl[b-6nfv1y3xa2]{
    background:linear-gradient(135deg, rgba(255,255,140,0.28) 0%, rgba(140,255,235,0.28) 100%) !important;
    box-shadow:0 0 10px rgba(255,255,140,0.55), 0 0 18px rgba(140,255,235,0.5), inset 0 0 0 2px rgba(255,255,255,0.18);
    color:#ffffff;
    text-shadow:0 0 6px rgba(255,255,255,0.7);
    filter:saturate(1.25) brightness(1.2);
}

/* Pencil marks: a 3x3 mini-grid of candidate digits inside an empty cell.
   Named pencil-marks, not "notes": the Notes button also carries a `notes`
   class, and a bare .notes rule once made that button click-transparent. */
.pencil-marks[b-6nfv1y3xa2]{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    grid-template-rows:repeat(3, 1fr);
    width:100%;
    height:100%;
    pointer-events:none;
}
.note[b-6nfv1y3xa2]{
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    line-height:1;
    color:#94a3b8;
    font-weight:600;
}

/* The 3x3 keypad: flat crisp tiles, larger than the pills, smaller than cells */
.sudoku-root[b-6nfv1y3xa2]  .keypad{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:48px;gap:6px}
.sudoku-root[b-6nfv1y3xa2]  .keytile{
    display:flex;align-items:center;justify-content:center;
    background:#1e293b;color:#ffffff;border:1px solid #475569;border-radius:8px;
    font-size:18px;font-weight:700;cursor:pointer;
    transition:background .15s ease,border-color .15s ease;
}
.sudoku-root[b-6nfv1y3xa2]  .keytile:hover:not(:disabled){background:#334155;border-color:#64748b}
.sudoku-root[b-6nfv1y3xa2]  .keytile:disabled:not(.complete){color:#475569;cursor:default}
.sudoku-root[b-6nfv1y3xa2]  .keytile.complete{background:#14532d;color:#4ade80;border-color:#166534;cursor:default}

/* Stats strip: timer, best time and mistakes at the top right */
.sudoku-root[b-6nfv1y3xa2]  .stats{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:13px;color:#94a3b8;font-variant-numeric:tabular-nums}
.sudoku-root[b-6nfv1y3xa2]  .stats .timer{font-weight:700;font-size:15px;color:#e5e7eb}
.sudoku-root[b-6nfv1y3xa2]  .stats .best{font-weight:600;color:#34d399}
.sudoku-root[b-6nfv1y3xa2]  .stats .mistakes.has-mistakes{color:#f87171;font-weight:600}

.message[b-6nfv1y3xa2]{min-height:1.2em;font-size:14px;color:#d1d5db;font-weight:500}

/* Win banner: time, record status and mistakes */
.sudoku-root[b-6nfv1y3xa2]  .win-stats{
    display:flex;gap:10px;align-items:center;flex-wrap:wrap;
    font-size:16px;font-weight:700;color:#a7f3d0;
    background:linear-gradient(135deg, rgba(6,95,70,0.6) 0%, rgba(4,120,87,0.6) 100%);
    border-radius:10px;padding:10px 16px;
    box-shadow:0 0 12px rgba(52,211,153,0.5);
}
.sudoku-root[b-6nfv1y3xa2]  .win-stats .new-best{
    color:#92400e;
    background:linear-gradient(135deg, #fde68a 0%, #fbbf24 100%);
    border-radius:6px;padding:2px 8px;
    animation:selpulse-b-6nfv1y3xa2 1.2s ease-in-out infinite;
}

/* Scrolling congratulations overlay */
.sudoku-root[b-6nfv1y3xa2]  .scrolling-text-container{
    position:absolute;
    top:-10px;
    left:-10px;
    right:-10px;
    bottom:-10px;
    pointer-events:none;
    overflow:hidden;
}
.sudoku-root[b-6nfv1y3xa2]  .scrolling-text{
    position:absolute;
    font-size:28px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:4px;
    color:#39ff14;
    text-shadow:
        0 0 5px #39ff14,
        0 0 10px #39ff14,
        0 0 20px #39ff14,
        0 0 30px #39ff14,
        0 0 40px #00ff00,
        0 0 50px #00ff00,
        0 0 60px #00ff00,
        0 0 70px #00ff00,
        0 0 80px #00ff00;
    white-space:nowrap;
    animation:scroll-perimeter-b-6nfv1y3xa2 18s linear infinite;
    filter:contrast(1.5) brightness(1.3);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

@keyframes scroll-perimeter-b-6nfv1y3xa2{
    0%{top:-40px;left:0%;transform:translateX(0)}
    25%{top:0%;left:calc(100% + 20px);transform:translateX(0) rotate(90deg)}
    50%{top:calc(100% + 20px);left:100%;transform:translateX(-100%) rotate(180deg)}
    75%{top:100%;left:-40px;transform:translateX(0) rotate(270deg)}
    100%{top:-40px;left:0%;transform:translateX(0) rotate(360deg)}
}

/* Celebration animations */
@keyframes board-flash-b-6nfv1y3xa2{
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.02); filter: brightness(1.5) hue-rotate(0deg); }
}
@keyframes board-rainbow-b-6nfv1y3xa2{
    0%{filter:hue-rotate(0deg) brightness(1.1)}
    25%{filter:hue-rotate(90deg) brightness(1.2)}
    50%{filter:hue-rotate(180deg) brightness(1.1)}
    75%{filter:hue-rotate(270deg) brightness(1.2)}
    100%{filter:hue-rotate(360deg) brightness(1.1)}
}
.celebration .cell[b-6nfv1y3xa2]{animation:cell-celebration-b-6nfv1y3xa2 0.8s ease-in-out infinite}
@keyframes cell-celebration-b-6nfv1y3xa2{
    0%,100%{background:#000000;transform:scale(1)}
    25%{background:#1a001a;transform:scale(1.05)}
    50%{background:#001a1a;transform:scale(1)}
    75%{background:#1a1a00;transform:scale(1.05)}
}

/* Starbursts */
.sudoku-root[b-6nfv1y3xa2]  .starbursts-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;overflow:hidden;perspective:1000px}
.sudoku-root[b-6nfv1y3xa2]  .starburst{position:absolute;width:0;height:0;transform:translate(-50%,-50%);transform-style:preserve-3d}
.sudoku-root[b-6nfv1y3xa2]  .particle{
    position:absolute;
    width:4px;
    height:16px;
    top:0;
    left:0;
    background:linear-gradient(180deg, currentColor 0%, currentColor 60%, transparent 100%);
    border-radius:2px 2px 0 0;
    animation:particle-professional-b-6nfv1y3xa2 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
    filter:blur(0.3px);
    transform-origin:center bottom;
}
.sudoku-root[b-6nfv1y3xa2]  .particle::after{
    content:'';
    position:absolute;
    width:2px;
    height:200%;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    background:linear-gradient(180deg, currentColor 0%, transparent 100%);
    opacity:0.4;
    filter:blur(0.8px);
}

@keyframes particle-professional-b-6nfv1y3xa2{
    0%{
        transform:translate(0, 0) scale(1.5) rotateZ(0deg);
        opacity:0;
    }
    3%{
        opacity:1;
        transform:translate(0, 0) scale(1.5) rotateZ(0deg);
        box-shadow:
            0 0 15px currentColor,
            0 0 30px currentColor,
            0 0 45px rgba(255,255,255,0.8),
            0 0 60px currentColor;
    }
    15%{
        opacity:1;
        transform:translate(
            calc(cos(var(--angle)) * calc(var(--distance) * 0.3)),
            calc(sin(var(--angle)) * calc(var(--distance) * 0.3) - 5px)
        ) scale(1.3) rotateZ(calc(var(--angle) + 90deg));
        box-shadow:
            0 0 12px currentColor,
            0 0 25px currentColor,
            0 0 40px rgba(255,255,255,0.6);
    }
    40%{
        opacity:0.95;
        transform:translate(
            calc(cos(var(--angle)) * calc(var(--distance) * 0.7)),
            calc(sin(var(--angle)) * calc(var(--distance) * 0.7) + 15px)
        ) scale(1) rotateZ(calc(var(--angle) + 90deg));
    }
    70%{
        opacity:0.6;
        transform:translate(
            calc(cos(var(--angle)) * var(--distance)),
            calc(sin(var(--angle)) * var(--distance) + 40px)
        ) scale(0.7) rotateZ(calc(var(--angle) + 90deg));
        box-shadow:0 0 8px currentColor,0 0 16px currentColor;
    }
    100%{
        opacity:0;
        transform:translate(
            calc(cos(var(--angle)) * calc(var(--distance) * 1.1)),
            calc(sin(var(--angle)) * calc(var(--distance) * 1.1) + 60px)
        ) scale(0.3) rotateZ(calc(var(--angle) + 90deg));
        box-shadow:0 0 3px currentColor;
    }
}

/* Remove solid circles from fanfare */
.sudoku-root[b-6nfv1y3xa2]  .starburst::before, .sudoku-root[b-6nfv1y3xa2]  .starburst::after, .sudoku-root[b-6nfv1y3xa2]  .particle::before { content:none !important; display:none !important; box-shadow:none !important; animation:none !important; }

/* Wrapper around the three solve buttons; lets mobile lay them in a row. */
.action-buttons[b-6nfv1y3xa2]{display:flex;flex-direction:column;gap:10px}

/* Colour-customiser trigger tile + popover chrome are mobile-only; hidden here. */
.tile.colors[b-6nfv1y3xa2]{display:none}
.tile.colors svg[b-6nfv1y3xa2]{color:#f472b6}
.customize-backdrop[b-6nfv1y3xa2]{display:none}
.popover-close[b-6nfv1y3xa2]{display:none}

/* ---------- Mobile portrait: fit the board + every control on one screen ----------
   Below 640px the sidebar collapses and the game owns the viewport. The board is
   capped by BOTH the available width AND height (via --rsv, the room the rest of the
   UI needs), so it can never push the controls off-screen. The controls fold into
   compact rows - four action icons, a single 1-9 keypad row, three solve buttons,
   then Clear all - so nothing has to scroll. svh keeps the maths honest while the
   mobile address bar is on screen. Desktop (>=641px) is untouched. */
@media (max-width: 640px) {
    .sudoku-root[b-6nfv1y3xa2]{padding:6px;gap:6px;border-radius:8px}
    .top-strip[b-6nfv1y3xa2]{padding:5px 8px;gap:4px 10px}
    .play-area[b-6nfv1y3xa2]{gap:6px;width:100%}
    .board-column[b-6nfv1y3xa2]{width:100%;align-items:center;gap:6px}

    /* --rsv: vertical space reserved for everything except the board. */
    .board[b-6nfv1y3xa2]{--rsv:368px}
    .cell[b-6nfv1y3xa2]{
        box-sizing:border-box;
        width: clamp(24px, min((100vw - 28px)/9, (100svh - var(--rsv))/9), 52px);
        height:clamp(24px, min((100vw - 28px)/9, (100svh - var(--rsv))/9), 52px);
        font-size:clamp(13px, min((100vw - 28px)/9, (100svh - var(--rsv))/9) * 0.42, 22px);
    }
    .note[b-6nfv1y3xa2]{font-size:clamp(6px, min((100vw - 28px)/9, (100svh - var(--rsv))/9) * 0.2, 11px)}

    /* Colour customiser is a popover launched from the Colors tile, so it costs no
       vertical space in the one-screen layout. */
    .customize[b-6nfv1y3xa2]{background:none;border:0;padding:0}
    .customize-header[b-6nfv1y3xa2]{display:none}
    .tile.colors[b-6nfv1y3xa2]{display:flex}
    .customize-backdrop[b-6nfv1y3xa2]{display:block;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:50}
    .customize-panel[b-6nfv1y3xa2]{
        position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:51;
        width:min(360px,92vw);box-sizing:border-box;
        background:#101014;border:1px solid #2e2e38;border-radius:14px;
        padding:16px 14px 12px;box-shadow:0 12px 40px rgba(0,0,0,.6);
    }
    .popover-close[b-6nfv1y3xa2]{display:block;position:absolute;top:6px;right:10px;background:none;border:0;color:#94a3b8;font-size:18px;line-height:1;cursor:pointer;padding:2px 6px}
    .customize-panel .wheel-list[b-6nfv1y3xa2]{padding-top:6px;gap:10px}
    .customize-panel .wheel-row[b-6nfv1y3xa2]{min-width:0;flex:1 1 40%}

    .side-panel[b-6nfv1y3xa2]{width:100%;box-sizing:border-box;gap:6px;padding:8px}
    .tile-grid[b-6nfv1y3xa2]{grid-template-columns:repeat(5,1fr);gap:6px}
    .tile[b-6nfv1y3xa2]{padding:5px 0 4px;font-size:11px;gap:3px}
    .tile svg[b-6nfv1y3xa2]{width:18px;height:18px}

    .sudoku-root[b-6nfv1y3xa2]  .keypad{grid-template-columns:repeat(9,1fr);grid-auto-rows:44px;gap:4px}
    .sudoku-root[b-6nfv1y3xa2]  .keytile{font-size:16px;border-radius:6px}

    .action-buttons[b-6nfv1y3xa2]{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
    .bigbtn[b-6nfv1y3xa2]{padding:7px 0;font-size:12px;gap:5px;white-space:nowrap}
    .bigbtn svg[b-6nfv1y3xa2]{width:15px;height:15px}

    .link-row[b-6nfv1y3xa2]{gap:16px;padding-top:2px}
}

/* Low-contrast warning in the colour panel. Fixed colours, so it stays
   readable no matter what the wheels are set to. */
.contrast-warning[b-6nfv1y3xa2]{
    display:flex;flex-direction:column;gap:3px;align-items:flex-start;
    background:#3b1d1d;border:1px solid #b91c1c;border-radius:8px;
    padding:7px 9px;margin-bottom:6px;
    font-size:11px;line-height:1.45;color:#fecaca;
}
.contrast-warning strong[b-6nfv1y3xa2]{color:#fca5a5;font-weight:700}
.contrast-warning .linkbtn[b-6nfv1y3xa2]{color:#fca5a5;padding:0}
.contrast-warning .linkbtn:hover[b-6nfv1y3xa2]{color:#fff}