/* components.css — các khối dùng lại: chữ truyện tranh, nút, huy hiệu, thẻ, thanh, hình nhân vật */

/* ---------- CHỮ TRUYỆN TRANH (.comic) ----------
   3 lớp: quầng ngoài (::after) → viền (::before) → chữ tô chuyển màu (span).
   Đổi màu bằng biến --fill / --stroke / --halo. */
.comic {
  position: relative; display: inline-block; isolation: isolate;
  font-family: var(--font-fx); font-weight: 800; line-height: 1.08; white-space: nowrap; letter-spacing: .01em;
  padding: 0 .14em;
  --fill: var(--fill-title); --stroke: var(--stroke-title); --halo: transparent; --sw: .17em; --hw: .36em;
}
.comic > span {
  position: relative; z-index: 2; display: inline-block; padding: .22em 0 .16em; margin: -.22em 0 -.16em;
  background: var(--fill); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.comic::before, .comic::after {
  content: attr(data-text); position: absolute; left: 0; top: 0; padding: inherit; white-space: nowrap;
  stroke-linejoin: round; paint-order: stroke fill;
}
.comic::before { z-index: 1; color: var(--stroke); -webkit-text-stroke: var(--sw) var(--stroke); }
.comic::after  { z-index: 0; color: var(--halo); -webkit-text-stroke: var(--hw) var(--halo); }
[data-theme="anime"] .comic { letter-spacing: .04em; }

.comic--title { --fill: var(--fill-title); --stroke: var(--stroke-title); }
.comic--crit  { --fill: var(--fill-crit);  --stroke: var(--stroke-crit);  --halo: #fff; }
.comic--dmg   { --fill: var(--fill-dmg);   --stroke: var(--stroke-dmg);   --halo: var(--halo-dmg); --sw: .14em; --hw: .3em; font-family: var(--font-num); }
.comic--combo { --fill: var(--fill-combo); --stroke: var(--stroke-combo); --halo: #fff; }
.comic--skill { --fill: var(--fill-skill); --stroke: var(--stroke-skill); --halo: #fff; --hw: .3em; }
.comic--sm { font-size: .58em; }
.comic--xl { font-size: 1.25em; }

/* ---------- BIỂU TƯỢNG ---------- */
.ico { width: 1.4em; height: 1.4em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ico .fill { fill: currentColor; stroke-width: 1.4; }

/* ---------- NÚT ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap); padding: 10px 20px; border-radius: var(--radius-pill);
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-md); line-height: 1.1; text-align: center;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast), filter var(--dur-fast);
}
.btn:active { transform: translateY(4px); }
.btn--primary, .btn--cta {
  background: var(--btn-fill); color: var(--btn-text); border: var(--bw-2) solid #fff;
  box-shadow: 0 6px 0 var(--btn-edge), 0 12px 18px var(--color-shadow); text-shadow: 0 2px 0 var(--btn-edge);
}
.btn--primary:active, .btn--cta:active { box-shadow: 0 2px 0 var(--btn-edge), 0 4px 8px var(--color-shadow); }
.btn--cta { width: 100%; min-height: 68px; padding: 12px 24px; font-size: var(--fs-xl); flex: none; overflow: hidden; }
.btn--cta::after { content: ""; position: absolute; left: 8%; right: 8%; top: 5px; height: 36%; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0)); pointer-events: none; }
.btn--secondary {
  background: var(--color-surface-2); color: var(--color-primary-dark); border: var(--bw-2) solid var(--color-outline);
  box-shadow: 0 5px 0 var(--color-outline);
}
.btn--secondary:active { box-shadow: 0 1px 0 var(--color-outline); }
.btn--ghost { background: rgba(255,255,255,.55); color: var(--color-text); border: var(--bw-1) solid rgba(255,255,255,.9); }
.btn--reset { align-self: center; flex: none; font-size: var(--fs-sm); padding: 6px 18px; background: rgba(255,255,255,.78); color: var(--color-text-muted); }

/* ---------- HỘP HỎI LẠI (trước khi làm việc không lấy lại được) ---------- */
.sheetveil { position: fixed; inset: 0; z-index: var(--z-popup); display: grid; place-items: center; padding: var(--space-4); background: rgba(44, 28, 96, .5); animation: fade-in .2s both; }
.sheet {
  width: min(100%, 360px); display: flex; flex-direction: column; gap: 10px; padding: 22px 18px 18px; text-align: center;
  background: var(--color-surface); border: var(--bw-4) solid var(--color-accent); border-radius: var(--radius-xl);
  box-shadow: 0 8px 0 var(--color-accent-dark), 0 22px 40px rgba(0,0,0,.3); animation: tip-in .4s var(--ease-bounce) both;
}
.sheet__title { font-family: var(--font-head); font-size: var(--fs-xl); line-height: 1.15; color: var(--color-primary-dark); }
.sheet__text { font-size: var(--fs-sm); color: var(--color-text); line-height: 1.4; margin-bottom: 4px; }

.iconbtn {
  position: relative; flex: none; width: var(--tap); height: var(--tap); display: inline-grid; place-items: center;
  border-radius: 50%; background: var(--color-surface-2); color: var(--color-primary-dark);
  border: var(--bw-2) solid var(--color-outline); box-shadow: 0 4px 0 var(--color-outline);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.iconbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--color-outline); }
.iconbtn--ghost { visibility: hidden; }
.holdring {
  position: absolute; inset: -7px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: conic-gradient(var(--color-primary) var(--p, 0%), rgba(255,255,255,.7) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
}
.is-holding .holdring { opacity: 1; animation: hold-fill 3s linear forwards; }

/* ---------- THANH TRÊN ---------- */
.topbar { display: flex; align-items: center; gap: var(--space-2); min-height: 52px; flex: none; }
.topbar__title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.topbar__right { display: flex; gap: var(--space-2); min-width: var(--tap); justify-content: flex-end; }
.title--bar, .worldtag {
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-lg); line-height: 1.15; text-align: center;
  color: #fff; background: var(--color-primary); padding: 5px 18px; border-radius: var(--radius-pill);
  border: var(--bw-2) solid #fff; box-shadow: 0 4px 0 var(--color-primary-dark); text-shadow: 0 2px 0 var(--color-primary-dark);
}
.worldtag { font-size: var(--fs-md); }
.subtitle { align-self: center; text-align: center; font-size: var(--fs-sm); color: var(--color-text); background: rgba(255,255,255,.86); padding: 4px 14px; border-radius: var(--radius-lg); }
.section-label { align-self: center; font-family: var(--font-head); font-size: var(--fs-md); font-weight: 800; color: var(--color-ink); text-align: center; background: rgba(255,255,255,.86); padding: 2px 16px; border-radius: 999px; }

/* ---------- NHÃN, HUY HIỆU ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--color-surface-2); border: var(--bw-1) solid var(--color-outline);
  font-size: var(--fs-sm); font-weight: 800; color: var(--color-text); white-space: nowrap;
}
.chip .ico { width: 1.15em; height: 1.15em; }
.chip--star .ico { color: var(--color-gold); }
.chip--ok .ico { color: var(--color-success); stroke-width: 3.2; }
.chip--fast { border-color: var(--color-info); }

.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 12px 3px 8px; border-radius: var(--radius-pill);
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-sm); line-height: 1.2; white-space: nowrap;
  border: var(--bw-1) solid #fff; box-shadow: 0 3px 0 rgba(0,0,0,.16);
}
.badge .ico { width: 1.05em; height: 1.05em; }
.badge--rank[data-rank="bronze"] { background: linear-gradient(180deg, var(--color-bronze-2), var(--color-bronze)); color: #fff; text-shadow: 0 1px 0 var(--color-bronze-ink); }
.badge--rank[data-rank="silver"] { background: linear-gradient(180deg, #fff, var(--color-silver-2) 40%, var(--color-silver)); color: var(--color-silver-ink); }
.badge--rank[data-rank="gold"]   { background: linear-gradient(180deg, var(--color-gold-2), var(--color-gold)); color: var(--color-gold-ink); }
.badge--rank[data-rank="diamond"] { background: linear-gradient(135deg, var(--color-diamond-2), var(--color-diamond) 48%, var(--color-diamond-3)); color: var(--color-diamond-ink); }
.badge--boss { background: linear-gradient(180deg, #D7B4FF, var(--color-magic)); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.25); }

.medal {
  width: 30px; height: 30px; flex: none; display: inline-grid; place-items: center; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 2px 0 rgba(0,0,0,.18); color: #fff;
}
.medal .ico { width: 62%; height: 62%; }
.medal[data-rank="bronze"] { background: linear-gradient(180deg, var(--color-bronze-2), var(--color-bronze)); }
.medal[data-rank="silver"] { background: linear-gradient(180deg, var(--color-silver-2), var(--color-silver)); }
.medal[data-rank="gold"]   { background: linear-gradient(180deg, var(--color-gold-2), var(--color-gold)); }
.medal[data-rank="diamond"] { background: linear-gradient(135deg, var(--color-diamond-2), var(--color-diamond) 48%, var(--color-diamond-3)); color: var(--color-diamond-ink); }
.medal[data-state="open"]   { opacity: .55; box-shadow: none; outline: 2px dashed rgba(0,0,0,.18); outline-offset: 1px; }
.medal[data-state="locked"] { background: var(--color-lock); opacity: .5; box-shadow: none; }
.medal[data-state="earned"] { box-shadow: 0 2px 0 rgba(0,0,0,.18), 0 0 0 3px rgba(255,255,255,.8); }

.tagnew {
  position: absolute; top: -11px; right: 12px; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  background: var(--color-primary); color: #fff; padding: 2px 9px; border-radius: 999px; border: 2px solid #fff;
}

/* ---------- BONG BÓNG LỜI THOẠI ---------- */
.bubble {
  position: relative; background: #fff; color: var(--color-text); font-weight: 800; text-align: center; line-height: 1.3;
  border: var(--bw-2) solid var(--color-outline); border-radius: var(--radius-lg); padding: 10px 16px;
  box-shadow: 0 4px 0 var(--color-outline);
}
.bubble b { color: var(--color-primary-dark); }
.bubble--hero::after {
  content: ""; position: absolute; left: 50%; bottom: -11px; width: 18px; height: 18px; margin-left: -9px;
  background: #fff; border-right: var(--bw-2) solid var(--color-outline); border-bottom: var(--bw-2) solid var(--color-outline);
  transform: rotate(45deg);
}

/* ---------- THANH ---------- */
.bar { height: 20px; border-radius: 999px; background: #2A2150; border: 3px solid #fff; box-shadow: 0 3px 0 rgba(0,0,0,.2); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: inherit; background: var(--color-energy); box-shadow: inset 0 4px 0 rgba(255,255,255,.35); transition: width .5s var(--ease-impact); }

.rage { position: relative; display: flex; align-items: center; padding-right: 14px; }
.rage__track {
  flex: 1; height: 22px; border-radius: 999px; background: #fff; border: 3px solid var(--color-primary); overflow: hidden;
  box-shadow: 0 3px 0 rgba(0,0,0,.14);
}
.rage__track > i {
  display: block; height: 100%; width: 0; border-radius: inherit; background: var(--color-rage);
  box-shadow: inset 0 4px 0 rgba(255,255,255,.45); transition: width .45s var(--ease-bounce);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(20% - 3px), rgba(0,0,0,.55) calc(20% - 3px) 20%);
}
.rage__star {
  position: absolute; right: -4px; top: 50%; width: 38px; height: 38px; margin-top: -19px; display: grid; place-items: center;
  border-radius: 50%; background: var(--color-primary); color: var(--color-accent); border: 3px solid #fff; box-shadow: 0 3px 0 rgba(0,0,0,.18);
}
.rage__star .ico { width: 64%; height: 64%; }

/* ---------- HÌNH NHÂN VẬT ---------- */
.art { position: relative; display: inline-grid; place-items: center; isolation: isolate; aspect-ratio: 1; }
.art::before {
  content: ""; position: absolute; inset: 6%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, var(--aura-2, #fff) 0, var(--aura, var(--color-accent)) 52%, transparent 71%); opacity: .8;
}
.art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(255,255,255,.95)) drop-shadow(0 8px 10px var(--color-shadow)); }
.art__num {
  position: absolute; right: 4%; bottom: 6%; min-width: 1.75em; height: 1.75em; padding: 0 .3em; display: grid; place-items: center;
  border-radius: 999px; background: var(--aura, var(--color-primary)); color: #fff; border: 2px solid #fff;
  font-family: var(--font-num); font-weight: 800; font-size: 1rem; line-height: 1; text-shadow: 0 1px 0 rgba(0,0,0,.3); box-shadow: 0 2px 0 rgba(0,0,0,.2);
}
/* hạng Kim Cương: hình cấp Vàng + hào quang kim cương xoay và lấp lánh */
.art--diamond::before {
  inset: -4%; opacity: .95;
  background: conic-gradient(from 0deg, #EAFBFF, #5FD0FF, #C4A6FF, #FF9CE0, #FFE680, #EAFBFF);
  -webkit-mask: radial-gradient(circle, #000 0 46%, transparent 70%); mask: radial-gradient(circle, #000 0 46%, transparent 70%);
  animation: spin 7s linear infinite;
}
.art--diamond::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; animation: twinkle 1.3s ease-in-out infinite;
  background:
    radial-gradient(circle, #fff 0 2.5px, transparent 3.5px) 14% 18% / 100% 100% no-repeat,
    radial-gradient(circle, #fff 0 3px, transparent 4px) 86% 26% / 100% 100% no-repeat,
    radial-gradient(circle, #fff 0 2px, transparent 3px) 78% 82% / 100% 100% no-repeat,
    radial-gradient(circle, #fff 0 3px, transparent 4px) 20% 76% / 100% 100% no-repeat,
    radial-gradient(circle, #EAFBFF 0 2px, transparent 3px) 50% 6% / 100% 100% no-repeat;
}
.art--diamond img { filter: drop-shadow(0 0 5px #EAFBFF) drop-shadow(0 0 12px var(--color-diamond)) drop-shadow(0 8px 10px var(--color-shadow)); }
.art.is-locked img { filter: brightness(0) opacity(.2); }
.art.is-locked::after { display: none; }
.art.is-locked.art--diamond::before { animation: none; background: var(--color-lock); }
.art.is-locked::before { opacity: .2; }
.art--hero { width: min(62vw, 270px); }
.art--hero .art__num { font-size: 1.5rem; }
.art--card { width: 100%; }
.art--sm { width: 72px; }
.art--slot { width: 100%; }
.art--battle { width: 100%; height: 100%; }

.oppart { position: relative; display: inline-grid; place-items: center; aspect-ratio: 1; flex: none; isolation: isolate; }
.oppart::before {
  content: ""; position: absolute; inset: 6%; z-index: -1; border-radius: 50%; opacity: .75;
  background: radial-gradient(circle, #fff 0, var(--opp-aura, #B98BFF) 52%, transparent 71%);
}
.oppart img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(255,255,255,.95)) drop-shadow(0 8px 10px var(--color-shadow)); }
.oppart.is-locked img { filter: brightness(0) opacity(.22); }
.oppart.is-locked::before { opacity: .15; }
.oppart--sm { width: 72px; }
.oppart--md { width: 100%; }
.oppart--xl { width: min(62%, 250px); }