/* pyramidsolitaire: rules used only by the pyramidsolitaire pages (loaded after base.css). */
/* Pyramid Solitaire board: stock/waste/redeal row above a 7-row card
   triangle. The triangle itself uses absolute positioning sized in
   pixels by pyramidsolitaire-app.js's layoutPyramidBoard (measure the
   container's width, then set an explicit pixel height and per-card
   left/top/width/height) rather than CSS aspect-ratio, which isn't
   supported on the older E-Ink browsers this app targets. Lower rows
   get a higher z-index in that same JS so they visually sit in front,
   overlapping the row above - matching how a real card pyramid looks.
   Suits are told apart by glyph shape (spade/club vs. heart/diamond),
   never by red/black coloring, matching Klondike/FreeCell. All 28
   pyramid cards are dealt face-up (the standard rule for this game),
   so a covered card just gets a dimmed, non-interactive look instead
   of a hatched face-down back like the stock pile does. */
.pyramidsolitaire-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 640px;
  margin: 0 auto 0.6rem;
  flex-wrap: wrap;
}

/* Flexbox `gap` fallback: margin-based spacing instead, since some E-Ink browsers (Tolino confirmed) don't support `gap` on a flex container and render items with zero space between them. */
.pyramidsolitaire-top-row > * {
  margin: 0 1rem 1rem 0;
}

.pyramidsolitaire-top-row > *:last-child {
  margin-right: 0;
}

.pyramidsolitaire-stockwaste {
  display: flex;
}

/* Flexbox `gap` fallback: margin-based spacing instead, since some E-Ink browsers (Tolino confirmed) don't support `gap` on a flex container and render items with zero space between them. */
.pyramidsolitaire-stockwaste > * {
  margin: 0 0.3rem 0.3rem 0;
}

.pyramidsolitaire-stockwaste > *:last-child {
  margin-right: 0;
}

.pyramidsolitaire-cell {
  width: 2.6rem;
  height: 3.6rem;
  border: var(--border-width) solid var(--border);
  border-radius: 4px;
  background: #fff;
  font-weight: 700;
  font-size: 1rem;
  box-sizing: border-box;
  cursor: pointer;
}

.pyramidsolitaire-cell:disabled {
  cursor: default;
}

.pyramidsolitaire-card-back {
  background: repeating-linear-gradient(45deg, #fff, #fff 4px, var(--border) 4px, var(--border) 5px);
}

.pyramidsolitaire-board {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  box-sizing: border-box;
}

.pyramidsolitaire-card {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--border-width) solid var(--border);
  border-radius: 4px;
  background: #fff;
  box-sizing: border-box;
  font-weight: 700;
  font-size: 0.85rem;
  font-size: clamp(0.6rem, 2.3vw, 0.9rem);
  padding: 0;
  cursor: pointer;
}

/* Noch blockierte Karten: gestrichelter Rahmen statt Abblenden. Ihre
   Werte muss man zum Vorausplanen lesen können, und halbtransparente
   graue Schrift auf grauem Grund verschwimmt auf E-Ink. */
.pyramidsolitaire-card-covered,
.pyramidsolitaire-card-covered:disabled {
  border-style: dashed;
  color: var(--text);
  opacity: 1;
  cursor: default;
}

.pyramidsolitaire-card-selected {
  outline: 3px solid var(--border);
  outline-offset: 1px;
}

.pyramidsolitaire-card-gone {
  display: none;
}

.pyramidsolitaire-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8em;
  height: 1.4em;
  border: 2px solid var(--border);
  border-radius: 3px;
  box-sizing: border-box;
  font-size: 0.65rem;
  font-weight: 700;
}

/* Hint (task 185): the card(s) to remove, or the stock. */
.pyramidsolitaire-hint {
  outline: 3px dashed var(--text);
  outline-offset: -3px;
}