/*
 * Page frame: header, the welcome screen and the layouts of a puzzle on screen.
 *   >= 1360px   three columns: list of puzzles | summary and board | side panel
 *   >= 768px    two columns: summary and board, then the list of puzzles | the side panel
 *   <  768px    one column: board, side panel, then the list of puzzles
 * Column sizes and breakpoints are those of Sudoku Generator, so the two pages share one layout.
 */

:root {
  --sg-layout-max-width: 120rem;
}

/* Room for the scrollbar whether or not the page scrolls, so the layout is as wide as the generator's. */
html {
  scrollbar-gutter: stable;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  display: inline-block;
  flex: none;
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--brand {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--sg-color-accent);
}

.icon--xl {
  width: 3rem;
  height: 3rem;
}

/* ---- Header ---- */
.app-header {
  background: var(--sg-color-surface);
  border-bottom: 1px solid var(--sg-color-divider);
}

.app-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sg-space-2) var(--sg-space-4);
  max-width: var(--sg-layout-max-width);
  margin-inline: auto;
  padding: var(--sg-space-3) var(--sg-space-4);
}

.app-brand {
  display: flex;
  align-items: center;
  gap: var(--sg-space-3);
  min-width: 0;
}

.app-title {
  font-size: var(--sg-font-size-xl);
  letter-spacing: -0.01em;
}

.app-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sg-space-2) var(--sg-space-3);
}

.noscript {
  margin: var(--sg-space-4);
  padding: var(--sg-space-3) var(--sg-space-4);
  border: 1px solid var(--sg-color-danger);
  border-radius: var(--sg-radius-2);
  background: var(--sg-color-danger-bg);
}

/* ---- Footer ---- */
.app-footer {
  max-width: var(--sg-layout-max-width);
  margin-inline: auto;
  padding: var(--sg-space-2) var(--sg-space-4) var(--sg-space-4);
  color: var(--sg-color-text-muted);
  font-size: var(--sg-font-size-sm);
  text-align: center;
}

.app-footer__copy::after {
  content: "\00b7";
  display: inline-block;
  margin-inline: var(--sg-space-2);
}

.app-footer__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.app-footer__link:hover {
  color: var(--sg-color-accent);
}

/* ---- Main ---- */
.app-main {
  display: flex;
  flex-direction: column;
  gap: var(--sg-space-4);
  max-width: var(--sg-layout-max-width);
  margin-inline: auto;
  padding: var(--sg-space-4);
  min-width: 0;
}

/* ---- Welcome (no puzzle on the board) ---- */
.welcome {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sg-space-4);
  align-items: start;
}

.welcome__card {
  display: flex;
  flex-direction: column;
  gap: var(--sg-space-3);
  padding: var(--sg-space-5);
  border: 1px solid var(--sg-color-divider);
  border-radius: var(--sg-radius-3);
  background: var(--sg-color-surface);
  box-shadow: var(--sg-shadow-1);
}

.welcome__title {
  font-size: var(--sg-font-size-xl);
}

.welcome__note {
  color: var(--sg-color-text-muted);
  font-size: var(--sg-font-size-sm);
}

.welcome__steps {
  padding-inline-start: var(--sg-space-5);
  list-style: decimal;
}

.welcome__steps li + li {
  margin-top: var(--sg-space-2);
}

.welcome__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sg-space-2) var(--sg-space-3);
}

.welcome__recent:empty {
  display: none;
}

@media (min-width: 60rem) {
  .welcome {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }

  .welcome:has(.welcome__recent:empty) {
    grid-template-columns: minmax(0, 46rem);
    justify-content: center;
  }
}

/* ---- A puzzle on screen ---- */
.player-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "board"
    "side"
    "recent";
  gap: var(--sg-space-4);
  align-items: start;
}

.panel {
  padding: var(--sg-space-4);
  border: 1px solid var(--sg-color-divider);
  border-radius: var(--sg-radius-3);
  background: var(--sg-color-surface);
  box-shadow: var(--sg-shadow-1);
}

.panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sg-space-2);
  margin-bottom: var(--sg-space-3);
}

.panel__title {
  font-size: var(--sg-font-size-lg);
}

.empty-hint {
  padding: var(--sg-space-3) var(--sg-space-4);
  border: 1px dashed var(--sg-color-border);
  border-radius: var(--sg-radius-3);
  background: var(--sg-color-surface);
  color: var(--sg-color-text-muted);
  font-size: var(--sg-font-size-sm);
}

.panel--recent {
  grid-area: recent;
  min-width: 0;
}

.board-area {
  grid-area: board;
  display: flex;
  flex-direction: column;
  gap: var(--sg-space-3);
  min-width: 0;
}

/* Summary above the board ("<variant> - <level> (Seed: <seed>)" and the description of the variant), the
   puzzle actions at the top right. */
.main-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sg-space-2) var(--sg-space-3);
}

.main-head__titles {
  flex: 1 1 14rem;
  min-width: 0;
}

.main-actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sg-space-2);
  margin-inline-start: auto;
}

.main-head__title {
  font-size: var(--sg-font-size-lg);
  overflow-wrap: anywhere;
}

.main-head__subtitle {
  margin: var(--sg-space-1) 0 0;
  color: var(--sg-color-text-muted);
  font-size: var(--sg-font-size-sm);
}

.main-head__subtitle:empty {
  display: none;
}

.board-frame {
  position: relative;
  display: flex;
  justify-content: center;
  padding: var(--sg-space-3);
  border: 1px solid var(--sg-color-divider);
  border-radius: var(--sg-radius-3);
  background: var(--sg-color-surface);
  box-shadow: var(--sg-shadow-1);
}

.board-svg {
  width: 100%;
  height: auto;
  max-height: 78vh;
}

.board-legend:not(:empty) {
  padding: var(--sg-space-2) var(--sg-space-4);
  border: 1px solid var(--sg-color-divider);
  border-radius: var(--sg-radius-3);
  background: var(--sg-color-surface);
}

.side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  gap: var(--sg-space-3);
  min-width: 0;
}

/* >= 768px: board | side panel, the list of puzzles under the board. */
@media (min-width: 768px) {
  .player-layout {
    grid-template-columns: minmax(0, 1fr) clamp(16rem, 30vw, 21.25rem);
    grid-template-areas:
      "board side"
      "recent side";
  }

  .side {
    position: sticky;
    top: var(--sg-space-4);
    max-height: calc(100vh - 2 * var(--sg-space-4));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2px;
  }

  .board-svg {
    max-height: calc(100vh - 15.5rem);
  }
}

/* >= 1360px: the list of puzzles gets a column of its own on the left. */
@media (min-width: 1360px) {
  .player-layout {
    grid-template-columns: clamp(19rem, 21vw, 23rem) minmax(0, 1fr) clamp(16rem, 24vw, 21.25rem);
    grid-template-areas: "recent board side";
  }

  .panel--recent {
    position: sticky;
    top: var(--sg-space-4);
    max-height: calc(100vh - 2 * var(--sg-space-4));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ---- Status line ---- */
.status-row:has(.status-row__text:empty) {
  display: none;
}

.status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sg-space-1) var(--sg-space-2);
  min-height: 2.5rem;
  padding: var(--sg-space-2) var(--sg-space-4);
  border: 1px solid var(--sg-color-divider);
  border-radius: var(--sg-radius-3);
  background: var(--sg-color-surface-2);
}

.status-row__label {
  color: var(--sg-color-text-muted);
  font-size: var(--sg-font-size-sm);
  font-weight: 600;
}

.status-row__text {
  flex: 1 1 12rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---- Drag and drop overlay ---- */
.drop-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--sg-z-modal);
  display: grid;
  place-items: center;
  padding: var(--sg-space-4);
  background: var(--sg-color-backdrop);
  pointer-events: none;
}

.drop-overlay__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sg-space-2);
  max-width: 28rem;
  padding: var(--sg-space-6);
  border: 3px dashed var(--sg-color-accent);
  border-radius: var(--sg-radius-3);
  background: var(--sg-color-surface);
  text-align: center;
}

.drop-overlay__title {
  font-size: var(--sg-font-size-lg);
  font-weight: 700;
}

.drop-overlay__hint {
  color: var(--sg-color-text-muted);
}

/* ---- Narrow screens ---- */
@media (max-width: 599.98px) {
  .app-title {
    font-size: var(--sg-font-size-lg);
  }
}

/* Title and the buttons share one row; language and theme live in the Settings dialog. */
@media (max-width: 767.98px) {
  .app-header__inner {
    flex-wrap: nowrap;
    gap: var(--sg-space-2);
    padding: var(--sg-space-2) var(--sg-space-3);
  }

  .app-brand {
    flex: 1 1 auto;
  }

  .app-tools {
    flex: none;
    flex-wrap: nowrap;
    gap: var(--sg-space-1);
  }

  #lang-switch,
  #theme-switch {
    display: none;
  }

  /* Icon-only buttons (the header buttons, Share and Import, and the Play / Pause / Reset of the game); the
     labels stay for screen readers (the same as .visually-hidden). */
  .app-tools .btn__label,
  .main-actions .btn__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .app-tools .btn {
    padding-inline: var(--sg-space-2);
  }

  /* The puzzle actions sit above the heading, right-aligned; the game buttons of play.css join them on the
     left. */
  .main-actions {
    order: -1;
    flex: 1 1 100%;
    gap: var(--sg-space-1);
    margin-inline-start: 0;
  }

  .main-actions .btn {
    width: 2.25rem;
    min-height: 2.25rem;
    gap: var(--sg-space-1);
    padding: 0;
    font-size: var(--sg-font-size-sm);
  }

  .main-actions .btn .icon {
    width: 1.1em;
    height: 1.1em;
  }

  .app-main {
    padding: var(--sg-space-3);
  }

  /* Room for the bar of keys fixed to the bottom while a puzzle is in play (set by play.js). */
  body {
    padding-bottom: var(--play-keys-height, 0px);
  }

  .welcome__card {
    padding: var(--sg-space-4);
  }
}