@import url('../global.css');

/* =============================================================================
   Word Ladder — a workshop signage ladder rather than a flat text list. Each
   solved word is an engraved brass nameplate rung riveted between two dark
   timber rails; the newest rung glows warm copper to mark the current word.
   ========================================================================== */

:root {
  --title-color: var(--color-wordladder);
  --wl-rail: #241a10;
  --wl-plate: linear-gradient(155deg, #e8d9b0, #b79a5c 55%, #93763c);
  --wl-plate-ink: #3a2a10;
  --wl-plate-current: linear-gradient(155deg, #ffd68a, #d98a2a 55%, #a85f14);
}

.wordladder-area[data-visual-theme='arcade'] {
  --wl-rail: #350c2a;
  --wl-plate-current: linear-gradient(155deg, #ff9de9, #ff4fd8 55%, #a11e83);
}

.wordladder-area[data-visual-theme='midnight'] {
  --wl-rail: #0d1f30;
  --wl-plate-current: linear-gradient(155deg, #8fe0fc, #38bdf8 55%, #1a6fa0);
}

.wordladder-area[data-visual-theme='daylight'] {
  --wl-rail: #3c2670;
  --wl-plate-current: linear-gradient(155deg, #c9b3ff, #7c3aed 55%, #4c1d95);
}

.wordladder-area[data-visual-theme='amber'] {
  --wl-rail: #2c1b04;
  --wl-plate-current: linear-gradient(155deg, #ffe4a3, #fbbf24 55%, #a16207);
}

.wordladder-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  width: 100%;
  padding: var(--spacing-md);
}

.wordladder-goal {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
  color: var(--ink-muted);
  font-size: var(--font-size-lg);
}
.wordladder-goal strong {
  color: var(--color-wordladder);
  font-size: 1.6em;
  letter-spacing: 0.14em;
}

/* The ladder: two dark timber rails framing the stacked rungs. */
.wordladder-chain {
  list-style: none;
  margin: 0;
  padding: var(--spacing-sm) var(--spacing-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  width: min(100%, 22rem);
  max-height: 45dvh;
  overflow-y: auto;
  background: var(--wl-rail);
  border-radius: var(--border-radius-md);
  box-shadow:
    inset 6px 0 0 color-mix(in srgb, black 25%, var(--wl-rail)),
    inset -6px 0 0 color-mix(in srgb, black 25%, var(--wl-rail)),
    var(--shadow);
}

/* Each rung: a riveted brass nameplate. */
.wordladder-word {
  position: relative;
  width: 100%;
  padding: 0.4rem 1.4rem;
  border-radius: var(--border-radius-sm);
  font-size: clamp(1.1rem, 4.6vmin, 1.7rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.22em;
  text-align: center;
  background: var(--wl-plate);
  color: var(--wl-plate-ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 3px rgba(0, 0, 0, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Rivets pinning the plate to the rails. */
.wordladder-word::before,
.wordladder-word::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f4e6c4, #7a5a24);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  transform: translateY(-50%);
}
.wordladder-word::before {
  left: 0.4rem;
}
.wordladder-word::after {
  right: 0.4rem;
}

.wordladder-word:last-child {
  background: var(--wl-plate-current);
  color: #402000;
}

.wordladder-form {
  display: flex;
  gap: var(--spacing-sm);
  width: min(92vw, 24rem);
}

.wordladder-input {
  flex: 1;
  padding: 0.6rem 0.8rem;
  border: 2px solid var(--line);
  border-radius: var(--border-radius-md);
  background: var(--white-color);
  color: var(--surface-1);
  font-size: var(--font-size-lg);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.wordladder-input:focus-visible {
  outline: 2px solid var(--color-wordladder);
  outline-offset: 1px;
}

.wordladder-submit {
  padding: 0.6rem 1rem;
  border: none;
  border-radius: var(--border-radius-md);
  background: var(--color-wordladder);
  color: var(--white-color);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}
.wordladder-submit:active {
  transform: scale(0.96);
}