/* keepwatch.gg data pages (wiki). Colours: tools/shell/tokens.css, header, footer
   and search: tools/shell/shell.css. Both are loaded before this file. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
main a:not(.chip):not(.btn):not(.tag):not(.card) { color: var(--gold-text); }
h1 { margin: 0 0 8px; font-size: clamp(26px, 5vw, 36px); line-height: 1.15; letter-spacing: -.02em; }
h2 { margin: 34px 0 12px; font-size: 21px; line-height: 1.25; }
img { display: block; object-fit: contain; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--gold); color: var(--on-gold); padding: 8px 12px; border-radius: 8px; z-index: 10; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.i { width: 16px; height: 16px; flex: none; color: var(--muted); }
.i.hp { width: 14px; height: 14px; color: var(--heart); }
.i.gp { color: var(--gold); }
.ph { display: inline-block; border-radius: 8px; background: var(--pic); flex: none; }
.dim { color: var(--muted); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* page head */
main { padding-top: 18px; padding-bottom: 48px; }
.crumbs { font-size: 14px; color: var(--dim); margin-bottom: 18px; }
.crumbs a { color: var(--muted) !important; display: inline-block; padding: 12px 0; margin: -12px 0; }
.head { display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: center; }
.head .pic { width: 132px; height: 132px; border-radius: 22px; background: var(--pic); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex: none; }
.head .txt { flex: 1 1 420px; min-width: 0; }
.lede { margin: 0; color: var(--muted); max-width: 66ch; }
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.tag { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; background: var(--chip); font-size: 14px; font-weight: 600; }
.tag img { width: 22px; height: 22px; }
.tag.sm { height: 28px; font-size: 13px; padding: 0 10px; }
.tag.rar-epic { background: var(--epic); }
.tag.rar-common { background: var(--common); }
.stamp { font-size: 13px; color: var(--dim); padding: 0 4px; }

/* Gold Pass */
.pick { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.myth { position: relative; display: inline-flex; align-items: center; height: 40px; border-radius: 999px; background: var(--chip); }
.myth summary { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 8px; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; user-select: none; }
.myth summary::-webkit-details-marker { display: none; }
.myth summary img { width: 26px; height: 26px; }
.myth summary .dn { color: var(--muted); transition: transform .15s; }
.myth details[open] summary .dn { transform: rotate(180deg); }
.myth.on { background: var(--mine); box-shadow: inset 0 0 0 1px var(--gold); }
.myth.on summary { padding-right: 6px; font-weight: 700; }
.myth .x { display: grid; place-items: center; width: 28px; height: 28px; margin-right: 6px; border: 0; border-radius: 999px; background: var(--surface); color: var(--text); cursor: pointer; }
.myth .x[hidden] { display: none; }
.myth .x:hover { background: var(--raised); }
.thpop { position: absolute; right: 0; top: 46px; z-index: 6; display: grid; grid-template-columns: repeat(6, 64px); gap: 4px; padding: 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .55); }
.thpop button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border: 0; border-radius: 10px; background: none; color: var(--text); font: 700 12px var(--font); cursor: pointer; }
.thpop button img { width: 40px; height: 40px; }
.thpop button:hover { background: var(--raised); }
.thpop button[aria-pressed="true"] { background: var(--mine); box-shadow: inset 0 0 0 1px var(--gold); }
@media (max-width: 600px) { .thpop { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; grid-template-columns: repeat(6, minmax(0, 1fr)); } }
tr.mine td { background: var(--mine); }
tr.mine td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
tr.later td { opacity: .45; }
.thgrid a.mine { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.boost { display: inline-flex; align-items: center; gap: 2px; height: 40px; padding: 3px 3px 3px 12px; border-radius: 999px; background: var(--chip); }
.boost > span { font-size: 14px; font-weight: 600; margin: 0 6px; }
.boost button { min-width: 46px; height: 34px; padding: 0 8px; border-radius: 999px; border: 0; cursor: pointer; font: 700 13px var(--font); background: transparent; color: var(--text); }
.boost button[aria-pressed="true"] { background: var(--gold); color: var(--on-gold); }
.cost s { display: none; color: var(--dim); font-size: 13px; font-weight: 400; margin-right: 6px; }
.cost.cut s { display: inline; }
.cut, .cut .i { color: var(--cut); }
.cost.cut b { color: var(--text); }

/* stats and description */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-top: 22px; }
.stats div { padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.stats span { display: block; font-size: 13px; color: var(--muted); }
.stats b { font-size: 17px; }
.info { margin: 14px 0 0; padding: 12px 16px; border-left: 3px solid var(--gold); background: var(--raised); border-radius: 0 12px 12px 0; max-width: 80ch; }
.info blockquote { margin: 0; }
.info figcaption { margin-top: 4px; font-size: 13px; color: var(--dim); }

/* level pictures */
.strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; margin-top: 22px; }
.strip a { padding: 6px 0 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; color: var(--muted) !important; }

/* tables */
.tbl { overflow-x: auto; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 15px; }
th { text-align: left; font-size: 13px; font-weight: 600; color: var(--muted); background: var(--raised); padding: 10px 14px; white-space: nowrap; position: sticky; top: 0; }
td { padding: 6px 14px; border-top: 1px solid var(--border); white-space: nowrap; }
td > img, td > .ph, td > svg { display: inline-block; vertical-align: middle; }
th.n, td.n { text-align: right; }
th.sm, td.sm { padding-left: 6px; padding-right: 6px; }
td.n img, td.n svg { margin-left: 6px; }
td.lv { font-weight: 700; }
td.lv img, td.lv .ph { margin-right: 10px; }
td.g img, td.g .ph { margin-right: 8px; }
td.t .i { margin-right: 7px; vertical-align: -2px; }
tbody tr:hover td { background: var(--raised); }
.levels abbr { text-decoration: none; }
.note { margin: 10px 0 0; font-size: 13px; color: var(--dim); max-width: 90ch; }
.nm { display: inline-flex; align-items: center; gap: 10px; color: var(--text) !important; font-weight: 600; }
.new { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--new-bg); color: var(--new); font-size: 12px; font-weight: 700; }
.totals { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.totals span { display: grid; grid-template-columns: 34px auto; column-gap: 10px; align-items: center; padding: 8px 14px 8px 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.totals img { grid-row: span 2; }
.totals small { color: var(--muted); font-size: 13px; }

/* equipment: Stats / Cost views of the level table */
.views { position: relative; }
.views > input { position: absolute; opacity: 0; pointer-events: none; }
.vhead { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin: 34px 0 12px; }
.vhead h2 { margin: 0; }
.vtabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--chip); }
.vtabs label { padding: 6px 14px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; user-select: none; }
#v-stats:checked ~ .vhead label[for="v-stats"], #v-cost:checked ~ .vhead label[for="v-cost"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .16); }
#v-stats:focus-visible ~ .vhead label[for="v-stats"], #v-cost:focus-visible ~ .vhead label[for="v-cost"] { outline: 2px solid var(--gold); outline-offset: 2px; }
.views .v-cost, #v-cost:checked ~ .v-stats { display: none; }
#v-cost:checked ~ .v-cost { display: block; }
.eqstats tr.grp th { padding-bottom: 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.eqstats tr.grp th.gb { color: var(--heart); }
.eqstats tr.grp th.ga { color: var(--gold-text); }
.eqstats tr.grp + tr th { top: 26px; }
.eqstats .sep { border-left: 1px solid var(--border); }
.eqstats td.up { background: var(--new-bg); color: var(--new); font-weight: 700; }
.v-cost tr.up td { background: var(--new-bg); }
.v-cost tr.up td.lv b { color: var(--new); }
.eqfixed { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.eqfixed span { display: inline-flex; align-items: center; gap: 6px; }
.eqfixed b { color: var(--text); }
.eqstats thead tr:last-child th { white-space: normal; min-width: 5.5em; max-width: 10em; vertical-align: bottom; line-height: 1.25; }

/* cards: gear up and merges */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; }
.card { padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; }
.cardhead { display: flex; align-items: center; gap: 12px; }
.cardhead > img, .cardhead > .ph { width: 56px; height: 56px; padding: 4px; border-radius: 14px; background: var(--pic); }
.cardhead small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-text); }
.cardhead strong { font-size: 17px; line-height: 1.25; }
.cardhead .tag { margin-left: auto; }
.card p { margin: 0; font-size: 14px; }
.card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); }
.card li { display: flex; align-items: center; gap: 8px; }
.cardfoot { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; font-weight: 600; border-top: 1px solid var(--border); padding-top: 10px; }
.cardfoot span { display: inline-flex; align-items: center; gap: 6px; }

/* Town Hall tiles, overview grids, chips */
.thgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.thgrid a { padding: 10px 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; color: var(--text) !important; }
.thgrid b { font-size: 13px; }
.thgrid span { font-size: 13px; color: var(--muted); }
.thgrid.big { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); margin-top: 22px; }
.thnav { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; margin-bottom: 18px; }
.thnav a { display: flex; flex-direction: column; align-items: center; padding: 4px 0; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); font-size: 12px; font-weight: 700; color: var(--muted) !important; }
.thnav a[aria-current] { background: var(--gold); border-color: var(--gold); color: var(--on-gold) !important; }
.limits { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }
.limits a { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); color: var(--text) !important; }
.limits img { width: 52px; height: 52px; padding: 3px; border-radius: 12px; background: var(--pic); }
.limits span { display: flex; flex-direction: column; }
.limits em { font-style: normal; color: var(--gold-text); }
.limits small { font-size: 13px; color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; }
.grid a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); text-align: center; color: var(--text) !important; }
.grid b { font-size: 14px; line-height: 1.25; }
.grid span { font-size: 13px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 14px 4px 6px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); font-size: 14px; font-weight: 600; }

/* call to action, footer */
.cta { margin-top: 40px; padding: 18px 22px; border-radius: 18px; background: linear-gradient(90deg, var(--raised), var(--surface)); border: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.cta .pic { width: 56px; height: 56px; object-fit: contain; flex: 0 0 auto; }
.cta div { flex: 1 1 300px; min-width: 0; }
.cta strong { font-size: 18px; }
.cta p { margin: 4px 0 0; color: var(--muted); }
.cta .stores { flex: 0 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cta .stores a { display: block; line-height: 0; }
.cta .stores img { height: 44px; width: auto; }
.cta .go { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cta .go .web { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 10px; background: var(--gold); color: var(--on-gold) !important; font-weight: 700; font-size: 15px; white-space: nowrap; }
.cta .go .web:hover { text-decoration: none; filter: brightness(1.05); }
.cta .go .web img { width: 24px; height: 24px; }
.cta .go span { font-size: 14px; color: var(--muted); }
.cta .go span a { color: var(--gold-text); }
@media (max-width: 599px) {
  .cta .go { width: 100%; align-items: stretch; text-align: center; }
  .cta .go .web { justify-content: center; white-space: normal; padding-block: 8px; }
}
.btn { background: var(--gold); color: var(--on-gold); font-weight: 700; padding: 12px 20px; border-radius: 12px; min-height: 44px; display: inline-flex; align-items: center; }
.btn:hover { text-decoration: none; filter: brightness(1.05); }
.src { margin: 14px 0 0; font-size: 13px; color: var(--dim); }

/* phones */
@media (max-width: 600px) {
  .head .pic { width: 88px; height: 88px; border-radius: 18px; }
  .head .pic img { width: 76px; height: 76px; }
  .boost, .pick { margin-left: 0; }
  td, th { padding-left: 10px; padding-right: 10px; }
  .opt { display: none; }
  td.lv img, td.lv .ph, td.g img, td.g .ph { display: none; }
  td, th { padding-left: 8px; padding-right: 8px; }
  table { font-size: 14px; }
  td.t .i { display: none; }
  .thgrid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* overview pages: max level per Town Hall */
.mx th, .mx td { text-align: center; }
.mx thead th { padding: 8px 6px; vertical-align: bottom; }
.mx thead a { display: block; color: var(--muted) !important; font-size: 12px; font-weight: 600; }
.mx thead img { display: block; margin: 0 auto 4px; border-radius: 10px; background: var(--pic); }
.mx td.thc { text-align: left; white-space: nowrap; }
.mx td.thc a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text) !important; }
.mx td b { font-size: 15px; font-variant-numeric: tabular-nums; }
.mx td.up b { color: var(--gold-text); }
.mx td small { display: block; font-size: 11px; color: var(--dim); }
.mx td.no { color: var(--dim); }
.mx td.thc, .mx thead th:first-child { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--surface); }
.mx thead th:first-child { z-index: 2; background: var(--raised); }
/* tables keep their first column in place, so they only fade on the right */
.tbl.more-l { -webkit-mask-image: none; mask-image: none; }
.tbl.more-l.more-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }
.hcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin-top: 22px; }
.hc { display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; align-content: start; gap: 8px 14px; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.hc .pic { grid-row: span 3; align-self: start; }
.hc .pic img { width: 84px; height: 84px; border-radius: 14px; background: var(--pic); padding: 4px; }
.hc .nm2 { font-size: 17px; font-weight: 700; color: var(--text) !important; }
.hc .meta { display: flex; flex-wrap: wrap; gap: 6px; }
.hc .meta > span { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--chip); font-size: 13px; font-weight: 600; }
.hc .eq { display: flex; flex-wrap: wrap; gap: 4px; align-content: start; }
.hc .eq .ph { border: 1px dashed var(--border); }
.hc .eq img { border-radius: 8px; background: var(--pic); }
.hc .st > span { background: var(--raised); }
.hc .st .i { width: 14px; height: 14px; }
.hc p { grid-column: 1 / -1; align-self: end; margin: 4px 0 0; font-size: 14px; color: var(--muted); }
h2.withpic { display: flex; align-items: center; gap: 10px; }
h2.withpic a { color: var(--text) !important; }
.hall { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-top: 12px; }
.hall div { padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); font-size: 14px; }
.hall b { display: block; font-size: 13px; color: var(--muted); font-weight: 600; }
.hall span { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-weight: 700; }
@media (max-width: 600px) {
  .mx td small { display: none; }
  .mx thead th { padding: 8px 4px; }
  .mx thead span { display: block; width: 60px; margin: 0 auto; white-space: normal; font-size: 11px; line-height: 1.2; overflow-wrap: anywhere; }
  .mx thead img { width: 34px; height: 34px; }
  .mx td.thc img { display: none; }
  .hcards { grid-template-columns: 1fr; }
  .hall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Town Hall overview: timeline */
.tl { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.tlrow { display: grid; grid-template-columns: 120px minmax(0, 1fr) 300px; gap: 18px; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.tlrow.mine { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.tlrow.later { opacity: .55; }
.thb { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: var(--text) !important; font-weight: 800; font-size: 17px; }
.thb img { width: 96px; height: 96px; }
.tlrow .groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 16px; align-content: start; }
.lbl { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.ic { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ic img { border-radius: 8px; background: var(--pic); }
.tlrow .caps { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: start; }
.tlrow .caps a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px; background: var(--raised); font-size: 12px; color: var(--muted) !important; min-width: 0; }
.tlrow .caps img { flex: none; }
.tlrow .caps span { min-width: 0; line-height: 1.25; }
.tlrow .caps b { display: block; font-size: 14px; color: var(--text); }
.tlrow .caps small { display: block; font-size: 11px; color: var(--dim); }
@media (max-width: 760px) {
  .tlrow { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .thb { font-size: 14px; }
  .thb img { width: 64px; height: 64px; }
  .tlrow .caps { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .thgrid.big { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .thgrid.big a { padding: 6px 2px; font-size: 12px; }
  .thgrid.big img { width: 40px; height: 40px; }
}

tr.fold { display: none; }
tr.more td { padding: 0; }
tr.more[hidden] { display: none; }
tr.more button { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 44px; border: 0; background: none; color: var(--text); font: 600 14px var(--font); opacity: .5; cursor: pointer; }
tr.more button span { font-weight: 500; }
tr.more button:hover, tr.more button:focus-visible { opacity: 1; background: var(--raised); }

.thsum { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.jump { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 16px -16px 0; padding: 0 16px; }
.jump::-webkit-scrollbar { display: none; }
.jump a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--chip); color: var(--text) !important; font-size: 14px; font-weight: 600; white-space: nowrap; }
.jump a:hover { text-decoration: none; filter: brightness(1.1); }
.thsum span { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); font-size: 14px; color: var(--muted); }
.thsum b { font-size: 18px; color: var(--text); }
.chg { padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.chg h3 { margin: 16px 0 12px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.chg h3:first-child { margin-top: 0; }
.unl { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.unl a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; border-radius: 14px; background: var(--raised); text-align: center; color: var(--text) !important; }
.unl a img { width: 64px; height: 64px; }
.unl a b { font-size: 15px; line-height: 1.25; }
.unl a span { padding: 2px 10px; border-radius: 999px; background: var(--chip); font-size: 12px; font-weight: 700; color: var(--muted); }
.unl a span.rar-epic { background: #7c3aed; color: #fff; }
.unl a span.rar-common { background: var(--chip); color: var(--text); }
.ups { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 8px; }
.ups a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 10px 12px; border-radius: 14px; background: var(--raised); color: var(--text) !important; }
.ups a img { grid-row: span 2; }
.ups a b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ups a em { grid-row: span 2; font-style: normal; font-weight: 800; font-size: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ups a em s { text-decoration: none; color: var(--dim); font-weight: 600; }
.ups a em span { color: var(--gold-text); }
.seg { display: flex; gap: 2px; }
.seg i { flex: 1; height: 6px; border-radius: 2px; background: var(--chip); }
.seg i.o { background: var(--muted); opacity: .5; }
.seg i.g { background: var(--gold); }
.lvbar { position: relative; height: 6px; border-radius: 999px; background: var(--chip); overflow: hidden; }
.lvbar i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px; background: var(--muted); }
.lvbar i.g { background: var(--gold); }
.rest { display: flex; flex-wrap: wrap; gap: 6px; }
.rest a { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 4px; border-radius: 999px; background: var(--raised); font-size: 13px; font-weight: 600; color: var(--muted) !important; }
.rest a b { color: var(--text); }
@media (max-width: 600px) { .chg { padding: 12px; } .ups { grid-template-columns: 1fr; } .unl { grid-template-columns: repeat(2, 1fr); } .unl a img { width: 52px; height: 52px; } }
.tg { display: inline-flex; align-items: center; gap: 6px; }
.tg i { width: 8px; height: 8px; border-radius: 50%; background: #7fb069; }
.tg i.a { background: #6aa9ff; }
.tg i.b { background: linear-gradient(90deg, #7fb069 50%, #6aa9ff 50%); }

/* CJK line breaks: keep words together, balance headings */
h1, h2 { text-wrap: balance; }
html[lang="ja"] { word-break: auto-phrase; }
html[lang="ko"] { word-break: keep-all; overflow-wrap: anywhere; }