:root {
    --paper: #f5ecda;
    --paper-dim: rgba(245, 236, 218, 0.76);
    --gold: #d1b06a;
    --copper: #c6743f;
    --panel: rgba(20, 10, 8, 0.72);
    --panel-soft: rgba(30, 15, 12, 0.58);
    --line: rgba(245, 236, 218, 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(209, 176, 106, 0.14), transparent 28%),
        radial-gradient(circle at 80% 10%, rgba(140, 47, 36, 0.14), transparent 34%),
        linear-gradient(160deg, #120907 0%, #190b09 38%, #090403 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;
}

.ui-cache {
    display: none;
}

.game-container {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 24%, rgba(209, 176, 106, 0.2), transparent 18%),
        linear-gradient(180deg, rgba(8, 4, 3, 0.2), rgba(8, 4, 3, 0.8)),
        linear-gradient(90deg, #2b150f, #100705 18%, #100705 82%, #2b150f);
}

.game-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(8, 4, 3, 0.6), transparent 22%, transparent 64%, rgba(8, 4, 3, 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);
}

#video {
    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;
}

.guide-stage {
    --accent-color: #b34e36;
    --bow-shift: 0px;
    --bow-tilt: -16deg;
    --stop-position: 56%;
    --tracker-left: 58%;
    --tracker-top: 100px;
    --tracker-opacity: 0.18;
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 160ms ease;
}

.guide-stage[data-visible="true"] {
    opacity: 1;
    visibility: visible;
}

.ghost-violin {
    position: absolute;
    top: 0;
    left: 0;
    width: 560px;
    height: 260px;
    transform-origin: 124px 98px;
    filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.24));
    opacity: 0.92;
}

.ghost-body,
.ghost-waist,
.ghost-tailpiece,
.ghost-neck,
.ghost-scroll,
.ghost-string,
.ghost-stop,
.ghost-tracker,
.ghost-bow {
    position: absolute;
}

.ghost-body {
    background: linear-gradient(145deg, rgba(247, 210, 144, 0.76), rgba(190, 108, 54, 0.88));
    border: 1px solid rgba(255, 238, 209, 0.22);
    box-shadow: inset 0 0 24px rgba(255, 244, 220, 0.08);
}

.ghost-body--upper {
    top: 46px;
    left: 170px;
    width: 130px;
    height: 92px;
    border-radius: 48% 44% 50% 42%;
}

.ghost-body--lower {
    top: 26px;
    left: 34px;
    width: 188px;
    height: 140px;
    border-radius: 48% 50% 44% 52%;
}

.ghost-waist {
    top: 64px;
    left: 138px;
    width: 86px;
    height: 58px;
    background: rgba(66, 28, 14, 0.46);
    border-radius: 50%;
    filter: blur(6px);
}

.ghost-tailpiece {
    top: 82px;
    left: 66px;
    width: 58px;
    height: 22px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(36, 16, 10, 0.94), rgba(94, 43, 24, 0.82));
}

.ghost-neck {
    top: 92px;
    left: 266px;
    width: 212px;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(28, 12, 8, 0.96), rgba(78, 38, 20, 0.88));
}

.ghost-scroll {
    top: 78px;
    right: 20px;
    width: 30px;
    height: 40px;
    border-radius: 14px 18px 18px 12px;
    background: linear-gradient(180deg, rgba(233, 191, 119, 0.9), rgba(124, 67, 36, 0.94));
    border: 1px solid rgba(255, 235, 205, 0.22);
}

.ghost-string {
    top: 84px;
    left: 88px;
    width: 384px;
    height: 2px;
    border-radius: 999px;
    background: rgba(250, 240, 219, 0.28);
    box-shadow: 0 0 0 1px rgba(255, 248, 231, 0.03);
}

.ghost-string[data-string="D"] {
    top: 92px;
}

.ghost-string[data-string="A"] {
    top: 100px;
}

.ghost-string[data-string="E"] {
    top: 108px;
}

.guide-stage[data-string="G"] .ghost-string[data-string="G"],
.guide-stage[data-string="D"] .ghost-string[data-string="D"],
.guide-stage[data-string="A"] .ghost-string[data-string="A"],
.guide-stage[data-string="E"] .ghost-string[data-string="E"] {
    background: color-mix(in srgb, var(--accent-color) 76%, white 24%);
    box-shadow: 0 0 18px color-mix(in srgb, var(--accent-color) 42%, transparent 58%);
    height: 3px;
}

.ghost-stop {
    top: 74px;
    left: var(--stop-position);
    width: 3px;
    height: 42px;
    border-radius: 999px;
    background: linear-gradient(180deg, transparent, rgba(255, 245, 224, 0.84), transparent);
    box-shadow: 0 0 18px rgba(255, 240, 214, 0.24);
}

.ghost-tracker {
    top: var(--tracker-top);
    left: var(--tracker-left);
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-color) 76%, white 24%);
    border: 2px solid rgba(255, 247, 232, 0.9);
    box-shadow:
        0 0 0 8px color-mix(in srgb, var(--accent-color) 18%, transparent 82%),
        0 0 22px color-mix(in srgb, var(--accent-color) 48%, transparent 52%);
    opacity: var(--tracker-opacity);
    transition: left 120ms ease, top 120ms ease, opacity 120ms ease;
}

.ghost-bow {
    top: 0;
    left: 0;
    width: 640px;
    height: 12px;
    border-radius: 999px;
    transform-origin: 36px 6px;
    background:
        linear-gradient(180deg, rgba(255, 244, 222, 0.92), rgba(201, 156, 95, 0.88)),
        linear-gradient(90deg, rgba(120, 63, 34, 0.86), rgba(216, 179, 112, 0.74));
    box-shadow: 0 0 22px rgba(0, 0, 0, 0.18);
    opacity: 0.82;
}

.ghost-bow::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 28px;
    right: 28px;
    height: 2px;
    background: rgba(255, 247, 232, 0.84);
    opacity: 0.92;
}

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

select {
    font: inherit;
}

select {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(8, 4, 3, 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, #f1c777, #cf7d3c);
    color: #1a0f0b;
    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: #fff1d7;
    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(245, 236, 218, 0.02), rgba(245, 236, 218, 0.04)),
        rgba(247, 239, 225, 0.05);
    box-shadow: inset 0 0 0 1px rgba(245, 236, 218, 0.08);
}

.rail-viewport::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(180deg,
            transparent 0,
            transparent 23px,
            rgba(245, 236, 218, 0.07) 23px,
            rgba(245, 236, 218, 0.07) 24px),
        repeating-linear-gradient(90deg,
            transparent 0,
            transparent 73px,
            rgba(245, 236, 218, 0.045) 73px,
            rgba(245, 236, 218, 0.045) 74px),
        linear-gradient(90deg, rgba(18, 9, 7, 0.8), transparent 14%, transparent 86%, rgba(18, 9, 7, 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(18, 9, 7, 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__string {
    position: relative;
    z-index: 1;
}

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

.note-block__string {
    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);
    }
}