:root {
  /* PyMaps v0.1 theme foundation, adapted from the PyRoller family visual system. */
  --py-bg: #cfe8ff;
  --py-bg-strong: #d6ebff;
  --py-bg-soft: #eaf5ff;
  --py-topbar: #9ed0ff;
  --py-panel: #ffffff;
  --py-panel-soft: #f7fbff;
  --py-panel-soft-2: #f8fcff;
  --py-panel-tint: #eef7ff;
  --py-notice-bg: #f3f9ff;
  --py-border: #8bb8e8;
  --py-border-strong: #8bb5ea;
  --py-border-soft: #d5e6f7;
  --py-border-soft-2: #deedfb;
  --py-border-faint: #dcecf9;
  --py-text: #123a63;
  --py-text-strong: #10385b;
  --py-text-deep: #0f3d67;
  --py-muted: #557ea6;
  --py-muted-strong: #587aa3;
  --py-primary: #2b6cb0;
  --py-primary-2: #3b82c4;
  --py-primary-dark: #244c7d;
  --py-primary-mid: #2b6fb3;
  --py-on-primary: #ffffff;
  --py-danger: #b83232;
  --py-danger-strong: #b72a2d;
  --py-success: #2f855a;
  --py-success-deep: #276749;
  --py-hover-ring: rgba(43,108,176,.12);
  --py-hover-ring-strong: rgba(43,108,176,.16);
  --py-shadow-color: rgba(17,63,109,.12);
  --py-shadow-soft: 0 8px 24px var(--py-shadow-color);
  --py-header-bg-start: rgba(214,235,255,.97);
  --py-header-bg-end: rgba(238,247,255,.97);
  --py-header-shadow: rgba(17,63,109,.04);
  --py-shadow-panel: rgba(17,63,109,.18);
  --py-shadow-panel-strong: rgba(17,63,109,.24);
  --py-panel-glass: rgba(246,251,255,.98);
  --py-panel-glass-strong: rgba(255,255,255,.98);
  --py-primary-glass: rgba(214,235,255,.62);
  --py-primary-border-alpha: rgba(43,108,176,.32);
  --py-primary-border-alpha-strong: rgba(43,108,176,.35);
  --py-primary-border-alpha-soft: rgba(43,108,176,.25);
  --py-hero-wash: rgba(247,251,255,.94);
  --py-hero-radial: rgba(59,130,196,.22);
  --py-hero-glow: rgba(255,255,255,.9);
  --py-hero-orb-border: rgba(139,184,232,.22);
  --py-elevated-panel: rgba(255,255,255,.78);
  --py-table-stripe: var(--py-panel-soft);
  --py-input-bg: var(--py-panel);
  --py-success-bg: rgba(240,255,246,.98);
  --py-success-border: rgba(47,133,90,.25);
  --py-success-ring: rgba(47,133,90,.22);
  --py-danger-bg: rgba(255,244,244,.98);
  --py-danger-border: rgba(195,44,47,.32);
  --py-dark-popover: rgba(8,15,28,.88);
  --py-dark-popover-text: #eef3ff;

  /* Legacy aliases kept so existing app styles keep working while CSS is migrated. */
  --bg: var(--py-bg);
  --bg2: var(--py-bg-soft);
  --panel: var(--py-panel);
  --line: var(--py-border);
  --text: var(--py-text);
  --muted: var(--py-muted);
  --accent: var(--py-primary);
  --accent2: var(--py-primary-2);
  --accent-strong: var(--py-primary-dark);
  --danger: var(--py-danger);
  --success: var(--py-success);
  --shadow: var(--py-shadow-soft);
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: Arial, Helvetica, sans-serif; color: var(--text); background: linear-gradient(180deg, var(--bg), var(--bg2)); }
a { color: var(--accent); text-decoration: none; }
.app-shell { min-height: 100vh; }
.topbar { background: var(--py-topbar); border-bottom: 2px solid var(--line); padding: 16px 24px; position: sticky; top:0; z-index: 5; }

.brand-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.home-brand-link{color:inherit;text-decoration:none;}
.home-brand-link:visited{color:inherit;}
.home-brand-link:hover .brand{text-decoration:none;}
.brand-icon{width:42px;height:42px;object-fit:cover;border-radius:12px;border:2px solid var(--line);background:var(--py-panel);box-shadow:var(--shadow);}
.brand-fallback{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;border:2px solid var(--line);background:var(--py-panel);font-size:24px;box-shadow:var(--shadow);}
.brand { font-size: 28px; font-weight: 800; }
.subbrand { font-size: 14px; color: var(--muted); margin-top:4px; }
.nav-links { display:flex; gap:12px; flex-wrap:wrap; margin-top: 14px; }
.nav-pill { padding: 10px 14px; border-radius: 999px; border: 2px solid var(--line); background: var(--py-panel); color: var(--text); font-weight: 700; }
.nav-pill.active { background: var(--accent); color: var(--py-on-primary); border-color: var(--accent); }
.nav-pill.disabled { opacity: .55; cursor: default; }
.container { max-width: 1100px; margin: 0 auto; padding: 24px; }
.hero-card, .panel { background: var(--panel); border: 2px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.hero-card { padding: 24px; }
.grid { display:grid; gap:20px; }
.grid.two { grid-template-columns: 2fr 1fr; }
@media (max-width: 900px){ .grid.two { grid-template-columns: 1fr; } }
.section-title { font-size: 30px; margin:0 0 8px; font-weight: 800; text-align:center; }
.section-sub { color: var(--muted); margin-bottom: 12px; }
.step-tabs { display:flex; gap:12px; flex-wrap:wrap; margin: 18px 0 24px; }
.step-tab { padding: 10px 14px; border-radius: 12px; border: 2px solid var(--line); background:var(--py-input-bg); color: var(--text); font-weight: 800; }
.step-tab.active { background: var(--accent2); color:var(--py-on-primary); border-color: var(--accent2); }
.step-tab.disabled { opacity: .55; }
.field-grid { display:grid; gap:16px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.field-grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 760px){ .field-grid, .field-grid.three { grid-template-columns: 1fr; } }
.field { display:flex; flex-direction:column; gap:8px; }
label { font-weight: 800; }
input[type=text], input[type=number], select, textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--line); background:var(--py-input-bg); color: var(--text); font-size: 16px; }
select:disabled { background:var(--py-panel-tint); color:var(--py-muted); }
.small-note { font-size: 13px; color: var(--muted); }
.card-list { display:grid; gap:12px; }
.option-card { display:flex; justify-content:space-between; align-items:center; padding:16px; border:2px solid var(--line); border-radius:16px; background:var(--py-panel); }
.option-card.disabled { opacity:.6; }
.option-card h4 { margin:0; font-size:24px; }
.option-card p { margin:4px 0 0; color:var(--muted); }

.option-card { gap: 20px; }
.option-card > div { flex: 1 1 auto; min-width: 0; }
.option-card .btn { flex: 0 0 auto; }
.sheet-option-card { min-height: 92px; }
.sheet-option-card h4 { margin-right: 12px; }
@media (max-width: 700px){
  .option-card { flex-direction: column; align-items: flex-start; }
  .option-card .btn { width: 100%; }
}
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 10px 14px; border-radius: 12px; border: 2px solid var(--accent); background:var(--py-panel); color: var(--accent); font-weight:800; cursor:pointer; }
.btn.primary { background: var(--accent); color: var(--py-on-primary); }
.btn.danger { border-color: var(--danger); color: var(--danger); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.summary-box { padding:16px; }
.summary-box h3 { margin:0 0 10px; }
.notice { padding: 12px 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--py-notice-bg); }
.notice.coming { background: var(--py-panel-tint); }
.choice-block { margin-top: 16px; padding: 16px; border: 2px solid var(--line); border-radius: 16px; background: var(--py-panel-soft-2); }
.choice-block h3 { margin:0 0 10px; }
hr.sep { border:none; border-top: 2px solid var(--py-border-soft-2); margin: 22px 0; }
.feature-list { display:grid; gap:10px; }
.feature-item { padding: 12px; border:1px solid var(--py-border-soft); border-radius: 12px; background:var(--py-panel); }
.modal-backdrop { position: fixed; inset: 0; background: rgba(8,32,59,.35); display:none; align-items:center; justify-content:center; padding:20px; z-index:20; }
.modal-backdrop.show { display:flex; }
.modal { max-width: 860px; width: 100%; max-height: 88vh; overflow:auto; background:var(--py-panel); border:2px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.modal-header { display:flex; justify-content:space-between; align-items:center; padding: 18px 20px; border-bottom:2px solid var(--py-border-soft-2); }
.modal-body { padding: 20px; }
.footer-actions { display:flex; justify-content:flex-end; gap:12px; padding: 16px 20px; border-top:2px solid var(--py-border-soft-2); position: sticky; bottom:0; background:var(--py-panel); }
.hidden { display:none !important; }
.kv { display:grid; grid-template-columns: 180px 1fr; gap:8px 12px; }
.tag { display:inline-block; font-size: 12px; font-weight:800; padding:6px 9px; border-radius:999px; background:var(--py-border-soft-2); color:var(--accent); margin-right:8px; }
.export-box textarea { min-height: 220px; font-family: Consolas, monospace; }
.placeholder-page { padding: 32px; text-align:center; }

.level-feature-group { margin-top: 12px; }
.level-feature-title { font-weight: 800; font-size: 18px; margin-bottom: 8px; color: var(--accent); }
.nested-choice { background: var(--py-panel-soft); }
.feature-item .small-note { line-height: 1.45; }

.stat-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
@media (max-width:760px){.stat-strip{grid-template-columns:repeat(2,minmax(0,1fr));}}
.stat-card{background:var(--py-panel-soft);border:2px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow)}
.stat-label{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.stat-value{font-size:24px;font-weight:800;margin-top:6px;color:var(--text)}
.choice-description{margin-top:10px;padding:12px 14px;border-radius:12px;background:var(--py-panel);border:1px solid var(--py-border-soft);color:var(--text)}
.blurb-box{margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--py-panel-tint);border:1px solid var(--py-border-soft);color:var(--text)}

.view-toggle{display:flex;gap:10px;flex-wrap:wrap;}
.view-toggle .btn.active{background:var(--accent);color:var(--py-on-primary);}
.subclass-card-list{display:grid;gap:12px;margin-top:12px;}
.subclass-card{border:2px solid var(--line);border-radius:16px;background:var(--py-panel);padding:14px;cursor:pointer;}
.subclass-card.selected{border-color:var(--accent);box-shadow:0 0 0 3px var(--py-hover-ring);}
.subclass-card-title{font-weight:800;font-size:18px;}
.full-width-description{margin-top:14px;padding:14px 16px;border-radius:12px;background:var(--py-panel);border:1px solid var(--py-border-soft);color:var(--text);white-space:pre-wrap;}
.spell-card-list{display:grid;gap:12px;}
.spell-card{border:2px solid var(--line);border-radius:16px;background:var(--py-panel);padding:14px;}
.spell-card-has-corner-action{position:relative;}
.spell-card-has-corner-action .spell-card-actions{position:absolute;right:14px;bottom:14px;margin-top:0;}
.cleric-prepared-spell-list{padding-left:14px;border-left:3px solid rgba(15,23,42,.12);}
.cleric-prepared-level-group{margin-left:6px;}
.spell-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.spell-meta{font-size:12px;color:var(--muted);margin-top:4px;display:flex;gap:8px;flex-wrap:wrap;}
.spell-card details{margin-top:10px;}
.counter-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.counter-pill{padding:10px 14px;border-radius:999px;background:var(--py-panel);border:2px solid var(--line);font-weight:800;}


.spell-progression-table{width:100%;border-collapse:collapse;font-size:14px;}
.spell-progression-table th,.spell-progression-table td{border:1px solid rgba(255,255,255,0.12);padding:8px 10px;text-align:left;vertical-align:top;}
.spell-progression-table thead th{background:rgba(255,255,255,0.06);}
.spell-progression-table tbody th{background:rgba(255,255,255,0.03);font-weight:700;}


.feature-table{width:100%;border-collapse:collapse;margin-top:8px;font-size:12px;}
.feature-table th,.feature-table td{border:1px solid #3a3f52;padding:6px 8px;text-align:left;vertical-align:top;}
.feature-table th{background:#1f2433;font-weight:600;}

.feature-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.feature-table th, .feature-table td { border: 1px solid rgba(255,255,255,0.14); padding: 8px 10px; text-align: left; vertical-align: top; }
.feature-table th { background: rgba(255,255,255,0.06); }
.feature-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.03); }

button.nav-pill, button.step-tab { font: inherit; cursor: pointer; }
button.nav-pill.disabled, button.step-tab.disabled { cursor: default; }
.builder-page { margin-top: 0; }
.page-jump-row { display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }

.background-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--py-border-soft);
  border-radius: 14px;
  background: var(--py-panel);
  box-shadow: 0 4px 12px var(--py-shadow-color);
}
.background-table th,
.background-table td {
  border: 0;
  border-bottom: 1px solid var(--py-border-faint);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  font-size: 13px;
  color: var(--text);
}
.background-table thead th {
  background: var(--py-panel-tint);
  color: var(--py-text-deep);
  font-weight: 800;
}
.background-table tbody tr:nth-child(even) {
  background: var(--py-table-stripe);
}
.background-table tbody tr:last-child td {
  border-bottom: 0;
}
.background-table .btn {
  padding: 7px 10px;
  min-width: 56px;
}
.duplicate-note {
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff7e8;
  border: 1px solid #f2cf8b;
  color: #7a4b00;
}

.section-divider{border:0;border-top:1px solid rgba(255,255,255,0.12);}


.species-description-card{padding:16px 18px}
.species-header-line{display:flex;align-items:center;justify-content:space-between;gap:12px}
.species-intro-text{margin-top:8px;line-height:1.5}
.species-overview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:14px}
.species-overview-row{background:var(--py-panel);border:1px solid var(--py-border-soft);border-radius:10px;padding:10px 12px}
.species-overview-label{font-weight:700;color:var(--py-text-deep);font-size:12px;margin-bottom:4px}
.species-overview-value{font-size:13px;line-height:1.45;color:var(--text)}
.species-grants-block{margin-top:12px;line-height:1.7}
.species-feature-list{display:grid;gap:10px;margin-top:12px}
.species-feature-item{background:var(--py-panel);border:1px solid var(--py-border-soft);border-radius:10px;padding:10px 12px}
.species-feature-name{font-weight:700;color:var(--py-text-deep);margin-bottom:4px}
.species-feature-text{line-height:1.5;white-space:normal}


.ability-method-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:14px}
.ability-method-card{background:var(--py-panel);border:2px solid var(--line);border-radius:16px;padding:14px;cursor:pointer;text-align:left}
.ability-method-card.selected{border-color:var(--accent);box-shadow:0 0 0 3px var(--py-hover-ring)}
.ability-method-title{font-weight:800;font-size:18px;margin-bottom:6px}
.ability-method-copy{font-size:13px;color:var(--muted);line-height:1.45}
.ability-score-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:14px}
.ability-score-card{background:var(--py-panel-soft);border:2px solid var(--line);border-radius:16px;padding:14px}
.ability-score-top{display:grid;justify-items:center;text-align:center;gap:6px}
.ability-score-name{font-weight:800;font-size:18px;line-height:1.2}
.ability-score-label{font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.ability-score-total{font-size:34px;font-weight:800;line-height:1}
.ability-score-mod{font-size:24px;font-weight:800;color:var(--accent)}
.ability-score-status{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;min-height:24px}
.ability-breakdown{margin-top:12px;display:grid;gap:6px}
.ability-breakdown-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;border-top:1px solid var(--py-border-faint);padding-top:6px}
.derived-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:14px}
.skill-group{margin-top:16px;padding:14px;border:2px solid var(--line);border-radius:16px;background:var(--py-panel-soft-2)}
.skill-group-title{font-weight:800;font-size:18px;margin-bottom:10px}
.skill-row{display:grid;grid-template-columns:1.2fr auto 1.2fr;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--py-border-soft-2)}
.skill-row:first-of-type{border-top:0;padding-top:0}
.skill-name{font-weight:700}
.skill-total{font-size:22px;font-weight:800;color:var(--accent)}
.skill-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.skill-math{font-size:12px;color:var(--muted);margin-top:4px}
.badge-prof{display:inline-block;font-size:11px;font-weight:800;padding:5px 8px;border-radius:999px;background:var(--py-border-soft-2);color:var(--accent)}
.roll-chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.roll-chip{padding:8px 10px;border-radius:999px;border:2px solid var(--line);background:var(--py-panel);font-weight:800}
.point-buy-table{margin-top:12px}
.point-buy-costs{margin-top:10px;font-size:13px;color:var(--muted)}
.inline-button-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
@media (max-width:760px){.skill-row{grid-template-columns:1fr;}.skill-tags{justify-content:flex-start}}

.notice.warning { background:#fff4e5; border-color:#d6a553; }
.ability-score-card.over-cap{ border-color:#d6a553; background:#fffaf1; }
.ability-cap-warning{ margin:8px 0 10px; padding:8px 10px; border-radius:10px; background:#fff4e5; border:1px solid #d6a553; font-weight:700; text-align:center; }

.inventory-list{display:grid;gap:10px;margin-top:12px}
.inventory-row{border:2px solid var(--line);border-radius:14px;background:var(--py-panel);padding:12px}
.inventory-row-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.inventory-item-name{font-weight:800;font-size:16px}
.inventory-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.inventory-expanded{margin-top:12px;display:grid;gap:12px}
.quantity-input{width:88px}
@media (max-width:760px){.inventory-row-top{flex-direction:column}.inventory-controls{width:100%}}

.collapsible-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.collapsible-body{display:block}
.inventory-controls .quantity-input{width:72px}

.equipment-description-blocks {
  margin-top: 10px;
}
.equipment-table-wrap {
  margin-top: 12px;
  overflow-x: auto;
}
.equipment-table-title {
  font-weight: 700;
  margin-bottom: 6px;
}
.equipment-description-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 320px;
}
.equipment-description-table th,
.equipment-description-table td {
  border: 1px solid rgba(255,255,255,0.12);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.equipment-description-table th {
  background: rgba(255,255,255,0.08);
}


.spell-card-actions{display:flex;justify-content:flex-end;margin-top:10px;}

.indented-spell-level-list{padding-left:14px;border-left:3px solid rgba(15,23,42,.12);}


.inventory-row-added{animation:inventoryAddFlash .85s ease-out 1;}
.inventory-add-confirmed{background:#dff3e4;border-color:#6ba97b;color:#214d2f;}
.action-button-confirmed{animation:actionButtonPulse .85s ease-out 1;background:#dff3e4 !important;border-color:#6ba97b !important;color:#214d2f !important;}
.action-button-failed{animation:actionButtonPulse .85s ease-out 1;background:#fde7e7 !important;border-color:#c96c6c !important;color:#7f1d1d !important;}
@keyframes actionButtonPulse{0%{transform:scale(1);}25%{transform:scale(1.03);}100%{transform:scale(1);}}
@keyframes inventoryAddFlash{0%{box-shadow:0 0 0 0 rgba(76,132,92,.42);background:#eef9f1;}100%{box-shadow:0 0 0 10px rgba(76,132,92,0);background:var(--py-panel);}}

/* v25.1.2a spell concentration confirmation */
.digital-app-confirm-backdrop { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(3, 18, 34, 0.46); }
.digital-app-confirm-backdrop.show { display: flex; }
.digital-app-confirm-card { width: min(420px, 92vw); border: 1px solid var(--py-border-soft); border-radius: 16px; background: var(--py-panel-soft); box-shadow: 0 18px 50px var(--py-shadow-color); padding: 16px; color: var(--text); }
.digital-app-confirm-title { font-weight: 800; font-size: 1rem; margin-bottom: 8px; }
.digital-app-confirm-message { font-size: 0.92rem; line-height: 1.35; margin-bottom: 14px; }
.digital-app-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }


.digital-app-choice-card { width: min(680px, 92vw); max-height: 82vh; overflow: hidden; }
.digital-app-confirm-actions.vertical { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; justify-content: stretch; max-height: 48vh; overflow-y: auto; padding-right: 2px; }
.digital-app-choice-button { width: 100%; min-height: 52px; white-space: normal; line-height: 1.15; text-align: center; display: inline-flex; align-items: center; justify-content: center; }


/* Structured D&D-style stat blocks for feature side panels and creator feature previews. */
.dnd-statblock{
  margin: 14px 0;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: #fffdf3;
  color: var(--text);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(17, 63, 109, 0.08);
}
.dnd-statblock-title{
  padding: 10px 12px;
  background: #8a8148;
  color: var(--py-on-primary);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .02em;
}
.dnd-statblock-subtitle{
  padding: 10px 12px;
  font-style: italic;
  border-bottom: 1px solid #d8d0a2;
}
.dnd-statblock-row,
.dnd-statblock-trait{
  padding: 9px 12px;
  border-bottom: 1px solid #e2dcc0;
  line-height: 1.4;
}
.dnd-statblock-ability-grid{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-bottom: 1px solid #e2dcc0;
  background: #f4efd2;
}
.dnd-statblock-ability{
  padding: 9px 6px;
  text-align: center;
  border-right: 1px solid #e2dcc0;
}
.dnd-statblock-ability:last-child{border-right:0;}
.dnd-statblock-ability span{
  display:block;
  font-weight: 900;
  font-size: 12px;
  color: #5d562c;
  margin-bottom: 4px;
}
.dnd-statblock-ability strong{
  display:block;
  font-size: 14px;
}
.dnd-statblock-section{
  padding: 9px 12px;
  background: #8a8148;
  color: var(--py-on-primary);
  font-weight: 900;
  letter-spacing: .02em;
}
@media (max-width: 700px){
  .dnd-statblock-ability-grid{grid-template-columns: repeat(3, minmax(0, 1fr));}
  .dnd-statblock-ability:nth-child(3n){border-right:0;}
}

/* Structured Spirit Tales table for College of Spirits feature text. */
.spirit-tales-header,
.spirit-tales-row{
  display:grid;
  grid-template-columns:minmax(72px, 110px) minmax(0, 1fr);
  border-bottom:1px solid #e2dcc0;
}
.spirit-tales-header{
  background:#8a8148;
  color:var(--py-on-primary);
  font-weight:900;
  letter-spacing:.02em;
}
.spirit-tales-header span,
.spirit-tales-die,
.spirit-tales-text{padding:9px 12px; line-height:1.35;}
.spirit-tales-die{font-weight:900; text-align:center; border-right:1px solid #e2dcc0; background:#fffdf3;}
.spirit-tales-text{background:#fffdf3;}
@media (max-width:700px){
  .spirit-tales-header,.spirit-tales-row{grid-template-columns:70px minmax(0, 1fr);}
  .spirit-tales-header span,.spirit-tales-die,.spirit-tales-text{padding:8px 9px;}
}

/* Splash / site home page */
.site-home-shell {
  background:
    radial-gradient(circle at 12% 0%, var(--py-hero-glow), transparent 28%),
    radial-gradient(circle at 88% 12%, var(--py-hero-radial), transparent 30%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}
.site-home-topbar { position: static; }
.site-home-container { display: grid; gap: 20px; padding-top: 26px; }
.site-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(280px, .9fr);
  gap: 24px;
  align-items: stretch;
  padding: 30px;
}
.site-toolkit-hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, var(--py-panel-glass-strong), var(--py-hero-wash)),
    radial-gradient(circle at top right, var(--py-hover-ring-strong), transparent 34%);
}
.site-toolkit-hero::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -90px;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  border: 34px solid var(--py-hero-orb-border);
  pointer-events: none;
}
.site-hero-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; }
.site-kicker { margin-right: 0; }
.site-title { font-size: clamp(42px, 6.4vw, 72px); line-height: .96; margin: 0; font-weight: 900; letter-spacing: -0.055em; color: var(--text); }
.site-lede { font-size: clamp(18px, 2vw, 23px); line-height: 1.45; color: var(--muted); max-width: 760px; margin: 0; }
.site-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.site-launch-btn { font-size: 17px; padding: 12px 18px; }
.site-pill-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 4px; }
.site-mini-pill { display: inline-flex; align-items: center; padding: 7px 10px; border-radius: 999px; background: var(--py-panel-tint); border: 1px solid var(--py-border-soft); color: var(--muted); font-size: 12px; font-weight: 800; }
.site-hero-panel { position: relative; z-index: 1; display: flex; }
.site-status-card { width: 100%; padding: 22px; border: 2px solid var(--line); border-radius: 18px; background: var(--py-elevated-panel); box-shadow: 0 14px 36px var(--py-shadow-color); display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.site-status-label, .site-tool-eyebrow { font-size: 12px; font-weight: 900; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.site-status-title { font-size: 32px; line-height: 1; font-weight: 900; letter-spacing: -.035em; color: var(--text); }
.site-status-card p { margin: 0; color: var(--muted); line-height: 1.4; }
.site-status-list { display: grid; gap: 8px; margin-top: 4px; font-size: 14px; color: var(--text); }
.site-status-list div { padding: 9px 10px; border-radius: 12px; background: var(--py-notice-bg); border: 1px solid var(--py-border-soft); }
.site-update-banner { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; border-width: 2px; background: linear-gradient(90deg, var(--py-notice-bg), var(--py-panel)); }
.site-banner-label { font-weight: 900; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; font-size: 12px; }
.site-banner-text { font-weight: 800; }
.site-main-grid { align-items: start; grid-template-columns: minmax(0, 1.75fr) minmax(300px, .95fr); }
.site-section-title { text-align: left; font-size: 28px; }
.site-module-panel, .site-info-panel { padding: 22px; }
.site-card-list { gap: 14px; }
.site-card-list .option-card h4 { font-size: 25px; }
.site-tool-card { min-height: 104px; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.site-primary-card { background: linear-gradient(180deg, var(--py-panel), var(--py-panel-soft)); border-color: var(--accent); }
.site-primary-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(17,63,109,.16); }
.site-primary-card:hover .btn.primary { background: var(--py-primary-dark); border-color: var(--py-primary-dark); }
.site-coming-card { background: var(--py-panel-soft); }
.site-coming-card h4 { color: var(--py-text-strong); }
.site-info-panel .section-title { margin-bottom: 14px; }
.site-beta-list .feature-item { padding: 14px 16px; }
.site-beta-list .species-feature-name { font-weight: 900; color: var(--text); margin-bottom: 6px; }
.site-beta-list .species-feature-text { line-height: 1.45; color: var(--text); }
.site-legal-note { font-size: 13px; line-height: 1.55; color: var(--muted); background: var(--py-elevated-panel); }
@media (max-width: 900px) {
  .site-hero-card { grid-template-columns: 1fr; }
  .site-main-grid { grid-template-columns: 1fr; }
  .site-update-banner { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .site-home-container { padding: 18px; }
  .site-hero-card, .site-module-panel, .site-info-panel { padding: 18px; }
  .site-card-list .option-card h4 { font-size: 22px; }
}

/* Module launcher polish */
.module-launcher-shell {
  background:
    radial-gradient(circle at 10% 0%, var(--py-hero-glow), transparent 28%),
    radial-gradient(circle at 88% 10%, var(--py-hero-radial), transparent 32%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}
.module-launcher-container { display: grid; gap: 20px; padding-top: 30px; }
.module-launcher-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .85fr);
  gap: 22px;
  align-items: stretch;
  padding: 30px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, var(--py-panel-glass-strong), var(--py-hero-wash)),
    radial-gradient(circle at top right, var(--py-hover-ring-strong), transparent 34%);
}
.module-launcher-hero::after {
  content: "";
  position: absolute;
  right: -72px;
  top: -92px;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  border: 34px solid var(--py-hero-orb-border);
  pointer-events: none;
}
.module-launcher-copy { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; }
.module-launcher-kicker { margin-right: 0; }
.module-launcher-title { font-size: clamp(38px, 5.4vw, 64px); line-height: .98; margin: 0; font-weight: 900; letter-spacing: -0.055em; color: var(--text); }
.module-launcher-lede { font-size: clamp(17px, 1.9vw, 22px); line-height: 1.45; color: var(--muted); max-width: 760px; margin: 0; }
.module-launcher-status { position: relative; z-index: 1; display: grid; gap: 10px; align-content: center; padding: 22px; border: 2px solid var(--line); border-radius: 18px; background: var(--py-elevated-panel); box-shadow: 0 14px 36px var(--py-shadow-color); }
.module-launcher-status div { padding: 11px 12px; border-radius: 12px; background: var(--py-notice-bg); border: 1px solid var(--py-border-soft); color: var(--text); line-height: 1.35; }
.module-launcher-panel { padding: 24px; }
.module-launcher-card-list { gap: 14px; }
.module-option-card {
  color: var(--text);
  min-height: 112px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.module-option-card h4 { color: var(--text); font-size: 26px; }
.module-option-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 14px 34px rgba(17,63,109,.16);
  background: linear-gradient(180deg, var(--py-panel), var(--py-panel-soft));
}
.module-option-card:hover .module-card-button { background: var(--py-primary-dark); border-color: var(--py-primary-dark); }
.module-card-button { pointer-events: none; white-space: nowrap; }
@media (max-width: 900px) {
  .module-launcher-hero { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .module-launcher-container { padding: 18px; }
  .module-launcher-hero, .module-launcher-panel { padding: 18px; }
  .module-option-card { flex-direction: column; align-items: flex-start; }
  .module-card-button { width: 100%; }
}

/* v27.32 Theme presets. Accent and display mode are browser preferences, not character-save data. */
[data-py-accent="red"] {
  --py-bg: #ffe0e0;
  --py-bg-strong: #ffd6d6;
  --py-bg-soft: #fff0f0;
  --py-topbar: #ffb6b6;
  --py-panel-tint: #fff2f2;
  --py-notice-bg: #fff6f6;
  --py-border: #e9a2a2;
  --py-border-strong: #e58c8c;
  --py-border-soft: #f1d1d1;
  --py-border-soft-2: #f6dddd;
  --py-border-faint: #f8e6e6;
  --py-text: #5b1b1b;
  --py-text-strong: #4e1515;
  --py-text-deep: #6b1d1d;
  --py-muted: #8a5555;
  --py-muted-strong: #8d4e4e;
  --py-primary: #b73535;
  --py-primary-2: #d44747;
  --py-primary-dark: #7b2020;
  --py-primary-mid: #c23b3b;
  --py-hover-ring: rgba(183,53,53,.12);
  --py-hover-ring-strong: rgba(183,53,53,.18);
  --py-shadow-color: rgba(94,23,23,.14);
  --py-header-bg-start: rgba(255,220,220,.97);
  --py-header-bg-end: rgba(255,242,242,.97);
  --py-primary-glass: rgba(255,220,220,.62);
  --py-primary-border-alpha: rgba(183,53,53,.32);
  --py-primary-border-alpha-strong: rgba(183,53,53,.36);
  --py-primary-border-alpha-soft: rgba(183,53,53,.24);
}

[data-py-accent="green"] {
  --py-bg: #d9f3e3;
  --py-bg-strong: #cfefd9;
  --py-bg-soft: #eefaf2;
  --py-topbar: #aee3c4;
  --py-panel-tint: #effaf3;
  --py-notice-bg: #f4fcf7;
  --py-border: #8fcaa7;
  --py-border-strong: #78bd94;
  --py-border-soft: #cfe8d8;
  --py-border-soft-2: #ddefe4;
  --py-border-faint: #e5f3ea;
  --py-text: #173f2a;
  --py-text-strong: #123622;
  --py-text-deep: #16492d;
  --py-muted: #557c66;
  --py-muted-strong: #4f7a61;
  --py-primary: #2f855a;
  --py-primary-2: #38a169;
  --py-primary-dark: #276749;
  --py-primary-mid: #31845a;
  --py-hover-ring: rgba(47,133,90,.13);
  --py-hover-ring-strong: rgba(47,133,90,.18);
  --py-shadow-color: rgba(18,75,47,.14);
  --py-header-bg-start: rgba(207,239,217,.97);
  --py-header-bg-end: rgba(239,250,243,.97);
  --py-primary-glass: rgba(207,239,217,.62);
  --py-primary-border-alpha: rgba(47,133,90,.32);
  --py-primary-border-alpha-strong: rgba(47,133,90,.36);
  --py-primary-border-alpha-soft: rgba(47,133,90,.24);
}

[data-py-accent="purple"] {
  --py-bg: #eadfff;
  --py-bg-strong: #e3d6ff;
  --py-bg-soft: #f5f0ff;
  --py-topbar: #cdb6ff;
  --py-panel-tint: #f5f1ff;
  --py-notice-bg: #f9f6ff;
  --py-border: #b39be9;
  --py-border-strong: #a78bdd;
  --py-border-soft: #ded2f6;
  --py-border-soft-2: #e8dff9;
  --py-border-faint: #efe8fb;
  --py-text: #33205f;
  --py-text-strong: #2a194f;
  --py-text-deep: #3b236f;
  --py-muted: #716096;
  --py-muted-strong: #6b5a92;
  --py-primary: #6b46c1;
  --py-primary-2: #805ad5;
  --py-primary-dark: #4c2f91;
  --py-primary-mid: #6f4cc6;
  --py-hover-ring: rgba(107,70,193,.13);
  --py-hover-ring-strong: rgba(107,70,193,.18);
  --py-shadow-color: rgba(52,32,101,.14);
  --py-header-bg-start: rgba(227,214,255,.97);
  --py-header-bg-end: rgba(245,241,255,.97);
  --py-primary-glass: rgba(227,214,255,.62);
  --py-primary-border-alpha: rgba(107,70,193,.32);
  --py-primary-border-alpha-strong: rgba(107,70,193,.36);
  --py-primary-border-alpha-soft: rgba(107,70,193,.24);
}

[data-py-accent="rose"] {
  --py-bg: #ffe3ef;
  --py-bg-strong: #ffd8e9;
  --py-bg-soft: #fff2f7;
  --py-topbar: #ffbbd6;
  --py-panel-tint: #fff3f8;
  --py-notice-bg: #fff7fa;
  --py-border: #eba1bd;
  --py-border-strong: #e58bb0;
  --py-border-soft: #f3d2df;
  --py-border-soft-2: #f8deea;
  --py-border-faint: #fae8ef;
  --py-text: #60223e;
  --py-text-strong: #511832;
  --py-text-deep: #70244a;
  --py-muted: #955a73;
  --py-muted-strong: #8f5570;
  --py-primary: #c13f77;
  --py-primary-2: #db5d94;
  --py-primary-dark: #8a2853;
  --py-primary-mid: #c8457d;
  --py-hover-ring: rgba(193,63,119,.13);
  --py-hover-ring-strong: rgba(193,63,119,.18);
  --py-shadow-color: rgba(94,24,57,.14);
  --py-header-bg-start: rgba(255,216,233,.97);
  --py-header-bg-end: rgba(255,243,248,.97);
  --py-primary-glass: rgba(255,216,233,.62);
  --py-primary-border-alpha: rgba(193,63,119,.32);
  --py-primary-border-alpha-strong: rgba(193,63,119,.36);
  --py-primary-border-alpha-soft: rgba(193,63,119,.24);
}

[data-py-mode="dark"] {
  --py-bg: #0b1220;
  --py-bg-strong: #0f172a;
  --py-bg-soft: #111827;
  --py-topbar: #111d31;
  --py-panel: #172033;
  --py-panel-soft: #111b2d;
  --py-panel-soft-2: #121d30;
  --py-panel-tint: #14233a;
  --py-notice-bg: #111d31;
  --py-border: #334766;
  --py-border-strong: #466080;
  --py-border-soft: #2a3d59;
  --py-border-soft-2: #26364f;
  --py-border-faint: #22324a;
  --py-text: #e8f0ff;
  --py-text-strong: #f5f8ff;
  --py-text-deep: #ffffff;
  --py-muted: #a9bdd6;
  --py-muted-strong: #c2d0e3;
  --py-on-primary: #ffffff;
  --py-shadow-color: rgba(0,0,0,.36);
  --py-header-bg-start: rgba(17,29,49,.98);
  --py-header-bg-end: rgba(20,35,58,.98);
  --py-header-shadow: rgba(0,0,0,.28);
  --py-shadow-panel: rgba(0,0,0,.32);
  --py-shadow-panel-strong: rgba(0,0,0,.42);
  --py-panel-glass: rgba(23,32,51,.98);
  --py-panel-glass-strong: rgba(26,37,58,.98);
  --py-success-bg: rgba(14,48,35,.96);
  --py-success-border: rgba(72,187,120,.35);
  --py-danger-bg: rgba(64,22,28,.96);
  --py-danger-border: rgba(245,101,101,.38);
  --py-dark-popover: rgba(5,10,18,.94);
  --py-dark-popover-text: #f6f8ff;
}

[data-py-mode="dark"] input[type=text],
[data-py-mode="dark"] input[type=number],
[data-py-mode="dark"] select,
[data-py-mode="dark"] textarea {
  background: var(--py-input-bg);
  color: var(--py-text);
  border-color: var(--py-border);
}

[data-py-mode="dark"] select:disabled {
  background: var(--py-panel-soft);
  color: var(--py-muted);
}

[data-py-mode="dark"] input[type=file] {
  color: var(--py-text);
}

[data-py-mode="dark"] .btn {
  background: var(--py-panel-soft);
}

[data-py-mode="dark"] .btn.primary,
[data-py-mode="dark"] .nav-pill.active,
[data-py-mode="dark"] .step-tab.active,
[data-py-mode="dark"] .view-toggle .btn.active {
  background: var(--py-primary);
  color: var(--py-on-primary);
}


/* v27.33 dark-mode contrast hardening and compact theme control */
[data-py-mode="dark"] {
  --py-hero-wash: rgba(19,32,52,.94);
  --py-hero-radial: rgba(96,165,250,.12);
  --py-hero-glow: rgba(55,76,110,.30);
  --py-hero-orb-border: rgba(120,157,202,.18);
  --py-elevated-panel: rgba(20,31,50,.82);
  --py-table-stripe: rgba(255,255,255,.035);
  --py-input-bg: #10192a;
}

[data-py-mode="dark"][data-py-accent="blue"] {
  --py-primary: #3b82c4;
  --py-primary-2: #2f73b6;
  --py-primary-dark: #60a5fa;
  --py-primary-mid: #3f8bd7;
  --py-hover-ring: rgba(96,165,250,.15);
  --py-hover-ring-strong: rgba(96,165,250,.20);
  --py-primary-border-alpha: rgba(96,165,250,.36);
  --py-primary-border-alpha-strong: rgba(96,165,250,.44);
  --py-primary-border-alpha-soft: rgba(96,165,250,.26);
}
[data-py-mode="dark"][data-py-accent="red"] {
  --py-primary: #cf5252;
  --py-primary-2: #bd3f3f;
  --py-primary-dark: #ff8585;
  --py-primary-mid: #dc6262;
  --py-hover-ring: rgba(255,133,133,.15);
  --py-hover-ring-strong: rgba(255,133,133,.20);
  --py-primary-border-alpha: rgba(255,133,133,.34);
  --py-primary-border-alpha-strong: rgba(255,133,133,.42);
  --py-primary-border-alpha-soft: rgba(255,133,133,.25);
}
[data-py-mode="dark"][data-py-accent="green"] {
  --py-primary: #3f9b69;
  --py-primary-2: #2f855a;
  --py-primary-dark: #68d391;
  --py-primary-mid: #45ad75;
  --py-hover-ring: rgba(104,211,145,.15);
  --py-hover-ring-strong: rgba(104,211,145,.20);
  --py-primary-border-alpha: rgba(104,211,145,.34);
  --py-primary-border-alpha-strong: rgba(104,211,145,.42);
  --py-primary-border-alpha-soft: rgba(104,211,145,.25);
}
[data-py-mode="dark"][data-py-accent="purple"] {
  --py-primary: #7c5fd0;
  --py-primary-2: #6b46c1;
  --py-primary-dark: #b59cff;
  --py-primary-mid: #8b6ee1;
  --py-hover-ring: rgba(181,156,255,.15);
  --py-hover-ring-strong: rgba(181,156,255,.20);
  --py-primary-border-alpha: rgba(181,156,255,.34);
  --py-primary-border-alpha-strong: rgba(181,156,255,.42);
  --py-primary-border-alpha-soft: rgba(181,156,255,.25);
}
[data-py-mode="dark"][data-py-accent="rose"] {
  --py-primary: #d45a91;
  --py-primary-2: #c13f77;
  --py-primary-dark: #ff9bc8;
  --py-primary-mid: #df6aa0;
  --py-hover-ring: rgba(255,155,200,.15);
  --py-hover-ring-strong: rgba(255,155,200,.20);
  --py-primary-border-alpha: rgba(255,155,200,.34);
  --py-primary-border-alpha-strong: rgba(255,155,200,.42);
  --py-primary-border-alpha-soft: rgba(255,155,200,.25);
}

[data-py-mode="dark"] .site-status-card,
[data-py-mode="dark"] .module-launcher-status,
[data-py-mode="dark"] .site-legal-note {
  background: var(--py-elevated-panel);
  color: var(--text);
}

[data-py-mode="dark"] .site-title,
[data-py-mode="dark"] .site-status-title,
[data-py-mode="dark"] .module-launcher-title,
[data-py-mode="dark"] .section-title,
[data-py-mode="dark"] .brand,
[data-py-mode="dark"] h1,
[data-py-mode="dark"] h2,
[data-py-mode="dark"] h3,
[data-py-mode="dark"] h4,
[data-py-mode="dark"] label {
  color: var(--py-text-strong);
}

[data-py-mode="dark"] .section-sub,
[data-py-mode="dark"] .subbrand,
[data-py-mode="dark"] .small-note,
[data-py-mode="dark"] .ability-method-copy,
[data-py-mode="dark"] .spell-meta {
  color: var(--py-muted);
}

[data-py-mode="dark"] .hero-card,
[data-py-mode="dark"] .panel,
[data-py-mode="dark"] .choice-block,
[data-py-mode="dark"] .feature-item,
[data-py-mode="dark"] .option-card,
[data-py-mode="dark"] .spell-card,
[data-py-mode="dark"] .inventory-row,
[data-py-mode="dark"] .subclass-card,
[data-py-mode="dark"] .ability-method-card,
[data-py-mode="dark"] .ability-score-card,
[data-py-mode="dark"] .skill-group,
[data-py-mode="dark"] .background-table,
[data-py-mode="dark"] .notice {
  background: var(--py-panel);
}

[data-py-mode="dark"] .site-toolkit-hero,
[data-py-mode="dark"] .module-launcher-hero {
  background:
    linear-gradient(135deg, var(--py-panel-glass-strong), var(--py-hero-wash)),
    radial-gradient(circle at top right, var(--py-hover-ring-strong), transparent 34%);
}

[data-py-mode="dark"] .background-table thead th,
[data-py-mode="dark"] .equipment-description-table th,
[data-py-mode="dark"] .feature-table th {
  background: var(--py-panel-tint);
  color: var(--py-text-strong);
}

[data-py-mode="dark"] .background-table tbody tr:nth-child(even),
[data-py-mode="dark"] .equipment-description-table tbody tr:nth-child(even),
[data-py-mode="dark"] .feature-table tbody tr:nth-child(even) {
  background: var(--py-table-stripe);
}

[data-py-mode="dark"] .btn:not(.primary),
[data-py-mode="dark"] .nav-pill:not(.active),
[data-py-mode="dark"] .step-tab:not(.active) {
  color: var(--py-primary-dark);
  border-color: var(--py-border);
  background: var(--py-panel-soft);
}

[data-py-mode="dark"] .nav-pill.disabled,
[data-py-mode="dark"] .step-tab.disabled,
[data-py-mode="dark"] .option-card.disabled {
  opacity: .62;
}

.theme-controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  padding: 7px;
  border: 2px solid var(--py-border-soft);
  border-radius: 999px;
  background: var(--py-panel-glass);
  box-shadow: 0 4px 14px var(--py-shadow-color);
  transition: width .18s ease, padding .18s ease, background .18s ease, border-color .18s ease;
}
.theme-toggle-button {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 999px;
  border: 2px solid var(--py-border);
  background: var(--py-panel-soft);
  color: var(--py-primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
}
.theme-toggle-button:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--py-hover-ring); }
.theme-fields { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.theme-controls:not(.theme-expanded) { gap: 0; }
.theme-controls:not(.theme-expanded) .theme-fields { display: none; }
.theme-controls.theme-expanded { border-color: var(--py-primary-border-alpha-strong); }

.theme-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--py-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.theme-field select {
  min-width: 94px;
  width: auto;
  padding: 7px 28px 7px 10px;
  border-radius: 999px;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 800;
}

@media (max-width: 760px) {
  .theme-controls {
    width: auto;
    margin-left: auto;
    justify-content: flex-end;
    border-radius: 999px;
  }
  .theme-controls.theme-expanded {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
    border-radius: 16px;
  }
  .theme-field {
    flex: 1 1 160px;
    justify-content: space-between;
  }
  .theme-field select {
    min-width: 110px;
  }
}

.module-launcher-shell .topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.module-launcher-shell .home-brand-link {
  flex: 1 1 auto;
}

/* v27.33 compact theme control placement */
.topbar > .theme-controls {
  position: absolute;
  top: 14px;
  right: 24px;
  z-index: 20;
}
.topbar > .theme-controls.theme-expanded {
  max-width: min(520px, calc(100vw - 48px));
}
@media (max-width: 760px) {
  .topbar > .theme-controls {
    position: static;
    margin-top: 12px;
  }
}

/* v27.34 theme QA polish: compact control, light-mode accent tinting, and dark-mode readability. */
[data-py-mode="light"][data-py-accent="red"] {
  --py-panel-soft: #fff7f7;
  --py-panel-soft-2: #fff4f4;
  --py-table-stripe: #fff6f6;
  --py-input-bg: #fffdfd;
}
[data-py-mode="light"][data-py-accent="green"] {
  --py-panel-soft: #f5fbf7;
  --py-panel-soft-2: #f1faf5;
  --py-table-stripe: #f4fbf7;
  --py-input-bg: #fdfffe;
}
[data-py-mode="light"][data-py-accent="purple"] {
  --py-panel-soft: #faf7ff;
  --py-panel-soft-2: #f7f2ff;
  --py-table-stripe: #faf6ff;
  --py-input-bg: #fffefe;
}
[data-py-mode="light"][data-py-accent="rose"] {
  --py-panel-soft: #fff7fa;
  --py-panel-soft-2: #fff3f8;
  --py-table-stripe: #fff6fa;
  --py-input-bg: #fffdfd;
}

.theme-controls.theme-expanded {
  gap: 8px;
}
.theme-field select {
  width: 112px;
  min-width: 112px;
  max-width: 112px;
  box-sizing: border-box;
}
.theme-field select[data-py-theme-mode] {
  width: 108px;
  min-width: 108px;
  max-width: 108px;
}
.theme-field select option {
  font: inherit;
}

/* Creator/editor contrast hardening for theme accents and dark mode. */
.subclass-card-title,
.ability-method-title,
.ability-score-name,
.skill-group-title,
.skill-name,
.level-feature-title,
.species-feature-name,
.species-overview-label,
.choice-block h3,
.feature-item strong {
  color: var(--py-text-strong);
}
.subclass-card,
.ability-method-card,
.ability-score-card,
.skill-group,
.choice-block,
.feature-item,
.blurb-box,
.choice-description,
.background-table,
.spell-card,
.inventory-row,
.notice,
.counter-pill,
.stat-card {
  background-color: var(--py-panel-soft);
}
.hero-card,
.panel,
.modal,
.summary-box,
.option-card {
  background-color: var(--py-panel);
}
.background-table thead th,
.equipment-description-table th,
.feature-table th {
  background: var(--py-panel-tint);
  color: var(--py-text-strong);
}
.background-table tbody tr:nth-child(even),
.equipment-description-table tbody tr:nth-child(even),
.feature-table tbody tr:nth-child(even) {
  background: var(--py-table-stripe);
}
input::placeholder,
textarea::placeholder {
  color: var(--py-muted);
  opacity: .82;
}
.export-box,
.export-panel,
.pdf-export-box,
.digital-export-box,
[data-export-section],
[class*="export"] .small-note,
[class*="export"] p,
[class*="export"] strong {
  color: var(--py-text);
}
[data-py-mode="dark"] .subclass-card-title,
[data-py-mode="dark"] .ability-method-title,
[data-py-mode="dark"] .ability-score-name,
[data-py-mode="dark"] .skill-group-title,
[data-py-mode="dark"] .skill-name,
[data-py-mode="dark"] .level-feature-title,
[data-py-mode="dark"] .species-feature-name,
[data-py-mode="dark"] .species-overview-label,
[data-py-mode="dark"] .choice-block h3,
[data-py-mode="dark"] .feature-item strong,
[data-py-mode="dark"] .export-box h2,
[data-py-mode="dark"] .export-box h3,
[data-py-mode="dark"] .export-box strong,
[data-py-mode="dark"] [class*="export"] h2,
[data-py-mode="dark"] [class*="export"] h3,
[data-py-mode="dark"] [class*="export"] strong {
  color: var(--py-text-strong) !important;
}
[data-py-mode="dark"] .subclass-card,
[data-py-mode="dark"] .ability-method-card,
[data-py-mode="dark"] .ability-score-card,
[data-py-mode="dark"] .skill-group,
[data-py-mode="dark"] .choice-block,
[data-py-mode="dark"] .feature-item,
[data-py-mode="dark"] .blurb-box,
[data-py-mode="dark"] .choice-description,
[data-py-mode="dark"] .background-table,
[data-py-mode="dark"] .spell-card,
[data-py-mode="dark"] .inventory-row,
[data-py-mode="dark"] .notice,
[data-py-mode="dark"] .counter-pill,
[data-py-mode="dark"] .stat-card {
  background: var(--py-panel-soft) !important;
  color: var(--py-text) !important;
}
[data-py-mode="dark"] input::placeholder,
[data-py-mode="dark"] textarea::placeholder {
  color: var(--py-muted-strong);
  opacity: .9;
}
[data-py-mode="dark"] .export-box,
[data-py-mode="dark"] .export-panel,
[data-py-mode="dark"] .pdf-export-box,
[data-py-mode="dark"] .digital-export-box,
[data-py-mode="dark"] [data-export-section],
[data-py-mode="dark"] [class*="export"] .small-note,
[data-py-mode="dark"] [class*="export"] p {
  color: var(--py-text) !important;
}

/* Digital sheet menu owns the display preferences on the live sheet view. */
.sheet-menu-theme-group {
  display: grid;
  gap: 8px;
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid var(--py-border-faint);
}
.sheet-menu-theme-label {
  color: var(--py-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.sheet-menu-theme-control {
  margin-left: 0;
  width: 100%;
  justify-content: stretch;
  border-radius: 14px;
  box-shadow: none;
  padding: 8px;
}
.sheet-menu-theme-control .theme-fields {
  display: grid;
  gap: 8px;
  width: 100%;
}
.sheet-menu-theme-control .theme-field {
  justify-content: space-between;
  width: 100%;
}
.sheet-menu-theme-control .theme-field select,
.sheet-menu-theme-control .theme-field select[data-py-theme-mode] {
  width: 118px;
  min-width: 118px;
  max-width: 118px;
}


/* v27.35 theme rollback/polish: light accents tint only in light mode; dark mode owns all large surfaces. */
[data-py-mode="dark"] {
  --py-panel: #172033;
  --py-panel-soft: #111b2d;
  --py-panel-soft-2: #121d30;
  --py-panel-tint: #14233a;
  --py-notice-bg: #111d31;
  --py-input-bg: #10192a;
  --py-table-stripe: rgba(255,255,255,.035);
  --py-elevated-panel: rgba(20,31,50,.82);
  --py-panel-glass: rgba(23,32,51,.98);
  --py-panel-glass-strong: rgba(26,37,58,.98);
}

/* Preserve useful contrast in light mode without leaving old blue islands. */
[data-py-mode="light"] .choice-block,
[data-py-mode="light"] .skill-group,
[data-py-mode="light"] .ability-score-card,
[data-py-mode="light"] .choice-description,
[data-py-mode="light"] .feature-item,
[data-py-mode="light"] .stat-card,
[data-py-mode="light"] .notice {
  background: var(--py-panel-soft);
}
[data-py-mode="light"] .subclass-card,
[data-py-mode="light"] .ability-method-card,
[data-py-mode="light"] .spell-card,
[data-py-mode="light"] .inventory-row,
[data-py-mode="light"] .blurb-box {
  background: var(--py-panel);
}

/* Tables/description blocks should look intentional when their section has a tinted backing. */
.choice-description,
.blurb-box,
.background-table,
.feature-table,
.equipment-description-table {
  border-radius: 14px;
}
.choice-description,
.blurb-box {
  overflow: hidden;
}
.choice-description .feature-table,
.blurb-box .feature-table,
.choice-description .background-table,
.blurb-box .background-table {
  margin-top: 10px;
  overflow: hidden;
}
.feature-table,
.equipment-description-table {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--py-border-soft);
}
.feature-table th,
.feature-table td,
.equipment-description-table th,
.equipment-description-table td {
  border-color: var(--py-border-faint) !important;
  color: var(--py-text) !important;
}
.feature-table thead th,
.equipment-description-table thead th,
.feature-table th,
.equipment-description-table th {
  background: var(--py-panel-tint) !important;
  color: var(--py-text-strong) !important;
}
.feature-table tbody tr,
.equipment-description-table tbody tr {
  background: var(--py-panel) !important;
}
.feature-table tbody tr:nth-child(even),
.equipment-description-table tbody tr:nth-child(even) {
  background: var(--py-table-stripe) !important;
}
.background-table tbody tr {
  background: var(--py-panel) !important;
}
.background-table tbody tr:nth-child(even) {
  background: var(--py-table-stripe) !important;
}

/* Button-card text inherits black from browser button defaults unless forced through theme tokens. */
.subclass-card,
.ability-method-card,
.option-card,
.spell-card,
.inventory-row,
.choice-block,
.feature-item,
.stat-card,
.counter-pill {
  color: var(--py-text);
}
.subclass-card-title,
.ability-method-title,
.option-card h4,
.choice-block h3,
.feature-item strong,
.stat-value,
.counter-pill,
.roll-chip {
  color: var(--py-text-strong) !important;
}
[data-py-mode="dark"] .subclass-card,
[data-py-mode="dark"] .ability-method-card,
[data-py-mode="dark"] .option-card,
[data-py-mode="dark"] .spell-card,
[data-py-mode="dark"] .inventory-row,
[data-py-mode="dark"] .choice-block,
[data-py-mode="dark"] .choice-description,
[data-py-mode="dark"] .blurb-box,
[data-py-mode="dark"] .feature-item,
[data-py-mode="dark"] .stat-card,
[data-py-mode="dark"] .counter-pill,
[data-py-mode="dark"] .background-table {
  background: var(--py-panel-soft) !important;
  color: var(--py-text) !important;
}
[data-py-mode="dark"] .feature-table tbody tr,
[data-py-mode="dark"] .equipment-description-table tbody tr,
[data-py-mode="dark"] .background-table tbody tr {
  background: var(--py-panel) !important;
}
[data-py-mode="dark"] .feature-table tbody tr:nth-child(even),
[data-py-mode="dark"] .equipment-description-table tbody tr:nth-child(even),
[data-py-mode="dark"] .background-table tbody tr:nth-child(even) {
  background: var(--py-table-stripe) !important;
}
[data-py-mode="dark"] input::placeholder,
[data-py-mode="dark"] textarea::placeholder,
[data-py-mode="dark"] .search-input::placeholder,
[data-py-mode="dark"] [type="search"]::placeholder {
  color: var(--py-muted-strong) !important;
  opacity: .95 !important;
}
[data-py-mode="dark"] input,
[data-py-mode="dark"] select,
[data-py-mode="dark"] textarea {
  background: var(--py-input-bg) !important;
  color: var(--py-text) !important;
  border-color: var(--py-border) !important;
}
[data-py-mode="dark"] [class*="export"],
[data-py-mode="dark"] [class*="export"] *,
[data-py-mode="dark"] .export-box,
[data-py-mode="dark"] .export-box *,
[data-py-mode="dark"] .pdf-export-box,
[data-py-mode="dark"] .pdf-export-box *,
[data-py-mode="dark"] .digital-export-box,
[data-py-mode="dark"] .digital-export-box * {
  color: var(--py-text) !important;
}
[data-py-mode="dark"] [class*="export"] h1,
[data-py-mode="dark"] [class*="export"] h2,
[data-py-mode="dark"] [class*="export"] h3,
[data-py-mode="dark"] [class*="export"] h4,
[data-py-mode="dark"] [class*="export"] strong,
[data-py-mode="dark"] .export-box h1,
[data-py-mode="dark"] .export-box h2,
[data-py-mode="dark"] .export-box h3,
[data-py-mode="dark"] .export-box h4,
[data-py-mode="dark"] .export-box strong {
  color: var(--py-text-strong) !important;
}

/* Native select popups cannot be fully rounded/styled across browsers, but the closed controls should stay compact. */
.theme-field select,
.theme-field select[data-py-theme-mode] {
  min-width: 108px;
  width: 108px;
  max-width: 108px;
  padding-right: 24px;
}
[data-py-mode="dark"] .theme-field select {
  background: var(--py-input-bg) !important;
  color: var(--py-text) !important;
}


/* v27.36: Theme dark-mode surface priority and contrast polish.
   Dark mode owns large surfaces; accent colors stay on borders/buttons/pills only. */
[data-py-mode="dark"] {
  --py-panel-tint: var(--py-panel-soft);
  --py-notice-bg: var(--py-panel-soft);
  --py-table-stripe: rgba(255,255,255,.025);
  --py-elevated-panel: rgba(23,32,51,.94);
  --py-input-bg: #10192a;
  --py-primary-glass: rgba(255,255,255,.055);
  --py-primary-border-alpha: rgba(148,163,184,.32);
  --py-primary-border-alpha-soft: rgba(148,163,184,.22);
  --py-primary-border-alpha-strong: rgba(148,163,184,.42);
}
[data-py-mode="dark"][data-py-accent="blue"] { --py-accent-pill-bg: rgba(96,165,250,.14); --py-accent-pill-border: rgba(96,165,250,.54); --py-accent-pill-text: #9dccff; }
[data-py-mode="dark"][data-py-accent="red"] { --py-accent-pill-bg: rgba(255,133,133,.13); --py-accent-pill-border: rgba(255,133,133,.52); --py-accent-pill-text: #ff9b9b; }
[data-py-mode="dark"][data-py-accent="green"] { --py-accent-pill-bg: rgba(104,211,145,.13); --py-accent-pill-border: rgba(104,211,145,.50); --py-accent-pill-text: #88e0aa; }
[data-py-mode="dark"][data-py-accent="purple"] { --py-accent-pill-bg: rgba(181,156,255,.13); --py-accent-pill-border: rgba(181,156,255,.52); --py-accent-pill-text: #c7b6ff; }
[data-py-mode="dark"][data-py-accent="rose"] { --py-accent-pill-bg: rgba(255,155,200,.13); --py-accent-pill-border: rgba(255,155,200,.52); --py-accent-pill-text: #ffb3d0; }

[data-py-mode="dark"] .choice-description,
[data-py-mode="dark"] .blurb-box,
[data-py-mode="dark"] .full-width-description,
[data-py-mode="dark"] .species-overview-row,
[data-py-mode="dark"] .feature-item,
[data-py-mode="dark"] .notice,
[data-py-mode="dark"] .choice-block,
[data-py-mode="dark"] .nested-choice,
[data-py-mode="dark"] .background-table,
[data-py-mode="dark"] .simple-table,
[data-py-mode="dark"] .simple-table th,
[data-py-mode="dark"] .simple-table td,
[data-py-mode="dark"] .spell-card,
[data-py-mode="dark"] .counter-pill,
[data-py-mode="dark"] .stat-card,
[data-py-mode="dark"] .option-card,
[data-py-mode="dark"] .subclass-card,
[data-py-mode="dark"] .ability-generation-card,
[data-py-mode="dark"] .generation-card,
[data-py-mode="dark"] .background-feature-card,
[data-py-mode="dark"] .creator-card,
[data-py-mode="dark"] .creator-panel {
  background-color: var(--py-panel-soft) !important;
  background-image: none !important;
  color: var(--py-text) !important;
  border-color: var(--py-border) !important;
}
[data-py-mode="dark"] .background-table thead th,
[data-py-mode="dark"] .simple-table thead th,
[data-py-mode="dark"] .feature-table th {
  background: var(--py-panel) !important;
  color: var(--py-text-strong) !important;
}
[data-py-mode="dark"] .background-table tbody tr:nth-child(even),
[data-py-mode="dark"] .simple-table tbody tr:nth-child(even),
[data-py-mode="dark"] .feature-table tbody tr:nth-child(even) {
  background: var(--py-table-stripe) !important;
}
[data-py-mode="dark"] .background-table *,
[data-py-mode="dark"] .simple-table *,
[data-py-mode="dark"] .feature-table *,
[data-py-mode="dark"] .choice-description *,
[data-py-mode="dark"] .blurb-box *,
[data-py-mode="dark"] .full-width-description * {
  color: inherit;
}
[data-py-mode="dark"] .tag,
[data-py-mode="dark"] .digital-spell-level-pill,
[data-py-mode="dark"] .digital-spell-tag,
[data-py-mode="dark"] .digital-inline-meta-pill {
  background: var(--py-accent-pill-bg, var(--py-primary-glass)) !important;
  border-color: var(--py-accent-pill-border, var(--py-primary-border-alpha)) !important;
  color: var(--py-accent-pill-text, var(--py-primary-dark)) !important;
}

/* Keep light-mode data tables visibly striped, but make the panels' rounded shape intentional. */
[data-py-mode="light"] .background-table,
[data-py-mode="light"] .simple-table,
[data-py-mode="light"] .choice-description,
[data-py-mode="light"] .blurb-box,
[data-py-mode="light"] .full-width-description {
  border-radius: 14px;
  overflow: hidden;
}
[data-py-mode="light"] .background-table tbody tr:nth-child(even),
[data-py-mode="light"] .simple-table tbody tr:nth-child(even) {
  background: var(--py-table-stripe);
}

/* v27.37 creator subsection framing + compact theme-control reopen hardening. */
.choice-description,
.blurb-box,
.nested-choice,
.background-feature-card,
.creator-card,
.creator-panel,
.full-width-description {
  border: 1px solid var(--py-border-soft);
  border-radius: 16px;
  overflow: hidden;
}
.nested-choice {
  padding: 12px 14px;
  background: var(--py-panel-soft-2);
}
.choice-description > .background-table,
.choice-description > .feature-table,
.blurb-box > .background-table,
.blurb-box > .feature-table,
.nested-choice > .background-table,
.nested-choice > .feature-table {
  margin-left: 0;
  margin-right: 0;
}
.background-table,
.feature-table,
.equipment-description-table {
  border-radius: 14px;
}
[data-py-mode="dark"] .choice-description,
[data-py-mode="dark"] .blurb-box,
[data-py-mode="dark"] .nested-choice,
[data-py-mode="dark"] .background-feature-card,
[data-py-mode="dark"] .creator-card,
[data-py-mode="dark"] .creator-panel,
[data-py-mode="dark"] .full-width-description {
  background: var(--py-panel-soft) !important;
  border-color: var(--py-border) !important;
  color: var(--py-text) !important;
}
[data-py-mode="dark"] .nested-choice .small-note,
[data-py-mode="dark"] .choice-description .small-note,
[data-py-mode="dark"] .blurb-box .small-note {
  color: var(--py-text) !important;
}
/* Make the collapsed/expanded theme control deterministic after repeated open/close cycles. */
.theme-controls {
  min-width: 58px;
  width: auto;
  overflow: visible;
}
.theme-controls .theme-fields {
  flex: 0 0 auto;
  min-width: 0;
}
.theme-controls.theme-expanded .theme-fields {
  display: flex !important;
}
.topbar > .theme-controls.theme-expanded,
.module-launcher-shell .topbar > .theme-controls.theme-expanded {
  width: max-content;
  min-width: 390px;
  max-width: min(520px, calc(100vw - 48px));
}
.topbar > .theme-controls:not(.theme-expanded) {
  width: 58px;
  min-width: 58px;
  max-width: 58px;
}
@media (max-width: 760px) {
  .topbar > .theme-controls.theme-expanded,
  .module-launcher-shell .topbar > .theme-controls.theme-expanded {
    width: calc(100vw - 32px);
    min-width: 0;
    max-width: calc(100vw - 32px);
  }
  .theme-controls.theme-expanded .theme-fields {
    width: 100%;
  }
}


/* v27.38 theme control stability + sheet menu containment. */
.topbar > .theme-controls.theme-expanded,
.module-launcher-shell .topbar > .theme-controls.theme-expanded {
  width: 392px !important;
  min-width: 392px !important;
  max-width: min(392px, calc(100vw - 48px)) !important;
  box-sizing: border-box;
}
.topbar > .theme-controls.theme-expanded .theme-fields,
.module-launcher-shell .topbar > .theme-controls.theme-expanded .theme-fields {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}
.topbar > .theme-controls:not(.theme-expanded) .theme-fields,
.module-launcher-shell .topbar > .theme-controls:not(.theme-expanded) .theme-fields {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.theme-controls:not(.sheet-menu-theme-control) .theme-field {
  white-space: nowrap;
}
.theme-controls:not(.sheet-menu-theme-control) .theme-field select {
  flex: 0 0 auto;
}

/* The digital-sheet hamburger menu is narrow, so its display preferences use a stacked layout instead of the topbar pill layout. */
.sheet-menu-theme-control,
.digital-header-menu-panel .sheet-menu-theme-control {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
  overflow: hidden !important;
}
.sheet-menu-theme-control .theme-fields,
.digital-header-menu-panel .sheet-menu-theme-control .theme-fields {
  display: grid !important;
  grid-template-columns: 1fr;
  width: 100% !important;
  min-width: 0 !important;
  gap: 10px;
}
.sheet-menu-theme-control .theme-field,
.digital-header-menu-panel .sheet-menu-theme-control .theme-field {
  display: grid !important;
  grid-template-columns: 1fr;
  width: 100% !important;
  min-width: 0 !important;
  gap: 4px;
  align-items: stretch;
}
.sheet-menu-theme-control .theme-field select,
.sheet-menu-theme-control .theme-field select[data-py-theme-mode],
.digital-header-menu-panel .sheet-menu-theme-control .theme-field select,
.digital-header-menu-panel .sheet-menu-theme-control .theme-field select[data-py-theme-mode] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
@media (max-width: 760px) {
  .topbar > .theme-controls.theme-expanded,
  .module-launcher-shell .topbar > .theme-controls.theme-expanded {
    width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 32px) !important;
  }
  .topbar > .theme-controls.theme-expanded .theme-fields,
  .module-launcher-shell .topbar > .theme-controls.theme-expanded .theme-fields {
    flex-wrap: wrap;
    justify-content: stretch;
  }
}