.art-stage{height:460px!important;isolation:isolate;background:radial-gradient(ellipse at 50% 15%,#314a50 0,#101a20 60%)!important;overflow:hidden}.venue-lights{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 23%,#a1e5c80c 24% 25%,transparent 26% 49%);pointer-events:none}.venue-lights:before,.venue-lights:after{content:'';position:absolute;top:-30px;width:160px;height:370px;background:linear-gradient(#a1e5c84d,transparent);clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);transform:rotate(25deg);transform-origin:top;left:8%}.venue-lights:after{left:auto;right:8%;transform:rotate(-25deg);background:linear-gradient(#e8a5794d,transparent)}.venue-stage{position:absolute;inset:0 6% 140px;border-bottom:18px solid #2a3b42;border-radius:0 0 50% 50%;background:linear-gradient(transparent 70%,#24383e)}.venue-sign{position:absolute;top:20px;left:0;right:0;text-align:center;color:#a1e5c8;font-size:13px;font-weight:800;letter-spacing:7px;text-shadow:0 0 25px #a1e5c880}#venue-dj{position:absolute;top:57px;left:calc(50% - 48px);width:96px;height:135px}#venue-dj-name{position:absolute;top:48px;left:10%;width:80%;text-align:center;color:#c3d3d1;font-size:10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.art-stage .record,body.visual-mode .art-stage .record{position:absolute;top:172px;left:calc(50% - 43px);margin:0;width:86px;height:86px;z-index:2;box-shadow:0 2px 6px #0009}.art-stage .record-label{width:45%;height:45%}.art-stage .record-label>span{font-size:13px}.art-stage .record-label>span>span{font-size:3px}.art-stage .record-label i{width:5px;height:5px}.art-stage .record-shadow,.art-stage .frequency-mark,.art-stage .stage-number{display:none}.venue-avatar{width:100%;height:100%}.venue-avatar svg{width:100%;height:100%;overflow:visible}#venue-crowd{position:absolute;top:295px;bottom:28px;left:5%;right:5%;display:flex;justify-content:center;align-content:flex-start;flex-wrap:wrap;gap:0 4px;overflow:hidden;z-index:3}.venue-guest{width:44px;height:68px;position:relative;flex-shrink:0}.venue-guest .venue-avatar{height:58px;animation:venue-sway 2.2s ease-in-out infinite alternate;animation-delay:var(--delay)}.venue-name{display:block;text-align:center;font-size:7px;line-height:10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#b8cdcf}.venue-guest:nth-child(2n){margin-top:8px}#venue-attendance{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:9px;letter-spacing:1px;color:#82969b;z-index:4}.art-stage #spectrum{height:42px!important;bottom:150px;opacity:.6;z-index:1;pointer-events:none}.art-stage.has-video .venue-stage,.art-stage.has-video .venue-lights,.art-stage.has-video #venue-crowd,.art-stage.has-video #venue-attendance{visibility:hidden}.song-wars .art-stage{background:radial-gradient(ellipse at 50% 15%,#5c2031,#190b13 65%)!important}.song-wars .venue-sign{color:#ff7a8e}.song-wars .venue-stage{border-color:#612638;background:linear-gradient(transparent 70%,#471b2b)}#avatar-dialog{width:min(720px,94vw);max-height:88dvh;overflow:auto;background:#17242b;color:#edf0e8;border:1px solid #426068;border-radius:12px;padding:24px}#avatar-dialog h2{margin:8px 0;font-size:25px}.avatar-summary{display:flex;gap:22px;align-items:center;padding:12px 0 20px}.avatar-summary>div:last-child{flex:1;min-width:0}#avatar-preview{width:95px;height:132px;background:radial-gradient(#52726b50,transparent);flex-shrink:0}#avatar-balance{display:block;font-size:14px}#avatar-progress{display:block;width:100%;height:8px;margin:14px 0 7px;accent-color:#a1e5c8}#avatar-next{color:#9fb8bb}#avatar-tones{display:flex;gap:10px;margin-top:15px}.skin-tone{width:30px;height:30px;border:2px solid transparent;border-radius:50%;cursor:pointer}.skin-tone[aria-pressed=true]{outline:2px solid #edf0e8;outline-offset:3px}.shop-heading{display:flex;justify-content:space-between;align-items:center}.shop-heading h3{font-size:14px;letter-spacing:1px}.shop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.shop-item{display:flex;flex-direction:column;align-items:center;gap:10px;background:#203139;border:1px solid #3a5158;border-radius:8px;padding:14px 8px}.shop-item .venue-avatar{width:70px;height:98px}.shop-item strong{font-size:11px;text-align:center}.shop-buy{width:100%;min-height:36px;background:#a1e5c8;color:#142329;border:0;border-radius:5px;font-weight:700;font-size:11px;cursor:pointer}.shop-buy:disabled{opacity:.45;cursor:default}.shop-group{margin-top:20px}.song-wars #avatar-dialog{background:#250f19;border-color:#76324c}.song-wars .shop-item{background:#371522;border-color:#6d3045}.song-wars .shop-buy{background:#ff7a8e}body.visual-mode .art-stage{min-height:460px}.header-right{flex-wrap:wrap}.topbar{height:auto;min-height:90px;padding-top:12px;padding-bottom:12px}@keyframes venue-sway{from{transform:rotate(-3deg) translateY(0)}to{transform:rotate(3deg) translateY(-3px)}}@media(max-width:700px){.header-right{max-width:220px;justify-content:flex-end}.art-stage{height:460px!important}.venue-sign{letter-spacing:4px}.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#avatar-dialog{padding:18px}.avatar-summary{gap:10px}.venue-guest{width:35px;height:62px}.venue-guest .venue-avatar{height:52px}#venue-crowd{left:2%;right:2%}.topbar .brand{font-size:17px}.topbar{gap:8px}.header-right .tag{display:none}}@media(prefers-reduced-motion:reduce){.venue-guest .venue-avatar{animation:none}}

#venue-crowd{overflow-y:auto;scrollbar-width:thin}.venue-guest .venue-avatar{animation-play-state:paused}.venue-playing .venue-guest .venue-avatar{animation-play-state:running}
@media(max-width:700px){.topbar .brand{width:100%}.header-right{max-width:none;width:100%;justify-content:space-between;flex-wrap:nowrap}.header-right #help{flex-shrink:0}.topbar{padding-top:14px;padding-bottom:14px}}
/* Compact player controls and dual-deck booth. */
main{padding-top:25px}.intro{margin-bottom:22px}.intro h1{margin-top:8px;margin-bottom:10px}.player-card>.transport{display:grid;grid-template-columns:1fr auto 1fr;padding:12px 20px}.transport-left{grid-column:2;justify-content:center}.transport>.volume-label{grid-column:3;justify-self:end}.player-card>.action-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:0;padding:8px 16px 14px;border-bottom:1px solid var(--line)}.player-card>.action-strip button{flex:1 1 105px;font-size:10px;padding:11px 8px;min-height:38px}.player-card>.history{padding:12px 24px}.track-heading{padding-top:17px;padding-bottom:10px}.timeline{padding-top:0}.art-stage,body.visual-mode .art-stage{height:340px!important;min-height:340px}.venue-stage{bottom:90px;border-bottom-width:12px}.venue-sign{top:14px;font-size:11px}#venue-dj-name{top:35px}#venue-dj{top:42px;left:calc(50% - 43px);width:86px;height:120px}.art-stage .record,body.visual-mode .art-stage .record{top:158px;width:64px;height:64px;left:calc(50% - 136px);z-index:2}.art-stage .record-secondary,body.visual-mode .art-stage .record-secondary{left:calc(50% + 72px)}.venue-playing .record-secondary{animation:spin 6s linear infinite reverse}.art-stage #spectrum{bottom:88px;height:28px!important}#venue-crowd{top:249px;bottom:23px}.venue-guest{height:62px}.venue-guest .venue-avatar{height:52px}.venue-guest:nth-child(2n){margin-top:2px}#venue-attendance{bottom:6px;font-size:8px}.venue-lights:before,.venue-lights:after{height:290px}.shop-item small{font-size:10px;color:#b8ccce}
@media(max-width:700px){.player-card>.transport{grid-template-columns:1fr auto 1fr;padding:12px 10px;gap:5px}.transport-left{gap:10px}.transport>.volume-label{gap:4px}.transport>.volume-label input{width:42px}.transport>.volume-label>span{display:none}.player-card>.action-strip button{flex:1 1 28%;font-size:9px;padding:10px 5px}.art-stage .record,body.visual-mode .art-stage .record{width:47px;height:47px;top:168px;left:calc(50% - 98px)}.art-stage .record-secondary,body.visual-mode .art-stage .record-secondary{left:calc(50% + 51px)}.intro{margin-bottom:16px}.intro h1{font-size:25px}main{padding-top:18px}.art-stage{margin-left:12px;margin-right:12px}.player-card>.history{padding:10px 16px}}
.song-wars .player-card>.action-strip{display:none}

/* Touch-friendly listening volume; leave transport centered above it. */
@media(max-width:700px),(pointer:coarse){.player-card>.transport{grid-template-columns:1fr;gap:8px}.player-card>.transport .transport-left{grid-column:1;grid-row:1;justify-self:center}.player-card>.transport>.volume-label{grid-column:1;grid-row:2;justify-self:stretch;display:flex;width:100%;box-sizing:border-box;gap:12px;padding:0 12px;min-height:48px}.player-card>.transport>.volume-label input{display:block;flex:1;min-width:0;width:100%;height:44px;margin:0;touch-action:pan-y;cursor:pointer}.player-card>.transport>.volume-label>span{display:inline!important}.player-card>.transport>.volume-label>span:last-child{min-width:42px;text-align:center;font-size:12px}.volume-label input::-webkit-slider-thumb{width:28px;height:28px;border:3px solid #edf0e8;border-radius:50%;background:#e8a579}.volume-label input::-moz-range-thumb{width:24px;height:24px;border:3px solid #edf0e8;border-radius:50%;background:#e8a579}}

#request-provider{display:block;width:100%;padding:12px;margin:6px 0 15px;background:#203139;color:#edf0e8;border:1px solid #536c73;border-radius:5px;min-height:44px}

/* Explore and lifetime Song Wars scores */
#explore{flex-shrink:0}.topbar{gap:16px}#room-page[hidden],#explore-lobby[hidden]{display:none!important}
#explore-lobby{max-width:1224px;margin:48px auto;padding:24px}.lobby-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.lobby-heading p,#lobby-status,.lobby-room p{color:#82969b}#lobby-rooms{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:20px;margin-top:24px}.lobby-room{padding:24px;border:1px solid #304046;border-radius:12px;background:#1a252a;min-width:0}.lobby-room h2,.lobby-track{overflow-wrap:anywhere}.lobby-room button{min-height:44px;width:100%;margin-top:16px}.wars-leaderboard{margin:24px 0;padding-top:16px;border-top:1px solid #ffffff25}.leaderboard-scroll{overflow:auto}.wars-leaderboard table{width:100%;border-collapse:collapse;font-size:13px}.wars-leaderboard th,.wars-leaderboard td{text-align:left;padding:12px 7px;border-bottom:1px solid #ffffff18}.wars-leaderboard td:first-child{overflow-wrap:anywhere;min-width:100px}.wars-leaderboard select{margin:10px 0;min-height:44px}.in-lobby .topbar{background:#1a252a}.in-lobby{--accent:#a1e5c8}
@media(max-width:650px){.topbar{flex-wrap:wrap;padding:12px;gap:10px}.topbar .header-right{flex-wrap:wrap;justify-content:center;width:100%}#explore-lobby{margin:12px auto;padding:16px}.lobby-heading{align-items:flex-start;flex-direction:column}.lobby-heading h1{font-size:28px}}

#room-name{display:block;max-width:240px;overflow-wrap:anywhere}.in-lobby{background:#141c20;color:#edf0e8}.in-lobby .ambient{background:none}.in-lobby .primary{background:#a1e5c8;color:#141c20;border-color:#a1e5c8}.in-lobby .eyebrow,.in-lobby .text-button{color:#a1e5c8}.in-lobby .brand img{filter:none}#explore-lobby h1{font-size:clamp(28px,4vw,42px)}

.room-navigation{display:flex;align-items:center;gap:8px;flex-shrink:0}
@media(max-width:700px),(pointer:coarse){
 .topbar{flex-wrap:wrap;height:auto;gap:14px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
 .topbar>.brand{order:0;width:100%}.topbar>.header-right{order:1;width:100%;max-width:none;justify-content:space-between;flex-wrap:wrap}
 .topbar>.room-navigation{order:2;width:100%;justify-content:center;border-top:1px solid var(--line);padding-top:10px}
 .room-navigation button{flex:1}body.discord-activity .topbar{padding-top:max(80px,calc(env(safe-area-inset-top,0px) + 64px))}
}

/* Personal progress lives beside the wardrobe button. */
.header-avatar{display:flex;align-items:center;gap:14px;min-width:0}.header-progression{min-width:158px;max-width:240px}.header-balances{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:11px}.header-balances strong{color:var(--white);white-space:nowrap}#header-coins{color:#e8a579;overflow-wrap:anywhere;text-align:right}#header-xp{display:block;width:100%;height:7px;margin:7px 0 5px;border:0;border-radius:8px;overflow:hidden;appearance:none;background:#304046;accent-color:var(--accent)}#header-xp::-webkit-progress-bar{background:#304046;border-radius:8px}#header-xp::-webkit-progress-value{background:var(--accent);border-radius:8px}#header-xp::-moz-progress-bar{background:var(--accent);border-radius:8px}#header-xp-label{display:block;color:var(--muted);font-size:9px;line-height:1.4}
@media(min-width:701px) and (max-width:1250px){.topbar{flex-wrap:wrap}.topbar>.header-right{margin-left:auto;justify-content:flex-end}}
@media(max-width:700px),(pointer:coarse){.header-avatar{width:100%;justify-content:space-between;gap:12px}.header-progression{flex:1;min-width:0;max-width:none}.header-balances{flex-wrap:wrap;gap:3px 8px}.header-right{row-gap:14px}}

/* Both sides of the header use the same control sizing, type and interaction states. */
.topbar {
  --nav-bg:#20332f;--nav-border:#6da98f;--nav-text:#baf4db;--nav-hover:#2d493f;
  --nav-highlight:#a1e5c8;--nav-glow:126 236 190;--nav-height:44px;
}
.song-wars:not(.in-lobby) .topbar {
  --nav-bg:#401723;--nav-border:#a84b61;--nav-text:#ffd5de;--nav-hover:#602338;
  --nav-highlight:#ff99ab;--nav-glow:255 133 157;
}
.topbar .room-nav-button {
  min-height:var(--nav-height);padding:10px 12px;box-sizing:border-box;white-space:nowrap;
  font-size:14px;font-weight:650;border:1px solid var(--nav-border);border-radius:6px;
  color:var(--nav-text);background:var(--nav-bg);touch-action:manipulation;
}
.topbar .room-nav-button:hover:enabled {background:var(--nav-hover);border-color:var(--nav-highlight)}
.topbar .room-nav-button:focus-visible {outline:2px solid var(--nav-highlight);outline-offset:3px}
.topbar .header-help {min-width:var(--nav-height)}
.topbar .header-right {column-gap:8px}
.topbar :is(.customize-avatar, .header-help) {position:relative;flex-shrink:0}
:is(.customize-avatar, .header-help):enabled::after {
  content:"";position:absolute;inset:-1px;pointer-events:none;border-radius:inherit;
  box-shadow:0 0 2px 1px rgb(var(--nav-glow) / .55),0 0 12px 2px rgb(var(--nav-glow) / .55);
  opacity:.65;
}
@media(prefers-reduced-motion:no-preference) {
  :is(.customize-avatar, .header-help):enabled::after {animation:customize-glow 2.8s ease-in-out infinite alternate}
  @keyframes customize-glow {from {opacity:.18}to {opacity:.95}}
}
@media(max-width:700px),(pointer:coarse) {.topbar {--nav-height:48px}}


/* Match player controls to the header's filled and outlined buttons. */
.player-card,#radio-sidebar,#visual-toolbar{--control-bg:#20332f;--control-border:#6da98f;--control-text:#baf4db;--control-hover:#2d493f;--control-fill:#a1e5c8;--control-fill-text:#142329;--control-fill-hover:#b7f2da}
.song-wars .player-card,.song-wars #visual-toolbar{--control-bg:#401723;--control-border:#a84b61;--control-text:#ffd5de;--control-hover:#602338;--control-fill:#db3049;--control-fill-text:#fff;--control-fill-hover:#ed4059}
.player-card .action-strip button,.player-card .transport button,.player-card .repeat-controls button,.player-card #video-toggle,#radio-sidebar .player-tool-button,#visual-toolbar #exit-visuals{background:var(--control-bg);border:1px solid var(--control-border);border-radius:6px;color:var(--control-text);font-weight:650;min-height:44px;touch-action:manipulation}
.player-card .action-strip button{font-size:12px;padding:12px 14px;flex:1 1 145px;white-space:normal;line-height:1.35}
.player-card .action-strip button>span{color:inherit}.player-card .action-strip{gap:8px}
.player-card .transport button,.player-card .repeat-controls button{width:44px;height:44px;padding:0;flex-shrink:0}.player-card .transport #play{width:50px;height:50px}
.player-card .repeat-controls{gap:8px;flex-shrink:0}.player-card .repeat-controls button{font-size:24px}.player-card .track-heading>div:first-child{min-width:0}
.player-card .action-strip button:hover:not(:disabled),.player-card .transport button:hover:not(:disabled),.player-card .repeat-controls button:hover:not(:disabled),.player-card #video-toggle:hover:not(:disabled),#radio-sidebar .player-tool-button:hover:not(:disabled),#visual-toolbar #exit-visuals:hover{background:var(--control-hover)}
.player-card #request,.player-card .transport #play,.player-card .repeat-controls button[aria-pressed=true]{background:var(--control-fill);border-color:var(--control-fill);color:var(--control-fill-text)}
.player-card #request:hover:not(:disabled),.player-card .transport #play:hover:not(:disabled),.player-card .repeat-controls button[aria-pressed=true]:hover:not(:disabled){background:var(--control-fill-hover)}
#radio-sidebar .player-tool-button{font-size:11px;padding:10px 12px}#radio-sidebar .queue-tools{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}#radio-sidebar .queue-head{gap:12px;flex-wrap:wrap}.player-card #video-toggle{font-size:11px;padding:10px 12px}
@media(max-width:700px),(pointer:coarse){.player-card>.action-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px 14px 16px}.player-card>.action-strip button{font-size:12px;padding:12px 8px;min-height:48px}.player-card .transport button,.player-card .repeat-controls button{width:46px;height:46px;min-height:46px}.song-wars .player-card>.action-strip{display:none}}

/* Visuals is the stage/video alone, filling the Activity viewport. */
.venue-scene{display:contents}
body.visual-mode{overflow:hidden}
body.visual-mode #room-page{position:fixed;inset:0;width:100%;height:100%;padding:0;max-width:none;overflow:hidden}
body.visual-mode .player-card{min-height:0;height:100%;overflow:visible}
body.visual-mode .track-heading,body.visual-mode .timeline,body.visual-mode .transport{display:none!important}
body.visual-mode #art-stage{position:fixed;inset:0;width:100%;height:100dvh!important;min-height:0!important;max-height:none;margin:0;border:0;border-radius:0}
body.visual-mode .venue-scene{display:block;position:absolute;left:50%;top:50%;width:var(--scene-width,760px);height:340px;transform:translate(-50%,-50%) scale(var(--scene-scale,1));transform-origin:center;pointer-events:none}
body.visual-mode #visual-toolbar{background:transparent;border:0;pointer-events:none;padding:calc(12px + env(safe-area-inset-top,0px)) calc(14px + env(safe-area-inset-right,0px));isolation:auto}
body.visual-mode #visual-toolbar #exit-visuals{pointer-events:auto;box-shadow:0 3px 14px #0006;background:#20332fee}
body.visual-mode #video-toggle{top:calc(68px + env(safe-area-inset-top,0px));right:calc(14px + env(safe-area-inset-right,0px));z-index:6}
body.visual-mode #video{width:100%;height:100%;object-fit:contain}
@media(max-width:700px),(pointer:coarse){body.discord-activity.visual-mode #visual-toolbar{padding-top:max(80px,calc(env(safe-area-inset-top,0px) + 64px))}body.discord-activity.visual-mode #video-toggle{top:max(136px,calc(env(safe-area-inset-top,0px) + 120px))}}
body.visual-mode .player-card>.transport{display:flex!important;position:fixed;flex-direction:column;align-items:center;left:0;right:0;top:var(--visual-controls-top,60%);bottom:auto;z-index:20;width:100%;pointer-events:none;max-width:none;margin:0;padding:0;gap:0;background:transparent}
body.visual-mode .transport>.volume-label{display:none!important}body.visual-mode .transport-left{display:flex;gap:10px;align-items:center;justify-content:center}
body.visual-mode:has(#art-stage.has-video) .player-card>.transport{top:auto;bottom:calc(20px + env(safe-area-inset-bottom,0px))}
body.visual-mode .transport button{box-shadow:0 2px 10px #0005}

.shop-item.signature-item{border:1px solid #a1e5c8;background:linear-gradient(145deg,#29483f,#17282e);box-shadow:inset 0 0 18px #a1e5c815}.shop-item.signature-item strong{color:#a1e5c8}.shop-item small{text-align:center;line-height:1.5}.song-wars .signature-item{background:linear-gradient(145deg,#4d2335,#23121b);border-color:#ff8796}

#quality-control:not([hidden]){position:absolute;top:12px;left:12px;z-index:6;display:flex;align-items:center;gap:6px;background:#172326ef;color:#dcf7ec;border:1px solid var(--control-border);border-radius:6px;padding-left:8px;font-size:11px}
#quality-control select{width:auto;min-height:44px;padding:4px;background:transparent;border:0;color:inherit;cursor:pointer}
#quality-control option{background:#172326;color:#dcf7ec}
body.visual-mode #quality-control{top:calc(68px + env(safe-area-inset-top,0px));left:calc(12px + env(safe-area-inset-left,0px))}
body.discord-activity.visual-mode #quality-control{top:max(136px,calc(env(safe-area-inset-top,0px) + 120px))}

body.visual-mode #hide-transport{position:absolute;z-index:7;right:calc(14px + env(safe-area-inset-right,0px));top:calc(118px + env(safe-area-inset-top,0px));padding:7px 10px;font-size:11px;background:var(--control-bg);color:var(--control-text);border:1px solid var(--control-border);border-radius:6px}
body.discord-activity.visual-mode #hide-transport{top:max(186px,calc(env(safe-area-inset-top,0px) + 170px))}
body.visual-mode.transport-hidden .player-card>.transport{display:none!important}

/* The scene has one design coordinate system for the player, compact view and Fullscreen. */
#art-stage {
  --light-a:#88d7c4; --light-b:#deb181;
  background:radial-gradient(ellipse at 50% 30%,#304447 0,#18282d 48%,#0c161c 90%)!important;
}
.song-wars #art-stage {
  --light-a:#ff7186; --light-b:#eda57c;
  background:radial-gradient(ellipse at 50% 30%,#53303b 0,#301b25 48%,#170d15 90%)!important;
}
#art-stage .venue-scene {
  --deck-top:190px;--display-top:1px;--crowd-top:325px;
  display:block;position:absolute;left:50%;top:50%;width:var(--scene-width,100%);height:400px;
  transform:translate(-50%,-50%) scale(var(--scene-scale,1));transform-origin:center;
}
body.visual-mode #art-stage .venue-scene {top:calc(50% - var(--scene-offset,0px))}
#art-stage .venue-lights {
  background:radial-gradient(ellipse at 50% 55%,#d5f9f509,transparent 58%),
    repeating-linear-gradient(90deg,#ffffff03 0 1px,transparent 1px 18px);
}
#art-stage .venue-lights::before,#art-stage .venue-lights::after {
  top:0;width:36%;height:260px;left:9%;clip-path:polygon(42% 0,54% 0,100% 100%,0 100%);
  transform:rotate(16deg);background:linear-gradient(var(--light-a),transparent);opacity:.21;
}
#art-stage .venue-lights::after {left:auto;right:9%;transform:rotate(-16deg);background:linear-gradient(var(--light-b),transparent)}
#art-stage .venue-stage {
  inset:0 0 auto;height:319px;border:0;border-radius:0;
  background:radial-gradient(ellipse 46% 8% at 50% 92%,#02070acc,transparent),
    linear-gradient(transparent 57%,#17242b 88%,#0b161b 97%,#475957 97.6%,transparent 99%);
}
/* Perforated PA cabinets flank the console. */
#art-stage .venue-stage::before,#art-stage .venue-stage::after {
  content:"";position:absolute;bottom:25px;width:clamp(26px,6%,46px);height:100px;left:4%;border:2px solid #3d484d;border-radius:4px;
  background:radial-gradient(#080b0c99 .65px,transparent .86px) 0 0 / 2.5px 2.5px,
    radial-gradient(circle at 50% 29%,#172128 0 7%,#435056 8%,#121a20 13%,#596165 14%,transparent 15%),
    radial-gradient(circle at 50% 69%,#354146 0 8%,#172329 9% 14%,#303c41 17%,#11181e 22%,#61686a 23%,transparent 24%),
    linear-gradient(105deg,#202a30,#0d1318);
  box-shadow:inset 0 1px 0 #87908e55,3px 4px 6px #0007;transform:rotate(-2deg);
}
#art-stage .venue-stage::after {left:auto;right:4%;transform:rotate(2deg)}
#art-stage #venue-dj {
  position:absolute;inset:calc(0px - var(--roof-extra,0px)) 2% auto;
  width:auto;height:calc(var(--deck-top) + var(--display-top) + var(--roof-extra,0px));
}
#venue-dj [data-part="shadow"] {display:none}
#art-stage #venue-dj-name {
  position:absolute;inset:auto 3px 1px;width:auto;
  font:600 9px/11px system-ui,sans-serif;color:#e3f4ee;
  border-top:1px solid #536365;background:#182326;border-radius:0 0 2px 2px;
}
#art-stage .controller-display {top:var(--display-top);height:calc(28.5714% + 12px)}
#art-stage .controller-display::before {bottom:calc(7% + 12px)}
#art-stage .dj-controller {
  position:absolute;z-index:2;left:50%;top:var(--deck-top);width:min(80%,436px);aspect-ratio:640/252;
  transform:translateX(-50%);filter:drop-shadow(0 6px 4px #03060999);pointer-events:none;
}
/* The records and controls share the tilted surface. The display faces the audience. */
.controller-surface {
  position:absolute;inset:0;transform-origin:50% 0;transform:perspective(1800px) rotateX(45deg);
}
.controller-display {
  position:absolute;left:35.15625%;top:.79%;width:29.6875%;height:28.5714%;border-radius:4px;
  background:linear-gradient(150deg,#69787d,#232c31 35%,#465153 88%,#181e21);
  box-shadow:0 2px 3px #03060899;
}
.controller-display::before {
  content:"";position:absolute;inset:9% 4%;border-radius:2px;
  background:#0a131b;border:1px solid #36464a;
}
.controller-face {display:block;width:100%;height:100%;user-select:none}
:is(#art-stage,.deck-demo) .dj-controller .record {
  position:absolute;inset:33.3333% auto auto 8.90625%;width:16.5625%;height:auto;aspect-ratio:1;margin:0;
  border:1px solid #121519;box-shadow:0 0 0 1px #8d9294,0 1px 3px #000c;
  background:repeating-radial-gradient(circle,#181a1e 0 1px,#35383b 1.35px,#15181b 1.8px,#1b1d20 2.5px);
  animation:spin 8s linear infinite;animation-play-state:paused;
}
:is(#art-stage,.deck-demo) .dj-controller .record-secondary {left:74.53125%;animation-duration:10s;animation-direction:reverse}
#art-stage.venue-playing .dj-controller .record {animation-play-state:running}
:is(#art-stage,.deck-demo) .dj-controller .record-lines {background:conic-gradient(from -35deg,transparent,#ffffff2c 36deg,transparent 67deg,transparent 165deg,#e8ded826 207deg,transparent 246deg)}
:is(#art-stage,.deck-demo) .dj-controller .record-label {
  inset:32%;width:auto;height:auto;box-shadow:0 0 0 2px #0c1114,0 0 0 3px #99c0b4;
  background:linear-gradient(135deg,#d3eee2,#76b7ab);
}
:is(#art-stage,.deck-demo) .dj-controller .record-secondary .record-label {box-shadow:0 0 0 2px #0c1114,0 0 0 3px #c59a79;background:linear-gradient(135deg,#f1d6ab,#c68f68)}
:is(#art-stage,.deck-demo) .dj-controller .record-label span {font-size:8px;letter-spacing:-.3px;transform:none}
:is(#art-stage,.deck-demo) .dj-controller .record-label span span {display:none}
:is(#art-stage,.deck-demo) .dj-controller .record-label i {width:2px;height:2px;top:70%;left:49%;border:0}
:is(#art-stage,.deck-demo) .dj-controller .deck-wave {
  position:absolute;left:37.1%;top:4.36%;width:25.8%;height:21.43%!important;bottom:auto;opacity:1;z-index:2;
}
:is(#art-stage,.deck-demo) .dj-controller .venue-mixer {
  position:absolute;left:50%;top:92.1%;width:28%;height:6%;min-height:0;transform:translateX(-50%);padding:0;
  border:0;background:none;color:#bed6ce;display:grid;place-items:center;
}
:is(#art-stage,.deck-demo) .dj-controller .venue-mixer b {font:600 6px/1 Arial,sans-serif!important;letter-spacing:1.2px!important;text-transform:uppercase}
#art-stage #venue-crowd {top:var(--crowd-top);bottom:18px}
#art-stage .venue-guest {height:52px}
#art-stage .venue-guest .venue-avatar {height:42px}
#art-stage #venue-attendance {bottom:4px}
body.visual-mode #art-stage #venue-crowd {
  top:max(var(--crowd-top),var(--crowd-clearance,0px));bottom:calc(18px - var(--scene-extra,0px));pointer-events:auto;
}
body.visual-mode #art-stage #venue-attendance {bottom:calc(4px - var(--scene-extra,0px))}
#art-stage.has-video .venue-scene {visibility:hidden}
@media (prefers-reduced-motion:reduce) {
  #art-stage.venue-playing .dj-controller .record {animation-play-state:paused}
}


body.visual-mode .transport-left,body.visual-mode .transport>.seek-slider {pointer-events:auto}
body.visual-mode .transport>.seek-slider {width:100%;height:24px;margin:0;background:transparent}
body.visual-mode .seek-slider::-webkit-slider-runnable-track {height:3px;background:linear-gradient(to right,var(--control-fill) var(--played),#435057 var(--played))}
body.visual-mode .seek-slider::-webkit-slider-thumb {width:11px;height:11px;margin-top:-4px;background:var(--control-fill);border:1px solid #172329}
body.visual-mode .seek-slider::-moz-range-track {height:3px;background:#435057}
body.visual-mode .seek-slider::-moz-range-progress {height:3px;background:var(--control-fill)}
body.visual-mode .seek-slider::-moz-range-thumb {width:9px;height:9px;background:var(--control-fill);border:1px solid #172329}
@media(pointer:coarse) {body.visual-mode .transport>.seek-slider {height:32px}}
body.visual-mode .transport > .time-row {
  align-self:stretch;align-items:center;margin:0;
  padding:0 max(8px,env(safe-area-inset-right)) 2px max(8px,env(safe-area-inset-left));
  font-size:11px;line-height:1.3;font-variant-numeric:tabular-nums;color:#edf0e8;
}
body.visual-mode .transport > .time-row #remaining {display:none}
body.visual-mode .transport > .time-row :is(#elapsed,#duration) {
  padding:1px 5px;border-radius:3px;background:#10171ddb;
}

/* Keep the fitting stage in view while the wardrobe scrolls. */
#avatar-dialog {
  width:min(1160px,96vw); height:min(840px,91dvh); max-height:94dvh;
  padding:clamp(12px,2vw,24px); overflow:hidden;
}
#avatar-dialog[open] {display:flex; flex-direction:column}
#avatar-dialog .dialog-head {flex:none; margin-bottom:12px}
.wardrobe-layout {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(10px,2vw,24px); flex:1; min-height:0}
.avatar-stage {
  position:relative; isolation:isolate; min-width:0; overflow:hidden; border:1px solid #39575b; border-radius:8px;
  background:radial-gradient(ellipse at 48% 40%,#395459 0%,#21363d 48%,#142329 85%);
}
.avatar-stage::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg,transparent 20%,#a1e5c80a 21%,transparent 46%);
}
#avatar-preview {
  position:absolute; inset:0 0 48px; width:auto; height:auto; display:grid; place-items:center;
  background:none; touch-action:none; cursor:grab; user-select:none; container-type:size; overflow:hidden;
  grid-template:100% / 100%;
}
#avatar-preview.dragging {cursor:grabbing}
#avatar-preview:focus-visible {outline:2px solid var(--accent); outline-offset:-4px}
.avatar-figure {
  position:relative; width:min(114cqw,72.727cqh); aspect-ratio:112 / 154; grid-area:1 / 1; justify-self:center; pointer-events:none;
  transform:translateY(clamp(calc(-52cqh + 50%),var(--avatar-lift,0px),calc(52cqh - 50%)));
}
.avatar-figure::before {
  content:''; position:absolute; left:17%; width:66%; height:5%; bottom:2%; border-radius:50%;
  background:radial-gradient(ellipse,#070d12a8,transparent 70%);
}
#avatar-preview canvas,.avatar-figure>.venue-avatar {position:absolute; inset:0; width:100%; height:100%; object-fit:contain}
.model-unavailable .avatar-turntable {display:none}
.avatar-turntable {position:absolute; bottom:6px; inset-inline:6px; display:flex; align-items:center; justify-content:center; gap:10px; color:#d3e5e3; font-size:12px}
.avatar-turntable button {width:40px; height:40px; border-radius:50%; border:1px solid #64827e; background:#18282d; color:#baf4de; font-size:20px; cursor:pointer}
.wardrobe-editor {min-width:0; overflow:auto; overscroll-behavior:contain; padding:0 6px 4px 0; scrollbar-color:#587078 transparent}
.wardrobe-editor .avatar-summary {padding:0 0 6px}

.wardrobe-controls {display:flex; align-items:center; gap:8px; margin-top:10px}
.wardrobe-controls #avatar-tones {margin:0; flex-wrap:wrap; gap:6px; padding:3px}
.wardrobe-controls label {min-width:0; width:clamp(88px,14vw,180px); font-size:11px; color:#b3c7c9}
.wardrobe-controls select {display:block; width:100%; margin-top:2px; min-height:34px; padding:4px; border:1px solid #536c73; border-radius:5px; color:#edf0e8; background:#23383f; text-overflow:ellipsis}
@media(max-width:650px) {
  .wardrobe-controls #avatar-tones {flex:1; gap:4px}
  .wardrobe-controls .skin-tone {width:24px;height:24px}
  .wardrobe-controls label {width:45%}
}
.song-wars .avatar-stage {background:radial-gradient(ellipse at 48% 40%,#673348,#381924 55%,#230f18); border-color:#75364a}
.song-wars .avatar-turntable button {background:#381822; color:#ffc4cd; border-color:#99526a}
@media(max-width:650px) {
  #avatar-dialog {width:98vw; padding:10px}
  #avatar-dialog .dialog-head {margin-bottom:8px}
  .wardrobe-layout {grid-template-columns:minmax(0,.86fr) minmax(0,1fr); gap:8px}
  
  .wardrobe-editor .shop-grid {grid-template-columns:1fr}
  .avatar-turntable {gap:4px; flex-wrap:wrap}
  .avatar-turntable span {order:-1; flex-basis:100%; text-align:center}
  #avatar-preview {bottom:65px}
}

#avatar-try-on:not([hidden]) {
  position:absolute; top:6px; inset-inline:6px; display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:3px 8px; padding:4px 6px; border-radius:6px; background:#142026ed; color:#e7f4ee; font-size:12px; text-align:center;
}
#avatar-restore,.shop-preview {
  border:1px solid #64827e; border-radius:5px; color:#c5f1de; background:#1c3035;
  padding:5px 10px; min-height:34px; font-weight:600; cursor:pointer;
}
.shop-preview[aria-pressed="true"] {background:#a1e5c8;color:#142329}
.song-wars .shop-preview,.song-wars #avatar-restore {border-color:#985366;background:#3b1d2a;color:#ffd8df}
.song-wars .shop-preview[aria-pressed="true"] {background:#ffc4cd;color:#381822}
@media(pointer:coarse) {.shop-preview,#avatar-restore {min-height:44px}}

.shop-item .venue-avatar {width:min(100%,130px);height:90px;overflow:hidden;border-radius:6px;background:radial-gradient(ellipse at 45% 35%,#425a5e,#25363b)}
.shop-item .venue-avatar svg {overflow:hidden}
.song-wars .shop-item .venue-avatar {background:radial-gradient(ellipse at 45% 35%,#6a4757,#38252e)}

.customize-tabs {display:flex;gap:4px;align-self:flex-start;border:1px solid #465b61;border-radius:8px;padding:3px;margin:0 0 12px;background:#111d22}
.customize-tabs button,#deck-restore {border:0;border-radius:5px;color:#c3d4d4;background:transparent;padding:7px 16px;cursor:pointer;font:inherit;font-size:13px}
.customize-tabs [aria-pressed=true] {background:var(--accent,#a1e5c8);color:#122025;font-weight:700}
#avatar-dialog.editing-deck :is(.avatar-stage,#avatar-tones,.avatar-summary+.input-help) {display:none}
#deck-preview-panel:not([hidden]) {min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;border:1px solid #39575b;border-radius:8px;overflow:hidden;background:radial-gradient(ellipse at 50% 38%,#334b4e,#142127 75%)}
.deck-demo {width:94%;padding:3%;box-sizing:border-box}
.deck-demo .dj-controller {position:relative;aspect-ratio:640/252;isolation:isolate;pointer-events:none}
.deck-demo .controller-surface {transform:perspective(1200px) rotateX(15deg)}
.deck-demo .deck-wave {display:block}
#deck-preview-name {text-align:center;font-size:15px;color:#deeee7}
#deck-restore {border:1px solid #637c7b;background:#23373a}
.deck-swatch {height:76px;width:100%;display:grid;place-items:center;border-radius:5px;background:radial-gradient(ellipse at 50% 65%,#3c4c50,#152227);overflow:hidden}
.deck-swatch svg,.deck-swatch canvas {max-width:94%;max-height:86%}
.deck-swatch canvas {width:90%;background:#101920;border-radius:3px}
.sample-record {position:relative;width:60px;aspect-ratio:1;border-radius:50%;box-shadow:0 1px 4px #000,0 0 0 1px #96aba9}
.sample-record::after {content:"";position:absolute;inset:34%;border-radius:50%;background:radial-gradient(circle,#172128 0 12%,#d9d8bb 13%);box-shadow:0 0 0 1px #aaa}
.finish-chip {width:58%;height:44%;border-radius:6px;transform:skewX(-16deg);background:linear-gradient(155deg,#ffffff6b,transparent 36%,#0004),var(--finish);box-shadow:0 3px 0 #111c20}
@media(max-width:650px) {
 #avatar-dialog.editing-deck .wardrobe-layout {grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(90px,22%) minmax(0,1fr)}
 #deck-preview-panel:not([hidden]) {position:relative;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-content:center;gap:4px;padding:6px}
 #deck-preview-panel .deck-demo {grid-row:1 / 3;width:100%;max-width:220px}
 #deck-preview-name {font-size:12px}
 #deck-restore {padding:4px}
 .editing-deck .wardrobe-editor .shop-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
 
}
@media(pointer:coarse) {.customize-tabs button,#deck-restore {min-height:40px}}

.deck-mini.deck-swatch {padding:3px;width:100%;height:76px}
.deck-mini .dj-controller {width:min(100%,171px);align-self:center}
.deck-mini .controller-surface {transform:none}
.deck-mini :is(.record-label span,.venue-mixer) {visibility:hidden}
#avatar-dialog .deck-demo .venue-mixer b {white-space:nowrap}
@media(max-width:650px) {
 
}

.deck-mini .controller-face {max-width:none;max-height:none}

/* Scenery shares the stage coordinates with the DJ, without covering the player controls. */
.venue-environment {display:contents;pointer-events:none}
.sports-backdrop,.sports-lighting {position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sports-backdrop {z-index:-1}
.sports-lighting {bottom:17%}
.venue-environment svg {display:block;width:100%;height:100%}
.venue-pa {position:absolute;z-index:2;top:115px;width:9.2%;height:159px;max-width:88px;pointer-events:none;filter:drop-shadow(1px 3px 2px #06090b99)}
#art-stage .venue-pa {top:142px}
.left-pa {left:1%}.right-pa {right:1%}
#art-stage .venue-scene[data-speakers=custom] .venue-stage::before,#art-stage .venue-scene[data-speakers=custom] .venue-stage::after {display:none}
#art-stage .venue-scene[data-lights=team] .venue-lights::before,#art-stage .venue-scene[data-lights=team] .venue-lights::after {display:none}
.light-beam {transform-origin:0 0;animation:venue-beam-sweep 8s ease-in-out infinite alternate;animation-delay:var(--delay)}
@keyframes venue-beam-sweep {from {transform:rotate(-6deg)}to {transform:rotate(7deg)}}
@media(prefers-reduced-motion:reduce){.light-beam {animation:none}}
#deck-preview.preview-environment {position:relative;isolation:isolate;overflow:hidden;border:1px solid #4c6065;border-radius:6px;aspect-ratio:1.65;padding:0;display:grid;align-items:end;justify-items:center;background:radial-gradient(ellipse at top,#374b50,#162228)}
#deck-preview.preview-environment .dj-controller {width:73%;margin-bottom:7%}
#deck-preview .venue-pa {top:25%;height:60%;width:11%}
#team-filters:not([hidden]) {display:flex;gap:10px;align-items:end;margin:4px 0 12px}
#team-filters label {display:grid;gap:5px;flex:1;min-width:0;color:#b6cbcc;font-size:12px}
#team-filters label:last-child {flex:2}
#team-filters :is(select,input) {box-sizing:border-box;width:100%;min-width:0;min-height:38px;padding:6px 8px;border:1px solid #536c73;border-radius:5px;background:#23383f;color:#edf0e8}
.scenery-swatch {isolation:isolate}
.deck-swatch.scenery-swatch svg {width:100%;height:100%;max-height:none;max-width:none}
.deck-swatch.speaker-swatch {padding:4px;box-sizing:border-box}
.scenery-swatch .light-beam {animation:none}

.venue-environment .team-pennant {position:absolute;top:0;width:16%;height:32%;transform:translateX(-50%)}
.team-pennant.pennant-0 {left:13%}
.team-pennant.pennant-1 {left:87%}

#avatar-category {
  position:relative; display:grid; grid-template-columns:repeat(auto-fit,minmax(76px,1fr));
  gap:5px; margin:12px 0 8px; padding:3px;
}
.category-tile {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:56px; padding:5px; border:1px solid #40585d; border-radius:7px;
  background:#1c2c32; color:#c5d7d5; font:inherit; font-size:11px; line-height:1.15; cursor:pointer;
}
.category-tile svg {width:24px;height:24px;color:var(--accent,#a1e5c8)}
.category-tile:hover,.category-tile:focus-visible {border-color:var(--accent);outline-offset:1px}
.category-tile[aria-pressed=true] {border-color:var(--accent);background:var(--accent);color:#142329;font-weight:bold}
.category-tile[aria-pressed=true] svg {color:inherit}
.song-wars .category-tile:not([aria-pressed=true]) {background:#371824;border-color:#744053}
@media(max-width:650px) {
  #avatar-category {
    grid-template-columns:none; grid-template-rows:repeat(2,auto); grid-auto-flow:column;
    grid-auto-columns:68px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-color:#73958c transparent;
  }
}

#avatar-dialog{width:min(1320px,97vw);height:min(900px,93dvh);padding:clamp(10px,1.2vw,18px);box-sizing:border-box}
#avatar-dialog .wardrobe-layout{grid-template-columns:minmax(210px,.68fr) minmax(0,1.32fr);gap:12px}
#avatar-dialog .dialog-head,.customize-tabs{margin-bottom:6px}
.wardrobe-editor .avatar-summary{padding:0}
.wardrobe-editor #avatar-progress{margin:5px 0 2px}
.wardrobe-earnings{font-size:11px;margin:4px 0;color:#afc8c6}
.wardrobe-earnings summary{width:fit-content;cursor:pointer}
#wardrobe-dept{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
#wardrobe-dept button{border:1px solid #466069;border-radius:5px;color:inherit;background:transparent;padding:5px 9px;min-height:30px;font:inherit;font-size:12px;cursor:pointer}
#wardrobe-dept [aria-pressed=true]{background:var(--accent,#a1e5c8);border-color:transparent;color:#122025;font-weight:700}
#avatar-category{display:flex;flex-wrap:wrap;gap:4px;margin:5px 0;padding:0;overflow:visible}
#avatar-category .category-tile{flex-direction:row;min-height:32px;gap:4px;padding:3px 8px}
#avatar-category svg{width:18px;height:18px}
#team-filters:not([hidden]){flex-wrap:wrap;gap:7px;margin:4px 0}
#team-filters label,#team-filters label:last-child{flex:1 1 120px;gap:2px;font-size:11px}
#team-filters label[hidden]{display:none}
#team-filters :is(input,select){min-height:32px;text-overflow:ellipsis}
.wardrobe-controls{margin:4px 0}.wardrobe-editor .shop-group{margin:5px 0}
.wardrobe-editor .shop-heading h3{display:flex;align-items:center;gap:8px;margin:4px 0}
.result-count{color:#a8bdbd;font-size:10px;font-weight:400}
.wardrobe-editor .shop-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,134px),1fr));gap:5px}
.wardrobe-editor .shop-item{display:grid;grid-template-columns:1fr 1fr;align-content:start;align-items:center;gap:3px;padding:5px;min-width:0;border-radius:6px}
.wardrobe-editor .shop-item>:is(.venue-avatar,.deck-swatch,.wardrobe-thumb,strong,small){grid-column:1/-1;width:100%;min-width:0}
.wardrobe-editor .shop-item>:is(.venue-avatar,.deck-swatch,.wardrobe-thumb){height:64px;object-fit:contain;border-radius:4px;background:radial-gradient(ellipse at 48% 45%,#41585c,#233439)}
.wardrobe-editor .shop-item strong{align-self:start;line-height:1.15;overflow-wrap:anywhere}
.wardrobe-editor .shop-item small{font-size:10px;line-height:1.15}
.wardrobe-editor .shop-item button{width:100%;min-width:0;padding:3px 1px;min-height:30px;font-size:10px;line-height:1.1}
.wardrobe-sentinel{height:1px}
@media(max-width:650px){
 #avatar-dialog{width:98vw;height:94dvh;padding:8px}
 #avatar-dialog .wardrobe-layout,#avatar-dialog.editing-deck .wardrobe-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:clamp(100px,20dvh,170px) minmax(0,1fr);gap:5px}
 .wardrobe-editor{padding-right:2px}
 .wardrobe-editor .shop-grid,.editing-deck .wardrobe-editor .shop-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,108px),1fr))}
 #avatar-preview{inset:0 45px}
 .avatar-turntable{inset:auto 4px 4px;justify-content:space-between;pointer-events:none}
 .avatar-turntable button{pointer-events:auto}
 .avatar-turntable span{display:none}
 #avatar-try-on:not([hidden]){top:2px;inset-inline:auto 2px;max-width:32%;font-size:10px}
 #avatar-restore{font-size:10px;min-height:28px}
 .wardrobe-editor .shop-item button{min-height:36px}
}

.bundle-pieces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;width:100%;align-items:end}
.wardrobe-editor .bundle-card .bundle-pieces{grid-column:1/-1}
.bundle-piece{min-width:0;display:grid;grid-template-rows:48px auto;gap:2px;align-items:center;text-align:center}
.bundle-piece img,.bundle-piece .venue-avatar,.wardrobe-editor .shop-item .bundle-piece .venue-avatar{object-fit:contain;width:100%;height:100%;border-radius:3px;background:#24383e;overflow:hidden}
.bundle-piece span{font-size:10px;line-height:1.1;overflow-wrap:anywhere}
#bundle-preview{position:absolute;bottom:52px;left:50%;transform:translateX(-50%);width:min(80%,245px);background:#17252bef;border-radius:6px;padding:5px;color:#e4eeea;pointer-events:none}
.avatar-stage:has(#bundle-preview:not([hidden])) #avatar-preview{bottom:132px}
.wardrobe-editor .shop-grid:has(.bundle-card){grid-template-columns:repeat(auto-fill,minmax(min(100%,178px),1fr))}
@media(max-width:650px){
 #bundle-preview{width:27%;left:4px;bottom:44px;transform:none;padding:2px}
 #bundle-preview .bundle-piece{grid-template-rows:25px auto}
 #bundle-preview .bundle-piece span{font-size:8px}
 .avatar-stage:has(#bundle-preview:not([hidden])) #avatar-preview{bottom:0}
 .wardrobe-editor .shop-grid:has(.bundle-card){grid-template-columns:repeat(2,minmax(0,1fr))}
}

#avatar-dialog.show-item-detail :is(.avatar-stage,#deck-preview-panel){display:none}
#item-preview-panel:not([hidden]){
 min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:10px;padding:12px;
 border:1px solid #39575b;border-radius:8px;background:radial-gradient(ellipse at 48% 40%,#395459,#17272e 85%);
}
#item-picture{min-width:0;min-height:0;display:grid;place-items:center;overflow:hidden}
#item-picture>:is(.item-picture,.deck-swatch,.bundle-pieces){width:100%;height:100%;min-height:0}
.item-picture svg,.item-picture>img{display:block;width:100%;height:100%;overflow:hidden;object-fit:contain}
#item-picture .bundle-piece{height:100%;grid-template-rows:minmax(0,1fr) auto}
#item-picture .bundle-piece span{font-size:12px}
#item-picture .deck-mini .dj-controller{width:100%}
#item-picture .sample-record{width:auto;height:85%;max-width:95%;object-fit:contain}
.item-preview-actions{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;text-align:center}
.item-preview-actions strong{width:100%;overflow-wrap:anywhere;font-size:14px}
.item-preview-actions button,#avatar-detail,#deck-detail{padding:6px 9px;border:1px solid #64827e;border-radius:5px;color:#c5f1de;background:#1c3035;min-height:34px;cursor:pointer}
@media(max-width:650px){
 #item-preview-panel:not([hidden]){grid-template:100% / minmax(0,1fr) minmax(100px,38%);gap:6px;padding:5px}
 .item-preview-actions{gap:3px;align-content:center;max-height:100%;overflow:auto}
 .item-preview-actions strong{font-size:12px}
 .item-preview-actions button,#avatar-detail,#deck-detail{padding:3px 6px;min-height:28px;font-size:11px}
}