/* Rules pages for the five play-alone classics — /arcade/snake, /invaders,
   /pinball, /2048, /solitaire. Loaded after arcade-game.css, which carries
   the facts strip, the numbered rules, .figs and the questions. This file is
   only the small static diagrams those five pages draw and the points table.
   Nothing here is interactive. */

/* ── A points table ──────────────────────────────────────────────── */
.pts {
  width: 100%;
  max-width: 34rem;
  border-collapse: collapse;
  margin: 0 0 1.2rem;
  font-size: .95rem;
}
.pts th, .pts td {
  padding: .6rem 0;
  border-bottom: 1px solid var(--cat-line);
  text-align: left;
  vertical-align: baseline;
  font-weight: 400;
  color: var(--cat-text-2);
}
.pts td:last-child, .pts th:last-child {
  text-align: right;
  padding-left: 1rem;
  white-space: nowrap;
  font-family: var(--cat-mono);
  font-variant-numeric: tabular-nums;
  color: var(--cat-text);
}
.pts thead th {
  font-family: var(--cat-mono);
  font-size: .6rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cat-text-3);
}
.pts tr.sum td { border-bottom: none; font-weight: 650; color: var(--cat-text); }
.pts .neg { color: var(--cat-accent); }

/* ── Snake: the 15 × 15 board, drawn as a ruled square ───────────── */
.sn {
  position: relative;
  aspect-ratio: 1;
  max-width: 300px;
  margin: 0 0 .7rem;
  border: 1px solid var(--cat-line-2);
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--cat-panel);
  background-image:
    linear-gradient(var(--cat-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--cat-line) 1px, transparent 1px);
  background-size: calc(100% / 15) calc(100% / 15);
}
.sn i {
  position: absolute;
  width: calc(100% / 15);
  height: calc(100% / 15);
  left: calc(var(--x) * 100% / 15);
  top: calc(var(--y) * 100% / 15);
  background: var(--cat-good);
  opacity: .55;
}
.sn i.head { opacity: 1; }

/* ── 2048: a 4 × 4 board ─────────────────────────────────────────── */
.t48 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .35rem;
  max-width: 300px;
  margin: 0 0 .7rem;
  padding: .5rem;
  border: 1px solid var(--cat-line-2);
  border-radius: 14px;
  background: var(--cat-panel);
}
.t48 span {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  font-family: var(--cat-mono);
  font-weight: 700;
  font-size: clamp(.85rem, 3.6vw, 1.05rem);
  font-variant-numeric: tabular-nums;
  color: var(--cat-text);
}
.t48 .lo { background: rgba(234, 212, 145, .14); }
.t48 .mid { background: rgba(234, 212, 145, .30); }
.t48 .hi { background: #CEAB64; color: #241B08; }
.t48 .made { box-shadow: 0 0 0 1.5px var(--cat-good); }

/* ── Solitaire: two columns of a tableau ─────────────────────────── */
.sol {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  max-width: 300px;
  min-height: 9.6rem;
  margin: 0 0 .7rem;
  padding: .7rem;
  border: 1px solid var(--cat-line-2);
  border-radius: 14px;
  background: var(--cat-panel);
}
.sol-col { display: flex; flex-direction: column; width: 3.4rem; }
.sol .card {
  height: 1.7rem;
  padding: .2rem .35rem 0;
  border: 1px solid rgba(0, 0, 0, .35);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: var(--cat-paper);
  color: #17170F;
  font-family: var(--cat-mono);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.sol .card:last-child { height: 4.4rem; border-bottom: 1px solid rgba(0, 0, 0, .35); border-radius: 6px; }
.sol .card.red { color: #B3202C; }
.sol .card.down {
  background: repeating-linear-gradient(45deg, #2B3A67 0 4px, #24315A 4px 8px);
  border-color: rgba(255, 255, 255, .25);
}
.sol .card.lift { box-shadow: 0 0 0 1.5px var(--cat-accent); position: relative; }
.sol .card.turned { box-shadow: 0 0 0 1.5px var(--cat-good); position: relative; }