/* A single character-bound dialog is reachable from both header and menu.
   It lives beside the collapsible menu so the hidden header never hides it. */
.character-status-trigger,.character-status-menu{display:none}
.character-status-trigger,.character-status-close{box-sizing:border-box;place-items:center;flex:none;width:40px;height:40px;padding:0;border:1px solid var(--control-edge,var(--theme-line));border-radius:50%;background:linear-gradient(145deg,var(--control-top,var(--theme-soft)),var(--control-bottom,var(--theme-surface)));color:var(--control-ink,var(--theme-ink));box-shadow:inset 0 1px 0 var(--control-light,#fff3),0 2px 5px var(--control-shadow,#10233515);cursor:pointer;transition:border-color .18s,background .18s,transform .18s}
.character-status-trigger svg,.character-status-menu svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.character-status-trigger .status-glyph-baseline,.character-status-menu .status-glyph-baseline{stroke:var(--control-accent,var(--theme-accent))}
.character-status-trigger:focus-visible,.character-status-menu:focus-visible,.character-status-dialog :is(a,button):focus-visible{outline:2px solid var(--control-accent,var(--theme-accent));outline-offset:3px}
.character-status-close{display:grid;border-radius:12px}
.character-status-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
@media(hover:hover){.character-status-trigger:hover,.character-status-close:hover{border-color:var(--control-accent,var(--theme-accent));transform:translateY(-1px)}}
.character-status-trigger:active,.character-status-close:active{transform:scale(.95)}
html.character-status-open{overflow:hidden;scrollbar-gutter:stable}
.character-status-dialog{box-sizing:border-box;width:min(520px,calc(100vw - 28px));max-width:none;max-height:min(840px,calc(100dvh - 32px));margin:auto;padding:0;overflow:hidden;border:1px solid var(--theme-line,#aeced0);border-radius:24px;background:var(--theme-surface,#f6fbfa);color:var(--theme-ink,#214755);box-shadow:0 24px 90px #07182966;text-align:left;font:inherit}
.character-status-dialog[open]{display:flex;flex-direction:column;animation:character-status-in .18s ease-out}
.character-status-dialog::backdrop{background:#071b2cd1;backdrop-filter:blur(5px)}
.character-status-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;flex:none;padding:22px 24px 18px;border-bottom:1px solid var(--theme-line,#aeced0);background:radial-gradient(ellipse at 4% 0%,var(--theme-glow,#a2dadf44),transparent 75%),linear-gradient(120deg,var(--theme-soft,#e8f3ee),var(--theme-surface,#f6fbfa))}
.character-status-eyebrow{font-size:9px;font-weight:800;letter-spacing:.19em;color:var(--theme-accent,#147e87)}
.character-status-heading h2{margin:5px 0 0;font-size:27px;line-height:1.1;letter-spacing:-.03em}
.character-status-heading h2>span{color:var(--theme-accent,#147e87)}
.character-status-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:22px 24px 20px;scrollbar-width:thin;scrollbar-color:var(--theme-accent,#147e87) transparent}
.character-status-identity{display:flex;align-items:center;gap:14px;margin-bottom:20px;min-width:0}
.character-status-avatar{flex:none;display:grid;place-items:center;width:66px;height:66px;overflow:hidden;border-radius:50%;padding:3px;box-sizing:border-box;background:linear-gradient(140deg,var(--theme-accent,#147e87),var(--theme-line,#b7d8d5));box-shadow:0 0 0 5px color-mix(in srgb,var(--theme-accent,#147e87) 8%,transparent)}
.character-status-avatar img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 18%;border:2px solid var(--theme-surface,#f6fbfa);border-radius:50%;box-sizing:border-box}
.character-status-identity>div{min-width:0;flex:1;display:grid;gap:5px}
.character-status-identity strong{font-size:20px;line-height:1.2;overflow-wrap:anywhere}
.character-status-identity>div>span{font-size:12px;color:var(--theme-muted,#617e84)}
.character-status-state{font-size:10px;border:1px solid var(--theme-line,#aeced0);border-radius:20px;padding:5px 8px;flex:none}
.character-status-values{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 20px;font-variant-numeric:tabular-nums}
.character-status-values>div{min-width:0;padding:14px 16px;border:1px solid var(--theme-line,#aeced0);border-radius:14px;background:var(--theme-soft,#e8f3ee)}
.character-status-values dt{margin-bottom:4px;font-size:11px;color:var(--theme-muted,#617e84)}
.character-status-values dd{margin:0;font-size:21px;font-weight:800;line-height:1.3;overflow-wrap:anywhere;letter-spacing:-.02em}
.character-status-values dd>small{font-size:11px;font-weight:600;color:var(--theme-accent,#147e87)}
.character-status-values dd.character-status-rank-label{font-size:15px;line-height:1.82;letter-spacing:0;white-space:nowrap}
.character-status-values>.character-status-zeni{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:center;border-color:color-mix(in srgb,var(--theme-gold,#ad7726) 40%,var(--theme-line,#aeced0));background:linear-gradient(110deg,color-mix(in srgb,var(--theme-gold,#ad7726) 11%,var(--theme-surface,#f6fbfa)),var(--theme-soft,#e8f3ee))}
.character-status-zeni dt{grid-column:1;grid-row:1;font-size:13px;font-weight:700;color:var(--theme-ink,#214755);margin:0}
.character-status-zeni>span{grid-column:1;grid-row:2;font-size:10px;color:var(--theme-muted,#617e84)}
.character-status-zeni dd{grid-column:2;grid-row:1/3;font-size:27px;color:var(--theme-gold,#926822);text-align:right}
.character-status-resources{display:grid;gap:16px;padding:0 2px 21px}
.character-status-resource>div:first-child{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:7px;font-size:11px;line-height:1.4}
.character-status-resource>div:first-child>span{color:var(--theme-muted,#617e84)}
.character-status-resource b{color:var(--theme-ink,#214755);margin-right:5px}
.character-status-resource strong{font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
.character-status-resource strong>small{font-size:11px;font-weight:400;color:var(--theme-muted,#617e84)}
.character-status-track{height:7px;border-radius:10px;overflow:hidden;background:var(--theme-line,#bfdad7)}
.character-status-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ed657e,#ffb396);transition:width .3s ease}
.status-energy .character-status-track i{background:linear-gradient(90deg,#139cad,#77dfe1)}
.character-status-context{display:grid;border-block:1px solid var(--theme-line,#aeced0)}
.character-status-context> *{display:flex;align-items:center;gap:12px;padding:15px 0;text-decoration:none;color:inherit;min-width:0}
.character-status-context> *+*{border-top:1px solid var(--theme-line,#aeced0)}
.character-status-context-icon{display:grid;place-items:center;flex:none;width:35px;height:35px;border-radius:12px;background:var(--theme-soft,#e8f3ee);color:var(--theme-accent,#147e87);font-size:22px}
.character-status-context>*>span:nth-child(2){flex:1;min-width:0;display:grid;gap:3px}
.character-status-context small{font-size:10px;color:var(--theme-muted,#617e84)}
.character-status-context strong{font-size:13px;line-height:1.4;overflow-wrap:anywhere}
.character-status-context>*>span:nth-child(2)>span{font-size:11px;color:var(--theme-muted,#617e84);overflow-wrap:anywhere}
.character-status-context a>span:last-child{color:var(--theme-accent,#147e87)}
.character-status-profile{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;margin-top:10px;font-size:12px;font-weight:700;color:var(--theme-ink,#214755);text-decoration:none}
.character-status-profile>span{color:var(--theme-accent,#147e87)}
@media(max-width:850px),(min-width:851px) and (max-height:610px){
 .game-frame .character-status-trigger{display:grid}
 .character-status-menu{box-sizing:border-box;display:flex;align-items:center;width:calc(100% - 28px);min-height:58px;gap:12px;margin:8px 14px 5px;padding:10px 14px;border:1px solid var(--theme-line,#aeced0);border-radius:12px;text-align:left;color:var(--theme-ink,#214755);background:linear-gradient(110deg,var(--theme-soft,#e8f3ee),var(--theme-surface,#f6fbfa));font:inherit;cursor:pointer}
 .character-status-menu>span:nth-child(2){display:grid;gap:3px;min-width:0;flex:1}
 .character-status-menu strong{font-size:13px}
 .character-status-menu small{font-size:10px;color:var(--theme-muted,#617e84)}
 .character-status-menu>span:last-child{color:var(--theme-accent,#147e87)}
}
@media(min-width:851px) and (max-height:610px){.character-status-menu{display:none}}
@media(max-width:550px){
 .game-frame .game-topbar:has(.character-switcher) .game-top-actions>.character-status-trigger{grid-column:4;grid-row:2;justify-self:center}
 .game-frame .game-topbar:has(.character-switcher) .sky-controls{grid-column:2/4;min-width:0;max-width:100%;gap:0}
 .game-frame .game-topbar:has(.character-switcher) .sky-controls>.sky-current{min-width:0}
}
@media(max-width:380px){
 /* Recover room for the complete day label while retaining the 40px controls. */
 .game-frame .game-topbar:has(.character-switcher){column-gap:4px}
 .game-frame .game-topbar:has(.character-switcher) .sky-controls{font-size:10px}
 .game-frame .game-topbar:has(.character-switcher) .sky-controls button{width:23px}
 .character-status-heading{padding:18px 18px 15px}
 .character-status-body{padding:20px 18px 14px}
 .character-status-identity{gap:11px}
 .character-status-identity strong{font-size:18px}
 .character-status-values>div{padding:12px}
 .character-status-values dd{font-size:19px}
 .character-status-values dd.character-status-rank-label{font-size:13px;line-height:1.9}
 .character-status-zeni dd{font-size:23px}
 .character-status-resource>div:first-child{flex-wrap:wrap;gap:3px 10px}
}
/* Landscape battle navigation hides the regular sidebar too. Its menu must keep
   the labelled entry even where the spacious-desktop rule normally hides it. */
@media(max-width:1100px) and (max-height:500px){
 .game-frame:has(.arena[data-tech-size]) .character-status-menu{display:flex;width:100%;margin:0 0 8px}
}
@keyframes character-status-in{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.character-status-dialog[open]{animation:none}.character-status-trigger,.character-status-close,.character-status-track i{transition:none;transform:none}}
@media(forced-colors:active){.character-status-trigger,.character-status-close,.character-status-dialog,.character-status-values>div{border-color:ButtonText}.character-status-track i{background:Highlight}}