/* LOOKUP PAGE */
/* Numbers read in mono; the script faces are for headings and for the pieces
   meant to look hand-made.
   body was a handwriting script, so a page of data had to say otherwise --
   and this one never did. Every rule that remembered to set mono got it and
   everything else was handwriting, which is why the line above a match read
   in one font and the ten rows of numbers under it read in another. Set on
   the section so the whole page inherits it; the headings below name Caveat
   themselves and keep it. */
.lookup-section {
    max-width: 880px; margin: 3rem auto; padding: 1.5rem 2rem; text-align: center;
    font-family: var(--font-mono);
}
.lookup-section h1 { font-family: var(--font-head); font-weight: 700; font-size: 2rem; color: var(--heading); margin-bottom: 1.5rem; }
/* width AND max-width: .lookup-top centres its children, and a centred flex
   item is sized by its contents, so max-width alone never bound -- the bar
   stayed as wide as an input's default 20 characters however high the cap. */
.lookup-bar { display: flex; gap: 0.5rem; width: 100%; max-width: 620px; margin: 0 auto; }
/* The input and its suggestion list, positioned together. */
.lookup-field { position: relative; flex: 1; min-width: 0; display: flex; }
.lookup-bar input { flex: 1; width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 0.8rem 1.2rem; border-radius: 4px; font-family: var(--font-mono); font-size: 0.85rem; outline: none; }
.lookup-bar input:focus { border-color: var(--gold-dim); }
/* The region picker matches the box it sits beside rather than the page it
   sits on. It was the browser's own control -- page font, native arrow, its
   own idea of padding -- next to a monospace field, which read as something
   that had been forgotten rather than chosen.

   appearance:none takes the native arrow with it, so one is drawn as a
   background image; the padding on the right is the room it needs. */
.lookup-bar select {
    appearance: none; -webkit-appearance: none;
    padding: 0.8rem 2rem 0.8rem 0.9rem;
    background-color: var(--bg);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23c9a84c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 10px 7px;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    outline: none;
}
.lookup-bar select:hover { border-color: var(--gold-dim); }
.lookup-bar select:focus-visible { border-color: var(--gold-dim); outline: 2px solid var(--gold-dim); outline-offset: 1px; }
/* The open list is drawn by the OS on some browsers and ignores most of this;
   font and colours are what it does take. */
.lookup-bar select option {
    background: var(--bg-card);
    color: var(--text);
    font-family: var(--font-mono);
}

/* ===== Already looked up =====
   Accounts this site has already resolved, offered under the box. Drawn over
   the page rather than in it: pushing the results down every time the box
   takes focus would move the thing you were about to read. */
.lookup-suggest {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
    margin: 0; padding: 4px; list-style: none;
    max-height: 320px; overflow-y: auto;
    text-align: left;
    background: var(--bg-card, #140d0d);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 12px 28px rgba(0,0,0,calc(0.45 * var(--shk, 1)));
}
.lookup-suggest[hidden] { display: none; }
.ls-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: 4px; cursor: pointer;
    font-family: var(--font-mono); font-size: 0.78rem;
}
.ls-row:hover, .ls-row.on { background: rgba(201,168,76,0.12); }
.ls-icon { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.ls-icon-blank { background: var(--border); }
/* The name gives, everything else keeps its size: a long Riot ID should
   truncate rather than push the rank off the end of the row. */
.ls-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.ls-tag { color: var(--text-muted); }
.ls-rank { flex: none; font-size: 0.7rem; color: var(--gold); }
.ls-rank.isUnranked { color: var(--text-muted); }
/* The shard, on the right-hand end of the row. Fixed width so the ranks
   above and below it line up rather than stepping in and out as NA, EUNE and
   KR take different amounts of space. */
.ls-region {
    flex: none; width: 3.2rem; text-align: right;
    font-family: var(--font-mono); font-size: 0.62rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
/* On a phone the box, the region picker and the button on one row leave the
   input about nine characters wide, and every suggestion under it truncates
   to an ellipsis. The box gets the row to itself instead. */
@media (max-width: 560px) {
    .lookup-bar { flex-wrap: wrap; }
    .lookup-field { flex: 1 1 100%; }
    .lookup-bar select, .lookup-bar button { flex: 1 1 auto; }
}
.lookup-bar button { background: var(--accent); border: 1px solid var(--accent-border); color: var(--accent-text); padding: 0.8rem 1.5rem; border-radius: 4px; font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; cursor: pointer; }
.lookup-bar button:hover { border-color: var(--gold); }

/* LOOKUP RESULTS */
.lookup-loading { color: var(--text-muted); font-size: 0.85rem; margin-top: 2rem; }
/* The search button while it searches: the arrow turns, the width holds. */
.lookup-bar button { min-width: 6.2rem; }
.lookup-bar button.isBusy { cursor: progress; }
.lookup-spin { width: 1.1em; height: 1.1em; vertical-align: -0.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: lookupSpin 0.9s linear infinite; }
@keyframes lookupSpin { to { transform: rotate(360deg); } }

/* ===== Tournaments =====
   Between the banner and the score, the same distance from each: the
   tournaments they are in, one open at a time, with their Mirth there. */
.tourn {
    position: relative;
    margin: 22px 0 0;
    padding: 0 18px 40px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card);
    font-family: var(--font-mono); text-align: center;
}
/* The slider is the drop the org pages and Scoreboards hang from the bar
   (.nav-sub): square on top, flush with the block's own border, rounded
   underneath, the pills inside with a rule between. */
.tourn-tabs {
    width: max-content; max-width: calc(100% - 2rem);
    margin: -1px auto 0;
    display: flex; align-items: center; justify-content: center; gap: 3px;
    padding: 5px 8px;
    background: var(--bg-card);
    border: 1px solid var(--border); border-top: none;
    border-radius: 0 0 14px 14px;
    overflow-x: auto; scrollbar-width: none;
}
.tourn-tabs::-webkit-scrollbar { display: none; }
.tourn-rule { flex: none; width: 1px; height: 14px; margin: 0 6px; background: var(--border); }
.tourn-tab {
    flex: none; height: 24px; line-height: 24px; padding: 0 14px;
    background: transparent; border: 1px solid transparent; border-radius: 999px;
    color: var(--text-muted); font-size: 0.84rem; cursor: pointer; white-space: nowrap;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tourn-tab:hover { color: var(--gold); }
.tourn-tab.on { color: var(--gold); border-color: var(--gold-dim); background: rgba(201,168,76,0.12); }
.tourn-body { display: flex; flex-direction: column; align-items: center; padding: 18px 0 0; }
.tourn-mirth { font-size: 3.1rem; font-weight: 800; line-height: 1; color: var(--gold); }
.tourn-unit { margin-top: 5px; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dim, var(--gold)); }
.tourn-sub { margin-top: 8px; font-size: 0.76rem; color: var(--text-muted); }
/* The two ways in, in the bottom corners. */
.tourn-links a {
    position: absolute; bottom: 12px;
    color: var(--text-muted); font-size: 0.72rem; text-decoration: none;
    border-bottom: 1px solid transparent;
}
.tourn-links a:first-child { left: 18px; }
.tourn-links a:last-child { right: 18px; }
.tourn-links a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.tourn:not(:has(.tourn-links)) { padding-bottom: 18px; }
.lookup-error { color: #e74c3c; font-size: 0.85rem; margin-top: 1.5rem; }
.lookup-unavailable { color: var(--text-muted); font-size: 0.8rem; margin-top: 2rem; line-height: 1.6; }

.player-card {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1.5rem;
    margin-top: 2rem;
    text-align: left;
}
.player-card { flex-wrap: wrap; }
/* Their other accounts, under a line across the banner: a small banner each. */
.player-others { flex: 1 1 100%; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 0.6rem; }
.player-other { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.8rem 0.45rem 0.5rem; border: 1px solid var(--border); border-radius: 6px; text-decoration: none; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.7rem; transition: border-color 0.15s; }
.player-other:hover { border-color: var(--gold-dim); }
.player-other img, .player-other-blank { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--gold-dim); flex: none; }
.player-other-blank { background: var(--bg); }
.player-other-text { display: flex; flex-direction: column; gap: 2px; }
.player-other b { font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--heading); line-height: 1.1; }
.player-icon { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--gold-dim); }
.player-info { flex: 1; }
.player-name { font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; color: var(--heading); }
.player-tag { color: var(--text-muted); font-size: 0.9rem; }
.player-level { color: var(--text-muted); font-size: 0.8rem; }
.player-region { font-family: var(--font-mono); font-size: 0.72rem; color: var(--gold-dim); letter-spacing: 0.04em; }
/* An account that has answered on more than one server says so. Dotted like
   the other things on this page that explain themselves on hover. */
.player-region.has-more {
    position: relative;
    border-bottom: 1px dotted var(--gold-dim);
    cursor: help;
    outline: none;
}
.region-pop {
    position: absolute; z-index: 5;
    top: calc(100% + 8px); left: 0;
    display: none;
    min-width: 15rem; max-width: 22rem;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--gold-dim); border-radius: 8px;
    box-shadow: 0 8px 22px rgba(0,0,0,calc(0.45 * var(--shk, 1)));
    text-align: left;
    cursor: auto;
}
.player-region.has-more:hover .region-pop,
.player-region.has-more:focus .region-pop,
.player-region.has-more:focus-within .region-pop { display: block; }
.region-pop-head {
    display: block;
    font-family: var(--font-mono); font-size: 0.62rem;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}
/* One step per server, running down. The arrow between them is what makes it
   a move rather than a list of places. */
.region-step {
    display: flex; align-items: baseline; gap: 10px;
    padding: 3px 0;
    font-family: var(--font-mono); font-size: 0.72rem;
    color: var(--text-muted);
}
.region-where { min-width: 3.2rem; color: var(--text); }
.region-when { flex: 1; font-size: 0.66rem; }
.region-lvl { font-size: 0.66rem; }
.region-arrow {
    display: block; margin-left: 1.1rem;
    font-size: 0.68rem; line-height: 1;
    color: var(--gold-dim); opacity: 0.7;
}
/* Where they are now, which is the end of the trail. */
.region-step.is-current .region-where { color: var(--gold); font-weight: 700; }
.region-step.is-current .region-when { color: var(--gold-dim); }
.player-unranked { color: var(--text-muted); font-size: 0.8rem; font-style: italic; }
/* The banner is about a split that has ended, and one part of it could not
   come along. Beside the rank, because the rank is that part. */
/* ===== What this account has been =====
   On the name, because the name is the part with a history. Opens on hover
   with no delay: a panel that waits reads as a page that did not react. */
.player-name[data-account-history] { position: relative; cursor: help; outline: none; }
/* The name itself copies; the history still shows on hover. */
.player-id { cursor: pointer; }
.acct-pop {
    position: absolute; z-index: 6;
    top: calc(100% + 8px); left: 0;
    display: none;
    min-width: 20rem; max-width: 28rem;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--gold-dim); border-radius: 8px;
    box-shadow: 0 8px 22px rgba(0,0,0,calc(0.45 * var(--shk, 1)));
    text-align: left; cursor: auto;
    font-family: var(--font-mono); font-weight: 400;
}
.player-name[data-account-history]:hover .acct-pop:not([hidden]),
.player-name[data-account-history]:focus .acct-pop:not([hidden]),
.player-name[data-account-history]:focus-within .acct-pop:not([hidden]) { display: block; }
.acct-head {
    display: block;
    font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-muted);
    margin: 8px 0 4px;
}
.acct-head:first-child { margin-top: 0; }
.acct-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: 12px; align-items: baseline;
    padding: 3px 0;
    border-top: 1px solid var(--border);
    font-size: 0.7rem; color: var(--text-muted);
}
.acct-row > span:first-child { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-row > span:last-child { font-size: 0.64rem; }
/* The name they carry now. */
.acct-row.is-current > span:first-child { color: var(--gold); }

.player-asof {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; margin-left: 8px;
    flex: none; align-self: center;
    border: 1px solid var(--gold-dim); border-radius: 50%;
    color: var(--gold-dim);
    font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700;
    line-height: 1;
    cursor: help;
    transition: color 0.15s, border-color 0.15s;
}
.player-asof:hover, .player-asof:focus-visible {
    color: var(--gold); border-color: var(--gold); outline: none;
}
/* One column per ranked queue: queue, rank, LP, record, stacked and centred
   on each other. A second queue is a second column beside the first, not a
   second sentence -- and the group as a whole is one item in the banner's
   own vertical centring rather than a stack that drags it off centre. */
.player-ranks { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
/* Each queue its own square bubble; hovering it lists every rank it has been. */
.rank-col {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    gap: 0.18rem;
    padding: 0.55rem 0.9rem;
    background: var(--bg-card);
    border: 1px solid var(--border); border-radius: 4px;
    font-family: var(--font-mono);
    line-height: 1.25;
    white-space: nowrap;
    cursor: default;
    transition: border-color 0.15s;
}
.rank-col:hover, .rank-col:focus-visible { border-color: var(--gold-dim); outline: none; }
.rank-pop {
    position: absolute; z-index: 6;
    top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    display: none;
    width: max-content;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--gold-dim); border-radius: 8px;
    box-shadow: 0 8px 22px rgba(0,0,0,calc(0.45 * var(--shk, 1)));
    text-align: left;
}
.rank-col:hover .rank-pop, .rank-col:focus .rank-pop, .rank-col:focus-within .rank-pop { display: block; }
.rank-pop-head { display: block; margin-bottom: 4px; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.rank-pop-row {
    display: grid; grid-template-columns: 7.5rem 3.8rem 5.4rem auto;
    column-gap: 12px; align-items: baseline;
    padding: 3px 0; border-top: 1px solid var(--border); white-space: nowrap;
    font-size: 0.7rem; color: var(--text-muted);
}
.rank-pop-rank { color: var(--gold); font-weight: 600; }
.rank-pop-row:first-of-type .rank-pop-when { color: var(--text); }
.rank-pop-none { display: block; font-size: 0.7rem; color: var(--text-muted); }
.rank-pop-head.is-sub { margin-top: 8px; }
.rank-pop-row.is-before { grid-template-columns: 7.5rem auto; }
.rank-pop-label { color: var(--text-muted); }
.rank-queue {
    font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-muted);
}
.rank-tier { font-size: 0.9rem; font-weight: 600; color: var(--gold); }
.rank-lp { font-size: 0.74rem; color: var(--text); }
.rank-record { font-size: 0.7rem; color: var(--text-muted); }

/* LIGHT MODE — component-specific overrides that hardcoded values can't cover via variables alone */
:root[data-theme="light"] .lookup-error { color: #b8362b; }

/* The panel is dense tabular content; the section around it is centred for
   the search bar, which is wrong for everything below it. */
.perf-panel { text-align: left; }

/* ===== Lookup: performance panel =====================================
 *
 * Every value shown here is a percentile inside the player's own lobby, so
 * the visual language is deliberately a filled track out of 100 rather than a
 * raw number on an unstated scale -- the bar IS the meaning.
 */
/* Waiting on a newer answer: the numbers already on screen stay, quietly. */
.perf-panel.is-busy .perf-head,
.perf-panel.is-busy .perf-cats { opacity: 0.72; transition: opacity 0.15s; }
/* Nothing to show yet -- only the note. */
.perf-panel.is-empty .perf-head,
.perf-panel.is-empty .perf-cats { display: none; }
.perf-note { margin: 0; }
.perf-note[hidden] { display: none; }

.perf-panel {
    position: relative;
    margin-top: 22px;
    padding: 20px 22px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-card);
}

.perf-head {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    align-items: center;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border);
}
.perf-overall { display: flex; flex-direction: column; align-items: center; min-width: 130px; }
.perf-overall-value { font-size: 3.1rem; font-weight: 800; line-height: 1; }
.perf-overall-grade { margin-top: 4px; font-size: 1.02rem; font-weight: 600; letter-spacing: 0.06em; }
.perf-overall-sub   { margin-top: 3px; font-size: 0.84rem; opacity: 0.62; }
.perf-verdict { flex: 1 1 260px; }
.perf-verdict p { margin: 0 0 5px; font-size: 0.94rem; }
/* The one-line explanation is a bubble on the i, not two lines of the panel.
   It costs nothing when nobody wants it, which is most of the time. */
.perf-info::after {
    content: attr(data-tip);
    position: absolute; top: calc(100% + 8px); right: 0;
    width: max-content; max-width: 280px;
    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)));
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.68rem; line-height: 1.5;
    text-align: left; white-space: normal;
    opacity: 0; pointer-events: none;
    transition: opacity 0.15s;
    z-index: 5;
}
.perf-info.showTip::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .perf-info::after { transition: none; } }
/* Not a caption: it says the number above is about something other than the
   tab you are looking at, so it is always visible. */
.perf-fallback { font-size: 0.82rem; color: var(--gold-dim, var(--gold)); margin-top: 8px !important; }

/* The way into the full explanation, top right of the block it explains.
   Quiet until wanted: the score is the point of this panel, not its
   documentation. */
.perf-info {
    position: absolute; top: 12px; right: 14px; z-index: 2;
    width: 20px; height: 20px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.72rem; line-height: 1;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}
.perf-info:hover, .perf-info:focus-visible { opacity: 1; color: var(--gold); border-color: var(--gold-dim); }

/* The explanation itself, inside the shared dialog. */
.scoreDoc { text-align: left; font-size: 0.88rem; line-height: 1.55; }
.scoreDoc p { margin: 0 0 12px; }
.scoreDoc h4 {
    margin: 18px 0 8px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold);
}
.scoreDocList { margin: 0 0 12px; }
.scoreDocList dt {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--heading, var(--text));
    margin-top: 8px;
}
.scoreDocList dd { margin: 2px 0 0; color: var(--text-muted); }

.perf-cats { display: grid; gap: 8px; margin-bottom: 20px; }
.perf-cat {
    display: grid;
    grid-template-columns: 92px 1fr 34px;
    align-items: center;
    gap: 12px;
}
.perf-cat-label { font-size: 0.87rem; opacity: 0.8; }
.perf-cat-track {
    height: 8px;
    border-radius: 4px;
    background: var(--border);
    overflow: hidden;
}
/* The bars travel to their new value as more games arrive, rather than
   snapping: the block is updated in place now, so the transition has
   something to transition from. */
.perf-cat-fill { transition: width 0.35s ease, background 0.25s ease; }
@media (prefers-reduced-motion: reduce) { .perf-cat-fill { transition: none; } }
.perf-cat-fill { display: block; height: 100%; border-radius: 4px; transition: width 0.35s ease; }
.perf-cat-value { font-size: 0.85rem; text-align: right; font-variant-numeric: tabular-nums; opacity: 0.85; }

/* Green/gold/red rather than a single accent ramp: the three bands mean
   "above the lobby", "about the lobby", "below the lobby", and a same-hue ramp
   makes those read as intensity instead of as direction. The class is built
   in lookup.js ('tone-' + scoreTone()), so a search for the full name misses
   it. */
.tone-high { color: #5cbf82; }
.tone-mid  { color: var(--gold); }
.tone-low  { color: var(--red-x); }
/* The fill does not use var(--gold): light mode darkens that token for text,
   which is wrong for a solid bar. One value that reads on both grounds. */
.perf-cat-fill.tone-high { background: #4aa96c; }
.perf-cat-fill.tone-mid  { background: #d9a233; }
.perf-cat-fill.tone-low  { background: #c9483f; }

@media (max-width: 640px) {
}

/* Lookup: the way to ask again, and how old the answer is.

   The button is what gets centred in the banner; the age hangs under it and
   is deliberately NOT part of that centring, so a two-line block does not
   push the arrow off the middle. Absolute positioning is what buys that --
   the wrapper is exactly as tall as the button. */
.player-freshness {
    position: relative;
    /* Above the blocks that come after the card, so the blocked-refresh
       bubble is not painted over by the scoring panel below it. */
    z-index: 3;
    margin-left: auto;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lookup-checked {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--text-muted);
}
/* Gold at rest, not muted: this is the one control on the banner, and a grey
   pill on a dark card was easy to miss entirely. */
.lookup-update {
    width: 34px; height: 34px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(201,168,76,0.08);
    border: 1px solid var(--gold-dim);
    border-radius: 50%;
    color: var(--gold);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.15s;
}
.lookup-update svg {
    width: 16px; height: 16px;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}
.lookup-update:hover { background: rgba(201,168,76,0.18); border-color: var(--gold); transform: rotate(-30deg); }
.lookup-update:focus-visible { outline: 2px solid var(--gold-dim); outline-offset: 2px; }
.lookup-update:disabled { cursor: default; transform: none; }
.lookup-update.is-failed { color: var(--red-x); border-color: var(--red-x); background: rgba(196,64,64,0.1); }

/* Asking Riot: the arrow turns, which is the only thing it could mean. */
@keyframes lookupSpin { to { transform: rotate(360deg); } }
.lookup-update.is-spinning svg { animation: lookupSpin 0.9s linear infinite; }
.lookup-update.is-spinning { opacity: 0.75; }
@media (prefers-reduced-motion: reduce) {
    .lookup-update:hover { transform: none; }
    .lookup-update.is-spinning svg { animation: none; }
}
/* Struck through rather than removed. A missing button says the page cannot
   do this at all; a crossed-out one says it can, but not for you -- and the
   help cursor invites the tooltip that says why. */
/* Crossed out rather than removed: a missing button says the page cannot do
   this at all, a struck-through one says it can, but not for you. There is no
   text to strike any more, so the line is drawn across the circle. */
.lookup-update.is-blocked {
    position: relative;
    /* Dimmed by colour, NOT by opacity. Opacity on the button flattens its
       pseudo-elements too, and the bubble below is one of them -- it came out
       45% transparent with the rank showing through its own text. */
    color: color-mix(in srgb, var(--text-muted) 60%, transparent);
    border-color: color-mix(in srgb, var(--border) 70%, transparent);
    background: transparent;
    cursor: help;
    /* :disabled kills pointer events in some engines, and a tooltip you
       cannot hover is not a tooltip. */
    pointer-events: auto;
}
.lookup-update.is-blocked:hover { transform: none; background: transparent; border-color: var(--border); }
.lookup-update.is-blocked::after {
    content: '';
    position: absolute; left: 50%; top: 50%;
    width: 30px; height: 1px;
    background: currentColor;
    transform: translate(-50%, -50%) rotate(-45deg);
}
/* Why it will not fire, in the same bubble the scoring i uses. ::before,
   because ::after is already drawing the line across the circle.
   Right-aligned: the button sits at the right-hand end of the banner, and a
   bubble centred on it would hang off the card. */
.lookup-update.is-blocked::before {
    content: attr(data-tip);
    /* The scoring panel is a later sibling of the card, so without a stacking
       context of its own the bubble paints underneath it and loses its last
       line. The lift is on .player-freshness; this just has to win inside it. */
    position: absolute; top: calc(100% + 10px); right: 0;
    width: max-content; max-width: 260px;
    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)));
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.68rem; line-height: 1.5;
    text-align: left; white-space: normal;
    opacity: 0; pointer-events: none;
    transition: opacity 0.15s;
    z-index: 6;
}
.lookup-update.is-blocked.showTip::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .lookup-update.is-blocked::before { transition: none; }
}

/* "Why?" next to a player we have never fetched. */
.lookup-why {
    border-bottom: 1px dotted var(--gold-dim);
    color: var(--gold);
    cursor: help;
}
.lookup-why:focus-visible { outline: 2px solid var(--gold-dim); outline-offset: 2px; }

/* ---- Lookup: match history ----------------------------------------------
   A list you read down: what kind of game, whether it was won, then who they
   played and the numbers. Blue for a win and red for a loss, the same two
   colours the game uses for sides. */
.match-block { margin-top: 26px; }
.match-block[hidden] { display: none; }
/* One line. It used to wrap, which meant the filter track never shrank -- a
   flex line that may wrap wraps instead of shrinking -- so the split picker
   dropped to a second row the moment its label grew past "Recent". The track
   scrolls, which is the whole point of the overflow on it, so there is
   nothing to wrap for. */
.match-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: nowrap; }
/* The heading and the picker keep their size; the filter track is the one
   that gives. Without this, nowrap squeezed the words instead. */
.match-head h3 { margin: 0; font-family: var(--font-head); font-size: 1.3rem; color: var(--heading); flex: none; white-space: nowrap; }
/* ===== One slider =====

   A group and the queues inside it sit next to each other on one track:
   Ranked, then Solo/Duo and Flex; Casual, then Draft and Swiftplay. Sliding
   right from a group lands on its own queues, which is what makes it read as
   one control rather than four unrelated buttons -- and it does not push the
   list down the way a second row appearing underneath did. */
.match-filters {
    display: flex; align-items: center; gap: 3px;
    /* Shrinks and scrolls rather than shoving what is beside it onto a second
       line -- which is what the overflow below is for, and it never got the
       chance: the track took its natural width and the split picker wrapped
       the moment its label grew past "Recent". */
    flex: 0 1 auto; min-width: 0;
    padding: 3px;
    background: var(--overlay-soft, rgba(255,255,255,0.03));
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow-x: auto;
    scrollbar-width: none;
}
.match-filters::-webkit-scrollbar { display: none; }
.match-filter {
    flex: none;
    padding: 3px 11px;
    background: transparent; border: 1px solid transparent; border-radius: 999px;
    color: var(--text-muted); font-family: var(--font-mono); font-size: 0.68rem;
    cursor: pointer; white-space: nowrap;
    transition: color 0.15s, border-color 0.15s, background 0.15s, opacity 0.15s;
}
/* The two ways to see more, side by side: ten more from Riot, or everything
   we already hold. */
.match-tail { display: flex; align-items: center; justify-content: center; gap: 8px; }
.match-more {
    padding: 3px 12px;
    background: transparent; border: 1px solid var(--border); border-radius: 999px;
    color: var(--text-muted); font-family: var(--font-mono); font-size: 0.68rem;
    cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.match-filter:hover, .match-more:hover { color: var(--gold); opacity: 1; }
.match-filter.on { color: var(--gold); border-color: var(--gold-dim); background: rgba(201,168,76,0.12); }
/* A group with its queues folded inside it. Pressing the group opens it
   and reads the whole group; the pointer over it opens it for a look. */
.match-filter-set { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.match-filter.isSub { display: none; font-size: 0.64rem; }
.match-filter-set.isOpen .match-filter.isSub,
.match-filter-set.hasSubs:hover .match-filter.isSub { display: inline-block; }
.match-filter-set:not(.isOpen):hover .match-filter.isSub { opacity: 0.6; }
.match-filter-set:not(.isOpen):hover .match-filter.isSub:hover { opacity: 1; }
.match-filter-set + .match-filter-set { border-left: 1px solid var(--border); margin-left: 4px; padding-left: 4px; }
/* A game that ended before it started. Named on the row rather than coloured
   like a loss, because it is neither -- and because the score below counts
   the list minus these, which is unreadable if nothing says which. */
.match-remake {
    margin-left: 7px; padding: 0 5px;
    border: 1px solid var(--border); border-radius: 3px;
    font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-muted);
}
.match-row.is-remake { border-left-color: var(--text-muted); }
.match-row.is-remake .match-champ, .match-row.is-remake .match-kda { opacity: 0.6; }
/* The auto margins were what centred a single button. Two of them each took
   the space, which put one at either end of the row instead of the pair in
   the middle -- the row centres them now. */
.match-more { display: block; margin: 0; padding: 5px 18px; }
.match-tail { margin-top: 10px; }
.match-more:disabled { opacity: 0.5; cursor: default; }
/* Which split you are reading, where the win/loss count used to be -- that
   number is already the first thing the scoring panel says. Same chrome as
   the nav's own menus: an outlined button that goes gold while its menu is
   open, and a panel sized to its longest entry. */
.split-pick { position: relative; margin-left: auto; flex: none; }
.split-btn {
    background: none;
    border: 1px solid var(--border); border-radius: 6px;
    color: var(--text-muted);
    font-family: var(--font-mono); font-size: 0.72rem;
    padding: 4px 10px;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.split-btn:hover, .split-btn[aria-expanded="true"] {
    color: var(--gold); border-color: var(--gold-dim); outline: none;
}
.split-menu {
    position: absolute; z-index: 6;
    top: calc(100% + 6px); right: 0;
    width: max-content; min-width: 7rem;
    display: flex; flex-direction: column;
    padding: 4px;
    background: var(--bg-card);
    border: 1px solid var(--gold-dim); border-radius: 8px;
    box-shadow: 0 8px 22px rgba(0,0,0,calc(0.45 * var(--shk, 1)));
}
.split-menu[hidden] { display: none; }
.split-opt {
    display: flex; align-items: baseline; gap: 8px;
    background: none; border: 0; border-radius: 5px;
    padding: 5px 9px;
    color: var(--text-muted); text-align: left;
    font-family: var(--font-mono); font-size: 0.72rem;
    cursor: pointer;
    transition: color 0.12s, background 0.12s;
}
.split-opt:hover, .split-opt:focus-visible {
    color: var(--text); background: var(--overlay-soft); outline: none;
}
.split-opt.on { color: var(--gold); }
/* Which one is running. Without it the top entry is just a date, and the
   menu gives no way to tell a split that has ended from one that has not. */
.split-now {
    margin-left: auto;
    font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--gold-dim);
}

/* Your own history only. */
.match-breakdown {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px;
    padding: 12px 14px; margin-bottom: 12px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
    text-align: left;
}
.mb-stat { display: flex; flex-direction: column; gap: 2px; }
.mb-wide { grid-column: span 2; }
.mb-val { font-family: var(--font-mono); font-size: 0.86rem; color: var(--gold); }
.mb-label { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); }

/* A block you scroll inside, not a list that runs down the page: the profile
   and the score stay put while you read the games. */
/* Win rate sits between the grade and the game count: the grade says how they
   played, this says how it went, and the count says over what.

   No font of its own. Everything else in this block -- the score, the grade,
   the game count, the category names and their numbers -- inherits the page
   font, and one line of monospace in the middle of them read as a different
   kind of thing rather than the same stat one line down. */
.perf-overall-rate {
    display: block;
    font-size: 0.8rem;
    color: var(--text); margin-top: 2px;
}
/* The record under the score, which switches between the games that were
   scored and all of them. No underline and no caption: this sits inside a
   panel with neither, and a dotted rule under a percentage reads as an error
   mark rather than as an invitation. It brightens on hover like everything
   else here does, and the long hover says what is on screen. */
.perf-overall-record {
    display: block;
    background: none; border: 0; padding: 2px 0;
    font: inherit; color: inherit; text-align: center;
    cursor: default;
    transition: color 0.15s;
}
.perf-overall-record.is-toggle { cursor: pointer; }
/* Both lines, one colour. They were lit differently -- one recoloured, one
   just less faded -- which made a single control look like two things
   reacting to the same pointer. */
.perf-overall-record.is-toggle:hover .perf-overall-rate,
.perf-overall-record.is-toggle:hover .perf-overall-sub,
.perf-overall-record.is-toggle:focus-visible .perf-overall-rate,
.perf-overall-record.is-toggle:focus-visible .perf-overall-sub {
    color: var(--gold);
    opacity: 1;
}
.perf-overall-record:focus-visible { outline: none; }

.match-block { position: relative; }
/* The page scrolls, not the list. A box that scrolls inside a page that also
   scrolls gives you two scrollbars and a wheel that does the wrong one
   depending on where the pointer happens to be. */
.match-list {
    display: flex; flex-direction: column; gap: 6px;
    /* The browser adjusts scroll position by itself when content above the
       viewport changes, which fights the restore after a redraw and landed a
       row off. We put it back deliberately; it should stay where it is put. */
    overflow-anchor: none;
}
.match-list-wrap { position: relative; }

/* ===== The two ways back =====
 *
 * One on each edge of the screen, centred: up to the top of the list, down to
 * the game you opened. Fixed to the viewport rather than sticky inside the
 * list -- sticky can never travel above where the box would have sat in the
 * flow, so the top one could only ever pin itself to the list it was in, and
 * the bottom one has to be reachable from inside a breakdown that is taller
 * than the window.
 *
 * Flush with the edge and rounded only on the inner side, so each reads as
 * something pulled in from off-screen rather than a control floating over the
 * page. */
.edge-btn {
    position: fixed; left: 50%; transform: translateX(-50%);
    z-index: 40;
    height: 26px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 0 12px;
    background: var(--bg-card);
    border: 1px solid var(--gold-dim);
    color: var(--gold);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.edge-btn[hidden] { display: none; }
.edge-btn:hover { background: var(--bg); border-color: var(--gold); }
.edge-btn-top    { top: 0;    border-top: 0;    border-radius: 0 0 8px 8px; }
.edge-btn-bottom { bottom: 0; border-bottom: 0; border-radius: 8px 8px 0 0; }
/* An admin's toolbar tab owns the bottom centre; the page's own bottom tab
   steps left of it, the two side by side rather than one over the other. */
body:has(#lafter-admin-toolbar) .edge-btn-bottom { transform: translateX(calc(-50% - 70px)); }
/* Stroked, unfilled and thin: the same wireframe weight as the draft inbox,
   so the site's drawn glyphs read as one set. */
/* The word the arrow points at. Mono and small: it is a label on a control,
   not a line of the page. */
.edge-label {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.edge-arrow {
    width: 17px; height: 17px;
    flex: none;
    fill: none; stroke: currentColor;
    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.match-row {
    display: grid;
    /* No result word: the colour down the left edge is the whole indicator on
       a row, and Victory/Defeat is on the block that opens. */
    /* Champion first, picture and name together; then the score; then what
       the game was, sitting in the middle where the slack track puts it; then
       the numbers that close the row out. */
    grid-template-columns: 34px 108px 80px 1fr 66px 84px 58px 76px;
    align-items: center; gap: 10px;
    padding: 6px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: 8px;
    font-family: var(--font-mono); font-size: 0.74rem;
    /* The whole row opens the game, so it takes the cursor. Nothing in here
       resizes on open any more -- the game appears above the list. */
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.match-row > * { text-align: left; }
.match-row:hover { border-color: var(--gold-dim); }
.match-row:focus-visible { outline: 2px solid var(--gold-dim); outline-offset: 2px; }
.match-row.is-win  { border-left-color: var(--win); }
.match-row.is-loss { border-left-color: var(--loss); }
/* The one being read, marked in the list so it is findable again. */
.match-row.is-open { border-color: var(--gold); background: rgba(201,168,76,0.06); }
.match-icon {
    /* Big enough to read the champion off the picture alone, which is most of
       what a history is scanned for; the row grew by two pixels to take it. */
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--border);
    object-fit: cover;
}
.match-icon.is-blank { display: block; background: var(--overlay-soft); }
/* Sitting against the picture it belongs to, so the two read as one thing. */
.match-champ {
    color: var(--text); font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The lane, right after the queue it was played in. */
.match-role { color: var(--text-muted); font-size: 0.68rem; white-space: nowrap; }
.match-kda { color: var(--text); white-space: nowrap; }
.match-cs, .match-queue, .match-time, .match-when { color: var(--text-muted); font-size: 0.68rem; }
/* What the game did to the LP, after the queue: green up, red down. */
.match-lp { margin-left: 8px; white-space: nowrap; }
.match-lp.is-up { color: var(--win); }
.match-lp.is-down { color: var(--loss); }
/* "Ranked Solo/Duo" is the longest of these and wraps onto the champion in a
   narrower font than the one we ship; it truncates rather than colliding. */
.match-queue { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Wide enough for "10.3 CS/m" as well as "347 CS", so switching the reading
   never resizes the cell. */
.match-cs { cursor: default; min-width: 76px; }
/* What each column is, over the rows, on the rows' own grid so the words sit
   over the numbers. The CS one is the switch: CS, CS a minute, vision. */
.match-cols {
    display: grid;
    grid-template-columns: 34px 108px 80px 1fr 66px 84px 58px 76px;
    align-items: center; gap: 10px;
    /* The rows' padding plus their borders, so the tracks line up. */
    padding: 0 13px 2px 15px;
    font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-muted);
}
.match-cols > * { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-cols-cs {
    margin: 0; padding: 0; background: none; border: 0;
    font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
    cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px;
}
.match-cols-cs:hover { color: var(--gold); }

/* ===== One game, opened =====

   Its own block under the score, not an unfolding row. A row growing by a
   ten-player table inside a list that scrolls in place moves everything under
   the pointer and takes the scroll position with it; nothing in the list
   changes size now.

   Blue above red, never beside it -- side by side ran the numbers off the
   right of the window, and the two halves are read one after the other
   anyway. */
.match-focus {
    position: relative;
    margin-top: 18px;
    padding: 16px 18px;
    background: var(--bg-card);
    border: 1px solid var(--gold-dim);
    border-radius: 10px;
    text-align: left;
}
.match-focus[hidden] { display: none; }
.focus-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.focus-title {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.78rem; font-weight: 500;
    color: var(--text);
}
.focus-result { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; }
.focus-result.is-win  { color: var(--win); }
.focus-result.is-loss { color: var(--loss); }
/* Top right, out of the reading order and always in the same place whether
   the game loaded or failed to. */
.focus-close { margin-left: auto; }
/* Beside the x: update every player in the game. */
.focus-reload {
    margin-left: auto; margin-right: -4px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0;
    background: none; border: none; color: var(--text-muted); cursor: pointer;
    transition: color 0.15s;
}
.focus-reload + .focus-close { margin-left: 0; }
.focus-reload svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.focus-reload:hover { color: var(--gold); }
.focus-reload.isBusy { color: var(--gold); cursor: default; }
.focus-reload.isBusy svg { animation: focus-spin 0.9s linear infinite; }
@keyframes focus-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .focus-reload.isBusy svg { animation: none; } }

/* One table for both sides, so their columns are the same columns.
   The widths are written down rather than worked out from the contents: the
   CS column's own header switches between "CS" and "CS / min", and a column
   sized by what is in it moves every column after it the moment you press
   that. Fixed layout plus a colgroup means the press changes the words and
   nothing else. */
.match-team-table { width: 100%; border-collapse: collapse; font-size: 0.68rem; table-layout: fixed; }
.match-team-table .col-champ  { width: 20%; }
.match-team-table .col-rank   { width: 6%;  }
.match-team-table .col-name   { width: 26%; }
.match-team-table .col-kda    { width: 14%; }
.match-team-table .col-cs     { width: 14%; }
.match-team-table .col-dmg    { width: 12%; }
.match-team-table .col-vision { width: 8%;  }

/* The best rank we hold for that account, as a badge: G2, D4, M, GM, C.
   Short because it sits beside nine other names, where "Diamond IV" nine
   times is a column of noise. Empty for anyone nobody has looked up -- a
   rank we do not hold is not the same as being unranked. */
.mp-badge {
    display: inline-block;
    min-width: 22px;
    padding: 1px 5px;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--gold);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    text-align: center;
}
.match-team-table th, .match-team-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-team-row th {
    padding: 10px 0 3px;
    font-size: 0.66rem; text-transform: uppercase; letter-spacing: 1px;
}
.match-team:first-of-type .match-team-row th { padding-top: 2px; }
/* The column names, under the side they describe. */
.match-col-row th {
    padding: 2px 8px 3px 0;
    font-weight: 400; text-align: left;
    font-size: 0.6rem; text-transform: uppercase; letter-spacing: 1px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.match-col-row th.mp-cs-head, .match-col-row th.mp-kda-head { cursor: pointer; }
.match-col-row th.mp-cs-head:hover, .match-col-row th.mp-kda-head:hover { color: var(--gold); }
.match-team.is-blue .match-team-row th { color: var(--win); }
.match-team.is-red  .match-team-row th { color: var(--loss); }
.match-team-result { margin-left: 8px; font-size: 0.62rem; color: var(--text-muted); }
.match-team-table th {
    text-align: left; font-weight: 400; padding: 3px 8px 3px 0;
    font-size: 0.6rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.match-team-table th.mp-cs-head, .match-team-table th.mp-kda-head { cursor: pointer; }
.match-team-table th.mp-cs-head:hover, .match-team-table th.mp-kda-head:hover { color: var(--gold); }
.match-team-table td { padding: 3px 8px 3px 0; color: var(--text-muted); white-space: nowrap; }
/* Champion: icon then name, on one baseline. */
.mp-champ { display: flex; align-items: center; gap: 7px; }
.mp-icon { width: 20px; height: 20px; border-radius: 4px; flex-shrink: 0; }
/* A slot with nobody's champion in it still holds its place. */
.mp-icon.is-blank { display: inline-block; background: var(--overlay-soft); }
.match-team-table tr.is-searched .mp-icon { box-shadow: 0 0 0 1px var(--gold); }
.match-team-table tr.is-searched td { color: var(--gold); }
.match-team-table tr.is-me td { font-weight: 700; }
.mp-champ { color: var(--text); }
.match-team-table tr.is-searched .mp-champ { color: var(--gold); }
.mp-name a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.mp-name a:hover { color: var(--gold); border-bottom-color: var(--gold); }

@media (max-width: 820px) {
    /* Compact: the colour down the left says how it went, so the word can go. */
    .match-row, .match-cols { grid-template-columns: 20px 110px 1fr 96px; }
    .match-cs, .match-time, .match-when { display: none; }
    .match-cols > :nth-child(n+6) { display: none; }
    .match-team-table { font-size: 0.64rem; }
    .mp-dmg, .mp-vision { display: none; }
}

/* ===== A block that goes somewhere =====

   The banner, the score and the match history each open onto a page of their
   own, and the hover says so before the click has to prove it: it lifts, its
   edge picks up the gold, and the cursor changes. Only blocks that actually
   lead somewhere get this -- a card that rises under the pointer and then
   does nothing is worse than one that never moved.

   transform and box-shadow only, so nothing around it reflows on hover. */
.is-linked {
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.is-linked:hover, .is-linked:focus-visible {
    transform: translateY(-3px);
    border-color: var(--gold-dim);
    box-shadow: 0 10px 26px rgba(0,0,0,calc(0.38 * var(--shk, 1)));
    outline: none;
}
.is-linked:active { transform: translateY(-1px); }
/* The block itself has no border to light up, so it borrows one on hover. */
.match-block.is-linked {
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 4px 8px;
    margin-left: -8px; margin-right: -8px;
}
@media (prefers-reduced-motion: reduce) {
    .is-linked, .is-linked:hover, .is-linked:focus-visible, .is-linked:active { transform: none; transition: none; }
}

/* ===== One block, given the room =====
   /Name-Tag/score is this page with the history left out, rather than another
   page to keep in step with this one. There is no /matches to match it: the
   history with the score hidden read exactly like the page above. */
.lookup-section[data-view="score"] #lookup-history { display: none !important; }

/* Once a player is drawn the page is about them: the title goes to the top
   left and the search box to the top right, out of the way of the answer. */
.lookup-top { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.lookup-section.has-result { margin-top: 2rem; text-align: left; }
.lookup-section.has-result .lookup-top {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.4rem;
}
.lookup-section.has-result .lookup-top h1 { margin: 0; font-size: 1.5rem; }
.lookup-section.has-result .lookup-bar { margin: 0; max-width: 460px; }
.lookup-section.has-result .lookup-bar input { padding: 0.5rem 0.9rem; font-size: 0.78rem; }
.lookup-section.has-result .lookup-bar button { padding: 0.5rem 1.1rem; font-size: 0.95rem; }
@media (max-width: 700px) {
    .lookup-section.has-result .lookup-top { flex-direction: column; align-items: stretch; }
}

/* ===== Lookup: the names like the one searched for =====
   Teams first, then players, as rows of the suggestion list laid on the page. */
.lookup-similar { max-width: 560px; margin: 0 auto; text-align: left; }
.lookup-similar .lookup-error { margin-top: 1.5rem; }
.lookup-similar .team-h { margin: 1.2rem 0 0.5rem; }
.ls-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ls-list .ls-row { border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: inherit; text-decoration: none; }
.ls-list .ls-row:hover { border-color: var(--gold-dim); }