/*
    Canvas button — full-screen transparent hit area.
    JavaScript performs alpha-based hit testing so only
    visible pixels react to clicks.
*/

.canvas-button {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;

    pointer-events: none;
}

.canvas-button,
.canvas-button canvas {
    pointer-events: none;
}

/* Theme toggle — fixed controls overlay */

.theme-toggle {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 100;

    padding: 10px 16px;

    border: 2px solid var(--ui-color);
    border-radius: 4px;

    background-color: var(--background-color);
    color: var(--ui-color);

    font-family: monospace;
    font-size: 16px;
    font-weight: bold;

    cursor: pointer;

    transition:
        background-color var(--theme-transition-duration) ease,
        color var(--theme-transition-duration) ease,
        border-color var(--theme-transition-duration) ease,
        transform 150ms ease;
}

.theme-toggle:hover {
    transform: translateY(-2px);
}

.theme-toggle:active {
    transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle {
        transition: none;
    }
}