/* Minimal styles just for readability */
#mf-ext-chars-root { padding: 10px; font-family: 'Crimson Text', Georgia, serif; }
.mf-ext-chars-loading { opacity: 0.8; }
/* New header flex row for name + status badges */
.mf-char-header-row { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.mf-char-name { margin:0; font-size:20px; color:#5c4c3a; line-height:1.2; }
.mf-char-status-badges { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
/* Make badges squarer like other chips */
.mf-char-badge { display:inline-block; font-size:12px; font-weight:600; letter-spacing:.5px; padding:4px 10px 5px; border-radius:3px; line-height:1.2; box-shadow:0 1px 2px rgba(0,0,0,.25); background:#b5b5b5; color:#fff; position:relative; top:0; }
.mf-char-badge-yes { background:#3d7d4f; color:#fff; }
.mf-char-badge-no { background:#9f9f9f; color:#fff; }
.mf-char-badge-alive.mf-char-badge-no { background:#7a1d1d; }
.mf-char-badge-active.mf-char-badge-no { background:#6d6d6d; }
.mf-char-badge-npc { background:#a48c72; }
/* OTT specificity to enforce white text against global MyAccount rules */
html body.woocommerce-account #mf-ext-chars-root .woocommerce-MyAccount-content .mf-char-status-badges .mf-char-badge,
body.woocommerce-account #mf-ext-chars-root .woocommerce-MyAccount-content .mf-char-status-badges .mf-char-badge,
html body #mf-ext-chars-root .woocommerce-MyAccount-content .mf-char-status-badges .mf-char-badge,
body #mf-ext-chars-root .woocommerce-MyAccount-content .mf-char-status-badges .mf-char-badge { color:#fff !important; -webkit-text-fill-color:#fff !important; --parchment-text:#fff; }
@media (max-width:640px){ .mf-char-header-row { flex-direction:column; align-items:flex-start; } }
/* Existing styles below */
.mf-char-grid { display: flex; flex-direction: column; gap:22px; }
.mf-char-card { background:#f5efe4; border:2px solid #8b7355; padding:0 0 16px; position:relative; box-shadow:0 4px 8px rgba(0,0,0,.08); display:flex; flex-direction:column; }
.mf-char-card header { border-bottom:1px solid #c4b59d; padding:14px 18px 10px; background:#e8ddc4; }
.mf-char-card .mf-char-inner { display:flex; flex-direction:row; align-items:flex-start; padding:12px 18px 0; gap:28px; }
.mf-char-card .mf-char-nation { flex:0 0 300px; padding:0 0 0 0; display:flex; align-items:flex-start; justify-content:center; position:relative; }
.mf-char-card .mf-char-nation::after { content:""; position:absolute; top:0; right:-14px; width:1px; height:100%; background:#c4b59d; }
.mf-char-card .mf-char-nation img { width:100%; height:auto; object-fit:contain; display:block; }
.mf-char-card .mf-char-body { flex:1 1 auto; padding:0 0 0; display:flex; flex-direction:column; }
.mf-char-card h3 { margin:0; font-size:20px; color:#5c4c3a; }
.mf-char-card .mf-char-ids { margin-top:6px; font-size:15px; font-weight:700; color:#000; letter-spacing:.5px; }
.mf-char-card .mf-char-ids span { display:inline-block; background:#a48c72; /* override variable used by global color rule */ --parchment-text:#fff; color:#fff !important; padding:4px 11px 5px; margin:0 6px 6px 0; border-radius:3px; font-size:13px; font-weight:600; letter-spacing:.5px; box-shadow:0 1px 2px rgba(0,0,0,.25); }
/* Accessibility override: ensure character ID badge text remains white despite global MyAccount content color rule */
#mf-ext-chars-root .mf-char-card .mf-char-ids span { color:#fff !important; }
/* Character action buttons */
.mf-char-actions { margin:10px 0 0; display:flex; flex-wrap:wrap; gap:8px; }
/* Base button style (will be reinforced by high-specificity overrides below) */
.mf-char-btn { cursor:pointer; background:#000; color:#fff; border:1px solid #000; padding:5px 14px 6px; font-size:12px; font-weight:600; letter-spacing:.5px; border-radius:4px; line-height:1.2; box-shadow:0 1px 2px rgba(0,0,0,.35); transition:background .18s, transform .12s, box-shadow .18s; font-family:inherit; }
.mf-char-btn:hover { background:#111; }
.mf-char-btn:active { transform:translateY(1px); box-shadow:0 0 0 rgba(0,0,0,0.2); }
.mf-char-btn:focus { outline:2px solid #c4b59d; outline-offset:2px; }
/* Ensure variants do not change color scheme anymore */
.mf-char-btn-edit, .mf-char-btn-dead, .mf-char-btn-retired { background:#000; border-color:#000; }

/* High-specificity enforcement to beat global MyAccount * color + !important rules */
html body.woocommerce-account #mf-ext-chars-root .woocommerce-MyAccount-content .mf-char-actions .mf-char-btn,
body.woocommerce-account #mf-ext-chars-root .woocommerce-MyAccount-content .mf-char-actions .mf-char-btn { background:#000 !important; color:#fff !important; border-color:#000 !important; }
html body.woocommerce-account #mf-ext-chars-root .woocommerce-MyAccount-content .mf-char-actions .mf-char-btn:hover,
body.woocommerce-account #mf-ext-chars-root .woocommerce-MyAccount-content .mf-char-actions .mf-char-btn:hover { background:#111 !important; }
html body.woocommerce-account #mf-ext-chars-root .woocommerce-MyAccount-content .mf-char-actions .mf-char-btn:active,
body.woocommerce-account #mf-ext-chars-root .woocommerce-MyAccount-content .mf-char-actions .mf-char-btn:active { background:#000 !important; }
/* Stronger specificity override (mirrors global MyAccount selectors) */
html body.woocommerce-account .woocommerce-MyAccount-content .mf-char-card .mf-char-ids span,
body.woocommerce-account .woocommerce-MyAccount-content .mf-char-card .mf-char-ids span,
html body .woocommerce-MyAccount-content .mf-char-card .mf-char-ids span,
body .woocommerce-MyAccount-content .mf-char-card .mf-char-ids span { color:#fff !important; }
/* Max specificity override adding root ID to decisively beat all broad * + span rules using !important */
html body.woocommerce-account #mf-ext-chars-root .woocommerce-MyAccount-content .mf-char-card .mf-char-ids span,
body.woocommerce-account #mf-ext-chars-root .woocommerce-MyAccount-content .mf-char-card .mf-char-ids span { color:#fff !important; }
.mf-char-nation { text-align:center; margin-bottom:12px; }
.mf-char-nation img { max-width:100%; height:auto; box-shadow:0 2px 4px rgba(0,0,0,.08); }
.mf-char-meta { font-size:12px; color:#5c4c3a; margin-top:4px; display:none; }
.mf-char-section { margin-top:12px; }
.mf-char-section h4 { margin:0 0 6px; font-size:15px; color:#8b7355; letter-spacing:1px; text-transform:uppercase; }
.mf-char-section-skills, .mf-char-section-sub-skills { padding:0 18px; }
.mf-skill-groups { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px 24px; }
/* Prevent grid item overflow and allow content to shrink */
.mf-skill-cat { padding-bottom:8px; border-bottom:1px solid #c4b59d; min-width:0; }
/* Allow long names to wrap rather than overflow */
.mf-skill-cat-name, .mf-skill-cat ul, .mf-skill-cat ul li { white-space:normal; overflow-wrap:break-word; word-break:break-word; hyphens:auto; }
/* On narrow screens, use a single column for skill groups to avoid overflow */
@media (max-width:520px){
  .mf-skill-groups { grid-template-columns:1fr; gap:10px 12px; }
  .mf-skill-cat ul { list-style-position: inside; }
}
/* Force wrapping for skills in MyAccount context (beats global rules) */
html body.woocommerce-account #mf-ext-chars-root .woocommerce-MyAccount-content .mf-skill-cat,
body.woocommerce-account #mf-ext-chars-root .woocommerce-MyAccount-content .mf-skill-cat,
html body #mf-ext-chars-root .woocommerce-MyAccount-content .mf-skill-cat,
body #mf-ext-chars-root .woocommerce-MyAccount-content .mf-skill-cat {
  min-width: 0 !important;
}
html body.woocommerce-account #mf-ext-chars-root .woocommerce-MyAccount-content .mf-skill-cat-name,
body.woocommerce-account #mf-ext-chars-root .woocommerce-MyAccount-content .mf-skill-cat-name,
html body #mf-ext-chars-root .woocommerce-MyAccount-content .mf-skill-cat-name,
body #mf-ext-chars-root .woocommerce-MyAccount-content .mf-skill-cat-name,
html body.woocommerce-account #mf-ext-chars-root .woocommerce-MyAccount-content .mf-skill-cat ul,
body.woocommerce-account #mf-ext-chars-root .woocommerce-MyAccount-content .mf-skill-cat ul,
html body #mf-ext-chars-root .woocommerce-MyAccount-content .mf-skill-cat ul,
body #mf-ext-chars-root .woocommerce-MyAccount-content .mf-skill-cat ul,
html body.woocommerce-account #mf-ext-chars-root .woocommerce-MyAccount-content .mf-skill-cat ul li,
body.woocommerce-account #mf-ext-chars-root .woocommerce-MyAccount-content .mf-skill-cat ul li,
html body #mf-ext-chars-root .woocommerce-MyAccount-content .mf-skill-cat ul li,
body #mf-ext-chars-root .woocommerce-MyAccount-content .mf-skill-cat ul li {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important; /* prefer wrapping at spaces */
  hyphens: auto !important;
}
.mf-char-kv { display:grid; grid-template-columns:140px 1fr; gap:4px 10px; font-size:13px; }
.mf-char-kv > div:first-child { font-weight:600; color:#5c4c3a; }
.mf-char-skills ul, .mf-char-sub-skills ul { margin:0; padding-left:18px; font-size:13px; }
.mf-char-backstory { line-height:1.4; font-size:13px; background:#fff; padding:10px 12px; border:1px solid #c4b59d; max-height:140px; overflow:auto; }
.mf-char-resources { display:none; }
.mf-char-tag { display:inline-block; background:#a48c72; color:#fffefa; font-size:11px; padding:2px 6px 3px; border-radius:3px; margin-left:6px; letter-spacing:.5px; font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.25); }
.mf-char-status { font-size:12px; font-weight:600; margin-left:4px; }
.mf-char-status-alive-active { color:#1f6f49; }
.mf-char-status-alive-inactive { color:#b56a00; }
.mf-char-status-dead { color:#8b0000; }
.mf-char-groups { display:flex; flex-direction:column; gap:34px; }
.mf-char-group-heading { margin:0 0 12px; font-size:24px; letter-spacing:1px; color:#4a3c2c; position:relative; padding-bottom:6px; }
.mf-char-group-heading:after { content:""; position:absolute; left:0; bottom:0; width:140px; height:3px; background:#c4b59d; border-radius:2px; }
.mf-char-group-dead .mf-char-group-heading { color:#7a1d1d; }
.mf-char-group-inactive .mf-char-group-heading { color:#b56a00; }
.mf-char-group-active .mf-char-group-heading { color:#1f6f49; }
.mf-char-flags { position:absolute; top:8px; right:8px; display:flex; gap:4px; }
.mf-char-flag { background:#5c4c3a; color:#f5efe4; font-size:10px; padding:2px 6px; border-radius:2px; }
@media (max-width:900px){
	.mf-char-card .mf-char-inner { flex-direction:column; }
	.mf-char-card .mf-char-nation { flex:0 0 auto; padding:0 0 12px; }
	.mf-char-card .mf-char-nation::after { display:none; }
	.mf-char-card .mf-char-nation img { max-width:360px; }
	.mf-skill-groups { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
}
@media (max-width:640px){ .mf-char-kv { grid-template-columns:110px 1fr; } }

/* Mobile optimizations */
@media (max-width:520px){
  /* Stack key/value vertically */
  .mf-char-kv { grid-template-columns:1fr; gap:2px 0; }
  .mf-char-kv > div:first-child { margin-bottom:2px; }
  /* Tighten container padding/margins */
  #mf-ext-chars-root { padding: 6px; }
  .mf-char-card header { padding:10px 12px 8px; }
  .mf-char-card .mf-char-inner { padding:10px 12px 0; gap:16px; }
  .mf-char-section-skills, .mf-char-section-sub-skills { padding:0 12px; }
  .mf-char-backstory { padding:8px 10px; }
}