﻿/* One identity layout for the overview and public player profile. */
/* Supporting overview sections follow the same close rhythm as the card. */
.game-frame[data-page="overview"] .overview-home .identity-card{margin-top:0}
.game-frame[data-page="overview"] .overview-shortcuts{margin:14px 0;gap:14px}
.game-frame[data-page="overview"] .overview-shortcuts a{padding:14px 16px}
.game-frame[data-page="overview"] .attribute-dashboard{margin-top:14px;align-items:start;gap:16px}
.game-frame[data-page="overview"] .stat-radar{width:228px;max-width:100%}
.game-frame[data-page="overview"] .stat-radar text{font-size:12px}
@media(min-width:651px){.game-frame[data-page="overview"] .attribute-dashboard{grid-template-columns:minmax(0,1fr) 228px}}
.game-frame[data-page="overview"] .attribute-dashboard .stat-grid{margin-top:0;gap:12px}
.game-frame[data-page="overview"] .stat-card{padding:16px}
.game-frame[data-page="overview"] .player-battle-record{margin:16px 0}
.game-frame[data-page="overview"] .record-heading{margin-bottom:10px}
.game-frame[data-page="overview"] .record-heading .eyebrow{display:block;line-height:1.4}
.game-frame[data-page="overview"] .record-heading h2{margin-top:3px}
.game-frame[data-page="overview"] .record-categories{gap:14px}
.game-frame[data-page="overview"] .record-categories article{padding:14px 20px}
.game-frame[data-page="overview"] .record-categories header{gap:10px;margin-bottom:12px}
.game-frame[data-page="overview"] .record-categories header>div{display:flex;align-items:baseline;flex-wrap:wrap;gap:3px 12px}
.game-frame[data-page="overview"] .record-categories h3{margin:0}
.game-frame[data-page="overview"] .player-battle-record>p{margin-top:8px}
.game-frame[data-page="overview"] .biography-panel{margin-top:14px;padding:22px 28px}
.game-frame[data-page="overview"] .biography-heading{margin-bottom:14px}
.game-frame[data-page="overview"] .biography-heading h2{line-height:1.25}
@media(max-width:600px){
 .game-frame[data-page="overview"] .overview-shortcuts{gap:8px}
 .game-frame[data-page="overview"] .overview-shortcuts a{padding:12px 14px}
 .game-frame[data-page="overview"] .stat-card{padding:13px 12px}
 .game-frame[data-page="overview"] .record-categories article{padding:14px 16px}
 .game-frame[data-page="overview"] .biography-panel{padding:18px}
}
.overview-page .identity-card { container:player-card / inline-size; grid-template-columns:minmax(180px,32%) minmax(0,1fr); background:radial-gradient(ellipse at 90% 0,var(--theme-soft,#d3f0e7aa),transparent 65%),var(--theme-surface,#fff); }
.overview-page .identity-card .profile-portrait { position:relative; min-height:340px; max-height:none; overflow:hidden; }
soul-halo-anchor { position:absolute; left:0; top:0; width:100%; height:100%; z-index:2; pointer-events:none; visibility:hidden; container-type:inline-size; }
soul-halo-anchor[data-ready] { visibility:visible; }
.overview-page .identity-card .profile-portrait img { height:100%; max-height:none; object-fit:cover; object-position:50% 15%; }
/* Reserve the ship's 110px plus the summary's 10px padding and 1px border,
   including for characters without a ship. Content can still grow the row. */
.overview-page .identity-card .profile-details { --identity-actions-space:44px; display:grid; grid-template-rows:156px 84px 52px 40px minmax(121px,max-content) minmax(var(--identity-actions-space),max-content); padding:12px 28px; align-self:stretch; }
.identity-heading { --identity-rank-width:126px; --identity-heading-gap:24px; display:grid; grid-template-columns:minmax(0,1fr) var(--identity-rank-width); grid-template-rows:minmax(0,1fr) 30px; align-items:start; align-content:stretch; gap:8px var(--identity-heading-gap); }
.identity-name { min-width:0; grid-column:1; grid-row:1; align-self:start; }
.identity-heading .identity-status { grid-column:1 / -1; grid-row:2; align-self:center; }
.identity-heading .player-rank { grid-column:2; grid-row:1; align-self:start; width:var(--identity-rank-width); min-width:0; min-height:116px; padding:12px 10px; }
.identity-heading .rank-long .rank-value { font-size:14px; }
.identity-status { display:flex; align-items:center; flex-wrap:wrap; gap:12px; min-height:28px; }
.identity-level { display:inline-flex; align-items:center; flex-shrink:0; position:static; border-radius:8px; padding:5px 11px; color:var(--theme-gold,#79501c); background:var(--theme-soft,#fff0d1); font-size:12px; font-weight:700; white-space:nowrap; }
.identity-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0; }
.identity-card .identity-context { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:24px 22px; align-items:center; align-content:center; gap:2px; margin:0; }
.identity-card .identity-context :is(.soul-status,.identity-location) { margin:0; }
.identity-card .identity-context .soul-status { grid-row:1; justify-self:start; padding:3px 8px; font-size:12px; line-height:16px; }
.identity-card .identity-context .identity-location { grid-row:2; line-height:1.5; }
.overview-page .identity-card .identity-description { margin:0; }
.identity-card .profile-clan { width:100%; height:100%; max-width:none; margin:0; padding:16px 32px; border:0; border-left:3px solid var(--theme-line,#d6ac4a); border-radius:0; box-shadow:none; background:linear-gradient(90deg,var(--theme-soft,#dcefebd9),var(--theme-soft,#f8f0d266) 45%,transparent); }
.identity-card .profile-clan>span { flex:1; }
.identity-card .profile-clan img { width:52px; height:52px; flex:0 0 52px; object-fit:cover; }
.identity-card .profile-clan:hover { background:linear-gradient(90deg,var(--theme-hover,#ccebe4),var(--theme-hover,#f8f0d277) 55%,transparent); }
.identity-card .profile-clan::after { content:none; animation:none; }
.player-rank { --rank-edge:#7bb8bf; --rank-top:#f0faf7; --rank-bottom:#c6e4e5; --rank-ink:#285d6a; position:relative; isolation:isolate; display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0; width:max-content; min-width:126px; min-height:116px; padding:22px; color:var(--rank-ink); background:var(--rank-edge); clip-path:polygon(22% 0,78% 0,100% 22%,100% 78%,78% 100%,22% 100%,0 78%,0 22%); }
.player-rank::before { content:""; position:absolute; inset:2px; background:linear-gradient(140deg,var(--rank-top),var(--rank-bottom)); clip-path:inherit; z-index:-1; }
.player-rank::after { content:""; position:absolute; inset:7px; border:1px solid var(--theme-line,#ffffff99); clip-path:inherit; pointer-events:none; }
.rank-value { font-size:36px; font-weight:750; line-height:1.1; white-space:nowrap; font-variant-numeric:tabular-nums; }
.rank-value small { font-size:.48em; margin-right:3px; opacity:.65; }
.rank-caption { font-size:8px; letter-spacing:1.7px; font-weight:700; margin-top:9px; }
.rank-gold { --rank-edge:#c6a055; --rank-top:#fff6d3; --rank-bottom:#e5bd67; --rank-ink:#72501f; }
.rank-silver { --rank-edge:#9caeba; --rank-top:#f4fbff; --rank-bottom:#c4d3dd; --rank-ink:#496172; }
.rank-bronze { --rank-edge:#b88b67; --rank-top:#ffedde; --rank-bottom:#dbb38b; --rank-ink:#774c2d; }
.rank-long .rank-value { font-size:20px; }
.rank-glint { position:absolute; inset:-50%; pointer-events:none; background:linear-gradient(115deg,transparent 40%,#fff9 50%,transparent 60%); transform:translateX(-110%); }
.rank-featured.rank-gold .rank-glint { animation:rank-shimmer 9s ease-in-out infinite; }
@keyframes rank-shimmer { 0%,75% { transform:translateX(-110%); } 92%,100% { transform:translateX(110%); } }
.rank-compact { min-width:48px; min-height:46px; padding:11px 12px; }
.rank-compact .rank-value { font-size:16px; }
.rank-compact.rank-long .rank-value { font-size:12px; }
.rank-compact::after { inset:5px; }
.players-page .directory-identity { display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; gap:10px 24px; }
.players-page .directory-player { align-self:center; }
.players-page .directory-clan { display:flex; flex:1 1 220px; width:auto; min-width:0; max-width:none; gap:9px; padding:0; margin:0; border:0; border-radius:0; box-shadow:none; background:linear-gradient(90deg,var(--theme-soft,#d8ece780),transparent 90%); }
.players-page .directory-clan img { width:26px; height:26px; flex:0 0 26px; }
.players-page .directory-clan>span { min-width:0; }
.players-page .directory-clan strong { overflow-wrap:anywhere; }
.players-page .directory-clan-arrow { margin-left:auto; }
.directory-race { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.players-page .directory-table th:nth-child(3) { width:26%; }
.players-page .directory-table th:first-child { width:1%; }
.players-page .directory-table td { vertical-align:middle; }
@media(max-width:700px) {
 .overview-page .identity-card { grid-template-columns:1fr; }
 .overview-page .identity-card .profile-portrait { height:auto; min-height:0; max-height:none; aspect-ratio:2 / 3; }
 .overview-page .identity-card .profile-portrait > img { position:absolute; inset:0; display:block; width:100%; height:100%; max-height:none; object-fit:cover; object-position:50% 15%; }
 .overview-page .identity-card .profile-details { padding:16px 22px; }
 .identity-heading { --identity-heading-gap:12px; }
 .rank-featured { min-width:94px; min-height:94px; padding:16px; }
 .rank-featured .rank-value { font-size:28px; }
 .rank-featured.rank-long .rank-value { font-size:16px; }
 .identity-card .profile-clan { padding-inline:22px; }
 .players-page .directory-clan { padding-left:8px; }
 .directory-race { gap:5px; }
}
@media(prefers-reduced-motion:reduce) { .player-rank .rank-glint { animation:none; display:none; } }

/* The text sits on an opaque palette surface; only the empty tail fades out. */
.profile-clan.clan-band,
.identity-card .profile-clan.clan-band,
.players-page .profile-clan.clan-band {
    display:flex; align-items:stretch; padding:0; border:0; border-radius:0;
    box-shadow:none; background:none; gap:0; color:var(--clan-ink);
}
.profile-clan.clan-band::after { content:none; animation:none; }
.clan-band .clan-band-content {
    display:flex; flex:0 1 auto; align-items:center; gap:14px; min-width:0;
    padding:16px 24px; background:var(--clan-tint); border-left:3px solid var(--clan-accent);
}
.identity-card .clan-band .clan-band-content { flex:0 1 auto; }
.clan-band .clan-band-label { display:flex; flex-direction:column; gap:4px; min-width:0; }
.clan-band .clan-band-label :is(small,strong,span) { color:inherit; overflow-wrap:anywhere; }
.clan-band .directory-clan-arrow { display:flex; align-items:center; justify-content:flex-end; flex:1 0 48px; padding:12px; margin:0; color:var(--theme-ink,#285d6a); background:linear-gradient(90deg,var(--clan-tint),transparent); }
.clan-band:hover .clan-band-label strong { text-decoration:underline; }
.clan-band:focus-visible { outline:2px solid var(--clan-accent); outline-offset:3px; }
.players-page .clan-band .clan-band-content { padding:7px 12px; gap:9px; }
.players-page .clan-band .clan-band-label { gap:2px; }
.clan-themed { background:var(--clan-tint); color:var(--clan-ink); border-color:var(--clan-accent); }
.clan-themed :is(h1,h3,p,small,strong,.eyebrow,.clan-role) { color:inherit; }
.clan-theme-picker { border:0; padding:0; margin:20px 0; }
.clan-theme-picker>div { display:flex; flex-wrap:wrap; gap:10px; }
.clan-theme-picker button { background:var(--clan-tint); color:var(--clan-ink); border:2px solid transparent; border-radius:10px; padding:12px 18px; }
.clan-theme-picker button[aria-pressed=true] { border-color:var(--clan-accent); box-shadow:0 0 0 2px #fff,0 0 0 3px var(--clan-accent); }
@media(max-width:700px) { .clan-band .clan-band-content { padding:14px 18px; } }

.clan-themed .clan-role { background:var(--theme-surface,#ffffff18); color:inherit; }
.clan-band .clan-band-content img { flex-shrink:0; object-fit:cover; }

.profile-clan .clan-band-content .clan-band-label { color:var(--clan-ink); }
.players-page .clan-band .clan-band-label strong { font-size:13px; margin:0; }

/* Kampfkraft und Schiff teilen eine Zeile unter der Trennlinie. */
.identity-card .profile-details { container:identity-details / inline-size; }
.identity-card .identity-summary { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:10px 20px; margin:0; padding-top:10px; border-top:1px solid var(--line); }
.identity-card .identity-strength { min-width:0; }
.identity-card .identity-summary .ki-display { margin:0; padding:0; border:0; }
.overview-page .identity-card .identity-summary .ki-display strong { font-size:clamp(14px,calc(78cqi / var(--identity-ki-length)),var(--identity-ki-size,52px)); line-height:1.35; white-space:nowrap; letter-spacing:-.04em; }
.identity-card .identity-summary .ki-explanation { margin:4px 0 0; color:var(--muted); line-height:1.7; }
.identity-card .identity-ship { display:flex; align-items:center; gap:12px; max-width:260px; margin-left:auto; }
.identity-card .identity-ship .item-picture { flex:0 0 132px; width:132px; height:110px; }
.identity-card .identity-ship>span { min-width:0; font-size:.6rem; letter-spacing:.12em; }
.identity-card .identity-ship strong { display:block; font-size:.85rem; letter-spacing:normal; margin-top:6px; overflow-wrap:anywhere; }
@media(max-width:700px) {
 .identity-card .identity-summary { gap:16px; }
 .identity-card .identity-ship { margin-left:0; }
}
/* Adapt to the actual card width, including narrow desktop columns. */
@container identity-details (max-width:560px) {
 .identity-card .identity-summary { gap:12px; }
 .identity-card .identity-summary { --identity-ki-size:46px; }
 .identity-card .identity-summary .ki-display small { font-size:13px; letter-spacing:0; }
 .identity-card .identity-ship { min-width:0; max-width:100%; margin-left:0; justify-content:flex-end; gap:8px; }
 .identity-card .identity-ship .item-picture { flex:0 1 96px; min-width:0; width:clamp(56px,23cqi,96px); height:80px; }
 .identity-card .identity-ship>span { font-size:9px; letter-spacing:.06em; }
 .identity-card .identity-ship>span:not(.item-picture) { min-width:64px; }
}
@container identity-details (max-width:330px) {
 .identity-card .identity-ship { flex-direction:column; justify-self:end; align-items:center; gap:2px; text-align:center; }
 .identity-card .identity-ship .item-picture { flex:none; width:72px; height:60px; }
 .identity-card .identity-ship strong { margin-top:3px; }
}
@media(min-width:851px) and (max-height:1000px) {
 .identity-card .identity-summary { --identity-ki-size:34px; }
}

/* Profile actions carry full labels, unlike the compact hero editor icon. */
.identity-actions > a { box-sizing:border-box; max-width:100%; }
@media(max-width:600px) {
 .identity-actions { flex-direction:column; flex-wrap:nowrap; align-items:stretch; justify-content:center; }
 .identity-actions > a { display:flex; align-items:center; justify-content:center; width:100%; min-height:44px; padding:10px 14px; font-size:14px; line-height:1.4; white-space:normal; text-align:center; }
}

/* Reserve the same baseline rows for every player state. Summary and actions may
   grow when their content wraps, keeping the actions below the KK explanation. */
.identity-card .profile-details > * { min-width:0; min-height:0; }
.identity-card .identity-clan-slot { margin-inline:-28px; }
.identity-card .identity-clan-empty { display:flex; flex-direction:column; justify-content:center; gap:6px; height:100%; padding:10px 28px; color:var(--muted); background:linear-gradient(90deg,color-mix(in srgb,var(--muted) 7%,transparent),transparent); }
.identity-clan-empty small { font-size:9px; letter-spacing:2px; }
.identity-clan-empty > span { font-size:13px; }
.identity-card .identity-description { overflow:auto; overflow-wrap:anywhere; }
.identity-card .identity-location { font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
.identity-card .identity-heading { padding-bottom:8px; }
.overview-page .identity-card .identity-name h2 { font-size:clamp(18px,calc((100cqi - var(--identity-rank-width) - var(--identity-heading-gap)) * 1.85 / var(--identity-name-length)),var(--identity-name-size,32px)); line-height:1.25; margin:6px 0; }
.identity-card .identity-name > .eyebrow { display:block; line-height:16px; }
/* A rank is optional, but race, name and level keep the same grid anchors. */
.overview-home .identity-card[data-ranked="false"] .profile-details:after { display:none; }
.identity-card .clan-band .clan-band-content { padding-block:8px; }
.identity-card .identity-clan-slot .clan-band-label { display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 8px; }
.identity-card .identity-clan-slot .clan-band-label strong { grid-column:1 / -1;grid-row:1; }
.identity-card .identity-clan-slot .clan-band-label small,.identity-card .identity-clan-slot .clan-band-label > span { grid-row:2;line-height:1.3; }
.identity-card .identity-clan-slot .clan-band-label strong { font-size:18px; line-height:1.35; margin:0; }
.identity-card .identity-clan-slot .clan-band-label > span { font-size:12px; }
.identity-tools > .profile-image-editor { margin:14px 0 0; background:var(--theme-surface,#fff); }
.identity-tools > .halo-tools { margin-top:10px; border:1px solid var(--line); border-radius:16px; }
@container player-card (max-width:940px) {
 .overview-page .identity-card .profile-details { grid-template-rows:156px 84px 72px 48px minmax(121px,max-content) minmax(var(--identity-actions-space),max-content); }
 .identity-card .identity-actions { align-content:center; }
}
@container identity-details (max-width:560px) {
 .identity-card .identity-heading { --identity-rank-width:94px; --identity-heading-gap:12px; --identity-name-size:24px; }
 .identity-heading .player-rank { min-height:94px; padding:12px 10px; }
 .identity-heading .rank-long .rank-value { font-size:10px; }
 .identity-heading .identity-status { grid-column:1 / -1; }
 .identity-card .identity-context { grid-template-rows:24px 40px; }
}
@media(max-width:700px) {
 .identity-card .identity-clan-slot { margin-inline:-22px; }
 .identity-card .identity-clan-empty { padding-inline:22px; }
}
@container player-card (max-width:420px) {
 .overview-page .identity-card .profile-details { --identity-actions-space:88px; grid-template-rows:152px 108px 72px 56px minmax(148px,max-content) minmax(var(--identity-actions-space),max-content); }
 .identity-card .identity-status { gap:6px; }
 .identity-card .identity-clan-slot .clan-band-label strong { font-size:16px; }
 .identity-card .clan-band .clan-band-content { gap:10px; padding-inline:18px; }
 .identity-card .clan-band .directory-clan-arrow { flex-basis:24px; padding:8px; }
}
@container player-card (max-width:340px) {
 .overview-page .identity-card .profile-details { --identity-actions-space:88px; grid-template-rows:160px 128px 72px 64px minmax(148px,max-content) minmax(var(--identity-actions-space),max-content); }
 .identity-card .identity-heading { --identity-rank-width:72px; --identity-heading-gap:10px; --identity-name-size:22px; }
 .identity-card .identity-heading .player-rank { min-height:76px; padding:12px 6px; }
 .identity-card .identity-heading .rank-value { font-size:25px; }
 .identity-card .identity-heading .rank-long .rank-value { font-size:9px; }
 .identity-card .identity-heading .rank-caption { font-size:7px; letter-spacing:1px; }
 .identity-card .identity-clan-slot .clan-band-label strong { font-size:14px; }
}
/* Short screens keep the same baseline rows, with the rank and ship scaled
   locally. The original portrait frame and crop contract stay intact. */
@media(min-width:851px) and (max-height:1000px) {
 .overview-page .identity-card .profile-details { --identity-actions-space:44px; grid-template-rows:140px 84px 72px 40px minmax(102px,max-content) minmax(var(--identity-actions-space),max-content);padding-block:12px; }
 .identity-card .identity-heading { --identity-rank-width:88px; --identity-heading-gap:12px; --identity-name-size:26px; gap:6px var(--identity-heading-gap); }
 .identity-card .identity-heading .player-rank { min-height:88px;padding:12px 8px; }
 .identity-card .identity-heading .rank-value { font-size:26px; }
 .identity-card .identity-heading .rank-long .rank-value { font-size:11px; }
 .identity-card .identity-heading .rank-caption { margin-top:6px; }
 .identity-card .identity-heading .identity-status { grid-column:1 / -1; }
 /* A width-like flex-basis becomes a height once the narrow ship stacks.
    Keep its existing 72x60 frame in that layout. */
 @container identity-details (width > 330px) {
  .identity-card .identity-summary .identity-ship .item-picture { flex:0 1 100px;width:100px;height:82px; }
 }
 .identity-card .identity-actions { gap:8px; }
 .identity-card .identity-actions>a { min-height:40px;padding:8px 12px;font-size:12px; }
}

/* Own profiles have no action links inside the card; don't reserve their row. */
.overview-page .identity-card .profile-details:has(> .identity-actions:empty) { --identity-actions-space:0px; }

/* A shared name column aligns every clan band, including rows marked “Du”. */
.players-page .directory-identity { display:grid; grid-template-columns:clamp(170px,18vw,250px) minmax(0,1fr); gap:14px; }
.players-page .directory-player { min-width:0; }
.players-page .directory-player span { min-width:0; overflow-wrap:anywhere; }
.players-page .directory-clan { width:100%; min-width:0; }
.clan-profile-meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; }
.clan-profile-meta p { margin:0; }
.clan-role-slot { display:flex; align-items:center; width:100px; min-height:28px; flex:none; }
.clan-profile-meta .clan-role { display:inline-flex; align-items:center; margin:0; padding:5px 10px; border:1px solid var(--clan-accent); border-radius:8px; font-size:11px; line-height:16px; white-space:nowrap; }
@media(max-width:900px) {
 .players-page .directory-identity { grid-template-columns:minmax(0,1fr); gap:9px; }
 .players-page .directory-clan { max-width:100%; }
}
@media(max-width:550px) {
 .players-page .clan-band .directory-clan-arrow { display:none; }
 .players-page .clan-band .clan-band-content { flex:1; padding:7px; gap:7px; }
 .players-page .clan-band .clan-band-label strong { font-size:11px; }
}
