/* Screen review round 1 (Nov 8): fixes that apply across pages. Loaded last on purpose. */

/* Tables: a fixed flair column, so every name starts under "Player" even with no flairs. */
.has-web-flairs .web-player-identity>.web-equipment:empty{display:flex}
.elo-cell{white-space:nowrap}.elo-cell>span{display:inline-block;vertical-align:middle}

/* Home: a slightly bigger Live button. */
.footer-home .button.live-link{min-height:44px;padding:8px 16px;font-size:19px;gap:9px}.footer-home .live-dot{width:12px;height:12px}

/* Phones, stats toolbar (leaderboard, profile): Season | Filter or Compare | Search on one row, the name field full width under it. */
@media(max-width:720px){
 .stats-toolbar{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr)}
 .stats-toolbar .season-control{width:auto;grid-column:1;grid-row:1}.stats-toolbar .season-control select{width:100%}
 .stats-toolbar .search{display:contents}
 .stats-toolbar .search input{grid-column:1/-1;grid-row:2;width:100%;margin:0}
 .stats-toolbar .search>.button{grid-column:3;grid-row:1;min-width:0;width:100%;padding-left:6px;padding-right:6px}
 .stats-toolbar>.button{grid-column:2;grid-row:1;width:100%;min-width:0;padding-left:6px;padding-right:6px}
 .stats-toolbar>a.button~a.button{grid-column:1/-1;grid-row:3}
}

/* Phones, home: Stats, Info and Support Us as big as Account and Leaderboard, one under the other; Live stays bottom left. */
@media(max-width:720px){
 .home-page .footer-home{display:flex;flex-direction:column;align-items:stretch;gap:14px;max-width:550px;width:calc(100% - 28px);margin:14px auto 80px}
 .home-page .footer-home>.button{flex:none;width:100%;max-width:none;min-height:82px;font-size:29px}
 .home-page .footer-home .button.live-link{position:fixed;left:14px;bottom:14px;width:auto;min-height:44px;font-size:19px;padding:8px 16px}
}

/* Phones, tables: no empty flair column (too narrow), the Time leaderboard drops Date so Time fits, and its buttons sit on a 2 x 2 grid. */
@media(max-width:720px){
 .has-web-flairs .web-player-identity>.web-equipment:empty{display:none}
 .has-web-flairs .web-player-heading{padding-left:8px}.has-web-flairs .web-player-cell{min-width:0}
 .record-table .record-date{display:none}
 .record-toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
 .record-toolbar>*{width:100%;min-width:0!important;margin:0!important}
}

/* Match page: each player on one line (name, client, flag; then time and Elo), report under it, the seed centred. */
.match-meta{text-align:center}
.match-players{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:14px 0}
.match-player{display:grid;justify-items:center;gap:8px;padding:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);text-align:center;min-width:0}
.match-player.won{border-color:#91c767}
.match-player-head{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;min-width:0}.match-player-head .player-name{overflow-wrap:anywhere}
.match-player-head .web-match-identity{display:inline-flex;align-items:center;gap:6px}
.match-player-line{display:flex;align-items:baseline;justify-content:center;gap:14px;flex-wrap:wrap}
.match-player-time{font-size:1.15em;font-variant-numeric:tabular-nums}
.match-player-elo{color:var(--muted)}.match-player-elo.positive{color:#84d674}.match-player-elo.negative{color:#ff7979}
.match-report{margin:2px 0 0}
.match-seed{text-align:center;margin:6px 0 12px}
.share-row{justify-content:center}
@media(max-width:720px){
 .match-players{grid-template-columns:1fr;gap:8px}
 .match-player{grid-template-columns:minmax(0,1fr) auto;justify-items:stretch;align-items:center;text-align:left;padding:8px 10px;gap:4px 10px;font-size:15px}
 .match-player-head{justify-content:flex-start;flex-wrap:nowrap}.match-player-head .player-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .match-player-line{flex-direction:column;align-items:flex-end;gap:0}.match-player-time{font-size:1em}
 .match-report{grid-column:1/-1;justify-self:start;padding:6px 10px;font-size:14px;min-height:0}
}

/* Section splits: the difference sits in the middle, between the two players' times. */
.an-split{table-layout:fixed}.an-split th,.an-split td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-split.an-two th:nth-child(1){width:34%}.an-split.an-two th:nth-child(2),.an-split.an-two th:nth-child(4){width:24%}.an-split.an-two th:nth-child(3){width:18%}
.an-split.an-two td,.an-split.an-two thead th:not(:first-child){text-align:center}
@media(max-width:720px){.an-split.an-two th:nth-child(1){width:31%}.an-split.an-two th:nth-child(3){width:21%}.an-split th,.an-split td{padding:6px 2px}}

/* Season recap: the facts as label / value rows. */
.recap-facts{display:grid;gap:0;margin:14px 0}.recap-facts>div{display:flex;justify-content:space-between;gap:12px;padding:9px 4px;border-bottom:1px solid rgba(255,255,255,.12)}.recap-facts>div:last-child{border-bottom:0}.recap-facts dt{color:var(--muted)}.recap-facts dd{margin:0;text-align:right}

/* The admin correction box used the browser font. */
details.card.admin-console>summary{font:17px/1.4 Ranked,monospace;color:var(--yellow);cursor:pointer}

/* Compare: the difference beside each value (+24 green on the better side, -24 red on the other). Phones: only the colour. */
.matchup-table .cmp-diff{display:inline-block;min-width:84px;font-size:.85em}
.matchup-left .cmp-diff{text-align:left;margin-left:14px}.matchup-right .cmp-diff{text-align:right;margin-right:14px}
.cmp-diff.cmp-good{color:#84d674}.cmp-diff.cmp-bad{color:#ff7979}
@media(max-width:720px){.matchup-table .cmp-diff{display:none}.matchup-table td.cmp-good .cmp-value{color:#84d674}.matchup-table td.cmp-bad .cmp-value{color:#ff7979}}

/* Run History: the client's row. */
.run-history .profile-name{text-align:center;margin-bottom:12px}
.run-list{display:grid;gap:4px}
.run-row{display:grid;grid-template-columns:92px minmax(0,1.5fr) minmax(0,1.2fr) 120px 120px 56px 86px;align-items:center;gap:12px;padding:8px 12px 8px 16px;background:rgba(255,255,255,.035);border-left:6px solid #787e7e}
.run-row:nth-child(odd){background:rgba(255,255,255,.06)}
.run-win{border-left-color:#56b937}.run-loss{border-left-color:#cf4c43}.run-solo{border-left-color:#48aad7}.run-draw{border-left-color:var(--yellow)}
.run-tag{display:block;text-align:center;padding:3px 0;font-size:15px;text-shadow:none}.run-tag.ranked{background:#ffe247;color:#1e1a08}.run-tag.solo{background:#2c4a5c;color:#bee2f5}
.run-mode,.run-result{display:flex;flex-direction:column;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.run-mode small,.run-result small{color:var(--muted);font-size:12px}
.run-vs{color:var(--yellow);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.run-vs .player-name{color:var(--yellow)}
.run-result{text-align:center;align-items:center}.run-win .run-result{color:#56b937}.run-loss .run-result{color:#cf4c43}.run-solo .run-result{color:#48aad7}.run-draw .run-result{color:var(--yellow)}.run-muted .run-result{color:var(--muted)}
.run-result small{color:var(--muted)!important}
.run-time{text-align:right;font-variant-numeric:tabular-nums}.run-elo{text-align:right}.run-elo.positive{color:#84d674}.run-elo.negative{color:#ff7979}
.run-row>.button{margin:0;min-height:0;padding:6px 10px}
@media(max-width:900px){
 .run-row{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:'mode mode result' 'vs elo time' 'tag . button';gap:4px 10px;padding:8px 10px 8px 12px;font-size:15px}
 .run-tag{grid-area:tag;font-size:13px;justify-self:start;padding:3px 12px}.run-mode{grid-area:mode}.run-vs{grid-area:vs}.run-result{grid-area:result;align-items:flex-end;text-align:right}.run-time{grid-area:time}.run-elo{grid-area:elo}.run-row>.button{grid-area:button;justify-self:end;font-size:14px;padding:4px 14px}
}

/* Stats per Mode: the client's table. */
.mode-tabs{display:flex;justify-content:center;gap:8px;margin:0 0 12px}.mode-tabs .button{min-width:120px;margin:0}.mode-tabs .button.selected{background:#3c7d26;color:#fff;text-shadow:1px 1px #000}
.mode-stats-card .profile-name{text-align:center;margin-bottom:10px}
.mode-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.mode-table th,.mode-table td{padding:10px 8px;border-bottom:1px solid rgba(255,255,255,.1);text-align:right;font-weight:normal;white-space:nowrap}
.mode-table thead th{color:var(--muted);font-size:.85em}.mode-table th:first-child{text-align:left}.mode-table tbody tr:nth-child(odd){background:rgba(255,255,255,.04)}
.mode-table td.mode-wins{text-align:left}.mode-wins>*{vertical-align:middle}
.mode-bar{display:inline-block;width:150px;height:14px;background:#cf4c43;margin-right:10px}.mode-bar>span{display:block;height:100%;background:#56b937}
.mode-wl{display:inline-block;min-width:44px}.mode-rate{display:inline-block;min-width:44px;margin-left:8px;color:var(--muted)}
@media(max-width:720px){.mode-tabs .button{min-width:0;flex:1}.mode-table{font-size:14px}.mode-table th,.mode-table td{padding:8px 4px;white-space:normal}.mode-bar{width:54px;height:10px;margin-right:4px}.mode-rate{display:none}.mode-table th:nth-child(5),.mode-table td:nth-child(5){display:none}}

/* Phones, account: the flag buttons sit in the card's top right corner, as on Android and on desktop. */
@media(max-width:720px){
 .account-card{position:relative}
 .web-account-identity.identity-preview-account>.profile-flags{position:absolute;top:10px;right:10px;margin:0}
}

/* Trophies: a shorter filter, so filter, slots and the winstreak switch share one row. Phones: the selected trophy and its Equip button come first. */
.trophy-controls{display:flex;align-items:center;flex-wrap:wrap;gap:14px}
.trophy-controls>select{flex:0 0 260px;width:260px;min-width:0}
.trophy-controls>.trophy-slots{display:flex;gap:8px;margin:0}
.trophy-controls>.trophy-toggle{margin-left:auto}
@media(max-width:720px){
 .trophy-controls>select{flex:1 1 100%;width:100%}.trophy-controls>.trophy-toggle{margin-left:0}
 .trophy-layout{display:flex;flex-direction:column}.trophy-layout>.trophy-detail{order:-1}
}

/* Analysis mode tabs: an even grid instead of a ragged wrap (all screen sizes); the count sits right. */
.an-tabs{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px}
.an-tabs button{display:flex;justify-content:space-between;align-items:center;text-align:left;min-width:0;white-space:nowrap;overflow:hidden}
@media(max-width:720px){.an-tabs{grid-template-columns:1fr 1fr}.an-tabs button{font-size:13px;padding:7px 8px}}
.an-split tbody th{display:table-cell;vertical-align:middle}.an-split tbody th>*{vertical-align:middle;margin-right:8px}
@media(max-width:720px){
 .match-player-head .badge{display:none}.match-player-head .player-name{overflow:visible;text-overflow:clip}
 .an-split.an-two th:nth-child(1){width:38%}.an-split.an-two th:nth-child(2),.an-split.an-two th:nth-child(4){width:22%}.an-split.an-two th:nth-child(3){width:18%}.an-split{font-size:13px}
}
.trophy-controls{margin:0!important}.mode-table thead th:nth-child(3){text-align:left}

/* Round 2 */
/* Match page: the seed is a plain line, not a big box. */
.match-seed .code{display:inline-block;padding:3px 10px;border-width:1px;margin-left:6px;vertical-align:baseline}
/* Section splits: swatch and name on one line. */
.an-split tbody th{white-space:nowrap}.an-split tbody th>*{display:inline-block}
/* Phones, rank trophy never next to the Elo (the table would overflow). */
/* Phones, Stats per Mode: the win-loss column keeps clear of Games; bar and score on one line. */
@media(max-width:720px){.mode-table td.mode-wins{padding-left:16px;white-space:nowrap}.mode-table thead th:nth-child(3){padding-left:16px}.mode-bar{width:44px}}
/* Season recap: label and value close together, not at the two ends of the card. */
.recap-facts{max-width:520px;margin:14px auto}.recap-facts>div{display:grid;grid-template-columns:1fr 1fr;gap:16px}.recap-facts dt{text-align:right}.recap-facts dd{text-align:left}
/* Rank item before the Elo: a 16x16 picture drawn at 2x, crisp. */
.matchup-left .cmp-value,.matchup-right .cmp-value{display:inline-block;min-width:100px}.matchup-right .cmp-value{text-align:right}
/* Hat (second skin) layer: a cube 9/8 the size of the head, like Minecraft's; clear pixels show the head under it. */
.head-face.head-hat{inset:-6.25%;width:112.5%;height:112.5%}
.head-hat.head-front{transform:translateZ(calc(var(--head)*.5625))}.head-hat.head-back{transform:rotateY(180deg) translateZ(calc(var(--head)*.5625))}
.head-hat.head-right{transform:rotateY(-90deg) translateZ(calc(var(--head)*.5625))}.head-hat.head-left{transform:rotateY(90deg) translateZ(calc(var(--head)*.5625))}
.head-hat.head-top{transform:rotateX(90deg) translateZ(calc(var(--head)*.5625))}.head-hat.head-bottom{transform:rotateX(-90deg) translateZ(calc(var(--head)*.5625))}

.matchup-table .cmp-diff:not(.cmp-good):not(.cmp-bad){color:#b4b4b4}
/* Phones: no trophies or streak in the Elo and Time tables, they do not fit (the owner's call); PCs keep them. */
@media(max-width:720px){.leaderboard-table .web-player-identity>.web-equipment,.leaderboard-table .web-player-identity .web-live-streak{display:none!important}.leaderboard-table.has-web-flairs .web-player-identity{min-height:0}.leaderboard-table.has-web-flairs .web-player-heading{padding-left:0}}
/* One-time notice: re-upload a skin saved before the hat layer. */
.skin-notice{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 auto 14px;max-width:960px}.skin-notice p{margin:0;flex:1 1 260px}