/* Shared visual theme for the STEP-Bench puzzle pages - matches index.html.
   Page chrome ONLY: body, fixed corner control buttons, the floating
   dashboard, the end-of-puzzle / quit cards. Never styles the puzzle grid,
   cells, tokens, ripple, energy frame, confetti, or any in-puzzle colour.
   Link this AFTER each page's own <style> block so it wins any leftover
   conflicts. */

/* The digit "4" - and ONLY "4" - renders in VT323 wherever the 'Digit4'
   family leads the font stack (just the dashboard: the Level readout and the
   puzzle dropdown). size-adjust makes that one glyph a couple px larger than
   its neighbours; nothing else's font, weight, or size is touched. */
@font-face {
    font-family: 'Digit4';
    src: url('vt323-latin.woff2') format('woff2');
    unicode-range: U+34;
    size-adjust: 115%;   /* the "4" renders ~2px larger than its neighbours; tune here */
    font-display: swap;
}

:root {
    --bg: #F9F9F6;
    --surface: #F9F9F6;
    --ink: #1C1A17;
    --ink-soft: #6B655B;
    --primary: #d15884;
    --primary-hover: #e37f9b;
    --grid-line: #D4D4CE;
}

body {
    box-sizing: border-box;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg);
    color: var(--ink);
    /* Sit the content near the top (instructions first, then the grid)
       rather than vertically centred - less scrolling on the puzzle. The
       dashboard is fixed top-left and is allowed to overlap the
       instructions; the 2-line instructions block keeps the grid itself
       clear of it, so only a small top pad is needed. */
    justify-content: flex-start;
    padding-top: 20px;
}

/* --- Fixed corner controls - pink console keys, matching the homepage --- */
#restart-button,
#skip-button,
#download-button {
    padding: 12px 18px;
    font-family: 'Silkscreen', 'Courier New', monospace;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: var(--primary);
    color: #FBF3EE;
    border: 3px solid var(--ink);
    border-radius: 10px;
    box-shadow: 4px 4px 0 var(--ink);
    cursor: pointer;
    transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, background-color 0.12s ease-out;
}
#restart-button:hover,
#skip-button:hover,
#download-button:hover {
    background: var(--primary-hover);
    transform: translate(1px, 1px);
    box-shadow: 3px 3px 0 var(--ink);
}
#restart-button:active,
#skip-button:active,
#download-button:active {
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 var(--ink);
}

/* Skip Level and the audio Start Recording button use the same soft blurred
   drop shadow as the dashboard (offset kept close to the element).
   (Skip keeps its hover/active translate from the rule above.) */
#skip-button,
#skip-button:hover,
.audio-recorder-btn {
    box-shadow: 8px 10px 16px -6px rgba(28, 26, 23, 0.4);
}
#skip-button:active {
    box-shadow: 3px 4px 10px -5px rgba(28, 26, 23, 0.4);
}

/* --- Floating dashboard (top-left) --- */
#dashboard {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 14px;
    background: var(--surface);
    border: 3px solid var(--ink);
    border-radius: 14px;
    box-shadow: 8px 10px 16px -6px rgba(28, 26, 23, 0.4);
    font-family: 'Digit4', 'Silkscreen', 'Courier New', monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #000;
}
#dashboard .dash-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
#dashboard .dash-sep {
    align-self: stretch;
    width: 3px;
    background: var(--grid-line);
}
#dashboard .dash-field {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 700;
}
#dash-level {
    font-size: 20px;
}
#dash-home {
    display: inline-block;
    text-decoration: none;
    color: #FBF3EE;
    background: var(--primary);
    border: 3px solid var(--ink);
    border-radius: 9px;
    padding: 7px 12px;
    box-shadow: 3px 3px 0 var(--ink);
    transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, background-color 0.12s ease-out;
}
#dash-home:hover {
    background: var(--primary-hover);
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 var(--ink);
}
#dash-home:active {
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 var(--ink);
}
#dash-puzzle {
    font-family: inherit;
    font-size: 12px;
    text-transform: uppercase;
    padding: 5px 8px;
    background: #F3DCE6;   /* same pale pink as the energy switch's ON track */
    color: #000;
    border: 3px solid var(--ink);
    border-radius: 8px;
    cursor: pointer;
}
/* Download Data lives on the dashboard's second row - scale it down to
   match #dash-home rather than the full corner-key size. */
#dashboard #download-button {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 9px;
    background: var(--surface);   /* same as the page/light background */
    color: var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
}
#dashboard #download-button:hover {
    background: #EFEFEA;
    box-shadow: 2px 2px 0 var(--ink);
}
#dashboard #download-button:active {
    box-shadow: 0 0 0 var(--ink);
}

/* --- Energy switch (game5 only) - Uiverse-style toggle with the state
       text on the track --- */
.energy-switch {
    --sw-h: 22px;
    --sw-w: 152px;
    position: relative;
    display: inline-flex;
    align-items: center;
    width: var(--sw-w);
    height: var(--sw-h);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.energy-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.energy-switch .track {
    box-sizing: border-box;
    position: absolute;
    inset: 0;
    border: 3px solid var(--ink);
    border-radius: var(--sw-h);
    background: var(--grid-line);
    transition: background-color 0.15s;
}
.energy-switch input:checked ~ .track {
    background: #F3DCE6;
}
.energy-switch .track-label {
    position: absolute;
    top: 50%;
    right: 12px;                 /* OFF: thumb left, label right */
    transform: translateY(-50%);
    font-family: 'Silkscreen', 'Courier New', monospace;
    font-size: 9px;
    letter-spacing: 0.5px;
    color: #000;
    white-space: nowrap;
    pointer-events: none;
}
.energy-switch input:checked ~ .track-label {
    right: auto;
    left: 14px;                  /* ON: label left */
}
.energy-switch .thumb {
    box-sizing: border-box;
    position: absolute;
    left: -3px;
    top: 50%;
    height: var(--sw-h);
    width: var(--sw-h);
    border: 3px solid var(--ink);
    border-radius: 100%;
    background: var(--primary);
    box-shadow: 0 3px 0 var(--ink);
    transform: translateY(calc(-50% - 3px));
    transition: transform 0.15s, box-shadow 0.15s;
}
.energy-switch input:checked ~ .thumb {
    transform: translate(calc(var(--sw-w) - var(--sw-h)), calc(-50% - 3px));
}
.energy-switch:hover .thumb {
    transform: translateY(calc(-50% - 5px));
    box-shadow: 0 5px 0 var(--ink);
}
.energy-switch:hover input:checked ~ .thumb {
    transform: translate(calc(var(--sw-w) - var(--sw-h)), calc(-50% - 5px));
    box-shadow: 0 5px 0 var(--ink);
}
.energy-switch input:focus-visible ~ .track {
    box-shadow: 0 0 0 2px var(--primary);
}

/* --- Cards: end-of-puzzle notice + "Quit puzzle?" dialog --- */
.completion-overlay {
    background: rgba(28, 26, 23, 0.55);
}
/* The page's .completion-overlay rule sets display:flex, which would beat the
   UA [hidden] rule - re-hide when the attribute is present. */
.completion-overlay[hidden] {
    display: none;
}
.quit-overlay {
    cursor: default;
}
.completion-card {
    background: var(--surface);
    border: 3px solid var(--ink);
    border-radius: 18px;
    box-shadow: 14px 16px 22px -6px rgba(28, 26, 23, 0.45);
    font-family: 'Inter', system-ui, sans-serif;
}
.completion-card h2 {
    font-family: 'Silkscreen', 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ink);
}
.completion-card p {
    color: var(--ink-soft);
}
.card-actions {
    margin-top: 22px;
    display: flex;
    gap: 14px;
    justify-content: center;
}
.card-btn {
    font-family: 'Silkscreen', 'Courier New', monospace;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 22px;
    background: var(--primary);
    color: #FBF3EE;
    border: 3px solid var(--ink);
    border-radius: 10px;
    box-shadow: 4px 4px 0 var(--ink);
    cursor: pointer;
    transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, background-color 0.12s ease-out;
}
.card-btn:hover {
    background: var(--primary-hover);
    transform: translate(1px, 1px);
    box-shadow: 3px 3px 0 var(--ink);
}
.card-btn:active {
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 var(--ink);
}