/* ============================================================
   Heroes of Kings - shared stylesheet
   Theme: Honor of Kings imperial GOLD on deep NAVY, with a
   WildRiftFire-style bright blue highlight and crimson accent.
   Design: fully SQUARED corners (no rounding).
   ============================================================ */

:root {
  --bg:        #0b1120;   /* deep navy */
  --bg-2:      #121a2e;   /* panel */
  --bg-3:      #1b2540;   /* raised panel / hover */
  --line:      #2b3a5a;   /* borders */
  --gold:      #f1c75e;   /* primary accent (imperial gold) */
  --gold-2:    #c99a36;   /* darker gold */
  --blue:      #3aa6e0;   /* WildRiftFire-style bright blue */
  --crimson:   #d63d3d;   /* danger / warning only */
  --fire:      #ee6a2c;   /* logo "FIRE" orange - energy accent */
  --fire-2:    #d8452a;   /* deeper ember (gradient end) */
  --green:     #46c08a;   /* strengths */
  --text:      #eef2f8;
  --text-dim:  #9fb0c8;
  --text-faint:#6c7c96;

  --t-s: #e8503a; --t-a: #e8902f; --t-b: #f1c75e; --t-c: #4fa3d9; --t-d: #8a93a3;

  --lane-clash:  #e08a3c;
  --lane-jungle: #5bbf52;
  --lane-mid:    #c06ad6;
  --lane-farm:   #3aa6e0;
  --lane-roam:   #e0b53c;

  --maxw: 1180px;
  --font: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background:
    radial-gradient(820px 320px at 50% -120px, rgba(238,106,44,0.11), transparent 70%),
    radial-gradient(1200px 480px at 50% -150px, rgba(241,199,94,0.08), transparent 70%),
    linear-gradient(180deg, #0c1424, var(--bg));
  color: var(--text);
  font-family: var(--font);
  font-size: 15px; line-height: 1.55; min-height: 100vh;
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: #fff; }
img { max-width: 100%; display: block; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 18px; }

/* ---------- Header / nav ---------- */
.site-header {
  border-bottom: 2px solid var(--gold-2);
  background: linear-gradient(180deg, #101a30, #0b1120);
  position: sticky; top: 0; z-index: 50;
}
.site-header .wrap { display: flex; align-items: center; gap: 26px; height: 62px; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand .logo { height: 36px; width: auto; display: block; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a { color: var(--text-dim); font-weight: 600; font-size: 14px; padding: 8px 13px; }
.nav a:hover { color: var(--text); background: var(--bg-3); }
.nav a.active { color: var(--gold); background: rgba(241,199,94,0.10); box-shadow: inset 0 -2px 0 var(--gold); }

/* Discord icon (top-right of header) - icon only, no border */
.discord-link { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
.discord-link svg { width: 26px; height: auto; fill: #5865F2; transition: fill .12s, transform .12s; }
.discord-link:hover svg { fill: #7984f5; transform: scale(1.08); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, var(--gold), var(--fire));
  color: #1a0d05; font-weight: 700; border: 0; cursor: pointer;
  padding: 11px 18px; font-size: 14px; box-shadow: 0 2px 0 #8a3a12;
}
.btn:hover { color: #000; filter: brightness(1.06); }
.btn.ghost { background: transparent; color: var(--gold); border: 1px solid var(--gold-2); box-shadow: none; }
.btn.ghost:hover { background: rgba(241,199,94,0.10); }

/* ---------- Page title ---------- */
.page-title { font-size: 27px; font-weight: 800; margin: 26px 0 6px; letter-spacing: .3px; }
.page-title .accent { color: var(--gold); }
.page-sub { color: var(--text-dim); margin: 0 0 18px; max-width: 900px; }
.seo-intro { color: var(--text-dim); font-size: 14px; line-height: 1.65; margin: 0 0 22px; max-width: 980px; }
.seo-intro b { color: var(--text); }

/* ---------- Search + filters ---------- */
.toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 22px; }
.search { flex: 0 1 230px; position: relative; }
.search input {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
  padding: 12px 14px 12px 40px; font-size: 15px; outline: none;
}
.search input:focus { border-color: var(--gold); }
.search::before { content: "\1F50D"; position: absolute; left: 13px; top: 50%; transform: translateY(-50%); opacity: .6; font-size: 14px; }
.lane-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.lane-btn {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text-dim);
  padding: 9px 13px; cursor: pointer; font-weight: 600; font-size: 13px;
  display: inline-flex; align-items: center; gap: 7px;
}
.lane-btn:hover { color: var(--text); border-color: var(--gold-2); }
.lane-btn.active { color: #11192c; background: var(--gold); border-color: var(--gold); }
.lane-dot { width: 9px; height: 9px; display: inline-block; }
/* Sort buttons sit between search and lane filters; subtle divider on wide screens */
.sort-filter .sort-btn { min-width: 56px; justify-content: center; }
@media (min-width: 721px) { .sort-filter { padding-right: 12px; margin-right: 4px; border-right: 1px solid var(--line); } }
@media (max-width: 720px) { .search { flex: 1 1 100%; } }

/* ---------- Avatars (shared) ---------- */
/* Fade icons in once loaded so they don't pop over the placeholder initials.
   If an image never loads, it stays transparent and the placeholder shows through. */
.img-fade { opacity: 0; transition: opacity .3s ease; }
.img-fade.img-on { opacity: 1; }
.avatar { position: relative; overflow: hidden; display: grid; place-items: center; }
.avatar .ini { font-weight: 800; color: rgba(255,255,255,.92); }
.avatar .av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Hero grid ---------- */
.hero-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); margin-bottom: 50px; }
.hero-card {
  background: var(--bg-2); border: 1px solid var(--line);
  overflow: hidden; cursor: pointer; transition: transform .12s, border-color .12s, box-shadow .12s; text-align: center;
}
.hero-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 6px 20px rgba(0,0,0,.55); }
.hero-portrait { width: 90px; height: 90px; margin: 12px auto 4px; font-size: 30px; }
/* role indicators (one per lane) in the top-right corner, like the tier list */
.hero-portrait .role-badges { position: absolute; top: 0; right: 0; z-index: 2; display: flex; flex-direction: column; gap: 2px; }
.hero-portrait .rb {
  min-width: 16px; height: 16px; padding: 0 2px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; line-height: 1; color: #fff;
  border-left: 1px solid rgba(0,0,0,.5); border-bottom: 1px solid rgba(0,0,0,.5);
  text-shadow: 0 1px 1px rgba(0,0,0,.55);
}
.hero-card .hero-name { padding: 8px 6px 2px; font-weight: 700; font-size: 13px; border-top: 1px solid var(--line); color: var(--text); }
.hero-card .hero-role { display: block; color: var(--text-dim); font-size: 11px; font-weight: 600; margin-top: 1px; }
.hero-card .hero-stats { display: flex; justify-content: center; gap: 14px; padding: 8px 6px 9px; margin: 6px 8px 0; border-top: 1px solid var(--line); }
.hero-card .hs { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.hero-card .hs b { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }
.hero-card .hs small { font-size: 8px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .3px; }
.hero-card .hs b.wr-good { color: var(--green); }
.hero-card .hs b.wr-bad { color: var(--crimson); }
.empty { grid-column: 1/-1; text-align: center; color: var(--text-dim); padding: 50px 0; }

/* ---------- Generic panels ---------- */
.panel { background: var(--bg-2); border: 1px solid var(--line); padding: 18px; margin-bottom: 18px; }
.panel h2 {
  font-size: 15px; text-transform: uppercase; letter-spacing: 1px; color: var(--gold);
  margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.panel h2 .hint { float: right; color: var(--text-faint); font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; }

/* ---------- Item / spell tiles ---------- */
.tile-row { display: flex; gap: 10px; flex-wrap: wrap; }
.tile { width: 60px; text-align: center; }
.tile .icon {
  width: 56px; height: 56px; display: grid; place-items: center;
  font-size: 10px; font-weight: 700; color: #fff; border: 1px solid var(--line);
  padding: 4px; line-height: 1.1; background: var(--bg-3);
  position: relative; overflow: hidden;
}

/* Real item / arcana icon image overlay (with text abbreviation fallback beneath) */
.ti-abbr { position: relative; z-index: 0; }
.ti-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.tile .icon, .sit-item .icon, .item-card .ic, .build-chip .ic, .kv .arc-ic, .cs-tile, .tier-hero .mini-portrait { position: relative; overflow: hidden; }
.tile .icon.gold-b { box-shadow: 0 0 0 1px var(--gold) inset; }
.tile .lbl { font-size: 10px; color: var(--text-dim); margin-top: 4px; line-height: 1.2; }
.arrow { align-self: center; color: var(--text-faint); font-size: 18px; }

/* ---------- Skill order grid ---------- */
.skill-order { overflow-x: auto; }
.skill-order table { border-collapse: collapse; width: 100%; min-width: 560px; }
.skill-order th, .skill-order td { border: 1px solid var(--line); text-align: center; padding: 7px 4px; font-size: 12px; min-width: 30px; }
.skill-order th { color: var(--text-dim); background: var(--bg-3); }
.skill-order td.key { color: var(--gold); font-weight: 800; width: 56px; }
.skill-order td.on { background: var(--gold); color: #11192c; font-weight: 800; }

/* ---------- Ability list ---------- */
.ability { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ability:last-child { border-bottom: 0; }
.ability .badge {
  flex: 0 0 46px; height: 46px; display: grid; place-items: center;
  font-weight: 800; color: #11192c; background: linear-gradient(180deg, var(--gold), var(--gold-2));
}
.ability .badge.passive { background: linear-gradient(180deg, var(--blue), #1f6fa0); color: #03161f; }
.ability h4 { margin: 0 0 3px; font-size: 14px; }
.ability h4 span { color: var(--text-faint); font-weight: 600; font-size: 12px; margin-left: 6px; }
.ability p { margin: 0; color: var(--text-dim); font-size: 13px; }

/* ---------- Two column layout ---------- */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
@media (max-width: 880px) { .cols { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Strengths / weaknesses ---------- */
.procon { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px){ .procon { grid-template-columns: 1fr; } }
.procon ul { margin: 0; padding-left: 18px; }
.procon li { margin: 5px 0; color: var(--text-dim); font-size: 13px; }
.procon .pros h3 { color: var(--green); font-size: 13px; margin: 0 0 8px; }
.procon .cons h3 { color: var(--crimson); font-size: 13px; margin: 0 0 8px; }

/* Author mode bar (editor) */
.author-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.author-bar:empty { display: none; }
.author-tag { color: var(--green); font-size: 13px; }
.author-login-link { font-size: 12px; color: var(--text-faint); }
.author-login-link:hover { color: var(--gold); }

/* ---------- Counters ---------- */
.counter-row { display: flex; gap: 8px; flex-wrap: wrap; }
.counter-chip {
  display: flex; align-items: center; gap: 8px; background: var(--bg-3); border: 1px solid var(--line);
  padding: 4px 12px 4px 4px; font-size: 12px; font-weight: 600;
}
.counter-chip:hover { border-color: var(--gold-2); }
.counter-chip .mini { width: 28px; height: 28px; font-size: 11px; }

/* ---------- Hero header (guide page) ---------- */
.hero-header {
  display: flex; flex-direction: column; gap: 14px; margin: 16px 0 20px;
  background: linear-gradient(120deg, var(--bg-2), var(--bg)); border: 1px solid var(--line); padding: 20px;
}
.hh-top { display: flex; gap: 20px; align-items: flex-start; }
.hh-top .badges { margin-left: auto; align-self: flex-start; }
.hero-header .big-portrait { flex: 0 0 96px; width: 96px; height: 96px; font-size: 40px; border: 1px solid var(--line); }
.hero-header .meta { flex: 1 1 auto; min-width: 0; }
.hero-header .meta h1 { margin: 0 0 2px; font-size: 30px; }
.hero-header .meta .title { color: var(--text-dim); margin: 0 0 8px; }
.hero-header .badges { display: flex; gap: 8px; flex-wrap: wrap; }
.tag { font-size: 12px; font-weight: 700; padding: 4px 10px; background: var(--bg-3); border: 1px solid var(--line); color: var(--text-dim); }
.tag.lane { color: #11192c; }
.tier-tag { font-weight: 800; }
.tier-tag:hover { filter: brightness(1.08); color: #11192c; }
.hh-seo { color: var(--text-dim); font-size: 13.5px; line-height: 1.6; margin: 0; max-width: 920px; }
.hh-seo a { color: var(--gold); }
.byline { color: var(--text-faint); font-size: 12px; }
.byline b { color: var(--gold); }
.byline .share-actions, .hero-header .share-actions { margin-top: 0; display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 700px){ .hh-top { flex-wrap: wrap; } .hh-top .badges { margin-left: 0; } }

.diff { display: inline-flex; gap: 3px; vertical-align: middle; }
.diff i { width: 8px; height: 8px; background: var(--line); display: inline-block; }
.diff i.on { background: var(--gold); }

/* ---------- Tier list ---------- */
.tier-row {
  display: grid; grid-template-columns: 70px 1fr; border: 1px solid var(--line);
  overflow: hidden; margin-bottom: 12px; background: var(--bg-2);
}
.tier-label { display: grid; place-items: center; font-size: 30px; font-weight: 900; color: #11192c; }
.tier-label.S { background: var(--t-s); }
.tier-label.A { background: var(--t-a); }
.tier-label.B { background: var(--t-b); }
.tier-label.C { background: var(--t-c); }
.tier-label.D { background: var(--t-d); }
.tier-body { padding: 12px 14px; }
.tier-desc { color: var(--text-dim); font-size: 12.5px; margin: 0 0 10px; line-height: 1.5; }
.tier-heroes { display: flex; gap: 10px; flex-wrap: wrap; }
.tier-hero { width: 64px; text-align: center; cursor: pointer; }
.tier-hero .mini-portrait { width: 56px; height: 56px; font-weight: 800; border: 1px solid var(--line); margin: 0 auto; font-size: 18px; }
.tier-hero:hover .mini-portrait { box-shadow: 0 0 0 2px var(--gold); }
.tier-hero .nm { font-size: 10px; color: var(--text-dim); margin-top: 4px; }
.role-badge {
  position: absolute; top: 0; right: 0; z-index: 2;
  min-width: 16px; height: 16px; padding: 0 2px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; line-height: 1; color: #fff;
  border-left: 1px solid rgba(0,0,0,.5); border-bottom: 1px solid rgba(0,0,0,.5);
  text-shadow: 0 1px 1px rgba(0,0,0,.55);
}

/* ---------- Editor ---------- */
.editor-grid { display: grid; grid-template-columns: 360px 1fr; gap: 18px; align-items: start; }
@media (max-width: 980px){ .editor-grid { grid-template-columns: 1fr; } }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; font-weight: 700; color: var(--text-dim); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .5px; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--line); color: var(--text);
  padding: 10px 12px; font-size: 14px; outline: none; font-family: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); }
.field textarea { resize: vertical; min-height: 300px; line-height: 1.6; }
.field textarea.tall { min-height: 200px; }
.rt-toolbar { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.rt-toolbar button { background: var(--bg-3); border: 1px solid var(--line); color: var(--text-dim); width: 34px; height: 32px; cursor: pointer; font-weight: 700; }
.rt-toolbar button:hover { color: var(--text); border-color: var(--gold-2); }

/* item picker */
.picker-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.picker-tabs button {
  background: var(--bg-3); border: 1px solid var(--line); color: var(--text-dim);
  padding: 6px 11px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.picker-tabs button.active { color: #11192c; background: var(--gold); border-color: var(--gold); }
.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 260px; overflow-y: auto; padding-right: 4px; }
.item-card {
  display: flex; align-items: center; gap: 9px; background: var(--bg); border: 1px solid var(--line);
  padding: 7px 9px; cursor: pointer; transition: border-color .1s, background .1s;
}
.item-card:hover { border-color: var(--gold); background: var(--bg-3); }
.item-card.selected { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.item-card .ic { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 11px; border: 1px solid rgba(255,255,255,.15); }
.item-card .nm { font-size: 12px; color: var(--text); line-height: 1.2; }
.item-card .nm small { color: var(--text-faint); display: block; font-size: 10px; font-weight: 600; }
.selected-build { display: flex; gap: 8px; flex-wrap: wrap; min-height: 60px; padding: 10px; border: 1px dashed var(--gold-2); background: var(--bg); margin-bottom: 12px; }
.selected-build:empty::after { content: "Click items below to add them to the build..."; color: var(--text-faint); font-size: 12px; }
.build-chip { position: relative; }
.build-chip .ic { width: 48px; height: 48px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 10px; text-align: center; padding: 3px; border: 1px solid rgba(255,255,255,.15); line-height: 1.05; }
.build-chip .rm { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; background: var(--crimson); color: #fff; border: 0; cursor: pointer; font-size: 12px; line-height: 1; display: grid; place-items: center; }

.share-box { margin-top: 14px; padding: 12px; border: 1px solid var(--green); background: rgba(70,192,138,.08); display: none; }
.share-box.show { display: block; }
.share-box code { color: var(--green); word-break: break-all; }

/* ---------- Footer ---------- */
.site-footer { border-top: 2px solid var(--gold-2); margin-top: 40px; background: #080d18; color: var(--text-faint); font-size: 13px; }
.site-footer .wrap { padding: 22px 18px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.site-footer a { color: var(--text-dim); }
.site-footer .moba { margin-left: auto; color: var(--text-dim); }
.disclaimer { color: var(--text-faint); font-size: 11px; max-width: var(--maxw); margin: 0 auto; padding: 0 18px 18px; }

/* M.O.B.A. Network band - matches the footer background */
.moba-network { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; max-width: var(--maxw); margin: 0 auto; padding: 22px 18px; border-top: 1px solid var(--line); }
.moba-net-brand { flex: 0 0 auto; }
.moba-net-brand img { height: 44px; width: auto; display: block; opacity: .9; }
.moba-net-brand:hover img { opacity: 1; }
.moba-net-links { flex: 1 1 320px; columns: 150px; column-gap: 24px; }
.moba-net-links a { display: block; color: var(--text-faint); font-size: 12px; line-height: 2; break-inside: avoid; }
.moba-net-links a:hover { color: var(--gold); }
@media (max-width: 640px) { .moba-net-links { columns: 110px; } }

/* notice banner */
.notice { background: rgba(58,166,224,.08); border: 1px solid var(--blue); color: var(--text); padding: 10px 14px; font-size: 13px; margin: 16px 0; }
.notice b { color: var(--blue); }
.notice.gold { background: rgba(241,199,94,.08); border-color: var(--gold-2); }
.notice.gold b { color: var(--gold); }

/* ---------- Build sub-sections (guide page) ---------- */
.build-sec { margin-bottom: 18px; }
.build-sec:last-child { margin-bottom: 0; }
.build-sec h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-dim); margin: 0 0 8px; }
.build-sec h3 .sub { text-transform: none; letter-spacing: 0; color: var(--text-faint); font-weight: 600; margin-left: 6px; }
.tile .lbl .when { color: var(--text-faint); font-size: 9px; }

/* Starting / Core / Common Skill / Boots side by side */
.build-cols { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.build-cols .build-sec { margin-bottom: 0; }
.cs-col { max-width: 210px; margin-left: auto; text-align: right; }
.cs-col .cs-head { display: flex; align-items: center; gap: 8px; justify-content: flex-end; margin-bottom: 4px; }
.cs-col .cs-name { font-weight: 800; color: var(--gold); font-size: 14px; }
.cs-col .cs-desc { color: var(--text-dim); font-size: 11.5px; line-height: 1.45; }
.cs-img { width: 34px; height: 34px; object-fit: contain; display: block; }

/* ---------- Situational swap cards (WildRiftFire style) ---------- */
.sit-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.sit-card { background: var(--bg-3); border: 1px solid var(--line); padding: 12px; }
.sit-vs { background: var(--gold); color: #11192c; font-weight: 800; font-size: 12px; text-align: center; padding: 5px 8px; margin-bottom: 12px; }
.sit-swap { display: flex; align-items: flex-start; justify-content: center; gap: 6px; }
.sit-item { width: 64px; text-align: center; }
.sit-item .icon { width: 46px; height: 46px; margin: 0 auto; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 10px; border: 1px solid rgba(255,255,255,.15); }
.sit-name { font-size: 10px; color: var(--text-dim); margin-top: 5px; line-height: 1.2; }
.sit-arrow { align-self: center; color: var(--gold); font-size: 22px; font-weight: 800; }

/* ---------- Arcana key/value (with icon) ---------- */
.kv { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.kv:last-child { border-bottom: 0; }
.kv .arc-ic { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12px; border: 1px solid rgba(255,255,255,.15); }
.kv-name { font-weight: 700; color: var(--text); font-size: 13px; }
.kv-desc { color: var(--text-dim); font-size: 12.5px; }

/* ---------- Editor: structured build sections ---------- */
.build-section { border: 1px solid var(--line); background: var(--bg); padding: 10px; margin-bottom: 8px; cursor: pointer; }
.build-section.active { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.build-section .bs-head { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); margin-bottom: 8px; }
.build-section.active .bs-head { color: var(--gold); }
.bs-chips { display: flex; gap: 6px; flex-wrap: wrap; min-height: 40px; }
.bs-chips:empty::after { content: "Click items below to add"; color: var(--text-faint); font-size: 11px; }
.build-chip.draggable { cursor: grab; }
.build-chip.draggable:active { cursor: grabbing; }
.build-chip.dragging { opacity: .45; }

/* ---------- Editor: situational builder ---------- */
.sit-edit { border: 1px solid var(--line); background: var(--bg); padding: 9px; margin-bottom: 8px; }
.se-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.se-row label { width: 56px; font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; }
.se-row select, .se-row input { flex: 1; background: var(--bg-2); border: 1px solid var(--line); color: var(--text); padding: 7px 8px; font-size: 12px; outline: none; }
.se-row select:focus, .se-row input:focus { border-color: var(--gold-2); }
.se-rm { background: none; border: 1px solid var(--line); color: var(--crimson); padding: 5px 10px; font-size: 11px; font-weight: 600; cursor: pointer; }
.se-rm:hover { border-color: var(--crimson); }

/* ---------- Editor formatting help ---------- */
.format-help { background: var(--bg-3); border: 1px solid var(--line); padding: 9px 12px; margin-bottom: 10px; font-size: 12px; color: var(--text-dim); line-height: 1.7; }
.format-help b { color: var(--gold); }
.format-help code { background: var(--bg); border: 1px solid var(--line); padding: 1px 6px; color: var(--text); font-size: 11px; }

/* ---------- Common skill ---------- */
.cs-tile {
  width: 64px; min-width: 64px; min-height: 50px; display: grid; place-items: center; text-align: center;
  padding: 6px; background: linear-gradient(180deg, var(--gold), var(--gold-2)); color: #11192c;
  font-weight: 800; font-size: 12px; border: 1px solid var(--line); line-height: 1.15;
}
.cs-options { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-opt { display: inline-flex; align-items: center; gap: 7px; background: var(--bg); border: 1px solid var(--line); color: var(--text-dim); padding: 6px 11px 6px 7px; font-weight: 600; font-size: 13px; cursor: pointer; }
.cs-opt:hover { border-color: var(--gold-2); color: var(--text); }
.cs-opt.active { background: var(--gold); border-color: var(--gold); color: #11192c; }
.cs-opt .cs-img, .cs-opt-ic .cs-img { width: 22px; height: 22px; }
.cs-opt-ic { display: inline-flex; }

/* arcana picker (editor) */
.arc-group-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin: 10px 0 6px; }
.arc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.arc-opt { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--line); color: var(--text-dim); padding: 5px 8px; font-size: 12px; font-weight: 600; cursor: pointer; text-align: left; }
.arc-opt:hover { border-color: var(--gold-2); color: var(--text); }
.arc-opt.active { color: var(--text); box-shadow: inset 0 0 0 1px var(--gold); border-color: var(--gold); }
.arc-opt .arc-ic { flex: 0 0 26px; width: 26px; height: 26px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 9px; border: 1px solid rgba(255,255,255,.15); position: relative; overflow: hidden; }
.arc-opt .arc-nm { line-height: 1.1; }

/* editable skill-order cells + counter picker (editor) */
.skill-order td.so-cell { cursor: pointer; }
.skill-order td.so-cell:hover { background: var(--bg-3); }
.counter-pick { display: flex; flex-wrap: wrap; gap: 6px; }

/* searchable hero picker (counters & synergies) */
.hs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.hs-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-3); border: 1px solid var(--line); padding: 3px 6px 3px 3px; font-size: 12px; color: var(--text); }
.hs-mini { width: 20px; height: 20px; flex: 0 0 20px; overflow: hidden; }
.hs-mini .ini { font-size: 9px; }
.hs-rm { background: none; border: 0; color: var(--crimson); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }
.hs-input-wrap { position: relative; }
.hs-input { width: 100%; background: var(--bg); border: 1px solid var(--line); color: var(--text); padding: 8px 10px; font-size: 13px; outline: none; }
.hs-input:focus { border-color: var(--gold-2); }
.hs-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 30; background: var(--bg-2); border: 1px solid var(--gold-2); max-height: 240px; overflow-y: auto; }
.hs-dropdown.show { display: block; }
.hs-opt { display: flex; align-items: center; gap: 8px; padding: 6px 9px; cursor: pointer; font-size: 13px; color: var(--text); }
.hs-opt:hover { background: var(--bg-3); }
.hs-opt small { color: var(--text-faint); margin-left: auto; font-size: 11px; }
.hs-opt .hs-mini { width: 24px; height: 24px; flex: 0 0 24px; }
.hs-empty { padding: 8px 9px; color: var(--text-faint); font-size: 12px; }

/* tier list editor */
.te-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.te-name { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text); }
.te-ic { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; position: relative; overflow: hidden; border: 1px solid var(--line); font-weight: 800; color: #fff; font-size: 11px; }
.te-tiers { display: flex; gap: 4px; flex-shrink: 0; }
.te-tier { width: 30px; height: 28px; border: 1px solid var(--line); background: var(--bg); color: var(--text-dim); cursor: pointer; font-weight: 800; }
.te-tier:hover { border-color: var(--text-dim); color: var(--text); }
.te-tier.active.t-S { background: var(--t-s); color: #11192c; border-color: var(--t-s); }
.te-tier.active.t-A { background: var(--t-a); color: #11192c; border-color: var(--t-a); }
.te-tier.active.t-B { background: var(--t-b); color: #11192c; border-color: var(--t-b); }
.te-tier.active.t-C { background: var(--t-c); color: #11192c; border-color: var(--t-c); }
.te-tier.active.t-D { background: var(--t-d); color: #11192c; border-color: var(--t-d); }
.te-hero { align-items: flex-start; }
.te-lanes { display: flex; flex-direction: column; gap: 6px; }
.te-lane { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.te-lane-name { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; min-width: 76px; text-align: right; }
.tl-byline { color: var(--text-faint); font-size: 13px; }
.tl-byline a { color: var(--gold); }

/* role switcher tabs (guide page) */
.role-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; }
.role-tab { padding: 8px 14px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text-dim); font-weight: 700; font-size: 13px; }
.role-tab:hover { color: var(--text); border-color: var(--gold-2); }
.role-tab.active { background: var(--gold); border-color: var(--gold); color: #11192c; }
.role-tab small { font-weight: 600; opacity: .75; }

/* ---------- Ability icons (in skill order) ---------- */
.ab-ic {
  position: relative; width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center;
  background: linear-gradient(180deg, var(--gold), var(--gold-2)); color: #11192c; font-weight: 800;
  font-size: 12px; border: 1px solid var(--line); overflow: hidden;
}
.ab-ic.passive { background: linear-gradient(180deg, var(--blue), #1f6fa0); color: #03161f; }
.ab-ic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.so-passive { display: flex; gap: 11px; align-items: center; padding: 10px; background: var(--bg-3); border: 1px solid var(--line); margin-bottom: 12px; }
.so-passive .so-key { color: var(--text-faint); font-size: 11px; font-weight: 600; }
.so-passive .so-desc { color: var(--text-dim); font-size: 12px; margin-top: 2px; }
.so-skill { display: flex; align-items: center; gap: 9px; }
.so-name { display: flex; flex-direction: column; line-height: 1.15; text-align: left; font-weight: 700; color: var(--text); }
.so-name small { color: var(--text-faint); font-weight: 600; font-size: 10px; }

/* skill-order: widen + left-align the first (ability) column */
.skill-order table { min-width: 700px; }
.skill-order td.key { width: 210px; min-width: 210px; text-align: left; padding: 6px 8px; cursor: help; }
.skill-order th.so-head { text-align: left; padding-left: 8px; }

/* ---------- Editor: full-width writing areas ---------- */
.mini-label { display: block; font-size: 12px; font-weight: 700; color: var(--text-dim); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .5px; }
.wide-area { width: 100%; min-height: 160px; }
.wide-area.short { min-height: 110px; }

/* Editor full-width layout (live preview removed) */
.field-row { display: flex; gap: 14px; flex-wrap: wrap; }
.field-row .field { flex: 1 1 180px; margin-bottom: 0; }
.build-sec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; margin-bottom: 12px; }
.build-sec-grid .build-section { margin-bottom: 0; }
.ed-two { display: grid; grid-template-columns: 1fr 380px; gap: 18px; align-items: start; }
@media (max-width: 900px) { .ed-two { grid-template-columns: 1fr; } }
.picker-grid { max-height: 300px; }
.sw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px){ .sw-grid { grid-template-columns: 1fr; } }
.pv-h { color: var(--gold); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }

/* ============================================================
   MOBILE  (Honor of Kings is a mobile game - phone-first polish)
   ============================================================ */

/* Tablet and below */
@media (max-width: 760px) {
  body { font-size: 14px; }
  .wrap { padding: 0 14px; }

  /* Header: logo + Discord on top row, nav becomes a scrollable strip below */
  .site-header .wrap { height: auto; min-height: 56px; flex-wrap: wrap; gap: 8px 12px; padding-top: 9px; padding-bottom: 9px; }
  .brand { order: 1; }
  .discord-link { order: 2; margin-left: auto; width: 34px; height: 34px; }
  .nav { order: 3; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; gap: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; padding: 7px 11px; font-size: 13px; }

  .page-title { font-size: 22px; margin: 18px 0 4px; }
  .seo-intro { font-size: 13px; }

  /* Build sections: don't right-float the common skill once stacked */
  .build-cols { gap: 18px; }
  .cs-col { max-width: none; margin-left: 0; text-align: left; flex-basis: 100%; }
  .cs-col .cs-head { justify-content: flex-start; }

  /* Skill-order grid scrolls inside its panel rather than widening the page */
  .skill-order table { min-width: 500px; }
  .skill-order td.key { width: 116px; min-width: 116px; }
  .skill-order .so-name { font-size: 11px; }

  /* Hero header */
  .hero-header { padding: 16px; gap: 14px; }
  .hero-header .big-portrait { flex-basis: 84px; width: 84px; height: 84px; font-size: 34px; }
  .hero-header .meta h1 { font-size: 24px; }
  .byline .share-actions { justify-content: flex-start; }

  /* Guide two-column stacks (already at 880) - tighten spacing */
  .panel { padding: 15px; }
}

/* Phones */
@media (max-width: 480px) {
  .hero-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
  .hero-portrait { width: 76px; height: 76px; font-size: 26px; }
  .toolbar { gap: 10px; }
  .lane-btn { padding: 8px 11px; font-size: 12px; }
  .tier-row { grid-template-columns: 52px 1fr; }
  .tier-label { font-size: 24px; }
  .tier-hero { width: 56px; }
  .tier-hero .mini-portrait { width: 50px; height: 50px; }
  .sit-cards { grid-template-columns: 1fr 1fr; }
  .procon { grid-template-columns: 1fr; }
  .byline { font-size: 11px; }
  .page-sub { font-size: 13px; }
}

/* Make any wide table (skill order) comfortably swipe-scroll on touch */
.skill-order { -webkit-overflow-scrolling: touch; }

/* ---------- Stats page ---------- */
.stats-search {
  background: var(--bg); border: 1px solid var(--line); color: var(--text);
  padding: 8px 12px; font-size: 14px; min-width: 200px; margin-left: auto;
}
.stats-search:focus { border-color: var(--gold); outline: none; }
.stats-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--panel); }
.stats-table { border-collapse: collapse; width: 100%; min-width: 880px; font-size: 14px; }
/* Vertical dividers between columns for readability */
.stats-table th, .stats-table td { border-left: 1px solid var(--line); }
.stats-table th:first-child, .stats-table td:first-child { border-left: 0; }
.stats-table thead th {
  position: sticky; top: 0; background: var(--panel-2, #141d33); z-index: 1;
  text-align: left; padding: 11px 12px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text-dim); border-bottom: 2px solid var(--gold-2);
  cursor: pointer; user-select: none; white-space: nowrap;
}
.stats-table thead th.col-num, .stats-table thead th.col-rank,
.stats-table thead th.col-role, .stats-table thead th.col-tier { text-align: center; padding-right: 12px; }
.stats-table thead th:hover { color: var(--text); }
.stats-table thead th.sort-asc::after { content: " \25B2"; color: var(--gold); }
.stats-table thead th.sort-desc::after { content: " \25BC"; color: var(--gold); }
.stats-table tbody td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.stats-table tbody tr:hover { background: rgba(241,199,94,0.06); }
.stats-table .col-rank { width: 40px; color: var(--text-faint); font-variant-numeric: tabular-nums; text-align: center; }
.stats-table .col-role, .stats-table .col-tier { text-align: center; }
.stats-table .col-num { text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
.stat-hero { display: flex; align-items: center; gap: 10px; }
.sh-name { font-weight: 600; }
.stat-portrait {
  position: relative; width: 34px; height: 34px; flex: 0 0 34px; overflow: hidden;
  border: 1px solid var(--line); background: linear-gradient(150deg, #2a3a5c, #1b2740);
  display: flex; align-items: center; justify-content: center;
}
.stat-portrait .sp-fallback { font-size: 11px; font-weight: 800; color: var(--text-dim); }
.stat-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.role-pill {
  display: inline-block; padding: 2px 8px; font-size: 10px; font-weight: 800;
  letter-spacing: .5px; color: #11192c;
}
.tier-pill {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; font-size: 12px; font-weight: 800; color: #11192c;
}
.tier-pill.S { background: var(--t-s); }
.tier-pill.A { background: var(--t-a); }
.tier-pill.B { background: var(--t-b); }
.tier-pill.C { background: var(--t-c); }
.tier-pill.D { background: var(--t-d); }
.wr-good { color: var(--green); }
.wr-bad { color: var(--crimson); }
.wr-mid { color: var(--text); }
.stats-table .delta { display: block; margin: 2px 0 0; text-align: center; font-size: 10px; font-weight: 700; cursor: help; white-space: nowrap; }
.stats-table .delta.up { color: var(--green); }
.stats-table .delta.down { color: var(--crimson); }
.stats-table .delta.flat { color: var(--text-faint); }
.stats-admin { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--line); background: var(--panel); }
.stats-update-msg { margin-left: 10px; font-size: 13px; color: var(--text-dim); }
.stats-update-msg.ok { color: var(--green); }
.stats-update-msg.err { color: var(--crimson); }
.stats-update-msg.warn { color: var(--gold); }
.stats-paste { margin-top: 10px; }
.stats-paste-help { font-size: 12px; color: var(--text-dim); margin: 0 0 6px; }
.stats-paste-help code { background: var(--bg); padding: 1px 5px; border: 1px solid var(--line); }
.stats-paste textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--line); color: var(--text);
  padding: 8px 10px; font-family: monospace; font-size: 12px; resize: vertical;
}
.stats-paste textarea:focus { border-color: var(--gold); outline: none; }
.stats-paste-actions { display: flex; gap: 8px; margin-top: 8px; }

@media (max-width: 640px) {
  .stats-search { margin-left: 0; width: 100%; }
  .stats-table .col-tier, .stats-table .col-role, .stats-table .col-phase { display: none; }
  /* Fit the table to the screen and tighten the hero column so the stats are
     visible without scrolling far to the right. */
  .stats-table { min-width: 0; font-size: 13px; }
  .stats-table th, .stats-table td { padding-left: 6px; padding-right: 6px; }
  .stats-table thead th.col-num { padding-right: 6px; }
  .stats-table .col-rank { width: 18px; }
  .stat-hero { gap: 6px; }
  .stat-portrait { width: 24px; height: 24px; flex: 0 0 24px; }
  .sh-name { font-size: 12px; line-height: 1.2; }
  .stats-table .delta { font-size: 9px; }
}

/* ---------- Hero change history (guide page) ---------- */
.change-history .ch-entry { padding: 10px 0; border-top: 1px solid var(--line); }
.change-history .ch-entry:first-of-type { border-top: none; }
.change-history .ch-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.change-history .ch-date { font-weight: 800; color: var(--text); font-size: 13px; }
.change-history .ch-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; padding: 2px 7px; color: #11192c; }
.change-history .ch-tag.buffed { background: var(--green); }
.change-history .ch-tag.nerfed { background: var(--crimson); }
.change-history .ch-tag.adjusted { background: var(--gold); }
.change-history .ch-src { font-size: 11px; color: var(--text-faint); margin-left: auto; }
.change-history .ch-src:hover { color: var(--gold); }
.change-history .ch-lines { margin: 0; padding-left: 18px; }
.change-history .ch-lines li { font-size: 13px; color: var(--text-dim); line-height: 1.6; }
.change-history .ch-none { font-size: 13px; color: var(--text-faint); margin: 0; }

/* ---------- Patch Notes ---------- */
.pn-list { display: flex; flex-direction: column; gap: 14px; }
.pn-card { border: 1px solid var(--line); background: var(--panel); }
.pn-head { display: flex; gap: 14px; padding: 14px; }
.pn-thumb { flex: 0 0 140px; height: 79px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); }
.pn-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pn-meta { flex: 1 1 auto; min-width: 0; }
.pn-title { font-size: 17px; margin: 0 0 3px; color: var(--text); }
.pn-date { font-size: 12px; color: var(--gold); font-weight: 700; margin-bottom: 6px; }
.pn-preview { font-size: 13px; color: var(--text-dim); margin: 0; line-height: 1.5; }
.pn-actions { display: flex; align-items: center; gap: 14px; padding: 0 14px 14px; }
.pn-source { font-size: 12px; color: var(--text-faint); }
.pn-source:hover { color: var(--gold); }
.pn-body { border-top: 1px solid var(--line); padding: 14px; }
.pn-loading { font-size: 13px; color: var(--text-dim); }
.pn-content { font-size: 14px; line-height: 1.65; color: var(--text); overflow-wrap: break-word; }
.pn-content img { max-width: 100%; height: auto; margin: 10px 0; }
.pn-content h1, .pn-content h2, .pn-content h3 { color: var(--gold); margin: 16px 0 8px; }
.pn-content p { margin: 8px 0; }
.pn-content table { border-collapse: collapse; width: 100%; margin: 10px 0; }
.pn-content td, .pn-content th { border: 1px solid var(--line); padding: 6px 8px; }
.pn-content a { color: var(--gold); }
.pn-credit { font-size: 12px; color: var(--text-faint); margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.pn-credit a { color: var(--gold); }

/* hero buff/nerf summary on each card */
.pn-changes { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 12px; }
.pn-chg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pn-chg-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; padding: 2px 7px; color: #11192c; }
.pn-chg.buff .pn-chg-label { background: var(--green); }
.pn-chg.nerf .pn-chg-label { background: var(--crimson); }
.pn-chg.adj  .pn-chg-label { background: var(--gold); }
.pn-chg.new  .pn-chg-label { background: var(--fire); color: #1a0d05; }
.pn-chg-heroes { display: flex; flex-wrap: wrap; gap: 6px; }
.pn-hero { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text); background: var(--bg); border: 1px solid var(--line); padding: 2px 8px 2px 2px; }
.pn-chg.buff .pn-hero { border-color: color-mix(in srgb, var(--green) 55%, var(--line)); }
.pn-chg.nerf .pn-hero { border-color: color-mix(in srgb, var(--crimson) 55%, var(--line)); }
.pn-chg.adj  .pn-hero { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }
.pn-hero-ic { position: relative; width: 22px; height: 22px; flex: 0 0 22px; overflow: hidden; background: linear-gradient(150deg, #2a3a5c, #1b2740); display: flex; align-items: center; justify-content: center; }
.pn-hero-ic .sp-fallback { font-size: 8px; font-weight: 800; color: var(--text-dim); }
.pn-hero-ic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) {
  .pn-thumb { display: none; }
}

/* ---- Stats history graph ---- */
.hist-card { background: var(--bg-2); border: 1px solid var(--line); padding: 14px 16px; margin: 0 0 16px; }
.hist-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.hist-titles { display: flex; flex-direction: column; }
.hist-title { font-weight: 800; color: var(--gold); font-size: 15px; }
.hist-sub { color: var(--text-dim); font-size: 12px; }
.hist-metric { display: flex; flex-wrap: wrap; gap: 4px; }
.hist-mbtn { background: var(--bg); border: 1px solid var(--line); color: var(--text-dim); padding: 5px 10px; font-size: 12px; font-weight: 700; cursor: pointer; }
.hist-mbtn:hover { color: var(--text); border-color: var(--gold-2); }
.hist-mbtn.active { background: linear-gradient(180deg, var(--gold), var(--fire)); color: #1a0d05; border-color: var(--gold); }
.hist-plot { position: relative; height: 280px; }
.hist-controls { margin-top: 14px; }
.hist-pick { position: relative; max-width: 280px; }
.hist-suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; background: var(--bg-3); border: 1px solid var(--line); border-top: 0; max-height: 240px; overflow-y: auto; }
.hist-sg { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--text); padding: 8px 11px; font-size: 13px; cursor: pointer; }
.hist-sg:hover { background: rgba(241,199,94,0.12); color: var(--gold); }
.hist-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.hist-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--line); padding: 4px 6px 4px 9px; font-size: 12px; font-weight: 600; color: var(--text); }
.hist-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.hist-x { background: none; border: 0; color: var(--text-faint); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.hist-x:hover { color: var(--crimson); }
.hist-note { color: var(--text-faint); font-size: 12px; margin: 10px 0 0; }

/* ---- Minigames hub ---- */
.mg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-top: 10px; }
.mg-card { display: block; position: relative; background: var(--bg-2); border: 1px solid var(--line); padding: 18px; color: var(--text); }
a.mg-card:hover { border-color: var(--gold); background: var(--bg-3); }
.mg-card h2 { color: var(--gold); margin: 0 0 8px; font-size: 18px; }
.mg-card p { color: var(--text-dim); font-size: 13px; line-height: 1.5; margin: 0 0 14px; }
.mg-badge { position: absolute; top: 12px; right: 12px; background: linear-gradient(180deg, var(--gold), var(--fire)); color: #1a0d05; font-size: 11px; font-weight: 800; padding: 3px 8px; letter-spacing: .3px; }
.mg-soon { opacity: .55; }

/* ---- Hero Wordle ---- */
.wd-wrap { max-width: 780px; margin: 0 auto; }
.wd-intro { background: var(--bg-2); border: 1px solid var(--line); padding: 14px 16px; text-align: center; margin-bottom: 16px; }
.wd-intro h2 { color: var(--gold); margin: 0 0 4px; font-size: 18px; }
.wd-intro p { color: var(--text-dim); font-size: 13px; margin: 0; }
.wd-input-row { position: relative; display: flex; gap: 8px; max-width: 480px; margin: 0 auto 18px; }
.wd-input { flex: 1; background: var(--bg); border: 1px solid var(--line); color: var(--text); padding: 11px 14px; font-size: 15px; outline: none; }
.wd-input:focus { border-color: var(--gold); }
.wd-suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; background: var(--bg-3); border: 1px solid var(--line); border-top: 0; max-height: 300px; overflow-y: auto; }
.wd-sg { display: flex; align-items: center; gap: 10px; padding: 7px 10px; cursor: pointer; font-weight: 600; }
.wd-sg:hover, .wd-sg.active { background: rgba(241,199,94,.12); color: var(--gold); }
.wd-mini { position: relative; width: 30px; height: 30px; flex: 0 0 30px; overflow: hidden; background: linear-gradient(150deg, #2a3a5c, #1b2740); }
.wd-board { overflow-x: auto; }
.wd-grid { min-width: 640px; }
.wd-head, .wd-row { display: grid; grid-template-columns: 84px repeat(6, 1fr); gap: 6px; margin-bottom: 6px; }
.wd-head div { text-align: center; font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim); font-weight: 700; padding-bottom: 2px; }
.wd-cell { min-height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 12px; font-weight: 700; padding: 4px; background: var(--bg-3); border: 1px solid var(--line); line-height: 1.15; }
.wd-cell.hit { background: #2f9e6b; color: #fff; border-color: #2f9e6b; }
.wd-cell.partial { background: #d9922b; color: #1a0d05; border-color: #d9922b; }
.wd-cell.miss { background: #bb3a31; color: #fff; border-color: #bb3a31; }
.wd-cell.hero { padding: 0; overflow: hidden; background: var(--bg-2); }
.wd-cell.hero .wd-portrait { width: 100%; height: 66px; position: relative; }
.wd-arrow { font-size: 17px; line-height: 1; margin-top: 2px; }
.wd-win { text-align: center; background: var(--bg-2); border: 1px solid var(--gold-2); padding: 16px; margin-bottom: 16px; }
.wd-win h2 { color: var(--gold); margin: 0 0 6px; }
.wd-win p { color: var(--text-dim); margin: 0 0 12px; font-size: 14px; }
.wd-reveal { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--text); }
.wd-reveal .wd-mini { width: 34px; height: 34px; flex-basis: 34px; }
.wd-count { text-align: center; color: var(--text-faint); font-size: 13px; margin: 0 0 14px; }
@media (max-width: 760px) {
  .wd-head, .wd-row { grid-template-columns: 64px repeat(6, 1fr); gap: 4px; }
  .wd-grid { min-width: 560px; }
  .wd-cell { min-height: 58px; font-size: 11px; }
  .wd-cell.hero .wd-portrait { height: 58px; }
}

/* ---- Ability Quiz ---- */
.ab-mystery { width: 140px; height: 140px; margin: 0 auto 18px; position: relative; border: 2px solid var(--gold-2); background: linear-gradient(150deg, #2a3a5c, #1b2740); overflow: hidden; }
.ab-mystery img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-section { background: var(--bg-2); border: 1px solid var(--line); padding: 14px 16px; margin-bottom: 16px; }
.ab-section h3 { color: var(--gold); margin: 0 0 10px; font-size: 15px; }
.ab-slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-width: 380px; }
.ab-slot { background: var(--bg); border: 1px solid var(--line); color: var(--text); padding: 11px; font-weight: 700; font-size: 13px; cursor: pointer; }
.ab-slot:hover:not([disabled]) { border-color: var(--gold-2); }
.ab-slot.hit { background: #2f9e6b; color: #fff; border-color: #2f9e6b; }
.ab-slot.miss { background: #bb3a31; color: #fff; border-color: #bb3a31; opacity: .7; cursor: default; }
.ab-guess { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.ab-guess + .ab-guess { border-top: 1px solid var(--line); }
.ab-guess.wrong .nm { color: var(--crimson); text-decoration: line-through; }
.ab-guess.right .nm { color: var(--green); font-weight: 800; }

/* ---- Round item / ability / arcana icons ----
   Their artwork is circular with transparent corners, so a square box with a
   background + border looks awkward. Clip the container to a circle and drop the
   frame so the icon shows in its natural round shape. Hero portraits (plain
   .mini-portrait, .avatar) are intentionally left square. */
.tile .icon, .item-card .ic, .build-chip .ic, .sit-item .icon, .kv .arc-ic, .ab-ic, .ab-ic.passive {
  border-radius: 50%; border: 0; background: transparent;
}
.mini-portrait.round { border-radius: 50%; border: 0; }
.tile .icon.gold-b { box-shadow: 0 0 0 2px var(--gold) inset; }
.tier-hero .mini-portrait.round { border: 0; }