:root {
  --bg: #f4f1ea;
  --surface: #ffffff;
  --text: #1f2328;
  --muted: #6b6f76;
  --border: #e2ddd2;
  --accent: #3b7a57;
  --accent-soft: #e3efe7;
  --danger: #c0392b;
  --danger-soft: #fbe7e4;
  --warn: #c88a12;
  --warn-soft: #fbf1dc;
  --info-soft: #eef2f8;
  --sq-light: #eeeed2;
  --sq-dark: #769656;
  --sq-last: rgba(255, 213, 0, 0.45);
  --sq-wrong: rgba(214, 48, 49, 0.6);
  --sq-hint: rgba(52, 152, 219, 0.6);
  --sq-selected: rgba(20, 85, 30, 0.5);
  --radius: 10px;
  /* Largest the board may be: capped by height so it never outgrows a short (landscape) screen. */
  --board-max: max(280px, min(600px, calc(100vh - 110px)));
}
@supports (height: 100dvh) {
  :root { --board-max: max(280px, min(600px, calc(100dvh - 110px))); }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1d1f;
    --surface: #26282b;
    --text: #e8e6e3;
    --muted: #9a9ea5;
    --border: #36393e;
    --accent: #5cb27f;
    --accent-soft: #23362b;
    --danger: #ef6a5c;
    --danger-soft: #3a2422;
    --warn: #e0a93a;
    --warn-soft: #3a3120;
    --info-soft: #252c37;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* no double-tap zoom delay on buttons and links */
}

h1, h2, h3 { margin: 0; line-height: 1.2; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
.muted { color: var(--muted); }
.small { font-size: 0.8rem; }
[hidden] { display: none !important; }

/* ---------- Top bar ---------- */

.topbar {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px max(24px, env(safe-area-inset-right)) 14px max(24px, env(safe-area-inset-left));
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.brand {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text);
  text-decoration: none;
}
.brand-icon { color: var(--accent); }
.tagline { color: var(--muted); font-size: 0.9rem; }

main {
  max-width: 1150px;
  margin: 0 auto;
  padding: 24px max(16px, env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}

/* ---------- Catalog ---------- */

.catalog-header { margin-bottom: 20px; }
.catalog-header p { margin: 6px 0 16px; max-width: 640px; }

.filters { display: flex; flex-direction: column; gap: 12px; }

#search {
  width: 100%;
  max-width: 480px;
  padding: 10px 14px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
#search:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 6px 12px;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}
.chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.opening-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.eco {
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
}
.variation { margin: 0; color: var(--muted); }
.lines-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  font-size: 0.72rem;
  border-radius: 999px;
  background: var(--info-soft);
  color: var(--muted);
  border: 1px solid var(--border);
}
.line-picker { display: flex; flex-direction: column; gap: 4px; }
.line-picker select {
  padding: 8px 10px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.preview {
  margin: 6px 0 12px;
  font-family: ui-monospace, monospace;
  font-size: 0.82rem;
  color: var(--muted);
}
.card-actions { display: flex; gap: 8px; }
.card .preview { flex: 1; }

.play-btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 6px;
  font-size: 0.85rem;
  white-space: nowrap;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  position: relative;
}
.play-btn:hover { border-color: var(--accent); }
.play-btn.recommended { border-color: var(--accent); background: var(--accent-soft); }
.play-btn .swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #555;
}
.as-white .swatch { background: #fff; }
.as-black .swatch { background: #222; }
.best {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
}
.empty, .error { text-align: center; padding: 40px 0; }
.error { color: var(--danger); }

/* ---------- Trainer layout ---------- */

.trainer {
  display: grid;
  grid-template-columns: minmax(0, var(--board-max)) minmax(280px, 1fr);
  gap: 24px;
  align-items: start;
}

.panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.panel p { margin: 4px 0 0; }
.desc { font-size: 0.9rem; color: var(--muted); }

.link-btn {
  align-self: flex-start;
  padding: 0;
  font: inherit;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
}

.feedback {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 8px;
  border-left: 4px solid var(--muted);
  background: var(--info-soft);
  min-height: 48px;
}
.feedback.correct { border-color: var(--accent); background: var(--accent-soft); }
.feedback.wrong { border-color: var(--danger); background: var(--danger-soft); }
.feedback.playable { border-color: var(--warn); background: var(--warn-soft); }
.feedback.done { border-color: var(--accent); background: var(--accent-soft); }
.done-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }

.progress { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; }
.progress-bar {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
#progress-fill { height: 100%; width: 0; background: var(--accent); transition: width 0.3s; }

.move-list {
  list-style: none;
  margin: 0;
  padding: 8px;
  max-height: 220px;
  overflow-y: auto;
  font-family: ui-monospace, monospace;
  font-size: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.move-list li { display: grid; grid-template-columns: 2.5em 1fr 1fr; padding: 2px 4px; }
.move-list .num { color: var(--muted); }
.move-list .user.clean { color: var(--accent); font-weight: 600; }
.move-list .user.clean::after { content: " ✓"; }
.move-list .user.assisted { color: #c88a12; font-weight: 600; }
.move-list .opponent { color: var(--muted); }

.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn {
  padding: 8px 14px;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.btn:hover:not(:disabled) { border-color: var(--accent); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- Board ---------- */

.board-wrap { display: flex; gap: 8px; width: 100%; max-width: var(--board-max); }
.board-wrap > .board { flex: 1; min-width: 0; width: auto; }

.evalbar {
  position: relative;
  flex: 0 0 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* White fills from the bottom when playing White */
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid #8a8780;
  background: #403d39;
}
.evalbar[data-orient="b"] { justify-content: flex-start; }
.eval-fill { height: 50%; background: #fff; transition: height 0.4s ease; }

.engine-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.toggle { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; cursor: pointer; }
.eval-text { font-family: ui-monospace, monospace; font-size: 0.85rem; }

.board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  aspect-ratio: 1;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none; /* the board handles touches itself, so dragging a piece never scrolls the page */
  container-type: inline-size;
}

.square {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.square.light { background: var(--sq-light); }
.square.dark { background: var(--sq-dark); }
.square.last::before,
.square.wrong::before,
.square.hint::before,
.square.selected::before {
  content: "";
  position: absolute;
  inset: 0;
}
.square.last::before { background: var(--sq-last); }
.square.selected::before { background: var(--sq-selected); }
.square.wrong::before { background: var(--sq-wrong); }
.square.hint::before { background: var(--sq-hint); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.45; } }

.square.move-target::after {
  content: "";
  position: absolute;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
}
.square.capture-target::after {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  border: 5px solid rgba(0, 0, 0, 0.2);
}

.piece {
  position: relative;
  z-index: 1;
  font-size: min(7vw, 56px); /* fallback for browsers without container units */
  font-size: 9.5cqi;
  line-height: 1;
  font-family: "Segoe UI Symbol", "DejaVu Sans", "Noto Sans Symbols 2", sans-serif;
  cursor: grab;
}
.piece.white {
  color: #fff;
  text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 1px 2px rgba(0, 0, 0, 0.5);
}
.piece.black {
  color: #1a1a1a;
  text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.dragging-from .piece { opacity: 0.25; }

.piece.ghost {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0;
  cursor: grabbing;
}
.piece.ghost.visible { opacity: 1; }
/* Dragged by finger: lift it above the fingertip and enlarge it so it is not hidden. */
.piece.ghost.touch { transform: translate(-50%, -85%) scale(1.35); }

.coord {
  position: absolute;
  font-size: max(9px, 2cqi);
  font-weight: 700;
  pointer-events: none;
}
.coord.rank { top: 3px; left: 4px; }
.coord.file { bottom: 2px; right: 4px; }
.square.light .coord { color: var(--sq-dark); }
.square.dark .coord { color: var(--sq-light); }

/* ---------- Phones and tablets ---------- */

/* One column when the screen is narrow, or tall and narrow. A phone held sideways keeps the
   two-column layout, with the board sized to the screen height (see --board-max). */
@media (max-width: 700px), (max-width: 860px) and (orientation: portrait) {
  :root { --board-max: 600px; }
  .trainer { grid-template-columns: 1fr; gap: 12px; }

  /* Put what you need while playing right under the board; the rest follows. */
  .panel { padding: 14px; gap: 12px; }
  .panel > .feedback { order: 1; }
  .panel > .actions { order: 2; }
  .panel > .progress { order: 3; }
  .panel > .engine-row { order: 4; }
  .panel > .line-picker { order: 5; }
  .panel > .opening-head { order: 6; }
  .panel > .move-list { order: 7; max-height: 140px; }
  .panel > .desc { order: 8; }
  .panel > .link-btn { order: 9; }
}

@media (max-width: 520px) {
  .topbar { padding-top: 10px; padding-bottom: 10px; }
  .tagline { display: none; }
  main { padding-top: 16px; }
  h1 { font-size: 1.4rem; }
  .opening-grid { grid-template-columns: 1fr; }
}

/* Short screens (phone held sideways): trim the chrome so the board can use the height. */
@media (max-height: 500px) {
  .topbar { padding-top: 6px; padding-bottom: 6px; }
  main { padding-top: 10px; }
  .panel { padding: 12px; gap: 10px; }
  .move-list { max-height: 90px; }
}

/* Touch screens: comfortable tap targets, and 16px inputs so iOS does not zoom in on focus. */
@media (pointer: coarse) {
  .btn, .play-btn, .chip, .line-picker select { min-height: 44px; }
  .btn { padding-left: 16px; padding-right: 16px; }
  .chip { padding: 8px 14px; }
  .link-btn { padding: 8px 0; }
  .toggle { min-height: 44px; }
  .toggle input { width: 20px; height: 20px; }
  #search, .line-picker select { font-size: 16px; }
  .piece { cursor: default; }
}