.character-details { width:min(1040px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);overflow:auto;overscroll-behavior:contain;font-family:var(--font-ui);font-size:14px;line-height:1.65 }
.character-details::backdrop { background:rgb(0 0 0 / .62) }
.character-details-header { position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;background:var(--surface);border-bottom:1px solid var(--line) }
.character-details-header h2 { margin:0;font-size:20px;line-height:1.4;overflow-wrap:anywhere }
.character-details-header button { flex-shrink:0 }
.character-stats-overview { padding:14px 20px 16px;border-bottom:1px solid var(--line) }
.character-stats-overview h3 { margin:0 0 8px }
.character-stats-overview .character-stats-grid { margin:0 0 8px }
.character-stats-overview .character-stats-note { margin:0 0 10px }
.character-details-body { display:grid;grid-template-columns:minmax(180px,32%) minmax(0,1fr);gap:24px;padding:20px;align-items:start }
.character-details-art { position:sticky;top:86px;display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0 }
.character-details-art img { width:100%;max-height:62dvh;object-fit:contain;border-radius:8px }
.character-details-art.expanded { position:static;grid-column:1/-1 }
.character-details-art.expanded img { width:auto;max-width:100%;max-height:82dvh }
.character-details-art.expanded + .character-details-content { grid-column:1/-1 }
.character-details-content { min-width:0 }
.character-details-section + .character-details-section { margin-top:22px;padding-top:18px;border-top:1px solid var(--line) }
.character-details h3 { margin:0 0 12px;font-size:17px }
.character-details h4 { margin:16px 0 6px;font-size:14px }
.character-details p { margin:8px 0;font-size:14px;overflow-wrap:anywhere }
.character-facts { display:grid;grid-template-columns:max-content minmax(0,1fr) max-content minmax(0,1fr);gap:6px 12px;margin:0 }
.character-facts dt { color:var(--text-soft) }.character-facts dd { margin:0;overflow-wrap:anywhere }
.character-skill { white-space:pre-wrap }
.character-details button,.character-details select { font:inherit;min-height:40px }
.character-detail-link { padding:2px 0;border:0;border-radius:0;background:transparent;color:var(--text);text-align:left;text-decoration:underline;text-underline-offset:3px;white-space:normal;overflow-wrap:anywhere }
.character-detail-link:hover { background:var(--surface-2);color:var(--text) }
.character-variants { display:flex;flex-direction:column;align-items:start }
.character-stats-toolbar { display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap }
.character-stats-toolbar label { display:flex;align-items:center;gap:8px }
.character-stats-toolbar select { width:auto;min-width:128px }
.character-stats-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0 }
.character-stat { display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:8px;padding:12px;background:var(--surface-2);min-width:0 }
.character-stat strong { font-size:25px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums }
.character-stat small,.character-stats-note { color:var(--text-soft);font-size:12px }
.character-stats-notice { border-left:3px solid var(--primary);padding:8px 12px;background:var(--surface-2) }
.character-stats-table { margin:14px 0;max-width:100%;overflow-x:auto }
.character-stats-table table { width:100%;border-collapse:collapse;font-size:13px;table-layout:auto }
.character-stats-table th,.character-stats-table td { padding:8px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;overflow-wrap:anywhere }
.character-stats-table th { font-weight:600;color:var(--text-soft) }
.character-stats-method { margin-top:16px;color:var(--text-soft) }
.character-stats-method summary { cursor:pointer;min-height:40px;display:list-item }
.character-stats-method p { font-size:12px }
.selected-deck-row .selected-art-button { padding:0;min-height:0;width:34px;border:0;background:transparent }
.selected-art-button img { display:block;width:100%;height:auto }
.side-row .character-detail-link { flex:1;min-width:0;padding:4px 0;background:transparent;color:var(--text);border:0 }
@media (max-width:600px) and (orientation:portrait) {
  .character-details { width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:10px }
  .character-details-header { padding:10px 12px }.character-details-header h2 { font-size:18px }
  .character-stats-overview { padding:10px 12px 12px }
  .character-details-body { grid-template-columns:minmax(0,1fr);gap:18px;padding:12px }
  .character-details-art { position:static }
  .character-details-art img { width:auto;max-width:100%;max-height:34dvh }
  .character-details-art.expanded img { max-height:72dvh }
  .character-facts { gap:6px 8px }
  .character-stat { padding:10px }.character-stat strong { font-size:23px }
}
@media (max-height:500px) and (orientation:landscape) {
  .character-details { width:calc(100vw - 20px);max-height:calc(100dvh - 16px) }
  .character-details-header { padding:6px 12px }.character-details-header h2 { font-size:18px }
  .character-stats-overview { padding:8px 12px 10px }
  .character-details-body { grid-template-columns:26% minmax(0,1fr);padding:12px;gap:16px }
  .character-details-art { top:66px }
  .character-details-art img { max-height:67dvh }
}