/* ============================================================
   ROOTKILL, page + wiki component layer
   Loads AFTER style.css. Reuses its design tokens (var(--...)).
   Nothing here overrides the base site; it only adds.
   ============================================================ */

:root{
  /* rarity ramp (ARPG loot) */
  --r-common:    #A99E92;
  --r-uncommon:  #7FB069;
  --r-elite:     #4bb3c9;
  --r-rare:      #5b8dd9;
  --r-epic:      #b07be0;
  --r-legendary: #F5A524;

  /* threat accents for enemy/role tags */
  --t-basic:  #A99E92;
  --t-fast:   #5bd1c9;
  --t-tank:   #d98a4a;
  --t-swarm:  #c9c24b;
  --t-boom:   #e0574d;
  --t-air:    #7bb0e0;
  --t-caster: #b07be0;
  --t-evasive:#8de08d;
}

/* ============================================================
   SHARED: game-hero (landing page)
   ============================================================ */
.game-hero{ position:relative; z-index:2; padding:clamp(48px,7vw,80px) 0 clamp(40px,5vw,56px); overflow:hidden; }
.game-hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
.game-hero-copy .eyebrow{ font-family:var(--mono); font-size:.82rem; color:var(--accent); letter-spacing:.08em; margin-bottom:16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.game-hero-copy h1{ font-family:var(--display); font-weight:700; font-size:clamp(2.6rem,6vw,4.4rem); line-height:1; letter-spacing:-.02em; margin-bottom:18px; }
.game-hero-copy .tagline{ font-size:1.2rem; color:var(--text-2); margin-bottom:28px; max-width:46ch; }
.game-hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:24px; }
.game-hero-meta{ font-family:var(--mono); font-size:.8rem; color:var(--text-3); display:flex; gap:20px; flex-wrap:wrap; }

.back-link{ font-family:var(--mono); font-size:.86rem; color:var(--text-2); display:inline-flex; align-items:center; gap:8px; margin-bottom:4px; transition:.15s; }
.back-link:hover{ color:var(--accent); }

/* framed hero art (for pages that ship real key art, e.g. Patchy) */
.game-hero-art{ border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line-2); box-shadow:var(--shadow-lift), var(--hairline); }
.game-hero-art img{ width:100%; display:block; }

.story-block{ max-width:780px; margin:0 auto; text-align:center; }
.story-block .lore{ font-family:var(--display); font-size:clamp(1.4rem,3vw,1.9rem); line-height:1.42; font-weight:500; }
.story-block .lore .amber{ color:var(--accent); }
.story-block .sub{ color:var(--text-2); margin-top:20px; font-size:1.05rem; }

.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feature{ display:flex; gap:16px; padding:22px; background:var(--grad-surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm), var(--hairline); transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.feature:hover{ border-color:var(--accent-dim); transform:translateY(-3px); box-shadow:var(--shadow-card), 0 0 0 1px rgba(245,165,36,.1), var(--hairline); }
.feature .ficon{ font-family:var(--mono); color:var(--accent); font-weight:700; font-size:1.1rem; flex-shrink:0; padding-top:2px; }
.feature h3{ font-family:var(--display); font-size:1.08rem; font-weight:700; margin-bottom:5px; }
.feature p{ color:var(--text-2); font-size:.94rem; }

.final-cta{ text-align:center; max-width:660px; margin:0 auto; }
.final-cta h2{ font-family:var(--display); font-size:clamp(1.9rem,4vw,2.6rem); font-weight:700; margin-bottom:16px; letter-spacing:-.01em; }
.final-cta p{ color:var(--text-2); font-size:1.1rem; margin-bottom:28px; }

/* ============================================================
   IMAGE SLOTS (empty, drop real art in later)
   ============================================================ */
.imgslot{
  position:relative; width:100%; border-radius:var(--radius);
  border:1px dashed var(--line-2); background:
    repeating-linear-gradient(135deg, transparent, transparent 9px, rgba(245,165,36,.03) 9px, rgba(245,165,36,.03) 10px),
    var(--bg-well);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--text-3); font-family:var(--mono); font-size:.76rem; letter-spacing:.06em;
  min-height:150px; padding:18px;
}
.imgslot::before{ content:"[ "; color:var(--accent); }
.imgslot::after{ content:" ]"; color:var(--accent); }
.imgslot.tall{ aspect-ratio:3/4; }
.imgslot.wide{ aspect-ratio:16/9; }
.imgslot.hero{ aspect-ratio:16/10; min-height:220px; font-size:.82rem; }
.imgslot.sq{ aspect-ratio:1/1; }

/* Drop-in art: an <img> fills the slot and covers the placeholder text. If the
   file is missing, onerror removes the img and the dashed placeholder returns. */
.imgslot{ overflow:hidden; }
.imgslot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; z-index:1; display:block; }
.imgslot:has(img){ border-style:solid; border-color:var(--line); }

.slot-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.slot-gallery .imgslot{ aspect-ratio:16/9; min-height:0; }
.slot-gallery .wide{ grid-column:span 2; }

/* ============================================================
   WIKI LAYOUT
   ============================================================ */
.wiki-shell{ display:grid; grid-template-columns:246px 1fr; gap:44px; align-items:start; }
.wiki-side{ position:sticky; top:88px; align-self:start; }
.wiki-side .side-cmd{ font-family:var(--mono); font-size:.8rem; color:var(--text-3); margin-bottom:14px; padding-left:2px; }
.wiki-side .side-cmd .p{ color:var(--accent); }
.wiki-nav{ display:flex; flex-direction:column; gap:2px; border-left:1px solid var(--line); }
.wiki-nav a{
  font-family:var(--mono); font-size:.86rem; color:var(--text-2);
  padding:9px 14px; border-left:2px solid transparent; margin-left:-1px; transition:.14s;
  display:flex; align-items:center; gap:9px;
}
.wiki-nav a:hover{ color:var(--text); background:var(--surface); }
.wiki-nav a.active{ color:var(--accent); border-left-color:var(--accent); background:linear-gradient(90deg, rgba(245,165,36,.12), transparent 80%); box-shadow:-1px 0 8px -2px var(--accent-glow); }
.wiki-nav a .ic{ color:var(--text-3); font-size:.9em; }
.wiki-nav a.active .ic{ color:var(--accent); }

.wiki-main{ min-width:0; }
.wiki-crumbs{ font-family:var(--mono); font-size:.8rem; color:var(--text-3); margin-bottom:18px; display:flex; gap:8px; flex-wrap:wrap; }
.wiki-crumbs a{ color:var(--text-2); }
.wiki-crumbs a:hover{ color:var(--accent); }
.wiki-crumbs .sep{ color:var(--line-2); }

.wiki-title{ font-family:var(--display); font-weight:700; font-size:clamp(2rem,4.4vw,2.9rem); letter-spacing:-.02em; margin-bottom:12px; }
.wiki-lede{ color:var(--text-2); font-size:1.08rem; max-width:64ch; margin-bottom:14px; }

.wiki-main h2{ font-family:var(--display); font-weight:700; font-size:1.5rem; letter-spacing:-.01em; margin:44px 0 16px; padding-top:14px; border-top:1px solid var(--line); }
.wiki-main h2:first-of-type{ border-top:none; padding-top:0; }
.wiki-main h3{ font-family:var(--display); font-weight:700; font-size:1.12rem; margin:26px 0 10px; }
.wiki-main p{ color:var(--text-2); margin-bottom:14px; max-width:70ch; }
.wiki-main p strong{ color:var(--text); font-weight:600; }
.wiki-main a.ilink{ color:var(--accent); text-underline-offset:3px; }
.wiki-main a.ilink:hover{ text-decoration:underline; }
.wiki-main ul.plain{ list-style:none; margin:0 0 16px; max-width:70ch; }
.wiki-main ul.plain li{ color:var(--text-2); padding:7px 0 7px 22px; position:relative; border-bottom:1px solid var(--line); }
.wiki-main ul.plain li:last-child{ border-bottom:none; }
.wiki-main ul.plain li::before{ content:"›"; color:var(--accent); position:absolute; left:4px; font-family:var(--mono); }
.wiki-main ul.plain li strong{ color:var(--text); }

.callout{
  border:1px solid var(--line); border-left:3px solid var(--accent);
  background:linear-gradient(90deg, rgba(245,165,36,.06), var(--surface) 42%);
  border-radius:var(--radius);
  padding:16px 20px; margin:20px 0; color:var(--text-2); font-size:.96rem;
  box-shadow:var(--shadow-sm), var(--hairline);
}
.callout .k{ font-family:var(--mono); color:var(--accent); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; display:block; margin-bottom:6px; }
/* in-design / concept callout: dashed edge so proposed systems read as not-yet-live */
.callout.concept{ border-style:dashed; border-left-style:solid; background:var(--bg-well); }
.callout.concept .k{ color:var(--accent); }
.chip.concept{ color:var(--accent); border-color:var(--accent-dim); }

/* ============================================================
   WIKI HUB CARDS
   ============================================================ */
.hub-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px; }
.hub-card{
  display:block; background:var(--grad-surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 22px 20px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow:var(--shadow-sm), var(--hairline); position:relative; overflow:hidden;
}
.hub-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:0; transition:opacity .18s ease;
}
.hub-card:hover{ border-color:var(--accent-dim); transform:translateY(-4px); box-shadow:var(--shadow-lift), 0 0 0 1px rgba(245,165,36,.14), var(--hairline); }
.hub-card:hover::before{ opacity:.8; }
.hub-card .hc-k{ font-family:var(--mono); font-size:.74rem; color:var(--text-3); letter-spacing:.08em; }
.hub-card h3{ font-family:var(--display); font-weight:700; font-size:1.2rem; margin:8px 0 8px; color:var(--text); }
.hub-card p{ color:var(--text-2); font-size:.92rem; margin:0; }
.hub-card .hc-go{ display:inline-block; margin-top:14px; font-family:var(--mono); font-size:.8rem; color:var(--accent); }

/* ============================================================
   ENTITY CARDS (enemies / towers / daemons)
   ============================================================ */
.entity-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:8px; }
.entity-grid.tri{ grid-template-columns:repeat(3,1fr); }
.entity{
  background:var(--grad-surface); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column;
  box-shadow:var(--shadow-sm), var(--hairline);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.entity:hover{ border-color:var(--line-2); box-shadow:var(--shadow-card), var(--hairline); transform:translateY(-2px); }
.entity .ent-art{ border-bottom:1px solid var(--line); }
.entity .ent-art .imgslot{ border:none; border-radius:0; min-height:0; aspect-ratio:16/10; }
.entity .ent-body{ padding:18px 20px 20px; display:flex; flex-direction:column; flex:1; }
.entity .ent-head{ display:flex; align-items:center; gap:10px; margin-bottom:4px; flex-wrap:wrap; }
.entity .ent-name{ font-family:var(--display); font-weight:700; font-size:1.22rem; }
.entity .ent-role{ font-family:var(--mono); font-size:.74rem; color:var(--text-3); letter-spacing:.05em; margin-bottom:12px; }
.entity .ent-desc{ color:var(--text-2); font-size:.94rem; margin-bottom:14px; flex:1; }

/* frame cards: taller portrait art (3:4 renders) */
.entity.frame .ent-art .imgslot{ aspect-ratio:3/4; max-height:440px; }

/* frame rarity roster (7-col grid, scrolls on narrow screens) */
.roster{ border:1px solid var(--line); border-radius:var(--radius); overflow-x:auto; margin:16px 0 6px; box-shadow:var(--shadow-sm), var(--hairline); }
.rrow{ display:grid; grid-template-columns:1.15fr repeat(6,1fr); min-width:640px; border-bottom:1px solid var(--line); }
.rrow:last-child{ border-bottom:none; }
.rrow .kk, .rrow .vv{ font-family:var(--mono); font-size:.8rem; padding:10px 12px; border-right:1px solid var(--line); }
.rrow .kk{ color:var(--text-2); background:var(--bg-well); font-weight:700; }
.rrow .vv{ color:var(--text); }
.rrow .vv:last-child{ border-right:none; }
.rrow.rhead .kk{ color:var(--accent); letter-spacing:.06em; text-transform:uppercase; font-size:.72rem; }

/* small threat/type chip */
.chip{
  font-family:var(--mono); font-size:.68rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:3px 8px; border-radius:5px;
  border:1px solid var(--line-2); color:var(--text-2); background:var(--bg-well); white-space:nowrap;
}
.chip.basic{ color:var(--t-basic); }
.chip.fast{ color:var(--t-fast); border-color:var(--t-fast); }
.chip.tank{ color:var(--t-tank); border-color:var(--t-tank); }
.chip.swarm{ color:var(--t-swarm); border-color:var(--t-swarm); }
.chip.boom{ color:var(--t-boom); border-color:var(--t-boom); }
.chip.air{ color:var(--t-air); border-color:var(--t-air); }
.chip.caster{ color:var(--t-caster); border-color:var(--t-caster); }
.chip.evasive{ color:var(--t-evasive); border-color:var(--t-evasive); }
.chip.mimic{ color:#b07be0; border-color:#b07be0; }

/* stat readout bars */
.stats{ display:flex; flex-direction:column; gap:9px; margin-top:auto; }
.stat{ display:grid; grid-template-columns:64px 1fr 46px; align-items:center; gap:10px; }
.stat .lbl{ font-family:var(--mono); font-size:.72rem; color:var(--text-3); letter-spacing:.04em; }
.stat .val{ font-family:var(--mono); font-size:.82rem; font-weight:700; color:var(--text); text-align:right; font-variant-numeric:tabular-nums; }

/* difficulty toggle (malware page) */
.diff-toggle{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:6px 0 4px; }
.diff-label{ font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); margin-right:4px; }
.diff-btn{
  font-family:var(--mono); font-size:.82rem; font-weight:700; letter-spacing:.02em;
  color:var(--text-2); background:var(--grad-surface); border:1px solid var(--line-2);
  padding:8px 16px; border-radius:9px; cursor:pointer;
  transition:color .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.diff-btn:hover{ color:var(--text); border-color:var(--accent-dim); }
.diff-btn.active{ color:#1a1206; background:var(--grad-amber); border-color:transparent; box-shadow:0 5px 16px rgba(245,165,36,.28), var(--hairline); }
.stat .track{ height:10px; border-radius:5px; background:var(--bg-well); border:1px solid var(--line); overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,.5); }
.stat .fill{ display:block; height:100%; min-width:4px; border-radius:5px 3px 3px 5px; background:var(--accent); box-shadow:0 0 8px -1px currentColor, inset 0 1px 0 rgba(255,255,255,.25); transition:width .25s ease; }
.stat .fill.hp{ background:linear-gradient(90deg, #5f8f4a, var(--ok)); color:var(--ok); }
.stat .fill.spd{ background:linear-gradient(90deg, #2f8f8a, var(--t-fast)); color:var(--t-fast); }
.stat .fill.arm{ background:linear-gradient(90deg, #9a5f2f, var(--t-tank)); color:var(--t-tank); }
.stat .fill.dmg{ background:linear-gradient(90deg, #9a3a34, var(--t-boom)); color:var(--t-boom); }

/* key-value block (mono spec sheet) */
.spec{ font-family:var(--mono); font-size:.86rem; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:18px 0; box-shadow:var(--shadow-sm), var(--hairline); }
.spec .row{ display:grid; grid-template-columns:200px 1fr; gap:0; border-bottom:1px solid var(--line); }
.spec .row:last-child{ border-bottom:none; }
.spec .row .kk{ padding:11px 16px; color:var(--text-3); background:var(--bg-well); border-right:1px solid var(--line); }
.spec .row .vv{ padding:11px 16px; color:var(--text); }
.spec .row .vv .accent{ color:var(--accent); }

/* rarity legend / chips */
.rar{ font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:3px 9px; border-radius:5px; border:1px solid currentColor; white-space:nowrap; }
.rar.common{ color:var(--r-common); }
.rar.uncommon{ color:var(--r-uncommon); }
.rar.elite{ color:var(--r-elite); }
.rar.rare{ color:var(--r-rare); }
.rar.epic{ color:var(--r-epic); }
.rar.legendary{ color:var(--r-legendary); }
.rar-row{ display:flex; gap:10px; flex-wrap:wrap; margin:16px 0 22px; }

/* map / sector ladder */
.ladder{ display:flex; flex-direction:column; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:18px 0; }
.rung{ display:flex; align-items:center; gap:16px; padding:14px 18px; border-bottom:1px solid var(--line); background:var(--grad-surface); transition:background .16s ease; }
.rung:hover{ background:var(--surface-2); }
.rung:last-child{ border-bottom:none; }
.rung .num{ font-family:var(--mono); font-weight:700; color:var(--accent); font-size:.9rem; width:2ch; }
.rung .mname{ font-family:var(--display); font-weight:700; font-size:1.02rem; }
.rung .mnote{ font-family:var(--mono); font-size:.8rem; color:var(--text-3); margin-left:auto; }

.sector-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:16px 0; }
.sec{ display:flex; align-items:center; gap:12px; padding:13px 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--grad-surface); box-shadow:var(--shadow-sm), var(--hairline); }
.sec.live{ box-shadow:var(--shadow-sm), 0 0 0 1px rgba(245,165,36,.12), var(--hairline); }
.sec .sidx{ font-family:var(--mono); color:var(--text-3); font-size:.8rem; width:3ch; }
.sec .sname{ font-family:var(--mono); font-weight:700; letter-spacing:.06em; color:var(--text); }
.sec .slock{ margin-left:auto; font-family:var(--mono); font-size:.7rem; color:var(--text-3); letter-spacing:.08em; }
.sec.live{ border-color:var(--accent-dim); }
.sec.live .sname{ color:var(--accent); }
.sec.live .slock{ color:var(--ok); }

/* generic two-col split used on some wiki pages */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }

/* prev/next footer nav */
.wiki-foot-nav{ display:flex; justify-content:space-between; gap:16px; margin-top:48px; padding-top:24px; border-top:1px solid var(--line); flex-wrap:wrap; }
.wiki-foot-nav a{ font-family:var(--mono); font-size:.84rem; color:var(--text-2); }
.wiki-foot-nav a:hover{ color:var(--accent); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .hub-grid{ grid-template-columns:repeat(2,1fr); }
  .feature-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .wiki-shell{ grid-template-columns:1fr; gap:24px; }
  .wiki-side{ position:static; top:auto; }
  .wiki-nav{ flex-direction:row; flex-wrap:wrap; border-left:none; gap:6px; }
  .wiki-nav a{ border:1px solid var(--line); border-radius:6px; margin-left:0; }
  .wiki-nav a.active{ border-color:var(--accent); }
  .game-hero-grid{ grid-template-columns:1fr; gap:32px; }
  .split{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .entity-grid, .entity-grid.tri, .hub-grid, .feature-grid, .sector-list, .slot-gallery{ grid-template-columns:1fr; }
  .slot-gallery .wide{ grid-column:span 1; }
  .spec .row{ grid-template-columns:130px 1fr; }
  .stat{ grid-template-columns:52px 1fr 40px; }
}