*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Transparency checkerboard — shows through wherever the WebGL background is
       transparent, signalling the gradient has an alpha background. Editor only;
       the HTML export ships no checkerboard so users supply their own backdrop. */
    background-color: var(--color-bg);
    background-image:
        linear-gradient(45deg,  var(--checker) 25%, transparent 25%),
        linear-gradient(-45deg, var(--checker) 25%, transparent 25%),
        linear-gradient(45deg,  transparent 75%, var(--checker) 75%),
        linear-gradient(-45deg, transparent 75%, var(--checker) 75%);
    background-size: 28px 28px;
    background-position: 0 0, 0 14px, 14px -14px, -14px 0;
}

/* ── WebGL background canvas ─────────────────────────────── */
#bg-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-background);
    display: block;
}

/* ── Grain overlay ───────────────────────────────────────── */
.grain {
    position: fixed;
    inset: 0;
    z-index: var(--z-grain);
    pointer-events: none;
    opacity: var(--grain-opacity);
    filter: contrast(var(--grain-contrast));
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: var(--grain-size) var(--grain-size);
    animation: grain var(--grain-speed) steps(1) infinite;
}

@keyframes grain {
    0%   { background-position:   0px    0px; }
    10%  { background-position:  34px   71px; }
    20%  { background-position: -83px   22px; }
    30%  { background-position:  17px  -94px; }
    40%  { background-position: -49px   57px; }
    50%  { background-position:  95px  -31px; }
    60%  { background-position: -12px   88px; }
    70%  { background-position:  63px  -67px; }
    80%  { background-position: -77px   13px; }
    90%  { background-position:  28px   79px; }
}

/* ── Top icon bar ────────────────────────────────────────────── */
#top-bar {
    position: fixed;
    top: var(--ui-gap);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-topbar);
    display: flex;
    align-items: center;
    gap: 2px;
    padding: var(--pad-1);
    background: var(--panel-bg);
    backdrop-filter: blur(var(--panel-blur));
    -webkit-backdrop-filter: blur(var(--panel-blur));
    border: var(--border-panel);
    border-radius: var(--radius-1);
}

.top-bar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-2);
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--ease-hover), background var(--ease-hover);
}
.top-bar-btn:hover {
    color: var(--text-hover);
    background: var(--surface-hover);
}
.top-bar-btn::before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}
.top-bar-info::before {
    -webkit-mask-image: url('/assets/icons/ui/info_icon.svg');
    mask-image: url('/assets/icons/ui/info_icon.svg');
}
.top-bar-bmc::before {
    -webkit-mask-image: url('/assets/icons/socials/bmc-logo.svg');
    mask-image: url('/assets/icons/socials/bmc-logo.svg');
}
.top-bar-maximize::before {
    -webkit-mask-image: url('/assets/icons/ui/ui_maximize.svg');
    mask-image: url('/assets/icons/ui/ui_maximize.svg');
}
.top-bar-hide::before {
    -webkit-mask-image: url('/assets/icons/ui/ui_hide.svg');
    mask-image: url('/assets/icons/ui/ui_hide.svg');
}

/* hide-UI toggle — dim the whole bar when active */
body.ui-hidden #top-bar {
    opacity: 0.35;
    transition: opacity var(--ease-hover);
}
body.ui-hidden #top-bar:hover {
    opacity: 1;
}
.top-bar-btn.is-active {
    color: var(--text-hover);
    background: var(--surface-active);
}

/* hide all panels except the top bar */
body.ui-hidden #controls-wrapper,
body.ui-hidden #export-wrapper,
body.ui-hidden #timeline-strip {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ease-hover);
}

/* ── Panel pull-tab arrow icon — shared by controls + export ─── */
.tab-arrow-icon {
    width: var(--icon-size);
    height: var(--icon-size);
    display: block;
    filter: invert(1);
    opacity: 0.55;
    transition: transform var(--ease-panel), opacity var(--ease-hover);
}
#controls-tab:hover .tab-arrow-icon,
#export-tab:hover   .tab-arrow-icon { opacity: 0.90; }

/* ── Info modal ──────────────────────────────────────────────── */
#info-overlay {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ease-panel);
}
#info-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}
#info-panel {
    width: calc(100% - 3 * var(--panel-width));
    max-height: calc(100% - var(--panel-width));
    /* Narrower when the controls are extended, so it clears the wider sidebar. */
}
body.controls-split #info-panel {
    width: calc(100% - 4 * var(--panel-width));
}
#info-panel {
    display: flex;
    flex-direction: column;
    font-family: var(--font-main);
    background: var(--panel-bg);
    backdrop-filter: blur(var(--panel-blur));
    -webkit-backdrop-filter: blur(var(--panel-blur));
    border: var(--border-panel);
    border-radius: var(--radius-1);
    transform: scale(0.97);
    transition: transform var(--ease-panel);
}
#info-overlay.is-open #info-panel {
    transform: scale(1);
}
#info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--pad-header) var(--pad-outer) var(--pad-inner);
    border-bottom: var(--border-sub);
    flex-shrink: 0;
}
#info-title {   /* s1 — heading: info panel title */
    margin: 0;
    padding: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-ui);
    color: var(--t-sidebar-title-color);
    text-transform: uppercase;
}
#info-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-2);
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--ease-hover), background var(--ease-hover);
}
#info-close-btn:hover {
    color: var(--text-hover);
    background: var(--surface-hover);
}
#info-close-btn::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background-color: currentColor;
    -webkit-mask-image: url('/assets/icons/ui/ui_close.svg');
    mask-image: url('/assets/icons/ui/ui_close.svg');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}
#info-body {   /* s4 — body: base for all info panel prose */
    padding: var(--pad-outer);
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: var(--font-size-base);
    font-family: var(--font-main);
    line-height: 1.6;
    color: var(--text-primary);
}
.info-lead {
    color: var(--text-label);
    line-height: 1.7;
    margin: 0;
}

.info-section-title {   /* s1 — heading: section titles inside info panel */
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-ui);
    color: var(--t-section-color);
    text-transform: uppercase;
    margin: 0 calc(-1 * var(--pad-outer));
    padding: 8px var(--pad-outer);
    background: var(--surface-panel);
    display: flex;
    align-items: center;
    gap: var(--gap-row);
    cursor: pointer;
    list-style: none;
    transition: color var(--ease-fast), background var(--ease-fast);
}
.info-section-title::-webkit-details-marker { display: none; }
.info-section-title::after {
    content: '';
    margin-left: auto;
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-image: url('/assets/icons/ui/ui_plus.svg');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: url('/assets/icons/ui/ui_plus.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    opacity: 0.6;
    transition: opacity var(--ease-fast);
}
.info-group[open] .info-section-title::after {
    -webkit-mask-image: url('/assets/icons/ui/ui_minus.svg');
    mask-image: url('/assets/icons/ui/ui_minus.svg');
    opacity: 0.8;
}
.info-section-title:hover { color: var(--text-hover); background: var(--surface-hover); }
.info-group-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: var(--pad-inner) 0;
}
.info-text {
    color: var(--text-primary);
    margin: 0;
}
.info-list {
    margin: 0;
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--text-primary);
}
.info-list strong {
    color: var(--text-label);
}
.info-divider {
    border: none;
    border-top: var(--border-sub);
    margin: var(--pad-inner) 0 0;
}
#info-body code {   /* code font: inline file formats and code references */
    font-family: var(--font-code);
    font-size: 0.9em;
    color: var(--text-label);
    background: var(--surface-input);
    border: var(--border-input);
    border-radius: 3px;
    padding: 1px 4px;
}

/* ── Info panel — group list with icons ──────────────────────── */
.info-groups-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.info-groups-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--text-primary);
}
.info-groups-list li strong {
    color: var(--group-accent);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-ui);
    text-transform: uppercase;
}
.info-groups-list li::before {
    content: '';
    display: block;
    width: var(--ctrl-group-icon-size);
    height: var(--ctrl-group-icon-size);
    flex-shrink: 0;
    margin-top: 2px;
    background-color: var(--group-accent, var(--text-muted));
    -webkit-mask-image: var(--group-icon);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: var(--group-icon);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

/* Keyboard shortcuts need a physical keyboard — hide the whole section on mobile, where it
   only eats vertical space in the (cramped) info panel. Uses the app's mobile breakpoint. */
@media (max-width: 768px) {
    .info-group.hide-on-mobile { display: none; }
}

/* ── Mobile overrides ────────────────────────────────────────── */
@media (max-width: 600px) {
    #info-panel {
        width: calc(100% - 2 * var(--ui-gap));
        max-height: 80%;
    }

    #top-bar {
        transition: left var(--ease-panel), transform var(--ease-panel);
    }
    body.sidebar-export-open #top-bar {
        left: calc(100% - var(--ui-gap));
        transform: translateX(-100%);
    }
    body.sidebar-controls-open #top-bar {
        left: var(--ui-gap);
        transform: translateX(0);
    }
}