/* Savage Conflicts - Classes Page Styles (v1)
   Parchment-themed cards, medieval accents, responsive grid, CSS-only textures.
   Replace SVGs in /assets/images/classes with your art any time (keep filenames).
*/

:root{
  --sc-bg:#0e0b0a;
  --sc-ink:#2b221a;
  --sc-ink-2:#3a2e24;
  --sc-ink-3:#5a4a3b;
  --sc-parchment:#f5ead3;
  --sc-parchment-2:#efe1c7;
  --sc-gold:#caa24b;
  --sc-gold-2:#ad8733;
  --sc-blood:#C90000;
  --sc-emerald:#FF9229;
  --sc-royal:#7B02B3;
  --sc-shadow:#850404;
  --ring:#e2c77d;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:
    radial-gradient(1200px 800px at 10% 5%, rgba(202,162,75,0.05), transparent 60%),
    radial-gradient(1000px 700px at 90% 100%, rgba(42,122,83,0.05), transparent 60%),
    linear-gradient(180deg, #1a1510, #0e0b0a 60%);
  color:#2b221a;
  font-family: "Cinzel", "Cormorant Garamond", "Goudy Old Style", Georgia, "Times New Roman", serif;
}

.sc-container{
  max-width:1200px;
  margin: clamp(16px, 5vw, 48px) auto;
  padding: 0 16px 48px;
}

.sc-title{
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--sc-parchment);
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
  letter-spacing:0.02em;
  margin: 24px 0 8px;
}

.sc-title .crest{
  width:42px; height:42px; border-radius:50%;
  background: conic-gradient(from 0deg, var(--sc-gold), var(--sc-gold-2), var(--sc-gold));
  box-shadow: 0 0 0 3px rgba(255,255,255,0.05), inset 0 0 0 3px rgba(0,0,0,0.4);
}

.sc-subtitle{
  color:#d9c59a;
  margin:0 0 28px;
  font-size:1rem;
}

.sc-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}

@media (max-width: 1200px){
  .sc-grid{ gap: 16px; }
}
@media (max-width: 940px){
  .sc-grid{ grid-template-columns: repeat(8, 1fr); }
}
@media (max-width: 640px){
  .sc-grid{ grid-template-columns: repeat(4, 1fr); }
}

.sc-card{
  grid-column: span 6;
  background: linear-gradient(180deg, #f7ecd6, #efe1c7);
  border-radius: 18px;
  position:relative;
  overflow:hidden;
  border: 2px solid #dcc69b;
  box-shadow:
    0 10px 30px rgba(0,0,0,0.35),
    inset 0 0 0 2px rgba(0,0,0,0.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
@media (max-width: 940px){
  .sc-card{ grid-column: span 8; }
}
@media (max-width: 640px){
  .sc-card{ grid-column: span 4; }
}

.sc-card::before{
  /* Deckle edge + parchment flecks */
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(10px 10px at 30% 10%, rgba(0,0,0,0.08), transparent 70%),
    radial-gradient(12px 12px at 70% 20%, rgba(0,0,0,0.05), transparent 70%),
    radial-gradient(8px 8px at 50% 80%, rgba(0,0,0,0.06), transparent 70%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.06) 100%);
  pointer-events:none;
  mix-blend-mode:multiply;
}

.sc-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.45), inset 0 0 0 2px rgba(0,0,0,0.06);
}

.sc-card-header{
  display:flex;
  gap:16px;
  padding:16px;
  align-items:center;
  background:
    linear-gradient(180deg, rgba(234,215,177,0.65), rgba(220,198,155,0.45));
  border-bottom: 1px dashed rgba(0,0,0,0.15);
}

.sc-imgwrap{
  width:112px; height:112px; flex:0 0 112px;
  border-radius: 14px;
  overflow:hidden;
  border:2px solid #c8b07e;
  background: #e9dbbd;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.06);
}

.sc-imgwrap img{
  width:100%; height:100%; object-fit:cover; display:block;
}

.sc-headings{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.sc-name{
  margin:0;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  color:#2b221a;
  letter-spacing:0.02em;
}

.sc-meta{
  display:flex; flex-wrap:wrap; gap:10px;
  font-size:0.92rem; color:#57462f;
}

.sc-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px;
  border-radius: 999px;
  background: #efe3c8;
  border: 1px solid #d7c194;
}

.sc-badge .dot{
  width:10px; height:10px; border-radius:50%;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.12);
}

.sc-body{
  padding: 14px 16px 18px;
  color:#3a2e24;
  line-height:1.55;
  font-size:1rem;
}

.sc-quote{
  margin:0 0 10px;
  font-style:italic;
  color:#5a4a3b;
  border-left: 3px solid #d0b886;
  padding-left: 10px;
}

.sc-footer{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px 16px;
}

.sc-tags{
  display:flex; gap:8px; flex-wrap:wrap;
}

.sc-tag{
  font-size:0.85rem;
  padding:6px 10px; border-radius:999px;
  background:#efe3c8; border:1px solid #d7c194; color:#58462f;
}

.glow{
  position:absolute; inset: -2px;
  border-radius:18px;
  pointer-events:none;
  opacity:0; transition:opacity .25s ease;
  background:
    radial-gradient(400px 120px at 15% -10%, rgba(226,199,125,0.18), transparent 60%),
    radial-gradient(120px 120px at 90% 10%, rgba(202,162,75,0.2), transparent 70%);
}
.sc-card:hover .glow{ opacity:1; }

/* Role color dots */
.dot-mage{ background: var(--sc-royal); }
.dot-assassin{ background: var(--sc-shadow); }
.dot-support{ background: var(--sc-emerald); }
.dot-berserker{ background: var(--sc-blood); }
.dot-gladiator{ background: #15C7D4; }
.dot-ranger{ background: #275d46; }
.dot-zealot{ background: #6E4003; }
.dot-shadowlord{ background: #9448A1; }
.dot-paladin{ background: #c9b25a; }
.dot-scout{ background: #10B01E; }

/* Optional: medieval page title accent */
h1,h2,h3{ font-weight:600; }