/*
.projects-preview-wrapper{
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}
*/


.cyber-sudoku{
    width:100%;
    height:100%;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    gap:18px;

    background:transparent;

    user-select:none;
}
.cyber-title{
    font-size:42px;
    letter-spacing:10px;

    color:#00ffff;

    text-shadow:
        0 0 8px cyan,
        0 0 20px cyan,
        0 0 40px cyan;

    animation:flicker 3s infinite;
}



.sudoku-board{
    display:grid;
    grid-template-columns:repeat(9, min(5.2vw, 56px));
    grid-template-rows:repeat(9, min(5.2vw, 56px));

    border:3px solid cyan;

    box-shadow:
        0 0 18px cyan,
        inset 0 0 18px cyan;
}
.cell{
    width:min(5.2vw, 56px);
    height:min(5.2vw, 56px);

    display:flex;
    justify-content:center;
    align-items:center;

    border:1px solid rgba(0,255,255,0.35);

    color:white;
    font-size:22px;

    cursor:pointer;

    transition:0.15s;
}
.cell:hover{
    background:rgba(0,255,255,0.15);
    box-shadow:inset 0 0 10px cyan;
}
.right-border{
    border-right:3px solid cyan !important;
}
.bottom-border{
    border-bottom:3px solid cyan !important;
}



.number-selector{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:center;
}
.number-button{
    width:52px;
    height:52px;

    background:transparent;

    border:2px solid cyan;

    color:cyan;
    font-size:20px;

    cursor:pointer;

    box-shadow:0 0 10px cyan;

    transition:0.2s;
}
.number-button:hover{
    background:cyan;
    color:black;

    transform:scale(1.1);

    box-shadow:
        0 0 18px cyan,
        0 0 40px cyan;
}
.number-button.del {
    background: rgba(255, 50, 50, 0.15);
    border-color: #ff5555;
    color: #ff7777;
}
.number-button.del:hover {
    background: #ff5555;
    color: white;
    transform: scale(1.1);
}
.sudoku-controls{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    justify-content:center;
}



.control-button{
    padding:10px 18px;

    background:transparent;

    border:2px solid cyan;

    color:cyan;

    letter-spacing:2px;

    cursor:pointer;

    box-shadow:0 0 12px cyan;

    transition:0.2s;
}
.control-button:hover{
    background:cyan;
    color:black;

    transform:translateY(-2px);

    box-shadow:
        0 0 20px cyan,
        0 0 40px cyan;
}
.control-button#check-btn.active {
    background: #ff4444 !important;
    color: white !important;
}
.cell.error {
    background: rgba(255, 60, 60, 0.45) !important;
    color: #ff4444 !important;
    box-shadow: 0 0 15px #ff0000;
}
#check-message {
    margin-top: 12px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 0 0 8px currentColor;
    min-height: 28px;
}


@keyframes flicker{
    0%,100%{opacity:1;}
    50%{opacity:0.85;}
    52%{opacity:0.3;}
    54%{opacity:1;}
    56%{opacity:0.6;}
    58%{opacity:1;}
}



.cell.selected {
    background: rgba(0, 255, 255, 0.35) !important;
    box-shadow: 0 0 20px cyan, inset 0 0 15px cyan !important;
    color: white;
    z-index: 5;
}
.cell.same-number {
    color: #ff0 !important;
    font-weight: bold;
    background: rgba(255, 255, 0, 0.15) !important;
}
.cell.given {
    color: #00ffcc !important;
    font-weight: bold;
}
.cell.player-filled {
    color: #ffffff;
}



.difficulty-select .control-button.active {
    background: cyan !important;
    color: black !important;
    border-color: white;
    box-shadow: 
        0 0 20px cyan,
        0 0 40px cyan;
}
.difficulty-select .control-button {
    transition: all 0.2s ease;
}