/* Solitaire 98. 98.css supplies the window chrome; everything here is the
   table, the cards, and the bits of Win98 furniture 98.css does not ship
   (menus, dialogs). */

:root {
  --table-green: #008000;
  --win-face: #c0c0c0;
  --win-shadow: #808080;
  --win-dark: #000000;
  --win-light: #ffffff;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #008080;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  padding-top: max(6px, env(safe-area-inset-top));
  padding-bottom: max(6px, env(safe-area-inset-bottom));
  -webkit-tap-highlight-color: transparent;
}

/* ------------------------------------------------------------------ shell */

.window.app {
  display: flex;
  flex-direction: column;
  width: min(100%, 760px);
  height: 100%;
  max-height: 760px;
  min-height: 0;
}

.title-icon {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
  vertical-align: -3px;
  margin-right: 3px;
}

.app-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  padding: 0;
}

/* ----------------------------------------------------------------- menus */

.menubar {
  position: relative;
  z-index: 50;
  display: flex;
  padding: 1px 2px;
  background: var(--win-face);
  border-bottom: 1px solid var(--win-shadow);
}

.menu {
  position: relative;
}

.menubar .menu-title {
  min-width: 0;
  min-height: 0;
  padding: 3px 8px;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  box-shadow: none;
  /* 98.css paints button text with a shadow over transparent colour. Menu
     titles invert to white when open, so the shadow has to go. */
  text-shadow: none;
}

.menubar .menu-title:active,
.menubar .menu-title:focus {
  outline: none;
  box-shadow: none;
}

.menu.open .menu-title {
  background: #000080;
  color: var(--win-light);
}

.menu-popup {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  min-width: 178px;
  margin: 0;
  padding: 2px;
  list-style: none;
  background: var(--win-face);
  border: 1px solid;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light);
  box-shadow: 1px 1px 0 1px var(--win-shadow);
}

.menu-popup[hidden] {
  display: none;
}

.menu-popup li {
  position: relative;
  padding: 4px 12px 4px 22px;
  white-space: nowrap;
  cursor: default;
}

.menu-popup li:not(.sep):hover,
.menu-popup li:not(.sep):active {
  background: #000080;
  color: var(--win-light);
}

.menu-popup li.disabled {
  color: var(--win-shadow);
  text-shadow: 1px 1px 0 var(--win-light);
}

.menu-popup li.disabled:hover {
  background: transparent;
  color: var(--win-shadow);
}

.menu-popup li.sep {
  height: 0;
  margin: 3px 2px;
  padding: 0;
  border-top: 1px solid var(--win-shadow);
  border-bottom: 1px solid var(--win-light);
}

.accel {
  float: right;
  margin-left: 24px;
}

.check {
  position: absolute;
  left: 8px;
  visibility: hidden;
}

.menu-popup li.checked .check {
  visibility: visible;
}

/* --------------------------------------------------------------- toolbar */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: var(--win-face);
  border-bottom: 1px solid var(--win-shadow);
}

.toolbar button {
  min-width: 76px;
  min-height: 28px;
}

.toolbar button[hidden] {
  display: none;
}

/* ------------------------------------------------------------- playfield */

.playfield {
  flex: 1;
  min-height: 0;
  padding: 2px;
  background: var(--win-face);
}

.board {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--table-green);
  border: 2px solid;
  border-color: var(--win-shadow) var(--win-light) var(--win-light) var(--win-shadow);
  touch-action: none;
}

/* ----------------------------------------------------------------- cards */

.card,
.slot {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--card-w);
  height: var(--card-h);
  background-image: var(--sheet);
  background-repeat: no-repeat;
  background-size: calc(var(--card-w) * var(--sheet-cols))
    calc(var(--card-h) * var(--sheet-rows));
  background-position: calc(-1 * var(--col) * var(--card-w))
    calc(-1 * var(--row) * var(--card-h));
  image-rendering: var(--card-smoothing, auto);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

/* Every face-down card shows the same tile, so the chosen back and its
   animation are one pair of properties on the board. */
.card.face-down {
  background-position: calc(-1 * var(--back-col) * var(--card-w))
    calc(-1 * var(--back-row) * var(--card-h));
}

.card {
  transition: transform 130ms ease-out;
  will-change: transform;
}

.card.dragging,
.no-anim .card {
  transition: none;
}

.slot {
  z-index: 0;
}

.slot.hidden {
  display: none;
}

.card.target,
.slot.target {
  outline: 2px solid var(--win-light);
  outline-offset: -1px;
}

/* ------------------------------------------------------------ status bar */

#sb-message {
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#sb-counters {
  flex: 0 0 auto;
  font-weight: bold;
  text-align: right;
}

/* -------------------------------------------------------- win animation */

.win-canvas {
  position: absolute;
  inset: 0;
  z-index: 500;
}

.win-canvas.hidden {
  display: none;
}

/* ---------------------------------------------------------------- modal */

.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 12px;
  background: rgba(0, 0, 0, 0.35);
}

.modal.hidden {
  display: none;
}

.window.dialog {
  width: min(94vw, 360px);
}

.window.dialog .window-body {
  font-size: 12px;
  line-height: 1.5;
}

.window.dialog p {
  margin: 0 0 8px;
}

.window.dialog p:last-of-type {
  margin-bottom: 0;
}

.window.dialog dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  margin: 0;
}

.window.dialog dd {
  margin: 0;
  text-align: right;
  font-weight: bold;
}

.dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 14px;
}

.dialog-buttons button {
  min-width: 76px;
  min-height: 26px;
}

/* ---------------------------------------------------------- deck picker */

/* The deck picker holds 23 swatches, so it gets its own width rather than
   squeezing into the size the About box wants. */
.window.dialog.dialog-deck {
  width: min(96vw, 580px);
}

.dialog-deck .window-body {
  font-size: 13px;
}

/* Four rows of swatches plus two group headings measure about 615px, so the
   cap has to clear that or the picker always shows a scrollbar. The vh term
   still takes over on a short window. */
.deck-groups {
  max-height: min(78vh, 680px);
  overflow-y: auto;
  padding-right: 6px;
}

.deck-group-label {
  margin: 14px 0 8px;
  font-size: 14px;
  font-weight: bold;
}

.deck-group-label:first-child {
  margin-top: 0;
}

.deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 10px;
}

.deck-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 3px;
  background: none;
  border: none;
  box-shadow: none;
  min-width: 0;
  min-height: 0;
  font: inherit;
  color: inherit;
  text-shadow: none;
  cursor: pointer;
}

.deck-swatch {
  --sw: 72px;
  /* Tile aspect is the native 71 x 96. The sheet has to be scaled by the tile
     height, not the tile width, or every row lands off by a growing amount. */
  --sh: calc(var(--sw) * 96 / 71);
  width: var(--sw);
  height: var(--sh);
  background-image: var(--sheet);
  background-repeat: no-repeat;
  background-size: calc(var(--sw) * var(--sheet-cols))
    calc(var(--sh) * var(--sheet-rows));
  background-position: calc(-1 * var(--col) * var(--sw))
    calc(-1 * var(--row) * var(--sh));
  image-rendering: var(--card-smoothing, auto);
  outline: 2px solid transparent;
  outline-offset: 1px;
}

.deck-option[aria-pressed="true"] .deck-swatch {
  outline-color: #000080;
}

.deck-option[aria-pressed="true"] .deck-name {
  background: #000080;
  color: var(--win-light);
}

.deck-name {
  font-size: 12px;
  padding: 0 2px;
  text-align: center;
  line-height: 1.3;
}

.deck-name .moves {
  display: block;
  font-size: 11px;
  opacity: 0.75;
}

/* ------------------------------------------------- compact / phone layout */

/* Board-side proportions live in src/layout.js; this only moves the
   furniture. Keep the width in step with COMPACT_MAX_WIDTH there. */
.stats {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  display: none;
  justify-content: space-between;
  align-items: flex-start;
  /* main.js grows the top padding so the first row of cards lands a fifth of
     the way down the viewport; the readout rides in the space that opens up. */
  padding: var(--stats-pad-top, 14px) 10px 8px;
  color: var(--win-light);
  pointer-events: none;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.stat-right {
  text-align: right;
}

.stat-label {
  font-size: 11px;
  opacity: 0.85;
}

.stat-value {
  font-size: 21px;
  font-weight: bold;
}

@media (max-width: 620px) {
  body {
    padding: 0;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .window.app {
    max-height: none;
  }

  .stats {
    display: flex;
  }

  /* The score and time move onto the table, so the status bar is redundant. */
  .status-bar {
    display: none;
  }

  /* Controls belong under the thumb, not above the cards. */
  .app-body {
    flex-direction: column;
  }

  .menubar {
    order: 1;
  }

  .playfield {
    order: 2;
  }

  .toolbar {
    order: 3;
    gap: 6px;
    padding: 6px;
    border-top: 1px solid var(--win-shadow);
    border-bottom: none;
  }

  .toolbar button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 46px;
    padding: 0 4px;
  }

  .deck-swatch {
    --sw: 76px;
  }

  .deck-groups {
    max-height: 62vh;
  }
}

/* Short viewports (phone landscape) get their vertical space back. */
@media (max-height: 520px) {
  body {
    padding: 0;
  }

  .window.app {
    max-height: none;
  }

  .toolbar button {
    min-height: 24px;
  }

  /* Vertical room is the constraint here, so the readout stays tight against
     the top; main.js clamps its own padding to the board height. */
  .stat-value {
    font-size: 16px;
  }
}