/* One visual system for every panel, label and control. Loaded last on purpose. */
:root{--ui-paper:#fff6df;--ui-paper-deep:#f5ecd5;--ui-line:#a18b5c;--ui-ink:#30462d;--ui-muted:#7a6a48;--ui-wood:#5e3d22;--ui-accent:#46603b;--ui-gold:#dcad54;--ui-radius:6px;--ui-shadow:2px 3px 0 #3a392c33;--ui-serif:Georgia,'Times New Roman',serif;--ui-sans:'Be Vietnam Pro',system-ui,sans-serif}
*{scrollbar-width:thin;scrollbar-color:#b9a37b transparent}
:focus-visible{outline:2px solid var(--ui-gold)!important;outline-offset:2px}
canvas{cursor:url(ui/cursors/arrow.png) 2 2,default}
.pet-name{cursor:url(ui/cursors/hand.png) 16 14,pointer}

/* filters: the same chip in the stall and in every room */
.pill,.v34-shop .pill,.room .pill{box-sizing:border-box;height:36px;min-height:36px;padding:0 13px;display:inline-flex;align-items:center;white-space:nowrap;border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-paper-deep);color:var(--ui-ink);font:600 12px var(--ui-sans);box-shadow:none;transform:none;opacity:1}
.pill:hover{background:#fffbef}
.pill[aria-pressed=true],.v34-shop .pill[aria-pressed=true],.room .pill[aria-pressed=true]{background:var(--ui-accent);border-color:var(--ui-accent);color:var(--ui-paper)}

/* close: same square everywhere */
.st-close,.room .st-close,.v34-shop .st-close{box-sizing:border-box;width:40px;height:40px;min-width:40px;display:grid;place-items:center;padding:0;background:var(--ui-paper);border:1px solid var(--ui-line);border-radius:var(--ui-radius);box-shadow:var(--ui-shadow);color:var(--ui-ink);font:700 16px var(--ui-sans)}
.st-close:hover{background:#fffbef}

/* small type: one kicker, one meta, one title voice */
.album-intro small,.film-kicker,.film-start small,.v34-shop .kick span,.st-ribbon .kick span,.eyebrow,.daily-eyebrow{font:600 11px var(--ui-sans)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--ui-muted)}
.film-start small{color:#6f6240}
.album-intro h3,.now-film h3,.ticket-shelf>header b,.v34-shop .st-ribbon .now b,.daily-dialog h2,.daily-dialog h3{font-family:var(--ui-serif);font-style:italic;font-weight:700;color:var(--ui-ink)}
.album-intro>span,.film-meta,.ticket-shelf>header small,.room.cine .ticket em,.room.cine .ticket small,.v34-shop .st-ribbon .now small{font-family:var(--ui-sans);font-style:normal;font-size:12px;color:var(--ui-muted)}
.theme-label,.sound-mix,.sound-mix label,.sound-mix select{font-family:var(--ui-sans)!important;color:var(--ui-ink)}

/* buttons inside panels */
.theater-open,.feature-status button,.daily-dialog button:not(.daily-close),.settings button,#garden-settings button,#return-garden,.theme-picker button{box-sizing:border-box;min-height:36px;padding:6px 12px;border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-paper);color:var(--ui-ink);font:600 12px var(--ui-sans);box-shadow:var(--ui-shadow)}
.theme-picker button{box-shadow:none;background:var(--ui-paper-deep)}
.theme-picker button[aria-pressed=true]{background:#e6dcb4;border-color:var(--ui-accent)}
.v34-shop .card.hero,.memory-photo,.room.cine .ticket{border-radius:var(--ui-radius)}

/* everything that floats over the garden */
.tag,.feature-status,.pet-name,.pet-quote,.bubble,#bubble,.li-quote{background:#fff9e9fa;border:1px solid var(--ui-line);border-radius:var(--ui-radius);box-shadow:var(--ui-shadow);color:var(--ui-ink)}
.tag{padding:5px 9px;font:700 12px var(--ui-sans);transform:translate(-50%,-100%)}.tag small{font:500 11px var(--ui-sans);color:var(--ui-muted);letter-spacing:0}
.pet-name{padding:2px 7px;font:600 11px var(--ui-sans)}
.pet-quote{padding:5px 8px 6px;max-width:168px;font:500 11px/1.35 var(--ui-sans);font-style:normal}
.pet-quote:before{margin-bottom:1px;font:700 10px/1.2 var(--ui-sans);color:var(--ui-muted)}
.pet-quote:after{width:6px;height:6px;bottom:-4px}
.bubble,#bubble{width:auto;max-width:190px;padding:6px 9px;font:500 12px/1.35 var(--ui-sans)}
.li-quote{font-family:var(--ui-serif)}

/* stroking a pet */
.pet-heart{position:fixed;z-index:9;pointer-events:none;color:#c8503f;font:700 14px var(--ui-sans);text-shadow:0 1px #fff6df;animation:pet-heart .8s ease-out forwards}
@keyframes pet-heart{from{opacity:1;transform:translate(-50%,-50%) scale(.7)}to{opacity:0;transform:translate(calc(-50% + var(--drift,0px)),-34px) scale(1.1)}}
@media(prefers-reduced-motion:reduce){.pet-heart{animation-duration:.01s}}

/* rhythm inside rooms */
.room .room-body{scrollbar-gutter:stable}
.album-intro{padding-bottom:12px}
.memory-grid{gap:12px}
@media(max-width:760px){
 .pill,.v34-shop .pill,.room .pill{height:40px;min-height:40px}
 .pet-quote{max-width:150px}
 .bubble,#bubble{max-width:170px}
}

/* opening the gate: a soft iris out of the dark, while the card lifts away */
@property --gate-hole{syntax:'<length-percentage>';inherits:false;initial-value:0%}
.gate.open{animation:gate-iris .95s cubic-bezier(.3,.1,.2,1) forwards!important;-webkit-mask:radial-gradient(circle at 50% 55%,transparent var(--gate-hole),#000 calc(var(--gate-hole) + 12%));mask:radial-gradient(circle at 50% 55%,transparent var(--gate-hole),#000 calc(var(--gate-hole) + 12%))}
.gate.open .gate-card{animation:gate-lift .5s ease-in forwards}
@keyframes gate-iris{to{--gate-hole:130%;opacity:0}}
@keyframes gate-lift{to{opacity:0;transform:translateY(-34px) scale(.97)}}
.reduce-motion .gate.open,.reduce-motion .gate.open .gate-card{animation-duration:.01s!important}

/* One wood, one glass. Wood tones come from the menu boards. */
:root{--wood-light:#c97a35;--wood:#a65c26;--wood-dark:#6d3517;--wood-edge:#3f1f0e;--glass:#fff6dfd4;--plank:repeating-linear-gradient(0deg,#0000 0 21px,#6d351733 21px 23px),linear-gradient(180deg,#c97a35,#a65c26)}
.plaque,body.night .plaque,.room .st-sign{filter:sepia(.45) saturate(1.35) hue-rotate(-6deg) brightness(1.02)}
.tools,body.night .tools{background:var(--plank);border:0;outline:2px solid var(--wood-edge);box-shadow:0 4px 0 var(--wood-dark),3px 7px 0 #26352244;border-radius:6px}
.clock,body.night .clock{background:#fff6dfe6;border-radius:4px;border:1px solid var(--wood-edge)}
.room .st-head,.room.hammock .st-head,.room.cine .st-head,.room.house .st-head{background:var(--plank);border-bottom:4px solid var(--wood-dark);box-shadow:0 2px 0 var(--wood-edge)}

/* Pixel icons replace thin line icons */
button.sq,.tools button.sq{width:44px;height:44px;background:center/34px 34px no-repeat;border:0;box-shadow:none;transition:transform .12s}
button.sq svg{display:none}
button.sq:hover{transform:translateY(-2px) rotate(-3deg)}button.sq:active{transform:translateY(1px)}
#sound{background-image:url(art-v36/ui-sound.webp)}#sound[aria-pressed=false]{filter:grayscale(.75) opacity(.75)}
#settings-toggle{background-image:url(art-v36/ui-settings.webp)}#wide{background-image:url(art-v36/ui-fullscreen.webp)}
.st-ctl .logbtn{width:44px;height:44px;padding:0;border:0;background:url(art-v36/ui-next.webp) center/contain no-repeat;box-shadow:none;transition:transform .12s;color:transparent}
.st-ctl .logbtn svg{display:none}.st-ctl #prev{transform:scaleX(-1)}
.st-ctl .logbtn:hover{transform:translateY(-2px)}.st-ctl #prev:hover{transform:scaleX(-1) translateY(-2px)}
.st-ctl .logbtn.big,.v34-shop .st-ctl .big{width:62px;height:62px;background-image:url(art-v36/ui-play.webp);border:0;box-shadow:none;animation:none}
.playing .st-ctl .logbtn.big{background-image:url(art-v36/ui-pause.webp);animation:button-beat 1.33s ease-in-out infinite}
@keyframes button-beat{50%{transform:scale(1.06)}}.reduce-motion .st-ctl .logbtn.big{animation:none}
.heart,#fav{width:28px;height:28px;flex:none;padding:0;border:0;font-size:0;background:url(art-v36/ui-heart.webp) center/contain no-repeat;filter:grayscale(1) opacity(.55);transition:transform .15s,filter .15s}
.heart[aria-pressed=true],#fav[aria-pressed=true]{filter:none;transform:scale(1.15)}
input[type=range]{accent-color:var(--wood)}
#garden-settings input[type=checkbox],.sound-mix input[type=checkbox]{accent-color:var(--wood)}

/* The stall: larger, glass over the garden, machine standing on the counter */
.shop-machine-sprite{background:no-repeat 0 0/800% 100%;image-rendering:pixelated;animation:machine-play .8s steps(7) infinite;animation-play-state:paused}
.playing .shop-machine-sprite{animation-play-state:running}
@keyframes machine-play{to{background-position:100% 0}}
.v34-shop[data-skin=suitcase] .shop-machine-sprite{background-image:url(art-v36/machine-vinyl.webp);aspect-ratio:168/112}
.v34-shop[data-skin=boombox] .shop-machine-sprite{background-image:url(art-v36/machine-cassette.webp);aspect-ratio:168/156}
.v34-shop[data-skin=gramophone] .shop-machine-sprite{background-image:url(art-v36/machine-horn.webp);aspect-ratio:1;transform:none}
#shop-machine,.shop-disc,.shop-counter-clean,.v34-shop:not([data-media=vinyl]) .shop-counter-clean{display:none!important}
@media(min-width:761px){
 .v34-shop{top:78px;bottom:auto;height:min(calc(100dvh - 104px),860px);width:min(1400px,calc((100dvh - 104px)*1.55),calc(100vw - 20px));background:none;filter:none}
 /* Glass sits under the frame art, so the counter and vines stay sharp. */
 .v34-shop:before{content:'';position:absolute;left:12.2%;right:4.6%;top:13%;bottom:7.4%;z-index:-2;background:#fff6dfc4;-webkit-backdrop-filter:blur(9px) saturate(1.15);backdrop-filter:blur(9px) saturate(1.15);border-radius:6px}
 .v34-shop:after{content:'';display:block!important;position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('./art-v34/ui/frame-glass.webp') center/100% 100% no-repeat}
 .v34-shop .st-ctl{display:flex;position:static;grid-column:2;align-items:center;justify-content:center;gap:26px;min-height:52px;width:auto}
 .v34-shop .st-ctl .logbtn{position:static;flex:none}
 .v34-shop .shop-machine-sprite{position:absolute;left:12.6%;right:auto;top:auto;bottom:23.5%;width:13%;height:auto;margin:0;z-index:4}
 .v34-shop[data-skin=boombox] .shop-machine-sprite{width:12.5%}
 .v34-shop[data-skin=gramophone] .shop-machine-sprite{width:9.5%;left:14%}
 .v34-shop .st-line{bottom:40%}
}
@media(max-width:760px){.v34-shop{background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.shop-machine-sprite{width:130px!important;height:auto!important}}

/* Mini player: a little plank that lives on the path */
.mini-player{background:var(--plank);border:0;outline:2px solid var(--wood-edge);box-shadow:0 5px 0 var(--wood-dark),3px 9px 0 #26352244;border-radius:6px;padding:7px 9px}
.mini-open{color:#fff6df;background:none;border:0}
.mini-open small{font:600 10px var(--ui-sans);letter-spacing:.1em;color:#ffe4b4;text-shadow:0 1px #3f1f0e}
.mini-open b{font:italic 700 16px var(--ui-serif);color:#fff6df;text-shadow:0 1px 1px #3f1f0e}
#mini-machine{display:none}
.mini-open:before{content:'';display:block;flex:none;width:58px;height:50px;background:no-repeat 0 50%/800% auto;image-rendering:pixelated;animation:machine-play .8s steps(7) infinite;grid-row:1/3}
.mini-player[data-skin=suitcase] .mini-open:before{background-image:url(art-v36/machine-vinyl.webp)}.mini-player[data-skin=boombox] .mini-open:before{background-image:url(art-v36/machine-cassette.webp)}.mini-player[data-skin=gramophone] .mini-open:before{background-image:url(art-v36/machine-horn.webp)}
.mini-toggle{width:46px;min-width:46px;height:46px;min-height:46px;font-size:0;color:transparent;padding:0;border:0;background:url(art-v36/ui-pause.webp) center/contain no-repeat}
.mini-toggle[aria-label*=Phát],.mini-toggle[aria-label*=Tiếp]{background-image:url(art-v36/ui-play.webp)}

/* Rooms and settings share the same glass */
.room,.room.house,.room.hammock,.room.cine,#garden-settings{background:var(--glass);-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);border:0;outline:3px solid var(--wood-dark);box-shadow:0 0 0 1px var(--wood-edge),0 8px 0 #2635222e}
.room.cine.theater-mode{background:#07120c;-webkit-backdrop-filter:none;backdrop-filter:none}
#garden-settings select{background:#fff9ecd9}
.profile-skill{background:#fff9ecc2;border:1px solid #a18b5c80;border-top:3px solid var(--wood);border-radius:var(--ui-radius);transition:transform .15s,box-shadow .15s}
.profile-skill:hover{transform:translateY(-3px) rotate(-.4deg);box-shadow:var(--ui-shadow)}
.skill-icon{width:60px;height:48px;background:none;border-radius:0}.skill-icon img{width:100%;height:100%;object-fit:contain}
.profile-identity a{background:var(--plank);color:#fff6df;border:0;outline:2px solid var(--wood-edge);border-radius:4px;font-weight:700;text-shadow:0 1px #3f1f0e}

/* Journey */
.road-hero h3{font-size:clamp(28px,3.4vw,46px);line-height:1.15}.road-hero em{font-weight:400;color:#7d6d4b}
.road-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 26px}
.road-stats div{padding:14px 12px;background:var(--plank);border-radius:6px;outline:2px solid var(--wood-edge);color:#fff6df;box-shadow:0 4px 0 var(--wood-dark)}
.road-stats b{display:block;font:italic 700 clamp(30px,3.6vw,46px)/1 var(--ui-serif);text-shadow:0 2px 0 #3f1f0e}
.road-stats span{display:block;margin-top:6px;font:600 12px/1.35 var(--ui-sans);color:#ffe9c6}
.career-stop:first-child{background:#fff9ecd9;border-left:4px solid var(--wood);padding:12px 14px;border-radius:0 6px 6px 0}
.profile-kit h4{margin:20px 0 10px;font:700 15px var(--ui-sans);color:var(--ui-ink)}
.kit-chips{display:flex;flex-wrap:wrap;gap:8px}.kit-chips span{padding:8px 13px;background:var(--plank);color:#fff6df;font:700 13px var(--ui-sans);border-radius:5px;outline:1px solid var(--wood-edge);text-shadow:0 1px #3f1f0e}
.kit-built{display:grid;grid-template-columns:1fr 1fr;gap:10px}.kit-built article{padding:12px 14px;background:#fff9ecc2;border:1px solid #a18b5c80;border-radius:6px}.kit-built b{font:italic 700 17px var(--ui-serif);color:var(--ui-ink)}.kit-built p{margin:5px 0 0;font:12px/1.5 var(--ui-sans);color:var(--ui-muted)}
@media(max-width:760px){.road-stats,.kit-built{grid-template-columns:1fr 1fr}}

.v34-shop .st-ctl button.logbtn{display:block;background:url(art-v36/ui-next.webp) center/contain no-repeat!important;width:38px;height:38px;min-height:0;opacity:1}
.v34-shop .st-ctl button.logbtn.big{background-image:url(art-v36/ui-play.webp)!important;width:52px;height:52px}
.v34-shop.playing .st-ctl button.logbtn.big{background-image:url(art-v36/ui-pause.webp)!important}

/* Stall fit: every machine sits on the counter; more albums in view; the cover stays in its box */
@media(min-width:761px){
 /* Each machine stands on the counter boards, not on its back edge */
 /* Same visual size whatever the sheet's margins; all three share one centre and foot line on the counter */
 .v34-shop .shop-machine-sprite,.v34-shop[data-skin=gramophone] .shop-machine-sprite,.v34-shop[data-skin=suitcase] .shop-machine-sprite,.v34-shop[data-skin=boombox] .shop-machine-sprite{display:block;position:absolute;inset:auto auto 15.5% 1.55%;height:auto;min-height:0;transform:none;width:34.4%;pointer-events:none}
 .v34-shop[data-skin=boombox] .shop-machine-sprite{width:22.4%;left:7.55%;bottom:17%}
 .v34-shop[data-skin=gramophone] .shop-machine-sprite{width:24.6%;left:6.45%}
 .v34-shop .st-line{left:15%;right:55%;top:30%;bottom:38%}
 .v34-shop .stall-search{top:22.5%;left:15%;right:55%}
 .v34-shop #crate,.v34-shop .st-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 8px}
 .v34-shop .card{width:auto;margin:0;padding:5px;min-height:0}
 .v34-shop .card .name{font-size:12px;line-height:1.25;margin-top:4px}
 .v34-shop .card .badge{font-size:9px;padding:2px 5px}
 .v34-shop .album-stage{height:clamp(130px,17vh,160px)}
 .v34-shop .now-cover{height:100%;width:auto!important;aspect-ratio:1;max-width:none;right:0;top:0}
 .v34-shop .theme-label{display:none}
 /* Machine choices sit on the counter front, under the machine they change */
 .v34-shop .theme-picker{left:7.6%;right:auto;top:81.5%;width:17.6%;min-width:176px;height:auto;justify-content:space-between;gap:3px;z-index:6}
 .v34-shop .theme-picker button{flex:1 1 0;min-width:0;min-height:58px;flex-direction:column;justify-content:center;gap:1px;padding:3px 2px;font-size:11px;line-height:1.1;white-space:nowrap}
 .v34-shop .theme-picker img{width:36px;height:30px;flex:none;object-fit:contain}
}
/* Album cards breathe: a slow light drifts over the selected card and a soft lift on hover */
.v34-shop .card{position:relative;background:#fff9ec80;border:1px solid #a18b5c55;border-radius:var(--ui-radius);transition:transform .18s,box-shadow .18s,background .18s;overflow:hidden}
.v34-shop .card:hover{transform:translateY(-3px) rotate(-.6deg);box-shadow:var(--ui-shadow);background:#fff9ecd0}
.v34-shop .card.hero,.v34-shop .card[aria-current=true]{background:linear-gradient(120deg,#ffe9a8,#fff6df 40%,#f6c98a 70%,#ffe9a8);background-size:280% 100%;animation:card-glow 7s ease-in-out infinite alternate;border-color:var(--ui-gold)}
@keyframes card-glow{to{background-position:100% 0}}
.reduce-motion .v34-shop .card{animation:none;transition:none}

/* Drawing today's card */
.daily-dialog{background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:0;outline:3px solid var(--wood-dark);box-shadow:0 0 0 1px var(--wood-edge)}
.daily-draw{display:flex;justify-content:center;gap:clamp(10px,3vw,24px);margin:18px 0 8px;perspective:900px}
.draw-card{width:min(28vw,150px);aspect-ratio:4/5;padding:0;border:0;background:none;cursor:url(ui/cursors/hand.png) 16 14,pointer;transition:transform .2s,opacity .35s}
.draw-card:nth-child(1){transform:rotate(-5deg)}.draw-card:nth-child(3){transform:rotate(5deg)}
.draw-card:not(:disabled):hover{transform:translateY(-12px) rotate(0)}
.draw-card.faded{opacity:.25}.draw-card.flipped{transform:translateY(-6px) scale(1.06)}
.draw-inner{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.3,1.3,.5,1)}
.draw-card.flipped .draw-inner{transform:rotateY(180deg)}
.draw-inner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:8px;outline:2px solid var(--wood-dark);backface-visibility:hidden}
.draw-front{transform:rotateY(180deg)}
.reduce-motion .draw-inner{transition:none}
.karaoke{position:fixed;z-index:9;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(580px,calc(100vw - 24px));box-sizing:border-box;pointer-events:none}
.karaoke[hidden]{display:none}
.karaoke p{margin:0;font:400 clamp(26px,2.7vw,36px)/1.25 'Paytone One',var(--ui-sans);text-align:center;letter-spacing:.01em;text-wrap:balance;filter:drop-shadow(2px 0 0 #1c120b) drop-shadow(-2px 0 0 #1c120b) drop-shadow(0 2px 0 #1c120b) drop-shadow(0 -2px 0 #1c120b) drop-shadow(0 3px 5px #0009)}
.karaoke span{background:linear-gradient(90deg,#ffd24a var(--p,0%),#fffdf5 var(--p,0%));-webkit-background-clip:text;background-clip:text;color:transparent}
body.at-stall .karaoke{z-index:60}
body.in-room .karaoke{display:none}
@media(max-width:760px){body:not(.chill):not(.at-stall) .karaoke{bottom:calc(150px + env(safe-area-inset-bottom))}}
@media(max-width:900px){body.chill .karaoke{bottom:calc(84px + env(safe-area-inset-bottom))}}
/* The vinyl sheet barely changes between frames, so a light sweep turns on the record while it plays */
.v34-shop[data-skin=suitcase] .shop-machine-sprite::after{content:'';position:absolute;left:32%;top:51%;width:36%;aspect-ratio:1;border-radius:50%;background:conic-gradient(#fff0 0 8%,#fff8 12%,#fff0 18% 58%,#fff6 62%,#fff0 68%);transform:translateY(-34%) scaleY(.42);opacity:0;pointer-events:none}
.v34-shop.playing[data-skin=suitcase] .shop-machine-sprite::after{opacity:1;animation:record-turn 1.8s linear infinite}
@keyframes record-turn{to{transform:translateY(-34%) scaleY(.42) rotate(360deg)}}
.reduce-motion .v34-shop[data-skin=suitcase] .shop-machine-sprite::after{animation:none}
.kit-chips span{display:inline-flex;align-items:center;gap:7px}.kit-chips i{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 3px;box-sizing:border-box;border-radius:4px;color:#fff;font:700 10px/1 var(--ui-sans);font-style:normal;text-shadow:none;outline:1px solid #fff6}
@media(max-width:760px){.karaoke p{font-size:21px;line-height:1.3}}
/* Mini player: the machine stands on top of a lighter plank; the text keeps the whole board */
.mini-player{background:linear-gradient(180deg,#e6bd84,#d3a064);overflow:visible;padding:6px 10px}
.mini-player .mini-open{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;min-height:46px;gap:2px;text-align:center}
.mini-player .mini-open small{grid-column:1;color:#5a3a1c;text-shadow:none}
.mini-player .mini-open b{grid-column:1;color:#3a2412;text-shadow:none;font-size:15px}
/* Sheets carry different margins, so each size is set from the drawn machine: about 230px on the board */
.mini-player .mini-open:before{position:absolute;left:-29px;bottom:calc(100% - 23px);grid-row:auto;width:408px;height:272px;background-position:0 100%;background-size:800% 100%;pointer-events:none}
.mini-player[data-skin=boombox] .mini-open:before{left:59px;bottom:calc(100% - 6px);width:232px;height:215px}
.mini-player[data-skin=gramophone] .mini-open:before{left:33px;bottom:calc(100% - 26px);width:284px;height:284px}
@media(max-width:760px){
 .mini-player .mini-open:before{left:calc(50% - 102px);bottom:calc(100% - 12px);width:204px;height:136px}
 .mini-player[data-skin=boombox] .mini-open:before{left:calc(50% - 70px);bottom:calc(100% - 4px);width:140px;height:130px}
 .mini-player[data-skin=gramophone] .mini-open:before{left:calc(50% - 85px);bottom:calc(100% - 15px);width:170px;height:170px}
 body:not(.chill):not(.at-stall) .karaoke{bottom:calc(300px + env(safe-area-inset-bottom))}
}
.karaoke p.karaoke-roman,.karaoke p.karaoke-sub{margin-top:2px;line-height:1.25;filter:drop-shadow(1px 0 0 #1c120b) drop-shadow(-1px 0 0 #1c120b) drop-shadow(0 1px 0 #1c120b) drop-shadow(0 -1px 0 #1c120b)}
.karaoke p.karaoke-roman{font:400 clamp(15px,1.4vw,19px)/1.25 'Paytone One',var(--ui-sans);color:#ffe9a8}
.karaoke p.karaoke-sub{font:600 clamp(15px,1.35vw,18px)/1.25 var(--ui-sans);color:#fffdf5}
.karaoke p[hidden]{display:none}
/* Idle screen: Li's stall sticker large on the right, the chosen machine on the left */
.chill-li{position:fixed;right:2vw;bottom:66px;z-index:29;width:clamp(170px,36vw,640px);height:auto;opacity:0;transition:opacity 1.6s ease;pointer-events:none;filter:drop-shadow(0 6px 8px #0007)}
.chill-machine{position:fixed;left:13vw;bottom:calc(7.5vh - 1.3vw);z-index:29;width:32vw;aspect-ratio:168/112;transform:translateX(-50%);background:no-repeat 0 0/800% 100%;image-rendering:pixelated;opacity:0;transition:opacity 1.6s ease;pointer-events:none;filter:drop-shadow(0 6px 8px #0007);animation:machine-play .8s steps(7) infinite;animation-play-state:paused}
.chill-machine.playing{animation-play-state:running}
.chill-machine[data-skin=suitcase]{background-image:url(art-v36/machine-vinyl.webp)}
.chill-machine[data-skin=boombox]{background-image:url(art-v36/machine-cassette.webp);width:19vw;aspect-ratio:168/156;bottom:7.5vh}
.chill-machine[data-skin=gramophone]{background-image:url(art-v36/machine-horn.webp);width:27vw;aspect-ratio:1;bottom:calc(7.5vh - 1.9vw);transform:translateX(-50%) scaleX(-1)}
.chill-parade{position:fixed;left:auto;top:auto;right:0;bottom:0;z-index:29;width:clamp(190px,41vw,760px);height:80px;opacity:0;transition:opacity 1.6s ease;pointer-events:none}
body.chill .chill-li,body.chill .chill-parade,body.chill .chill-machine[data-skin]{opacity:1}
@media(max-width:760px){.chill-li{width:150px;right:6px;bottom:188px}.chill-parade{width:190px;right:6px;bottom:120px;height:70px}.chill-machine{display:none}}
/* Li's speech on the idle screen, beside his head */
.chill-say{position:fixed;right:3.5vw;bottom:36vh;z-index:30;width:clamp(150px,15vw,290px);box-sizing:border-box;padding:10px 13px;background:#fff9e9f5;border:1px solid var(--ui-line);border-radius:var(--ui-radius);box-shadow:var(--ui-shadow);color:var(--ui-ink);font:600 clamp(13px,1.15vw,17px)/1.35 var(--ui-sans);opacity:0;transition:opacity 1.2s ease;pointer-events:none}
.chill-say::after{content:'';position:absolute;left:-7px;bottom:16px;width:12px;height:12px;background:#fff9e9;border-left:1px solid var(--ui-line);border-bottom:1px solid var(--ui-line);transform:rotate(45deg)}
body.chill .chill-say:not(:empty){opacity:1}
.karaoke{z-index:31}
@media(max-width:760px){.chill-say{right:8px;bottom:322px;width:170px}.chill-say::after{left:auto;right:40px;bottom:-7px;transform:rotate(-45deg)}}