/* runes.css - Rune Database page (runes.html). Dark page, gold accents, parchment popup. Needs parchment.css. */
.rhead{text-align:center;margin:6px 0 12px}
.rhead h1{margin:0;font-family:"Lilita One",system-ui;font-weight:400;font-size:34px;letter-spacing:.5px;background:linear-gradient(180deg,#fbe9b8,#e9c46a 55%,#b98a2e);-webkit-background-clip:text;background-clip:text;color:transparent}
.rhead p{margin:6px auto 0;color:var(--dim);font-size:13.5px;max-width:760px}
.loading{text-align:center;color:var(--dim);padding:30px}
/* tabs + filters */
.rtabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:12px 0 10px}
.rtabs .dc-btn{padding:8px 13px;font-size:13.5px}
.rtabs .dc-btn .n{display:inline-block;margin-left:6px;padding:0 6px;border-radius:8px;font-size:11px;background:rgba(0,0,0,.28)}
.rtabs .dc-btn.on .n{background:rgba(90,55,20,.2)}
.rbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;background:rgba(13,20,34,.7);border:1px solid var(--line);border-radius:14px;padding:10px;margin:0 auto 10px;max-width:1120px}
.rbar input[type=search]{flex:1 1 260px;min-width:0;background:#0c1626;color:var(--ink);border:1px solid #243451;border-radius:10px;padding:9px 12px;font-size:14px}
.rbar select{flex:0 1 170px;min-width:0;background:#0c1626;color:var(--ink);border:1px solid #243451;border-radius:10px;padding:8px 10px;font-size:13px}
.rbar input:focus,.rbar select:focus{outline:none;border-color:var(--gold-deep)}
.rcount{text-align:center;color:var(--dim);font-size:12.5px;margin:0 0 12px}
.skills{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 auto 14px;max-width:1120px}
.skills .chip{appearance:none;cursor:pointer;border-radius:16px;padding:5px 11px;font:700 12px system-ui,sans-serif;background:#111b2c;color:#c6d2e6;border:1px solid #2a3751}
.skills .chip.on{background:linear-gradient(180deg,#fbe9b8,#e9c46a 55%,#b98a2e);color:#2a1606;border-color:#7a5a1a}
.banner{max-width:1120px;margin:0 auto 14px;padding:10px 14px;border-radius:12px;font-size:13px;line-height:1.5;border:1px solid #7a2a1a;background:rgba(80,20,10,.35);color:#ffcfbf}
.banner b{color:#ff9a7a}
.banner.info{border-color:#5b4a1e;background:rgba(201,163,90,.09);color:#e8dcc0}
.banner.info b{color:var(--gold)}
/* core runes */
.core{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:4px 0 18px}
.ccard{position:relative;border-radius:14px;padding:12px;background:linear-gradient(180deg,#17223a,#0c1422);border:1px solid #3a4d72;box-shadow:0 10px 26px rgba(0,0,0,.45),0 0 26px -12px var(--rc,#e9c46a)}
.ccard .copen{appearance:none;display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;width:100%;padding:0;margin:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.ccard .art{width:96px;height:96px;border-radius:12px;padding:4px;background:linear-gradient(160deg,#ffe49a,#c8901f 45%,#7a5410);box-shadow:0 3px 10px rgba(0,0,0,.55),inset 0 0 0 2px var(--rc,#c8901f)}
.ccard .art img{display:block;width:100%;height:100%;object-fit:contain;border-radius:8px;background:#120d08;border:2px solid var(--rc,#c8901f)}
.ccard .rk{position:absolute;top:-9px;left:10px;font:400 13px/1 "Lilita One",system-ui;letter-spacing:.5px;padding:4px 9px;border-radius:9px;color:#2a1606;background:linear-gradient(180deg,#fbe9b8,#e9c46a 55%,#b98a2e);border:1px solid #7a5a1a;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.ccard h3{margin:0 0 4px;font:400 20px/1.15 "Lilita One",system-ui;color:#fbe9b8;letter-spacing:.3px}
.ccard .pv{font-weight:800;font-size:13px;color:var(--gold)}
.ccard .pd{font-size:12.5px;color:#c6d2e6;margin-top:3px;line-height:1.4}
.ccard .cfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}
/* sections */
.sec{border:1px solid #223049;border-radius:14px;padding:0 12px;margin:0 0 14px;background:rgba(10,15,26,.35)}
.sec>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:11px 2px;font:400 19px/1.2 "Lilita One",system-ui;letter-spacing:.4px;color:var(--gold)}
.sec>summary::-webkit-details-marker{display:none}
.sec>summary::before{content:"\25B8";font-size:14px;color:var(--gold-deep);transition:transform .15s}
.sec[open]>summary::before{transform:rotate(90deg)}
.sec>summary .n{font:600 11px system-ui,sans-serif;color:var(--muted);background:#0e1a2e;border:1px solid #243451;border-radius:10px;padding:1px 8px}
.sec .help{font-size:12.5px;color:var(--dim);margin:-4px 2px 10px;line-height:1.45}
.sec .body{padding-bottom:12px}
.sub{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#9fb0c9;font-weight:800;margin:12px 2px 7px}
.sub:first-child{margin-top:0}
/* rune rows */
.rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:8px}
.rr{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px;border-radius:12px;background:#0d1626;border:1px solid #223049;transition:border-color .12s}
.rr:hover{border-color:#3a4d72}
.rr.own{box-shadow:inset 3px 0 0 #49b35a}
.rr.want{box-shadow:inset 3px 0 0 #e9c46a}
.rr.own.want{box-shadow:inset 3px 0 0 #49b35a,inset 6px 0 0 #e9c46a}
.ropen{appearance:none;display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:center;min-width:0;padding:7px 0 7px 7px;margin:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.ra{width:52px;height:52px;border-radius:8px;border:3px solid var(--rc,#55607a);background:#120d08;overflow:hidden;box-shadow:0 2px 5px rgba(0,0,0,.5)}
.ra img{display:block;width:100%;height:100%;object-fit:contain}
.ra .noimg,.big .noimg{display:grid;place-items:center;width:100%;height:100%;font-size:18px;color:#6b5a3a}
.rt{min-width:0}
.rt b{display:block;font-size:13.5px;line-height:1.25;color:#f1e6cc;overflow-wrap:anywhere}
.rt .ln{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:1.35;color:var(--dim);margin-top:2px}
.rt .ln i{font-style:normal;color:#e9c46a;font-weight:700}
.rt .bd{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.pill{display:inline-block;font:800 9.5px/1.5 system-ui,sans-serif;letter-spacing:.3px;text-transform:uppercase;padding:0 7px;border-radius:9px;white-space:nowrap}
.pill.rar{color:#0b1018;background:var(--rc,#8695ad)}
.ob-chest{color:#08210e;background:linear-gradient(180deg,#86e59a,#49b35a)}
.ob-craft{color:#06213a;background:linear-gradient(180deg,#9fd3ff,#4f9be0)}
.ob-late{color:#fff;background:linear-gradient(180deg,#e0533a,#a81f12)}
.favs{display:flex;flex-direction:column;gap:4px;padding:6px 8px 6px 0}
.fav{appearance:none;cursor:pointer;width:30px;height:28px;padding:0;border-radius:8px;border:1px solid #2a3b59;background:rgba(10,15,26,.8);color:#6f7d96;font:900 14px/1 system-ui,sans-serif}
.fav.own.on{background:linear-gradient(180deg,#86e59a,#49b35a);border-color:#49b35a;color:#08210e}
.fav.want.on{background:linear-gradient(180deg,#fbe9b8,#e9c46a 55%,#b98a2e);border-color:#7a5a1a;color:#2a1606}
.ccard .favs{flex-direction:row;padding:0}
/* family grid */
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.fcard{appearance:none;position:relative;cursor:pointer;border-radius:14px;overflow:hidden;padding:0;text-align:left;color:inherit;font:inherit;background:#0d1626;border:1px solid #223049;transition:transform .12s,border-color .12s}
.fcard:hover,.fcard:focus-visible{transform:translateY(-3px);border-color:#3a4d72;outline:none}
.fcard .port{position:relative;aspect-ratio:1/1;background:#0a0f1a;display:grid;place-items:center;border-bottom:3px solid var(--rc,#223049)}
.fcard .port img{width:78%;height:78%;object-fit:contain}
.fcard .port .noimg{font-size:12px;color:#5e6b82}
.fcard .tag{position:absolute;top:7px;left:7px;font:800 10px/1.5 system-ui;padding:1px 7px;border-radius:8px;background:rgba(5,9,16,.85);border:1px solid #2a3b59;color:var(--gold)}
.fcard .cn{padding:8px 9px 10px}
.fcard .nm{font-weight:700;font-size:13px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fcard .sb{font-size:11px;color:var(--dim);margin-top:2px}
.empty{text-align:center;color:var(--dim);padding:40px 10px;font-size:14px}
.foot{text-align:center;color:var(--muted);font-size:12px;margin:22px auto 0;max-width:760px;line-height:1.5}
/* popup on parchment (same red X as the hero card) */
.ov{position:fixed;inset:0;z-index:300;display:none;align-items:flex-start;justify-content:center;padding:24px 12px;overflow:auto;overscroll-behavior:contain;background:rgba(4,7,12,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.ov.on{display:flex}
.pop{position:relative;width:100%;max-width:560px;margin:auto 0;padding-top:12px}
.pop .x{position:absolute;top:0;right:0;z-index:3;width:36px;height:36px;border-radius:9px;cursor:pointer;display:grid;place-items:center;padding:0;font-size:17px;font-weight:900;color:#fff;
  background:radial-gradient(circle at 50% 32%,#e86a52,#9a2314);border:2px solid #f2b0a2;box-shadow:0 3px 9px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.35)}
.pop .x:hover{filter:brightness(1.08)}
.pop .dc-parch{padding:16px 16px 18px}
.pop h2{margin:0;padding:8px 44px 8px 12px;font-size:21px;font-weight:400;line-height:1.2;overflow-wrap:anywhere}
.pop h3{margin:14px 0 6px;font:400 15px "Lilita One",system-ui,sans-serif;letter-spacing:.5px;color:#5a2a05}
.pop .back{margin-top:10px;padding:6px 10px;font-size:12.5px}
.stones{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
.stones .dc-stone{min-width:42px;height:38px;padding:0 8px;font-size:15px}
.selnm{margin:8px 2px 0;font-size:13px;line-height:1.4;color:var(--dc-ink)}
.selnm b{color:#7a3d0a}
.lead{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin-top:12px}
.big{width:96px;height:96px;border-radius:12px;padding:4px;background:linear-gradient(160deg,#ffe49a,#c8901f 45%,#7a5410);box-shadow:0 3px 8px rgba(40,20,0,.55),inset 0 0 0 2px var(--rc,#c8901f)}
.big img{display:block;width:100%;height:100%;object-fit:contain;border-radius:8px;border:2px solid var(--rc,#c8901f);background:#2a1d10}
.meta{font-size:13px;line-height:1.5;color:var(--dc-ink);min-width:0}
.meta .nm{font-weight:800;font-size:15px;overflow-wrap:anywhere}
.meta .bd{display:flex;flex-wrap:wrap;gap:4px;margin:3px 0}
.meta .pill{font-size:10.5px;padding:1px 8px}
.meta .fm{appearance:none;border:0;background:none;padding:0;cursor:pointer;color:#7a3d0a;font:700 12.5px system-ui,sans-serif;text-decoration:underline;text-align:left}
.pacts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.pacts .dc-btn{padding:6px 10px;font-size:12.5px}
.pwell{padding:6px 10px;font-size:13px;color:var(--dc-ink);line-height:1.45}
.pwell .dim{color:var(--dc-ink-soft)}
.pwell ul{margin:4px 0;padding-left:18px}
.pwell .pvn{font-weight:700;color:#7a3d0a}
.erow{display:grid;grid-template-columns:44px 1fr;gap:9px;align-items:start;padding:6px 0;border-top:1px solid rgba(90,55,20,.25)}
.erow:first-child{border-top:0}
.erow img,.erow .noimg{width:44px;height:44px;border-radius:6px;border:2px solid #4a2e10;background:#3a2a18;object-fit:contain}
.erow .t{font-weight:700;font-size:13px;color:var(--dc-ink)}
.erow .t i{font-style:normal;color:#9a4a0a}
.erow .d{font-size:12.5px;color:#5a3a16;margin-top:1px}
.ty{display:inline-block;font-size:10.5px;font-weight:800;padding:1px 7px;border-radius:8px;margin-right:4px;color:#fff;vertical-align:1px}
.ty.active{background:#b8401c}.ty.opening{background:#2e6fc4}.ty.entrance{background:#6a3fb0}.ty.reactive{background:#2f8a4a}.ty.upon_death{background:#5a5045}
.unk{color:#8a4a0a;font-style:italic}
.pnote{font-size:11px;color:var(--dc-ink-soft);margin-top:12px;line-height:1.4}
/* family list inside the popup */
.plist{margin-top:10px}
.plist .sub{color:#7a4a1a;margin:12px 2px 6px}
.prow{appearance:none;display:grid;grid-template-columns:44px 1fr;gap:9px;align-items:center;width:100%;margin:0 0 5px;padding:5px 8px;cursor:pointer;text-align:left;border-radius:9px;
  border:1px solid rgba(90,55,20,.45);background:rgba(80,50,20,.14);color:var(--dc-ink);font:inherit}
.prow:hover{background:rgba(120,75,25,.25)}
.prow .ra{width:44px;height:44px;border-width:2px}
.prow b{display:block;font-size:13px;line-height:1.25;overflow-wrap:anywhere}
.prow small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:1.3;color:#5a3a16}
.prow small i{font-style:normal;color:#9a4a0a;font-weight:700}
.prow .pill{margin-left:4px;vertical-align:1px}
.toast{position:fixed;left:50%;bottom:24px;z-index:310;transform:translateX(-50%);background:#1a1205;color:var(--gold);border:1px solid var(--gold-deep);border-radius:10px;padding:8px 14px;display:none;max-width:90vw;text-align:center;font-size:13px}
.toast.on{display:block}
@media(max-width:900px){.core{grid-template-columns:1fr}.ccard .copen{grid-template-columns:84px 1fr}.ccard .art{width:84px;height:84px}}
@media(max-width:700px){.rows{grid-template-columns:1fr}}
@media(max-width:480px){
  .rhead h1{font-size:28px}
  .rtabs{gap:5px}.rtabs .dc-btn{padding:7px 9px;font-size:12.5px}
  .rbar{padding:8px;gap:6px}.rbar select{flex:1 1 calc(50% - 6px)}
  .sec{padding:0 8px}.sec>summary{font-size:17px}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .ov{padding:14px 6px}
  .pop .dc-parch{padding:13px 11px 15px}
  .big{width:76px;height:76px}
  .ropen{grid-template-columns:46px 1fr;gap:8px}.ra{width:46px;height:46px}
}
/* owned counts: [-] [n] [+] stepper, owned badges, My runes */
.favs{align-items:flex-end}
.ccard .favs{align-items:center}
.fav{width:30px;height:30px;touch-action:manipulation}
.qty{display:inline-flex;align-items:stretch;flex:none;border-radius:9px;border:1px solid #2a3b59;background:rgba(10,15,26,.8);overflow:hidden}
.qty.has{border-color:#49b35a}
.qb{appearance:none;cursor:pointer;width:30px;height:30px;padding:0;margin:0;border:0;background:transparent;color:#c6d2e6;font:900 16px/1 system-ui,sans-serif;touch-action:manipulation}
.qb:hover{background:#16223a;color:#fff}
.qi{width:46px;height:30px;padding:0 2px;margin:0;border:0;border-left:1px solid #2a3b59;border-right:1px solid #2a3b59;border-radius:0;background:#0c1626;color:#c6d2e6;text-align:center;font:700 13px system-ui,sans-serif;font-variant-numeric:tabular-nums}
.qty.has .qi{color:#86e59a}
.qi:focus{outline:none;background:#13213a;box-shadow:inset 0 0 0 2px var(--gold-deep)}
.ccard.own{border-color:#49b35a}
.oq{display:inline-block;font:800 10.5px/1.6 system-ui,sans-serif;letter-spacing:0;text-transform:none;padding:0 8px;border-radius:9px;color:#08210e;background:linear-gradient(180deg,#86e59a,#49b35a);white-space:nowrap}
.oq[hidden]{display:none}
.sec>summary .n.oq{color:#08210e;background:linear-gradient(180deg,#86e59a,#49b35a);border-color:#49b35a}
.sub .oq{margin-left:4px;vertical-align:1px}
.fcard .ftag{position:absolute;right:7px;bottom:7px}
.pfam{margin-left:6px;vertical-align:1px}
.mine{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 8px;max-width:1120px;margin:0 auto 8px;padding:8px 12px;border-radius:12px;border:1px solid #284a33;background:rgba(20,50,28,.25);font-size:13px;color:#c6d2e6}
.mine .mt{font:400 16px/1.2 "Lilita One",system-ui;letter-spacing:.4px;color:var(--gold)}
.mine .mn b{color:#86e59a}
.mine .mr{display:inline-block;padding:1px 8px;border-radius:9px;border:1px solid var(--rc,#55607a);box-shadow:inset 3px 0 0 var(--rc,#55607a);font-size:12px;white-space:nowrap}
.mine .mr b{color:#fff}
.mine .mo{padding:5px 11px;font-size:12.5px}
/* popup (parchment) */
.pacts{align-items:center}
.plab{font-weight:800;font-size:12.5px;color:#5a2a05}
.pop .qty{border-color:#8a5a20;background:#fff4dc}
.pop .qty.has{border-color:#2f8a4a}
.pop .qb{color:#5a2a05}
.pop .qb:hover{background:rgba(120,75,25,.18);color:#3a1a02}
.pop .qi{background:#fffaf0;color:#3a2005;border-left-color:#c9a26a;border-right-color:#c9a26a}
.pop .qty.has .qi{color:#1f6a35}
.pop .qi:focus{background:#fff;box-shadow:inset 0 0 0 2px #b98a2e}
.prw{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;margin:0 0 5px;border-radius:9px;border:1px solid rgba(90,55,20,.45);background:rgba(80,50,20,.14)}
.prw:hover{background:rgba(120,75,25,.25)}
.prw.own{box-shadow:inset 3px 0 0 #2f8a4a}
.prw .prow{margin:0;border:0;background:none;min-width:0}
.prw .prow:hover{background:none}
.prw .qty{margin-right:7px}
/* thumb-sized on phones and touch screens; 16px text stops iOS zooming into the field */
@media(max-width:700px),(pointer:coarse){
  .qb,.fav{width:34px;height:34px}
  .qi{width:50px;height:34px;font-size:16px}
  .mine .mo{min-height:34px}
}
@media(max-width:480px){
  .favs{padding:6px 6px 6px 0}
  .prw .prow{grid-template-columns:38px 1fr;gap:7px;padding:5px 4px 5px 6px}
  .prw .prow .ra{width:38px;height:38px}
  .prw .qty{margin-right:5px}
}
/* runes on heroes: who carries a rune (gold frame for Ultra Rare, Epic, Legendary and Special runes) */
.mine .srv{display:inline-block;padding:1px 8px;border-radius:9px;border:1px solid #5b4a1e;color:var(--gold);font-size:12px;font-weight:700;white-space:nowrap}
.plnote .dc-btn{padding:4px 12px;font-size:12.5px;margin-left:6px}
.rr .eqon,.ccard .eqon{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:5px;min-width:0;margin:-2px 8px 8px 8px;padding-top:6px;border-top:1px dashed #223049}
.ccard .eqon{margin:8px 0 0}
.eql{font:800 10px/1.6 system-ui,sans-serif;letter-spacing:.6px;text-transform:uppercase;color:var(--dim)}
.eqh{display:inline-flex;align-items:center;gap:5px;max-width:100%;min-width:0;padding:2px 8px 2px 2px;border-radius:14px;border:1px solid #2a3b59;background:rgba(10,15,26,.8);font-size:12px;font-weight:700;color:#cfdaec}
.eqh span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eqh img{width:22px;height:22px;flex:none;border-radius:50%;object-fit:cover;background:#0a1120}
a.eqh:hover{border-color:var(--gold-deep);color:#fff}
.eqon.hot .eqh{border-color:var(--gold-deep);color:var(--gold);box-shadow:0 0 8px rgba(233,196,106,.25)}
.eqon.hot .eqh img{box-shadow:0 0 0 2px var(--gold)}
.rr.eq{border-color:#3a4d72}
.split{margin-top:6px;font-size:12.5px;font-weight:700;color:#1f6a35}
.split[hidden]{display:none}
.eqlist .eqrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:5px 0;border-top:1px solid rgba(90,55,20,.25)}
.eqlist .eqrow:first-child{border-top:0}
.eqhero{display:flex;align-items:center;gap:8px;min-width:0;color:var(--dc-ink)}
.eqhero b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}
a.eqhero b{color:#7a3d0a;text-decoration:underline}
.eqhero img,.eqhero .noimg{width:40px;height:40px;flex:none;border-radius:8px;border:2px solid #4a2e10;background:#3a2a18;object-fit:cover}
.eqlist.hot .eqhero img,.eqlist.hot .eqhero .noimg{border-color:#c8901f;box-shadow:0 0 0 2px #ffe49a,0 0 10px rgba(200,144,31,.6)}
.eqlist.hot{box-shadow:inset 0 0 0 2px #c8901f}
.eqslot{font-size:11.5px;font-weight:700;color:#7a4a1a;white-space:nowrap}
.eqoff{padding:5px 10px;font-size:12px}
.eqnote{margin:6px 0 2px;font-size:11.5px;color:var(--dc-ink-soft)}
#askOv{z-index:320}
@media(max-width:480px){
  .eqlist .eqrow{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
  .eqlist .eqslot{grid-column:1;grid-row:2;padding-left:48px}
  .eqlist .eqoff{grid-column:2;grid-row:1/3}
  .rr .eqon{margin:-2px 6px 7px 6px}
}