/* Shared by /dictionary/ and /caster/: hero skill cards, artifact and buff lists (data: /data/game_dictionary.json) */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:linear-gradient(135deg,#0f0f23 0%,#1a1a3e 100%);background-attachment:fixed;color:#ddd;min-height:100vh;padding:20px 16px 60px;line-height:1.45}
.container{max-width:1600px;margin:0 auto}
header{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.home{font-weight:700;font-size:1.2em;text-decoration:none;background:linear-gradient(90deg,#f472b6,#818cf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
h1{font-size:1.5em;color:#eee}
.stamp{color:#777;font-size:0.82em;margin-left:auto}
.tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.tab,.btn,.chip{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);color:#bbb;border-radius:8px;padding:8px 16px;font-size:0.95em;cursor:pointer;font-family:inherit}
.tab.on{background:rgba(129,140,248,0.22);border-color:rgba(129,140,248,0.55);color:#c7d2fe;font-weight:600}
.btn:hover,.tab:hover,.chip:hover{background:rgba(255,255,255,0.11)}
.btn.small{padding:5px 11px;font-size:0.82em}
.chip{padding:4px 11px;font-size:0.82em;border-radius:14px}
.chip.on{background:rgba(96,165,250,0.22);border-color:rgba(96,165,250,0.5);color:#93c5fd}
section{display:none}
section.on{display:block}
.panel{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:14px 16px;margin-bottom:14px}
input[type=search]{background:rgba(0,0,0,0.3);border:1px solid rgba(255,255,255,0.15);color:#eee;border-radius:8px;padding:9px 12px;font-size:1em;min-width:220px;flex:1;max-width:360px;font-family:inherit}
.muted{color:#888;font-size:0.85em}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0 10px}
.empty{color:#666;text-align:center;padding:26px 0;font-size:0.95em}
k{color:#f3f4f6;font-weight:600}
v{color:#fbbf24;font-weight:700}

/* element / class icon filters (same look as the Hero Explorer's hero finder) */
.ic-chips{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.ic-group{display:flex;gap:6px;flex-wrap:wrap}
.ic-sep{width:1px;height:26px;background:rgba(255,255,255,0.15);margin:0 6px}
.ic-chip{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.06);border:2px solid transparent;cursor:pointer;transition:all 0.15s;padding:0}
.ic-chip img{width:22px;height:22px}
.ic-chip:hover{background:rgba(255,255,255,0.14)}
.ic-chip.active{border-color:#818cf8;background:rgba(129,140,248,0.22)}

/* hero picker grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;max-height:300px;overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.2) transparent}
.grid::-webkit-scrollbar{width:8px}
.grid::-webkit-scrollbar-track{background:transparent}
.grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.2);border-radius:4px}
.pick{position:relative;border-radius:10px;overflow:hidden;cursor:pointer;border:2px solid transparent;background:rgba(0,0,0,0.25)}
.pick img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.pick span{display:block;font-size:0.62em;color:#bbb;text-align:center;padding:2px 2px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick:hover{border-color:#fbbf24}
.pick.used{opacity:0.25;pointer-events:none}
.pick.first,.pick.sel{border-color:rgba(251,191,36,0.7)}

/* tags, badges, effect chips */
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:3px}
.tag{font-size:0.72em;padding:1px 8px;border-radius:10px;background:rgba(255,255,255,0.08);color:#bbb;white-space:nowrap}
.tag.fire{color:#fca5a5}.tag.ice{color:#93c5fd}.tag.wind{color:#86efac}.tag.light{color:#fde68a}.tag.dark{color:#d8b4fe}
.badge{font-size:0.74em;padding:2px 8px;border-radius:10px;background:rgba(255,255,255,0.08);color:#cbd5e1;white-space:nowrap}
.badge.cd{background:rgba(96,165,250,0.18);color:#93c5fd}
.badge.passive{background:rgba(74,222,128,0.16);color:#86efac}
.badge.soul{background:rgba(244,114,182,0.16);color:#f9a8d4}
.fx{display:flex;gap:5px;flex-wrap:wrap}
.fx-chip{display:inline-flex;align-items:center;gap:5px;font-size:0.8em;padding:2px 9px 2px 3px;border-radius:12px;background:rgba(0,0,0,0.3);border:1px solid rgba(255,255,255,0.1);color:#ddd;cursor:help;position:relative}
.fx-chip img{width:20px;height:20px}
.fx-chip b{color:#fbbf24}
.fx-chip.buff{border-color:rgba(96,165,250,0.35)}.fx-chip.debuff{border-color:rgba(248,113,113,0.4)}
/* one floating tooltip for the chips, placed by script so it never runs off the screen */
#gd-tip{position:fixed;z-index:50;display:none;max-width:min(320px,calc(100vw - 16px));background:rgba(15,15,35,0.98);border:1px solid rgba(255,255,255,0.22);border-radius:8px;padding:8px 10px;font-size:0.82em;color:#e5e7eb;line-height:1.4;pointer-events:none}

/* full hero card (Hero Guide) */
.hero{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.09);border-radius:12px;padding:14px 16px;margin-bottom:10px}
.hero-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.hero-head img{width:60px;height:60px;border-radius:50%;object-fit:cover;background:#1a1a3e}
.hero-name{font-size:1.35em;font-weight:700;color:#f3f4f6;line-height:1.2}
.speed{margin-left:auto;text-align:center;line-height:1.1}
.speed b{display:block;font-size:1.6em;color:#fbbf24;font-weight:500}
.speed em{display:block;font-style:normal;font-size:0.72em;color:#888;margin-top:2px}
.view-btn{display:inline-block;margin-top:10px;background:#6366f1;color:#fff;border:none;border-radius:8px;padding:8px 14px;font-size:0.85em;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap}
.view-btn:hover{background:#818cf8}
.speed span{font-size:0.68em;color:#888;text-transform:uppercase;letter-spacing:0.05em}
.skill{border-top:1px solid rgba(255,255,255,0.07);padding:10px 0 8px}
.skill-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.skill-top img.ic{width:40px;height:40px;border-radius:8px;background:#111;flex:none}
.skill-n{color:#777;font-size:0.75em;font-weight:700;width:20px;flex:none}
.skill-name{font-size:1.12em;font-weight:650;color:#e5e7eb}
.skill .fx{margin:6px 0 0 30px}
.desc{margin:7px 0 0 30px;font-size:0.94em;color:#b6bcc8;white-space:pre-line}
.sb{margin:6px 0 0 30px;font-size:0.88em;color:#f9a8d4;white-space:pre-line}
.extra{margin:8px 0 0;border-top:1px dashed rgba(255,255,255,0.1);padding-top:8px;font-size:0.88em;color:#aab}
.extra h4{font-size:0.82em;color:#888;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:4px;font-weight:600}
.extra li{margin:0 0 3px 16px}
.ee-head{display:flex;align-items:center;gap:10px;margin:4px 0 6px}
.ee-head img{width:44px;height:44px;object-fit:contain;flex:none}
.ee-name{color:#f3f4f6;font-weight:650;font-size:1.08em}
.ee-stat{color:#b6bcc8}
.ee-note{color:#888;font-size:0.92em;margin-bottom:4px}
.ee-block li b{color:#e5e7eb}

/* artifacts + buffs */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:10px}
.art,.gl{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:11px 13px;display:flex;gap:12px;align-items:flex-start}
.art img{width:54px;height:54px;object-fit:contain;flex:none}
.gl img{width:36px;height:36px;flex:none}
.art-name,.gl-name{font-weight:650;color:#f3f4f6;font-size:1.02em}
.art-desc,.gl-desc{font-size:0.9em;color:#b6bcc8;margin-top:3px;white-space:pre-line}
.gl.buff{border-left:3px solid #60a5fa}.gl.debuff{border-left:3px solid #f87171}.gl.common{border-left:3px solid #888}

@media (max-width:900px){
  .cards{grid-template-columns:1fr}
  .stamp{margin-left:0;width:100%}
  .hero-name{font-size:1.15em}
}