.rfr-open {
  overflow: hidden !important;
}

.rfr-offer {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(100%, 600px);
  margin: 12px auto;
  padding: 14px;
  border: 1px solid #b8e3c8;
  border-radius: 16px;
  background: linear-gradient(135deg, #effcf3, #e8f6ff);
  color: #18344c;
  box-shadow: 0 6px 18px rgba(8, 66, 102, .08);
}

.rfr-offer-copy {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}

.rfr-offer-copy strong {
  font-size: 16px;
}

.rfr-offer-kicker {
  color: #16804a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.rfr-offer-button,
.rfr-primary,
.rfr-secondary {
  border: 0;
  border-radius: 999px;
  padding: 11px 17px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.rfr-offer-button,
.rfr-primary {
  background: #087c50;
  color: #fff;
  box-shadow: 0 5px 12px rgba(8, 124, 80, .22);
}

.rfr-secondary {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #24415b;
}

.rfr-library-card {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  padding: 13px 15px;
  border: 1px solid #a8dfbd;
  border-radius: 14px;
  background: linear-gradient(135deg, #effcf3, #e8f6ff);
  color: #18344c;
  text-align: start;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(8, 66, 102, .07);
}

.rfr-library-card > span:nth-child(2) {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.rfr-library-card strong {
  font-size: 14px;
}

.rfr-library-card small {
  color: #527087;
  font-size: 11.5px;
}

.rfr-library-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  background: #fff;
  font-size: 20px;
}

.rfr-library-arrow {
  color: #087c50;
  font-size: 25px;
}

.rfr-overlay {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #d9f1cc;
  font-family: inherit;
}

.rfr-dialog {
  display: grid;
  width: min(100vw, 620px);
  height: 100dvh;
  max-height: 100dvh;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  background: #f8fafc;
  box-shadow: 0 0 36px rgba(11, 48, 66, .24);
}

.rfr-header {
  z-index: 5;
  display: grid;
  grid-template-columns: 42px 1fr auto 42px;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: max(8px, env(safe-area-inset-top)) 12px 8px;
  border-bottom: 1px solid #dbe6ee;
  background: rgba(255, 255, 255, .96);
}

.rfr-icon-button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid #d7e1e9;
  border-radius: 50%;
  background: #fff;
  color: #23435b;
  font: inherit;
  font-size: 22px;
  cursor: pointer;
}

.rfr-score {
  display: flex;
  align-items: baseline;
  gap: 7px;
  color: #476377;
  font-size: 12px;
}

.rfr-score strong {
  color: #0b6a45;
  font-size: 24px;
  line-height: 1;
}

.rfr-strikes {
  display: flex;
  direction: ltr;
  gap: 5px;
}

.rfr-strike {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  background: #e3eaf0;
  color: #8ca0af;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.rfr-strike.is-used {
  background: #ffe1df;
  color: #c9302c;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #efaaa6;
}

.rfr-stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.rfr-road {
  position: absolute;
  inset: 0;
  direction: ltr;
  overflow: hidden;
  background:
    linear-gradient(90deg,
      #e6f2d6 0 7%,
      #f9fbf4 7% 10%,
      #db4545 10% 11.5%,
      #fff 11.5% 13%,
      #737d87 13% 87%,
      #fff 87% 88.5%,
      #db4545 88.5% 90%,
      #f9fbf4 90% 93%,
      #e6f2d6 93% 100%);
}

.rfr-lane {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2%;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.98) 0 34px, transparent 34px 58px);
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.12));
}

.rfr-road.is-moving .rfr-lane {
  animation: rfr-lane-scroll 500ms linear infinite;
}

.rfr-lane[data-lane="0"] { left: 37%; }
.rfr-lane[data-lane="1"] { left: 62%; }

.rfr-road-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.07) 45%, transparent 70%);
}

.rfr-roadside {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

.rfr-tree {
  position: absolute;
  top: var(--tree-top);
  width: 9%;
  min-width: 32px;
  max-width: 48px;
  aspect-ratio: .72;
  transform: translateY(-50%);
}

.rfr-road.is-moving .rfr-tree {
  animation: rfr-tree-scroll 5s linear infinite;
  animation-delay: var(--tree-delay);
}

.rfr-road.is-paused .rfr-lane,
.rfr-road.is-paused .rfr-tree {
  animation-play-state: paused;
}

.rfr-tree.is-left { left: .8%; }
.rfr-tree.is-right { right: .8%; }

.rfr-tree::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  width: 100%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 48% 52% 46% 54%;
  background:
    radial-gradient(circle at 35% 35%, #a8db65 0 18%, transparent 19%),
    radial-gradient(circle at 67% 40%, #75b83a 0 27%, transparent 28%),
    radial-gradient(circle at 47% 65%, #4f9a2f 0 33%, transparent 34%);
  filter: drop-shadow(0 3px 2px rgba(43,77,21,.22));
}

.rfr-tree::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 18%;
  height: 43%;
  transform: translateX(-50%);
  border-radius: 2px;
  background: #8a572f;
}

.rfr-car {
  position: absolute;
  z-index: 3;
  bottom: 7%;
  left: 24.5%;
  width: 16%;
  aspect-ratio: 80 / 150;
  transition: left 150ms cubic-bezier(.2,.85,.35,1.2);
  filter: drop-shadow(0 10px 8px rgba(0,0,0,.32));
}

.rfr-car[data-lane="0"] { left: 18%; }
.rfr-car[data-lane="1"] { left: 42.5%; }
.rfr-car[data-lane="2"] { left: 67%; }

.rfr-car-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rfr-tire { fill: #111820; }
.rfr-car-body { fill: #02aee2; stroke: #063550; stroke-width: 4; }
.rfr-car-hood-svg { fill: #45d5f4; stroke: #057da8; stroke-width: 2; }
.rfr-windshield,
.rfr-rear-window { fill: #173d50; stroke: #bcefff; stroke-width: 2; }
.rfr-roof { fill: #0799ca; stroke: #046a91; stroke-width: 2; }
.rfr-trunk { fill: #078dbe; }
.rfr-bumper-svg { fill: #082e43; }
.rfr-headlight-svg { fill: #fff29b; stroke: #fff; stroke-width: 1.5; }
.rfr-tail-light { fill: #e42d36; }
.rfr-side-mirror { fill: #063550; }

.rfr-word {
  --rfr-progress: 0;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 17%;
  display: flex;
  width: 21%;
  min-height: 54px;
  flex-direction: column;
  justify-content: center;
  padding: 7px 8px;
  transform: translateY(calc((100dvh - 65px + 70px) * var(--rfr-progress) - 70px));
  border: 2px solid #6736a0;
  border-radius: 12px;
  background: #eee2ff;
  color: #3f176b;
  text-align: center;
  box-shadow: 0 6px 14px rgba(63,23,107,.34);
}

.rfr-word[data-lane="0"] { left: 15%; }
.rfr-word[data-lane="1"] { left: 39.5%; }
.rfr-word[data-lane="2"] { left: 64%; }
.rfr-word strong { overflow-wrap: anywhere; font-size: clamp(11px, 3vw, 15px); line-height: 1.1; }
.rfr-word.is-revealed-green {
  border-color: #087c50;
  background: #dff8e9;
  color: #075b3d;
}
.rfr-word.is-revealed-red {
  border-color: #c52b35;
  background: #ffe1e2;
  color: #9e1721;
}
.rfr-word.is-correct { animation: rfr-word-correct 460ms ease both; }
.rfr-word.is-wrong { filter: saturate(1.4); transform: scale(.9); opacity: 0; transition: 180ms; }

.rfr-strike-feedback {
  position: absolute;
  z-index: 12;
  top: 7%;
  left: 50%;
  transform: translate(-50%, -25%) scale(.35);
  color: #d6242f;
  font-size: clamp(92px, 25vw, 150px);
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 4px 0 #fff, 0 9px 22px rgba(113,0,0,.38);
}

.rfr-strike-feedback.is-visible {
  animation: rfr-strike-flash 520ms cubic-bezier(.15,.85,.25,1) both;
}

.rfr-start-panel,
.rfr-result {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  width: min(86%, 390px);
  padding: 25px 22px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 22px;
  background: rgba(255,255,255,.96);
  color: #17384e;
  text-align: center;
  box-shadow: 0 18px 50px rgba(6, 42, 64, .32);
}

.rfr-start-panel[hidden],
.rfr-result[hidden] {
  display: none;
}

.rfr-start-panel h2,
.rfr-result h2 {
  margin: 5px 0 8px;
  font-size: clamp(24px, 7vw, 34px);
}

.rfr-start-panel p,
.rfr-result p {
  margin: 5px auto 13px;
  color: #557083;
  line-height: 1.45;
}

.rfr-start-flag,
.rfr-result-flag,
.rfr-trophy {
  font-size: 58px;
  line-height: 1;
}

.rfr-controls {
  font-size: 12px;
}

.rfr-result-actions {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 17px;
}

.rfr-final-score {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #eaf7ff;
  color: #42677e;
}

.rfr-final-score strong {
  color: #087c50;
  font-size: 29px;
}

.rfr-result.is-victory {
  border-color: #f5c84c;
  background: linear-gradient(145deg, #fffdf3, #fff);
}

.rfr-celebration {
  position: relative;
}

.rfr-trophy {
  position: relative;
  z-index: 2;
  animation: rfr-trophy-pop 700ms cubic-bezier(.2,.9,.3,1.25) both;
}

.rfr-fireworks {
  position: absolute;
  inset: -18px 15% 0;
}

.rfr-fireworks i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffb400;
  animation: rfr-firework 900ms ease-out infinite;
}

.rfr-fireworks i:nth-child(2) { --x: 62px; --y: -35px; background:#02bdeb; animation-delay:80ms; }
.rfr-fireworks i:nth-child(3) { --x: -58px; --y: -31px; background:#e94268; animation-delay:150ms; }
.rfr-fireworks i:nth-child(4) { --x: 48px; --y: 42px; background:#4caf50; animation-delay:220ms; }
.rfr-fireworks i:nth-child(5) { --x: -45px; --y: 38px; background:#8b5cf6; animation-delay:300ms; }
.rfr-fireworks i:nth-child(6) { --x: 0; --y: -63px; background:#ff7a00; animation-delay:370ms; }

@keyframes rfr-firework {
  0% { transform: translate(0,0) scale(.2); opacity: 1; }
  75%, 100% { transform: translate(var(--x, 0), var(--y, 55px)) scale(1); opacity: 0; }
}

@keyframes rfr-lane-scroll {
  from { background-position-y: 0; }
  to { background-position-y: 58px; }
}

@keyframes rfr-tree-scroll {
  from { transform: translateY(-50%); }
  to { transform: translateY(calc(100dvh - 15%)); }
}

@keyframes rfr-trophy-pop {
  0% { transform: scale(.2) rotate(-12deg); opacity: 0; }
  70% { transform: scale(1.16) rotate(4deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes rfr-strike-flash {
  0% { transform: translate(-50%, -25%) scale(.35) rotate(-8deg); opacity: 0; }
  24% { transform: translate(-50%, 0) scale(1.15) rotate(4deg); opacity: 1; }
  70% { transform: translate(-50%, 0) scale(1) rotate(0); opacity: 1; }
  100% { transform: translate(-50%, -15%) scale(.86); opacity: 0; }
}

@keyframes rfr-word-correct {
  0% { transform: scale(1); opacity: 1; }
  55% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1.04); opacity: 0; }
}

@media (max-width: 480px) {
  .rfr-header { grid-template-columns: 38px 1fr auto 38px; gap: 6px; padding-inline: 8px; }
  .rfr-icon-button { width: 36px; height: 36px; }
  .rfr-strike { width: 22px; height: 22px; font-size: 18px; }
  .rfr-offer { align-items: stretch; flex-direction: column; }
  .rfr-offer-button { width: 100%; }
  .rfr-word { width: 22%; padding-inline: 4px; }
  .rfr-word[data-lane="0"] { left: 14.5%; }
  .rfr-word[data-lane="1"] { left: 39%; }
  .rfr-word[data-lane="2"] { left: 63.5%; }
}

@media (prefers-reduced-motion: reduce) {
  .rfr-car,
  .rfr-lane,
  .rfr-tree,
  .rfr-word,
  .rfr-trophy,
  .rfr-fireworks i {
    animation: none !important;
    transition: none !important;
  }

  .rfr-fireworks {
    background:
      radial-gradient(circle at 15% 20%, #ffb400 0 4px, transparent 5px),
      radial-gradient(circle at 80% 20%, #02bdeb 0 4px, transparent 5px),
      radial-gradient(circle at 25% 78%, #e94268 0 4px, transparent 5px),
      radial-gradient(circle at 75% 75%, #4caf50 0 4px, transparent 5px);
  }

  .rfr-fireworks i {
    display: none;
  }

  .rfr-strike-feedback.is-visible {
    animation: none !important;
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
  }
}