:root { --v2-tile-size: clamp(30px, 8.4vw, 48px); }
.v2-phase-label { display:inline-flex; margin:0 0 8px; padding:5px 9px; border:1px solid #46546d; border-radius:999px; color:var(--color-accent); font-size:.66rem; font-weight:900; letter-spacing:.11em; }
.v2-phase-label[data-phase="solve"] { border-color:var(--color-accent); background:rgba(167,243,208,.07); }
.v2-phase-label[data-phase="lock"] { border-color:var(--color-accent); background:var(--color-accent); color:#0b1320; }
.v2-investigation-board { display:grid; gap:10px; width:min(100%,520px); margin:0 auto; }
.v2-lane { display:grid; grid-template-columns:86px 1fr; align-items:center; gap:10px; padding:10px; border:1px solid #354159; border-radius:14px; background:#0e1522; transition:border-color 150ms ease, transform 150ms ease; }
.v2-lane--selected { border-color:#93c5fd; transform:translateY(-1px); }
.v2-lane-label { display:grid; grid-template-columns:30px 1fr; align-items:center; gap:7px; text-align:left; }
.v2-lane-label strong { display:grid; place-items:center; width:30px; height:30px; border-radius:8px; background:#263248; color:#fff; }
.v2-lane-label span { color:var(--color-muted); font-size:.61rem; font-weight:850; letter-spacing:.08em; }
.v2-lane-cells { display:flex; gap:5px; justify-content:flex-end; }
.v2-lane-cell { width:var(--v2-tile-size); aspect-ratio:1; display:grid; place-items:center; border:1px solid #536078; border-radius:8px; background:#172033; color:#7b8799; font-weight:900; }
.v2-lane-cell--solved { color:var(--color-text); border-color:var(--color-exact); background:rgba(47,158,111,.16); }
.v2-intersection-unknown { margin:2px 0 0; color:var(--color-muted); font-size:.75rem; font-weight:800; letter-spacing:.08em; }
.v2-cross-board { display:grid; grid-template-columns:repeat(9,var(--v2-tile-size)); grid-template-rows:repeat(9,var(--v2-tile-size)); justify-content:center; gap:3px; min-height:calc(var(--v2-tile-size) * 9 + 24px); margin:0 auto; }
.v2-cross-cell { width:var(--v2-tile-size); height:var(--v2-tile-size); }
.v2-cross-cell--solution { border-color:var(--color-exact); background:var(--color-exact); color:#fff; font-weight:900; }
.v2-result-cross-board { --v2-tile-size:clamp(22px,5.8vw,34px); min-height:calc(var(--v2-tile-size) * 9 + 24px); margin:4px auto 12px; }
.v2-axis-selector { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.v2-axis-select { min-height:44px; border:1px solid #46546d; border-radius:11px; background:#111827; color:var(--color-muted); font-weight:800; cursor:pointer; }
.v2-axis-select strong { display:inline-grid; place-items:center; width:24px; height:24px; margin-right:5px; border-radius:6px; background:#263248; color:#fff; }
.v2-axis-select--active { border-color:#93c5fd; color:var(--color-text); background:#18243a; box-shadow:0 0 0 1px rgba(147,197,253,.25); }
.v2-axis-select--solved { border-color:rgba(47,158,111,.55); background:rgba(47,158,111,.08); color:#9ca3af; }
.v2-axis-select--solved strong { background:rgba(47,158,111,.35); }
.v2-input-area { align-items:flex-start; }
.v2-action-buttons { display:grid; gap:7px; min-width:150px; }
.v2-error-alert { min-height:1.3em; margin:-6px 0 8px; color:#fca5a5; font-size:.72rem; font-weight:750; line-height:1.35; text-align:left; }
.v2-error-alert:empty { visibility:hidden; }
.v2-lock-cta { display:flex; justify-content:center; width:100%; margin:12px auto 2px; }
.v2-lock-button { min-height:42px; border:1px solid var(--color-accent); border-radius:10px; padding:0 12px; background:rgba(167,243,208,.08); color:var(--color-text); font-size:.75rem; font-weight:850; cursor:pointer; }
.v2-lock-button:disabled { opacity:.45; cursor:not-allowed; }
.v2-lock-button--hero { width:min(100%,380px); min-height:52px; border-radius:14px; font-size:.9rem; letter-spacing:.01em; box-shadow:0 8px 24px rgba(0,0,0,.18); }
.v2-lock-button--finish { min-height:60px; border-width:2px; background:var(--color-accent); color:#0b1320; font-size:1rem; box-shadow:0 0 0 4px rgba(167,243,208,.12),0 0 30px rgba(167,243,208,.22); animation:v2-lock-nudge 1.6s ease-in-out infinite; }
@keyframes v2-lock-nudge { 0%,100% { transform:scale(1); } 50% { transform:scale(1.025); } }
.v2-signal-key { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 14px; margin:4px 0 12px; color:var(--color-muted); font-size:.67rem; }
.v2-signal-key b { color:#dbe6f5; }
.v2-attempts { gap:6px; }
.v2-turn-row { min-height:42px; display:grid; grid-template-columns:22px 26px 64px 1fr; align-items:center; gap:7px; padding:6px 8px; border:1px solid #2f394b; border-radius:9px; background:#0d1420; }
.v2-turn-number { color:#738097; font-size:.68rem; font-weight:900; text-align:center; }
.v2-axis-badge { display:grid; place-items:center; width:25px; height:25px; border-radius:6px; font-size:.69rem; font-weight:900; color:#fff; background:#334155; }
.v2-axis-badge--horizontal { background:#29496f; }
.v2-axis-badge--vertical { background:#62406f; }
.v2-guess-word { font-size:.78rem; letter-spacing:.08em; }
.v2-feedback-strip { justify-content:flex-end; }
.v2-feedback-strip .feedback-tile { width:30px; height:30px; font-size:.72rem; }
.v2-turn--empty { grid-template-columns:22px 1fr; opacity:.42; }
.v2-empty-turn { color:var(--color-muted); font-size:.65rem; }
.v2-keyboard--disabled { opacity:.45; pointer-events:none; }
.v2-lock-dialog { width:min(92vw,620px); margin:auto; padding:0; }
.v2-lock-dialog::backdrop { background:rgba(0,0,0,.52); backdrop-filter:blur(2px); }
.v2-lock-card { display:grid; gap:14px; }
.v2-lock-card > p { margin:0; color:var(--color-muted); font-size:.82rem; line-height:1.45; }
.v2-lock-letter-control { display:grid; grid-template-columns:auto minmax(130px,180px); align-items:center; justify-content:space-between; gap:12px; color:var(--color-muted); font-size:.74rem; font-weight:800; }
.v2-lock-letter-control select { min-height:44px; border:1px solid #46546d; border-radius:9px; padding:0 10px; background:#0d1420; color:var(--color-text); font:inherit; }
.v2-lock-reference { display:grid; gap:12px; padding:14px; border:1px solid #3b465b; border-radius:14px; background:#0b111c; }
.v2-lock-reference-row { display:grid; grid-template-columns:90px 1fr; align-items:center; gap:12px; }
.v2-lock-reference-row > strong { color:#dbe6f5; font-size:.74rem; letter-spacing:.03em; text-align:left; }
.v2-lock-reference-cells { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }
.v2-lock-reference-cell { min-height:48px; display:grid; place-items:center; border:1px solid #46546d; border-radius:9px; background:#172033; color:#69768b; font:inherit; font-weight:900; cursor:pointer; transition:transform 120ms ease,border-color 120ms ease,background 120ms ease,box-shadow 120ms ease; }
.v2-lock-reference-cell:hover { border-color:#93c5fd; transform:translateY(-1px); }
.v2-lock-reference-cell--known { color:#fff; }
.v2-lock-reference-cell--selected { border-color:var(--color-accent); background:rgba(167,243,208,.16); color:#fff; box-shadow:0 0 0 3px rgba(167,243,208,.12); transform:translateY(-1px); }
.v2-lock-reference-cell--selected::after { content:'✓'; position:absolute; margin:31px 0 0 31px; display:grid; place-items:center; width:16px; height:16px; border-radius:999px; background:var(--color-accent); color:#0b1320; font-size:.62rem; font-weight:950; }
.v2-lock-reference-cell { position:relative; }
.v2-lock-selection-summary { padding:8px 10px; border-radius:9px; background:#121b2b; color:#cbd5e1 !important; font-weight:750; text-align:center; }
.v2-lock-risk { padding:9px 10px; border:1px solid rgba(167,243,208,.3); border-radius:9px; background:rgba(167,243,208,.06); color:var(--color-accent) !important; text-align:center; }
.v2-lock-risk--error { border-color:rgba(248,113,113,.38); background:rgba(127,29,29,.12); color:#fca5a5 !important; }
.axis-lock-callout { pointer-events:none; }
.axis-lock-callout--visible { opacity:1; transform:translate(-50%,-50%) scale(1); }
@media (max-width:560px) {
  .v2-lane { grid-template-columns:62px 1fr; padding:8px; gap:6px; }
  .v2-lane-label { grid-template-columns:26px 1fr; gap:4px; }
  .v2-lane-label strong { width:26px; height:26px; }
  .v2-input-area { display:grid; }
  .v2-action-buttons { grid-template-columns:1fr; min-width:0; width:100%; }
  .v2-lock-dialog { width:calc(100vw - 24px); max-height:84vh; margin:auto; }
  .v2-lock-card { max-height:84vh; overflow:auto; }
  .v2-lock-reference { padding:10px; }
  .v2-lock-reference-row { grid-template-columns:1fr; gap:6px; }
  .v2-lock-reference-row > strong { text-align:center; }
  .v2-lock-reference-cell { min-height:42px; }
  .v2-lock-letter-control { grid-template-columns:1fr; }
  .v2-lock-letter-control select { width:100%; }
  .v2-turn-row { grid-template-columns:20px 24px 58px 1fr; padding-inline:5px; gap:5px; }
  .v2-feedback-strip .feedback-tile { width:25px; height:25px; }
  .achievement-card { grid-template-columns:26px 1fr; }
  .achievement-progress { grid-column:2; text-align:left; }
}
/* Guess reveal ------------------------------------------------------------
 * Only the newest row carries --revealing; history rows stay --settled so a
 * re-render never replays a past turn. State is committed before this paints. */
.feedback-tile--revealing { animation:flip 300ms ease both; animation-delay:calc(var(--tile-reveal-index, 0) * 65ms); }

/* Axis Lock celebration ---------------------------------------------------- */
.v2-cross-board.v2-axis-lock-celebration .v2-cross-cell { animation:v2-lock-charge 480ms ease-out both; animation-delay:calc(var(--cell-distance, 0) * 55ms + 90ms); }
.v2-cross-board.v2-axis-lock-celebration .cross-cell--shared { animation:v2-lock-snap 620ms cubic-bezier(.2,.9,.25,1.1) both; animation-delay:0ms; }
@keyframes v2-lock-snap {
  0% { transform:scale(.72) rotate(-8deg); box-shadow:0 0 0 0 rgba(167,243,208,0); }
  45% { transform:scale(1.22) rotate(2deg); box-shadow:0 0 0 4px var(--color-accent), 0 0 36px rgba(167,243,208,.55); }
  100% { transform:scale(1) rotate(0deg); box-shadow:0 0 0 1px var(--color-accent), 0 0 22px rgba(167,243,208,.16); }
}
@keyframes v2-lock-charge {
  0% { transform:scale(1); filter:brightness(1); }
  40% { transform:scale(1.11); filter:brightness(1.55); }
  100% { transform:scale(1); filter:brightness(1); }
}

/* Final cross reveal ------------------------------------------------------- */
.v2-cross-board.v2-cross-reveal .v2-cross-cell { animation:v2-cross-reveal 360ms ease-out both; animation-delay:calc(var(--cell-distance, 0) * 72ms + 60ms); }
@keyframes v2-cross-reveal {
  0% { opacity:0; transform:scale(.6) rotateX(70deg); }
  60% { opacity:1; transform:scale(1.06) rotateX(0deg); }
  100% { opacity:1; transform:scale(1) rotateX(0deg); }
}

/* Achievements ------------------------------------------------------------- */
.achievements-section { display:grid; gap:11px; padding-top:12px; border-top:1px solid rgba(255,255,255,.08); }
.achievement-list { display:grid; gap:7px; margin:0; padding:0; list-style:none; }
.achievement-card { display:grid; grid-template-columns:26px 1fr auto; align-items:center; gap:10px; padding:9px 11px; border:1px solid #354159; border-radius:11px; background:#0e1522; }
.achievement-card--locked { opacity:.62; }
.achievement-card--unlocked { border-color:rgba(167,243,208,.42); background:linear-gradient(135deg, rgba(167,243,208,.09), #0e1522 60%); opacity:1; }
.achievement-icon { display:grid; place-items:center; width:26px; height:26px; border-radius:8px; background:#1c2434; font-size:.8rem; }
.achievement-card--unlocked .achievement-icon { background:rgba(167,243,208,.18); color:var(--color-accent); }
.achievement-body { display:grid; gap:3px; min-width:0; }
.achievement-name { font-size:.78rem; line-height:1.2; }
.achievement-description { color:var(--color-muted); font-size:.66rem; line-height:1.3; }
.achievement-meter { display:block; height:3px; margin-top:3px; border-radius:999px; background:#202a39; overflow:hidden; }
.achievement-meter-fill { display:block; width:var(--achievement-fill, 0%); height:100%; border-radius:inherit; background:var(--color-exact); }
.achievement-card--unlocked .achievement-meter-fill { background:var(--color-accent); }
.achievement-progress { color:#cbd5e1; font-size:.66rem; font-weight:850; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.achievement-card--unlocked .achievement-progress { color:var(--color-accent); }
.achievement-unlocks { display:grid; gap:8px; margin:0 0 12px; padding:11px 12px; border:1px solid rgba(167,243,208,.42); border-radius:12px; background:linear-gradient(135deg, rgba(167,243,208,.1), #0e1522 62%); }
.achievement-unlocks[hidden] { display:none; }
.achievement-unlocks-heading { margin:0; color:var(--color-accent); font-size:.66rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
.achievement-unlock-list { display:grid; gap:7px; margin:0; padding:0; list-style:none; }
.achievement-unlock { display:grid; grid-template-columns:26px 1fr; align-items:center; gap:10px; animation:v2-achievement-pop 380ms cubic-bezier(.2,.9,.25,1.1) both; animation-delay:calc(var(--unlock-index, 0) * 110ms + 120ms); }
.achievement-unlock .achievement-icon { background:rgba(167,243,208,.2); color:var(--color-accent); }
@keyframes v2-achievement-pop {
  0% { opacity:0; transform:translateY(8px) scale(.94); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}

@media (prefers-reduced-motion:reduce) {
  .v2-lane, .axis-lock-callout, .v2-lock-button--finish, .v2-lock-reference-cell { transition:none !important; animation:none !important; }
  /* Every reveal collapses to its committed end state: no motion, same result. */
  .feedback-tile--revealing { animation:none !important; background:var(--tile-result-color); }
  .v2-cross-board.v2-axis-lock-celebration .v2-cross-cell,
  .v2-cross-board.v2-axis-lock-celebration .cross-cell--shared,
  .v2-cross-board.v2-cross-reveal .v2-cross-cell,
  .achievement-unlock { animation:none !important; opacity:1 !important; transform:none !important; }
}