/* License: BANKON */

/* --- Base and Variables --- */
:root {
    --bg-color: #0a0a0a;
    --primary-color: #00ff00;
    --dark-primary-color: #005000;
    --container-bg-color: rgba(0, 20, 0, 0.95); /* Slightly more opaque */
    --side-bg-color: transparent; /* Background for side/back faces */
    --glow-color: var(--primary-color);
    --base-font-size: 1.8rem;
    /* --- Define Cube Dimensions --- */
    --cube-width: 420px;  /* Example fixed width */
    --cube-height: 320px; /* Example fixed height */
    --cube-depth: 10px;   /* Thin slab */
}

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

body { /* styles unchanged */ }

/* --- 3D Showcase --- */
.showcase-container { /* styles unchanged */ }

/* --- Rotatable Cube Structure --- */
#interactive-cube {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.5s ease-out;
    width: var(--cube-width);   /* Apply fixed width */
    height: var(--cube-height); /* Apply fixed height */
    /* Rotation applied via inline style */
}

/* Common styles for all cube faces */
.cube-face {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid var(--dark-primary-color);
    background: transparent; /* Default background for sides/back */
    backface-visibility: display; /* Hide the back of individual planes */
    /* Optional: slightly inset look
    box-shadow: inset 0 0 8px rgba(0,0,0,0.6); */
}

/* Front face IS the clock face */
.clock-face {
    /* Positioning */
    transform: translateZ(calc(var(--cube-depth) / 2)); /* Move forward half depth */
    /* Specific styling overrides */
    border: 2px solid var(--primary-color);
    background-color: var(--container-bg-color);
    box-shadow: 0 0 15px var(--glow-color);
    /* Content styling */
    padding: 25px;
    padding-top: 45px;
    overflow: auto; /* Scroll if content exceeds fixed size */
    /* Remove redundant size/position from original .clock-face */
    /* width: auto; max-width: 90vw; min-width: 400px; -> REMOVED */
}

/* Position other faces */
.face-back {
    transform: rotateY(180deg) translateZ(calc(var(--cube-depth) / 2));
}
.face-left {
    /* Rotate, then move out half the CUBE's width */
    transform: rotateY(-90deg) translateZ(calc(var(--cube-width) / 2));
}
.face-right {
    transform: rotateY(90deg) translateZ(calc(var(--cube-width) / 2));
}
.face-top {
    transform: rotateX(90deg) translateZ(calc(var(--cube-height) / 2));
}
.face-bottom {
    transform: rotateX(-90deg) translateZ(calc(var(--cube-height) / 2));
}


/* --- Toggle Buttons Container --- */
.toggle-container { /* styles unchanged */ }
#toggle-mode-btn { /* styles unchanged */ }
#toggle-mode-btn.active { /* styles unchanged */ }
#toggle-mode-btn:hover { /* styles unchanged */ }
#toggle-mode-btn.active:hover { /* styles unchanged */ }
#toggle-hour-mode-btn { /* styles unchanged */ }
#toggle-hour-mode-btn:hover { /* styles unchanged */ }

/* --- Clock Internal Styles --- */
/* NOTE: These might need font-size adjustments if the fixed cube size feels restrictive */
.date-display { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; border-bottom: 1px dashed var(--dark-primary-color); gap: 15px; flex-wrap: wrap; }
.date-display > div { display: flex; align-items: baseline; gap: 10px; }
.date-label { font-size: calc(var(--base-font-size) * 0.85); color: var(--dark-primary-color); }
.binary-date { font-size: calc(var(--base-font-size) * 0.8); letter-spacing: 2px; text-shadow: 0 0 5px var(--glow-color); word-break: break-all; }

.binary-clock { margin-top: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }
.time-section { display: flex; flex-direction: row; align-items: baseline; gap: 10px; width: 100%; }
.label { font-size: var(--base-font-size); color: var(--primary-color); flex-shrink: 0; width: 28px; text-align: right; }
.binary-time { font-size: calc(var(--base-font-size) * 0.9); letter-spacing: 3px; text-shadow: 0 0 5px var(--glow-color); }


/* --- Media Query --- */
@media (max-width: 600px) {
    :root {
        --base-font-size: 1.5rem;
        /* Adjust cube size for smaller screens */
        --cube-width: 90vw;
        --cube-height: calc(var(--cube-width) * 0.75); /* Maintain aspect ratio */
    }
    /* Recalculate translateZ based on potentially changed dimensions if needed,
       but using calc() with variables in the transform rules handles this mostly */

    .clock-face {
        padding: 15px;
        padding-top: 40px; /* Ensure space for buttons */
        /* min-width: 95%; -> Removed, fixed size now */
        /* max-width: 95%; -> Removed, fixed size now */
    }
    .toggle-container { gap: 4px; }
    #toggle-mode-btn, #toggle-hour-mode-btn { padding: 1px 4px; }
    .binary-clock { margin-top: 15px; gap: 10px; }
}