/* ==========================================================================
   TYPING TURBO — championship.css
   Turbo Championship: league tabs, season header, event cards, trophies.
   ========================================================================== */

.championship-screen { background: radial-gradient(110% 80% at 50% 0%, #1c1146 0%, #05060d 72%); }

.championship-scroll {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 6px clamp(12px, 3vw, 28px) calc(26px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------------------------------------------------------------- league tabs */

.champ-tabs { display: flex; gap: 8px; flex-wrap: wrap; }

.champ-tab {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  border-radius: var(--radius);
  border: 2px solid var(--stroke);
  background: rgba(255, 255, 255, 0.04);
  color: var(--txt);
  cursor: pointer;
  text-align: left;
  transition: transform 0.16s var(--ease-out), border-color 0.16s, box-shadow 0.16s, background 0.16s;
}
.champ-tab:hover { transform: translateY(-2px); border-color: var(--stroke-strong); }
.champ-tab.is-active {
  border-color: var(--tab-color, var(--cyan));
  box-shadow: 0 0 0 3px rgba(140, 175, 255, 0.28), var(--shadow-sm);
  background: rgba(255, 255, 255, 0.08);
}
.champ-tab.is-done { border-color: rgba(255, 210, 63, 0.6); }
.champ-tab.is-locked { opacity: 0.55; cursor: not-allowed; filter: saturate(0.4); }
.champ-tab.is-locked:hover { transform: none; border-color: var(--stroke); }
.champ-tab__icon { font-size: 1.3rem; }
.champ-tab__text { display: flex; flex-direction: column; line-height: 1.1; }
.champ-tab__name { font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.86rem; }
.champ-tab__meta { font-size: 0.66rem; color: var(--txt-faint); font-weight: 800; }

/* ---------------------------------------------------------------- league header */

.champ-body { gap: 14px; }

.champ-head { padding: 16px; border-left: 4px solid var(--league-color, var(--cyan)); }
.champ-head__top { display: flex; align-items: flex-start; gap: 12px; }
.champ-head__icon { font-size: 2.2rem; line-height: 1; }
.champ-head__title { font-size: clamp(1.2rem, 4vw, 1.7rem); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: 0.03em; }
.champ-head__points { text-align: center; min-width: 96px; }
.champ-head__points-val { font-size: 2rem; font-weight: 900; color: var(--yellow); line-height: 1; }
.champ-head__points-label { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--txt-faint); font-weight: 800; }
.champ-head__bar { margin: 12px 0 10px; height: 12px; }
.champ-head__bar > i { background: linear-gradient(90deg, var(--yellow), var(--orange)); }
.champ-head__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.champ-locked { display: flex; align-items: center; gap: 14px; padding: 18px; }

/* ---------------------------------------------------------------- event cards */

.champ-events { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }

.champ-event {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: var(--radius);
  border: 2px solid var(--stroke);
  background: rgba(255, 255, 255, 0.045);
  text-align: left;
  cursor: pointer;
  transition: transform 0.16s var(--ease-out), border-color 0.16s, box-shadow 0.16s;
  overflow: hidden;
}
.champ-event:hover { transform: translateY(-3px); border-color: var(--stroke-strong); box-shadow: var(--shadow-sm); }
.champ-event.is-done { border-color: rgba(60, 233, 123, 0.45); }
.champ-event.is-boss { border-color: rgba(255, 61, 129, 0.6); background: linear-gradient(180deg, rgba(255, 61, 129, 0.12), rgba(255, 255, 255, 0.03)); }
.champ-event.is-locked { opacity: 0.5; cursor: not-allowed; filter: saturate(0.35); }
.champ-event.is-locked:hover { transform: none; border-color: var(--stroke); }

.champ-event__boss {
  position: absolute; top: 0; right: 0;
  padding: 3px 10px;
  border-bottom-left-radius: 12px;
  background: linear-gradient(180deg, #ff6fa5, #d6135b);
  color: #2a0413; font-size: 0.6rem; font-weight: 900; letter-spacing: 0.14em;
}
.champ-event__no { font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--txt-faint); font-weight: 900; }
.champ-event__name { font-weight: 900; font-size: 1.02rem; line-height: 1.15; }
.champ-event__meta { display: flex; gap: 6px; flex-wrap: wrap; }
.champ-event__rivals { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.champ-rival {
  padding: 1px 7px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.32); border: 1px solid var(--stroke);
  font-size: 0.68rem; font-weight: 700;
}
.champ-rival.is-boss { border-color: rgba(255, 61, 129, 0.6); color: #ffb3cf; }
.champ-event__foot { margin-top: auto; display: flex; align-items: center; gap: 8px; padding-top: 4px; }
.champ-event__pts { font-weight: 900; color: var(--yellow); }
.champ-event__lock { font-size: 1.1rem; }

.champ-note { text-align: center; padding: 2px 0 4px; }

/* ---------------------------------------------------------------- trophies */

.trophy-row { display: flex; gap: 10px; flex-wrap: wrap; }
.trophy {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--stroke);
  font-size: 0.8rem; font-weight: 800;
  opacity: 0.6;
}
.trophy.is-on { opacity: 1; background: rgba(255, 210, 63, 0.12); border-color: rgba(255, 210, 63, 0.55); color: #ffe79a; }
.trophy__icon { font-size: 1.2rem; }

/* ---------------------------------------------------------------- results panel */

.champ-result { margin-top: 14px; padding: 14px; text-align: left; }

.cup-banner {
  display: flex; align-items: center; gap: 12px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 210, 63, 0.16), rgba(255, 210, 63, 0.05));
  border: 1px solid rgba(255, 210, 63, 0.55);
  color: #ffe79a;
  animation: bestPop 0.6s var(--ease-back) both;
}
.cup-banner__icon { font-size: 2rem; }

@media (max-width: 620px) {
  .champ-head__points { min-width: 70px; }
  .champ-head__points-val { font-size: 1.5rem; }
  .champ-events { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .champ-tab { padding: 7px 10px; gap: 7px; }
  .champ-tab__meta { display: none; }
}