@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400&display=swap');

:root {
    --space-4: 4px;
    --space-8: 8px;
    --space-16: 16px;
    --space-24: 24px;
    --gap: var(--space-16);
    --deep: rgb(26, 15, 10);
    --ui-accent: rgba(255, 243, 224, 0.85);
}

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

html, body { height: 100%; }

body {
    background: var(--deep);
    font-family: 'DM Mono', monospace;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

header {
    position: fixed;
    top: 24px;
    left: 24px;
    color: var(--ui-accent);
    font-size: 13px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    z-index: 100;
    pointer-events: none;
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-8);
    line-height: 1;
}

#chapter-name {
    opacity: 0.4;
    letter-spacing: 0.15em;
}

.toolbar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    z-index: 100;
    background: color-mix(in srgb, var(--deep) 80%, transparent);
    border: 1px solid color-mix(in srgb, var(--ui-accent) 12%, transparent);
    border-radius: 4px;
    backdrop-filter: blur(12px);
}

.toolbar-btn {
    width: 40px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-accent);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.toolbar-btn:hover  { opacity: 1; }
.toolbar-btn.disabled { opacity: 0.2; pointer-events: none; }

.toolbar-sep {
    width: 1px;
    height: var(--space-16);
    background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
}

.toolbar-label {
    padding: 0 var(--space-16);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ui-accent);
    opacity: 0.75;
    white-space: nowrap;
}

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--gap);
    margin: 0 auto;
    
    /* Calculate max cell size that fits both horizontally and vertically */
    --avail-w: calc(100vw - 48px - 3 * var(--gap));
    --avail-h: calc(100dvh - 96px - 1 * var(--gap));
    
    --cell-w: calc(var(--avail-w) / 4);
    --cell-h: calc(var(--avail-h) / 2);
    
    /* Use the smaller of the two to guarantee square aspect */
    --cell-size: min(var(--cell-w), var(--cell-h), 200px);
    
    width: calc(4 * var(--cell-size) + 3 * var(--gap));
    height: calc(2 * var(--cell-size) + 1 * var(--gap));
}

.card {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.label {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ui-accent);
    opacity: 0.7;
}

.cell {
    flex: 1;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.cell:hover {
    transform: scale(1.015);
    z-index: 10;
}

canvas {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 720px) {
    header { top: 16px; left: 16px; font-size: 12px; }

    .toolbar { bottom: 16px; }

    .toolbar-btn { width: 52px; height: 44px; font-size: 18px; }

    .toolbar-label { font-size: 11px; }

    .grid {
        --g: 8px;
        --safe-h: calc(100dvh - 128px);
        
        --cell-w: calc((100vw - 32px - var(--g)) / 2);
        --cell-h: calc((var(--safe-h) - 3 * var(--g)) / 4);
        
        --cell-size: min(var(--cell-w), var(--cell-h), 150px);
        
        width: calc(2 * var(--cell-size) + 1 * var(--g));
        height: calc(4 * var(--cell-size) + 3 * var(--g));
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
        gap: var(--g);
    }

    .label { font-size: 10px; letter-spacing: 0.06em; }
}