/* ===================================================================
   Ladder.styles.css — Ladder mini-game page
   Multiplier rows climbing from x1,12 to x19,46.
   =================================================================== */
@import url('game-shared.css');

.gamecard { max-width: 1150px; margin: 0 auto; }

/* Ladder board reads bottom-up, so rows are laid out in reverse order */
.ladder {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.ladder__row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  transition: transform var(--t) var(--ease);
}

.ladder__row:hover { transform: translateX(3px); }

/* --- multiplier pill --- */
.ladder__mult {
  display: grid;
  place-items: center;
  height: 30px;
  border-radius: var(--r-sm);
  background: var(--bg-surface-3);
  font-size: 12.5px;
  font-weight: 700;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}

.ladder__row:hover .ladder__mult {
  background: var(--bg-elevated);
  color: var(--accent-yellow);
}

/* --- dashed stone track ---
   --from / --to position the dash run inside the row so the board keeps
   the staggered look from the reference. */
.ladder__track {
  position: relative;
  height: 12px;
}

.ladder__track::before {
  content: '';
  position: absolute;
  top: 50%;
  left: var(--from, 0%);
  right: calc(100% - var(--to, 100%));
  height: 8px;
  transform: translateY(-50%);
  border-radius: var(--r-pill);
  /* repeating dashes = ladder stones */
  background-image: repeating-linear-gradient(
    90deg,
    #46464f 0 13px,
    transparent 13px 19px
  );
  transition: background-image var(--t) var(--ease);
}

.ladder__row:hover .ladder__track::before {
  background-image: repeating-linear-gradient(
    90deg,
    #56565f 0 13px,
    transparent 13px 19px
  );
}

@media (max-width: 768px) {
  .ladder { gap: 7px; }
  .ladder__row { grid-template-columns: 62px minmax(0, 1fr); gap: 10px; }
  .ladder__mult { height: 26px; font-size: 11px; }
  .ladder__track::before {
    height: 7px;
    background-image: repeating-linear-gradient(90deg, #46464f 0 9px, transparent 9px 14px);
  }
}