/* web/css/level-badge.css
 * Level badge visuals, namespaced under `.lvl-badge` to avoid leaking
 * into the rest of the CCMS UI. Extracted from badge design specification.
 * Includes base badge styles, sub-stage effects (I~V), and mythic form (LV.146~150).
 */

.lvl-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  position: relative;
  font-size: 22px;
  line-height: 1;
  vertical-align: middle;
  pointer-events: none; /* let taps pass through to parent .level-badge-mount */
}

.lvl-badge .v-frame {
  width: 28px;
  height: 28px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
}

.lvl-badge .v-base {
  font-size: 22px;
  line-height: 1;
  position: relative;
}

/* Stars for sub-stages I~V */
.lvl-badge .stars {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 7px;
  line-height: 1;
  white-space: nowrap;
  color: currentColor;
}

/* Aura effects by sub-stage color */
.lvl-badge .aura-1 {
  filter: none;
}

.lvl-badge .aura-2 {
  filter: drop-shadow(0 0 3px rgba(74, 222, 128, 0.7));
}

.lvl-badge .aura-3 {
  filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.7));
}

.lvl-badge .aura-4 {
  filter: drop-shadow(0 0 5px rgba(167, 139, 250, 0.7));
}

.lvl-badge .aura-5 {
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.9));
}

/* Frame styles for sub-stages III~V */
.lvl-badge .frame-3 {
  border: 1px solid rgba(192, 192, 192, 0.8);
  border-radius: 50%;
}

.lvl-badge .frame-4 {
  border: 1.5px solid rgba(218, 165, 32, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(218, 165, 32, 0.5);
}

.lvl-badge .frame-5 {
  background: conic-gradient(
    from 0deg,
    rgba(255, 0, 0, 0.8) 0deg,
    rgba(255, 127, 0, 0.8) 60deg,
    rgba(0, 255, 0, 0.8) 120deg,
    rgba(0, 0, 255, 0.8) 180deg,
    rgba(75, 0, 130, 0.8) 240deg,
    rgba(148, 0, 211, 0.8) 300deg,
    rgba(255, 0, 0, 0.8) 360deg
  );
  padding: 2px;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.9);
}

/* Mythic form base styles (LV.146~150 = 鳳凰) */
.lvl-badge .myth-1 {
  position: relative;
}

.lvl-badge .myth-1 .v-base {
  filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.6));
}

.lvl-badge .myth-2 {
  position: relative;
}

.lvl-badge .myth-2 .v-base {
  filter: drop-shadow(0 0 3px rgba(234, 88, 12, 0.7))
           drop-shadow(0 0 6px rgba(249, 115, 22, 0.5));
}

.lvl-badge .myth-3 {
  position: relative;
}

.lvl-badge .myth-3 .v-base {
  filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.8))
           drop-shadow(0 0 10px rgba(251, 146, 60, 0.6));
}

.lvl-badge .myth-4 {
  position: relative;
}

.lvl-badge .myth-4 .v-base {
  filter: drop-shadow(0 0 4px rgba(147, 51, 234, 0.7))
           drop-shadow(0 0 6px rgba(59, 130, 246, 0.6));
}

.lvl-badge .myth-5 {
  position: relative;
  animation: ultimate-pulse 2s ease-in-out infinite;
}

.lvl-badge .myth-5 .v-base {
  filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.8))
           drop-shadow(0 0 10px rgba(249, 115, 22, 0.6))
           drop-shadow(0 0 4px rgba(34, 211, 238, 0.5));
}

.lvl-badge .myth-5::before {
  content: '';
  position: absolute;
  width: 28px;
  height: 28px;
  border: 2px solid;
  border-image: linear-gradient(135deg, rgba(168, 85, 247, 0.6), rgba(34, 211, 238, 0.6), rgba(251, 191, 36, 0.6)) 1;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: glow-shift 3s ease-in-out infinite;
  pointer-events: none;
}

.lvl-badge .myth-5::after {
  content: '✨';
  position: absolute;
  font-size: 12px;
  top: -4px;
  right: -4px;
  animation: sparkle 1.5s ease-in-out infinite;
  opacity: 0.8;
  pointer-events: none;
}

.lvl-badge .myth-5-stars {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 7px;
  line-height: 1;
  white-space: nowrap;
  color: rgba(251, 191, 36, 0.95);
  text-shadow: 0 0 2px rgba(251, 191, 36, 0.8);
}

.lvl-badge .mythic-badge {
  position: relative;
  animation: pulse 2s ease-in-out infinite;
}

/* Keyframe animations */
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.07);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes glow-shift {
  0%,
  100% {
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.5), 0 0 4px rgba(34, 211, 238, 0.3);
  }
  50% {
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.6), 0 0 6px rgba(249, 115, 22, 0.4);
  }
}

@keyframes ultimate-pulse {
  0%,
  100% {
    filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.8))
            drop-shadow(0 0 10px rgba(249, 115, 22, 0.6))
            drop-shadow(0 0 4px rgba(34, 211, 238, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.95))
            drop-shadow(0 0 14px rgba(249, 115, 22, 0.75))
            drop-shadow(0 0 6px rgba(34, 211, 238, 0.7));
  }
}

@keyframes sparkle {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}

/* ---- Header badge clickable affordance ---- */
.level-badge-mount.clickable {
  cursor: pointer;
  border-radius: 50%;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  /* Expand touch target for mobile without changing visual size */
  position: relative;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: rgba(251, 191, 36, 0.2);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.level-badge-mount.clickable:hover {
  transform: scale(1.1);
  box-shadow: 0 0 6px rgba(251, 191, 36, 0.6);
}
.level-badge-mount.clickable:focus {
  outline: 2px solid rgba(251, 191, 36, 0.8);
  outline-offset: 2px;
}
.level-badge-mount.clickable:active {
  transform: scale(0.92);
}
.level-badge-mount.clickable * {
  pointer-events: none;
}

/* ---- Weekly leaderboard modal ---- */
.weekly-rank-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif;
}
.weekly-rank-modal.open { display: block; }

.weekly-rank-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}

.weekly-rank-dialog {
  position: relative;
  margin: 6vh auto 0;
  width: min(720px, 92vw);
  max-height: 84vh;
  background: #1e1e2e;
  color: #e2e8f0;
  border: 1px solid #334155;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.weekly-rank-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #334155;
  background: linear-gradient(135deg, #1e293b, #312e81);
}
.weekly-rank-title {
  font-size: 16px;
  font-weight: 600;
  color: #fbbf24;
}
.weekly-rank-close {
  background: transparent;
  border: 0;
  color: #cbd5e1;
  font-size: 24px;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
}
.weekly-rank-close:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

.weekly-rank-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 18px 4px;
}
.weekly-rank-nav-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid #334155;
  color: #e2e8f0;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}
.weekly-rank-nav-btn:hover:not(:disabled) { background: rgba(255,255,255,0.12); }
.weekly-rank-nav-btn:disabled { cursor: default; }
.weekly-rank-nav-label {
  font-size: 14px;
  font-weight: 600;
  color: #fbbf24;
  min-width: 120px;
  text-align: center;
}

.weekly-rank-meta {
  padding: 4px 18px 8px;
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
  border-bottom: 1px solid #1e293b;
}

.weekly-rank-body {
  overflow-y: auto;
  padding: 6px 0 12px;
}

.weekly-rank-loading,
.weekly-rank-empty,
.weekly-rank-error {
  padding: 30px 20px;
  text-align: center;
  color: #94a3b8;
  font-size: 14px;
}
.weekly-rank-error { color: #f87171; }

.weekly-rank-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.weekly-rank-table th,
.weekly-rank-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.weekly-rank-table th {
  position: sticky;
  top: 0;
  background: #0f172a;
  color: #94a3b8;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.weekly-rank-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }

.weekly-rank-table .col-rank   { width: 60px;  text-align: center; color: #fbbf24; font-weight: 600; white-space: nowrap; }
.weekly-rank-table .col-name   { color: #e2e8f0; font-weight: 500; }
.weekly-rank-table .col-level  { width: 140px; }
.weekly-rank-table .col-tokens { width: 90px;  text-align: right; color: #cbd5e1; font-variant-numeric: tabular-nums; }
.weekly-rank-table .col-cost   { width: 90px;  text-align: right; color: #34d399; font-variant-numeric: tabular-nums; }

.weekly-rank-emoji { font-size: 20px; line-height: 1; vertical-align: middle; }
.weekly-rank-tier  { color: #94a3b8; font-size: 11px; margin-left: 3px; }

.weekly-rank-table tbody tr:nth-child(1) .col-rank { color: #fbbf24; font-size: 16px; }
.weekly-rank-table tbody tr:nth-child(2) .col-rank { color: #cbd5e1; font-size: 15px; }
.weekly-rank-table tbody tr:nth-child(3) .col-rank { color: #f59e0b; font-size: 14px; }

@media (max-width: 600px) {
  .weekly-rank-dialog { margin: 0; width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
  .weekly-rank-table .col-tokens { display: none; }
  .weekly-rank-table th, .weekly-rank-table td { padding: 8px 6px; font-size: 12px; }
}