/* catmouse — app-specific CSS on top of motif.
 * Load order: tokens → components → utilities → plex → app.css → families/pi
 */

/* ===========================================================
 * Shared shell
 * =========================================================== */
.wrap {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 var(--space-4);
}
.muted { color: var(--color-neutral-500); }
.small { font-size: var(--text-sm); }

/* Topnav */
.topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-neutral-200);
}
.topnav .brand {
  font-family: var(--font-serif, var(--font-sans));
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-primary-800);
  text-decoration: none;
}
.topnav-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
/* Plain text-links in the topnav are muted; the CTA `.btn-primary`
 * keeps its own white-on-green via motif. Excluding `.btn` from
 * this rule prevents the topnav color from winning specificity
 * over motif's .btn-primary `color: #fff`. */
.topnav-links a:not(.btn) {
  color: var(--color-neutral-700);
  text-decoration: none;
  font-size: var(--text-sm);
}
.topnav-links a:not(.btn):hover { color: var(--color-primary-700); }

.lang-toggle {
  display: inline-flex;
  gap: var(--space-1);
}
.lang-pick {
  background: transparent;
  border: 1px solid var(--color-neutral-300);
  border-radius: 0.25rem;
  padding: 0.15rem 0.5rem;
  font-size: var(--text-xs);
  color: var(--color-neutral-700);
  cursor: pointer;
}
.lang-pick:hover { border-color: var(--color-primary-500); color: var(--color-primary-700); }

/* Footer: motif's .footer already sets a dark bg + light text.
 * Don't fight it from app.css — just inherit the colour and add
 * our centred alignment. The inner <p> uses `.footer-note`
 * instead of `.muted` so motif's lighter `--color-neutral-400`
 * wins; .muted's mid-gray on dark-green is unreadable. */
.footer {
  text-align: center;
}
.footer-note {
  font-size: var(--text-sm);
  color: inherit;
  opacity: 0.85;
}

/* ===========================================================
 * Landing
 * =========================================================== */
.landing {
  text-align: center;
  padding: var(--space-6) var(--space-4);
}
.landing h1 {
  font-family: var(--font-serif, var(--font-sans));
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--color-primary-800);
  margin: 0 0 var(--space-2);
  letter-spacing: -0.02em;
}
.lead {
  font-size: 1.1rem;
  color: var(--color-neutral-700);
  margin: 0 0 var(--space-4);
}
.board-preview {
  margin: var(--space-6) auto;
  max-width: 30rem;
  aspect-ratio: 100 / 60;
}
.board-preview .cm-board { width: 100%; height: 100%; }

.cta-row {
  margin: var(--space-4) 0 var(--space-6);
}

.landing-section {
  margin: var(--space-6) 0;
  text-align: left;
}
.landing-section h2 {
  font-family: var(--font-serif, var(--font-sans));
  font-size: 1.4rem;
  color: var(--color-primary-700);
  margin: 0 0 var(--space-2);
}
.landing-section p {
  color: var(--color-neutral-700);
  line-height: 1.6;
}

/* ===========================================================
 * Help
 * =========================================================== */
.help h1 {
  font-family: var(--font-serif, var(--font-sans));
  font-size: 2rem;
  color: var(--color-primary-800);
  margin: var(--space-6) 0 var(--space-4);
}
.help-section { margin: var(--space-6) 0; }
.help-section h2 {
  font-family: var(--font-serif, var(--font-sans));
  font-size: 1.3rem;
  color: var(--color-primary-700);
  margin: 0 0 var(--space-2);
}
.help-section p, .help-section ul { color: var(--color-neutral-700); line-height: 1.6; }
.help-section ul { padding-left: var(--space-5); }
.help-section li { margin: var(--space-1) 0; }

/* ===========================================================
 * Play page
 * =========================================================== */
.play {
  padding: var(--space-4);
}
.play-status {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.turn-label {
  font-size: 1.2rem;
  font-weight: 600;
}
.turn-label.is-mouse { color: var(--color-primary-700); }
.turn-label.is-cats  { color: #b04545; }
.turn-label.is-win   { font-size: 1.4rem; }
.turn-label.is-thinking { opacity: 0.65; font-style: italic; }
.stall-label { font-variant-numeric: tabular-nums; }

.board-area {
  position: relative;
  margin: var(--space-2) auto;
  max-width: 56rem;
  aspect-ratio: 100 / 60;
  background: var(--color-neutral-50);
  border-radius: 0.5rem;
  padding: var(--space-2);
}
.board-area .cm-board { width: 100%; height: 100%; display: block; }

.win-banner {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.78);
  font-family: var(--font-serif, var(--font-sans));
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  font-weight: 700;
  color: var(--color-primary-800);
  border-radius: 0.5rem;
  pointer-events: none;
}
.win-banner.is-show { display: flex; }

.play-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-end;
  justify-content: center;
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-top: 1px solid var(--color-neutral-200);
}
.control-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: stretch;
}
.control-label {
  font-size: var(--text-xs);
  color: var(--color-neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.btn-group {
  display: inline-flex;
  border: 1px solid var(--color-neutral-300);
  border-radius: 0.375rem;
  overflow: hidden;
}
.btn-group .btn {
  border-radius: 0;
  border: 0;
  border-right: 1px solid var(--color-neutral-300);
  background: var(--color-neutral-50);
}
.btn-group .btn:last-child { border-right: 0; }
.btn-group .btn.is-active {
  background: var(--color-primary-100);
  color: var(--color-primary-800);
  font-weight: 600;
}

/* ===========================================================
 * SVG board
 * =========================================================== */
.cm-board {
  font-family: system-ui, -apple-system, sans-serif;
}

/* Trace shading */
.cm-trace { opacity: 0.55; }
.cm-trace-plus  { fill: #b8e2c8; } /* light green */
.cm-trace-minus { fill: #2f6b3f; opacity: 0.18; } /* dark green */
.cm-trace-zero  { fill: transparent; }

/* Edges */
.cm-edge {
  stroke: #6f6f6f;
  stroke-width: 0.5;
  stroke-linecap: round;
  opacity: 0.55;
}

/* Cells (clickable circles, hidden by default — show on hover/focus) */
.cm-cell {
  fill: transparent;
  stroke: transparent;
  cursor: default;
  transition: fill 0.18s ease;
}
.cm-cell-layer-active .cm-cell {
  cursor: pointer;
}
.cm-cell-layer-active .cm-cell:hover,
.cm-cell-layer-active .cm-cell:focus {
  fill: rgba(0, 100, 200, 0.08);
  outline: none;
}

/* Goal halo (cell 0) */
.cm-goal-halo {
  fill: none;
  stroke: var(--color-primary-500, #2b6bd6);
  stroke-width: 0.4;
  stroke-dasharray: 1.5 1;
  opacity: 0.6;
  animation: goal-pulse 3s ease-in-out infinite;
}
@keyframes goal-pulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.7; }
}

/* Tokens — animated by transform on the <g> */
.cm-token {
  transition: transform 250ms cubic-bezier(0.4, 0.1, 0.3, 1);
  cursor: pointer;
}
.cm-token-body {
  filter: drop-shadow(0 0.5px 0.8px rgba(0, 0, 0, 0.25));
}
.cm-token-cat .cm-token-body  { fill: #d8a85a; stroke: #8c6116; stroke-width: 0.4; }
.cm-token-mouse .cm-token-body { fill: #c7d8e8; stroke: #5c779a; stroke-width: 0.4; }
.cm-token.is-selected .cm-token-body {
  stroke: var(--color-primary-700, #1d4f99);
  stroke-width: 0.9;
}
.cm-token-glyph {
  font-size: 4.5px;
  pointer-events: none;
  user-select: none;
}

/* Legal-move dots */
.cm-legal-dot {
  fill: var(--color-primary-500, #2b6bd6);
  opacity: 0.65;
  cursor: pointer;
  animation: dot-appear 0.18s ease-out;
}
.cm-legal-dot:hover { opacity: 1; }
@keyframes dot-appear {
  from { opacity: 0; transform: scale(0.4); transform-origin: center; }
  to   { opacity: 0.65; transform: scale(1); }
}

/* ===========================================================
 * Auth gate
 *
 * Elements with [data-when-auth="anon"] are visible only to
 * anonymous users; [data-when-auth="user"] only to authenticated.
 * Both start hidden so we don't flash a spoiler before the
 * /api/v1/me probe lands. src/auth-gate.js sets body class on
 * resolution. Network failure → assume anonymous.
 * =========================================================== */
.auth-gated { display: none; }
body.is-anonymous [data-when-auth="anon"] { display: block; }
body.is-authed    [data-when-auth="user"] { display: block; }

/* Login / logout chip in the topnav. Username is shown when
 * authed; logout is a subtle parenthetical text-link rather than
 * a button — keeps the chrome quiet. */
.auth-slot {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-sm);
}
.auth-username {
  color: var(--color-primary-800, #18497a);
  font-weight: 500;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auth-login-link,
.auth-logout-link {
  color: var(--color-neutral-600);
  text-decoration: none;
}
.auth-login-link:hover,
.auth-logout-link:hover {
  color: var(--color-primary-700);
  text-decoration: underline;
}

.auth-hint-link {
  color: var(--color-primary-700, #1d4f99);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.auth-hint-link:hover { text-decoration: underline; }

/* Reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .cm-token { transition: none; }
  .cm-legal-dot { animation: none; }
  .cm-goal-halo { animation: none; }
}