/* ============================================================
   CHISELCRAFT RULES PAGE — rules.css
   Dark stone aesthetic · violet / gold / ember palette
   ============================================================ */

:root {
  --obsidian: #0a0a0f;
  --stone:    #111118;
  --slate:    #1a1a26;
  --ember:    #e8621a;
  --gold:     #d4a017;
  --rune:     #5b9cf6;
  --violet:   #9b59f5;
  --mist:     #a0aec0;
  --green:    #34d399;
  --red:      #ef4444;
}

/* ─── BASE ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--obsidian); }
::-webkit-scrollbar-thumb { background: var(--violet); border-radius: 3px; }
::selection { background: rgba(155,89,245,0.25); }

/* ─── NAVBAR ─────────────────────────────────────────────── */
#navbar { background: transparent; transition: background .4s, backdrop-filter .4s, border-color .4s; }
#navbar.scrolled { background: rgba(10,10,15,.93); border-bottom: 1px solid rgba(155,89,245,.15); backdrop-filter: blur(18px); }
.nav-link { position: relative; }
.nav-link::after { content:''; position:absolute; bottom:0; left:50%; right:50%; height:1px; background:var(--gold); transition:left .3s, right .3s; }
.nav-link:hover::after { left:16px; right:16px; }
.rules-mobile-menu { background:rgba(10,10,15,.97); border-top:1px solid rgba(155,89,245,.1); backdrop-filter:blur(20px); }
.btn-discord { background:rgba(88,101,242,.15); border:1px solid rgba(88,101,242,.4); color:#a5b4fc; letter-spacing:.1em; }
.btn-discord:hover { background:rgba(88,101,242,.3); border-color:rgba(88,101,242,.7); color:#fff; box-shadow:0 0 16px rgba(88,101,242,.3); }
.btn-ip { background:rgba(212,160,23,.1); border:1px solid rgba(212,160,23,.35); color:var(--gold); letter-spacing:.1em; }
.btn-ip:hover { background:rgba(212,160,23,.2); border-color:rgba(212,160,23,.7); color:#fff; box-shadow:0 0 16px rgba(212,160,23,.25); }

/* ─── AMBIENT + HERO ─────────────────────────────────────── */
.rules-ambient {
  background:
    radial-gradient(ellipse 55% 50% at 10% 15%,  rgba(155,89,245,.06)  0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at 90% 70%,  rgba(212,160,23,.05)  0%, transparent 55%),
    radial-gradient(ellipse 45% 55% at 55% 40%,  rgba(232, 98, 26,.03) 0%, transparent 55%);
}

.rules-hero   { background: var(--obsidian); }
.rules-hero-bg {
  background:
    radial-gradient(ellipse 100% 80% at 50% -5%, rgba(155,89,245,.11) 0%, transparent 55%),
    var(--obsidian);
}
.rules-hero-grid {
  background-image:
    linear-gradient(rgba(155,89,245,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155,89,245,.055) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse 100% 75% at 50% 0%, black 5%, transparent 80%);
  opacity: .7;
}

/* Hero text */
.rules-pretitle  { animation: fadeInDown .8s ease .2s both; }
.rules-title     { animation: fadeInUp   .9s ease .35s both; }
.rules-subtitle  { animation: fadeInUp   .9s ease .55s both; }
.rules-quicknav  { animation: fadeInUp   .9s ease .72s both; }

.rules-title-line1 {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(1.5rem, 4.5vw, 3.2rem);
  color: rgba(255,255,255,.88);
  letter-spacing: .04em;
  display: block;
}
.rules-title-line2 {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(2rem, 6.5vw, 4.6rem);
  background: linear-gradient(135deg, var(--violet) 20%, var(--rune) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 28px rgba(155,89,245,.35));
  display: block;
}

@keyframes fadeInDown { from { opacity:0; transform:translateY(-18px); } to { opacity:1; transform:none; } }
@keyframes fadeInUp   { from { opacity:0; transform:translateY(26px);  } to { opacity:1; transform:none; } }

/* ─── QUICK NAV PILLS ────────────────────────────────────── */
.quicknav-pill {
  font-family: 'Cinzel', serif;
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid rgba(155,89,245,.22);
  background: rgba(155,89,245,.07);
  color: rgba(160,174,192,.65);
  cursor: pointer;
  transition: background .25s, border-color .25s, color .25s, transform .2s;
  white-space: nowrap;
}
.quicknav-pill:hover {
  background: rgba(155,89,245,.18);
  border-color: rgba(155,89,245,.5);
  color: #fff;
  transform: translateY(-2px);
}

/* ─── RULES GRID ─────────────────────────────────────────── */
.rules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
  padding-top: 0.5rem;
}
@media (max-width: 480px) {
  .rules-grid { grid-template-columns: 1fr; }
}

/* Featured (full-width) cards */
.rule-card-full {
  grid-column: 1 / -1;
}

/* ─── RULE CARD ──────────────────────────────────────────── */
.rule-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(14,14,21,.82);
  border: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(14px);
  transition: transform .3s, border-color .3s, box-shadow .3s;
  cursor: default;
  /* entrance animation controlled by JS */
  opacity: 0;
  transform: translateY(28px);
}
.rule-card.visible {
  animation: cardIn .55s ease forwards;
}
@keyframes cardIn {
  to { opacity: 1; transform: none; }
}
.rule-card:hover {
  transform: translateY(-5px);
  border-color: rgba(155,89,245,.28);
  box-shadow: 0 0 40px rgba(155,89,245,.09), 0 16px 40px rgba(0,0,0,.4);
}

/* Per-card accent colours set via data-accent */
.rule-card[data-accent="violet"]:hover { border-color: rgba(155,89,245,.35); }
.rule-card[data-accent="gold"]:hover   { border-color: rgba(212,160,23,.35); }
.rule-card[data-accent="ember"]:hover  { border-color: rgba(232,98,26,.35);  }
.rule-card[data-accent="rune"]:hover   { border-color: rgba(91,156,246,.35); }
.rule-card[data-accent="green"]:hover  { border-color: rgba(52,211,153,.35); }
.rule-card[data-accent="red"]:hover    { border-color: rgba(239,68,68,.35);  }

/* Glow layer */
.rule-card-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 14px;
  opacity: 0;
  transition: opacity .4s;
}
.rule-card:hover .rule-card-glow { opacity: 1; }
.rule-card[data-accent="violet"] .rule-card-glow { background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(155,89,245,.09) 0%, transparent 60%); }
.rule-card[data-accent="gold"]   .rule-card-glow { background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(212,160,23,.09) 0%, transparent 60%); }
.rule-card[data-accent="ember"]  .rule-card-glow { background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(232,98,26,.09) 0%, transparent 60%); }
.rule-card[data-accent="rune"]   .rule-card-glow { background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(91,156,246,.09) 0%, transparent 60%); }
.rule-card[data-accent="green"]  .rule-card-glow { background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(52,211,153,.09) 0%, transparent 60%); }
.rule-card[data-accent="red"]    .rule-card-glow { background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(239,68,68,.09) 0%, transparent 60%); }

/* Corner accent bar */
.rule-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: 14px 14px 0 0;
  background: transparent;
  transition: background .3s;
}
.rule-card[data-accent="violet"]:hover::before { background: linear-gradient(90deg, transparent, rgba(155,89,245,.6), transparent); }
.rule-card[data-accent="gold"]:hover::before   { background: linear-gradient(90deg, transparent, rgba(212,160,23,.6), transparent); }
.rule-card[data-accent="ember"]:hover::before  { background: linear-gradient(90deg, transparent, rgba(232,98,26,.6),  transparent); }
.rule-card[data-accent="rune"]:hover::before   { background: linear-gradient(90deg, transparent, rgba(91,156,246,.6), transparent); }
.rule-card[data-accent="green"]:hover::before  { background: linear-gradient(90deg, transparent, rgba(52,211,153,.6), transparent); }
.rule-card[data-accent="red"]:hover::before    { background: linear-gradient(90deg, transparent, rgba(239,68,68,.6),  transparent); }

/* Card inner */
.rule-card-inner { padding: 1.75rem 1.75rem 1.6rem; position: relative; z-index: 1; }

/* Card header */
.rule-card-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 1rem;
}

/* Icon badge */
.rule-icon-wrap {
  width: 46px; height: 46px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.45rem;
  flex-shrink: 0;
  transition: transform .3s;
}
.rule-card:hover .rule-icon-wrap { transform: scale(1.12) rotate(-4deg); }
.rule-icon-violet { background: rgba(155,89,245,.12); border: 1px solid rgba(155,89,245,.25); }
.rule-icon-gold   { background: rgba(212,160,23,.1);  border: 1px solid rgba(212,160,23,.22); }
.rule-icon-ember  { background: rgba(232,98,26,.1);   border: 1px solid rgba(232,98,26,.22);  }
.rule-icon-rune   { background: rgba(91,156,246,.1);  border: 1px solid rgba(91,156,246,.22); }
.rule-icon-green  { background: rgba(52,211,153,.1);  border: 1px solid rgba(52,211,153,.22); }
.rule-icon-red    { background: rgba(239,68,68,.1);   border: 1px solid rgba(239,68,68,.22);  }

/* Rule number badge */
.rule-number {
  font-family: 'Cinzel Decorative', serif;
  font-size: .6rem;
  letter-spacing: .12em;
  padding: 2px 9px;
  border-radius: 20px;
  margin-bottom: 4px;
  display: inline-block;
}
.rule-number-violet { background: rgba(155,89,245,.12); color: rgba(155,89,245,.8); border: 1px solid rgba(155,89,245,.2); }
.rule-number-gold   { background: rgba(212,160,23,.1);  color: rgba(212,160,23,.8); border: 1px solid rgba(212,160,23,.2); }
.rule-number-ember  { background: rgba(232,98,26,.1);   color: rgba(232,98,26,.8);  border: 1px solid rgba(232,98,26,.2); }
.rule-number-rune   { background: rgba(91,156,246,.1);  color: rgba(91,156,246,.8); border: 1px solid rgba(91,156,246,.2); }
.rule-number-green  { background: rgba(52,211,153,.1);  color: rgba(52,211,153,.8); border: 1px solid rgba(52,211,153,.2); }
.rule-number-red    { background: rgba(239,68,68,.1);   color: rgba(239,68,68,.8);  border: 1px solid rgba(239,68,68,.2); }

/* Card title */
.rule-title {
  font-family: 'Cinzel', serif;
  font-size: .9rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
  line-height: 1.3;
  transition: color .2s;
}
.rule-card[data-accent="violet"]:hover .rule-title { color: rgba(155,89,245,.95); }
.rule-card[data-accent="gold"]:hover   .rule-title { color: var(--gold); }
.rule-card[data-accent="ember"]:hover  .rule-title { color: var(--ember); }
.rule-card[data-accent="rune"]:hover   .rule-title { color: var(--rune); }
.rule-card[data-accent="green"]:hover  .rule-title { color: #34d399; }
.rule-card[data-accent="red"]:hover    .rule-title { color: #ef4444; }

/* Divider */
.rule-divider {
  height: 1px;
  background: rgba(255,255,255,.05);
  margin: .9rem 0;
  transition: background .3s;
}
.rule-card[data-accent="violet"]:hover .rule-divider { background: rgba(155,89,245,.18); }
.rule-card[data-accent="gold"]:hover   .rule-divider { background: rgba(212,160,23,.18); }
.rule-card[data-accent="ember"]:hover  .rule-divider { background: rgba(232,98,26,.18);  }
.rule-card[data-accent="rune"]:hover   .rule-divider { background: rgba(91,156,246,.18); }
.rule-card[data-accent="green"]:hover  .rule-divider { background: rgba(52,211,153,.18); }
.rule-card[data-accent="red"]:hover    .rule-divider { background: rgba(239,68,68,.18);  }

/* Body text */
.rule-body {
  font-family: 'Crimson Pro', serif;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(160,174,192,.7);
}

/* ─── ALLOWED / PROHIBITED LISTS ────────────────────────── */
.rule-list { margin-top: .6rem; space-y: .3rem; }
.rule-list-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-family: 'Crimson Pro', serif;
  font-size: .95rem;
  color: rgba(160,174,192,.72);
  padding: 3px 0;
  line-height: 1.5;
}
.rule-list-item .bullet-allowed    { color: #34d399; font-size: .75rem; margin-top: 4px; flex-shrink:0; }
.rule-list-item .bullet-prohibited { color: #ef4444; font-size: .75rem; margin-top: 4px; flex-shrink:0; }
.rule-list-item .bullet-neutral    { color: rgba(155,89,245,.7); font-size: .75rem; margin-top: 4px; flex-shrink:0; }

/* List section labels */
.rule-list-label {
  font-family: 'Cinzel', serif;
  font-size: .6rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin: .8rem 0 .4rem;
}
.rule-list-label-green  { color: rgba(52,211,153,.6); }
.rule-list-label-red    { color: rgba(239,68,68,.6); }
.rule-list-label-violet { color: rgba(155,89,245,.6); }

/* ─── INSET INFO BOX ─────────────────────────────────────── */
.rule-infobox {
  margin-top: 1rem;
  padding: .75rem 1rem;
  border-radius: 8px;
  background: rgba(10,10,15,.7);
  border: 1px solid rgba(255,255,255,.055);
  font-family: 'Crimson Pro', serif;
  font-size: .9rem;
  color: rgba(160,174,192,.6);
  font-style: italic;
}
.rule-infobox-violet { border-color: rgba(155,89,245,.18); background: rgba(155,89,245,.05); }
.rule-infobox-gold   { border-color: rgba(212,160,23,.18);  background: rgba(212,160,23,.04); }
.rule-infobox-green  { border-color: rgba(52,211,153,.18);  background: rgba(52,211,153,.04); }
.rule-infobox-red    { border-color: rgba(239,68,68,.18);   background: rgba(239,68,68,.04); }

/* ─── CALL TO ACTION ─────────────────────────────────────── */
.rules-cta-bg  { background: var(--obsidian); }
.rules-cta-rad {
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(212,160,23,.07) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(232,98,26,.04)  0%, transparent 55%);
}

.cta-glow {
  text-shadow: 0 0 40px rgba(212,160,23,.18), 0 0 80px rgba(212,160,23,.07);
}

.cta-btn {
  background: linear-gradient(135deg, var(--gold), var(--ember));
  color: var(--obsidian);
  font-weight: 700;
  position: relative;
  overflow: hidden;
}
.cta-btn::before {
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(135deg, #fff4 0%, transparent 50%);
  opacity:0;
  transition: opacity .3s;
}
.cta-btn:hover::before { opacity:1; }
.cta-btn:hover {
  box-shadow: 0 0 40px rgba(212,160,23,.55), 0 8px 32px rgba(232,98,26,.35);
  transform: translateY(-3px);
}

/* ─── REVEAL ANIMATION ───────────────────────────────────── */
.reveal-up {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal-up.visible { opacity:1; transform:none; }

/* ─── TOAST ──────────────────────────────────────────────── */
.rules-toast {
  background: rgba(17,17,24,.97);
  border: 1px solid rgba(155,89,245,.4);
  color: var(--violet);
  backdrop-filter: blur(16px);
  transform: translateX(-50%) translateY(20px);
  transition: opacity .3s, transform .3s;
  white-space: nowrap;
}
.rules-toast.show {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
  pointer-events: auto;
}
.rules-toast.toast-info { border-color: rgba(212,160,23,.4); color: var(--gold); }