/* PORTRAIT OBS PLAYER V1 */
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#03050a}
body.portrait-player{
  display:grid;
  place-items:center;
  font-family:Inter,system-ui,Arial,sans-serif;
  color:#fff;
}
body.portrait-player #stage{
  position:relative;
  width:1080px;
  height:1920px;
  max-width:none;
  max-height:none;
  flex:0 0 auto;
  overflow:hidden;
  background:#03050a;
  isolation:isolate;
  transform-origin:center center;
}
.portrait-backdrop{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(circle at 50% 47%,rgba(255,178,48,.28),transparent 23%),
    radial-gradient(circle at 28% 42%,rgba(255,45,64,.22),transparent 22%),
    radial-gradient(circle at 78% 12%,rgba(255,190,70,.20),transparent 24%),
    linear-gradient(180deg,#07080b 0%,#100804 44%,#020305 100%);
}
.portrait-backdrop::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,transparent 0 14%,rgba(255,190,80,.18) 14.3% 14.8%,transparent 15.2% 84.5%,rgba(255,190,80,.18) 85% 85.5%,transparent 86%),
    radial-gradient(ellipse at 50% 63%,rgba(255,164,35,.32),transparent 18%),
    repeating-linear-gradient(90deg,transparent 0 54px,rgba(255,255,255,.028) 55px 56px);
  opacity:.95;
}
.portrait-backdrop::after{
  content:"";
  position:absolute;
  left:-5%;
  right:-5%;
  bottom:405px;
  height:220px;
  background:
    radial-gradient(ellipse at 50% 100%,#050505 0 33%,transparent 34%),
    repeating-radial-gradient(ellipse at 50% 100%,rgba(255,194,80,.55) 0 2px,transparent 3px 14px);
  opacity:.72;
}
.portrait-side-panel,.portrait-logo-card,.portrait-media-frame,.portrait-countdown,.portrait-chat-box,.portrait-bottom-strip,#metadata{
  position:absolute;
  z-index:4;
}
.portrait-side-panel{
  left:32px;
  top:34px;
  width:205px;
  height:620px;
  padding:34px 26px;
  display:flex;
  flex-direction:column;
  gap:28px;
  border:2px solid rgba(255,190,69,.85);
  clip-path:polygon(14% 0,100% 0,100% 94%,86% 100%,0 100%,0 6%);
  background:linear-gradient(180deg,rgba(6,7,10,.94),rgba(9,10,14,.82));
  box-shadow:0 0 28px rgba(255,55,55,.34),inset 0 0 22px rgba(255,171,45,.12);
}
.portrait-live{display:grid;place-items:center;text-align:center;gap:4px}
.portrait-live-icon{color:#ff3553;font-size:56px;line-height:.8;text-shadow:0 0 22px #ff3553;animation:portraitLiveBlink 1.25s ease-in-out infinite}
.portrait-live strong{font-size:39px;line-height:.9}
.portrait-live span{font-size:28px;font-weight:900}
.portrait-side-block{display:grid;gap:9px;border-top:1px solid rgba(255,190,69,.58);padding-top:24px;color:#ffd65a;font-size:25px}
.portrait-mini-icon{font-size:30px;color:#ffd65a}
.portrait-tiktok-badge{margin-top:auto;padding:14px 8px;border:2px solid #ff4054;color:#fff;text-align:center;font-weight:1000;font-size:20px;box-shadow:0 0 18px rgba(255,64,84,.46)}
.portrait-logo-card{
  left:260px;
  top:95px;
  width:330px;
  height:305px;
  display:grid;
  place-items:center;
  padding:20px;
  border:2px solid rgba(255,190,69,.82);
  clip-path:polygon(13% 0,87% 0,100% 17%,100% 83%,87% 100%,13% 100%,0 83%,0 17%);
  background:rgba(5,6,10,.78);
  text-align:center;
  text-shadow:0 0 18px rgba(255,190,60,.55);
}
.portrait-logo-card span,.portrait-logo-card em{font-style:normal;font-weight:1000;color:#ffd66a;font-size:45px;line-height:.8}
.portrait-logo-card strong{display:block;color:#f9bf38;font-size:170px;line-height:.7;font-weight:1000;letter-spacing:-.08em}
.portrait-media-frame{
  right:36px;
  top:105px;
  width:355px;
  height:455px;
  border:3px solid rgba(255,190,69,.86);
  clip-path:polygon(11% 0,89% 0,100% 10%,100% 90%,89% 100%,11% 100%,0 90%,0 10%);
  background:rgba(0,0,0,.88);
  box-shadow:0 0 24px rgba(255,64,84,.42), inset 0 0 32px rgba(255,190,69,.09);
  overflow:hidden;
}
body.portrait-player #media{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;overflow:hidden!important;background:#020305!important}
body.portrait-player #media iframe,
body.portrait-player #media .main-video,
body.portrait-player #media .background-animation,
body.portrait-player #media .fallback-animation{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border:0!important;
}
body.portrait-player #media .player-logo-idle{display:grid!important;place-items:center!important}
body.portrait-player #media .player-logo-idle img{max-width:82%;max-height:82%;object-fit:contain;filter:drop-shadow(0 0 25px rgba(255,190,70,.55))}
body.portrait-player #media .song-cover-container{width:95%!important;left:50%!important;top:50%!important}
body.portrait-player #spotify-embed-container,
body.portrait-player #media .spotify-embed-container{
  width:94%!important;
  height:160px!important;
  min-height:160px!important;
  max-height:160px!important;
}
body.portrait-player #spotify-embed-container iframe,
body.portrait-player #media .spotify-embed-container iframe{height:160px!important}
.portrait-countdown{
  left:135px;
  right:135px;
  top:690px;
  height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:48px;
}
.portrait-timer-ring{
  position:relative;
  width:260px;
  height:260px;
  display:grid;
  place-items:center;
  align-content:center;
  border-radius:50%;
  border:5px solid rgba(255,213,95,.96);
  background:radial-gradient(circle,#101010 0 55%,#050505 66%,#000 100%);
  box-shadow:0 0 0 10px rgba(255,186,58,.12),0 0 45px rgba(255,177,54,.72),inset 0 0 45px rgba(255,197,70,.16);
}
.portrait-timer-ring::before{
  content:"";
  position:absolute;
  inset:-16px;
  border-radius:50%;
  background:conic-gradient(#ffdf72 calc(var(--portrait-timer-progress,1) * 360deg),rgba(255,62,75,.22) 0);
  -webkit-mask:radial-gradient(circle,transparent 65%,#000 66%);
  mask:radial-gradient(circle,transparent 65%,#000 66%);
  filter:drop-shadow(0 0 12px rgba(255,197,70,.55));
}
.portrait-timer-ring span{color:#ffe17b;font-size:34px;font-weight:1000;z-index:1}
.portrait-timer-ring strong{color:#ffc447;font-size:116px;line-height:.82;font-weight:1000;z-index:1;text-shadow:0 0 24px rgba(255,190,69,.78)}
.portrait-timer-ring em{font-style:normal;color:#ffe17b;font-size:30px;font-weight:1000;z-index:1}
.portrait-arrow{
  color:#ffbd3e;
  font-size:58px;
  font-weight:1000;
  letter-spacing:-.18em;
  text-shadow:0 0 20px rgba(255,170,35,.95);
  animation:portraitArrowPulse 1.1s ease-in-out infinite;
}
.portrait-arrow-right{animation-direction:reverse}
.portrait-countdown.is-running .portrait-timer-ring{animation:portraitTimerGlow 1s ease-in-out infinite}
.portrait-countdown.is-finished .portrait-timer-ring{border-color:#ff4054;box-shadow:0 0 44px rgba(255,64,84,.72)}
.portrait-chat-box{
  left:32px;
  right:32px;
  bottom:168px;
  height:480px;
  border:3px solid rgba(255,190,69,.88);
  clip-path:polygon(4% 0,96% 0,100% 8%,100% 92%,96% 100%,4% 100%,0 92%,0 8%);
  background:linear-gradient(180deg,rgba(5,6,10,.84),rgba(0,0,0,.92));
  box-shadow:0 0 25px rgba(255,64,84,.38),inset 0 0 34px rgba(255,190,69,.08);
}
.portrait-chat-title{
  position:absolute;
  left:50%;
  top:-34px;
  transform:translateX(-50%);
  min-width:420px;
  padding:18px 44px;
  border:2px solid #ff4054;
  background:#111;
  color:#ffd86b;
  text-align:center;
  font-size:31px;
  font-weight:1000;
  clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%);
}
.portrait-bottom-strip{
  left:32px;
  right:32px;
  bottom:34px;
  height:95px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  align-items:center;
  border:2px solid rgba(255,190,69,.86);
  clip-path:polygon(4% 0,96% 0,100% 50%,96% 100%,4% 100%,0 50%);
  background:rgba(5,6,10,.86);
  box-shadow:0 0 25px rgba(255,190,69,.26);
}
.portrait-bottom-strip div{display:grid;grid-template-columns:58px 1fr;grid-template-rows:1fr 1fr;align-items:center;padding:0 30px;border-right:1px solid rgba(255,190,69,.34)}
.portrait-bottom-strip div:last-child{border-right:0}
.portrait-bottom-strip span{grid-row:1/3;color:#ffd75f;font-size:44px}
.portrait-bottom-strip strong{font-size:20px;color:#ffd75f}
.portrait-bottom-strip em{font-style:normal;font-size:20px;font-weight:900;color:#fff}
body.portrait-player #metadata{
  left:260px;
  top:420px;
  width:330px;
  height:130px;
  right:auto;
  bottom:auto;
  z-index:8;
  padding:16px 18px;
  border:1px solid rgba(255,190,69,.46);
  border-radius:18px;
  background:rgba(0,0,0,.58);
  display:flex;
  justify-content:center;
  text-align:center;
  align-items:center;
}
body.portrait-player #metadata h1{font-size:30px;line-height:1.05;text-align:center}
body.portrait-player #metadata p{font-size:22px;margin-top:8px;text-align:center;color:#ffd75f}
body.portrait-player #warning{font-size:18px;margin-bottom:8px;padding:6px 10px;border-width:2px}
body.portrait-player .warning-icon{width:30px;height:30px;font-size:22px}
body.portrait-player #blackout,body.portrait-player #paused{z-index:50}
@keyframes portraitArrowPulse{0%,100%{transform:translateX(0);opacity:.62;filter:brightness(.85)}50%{transform:translateX(18px);opacity:1;filter:brightness(1.35)}}
@keyframes portraitTimerGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}
@keyframes portraitLiveBlink{0%,100%{opacity:.6;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}}


/* PORTRAIT FIXED ASPECT V2 */
body.portrait-player::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:#03050a;
}