@font-face {
    font-family: 'VT323';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('/fonts/vt323-latin.woff2') format('woff2');
}

:root {
    --bg: #070a04;
    --panel: #11180a;
    --panel-2: #18220e;
    --line: #2c3d16;
    --text: #e6f2d2;
    --muted: #9fb384;
    --lime: #b8f02a;
    --lime-dark: #4a7a00;
    --amber: #ffcc33;
    --pink: #ff4fa8;
    --cyan: #3fd0ff;
    color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
    margin: 0;
    color: var(--text);
    font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background:
        radial-gradient(ellipse at 50% -10%, rgba(140, 220, 40, 0.18), transparent 60%),
        repeating-linear-gradient(0deg, rgba(120, 180, 40, 0.05) 0 1px, transparent 1px 24px),
        repeating-linear-gradient(90deg, rgba(120, 180, 40, 0.05) 0 1px, transparent 1px 24px),
        var(--bg);
    min-height: 100vh;
}

a { color: var(--lime); }

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    font-family: 'VT323', monospace;
    font-size: 22px;
    border-bottom: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.5);
}
.topbar .home { text-decoration: none; }
.topbar .tag { color: var(--muted); }
@media (max-width: 560px) { .topbar .tag { display: none; } }

.disclaimer {
    max-width: 980px;
    margin: 14px auto 0;
    padding: 12px 16px;
    border: 2px solid var(--amber);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255, 204, 51, 0.14), rgba(255, 204, 51, 0.06));
    color: #fff3cf;
    font-size: 14px;
}
.disclaimer strong:first-child { color: var(--amber); display: block; font-size: 15px; margin-bottom: 2px; }

main { padding: 0 16px 32px; }
main > section:not(.cabinet-wrap), main > aside { max-width: 948px; margin-left: auto; margin-right: auto; }

/* ---- cabinet: sized by ui.js to fit the window (4:3 up to 16:9) */

.cabinet-wrap {
    margin: 18px auto 0;
    max-width: 1600px;
    padding: 0 0 14px;
    border-radius: 14px;
    background: linear-gradient(180deg, #1c1c22, #0c0c10);
    border: 1px solid #333;
    box-shadow: 0 0 0 4px #0a0a0d, 0 18px 50px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.marquee {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 10px 14px;
    border-radius: 13px 13px 0 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 45%),
        linear-gradient(90deg, #1e5c00, #7ccf00 30%, #d8ff40 50%, #7ccf00 70%, #1e5c00);
    border-bottom: 3px solid #0a1a00;
    color: #062000;
    font-weight: 900;
    font-style: italic;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.m-arrows { font-style: normal; letter-spacing: 0.1em; color: #b0002a; text-shadow: none; }
.m-title { font-size: clamp(14px, 2.6vw, 22px); }
.m-title b { color: #fff; text-shadow: 0 0 2px #063, 0 2px 0 #063; }
.m-sub {
    font-size: 12px;
    font-style: normal;
    padding: 2px 6px;
    border: 2px solid #062000;
    border-radius: 3px;
    background: #fff;
}

.play-area {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 14px 0;
    --key: 64px;
    --a: 0.3;
}

.cabinet {
    position: relative;
    width: 640px;
    max-width: 100%;
    height: 480px;
    background: #000;
    border-radius: 6px;
    box-shadow: 0 0 0 3px #000, 0 0 0 6px #2a2a30, 0 0 28px rgba(120, 220, 40, 0.18);
    outline: none;
    cursor: pointer;
}
.cabinet:focus-visible { box-shadow: 0 0 0 3px #000, 0 0 0 6px var(--lime), 0 0 28px rgba(120, 220, 40, 0.35); }
.cabinet canvas { display: block; width: 100%; height: 100%; border-radius: 6px; touch-action: manipulation; }

/* Full-screen play: the real Fullscreen API where it exists, otherwise (iPhone)
   a fixed layer over the page. */
.play-area.playing {
    position: fixed;
    inset: 0;
    z-index: 1000;
    padding: 0;
    justify-content: center;
    background: #000;
}
.play-area.playing .cabinet,
.play-area.playing .cabinet canvas { border-radius: 0; box-shadow: none; max-width: none; }
html.ddr-playing, html.ddr-playing body { overflow: hidden; }

.play-exit {
    display: none;
    position: absolute;
    z-index: 6;
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    width: 38px;
    height: 38px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    cursor: pointer;
}
.play-area.playing .play-exit { display: block; }

/* ---- touch pads (which one shows is play-area[data-touch]) */

.touch-overlay, .touch-below { display: none; }
.play-area[data-touch="keys"] .touch-keys,
.play-area[data-touch="split"] .touch-split { display: block; }
.play-area[data-touch="below"] .touch-below { display: flex; }

/* See-through overlays sit along the bottom of the play area. */
.touch-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0;
    z-index: 5;
    pointer-events: none;
}
.touch-overlay button, .touchpad button {
    pointer-events: auto;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
.tk-key, .tk-small {
    padding: 0;
    color: rgba(255, 255, 255, calc(var(--a) + 0.45));
    background: rgba(255, 255, 255, calc(var(--a) * 0.55));
    border: 2px solid rgba(255, 255, 255, calc(var(--a) + 0.2));
    box-shadow: inset 0 calc(var(--key) * -0.07) 0 rgba(0, 0, 0, calc(var(--a) * 0.9));
    font-family: system-ui, sans-serif;
    cursor: pointer;
}
.tk-key {
    width: var(--key);
    height: var(--key);
    border-radius: 16%;
    font-size: calc(var(--key) * 0.38);
}
.tk-small {
    height: clamp(30px, calc(var(--key) * 0.42), 48px);
    min-width: clamp(56px, calc(var(--key) * 0.85), 96px);
    border-radius: 24px;
    font-size: clamp(11px, calc(var(--key) * 0.16), 16px);
    font-weight: 800;
    letter-spacing: 0.04em;
}
.tk-start { background: rgba(255, 160, 40, calc(var(--a) * 0.8)); }
.tk-key.down, .tk-small.down {
    background: rgba(255, 255, 255, calc(var(--a) + 0.35));
    color: #fff;
    box-shadow: none;
    transform: translateY(2px);
}

/* Inverted T, like a keyboard's arrow keys, centred along the bottom. The
   cluster is one touch surface (see input.bindTouchZone). */
.tk-arrows {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--key) * 0.2 + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, var(--key));
    grid-template-rows: repeat(2, var(--key));
    gap: calc(var(--key) * 0.06);
    pointer-events: auto;
    touch-action: none;
}
.tk-up { grid-column: 2; grid-row: 1; }
.tk-left { grid-column: 1; grid-row: 2; }
.tk-down { grid-column: 2; grid-row: 2; }
.tk-right { grid-column: 3; grid-row: 2; }
.tk-meta {
    position: absolute;
    left: calc(var(--key) * 0.3 + env(safe-area-inset-left));
    bottom: calc(var(--key) * 0.3 + env(safe-area-inset-bottom));
    display: flex;
    gap: calc(var(--key) * 0.12);
}

/* Two thumbs: left/down on the left, up/right on the right. */
.ts-left, .ts-right {
    position: absolute;
    bottom: calc(var(--key) * 0.25 + env(safe-area-inset-bottom));
    display: flex;
    gap: calc(var(--key) * 0.08);
    pointer-events: auto;
    touch-action: none;
}
.ts-left { left: calc(var(--key) * 0.3 + env(safe-area-inset-left)); }
.ts-right { right: calc(var(--key) * 0.3 + env(safe-area-inset-right)); }
.ts-meta { left: 50%; transform: translateX(-50%); }

/* When there isn't room beside the arrows (an upright phone), the menu
   buttons sit above them instead. ui.js sets .stack. */
.play-area.stack .touch-keys .tk-meta {
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--key) * 2.61 + env(safe-area-inset-bottom));
}
.play-area.stack .touch-split .ts-meta { bottom: calc(var(--key) * 1.5 + env(safe-area-inset-bottom)); }
/* Phones only need the overlay in full screen (a coin switches to it). */
.play-area.phone:not(.playing) .touch-overlay { display: none; }
/* During a song they fade back so they don't distract (still tappable). */
.play-area[data-scene="song"] .tk-meta { opacity: 0.3; transition: opacity 0.3s; }
.tk-meta { transition: opacity 0.3s; }

/* Solid buttons in a row under the screen. */
.touchpad {
    justify-content: center;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    margin: 12px auto 0;
    padding: 0 14px max(0px, env(safe-area-inset-bottom));
}
.play-area.playing .touchpad { margin: 8px auto 8px; }
.touchpad button {
    flex: 1 1 0;
    max-width: 130px;
    min-height: max(64px, calc(var(--key) * 0.8));
    font-size: 28px;
    color: #fff;
    border: 3px solid #000;
    border-radius: 10px;
    background: linear-gradient(180deg, #ff5a6a, #b00020);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 3px 0 #000;
}
.touchpad button[data-pad="down"], .touchpad button[data-pad="up"] { background: linear-gradient(180deg, #5a8aff, #0030b0); }
.touchpad button.tp-small { flex: 0 1 64px; font-size: 12px; font-weight: 800; background: linear-gradient(180deg, #555, #222); }
.touchpad button.tp-start { background: linear-gradient(180deg, #ff9a2a, #b05000); }
.touchpad button.down { filter: brightness(1.6); transform: translateY(2px); }

/* ---- toolbar + settings */

.toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 14px 0;
}
.toolbar > button, .settings > summary, .dl, dialog button {
    font: inherit;
    font-size: 14px;
    color: var(--text);
    background: linear-gradient(180deg, #2a3a16, #17220b);
    border: 1px solid #4a6a20;
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
}
.toolbar > button:hover, .settings > summary:hover, .dl:hover, dialog button:hover { border-color: var(--lime); }
.toolbar > button[aria-pressed="true"] { border-color: var(--lime); color: var(--lime); }
.touch-pick {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    padding: 3px 4px 3px 10px;
    background: linear-gradient(180deg, #2a3a16, #17220b);
    border: 1px solid #4a6a20;
    border-radius: 6px;
}
.touch-pick select, .settings-grid select {
    font: inherit;
    font-size: 13px;
    color: var(--text);
    background: #0c1206;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 3px 4px;
}

.settings { position: relative; }
.settings > summary { list-style: none; }
.settings > summary::-webkit-details-marker { display: none; }
.settings[open] > summary { border-color: var(--lime); }
.settings-grid {
    position: absolute;
    z-index: 5;
    right: 0;
    margin-top: 6px;
    width: min(340px, calc(100vw - 32px));
    display: grid;
    gap: 10px;
    padding: 14px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}
.settings-grid label { display: grid; gap: 4px; font-size: 14px; }
.settings-grid label.check { display: flex; align-items: center; gap: 8px; }
.settings-grid small { color: var(--muted); }
.settings-grid input[type="range"] { width: 100%; accent-color: var(--lime); }
.settings-grid input[type="checkbox"] { accent-color: var(--lime); width: 16px; height: 16px; }
.scores-row { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.scores-row span { flex: 1; }
.scores-row output { color: var(--muted); }
.scores-row button, .offset button {
    font: inherit;
    font-size: 13px;
    color: var(--text);
    background: linear-gradient(180deg, #2a3a16, #17220b);
    border: 1px solid #4a6a20;
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
}
.offset { display: flex; align-items: center; gap: 8px; }
.offset button { width: 32px; padding: 4px 0; }
.offset output { min-width: 64px; text-align: center; font-family: 'VT323', monospace; font-size: 20px; color: var(--lime); }

/* ---- how to play */

h2 {
    font-family: 'VT323', monospace;
    font-weight: 400;
    font-size: 30px;
    color: var(--lime);
    margin: 28px 0 10px;
    letter-spacing: 0.02em;
}
h3 { margin: 0 0 6px; font-size: 15px; color: var(--amber); }
.howto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.howto-grid > div { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.howto-grid ul { margin: 0; padding-left: 18px; }
.howto-grid p { margin: 0; color: #cfdcbc; }
kbd {
    display: inline-block;
    min-width: 22px;
    padding: 0 5px;
    margin: 0 1px;
    font: 13px/20px ui-monospace, monospace;
    text-align: center;
    color: #fff;
    background: #2a2a2a;
    border: 1px solid #555;
    border-bottom-width: 3px;
    border-radius: 4px;
}

/* ---- did you know */

.didyouknow {
    margin-top: 22px;
    padding: 4px 16px 12px;
    background: linear-gradient(135deg, rgba(255, 79, 168, 0.12), rgba(63, 208, 255, 0.08));
    border: 1px solid #5a2a4a;
    border-left: 4px solid var(--pink);
    border-radius: 8px;
}
.didyouknow h2 { color: var(--pink); margin: 10px 0 4px; }
.didyouknow p { margin: 0; color: #e8dcef; }

/* ---- library */

.lib-head p { margin: 0 0 8px; color: #cfdcbc; }
.lib-note { color: var(--amber) !important; font-size: 13px; }
.lib-legend { color: var(--muted) !important; font-size: 13px; }
#lib-search {
    width: 100%;
    margin: 6px 0 14px;
    padding: 10px 12px;
    font: inherit;
    color: var(--text);
    background: #0c1206;
    border: 1px solid var(--line);
    border-radius: 6px;
}
#lib-search:focus { outline: 2px solid var(--lime); outline-offset: 1px; }

.group {
    margin-bottom: 8px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}
.group > summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    list-style: none;
    background: linear-gradient(90deg, #22340c, #121b08);
}
.group > summary::-webkit-details-marker { display: none; }
.group > summary::before { content: '\25B6'; color: var(--lime); font-size: 12px; transition: transform 0.15s; }
.group[open] > summary::before { transform: rotate(90deg); }
.group > summary img { width: 144px; height: 24px; image-rendering: auto; background: #000; border-radius: 3px; }
.g-name { font-weight: 700; }
.g-count { color: var(--muted); font-size: 13px; }
.dl-pack { margin-left: auto; }

.songs { list-style: none; margin: 0; padding: 0; }
.songs li {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.songs li:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
.songs .banner { width: 128px; height: 40px; object-fit: cover; background: #000; border-radius: 3px; }
.songs .meta { display: grid; min-width: 0; }
.songs .title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.songs .artist { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.songs .bpm { font-family: 'VT323', monospace; font-size: 18px; color: var(--cyan); white-space: nowrap; }
.levels { display: flex; gap: 3px; }
.lv {
    width: 24px;
    height: 22px;
    display: grid;
    place-items: center;
    font: 700 12px/1 system-ui, sans-serif;
    color: #000;
    border-radius: 4px;
}
.lv.none { background: #222 !important; color: #555; }
.lv.scored { outline: 2px solid #fff; outline-offset: 1px; }
.lv.fc { outline-color: #ffd400; }
.lv-beginner { background: #5ad0ff; }
.lv-easy { background: #ffd23a; }
.lv-medium { background: #ff4a6a; }
.lv-hard { background: #5aff5a; }
.lv-challenge { background: #c070ff; }
.actions { display: flex; gap: 6px; }
.dl { display: inline-block; font-size: 13px; padding: 4px 9px; text-decoration: none; white-space: nowrap; }
.dl:disabled { opacity: 0.7; cursor: progress; }

@media (max-width: 720px) {
    .songs li { grid-template-columns: 96px minmax(0, 1fr); gap: 6px 10px; }
    .songs .banner { width: 96px; height: 30px; grid-row: span 2; }
    .songs .bpm, .levels { grid-column: 2; }
    .songs .bpm { display: none; }
    .actions { grid-column: 1 / -1; justify-content: flex-end; }
    .dl-pack { margin-left: 0; }
}

/* ---- controls dialog */

dialog {
    width: min(560px, calc(100vw - 32px));
    color: var(--text);
    background: var(--panel);
    border: 1px solid var(--lime-dark);
    border-radius: 10px;
    padding: 18px;
}
dialog::backdrop { background: rgba(0, 0, 0, 0.7); }
dialog h2 { margin-top: 0; }
#controls-table { width: 100%; border-collapse: collapse; margin: 10px 0; }
#controls-table th { text-align: left; padding: 6px 8px 6px 0; width: 80px; color: var(--amber); font-weight: 700; }
#controls-table td { padding: 4px 0; }
#controls-table th.player-head { padding-top: 12px; font-size: 15px; width: auto; }
#controls-table th.player-head.p1 { color: #ff7070; }
#controls-table th.player-head.p2 { color: #70a0ff; }
.chip {
    display: inline-block;
    margin: 2px 4px 2px 0;
    padding: 2px 8px;
    font-size: 13px;
    color: var(--text);
    background: #263812;
    border: 1px solid #4a6a20;
    border-radius: 12px;
    cursor: pointer;
}
.chip:hover { border-color: #f66; text-decoration: line-through; }
.chip.add { background: transparent; border-style: dashed; }
.chip.add:hover { border-color: var(--lime); text-decoration: none; }
.capture-msg { color: var(--amber); }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* ---- footer */

.credits {
    max-width: 980px;
    margin: 0 auto;
    padding: 18px 16px 40px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 13px;
}
.credits strong { color: var(--amber); }