/* rubik-cube.css */

/* Control Panel */
.rubik-control-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

body.dark-theme .rubik-control-card {
    background: rgba(30, 30, 30, 0.95);
}

/* Button groups */
.rubik-btn-group {
    display: inline-flex;
    gap: 2px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Move buttons - compact and color-coded */
.rubik-move-btn,
.rubik-move-btn-inv {
    width: 36px;
    height: 30px;
    font-weight: bold;
    font-size: 0.8rem;
    padding: 0;
    border-radius: 4px;
    border: none;
    color: white;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rubik-move-btn:hover,
.rubik-move-btn-inv:hover {
    transform: scale(1.1);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.rubik-move-btn:active,
.rubik-move-btn-inv:active {
    transform: scale(0.95);
}

/* Color-coded buttons by face */
.move-u {
    background: linear-gradient(145deg, #fff 0%, #ddd 100%) !important;
    color: #333 !important;
    border: 1px solid #999 !important;
}

.move-d {
    background: linear-gradient(145deg, #ffeb3b 0%, #fbc02d 100%) !important;
    color: #333 !important;
}

.move-l {
    background: linear-gradient(145deg, #ff9800 0%, #e65100 100%) !important;
}

.move-r {
    background: linear-gradient(145deg, #f44336 0%, #c62828 100%) !important;
}

.move-f {
    background: linear-gradient(145deg, #2196f3 0%, #1565c0 100%) !important;
}

.move-b {
    background: linear-gradient(145deg, #4caf50 0%, #2e7d32 100%) !important;
}

/* Middle layer buttons */
.move-m {
    background: linear-gradient(145deg, #9c27b0 0%, #7b1fa2 100%) !important;
    /* Purple - between L and R */
}

.move-e {
    background: linear-gradient(145deg, #00bcd4 0%, #0097a7 100%) !important;
    /* Teal - between U and D */
}

.move-s {
    background: linear-gradient(145deg, #e91e63 0%, #c2185b 100%) !important;
    /* Pink - between F and B */
}

/* Mode Toggle Switch */
.mode-toggle {
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    transition: all 0.3s ease;
}

.mode-toggle:has(input:checked) {
    background: rgba(76, 175, 80, 0.15);
}

.mode-toggle .form-check-input {
    width: 2.5em;
    height: 1.25em;
    cursor: pointer;
}

.mode-toggle .form-check-input:checked {
    background-color: #4caf50;
    border-color: #4caf50;
}

body.dark-theme .mode-toggle {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-theme .mode-toggle:has(input:checked) {
    background: rgba(76, 175, 80, 0.25);
}

/* Face manipulation mode cursor */
.rubik-cube.face-mode {
    cursor: pointer;
}

.rubik-cube.face-mode .cubie-face {
    cursor: pointer;
    transition: filter 0.15s ease;
}

.rubik-cube.face-mode .cubie-face:hover {
    filter: brightness(1.15);
}

/* Cube Container */
.cube-wrapper {
    width: 100%;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 800px;
}

.rubik-cube {
    width: 240px;
    height: 240px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-25deg) rotateY(-35deg);
    cursor: grab;
}

.rubik-cube:active {
    cursor: grabbing;
}

/* Cubie */
.cubie {
    width: 76px;
    height: 76px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -38px;
    margin-top: -38px;
    transform-style: preserve-3d;
}

/* Cubie faces - CRITICAL: backface-visibility must be visible for rotations to work */
.cubie-face {
    position: absolute;
    width: 72px;
    height: 72px;
    left: 2px;
    top: 2px;
    border: 2px solid #111;
    border-radius: 8px;
    box-sizing: border-box;
    backface-visibility: visible;
    /* Must be visible for proper rotation */
}

/* Face Colors - Standard Rubik's colors with gradients */
.face-white {
    background: linear-gradient(145deg, #ffffff 0%, #e8e8e8 100%);
}

.face-yellow {
    background: linear-gradient(145deg, #ffeb3b 0%, #fdd835 100%);
}

.face-blue {
    background: linear-gradient(145deg, #2196f3 0%, #1976d2 100%);
}

.face-green {
    background: linear-gradient(145deg, #4caf50 0%, #388e3c 100%);
}

.face-red {
    background: linear-gradient(145deg, #f44336 0%, #d32f2f 100%);
}

.face-orange {
    background: linear-gradient(145deg, #ff9800 0%, #f57c00 100%);
}

/* Face Positions */
.face-front {
    transform: translateZ(38px);
}

.face-back {
    transform: translateZ(-38px) rotateY(180deg);
}

.face-right {
    transform: rotateY(90deg) translateZ(38px);
}

.face-left {
    transform: rotateY(-90deg) translateZ(38px);
}

.face-top {
    transform: rotateX(90deg) translateZ(38px);
}

.face-bottom {
    transform: rotateX(-90deg) translateZ(38px);
}

/* Rotation wrapper */
.rotation-wrapper {
    transform-style: preserve-3d;
}

/* Responsive - Mobile Layout */
@media (max-width: 768px) {
    .rubik-controls-row {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .rubik-btn-group {
        width: 100%;
        justify-content: center;
    }

    .rubik-move-btn,
    .rubik-move-btn-inv {
        width: 40px;
        height: 34px;
        font-size: 0.85rem;
    }
}

@media (max-width: 576px) {
    .cube-wrapper {
        min-height: 300px;
        perspective: 600px;
    }

    .rubik-cube {
        width: 180px;
        height: 180px;
    }

    .cubie {
        width: 56px;
        height: 56px;
        margin-left: -28px;
        margin-top: -28px;
    }

    .cubie-face {
        width: 52px;
        height: 52px;
    }

    .face-front {
        transform: translateZ(28px);
    }

    .face-back {
        transform: translateZ(-28px) rotateY(180deg);
    }

    .face-right {
        transform: rotateY(90deg) translateZ(28px);
    }

    .face-left {
        transform: rotateY(-90deg) translateZ(28px);
    }

    .face-top {
        transform: rotateX(90deg) translateZ(28px);
    }

    .face-bottom {
        transform: rotateX(-90deg) translateZ(28px);
    }
}

/* Dark theme */
body.dark-theme .cubie-face {
    border-color: #222;
}

body.dark-theme .face-white {
    background: linear-gradient(145deg, #f0f0f0 0%, #d8d8d8 100%);
}