@font-face { font-family: 'BlurLight'; src: url(../fonts/blurlight.ttf); }

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

html, body {
    background: #0d0d0d;
    color: #c0c0c0;
    font-family: 'BlurLight', monospace;
}

body {
    padding: env(safe-area-inset-top) 28px env(safe-area-inset-bottom);
    overflow-y: auto;
}

.page {
    max-width: 480px;
    margin: 0 auto;
    padding: 48px 0 64px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.top { animation: fadeUp 0.4s ease both; }

.back {
    font-size: 12px;
    color: #c0c0c0;
    text-decoration: none;
    opacity: 0.3;
    letter-spacing: 2px;
    transition: opacity 0.2s;
}
.back:hover { opacity: 0.8; }

.header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    animation: fadeUp 0.4s ease 0.05s both;
}

.title {
    font-size: 20px;
    letter-spacing: 4px;
    opacity: 0.85;
}

.subtitle {
    font-size: 12px;
    opacity: 0.28;
    letter-spacing: 2px;
}

/* ── now playing ─────────────────────────────────────────── */

.now-playing {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: #c0c0c0;
    opacity: 0.8;
    transition: opacity 0.2s;
    animation: fadeUp 0.4s ease 0.08s both;
}
.now-playing:hover { opacity: 1; }

.now-img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    flex-shrink: 0;
    filter: grayscale(20%);
}

.now-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.now-label {
    font-size: 10px;
    opacity: 0.35;
    letter-spacing: 2px;
}

.now-title {
    font-size: 15px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.now-artist {
    font-size: 12px;
    opacity: 0.45;
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.now-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1db954;
    flex-shrink: 0;
    margin-left: auto;
    animation: pulse 2s ease infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.3; }
}

/* ── track list ──────────────────────────────────────────── */

.track-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: fadeUp 0.5s ease 0.1s both;
}

.track-loading {
    font-size: 13px;
    opacity: 0.25;
    letter-spacing: 1px;
}

.track-item {
    display: flex;
    align-items: center;
    gap: 14px;
    animation: fadeUp 0.3s ease both;
    transition: opacity 0.2s;
}
.track-item:hover { opacity: 0.6; }

.track-num {
    font-size: 11px;
    opacity: 0.22;
    letter-spacing: 1px;
    width: 22px;
    text-align: right;
    flex-shrink: 0;
}

.track-img {
    width: 38px;
    height: 38px;
    object-fit: cover;
    flex-shrink: 0;
    filter: grayscale(30%);
    opacity: 0.85;
}

.track-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.track-title {
    font-size: 15px;
    color: #c0c0c0;
    text-decoration: none;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.85;
}

.track-artist {
    font-size: 12px;
    opacity: 0.35;
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}