.cw-cl { display: inline-flex; align-items: baseline; gap: .45rem; padding: .12rem .75rem .2rem; border-radius: .75rem; border: 1px solid rgba(242, 198, 106, .38); background: rgba(242, 198, 106, .08); white-space: nowrap; }
.cw-cl b { font: 400 1.85rem/1 var(--font-num); color: var(--gold-0); }
.cw-cl small { font: 400 .7rem var(--font-ui); letter-spacing: .12em; color: var(--gold-3); }

.cw-levels { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; min-width: 0; }
.cw-level { --skill: var(--gold-2); display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon copy" "bar bar" "xp xp"; align-items: center; gap: .4rem .65rem; min-width: 0; padding: .6rem .75rem .55rem .6rem; border-radius: .85rem; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .035); color: var(--text-2); text-align: left; }
.cw-level-icon { grid-area: icon; display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: .75rem; border: 1px solid color-mix(in srgb, var(--skill) 45%, transparent); background: color-mix(in srgb, var(--skill) 16%, rgba(0, 0, 0, .35)); }
.cw-level-icon .ia-emblem { width: 1.75rem; height: 1.75rem; }
.cw-level-copy { grid-area: copy; display: grid; gap: .12rem; min-width: 0; }
.cw-level-name { overflow: hidden; font: 400 .7rem/1.1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; text-overflow: ellipsis; }
.cw-level-num { font: 400 2.05rem/1 var(--font-num); color: var(--text-1); }
.cw-level-bar { grid-area: bar; height: .4rem; }
.cw-level-xp { grid-area: xp; overflow: hidden; font-size: .74rem; line-height: 1.2; color: var(--text-3); white-space: nowrap; text-overflow: ellipsis; }
.cw-level-xp b { font-weight: 600; color: var(--text-2); }

.cw-vitals { display: grid; gap: .4rem; justify-items: end; min-width: 0; }
.cw-power { display: inline-flex; align-items: baseline; gap: .4rem; font-size: .8rem; color: var(--text-3); cursor: help; }
.cw-power .ia-glyph { align-self: center; width: 1rem; height: 1rem; color: var(--gold-2); }
.cw-power b { font: 400 1.3rem/1 var(--font-num); color: var(--gold-0); }
.cw-power small { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-3); }
.cw-hp { display: flex; align-items: center; gap: .55rem; }
.cw-hp .t-caps { white-space: nowrap; }
.cw-hp-bar { flex: none; width: 15rem; height: .85rem; }

.cw-tip-head { --tip-rar: var(--gold-2); }
.cw-tip-head > div { flex: 1; min-width: 0; }
.cw-tip-level { display: grid; justify-items: end; gap: .2rem; line-height: 1; }
.cw-tip-level b { font: 400 2rem/1 var(--font-num); color: var(--gold-0); }
.cw-tip-level small { margin: 0; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-3); }
.cw-tip-body { gap: .28rem; }
.cw-tip-row { align-items: center; }
.cw-tip-row > span { display: inline-flex; align-items: center; gap: .55rem; color: var(--text-1); font-size: .86rem; }
.cw-tip-row .ia-emblem { width: 1.35rem; height: 1.35rem; flex: none; }
.cw-tip-row > b { font: 600 1.1rem/1 var(--font-num); color: var(--text-1); }

:is(.mnav-item, .skill-tile, .skill-row, .hud-rail-btn)[data-tip-skill="combat"] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

.skill-row .sr-levels { overflow: hidden; font: 600 .66rem var(--font-num); color: var(--text-3); white-space: nowrap; text-overflow: ellipsis; }

@media (min-width: 761px) and (min-height: 501px), (min-width: 761px) and (pointer: fine), (min-width: 761px) and (pointer: none) {
  .is-hud .win-head.cw-head { flex-wrap: wrap; row-gap: 1rem; }
  .is-hud .win-head.cw-head > .cw-levels { flex: 1 1 100%; }
  .is-hud .win-head.cw-head .win-name { align-items: center; }
  .is-hud .win-head .cw-vitals { justify-items: end; }
  .is-hud .win-head .cw-hp { flex-direction: row; justify-content: flex-end; }
  .is-hud .win-head .cw-hp .bar { width: 15rem; height: .85rem; }
  .is-hud .win-head .cw-hp .t-caps { font-size: .72rem; font-weight: 400; letter-spacing: .1em; color: #ffb3c8; }
  .is-hud .stage .cw-level > .bar { background: rgba(255, 255, 255, .1); box-shadow: none; }
  .is-hud .stage .cw-level > .bar > i { background: var(--fill); box-shadow: none; }
}
@media (min-width: 761px) and (max-width: 1180px) and (min-height: 501px), (min-width: 761px) and (max-width: 1180px) and (pointer: fine), (min-width: 761px) and (max-width: 1180px) and (pointer: none) {
  .is-hud .win-head .cw-hp .bar { width: 10rem; }
  .cw-levels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .cw-hero { flex-wrap: wrap; }
  .cw-hero-name { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
  .cw-hero .cw-cl b { font-size: 1.55rem; }
  .cw-hero .cw-vitals { flex: 1 1 100%; justify-items: stretch; }
  .cw-hero .cw-power { justify-self: start; }
  .cw-hero .cw-hp-bar { flex: 1; width: auto; }
  .cw-hero .cw-levels { flex: 1 1 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
  .cw-level { gap: .3rem .45rem; padding: .45rem .5rem .45rem .45rem; border-radius: .7rem; }
  .cw-level-icon { width: 2rem; height: 2rem; border-radius: .55rem; }
  .cw-level-icon .ia-emblem { width: 1.3rem; height: 1.3rem; }
  .cw-level-name { font-size: .58rem; letter-spacing: .06em; }
  .cw-level-num { font-size: 1.55rem; }
  .cw-level-bar { height: .32rem; }
  .cw-level-xp { font-size: .62rem; }

  .cw-level { grid-template-areas: "icon num" "name name" "bar bar" "xp xp"; }
  .cw-level-copy { display: contents; }
  .cw-level-num { grid-area: num; }
  .cw-level-name { grid-area: name; font-size: .9rem; letter-spacing: .03em; }
  .cw-level-xp { font-size: .9rem; }
  .cw-hero .cw-cl small, .cw-hero .cw-power small, .combat-page .hp-line .t-caps { font-size: .9rem; }
  .cw-hero .cw-power { font-size: .95rem; }
  .cw-hero .cw-power { position: relative; }
  .cw-hero .cw-power::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3.3rem; translate: 0 -50%; }
  .cw-hero .cw-hp-bar { height: 1.15rem; }
  .cw-hero .cw-hp-bar .bar-label { font-size: .9rem; }
  .combat-page .segmented.combat-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; width: 100%; }
  .combat-page .segmented.combat-tabs button { justify-content: center; }
  .combat-page :is(.btn, .btn-sm, .segmented button, .stance-picker button) { min-height: 3.3rem; font-size: .95rem; }
  .combat-page .btn-icon { width: 3.3rem; }
  .combat-page .stance-picker button small, .combat-page .stance-row .t-caps, .combat-page .drops .t-caps, .combat-page .area-head small, .combat-page .vs-meta, .combat-page .vs-side small,
  .combat-page .fact small, .combat-page .fact .fact-note, .combat-page .action-note, .combat-page .auto-eat .t-caps, .combat-page .auto-eat, .combat-page .eq-quiver-copy small, .combat-page .hud-eat.is-sm small,
  .combat-page .chip, .combat-page .t-caps, .combat-page .segmented button .tab-level { font-size: .9rem; }
  .combat-page :is(.drop-row, .fact > div, .detail-summary, .area-note, .mb-note) { font-size: .95rem; }
  .combat-page :is(.drop-row, .fact > div, .btn, .btn-sm, .segmented button) small { font-size: .9rem; }
  .combat-page .food-slot { min-height: 3.3rem; }
  .combat-page .auto-eat small { font-size: .9rem; }
  .combat-page .eq-quiver-copy strong { font-size: .95rem; }
  .combat-page .stance-picker button small { opacity: .85; }
  .combat-page .stance-picker { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.fight-sheet { display: grid; gap: .7rem; }
.fs-side { display: grid; gap: .4rem; padding: .6rem .75rem .55rem; border-radius: .6rem; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .07); }
.fs-side.is-enemy { border-color: rgba(255, 120, 90, .28); }
.fs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.fs-who { display: grid; gap: .12rem; min-width: 0; }
.fs-who > b { font: 400 max(1.1rem, 14px)/1.15 var(--font-display); color: var(--gold-1, #ffe7a6); overflow-wrap: anywhere; }
.fs-side.is-enemy .fs-who > b { color: #ffc1a6; }
.fs-who > small { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .3rem; font-size: max(.8rem, 11px); color: var(--text-2); }
.fs-mark { display: inline-flex; font-size: 1.1em; color: var(--gold-2); }
.fs-mark.is-melee { color: #ff8f6e; }
.fs-mark.is-ranged { color: #7de3b5; }
.fs-mark.is-magic { color: #8fbaff; }
.fs-power { display: grid; justify-items: end; flex: none; line-height: 1.05; }
.fs-power small { font-size: max(.62rem, 10px); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.fs-power b { font: 400 max(1.4rem, 17px)/1 var(--font-num); color: var(--gold-0, #fff1c9); }
.fs-side.is-enemy .fs-power b { color: #ffb4a8; }
.fs-rows { display: grid; margin: .1rem 0 0; }
.fs-row { display: flex; align-items: baseline; justify-content: space-between; gap: .7rem; padding: .22rem 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.fs-row:first-child { border-top: 0; }
.fs-row dt { display: inline-flex; align-items: center; gap: .3rem; flex: none; font-size: max(.88rem, 11px); color: var(--text-3); }
.fs-row dd { flex: 1 1 auto; min-width: 0; margin: 0; text-align: right; font-size: max(.92rem, 12px); color: var(--text-1); }
.fs-row dd > b { font: 400 max(1rem, 12.5px) var(--font-num); color: var(--text-1); }
.fs-row dd small { font-size: max(.8rem, 11px); color: var(--text-3); }
.fs-row.is-good dd > b, .fs-row.is-good .fs-type em { color: var(--emerald); }
.fs-row.is-bad dd > b, .fs-row.is-bad .fs-type em { color: #ff9a85; }
.fs-row.is-blessing dt { color: var(--b, #e8806f); }
.fs-type { display: inline-flex; align-items: center; gap: .22rem; margin-left: .55rem; white-space: nowrap; font: 400 max(.95rem, 12px) var(--font-num); }
.fs-type:first-child { margin-left: 0; }
.fs-type em { font-style: normal; }
.fs-type.is-yours::after { content: "\2713"; margin-left: .15rem; color: var(--emerald); }
.fs-row[data-k="resists"] .fs-type.is-yours::after { content: "!"; color: #ff9a85; font-weight: 700; }
.fs-types { margin-top: .1rem; }