/* =========================
   ARTICLES.CSS  (MAIN)
   ========================= */

/* Original article container base (kept and merged) */
#article-container article {
  background: rgba(14,20,30,0.75);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.04);
  margin-bottom: 36px;
  position: relative;
}

article .title { font-family: "Kensmark One", "Inter", system-ui, sans-serif; font-size:30px; color: var(--accent-gold); margin-bottom:4px; }
article .meta { color: var(--muted); margin-bottom:12px; }
.intro { margin-bottom:0.75em; line-height:1.5; }
.info-panel { background: rgba(18,24,34,0.55); border-radius: var(--radius-md); padding:14px 18px; border:1px solid rgba(255,255,255,0.05); box-shadow: inset 0 1px 4px rgba(0,0,0,0.3); margin:20px 0; }

/* Machine tabs */
.machine-tabs { display:flex; gap:8px; margin:16px 0 20px; }
.machine-tabs button { padding:8px 14px; border-radius:999px; background: rgba(14,24,40,0.65); border:none; color: var(--accent-gold); font-weight:600; cursor:pointer; transition:0.15s; box-shadow: inset 0 1px 3px rgba(232,196,77,0.2); }
.machine-tabs button:hover { background: rgba(20,30,50,0.8); box-shadow: 0 2px 8px rgba(232,196,77,0.35), inset 0 0 10px var(--accent-gold-soft); }
.machine-tabs button.active { color:#fff; box-shadow:0 3px 12px rgba(232,196,77,0.35); transform: translateY(-2px); }

/* Styling for generated article links (bold & gilded) */
a[data-article-link] {
  font-weight: 700;
  color: var(--accent-gold);
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(0,0,0,0.35), 0 6px 14px rgba(234,203,78,0.06);
  transition: color 140ms ease, transform 140ms ease, text-shadow 160ms ease;
  /* Ensure generated anchors sit above decorative overlays */
  position: relative;
  z-index: 10;
}

a[data-article-link]:hover {
  color: #fff;
  transform: translateY(-1px);
  text-shadow: 0 2px 6px rgba(234,203,78,0.25);
}

/* focus visibility for accessibility */
a[data-article-link]:focus {
  outline: 2px solid rgba(234,203,78,0.28);
  outline-offset: 2px;
  position: relative;
  z-index: 1000;
}

/* Accordions (kept behavior) */
.accordion-header { background: linear-gradient(180deg, rgba(14,22,32,0.55), rgba(10,17,26,0.55)); font-family: "Kensmark One", "Inter", system-ui, sans-serif; font-weight:600; padding:12px 14px; border-radius: var(--radius-md); display:flex; justify-content:space-between; cursor:pointer; margin-top:12px; border:1px solid rgba(255,255,255,0.04); transition:0.18s; }
.accordion-header:hover { background: var(--accent-gold-soft); border-left:3px solid var(--accent-gold); box-shadow: inset 0 0 14px var(--accent-gold-soft); }

/* Fixed accordion behavior */
.accordion-content { font-family: "Inter", system-ui, sans-serif; max-height:0; overflow:hidden; transition: max-height 0.28s ease; background: rgba(10,15,22,0.55); padding:14px; padding-top:0; padding-bottom:0; }
.accordion-content.open { padding-top:14px; padding-bottom:14px; }

.accordion-content li { margin-bottom:0.75em; line-height:1.5; }
.accordion-content p { margin-bottom:0.75em; line-height:1.5; }
.accordion-content ol { padding-left:14px; }
.chev { color: var(--accent-gold); transition: transform 0.25s ease; }

/* Tags */
.tags { margin-top:14px; display:flex; gap:8px; flex-wrap:wrap; }
.tag { background: rgba(14,24,40,0.65); color: var(--accent-gold); padding:6px 10px; border-radius: var(--radius-md); border:1px solid var(--accent-gold-dark); box-shadow: inset 0 1px 3px rgba(232,196,77,0.2); transition:0.18s; }
.tag:hover { background: rgba(20,30,50,0.8); box-shadow: 0 2px 8px rgba(232,196,77,0.35), inset 0 0 10px var(--accent-gold-soft); }

/* Breadcrumbs */
.breadcrumbs { display:flex; gap:8px; align-items:center; margin-bottom:12px; color: rgba(255,255,255,0.9); }

/* Compact chevron breadcrumbs */
.breadcrumbs .crumb { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:999px; background: rgba(20,30,40,0.45); border: 1px solid rgba(255,255,255,0.04); color: var(--accent-gold); font-weight:700; cursor:pointer; transition: transform 120ms ease, background 120ms ease; }
.breadcrumbs .crumb:hover { transform: translateY(-1px); background: rgba(255,255,255,0.02); }
.breadcrumbs .crumb.home { width:auto; padding:6px 10px; border-radius:8px; font-weight:700; }
.breadcrumbs .crumb.chevron { font-size: 14px; }
.breadcrumbs .crumb.chevron.current { cursor:default; color:#fff; background: transparent; box-shadow:none; transform:none; }

.breadcrumbs .current-title { margin: 0 10px; color: rgba(255,255,255,0.9); font-weight:600; }
.breadcrumbs .crumb.back { margin-right:8px; font-size:18px; }
.breadcrumbs .crumb.forward { margin-left:8px; font-size:18px; }

/* Back-all and forward chevrons */
.breadcrumbs .crumb.back-all { margin-right:8px; font-size:14px; }
.breadcrumbs .crumb.forward { margin-left:8px; font-size:14px; }

/* Drops grid and drop items */
.drops-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap:8px 12px; margin:10px 0; }
.drop { position:relative; padding:8px 10px; border-radius:6px; background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.03); font-size:0.95rem; }
.drop:hover { background: rgba(255,255,255,0.04); box-shadow: 0 0 6px rgba(0,0,0,0.25); }
.drop::after { content:""; position:absolute; top:0; right:0; width:0; height:0; border-top:18px solid transparent; border-left:18px solid transparent; border-top-right-radius:6px; }
.drop.common::after { border-top-color: rgba(200,200,200,0.22); }
.drop.uncommon::after { border-top-color: rgba(110,210,150,0.35); }
.drop.rare::after { border-top-color: rgba(90,150,255,0.35); }
.drop.epic::after { border-top-color: rgba(180,120,255,0.35); }
.drop.legendary::after { border-top-color: rgba(242,197,124,0.55); }

/* Typography & layout adjustments */
.html { font-size: clamp(15px, 1.2vw + 12px, 18px); -webkit-text-size-adjust: 100%; }
#article-container { max-width: 1400px; margin: 28px auto; padding: 20px 28px; }
#article-container article { max-width: 85ch; margin: 0 auto 40px; font-size: clamp(1rem, 0.9vw + 0.6rem, 1.05rem); line-height:1.65; color: rgba(230,255,245,0.98); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; hyphens:auto; word-break:break-word; }
#article-container article .lead { font-size: clamp(1.03rem, 1.1vw + 0.4rem, 1.15rem); line-height:1.8; margin-bottom:1rem; color:#eaf7fd; opacity:0.98; }
#article-container article .title { font-size: clamp(1.6rem, 3.6vw, 2.6rem); line-height:1.05; margin-bottom:.35rem; letter-spacing:0.4px; }
#article-container article h2 { font-size: clamp(1.05rem, 1.6vw, 1.3rem); margin-top:1.4rem; margin-bottom:.6rem; color:#fff7e8; }
#article-container article .meta, #article-container article .note { color: rgba(255,255,255,0.64); font-size:0.95rem; margin-bottom:10px; }
#article-container article p { margin:0 0 1rem 0; }
#article-container article ul, #article-container article ol { margin:0 0 1rem 1.25rem; padding:0; line-height:1.6; }
#article-container article .infobox { border-radius:10px; padding:14px 18px; margin:12px 0 20px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.04); color: rgba(255,255,255,0.95); width:100%; max-width:85ch; margin-left:auto; margin-right:auto; box-sizing:border-box; }

/* Accordion refined behavior */
.accordion { margin-top:14px; }
.accordion-item + .accordion-item { margin-top:10px; }
.accordion-header { padding:12px 14px; border-radius:8px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; background: linear-gradient(180deg, rgba(14,22,32,0.04), rgba(10,17,26,0.02)); border:1px solid rgba(255,255,255,0.03); transition: transform .12s ease, box-shadow .12s ease; }
.accordion-header[aria-expanded="true"] { box-shadow: 0 6px 18px rgba(0,0,0,0.35); transform: translateY(-2px); }
.accordion-content { max-height:0; overflow:hidden; transition: max-height .26s ease, padding .18s ease; padding:0 14px; border-radius:6px; background:transparent; }
.accordion-content.open { padding:12px 14px 14px; max-height:1000px; }

/* Drops grid responsive adjustments */
.drops-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:8px 12px; margin:10px 0; }
.drop { padding:8px 10px; border-radius:6px; background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.03); font-size:0.95rem; }

/* Small utility tweaks */
#article-container article strong { font-weight:700; }
#article-container article em { font-style:italic; color:#f6e9ff; }

@media (max-width:900px) { #article-container { padding:14px; } #article-container article { max-width:100%; font-size: clamp(0.98rem, 2.2vw, 1.02rem); } .drops-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:480px) { .drops-grid { grid-template-columns: 1fr; } .accordion-header { padding:10px; } }

/* Lazy image helper: start hidden to avoid layout jank and fade-in when loaded */
.lazy { opacity: 0; transition: opacity 220ms ease-in-out; }
.lazy-loaded { opacity: 1; }

/* =========================
   FANCY THEME LAYER (appended)
   — cinematic entrances, ambient layers, borders, glows, scrollbars,
     tooltips, section dividers, theme shadows (non-destructive)
   ========================= */

/* Helper variables already defined in :root */

@keyframes articleFadeUp { 0% { opacity:0; transform: translateY(12px) scale(.995); filter: blur(6px) saturate(.9); } 60% { opacity:1; transform: translateY(-4px) scale(1.002); filter: none; } 100% { opacity:1; transform: translateY(0) scale(1); filter: none; } }
#article-container article.enter { animation: articleFadeUp 720ms cubic-bezier(.2,.9,.25,1) both; }
#article-container article.theme-frost.enter::before, #article-container article.theme-machine.enter::before, #article-container article.theme-lore.enter::before { content: ""; position:absolute; inset:0; pointer-events:none; border-radius: inherit; mix-blend-mode: screen; opacity: 0.06; }
#article-container article.theme-frost.enter::before { background: radial-gradient(ellipse at 20% 10%, rgba(224,247,255,0.18), transparent 18%);} #article-container article.theme-machine.enter::before { background: radial-gradient(ellipse at 80% 20%, rgba(76,201,240,0.12), transparent 18%); } #article-container article.theme-lore.enter::before { background: radial-gradient(ellipse at 50% 5%, rgba(255,220,163,0.12), transparent 18%); }

#article-container article.theme-frost::after { content: ""; position:absolute; inset:0; pointer-events:none; background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px); background-size:6px 6px; opacity:0.06; animation: frostDrift 14s linear infinite; }
@keyframes frostDrift { 0% { transform: translateY(0) translateX(0);} 100% { transform: translateY(-24px) translateX(12px);} }
#article-container article.theme-machine::after { content: ""; position:absolute; inset:0; pointer-events:none; background-image: radial-gradient(circle, rgba(76,201,240,0.06) 1px, transparent 1px); background-size:14px 14px; opacity:0.06; animation: emberDrift 10s linear infinite; } @keyframes emberDrift { 0% { transform: translateY(0) translateX(0);} 100% { transform: translateY(-36px) translateX(-8px);} }
#article-container article.theme-lore::after { content: ""; position:absolute; inset:0; pointer-events:none; background-image: radial-gradient(circle, rgba(255,230,180,0.06) 1px, transparent 1px); background-size:10px 10px; opacity:0.06; animation: loreMotes 18s linear infinite; } @keyframes loreMotes { 0% { transform: translateY(0) translateX(0);} 100% { transform: translateY(-12px) translateX(18px);} }

#article-container article.theme-machine { box-shadow: 0 12px 28px rgba(0,0,0,0.45), 0 0 18px rgba(76,201,240,0.04) inset; position:relative; overflow:visible; }
#article-container article.theme-machine::before { content:""; pointer-events:none; position:absolute; inset:-2px; border-radius:inherit; padding:2px; background: linear-gradient(90deg, rgba(76,201,240,0.06), rgba(110,200,255,0.02)); mask: linear-gradient(#000 0 0); opacity:0.85; filter: blur(8px); transform: scale(0.999); }
#article-container article.theme-frost { box-shadow: 0 12px 28px rgba(0,0,0,0.35), 0 0 18px rgba(160,216,255,0.03) inset; }
#article-container article.theme-frost::before { content:""; position:absolute; inset:-4px; border-radius:inherit; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(160,216,255,0.02)); mix-blend-mode: screen; filter: blur(6px) contrast(1.05); }
#article-container article.theme-lore::before { content:""; position:absolute; inset:-3px; border-radius:inherit; background: radial-gradient(circle at 20% 10%, rgba(255,220,163,0.04), transparent 18%), linear-gradient(90deg, rgba(255,220,163,0.03), rgba(255,200,120,0.01)); filter: blur(6px); }
@keyframes themePulse { 0% { opacity:.85; transform: scale(0.998);} 50% { opacity:.95; transform: scale(1.001);} 100% { opacity:.85; transform: scale(0.998);} } #article-container article.theme-machine::before, #article-container article.theme-frost::before, #article-container article.theme-lore::before { animation: themePulse 6.5s ease-in-out infinite; }

#article-container article.theme-machine .title::after { content:""; display:inline-block; margin-left:10px; width:12px; height:12px; border-radius:50%; background: radial-gradient(circle at 35% 35%, var(--machine-accent), transparent 60%); box-shadow: 0 0 18px rgba(76,201,240,0.28); vertical-align: middle; }
#article-container article.theme-frost .title::after { content:""; display:inline-block; margin-left:10px; width:14px; height:14px; border-radius:3px; background: linear-gradient(180deg, #fff, rgba(160,216,255,0.7)); box-shadow: 0 0 22px rgba(160,216,255,0.14); transform: rotate(12deg); }
#article-container article.theme-lore .title::after { content:""; display:inline-block; margin-left:10px; width:14px; height:14px; border-radius:2px; background: radial-gradient(circle, rgba(255,220,163,0.9), rgba(255,200,120,0.6)); box-shadow: 0 0 20px rgba(255,200,120,0.12); }

/* Themed scrollbars */
#article-container article.theme-machine::-webkit-scrollbar { height:10px; width:10px; }
#article-container article.theme-machine::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(76,201,240,0.18), rgba(110,200,255,0.28)); border-radius:8px; }
#article-container article.theme-machine::-webkit-scrollbar-track { background: rgba(0,0,0,0.18); }
#article-container article.theme-frost::-webkit-scrollbar { height:10px; width:10px; }
#article-container article.theme-frost::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(224,247,255,0.28), rgba(160,216,255,0.18)); border-radius:8px; }
#article-container article.theme-frost::-webkit-scrollbar-track { background: rgba(0,0,0,0.12); }
#article-container article.theme-lore::-webkit-scrollbar { height:10px; width:10px; }
#article-container article.theme-lore::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(255,220,163,0.22), rgba(255,200,120,0.3)); border-radius:8px; }
#article-container article.theme-lore::-webkit-scrollbar-track { background: rgba(0,0,0,0.12); }

/* Tooltip system */
.tooltip { position: relative; }
.tooltip .tooltip-content { position:absolute; z-index:60; top:-8px; left:50%; transform: translate(-50%,-100%); min-width:160px; max-width:320px; padding:8px 10px; border-radius:8px; background: rgba(6,8,10,0.95); color:#f6f9ff; font-size:0.92rem; line-height:1.2; box-shadow: 0 10px 30px rgba(0,0,0,0.5); opacity:0; pointer-events:none; transition:140ms ease; }
.tooltip:hover .tooltip-content { opacity:1; pointer-events:auto; transform: translate(-50%,-112%); }
.tooltip.theme-machine .tooltip-content { background: linear-gradient(180deg, rgba(6,10,12,0.96), rgba(12,20,22,0.95)); border:1px solid rgba(76,201,240,0.12); box-shadow: 0 6px 18px rgba(76,201,240,0.06); }
.tooltip.theme-frost .tooltip-content { background: linear-gradient(180deg, rgba(10,16,18,0.96), rgba(10,18,20,0.94)); border:1px solid rgba(224,247,255,0.12); box-shadow: 0 6px 18px rgba(160,216,255,0.06); }
.tooltip.theme-lore .tooltip-content { background: linear-gradient(180deg, rgba(18,12,8,0.96), rgba(28,18,12,0.94)); border:1px solid rgba(255,200,120,0.12); box-shadow: 0 6px 18px rgba(255,200,120,0.06); }
.tooltip .tooltip-content::after { content:""; position:absolute; bottom:-7px; left:50%; transform: translateX(-50%); width:10px; height:8px; background: inherit; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }

/* Section dividers */
.section-divider { display:flex; align-items:center; gap:12px; margin:18px 0; }
.section-divider .line { flex:1; height:2px; border-radius:2px; background: rgba(255,255,255,0.04); position:relative; overflow:hidden; }
.section-divider .line::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent); transform: translateX(-100%); animation: sweep 3s linear infinite; opacity:0.45; }
@keyframes sweep { to { transform: translateX(100%); } }
.section-divider .glyph { width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:8px; background: rgba(255,255,255,0.02); }
.section-divider.theme-frost .glyph { background: linear-gradient(180deg, rgba(160,216,255,0.06), rgba(255,255,255,0.02)); box-shadow: 0 6px 22px rgba(160,216,255,0.04) inset; }
.section-divider.theme-machine .glyph { background: linear-gradient(180deg, rgba(76,201,240,0.04), rgba(80,120,140,0.02)); box-shadow: 0 6px 22px rgba(76,201,240,0.03) inset; }
.section-divider.theme-lore .glyph { background: linear-gradient(180deg, rgba(255,220,163,0.04), rgba(255,200,120,0.02)); box-shadow: 0 6px 22px rgba(255,200,120,0.03) inset; }

/* Themed drop shadows */
#article-container article.theme-frost { filter: drop-shadow(0 18px 34px rgba(32,72,90,0.18)); }
#article-container article.theme-machine { filter: drop-shadow(0 20px 46px rgba(30,48,60,0.22)); }
#article-container article.theme-lore { filter: drop-shadow(0 18px 40px rgba(80,48,28,0.20)); }

#article-container article .title { display:inline-flex; align-items:center; gap:8px; }
#article-container article .meta { opacity:0.9; }
.accordion-content { will-change: max-height, padding; }

@media (prefers-reduced-motion: reduce) { #article-container article.enter, #article-container article::after, #article-container article::before { animation:none !important; transition:none !important; } }
/* ==========================================
   ATTACK LIST STYLES
   For use within articles to showcase machine attacks
   ========================================== */
.attack-list {
  display: grid;
  gap: 12px;
}

.attack-card {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 12px 14px;
  border-radius: 10px;
  backdrop-filter: blur(3px);
  transition: 0.2s;
}

.attack-card:hover {
  border-color: rgba(255,255,255,0.25);
  transform: translateY(-2px);
}

.attack-card h3 {
  margin: 0 0 6px;
  font-size: 1.1em;
  color: var(--accent-color-machine, #9ad3ff);
}

.attack-card p {
  margin: 0;
  opacity: 0.9;
  line-height: 1.35;
}

/* ==========================================
   TRIBE THEME — CARJA (SUN EMPIRE)
   Matching style strength to MACHINE / FROST / LORE
   ========================================== */

#article-container article.theme-tribe {
    position: relative;
    background: rgba(30,10,5,0.75); /* warm desert red-brown */
    border-radius: var(--radius-lg);
    padding: 24px;
    border: 1px solid rgba(255,180,80,0.15);
    box-shadow: 0 12px 32px rgba(0,0,0,0.45),
                0 0 18px rgba(255,170,70,0.06) inset;
    overflow: visible;
    animation: articleFadeUp 720ms cubic-bezier(.2,.9,.25,1) both;
}

/* Sun-themed rim glow */
#article-container article.theme-tribe::before {
    content:"";
    position:absolute;
    inset:-3px;
    border-radius:inherit;
    pointer-events:none;
    background: linear-gradient(
        90deg,
        rgba(255,150,50,0.08),
        rgba(255,200,120,0.04)
    );
    filter: blur(8px);
    opacity: 0.8;
    animation: themePulse 7s ease-in-out infinite;
}

/* Ambient desert-light particles */
#article-container article.theme-tribe::after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background-image:
        radial-gradient(circle, rgba(255,190,120,0.07) 1px, transparent 1px);
    background-size:12px 12px;
    opacity:0.06;
    animation: tribeMotes 16s linear infinite;
}

@keyframes tribeMotes {
    0%   { transform: translateY(0px) translateX(0px); }
    100% { transform: translateY(-20px) translateX(16px); }
}

/* Title + Sun Accent Icon */
#article-container article.theme-tribe .title {
    color: #ffddaa;
    text-shadow: 0 0 8px rgba(255,200,140,0.3);
}

#article-container article.theme-tribe .title::after {
    content:"";
    display:inline-block;
    margin-left:10px;
    width:14px;
    height:14px;
    border-radius:50%;
    background: radial-gradient(circle at 35% 35%, #ffcc77, transparent 60%);
    box-shadow: 0 0 18px rgba(255,180,90,0.38);
    vertical-align: middle;
}

/* Table accessibility and print rules (merged from accessibility.css) */
table { border-collapse: collapse; width: 100%; }
th, td { padding: 12px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.1); }
th { background: rgba(242,197,124,0.1); font-weight: 600; }

@media print {
  .no-print { display: none !important; }
  body { background: white !important; color: black !important; }
  .search-wrap, .back-to-top, .back-to-home, .theme-toggle { display: none !important; }
  .article { page-break-inside: avoid; }
  h1, h2, h3 { page-break-after: avoid; }
}