* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: rgb(22, 22, 22);
    color: #e0e0e0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
}

#frame {
    display: flex;
    flex-direction: column;
}

#game-area {
    position: relative;
    /* `box-sizing: content-box` overrides the global `border-box` so
       the 800x600 dimensions are the canvas's content area; the border
       draws OUTSIDE that and stays visible on all four sides. */
    box-sizing: content-box;
    width: 800px;
    height: 600px;
    border: 1px solid #333;
    background: rgb(12, 12, 12);
}

#game {
    display: block;
}

#game-hud {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: baseline;
    padding: 8px 4px 10px;
    color: #e8edf3;
    font: 500 13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    gap: 12px;
}

#game-hud[hidden] { display: none; }

#game-hud .hud-label {
    justify-self: start;
    font: 600 10px -apple-system, sans-serif;
    color: rgba(140, 152, 173, 0.7);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}

#game-hud .hud-title {
    justify-self: center;
    font: 600 17px -apple-system, sans-serif;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

#game-hud .hud-size {
    justify-self: end;
    font: 500 11px ui-monospace, Menlo, monospace;
    color: rgba(154, 166, 184, 0.7);
    white-space: nowrap;
}

#overlay, #test-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    pointer-events: none;
    padding: 24px;
    gap: 20px;
}

#overlay[hidden], #test-overlay[hidden] {
    display: none;
}

#overlay .overlay-label, #test-overlay .overlay-label {
    font: 700 3rem -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

#overlay .overlay-reason, #test-overlay .overlay-reason {
    max-width: 480px;
    text-align: center;
    color: rgba(255, 220, 220, 0.85);
    font: 500 1rem -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.4;
    margin: -8px 0 0;
}

#overlay .overlay-stats, #test-overlay .overlay-stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #d6dde7;
    font: 500 1rem ui-monospace, Menlo, monospace;
}

#overlay .overlay-stats .stat-time, #test-overlay .overlay-stats .stat-time {
    font: 700 1.6rem ui-monospace, Menlo, monospace;
    color: #fff;
}

#overlay .overlay-stats .stat-best, #test-overlay .overlay-stats .stat-best {
    color: #ffd45e;
    font: 600 0.95rem -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0.04em;
}

#overlay .overlay-stats .stat-prev, #test-overlay .overlay-stats .stat-prev {
    color: rgba(214, 221, 231, 0.55);
    font: 400 0.85rem -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#overlay.solved, #test-overlay.solved { color: #6ee7a8; }
#overlay.failed, #test-overlay.failed { color: #ff7a7a; }

#overlay .hint, #test-overlay .hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font: 400 0.95rem -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: rgba(214, 221, 231, 0.75);
}

#overlay .hint-row, #test-overlay .hint-row {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

#overlay .hint-row kbd, #test-overlay .hint-row kbd {
    font: 600 0.9rem ui-monospace, Menlo, monospace;
    color: #ffd45e;
}

/* ----- Pre-level dialog ------------------------------------------- */

#dialog-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    z-index: 20;
    cursor: pointer;
    animation: dialog-fade-in 220ms ease-out;
}

#dialog-overlay[hidden] { display: none; }

#dialog-overlay .dialog-card {
    background: rgba(20, 20, 22, 0.92);
    border: 1px solid #2a3a4a;
    border-radius: 10px;
    padding: 30px 38px 22px;
    min-width: 320px;
    max-width: 520px;
    box-shadow:
        0 0 24px rgba(91, 156, 240, 0.18),
        0 10px 40px rgba(0, 0, 0, 0.6);
    text-align: center;
    color: #e0e8f0;
    font: 500 1.15rem -apple-system, "Segoe UI", sans-serif;
    line-height: 1.55;
    animation: dialog-pop 220ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

#dialog-overlay .dialog-text {
    margin: 0 0 22px;
    white-space: pre-wrap;
}

#dialog-overlay .dialog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    color: #7a8898;
    border-top: 1px solid #2a3a4a;
    padding-top: 12px;
    margin-top: 6px;
}

#dialog-overlay .dialog-pip {
    letter-spacing: 0.05em;
}

#dialog-overlay .dialog-hint kbd {
    display: inline-block;
    background: #232a32;
    border: 1px solid #3a3a40;
    border-bottom-color: #1c1c20;
    border-radius: 3px;
    padding: 1px 6px;
    margin: 0 2px;
    font: 600 11px ui-monospace, Menlo, monospace;
    color: #ffd45e;
}

@keyframes dialog-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes dialog-pop {
    from { transform: translateY(8px) scale(0.95); opacity: 0; }
    to   { transform: translateY(0)   scale(1);    opacity: 1; }
}

/* ----- Pre-level 3, 2, 1, Go! countdown --------------------------- */

#countdown-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    z-index: 20;
    pointer-events: none;
}

#countdown-overlay[hidden] { display: none; }

#countdown-overlay .countdown-text {
    font: 800 8rem -apple-system, "Segoe UI", sans-serif;
    letter-spacing: 0.02em;
    color: #6ee7a8;
    text-shadow:
        0 0 32px rgba(110, 231, 168, 0.5),
        0 0 12px rgba(110, 231, 168, 0.8);
    animation: countdown-pulse 1s ease-out forwards;
}

#countdown-overlay .countdown-text.go {
    color: #ffd45e;
    text-shadow:
        0 0 48px rgba(255, 212, 94, 0.6),
        0 0 16px rgba(255, 212, 94, 0.85);
    font-size: 7rem;
    animation: countdown-go 600ms ease-out forwards;
}

@keyframes countdown-pulse {
    0%   { transform: scale(0.6); opacity: 0; }
    25%  { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1.4); opacity: 0; }
}

@keyframes countdown-go {
    0%   { transform: scale(0.4); opacity: 0; }
    35%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* ---- Main menu ------------------------------------------------------- */

#main-menu {
    position: fixed;
    inset: 0;
    background: rgb(18, 18, 20);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 24px;
    z-index: 500;
    overflow-y: auto;
}

#main-menu[hidden] {
    display: none;
}

.menu-header {
    text-align: center;
    margin-bottom: 32px;
}

.menu-header h1 {
    margin: 0;
    font: 700 48px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0.04em;
    color: #fff;
    background: linear-gradient(90deg, #6ee7a8, #5b9cf0);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.menu-subtitle {
    margin: 8px 0 0 0;
    color: #888;
    font: 500 13px -apple-system, sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.menu-levels {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    max-width: 880px;
    margin-bottom: 36px;
}

.menu-category {
    margin: 0 0 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid #2a2a30;
    font: 600 14px -apple-system, "Segoe UI", sans-serif;
    color: #b8c0cd;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.menu-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}

.level-tile {
    appearance: none;
    background: #1f1f23;
    border: 1px solid #2c2c30;
    border-radius: 8px;
    color: #d0d0d0;
    padding: 14px 12px;
    cursor: pointer;
    text-align: left;
    font: 500 13px -apple-system, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 86px;
    transition: background 0.12s, border-color 0.12s, transform 0.08s;
}

.level-tile:hover {
    background: #25252c;
    border-color: #3a6db0;
}

.level-tile:focus {
    outline: 2px solid #5b9cf0;
    outline-offset: 2px;
}

.level-tile:focus-visible {
    outline: 2px solid #5b9cf0;
    outline-offset: 2px;
}

.level-tile.locked {
    background: #161618;
    border-color: #222;
    color: #555;
    cursor: not-allowed;
}

.level-tile.locked:hover {
    background: #161618;
    border-color: #222;
}

.level-tile.locked .lvl-name {
    color: #444;
}

.level-tile.locked .lvl-status {
    color: #6a6a6a;
}

.level-tile:active {
    transform: scale(0.98);
}

.level-tile .lvl-num {
    font: 700 11px -apple-system, sans-serif;
    color: #888;
    letter-spacing: 0.1em;
}

.level-tile .lvl-name {
    font: 600 15px -apple-system, sans-serif;
    color: #fff;
}

.level-tile .lvl-status {
    margin-top: auto;
    font: 500 11px -apple-system, sans-serif;
    color: #6ee7a8;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.level-tile .lvl-thumb {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 4px;
    margin: 4px 0 2px;
    background: #0e0e0e;
    border: 1px solid #2a2a2a;
    image-rendering: -webkit-optimize-contrast;
}

/* Locked thumbnails: faint so the locked state still reads at a glance
   but the level layout is still visible. */
.level-tile .lvl-thumb.lvl-thumb-locked {
    opacity: 0.35;
    filter: grayscale(0.6);
}

.level-tile .lvl-stats {
    margin-top: 4px;
    font: 500 11px ui-monospace, Menlo, monospace;
    color: #8c98a8;
}

.level-tile.completed .lvl-stats {
    color: #b8d9c4;
}

.level-tile.completed {
    border-color: #2e5d3a;
    background: #1c2620;
}

.level-tile.completed:hover {
    background: #213027;
    border-color: #6ee7a8;
}

.level-tile.current {
    border-color: #5b9cf0;
}

.menu-palette {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 20px 0 24px;
}

.menu-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px 20px;
    margin: 0 0 24px;
}

.menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #b8c0cd;
    font: 500 13px -apple-system, "Segoe UI", sans-serif;
    cursor: pointer;
    user-select: none;
}

.menu-toggle input[type="checkbox"] {
    accent-color: #5b9cf0;
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.menu-slider {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #b8c0cd;
    font: 500 13px -apple-system, "Segoe UI", sans-serif;
    user-select: none;
}

.menu-slider-label {
    color: #b8c0cd;
}

.menu-slider input[type="range"] {
    accent-color: #5b9cf0;
    width: 120px;
    cursor: pointer;
}

.menu-slider-value {
    color: #8c98ad;
    font: 500 12px ui-monospace, Menlo, monospace;
    min-width: 38px;
    text-align: right;
}

.menu-palette-label {
    font: 600 11px -apple-system, sans-serif;
    color: #8c98ad;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.menu-palette-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.palette-option {
    appearance: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: rgba(20, 22, 26, 0.6);
    border: 1px solid #2a2a30;
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    color: #cfcfcf;
    transition: border-color 120ms, background-color 120ms;
}

.palette-option:hover {
    border-color: #555;
    background: rgba(40, 44, 52, 0.6);
}

.palette-option.active {
    border-color: #5b9cf0;
    background: rgba(46, 77, 119, 0.35);
    color: #fff;
}

.palette-swatch {
    display: flex;
    gap: 4px;
}

.palette-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 0 6px currentColor;
}

.palette-name {
    font: 500 12px -apple-system, sans-serif;
}

.menu-palette-desc {
    margin: 0;
    font: 400 11px -apple-system, sans-serif;
    color: #8c98a8;
    text-align: center;
    min-height: 1.2em;
}

.menu-footer {
    display: flex;
    gap: 12px;
    align-items: center;
}

.menu-link {
    appearance: none;
    background: #232328;
    color: #d0d0d0;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
    font: 500 13px -apple-system, sans-serif;
    text-decoration: none;
    display: inline-block;
}

.menu-link:hover {
    background: #2c2c33;
    border-color: #3a6db0;
    color: #fff;
}

/* Footer "?" button: same vibe as menu-link but a compact circle so
   it reads as a glyph rather than another text action. */
#btn-help {
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font: 700 15px -apple-system, sans-serif;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.menu-link.reset {
    color: #ff7a7a;
    border-color: #3a1f1f;
}

.menu-link.reset:hover {
    background: #2c1f1f;
    border-color: #ff7a7a;
}

/* ---- Level builder ---------------------------------------------------- */

.builder-page {
    overflow: hidden;
}

.builder-layout {
    display: grid;
    grid-template-columns: 64px 1fr 300px;
    grid-template-rows: 40px 1fr 28px;
    grid-template-areas:
        "toolbar topbar  panel"
        "toolbar canvas  panel"
        "status  status  status";
    height: 100vh;
    width: 100vw;
    gap: 0;
}

.builder-toolbar {
    grid-area: toolbar;
    background: #181818;
    border-right: 1px solid #2a2a2a;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 4px;
}

.tool-btn {
    appearance: none;
    background: #232323;
    color: #d0d0d0;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 8px 0;
    cursor: pointer;
    font: 600 12px -apple-system, "Segoe UI", sans-serif;
    letter-spacing: 0.05em;
}

.tool-btn:hover {
    background: #2c2c2c;
}

.tool-btn[data-active="true"] {
    background: #2e4d77;
    border-color: #3a6db0;
    color: #fff;
}

.builder-toolbar .toolbar-spacer {
    flex: 1 1 auto;
    min-height: 8px;
}

.builder-toolbar .toolbar-link {
    display: block;
    text-align: center;
    text-decoration: none;
    background: #1c1c1c;
    color: #9aa6b8;
    border: 1px solid #2a2a30;
    border-radius: 4px;
    padding: 8px 0;
    font: 500 11px -apple-system, "Segoe UI", sans-serif;
    letter-spacing: 0.04em;
    cursor: pointer;
}

.builder-toolbar .toolbar-link:hover {
    background: #2a2a30;
    color: #e0e0e0;
    border-color: #3a6db0;
}

.builder-topbar {
    grid-area: topbar;
    background: #181818;
    border-bottom: 1px solid #2a2a2a;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
}

.builder-topbar button {
    appearance: none;
    background: #232323;
    color: #d0d0d0;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 5px 12px;
    cursor: pointer;
    font: 500 12px -apple-system, "Segoe UI", sans-serif;
}

.builder-topbar button:hover:not(:disabled) {
    background: #2c2c2c;
}

.builder-topbar button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.topbar-spacer {
    flex: 1;
}

.grid-toggle {
    font: 500 12px -apple-system, sans-serif;
    color: #b0b0b0;
    user-select: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.topbar-select {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 600 10px -apple-system, sans-serif;
    color: #8c98ad;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    user-select: none;
}

.topbar-select select {
    appearance: none;
    background: #232323;
    color: #d6dde7;
    border: 1px solid #333;
    border-radius: 3px;
    padding: 3px 18px 3px 8px;
    font: 500 12px -apple-system, sans-serif;
    text-transform: none;
    letter-spacing: 0.01em;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, #9aa6b8 50%), linear-gradient(135deg, #9aa6b8 50%, transparent 50%);
    background-position: calc(100% - 9px) 50%, calc(100% - 5px) 50%;
    background-size: 4px 4px;
    background-repeat: no-repeat;
}

.topbar-select select:focus {
    outline: 1px solid #3a6db0;
}

.builder-canvas-wrap {
    grid-area: canvas;
    background: rgb(12, 12, 12);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.builder-canvas-frame {
    position: relative;
    width: 800px;
    height: 600px;
    border: 1px solid #333;
}

.builder-canvas-frame canvas {
    display: block;
    cursor: crosshair;
}

.builder-panel {
    grid-area: panel;
    background: #181818;
    border-left: 1px solid #2a2a2a;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

.props-panel {
    padding: 10px 12px;
    border-bottom: 1px solid #2a2a2a;
}

.props-panel h2 {
    font: 600 12px -apple-system, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #888;
    margin: 0 0 8px 0;
}

.props-panel h3 {
    font: 600 11px -apple-system, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #666;
    margin: 12px 0 6px 0;
}

.props-field {
    display: grid;
    grid-template-columns: 90px 1fr;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.props-field > label {
    font: 500 12px -apple-system, sans-serif;
    color: #b0b0b0;
}

.props-field-disabled > label {
    color: #555;
}

.props-field-disabled input:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.props-field input,
.props-field select {
    appearance: none;
    background: #232323;
    color: #e0e0e0;
    border: 1px solid #333;
    border-radius: 3px;
    padding: 4px 6px;
    font: 500 12px -apple-system, sans-serif;
    width: 100%;
    min-width: 0;
}

.props-field input[type="checkbox"] {
    appearance: auto;
    -webkit-appearance: checkbox;
    width: 14px;
    height: 14px;
    padding: 0;
    background: initial;
    border: initial;
    justify-self: start;
}

.props-field input[type="radio"] {
    appearance: auto;
    -webkit-appearance: radio;
    width: 13px;
    height: 13px;
    padding: 0;
    background: initial;
    border: initial;
    margin: 0;
    flex: 0 0 auto;
}

.props-field .radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
    padding-top: 2px;
}

.props-field .radio-group label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font: 500 11px -apple-system, sans-serif;
    color: #cfcfcf;
    cursor: pointer;
    white-space: nowrap;
}

.props-field input:focus,
.props-field select:focus {
    outline: 1px solid #3a6db0;
}

.slots-panel {
    padding: 10px 12px;
}

.slot-actions {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.slot-actions button {
    flex: 1;
    background: #232323;
    color: #d0d0d0;
    border: 1px solid #333;
    padding: 5px;
    border-radius: 3px;
    cursor: pointer;
    font: 500 12px -apple-system, sans-serif;
}

.slot-actions button.primary {
    background: #2e4d77;
    color: #fff;
    border-color: #3a6db0;
}

.slot-actions button:hover:not(:disabled) {
    filter: brightness(1.18);
}

.slot-actions button:disabled {
    background: #1c1c1c;
    color: #555;
    border-color: #2a2a2a;
    cursor: default;
}

.slot-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.slot-item {
    display: flex;
    align-items: center;
    padding: 4px 6px;
    border-radius: 3px;
    font: 500 12px -apple-system, sans-serif;
    color: #b0b0b0;
    cursor: grab;
    border-left: 2px solid transparent;
}

.slot-item:active {
    cursor: grabbing;
}

.slot-item:hover {
    background: #1f1f1f;
}

.slot-item.active {
    background: #1f2a3a;
    color: #fff;
}

.slot-item.dragging {
    opacity: 0.45;
}

.slot-item.drag-over {
    border-left-color: #5b9cf0;
    background: #1c2535;
}

.slot-item .slot-grip {
    color: #555;
    font-size: 12px;
    padding-right: 6px;
    cursor: grab;
    user-select: none;
}

.slot-item:hover .slot-grip {
    color: #888;
}

.slot-item .slot-name {
    flex: 1;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 8px;
}

.slot-item .slot-download,
.slot-item .slot-inspect,
.slot-item .slot-share,
.slot-item .slot-copyjson,
.slot-item .slot-delete {
    appearance: none;
    background: transparent;
    color: #888;
    border: none;
    cursor: pointer;
    font-size: 12px;
    padding: 2px 4px;
    opacity: 0.4;
}

.slot-item:hover .slot-download,
.slot-item:hover .slot-inspect,
.slot-item:hover .slot-share,
.slot-item:hover .slot-copyjson,
.slot-item:hover .slot-delete {
    opacity: 1;
}

.slot-item .slot-download:hover {
    color: #6ee7a8;
}

.slot-item .slot-inspect:hover {
    color: #5b9cf0;
}

.slot-item .slot-share:hover {
    color: #ffd45e;
}

.slot-item .slot-copyjson:hover {
    color: #c799ff;
}

.slot-item .slot-delete:hover {
    color: #ff7a7a;
}

.slot-empty {
    color: #666;
    font: italic 11px -apple-system, sans-serif;
}

.builder-status .dirty {
    color: #ffb84d;
    margin-left: 2px;
}

.builder-status strong {
    color: #fff;
    font-weight: 600;
}

.stats-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1500;
    padding: 24px;
}

.stats-modal[hidden] { display: none; }
.stats-modal.show { display: flex; }

.stats-modal-inner {
    background: #1c1c1f;
    color: #e0e0e0;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 24px 26px;
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.stats-modal-inner h2 {
    margin: 0 0 16px 0;
    font: 700 22px -apple-system, "Segoe UI", sans-serif;
    color: #fff;
}

.stats-summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 18px;
}

.stats-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font: 500 13px -apple-system, "Segoe UI", sans-serif;
}

.stats-summary-row .label {
    color: #8c98ad;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11px;
}

.stats-summary-row .value {
    color: #fff;
    font: 600 16px ui-monospace, Menlo, monospace;
}

.stats-table {
    width: 100%;
    border-collapse: collapse;
    font: 500 12px ui-monospace, Menlo, monospace;
    margin-bottom: 16px;
}

.stats-table th,
.stats-table td {
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid #2a2a30;
}

.stats-table th {
    color: #8c98ad;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font: 600 10px -apple-system, sans-serif;
    background: #16161a;
    position: sticky;
    top: 0;
}

.stats-table th:nth-child(2),
.stats-table th:nth-child(3),
.stats-table td:nth-child(2),
.stats-table td:nth-child(3) {
    text-align: center;
}

.stats-table tr.stats-row-cleared td:first-child {
    color: #b8d9c4;
}

.stats-close {
    appearance: none;
    background: #2e4d77;
    color: #fff;
    border: 1px solid #3a6db0;
    border-radius: 4px;
    padding: 6px 16px;
    cursor: pointer;
    font: 500 12px -apple-system, sans-serif;
}

.stats-close:hover { filter: brightness(1.15); }

/* Clickable level rows in the stats table: hover affordance + the
   actual click handler is wired in main.js for unlocked rows only. */
.stats-table tr.stats-row-clickable {
    cursor: pointer;
}

.stats-table tr.stats-row-clickable:hover td {
    background: #2a2a30;
}

/* Help-modal-specific rules. Reuses the stats-modal-inner shell. */
.help-inner {
    max-width: 520px;
}

.help-inner h2 {
    margin: 0 0 8px;
}

.help-heading {
    margin: 18px 0 6px;
    font: 700 13px -apple-system, sans-serif;
    color: #ffd45e;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.help-heading.warn {
    color: #ff9a7a;
}

.help-para {
    margin: 0 0 8px;
    color: #c8d0dc;
    font: 500 13px -apple-system, "Segoe UI", sans-serif;
    line-height: 1.55;
}

.help-para strong {
    color: #fff;
    font-weight: 700;
}

.help-list {
    margin: 0 0 10px;
    padding-left: 22px;
    color: #c8d0dc;
    font: 500 13px -apple-system, "Segoe UI", sans-serif;
    line-height: 1.6;
}

.help-list kbd {
    background: #14141a;
    border: 1px solid #3a3a40;
    border-radius: 3px;
    padding: 1px 6px;
    font: 600 11px ui-monospace, Menlo, monospace;
    color: #ffd45e;
}

.help-footer {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
}

/* ---- Challenge modals ----------------------------------------------- */

.challenge-body {
    margin: 0 0 16px;
    color: #b8c0cd;
    font: 500 14px -apple-system, "Segoe UI", sans-serif;
    line-height: 1.5;
}

.challenge-body strong {
    color: #ffd45e;
    font-weight: 700;
}

.challenge-body .challenge-time {
    color: #fff;
    font: 700 16px ui-monospace, Menlo, monospace;
}

.challenge-time-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0 0 14px;
    padding: 8px 12px;
    background: #14141a;
    border: 1px solid #2a2a30;
    border-radius: 4px;
}

.challenge-time-label {
    color: #8c98ad;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font: 600 11px -apple-system, sans-serif;
}

.challenge-time-value {
    color: #fff;
    font: 700 18px ui-monospace, Menlo, monospace;
}

.challenge-name-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 14px;
    color: #b8c0cd;
    font: 500 13px -apple-system, sans-serif;
}

.challenge-name-row input {
    appearance: none;
    background: #14141a;
    color: #fff;
    border: 1px solid #2a2a30;
    border-radius: 4px;
    padding: 8px 12px;
    font: 700 18px ui-monospace, Menlo, monospace;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    width: 110px;
}

.challenge-name-row input:focus {
    outline: none;
    border-color: #3a6db0;
}

.challenge-link-row {
    display: flex;
    gap: 6px;
    margin: 0 0 14px;
}

.challenge-link-row input {
    flex: 1;
    appearance: none;
    background: #14141a;
    color: #d6dde7;
    border: 1px solid #2a2a30;
    border-radius: 4px;
    padding: 8px 10px;
    font: 500 11px ui-monospace, Menlo, monospace;
    overflow: hidden;
    text-overflow: ellipsis;
}

.challenge-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.challenge-btn {
    appearance: none;
    background: #2a2a30;
    color: #e0e0e0;
    border: 1px solid #3a3a40;
    border-radius: 4px;
    padding: 7px 16px;
    cursor: pointer;
    font: 500 12px -apple-system, sans-serif;
}

.challenge-btn:hover { filter: brightness(1.15); }

.challenge-btn.primary {
    background: #2e4d77;
    border-color: #3a6db0;
    color: #fff;
}

.challenge-btn.copied {
    background: #2d6a44;
    border-color: #3aa066;
    color: #fff;
}

/* Solve-overlay "challenge a friend" link button. Lives inside the
   overlay's stats slot so it appears between time + hint rows. */
.overlay-challenge-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.overlay-challenge-btn {
    appearance: none;
    background: rgba(58, 109, 176, 0.18);
    color: #b6cef4;
    border: 1px solid rgba(91, 156, 240, 0.55);
    border-radius: 4px;
    padding: 5px 12px;
    cursor: pointer;
    font: 500 12px -apple-system, sans-serif;
    pointer-events: auto;
}

.overlay-challenge-btn:hover { filter: brightness(1.2); }

.overlay-challenge-delta {
    font: 600 0.95rem -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.overlay-challenge-delta.beat  { color: #6ee7a8; }
.overlay-challenge-delta.lost  { color: #ff9a7a; }

.shortcuts-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1500;
    padding: 24px;
}

.shortcuts-modal.show { display: flex; }

.shortcuts-modal-inner {
    background: #1c1c1f;
    color: #e0e0e0;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 24px;
    max-width: 880px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.shortcuts-modal-inner h2 {
    margin: 0 0 16px 0;
    font: 700 22px -apple-system, sans-serif;
    color: #fff;
}

.shortcuts-modal-inner h3 {
    margin: 0 0 6px 0;
    font: 600 12px -apple-system, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #888;
}

.shortcuts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.shortcuts-grid section > div {
    font: 500 12px -apple-system, sans-serif;
    color: #b8b8b8;
    padding: 3px 0;
}

.shortcuts-grid kbd {
    display: inline-block;
    background: #2a2a30;
    border: 1px solid #3a3a40;
    border-bottom-color: #222;
    border-radius: 4px;
    padding: 1px 6px;
    font: 600 11px ui-monospace, Menlo, monospace;
    color: #ffd45e;
    margin-right: 6px;
}

.shortcuts-close {
    appearance: none;
    margin-top: 18px;
    background: #2e4d77;
    color: #fff;
    border: 1px solid #3a6db0;
    border-radius: 4px;
    padding: 6px 16px;
    cursor: pointer;
    font: 500 12px -apple-system, sans-serif;
}

.shortcuts-close:hover { filter: brightness(1.15); }

.calc-modal-inner { max-width: 520px; }

.json-modal-inner {
    max-width: 920px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.json-modal-inner h2 {
    margin: 0;
    font: 600 16px ui-monospace, Menlo, monospace;
    color: #e0e0e0;
}

.json-modal-inner h2 .json-modal-slotname {
    color: #5b9cf0;
}

.json-editor {
    flex: 1 1 auto;
    min-height: 420px;
    width: 100%;
    background: #0e1014;
    color: #d6dde7;
    border: 1px solid #232a32;
    border-radius: 4px;
    padding: 10px 12px;
    font: 500 12px ui-monospace, Menlo, monospace;
    line-height: 1.45;
    resize: vertical;
    tab-size: 2;
    -moz-tab-size: 2;
}

.json-editor:focus {
    outline: 1px solid #3a6db0;
}

.json-editor.invalid {
    border-color: #6a2a2a;
    box-shadow: 0 0 0 1px rgba(255, 122, 122, 0.3) inset;
}

.json-status {
    min-height: 1.8em;
    font: 500 12px ui-monospace, Menlo, monospace;
    color: #8c98a8;
    white-space: pre-wrap;
}

.json-status.err {
    color: #ff8a8a;
}

.json-status.warn {
    color: #ffd45e;
}

.json-status.ok {
    color: #6ee7a8;
}

.json-modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.json-modal-actions button {
    appearance: none;
    padding: 6px 14px;
    border-radius: 4px;
    border: 1px solid #333;
    background: #232323;
    color: #d0d0d0;
    cursor: pointer;
    font: 500 12px -apple-system, sans-serif;
}

.json-modal-actions button.primary {
    background: #2e4d77;
    border-color: #3a6db0;
    color: #fff;
}

.json-modal-actions button:hover { filter: brightness(1.15); }

.json-modal-actions button:disabled {
    background: #1c1c1c;
    color: #555;
    border-color: #2a2a2a;
    cursor: default;
    filter: none;
}

.calc-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}

.calc-row label {
    font: 500 12px -apple-system, sans-serif;
    color: #b8b8b8;
}

.calc-row input[type="number"],
.calc-row select {
    background: #232323;
    color: #e0e0e0;
    border: 1px solid #333;
    border-radius: 3px;
    padding: 4px 6px;
    font: 500 13px ui-monospace, Menlo, monospace;
    width: 100%;
    box-sizing: border-box;
}

.calc-result {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-left: 3px solid #2e4d77;
    border-radius: 3px;
    padding: 8px 12px;
    margin: 12px 0;
    font: 600 14px ui-monospace, Menlo, monospace;
    color: #ffd45e;
}

.calc-result .calc-bad { color: #ff7a7a; }
.calc-result .calc-note { color: #888; font-weight: 500; font-size: 11px; margin-left: 8px; }

.calc-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.calc-actions button {
    flex: 1;
    background: #232323;
    color: #d0d0d0;
    border: 1px solid #333;
    border-radius: 3px;
    padding: 6px;
    cursor: pointer;
    font: 500 12px -apple-system, sans-serif;
}

.calc-actions button:hover { filter: brightness(1.18); }

.calc-table-wrap {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid #2a2a2a;
    border-radius: 3px;
    margin-top: 8px;
}

.calc-table {
    width: 100%;
    border-collapse: collapse;
    font: 500 12px ui-monospace, Menlo, monospace;
}

.calc-table th,
.calc-table td {
    padding: 4px 10px;
    text-align: right;
    border-bottom: 1px solid #232323;
}

.calc-table th {
    position: sticky;
    top: 0;
    background: #1c1c1c;
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
}

.calc-table td { color: #d0d0d0; }
.calc-table td.calc-bad { color: #ff7a7a; }
.calc-table tr:hover td { background: #1f1f1f; }

.toast {
    position: fixed;
    top: 56px;
    left: 50%;
    transform: translateX(-50%);
    background: #2e4d77;
    color: #fff;
    padding: 8px 18px;
    border-radius: 18px;
    font: 500 13px -apple-system, "Segoe UI", sans-serif;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease-out, transform 0.18s ease-out;
    z-index: 1000;
}

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

.builder-status {
    grid-area: status;
    background: #161616;
    border-top: 1px solid #2a2a2a;
    display: flex;
    align-items: center;
    padding: 0 12px;
    font: 500 11px Menlo, monospace;
    color: #888;
}

.builder-status .err {
    color: #ff7a7a;
}

.builder-status .status-issue-link {
    color: inherit;
    text-decoration: underline dotted;
    cursor: pointer;
}

.builder-status .status-issue-link:hover {
    color: #ffaaaa;
    text-decoration: underline;
}