/* ============================================================
   KINGDOM-SPECIFIC STYLES
   Colors, borders, glows, lore cards, and result cards
   ============================================================ */

/* ---- FOREST KINGDOM ---- */
.kingdom-forest { --k-primary: #2d5a27; --k-secondary: #8b6914; --k-accent: #a8d08d; }
.kingdom-forest .kingdom-result-card { border-color: #2d5a27; background: linear-gradient(135deg, #16213e, rgba(45,90,39,0.08)); box-shadow: 0 0 15px rgba(168,208,141,0.15); }
.kingdom-forest .kingdom-result-card:hover { box-shadow: 0 0 30px rgba(168,208,141,0.35); }
.kingdom-forest .kingdom-result-name { color: #a8d08d; }
.kingdom-forest .result-player-name { border-color: #2d5a27; }
.kingdom-forest .kingdom-motto { border-color: #2d5a27; }
.kingdom-forest .team-size-badge { border-color: #2d5a27; color: #a8d08d; }

/* ---- ICE KINGDOM ---- */
.kingdom-ice { --k-primary: #a8d8ea; --k-secondary: #ffffff; --k-accent: #5b9bd5; }
.kingdom-ice .kingdom-result-card { border-color: #a8d8ea; background: linear-gradient(135deg, #16213e, rgba(168,216,234,0.06)); box-shadow: 0 0 15px rgba(91,155,213,0.15); }
.kingdom-ice .kingdom-result-card:hover { box-shadow: 0 0 30px rgba(91,155,213,0.35); }
.kingdom-ice .kingdom-result-name { color: #a8d8ea; }
.kingdom-ice .result-player-name { border-color: #a8d8ea; }
.kingdom-ice .kingdom-motto { border-color: #a8d8ea; }
.kingdom-ice .team-size-badge { border-color: #a8d8ea; color: #a8d8ea; }

/* ---- WATER KINGDOM ---- */
.kingdom-water { --k-primary: #1a5276; --k-secondary: #2ed8d8; --k-accent: #85c1e9; }
.kingdom-water .kingdom-result-card { border-color: #2ed8d8; background: linear-gradient(135deg, #16213e, rgba(26,82,118,0.12)); box-shadow: 0 0 15px rgba(133,193,233,0.15); }
.kingdom-water .kingdom-result-card:hover { box-shadow: 0 0 30px rgba(133,193,233,0.35); }
.kingdom-water .kingdom-result-name { color: #2ed8d8; }
.kingdom-water .result-player-name { border-color: #2ed8d8; }
.kingdom-water .kingdom-motto { border-color: #2ed8d8; }
.kingdom-water .team-size-badge { border-color: #2ed8d8; color: #2ed8d8; }

/* ---- FIRE KINGDOM ---- */
.kingdom-fire { --k-primary: #c0392b; --k-secondary: #e67e22; --k-accent: #f39c12; }
.kingdom-fire .kingdom-result-card { border-color: #c0392b; background: linear-gradient(135deg, #16213e, rgba(192,57,43,0.1)); box-shadow: 0 0 15px rgba(243,156,18,0.15); }
.kingdom-fire .kingdom-result-card:hover { box-shadow: 0 0 30px rgba(243,156,18,0.35); }
.kingdom-fire .kingdom-result-name { color: #f39c12; }
.kingdom-fire .result-player-name { border-color: #c0392b; }
.kingdom-fire .kingdom-motto { border-color: #c0392b; }
.kingdom-fire .team-size-badge { border-color: #e67e22; color: #f39c12; }

/* ---- SAKURA KINGDOM ---- */
.kingdom-sakura { --k-primary: #e8a0bf; --k-secondary: #fdf2e9; --k-accent: #c471a5; }
.kingdom-sakura .kingdom-result-card { border-color: #e8a0bf; background: linear-gradient(135deg, #16213e, rgba(232,160,191,0.06)); box-shadow: 0 0 15px rgba(196,113,165,0.15); }
.kingdom-sakura .kingdom-result-card:hover { box-shadow: 0 0 30px rgba(196,113,165,0.35); }
.kingdom-sakura .kingdom-result-name { color: #e8a0bf; }
.kingdom-sakura .result-player-name { border-color: #e8a0bf; }
.kingdom-sakura .kingdom-motto { border-color: #e8a0bf; }
.kingdom-sakura .team-size-badge { border-color: #e8a0bf; color: #e8a0bf; }

/* ---- JUNGLE KINGDOM ---- */
.kingdom-jungle { --k-primary: #1e8449; --k-secondary: #0b3d0b; --k-accent: #27ae60; }
.kingdom-jungle .kingdom-result-card { border-color: #1e8449; background: linear-gradient(135deg, #16213e, rgba(30,132,73,0.08)); box-shadow: 0 0 15px rgba(39,174,96,0.15); }
.kingdom-jungle .kingdom-result-card:hover { box-shadow: 0 0 30px rgba(39,174,96,0.35); }
.kingdom-jungle .kingdom-result-name { color: #27ae60; }
.kingdom-jungle .result-player-name { border-color: #1e8449; }
.kingdom-jungle .kingdom-motto { border-color: #1e8449; }
.kingdom-jungle .team-size-badge { border-color: #1e8449; color: #27ae60; }

/* ---- MUSHROOM KINGDOM ---- */
.kingdom-mushroom { --k-primary: #7d3c98; --k-secondary: #c0392b; --k-accent: #d7bde2; }
.kingdom-mushroom .kingdom-result-card { border-color: #7d3c98; background: linear-gradient(135deg, #16213e, rgba(125,60,152,0.08)); box-shadow: 0 0 15px rgba(215,189,226,0.15); }
.kingdom-mushroom .kingdom-result-card:hover { box-shadow: 0 0 30px rgba(215,189,226,0.35); }
.kingdom-mushroom .kingdom-result-name { color: #d7bde2; }
.kingdom-mushroom .result-player-name { border-color: #7d3c98; }
.kingdom-mushroom .kingdom-motto { border-color: #7d3c98; }
.kingdom-mushroom .team-size-badge { border-color: #7d3c98; color: #d7bde2; }

/* ============================================================
   LORE HUB -- Kingdom Portal Grid
   ============================================================ */
.lore-hub {
  position: relative;
  min-height: 100vh;
}
.lore-hub-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 24px 80px;
}

.lore-kingdom-selector {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

/* PORTAL CARDS */
.lore-portal {
  position: relative;
  border: 3px solid var(--k-primary, var(--border));
  border-radius: 4px;
  background: linear-gradient(135deg, var(--surface), rgba(var(--k-primary), 0.05));
  padding: 36px 28px 28px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  transition: all 0.35s cubic-bezier(0.175,0.885,0.32,1.275);
  animation: portalEntrance 0.6s cubic-bezier(0.175,0.885,0.32,1.275) both;
  box-shadow: 0 0 0 transparent;
}

@keyframes portalEntrance {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.lore-portal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--k-primary, transparent), transparent 60%);
  opacity: 0.08;
  transition: opacity 0.3s;
}

.lore-portal:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: var(--k-accent, var(--accent));
  box-shadow: 0 0 40px color-mix(in srgb, var(--k-accent, var(--accent)) 40%, transparent),
              0 8px 30px rgba(0,0,0,0.4);
}
.lore-portal:hover::before { opacity: 0.18; }
.lore-portal:hover .portal-enter { opacity: 1; transform: translateX(0); }
.lore-portal:hover .portal-glow { opacity: 1; }

.portal-glow {
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--k-accent, #e94560) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  mix-blend-mode: screen;
}

.portal-crest {
  font-size: 52px;
  filter: drop-shadow(0 0 12px var(--k-accent, #e94560));
  transition: transform 0.3s, filter 0.3s;
  z-index: 1;
}
.lore-portal:hover .portal-crest {
  transform: scale(1.15);
  filter: drop-shadow(0 0 24px var(--k-accent, #e94560));
}

.portal-name {
  font-size: 11px;
  color: var(--k-accent, var(--accent));
  letter-spacing: 1px;
  z-index: 1;
}

.portal-motto {
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.5;
  z-index: 1;
}

.portal-enter {
  font-size: 9px;
  color: var(--k-accent, var(--accent));
  opacity: 0;
  transform: translateX(-6px);
  transition: all 0.25s ease-out;
  margin-top: 4px;
  letter-spacing: 2px;
  z-index: 1;
}

/* Individual portal border colors */
.lore-portal-forest  { --k-primary:#2d5a27; --k-accent:#a8d08d; --k-secondary:#8b6914; }
.lore-portal-ice     { --k-primary:#a8d8ea; --k-accent:#a8d8ea; --k-secondary:#5b9bd5; }
.lore-portal-water   { --k-primary:#1a5276; --k-accent:#2ed8d8; --k-secondary:#85c1e9; }
.lore-portal-fire    { --k-primary:#c0392b; --k-accent:#f39c12; --k-secondary:#e67e22; }
.lore-portal-sakura  { --k-primary:#e8a0bf; --k-accent:#e8a0bf; --k-secondary:#c471a5; }
.lore-portal-jungle  { --k-primary:#1e8449; --k-accent:#27ae60; --k-secondary:#0b3d0b; }
.lore-portal-mushroom{ --k-primary:#7d3c98; --k-accent:#d7bde2; --k-secondary:#c0392b; }
.lore-portal-desert  { --k-primary:#c9a84c; --k-accent:#f0c040; --k-secondary:#8b5e3c; }
.lore-portal-swamp   { --k-primary:#4a7c59; --k-accent:#7ab89a; --k-secondary:#2d4a3e; }
.lore-portal-mountain{ --k-primary:#7f8c8d; --k-accent:#bdc3c7; --k-secondary:#4a4a4a; }
.lore-portal-plains  { --k-primary:#e9c46a; --k-accent:#f4e285; --k-secondary:#8b7355; }
.lore-portal-darkforest { --k-primary:#2c3e50; --k-accent:#8e9eab; --k-secondary:#1a252f; }

/* ============================================================
   LORE DETAIL -- Immersive Full-Screen Kingdom Page
   ============================================================ */
.lore-detail {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.lore-detail-atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  transition: background 1s ease-out;
}

.lore-back-btn {
  position: fixed;
  top: 80px;
  left: 20px;
  z-index: 100;
  background: rgba(22,33,62,0.9);
  border: 2px solid;
  border-radius: 4px;
  padding: 10px 16px;
  font-size: 9px;
  cursor: pointer;
  transition: all 0.2s;
  backdrop-filter: blur(8px);
  white-space: nowrap;
}
.lore-back-btn:hover {
  background: rgba(22,33,62,1);
  transform: translateX(-2px);
}

.lore-detail-scroll {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

/* HERO BANNER */
.lore-detail-hero {
  text-align: center;
  padding: 100px 24px 60px;
  position: relative;
}

.lore-detail-crest {
  font-size: 80px;
  margin-bottom: 20px;
  display: block;
  filter: drop-shadow(0 0 30px var(--k-accent, #e94560));
  animation: loreCresetFloat 4s ease-in-out infinite;
}
@keyframes loreCresetFloat {
  0%,100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 30px var(--k-accent, #e94560)); }
  50%      { transform: translateY(-12px) scale(1.05); filter: drop-shadow(0 0 50px var(--k-accent, #e94560)); }
}

.lore-detail-title {
  font-size: 28px;
  letter-spacing: 4px;
  margin-bottom: 16px;
  text-shadow: 0 0 40px currentColor;
  line-height: 1.5;
}
@media (max-width: 767px) { .lore-detail-title { font-size: 18px; } }

.lore-detail-motto {
  font-size: 18px;
  color: var(--text-secondary);
  font-style: italic;
  font-weight: 600;
  margin-bottom: 24px;
}
@media (max-width: 767px) { .lore-detail-motto { font-size: 15px; } }

.lore-detail-divider {
  height: 2px;
  max-width: 400px;
  margin: 0 auto 24px;
  border-radius: 1px;
}

.expansion-badge {
  display: inline-block;
  font-family: var(--font-pixel);
  font-size: 8px;
  padding: 6px 14px;
  border: 2px solid;
  border-radius: 20px;
  margin-top: 8px;
  opacity: 0.7;
}

/* BODY SECTIONS */
.lore-detail-body {
  padding-bottom: 40px;
}

.lore-detail-section {
  margin-bottom: 48px;
}

.lore-detail-section-label {
  font-size: 10px;
  letter-spacing: 4px;
  margin-bottom: 24px;
  display: block;
  text-align: center;
}

.lore-paragraphs {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.lore-paragraph {
  font-size: 16px;
  line-height: 2;
  color: var(--text-secondary);
  text-indent: 2em;
  position: relative;
}
.lore-paragraph:first-child {
  font-size: 18px;
  color: var(--text-primary);
  text-indent: 0;
  font-weight: 500;
}
@media (max-width: 767px) {
  .lore-paragraph { font-size: 14px; line-height: 1.85; }
  .lore-paragraph:first-child { font-size: 15px; }
}

.lore-section-break {
  border: none;
  border-top: 1px solid;
  margin: 48px 0;
  opacity: 0.5;
}

/* VIBE CARD */
.lore-vibe-card {
  border: 2px solid;
  border-radius: 4px;
  padding: 28px 32px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.lore-vibe-icon { font-size: 32px; flex-shrink: 0; margin-top: 4px; }
.lore-vibe-text { font-size: 15px; line-height: 1.9; color: var(--text-secondary); }
@media (max-width: 767px) {
  .lore-vibe-card { flex-direction: column; padding: 20px; gap: 12px; }
  .lore-vibe-text { font-size: 13px; }
}

/* CHALLENGE BLOCK */
.lore-challenge-block {
  border: 2px solid;
  border-radius: 4px;
  padding: 28px 32px;
  margin-bottom: 48px;
  position: relative;
  overflow: hidden;
}
.lore-challenge-block::before {
  content: "!";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-pixel);
  font-size: 80px;
  opacity: 0.05;
  pointer-events: none;
}
.challenge-label {
  font-size: 9px;
  letter-spacing: 3px;
  display: block;
  margin-bottom: 14px;
}
.challenge-text {
  font-size: 16px;
  line-height: 1.85;
  font-style: italic;
  color: var(--text-primary);
}
@media (max-width: 767px) {
  .lore-challenge-block { padding: 20px; }
  .challenge-text { font-size: 14px; }
}

/* STATS BLOCK */
.lore-stats-block { margin-bottom: 48px; }
.lore-stats-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: rgba(0,0,0,0.3);
  border-radius: 4px;
  padding: 24px;
}
.stat-row {
  display: grid;
  grid-template-columns: 160px 1fr 40px;
  align-items: center;
  gap: 16px;
}
@media (max-width: 767px) {
  .stat-row { grid-template-columns: 120px 1fr 36px; gap: 10px; }
}
.stat-label { font-size: 7px; color: var(--text-secondary); letter-spacing: 1px; }
.stat-bar-track {
  height: 10px;
  background: rgba(255,255,255,0.05);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}
.stat-bar-fill {
  height: 100%;
  border-radius: 5px;
  width: 0%;
  transition: width 1.2s cubic-bezier(0.25,0.46,0.45,0.94);
}
.stat-value { font-size: 9px; text-align: right; }

/* CLOSING DECREE */
.lore-closing {
  border: 2px solid;
  border-radius: 4px;
  padding: 40px;
  text-align: center;
  margin-bottom: 48px;
  background: rgba(0,0,0,0.3);
}
.closing-crest { font-size: 40px; margin-bottom: 16px; display: block; }
.closing-text { font-size: 14px; margin-bottom: 12px; letter-spacing: 2px; line-height: 1.8; }
.closing-sub { font-size: 13px; color: var(--text-secondary); font-style: italic; }

/* BOTTOM BACK BUTTON */
.lore-bottom-back {
  height: 48px;
  padding: 0 28px;
  font-size: 9px;
  background: transparent;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.4);
}

/* LEGACY LORE CARD STYLES -- used in results expandable */
.lore-challenge {
  background: rgba(0,0,0,0.3);
  border-radius: 4px;
  padding: 16px 20px;
  margin-top: 20px;
  border-left: 4px solid;
  font-size: 14px;
  font-style: italic;
  color: var(--text-primary);
}
.lore-challenge-label {
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* ---- Forest lore card ---- */
.lore-card-forest { border-color: #2d5a27; box-shadow: 0 0 15px rgba(168,208,141,0.1); }
.lore-card-forest:hover { box-shadow: 0 0 30px rgba(168,208,141,0.3); }
.lore-card-forest .lore-kingdom-name { color: #a8d08d; }
.lore-card-forest .lore-challenge { border-color: #2d5a27; }

/* ---- Ice lore card ---- */
.lore-card-ice { border-color: #a8d8ea; box-shadow: 0 0 15px rgba(91,155,213,0.1); }
.lore-card-ice:hover { box-shadow: 0 0 30px rgba(91,155,213,0.3); }
.lore-card-ice .lore-kingdom-name { color: #a8d8ea; }
.lore-card-ice .lore-challenge { border-color: #a8d8ea; }

/* ---- Water lore card ---- */
.lore-card-water { border-color: #2ed8d8; box-shadow: 0 0 15px rgba(133,193,233,0.1); }
.lore-card-water:hover { box-shadow: 0 0 30px rgba(133,193,233,0.3); }
.lore-card-water .lore-kingdom-name { color: #2ed8d8; }
.lore-card-water .lore-challenge { border-color: #2ed8d8; }

/* ---- Fire lore card ---- */
.lore-card-fire { border-color: #c0392b; box-shadow: 0 0 15px rgba(243,156,18,0.1); }
.lore-card-fire:hover { box-shadow: 0 0 30px rgba(243,156,18,0.3); }
.lore-card-fire .lore-kingdom-name { color: #f39c12; }
.lore-card-fire .lore-challenge { border-color: #c0392b; }

/* ---- Sakura lore card ---- */
.lore-card-sakura { border-color: #e8a0bf; box-shadow: 0 0 15px rgba(196,113,165,0.1); }
.lore-card-sakura:hover { box-shadow: 0 0 30px rgba(196,113,165,0.3); }
.lore-card-sakura .lore-kingdom-name { color: #e8a0bf; }
.lore-card-sakura .lore-challenge { border-color: #e8a0bf; }

/* ---- Jungle lore card ---- */
.lore-card-jungle { border-color: #1e8449; box-shadow: 0 0 15px rgba(39,174,96,0.1); }
.lore-card-jungle:hover { box-shadow: 0 0 30px rgba(39,174,96,0.3); }
.lore-card-jungle .lore-kingdom-name { color: #27ae60; }
.lore-card-jungle .lore-challenge { border-color: #1e8449; }

/* ---- Mushroom lore card ---- */
.lore-card-mushroom { border-color: #7d3c98; box-shadow: 0 0 15px rgba(215,189,226,0.1); }
.lore-card-mushroom:hover { box-shadow: 0 0 30px rgba(215,189,226,0.3); }
.lore-card-mushroom .lore-kingdom-name { color: #d7bde2; }
.lore-card-mushroom .lore-challenge { border-color: #7d3c98; }

/* ---- Expansion kingdom cards ---- */
.lore-card-desert { border-color: #c9a84c; }
.lore-card-desert .lore-kingdom-name { color: #f0c040; }
.lore-card-desert .lore-challenge { border-color: #c9a84c; }

.lore-card-swamp { border-color: #4a7c59; }
.lore-card-swamp .lore-kingdom-name { color: #7ab89a; }
.lore-card-swamp .lore-challenge { border-color: #4a7c59; }

.lore-card-mountain { border-color: #7f8c8d; }
.lore-card-mountain .lore-kingdom-name { color: #bdc3c7; }
.lore-card-mountain .lore-challenge { border-color: #7f8c8d; }

.lore-card-plains { border-color: #e9c46a; }
.lore-card-plains .lore-kingdom-name { color: #f4e285; }
.lore-card-plains .lore-challenge { border-color: #e9c46a; }

.lore-card-darkforest { border-color: #2c3e50; }
.lore-card-darkforest .lore-kingdom-name { color: #8e9eab; }
.lore-card-darkforest .lore-challenge { border-color: #2c3e50; }

/* ============================================================
   RESPONSIVE -- LORE GRID
   ============================================================ */
@media (max-width: 1023px) {
  .lore-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .lore-card-header { padding: 20px 20px 16px; flex-direction: column; gap: 12px; }
  .lore-body { padding: 0 20px 20px; }
  .lore-crest { font-size: 36px; }
}