/* ============================================================
   Puzzle Rush — ChessBooks theme override
   Loaded AFTER the app's built CSS (see index.html) so these
   rules win. The iframe is a separate document, so the theme's
   --cb-* custom properties are inlined here as plain values.
   Palette mirrors the chessbooks theme style.css:
     greens #10231a/#16291e/#1d3528/#26432f/#2d503b/#3a6148,
     ivory #fbf8f1/#f3ead7, charcoal #23231f,
     gold #b08a2e/#c09a3f/#d9c08a, red #b3402a
   ============================================================ */

:root {
  --bg-primary:    #fbf8f1;   /* cb-ivory-50 page bg (light)     */
  --bg-secondary:  #ffffff;   /* white panels                     */
  --bg-tertiary:   #f7f2e6;   /* cb-ivory-100                     */
  --bg-elevated:   #efe6d2;   /* cb-ivory-200                     */
  --text-primary:  #23231f;   /* cb-charcoal                      */
  --text-secondary: #4c4a42;
  --text-muted:    #8d8677;
  --green:         #3a6148;   /* cb-green-500                     */
  --green-hover:   #2d503b;
  --green-dark:    #1d3528;
  --red:           #b3402a;   /* cb-red                           */
  --red-dark:      #922f20;
  --blue:          #3f6a8c;
  --gold:          #b08a2e;   /* cb-gold-600                      */
  --border:        #e6dfcd;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;
  --font-serif: Georgia, 'Times New Roman', Times, serif;
  --board-light:  #edeed1;
  --board-dark:   #779952;

  /* dark-green palette for the header bar + right sidebar */
  --panel-bg:        #1d3528;  /* cb-green-800 */
  --panel-bg-deep:   #16291e;  /* cb-green-900 */
  --panel-border:    #26432f;  /* cb-green-700 */
  --panel-line:      #2d503b;  /* cb-green-600 */
  --panel-text:      #fbf8f1;  /* cb-ivory-50  */
  --panel-muted:     #b9c6b9;
  --panel-faint:     #9fb0a4;
  --panel-accent:    #d9c08a;  /* cb-gold-300  */
  --panel-gold:      #c09a3f;  /* cb-gold-500  */
  --panel-green-lt:  #a9d18e;
  --panel-red-lt:    #f08a74;
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* ============================================================
   APP HEADER — dark green bar (theme deep green)
   Content aligned to the site page width (1280px) so it lines up
   with the page column instead of spanning the full screen.
   ============================================================ */
.header {
  background: var(--panel-bg-deep);   /* #16291e */
  border-bottom: 1px solid var(--panel-line);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  padding: 0 max(24px, calc((100% - 1280px) / 2 + 24px));
}

.logo {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--panel-text);
}

.logo-icon {
  color: var(--panel-accent);
  font-size: 1.4rem;
}

.logo-text {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: var(--panel-text);
  color: var(--panel-text);
  letter-spacing: 0.02em;
}

.stat-label { color: var(--panel-faint); }
.stat-value { color: var(--panel-text); }
.rating-value { color: var(--panel-accent); }
.stat-divider { background: var(--panel-line); }

.icon-btn {
  background: var(--panel-bg);
  border-color: var(--panel-line);
  color: var(--panel-muted);
}
.icon-btn:hover {
  background: var(--panel-border);
  border-color: var(--panel-accent);
  color: var(--panel-text);
}

/* ----- Main column: site container width, light page bg ----- */
.main-content {
  max-width: var(--cb-container, 1280px);
  margin: 0 auto;
  width: 100%;
  min-width: 0;
  padding: 28px 24px 40px;
}

/* ----- Equal-height board + sidebar; centre the group so there is
        never a lopsided empty gap on the right ----- */
.puzzle-layout {
  align-items: stretch;
  justify-content: center;
}

.board-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.board-wrapper {
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--border), 0 12px 28px rgba(16, 35, 26, 0.16);
}

.board-loading {
  background: #fff;
  box-shadow: 0 0 0 2px var(--border), 0 0 0 4px #fff,
              0 8px 24px rgba(16, 35, 26, 0.12);
  color: var(--text-muted);
}

/* ============================================================
   RIGHT SIDEBAR — dark green card (theme footer/promo palette)
   ============================================================ */
.puzzle-panel {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--cb-radius, 10px);
  box-shadow: 0 8px 24px rgba(16, 35, 26, 0.25);
}

.panel-section { border-bottom-color: var(--panel-line); }
.panel-section h3,
.stats-section h3 {
  color: var(--panel-accent);
  font-family: var(--font-serif);
  letter-spacing: 0.06em;
  font-weight: 700;
}

.puzzle-header h2 { font-family: var(--font-serif); color: var(--panel-text); }
.puzzle-id { color: var(--panel-faint); }
.meta-label { color: var(--panel-muted); }
.meta-value { color: var(--panel-text); }

.status-banner { border-bottom-color: var(--panel-line); }
.status-banner.completed { background: rgba(169, 209, 142, 0.14); }
.status-banner.wrong { background: rgba(240, 138, 116, 0.14); }
.completed .status-icon { color: var(--panel-green-lt); }
.wrong .status-icon { color: var(--panel-red-lt); }

.rating-change.positive { background: rgba(169, 209, 142, 0.18); color: var(--panel-green-lt); }
.rating-change.negative { background: rgba(240, 138, 116, 0.18); color: var(--panel-red-lt); }

.theme-tag {
  background: var(--panel-border);
  border-color: var(--panel-line);
  color: #dbe6d8;
}

/* ----- Buttons inside the dark panel ----- */
.btn { font-family: var(--font); }
.btn-next {
  background: var(--panel-gold);
  color: var(--panel-bg-deep);
  border-radius: var(--cb-radius-sm, 6px);
}
.btn-next:hover { background: #b08a2e; color: var(--panel-bg-deep); }

.btn-retry,
.btn-prev {
  background: var(--panel-border);
  border-color: var(--panel-line);
  color: var(--panel-text);
}
.btn-retry:hover,
.btn-prev:hover { background: var(--panel-line); }

.btn-hint {
  background: rgba(140, 180, 220, 0.14);
  border-color: rgba(140, 180, 220, 0.40);
  color: #a8c8e0;
}
.btn-hint:hover { background: rgba(140, 180, 220, 0.24); color: #cde4f5; }

.btn-solution {
  background: rgba(243, 234, 215, 0.10);
  border-color: rgba(243, 234, 215, 0.25);
  color: #e8e0cc;
}
.btn-solution:hover { background: rgba(243, 234, 215, 0.18); color: #fff; }

.btn-danger {
  background: rgba(240, 138, 116, 0.14);
  border-color: rgba(240, 138, 116, 0.40);
  color: var(--panel-red-lt);
}
.btn-danger:hover { background: rgba(240, 138, 116, 0.24); }

.diff-btn {
  background: var(--panel-border);
  border-color: var(--panel-line);
  color: #c9d6cd;
  font-family: var(--font);
}
.diff-btn:hover { background: var(--panel-line); color: #fff; }
.diff-btn.active {
  background: var(--panel-gold);
  border-color: var(--panel-gold);
  color: var(--panel-bg-deep);
}

/* ----- Solution navigation / move pills (dark) ----- */
.solution-nav { background: var(--panel-bg-deep); }
.nav-arrow {
  background: var(--panel-border);
  border-color: var(--panel-line);
  color: var(--panel-text);
}
.nav-arrow:hover:not(:disabled) { background: var(--panel-gold); border-color: var(--panel-gold); color: var(--panel-bg-deep); }
.nav-move.player-move { color: var(--panel-green-lt); }
.nav-label { color: var(--panel-faint); }
.nav-who { color: var(--panel-faint); }
.nav-counter { color: var(--panel-faint); }

.move-pill {
  background: var(--panel-border);
  border-color: var(--panel-line);
  color: #c9d6cd;
}
.move-pill.player { border-color: rgba(169, 209, 142, 0.5); color: var(--panel-green-lt); }
.move-pill:hover { background: var(--panel-line); color: #fff; }
.move-pill.active { background: var(--panel-gold); border-color: var(--panel-gold); color: var(--panel-bg-deep); }

/* ----- Streak banner: gold tint ----- */
.streak-banner {
  background: linear-gradient(135deg, rgba(192, 154, 63, 0.18), rgba(176, 138, 46, 0.10));
  border-color: rgba(176, 138, 46, 0.40);
  color: var(--gold);
}

.btn-report { color: var(--panel-faint); border-color: var(--panel-line); }
.btn-report:hover { color: var(--panel-red-lt); border-color: rgba(240, 138, 116, 0.5); }

.shortcut { color: var(--panel-muted); }

kbd {
  background: var(--panel-border);
  border-color: var(--panel-line);
  color: var(--panel-text);
}

/* ============================================================
   MODAL / STATS — stays light (popup over the page)
   ============================================================ */
.modal {
  background: #ffffff;
  border-color: #e6dfcd;
  border-radius: var(--cb-radius-lg, 16px);
  box-shadow: var(--cb-shadow-lg, 0 12px 32px rgba(16, 35, 26, .16));
}
.modal-header { border-bottom-color: #e6dfcd; }
.modal-header h2 { font-family: var(--font-serif); color: #23231f; }
.modal-close:hover { background: #f7f2e6; color: #23231f; }

.chart-container { background: #f7f2e6; }
.big-rating { color: #3a6148; font-family: var(--font-serif); }
.stat-card { background: #f7f2e6; }
.stat-card-value { color: #23231f; }
.today-stats { color: #4c4a42; }
.today-stats strong { color: #23231f; }
.reset-section { border-top-color: #e6dfcd; }

/* ----- Scrollbar ----- */
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: #efe6d2; }
::-webkit-scrollbar-thumb:hover { background: #d9d0b8; }

/* Small polish: gold focus ring like the theme's links */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}