/* Mandelbrot explorer — reuses the blog design tokens from main.css */

.mb-app {
    margin-bottom: var(--spacing-2xl);
}

.mb-stage {
    position: relative;
    background: var(--color-card-bg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.mb-canvas {
    display: block;
    width: 100%;
    height: min(62vh, 620px);
    min-height: 320px;
    cursor: grab;
    touch-action: none;
    outline: none;
    background: #171c17;
}

.mb-canvas:active {
    cursor: grabbing;
}

.mb-stage:fullscreen {
    border-radius: 0;
}

.mb-stage:fullscreen .mb-canvas {
    height: 100vh;
    min-height: 100vh;
}

.mb-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-xl);
    background: var(--color-card-bg);
    color: var(--color-text-primary);
}

.mb-fallback[hidden] {
    display: none;
}

.mb-toast {
    position: absolute;
    left: 50%;
    bottom: var(--spacing-lg);
    transform: translateX(-50%) translateY(8px);
    background: var(--color-primary-brown);
    color: var(--color-primary-off-white);
    font-size: var(--font-size-small);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.mb-toast--show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.mb-hud {
    position: absolute;
    top: var(--spacing-sm);
    left: var(--spacing-sm);
    right: var(--spacing-sm);
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-md);
    pointer-events: none;
    font-size: var(--font-size-small);
}

.mb-hud > span {
    background: rgba(20, 24, 20, 0.72);
    color: var(--color-primary-off-white);
    padding: 2px var(--spacing-sm);
    border-radius: var(--radius-sm);
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mb-statusbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
    padding: var(--spacing-sm) var(--spacing-xs);
}

.mb-center {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.mb-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm) var(--spacing-lg);
    background: var(--color-card-bg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: var(--spacing-md) var(--spacing-lg);
    margin-top: var(--spacing-md);
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
}

[data-theme="dark"] .mb-controls {
    color: var(--color-text-primary);
}

.mb-controls label {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.mb-controls input[type="number"],
.mb-controls select {
    font-family: var(--font-family-body);
    font-size: var(--font-size-small);
    color: inherit;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 2px var(--spacing-xs);
    max-width: 7.5rem;
}

.mb-controls select option {
    color: var(--color-primary-brown);
}

.mb-controls input[type="range"] {
    width: 90px;
    accent-color: var(--color-accent);
}

.mb-controls input[type="checkbox"] {
    accent-color: var(--color-accent);
}

.mb-controls button {
    font-family: var(--font-family-body);
    font-size: var(--font-size-small);
    font-weight: 700;
    color: inherit;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: var(--spacing-xs) var(--spacing-md);
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.mb-controls button:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.mb-controls .mb-spacer {
    flex: 1;
}

.mb-help {
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-sm);
}

[data-theme="dark"] .mb-help {
    color: var(--color-support-light-gray);
}