/* =========================================================
   REVIEWAZZA PUBLIC CAT RUNNER GAME
   Game kucing loncat ala dino browser, pure CSS + JS
   ========================================================= */
.rz-cat-runner-card{
  position:relative;
  overflow:hidden;
  padding:28px;
  border-radius:34px;
  border:1px solid rgba(255,255,255,.76);
  background:
    radial-gradient(circle at 12% 15%,rgba(255,204,77,.24),transparent 28%),
    radial-gradient(circle at 92% 10%,rgba(255,95,183,.20),transparent 26%),
    radial-gradient(circle at 70% 100%,rgba(66,214,255,.22),transparent 32%),
    linear-gradient(145deg,rgba(255,255,255,.82),rgba(238,248,255,.70));
  box-shadow:14px 14px 34px rgba(116,134,168,.14),-14px -14px 34px rgba(255,255,255,.82);
}

.rz-cat-runner-card:after{
  content:"";
  position:absolute;
  right:-70px;
  bottom:-80px;
  width:230px;
  height:230px;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(79,124,255,.18),rgba(255,111,174,.20));
  filter:blur(2px);
  pointer-events:none;
}

.rz-cat-runner-card>.row{
  position:relative;
  z-index:1;
}

.rz-cat-runner-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.rz-cat-runner-meta span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  font-weight:900;
  color:#55627a;
  background:rgba(255,255,255,.66);
  box-shadow:inset 4px 4px 10px rgba(122,148,176,.10),inset -4px -4px 10px rgba(255,255,255,.86);
}

.rz-cat-runner-meta svg{
  width:16px;
  height:16px;
  color:#7d63ff;
}

.rz-cat-runner-meta b{
  color:#171f3d;
}

.rz-cat-runner-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.rz-cat-runner-help{
  display:flex;
  gap:9px;
  align-items:flex-start;
  padding:12px 14px;
  border-radius:20px;
  background:rgba(255,255,255,.56);
  border:1px dashed rgba(112,88,255,.17);
  color:#69748d;
  font-weight:800;
  line-height:1.45;
}

.rz-cat-runner-help svg{
  width:18px;
  height:18px;
  flex:0 0 auto;
  color:#7d63ff;
  margin-top:2px;
}

.rz-cat-runner-stage{
  position:relative;
  min-height:285px;
  border-radius:30px;
  overflow:hidden;
  cursor:pointer;
  outline:0;
  background:
    linear-gradient(180deg,#dff7ff 0%,#fff8f0 62%,#fff0f7 100%);
  box-shadow:inset 10px 10px 22px rgba(122,148,176,.14),inset -10px -10px 22px rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.72);
}

.rz-cat-runner-stage:focus{
  box-shadow:
    inset 10px 10px 22px rgba(122,148,176,.14),
    inset -10px -10px 22px rgba(255,255,255,.88),
    0 0 0 .25rem rgba(112,88,255,.16);
}

.rz-runner-sky{
  position:absolute;
  inset:0 0 auto;
  height:78%;
  pointer-events:none;
}

.rz-runner-cloud{
  position:absolute;
  border-radius:999px;
  background:rgba(255,255,255,.70);
  filter:blur(.2px);
  box-shadow:0 14px 28px rgba(100,120,150,.10);
}

.rz-runner-cloud:before,
.rz-runner-cloud:after{
  content:"";
  position:absolute;
  border-radius:999px;
  background:inherit;
}

.rz-runner-cloud.one{
  width:92px;
  height:35px;
  left:10%;
  top:20%;
  animation:rzRunnerCloud 8s ease-in-out infinite;
}

.rz-runner-cloud.one:before{
  width:38px;
  height:38px;
  left:16px;
  top:-14px;
}

.rz-runner-cloud.one:after{
  width:44px;
  height:44px;
  right:11px;
  top:-20px;
}

.rz-runner-cloud.two{
  width:128px;
  height:42px;
  right:11%;
  top:36%;
  animation:rzRunnerCloud 9s ease-in-out infinite reverse;
}

.rz-runner-cloud.two:before{
  width:48px;
  height:48px;
  left:20px;
  top:-18px;
}

.rz-runner-cloud.two:after{
  width:54px;
  height:54px;
  right:18px;
  top:-26px;
}

.rz-runner-star{
  position:absolute;
  color:#ff9fc7;
  opacity:.72;
  font-weight:900;
  animation:rzRunnerTwinkle 2.6s ease-in-out infinite;
}

.rz-runner-star.one{
  top:15%;
  left:48%;
}

.rz-runner-star.two{
  top:24%;
  right:23%;
  animation-delay:1.1s;
}

.rz-runner-ground{
  position:absolute;
  left:0;
  right:0;
  bottom:48px;
  height:8px;
  background:
    repeating-linear-gradient(90deg, rgba(112,88,255,.30) 0 16px, transparent 16px 31px),
    linear-gradient(90deg,#9b7cff,#42d6ff,#ff9fc7);
  border-radius:999px;
  animation:rzRunnerGround 1.2s linear infinite;
}

.rz-runner-ground:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:8px;
  height:48px;
  background:
    radial-gradient(circle at 15% 38%,rgba(255,204,77,.22),transparent 11%),
    radial-gradient(circle at 55% 72%,rgba(66,214,255,.18),transparent 12%),
    rgba(255,255,255,.20);
}

.rz-runner-cat{
  position:absolute;
  left:54px;
  bottom:56px;
  width:98px;
  height:80px;
  z-index:3;
  transform:translateY(var(--runner-cat-y, 0px));
  transition:transform .08s linear;
}

.rz-runner-cat.is-jumping{
  animation:rzRunnerCatTilt .42s ease-in-out infinite alternate;
}

.rz-runner-cat.is-hit{
  animation:rzRunnerCatHit .45s ease both;
}

.rz-runner-cat-body{
  position:absolute;
  left:24px;
  bottom:10px;
  width:58px;
  height:38px;
  border-radius:28px 30px 22px 22px;
  background:linear-gradient(145deg,#fff8df,#ffd286 58%,#ffae61);
  border:3px solid rgba(255,255,255,.78);
  box-shadow:0 12px 24px rgba(90,55,20,.13);
}

.rz-runner-cat-head{
  position:absolute;
  left:5px;
  bottom:26px;
  width:46px;
  height:44px;
  border-radius:20px 20px 18px 18px;
  background:linear-gradient(145deg,#fff8df,#ffd286 56%,#ffae61);
  border:3px solid rgba(255,255,255,.78);
  box-shadow:0 12px 22px rgba(90,55,20,.12);
}

.rz-runner-cat-ear{
  position:absolute;
  top:-15px;
  width:19px;
  height:22px;
  background:linear-gradient(145deg,#ffc372,#ff9f5e);
  border:3px solid rgba(255,255,255,.78);
  z-index:-1;
}

.rz-runner-cat-ear.left{
  left:2px;
  border-radius:8px 16px 8px 16px;
  transform:rotate(-18deg);
}

.rz-runner-cat-ear.right{
  right:2px;
  border-radius:16px 8px 16px 8px;
  transform:rotate(18deg);
}

.rz-runner-cat-ear:after{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:inherit;
  background:rgba(255,143,189,.42);
}

.rz-runner-cat-eye{
  position:absolute;
  top:16px;
  width:6px;
  height:9px;
  border-radius:999px;
  background:#241c35;
  box-shadow:inset 1px 2px 0 rgba(255,255,255,.48);
  animation:rzRunnerCatBlink 4.4s ease-in-out infinite;
}

.rz-runner-cat-eye.left{left:12px}
.rz-runner-cat-eye.right{right:12px}

.rz-runner-cat-nose{
  position:absolute;
  left:50%;
  top:26px;
  width:7px;
  height:5px;
  transform:translateX(-50%);
  border-radius:60% 60% 80% 80%;
  background:#ff7aa8;
}

.rz-runner-cat-mouth{
  position:absolute;
  left:50%;
  top:31px;
  width:12px;
  height:7px;
  transform:translateX(-50%);
  border-bottom:2px solid rgba(61,43,56,.72);
  border-radius:0 0 999px 999px;
}

.rz-runner-cat-whisker{
  position:absolute;
  top:29px;
  width:13px;
  height:2px;
  border-radius:999px;
  background:rgba(92,64,52,.50);
}

.rz-runner-cat-whisker.left{left:1px;transform-origin:right center}
.rz-runner-cat-whisker.right{right:1px;transform-origin:left center}
.rz-runner-cat-whisker.left.top{transform:rotate(12deg)}
.rz-runner-cat-whisker.left.bottom{top:34px;transform:rotate(-10deg)}
.rz-runner-cat-whisker.right.top{transform:rotate(-12deg)}
.rz-runner-cat-whisker.right.bottom{top:34px;transform:rotate(10deg)}

.rz-runner-cat-tail{
  position:absolute;
  right:5px;
  bottom:33px;
  width:40px;
  height:40px;
  border:9px solid #ffb46b;
  border-left-color:transparent;
  border-bottom-color:transparent;
  border-radius:50%;
  transform:rotate(32deg);
  filter:drop-shadow(0 8px 10px rgba(90,55,20,.12));
  animation:rzRunnerCatTail 2.2s ease-in-out infinite;
}

.rz-runner-cat-leg{
  position:absolute;
  bottom:0;
  width:15px;
  height:21px;
  border-radius:999px 999px 8px 8px;
  background:linear-gradient(180deg,#ffd58f,#ffb46b);
  border:3px solid rgba(255,255,255,.78);
  transform-origin:top center;
}

.rz-runner-cat-leg.back{
  left:44px;
  animation:rzRunnerLegBack .28s linear infinite;
}

.rz-runner-cat-leg.front{
  left:67px;
  animation:rzRunnerLegFront .28s linear infinite;
}

.rz-runner-obstacle{
  position:absolute;
  right:-80px;
  bottom:56px;
  width:38px;
  height:48px;
  z-index:2;
  transform:translateX(0);
}

.rz-runner-obstacle span{
  position:absolute;
  inset:0;
  display:block;
  border-radius:12px 12px 8px 8px;
  background:linear-gradient(145deg,#c99255,#a96b33);
  border:3px solid rgba(255,255,255,.65);
  box-shadow:0 12px 20px rgba(88,55,25,.16);
}

.rz-runner-obstacle span:before{
  content:"";
  position:absolute;
  left:6px;
  right:6px;
  top:12px;
  height:3px;
  border-radius:999px;
  background:rgba(255,255,255,.38);
  box-shadow:0 10px 0 rgba(255,255,255,.25);
}

.rz-runner-obstacle.is-moving{
  animation:rzRunnerObstacle var(--runner-speed, 1.55s) linear infinite;
}

.rz-cat-runner-message{
  position:absolute;
  left:16px;
  right:16px;
  bottom:13px;
  padding:11px 14px;
  border-radius:18px;
  text-align:center;
  font-weight:900;
  color:#5a667d;
  background:rgba(255,255,255,.64);
  box-shadow:inset 5px 5px 12px rgba(122,148,176,.10),inset -5px -5px 12px rgba(255,255,255,.86);
  z-index:4;
  transition:.2s;
}

.rz-cat-runner-stage.is-playing .rz-cat-runner-message{
  opacity:.92;
}

.rz-cat-runner-stage.is-game-over .rz-cat-runner-message{
  background:#fff0f0;
  color:#ce3152;
}

html.rz-dark-mode .rz-cat-runner-card{
  background:#0d1728 !important;
  border:1px solid rgba(255,255,255,.10) !important;
  color:#eef4ff !important;
  box-shadow:0 18px 42px rgba(0,0,0,.28) !important;
}

html.rz-dark-mode .rz-cat-runner-stage{
  background:linear-gradient(180deg,#0d1b31 0%,#111c2d 70%,#172437 100%) !important;
  border-color:rgba(255,255,255,.10) !important;
  box-shadow:none !important;
}

html.rz-dark-mode .rz-runner-cloud{
  background:rgba(255,255,255,.07);
  box-shadow:none;
}

html.rz-dark-mode .rz-cat-runner-meta span,
html.rz-dark-mode .rz-cat-runner-help,
html.rz-dark-mode .rz-cat-runner-message{
  background:#152133 !important;
  color:#dbe4ff !important;
  border-color:rgba(255,255,255,.10) !important;
  box-shadow:none !important;
}

html.rz-dark-mode .rz-cat-runner-meta b{
  color:#f8fbff !important;
}

html.rz-dark-mode .rz-runner-ground{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 16px, transparent 16px 31px),
    linear-gradient(90deg,#6c7cff,#42d6ff,#ff9fc7);
}

html.rz-dark-mode .rz-cat-runner-stage.is-game-over .rz-cat-runner-message{
  background:rgba(239,68,68,.14) !important;
  color:#fca5a5 !important;
  border-color:rgba(239,68,68,.24) !important;
}

@keyframes rzRunnerCloud{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(18px)}
}

@keyframes rzRunnerTwinkle{
  0%,100%{opacity:.35;transform:scale(.8)}
  50%{opacity:1;transform:scale(1.1)}
}

@keyframes rzRunnerGround{
  from{background-position:0 0,0 0}
  to{background-position:-62px 0,0 0}
}

@keyframes rzRunnerObstacle{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-100vw - 220px))}
}

@keyframes rzRunnerCatTail{
  0%,100%{transform:rotate(32deg)}
  50%{transform:rotate(50deg)}
}

@keyframes rzRunnerCatBlink{
  0%, 88%, 100%{transform:scaleY(1)}
  92%, 95%{transform:scaleY(.12)}
}

@keyframes rzRunnerLegBack{
  0%,100%{transform:rotate(16deg)}
  50%{transform:rotate(-18deg)}
}

@keyframes rzRunnerLegFront{
  0%,100%{transform:rotate(-18deg)}
  50%{transform:rotate(16deg)}
}

@keyframes rzRunnerCatTilt{
  from{rotate:-2deg}
  to{rotate:3deg}
}

@keyframes rzRunnerCatHit{
  0%{transform:translateY(var(--runner-cat-y,0)) rotate(0)}
  35%{transform:translateY(var(--runner-cat-y,0)) rotate(-10deg) scale(1.04)}
  100%{transform:translateY(var(--runner-cat-y,0)) rotate(0) scale(1)}
}

@media(max-width:991px){
  .rz-cat-runner-card{padding:22px}
  .rz-cat-runner-stage{min-height:255px}
}

@media(max-width:575px){
  .rz-cat-runner-actions .rz-cta{width:100%;justify-content:center}
  .rz-cat-runner-card{padding:20px;border-radius:28px}
  .rz-cat-runner-stage{min-height:235px;border-radius:24px}
  .rz-runner-cat{left:26px;transform:translateY(var(--runner-cat-y,0px)) scale(.88);transform-origin:bottom left}
  .rz-runner-obstacle{transform:scale(.88);transform-origin:bottom right}
  .rz-cat-runner-message{font-size:.86rem}
}


/* =========================================================
   PATCH FIX - CAT HEAD DIRECTION + SLOWER VARIED OBSTACLES
   ========================================================= */

/* Kepala kucing diarahkan normal ke depan/kanan, tidak terlihat kebalik */
.rz-runner-cat-head{
  left:6px !important;
  right:auto !important;
  bottom:28px !important;
  transform:scaleX(1) rotate(0deg) !important;
  transform-origin:center bottom !important;
}

.rz-runner-cat-body{
  left:30px !important;
  right:auto !important;
}

.rz-runner-cat-tail{
  right:2px !important;
  left:auto !important;
  bottom:35px !important;
  transform:rotate(35deg) scaleX(1) !important;
}

.rz-runner-cat-leg.back{left:47px !important}
.rz-runner-cat-leg.front{left:72px !important}

/* Rintangan lebih santai */
.rz-runner-obstacle.is-moving{
  animation-name:rzRunnerObstacleSlow !important;
  animation-duration:var(--runner-speed, 2.25s) !important;
  animation-timing-function:linear !important;
  animation-iteration-count:infinite !important;
}

/* Variasi rintangan */
.rz-runner-obstacle span{
  transition:width .2s ease, height .2s ease, border-radius .2s ease, background .2s ease;
}

/* Kardus */
.rz-runner-obstacle.is-box{
  width:40px;
  height:46px;
}
.rz-runner-obstacle.is-box span{
  border-radius:12px 12px 8px 8px;
  background:linear-gradient(145deg,#c99255,#a96b33);
}
.rz-runner-obstacle.is-box span:before{
  content:"";
  position:absolute;
  left:6px;
  right:6px;
  top:12px;
  height:3px;
  border-radius:999px;
  background:rgba(255,255,255,.38);
  box-shadow:0 10px 0 rgba(255,255,255,.25);
}

/* Batu */
.rz-runner-obstacle.is-rock{
  width:44px;
  height:34px;
}
.rz-runner-obstacle.is-rock span{
  border-radius:45% 55% 36% 44%;
  background:linear-gradient(145deg,#9aa5b8,#667085);
}
.rz-runner-obstacle.is-rock span:before{
  content:"";
  position:absolute;
  left:9px;
  top:8px;
  width:10px;
  height:5px;
  border-radius:999px;
  background:rgba(255,255,255,.22);
  box-shadow:15px 9px 0 rgba(255,255,255,.13);
}

/* Semak */
.rz-runner-obstacle.is-bush{
  width:54px;
  height:34px;
}
.rz-runner-obstacle.is-bush span{
  border-radius:999px 999px 14px 14px;
  background:linear-gradient(145deg,#66d58a,#209b5a);
}
.rz-runner-obstacle.is-bush span:before{
  content:"";
  position:absolute;
  left:6px;
  top:-11px;
  width:21px;
  height:24px;
  border-radius:999px;
  background:#75df99;
  box-shadow:20px -2px 0 #52c97a, 31px 8px 0 #43b66c;
}

/* Pagar kecil */
.rz-runner-obstacle.is-fence{
  width:58px;
  height:42px;
}
.rz-runner-obstacle.is-fence span{
  border-radius:10px;
  background:
    linear-gradient(90deg, transparent 0 9px, #b8733c 9px 15px, transparent 15px 25px, #b8733c 25px 31px, transparent 31px 41px, #b8733c 41px 47px, transparent 47px 100%),
    linear-gradient(180deg, transparent 0 14px, #d0935c 14px 21px, transparent 21px 100%);
  border-color:rgba(255,255,255,.58);
}
.rz-runner-obstacle.is-fence span:before{
  content:"";
  position:absolute;
  left:8px;
  top:-8px;
  width:0;
  height:0;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-bottom:9px solid #b8733c;
  filter:drop-shadow(16px 0 0 #b8733c) drop-shadow(32px 0 0 #b8733c);
}

html.rz-dark-mode .rz-runner-obstacle.is-rock span{
  background:linear-gradient(145deg,#64748b,#334155);
}
html.rz-dark-mode .rz-runner-obstacle.is-bush span{
  background:linear-gradient(145deg,#3fcf75,#147a45);
}
html.rz-dark-mode .rz-runner-obstacle.is-fence span{
  background:
    linear-gradient(90deg, transparent 0 9px, #8a522b 9px 15px, transparent 15px 25px, #8a522b 25px 31px, transparent 31px 41px, #8a522b 41px 47px, transparent 47px 100%),
    linear-gradient(180deg, transparent 0 14px, #a66a3b 14px 21px, transparent 21px 100%);
}

@keyframes rzRunnerObstacleSlow{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-100vw - 260px))}
}


/* =========================================================
   HOTFIX - CAT FACING RIGHT + SLOWER OBSTACLE
   ========================================================= */

/* Kucing dibuat benar-benar menghadap kanan, arah datang rintangan */
.rz-runner-cat{
  left:54px !important;
  transform:translateY(var(--runner-cat-y, 0px)) scaleX(-1) !important;
  transform-origin:center bottom !important;
}

/* Saat mobile tetap menghadap kanan dan tidak terlalu besar */
@media(max-width:575px){
  .rz-runner-cat{
    left:26px !important;
    transform:translateY(var(--runner-cat-y, 0px)) scale(.88) scaleX(-1) !important;
    transform-origin:bottom left !important;
  }
}

/* Balik bagian wajah supaya mata, hidung, mulut tetap normal walau badan di-flip */
.rz-runner-cat-head,
.rz-runner-cat-eye,
.rz-runner-cat-nose,
.rz-runner-cat-mouth,
.rz-runner-cat-whisker{
  transform-style:preserve-3d;
}

/* Kepala lebih maju ke arah kanan setelah badan di-flip */
.rz-runner-cat-head{
  left:3px !important;
  bottom:29px !important;
}

/* Tail diposisikan di belakang badan setelah arah dibalik */
.rz-runner-cat-tail{
  right:0 !important;
  bottom:35px !important;
}

/* Rintangan dibuat lebih lambat lagi */
.rz-runner-obstacle.is-moving{
  animation-duration:var(--runner-speed, 3.05s) !important;
}

/* Ground juga lebih pelan agar visual tidak terasa ngebut */
.rz-runner-ground{
  animation-duration:2.1s !important;
}