/* ============================================================
   nback — app-specific styles, loaded after the shared
   common/assets/style.css. Page ground, type, the .content
   column, .sidebar and footer all come from the shared sheet;
   this file styles the game UI and bridges the app's legacy
   tokens onto the common palette.
   ============================================================ */

/* ── Token bridge ────────────────────────────────────────────
   The game CSS below is keyed on the app's original
   solarized/fixf variable names. Redefine them in terms of the
   common palette so the game inherits the studio colours with
   no rule-by-rule rewrite. (Candidate for later inlining.) */
:root {
  --fixf-background:  var(--bg-page);
  --fixf-darkblue:    var(--accent-blue);
  --solarized-yellow: var(--accent-yellow);
  --solarized-orange: var(--accent-red);
  --solarized-blue:   var(--accent-blue);
  --solarized-base2:  var(--bg-beige);
  --solarized-base03: var(--fg-brown-dk);
  --solarized-base02: var(--fg-black);
  --solarized-base0:  var(--border-table);
}

/* Headings adopt the shared sheet — no local font/colour override. */

/* For mobile devices */
@media (max-width: 1000px) {
  .game-container {
    padding: 0.5em;
    margin: 0.5em;
  }

  .close-button {
    font-size: 1.75em;
  }

  button {
    font-size: 0.7em;
  }

  .game-grid-cell,
  .game-grid-cell-empty {
    font-size: 6.5em;
  }
}

/* For larger screens */
@media (min-width: 1001px) {
  .game-container {
    padding: 1em;
    margin: 1em;
    width: 90%;
    margin-top: 2em;
  }

  .close-button {
    font-size: 1.25em;
  }

  button {
    font-size: 0.8em;
  }

  .game-grid-cell,
  .game-grid-cell-empty {
    font-size: 5.2em;
  }
}

button,
.eg-button {
  background-color: var(--solarized-base2);
  border: 1px solid var(--solarized-yellow);
  border-radius: 5px;
  color: var(--solarized-base03);
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 0.8em;
  margin: 0.5em;
  min-width: 5em;
  padding: 0.75em;
  text-transform: uppercase;
}

button[disabled=true],
button[disabled="disabled"] {
  background-color: var(--solarized-base0);
}

.caption {
  color: var(--solarized-base03);
  font-size: 0.8em;
  font-weight: bold;
  margin-top: 0.5em;
  text-align: center;
}

p {
  line-height: 1.75em;
}

.cfg-container {
  margin-bottom: 1em;
}

.cfg-input {
  padding-left: 1em;
  text-align: left;
}

.cfg-input input[type="number"] {
  padding: 0.2em;
}

.cfg-label {
  /* left-aligned (default) */
}

.cfg-table {
  margin-bottom: 2em;
  margin-top: 2em;
}

.close-button {
  background-color: var(--fixf-background);
  border: 0;
  color: var(--solarized-yellow);
  margin: 0;
  min-width: 1em;
  padding: 0;
}

/* Refresh / close icons — sized in em so both render at identical size. */
.btn-icon {
  vertical-align: middle;
}

.eg-button {
  cursor: text;
  margin: 0em;
  padding-bottom: 0.25em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-top: 0.5em;
  vertical-align: baseline;
}

.game-body {
  align-items: center;
  display: flex;
  flex-direction: column;
}

.game-container {
  border: 1px solid var(--solarized-yellow);
  border-radius: 5px;
  text-align: center;
}

.game-grid {
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 3em;
  margin-top: 2em;
}

.game-grid-cell,
.game-grid-cell-empty {
  border: 1px solid var(--solarized-blue);
  font-family: 'PT Mono', 'Courier New', Courier, monospace;
  width: 1.5em;
  height: 1.5em;
  padding: 0;
  line-height: 1;
  text-align: center;
  vertical-align: middle;
}

/* Fade in opacity for game grid cells */
.game-grid-cell {
  transition: color 0.5s ease-in;
}

.game-grid-cell-empty {
  color: var(--fixf-background);
}

.game-header {
  border: 0;
  margin-bottom: 2em;
  padding: 0;
  text-align: right;
}

.game-over-title {
  color: var(--solarized-orange);
  font-size: 3.5em;
  font-weight: bolder;
  padding: 1em;
  text-align: center;
}

.game-stats-name {
  font-weight: bold;
  min-width: 5em;
  padding-right: 2em;
  text-align: right;
}

.game-stats-value {
  min-width: 5em;
  text-align: left;
}

.menu-container {
  /* Align with the top-level heading (no side indent); extra space above. */
  margin: 2.5em 0 2em;
}

/* Statistics shown in a shared-style .aside panel (from common/style.css),
   but full-width and left-aligned to fit the menu column. */
.stats-aside {
  max-width: 100%;
  margin: 1.5em 0 0;
}

.radio-group {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
}

.radio-label {
  align-items: center;
  color: var(--solarized-base03);
  cursor: pointer;
  display: flex;
  font-size: 0.9em;
  gap: 0.5em;
  text-align: left;
}

.radio-label input[type="radio"] {
  accent-color: var(--solarized-yellow);
  cursor: pointer;
  margin: 0;
}

.radio-label:hover {
  color: var(--solarized-base02);
}


.description {
  text-align: justify;
}


.chart {
  .axis.left {
    .title {
      transform: rotate(270deg);
    }
  }

  .axis.right {
    .title {
      transform: rotate(90deg);
    }
  }
}


.chart {
  max-width: 1332px;

  .axis {
    .title {
      color: var(--solarized-base03);
      font-size: 0.75em;
      padding: 0.25em;
    }

    .text {
      font-size: 0.75em;
    }

    .line {
      stroke: var(--solarized-base0);
    }

    .tick {
      stroke: var(--solarized-base0);
    }
  }

  .x-axis {
    .text {
      text-anchor: start;
      transform: rotate(45deg);
    }

    .title {
      transform: translatey(2em);
    }
  }

  .series.series {
    stroke: var(--solarized-orange);
    stroke-width: 2px;

    text {
      stroke: none;
      stroke-width: 1px;
    }
  }

  .series.bar-chart {
    stroke-width: 30px;
  }
}