.run-page { --skill: var(--gold-2); }
.run-body { display: grid; align-content: start; gap: 1.1rem; min-width: 0; }
.run-group { display: grid; gap: .55rem; min-width: 0; }
.run-group > .win-caps { margin: 0; font: 400 .76rem var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-3); }
.run-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr)); gap: .75rem; min-width: 0; }
.run-row { --skill: var(--gold-2); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem; min-width: 0; padding: .85rem 1rem; border-radius: .9rem; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .035); }
.run-row.is-working { border-color: color-mix(in srgb, var(--skill) 42%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--skill) 9%, transparent), rgba(255, 255, 255, .03) 60%); }
.run-row.is-ready { border-color: color-mix(in srgb, var(--gold-2) 62%, transparent); background: linear-gradient(90deg, rgba(242, 198, 106, .1), rgba(255, 255, 255, .03) 60%); }
.run-row.is-stopped { border-color: rgba(255, 143, 79, .45); background: linear-gradient(90deg, rgba(255, 143, 79, .08), rgba(255, 255, 255, .03) 60%); }
.run-mark { display: grid; place-items: center; width: 3rem; height: 3rem; }
.run-mark > .ia-emblem { width: 2.7rem; height: 2.7rem; filter: drop-shadow(0 .15rem .2rem rgba(0, 0, 0, .55)); }
.run-mark > .medal { --size: 2.8rem; }
.run-row.is-idle .run-mark > .ia-emblem { filter: saturate(.55) brightness(.85) drop-shadow(0 .15rem .2rem rgba(0, 0, 0, .55)); }
.run-goal-well { width: 2.8rem; }
.run-goal-well > img { width: 80%; height: 80%; object-fit: contain; }
.run-copy { display: grid; gap: .16rem; min-width: 0; }
.run-copy > .t-caps { font-size: .68rem; letter-spacing: .1em; color: var(--gold-3); }
.run-copy > strong { min-width: 0; font: 400 1.18rem/1.2 var(--font-display); color: var(--gold-0); overflow-wrap: anywhere; }
.run-copy > strong b { font: 400 1.15rem var(--font-num); color: var(--gold-1); }
.run-row.is-idle .run-copy > strong { color: var(--text-2); }
.run-row.is-stopped .run-copy > strong { color: #ffd0b3; }
.run-line { display: block; min-width: 0; font-size: .86rem; line-height: 1.38; color: var(--text-2); }
.run-line b { font-weight: 600; color: var(--text-1); }
.run-item { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; }
.run-item > span { min-width: 0; }
.run-item .item-img { flex: none; width: 1.4rem; height: 1.4rem; object-fit: contain; filter: drop-shadow(0 .08rem .1rem rgba(0, 0, 0, .6)); }
.run-bar { width: min(100%, 18rem); height: .35rem; margin-top: .25rem; }
.run-side { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.run-tag { display: inline-flex; align-items: center; height: 1.55rem; padding: 0 .6rem; border-radius: .8rem; border: 1px solid rgba(255, 255, 255, .12); font-size: .74rem; font-weight: 650; letter-spacing: .02em; color: var(--text-3); white-space: nowrap; }
.run-tag.is-ready { border-color: transparent; color: #1f1406; background: linear-gradient(180deg, var(--gold-1), var(--gold-3)); }
.run-tag.is-working { border-color: color-mix(in srgb, var(--skill) 48%, transparent); background: color-mix(in srgb, var(--skill) 17%, transparent); color: color-mix(in srgb, var(--skill) 52%, #fff); }
.run-tag.is-stopped { border-color: rgba(255, 143, 79, .5); background: rgba(255, 143, 79, .14); color: #ffd0b3; }
.run-go { display: inline-flex; align-items: center; gap: .3rem; height: 2.35rem; padding: 0 .9rem; border-radius: .65rem; border: 1px solid rgba(242, 198, 106, .45); background: rgba(242, 198, 106, .12); color: var(--gold-1); font-size: .9rem; font-weight: 600; white-space: nowrap; transition: background .15s, border-color .15s; }
.run-go:hover:not(:disabled) { background: rgba(242, 198, 106, .2); border-color: var(--gold-2); }
.run-go .ia-glyph { width: .95rem; height: .95rem; }
.run-go.is-fix { border-color: transparent; background: linear-gradient(180deg, #f7dc97, #cf9a46); color: #1f1405; }
.run-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .7rem; margin: 0; font-size: .9rem; color: var(--text-3); }
.run-group.is-now .run-row { padding: 1rem 1.15rem; }
.run-group.is-now .run-copy > strong { font-size: 1.35rem; }

.ench-page { --skill: #c9a2ff; }
.ench-tools { padding: 0; }
.ench-tabs button { position: relative; display: inline-flex; align-items: center; gap: .4rem; }
.ench-tabs .ia-emblem { flex: none; width: 1.2rem; height: 1.2rem; }
.ench-tab-skill { font-size: .72rem; font-weight: 400; opacity: .7; }
.ench-tab-count { min-width: 1.3rem; padding: 0 .3rem; border-radius: .65rem; background: rgba(242, 198, 106, .18); color: var(--gold-1); font: 700 .72rem/1.3rem var(--font-num); text-align: center; }
.ench-tabs button[aria-pressed="true"] .ench-tab-count { background: rgba(29, 18, 4, .72); }
.ench-tab-news { width: .46rem; height: .46rem; border-radius: 50%; background: var(--gold-1); box-shadow: 0 0 0 2px rgba(242, 198, 106, .2); }
.ench-skills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.ench-skill { --skill: var(--gold-2); display: grid; grid-template-columns: auto auto; align-items: center; column-gap: .45rem; padding: .35rem .7rem .4rem .45rem; border-radius: .7rem; border: 1px solid color-mix(in srgb, var(--skill) 32%, rgba(255, 255, 255, .08)); background: rgba(0, 0, 0, .22); }
.ench-skill > .ia-emblem { grid-row: span 2; width: 1.9rem; height: 1.9rem; }
.ench-skill > span { display: flex; align-items: baseline; gap: .4rem; }
.ench-skill small { font-size: .66rem; letter-spacing: .1em; color: var(--gold-3); }
.ench-skill b { font: 400 1.1rem/1 var(--font-num); color: var(--gold-0); }
.ench-skill em { font-style: normal; font-size: .74rem; color: var(--text-2); }
.ench-choose { display: flex; flex-direction: column; gap: .75rem; min-height: 0; }
.ench-intro { --skill: var(--gold-2); flex: none; display: grid; gap: .55rem; padding: .7rem .85rem; border-radius: .8rem; border: 1px solid color-mix(in srgb, var(--skill) 34%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--skill) 9%, transparent), rgba(0, 0, 0, .18)); }
.ench-intro p { display: flex; align-items: center; gap: .65rem; margin: 0; font-size: .88rem; line-height: 1.42; color: var(--text-2); }
.ench-intro p > .ia-emblem { flex: none; width: 2rem; height: 2rem; }
.ench-intro p b { font-weight: 600; color: var(--text-1); }
.ench-ladder { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.ench-ladder > .t-caps { margin-right: .3rem; font-size: .66rem; letter-spacing: .1em; color: var(--gold-3); }
.ench-rung { display: grid; justify-items: center; min-width: 3rem; padding: .18rem .45rem .22rem; border-radius: .5rem; border: 1px solid rgba(255, 255, 255, .1); background: rgba(0, 0, 0, .2); color: var(--text-3); }
.ench-rung b { font: 400 .95rem/1.1 var(--font-display); }
.ench-rung small { font-size: .66rem; }
.ench-rung.is-on { border-color: color-mix(in srgb, var(--gold-2) 62%, transparent); background: rgba(242, 198, 106, .12); color: var(--gold-1); }
.ench-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); align-content: start; gap: .5rem; min-height: 0; }
.ench-card { position: relative; display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; align-items: center; gap: .65rem; min-width: 0; padding: .45rem .6rem .45rem .45rem; border-radius: .65rem; border: 1px solid rgba(255, 255, 255, .07); background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .2)); color: var(--text-1); text-align: left; transition: border-color .12s, background .12s; }
.ench-card:hover { border-color: rgba(242, 198, 106, .38); background: linear-gradient(180deg, rgba(242, 198, 106, .07), rgba(0, 0, 0, .2)); }
.ench-card:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 1px; }
.ench-card.is-selected { border-color: var(--gold-2); background: linear-gradient(180deg, rgba(242, 198, 106, .11), rgba(0, 0, 0, .22)); box-shadow: 0 0 0 1px rgba(242, 198, 106, .3); }
.ench-well { width: 3.2rem; }
.ench-well > .item-img { width: 80%; height: 80%; object-fit: contain; filter: drop-shadow(0 .12rem .12rem rgba(0, 0, 0, .7)); }
.ench-copy { display: grid; grid-template-columns: minmax(0, auto) auto; justify-content: start; align-items: baseline; column-gap: .4rem; row-gap: .1rem; min-width: 0; }
.ench-copy > strong { min-width: 0; overflow: hidden; font: 400 1rem/1.2 var(--font-display); white-space: nowrap; text-overflow: ellipsis; }
.ench-copy > small { grid-column: 1 / -1; min-width: 0; overflow: hidden; font-size: .76rem; color: var(--text-3); white-space: nowrap; text-overflow: ellipsis; }
.ench-news { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: .25rem; font-size: .74rem; font-style: normal; font-weight: 650; color: var(--gold-1); }
.ench-news .ia-glyph { width: .8rem; height: .8rem; }
.ench-level { display: grid; justify-items: end; font: 400 1.05rem/1 var(--font-num); color: var(--text-2); }
.ench-level small { font-size: .56rem; letter-spacing: .1em; color: var(--text-3); }
.ench-empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: .35rem; padding: 2.2rem 1rem; border-radius: .8rem; border: 1px dashed rgba(255, 255, 255, .12); text-align: center; color: var(--text-3); font-size: .88rem; }
.ench-empty .ia-emblem { width: 3rem; height: 3rem; opacity: .7; }
.ench-empty strong { font: 400 1.15rem var(--font-display); color: var(--text-1); }


@media (min-width: 761px) and (min-height: 501px), (min-width: 761px) and (pointer: fine), (min-width: 761px) and (pointer: none) {
  .is-hud .hud-tab .sr-badge { position: absolute; top: .22rem; right: .3rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .28rem; font-size: .64rem; }
  .is-hud .hud-tab[aria-pressed="true"] { background: rgba(242, 198, 106, .16); border-color: rgba(242, 198, 106, .55); color: var(--gold-1); }
  .is-hud .hud-panel-head .hud-panel-close { margin-left: auto; }

  .is-hud .stage > .run-page { display: flex; flex-direction: column; gap: 1.1rem; }
  .is-hud .run-page > .win-head .win-progress { flex-wrap: wrap; }
  .is-hud .run-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 .3rem .3rem 0; }
  .is-hud .stage > .ench-page { grid-template-rows: auto auto minmax(0, 1fr); gap: 1rem; }
  .is-hud .ench-page .win-sub { max-width: 44rem; }
  .is-hud .stage .ench-tools .segmented button { min-height: 2.55rem; padding: 0 .95rem; font-size: .94rem; }
  .is-hud .stage .ench-tabs button[aria-pressed="true"] .ench-tab-count { background: rgba(242, 198, 106, .2); }
  .is-hud .stage .ench-choose { gap: .75rem; }
  .is-hud .ench-grid { flex: 1; overflow-y: auto; padding: 0 .25rem .25rem 0; }
  .is-hud .stage .mastery-window .win-head .win-title { flex: 1 1 auto; }
  .is-hud .stage .mastery-window .win-aside { flex: 0 1 30rem; }
}

@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .run-page, .ench-page { gap: .8rem; }
  .run-hero, .ench-hero, .mw-hero { flex-wrap: wrap; }
  .run-hero .run-summary, .ench-hero .ench-skills { flex: 1 1 100%; justify-content: flex-start; }
  .run-grid { grid-template-columns: minmax(0, 1fr); }
  .run-row { grid-template-columns: auto minmax(0, 1fr); gap: .7rem; padding: .75rem .8rem; }
  .run-side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .run-go { min-height: 2.6rem; }
  .ench-tools .ench-tabs { flex-wrap: wrap; justify-content: center; width: 100%; }
  .ench-tab-skill { display: none; }
  .ench-choose { padding: 1.35rem .6rem .7rem; }
  .ench-ladder > .t-caps { flex: 1 1 100%; margin: 0; }
  .ench-rung { flex: 1 1 0; min-width: 0; }
  .ench-grid { grid-template-columns: minmax(0, 1fr); }
  .ench-card { min-height: 4rem; }
}
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .ench-page :is(.ench-tabs button, .imbue-opt, .btn, .tl-act) { min-height: 44px; }
  .ench-page .enchant-auto .toggle::before { width: max(100%, 44px); height: max(100%, 44px); }
  .ench-page .src-btn::after { width: max(100%, 44px); height: max(100%, 44px); }
  .ench-page :is(.hero-copy .t-caps, .ench-skill small, .ench-skill em, .ench-tab-name, .ench-tab-count, .ench-intro p, .ench-ladder .t-caps, .ench-rung small, .ench-copy small, .ench-level small, .ench-news, .card-qty,
    .craft-product p, .craft-tags .chip, .enchant-section > header .t-caps, .enchant-section .t-caps, .enchant-section .t-muted, .enchant-note, .tip-line, .tip-line small, .tl-tier, .imbue-opt strong, .imbue-opt small, .imbue-detail p,
    .enchant-auto b, .enchant-auto small, .cost-chips > span, .offer-head b, .offer-head small, .offer-col > .t-caps, .offer-col .tip-line, .offer-power, .tip-note, .engrave-row, .btn) { font-size: .9rem; }
  .ench-page :is(.ench-skill small, .ench-ladder .t-caps, .enchant-section .t-caps, .offer-col > .t-caps, .hero-copy .t-caps) { letter-spacing: .05em; }
  .ench-page .tip-line .tl-tier { height: auto; min-height: 1.45rem; }
  .ench-page .ench-tab-count { min-width: 1.6rem; }
  .ench-page .ench-copy > :is(strong, small) { white-space: normal; text-overflow: clip; }
}
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .run-page .run-go { min-height: 44px; min-width: 44px; }
  .run-page :is(.hero-copy .t-caps, .run-tag, .run-group .win-caps, .run-copy .t-caps, .run-copy small, .run-line, .run-item, .run-go) { font-size: .9rem; }
  .run-page :is(.hero-copy .t-caps, .run-copy .t-caps) { letter-spacing: .05em; }
}