/* Member profiles (Evan's approved boards, 18 Oct): ProfileChip / ProfileChipDesk, ProfileCard, MatchupProfile,
   ProfileHover. Built on glass.css tokens (glass, smoke, cream, amber, jade, House colours); loaded after it. */

/* ------------------------------------------------------------------ House colour, one variable per surface */
[data-house]{--hc:rgba(255,255,255,.4);--hc-rgb:255,255,255;--hc-tint:rgba(255,255,255,.16)}
[data-house=onyx-forge]{--hc:var(--onyx-forge);--hc-rgb:224,90,71;--hc-tint:rgba(224,90,71,.3)}
[data-house=chrome-manor]{--hc:var(--chrome-manor);--hc-rgb:201,209,219;--hc-tint:rgba(201,209,219,.25)}
[data-house=gilded-court]{--hc:var(--gilded-court);--hc-rgb:230,184,79;--hc-tint:rgba(230,184,79,.3)}
[data-house=sapphire-keep]{--hc:var(--sapphire-keep);--hc-rgb:91,143,224;--hc-tint:rgba(91,143,224,.3)}

/* ------------------------------------------------------------------ the picture */
/* The first letter always sits underneath; the Discord picture (when there is one) covers it. A missing, failed or
   blank picture leaves the letter showing: never Discord's default avatar, never a broken image. */
/* Size: the markup's default (--s0), overridden per surface by setting --s in CSS. */
.pf-av{position:relative;flex:none;display:inline-block;width:var(--s,var(--s0,42px));height:var(--s,var(--s0,42px));border-radius:50%}
.pf-av-face{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;background:var(--hc-tint);box-shadow:0 0 0 2px var(--hc);
  font:600 calc(var(--s,var(--s0,42px)) * .4)/1 var(--ui);color:var(--cream);user-select:none}
.pf-av-img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}
.pf-av-badge{position:absolute;right:-4px;bottom:-3px;width:max(17px,calc(var(--s,var(--s0,42px)) * .42));height:max(17px,calc(var(--s,var(--s0,42px)) * .42));border-radius:50%;
  display:grid;place-items:center;background:var(--base);box-shadow:0 0 0 1.5px var(--hc)}
.pf-av-badge img{width:72%;height:72%;image-rendering:pixelated}
.pf-menu-head .pf-av-face,.mp-head .pf-av-face,.pf-hover-top .pf-av-face{box-shadow:0 0 0 2.5px var(--hc),0 0 0 7px rgba(var(--hc-rgb),.18)}
.pf-av-xl .pf-av-face{box-shadow:0 0 0 3px var(--hc),0 0 0 9px rgba(var(--hc-rgb),.18),0 14px 30px rgba(0,0,0,.4)}
.pf-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* rank pips: one per rank, lit up to the member's own */
.pf-pips{display:flex;gap:3px;margin-top:5px}
.pf-pips i{width:20px;height:3px;border-radius:2px;background:rgba(255,255,255,.14)}
.pf-pips-wide{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-top:4px}
.pf-pips-wide i{width:auto;height:4px}
.mp-pips i{width:14px}

/* The account chip and its menu are the HOUND shared bar now: spire-bar.css (#player-chip is .hm-bar-me). */

.pf-menu-head{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:center;padding:16px;border-radius:26px;
  background:linear-gradient(135deg,rgba(var(--hc-rgb),.24),rgba(var(--hc-rgb),0) 70%)}
.pf-menu-head .pf-av{--s:64px}
.pf-menu-head .pf-av .pf-av-badge{width:26px;height:26px;right:-5px;bottom:-4px}
.pf-menu-who{min-width:0;display:flex;flex-direction:column}
.pf-menu-who b{font:600 19px/1.15 var(--ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-menu-who span{margin-top:2px;font:400 13px var(--ui);color:var(--muted)}
.pf-menu-who em{margin-top:7px;font:600 12px var(--ui);font-style:normal}
.pf-menu-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:8px 6px 4px}
.pf-stat{min-width:0;min-height:48px;border-radius:18px;padding:8px 10px;background:rgba(255,255,255,.06)}
.pf-stat b{display:block;min-height:1.1em;font:600 17px/1.1 var(--ui);font-variant-numeric:tabular-nums;color:var(--text)}
.pf-stat span{display:block;margin-top:2px;font:400 11px/1.3 var(--ui);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-stat[data-tone=jade] b{color:#A8EDD3}
.pf-stat[data-tone=amber] b{color:var(--amber-ink)}
.pf-menu-stats[data-loading] .pf-stat{opacity:.5}
.pf-menu-via{font:400 12px var(--ui);color:var(--muted)}
/* Spire bearings for the raffle: a link row in the same pill shape as the menu's buttons. */
.pf-menu-rule{display:block;height:1px;margin:4px 14px;background:rgba(255,255,255,.1)}
.pf-menu-foot{display:none;align-items:flex-start;gap:6px;margin:6px 14px 6px;font:400 12px/1.4 var(--ui);color:var(--muted)}
.pf-menu-foot svg{width:11px;height:11px;flex:none;margin-top:3px}
@media (max-width:760px){
  .pf-menu-foot{display:flex}
  .pf-menu-stats{display:none}   /* phone: the board keeps the menu to who you are and the three actions */
}

/* ------------------------------------------------------------------ the profile sheet */
#profile-dialog.pf-dialog{width:min(420px,calc(100vw - 20px));max-width:none;max-height:calc(100dvh - 20px);padding:16px 14px 14px;border-radius:34px;overflow:auto;overscroll-behavior:contain}
.pf-sheet{position:relative;display:flex;flex-direction:column;gap:10px}
.pf-sheet::before{content:'';position:absolute;left:-14px;right:-14px;top:-16px;height:190px;pointer-events:none;
  background:radial-gradient(120% 100% at 20% 0%,rgba(var(--hc-rgb),.34),rgba(var(--hc-rgb),0) 70%)}
.pf-sheet>*{position:relative}
.pf-sheet-top{display:flex;justify-content:space-between;align-items:center}
.pf-sheet-top>span{font:500 13px var(--ui);color:var(--muted)}
.pf-close{width:44px;height:44px;flex:none;display:grid;place-items:center;padding:0;border-radius:50%;color:var(--text);
  background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--glass-hl)}
.pf-close svg{width:18px;height:18px}
.pf-close:hover{background:rgba(255,255,255,.2)}
.pf-id{display:grid;grid-template-columns:88px minmax(0,1fr);gap:16px;align-items:center}
.pf-id .pf-av{--s:88px}
.pf-id .pf-av .pf-av-badge{width:34px;height:34px;right:-6px;bottom:-4px;box-shadow:0 0 0 2px var(--hc)}
.pf-id h2{margin:0;font:400 38px/1.05 var(--display);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-sub{margin:4px 0 0;font:400 13px var(--ui);color:var(--muted)}
.pf-house-pill{display:inline-flex;align-items:center;gap:6px;height:32px;margin-top:8px;padding:0 12px 0 4px;border-radius:999px;
  font:500 13px var(--ui);color:var(--text);background:var(--glass);border:1px solid var(--hc);box-shadow:var(--glass-hl)}
.pf-house-pill img{width:24px;height:24px;image-rendering:pixelated}
.pf-house-pill[data-none]{padding:0 12px;border-color:var(--glass-edge);color:var(--muted)}
.pf-rank,.pf-seasons,.pf-big,.pf-tile{background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--glass-hl)}
.pf-rank{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:24px}
.pf-rank>div{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pf-rank b{font:600 17px var(--ui)}
.pf-rank span{font:400 13px var(--ui);color:var(--muted);white-space:nowrap}
.pf-rank p{margin:0;font:400 14px var(--ui);color:rgba(246,242,234,.88)}
.pf-seasons{display:grid;grid-template-columns:64px minmax(0,1fr);gap:6px;align-items:center;padding:10px 12px;border-radius:24px}
.pf-seasons>span{font:500 12px/1.3 var(--ui);color:var(--muted)}
.pf-seasons>div{display:flex;justify-content:space-around;gap:6px;flex-wrap:wrap}

/* a season seal: the art, or a ring with the numeral (for a season whose art the game does not ship yet) */
.pf-seal{--z:40px;display:inline-flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.pf-seal-art{width:var(--z);height:var(--z);object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}
.pf-seal-ring{box-sizing:border-box;width:var(--z);height:var(--z);border-radius:50%;display:grid;place-items:center;
  border:calc(var(--z) / 13) solid #8C7A5A;background:rgba(140,122,90,.12);color:rgba(246,242,234,.85);font:600 calc(var(--z) * .3)/1 var(--ui)}
.pf-seal-ring[data-tier=topten]{border-color:#C9A758;background:rgba(201,167,88,.16);color:#E9D29A;box-shadow:0 0 0 2px rgba(201,167,88,.25)}
.pf-seal-ring[data-tier=champion]{border-color:#F4D79A;background:rgba(244,215,154,.2);color:#F9E8C4;box-shadow:0 0 0 2px rgba(244,215,154,.35),0 0 12px rgba(244,215,154,.35)}
.pf-seal-ring[data-tier=now]{border:2px dashed #6FA8E8;background:rgba(111,168,232,.1);color:#B5D3F5}
.pf-seal small{font:500 11px var(--ui);color:rgba(246,242,234,.85);white-space:nowrap}
.pf-seal small b{font-weight:600;margin-right:2px}

.pf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pf-big{display:flex;flex-direction:column;gap:2px;min-width:0;padding:12px;border-radius:22px}
.pf-big>span{font:500 12px var(--ui);color:var(--muted)}
.pf-big>b{font:600 30px/1.1 var(--ui);font-variant-numeric:tabular-nums;color:var(--text)}
.pf-big>small{display:flex;align-items:center;gap:6px;font:500 12px/1.3 var(--ui);color:var(--muted)}
.pf-big[data-tone=amber]{border-color:rgba(240,181,74,.55)}
.pf-big[data-tone=amber]>small{color:var(--amber-ink)}
.pf-big[data-tone=jade]{border-color:rgba(127,224,188,.55)}
.pf-big[data-tone=jade]>b{color:#A8EDD3}
.pf-big[data-tone=jade]>small{color:#C9F5E5}
.pf-seat-tag{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;background:var(--amber);color:#1B1306;font:600 10px var(--ui);font-style:normal;letter-spacing:.06em}
.pf-seat-tag[data-kind=reserve]{background:none;border:1px solid rgba(255,255,255,.35);color:rgba(246,242,234,.85)}
.pf-tile{display:flex;align-items:center;gap:10px;min-width:0;padding:12px;border-radius:22px}
.pf-tile-icon{flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);color:var(--muted)}
.pf-tile-icon svg{width:20px;height:20px}
.pf-tile>span:last-child{min-width:0}
.pf-tile b{display:block;font:600 14px var(--ui)}
.pf-tile small{display:block;font:400 12px var(--ui);color:var(--muted)}
.pf-tile[data-tone=jade] .pf-tile-icon{background:rgba(127,224,188,.2);border-color:rgba(127,224,188,.7);color:#C9F5E5}
.pf-tile[data-tone=amber]{border-color:rgba(240,181,74,.55)}
.pf-tile[data-tone=amber] .pf-tile-icon{background:rgba(240,181,74,.2);border-color:rgba(240,181,74,.7);color:var(--amber-ink)}
.pf-honours{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pf-honour{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 12px 8px 8px;border-radius:22px;border:1px dashed rgba(255,255,255,.22)}
.pf-honour img{width:40px;height:40px;object-fit:contain;flex:none;opacity:.35;filter:grayscale(1)}
.pf-honour b{display:block;font:600 13px var(--ui);color:rgba(246,242,234,.78)}
.pf-honour small{display:block;font:400 12px var(--ui);color:var(--muted)}
.pf-honour[data-earned=true]{background:rgba(240,181,74,.12);border:1px solid rgba(240,181,74,.45)}
.pf-honour[data-earned=true] img{opacity:1;filter:none}
.pf-honour[data-earned=true] b{color:var(--text)}
.pf-honour[data-earned=true] small{color:var(--amber-ink)}
.pf-socials{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:22px;background:rgba(255,255,255,.06)}
.pf-socials>div:first-child{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pf-socials>div:first-child>span{font:500 12px var(--ui);color:var(--muted)}
.pf-socials small{display:inline-flex;align-items:center;gap:5px;font:400 11px var(--ui);color:var(--muted)}
.pf-socials small svg{width:11px;height:11px}
.pf-socials>div:last-child{display:flex;gap:8px}
.pf-social{flex:1;min-width:0;min-height:46px;display:flex;align-items:center;gap:10px;padding:4px 14px;border-radius:999px;font:500 13px var(--ui);
  background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--glass-hl);color:var(--text)}
.pf-social>svg{width:16px;height:16px;flex:none}
.pf-social>span:not(.pf-social-tick){min-width:0;display:flex;flex-direction:column;line-height:1.2}
.pf-social b{font:600 13px var(--ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-social small{font:400 11px var(--ui);color:inherit;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-social-tick{margin-left:auto;display:grid;place-items:center;color:var(--jade)}
.pf-social-tick svg{width:14px;height:14px}
.pf-social[data-state=none]{background:none;box-shadow:none;border:1px dashed rgba(255,255,255,.25);color:rgba(246,242,234,.72)}
.pf-social[data-state=verified] small{color:#C9F5E5;opacity:1}
.pf-sheet[aria-busy=true] .pf-sub{color:var(--muted)}

/* ------------------------------------------------------------------ Know your challenger */
body[data-screen=matchup] .journey-center.matchup-screen{max-width:440px;margin-top:0}
.mp-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.mp-mode{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;font:600 13px var(--ui);
  background:rgba(240,181,74,.22);border:1px solid rgba(240,181,74,.6);color:var(--amber-ink)}
.mp-mode:not([data-mode=ranked]){background:var(--glass);border-color:var(--glass-edge);color:var(--text)}
.mp-top .mp-leave{min-height:44px;padding:0 18px}
.matchup-screen>h1{margin:16px 0 0!important;font:400 40px/1.05 var(--display)!important;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.matchup-screen .matchup{display:flex;flex-direction:column;margin:14px 0 0;gap:0}
.mp-card{position:relative;overflow:hidden;min-width:0;padding:14px 14px 12px 18px;border-radius:28px;cursor:pointer;text-align:left;
  background:var(--glass);-webkit-backdrop-filter:blur(var(--blur)) saturate(140%);backdrop-filter:blur(var(--blur)) saturate(140%);
  border:1px solid rgba(var(--hc-rgb),.7);box-shadow:var(--glass-hl)}
.mp-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--hc)}
.mp-card::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(var(--hc-rgb),.2),rgba(0,0,0,0) 55%)}
.mp-card>*{position:relative;z-index:1}
.mp-card:hover{background:rgba(255,255,255,.17)}
.mp-head{display:grid;grid-template-columns:66px minmax(0,1fr) auto;gap:12px;align-items:center}
.mp-head .pf-av{--s:66px}
.mp-head .pf-av .pf-av-badge{width:27px;height:27px;right:-5px;bottom:-4px}
.mp-who{min-width:0}
.mp-who>div{display:flex;align-items:baseline;gap:6px;min-width:0}
.mp-who b{font:600 21px/1.15 var(--ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-who>div>span{font:400 13px var(--ui);color:var(--muted);flex:none}
.mp-who em{display:block;margin-top:3px;font:500 13px var(--ui);font-style:normal;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-card .ready-pill{grid-area:auto;align-self:start;min-height:28px;padding:0 10px;font:600 12px var(--ui);text-transform:none;border:1px solid rgba(255,255,255,.35);color:rgba(246,242,234,.82);background:transparent}
.mp-card .ready-pill[data-ready=true]{background:rgba(127,224,188,.2);border-color:rgba(127,224,188,.7);color:#C9F5E5}
.mp-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:12px}
.mp-stats .pf-stat{min-height:46px;border-radius:16px;padding:7px 10px;background:rgba(14,20,18,.35)}
.mp-seals{display:flex;align-items:center;gap:6px;margin-top:9px;min-height:24px}
.mp-seals>span:last-child{margin-left:4px;font:400 12px var(--ui);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-seals .pf-seal{--z:24px}
.mp-vs{align-self:center;z-index:3;width:52px;height:52px;margin:-14px 0;display:grid;place-items:center;border-radius:50%;
  font:400 22px var(--display);color:var(--cream);background:rgba(22,32,29,.85);border:1px solid var(--glass-edge);box-shadow:var(--glass-hl)}
.mp-sheet{margin-top:14px;padding:14px 16px 16px;border-radius:30px;
  background:var(--smoke);-webkit-backdrop-filter:blur(var(--blur-sheet)) saturate(140%);backdrop-filter:blur(var(--blur-sheet)) saturate(140%);
  border:1px solid var(--smoke-edge);box-shadow:var(--smoke-hl),0 20px 60px rgba(0,0,0,.28)}
.mp-sheet *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.mp-h2h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.mp-h2h b{font:600 14px var(--ui)}
.mp-h2h span{font:400 13px var(--ui);color:var(--muted);white-space:nowrap}
.mp-stakes{margin:8px 0 0!important;font:400 14px/1.45 var(--ui)!important;color:rgba(246,242,234,.88)!important}
.mp-stakes b{font-weight:600;color:var(--text)}
.mp-sheet #ready-status{min-height:0;margin:6px 0 0!important;font:400 13px/1.4 var(--ui)}
.mp-sheet .journey-actions{margin-top:12px}
.mp-sheet .journey-actions .primary{width:100%;min-height:62px}
html[data-power=low] :is(.mp-card,.mp-sheet,.pf-hover){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html[data-power=low] .mp-sheet{background:var(--smoke)}
@media (prefers-reduced-transparency:reduce){
  .mp-card,.mp-sheet,.pf-hover{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(20,29,26,.97)}
}

/* ------------------------------------------------------------------ names on the boards, and their hover card */
.pf-name{display:inline-flex;align-items:center;gap:10px;max-width:100%;min-height:44px;padding:0;border:0;border-radius:999px;background:none;box-shadow:none;
  color:inherit;font:inherit;text-align:left;cursor:pointer}
.pf-name>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color .15s}
.pf-name:hover>span,.pf-name[aria-expanded=true]>span{text-decoration-color:currentColor}
.pf-name .pf-av{--s:30px}
.wall-list .pf-av-cell{display:grid;place-items:center;font-style:normal}   /* an <i>, so the row's span:nth-of-type columns stay as they were */
.wall-list .pf-av-cell .pf-av{--s:30px}
.wall-list .pf-av-cell .pf-av-badge{width:13px;height:13px;right:-7px;bottom:-5px}   /* small and off the corner: the initial stays readable */
.wall-list b,.qual-list b{display:flex;min-width:0}
.pf-hover{position:fixed;z-index:60;width:min(400px,calc(100vw - 24px));padding:16px;border-radius:30px;overflow:hidden;
  background:rgba(16,24,21,.86);-webkit-backdrop-filter:blur(30px) saturate(140%);backdrop-filter:blur(30px) saturate(140%);
  border:1px solid rgba(var(--hc-rgb),.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 30px 70px rgba(0,0,0,.55);color:var(--text)}
.pf-hover::before{content:'';position:absolute;left:0;right:0;top:0;height:140px;pointer-events:none;background:radial-gradient(100% 100% at 15% 0%,rgba(var(--hc-rgb),.26),rgba(var(--hc-rgb),0) 70%)}
.pf-hover>*{position:relative}
.pf-hover-top{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:center}
.pf-hover-top .pf-av{--s:64px}
.pf-hover-top .pf-av .pf-av-badge{width:26px;height:26px;right:-5px;bottom:-4px}
.pf-hover-who{min-width:0;display:flex;flex-direction:column}
.pf-hover-who b{font:600 20px/1.1 var(--ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-hover-who span{margin-top:3px;font:400 13px var(--ui);color:var(--muted)}
.pf-hover-who em{margin-top:6px;font:600 13px var(--ui);font-style:normal}
.pf-hover-who em.pf-pending{font-weight:400;color:var(--muted)}
.pf-hover-who .pf-pips i{width:18px}
.pf-hover-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:14px}
.pf-hover-stats .pf-stat{min-height:52px}
.pf-hover-stats .pf-stat b{font-size:19px}
.pf-hover-stats .pf-stat[data-tone=jade]{background:rgba(127,224,188,.12)}
.pf-hover-stats .pf-stat[data-tone=amber]{background:rgba(240,181,74,.14)}
.pf-hover-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.pf-hover-foot:empty{display:none}
.pf-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;white-space:nowrap;font:600 12px var(--ui)}
.pf-chip svg{width:12px;height:12px}
.pf-chip[data-tone=jade]{background:rgba(127,224,188,.18);border:1px solid rgba(127,224,188,.6);color:#C9F5E5}
.pf-hover-honour{width:28px;height:28px;object-fit:contain}
.pf-view{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 6px 0 16px;border-radius:999px;white-space:nowrap;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:var(--text);font:500 14px var(--ui)}
.pf-view>span{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.18)}
.pf-view svg{width:14px;height:14px}
.pf-view:hover{background:rgba(255,255,255,.22)}

/* Phones (portrait): everything above the fold, Ready included, over the footer. */
@media (max-width:760px) and (orientation:portrait){
  .matchup-screen>h1{margin-top:10px!important;font-size:31px!important;white-space:nowrap}
  .matchup-screen .matchup{margin-top:10px}
  .mp-stats{margin-top:10px}.mp-stats .pf-stat{min-height:42px;padding:6px 10px}
  .mp-seals{margin-top:7px}
  .mp-sheet{margin-top:10px;padding:12px 14px 14px}
  .mp-sheet #ready-status{margin-top:4px!important}
  .mp-sheet .journey-actions{margin-top:10px}
  .mp-sheet .journey-actions .primary{min-height:56px}
}
@media (max-width:760px) and (orientation:portrait) and (max-height:720px){
  .mp-seals{display:none}
  .mp-sheet .mp-stakes{display:none}
}
/* ------------------------------------------------------------------ larger screens */
@media (min-width:1024px) and (min-height:551px){
  body[data-screen=matchup] .journey-center.matchup-screen{max-width:560px}
}
/* Phone landscape: the two cards side by side, the match sheet beside them, seals tucked away. */
@media (orientation:landscape) and (max-height:550px){
  body[data-screen=matchup] .journey-center.matchup-screen{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:14px;align-items:start}
  .matchup-screen>.mp-top,.matchup-screen>h1{grid-column:1/-1}
  .matchup-screen>h1{font-size:28px!important;margin-top:6px!important}
  .matchup-screen .matchup{flex-direction:row;margin-top:10px}
  .matchup-screen .mp-card{flex:1;padding:10px 10px 10px 14px}
  .matchup-screen .mp-card[data-profile=self]{order:0}.matchup-screen .mp-vs{order:1;margin:0 -12px;width:40px;height:40px;font-size:18px}.matchup-screen .mp-card[data-profile=rival]{order:2}
  .mp-head{grid-template-columns:48px minmax(0,1fr) auto;gap:8px}
  .mp-head .pf-av{--s:48px}
  .mp-seals,.mp-stats{display:none}
  .mp-who>div>span{display:none}   /* the numbers are one tap away, in the profile */
  .mp-sheet{margin-top:10px;padding:12px 14px}
  .mp-sheet .journey-actions .primary{min-height:52px}
  #profile-dialog.pf-dialog{width:min(560px,calc(100vw - 20px))}
}
@media (max-width:360px){
  .matchup-screen>h1{font-size:34px!important}
  .mp-head{grid-template-columns:54px minmax(0,1fr) auto}
  .mp-head .pf-av{--s:54px}
  .pf-id{grid-template-columns:72px minmax(0,1fr)}
  .pf-id .pf-av{--s:72px}
  .pf-id h2{font-size:32px}
}
@media (prefers-reduced-motion:reduce){
  .pf-name>span{transition:none}
}