/* =======================================================
   Rubik Solver Pro
   Main Stylesheet
   Version : 1.0
   ======================================================= */

/* ==========================
   CSS Reset
========================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* ==========================
   Root Variables
========================== */

:root{

    --bg:#0f172a;
    --surface:#1e293b;
    --surface-2:#334155;

    --primary:#3b82f6;
    --success:#22c55e;
    --danger:#ef4444;
    --warning:#f59e0b;

    --text:#f8fafc;
    --text-muted:#94a3b8;

    --border:#475569;

    --radius:16px;

    --shadow:
        0 10px 25px rgba(0,0,0,.30);

    --transition:.25s ease;

    --header-height:72px;

}

/* ==========================
   Body
========================== */

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Poppins",sans-serif;

    background:var(--bg);

    color:var(--text);

    min-height:100vh;

    overflow-x:hidden;

}

/* ==========================
   Global
========================== */

img{

    display:block;

    max-width:100%;

}

button{

    font-family:inherit;

    cursor:pointer;

    border:none;

    outline:none;

    transition:var(--transition);

}

.hidden{

    display:none !important;

}

#app{

    width:100%;

    min-height:100vh;

}

/* ==========================
   Splash Screen
========================== */

#splash-screen{

    position:fixed;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:25px;

    background:#020617;

    z-index:9999;

}

.logo-area{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

}

.logo-area img{

    width:130px;

    height:130px;

    object-fit:contain;

}

.logo-area h1{

    font-size:2rem;

    font-weight:700;

}

.logo-area p{

    color:var(--text-muted);

}

/* ==========================
   Splash Loading Bar
========================== */

.loading-bar{

    width:280px;

    height:8px;

    background:#1e293b;

    border-radius:999px;

    overflow:hidden;

}

#loading-progress{

    width:0%;

    height:100%;

    background:var(--primary);

    transition:width .3s linear;

}

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

header{

    height:var(--header-height);

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 24px;

    background:var(--surface);

    border-bottom:1px solid var(--border);

    position:sticky;

    top:0;

    z-index:100;

}

header h2{

    font-size:1.5rem;

    font-weight:700;

}

header .right{

    display:flex;

    gap:12px;

}

header button{

    background:var(--surface-2);

    color:var(--text);

    padding:10px 16px;

    border-radius:12px;

    font-size:.95rem;

}

header button:hover{

    background:var(--primary);

}

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

.editor-layout{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:24px;

    padding:24px;

}

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

.left-panel,
.right-panel{

    background:var(--surface);

    border-radius:22px;

    padding:20px;

    box-shadow:var(--shadow);

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

}

.left-panel{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.left-panel h3{

    text-align:center;

    font-size:1.45rem;

    font-weight:700;

    margin-bottom:10px;

    letter-spacing:.5px;

}

/* =======================================================
   Three.js Viewer (Responsive Fix)
======================================================= */

#viewer{

    width:100%;
    max-width:440px;
    height:auto;
    aspect-ratio: 1 / 1;
    max-height: 440px;
    background:#020617;
    border:2px solid var(--border);
    border-radius:20px;
    overflow:hidden;
    position:relative;
    margin:10px auto;
    box-shadow:0 10px 30px rgba(0,0,0,.35);

}

/* =======================================================
   Progress (Overlap Fix)
======================================================= */

.progress-box{

    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:15px;
    margin-bottom:12px;
    width: 100%;
    gap: 15px; /* Added gap to prevent squishing */

}

.face-info{

    display:flex;
    gap:8px;
    align-items:center;
    white-space: nowrap; /* Prevent line break */
    font-size: 1.05rem;

}

.face-info .label{

    color:var(--text-muted);
    font-weight:600;

}

.filled-info{

    font-weight:700;
    color:var(--primary);
    font-size: 1.75rem; /* Controlled size */
    white-space: nowrap; /* Prevent squishing */

}

#face-progress{

    width:100%;

    height:12px;

    appearance:none;

}

#face-progress::-webkit-progress-bar{

    background:#1e293b;

    border-radius:999px;

}

#face-progress::-webkit-progress-value{

    background:var(--primary);

    border-radius:999px;

}

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

#color-picker{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.color-grid{

    display:grid;

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

    justify-items:center;

    align-items:center;

    gap:20px;

    margin-top:12px;

}


/* =======================================================
   Loading Page
======================================================= */

#loading-page{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#020617;

    z-index:9998;

}

.loading-container{

    width:min(420px,90%);

    background:var(--surface);

    padding:32px;

    border-radius:20px;

    text-align:center;

    box-shadow:var(--shadow);

}

.loading-container h2{

    margin-bottom:20px;

}

.loading-spinner{

    width:70px;

    height:70px;

    margin:20px auto;

    border:6px solid var(--surface-2);

    border-top:6px solid var(--primary);

    border-radius:50%;

    animation:spin 1s linear infinite;

}

#loading-status{

    margin-bottom:20px;

    color:var(--text-muted);

}

.loading-progress{

    width:100%;

    height:12px;

    background:var(--surface-2);

    border-radius:999px;

    overflow:hidden;

}

#loading-fill{

    width:0%;

    height:100%;

    background:var(--success);

    transition:width .3s ease;

}

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

.solver-layout{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:24px;

    padding:24px;

}

.solver-left,
.solver-right{

    background:var(--surface);

    border-radius:var(--radius);

    padding:20px;

    box-shadow:var(--shadow);

}

#solver-viewer{

    width:100%;

    height:auto;
    aspect-ratio: 1 / 1;
    max-height:500px;

    margin-top:15px;

    border-radius:18px;

    border:2px solid var(--border);

    background:#020617;

    overflow:hidden;

}

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

#current-move{

    text-align:center;

    font-size:4rem;

    color:var(--primary);

    margin:20px 0;

}

#move-counter{

    text-align:center;

    color:var(--text-muted);

    margin-bottom:20px;

}

.player-controls{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:16px;
    margin:30px 0;
}

.player-btn{
    width:64px;
    height:64px;
    border:none;
    border-radius:18px;
    background:var(--surface-2);
    color:var(--text);
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:24px;
    font-weight:700;
    transition:.25s ease;
}

.player-btn:hover{
    background:var(--primary);
    transform:translateY(-2px);
}

.player-btn:active{
    transform:scale(.95);
}

/* =======================================================
   Dark / Light Theme
======================================================= */

body.light{

    --bg:#f1f5f9;
    --surface:#ffffff;
    --surface-2:#e2e8f0;

    --text:#0f172a;
    --text-muted:#475569;

    --border:#cbd5e1;

}

/* =======================================================
   Scrollbar
======================================================= */

::-webkit-scrollbar{

    width:10px;
    height:10px;

}

::-webkit-scrollbar-track{

    background:var(--surface);

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:#2563eb;

}

/* =======================================================
   Selection
======================================================= */

::selection{

    background:var(--primary);

    color:#fff;

}

/* =======================================================
   Links
======================================================= */

a{

    color:var(--primary);

    text-decoration:none;

    transition:var(--transition);

}

a:hover{

    text-decoration:underline;

}

/* =======================================================
   Focus Accessibility
======================================================= */

button:focus-visible,
select:focus-visible{

    outline:3px solid var(--primary);

    outline-offset:3px;

}

/* =======================================================
   Disabled
======================================================= */

button:disabled{

    opacity:.65;

}

/* =======================================================
   Utility Classes
======================================================= */

.text-center{ text-align:center; }
.flex{ display:flex; }
.flex-column{ display:flex; flex-direction:column; }
.justify-between{ justify-content:space-between; }
.align-center{ align-items:center; }
.w-100{ width:100%; }
.mt-10{ margin-top:10px; }
.mt-20{ margin-top:20px; }
.mt-30{ margin-top:30px; }
.mb-10{ margin-bottom:10px; }
.mb-20{ margin-bottom:20px; }
.hidden{ display:none !important; }

/* =======================================================
   Smooth Animation
======================================================= */

*{
    transition:
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

/* ==========================================
   Compact Color Picker (Re-designed)
========================================== */

.compact-grid{
    display:grid;
    grid-template-columns:repeat(3,80px);
    justify-content:center;
    gap:20px;
    margin:18px auto;
}

.color-btn{
    width:80px;
    height:80px;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    background:transparent;
    border:none;
    cursor:pointer;
    transition:.25s ease;
}

.color-btn:hover{
    transform:scale(1.06);
}

.color-btn.active .color-circle{
    box-shadow:
        0 0 10px #00d4ff,
        0 0 22px #00d4ff;
}

.color-circle{
    width:72px;
    height:72px;
    border-radius:50%;
    border:4px solid #00d4ff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-weight:700;
    font-size:12px;
    color:#222;
    box-shadow:
        0 0 8px rgba(0,212,255,.5);
    transition:.25s ease;
}

.white .color-circle{
    background:#ffffff;
    color:#111;
}

.yellow .color-circle{
    background:#ffe600;
    color:#111;
}

.red .color-circle{
    background:#ff1d25;
    color:#fff;
}

.orange .color-circle{
    background:#ff8c00;
    color:#fff;
}

.blue .color-circle{
    background:#003cff;
    color:#fff;
}

.green .color-circle{
    background:#0aa83f;
    color:#fff;
}

.color-count{
    font-size:11px;
    font-weight:700;
    color:inherit;
    pointer-events:none;
}

/* Action Buttons */

.action-buttons{

    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:10px;
    margin-bottom:5px;

}

#validate-btn{

    width:100%;
    height:48px; /* Slightly slimmer */
    border-radius:14px;
    font-size:16px;
    font-weight:700;
    background:var(--primary);
    color:#fff;

}

#validate-btn:disabled{

    opacity:.5;
    cursor: not-allowed;

}

#solve-btn{

    width:100%;
    height:48px;
    border-radius:14px;
    font-size:16px;
    font-weight:700;
    background:var(--success);
    color:#fff;

}

.editor-controls{

    display:flex;
    gap:10px;
    margin-top:10px;

}

.editor-controls button{

    flex:1;
    height:44px;
    border-radius:12px;
    font-size:14px;
    font-weight:600;
    background: var(--surface-2);
    color: var(--text);

}

.editor-controls button:hover {
    background: var(--primary);
}


/* =======================================================
   Mobile Responsiveness (Optimized Display)
======================================================= */

@media (max-width:900px){

    .editor-layout,
    .solver-layout{
        grid-template-columns:1fr;
        gap:16px;
        padding:16px;
    }

    #viewer,
    #solver-viewer{
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        max-height: 330px; /* Fits nicely on phone screens */
        margin: 5px auto;
    }

    header{
        padding:0 14px;
    }

    header h2{
        font-size:1.25rem;
    }

    /* Fixed Overlap explicitly for smaller screens */
    .progress-box {
        gap: 10px;
        margin-top: 10px;
    }

    .face-info {
        font-size: 0.95rem;
    }

    .filled-info {
        font-size: 1.45rem; /* Reduced to avoid clash */
    }

    /* Neater Compact Grid for Mobile */
    .compact-grid{
        grid-template-columns:repeat(3, 46px);
        gap:12px;
        margin: 8px auto;
    }

    .color-btn{
        width:46px;
        height:46px;
        border-radius:10px;
    }

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

    .color-count{
        font-size:9px;
    }

    #validate-btn, #solve-btn{
        height: 46px;
        font-size: 15px;
    }

    .editor-controls button {
        height: 42px;
        font-size: 13px;
    }

}