/* styles.css */

:root {
  --bg: #f4f5f8;
  --surface: #ffffff;
  --border: #e3e6ec;
  --text: #1f2430;
  --text-muted: #6b7280;

  --primary: #4f46e5;
  --primary-hover: #4338ca;

  --success: #16a34a;
  --success-hover: #15803d;

  --danger: #dc2626;
  --danger-hover: #b91c1c;

  --header-bg: #1f2430;
  --header-text: #f4f5f8;

  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 2px 8px rgba(16, 24, 40, 0.08);
  --radius: 10px;
}

* {
  box-sizing: border-box;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
}

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}

h1, h2, h3 {
  color: var(--text);
  margin: 0 0 8px;
}

/* ---------- Header ---------- */

.app-header {
  background-color: var(--header-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.app-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 8px 24px;
}

.app-brand {
  color: var(--header-text);
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  margin-right: 8px;
}

.app-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.app-nav-link {
  color: rgba(244, 245, 248, 0.75);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
}

.app-nav-link:hover {
  color: var(--header-text);
  background-color: rgba(255, 255, 255, 0.08);
}

.app-nav-link[aria-current="page"] {
  color: var(--header-text);
  box-shadow: inset 0 -2px 0 var(--primary);
  border-radius: 6px 6px 0 0;
}

.app-header-end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-button {
  color: var(--header-text);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.header-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* The email dropdown (a <details>; public/js/nav.js closes it on an outside click or Esc). */
.user-menu {
  position: relative;
}

.user-menu-toggle {
  list-style: none; /* hides the default disclosure triangle */
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--header-text);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}

.user-menu-toggle::-webkit-details-marker {
  display: none;
}

.user-menu-toggle:hover,
.user-menu[open] .user-menu-toggle {
  background-color: rgba(255, 255, 255, 0.1);
}

.user-menu-email {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-caret {
  flex-shrink: 0;
  transition: transform 0.15s;
}

.user-menu[open] .user-menu-caret {
  transform: rotate(180deg);
}

.user-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 180px;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.18);
  padding: 6px;
  z-index: 20;
}

.user-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 9px 12px;
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  text-decoration: none;
  cursor: pointer;
}

.user-menu-item:hover {
  background-color: var(--bg);
}

.user-menu-panel form {
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 6px;
}

/* The phone menu: a <dialog> that slides in from the left (shown only at phone widths). */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--header-text);
  padding: 6px;
  margin-left: -6px;
  border-radius: 6px;
  cursor: pointer;
}

.nav-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-drawer {
  margin: 0;
  padding: 0;
  border: 0;
  height: 100%;
  max-height: none;
  width: min(300px, 85vw);
  background-color: var(--header-bg);
  color: var(--header-text);
}

.nav-drawer[open] {
  animation: nav-drawer-in 0.2s ease-out;
}

.nav-drawer::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

@keyframes nav-drawer-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.nav-drawer-panel {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
}

.nav-drawer-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 8px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 12px;
}

.nav-drawer-brand {
  font-size: 1.25rem;
  font-weight: 700;
}

.nav-drawer-email {
  color: rgba(244, 245, 248, 0.65);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.nav-drawer-links {
  display: flex;
  flex-direction: column;
}

.nav-drawer-link {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 12px 8px;
  border-radius: 8px;
  background: none;
  border: 0;
  color: var(--header-text);
  font: inherit;
  font-size: 1.1rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.nav-drawer-link:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.nav-drawer-link[aria-current="page"] {
  font-weight: 700;
}

.nav-drawer-foot {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.nav-icon {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .app-header-inner {
    padding: 10px 16px;
  }

  /* Logged in, the phone header is just the hamburger and the brand; the drawer holds the rest. */
  body[data-authenticated="true"] .app-nav,
  body[data-authenticated="true"] .app-header-end {
    display: none;
  }

  body[data-authenticated="true"] .nav-toggle {
    display: inline-flex;
  }

  .app-header-inner {
    gap: 8px 12px;
  }

  .app-nav-link {
    padding: 6px 6px;
  }
}

@media (max-width: 400px) {
  /* Logged out, the brand already links to the trainer; dropping the duplicate Openings link
     leaves room for Sign up and Log in on the narrowest phones. */
  body[data-authenticated="false"] .app-nav {
    display: none;
  }

  .auth-card {
    padding: 24px 20px;
  }
}

/* ---------- Flash / alert messages ---------- */

.flash {
  padding: 12px 16px;
  border-radius: 8px;
  margin: 0 auto 20px;
  font-size: 0.95rem;
  max-width: 380px;
}

.flash-error {
  background-color: #fef2f2;
  color: var(--danger-hover);
  border: 1px solid #fecaca;
}

.flash-notice {
  background-color: #f0fdf4;
  color: var(--success-hover);
  border: 1px solid #bbf7d0;
}

/* The alert gets a slot of its own in the layout, so it never covers the board: a row above the
   columns on a wide screen, and just above the board when they stack (see Responsive). The slot
   is always there, shown or not, and the alert inside it is out of flow, so showing or hiding it
   never moves anything. That matters: an inline alert once pushed the board down mid-drag (or
   mid-click) and desynced the chessboard library's square calculation, the same class of bug as
   scrolling during a drag. A message too long for the slot grows upward, away from the board. */
.alert-slot {
  position: relative;
  width: 100%;
  height: 46px;
}

.alert {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  box-sizing: border-box;
  background-color: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
  padding: 12px 16px;
  border-radius: 8px;
  max-width: 700px;
  width: 100%;
  box-shadow: var(--shadow);
  text-align: center;
}

.signup-banner {
  /* Fixed and bottom-anchored: out of flow so it never moves the board (see .alert above), and
     stays visible on a long, stacked mobile layout where the board (where attention actually is
     when a line completes) sits well below the top of the page. */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background-color: var(--header-bg);
  color: var(--header-text);
  padding: 12px 20px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
}

.signup-banner-message {
  font-size: 0.95rem;
}

.signup-banner-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.signup-banner-link {
  color: var(--header-text);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: underline;
}

.signup-banner-dismiss {
  background: none;
  border: none;
  color: var(--header-text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

@media (max-width: 500px) {
  .signup-banner {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

/* ---------- Auth pages ---------- */

.auth-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-width: 380px;
  margin: 40px auto 0;
  padding: 32px;
  text-align: center;
}

.auth-card h1 {
  font-size: 1.5rem;
}

.auth-subtitle {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 24px;
}

.auth-card form {
  text-align: left;
}

.auth-switch {
  margin-top: 20px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.auth-switch a {
  color: var(--primary);
  text-decoration: none;
}

.auth-switch a:hover {
  text-decoration: underline;
}

/* ---------- Feedback page ---------- */

.feedback-card {
  max-width: 520px;
}

.feedback-categories {
  border: 0;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.feedback-categories legend {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
  padding: 0;
}

.feedback-category {
  cursor: pointer;
}

/* The radio itself is visually hidden; the pill around its label shows the choice. */
.feedback-category input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.feedback-category span {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--text);
}

.feedback-category input:checked + span {
  border-color: var(--primary);
  background-color: rgba(79, 70, 229, 0.08);
  color: var(--primary);
  font-weight: 600;
}

.feedback-category input:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.25);
}

.feedback-card textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background-color: var(--surface);
  color: var(--text);
  resize: vertical;
}

.feedback-card textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.feedback-card .flash {
  max-width: none;
  text-align: left;
}

/* ---------- Admin page ---------- */

.admin-page h1 {
  font-size: 1.6rem;
  margin-bottom: 20px;
}

.admin-section {
  margin-bottom: 32px;
}

.admin-section h2 {
  font-size: 1.1rem;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.admin-stat {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.admin-stat-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

.admin-stat-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Wide tables scroll inside their card rather than widening the page on a phone. */
.admin-table-wrap {
  overflow-x: auto;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.admin-table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.admin-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-table tr.is-blocked td {
  color: var(--text-muted);
  background-color: #fef2f2;
}

.admin-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.admin-button {
  background-color: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
}

.admin-button:hover {
  background-color: var(--bg);
}

.admin-button-danger {
  color: var(--danger);
  border-color: rgba(220, 38, 38, 0.35);
}

.admin-button-danger:hover {
  background-color: #fef2f2;
}

.admin-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  background-color: var(--bg);
  color: var(--text-muted);
  margin-left: 6px;
}

.admin-badge-bug {
  background-color: #fef2f2;
  color: var(--danger);
}

.admin-badge-idea {
  background-color: rgba(79, 70, 229, 0.08);
  color: var(--primary);
}

.admin-count {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.admin-empty {
  color: var(--text-muted);
}

.admin-feedback {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  margin-bottom: 10px;
}

.admin-feedback.is-handled {
  opacity: 0.6;
  box-shadow: none;
}

.admin-feedback-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.admin-feedback-meta .admin-badge {
  margin-left: 0;
}

.admin-feedback-meta form {
  margin-left: auto;
}

.admin-feedback-message {
  margin: 10px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- Form fields ---------- */

.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}

input[type="text"],
input[type="email"],
input[type="password"],
.select-input {
  width: 100%;
  font-size: 1rem;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background-color: var(--surface);
  color: var(--text);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
.select-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.field-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.field-label-link {
  font-size: 0.85rem;
  color: var(--primary);
  text-decoration: none;
  margin-bottom: 6px;
}

.field-label-link:hover {
  text-decoration: underline;
}

.field-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 6px;
}

/* ---------- Buttons ---------- */

.btn-primary,
.auth-card button[type="submit"] {
  width: 100%;
  font-size: 1rem;
  font-weight: 600;
  padding: 11px;
  margin-top: 4px;
  cursor: pointer;
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
}

.btn-primary:hover,
.auth-card button[type="submit"]:hover {
  background-color: var(--primary-hover);
}

.btn-danger {
  font-size: 0.9rem;
  font-weight: 600;
  padding: 9px 14px;
  cursor: pointer;
  background-color: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}

.btn-danger:hover {
  background-color: var(--danger);
  color: white;
}

.btn-block {
  width: 100%;
}

/* .auth-card's generic submit-button rule is more specific than .btn-danger alone. */
.auth-card .btn-danger[type="submit"] {
  background-color: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
  white-space: normal; /* full-width here, so let a long label wrap rather than overflow */
}

.auth-card .btn-danger[type="submit"]:hover {
  background-color: var(--danger);
  color: white;
}

.auth-card .btn-secondary[type="submit"] {
  background-color: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
  white-space: normal;
}

.auth-card .btn-secondary[type="submit"]:hover {
  background-color: rgba(79, 70, 229, 0.08);
}

/* ---------- Account page ---------- */

.account-section {
  text-align: left;
  border-top: 1px solid var(--border);
  padding: 20px 0;
}

.email-status {
  font-size: 0.9rem;
  font-weight: 600;
}

.email-status-verified {
  color: var(--success-hover);
}

.email-status-unverified {
  color: var(--text-muted);
  font-weight: 400;
  margin-bottom: 12px;
}

.account-preferences h2 {
  font-size: 1.05rem;
  margin-bottom: 12px;
}

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  margin-bottom: 16px;
  cursor: pointer;
}

.checkbox-field input {
  margin-top: 3px;
  flex-shrink: 0;
}

.danger-zone {
  text-align: left;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

.danger-zone h2 {
  font-size: 1.05rem;
  color: var(--danger-hover);
  margin-bottom: 8px;
}

.danger-zone p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 16px;
}

/* ---------- Main app layout ---------- */

.app-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
  justify-content: center;
}

.app-grid .panel#controls-container {
  width: 280px;
  flex-shrink: 0;
}

.app-grid .board-wrapper {
  width: 520px;
  max-width: 100%;
  flex-shrink: 0;
}

.app-grid .move-list {
  width: 200px;
  flex-shrink: 0;
}

.app-grid .panel#survival-info {
  width: 280px;
  flex-shrink: 0;
}

.survival-stats {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}

.survival-stat {
  flex: 1;
  background-color: #f8f8fc;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}

.survival-stat-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.survival-stat-value {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--primary);
}

.panel {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}

/* ---------- Opening details ---------- */

.opening-details {
  background-color: #f8f8fc;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 20px;
}

.opening-details h2 {
  font-size: 1.05rem;
}

.complete-badge {
  font-size: 0.9rem;
  margin-left: 4px;
}

.opening-details p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* ---------- Mode toggle ---------- */

.mode-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 0.95rem;
}

.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #d1d5db;
  transition: 0.2s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.2s;
}

input:checked + .slider {
  background-color: var(--primary);
}

input:focus + .slider {
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}

input:checked + .slider:before {
  transform: translateX(20px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* ---------- Chessboard ---------- */

.board-wrapper {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  line-height: 0;
}

#board {
  width: 100%;
}

/* Board coordinates, drawn inside the edge squares (see createCoordinateLayer in
   chessBoardUtils.js): file letters in the bottom-right corner of the bottom row, rank numbers in
   the top-left corner of the left column. Each is tinted with the opposite square colour, so it
   reads clearly without competing with the pieces. Sized from the board's own width, so it scales
   from phone to desktop. Never intercepts the pointer. */
/* The next-move hint arrow (chessBoardUtils.js createArrowLayer): an SVG in square units, over the
   pieces and slightly see-through, as in other chess apps. Under the pieces, a knight's L was
   hidden where it crossed a pawn. The whole group is faded at once, so the shaft and head don't
   darken where they overlap. Green reads clearly on both the light and dark squares, and against
   white and black pieces. */
.board-arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.hint-arrow {
  --hint-arrow-color: #15781b;
  opacity: 0.8;
}

.hint-arrow polyline {
  fill: none;
  stroke: var(--hint-arrow-color);
  stroke-width: 0.2;
  stroke-linejoin: round;
}

.hint-arrow polygon {
  fill: var(--hint-arrow-color);
}

.board-coords {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  container-type: size;
  z-index: 2;
}

.board-coord {
  position: absolute;
  width: 12.5%;
  height: 12.5%;
  box-sizing: border-box;
  line-height: 1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 11px;              /* fallback for browsers without container units */
  font-size: clamp(9px, 2.6cqw, 15px);
  padding: 0.3em 0.35em;
}

.board-coord-file {
  left: calc(var(--i) * 12.5%);
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.board-coord-rank {
  top: calc(var(--i) * 12.5%);
  left: 0;
}

.board-coord.on-light {
  color: #b58863; /* the dark square colour */
}

.board-coord.on-dark {
  color: #f0d9b5; /* the light square colour */
}

/* ---------- Move list ---------- */

.move-list h2 {
  font-size: 1rem;
  margin-bottom: 12px;
}

.move-list ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: move;
}

.move-list li {
  display: flex;
  gap: 8px;
  padding: 6px 4px;
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--border);
}

.move-list li:nth-child(odd) {
  background-color: #fafafc;
}

.move-list li::before {
  counter-increment: move;
  content: counter(move) ".";
  color: var(--text-muted);
  min-width: 1.5em;
}

/* ---------- Progress page ---------- */

.progress-panel {
  max-width: 640px;
  margin: 0 auto;
}

.progress-panel h1 {
  font-size: 1.4rem;
}

.progress-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

@media (max-width: 500px) {
  .progress-header {
    flex-direction: column;
  }
}

/* Stars / Achievements tabs on the Progress page (progress.js selectTab). */
.progress-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.progress-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 8px 14px;
  font: inherit;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}

.progress-tab[aria-selected="true"] {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.tab-count {
  font-weight: 400;
  font-size: 0.85em;
}

/* The achievements list: unlocked ones with their reason and date, locked ones greyed out. */
.achievements-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

.achievement {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.achievement-emoji {
  font-size: 1.8rem;
  line-height: 1;
}

.achievement-text strong {
  display: block;
}

.achievement-text p {
  margin: 4px 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.achievement-text time {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.achievement.locked {
  background: var(--bg);
}

.achievement.locked .achievement-emoji {
  filter: grayscale(1);
  opacity: 0.35;
}

.achievement.locked strong {
  color: var(--text-muted);
  font-weight: 500;
}

/* The unlock toast (achievements.js): bottom-centre, above everything, a link to the list. */
.achievement-toast {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 24px;
  margin: 0 auto;
  width: max-content;  /* centred by the auto margins: left: 50% left it only half the width, so it wrapped on phones */
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  border-radius: var(--radius);
  background: var(--header-bg);
  color: var(--header-text);
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.25);
  text-decoration: none;
  animation: achievement-toast-in 0.3s ease-out;
}

/* On a light disc, so dark emoji (the black pawn of First Move) show on the dark toast. */
.achievement-toast-emoji {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--surface);
  font-size: 1.6rem;
  line-height: 1;
}

.achievement-toast-text {
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
}

@keyframes achievement-toast-in {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .achievement-toast { animation: none; }
}

.progress-opening {
  border-bottom: 1px solid var(--border);
}

.progress-opening:last-child {
  border-bottom: none;
}

.progress-opening-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  cursor: pointer;
  padding: 14px 4px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  text-align: left;
}

.progress-opening-header:hover {
  color: var(--primary);
}

.progress-variations {
  padding: 0 4px 14px 16px;
}

.progress-variation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap; /* on a phone the three tracks drop below the variation name */
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

.progress-variation-row:last-child {
  border-bottom: none;
}

.progress-variation-name {
  color: var(--text-muted);
}

.star-rating {
  color: #f59e0b;
  font-size: 1rem;
  letter-spacing: 1px;
  white-space: nowrap;
}

/* A variation's three practice tracks (White / Black / Both), each a label over its own 5 stars. */
.rep-tracks {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.rep-track {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.rep-track-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.rep-track .star-rating {
  font-size: 0.95rem;
  letter-spacing: 0;
}

/* Opening summary: share of all possible reps earned, plus lines fully mastered. */
.progress-opening-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.progress-bar {
  display: block;
  width: 96px;
  height: 8px;
  border-radius: 999px;
  background-color: var(--border);
  overflow: hidden;
}

.progress-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background-color: #f59e0b;
}

.progress-mastered-count {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

.progress-opening-header {
  gap: 12px;
}

@media (max-width: 500px) {
  .progress-variations {
    padding-left: 8px;
  }

  .progress-variation-name {
    flex-basis: 100%;
  }

  .rep-tracks {
    justify-content: flex-start;
  }

  .progress-bar {
    width: 64px;
  }

  /* Opening name gets its own line; the summary bar sits beneath it instead of squeezing it. */
  .progress-opening-header {
    flex-wrap: wrap;
    gap: 6px 12px;
  }

  .progress-opening-name {
    flex-basis: 100%;
  }
}

/* Narrow phones: slightly smaller stars so all three tracks fit on one line. */
@media (max-width: 400px) {
  .rep-tracks {
    gap: 10px;
  }

  .rep-track .star-rating {
    font-size: 0.8rem;
  }
}

.mastered-badge {
  color: var(--success);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  margin-left: 8px;
}

.progress-empty {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 8px 0;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .app-grid {
    flex-direction: column;
    align-items: center;
  }

  .app-grid .panel#controls-container,
  .app-grid .board-wrapper,
  .app-grid .move-list,
  .app-grid .alert-slot {
    width: 100%;
    max-width: 500px;
  }

  /* Stacked, the alert sits right above the board, where the player is looking. */
  .app-grid .alert-slot { order: 1; }
  .app-grid .board-wrapper { order: 2; }
  .app-grid .move-list { order: 3; }
}

/* ---------- Home page (views/home.erb) ---------- */

.home-hero {
  text-align: center;
  padding: 24px 0 32px;
}

.home-hero h1 {
  font-size: 2.4rem;
  margin-bottom: 12px;
}

.home-pitch {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto 24px;
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 20px;
}

.btn-primary.home-cta {
  display: inline-block;
  width: auto;
  padding: 12px 28px;
  text-decoration: none;
}

.home-cta-secondary {
  color: var(--primary);
  font-weight: 600;
}

.home-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 40px;
}

.home-step h2,
.home-opening h3 {
  font-size: 1.1rem;
  margin: 0 0 6px;
}

.home-step p,
.home-opening p {
  margin: 0;
}

.home-opening-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.home-opening .home-opening-moves {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.home-footnote {
  color: var(--text-muted);
  margin-top: 16px;
}

@media (max-width: 500px) {
  .home-hero h1 {
    font-size: 1.9rem;
  }

  .home-opening-list {
    grid-template-columns: 1fr;
  }
}