/* =========================================================
   The Last Move — a connection game vs a solved AI
   You = azure (left⇄right) · AI = red (top⇅bottom)
   ========================================================= */

.lm-main { position: relative; z-index: 3; padding: 7rem var(--pad) 4rem; max-width: 820px; margin: 0 auto; }

.lm-intro { text-align: center; margin-bottom: 2.4rem; }
.lm-intro .eyebrow { justify-content: center; }
.lm-title { font-family: var(--f-disp); font-weight: 600; font-size: clamp(2.6rem, 8vw, 5rem); letter-spacing: -.04em; color: var(--ink); line-height: 1; margin-bottom: 1.3rem; }
.lm-title .amber { color: var(--accent-2); }
.lm-lede { max-width: 60ch; margin: 0 auto; color: var(--text); font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.6; }

/* ---------- Stage ---------- */
.lm-stage { position: relative; }
.lm-speak {
  text-align: center; font-family: var(--f-mono); font-size: clamp(.95rem, 1.9vw, 1.2rem);
  color: var(--accent-2); min-height: 2.6em; display: flex; align-items: center; justify-content: center;
  letter-spacing: .01em; transition: opacity .3s; margin: 1.5rem auto .2rem; max-width: 44ch; padding: 0 1rem;
}
.lm-speak .caret { display: inline-block; width: 9px; height: 1.05em; background: var(--accent-2); margin-left: 3px; vertical-align: text-bottom; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

.lm-board-wrap { position: relative; width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 120 / 96; }
.lm-board { width: 100%; height: 100%; overflow: visible; display: block; }

/* objective legend */
.lm-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.1rem 2rem; margin-bottom: .8rem; }
.lm-leg { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--f-mono); font-size: .82rem; letter-spacing: .02em; }
.lm-leg i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.lm-leg.you { color: var(--accent); }
.lm-leg.you i { background: var(--accent); box-shadow: 0 0 8px var(--glow); }
.lm-leg.ai { color: var(--accent-2); }
.lm-leg.ai i { background: var(--accent-2); box-shadow: 0 0 8px var(--glow-2); }
.lm-howto { text-align: center; font-size: .9rem; color: var(--muted); margin-bottom: 1.6rem; }

/* graph elements */
.lm-link { stroke: var(--line-2); stroke-width: 0.5; transition: stroke .3s; }
.lm-link.win { stroke: var(--accent-2); stroke-width: 1.6; filter: drop-shadow(0 0 2px var(--glow-2)); }
.lm-link.win-you { stroke: var(--accent); stroke-width: 1.6; filter: drop-shadow(0 0 2px var(--glow)); }
.lm-border { fill: none; stroke-width: 1.6; opacity: .5; stroke-linecap: round; }
.lm-border.you { stroke: var(--accent); }
.lm-border.ai { stroke: var(--accent-2); }

.lm-node { cursor: pointer; }
.lm-node .nc { fill: var(--bg-2); stroke: var(--muted); stroke-width: 0.4; transition: fill .25s var(--ease), stroke .25s, r .25s var(--ease); }
.lm-node.empty:hover .nc { stroke: var(--accent); fill: rgba(106,166,255,0.10); }
.lm-node.you .nc { fill: var(--accent); stroke: var(--accent); filter: drop-shadow(0 0 2px var(--glow)); }
.lm-node.ai .nc { fill: var(--accent-2); stroke: var(--accent-2); filter: drop-shadow(0 0 2px var(--glow-2)); }
.lm-node.place .nc { animation: place .4s var(--ease); }
@keyframes place { 0% { r: 0.2; } 60% { r: 4.2; } 100% { } }
.lm-node.pivot .nc { animation: pivotPulse 1.1s ease-in-out infinite; }
@keyframes pivotPulse { 0%,100% { filter: drop-shadow(0 0 2px var(--glow)); } 50% { filter: drop-shadow(0 0 9px var(--accent)); } }
.lm-board.locked .lm-node { pointer-events: none; }

/* ---------- Overlay ---------- */
.lm-overlay { position: absolute; inset: -1.5rem -1rem; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; background: radial-gradient(circle at center, rgba(9,11,16,0.92), rgba(9,11,16,0.985)); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-radius: 20px; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility .6s; }
.lm-overlay.show { opacity: 1; visibility: visible; }
.lm-verdict { font-family: var(--f-disp); font-weight: 600; font-size: clamp(2rem, 6.5vw, 3.4rem); letter-spacing: -.03em; color: var(--accent-2); text-align: center; text-shadow: 0 0 24px rgba(240,82,77,0.45); }
.lm-verdict-sub { font-family: var(--f-mono); font-size: .85rem; color: var(--paper-dim, #aeb8c7); text-align: center; max-width: 32ch; line-height: 1.5; }
.lm-overlay-btns { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; margin-top: .6rem; }

/* ---------- Buttons ---------- */
.lm-btn { font-family: var(--f-mono); font-size: .85rem; padding: .72rem 1.4rem; border-radius: 100px; border: 1px solid var(--line-2); background: rgba(160,185,220,0.04); color: var(--text); cursor: pointer; transition: border-color .25s var(--ease), color .25s, background .25s, transform .2s var(--ease), box-shadow .25s; }
.lm-btn:hover { border-color: var(--accent); color: var(--ink); transform: translateY(-1px); }
.lm-btn.primary { background: var(--accent-2); border-color: var(--accent-2); color: #10131a; font-weight: 500; box-shadow: 0 6px 22px -8px var(--glow-2); }
.lm-btn.primary:hover { filter: brightness(1.08); color: #10131a; transform: translateY(-1px); box-shadow: 0 10px 28px -8px var(--glow-2); }
.lm-note { font-family: var(--f-mono); font-size: .76rem; color: var(--faint); }

/* ---------- Controls ---------- */
.lm-controls { display: flex; align-items: center; justify-content: center; gap: 1.4rem; flex-wrap: wrap; margin-top: 2.6rem; }
.lm-count { font-family: var(--f-mono); font-size: .85rem; color: var(--muted); }
.lm-count b { color: var(--ink); font-weight: 500; }
.lm-loading { text-align: center; font-family: var(--f-mono); font-size: .8rem; color: var(--faint); margin-top: 1rem; }
.lm-loading.hidden { display: none; }

@media (max-width: 600px) {
  .lm-edge { font-size: .6rem; }
  .lm-controls { gap: 1rem; }
}