/* ─── M-E4 Color-coded collision chips ──────────────────────────────────
   Inspired by uiverse.io/kyle1dev/afraid-wasp-94. The color of each chip
   is set per-instance via the `--chip` custom property. */
.group-chip {
    position: relative;
    width: 22px;
    height: 22px;
    display: inline-block;
    cursor: pointer;
    flex: 0 0 auto;
}
.group-chip input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    z-index: 1;
}
.group-chip .chip-dot {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--chip);
    background: transparent;
    transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.2s ease;
    pointer-events: none;
}
.group-chip:hover .chip-dot { transform: scale(1.08); }
.group-chip input:checked + .chip-dot {
    background: var(--chip);
    box-shadow: 0 0 8px var(--chip), 0 0 18px rgba(255, 255, 255, 0.18), inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.group-chip input:active + .chip-dot { transform: scale(0.94); }

/* M-E6 Options group stacked into two rows */
.toolbar-group-stacked {
    align-items: stretch !important;
    gap: 4px;
}
.toolbar-group-stacked > .toolbar-label { margin-bottom: 2px; }
.toolbar-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* M-E grid panel — mirrors world-panel styling.
   Positioned just below the views panel slot. */
#grid-panel {
    position: fixed;
    top: 14px;
    right: 14px;
    width: 240px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 14px 14px 16px;
    border-radius: var(--glass-radius);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    background: transparent;
    box-shadow:
        0 10px 40px -10px rgba(0, 0, 0, 0.55),
        0 2px 8px rgba(0, 0, 0, 0.25),
        inset 0  1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18);
    color: var(--text-primary);
    font-size: 24px;
    z-index: 130;
    overflow: hidden;
}
#grid-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        var(--glass-stop-1) 0%, var(--glass-stop-2) 35%,
        var(--glass-stop-3) 70%, var(--glass-stop-4) 100%);
    opacity: 0.9;
    pointer-events: none;
    z-index: -1;
}
#grid-panel.hidden { display: none; }
#grid-panel h3 {
    width: 100%;
    font-size: 24px;
    padding-bottom: 6px;
    margin-bottom: 8px;
    color: var(--text-primary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}

/* ─── News modal (M-D) ──────────────────────────────────────────────────
   Glass card centered over a blurred backdrop. The backdrop and the X
   button both dismiss; menu.js also wires Escape.                       */
#news-modal {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
}
#news-modal.hidden { display: none; }
.news-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 8, 24, 0.55);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    cursor: pointer;
}
.news-modal-panel {
    position: relative;
    width: min(640px, 90vw);
    max-height: min(80vh, 720px);
    overflow-y: auto;
    padding: 32px 36px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(20, 18, 50, 0.65);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    box-shadow:
        0 30px 80px -10px rgba(0, 0, 0, 0.7),
        inset 0  1px 0 rgba(255, 255, 255, 0.40);
    color: #fff;
    text-align: center;
}
.news-modal-panel img { max-width: 100%; height: auto; border-radius: 12px; }
.news-modal-panel p { font-size: 32px; line-height: 1.5; }
.news-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.12s ease;
}
.news-modal-close:hover { background: rgba(255, 255, 255, 0.25); transform: scale(1.06); }

/* Corner tool: type buttons get a highlighted state when active. */
.corner-type-btn.active,
.pen-mode-btn.active {
    background: linear-gradient(135deg, var(--accent-active) 0%, var(--accent-active-2) 100%);
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
    box-shadow:
        inset 2px 2px 4px rgba(120, 30, 0, 0.45),
        0 0 14px rgba(255, 60, 100, 0.4);
}

/* =====================================================================
   Glassmorphism + Neumorphism hybrid theme
   - "Glass" panels use a diagonal multi-stop gradient with backdrop-blur.
   - "Neumorphic" controls use dual shadows (light top-left, dark bottom-right)
     for raised state, and inset shadows for pressed/active state.
   - All selectors used by JS are preserved.
   ===================================================================== */

:root {
    /* Diagonal-gradient stops for the glass panels.
       Adjust these to retheme the entire UI. */
    --glass-stop-1: rgba(255, 196, 105, 0.55);  /* warm amber */
    --glass-stop-2: rgba(255, 120, 170, 0.45);  /* coral pink */
    --glass-stop-3: rgba(140, 110, 230, 0.45);  /* indigo violet */
    --glass-stop-4: rgba(90,  200, 230, 0.45);  /* cyan */

    --glass-border:        rgba(255, 255, 255, 0.45);
    --glass-border-dark:   rgba(20, 20, 40, 0.25);
    --glass-blur:          18px;
    --glass-saturation:    160%;
    --glass-radius:        18px;
    --glass-radius-sm:     12px;

    /* Neumorphic surface color (semi-opaque, sits on top of the glass).
       Buttons inherit this tone so the dual shadows read correctly. */
    --neu-surface:         rgba(255, 255, 255, 0.16);
    --neu-surface-strong:  rgba(255, 255, 255, 0.28);
    --neu-light:           rgba(255, 255, 255, 0.55);
    --neu-shadow:          rgba(20, 18, 50, 0.45);
    --neu-shadow-soft:     rgba(20, 18, 50, 0.22);

    /* Accents */
    --accent-active:       #ff7a2d;
    --accent-active-2:     #ff3d77;
    --accent-play:         #21c97a;
    --accent-playing:      #ff3d77;
    --accent-sticky:       #ffd23d;
    --accent-danger:       #ff3d5a;

    --text-primary:        #ffffff;
    --text-muted:          rgba(255, 255, 255, 0.78);
    --text-dim:            rgba(255, 255, 255, 0.55);
}

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

html, body {
    height: 100%;
}

body {
    background:
        radial-gradient(1200px 800px at 15% 10%, #2b1a55 0%, transparent 60%),
        radial-gradient(900px  700px at 85% 90%, #1a3a55 0%, transparent 55%),
        linear-gradient(135deg, #11132b 0%, #1a1a3a 50%, #221833 100%);
    color: var(--text-primary);
   font-family: "Passero One", sans-serif;
    overflow: hidden;
    user-select: none;
    /* Removed the heavy 4-direction stroke shadow — replaced with a single
       subtle shadow for legibility on top of the gradient. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

@font-face {
    font-family: "Passero One", sans-serif;
    font-weight: 600;
    font-style: normal;
}

span {
    color: var(--text-primary);
}



/* ---------------------------------------------------------------------
   The diagonal-gradient glass shared by every panel.
   The ::before layer holds the colored gradient; the panel itself adds
   the blur + border. This keeps the border crisp even at high blur.
   --------------------------------------------------------------------- */
.glass-panel,
.news,
.carousel-item,
#toolbar,
#properties-panel,
#main-menu-panel {
    position: fixed;
    background: transparent;
    border-radius: var(--glass-radius);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    box-shadow:
        0 10px 40px -10px rgba(0, 0, 0, 0.55),
        0 2px  8px       rgba(0, 0, 0, 0.25),
        inset 0  1px 0    rgba(255, 255, 255, 0.35),
        inset 0 -1px 0    rgba(0, 0, 0, 0.18);
    overflow: hidden;
    font-size: 24px;
    z-index: 100;
}

#toolbar::before,
#properties-panel::before,
#main-menu-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        var(--glass-stop-1) 0%,
        var(--glass-stop-2) 35%,
        var(--glass-stop-3) 70%,
        var(--glass-stop-4) 100%
    );
    /* Slightly desaturate the gradient so it reads as tinted glass, not paint. */
    opacity: 0.92;
    pointer-events: none;
    z-index: -1;
}

/* A faint specular highlight running along the diagonal — sells the glass. */
#toolbar::after,
#properties-panel::after,
#main-menu-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.35) 0%,
        rgba(255, 255, 255, 0.0)  35%,
        rgba(255, 255, 255, 0.0)  65%,
        rgba(255, 255, 255, 0.12) 100%
    );
    pointer-events: none;
    z-index: -1;
    mix-blend-mode: screen;
}


/* ---------------------------------------------------------------------
   Toolbar
   --------------------------------------------------------------------- */
#toolbar {
    display: flex;
    top: 10px;
    left: 10px;
    max-width: calc(100vw - 20px);
    align-items: flex-start;
    justify-content: flex-start;
    padding: 12px 16px;
    gap: 12px;
    font-weight: 700;
    overflow-x: auto;
    overflow-y: hidden;
}

/* Slim horizontal scrollbar on the toolbar (only appears if content overflows). */
#toolbar::-webkit-scrollbar { height: 6px; }
#toolbar::-webkit-scrollbar-track { background: transparent; }
#toolbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 3px;
}

.toolbar-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toolbar-section + .toolbar-section {
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.toolbar-group {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 0;
}

.toolbar-label {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 1px;
    margin-right: 6px;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

/* ---------------------------------------------------------------------
   Neumorphic buttons (tool / simulate)
   - Default: raised
   - Hover:   slightly more raised + accent-tinted gradient
   - Active:  pressed (inset shadows) with accent gradient
   - Sticky:  outer warm glow
   --------------------------------------------------------------------- */
/* Custom SVG icons inside toolbar buttons. The strokes inherit color
   from the button so the active-state highlight + simulating-dim states
   both still work. */
.tool-btn svg, .sim-btn svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 1.6;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    display: block;
}
.tool-btn svg .fill, .sim-btn svg .fill { fill: currentColor; stroke: none; }

.tool-btn, .sim-btn,.main-button {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.28) 0%,
            rgba(255, 255, 255, 0.08) 50%,
            rgba(0, 0, 0, 0.10) 100%);
    color: var(--text-primary);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.12s ease,
                box-shadow 0.18s ease,
                background 0.18s ease,
                border-color 0.18s ease;
    box-shadow:
        -3px -3px 6px rgba(255, 255, 255, 0.18),
         3px  3px 6px rgba(20, 18, 50, 0.45),
        inset 0  1px 0 rgba(255, 255, 255, 0.35);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}

.tool-btn:hover, .sim-btn:hover {
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.40) 0%,
            rgba(255, 255, 255, 0.16) 50%,
            rgba(0, 0, 0, 0.06) 100%);
    border-color: rgba(255, 255, 255, 0.55);
    transform: translateY(-1px);
    box-shadow:
        -4px -4px 8px rgba(255, 255, 255, 0.22),
         4px  4px 10px rgba(20, 18, 50, 0.50),
        inset 0  1px 0 rgba(255, 255, 255, 0.45);
}

.tool-btn:active, .sim-btn:active {
    transform: translateY(0);
    box-shadow:
        inset  2px  2px 4px rgba(20, 18, 50, 0.5),
        inset -2px -2px 4px rgba(255, 255, 255, 0.18);
}

.tool-btn.active {
    background:
        linear-gradient(135deg,
            var(--accent-active) 0%,
            var(--accent-active-2) 100%);
    border-color: rgba(255, 255, 255, 0.65);
    color: #fff;
    box-shadow:
        inset  2px  2px 5px rgba(120, 30, 0, 0.5),
        inset -2px -2px 5px rgba(255, 255, 255, 0.30),
        0 0 0 1px rgba(255, 122, 45, 0.4),
        0 4px 14px rgba(255, 60, 100, 0.35);
    text-shadow: 0 1px 2px rgba(120, 30, 0, 0.6);
}

.tool-btn.sticky {
    box-shadow:
        -3px -3px 6px rgba(255, 255, 255, 0.18),
         3px  3px 6px rgba(20, 18, 50, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 0 0 2px var(--accent-sticky),
        0 0 18px rgba(255, 210, 60, 0.55);
}

.tool-btn.active.sticky {
    box-shadow:
        inset  2px  2px 5px rgba(120, 30, 0, 0.5),
        inset -2px -2px 5px rgba(255, 255, 255, 0.30),
        0 0 0 2px var(--accent-sticky),
        0 0 22px rgba(255, 210, 60, 0.65);
}

/* Tier-gated tool buttons: dimmed + lock badge. Clicks still fire so the
   upgrade modal can surface; cursor signals the locked state. */
.tool-btn.locked {
    opacity: 0.45;
    position: relative;
    filter: saturate(0.4);
}
.tool-btn.locked:hover {
    cursor: not-allowed;
    transform: none;
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: none;
}
.tool-btn.locked::after {
    content: '';
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 10px;
    height: 10px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M6 9 V6 a4 4 0 0 1 8 0 V9' fill='none' stroke='%23ffd24a' stroke-width='2.2' stroke-linecap='round'/><rect x='4.5' y='9' width='11' height='8' rx='1.2' fill='%23ffd24a'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.45));
}

/* Upgrade modal — reuses #news-modal shell. Tighten copy + add a CTA. */
.upgrade-modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 8px 4px 4px;
}
.upgrade-modal-heading {
    margin: 0;
    font-size: 28px;
    line-height: 1.25;
    font-weight: 700;
}
.upgrade-modal-sub {
    margin: 0;
    font-size: 16px;
    line-height: 1.45;
    opacity: 0.82;
    max-width: 480px;
}
.upgrade-modal-cta {
    margin-top: 6px;
    padding: 10px 22px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: linear-gradient(135deg, var(--accent-active, #ff7a3a) 0%, var(--accent-active-2, #ff3a7a) 100%);
    color: #fff;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.upgrade-modal-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(255, 80, 60, 0.35);
}
.upgrade-modal-cta:active {
    transform: translateY(0);
}

.sim-btn {
    background:
        linear-gradient(135deg,
            rgba(40, 200, 130, 0.55) 0%,
            rgba(20, 140,  90, 0.45) 100%);
    border-color: rgba(120, 255, 190, 0.4);
}

.sim-btn:hover {
    background:
        linear-gradient(135deg,
            rgba(60, 220, 150, 0.70) 0%,
            rgba(30, 160, 100, 0.55) 100%);
}

.sim-btn.playing {
    background:
        linear-gradient(135deg,
            var(--accent-playing) 0%,
            #c8205a 100%);
    border-color: rgba(255, 180, 200, 0.55);
    box-shadow:
        inset  2px  2px 5px rgba(120, 0, 30, 0.5),
        inset -2px -2px 5px rgba(255, 255, 255, 0.25),
        0 0 18px rgba(255, 61, 119, 0.55);
}

/* ---------------------------------------------------------------------
   Toolbar form controls
   --------------------------------------------------------------------- */
.checkbox-label {
    font-size: 12px;
    display: flex;
    color: var(--text-primary);
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: var(--glass-radius-sm);
    background: rgba(255, 255, 255, 0.10);
    box-shadow:
        inset 1px 1px 2px rgba(20, 18, 50, 0.30),
        inset -1px -1px 2px rgba(255, 255, 255, 0.18);
    transition: background 0.15s ease;
}

.checkbox-label:hover {
    background: rgba(255, 255, 255, 0.18);
}

.checkbox-label input {
    cursor: pointer;
    accent-color: var(--accent-active);
}

.toolbar-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: var(--glass-radius-sm);
    background: rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 1px 1px 2px rgba(20, 18, 50, 0.30),
        inset -1px -1px 2px rgba(255, 255, 255, 0.15);
}

.toolbar-icon {
    font-size: 16px;
    color: var(--text-primary);
    padding-left: 2px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.toolbar-color {
    width: 28px;
    height: 24px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 6px;
    padding: 0;
    cursor: pointer;
    background: none;
    box-shadow:
        inset 1px 1px 2px rgba(20, 18, 50, 0.4),
        0 1px 2px rgba(255, 255, 255, 0.15);
}

.toolbar-number {
    width: 52px;
    height: 26px;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: #111;
    border-radius: 8px;
    font-size: 13px;
    text-align: center;
    box-shadow:
        inset 1px 1px 3px rgba(20, 18, 50, 0.25),
        0 1px 0 rgba(255, 255, 255, 0.4);
    transition: background 0.15s ease, box-shadow 0.15s ease;
    text-shadow: none;
}

.toolbar-number:focus {
    outline: none;
    background: #fff;
    box-shadow:
        inset 1px 1px 3px rgba(20, 18, 50, 0.4),
        0 0 0 2px var(--accent-active);
}

.strokeme { /* legacy hook — left intentionally empty */ }

#canvas-container canvas {
    display: block;
    position:absolute;
}

/* ---------------------------------------------------------------------
   Status bar
   --------------------------------------------------------------------- */
#status-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 28px;
    background: linear-gradient(
        135deg,
        rgba(20, 16, 50, 0.55) 0%,
        rgba(60, 20, 80, 0.45) 50%,
        rgba(20, 40, 70, 0.55) 100%);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    font-size: 11px;
    color: var(--text-muted);
    z-index: 100;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.35);
}

#status-bar #body-count {
    color: var(--text-primary);
    font-weight: 700;
}

/* ---------------------------------------------------------------------
   Properties panel
   --------------------------------------------------------------------- */
#properties-panel {
    top: 10%;
    left: 14px;
    width: auto;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    padding: 14px 14px 16px;
    font-size: 12px;
}

#properties-panel.hidden {
    display: none;
}

/* World settings panel — same glass treatment as the properties panel,
   positioned on the right side. */
#world-panel {
    position: fixed;
    top: 110px;
    right: 14px;
    width: 260px;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    background: transparent;
    border-radius: var(--glass-radius);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    padding: 14px 14px 16px;
    z-index: 90;
    font-size: 12px;
    color: var(--text-primary);
    box-shadow:
        0 10px 40px -10px rgba(0, 0, 0, 0.55),
        0 2px  8px       rgba(0, 0, 0, 0.25),
        inset 0  1px 0    rgba(255, 255, 255, 0.35),
        inset 0 -1px 0    rgba(0, 0, 0, 0.18);
    overflow: hidden;
}
#world-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        var(--glass-stop-1) 0%,
        var(--glass-stop-2) 35%,
        var(--glass-stop-3) 70%,
        var(--glass-stop-4) 100%);
    opacity: 0.92;
    pointer-events: none;
    z-index: -1;
}
#world-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.35) 0%,
        rgba(255, 255, 255, 0.0)  35%,
        rgba(255, 255, 255, 0.0)  65%,
        rgba(255, 255, 255, 0.12) 100%);
    pointer-events: none;
    z-index: -1;
    mix-blend-mode: screen;
}
#world-panel.hidden {
    display: none;
}
#world-panel h3 {
    width: 100%;
    font-size: 28px;
    padding-bottom: 8px;
    margin-bottom: 10px;
    color: var(--text-primary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
#world-panel .prop-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-weight: 600; }
#world-panel .prop-row label { color: var(--text-primary); white-space: nowrap; margin-right: 8px; font-size: 16px; font-weight: 600; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45); }
#world-panel .prop-row input, #world-panel .prop-row select {
    width: 120px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #111;
    border-radius: 8px;
    font-family: "Passero One", sans-serif;
    font-size: 14px;
    text-shadow: none;
}
#world-panel .prop-row input[type="checkbox"] { width: auto; accent-color: var(--accent-active); }
#world-panel .prop-section-title {
    font-size: 16px;
    color: var(--accent-active);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

#properties-panel h3 {
    width: 100%;
    font-size: 28px;
    padding-bottom: 8px;
    margin-bottom: 10px;
    color: var(--text-primary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    background: transparent;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.prop-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-weight: 600;
}

.prop-row label {
    color: var(--text-primary);
    white-space: nowrap;
    margin-right: 8px;
    font-size: 12px;
    font-weight: 600;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}

.prop-row input, .prop-row select {
    width: 120px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #111;
    border-radius: 8px;
    font-size: 11px;
    box-shadow:
        inset 1px 1px 2px rgba(20, 18, 50, 0.25),
        0 1px 0 rgba(255, 255, 255, 0.4);
    text-shadow: none;
}

.prop-row input:focus, .prop-row select:focus {
    outline: none;
    background: #fff;
    box-shadow:
        inset 1px 1px 2px rgba(20, 18, 50, 0.4),
        0 0 0 2px var(--accent-active);
}

.prop-row input[type="color"] {
    width: 40px;
    height: 26px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.5);
    cursor: pointer;
    border-radius: 6px;
}

.prop-row input[type="checkbox"] {
    width: auto;
    accent-color: var(--accent-active);
}

.color-pair {
    display: flex;
    gap: 6px;
    align-items: center;
}

.color-pair input[type="color"] {
    width: 36px;
    height: 24px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.45);
    cursor: pointer;
    border-radius: 6px;
}

.color-pair span.color-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
}

.color-icon.fill-icon {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.35);
}

.color-icon.stroke-icon {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.7);
}

.prop-section {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.prop-section-title {
    font-size: 10px;
    color: var(--accent-active);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.group-toggles {
   display: grid;
  /* Automatically wraps items into exactly 2 rows */
  grid-template-rows: repeat(2, auto);
  /* Flows items column by column instead of row by row */
  grid-auto-flow: column;
  gap: 4px;
}

.group-toggle {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.10);
    box-shadow:
        inset 1px 1px 2px rgba(20, 18, 50, 0.30),
        inset -1px -1px 2px rgba(255, 255, 255, 0.18);
}

.group-toggle:hover {
    background: rgba(255, 255, 255, 0.18);
}

.group-toggle input {
    width: auto !important;
    margin: 0;
    accent-color: var(--accent-active);
}

.key-bind-btn {
    padding: 4px 10px;
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.06) 100%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--text-primary);
    border-radius: 8px;
    cursor: pointer;
    font-size: 11px;
    box-shadow:
        -2px -2px 4px rgba(255, 255, 255, 0.15),
         2px  2px 4px rgba(20, 18, 50, 0.40);
    transition: all 0.15s ease;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

.key-bind-btn:hover {
    border-color: rgba(255, 255, 255, 0.55);
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.32) 0%,
            rgba(255, 255, 255, 0.10) 100%);
}

.key-bind-btn.listening {
    border-color: var(--accent-active);
    background:
        linear-gradient(135deg,
            var(--accent-active) 0%,
            var(--accent-active-2) 100%);
    color: #fff;
    box-shadow:
        inset 2px 2px 4px rgba(120, 30, 0, 0.45),
        0 0 14px rgba(255, 60, 100, 0.45);
}

/* ---------------------------------------------------------------------
Main Menu
--------------------------------------------------------------------- */
#main-menu{
   display:none;
   position:absolute;
   background:transparent;
   width:100%;
   height:100%;
   color:rgba(0,0,0,0);
   justify-content: center;
   align-items: center;
}
#main-menu-panel{
   display: flex;
   width: 50%;
   height: 50%;
   flex-direction: column;
   align-items: center;
   padding:1%;
   padding-top:7%;
   padding-bottom:3%;
}
.main-menu-buttons{
   display:flex;
   flex-direction:column;
   width:100%;
   height:100%;
   color:rgba(0,0,0,0);
   justify-content: flex-start;
   align-items: center;
}

.main-button{
   display:flex;
   width:100%;
   height:auto;
   border-radius: 45px 25px;
   background:
      linear-gradient(80deg,
           rgba(255, 90, 90, 0.28) 0%,
           rgba(255, 255, 255, 0.3) 50%,
           rgba(0, 255, 250, 0.10) 100%);
   color:rgba(255,255,255,255);
   font-size: 25pt;
   justify-content: flex;
   align-items: center;
   margin:2%;
}
.title{
   display: flex;
   width: auto;
   height:10%;
   font-size: 200%;
   align-items: flex-end;
}
.news{
   display: flex;
   position:relative;
   width: min(560px,90vw);
   height:auto;
   overflow: hidden;
   color:rgba(255,255,255,255);
   padding: 1%;
}
.carousel{
   display: flex;
   height: 15vh;
   overflow-x: hidden;   /* Enables native scrolling */
   white-space: nowrap;
   padding: 2%;
   cursor:grab;
   user-select: none;
}
.carousel::-webkit-scrollbar {
    display: none;
}
.carousel:active {
     cursor: grabbing;
}
.carousel-item{
   display: flex;
   position:relative;
   height: 100%;
   width: max-content;
   overflow: visible;
   margin-right: 5%;
   padding: 3%;
}
/* ---------------------------------------------------------------------
   Scrollbars (properties panel)
   --------------------------------------------------------------------- */
#properties-panel::-webkit-scrollbar {
    width: 8px;
}
#properties-panel::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}
#properties-panel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
#properties-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* ---------------------------------------------------------------------
   Color picker — popup that the .cp-swatch buttons open. Lives outside
   any panel (appended to <body> by ColorPicker.build()).
   --------------------------------------------------------------------- */
.cp-swatch:hover {
    border-color: rgba(255, 255, 255, 0.85);
    transform: translateY(-1px);
}
.cp-swatch:active {
    transform: translateY(0);
}

.cp-panel {
    position: fixed;
    width: 240px;
    padding: 14px;
    border-radius: var(--glass-radius);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    background: transparent;
    box-shadow:
        0 18px 48px -8px rgba(0, 0, 0, 0.6),
        0 4px 12px rgba(0, 0, 0, 0.35),
        inset 0  1px 0  rgba(255, 255, 255, 0.35),
        inset 0 -1px 0  rgba(0, 0, 0, 0.18);
    z-index: 300;
    color: var(--text-primary);
    overflow: hidden;
    display: none;
}
/* Diagonal gradient + specular highlight matching the rest of the UI */
.cp-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        var(--glass-stop-1) 0%,
        var(--glass-stop-2) 35%,
        var(--glass-stop-3) 70%,
        var(--glass-stop-4) 100%
    );
    opacity: 0.92;
    pointer-events: none;
    z-index: -1;
}
.cp-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.35) 0%,
        rgba(255, 255, 255, 0.0)  35%,
        rgba(255, 255, 255, 0.0)  65%,
        rgba(255, 255, 255, 0.12) 100%
    );
    pointer-events: none;
    z-index: -1;
    mix-blend-mode: screen;
}

.cp-sv {
    position: relative;
    width: 100%;
    height: 160px;
    border-radius: 10px;
    cursor: crosshair;
    background:
        linear-gradient(to top, #000, transparent),
        linear-gradient(to right, #fff, #f00);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.25),
        inset 0 2px 4px rgba(0, 0, 0, 0.35);
    user-select: none;
}
.cp-cursor {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.4);
}

.cp-hue {
    position: relative;
    width: 100%;
    height: 16px;
    margin-top: 12px;
    border-radius: 8px;
    background: linear-gradient(
        to right,
        #ff0000 0%,
        #ffff00 17%,
        #00ff00 33%,
        #00ffff 50%,
        #0000ff 67%,
        #ff00ff 83%,
        #ff0000 100%);
    cursor: ew-resize;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.25),
        inset 0 1px 3px rgba(0, 0, 0, 0.3);
    user-select: none;
}
.cp-hue-thumb {
    position: absolute;
    width: 8px;
    height: 22px;
    top: -3px;
    border: 2px solid #fff;
    border-radius: 4px;
    transform: translateX(-50%);
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.4);
    background: rgba(255, 255, 255, 0.2);
}

.cp-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}
.cp-preview {
    width: 36px;
    height: 28px;
    border-radius: 6px;
    background: #ff0000;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.35),
        0 1px 3px rgba(0, 0, 0, 0.4);
}
.cp-hex {
    flex: 1;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #111;
    border-radius: 6px;
    font-family: "Passero One", sans-serif;
    font-size: 20px;
    text-align: center;
    text-shadow: none;
}
.cp-hex:focus {
    outline: none;
    background: #fff;
    box-shadow: 0 0 0 2px var(--accent-active);
}

.cp-rgb {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    font-size: 10px;
    color: var(--text-muted);
}
.cp-rgb label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}
.cp-rgb input {
    flex: 1;
    width: 0;
    min-width: 0;
    padding: 3px 4px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #111;
    border-radius: 4px;
    font-size: 11px;
    text-align: center;
    text-shadow: none;
}
.cp-rgb input:focus {
    outline: none;
    background: #fff;
    box-shadow: 0 0 0 2px var(--accent-active);
}

/* ---------------------------------------------------------------------
   M4 Main Menu — full-screen overlay over the canvas. The sandbox UI is
   hidden by toggling `body.on-main-menu` so the live simulation behind
   stays visible (blurred) for the showcase contraption.
   --------------------------------------------------------------------- */
#main-menu {
   display:flex;
   flex-direction:column;
    position: fixed;
    inset: 0;
    z-index: 250;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 8, 24, 0.30);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    user-select: none;
}
#main-menu.hidden {
    display: none;
}
.logo{
   display: flex;
   position: absolute;
   left:1%;
   top:1%;
   max-width: 4%;
   height: auto;
   opacity:50%;
}
.title-name-banner {
   position:fixed;
   pointer-events: none;
  width: auto;       /* Fills container width */
  height: 25%;     /* Sets a specific height */
  align-items:center;
  z-index:1000;
}
.name-banner{
    height: 5%;
    padding-top:2%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}


/* When the menu is showing, hide all in-sandbox UI. */
body.on-main-menu #toolbar,
body.on-main-menu #status-bar,
body.on-main-menu #properties-panel,
body.on-main-menu #world-panel,
body.on-main-menu #glass-color-picker {
    display: none !important;
}

#main-menu-panel {
    position: relative;
    width: min(560px, 90vw);
    height:auto;
    border-radius: var(--glass-radius);
    border: 1px solid var(--glass-border);
    background: transparent;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    box-shadow:
        0 30px 80px -12px rgba(0, 0, 0, 0.65),
        0 6px 18px       rgba(0, 0, 0, 0.35),
        inset 0  1px 0    rgba(255, 255, 255, 0.40),
        inset 0 -1px 0    rgba(0, 0, 0, 0.20);
    color: var(--text-primary);
    overflow: hidden;
    text-align: center;
    margin-bottom:2%;
}
#main-menu-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        var(--glass-stop-1) 0%,
        var(--glass-stop-2) 35%,
        var(--glass-stop-3) 70%,
        var(--glass-stop-4) 100%);
    opacity: 0.92;
    pointer-events: none;
    z-index: -1;
}
#main-menu-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.40) 0%,
        rgba(255, 255, 255, 0.0)  35%,
        rgba(255, 255, 255, 0.0)  65%,
        rgba(255, 255, 255, 0.15) 100%);
    pointer-events: none;
    z-index: -1;
    mix-blend-mode: screen;
}

/* #main-menu-panel .title {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 24px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    color: #fff;
} */

.main-menu-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
}

/* Bottom-right corner icon button — mirrors the sandbox toolbar's load icon. */
.main-menu-load {
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 12px;
    background: var(--neu-bg);
    border: none;
    box-shadow: var(--neu-shadow-raised-soft);
    color: var(--text-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.18s ease, transform 0.10s ease, color 0.18s ease;
    z-index: 100001;
}
.main-menu-load svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.main-menu-load:hover {
    transform: translateY(-1px);
    color: var(--accent-active);
}
.main-menu-load:active {
    transform: translateY(0);
    box-shadow: var(--neu-shadow-pressed);
}

.main-button {
    padding: 14px 22px;
    z-index:100000;
    font-size: 32px;
    font-weight: 700;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.32) 0%,
            rgba(255, 255, 255, 0.10) 50%,
            rgba(0, 0, 0, 0.08) 100%);
    color: var(--text-primary);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    box-shadow:
        -3px -3px 7px rgba(255, 255, 255, 0.20),
         3px  3px 8px rgba(20, 18, 50, 0.45),
        inset 0  1px 0 rgba(255, 255, 255, 0.35);
}
.main-button:hover:not(.disabled) {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.65);
    box-shadow:
        -4px -4px 9px rgba(255, 255, 255, 0.25),
         4px  4px 11px rgba(20, 18, 50, 0.50),
        inset 0  1px 0 rgba(255, 255, 255, 0.45);
}
.main-button:active:not(.disabled) {
    transform: translateY(0);
    box-shadow:
        inset  2px  2px 5px rgba(20, 18, 50, 0.45),
        inset -2px -2px 5px rgba(255, 255, 255, 0.22);
}
.main-button.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background:
        linear-gradient(135deg,
            rgba(180, 180, 180, 0.18) 0%,
            rgba(60, 60, 60, 0.08)   100%);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.main-button.disabled::after {
    content: 'soon';
    font-size: 32px;
    font-weight: 500;
    opacity: 0.7;
    margin-left: 4px;
}

/* #main-menu-panel .news {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 11px;
    color: var(--text-muted);
    min-height: 14px;
    letter-spacing: 0.5px;
} */

/* Sandbox setup sub-screen — same panel chrome, different content layout. */
#main-menu-panel.setup-screen .title {
    margin-bottom: 18px;
}
.setup-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 auto 20px;
    max-width: 360px;
    text-align: left;
}
.setup-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    box-shadow:
        inset 1px 1px 2px rgba(20, 18, 50, 0.25),
        inset -1px -1px 2px rgba(255, 255, 255, 0.18);
}
.setup-row label {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}
.setup-row select,
.setup-row input[type="number"] {
    width: 160px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #111;
    border-radius: 8px;
    font-size: 16px;
    text-shadow: none;
}
.setup-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-active);
}
.setup-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 8px;
}
.setup-actions .main-button {
    padding: 10px 22px;
    font-size: 16px;
    min-width: 120px;
}
.setup-actions .start-btn {
    background: linear-gradient(135deg, var(--accent-active) 0%, var(--accent-active-2) 100%);
    border-color: rgba(255, 255, 255, 0.6);
}
.setup-actions .back-btn {
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.20) 0%,
            rgba(255, 255, 255, 0.06) 100%);
}

/* ---------------------------------------------------------------------
   Views popup — same glass treatment as #world-panel.
   --------------------------------------------------------------------- */
#views-panel {
    position: fixed;
    top: 110px;
    right: 14px;
    width: 240px;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    background: transparent;
    border-radius: var(--glass-radius);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    padding: 14px;
    z-index: 90;
    font-size: 24px;
    color: var(--text-primary);
    box-shadow:
        0 10px 40px -10px rgba(0, 0, 0, 0.55),
        0 2px 8px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18);
    overflow: hidden;
}
#views-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        var(--glass-stop-1) 0%,
        var(--glass-stop-2) 35%,
        var(--glass-stop-3) 70%,
        var(--glass-stop-4) 100%);
    opacity: 0.92;
    pointer-events: none;
    z-index: -1;
}
#views-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.35) 0%,
        rgba(255, 255, 255, 0.0)  35%,
        rgba(255, 255, 255, 0.0)  65%,
        rgba(255, 255, 255, 0.12) 100%);
    pointer-events: none;
    z-index: -1;
    mix-blend-mode: screen;
}
#views-panel.hidden { display: none; }
#views-panel h3 {
    width: 100%;
    font-size: 32px;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
#views-panel .prop-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
#views-panel .prop-row label { color: var(--text-primary); font-size: 24px; font-weight: 600; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45); }
#views-panel .prop-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent-active); }
#views-panel .prop-section-title {
    font-size: 24px;
    color: var(--accent-active);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 800;
}

/* ---------------------------------------------------------------------
   Secret challenge-designer toolbar (Ctrl+~ to toggle).
   --------------------------------------------------------------------- */
#secret-toolbar {
    position: fixed;
    top: 140px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--glass-radius);
    border: 1px solid rgba(255, 210, 61, 0.55);
    background: transparent;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    box-shadow:
        0 12px 40px -12px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 0 18px rgba(255, 210, 61, 0.20);
    z-index: 110;
    overflow: hidden;
}
#secret-toolbar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(255, 210, 61, 0.30) 0%,
        rgba(180, 110, 60, 0.30) 50%,
        rgba(90, 30, 80, 0.30) 100%);
    opacity: 0.85;
    pointer-events: none;
    z-index: -1;
}
#secret-toolbar.hidden { display: none; }
#secret-toolbar .toolbar-label {
    color: #ffd23d;
    margin-right: 4px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* ---------------------------------------------------------------------
   Sim-running lockdown: while body.simulating is set, the properties /
   world / views panels are hidden and most edit tools are dimmed +
   pointer-events disabled. The Move tool stays interactive so users can
   drag draggable bodies; sim controls + view panels stay clickable.
   --------------------------------------------------------------------- */
/* Views panel (debug layers) is intentionally allowed during sim so the
   user can toggle wireframes / AABBs / contact dots while bodies move. */
body.simulating #properties-panel,
body.simulating #world-panel,
body.simulating #glass-color-picker {
    display: none !important;
}
body.simulating #toolbar .tool-btn:not(#tool-move):not(#tool-rotate):not(#tool-scale):not(#tool-delete):not(#btn-home):not(#btn-save):not(#btn-load):not(#btn-world):not(#btn-views) {
    pointer-events: none;
    opacity: 0.42;
}
body.simulating #secret-toolbar .tool-btn {
    pointer-events: none;
    opacity: 0.42;
}

/* ---------------------------------------------------------------------
   Browser compatibility fallback — when backdrop-filter isn't supported,
   make the panels opaque enough to remain readable.
   --------------------------------------------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #toolbar::before,
    #properties-panel::before {
        opacity: 1;
    }
    #status-bar {
        background: rgba(20, 16, 50, 0.92);
    }
}

/* =====================================================================
   PURE NEUMORPHISM THEME
   ---------------------------------------------------------------------
   All surfaces share a single dark tone; elevation comes from a soft
   dual-tone shadow (light from top-left, dark from bottom-right) and
   pressed/active states invert with inset shadows. No transparency,
   no backdrop-blur, no gradient stops.

   Every rule below is an override that wins by source-order — earlier
   glass rules are still parsed but get superseded here.
   ===================================================================== */
:root {
    /* Single neumorphic surface tone — bg + panels + buttons all share
       this so the shadow pair does the elevation work. */
       --neu-bg:           linear-gradient(
                           45deg,
                           #888 5%,
                           #666 10%,
                           #888 30%,
                           #555 50%,
                           #777 70%,
                           #666 80%,
                           #888 95%
                           );
    --neu-bg-strong:    #2a2e44;
    --neu-light:        #d6d6d644;       /* outer highlight, top-left */
    --neu-light-soft:   #c6c6c644;
    --neu-dark:         #13151f;       /* outer shadow, bottom-right */
    --neu-dark-soft:    #1a1d2c;
    --neu-border-none:  transparent;

    /* Raised elements (buttons, panels at rest) */
    --neu-shadow-raised:
        -5px -5px 12px var(--neu-light),
         6px  6px 14px var(--neu-dark);
    --neu-shadow-raised-soft:
        -3px -3px 7px var(--neu-light-soft),
         3px  3px 7px var(--neu-dark-soft);
    /* Pressed / sunken (active button, recessed panel) */
    --neu-shadow-pressed:
        inset  3px  3px 6px var(--neu-dark),
        inset -3px -3px 6px var(--neu-light);
    --neu-shadow-pressed-deep:
        inset  4px  4px 8px var(--neu-dark),
        inset -4px -4px 8px var(--neu-light);
    /* Subtle inset for input fields */
    --neu-shadow-inset:
        inset  2px  2px 5px var(--neu-dark-soft),
        inset -2px -2px 5px var(--neu-light-soft);

    --text-primary:     #e6e8f4;
    --text-muted:       rgba(230, 232, 244, 0.72);
    --text-dim:         rgba(230, 232, 244, 0.50);
}

/* ---- Body: flat single tone, no gradient ---- */
body {
    background: var(--neu-bg) !important;
    text-shadow: none !important;
}

/* ---- Kill every glass panel + drop the gradient ::before/::after layers ---- */
.glass-panel,
.news,
.carousel-item,
#toolbar,
#properties-panel,
#world-panel,
#views-panel,
#grid-panel,
#main-menu-panel {
    background: var(--neu-bg) !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: var(--neu-shadow-raised) !important;
    border-radius: 18px !important;
    color: var(--text-primary);
}
.glass-panel::before,
.glass-panel::after,
.news::before,
.news::after,
.carousel-item::before,
.carousel-item::after,
#toolbar::before,
#toolbar::after,
#properties-panel::before,
#properties-panel::after,
#world-panel::before,
#world-panel::after,
#views-panel::before,
#views-panel::after,
#grid-panel::before,
#grid-panel::after,
#main-menu-panel::before,
#main-menu-panel::after {
    display: none !important;
}

#main-menu {

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ---- Toolbar internals ---- */
.toolbar-label {
    color: var(--text-muted) !important;
    text-shadow: none !important;
    font-family: "Passero One", sans-serif;
    font-size: 20px;
}
.toolbar-group, .toolbar-section, .toolbar-row {
    border: none !important;
    background: transparent !important;
}

/* ---- All buttons share the raised neumorphic look. Note .cp-swatch is
   intentionally excluded here — its `background` is set inline by JS to
   the chosen color, and overriding it would make the swatch invisible.
   Swatch shadows are handled separately below. ---- */
.tool-btn,
.sim-btn,
.main-button,
.key-bind-btn,
.corner-type-btn,
.pen-mode-btn {
    background: var(--neu-bg) !important;
    border: none !important;
    box-shadow: var(--neu-shadow-raised-soft) !important;
    color: var(--text-primary) !important;
    text-shadow: none !important;
    transition: box-shadow 0.18s ease, color 0.18s ease, transform 0.10s ease !important;
}

.tool-btn:hover,
.sim-btn:hover,
.main-button:hover,
.key-bind-btn:hover,
.corner-type-btn:hover,
.pen-mode-btn:hover {
    box-shadow:
        -4px -4px 10px var(--neu-light),
         5px  5px 11px var(--neu-dark) !important;
    transform: translateY(-1px);
}

.tool-btn:active,
.sim-btn:active,
.main-button:active,
.key-bind-btn:active,
.corner-type-btn:active,
.pen-mode-btn:active {
    box-shadow: var(--neu-shadow-pressed) !important;
    transform: translateY(0);
}

/* Active tool: pressed-in + accent-tinted text/stroke */
.tool-btn.active,
.corner-type-btn.active,
.pen-mode-btn.active {
    background: var(--neu-bg) !important;
    box-shadow: var(--neu-shadow-pressed-deep) !important;
    color: var(--accent-active) !important;
    border: none !important;
}
.tool-btn.active svg,
.corner-type-btn.active svg,
.pen-mode-btn.active svg {
    /* SVG strokes pick up currentColor — already covered by color above,
       this rule is defensive for any path that has an explicit stroke. */
    stroke: var(--accent-active);
}

/* Sticky tool: yellow outer glow on top of the recessed look */
.tool-btn.sticky {
    box-shadow:
        var(--neu-shadow-raised-soft),
        0 0 0 2px var(--accent-sticky),
        0 0 14px rgba(255, 210, 60, 0.45) !important;
}
.tool-btn.active.sticky {
    box-shadow:
        var(--neu-shadow-pressed-deep),
        0 0 0 2px var(--accent-sticky),
        0 0 14px rgba(255, 210, 60, 0.55) !important;
}

/* Sim buttons keep their green/red tint via a colored inset */
.sim-btn {
    color: var(--accent-play) !important;
}
.sim-btn.playing {
    color: var(--accent-playing) !important;
    box-shadow:
        var(--neu-shadow-pressed-deep),
        0 0 12px rgba(255, 61, 119, 0.35) !important;
}

/* ---- Inputs: recessed look ---- */
input[type="text"],
input[type="number"],
select,
textarea,
.toolbar-number,
.prop-row input,
.prop-row select,
#world-panel .prop-row input,
#world-panel .prop-row select,
#views-panel .prop-row input,
#grid-panel .prop-row input {
    background: var(--neu-bg) !important;
    border: none !important;
    box-shadow: var(--neu-shadow-inset) !important;
    color: var(--text-primary) !important;
    border-radius: 8px !important;
    padding: 4px 8px !important;
    outline: none !important;
    text-shadow: none !important;
    font-size: 18px;
}
input[type="text"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    box-shadow:
        var(--neu-shadow-inset),
        0 0 0 2px var(--accent-active) !important;
        font-family: "Passero One", sans-serif;
        font-size: 18px;
}

/* Checkboxes: minimal accent-color recolor */
input[type="checkbox"] {
    accent-color: var(--accent-active);
}
input[type="number"] {
  width: auto;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-family: "Passero One", sans-serif;
  font-size: 16px;
  transition: border-color 0.3s;
}

input[type="number"]:focus {
  border-color: #007BFF;
}
input::-webkit-inner-spin-button {
   -webkit-appearance: flex;
   height: 20px;
   width: 20px;
   cursor: pointer;
}
/* Color swatches: KEEP the inline-set background (the chosen color),
   add a neumorphic shadow + a thin dark inner ring so the swatch reads
   as a tile sitting in the panel. No background override here on
   purpose — JS sets .cp-swatch's background via inline style.

   The original `.cp-swatch { width / height / radius / cursor }` base
   rule was missing from the file (it must have been wiped by the same
   unclosed-comment bug that ate `.cp-panel`). Without dimensions the
   button rendered 0×0 and was unclickable — hence "no button to open
   the color picker". This rule re-establishes the missing base size. */
.cp-swatch {
    width: 32px !important;
    height: 22px !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 0 !important;
    cursor: pointer !important;
    flex: 0 0 auto !important;
    box-shadow:
        var(--neu-shadow-raised-soft),
        inset 0 0 0 1px rgba(0, 0, 0, 0.35) !important;
}
.cp-swatch:hover {
    box-shadow:
        -3px -3px 7px var(--neu-light),
         4px  4px 8px var(--neu-dark),
        inset 0 0 0 1px rgba(0, 0, 0, 0.35) !important;
    transform: translateY(-1px);
}
.cp-swatch:active {
    box-shadow:
        var(--neu-shadow-pressed),
        inset 0 0 0 1px rgba(0, 0, 0, 0.35) !important;
    transform: translateY(0);
}

/* ---- Status bar ---- */
#status-bar {
    background: var(--neu-bg) !important;
    box-shadow:
        inset  0  3px 6px var(--neu-dark),
        inset  0 -3px 6px var(--neu-light-soft) !important;
    color: var(--text-muted) !important;
    border: none !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ---- Panel headings: drop borders, use shadow separator ---- */
#properties-panel h3,
#world-panel h3,
#views-panel h3,
#grid-panel h3 {
    color: var(--text-primary) !important;
    border-bottom: none !important;
    box-shadow: 0 1px 0 var(--neu-dark-soft), 0 2px 0 var(--neu-light-soft);
    padding-bottom: 8px;
    margin-bottom: 10px;
    text-shadow: none !important;
}

/* ---- News modal: solid card on dimmed overlay ---- */
.news-modal-backdrop {
    background: rgba(8, 8, 16, 0.70) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.news-modal-panel {
    background: var(--neu-bg) !important;
    border: none !important;
    box-shadow: var(--neu-shadow-raised) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.news-modal-close {
    background: var(--neu-bg) !important;
    box-shadow: var(--neu-shadow-raised-soft) !important;
    border: none !important;
    color: var(--text-primary) !important;
}
.news-modal-close:hover {
    box-shadow: var(--neu-shadow-pressed) !important;
}

/* ---- Carousel items: raised tiles ---- */
.carousel-item {
    background: var(--neu-bg) !important;
    box-shadow: var(--neu-shadow-raised-soft) !important;
    border: none !important;
    transition: box-shadow 0.18s ease;
}
.carousel-item:hover {
    box-shadow: var(--neu-shadow-raised) !important;
}

/* ---- Color picker popup ---- */
#glass-color-picker {
    background: var(--neu-bg) !important;
    border: none !important;
    box-shadow: var(--neu-shadow-raised) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* JS positions the panel via inline left/top + display:block — keep
       fixed positioning + the original 240px width so it doesn't fall
       back to a static, full-width layout. */
    position: fixed !important;
    width: 240px !important;
    padding: 14px !important;
    border-radius: 14px !important;
    z-index: 1000 !important;
    color: var(--text-primary) !important;
}
#glass-color-picker::before,
#glass-color-picker::after { display: none !important; }

/* SV (saturation/value) square: recessed crosshair pad with a 1px dark
   inset ring so the gradient reads inside the surface. */
#glass-color-picker .cp-sv {
    border-radius: 10px !important;
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.35),
        inset 2px 2px 5px var(--neu-dark) !important;
}
#glass-color-picker .cp-hue {
    border-radius: 10px !important;
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.35),
        inset 2px 2px 4px var(--neu-dark) !important;
}
/* Preview tile: small raised swatch */
#glass-color-picker .cp-preview {
    box-shadow:
        var(--neu-shadow-raised-soft),
        inset 0 0 0 1px rgba(0, 0, 0, 0.4) !important;
    border-radius: 8px !important;
}
/* Hex + R/G/B inputs: neumorphic recessed, light-on-dark instead of the
   previous near-white pill so they match the rest of the theme. */
#glass-color-picker .cp-hex,
#glass-color-picker .cp-rgb input {
    background: var(--neu-bg) !important;
    color: var(--text-primary) !important;
    border: none !important;
    box-shadow: var(--neu-shadow-inset) !important;
    border-radius: 6px !important;
    text-shadow: none !important;
}
#glass-color-picker .cp-hex:focus,
#glass-color-picker .cp-rgb input:focus {
    box-shadow:
        var(--neu-shadow-inset),
        0 0 0 2px var(--accent-active) !important;
    outline: none !important;
}
#glass-color-picker .cp-rgb label {
    color: var(--text-muted) !important;
    text-shadow: none !important;
}

/* ---- Group chips keep their per-color identity but get a soft pad ---- */
.group-chip .chip-dot {
    /* Outer ring is the chip color; recessed background uses the surface */
    background: var(--neu-bg);
    box-shadow:
        inset 1px 1px 2px var(--neu-dark-soft),
        inset -1px -1px 2px var(--neu-light-soft);
}
.group-chip input:checked + .chip-dot {
    background: var(--chip);
    box-shadow:
        0 0 8px var(--chip),
        0 0 14px rgba(255, 255, 255, 0.10) !important;
}

/* ---- Scrollbar polish for the new theme ---- */
#properties-panel::-webkit-scrollbar { width: 8px; }
#properties-panel::-webkit-scrollbar-track {
    background: var(--neu-bg);
    border-radius: 4px;
}
#properties-panel::-webkit-scrollbar-thumb {
    background: var(--neu-bg-strong);
    border-radius: 4px;
    box-shadow:
        inset 1px 1px 2px var(--neu-dark-soft),
        inset -1px -1px 2px var(--neu-light-soft);
}
#properties-panel::-webkit-scrollbar-thumb:hover {
    background: var(--neu-light-soft);
}

/* ---- prop-row labels ---- */
.prop-row label,
.prop-section-title {
    color: var(--text-muted) !important;
    text-shadow: none !important;
    font-family: "Passero One", sans-serif;
    font-size: 16px;
}
.prop-section-title {
    color: var(--text-primary) !important;
    border-bottom: none !important;
    box-shadow: 0 1px 0 var(--neu-dark-soft);
    padding-bottom: 4px;
    font-family: "Passero One", sans-serif;
    font-size: 24px;
}

/* ---- Secret toolbar: same surface as the main toolbar ---- */
#secret-toolbar {
    background: var(--neu-bg) !important;
    box-shadow: var(--neu-shadow-raised) !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
#secret-toolbar::before,
#secret-toolbar::after { display: none !important; }

/* =====================================================================
   BRUSHED-METAL THEME
   Inspired by https://simurai.com/lab/2011/08/21/brushed-metal
   Three palettes mapped to UI regions:
     • COPPER — body background, toolbars, main-menu chrome
     • BRASS  — popup panels (properties, world, views, grid, news modal)
     • STEEL  — buttons, key-bind buttons, input fields
   Each surface stacks two layers: a vertical light→mid→dark gradient for
   the bezel shading, and a low-alpha repeating-linear-gradient for the
   "brushed" striations. Inset highlights/shadows fake the chamfer.
   ===================================================================== */
:root {
    /* COPPER */
    --copper-light: #ec9e5e;
    --copper-mid:   #b47031;
    --copper-dark:  #5a3414;
    --copper-edge:  #2a1606;

    /* BRASS */
    --brass-light:  #f1dd86;
    --brass-mid:    #b9a13a;
    --brass-dark:   #695718;
    --brass-edge:   #261f06;

    /* STEEL */
    --steel-light:  #dbe1ea;
    --steel-mid:    #9da3ad;
    --steel-dark:   #4e525d;
    --steel-edge:   #1c1f26;

    /* Two-layer surface: the grayscale BrushedMetal.png on top, and a
       per-metal vertical gradient underneath. We `multiply`-blend the
       layers so the gradient tints the texture — dark brush strokes
       become darker color, bright spots take the metal's mid tone. */
    --metal-texture: url('BrushedMetal.png');

    --copper-surface:
        var(--metal-texture),
        linear-gradient(180deg, var(--copper-light) 0%, var(--copper-mid) 50%, var(--copper-dark) 100%);
    --brass-surface:
        var(--metal-texture),
        linear-gradient(180deg, var(--brass-light) 0%, var(--brass-mid) 50%, var(--brass-dark) 100%);
    --steel-surface:
        var(--metal-texture),
        linear-gradient(180deg, var(--steel-light) 0%, var(--steel-mid) 55%, var(--steel-dark) 100%);

    /* Bezel: tight inner highlight on top + inner shadow on bottom; outer
       drop shadow for elevation. Reused across all three metals. */
    --metal-bezel:
        inset 0  1px 0 rgba(255,255,255,0.55),
        inset 0 -1px 0 rgba(0,0,0,0.45),
        inset 1px 0  0 rgba(255,255,255,0.18),
        inset -1px 0  0 rgba(0,0,0,0.25),
        0 4px 10px rgba(0,0,0,0.45);
    --metal-bezel-tight:
        inset 0  1px 0 rgba(255,255,255,0.6),
        inset 0 -1px 0 rgba(0,0,0,0.45),
        0 1px 2px rgba(0,0,0,0.35);
    --metal-bezel-pressed:
        inset 2px 2px 5px rgba(0,0,0,0.55),
        inset -1px -1px 2px rgba(255,255,255,0.3);

    /* Engraved-text colors. Dark text on copper/brass needs a light
       highlight under it; light text on steel-active needs a dark drop. */
    --metal-text:        #1c1206;
    --metal-text-light:  #f6ecd2;
    --metal-text-shadow: 0 1px 0 rgba(255,255,255,0.40);
    --metal-text-shadow-dark: 0 1px 1px rgba(0,0,0,0.55);
}

/* ---- Body backdrop = COPPER (fixed so it doesn't scroll) ---- */
body {
    background: var(--copper-surface) !important;
    background-attachment: fixed !important;
    color: var(--metal-text) !important;
    text-shadow: var(--metal-text-shadow) !important;
}

/* ---- Toolbar + main-menu chrome = COPPER ---- */
#toolbar,
#secret-toolbar,
#main-menu-panel {
    background: var(--copper-surface) !important;
    border: 1px solid var(--copper-edge) !important;
    border-radius: 14px !important;
    box-shadow: var(--metal-bezel) !important;
    color: var(--metal-text) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ---- Popup panels = BRASS ---- */
#properties-panel,
#world-panel,
#views-panel,
#grid-panel,
.glass-panel,
.news,
.carousel-item,
.news-modal-panel {
    background: var(--brass-surface) !important;
    border: 1px solid var(--brass-edge) !important;
    border-radius: 12px !important;
    box-shadow: var(--metal-bezel) !important;
    color: var(--metal-text) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Kill any leftover ::before/::after gradient layers from earlier themes. */
#toolbar::before, #toolbar::after,
#secret-toolbar::before, #secret-toolbar::after,
#properties-panel::before, #properties-panel::after,
#world-panel::before, #world-panel::after,
#views-panel::before, #views-panel::after,
#grid-panel::before, #grid-panel::after,
#main-menu-panel::before, #main-menu-panel::after,
.glass-panel::before, .glass-panel::after,
.news::before, .news::after,
.carousel-item::before, .carousel-item::after {
    display: none !important;
}

/* Text on copper/brass — engraved look. */
.prop-row label,
.prop-section-title,
.toolbar-label,
.main-button,
#status-bar {
    color: var(--metal-text) !important;
    text-shadow: var(--metal-text-shadow) !important;
}
.prop-section-title {
    box-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 2px 0 rgba(0,0,0,0.25) !important;
}

/* ---- Buttons = STEEL ---- */
.tool-btn,
.sim-btn,
.main-button,
.key-bind-btn,
.corner-type-btn,
.pen-mode-btn,
.main-menu-load {
    background: var(--steel-surface) !important;
    border: 1px solid var(--steel-edge) !important;
    border-radius: 8px !important;
    box-shadow: var(--metal-bezel-tight) !important;
    color: var(--metal-text) !important;
    text-shadow: var(--metal-text-shadow) !important;
    transition: filter 0.14s ease, box-shadow 0.14s ease, transform 0.10s ease !important;
}
.tool-btn:hover,
.sim-btn:hover,
.main-button:hover:not(.disabled),
.key-bind-btn:hover,
.corner-type-btn:hover,
.pen-mode-btn:hover,
.main-menu-load:hover {
    filter: brightness(1.10) !important;
    transform: translateY(-1px);
}
.tool-btn:active,
.sim-btn:active,
.main-button:active:not(.disabled),
.key-bind-btn:active,
.corner-type-btn:active,
.pen-mode-btn:active,
.main-menu-load:active {
    box-shadow: var(--metal-bezel-pressed) !important;
    transform: translateY(0);
}

/* Active tool: pressed-in steel, accent-tinted icon. */
.tool-btn.active,
.corner-type-btn.active,
.pen-mode-btn.active {
    box-shadow: var(--metal-bezel-pressed) !important;
    color: var(--accent-active) !important;
    background: var(--steel-surface) !important;
}
.tool-btn svg {
    fill: none !important;
    stroke: var(--metal-text) !important;
}
.tool-btn svg .fill {
    fill: var(--metal-text) !important;
    stroke: none !important;
}
.tool-btn.active svg {
    stroke: var(--accent-active) !important;
}
.tool-btn.active svg .fill {
    fill: var(--accent-active) !important;
}

/* Status-bar (the thin bar at the bottom) — copper to match the chrome. */
#status-bar {
    background: var(--copper-surface) !important;
    border-top: 1px solid var(--copper-edge) !important;
    box-shadow: var(--metal-bezel-tight) !important;
}

/* Input fields — inset steel. Numbers, text, selects all share the look. */
.prop-row input[type="number"],
.prop-row input[type="text"],
.prop-row select,
#world-panel input[type="number"],
#world-panel input[type="text"],
#world-panel select,
#views-panel input[type="number"],
#views-panel input[type="text"],
#views-panel select,
#grid-panel input[type="number"],
#grid-panel input[type="text"],
#grid-panel select,
.knob-num {
    background: var(--steel-surface) !important;
    border: 1px solid var(--steel-edge) !important;
    border-radius: 6px !important;
    box-shadow:
        inset 1px 1px 3px rgba(0,0,0,0.45),
        inset -1px -1px 2px rgba(255,255,255,0.30) !important;
    color: var(--metal-text) !important;
    text-shadow: none !important;
    padding: 2px 6px !important;
}

/* Range inputs — steel track + accent thumb. */
input[type="range"] {
    accent-color: var(--accent-active);
}

/* Color swatches keep their inline color; just tighten the steel ring. */
.cp-swatch {
    border: 1px solid var(--steel-edge) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.4),
        0 1px 2px rgba(0,0,0,0.4) !important;
}

/* News carousel items inside the main menu — brass plaquettes. */
.carousel-item {
    background: var(--brass-surface) !important;
    border: 1px solid var(--brass-edge) !important;
    border-radius: 10px !important;
    color: var(--metal-text) !important;
}

/* Knob widget — restyle the knob face to read as a small steel disk
   with a copper pointer. */
.knob {
    background: radial-gradient(circle at 35% 30%, #e2e6ee, #565a64 78%) !important;
    border: 1px solid var(--steel-edge) !important;
    box-shadow:
        inset 0 -3px 6px rgba(0,0,0,0.55),
        inset 0 2px 4px rgba(255,255,255,0.55),
        0 2px 4px rgba(0,0,0,0.5) !important;
}
.knob-pointer {
    background: var(--copper-light) !important;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.7),
        inset 0 1px 0 rgba(255,255,255,0.6) !important;
}

/* Carousel scrollbar on the main menu — copper rails. */
.carousel::-webkit-scrollbar { height: 8px; }
.carousel::-webkit-scrollbar-track { background: var(--copper-mid); }
.carousel::-webkit-scrollbar-thumb {
    background: var(--steel-mid);
    border-radius: 4px;
}

/* Disabled main-menu buttons keep the steel look but dim out. */
.main-button.disabled {
    filter: brightness(0.78) saturate(0.6) !important;
    cursor: not-allowed !important;
}

/* ---- Texture-blend wiring -------------------------------------------------
   Each metal surface declares its background as `texture, gradient` — but
   the blend mode + tile size + repeat behavior live on the element. We
   apply them in two groups so panels can use a larger tile (the texture's
   grain reads better at scale) and small buttons/inputs get a tighter
   tile so the texture is visible at button-size.
   --------------------------------------------------------------------- */
body,
#toolbar,
#secret-toolbar,
#main-menu-panel,
#status-bar,
#properties-panel,
#world-panel,
#views-panel,
#grid-panel,
.glass-panel,
.news,
.carousel-item,
.news-modal-panel {
    background-blend-mode: multiply, normal !important;
    background-size: 420px 420px, 100% 100% !important;
    background-repeat: repeat, no-repeat !important;
    background-position: 0 0, 0 0 !important;
}

/* Buttons + inputs: smaller texture tile so each control shows a chunk
   of grain rather than one giant smooth patch.
   `.tool-btn.active` etc. are listed alongside `.tool-btn` because the
   prior `.tool-btn.active { background: ... !important }` rule is a
   higher-specificity shorthand that resets `background-size` to initial.
   We need to outrank it on specificity, not just on !important. */
.tool-btn, .tool-btn.active,
.sim-btn,
.main-button, .main-button.disabled,
.key-bind-btn,
.corner-type-btn, .corner-type-btn.active,
.pen-mode-btn, .pen-mode-btn.active,
.main-menu-load,
.prop-row input[type="number"],
.prop-row input[type="text"],
.prop-row select,
#world-panel input[type="number"],
#world-panel input[type="text"],
#world-panel select,
#views-panel input[type="number"],
#views-panel input[type="text"],
#views-panel select,
#grid-panel input[type="number"],
#grid-panel input[type="text"],
#grid-panel select,
.knob-num {
    background-blend-mode: multiply, normal !important;
    background-size: 160px 160px, 100% 100% !important;
    background-repeat: repeat, no-repeat !important;
    background-position: 0 0, 0 0 !important;
}

/* Body keeps the texture fixed so it doesn't scroll with content. */
body {
    background-attachment: fixed, fixed !important;
}

/* =====================================================================
   BULK EDIT PANEL — collapsibles + joint-type tabs + mixed swatch
   The bulk panel uses native <details>/<summary> for collapse so we get
   keyboard + a11y for free. The summary is styled to read as a brass
   header strip with a chevron that rotates open. Joint-type tabs use the
   same pressed-bezel feel as active tool-btns.
   ===================================================================== */
.bulk-section {
    margin-top: 6px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.10);
    box-shadow:
        inset 0  1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(0, 0, 0, 0.30);
}
.bulk-section > summary {
    cursor: pointer;
    list-style: none;
    padding: 6px 10px;
    font-weight: 700;
    color: var(--metal-text);
    text-shadow: var(--metal-text-shadow);
    background: var(--brass-surface) !important;
    background-blend-mode: multiply, normal !important;
    background-size: 200px 200px, 100% 100% !important;
    background-repeat: repeat, no-repeat !important;
    background-position: 0 0, 0 0 !important;
    border: 1px solid var(--brass-edge) !important;
    box-shadow: var(--metal-bezel-tight) !important;
    user-select: none;
    position: relative;
    display: flex;
    align-items: center;
}
.bulk-section > summary::-webkit-details-marker { display: none; }
.bulk-section > summary::before {
    content: '▸';
    margin-right: 6px;
    transition: transform 0.15s ease;
    transform: rotate(0deg);
    display: inline-block;
}
.bulk-section[open] > summary::before {
    transform: rotate(90deg);
}
.bulk-section-body {
    padding: 8px 6px 4px 6px;
}

/* Joint-type tabs row: small steel buttons across the top of the Joints
   section. Active tab is pressed in. */
.bulk-joint-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 0 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.20);
    margin-bottom: 8px;
}
.bulk-joint-tab {
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--steel-edge) !important;
    background: var(--steel-surface) !important;
    background-blend-mode: multiply, normal !important;
    background-size: 120px 120px, 100% 100% !important;
    background-repeat: repeat, no-repeat !important;
    background-position: 0 0, 0 0 !important;
    box-shadow: var(--metal-bezel-tight) !important;
    color: var(--metal-text) !important;
    text-shadow: var(--metal-text-shadow) !important;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.14s ease, box-shadow 0.14s ease;
}
.bulk-joint-tab:hover {
    filter: brightness(1.10);
}
.bulk-joint-tab.active {
    box-shadow: var(--metal-bezel-pressed) !important;
    color: var(--accent-active) !important;
}

/* Mixed-value swatch: small checker pattern indicating "selected items
   have different colors here". Clicking the swatch still opens the color
   picker; on commit, the new color is applied to all. */
.cp-swatch.mixed {
    background:
        repeating-conic-gradient(
            #cccccc 0% 25%,
            #555555 25% 50%) 0 0 / 12px 12px !important;
    border: 1px solid var(--steel-edge) !important;
}