/* ENDFIELD CONFIG ARCHIVE — original CSS, industrial-futurist theme
   palette: graphite #14171c / plate #1b2027 / amber #f5a623 / cyan #2fc5c9 */
:root{
  --bg:#101318; --bg2:#151a21; --plate:#1b212a; --plate2:#20262f;
  --line:#2c343f; --ink:#e8ecf1; --dim:#8b96a5; --faint:#5a6472;
  --amber:#f5a623; --amber2:#ffc75e; --cyan:#2fc5c9; --cyan2:#7fe3e6;
  --mono:"Cascadia Code","JetBrains Mono",Consolas,monospace;
}
*{box-sizing:border-box}
html{scrollbar-color:#333c48 #101318}
body{margin:0;background:
  linear-gradient(0deg,rgba(47,197,201,.03),rgba(47,197,201,.03)),
  repeating-linear-gradient(135deg,transparent 0 22px,rgba(255,255,255,.012) 22px 23px),
  var(--bg);
  color:var(--ink);font:15px/1.65 "Segoe UI",system-ui,-apple-system,"Noto Sans",sans-serif}
a{color:var(--cyan);text-decoration:none}a:hover{color:var(--cyan2)}
code{font-family:var(--mono);font-size:.86em;color:var(--amber2);background:rgba(245,166,35,.07);padding:1px 5px;border:1px solid rgba(245,166,35,.18)}
.frame{max-width:1180px;margin:0 auto;padding:0 20px 60px}

/* header */
header{display:flex;align-items:center;gap:26px;padding:16px 0 10px;border-bottom:1px solid var(--line);position:relative}
header:before{content:"";position:absolute;left:0;bottom:-1px;width:180px;height:2px;background:linear-gradient(90deg,var(--amber),transparent)}
.logo{display:flex;flex-direction:column;line-height:1.05}
.lg-e{font-weight:800;letter-spacing:.24em;color:var(--ink);font-size:15px}
.lg-c{font-weight:600;letter-spacing:.34em;color:var(--amber);font-size:10px}
header nav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
header nav a{color:var(--dim);padding:6px 11px;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;border:1px solid transparent}
header nav a:hover{color:var(--ink)}
header nav a.on{color:var(--amber2);border-color:rgba(245,166,35,.35);background:rgba(245,166,35,.06);clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.ver{font-family:var(--mono);font-size:10.5px;color:var(--faint);letter-spacing:.06em;white-space:nowrap}
.notice{font-size:11.5px;color:var(--dim);border:1px dashed var(--line);border-left:3px solid var(--amber);padding:6px 12px;margin:12px 0 0;background:rgba(27,33,42,.5)}

/* hero */
.hero{padding:56px 0 30px;position:relative}
.hero-tag{font-family:var(--mono);color:var(--cyan);letter-spacing:.2em;font-size:12px;margin-bottom:12px}
.hero h1{font-size:44px;line-height:1.08;margin:0 0 14px;font-weight:800;letter-spacing:.01em}
.hero h1:after{content:"";display:block;width:90px;height:3px;background:var(--amber);margin-top:16px}
.hero p{max-width:720px;color:var(--dim)}
.stats{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap}
.st{--c:var(--line);border:1px solid var(--line);background:linear-gradient(180deg,var(--plate),var(--bg2));
  padding:12px 22px;min-width:118px;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.st b{display:block;font-size:26px;color:var(--amber2);font-family:var(--mono)}
.st span{font-size:11px;color:var(--dim);letter-spacing:.1em;text-transform:uppercase}

/* sections */
.sec{font-family:var(--mono);color:var(--cyan);letter-spacing:.16em;font-size:13px;margin:34px 0 12px}
section h2{margin:0}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
.col{padding:0 4px}
.col h3{margin:0 0 8px;font-size:15px;color:var(--ink)}
.col p{color:var(--dim);font-size:13.5px}

/* cards */
.hgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.hcard{position:relative;display:block;background:linear-gradient(180deg,var(--plate),var(--bg2));
  border:1px solid var(--line);border-left:3px solid var(--ec,#888);padding:14px 12px 10px;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);transition:transform .12s}
.hcard:hover{transform:translateY(-2px)}
.hc-name{font-weight:700;font-size:16px;margin:6px 0 6px}
.hc-sub{display:flex;gap:5px;flex-wrap:wrap}
.hc-r{margin-top:8px;font-size:11px}
.crow{display:grid;grid-template-columns:2.2fr .9fr .9fr 1fr 1.6fr;gap:8px;align-items:center;
  padding:9px 12px;border:1px solid var(--line);border-left:3px solid var(--ec,#888);
  background:var(--bg2);margin-bottom:6px;color:var(--ink)}
.crow:hover{border-color:var(--ec);background:var(--plate)}
.cr-name{font-weight:650}.cr-name small{display:block;color:var(--faint);font-size:11px;font-weight:400}
.cr-g{display:flex;gap:12px;font-family:var(--mono);font-size:12px;color:var(--dim)}
.chead{display:grid;grid-template-columns:2.2fr .9fr .9fr 1fr 1.6fr;gap:8px;padding:4px 12px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--line)}

/* badges */
.badge{--bc:var(--cyan);display:inline-block;font-size:11px;letter-spacing:.08em;padding:2px 8px;
  color:var(--bc);border:1px solid color-mix(in srgb,var(--bc) 55%,transparent);
  background:color-mix(in srgb,var(--bc) 10%,transparent);text-transform:uppercase;font-weight:600}
.badge.dim{--bc:#7b8694}
.pips{color:var(--amber);font-size:11px;letter-spacing:2px}
.pips .off{color:#3a434f}

/* page title */
.pt{font-size:26px;margin:26px 0 4px;font-weight:800}
.pt small{font-size:13px;color:var(--faint);font-weight:500;margin-left:10px}
.ptc{font-family:var(--mono);font-size:11.5px;color:var(--faint);letter-spacing:.1em}
.lead{color:var(--dim);max-width:860px}
.crumbs{margin-top:22px;font-size:12px;color:var(--faint)}
.crumbs b{color:var(--ink)}

/* character detail */
.cd-top{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;border-bottom:2px solid var(--ec,#888);padding:8px 0 14px;margin-top:8px}
.cd-badges{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px}
.cd-cv{color:var(--faint);font-size:12px;margin-top:6px}
.cd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px;margin-top:18px}
.panel{background:linear-gradient(180deg,var(--plate),var(--bg2));border:1px solid var(--line);padding:16px 18px;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
.panel h3{margin:0 0 10px;font-size:14px;letter-spacing:.06em;color:var(--amber2)}
.panel h4{margin:14px 0 4px;font-size:12.5px;color:var(--cyan)}
.hint{color:var(--faint);font-weight:400;font-size:11px;font-family:var(--mono)}
.kv{color:var(--dim);font-size:13px;margin:3px 0}
.skill{border-top:1px solid var(--line);padding:8px 0}
.skill b{color:var(--ink)}
.skill p{margin:4px 0 0;color:var(--dim);font-size:12.5px}
.bk-list{list-style:none;padding:0;margin:0;color:var(--dim);font-size:13px}
.bk-list li{padding:4px 0;border-top:1px dashed var(--line)}
.bk{color:var(--cyan);font-family:var(--mono);font-size:12px;margin-right:8px}
.trace{font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:20px}

/* tables */
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);text-align:left;padding:7px 10px;border-bottom:1px solid var(--line)}
table.t td{padding:7px 10px;border-bottom:1px solid rgba(44,52,63,.5);color:var(--dim)}
table.t tr:hover td{background:rgba(47,197,201,.04);color:var(--ink)}
.stat-t td{font-family:var(--mono);font-size:16px;color:var(--amber2)}
.stat-t th{color:var(--cyan)}
.res{font-family:var(--mono);font-size:11px;margin-right:6px}
.na{color:var(--faint)}
.svgn{color:inherit}
input{background:var(--bg2);border:1px solid var(--line);color:var(--ink);padding:7px 12px;font:inherit;min-width:240px}
input:focus{outline:1px solid var(--cyan)}

/* factory */
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-top:16px}
.fcard{background:var(--bg2);border:1px solid var(--line);padding:12px 14px;position:relative}
.fcard b{display:block;margin:4px 0}
.fcard p{margin:4px 0 8px;color:var(--dim);font-size:12.5px}
.fc-bw{position:absolute;top:10px;right:12px;font-family:var(--mono);font-size:11px;color:var(--amber2)}
.fc-meta{font-size:11px;color:var(--faint)}

/* chart */
.chart{width:100%;height:auto;background:rgba(0,0,0,.25);border:1px solid var(--line)}

/* weapons / chips / gacha */
.hcard.amber{border-left-color:var(--amber)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.u-chip{font-size:11.5px;border:1px solid var(--line);background:var(--bg2);padding:3px 9px;color:var(--dim)}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
.sk-t td{font-family:var(--mono);font-size:12px;color:var(--dim)}
.idc code{font-size:10.5px}
details{margin-top:8px}
summary{cursor:pointer;color:var(--cyan);font-size:12px;letter-spacing:.08em}

/* footer */
footer{margin-top:60px;padding-top:14px;border-top:1px solid var(--line);color:var(--faint);font-size:12px;font-family:var(--mono)}
@media(max-width:860px){
  .cols{grid-template-columns:1fr}
  .crow,.chead{grid-template-columns:2fr 1fr 1fr 1fr}
  .cr-g{grid-column:1/-1}
  header{flex-wrap:wrap}
}