/* Layout and Positioning */
/* Matches dna.html lines 15-219 exactly */

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

body {
    background-color: var(--color-bg-default);
    color: var(--color-text-default);
    font-family: 'ArbelG', 'Helvetica Neue', Arial, sans-serif;
    overflow: hidden;
    user-select: none;
}

/* Theme Variations - dna.html lines 29-39 */
body.dark-mode {
    background-color: var(--color-bg-dark);
    color: var(--color-text-dark);
}

body.light-mode {
    background-color: var(--color-bg-light);
    color: var(--color-text-light);
}

/* Canvas - dna.html lines 41-49 */
canvas {
    display: block;
    width: 100vw;
    height: 100vh;
    cursor: grab;
}

canvas:active {
    cursor: grabbing;
}

/* Top Left - Language Button - dna.html lines 51-65 */
#language-btn {
    position: absolute;
    top: 6vh;
    left: var(--spacing-left);
    z-index: 100;
}

/* Top Right - Theme Toggle - dna.html lines 67-76 */
#theme-toggle {
    position: absolute;
    top: 3vh;
    right: var(--spacing-left);
    width: 18px;
    height: 18px;
    cursor: pointer;
    z-index: 100;
}

/* Reset/Refresh Icon */
#reset-btn {
    position: absolute;
    top: 3vh;
    right: calc(var(--spacing-left) + 30px);
    width: 18px;
    height: 18px;
    cursor: pointer;
    z-index: 100;
}

/* Left Slider Container - dna.html lines 78-100 */
#left-slider-container {
    position: absolute;
    left: var(--spacing-left);
    top: 50%;
    transform: translateY(-50%);
    width: var(--slider-track-width);
    height: var(--slider-height);
    z-index: 100;
}

/* Vertical line */
#left-slider-container::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: var(--slider-track-width);
    height: 100%;
    background: var(--color-text-default);
}

body.dark-mode #left-slider-container::before {
    background: var(--color-text-dark);
}

body.light-mode #left-slider-container::before {
    background: var(--color-text-light);
}

/* Bottom Left - Category Buttons Positioning - dna.html lines 183-185 */
#btn-molecules {
    top: 78.12vh;  /* 800/1024 */
}

#btn-temperature {
    top: 84.08vh;  /* 861/1024 */
}

#btn-charger {
    top: 90.03vh;  /* 922/1024 */
}

/* Right Side - Typography Metrics - dna.html lines 187-205 */
#metrics-container {
    position: absolute;
    right: var(--spacing-left);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: var(--metrics-gap);
    z-index: 100;
    font-size: var(--font-size-medium);
    color: var(--color-text-default);
}

body.dark-mode #metrics-container {
    color: var(--color-text-dark);
}

body.light-mode #metrics-container {
    color: var(--color-text-light);
}

.metric-value {
    text-align: right;
}

/* Loading Indicator - dna.html lines 207-219 */
#loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-text-default);
    font-family: sans-serif;
    pointer-events: none;
    display: none;
    padding: 10px 20px;
}

body.dark-mode #loading {
    color: var(--color-text-dark);
}

body.light-mode #loading {
    color: var(--color-text-light);
}

/* Return/Back Icon - positioned in layout */
#return-btn {
    color: var(--color-text-default);
}

body.dark-mode #return-btn {
    color: var(--color-text-dark);
}

body.light-mode #return-btn {
    color: var(--color-text-light);
}