/* Odd One Out — the board, status bar, end screen, and stats extras. Shared
   page, button, and stats styles live in /assets/site.css. The brown stays
   brown in dark mode; text on it is white, secondary text light tan. */

body.game-oddoneout {
  --game-bg: #7A4A2A;
  --game-deep: #4E2C16;
  --game-accent: #7A4A2A;          /* big numbers and links on cream cards */
  --game-on-white: #7A4A2A;
  --cream: #FFF6EC;
  --tan: #E8D5C0;
  --right: #2FB36B;
  --wrong: #E0453A;
  --card-text: #3B2314;
  --card-muted: #7D6350;
  --card-line: #F0E2D1;
  /* Board: as wide as fits, up to 480px (560px on desktop, the site-wide size table). */
  --board: min(calc(100vw - 20px), 480px);
}

@media (min-width: 900px) {
  body.game-oddoneout { --board: 560px; }
}

.oo-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 6px 10px 0;
  text-align: center;
}

.oo-intro, .oo-end { display: flex; flex-direction: column; align-items: center; max-width: 440px; }
[hidden] { display: none !important; }

.oo-best {
  margin: 8px 0 18px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 17px;
  font-weight: 700;
}

.oo-instruction {
  margin: 0 0 26px;
  color: var(--tan);
  font-size: 19px;
  line-height: 1.45;
}

body.game-oddoneout .big-button { background: var(--cream); color: var(--game-bg); }

/* ── Status bar and board ──────────────────────────────── */

.oo-game { display: flex; flex-direction: column; align-items: center; }

.oo-status {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: var(--board);
  margin-bottom: 10px;
  padding: 0 4px;
}

.oo-level { justify-self: start; font-size: 22px; font-weight: 800; }
.oo-timer { color: var(--tan); font-size: 15px; font-weight: 600; opacity: 0.8; font-variant-numeric: tabular-nums; }
.oo-hearts { justify-self: end; display: flex; gap: 4px; }
.oo-hearts svg { display: block; width: 26px; height: 26px; }
.oo-hearts .is-lost { color: #B9A38F; }
.oo-hearts .is-lost path { fill: none; stroke: currentColor; stroke-width: 2; }
.oo-hearts .is-alive path { fill: var(--wrong); }
.oo-hearts .just-lost { animation: oo-shake 380ms ease; }

.oo-board {
  --n: 3;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  width: var(--board);
  aspect-ratio: 1;
  padding: 6px;
  border-radius: 18px;
  background: var(--cream);
  box-shadow: 0 10px 28px rgba(40, 20, 8, 0.35);
  container-type: inline-size;
}

.oo-cell {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-family: var(--ws-emoji-font);
  font-size: calc(min(var(--board), 560px) / var(--n) * 0.6);
  font-size: calc(100cqw / var(--n) * 0.6);
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 250ms ease;
}

.oo-cell > span { display: block; pointer-events: none; }
.oo-cell:focus-visible { outline: 3px solid var(--game-bg); outline-offset: -3px; }

.oo-cell.is-right { background: var(--right); transition: none; }
.oo-cell.is-right > span { animation: oo-pop 250ms cubic-bezier(0.2, 0.9, 0.3, 1.4); }
.oo-cell.is-wrong { background: var(--wrong); transition: none; }

/* A check or X briefly overlays the cell, so feedback isn't color alone. */
.oo-cell .mark {
  position: absolute;
  right: 8%;
  top: 8%;
  width: 36%;
  height: 36%;
  max-width: 28px;
  max-height: 28px;
  border-radius: 50%;
  background: #FFFFFF;
  color: #1F1208;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.oo-cell .mark svg { display: block; width: 100%; height: 100%; }

.oo-board.shake { animation: oo-shake 320ms ease; }

@keyframes oo-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.35); }
  100% { transform: scale(1.15); }
}

@keyframes oo-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(7px); }
  60%      { transform: translateX(-5px); }
  80%      { transform: translateX(3px); }
}

/* ── End screen ────────────────────────────────────────── */

.oo-end-title { margin: 12px 0 6px; font-size: clamp(24px, 7vw, 32px); font-weight: 900; line-height: 1.2; }
.oo-end-title:focus { outline: none; }
.oo-end-stats { margin: 0; color: var(--tan); font-size: 17px; }
.oo-end-rank { min-height: 1.4em; margin: 14px 0 0; font-size: 20px; font-weight: 800; }
.oo-end-best { min-height: 1.3em; margin: 4px 0 0; color: #FFD23F; font-size: 20px; font-weight: 800; }
.oo-end-rank.is-muted { color: var(--tan); font-size: 16px; font-weight: 600; }

.oo-missed { margin-top: 16px; }
.oo-missed p { margin: 0 0 8px; color: var(--tan); font-size: 15px; font-weight: 600; }

.oo-mini {
  --n: 3;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  width: 200px;
  aspect-ratio: 1;
  margin: 0 auto;
  padding: 4px;
  border-radius: 12px;
  background: var(--cream);
}

.oo-mini span {
  display: grid;
  place-items: center;
  min-width: 0;
  font-family: var(--ws-emoji-font);
  font-size: calc(192px / var(--n) * 0.62);
  line-height: 1;
}

.oo-mini .is-odd { border-radius: 50%; box-shadow: 0 0 0 3px #FFD23F, 0 0 0 5px rgba(0, 0, 0, 0.25); }

.oo-end-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 22px; }
.oo-secondary { font-size: 17px; font-weight: 700; }

/* ── Stats page extras ─────────────────────────────────── */

body.game-oddoneout .card { background: var(--cream); }
body.game-oddoneout .range button[aria-pressed="true"] { background: var(--cream); }

.oo-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.oo-totals b { display: block; color: var(--game-accent); font-size: 30px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.oo-totals span { color: var(--card-muted); font-size: 13px; }

.table .pair { font-family: var(--ws-emoji-font); font-size: 22px; white-space: nowrap; }
.table .rank { color: var(--card-muted); }
.oo-perfect { padding: 1px 7px; border-radius: 999px; background: #FFE9A8; color: #6B4A00; font-size: 11px; font-weight: 800; }

.oo-lopsided { margin: 0; padding: 0; list-style: none; }
.oo-lopsided li { padding: 8px 0; border-bottom: 1px solid var(--card-line); font-size: 14px; }
.oo-lopsided li:last-child { border-bottom: 0; }
.oo-lopsided .emoji { font-size: 22px; }

.oo-heat {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  max-width: 420px;
  margin: 6px auto 0;
}

.oo-heat div {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.oo-heat-key { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; color: var(--card-muted); font-size: 13px; }
.oo-heat-key i { display: block; width: 120px; height: 10px; border-radius: 999px; background: linear-gradient(90deg, #FFF6EC, #E8C9A6, #B07A4E, #5A3218); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }

@media (hover: hover) and (pointer: fine) {
  .oo-cell:hover:not(.is-right):not(.is-wrong) { background: rgba(122, 74, 42, 0.08); }
  body.game-oddoneout .big-button:hover:not(:disabled) { filter: brightness(1.03); }
  .oo-secondary:hover { color: #FFFFFF; }
}

@media (prefers-reduced-motion: reduce) {
  .oo-cell.is-right > span, .oo-board.shake, .oo-hearts .just-lost { animation: none; }
}