/*
Theme Name: GeneratePress WFToday
Theme URI: https://warframe.today
Description: warframe.today child theme. Dark origin-system skin matched to the official site's visual language: Roboto on near-black, gold labels, red CTAs, image-forward cards.
Author: warframe.today
Template: generatepress
Version: 1.4.3
*/

:root {
  --wf-ground: #121214;
  --wf-panel: #0B0B0D;
  --wf-panel-2: #17171A;
  --wf-card: #0E0E10;
  --wf-ink: #FFFFFF;
  --wf-ink-2: #C9CCD1;
  --wf-ink-3: #8A8F99;
  --wf-gold: #C6A45F;
  --wf-gold-bright: #DBBE7F;
  --wf-gold-border: rgba(198, 164, 95, 0.5);
  --wf-red: #D8262B;
  --wf-line: #26262B;
  --wf-good: #7FBF95;
  --wf-good-bg: #17211A;
  --wf-good-border: #3D6B4C;
}

/* ── Ground ─────────────────────────────────────────────── */
body {
  background-color: var(--wf-ground);
  background-image:
    radial-gradient(1px 1px at 12% 24%, rgba(255,255,255,0.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 12%, rgba(255,255,255,0.3) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 42% 68%, rgba(255,255,255,0.25) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 52%, rgba(255,255,255,0.35) 50%, transparent 51%);
  background-size: 520px 520px, 460px 460px, 620px 620px, 380px 380px;
  color: var(--wf-ink-2);
  font-family: Roboto, Arial, Helvetica, sans-serif;
}

a, .entry-content a { color: var(--wf-gold); text-decoration: none; }
a:hover, .entry-content a:hover { color: var(--wf-gold-bright); }

/* ── Header ─────────────────────────────────────────────── */
.site-header {
  background-color: var(--wf-panel);
  border-bottom: 1px solid var(--wf-gold);
}
.site-header .site-title a,
.site-header .main-title a,
.main-title a {
  font-family: Michroma, Roboto, sans-serif !important;
  font-size: 17px;
  letter-spacing: 0.08em;
  color: var(--wf-ink);
  text-transform: uppercase;
}
.site-header .wf-tld,
.main-title a .wf-tld { color: var(--wf-gold); }
.site-description { display: none; }

.main-navigation {
  background-color: var(--wf-panel);
}
.main-navigation .main-nav ul li a {
  color: var(--wf-ink);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a {
  color: var(--wf-gold);
}
.main-navigation ul ul {
  background-color: #101013;
  border: 1px solid var(--wf-line);
}
.main-navigation ul ul li a { text-transform: none; letter-spacing: 0.02em; }

/* Red CTA appended to primary nav */
.main-navigation .main-nav ul li.wf-nav-cta > a {
  background: var(--wf-red);
  color: #FFFFFF;
  font-weight: 700;
  margin-left: 14px;
  padding-left: 20px;
  padding-right: 20px;
}
.main-navigation .main-nav ul li.wf-nav-cta > a:hover { background: #B71E23; color: #FFFFFF; }

/* ── Worldstate strip ───────────────────────────────────── */
.wf-worldstate {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  background: var(--wf-panel);
  border-bottom: 1px solid var(--wf-line);
}
.wf-worldstate > div {
  padding: 11px 26px;
  font-size: 13px;
  color: var(--wf-ink-2);
  text-align: center;
}
.wf-worldstate b { color: var(--wf-gold); font-weight: 700; letter-spacing: 0.06em; }

/* ── Content area ───────────────────────────────────────── */
.site-content, .separate-containers .inside-article, .one-container .container {
  background-color: transparent;
}
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.widget-area .widget {
  background-color: rgba(14, 14, 16, 0.92);
  border: 1px solid var(--wf-line);
}

.entry-title, .entry-title a, h1, h2, h3, h4 { color: var(--wf-ink); }
.entry-content h2 {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--wf-gold);
  padding-bottom: 10px;
}
.entry-content h3 { font-weight: 700; }
.entry-content { font-size: 16.5px; line-height: 1.7; }

.entry-content .wp-block-image {
  background: var(--wf-card);
  border: 1px solid var(--wf-gold-border);
  padding: 14px 14px 0;
  text-align: center;
}
.entry-content .wp-block-image img { border: 0; display: inline-block; max-width: 100%; height: auto; }
.entry-content img { border: 1px solid var(--wf-gold-border); }
.entry-content .wp-block-image img, .entry-content .wp-block-embed img { border: 0; }
.wp-block-image figcaption {
  background: transparent;
  color: var(--wf-ink-3);
  font-size: 12.5px;
  padding: 10px 6px;
  margin-top: 0;
}
.wp-block-embed { border: 1px solid var(--wf-gold-border); background: var(--wf-card); padding: 10px; }

/* Tables in the official style */
.entry-content table, .wp-block-table table {
  border: 1px solid var(--wf-gold-border);
  border-collapse: collapse;
  width: 100%;
}
.entry-content table th, .wp-block-table th {
  background: var(--wf-card);
  color: var(--wf-gold);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 0;
  border-bottom: 1px solid var(--wf-line);
  padding: 12px 16px;
  text-align: left;
}
.entry-content table td, .wp-block-table td {
  border: 0;
  border-top: 1px solid var(--wf-line);
  padding: 12px 16px;
  font-size: 15px;
}
.entry-content table tr:nth-child(even) td { background: var(--wf-panel-2); }

/* Buttons */
.button, .wp-block-button__link, input[type="submit"] {
  background: var(--wf-red);
  color: #FFFFFF;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 0;
}
.button:hover, .wp-block-button__link:hover, input[type="submit"]:hover { background: #B71E23; color: #FFFFFF; }

/* Post list / archives as bordered cards */
.archive .inside-article, .blog .inside-article, .search .inside-article {
  border: 1px solid var(--wf-gold-border);
}
.entry-meta, .posted-on, .byline { color: var(--wf-ink-3); font-size: 13px; }
.entry-summary { color: var(--wf-ink-2); }

/* Sidebar widgets */
.widget-area .widget-title {
  color: var(--wf-gold);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--wf-gold-border);
  padding-bottom: 8px;
}
.widget-area .widget a { color: var(--wf-ink-2); }
.widget-area .widget a:hover { color: var(--wf-gold); }

/* ── Frame database pages ───────────────────────────────── */
.wf-tabnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--wf-gold);
  margin: 0 0 26px;
}
.wf-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--wf-ink-2);
  font-family: Roboto, Arial, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 20px;
  cursor: pointer;
}
.wf-tab:hover { color: var(--wf-ink); }
.wf-tab.is-active { color: var(--wf-gold); border-bottom-color: var(--wf-gold); }
.wf-tab:focus-visible { outline: 1px solid var(--wf-gold); outline-offset: -1px; }
.wf-tabpanel[hidden] { display: none !important; }
@media (max-width: 600px) { .wf-tab { padding: 10px 12px; font-size: 12.5px; } }

.wf-verdict {
  background: var(--wf-card);
  border: 1px solid var(--wf-gold);
  padding: 18px 22px;
  margin: 0 0 24px;
  font-size: 16.5px;
  color: var(--wf-ink);
}
.wf-verdict .wf-verdict-label {
  display: block;
  color: var(--wf-gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.wf-ability {
  background: var(--wf-card);
  border: 1px solid var(--wf-line);
  padding: 18px 22px;
  margin: 0 0 16px;
}
.wf-ability h3 { margin-top: 0; color: var(--wf-gold); }
.wf-ability .wf-ability-nums {
  font-size: 13.5px;
  color: var(--wf-ink-3);
  border-top: 1px solid var(--wf-line);
  padding-top: 10px;
  margin-top: 12px;
}
.wf-procon { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 22px; }
.wf-procon > div { border: 1px solid var(--wf-line); padding: 16px 20px; background: var(--wf-card); }
.wf-procon h4 { margin: 0 0 10px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.wf-procon .wf-pros h4 { color: var(--wf-good); }
.wf-procon .wf-cons h4 { color: var(--wf-red); }
.wf-procon ul { margin: 0; padding-left: 18px; }
.wf-procon li { margin-bottom: 6px; font-size: 14.5px; }
td.wf-best { color: var(--wf-gold); font-weight: 700; }
@media (max-width: 600px) { .wf-procon { grid-template-columns: 1fr; } }

/* Mod card grid */
.wf-modgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  margin: 18px 0 26px;
}
.wf-modgrid figure { margin: 0; text-align: center; }
.wf-modgrid img { width: 100%; height: auto; border: 0; }
.wf-modgrid figcaption { font-size: 12.5px; color: var(--wf-ink-3); padding-top: 6px; }

/* Tier list */
.wf-tier {
  border: 1px solid var(--wf-line);
  background: rgba(14, 14, 16, 0.9);
  padding: 22px 26px;
  margin: 0 0 26px;
}
.wf-tier-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 4px; }
.wf-tier-head .wf-tier-rank { font-size: 30px; font-weight: 700; }
.wf-tier-head .wf-tier-label { color: var(--wf-gold); font-size: 15px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.wf-tier-s .wf-tier-rank { color: var(--wf-gold); }
.wf-tier-a .wf-tier-rank { color: var(--wf-good); }
.wf-tier-b .wf-tier-rank { color: #6FA8DC; }
.wf-tier-c .wf-tier-rank { color: var(--wf-ink-3); }
.wf-tier-d .wf-tier-rank { color: var(--wf-red); }
.wf-tier-desc { color: var(--wf-ink-2); font-size: 14.5px; margin: 0 0 16px; }
.wf-tiergrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}
.wf-tiercard {
  border: 1px solid var(--wf-gold-border);
  background: var(--wf-card);
  text-align: center;
  display: flex;
  flex-direction: column;
}
.wf-tiercard img { width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; border: 0; }
.wf-tiercard .wf-tiername {
  color: var(--wf-gold);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 6px 3px;
}
.wf-tiercard .wf-tierwhy { color: var(--wf-ink-3); font-size: 11.5px; padding: 0 8px 10px; line-height: 1.4; }
a.wf-tiercard-link { display: block; }
a.wf-tiercard-link:hover .wf-tiercard { border-color: var(--wf-gold); }

/* Review badge helper (use in post content) */
.wf-reviewed {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--wf-good-bg);
  border: 1px solid var(--wf-good-border);
  color: #A8D8BA;
  font-size: 14px;
  padding: 12px 18px;
  margin: 0 0 22px;
}

/* ── Footer ─────────────────────────────────────────────── */
.site-footer { background: transparent; }
.site-info { display: none; }

.wf-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 44px 24px 28px;
  background: #0F0F11;
  border-top: 1px solid var(--wf-line);
  margin-top: 48px;
}
.wf-footer-head {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 900px;
}
.wf-footer-head::before, .wf-footer-head::after { content: ""; flex: 1; height: 1px; background: #33343A; }
.wf-footer-head span {
  color: var(--wf-ink);
  font-size: 19px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.wf-social { display: flex; gap: 16px; }
.wf-social a {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--wf-gold);
  display: flex; align-items: center; justify-content: center;
}
.wf-social a:hover { background: var(--wf-gold-bright); }
.wf-social svg { display: block; }
.wf-footer-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 38px;
  background: var(--wf-panel);
  width: 100%;
  padding: 14px 0;
  font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
}
.wf-footer-links a { color: var(--wf-ink); }
.wf-footer-links a:hover { color: var(--wf-gold); }
.wf-footer-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wf-footer-brand .wf-wordmark {
  font-family: Michroma, Roboto, sans-serif;
  font-size: 15px; letter-spacing: 0.08em; color: var(--wf-ink); text-transform: uppercase;
}
.wf-footer-brand .wf-wordmark .wf-tld { color: var(--wf-gold); }
.wf-legal {
  font-size: 12px; color: var(--wf-ink-3); max-width: 660px; text-align: center; line-height: 1.6;
}

/* ── Forms ──────────────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="url"], input[type="search"],
input[type="password"], input[type="tel"], textarea, select {
  background: var(--wf-panel-2);
  border: 1px solid var(--wf-line);
  color: var(--wf-ink);
  border-radius: 0;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--wf-gold);
  outline: 1px solid var(--wf-gold);
  background: var(--wf-panel-2);
  color: var(--wf-ink);
}
::placeholder { color: var(--wf-ink-3); }

/* ── TablePress ─────────────────────────────────────────── */
.tablepress { border: 1px solid var(--wf-gold-border); }
.tablepress thead th, .tablepress tfoot th {
  background: var(--wf-card);
  color: var(--wf-gold);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--wf-line);
}
.entry-content .tablepress tbody td, table.tablepress tbody td {
  background: transparent !important;
  color: var(--wf-ink-2) !important;
  border-top: 1px solid var(--wf-line);
}
.tablepress .even td, .tablepress tr:nth-child(even) td { background: var(--wf-panel-2) !important; }
.tablepress .row-hover tr:hover td, .tablepress tbody tr:hover td { background: #1E1E23; color: var(--wf-ink); }
.dataTables_wrapper, .dataTables_filter input, .dataTables_length select { color: var(--wf-ink-2); }

/* ── Table of contents (Easy TOC) ───────────────────────── */
div#ez-toc-container, #ez-toc-container, .ez-toc-v2_0_75 {
  background: var(--wf-card) !important;
  border: 1px solid var(--wf-gold-border) !important;
  border-radius: 0;
  box-shadow: none;
}
#ez-toc-container p.ez-toc-title, .ez-toc-title {
  color: var(--wf-gold);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#ez-toc-container a, #ez-toc-container a:visited { color: var(--wf-ink-2); }
#ez-toc-container a:hover { color: var(--wf-gold); }

/* ── Legacy content elements ────────────────────────────── */
.entry-content blockquote {
  border-left: 2px solid var(--wf-gold);
  background: var(--wf-card);
  color: var(--wf-ink-2);
}
.entry-content code, .entry-content pre {
  background: var(--wf-panel-2);
  color: var(--wf-gold-bright);
  border: 1px solid var(--wf-line);
}
.entry-content hr { border-color: var(--wf-line); }

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .wf-worldstate > div { padding: 8px 14px; font-size: 12px; }
  .wf-footer-links { gap: 20px; }
  .main-navigation .main-nav ul li.wf-nav-cta > a { margin-left: 0; }
}


/* ============ mod cards (server-rendered, real game chrome) ============ */
.wfmc {
  position: relative;
  width: 281px;
  height: 438px;
  font-family: "Roboto Condensed", Roboto, sans-serif;
  text-align: center;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.6));
  flex: none;
}
.wfmc-body { position: absolute; left: 5px; right: 5px; top: 6px; bottom: 14px; background: linear-gradient(180deg, #101114, #0B0C0F); }
.wfmc-art { position: absolute; left: 5px; right: 5px; top: 6px; height: 252px; overflow: hidden; }
.wfmc-art img { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
.wfmc-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(180deg, transparent, #0B0C0F); }
.wfmc-ftop, .wfmc-fbot { position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; }
.wfmc-ftop { top: 0; width: 281px; }
.wfmc-fbot { bottom: 0; width: 292px; }
.wfmc-ftop img, .wfmc-fbot img { width: 100%; display: block; border: 0; }
.wfmc-drain {
  position: absolute; top: 12px; right: 14px; z-index: 4;
  display: flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  background: rgba(10,11,14,.78);
  border: 1px solid rgba(220,224,232,.55);
  border-radius: 3px;
  font-weight: 700; font-size: 15px; color: #F2F3F6;
}
.wfmc-drain img { width: 13px; height: 13px; display: block; border: 0; }
.wfmc-tzone { position: absolute; left: 12px; right: 12px; top: 238px; z-index: 3; }
.wfmc-name { font-size: 19px; font-weight: 700; color: #FFFFFF; }
.wfmc-stats { font-size: 14px; line-height: 1.38; padding-top: 3px; color: #E9EAEE; }
.wfmc-setdots { display: flex; justify-content: center; gap: 6px; padding: 7px 0 0; }
.wfmc-setdots i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid #B9BDC7; opacity: .85; }
.wfmc-setline { color: #C6C8CF; font-size: 11.5px; font-family: Roboto, sans-serif; line-height: 1.3; padding: 4px 6px 0; }
.wfmc-tab { position: absolute; left: 50%; transform: translateX(-50%); bottom: 64px; width: 210px; height: 26px; z-index: 4; }
.wfmc-tab img { width: 100%; height: 100%; display: block; border: 0; }
.wfmc-tab span {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: .22em; color: #EDEEF2; padding-bottom: 1px;
}
.wfmc-pips { position: absolute; left: 0; right: 0; bottom: 38px; z-index: 5; display: flex; justify-content: center; gap: 4px; }
.wfmc-pips img { width: 11px; height: 11px; display: block; border: 0; }
.wfmc-pips img.off { opacity: .18; filter: grayscale(1); }
.wfmc-scale { width: calc(281px * var(--wfmc-s, 1)); height: calc(438px * var(--wfmc-s, 1)); flex: none; }
.wfmc-scale .wfmc { transform: scale(var(--wfmc-s, 1)); transform-origin: top left; }
.wfmc-row { display: flex; flex-wrap: wrap; gap: 22px 18px; justify-content: flex-start; margin: 1.5em 0; }

/* rank grid: collapsed strips that expand on hover/tap */
.wfmc-rankgrid { display: flex; flex-wrap: wrap; gap: 22px 18px; margin: 1.5em 0; padding-bottom: 300px; }
.wfmc-slot { position: relative; width: 190px; height: 96px; }
.wfmc-mini {
  position: absolute; inset: 0;
  cursor: pointer; border: 0; padding: 0;
  background: linear-gradient(180deg, #15161A, #0E0F12);
  color: #E8E6E3;
  font-family: "Roboto Condensed", Roboto, sans-serif;
  transition: opacity .14s ease;
}
.wfmc-mtop { position: absolute; top: 0; left: 0; width: 100%; }
.wfmc-mbot { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 103%; }
.wfmc-mtop img, .wfmc-mbot img { width: 100%; display: block; border: 0; }
.wfmc-mbot img { height: 26px; object-fit: cover; object-position: bottom; }
.wfmc-mname {
  font-size: 14px; font-weight: 700;
  position: absolute; top: 26px; left: 10px; right: 48px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;
}
.wfmc-mdrain {
  position: absolute; top: 22px; right: 8px;
  display: flex; align-items: center; gap: 3px;
  font-weight: 700; font-size: 12px; color: #F2F3F6;
  background: rgba(10,11,14,.8);
  border: 1px solid rgba(220,224,232,.5);
  border-radius: 2px; padding: 1px 5px;
}
.wfmc-mdrain img { width: 10px; height: 10px; display: block; border: 0; }
.wfmc-mpips { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: center; gap: 3px; }
.wfmc-mpips img { width: 9px; height: 9px; display: block; border: 0; }
.wfmc-mpips img.off { opacity: .18; filter: grayscale(1); }
.wfmc-full {
  position: absolute; top: -4px; left: 50%;
  transform: translateX(-50%) scale(.44);
  transform-origin: top center;
  opacity: 0; pointer-events: none; z-index: 30;
  transition: transform .17s ease, opacity .13s ease;
}
.wfmc-slot:hover .wfmc-full, .wfmc-slot:focus-within .wfmc-full, .wfmc-slot.open .wfmc-full {
  opacity: 1; transform: translateX(-50%) scale(1);
}
.wfmc-slot:hover .wfmc-mini, .wfmc-slot:focus-within .wfmc-mini, .wfmc-slot.open .wfmc-mini { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .wfmc-mini, .wfmc-full { transition: none; }
}


/* ============ weapons index (/weapons/) ============ */
.wf-weapons-main { max-width: 1100px; margin: 0 auto; padding: 36px 20px 60px; }
.wf-weapons-main h1 { margin-bottom: 8px; }
.wf-weapons-lede { color: var(--wf-ink-3); max-width: 70ch; margin-bottom: 22px; }
.wf-tabcount { font-size: 11px; opacity: .6; margin-left: 6px; }
.wf-weapons-index .wf-tabpanel { display: none; }
.wf-weapons-index .wf-tabpanel.active { display: block; }
.wf-weapon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 14px;
  margin-top: 20px;
}
.wf-wcard {
  background: var(--wf-card);
  border: 1px solid #232327;
  padding: 12px 10px 10px;
  text-align: center;
  transition: border-color .15s ease, transform .15s ease;
}
.wf-wcard img { width: 100%; max-width: 140px; height: auto; margin: 0 auto 6px; display: block; border: 0; background: radial-gradient(ellipse at 50% 42%, #262833 0%, #16171B 72%); border-radius: 2px; padding: 7px; }
.wf-wname { display: block; font-weight: 600; font-size: 14.5px; color: var(--wf-ink-2); line-height: 1.25; }
.wf-wcard-link { text-decoration: none; }
.wf-wcard-link .wf-wname { color: var(--wf-gold); }
.wf-wcard-link:hover .wf-wcard, .wf-wcard:hover { border-color: var(--wf-gold-border); transform: translateY(-2px); }
.wf-wmeta { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 11.5px; color: var(--wf-ink-3); padding-top: 4px; }
.wf-dispo { display: inline-flex; gap: 2px; align-items: center; }
.wf-dispo i { width: 6px; height: 6px; border-radius: 50%; background: #2A2B30; border: 1px solid #4A4D55; }
.wf-dispo i.on { background: var(--wf-gold); border-color: var(--wf-gold-bright); }
.wf-dispo-val { color: var(--wf-ink-3); font-size: .85em; }

/* ============ [weaponstats] table ============ */
.wf-wstats { display: flex; flex-wrap: wrap; gap: 18px; margin: 1.2em 0; }
.wf-wstats table { border-collapse: collapse; min-width: 260px; flex: 1 1 260px; margin: 0; }
.wf-wstats th, .wf-wstats td { border: 0; border-bottom: 1px solid #232327; padding: 7px 10px; font-size: 14px; text-align: left; }
.wf-wstats th { color: var(--wf-ink-3); font-weight: 500; width: 55%; }
.wf-wstats td { color: var(--wf-ink); font-variant-numeric: tabular-nums; }
.wf-wdmg-head th, .wf-wdmg-head td { color: var(--wf-gold); font-weight: 700; border-bottom-color: var(--wf-gold-border); }


/* ============ unique-trait callout (weapon/frame gimmicks) ============ */
.wf-trait {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: linear-gradient(90deg, rgba(198,164,95,.10), rgba(198,164,95,.02));
  border-left: 3px solid var(--wf-gold);
  padding: 14px 18px;
  margin: 1.4em 0;
}
.wf-trait-glyph {
  flex: none;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--wf-gold-border);
  transform: rotate(45deg);
  margin-top: 3px;
}
.wf-trait-glyph span { transform: rotate(-45deg); color: var(--wf-gold); font-size: 16px; line-height: 1; }
.wf-trait-body { flex: 1; }
.wf-trait-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--wf-gold);
  margin-bottom: 4px;
}
.wf-trait-body p { margin: 0; color: var(--wf-ink-2); }


/* ============ live rotation page (/incarnon-rotation/) ============ */
.wf-livebar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 18px;
}
.wf-live-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: #FFF;
  background: linear-gradient(90deg, #8E1B20, var(--wf-red));
  padding: 6px 14px;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.wf-live-badge i {
  width: 8px; height: 8px; border-radius: 50%;
  background: #FFF;
  animation: wf-pulse 1.6s ease-in-out infinite;
}
@keyframes wf-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.7); }
}
.wf-countdown {
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 15px; color: var(--wf-ink-2);
}
.wf-countdown strong { color: var(--wf-gold-bright); font-size: 17px; }
.wf-rotgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  margin: 14px 0 6px;
}
.wf-rotcard {
  display: block;
  background: var(--wf-card);
  border: 1px solid #232327;
  padding: 12px 10px 11px;
  text-align: center;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.wf-rotcard img {
  width: 100%; max-width: 120px; height: auto;
  margin: 0 auto 8px; display: block; border: 0;
  background: radial-gradient(ellipse at 50% 42%, #262833 0%, #16171B 72%);
  border-radius: 2px; padding: 6px;
}
.wf-rotcard .wf-rotname { display: block; font-weight: 700; font-size: 14.5px; color: var(--wf-ink-2); }
a.wf-rotcard .wf-rotname { color: var(--wf-gold); }
.wf-rotcard .wf-rottag {
  display: inline-block; margin-top: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--wf-ink-3);
}
a.wf-rotcard .wf-rottag { color: var(--wf-gold-bright); }
a.wf-rotcard:hover { border-color: var(--wf-gold-border); transform: translateY(-3px); }
.wf-rothero { margin: 0 0 20px; }
.wf-rothero img { width: 100%; height: auto; display: block; border: 1px solid #26262C; }
@media (prefers-reduced-motion: reduce) { .wf-live-badge i { animation: none; } }


/* ============ mission guide components ============ */
.wf-statprio { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.wf-statprio span {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 12px;
  border: 1px solid #3A3C44; color: var(--wf-ink-3);
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
  background: #17181C;
}
.wf-statprio span.max  { color: #0B0B0D; background: linear-gradient(90deg, var(--wf-gold-bright), var(--wf-gold)); border-color: var(--wf-gold); }
.wf-statprio span.high { color: var(--wf-gold-bright); border-color: var(--wf-gold-border); background: rgba(198,164,95,.10); }
.wf-statprio span.low  { opacity: .55; }
.wf-framegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; margin: 16px 0; }
.wf-framegrid .wf-rotcard img { max-width: 110px; aspect-ratio: 3/4; object-fit: cover; padding: 0; }


/* ============================================================
   FRAME PAGE DESIGN v1.1 (Saryn Prime mockup, Dan 2026-09-09)
   ============================================================ */
body.single-frame , body.single-post , body.single-weapon  {
  background: #0a0b0f url(assets/site-bg.jpg) no-repeat center top fixed;
  background-size: cover;
}
body.single-frame .site-content, body.single-post .site-content, body.single-weapon .site-content,
body.single-frame .content-area, body.single-post .content-area, body.single-weapon .content-area,
body.single-frame #primary, body.single-post #primary, body.single-weapon #primary,
body.single-frame .site-main, body.single-post .site-main, body.single-weapon .site-main,
body.single-frame #page, body.single-post #page, body.single-weapon #page { background: transparent !important; }

.wf-fp { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.wf-fp-bcrumb { display: flex; align-items: center; gap: 5px; padding: 22px 0 18px; }
.wf-fp-bcrumb a, .wf-fp-bcrumb span {
  font-family: "Roboto Condensed", Roboto, sans-serif; font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--wf-ink-2); text-decoration: none;
  background: rgba(9,12,18,.82);
  padding: 8px 20px 8px 30px; line-height: 1;
  /* left edge notched inward, right edge pointed: the 5px gap shows the starfield through as a > arrow */
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%, 13px 50%);
}
.wf-fp-bcrumb a:first-child { padding-left: 22px; clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%); }
.wf-fp-bcrumb a:hover { background: rgba(20,26,36,.9); color: #fff; }
.wf-fp-bcrumb span { color: var(--wf-gold); }

/* Ad slots: no placeholders on the live site (Dan, 2026-09-11). Hook kept for when AdSense lands; an empty slot renders nothing. */
.wf-adslot { display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.wf-adslot:empty { display: none; }
.wf-adslot.leaderboard { width: 100%; max-width: 728px; margin-bottom: 20px; }
.wf-adslot.sky { width: 100%; }

.wf-fp-tabs { display: flex; gap: 4px; padding-left: 24px; }
.wf-fp-tab {
  font-family: "Roboto Condensed", Roboto, sans-serif; font-weight: 700; font-size: 15px;
  letter-spacing: .04em; color: var(--wf-ink-2); background: rgba(14,26,34,.78);
  border: 0; padding: 11px 26px 13px; cursor: pointer; border-radius: 8px 8px 0 0; position: relative; top: 1px;
}
.wf-fp-tab.active { background: rgba(43,86,104,.92); color: #fff; }

.wf-fp-panel {
  background: linear-gradient(180deg, rgba(43,86,104,.90), rgba(28,58,74,.93) 40%, rgba(20,42,56,.95));
  border-radius: 10px; padding: 30px 34px 40px; margin-bottom: 40px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
.wf-fp-frame { display: none; }
.wf-fp-frame.active { display: block; }
.wf-fp-title { font-family: Michroma, "Roboto Condensed", sans-serif; font-size: 34px; letter-spacing: .06em; color: #fff; margin: 0 0 6px; text-transform: uppercase; }
.wf-fp-desc { color: #cfe0e8; font-size: 14.5px; margin: 0 0 22px; max-width: 70ch; }

.wf-fp-head { display: grid; grid-template-columns: 300px 1fr; gap: 22px; align-items: start; }
.wf-fp-portrait { background: linear-gradient(180deg, #12202a, #0c1620); border: 1px solid rgba(255,255,255,.08); }
.wf-fp-portrait img { width: 100%; height: auto; display: block; }
.wf-fp-stats { background: rgba(8,14,20,.82); border: 1px solid rgba(255,255,255,.07); padding: 16px 20px; }
.wf-fp-stats table { width: 100%; border-collapse: collapse; margin: 0; }
.wf-fp-stats td { padding: 5px 0; font-size: 15px; border: 0; }
.wf-fp-stats td:first-child { color: #b9c6ce; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; }
.wf-fp-stats td:last-child { text-align: right; color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.wf-fp-stats tr.gap td { padding-top: 14px; }
.wf-fp-stats tr.derived td { color: var(--wf-gold-bright); }

.wf-fp-abils { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin: 26px 0 8px; max-width: 640px; }
.wf-fp-abil { text-align: center; }
.wf-fp-abil .ic { width: 100%; aspect-ratio: 1/1; border-radius: 4px; display: flex; align-items: center; justify-content: center; background: #1a2730; border: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.wf-fp-abil .ic img { width: 84%; height: 84%; object-fit: contain; }
.wf-fp-abil.ph0 .ic { background: #6cc04a; } .wf-fp-abil.ph1 .ic { background: #4a9fd8; }
.wf-fp-abil.ph2 .ic { background: #9b6cc0; } .wf-fp-abil.ph3 .ic { background: #c0564a; } .wf-fp-abil.ph4 .ic { background: #d89a4a; }
.wf-fp-abil .ic .phlabel { color: rgba(0,0,0,.5); font-weight: 700; font-size: 12px; letter-spacing: .1em; }
.wf-fp-abil .nm { display: block; margin-top: 7px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #b9c6ce; }
.wf-fp-abil .an { display: block; font-size: 12.5px; color: #fff; font-weight: 600; margin-top: 2px; }

.wf-fp-h { font-family: "Roboto Condensed", sans-serif; font-size: 15px; letter-spacing: .18em; text-transform: uppercase; color: var(--wf-gold); margin: 34px 0 4px; }
.wf-fp-sub { color: #9fb2bc; font-size: 12px; margin: 0 0 14px; }

.wf-fp-mods { display: flex; flex-wrap: wrap; gap: 16px 14px; }
.wf-fp-mods .wfmc-scale { flex: none; }

.wf-fp-missions { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.wf-fp-mtile { display: block; text-decoration: none; background: linear-gradient(160deg, #17313d, #0e1c25); border: 1px solid rgba(255,255,255,.08); aspect-ratio: 4/5; position: relative; overflow: hidden; transition: border-color .15s, transform .15s; }
.wf-fp-mtile:hover { border-color: var(--wf-gold-border); transform: translateY(-3px); }
.wf-fp-mtile .lbl { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px; text-align: center; }
.wf-fp-mtile .lbl b { color: #fff; font-family: "Roboto Condensed", sans-serif; font-size: 16px; line-height: 1.1; }
.wf-fp-mtile .lbl span { color: var(--wf-gold-bright); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; margin-top: 8px; }

.wf-fp-build { display: flex; align-items: center; gap: 14px; background: rgba(10,16,24,.72); border: 1px solid rgba(255,255,255,.06); padding: 10px 16px; margin-bottom: 8px; text-decoration: none; transition: border-color .15s; }
.wf-fp-build:hover { border-color: var(--wf-gold-border); }
.wf-fp-build .thumb { width: 54px; height: 54px; flex: none; background: #0c1620; border: 1px solid rgba(255,255,255,.08); }
.wf-fp-build .thumb img { width: 100%; height: 100%; object-fit: cover; }
.wf-fp-build .meta { flex: 1; }
.wf-fp-build .bt { color: #fff; font-weight: 600; font-size: 15px; display: block; }
.wf-fp-build .by { color: #9fb2bc; font-size: 12px; }
.wf-fp-build .tags { margin-top: 4px; display: flex; gap: 6px; }
.wf-fp-build .tag { font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 2px 8px; text-transform: uppercase; }
.wf-fp-build .tag.upd { background: #4a8f3a; color: #fff; } .wf-fp-build .tag.forma { background: #b08a30; color: #1a1206; }
.wf-fp-build .votes { text-align: right; flex: none; } .wf-fp-build .votes b { color: #fff; font-size: 18px; } .wf-fp-build .votes span { display: block; color: #9fb2bc; font-size: 10px; letter-spacing: .1em; }

.wf-fp-box { background: rgba(9,15,22,.60); border: 1px solid rgba(255,255,255,.07); border-radius: 6px; padding: 6px 16px 10px; }
.wf-fp-bp { width: 100%; border-collapse: collapse; margin-top: 6px; }
.wf-fp-bp th { text-align: left; color: #9fb2bc; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.12); }
.wf-fp-bp td { padding: 12px; border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: top; font-size: 14px; color: #dbe4ea; }
.wf-fp-bp td.part { color: #7fb8d8; font-weight: 600; }
.wf-fp-bp .rel { display: flex; justify-content: space-between; gap: 20px; }
.wf-fp-bp .rel .pct { color: #b9c6ce; font-variant-numeric: tabular-nums; }
.wf-fp-note { color: #8fa3ad; font-size: 12px; margin-top: 10px; }

@media (max-width: 900px) {
  .wf-fp-head { grid-template-columns: 1fr; }
  .wf-fp-abils, .wf-fp-missions { grid-template-columns: repeat(3, 1fr); max-width: none; }
}


/* passive glyph tile (real content, never an empty placeholder) */
.wf-fp-abil .ic.passive-ic { background: linear-gradient(180deg,#16242e,#0e1a22); }
.wf-fp-abil .ic.passive-ic svg { width: 60%; height: 60%; }

/* ability / passive rollover tooltip (Overframe-style mouseover) */
.wf-fp-abil.has-tip { cursor: help; }
.wf-fp-abil { position: relative; }
.wf-fp-tip {
  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(6px);
  width: 240px; max-width: 68vw; z-index: 60;
  background: rgba(8,13,19,.97); border: 1px solid var(--wf-gold-border); border-radius: 6px;
  padding: 11px 13px; color: #dbe4ea; font-size: 12.5px; line-height: 1.45; text-align: left;
  letter-spacing: 0; text-transform: none; font-weight: 400;
  opacity: 0; pointer-events: none; transition: opacity .14s ease, transform .14s ease;
  box-shadow: 0 12px 30px rgba(0,0,0,.6);
}
.wf-fp-tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: var(--wf-gold-border); }
.wf-fp-abil.has-tip:hover .wf-fp-tip, .wf-fp-abil.has-tip:focus-within .wf-fp-tip {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* popular mods: compact tile that expands to the full card from center on hover */
.wf-fp-popmods { display: flex; flex-wrap: wrap; gap: 16px; margin: 4px 0 6px; }
.wf-fp-popmod { position: relative; width: 150px; height: 150px; }
.pm-mini {
  position: absolute; inset: 0; overflow: hidden;
  background: #0d1621; border: 1px solid rgba(255,255,255,.10);
  display: flex; flex-direction: column; transition: opacity .12s ease;
}
.pm-mini.pm-r-bronze    { border-top: 3px solid #C08A50; }
.pm-mini.pm-r-silver    { border-top: 3px solid #DCE0E8; }
.pm-mini.pm-r-gold      { border-top: 3px solid #EEC96C; }
.pm-mini.pm-r-legendary { border-top: 3px solid #F4F6FA; }
.pm-art { width: 100%; height: 104px; object-fit: cover; display: block; }
.pm-drain { position: absolute; top: 6px; right: 7px; font: 700 12px "Roboto Condensed"; color: #fff;
  background: rgba(8,11,16,.82); border: 1px solid rgba(220,224,232,.5); border-radius: 2px; padding: 1px 6px; }
.pm-name { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  font: 700 12.5px "Roboto Condensed"; color: #fff; padding: 4px 6px; line-height: 1.1; }
.pm-full {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.42); transform-origin: center center;
  opacity: 0; pointer-events: none; z-index: 40;
  transition: transform .18s ease, opacity .13s ease;
}
.wf-fp-popmod:hover { z-index: 50; }
.wf-fp-popmod:hover .pm-full, .wf-fp-popmod:focus-within .pm-full {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
}
.wf-fp-popmod:hover .pm-mini, .wf-fp-popmod:focus-within .pm-mini { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .pm-full, .wf-fp-tip { transition: none; } }

/* ability tooltip stat rows (energy + key numbers) */
.wf-fp-tip .tip-desc { display: block; }
.wf-fp-tip .tip-stats { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.14); }
.wf-fp-tip .tip-stat { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.wf-fp-tip .tip-stat b { color: var(--wf-gold-bright); font-weight: 700; }
.wf-fp-tip .tip-stat span { color: #fff; font-variant-numeric: tabular-nums; }
.wf-fp-tip .tip-stat-solo { display: block; color: #cdd8df; }


/* ===== v1.2.0: the frame-page design mirrored onto guide posts and weapon pages ===== */
/* banner-style hero: radial glow, condensed uppercase title, accent rule + subhead */
.wf-guide-hero {
  --wf-accent: var(--wf-gold);
  position: relative; text-align: center; padding: 46px 22px 30px; margin: 0 0 22px; border-radius: 12px;
  background: radial-gradient(ellipse 62% 75% at 50% 46%, rgba(64,66,74,.62) 0%, rgba(12,13,18,.78) 62%, rgba(12,13,18,0) 100%);
}
.wf-guide-hero .eyebrow { font: 700 13px/1 "Roboto Condensed", Roboto, sans-serif; letter-spacing: .34em; text-transform: uppercase; color: #96a5ad; margin-bottom: 18px; }
.wf-guide-hero h1 { font: 700 clamp(34px, 6vw, 70px)/1.04 "Roboto Condensed", Roboto, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #fff; margin: 0; text-wrap: balance; text-shadow: 0 6px 30px rgba(0,0,0,.6); }
.wf-guide-hero .rule { width: min(560px, 72%); height: 3px; background: var(--wf-accent); margin: 18px auto 12px; box-shadow: 0 0 14px var(--wf-accent); }
.wf-guide-hero .sub { font: 700 15px/1.35 "Roboto Condensed", Roboto, sans-serif; letter-spacing: .24em; text-transform: uppercase; color: var(--wf-accent-text, var(--wf-accent)); }
/* content typography inside the teal panel */
.wf-guide .wf-fp-panel { color: #dbe4ea; }
.wf-guide .wf-fp-panel p, .wf-guide .wf-fp-panel li { color: #dbe4ea; font-size: 16px; line-height: 1.6; }
.wf-guide .wf-fp-panel h2 { font: 700 26px/1.15 "Roboto Condensed", Roboto, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--wf-gold-bright); border-bottom: 1px solid var(--wf-gold-border); padding-bottom: 8px; margin: 34px 0 14px; }
.wf-guide .wf-fp-panel h3 { font: 700 19px/1.2 "Roboto Condensed", Roboto, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: #fff; margin: 22px 0 8px; }
.wf-guide .wf-fp-panel a { color: var(--wf-gold-bright); }
.wf-guide .wf-fp-panel ol, .wf-guide .wf-fp-panel ul { padding-left: 22px; }
.wf-guide .wf-fp-panel li::marker { color: var(--wf-gold); font-weight: 700; }
.wf-guide .wf-fp-panel .wp-block-table { overflow-x: auto; }
.wf-guide .wf-fp-panel .wp-block-table table { width: 100%; border-collapse: collapse; background: rgba(8,13,19,.55); border-radius: 8px; overflow: hidden; }
.wf-guide .wf-fp-panel .wp-block-table th { font: 700 12.5px/1.2 "Roboto Condensed", Roboto, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--wf-gold-bright); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--wf-gold-border); background: rgba(8,13,19,.6); }
.wf-guide .wf-fp-panel .wp-block-table td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.08); color: #dbe4ea; font-size: 14px; vertical-align: top; }
.wf-guide .wf-fp-panel .wp-block-embed { border-color: var(--wf-gold-border); background: rgba(8,13,19,.6); }
@media (max-width: 640px) { .wf-guide .wf-fp-panel { padding: 18px 16px 26px; } .wf-guide-hero { padding: 30px 12px 22px; } }


/* ===== v1.2.1: Dan's site-wide rule: ALL mods are the folded card that expands from CENTER on hover/focus/tap ===== */
.wf-fp-popmod { outline: none; cursor: pointer; }
.wf-fp-popmod:focus-visible .pm-mini { box-shadow: 0 0 0 2px var(--wf-gold); }
.wf-fp-popmod.open { z-index: 50; }
.wf-fp-popmod.open .pm-full { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.wf-fp-popmod.open .pm-mini { opacity: 0; }
.wf-fp-popmods-single { display: inline-flex; }
.wf-fp-rankgrid { padding-bottom: 8px; }
.wf-guide .wf-fp-popmods, .entry-content .wf-fp-popmods { margin: 10px 0 16px; }


/* ===== v1.2.2: keep the unfolded mod card on-screen. js/mod-cards.js sets --pm-shift on edge tiles ===== */
.wf-fp-popmod .pm-full { transform: translate(calc(-50% + var(--pm-shift, 0px)), -50%) scale(.42); }
.wf-fp-popmod:hover .pm-full, .wf-fp-popmod:focus-within .pm-full, .wf-fp-popmod.open .pm-full {
  transform: translate(calc(-50% + var(--pm-shift, 0px)), -50%) scale(1);
}


/* ===== v1.2.3: the folded card IS the game's collapsed mod strip (real chrome, name, drain+polarity, pips).
   Dan: "the compact view of the mods is supposed to look like the compact view of the mods in the game". ===== */
.wf-fp-popmod { width: 190px; height: 96px; }
.wf-fp-popmods { gap: 14px 12px; }
.wf-fp-popmod .wfmc-mini { cursor: pointer; }
.wf-fp-popmod:hover .wfmc-mini, .wf-fp-popmod:focus-within .wfmc-mini, .wf-fp-popmod.open .wfmc-mini { opacity: 0; }
/* unfold starts at the strip's footprint and grows from the center; JS clamps both axes to the viewport */
.wf-fp-popmod .pm-full {
  transform: translate(calc(-50% + var(--pm-shift, 0px)), calc(-50% + var(--pm-shift-y, 0px))) scale(.34);
}
.wf-fp-popmod:hover .pm-full, .wf-fp-popmod:focus-within .pm-full, .wf-fp-popmod.open .pm-full {
  transform: translate(calc(-50% + var(--pm-shift, 0px)), calc(-50% + var(--pm-shift-y, 0px))) scale(1);
}


/* ===== v1.2.4: the compact mod = the full card's chrome COLLAPSED, Overframe-style
   (Dan: "they're supposed to have some shape to them, not just rectangles"; ref data/design-refs/overframe-mod-compact.jpg). ===== */
.wfmc.wfmc-collapsed { height: 204px; }
.wfmc-collapsed .wfmc-art { height: auto; bottom: 14px; }
.wfmc-collapsed .wfmc-art img { filter: brightness(.32) saturate(.75); }
.wfmc-collapsed .wfmc-fade { height: 50px; }
.wfmc-collapsed .wfmc-cname {
  position: absolute; left: 16px; right: 16px; top: 66px; bottom: 58px; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; line-height: 1.12; font-weight: 700; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.9);
}
/* the tile shows the collapsed card at a reduced scale; the full card unfolds to 1.0 from the center */
.wf-fp-popmod.pm-card { --pm-s: .82; width: calc(281px * var(--pm-s)); height: calc(140px * var(--pm-s)); }
.wf-fp-popmod.pm-card .wfmc-collapsed {
  position: absolute; top: 0; left: 0; transform: scale(var(--pm-s)); transform-origin: top left;
  transition: opacity .14s ease; cursor: pointer;
}
.wf-fp-popmod:hover .wfmc-collapsed, .wf-fp-popmod:focus-within .wfmc-collapsed, .wf-fp-popmod.open .wfmc-collapsed { opacity: 0; }
.wf-fp-popmod.pm-card .pm-full {
  transform: translate(calc(-50% + var(--pm-shift, 0px)), calc(-50% + var(--pm-shift-y, 0px))) scale(var(--pm-s));
}
.wf-fp-popmod.pm-card:hover .pm-full, .wf-fp-popmod.pm-card:focus-within .pm-full, .wf-fp-popmod.pm-card.open .pm-full {
  transform: translate(calc(-50% + var(--pm-shift, 0px)), calc(-50% + var(--pm-shift-y, 0px))) scale(1);
}
.wf-fp-popmods { gap: 16px 14px; }


/* ===== v1.2.5 (+1.2.6: folded height 204->140 to match the in-game compact ratio, Dan 2026-09-10): ONE mod card that GROWS from collapsed into the full card (Overframe-style), clipped to the chrome silhouette.
   Dan: "they should GROW into the full card, not just instantly pop"; "the border should be the edge of the card". ===== */
.wf-fp-popmod.pm-card { --pm-s: .82; width: calc(281px * var(--pm-s)); height: calc(140px * var(--pm-s)); }
.wf-fp-popmod.pm-card .wfmc-grow {
  position: absolute; top: 50%; left: 50%; width: 281px; height: 140px; cursor: pointer;
  transform: translate(calc(-50% + var(--pm-shift, 0px)), calc(-50% + var(--pm-shift-y, 0px))) scale(var(--pm-s));
  transform-origin: center center;
  transition: height .28s ease, transform .28s ease;
}
/* the clipped layer: body + art, masked to the chrome's own outline (top piece, bottom piece, interior band) */
.wfmc-grow .wfmc-inner {
  position: absolute; inset: 0; z-index: 1;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 281px 117px, 281px 120px, 248px calc(100% - 48px);
          mask-size: 281px 117px, 281px 120px, 248px calc(100% - 48px);
  -webkit-mask-position: top center, bottom center, 16px 16px;
          mask-position: top center, bottom center, 16px 16px;
  -webkit-mask-composite: source-over; mask-composite: add;
}
.wfmc-grow .wfmc-inner .wfmc-body { left: 0; right: 0; top: 0; bottom: 0; }
/* chrome must paint above the masked art layer */
.wfmc-grow .wfmc-ftop, .wfmc-grow .wfmc-fbot { z-index: 2; }
.wfmc-grow .wfmc-inner .wfmc-art { left: 0; right: 0; top: 0; height: 140px; transition: height .28s ease; }
.wfmc-grow .wfmc-inner .wfmc-art img { filter: brightness(.32) saturate(.75); transition: filter .28s ease; }
.wfmc-grow .wfmc-inner .wfmc-fade { height: 50px; transition: height .28s ease; }
.wfmc-grow .wfmc-cname {
  position: absolute; left: 36px; right: 36px; top: 32px; bottom: 46px; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1.06; font-weight: 700; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.9);
  transition: opacity .16s ease;
}
.wfmc-grow .wfmc-tzone, .wfmc-grow .wfmc-tab { opacity: 0; pointer-events: none; transition: opacity .2s ease .12s; }
/* v1.2.7: expanded card type up (Dan: 'a little larger, looks small'); matched to Overframe's expanded card proportions */
.wfmc-grow .wfmc-tzone { top: 232px; left: 10px; right: 10px; }
.wfmc-grow .wfmc-name { font-size: 26px; line-height: 1.1; }
.wfmc-grow .wfmc-stats { font-size: 16px; line-height: 1.3; padding-top: 4px; }
.wfmc-grow .wfmc-setline { font-size: 13px; }
.wfmc-grow .wfmc-tab span { font-size: 13px; letter-spacing: .2em; }
.wfmc-grow .wfmc-drain { font-size: 19px; padding: 3px 9px; gap: 6px; top: 8px; right: 22px; }
.wfmc-grow .wfmc-drain img { width: 20px; height: 20px; }
/* expanded: the same card grows to full height and full scale from its center */
.wf-fp-popmod:hover .wfmc-grow, .wf-fp-popmod:focus-within .wfmc-grow, .wf-fp-popmod.open .wfmc-grow {
  height: 438px;
  transform: translate(calc(-50% + var(--pm-shift, 0px)), calc(-50% + var(--pm-shift-y, 0px))) scale(1);
}
.wf-fp-popmod:hover .wfmc-grow .wfmc-art, .wf-fp-popmod:focus-within .wfmc-grow .wfmc-art, .wf-fp-popmod.open .wfmc-grow .wfmc-art { height: 252px; }
.wf-fp-popmod:hover .wfmc-grow .wfmc-art img, .wf-fp-popmod:focus-within .wfmc-grow .wfmc-art img, .wf-fp-popmod.open .wfmc-grow .wfmc-art img { filter: none; }
.wf-fp-popmod:hover .wfmc-grow .wfmc-fade, .wf-fp-popmod:focus-within .wfmc-grow .wfmc-fade, .wf-fp-popmod.open .wfmc-grow .wfmc-fade { height: 70px; }
.wf-fp-popmod:hover .wfmc-grow .wfmc-cname, .wf-fp-popmod:focus-within .wfmc-grow .wfmc-cname, .wf-fp-popmod.open .wfmc-grow .wfmc-cname { opacity: 0; }
.wf-fp-popmod:hover .wfmc-grow .wfmc-tzone, .wf-fp-popmod:hover .wfmc-grow .wfmc-tab,
.wf-fp-popmod:focus-within .wfmc-grow .wfmc-tzone, .wf-fp-popmod:focus-within .wfmc-grow .wfmc-tab,
.wf-fp-popmod.open .wfmc-grow .wfmc-tzone, .wf-fp-popmod.open .wfmc-grow .wfmc-tab { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .wfmc-grow, .wfmc-grow .wfmc-art, .wfmc-grow .wfmc-art img, .wfmc-grow .wfmc-cname, .wfmc-grow .wfmc-tzone, .wfmc-grow .wfmc-tab { transition: none; } }
.wfmc-r-bronze .wfmc-inner { -webkit-mask-image: url(assets/cardui/mask-bronze-top-2.png), url(assets/cardui/mask-bronze-bot-2.png), linear-gradient(#000,#000); mask-image: url(assets/cardui/mask-bronze-top-2.png), url(assets/cardui/mask-bronze-bot-2.png), linear-gradient(#000,#000); }
.wfmc-r-silver .wfmc-inner { -webkit-mask-image: url(assets/cardui/mask-silver-top-2.png), url(assets/cardui/mask-silver-bot-2.png), linear-gradient(#000,#000); mask-image: url(assets/cardui/mask-silver-top-2.png), url(assets/cardui/mask-silver-bot-2.png), linear-gradient(#000,#000); }
.wfmc-r-gold .wfmc-inner { -webkit-mask-image: url(assets/cardui/mask-gold-top-2.png), url(assets/cardui/mask-gold-bot-2.png), linear-gradient(#000,#000); mask-image: url(assets/cardui/mask-gold-top-2.png), url(assets/cardui/mask-gold-bot-2.png), linear-gradient(#000,#000); }
.wfmc-r-legendary .wfmc-inner { -webkit-mask-image: url(assets/cardui/mask-legendary-top-2.png), url(assets/cardui/mask-legendary-bot-2.png), linear-gradient(#000,#000); mask-image: url(assets/cardui/mask-legendary-top-2.png), url(assets/cardui/mask-legendary-bot-2.png), linear-gradient(#000,#000); }
.wfmc-r-riven .wfmc-inner { -webkit-mask-image: url(assets/cardui/mask-riven-top-2.png), url(assets/cardui/mask-riven-bot-2.png), linear-gradient(#000,#000); mask-image: url(assets/cardui/mask-riven-top-2.png), url(assets/cardui/mask-riven-bot-2.png), linear-gradient(#000,#000); }
.wfmc-r-peculiar .wfmc-inner { -webkit-mask-image: url(assets/cardui/mask-peculiar-top-2.png), url(assets/cardui/mask-peculiar-bot-2.png), linear-gradient(#000,#000); mask-image: url(assets/cardui/mask-peculiar-top-2.png), url(assets/cardui/mask-peculiar-bot-2.png), linear-gradient(#000,#000); }


/* ===== v1.2.8: [rivendispo] filterable Riven disposition list ===== */
.wf-dispo-tool .wf-tabpanel { display: none; }
.wf-dispo-tool .wf-tabpanel.active { display: block; }
.wf-dispo-tool .wf-tabnav { margin-bottom: 14px; }
.wf-dispo-tool .wf-tabcount { color: var(--wf-ink-3); font-weight: 400; margin-left: 4px; }
.wf-dispo-bar { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.wf-dispo-filter {
  flex: 1 1 260px; max-width: 440px; background: rgba(8,13,19,.72); border: 1px solid var(--wf-gold-border);
  color: #fff; font: 15px Roboto, Arial, sans-serif; padding: 10px 14px; border-radius: 6px;
}
.wf-dispo-filter::placeholder { color: #8fa3ad; }
.wf-dispo-filter:focus { outline: none; border-color: var(--wf-gold); box-shadow: 0 0 0 2px rgba(198,164,95,.25); }
.wf-dispo-table td:nth-child(2), .wf-dispo-table td:nth-child(3) { white-space: nowrap; }
.wf-dispo-table tr[hidden] { display: none; }
.wf-dispo-top h3, .wf-dispo-bottom h3 { margin-top: 20px; }
.wf-dispo-top .wf-rotgrid, .wf-dispo-bottom .wf-rotgrid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }


/* ===== v1.2.9: live world-state trackers ([wf_fissures] [wf_cycles] [wf_archon] [wf_steelpath] [wf_nightwave] [wf_varzia]) + page.php scaffold ===== */
.wf-live-stamp { color: #9fb3bd; font-size: 12.5px; margin: 0 0 12px; }
.wf-live-filter { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--wf-gold); margin: 0 0 14px; }
.wf-live-group h3 { margin: 20px 0 8px; }
.wf-live-group .wf-tabcount { color: var(--wf-ink-3); font-weight: 400; font-size: 14px; margin-left: 4px; }
.wf-badge { display: inline-block; font: 700 10.5px/1 "Roboto Condensed", Roboto, sans-serif; letter-spacing: .12em; text-transform: uppercase; padding: 5px 9px; border: 1px solid #3A3C44; color: var(--wf-ink-3); border-radius: 3px; white-space: nowrap; }
.wf-badge-sp { color: #0B0B0D; background: linear-gradient(90deg, var(--wf-gold-bright), var(--wf-gold)); border-color: var(--wf-gold); }
.wf-badge-storm { color: #bfe4ff; border-color: #2F6FCF; background: rgba(47,111,207,.18); }
.wf-cd { font-variant-numeric: tabular-nums; color: var(--wf-gold-bright); font-weight: 700; white-space: nowrap; }
tr.is-expired td { opacity: .45; }
.wf-live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 6px 0 14px; }
.wf-live-card { background: rgba(8,13,19,.6); border: 1px solid #26303a; border-radius: 8px; padding: 12px 14px; }
.wf-live-card .wf-live-k { font: 700 11.5px/1 "Roboto Condensed", Roboto, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #9fb3bd; }
.wf-live-card .wf-live-v { font: 700 24px/1.1 "Roboto Condensed", Roboto, sans-serif; color: #fff; margin: 6px 0 4px; }
.wf-live-card .wf-live-s { font-size: 12.5px; color: #d3dde3; }
.wf-live .wf-verdict { margin-bottom: 14px; }
.wf-live .wf-verdict ol li { color: #dbe4ea; font-size: 15px; }

/* ===== v1.3.2 relic finder ([relicfinder], inc/relics.php + js/relic-finder.js) ===== */
.wf-relic-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.wf-relic-q { flex: 1 1 260px; min-width: 200px; padding: 10px 12px; background: rgba(6,12,18,.7); border: 1px solid rgba(255,255,255,.16); color: #fff; border-radius: 6px; font-size: 15px; }
.wf-relic-q:focus { outline: none; border-color: var(--wf-gold); }
.wf-relic-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.wf-relic-chips button { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #cfd8dc; padding: 6px 11px; border-radius: 999px; font: 600 13px/1 "Roboto Condensed", Roboto, sans-serif; letter-spacing: .04em; cursor: pointer; }
.wf-relic-chips button.on { background: var(--wf-gold); color: #0f1418; border-color: var(--wf-gold); }
.wf-relic-now { color: #cfd8dc; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.wf-relic-count { font-size: 13px; color: #8fa3ad; margin: 0 0 12px; }
.wf-relic-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.wf-relic-card { background: rgba(6,12,18,.62); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 12px; }
.wf-relic-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.wf-relic-head img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.wf-relic-head b { font: 700 17px/1.2 "Roboto Condensed", Roboto, sans-serif; color: #fff; display: block; margin-bottom: 4px; }
.wf-relic-badge { display: inline-block; font: 700 10px/1 "Roboto Condensed", Roboto, sans-serif; letter-spacing: .12em; text-transform: uppercase; padding: 4px 7px; border: 1px solid #3A3C44; color: #8fa3ad; border-radius: 3px; }
.wf-relic-badge.now { color: #0f1418; background: #2E9E67; border-color: #2E9E67; }
.wf-relic-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 0; }
.wf-relic-table th { font: 600 10.5px/1 "Roboto Condensed", Roboto, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #8fa3ad; text-align: right; padding: 2px 4px 6px; border: 0; background: none; }
.wf-relic-table th:first-child, .wf-relic-table td:first-child { text-align: left; }
.wf-relic-table td { padding: 5px 4px; border: 0; border-top: 1px solid rgba(255,255,255,.07); text-align: right; color: #cfd8dc; font-variant-numeric: tabular-nums; background: none; }
.wf-relic-table td a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); }
.wf-relic-table tr.hit td { background: rgba(200,162,74,.16); color: #fff; }
.wf-relic-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.wf-relic-dot.R { background: #e0b64a; } .wf-relic-dot.U { background: #b9c4cc; } .wf-relic-dot.C { background: #b0743a; }
.wf-relic-drops { font-size: 12px; color: #8fa3ad; margin: 8px 0 0; }
.wf-relic-drops b { color: #cfd8dc; }
.wf-relic-empty { color: #8fa3ad; }

/* ===== v1.3.3 live trackers hub (/live-trackers/) ===== */
.wf-trackgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 10px 0 18px; }
.wf-track { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: rgba(6,12,18,.62); border: 1px solid rgba(255,255,255,.12); border-left: 3px solid var(--wf-accent, var(--wf-gold)); border-radius: 8px; text-decoration: none; color: #cfd8dc; transition: background .15s ease, border-color .15s ease; }
.wf-track:hover, .wf-track:focus-visible { background: rgba(6,12,18,.85); border-color: var(--wf-gold); color: #fff; outline: none; }
.wf-track-title { font: 700 17px/1.2 "Roboto Condensed", Roboto, sans-serif; color: #fff; letter-spacing: .02em; }
.wf-track-sub { font-size: 13px; line-height: 1.4; color: #9fb3bd; }

/* ===== v1.3.5 live Prime prices ([wf_prices], inc/market.php) ===== */
.wf-market-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.wf-market-q { flex: 1 1 260px; min-width: 200px; padding: 10px 12px; background: rgba(6,12,18,.7); border: 1px solid rgba(255,255,255,.16); color: #fff; border-radius: 6px; font-size: 15px; }
.wf-market-q:focus { outline: none; border-color: var(--wf-gold); }
.wf-market-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.wf-market-chips button { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #cfd8dc; padding: 6px 11px; border-radius: 999px; font: 600 13px/1 "Roboto Condensed", Roboto, sans-serif; letter-spacing: .04em; cursor: pointer; }
.wf-market-chips button.on { background: var(--wf-gold); color: #0f1418; border-color: var(--wf-gold); }
.wf-market-note, .wf-market-credit { font-size: 13px; color: #8fa3ad; margin: 0 0 12px; }
.wf-market-credit { margin-top: 10px; }
.wf-market-wrap { overflow-x: auto; }
.wf-market-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.wf-market-table th { font: 600 11px/1 "Roboto Condensed", Roboto, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #8fa3ad; text-align: left; padding: 6px 8px; border: 0; background: rgba(6,12,18,.6); }
.wf-market-table td { padding: 7px 8px; border: 0; border-top: 1px solid rgba(255,255,255,.07); color: #cfd8dc; background: none; font-variant-numeric: tabular-nums; }
.wf-market-table td a { color: #9fb3bd; font-size: 12px; }
.wf-market-price { font-weight: 700; color: #fff; }
.wf-market-dim { color: #6f8590; font-weight: 400; }
.wf-market-trend { display: inline-block; font: 700 12px/1 "Roboto Condensed", Roboto, sans-serif; padding: 4px 7px; border-radius: 3px; }
.wf-market-trend.up { color: #0f1418; background: #2E9E67; }
.wf-market-trend.down { color: #fff; background: #B5342B; }
.wf-market-trend.flat { color: #cfd8dc; background: rgba(255,255,255,.08); }

/* ===== v1.3.6 all Primes table ([wf_primes], inc/primes.php) ===== */
.wf-primes-name a { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.wf-primes-name img { width: 36px; height: 48px; object-fit: cover; border-radius: 3px; flex: none; background: rgba(255,255,255,.05); }
.wf-primes-name b { font: 700 15px/1.2 "Roboto Condensed", Roboto, sans-serif; }
.wf-primes-upd { display: block; font-size: 11px; color: #8fa3ad; }
.wf-primes-relics { color: #9fb3bd; font-size: 12px; }
.wf-relic-badge.res { color: #0f1418; background: var(--wf-gold); border-color: var(--wf-gold); }

/* ===== v1.3.7 live Prime status line on frame pages ===== */
.wf-prime-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 12px 0 4px; padding: 10px 14px; background: rgba(6,12,18,.55); border: 1px solid rgba(255,255,255,.1); border-radius: 6px; font-size: 13px; color: #cfd8dc; }
.wf-prime-line .wf-prime-text { color: #cfd8dc; }
.wf-prime-line .wf-prime-meta { color: #8fa3ad; }
.wf-prime-line .wf-prime-meta b { color: #fff; }
.wf-prime-line a { color: var(--wf-gold); text-decoration: none; font-weight: 700; }

/* ===== v1.3.8 homepage latest-guides grid ([wf_latest], inc/home.php) ===== */
.wf-latest { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: 10px 0 18px; }
.wf-latest-card { display: flex; flex-direction: column; background: rgba(6,12,18,.62); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; overflow: hidden; text-decoration: none; color: #cfd8dc; transition: border-color .15s ease; }
.wf-latest-card:hover, .wf-latest-card:focus-visible { border-color: var(--wf-gold); outline: none; }
.wf-latest-card img, .wf-latest-noimg { display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; background: #0f1418; }
.wf-latest-title { padding: 10px 12px 2px; font: 700 15px/1.3 "Roboto Condensed", Roboto, sans-serif; color: #fff; }
.wf-latest-date { padding: 0 12px 12px; font-size: 12px; color: #8fa3ad; }

/* ===== v1.3.9 Helminth on frame pages ===== */
.wf-fp-abil { position: relative; }
.wf-fp-abil .hx { position: absolute; top: 6px; right: 6px; font: 700 9px/1 "Roboto Condensed", Roboto, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #0f1418; background: var(--wf-gold); padding: 3px 5px; border-radius: 3px; }
.wf-helm-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 0 4px; padding: 10px 14px; background: rgba(6,12,18,.55); border: 1px solid rgba(255,255,255,.1); border-radius: 6px; font-size: 13px; color: #cfd8dc; }
.wf-helm-line b { color: #fff; }
.wf-helm-line a { color: var(--wf-gold); font-weight: 700; text-decoration: none; }

/* v1.4.0: /frames/ hub (archive-frame.php). Dan 2026-09-12: headline index pages get a real grid, ten to a row, with role filters. */
.wf-frame-index .wf-weapons-main { max-width: 1180px; }
.wf-fchips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 14px; }
.wf-chip {
  background: var(--wf-card); border: 1px solid #2a2a30; color: var(--wf-ink-2); cursor: pointer; border-radius: 2px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1; padding: 10px 12px;
  transition: border-color .15s ease, color .15s ease;
}
.wf-chip span { color: var(--wf-ink-3); font-weight: 600; margin-left: 5px; letter-spacing: 0; }
.wf-chip:hover { color: var(--wf-ink); border-color: #3a3a42; }
.wf-chip.is-active { color: var(--wf-gold); border-color: var(--wf-gold-border); }
.wf-chip.is-active span { color: var(--wf-gold-bright); }
.wf-chip:focus-visible { outline: 1px solid var(--wf-gold); outline-offset: 1px; }
.wf-fsearch {
  margin-left: auto; min-width: 170px; background: #111114; border: 1px solid #2a2a30; color: var(--wf-ink); border-radius: 2px;
  padding: 9px 11px; font-size: 13px;
}
.wf-fsearch:focus { outline: none; border-color: var(--wf-gold-border); }
.wf-fblurb { color: var(--wf-ink-3); margin: 0 0 14px; max-width: 80ch; }
.wf-fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 0 0 8px; }
.wf-ftile {
  position: relative; display: block; background: var(--wf-card); border: 1px solid #232327; border-radius: 2px;
  padding: 6px 6px 8px; text-align: center; text-decoration: none; transition: border-color .15s ease, transform .15s ease;
}
.wf-ftile img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border: 0; border-radius: 2px;
  background: radial-gradient(ellipse at 50% 42%, #262833 0%, #16171B 72%);
}
.wf-ftile .wf-fname { display: block; margin-top: 6px; font-weight: 700; font-size: 12.5px; line-height: 1.15; color: var(--wf-gold); }
.wf-ftile .wf-frole { display: block; margin-top: 3px; font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wf-ink-3); }
.wf-ftile:hover { border-color: var(--wf-gold-border); transform: translateY(-3px); }
.wf-ftile:focus-visible { outline: 1px solid var(--wf-gold); outline-offset: 1px; }
.wf-ftile[hidden] { display: none; }
.wf-ftier {
  position: absolute; top: 9px; left: 9px; min-width: 18px; padding: 3px 4px; border-radius: 2px;
  background: rgba(8, 8, 10, .82); border: 1px solid var(--wf-gold-border); color: var(--wf-gold-bright);
  font-size: 10.5px; font-weight: 800; line-height: 1; letter-spacing: .04em;
}
.wf-ftier.t-S { background: var(--wf-gold); color: #111; border-color: var(--wf-gold); }
.wf-fprime { position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--wf-gold); box-shadow: 0 0 6px var(--wf-gold); }
.wf-fempty { color: var(--wf-ink-3); margin: 8px 0 0; }
.wf-fsection { margin-top: 34px; }
.wf-fgrid-mech { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); max-width: 232px; }
.wf-fnext { margin-top: 28px; }
@media (max-width: 600px) {
  .wf-fgrid, .wf-fgrid-mech { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
  .wf-fsearch { margin-left: 0; width: 100%; }
  .wf-ftile .wf-frole { display: none; }
}

/* v1.4.0b: /weapons/ index gets the same care. The main was a flex child sized to content (about 850px of 1100);
   now full width, seven cards per row instead of four, and a name search across every class tab. */
.wf-weapons-index .wf-weapons-main { width: 100%; flex: 1 1 auto; }
.wf-weapon-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.wf-wcard img { max-width: 110px; }
.wf-wtools { display: flex; justify-content: flex-end; margin: 0 0 -6px; }
.wf-wsearch {
  min-width: 220px; background: #111114; border: 1px solid #2a2a30; color: var(--wf-ink); border-radius: 2px; padding: 9px 11px; font-size: 13px;
}
.wf-wsearch:focus { outline: none; border-color: var(--wf-gold-border); }
.wf-weapons-index.is-searching .wf-tabnav { opacity: .45; pointer-events: none; }
.wf-weapons-index.is-searching .wf-tabpanel { display: block; }
.wf-weapons-index.is-searching .wf-tabpanel[hidden] { display: none; }
.wf-weapon-grid > [hidden] { display: none; }
.wf-wempty { color: var(--wf-ink-3); margin-top: 12px; }
@media (max-width: 600px) { .wf-wtools { justify-content: stretch; } .wf-wsearch { width: 100%; } .wf-weapon-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; } }

/* v1.4.1: /mods/all/ mod database hub ([wf_moddb]). Same folded cards as [modrow]; class chips, rarity + polarity selects, search. */
.wf-moddb-chips { margin-bottom: 8px; }
.wf-moddb-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 0 0 12px; }
.wf-moddb-sel { display: flex; flex-direction: column; gap: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wf-ink-3); }
.wf-moddb-sel select { background: #111114; border: 1px solid #2a2a30; color: var(--wf-ink); border-radius: 2px; padding: 8px 10px; font-size: 13px; min-width: 150px; }
.wf-moddb-sel select:focus { outline: none; border-color: var(--wf-gold-border); }
.wf-moddb-tools .wf-fsearch { margin-left: auto; flex: 1 1 200px; max-width: 320px; }
.wf-moddb-status { color: var(--wf-ink-3); margin: 0 0 12px; font-size: 14px; }
.wf-moddb-grid { min-height: 160px; }
.wf-moddb-more { margin: 14px 0 0; }
.wf-moddb-guide {
  position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); z-index: 3;
  font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #111; background: var(--wf-gold);
  padding: 3px 7px; border-radius: 2px; text-decoration: none;
}
.wf-fp-popmod:hover .wf-moddb-guide, .wf-fp-popmod.open .wf-moddb-guide { display: none; }
@media (max-width: 600px) { .wf-moddb-tools .wf-fsearch { max-width: none; margin-left: 0; } }

/* v1.4.2: category hubs (category.php): compact post cards, topic chips, title search. */
.wf-cat-index .wf-weapons-main { max-width: 1180px; width: 100%; }
.wf-cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.wf-ccard { display: flex; flex-direction: column; background: var(--wf-card); border: 1px solid #232327; border-radius: 2px; text-decoration: none; overflow: hidden; transition: border-color .15s ease, transform .15s ease; }
.wf-ccard:hover { border-color: var(--wf-gold-border); transform: translateY(-3px); }
.wf-ccard:focus-visible { outline: 1px solid var(--wf-gold); outline-offset: 1px; }
.wf-ccard[hidden] { display: none; }
.wf-cthumb { display: block; aspect-ratio: 1.91 / 1; background: radial-gradient(ellipse at 50% 42%, #262833 0%, #16171B 72%); }
.wf-cthumb img { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
.wf-ctitle { display: block; padding: 10px 12px 4px; font-weight: 700; font-size: 14px; line-height: 1.3; color: var(--wf-gold); }
.wf-cmeta { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 12px 11px; font-size: 11px; color: var(--wf-ink-3); }
.wf-ctag { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 9.5px; color: var(--wf-gold-bright); }
@media (max-width: 600px) { .wf-cgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .wf-ctitle { font-size: 12.5px; } }

/* v1.4.3: /resources/ hub ([wf_resources]): icon tiles, ten per row, chips by rarity and open world, Guide badge. */
.wf-rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin: 0 0 8px; }
.wf-rtile { position: relative; display: block; background: var(--wf-card); border: 1px solid #232327; border-radius: 2px; padding: 10px 6px 9px; text-align: center; text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; }
a.wf-rtile:hover { border-color: var(--wf-gold-border); transform: translateY(-3px); }
a.wf-rtile:focus-visible { outline: 1px solid var(--wf-gold); outline-offset: 1px; }
.wf-rtile[hidden] { display: none; }
.wf-rtile img { display: block; width: 64px; height: 64px; margin: 0 auto; object-fit: contain; border: 0; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
.wf-ricon-fallback { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; background: radial-gradient(ellipse at 50% 42%, #262833 0%, #16171B 72%); color: var(--wf-gold); font-weight: 800; font-size: 24px; }
.wf-rtile .wf-rname { display: block; margin-top: 7px; font-weight: 700; font-size: 12.5px; line-height: 1.15; color: var(--wf-ink-2); }
a.wf-rtile .wf-rname { color: var(--wf-gold); }
.wf-rtile .wf-rwhere { display: block; margin-top: 4px; font-size: 10.5px; line-height: 1.25; color: var(--wf-ink-3); }
.wf-rguide { position: absolute; top: 6px; right: 6px; font-size: 8.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #111; background: var(--wf-gold); padding: 2px 5px; border-radius: 2px; }
@media (max-width: 600px) { .wf-rgrid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; } .wf-rtile .wf-rwhere { display: none; } }