/* The record's player out in the camp (src/mini-player.js; the user, 2026-10-29): the camp's card (2 px #b8763c),
   placed by the script at the top left of the view (right of the menu), level with the clock's top. 473 × 50 as in
   the user's picture of it (later that day: "마을에서 음악플레이어가 너무 커. 내가 첨부한 이미지대로 크기 수정해줘"):
   the sleeve with the turning vinyl, the record's name over its bar, previous / play / next, and the X that stops
   the record and lets the place's own song back. In the lakeshore's screen it sits in that screen's tool row, before
   the Books card (.docked). */
.vp{position:fixed;z-index:11;top:34px;left:22px;width:473px;height:50px;box-sizing:border-box;display:flex;align-items:center;padding:0 6px 0 12px;
  border:2px solid var(--cp-line,#b8763c);border-radius:18px;background:#1b120d;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 10px 24px rgba(0,0,0,.4);
  color:var(--cp-text,#fbf7ee);font-family:var(--cp-sans,system-ui,sans-serif);opacity:0;transform:translateY(-10px);transition:opacity .28s ease,transform .32s cubic-bezier(.2,.8,.2,1)}
.vp.on{opacity:1;transform:none}
.vp[hidden]{display:none}
.vp button{font-family:inherit;line-height:1}
.vp button:focus-visible{outline:2px solid #f0c27a;outline-offset:2px}
/* in a building, the fire's room or a talk it waits out of sight (src/ui.js tells the script; these are the clock's
   states); in the lakeshore's screen (night, meditating) only the docked one shows, with that screen's tools */
body.pre .vp,body.in-page .vp,body.at-fire .vp,body.leaving .vp,body.night .vp:not(.docked),body.meditating .vp:not(.docked){opacity:0;pointer-events:none}
.vp.docked{position:relative;z-index:auto;top:auto;left:auto;flex:none;width:473px;transform:none}
.vp.docked:not(.on){opacity:0}
/* the sleeve, the vinyl out in front of it over its right side, turning while the record plays */
.vp-disc{position:relative;flex:none;width:68px;height:37px;margin-right:18px}
.vp-sleeve{position:absolute;left:0;top:1.5px;width:46px;height:34px;box-sizing:border-box;object-fit:cover;border-radius:4px;border:1px solid rgba(255,236,205,.16);background:#2a1a10;box-shadow:0 3px 8px rgba(0,0,0,.5)}
.vp-vinyl{position:absolute;left:31px;top:0;width:37px;height:37px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.55));pointer-events:none}
.vp-vinyl img{position:absolute;inset:0;width:100%;height:100%;display:block}
.vp-vinyl .spin{animation:vpSpin 1.8s linear infinite;animation-play-state:paused}
.vp-vinyl.on .spin{animation-play-state:running}
@keyframes vpSpin{to{transform:rotate(1turn)}}
/* the name over the bar (the name may run 5 px past the bar's end, as in the picture) */
.vp-mid{flex:1;min-width:0;display:flex;flex-direction:column;align-self:flex-start;margin:4px 10px 0 0}
.vp-name{display:block;margin:-.3em -5px -.3em 0;padding:.3em 0;font:600 20px/1.15 var(--cp-serif,Georgia,serif);color:#fbf1df;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-bar{position:relative;flex:none;height:3px;margin-top:5px;border-radius:2px;background:rgba(255,236,205,.16)}
.vp-bar::before{content:"";position:absolute;left:-8px;right:-8px;top:-8px;bottom:-9px}
.vp-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:linear-gradient(90deg,#e4a75f,#f6c07a);pointer-events:none}
.vp-bar b{position:absolute;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#f9bc6c;box-shadow:0 0 0 1.5px rgba(40,20,8,.6),0 0 6px rgba(249,184,104,.45);pointer-events:none;transition:transform .15s}
.vp-bar:hover b,.vp-bar.held b{transform:scale(1.35)}
/* previous / play / next, then the X behind a line */
.vp-ctl{flex:none;display:flex;align-items:center}
.vp-btn,.vp-x{width:38px;height:38px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:none;color:#ead9bd;cursor:pointer;transition:color .15s,background .15s}
.vp-btn svg{width:20px;height:20px}
.vp-btn:hover,.vp-x:hover{background:rgba(255,226,180,.08);color:#ffd9a0}
.vp-btn:disabled{opacity:.35;cursor:default;background:none}
.vp-play{width:34px;height:34px;margin:0 8px;display:grid;place-items:center;padding:0;border-radius:50%;border:2px solid #f3c27d;background:radial-gradient(circle at 50% 28%,#ad7742,#6a4122 72%);box-shadow:0 2px 8px rgba(0,0,0,.45),0 0 10px rgba(243,194,125,.22);color:#f8c984;cursor:pointer;transition:transform .15s,box-shadow .15s}
.vp-play svg{width:18px;height:18px}
.vp-play:hover{transform:scale(1.05);box-shadow:0 3px 10px rgba(0,0,0,.5),0 0 14px rgba(243,194,125,.38)}
.vp-sep{flex:none;width:1px;height:27px;margin:0 4px;background:rgba(214,168,112,.28)}
.vp-x{flex:none;width:36px;height:36px}
.vp-x svg{width:20px;height:20px}
@media (prefers-reduced-motion:reduce){.vp{transition:opacity .2s}.vp-vinyl .spin{animation:none}}

/* a phone: under the clock, the width of the screen; the menu open over the village puts it away, as the clock */
.vp.phone{left:12px;right:12px;width:auto;top:calc(var(--safe-t,0px) + 76px);height:48px;padding:0 4px 0 9px;border-radius:16px}
.vp.phone .vp-disc{width:60px;height:33px;margin-right:12px}
.vp.phone .vp-sleeve{width:41px;height:30px}
.vp.phone .vp-vinyl{left:27px;width:33px;height:33px}
.vp.phone .vp-mid{margin-right:6px}
.vp.phone .vp-name{font-size:17px}
.vp.phone .vp-btn{width:34px;height:34px}
.vp.phone .vp-play{width:32px;height:32px;margin:0 3px}
.vp.phone .vp-play svg{width:16px;height:16px}
.vp.phone .vp-sep{display:none}
.vp.phone .vp-x{width:32px;height:32px}
@media (max-width:760px){body:not(.nav-closed) .vp:not(.docked){opacity:0;pointer-events:none}}
/* the lakeshore's screen on a narrow window: its tools stack (styles/camp.css), the player across them; on a phone
   in the phone's dress, its row placing it */
@media (max-width:980px){.vp.docked{width:100%}}
.vp.docked.phone{top:auto;left:auto;right:auto;width:100%}