/* ===== A TEAM, ON THE LOOKUP PAGE =====
   A Riot ID carries its own discriminator and a team has none, so a query
   with no hash is a team name -- which is also why team names are unique
   across Lafter. Published teams only; a roster still being built is a
   captain's working notes and lives on the draft page. */
.team-card {
    max-width: 720px;
    margin: 1.5rem auto 0;
    text-align: left;
    font-family: var(--font-mono);
}
/* The banner: icon, name and where it plays, the five's Mirth big at the end. */
.team-banner {
    display: flex; align-items: center; gap: 16px;
    padding: 18px 22px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
}
.team-badge { flex: none; width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.team-badge-icon { width: 36px; height: 36px; }
.team-badge-blank { font-family: var(--font-head); font-size: 1.6rem; color: var(--gold); }
.team-id { flex: 1 1 auto; min-width: 0; }
.team-name { font-family: var(--font-head); font-size: 2rem; line-height: 1; color: var(--heading); margin: 0 0 6px; overflow-wrap: anywhere; }
.team-org { font-size: 0.9rem; color: var(--text-muted); text-decoration: none; }
.team-org:hover { color: var(--gold); }
/* The region raised at the name's corner, like a ©; the size after a dash. */
.team-region-sup { margin-left: 0.32em; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; color: var(--gold); vertical-align: super; letter-spacing: 0.04em; }
.team-size { margin-left: 0.5em; font-family: var(--font-mono); font-size: 0.9rem; color: var(--gold-dim); vertical-align: middle; }
.team-size-dash { margin-right: 0.45em; color: var(--text-muted); }
.team-id .team-org { display: inline-block; margin-top: 2px; }
/* An open seat: the banner's outline, dashed, and a + where a face would be. */
.team-player.is-open { padding: 0; background: none; border-style: dashed; border-left-width: 1px; }
.team-open { flex: 1; display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: var(--text-muted); text-decoration: none; font-size: 0.78rem; }
.team-player-icon.is-plus { display: grid; place-items: center; background: none; border-style: dashed; border-color: var(--gold-dim); color: var(--gold-dim); font-family: var(--font-mono); font-size: 1.3rem; line-height: 1; }
a.team-open { cursor: pointer; }
a.team-open:hover { color: var(--gold); }
a.team-open:hover .team-player-icon.is-plus { border-style: solid; border-color: var(--gold); color: var(--gold); }
.team-player.is-open:has(a.team-open:hover) { border-color: var(--gold-dim); }
/* Mirth, with every move of it on hover: a list under the number, moving nothing. */
.team-mirth { position: relative; flex: none; display: flex; flex-direction: column; align-items: flex-end; cursor: default; outline: none; }
.team-mirth-n { font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--gold); }
.team-mirth-l { margin-top: 3px; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dim); }
.team-mirth-pop {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 5;
    display: flex; flex-direction: column; gap: 3px;
    width: max-content; max-width: min(340px, 86vw); padding: 8px 10px;
    background: var(--bg-card); border: 1px solid var(--gold-dim); border-radius: 8px;
    box-shadow: 0 10px 26px rgba(0,0,0,calc(0.45 * var(--shk, 1)));
    font-size: 0.68rem; color: var(--text-muted);
    opacity: 0; pointer-events: none; transition: opacity 0.15s;
}
.team-mirth:hover .team-mirth-pop, .team-mirth:focus .team-mirth-pop { opacity: 1; }
.team-mirth-row { display: grid; grid-template-columns: 4.5em 1fr 3.5em; gap: 10px; }
.team-mirth-row > :last-child { text-align: right; }
/* One line where it fits; it wraps inside the box rather than past it. */
.team-mirth-none { white-space: normal; }
.is-up { color: var(--win); }
.is-down { color: var(--loss); }
.team-h { margin: 22px 0 8px; font-family: var(--font-head); font-size: 1.3rem; color: var(--heading); }
/* The roster as banners, two across where there is room. */
.team-players { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.team-player {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 8px;
}
.team-player.is-captain { border-left-color: var(--gold); }
.team-player.is-coach { border-left-color: var(--gold-dim); }
.team-player-icon { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); object-fit: cover; }
.team-player-icon.is-blank { display: grid; place-items: center; background: var(--bg); color: var(--gold); font-family: var(--font-head); font-size: 1.1rem; }
.team-player-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.team-player-name { font-size: 0.82rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-player-name a { color: var(--text); text-decoration: none; }
.team-player-name a:hover { color: var(--gold); }
.team-player-line { font-size: 0.68rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-player-mirth { color: var(--gold); }
.team-player-lane, .team-player-seat { color: var(--gold-dim); }
.team-dot { margin: 0 6px; color: var(--border); }
/* The games, one a row: when, against whom, how it went, what it did to the Mirth. */
.team-games { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.team-game {
    display: grid; grid-template-columns: 4.5em minmax(0, 1fr) 5em auto auto; gap: 12px; align-items: center;
    padding: 8px 12px;
    background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 8px;
    font-size: 0.74rem; color: var(--text-muted);
}
.team-game.is-win { border-left-color: var(--win); }
.team-game.is-loss { border-left-color: var(--loss); }
.team-game-vs { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-game-vs a { color: var(--text); text-decoration: none; }
.team-game-vs a:hover { color: var(--gold); }
.team-game.is-win .team-game-result { color: var(--win); }
.team-game.is-loss .team-game-result { color: var(--loss); }
.team-game-len { margin-left: 8px; opacity: 0.7; }
.team-game-delta { text-align: right; white-space: nowrap; }
.team-empty { margin: 0; font-size: 0.78rem; color: var(--text-muted); }
@media (max-width: 640px) {
    .team-banner { flex-wrap: wrap; }
    .team-mirth { align-items: flex-start; width: 100%; }
    .team-mirth-pop { right: auto; left: 0; }
    .team-game { grid-template-columns: 4.5em minmax(0, 1fr) auto; }
    .team-game-result, .team-game-kda { display: none; }
}