:root {
    --bg: #0b0d12;
    --text: #e8eef7;
    --subtle: #a7b3c7;
    --accent: #7aa2ff;

    --radius-2xl: 32px;
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.35);
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    color: var(--text);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    overflow: hidden; /* WHY: avoid scrollbars by design requirement */
    -webkit-tap-highlight-color: transparent;
}

body {
    background:
        radial-gradient(1200px 800px at 70% 10%, #172034 0%, var(--bg) 45%)
        fixed;
}

/* App frame */
#app {
    min-height: 100svh; /* WHY: handle mobile dynamic viewport */
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: clamp(8px, 1.5vw, 16px);
    padding: clamp(12px, 2vw, 24px);
}

/* ---------------- Main content ---------------- */
.main {
    display: grid;
    grid-template-rows: auto;
    align-items: center;
    justify-items: center;
    gap: clamp(8px, 2vw, 24px);
}

/* Now Playing */
.now-playing {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(1100px, 95vw);
    height: clamp(120px, 18vh, 200px);
    padding: clamp(14px, 2.5vw, 28px);
    border-radius: var(--radius-2xl);
    text-align: center;
    user-select: none;
    background:
        radial-gradient(120% 120% at -10% -10%, rgba(122, 162, 255, 0.18) 0%, rgba(122, 162, 255, 0.06) 35%, transparent 55%),
        linear-gradient(180deg, rgba(20, 26, 34, 0.9), rgba(16, 20, 27, 0.92));
    border: 1px solid #202938;
    box-shadow: var(--shadow-lg);
}

.now-playing #transportState {
    margin: 0 0.1rem;
    font-size: clamp(1rem, 3vw, 1.6rem);
    font-weight: 700;
    letter-spacing: 0.2px;
}

.now-playing #now-playing-title {
    margin: 0 0.1rem;
    font-size: clamp(1.2rem, 3.8vw, 2.2rem);
    font-weight: 700;
    letter-spacing: 0.2px;
}

.now-playing #now-playing-album {
    margin-top: 8px;
    font-size: clamp(0.8rem, 2.2vw, 1rem);
    color: var(--subtle);
}

/* Artwork box */
.artwork-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    padding: 10px;
    border-radius: 16px;
    text-align: center;
    user-select: none;
    background:
        radial-gradient(120% 120% at -10% -10%, rgba(122, 162, 255, 0.18) 0%, rgba(122, 162, 255, 0.06) 35%, transparent 55%),
        linear-gradient(180deg, rgba(20, 26, 34, 0.9), rgba(16, 20, 27, 0.92));
    border: 1px solid #202938;
    box-shadow: var(--shadow-lg);
}

/* Volume Card (front and center) */
.volume-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "mute display"
        "slider slider";
    align-items: center;
    gap: clamp(14px, 2.2vw, 28px);
    width: min(1100px, 95vw);
    padding: clamp(18px, 3.5vw, 40px);
    border-radius: var(--radius-2xl);
    background:
        radial-gradient(130% 130% at 110% -30%, rgba(122, 162, 255, 0.16) 0%, rgba(122, 162, 255, 0.05) 36%, transparent 54%),
        linear-gradient(180deg, rgba(18, 24, 32, 0.98), rgba(13, 18, 25, 0.98));
    border: 1px solid #202938;
    box-shadow: var(--shadow-lg);
}

/* Mute button made LARGE for touch */
.mute {
    display: inline-flex;
    grid-area: mute;
    align-items: center;
    justify-content: center;
    width: clamp(64px, 10vw, 92px);
    height: clamp(64px, 10vw, 92px);
    border-radius: 22px;
    background: linear-gradient(180deg, #101722, #0b111a);
    border: 1px solid #243249;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 8px 18px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    font-size: clamp(2rem, 6.5vw, 3rem);
    color: var(--text);
}

.mute:active {
    transform: translateY(1px);
}

/* Big numeric volume readout */
.volume-display {
    display: flex;
    grid-area: display;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 180px;
}

.volume-number {
    font-size: clamp(2rem, 9vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
}

.volume-caption {
    font-size: clamp(0.9rem, 2.2vw, 1.05rem);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--subtle);
}

/* Mega slider */
#volume {
    grid-area: slider;
    width: 100%;
    height: clamp(36px, 6vh, 52px); /* WHY: thick track = easy thumb */
    appearance: none;
    background: transparent;
}

#volume:focus {
    outline: none;
}

/* Track (WebKit) */
#volume::-webkit-slider-runnable-track {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(180deg, #0f1622, #0c121a);
    border: 1px solid #202938;
    box-shadow: inset 0 0 0 2px rgba(122, 162, 255, 0.08);
}

/* Thumb (WebKit) */
#volume::-webkit-slider-thumb {
    appearance: none;
    width: clamp(42px, 7vh, 56px);
    height: clamp(42px, 7vh, 56px);
    margin-top: calc(-0.5 * (clamp(42px, 7vh, 56px) - clamp(36px, 6vh, 52px)));
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #cfe0ff 0%, #9db7ff 38%, #7aa2ff 60%, #3a64b7 100%);
    border: 0;
    box-shadow:
        0 10px 25px rgba(122, 162, 255, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    cursor: pointer;
}

/* Firefox track */
#volume::-moz-range-track {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(180deg, #0f1622, #0c121a);
    border: 1px solid #202938;
    box-shadow: inset 0 0 0 2px rgba(122, 162, 255, 0.08);
}

/* Firefox thumb */
#volume::-moz-range-thumb {
    width: clamp(42px, 7vh, 56px);
    height: clamp(42px, 7vh, 56px);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #cfe0ff 0%, #9db7ff 38%, #7aa2ff 60%, #3a64b7 100%);
    border: none;
    box-shadow:
        0 10px 25px rgba(122, 162, 255, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    cursor: pointer;
}

/* ----------- Gate / Autoplay overlay ----------- */
#enableAudio {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 50;
    border: 0;
    font-size: clamp(1rem, 2.8vw, 1.2rem);
    color: var(--text);
    background:
        radial-gradient(100% 100% at 50% 0%, rgba(122, 162, 255, 0.08) 0%, rgba(122, 162, 255, 0.04) 30%, transparent 55%),
        linear-gradient(180deg, #0b0f16, #070a0f);
}

.gate-inner {
    width: min(680px, 90vw);
    padding: 28px;
    border-radius: var(--radius-2xl);
    text-align: center;
    background: linear-gradient(180deg, #121825, #0e1420);
    border: 1px solid #202938;
    box-shadow: var(--shadow-lg);
}

.gate-sub {
    margin: 0 0 24px 0;
    color: var(--subtle);
}

.gate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 22px;
    font-size: 1.1rem;
    border-radius: 16px;
    border: 1px solid #243249;
    background: linear-gradient(180deg, #172238, #0f1725);
    color: var(--text);
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

.gate-btn:active {
    transform: translateY(1px);
}

/* Pills */
#header {
    width: fit-content;
    margin: 0 auto;
}

.pill {
    display: inline-flex;
    align-items: center;
    margin: 0.25em;
    overflow: hidden;
    font-size: 0.9em;
    border-radius: 9999px;
    background: #eef0f3;
    box-shadow: inset 0 0 0 1px #d5d9e0;
}

.pill__label {
    padding: 0.25rem 0.5rem;
    color: #1f2937;
    opacity: 0.85;
}

.pill__value {
    padding: 0.25rem 0.5rem;
    font-weight: 700;
    color: #fff;
    background: var(--accent, #6366f1);
}