/* play.css */

/* =====================
   PLAY PAGE BASE
===================== */
#play-page {
  font-family: "Oxanium", sans-serif;
}

/* HERO */
#play-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  padding: 6rem 2rem;
  align-items: center;
}

#play-hero img {
  width: 100%;
  max-width: 420px;
}

/* SECTIONS */
#play-page section {
  padding: 4rem 2rem;
}

.rule-list,
.turn-list {
  max-width: 600px;
  margin: 2rem auto;
  line-height: 1.8;
}

/* VISUAL BLOCK */
.rule-visual,
.turn-visual,
.win-visual {
  margin-top: 2rem;
  text-align: center;
}

.rule-visual img,
.turn-visual img,
.win-visual img {
  max-width: 420px;
  opacity: 0.9;
}

/* CARD PREVIEW */
.card-preview-wrapper {
  overflow: hidden;
}

.card-preview-track {
  display: flex;
  gap: 16px;
  will-change: transform;
}

.card-preview-track img {
  width: 220px;
  flex-shrink: 0;
}