/* P4: Đua Top Lực Chiến, Boss Madara, Vinh Danh Lực Chiến — chỉ dùng token của app.css */
@layer components {
  /* ---------- Boss Madara ---------- */
  .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); }

  /* ---------- Đua Top Lực Chiến / Vinh Danh ---------- */
  .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(150px, 1fr)); gap: var(--s-3); }
  .vd-card { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); text-align: center; opacity: .6; }
  .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: 44px; height: 44px; border-radius: 12px; }
  .vd-msg { width: 100%; }

  /* ---------- Bảng xếp hạng ---------- */
  .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); }
  .rank-pos.r1 { background: linear-gradient(145deg, var(--gold-300), #e09a2a); color: #1b1304; border-color: var(--gold-200); }
  .rank-pos.r2 { background: linear-gradient(145deg, #e8f0ee, #9fb3aa); color: #0c1a17; border-color: #fff; }
  .rank-pos.r3 { background: linear-gradient(145deg, #e9a56b, #a5652c); color: #1b0e03; border-color: #f3c79f; }
  .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; } }

  /* ---------- Quản trị: editor quà ---------- */
  .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); }
}