/* Player preview (js/10-profile.js): the sheet any tapped player opens, and
   the hero stage shared with your own Profile sheet. Loaded last so it sits
   on top of the dark sheet theme from expedition.css. */
.playerLink{cursor:pointer}
.playerLink:focus-visible{outline:2px solid #9d8cff;outline-offset:2px;border-radius:8px}
.chatname.playerLink:hover{text-decoration:underline}

.playerHead{display:flex;align-items:center;gap:10px;margin:6px 0 4px}
.playerHead .avatar{flex:none;width:50px;height:50px;border-radius:50%;overflow:hidden;
  border:2px solid #7f76b0;background:#242a56;display:grid;place-items:center}
.playerHead small{display:block;font-size:11px;color:var(--ink2);text-transform:uppercase;letter-spacing:.06em}
.playerClan{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:13px;color:var(--ink)}
.playerClan.none{color:var(--ink2)}
.playerPower{text-align:right;line-height:1.1}
.playerPower span{display:block;font-size:11px;color:var(--ink2)}
.playerPower b{font-size:20px;color:#ffd86b}

/* a player's clan beside their name (clanTagHtml in js/09-clan.js) */
.clanTag{display:inline-flex;align-items:center;gap:3px;margin-left:6px;padding:0 7px 0 3px;
  border-radius:99px;background:#3a335d;color:#e4dcff;font-size:11px;font-weight:700;line-height:17px;
  letter-spacing:0;text-transform:none;vertical-align:middle;white-space:nowrap}
/* .aicon too, so a row that sizes its own icons (.leagueRival .aicon) can't stretch the badge */
.clanTag img,.clanTag .aicon{width:14px;height:14px;flex:none;border:0;border-radius:0;background:none}
.clanTag.none{padding:0 7px;background:#2b3050;color:#a3aad0;font-weight:600}
/* your own Profile sheet styles every span in its header as the "Name" label */
.sheet[data-variant="profile"] .profileIdentity .playerClan{margin-top:4px}
.sheet[data-variant="profile"] .profileIdentity .playerClan span{color:inherit;font-size:13px;font-weight:700;line-height:1.2}

.playerStage{position:relative;height:176px;margin:6px 0 10px;border-radius:14px;overflow:hidden;
  border:1px solid #4b5087;
  background:radial-gradient(ellipse 70% 55% at 50% 88%,#4c3f86 0%,transparent 70%),
             linear-gradient(180deg,#2c3470 0%,#20264e 100%)}
.playerStage svg:not(svg svg){display:block;width:100%;height:100%}

.sheet .playerGear{grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:auto;gap:6px;margin-bottom:6px}
.sheet .playerGear .slot{aspect-ratio:1;height:auto;min-height:0}
.playerGear div.slot{cursor:default}
.playerGear div.slot:active{transform:none}
.playerGear button.slot{cursor:pointer}
.playerGear button.slot:focus-visible,.playerComp:focus-visible{outline:2px solid #9d8cff;outline-offset:2px}
.playerHint{margin:2px 0 8px;text-align:center}

/* Companions: a card each, like the Pets and Mounts tabs show yours. Tapping
   one opens its read-only card (openPlayerComp in js/10-profile.js). */
.playerComps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.playerComp{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:8px 8px 10px;
  border:1px solid color-mix(in srgb,var(--rar) 70%,#5b6090);border-radius:14px;color:#e7e9ff;text-align:center;cursor:pointer;
  background:radial-gradient(circle at 50% 46%,color-mix(in srgb,var(--rar) 20%,transparent),transparent 55%),#151a3a}
.playerComp:active{transform:translateY(1px)}
.playerComp img{width:64px;height:64px;object-fit:contain}
.playerComp>span{align-self:stretch;color:#969dc7;font-size:11px;font-weight:800;text-align:left;text-transform:uppercase}
.playerComp>b{max-width:100%;overflow:hidden;font-size:14px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.playerComp em{color:var(--rar);font-size:11px;font-style:normal;font-weight:700}
.playerComp .pwLine{justify-content:center;margin-top:2px}

/* the read-only gear card wears the same head as your own (gear-detail) */
.sheet[data-variant="player-gear"] h3{text-align:left;font-size:23px}