/* ------------------------------------------------------------------
   Last Letter Game
   Last letter → first letter, against the computer or pass-and-play.
   Setup → play (current word, input, timer, chain trail) → result.
------------------------------------------------------------------ */

.last-letter-page {
  --ll-bg: #111315;
  --ll-text: #f1f7ee;
  --ll-accent: #ff2959;
  --ll-accent-hover: #e32751;
  --ll-gold: #f7c948;
  --ll-card-bg: #f1f7ee;
  --ll-card-text: #1b2a31;
  --ll-line: rgba(241, 247, 238, 0.14);
  --ll-chip: rgba(241, 247, 238, 0.08);
}

.ll-stage {
  width: 100%;
  min-height: calc(100vh - 64px);
  padding: 28px 16px 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--ll-bg);
  color: var(--ll-text);
}
.ll-screen {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.ll-screen[hidden] { display: none; }

.ll-title {
  font-family: 'Crete Round', serif;
  font-weight: 400;
  font-size: clamp(28px, 6vw, 40px);
  margin: 0;
  text-align: center;
}
.ll-sub { margin: -10px 0 0; font-size: 15px; opacity: 0.75; text-align: center; color: inherit; }

/* --- Setup ------------------------------------------------------ */

.ll-group { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.ll-group[hidden] { display: none; }
.ll-label { font-weight: 600; }

.ll-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.ll-seg button {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--ll-line);
  background: var(--ll-chip);
  color: var(--ll-text);
  font: 500 15px 'Inter', sans-serif;
  cursor: pointer;
}
.ll-seg button[aria-pressed="true"] { background: var(--ll-accent); border-color: var(--ll-accent); color: #fff; }

.ll-players { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ll-players li { display: flex; gap: 8px; }
.ll-players input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--ll-line);
  background: var(--ll-chip);
  color: var(--ll-text);
  font: 500 16px 'Inter', sans-serif;
}
.ll-remove, .ll-add {
  border: 1px solid var(--ll-line);
  background: transparent;
  color: var(--ll-text);
  border-radius: 10px;
  cursor: pointer;
  font: 500 15px 'Inter', sans-serif;
}
.ll-remove { width: 44px; font-size: 20px; }
.ll-add { align-self: flex-start; padding: 8px 14px; }
.ll-add[hidden] { display: none; }

.ll-error { margin: 0; color: var(--ll-gold); font-size: 14px; text-align: center; }

/* --- Play ------------------------------------------------------- */

.ll-roster { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ll-roster li {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--ll-line);
  font-size: 13px;
  font-weight: 600;
}
.ll-roster li.is-turn { background: var(--ll-text); color: var(--ll-card-text); border-color: var(--ll-text); }
.ll-roster li.is-out { opacity: 0.4; text-decoration: line-through; }

.ll-card {
  width: 100%;
  border-radius: 24px;
  padding: 24px 20px 20px;
  background: var(--ll-card-bg);
  color: var(--ll-card-text);
  text-align: center;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.45);
}
.ll-turn { font: 700 12px 'Inter', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; }
.ll-current {
  margin: 8px 0 4px;
  font-family: 'Crete Round', serif;
  font-size: clamp(34px, 10vw, 52px);
  line-height: 1.1;
  color: inherit;
  overflow-wrap: anywhere;
}
.ll-current mark {
  background: none;
  color: var(--ll-accent);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}
.ll-next { margin: 0; font-size: 15px; color: inherit; opacity: 0.8; }
.ll-letter {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  margin-left: 4px;
  border-radius: 8px;
  background: var(--ll-accent);
  color: #fff;
  font: 400 22px 'Crete Round', serif;
  vertical-align: middle;
}
.ll-fallback { margin: 8px 0 0; font-size: 13px; color: inherit; opacity: 0.7; }
.ll-fallback[hidden] { display: none; }

.ll-form { display: flex; gap: 8px; margin-top: 18px; }
.ll-input {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  border-radius: 12px;
  border: 2px solid rgba(27, 42, 49, 0.15);
  background: #fff;
  color: var(--ll-card-text);
  font: 500 20px 'Inter', sans-serif;   /* 16px+ stops iOS zooming on focus */
}
.ll-input:focus { outline: none; border-color: var(--ll-accent); }
.ll-input.is-shake { animation: ll-shake 0.3s; }
@keyframes ll-shake {
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.ll-go {
  padding: 0 22px;
  border: 0;
  border-radius: 12px;
  background: var(--ll-accent);
  color: #fff;
  font: 400 20px 'Crete Round', serif;
  cursor: pointer;
}
.ll-go:hover { background: var(--ll-accent-hover); }
.ll-go:disabled { opacity: 0.35; cursor: default; }

.ll-timer { height: 6px; margin-top: 12px; border-radius: 3px; background: rgba(27, 42, 49, 0.1); overflow: hidden; }
.ll-timer[hidden] { display: none; }
.ll-timer span { display: block; height: 100%; background: #3a9e62; transform-origin: left; }
.ll-timer.is-low span { background: var(--ll-accent); }
.ll-timer.is-idle span { transform: scaleX(1) !important; background: rgba(27, 42, 49, 0.15); }

.ll-feedback { min-height: 1.4em; margin: 10px 0 0; font-size: 14px; color: inherit; }
.ll-feedback.is-bad { color: #c41d45; }
.ll-feedback.is-out { font-weight: 600; }
.ll-allow {
  margin-top: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(27, 42, 49, 0.25);
  background: transparent;
  color: inherit;
  font: 600 14px 'Inter', sans-serif;
  cursor: pointer;
}
.ll-allow[hidden] { display: none; }

.ll-trail {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-height: 150px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 60%, transparent);
          mask-image: linear-gradient(#000 60%, transparent);
}
.ll-trail li {
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--ll-chip);
  font-size: 14px;
}

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

.ll-result {
  width: 100%;
  border-radius: 24px;
  padding: 36px 28px;
  background: var(--ll-card-bg);
  color: var(--ll-card-text);
  text-align: center;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.45);
}
.ll-result-eyebrow { font: 700 12px 'Inter', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; }
.ll-result-title { margin: 8px 0; font-family: 'Crete Round', serif; font-size: clamp(36px, 10vw, 52px); line-height: 1.05; color: inherit; }
.ll-result-note { margin: 0; font-size: 15px; opacity: 0.8; color: inherit; }
.ll-result-chain {
  margin: 16px 0 0;
  max-height: 180px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.6;
  color: inherit;
  opacity: 0.75;
}

/* --- Buttons ---------------------------------------------------- */

.ll-btn {
  background: var(--ll-accent);
  color: #fff;
  font-family: 'Crete Round', serif;
  font-size: 22px;
  padding: 16px 40px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 8px 24px -10px rgba(255, 41, 89, 0.6);
  transition: background 0.2s ease, transform 0.1s ease;
}
.ll-btn:hover { background: var(--ll-accent-hover); }
.ll-btn:active { transform: translateY(1px); }
.ll-btn:disabled { opacity: 0.4; cursor: default; }
.ll-btn-ghost { background: transparent; border: 1px solid var(--ll-line); box-shadow: none; font-size: 18px; padding: 12px 28px; }
.ll-btn-ghost:hover { background: var(--ll-chip); }
.ll-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* --- Rules and content ------------------------------------------ */

.ll-rules {
  background: var(--ll-bg);
  color: var(--ll-text);
  padding: 48px 0 32px;
  border-top: 1px solid var(--ll-line);
  font-family: 'Crete Round', serif;
}
.ll-rules .game-h1 { font-family: 'Crete Round', serif; font-weight: 400; font-size: 46px; text-align: center; margin: 0 0 4px; }
.ll-rules h2 { font-family: 'Crete Round', serif; font-weight: 400; font-size: 30px; text-align: center; opacity: 0.85; margin: 0 0 24px; }
.ll-rules .prose { max-width: 62ch; margin: 0 auto; opacity: 0.92; line-height: 1.6; }
.ll-rules .prose p { color: inherit; }

.ll-examples { display: grid; gap: 16px; margin: 0 0 16px; }
.ll-examples h3 { margin: 0 0 4px; font-size: 17px; }
.ll-examples p { margin: 0; }
.ll-credit { margin-top: 32px; font-size: 13px; opacity: 0.7; }