/* V6 · Hybrid 3D — festival polish. Always preserve Vietnamese glyph support. */
:root{--pink:#ffaacb;--pink2:#ffe3ee;--purple:#b6a5ff;--mint:#8ee2db}
.venue{background:radial-gradient(ellipse at 48% 40%,#51416f 0%,#1d1b3d 49%,#0e112a 100%)}
.venue-vignette{background:linear-gradient(180deg,#0d11232b,transparent 24%,transparent 65%,#0d0b1daa 98%),linear-gradient(90deg,#0d0a2075,transparent 34%,transparent 77%,#0d0a2080)!important}
#three-stage canvas.world-canvas{filter:saturate(1.15) contrast(1.01)}
.topbar{background:linear-gradient(110deg,#17162c 0%,#292040 50%,#15182c 100%)}
.brand-subtitle{color:#e0c5ed}.brand-symbol{filter:drop-shadow(0 0 15px #ffb5dc)}
.graphics-control{box-shadow:0 10px 26px #11091baa,0 0 25px #ffc8f51f}
.world-label{color:#ffe5f6!important}
.hero-title-v2{filter:drop-shadow(0 2px 24px #27123a);opacity:.92}
.map-panel{border:1px solid #d8b3e266!important;backdrop-filter:blur(18px)}
.zone-interact{box-shadow:0 10px 32px #0009,0 0 22px #f7a5dc4d}
.mode-toolbar{z-index:9}.mode-toolbar button{background:#29213bc9}
.sidebar-v2{background:linear-gradient(160deg,#17162b,#222039 80%)!important}
.playing-card{border-color:#f5a3c766!important}
.welcome-card{width:min(1040px,100%);background:linear-gradient(126deg,#27223d,#2d2145 53%,#362846)!important;border-color:#f4cce588!important}
.welcome-columns{grid-template-columns:minmax(0,1fr) minmax(355px,435px);min-height:595px}
.welcome-copy{background:radial-gradient(ellipse at 24% 65%,#965c8c66,transparent 65%),radial-gradient(ellipse at 100% 0%,#997acb2e,transparent 65%)}
.welcome-copy h2{font-family:'Be Vietnam Pro','Segoe UI',sans-serif;letter-spacing:-.055em;line-height:1.18}
.avatar-customize{padding:20px 26px 22px;max-height:min(86vh,790px);overflow:auto}
.avatar-customize::-webkit-scrollbar{width:6px}.avatar-customize::-webkit-scrollbar-thumb{background:#b790ca8c;border-radius:20px}
.preview-panel{height:183px;background:radial-gradient(ellipse at 50% 90%,#c58abc55,transparent 65%),linear-gradient(120deg,#3f2854,#241a43);border-color:#dda7e16d;box-shadow:inset 0 -25px 36px #251c43}
.preview-panel::before{background:linear-gradient(135deg,#a96fbb55,#e1a8d055);box-shadow:0 0 28px #e6a6da8c;border-color:#e8a7d5}
.v6-model-label{position:absolute;top:16px;left:15px;color:#f7d4f2;font-size:8px;font-weight:900;letter-spacing:.12em}
.mini-avatar{transform:scale(1.04);transform-origin:bottom center;filter:drop-shadow(0 10px 13px #0c082a99) drop-shadow(0 0 18px #ffb0e35d)}
.mini-avatar .body{box-shadow:inset 9px 0 0 #ffffff20,inset -9px 0 0 #00000018}
.mini-avatar.style-street .body{border-radius:13px 13px 4px 4px;box-shadow:inset 11px 0 0 #00000040,0 0 0 2px #ffdeb42d}
.mini-avatar.style-hoodie .body{border-radius:30px 30px 13px 13px;box-shadow:inset 8px 0 0 #ffffff30,0 -6px 0 #ffffff36}
.mini-avatar.style-hoodie .body:before{content:'';position:absolute;left:15px;top:-16px;width:36px;height:26px;border:7px solid #f1ccf855;border-bottom:0;border-radius:30px 30px 0 0}
.mini-avatar.style-dress .body{width:84px;left:3px;border-radius:34px 34px 12px 12px;clip-path:polygon(20% 0,80% 0,100% 100%,0 100%)}
.style-choice-row{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.style-choice-row button{border:1px solid #8c72a0;border-radius:9px;padding:9px 2px;background:#251b39;color:#e8d1ef;font:800 9px 'Be Vietnam Pro','Segoe UI',sans-serif}
.style-choice-row button.selected{color:#241b32;background:linear-gradient(135deg,#ffcdde,#cfbcff);border-color:#ffddfa;box-shadow:0 0 0 1px #fff1}
.input-label{margin:12px 0 7px}
.join-button{box-shadow:0 10px 25px #ffb0ce35}
.join-button:hover{box-shadow:0 11px 37px #ffc7e05e}
@media(max-width:970px){.welcome-columns{grid-template-columns:minmax(0,1fr) 370px}}
@media(max-width:760px){.welcome-columns{grid-template-columns:1fr}.welcome-copy{padding:24px 24px 16px;text-align:center}.welcome-copy h2{font-size:37px;margin:14px 0}.welcome-copy h2 br{display:none}.welcome-stickers{justify-content:center;margin:14px 0}.welcome-note{display:none}.avatar-customize{max-height:none;overflow:visible}.welcome-overlay{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.mini-avatar{filter:none}}

/* V6.2: never allow the YouTube LED to cover the whole fallback concert. */
.stage-background:not(:has(#three-stage.ready)) .stage-video-screen,
.stage-background:not(:has(#three-stage.ready)) .stage-video-screen.in-world{
  position:absolute!important;left:31%!important;top:35%!important;width:38%!important;
  height:auto!important;aspect-ratio:16/9!important;border-width:3px!important;
  z-index:2;box-shadow:0 0 26px #d477d96b!important;
}
.graphics-failure{position:absolute;z-index:9;left:50%;top:10px;transform:translateX(-50%);
  width:min(440px,calc(100% - 290px));min-width:250px;padding:13px 15px;border:1px solid #f6adcb9c;
  border-radius:12px;background:#1e1228eb;color:#fff4fc;box-shadow:0 10px 30px #0009;
  font:600 11px 'Be Vietnam Pro',sans-serif;display:flex;align-items:flex-start;flex-direction:column;gap:6px;}
.graphics-failure strong{font-size:12px;color:#ffc5dd}
.graphics-failure span{line-height:1.5;color:#ebd8ec}
.graphics-failure button{padding:6px 13px;border:1px solid #ffabc7;background:#54304b;border-radius:8px;color:#fff;cursor:pointer}
@media(max-width:850px){.graphics-failure{width:min(420px,calc(100% - 24px));left:50%;top:64px;min-width:0}}

/* V7 secure DJ login */
.dj-auth-controls{display:flex;gap:8px;align-items:center;margin:10px 0}
.dj-auth-controls button{flex:1;padding:9px;border-radius:9px;border:1px solid #b16caa;background:#35203f;color:#ffdeeb;font:700 11px 'Be Vietnam Pro',sans-serif;cursor:pointer}
.dj-auth-controls button[hidden],.dj-auth-overlay[hidden]{display:none!important}
.dj-auth-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0816b8;z-index:2500;padding:16px;backdrop-filter:blur(8px)}
.dj-auth-card{width:min(420px,100%);padding:24px;border-radius:17px;background:#291b38;border:1px solid #dd9ac5;box-shadow:0 30px 70px #000a;color:#fff4f6;display:flex;flex-direction:column;gap:12px;font-family:'Be Vietnam Pro',sans-serif}
.dj-auth-card h2{margin:0;color:#ffc5e3;font-size:17px}.dj-auth-card p{font-size:12px;line-height:1.7;margin:0;color:#e8cede}
.dj-auth-card label{font-size:11px;font-weight:800}.dj-auth-card input{width:100%;padding:12px;border-radius:9px;color:white;background:#1c1425;border:1px solid #a775a5;font:14px 'Be Vietnam Pro',sans-serif}
.dj-auth-buttons{display:flex;gap:10px}.dj-auth-buttons button{flex:1;border-radius:9px;padding:11px;border:1px solid #da9abd;background:#4e3052;color:white;font-weight:800;cursor:pointer}.dj-auth-buttons button[type=submit]{color:#2d172c;background:#ffb2dc}


/* V7.2 DJ playlist: multi-link paste, queue panel and mobile-friendly controls */
.dj-section-v2 .dj-batch-row{display:flex;gap:7px;align-items:stretch}
.dj-section-v2 .dj-batch-row textarea{flex:1;min-width:0;width:100%;min-height:63px;max-height:135px;resize:vertical;padding:9px 11px;border-radius:9px;border:1px solid #885e88;background:#281e35;color:#fff4fa;font:11px/1.5 'Be Vietnam Pro','Segoe UI',sans-serif}
.dj-section-v2 .dj-batch-row textarea:focus{outline:2px solid #f2a3d3;outline-offset:1px}
.dj-section-v2 .dj-batch-row button{flex:0 0 auto;align-self:stretch;padding:8px 10px;background:#ffa8cc;color:#2e1530;border:0;border-radius:9px;font:900 10px 'Be Vietnam Pro',sans-serif;cursor:pointer}
.dj-section-v2 .dj-batch-row button:disabled{opacity:.5;cursor:not-allowed}
.playlist-widget{margin:10px 0 5px;padding:9px 10px;background:#291d38;border:1px solid #9d719a73;border-radius:12px;min-width:0}
.playlist-heading,.playlist-actions{display:flex;align-items:center;justify-content:space-between;gap:8px}
.playlist-heading strong{font:900 10px 'Be Vietnam Pro',sans-serif;color:#ffe0ee}
.playlist-heading span{white-space:nowrap;background:#574068;padding:3px 6px;border-radius:15px;color:#f9d0e6;font-size:10px}
.playlist-status{margin-top:6px;font:600 10px/1.5 'Be Vietnam Pro',sans-serif;color:#e5c6dd;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.playlist-items{list-style:none;margin:8px 0;padding:0;max-height:150px;overflow:auto;display:flex;flex-direction:column;gap:4px;scrollbar-width:thin;scrollbar-color:#9972aa #2c203c}
.playlist-item{display:flex;gap:7px;align-items:center;min-width:0;padding:6px 7px;background:#342743;border:1px solid #70567c50;border-radius:7px}
.playlist-item.is-current{background:#654161a6;border-color:#ffb1d2a8}
.playlist-index{font-size:10px;color:#febcd9;font-weight:900;width:18px;text-align:center;flex:0 0 auto}
.playlist-track{font:700 10px 'Be Vietnam Pro',sans-serif;color:#f6e7f3;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1}
.playlist-remove{flex:0 0 auto;border:1px solid #a4779d;background:#543653;border-radius:6px;color:#f7d1de;cursor:pointer;font-size:14px;line-height:18px;width:22px;height:22px}
.playlist-actions{margin-top:6px}
.playlist-actions span{font-size:9px;color:#cfaacd}
.playlist-actions button{font:700 9px 'Be Vietnam Pro',sans-serif;color:#f7d8ec;border:1px solid #76517b;background:#38213f;border-radius:7px;padding:6px;white-space:nowrap;cursor:pointer}
.playlist-actions button:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:760px){.dj-section-v2 .dj-batch-row textarea{font-size:12px;min-height:72px}.playlist-items{max-height:120px}.playlist-widget{padding:8px}}
/* Keep the playlist scrollable without hiding the bottom DJ controls or shrinking chat away. */
.sidebar-v2 .dj-section-v2{flex:0 1 auto;min-height:165px;max-height:min(59vh,560px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#9c73ad #20142e}
.sidebar-v2 .chat-section-v2{flex:1 1 110px;min-height:100px}
@media(max-width:760px){.sidebar-v2 .dj-section-v2{max-height:355px}.sidebar-v2 .chat-section-v2{min-height:85px}}

/* V7.2.1: visible, accessible connection feedback on the lobby */
.join-connection-status{display:block;padding:10px 12px;margin-top:10px;border:1px solid #f0a5d36b;border-radius:9px;background:#3b2342;color:#ffdef0;font:700 11px/1.5 'Be Vietnam Pro',sans-serif;white-space:normal;word-wrap:break-word}
.join-connection-status[hidden]{display:none}
.join-connection-status.warn{background:#583142;border-color:#ffc58d;color:#ffe2bc}
