:root {
  --primary: #4f46e5;
  --border: #e5e7eb;
  --bg: #f8fafc;
  --card: #ffffff;
  --text: #0f172a;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); }

.brand {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;     /* center logo + titles as a group */
  padding: 16px;
  max-width: 1100px;           /* match .wrap width */
  margin: 0 auto;              /* center the header block */
  text-align: center;          /* center titles text */
  flex-wrap: wrap;             /* wrap nicely on small screens */
}

/* Full-width white banner with blue borders behind the header.
   Uses a pseudo-element sized to the actual header height so the
   bottom line always sits *below* the titles on all screens. */
.brand::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;           /* span edge-to-edge regardless of .wrap width */
  height: 100%;           /* exactly the .brand height */
  background: #ffffff;
  border-top: 4px solid #0077b6;
  border-bottom: 4px solid #0077b6;
  z-index: -1;            /* sit behind logo + titles */
}

.brand .titles { text-align: center; }
.brand img { object-fit: contain; }
.brand .titles h1 { margin:0; font-size: 22px; }
.brand .titles p { margin:2px 0 0; color:#475569; font-size: 14px; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px 40px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin: 10px 0; }

.row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.row label { display:flex; flex-direction: column; gap:6px; }
.row input, .row select { padding: 8px 10px; border:1px solid var(--border); border-radius:10px; min-width: 220px; }

/* Add a little breathing room under the header banner on all pages that include it */
.page-pad {
  padding-top: 18px;
}
@media (min-width: 900px){
  .page-pad { padding-top: 22px; }
}

.inline-actions { display:flex; gap:8px; }
button { cursor:pointer; padding:10px 14px; border-radius:10px; border:1px solid var(--border); background:#fff; }
button:hover { background:#f3f4f6; }
button:disabled { opacity: .5; cursor: not-allowed; }

.statusbar { display:flex; gap:16px; flex-wrap:wrap; padding: 6px 4px; color:#334155; }

.board-layout {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: max-content 320px; /* board is intrinsic width; pane fixed */
  justify-content: center;                   /* center the pair; keep them snug */
  align-items: start;
  column-gap: 12px;
}
.boardCard #board { width: 520px; max-width: 100%; margin: 0; }

.rightPane {
  display: flex;
  flex-direction: column;
  gap: 8px;                 /* tighter vertical rhythm */
}

.moveBox {
  font-size: 16px;          /* slightly smaller text so 8 moves fit */
  line-height: 1.25;
  padding: 10px 12px;
  width: 100%;
  height: 9.5em;            /* room for ~8 short SAN moves */
  overflow: auto;           /* scroll when exceeding the box */
  resize: none;             /* keep the box size consistent */
  border: 2px solid var(--border);
  border-radius: 10px;
  outline: none;
}
.moveBox[readonly] {
  background: #f9fafb;
  color: #111827;
}

.controls.underMove {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  grid-auto-rows: minmax(44px, auto);
}
.controls.underMove #submitMoveBtn,
.controls.underMove #finishBtn,
.controls.underMove #exitBtn { grid-column: span 2; }
.controls.underMove .control-btn { width: 100%; }

/* Visually hidden (for ARIA live region we keep) */
.visually-hidden { position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }

/* Responsive */
@media (max-width: 900px) {
  /* Stack board over the right pane and center both */
  .board-layout {
    grid-template-columns: 1fr;
    justify-content: center;
    row-gap: 12px;
    grid-auto-flow: row;           /* stop forcing columns on phones */
    display: flex;                 /* switch to flex for safer stacking */
    flex-direction: column;        /* stack board then pane */
  }

  .boardCard { display: flex; justify-content: center; }
  .boardCard #board {
    width: 94vw;          /* responsive width on phones */
    max-width: 520px;     /* never exceed desktop board size */
    margin: 0 auto;
  }

  .rightPane {
    max-width: 520px;
    width: 94vw;
    margin: 0 auto;
    gap: 6px;
    align-self: stretch;           /* make pane take full available width */
  }

  /* Make the move history box a bit smaller and readable on phones */
  .moveBox {
    height: 9em;
    line-height: 1.3;
    font-size: 16px;
    white-space: normal;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: left;
    padding: 10px 14px;
  }

  .controls.underMove {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(48px, auto);
    gap: 10px;
  }
  .controls.underMove #submitMoveBtn { order: 1; grid-column: 1 / span 2; }
  .controls.underMove #exitBtn { order: 2; grid-column: 3 / span 1; }
  .controls.underMove #skipBtn { order: 3; grid-column: 1 / span 1; }
  .controls.underMove #resetBtn { order: 4; grid-column: 2 / span 1; }
  .controls.underMove #finishBtn { order: 5; grid-column: 3 / span 1; }
  .controls.underMove button,
  .control-btn { width: 100%; height: 100%; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  /* keep the right controls pane snug to the board on mid-size laptops */
  .board-layout {
    grid-template-columns: max-content 280px;
    column-gap: 8px;
    justify-content: center;
  }
  .rightPane { width: 280px; }
  .moveBox { height: 9em; }
}

/* --- Orientation-aware mobile layout fixes --- */
/* Force stack under the board on phones in PORTRAIT, regardless of width quirks */
@media (orientation: portrait) {
  .board-layout {
    display: flex !important;
    flex-direction: column !important;
    grid-auto-flow: row !important;     /* neutralize grid behavior */
    grid-template-columns: 1fr !important;
    justify-content: center !important;
    row-gap: 12px;
    align-items: center !important;   /* center the whole stack under the header */
  }
  .boardCard { display: flex; justify-content: center; }
  .boardCard #board {
    width: 94vw;
    max-width: 520px;
    margin: 0 auto;
  }
  .rightPane {
    max-width: 520px;
    width: 94vw;
    margin: 0 auto;             /* keep pane directly under board */
    justify-self: center;
    align-self: stretch;
  }
  .moveBox {
    height: 9em;
    line-height: 1.3;
    font-size: 16px;
    white-space: normal;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: left;
    padding: 10px 14px;
  }
  .controls.underMove {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(48px, auto);
    gap: 10px;
  }
  .controls.underMove #submitMoveBtn { order: 1; grid-column: 1 / span 2; }
  .controls.underMove #exitBtn { order: 2; grid-column: 3 / span 1; }
  .controls.underMove #skipBtn { order: 3; grid-column: 1 / span 1; }
  .controls.underMove #resetBtn { order: 4; grid-column: 2 / span 1; }
  .controls.underMove #finishBtn { order: 5; grid-column: 3 / span 1; }
  .controls.underMove button,
  .control-btn { width: 100%; height: 100%; }
}

/* Keep side-by-side on small phones in LANDSCAPE, but make the pane narrow and tight */
@media (orientation: landscape) and (max-height: 500px) {
  .board-layout {
    grid-template-columns: max-content 260px !important; /* snug pane */
    column-gap: 8px;
    justify-content: center;
    display: grid !important;          /* restore grid when in landscape */
  }
  .rightPane { width: 260px; }
  .moveBox { height: 7.5em; font-size: 14px; }
}

/* Board Themes */
.theme-classic .white-1e1d7 { background-color: #f0d9b5 !important; }
.theme-classic .black-3c85d { background-color: #b58863 !important; }
.theme-classic .chessboard { border: 4px solid #333; border-radius: 4px; }

.theme-blue .white-1e1d7 { background-color: #fdfdfd !important; }
.theme-blue .black-3c85d { background-color: #90e0ef !important; }
.theme-blue .chessboard { border: 4px solid #0077b6; border-radius: 4px; }

.theme-green .white-1e1d7 { background-color: #fdf5e6 !important; }
.theme-green .black-3c85d { background-color: #2e7d32 !important; }
.theme-green .chessboard { border: 4px solid #1b5e20; border-radius: 4px; }

.theme-dark .white-1e1d7 { background-color: #999 !important; }
.theme-dark .black-3c85d { background-color: #222 !important; }
.theme-dark .chessboard { border: 4px solid #000; border-radius: 4px; box-shadow: 0 0 12px rgba(0,0,0,0.7); }



/* --- Chessboard notation outside the board (chessboard-js 1.0.0) --- */
.chessboard .notation { font-size: 12px; color: #0077b6; }
.chessboard .alpha { transform: translateY(14px); }   /* file letters downward */
.chessboard .numeric { transform: translateX(-14px); }/* rank numbers leftward */
.toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.toolbar .spacer { flex:1 1 auto; }
.filters { display:flex; gap:10px; flex-wrap:wrap; }

table.leader { width:100%; border-collapse:collapse; }
table.leader th, table.leader td { padding:8px 10px; border-bottom:1px solid var(--border); text-align:left; }
table.leader th { background:#f7f7fb; position:sticky; top:0; z-index:1; }

.pill { display:inline-block; padding:2px 8px; border-radius:999px; background:#eef; font-size:12px; }
.right { text-align:right; }
.muted { color:#667085; font-size:12px; }
.green { color:#2e7d32; }

/* ---- Puzzle layout helpers (used by puzzle.html) ---- */
.board-box { padding:16px; position:relative; }
.board-container { max-width:520px; margin:0 auto; }

.controls-bar {
  max-width: 520px;
  width: 100%;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0;            /* align with right pane; no auto-centering gap */
}
.move-input { flex:1 1 240px; padding:10px; border:1px solid var(--border); border-radius:8px; }
.control-btn { padding:10px 14px; border:1px solid var(--border); border-radius:8px; background:#fff; cursor:pointer; }
.control-btn:disabled { opacity:0.5; cursor:not-allowed; }

/* === Global branding / header === */
/* Bigger logo overrides the base .brand img size via the #logo id */
.brand #logo {
  height: 110px !important;
  width: auto !important;
  margin-top: -10px;
}
@media (max-width: 640px){
  .brand #logo {
    height: 90px !important;
    width: auto !important;
  }
}

/* === HUD layout (used by puzzle.html two-row header) === */
.hud {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 6px;          /* nudge HUD away from the banner lines */
}
.hud-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.hud-top { font-weight:600; }
.hud-metrics { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }

/* === Inline status banner (splash & puzzle pages) === */
.statusBanner {
  margin-top: 6px;
  font-weight: 700;
  color: #b91c1c; /* red-700 */
}

/* === Read-only move box styling (puzzle.html) === */
.move-input[readonly] {
  background: #f9fafb;
  color: #111827;
}

.top-banner {
/* legacy banner element not used; kept for compatibility */
  display: none !important;
}

/* === Activate Blue Chessboard Theme (default) === */
.chessboard { border: 4px solid #0077b6; border-radius: 8px; }
.white-1e1d7 { background-color: #fdfdfd !important; }  /* light squares */
.black-3c85d { background-color: #90e0ef !important; }  /* dark squares */

/* === Force chessboard coordinate color (override vendor CSS) === */
  
/* Prevent page scroll/zoom while dragging pieces on touch devices */
#board, .chessboard, .chessboard * {
  touch-action: none;         /* disable panning/zooming gestures in board area */
  -ms-touch-action: none;     /* IE/old Edge */
  user-select: none;          /* avoid text/image selection */
  -webkit-user-select: none;
}

.chessboard .notation,
.chessboard .notation.alpha,
.chessboard .notation.numeric,
.chessboard .alpha,
.chessboard .numeric {
  color: #0077b6 !important;
  opacity: 1 !important; /* some themes dim coordinates */
}