/* MOST - word bridge puzzle. Uses the tokens from main.css. */
.most { padding: 132px 0 96px; position: relative; z-index: 1; }
.most .container { max-width: 920px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.most-head { margin-bottom: 32px; }
.most-title {
  font-size: clamp(40px, 5vw, 60px); margin-bottom: 14px;
  opacity: 1; animation: none;
}
.most-title em { font-size: 0.6em; letter-spacing: -0.01em; }
.most-sub { font-size: 17px; color: var(--text-dim); font-weight: 300; line-height: 1.55; max-width: 600px; margin-bottom: 24px; }
.most-note { color: var(--text-faint); }

.most-modes {
  display: inline-flex; gap: 2px; padding: 2px;
  background: var(--surface); border: 1px solid var(--border-light); border-radius: 4px;
}
.most-mode {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-dim); background: transparent; border: 1px solid transparent; border-radius: 2px;
  padding: 7px 14px; cursor: pointer; transition: color 0.2s, border-color 0.2s;
}
.most-mode:hover { color: var(--text); }
.most-mode.is-active { color: var(--text); background: var(--surface-2); border-color: var(--accent); }

/* Ends */
.most-ends { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.most-end {
  font-family: 'Newsreader', serif; font-size: 22px; line-height: 1;
  color: var(--bg); background: var(--accent); border-radius: 999px; padding: 9px 18px 10px;
}
.most-ends-dots { flex: 1; height: 1px; background: repeating-linear-gradient(90deg, var(--accent-dim) 0 4px, transparent 4px 9px); }

/* Input */
.most-form { display: flex; gap: 10px; margin-bottom: 10px; }
.most-form[hidden] { display: none; }
.most-input {
  flex: 1; min-width: 0;
  font-family: 'Geist', sans-serif; font-size: 16px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-light); border-radius: 4px;
  padding: 13px 16px; transition: border-color 0.2s;
}
.most-input:focus { outline: none; border-color: var(--accent); }
.most-input::placeholder { color: var(--text-faint); }
.most-submit { padding: 13px 22px; }

.most-feedback {
  min-height: 26px; font-size: 14px; color: var(--text-dim); margin-bottom: 12px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.most-feedback.is-hint { color: var(--text-faint); font-size: 13px; }
.most-feedback.is-error { color: #d88a6a; }
.most-feedback.is-ok { color: var(--green); }
.most-choice {
  font-family: 'Geist', sans-serif; font-size: 14px; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent-dim); border-radius: 999px;
  padding: 4px 14px; cursor: pointer;
}
.most-choice:hover { border-color: var(--accent); }

/* Warmth */
.most-warmth { margin-bottom: 14px; }
.most-warmth[hidden] { display: none; }
.most-warmth-label {
  display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.04em; color: var(--text-dim);
}
.most-warmth-label span:first-child { color: var(--text); }
.most-warmth-track { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.most-warmth-fill {
  height: 100%; width: 0; border-radius: 3px; transition: width 0.5s ease;
  background: linear-gradient(90deg, #4f6f80, var(--accent-dim) 50%, var(--accent) 80%, #e0874f);
  background-size: 920px 100%;
}

/* Board */
.most-board-wrap {
  position: relative; background: var(--bg-2);
  border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
}
.most-board { display: block; width: 100%; height: 460px; touch-action: none; user-select: none; -webkit-user-select: none; }
.most-counters {
  position: absolute; left: 14px; bottom: 10px; display: flex; gap: 18px; pointer-events: none;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint);
}
.most-counters strong { color: var(--text-dim); font-weight: 500; margin-left: 4px; }

.most-link { stroke: var(--accent); stroke-linecap: round; }
.most-link-model { stroke: var(--green); stroke-dasharray: 5 5; }
.most-link-hit { stroke: transparent; stroke-width: 16; cursor: pointer; }
.most-label { pointer-events: none; }
.most-label rect { fill: var(--surface-2); stroke: var(--border-light); }
.most-label text { font-family: 'JetBrains Mono', monospace; font-size: 10px; fill: var(--text-dim); }
.most-label-model rect { stroke: var(--green); }
.most-label-model text { fill: var(--green); }

.most-node { cursor: grab; }
.most-node.is-dragging { cursor: grabbing; }
.most-node rect { fill: var(--surface); stroke: var(--border-light); stroke-width: 1; }
.most-node text { font-family: 'Geist', sans-serif; font-size: 13.5px; fill: var(--text); }
.most-node-guess rect { stroke: var(--accent-dim); }
.most-node-start, .most-node-target { cursor: default; }
.most-node-start rect, .most-node-target rect { fill: var(--accent); stroke: var(--accent); }
.most-node-start text, .most-node-target text { fill: var(--bg); font-weight: 500; }
.most-node-loose rect { fill: transparent; stroke: var(--text-faint); stroke-dasharray: 3 3; }
.most-node-loose text { fill: var(--text-faint); }
.most-node-model rect { fill: transparent; stroke: var(--green); stroke-dasharray: 4 3; }
.most-node-model text { fill: var(--green); }

/* Reveal */
.most-reveal {
  margin-top: 24px; padding: 32px; border-radius: 6px;
  background: var(--surface); border: 1px solid var(--border-light);
}
.most-reveal[hidden] { display: none; }
.most-reveal .section-label { margin-bottom: 14px; }
.most-reveal-title { font-family: 'Newsreader', serif; font-weight: 300; font-size: clamp(28px, 3.6vw, 38px); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 16px; }
.most-reveal-path { font-size: 15px; color: var(--text-dim); margin-bottom: 14px; }
.most-reveal-path-label {
  display: block; margin-bottom: 4px;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green);
}
.most-reveal-stats { list-style: none; margin-bottom: 24px; color: var(--text); font-size: 15px; }
.most-reveal-stats li { padding: 6px 0; border-top: 1px solid var(--border); }
.most-reveal-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.most-share-status { min-height: 22px; font-size: 14px; color: var(--green); margin-bottom: 10px; }
.most-share-status.is-error { color: #d88a6a; }
.most-share-text {
  display: block; width: 100%; max-width: 420px; margin-bottom: 22px; resize: none;
  font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1.5; color: var(--text);
  background: var(--bg-2); border: 1px solid var(--border-light); border-radius: 4px; padding: 10px 12px;
}
.most-share-text[hidden] { display: none; }
.most-reveal-pitch { font-size: 14px; color: var(--text-dim); line-height: 1.6; max-width: 640px; }
.most-reveal-pitch a, .most-how a:not(.btn-secondary) { color: var(--accent); }

/* How it works */
.most-how { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--border); max-width: 680px; }
.most-how p { color: var(--text-dim); font-size: 15.5px; line-height: 1.65; margin-bottom: 14px; font-weight: 300; }
.most-how .most-credits { font-size: 12.5px; color: var(--text-faint); margin-bottom: 26px; }

@media (max-width: 640px) {
  .most { padding: 104px 0 72px; }
  .most .container { padding: 0 16px; }
  .most-end { font-size: 18px; padding: 8px 14px 9px; }
  .most-board { height: 380px; }
  .most-submit { padding: 13px 16px; }
  .most-reveal { padding: 22px 18px; }
}