/* Two things the art was missing: what a champion costs, and what any of it does.
   Separate from style.css because both are one feature and one review. */

/* ---- cost borders -------------------------------------------------------
   The game draws a champion's cost round its portrait, and a TFT player reads
   it before they read the name -- it is how you tell a 1-cost reroll board
   from a legendary one at a glance. Every generator had the cost in hand;
   _site.icon() now puts it on the image itself, so this is the whole of it.

   Riot's five colours. 2px, drawn inside the declared size (box-sizing is
   border-box site-wide), so a bordered portrait occupies exactly the box an
   unbordered one did and nothing on the page moves. A portrait we cannot
   price carries no class and is unchanged. */
img.c1,img.c2,img.c3,img.c4,img.c5{border:2px solid #8b8b8b}
img.c2{border-color:#1fb27a}
img.c3{border-color:#2e8fe0}
img.c4{border-color:#c34fe0}
img.c5{border-color:#f5b942}

/* ---- the hover card -----------------------------------------------------
   One card on the page at a time, fixed to the viewport rather than flowed
   into it: nothing reflows when it opens, and cards.js is free to flip it to
   whichever side of the icon has room.

   `pointer-events:none` so the card cannot steal the hover that is keeping it
   open -- a card that closes when you move towards it is worse than none. */
#tfcard{position:fixed;left:0;top:0;z-index:60;width:296px;
  max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);overflow:hidden;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 14px 38px rgba(0,0,0,.6);padding:12px 13px;
  font:13px/1.5 var(--sans);color:var(--ink-2);pointer-events:none}
#tfcard[hidden]{display:none}
#tfcard p{margin:0 0 6px}
#tfcard p:last-child{margin-bottom:0}

/* Name, and the one line under it that says what kind of thing this is. */
.tfc-h{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.tfc-h b{display:block;color:var(--ink);font-size:15px;line-height:1.3}
.tfc-h .tfc-sub{display:block;color:var(--dim);font-size:12px;line-height:1.35}
.tfc-art{width:48px;height:48px;border-radius:9px;object-fit:cover;flex:none;
  background:var(--panel-2)}

/* Each block after the head is fenced off, because a card is three or four
   different kinds of fact and they read as one paragraph without it. */
.tfc-ab,.tfc-st,.tfc-rc{border-top:1px solid var(--line-soft);
  margin-top:8px;padding-top:8px}
.tfc-ab>b{display:block;color:var(--accent);font-size:13px;margin-bottom:3px}

/* The stat block: label left, figure right, two columns while there is room.
   Figures in the mono face, like every other number on the site. */
.tfc-st{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 14px}
.tfc-st>div{display:flex;justify-content:space-between;gap:8px;min-width:0}
.tfc-st i{font-style:normal;color:var(--dim);font-size:12px}
.tfc-st b{color:var(--ink);font:600 12px/1.5 var(--mono);white-space:nowrap}

/* A trait's ladder, one rung a line, the count in the badge the site already
   uses for a breakpoint. */
.tfc-bp>div{display:flex;gap:8px;margin-top:5px;align-items:baseline}
.tfc-bp i{font-style:normal;flex:none;min-width:22px;text-align:center;
  font:700 11px/18px var(--mono);color:var(--accent);
  background:var(--accent-soft);border-radius:5px}

/* What an item is built from. */
.tfc-rc{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tfc-rc i{font-style:normal;color:var(--dim);font-size:12px}
.tfc-rc img{width:26px;height:26px;border-radius:5px;object-fit:cover;
  background:var(--panel-2)}
.tfc-rc span{color:var(--ink-2)}

/* A phone: the card is the screen less its margins, and the stats stack. */
@media(max-width:400px){
  #tfcard{width:calc(100vw - 16px);font-size:12.5px}
  .tfc-art{width:42px;height:42px}
}