/* v87.5 – rest visuals upgrade */
:root{
  --rest-seat:url('../img/rest/rest-downhill-crash-v87101.png');
  --rest-stretch:url('../img/rest/rest-hockey-tackle-v87101.png');
  --rest-hydrate:url('../img/rest/rest-goalie-save-v87101.png');
}

.video-wrap .rest-stage{
  position:relative;
  background-color:#030814 !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  isolation:isolate;
}
.video-wrap .rest-stage.rest-visual-seat{background-image:var(--rest-seat) !important; background-position:center center !important;}
.video-wrap .rest-stage.rest-visual-stretch{background-image:var(--rest-stretch) !important; background-position:center center !important;}
.video-wrap .rest-stage.rest-visual-hydrate{background-image:var(--rest-hydrate) !important; background-position:center center !important;}

.video-wrap .rest-stage::before{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(4,7,14,.94) 0%, rgba(4,7,14,.88) 22%, rgba(4,7,14,.54) 46%, rgba(4,7,14,.54) 100%),
    linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.28) 55%, rgba(0,0,0,.42) 100%) !important;
  z-index:0;
}
.video-wrap .rest-stage::after{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 18% 78%, rgba(34,230,255,.14), transparent 26%),
    radial-gradient(circle at 82% 18%, rgba(214,255,0,.10), transparent 20%);
  z-index:0;
  pointer-events:none;
}

.video-wrap .rest-card{
  position:relative;
  z-index:1;
  width:100%; height:100%;
  display:grid; place-items:center;
  padding:24px 18px !important;
  background:transparent !important;
}
.video-wrap .rest-inner.rest-compact{
  width:min(56%, 520px) !important;
  margin-right:auto;
  margin-left:clamp(14px,3vw,32px);
  place-items:start !important;
  text-align:left !important;
  gap:10px !important;
}
.video-wrap .rest-badge{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(34,230,255,.18);
  background:rgba(11,132,255,.11);
  color:#dff8ff;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.14em;
  text-transform:uppercase;
  backdrop-filter:blur(10px);
}
.video-wrap .rest-title{
  font-size:clamp(26px,3.4vw,48px) !important;
  color:#ffffff;
  text-shadow:0 6px 24px rgba(0,0,0,.28);
}
.video-wrap .rest-display{
  font-size:clamp(72px,11vw,146px) !important;
  line-height:.86 !important;
  color:#f6fcff !important;
  text-shadow:0 0 28px rgba(34,230,255,.18), 0 14px 48px rgba(0,0,0,.58) !important;
}
.video-wrap .rest-next{
  font-size:clamp(14px,1.4vw,20px) !important;
  color:#d3e0ec !important;
  max-width:34ch;
}
.video-wrap .rest-next b{color:#fff !important;}
.video-wrap .rest-progress{
  width:min(100%, 360px) !important;
  height:8px !important;
  background:rgba(255,255,255,.11) !important;
  border:1px solid rgba(255,255,255,.05);
  box-shadow:none !important;
}
.video-wrap .rest-progress-bar{
  background:linear-gradient(90deg,#22e6ff,#0b84ff,#42ffd2) !important;
}
.video-wrap .rest-equipment{
  margin-top:2px !important;
  padding:10px 12px !important;
  border-radius:16px !important;
  border:1px solid rgba(170,205,255,.13) !important;
  background:rgba(255,255,255,.055) !important;
  color:#ecf6fb !important;
  font-size:13px !important;
  line-height:1.26 !important;
  max-width:40ch;
  backdrop-filter:blur(10px);
}

/* Mobile: keep image visible with overlay and readable card */
@media(max-width:900px){
  .video-wrap .rest-stage::before{
    background:
      linear-gradient(180deg, rgba(4,7,14,.30) 0%, rgba(4,7,14,.42) 26%, rgba(4,7,14,.86) 72%, rgba(4,7,14,.95) 100%),
      linear-gradient(90deg, rgba(4,7,14,.66) 0%, rgba(4,7,14,.22) 45%, rgba(4,7,14,.40) 100%) !important;
  }
  .video-wrap .rest-stage.rest-visual-seat{background-position:68% center !important;}
  .video-wrap .rest-stage.rest-visual-stretch{background-position:58% center !important;}
  .video-wrap .rest-stage.rest-visual-hydrate{background-position:64% center !important;}
  .video-wrap .rest-card{padding:14px 10px !important; align-items:end;}
  .video-wrap .rest-inner.rest-compact{
    width:min(94%, 420px) !important;
    margin:0 auto !important;
    padding:12px 12px 10px;
    border-radius:22px;
    background:linear-gradient(180deg, rgba(5,10,18,.76), rgba(5,10,18,.88));
    border:1px solid rgba(170,205,255,.13);
    box-shadow:0 16px 34px rgba(0,0,0,.22);
    backdrop-filter:blur(10px);
    gap:8px !important;
  }
  .video-wrap .rest-badge{font-size:10px; min-height:26px; padding:6px 9px;}
  .video-wrap .rest-title{font-size:clamp(20px,5vw,28px) !important;}
  .video-wrap .rest-display{font-size:clamp(54px,16vw,96px) !important;}
  .video-wrap .rest-next{font-size:13px !important;}
  .video-wrap .rest-progress{height:7px !important; width:100% !important;}
  .video-wrap .rest-equipment{font-size:12px !important; padding:8px 10px !important; border-radius:14px !important;}
}

@media(max-width:430px){
  .video-wrap .rest-stage.rest-visual-seat{background-position:72% center !important;}
  .video-wrap .rest-stage.rest-visual-stretch{background-position:62% center !important;}
  .video-wrap .rest-stage.rest-visual-hydrate{background-position:68% center !important;}
  .video-wrap .rest-inner.rest-compact{width:95% !important; padding:10px;}
  .video-wrap .rest-display{font-size:clamp(48px,15.5vw,84px) !important;}
}