.errors-layout{
    display:grid;
    grid-template-columns:1fr 320px;
    gap:24px;
    margin-top:40px;
    padding:40px 20px;
    align-items:start;
}

.errors-main{
    min-width:0;
}

.start-screen,
.game-box,
.ranking-box{
    background:linear-gradient(180deg,
        rgba(255,255,255,.05),
        rgba(255,255,255,.02));

    border:1px solid rgba(255,255,255,.08);

    border-radius:28px;

    backdrop-filter:blur(18px) saturate(180%);

    box-shadow:0 10px 40px rgba(0,0,0,.35);

    position:relative;
}

.start-screen{
    padding:50px 40px;
    text-align:center;
}

.game-header h2{
    font-size:42px;
    font-weight:800;
    margin-bottom:10px;
}

.game-header p{
    color:rgba(255,255,255,.65);
    line-height:1.6;
}

.game-badge{
    display:inline-flex;
    padding:8px 16px;
    border-radius:999px;
    background:rgba(123,44,255,.18);
    border:1px solid rgba(123,44,255,.35);
    margin-bottom:20px;
    font-weight:700;
}

.game-top-bar{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:16px;
    margin-top:30px;
    flex-wrap:wrap;
}

.game-actions button,
.modal-box button{
    padding:14px 24px;
    border:none;
    border-radius:16px;
    background:linear-gradient(90deg,#7b2cff,#00d4ff);
    color:#fff;
    font-weight:700;
    cursor:pointer;
    transition:.2s;
}

.game-actions button:hover,
.modal-box button:hover{
    transform:translateY(-2px);
}

.game-box{
    padding:24px;
}

.game-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
    gap:20px;
}

.game-mini-badge{
    padding:8px 14px;
    border-radius:999px;
    background:rgba(0,212,255,.12);
    border:1px solid rgba(0,212,255,.25);
}

#game-progress{
    color:rgba(255,255,255,.7);
}

.images-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.image-box{
    position:relative;
    overflow:hidden;
    border-radius:24px;
}

.image-box img{
    width:100%;
    display:block;
    user-select:none;
    pointer-events:none;
}

.image-play-area{
    position:relative;
}

.spot{
    position:absolute;
    width:calc(10px + 2vw);
    height:calc(10px + 2vw);
    transform:translate(-50%,-50%);
    border-radius:50%;
    cursor:default;
}

.spot.found{
    border:4px solid #00ff88;
    background:rgba(0,255,136,.2);
    animation:pop .25s ease;
    pointer-events:none;
}

@keyframes pop{
    0%{
        transform:translate(-50%,-50%) scale(.3);
    }
    100%{
        transform:translate(-50%,-50%) scale(1);
    }
}

.ranking-box{
    padding:24px;
    position:sticky;
    top:20px;
}

.ranking-title{
    font-size:24px;
    font-weight:800;
    margin-bottom:20px;
}

#ranking{
    list-style:none;
    padding:0;
    margin:0;
}

#ranking li{
    padding:12px 14px;
    border-radius:14px;
    margin-bottom:10px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.05);
}

.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.7);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
}

.modal-box{
    width:90%;
    max-width:460px;
    padding:35px;
    border-radius:28px;
    text-align:center;
    background:linear-gradient(180deg,
        rgba(20,0,40,.98),
        rgba(10,0,20,.98));
}

.hidden{
    display:none!important;
}

.custom-select{
    position:relative;
    width:220px;
}

.select-selected{
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    background:linear-gradient(90deg,#7b2cff,#00d4ff);
    font-weight:700;
    cursor:pointer;
}

.select-items{
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    right:0;
    padding:10px;
    border-radius:18px;
    background:rgba(10,0,30,.98);
    display:flex;
    flex-direction:column;
    gap:6px;
    z-index:999;
}

.select-items div{
    padding:12px;
    border-radius:14px;
    cursor:pointer;
}

.select-items div:hover{
    background:rgba(123,44,255,.18);
}

@media(max-width:980px){

    .errors-layout{
        grid-template-columns:1fr;
    }

    .ranking-box{
        position:relative;
        top:0;
    }

}

@media(max-width:768px){

    .images-wrapper{
        grid-template-columns:1fr;
    }

    .game-header h2{
        font-size:30px;
    }

}