/* Tier list page. Loads on top of style-rules.css. */

.page.wide{ max-width:1000px; }

.lede{
  margin:18px 0 4px;
  font-size:15px;
  color:var(--dim);
  max-width:640px;
}

.tier{
  display:flex;
  align-items:stretch;
  gap:0;
  margin-top:14px;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--slot);
  box-shadow:inset 0 0 0 1px var(--line);
}

/* the letter doubles as the open/close control. when a tier is shut it
   stretches across the full width so it still reads as a row. */
.badge{
  flex:0 0 66px;
  display:flex;
  flex-direction:column;
  align-items:center; justify-content:center;
  gap:4px;
  min-height:52px;
  font-family:var(--font-display);
  font-size:30px;
  line-height:1;
  color:#0B0B0D;
  text-shadow:none;
  cursor:pointer;
  list-style:none;
  position:relative;
}
.badge::-webkit-details-marker{ display:none; }
.badge::marker{ content:''; }

/* caret, flips when the tier is open */
.badge::after{
  content:'';
  position:absolute;
  right:8px; top:50%;
  width:6px; height:6px;
  margin-top:-4px;
  border-right:2px solid rgba(0,0,0,0.55);
  border-bottom:2px solid rgba(0,0,0,0.55);
  transform:rotate(45deg);
  transition:transform .2s;
  opacity:0;
}
.tier:not([open]) .badge{ flex:1 1 auto; }
.tier:not([open]) .badge::after{ opacity:1; }
.tier[open] .badge::after{ opacity:0; }

.t-s .badge{ background:linear-gradient(180deg, #FDE047, #F59E0B); }
.t-a .badge{ background:linear-gradient(180deg, #FF7A45, #E85D04); }
.t-b .badge{ background:linear-gradient(180deg, #F0338A, #B7205F); }
.t-c .badge{ background:linear-gradient(180deg, #A855F7, #7A32C4); }
.t-d .badge{ background:linear-gradient(180deg, #2563EB, #17399B); }
.t-f .badge{ background:linear-gradient(180deg, #7C8FA6, #4A5A6B); }

.grid{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  gap:12px 10px;
  padding:14px 14px 16px;
}

.ch{
  margin:0;
  width:76px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.ch img{
  width:60px; height:60px;
  border-radius:50%;
  object-fit:cover;
  background:#000;
  box-shadow:0 3px 8px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08);
  display:block;
}

.ch figcaption{
  margin-top:6px;
  font-family:var(--font-body);
  font-size:11px;
  line-height:1.25;
  color:var(--dim);
  overflow-wrap:break-word;
  hyphens:auto;
}

@media(max-width:519px){
  .lede{ font-size:14px; }
  .tier{ margin-top:10px; }
  /* the tier letter sits on top rather than down the side, so the full
     width goes to portraits instead of a 46px column */
  .tier{ flex-direction:column; }
  .badge{
    flex:0 0 auto;
    width:100%;
    min-height:30px;
    flex-direction:row;
    gap:8px;
    justify-content:center;
    font-size:18px;
  }
  .badge::after{ opacity:1; right:12px; }
  .tier[open] .badge::after{ opacity:1; transform:rotate(-135deg); margin-top:0; }
  .grid{ gap:10px 8px; padding:12px 8px 14px; }
  .ch{ width:66px; }
  .ch img{ width:50px; height:50px; }
  .ch figcaption{ font-size:10px; line-height:1.2; }
}

/* ---- portrait detail popup (same card as the in-game reel hover).
   One shared element pinned to the viewport so tier boxes cannot clip it. ---- */
#tierpop{
  position:fixed; width:210px; padding:10px 12px; border-radius:10px;
  background:#14131A;
  box-shadow:0 12px 30px rgba(0,0,0,.75), inset 0 0 0 1px var(--line);
  opacity:0; pointer-events:none;
  transition:opacity .13s;
  z-index:90; text-align:left;
}
#tierpop.on{ opacity:1; }

#tierpop .pop-n{ font-family:var(--font-body); font-weight:800; font-size:13px; color:var(--bone); }
#tierpop .pop-c{ font-family:var(--font-mono); font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--dim); margin-top:3px; line-height:1.5; }
#tierpop .pop-b{ font-family:var(--font-mono); font-size:11px; color:var(--gold); margin-top:4px; }
#tierpop .pop-t{ display:flex; flex-wrap:wrap; gap:4px; margin-top:7px; }

#tierpop .tag{
  font-family:var(--font-mono); font-size:9px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  padding:1px 6px; border-radius:99px; white-space:nowrap;
  background:color-mix(in srgb, currentColor 15%, transparent);
  border:1px solid color-mix(in srgb, currentColor 40%, transparent);
}
#tierpop .tag.hk{ color:var(--tag-hk); }
#tierpop .tag.sp{ color:var(--tag-sp); }
#tierpop .tag.rc{ color:var(--tag-rc); }
#tierpop .tag.ry{ color:var(--tag-ry); }
#tierpop .tag.ld{ color:var(--tag-ld); }
#tierpop .tag.dd{ color:var(--c-dead); }
#tierpop .tag.fp{ color:var(--tag-fp); }
#tierpop .tag.fz{ color:var(--tag-fz); }
#tierpop .tag.fl{ color:var(--tag-fl); }
#tierpop .tag.sw{ color:var(--c-sword); }