/* ============================================================
-- FANTASY THEME OVERHAUL - More medieval/medieval aesthetic
-- ============================================================

/* Fantasy Color Palette */
:root {
  --fantasy-gold: #d4af37;
  --fantasy-silver: #c0c0c0;
  --fantasy-bronze: #cd7f32;
  --fantasy-copper: #b87333;
  --fantasy-iron: #434b4d;
  --fantasy-mystic: #9b59b6;
  --fantasy-dark: #1a1a2e;
  --fantasy-parchment: #2d2d44;
  --fantasy-parchment-light: #393950;
  --fantasy-blood: #8b0000;
  --fantasy-forest: #228b22;
  --fantasy-sky: #4169e1;
  --fantasy-shadow: #16161a;
}

/* Fantasy Faction Cards */
.faction-tile {
  --accent: #7d43ff;
  position: relative;
  min-height: 320px;
  padding: 20px;
  border: 2px solid var(--line);
  background: linear-gradient(145deg, var(--fantasy-parchment), var(--fantasy-dark));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.5),
    inset 0 0 20px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  transform: perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0));
  position: relative;
}

.faction-tile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 6px;
  padding: 2px;
  background: linear-gradient(135deg, var(--accent), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.faction-tile::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background: radial-gradient(circle, rgba(125, 67, 255, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

/* Fantasy Rune Images */
.rune-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  object-fit: contain;
  filter: drop-shadow(0 0 25px color-mix(in srgb, var(--accent) 30%, transparent));
  z-index: 2;
}

/* Faction-specific color overrides */
.faction-tile[data-slug="ash-cycle"] {
  --accent: #9b59b6;
  background: linear-gradient(145deg, #2d2d44, #1a1a2e);
}
.faction-tile[data-slug="first-light"] {
  --accent: #ffd700;
  background: linear-gradient(145deg, #3d3d2e, #1a1a1a);
}
.faction-tile[data-slug="golden-flow"] {
  --accent: #b8860b;
  background: linear-gradient(145deg, #2d2a1e, #1a1815);
}
.faction-tile[data-sslug="crimson-oath"] {
  --accent: #dc143c;
  background: linear-gradient(145deg, #2e1a1a, #1a1414);
}
.faction-tile[data-slug="etched-power"] {
  --accent: #8b4513;
  background: linear-gradient(145deg, #2a221a, #1a1515);
}
.faction-tile[data-slug="tangled-weave"] {
  --accent: #4682b4;
  background: linear-gradient(145deg, #1a2a2e, #14161c);
}
.faction-tile[data-slug="eternal-reach"] {
  --accent: #9370db;
  background: linear-gradient(145deg, #2a1a3d, #14142a);
}
.faction-tile[data-slug="hidden-truth"] {
  --accent: #696969;
  background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
}
.faction-tile[data-slug="hollows-end"] {
  --accent: #800080;
  background: linear-gradient(145deg, #2a1a2a, #141014);
}

/* Enhanced tile index */
.tile-index {
  position: absolute;
  top: 15px;
  left: 17px;
  color: var(--fantasy-gold);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-family: 'Cinzel', serif;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
  z-index: 3;
}

/* Faction card text styling */
.faction-tile h3 {
  font-family: 'Cinzel', serif;
  margin: 0 0 8px;
  font-size: 1.8rem;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
  z-index: 3;
}

.faction-tile p {
  color: #b8b8b8;
  font-size: 0.85rem;
  line-height: 1.4;
  z-index: 3;
}

.clearance {
  font-size: 0.6rem;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: 'Cinzel', serif;
  text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 40%, transparent);
  z-index: 3;
}

/* Fantasy War Cards */
.war-card {
  border: 2px solid var(--line);
  background: linear-gradient(145deg, var(--fantasy-parchment), var(--fantasy-dark));
  padding: 30px;
  min-height: 220px;
  border-radius: 12px;
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.4),
    inset 0 0 30px rgba(0, 0, 0, 0.2);
  position: relative;
}

.war-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
  padding: 2px;
  background: linear-gradient(135deg, var(--fantasy-mystic), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.war-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.war-faction-name {
  font-family: 'Cinzel', serif;
  font-size: 1.6rem;
  color: var(--fantasy-gold);
  text-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
}

.war-vs {
  font-family: 'Cinzel', serif;
  font-size: 1.3rem;
  color: var(--fantasy-silver);
  font-weight: 700;
}

.war-content h3 {
  font-family: 'Cinzel', serif;
  font-size: 1.3rem;
  margin: 0 0 12px;
  color: var(--accent);
  text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 30%, transparent);
}

.war-content p {
  color: #a0a0a0;
  font-size: 0.9rem;
  line-height: 1.6;
  font-style: italic;
}

.classified-war {
  color: var(--fantasy-silver);
  font-size: 1rem;
  font-family: 'Cinzel', serif;
  text-align: center;
  font-style: italic;
}

/* Fantasy Hollow End Section */
.hollow-end-section {
  margin-top: 80px;
  padding: 80px;
  border: 3px solid #800080;
  background: 
    radial-gradient(circle at 50% 0%, rgba(128, 0, 128, 0.2) 0%, transparent 50%),
    linear-gradient(145deg, var(--fantasy-dark), #0a0a0a);
  position: relative;
}

.hollow-end-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  padding: 3px;
  background: linear-gradient(135deg, #800080, transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.hollow-end-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 50px;
  align-items: center;
}

.hollow-end-emblem {
  width: 180px;
  height: 180px;
}

.hollow-end-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 50px rgba(128, 0, 128, 0.8));
}

.hollow-end-lore p {
  font-family: Georgia, serif;
  color: #c8bfce;
  font-size: 1.2rem;
  line-height: 1.8;
  margin-bottom: 25px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.hollow-end-lore blockquote {
  border-left: 3px solid #800080;
  padding: 20px 30px;
  color: #d9b578;
  font-style: italic;
  font-size: 1.1rem;
  background: rgba(128, 0, 128, 0.1);
  border-radius: 0 8px 8px 0;
}

/* Fantasy War Rows */
.wars-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.war-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 30px;
  align-items: center;
  padding: 40px 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}

.war-row::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--fantasy-mystic), transparent);
}

.war-faction {
  min-width: 0;
}

.war-info {
  padding: 25px;
  border-left: 2px solid var(--line);
  border-right: 2px solid var(--line);
  max-width: 450px;
  background: rgba(45, 45, 45, 0.1);
  border-radius: 8px;
  text-align: center;
}

.war-info h3 {
  font-family: 'Cinzel', serif;
  font-size: 1.4rem;
  margin: 0 0 18px;
  color: var(--accent);
  line-height: 1.3;
  text-shadow: 0 0 15px color-min(80%, var(--accent));
}

.war-info p {
  color: #a0a0a0;
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
  font-style: italic;
}

/* Enhanced faction grid */
.faction-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Locked state enhancement */
.locked {
  filter: grayscale(0.8) brightness(0.7);
  opacity: 0.9;
}

.locked::before {
  background: linear-gradient(135deg, #666, transparent);
}

/* Responsive adjustments */
@media(max-width: 820px) {
  .faction-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  
  .war-row {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 30px 0;
  }
  
  .war-info {
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 20px;
    margin: 20px 0;
  }
  
  .war-row::after {
    display: none;
  }
}

@media(max-width:560px) {
  .faction-grid {
    grid-template-columns: 1fr;
  }
  
  .hollow-end-hero {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .hollow-end-emblem {
    width: 120px;
    height: 120px;
  }
}