@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap");

:root {
    --bg: #05040b;
    --panel: #11142b;
    --panel-2: #0b1024;
    --text: #f0f1ff;
    --muted: #9aa4d6;
    --accent: #4fe3ff;
    --accent-2: #ff6ad5;
    --success: #7dffb1;
    --border: #1e234a;
    --shadow: 0 6px 0 rgba(6, 8, 20, 0.8), 0 20px 40px rgba(0, 0, 0, 0.55);
}

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

body {
    font-family: "VT323", monospace;
    font-size: 20px;
    color: var(--text);
    background-color: var(--bg);
    background-image:
        linear-gradient(135deg, rgba(255, 255, 255, 0.06) 25%, transparent 25%),
        linear-gradient(225deg, rgba(255, 255, 255, 0.06) 25%, transparent 25%),
        linear-gradient(45deg, rgba(0, 0, 0, 0.2) 25%, transparent 25%),
        linear-gradient(315deg, rgba(0, 0, 0, 0.2) 25%, transparent 25%);
    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
    background-size: 8px 8px;
    min-height: 100vh;
    line-height: 1.6;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.08) 0px,
        rgba(255, 255, 255, 0.08) 1px,
        rgba(0, 0, 0, 0.25) 2px,
        rgba(0, 0, 0, 0.25) 3px
    );
    opacity: 0.25;
    pointer-events: none;
    z-index: 0;
}

.machine {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
    position: relative;
    z-index: 1;
}

.hero {
    display: grid;
    gap: 0.8rem;
    margin-bottom: 1.6rem;
}

.back {
    text-decoration: none;
    color: var(--accent);
    font-family: "Press Start 2P", monospace;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

h1 {
    font-family: "Press Start 2P", monospace;
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.subtitle {
    font-family: "Press Start 2P", monospace;
    color: var(--accent);
    font-size: clamp(0.8rem, 2vw, 1.1rem);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.lead {
    max-width: 720px;
    color: var(--muted);
}

.controls {
    background: linear-gradient(145deg, #0c0f22, #15193a);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 1.2rem 1.6rem;
    box-shadow: 0 0 0 2px #0b0f22 inset, var(--shadow);
    display: grid;
    gap: 0.8rem;
    margin-bottom: 1.6rem;
}

.control-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

button {
    font: inherit;
    border: 2px solid rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    background: #161b35;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.7rem;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.65);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

button.primary {
    background: linear-gradient(180deg, #9cf6ff 0%, #2b8bff 100%);
    color: #050509;
    border-color: #d5fbff;
    font-weight: 700;
}

button.ghost {
    background: #0f1226;
    border: 2px solid #3b3f6f;
}

button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.7);
}

.tempo {
    display: grid;
    gap: 0.4rem;
    min-width: 220px;
}

.banks {
    align-items: center;
}

.banks-label {
    font-family: "Press Start 2P", monospace;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.bank-buttons {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.bank-button {
    font: inherit;
    border: 2px solid #3b3f6f;
    background: #0f1226;
    color: var(--text);
    padding: 0.5rem 0.9rem;
    border-radius: 6px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.6);
    transition: transform 0.2s ease, border 0.2s ease, box-shadow 0.2s ease;
}

.bank-button.is-active {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 10px rgba(79, 227, 255, 0.5);
}

.bank-button:hover {
    transform: translateY(-1px);
}

.bank-hint {
    color: var(--muted);
    font-size: 0.9rem;
}

.tempo label {
    font-family: "Press Start 2P", monospace;
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.tempo input {
    width: 100%;
    accent-color: var(--accent);
}

.status {
    color: var(--muted);
    font-size: 0.95rem;
}

.grid {
    background: var(--panel);
    border-radius: 14px;
    border: 2px solid var(--border);
    padding: 1.2rem;
    display: grid;
    gap: 1rem;
    box-shadow: 0 0 0 2px #0b0f22 inset, var(--shadow);
}

.track-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 0.8rem;
    align-items: center;
}

.track-label {
    font-family: "Press Start 2P", monospace;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.steps {
    display: grid;
    grid-template-columns: repeat(16, minmax(0, 1fr));
    gap: 0.4rem;
}

.step {
    border: 2px solid #2b2f5f;
    background: #050509;
    border-radius: 6px;
    min-height: 34px;
    position: relative;
    box-shadow: inset 0 0 0 2px #0a0a14;
    transition: transform 0.15s ease, border 0.2s ease, background 0.2s ease;
}

.step.beat {
    background: #070812;
    border-color: #2c3055;
}

.step.beat.on {
    box-shadow: 0 0 10px rgba(91, 156, 255, 0.7);
}

.step.on {
    background: #2331ff;
    border-color: #7b9bff;
    box-shadow: 0 0 8px rgba(91, 156, 255, 0.6);
}

.step.on[data-track="1"] {
    background: #ff4fa8;
    border-color: #ff88c6;
}

.step.on[data-track="2"] {
    background: #3cff9c;
    border-color: #9affcf;
}

.step.on[data-track="3"] {
    background: #42d6ff;
    border-color: #86e9ff;
}

.step.on[data-track="4"] {
    background: #ffd166;
    border-color: #ffe8a8;
}

.step.on[data-track="5"] {
    background: #ff9f3f;
    border-color: #ffd2a1;
}

.step.active::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 2px solid var(--accent);
    border-radius: 8px;
    opacity: 0.8;
    pointer-events: none;
}

.tips {
    margin-top: 1.6rem;
    background: var(--panel-2);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 1.2rem 1.6rem;
    box-shadow: 0 0 0 2px #0b0f22 inset, var(--shadow);
}

.tips-title {
    font-family: "Press Start 2P", monospace;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--success);
    margin-bottom: 0.6rem;
}

.tips ul {
    color: var(--muted);
    display: grid;
    gap: 0.4rem;
    padding-left: 1.2rem;
}

@media (max-width: 900px) {
    .track-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .steps {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
}