/* ==========================================================
   INSHEEPNIA RULES PAGE
   Load AFTER style.css and saywhatnow.css.
   ========================================================== */

/* Rules blocks shown open (no picture guide yet) */
.sheep-rules h3 {
  font-size: 1.3rem;
  font-weight: 900;
  margin: 1.75rem 0 0.5rem;
}

.sheep-rules h3:first-child {
  margin-top: 0.25rem;
}

.sheep-rules ul {
  padding-left: 1.3rem;
  margin: 0.5rem 0 1rem;
}

.sheep-rules ul li {
  margin-bottom: 0.5rem;
  line-height: 1.65;
}

.sym {
  width: 1.15em;
  height: 1.15em;
  fill: currentColor;
  vertical-align: -0.2em;
}

.sym-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  margin: 0.5rem 0;
  font-weight: 700;
}

.sym-key > span {
  white-space: nowrap;
}

.moon-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0 0.5rem;
  font-size: 0.95rem;
}

.moon-table th,
.moon-table td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  vertical-align: top;
}

.moon-table thead th {
  background: var(--peach);
  font-weight: 900;
}

.sheep-goal {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 1.5rem;
}

/* Card guide */
.card-group-title {
  font-size: 1.5rem;
  font-weight: 900;
  text-align: center;
  margin: 3rem 0 0.4rem;
}

.card-group-title:first-of-type {
  margin-top: 1.5rem;
}

.card-group-intro {
  text-align: center;
  opacity: 0.8;
  max-width: 620px;
  margin: 0 auto 1.5rem;
  line-height: 1.6;
}

.card-rule {
  font-weight: 700;
  line-height: 1.5;
}

.card-flavour {
  font-style: italic;
  opacity: 0.75;
  margin-top: 0.4rem;
  line-height: 1.45;
}


/* ==========================================================
   NIGHT-SKY THEME (only on <body class="insheepnia">)
   Nav and footer keep the normal Casa Tea look.
   ========================================================== */

.insheepnia {
  --night: #1b2f6b;
  --night-deep: #12224f;
  --sky-cyan: #1ec8e0;
  --star: #ffd54a;
  --moon: #fff4d6;
}

.insheepnia main {
  background-color: var(--night);
  /* scattered stars */
  background-image:
    radial-gradient(2px 2px at 20px 30px, var(--star) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 140px 80px, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 90px 160px, #fff 50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 200px 120px, var(--star) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 240px 210px, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 40px 230px, var(--star) 50%, transparent 51%);
  background-size: 260px 260px;
  color: var(--moon);
}

/* Sections sit on the night sky instead of their own backgrounds */
.insheepnia .rules-hero,
.insheepnia .picture-guide,
.insheepnia .whats-in-box,
.insheepnia .house-rules,
.insheepnia .game-faq {
  background: transparent;
}

.insheepnia .whats-in-box,
.insheepnia .game-faq {
  background: rgba(18, 34, 79, 0.55);
}

/* Headings and intro text on the dark background */
.insheepnia main h1,
.insheepnia main h2,
.insheepnia .card-group-title,
.insheepnia .house-gallery h3,
.insheepnia .house-form-wrap h3 {
  color: #fff;
}

.insheepnia .rules-hero h1 {
  color: var(--sky-cyan);
  text-shadow: 3px 4px 0 var(--night-deep);
}

.insheepnia .game-tagline,
.insheepnia .section-intro,
.insheepnia .card-group-intro,
.insheepnia .sheep-goal,
.insheepnia .breadcrumb a {
  color: var(--moon);
  opacity: 1;
}

/* Quick info pills, like the box */
.insheepnia .quick-info-item {
  background: var(--star);
  color: var(--night-deep);
  border-color: var(--night-deep);
}

/* Buttons */
.insheepnia main .btn-primary {
  background: var(--star);
  color: var(--night-deep);
  border-color: var(--star);
}

.insheepnia main .btn-secondary {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

/* Jump bar */
.insheepnia .jump-bar {
  background: var(--night-deep);
  border-bottom-color: rgba(30, 200, 224, 0.45);
}

.insheepnia .jump-bar a {
  background: var(--night);
  border-color: var(--sky-cyan);
  color: #fff;
}

.insheepnia .jump-bar a:hover {
  background: rgba(30, 200, 224, 0.2);
}

.insheepnia .jump-bar a.is-active {
  background: var(--star);
  border-color: var(--star);
  color: var(--night-deep);
}

/* White "cloud" panels keep dark text so they stay easy to read */
.insheepnia .text-rules,
.insheepnia .rules-note,
.insheepnia .box-item,
.insheepnia .faq-item,
.insheepnia .rule-form,
.insheepnia .rule-success,
.insheepnia .rule-card,
.insheepnia .rules-empty {
  background: #fff;
  color: var(--ink);
}

.insheepnia .rules-note {
  border-left-color: var(--sky-cyan);
}

.insheepnia .rules-note a,
.insheepnia .rules-empty a {
  color: #0b7a8c;
}

.insheepnia .moon-table thead th {
  background: var(--star);
}

.insheepnia .card-count {
  background: var(--star);
  color: var(--night-deep);
}

.insheepnia .rule-card {
  border-left-color: var(--sky-cyan);
}

.insheepnia .rules-empty {
  border-color: var(--sky-cyan);
}

.insheepnia .consent input {
  accent-color: var(--night);
}

.insheepnia .game-hero-image {
  background: transparent;
  box-shadow: none;
}

.insheepnia .faq-question,
.insheepnia .faq-answer {
  color: var(--ink);
}