@import url('./base.css?v=2');
.embedded-player{position:absolute;inset:0;background:#000}
.embedded-player iframe{width:100%;height:100%;border:0;display:block;min-height:200px}
.video-stage:has(.embedded-player:not([hidden])){min-height:220px}
.external-info{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--line)}
.external-info p{font-size:11px;color:var(--muted);line-height:1.6}
.external-info a{color:var(--accent);white-space:nowrap;flex-shrink:0}
.external-info.warning p{color:#e5b484}
.add-tabs{display:flex;gap:8px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.add-tabs button{background:transparent;color:var(--muted);border-radius:0;padding:12px 15px;border-bottom:2px solid transparent;font-size:12px}
.add-tabs button.active{color:var(--accent);border-bottom-color:var(--accent)}
#link-form>label{display:block;font-size:12px;color:#c4cfc6;margin-top:20px}
#link-form input{display:block;width:100%;margin-top:9px;background:#101613;border:1px solid #37423a;border-radius:7px;padding:13px 12px;font-size:12px;color:var(--text)}
#link-form .format-note{margin-top:19px}
.thumb-youtube{background:linear-gradient(140deg,#572c2c,#2c2121)}
.thumb-tiktok{background:linear-gradient(140deg,#203f43,#3a273c)}
.thumb-provider{font-size:11px;color:#d9dfd8;font-weight:650}
@media(max-width:480px){.external-info{align-items:flex-start;flex-direction:column;gap:5px}.external-info a{padding:4px 0}.add-tabs{margin-bottom:16px}}
.room-layout > * {min-width:0;}
@media(max-width:480px){
  .topbar{gap:12px;}
  .account{display:grid;grid-template-columns:auto auto;gap:0 8px;text-align:right;}
  #user-badge{grid-column:1 / -1;max-width:180px;justify-self:end;}
  .account .quiet{padding:6px;}
}

.brand-word{white-space:nowrap}.brand-suffix{color:var(--accent)}
.player-top{gap:10px}.player-top #player-position{margin-left:auto}
#layout-toggle{flex-shrink:0;font-size:10px;letter-spacing:0;padding:7px 9px;border:1px solid var(--line)}
#layout-toggle[aria-pressed="true"]{color:var(--accent);border-color:#6b8455}
@media(min-width:801px){
  .room-layout.player-expanded{grid-template-columns:minmax(0,1fr) 250px;}
  .player-expanded .queue-heading{padding-left:14px;padding-right:14px;}
  .player-expanded .queue-tabs{gap:12px;padding-left:14px;padding-right:14px;}
  .player-expanded .queue-controls{flex-wrap:wrap;padding:14px;}
  .player-expanded .search-box{width:100%;flex-basis:100%;}
  .player-expanded .thumb{width:65px;height:44px;flex-shrink:0;}
  .player-expanded .queue-list{padding-left:6px;padding-right:6px;}
  .player-expanded .clip-row{padding:8px 5px;}
  .player-expanded .queue-footer{padding-left:14px;font-size:9px;}
}
@media(max-width:1100px){.player-top #player-position{display:none}#layout-toggle{margin-left:auto}}
@media(max-width:800px){#layout-toggle{display:none}}
.guest-view{max-width:780px;padding-top:65px;}
.guest-card{padding:40px;background:var(--panel);border:1px solid var(--line);border-radius:18px;}
.guest-card h1{font-size:clamp(28px,4vw,40px);}
.guest-intro{color:var(--muted);line-height:1.7;margin-top:18px;max-width:480px;}
.guest-providers{display:flex;gap:10px;margin:25px 0 30px;}
.guest-providers span{padding:7px 12px;border:1px solid var(--line);border-radius:6px;color:#d8e3d5;font-size:12px;}
#guest-form label{display:block;font-size:12px;margin-top:23px;color:#c4cfc6;}
#guest-form input{display:block;width:100%;margin-top:10px;background:#101613;border:1px solid #37423a;border-radius:7px;padding:14px;color:var(--text);}
#guest-submit{margin-top:24px;}
.guest-privacy{font-size:12px;color:var(--muted);line-height:1.7;margin-top:28px;padding-top:23px;border-top:1px solid var(--line);}
.guest-success{padding:14px;border-radius:7px;background:#26351f;color:var(--accent);line-height:1.6;margin-top:20px;}
@media(max-width:480px){.brand{font-size:21px}.brand-mark{width:26px;height:26px}.guest-view{padding-top:28px}.guest-card{padding:25px 20px}#user-badge{max-width:140px}}

/* Expanded viewing brings the introduction into the header and uses screen height. */
@media(min-width:801px){
  body.player-focus{--focus-header-height:112px;--focus-stage-height:max(360px,calc(100dvh - var(--focus-header-height) - 210px));}
  .player-focus .topbar{height:var(--focus-header-height);gap:24px;}
  .player-focus .topbar>.brand,.player-focus .topbar>.account{flex-shrink:0;}
  .player-focus .room-tag{display:none;}
  .player-focus #room-intro{flex:1;min-width:0;margin:0;gap:20px;}
  .player-focus #room-intro>div{min-width:0;}
  .player-focus #room-intro .eyebrow{font-size:8px;letter-spacing:1.3px;margin-bottom:7px;}
  .player-focus #room-intro h1{font-size:clamp(23px,2.1vw,32px);letter-spacing:-1px;}
  .player-focus #room-intro .subtitle{font-size:12px;margin-top:7px;}
  .player-focus #open-upload{font-size:12px;padding:12px 16px;}
  .player-focus #owner-view{padding-top:20px;max-width:none;}
  .player-focus .video-stage{aspect-ratio:auto;height:var(--focus-stage-height);}
  .player-focus .video-stage:fullscreen{height:100%;width:100%;}
  .player-focus .queue-card{height:calc(var(--focus-stage-height) + 112px);min-height:0;}
  .player-focus .queue-list{flex:1;min-height:0;max-height:none;overflow:auto;}
  .player-focus .queue-heading,.player-focus .queue-tabs,.player-focus .queue-controls,.player-focus .queue-footer{flex-shrink:0;}
}
@media(min-width:801px) and (max-width:1199px){
  body.player-focus{--focus-header-height:164px;}
  .player-focus .topbar{display:grid;grid-template-columns:1fr auto;gap:12px 20px;padding-top:14px;padding-bottom:14px;}
  .player-focus .topbar>.brand{grid-column:1;grid-row:1;}
  .player-focus .topbar>.account{grid-column:2;grid-row:1;justify-self:end;}
  .player-focus #room-intro{grid-column:1 / -1;grid-row:2;}
}

.thumb-twitch{background:linear-gradient(140deg,#593491,#302141)}
.video-stage[data-source="twitch"]{min-height:300px}
.twitch-size-note{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:24px;color:var(--muted);font-size:13px;line-height:1.8;background:#101416}
.guest-providers{flex-wrap:wrap}

.extension-dialog{width:min(620px,calc(100% - 30px))}
.extension-downloads{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
#extension-key-form{display:flex;flex-wrap:wrap;gap:10px}
#extension-key-form label{width:100%;font-size:12px;color:#c4cfc6}
#extension-name{flex:1;min-width:160px;background:#101613;border:1px solid #37423a;border-radius:7px;padding:12px;color:var(--text)}
#extension-key-form .primary{font-size:12px;padding:12px}
.extension-created{margin:20px 0;padding:18px;background:#25351e;border:1px solid #526b41;border-radius:10px}
.extension-created label,.extension-created p{font-size:12px;line-height:1.6}
#extension-secret{display:block;width:100%;resize:vertical;margin-top:12px;background:#101613;color:var(--accent);border:1px solid #526b41;border-radius:6px;padding:10px;font:12px/1.6 monospace;overflow-wrap:anywhere}
.extension-list-heading{font-size:14px;margin:24px 0 12px}
.extension-key-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.extension-key-row>div{min-width:0;overflow-wrap:anywhere}.extension-key-row strong{font-size:13px}.extension-key-row small{display:block;color:var(--muted);font-size:11px;margin-top:6px}
.extension-footnote{font-size:11px;color:var(--muted);line-height:1.7;margin-top:20px}
@media(min-width:1200px) and (max-width:1350px){.player-focus .account{gap:4px}.player-focus .account .quiet{padding:8px}.player-focus #room-intro{gap:12px}.player-focus .topbar{gap:16px}}
@media(max-width:480px){.topbar:has(#open-extension:not([hidden])){height:92px}.extension-downloads .primary{width:100%}}