/* =============================================================================
   LIVE-ON-THE-INTERNET features stylesheet — self-contained.
   -----------------------------------------------------------------------------
   Drop this into any site. It defines its own CSS variables, fonts, and
   layout primitives. If your site already defines any of the variables in
   :root (e.g. --orange, --font), the LATER one wins — load this file FIRST
   if you want your site's vars to override, or LAST if you want this file's
   look-and-feel intact.

   To swap brand colors, edit the :root block below.
   ============================================================================= */

/* --- Brand font ----------------------------------------------------------- */
@font-face{
  font-family:'Luckiest Guy';
  src:url('fonts/LuckiestGuy.ttf') format('truetype');
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

/* --- Brand tokens (color & type) ----------------------------------------- */
:root{
  --orange:#e8742a;
  --orange-deep:#c45316;
  --orange-light:#f3a05a;
  --sky:#9ed8ee;
  --paper:#fff7e8;

  /* Body text */
  --font: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  /* Big condensed display (Bebas Neue) */
  --display-font: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  /* Cartoon-graffiti accent (Luckiest Guy) */
  --brand-font: 'Luckiest Guy', 'Arial Black', Impact, 'Helvetica Neue', sans-serif;
}

/* --- Generic section frame + buttons (used by .panel / h2.section-title /
       .btn — needed if your host site doesn't already define these) ------ */
section.panel{
  position:relative;
  padding:90px 24px;
  z-index:1;
}
.container{max-width:1100px;margin:0 auto}
h2.section-title{
  font-family:var(--display-font);
  font-size:clamp(48px, 8vw, 96px);
  color:var(--orange);
  text-shadow:6px 6px 0 #000, -2px -2px 0 #000;
  letter-spacing:4px;
  text-align:center;
  margin-bottom:48px;
  transform:rotate(-1.5deg);
}
.btn{
  letter-spacing:3px;
  font-size:22px;padding:12px 26px;
  border:4px solid #000;background:var(--orange);color:#000;
  text-decoration:none;border-radius:8px;
  box-shadow:6px 6px 0 #000;
  transition:transform .12s, box-shadow .12s;
  cursor:pointer;display:inline-block;
  font-family:var(--font);
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 #000}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 #000}

/* =============================================================================
   VIDEO PLAYER FRAME (Restream embed)
   ============================================================================= */
.yt-section{
  text-align:center;
  padding-top:60px;
}
.yt-wrap{
  max-width:960px;margin:0 auto;
  border:6px solid #000;border-radius:12px;
  box-shadow:12px 12px 0 var(--orange);
  background:#000;
  overflow:hidden;
  position:relative;
}
.yt-wrap::before{
  content:"";position:absolute;inset:0;
  border:3px solid var(--orange);
  pointer-events:none;border-radius:8px;margin:6px;
  z-index:2;
}
.yt-frame{position:relative;width:100%;padding-bottom:56.25%;height:0}
.yt-frame iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
}

/* =============================================================================
   LIVE NOW BADGE
   ============================================================================= */
.live-now-badge[hidden]{display:none}
.live-now-badge{
  display:inline-flex;align-items:center;gap:14px;
  margin:0 auto 28px;padding:10px 28px 12px;
  position:relative;left:50%;transform:translateX(-50%) rotate(-1.5deg);
  font-family:var(--brand-font);
  font-size:clamp(28px, 4.5vw, 48px);
  letter-spacing:6px;
  color:#fff;
  background:#0d0d12;
  border:4px solid #000;
  border-radius:12px;
  box-shadow:6px 6px 0 var(--orange), 0 0 24px rgba(232,116,42,.55);
  animation:liveNowPulse 1.6s ease-in-out infinite;
  text-shadow:0 0 8px #ff5b3a, 0 0 16px #e8742a;
}
.live-now-text{
  background:linear-gradient(180deg, #ffb070 0%, #ff5b3a 50%, #c83a0a 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.live-dot{
  width:14px;height:14px;border-radius:50%;
  background:#ff2b1a;
  box-shadow:0 0 0 0 rgba(255,43,26,.7);
  animation:liveDotPulse 1.4s ease-out infinite;
  flex-shrink:0;
}
@keyframes liveNowPulse{
  0%, 100%{box-shadow:6px 6px 0 var(--orange), 0 0 18px rgba(232,116,42,.45)}
  50%    {box-shadow:6px 6px 0 var(--orange), 0 0 38px rgba(255,91,58,.95)}
}
@keyframes liveDotPulse{
  0%  {box-shadow:0 0 0 0 rgba(255,43,26,.85)}
  70% {box-shadow:0 0 0 14px rgba(255,43,26,0)}
  100%{box-shadow:0 0 0 0 rgba(255,43,26,0)}
}
@media (prefers-reduced-motion: reduce){
  .live-now-badge, .live-dot{animation:none}
}

/* =============================================================================
   REQUEST FORM + TICKER
   ============================================================================= */
.live-requests{
  max-width:760px;margin:56px auto 0;text-align:center;
}
.live-sub-title{
  font-family:var(--display-font);
  font-size:clamp(28px, 4vw, 44px);
  color:var(--sky);
  letter-spacing:3px;
  text-shadow:4px 4px 0 #000;
  transform:rotate(-1deg);
  margin-bottom:8px;
}
.live-sub{
  font-family:var(--brand-font);
  font-size:clamp(32px, 5vw, 56px);
  letter-spacing:3px;
  color:var(--orange);
  text-shadow:4px 4px 0 #000, -1px -1px 0 #000;
  transform:rotate(-1.5deg);
  margin:0 auto 22px;max-width:760px;
  line-height:1.05;
}
.live-form{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
  margin:0 auto 40px;
}
.live-input{
  flex:1;min-width:220px;
  padding:14px 16px;border:4px solid #000;border-radius:8px;
  font-size:18px;background:#fff;color:#000;
  box-shadow:4px 4px 0 #000;
  font-family:var(--font);
}
.live-input:focus{outline:none;box-shadow:4px 4px 0 var(--orange)}

/* Block-message banner shown when a submission is rejected. */
.live-form-error[hidden]{display:none}
.live-form-error{
  max-width:560px;margin:-24px auto 28px;
  padding:12px 18px;
  background:#3a0e0e;
  color:#ffd9d2;
  border:3px solid #ff5b3a;
  border-radius:8px;
  box-shadow:4px 4px 0 #000;
  font-size:16px;
  text-align:center;
  animation:tickerIn .35s ease-out;
}
.live-feed-heading{margin-top:18px}

/* Rotating ticker — one card at a time, fading in/out. */
.live-ticker{
  position:relative;
  min-height:160px;
  display:flex;align-items:center;justify-content:center;
  text-align:left;
}
.live-ticker-card{
  width:100%;
  background:rgba(13,13,18,.78);
  border:3px solid #000;
  border-left:6px solid var(--orange);
  border-radius:10px;
  padding:18px 22px;
  box-shadow:5px 5px 0 #000;
  animation:tickerIn .45s cubic-bezier(.2,.7,.3,1.2) both;
}
.live-ticker-card.is-leaving{animation:tickerOut .35s ease-in both}
.lt-head{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;margin-bottom:6px;flex-wrap:wrap;
}
.lt-name{
  font-family:var(--display-font);
  font-size:26px;color:var(--orange);letter-spacing:2px;
}
.lt-time{font-size:13px;color:#9ed8ee;opacity:.8}
.lt-msg{
  font-size:19px;color:var(--paper);
  line-height:1.45;word-wrap:break-word;overflow-wrap:anywhere;
}
.live-ticker-empty{width:100%;color:#cfe7f3}
.live-ticker-waiting{
  text-align:center;font-style:italic;font-size:18px;opacity:.65;
  animation:tickerEmptyFade 2.4s ease-in-out infinite;
}

/* =============================================================================
   TOP REQUESTS LEADERBOARD
   ============================================================================= */
.leaderboard{
  width:100%;padding:6px 4px 4px;
  animation:tickerIn .35s ease-out both;
}
.lb-title{
  font-family:var(--brand-font);
  font-size:clamp(22px, 3vw, 30px);
  letter-spacing:3px;
  color:var(--orange);
  text-shadow:3px 3px 0 #000;
  text-align:center;
  margin-bottom:14px;
  transform:rotate(-1deg);
}
.lb-list{
  list-style:none;padding:0;margin:0;
  display:grid;gap:8px;
}
.lb-row{
  display:flex;align-items:stretch;gap:12px;
  background:rgba(13,13,18,.65);
  border:2px solid #000;border-radius:8px;
  padding:8px 12px;
  box-shadow:3px 3px 0 #000;
}
.lb-rank{
  flex-shrink:0;
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  background:var(--sky);color:#0d0d12;
  border:2px solid #000;border-radius:50%;
  font-family:var(--display-font);font-size:20px;letter-spacing:1px;
  align-self:center;
}
.lb-row.lb-rank-1 .lb-rank{
  background:var(--orange);color:#000;
  box-shadow:0 0 0 0 rgba(232,116,42,.6);
  animation:lbRank1Pulse 1.8s ease-in-out infinite;
}
.lb-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;justify-content:center}
.lb-headrow{display:flex;align-items:center;gap:10px}
.lb-song{
  flex:1;min-width:0;
  font-family:var(--display-font);
  font-size:17px;letter-spacing:1.5px;
  color:var(--paper);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lb-row.lb-rank-1 .lb-song{color:var(--orange-light);font-size:19px}
.lb-pct{
  font-family:var(--display-font);
  font-size:18px;color:var(--sky);
  flex-shrink:0;
  min-width:54px;text-align:right;
}
.lb-row.lb-rank-1 .lb-pct{color:var(--orange);font-size:22px;min-width:62px}
.lb-plus{
  flex-shrink:0;
  width:30px;height:30px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--orange);color:#000;
  border:2px solid #000;border-radius:50%;
  box-shadow:2px 2px 0 #000;
  font-family:var(--display-font);
  font-size:22px;font-weight:bold;line-height:1;
  cursor:pointer;
  padding:0;
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.lb-plus:hover{
  transform:translate(-1px,-1px);
  box-shadow:3px 3px 0 #000;
  background:var(--orange-light);
}
.lb-plus:active{
  transform:translate(1px,1px);
  box-shadow:1px 1px 0 #000;
}
.lb-plus.lb-plus-tapped{
  background:var(--sky);color:#0d0d12;transform:scale(1.12);
}
.lb-plus:disabled{cursor:default}
.lb-bar{
  width:100%;height:8px;
  background:rgba(255,255,255,.12);
  border:1px solid #000;border-radius:4px;
  overflow:hidden;
}
.lb-bar-fill{
  height:100%;
  background:linear-gradient(90deg, var(--orange), var(--orange-light));
  border-radius:3px 0 0 3px;
  animation:lbBarGrow .9s cubic-bezier(.2,.7,.3,1) both;
  transform-origin:left center;
}
.lb-row.lb-rank-1 .lb-bar-fill{
  background:linear-gradient(90deg, #ff5b3a, #ffb070);
  box-shadow:0 0 12px rgba(255,91,58,.5);
}

@keyframes tickerIn{
  from{opacity:0;transform:translateY(-12px) scale(.98)}
  to  {opacity:1;transform:translateY(0) scale(1)}
}
@keyframes tickerOut{
  from{opacity:1;transform:translateY(0) scale(1)}
  to  {opacity:0;transform:translateY(8px) scale(.98)}
}
@keyframes tickerEmptyFade{
  0%,100%{opacity:.45}
  50%   {opacity:.85}
}
@keyframes lbBarGrow{
  from{transform:scaleX(0)}
  to  {transform:scaleX(1)}
}
@keyframes lbRank1Pulse{
  0%,100%{box-shadow:0 0 0 0  rgba(232,116,42,.55)}
  50%    {box-shadow:0 0 0 10px rgba(232,116,42,0)}
}
@media (prefers-reduced-motion: reduce){
  .live-ticker-card, .live-ticker-card.is-leaving, .live-ticker-empty,
  .lb-bar-fill, .lb-row.lb-rank-1 .lb-rank, .leaderboard{animation:none}
  .lb-bar-fill{transform:scaleX(1)}
}
@media (max-width:520px){
  .lb-rank{width:28px;height:28px;font-size:16px}
  .lb-song{font-size:15px}
  .lb-pct{font-size:16px}
  .lb-row.lb-rank-1 .lb-song{font-size:16px}
  .lb-row.lb-rank-1 .lb-pct{font-size:19px}
  .lb-plus{width:26px;height:26px;font-size:18px}
}

/* =============================================================================
   ALL REQUESTS BUTTON + MODAL
   ============================================================================= */
.all-requests-btn{
  display:block;margin:22px auto 0;
  padding:12px 28px;
  font-family:var(--display-font);
  font-size:20px;letter-spacing:3px;
  background:#0d0d12;color:var(--sky);
  border:3px solid var(--sky);border-radius:8px;
  box-shadow:4px 4px 0 #000;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.all-requests-btn:hover{
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 #000;
  background:#16161f;
}
.all-requests-btn:active{
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 #000;
}
.all-requests-modal[hidden]{display:none}
.all-requests-modal{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  animation:modalFadeIn .2s ease-out;
}
.all-requests-overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(2px);
  cursor:pointer;
}
.all-requests-panel{
  position:relative;z-index:1;
  width:100%;max-width:640px;max-height:84vh;
  display:flex;flex-direction:column;
  background:#0d0d12;
  border:4px solid #000;border-radius:14px;
  box-shadow:8px 8px 0 var(--sky), 0 0 40px rgba(158,216,238,.18);
  padding:24px 24px 18px;
}
.all-requests-panel::before{
  content:"";position:absolute;inset:0;
  border:3px solid var(--sky);
  pointer-events:none;border-radius:10px;margin:6px;
}
.all-requests-close{
  align-self:center;
  margin-top:16px;
  padding:12px 36px;
  font-family:var(--display-font);
  font-size:18px;letter-spacing:3px;
  background:var(--orange);color:#000;
  border:3px solid #000;border-radius:8px;
  box-shadow:4px 4px 0 #000;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.all-requests-close:hover{
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 #000;
  background:var(--orange-light);
}
.all-requests-close:active{
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 #000;
}
.all-requests-title{
  font-family:var(--brand-font);
  font-size:clamp(28px, 4.5vw, 40px);
  letter-spacing:3px;
  color:var(--sky);
  text-shadow:3px 3px 0 #000;
  text-align:center;
  margin-bottom:16px;
  transform:rotate(-1deg);
}
.all-requests-list{
  list-style:none;padding:0;margin:0;
  display:grid;gap:8px;
  overflow-y:auto;flex:1;
  padding-right:4px;
}
.all-requests-list::-webkit-scrollbar{width:10px}
.all-requests-list::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:5px}
.all-requests-list::-webkit-scrollbar-thumb{background:var(--sky);border-radius:5px}
.all-requests-empty{
  text-align:center;font-style:italic;
  color:#cfe7f3;opacity:.7;padding:30px 10px;
}
@keyframes modalFadeIn{
  from{opacity:0;transform:scale(.96)}
  to  {opacity:1;transform:scale(1)}
}
@media (prefers-reduced-motion: reduce){
  .all-requests-modal{animation:none}
}
@media (max-width:520px){
  .all-requests-panel{padding:20px 16px 18px;max-height:88vh}
  .all-requests-close{padding:14px 38px;font-size:17px;width:100%;margin-top:14px}
}

/* =============================================================================
   LIVE CHAT (Restream embed)
   ============================================================================= */
.live-chat[hidden]{display:none}
.live-chat{
  max-width:760px;margin:56px auto 0;text-align:center;
}
.live-chat-heading{margin-bottom:18px}
.live-chat-wrap{
  max-width:760px;margin:0 auto;
  border:6px solid #000;border-radius:12px;
  box-shadow:12px 12px 0 var(--sky);
  background:#0d0d12;
  overflow:hidden;
  position:relative;
}
.live-chat-wrap::before{
  content:"";position:absolute;inset:0;
  border:3px solid var(--sky);
  pointer-events:none;border-radius:8px;margin:6px;
  z-index:2;
}
.live-chat-frame{
  display:block;width:100%;height:560px;border:0;
  background:#0d0d12;
}
@media (max-width:640px){
  .live-chat-frame{height:480px}
}