/* =======================================================
   Rubik Solver Pro
   Mobile Styles
   320px - 768px
======================================================= */

@media (max-width:768px){

/* ==========================
   Header
========================== */

header{

    height:auto;

    padding:15px;

    flex-direction:column;

    gap:15px;

}

header h2{

    font-size:1.3rem;

    text-align:center;

}

header .right{

    width:100%;

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:10px;

}

header button{

    flex:1;

    min-width:90px;

}

/* ==========================
   Editor Layout
========================== */

.editor-layout{

    display:flex;

    flex-direction:column;

    padding:15px;

    gap:20px;

}

/* ==========================
   Panels
========================== */

.left-panel,
.right-panel{

    padding:15px;

}

/* ==========================
   Viewer
========================== */

#viewer{

    height:300px;

}

#solver-viewer{

    height:300px;

}

/* ==========================
   Progress
========================== */

.progress-box{

    font-size:.9rem;

}

}

@media (max-width:768px){

/* =======================================================
   Color Picker
======================================================= */

.color-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:12px;

}

.color-btn{

    padding:16px;

    font-size:1rem;

}

.color-circle{

    width:28px;

    height:28px;

}

/* =======================================================
   Face Navigation
======================================================= */

.editor-controls{

    display:flex;

    flex-direction:row;

    gap:12px;

}

.editor-controls button{

    flex:1;

    padding:16px;

    font-size:1rem;

}

/* =======================================================
   Cube Status
======================================================= */



/* =======================================================
   Action Buttons
======================================================= */

.action-buttons{

    gap:12px;

}

#validate-btn,
#solve-btn{

    width:100%;

    padding:16px;

    font-size:1rem;

}

/* =======================================================
   Loading Screen
======================================================= */

.loading-container{

    width:95%;

    padding:24px;

}

.loading-spinner{

    width:60px;

    height:60px;

}

/* =======================================================
   Solver Layout
======================================================= */

.solver-layout{

    display:flex;

    flex-direction:column;

    gap:20px;

    padding:15px;

}

.solver-left,
.solver-right{

    padding:15px;

}

}

@media (max-width:768px){

/* =======================================================
   Player Controls
======================================================= */

.player-controls{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin:20px 0;

}

.player-btn{

    width:56px;

    height:56px;

    padding:0;

    border-radius:16px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

}

/* =======================================================
   Current Move
======================================================= */

#current-move{

    font-size:3rem;

}

#move-counter{

    font-size:.95rem;

}

/* =======================================================
   Speed Box
======================================================= */

#speed-select{

    font-size:1rem;

    padding:14px;

}

/* =======================================================
   Statistics
======================================================= */

.statistics-box{

    padding:16px;

}

.stat-item{

    font-size:.95rem;

}


/* =======================================================
   Algorithm
======================================================= */

#algorithm-list{

    max-height:180px;

    font-size:.9rem;

    word-break:break-word;

}

/* =======================================================
   Finish Screen
======================================================= */

.finish-container{

    width:95%;

    padding:24px;

}

.finish-container h1{

    font-size:2rem;

}

#solve-again{

    width:100%;

    padding:16px;

}

/* =======================================================
   Toast
======================================================= */

#toast{

    width:90%;

    text-align:center;

    font-size:.95rem;

}

}

/* =======================================================
   Small Phones (320px–480px)
======================================================= */

@media (max-width:480px){

    header h2{

        font-size:1.1rem;

    }

    #viewer,
    #solver-viewer{

        height:240px;

    }

    .player-controls{

        gap:10px;

    }

    .player-btn{

        width:50px;

        height:50px;

        font-size:20px;

    }

    #current-move{

        font-size:2.4rem;

    }

    #filled-count{

        font-size:1.8rem;

    }

}

/* =======================================================
   Compact Grid Mobile Override
======================================================= */

@media (max-width:768px){

    .compact-grid{
        grid-template-columns:repeat(3,70px);
        gap:18px;
        justify-content:center;
    }

    .color-btn{
        width:70px;
        height:70px;
    }

    .color-circle{
        width:62px;
        height:62px;
    }

}