/* 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: 26px;
  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: 26px;
  line-height: 1;
}

.lvl-badge .v-base {
  font-size: 26px;
  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: 8px;
  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: 14px;
  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: 8px;
  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);
  /* 2026-05-18: 用 height + max-height 給 flex column 子層一個 definite size,
     否則 .weekly-rank-section--list (flex:1) 沒有 parent height 可分配，
     body (flex:1) 就會塌成 0。max-height 單獨存在不算 definite size. */
  height: 84vh;
  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: 19px;
  font-weight: 600;
  color: #fbbf24;
}
.weekly-rank-close {
  background: transparent;
  border: 0;
  color: #cbd5e1;
  font-size: 29px;
  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: 17px;
  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: 17px;
  font-weight: 600;
  color: #fbbf24;
  min-width: 120px;
  text-align: center;
}

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

.weekly-rank-body {
  /* 2026-05-18: flex:1 + min-height:0 是 overflow-y:auto 能生效的關鍵 —
     body 在 .weekly-rank-section--list (flex column, flex:1) 內，沒 flex:1
     會自然延展到內容高度，外層 dialog overflow:hidden 截斷，使用者就
     沒辦法捲清單。bug 從 2026-04-17 第一版就潛伏，5/14 把 limit 從 10 提到
     500 後才顯現。改回去前先看 git blame & commit f9 (TBD). */
  flex: 1 1 0;
  min-height: 0;
  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: 17px;
}
.weekly-rank-error { color: #f87171; }

.weekly-rank-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.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: 14px;
  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: 24px; line-height: 1; vertical-align: middle; }
.weekly-rank-tier  { color: #94a3b8; font-size: 13px; margin-left: 3px; }

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

/* ---- Self-row highlight (2026-05-14 B+) ----
 *
 * Applied via aria-current="true" + .weekly-rank-row--me on the <tr>
 * corresponding to the currently logged-in user. Designed to be:
 *   - distinct from the tr:hover dim (rgba 0.03) — uses amber-12 alpha
 *   - higher than nth-child(1..3) golden coloring's stacking order
 *   - resilient to hover (the highlight stays visible)
 *
 * border-left + slight transform-feel via the left bar give a clear
 * "you are here" hint without overpowering the medal coloring on top
 * 3 ranks.
 */
.weekly-rank-table tbody tr.weekly-rank-row--me,
.weekly-rank-table tbody tr.weekly-rank-row--me:hover {
  background: rgba(251, 191, 36, 0.12);
  border-left: 3px solid #fbbf24;
}

/* 4-state self-position note appended below the table when the user
 * is not in the visible slice. */
.weekly-rank-self-note {
  margin: 12px 16px 4px;
  padding: 8px 12px;
  background: rgba(99, 102, 241, 0.08);
  border-left: 3px solid #818cf8;
  color: #cbd5e1;
  font-size: 14px;
  border-radius: 4px;
}

/* ---- Personal card（個人總資料區，介於標題與週排行榜之間）---- */

.weekly-rank-personal {
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.10));
  /* 分段 border 改由 .weekly-rank-section 提供，這裡不再重複 */
}
.weekly-rank-personal-empty {
  text-align: center;
  font-size: 14px;
  color: #94a3b8;
  padding: 8px 0;
}
.weekly-rank-personal-inner {
  display: flex;
  align-items: center;
  gap: 16px;
}
.personal-badge { flex: 0 0 auto; transform: scale(1.3); transform-origin: left center; }
.personal-badge .v-base { font-size: 28px; }
.weekly-rank-personal-meta {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 14px;
}
.weekly-rank-personal-row1 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.weekly-rank-personal-lv {
  font-size: 22px;
  font-weight: 700;
  color: #fbbf24;
}
.weekly-rank-personal-tier {
  font-size: 15px;
  color: #cbd5e1;
}
.weekly-rank-personal-progressbar {
  width: 100%;
  height: 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 4px;
}
.weekly-rank-personal-progressfill {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  border-radius: 6px;
  transition: width 0.4s ease;
}
.weekly-rank-personal-row2 {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #94a3b8;
}
.weekly-rank-personal-pct { color: #fbbf24; font-weight: 600; }

/* ---- 三層分段（標題 / 個人資訊 / 周排行榜）---- */

.weekly-rank-section {
  display: flex;
  flex-direction: column;
}
.weekly-rank-section:not(:last-child) {
  border-bottom: 2px solid #1e293b;
}
/* 2026-05-18: 排行 section 取得 dialog 剩餘高度，讓內部 .weekly-rank-body
   的 flex:1 / overflow-y:auto 能生效；個人 section 保持自然高度 (flex 預設
   0 1 auto). 看 weekly-rank-body 的註解了解為什麼非加不可. */
.weekly-rank-section--list {
  flex: 1 1 0;
  min-height: 0;
}

.weekly-rank-section-title {
  padding: 12px 18px 10px;
  font-size: 14px;
  font-weight: 700;
  color: #fbbf24;
  letter-spacing: 0.3px;
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.12), rgba(30, 41, 59, 0));
  border-bottom: 1px solid #334155;
  display: flex;
  align-items: center;
  gap: 6px;
}
.weekly-rank-section-title--personal {
  color: #a78bfa;
}
.weekly-rank-section-title--rank {
  color: #fbbf24;
}

/* ---- Model breakdown（個人卡下方）---- */

.model-breakdown {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255,255,255,0.08);
}
.model-breakdown-title {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.model-breakdown-loading,
.model-breakdown-empty {
  font-size: 12px;
  color: #64748b;
  padding: 4px 0;
}
.model-breakdown-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.model-row {
  display: grid;
  grid-template-columns: 80px 1fr 70px 60px;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.model-row-label {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.model-row-bar {
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
}
.model-row-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}
.model-row-cost {
  color: #fbbf24;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.model-row-tokens {
  color: #94a3b8;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

@media (max-width: 600px) {
  .model-row {
    grid-template-columns: 64px 1fr 60px;
  }
  .model-row-tokens { display: none; }
}

@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: 14px; }
  .personal-badge { transform: scale(1.15); }
  .weekly-rank-personal-lv { font-size: 20px; }
}