@property --tier-rim-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

.character_tier_wrap {
  margin: 1.25rem 0 0;
  position: relative;
  z-index: 2;
  min-width: 0;
  max-width: 100%;
}

.character_tier_notice {
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(230, 230, 230, 0.9);
  border-radius: 16px;
  padding: 0.85rem 1rem;
  font-size: 0.85rem;
  text-align: center;
}

.character_tier_card {
  display: block;
  min-width: 0;
  max-width: 100%;
}

.character_tier_visual {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: stretch;
  min-width: 0;
}

.character_tier_holo {
  position: relative;
  isolation: isolate;
  border-radius: 16px;
  overflow: hidden;
  min-height: 248px;
  font-family: 'NexonShareGothic', 'NEXON Lv2 Gothic', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 0 0.75rem;
  text-align: center;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background: #120e0c;
  min-width: 0;
  max-width: 100%;
}

.character_tier_holo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  padding: 3px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.75;
}

.character_tier_holo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: color-dodge;
  background-size: 240% 240%;
}

.character_tier_holo_glow {
  position: absolute;
  inset: -16% -10% -6%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 48% 36%, var(--tier-glow, #c07048) 0%, transparent 62%);
  filter: blur(26px);
  opacity: 0.5;
  animation: tier_glow_breathe 8.4s ease-in-out infinite;
}

.character_tier_holo_glow--b {
  background: radial-gradient(circle at 64% 58%, var(--tier-hi, #fff) 0%, transparent 56%);
  filter: blur(32px);
  opacity: 0.32;
  animation-duration: 10.6s;
  animation-delay: -3s;
}

.character_tier_holo_spark,
.character_tier_holo_spark--b,
.character_tier_holo_spark--grain {
  display: none;
}

.character_tier_holo_hero {
  position: relative;
  width: 148px;
  height: 148px;
  flex-shrink: 0;
}

.character_tier_holo_stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  z-index: 8;
  pointer-events: none;
  display: none;
}

.character_tier_holo_stars span {
  position: absolute;
  width: 56px;
  height: 56px;
  animation: tier_star_flash 4.8s ease-in-out infinite;
  opacity: 0;
  transform-origin: 50% 50%;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 1))
    drop-shadow(0 0 6px rgba(255, 255, 255, 0.75))
    drop-shadow(0 0 12px rgba(255, 248, 210, 0.45));
  will-change: transform, opacity;
}

.character_tier_holo_stars span::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle, #fff 0 1px, rgba(255, 255, 255, 0.55) 2px, transparent 3.5px),
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.12) 18%, rgba(255, 255, 255, 0.9) 46%, #fff 50%, rgba(255, 255, 255, 0.9) 54%, rgba(255, 255, 255, 0.12) 82%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.12) 18%, rgba(255, 255, 255, 0.9) 46%, #fff 50%, rgba(255, 255, 255, 0.9) 54%, rgba(255, 255, 255, 0.12) 82%, transparent 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%, 100% 1.5px, 1.5px 100%;
}

/* 잎 본체(중앙~가장자리) 위에만 배치 — 티어별 개수는 data-tier 규칙에서 제어 */
.character_tier_holo_stars span { display: none; }
.character_tier_holo_stars span:nth-child(1) { top: 26%; left: 28%; }
.character_tier_holo_stars span:nth-child(2) { top: 16%; left: 52%; width: 40px; height: 40px; animation-delay: 1.1s; }
.character_tier_holo_stars span:nth-child(3) { top: 40%; left: 40%; width: 64px; height: 64px; animation-delay: 2.2s; }
.character_tier_holo_stars span:nth-child(4) { top: 34%; left: 20%; width: 44px; height: 44px; animation-delay: 3.3s; }
.character_tier_holo_stars span:nth-child(5) { top: 50%; left: 56%; width: 38px; height: 38px; animation-delay: 0.55s; }
.character_tier_holo_stars span:nth-child(6) { top: 22%; left: 62%; width: 34px; height: 34px; animation-delay: 0.9s; }
.character_tier_holo_stars span:nth-child(7) { top: 48%; left: 30%; width: 48px; height: 48px; animation-delay: 1.7s; }
.character_tier_holo_stars span:nth-child(8) { top: 12%; left: 38%; width: 30px; height: 30px; animation-delay: 2.4s; }

.character_tier_holo_emblem {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
  filter: drop-shadow(0 0 16px var(--tier-glow, #c07048));
  pointer-events: none;
}

.character_tier_holo_inner {
  position: relative;
  z-index: 4;
  padding: 0.35rem 0.85rem 0;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}

.character_tier_holo_league {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  z-index: 9;
  display: inline-block;
  padding: 0.1rem 0.42rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.14);
  pointer-events: none;
  line-height: 1.35;
}

.character_tier_holo_shine {
  width: 300%;
  height: 200%;
  position: absolute;
  inset: -25%;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background: linear-gradient(118deg, transparent 32%, var(--tier-hi, rgba(255, 255, 255, 0.4)) 50%, transparent 68%);
}

.character_tier_name {
  font-family: 'NexonShareGothic', 'NEXON Lv2 Gothic', sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 1.28rem;
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.character_tier_name--place {
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: #fde68a;
  text-shadow:
    0 0 18px rgba(251, 191, 36, 0.85),
    0 2px 12px rgba(0, 0, 0, 0.55);
}

.character_tier_score {
  font-size: 2.05rem;
  font-weight: 800;
  margin-top: 0.35rem;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.character_tier_holo_stats {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 0.2rem;
  min-height: 1.1em;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.character_tier_rank_now,
.character_tier_top_pct {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  opacity: 1;
  text-shadow: none;
}

.character_tier_rank_now:not([hidden]):not(:empty) + .character_tier_top_pct:not([hidden]):not(:empty)::before {
  content: " · ";
  opacity: 0.7;
}

.character_tier_row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  max-width: 100%;
}

.character_tier_crisis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 196, 120, 0.72);
  line-height: 1;
  cursor: help;
  opacity: 0.85;
  flex-shrink: 0;
}

.character_tier_crisis:hover,
.character_tier_crisis:focus-visible {
  opacity: 1;
  color: rgba(255, 210, 140, 0.95);
  outline: none;
}

.character_tier_crisis svg {
  display: block;
}

.character_tier_crisis[hidden] {
  display: none !important;
}

.character_tier_body {
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 0.85rem 0.9rem 0.7rem;
  color: #eee;
}

.character_tier_ranks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  margin-top: 0.75rem;
}

.character_tier_rank {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 0.42rem 0.35rem 0.4rem;
  text-align: center;
  min-width: 0;
}

.character_tier_rank_label {
  display: block;
  font-size: 0.68rem;
  color: rgba(220, 220, 220, 0.7);
}

.character_tier_rank_value {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
}

.character_tier_rank_total {
  display: block;
  font-size: 0.68rem;
  color: rgba(200, 200, 200, 0.7);
}

.tier_trend {
  margin-left: 0.15rem;
  font-size: 0.72rem;
  font-weight: 700;
}

.tier_trend--up { color: #5eead4; }
.tier_trend--down { color: #fb7185; }
.tier_trend--new { color: #fbbf24; }

.character_tier_radar_panel {
  display: flex;
  flex-direction: column;
  min-height: 248px;
  min-width: 0;
  max-width: 100%;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.character_tier_radar_caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.65rem;
  flex: 0 0 auto;
  min-width: 0;
  padding: 0.45rem 0.7rem 0.15rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(220, 220, 220, 0.7);
}

.character_tier_radar_wrap {
  flex: 1 1 auto;
  min-height: 248px;
  min-width: 0;
  width: 100%;
  position: relative;
}

.character_tier_radar_wrap canvas {
  display: block;
  max-width: 100% !important;
}

.character_tier_details {
  margin: 0.7rem 0 0;
}

.character_tier_details_toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  width: 100%;
  padding: 0.48rem 0.75rem;
  border-radius: 10px;
  border: 1px solid rgba(89, 221, 235, 0.38);
  background: rgba(55, 185, 209, 0.12);
  color: #7dd3fc;
  font-size: 0.8rem;
  font-weight: 700;
}

.character_tier_details_toggle::-webkit-details-marker {
  display: none;
}

.character_tier_details_toggle::after {
  content: '▾';
  font-size: 0.7rem;
}

.character_tier_details[open] > .character_tier_details_toggle::after {
  content: '▴';
}

.character_tier_details_close {
  display: none;
}

.character_tier_details[open] .character_tier_details_open {
  display: none;
}

.character_tier_details[open] .character_tier_details_close {
  display: inline;
}

.character_tier_details_toggle:hover {
  color: #fff;
  border-color: #59ddeb;
  background: rgba(55, 185, 209, 0.22);
}

.character_tier_axes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  margin-top: 0.45rem;
}

@media (min-width: 520px) {
  .character_tier_axes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 760px) {
  .character_tier_axes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.character_tier_axis {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.22rem;
  min-width: 0;
  padding: 0.55rem 0.35rem 0.5rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.character_tier_axis_main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  min-width: 0;
  width: 100%;
}

.character_tier_axis_name {
  color: rgba(230, 230, 230, 0.72);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.character_tier_axis_name[data-bs-toggle="tooltip"] {
  cursor: help;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.28);
}

.character_tier_axis_raw {
  font-size: 0.78rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #fff;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.character_tier_axis_pct {
  flex: 0 0 auto;
  font-size: 0.64rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(180, 220, 240, 0.65);
  white-space: nowrap;
}

.character_tier_axis_grade {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-size: 0;
  font-weight: 700;
  white-space: nowrap;
  position: relative;
  width: 32px;
  height: 32px;
}

.character_tier_axis_grade img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  flex-shrink: 0;
}

.character_tier_meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem 0.45rem;
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(210, 210, 220, 0.75);
}

.character_tier_meta_actions {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.character_tier_updated {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  color: rgba(255, 255, 255, 0.86);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.character_tier_updated[hidden] {
  display: none !important;
}

.character_tier_updated_label {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 0.2rem;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.character_tier_disclaimer {
  margin: 0.45rem 0 0;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(190, 195, 205, 0.72);
}

.character_tier_basis {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  margin: 0;
  color: rgba(220, 220, 230, 0.88);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.68rem;
  font-family: inherit;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  cursor: help;
  line-height: 1.35;
  white-space: nowrap;
}

.character_tier_basis:hover,
.character_tier_basis:focus {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.12);
}

.character_tier_share_btn {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.62rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.38);
  cursor: pointer;
  line-height: 1.35;
  letter-spacing: 0.03em;
}

.character_tier_share_btn:hover,
.character_tier_share_btn:focus {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(0, 0, 0, 0.55);
}

.character_tier_share_btn[hidden] {
  display: none !important;
}

.character_tier_rank_link {
  color: #7dd3fc;
  text-decoration: none;
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(125, 211, 252, 0.35);
}

.character_tier_rank_link:hover {
  color: #fff;
  border-color: #59ddeb;
}

/* tier palettes from upload/asset/tier leaf colors */
.character_tier_holo[data-tier="bronze"] {
  --tier-glow: #c07048;
  --tier-hi: #f0a070;
  --tier-deep: #1c100c;
  background: radial-gradient(ellipse at 50% 38%, #5b2e1c 0%, #1c100c 72%);
}
.character_tier_holo[data-tier="bronze"]::before {
  background: linear-gradient(160deg, #e0a078, #8a4a28 55%, #c07048);
  opacity: 0.55;
}
.character_tier_holo[data-tier="bronze"] .character_tier_holo_glow {
  opacity: 0.32;
}
.character_tier_holo[data-tier="bronze"] .character_tier_holo_emblem {
  filter: drop-shadow(0 0 8px rgba(192, 112, 72, 0.45));
}

.character_tier_holo[data-tier="silver"] {
  --tier-glow: #a8b8c8;
  --tier-hi: #e6eef8;
  --tier-deep: #12161c;
  background:
    linear-gradient(118deg, rgba(230, 238, 248, 0.12) 0%, transparent 34%, rgba(168, 184, 200, 0.14) 58%, transparent 82%),
    radial-gradient(ellipse at 50% 38%, #4a5560 0%, #12161c 72%);
  animation: tier_rim_spin 16s linear infinite;
}
.character_tier_holo[data-tier="silver"]::before {
  padding: 3px;
  background: conic-gradient(from var(--tier-rim-angle), #e8f0f8, #8a9aac, #d0dce8, #6a7888, #e8f0f8);
  opacity: 0.72;
}
.character_tier_holo[data-tier="silver"]::after {
  opacity: 0.22;
  mix-blend-mode: overlay;
  background: linear-gradient(115deg, transparent 18%, rgba(230, 238, 248, 0.42) 36%, rgba(168, 184, 200, 0.28) 48%, transparent 68%);
  animation: tier_holo_slide 14s linear infinite;
}
.character_tier_holo[data-tier="silver"] .character_tier_holo_glow {
  opacity: 0.4;
}
.character_tier_holo[data-tier="silver"] .character_tier_holo_spark,
.character_tier_holo[data-tier="silver"] .character_tier_holo_spark--b {
  opacity: 0.22;
}
.character_tier_holo[data-tier="silver"] .character_tier_holo_spark--grain {
  opacity: 0.12;
}
.character_tier_holo[data-tier="silver"] .character_tier_holo_shine {
  animation: tier_holo_sweep 10s ease-in-out infinite;
  opacity: 0;
}
.character_tier_holo[data-tier="silver"] .character_tier_holo_emblem {
  filter: drop-shadow(0 0 10px rgba(168, 184, 200, 0.55));
}

.character_tier_holo[data-tier="gold"] {
  --tier-glow: #f0b000;
  --tier-hi: #ffe878;
  --tier-deep: #1a1000;
  background:
    linear-gradient(118deg, rgba(255, 232, 120, 0.16) 0%, transparent 32%, rgba(240, 176, 0, 0.18) 54%, transparent 78%),
    radial-gradient(ellipse at 50% 38%, #7a4a00 0%, #1a1000 72%);
  box-shadow: 0 0 18px rgba(240, 176, 0, 0.28);
  animation: tier_rim_spin 11s linear infinite;
}
.character_tier_holo[data-tier="gold"]::before {
  padding: 3px;
  background: conic-gradient(from var(--tier-rim-angle), #ffe878, #f0b000, #8a5a00, #ffe078, #f0b000);
  opacity: 0.9;
}
.character_tier_holo[data-tier="gold"]::after {
  opacity: 0.3;
  background: linear-gradient(115deg, transparent 16%, rgba(255, 232, 120, 0.5) 34%, rgba(255, 180, 40, 0.32) 46%, rgba(255, 255, 220, 0.28) 54%, transparent 72%);
  animation: tier_holo_slide 12s linear infinite;
}
.character_tier_holo[data-tier="gold"] .character_tier_holo_spark,
.character_tier_holo[data-tier="gold"] .character_tier_holo_spark--b {
  opacity: 0.42;
}
.character_tier_holo[data-tier="gold"] .character_tier_holo_spark--grain {
  opacity: 0.22;
}
.character_tier_holo[data-tier="gold"] .character_tier_holo_stars {
  display: block;
}
.character_tier_holo[data-tier="gold"] .character_tier_holo_stars span:nth-child(-n+1) {
  display: block;
}
.character_tier_holo[data-tier="gold"] .character_tier_holo_shine {
  animation: tier_holo_sweep 6.8s ease-in-out infinite;
  background: linear-gradient(120deg, transparent 28%, var(--tier-hi) 50%, transparent 72%);
}
.character_tier_holo[data-tier="gold"] .character_tier_holo_emblem {
  filter: drop-shadow(0 0 16px var(--tier-glow));
}

.character_tier_holo[data-tier="platinum"] {
  --tier-glow: #4ad0e0;
  --tier-hi: #b8f8f8;
  --tier-deep: #021418;
  background:
    linear-gradient(118deg, rgba(184, 248, 248, 0.16) 0%, transparent 30%, rgba(74, 208, 224, 0.2) 52%, transparent 76%),
    radial-gradient(ellipse at 50% 38%, #0a5a68 0%, #021418 72%);
  box-shadow: 0 0 20px rgba(74, 208, 224, 0.32);
  animation: tier_rim_spin 9s linear infinite;
}
.character_tier_holo[data-tier="platinum"]::before {
  padding: 3px;
  background: conic-gradient(from var(--tier-rim-angle), #b8f8f8, #4ad0e0, #1a8898, #e8ffff, #4ad0e0);
  opacity: 0.92;
}
.character_tier_holo[data-tier="platinum"]::after {
  opacity: 0.32;
  background: linear-gradient(115deg, transparent 14%, rgba(184, 248, 248, 0.5) 32%, rgba(0, 220, 255, 0.28) 44%, rgba(255, 255, 255, 0.3) 54%, transparent 72%);
  animation: tier_holo_slide 11s linear infinite;
}
.character_tier_holo[data-tier="platinum"] .character_tier_holo_spark,
.character_tier_holo[data-tier="platinum"] .character_tier_holo_spark--b {
  opacity: 0.5;
}
.character_tier_holo[data-tier="platinum"] .character_tier_holo_spark--grain {
  opacity: 0.26;
}
.character_tier_holo[data-tier="platinum"] .character_tier_holo_stars {
  display: block;
}
.character_tier_holo[data-tier="platinum"] .character_tier_holo_stars span:nth-child(-n+2) {
  display: block;
}
.character_tier_holo[data-tier="platinum"] .character_tier_holo_shine {
  animation: tier_holo_sweep 5.8s ease-in-out infinite;
  background: linear-gradient(120deg, transparent 26%, #fff 48%, var(--tier-hi) 52%, transparent 74%);
}
.character_tier_holo[data-tier="platinum"] .character_tier_holo_emblem {
  filter: drop-shadow(0 0 16px var(--tier-glow));
}

.character_tier_holo[data-tier="diamond"] {
  --tier-glow: #3a78ff;
  --tier-hi: #b8f0ff;
  --tier-deep: #020818;
  background:
    linear-gradient(118deg, rgba(184, 240, 255, 0.18) 0%, transparent 28%, rgba(126, 200, 255, 0.2) 48%, transparent 70%, rgba(180, 120, 255, 0.12) 100%),
    radial-gradient(ellipse at 50% 38%, #0a2878 0%, #020818 72%);
  box-shadow: 0 0 24px rgba(58, 120, 255, 0.4);
  animation: tier_rim_spin 7s linear infinite;
}
.character_tier_holo[data-tier="diamond"]::before {
  padding: 3px;
  background: conic-gradient(from var(--tier-rim-angle), #b8f8ff, #3a78ff, #7ec8ff, #e8f8ff, #4a90ff, #b8f8ff);
  opacity: 0.95;
}
.character_tier_holo[data-tier="diamond"]::after {
  opacity: 0.36;
  background: linear-gradient(115deg, transparent 12%, rgba(255, 0, 200, 0.22) 28%, rgba(0, 255, 220, 0.38) 40%, rgba(184, 240, 255, 0.42) 50%, rgba(58, 120, 255, 0.28) 58%, transparent 74%);
  animation: tier_holo_slide 10s linear infinite;
}
.character_tier_holo[data-tier="diamond"] .character_tier_holo_spark,
.character_tier_holo[data-tier="diamond"] .character_tier_holo_spark--b {
  opacity: 0.62;
}
.character_tier_holo[data-tier="diamond"] .character_tier_holo_spark--grain {
  opacity: 0.34;
}
.character_tier_holo[data-tier="diamond"] .character_tier_holo_stars {
  display: block;
}
.character_tier_holo[data-tier="diamond"] .character_tier_holo_stars span:nth-child(-n+3) {
  display: block;
}
.character_tier_holo[data-tier="diamond"] .character_tier_holo_shine {
  animation: tier_holo_sweep 5.2s ease-in-out infinite;
  background: linear-gradient(120deg, transparent 24%, #fff 46%, #b8f0ff 54%, transparent 76%);
}
.character_tier_holo[data-tier="diamond"] .character_tier_holo_emblem {
  filter: drop-shadow(0 0 16px var(--tier-glow));
}

.character_tier_holo[data-tier="master"] {
  --tier-glow: #b040f0;
  --tier-hi: #e8a0ff;
  --tier-deep: #120018;
  background:
    linear-gradient(118deg, rgba(232, 160, 255, 0.2) 0%, transparent 28%, rgba(120, 80, 255, 0.18) 50%, transparent 72%, rgba(255, 208, 255, 0.12) 100%),
    radial-gradient(ellipse at 50% 38%, #4a0080 0%, #120018 72%);
  box-shadow: 0 0 28px rgba(176, 64, 240, 0.45);
  animation: tier_rim_spin 6s linear infinite, tier_master_breathe 6.4s ease-in-out infinite;
}
.character_tier_holo[data-tier="master"]::before {
  padding: 3px;
  background: conic-gradient(from var(--tier-rim-angle), #e8a0ff, #b040f0, #5a00a8, #ffd0ff, #b040f0);
  opacity: 0.95;
}
.character_tier_holo[data-tier="master"]::after {
  opacity: 0.28;
  mix-blend-mode: color-dodge;
  background:
    linear-gradient(115deg, transparent 8%, rgba(232, 160, 255, 0.38) 26%, rgba(0, 200, 255, 0.2) 40%, rgba(255, 255, 255, 0.32) 50%, rgba(176, 64, 240, 0.28) 62%, rgba(255, 208, 255, 0.22) 72%, transparent 86%),
    radial-gradient(circle at 30% 40%, rgba(232, 160, 255, 0.22) 0%, transparent 28%),
    radial-gradient(circle at 70% 60%, rgba(120, 80, 255, 0.18) 0%, transparent 26%);
  background-size: 240% 240%, 100% 100%, 100% 100%;
  animation: tier_master_wave 6.4s ease-in-out infinite;
}
.character_tier_holo[data-tier="master"] .character_tier_holo_glow {
  inset: -30% -22% -20%;
  opacity: 0.42;
  filter: blur(26px);
  transform-origin: 48% 38%;
  animation: tier_master_glow_pulse 6.4s ease-in-out infinite;
}
.character_tier_holo[data-tier="master"] .character_tier_holo_glow--b {
  inset: -30% -22% -20%;
  opacity: 0.28;
  transform-origin: 52% 62%;
  animation: tier_master_glow_pulse 6.4s ease-in-out infinite;
  animation-delay: -3.2s;
}
.character_tier_holo[data-tier="master"] .character_tier_holo_spark,
.character_tier_holo[data-tier="master"] .character_tier_holo_spark--b {
  opacity: 0.68;
}
.character_tier_holo[data-tier="master"] .character_tier_holo_spark--grain {
  opacity: 0.38;
}
.character_tier_holo[data-tier="master"] .character_tier_holo_stars {
  display: block;
}
.character_tier_holo[data-tier="master"] .character_tier_holo_stars span:nth-child(-n+4) {
  display: block;
}
.character_tier_holo[data-tier="master"] .character_tier_holo_shine {
  animation: tier_holo_sweep 4.8s ease-in-out infinite;
  background: linear-gradient(120deg, transparent 24%, #fff 47%, #e8a0ff 55%, transparent 76%);
}
.character_tier_holo[data-tier="master"] .character_tier_holo_emblem {
  filter: drop-shadow(0 0 16px var(--tier-glow));
}

.character_tier_holo[data-tier="grandmaster"] {
  --tier-glow: #e01818;
  --tier-hi: #ffd060;
  --tier-deep: #140000;
  background:
    linear-gradient(118deg, rgba(255, 208, 96, 0.18) 0%, transparent 28%, rgba(224, 24, 24, 0.2) 50%, transparent 72%, rgba(255, 106, 58, 0.12) 100%),
    radial-gradient(ellipse at 50% 38%, #6a0008 0%, #140000 72%);
  box-shadow: 0 0 32px rgba(224, 24, 24, 0.5);
  animation: tier_rim_spin 5s linear infinite, tier_gm_breathe 5.6s ease-in-out infinite;
}
.character_tier_holo[data-tier="grandmaster"]::before {
  padding: 3px;
  background: conic-gradient(from var(--tier-rim-angle), #ffd060, #e01818, #ff6a3a, #ffe08a, #8a0008, #e01818, #ffd060);
  opacity: 0.95;
}
.character_tier_holo[data-tier="grandmaster"]::after {
  opacity: 0.4;
  mix-blend-mode: color-dodge;
  background:
    linear-gradient(115deg, transparent 7%, rgba(255, 208, 96, 0.48) 24%, rgba(255, 80, 40, 0.34) 38%, rgba(255, 255, 255, 0.4) 50%, rgba(224, 24, 24, 0.32) 62%, rgba(255, 208, 96, 0.28) 72%, transparent 87%),
    radial-gradient(circle at 30% 40%, rgba(255, 208, 96, 0.28) 0%, transparent 28%),
    radial-gradient(circle at 70% 60%, rgba(224, 24, 24, 0.22) 0%, transparent 26%);
  background-size: 240% 240%, 100% 100%, 100% 100%;
  animation: tier_gm_wave 5.6s ease-in-out infinite;
}
.character_tier_holo[data-tier="grandmaster"] .character_tier_holo_glow {
  inset: -32% -24% -22%;
  opacity: 0.55;
  filter: blur(24px);
  transform-origin: 48% 38%;
  animation: tier_gm_glow_pulse 5.6s ease-in-out infinite;
}
.character_tier_holo[data-tier="grandmaster"] .character_tier_holo_glow--b {
  inset: -32% -24% -22%;
  opacity: 0.38;
  transform-origin: 52% 62%;
  animation: tier_gm_glow_pulse 5.6s ease-in-out infinite;
  animation-delay: -2.8s;
}
.character_tier_holo[data-tier="grandmaster"] .character_tier_holo_spark,
.character_tier_holo[data-tier="grandmaster"] .character_tier_holo_spark--b {
  opacity: 0.72;
}
.character_tier_holo[data-tier="grandmaster"] .character_tier_holo_spark--grain {
  opacity: 0.4;
}
.character_tier_holo[data-tier="grandmaster"] .character_tier_holo_stars {
  display: block;
}
.character_tier_holo[data-tier="grandmaster"] .character_tier_holo_stars span:nth-child(-n+6) {
  display: block;
}
.character_tier_holo[data-tier="grandmaster"] .character_tier_holo_shine {
  animation: tier_holo_sweep 4.4s ease-in-out infinite;
  background: linear-gradient(120deg, transparent 22%, #fff 44%, #ffd060 52%, #e01818 58%, transparent 78%);
}
.character_tier_holo[data-tier="grandmaster"] .character_tier_holo_emblem {
  filter: drop-shadow(0 0 16px var(--tier-glow));
}

.character_tier_holo[data-tier="challenger"] {
  --tier-glow: #f0b400;
  --tier-hi: #c8e8ff;
  --tier-deep: #120800;
  background:
    linear-gradient(118deg, rgba(255, 232, 120, 0.2) 0%, transparent 26%, rgba(200, 232, 255, 0.18) 48%, transparent 70%, rgba(240, 180, 0, 0.14) 100%),
    radial-gradient(ellipse at 50% 36%, #3a78c8 0%, transparent 42%),
    radial-gradient(ellipse at 50% 48%, #8a4a00 0%, #120800 74%);
  box-shadow: 0 0 36px rgba(240, 180, 0, 0.52);
  animation: tier_rim_spin 4.2s linear infinite, tier_challenger_breathe 4.8s ease-in-out infinite;
}
.character_tier_holo[data-tier="challenger"]::before {
  padding: 3px;
  background: conic-gradient(from var(--tier-rim-angle), #ffe878, #f0b400, #c8e8ff, #3a78c8, #ffe878, #f0b400, #c8e8ff, #ffe878);
  opacity: 0.95;
}
.character_tier_holo[data-tier="challenger"]::after {
  opacity: 0.55;
  mix-blend-mode: color-dodge;
  background:
    linear-gradient(115deg, transparent 6%, rgba(255, 232, 120, 0.55) 22%, rgba(0, 220, 255, 0.4) 38%, rgba(255, 255, 255, 0.5) 50%, rgba(240, 180, 0, 0.38) 62%, rgba(200, 232, 255, 0.35) 72%, transparent 88%),
    radial-gradient(circle at 30% 40%, rgba(255, 248, 200, 0.35) 0%, transparent 28%),
    radial-gradient(circle at 70% 60%, rgba(120, 200, 255, 0.28) 0%, transparent 26%);
  background-size: 240% 240%, 100% 100%, 100% 100%;
  animation: tier_challenger_wave 4.8s ease-in-out infinite;
}
.character_tier_holo[data-tier="challenger"] .character_tier_holo_glow {
  inset: -34% -26% -24%;
  opacity: 0.72;
  filter: blur(22px);
  transform-origin: 48% 38%;
  animation: tier_challenger_glow_pulse 4.8s ease-in-out infinite;
}
.character_tier_holo[data-tier="challenger"] .character_tier_holo_glow--b {
  inset: -34% -26% -24%;
  opacity: 0.5;
  transform-origin: 52% 62%;
  animation: tier_challenger_glow_pulse 4.8s ease-in-out infinite;
  animation-delay: -2.4s;
}
.character_tier_holo[data-tier="challenger"] .character_tier_holo_stars {
  display: block;
}
.character_tier_holo[data-tier="challenger"] .character_tier_holo_stars span {
  display: block;
  animation-name: tier_challenger_star;
  animation-duration: 3.2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 1))
    drop-shadow(0 0 8px rgba(255, 232, 120, 0.95))
    drop-shadow(0 0 14px rgba(120, 200, 255, 0.55));
}
.character_tier_holo[data-tier="challenger"] .character_tier_holo_stars span:nth-child(1) { animation-delay: 0s; }
.character_tier_holo[data-tier="challenger"] .character_tier_holo_stars span:nth-child(2) { animation-delay: 0.4s; }
.character_tier_holo[data-tier="challenger"] .character_tier_holo_stars span:nth-child(3) { animation-delay: 0.8s; }
.character_tier_holo[data-tier="challenger"] .character_tier_holo_stars span:nth-child(4) { animation-delay: 1.2s; }
.character_tier_holo[data-tier="challenger"] .character_tier_holo_stars span:nth-child(5) { animation-delay: 1.6s; }
.character_tier_holo[data-tier="challenger"] .character_tier_holo_stars span:nth-child(6) { animation-delay: 2s; }
.character_tier_holo[data-tier="challenger"] .character_tier_holo_stars span:nth-child(7) { animation-delay: 2.4s; }
.character_tier_holo[data-tier="challenger"] .character_tier_holo_stars span:nth-child(8) { animation-delay: 2.8s; }
.character_tier_holo[data-tier="challenger"] .character_tier_holo_shine {
  animation: tier_holo_sweep 3.8s ease-in-out infinite;
  background: linear-gradient(120deg, transparent 20%, #fff 42%, #ffe878 50%, #c8e8ff 58%, transparent 80%);
}
.character_tier_holo[data-tier="challenger"] .character_tier_holo_emblem {
  animation: tier_challenger_emblem 4.8s ease-in-out infinite;
}
.character_tier_holo[data-tier="challenger"] .character_tier_name,
.character_tier_holo[data-tier="challenger"] .character_tier_name--place {
  animation: tier_challenger_title_glow 4.8s ease-in-out infinite;
}

.character_tier_axis_grade.grade-challenger { color: #f0b400; }
.character_tier_axis_grade.grade-grandmaster { color: #e04030; }
.character_tier_axis_grade.grade-master { color: #c060f0; }
.character_tier_axis_grade.grade-diamond { color: #5a9cff; }
.character_tier_axis_grade.grade-platinum { color: #4ad0e0; }
.character_tier_axis_grade.grade-gold { color: #f0b000; }
.character_tier_axis_grade.grade-silver { color: #b8c4d0; }
.character_tier_axis_grade.grade-bronze { color: #c07048; }

/* icon foil shimmer — gold~challenger, same speed, intensity by tier */
.character_tier_axis_grade.grade-gold::after,
.character_tier_axis_grade.grade-platinum::after,
.character_tier_axis_grade.grade-diamond::after,
.character_tier_axis_grade.grade-master::after,
.character_tier_axis_grade.grade-grandmaster::after,
.character_tier_axis_grade.grade-challenger::after,
.tier_chip--gold::after,
.tier_chip--platinum::after,
.tier_chip--diamond::after,
.tier_chip--master::after,
.tier_chip--grandmaster::after,
.tier_chip--challenger::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 240% 100%;
  mix-blend-mode: screen;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  --tier-foil-lo: 0.2;
  --tier-foil-hi: 0.85;
  animation: tier_icon_foil 2.6s ease-in-out infinite;
}
.character_tier_axis_grade.grade-gold::after,
.character_tier_axis_grade.grade-platinum::after,
.character_tier_axis_grade.grade-diamond::after,
.character_tier_axis_grade.grade-master::after,
.character_tier_axis_grade.grade-grandmaster::after,
.character_tier_axis_grade.grade-challenger::after {
  width: 28px;
  height: 28px;
}
.character_tier_axis_grade.grade-gold::after,
.tier_chip--gold::after {
  --tier-foil-lo: 0.1;
  --tier-foil-hi: 0.42;
  background-image: linear-gradient(
    115deg,
    transparent 32%,
    rgba(255, 200, 80, 0.12) 42%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 220, 120, 0.35) 56%,
    transparent 70%
  );
  -webkit-mask-image: url("/upload/asset/tier/icon/gold.png");
  mask-image: url("/upload/asset/tier/icon/gold.png");
}
.character_tier_axis_grade.grade-platinum::after,
.tier_chip--platinum::after {
  --tier-foil-lo: 0.12;
  --tier-foil-hi: 0.52;
  background-image: linear-gradient(
    115deg,
    transparent 32%,
    rgba(100, 220, 230, 0.14) 42%,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(180, 248, 248, 0.4) 56%,
    transparent 70%
  );
  -webkit-mask-image: url("/upload/asset/tier/icon/platinum.png");
  mask-image: url("/upload/asset/tier/icon/platinum.png");
}
.character_tier_axis_grade.grade-diamond::after,
.tier_chip--diamond::after {
  --tier-foil-lo: 0.16;
  --tier-foil-hi: 0.68;
  background-image: linear-gradient(
    115deg,
    transparent 30%,
    rgba(120, 200, 255, 0.15) 40%,
    rgba(255, 255, 255, 0.85) 48%,
    rgba(184, 240, 255, 0.65) 52%,
    rgba(100, 160, 255, 0.22) 58%,
    transparent 70%
  );
  -webkit-mask-image: url("/upload/asset/tier/icon/diamond.png");
  mask-image: url("/upload/asset/tier/icon/diamond.png");
}
.character_tier_axis_grade.grade-master::after,
.tier_chip--master::after {
  --tier-foil-lo: 0.2;
  --tier-foil-hi: 0.8;
  background-image: linear-gradient(
    115deg,
    transparent 30%,
    rgba(200, 120, 255, 0.18) 40%,
    rgba(255, 255, 255, 0.92) 48%,
    rgba(232, 160, 255, 0.75) 52%,
    rgba(160, 80, 255, 0.26) 58%,
    transparent 70%
  );
  -webkit-mask-image: url("/upload/asset/tier/icon/master.png");
  mask-image: url("/upload/asset/tier/icon/master.png");
}
.character_tier_axis_grade.grade-grandmaster::after,
.tier_chip--grandmaster::after {
  --tier-foil-lo: 0.24;
  --tier-foil-hi: 0.9;
  background-image: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 120, 80, 0.2) 40%,
    rgba(255, 255, 255, 0.95) 48%,
    rgba(255, 208, 96, 0.82) 52%,
    rgba(224, 40, 40, 0.28) 58%,
    transparent 70%
  );
  -webkit-mask-image: url("/upload/asset/tier/icon/grand_master.png");
  mask-image: url("/upload/asset/tier/icon/grand_master.png");
}
.character_tier_axis_grade.grade-challenger::after,
.tier_chip--challenger::after {
  --tier-foil-lo: 0.3;
  --tier-foil-hi: 1;
  background-image: linear-gradient(
    115deg,
    transparent 28%,
    rgba(255, 220, 100, 0.22) 38%,
    rgba(255, 255, 255, 1) 47%,
    rgba(255, 232, 120, 0.85) 51%,
    rgba(200, 232, 255, 0.55) 55%,
    rgba(80, 160, 255, 0.22) 62%,
    transparent 72%
  );
  -webkit-mask-image: url("/upload/asset/tier/icon/challenger.png");
  mask-image: url("/upload/asset/tier/icon/challenger.png");
}
.tier_chip--gold::after,
.tier_chip--platinum::after,
.tier_chip--diamond::after,
.tier_chip--master::after,
.tier_chip--grandmaster::after,
.tier_chip--challenger::after {
  left: 0.2rem;
}

@keyframes tier_rim_spin {
  to { --tier-rim-angle: 360deg; }
}

@keyframes tier_glow_breathe {
  0%, 100% { opacity: 0.42; }
  50% { opacity: 0.62; }
}

@keyframes tier_holo_slide {
  0% { background-position: 0% 35%; }
  100% { background-position: 100% 65%; }
}

@keyframes tier_glitter_slide {
  from { background-position: 0 0, 10px 14px; }
  to { background-position: 22px 31px, -21px 45px; }
}

@keyframes tier_glitter_slide_rev {
  from { background-position: 0 0, 8px 8px; }
  to { background-position: -17px -27px, 27px -18px; }
}

@keyframes tier_grain_drift {
  from { background-position: 0 0, 7px 9px; }
  to { background-position: 7px 13px, -10px 18px; }
}

@keyframes tier_star_flash {
  0%, 100% { transform: scale(0.72); opacity: 0; }
  38% { transform: scale(1.12); opacity: 0.92; }
  58% { transform: scale(0.96); opacity: 0.45; }
  78% { transform: scale(0.82); opacity: 0.12; }
}

@keyframes tier_holo_sweep {
  0% { transform: translateX(-48%) rotate(12deg); opacity: 0; }
  12% { opacity: 0.3; }
  50% { transform: translateX(48%) rotate(12deg); opacity: 0.3; }
  62% { opacity: 0; }
  100% { transform: translateX(48%) rotate(12deg); opacity: 0; }
}

@keyframes tier_icon_foil {
  0%, 100% { background-position: 130% 50%; opacity: var(--tier-foil-lo, 0.2); }
  45% { background-position: -30% 50%; opacity: var(--tier-foil-hi, 0.85); }
  70% { background-position: -40% 50%; opacity: var(--tier-foil-lo, 0.2); }
}

@keyframes tier_challenger_star {
  0%, 100% { transform: scale(0.55) rotate(0deg); opacity: 0; }
  28% { transform: scale(1.25) rotate(8deg); opacity: 1; }
  42% { transform: scale(0.9) rotate(-4deg); opacity: 0.55; }
  58% { transform: scale(1.15) rotate(6deg); opacity: 0.85; }
  78% { transform: scale(0.7) rotate(0deg); opacity: 0.15; }
}

@keyframes tier_challenger_breathe {
  0%, 100% {
    box-shadow:
      0 0 28px rgba(240, 180, 0, 0.38),
      0 0 14px rgba(58, 120, 200, 0.22);
  }
  50% {
    box-shadow:
      0 0 58px rgba(240, 180, 0, 0.78),
      0 0 34px rgba(200, 232, 255, 0.58);
  }
}

@keyframes tier_gm_breathe {
  0%, 100% {
    box-shadow:
      0 0 24px rgba(224, 24, 24, 0.36),
      0 0 10px rgba(255, 208, 96, 0.18);
  }
  50% {
    box-shadow:
      0 0 48px rgba(224, 24, 24, 0.62),
      0 0 24px rgba(255, 208, 96, 0.42);
  }
}

@keyframes tier_master_breathe {
  0%, 100% {
    box-shadow:
      0 0 20px rgba(176, 64, 240, 0.3),
      0 0 8px rgba(232, 160, 255, 0.14);
  }
  50% {
    box-shadow:
      0 0 40px rgba(176, 64, 240, 0.55),
      0 0 18px rgba(232, 160, 255, 0.34);
  }
}

@keyframes tier_challenger_wave {
  0%, 100% {
    background-position: 8% 38%, 100% 100%, 100% 100%;
    opacity: 0.36;
  }
  50% {
    background-position: 92% 62%, 100% 100%, 100% 100%;
    opacity: 0.78;
  }
}

@keyframes tier_gm_wave {
  0%, 100% {
    background-position: 10% 40%, 100% 100%, 100% 100%;
    opacity: 0.26;
  }
  50% {
    background-position: 90% 60%, 100% 100%, 100% 100%;
    opacity: 0.52;
  }
}

@keyframes tier_master_wave {
  0%, 100% {
    background-position: 12% 42%, 100% 100%, 100% 100%;
    opacity: 0.18;
  }
  50% {
    background-position: 88% 58%, 100% 100%, 100% 100%;
    opacity: 0.4;
  }
}

@keyframes tier_challenger_glow_pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.86); }
  50% { opacity: 0.98; transform: scale(1.32); }
}

@keyframes tier_gm_glow_pulse {
  0%, 100% { opacity: 0.26; transform: scale(0.9); }
  50% { opacity: 0.72; transform: scale(1.22); }
}

@keyframes tier_master_glow_pulse {
  0%, 100% { opacity: 0.2; transform: scale(0.92); }
  50% { opacity: 0.55; transform: scale(1.16); }
}

@keyframes tier_challenger_emblem {
  0%, 100% {
    filter:
      drop-shadow(0 0 12px rgba(255, 232, 120, 0.95))
      drop-shadow(0 0 22px rgba(240, 180, 0, 0.75))
      drop-shadow(0 0 8px rgba(120, 200, 255, 0.28));
  }
  50% {
    filter:
      drop-shadow(0 0 8px rgba(255, 232, 120, 0.4))
      drop-shadow(0 0 14px rgba(240, 180, 0, 0.45))
      drop-shadow(0 0 18px rgba(120, 200, 255, 0.9))
      drop-shadow(0 0 28px rgba(200, 232, 255, 0.55));
  }
}

@keyframes tier_challenger_title_glow {
  0%, 100% {
    text-shadow:
      0 0 14px rgba(255, 232, 120, 0.85),
      0 0 6px rgba(200, 232, 255, 0.25),
      0 2px 12px rgba(0, 0, 0, 0.55);
  }
  50% {
    text-shadow:
      0 0 8px rgba(255, 232, 120, 0.4),
      0 0 16px rgba(200, 232, 255, 0.9),
      0 2px 12px rgba(0, 0, 0, 0.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .character_tier_holo,
  .character_tier_holo::before,
  .character_tier_holo::after,
  .character_tier_holo_shine,
  .character_tier_holo_spark,
  .character_tier_holo_spark--b,
  .character_tier_holo_spark--grain,
  .character_tier_holo_stars span,
  .character_tier_holo_emblem,
  .character_tier_holo_glow,
  .character_tier_holo_glow--b,
  .character_tier_holo[data-tier="challenger"] .character_tier_name,
  .character_tier_holo[data-tier="challenger"] .character_tier_name--place,
  .character_tier_axis_grade::after,
  .tier_chip::after {
    animation: none !important;
  }
  .character_tier_axis_grade::after,
  .tier_chip::after {
    opacity: 0.45;
  }
}

@media (max-width: 767px) {
  .character_tier_visual {
    grid-template-columns: 1fr;
  }
  .character_tier_holo,
  .character_tier_radar_panel {
    min-height: 0;
  }
  .character_tier_holo {
    max-width: 100%;
  }
  .character_tier_holo::before {
    padding: 3px;
  }
  .character_tier_holo_hero {
    width: 112px;
    height: 112px;
  }
  .character_tier_holo_emblem {
    width: 100%;
    height: 100%;
    margin: 0;
    align-self: auto;
    flex-shrink: 0;
  }
  .character_tier_holo_stars {
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .character_tier_name,
  .character_tier_name--place {
    font-size: 1.12rem;
  }
  .character_tier_score {
    font-size: 1.75rem;
  }
  .character_tier_radar_wrap {
    height: 248px;
    min-height: 248px;
  }
  .character_tier_ranks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .character_tier_rank_link {
    margin-left: 0;
  }
  .tier_ranking_row {
    flex-wrap: wrap;
    padding-right: 0;
    row-gap: 0.2rem;
  }
  .tier_ranking_row .ranking_trend {
    position: static;
    margin-left: auto;
  }
  .tier_ranking_row .ranking_name {
    flex: 1 1 auto;
    max-width: none;
  }
  .tier_ranking_row .ranking_class,
  .tier_ranking_row .ranking_level {
    display: none;
  }
}

/* ranking section (/character) */
.tier_ranking_page {
  max-width: 760px;
  padding: 1.25rem 0 2rem;
  margin-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  scroll-margin-top: 80px;
}

.tier_ranking_toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem 0.75rem;
  margin-bottom: 0.45rem;
}

.tier_ranking_disclaimer {
  margin: 0 0 0.85rem;
  color: rgba(200, 205, 215, 0.72);
  font-size: 0.78rem;
  line-height: 1.45;
  text-align: center;
}

.tier_ranking_heading {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.tier_ranking_title {
  margin: 0;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.tier_ranking_hint {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  padding: 0.1rem;
  line-height: 1;
  cursor: help;
}

.tier_ranking_hint:hover,
.tier_ranking_hint:focus {
  color: #fff;
}

.tier_league_tabs {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
}

.tier_league_tab {
  color: #ddd;
  text-decoration: none;
  padding: 0.28rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.tier_league_tab.active,
.tier_league_tab:hover {
  color: #fff;
  background: linear-gradient(180deg, #37b9d1, #45cde1);
  border-color: #59ddeb;
}

.tier_ranking_header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  letter-spacing: 0.02em;
}

.tier_ranking_sample {
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 768px) {
  .tier_ranking_page {
    margin-top: 1.25rem;
    padding: 1rem 0 1.5rem;
  }
  .tier_ranking_toolbar {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .tier_ranking_heading {
    justify-content: center;
  }
  .tier_ranking_header {
    justify-content: center;
    flex-wrap: wrap;
  }
  .tier_ranking_title {
    font-size: 1.12rem;
  }
}

.tier_ranking_panel {
  background: rgba(20, 24, 30, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  margin-bottom: 0.85rem;
  overflow: hidden;
}

.tier_ranking_panel_head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.7rem 1rem 0.35rem;
}

.tier_ranking_panel_title {
  font-size: 1.05rem;
  color: #fff;
  margin: 0;
}

.tier_ranking_panel_sub {
  font-size: 0.75rem;
  color: #f07167;
}

.tier_ranking_list {
  padding: 0.35rem 0.75rem 0.75rem;
}

.tier_ranking_empty {
  color: #9ca3af;
  font-size: 0.85rem;
  padding: 0.8rem 0.2rem;
}

.tier_ranking_row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  padding: 0.32rem 2.2rem 0.32rem 0.1rem;
  font-size: 13px;
  color: #e5e7eb;
  border-radius: 0.35rem;
}

.tier_ranking_row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.tier_ranking_row .ranking_meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tier_ranking_row .ranking_world_icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  object-fit: contain;
}

.tier_ranking_row .ranking_name {
  flex: 0 0 auto;
  min-width: 0;
  max-width: 9.5rem;
}

.tier_ranking_row .ranking_class {
  flex: 0 1 3.2rem;
  color: #9ca3af;
}

.tier_ranking_row .ranking_level,
.tier_ranking_row .ranking_score {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.tier_ranking_row .ranking_score {
  min-width: 3.4rem;
  text-align: right;
  color: #d1d5db;
}

.tier_ranking_row .ranking_name_link {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}

.tier_ranking_row .ranking_name_link:hover {
  color: #7dd3fc;
}

.tier_ranking_row .ranking_trend {
  position: absolute;
  right: 0;
  font-size: 0.75rem;
  font-weight: 700;
}

.tier_ranking_row .ranking_trend--new { color: #fbbf24; }
.tier_ranking_row .ranking_trend--up { color: #5eead4; }
.tier_ranking_row .ranking_trend--down { color: #fb7185; }

.tier_ranking_updated_at {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
}

.tier_ranking_updated_label {
  display: inline-block;
  margin-right: 0.2rem;
  padding: 0.05rem 0.4rem;
  border-radius: 0.2rem;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.tier_ranking_updated {
  display: none;
}

.tier_ranking_row .tier_chip {
  overflow: visible;
}

.tier_chip {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  font-size: 0.68rem;
  padding: 0.05rem 0.4rem 0.05rem 0.2rem;
  border-radius: 999px;
  flex-shrink: 0;
  white-space: nowrap;
  position: relative;
}

.tier_icon {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.tier_chip--challenger { background: rgba(240, 180, 0, 0.22); color: #f0d060; }
.tier_chip--grandmaster { background: rgba(224, 24, 24, 0.22); color: #ff7a6a; }
.tier_chip--master { background: rgba(176, 64, 240, 0.22); color: #d080ff; }
.tier_chip--diamond { background: rgba(58, 120, 255, 0.22); color: #8cbcff; }
.tier_chip--platinum { background: rgba(74, 208, 224, 0.2); color: #7ee8f0; }
.tier_chip--gold { background: rgba(240, 176, 0, 0.2); color: #f0c040; }
.tier_chip--silver { background: rgba(168, 184, 200, 0.18); color: #c8d4e0; }
.tier_chip--bronze { background: rgba(192, 112, 72, 0.22); color: #d09068; }

.tier_ranking_toggle {
  width: 100%;
  margin-top: 0.35rem;
  border: 0;
  background: transparent;
  color: #9ca3af;
  font-size: 0.8rem;
  cursor: pointer;
}

.tier_ranking_toggle:hover {
  color: #fff;
}

.tier_dist {
  margin-top: 1.25rem;
  padding: 0.9rem 1rem 1rem;
  background: rgba(20, 24, 30, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
}

.tier_dist_head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.tier_dist_title {
  margin: 0;
  color: #fff;
  font-size: 1.05rem;
}

.tier_dist_body {
  display: flex;
  align-items: center;
  gap: 1.25rem 1.75rem;
}

.tier_dist_chart_wrap {
  flex: 0 0 220px;
  width: 220px;
  height: 220px;
}

.tier_dist_legend {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 1rem;
}

.tier_dist_legend_item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.4rem;
  color: #e5e7eb;
  font-size: 0.8rem;
}

.tier_dist_swatch {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex-shrink: 0;
}

.tier_dist_legend_label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tier_dist_legend_pct {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

@media (max-width: 768px) {
  .tier_dist_body {
    flex-direction: column;
  }
  .tier_dist_legend {
    width: 100%;
    grid-template-columns: 1fr;
  }
}

.ranking_badge {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  flex-shrink: 0;
}

.ranking_badge--1 { background: #d4af37; color: #111; }
.ranking_badge--2 { background: #9ca3af; color: #111; }
.ranking_badge--3 { background: #b45309; color: #fff; }

.chart_tab_tier_wrap {
  height: 220px;
}

@font-face {
  font-family: 'MaplestoryShareBold';
  src: url('/inc/fonts/Maplestory-OTF-Bold.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'NexonShareGothic';
  src: url('/inc/fonts/NEXON-Lv2-Gothic-OTF.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.tier_share_modal {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: none;
}

.tier_share_modal.is-open {
  display: block;
}

.tier_share_backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 16, 0.72);
}

.tier_share_panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 24px));
  max-height: min(94vh, 860px);
  overflow: auto;
  background: #16181f;
  color: #e8edf4;
  border-radius: 18px;
  padding: 0.7rem 0.85rem 0.9rem;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.tier_share_handle {
  display: none;
  width: 36px;
  height: 4px;
  margin: 0.1rem auto 0.65rem;
  border-radius: 999px;
  background: #6c757d;
}

.tier_share_title {
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
  margin-bottom: 0.7rem;
}

.tier_share_card_scroll {
  display: flex;
  justify-content: center;
}

.tier_share_card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 360px;
  max-width: 100%;
  border-radius: 16px;
  padding: 0.85rem 0.9rem 0.7rem;
  color: #fff;
  text-align: center;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background: #120e0c;
  font-family: 'NexonShareGothic', 'NEXON Lv2 Gothic', sans-serif;
  --tier-glow: #c07048;
  --tier-hi: #f0a070;
  --tier-share-rim: linear-gradient(160deg, #e0a078, #8a4a28 55%, #c07048);
}

.tier_share_card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  padding: 3px;
  pointer-events: none;
  background: var(--tier-share-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.85;
}

.tier_share_glow {
  position: absolute;
  inset: -16% -10% -6%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 48% 36%, var(--tier-glow) 0%, transparent 62%);
  filter: blur(26px);
  opacity: 0.5;
}

.tier_share_glow--b {
  background: radial-gradient(circle at 64% 58%, var(--tier-hi) 0%, transparent 56%);
  filter: blur(32px);
  opacity: 0.32;
}

.tier_share_foil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.38;
  background:
    linear-gradient(118deg, transparent 22%, rgba(224, 160, 120, 0.22) 42%, rgba(192, 112, 72, 0.14) 56%, transparent 78%);
}

.tier_share_brand,
.tier_share_stage,
.tier_share_name,
.tier_share_chips,
.tier_share_grade,
.tier_share_ranks,
.tier_share_foot {
  position: relative;
  z-index: 2;
}

.tier_share_brand {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.15rem;
}

.tier_share_logo {
  width: 22px;
  height: 22px;
}

.tier_share_brand_name {
  font-family: 'MaplestoryShareBold', 'MaplestoryOTFBold', sans-serif;
  font-size: 0.92rem;
}

.tier_share_league {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.28);
}

.tier_share_stage {
  position: relative;
  height: 216px;
  margin: 0.05rem 0 0.1rem;
}

.tier_share_emblem {
  position: absolute;
  left: 50%;
  top: 4px;
  width: 148px;
  height: 148px;
  margin-left: -74px;
  object-fit: contain;
  z-index: 1;
  opacity: 0.9;
  filter: drop-shadow(0 0 16px var(--tier-glow));
  pointer-events: none;
}

.tier_share_char_wrap {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 260px;
  height: 185px;
  margin-left: -130px;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}

.tier_share_char {
  width: 480px;
  height: 480px;
  max-width: none;
  display: block;
  margin: -148px 0 0 -110px;
  pointer-events: none;
  object-fit: fill;
}

.tier_share_name {
  font-family: 'NexonShareGothic', 'NEXON Lv2 Gothic', sans-serif;
  font-weight: 700;
  font-size: 1.28rem;
  line-height: 1.2;
  word-break: break-all;
}

.tier_share_chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.28rem;
  margin: 0.4rem 0 0.5rem;
}

.tier_share_chip {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.3;
}

.tier_share_chip[hidden] {
  display: none !important;
}

.tier_share_world_icon {
  width: 14px;
  height: 14px;
}

.tier_share_grade {
  margin: 0.1rem 0.2rem 0.45rem;
  padding: 0.5rem 0.15rem 0.12rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.tier_share_tier_row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
}

.tier_share_tier {
  font-family: 'NexonShareGothic', 'NEXON Lv2 Gothic', sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--tier-hi);
  text-shadow: 0 0 16px var(--tier-glow), 0 1px 8px rgba(0, 0, 0, 0.5);
}

.tier_share_crisis {
  font-size: 0.62rem;
  font-weight: 700;
  color: #fb7185;
  background: rgba(251, 113, 133, 0.16);
  border: 1px solid rgba(251, 113, 133, 0.45);
  border-radius: 999px;
  padding: 0.08rem 0.42rem;
}

.tier_share_crisis[hidden] {
  display: none !important;
}

.tier_share_score {
  font-family: 'NexonShareGothic', 'NEXON Lv2 Gothic', sans-serif;
  font-size: 2.05rem;
  font-weight: 700;
  margin: 0.08rem 0 0.18rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

.tier_share_rankline {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0;
  min-height: 0;
}

.tier_share_stat {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.52rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.3;
}

.tier_share_ranks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.3rem;
}

.tier_share_rank {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.32rem 0.2rem;
  min-width: 0;
}

.tier_share_rank_label {
  display: block;
  font-size: 0.62rem;
  color: rgba(200, 208, 218, 0.75);
}

.tier_share_rank_value {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  margin-top: 0.1rem;
}

.tier_share_foot {
  margin-top: 0.45rem;
  font-size: 0.68rem;
  opacity: 0.62;
  letter-spacing: 0.02em;
}

.tier_share_card[data-tier="bronze"] {
  --tier-glow: #c07048;
  --tier-hi: #f0a070;
  --tier-share-rim: linear-gradient(160deg, #e0a078, #8a4a28 55%, #c07048);
  background: radial-gradient(ellipse at 50% 38%, #5b2e1c 0%, #1c100c 72%);
}
.tier_share_card[data-tier="bronze"]::before { opacity: 0.55; }
.tier_share_card[data-tier="bronze"] .tier_share_foil {
  opacity: 0.28;
  background: linear-gradient(118deg, transparent 24%, rgba(224, 160, 120, 0.28) 46%, transparent 72%);
}

.tier_share_card[data-tier="silver"] {
  --tier-glow: #a8b8c8;
  --tier-hi: #e6eef8;
  --tier-share-rim: conic-gradient(#e8f0f8, #8a9aac, #d0dce8, #6a7888, #e8f0f8);
  background:
    linear-gradient(118deg, rgba(230, 238, 248, 0.12) 0%, transparent 34%, rgba(168, 184, 200, 0.14) 58%, transparent 82%),
    radial-gradient(ellipse at 50% 38%, #4a5560 0%, #12161c 72%);
}
.tier_share_card[data-tier="silver"]::before { opacity: 0.72; }
.tier_share_card[data-tier="silver"] .tier_share_foil {
  opacity: 0.34;
  background:
    linear-gradient(118deg, transparent 18%, rgba(230, 238, 248, 0.32) 38%, rgba(168, 184, 200, 0.16) 52%, transparent 74%),
    radial-gradient(ellipse at 72% 22%, rgba(200, 220, 240, 0.18) 0%, transparent 42%);
}

.tier_share_card[data-tier="gold"] {
  --tier-glow: #f0b000;
  --tier-hi: #ffe878;
  --tier-share-rim: conic-gradient(#ffe878, #f0b000, #8a5a00, #ffe078, #f0b000);
  background:
    linear-gradient(118deg, rgba(255, 232, 120, 0.16) 0%, transparent 32%, rgba(240, 176, 0, 0.18) 54%, transparent 78%),
    radial-gradient(ellipse at 50% 38%, #7a4a00 0%, #1a1000 72%);
  box-shadow: 0 0 18px rgba(240, 176, 0, 0.28);
}
.tier_share_card[data-tier="gold"]::before { opacity: 0.9; }
.tier_share_card[data-tier="gold"] .tier_share_foil {
  opacity: 0.42;
  background:
    linear-gradient(118deg, transparent 16%, rgba(255, 232, 120, 0.38) 34%, rgba(255, 255, 255, 0.16) 48%, rgba(80, 200, 255, 0.1) 58%, transparent 76%),
    radial-gradient(ellipse at 26% 18%, rgba(255, 232, 120, 0.2) 0%, transparent 40%);
}
.tier_share_card[data-tier="gold"] .tier_share_emblem {
  filter:
    drop-shadow(-1px 0 0 rgba(80, 200, 255, 0.22))
    drop-shadow(1px 0 0 rgba(255, 200, 60, 0.28))
    drop-shadow(0 0 16px var(--tier-glow));
}

.tier_share_card[data-tier="platinum"] {
  --tier-glow: #4ad0e0;
  --tier-hi: #b8f8f8;
  --tier-share-rim: conic-gradient(#b8f8f8, #4ad0e0, #1a8898, #e8ffff, #4ad0e0);
  background:
    linear-gradient(118deg, rgba(184, 248, 248, 0.16) 0%, transparent 30%, rgba(74, 208, 224, 0.2) 52%, transparent 76%),
    radial-gradient(ellipse at 50% 38%, #0a5a68 0%, #021418 72%);
  box-shadow: 0 0 20px rgba(74, 208, 224, 0.32);
}
.tier_share_card[data-tier="platinum"]::before { opacity: 0.92; }
.tier_share_card[data-tier="platinum"] .tier_share_foil {
  opacity: 0.48;
  background:
    linear-gradient(118deg, transparent 14%, rgba(184, 248, 248, 0.36) 32%, rgba(0, 220, 255, 0.16) 44%, rgba(255, 255, 255, 0.18) 54%, rgba(255, 232, 120, 0.08) 62%, transparent 78%),
    radial-gradient(ellipse at 24% 20%, rgba(74, 208, 224, 0.22) 0%, transparent 44%),
    radial-gradient(ellipse at 78% 68%, rgba(232, 255, 255, 0.16) 0%, transparent 42%);
}
.tier_share_card[data-tier="platinum"] .tier_share_emblem {
  filter:
    drop-shadow(-1px 0 0 rgba(80, 200, 255, 0.32))
    drop-shadow(1px 0 0 rgba(255, 232, 120, 0.18))
    drop-shadow(0 0 16px var(--tier-glow));
}

.tier_share_card[data-tier="diamond"] {
  --tier-glow: #3a78ff;
  --tier-hi: #b8f0ff;
  --tier-share-rim: conic-gradient(#b8f8ff, #3a78ff, #7ec8ff, #e8f8ff, #4a90ff, #b8f8ff);
  background:
    linear-gradient(118deg, rgba(184, 240, 255, 0.18) 0%, transparent 28%, rgba(126, 200, 255, 0.2) 48%, transparent 70%, rgba(180, 120, 255, 0.12) 100%),
    radial-gradient(ellipse at 50% 38%, #0a2878 0%, #020818 72%);
  box-shadow: 0 0 24px rgba(58, 120, 255, 0.4);
}
.tier_share_card[data-tier="diamond"]::before { opacity: 0.95; }
.tier_share_card[data-tier="diamond"] .tier_share_foil {
  opacity: 0.52;
  background:
    linear-gradient(118deg, transparent 12%, rgba(255, 80, 180, 0.16) 28%, rgba(0, 220, 255, 0.28) 42%, rgba(184, 240, 255, 0.26) 52%, rgba(255, 232, 120, 0.1) 60%, transparent 76%),
    radial-gradient(ellipse at 22% 18%, rgba(80, 200, 255, 0.24) 0%, transparent 42%),
    radial-gradient(ellipse at 76% 72%, rgba(160, 120, 255, 0.16) 0%, transparent 40%);
}
.tier_share_card[data-tier="diamond"] .tier_share_emblem {
  filter:
    drop-shadow(-1.5px 0 0 rgba(80, 200, 255, 0.4))
    drop-shadow(1.5px 0 0 rgba(255, 80, 180, 0.22))
    drop-shadow(0 0 16px var(--tier-glow));
}

.tier_share_card[data-tier="master"] {
  --tier-glow: #b040f0;
  --tier-hi: #e8a0ff;
  --tier-share-rim: conic-gradient(#e8a0ff, #b040f0, #5a00a8, #ffd0ff, #b040f0);
  background:
    linear-gradient(118deg, rgba(232, 160, 255, 0.2) 0%, transparent 28%, rgba(120, 80, 255, 0.18) 50%, transparent 72%, rgba(255, 208, 255, 0.12) 100%),
    radial-gradient(ellipse at 50% 38%, #4a0080 0%, #120018 72%);
  box-shadow: 0 0 28px rgba(176, 64, 240, 0.45);
}
.tier_share_card[data-tier="master"]::before { opacity: 0.95; }
.tier_share_card[data-tier="master"] .tier_share_foil {
  opacity: 0.54;
  background:
    linear-gradient(118deg, transparent 10%, rgba(232, 160, 255, 0.32) 26%, rgba(0, 200, 255, 0.18) 40%, rgba(255, 255, 255, 0.2) 50%, rgba(176, 64, 240, 0.2) 62%, rgba(255, 232, 120, 0.08) 72%, transparent 86%),
    radial-gradient(ellipse at 28% 24%, rgba(232, 160, 255, 0.24) 0%, transparent 40%),
    radial-gradient(ellipse at 72% 66%, rgba(0, 200, 255, 0.16) 0%, transparent 38%);
}
.tier_share_card[data-tier="master"] .tier_share_emblem {
  filter:
    drop-shadow(-1.5px 0 0 rgba(80, 200, 255, 0.38))
    drop-shadow(1.5px 0 0 rgba(232, 160, 255, 0.4))
    drop-shadow(0 0 16px var(--tier-glow));
}

.tier_share_card[data-tier="grandmaster"] {
  --tier-glow: #e01818;
  --tier-hi: #ffd060;
  --tier-share-rim: conic-gradient(#ffd060, #e01818, #ff6a3a, #ffe08a, #8a0008, #e01818, #ffd060);
  background:
    linear-gradient(118deg, rgba(255, 208, 96, 0.18) 0%, transparent 28%, rgba(224, 24, 24, 0.2) 50%, transparent 72%, rgba(255, 106, 58, 0.12) 100%),
    radial-gradient(ellipse at 50% 38%, #6a0008 0%, #140000 72%);
  box-shadow: 0 0 32px rgba(224, 24, 24, 0.5);
}
.tier_share_card[data-tier="grandmaster"]::before { opacity: 0.95; }
.tier_share_card[data-tier="grandmaster"] .tier_share_foil {
  opacity: 0.56;
  background:
    linear-gradient(118deg, transparent 8%, rgba(255, 208, 96, 0.36) 24%, rgba(255, 80, 40, 0.2) 38%, rgba(255, 255, 255, 0.22) 50%, rgba(224, 24, 24, 0.2) 62%, rgba(80, 200, 255, 0.08) 72%, transparent 86%),
    radial-gradient(ellipse at 26% 20%, rgba(255, 208, 96, 0.26) 0%, transparent 42%),
    radial-gradient(ellipse at 74% 70%, rgba(224, 24, 24, 0.2) 0%, transparent 40%);
}
.tier_share_card[data-tier="grandmaster"] .tier_share_emblem {
  filter:
    drop-shadow(-1.5px 0 0 rgba(80, 200, 255, 0.22))
    drop-shadow(1.5px 0 0 rgba(255, 208, 96, 0.4))
    drop-shadow(0 0 16px var(--tier-glow));
}

.tier_share_card[data-tier="challenger"] {
  --tier-glow: #f0b400;
  --tier-hi: #c8e8ff;
  --tier-share-rim: conic-gradient(#ffe878, #f0b400, #c8e8ff, #3a78c8, #ffe878, #f0b400, #c8e8ff, #ffe878);
  background:
    linear-gradient(118deg, rgba(255, 232, 120, 0.2) 0%, transparent 26%, rgba(200, 232, 255, 0.18) 48%, transparent 70%, rgba(240, 180, 0, 0.14) 100%),
    radial-gradient(ellipse at 50% 36%, #3a78c8 0%, transparent 42%),
    radial-gradient(ellipse at 50% 48%, #8a4a00 0%, #120800 74%);
  box-shadow: 0 0 36px rgba(240, 180, 0, 0.52);
}
.tier_share_card[data-tier="challenger"]::before { opacity: 0.95; }
.tier_share_card[data-tier="challenger"] .tier_share_foil {
  opacity: 0.62;
  background:
    linear-gradient(118deg, transparent 8%, rgba(255, 232, 120, 0.4) 24%, rgba(0, 220, 255, 0.26) 38%, rgba(255, 255, 255, 0.28) 50%, rgba(240, 180, 0, 0.24) 62%, rgba(200, 232, 255, 0.2) 72%, transparent 88%),
    radial-gradient(ellipse at 24% 18%, rgba(255, 232, 120, 0.28) 0%, transparent 40%),
    radial-gradient(ellipse at 76% 64%, rgba(80, 200, 255, 0.22) 0%, transparent 42%);
}
.tier_share_card[data-tier="challenger"] .tier_share_emblem {
  filter:
    drop-shadow(-2px 0 0 rgba(80, 200, 255, 0.45))
    drop-shadow(2px 0 0 rgba(255, 232, 120, 0.45))
    drop-shadow(0 0 16px var(--tier-glow));
}
.tier_share_card[data-tier="challenger"] .tier_share_glow--b {
  opacity: 0.42;
}

.tier_share_actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.4rem;
  margin-top: 0.85rem;
}

.tier_share_action {
  border: 0;
  border-radius: 10px;
  padding: 0.7rem 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.tier_share_action.is-image,
.tier_share_action.is-link {
  background: #2b3038;
  color: #e9ecef;
}

.tier_share_action.is-kakao {
  background: #FEE500;
  color: #191919;
}

.tier_share_close {
  display: block;
  width: 100%;
  margin-top: 0.45rem;
  border: 0;
  background: transparent;
  color: #9aa3ad;
  font-weight: 600;
  padding: 0.45rem;
  cursor: pointer;
}

.tier_capture_preview {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483001;
  background: rgba(8, 10, 16, 0.72);
}

.tier_capture_preview.is-open {
  display: block;
}

.tier_capture_panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(92vh, 760px);
  overflow: auto;
  background: #16181f;
  color: #e8edf4;
  border-radius: 18px 18px 0 0;
  padding: 0.75rem 1rem calc(0.95rem + env(safe-area-inset-bottom));
}

.tier_capture_title {
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.3rem;
}

.tier_capture_hint {
  font-size: 0.78rem;
  color: #9aa3ad;
  text-align: center;
  margin-bottom: 0.7rem;
}

.tier_capture_img {
  display: block;
  width: 100%;
  max-height: 52vh;
  object-fit: contain;
  border-radius: 12px;
  background: #0e1016;
}

.tier_capture_actions {
  display: flex;
  gap: 0.45rem;
  margin-top: 0.85rem;
}

.tier_capture_actions button {
  flex: 1;
  border: 0;
  border-radius: 10px;
  padding: 0.72rem 0.5rem;
  font-weight: 700;
  cursor: pointer;
}

.tier_capture_share {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}

.tier_capture_save {
  background: #2b3038;
  color: #e9ecef;
}

.tier_capture_close {
  background: #3a4046;
  color: #ced4da;
}

body.tier-share-open {
  overflow: hidden;
}

body.tier-share-open iframe[id^="p_"] {
  display: none !important;
}

@media (max-width: 768px) {
  .tier_share_panel {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    transform: none;
    width: auto;
    border-radius: 18px 18px 0 0;
    padding-bottom: calc(0.9rem + env(safe-area-inset-bottom));
  }
  .tier_share_handle {
    display: block;
  }
}