/* Player profile card, results-screen opponent link and the monthly tournament. */

/* ---------- Player card */
.player-card-dialog { box-sizing: border-box; width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 16px); margin: auto; padding: 0; border: 1px solid #5f7488; border-radius: 12px; background: linear-gradient(160deg, #182636, #0c141d 70%); color: #e8e2d4; font-family: 'Chakra Petch', sans-serif; box-shadow: 0 24px 80px #000c; overflow: hidden; }
.player-card-dialog[open] { display: flex; flex-direction: column; }
.player-card-dialog::backdrop { background: #04090fd9; }
.pc-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px 0 16px; flex: none; }
.pc-eyebrow { font: 700 10px 'Chakra Petch', sans-serif; letter-spacing: 2px; color: #b9b583; }
.pc-close { width: 40px; height: 40px; border: 1px solid #45596c; border-radius: 8px; background: #1b2633; color: #e8e2d4; font: 700 16px sans-serif; cursor: pointer; }
.pc-body { padding: 6px 16px 4px; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; touch-action: pan-y; }
.pc-hero { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.pc-portrait img { width: 84px; height: 84px; object-fit: cover; object-position: top; border-radius: 10px; border: 2px solid #4aa3c8; background: #1d2a38; display: block; }
.pc-hero[data-faction="nod"] .pc-portrait img { border-color: #c8584a; }
.pc-identity { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pc-identity h3 { margin: 0; font: 800 28px/1 'Barlow Condensed', sans-serif; letter-spacing: .5px; color: #fff4dc; overflow-wrap: anywhere; }
.pc-officer { margin: 0; font-size: 12px; color: #c6cfd8; }
.pc-muted { margin: 0; font-size: 11px; color: #8d9aa7; }
.pc-alliance { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #d9e4cf; }
.pc-alliance strong { color: #ffd77e; }
.pc-crest { width: 22px; height: 22px; }
.pc-rank { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 10px; border-radius: 10px; border: 1px solid #8a6d36; background: #231d12; min-width: 86px; }
.pc-rank-num { font: 900 34px/1 'Barlow Condensed', sans-serif; color: #ffd77e; }
.pc-rank small { font-size: 9px; letter-spacing: 1.5px; color: #c9b58c; }
.pc-rank strong { font: 800 12px 'Barlow Condensed', sans-serif; letter-spacing: .8px; color: #fff4dc; }
.pc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.pc-stat { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; border: 1px solid #33475a; border-radius: 8px; background: #101a25; }
.pc-stat small { font-size: 9px; letter-spacing: 1.5px; color: #93a4b5; }
.pc-stat strong { font: 800 19px 'Barlow Condensed', sans-serif; color: #f4ead7; }
.pc-stat span { font-size: 10px; color: #a8b6c3; }
.pc-troops h4 { margin: 0 0 6px; font: 700 10px 'Chakra Petch', sans-serif; letter-spacing: 2px; color: #93a4b5; }
.pc-troop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); gap: 5px; }
.pc-troop { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; border: 1px solid #2c3d4e; border-radius: 7px; background: #0f1822; }
.pc-troop-art { width: 44px; height: 44px; object-fit: contain; }
.pc-troop span { font: 700 11px 'Chakra Petch', sans-serif; color: #ffd77e; }
.pc-actions { display: flex; gap: 8px; justify-content: flex-end; padding-bottom: 4px; }
.pc-button { min-height: 42px; padding: 8px 16px; border: 1px solid #45596c; border-radius: 7px; background: #1b2633; color: #e8e2d4; font: 700 13px 'Chakra Petch', sans-serif; cursor: pointer; }
.pc-button.pc-primary { background: linear-gradient(#f6cc6a, #c8952d); color: #1b1407; border-color: #ffdf8c; }
.pc-button:disabled { opacity: .6; }
.pc-status { margin: 0; padding: 0 16px 10px; min-height: 16px; font-size: 12px; color: #b8c8d7; flex: none; }
.pc-status.pc-error { color: #ffa99b; }
@media (max-height: 420px) {
    .pc-hero { grid-template-columns: 64px minmax(0, 1fr) auto; }
    .pc-portrait img { width: 64px; height: 64px; }
    .pc-identity h3 { font-size: 23px; }
    .pc-troop-art { width: 36px; height: 36px; }
}

/* ---------- Results: VS opponent */
.pc-opponent-row { display: flex; align-items: center; gap: 10px; flex: none; margin: 2px 0; }
.pc-vs { font: 900 16px 'Barlow Condensed', sans-serif; letter-spacing: 2px; color: #93a4b5; }
.pc-opponent-link { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 3px 12px 3px 3px; border: 1px solid #c8584a; border-radius: 8px; background: linear-gradient(90deg, #3a1d1c, #1b1414); color: #fff0e6; cursor: pointer; }
.pc-opp-portrait { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; object-position: top; background: #2a1c1c; }
.pc-opp-name { font: 800 18px 'Barlow Condensed', sans-serif; letter-spacing: .5px; text-decoration: underline; text-decoration-color: #ff8f7a80; text-underline-offset: 3px; }
.pc-opp-cta { font: 700 10px 'Chakra Petch', sans-serif; letter-spacing: 1px; color: #ffb4a6; }
.pc-opponent-link:active { filter: brightness(1.2); }

/* Clickable commander rows in Top 50 */
.oh-rank-row[data-player-id] { cursor: pointer; }
.oh-rank-row[data-player-id]:active { filter: brightness(1.2); }

/* ---------- Monthly tournament */
.mt-root { display: flex; flex-direction: column; gap: 10px; }
.mt-intro { display: flex; gap: 12px; align-items: flex-start; }
.mt-emblem { width: 52px; height: 52px; flex: none; }
.mt-intro h3 { margin: 2px 0; }
.mt-intro p { margin: 0; font-size: 12px; line-height: 1.45; }
.mt-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 10px; }
.mt-timer, .mt-army { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 12px; border-radius: 10px; border: 1px solid #3c5268; background: #101b27; }
.mt-timer small, .mt-army small { font-size: 9px; letter-spacing: 1.5px; color: #93a4b5; }
.mt-timer strong { font: 900 28px/1 'Barlow Condensed', sans-serif; color: #ffd77e; letter-spacing: .5px; }
.mt-timer span, .mt-army span:not(.mt-army-num) { font-size: 11px; color: #b8c8d7; }
.mt-army { flex-direction: row; align-items: center; gap: 10px; border-color: #4a6a58; background: #122019; }
.mt-army > div { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.mt-army strong { font: 800 18px 'Barlow Condensed', sans-serif; color: #fff4dc; }
.mt-army-num { display: grid; place-items: center; min-width: 48px; height: 48px; border-radius: 9px; background: linear-gradient(180deg, #f8d27a, #d39a2a); color: #1b1407; font: 900 28px/1 'Barlow Condensed', sans-serif; }
.mt-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mt-join { min-height: 52px; font-size: 16px !important; padding: 10px 28px !important; }
.mt-signed { margin: 0; color: #8ce9ac; font-weight: 700; font-size: 14px; }
.mt-offline { margin: 0; padding: 12px; border: 1px dashed #4b5d6e; border-radius: 8px; color: #c6cfd8; font-size: 13px; }
.mt-reward { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #c49a3d; border-radius: 10px; background: linear-gradient(110deg, #3b2a12, #1d1a12); }
.mt-reward h4 { margin: 2px 0; font: 800 20px 'Barlow Condensed', sans-serif; color: #ffd77e; }
.mt-reward p { margin: 0; font-size: 12px; color: #e9dcc0; }
.mt-reward > div { flex: 1; min-width: 0; }
.mt-chest { width: 64px; height: 56px; object-fit: contain; }
.mt-standings-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.mt-standings-head strong { font: 800 15px 'Barlow Condensed', sans-serif; letter-spacing: 1px; color: #f4ead7; }
.mt-standings-head span { font-size: 10px; letter-spacing: 1px; color: #93a4b5; }
.mt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mt-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 10px 5px 6px; border: 1px solid #2c3d4e; border-radius: 8px; background: #0f1822; cursor: pointer; }
.mt-row:active { filter: brightness(1.25); }
.mt-row.mt-self { border-color: #f2b02a; background: #241d10; }
.mt-row.mt-first .mt-place { color: #1b1407; background: linear-gradient(180deg, #f8d27a, #d39a2a); }
.mt-place { display: grid; place-items: center; height: 26px; border-radius: 6px; background: #1c2a38; font: 800 14px 'Barlow Condensed', sans-serif; color: #d6dee6; }
.mt-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mt-avatar { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; object-position: top; flex: none; background: #1d2a38; }
.mt-copy { display: flex; flex-direction: column; min-width: 0; }
.mt-copy strong { font: 800 16px 'Barlow Condensed', sans-serif; letter-spacing: .4px; color: #f4ead7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-copy small { font-size: 10px; color: #a8b6c3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-rank { display: flex; flex-direction: column; align-items: flex-end; }
.mt-rank strong { font: 900 22px/1 'Barlow Condensed', sans-serif; color: #ffd77e; }
.mt-rank small { font-size: 9px; letter-spacing: 1px; color: #8ce9ac; }
@media (max-width: 700px) { .mt-top { grid-template-columns: 1fr; } }

/* Once a group exists the rules shrink to one line so the standings get the room. */
.mt-intro.mt-compact p { display: none; }
.mt-intro.mt-compact .mt-emblem { width: 34px; height: 34px; }
.mt-intro.mt-compact h3 { font-size: 22px; }
.mt-root:has(.mt-compact) .mt-timer, .mt-root:has(.mt-compact) .mt-army { padding: 6px 10px; }
.mt-root:has(.mt-compact) .mt-timer strong { font-size: 22px; }
.mt-root:has(.mt-compact) .mt-army-num { min-width: 38px; height: 38px; font-size: 22px; }