/* ------------------------------------------------------------------
   Roster — player booklets.
   Each player is a small booklet: a colored spine on the left with the
   role running up it, and four pages (Card · Favs · Bio · Clip) that
   turn over the spine. Five fit across one row on a desktop screen.
   Loaded by roster.html after app.css, so it overrides the old card.
------------------------------------------------------------------ */

/* five across, subs the same size, partial rows centered */
.rgrid{display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:14px; margin-top:18px; perspective:none}
.rgrid > .bk, .rgrid.subs > .bk{flex:0 1 calc((100% - 56px) / 5); max-width:none; min-width:196px}

/* ---------- the booklet shell ---------- */
.rgrid .card.bk{
  --page-h:282px;
  /* every page is washed in the player's color */
  --page-bg:color-mix(in srgb, var(--cc) 20%, var(--surface));
  --page-top:color-mix(in srgb, var(--cc) 34%, var(--surface));
  display:flex; flex-direction:row; gap:0; padding:0; overflow:visible;
  background:none; border:0; box-shadow:none; border-radius:0;
  will-change:auto; transform:none;
}
.rgrid .card.bk[data-color]{background:none; border:0}
.rgrid .card.bk:not([data-color]){--cc:#4A525E}            /* no color picked: a plain graphite binding */
:root[data-theme="light"] .rgrid .card.bk{--page-bg:color-mix(in srgb, var(--cc) 13%, var(--surface)); --page-top:color-mix(in srgb, var(--cc) 24%, var(--surface))}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .rgrid .card.bk{--page-bg:color-mix(in srgb, var(--cc) 13%, var(--surface)); --page-top:color-mix(in srgb, var(--cc) 24%, var(--surface))}
}
.rgrid .card.bk > *{z-index:auto}

/* spine: the card color, role reading up it, team mark at the foot */
.bk-spine{
  position:relative; flex:0 0 30px; display:flex; flex-direction:column; align-items:center;
  justify-content:space-between; padding:12px 0 10px; border-radius:5px 0 0 5px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.14) 0 1px, transparent 1px 24px, rgba(0,0,0,.28) 24px 25px, transparent 25px),
    linear-gradient(90deg, color-mix(in srgb, var(--cc) 78%, #000) 0%, var(--cc) 38%, color-mix(in srgb, var(--cc) 82%, #000) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), var(--shadow);
  z-index:2;
}
/* stitching down the binding */
.bk-spine::after{
  content:""; position:absolute; top:8px; bottom:8px; right:3px; width:0;
  border-right:1.5px dashed rgba(255,255,255,.28);
}
.bk-role{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--disp); font-weight:800; font-size:14px; letter-spacing:.2em; text-transform:uppercase;
  color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.35); white-space:nowrap; line-height:1;
  margin-left:-3px;
}
.bk-spine .cog{width:24px; height:24px; margin-left:-3px; color:rgba(255,255,255,.8); border-radius:4px}
.bk-spine .cog svg{width:15px; height:15px}
.bk-spine .cog:hover, .bk.editing .bk-spine .cog{color:#fff; background:rgba(0,0,0,.28); border-color:rgba(255,255,255,.25)}
.bk-mark{width:18px; height:18px; object-fit:contain; margin-left:-3px; filter:brightness(0) invert(1) drop-shadow(0 1px 0 rgba(0,0,0,.3)); opacity:.75}

/* the pages: a stack, with the edges of the pages underneath showing on the right */
.bk-body{
  position:relative; flex:1 1 auto; min-width:0; display:flex; flex-direction:column;
  background-color:var(--page-bg);
  border:1px solid color-mix(in srgb, var(--cc) 34%, var(--rule)); border-left:0;
  border-radius:0 5px 5px 0;
  box-shadow:
    2px 1px 0 -1px var(--surface-2), 3px 1px 0 -1px color-mix(in srgb, var(--cc) 30%, var(--rule)),
    5px 2px 0 -2px var(--surface-2), 6px 2px 0 -2px color-mix(in srgb, var(--cc) 22%, var(--rule)),
    var(--shadow);
  margin-right:6px;
}
.bk-pages{position:relative; height:var(--page-h); perspective:900px; perspective-origin:0 50%}
.bk-page{
  position:absolute; inset:0; display:flex; flex-direction:column; overflow:hidden;
  background-color:var(--page-bg);
  background-image:
    repeating-linear-gradient(135deg, var(--tex) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, var(--page-top), var(--page-bg) 70%);
  transform-origin:0 50%; backface-visibility:hidden; border-radius:0 5px 0 0;
}
.bk-page[hidden]{display:none}
/* the gutter: a soft crease where the page meets the spine */
.bk-page::before{
  content:""; position:absolute; inset:0 auto 0 0; width:14px; pointer-events:none; z-index:3;
  background:linear-gradient(90deg, rgba(0,0,0,.30), transparent);
}
.bk.turning{pointer-events:none}
.bk-page > *{position:relative; z-index:1}
/* the team germ in the player's color, big and faint, bleeding off the bottom right of every page */
.bk-page > .bk-germ{
  position:absolute; z-index:0; width:104%; aspect-ratio:1; right:-30%; bottom:-20%;
  transform:rotate(-14deg); opacity:.22; pointer-events:none;
  --g1:var(--cc); --g2:color-mix(in srgb, var(--cc) 55%, #fff); --g3:var(--page-bg);
}
.bk-cover > .bk-germ{bottom:-34%; right:-34%; opacity:.26}

/* ---------- page 1: the card ---------- */
.bk-cover{padding:0}
.bk .bk-cover .av{
  width:100%; height:calc(var(--page-h) - 80px); flex:0 0 auto; border:0; border-radius:0 5px 0 0;
  background:radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--cc) 45%, transparent), transparent 75%);
  font-size:46px; color:color-mix(in srgb, var(--cc) 40%, var(--ink));
}
.bk .bk-cover .av img{object-position:50% 30%}
/* fade the photo into the page so the name can sit on it */
.bk .bk-cover .av::after{
  content:""; position:absolute; inset:auto 0 0 0; height:46%; pointer-events:none;
  background:linear-gradient(180deg, transparent, var(--page-bg) 96%);
}
.bk .bk-cover .av .hint{z-index:2; top:0; bottom:auto}
.bk:not(.editing) .av{cursor:default}
.bk:not(.editing) .av .hint{display:none}

/* rating: a dark badge in the photo's top right corner */
.bk .rating{
  position:absolute; top:8px; right:8px; left:auto; width:auto; z-index:4;
  padding:5px 7px 6px; border-radius:4px; gap:3px;
  background:rgba(8,10,14,.72); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  box-shadow:0 0 0 1px rgba(255,255,255,.08);
}
.bk .rating .favk{color:rgba(255,255,255,.62); font-size:8px; letter-spacing:.16em}
.bk .rating b{font-size:20px; color:#fff}
.bk .rating.hi b{color:#6FD39A}
.bk .rating.lo b{color:#FF8A7A}
.bk .rating.zero b{color:rgba(255,255,255,.5)}

.bk-id{position:relative; z-index:2; margin-top:-30px; padding:0 12px 0 14px; display:flex; flex-direction:column; gap:9px; min-width:0}
.bk .handleout{
  margin:0; font-family:var(--disp); font-weight:800; font-size:25px; line-height:1; letter-spacing:-.015em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 10px color-mix(in srgb, var(--surface) 70%, transparent);
}
.bk .handleout.long{font-size:20px}
.bk .links{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.bk .lnk{width:26px; height:26px; border-radius:6px}
.bk .lnk-steam{border-radius:50%}

/* ---------- page 2: favorites ---------- */
.bk-favpage .favs{display:flex; flex-direction:column; height:100%; padding:14px 12px 10px 18px}
.bk-fav{flex:1 1 0; display:flex; flex-direction:column; justify-content:center; gap:7px; min-height:0}
.bk-fav + .bk-fav{border-top:1px dashed color-mix(in srgb, var(--cc) 26%, var(--rule))}
.bk-fav .favk{text-align:left}
.bk-favv{display:flex; align-items:center; gap:10px; min-width:0}
.bk-favpic{flex:0 0 auto; display:grid; place-items:center; width:40px; height:40px}
.bk-favpic .mapic.favmap{width:40px; height:40px; object-fit:contain}
.bk-favpic.gun{
  width:76px; height:34px; border-radius:17px;
  background:color-mix(in srgb, var(--cc) 22%, #F4F5F7);
}
.bk-favpic.gun .favgun{width:62px; height:28px; object-fit:contain; color:#1b1f25}
.bk-favname{font-family:var(--disp); font-weight:700; font-size:15px; line-height:1.1; min-width:0; overflow-wrap:anywhere}
.bk-tenure{font-family:var(--disp); font-weight:800; font-size:34px; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.bk-tenure small{font-family:var(--mono); font-weight:500; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-left:6px}
.bk-favpage .favv.dim{color:var(--ink-3)}

/* ---------- page 3: bio ---------- */
.bk-bio .bioblock{display:flex; flex-direction:column; gap:10px; height:100%; padding:16px 12px 10px 18px; overflow:auto}
.bk-bio .bioout{font-size:14px; line-height:1.55}
.bk-bio .bioline{flex-direction:column; align-items:flex-start; gap:6px; margin-top:auto; padding-top:10px;
  border-top:1px dashed color-mix(in srgb, var(--cc) 26%, var(--rule))}
.bk-bio .bioline .sep{display:none}

/* ---------- page 4: highlight clip ---------- */
.rgrid .bk .bk-clip .cback{display:flex; flex-direction:column; gap:10px; height:100%; padding:16px 12px 12px 18px}
.bk-clip .vprev{flex:1 1 auto; min-height:0; aspect-ratio:auto; width:100%}
.bk-clip .vprev .play{width:50px; height:50px}
.bk-clip .cb-links{font-family:var(--mono); font-size:10.5px}
.bk-clip .cb-links a{color:var(--ink-2)}

/* ---------- foot: page tabs + the edit cog ---------- */
.bk-foot{
  display:flex; align-items:center; gap:4px; padding:4px 6px 4px 10px;
  border-top:1px solid color-mix(in srgb, var(--cc) 26%, var(--rule-2));
  background:color-mix(in srgb, var(--cc) 12%, var(--sunk)); border-radius:0 0 5px 0;
}
.bk-tabs{display:flex; justify-content:space-between; gap:0; flex:1 1 auto; min-width:0}
.bk-tab{
  appearance:none; background:none; border:0; cursor:pointer; position:relative;
  font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); padding:7px 5px 8px; border-radius:3px;
}
.bk-tab:hover{color:var(--ink)}
.bk-tab[aria-pressed="true"]{color:var(--ink)}
.bk-tab[aria-pressed="true"]::after{
  content:""; position:absolute; left:5px; right:5px; bottom:2px; height:2px; border-radius:2px;
  background:color-mix(in srgb, var(--cc) 70%, var(--brand, #F2294F));
}
.rgrid .card.bk:not([data-color]) .bk-tab[aria-pressed="true"]::after{background:var(--brand, #F2294F)}
.bk-tab:focus-visible{outline:2px solid var(--ct); outline-offset:1px}

/* ---------- editing: the card page stays up (for the avatar), the fields open under it ---------- */
.bk.editing .bk-pages{height:auto}
.bk.editing .bk-page{display:none}
.bk.editing .bk-cover{display:flex; position:relative; inset:auto; padding-bottom:12px}
.bk.editing .bk-cover .av{cursor:pointer}
.bk.editing .bk-foot{display:none}
.bk.editing .editpanel{display:flex; padding:12px 12px 14px 14px; border-top:1px dashed var(--rule-2)}
.bk .editpanel .f3{grid-template-columns:1fr}
.bk .editpanel .favedit{grid-template-columns:1fr}
.bk .editpanel .panelacts{flex-wrap:wrap}
.bk.cdirty .bk-body{box-shadow:var(--shadow), 0 0 0 2px var(--t-edge)}

/* ---------- smaller screens: fewer per row ---------- */
@media (max-width:1100px){ .rgrid > .bk, .rgrid.subs > .bk{flex-basis:calc((100% - 28px) / 3)} }
@media (max-width:700px){  .rgrid > .bk, .rgrid.subs > .bk{flex-basis:calc((100% - 14px) / 2); min-width:0} .rgrid .card.bk{--page-h:280px} }
@media (max-width:440px){  .rgrid > .bk, .rgrid.subs > .bk{flex-basis:100%; max-width:340px} .rgrid .card.bk{--page-h:360px} }
.bk-clip .vprev.none > div{display:flex; flex-direction:column; align-items:center}
.bk-clip .vprev.none{background:color-mix(in srgb, var(--page-bg) 70%, transparent); border-color:color-mix(in srgb, var(--cc) 40%, var(--rule))}
/* two favorites now (tenure moved to the bio), so they get more room */
.bk-favpage .bk-favv{flex-direction:column; align-items:flex-start; gap:8px}
.bk-favpage .bk-favpic{width:58px; height:58px}
.bk-favpage .bk-favpic .mapic.favmap{width:58px; height:58px}
.bk-favpage .bk-favpic.gun{width:112px; height:48px; border-radius:24px}
.bk-favpage .bk-favpic.gun .favgun{width:92px; height:40px}
.bk-favpage .bk-favname{font-size:17px}
/* favorites: centered, icon over name */
.bk-favpage .favs{padding-left:14px; padding-right:10px}
.bk-favpage .bk-fav{align-items:center; text-align:center}
.bk-favpage .bk-fav .favk{text-align:center}
.bk-favpage .bk-favv{align-items:center; text-align:center}
/* bio facts: small labels over their values — Name and Age side by side, Location and Tenure full width */
.bk-bio .bk-facts{display:grid; grid-template-columns:1fr 1fr; gap:9px 10px; margin:auto 0 0; padding-top:12px;
  flex-direction:initial; align-items:start; font-family:var(--mono); font-size:11.5px; letter-spacing:.03em}
.bk-facts .bi{display:flex; flex-direction:column; gap:3px; min-width:0}
.bk-facts .bi:nth-child(n+3){grid-column:1 / -1}
.bk-facts dt{margin:0; font-size:9px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.bk-facts dd{margin:0; color:var(--ink); min-width:0; overflow-wrap:anywhere}
.bk-facts dd.ph{color:var(--ink-3)}
/* favorites without labels: spread the two evenly */
.bk-favpage .bk-fav{gap:0}