/* Shared close control; native dialogs retain their browser positioning. */
/* Battle effects and selected-card labels occupy layers through 1200. */
/* Keep battle detail overlays above body-mounted effects even when battle/formation CSS loads later. */
.game-page .skill-modal,
.game-page.ring-formation .formation-modal,
.skill-modal, .audit-modal, .llm-log-modal, .provider-modal { z-index: 2000; }
/* Formation isolates its backdrop; lift that context only while its modal is open. */
.game-page.formation-battle:has(.formation-modal) { z-index: 2000; }
.llm-log-modal { z-index: 2001; }
.dialog-close {
  position: absolute !important; top: 12px !important; right: 12px !important;
  bottom: auto !important; left: auto !important;
  display: grid !important; place-items: center; flex: 0 0 auto;
  width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important;
  margin: 0 !important; padding: 8px !important;
  border: 0 !important; border-radius: 6px; background: transparent !important;
  color: #e8dec6; box-shadow: none !important; cursor: pointer;
}
.dialog-close:hover { background: #f0dca81a !important; color: #fff1cf; }
.dialog-close:focus-visible { outline: 2px solid #e6c67c; outline-offset: 2px; }
.dialog-close svg { display: block; width: 20px; height: 20px; pointer-events: none; }
:is(dialog, [role="dialog"]):has(.dialog-close) > :is(header,h2) { padding-right: 38px; }
.status-detail-dialog .status-entry-heading { justify-content: flex-start; }
/* Status and character skills share the same responsive reading frame. */
.skill-modal-card, .status-detail-dialog {
  box-sizing: border-box;
  width: min(760px, calc(100vw - 36px));
  max-width: calc(100vw - 36px);
  max-height: calc(100dvh - 36px);
  padding: 28px 30px;
  overflow: auto;
}
@media (max-width: 650px) {
  .skill-modal-card, .status-detail-dialog { padding: 24px 22px; }
}

.skill-resource-details {
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid #e6c67c30;
}
.skill-resource-details .fine-print {
  margin: 0;
  color: var(--muted, #adb5af);
  font-size: 13px;
  line-height: 1.65;
}
.skill-resource-details .fine-print + .fine-print { margin-top: 8px; }

/* Character details: fixed heading and one shared scroll region. */
.skill-modal-card.skill-only-card { width:min(680px,calc(100vw - 36px)); }
.skill-only-card #skill-modal-title { color:var(--gold); font-size:22px; }
.skill-modal-card.hero-detail-card { width:min(920px,calc(100vw - 36px)); padding:0; display:flex; flex-direction:column; overflow:hidden; }
.hero-detail-card > header { flex:none; padding:20px 64px 16px 24px; border-bottom:1px solid var(--line); }
.hero-detail-card .skill-modal-heading { margin:3px 0 8px; gap:12px; }
.hero-detail-card .skill-modal-heading h2 { font-size:26px; }
.hero-unit { color:var(--muted); font-size:13px; font-weight:400; }
.hero-detail-stats { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 22px; font-size:14px; }
.hero-detail-stats > strong { font-size:20px; color:var(--ink); }
.hero-detail-card p.hero-attack-source { font-size:12px; color:var(--muted); line-height:1.6; }
.hero-detail-scroll,.hero-detail-card .formation-drawer-content { min-height:0; overflow:auto; padding:20px 24px; }
.hero-detail-layout { display:grid; gap:24px; align-items:start; }
.hero-detail-layout.has-army { grid-template-columns:minmax(0,2.3fr) minmax(210px,1fr); }
.hero-detail-layout > * { min-width:0; }
.hero-detail-card .skill-resource-details { margin:0 0 16px; padding:9px 12px; border:1px solid #e6c67c30; border-radius:8px; background:#e6c67c08; }
.hero-detail-card .skill-resource-details .fine-print { margin:0; }
.hero-skill-entry + .hero-skill-entry { border-top:1px solid var(--line); margin-top:18px; padding-top:18px; }
.hero-skill-entry > header { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; margin-bottom:8px; }
.hero-detail-card .hero-skill-entry .skill-name { margin:0; font-size:19px; }
.hero-skill-limit { font-size:11px; color:var(--muted); border:1px solid var(--line); border-radius:4px; padding:1px 6px; }
.hero-detail-card .hero-skill-entry p { font-size:14px; line-height:1.75; }
.hero-detail-card .skill-supplement { margin-top:8px; }
.hero-detail-card .hero-skill-entry .skill-supplement p,
.hero-detail-card .hero-skill-entry .skill-state { font-size:12px; color:var(--muted); }
.hero-detail-card .hero-skill-entry .skill-state { margin:8px 0 0; }
.hero-detail-card .army-details { margin:0; padding:0 0 0 20px; border:0; border-left:1px solid #a9bbb023; border-radius:0; background:none; }
.hero-detail-card .army-details-stats { display:grid; gap:7px; }
.hero-detail-card .army-details-stats > div { justify-content:space-between; }
.hero-detail-card .army-forecast { margin-top:12px; padding:0; border-radius:6px; background:none; }
.hero-detail-card .army-forecast.is-warning { padding:9px 10px; background:#edbc8810; border:1px solid #edbc8830; }
.hero-detail-card .army-details-notes h4 { margin:12px 0 5px; font-size:12px; color:var(--muted); }
.hero-detail-card .formation-detail-heading { display:block; }
.hero-detail-card .formation-detail-heading > b { margin-right:12px; }
@media (max-height:500px) and (orientation:landscape) {
 .skill-modal-card.hero-detail-card { max-height:calc(100dvh - 20px); width:calc(100vw - 24px); max-width:calc(100vw - 24px); }
 .hero-detail-card > header { padding:9px 60px 8px 16px; }
 .hero-detail-card .eyebrow { display:none; }
 .hero-detail-card .skill-modal-heading { margin:0 0 2px; }
 .hero-detail-card .skill-modal-heading h2 { font-size:21px; }
 .hero-detail-stats > strong { font-size:17px; }
 .hero-detail-scroll,.hero-detail-card .formation-drawer-content { padding:12px 16px; }
 .hero-detail-layout { gap:16px; }
 .hero-detail-layout.has-army { grid-template-columns:minmax(0,1.65fr) minmax(210px,1fr); }
 .hero-detail-card .hero-skill-entry p { font-size:13px; }
 .hero-detail-card .hero-skill-entry .skill-name { font-size:17px; }
}
.ring-formation .formation-modal > .formation-drawer.hero-detail-card { width:min(920px,calc(100vw - 36px)); padding:0; gap:0; }
@media (max-height:500px) and (orientation:landscape) {
 .ring-formation .formation-modal > .formation-drawer.hero-detail-card { width:calc(100vw - 24px); max-height:calc(100dvh - 20px); }
}
.resource-pips { display:inline-flex; gap:4px; margin-left:9px; vertical-align:middle; }
.resource-pips i { width:7px; height:7px; border:1px solid var(--gold); border-radius:50%; }
.resource-pips i.filled { background:var(--gold); }

/* Compact shared character panel. */
.hero-detail-card .hero-detail-identity { display:flex; gap:16px; align-items:center; min-width:0; }
.hero-detail-avatar { width:64px; height:76px; flex:none; overflow:hidden; display:grid; place-items:center; border:1px solid #e6c67c35; border-radius:9px; background:#e6c67c09; color:var(--gold); font:28px serif; }
.hero-detail-avatar img { width:100%; height:100%; object-fit:cover; object-position:center 22%; }
.hero-detail-summary { min-width:0; }
.hero-detail-card .skill-modal-heading { margin:0 0 6px; }
.hero-detail-card .skill-modal-heading h2 { margin:0; font-size:24px; }
.hero-detail-card .hero-detail-stats { gap:6px 16px; font-size:13px; }
.hero-detail-card .hero-detail-stats > strong { font-size:15px; font-weight:500; }
.hero-detail-card p.hero-attack-source { margin:2px 0 0; font-size:11px; }
.hero-detail-card p.hero-detail-relations { margin:4px 0 0; font-size:12px; font-weight:400; color:var(--gold); }
.hero-detail-card .hero-detail-speak { position:absolute; top:18px; right:62px; width:auto; min-width:0; margin:0; padding:5px 12px; font-size:12px; font-weight:400; border-color:#a9bbb033; background:transparent; }
.hero-detail-card > header { padding:18px 142px 18px 24px !important; }
.hero-detail-card .skill-description-view { margin:0; }
.hero-detail-card .hero-skill-entry p { font-weight:400; }
.hero-detail-card .hero-skill-entry strong { font-weight:600; }
.hero-detail-card .army-details-stats { gap:14px; margin-top:14px; }
.hero-detail-card .army-details-stats > div { display:grid; grid-template-columns:1fr auto; gap:4px 8px; }
.hero-detail-card .army-stat-track { grid-column:1/-1; display:block; height:3px; overflow:hidden; border-radius:3px; background:#a9bbb01c; }
.hero-detail-card .army-stat-track i { display:block; height:100%; background:#a8bc9f; border-radius:inherit; }
.hero-detail-card .army-details-stats > div:nth-child(2) .army-stat-track i { background:#d4bb7e; }
.hero-detail-card .army-details-stats > div:nth-child(3) .army-stat-track i { background:#a89979; }
.hero-detail-card .army-forecast > strong { font-size:12px; font-weight:400; }
.hero-detail-card .army-forecast.is-warning > strong { font-weight:600; }
@media (max-height:500px) and (orientation:landscape) {
 .hero-detail-card > header { padding:10px 126px 10px 16px !important; }
 .hero-detail-card .hero-detail-identity { gap:12px; }
 .hero-detail-avatar { width:48px; height:58px; }
 .hero-detail-card .skill-modal-heading { margin:0 0 3px; }
 .hero-detail-card .skill-modal-heading h2 { font-size:20px; }
 .hero-detail-card .hero-detail-speak { top:12px; right:54px; }
 .hero-detail-card .army-details { padding-left:16px; }
 .hero-detail-card .army-details-stats { gap:9px; margin-top:8px; }
 .hero-detail-card .hero-skill-entry + .hero-skill-entry { margin-top:14px; padding-top:14px; }
}