/* Starwake — pilot career: medals, rank, unlocks. Same visor language as style.css:
   round glass, pills, Unbounded numerals. */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------- medals */
.medal {
  --m1: #ffe0bd; --m2: #c97a42; --m3: #5e2d12;
  display: inline-block; flex: none; width: 18px; height: 18px; border-radius: 50%; vertical-align: middle;
  background: radial-gradient(circle at 34% 28%, var(--m1) 0 14%, var(--m2) 52%, var(--m3) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.28), inset 0 -2px 4px rgba(0, 0, 0, 0.35), 0 0 10px -2px var(--m2);
  position: relative;
}
.medal::after { content: ''; position: absolute; inset: 22%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); }
.medal[data-m="silver"] { --m1: #ffffff; --m2: #b8c3d9; --m3: #4f5a72; }
.medal[data-m="gold"] { --m1: #fff6c8; --m2: #ffc23a; --m3: #7d4d00; }
.medal[data-m="starwake"] {
  --m2: #7cf2ff;
  background: radial-gradient(circle at 50% 50%, #fff 0 12%, transparent 30%), conic-gradient(from 20deg, #7cf2ff, #ffffff, #b884ff, #4feaff, #ffe39a, #7cf2ff);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5), 0 0 16px -1px rgba(124, 242, 255, 0.85);
}
.medal[data-m="none"] { background: transparent; box-shadow: none; border: 2px dashed var(--edge-hi); }
.medal[data-m="none"]::after { display: none; }
.medal.lg { width: 40px; height: 40px; }
.medal.xl { width: 62px; height: 62px; }

/* best medal on a course card, set into the card's ring decoration */
.track-medal { position: absolute; right: clamp(22px, 2.4vw, 34px); top: 50%; transform: translateY(-50%); display: grid; place-items: center; }

/* race setup: target times for the chosen course */
.medal-targets { margin: 2px 0 4px; padding: 12px 16px 10px; border-radius: 20px; background: rgba(4, 6, 22, 0.5); border: 1px solid var(--edge); }
.mt-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.mt-head span { font-size: 13px; font-weight: 500; color: var(--muted); }
.mt-head small { font-size: 12.5px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
.mt-list li {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 8px;
  padding: 6px 10px 6px 8px; border-radius: 16px; border: 1px solid transparent; min-width: 0;
}
.mt-list li .medal { grid-row: 1 / 3; }
.mt-list li span { font-size: 12px; line-height: 1.1; color: var(--muted); }
.mt-list li b { font: 600 14px/1.15 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap; }
.mt-list li.got { background: rgba(93, 255, 160, 0.08); border-color: rgba(93, 255, 160, 0.38); }
.mt-list li.got span { color: var(--good); }

/* ------------------------------------------------------------- rank */
.rank-num {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%;
  font: 800 16px/1 var(--display); color: #031219; background: radial-gradient(circle at 35% 30%, #c9fbff, var(--ion) 60%, #1a8aa0);
  box-shadow: 0 0 16px -4px var(--ion);
}
.rank-num.sm { width: 30px; height: 30px; font-size: 14px; }
.rank-body { display: grid; gap: 3px; min-width: 0; }
.rank-body b { font: 600 14.5px/1.1 var(--display); letter-spacing: -0.01em; color: var(--text); }
.rank-body small { font-size: 12.5px; line-height: 1.2; }
.xp-bar { display: block; height: 6px; border-radius: 999px; background: rgba(238, 243, 255, 0.1); overflow: hidden; width: 100%; }
.xp-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ion), #b8f8ff); box-shadow: 0 0 10px var(--ion); }
.title-foot > .pilot-rank { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; min-width: 230px; }
.pilot-rank .rank-body { flex: 1; }

/* ------------------------------------------------------------- results */
.res-career {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 12px 22px; align-items: start;
  margin: 0 0 16px; padding: 16px 20px; border-radius: 24px; background: rgba(4, 6, 22, 0.5); border: 1px solid var(--edge);
}
.res-career.no-medal { grid-template-columns: 1fr; }
.res-medal { display: flex; align-items: center; gap: 16px; align-self: center; }
.res-medal b { display: block; font: 700 clamp(19px, 1.8vw, 24px)/1.1 var(--display); letter-spacing: -0.01em; }
.res-medal small { display: block; margin-top: 4px; font-size: 14px; }
.res-medal.fresh .medal { animation: medal-in 0.9s var(--ease-out) both; }
.res-medal.fresh b { color: var(--gold); }
@keyframes medal-in { 0% { transform: scale(0.2) rotate(-160deg); opacity: 0; } 70% { transform: scale(1.12) rotate(8deg); opacity: 1; } 100% { transform: none; } }
.xp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.xp-head b { font: 800 20px/1 var(--display); color: var(--ion); letter-spacing: -0.01em; }
.rank-up { font-size: 12.5px; font-weight: 700; color: #241603; background: linear-gradient(100deg, var(--gold), var(--nitro)); padding: 3px 11px; border-radius: 999px; }
.xp-items { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 18px; font-size: 13.5px; }
.xp-items li { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); }
.xp-items li b { color: var(--text); font-variant-numeric: tabular-nums; }
.res-rank { display: flex; align-items: center; gap: 10px; }
.res-rank .rank-body { flex: 1; }
.res-rank .xp-bar i { width: var(--to); animation: xp-fill 1.2s 0.3s var(--ease-out) both; }
@keyframes xp-fill { from { width: var(--from); } to { width: var(--to); } }
.res-unlocks { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--edge); }
.ul-head { font: 700 13px/1 var(--display); color: var(--gold); letter-spacing: 0.02em; margin-right: 2px; }
.ul-chip {
  position: relative; overflow: hidden; font-size: 13.5px; font-weight: 700; color: var(--text); padding: 5px 14px; border-radius: 999px;
  background: rgba(255, 201, 74, 0.14); border: 1px solid rgba(255, 201, 74, 0.55); box-shadow: 0 0 18px -8px var(--gold);
}
.ul-chip::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%); transform: translateX(-120%); animation: ul-shine 1.6s 0.8s ease-out both; }
@keyframes ul-shine { to { transform: translateX(120%); } }
.res-unlocks small { font-size: 13px; }

/* ------------------------------------------------------------- hangar locks */
.cycler.is-locked .cyc-val b { opacity: 0.5; }
.lock-note { display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: var(--gold) !important; font-weight: 600; }
.lock-ico { width: 11px; height: 11px; flex: none; }

@media (max-width: 860px) {
  .res-career { grid-template-columns: 1fr; }
}
@media (max-height: 760px) {
  .res-career { padding: 12px 16px; margin-bottom: 10px; }
  .medal.xl { width: 50px; height: 50px; }
  .medal-targets { padding: 8px 14px 6px; }
}