/* Two Ranges Live v0.1.0 */
.trl-live,.trl-live *{box-sizing:border-box}.trl-live{--trl-accent:#f0c63a;--trl-green:#425d42;--trl-dark:#1f2d23;--trl-paper:#f8f1d8;--trl-text:#1f2d23;--trl-sponsor-bg:rgba(31,45,35,.92);--trl-sponsor-text:#fffaf0;color:var(--trl-text);background:var(--trl-paper);border-radius:28px;overflow:hidden;box-shadow:0 18px 60px rgba(31,45,35,.12)}.trl-live-header,.trl-live-footer{width:min(1120px,calc(100% - 32px));margin:0 auto;padding:clamp(1.2rem,3vw,2.2rem) 0}.trl-kicker{margin:0 0 .4rem;color:var(--trl-green);font-family:"Courier New",Courier,monospace;font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.trl-title-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.trl-title-row h2{margin:0;color:var(--trl-dark);font-size:clamp(2rem,4.5vw,4.25rem);line-height:.98}.trl-deck{max-width:72ch;margin:.85rem 0 0;font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.55}.trl-status{display:inline-flex;align-items:center;gap:.45rem;width:max-content;padding:.38rem .7rem;border:1px solid rgba(31,45,35,.18);border-radius:999px;background:rgba(255,255,255,.55);color:var(--trl-dark);font-family:"Courier New",Courier,monospace;font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.trl-status span{width:.6rem;height:.6rem;border-radius:999px;background:#999}.trl-status-live span{background:#21b56d;box-shadow:0 0 0 .35rem rgba(33,181,109,.16)}.trl-status-offline span{background:#8a8a7a}.trl-live-stage{width:min(1180px,calc(100% - 32px));margin:0 auto;padding-bottom:clamp(1.2rem,3vw,2rem)}.trl-player-wrap{position:relative;width:100%;overflow:hidden;isolation:isolate;border-radius:24px;background:#111b14;box-shadow:0 20px 60px rgba(31,45,35,.18)}.trl-ratio-16-9{aspect-ratio:16/9}.trl-ratio-4-3{aspect-ratio:4/3}.trl-ratio-21-9{aspect-ratio:21/9}.trl-ratio-1-1{aspect-ratio:1/1}.trl-player,.trl-iframe-embed,.trl-iframe-embed iframe,.trl-offline-panel{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}.trl-player-video{object-fit:cover;background:#111b14}.trl-offline-panel{display:grid;place-items:center;background:radial-gradient(circle at 70% 20%,rgba(240,198,58,.14),transparent 32%),linear-gradient(135deg,#1f2d23,#101812);color:#fffaf0;text-align:center}.trl-offline-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35}.trl-offline-copy{position:relative;z-index:1;width:min(600px,calc(100% - 40px))}.trl-offline-copy strong{display:block;margin-bottom:.7rem;font-size:clamp(1.4rem,3vw,2.8rem)}.trl-offline-copy p{margin:0 auto;max-width:55ch;line-height:1.55}.trl-disclosure,.trl-privacy-note{max-width:78ch;margin:.6rem 0;color:rgba(31,45,35,.78);font-size:.92rem;line-height:1.5}.trl-disclosure{font-weight:800}.trl-button{display:inline-flex;padding:.75rem 1rem;border-radius:999px;background:var(--trl-dark);color:#fffaf0;font-weight:800;text-decoration:none}.trl-sponsors{display:grid;gap:.75rem}.trl-sponsor-card{--trl-sponsor-bg:rgba(31,45,35,.92);--trl-sponsor-text:#fffaf0;position:relative;display:flex;align-items:center;gap:.75rem;min-width:0;padding:.75rem;border:1px solid rgba(255,250,240,.18);border-radius:14px;background:var(--trl-sponsor-bg);color:var(--trl-sponsor-text);text-decoration:none;box-shadow:0 12px 35px rgba(0,0,0,.18)}.trl-sponsor-card:hover{color:var(--trl-sponsor-text);transform:translateY(-1px)}.trl-sponsor-tag{position:absolute;top:.35rem;right:.45rem;color:rgba(255,250,240,.68);font-family:"Courier New",Courier,monospace;font-size:.56rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.trl-logo-wrap{display:grid;place-items:center;flex:0 0 72px;min-height:52px;padding:.35rem;border-radius:10px;background:rgba(255,250,240,.9)}.trl-sponsor-logo{display:block;max-width:100%;max-height:48px;width:auto;height:auto;object-fit:contain}.trl-sponsor-copy{display:grid;gap:.15rem;min-width:0;padding-right:2rem}.trl-sponsor-copy strong{color:inherit;line-height:1.1}.trl-sponsor-copy em{color:rgba(255,250,240,.78);font-style:normal;font-size:.82rem;line-height:1.25}.trl-sponsors-corner{position:absolute;right:.9rem;bottom:.9rem;z-index:3;width:min(280px,calc(100% - 1.8rem))}.trl-sponsors-corner .trl-sponsor-card{padding:.55rem .65rem;border-radius:12px;background:rgba(31,45,35,.88);backdrop-filter:blur(8px)}.trl-sponsors-corner .trl-logo-wrap{flex-basis:54px;min-height:42px}.trl-sponsors-banner{margin-top:.85rem}.trl-sponsors-banner .trl-sponsor-card{justify-content:center;min-height:76px;border-radius:18px}.trl-sponsors-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:.85rem}.trl-sponsors-grid .trl-sponsor-card{display:grid;justify-items:center;text-align:center}.trl-sponsors-grid .trl-logo-wrap{width:100%}.trl-sponsors-grid .trl-sponsor-copy{padding-right:0}.trl-sponsors-rotating{position:relative;min-height:98px;margin-top:.85rem;overflow:hidden}.trl-sponsors-rotating .trl-sponsor-card{position:absolute;inset:0;opacity:0;animation:trlSponsorRotate calc(var(--trl-rotation,8s) * var(--trl-count,1)) infinite}.trl-sponsors-rotating .trl-sponsor-card:nth-child(1){animation-delay:calc(var(--trl-rotation,8s)*0)}.trl-sponsors-rotating .trl-sponsor-card:nth-child(2){animation-delay:calc(var(--trl-rotation,8s)*1)}.trl-sponsors-rotating .trl-sponsor-card:nth-child(3){animation-delay:calc(var(--trl-rotation,8s)*2)}.trl-sponsors-rotating .trl-sponsor-card:nth-child(4){animation-delay:calc(var(--trl-rotation,8s)*3)}.trl-sponsors-rotating .trl-sponsor-card:nth-child(5){animation-delay:calc(var(--trl-rotation,8s)*4)}.trl-sponsors-rotating .trl-sponsor-card:nth-child(6){animation-delay:calc(var(--trl-rotation,8s)*5)}@keyframes trlSponsorRotate{0%,10%{opacity:1;transform:translateY(0)}18%,100%{opacity:0;transform:translateY(8px)}}.trl-sponsors-slate{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));padding:clamp(1rem,3vw,2rem);border-radius:24px;background:radial-gradient(circle at 20% 10%,rgba(240,198,58,.2),transparent 34%),var(--trl-dark)}.trl-sponsored-label{grid-column:1/-1;margin:0 0 .5rem;color:var(--trl-accent);font-family:"Courier New",Courier,monospace;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.trl-overlay-page{margin:0;min-height:100vh;overflow:hidden;background:transparent}.trl-obs-overlay{width:100vw;min-height:100vh;padding:24px;display:grid;align-content:end;color:#fffaf0}.trl-obs-bg-dark{background:#111b14}.trl-obs-bg-green{background:var(--trl-green)}.trl-obs-bg-transparent{background:transparent}.trl-obs-overlay .trl-sponsors{margin:0}.trl-obs-overlay .trl-sponsors-rotating{width:min(520px,100%)}.trl-obs-overlay .trl-sponsor-card{backdrop-filter:blur(8px)}@media(max-width:900px){.trl-sponsors-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.trl-title-row h2{font-size:clamp(2rem,9vw,3.3rem)}}@media(max-width:620px){.trl-live{border-radius:18px}.trl-player-wrap{border-radius:16px}.trl-sponsors-grid{grid-template-columns:1fr}.trl-sponsors-corner{position:static;width:auto;margin:.75rem}}


/* v0.1.1 — UI / styling upgrade pass */
.trl-live{
  position:relative;
  isolation:isolate;
  border:1px solid rgba(31,45,35,.12);
  background:
    radial-gradient(circle at 92% 4%, rgba(240,198,58,.22), transparent 24rem),
    radial-gradient(circle at 0% 82%, rgba(66,93,66,.14), transparent 28rem),
    linear-gradient(180deg, rgba(248,241,216,.98), rgba(248,241,216,.92));
}

.trl-live::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.13;
  background-image:
    linear-gradient(135deg, transparent 0 44%, rgba(31,45,35,.16) 44% 45%, transparent 45% 100%),
    linear-gradient(45deg, transparent 0 44%, rgba(31,45,35,.12) 44% 45%, transparent 45% 100%);
  background-size:42px 42px,58px 58px;
  pointer-events:none;
}

.trl-live-header{
  position:relative;
  padding-top:clamp(1.6rem,4vw,3rem);
}

.trl-live-header::after{
  content:"";
  display:block;
  width:min(260px,60vw);
  height:4px;
  margin-top:clamp(1rem,2vw,1.5rem);
  border-radius:999px;
  background:linear-gradient(90deg,var(--trl-accent),rgba(66,93,66,.2));
}

.trl-kicker{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  width:max-content;
  padding:.34rem .58rem;
  border:1px solid rgba(66,93,66,.18);
  border-radius:999px;
  background:rgba(255,255,255,.44);
}

.trl-kicker::before{
  content:"";
  width:.55rem;
  height:.55rem;
  border-radius:999px;
  background:var(--trl-accent);
  box-shadow:0 0 0 .28rem rgba(240,198,58,.18);
}

.trl-title-row{align-items:flex-start;}

.trl-title-row h2{
  max-width:920px;
  letter-spacing:-.045em;
  text-wrap:balance;
}

.trl-deck{color:rgba(31,45,35,.82);}

.trl-status{
  margin-top:.25rem;
  border-color:rgba(31,45,35,.16);
  background:rgba(255,250,240,.74);
  box-shadow:0 8px 22px rgba(31,45,35,.06);
}

.trl-status-live{color:#123f28;}

.trl-status-live span{animation:trlPulse 1.55s ease-in-out infinite;}

@keyframes trlPulse{
  0%,100%{transform:scale(.9); box-shadow:0 0 0 .25rem rgba(33,181,109,.16);}
  50%{transform:scale(1.05); box-shadow:0 0 0 .5rem rgba(33,181,109,.08);}
}

.trl-live-meta-strip{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:0 0 .7rem;
}

.trl-live-meta-strip span{
  display:inline-flex;
  align-items:center;
  padding:.32rem .58rem;
  border:1px solid rgba(66,93,66,.16);
  border-radius:999px;
  background:rgba(255,250,240,.68);
  color:rgba(31,45,35,.76);
  font-family:"Courier New", Courier, monospace;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.trl-player-wrap{
  border:1px solid rgba(255,250,240,.2);
  outline:1px solid rgba(31,45,35,.16);
  outline-offset:6px;
  background:linear-gradient(135deg,#101812,#1f2d23);
}

.trl-player-wrap::before{
  content:"LIVE VIEW";
  position:absolute;
  left:.9rem;
  top:.85rem;
  z-index:2;
  padding:.32rem .48rem;
  border:1px solid rgba(255,250,240,.4);
  border-radius:5px;
  background:rgba(17,27,20,.68);
  color:#fffaf0;
  font-family:"Courier New", Courier, monospace;
  font-size:.65rem;
  font-weight:900;
  letter-spacing:.11em;
  pointer-events:none;
}

.trl-is-offline .trl-player-wrap::before{content:"OFFLINE";}

.trl-player-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,250,240,.08), inset 0 -80px 120px rgba(0,0,0,.18);
}

.trl-player,.trl-iframe-embed iframe,.trl-offline-panel{z-index:0;}

.trl-offline-copy{
  padding:1.25rem;
  border:1px solid rgba(255,250,240,.16);
  border-radius:18px;
  background:rgba(17,27,20,.48);
  backdrop-filter:blur(8px);
}

.trl-offline-copy strong{
  color:var(--trl-accent);
  text-wrap:balance;
}

.trl-sponsor-card{
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.trl-sponsor-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  opacity:.12;
  background:linear-gradient(135deg,var(--trl-accent),transparent 44%);
  pointer-events:none;
}

.trl-sponsor-card>*{position:relative;z-index:1;}

.trl-sponsor-card:hover{
  border-color:rgba(240,198,58,.52);
  box-shadow:0 18px 46px rgba(0,0,0,.22);
}

.trl-sponsor-tag{
  top:.5rem;
  right:.55rem;
  padding:.12rem .32rem;
  border-radius:3px;
  background:rgba(255,250,240,.12);
}

.trl-logo-wrap{
  border:1px solid rgba(255,255,255,.5);
  box-shadow:inset 0 0 0 1px rgba(31,45,35,.05);
}

.trl-sponsors-banner .trl-sponsor-card{
  min-height:86px;
  background:linear-gradient(90deg,rgba(31,45,35,.96),rgba(66,93,66,.92));
}

.trl-sponsors-grid .trl-sponsor-card{min-height:160px;padding:1rem;}
.trl-sponsors-grid .trl-logo-wrap{min-height:74px;}
.trl-sponsors-corner{filter:drop-shadow(0 18px 35px rgba(0,0,0,.28));}
.trl-sponsors-corner .trl-sponsor-card{border-radius:16px;}
.trl-sponsors-rotating{border-radius:18px;}
.trl-sponsors-rotating .trl-sponsor-card{background:linear-gradient(135deg,rgba(31,45,35,.96),rgba(31,45,35,.82));}

.trl-sponsors-slate{
  margin-top:1rem;
  border:1px solid rgba(255,250,240,.16);
  box-shadow:0 20px 60px rgba(31,45,35,.14);
}

.trl-sponsored-label{
  width:max-content;
  padding:.25rem .45rem;
  border:1px solid rgba(240,198,58,.28);
  border-radius:5px;
  background:rgba(240,198,58,.08);
}

.trl-live-footer{border-top:1px solid rgba(31,45,35,.1);}

.trl-disclosure{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.4rem .6rem;
  border-radius:999px;
  background:rgba(66,93,66,.1);
}

.trl-disclosure::before{
  content:"AD";
  padding:.12rem .28rem;
  border-radius:3px;
  background:var(--trl-dark);
  color:#fffaf0;
  font-family:"Courier New", Courier, monospace;
  font-size:.68rem;
  letter-spacing:.08em;
}

.trl-privacy-note{color:rgba(31,45,35,.65);}

.trl-button{
  box-shadow:0 12px 30px rgba(31,45,35,.14);
  transition:transform .18s ease, box-shadow .18s ease;
}

.trl-button:hover{
  color:#fffaf0;
  transform:translateY(-1px);
  box-shadow:0 18px 42px rgba(31,45,35,.18);
}

/* Layout variants */
.trl-layout-grid .trl-live-stage{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr);
  gap:clamp(1rem,3vw,1.6rem);
  align-items:start;
}

.trl-layout-grid .trl-live-meta-strip,
.trl-layout-grid .trl-player-wrap{grid-column:1;}

.trl-layout-grid .trl-sponsors-grid{
  grid-column:2;
  grid-row:1 / span 2;
  margin-top:0;
  grid-template-columns:1fr;
}

@media(max-width:900px){
  .trl-layout-grid .trl-live-stage{display:block;}
  .trl-layout-grid .trl-sponsors-grid{margin-top:.85rem;}
  .trl-player-wrap{outline-offset:3px;}
}

@media(max-width:620px){
  .trl-live-header,.trl-live-stage,.trl-live-footer{width:min(100% - 22px,1120px);}
  .trl-live-meta-strip span{font-size:.66rem;}
  .trl-player-wrap::before{left:.6rem;top:.6rem;}
  .trl-sponsor-card{align-items:flex-start;}
  .trl-logo-wrap{flex-basis:62px;}
  .trl-sponsors-banner .trl-sponsor-card{justify-content:flex-start;}
}


/* v0.1.2 — sponsor/logo polish
   The sponsor areas now treat the logo as the hero asset instead of a tiny thumbnail. */
.trl-sponsor-card{
  --trl-logo-panel: rgba(255,250,240,.94);
  --trl-logo-panel-border: rgba(255,250,240,.58);
  gap: .95rem;
}

.trl-logo-wrap{
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 clamp(76px, 9vw, 112px);
  min-height: clamp(62px, 8vw, 92px);
  padding: .65rem;
  border-radius: 14px;
  background:
    radial-gradient(circle at 15% 0%, rgba(240,198,58,.18), transparent 42%),
    var(--trl-logo-panel);
  border: 1px solid var(--trl-logo-panel-border);
  box-shadow:
    inset 0 0 0 1px rgba(31,45,35,.06),
    0 10px 28px rgba(0,0,0,.1);
}

.trl-sponsor-logo{
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 74px;
  object-fit: contain;
  filter: drop-shadow(0 2px 1px rgba(31,45,35,.08));
}

.trl-logo-fallback{
  color: var(--trl-dark);
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.trl-sponsor-copy strong{
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  letter-spacing: -.015em;
}

.trl-sponsor-copy em{
  font-size: .88rem;
}

/* Corner bug: tidy broadcast-style bug with a strong logo tile */
.trl-sponsors-corner{
  width: min(360px, calc(100% - 1.8rem));
}

.trl-sponsors-corner .trl-sponsor-card{
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  min-height: 82px;
  padding: .62rem .8rem;
  border-radius: 16px;
}

.trl-sponsors-corner .trl-logo-wrap{
  flex-basis: auto;
  width: 72px;
  min-height: 58px;
  padding: .45rem;
  border-radius: 12px;
}

.trl-sponsors-corner .trl-sponsor-logo{
  max-height: 46px;
}

.trl-sponsors-corner .trl-sponsor-copy{
  padding-right: 2rem;
}

.trl-sponsors-corner .trl-sponsor-copy strong{
  font-size: .98rem;
}

.trl-sponsors-corner .trl-sponsor-copy em{
  font-size: .74rem;
}

/* Banner: cleaner "supported by" strip, logo has room to breathe */
.trl-sponsors-banner .trl-sponsor-card{
  justify-content: flex-start;
  gap: 1.1rem;
  padding: .85rem 1.15rem;
}

.trl-sponsors-banner .trl-logo-wrap{
  flex-basis: clamp(92px, 12vw, 140px);
  min-height: 72px;
}

.trl-sponsors-banner .trl-sponsor-logo{
  max-height: 62px;
}

.trl-sponsors-banner .trl-sponsor-copy strong{
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
}

.trl-sponsors-banner .trl-sponsor-copy em{
  font-size: .92rem;
}

/* Grid: sponsor card becomes a clean logo-first tile */
.trl-sponsors-grid{
  align-items: stretch;
}

.trl-sponsors-grid .trl-sponsor-card{
  display: grid;
  grid-template-rows: minmax(94px, auto) auto;
  align-content: start;
  justify-items: stretch;
  gap: .75rem;
  min-height: 190px;
  padding: .85rem;
  text-align: center;
}

.trl-sponsors-grid .trl-logo-wrap{
  width: 100%;
  min-height: 102px;
  padding: .85rem;
}

.trl-sponsors-grid .trl-sponsor-logo{
  max-height: 82px;
}

.trl-sponsors-grid .trl-sponsor-copy{
  display: grid;
  gap: .2rem;
  justify-items: center;
  padding: 0 .35rem .2rem;
}

.trl-sponsors-grid .trl-sponsor-copy strong{
  font-size: 1.02rem;
}

.trl-sponsors-grid .trl-sponsor-copy em{
  font-size: .78rem;
}

/* Rotating: lower-third style, logo large enough to read */
.trl-sponsors-rotating{
  min-height: 112px;
}

.trl-sponsors-rotating .trl-sponsor-card{
  gap: 1rem;
  padding: .85rem 1rem;
}

.trl-sponsors-rotating .trl-logo-wrap{
  flex-basis: clamp(88px, 11vw, 130px);
  min-height: 76px;
}

.trl-sponsors-rotating .trl-sponsor-logo{
  max-height: 64px;
}

/* Slate: stronger sponsor board */
.trl-sponsors-slate .trl-sponsor-card{
  display: grid;
  grid-template-rows: minmax(96px, auto) auto;
  justify-items: center;
  text-align: center;
  min-height: 190px;
}

.trl-sponsors-slate .trl-logo-wrap{
  width: 100%;
  min-height: 105px;
}

.trl-sponsors-slate .trl-sponsor-logo{
  max-height: 84px;
}

.trl-sponsors-slate .trl-sponsor-copy{
  padding: 0;
}

/* If the "logo" is actually an illustrated avatar, don't squash it awkwardly. */
.trl-sponsor-logo[src*=".jpg"],
.trl-sponsor-logo[src*=".jpeg"]{
  border-radius: 10px;
}

@media(max-width: 620px){
  .trl-sponsor-card{
    gap: .75rem;
  }

  .trl-logo-wrap{
    flex-basis: 74px;
    min-height: 62px;
  }

  .trl-sponsors-corner .trl-sponsor-card,
  .trl-sponsors-banner .trl-sponsor-card{
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .trl-sponsors-grid .trl-sponsor-card,
  .trl-sponsors-slate .trl-sponsor-card{
    min-height: 0;
  }
}


/* v0.1.3 — Sponsor-aware fullscreen
   Native Facebook/YouTube fullscreen only shows the iframe/video itself.
   This custom button fullscreen's the wrapper so site sponsor overlays remain visible. */
.trl-fullscreen-toggle{
  position:absolute;
  right:.9rem;
  top:.85rem;
  z-index:4;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.34rem .55rem;
  border:1px solid rgba(255,250,240,.45);
  border-radius:6px;
  background:rgba(17,27,20,.74);
  color:#fffaf0;
  font-family:"Courier New", Courier, monospace;
  font-size:.65rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1;
  cursor:pointer;
  backdrop-filter:blur(8px);
}

.trl-fullscreen-toggle::before{
  content:"⛶";
  font-family:Arial, sans-serif;
  font-size:.85rem;
  line-height:.8;
}

.trl-fullscreen-toggle:hover,
.trl-fullscreen-toggle:focus{
  border-color:rgba(240,198,58,.75);
  color:#fffaf0;
  background:rgba(31,45,35,.9);
}

.trl-player-wrap:fullscreen,
.trl-player-wrap:-webkit-full-screen{
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
  aspect-ratio:auto !important;
  border-radius:0 !important;
  outline:0 !important;
  background:#101812 !important;
}

.trl-player-wrap:fullscreen .trl-player,
.trl-player-wrap:-webkit-full-screen .trl-player,
.trl-player-wrap:fullscreen .trl-iframe-embed,
.trl-player-wrap:-webkit-full-screen .trl-iframe-embed,
.trl-player-wrap:fullscreen .trl-iframe-embed iframe,
.trl-player-wrap:-webkit-full-screen .trl-iframe-embed iframe,
.trl-player-wrap:fullscreen .trl-offline-panel,
.trl-player-wrap:-webkit-full-screen .trl-offline-panel{
  width:100vw !important;
  height:100vh !important;
  object-fit:contain;
}

.trl-player-wrap:fullscreen::before,
.trl-player-wrap:-webkit-full-screen::before{
  left:1.2rem;
  top:1.2rem;
}

.trl-player-wrap:fullscreen .trl-fullscreen-toggle,
.trl-player-wrap:-webkit-full-screen .trl-fullscreen-toggle{
  right:1.2rem;
  top:1.2rem;
}

.trl-player-wrap:fullscreen .trl-sponsors-corner,
.trl-player-wrap:-webkit-full-screen .trl-sponsors-corner{
  right:1.2rem;
  bottom:1.2rem;
  width:min(440px, calc(100vw - 2.4rem));
}

.trl-player-wrap:fullscreen .trl-sponsors-corner .trl-sponsor-card,
.trl-player-wrap:-webkit-full-screen .trl-sponsors-corner .trl-sponsor-card{
  min-height:96px;
  grid-template-columns:92px minmax(0, 1fr);
  background:rgba(31,45,35,.88);
  backdrop-filter:blur(12px);
}

.trl-player-wrap:fullscreen .trl-sponsors-corner .trl-logo-wrap,
.trl-player-wrap:-webkit-full-screen .trl-sponsors-corner .trl-logo-wrap{
  width:92px;
  min-height:72px;
}

.trl-player-wrap:fullscreen .trl-sponsors-corner .trl-sponsor-logo,
.trl-player-wrap:-webkit-full-screen .trl-sponsors-corner .trl-sponsor-logo{
  max-height:60px;
}

.trl-player-wrap:fullscreen .trl-sponsor-tag,
.trl-player-wrap:-webkit-full-screen .trl-sponsor-tag{
  font-size:.62rem;
}

@media(max-width:620px){
  .trl-fullscreen-toggle{
    right:.6rem;
    top:.6rem;
    font-size:.58rem;
    padding:.3rem .45rem;
  }
}


/* v0.1.4 — video-first sponsor treatment
   Sponsors should support the stream, not dominate it. The on-video sponsor bug is now
   compact, translucent, and text-led with a small logo/avatar. Full/default layout now
   avoids the extra 4-card grid under the player. Use layout="grid" when a sponsor grid
   is wanted intentionally. */

/* General sponsor tags: stop the label consuming visual space */
.trl-sponsor-tag{
  width: auto !important;
  max-width: max-content !important;
  padding: .08rem .24rem !important;
  border-radius: 3px !important;
  background: rgba(255,250,240,.12) !important;
  color: rgba(255,250,240,.62) !important;
  font-size: .48rem !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
}

/* On-video corner bug: smaller, more transparent, lower visual priority */
.trl-sponsors-corner{
  right: .75rem !important;
  bottom: .75rem !important;
  width: min(230px, calc(100% - 1.5rem)) !important;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.22)) !important;
}

.trl-sponsors-corner .trl-sponsor-card{
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: .48rem !important;
  min-height: 52px !important;
  padding: .42rem .5rem !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,250,240,.14) !important;
  background: rgba(31,45,35,.56) !important;
  color: rgba(255,250,240,.92) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(7px) saturate(1.05) !important;
}

.trl-sponsors-corner .trl-sponsor-card::before{
  opacity: .04 !important;
}

.trl-sponsors-corner .trl-logo-wrap{
  width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  flex-basis: 42px !important;
  padding: .24rem !important;
  border-radius: 8px !important;
  background: rgba(255,250,240,.88) !important;
  border: 1px solid rgba(255,250,240,.22) !important;
  box-shadow: none !important;
}

.trl-sponsors-corner .trl-sponsor-logo{
  max-width: 100% !important;
  max-height: 32px !important;
}

.trl-sponsors-corner .trl-sponsor-copy{
  display: grid !important;
  gap: .04rem !important;
  padding: 0 !important;
  min-width: 0 !important;
}

.trl-sponsors-corner .trl-sponsor-copy strong{
  overflow: hidden !important;
  color: rgba(255,250,240,.96) !important;
  font-size: .72rem !important;
  line-height: 1.05 !important;
  letter-spacing: -.01em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.trl-sponsors-corner .trl-sponsor-copy em{
  overflow: hidden !important;
  color: rgba(255,250,240,.66) !important;
  font-size: .56rem !important;
  line-height: 1.1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.trl-sponsors-corner .trl-sponsor-tag{
  position: absolute !important;
  left: .5rem !important;
  top: -.52rem !important;
  right: auto !important;
  background: rgba(31,45,35,.62) !important;
  color: rgba(255,250,240,.58) !important;
  font-size: .42rem !important;
  backdrop-filter: blur(5px) !important;
}

/* Fullscreen version stays readable but still subtle */
.trl-player-wrap:fullscreen .trl-sponsors-corner,
.trl-player-wrap:-webkit-full-screen .trl-sponsors-corner{
  right: 1rem !important;
  bottom: 1rem !important;
  width: min(260px, calc(100vw - 2rem)) !important;
}

.trl-player-wrap:fullscreen .trl-sponsors-corner .trl-sponsor-card,
.trl-player-wrap:-webkit-full-screen .trl-sponsors-corner .trl-sponsor-card{
  grid-template-columns: 48px minmax(0, 1fr) !important;
  min-height: 58px !important;
  background: rgba(31,45,35,.62) !important;
}

.trl-player-wrap:fullscreen .trl-sponsors-corner .trl-logo-wrap,
.trl-player-wrap:-webkit-full-screen .trl-sponsors-corner .trl-logo-wrap{
  width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
}

.trl-player-wrap:fullscreen .trl-sponsors-corner .trl-sponsor-logo,
.trl-player-wrap:-webkit-full-screen .trl-sponsors-corner .trl-sponsor-logo{
  max-height: 36px !important;
}

/* Below-video banner: more like a quiet supporter strip, less like a second hero block */
.trl-sponsors-banner{
  margin-top: .65rem !important;
}

.trl-sponsors-banner .trl-sponsor-card{
  min-height: 58px !important;
  padding: .5rem .7rem !important;
  border-radius: 12px !important;
  background: rgba(66,93,66,.86) !important;
  box-shadow: 0 8px 22px rgba(31,45,35,.1) !important;
}

.trl-sponsors-banner .trl-logo-wrap{
  flex-basis: 58px !important;
  width: 58px !important;
  min-height: 44px !important;
  padding: .28rem !important;
  border-radius: 8px !important;
}

.trl-sponsors-banner .trl-sponsor-logo{
  max-height: 36px !important;
}

.trl-sponsors-banner .trl-sponsor-copy strong{
  font-size: .9rem !important;
}

.trl-sponsors-banner .trl-sponsor-copy em{
  font-size: .7rem !important;
}

.trl-sponsors-banner .trl-sponsor-tag{
  position: static !important;
  align-self: center !important;
  margin-right: .1rem !important;
}

/* Grid/slate are still larger because they are intentional sponsor areas */
.trl-layout-grid .trl-sponsors-grid,
.trl-sponsors-slate{
  margin-top: .85rem;
}

@media(max-width: 620px){
  .trl-sponsors-corner{
    position: absolute !important;
    right: .5rem !important;
    bottom: .5rem !important;
    width: min(200px, calc(100% - 1rem)) !important;
    margin: 0 !important;
  }

  .trl-sponsors-corner .trl-sponsor-card{
    grid-template-columns: 36px minmax(0, 1fr) !important;
    min-height: 46px !important;
    padding: .35rem .42rem !important;
  }

  .trl-sponsors-corner .trl-logo-wrap{
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    flex-basis: 36px !important;
  }

  .trl-sponsors-corner .trl-sponsor-logo{
    max-height: 28px !important;
  }

  .trl-sponsors-corner .trl-sponsor-copy strong{
    font-size: .66rem !important;
  }

  .trl-sponsors-corner .trl-sponsor-copy em{
    display: none !important;
  }
}


/* v0.1.5 — readable compact sponsor bug
   Restores the stronger dark green background while keeping the video-first compact size.
   Also scales the sponsor bug up more in custom fullscreen. */
.trl-sponsors-corner{
  right: .75rem !important;
  bottom: .75rem !important;
  width: min(280px, calc(100% - 1.5rem)) !important;
}

.trl-sponsors-corner .trl-sponsor-card{
  grid-template-columns: 52px minmax(0, 1fr) !important;
  gap: .6rem !important;
  min-height: 66px !important;
  padding: .52rem .66rem !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,250,240,.22) !important;
  background:
    linear-gradient(135deg, rgba(31,45,35,.91), rgba(31,45,35,.78)) !important;
  color: rgba(255,250,240,.96) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.24) !important;
  backdrop-filter: blur(10px) saturate(1.06) !important;
}

.trl-sponsors-corner .trl-sponsor-card::before{
  opacity: .08 !important;
}

.trl-sponsors-corner .trl-logo-wrap{
  width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  flex-basis: 52px !important;
  padding: .32rem !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(240,198,58,.18), transparent 45%),
    rgba(255,250,240,.93) !important;
  border: 1px solid rgba(255,250,240,.36) !important;
  box-shadow: inset 0 0 0 1px rgba(31,45,35,.06) !important;
}

.trl-sponsors-corner .trl-sponsor-logo{
  max-height: 40px !important;
}

.trl-sponsors-corner .trl-sponsor-copy strong{
  color: rgba(255,250,240,1) !important;
  font-size: .86rem !important;
  line-height: 1.08 !important;
  letter-spacing: -.012em !important;
}

.trl-sponsors-corner .trl-sponsor-copy em{
  color: rgba(255,250,240,.78) !important;
  font-size: .66rem !important;
  line-height: 1.14 !important;
}

.trl-sponsors-corner .trl-sponsor-tag{
  left: .58rem !important;
  top: -.56rem !important;
  padding: .1rem .28rem !important;
  background: rgba(31,45,35,.82) !important;
  color: rgba(255,250,240,.72) !important;
  border: 1px solid rgba(255,250,240,.12) !important;
  font-size: .46rem !important;
}

/* Fullscreen: deliberately scale the sponsor up so it stays legible. */
.trl-player-wrap:fullscreen .trl-sponsors-corner,
.trl-player-wrap:-webkit-full-screen .trl-sponsors-corner{
  right: 1.25rem !important;
  bottom: 1.25rem !important;
  width: min(380px, calc(100vw - 2.5rem)) !important;
}

.trl-player-wrap:fullscreen .trl-sponsors-corner .trl-sponsor-card,
.trl-player-wrap:-webkit-full-screen .trl-sponsors-corner .trl-sponsor-card{
  grid-template-columns: 72px minmax(0, 1fr) !important;
  gap: .8rem !important;
  min-height: 88px !important;
  padding: .75rem .9rem !important;
  border-radius: 16px !important;
  background:
    linear-gradient(135deg, rgba(31,45,35,.92), rgba(31,45,35,.78)) !important;
}

.trl-player-wrap:fullscreen .trl-sponsors-corner .trl-logo-wrap,
.trl-player-wrap:-webkit-full-screen .trl-sponsors-corner .trl-logo-wrap{
  width: 72px !important;
  height: 72px !important;
  min-height: 72px !important;
  padding: .48rem !important;
  border-radius: 14px !important;
}

.trl-player-wrap:fullscreen .trl-sponsors-corner .trl-sponsor-logo,
.trl-player-wrap:-webkit-full-screen .trl-sponsors-corner .trl-sponsor-logo{
  max-height: 56px !important;
}

.trl-player-wrap:fullscreen .trl-sponsors-corner .trl-sponsor-copy strong,
.trl-player-wrap:-webkit-full-screen .trl-sponsors-corner .trl-sponsor-copy strong{
  font-size: 1.05rem !important;
}

.trl-player-wrap:fullscreen .trl-sponsors-corner .trl-sponsor-copy em,
.trl-player-wrap:-webkit-full-screen .trl-sponsors-corner .trl-sponsor-copy em{
  display: block !important;
  font-size: .78rem !important;
}

.trl-player-wrap:fullscreen .trl-sponsors-corner .trl-sponsor-tag,
.trl-player-wrap:-webkit-full-screen .trl-sponsors-corner .trl-sponsor-tag{
  top: -.62rem !important;
  font-size: .5rem !important;
}

/* Bottom strip: readable but still quiet. */
.trl-sponsors-banner .trl-sponsor-card{
  background:
    linear-gradient(90deg, rgba(66,93,66,.94), rgba(66,93,66,.82)) !important;
}

.trl-sponsors-banner .trl-sponsor-copy strong{
  font-size: .98rem !important;
}

.trl-sponsors-banner .trl-sponsor-copy em{
  color: rgba(255,250,240,.78) !important;
  font-size: .74rem !important;
}

@media(max-width: 620px){
  .trl-sponsors-corner{
    width: min(235px, calc(100% - 1rem)) !important;
  }

  .trl-sponsors-corner .trl-sponsor-card{
    grid-template-columns: 44px minmax(0, 1fr) !important;
    min-height: 56px !important;
    padding: .44rem .52rem !important;
  }

  .trl-sponsors-corner .trl-logo-wrap{
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  .trl-sponsors-corner .trl-sponsor-logo{
    max-height: 34px !important;
  }

  .trl-sponsors-corner .trl-sponsor-copy strong{
    font-size: .76rem !important;
  }

  .trl-sponsors-corner .trl-sponsor-copy em{
    display: none !important;
  }
}


/* v0.1.6 — OBS overlay fix
   The default overlay uses the rotating placement. With only one active sponsor,
   the old rotation animation showed the logo briefly then faded it out. Single
   rotating sponsor cards now stay visible. */
.trl-sponsors-rotating.trl-sponsor-count-1,
.trl-sponsors-rotating[data-trl-count="1"]{
  min-height: 112px;
}

.trl-sponsors-rotating.trl-sponsor-count-1 .trl-sponsor-card,
.trl-sponsors-rotating[data-trl-count="1"] .trl-sponsor-card,
.trl-sponsors-rotating .trl-sponsor-card:only-child{
  position: relative !important;
  inset: auto !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Keep the OBS overlay clean and predictable as a 1920x1080 browser source. */
.trl-overlay-page{
  width: 100vw;
  height: 100vh;
  background: transparent;
}

.trl-obs-overlay{
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  padding: clamp(18px, 2vw, 36px);
  align-content: end;
  justify-content: start;
  pointer-events: none;
}

.trl-obs-overlay a,
.trl-obs-overlay button{
  pointer-events: auto;
}

/* Default OBS rotating card = compact lower-third sponsor. */
.trl-obs-overlay .trl-sponsors-rotating{
  width: min(430px, 46vw);
  min-height: 96px;
}

.trl-obs-overlay .trl-sponsors-rotating .trl-sponsor-card{
  min-height: 82px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(31,45,35,.90), rgba(31,45,35,.72)) !important;
  backdrop-filter: blur(10px) saturate(1.06);
}

.trl-obs-overlay .trl-sponsors-rotating .trl-logo-wrap{
  flex-basis: 72px;
  width: 72px;
  min-height: 62px;
}

.trl-obs-overlay .trl-sponsors-rotating .trl-sponsor-logo{
  max-height: 50px;
}

/* If you want a clear sponsor slate in OBS, use ?placement=slate&bg=dark */
.trl-obs-overlay .trl-sponsors-slate{
  width: min(920px, 88vw);
}


/* v0.1.7 — OBS overlay matches the website/video sponsor bug
   Default /two-ranges-live-overlay/ now shows the same compact sponsor bug style,
   anchored bottom-right for a 1920×1080 OBS browser source. */
.trl-obs-overlay{
  position: relative;
  display: block !important;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  padding: 0 !important;
  pointer-events: none;
  overflow: hidden;
}

.trl-obs-overlay a,
.trl-obs-overlay button{
  pointer-events: auto;
}

/* Default OBS corner placement: bottom-right, same visual family as web overlay. */
.trl-obs-overlay .trl-sponsors-corner{
  position: absolute !important;
  right: clamp(22px, 2.1vw, 42px) !important;
  bottom: clamp(22px, 2.1vw, 42px) !important;
  left: auto !important;
  top: auto !important;
  width: min(320px, 32vw) !important;
  margin: 0 !important;
  filter: drop-shadow(0 14px 34px rgba(0,0,0,.24)) !important;
}

.trl-obs-overlay .trl-sponsors-corner .trl-sponsor-card{
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: .68rem !important;
  min-height: 72px !important;
  padding: .58rem .72rem !important;
  border-radius: 13px !important;
  border: 1px solid rgba(255,250,240,.22) !important;
  background:
    linear-gradient(135deg, rgba(31,45,35,.90), rgba(31,45,35,.74)) !important;
  color: rgba(255,250,240,.96) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.22) !important;
  backdrop-filter: blur(10px) saturate(1.06) !important;
}

.trl-obs-overlay .trl-sponsors-corner .trl-logo-wrap{
  width: 58px !important;
  height: 58px !important;
  min-height: 58px !important;
  flex-basis: 58px !important;
  padding: .34rem !important;
  border-radius: 11px !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(240,198,58,.18), transparent 45%),
    rgba(255,250,240,.93) !important;
  border: 1px solid rgba(255,250,240,.36) !important;
  box-shadow: inset 0 0 0 1px rgba(31,45,35,.06) !important;
}

.trl-obs-overlay .trl-sponsors-corner .trl-sponsor-logo{
  max-height: 44px !important;
}

.trl-obs-overlay .trl-sponsors-corner .trl-sponsor-copy{
  display: grid !important;
  gap: .06rem !important;
  padding: 0 !important;
  min-width: 0 !important;
}

.trl-obs-overlay .trl-sponsors-corner .trl-sponsor-copy strong{
  overflow: hidden !important;
  color: rgba(255,250,240,1) !important;
  font-size: .92rem !important;
  line-height: 1.08 !important;
  letter-spacing: -.012em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.trl-obs-overlay .trl-sponsors-corner .trl-sponsor-copy em{
  overflow: hidden !important;
  color: rgba(255,250,240,.78) !important;
  font-size: .68rem !important;
  line-height: 1.14 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.trl-obs-overlay .trl-sponsors-corner .trl-sponsor-tag{
  position: absolute !important;
  left: .62rem !important;
  top: -.58rem !important;
  right: auto !important;
  width: auto !important;
  max-width: max-content !important;
  padding: .1rem .28rem !important;
  border: 1px solid rgba(255,250,240,.12) !important;
  border-radius: 3px !important;
  background: rgba(31,45,35,.82) !important;
  color: rgba(255,250,240,.72) !important;
  font-size: .46rem !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  backdrop-filter: blur(5px) !important;
}

/* Browser preview backgrounds: transparent looks white in normal Chrome. Use bg=green/dark
   when previewing if you want to see edges. OBS should generally use transparent. */
.trl-obs-bg-green{
  background:
    radial-gradient(circle at 70% 25%, rgba(240,198,58,.18), transparent 32%),
    #425d42 !important;
}

.trl-obs-bg-dark{
  background:
    radial-gradient(circle at 70% 25%, rgba(240,198,58,.15), transparent 32%),
    #101812 !important;
}

/* Keep alternate OBS placements available, but do not force them bottom-left. */
.trl-obs-overlay .trl-sponsors-rotating{
  position: absolute !important;
  right: clamp(22px, 2.1vw, 42px) !important;
  bottom: clamp(22px, 2.1vw, 42px) !important;
  left: auto !important;
  width: min(430px, 44vw);
}

.trl-obs-overlay .trl-sponsors-grid{
  position: absolute !important;
  right: clamp(22px, 2.1vw, 42px) !important;
  bottom: clamp(22px, 2.1vw, 42px) !important;
  left: auto !important;
  width: min(760px, 76vw);
}

.trl-obs-overlay .trl-sponsors-slate{
  position: absolute !important;
  right: clamp(22px, 2.1vw, 42px) !important;
  bottom: clamp(22px, 2.1vw, 42px) !important;
  left: auto !important;
}

@media(max-width: 720px){
  .trl-obs-overlay .trl-sponsors-corner{
    width: min(270px, calc(100vw - 28px)) !important;
    right: 14px !important;
    bottom: 14px !important;
  }

  .trl-obs-overlay .trl-sponsors-corner .trl-sponsor-card{
    grid-template-columns: 48px minmax(0, 1fr) !important;
    min-height: 60px !important;
  }

  .trl-obs-overlay .trl-sponsors-corner .trl-logo-wrap{
    width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
  }

  .trl-obs-overlay .trl-sponsors-corner .trl-sponsor-logo{
    max-height: 36px !important;
  }
}


/* v0.1.8 — OBS top-right Two Ranges brand bug */
.trl-obs-brand{
  position: absolute;
  top: clamp(18px, 2.1vw, 40px);
  right: clamp(18px, 2.1vw, 40px);
  z-index: 4;
  display: block;
  width: clamp(92px, 9vw, 170px);
  height: auto;
  max-height: 86px;
  object-fit: contain;
  opacity: .96;
  filter:
    drop-shadow(0 8px 18px rgba(0,0,0,.35))
    drop-shadow(0 1px 0 rgba(31,45,35,.18));
  pointer-events: none;
}

/* Add a very subtle dark plate only on preview backgrounds, not true transparent OBS use. */
.trl-obs-bg-dark .trl-obs-brand,
.trl-obs-bg-green .trl-obs-brand{
  padding: .45rem .55rem;
  border-radius: 12px;
  background: rgba(31,45,35,.28);
  backdrop-filter: blur(5px);
}

/* If a top-right fullscreen/control label ever appears, keep the brand clear of it in OBS. */
.trl-obs-overlay .trl-fullscreen-toggle{
  display: none !important;
}

@media(max-width: 720px){
  .trl-obs-brand{
    top: 14px;
    right: 14px;
    width: clamp(84px, 22vw, 132px);
  }
}


/* v0.1.9 — brand + text polish
   Adds the Two Ranges logo to the normal website video player and improves
   sponsor bug text hierarchy/placement for both the web player and OBS overlay. */

/* Website player top-right brand bug */
.trl-player-brand{
  position: absolute;
  top: .82rem;
  right: .9rem;
  z-index: 4;
  display: block;
  width: clamp(76px, 7.5vw, 128px);
  height: auto;
  max-height: 64px;
  object-fit: contain;
  opacity: .94;
  filter:
    drop-shadow(0 7px 16px rgba(0,0,0,.34))
    drop-shadow(0 1px 0 rgba(31,45,35,.16));
  pointer-events: none;
}

/* Move the custom fullscreen button left so it does not fight the brand logo. */
.trl-player-wrap .trl-fullscreen-toggle{
  right: calc(.95rem + clamp(84px, 8vw, 138px)) !important;
}

.trl-player-wrap:fullscreen .trl-player-brand,
.trl-player-wrap:-webkit-full-screen .trl-player-brand{
  top: 1.2rem;
  right: 1.25rem;
  width: clamp(110px, 9vw, 180px);
  max-height: 92px;
}

.trl-player-wrap:fullscreen .trl-fullscreen-toggle,
.trl-player-wrap:-webkit-full-screen .trl-fullscreen-toggle{
  right: calc(1.25rem + clamp(118px, 10vw, 194px)) !important;
}

/* Better sponsor type hierarchy: logo left, text block vertically centred. */
.trl-sponsors-corner .trl-sponsor-card,
.trl-obs-overlay .trl-sponsors-corner .trl-sponsor-card{
  align-items: center !important;
}

.trl-sponsors-corner .trl-sponsor-copy,
.trl-obs-overlay .trl-sponsors-corner .trl-sponsor-copy{
  align-self: center !important;
  justify-content: center !important;
  gap: .12rem !important;
  padding-top: .02rem !important;
}

.trl-sponsors-corner .trl-sponsor-copy strong,
.trl-obs-overlay .trl-sponsors-corner .trl-sponsor-copy strong{
  font-family: inherit !important;
  font-weight: 900 !important;
  letter-spacing: -.018em !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.22) !important;
}

.trl-sponsors-corner .trl-sponsor-copy em,
.trl-obs-overlay .trl-sponsors-corner .trl-sponsor-copy em{
  font-family: "Courier New", Courier, monospace !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.16) !important;
}

/* Website sponsor bug: a touch more legible without getting big again. */
.trl-sponsors-corner .trl-sponsor-card{
  grid-template-columns: 54px minmax(0, 1fr) !important;
  width: 100% !important;
}

.trl-sponsors-corner .trl-sponsor-copy strong{
  font-size: .9rem !important;
}

.trl-sponsors-corner .trl-sponsor-copy em{
  font-size: .63rem !important;
}

/* OBS sponsor bug: make it slightly wider and cleaner than the browser preview screenshot. */
.trl-obs-overlay .trl-sponsors-corner{
  width: min(360px, 34vw) !important;
}

.trl-obs-overlay .trl-sponsors-corner .trl-sponsor-card{
  grid-template-columns: 64px minmax(0, 1fr) !important;
  min-height: 80px !important;
  padding: .66rem .82rem !important;
  border-radius: 15px !important;
}

.trl-obs-overlay .trl-sponsors-corner .trl-logo-wrap{
  width: 64px !important;
  height: 64px !important;
  min-height: 64px !important;
  padding: .38rem !important;
  border-radius: 12px !important;
}

.trl-obs-overlay .trl-sponsors-corner .trl-sponsor-logo{
  max-height: 50px !important;
}

.trl-obs-overlay .trl-sponsors-corner .trl-sponsor-copy strong{
  font-size: 1rem !important;
  line-height: 1.04 !important;
}

.trl-obs-overlay .trl-sponsors-corner .trl-sponsor-copy em{
  font-size: .7rem !important;
  line-height: 1.16 !important;
  opacity: .86 !important;
}

.trl-obs-overlay .trl-sponsors-corner .trl-sponsor-tag{
  top: -.64rem !important;
  left: .72rem !important;
  font-size: .48rem !important;
}

/* Top-right OBS logo: slightly tighter to the corner and more broadcast-like. */
.trl-obs-brand{
  top: clamp(16px, 1.65vw, 32px) !important;
  right: clamp(18px, 1.75vw, 34px) !important;
  width: clamp(104px, 8.5vw, 160px) !important;
}

/* In Chrome preview, white background makes a white logo seem weak. Give only preview
   modes a small plate; transparent OBS mode stays clean. */
.trl-obs-bg-dark .trl-obs-brand,
.trl-obs-bg-green .trl-obs-brand{
  padding: .5rem .58rem !important;
}

/* If previewing transparent in Chrome, add ?bg=green or ?bg=dark; OBS remains transparent. */

@media(max-width: 720px){
  .trl-player-brand{
    top: .62rem;
    right: .62rem;
    width: clamp(70px, 20vw, 108px);
  }

  .trl-player-wrap .trl-fullscreen-toggle{
    right: calc(.65rem + clamp(76px, 21vw, 116px)) !important;
  }

  .trl-obs-overlay .trl-sponsors-corner{
    width: min(300px, calc(100vw - 28px)) !important;
  }

  .trl-obs-overlay .trl-sponsors-corner .trl-sponsor-card{
    grid-template-columns: 54px minmax(0, 1fr) !important;
    min-height: 68px !important;
  }

  .trl-obs-overlay .trl-sponsors-corner .trl-logo-wrap{
    width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
  }

  .trl-obs-overlay .trl-sponsors-corner .trl-sponsor-copy strong{
    font-size: .88rem !important;
  }

  .trl-obs-overlay .trl-sponsors-corner .trl-sponsor-copy em{
    font-size: .62rem !important;
  }
}


/* v0.2.1 — configurable brand logos + placement collision guards
   Website player and OBS overlay logos can be replaced, resized, hidden, and placed
   independently. Player controls now avoid logo collisions. */
.trl-player-brand,
.trl-obs-brand{
  max-width: none;
}

.trl-brand-pos-top-left{
  top: .82rem !important;
  left: .9rem !important;
  right: auto !important;
  bottom: auto !important;
}

.trl-brand-pos-top-right{
  top: .82rem !important;
  right: .9rem !important;
  left: auto !important;
  bottom: auto !important;
}

.trl-brand-pos-bottom-left{
  left: .9rem !important;
  bottom: .9rem !important;
  top: auto !important;
  right: auto !important;
}

.trl-brand-pos-bottom-right{
  right: .9rem !important;
  bottom: .9rem !important;
  top: auto !important;
  left: auto !important;
}

.trl-player-brand.trl-brand-size-small{ width: clamp(58px, 5.8vw, 94px) !important; }
.trl-player-brand.trl-brand-size-medium{ width: clamp(76px, 7.5vw, 128px) !important; }
.trl-player-brand.trl-brand-size-large{ width: clamp(98px, 9.5vw, 168px) !important; }

.trl-obs-brand.trl-brand-size-small{ width: clamp(78px, 6.5vw, 124px) !important; }
.trl-obs-brand.trl-brand-size-medium{ width: clamp(104px, 8.5vw, 160px) !important; }
.trl-obs-brand.trl-brand-size-large{ width: clamp(136px, 11vw, 220px) !important; }

/* OBS placement uses a larger edge offset suitable for 1920x1080 output. */
.trl-obs-brand.trl-brand-pos-top-left{
  top: clamp(16px, 1.65vw, 32px) !important;
  left: clamp(18px, 1.75vw, 34px) !important;
  right: auto !important;
  bottom: auto !important;
}

.trl-obs-brand.trl-brand-pos-top-right{
  top: clamp(16px, 1.65vw, 32px) !important;
  right: clamp(18px, 1.75vw, 34px) !important;
  left: auto !important;
  bottom: auto !important;
}

.trl-obs-brand.trl-brand-pos-bottom-left{
  left: clamp(18px, 1.75vw, 34px) !important;
  bottom: clamp(18px, 1.75vw, 34px) !important;
  top: auto !important;
  right: auto !important;
}

.trl-obs-brand.trl-brand-pos-bottom-right{
  right: clamp(18px, 1.75vw, 34px) !important;
  bottom: clamp(18px, 1.75vw, 34px) !important;
  top: auto !important;
  left: auto !important;
}

/* Top-left logo: shift the LIVE VIEW badge to the right of the mark. */
.trl-player-wrap.trl-web-brand-pos-top-left::before{
  left: calc(.9rem + clamp(76px, 7.5vw, 128px) + .75rem) !important;
}

.trl-player-wrap.trl-web-brand-pos-top-left.trl-web-brand-size-small::before{
  left: calc(.9rem + clamp(58px, 5.8vw, 94px) + .65rem) !important;
}

.trl-player-wrap.trl-web-brand-pos-top-left.trl-web-brand-size-large::before{
  left: calc(.9rem + clamp(98px, 9.5vw, 168px) + .85rem) !important;
}

/* Top-right logo: fullscreen button stays clear of the logo. */
.trl-player-wrap.trl-web-brand-pos-top-right .trl-fullscreen-toggle{
  right: calc(.95rem + clamp(84px, 8vw, 138px)) !important;
}

.trl-player-wrap.trl-web-brand-pos-top-right.trl-web-brand-size-small .trl-fullscreen-toggle{
  right: calc(.95rem + clamp(66px, 6.4vw, 104px)) !important;
}

.trl-player-wrap.trl-web-brand-pos-top-right.trl-web-brand-size-large .trl-fullscreen-toggle{
  right: calc(.95rem + clamp(106px, 10.2vw, 178px)) !important;
}

/* Non top-right logo: fullscreen can stay in the normal top-right corner. */
.trl-player-wrap:not(.trl-web-brand-pos-top-right) .trl-fullscreen-toggle{
  right: .9rem !important;
}

/* Bottom-right logo: push the sponsor bug up so it doesn't sit over the brand. */
.trl-player-wrap.trl-web-brand-pos-bottom-right .trl-sponsors-corner{
  bottom: calc(.9rem + clamp(76px, 7.5vw, 128px) * .55 + .75rem) !important;
}

.trl-player-wrap.trl-web-brand-pos-bottom-right.trl-web-brand-size-small .trl-sponsors-corner{
  bottom: calc(.9rem + clamp(58px, 5.8vw, 94px) * .55 + .65rem) !important;
}

.trl-player-wrap.trl-web-brand-pos-bottom-right.trl-web-brand-size-large .trl-sponsors-corner{
  bottom: calc(.9rem + clamp(98px, 9.5vw, 168px) * .55 + .85rem) !important;
}

/* Hidden logo: remove all related offsets. */
.trl-player-wrap.trl-web-brand-hidden::before{
  left: .9rem !important;
  top: .85rem !important;
}

.trl-player-wrap.trl-web-brand-hidden .trl-fullscreen-toggle{
  right: .9rem !important;
}

.trl-player-wrap.trl-web-brand-hidden .trl-sponsors-corner{
  bottom: .75rem !important;
}

/* If top-left gets too cramped on small screens, put LIVE VIEW below the logo. */
@media(max-width: 720px){
  .trl-brand-pos-top-left,
  .trl-brand-pos-top-right{
    top: .62rem !important;
  }

  .trl-brand-pos-top-left,
  .trl-brand-pos-bottom-left{
    left: .62rem !important;
  }

  .trl-brand-pos-top-right,
  .trl-brand-pos-bottom-right{
    right: .62rem !important;
  }

  .trl-brand-pos-bottom-left,
  .trl-brand-pos-bottom-right{
    bottom: .62rem !important;
  }

  .trl-player-brand.trl-brand-size-small{ width: clamp(56px, 16vw, 82px) !important; }
  .trl-player-brand.trl-brand-size-medium{ width: clamp(70px, 20vw, 108px) !important; }
  .trl-player-brand.trl-brand-size-large{ width: clamp(84px, 24vw, 136px) !important; }

  .trl-player-wrap.trl-web-brand-pos-top-left::before{
    left: .62rem !important;
    top: calc(.62rem + clamp(70px, 20vw, 108px) * .48 + .55rem) !important;
  }

  .trl-player-wrap.trl-web-brand-pos-top-left.trl-web-brand-size-small::before{
    top: calc(.62rem + clamp(56px, 16vw, 82px) * .48 + .5rem) !important;
  }

  .trl-player-wrap.trl-web-brand-pos-top-left.trl-web-brand-size-large::before{
    top: calc(.62rem + clamp(84px, 24vw, 136px) * .48 + .65rem) !important;
  }
}

/* Fullscreen collision guards mirror the normal player, but with larger marks. */
.trl-player-wrap:fullscreen.trl-web-brand-pos-top-left::before,
.trl-player-wrap:-webkit-full-screen.trl-web-brand-pos-top-left::before{
  left: calc(1.25rem + clamp(110px, 9vw, 180px) + .9rem) !important;
  top: 1.2rem !important;
}

.trl-player-wrap:fullscreen.trl-web-brand-pos-top-left.trl-web-brand-size-small::before,
.trl-player-wrap:-webkit-full-screen.trl-web-brand-pos-top-left.trl-web-brand-size-small::before{
  left: calc(1.25rem + clamp(86px, 7vw, 138px) + .8rem) !important;
}

.trl-player-wrap:fullscreen.trl-web-brand-pos-top-left.trl-web-brand-size-large::before,
.trl-player-wrap:-webkit-full-screen.trl-web-brand-pos-top-left.trl-web-brand-size-large::before{
  left: calc(1.25rem + clamp(136px, 11vw, 220px) + 1rem) !important;
}

.trl-player-wrap:fullscreen.trl-web-brand-pos-top-right .trl-fullscreen-toggle,
.trl-player-wrap:-webkit-full-screen.trl-web-brand-pos-top-right .trl-fullscreen-toggle{
  right: calc(1.25rem + clamp(118px, 10vw, 194px)) !important;
}

.trl-player-wrap:fullscreen.trl-web-brand-pos-top-right.trl-web-brand-size-small .trl-fullscreen-toggle,
.trl-player-wrap:-webkit-full-screen.trl-web-brand-pos-top-right.trl-web-brand-size-small .trl-fullscreen-toggle{
  right: calc(1.25rem + clamp(92px, 8vw, 150px)) !important;
}

.trl-player-wrap:fullscreen.trl-web-brand-pos-top-right.trl-web-brand-size-large .trl-fullscreen-toggle,
.trl-player-wrap:-webkit-full-screen.trl-web-brand-pos-top-right.trl-web-brand-size-large .trl-fullscreen-toggle{
  right: calc(1.25rem + clamp(146px, 12vw, 238px)) !important;
}

.trl-player-wrap:fullscreen:not(.trl-web-brand-pos-top-right) .trl-fullscreen-toggle,
.trl-player-wrap:-webkit-full-screen:not(.trl-web-brand-pos-top-right) .trl-fullscreen-toggle{
  right: 1.2rem !important;
}

.trl-player-wrap:fullscreen.trl-web-brand-pos-bottom-right .trl-sponsors-corner,
.trl-player-wrap:-webkit-full-screen.trl-web-brand-pos-bottom-right .trl-sponsors-corner{
  bottom: calc(1.25rem + clamp(110px, 9vw, 180px) * .55 + 1rem) !important;
}

.trl-player-wrap:fullscreen.trl-web-brand-hidden::before,
.trl-player-wrap:-webkit-full-screen.trl-web-brand-hidden::before{
  left: 1.2rem !important;
  top: 1.2rem !important;
}

.trl-player-wrap:fullscreen.trl-web-brand-hidden .trl-fullscreen-toggle,
.trl-player-wrap:-webkit-full-screen.trl-web-brand-hidden .trl-fullscreen-toggle{
  right: 1.2rem !important;
}

/* OBS bottom-corner safety for alternate placements. */
.trl-obs-brand.trl-brand-pos-bottom-left ~ .trl-sponsors-grid,
.trl-obs-brand.trl-brand-pos-bottom-left ~ .trl-sponsors-rotating,
.trl-obs-brand.trl-brand-pos-bottom-left ~ .trl-sponsors-slate{
  bottom: clamp(112px, 9vw, 168px) !important;
}

.trl-obs-brand.trl-brand-pos-bottom-right ~ .trl-sponsors-grid,
.trl-obs-brand.trl-brand-pos-bottom-right ~ .trl-sponsors-rotating,
.trl-obs-brand.trl-brand-pos-bottom-right ~ .trl-sponsors-slate{
  bottom: clamp(112px, 9vw, 168px) !important;
}


/* v0.2.2 — shortcode chrome controls + fullscreen accessibility */
.trl-live.trl-no-header .trl-live-stage{margin-top:0}.trl-live.trl-no-meta .trl-player-wrap{margin-top:0}.trl-live.trl-no-footer .trl-live-stage{margin-bottom:0}.trl-fullscreen-toggle:disabled{opacity:.48;cursor:not-allowed;transform:none!important}.trl-fullscreen-toggle[aria-pressed="true"]{background:rgba(255,250,240,.95);color:var(--trl-dark)}.trl-live-meta-strip span:empty{display:none}.trl-obs-overlay.trl-obs-brand-pos-top-left.trl-placement-corner .trl-sponsors-corner{left:clamp(18px,1.75vw,34px)!important;bottom:clamp(18px,1.75vw,34px)!important;top:auto!important}.trl-obs-overlay.trl-obs-brand-pos-bottom-right.trl-placement-corner .trl-sponsors-corner{right:auto!important;left:clamp(18px,1.75vw,34px)!important}.trl-obs-overlay.trl-obs-brand-pos-bottom-left.trl-placement-corner .trl-sponsors-corner{left:auto!important;right:clamp(18px,1.75vw,34px)!important}@media(max-width:720px){.trl-live.trl-no-header{gap:.8rem}.trl-player-wrap.trl-web-brand-pos-top-right .trl-fullscreen-toggle{max-width:42vw;white-space:normal;line-height:1.05}.trl-fullscreen-toggle:disabled{display:none}}

/* v0.2.3 — Open-Meteo weather bug
   Small field-conditions overlay for the website player and OBS browser source. */
.trl-weather-bug{
  position:absolute;
  z-index:4;
  display:grid;
  gap:.08rem;
  min-width:0;
  max-width:min(210px, calc(100% - 1.5rem));
  padding:.44rem .58rem;
  border:1px solid rgba(255,250,240,.22);
  border-radius:13px;
  background:linear-gradient(135deg, rgba(31,45,35,.86), rgba(31,45,35,.66));
  color:#fffaf0;
  box-shadow:0 12px 30px rgba(0,0,0,.22);
  backdrop-filter:blur(9px) saturate(1.06);
  pointer-events:none;
}
.trl-weather-label,
.trl-weather-hilo,
.trl-weather-extra,
.trl-weather-updated{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:"Courier New", Courier, monospace;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.trl-weather-label{color:rgba(255,250,240,.76);font-size:.5rem;line-height:1.05;}
.trl-weather-row{display:flex;align-items:center;gap:.34rem;min-width:0;line-height:1;}
.trl-weather-icon{display:grid;place-items:center;width:1.18rem;height:1.18rem;border-radius:999px;background:rgba(240,198,58,.95);color:#1f2d23;font-size:.8rem;font-weight:900;line-height:1;box-shadow:0 0 0 .24rem rgba(240,198,58,.14);}
.trl-weather-temp{overflow:hidden;color:#fffaf0;font-size:.95rem;line-height:1.02;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.22);}
.trl-weather-hilo,.trl-weather-extra{color:rgba(255,250,240,.78);font-size:.54rem;line-height:1.1;}
.trl-weather-updated{color:rgba(255,250,240,.5);font-size:.46rem;line-height:1.1;}
.trl-weather-size-tiny{padding:.36rem .48rem;border-radius:11px;}
.trl-weather-size-tiny .trl-weather-label{font-size:.46rem;}
.trl-weather-size-tiny .trl-weather-icon{width:1rem;height:1rem;font-size:.68rem;}
.trl-weather-size-tiny .trl-weather-temp{font-size:.82rem;}
.trl-weather-size-tiny .trl-weather-hilo,.trl-weather-size-tiny .trl-weather-extra{font-size:.48rem;}
.trl-weather-size-compact{padding:.45rem .6rem;}
.trl-weather-size-standard{padding:.58rem .7rem;min-width:150px;}
.trl-weather-size-standard .trl-weather-temp{font-size:1.08rem;}
.trl-weather-pos-top-left{left:.75rem;top:.75rem;}
.trl-weather-pos-top-right{right:.75rem;top:.75rem;}
.trl-weather-pos-bottom-left{left:.75rem;bottom:.75rem;}
.trl-weather-pos-bottom-right{right:.75rem;bottom:.75rem;}
/* Avoid default LIVE VIEW badge if weather is top-left. */
.trl-weather-pos-top-left{top:2.55rem;}
/* If a brand logo sits in the same corner, nudge the weather bug inward/down/up. */
.trl-player-wrap.trl-web-brand-pos-top-left .trl-weather-pos-top-left{left:calc(.9rem + clamp(76px,7.5vw,128px) + .75rem);top:.82rem;}
.trl-player-wrap.trl-web-brand-pos-top-left.trl-web-brand-size-small .trl-weather-pos-top-left{left:calc(.9rem + clamp(58px,5.8vw,94px) + .65rem);}
.trl-player-wrap.trl-web-brand-pos-top-left.trl-web-brand-size-large .trl-weather-pos-top-left{left:calc(.9rem + clamp(98px,9.5vw,168px) + .85rem);}
.trl-player-wrap.trl-web-brand-pos-top-right .trl-weather-pos-top-right{right:calc(.9rem + clamp(76px,7.5vw,128px) + .75rem);top:.82rem;}
.trl-player-wrap.trl-web-brand-pos-top-right.trl-web-brand-size-small .trl-weather-pos-top-right{right:calc(.9rem + clamp(58px,5.8vw,94px) + .65rem);}
.trl-player-wrap.trl-web-brand-pos-top-right.trl-web-brand-size-large .trl-weather-pos-top-right{right:calc(.9rem + clamp(98px,9.5vw,168px) + .85rem);}
.trl-player-wrap.trl-web-brand-pos-bottom-left .trl-weather-pos-bottom-left{left:calc(.9rem + clamp(76px,7.5vw,128px) + .75rem);bottom:.82rem;}
.trl-player-wrap.trl-web-brand-pos-bottom-right .trl-weather-pos-bottom-right{right:calc(.9rem + clamp(76px,7.5vw,128px) + .75rem);bottom:.82rem;}
/* If weather and sponsor both use bottom-right, keep sponsor dominant and place weather above it. */
.trl-player-wrap .trl-weather-pos-bottom-right ~ .trl-sponsors-corner{bottom:calc(.75rem + 68px + .65rem)!important;}
.trl-player-wrap:fullscreen .trl-weather-bug,
.trl-player-wrap:-webkit-full-screen .trl-weather-bug{transform:scale(1.1);transform-origin:center;}
.trl-player-wrap:fullscreen .trl-weather-pos-top-left,
.trl-player-wrap:-webkit-full-screen .trl-weather-pos-top-left{left:1.25rem;top:3.1rem;}
.trl-player-wrap:fullscreen .trl-weather-pos-top-right,
.trl-player-wrap:-webkit-full-screen .trl-weather-pos-top-right{right:1.25rem;top:1.25rem;}
.trl-player-wrap:fullscreen .trl-weather-pos-bottom-left,
.trl-player-wrap:-webkit-full-screen .trl-weather-pos-bottom-left{left:1.25rem;bottom:1.25rem;}
.trl-player-wrap:fullscreen .trl-weather-pos-bottom-right,
.trl-player-wrap:-webkit-full-screen .trl-weather-pos-bottom-right{right:1.25rem;bottom:1.25rem;}
/* OBS weather bug uses broadcast-safe margins and stays away from the default bottom-right sponsor. */
.trl-obs-overlay .trl-weather-bug{z-index:4;max-width:320px;}
.trl-obs-overlay .trl-weather-pos-top-left{left:clamp(18px,1.75vw,34px);top:clamp(18px,1.75vw,34px);}
.trl-obs-overlay .trl-weather-pos-top-right{right:clamp(18px,1.75vw,34px);top:clamp(18px,1.75vw,34px);}
.trl-obs-overlay .trl-weather-pos-bottom-left{left:clamp(18px,1.75vw,34px);bottom:clamp(18px,1.75vw,34px);}
.trl-obs-overlay .trl-weather-pos-bottom-right{right:clamp(18px,1.75vw,34px);bottom:clamp(112px,9vw,168px);}
.trl-obs-brand.trl-brand-pos-top-left ~ .trl-weather-pos-top-left{top:clamp(112px,9vw,168px);}
.trl-obs-brand.trl-brand-pos-top-right ~ .trl-weather-pos-top-right{top:clamp(112px,9vw,168px);}
.trl-obs-brand.trl-brand-pos-bottom-left ~ .trl-weather-pos-bottom-left{bottom:clamp(112px,9vw,168px);}
.trl-obs-brand.trl-brand-pos-bottom-right ~ .trl-weather-pos-bottom-right{bottom:clamp(112px,9vw,168px);}
@media(max-width:720px){
  .trl-weather-bug{max-width:min(170px, calc(100% - 1rem));padding:.32rem .42rem;border-radius:10px;}
  .trl-weather-label{font-size:.42rem;}
  .trl-weather-icon{width:.92rem;height:.92rem;font-size:.62rem;}
  .trl-weather-temp{font-size:.76rem;}
  .trl-weather-hilo,.trl-weather-extra{font-size:.44rem;}
  .trl-weather-pos-top-left{left:.5rem;top:2.35rem;}
  .trl-weather-pos-top-right{right:.5rem;top:2.35rem;}
  .trl-weather-pos-bottom-left{left:.5rem;bottom:.5rem;}
  .trl-weather-pos-bottom-right{right:.5rem;bottom:.5rem;}
  .trl-player-wrap.trl-web-brand-pos-top-right .trl-weather-pos-top-right,
  .trl-player-wrap.trl-web-brand-pos-top-left .trl-weather-pos-top-left{top:calc(.62rem + clamp(70px,20vw,108px) * .48 + .55rem);left:.62rem;right:auto;}
  .trl-player-wrap.trl-web-brand-pos-bottom-left .trl-weather-pos-bottom-left,
  .trl-player-wrap.trl-web-brand-pos-bottom-right .trl-weather-pos-bottom-right{left:.5rem;right:auto;bottom:.5rem;}
  .trl-player-wrap .trl-weather-pos-bottom-right ~ .trl-sponsors-corner{bottom:.5rem!important;}
}


/* v0.2.4 — weather/fullscreen collision guards + OBS weather pass
   If weather is in the top-right website corner, keep it clear of the custom
   sponsor-safe fullscreen button. OBS overlay gets explicit weather context
   classes and query support through the overlay endpoint. */
.trl-player-wrap.trl-has-fullscreen.trl-web-weather-pos-top-right .trl-weather-pos-top-right{
  top:3.15rem !important;
  right:.9rem;
}
.trl-player-wrap.trl-has-fullscreen.trl-web-weather-pos-top-right.trl-web-weather-size-compact .trl-weather-pos-top-right{
  top:3.35rem !important;
}
.trl-player-wrap.trl-has-fullscreen.trl-web-weather-pos-top-right.trl-web-weather-size-standard .trl-weather-pos-top-right{
  top:3.65rem !important;
}
.trl-player-wrap.trl-has-fullscreen.trl-web-brand-pos-top-right.trl-web-weather-pos-top-right .trl-weather-pos-top-right{
  top:3.25rem !important;
  right:calc(.9rem + clamp(76px,7.5vw,128px) + .75rem) !important;
}
.trl-player-wrap.trl-has-fullscreen.trl-web-brand-pos-top-right.trl-web-brand-size-small.trl-web-weather-pos-top-right .trl-weather-pos-top-right{
  right:calc(.9rem + clamp(58px,5.8vw,94px) + .65rem) !important;
}
.trl-player-wrap.trl-has-fullscreen.trl-web-brand-pos-top-right.trl-web-brand-size-large.trl-web-weather-pos-top-right .trl-weather-pos-top-right{
  right:calc(.9rem + clamp(98px,9.5vw,168px) + .85rem) !important;
}
.trl-player-wrap:fullscreen.trl-has-fullscreen.trl-web-weather-pos-top-right .trl-weather-pos-top-right,
.trl-player-wrap:-webkit-full-screen.trl-has-fullscreen.trl-web-weather-pos-top-right .trl-weather-pos-top-right{
  top:4rem !important;
  right:1.25rem !important;
}
.trl-player-wrap:fullscreen.trl-has-fullscreen.trl-web-brand-pos-top-right.trl-web-weather-pos-top-right .trl-weather-pos-top-right,
.trl-player-wrap:-webkit-full-screen.trl-has-fullscreen.trl-web-brand-pos-top-right.trl-web-weather-pos-top-right .trl-weather-pos-top-right{
  right:calc(1.25rem + clamp(118px,10vw,194px) + .9rem) !important;
}
.trl-obs-overlay.trl-has-weather .trl-weather-bug{
  display:grid !important;
  z-index:5;
}
.trl-obs-overlay.trl-obs-weather-pos-top-right .trl-weather-pos-top-right{
  right:clamp(18px,1.75vw,34px);
  top:clamp(18px,1.75vw,34px);
}
.trl-obs-overlay.trl-obs-weather-pos-top-left .trl-weather-pos-top-left{
  left:clamp(18px,1.75vw,34px);
  top:clamp(18px,1.75vw,34px);
}
.trl-obs-overlay.trl-obs-weather-pos-bottom-left .trl-weather-pos-bottom-left{
  left:clamp(18px,1.75vw,34px);
  bottom:clamp(18px,1.75vw,34px);
}
.trl-obs-overlay.trl-obs-weather-pos-bottom-right .trl-weather-pos-bottom-right{
  right:clamp(18px,1.75vw,34px);
  bottom:clamp(112px,9vw,168px);
}
.trl-obs-overlay.trl-placement-corner .trl-weather-pos-bottom-right ~ .trl-sponsors-corner{
  bottom:clamp(18px,1.75vw,34px) !important;
  right:clamp(18px,1.75vw,34px) !important;
}
@media(max-width:720px){
  .trl-player-wrap.trl-has-fullscreen.trl-web-weather-pos-top-right .trl-weather-pos-top-right{
    top:2.85rem !important;
    right:.5rem !important;
  }
  .trl-player-wrap.trl-has-fullscreen.trl-web-brand-pos-top-right.trl-web-weather-pos-top-right .trl-weather-pos-top-right{
    top:calc(.62rem + clamp(70px,20vw,108px) * .48 + .55rem) !important;
    left:.62rem !important;
    right:auto !important;
  }
}

/* v0.2.5 — multi-sponsor strip + sponsor info below the stream
   Keep the video as the main object: sponsor strip is outside the player and compact. */
.trl-live-stage > .trl-sponsors-banner{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap:.45rem !important;
  margin-top:.7rem !important;
  padding:.42rem !important;
  border:1px solid rgba(66,93,66,.14) !important;
  border-radius:16px !important;
  background:rgba(66,93,66,.12) !important;
  box-shadow:inset 0 0 0 1px rgba(255,250,240,.22) !important;
}
.trl-live-stage > .trl-sponsors-banner.trl-sponsor-count-1{
  grid-template-columns:1fr !important;
}
.trl-live-stage > .trl-sponsors-banner .trl-sponsor-card{
  min-height:58px !important;
  max-height:74px !important;
  justify-content:flex-start !important;
  gap:.5rem !important;
  padding:.42rem .52rem !important;
  border-radius:12px !important;
  background:linear-gradient(90deg, rgba(66,93,66,.94), rgba(66,93,66,.78)) !important;
  box-shadow:0 8px 18px rgba(31,45,35,.09) !important;
}
.trl-live-stage > .trl-sponsors-banner .trl-logo-wrap{
  flex:0 0 46px !important;
  width:46px !important;
  min-height:40px !important;
  height:40px !important;
  padding:.22rem !important;
  border-radius:8px !important;
}
.trl-live-stage > .trl-sponsors-banner .trl-sponsor-logo{
  max-height:30px !important;
}
.trl-live-stage > .trl-sponsors-banner .trl-sponsor-copy{
  min-width:0 !important;
  padding-right:0 !important;
  gap:.02rem !important;
}
.trl-live-stage > .trl-sponsors-banner .trl-sponsor-copy strong{
  overflow:hidden !important;
  font-size:.78rem !important;
  line-height:1.08 !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
.trl-live-stage > .trl-sponsors-banner .trl-sponsor-copy em{
  overflow:hidden !important;
  font-size:.58rem !important;
  line-height:1.08 !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
.trl-live-stage > .trl-sponsors-banner .trl-sponsor-tag{
  display:none !important;
}
.trl-sponsor-details{
  margin-top:.85rem;
  padding:.85rem;
  border:1px solid rgba(66,93,66,.14);
  border-radius:18px;
  background:rgba(255,250,240,.48);
  box-shadow:0 12px 32px rgba(31,45,35,.06);
}
.trl-sponsor-details-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.65rem;
  padding-bottom:.45rem;
  border-bottom:1px solid rgba(66,93,66,.12);
}
.trl-sponsor-details-head span{
  color:rgba(31,45,35,.62);
  font-family:"Courier New", Courier, monospace;
  font-size:.64rem;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.trl-sponsor-details-head h3{
  margin:0;
  color:var(--trl-green);
  font-size:clamp(1rem,1.9vw,1.45rem);
  line-height:1;
}
.trl-sponsor-details-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:.55rem;
}
.trl-sponsor-detail-card{
  display:grid;
  grid-template-columns:52px minmax(0,1fr);
  gap:.55rem;
  align-items:center;
  min-height:68px;
  padding:.55rem;
  border:1px solid rgba(66,93,66,.13);
  border-radius:14px;
  background:rgba(255,255,255,.42);
  color:var(--trl-dark);
  text-decoration:none;
}
.trl-sponsor-detail-card:hover{
  color:var(--trl-dark);
  border-color:rgba(240,198,58,.48);
  transform:translateY(-1px);
}
.trl-sponsor-detail-mark{
  display:grid;
  place-items:center;
  width:52px;
  min-height:46px;
  padding:.25rem;
  border-radius:10px;
  background:rgba(255,250,240,.9);
  color:var(--trl-green);
  font-weight:900;
  box-shadow:inset 0 0 0 1px rgba(66,93,66,.08);
}
.trl-sponsor-detail-logo{
  display:block;
  max-width:100%;
  max-height:36px;
  width:auto;
  height:auto;
  object-fit:contain;
}
.trl-sponsor-detail-copy{
  display:grid;
  gap:.12rem;
  min-width:0;
}
.trl-sponsor-detail-copy strong{
  color:var(--trl-dark);
  font-size:.92rem;
  line-height:1.1;
}
.trl-sponsor-detail-copy em{
  color:rgba(31,45,35,.7);
  font-size:.76rem;
  font-style:normal;
  line-height:1.18;
}
.trl-sponsor-detail-copy small{
  color:var(--trl-green);
  font-family:"Courier New", Courier, monospace;
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.trl-layout-supporters .trl-player-wrap .trl-sponsors-corner{
  display:none !important;
}
@media(max-width:720px){
  .trl-live-stage > .trl-sponsors-banner{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:.38rem !important;
    padding:.36rem !important;
  }
  .trl-live-stage > .trl-sponsors-banner .trl-sponsor-card{
    min-height:52px !important;
    padding:.36rem .42rem !important;
  }
  .trl-live-stage > .trl-sponsors-banner .trl-logo-wrap{
    flex-basis:40px !important;
    width:40px !important;
    height:36px !important;
    min-height:36px !important;
  }
  .trl-live-stage > .trl-sponsors-banner .trl-sponsor-copy strong{font-size:.7rem !important;}
  .trl-live-stage > .trl-sponsors-banner .trl-sponsor-copy em{display:none !important;}
  .trl-sponsor-details{padding:.7rem;border-radius:15px;}
  .trl-sponsor-details-head{display:block;}
  .trl-sponsor-details-head h3{margin-top:.25rem;}
  .trl-sponsor-details-grid{grid-template-columns:1fr;}
}

/* v0.2.6 — on-video sponsor strip with corner bug retained */
.trl-player-wrap > .trl-sponsors-video-strip,
.trl-player-wrap > .trl-sponsors-banner.trl-sponsors-video-strip{
  --trl-video-strip-height: clamp(54px, 8.5vw, 82px);
  position:absolute;
  left:clamp(.55rem,1.6vw,1rem);
  right:clamp(.55rem,1.6vw,1rem);
  bottom:clamp(.45rem,1.2vw,.85rem);
  z-index:5;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.3rem,.8vw,.55rem);
  margin:0;
  pointer-events:auto;
}

.trl-player-wrap.trl-has-video-sponsor-strip > .trl-sponsors-corner{
  bottom:calc(clamp(.45rem,1.2vw,.85rem) + clamp(54px, 8.5vw, 82px) + .55rem);
}

.trl-player-wrap > .trl-sponsors-video-strip .trl-sponsor-card{
  min-height:var(--trl-video-strip-height);
  height:var(--trl-video-strip-height);
  justify-content:flex-start;
  overflow:hidden;
  padding:clamp(.38rem,.9vw,.62rem);
  border-radius:clamp(10px,1.4vw,15px);
  border:1px solid rgba(255,250,240,.2);
  background:linear-gradient(90deg,rgba(23,35,29,.9),rgba(63,95,76,.82));
  box-shadow:0 10px 28px rgba(0,0,0,.22);
  backdrop-filter:blur(8px);
}

.trl-player-wrap > .trl-sponsors-video-strip .trl-logo-wrap{
  flex:0 0 clamp(38px,5vw,58px);
  min-height:clamp(34px,4.8vw,52px);
  width:clamp(38px,5vw,58px);
  padding:.22rem;
  border-radius:10px;
}

.trl-player-wrap > .trl-sponsors-video-strip .trl-sponsor-logo{
  max-height:clamp(30px,4.2vw,46px);
}

.trl-player-wrap > .trl-sponsors-video-strip .trl-sponsor-copy{
  padding-right:.35rem;
  gap:.06rem;
}

.trl-player-wrap > .trl-sponsors-video-strip .trl-sponsor-copy strong{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:clamp(.72rem,1.25vw,.95rem);
  line-height:1.05;
}

.trl-player-wrap > .trl-sponsors-video-strip .trl-sponsor-copy em{
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:clamp(.58rem,1vw,.76rem);
  line-height:1.1;
}

.trl-player-wrap > .trl-sponsors-video-strip .trl-sponsor-tag{
  display:none;
}

.trl-player-wrap > .trl-sponsors-video-strip.trl-sponsor-count-1,
.trl-player-wrap > .trl-sponsors-video-strip[data-trl-count="1"]{
  grid-template-columns:minmax(180px, min(360px, 42%));
}

.trl-player-wrap > .trl-sponsors-video-strip.trl-sponsor-count-2,
.trl-player-wrap > .trl-sponsors-video-strip[data-trl-count="2"]{
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:min(760px,calc(100% - 1.1rem));
}

.trl-player-wrap > .trl-sponsors-video-strip.trl-sponsor-count-3,
.trl-player-wrap > .trl-sponsors-video-strip[data-trl-count="3"]{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

/* Keep sponsor strip visible in the custom fullscreen mode. */
.trl-player-wrap:fullscreen > .trl-sponsors-video-strip,
.trl-player-wrap:-webkit-full-screen > .trl-sponsors-video-strip{
  --trl-video-strip-height: clamp(70px, 8vh, 104px);
  left:clamp(1rem,2vw,2rem);
  right:clamp(1rem,2vw,2rem);
  bottom:clamp(1rem,2vw,1.6rem);
}

.trl-player-wrap:fullscreen.trl-has-video-sponsor-strip > .trl-sponsors-corner,
.trl-player-wrap:-webkit-full-screen.trl-has-video-sponsor-strip > .trl-sponsors-corner{
  bottom:calc(clamp(1rem,2vw,1.6rem) + clamp(70px, 8vh, 104px) + 1rem);
}

.trl-player-wrap:fullscreen > .trl-sponsors-video-strip .trl-sponsor-card,
.trl-player-wrap:-webkit-full-screen > .trl-sponsors-video-strip .trl-sponsor-card{
  min-height:var(--trl-video-strip-height);
  height:var(--trl-video-strip-height);
}

/* OBS/browser-source: banner placement becomes a true lower sponsor rail. */
.trl-obs-overlay.trl-placement-banner{
  align-content:end;
  padding:clamp(16px,2.2vw,34px);
}

.trl-obs-overlay.trl-placement-banner .trl-sponsors-banner{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(8px,1vw,14px);
  width:100%;
  margin:0;
}

.trl-obs-overlay.trl-placement-banner .trl-sponsors-banner .trl-sponsor-card{
  min-height:clamp(72px,8vh,110px);
  padding:clamp(8px,1.2vw,16px);
  background:linear-gradient(90deg,rgba(23,35,29,.88),rgba(63,95,76,.78));
  backdrop-filter:blur(8px);
}

@media(max-width:760px){
  .trl-player-wrap > .trl-sponsors-video-strip,
  .trl-player-wrap > .trl-sponsors-banner.trl-sponsors-video-strip{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .trl-player-wrap > .trl-sponsors-video-strip .trl-sponsor-card:nth-child(n+3){display:none;}
  .trl-player-wrap.trl-has-video-sponsor-strip > .trl-sponsors-corner{bottom:calc(clamp(.45rem,1.2vw,.85rem) + clamp(54px, 8.5vw, 82px) + .45rem);}
}

/* v0.2.7 — lighter on-video sponsor rail + pricing dropdown */
.trl-player-wrap > .trl-sponsors-video-strip,
.trl-player-wrap > .trl-sponsors-banner.trl-sponsors-video-strip{
  --trl-video-strip-height: clamp(42px, 5.8vw, 62px);
  bottom:clamp(.38rem,.9vw,.65rem);
  gap:clamp(.24rem,.55vw,.42rem);
}

.trl-player-wrap.trl-has-video-sponsor-strip > .trl-sponsors-corner{
  bottom:calc(clamp(.38rem,.9vw,.65rem) + clamp(42px,5.8vw,62px) + .45rem);
}

.trl-player-wrap > .trl-sponsors-video-strip .trl-sponsor-card{
  min-height:var(--trl-video-strip-height);
  height:var(--trl-video-strip-height);
  padding:clamp(.25rem,.65vw,.46rem);
  border-color:rgba(255,250,240,.13);
  background:linear-gradient(90deg,rgba(23,35,29,.62),rgba(63,95,76,.52));
  box-shadow:0 6px 18px rgba(0,0,0,.15);
  backdrop-filter:blur(5px);
}

.trl-player-wrap > .trl-sponsors-video-strip .trl-sponsor-card::before{opacity:.06;}

.trl-player-wrap > .trl-sponsors-video-strip .trl-logo-wrap{
  flex-basis:clamp(30px,3.7vw,44px);
  width:clamp(30px,3.7vw,44px);
  min-height:clamp(28px,3.4vw,40px);
  border-radius:7px;
  padding:.16rem;
}

.trl-player-wrap > .trl-sponsors-video-strip .trl-sponsor-logo{max-height:clamp(24px,3vw,36px);}

.trl-player-wrap > .trl-sponsors-video-strip .trl-sponsor-copy strong{font-size:clamp(.62rem,.95vw,.82rem);}
.trl-player-wrap > .trl-sponsors-video-strip .trl-sponsor-copy em{font-size:clamp(.5rem,.78vw,.66rem);opacity:.82;}

.trl-player-wrap:fullscreen > .trl-sponsors-video-strip,
.trl-player-wrap:-webkit-full-screen > .trl-sponsors-video-strip{
  --trl-video-strip-height: clamp(50px, 5.6vh, 76px);
}

.trl-player-wrap:fullscreen.trl-has-video-sponsor-strip > .trl-sponsors-corner,
.trl-player-wrap:-webkit-full-screen.trl-has-video-sponsor-strip > .trl-sponsors-corner{
  bottom:calc(clamp(1rem,2vw,1.6rem) + clamp(50px,5.6vh,76px) + .75rem);
}

.trl-obs-overlay.trl-placement-banner .trl-sponsors-banner .trl-sponsor-card{
  min-height:clamp(54px,5.8vh,76px);
  padding:clamp(6px,.8vw,11px);
  background:linear-gradient(90deg,rgba(23,35,29,.62),rgba(63,95,76,.52));
  box-shadow:0 8px 22px rgba(0,0,0,.16);
}

.trl-sponsor-pricing{
  margin:clamp(.65rem,1.6vw,1rem) 0 0;
  border:1px solid rgba(66,93,66,.14);
  border-radius:18px;
  background:rgba(255,250,240,.5);
  overflow:hidden;
}

.trl-sponsor-pricing summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.85rem 1rem;
  cursor:pointer;
  list-style:none;
  color:var(--trl-dark);
}

.trl-sponsor-pricing summary::-webkit-details-marker{display:none;}
.trl-sponsor-pricing summary span{font-family:Georgia,serif;font-weight:800;font-size:clamp(1rem,2vw,1.25rem);}
.trl-sponsor-pricing summary em{font-family:"Courier New",Courier,monospace;font-size:.7rem;font-style:normal;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:rgba(31,45,35,.68);}
.trl-sponsor-pricing summary::after{content:"＋";font-weight:900;color:var(--trl-green);}
.trl-sponsor-pricing[open] summary::after{content:"–";}

.trl-sponsor-pricing-body{padding:0 1rem 1rem;}
.trl-sponsor-pricing-intro{max-width:860px;margin:.1rem 0 .85rem;color:rgba(31,45,35,.72);font-size:.95rem;}
.trl-sponsor-pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.55rem;}
.trl-sponsor-price-card{padding:.75rem;border:1px solid rgba(66,93,66,.12);border-radius:14px;background:rgba(255,255,255,.48);}
.trl-sponsor-price-card strong{display:block;color:var(--trl-dark);font-weight:900;}
.trl-sponsor-price-card span{display:inline-flex;margin:.35rem 0 .2rem;padding:.16rem .42rem;border-radius:999px;background:rgba(240,198,58,.22);color:var(--trl-dark);font-family:"Courier New",Courier,monospace;font-weight:900;font-size:.8rem;}
.trl-sponsor-price-card p{margin:.25rem 0 0;color:rgba(31,45,35,.72);font-size:.86rem;line-height:1.35;}
.trl-sponsor-pricing-action{margin:.9rem 0 0;}

@media(max-width:760px){
  .trl-player-wrap > .trl-sponsors-video-strip,
  .trl-player-wrap > .trl-sponsors-banner.trl-sponsors-video-strip{--trl-video-strip-height:44px;}
  .trl-player-wrap.trl-has-video-sponsor-strip > .trl-sponsors-corner{bottom:calc(.45rem + 44px + .45rem);}
  .trl-player-wrap > .trl-sponsors-video-strip .trl-sponsor-card{padding:.25rem .32rem;}
  .trl-player-wrap > .trl-sponsors-video-strip .trl-sponsor-copy em{display:none;}
  .trl-sponsor-pricing summary{align-items:flex-start;flex-direction:column;gap:.25rem;}
}

/* v0.2.9 — mobile sponsor rail tuning + cycling pairs
   On phones, keep the video first: two compact sponsor cards are shown at a time.
   JS cycles through the rest so sponsor names stay readable instead of being crushed. */
.trl-player-wrap > .trl-sponsors-video-strip .trl-sponsor-card{
  --trl-mobile-cycle-fade: 1;
}

@media(max-width:760px){
  .trl-player-wrap > .trl-sponsors-video-strip,
  .trl-player-wrap > .trl-sponsors-banner.trl-sponsors-video-strip{
    --trl-video-strip-height: clamp(38px, 7.2vw, 48px);
    left:.46rem;
    right:.46rem;
    bottom:.38rem;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:.32rem;
  }

  .trl-player-wrap > .trl-sponsors-video-strip .trl-sponsor-card{
    min-height:var(--trl-video-strip-height);
    height:var(--trl-video-strip-height);
    padding:.22rem .3rem;
    gap:.34rem;
    border-radius:12px;
    background:linear-gradient(90deg,rgba(23,35,29,.54),rgba(63,95,76,.46));
    box-shadow:0 5px 14px rgba(0,0,0,.12);
  }

  .trl-player-wrap > .trl-sponsors-video-strip .trl-logo-wrap{
    flex:0 0 clamp(32px,8.4vw,42px);
    width:clamp(32px,8.4vw,42px);
    min-height:clamp(30px,7.8vw,38px);
    height:clamp(30px,7.8vw,38px);
    padding:.14rem;
    border-radius:9px;
  }

  .trl-player-wrap > .trl-sponsors-video-strip .trl-sponsor-logo{
    max-height:clamp(24px,6.8vw,32px);
  }

  .trl-player-wrap > .trl-sponsors-video-strip .trl-sponsor-copy{
    min-width:0;
    padding:0;
    gap:0;
  }

  .trl-player-wrap > .trl-sponsors-video-strip .trl-sponsor-copy strong{
    white-space:normal;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    text-overflow:clip;
    font-size:clamp(.66rem,3vw,.86rem);
    line-height:1.02;
    letter-spacing:-.02em;
  }

  .trl-player-wrap > .trl-sponsors-video-strip .trl-sponsor-copy em{
    display:none !important;
  }

  .trl-player-wrap > .trl-sponsors-video-strip.trl-mobile-cycling .trl-sponsor-card{
    display:none !important;
  }

  .trl-player-wrap > .trl-sponsors-video-strip.trl-mobile-cycling .trl-sponsor-card.trl-mobile-visible{
    display:flex !important;
  }

  .trl-player-wrap > .trl-sponsors-video-strip.trl-mobile-cycling .trl-sponsor-card.trl-mobile-visible{
    animation:trlSponsorPairIn .22s ease-out both;
  }
}

@media(max-width:420px){
  .trl-player-wrap > .trl-sponsors-video-strip,
  .trl-player-wrap > .trl-sponsors-banner.trl-sponsors-video-strip{
    --trl-video-strip-height: 42px;
    left:.36rem;
    right:.36rem;
    gap:.26rem;
  }

  .trl-player-wrap > .trl-sponsors-video-strip .trl-sponsor-card{
    padding:.2rem .25rem;
    gap:.28rem;
  }

  .trl-player-wrap > .trl-sponsors-video-strip .trl-logo-wrap{
    flex-basis:34px;
    width:34px;
    height:32px;
    min-height:32px;
  }

  .trl-player-wrap > .trl-sponsors-video-strip .trl-sponsor-logo{
    max-height:27px;
  }

  .trl-player-wrap > .trl-sponsors-video-strip .trl-sponsor-copy strong{
    font-size:.68rem;
  }
}

@keyframes trlSponsorPairIn{
  from{opacity:.28; transform:translateY(2px);} 
  to{opacity:1; transform:translateY(0);} 
}