/* Rules pages for the card and dice games — /arcade/whot, /arcade/last-card,
   /arcade/jackpot, /arcade/ludo. Loaded after arcade-game.css. Only what
   those pages add: a small card face, the "what each card does" list, the
   played-or-not list in a worked example, a tell log, and a strip of Ludo
   squares. No tables anywhere, so nothing scrolls sideways on a phone. */

/* ── A card face ─────────────────────────────────────────────────────
   Paper on the dark page, the same paper as the receipt in category.css.
   The numeral is mono so a 2 and a 14 sit on one baseline. */
.card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .28rem;
  flex: none;
  width: 2.7rem;
  height: 3.7rem;
  border-radius: 7px;
  background: linear-gradient(160deg, #FBF7EC, #E7DFC9);
  color: #7A1420;
  font-family: var(--cat-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  box-shadow:
    0 8px 16px rgba(0, 0, 0, .5),
    inset 0 0 0 1px rgba(138, 106, 50, .6);
}
.card b { font-size: 1.05rem; font-weight: 700; }
.card i { font-style: normal; font-size: .8rem; font-weight: 500; }
.card--word b:last-child { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; }

/* Last Card's four colours and its wilds. */
.card--red, .card--yellow, .card--green, .card--blue, .card--wild {
  box-shadow: 0 8px 16px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.card--red { background: linear-gradient(160deg, #D64550, #A32B34); color: #fff; }
.card--yellow { background: linear-gradient(160deg, #F0CE5E, #CFA532); color: #2A2008; }
.card--green { background: linear-gradient(160deg, #3FA873, #23764C); color: #fff; }
.card--blue { background: linear-gradient(160deg, #5B78C4, #37509A); color: #fff; }
.card--wild {
  background: linear-gradient(160deg, #24242B, #0E0E12);
  color: #EAD491;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(234, 212, 145, .5);
}

/* A standard deck, for Jackpot. */
.card--dark { color: #17170F; }

/* In a worked example: the cards that may be played, and the ones that may not. */
.card.ok {
  box-shadow: 0 8px 16px rgba(0, 0, 0, .5), 0 0 0 2px var(--cat-good);
}
.card.no { opacity: .42; }

/* ── What each card does ─────────────────────────────────────────────
   The card on the left, its name and its effect on the right. One column
   of text at every width, so 390px needs no special case. */
.fx { display: grid; margin: 0; }
.fx > div {
  position: relative;
  min-height: 5.9rem;
  padding: 1.1rem 0 1.1rem 3.9rem;
  border-bottom: 1px solid var(--cat-line);
}
.fx > div:last-child { border-bottom: none; }
.fx .card { position: absolute; left: 0; top: 1.1rem; }
.fx dt { margin-bottom: .3rem; }
.fx dd { color: var(--cat-text-2); font-size: .96rem; max-width: 58ch; }
.fx dd + dd { margin-top: .45rem; color: var(--cat-text-3); font-size: .9rem; }
.fx-num {
  font-family: var(--cat-mono);
  font-size: .78rem;
  font-weight: 500;
  color: var(--cat-signal);
  margin-right: .5rem;
}

.tag {
  display: inline-block;
  margin-left: .5rem;
  padding: .14rem .42rem;
  border: 1px solid var(--cat-line-2);
  border-radius: 4px;
  font-family: var(--cat-mono);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cat-text-3);
  white-space: nowrap;
  vertical-align: .12em;
}
.tag--yes { color: var(--cat-good); border-color: rgba(53, 200, 138, .5); }

/* ── The table in a worked example ───────────────────────────────── */
.onpile {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 .6rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--cat-line);
  border-radius: 12px;
  background: var(--cat-panel);
}
.onpile p { color: var(--cat-text-2); font-size: .96rem; }
.onpile p b { color: var(--cat-text); font-weight: 600; }

.hand { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0 0 1rem; }

.after { color: var(--cat-text-2); font-size: .96rem; max-width: 62ch; margin-top: 1.2rem; }
.after + .after { margin-top: .8rem; }
.after b { color: var(--cat-text); font-weight: 600; }

/* ── A tell log (Jackpot) ────────────────────────────────────────── */
.log {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: .4rem 1.1rem;
  border: 1px solid var(--cat-line);
  border-radius: 12px;
  background: var(--cat-panel);
  font-family: var(--cat-mono);
  font-size: .82rem;
  color: var(--cat-text-2);
}
.log li { padding: .55rem 0; border-bottom: 1px solid var(--cat-line); }
.log li:last-child { border-bottom: none; }
.log b { color: var(--cat-text); font-weight: 500; }
.log .sign { color: var(--cat-signal); }

/* ── A stretch of Ludo track ─────────────────────────────────────── */
.strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .3rem;
  margin: 0 0 .7rem;
  padding: .6rem;
  border: 1px solid #8A6A32;
  border-radius: 14px;
  background: var(--cat-panel);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(234, 212, 145, .25);
}
.strip span {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 5px;
  border: 1px solid var(--cat-line-2);
  background: rgba(255, 255, 255, .022);
}
.strip span.to { border-color: var(--cat-good); }
.strip i {
  width: 56%;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.strip i.you { background: radial-gradient(circle at 35% 30%, #F4E2A6, #CEAB64 62%, #8A6A32); }
.strip i.them { background: radial-gradient(circle at 35% 30%, #F0858D, #E63946 62%, #8F1F28); }
.key { font-size: .84rem; color: var(--cat-text-3); margin-bottom: 1rem; }
.key i {
  display: inline-block;
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  margin-right: .3rem;
  vertical-align: -.05em;
}
.key i.you { background: #CEAB64; }
.key i.them { background: #E63946; margin-left: .9rem; }

@media (max-width: 760px) {
  .onpile { padding: .85rem .9rem; gap: .8rem; }
  .log { font-size: .78rem; padding: .3rem .9rem; }
}