/* ══════════════════════════════════════════════════════════════
   CRITTED TIERS - mockup #7
   MCTiers structure. Chrome is fully neutral grey (zero blue tint);
   colour is reserved for signal only - kit icons, tier labels,
   region badges and the top-three rank plates.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* neutral greys - no hue, no saturation */
  --bg:        #0d0d0d;
  --card:      #151515;
  --card-2:    #1c1c1c;
  --card-3:    #232323;
  --line:      #272727;
  --line-2:    #363636;

  --text:      #ededed;
  --text-dim:  #9b9b9b;
  --text-mute: #6e6e6e;

  --shell:     1180px;
  --font:      "Poppins", -apple-system, "Segoe UI", system-ui, sans-serif;

  /* --kits is set from config length by app.js */
  --kits:      5;
  --tier-w:    44px;
  --tier-gap:  8px;
  --tiers-w:   calc(var(--kits) * var(--tier-w) + (var(--kits) - 1) * var(--tier-gap));

  --ease:      cubic-bezier(.22, .8, .3, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* selection and dragging are off everywhere except real text inputs */
  user-select: none; -webkit-user-select: none;
}

input, textarea { user-select: text; -webkit-user-select: text; }

img {
  -webkit-user-drag: none; user-drag: none; pointer-events: none;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }
svg { display: block; }
::selection { background: #3a3a3a; color: #fff; }
:focus-visible { outline: 2px solid #7a7a7a; outline-offset: 2px; border-radius: 6px; }

.page { width: min(100% - 72px, var(--shell)); margin-inline: auto; padding-bottom: 80px; }

/* ---------- custom scrollbar ---------- */

* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }

::-webkit-scrollbar { width: 13px; height: 13px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-2); border-radius: 20px;
  border: 4px solid var(--bg); background-clip: padding-box;
  transition: background .2s;
}
::-webkit-scrollbar-thumb:hover { background: #4d4d4d; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ---------- nav ---------- */

.nav {
  display: flex; align-items: center; gap: 28px;
  height: 72px; margin: 40px 0 30px; padding: 0 22px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  animation: fadeDown .5s var(--ease) backwards;
}

.logo { display: flex; align-items: center; flex: none; }
.logo__img {
  display: block; height: 36px; width: auto;
  image-rendering: pixelated;
  transition: transform .2s var(--ease);
}
.logo:hover .logo__img { transform: scale(1.03); }
.logo:active .logo__img { transform: scale(.98); }

.nav__links { display: flex; align-items: center; gap: 6px; margin-inline: auto; }
.nav__link {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 9px 15px; border-radius: 9px;
  font-size: 15.5px; font-weight: 600; color: var(--text-dim);
  transition: color .18s, background .18s, transform .18s var(--ease);
}
.nav__link:hover { color: var(--text); background: var(--card-2); }
.nav__link:active { transform: scale(.97); }
.nav__link svg { width: 19px; height: 19px; transition: transform .25s var(--ease); }
.nav__link:hover svg { transform: translateY(-1px); }

.search {
  display: flex; align-items: center; gap: 10px; flex: none;
  width: 250px; height: 42px; padding: 0 11px 0 14px;
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: 10px; transition: border-color .2s, background .2s, width .28s var(--ease);
}
.search:focus-within { border-color: var(--line-2); background: var(--card-3); width: 280px; }
.search svg { width: 17px; height: 17px; color: var(--text-mute); }
.search input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  color: var(--text); font-size: 14.5px;
}
.search input::placeholder { color: var(--text-mute); }
.search input::-webkit-search-cancel-button { filter: invert(.5); }

/* ---------- kit tabs ---------- */

.tabs {
  position: relative; display: flex;
  overflow-x: auto; scrollbar-width: none;
  animation: fadeDown .5s .06s var(--ease) backwards;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs__list { display: flex; gap: 6px; }

/* the bar slides between tabs instead of hard-cutting */
.tabs__ind {
  position: absolute; bottom: 0; left: 0; height: 3px; width: 0;
  background: var(--text); border-radius: 3px 3px 0 0;
  transition: transform .32s var(--ease), width .32s var(--ease);
  pointer-events: none;
}

.tab {
  position: relative; flex: none; cursor: pointer;
  display: grid; justify-items: center; align-content: center; gap: 9px;
  width: 138px; height: 76px; padding-bottom: 3px;
  background: #101010; border: 1px solid var(--line); border-bottom: 0;
  border-radius: 12px 12px 0 0;
  color: var(--text-dim);
  transition: color .2s, background .2s;
}
.tab svg { width: 26px; height: 26px; transition: transform .28s var(--ease); }
.tab span { font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.tab:hover { color: var(--text); background: #171717; }
.tab:hover svg { transform: translateY(-2px) scale(1.08); }
.tab:active svg { transform: scale(.94); }
/* active tab matches the panel so the two read as one surface */
.tab.is-active { color: var(--text); background: var(--card); }

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

.panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px 18px 18px;
  animation: fadeUp .5s .1s var(--ease) backwards;
}
/* square off only the corner the active tab is sitting on */
.panel.is-first { border-top-left-radius: 0; }

/* ---------- rows ---------- */

.rows {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
  transition: opacity .16s ease;
}
.rows.is-out { opacity: 0; }

.row {
  position: relative; cursor: pointer;
  display: grid;
  grid-template-columns: 196px minmax(150px, 1fr) 88px var(--tiers-w);
  align-items: center;
  height: 92px; padding-right: 18px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 12px;
  transition: border-color .2s, background .2s, transform .2s var(--ease);
}
.row:hover {
  border-color: var(--line-2); background: var(--card-3);
  transform: translateY(-2px); z-index: 3;
}
.row:active { transform: translateY(0); }

/* staggered entrance, applied only when the whole board re-renders */
.rows--anim .row { animation: rowIn .42s var(--ease) backwards; }

/* rank plate - .rank clips to the row's rounded left corner, .rank__plate
   carries the slant. Splitting them lets the 3D render sit outside the clip. */
.rank {
  position: relative; height: 100%; width: 196px;
  overflow: hidden; border-radius: 11px 0 0 11px;
}
.rank__plate {
  position: absolute; inset: 0;
  background: var(--plate, #212121);
  clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
}
.rank--1 { --plate: linear-gradient(102deg, #f5cd63 0%, #e0a230 100%); }
.rank--2 { --plate: linear-gradient(102deg, #c8d2da 0%, #94a2ad 100%); }
.rank--3 { --plate: linear-gradient(102deg, #d98d4c 0%, #ac6229 100%); }

.rank__num {
  position: absolute; left: 20px; top: 50%; translate: 0 -50%;
  font-size: 29px; font-weight: 800; font-style: italic; letter-spacing: -.02em;
  color: var(--text-mute);
}
.rank--1 .rank__num, .rank--2 .rank__num, .rank--3 .rank__num {
  color: #fff; text-shadow: 0 2px 5px rgba(0, 0, 0, .35);
}

/* The bust sits fully inside the plate, pushed right far enough that a
   two-digit rank never runs under it. Plate 196px, slant lands at 86% = 169px,
   bust is 84px wide, so 124 centre keeps it inside both bounds. */
.row__render {
  position: absolute; left: 124px; bottom: 0; translate: -50% 0;
  height: 84px; width: auto; z-index: 2;
  transition: transform .28s var(--ease);
}
.row:hover .row__render { transform: translateY(-3px) scale(1.04); }

.who { min-width: 0; padding-left: 16px; }
.who__name {
  font-size: 22px; font-weight: 700; letter-spacing: -.015em; color: var(--text);
  line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: transform .22s var(--ease);
}
.row:hover .who__name { transform: translateX(3px); }
.who__title { display: flex; align-items: center; gap: 7px; font-size: 13.5px; margin-top: 1px; }
.who__title svg { width: 15px; height: 15px; color: var(--tt); flex: none; }
.who__title b { color: var(--tt); font-weight: 600; }

.region {
  justify-self: center;
  display: grid; place-items: center; width: 46px; height: 34px;
  border-radius: 8px; font-size: 13.5px; font-weight: 700;
  color: var(--rg); background: color-mix(in srgb, var(--rg) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--rg) 34%, transparent);
  transition: transform .2s var(--ease);
}
.row:hover .region { transform: scale(1.06); }

/* ---------- tier cells ---------- */

.tiers { display: flex; gap: var(--tier-gap); justify-content: flex-end; }

.tier {
  display: grid; justify-items: center; gap: 6px; width: var(--tier-w);
  transition: transform .2s var(--ease);
}
.tier:hover { transform: translateY(-3px); }
.tier__icon {
  display: grid; place-items: center; width: 32px; height: 29px;
  border-radius: 8px; background: rgba(255, 255, 255, .05);
  transition: background .2s;
}
.tier:hover .tier__icon { background: rgba(255, 255, 255, .1); }
.tier__icon svg { width: 19px; height: 19px; }
.tier__lab {
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  padding: 1px 7px; border-radius: 5px;
  color: var(--tc); background: color-mix(in srgb, var(--tc) 15%, transparent);
}
.tier--none .tier__icon { opacity: .3; }
.tier--none .tier__lab { color: var(--text-mute); background: none; }

.empty { padding: 44px; margin: 0; text-align: center; color: var(--text-mute); }

/* ---------- footer ---------- */

.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  margin-top: 30px; font-size: 12.5px; color: var(--text-mute);
}

/* ---------- modal ---------- */

.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 22px; }
.modal[hidden] { display: none; }
.modal__scrim {
  position: absolute; inset: 0; background: rgba(0, 0, 0, .72);
  animation: fade .22s ease;
}

.modal__card {
  position: relative; width: min(430px, 100%); max-height: 90vh; overflow: auto;
  padding: 30px 26px 26px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--line-2);
  animation: pop .28s var(--ease);
}

.modal__x {
  position: absolute; top: 16px; right: 16px; cursor: pointer;
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; background: var(--card-2); color: var(--text-dim);
  transition: color .2s, background .2s, transform .25s var(--ease);
}
.modal__x svg { width: 17px; height: 17px; }
.modal__x:hover { color: var(--text); background: var(--card-3); }

/* ---------- profile ---------- */

.pf { text-align: center; }

.pf__avatar {
  width: 128px; height: 128px; margin: 4px auto 16px;
  border-radius: 50%; overflow: hidden;
  background: var(--card-2);
  border: 3px solid var(--ring, var(--line-2));
  display: grid; place-items: center;
  animation: pop .4s .05s var(--ease) backwards;
}
.pf__avatar img { width: 118%; height: auto; margin-top: 12%; }
.pf__avatar--1 { --ring: #e8b845; }
.pf__avatar--2 { --ring: #b6c2cb; }
.pf__avatar--3 { --ring: #c47b3c; }

.pf__name { margin: 0; font-size: 27px; font-weight: 800; letter-spacing: -.02em; }

.pf__title {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  padding: 7px 16px; border-radius: 100px;
  background: color-mix(in srgb, var(--tt) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tt) 26%, transparent);
  font-size: 15px; font-weight: 700; color: var(--tt);
}
.pf__title svg { width: 17px; height: 17px; }

.pf__region { margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--text-mute); }

.pf__section { margin-top: 26px; text-align: left; }
.pf__section h3 {
  margin: 0 0 9px; font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim);
}

.pf__pos {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--card-2); overflow: hidden; height: 54px; padding-right: 16px;
}
.pf__plate {
  position: relative; width: 74px; height: 100%; flex: none;
  background: var(--plate, #212121);
  clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%);
  display: grid; place-items: center;
}
.pf__plate i {
  font-style: italic; font-weight: 800; font-size: 22px; color: var(--text-mute);
  padding-right: 12px;
}
.pf__plate.rank--1 i, .pf__plate.rank--2 i, .pf__plate.rank--3 i {
  color: #fff; text-shadow: 0 2px 5px rgba(0, 0, 0, .35);
}
.pf__pos svg { width: 20px; height: 20px; color: #e5a93c; flex: none; }
.pf__pos b { font-size: 16px; font-weight: 700; letter-spacing: .02em; }

.pf__tiers {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  padding: 14px 12px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--card-2);
}
.pf__tiers .tier { animation: rowIn .34s var(--ease) backwards; }

/* ---------- toast ---------- */

.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 200;
  padding: 10px 18px; border-radius: 10px;
  background: var(--card-2); border: 1px solid var(--line-2);
  font-size: 13.5px; opacity: 0; pointer-events: none;
  translate: -50% 10px;
  transition: opacity .22s, translate .22s var(--ease);
}
.toast.is-on { opacity: 1; translate: -50% 0; }

/* ---------- keyframes ---------- */

@keyframes rowIn   { from { opacity: 0; transform: translateY(12px); } }
@keyframes fadeUp  { from { opacity: 0; transform: translateY(14px); } }
@keyframes fadeDown{ from { opacity: 0; transform: translateY(-10px); } }
@keyframes fade    { from { opacity: 0; } }
@keyframes pop     { from { opacity: 0; transform: translateY(12px) scale(.97); } }

/* ---------- responsive ---------- */

@media (max-width: 1120px) {
  :root { --tier-w: 41px; }
  .row { grid-template-columns: 178px minmax(130px, 1fr) 80px var(--tiers-w); }
  .rank { width: 178px; }
  .rank__num { font-size: 26px; left: 18px; }
  .row__render { left: 114px; height: 78px; }
  .who__name { font-size: 20px; }
}

@media (max-width: 980px) {
  .nav__links { display: none; }
  /* fill the space left by the nav links instead of forcing a fixed width */
  .search, .search:focus-within { flex: 1; width: auto; min-width: 0; }
  .tiers { flex-wrap: wrap; justify-content: flex-start; }
}

@media (max-width: 900px) {
  .page { width: min(100% - 30px, var(--shell)); }
  .nav { height: auto; padding: 14px; gap: 14px; margin-top: 22px; }
  .panel { border-radius: 14px; padding: 14px; }

  .row {
    grid-template-columns: 124px 1fr;
    grid-template-areas: "rank who" "tiers tiers";
    height: auto; padding: 0 14px 14px 0; gap: 12px 0;
  }
  .rank { grid-area: rank; width: 124px; height: 72px; }
  .rank__plate { clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); }
  .rank__num { left: 12px; font-size: 20px; }
  /* rows are taller than the plate here, so anchor the bust to the plate's
     top edge rather than the bottom of the whole row */
  .row__render { left: 80px; top: 8px; bottom: auto; height: 58px; }
  .who { grid-area: who; padding-left: 10px; }
  .who__name { font-size: 17px; }
  .who__title { font-size: 12.5px; }
  .region { display: none; }
  .tiers { grid-area: tiers; padding-left: 14px; gap: 6px; }
  .tier { width: 40px; }
  .tier__icon { width: 30px; height: 26px; }
  .tier__icon svg { width: 17px; height: 17px; }
  .tier__lab { font-size: 11px; padding: 1px 5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}