@layer components {
  .hp { height: 26px; border-radius: 99px; background: rgb(0 0 0 / .5); border: 1px solid rgb(224 88 63 / .5); overflow: hidden; position: relative; }
  .hp > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cinnabar-700, #a8321f), var(--cinnabar-400)); transition: width .6s var(--ease); box-shadow: 0 0 18px rgb(224 88 63 / .5); }
  .dmg-float { font-family: var(--font-display); font-size: 2.6rem; color: var(--cinnabar-400); text-shadow: 0 0 18px rgb(224 88 63 / .6); animation: dmgUp 1.4s var(--ease) both; text-align: center; }
  .dmg-float[hidden], .boss-msg[hidden] { display: none; }
  @keyframes dmgUp {0% { opacity: 0; transform: translateY(14px) scale(.8); } 20% { opacity: 1; transform: translateY(0) scale(1.15); } 100% { opacity: 1; transform: translateY(-4px) scale(1); }}
  .boss-cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6); align-items: start; margin-top: var(--s-4); }
  .boss-cols > .boss-log { grid-column: 1 / -1; }
  @media (max-width: 900px) {
    .boss-cols { grid-template-columns: minmax(0, 1fr); }
  }
  .boss-gif { border-radius: var(--r-md); overflow: hidden; background: rgb(0 0 0 / .35); display: grid; place-items: center; aspect-ratio: 4 / 3; }
  .boss-gif img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .fight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .fight-grid .btn { min-height: 44px; }
  .boss-msg { margin-top: var(--s-4); padding: 10px 14px; border-radius: var(--r-md); border: 1px solid var(--glass-border); overflow-wrap: anywhere; }
  .boss-msg.ok { background: rgb(79 220 178 / .1); border-color: rgb(79 220 178 / .4); }
  .boss-msg.err { background: rgb(224 88 63 / .1); border-color: rgb(224 88 63 / .45); }
  .lc-alert { display: flex; align-items: center; gap: var(--s-4); }
  .lc-alert p { margin: 0; }
  .lc-sec { font-family: var(--font-display); letter-spacing: .12em; text-transform: uppercase; font-size: .85rem; color: var(--gold-200); margin-bottom: var(--s-3); }
  .lc-cd { flex-wrap: wrap; gap: var(--s-3); }
  .lc-loading { display: flex; align-items: center; justify-content: center; gap: var(--s-3); padding: var(--s-6); color: var(--text-mute); }
  .lc-err { padding: 12px 16px; border-radius: var(--r-md); background: rgb(224 88 63 / .1); border: 1px solid rgb(224 88 63 / .45); }
  .lc-gifts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s-3); }
  .lc-gifts li { display: flex; align-items: center; gap: var(--s-3); padding: 8px 10px; border-radius: var(--r-md); border: 1px solid var(--glass-border); background: rgb(255 255 255 / .03); min-width: 0; }
  .lc-gifts li > div { display: flex; flex-direction: column; min-width: 0; }
  .lc-gifts li b { overflow-wrap: anywhere; font-weight: 400; }
  .lc-gifts .slot { width: 48px; height: 48px; border-radius: 12px; }
  .vd-locked { opacity: .45; pointer-events: none; filter: grayscale(.6); user-select: none; }
  .vd-char { text-align: center; }
  .vd-name { font-family: var(--font-display); font-size: 1.3rem; color: var(--text-hi); overflow-wrap: anywhere; }
  .vd-power { font-family: var(--font-display); font-size: clamp(2rem, 7vw, 3.2rem); color: var(--gold-200); text-shadow: 0 0 22px rgb(255 184 77 / .45); }
  .vd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: var(--s-3); }
  .vd-card { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-2); text-align: left; }
  .vd-card.achieved { opacity: 1; border-color: rgb(79 220 178 / .4); }
  .vd-card.highest { border-color: var(--gold-400, #ffb84d); box-shadow: 0 0 22px rgb(255 184 77 / .35); }
  .vd-target { font-family: var(--font-display); font-size: 1.7rem; color: var(--text-hi); }
  .vd-status { color: var(--text-mute); font-size: .95rem; }
  .vd-rw .slot { width: 100%; height: auto; aspect-ratio: 1; border-radius: 10px; overflow: hidden; }
  .vd-msg { width: 100%; }
  .rank-pos { display: inline-grid; place-items: center; min-width: 34px; height: 34px; border-radius: 50%; font-family: var(--font-display); color: var(--text-soft); border: 1px solid var(--glass-border); }
  .table tr.mine td { background: rgb(79 220 178 / .1); }
  .tabs .tab { min-height: 44px; display: inline-flex; align-items: center; }
  .lc-modal-foot { margin-top: var(--s-4); text-align: center; display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }
  @media (max-width: 640px) {
    .lc-alert { align-items: flex-start; }
    .rank-pos { min-width: 30px; height: 30px; }
  }
  .pz-ed { display: grid; gap: var(--s-2); }
  #rk-server-wrap[hidden] { display: none; }
  .pz-row { display: grid; grid-template-columns: 140px minmax(0, 1fr) 140px auto; gap: var(--s-2); align-items: center; }
  .pz-row .input { min-height: 40px; }
  .pz-name { overflow-wrap: anywhere; font-size: .98rem; }
  .pz-name.bad { color: var(--cinnabar-400); }
  .pz-foot { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
  .pz-group { display: grid; gap: var(--s-3); }
  .pz-group > summary { cursor: pointer; font-family: var(--font-display); color: var(--gold-200); min-height: 40px; display: flex; align-items: center; gap: var(--s-3); }
  .pz-tag { font-size: .85rem; color: var(--text-mute); }
  @media (max-width: 640px) {
    .pz-row { grid-template-columns: 116px minmax(0, 1fr) 96px auto; }
    .pz-row .pz-name { grid-column: 1 / -1; order: 5; }
  }
  .sk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s-4); }
}
:root body .vd-card:not(.achieved) { opacity: 1; }
:root body .vd-card:not(.achieved) .vd-target { color: var(--text-soft); }
:root body .vd-card:not(.achieved) button[disabled] { display: none; }
:root body .vd-card .vd-target { font-size: 1.25rem; line-height: 1.2; }
:root body .vd-card .vd-status { font-size: .8125rem; }
:root body .vd-rw .row { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px !important; }
:root body .vd-rw .slot { width: 100%; height: auto; }
:root body .vd-rw .slot .qty { position: absolute; inset: auto 0 0; text-align: center; font-size: .6875rem; line-height: 1.35; padding: 0 1px; color: #fff; background: rgb(3 18 13 / .78); text-shadow: none; }
@media (max-width: 600px) {
  :root body .vd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  :root body .vd-card { padding: 10px; }
  :root body .vd-rw .row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}