@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
@import url('vendor/bootstrap-5.3.3/bootstrap.min.css');

/* Chess Puzzle sits its own light, "game-like" visual layer on top of
   Bootstrap's reset/grid/utilities - Bootstrap supplies the responsive
   plumbing (container/row/col, .ratio, utility classes used on individual
   pages), everything below is the app's own theme and component styling.
   Every token name below already existed before this pass and is used
   directly via var(...) throughout the PHP templates - keep the names
   stable even when tuning a value. */
:root {
  --bg: #f4f1fc;
  --surface: #ffffff;
  --border: #e6e0f7;
  --text: #241b3d;
  --text-muted: #756f92;
  --primary: #7c3aed;
  --primary-dark: #5b21b6;
  --primary-light: #f1e9ff;
  --accent: #f59e0b;
  --accent-dark: #d97706;
  --danger: #f43f5e;
  --danger-dark: #e11d48;
  --success-bg: #d7f9e9;
  --success-text: #059669;
  --error-bg: #ffe4e6;
  --error-text: #e11d48;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 10px 26px rgba(124, 58, 237, 0.16), 0 3px 8px rgba(124, 58, 237, 0.10);
  --shadow-sm: 0 4px 14px rgba(124, 58, 237, 0.12);
  --gradient-primary: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  --gradient-header: linear-gradient(120deg, #7c3aed 0%, #5b21b6 55%, #4338ca 100%);
  --gradient-accent: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  --topbar-muted: rgba(255, 255, 255, 0.78);
  /* New tokens for the refreshed look - board wood-tones (reserved for
     future board theming), reused by any card that wants the warm accent. */
  --board-light: #f3e6d0;
  --board-dark: #b98a5a;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(900px 500px at 92% -10%, rgba(245, 158, 11, 0.10) 0%, rgba(245, 158, 11, 0) 60%),
    radial-gradient(700px 500px at -5% 10%, rgba(124, 58, 237, 0.10) 0%, rgba(124, 58, 237, 0) 60%),
    linear-gradient(180deg, #f7f4fd 0%, #eef0fb 55%, #f3f0fb 100%);
  background-attachment: fixed;
  color: var(--text);
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 24px 20px 60px; }
.wrap.narrow { max-width: 640px; }

/* ===================== Topbar / navigation ===================== */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--gradient-header);
  color: #fff;
  padding: 16px 22px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 26px;
  position: relative;
  overflow: hidden;
}
.topbar::after {
  content: '';
  position: absolute; top: -60%; right: -8%; width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.topbar h1 { font-size: 1.4rem; margin: 0; font-weight: 800; letter-spacing: -0.01em; position: relative; z-index: 1; }
.topbar h1 a { color: #fff; text-decoration: none; }

/* Hamburger button - hidden on desktop, shown once .nav-links no longer
   fits comfortably in one row (see the media query below). */
.nav-toggle {
  display: none;
  flex-direction: column; justify-content: center; align-items: center; gap: 4px;
  width: 40px; height: 40px; padding: 0; margin-left: auto;
  border: none; border-radius: 10px; background: rgba(255, 255, 255, 0.16);
  cursor: pointer; position: relative; z-index: 2; flex: 0 0 auto;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-links { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 0.88rem; position: relative; z-index: 1; }
.nav-links a { color: rgba(255, 255, 255, 0.82); text-decoration: none; font-weight: 600; padding: 6px 11px; border-radius: 999px; transition: background 0.15s ease, color 0.15s ease; }
.nav-links a:hover { color: #fff; background: rgba(255, 255, 255, 0.16); }
.nav-links a strong { font-weight: 800; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.user-chip { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 600; color: #fff; background: rgba(255, 255, 255, 0.16); padding: 6px 13px; border-radius: 999px; position: relative; z-index: 1; }

@media (max-width: 860px) {
  /* The topbar clips overflow for its decorative corner glow (.topbar::after)
     - but that also clips the dropdown panel below, since .nav-links is
     positioned outside the box (top: 100%). Let it show on mobile; the
     glow spilling very slightly past the rounded corner here is a
     non-issue next to a menu that doesn't open at all. */
  .topbar { overflow: visible; }
  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: 100%; left: 0; right: 0; margin-top: 10px;
    background: var(--primary-dark);
    border-radius: var(--radius-sm);
    padding: 10px;
    box-shadow: var(--shadow);
  }
  .nav-links.nav-open { display: flex; }
  .nav-links a, .nav-links .user-chip { width: 100%; }
  .nav-links a { padding: 10px 12px; }
  .nav-links .user-chip { justify-content: center; margin: 2px 0; }
}

/* ===================== Buttons ===================== */
.btn {
  display: inline-flex; align-items: center; gap: 6px; border: none; border-radius: 999px;
  padding: 10px 20px; font-size: 0.9rem; font-weight: 700; cursor: pointer; text-decoration: none;
  background: var(--gradient-primary); color: #fff;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.32);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(124, 58, 237, 0.4); }
.btn:active { transform: translateY(0); box-shadow: 0 3px 8px rgba(124, 58, 237, 0.32); }
.btn.btn-secondary { background: #fff; color: var(--primary-dark); border: 2px solid var(--border); box-shadow: none; }
.btn.btn-secondary:hover { background: var(--primary-light); border-color: var(--primary); box-shadow: none; }
.btn.btn-danger { background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%); box-shadow: 0 4px 12px rgba(225, 29, 72, 0.32); }
.btn.btn-danger:hover { box-shadow: 0 7px 18px rgba(225, 29, 72, 0.42); }
.btn.btn-sm { padding: 7px 14px; font-size: 0.8rem; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.pad { padding: 22px; }

.flash { padding: 13px 18px; border-radius: var(--radius-sm); margin-bottom: 18px; font-size: 0.9rem; font-weight: 600; border-left: 4px solid transparent; }
.flash.success { background: var(--success-bg); color: var(--success-text); border-left-color: var(--success-text); }
.flash.error { background: var(--error-bg); color: var(--error-text); border-left-color: var(--error-text); }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.field input[type="text"], .field input[type="password"], .field input[type="email"], .field textarea, .field select {
  width: 100%; padding: 11px 14px; border: 2px solid var(--border); border-radius: var(--radius-sm); font-size: 0.95rem; font-family: inherit;
  background: var(--surface); color: var(--text); transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}
.field textarea { resize: vertical; min-height: 72px; line-height: 1.45; }

.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { width: 100%; max-width: 380px; padding: 32px 28px; position: relative; overflow: hidden; }
.login-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--gradient-primary); }
.login-card h1 { font-size: 1.3rem; margin: 4px 0 20px; text-align: center; font-weight: 800; color: var(--primary-dark); }
.login-card .btn { width: 100%; justify-content: center; margin-top: 6px; }
.login-card .switch { text-align: center; margin-top: 16px; font-size: 0.85rem; color: var(--text-muted); }
.login-card .switch a { color: var(--primary); font-weight: 600; text-decoration: none; }
.login-card .switch a:hover { text-decoration: underline; }

.chip { display: inline-block; border: 2px solid var(--border); background: var(--surface); border-radius: 999px; padding: 6px 14px; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); text-decoration: none; transition: all 0.15s ease; }
.chip:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.chip.active { background: var(--gradient-primary); border-color: transparent; color: #fff; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.32); }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }

/* ===================== Filter dropdown (puzzle type) ===================== */
.filter-row { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.filter-label { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); }
.select-wrap { position: relative; display: inline-block; }
.select-wrap::after {
  content: ''; position: absolute; right: 17px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
  transform: translateY(-65%) rotate(45deg); pointer-events: none;
}
.filter-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  min-width: 220px; padding: 10px 42px 10px 18px;
  border: 2px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.filter-select:hover { border-color: var(--primary); }
.filter-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15); }

/* ===================== Puzzle grid ===================== */
.puzzle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.puzzle-card { padding: 16px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.puzzle-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(124, 58, 237, 0.22); border-color: var(--primary); }
.puzzle-card .title { font-weight: 700; font-size: 0.95rem; }
.puzzle-card .meta { font-size: 0.78rem; color: var(--text-muted); }
.puzzle-card .status { font-size: 0.78rem; font-weight: 700; }
.puzzle-card .status.done { color: var(--success-text); }
.puzzle-card .status.todo { color: var(--accent-dark); }
.mini-board-preview { width: 100%; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); pointer-events: none; }

/* Mode/visibility badges on a puzzle card - Bootstrap's .badge.rounded-pill
   for shape/sizing, our own colors per mode. */
.badge-engine { background: #fff3d6; color: #8a6d1f; }
.badge-unlimited { background: #e6e0ff; color: #4a2fa8; }
.badge-private { background: #f0f0f0; color: #555; }

/* ===================== Pagination ===================== */
.pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 26px; flex-wrap: wrap; }
.pagination-info { font-size: 0.85rem; font-weight: 700; color: var(--text-muted); }
.pagination-disabled { opacity: 0.4; pointer-events: none; }

/* ===================== Solve / editor layouts ===================== */
.solve-layout { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; }
.board-col { flex: 0 0 auto; }
.board-wrap { width: 400px; max-width: 90vw; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); }
.info-col { flex: 1 1 260px; min-width: 240px; }
#status-banner { padding: 13px 18px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 0.9rem; font-weight: 700; border-left: 4px solid transparent; }
#status-banner.playing { background: var(--primary-light); color: var(--primary-dark); border-left-color: var(--primary); }
#status-banner.correct { background: var(--success-bg); color: var(--success-text); border-left-color: var(--success-text); }
#status-banner.wrong { background: var(--error-bg); color: var(--error-text); border-left-color: var(--error-text); }
#status-banner.solved { background: var(--success-bg); color: var(--success-text); border-left-color: var(--success-text); }

.editor-layout { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; }
.spare-row { display: flex; justify-content: center; margin: 8px 0; }

table.admin-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
table.admin-table th, table.admin-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
table.admin-table th { color: var(--text-muted); font-weight: 700; background: var(--primary-light); }
table.admin-table th:first-child { border-top-left-radius: var(--radius-sm); }
table.admin-table th:last-child { border-top-right-radius: var(--radius-sm); }
table.admin-table tbody tr:hover { background: var(--bg); }

.empty-state { color: var(--text-muted); padding: 40px 0; text-align: center; }
.hint-box { background: #fff8e6; border: 2px solid #fbbf24; border-radius: var(--radius-sm); padding: 13px 16px; font-size: 0.88rem; margin-top: 10px; }

.modal-overlay { position: fixed; inset: 0; background: rgba(36, 27, 61, 0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.modal-box { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px 28px; text-align: center; max-width: 360px; width: 100%; }

/* Tap-to-move: highlight the currently-selected square (used as an alternative
   to drag-and-drop, which is unreliable on mobile browsers - dragging a piece
   there often just scrolls the page instead). */
.cp-selected-square { box-shadow: inset 0 0 3px 3px var(--primary) !important; }

/* ===================== Mobile refinements ===================== */
@media (max-width: 640px) {
  .wrap { padding: 16px 14px 44px; }
  .topbar { padding: 12px 16px; border-radius: var(--radius-sm); }
  .topbar h1 { font-size: 1.15rem; }
  .solve-layout, .editor-layout { gap: 18px; }
  /* .board-col has `flex: 0 0 auto` (desktop: size to its fixed-width board),
     which has no intrinsic width of its own - it normally gets one from the
     400px on .board-wrap. Naively setting the board full-width on mobile by
     changing .board-wrap alone creates a circular reference (a 0 0 auto flex
     item asking its only child for 100% of a width the item itself doesn't
     have yet), and the board collapses to ~0px. Giving the flex item itself
     a definite width first breaks that circularity. */
  .board-col { flex: 1 1 100%; width: 100%; }
  .board-wrap { width: 100%; max-width: 100%; }
  .modal-box { padding: 22px 18px; }
  table.admin-table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .chip-row { gap: 6px; }
  .puzzle-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .filter-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .filter-select { min-width: 0; width: 100%; }
}