/* KARAOKE V7 — webOS UI Lite Pass 1
   LG/webOS only. Rendering-cost reduction; no player, Firebase, queue, score, volume, or Android-TV logic changes.
*/
body.tv-platform-webos,
body.tv-platform-webos * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Remove costly decorative shadows on the TV shell while preserving layout and colors. */
body.tv-platform-webos .tv-shell,
body.tv-platform-webos .tv-main,
body.tv-platform-webos .tv-side,
body.tv-platform-webos .tv-head,
body.tv-platform-webos .tv-now,
body.tv-platform-webos .tv-controls,
body.tv-platform-webos .qrbox,
body.tv-platform-webos .card,
body.tv-platform-webos .panel,
body.tv-platform-webos .modal,
body.tv-platform-webos .toast {
  box-shadow: none !important;
}

/* Avoid continuous compositor work from decorative transitions/animations.
   Do NOT touch iframe/video/player descendants. */
body.tv-platform-webos .tv-shell *,
body.tv-platform-webos .tv-main *,
body.tv-platform-webos .tv-side * {
  transition-duration: 0s !important;
  -webkit-transition-duration: 0s !important;
  animation-duration: 0s !important;
  -webkit-animation-duration: 0s !important;
  animation-delay: 0s !important;
  -webkit-animation-delay: 0s !important;
}

body.tv-platform-webos .player,
body.tv-platform-webos .player *,
body.tv-platform-webos #player,
body.tv-platform-webos #player * {
  animation-duration: initial !important;
  -webkit-animation-duration: initial !important;
  animation-delay: initial !important;
  -webkit-animation-delay: initial !important;
}

/* Running text is functional UI, not decorative motion.
   Older LG engines can ignore CSS variables inside animation declarations,
   so webOS uses fixed durations plus legacy WebKit animation properties. */
body.tv-platform-webos .player .karaoke-event-ticker-track {
  animation-name: karaokeV7EventTicker;
  -webkit-animation-name: karaokeV7EventTicker;
  animation-duration: 30s !important;
  -webkit-animation-duration: 30s !important;
  animation-delay: 0s !important;
  -webkit-animation-delay: 0s !important;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-play-state: running;
  -webkit-animation-play-state: running;
}
body.tv-platform-webos .player .karaoke-fs-ticker-track {
  animation-name: karaokeV7Ticker;
  -webkit-animation-name: karaokeV7Ticker;
  animation-duration: 28s !important;
  -webkit-animation-duration: 28s !important;
  animation-delay: 0s !important;
  -webkit-animation-delay: 0s !important;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-play-state: running;
  -webkit-animation-play-state: running;
}

@-webkit-keyframes karaokeV7EventTicker {
  from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  to { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
}
@-webkit-keyframes karaokeV7Ticker {
  from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  to { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
}

/* Reaction visual is intentionally animated; keep it alive on webOS.
   Include legacy -webkit-animation for older LG webOS engines. */
body.tv-platform-webos #kv7RxLiteOverlay .kv7-rx3-card {
  animation-duration: 4.5s !important;
  -webkit-animation-duration: 4.5s !important;
  animation-delay: 0s !important;
  -webkit-animation-delay: 0s !important;
  animation-fill-mode: forwards !important;
  -webkit-animation-fill-mode: forwards !important;
}
body.tv-platform-webos #kv7RxLiteOverlay .kv7-rx3-dot {
  animation-name: kv7Rx3Dot !important;
  -webkit-animation-name: kv7Rx3Dot !important;
  animation-duration: 1.8s !important;
  -webkit-animation-duration: 1.8s !important;
  animation-delay: 0s !important;
  -webkit-animation-delay: 0s !important;
  animation-fill-mode: forwards !important;
  -webkit-animation-fill-mode: forwards !important;
}
body.tv-platform-webos #kv7RxLiteOverlay .kv7-rx3-applause { animation-name: kv7Rx3Clap !important; -webkit-animation-name: kv7Rx3Clap !important; }
body.tv-platform-webos #kv7RxLiteOverlay .kv7-rx3-cheer { animation-name: kv7Rx3Party !important; -webkit-animation-name: kv7Rx3Party !important; }
body.tv-platform-webos #kv7RxLiteOverlay .kv7-rx3-laugh { animation-name: kv7Rx3Laugh !important; -webkit-animation-name: kv7Rx3Laugh !important; }
body.tv-platform-webos #kv7RxLiteOverlay .kv7-rx3-tease { animation-name: kv7Rx3Tease !important; -webkit-animation-name: kv7Rx3Tease !important; }
body.tv-platform-webos #kv7RxLiteOverlay .kv7-rx3-wooo { animation-name: kv7Rx3Shock !important; -webkit-animation-name: kv7Rx3Shock !important; }
body.tv-platform-webos #kv7RxLiteOverlay .kv7-rx3-huaaa { animation-name: kv7Rx3Boom !important; -webkit-animation-name: kv7Rx3Boom !important; }

/* Legacy WebKit keyframes for older LG webOS browser engines. */
@-webkit-keyframes kv7Rx3Clap {
  0%{opacity:0;-webkit-transform:translate(-50%,-47%) scale(.48) rotate(-9deg)}
  16%{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1.07) rotate(7deg)}
  32%{-webkit-transform:translate(-50%,-50%) scale(.96) rotate(-6deg)}
  48%{-webkit-transform:translate(-50%,-50%) scale(1.04) rotate(6deg)}
  66%{-webkit-transform:translate(-50%,-50%) scale(1) rotate(0)}
  100%{opacity:0;-webkit-transform:translate(-50%,-63%) scale(.9)}
}
@-webkit-keyframes kv7Rx3Party {
  0%{opacity:0;-webkit-transform:translate(-50%,-48%) scale(.34) rotate(-13deg)}
  18%{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1.16) rotate(9deg)}
  38%{-webkit-transform:translate(-50%,-50%) scale(.97) rotate(-5deg)}
  60%{-webkit-transform:translate(-50%,-50%) scale(1.04) rotate(3deg)}
  100%{opacity:0;-webkit-transform:translate(-50%,-64%) scale(.9)}
}
@-webkit-keyframes kv7Rx3Laugh {
  0%{opacity:0;-webkit-transform:translate(-50%,-47%) scale(.43)}
  18%{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1.05)}
  34%{-webkit-transform:translate(-56%,-47%) rotate(-7deg)}
  50%{-webkit-transform:translate(-44%,-53%) rotate(7deg)}
  66%{-webkit-transform:translate(-54%,-48%) rotate(-5deg)}
  82%{-webkit-transform:translate(-46%,-52%) rotate(5deg)}
  100%{opacity:0;-webkit-transform:translate(-50%,-63%) scale(.9)}
}
@-webkit-keyframes kv7Rx3Tease {
  0%{opacity:0;-webkit-transform:translate(-50%,-48%) scale(.38) rotate(-11deg)}
  18%{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1.08) rotate(9deg)}
  38%{-webkit-transform:translate(-58%,-50%) rotate(-11deg)}
  58%{-webkit-transform:translate(-42%,-50%) rotate(11deg)}
  78%{-webkit-transform:translate(-50%,-50%) rotate(0)}
  100%{opacity:0;-webkit-transform:translate(-50%,-63%) scale(.9)}
}
@-webkit-keyframes kv7Rx3Shock {
  0%{opacity:0;-webkit-transform:translate(-50%,-50%) scale(.16)}
  16%{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1.24)}
  34%{-webkit-transform:translate(-50%,-50%) scale(.9)}
  50%{-webkit-transform:translate(-50%,-50%) scale(1.08)}
  100%{opacity:0;-webkit-transform:translate(-50%,-63%) scale(.9)}
}
@-webkit-keyframes kv7Rx3Boom {
  0%{opacity:0;-webkit-transform:translate(-50%,-50%) scale(.1) rotate(-13deg)}
  16%{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1.3) rotate(9deg)}
  34%{-webkit-transform:translate(-50%,-50%) scale(.88) rotate(-5deg)}
  52%{-webkit-transform:translate(-50%,-50%) scale(1.07) rotate(3deg)}
  100%{opacity:0;-webkit-transform:translate(-50%,-65%) scale(.86)}
}
@-webkit-keyframes kv7Rx3Dot {
  0%{opacity:0;-webkit-transform:translate(0,0) scale(.4)}
  18%{opacity:1}
  100%{opacity:0;-webkit-transform:translate(var(--dx),var(--dy)) scale(.15)}
}

/* Keep overlays flat and cheap on webOS. */
body.tv-platform-webos .waiting,
body.tv-platform-webos [class*="overlay"],
body.tv-platform-webos [id*="Overlay"] {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}