/* Full song player, styled after the Soung Seur Android player. */
.main-column.is-player-page{background:#04121c}
.app-player{--player-cyan:#78e1f2;--player-blue:#659cfa;max-width:820px;margin:0 auto;color:#f5f8fc}
.app-player .player-back{margin-bottom:14px;font-size:12px;color:#96adbd}
.app-player .android-player-hero{display:flex;flex-direction:column;align-items:center;gap:0}
.player-art-stage{position:relative;width:100%;display:grid;place-items:center;padding:45px 0 42px;isolation:isolate}
.app-player .player-cover{z-index:1;width:min(66vw,330px);height:min(66vw,330px);max-width:none;aspect-ratio:1;margin:0;border-radius:50%;border:5px solid #dbe2eb;overflow:hidden;box-shadow:0 8px 38px #0005;background:#0b1830}
.app-player .player-cover img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.player-waveform{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:74px;display:flex;justify-content:space-between;align-items:center;gap:5px;overflow:hidden;z-index:0;pointer-events:none}
.player-waveform>span{display:block;width:5px;min-width:3px;height:var(--bar-height);border-radius:10px;background:linear-gradient(#93e3ff,#67a7fa);box-shadow:0 0 7px #63c9fbaa;opacity:.8;transform-origin:center}
.app-player.is-playing .player-waveform>span{animation:player-wave 1.05s ease-in-out infinite alternate;animation-delay:var(--bar-delay)}
@keyframes player-wave{from{transform:scaleY(.38);opacity:.65}to{transform:scaleY(1.25);opacity:1}}
.app-player .player-details{width:100%;text-align:center;min-width:0;margin:0 auto 26px}
.app-player .player-details h1{font-size:clamp(21px,3.4vw,32px);font-weight:700;line-height:1.65;letter-spacing:0;margin:10px 0 8px;overflow-wrap:anywhere}
.app-player .player-details .artist-line{font-size:clamp(18px,2.6vw,25px);color:#8ea9ba;overflow-wrap:anywhere}
.player-album{font-size:16px;color:#38d6ef;margin-top:9px;overflow-wrap:anywhere}
.player-social-strip{display:flex;align-items:stretch;gap:10px;overflow-x:auto;max-width:100%;padding:5px 3px 14px;scrollbar-width:thin;scrollbar-color:#244455 transparent;overscroll-behavior-inline:contain}
.player-action-card{flex:0 0 112px;min-width:0;min-height:108px;border:1px solid #244454;border-radius:22px;padding:13px 9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:#071c29;color:#f5f8fc;text-align:center;font-size:13px;line-height:1.35}
.player-action-card>svg{width:32px;height:32px}
.player-action-card>strong{font-size:16px;font-weight:500}
.player-action-card small{font-size:10px;color:#94aabb}
.player-action-card.is-on{color:#6bdff0;border-color:#458c9c;background:#0a2938}
.player-action-card.is-on small{color:#82d9e6}
.player-action-card:focus-visible{outline:2px solid #85dff1;outline-offset:2px}
.player-view-count>svg{width:35px;height:35px;fill:#f5f8fc;stroke:#f5f8fc}
.player-view-count>svg circle{fill:#071c29;stroke:#071c29}
.player-action-card[data-like]>svg{fill:currentColor;stroke-width:1.4}
.player-report{color:#ff809c}
.player-owner-card{position:relative;justify-content:flex-start;gap:14px}
.player-owner-avatar{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;width:52px;height:52px;border:3px solid #dce3ef;padding:0;border-radius:50%;background:#18354b;color:white;font-size:20px;font-weight:700}
.player-owner-avatar>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.player-owner-avatar:has(>img)>.avatar-initials{visibility:hidden}
.player-owner-card>small{max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.player-follow-badge{position:absolute;top:49px;left:calc(50% + 1px);width:28px;height:28px;border:2px solid #e5eff7;border-radius:50%;background:#5196fa;color:white;padding:3px;display:grid;place-items:center}
.player-follow-badge svg{width:17px;height:17px}
.player-follow-badge.is-following{background:#00ba95}
.app-player .player-transport{display:block;background:linear-gradient(110deg,#10272e,#0c1a2b);border:1px solid #1b3544;border-radius:18px;padding:24px 28px;margin:10px 0 24px}
.full-player-seek{display:block;width:100%;height:24px;margin:0;appearance:none;-webkit-appearance:none;border:0;outline:0;background:transparent;cursor:pointer;accent-color:#6faafd;touch-action:pan-x}
.full-player-seek::-webkit-slider-runnable-track{height:3px;background:linear-gradient(90deg,var(--player-cyan) var(--pct,0%),#1b3441 var(--pct,0%));border-radius:4px}
.full-player-seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;border-radius:50%;border:0;background:#70a7fb;margin-top:-6.5px}
.full-player-seek::-moz-range-track{height:3px;border-radius:4px;background:#1b3441}
.full-player-seek::-moz-range-progress{height:3px;background:var(--player-cyan)}
.full-player-seek::-moz-range-thumb{width:16px;height:16px;border-radius:50%;border:0;background:#70a7fb}
.full-player-seek:disabled{cursor:default;opacity:.6}
.full-player-seek:focus-visible{outline:2px solid var(--player-cyan);outline-offset:3px;border-radius:6px}
.full-player-times{display:flex;justify-content:space-between;color:#c0cbd2;font-size:13px;gap:16px;margin-top:4px}
.full-player-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) 92px repeat(2,minmax(0,1fr));align-items:center;gap:12px;margin-top:22px}
.full-player-buttons>button{position:relative;display:grid;place-items:center;min-width:0;min-height:48px;border:0;background:none;color:#9daab3;border-radius:12px;padding:8px}
.full-player-buttons>button svg{width:31px;height:31px}
.full-player-buttons>button:disabled{opacity:.4;cursor:default}
.full-player-buttons>button.is-on{color:#70def0}
.full-player-buttons>.main-play-button{width:92px;height:92px;border-radius:50%;background:linear-gradient(100deg,#81e3ef,#6099fd);color:#05131e}
.full-player-buttons>.main-play-button svg{width:43px;height:43px;fill:currentColor;stroke-width:2.8}
.repeat-one-badge{position:absolute;bottom:1px;right:calc(50% - 15px);font-size:10px;background:#0c2030;color:#77dff2;border-radius:50%;width:14px;height:14px;line-height:14px}
.player-content-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(220px,1fr);gap:18px;align-items:start}
.player-discussion-slot{min-width:0}
.app-player .song-discussion{margin-top:0;scroll-margin-top:85px}
.app-player .subpanel{background:#081a27;border-color:#203c4c}
.app-player .next-queue .queue-item{width:100%;text-align:left;background:none;color:inherit;border-top:0;border-left:0;border-right:0}
.app-player .queue-item>span{min-width:0;flex:1}
.app-player .queue-item img{object-fit:cover;flex-shrink:0}
.app-player .queue-item>svg{flex-shrink:0}
.player-notes{grid-column:1/-1;min-width:0}
.player-notes summary{cursor:pointer;font-size:14px;color:#a8c4d3}
.player-notes .description-line{font-size:13px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;color:#9fb4c2}
.player-notes .lyrics-box{margin-top:16px;min-height:0;overflow-wrap:anywhere}
@media(max-width:800px),(pointer:coarse){.player-content-grid{display:flex;flex-direction:column}.player-content-grid>div,.player-content-grid>section,.player-content-grid>details{width:100%}}
@media(max-width:600px){
 .player-art-stage{padding:30px 0 28px}
 .app-player .player-cover{width:min(68vw,300px);height:min(68vw,300px);border-width:4px}
 .player-waveform{height:68px;gap:4px}
 .player-waveform>span{width:4px;min-width:3px}
 .app-player .player-details{margin-bottom:20px}
 .app-player .player-details h1{font-size:21px;margin-top:8px;line-height:1.7}
 .app-player .player-details .artist-line{font-size:22px}
 .player-album{font-size:15px}
 .player-action-card{flex-basis:102px;min-height:102px;padding:12px 8px;border-radius:20px}
 .player-social-strip{gap:10px;padding-bottom:10px}
 .app-player .player-transport{padding:20px 18px 24px;margin-top:12px;border-radius:14px}
 .full-player-buttons{grid-template-columns:repeat(2,minmax(0,1fr)) 80px repeat(2,minmax(0,1fr));gap:5px;margin-top:20px}
 .full-player-buttons>.main-play-button{width:80px;height:80px}
 .full-player-buttons>button{padding:5px}
 .full-player-buttons>button svg{width:27px;height:27px}
 .full-player-buttons>.main-play-button svg{width:36px;height:36px}
 .player-content-grid{gap:18px}
}
@media(max-width:360px){.full-player-buttons{grid-template-columns:repeat(2,minmax(0,1fr)) 68px repeat(2,minmax(0,1fr));gap:2px}.full-player-buttons>.main-play-button{width:68px;height:68px}.full-player-buttons>button svg{width:24px;height:24px}.app-player .player-transport{padding-inline:12px}}
@media(prefers-reduced-motion:reduce){.app-player .player-waveform>span{animation:none!important}}
