/* ================================================
   JAVASCRIPT-CONTROLLED CSS VARIABLES
   ================================================ 
   
   The following CSS custom properties are dynamically set by JavaScript
   and should NOT be modified directly in CSS:

   --left-handle-position-limit
   --right-handle-position-overwrite
   --right-handle-position-limit
   --left-handle-position-overwrite
   --top-handle-position-limit
   --bottom-handle-position-overwrite
   --bottom-handle-position-limit
   --top-handle-position-overwrite

   --fan_context_menu_origin-x
   --fan_context_menu_origin-y
   --gravity_emitter_context_menu_origin-x
   --gravity_emitter_context_menu_origin-y

   --canvas-width
   --canvas-height

   --container-offset-x
   --container-offset-y
   --offset-x
   --offset-y
   --device-pixel-ratio

   --cursor-size
   --cursor-border-radius
   --cursor-display
   --canvas-cursor

   --palette-bg-image
   --palette-bg-color
   
   ================================================ */

/* ================================================
   CSS CUSTOM PROPERTIES & DESIGN SYSTEM
   ================================================ */
:root {
    /* Canvas Configuration */
    --canvas-width: 320;
    --canvas-height: 200;
    --device-pixel-ratio: 1;

    /* Cursor Configuration */
    --cursor-size: 10;
    --cursor-border-radius: 50%;
    --cursor-display: none;
    --canvas-cursor: unset;

    /* Layout Positions - Simplified calculations */
    --top-handle-position: 0px;
    --bottom-handle-position: min(50dvh, calc(100dvh - 30rem));
    --right-handle-position: calc(100dvw - 20rem);
    --left-handle-position: 0px;

    /* Handle positions with JavaScript overrides and limits applied */
    --effective-top-handle-position: clamp(1rem,
            var(--top-handle-position-overwrite, var(--top-handle-position)),
            calc(var(--top-handle-position-limit, 100dvh) - 1rem));
    --effective-bottom-handle-position: clamp(calc(var(--bottom-handle-position-limit, 0px) + 1rem),
            var(--bottom-handle-position-overwrite, var(--bottom-handle-position)),
            calc(100dvh - 1rem));
    --effective-right-handle-position: clamp(calc(var(--right-handle-position-limit, 0px) + 1rem),
            var(--right-handle-position-overwrite, var(--right-handle-position)),
            calc(100dvw - 1rem));
    --effective-left-handle-position: clamp(1rem,
            var(--left-handle-position-overwrite, var(--left-handle-position)),
            calc(var(--left-handle-position-limit, 100dvw) - 1rem));

    /* Container dimensions */
    --effective-canvas-container-height: calc(var(--effective-bottom-handle-position) - var(--effective-top-handle-position));
    --effective-canvas-container-width: calc(var(--effective-right-handle-position) - var(--effective-left-handle-position));

    /* Display States */
    --info-display: none;
    --fan-display: inherit;
    --gravity-emitter-display: inherit;
    --trail-settings-display: none;
    --gravity-siblings-display: inherit;

    /* Entity Dimensions */
    --entity-icon-size: 2rem;
    --entity-icon-radius: 1rem;
    --entity-handle-hitbox: 0.75rem;
    --entity-handle-visual: 0.5rem;
    --entity-line-distance: 1.5rem;
    --entity-line-thickness: 2px;

    /* Context Menu Origins (set by JavaScript) */
    --fan-context-menu-origin-x: 0;
    --fan-context-menu-origin-y: 0;
    --gravity-emitter-context-menu-origin-x: 0;
    --gravity-emitter-context-menu-origin-y: 0;

    /* Design System - Spacing */
    --unit: 0.25rem;
    --space-1: calc(var(--unit) * 1);
    --space-2: calc(var(--unit) * 2);
    --space-3: calc(var(--unit) * 3);
    --space-4: calc(var(--unit) * 4);
    --space-5: calc(var(--unit) * 5);
    --space-6: calc(var(--unit) * 6);
    --space-8: calc(var(--unit) * 8);

    /* Typography */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --line-height-tight: 1.2;
    --line-height-base: 1.5;
    --line-height-px: calc(var(--text-base) * var(--line-height-base));

    /* Component Sizing */
    --control-height: var(--line-height-px);
    --button-padding-x: var(--space-3);
    --input-padding: var(--space-2);
    --panel-padding: var(--space-3);

    /* Border Radius */
    --radius-sm: var(--space-1);
    --radius-md: var(--space-2);
    --radius-lg: var(--space-3);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;

    /* Light Theme Colors */
    --surface-canvas: rgb(121, 134, 151);
    --surface-panel: #d6dde5;
    --surface-input: #f8fafb;
    --surface-control: #c4cdd8;
    --surface-elevated: #f0f4f8;
    --surface-overlay: #ffffff;

    --content-primary: #1a202c;
    --content-secondary: #2d3748;
    --content-tertiary: #4a5568;
    --content-inverse: #ffffff;

    --border-subtle: #cbd5e0;
    --border-standard: #a0aec0;
    --border-strong: #718096;
    --border-focus: #f59e0b;

    --action-primary: #f59e0b;
    --action-primary-hover: #d97706;
    --action-primary-active: #b45309;
    --action-secondary: #0891b2;
    --action-secondary-hover: #0e7490;
    --action-secondary-active: #155e75;
    --action-subtle: #4a5568;
    --action-subtle-hover: #2d3748;
    --action-subtle-active: #1a202c;

    --semantic-success: #059669;
    --semantic-warning: #d97706;
    --semantic-error: #dc2626;
    --semantic-info: #0891b2;

    --shadow-subtle: 0 0.125rem 0.25rem rgba(26, 32, 44, 0.12);
    --shadow-standard: 0 0.25rem 0.5rem rgba(26, 32, 44, 0.16);
    --shadow-strong: 0 0.5rem 1rem rgba(26, 32, 44, 0.20);
    --shadow-focus: 0 0 0.625rem rgba(245, 158, 11, 0.4);
}

/* Dark Theme */
@media (prefers-color-scheme: dark) {
    :root {
        --surface-canvas: #1a202c;
        --surface-panel: #2d3748;
        --surface-input: #4a5568;
        --surface-control: #374151;
        --surface-elevated: #374151;
        --surface-overlay: #2d3748;

        --content-primary: #f7fafc;
        --content-secondary: #e2e8f0;
        --content-tertiary: #cbd5e0;
        --content-inverse: #1a202c;

        --border-subtle: #4a5568;
        --border-standard: #718096;
        --border-strong: #a0aec0;
        --border-focus: #0891b2;

        --action-primary: #0891b2;
        --action-primary-hover: #0e7490;
        --action-primary-active: #155e75;
        --action-secondary: #f59e0b;
        --action-secondary-hover: #d97706;
        --action-secondary-active: #b45309;
        --action-subtle: #cbd5e0;
        --action-subtle-hover: #e2e8f0;
        --action-subtle-active: #f7fafc;

        --semantic-success: #10b981;
        --semantic-warning: #f59e0b;
        --semantic-error: #f56565;
        --semantic-info: #0891b2;

        --shadow-subtle: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
        --shadow-standard: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.4);
        --shadow-strong: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
        --shadow-focus: 0 0 0.625rem rgba(8, 145, 178, 0.4);
    }
}

/* State-based Display Toggles */
:root:has(#debugToggle:checked) {
    --info-display: unset;
}

:root:has(#editFansToggle:not(:checked)) {
    --fan-display: none;
}

:root:has(#editGravityEmittersToggle:not(:checked)) {
    --gravity-emitter-display: none;
}

:root:has(#trailsCheckbox:checked) {
    --trail-settings-display: unset;
}

:root:has(#gravityEnabledCheckbox:not(:checked)) {
    --gravity-siblings-display: none;
}

/* ================================================
   GLOBAL RESET & BASE
   ================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    display: grid;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: var(--text-sm);
    line-height: var(--line-height-base);
    color: var(--content-primary);
    background: var(--surface-panel);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scrollbar-color: var(--border-standard) var(--surface-panel);
}

/* ================================================
   CANVAS & SCALING
   ================================================ */
#canvas-container {
    grid-area: canvas;
    position: relative;
    width: var(--effective-canvas-container-width);
    height: var(--effective-canvas-container-height);
    background: var(--surface-canvas);
    overflow: auto;
    container-type: size;
}

#canvas-container canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
    image-rendering: pixelated;
    cursor: var(--canvas-cursor);
}

#canvas-sizer {
    position: absolute;
    --canvas-scale: calc(max(1px, min(round(down, 100cqw * var(--device-pixel-ratio), var(--canvas-width) * 1px) / var(--canvas-width),
                    round(down, 100cqh * var(--device-pixel-ratio), var(--canvas-height) * 1px) / var(--canvas-height))) / var(--device-pixel-ratio));
    --canvas-width-scaled: calc(var(--canvas-scale) * var(--canvas-width));
    --canvas-height-scaled: calc(var(--canvas-scale) * var(--canvas-height));
    --canvas-offset-x: calc(max(0px, (100cqw - var(--canvas-width-scaled)) / 2));
    --canvas-offset-y: calc(max(0px, (100cqh - var(--canvas-height-scaled)) / 2));

    width: var(--canvas-width-scaled);
    height: var(--canvas-height-scaled);
    top: var(--canvas-offset-y);
    left: var(--canvas-offset-x);
}

/* ================================================
   CURSOR
   ================================================ */
#cursor {
    position: fixed;
    top: calc(var(--cursor-size) * var(--canvas-scale) * -0.5);
    left: calc(var(--cursor-size) * var(--canvas-scale) * -0.5);
    width: calc(var(--cursor-size) * var(--canvas-scale));
    height: calc(var(--cursor-size) * var(--canvas-scale));
    border: 0.2rem solid white;
    border-radius: var(--cursor-border-radius);
    background: none;
    pointer-events: none;
    display: none;
    z-index: 9999;
}

#canvas-container:has(canvas:hover) #cursor {
    display: var(--cursor-display);
}

/* ================================================
   ENTITY OVERLAYS & ICONS
   ================================================ */
#fan-overlay,
#gravity-emitter-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--canvas-width-scaled);
    height: var(--canvas-height-scaled);
}

#fan-overlay.dragging>canvas,
#gravity-emitter-overlay.dragging {
    pointer-events: auto;
}

/* Entity Icons - Base styles */
.fan-icon,
.gravity-emitter-icon {
    --offset-x: 0;
    --offset-y: 0;
    position: absolute;
    top: calc(-1 * var(--entity-icon-radius));
    left: calc(-1 * var(--entity-icon-radius));
    width: var(--entity-icon-size);
    height: var(--entity-icon-size);
    border: 2px solid white;
    border-radius: 50%;
    cursor: move;
    touch-action: none;
    pointer-events: auto;
    z-index: 100;
    transform: translate(calc(var(--canvas-width-scaled) * var(--offset-x)),
            calc(var(--canvas-height-scaled) * var(--offset-y)));
}

.fan-icon {
    background-color: green;
    display: var(--fan-display);
    box-shadow: 0 0 calc(var(--entity-icon-radius) * 0.3) rgba(0, 0, 0, 1);
}

.gravity-emitter-icon {
    background-color: mediumpurple;
    display: var(--gravity-emitter-display);
    box-shadow: 0 0 calc(var(--entity-icon-radius) * 0.3) rgba(128, 0, 128, 0.8);
}

.fan-icon:focus,
.gravity-emitter-icon:focus {
    z-index: 101;
    outline: 2px solid red;
}

.fan-icon.dragging,
.gravity-emitter-icon.dragging {
    --container-offset-x: 0;
    --container-offset-y: 0;
    position: fixed;
    z-index: 102;
    transform: translate(calc(var(--canvas-width-scaled) * var(--offset-x) + var(--container-offset-x)),
            calc(var(--canvas-height-scaled) * var(--offset-y) + var(--container-offset-y)));
}

.fan-icon.fan-spawner,
.gravity-emitter-icon.gravity-emitter-spawner {
    position: static;
    transform: none;
    display: block;
    touch-action: none;
}

/* Fan Direction Handle */
.fan-direction {
    position: relative;
    width: var(--entity-handle-hitbox);
    height: var(--entity-handle-hitbox);
    top: calc(50% - var(--entity-handle-hitbox) / 2);
    left: calc(50% + var(--entity-line-distance) - var(--entity-handle-hitbox) / 2);
    transform-origin: calc(var(--entity-handle-hitbox) / 2 - var(--entity-line-distance)) center;
    cursor: grab;
    touch-action: none;
    z-index: 1;
}

.fan-direction:active {
    cursor: grabbing;
}

.fan-direction::after {
    content: '';
    position: absolute;
    width: var(--entity-line-distance);
    height: var(--entity-line-thickness);
    background-color: white;
    top: calc(50% - var(--entity-line-thickness) / 2);
    right: 50%;
    pointer-events: none;
}

.fan-direction::before {
    content: '';
    position: absolute;
    width: var(--entity-handle-visual);
    height: var(--entity-handle-visual);
    border-radius: 50%;
    background-color: white;
    top: calc(50% - var(--entity-handle-visual) / 2);
    left: calc(50% - var(--entity-handle-visual) / 2);
    pointer-events: none;
    box-shadow: 0 0 calc(var(--entity-icon-radius) * 0.3) rgba(0, 0, 0, 1);
}

/* ================================================
   CONTEXT MENUS
   ================================================ */
#fan-context-menu,
#gravity-emitter-context-menu {
    position: fixed;
    display: none;
    background: var(--surface-panel);
    border: 1px solid var(--border-standard);
    border-radius: var(--radius-md);
    padding: var(--panel-padding);
    box-shadow: var(--shadow-strong);
    flex-direction: column;
    gap: var(--space-2);
}

#fan-context-menu {
    width: min(100dvw, 10rem);
    height: min(100dvh, 15rem);
    --fan-menu-space-right: calc(100dvw - var(--fan_context_menu_origin-x));
    --fan-menu-space-bottom: calc(100dvh - var(--fan_context_menu_origin-y));
    --fan-menu-shift-left: clamp(0px, calc(10rem - var(--fan-menu-space-right)) * 9999999, 10rem);
    --fan-menu-shift-up: clamp(0px, calc(15rem - var(--fan-menu-space-bottom)) * 9999999, 15rem);
    left: clamp(0px, calc(var(--fan_context_menu_origin-x) - var(--fan-menu-shift-left)), calc(100dvw - 10rem));
    top: clamp(0px, calc(var(--fan_context_menu_origin-y) - var(--fan-menu-shift-up)), calc(100dvh - 15rem));
}

#gravity-emitter-context-menu {
    width: min(100dvw, 12rem);
    height: min(100dvh, 16rem);
    --gravity-menu-space-right: calc(100dvw - var(--gravity_emitter_context_menu_origin-x));
    --gravity-menu-space-bottom: calc(100dvh - var(--gravity_emitter_context_menu_origin-y));
    --gravity-menu-shift-left: clamp(0px, calc(12rem - var(--gravity-menu-space-right)) * 9999999, 12rem);
    --gravity-menu-shift-up: clamp(0px, calc(16rem - var(--gravity-menu-space-bottom)) * 9999999, 16rem);
    left: clamp(0px, calc(var(--gravity_emitter_context_menu_origin-x) - var(--gravity-menu-shift-left)), calc(100dvw - 12rem));
    top: clamp(0px, calc(var(--gravity_emitter_context_menu_origin-y) - var(--gravity-menu-shift-up)), calc(100dvh - 16rem));
}

#fan-context-menu:popover-open,
#gravity-emitter-context-menu:popover-open {
    display: flex;
}


/* ================================================
   PLAY/PAUSE TOGGLE
   ================================================ */

#playPause[data-playing="true"] :nth-child(1) {
    display: none;
}

#playPause[data-playing="false"] :nth-child(2) {
    display: none;
}

/* ================================================
   PANELS
   ================================================ */
.panel {
    padding: var(--panel-padding);
    gap: var(--space-2);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: auto;
}

#buttons-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content min-content;
}

#fps-panel {
    padding: 0 var(--space-3);
    font-size: var(--text-xs);
    color: var(--content-secondary);
    height: var(--line-height-px);
    display: flex;
    align-items: center;
    font-family: 'Courier New', monospace;
    gap: var(--space-2);
    overflow: auto;
}

#fps-panel #fps,
#fps-panel #particle-tps,
#fps-panel #air-tps {
    color: var(--content-primary);
    font-weight: 600;
    min-width: 2rem;
    text-align: right;
}

#debug-panel {
    display: var(--info-display);
}

#debug-panel pre {
    font-family: 'Courier New', monospace;
    font-size: var(--text-xs);
    line-height: var(--line-height-base);
    color: var(--content-tertiary);
    white-space: pre-wrap;
    word-break: break-all;
}

/* Panel Visibility Based on Toggles */
label:has(#editFansToggle)~* {
    display: var(--fan-display);
}

label:has(#editGravityEmittersToggle)~* {
    display: var(--gravity-emitter-display);
}

#gravity-panel label:has(#gravityEnabledCheckbox)~* {
    display: var(--gravity-siblings-display);
}

.input-group:has(#trailOpacity),
.input-group:has(#trailStrength) {
    display: var(--trail-settings-display);
}

/* ================================================
   TYPOGRAPHY
   ================================================ */
label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--content-secondary);
    min-height: var(--line-height-px);
    line-height: 1;
}

.section-title {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--content-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: var(--line-height-tight);
}

/* ================================================
   FORM CONTROLS
   ================================================ */

/* Buttons */
button:not(.color-btn):not(.type-btn) {
    height: var(--control-height);
    padding: 0 var(--button-padding-x);
    background: var(--surface-control);
    color: var(--content-primary);
    border: 1px solid var(--border-standard);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: all var(--transition-fast);
}

button:not(.color-btn):not(.type-btn):hover {
    background: var(--action-primary);
    color: var(--content-inverse);
    border-color: var(--action-primary);
}

button:not(.color-btn):not(.type-btn):active {
    background: var(--action-primary-active);
    border-color: var(--action-primary-active);
    transform: translateY(1px);
}

button:not(.color-btn):not(.type-btn):focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* Text Inputs */
input[type="text"],
input[type="number"],
select {
    height: var(--control-height);
    background: var(--surface-input);
    color: var(--content-primary);
    border: 1px solid var(--border-standard);
    border-radius: var(--radius-sm);
    padding: 0 var(--input-padding);
}

input[type="text"]:focus,
input[type="number"]:focus,
select:focus {
    outline: none;
    border-color: var(--action-primary);
    box-shadow: 0 0 0 1px var(--action-primary);
}

/* Color Input */
input[type="color"] {
    width: var(--space-8);
    height: var(--control-height);
    background: var(--surface-input);
    border: 1px solid var(--border-standard);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

/* Range Inputs */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-height: 1.5rem;
    max-height: 1.5rem;
    background-color: transparent;
    border: none;
    border-radius: 0.5rem;
}

input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 0.5rem;
    background-color: var(--surface-input);
    border: 1px solid var(--border-standard);
    border-radius: 0.5rem;
}

input[type="range"]::-moz-range-track {
    width: 100%;
    height: 0.5rem;
    background-color: var(--surface-input);
    border: 1px solid var(--border-standard);
    border-radius: 0.5rem;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 1rem;
    width: 1rem;
    position: relative;
    top: -0.25rem;
    border: none;
    background-color: var(--action-primary);
    border-radius: 50%;
    outline: 2px solid var(--border-standard);
    cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
    height: 1rem;
    width: 1rem;
    border: none;
    background-color: var(--action-primary);
    border-radius: 50%;
    outline: 2px solid var(--border-standard);
    cursor: pointer;
}

/* ================================================
   PALETTE BUTTONS
   ================================================ */
.color-btn,
.type-btn {
    position: relative;
    overflow: hidden;
    background-color: transparent;
    border: 0.125rem solid var(--border-standard);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: transform var(--transition-base),
        box-shadow var(--transition-base),
        border-color var(--transition-base);
}

.color-btn {
    width: 4rem;
    height: 4rem;
}

.type-btn {
    width: 5rem;
    height: 5rem;
}

.color-btn:hover,
.type-btn:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-standard);
    border-color: var(--action-primary);
}

.color-btn.selected,
.type-btn.selected {
    border-color: var(--action-primary);
    border-width: 0.1875rem;
    box-shadow: var(--shadow-focus);
}

.color-btn::before,
.type-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--palette-bg-color, transparent);
    background-image: var(--palette-bg-image, none);
    pointer-events: none;
}

/* Palette Masks */
@supports (mask: url("")) {

    .color-btn::before,
    .type-btn[data-type="sand"]::before {
        mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M-7.8 25.2 C8.04 12 10.02 8.7 12 8.7 C13.98 8.7 15.96 12 31.8 25.2 Z' fill='white'/%3E%3C/svg%3E") center center / contain no-repeat;
    }

    :root:has(.type-btn[data-type="solid"].selected) .color-btn::before,
    .type-btn[data-type="solid"]::before {
        mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='4' width='16' height='16' fill='white'/%3E%3C/svg%3E") center center / contain no-repeat;
    }
}

.palette-erase {
    background-color: #00000036;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='6' y1='6' x2='18' y2='18' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='18' y1='6' x2='6' y2='18' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
}

.palette-erase::before {
    display: none;
}

/* ================================================
   UTILITY CLASSES
   ================================================ */
.hidden {
    display: none !important;
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.input-group {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.field {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.custom-grid {
    display: flex;
    gap: var(--space-2);
}

.number-input {
    width: 5rem;
}

.range-input {
    width: 100%;
    max-width: 30rem;
}

.select-input {
    width: 100%;
}

.checkbox-input {
    margin-left: auto;
}

.debug-output {
    margin: 0;
}

.console-output {
    max-height: 200px;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px;
    font-size: 11px;
    line-height: 1.3;
    white-space: pre-wrap;
}

.console-controls {
    margin-bottom: 8px;
    display: flex;
    gap: 8px;
}

.console-error {
    color: #ff6b6b;
}

.console-warn {
    color: #feca57;
}

.console-info {
    color: #48cae4;
}

.console-debug {
    color: #a8a8a8;
}

.console-log {
    color: inherit;
}

/* Spawner Containers */
.fan-spawner-container,
.gravity-emitter-spawner-container {
    --spawner-container-size: calc(2 * (var(--entity-line-distance) + var(--entity-handle-hitbox) / 2) + var(--space-2));
    background: var(--surface-control);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-standard);
    padding: calc(var(--spawner-container-size) / 2 - var(--entity-icon-radius));
}



/* ================================================
   RESIZE HANDLES
   ================================================ */
.resize-handle {
    position: relative;
    background: transparent;
    z-index: 100;
    transition: background-color var(--transition-base);
    touch-action: none;
    display: none;
}

.resize-handle:hover {
    background: rgba(74, 144, 226, 0.3);
}

.resize-handle:active {
    background: rgba(74, 144, 226, 0.5);
}

/* ================================================
   GRID AREA ASSIGNMENTS
   ================================================ */
#canvas-container {
    grid-area: canvas;
}

#brush-panel {
    grid-area: brush;
}

#fps-panel {
    grid-area: fps;
}

#buttons-panel {
    grid-area: buttons;
}

#speed-panel {
    grid-area: speed;
}

#fan-panel {
    grid-area: fan;
}

#gravity-emitter-panel {
    grid-area: gravity-emitter;
}

#grid-panel {
    grid-area: grid;
}

#display-panel {
    grid-area: display;
}

#gravity-panel {
    grid-area: gravity;
}

#air-panel {
    grid-area: air;
}

#config-panel {
    grid-area: config;
}

#debug-panel {
    grid-area: debug;
}

#desktop-bottom-panels-container {
    grid-area: panels-bottom;
}

#desktop-right-panels-container {
    grid-area: panels-right;
}

/* ================================================
   RESPONSIVE LAYOUTS
   ================================================ */

/* Desktop Wide Layout (Default) */
@media (min-aspect-ratio: 1/1) {
    :root {
        --effective-top-handle-position: 0px;
        --effective-left-handle-position: 0px;
    }

    body {
        grid-template-columns: var(--effective-canvas-container-width) 0 calc(100dvw - var(--effective-canvas-container-width));
        grid-template-rows: var(--effective-canvas-container-height) 0 calc(100dvh - var(--effective-canvas-container-height));
        grid-template-areas:
            "canvas resize-handle-vertical panels-right"
            "resize-handle-horizontal resize-handle-horizontal resize-handle-horizontal"
            "panels-bottom panels-bottom panels-bottom";
    }

    #resize-handle-right {
        grid-area: resize-handle-vertical;
        right: 0.2rem;
        width: 0.4rem;
        cursor: ew-resize;
        display: block;
    }

    #resize-handle-bottom {
        grid-area: resize-handle-horizontal;
        bottom: 0.2rem;
        height: 0.4rem;
        cursor: ns-resize;
        display: block;
    }

    #panels-container {
        display: contents;
    }

    #desktop-right-panels-container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr max-content;
        grid-template-areas: "brush""fps";
        overflow-y: auto;
    }

    #desktop-bottom-panels-container {
        display: grid;
        grid-template-columns: repeat(7, max-content);
        grid-template-rows: repeat(3, max-content);
        grid-template-areas:
            "buttons fan gravity-emitter grid display gravity air"
            "speed fan gravity-emitter grid display gravity config"
            "debug debug debug debug debug debug debug";
        max-height: 100%;
        overflow-y: auto;
        border-top: 2px solid var(--border-standard);
    }

    /* Desktop borders */
    #brush-panel,
    #fps-panel {
        border-left: 2px solid var(--border-standard);
    }

    #brush-panel {
        border-bottom: 2px solid var(--border-standard);
    }

    #buttons-panel,
    #fan-panel,
    #gravity-emitter-panel,
    #grid-panel,
    #display-panel,
    #gravity-panel,
    #speed-panel,
    #config-panel,
    #air-panel {
        border-right: 2px solid var(--border-standard);
        border-bottom: 2px solid var(--border-standard);
    }
}

/* Desktop Short Layout */
@media (min-aspect-ratio: 1/1) and (max-height: 60rem) {
    body {
        grid-template-areas:
            "canvas resize-handle-vertical panels-right"
            "resize-handle-horizontal resize-handle-vertical panels-right"
            "panels-bottom resize-handle-vertical panels-right";
    }
}

/* Desktop Narrow - Compact 4-column layout */
@media (min-aspect-ratio: 1/1) and (max-width: 100rem),
(min-aspect-ratio: 1/1) and (max-width: 120rem) and (max-height: 60rem) {
    :root {
        --bottom-handle-position: max(50dvh, calc(100dvh - 40rem));
    }

    #desktop-bottom-panels-container {
        grid-template-columns: repeat(4, max-content);
        grid-template-rows: repeat(4, max-content);
        grid-template-areas:
            "buttons fan gravity-emitter gravity"
            "speed fan gravity-emitter gravity"
            "grid display air config"
            "debug debug debug debug";
    }
}

/* Mobile Portrait - Short Height */
@media (max-aspect-ratio: 1/1) and (not (min-height: 60rem)) {
    :root {
        --effective-top-handle-position: 0px;
        --effective-left-handle-position: 0px;
        --effective-right-handle-position: 100dvw;
        --bottom-handle-position: max(50vh, calc(100dvh - 18.75rem));
    }

    body {
        grid-template-columns: 1fr;
        grid-template-rows: var(--effective-canvas-container-height) 0 1fr;
        grid-template-areas: "canvas""resize-handle-horizontal""panels";
    }

    #resize-handle-bottom {
        grid-area: resize-handle-horizontal;
        bottom: 0.2rem;
        height: 0.4rem;
        cursor: ns-resize;
        display: block;
    }

    #panels-container {
        grid-area: panels;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(12, min-content);
        grid-template-areas:
            "brush""fps""buttons""speed""fan""gravity-emitter"
            "grid""display""gravity""air""config""debug";
        overflow-y: auto;
        border-top: 2px solid var(--border-standard);
    }

    #desktop-right-panels-container,
    #desktop-bottom-panels-container {
        display: contents;
    }

    /* Mobile borders */
    #brush-panel,
    #fps-panel,
    #buttons-panel,
    #speed-panel,
    #fan-panel,
    #gravity-emitter-panel,
    #grid-panel,
    #display-panel,
    #gravity-panel,
    #air-panel {
        border-bottom: 2px solid var(--border-standard);
    }

    :root:has(#debugToggle:checked) #config-panel {
        border-bottom: 2px solid var(--border-standard);
    }
}


/* Mobile Portrait - Tall Height */
@media (max-aspect-ratio: 1/1) and (min-height: 60rem) {
    :root {
        --effective-left-handle-position: 0px;
        --effective-right-handle-position: 100dvw;
        --top-handle-position: min(50vh, 25rem);
        --bottom-handle-position: max(50vh, calc(100dvh - 13rem));
    }

    body {
        grid-template-columns: 1fr;
        grid-template-rows: var(--effective-top-handle-position) 0 var(--effective-canvas-container-height) 0 calc(100dvh - var(--effective-bottom-handle-position));
        grid-template-areas:
            "panels-right""resize-handle-top""canvas"
            "resize-handle-bottom""panels-bottom";
    }

    #resize-handle-top,
    #resize-handle-bottom {
        bottom: 0.2rem;
        height: 0.4rem;
        cursor: ns-resize;
        display: block;
    }

    #resize-handle-top {
        grid-area: resize-handle-top;
    }

    #resize-handle-bottom {
        grid-area: resize-handle-bottom;
    }

    #desktop-right-panels-container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(max-content, 1fr) max-content;
        grid-template-areas: "brush""fps";
        overflow-y: auto;
        border-bottom: 2px solid var(--border-standard);
    }

    #desktop-bottom-panels-container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(10, min-content);
        grid-template-areas:
            "buttons""speed""fan""gravity-emitter""grid"
            "display""gravity""air""config""debug";
        overflow-y: auto;
        border-top: 2px solid var(--border-standard);
    }

    #panels-container {
        display: contents;
    }

    /* Mobile tall borders */
    #brush-panel,
    #buttons-panel,
    #speed-panel,
    #fan-panel,
    #gravity-emitter-panel,
    #grid-panel,
    #display-panel,
    #gravity-panel,
    #air-panel {
        border-bottom: 2px solid var(--border-standard);
    }

    :root:has(#debugToggle:checked) #config-panel {
        border-bottom: 2px solid var(--border-standard);
    }
}

/* ================================================
   CANVAS OVERLAYS
   ================================================ */
.canvas-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(2px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity var(--transition-base);
}

.canvas-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

.overlay-content {
    background: var(--surface-overlay);
    border: 1px solid var(--border-standard);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    text-align: center;
    box-shadow: var(--shadow-strong);
    max-width: min(100%, 20rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    position: relative;
    max-height: 100%;
    overflow: auto;
}

.overlay-text {
    color: var(--content-primary);
    font-size: var(--text-lg);
    font-weight: 500;
    line-height: var(--line-height-tight);
}

.error-message {
    color: var(--content-secondary);
    font-size: var(--text-sm);
    line-height: var(--line-height-base);
    max-width: 100%;
    word-break: break-word;
}

.error-icon {
    font-size: 2rem;
    color: var(--semantic-error);
}

.spinner {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--border-subtle);
    border-top: 3px solid var(--action-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.overlay-close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    background: none;
    border: none;
    color: var(--content-secondary);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background-color var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
}

.overlay-close:hover {
    color: var(--content-primary);
    background-color: var(--surface-control);
}

.overlay-close:focus {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

.webgpu-unsupported-content {
    max-width: min(90%, 25rem);
}

.unsupported-icon {
    font-size: 2rem;
    color: var(--semantic-error);
}

.unsupported-message {
    color: var(--content-secondary);
    font-size: var(--text-sm);
    line-height: var(--line-height-base);
}

.compatibility-section {
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: stretch;
}

.compatibility-section p {
    align-self: center;
}

.compatibility-title {
    color: var(--content-primary);
    font-weight: 500;
    text-align: center;
}

.compatibility-list {
    background: var(--surface-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    max-height: 15rem;
    overflow-y: auto;
    font-family: monospace;
    font-size: var(--text-sm);
    line-height: var(--line-height-base);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.compatibility-list div {
    color: var(--content-secondary);
}

.compatibility-section p {
    color: var(--content-secondary);
    font-size: var(--text-sm);
    line-height: var(--line-height-base);
}

.other-browsers {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.browser-option {
    color: var(--content-secondary);
    font-family: monospace;
    font-size: var(--text-sm);
    padding: var(--space-2);
    background: var(--surface-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.browser-option.best-match {
    color: var(--content-primary);
    border-color: var(--border-focus);
}

details {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-elevated);
}

details summary {
    color: var(--content-primary);
    font-weight: 500;
    padding: var(--space-3);
    cursor: pointer;
    border-radius: var(--radius-md);
}

details summary:hover {
    background: var(--surface-control);
}

.os-browsers {
    padding: 0 var(--space-3) var(--space-3) var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.os-browser {
    color: var(--content-tertiary);
    font-family: monospace;
    font-size: var(--text-xs);
    padding: var(--space-1);
}

.instructions {
    font-size: var(--text-xs);
    color: var(--content-tertiary);
    font-style: italic;
    font-family: sans-serif;
}