/* Main styles for s-map2 WebGPU experiment by TheMusician */

/* Global styles */
html {
    user-select: none;
    -webkit-user-select: none;
}

body {
    background-color: #000000;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    direction: rtl;
    overflow: hidden;
}

/* Title styles */
.title {
    font-size: 15px;
    font-weight: 900;
}

h1 {
    color: rgba(255, 255, 255, 0.8);
    font-size: 24px;
    margin: 20px;
    font-family: sans-serif;
    text-align: center;
}

/* Container styles */
#container_1 {
    position: absolute;
    color: rgba(24, 16, 16, 0.8);
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

/* Canvas styles */
canvas {
    display: block;
    touch-action: none;
}

/* Stats display */
.stats-display {
    position: fixed;
    top: 0;
    left: 0;
    cursor: pointer;
    opacity: 0.9;
    z-index: 10000;
}

.stats-canvas {
    width: 80px;
    height: 48px;
}

.stats-canvas-visible {
    display: block;
}

.stats-canvas-hidden {
    display: none;
}

/* Credit section */
.credit {
    z-index: 1;
    position: absolute;
    bottom: 20px;
    left: 20px;
    pointer-events: none;    display: inline-block;
    padding: 10px;
    text-align: center;
    color: rgba(9, 0, 60, 0.877);
    font-size: 15px;
}

.credit-title {
    font-size: 24px;
    line-height: 1;
    font-weight: 900;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

/* Control Panel Styles */
.lil-gui {
    --width: 280px;
    --background-color: rgba(65, 65, 94, 0.95);
    --text-color: rgb(226, 226, 235);
    --title-background-color: rgba(74, 74, 104, 0.9);
    --title-text-color: rgb(246, 246, 255);
    --widget-color: rgb(8, 11, 82);
    --hover-color: rgb(128, 135, 240);
    --focus-color: rgb(108, 122, 245);
    --number-color: rgb(171, 221, 164);
    --string-color: rgb(252, 186, 186);
    --font-size: 14px;
    --input-font-size: 14px;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --font-regular: 400;
    --font-semibold: 600;
    --padding: 4px;
    --spacing: 5px;
    --widget-height: 24px;
    --name-width: 55%;
    --slider-knob-width: 6px;
    --slider-input-width: 30%;
    --color-input-width: 30%;
    --slider-input-min-width: 60px;
    --color-input-min-width: 60px;
    --folder-indent: 12px;
    --widget-padding: 0 0 0 3px;
    --widget-border-radius: 4px;
    --checkbox-size: calc(0.8 * var(--widget-height));
    --scrollbar-width: 6px;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    direction: rtl;
}

.lil-gui.root {
    border: 2px solid var(--title-background-color);
    position: fixed;
    top: 10px;
    right: 10px;
    max-height: 90vh;
    overflow-y: auto;
    max-width: 320px;
}

.lil-gui .title {
    color: var(--title-text-color);
    border-radius: 4px 4px 0 0;
    text-align: center;
    font-weight: var(--font-semibold);
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(36, 11, 11, 0.3);
}

.lil-gui .controller {
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    border-radius: 3px;
    margin: 2px 0;
}

.lil-gui .controller:hover {
    background-color: rgba(90, 90, 120, 0.4);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.lil-gui .controller.number input {
    color: var(--number-color);
    background-color: rgba(20, 20, 30, 0.8);
    border: 1px solid rgba(100, 100, 140, 0.5);
    border-radius: 3px;
    padding: 2px 5px;
}

/* Fix for slider visualization in RTL layout */
.lil-gui .controller.number .slider {
    direction: ltr; /* Keep slider direction left-to-right */
    background-position: right !important; /* For RTL adjustment */
}

/* Force slider positions to match values */
.lil-gui .controller.number {
    position: relative;
}

/* Custom RTL slider styling */
.lil-gui .slider {
    background: var(--background-color) !important;
    overflow: hidden;
    transition: background-color 0.1s ease;
}

.lil-gui .slider-fg {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    bottom: 0;
    background: var(--widget-color);
    pointer-events: none;
    z-index: 0;
}

.lil-gui .controller.string input {
    color: var(--string-color);
    background-color: rgba(20, 20, 30, 0.8);
    border: 1px solid rgba(100, 100, 140, 0.5);
}

.lil-gui .controller.boolean .widget {
    border-radius: 3px;
    background-color: rgba(60, 60, 80, 0.6);
    transition: background-color 0.2s;
}

.lil-gui .controller.boolean:hover .widget {
    background-color: rgba(70, 70, 100, 0.8);
}

.lil-gui .controller.option .widget {
    background-color: rgba(60, 60, 80, 0.6);
    border-radius: 3px;
}

.lil-gui .controller.option .widget select {
    color: var(--text-color);
}

.lil-gui .controller.function .name {
    color: #a3d8ff;
    font-weight: var(--font-semibold);
}

.lil-gui .folder .title {
    background-color: rgba(60, 60, 84, 0.9);
}

.lil-gui button {
    border-radius: 3px;
    transition: background-color 0.2s;
}

.lil-gui button:hover {
    background-color: var(--hover-color);
}

/* Keyboard Shortcuts Panel */
.keyboard-shortcuts {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: rgba(30, 30, 46, 0.95);
    color: rgb(226, 226, 235);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    direction: rtl;
    max-width: 320px;
    transform: translateY(0);
    transition: transform 0.4s ease, opacity 0.3s ease;
    z-index: 1000;
    border: 2px solid rgba(74, 74, 104, 0.8);
    opacity: 1;
}

.keyboard-shortcuts.hidden {
    transform: translateY(calc(100% + 30px));
    opacity: 0;
    pointer-events: none;
}

.keyboard-shortcuts h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: rgb(246, 246, 255);
    border-bottom: 1px solid rgba(100, 100, 140, 0.7);
    padding-bottom: 10px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.keyboard-shortcuts table {
    width: 100%;
    border-collapse: collapse;
}

.keyboard-shortcuts td {
    padding: 8px 5px;
    border-bottom: 1px solid rgba(100, 100, 140, 0.2);
}

.keyboard-shortcuts tr:last-child td {
    border-bottom: none;
}

.keyboard-shortcuts .key {
    display: inline-block;
    background-color: rgba(60, 60, 80, 0.7);
    border: 1px solid rgba(120, 120, 160, 0.6);
    border-radius: 6px;
    padding: 3px 10px;
    margin-left: 10px;
    font-family: monospace;
    font-weight: bold;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    min-width: 20px;
    text-align: center;
}

.toggle-shortcuts {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: rgba(74, 74, 104, 0.9);
    color: rgb(246, 246, 255);
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, transform 0.2s;
    border: 2px solid rgba(120, 120, 160, 0.6);
}

.toggle-shortcuts:hover {
    background-color: rgba(90, 90, 130, 0.95);
    transform: scale(1.05);
}

/* Shape presets specific styles */
.shape-presets-folder .title {
    color: #7fb2e5 !important;
    font-weight: bold !important;
}

.lil-gui [title="צורת חלקיקים"] .title {
    color: #ffd700 !important;
}

/* Advanced shape parameters */
.lil-gui [title="פרמטרים מתקדמים"] {
    background-color: rgba(0, 0, 0, 0.4) !important;
    border-radius: 4px !important;
    margin-top: 5px !important;
}

.lil-gui [title="פרמטרים מתקדמים"] .title {
    color: #a0e4ff !important;
    font-size: 0.9em !important;
}

/* Shape-specific sliders */
.lil-gui [title="פרמטרים מתקדמים"] .slider {
    background-color: rgba(70, 70, 100, 0.4) !important;
}

.lil-gui [title="פרמטרים מתקדמים"] .slider-fg {
    background-color: #7fb2e5 !important;
}

/* Color indicators for different shape types */
.lil-gui [title="רדיוס טבעת"], 
.lil-gui [title="עובי טבעת"] {
    border-right: 3px solid #ff9d00 !important;
}

.lil-gui [title="רדיוס כדור"] {
    border-right: 3px solid #00d9ff !important;
}

.lil-gui [title="רדיוס צינור"],
.lil-gui [title="אורך צינור"],
.lil-gui [title="עובי צינור"] {
    border-right: 3px solid #00ff8c !important;
}

.lil-gui [title="גובה קונוס"],
.lil-gui [title="רדיוס בסיס קונוס"] {
    border-right: 3px solid #ff00c8 !important;
}