/* ==========================================================================
   "איזו אות שייכת למפלגה?" – ballot letters matching game (on top of games.css)
   ========================================================================== */

/* ---------- Start: floating mini ballots ---------- */

.lg-hero-slips { position: relative; height: 104px; margin: 4px auto 12px; width: 220px; }
.lg-mini {
  position: absolute;
  top: 10px;
  width: 64px;
  height: 80px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  font-family: "Frank Ruhl Libre", "David", "Times New Roman", serif;
  font-weight: 900;
  font-size: 24px;
  color: #111;
  background: linear-gradient(170deg, #fff, #f1f3f7);
  box-shadow: 0 8px 20px rgba(11, 29, 77, .2), inset 0 0 0 1px #e3e8f0;
}
.lg-mini--a { right: 10px; transform: rotate(10deg); animation: float-a 3.2s ease-in-out infinite; }
.lg-mini--b { right: 78px; top: 0; z-index: 1; animation: float-b 3.2s ease-in-out -1s infinite; }
.lg-mini--c { left: 10px; transform: rotate(-10deg); animation: float-c 3.2s ease-in-out -2s infinite; }
@keyframes float-a { 50% { transform: translateY(-8px) rotate(14deg); } }
@keyframes float-b { 50% { transform: translateY(-10px) rotate(-3deg); } }
@keyframes float-c { 50% { transform: translateY(-7px) rotate(-14deg); } }

/* ---------- Table: ballot slip + ballot box ---------- */

.lg-table {
  --slip-w: 168px;
  --drop: 206px; /* slip centre -> box slot */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 6px;
}
.lg-slip-slot { position: relative; z-index: 2; height: calc(var(--slip-w) * 1.25 + 8px); }
.lg-slip {
  width: var(--slip-w);
  aspect-ratio: 4 / 5;
  padding: 0;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 14px 28px rgba(11, 29, 77, .22), inset 0 0 0 1px #e3e8f0;
  transform: rotate(-3deg);
  transform-origin: 50% 60%;
}
.lg-slip { overflow: hidden; }
/* the source slips have wide white margins – zoom so the letters fill the paper like a real ballot */
.lg-slip img { display: block; width: 100%; height: 100%; object-fit: contain; transform: scale(var(--zoom, 1.6)); }
.lg-slip.is-enter { animation: slip-in .6s var(--ease-spring) both; }
.lg-slip.is-wrong { animation: slip-no .45s ease-in-out; }
.lg-slip.is-cast { animation: slip-cast .7s cubic-bezier(.5, 0, .75, 0) forwards; }
@keyframes slip-in {
  from { opacity: 0; transform: translateY(-60px) rotate(-16deg) scale(.9); }
  to { opacity: 1; transform: rotate(-3deg); }
}
@keyframes slip-no {
  0%, 100% { transform: rotate(-3deg); }
  20% { transform: translateX(10px) rotate(2deg); }
  40% { transform: translateX(-9px) rotate(-7deg); }
  60% { transform: translateX(6px) rotate(0deg); }
  80% { transform: translateX(-3px) rotate(-4deg); }
}
@keyframes slip-cast {
  0% { transform: rotate(-3deg); }
  25% { transform: translateY(-14px) rotate(0deg) scale(1.02); }
  100% { transform: translateY(var(--drop)) rotate(0deg) scale(.18, .1); opacity: .2; }
}

.lg-plus {
  position: absolute;
  top: 10px;
  inset-inline-end: -26px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-bold);
  font-weight: 900;
  font-size: 18px;
  color: #a16207;
  background: #fff7db;
  box-shadow: 0 4px 12px rgba(161, 98, 7, .25);
  opacity: 0;
  pointer-events: none;
}
.lg-plus.is-on { animation: plus-up 1s var(--ease-out) forwards; }
@keyframes plus-up {
  0% { opacity: 0; transform: translateY(10px) scale(.6); }
  25% { opacity: 1; transform: translateY(0) scale(1.15); }
  100% { opacity: 0; transform: translateY(-30px) scale(1); }
}

/* Ballot box – navy like the site, with the slot the slip drops into */
.lg-box {
  position: relative;
  z-index: 1;
  width: 196px;
  height: 82px;
  margin-top: -18px;
  border-radius: 10px 10px 14px 14px;
  background: linear-gradient(180deg, var(--navy-700), var(--navy-900));
  box-shadow: 0 12px 26px rgba(7, 20, 54, .3), inset 0 1px 0 rgba(255, 255, 255, .15);
  color: #fff;
}
.lg-box::before { /* lid */
  content: "";
  position: absolute;
  inset: -10px -8px auto;
  height: 16px;
  border-radius: 8px;
  background: linear-gradient(180deg, #2b4a9a, var(--navy-700));
  box-shadow: 0 3px 6px rgba(7, 20, 54, .25);
}
.lg-box__slot {
  position: absolute;
  top: -5px;
  left: 50%;
  width: 92px;
  height: 7px;
  margin-left: -46px;
  border-radius: 4px;
  background: #050d24;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .6);
}
.lg-box__label {
  position: absolute;
  bottom: 12px;
  right: 16px;
  font-family: var(--font-bold);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .02em;
}
.lg-box__count {
  position: absolute;
  bottom: 12px;
  left: 14px;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-family: var(--font-bold);
  font-weight: 800;
  font-size: 15px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .25);
}
.lg-box.is-bump { animation: box-bump .45s var(--ease-spring); }
@keyframes box-bump { 30% { transform: scaleY(.92) scaleX(1.04); } 60% { transform: scaleY(1.04) scaleX(.98); } }

/* ---------- Prompt + options ---------- */

.lg-prompt {
  margin: 18px 0 12px;
  min-height: 1.5em;
  font-family: var(--font-bold);
  font-weight: 800;
  font-size: 18px;
  color: var(--navy-800);
}
.lg-prompt.is-right { color: var(--true); }
.lg-prompt.is-wrong { color: var(--false); }
.lg-prompt small { display: block; margin-top: 2px; font-family: inherit; font-weight: 400; font-size: 14px; color: var(--muted); }

.lg-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.lg-options li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.lg-option {
  width: 100%;
  min-height: 56px;
  padding: 10px 14px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: #fff;
  font-family: var(--font-bold);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.2;
  color: var(--navy-800);
  box-shadow: 0 4px 0 var(--line), 0 8px 16px rgba(11, 29, 77, .08);
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, border-color .15s, background .15s, color .15s, opacity .2s;
}
.lg-option:hover:not(:disabled) { border-color: var(--blue-500); transform: translateY(-2px); box-shadow: 0 6px 0 #c8d6f3, 0 12px 20px rgba(37, 99, 235, .15); }
.lg-option:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.lg-option:disabled { cursor: default; }
.lg-option.is-wrong {
  border-color: var(--false);
  background: var(--false-soft);
  color: var(--false);
  text-decoration: line-through 2px;
  box-shadow: 0 3px 0 #f6c2c5;
  animation: shake .4s ease-in-out;
  opacity: .75;
}
.lg-option.is-right {
  border-color: var(--true);
  background: var(--true);
  color: #fff;
  box-shadow: 0 4px 0 #0f7a35, 0 10px 20px rgba(22, 163, 74, .3);
  animation: picked .45s var(--ease-spring);
}
.lg-options li.is-leaving { animation: option-out .4s var(--ease-out) forwards; pointer-events: none; }
@keyframes option-out { to { opacity: 0; transform: translateY(-28px) scale(.6) rotate(-4deg); } }
.lg-options.is-locked .lg-option:not(.is-right) { opacity: .45; }

/* ---------- Result recap ---------- */

.lg-result__note { margin: -6px 0 8px; font-size: 14px; color: var(--muted); }
.lg-recap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 12px;
  margin: 22px 0 6px;
}
.lg-recap li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  animation: rise .4s var(--ease-out) both;
}
.lg-recap img {
  object-fit: contain;
  object-position: center;
  width: 72px;
  aspect-ratio: 4 / 5;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 6px 14px rgba(11, 29, 77, .16), inset 0 0 0 1px #e3e8f0;
  transform: rotate(-3deg);
}
.lg-recap span { font-size: 13px; font-weight: 500; line-height: 1.25; color: var(--ink); }
.lg-recap i {
  position: absolute;
  top: -8px;
  inset-inline-start: calc(50% - 48px);
  z-index: 1;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-style: normal;
  font-family: var(--font-bold);
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(11, 29, 77, .2);
}
.lg-recap i svg { width: 13px; height: 13px; }
.lg-recap li.is-first i { background: var(--true); }
.lg-recap li.is-missed i { background: #f97316; }

@media (max-width: 700px) {
  .lg-table { --slip-w: 140px; --drop: 178px; }
  .lg-box { width: 170px; height: 72px; }
  .lg-option { min-height: 52px; font-size: 15px; }
}

/* progress: matched, but not on the first try */
.tol-progress li.is-late { background: #f97316; animation: seg-fill .45s var(--ease-spring); }
.lg-recap__paper { display: block; width: 72px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px; background: #fff; box-shadow: 0 6px 14px rgba(11, 29, 77, .16), inset 0 0 0 1px #e3e8f0; transform: rotate(-3deg); }
.lg-recap__paper img { width: 100%; height: 100%; box-shadow: none; transform: scale(var(--zoom, 1.6)); }

/* ---------- One progress bar for the whole run (green = right, red = wrong, as shares) ---------- */
.lg-bar {
  height: 9px;
  margin: 14px 0 16px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--line);
}
.lg-bar__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(to left, var(--true) 0 var(--right, 100%), var(--false) var(--right, 100%) 100%);
  transition: width .45s var(--ease-out);
}

/* options pop in per slip; a wrong slip slides off to the side */
.lg-options .lg-option-in { animation: rise .32s var(--ease-out) both; }
.lg-slip.is-away { animation: slip-away .3s ease-in forwards; }
@keyframes slip-away { to { opacity: 0; transform: translateX(80px) rotate(10deg); } }
.lg-next { display: flex; }

.lg-recap__title {
  margin-top: 22px;
  font-family: var(--font-bold);
  font-weight: 800;
  font-size: 17px;
  color: var(--navy-800);
}
.lg-recap li.is-missed i { background: var(--false); }