/* Siegeometry's solo modes (#77; the TS game's siegeometry.css "tutorial" and "challenges"):
   the Tutorial / Challenges row on the setup screen with the first-timer hint, the challenge
   list with stars, the coach panel in the match and the solo results. Colours are app.css's. */

/* ------------------------------------------------------------ setup screen */

.solo-new {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6em 1em;
  margin: 0 0 1em;
  padding: 0.55em 0.9em;
  border-radius: 0.8em;
  background: rgba(247, 197, 72, 0.12);
  border: 2px solid rgba(247, 197, 72, 0.55);
  font-weight: 800;
}

.solo-new b {
  color: #f7c548;
}

.solo-mode.hot {
  border-color: #f7c548;
}

.theme-paper .solo-new b {
  color: #8a5a00;
}

.theme-paper .solo-mode.hot {
  border-color: #b07a00;
}

/* ------------------------------------------------------------ challenge list */

.screen .sg-challenges {
  box-sizing: border-box;
  width: 100%;
  max-width: 72em;
  margin: 0 auto;
}

.sg-challenges header {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-bottom: 1em;
}

.screen .sg-challenges h2 {
  margin: 0;
  font-size: 2em;
  font-weight: 900;
}

.sg-ch-total {
  margin-left: auto;
  font-size: 1.3em;
  font-weight: 900;
  color: #f7c548;
}

.theme-paper .sg-ch-total {
  color: #8a5a00;
}

.sg-ch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5em, 1fr));
  gap: 0.8em;
}

.sg-ch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3em;
  min-height: 11em;
  padding: 0.9em;
  border-radius: 0.9em;
  border: 2px solid var(--ui-line);
  background: var(--ui);
  color: var(--ui-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sg-ch:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.sg-ch.locked {
  opacity: 0.45;
  cursor: not-allowed;
}

.sg-ch-num {
  font-size: max(var(--fs-small), 0.8em);
  font-weight: 900;
  color: var(--ui-dim);
}

.sg-ch-name {
  font-size: 1.15em;
  font-weight: 900;
}

.sg-ch-goal {
  font-weight: 800;
}

.sg-ch-brief {
  font-size: max(var(--fs-small), 0.85em);
  font-weight: 700;
  color: var(--ui-dim);
}

.sg-ch-stars {
  margin-top: auto;
  font-size: 1.3em;
  letter-spacing: 0.1em;
}

/* Hollow stars stay visible (an outline), earned ones are filled gold: readable without colour. */
.sg-ch-stars i {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 0.06em var(--ui-dim);
}

.sg-ch-stars i.on {
  color: #f7c548;
  -webkit-text-stroke: 0.04em rgba(0, 0, 0, 0.3);
}

.sg-ch-stars.large {
  font-size: 2.6em;
}

.sg-ch-help {
  margin-top: 1em;
  text-align: center;
}

/* ------------------------------------------------------------ in the match */

.sg-coach {
  /* Top left (as the TS game): clear of the clock, the pause button and the middle of the board.
     It is a HUD box (data-hud="css"): the camera fits the board beside it, on the side named
     here, so it never covers a building (#70, #72 must 5). */
  --hud-side: left;
  position: absolute;
  top: 1.2em;
  left: 1.4em;
  width: min(24em, 32vw);
  padding: 0.9em 1.2em;
  border-radius: 1em;
  background: var(--ui);
  border: 2px solid var(--ui-line);
  backdrop-filter: blur(8px);
  box-shadow: 0 1em 3em rgba(0, 0, 0, 0.3);
  pointer-events: auto;
  z-index: 2;
}

.sg-coach.hidden {
  display: none;
}

.sg-coach-head {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 1.15em;
}

.sg-coach-head .icon {
  display: grid;
}

.sg-coach-head .step {
  margin-left: auto;
  color: var(--ui-dim);
  font-size: max(var(--fs-small), 0.7em);
  font-weight: 800;
}

.sg-coach p {
  margin: 0.4em 0 0;
  line-height: 1.4;
  font-weight: 700;
}

.sg-coach .tip {
  color: #ffb86b;
}

.sg-coach .rules,
.sg-ch-result .rules {
  color: var(--ui-dim);
  font-size: max(var(--fs-small), 0.85em);
}

.sg-coach-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  margin-top: 0.7em;
}

.sg-coach-actions button {
  min-height: 2.4em;
  padding: 0.4em 0.9em;
  border-radius: 0.6em;
  border: 2px solid var(--ui-line);
  background: transparent;
  color: var(--ui-text);
  font: inherit;
  font-weight: 900;
  font-size: max(var(--fs-small), 0.85em);
  cursor: pointer;
}

.sg-coach-actions button.primary {
  background: var(--ui-text);
  color: #1d1a26;
  border-color: transparent;
}

.sg-coach-actions button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.sg-ch-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2em;
  margin: 0.4em 0 1em;
}

.sg-solo-next {
  margin: 0.2em 0 1em;
  font-weight: 800;
}

/* Phones upright: the coach goes across the top, under the bar and the chip strip
   (hud-layout.css), and the board fits below it. */
@media (max-width: 599px) and (orientation: portrait) {
  .sg-coach {
    --hud-side: top;
    top: calc(var(--sa-t, 0px) + var(--bar-h, 44px) + var(--strip-h, 28px) + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - var(--sa-l, 0px) - var(--sa-r, 0px) - 16px);
    box-sizing: border-box;
    padding: 0.6em 0.8em;
    font-size: max(var(--fs-small), 0.85em);
  }
}

/* Phones on their side: little height, so a small coach on the left, under the bar and beside
   the players' side strip (hud-layout.css); the board fits to its right. */
@media (max-height: 499px) and (orientation: landscape) {
  .sg-coach {
    top: calc(var(--sa-t, 0px) + var(--bar-h, 40px) + 6px);
    left: calc(var(--sa-l, 0px) + 72px);
    width: min(17em, 30vw);
    box-sizing: border-box;
    max-height: calc(100% - var(--sa-t, 0px) - var(--bar-h, 40px) - var(--sa-b, 0px) - 12px);
    overflow: auto;
    padding: 0.5em 0.7em;
    font-size: max(var(--fs-small), 0.75em);
  }
}