/* Backgammon custom styles */

/* Colour theme, a backgammon board: wood frame, green felt, cream and burgundy points. Change these to re-theme the app */
:root {
  --bg-felt: #2F5D46;             /* Green felt - page background */
  --bg-felt-dark: #234736;        /* Darker felt - cards */
  --bg-wood: #5B3A24;             /* Wood frame - navbar */
  --bg-cream: #F3E9D2;            /* Cream points and checkers - main text */
  --bg-burgundy: #8E2C3A;         /* Burgundy points - buttons */
  --bg-burgundy-dark: #6E1F2B;    /* Pressed buttons */
  --bg-gold: #D9B26F;             /* Brass trim - highlights and links */
  --bg-muted: #B9C9BC;            /* Secondary text */
}

/* Base page */
body {
  background-color: var(--bg-felt);
  color: var(--bg-cream);
}

a,
a:hover {
  color: var(--bg-gold);
}

h1,
h3,
.navbar-brand,
.navbar .nav-link {
  font-family: tintin, Georgia, "Times New Roman", serif;
}

.navbar.bg-dark {
  background-color: var(--bg-wood) !important;
  border-bottom: 3px solid var(--bg-gold);
}

.navbar-dark .navbar-brand {
  color: var(--bg-cream);
}

.navbar-dark .navbar-nav .nav-link {
  color: var(--bg-gold);
}

.card {
  background-color: var(--bg-felt-dark);
  border: 1px solid var(--bg-gold);
  border-radius: 12px;
}

.btn-info {
  background-color: var(--bg-burgundy);
  border-color: var(--bg-burgundy);
  color: var(--bg-cream);
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
  background-color: var(--bg-burgundy-dark) !important;
  border-color: var(--bg-burgundy-dark) !important;
  color: var(--bg-cream);
}

.form-control:focus {
  border-color: var(--bg-gold);
  box-shadow: 0 0 0 0.2rem rgba(217, 178, 111, 0.35);
}

.modal-content {
  background-color: var(--bg-cream);
  color: var(--bg-wood);
}

/* Shown with a fade rather than Bootstrap's modal(), which is what usually lets a modal scroll. The move viewer can be
   taller than a phone screen once a Why? and its facts are open */
#boardViewModal {
  overflow-y: auto;
}

.loader {
  border-color: var(--bg-cream);
  border-top-color: var(--bg-burgundy);
}

.bg-placeholder {
  color: var(--bg-muted);
}

/* Board */
.bg-board {
  max-width: 560px;
  margin: 0 auto 6px auto;
}

.bg-board-svg {
  width: 100%;
  height: auto;
  display: block;
  -webkit-tap-highlight-color: transparent;
}

.bg-tap {
  cursor: pointer;
}

/* Dragging checkers mustn't select the point numbers */
.bg-board {
  user-select: none;
  -webkit-user-select: none;
}

.bg-counts {
  color: var(--bg-muted);
  font-size: 0.85em;
  text-align: center;
  margin-bottom: 8px;
}

.btn-outline-light.active,
.btn-outline-light:active {
  background-color: var(--bg-gold) !important;
  border-color: var(--bg-gold) !important;
  color: var(--bg-wood) !important;
}

.bg-photo-canvas {
  width: 100%;
  height: auto;
  border-radius: 6px;
  touch-action: manipulation;
}

/* Dragging a corner must not scroll the page, so the photo is kept short enough to leave room to scroll beside it */
.bg-corner-editor {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 60vh;
  margin: 0 auto;
  touch-action: none;
}

.bg-photo-notes {
  font-size: 0.85em;
  color: var(--bg-gold);
  padding-left: 18px;
}

/* Keep New game well apart from the turn buttons, so it isn't pressed by mistake (beats Bootstrap's .btn-block + .btn-block) */
.btn-block.bg-new-game {
  margin-top: 1.75rem;
}

/* Guide */
.bg-guide-heading {
  font-family: tintin, Georgia, "Times New Roman", serif;
  color: var(--bg-gold);
  margin-top: 1.25rem;
}

.bg-guide-list {
  padding-left: 1.2rem;
}

.bg-guide-list li {
  margin-bottom: 0.4rem;
}

/* Grading after each move */
.bg-grade {
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 10px;
}

.bg-grade-best {
  background-color: #2E7D4F;
  border: 2px solid #8FD19E;
}

.bg-grade-good {
  background-color: #4F7F5E;
  border: 2px solid #8FD19E;
}

.bg-grade-miss {
  background-color: var(--bg-burgundy-dark);
  border: 2px solid #E8A0A8;
}

/* Tables */
.bg-table {
  color: var(--bg-cream);
  font-size: 0.85em;
}

.bg-table th,
.bg-table td {
  border-top-color: rgba(243, 233, 210, 0.2);
}

.bg-result-row {
  cursor: pointer;
}

.bg-result-selected {
  background-color: rgba(217, 178, 111, 0.3);
}

.bg-row-bot {
  color: var(--bg-muted);
}

.bg-label {
  border-radius: 4px;
  padding: 0 4px;
  font-weight: bold;
  white-space: nowrap;
}

.bg-label-perfect { background-color: #2E7D4F; }
.bg-label-good { background-color: #4F7F5E; }
.bg-label-slip { background-color: #A9862F; }
.bg-label-mistake { background-color: #A0522D; }
.bg-label-blunder { background-color: var(--bg-burgundy); }

/* Account */
.bg-level {
  font-family: tintin, Georgia, "Times New Roman", serif;
  font-size: 1.8rem;
  color: var(--bg-gold);
  line-height: 1.2;
}

.bg-chart-box {
  position: relative;
  height: 280px;
}

/* A "Why?" explanation in the move viewer */
.bg-why-text {
  font-size: 0.95em;
}

/* The move viewer is cream, so its button and facts are in the wood colour */
.bg-why-button {
  color: var(--bg-wood);
  border-color: var(--bg-wood);
}

.bg-why-button:hover,
.bg-why-button:focus {
  background-color: var(--bg-wood);
  color: var(--bg-cream);
}

.bg-why-facts {
  font-size: 0.8em;
  color: var(--bg-wood);
}

.bg-why-facts summary {
  cursor: pointer;
}

/* "Your common errors" on Account: each theme's share as a bar */
.bg-error-row {
  margin-bottom: 8px;
  font-size: 0.9em;
}

.bg-error-bar {
  height: 6px;
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.2);
}

.bg-error-bar div {
  height: 100%;
  border-radius: 3px;
  background-color: var(--bg-gold);
}

/* A very lucky or unlucky roll in the game summary */
.bg-luck-good {
  color: #8FD694;
}

.bg-luck-bad {
  color: #E8A0A0;
}

.bg-trend-toggle,
.bg-trend-toggle:hover {
  color: var(--bg-muted);
  text-decoration: none;
}

.bg-topup-button.active,
.bg-choice-button.active {
  color: var(--bg-felt-dark);
  background-color: var(--bg-gold);
  border-color: var(--bg-gold);
}

.bg-hint-error {
  color: #F4A6A6 !important;
}

#account_paypal_button_container {
  max-width: 500px;
  margin: 0 auto;
}

/* Play: the match score, and cube notes that never block a move */
.bg-scoreboard {
  text-align: center;
  color: var(--bg-gold);
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
}

.bg-scoreboard:empty {
  display: none;
}

.bg-notice {
  border: 1px solid var(--bg-gold);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.6rem;
  font-size: 0.9rem;
  background-color: var(--bg-felt-dark);
}

/* Viewing a move from the game summary */
.btn.bg-view-button {
  color: var(--bg-gold);
  padding: 0 0.35rem;
}

.bg-view-key {
  font-size: 0.9em;
  margin-top: 0.4rem;
}

.bg-key-dot {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  margin-right: 0.4em;
  border: 1px solid var(--bg-wood);
}

/* Analyse: the home board corners, laid out like the board */
.bg-corner-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.bg-corner-buttons .btn {
  display: flex;
  height: 1.4rem;
  padding: 0.2rem;
}

/* A small mark in the button's own corner */
.bg-corner-mark {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 2px;
  background: currentColor;
}

#analyse_home_top_right, #analyse_home_bottom_right {
  justify-content: flex-end;
}

#analyse_home_bottom_left, #analyse_home_bottom_right {
  align-items: flex-end;
}

/* Account: the links under the level graph, wrapping onto a new line on a phone */
.bg-graph-toggles {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1rem;
  row-gap: 0.25rem;
}

/* Puzzles: the difficulty as dots, the theme's reveal link, and the player's own row in the top moves */
.bg-difficulty {
  display: inline-flex;
  gap: 4px;
  margin-right: 0.4rem;
  vertical-align: middle;
}

.bg-difficulty-dot {
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  border: 1px solid var(--bg-gold);
}

.bg-difficulty-on {
  background-color: var(--bg-gold);
}

.btn.bg-reveal-button {
  color: var(--bg-gold);
  vertical-align: baseline;
}

.bg-puzzle-yours td {
  color: var(--bg-gold);
  font-weight: bold;
}