:root {
    --paper: #f0eae0;
    --paper-dim: rgba(240, 234, 224, 0.76);
    --gold: #d1b06a;
    --copper: #c6743f;
    --panel: rgba(20, 10, 8, 0.72);
    --panel-soft: rgba(30, 15, 12, 0.58);
    --line: rgba(240, 234, 224, 0.12);
}

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

html,
body {
    width: 100%;
    height: 100%;
}

body {
    font-family: "Alegreya Sans", sans-serif;
    color: var(--paper);
    background:
        radial-gradient(circle at top left, rgba(106, 176, 209, 0.14), transparent 28%),
        radial-gradient(circle at 80% 10%, rgba(140, 47, 36, 0.14), transparent 34%),
        linear-gradient(160deg, #0a0c12 0%, #0d0b19 38%, #060308 100%);
    overflow: hidden;
}

.grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.15;
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 3px),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0, rgba(0, 0, 0, 0.08) 1px, transparent 1px, transparent 4px);
    mix-blend-mode: soft-light;
}

.container {
    position: relative;
    width: 100%;
    height: 100vh;
}

.game-container {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 24%, rgba(106, 140, 209, 0.15), transparent 18%),
        linear-gradient(180deg, rgba(6, 4, 10, 0.2), rgba(6, 4, 10, 0.8)),
        linear-gradient(90deg, #150f2b, #0a0710 18%, #0a0710 82%, #150f2b);
}

.game-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(6, 4, 10, 0.6), transparent 22%, transparent 64%, rgba(6, 4, 10, 0.78)),
        radial-gradient(circle at center, transparent 40%, rgba(0, 0, 0, 0.34) 100%);
    pointer-events: none;
    z-index: 1;
}

#video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
    filter: saturate(0.9) brightness(0.88) contrast(1.04);
}

.tracking-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
    z-index: 4;
    pointer-events: none;
}

.status-bar {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    max-width: min(560px, calc(100vw - 48px));
    padding: 10px 18px;
    border-radius: 14px;
    background: var(--panel);
    border: 1px solid var(--line);
    backdrop-filter: blur(10px);
    color: var(--paper);
    font-size: 0.92rem;
    text-align: center;
    pointer-events: none;
}

.status-bar p {
    margin: 0;
    line-height: 1.4;
}

.hit-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.rail-dock {
    position: absolute;
    z-index: 10;
}

select {
    font: inherit;
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(8, 4, 12, 0.85);
    color: var(--paper);
}

.boot-button {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 12;
    transform: translate(-50%, -50%);
    border: 0;
    border-radius: 999px;
    padding: 15px 28px;
    background: linear-gradient(135deg, #77b8f1, #3c7ecf);
    color: #0b0f1a;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.34);
    transition: transform 180ms ease, opacity 180ms ease;
}

.boot-button:hover:not(:disabled) {
    transform: translate(-50%, -51%);
}

.boot-button:disabled {
    opacity: 0.6;
    cursor: wait;
}

.boot-button.hidden {
    opacity: 0;
    pointer-events: none;
}

.countdown-overlay {
    position: absolute;
    inset: 0;
    z-index: 11;
    display: grid;
    place-items: center;
    font-family: "Bodoni Moda", serif;
    font-size: clamp(5rem, 20vw, 10rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #d7e8ff;
    text-shadow: 0 10px 34px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
}

.countdown-overlay.hidden {
    opacity: 0;
    transform: scale(0.92);
}

.rail-dock {
    bottom: 24px;
    left: auto;
    right: 24px;
    width: min(560px, calc(100vw - 48px));
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 18px;
    background: var(--panel);
    border: 1px solid var(--line);
    backdrop-filter: blur(10px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
    z-index: 11;
}

.rail-controls {
    display: grid;
}

.rail-viewport {
    position: relative;
    overflow: hidden;
    min-height: 200px;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(240, 234, 224, 0.02), rgba(240, 234, 224, 0.04)),
        rgba(240, 234, 224, 0.05);
    box-shadow: inset 0 0 0 1px rgba(240, 234, 224, 0.08);
}

.rail-viewport::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(180deg,
            transparent 0,
            transparent 23px,
            rgba(240, 234, 224, 0.07) 23px,
            rgba(240, 234, 224, 0.07) 24px),
        repeating-linear-gradient(90deg,
            transparent 0,
            transparent 73px,
            rgba(240, 234, 224, 0.045) 73px,
            rgba(240, 234, 224, 0.045) 74px),
        linear-gradient(90deg, rgba(10, 7, 16, 0.8), transparent 14%, transparent 86%, rgba(10, 7, 16, 0.8));
    z-index: 1;
    pointer-events: none;
}

.rail-track {
    position: relative;
    height: 200px;
    z-index: 0;
    transition: transform 70ms linear;
}

.playhead {
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 29%;
    width: 2px;
    background: linear-gradient(180deg, transparent, var(--gold), transparent);
    box-shadow: 0 0 18px rgba(209, 176, 106, 0.35);
    z-index: 3;
}

.note-block {
    position: absolute;
    min-width: 46px;
    height: 42px;
    padding: 8px 10px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(10, 7, 16, 0.72);
    color: rgba(255, 245, 228, 0.92);
    overflow: hidden;
    display: grid;
    align-content: center;
    gap: 2px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
}

.note-block::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 48%);
    pointer-events: none;
}

.note-block::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.22), color-mix(in srgb, var(--note-color) 88%, white 12%));
    transform-origin: left center;
    transform: scaleX(var(--fill, 0));
    opacity: 0.52;
}

.note-block.active {
    border-color: color-mix(in srgb, var(--note-color) 78%, white 22%);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--note-color) 68%, white 10%),
        0 0 24px color-mix(in srgb, var(--note-color) 44%, transparent 56%);
}

.note-block.done {
    opacity: 0.82;
}

.note-block__name,
.note-block__hand {
    position: relative;
    z-index: 1;
}

.note-block__name {
    font-weight: 700;
}

.note-block__hand {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 245, 228, 0.72);
}

@supports not (color: color-mix(in srgb, white 50%, black 50%)) {
    .note-block::after {
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.18), var(--note-color));
    }

    .note-block.active {
        border-color: var(--note-color);
        box-shadow: 0 0 18px rgba(0, 0, 0, 0.2);
    }
}

@media (max-width: 980px) {
    .rail-dock {
        right: 16px;
        bottom: 16px;
        width: min(520px, calc(100vw - 32px));
    }
}

@media (max-width: 720px) {
    .boot-button {
        padding: 13px 24px;
    }

    .rail-viewport {
        min-height: 176px;
    }

    .rail-track {
        height: 176px;
    }

    .playhead {
        left: 24%;
    }

    .rail-dock {
        right: 12px;
        bottom: 12px;
        width: calc(100vw - 24px);
    }
}