/* EFT Builds - house style (dark-first, RTL, rem-based so A-/A/A+ scale everything) */
:root{
  --bg:#f1efe8;--fg:#1d1d1a;--panel:#ffffff;--panel2:#f6f4ee;--border:#dcd8cc;--muted:#5f5d55;
  --accent:#8a6d2b;--accent-soft:#efe5cc;--accent-fg:#ffffff;--link:#7a5a12;
  --good:#2e7d32;--bad:#c0392b;--warn:#b7791f;--chip:#ece8dc;--shadow:0 1px 3px rgba(0,0,0,.12);
  --tier-s:#d4a017;--tier-a:#4f8a3c;--tier-b:#4a78a8;--tier-c:#7a7a7a;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121410;--fg:#e8e4d6;--panel:#1c1f1a;--panel2:#23271f;--border:#353a2f;--muted:#a3a08f;
  --accent:#c8b27a;--accent-soft:#2c2a1f;--accent-fg:#16170f;--link:#d9c48c;
  --good:#7cc47f;--bad:#ef7b6b;--warn:#e0b45a;--chip:#2a2e25;--shadow:0 1px 4px rgba(0,0,0,.5);
}}
:root[data-theme="dark"]{
  --bg:#121410;--fg:#e8e4d6;--panel:#1c1f1a;--panel2:#23271f;--border:#353a2f;--muted:#a3a08f;
  --accent:#c8b27a;--accent-soft:#2c2a1f;--accent-fg:#16170f;--link:#d9c48c;
  --good:#7cc47f;--bad:#ef7b6b;--warn:#e0b45a;--chip:#2a2e25;--shadow:0 1px 4px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html{background:var(--bg);font-size:18px}
body{background:var(--bg);color:var(--fg);font-family:"Segoe UI",Calibri,Arial,sans-serif;line-height:1.55;margin:0 auto;max-width:1440px;padding:18px 22px 60px;min-height:100vh;font-size:1rem}
a{color:var(--link)}
h1{font-size:1.45rem;margin:0}
h2{font-size:1.15rem;margin:0 0 .7rem}
h3{font-size:1rem;margin:0 0 .6rem}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}

/* control bar (theme + font size), px-sized on purpose so it stays put while the page scales */
#ctlBar{position:fixed;top:12px;inset-inline-end:12px;z-index:999;display:flex;gap:6px;flex-wrap:wrap}
#ctlBar button{background:var(--panel);color:var(--fg);border:1px solid var(--border);border-radius:8px;padding:7px 11px;cursor:pointer;font-size:15px;font-family:inherit;box-shadow:var(--shadow)}
#ctlBar button.lang{min-width:2.6em}
#ctlBar button.lang.sel{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);font-weight:700}

/* header */
.top{margin:4px 0 18px}
.brand{display:flex;align-items:center;gap:14px}
.logo{background:var(--accent);color:var(--accent-fg);font-weight:800;letter-spacing:1px;border-radius:10px;padding:.55rem .7rem;font-size:1.05rem}
.mode{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent);border-radius:6px;padding:0 .4rem;font-size:.85rem;vertical-align:middle}
.sub{color:var(--muted);font-size:.85rem;margin-top:2px}
.banner{margin-top:12px;background:var(--accent-soft);border:1px solid var(--accent);border-radius:10px;padding:.6rem .9rem;font-size:.9rem}
.banner.err{border-color:var(--bad);color:var(--bad)}

/* steps */
.step{margin-bottom:18px}
.num{display:inline-flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--accent);color:var(--accent-fg);font-size:.9rem;margin-inline-end:.4rem}
.class-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:10px}
.class-card{background:var(--panel);border:2px solid var(--border);border-radius:12px;padding:.6rem;cursor:pointer;text-align:center;box-shadow:var(--shadow);transition:border-color .15s,transform .15s;color:var(--fg);font-family:inherit;font-size:1rem}
.class-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.class-card.sel{border-color:var(--accent);background:var(--accent-soft)}
.class-card img{width:100%;height:4.6rem;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.class-card .cn{font-weight:700;margin-top:.3rem}
.class-card .cc{color:var(--muted);font-size:.78rem}
.model-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
select{font-family:inherit;font-size:1rem;background:var(--panel);color:var(--fg);border:2px solid var(--accent);border-radius:10px;padding:.5rem .7rem;min-width:min(22rem,100%);max-width:100%}
.hint{color:var(--muted);font-size:.85rem}

/* layout */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 25rem;gap:16px;align-items:start}
@media (max-width:1100px){.layout{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:1rem 1.1rem;box-shadow:var(--shadow);margin-bottom:14px}
.side-col .card{position:relative}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px;align-items:center}
@media (max-width:800px){.hero{grid-template-columns:1fr}}
.hero-img{background:radial-gradient(ellipse at center,var(--panel2),var(--panel));border-radius:10px;min-height:11rem;display:flex;align-items:center;justify-content:center}
.hero-img img{max-width:100%;max-height:14rem;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}
.img-note{text-align:center;margin-top:.3rem}
.hero h2{font-size:1.3rem;margin-bottom:.2rem}
.hero .full{color:var(--muted);font-size:.85rem;text-align:start}
.facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:.6rem}
.chip{background:var(--chip);border:1px solid var(--border);border-radius:999px;padding:.12rem .6rem;font-size:.8rem;white-space:nowrap}
.chip.good{color:var(--good);border-color:var(--good)}
.chip.bad{color:var(--bad);border-color:var(--bad)}
.chip.warn{color:var(--warn);border-color:var(--warn)}
.tier{display:inline-block;font-weight:800;border-radius:6px;padding:0 .45rem;color:#fff;font-size:.85rem;margin-inline-start:.4rem;vertical-align:middle}
.tier.S{background:var(--tier-s)}.tier.A{background:var(--tier-a)}.tier.B{background:var(--tier-b)}.tier.C{background:var(--tier-c)}

/* profile tabs */
.profiles{display:flex;gap:8px;margin:0 0 14px;flex-wrap:wrap}
.ptab{flex:1;min-width:11rem;background:var(--panel);border:2px solid var(--border);border-radius:12px;padding:.55rem .8rem;cursor:pointer;text-align:start;color:var(--fg);font-family:inherit;font-size:1rem;box-shadow:var(--shadow)}
.ptab.sel{border-color:var(--accent);background:var(--accent-soft)}
.ptab .pt{font-weight:700}
.ptab .pd{color:var(--muted);font-size:.78rem}
.ptab .pc{font-size:.85rem;margin-top:.15rem}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(11rem,100%),1fr));gap:10px}
.stat{background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:.55rem .7rem}
.stat .sl{color:var(--muted);font-size:.8rem}
.stat .sv{font-size:1.35rem;font-weight:700}
.stat .sd{font-size:.8rem}
.bar{height:6px;background:var(--chip);border-radius:3px;margin-top:.35rem;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--accent);border-radius:3px}
.cost-row{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:.9rem;align-items:baseline}
.cost-row .total{font-size:1.25rem;font-weight:800;color:var(--accent)}
.note{color:var(--muted);font-size:.8rem;margin-top:.5rem}

/* parts tree */
.parts-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.part{display:grid;grid-template-columns:3.6rem 4.2rem minmax(0,1fr) auto;gap:10px;align-items:center;padding:.45rem .3rem;border-bottom:1px solid var(--border)}
.part:last-child{border-bottom:none}
.part .idx{font-size:.85rem;font-weight:700;text-align:center;color:var(--accent)}
.part.child .idx{color:var(--muted);font-weight:400}
.part .pimg{width:4.2rem;height:3.2rem;background:var(--panel2);border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.part .pimg img{max-width:100%;max-height:100%;object-fit:contain}
.part .pn{font-weight:600;text-align:start;overflow-wrap:anywhere}
.part .pw{color:var(--muted);font-size:.8rem}
.part .pfx{display:flex;gap:5px;flex-wrap:wrap;margin-top:.15rem}
.part .pp{text-align:end;white-space:nowrap}
.part .pp .price{font-weight:700}
.part .pp .src{color:var(--muted);font-size:.75rem}
.part.optic{background:linear-gradient(to left,transparent,var(--accent-soft))}
[dir="rtl"] .part.optic{background:linear-gradient(to right,transparent,var(--accent-soft))}
.alt-optic{margin-top:.7rem;font-size:.85rem;color:var(--muted)}
.part.flash{animation:flash 1.8s ease-out}
@keyframes flash{from{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent)}to{box-shadow:inset 0 0 0 2px transparent}}

/* build diagram: every part as a picture, linked to the part it mounts on (positions set in rem by app.js) */
.bd-wrap{overflow-x:auto;padding:.6rem 0 .3rem}
.bd{position:relative;margin:0 auto}
.bd-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
[dir="rtl"] .bd-lines{transform:scaleX(-1)}
.bd-lines path{fill:none;stroke:var(--muted);stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:.65}
.bd-lines path.o{stroke:var(--accent);opacity:1}
.bd-node{position:absolute;display:flex;flex-direction:column;padding:0;margin:0;background:none;border:none;color:var(--fg);font-family:inherit;font-size:1rem;text-align:center}
button.bd-node{cursor:pointer}
.bd-img{position:relative;display:flex;align-items:center;justify-content:center;background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:.15rem .3rem;transition:border-color .15s}
.bd-img img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.bd-node.root .bd-img{background:radial-gradient(ellipse at center,var(--panel2),var(--panel));border-color:var(--accent)}
.bd-node.optic .bd-img{background:var(--accent-soft);border-color:var(--accent)}
button.bd-node:hover .bd-img,button.bd-node:focus-visible .bd-img{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.bd-num{position:absolute;top:-.5rem;inset-inline-start:-.4rem;background:var(--panel);border:1px solid var(--border);border-radius:999px;font-size:.62rem;line-height:1;padding:.14rem .32rem;color:var(--accent);font-weight:700}
.bd-name{font-size:.7rem;line-height:1.2;margin-top:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-node.root .bd-name{font-size:.8rem;font-weight:700}

/* ammo */
.ammo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr));gap:10px}
.ammo{background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:.6rem .7rem;display:grid;grid-template-columns:3rem minmax(0,1fr);gap:8px;align-items:center}
.ammo img{width:3rem;height:3rem;object-fit:contain}
.ammo .at{font-size:.75rem;color:var(--accent);font-weight:700}
.ammo .an{font-weight:600;text-align:start;font-size:.9rem}
.ammo .as{font-size:.78rem;color:var(--muted)}

/* side */
.verdict .role{font-size:.95rem}
ul.pc{list-style:none;padding:0;margin:0}
ul.pc li{padding:.3rem 0 .3rem;border-bottom:1px dashed var(--border);font-size:.92rem;display:flex;gap:.45rem}
ul.pc li:last-child{border-bottom:none}
ul.pc li .ic{flex:0 0 1.1rem;text-align:center;font-weight:800}
ul.pc.pros .ic{color:var(--good)} ul.pc.cons .ic{color:var(--bad)}
.map{border:1px solid var(--border);border-radius:10px;padding:.5rem .65rem;margin-bottom:8px;background:var(--panel2)}
.map .mh{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.map .mn{font-weight:700}
.map .mr{font-size:.85rem}
.map .mb{font-size:.78rem;color:var(--muted);margin-top:.2rem}
.map.avoid{opacity:.8}
.fit{font-size:.75rem;border-radius:999px;padding:0 .5rem;border:1px solid var(--border)}
.fit.hi{color:var(--good);border-color:var(--good)} .fit.lo{color:var(--bad);border-color:var(--bad)}
.subhead{font-size:.85rem;color:var(--muted);margin:.8rem 0 .4rem}
.pve-tip{background:var(--accent-soft);border-radius:10px;padding:.55rem .7rem;font-size:.88rem;margin-top:.6rem}
.curated{font-size:.9rem;margin:.5rem 0}

/* mode tabs: by weapon / by map */
.mode-tabs{display:flex;gap:8px;margin:0 0 16px;flex-wrap:wrap}
.mode-tabs button{background:var(--panel);color:var(--fg);border:2px solid var(--border);border-radius:999px;padding:.4rem 1.1rem;cursor:pointer;font-family:inherit;font-size:1rem;font-weight:600;box-shadow:var(--shadow)}
.mode-tabs button.sel{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}

/* map-first view */
.map-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:10px}
.map-card .mc{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;margin:.3rem 0 .15rem}
.need-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:.3rem 0;border-bottom:1px dashed var(--border);font-size:.92rem}
.combo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:800px){.combo{grid-template-columns:1fr}}

/* weapon tiles (second weapon, map picks) */
.gtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(15rem,100%),1fr));gap:8px}
.gtiles.col{grid-template-columns:1fr}
.gtile{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:10px;align-items:center;background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:.45rem .6rem;cursor:pointer;color:var(--fg);font-family:inherit;font-size:1rem;text-align:start;transition:border-color .15s}
.gtile:hover{border-color:var(--accent)}
.gtile img{width:5.5rem;height:3rem;object-fit:contain}
.gtile .gn{font-weight:700;overflow-wrap:anywhere}
.gtile .gm{display:flex;gap:4px;flex-wrap:wrap;margin-top:.2rem}

/* need level badges and second-weapon card */
.lvl{display:inline-block;font-size:.78rem;font-weight:700;border-radius:999px;padding:.05rem .6rem;border:1px solid var(--border);white-space:nowrap}
.lvl.l3{color:#fff;background:var(--bad);border-color:var(--bad)}
.lvl.l2{color:var(--accent-fg);background:var(--accent);border-color:var(--accent)}
.lvl.l1{color:var(--warn);border-color:var(--warn)}
.lvl.l0{color:var(--muted)}
.kit-need{margin:.7rem 0 .2rem;font-size:.95rem}
.kit-warn{margin-top:.6rem;padding:.45rem .7rem;border:1px solid var(--warn);border-radius:10px;color:var(--warn);font-size:.88rem}
.linkbtn{background:none;border:none;padding:0;color:var(--link);text-decoration:underline;cursor:pointer;font-family:inherit;font-size:inherit}
#kitCard label{font-weight:600}

/* phones and narrow windows: 16px gutters, no sideways scrolling */
@media (max-width:640px){
  body{padding:12px 16px 50px}
  #ctlBar{position:static;justify-content:flex-start;margin-bottom:10px}
  h1{font-size:1.2rem}
  .class-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  select{width:100%;min-width:0}
  .ptab{min-width:0;flex:1 1 100%}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .part{grid-template-columns:2.8rem 3.2rem minmax(0,1fr);row-gap:4px}
  .part .pimg{width:3.2rem;height:2.6rem}
  .part .pp{grid-column:3;text-align:start}
}
footer{color:var(--muted);font-size:.8rem;margin-top:26px;border-top:1px solid var(--border);padding-top:12px}
footer p{margin:.3rem 0}
.empty{color:var(--muted);text-align:center;padding:2rem}