/* NOIRPLAY / LIVE LOUNGE — standalone, mobile-first visual theme */
:root{
  --bg:#070918; --surface:#101329; --surface-2:#151731; --line:rgba(181,174,255,.14);
  --text:#f7f6ff; --muted:#999abb; --pink:#ff3a9c; --pink-light:#ffa6d4; --violet:#954cff;
  --cyan:#36e2fa; --lime:#8effcf;
}
html{background:#080a18}
body{background:#070917;color:var(--text);background-image:radial-gradient(ellipse at 14% 0%,#52206965 0,transparent 35%),radial-gradient(ellipse at 87% 32%,#112c6860 0,transparent 42%),linear-gradient(#080914,#070913)}
.ambient-one{background:#e01a9d;top:-170px;left:-205px;opacity:.19;animation:ambientFloat 11s ease-in-out infinite alternate}
.ambient-two{background:#2753e5;top:330px;right:-180px;opacity:.18;animation:ambientFloat 13s ease-in-out infinite alternate-reverse}
.site-shell{max-width:520px;background:linear-gradient(180deg,rgba(22,15,43,.92),rgba(7,9,21,.92) 30%,rgba(9,10,26,.94));box-shadow:0 0 100px #0008;border-left:1px solid #ffffff0a;border-right:1px solid #ffffff0a}
.site-shell:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#23d7fc,#a54cff 46%,#ff4ea5);z-index:10;pointer-events:none}
.site-header{height:67px;padding:0 15px;background:rgba(10,11,27,.85);border-bottom:1px solid #a5b2ff1b;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.brand-icon{background:linear-gradient(145deg,#ff2f99,#8b3fff 74%,#35bffd);border:1px solid #ffffff4d;border-radius:12px;box-shadow:0 0 22px #ed39a24a}
.brand-icon span:first-child,.brand-icon span:last-child{background:#fff}
.brand-word{font-size:19px;letter-spacing:-1.2px;font-weight:900}.brand-word>span{background:linear-gradient(110deg,#ff57b4,#db80ff);color:transparent;background-clip:text;-webkit-background-clip:text}
.brand-word small{color:#9c9cbf;letter-spacing:2px;font-size:6.5px;margin-top:7px}
.header-actions{gap:7px}
.studio-badge{display:inline-flex;align-items:center;gap:6px;background:#132b338a;color:#86f5e7;border:1px solid #47dbdc55;border-radius:999px;font-size:8px;letter-spacing:1.1px;font-weight:900;padding:8px 9px}
.studio-badge-led{width:6px;height:6px;background:#54f6de;border-radius:50%;box-shadow:0 0 8px #54f6de;animation:signalPulse 2.4s infinite}
.icon-button{width:35px;height:35px;background:#ffffff0c;border-color:#b8b0f72b;border-radius:11px;color:#dbd8ef}
.icon-button:hover{background:#f54aa528;border-color:#fc4eb0}
.search-panel{top:67px;background:#0d1024f7;border-bottom-color:#4b4a8b7a}
.search-panel>label{color:#c9b2f3}.search-input-wrap{background:#0b0c1d;border-color:#47467d}.search-input-wrap svg{color:var(--cyan)}
.room-ribbon{display:flex;justify-content:space-between;align-items:center;padding:14px 17px 12px;gap:6px}
.room-ribbon-left{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:10px;font-weight:900;letter-spacing:1.65px;color:#fff}
.ribbon-signal{width:8px;height:8px;border-radius:3px;background:var(--pink);box-shadow:0 0 0 4px #ff3b9528,0 0 14px #ff3b95;transform:rotate(45deg)}
.room-ribbon-right{font-size:8px;letter-spacing:.85px;color:#9294ba;white-space:nowrap;font-weight:700}
.room-ribbon-right b{display:inline-block;margin-left:3px;font-size:8px;border-radius:3px;padding:4px 6px;background:#34254d;color:#dfb2ff;border:1px solid #7d5cab66}
.feature{margin-top:0}.player-glow{background:linear-gradient(90deg,#fb42c7,#663cfa,#12cbe7);opacity:.38;filter:blur(34px);height:280px;left:12%;right:12%;top:18px}
.player-shell{margin:0 10px;border:1.5px solid transparent;border-radius:21px;position:relative;background:linear-gradient(#101025,#101025) padding-box,linear-gradient(133deg,#e441c3,#6362d6 50%,#2beaff) border-box;box-shadow:0 14px 42px #000b,0 0 32px #ac31ff30;overflow:hidden}
.player-shell:before{content:"";position:absolute;top:0;left:-65%;height:2px;width:65%;background:linear-gradient(90deg,transparent,#ffffffb9,transparent);z-index:6;animation:lightSweep 6s ease-in-out infinite;pointer-events:none}
.player-viewport{aspect-ratio:16/12.1;background:#070612}
.hero-poster{opacity:1;filter:saturate(1.17) contrast(1.08) brightness(.85)}
.poster-scrim{background:radial-gradient(circle at 51% 44%,transparent 13%,#0905152e 57%),linear-gradient(180deg,#0708147f,transparent 26%,#08081726 54%,#03040aec 100%)}
.stage-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(93deg,#be2c8528,transparent 27%,transparent 72%,#21ddfa20),linear-gradient(0deg,#03041144,transparent 60%)}
.stage-sparks{position:absolute;left:8px;right:8px;top:70px;bottom:70px;z-index:2;pointer-events:none;overflow:hidden}
.stage-sparks span{position:absolute;font-size:9px;color:#e6bfffbd;filter:drop-shadow(0 0 8px #bd79ff);animation:sparkDrift 5s ease-in-out infinite}
.stage-sparks span:nth-child(1){left:8%;top:22%}.stage-sparks span:nth-child(2){right:10%;top:48%;animation-delay:-2s;color:#a7efff}.stage-sparks span:nth-child(3){left:15%;bottom:18%;animation-delay:-3s}
.ios-player-heading{top:13px;left:13px;right:13px;z-index:3;align-items:center}
.ios-preview-label{display:inline-flex;align-items:center;gap:7px;font-size:9px;font-weight:900;letter-spacing:1.1px;background:linear-gradient(105deg,#f8319cbb,#782adca8);border:1px solid #ffacec75;padding:7px 10px;border-radius:7px;box-shadow:0 3px 16px #fb1d964d}
.ios-status-dot{background:#fff;box-shadow:0 0 0 3px #fff3,0 0 11px #fff;animation:signalPulse 1.5s infinite}
.ios-heading-detail{font-size:8px;background:#070811b3;padding:7px 9px;border-radius:7px;border:1px solid #ffffff27;color:#d9dfed;letter-spacing:.35px}
.loading-layer{padding:35px 14px 48px;background:linear-gradient(180deg,#09091814,#04061044 58%,#05051038)}
.ios-loader{transform:translateY(7px)}
.ios-ring-shell{width:138px;height:138px;filter:drop-shadow(0 0 23px #b235da84)}
.ios-ring-track{stroke:#ffffff40}.ios-ring-active{stroke:#fefaff;filter:drop-shadow(0 0 5px #84eaff) drop-shadow(0 0 5px #ff76bb)}
.ios-ring-center{border:1px solid #cdbaff50;background:radial-gradient(circle at 50% 10%,#38295d91,#080917a3);box-shadow:inset 0 0 23px #ae4ff32b,0 0 28px #10061b8a}
.ios-ring-word{font-size:12px;font-weight:700;letter-spacing:.45px}.ios-ring-number{font-size:29px}
.ios-loading-caption{margin-top:8px;font-size:10px;color:#fff1fa;font-weight:650}
.ready-button{bottom:56px;background:linear-gradient(100deg,#f83ea6,#ad50fb);color:white;border:1px solid #ffc4e775;box-shadow:0 8px 24px #d335995c;font-size:12px}
.ios-transport-bar{left:10px;right:10px;bottom:8px;gap:8px;padding:6px 6px;background:#06081088;border:1px solid #ffffff24;border-radius:12px;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}
.ios-preview-toggle{width:29px;height:29px;padding:5px;border-radius:9px;border-color:#ffffff30;background:#ffffff1a}
.ios-timecode{font-weight:800;font-size:10px;color:white}
.ios-timecode-total{color:#deddf9}.ios-scrub{background:#ffffffdd;height:3px}.ios-viewport-mark{color:#d5dbeb}
.channel-strip{margin:12px 13px 0;padding:12px;display:flex;align-items:center;gap:11px;background:linear-gradient(112deg,#271734e8,#0f1d36d4);border:1px solid #794f9863;border-radius:14px;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff0c}
.channel-strip:after{content:"";position:absolute;inset:auto -60px -75px auto;width:180px;height:95px;border-radius:50%;background:#17c2e729;filter:blur(32px);pointer-events:none}
.channel-avatar{width:40px;height:40px;border-radius:13px;background:linear-gradient(140deg,#ff408f,#792aff);display:grid;place-items:center;flex:0 0 auto;position:relative;border:1px solid #ffc0e374;box-shadow:0 0 13px #ff2eb647}
.channel-avatar span{font-size:13px;font-weight:900;letter-spacing:-1px}
.channel-avatar i{position:absolute;width:10px;height:10px;border:2px solid #12132d;background:#6efadf;border-radius:50%;bottom:-2px;right:-2px;box-shadow:0 0 10px #6efadf}
.channel-identity{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.channel-identity strong{font-size:12px;letter-spacing:.4px}.channel-identity strong span{color:#50f0e4;margin-left:3px}.channel-identity small{font-size:10px;color:#acacce;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.channel-eq{display:flex;align-items:center;gap:3px;height:24px;flex:0 0 auto}.channel-eq i{display:block;width:3px;height:8px;border-radius:8px;background:linear-gradient(0deg,#31eaff,#fa49cb);animation:eqBounce .65s ease-in-out infinite alternate}.channel-eq i:nth-child(2){height:16px;animation-delay:-.2s}.channel-eq i:nth-child(3){height:10px;animation-delay:-.4s}.channel-eq i:nth-child(4){height:20px;animation-delay:-.35s}.channel-eq i:nth-child(5){height:12px;animation-delay:-.15s}
.feature-details{padding:15px 17px 15px;gap:12px;align-items:center}.feature-copy{min-width:0;flex:1}.overline{font-size:8px;letter-spacing:1.3px;color:#bda9ef}.overline span{color:#6d7093}
.feature-copy h2{font-size:17px;line-height:1.32;letter-spacing:-.3px;font-weight:800;margin:7px 0 7px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.feature-copy p{font-size:11px;line-height:1.45;color:#abafd0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.title-star{color:#4fefee}.feature-tools{display:flex;gap:8px;flex:0 0 auto;align-items:center}
.round-tool{width:36px;height:36px;background:#17182e;border:1px solid #6762a38a;color:#f4eafd;border-radius:11px}.round-tool:hover,.round-tool.liked{background:#48204a;border-color:#fc42b2;color:#ff6fb9}.round-tool svg{width:16px;height:16px}
.room-chat{position:relative;overflow:hidden;margin:3px 12px 17px;background:linear-gradient(160deg,#15142dea,#111a2ddc);border:1px solid #56599b71;border-radius:18px;padding:13px 13px 13px;box-shadow:0 12px 25px #0004,inset 0 1px #ffffff10}
.room-chat:before{content:"";position:absolute;top:-80px;right:-45px;width:185px;height:140px;background:#7530ee28;border-radius:50%;filter:blur(44px);pointer-events:none}
.chat-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px}.chat-title{display:flex;align-items:center;gap:8px}.chat-orb{color:#ff61b6;font-size:19px;line-height:1;filter:drop-shadow(0 0 7px #fa3ca6)}.chat-title strong{font-size:13px}.chat-preview-label{font-size:8px;padding:4px 6px;border-radius:5px;color:#99fff3;border:1px solid #40d9d657;background:#19373e;font-weight:800;letter-spacing:.7px}
.chat-caption{font-size:8px;color:#9395b8;letter-spacing:1.1px;font-weight:800}
.chat-messages{display:flex;flex-direction:column;gap:7px;min-height:92px;max-height:144px;overflow-y:auto;scrollbar-width:thin;padding:0 3px 6px}
.chat-message{font-size:11px;line-height:1.4;color:#cfd0e9;display:flex;gap:9px;align-items:baseline;margin:0;animation:chatEnter .25s ease both}
.chat-user{color:#72d8f4;font-weight:800;flex:0 0 auto;font-size:10px}.chat-user.moderator{color:#ffa1da}
.chat-compose{margin-top:11px;display:flex;align-items:center;gap:6px;width:calc(100% - 91px);height:37px;border:1px solid #6563a066;border-radius:12px;padding:4px 5px 4px 11px;background:#070a1cbd}
.chat-compose input{min-width:0;flex:1;color:#fff;background:none;outline:none;border:0;font-size:10px}
.chat-compose input::placeholder{color:#9390aa}.chat-compose button{display:grid;place-items:center;flex:0 0 auto;border:0;width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#6d45ea,#ff3f9a);color:white;padding:5px}
.chat-compose button svg{height:17px;width:17px}
.reaction-button{position:absolute;right:13px;bottom:13px;border:1px solid #ff7cba7a;background:linear-gradient(120deg,#f73197,#a440ea);height:37px;width:83px;border-radius:12px;color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;gap:5px;box-shadow:0 4px 15px #f52b8d50}
.reaction-button span{font-size:10px;font-weight:800}
.reactions-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.heart-particle{position:absolute;right:27px;bottom:29px;color:#ff8dc4;font-size:22px;animation:heartFly 1.2s ease-out forwards;text-shadow:0 0 10px #f8a}
.marquee-divider{margin:17px 0 23px;padding:11px 0;border-color:#41436a4d;color:#77799f;font-size:8px;gap:15px}.marquee-divider span:nth-child(odd){color:#45e6fa}
.discover{padding:0 13px 23px}.section-header{padding:0 4px}.section-eyebrow{font-size:9px;color:#66dff3;letter-spacing:1.8px}.section-eyebrow span{background:#61f8e0;box-shadow:0 0 9px #3efee0}.section-header h2{font-size:27px;letter-spacing:-1.1px;margin-top:10px}.section-header h2 span{background:linear-gradient(96deg,#f743a6,#b97cff);background-clip:text;-webkit-background-clip:text;color:transparent}
.section-header h2 b{color:#65e6ee}.section-counter strong{font-size:23px;color:#e8dcff}.section-counter small{color:#7b80a7}
.filters{margin-top:19px;margin-bottom:16px;gap:8px;padding:0 17px}.filter{background:#13172f;border-color:#4c4b7e70;color:#b9b4d3;border-radius:10px;padding:10px 12px;font-size:10px}
.filter.active{color:#fff;background:linear-gradient(120deg,#f33d9a,#8139f2);border-color:#fb76ca;box-shadow:0 3px 16px #f33d9a52}
.video-grid{column-gap:10px;row-gap:20px}.video-card{padding-bottom:2px}.cover{border-radius:12px;background:#141329;border:1px solid #6f5b9d80;box-shadow:0 7px 19px #0007}.video-card:hover .cover{border-color:#da65f9}
.cover::after{background:linear-gradient(180deg,#0006,transparent 40%,#03030baf)}
.card-badge{background:#f13f94;border-radius:6px;box-shadow:0 2px 13px #f13f9440;font-size:8px}.card-badge.new{background:#5be4f3;color:#090d1b}.card-badge.pick{background:#3a2457ec;color:#edb7ff;border:1px solid #c688fa79}
.card-duration{background:#070818cb;border:1px solid #ffffff25;border-radius:5px}
.card-info{padding:9px 2px 0}.card-title{font-size:12px;color:#fcf8ff}.card-meta{color:#9da0bb;font-size:9px;margin-top:5px}.card-meta .views{color:#c4bad3}.card-heart{color:#9790b9}.card-heart.saved{color:#ff56b5}
.empty-state{color:#bab3d9}.endnote{color:#686b94;margin-top:28px}
footer{background:linear-gradient(135deg,#131127,#091325);border-top-color:#4b4f7a60;padding-bottom:29px}.footer-brand>span,.footer-mark{color:#ff62b5}.footer-brand+p{color:#7a9caf}.footer-meta{color:#a2a2c3}.footer-line{background:#67618550}footer small{color:#7c80a3;line-height:1.5}
.side-menu{background:linear-gradient(160deg,#20102e,#080d1f);border-left-color:#a346dd}.menu-heading{color:#ff8dca}.side-menu p{color:#7cbee0}
.toast{background:#1a1531;border-color:#a668e4}
@keyframes signalPulse{0%,100%{opacity:.95;box-shadow:0 0 8px currentColor}50%{opacity:.5;box-shadow:0 0 1px currentColor}}
@keyframes ambientFloat{to{transform:translate3d(35px,35px,0)}}
@keyframes lightSweep{0%,65%{left:-65%}100%{left:120%}}
@keyframes sparkDrift{0%,100%{transform:translateY(0) scale(.8);opacity:.25}50%{transform:translateY(-18px) scale(1.3);opacity:.8}}
@keyframes eqBounce{to{height:4px;opacity:.5}}
@keyframes chatEnter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes heartFly{0%{transform:translate(0,0) scale(.65);opacity:0}15%{opacity:1}100%{transform:translate(var(--fly-x,-20px),-132px) scale(1.65) rotate(16deg);opacity:0}}
@media(max-width:355px){
  .studio-badge{display:none}
  .room-ribbon{padding:13px 13px}.room-ribbon-left{font-size:9px}.room-ribbon-right{font-size:7px}
  .player-shell{margin:0 7px}.ios-heading-detail{font-size:7px}
  .feature-details{padding:14px 13px}.feature-copy h2{font-size:15px}
  .channel-strip{margin-left:9px;margin-right:9px}.room-chat{margin-left:9px;margin-right:9px}
  .chat-compose{width:calc(100% - 87px)}.reaction-button{width:80px}
}
@media(prefers-reduced-motion:reduce){
  .ambient-one,.ambient-two,.studio-badge-led,.ios-status-dot,.player-shell:before,.stage-sparks span,.channel-eq i,.heart-particle{animation:none!important}
}