@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+KR:wght@400;500;600&display=swap');
@font-face {
    font-family: 'Mona10';
    src: url('/font/Mona10.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Mona10-Bold';
    src: url('/font/Mona10-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.rainy-room-player {
    --chrome: #dff3ff;
    --chrome-hi: #f8fdff;
    --chrome-low: #a9cef0;
    --panel: #effaff;
    --screen: #b9ddf6;
    --screen-2: #d9f3ff;
    --ink: #183b70;
    --muted: #527ca5;
    --key: #2d5a96;
    --accent: #73d8cb;
    --accent-2: #c6f06d;
    --shadow: rgba(15, 57, 111, .32);
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9999;
    display: flex;
    align-items: stretch;
    gap: 8px;
    color: var(--ink);
    font-family: 'Mona10', 'Noto Sans KR', sans-serif;
    font-size: 10px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease;
}
.rainy-room-player.time-sunset {
    --chrome: #ffe2eb; --chrome-hi: #fff9fb; --chrome-low: #d8b1e9; --panel: #fff2f5;
    --screen: #dcc8f5; --screen-2: #ffd6dd; --ink: #52376f; --muted: #8c6092; --key: #6c4d9d;
    --accent: #ff87a9; --accent-2: #ffe174; --shadow: rgba(92, 47, 111, .3);
}
.rainy-room-player.time-night {
    --chrome: #7d98e9; --chrome-hi: #bccbff; --chrome-low: #5063bb; --panel: #8ea7ed;
    --screen: #526bc4; --screen-2: #7894e7; --ink: #18265f; --muted: #314887; --key: #14255f;
    --accent: #c686f4; --accent-2: #77f0d2; --shadow: rgba(8, 15, 65, .55);
}
.rainy-room-player.show { opacity: 1; transform: translateY(0); }
.rainy-room-player *, .rainy-room-player *::before, .rainy-room-player *::after { box-sizing: border-box; }
.rainy-room-player button, .rainy-room-player input { font: inherit; }
.rainy-room-player button { color: inherit; }

.window {
    overflow: hidden;
    flex: 0 0 auto;
    width: min(304px, calc(100vw - 30px));
    border: 1px solid var(--key);
    border-radius: 10px;
    background: color-mix(in srgb, var(--chrome) 88%, transparent);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 14px 34px var(--shadow), inset 0 0 0 1px var(--chrome-hi);
}
.titlebar {
    display: flex;
    align-items: center;
    height: 25px;
    padding-left: 7px;
    border-bottom: 1px solid var(--key);
    background: linear-gradient(180deg, var(--chrome-hi) 0%, var(--chrome) 50%, var(--chrome-low) 100%);
    font-size: 9px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .03em;
}
.title-icon { display: grid; place-items: center; width: 15px; height: 15px; margin-right: 5px; border: 1px solid var(--key); border-radius: 3px; background: var(--accent); font-size: 7px; }
.title-name { font-weight: 500; }
.title-sub { margin-left: 5px; color: var(--muted); font-size: 7px; }
.title-buttons { display: flex; align-self: stretch; margin-left: auto; }
.win-btn { display: grid; place-items: center; width: 25px; padding: 0; border: 0; border-left: 1px solid color-mix(in srgb, var(--key) 45%, transparent); background: transparent; font-size: 7px; }
button.win-btn { cursor: pointer; }
button.win-btn:hover { background: var(--accent); }
.win-list { justify-content: center; }

.menustrip {
    display: flex;
    align-items: center;
    gap: 15px;
    height: 20px;
    padding: 0 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--key) 60%, transparent);
    background: var(--panel);
    color: var(--muted);
    font-size: 7px;
    font-weight: 500;
    line-height: 1;
}
.menu-clock { margin-left: auto; color: var(--ink); letter-spacing: .08em; }

.viewport { display: flex; gap: 7px; padding: 8px; background: var(--chrome); }
.cover {
    position: relative;
    flex: 0 0 112px;
    height: 88px;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--key);
    border-radius: 4px;
    background: var(--screen);
    box-shadow: inset 0 0 0 2px var(--chrome-hi);
}
.cover-art {
    display: block;
    width: 100%;
    height: 67px;
    border: 0;
    border-bottom: 1px solid var(--key);
    background: linear-gradient(135deg, var(--screen-2), var(--screen));
    object-fit: cover;
}
.cover-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 19px;
    padding: 0 6px;
    background: var(--panel);
    color: var(--muted);
    font-size: 6px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .08em;
}
.maximize-glyph { display: block; width: 8px; height: 7px; border: 1px solid currentColor; box-shadow: inset 0 2px 0 color-mix(in srgb, currentColor 45%, transparent); }

.readout { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 6px; }
.lcd {
    position: relative;
    min-height: 65px;
    overflow: hidden;
    padding: 8px;
    border: 1px solid var(--key);
    border-radius: 4px;
    background: linear-gradient(180deg, var(--screen-2), var(--screen));
    box-shadow: inset 2px 2px 0 rgba(255,255,255,.45), inset -2px -2px 0 rgba(45,90,150,.13);
}
.lcd-tag { display: block; margin-bottom: 7px; color: var(--muted); font: 500 6px/1 'DM Mono', monospace; letter-spacing: .13em; }
.lcd-track { overflow: hidden; padding-right: 2px; font-family: 'Mona10-Bold', 'Mona10', sans-serif; font-size: 10px; font-weight: 700; line-height: 1.45; white-space: nowrap; text-overflow: ellipsis; }
.lcd-wave { position: absolute; right: 8px; bottom: 7px; left: 8px; display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.lcd-wave i { display: block; flex: 1; min-width: 2px; height: 3px; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, var(--accent-2), var(--accent)); opacity: .5; transform-origin: bottom; transition: opacity .3s ease; }
.playing .lcd-wave i { opacity: 1; animation-name: eq; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.playing .lcd-wave i:nth-child(4n+1) { height: 14px; animation-duration: .9s; animation-delay: 0s; }
.playing .lcd-wave i:nth-child(4n+2) { height: 16px; animation-duration: 1.3s; animation-delay: .15s; }
.playing .lcd-wave i:nth-child(4n+3) { height: 9px; animation-duration: 1.05s; animation-delay: .3s; }
.playing .lcd-wave i:nth-child(4n) { height: 12px; animation-duration: 1.2s; animation-delay: .45s; }
.vol-row { display: flex; align-items: center; gap: 6px; padding: 1px 1px 0; color: var(--muted); font-size: 8px; }
.vol-row > i { flex: 0 0 auto; font-size: 8px; }
.vol-pct { flex: 0 0 auto; min-width: 20px; color: var(--ink); font: 500 7px/1 'DM Mono', monospace; text-align: right; }
.pixel-vol { display: flex; flex: 1; align-items: center; gap: 2px; height: 15px; padding: 3px 4px; border: 1px solid var(--key); border-radius: 3px; background: var(--panel); }
.vol-seg { flex: 1; height: 8px; padding: 0; border: 1px solid color-mix(in srgb, var(--key) 45%, transparent); border-radius: 1px; background: transparent; cursor: pointer; }
.vol-seg:hover { border-color: var(--key); }
.vol-seg.filled { border-color: var(--key); background: var(--accent); }

.deck {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 8px;
    border-top: 1px solid var(--key);
    border-bottom: 1px solid var(--key);
    background: linear-gradient(180deg, var(--chrome-hi), var(--chrome-low));
}
.deck-btn {
    display: grid;
    place-items: center;
    width: 26px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--key);
    border-radius: 11px;
    background: linear-gradient(180deg, var(--chrome-hi), var(--chrome));
    font-size: 8px;
    box-shadow: 0 2px 0 color-mix(in srgb, var(--key) 35%, transparent), inset 0 1px #fff;
    cursor: pointer;
}
.deck-btn:hover:not(:disabled) { background: var(--accent); }
.deck-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 1px 2px var(--shadow); }
.deck-btn:disabled { opacity: .4; cursor: default; }
.deck-btn.tiny { width: 22px; height: 19px; border-color: transparent; border-radius: 5px; background: transparent; box-shadow: none; color: var(--muted); font-size: 7px; }
.deck-btn.tiny:active { background: color-mix(in srgb, var(--key) 20%, transparent); }
.deck-btn.tiny.active { border-color: var(--key); background: var(--accent); color: var(--key); box-shadow: inset 0 1px 2px var(--shadow); }
.deck-btn i, .deck-btn svg { pointer-events: none; }
.deck-btn.play { width: 36px; height: 29px; border-radius: 15px; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 72%, var(--key))); color: var(--key); font-size: 10px; box-shadow: 0 2px 0 var(--key), inset 0 1px rgba(255,255,255,.8); }
.repeat-one-badge { position: absolute; margin: -6px 0 0 4px; font-size: 5px; }

.playlist-container {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    width: 172px;
    overflow: hidden;
    border: 1px solid var(--key);
    border-radius: 10px;
    background: color-mix(in srgb, var(--chrome-hi) 88%, transparent);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 14px 34px var(--shadow), inset 0 0 0 1px var(--chrome-hi);
}
.playlist-toolbar, .playlist-columns, .playlist-footer { display: flex; align-items: center; justify-content: space-between; }
.playlist-columns, .playlist-footer { font-family: 'DM Mono', monospace; }
.playlist-toolbar { flex: 0 0 auto; height: 24px; padding: 0 7px; border-bottom: 1px solid var(--key); background: linear-gradient(180deg, var(--chrome-hi), var(--chrome)); font-size: 7px; }
.playlist-path { display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.playlist-path i { color: var(--accent); text-shadow: 0 0 0 var(--key); }
.playlist-mode { padding: 2px 4px; border: 1px solid color-mix(in srgb, var(--key) 55%, transparent); background: var(--panel); color: var(--muted); font-family: inherit; font-size: 6px; }
.playlist-columns { flex: 0 0 auto; height: 17px; padding: 0 8px 0 28px; border-bottom: 1px solid color-mix(in srgb, var(--key) 45%, transparent); background: var(--screen-2); color: var(--muted); font-size: 6px; }
.playlist-columns span:last-child { width: 35px; }
.playlist { flex: 1 1 auto; min-height: 0; margin: 0; padding: 2px; overflow-y: auto; list-style: none; }
.playlist li { position: relative; overflow: hidden; height: 25px; padding: 6px 43px 6px 27px; border: 1px solid transparent; color: var(--ink); font-size: 8px; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; cursor: default; }
.playlist li::before { content: ''; position: absolute; top: 5px; left: 6px; width: 14px; height: 13px; border: 1px solid var(--key); border-radius: 1px; background: linear-gradient(180deg, var(--chrome-hi) 0 24%, var(--screen) 25%); box-shadow: 2px 2px 0 color-mix(in srgb, var(--chrome-low) 55%, transparent); }
.playlist li::after { content: 'AUDIO'; position: absolute; right: 8px; color: var(--muted); font: 500 6px/1.6 'DM Mono', monospace; }
.playlist li:hover { border-color: color-mix(in srgb, var(--key) 45%, transparent); background: var(--panel); }
.playlist li.current { border: 1px dotted var(--key); background: color-mix(in srgb, var(--accent) 28%, var(--screen-2)); color: var(--ink); }
.playlist li.current::before { background: linear-gradient(180deg, var(--accent-2) 0 24%, var(--accent) 25%); }
.playlist-footer { flex: 0 0 auto; height: 19px; padding: 0 7px; border-top: 1px solid var(--key); background: var(--panel); color: var(--muted); font-size: 6px; }
.playlist::-webkit-scrollbar { width: 8px; }.playlist::-webkit-scrollbar-track { background: var(--chrome); border-left: 1px solid var(--key); }.playlist::-webkit-scrollbar-thumb { background: var(--chrome-low); border: 1px solid var(--key); }

.taskbar-tab { display: none; }
.rainy-room-player.minimized .window,
.rainy-room-player.minimized .playlist-container { display: none; }
.rainy-room-player.minimized .taskbar-tab { display: flex; align-items: center; width: 132px; height: 27px; padding: 2px 7px 2px 3px; border: 1px solid var(--key); border-radius: 4px; background: linear-gradient(180deg, var(--chrome-hi), var(--chrome-low)); box-shadow: 0 7px 18px var(--shadow), inset 0 0 0 1px var(--chrome-hi); font: 500 8px/1 'DM Mono', monospace; cursor: pointer; }
.tab-icon { display: grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border: 1px solid var(--key); border-radius: 3px; background: var(--accent); font-size: 8px; }
.tab-name { overflow: hidden; flex: 1; white-space: nowrap; text-overflow: ellipsis; }.tab-led { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 4px var(--accent-2); }

.volume-popup { position: absolute; right: 7px; bottom: 30px; padding: 3px 6px; border: 1px solid var(--key); border-radius: 2px; background: var(--panel); font: 500 7px/1 'DM Mono', monospace; box-shadow: 2px 2px 0 var(--shadow); }
.volume-popup.show { display: block !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@keyframes eq { 0%, 100% { transform: scaleY(.32); } 50% { transform: scaleY(1); } }

@media (max-width: 768px), (pointer: coarse) {
    .rainy-room-player { display: none !important; }
}
@media (max-width: 520px) { .rainy-room-player { right: 15px; bottom: 15px; } }
@media (prefers-reduced-motion: reduce) { .rainy-room-player, .rainy-room-player * { animation: none !important; transition: none !important; } }