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

:root {
    --bg: #07060a;
    --text: #a8a4b8;
    --text-dim: #48465a;
    --accent: #7888aa;
    --good: #5a9868;
    --bad: #985a5a;
}

html, body {
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
}

#sky {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    image-rendering: pixelated;
    touch-action: none;
}

#loading {
    position: fixed;
    inset: 0;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    transition: opacity 0.8s ease-out;
}
#loading.hidden { opacity: 0; pointer-events: none; }
.spinner {
    width: 16px; height: 16px;
    border: 2px solid #1a1a22;
    border-top-color: var(--accent);
    border-radius: 2px;
    animation: spin 1.2s steps(8) infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

#app {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 24px 20px 20px;
    pointer-events: none;
}

.spacer { flex: 1; }

.controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin-bottom: 16px;
}

.btn {
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.1s;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto;
    opacity: 0.5;
}
.btn:hover { opacity: 0.8; }
.btn:active { opacity: 1; transform: scale(0.92); }

.btn-seek {
    width: 68px; height: 68px;
    color: var(--text-dim);
}

.btn-play {
    width: 68px; height: 68px;
    color: var(--accent);
}

.rating {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
}

.btn-rate {
    width: 76px; height: 76px;
}

.btn-bad { color: var(--text-dim); }
.btn-good { color: var(--text-dim); }

.flash-good { color: var(--good) !important; opacity: 1 !important; }
.flash-bad { color: var(--bad) !important; opacity: 1 !important; }

.btn-rate.rated-good { color: var(--good); opacity: 0.85; }
.btn-rate.rated-bad { color: var(--bad); opacity: 0.85; }
.btn-rate.locked { opacity: 0.3; cursor: default; }

@media (max-width: 480px) {
    .controls { gap: 20px; }
    .btn-play { width: 56px; height: 56px; }
    .btn-seek { width: 56px; height: 56px; }
    .btn-rate { width: 64px; height: 64px; }
}