/* run-game.css */
:root{
  --primary:#4caf50;
  --primaryShadow:#2e7d32;
  --sky1:#1e90ff;
  --sky2:#87ceeb;
  --pillBg:rgba(0,0,0,0.45);
  --pillBorder:rgba(255,255,255,0.9);
  --cardShadow:0 -10px 30px rgba(0,0,0,0.22);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html, body{
  height:100%;
  margin:0;
}

body{
  overflow-x:hidden;
  overflow-y:auto;
  background:#111;
  font-family:"Arial Rounded MT Bold","Trebuchet MS",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  touch-action:manipulation;
}


.rg{
  position:relative;
  width:100vw;
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:linear-gradient(to bottom, var(--sky1), var(--sky2));
}


.rg-sky{
  position:relative;
  flex:0 0 65svh;
  min-height:300px;
}


@media (min-width:768px){
  .rg-sky{ flex-basis:62vh; min-height:420px; }
}

.rg-canvas-wrap{
  position:absolute;
  inset:0;
}

#runCanvas{
  width:100%;
  height:100%;
  display:block;
}

.rg-topbar{
  position:absolute;
  top:calc(env(safe-area-inset-top, 0px) + 10px);
  left:12px;
  right:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  z-index:20;
}

.rg-title{
  flex:1;
  text-align:center;
  color:#fff;
  font-weight:900;
  font-size:clamp(16px, 2.2vw, 20px);
  text-shadow:0 2px 12px rgba(0,0,0,0.25);
  pointer-events:none;
  user-select:none;
}

.rg-stats{
  position:absolute;
  top:calc(env(safe-area-inset-top, 0px) + 56px);
  left:12px;
  right:12px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  z-index:20;
  pointer-events:none;
  flex-wrap:wrap;
  row-gap:8px;
}

.rg-pill{
  background:var(--pillBg);
  color:#fff;
  border:2px solid var(--pillBorder);
  border-radius:16px;
  padding:8px 12px;
  font-weight:900;
  font-size:14px;
  white-space:nowrap;
  box-shadow:0 10px 24px rgba(0,0,0,0.18);
  backdrop-filter:blur(6px);
}

.rg-btn{
  pointer-events:auto;
  cursor:pointer;
  user-select:none;
}

.rg-btn:active{
  transform:translateY(1px);
}

.rg-card{
  flex:1 1 auto;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,0.9), transparent 60%),
    linear-gradient(135deg,#fdf4ff,#efe7ff,#e6fbff);
  border-top-left-radius:34px;
  border-top-right-radius:34px;
  box-shadow:
    0 -12px 40px rgba(124,58,237,0.25),
    0 -4px 16px rgba(236,72,153,0.18);
  padding:18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  display:flex;
  flex-direction:column;
  justify-content:center;
  animation:rgCardIn 220ms ease-out;
}


@media (min-width:768px){
  .rg-card{
    width:min(680px, calc(100% - 40px));
    margin:0 auto 18px;
    border-radius:30px;
    flex:0 0 auto;
  }
}

@keyframes rgCardIn{
  from{ transform:translateY(12px); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}

.rg-word{
  font-size:clamp(28px, 6vw, 44px);
  font-weight:900;
  color:#222;
  text-align:center;
  margin:0 0 14px 0;
  letter-spacing:0.2px;
}

.rg-options{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px;
}


@media (min-width:768px){
  .rg-options{ grid-template-columns:repeat(3, 1fr); }
}

#optionsContainer .btn{
  width:100%;
  border:none;
  cursor:pointer;
  border-radius:18px;
  padding:14px 12px;
  min-height:52px;
  font-size:17px;
  font-weight:900;
  color:#2b0b3f;
  background:
    linear-gradient(135deg,#ffd6ff,#c8b6ff,#b8f2e6);
  box-shadow:
    0 10px 24px rgba(124,58,237,0.35),
    inset 0 0 0 2px rgba(255,255,255,0.6);
  transition:
    transform 160ms cubic-bezier(.2,1.4,.4,1),
    box-shadow 160ms ease,
    filter 160ms ease;
}


@media (hover:hover){
  #optionsContainer .btn:hover{ filter:brightness(1.04); }
}

#optionsContainer .btn:active{
  transform:translateY(3px);
  box-shadow:0 3px 0 var(--primaryShadow);
}

#optionsContainer .btn:focus-visible,
.rg-btn:focus-visible{
  outline:3px solid #fff;
  outline-offset:3px;
}

#kpopGirl{
  position:fixed;
  right:16px;
  bottom:16px;
  width:140px;
  opacity:0;
  pointer-events:none;
  z-index:999999;
}


.finish-overlay,
.lose-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.rg-timer-wrap{
  position:relative;
  flex:1 1 100%;
  display:flex;
  justify-content:center;
  margin-top:4px;
}

.rg-timer-pill{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:999px;
  border:3px solid transparent;
  background:
    linear-gradient(#ffffff,#ffffff) padding-box,
    linear-gradient(135deg,#ff6fb1,#b983ff,#6ae3ff) border-box;
  box-shadow:
    0 10px 28px rgba(255,105,180,0.25),
    0 18px 40px rgba(109,40,217,0.12);
  backdrop-filter:blur(6px);
  animation:rgTimerFloat 2.4s ease-in-out infinite;
}

.rg-timer-label{
  font-weight:900;
  font-size:14px;
  color:#6d28d9;
}

.rg-timer-value{
  font-weight:900;
  font-size:18px;
  color:#d63384;
  min-width:32px;
  text-align:center;
  animation:rgTimerPulse 1.1s infinite ease-in-out;
}

.rg-timer-pill::before{
  content:"";
  position:absolute;
  inset:-40%;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.85), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(255,182,213,0.8), transparent 60%),
    radial-gradient(circle at 60% 30%, rgba(106,227,255,0.75), transparent 62%);
  animation:rgTimerGlow 2.2s infinite ease-in-out;
  pointer-events:none;
}

.rg-timer-pill::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,0.55) 45%,
    transparent 70%
  );
  transform:translateX(-120%);
  animation:rgTimerShine 2.6s infinite ease-in-out;
  pointer-events:none;
}

@keyframes rgTimerFloat{
  0%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
  100%{ transform:translateY(0); }
}

@keyframes rgTimerPulse{
  0%{ transform:scale(1) rotate(-1deg); }
  50%{ transform:scale(1.08) rotate(1deg); }
  100%{ transform:scale(1) rotate(-1deg); }
}

@keyframes rgTimerGlow{
  0%{ transform:scale(1) rotate(0deg); opacity:0.75; }
  50%{ transform:scale(1.08) rotate(6deg); opacity:1; }
  100%{ transform:scale(1) rotate(0deg); opacity:0.75; }
}

@keyframes rgTimerShine{
  0%{ transform:translateX(-120%); opacity:0; }
  20%{ opacity:1; }
  60%{ opacity:1; }
  100%{ transform:translateX(120%); opacity:0; }
}
.rg-timer-value.danger{
  color:#ff0033;
  text-shadow:
    0 0 8px rgba(255,0,51,0.8),
    0 0 16px rgba(255,0,51,0.6);
  animation:rgDangerPulse 0.6s infinite;
}

@keyframes rgDangerPulse{
  0%{
    transform:scale(1);
  }
  50%{
    transform:scale(1.25);
  }
  100%{
    transform:scale(1);
  }
}
.rg-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,0.55), transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(236,72,153,0.35), transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(124,58,237,0.25), transparent 55%);
  animation:rgMagicGlow 6s ease-in-out infinite;
  border-top-left-radius:34px;
  border-top-right-radius:34px;
}

@keyframes rgMagicGlow{
  0%{ opacity:0.6; transform:translateY(0); }
  50%{ opacity:1; transform:translateY(-6px); }
  100%{ opacity:0.6; transform:translateY(0); }
}
#optionsContainer .btn{
  animation:rgBtnIn 420ms cubic-bezier(.2,1.4,.4,1) both;
}

#optionsContainer .btn:nth-child(1){ animation-delay:40ms; }
#optionsContainer .btn:nth-child(2){ animation-delay:90ms; }
#optionsContainer .btn:nth-child(3){ animation-delay:140ms; }
#optionsContainer .btn:nth-child(4){ animation-delay:190ms; }

@keyframes rgBtnIn{
  from{
    opacity:0;
    transform:translateY(14px) scale(0.96);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}
#optionsContainer .btn.correct{
  animation:rgSuccessPop 420ms cubic-bezier(.2,1.4,.4,1);
  background:
    linear-gradient(135deg,#b9ffdd,#6ee7b7,#34d399);
  color:#064e3b;
  box-shadow:
    0 0 0 0 rgba(52,211,153,0.8),
    0 12px 28px rgba(16,185,129,0.45);
}

@keyframes rgSuccessPop{
  0%{
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(52,211,153,0.8);
  }
  60%{
    transform:scale(1.12);
    box-shadow:0 0 0 14px rgba(52,211,153,0);
  }
  100%{
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(52,211,153,0);
  }
}




.rg-sky::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:26%;
  background:
    linear-gradient(
      to right,
      rgba(255,255,255,0.18),
      rgba(255,255,255,0) 30%,
      rgba(255,255,255,0.18) 60%,
      rgba(255,255,255,0)
    );
  background-size:140px 100%;
  filter: blur(6px);
  opacity:0.35;
  animation:rgGroundFlow 0.9s linear infinite;
  pointer-events:none;
}

@keyframes rgGroundFlow{
  from{ background-position:0 0; }
  to{ background-position:-140px 0; }
}






.rg-sky::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.35), transparent 40%),
    radial-gradient(circle at 70% 20%, rgba(255,255,255,0.25), transparent 45%),
    radial-gradient(circle at 50% 60%, rgba(255,255,255,0.2), transparent 50%);
  animation:rgCloudsMove 40s linear infinite;
  pointer-events:none;
}

@keyframes rgCloudsMove{
  from{ transform:translateX(0); }
  to{ transform:translateX(-200px); }
}

.finish-line{
  position:absolute;
  right:40px;
  bottom:18%;
  width:14px;
  height:160px;
  border-radius:12px;
  background:
    linear-gradient(180deg,#a7f3d0,#34d399,#a7f3d0);
  box-shadow:
    0 0 20px rgba(52,211,153,0.8),
    0 0 40px rgba(52,211,153,0.6);
  animation:finishPulse 1.4s ease-in-out infinite;
  pointer-events:none;
}

@keyframes finishPulse{
  0%{ transform:scaleY(1); opacity:0.8; }
  50%{ transform:scaleY(1.08); opacity:1; }
  100%{ transform:scaleY(1); opacity:0.8; }
}
/* החלף את כל הבלוק של .finish-line-label בזה */

.finish-line-label{
  position:absolute;
  right:-10px;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:6px;
  border-radius:999px;
  font-weight:900;
  font-size:11px;
  line-height:1.05;
  letter-spacing:0.2px;
  color:#064e3b;
  background:linear-gradient(135deg,#ecfdf5,#a7f3d0);
  box-shadow:
    0 0 12px rgba(52,211,153,0.9),
    0 0 26px rgba(52,211,153,0.6);
  pointer-events:none;

  opacity:0;
  transform:translateY(-50%) scale(0.85);
  filter:blur(0.2px);
  transition:opacity 180ms ease, transform 180ms cubic-bezier(.2,1.4,.4,1), filter 180ms ease;
}

.rg-near-finish .finish-line-label{
  opacity:1;
  transform:translateY(-50%) scale(1);
  filter:none;
}

@media (max-width:420px){
  .finish-line-label{
    width:40px;
    height:40px;
    font-size:10px;
    right:-8px;
  }
}