@import url('https://fonts.googleapis.com/css2?family=Prata&family=Roboto:wght@400;700&family=Source+Sans+3:ital,wght@0,400;0,700;1,400&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400&family=Source+Serif+4:ital,wght@0,400;0,700;1,400&family=Source+Serif+Pro:ital,wght@0,400;0,700;1,400&display=swap');

  :root {
    --bg:       #0f0f13;
    --surface:  #1a1a24;
    --surface2: #22222f;
    --border:   #2e2e42;
    --accent:   #c8943a;
    --accent2:  #e8b455;
    --red:      #c0392b;
    --red-soft: #e74c3c;
    --green:    #27ae60;
    --blue:     #2980b9;
    --purple:   #8e44ad;
    --text:     #e8e4d9;
    --muted:    #7a7890;
    --hp-bar:   #27ae60;
    --radius:   8px;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', sans-serif; min-height: 100vh; }

  /* ── Layout ── */
  #app { display: flex; flex-direction: column; min-height: 100vh; }
  header { background: var(--surface); border-bottom: 2px solid var(--accent); padding: 12px 24px; display: flex; align-items: center; gap: 16px; }
  header h1 { font-size: 1.4rem; color: var(--accent2); letter-spacing: 1px; }
  header span { color: var(--muted); font-size: 0.85rem; }
  #api-status { margin-left: auto; font-size: 0.8rem; padding: 4px 10px; border-radius: 20px; border: 1px solid var(--border); }
  #api-status.ok  { color: var(--green); border-color: var(--green); }
  #api-status.err { color: var(--red-soft); border-color: var(--red-soft); }

  main { flex: 1; display: grid; grid-template-columns: 260px 1fr; gap: 0; }

  /* ── Sidebar ── */
  #sidebar { background: var(--surface); border-right: 1px solid var(--border); padding: 16px 0; }
  .char-mini { padding: 16px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
  .char-mini h3 { color: var(--accent2); font-size: 1.1rem; }
  .char-mini p  { color: var(--muted); font-size: 0.8rem; margin-top: 2px; }
  .hp-bar-wrap  { margin-top: 10px; }
  .hp-bar-track { background: var(--border); border-radius: 4px; height: 8px; overflow: hidden; }
  .hp-bar-fill  { background: var(--hp-bar); height: 100%; transition: width 0.4s; }
  .hp-label     { font-size: 0.78rem; color: var(--muted); margin-top: 3px; }
  nav a { display: block; padding: 10px 20px; color: var(--muted); text-decoration: none; font-size: 0.9rem; cursor: pointer; border-left: 3px solid transparent; transition: all 0.15s; }
  nav a:hover, nav a.active { color: var(--text); background: var(--surface2); border-left-color: var(--accent); }
  nav .nav-icon { margin-right: 8px; }
  nav .nav-icon-img { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; margin-right: 8px; }
  .nav-icon-svg {
    width: 22px;
    height: 22px;
    margin-right: 8px;
    color: currentColor;
    vertical-align: middle;
    flex: 0 0 auto;
  }
  /* ── Content panels ── */
  #content { padding: 24px; overflow-y: auto; }
  .panel { display: none; }
  .panel.active { display: block; }
  .panel-title { font-size: 1.3rem; color: var(--accent2); margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 10px; }

  /* ── Cards ── */
  .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; }
  .card-title { font-size: 0.85rem; text-transform: uppercase; color: var(--muted); letter-spacing: 1px; margin-bottom: 14px; }

  /* ── Stats grid ── */
  .stats-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
  .stat-box { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 8px; text-align: center; }
  .stat-name { font-size: 0.65rem; text-transform: uppercase; color: var(--muted); letter-spacing: 1px; }
  .stat-mod  { font-size: 1.6rem; font-weight: 700; color: var(--accent2); line-height: 1; margin: 4px 0; }
  .stat-score{ font-size: 0.8rem; color: var(--muted); }

  /* ── Combat boxes ── */
  .combat-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
  .combat-box { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; text-align: center; min-width: 90px; }
  .combat-box .val { font-size: 2rem; font-weight: 700; color: var(--accent2); }
  .combat-box .lbl { font-size: 0.7rem; text-transform: uppercase; color: var(--muted); margin-top: 2px; }

  /* ── HP box ── */
  .hp-big { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
  .hp-input-row { display: flex; gap: 8px; }
  .hp-input-row input { width: 70px; background: var(--surface2); border: 1px solid var(--border); color: var(--text); padding: 8px; border-radius: var(--radius); font-size: 1rem; text-align: center; }

  /* ── Buttons ── */
  .btn { padding: 8px 18px; border-radius: var(--radius); border: none; cursor: pointer; font-size: 0.88rem; font-weight: 600; transition: opacity 0.15s; }
  .btn:hover { opacity: 0.85; }
  .btn:disabled,
  .btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.45; }
  .btn-red    { background: var(--red);    color: #fff; }
  .btn-green  { background: var(--green);  color: #fff; }
  .btn-blue   { background: var(--blue);   color: #fff; }
  .btn-purple { background: var(--purple); color: #fff; }
  .btn-accent { background: var(--accent); color: #000; }
  .btn-ghost  { background: transparent; border: 1px solid var(--border); color: var(--text); }
  .btn-sm     { padding: 5px 12px; font-size: 0.8rem; }
  .btn-full   { width: 100%; }

  /* ── Skills ── */
  .skills-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .skill-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 4px; }
  .skill-row:hover { background: var(--surface2); }
  .skill-prof { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; }
  .skill-prof.proficient { background: var(--accent); border-color: var(--accent); }
  .skill-prof.expertise  { background: var(--accent2); border-color: var(--accent2); }
  .skill-name { font-size: 0.82rem; flex: 1; }
  .skill-bonus{ font-size: 0.88rem; color: var(--accent2); font-weight: 600; min-width: 28px; text-align: right; }

  /* ── Conditions ── */
  .conditions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); gap: 8px; }
  .cond-chip { padding: 6px 12px; border-radius: 20px; font-size: 0.8rem; cursor: pointer; border: 1px solid var(--border); color: var(--muted); transition: all 0.15s; text-align: center; }
  .cond-chip.active { background: var(--red); color: #fff; border-color: var(--red); }
  .cond-chip:hover  { border-color: var(--text); color: var(--text); }

  /* ── Exhaustion ── */
  .exhaustion-pips { display: flex; gap: 6px; }
  .ex-pip { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; transition: all 0.15s; }
  .ex-pip.filled { background: var(--red); border-color: var(--red); color: #fff; }

  /* ── Death saves ── */
  .save-pips { display: flex; gap: 6px; margin-top: 6px; }
  .save-pip  { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); }
  .save-pip.success { background: var(--green); border-color: var(--green); }
  .save-pip.fail    { background: var(--red);   border-color: var(--red); }

  /* ── Spell slots ── */
  .slot-level { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
  .slot-label { font-size: 0.82rem; color: var(--muted); width: 60px; }
  .slot-pips  { display: flex; gap: 5px; flex: 1; }
  .slot-pip   { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--accent); background: var(--accent); cursor: pointer; transition: all 0.15s; }
  .slot-pip.spent { background: var(--surface2); border-color: var(--border); }
  .slot-pip:hover { opacity: 0.7; }

  /* ── Roster ── */
  .roster-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
  .roster-question { color: var(--muted); font-size: .9rem; margin-bottom: 12px; }
  .roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
  .roster-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; cursor: pointer; transition: border-color 0.15s, transform 0.15s; position: relative; }
  .roster-card:hover { border-color: var(--accent); transform: translateY(-2px); }
  .roster-card .rc-name { font-size: 1.2rem; color: var(--accent2); font-weight: 700; margin-bottom: 4px; }
  .roster-card .rc-sub  { font-size: 0.82rem; color: var(--muted); margin-bottom: 12px; }
  .roster-card .rc-quick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted); font-size: .82rem; margin-bottom: 8px; }
  .roster-card .rc-quick img { width: 16px; height: 16px; object-fit: contain; vertical-align: middle; }
  .roster-card .rc-bio { color: var(--muted); font-size: .85rem; line-height: 1.35; }
  .roster-card .rc-hp-bar { margin-bottom: 10px; }
  .roster-card .rc-stats { display: flex; gap: 10px; flex-wrap: wrap; }
  .roster-card .rc-stat  { background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; padding: 4px 10px; font-size: 0.78rem; text-align: center; }
  .roster-card .rc-stat span { display: block; color: var(--accent2); font-weight: 700; font-size: 1rem; }
  .roster-card .rc-dead { position: absolute; top: 12px; right: 12px; background: var(--red); color: #fff; border-radius: 4px; font-size: 0.72rem; padding: 2px 6px; }
  .roster-card .rc-actions { position: absolute; top: 10px; right: 10px; display: flex; gap: 5px; opacity: 0; transition: opacity 0.15s; }
  .roster-card:hover .rc-actions { opacity: 1; }
  .roster-card .rc-del, .roster-card .rc-edit {
    background: transparent; border: 1px solid var(--border); color: var(--muted);
    border-radius: 4px; font-size: 0.72rem; padding: 2px 8px; cursor: pointer;
  }
  .roster-card .rc-del:hover  { border-color: var(--red-soft); color: var(--red-soft); }
  .roster-card .rc-edit:hover { border-color: var(--accent); color: var(--accent2); }
  .roster-empty { text-align: center; padding: 60px 20px; color: var(--muted); }
  .roster-empty h3 { font-size: 1.4rem; margin-bottom: 10px; }
  #roster-add-btn { display: inline-flex; align-items: center; justify-content: center; gap: 2px; }
  #roster-add-btn .add-icon { font-size: 24px; line-height: 1; }
  .profile-caption { color: var(--muted); font-size: .82rem; margin-top: 2px; }
  .profile-logout {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius);
    padding: 8px 12px;
    font-weight: 700;
    cursor: pointer;
  }
  .profile-logout:hover { border-color: var(--accent); color: var(--accent2); }

  /* ── Auth / player profiles ── */
  .auth-screen {
    grid-column: 1 / -1;
    min-height: calc(100vh - 64px);
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
      radial-gradient(circle at 20% 10%, rgba(200,148,58,.16), transparent 28%),
      linear-gradient(180deg, #20130c 0%, var(--bg) 62%);
  }
  .auth-card {
    width: min(430px, 100%);
    background: #2f1e14;
    border: 2px solid rgba(245, 220, 190, .72);
    border-radius: 18px;
    padding: 28px 24px;
    color: #f7e3c7;
    box-shadow: 0 22px 60px rgba(0,0,0,.45);
  }
  .auth-kicker {
    color: #d4b896;
    font-family: 'Roboto', sans-serif;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 10px;
  }
  .auth-card h2 {
    font-family: 'Prata', serif;
    color: #ffdcae;
    font-size: 2rem;
    line-height: 1.05;
    margin-bottom: 10px;
  }
  .auth-card p {
    color: #e4c7a7;
    font-size: .96rem;
    line-height: 1.45;
    margin-bottom: 22px;
  }
  .auth-form { display: grid; gap: 14px; }
  .auth-form label {
    display: grid;
    gap: 6px;
    color: #f7e3c7;
    font-weight: 700;
    font-size: .9rem;
  }
  .auth-form input {
    width: 100%;
    min-height: 48px;
    background: #1c120d;
    border: 1px solid rgba(245, 220, 190, .38);
    border-radius: 10px;
    color: #fff1dd;
    padding: 12px 14px;
    font-size: 1rem;
  }
  .auth-form input:focus {
    outline: 2px solid rgba(232,180,85,.55);
    border-color: var(--accent2);
  }
  .auth-form .primary-btn { min-height: 48px; margin-top: 6px; }
  .auth-switch {
    width: 100%;
    margin-top: 16px;
    background: transparent;
    border: 0;
    color: #ffdcae;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .placeholder-mark {
    width: 72px;
    height: 72px;
    display: inline-grid;
    place-items: center;
    border: 2px solid var(--accent);
    border-radius: 50%;
    color: var(--accent2);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
    margin-bottom: 14px;
  }
  .placeholder-mark svg {
    width: 34px;
    height: 34px;
  }
  .inline-info-icon {
    width: 16px;
    height: 16px;
    color: var(--accent2);
    vertical-align: -3px;
    margin-right: 3px;
  }

  /* ── Edit character modal ── */
  #edit-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.88); z-index: 300; display: none; align-items: center; justify-content: center; }
  #edit-overlay.open { display: flex; }
  #edit-box { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; width: 640px; max-width: 96vw; max-height: 90vh; overflow-y: auto; padding: 30px; }
  #edit-box h2 { font-size: 1.3rem; color: var(--accent2); margin-bottom: 4px; }
  #edit-box .edit-subtitle { font-size: 0.82rem; color: var(--muted); margin-bottom: 22px; }
  .edit-section { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin: 18px 0 10px; border-bottom: 1px solid var(--border); padding-bottom: 5px; }
  .level-xp-hint { font-size: 0.78rem; color: var(--muted); margin-top: 5px; }
  .level-xp-hint span { color: var(--accent2); font-weight: 700; }

  /* ── Wizard overlay ── */
  #wizard-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.88); z-index: 200; display: none; align-items: center; justify-content: center; }
  #wizard-overlay.open { display: flex; }
  #wizard-box { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; width: 760px; max-width: 96vw; max-height: 92vh; overflow-y: auto; padding: 32px; position: relative; }
  .wiz-title { font-size: 1.4rem; color: var(--accent2); margin-bottom: 6px; }
  .wiz-sub   { font-size: 0.85rem; color: var(--muted); margin-bottom: 24px; }
  /* Step dots */
  .wiz-dots  { display: flex; align-items: center; gap: 0; margin-bottom: 28px; }
  .wiz-dot   { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface2); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; color: var(--muted); flex-shrink: 0; transition: all 0.2s; }
  .wiz-dot.active { border-color: var(--accent); background: var(--accent); color: #000; font-weight: 700; }
  .wiz-dot.done   { border-color: var(--green); background: var(--green); color: #fff; }
  .wiz-line  { flex: 1; height: 2px; background: var(--border); }
  .wiz-line.done { background: var(--green); }
  .wiz-step-label { display: flex; justify-content: space-around; margin-bottom: 24px; margin-top: -18px; }
  .wiz-step-label span { font-size: 0.72rem; color: var(--muted); text-align: center; width: 80px; }
  /* Wizard form elements */
  .wiz-body  { min-height: 300px; }
  .wiz-nav   { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border); }
  .form-group { margin-bottom: 14px; }
  .form-group label { display: block; font-size: 0.82rem; color: var(--muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px; }
  .form-group input, .form-group select, .form-group textarea {
    width: 100%; background: var(--surface2); border: 1px solid var(--border); color: var(--text);
    padding: 9px 12px; border-radius: var(--radius); font-size: 0.9rem;
  }
  .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: 1px solid var(--accent); }
  .form-group textarea { resize: vertical; min-height: 60px; }
  .wiz-2col  { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .wiz-3col  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
  /* Point buy in wizard */
  .pb-stat { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; text-align: center; }
  .pb-name { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; margin-bottom: 6px; }
  .pb-controls { display: flex; align-items: center; justify-content: center; gap: 8px; }
  .pb-btn { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; }
  .pb-btn:hover { border-color: var(--accent); color: var(--accent2); }
  .pb-val { font-size: 1.4rem; font-weight: 700; color: var(--accent2); min-width: 30px; }
  .pb-cost { font-size: 0.7rem; color: var(--muted); margin-top: 4px; }
  .pb-total { font-size: 1.8rem; line-height: 1; }
  .pb-formula { min-height: 32px; margin-top: 8px; color: var(--muted); font-size: 0.72rem; line-height: 1.35; }
  .pb-race { color: var(--accent2); font-weight: 700; }
  .pb-budget { text-align: center; font-size: 1rem; padding: 10px; background: var(--surface2); border-radius: var(--radius); margin-bottom: 16px; }
  .pb-budget span { color: var(--accent2); font-weight: 700; font-size: 1.3rem; }
  /* Wiz check grids (cantrips, spells) */
  .wiz-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-height: 200px; overflow-y: auto; }
  .wiz-check-row  { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 4px; cursor: pointer; border: 1px solid transparent; transition: all 0.12s; }
  .wiz-check-row:hover { background: var(--surface2); border-color: var(--border); }
  .wiz-check-row.selected { background: #1a2a1a; border-color: var(--green); }
  .wiz-check-row.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
  .wiz-check-row input[type=checkbox] { accent-color: var(--accent2); width: 15px; height: 15px; flex-shrink: 0; }
  /* Skill cards — US-108/109 */
  .wiz-skill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 360px; overflow-y: auto; padding-right: 2px; }
  .wiz-skill-card { border: 1px solid var(--border); border-radius: 6px; padding: 9px 12px; cursor: pointer; transition: border-color 0.1s, background 0.1s; background: var(--surface2); user-select: none; }
  .wiz-skill-card:hover:not(.disabled):not(.bg-granted) { border-color: var(--accent); }
  .wiz-skill-card.selected { background: #152215; border-color: #27ae60; }
  .wiz-skill-card.disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
  .wiz-skill-card.bg-granted { background: #0d1a26; border-color: #2980b9; cursor: default; pointer-events: none; }
  .wsk-header { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
  .wsk-cb { width: 14px; height: 14px; flex-shrink: 0; accent-color: var(--accent2); pointer-events: none; }
  .wsk-name { font-size: 0.88rem; font-weight: 600; flex: 1; }
  .wsk-ability { font-size: 0.68rem; padding: 1px 5px; border-radius: 3px; background: var(--surface); color: var(--accent2); border: 1px solid var(--border); font-weight: 700; letter-spacing: 0.5px; }
  .wsk-bonus { font-size: 0.82rem; font-weight: 700; min-width: 30px; text-align: right; }
  .wsk-bonus.pos { color: #6fe08a; }
  .wsk-bonus.neg { color: #f08080; }
  .wsk-desc { font-size: 0.74rem; color: var(--muted); line-height: 1.45; }
  /* Race / bg / class cards */
  .wiz-option-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 10px; max-height: 380px; overflow-y: auto; }
  .wiz-option-grid.race-family-list { display: flex; flex-direction: column; gap: 16px; }
  .race-family-group { display: flex; flex-direction: column; gap: 10px; }
  .race-family-title { color: var(--accent2); font-weight: 700; }
  .race-family-note { color: var(--muted); font-size: 0.78rem; line-height: 1.35; margin: -2px 0 0; }
  .race-family-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 10px; }
  .wiz-option-card { background: var(--surface2); border: 2px solid var(--border); border-radius: var(--radius); padding: 13px; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
  .wiz-option-card:hover { border-color: var(--accent); }
  .wiz-option-card.selected { border-color: var(--accent2); background: #2a1f0a; }
  .wiz-option-card .oc-name { font-size: 0.95rem; color: var(--text); font-weight: 700; margin-bottom: 3px; }
  .wiz-option-card .oc-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
  .wiz-option-card .oc-badge { font-size: 0.68rem; padding: 1px 6px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--accent2); font-weight: 600; }
  .wiz-option-card .oc-badge.blue { color: #80c0f0; border-color: #2980b9; }
  .wiz-option-card .oc-badge.green { color: #6fe08a; border-color: #27ae60; }
  .wiz-option-card .oc-badge.purple { color: #c39bd3; border-color: #8e44ad; }
  .wiz-option-card .oc-desc { font-size: 0.74rem; color: var(--muted); line-height: 1.4; margin-top: 4px; }
  /* Spell / cantrip rows */
  .wiz-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-height: 220px; overflow-y: auto; }
  .wiz-spell-card { border: 1px solid var(--border); border-radius: 5px; padding: 8px 10px; cursor: pointer; transition: border-color 0.1s, background 0.1s; background: var(--surface2); user-select: none; }
  .wiz-spell-card:hover:not(.disabled) { border-color: var(--accent); }
  .wiz-spell-card.selected { background: #152215; border-color: #27ae60; }
  .wiz-spell-card.disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
  .wsp-header { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
  .wsp-cb { width: 13px; height: 13px; flex-shrink: 0; accent-color: var(--accent2); pointer-events: none; }
  .wsp-name { font-size: 0.85rem; font-weight: 600; flex: 1; }
  .wsp-school { font-size: 0.65rem; padding: 1px 5px; border-radius: 3px; background: var(--surface); color: var(--purple); border: 1px solid #8e44ad44; }
  .wsp-conc { font-size: 0.7rem; color: var(--purple); }
  .wsp-desc { font-size: 0.72rem; color: var(--muted); line-height: 1.35; }
  /* Spell level groups (for higher-level character creation) */
  .wiz-spell-level-group { margin-bottom: 16px; }
  .wiz-spell-level-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.6px; color: var(--purple); font-weight: 600; margin-bottom: 6px; padding: 4px 0; border-bottom: 1px solid var(--border); }
  /* Subclass section */
  .wiz-section-label { font-size: 0.82rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin: 16px 0 8px; }
  select option { background: #22222f; }
  /* Toast */
  #toast { position: fixed; bottom: 24px; right: 24px; z-index: 999; display: flex; flex-direction: column; gap: 8px; }
  .toast-msg { padding: 12px 18px; border-radius: var(--radius); font-size: 0.88rem; max-width: 320px; animation: slideIn 0.2s ease; }
  .toast-msg.ok   { background: #1a3a24; border: 1px solid var(--green); color: #6fe08a; }
  .toast-msg.err  { background: #3a1a1a; border: 1px solid var(--red-soft); color: #f08080; }
  .toast-msg.info { background: #1a2a3a; border: 1px solid var(--blue); color: #80c0f0; }
  @keyframes slideIn { from { opacity:0; transform: translateX(20px); } to { opacity:1; transform: translateX(0); } }
  /* Global loader */
  .global-loader {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(51, 33, 21, .72);
    backdrop-filter: blur(2px);
  }
  .global-loader.open { display: flex; }
  .loader-card {
    width: min(326px, 100%);
    min-height: 155px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    padding: 24px 16px;
    text-align: center;
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
  }
  .loader-ring {
    width: 42px;
    height: 42px;
    border: 3px solid rgba(255,215,173,.28);
    border-top-color: var(--accent2);
    border-radius: 999px;
    animation: loaderSpin .8s linear infinite;
  }
  .loader-title {
    color: var(--accent2);
    font-family: "Pragati Narrow", Arial, sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: normal;
  }
  .loader-copy {
    color: var(--muted);
    font-family: "Roboto", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
  }
  @keyframes loaderSpin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) {
    .loader-ring { animation: none; }
  }
  /* Misc */
  .section-row { display: flex; gap: 16px; flex-wrap: wrap; }
  .tag { display: inline-block; padding: 3px 9px; border-radius: 12px; font-size: 0.75rem; background: var(--surface2); border: 1px solid var(--border); color: var(--muted); margin: 2px; }
  .tag.accent { background: #2a1f0a; border-color: var(--accent); color: var(--accent2); }
  hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
  .inline-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
  .inline-form .form-group { margin-bottom: 0; }
  .choice-copy { margin-top: 8px; color: var(--muted); font-size: 0.86rem; line-height: 1.45; }
  .review-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
  .review-card h2 { color: var(--accent2); font-size: 1.35rem; margin-bottom: 10px; }
  .review-card p { color: var(--muted); font-size: 0.9rem; line-height: 1.55; margin-top: 12px; }
  .oc-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
  .oc-badge { font-size: 0.68rem; padding: 1px 6px; border-radius: 10px; background: var(--surface2); border: 1px solid var(--border); color: var(--accent2); font-weight: 600; }
  .oc-badge.blue { color: #80c0f0; border-color: #2980b9; }
  .oc-badge.green { color: #6fe08a; border-color: #27ae60; }
  .oc-badge.purple { color: #c39bd3; border-color: #8e44ad; }

  .character-detail-header,
  .detail-tabs,
  .detail-hero,
  .detail-bio,
  .detail-xp-card,
  .detail-tab-panel,
  .placeholder-shell { margin-bottom: 16px; }
  .character-detail-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .detail-back,
  #detail-header-action { border: 0; background: transparent; color: var(--accent2); cursor: pointer; }
  .detail-title { color: var(--accent2); font-weight: 700; text-align: center; }
  .detail-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .detail-tabs button { min-height: 59px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--accent2); padding: 4px; cursor: pointer; }
  .detail-tabs button.wide { grid-column: span 2; }
  .detail-tabs button.active { background: #865637; color: var(--accent2); }
  .detail-hp-section { display: grid; gap: 8px; margin-bottom: 16px; }
  .detail-hp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .detail-hp-card { min-height: 69px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: var(--radius); background: var(--surface); padding: 4px; text-align: center; }
  .detail-hp-label,
  .detail-hp-sub { color: var(--muted); font-family: "Roboto", Arial, sans-serif; font-size: 14px; line-height: normal; }
  .detail-hp-value { color: var(--accent2); font-family: "Roboto", Arial, sans-serif; font-size: 16px; line-height: normal; }
  .detail-hp-sub { font-size: 12px; }
  .detail-hp-section > .primary-btn { min-height: 44px; width: 100%; border: 1px solid var(--border); border-radius: 4px; background: var(--red); color: var(--text); cursor: pointer; font-family: "Pragati Narrow", Arial, sans-serif; font-size: 16px; line-height: normal; padding: 3px 12px; }
  .detail-combat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-bottom: 32px; }
  .detail-magic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .detail-combat-grid .combat-box { min-width: 0; min-height: 69px; display: flex; flex-direction: column; justify-content: center; gap: 2px; border: 0; border-radius: 8px; background: var(--surface); padding: 4px; }
  .detail-combat-grid .combat-box .lbl { order: 0; color: var(--muted); font-family: "Roboto", Arial, sans-serif; font-size: 14px; font-weight: 400; text-transform: none; }
  .detail-combat-grid .combat-box .val { order: 1; color: var(--accent2); font-family: "Roboto", Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: normal; }
  .detail-hidden-values { display: none; }
  .detail-list { display: grid; gap: 8px; }
  .detail-list-row,
  .detail-note { display: flex; justify-content: space-between; gap: 12px; padding: 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
  .detail-note { flex-direction: column; }
  .detail-empty { color: var(--muted); padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
  .detail-image-upload { border: 1px solid var(--border); background: rgba(0,0,0,.45); color: var(--accent2); border-radius: 6px; padding: 8px 12px; cursor: pointer; }
  .detail-subtabs { display: flex; align-items: flex-end; height: 49px; padding-left: 16px; padding-right: 30px; overflow: hidden; }
  .detail-subtabs button { min-height: 49px; padding: 4px 14px; border: 1px solid var(--field-border, var(--border)); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--surface); color: var(--accent2); cursor: pointer; }
  .detail-subtabs button + button { margin-left: -14px; }
  .detail-subtabs button.active { background: #865637; z-index: 2; }
  .figma-list-panel { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 16px; background: #865637; }
  .figma-score-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 8px; border-radius: 4px; background: var(--surface2); color: var(--muted); }
  .figma-score-row strong { margin-left: auto; color: var(--accent2); }
  .score-dot { width: 16px; height: 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); flex: 0 0 auto; }
  .score-dot.active { box-shadow: inset 0 0 0 3px var(--surface); background: var(--accent2); }
  .score-dot.expertise { background: var(--green); }
  .proficiency-summary-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 12px;
    padding: 14px 16px;
    border: 1px solid var(--field-border, var(--border));
    border-radius: 8px;
    background: var(--surface2);
    color: #fff;
  }
  .proficiency-summary-card small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
  }
  .proficiency-summary-card strong {
    color: var(--accent2);
    font-size: 18px;
  }
  .proficiency-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .proficiency-chip-row span,
  .proficiency-badge {
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    padding: 5px 8px;
    font-size: 10px;
    font-weight: 700;
  }
  .proficiency-score-row {
    align-items: center;
    min-height: 48px;
  }
  .proficiency-score-main {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
  }
  .proficiency-score-main b {
    color: #fff;
    font-weight: 700;
  }
  .proficiency-score-main em {
    color: var(--muted);
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
  }
  .proficiency-badge {
    flex: 0 0 auto;
    background: rgba(0, 0, 0, .22);
    color: var(--muted);
  }
  .proficiency-badge.active {
    background: var(--surface);
    color: var(--accent2);
  }
  .proficiency-badge.expertise {
    background: var(--green);
    color: #465e31;
  }
  .equipment-proficiency-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .equipment-proficiency-section + .equipment-proficiency-section {
    margin-top: 8px;
  }
  .equipment-proficiency-section h3 {
    margin: 0;
    color: var(--accent2);
    font-family: "Pragati Narrow", Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
  }
  .spell-panel { gap: 16px; }
  .figma-spell-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--field-border, var(--border)); border-radius: 8px; background: var(--surface2); color: #fff; }
  .spell-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .spell-card-head strong { color: var(--accent2); }
  .spell-card-head span { border-radius: 4px; background: var(--green); color: #465e31; padding: 4px; font-size: 10px; font-weight: 700; }
  .spell-chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
  .spell-chip-row em { border-radius: 4px; background: var(--surface); color: var(--accent2); padding: 4px; font-size: 10px; font-style: normal; font-weight: 700; }
  .figma-spell-card p { color: #fff; font-size: 10px; line-height: normal; }
  .figma-spell-card button { align-self: flex-end; border: 0; background: transparent; color: var(--accent2); font-size: 10px; text-decoration: underline; cursor: pointer; }
  .placeholder-shell { min-height: 420px; display: grid; place-items: center; align-content: center; gap: 14px; text-align: center; color: var(--muted); }
  .placeholder-shell img { width: 64px; height: 64px; object-fit: contain; }
  .placeholder-shell h2 { color: var(--accent2); }

  /* ── Equipment flow and inventory cards ── */
  .equipment-flow,
  .inventory-equipment-chooser,
  .inventory-rich-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .attr-suggestion-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 16px;
    border: 1px solid var(--field-border, var(--border));
    border-radius: 8px;
    background: var(--surface2);
    padding: 16px;
  }
  .attr-suggestion-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .attr-suggestion-head div {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .attr-suggestion-head small {
    color: var(--muted);
    font-size: .72rem;
  }
  .attr-suggestion-head strong {
    color: var(--accent2);
    font-size: .95rem;
  }
  .attr-suggestion-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .attr-suggestion-grid span {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    padding: 4px;
    font-size: .68rem;
    font-weight: 700;
  }
  .attr-suggestion-card p {
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.4;
  }
  .inventory-section-shell {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .inventory-section-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    padding: 0 16px;
  }
  .inventory-section-tabs button {
    min-height: 49px;
    border: 1px solid var(--field-border, var(--border));
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: var(--surface);
    color: var(--accent2);
    cursor: pointer;
    font-family: "Roboto", Arial, sans-serif;
    font-size: 1rem;
  }
  .inventory-section-tabs button.active {
    background: #865637;
  }
  .inventory-section-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-radius: 16px;
    background: #865637;
    padding: 16px;
  }
  .inventory-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .inventory-section-head div {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .inventory-section-head small,
  .inventory-section-copy {
    color: var(--muted);
    font-size: .75rem;
  }
  .inventory-section-head strong {
    color: var(--accent2);
    font-size: 1rem;
  }
  /* ── Carry / Coins card ─────────────────────────────────────── */
  .inventory-carry-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    background: #5C3A1E;
    border-radius: 12px;
    padding: 14px 16px;
    min-height: 72px;
  }
  .inventory-carry-load {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    min-width: 120px;
  }
  .inventory-carry-title {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .inventory-carry-icon {
    color: var(--accent2, #E8D5B0);
    flex-shrink: 0;
  }
  .inventory-carry-title strong {
    font-family: "Pragati Narrow", Arial, sans-serif;
    font-size: 1.15rem;
    color: var(--accent2, #E8D5B0);
    font-weight: 700;
    letter-spacing: 0.01em;
  }
  .inventory-carry-bar {
    height: 6px;
    background: rgba(255,255,255,0.15);
    border-radius: 3px;
    overflow: hidden;
  }
  .inventory-carry-bar span {
    display: block;
    height: 100%;
    background: #C9921A;
    border-radius: 3px;
    transition: width 0.3s ease;
  }
  .inventory-carry-value {
    font-size: 0.78rem;
    color: var(--muted, #A08060);
    font-family: "Pragati Narrow", Arial, sans-serif;
  }
  .inventory-carry-divider {
    width: 1px;
    background: rgba(255,255,255,0.15);
    margin: 0 16px;
    flex-shrink: 0;
  }
  .inventory-carry-coins {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-around;
    gap: 4px;
  }
  .inventory-carry-coin {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
  }
  .inventory-carry-coin-label {
    font-size: 0.78rem;
    color: var(--muted, #A08060);
    font-family: "Pragati Narrow", Arial, sans-serif;
    letter-spacing: 0.04em;
  }
  .inventory-carry-coin-value {
    font-family: "Pragati Narrow", Arial, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent2, #E8D5B0);
    letter-spacing: 0.01em;
  }
  /* ── /Carry ──────────────────────────────────────────────────── */

  .primary-btn-mini {
    min-height: 34px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--red);
    color: var(--text);
    cursor: pointer;
    font-family: "Pragati Narrow", Arial, sans-serif;
    font-size: 15px;
    padding: 4px 12px;
  }
  .inventory-equipped-loadout {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .inventory-empty-slot {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    justify-content: center;
    min-height: 83px;
    border: 1px dashed var(--field-border, var(--border));
    color: var(--muted);
    padding: 16px;
    text-align: center;
  }
  .inventory-empty-slot strong {
    color: var(--muted);
    font-size: 1rem;
  }
  .inventory-empty-slot span {
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.35;
  }
  .inventory-add-screen {
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-height: 720px;
  }
  .inventory-add-header {
    display: grid;
    grid-template-columns: 64px 1fr 64px;
    align-items: center;
    color: var(--accent2);
    font-family: "Prata", Georgia, serif;
  }
  .inventory-add-header button {
    border: 0;
    background: transparent;
    color: var(--accent2);
    cursor: pointer;
    font: inherit;
    text-align: left;
  }
  .inventory-add-header strong {
    text-align: center;
    font-weight: 400;
  }
  .inventory-coin-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .inventory-coin-row article {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: var(--surface2);
    padding: 16px;
  }
  .inventory-coin-row strong {
    color: var(--accent2);
  }
  .inventory-coin-row button,
  .inventory-search-row button,
  .inventory-add-submit {
    min-height: 29px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--red);
    color: var(--text);
    cursor: pointer;
    font-family: "Pragati Narrow", Arial, sans-serif;
    padding: 4px 12px;
  }
  .inventory-search-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
  }
  .inventory-search-row input,
  .inventory-qty-input {
    min-height: 45px;
    border: 1px solid var(--field-border, var(--border));
    border-radius: 2px;
    background: transparent;
    color: var(--text);
    font-size: 16px;
    padding: 8px;
  }
  .inventory-filter-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: start;
  }
  .inventory-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .inventory-filter-chips button {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    border: 0;
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    padding: 4px;
  }
  .inventory-filter-chips button:not(.active) {
    opacity: .55;
  }
  .inventory-filter-label {
    color: var(--accent2);
    font-size: 16px;
  }
  .inventory-catalog-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .inventory-catalog-card {
    background: var(--surface2);
  }
  .inventory-qty-copy h2 {
    margin: 0 0 8px;
    color: var(--accent2);
    font-family: "Prata", Georgia, serif;
    font-size: 32px;
    font-weight: 400;
  }
  .inventory-qty-copy p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.35;
  }
  .inventory-add-submit {
    width: 100%;
    min-height: 45px;
  }
  .inventory-equipment-chooser {
    margin-bottom: 24px;
  }
  .equipment-intro {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .equipment-intro h2 {
    color: var(--accent2);
    font-size: 1.2rem;
    font-weight: 700;
  }
  .equipment-intro p {
    color: var(--text);
    font-size: .95rem;
  }
  .equipment-intro span {
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.4;
  }
  .equipment-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .equipment-group-head {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: .82rem;
  }
  .equipment-group-head span {
    color: var(--text);
    font-weight: 700;
  }
  .equipment-group-head em {
    font-style: normal;
  }
  .equipment-group-head strong {
    color: var(--accent2);
  }
  .equipment-card-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .equipment-option,
  .inventory-item-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface2);
    padding: 14px;
    cursor: pointer;
  }
  .inventory-item-card {
    cursor: default;
  }
  .equipment-option.selected {
    border-color: var(--accent2);
    background: #70462e;
  }
  .equipment-option-main,
  .inventory-item-head {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .equipment-check {
    width: 18px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 18px;
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--accent2);
    font-size: 14px;
    line-height: 1;
  }
  .equipment-option-title,
  .inventory-item-title {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .item-art {
    position: relative;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    flex: 0 0 58px;
    overflow: hidden;
    margin: 0;
    border: 1px solid color-mix(in srgb, var(--item-art-color, #eed3b1) 65%, transparent);
    border-radius: 8px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--item-art-bg, #4d2c1c) 72%, #2c140c), var(--surface));
  }
  .item-art img {
    width: 82%;
    height: 82%;
    display: block;
    object-fit: contain;
  }
  .item-art.local img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .item-art.library img {
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.45));
  }
  .item-art span {
    position: absolute;
    right: 3px;
    bottom: 3px;
    max-width: calc(100% - 6px);
    overflow: hidden;
    border-radius: 3px;
    background: rgba(35, 18, 12, .82);
    color: var(--item-art-color, #eed3b1);
    padding: 1px 3px;
    font-family: "Roboto", Arial, sans-serif;
    font-size: 7px;
    font-weight: 800;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .inventory-qty-copy .item-art {
    width: 112px;
    height: 112px;
    margin: 0 auto 12px;
  }
  .equipment-option-title small,
  .inventory-item-title small {
    color: var(--muted);
    font-size: .72rem;
  }
  .equipment-option-title strong,
  .inventory-item-title strong {
    color: var(--accent2);
    font-size: .95rem;
  }
  .equipment-option b,
  .inventory-qty,
  .inventory-status-row em {
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    padding: 4px;
    font-size: .68rem;
    font-weight: 700;
    white-space: nowrap;
  }
  .equipment-option p,
  .inventory-item-card p {
    color: var(--text);
    font-size: .76rem;
    line-height: 1.35;
  }
  .equipment-chip-row,
  .inventory-status-row,
  .inventory-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .inventory-card-actions {
    align-items: center;
    justify-content: space-between;
  }
  .inventory-card-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
  }
  .primary-btn-mini {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--red);
    color: var(--text);
    cursor: pointer;
    font-size: .75rem;
    font-weight: 700;
    padding: 6px 10px;
  }
  .primary-btn-mini.equipped {
    background: var(--surface);
    color: var(--accent2);
  }
  .item-use-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0,0,0,.72);
  }
  .item-use-modal.open {
    display: flex;
  }
  .item-use-dialog {
    width: min(358px, 100%);
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface2);
    color: var(--text);
    padding: 18px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .hp-adjust-modal {
    align-items: stretch;
    justify-content: center;
    padding: 0;
    background: rgba(0,0,0,.72);
  }
  .hp-adjust-screen {
    width: min(390px, 100vw);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    overflow: hidden;
    border-radius: 32px;
    background: var(--bg);
    color: var(--text);
    padding: 32px 16px;
  }
  .hp-adjust-header {
    display: grid;
    grid-template-columns: 64px 1fr 64px;
    align-items: center;
    min-height: 56px;
    padding: 16px 0;
  }
  .hp-adjust-back {
    width: 24px;
    height: 24px;
    border: 0;
    background: transparent;
    color: var(--accent2);
    cursor: pointer;
    font-family: "Prata", Georgia, "Times New Roman", serif;
    font-size: 28px;
    line-height: 20px;
    padding: 0;
    text-align: left;
  }
  .hp-adjust-header h2 {
    margin: 0;
    color: var(--accent2);
    font-family: "Prata", Georgia, "Times New Roman", serif;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    text-align: center;
  }
  .hp-modal-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hp-modal-card { min-height: 69px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 8px; background: var(--surface); padding: 4px; text-align: center; }
  .hp-modal-card span,
  .hp-modal-card em { color: var(--muted); font-family: "Roboto", Arial, sans-serif; font-size: 14px; font-style: normal; line-height: normal; }
  .hp-modal-card strong { color: var(--accent2); font-family: "Roboto", Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: normal; }
  .hp-modal-card em { font-size: 12px; }
  .hp-stepper-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
  }
  .hp-stepper-card {
    width: 100%;
    min-height: 69px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 8px;
    background: var(--surface);
    padding: 8px 4px;
    text-align: center;
  }
  .hp-stepper-card-compact { min-height: 53px; }
  .hp-stepper-label {
    width: 100%;
    color: var(--muted);
    font-family: "Roboto", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
  }
  .hp-stepper-control {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .hp-stepper-control button {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: var(--accent2);
    color: var(--surface);
    cursor: pointer;
    font-family: "Roboto", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    padding: 0;
  }
  .hp-stepper-control button:disabled {
    opacity: .55;
    cursor: not-allowed;
  }
  .hp-stepper-control strong {
    min-width: 18px;
    color: var(--accent2);
    font-family: "Roboto", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    text-align: center;
  }
  .hp-stepper-sub {
    height: 14px;
    color: var(--muted);
    font-family: "Roboto", Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
  }
  .hp-stepper-block p {
    width: 100%;
    margin: 0;
    color: #fff;
    font-family: "Roboto", Arial, sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: normal;
  }
  .hp-save-btn {
    min-height: 44px;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--red);
    color: var(--text);
    cursor: pointer;
    font-family: "Pragati Narrow", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    padding: 3px 12px;
  }
  .item-use-close {
    position: absolute;
    right: 10px;
    top: 10px;
    border: 0;
    background: transparent;
    color: var(--accent2);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
  }
  .item-use-dialog small {
    color: var(--muted);
    font-size: .75rem;
  }
  .item-use-dialog h2 {
    color: var(--accent2);
    font-size: 1.2rem;
  }
  .item-use-dialog p {
    color: var(--text);
    font-size: .82rem;
    line-height: 1.4;
  }
  .virtual-dice {
    display: grid;
    gap: 8px;
    place-items: center;
    border-radius: var(--radius);
    background: var(--surface);
    padding: 16px;
  }
  .virtual-dice span {
    color: var(--muted);
    font-size: .8rem;
    font-weight: 700;
  }
  .virtual-dice strong {
    color: var(--accent2);
    font-size: 2.4rem;
    line-height: 1;
  }
  .virtual-dice.rolling {
    animation: diceBounce .98s cubic-bezier(.2,.7,.2,1) both;
  }
  .virtual-dice.rolling strong {
    animation: diceNumberFlicker .18s linear infinite;
  }
  .virtual-dice.settled {
    animation: diceSettle .5s ease-out both;
  }
  .virtual-dice-rolls {
    color: var(--text);
    font-size: .76rem;
    text-align: center;
  }
  .item-use-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .item-use-actions button:disabled {
    opacity: .45;
    cursor: not-allowed;
  }
  .dice-flow-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: var(--bg);
    color: var(--accent2);
    overflow-y: auto;
  }
  .dice-flow-modal.open {
    display: block;
  }
  .dice-flow-screen {
    width: min(390px, 100%);
    min-height: 100vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 32px 16px;
    background: var(--bg);
  }
  .dice-flow-header {
    display: grid;
    grid-template-columns: 64px 1fr 64px;
    align-items: start;
    min-height: 51px;
    padding: 16px 0;
  }
  .dice-flow-header button {
    width: 24px;
    height: 24px;
    border: 0;
    background: transparent;
    color: var(--accent2);
    cursor: pointer;
    font-size: 34px;
    line-height: 18px;
    text-align: left;
  }
  .dice-flow-header h2 {
    margin: 0;
    color: var(--accent2);
    font-family: "Prata", Georgia, serif;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
  }
  .dice-menu,
  .dice-card-list,
  .dice-roll-panel,
  .dice-spell-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .dice-menu h1,
  .dice-copy h1 {
    margin: 0;
    color: var(--accent2);
    font-family: "Prata", Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
  }
  .dice-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .dice-copy p,
  .dice-menu span,
  .dice-equipment-card p,
  .dice-spell-panel > p,
  .dice-ammo-block p,
  .dice-dm-note,
  .dice-select-help {
    margin: 0;
    color: var(--text);
    font-family: "Roboto", Arial, sans-serif;
    font-size: 14px;
    line-height: normal;
  }
  .dice-menu span,
  .dice-equipment-card p,
  .dice-spell-panel > p {
    font-size: 10px;
  }
  .dice-choice-card,
  .dice-equipment-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid var(--field-border, #bbb);
    border-radius: 8px;
    background: var(--surface2);
    color: var(--text);
    padding: 16px;
    text-align: left;
  }
  .dice-choice-card {
    cursor: pointer;
  }
  .dice-choice-card strong,
  .dice-equipment-head strong {
    color: var(--accent2);
    font-family: "Roboto", Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
  }
  .dice-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
  }
  .dice-divider span {
    flex: 1;
    height: 1px;
    background: rgba(255,215,173,.45);
  }
  .dice-divider em {
    color: var(--accent2);
    font-family: "Prata", Georgia, serif;
    font-size: 24px;
    font-style: normal;
  }
  .dice-custom-row {
    display: grid;
    grid-template-columns: 1fr 100px;
    gap: 8px;
  }
  .dice-custom-row input,
  .dice-select {
    width: 100%;
    min-height: 50px;
    border: 1px solid var(--field-border, #bbb);
    border-radius: 2px;
    background: transparent;
    color: var(--muted);
    padding: 8px;
    font-size: 16px;
  }
  .dice-custom-row button,
  .dice-flow-screen .primary-btn {
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--red);
    color: var(--text);
    cursor: pointer;
    font-family: "Pragati Narrow", Arial, sans-serif;
    font-size: 16px;
    line-height: normal;
    padding: 3px 12px;
  }
  .dice-flow-screen .primary-btn:disabled {
    background: var(--bg);
    border-color: #474747;
    color: #474747;
    cursor: not-allowed;
  }
  .dice-equipment-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }
  .dice-equipment-head div {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .dice-equipment-head small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
  }
  .dice-equipment-head em {
    flex: 0 0 auto;
    border-radius: 4px;
    background: var(--green);
    color: #465e31;
    padding: 4px;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
  }
  .dice-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .dice-tag-row span,
  .dice-slot-summary span {
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    padding: 4px;
    font-size: 10px;
    font-weight: 700;
  }
  .dice-stage {
    min-height: 213px;
    display: grid;
    place-items: center;
  }
  .dice-art {
    width: 168px;
    height: 168px;
    display: grid;
    place-items: center;
    position: relative;
    transform-style: preserve-3d;
    will-change: transform, filter;
  }
  .dice-art::before,
  .dice-art::after {
    content: "";
    position: absolute;
    inset: 13%;
    border: 1px solid rgba(255,255,255,.28);
    opacity: .72;
    pointer-events: none;
  }
  .dice-art::after {
    inset: auto 24% 11% 24%;
    height: 10px;
    border: 0;
    border-radius: 999px;
    background: rgba(0,0,0,.28);
    filter: blur(4px);
    transform: translateY(24px);
  }
  .dice-art span {
    z-index: 1;
    font-family: "Prata", Georgia, serif;
    font-size: 48px;
    line-height: 1;
  }
  .dice-art.d20 {
    width: 188px;
    height: 160px;
    clip-path: polygon(50% 0, 92% 30%, 80% 82%, 50% 100%, 20% 82%, 8% 30%);
    background: radial-gradient(circle at 50% 44%, #0b4114 0 26%, #02280b 27% 100%);
    border: 2px solid #8bd568;
    color: #d7ffc2;
  }
  .dice-art.d12 {
    width: 188px;
    height: 188px;
    clip-path: polygon(50% 0, 84% 14%, 100% 48%, 85% 82%, 50% 100%, 15% 82%, 0 48%, 16% 14%);
    background: linear-gradient(145deg, #efe9cd, #bfb797);
    color: #494949;
  }
  .dice-art.d4 {
    width: 160px;
    height: 140px;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    background: radial-gradient(circle at 50% 70%, #4a1060 0 26%, #200030 27% 100%);
    border: 2px solid #c87eff;
    color: #f5d6ff;
  }
  .dice-art.d6 {
    width: 150px;
    height: 150px;
    border-radius: 18px;
    background: linear-gradient(145deg, #f7f7f7, #cfcfcf);
    box-shadow: 8px 8px 0 rgba(0,0,0,.25);
    color: #000;
  }
  .dice-art.d8 {
    width: 168px;
    height: 168px;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    background: radial-gradient(circle at 50% 50%, #0a2e60 0 26%, #011838 27% 100%);
    border: 2px solid #6ab0ff;
    color: #cce4ff;
  }
  .dice-art.d10 {
    width: 172px;
    height: 168px;
    clip-path: polygon(50% 0%, 100% 36%, 82% 100%, 18% 100%, 0% 36%);
    background: radial-gradient(circle at 50% 46%, #60200a 0 26%, #380801 27% 100%);
    border: 2px solid #ffa06a;
    color: #ffe4d6;
  }
  .dice-art.d100 {
    width: 168px;
    height: 168px;
    border-radius: 50%;
    background: radial-gradient(circle at 42% 38%, #1a1a2e 0 30%, #0a0a1a 31% 100%);
    border: 2px solid #a0a0d0;
    color: #e0e0ff;
  }
  .dice-art.rolling {
    animation: diceBounce .98s cubic-bezier(.2,.7,.2,1) both;
  }
  .dice-art.rolling span {
    animation: diceNumberFlicker .18s linear infinite;
  }
  .dice-art.settled {
    animation: diceSettle .5s ease-out both;
  }
  @keyframes diceBounce {
    0% { transform: translate3d(-42px,-18px,0) rotate(-34deg) scale(.88); filter: blur(.5px) brightness(1.1); }
    18% { transform: translate3d(32px,-58px,0) rotate(86deg) scale(1.08); }
    38% { transform: translate3d(-20px,18px,0) rotate(182deg) scale(.98); }
    58% { transform: translate3d(22px,-30px,0) rotate(268deg) scale(1.04); }
    78% { transform: translate3d(-8px,8px,0) rotate(342deg) scale(.99); }
    100% { transform: translate3d(0,0,0) rotate(var(--dice-wobble, 0deg)) scale(1); filter: blur(0) brightness(1); }
  }
  @keyframes diceSettle {
    0% { transform: translateY(-8px) rotate(var(--dice-wobble, 0deg)) scale(1.04); }
    55% { transform: translateY(3px) rotate(0deg) scale(.98); }
    100% { transform: translateY(0) rotate(0deg) scale(1); }
  }
  @keyframes diceNumberFlicker {
    0%, 100% { transform: scale(1); opacity: .95; }
    50% { transform: scale(1.18); opacity: .72; }
  }
  @media (prefers-reduced-motion: reduce) {
    .dice-art.rolling,
    .dice-art.settled,
    .virtual-dice.rolling,
    .virtual-dice.settled,
    .dice-art.rolling span,
    .virtual-dice.rolling strong {
      animation: none;
    }
  }
  .dice-ammo-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--accent2);
  }
  .dice-ammo-block strong {
    font-size: 16px;
    font-weight: 400;
  }
  .dice-ammo-block div {
    display: flex;
    justify-content: space-between;
    border-radius: 8px;
    background: var(--surface2);
    padding: 8px;
    color: var(--accent2);
  }
  /* Attack mode selector (thrown weapons) */
  .attack-mode-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
  }
  .attack-mode-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border: 2px solid var(--field-border, #bbb);
    border-radius: 10px;
    background: var(--surface2);
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
  }
  .attack-mode-btn:hover {
    border-color: var(--accent2);
    background: var(--surface);
  }
  .attack-mode-icon {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
  }
  .attack-mode-btn strong {
    display: block;
    font-size: 16px;
    color: var(--accent2);
    margin-bottom: 2px;
  }
  .attack-mode-btn small {
    font-size: 11px;
    color: var(--muted);
  }
  .attack-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    margin: 4px 0 6px;
  }
  .attack-mode-badge.melee {
    background: rgba(180,80,80,0.18);
    color: #ff9999;
    border: 1px solid rgba(180,80,80,0.4);
  }
  .attack-mode-badge.thrown {
    background: rgba(80,140,180,0.18);
    color: #99ccff;
    border: 1px solid rgba(80,140,180,0.4);
  }

  .dice-attack-total {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
    border: 1px solid var(--field-border, #bbb);
    border-radius: 8px;
    padding: 14px 16px;
    background: var(--surface2);
    color: #fff;
  }
  .dice-attack-total span,
  .dice-attack-total small,
  .dice-attack-total em,
  .dice-attack-total b {
    line-height: normal;
  }
  .dice-attack-total span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
  }
  .dice-attack-total strong {
    grid-row: span 2;
    color: var(--accent2);
    font-size: 30px;
    line-height: .95;
  }
  .dice-attack-total small,
  .dice-attack-total em {
    color: #fff;
    font-size: 11px;
  }
  .dice-attack-total em {
    grid-column: 1 / -1;
    color: var(--muted);
    font-style: normal;
  }
  .dice-attack-total b {
    grid-column: 1 / -1;
    width: fit-content;
    border-radius: 4px;
    padding: 5px 8px;
    background: var(--surface);
    color: var(--accent2);
    font-size: 10px;
  }
  .dice-attack-total b.warn {
    color: var(--muted);
  }
  .dice-outcome-grid {
    min-height: 240px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 8px;
  }
  .dice-outcome-grid button {
    height: 69px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--surface);
    color: var(--accent2);
    cursor: pointer;
    font-size: 24px;
  }
  .dice-outcome-grid button.selected {
    border-color: var(--field-border, #bbb);
    background: var(--surface2);
  }
  .dice-result-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--accent2);
    font-size: 14px;
  }
  .dice-result-row strong {
    font-weight: 400;
    text-align: right;
  }
  .dice-tabs {
    height: 49px;
    display: flex;
    align-items: flex-end;
    padding-left: 16px;
    padding-right: 30px;
    overflow: hidden;
  }
  .dice-tabs button {
    width: 120px;
    height: 49px;
    margin-right: -14px;
    border: 1px solid var(--field-border, #bbb);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: var(--surface);
    color: var(--accent2);
    cursor: pointer;
    font-size: 16px;
  }
  .dice-tabs button.active {
    background: #865637;
    z-index: 2;
  }
  .dice-spell-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-radius: 16px;
    background: #865637;
    padding: 16px;
  }
  .dice-slot-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .dice-info-link {
    align-self: flex-end;
    border: 0;
    background: transparent;
    color: var(--accent2);
    cursor: pointer;
    font-size: 10px;
    text-decoration: underline;
  }
  .dice-select-label,
  .dice-select-help {
    color: var(--muted);
    font-size: 12px;
  }
  .dice-select-help {
    min-height: 15px;
  }
  .dice-dm-note {
    color: var(--muted);
  }
  .dice-empty {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    padding: 16px;
  }
  .equip-chip {
    border-radius: 4px;
    background: var(--surface);
    color: var(--accent2);
    padding: 4px;
    font-size: .68rem;
    font-weight: 700;
  }
  .equipment-pack-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .equipment-pack-grid span {
    border-radius: 4px;
    background: var(--surface);
    color: var(--muted);
    padding: 6px;
    font-size: .68rem;
    line-height: 1.2;
  }
  .inventory-equipment-chooser .primary-btn {
    margin-top: 8px;
  }

  /* ── Mobile-first app shell ─────────────────────────────────────────────── */
  @media (max-width: 760px) {
    :root {
      --bg: #332115;
      --surface: #462f20;
      --surface2: #64422b;
      --border: #92752b;
      --field-border: #bbbbbb;
      --accent: #ffd7ad;
      --accent2: #ffd7ad;
      --red: #720000;
      --red-soft: #980000;
      --green: #c3d5b4;
      --blue: #c4c4c4;
      --purple: #c3d5b4;
      --text: #dbdbdb;
      --muted: #c4c4c4;
      --hp-bar: #ffd7ad;
    }
    body {
      background: var(--bg);
      font-family: "Roboto", Arial, Helvetica, sans-serif;
    }
    #app {
      max-width: 390px;
      margin: 0 auto;
      min-height: 100svh;
      background: var(--bg);
      box-shadow: none;
    }
    header { display: none; }
    header > div:first-child { display: none; }
    header h1 {
      font-size: 1.02rem;
      letter-spacing: 0;
      color: var(--accent2);
      font-family: Georgia, "Times New Roman", serif;
      font-weight: 400;
    }
    header span {
      display: none;
    }
    #api-status {
      font-size: .68rem;
      padding: 3px 7px;
    }
    main {
      display: block;
      min-height: 100svh;
    }
    #sidebar {
      position: fixed;
      left: 50%;
      right: auto;
      bottom: 0;
      z-index: 70;
      width: min(430px, 100vw);
      transform: translateX(-50%);
      padding: 16px 20px calc(32px + env(safe-area-inset-bottom));
      border: 0;
      border-bottom: 0;
      border-radius: 0;
      background: var(--surface);
      backdrop-filter: none;
    }
    body.character-detail-mode #sidebar { display: none; }
    #char-mini { display: none !important; }
    #sidebar nav {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 0;
    }
    #sidebar nav a {
      width: 56px;
      min-height: 56px;
      padding: 6px 4px;
      border-left: 0;
      border-radius: 8px;
      text-align: center;
      font-family: "Pragati Narrow", Arial, sans-serif;
      font-size: 8px;
      line-height: normal;
      color: #c4c4c4;
    }
    #sidebar nav a span { display: block; }
    #sidebar nav a.active {
      color: #f6ede4;
      background: #865637;
      border-left-color: transparent;
    }
    #sidebar nav .nav-icon,
    #sidebar nav .nav-icon-img {
      display: block;
      width: 32px;
      height: 32px;
      margin: 0 auto 5px;
      object-fit: contain;
    }
    #content {
      padding: 32px 16px 118px;
      overflow: visible;
    }
    body.character-detail-mode #content { padding-bottom: 32px; }
    .panel-title {
      border: 0;
      margin-bottom: 16px;
      padding: 0;
      font-size: 24px;
      line-height: normal;
      color: var(--accent2);
      font-family: "Prata", Georgia, "Times New Roman", serif;
      font-weight: 400;
    }
    .roster-header {
      align-items: flex-start;
      gap: 14px;
      margin: 0 0 32px;
    }
    .roster-header .panel-title::before { content: none; }
    .roster-question {
      margin: 0 0 16px;
      color: var(--text);
      font-family: "Roboto", Arial, sans-serif;
      font-size: 16px;
      line-height: normal;
    }
    .roster-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      margin-bottom: 32px;
    }
    #roster-add-btn {
      width: 100%;
      min-height: 44px;
      padding: 3px 12px;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: var(--red);
      color: var(--text);
      font-family: "Pragati Narrow", Arial, sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: normal;
      gap: 2px;
    }
    #roster-add-btn .add-icon {
      width: 24px;
      height: 24px;
      display: inline-grid;
      place-items: center;
      color: var(--text);
      font-family: "Roboto", Arial, sans-serif;
      font-size: 24px;
      line-height: 1;
    }
    .roster-card {
      width: 100%;
      min-height: 159px;
      padding: 16px;
      border-radius: 2px;
      overflow: hidden;
      background: linear-gradient(180deg, #462f20 0%, #332115 100%);
      border: 1px solid rgba(255, 215, 173, .55);
      box-shadow: none;
    }
    .roster-card:hover { transform: none; }
    .roster-card .rc-name {
      max-width: calc(100% - 116px);
      margin-bottom: 8px;
      color: #f6ede4;
      font-family: "Prata", Georgia, "Times New Roman", serif;
      font-size: 20px;
      font-weight: 400;
      line-height: normal;
    }
    .roster-card .rc-sub {
      max-width: calc(100% - 116px);
      margin-bottom: 0;
      color: var(--muted);
      font-family: "Pragati Narrow", Arial, sans-serif;
      font-size: 12px;
      line-height: normal;
    }
    .roster-card .rc-sub span {
      display: inline-block;
      margin: 0 6px;
      color: #838383;
      font-family: "Inter", "Roboto", Arial, sans-serif;
      font-weight: 700;
    }
    .roster-card .rc-actions {
      opacity: 1;
      top: 17px;
      right: 16px;
      gap: 16px;
    }
    .roster-card .rc-edit,
    .roster-card .rc-del {
      min-height: 22px;
      padding: 4px 8px;
      border-radius: 4px;
      background: var(--red);
      color: var(--text);
      border-color: var(--field-border);
      font-family: "Roboto", Arial, sans-serif;
      font-size: 10px;
      font-weight: 700;
      line-height: normal;
    }
    .roster-card .rc-del { border-color: #4d4d4d; }
    .roster-card .rc-quick {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin: 0 0 8px;
      color: var(--muted);
      font-family: "Roboto", Arial, sans-serif;
      font-size: 14px;
      line-height: normal;
    }
    .roster-card .rc-quick span {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
    }
    .roster-card .rc-quick strong {
      color: var(--muted);
      font-family: "Inter", "Roboto", Arial, sans-serif;
      font-size: 12px;
      font-weight: 700;
    }
    .roster-card .rc-quick img {
      width: 16px;
      height: 16px;
      object-fit: contain;
    }
    .roster-card .rc-bio {
      display: -webkit-box;
      margin: 0;
      overflow: hidden;
      color: var(--muted);
      font-family: "Roboto", Arial, sans-serif;
      font-size: 14px;
      font-weight: 400;
      line-height: normal;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
    .character-detail-header {
      display: grid;
      grid-template-columns: 64px 1fr 64px;
      align-items: center;
      min-height: 56px;
      margin-bottom: 16px;
      padding: 16px 0;
    }
    .detail-back,
    #detail-header-action,
    .detail-title {
      color: var(--accent2);
      font-family: "Prata", Georgia, "Times New Roman", serif;
      font-size: 14px;
      font-weight: 400;
      line-height: normal;
    }
    .detail-back {
      justify-self: start;
      display: flex;
      align-items: center;
      gap: 2px;
      padding: 0;
    }
    .detail-back::first-letter { font-size: 24px; }
    #detail-header-action { justify-self: end; padding: 0; text-align: right; }
    .detail-title {
      justify-self: center;
      max-width: 170px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 16px;
    }
    .detail-tabs {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 32px;
    }
    .detail-tabs button {
      min-height: 59px;
      padding: 4px;
      border: 1px solid var(--field-border);
      border-radius: 8px;
      background: var(--surface);
      color: var(--accent2);
      font-family: "Roboto", Arial, sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: normal;
    }
    .detail-tabs button.wide { grid-column: span 2; }
    .detail-tabs button.active {
      background: #865637;
      color: var(--accent2);
    }
    .detail-hero {
      width: 100%;
      aspect-ratio: 358 / 185;
      border-radius: 16px;
      background:
        linear-gradient(180deg, rgba(51,33,21,0) 0%, rgba(51,33,21,.32) 100%),
        #462f20;
      background-position: center;
      background-size: cover;
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      padding: 12px;
      margin-bottom: 32px;
      overflow: hidden;
    }
    .detail-hero.has-custom-image {
      background-position: center;
      background-size: cover;
    }
    .detail-image-upload {
      border-color: rgba(255,215,173,.65);
      background: rgba(51,33,21,.72);
      color: var(--accent2);
      font-family: "Pragati Narrow", Arial, sans-serif;
      font-size: 16px;
      line-height: 1;
    }
    .detail-bio {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 32px;
    }
    .detail-section-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: var(--accent2);
      font-family: "Pragati Narrow", Arial, sans-serif;
      font-size: 24px;
      font-weight: 400;
      line-height: normal;
    }
    .detail-bio p,
    .detail-empty,
    .detail-note span {
      color: var(--muted);
      font-family: "Roboto", Arial, sans-serif;
      font-size: 14px;
      font-weight: 400;
      line-height: normal;
    }
    .detail-hp-section {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 32px;
    }
    .detail-hp-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .detail-hp-card {
      min-height: 69px;
      border-radius: 8px;
      background: var(--surface);
      padding: 4px;
      text-align: center;
    }
    .detail-hp-label {
      color: var(--muted);
      font-family: "Roboto", Arial, sans-serif;
      font-size: 14px;
      font-weight: 400;
      line-height: normal;
    }
    .detail-hp-value {
      color: var(--accent2);
      font-family: "Roboto", Arial, sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: normal;
    }
    .detail-hp-sub {
      color: var(--muted);
      font-family: "Roboto", Arial, sans-serif;
      font-size: 12px;
      font-weight: 400;
      line-height: normal;
    }
    .detail-hp-section > .primary-btn {
      min-height: 44px;
      border-color: var(--border);
      border-radius: 4px;
      background: var(--red);
      color: var(--text);
      font-family: "Pragati Narrow", Arial, sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: normal;
    }
    .detail-combat-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 4px;
      margin-bottom: 32px;
    }
    .detail-magic-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .detail-combat-grid .combat-box {
      min-height: 69px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 2px;
      border: 0;
      border-radius: 8px;
      background: var(--surface);
      padding: 4px;
    }
    .detail-combat-grid .combat-box .lbl {
      order: 0;
      color: var(--muted);
      font-family: "Roboto", Arial, sans-serif;
      font-size: 14px;
      font-weight: 400;
      text-transform: none;
    }
    .detail-combat-grid .combat-box .val {
      order: 1;
      color: var(--accent2);
      font-family: "Roboto", Arial, sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: normal;
    }
    .detail-xp-card {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 32px;
    }
    .xp-label,
    .xp-row {
      color: var(--text);
      font-family: "Roboto", Arial, sans-serif;
      font-size: 12px;
      font-weight: 400;
    }
    .xp-row {
      display: flex;
      justify-content: space-between;
    }
    .xp-track {
      width: 100%;
      height: 4px;
      overflow: hidden;
      border-radius: 100px;
      background: var(--surface);
    }
    .xp-track div {
      width: 0%;
      height: 100%;
      border-radius: inherit;
      background: var(--accent2);
      transition: width .2s ease;
    }
    .detail-xp-card .btn {
      min-height: 44px;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: var(--red);
      color: var(--text);
      font-family: "Pragati Narrow", Arial, sans-serif;
      font-size: 16px;
      font-weight: 400;
    }
    .detail-small-heading {
      margin-bottom: 4px;
      color: #fff;
      font-family: "Roboto", Arial, sans-serif;
      font-size: 12px;
      font-weight: 400;
      line-height: normal;
    }
    .detail-stat-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 4px;
      margin-bottom: 32px;
    }
    .detail-stat-grid .stat-box {
      min-height: 69px;
      border: 0;
      border-radius: 8px;
      background: var(--surface);
      padding: 4px;
    }
    .detail-stat-grid .stat-name {
      color: var(--muted);
      font-size: 14px;
      letter-spacing: 0;
    }
    .detail-stat-grid .stat-mod {
      color: var(--accent2);
      font-size: 16px;
      font-weight: 400;
    }
    .detail-stat-grid .stat-score {
      color: var(--muted);
      font-size: 12px;
    }
    .detail-tab-panel {
      margin-top: 0;
    }
    .detail-subtabs {
      height: 49px;
      margin-top: 0;
      padding-left: 16px;
      padding-right: 30px;
    }
    .detail-subtabs button {
      height: 49px;
      min-width: 112px;
      border-color: var(--field-border);
      color: var(--accent2);
      font-family: "Roboto", Arial, sans-serif;
      font-size: 16px;
      font-weight: 400;
      white-space: nowrap;
    }
    .detail-subtabs button.wide { min-width: 177px; }
    .figma-list-panel {
      border-radius: 16px;
      background: #865637;
      padding: 16px;
      gap: 8px;
    }
    .figma-score-row {
      min-height: 35px;
      background: var(--surface2);
      color: var(--muted);
      font-family: "Roboto", Arial, sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: normal;
    }
    .figma-score-row strong {
      color: var(--accent2);
      font-size: 16px;
      font-weight: 700;
    }
    .spell-panel { gap: 16px; }
    .figma-spell-card {
      gap: 10px;
      border-color: var(--field-border);
      background: var(--surface2);
      padding: 16px;
    }
    .spell-card-head strong {
      color: var(--accent2);
      font-family: "Roboto", Arial, sans-serif;
      font-size: 16px;
      font-weight: 700;
    }
    .equipment-flow,
    .inventory-equipment-chooser,
    .inventory-rich-list {
      gap: 16px;
    }
    .equipment-intro h2 {
      margin: 0 0 28px;
      color: var(--accent2);
      font-family: "Pragati Narrow", Arial, sans-serif;
      font-size: 24px;
      font-weight: 400;
      line-height: normal;
    }
    .equipment-intro p {
      color: #fff;
      font-family: "Roboto", Arial, sans-serif;
      font-size: 12px;
      line-height: normal;
    }
    .equipment-intro span {
      color: var(--muted);
      font-family: "Roboto", Arial, sans-serif;
      font-size: 10px;
      line-height: normal;
    }
    .equipment-group {
      gap: 8px;
    }
    .equipment-group-head {
      min-height: 32px;
      color: var(--muted);
      font-family: "Roboto", Arial, sans-serif;
      font-size: 12px;
      line-height: normal;
    }
    .equipment-group-head span {
      color: #fff;
      font-weight: 400;
    }
    .equipment-group-head strong {
      color: var(--accent2);
      font-weight: 700;
    }
    .equipment-option,
    .inventory-item-card {
      min-height: 96px;
      border-color: var(--field-border);
      border-radius: 8px;
      background: var(--surface2);
      padding: 16px;
    }
    .equipment-option.selected {
      border-color: var(--accent2);
      background: #70462e;
    }
    .equipment-check {
      width: 16px;
      height: 16px;
      flex-basis: 16px;
      border-color: var(--field-border);
      color: var(--accent2);
      font-size: 12px;
    }
    .equipment-option-title small,
    .inventory-item-title small {
      color: var(--muted);
      font-family: "Roboto", Arial, sans-serif;
      font-size: 10px;
    }
    .equipment-option-title strong,
    .inventory-item-title strong {
      color: var(--accent2);
      font-family: "Roboto", Arial, sans-serif;
      font-size: 16px;
      font-weight: 700;
      line-height: normal;
    }
    .item-art {
      width: 64px;
      height: 64px;
      flex-basis: 64px;
      border-color: var(--field-border);
      border-radius: 8px;
    }
    .inventory-qty-copy .item-art {
      width: 128px;
      height: 128px;
      margin-bottom: 14px;
    }
    .equipment-option b,
    .inventory-qty,
    .inventory-status-row em,
    .equip-chip {
      border: 0;
      border-radius: 4px;
      background: var(--surface);
      color: var(--text);
      padding: 4px;
      font-family: "Roboto", Arial, sans-serif;
      font-size: 10px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
    }
    .equip-chip {
      color: var(--accent2);
    }
    .equipment-option p,
    .inventory-item-card p {
      color: #fff;
      font-family: "Roboto", Arial, sans-serif;
      font-size: 10px;
      line-height: normal;
    }
    .equipment-pack-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .equipment-pack-grid span {
      background: var(--surface);
      color: var(--muted);
      font-family: "Roboto", Arial, sans-serif;
      font-size: 10px;
      line-height: 1.2;
    }
    .inventory-equipment-chooser .primary-btn {
      min-height: 44px;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: var(--red);
      color: var(--text);
      font-family: "Pragati Narrow", Arial, sans-serif;
      font-size: 16px;
      font-weight: 400;
    }
    .inventory-card-actions {
      gap: 10px;
    }
    .inventory-card-controls {
      gap: 8px;
    }
    .primary-btn-mini {
      min-height: 32px;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: var(--red);
      color: var(--text);
      font-family: "Pragati Narrow", Arial, sans-serif;
      font-size: 14px;
      font-weight: 400;
      line-height: normal;
      padding: 4px 10px;
    }
    .primary-btn-mini.equipped {
      background: var(--surface);
      color: var(--accent2);
    }
    .item-use-modal {
      background: rgba(51,33,21,.82);
      padding: 16px;
    }
    .item-use-dialog {
      border-color: var(--field-border);
      border-radius: 8px;
      background: #64422b;
      padding: 16px;
      font-family: "Roboto", Arial, sans-serif;
    }
    .item-use-dialog small {
      color: var(--muted);
      font-size: 10px;
    }
    .item-use-dialog h2 {
      color: var(--accent2);
      font-family: "Pragati Narrow", Arial, sans-serif;
      font-size: 24px;
      font-weight: 400;
      line-height: normal;
    }
    .item-use-dialog p,
    .virtual-dice-rolls {
      color: #fff;
      font-size: 10px;
      line-height: normal;
    }
    .virtual-dice {
      background: var(--surface);
      border-radius: 8px;
      padding: 16px;
    }
    .virtual-dice strong {
      color: var(--accent2);
      font-family: "Prata", Georgia, "Times New Roman", serif;
      font-size: 48px;
      font-weight: 400;
    }
    .detail-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 24px;
    }
    .detail-list-row,
    .detail-note,
    .detail-empty {
      border: 0;
      border-radius: 8px;
      background: var(--surface);
      padding: 12px;
      color: var(--muted);
      font-family: "Roboto", Arial, sans-serif;
      font-size: 14px;
    }
    .detail-list-row strong,
    .detail-note strong {
      color: var(--accent2);
      font-weight: 400;
    }
    .placeholder-shell {
      min-height: calc(100svh - 180px);
      gap: 16px;
      color: var(--muted);
      font-family: "Roboto", Arial, sans-serif;
      font-size: 14px;
      line-height: 1.4;
    }
    .placeholder-shell img {
      width: 72px;
      height: 72px;
    }
    .placeholder-shell h2 {
      color: var(--accent2);
      font-family: "Prata", Georgia, "Times New Roman", serif;
      font-size: 24px;
      font-weight: 400;
    }
    .roster-empty {
      min-height: 62svh;
      display: grid;
      place-content: center;
      padding: 30px 18px;
      border: 1px dashed rgba(240,189,104,.28);
      border-radius: 18px;
      background: var(--surface);
    }
    .card {
      border-radius: 16px;
      padding: 16px;
      background: var(--surface);
    }
    .stats-grid,
    .wiz-3col {
      grid-template-columns: repeat(2, 1fr);
    }
    .combat-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .combat-box {
      min-width: 0;
      border-radius: 14px;
      padding: 13px 8px;
    }
    .skills-grid,
    #skills-list,
    .wiz-2col,
    .wiz-check-grid,
    .wiz-skill-grid,
    .wiz-option-grid {
      grid-template-columns: 1fr !important;
    }
    #wizard-overlay.open,
    #edit-overlay.open {
      align-items: stretch;
      justify-content: center;
      background: var(--bg);
    }
    #wizard-box,
    #edit-box {
      width: min(390px, 100vw);
      max-width: 100vw;
      max-height: none;
      min-height: 100svh;
      border: 0;
      border-radius: 0;
      padding: 32px 16px calc(32px + env(safe-area-inset-bottom));
      background: var(--bg);
    }
    .wiz-title {
      display: none;
    }
    .wiz-sub {
      display: grid;
      grid-template-columns: 64px 1fr 64px;
      align-items: center;
      min-height: 56px;
      margin-bottom: 0;
      color: var(--accent2);
      font-family: "Prata", Georgia, "Times New Roman", serif;
      font-size: 16px;
      text-align: center;
    }
    .wiz-top-back {
      justify-self: start;
      width: 24px;
      height: 24px;
      border: 0;
      background: transparent;
      color: var(--accent2);
      font-family: "Roboto", Arial, sans-serif;
      font-size: 24px;
      line-height: 1;
      cursor: pointer;
    }
    .wiz-top-spacer { width: 64px; height: 19px; }
    .wiz-dots {
      display: flex;
      gap: 8px;
      overflow: visible;
      padding: 0;
      margin: 0 0 32px;
      scrollbar-width: none;
    }
    .wiz-dots .wiz-dot { display: none; }
    .wiz-dots .wiz-line {
      display: block;
      flex: 1 1 0;
      height: 3px;
      min-width: 0;
      border-radius: 100px;
      background: var(--surface2);
    }
    .wiz-dots .wiz-line.done { background: var(--muted); }
    .wiz-dots .wiz-line.active { background: var(--accent2); }
    .wiz-body {
      min-height: auto;
      padding-bottom: 10px;
    }
    .wiz-nav {
      position: static;
      z-index: 5;
      gap: 8px;
      margin: 32px 0 0;
      padding: 0;
      border-top: 0;
      background: var(--bg);
      backdrop-filter: none;
    }
    #wiz-btn-back { display: none !important; }
    .wiz-nav button[onclick="wizardClose()"] {
      display: none;
    }
    .wiz-nav .btn {
      min-height: 44px;
      padding: 10px 14px;
      border-radius: 4px;
      font-family: "Pragati Narrow", Arial, sans-serif;
      font-size: 16px;
      font-weight: 400;
    }
    #wiz-btn-next {
      flex: 1;
      background: var(--red);
      border: 1px solid var(--border);
      color: var(--text);
    }
    #wiz-btn-next:disabled,
    #wiz-btn-next[aria-disabled="true"] {
      background: var(--bg);
      border-color: #474747;
      color: #474747;
      opacity: 1;
    }
    .btn-accent {
      background: var(--red);
      color: #fff;
    }
    .btn-ghost {
      border-color: var(--border);
      color: var(--accent2);
      background: transparent;
    }
    .btn:focus,
    button:focus {
      outline: none;
      box-shadow: none;
    }
    .wiz-option-grid {
      max-height: none;
      overflow: visible;
    }
    .race-family-list {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
    .race-family-group {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .race-family-title {
      color: var(--accent2);
      font-family: "Pragati Narrow", Arial, sans-serif;
      font-size: 22px;
      font-weight: 400;
      line-height: 1;
      margin: 0;
    }
    .race-family-note {
      margin: -4px 0 0;
      color: var(--muted);
      font-family: "Roboto", Arial, sans-serif;
      font-size: 10px;
      line-height: 1.35;
    }
    .race-family-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .wiz-option-card,
    .wiz-skill-card,
    .wiz-spell-card,
    .pb-stat {
      border-radius: 8px;
      padding: 16px;
      background: var(--surface2);
      border: 1px solid var(--field-border);
    }
    .wiz-option-card { display: flex; flex-direction: column; gap: 10px; }
    .wiz-option-card .oc-name,
    .review-card h2 {
      font-family: "Roboto", Arial, sans-serif;
      font-weight: 700;
      color: var(--accent2);
      font-size: 16px;
    }
    .wiz-option-card .oc-desc,
    .wsk-desc,
    .wsp-desc,
    .review-card p,
    .choice-copy {
      color: #f3e8d8;
      font-size: 10px;
      line-height: normal;
    }
    .card-title,
    .wiz-section-label,
    .form-group label,
    .pb-name {
      color: var(--muted);
      letter-spacing: 0;
      font-family: "Roboto", Arial, Helvetica, sans-serif;
      font-weight: 400;
    }
    .oc-badge,
    .wiz-option-card .oc-badge {
      background: var(--surface);
      border: 0;
      border-radius: 4px;
      color: var(--text);
      font-family: "Roboto", Arial, sans-serif;
      font-size: 10px;
      font-weight: 700;
      padding: 4px;
    }
    .wiz-option-card.selected,
    .wiz-skill-card.selected,
    .wiz-spell-card.selected {
      background: #70462e;
      border-color: var(--accent2);
    }
    .form-group input,
    .form-group select,
    .form-group textarea {
      min-height: 44px;
      border-radius: 3px;
      font-size: 16px;
      background: #3b2316;
      border-color: var(--field-border);
      color: var(--text);
      border-radius: 2px;
      padding: 16px 8px;
      font-family: "Roboto", Arial, sans-serif;
    }
    .form-group { margin-bottom: 32px; }
    .form-group label {
      padding-left: 8px;
      margin-bottom: 4px;
      font-size: 12px;
      color: var(--muted);
      text-transform: none;
    }
    .choice-copy {
      margin-top: 8px;
      color: #fff;
      font-size: 10px;
      line-height: normal;
    }
    .review-block {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 16px;
      width: 100%;
    }
    .review-card {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-end;
      gap: 10px;
      width: 100%;
      border: 1px solid var(--field-border);
      border-radius: 8px;
      background: var(--surface2);
      padding: 16px;
    }
    .review-block > .card-title,
    .pdf-section-title,
    .wiz-section-label {
      margin: 0 0 16px;
      color: var(--accent2);
      font-family: "Pragati Narrow", Arial, sans-serif;
      font-size: 24px;
      font-weight: 400;
      line-height: normal;
      text-transform: none;
    }
    .review-block > .card-title {
      margin: 0;
      color: #fff;
    }
    .review-card h2 {
      margin: 0;
      color: var(--accent2);
      font-family: "Roboto", Arial, sans-serif;
      font-size: 16px;
      font-weight: 700;
      line-height: normal;
    }
    .review-card p {
      margin: 0;
      color: #fff;
      font-family: "Roboto", Arial, sans-serif;
      font-size: 10px;
      font-weight: 400;
      line-height: normal;
    }
    .review-card > .oc-badges,
    .wiz-option-card .oc-badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
    .review-card .oc-badge {
      background: var(--surface);
      color: var(--text);
      border: 0;
      border-radius: 4px;
      padding: 4px;
      font-family: "Roboto", Arial, sans-serif;
      font-size: 10px;
      font-weight: 700;
      line-height: normal;
    }
    .attr-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
    }
    .attr-budget {
      display: flex;
      align-items: baseline;
      gap: 8px;
      color: #fff;
      font-family: "Roboto", Arial, sans-serif;
      font-size: 16px;
      white-space: nowrap;
    }
    .attr-budget span {
      color: var(--accent2);
      font-size: 24px;
      font-weight: 700;
    }
    #wpb-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 4px;
    }
    .pb-stat {
      min-height: 74px;
      padding: 8px 4px;
      border: 0;
      text-align: center;
      background: var(--surface);
    }
    .pb-name {
      margin-bottom: 2px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 400;
      text-align: center;
    }
    .pb-controls { gap: 8px; }
    .pb-btn {
      width: 16px;
      height: 16px;
      border: 1px solid var(--border);
      border-radius: 50%;
      background: #865637;
      color: var(--accent2);
      font-size: 12px;
      line-height: 1;
    }
    .pb-val,
    .pb-total {
      min-width: 18px;
      color: var(--accent2);
      font-family: "Roboto", Arial, sans-serif;
      font-size: 16px;
      font-weight: 400;
    }
    .pb-cost {
      margin-top: 3px;
      color: var(--muted);
      font-size: 9px;
    }
    .pb-formula {
      min-height: 0;
      margin-top: 2px;
      color: #fff;
      font-size: 9px;
      line-height: 1.2;
    }
    .pb-race { color: var(--accent2); }
    .pdf-help {
      margin-top: 8px;
      color: #fff;
      font-size: 10px;
      line-height: normal;
    }
    .skill-title-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 16px;
      font-family: "Pragati Narrow", Arial, sans-serif;
    }
    .skill-title-row .pdf-section-title { margin: 0; }
    .skill-count { color: var(--muted); font-size: 16px; }
    .skill-count strong { color: var(--accent2); font-weight: 400; }
    .wiz-skill-grid,
    .wiz-check-grid {
      display: flex;
      flex-direction: column;
      gap: 16px;
      max-height: none;
      overflow: visible;
      padding: 0;
    }
    .wiz-skill-card,
    .wiz-spell-card {
      min-height: 74px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      gap: 10px;
    }
    .wsk-header,
    .wsp-header {
      margin: 0;
      gap: 8px;
    }
    .wsk-cb,
    .wsp-cb {
      width: 16px;
      height: 16px;
      accent-color: #865637;
    }
    .wsk-name,
    .wsp-name {
      color: var(--accent2);
      font-family: "Roboto", Arial, sans-serif;
      font-size: 16px;
      font-weight: 700;
    }
    .wsk-ability,
    .wsk-bonus,
    .wsp-school {
      border: 0;
      border-radius: 4px;
      padding: 4px;
      background: var(--surface);
      color: var(--text);
      font-size: 10px;
      font-weight: 700;
    }
    .wsk-bonus.pos,
    .wsk-bonus.neg { color: var(--text); }
    .wiz-skill-card.bg-granted .granted-badge {
      margin-left: auto;
      border-radius: 4px;
      padding: 4px;
      background: var(--green);
      color: #465e31;
      font-size: 10px;
      font-weight: 700;
    }
    .wsp-school {
      margin-left: auto;
      background: var(--green);
      color: #465e31;
    }
    .wiz-skill-card.selected,
    .wiz-spell-card.selected {
      background: var(--surface2);
      border-color: var(--field-border);
    }
    .hp-die-art {
      width: 154px;
      height: 157px;
      margin: 32px auto;
      display: grid;
      place-content: center;
      clip-path: polygon(50% 0, 87% 27%, 90% 66%, 50% 100%, 10% 66%, 13% 27%);
      background: linear-gradient(145deg, #a33df0 0%, #7832ca 48%, #2f167d 100%);
      color: #fff;
      font-family: "Roboto", Arial, sans-serif;
      font-size: 50px;
      font-weight: 700;
    }
    .hp-review-card {
      text-align: center;
    }
    .hp-review-card p {
      margin: 0;
      color: #f3e8d8;
      font-size: 10px;
      line-height: normal;
      text-align: left;
    }
    .hp-roll-summary {
      color: #fff;
      font-family: "Roboto", Arial, sans-serif;
      font-size: 16px;
      line-height: 1.35;
      text-align: center;
    }
    .hp-roll-summary strong {
      color: var(--accent2);
      font-weight: 700;
    }
    .hp-roll-summary span {
      color: var(--muted);
      font-size: 12px;
    }
    #toast {
      left: 14px;
      right: 14px;
      bottom: 86px;
    }
    .toast-msg {
      max-width: none;
      width: 100%;
    }
  }

/* ── Resolución de historia ────────────────────────────────────────────────── */
.story-skill-picker {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 16px 24px;
}

@media (max-width: 760px) {
  body.character-detail-mode #detail-extra-panel {
    width: min(var(--figma-card-width), 100%);
    margin: 0 auto 32px;
  }

  body.character-detail-mode .inventory-section-shell,
  body.character-detail-mode .inventory-section-panel {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 16px;
  }

  body.character-detail-mode .character-detail-header.inventory-header {
    grid-template-columns: 88px minmax(0, 1fr) 124px;
  }

  body.character-detail-mode .character-detail-header.inventory-header #detail-header-action {
    min-width: auto;
    height: var(--figma-button-mini-height);
    max-height: var(--figma-button-mini-height);
    padding: 0 8px;
    border-radius: 4px;
    font-family: var(--figma-font-serif);
    font-size: 10px;
    font-weight: 400;
  }

  body.character-detail-mode .inventory-section-tabs {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    min-height: 63px;
    padding: 28px 16px 18px;
    border: 1px solid var(--figma-color-border-brown);
    border-radius: 0;
    background:
      linear-gradient(0deg, var(--figma-color-paper-card), var(--figma-color-paper-card)),
      var(--ns-card-bg) center / cover;
    box-shadow: var(--figma-shadow-card);
  }

  body.character-detail-mode .inventory-section-tabs::before,
  body.character-detail-mode .inventory-section-tabs::after,
  body.character-detail-mode .inventory-carry-card::before,
  body.character-detail-mode .inventory-carry-card::after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    height: var(--figma-card-strip-height);
    border: 1px solid var(--figma-color-border-brown);
    background:
      linear-gradient(0deg, var(--figma-color-card-strip), var(--figma-color-card-strip)),
      var(--ns-card-bg) center / cover;
    pointer-events: none;
  }

  body.character-detail-mode .inventory-section-tabs::before,
  body.character-detail-mode .inventory-carry-card::before {
    top: -1px;
  }

  body.character-detail-mode .inventory-section-tabs::after,
  body.character-detail-mode .inventory-carry-card::after {
    bottom: -1px;
  }

  body.character-detail-mode .inventory-section-tabs button {
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 31px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: var(--figma-color-text-primary);
    font-family: var(--figma-font-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
  }

  body.character-detail-mode .inventory-section-tabs button.active {
    color: var(--figma-color-brand-primary);
    background:
      radial-gradient(ellipse at center, var(--figma-color-gold-glow-start) 0%, var(--figma-color-gold-glow-mid) 42%, var(--figma-color-gold-glow-end) 72%);
  }

  body.character-detail-mode .inventory-section-tabs button.active::before {
    top: -5px;
    border-top-color: var(--figma-color-brand-primary);
  }

  body.character-detail-mode .inventory-carry-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    width: 100%;
    min-height: 72px;
    padding: 24px 32px;
    border: 1px solid var(--figma-color-border-brown);
    border-radius: 0;
    background:
      linear-gradient(0deg, var(--figma-color-paper-card), var(--figma-color-paper-card)),
      var(--ns-card-bg) center / cover;
    color: var(--figma-color-text-primary);
    box-shadow: var(--figma-shadow-card);
  }

  body.character-detail-mode .inventory-carry-title {
    display: flex;
    align-items: center;
    gap: 0;
  }

  body.character-detail-mode .inventory-carry-icon {
    display: none;
  }

  body.character-detail-mode .inventory-carry-title strong {
    color: var(--figma-color-text-primary);
    font-family: var(--figma-font-serif);
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
  }

  body.character-detail-mode .inventory-carry-load {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
  }

  body.character-detail-mode .inventory-carry-bar {
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #d2ad83;
  }

  body.character-detail-mode .inventory-carry-bar span {
    display: block;
    height: 100%;
    background: var(--figma-color-brand-primary);
  }

  body.character-detail-mode .inventory-carry-value {
    color: var(--figma-color-text-primary);
    font-family: var(--figma-font-serif);
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    text-align: right;
  }

  body.character-detail-mode .inventory-carry-divider {
    width: 1px;
    height: 56px;
    background: var(--figma-color-line-brown);
  }

  body.character-detail-mode .inventory-carry-coins {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: center;
  }

  body.character-detail-mode .inventory-carry-coin {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
  }

  body.character-detail-mode .inventory-carry-coin-label,
  body.character-detail-mode .inventory-carry-coin-value {
    color: var(--figma-color-brand-primary);
    font-family: var(--figma-font-primary);
    font-weight: 700;
    line-height: 1;
  }

  body.character-detail-mode .inventory-carry-coin-label {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
  }

  body.character-detail-mode .inventory-carry-coin svg {
    width: 14px;
    height: 14px;
  }

  body.character-detail-mode .inventory-carry-coin-value {
    font-size: 16px;
  }

  body.character-detail-mode .inventory-backpack-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 108px;
    gap: 16px;
    width: 100%;
    align-items: center;
  }

  body.character-detail-mode .inventory-search-field {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 44px;
    min-width: 0;
    padding: 7px 12px;
    border: 1px solid var(--figma-color-image-border);
    border-radius: 4px;
    background: rgba(255,255,255,.82);
    color: var(--figma-color-text-muted);
  }

  body.character-detail-mode .inventory-search-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }

  body.character-detail-mode .inventory-search-field input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--figma-color-text-primary);
    font-family: var(--figma-font-serif);
    font-size: 16px;
    font-weight: 400;
  }

  body.character-detail-mode .inventory-search-field input::placeholder {
    color: var(--figma-color-text-muted);
    opacity: 1;
  }

  body.character-detail-mode .inventory-backpack-search .primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 4px;
    background: var(--figma-color-brand-primary);
    color: #ffffff;
    font-family: var(--figma-font-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
  }

  body.character-detail-mode .inventory-rich-list {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 16px;
  }

  body.character-detail-mode .inventory-item-card {
    width: 100%;
    min-height: 83px;
    padding: 32px 32px 24px;
    border: 1px solid var(--figma-color-border-brown);
    border-radius: 0;
    background:
      linear-gradient(0deg, var(--figma-color-paper-card), var(--figma-color-paper-card)),
      var(--ns-card-bg) center / cover;
    box-shadow: var(--figma-shadow-card);
  }

  body.character-detail-mode .inventory-item-card.collapsed {
    padding-bottom: 24px;
  }

  body.character-detail-mode .inventory-item-head {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 42px;
  }

  body.character-detail-mode .inventory-qty {
    width: 42px;
    min-width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 8px;
    background: var(--figma-color-surface-brown-dark);
    color: #ffffff;
    font-family: var(--figma-font-primary);
    font-size: 16px;
    font-weight: 700;
  }

  body.character-detail-mode .inventory-item-title {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
  }

  body.character-detail-mode .inventory-item-title strong {
    color: var(--figma-color-brand-primary);
    font-family: var(--figma-font-serif);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  body.character-detail-mode .inventory-item-title small {
    color: var(--figma-color-text-primary);
    font-family: var(--figma-font-serif);
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.05;
  }

  body.character-detail-mode .inventory-head-status {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
  }

  body.character-detail-mode .inventory-head-status em {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 8px;
    border-radius: 6px;
    background: var(--figma-color-surface-brown-dark);
    color: #ffffff;
    font-family: var(--figma-font-primary);
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
  }

  body.character-detail-mode .inventory-collapse-btn {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    color: var(--figma-color-brand-primary);
    font-size: 20px;
  }

  body.character-detail-mode .inventory-card-body {
    gap: 16px;
    padding-top: 16px;
  }

  body.character-detail-mode .inventory-detail-line {
    gap: 8px 16px;
    color: var(--figma-color-brand-primary);
    font-family: var(--figma-font-serif);
    font-size: 14px;
    line-height: 1.2;
  }

  body.character-detail-mode .inventory-item-card p {
    color: var(--figma-color-text-primary);
    font-family: var(--figma-font-serif);
    font-size: 14px;
    line-height: 1.24;
  }

  body.character-detail-mode .inventory-card-actions {
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding-top: 8px;
  }

  body.character-detail-mode .inventory-secondary-controls,
  body.character-detail-mode .inventory-card-controls {
    align-items: center;
    gap: 16px;
  }

  body.character-detail-mode .secondary-btn-mini,
  body.character-detail-mode .secondary-btn-mini,
  body.character-detail-mode .primary-btn-mini {
    min-width: 64px;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 4px;
    font-family: var(--figma-font-serif);
    font-size: 10px;
    font-weight: 400;
    line-height: 1;
  }

  body.character-detail-mode .secondary-btn-mini,
  body.character-detail-mode .secondary-btn-mini {
    border: 1px solid #000000;
    background: transparent;
    color: var(--figma-color-text-primary);
  }

  body.character-detail-mode .primary-btn-mini {
    border: 0;
    background: var(--figma-color-brand-primary);
    color: #ffffff;
  }
}

.story-skill-hint {
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
  margin: 0 0 12px;
  padding: 0 4px;
  line-height: 1.45;
}
.story-skill-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
  max-height: 52vh;
  overflow-y: auto;
}
.story-skill-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--surface2);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  width: 100%;
  text-align: left;
}
.story-skill-row:hover {
  background: var(--surface3, #4a3120);
}
.story-skill-row.selected {
  background: rgba(201,146,26,0.18);
  border-color: var(--accent2);
}
.story-skill-name {
  font-size: 0.9rem;
  color: var(--text);
}
.story-skill-bonus {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent2);
  min-width: 32px;
  text-align: right;
}
/* Dual dice layout */
.story-dual-dice {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.story-dual-dice .dice-art {
  width: 88px;
  height: 88px;
  font-size: 1.6rem;
}
/* Dim the losing die */
.story-dual-dice .dice-art:not(.story-die-winner) {
  opacity: 0.45;
}
.story-bonus-note {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 2px 0 0;
}
.story-adv-note {
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  padding: 0 20px;
  line-height: 1.4;
  margin: 4px 0 8px;
}

/* ── Three.js Dice — inline per-element ────────────────────────────────────── */
.dice-art.has-3d {
  clip-path: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 180px !important;
  height: 180px !important;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dice-art.has-3d::before,
.dice-art.has-3d::after { display: none; }
.dice-art.has-3d canvas.die-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}
.dice-art.has-3d span,
.dice-art.has-3d strong {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Prata", Georgia, serif;
  font-size: 52px;
  color: #ffffff;
  text-shadow: 0 0 20px rgba(255,255,255,0.85), 0 2px 10px rgba(0,0,0,1);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  margin: 0;
  padding: 0;
  line-height: 1;
}
.dice-art.has-3d span.visible,
.dice-art.has-3d strong.visible { opacity: 1; }

/* ──────────────────────────────────────────────────────────────
   New Style / Pantallas template (Figma 2026-05-09)
   ────────────────────────────────────────────────────────────── */
:root {
  /* Figma New Style color tokens */
  --figma-color-brand-primary: #720000;
  --figma-color-brand-primary-dark: #4f0000;
  --figma-color-divider-red: #7f1d1d;
  --figma-color-border-brown: #76532e;
  --figma-color-surface-brown: #64422b;
  --figma-color-surface-brown-dark: #462f20;
  --figma-color-accent-gold: #92752b;
  --figma-color-accent-cream: #ffd7ad;
  --figma-color-text-primary: #090604;
  --figma-color-text-muted: #6f5d4e;
  --figma-color-text-inverse: #fff4dc;
  --figma-color-paper-base: #f7f1df;
  --figma-color-paper-shadow: #efe6d1;
  --figma-color-paper-card: rgba(255, 255, 255, .58);
  --figma-color-paper-control: rgba(255, 255, 255, .46);
  --figma-color-paper-card-strong: rgba(255,255,255,.62);
  --figma-color-paper-drawer: rgba(255,255,255,.70);
  --figma-color-paper-nav: rgba(255,255,255,.38);
  --figma-color-paper-home-top: rgba(255,255,255,.22);
  --figma-color-paper-home-bottom: rgba(255,255,255,.34);
  --figma-color-paper-sheet-top: rgba(255,255,255,.12);
  --figma-color-paper-sheet-bottom: rgba(255,255,255,.28);
  --figma-color-paper-image: rgba(255,255,255,.18);
  --figma-color-paper-empty: rgba(255,255,255,.36);
  --figma-color-line-brown: rgba(118, 83, 46, .55);
  --figma-color-overlay: rgba(9, 6, 4, .45);
  --figma-color-overlay-soft: rgba(0,0,0,.28);
  --figma-color-card-strip: rgba(231,154,68,.62);
  --figma-color-nav-paper: rgba(255,255,255,.38);
  --figma-color-page-fallback: #f5efe2;
  --figma-color-sheet-fallback: #f2eadc;
  --figma-color-brand-wash: rgba(114,0,0,.10);
  --figma-color-brown-wash: rgba(70,47,32,.12);
  --figma-color-brown-track: rgba(70,47,32,.20);
  --figma-color-brown-button: rgba(70,47,32,.78);
  --figma-color-brown-metadata: rgba(118,83,46,.10);
  --figma-color-auth-overlay-top: rgba(70,47,32,.92);
  --figma-color-auth-overlay-mid: rgba(70,47,32,.58);
  --figma-color-auth-overlay-bottom: rgba(255,255,255,.08);
  --figma-color-input-dark: #1b120c;
  --figma-color-input-placeholder: #b8b8b8;
  --figma-color-gold-glow-start: rgba(255,220,112,.62);
  --figma-color-gold-glow-mid: rgba(255,238,184,.38);
  --figma-color-gold-glow-end: rgba(255,255,255,0);
  --figma-color-image-border: #bbbbbb;

  /* Figma New Style typography tokens */
  --figma-font-heading: "Prata", Georgia, serif;
  --figma-font-serif: "Source Serif Pro", "Source Serif 4", Georgia, serif;
  --figma-font-primary: "Source Sans 3", "Roboto", Arial, sans-serif;
  --figma-font-data: "Roboto", Arial, sans-serif;
  --figma-font-size-xxs: 10px;
  --figma-font-size-xs: 12px;
  --figma-font-size-sm: 14px;
  --figma-font-size-md: 16px;
  --figma-font-size-lg: 20px;
  --figma-font-size-xl: 24px;
  --figma-font-size-display: 32px;
  --figma-font-size-auth-title: 44px;
  --figma-line-height-tight: 1.05;
  --figma-line-height-body: 1.22;
  --figma-letter-spacing-none: 0;

  /* Figma New Style spacing and sizing tokens */
  --figma-screen-width: 390px;
  --figma-screen-height: 844px;
  --figma-safe-top: 64px;
  --figma-nav-height: 73px;
  --figma-space-3xs: 2px;
  --figma-space-xxs: 4px;
  --figma-space-xs: 8px;
  --figma-space-sm: 12px;
  --figma-space-md: 16px;
  --figma-space-lg: 24px;
  --figma-space-xl: 32px;
  --figma-space-2xl: 48px;
  --figma-card-width: 358px;
  --figma-card-strip-height: 5px;
  --figma-control-height: 44px;
  --figma-button-mini-width: 80px;
  --figma-button-mini-height: 24px;
  --figma-button-regular-height: 44px;
  --figma-button-close-size: 32px;
  --figma-nav-item-height: 31px;
  --figma-tab-height: 49px;
  --figma-avatar-width: 139px;
  --figma-avatar-height: 144px;
  --figma-stat-height: 69px;
  --figma-item-art-sm: 64px;
  --figma-item-art-md: 118px;
  --figma-description-modal-height: 844px;

  /* Figma New Style radius/effect tokens */
  --figma-radius-control: 4px;
  --figma-radius-card: 8px;
  --figma-radius-tab: 9px;
  --figma-radius-drawer: 10px;
  --figma-radius-image: 16px;
  --figma-shadow-card: 0 4px 2px rgba(0,0,0,.10);
  --figma-shadow-nav: 0 -4px 2px rgba(0,0,0,.10);
  --figma-shadow-drawer: 0 -4px 12px rgba(0,0,0,.12);
  --figma-shadow-image-inset: inset -8px -8px 4px rgba(0,0,0,.25), inset 8px 8px 4px rgba(0,0,0,.25);
  --figma-divider-height: 0;
  --figma-divider-outline-width: 4px;
  --figma-divider-outline-offset: -2px;

  /* Backwards-compatible aliases for the current UI layer */
  --ns-red: var(--figma-color-brand-primary);
  --ns-red-dark: var(--figma-color-brand-primary-dark);
  --ns-brown: var(--figma-color-border-brown);
  --ns-brown-dark: var(--figma-color-surface-brown-dark);
  --ns-brown-soft: var(--figma-color-surface-brown);
  --ns-gold: var(--figma-color-accent-gold);
  --ns-parchment: var(--figma-color-paper-base);
  --ns-paper: var(--figma-color-paper-card);
  --ns-text: var(--figma-color-text-primary);
  --ns-muted: var(--figma-color-text-muted);
  --ns-line: var(--figma-color-line-brown);
  --ns-card-bg: url("src/images/dnd_card_bg.png");
  --ns-page-bg: url("src/images/page bg.png");
  --ns-sheet-bg: url("src/images/ficha bg.png");
}

@media (max-width: 760px) {
  :root {
    --bg: var(--figma-color-paper-base);
    --surface: var(--figma-color-paper-card);
    --surface2: var(--figma-color-paper-control);
    --border: var(--ns-brown);
    --field-border: var(--ns-brown);
    --accent: var(--ns-gold);
    --accent2: var(--ns-red);
    --red: var(--ns-red);
    --red-soft: var(--ns-red-dark);
    --text: var(--ns-text);
    --muted: var(--ns-muted);
  }

  html,
  body {
    min-height: 100%;
    background: var(--figma-color-paper-shadow);
  }

  body {
    color: var(--ns-text);
    font-family: "Source Sans 3", "Roboto", Arial, sans-serif;
  }

  #app {
    position: relative;
    max-width: 390px;
    min-height: 100svh;
    overflow-x: hidden;
    background:
      linear-gradient(180deg, var(--figma-color-paper-home-top), var(--figma-color-paper-home-bottom)),
      var(--ns-page-bg) center bottom / cover no-repeat,
      var(--figma-color-page-fallback);
  }

  body.character-detail-mode #app {
    background:
      linear-gradient(180deg, var(--figma-color-paper-sheet-top), var(--figma-color-paper-sheet-bottom)),
      var(--ns-sheet-bg) center top / cover no-repeat,
      var(--figma-color-sheet-fallback);
  }

  #content {
    padding: 64px 16px 118px;
  }

  body.character-detail-mode #content {
    padding: 64px 16px 104px;
  }

  #sidebar {
    width: min(390px, 100vw);
    padding: 0;
    border-top: 1px solid var(--ns-brown);
    background:
      linear-gradient(0deg, var(--figma-color-paper-nav), var(--figma-color-paper-nav)),
      var(--ns-card-bg) center / cover;
    box-shadow: var(--figma-shadow-nav);
  }

  body.character-detail-mode #sidebar {
    display: none;
  }

  #sidebar nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    min-height: 73px;
    padding: 8px 16px calc(24px + env(safe-area-inset-bottom));
  }

  #sidebar nav a,
  .detail-tabs button,
  .inventory-section-tabs button {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 31px;
    width: auto;
    padding: 8px 4px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ns-text);
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 12px;
    line-height: 1.05;
    text-align: center;
  }

  #sidebar nav a:hover,
  #sidebar nav a.active,
  .detail-tabs button.active,
  .inventory-section-tabs button.active {
    color: var(--ns-red);
    background:
      radial-gradient(ellipse at center, var(--figma-color-gold-glow-start) 0%, var(--figma-color-gold-glow-mid) 44%, var(--figma-color-gold-glow-end) 75%);
  }

  #sidebar nav a.active::before,
  .detail-tabs button.active::before,
  .inventory-section-tabs button.active::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 50%;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 7px solid var(--ns-red);
  }

  #sidebar nav .nav-icon-svg {
    display: none;
  }

  #sidebar nav a span {
    display: block;
  }

  .roster-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(var(--figma-card-width), 100%);
    gap: 32px;
    margin: 0 auto 48px;
  }

  .roster-header > div {
    flex: 1 1 auto;
    min-width: 0;
  }

  #roster-welcome {
    max-width: none;
    color: var(--ns-red);
    font-family: "Source Serif Pro", "Source Serif 4", Georgia, serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;
  }

  .profile-caption,
  #profile-caption {
    margin-top: 0;
    color: #000000;
    font-family: "Source Sans Pro", "Source Sans 3", Arial, sans-serif;
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.1;
  }

  .profile-logout {
    display: grid;
    place-items: center;
    width: 24px;
    min-width: 24px;
    height: 24px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ns-red);
    padding: 0;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
  }

  .profile-logout::after {
    content: none;
  }

  .profile-logout-icon {
    display: block;
    width: 24px;
    height: 24px;
    fill: #720000;
    color: #720000;
    pointer-events: none;
  }

  .roster-question {
    margin: 0 0 16px;
    color: var(--ns-text);
    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 16px;
  }

  .roster-grid {
    gap: 16px;
    margin-bottom: 32px;
  }

  .roster-card,
  #detail-main-sheet,
  .inventory-item-card,
  .equipment-option,
  .inventory-carry-card,
  .inventory-section-tabs,
  .detail-tab-panel,
  .detail-empty,
  .detail-note,
  .figma-list-panel {
    background:
      linear-gradient(0deg, var(--figma-color-paper-card), var(--figma-color-paper-card)),
      var(--ns-card-bg) center / cover;
    border: 1px solid var(--ns-brown);
    color: var(--ns-text);
    box-shadow: var(--figma-shadow-card);
  }

  .roster-card {
    min-height: 159px;
    padding: 32px;
    border-radius: 8px 8px 0 0;
  }

  .roster-card::before,
  .roster-card::after,
  #detail-main-sheet::before,
  #detail-main-sheet::after,
  .inventory-item-card::before,
  .inventory-item-card::after,
  .inventory-section-tabs::before {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    height: 5px;
    border: 1px solid var(--ns-brown);
    background:
      linear-gradient(0deg, var(--figma-color-card-strip), var(--figma-color-card-strip)),
      var(--ns-card-bg) center / cover;
    pointer-events: none;
  }

  .roster-card::before,
  #detail-main-sheet::before,
  .inventory-item-card::before,
  .inventory-section-tabs::before {
    top: -1px;
  }

  .roster-card::after,
  #detail-main-sheet::after,
  .inventory-item-card::after {
    bottom: -1px;
  }

  .roster-card .rc-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
  }

  .roster-card .rc-name {
    max-width: 100%;
    margin: 0 0 4px;
    color: var(--ns-red);
    font-family: "Source Serif Pro", "Source Serif 4", Georgia, serif;
    font-size: 20px;
    line-height: 1.05;
    font-weight: 400;
  }

  .roster-card .rc-sub {
    max-width: none;
    margin: 0 0 12px;
    color: var(--ns-text);
    font-family: "Source Serif Pro", "Source Serif 4", Georgia, serif;
    font-size: 10px;
    line-height: 1.1;
    font-style: italic;
    font-weight: 400;
  }

  .roster-card .rc-sub span {
    display: inline-block;
    margin: 0 4px;
    color: #110000;
    font-family: "Source Serif Pro", "Source Serif 4", Georgia, serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
  }

  .roster-card .rc-divider {
    height: 5px;
    margin: 0 0 18px;
    outline: 0;
    outline-offset: 0;
    background:
      linear-gradient(
        90deg,
        var(--figma-color-brand-primary) 0%,
        var(--figma-color-brand-primary) 18%,
        rgba(114, 0, 0, .72) 52%,
        rgba(114, 0, 0, .18) 82%,
        rgba(114, 0, 0, 0) 100%
      );
    clip-path: polygon(0 0, 100% 44%, 100% 58%, 0 100%);
  }

  .roster-card .rc-quick {
    margin: 0 0 18px;
    padding-top: 0;
    border-top: 0;
    gap: 12px;
    color: var(--ns-red);
    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 14px;
    line-height: 1;
    font-weight: 400;
  }

  .roster-card .rc-quick strong {
    color: var(--ns-red);
    font-weight: 400;
  }

  .roster-card .inline-info-icon {
    width: 16px;
    height: 16px;
    color: var(--ns-red);
  }

  .roster-card .rc-bio {
    color: var(--ns-text);
    font-family: "Source Sans Pro", "Source Sans 3", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.33;
    font-weight: 400;
  }

  .roster-card .rc-menu {
    position: relative;
    z-index: 6;
  }

  .roster-card .rc-menu-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4.5px;
    width: 24px;
    min-width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ns-red);
    cursor: pointer;
  }

  .roster-card .rc-menu-btn span {
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 999px;
    background: #720000;
  }

  .roster-card .rc-actions {
    position: absolute;
    top: 40px;
    right: 0;
    display: grid;
    min-width: 132px;
    padding: 6px;
    gap: 4px;
    border: 1px solid var(--ns-brown);
    border-radius: 4px;
    background:
      linear-gradient(0deg, var(--figma-color-paper-card), var(--figma-color-paper-card)),
      var(--ns-card-bg) center / cover;
    box-shadow: var(--figma-shadow-card);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
  }

  .roster-card:focus-within .rc-actions,
  .roster-card:hover .rc-actions {
    opacity: 0;
    pointer-events: none;
  }

  .roster-card .rc-menu.open .rc-actions {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .roster-card .rc-edit,
  .roster-card .rc-del {
    width: 100%;
    min-height: 36px;
    justify-content: flex-start;
    border-radius: 4px;
    border-color: var(--ns-brown);
    background: transparent;
    color: var(--ns-red);
    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
  }

  .roster-card .rc-edit:hover,
  .roster-card .rc-del:hover {
    background: var(--ns-red);
    color: var(--figma-color-text-inverse);
  }

  #roster-add-btn,
  #detail-header-action,
  .detail-hp-section > .primary-btn,
  .primary-btn-mini,
  .primary-btn-mini,
  .detail-xp-card .btn,
  .inventory-equipment-chooser .primary-btn {
    min-height: 44px;
    border: 1px solid var(--ns-gold);
    border-radius: 4px;
    background: var(--ns-red);
    color: var(--figma-color-text-inverse);
    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
  }

  .character-detail-header {
    position: sticky;
    top: 0;
    z-index: 60;
    grid-template-columns: 1fr 1.25fr 1fr;
    min-height: 64px;
    margin: -64px -16px 16px;
    padding: 16px;
    background: transparent;
  }

  .detail-back,
  .detail-title {
    color: var(--ns-red);
    font-family: "Prata", Georgia, serif;
  }

  .detail-back {
    font-size: 14px;
  }

  .detail-title {
    max-width: 170px;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 24px;
  }

  #detail-header-action {
    justify-self: end;
    min-height: 24px;
    padding: 4px 8px;
    border: 0;
    font-size: 10px;
    font-weight: 400;
  }

  .detail-tabs {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 75;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: min(390px, 100vw);
    min-height: 73px;
    margin: 0;
    padding: 8px 16px calc(24px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    border-top: 1px solid var(--ns-brown);
    background:
      linear-gradient(0deg, var(--figma-color-paper-nav), var(--figma-color-paper-nav)),
      var(--ns-card-bg) center / cover;
    box-shadow: var(--figma-shadow-nav);
  }

  .detail-tabs button.wide {
    grid-column: auto;
  }

  #detail-main-sheet {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0 0 16px;
    padding:
      calc(var(--figma-card-strip-height) + 32px)
      16px
      32px;
    border-radius: 8px 8px 0 0;
  }

  .character-card-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding-top: 16px;
    border-radius: 16px;
  }

  .character-card-stats .detail-xp-card {
    margin: 0;
  }

  .character-card-stats .detail-combat-grid {
    margin: 0;
  }

  .character-card-stats .detail-stealth-penalty {
    margin: 0;
  }

  .character-card-stats .detail-stealth-penalty[hidden] {
    display: none;
    margin: 0;
  }

  .detail-combat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0;
  }

  .detail-combat-grid .combat-box {
    min-height: 48px;
    padding: 4px;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  .detail-combat-grid .combat-box:not(:last-child) {
    border-right: 1px solid var(--figma-color-line-brown);
  }

  .detail-combat-grid .combat-box .lbl,
  .detail-hp-label,
  .detail-hp-sub {
    color: var(--ns-text);
    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.15;
    text-transform: none;
  }

  .detail-combat-grid .combat-box .val,
  .detail-hp-value {
    color: var(--ns-red);
    font-family: "Source Serif Pro", "Source Serif 4", Georgia, serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.15;
  }

  .xp-label,
  .xp-row {
    color: var(--ns-text);
    font-family: "Source Serif Pro", "Source Serif 4", Georgia, serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.15;
  }

  .detail-stealth-penalty {
    margin-top: 0;
    color: var(--ns-text);
    font-family: "Source Sans Pro", "Source Sans 3", Arial, sans-serif;
    font-size: 10px;
    font-style: italic;
    line-height: 1.3;
    text-align: center;
  }

  .detail-stealth-penalty:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }

  .detail-stealth-penalty::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    background: var(--ns-red);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 17h2v-6h-2v6Zm1-8a1.25 1.25 0 1 0 0-2.5A1.25 1.25 0 0 0 12 9Zm0 13a10 10 0 1 1 0-20 10 10 0 0 1 0 20Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 17h2v-6h-2v6Zm1-8a1.25 1.25 0 1 0 0-2.5A1.25 1.25 0 0 0 12 9Zm0 13a10 10 0 1 1 0-20 10 10 0 0 1 0 20Z'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .detail-stealth-penalty strong {
    color: var(--ns-red);
    font-weight: 700;
  }

  .detail-xp-card {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    margin: 0;
  }

  .detail-level-badge {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--ns-red);
    color: var(--figma-color-text-inverse);
    line-height: 1;
  }

  .detail-level-badge span {
    font-family: "Source Serif Pro", "Source Serif 4", Georgia, serif;
    font-size: 7px;
  }

  .detail-level-badge strong {
    font-family: "Source Serif Pro", "Source Serif 4", Georgia, serif;
    font-size: 13.5px;
    font-weight: 400;
  }

  .detail-xp-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .xp-track {
    height: 4px;
    border-radius: 999px;
    background: #d9d9d9;
  }

  .xp-track div {
    background: var(--ns-red);
  }

  .xp-row {
    display: flex;
    justify-content: space-between;
  }

  .detail-xp-card .primary-btn-mini {
    min-width: 114px;
    min-height: 24px;
    padding: 6px 10px;
    font-family: "Source Serif Pro", "Source Serif 4", Georgia, serif;
    font-size: 10px;
    white-space: nowrap;
  }

  .detail-section-divider {
    height: 5px;
    margin: 0;
    outline: 0;
    outline-offset: 0;
    background:
      linear-gradient(
        90deg,
        var(--figma-color-brand-primary) 0%,
        var(--figma-color-brand-primary) 20%,
        rgba(114, 0, 0, .74) 54%,
        rgba(114, 0, 0, .18) 84%,
        rgba(114, 0, 0, 0) 100%
      );
    clip-path: polygon(0 0, 100% 44%, 100% 58%, 0 100%);
  }

  .detail-profile-grid {
    display: grid;
    grid-template-columns: 139px 1fr;
    gap: 16px;
    align-items: start;
  }

  .detail-hero {
    position: relative;
    width: 139px;
    height: 144px;
    aspect-ratio: auto;
    margin: 0;
    border: 1px solid var(--ns-brown);
    border-radius: 16px;
    background:
      linear-gradient(180deg, var(--figma-color-paper-home-top), var(--figma-color-brown-track)),
      var(--ns-card-bg) center / cover;
  }

  .detail-image-upload {
    position: absolute;
    left: 8px;
    bottom: 8px;
    display: grid;
    place-items: center;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #ffffff;
    color: transparent;
    font-size: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,.18);
  }

  .detail-image-upload::after {
    content: "";
    width: 18px;
    height: 18px;
    background: var(--ns-red);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4h6l1.4 2H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3.6L9 4Zm3 5a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm0 2.1a1.9 1.9 0 1 1 0 3.8 1.9 1.9 0 0 1 0-3.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4h6l1.4 2H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3.6L9 4Zm3 5a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm0 2.1a1.9 1.9 0 1 1 0 3.8 1.9 1.9 0 0 1 0-3.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .detail-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .detail-stat-grid .stat-box {
    min-height: 67px;
    padding: 8px 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .detail-stat-grid .stat-box:not(:nth-child(3n)) {
    border-right: 1px solid var(--figma-color-line-brown);
  }

  .detail-stat-grid .stat-box:nth-child(n+4) {
    border-top: 1px solid var(--figma-color-line-brown);
  }

  .detail-stat-grid .stat-name {
    color: var(--ns-text);
    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
  }

  .detail-stat-grid .stat-mod {
    color: var(--ns-red);
    font-family: "Source Serif Pro", "Source Serif 4", Georgia, serif;
    font-size: 16px;
    font-weight: 400;
  }

  .detail-stat-grid .stat-score {
    color: var(--ns-muted);
    font-size: 12px;
  }

  #spell-stats-row {
    margin: 0;
  }

  .detail-small-heading {
    color: var(--ns-brown);
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 16px;
  }

  .detail-magic-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .detail-hp-section {
    gap: 16px;
    margin: 0;
  }

  .detail-hp-grid {
    gap: 0;
  }

  .detail-hp-card {
    min-height: 88px;
    background: transparent;
    border-radius: 0;
  }

  .detail-hp-section .detail-hp-value {
    font-family: "Source Serif Pro", "Source Serif 4", Georgia, serif;
    font-size: 32px;
    line-height: 1;
  }

  .detail-hp-section .detail-hp-sub {
    font-family: "Source Sans Pro", "Source Sans 3", Arial, sans-serif;
    font-size: 12px;
    font-style: italic;
  }

  .detail-hp-section .detail-hp-sub span {
    color: var(--ns-red);
    font-weight: 700;
  }

  .detail-bio {
    margin: 0;
    padding-top: 8px;
    border-top: 1px solid var(--ns-line);
  }

  .detail-section-title {
    color: var(--ns-brown);
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 24px;
  }

  .detail-bio p {
    color: var(--ns-text);
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 16px;
    line-height: 1.25;
  }

  .detail-tab-panel {
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
  }

  .inventory-section-shell {
    gap: 16px;
  }

  .inventory-section-tabs {
    position: relative;
    grid-template-columns: repeat(3, minmax(0, 98px));
    justify-content: center;
    gap: 16px;
    min-height: 54px;
    padding: 13px 16px 8px;
    border-radius: 8px 8px 0 0;
  }

  .inventory-section-panel {
    gap: 16px;
    padding: 0;
    background: transparent;
  }

  .inventory-section-head {
    color: var(--ns-text);
  }

  .inventory-section-head small,
  .inventory-section-copy {
    color: var(--ns-muted);
  }

  .inventory-section-head strong {
    color: var(--ns-red);
  }

  .inventory-carry-card {
    min-height: 134px;
    padding: 16px 32px;
    border-radius: 8px;
    background: var(--ns-brown-soft);
    color: var(--figma-color-accent-cream);
  }

  .inventory-carry-title strong {
    color: var(--figma-color-accent-cream);
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 32px;
    font-weight: 400;
  }

  .inventory-carry-bar {
    height: 16px;
    background: var(--ns-brown-dark);
  }

  .inventory-carry-bar span {
    background: var(--figma-color-accent-cream);
  }

  .inventory-carry-value,
  .inventory-carry-coin-label,
  .inventory-carry-coin-value {
    color: var(--figma-color-accent-cream);
    font-family: "Source Sans 3", Arial, sans-serif;
  }

  .inventory-carry-coin-value {
    font-size: 20px;
  }

  .inventory-empty-slot {
    min-height: 83px;
    border: 1px dashed var(--ns-red);
    background: var(--figma-color-paper-empty);
    color: var(--ns-text);
    box-shadow: none;
  }

  .inventory-empty-slot strong {
    color: var(--ns-red);
    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 16px;
  }

  .inventory-empty-slot span {
    color: var(--ns-text);
    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 10px;
  }

  .inventory-rich-list,
  .inventory-equipped-loadout {
    gap: 16px;
  }

  .inventory-item-card,
  .equipment-option {
    position: relative;
    min-height: 83px;
    padding: 35px 32px 32px;
    border-radius: 8px 8px 0 0;
  }

  .inventory-item-head {
    align-items: center;
    gap: 8px;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .inventory-item-title {
    gap: 2px;
  }

  .inventory-item-title strong,
  .equipment-option-title strong {
    color: var(--ns-red);
    font-family: var(--figma-font-data);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.05;
  }

  .inventory-item-title small,
  .equipment-option-title small {
    color: var(--ns-text);
    font-family: var(--figma-font-serif);
    font-size: 16px;
    font-style: italic;
    line-height: 1.05;
  }

  .inventory-collapse-btn {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 0;
    background: transparent;
    color: var(--figma-color-brand-primary);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
  }

  .inventory-card-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 16px;
  }

  .figma-red-divider {
    align-self: stretch;
    height: var(--figma-divider-height);
    outline: var(--figma-divider-outline-width) solid var(--figma-color-divider-red);
    outline-offset: var(--figma-divider-outline-offset);
  }

  .inventory-item-card.collapsed .inventory-card-body {
    display: none;
  }

  .inventory-item-card.collapsed .inventory-item-head {
    padding-bottom: 0;
  }

  .inventory-detail-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    color: var(--figma-color-brand-primary);
    font-family: var(--figma-font-serif);
    font-size: 16px;
    line-height: 1.1;
  }

  .inventory-detail-line + .inventory-detail-line {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .inventory-detail-line strong {
    font-weight: 700;
  }

  .item-art {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
    border: 3px solid var(--figma-color-image-border);
    border-radius: 0;
    background:
      linear-gradient(0deg, var(--figma-color-paper-image), var(--figma-color-paper-image)),
      var(--ns-card-bg) center / cover;
    box-shadow: var(--figma-shadow-image-inset);
  }

  .inventory-qty,
  .inventory-status-row em,
  .equipment-option b,
  .equip-chip {
    background: var(--ns-brown-dark);
    color: var(--figma-color-text-inverse);
    font-family: "Roboto", Arial, sans-serif;
    font-size: 16px;
  }

  .inventory-qty {
    display: grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 8px;
    font-weight: 700;
  }

  .inventory-status-row em {
    background: transparent;
    color: var(--ns-red);
    font-style: italic;
  }

  .inventory-item-card p,
  .equipment-option p {
    color: var(--ns-text);
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 16px;
    line-height: 1.4;
  }

  .equipment-chip-row {
    gap: 8px;
  }

  .equip-chip {
    background: var(--figma-color-brown-wash);
    color: var(--ns-red);
  }

  .inventory-card-actions {
    align-items: flex-end;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 0;
  }

  .inventory-secondary-controls {
    align-items: center;
  }

  .secondary-btn-mini,
  .secondary-btn-mini {
    min-width: 64px;
    min-height: var(--figma-button-mini-height);
    border: 0;
    border-radius: var(--figma-radius-control);
    cursor: pointer;
    font-family: var(--figma-font-serif);
    font-size: 10px;
  }

  .secondary-btn-mini {
    background: var(--figma-color-surface-brown);
    color: var(--figma-color-text-inverse);
  }

  .secondary-btn-mini {
    background: transparent;
    color: var(--figma-color-text-primary);
  }

  .inventory-card-actions > .inventory-card-controls:last-child {
    margin-left: auto;
  }

  .primary-btn-mini:not(.equipped) {
    background: var(--ns-red);
  }

  .primary-btn-mini.equipped {
    background: transparent;
    color: var(--ns-red);
  }

  .inventory-card-actions .primary-btn-mini,
  .inventory-card-actions .secondary-btn-mini,
  .inventory-card-actions .secondary-btn-mini {
    width: auto;
    min-width: 0;
    height: var(--figma-button-mini-height);
    min-height: var(--figma-button-mini-height);
    max-height: var(--figma-button-mini-height);
    padding: 0 8px;
    border-radius: var(--figma-radius-control);
    font-family: var(--figma-font-serif);
    font-size: 10px;
    font-weight: 400;
    line-height: 1;
  }

  .placeholder-shell,
  .auth-card,
  .modal-content,
  .dice-modal-card {
    background:
      linear-gradient(0deg, var(--figma-color-paper-card-strong), var(--figma-color-paper-card-strong)),
      var(--ns-card-bg) center / cover;
    color: var(--ns-text);
    border-color: var(--ns-brown);
  }

  .auth-screen {
    min-height: 100svh;
    align-items: center;
    justify-content: center;
    padding: var(--figma-safe-top) var(--figma-space-lg) var(--figma-space-xl);
    background:
      linear-gradient(180deg, var(--figma-color-auth-overlay-top), var(--figma-color-auth-overlay-mid) 42%, var(--figma-color-auth-overlay-bottom)),
      var(--ns-page-bg) center bottom / cover no-repeat,
      var(--figma-color-paper-shadow);
  }

  .auth-card {
    width: min(var(--figma-card-width), 100%);
    padding: var(--figma-space-xl) var(--figma-space-lg);
    border: 2px solid var(--figma-color-border-brown);
    border-radius: var(--figma-radius-image);
    background:
      linear-gradient(0deg, var(--figma-color-paper-drawer), var(--figma-color-paper-drawer)),
      var(--ns-card-bg) center / cover;
    color: var(--figma-color-text-primary);
    box-shadow: var(--figma-shadow-card);
  }

  .auth-kicker {
    color: var(--figma-color-border-brown);
    font-family: var(--figma-font-primary);
    font-size: var(--figma-font-size-md);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .auth-card h2 {
    margin: var(--figma-space-xs) 0 var(--figma-space-md);
    color: var(--figma-color-brand-primary);
    font-family: var(--figma-font-serif);
    font-size: var(--figma-font-size-auth-title);
    font-weight: 400;
    line-height: 1;
  }

  .auth-card p {
    margin-bottom: var(--figma-space-lg);
    color: var(--figma-color-text-primary);
    font-family: var(--figma-font-primary);
    font-size: var(--figma-font-size-md);
    line-height: 1.45;
  }

  .auth-form {
    gap: var(--figma-space-md);
  }

  .auth-form label {
    color: var(--figma-color-brand-primary);
    font-family: var(--figma-font-primary);
    font-size: var(--figma-font-size-sm);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
  }

  .auth-form input {
    min-height: 56px;
    margin-top: var(--figma-space-xs);
    border: 1px solid var(--figma-color-border-brown);
    border-radius: var(--figma-radius-card);
    background: var(--figma-color-input-dark);
    color: var(--figma-color-text-inverse);
    font-family: var(--figma-font-primary);
    font-size: var(--figma-font-size-md);
  }

  .auth-form input::placeholder {
    color: var(--figma-color-input-placeholder);
    opacity: 1;
  }

  .auth-form .primary-btn {
    margin-top: var(--figma-space-md);
    background: var(--figma-color-brand-primary);
    color: var(--figma-color-text-inverse);
    font-family: var(--figma-font-primary);
    font-size: var(--figma-font-size-md);
    font-weight: 700;
  }

  .auth-switch {
    margin-top: var(--figma-space-lg);
    color: var(--figma-color-brand-primary);
    font-family: var(--figma-font-primary);
    font-size: var(--figma-font-size-sm);
    font-weight: 700;
  }

}

.item-description-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: var(--figma-color-overlay);
}

.item-description-drawer.open {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 760px) {
  #app {
    max-width: var(--figma-screen-width);
  }

  #content {
    padding:
      var(--figma-safe-top)
      var(--figma-space-md)
      calc(var(--figma-nav-height) + var(--figma-space-2xl));
  }

  body.character-detail-mode #content {
    padding:
      var(--figma-safe-top)
      var(--figma-space-md)
      calc(var(--figma-nav-height) + var(--figma-space-xl));
  }

  #sidebar,
  .detail-tabs {
    width: min(var(--figma-screen-width), 100vw);
    box-shadow: var(--figma-shadow-nav);
  }

  #sidebar nav,
  .detail-tabs {
    min-height: var(--figma-nav-height);
    padding:
      var(--figma-space-xs)
      var(--figma-space-md)
      calc(var(--figma-space-lg) + env(safe-area-inset-bottom));
  }

  #sidebar nav a,
  .detail-tabs button,
  .inventory-section-tabs button {
    min-height: var(--figma-nav-item-height);
    padding: var(--figma-space-xs) var(--figma-space-xxs);
    border-radius: var(--figma-radius-tab);
    font-family: var(--figma-font-serif);
    font-size: var(--figma-font-size-xs);
    line-height: var(--figma-line-height-tight);
    letter-spacing: var(--figma-letter-spacing-none);
  }

  .detail-back {
    font-family: var(--figma-font-heading);
  }

  .detail-title {
    color: var(--figma-color-brand-primary);
    font-size: var(--figma-font-size-xl);
  }

  .profile-caption,
  #profile-caption,
  .roster-card .rc-sub,
  .detail-bio p,
  .inventory-item-card p,
  .equipment-option p,
  .item-description-body p {
    font-family: var(--figma-font-serif);
    letter-spacing: var(--figma-letter-spacing-none);
  }

  .roster-question,
  .roster-card .rc-quick,
  .detail-combat-grid .combat-box .lbl,
  .detail-combat-grid .combat-box .val,
  .detail-hp-label,
  .detail-hp-value,
  .inventory-empty-slot strong,
  .inventory-empty-slot span,
  .item-description-metadata,
  .item-description-rule,
  .item-description-price {
    font-family: var(--figma-font-primary);
    letter-spacing: var(--figma-letter-spacing-none);
  }

  .roster-card,
  #detail-main-sheet,
  .inventory-item-card,
  .equipment-option,
  .inventory-section-tabs {
    border-radius: var(--figma-radius-card) var(--figma-radius-card) 0 0;
    box-shadow: var(--figma-shadow-card);
  }

  .roster-card,
  .inventory-item-card,
  .equipment-option {
    padding:
      calc(var(--figma-card-strip-height) + var(--figma-space-md))
      var(--figma-space-md)
      var(--figma-space-md);
  }

  .roster-card::before,
  .roster-card::after,
  #detail-main-sheet::before,
  #detail-main-sheet::after,
  .inventory-item-card::before,
  .inventory-item-card::after,
  .inventory-section-tabs::before {
    height: var(--figma-card-strip-height);
    background:
      linear-gradient(0deg, var(--figma-color-card-strip), var(--figma-color-card-strip)),
      var(--ns-card-bg) center / cover;
  }

  #roster-add-btn,
  .detail-hp-section > .primary-btn,
  .primary-btn-mini,
  .primary-btn-mini,
  .detail-xp-card .btn,
  .inventory-equipment-chooser .primary-btn {
    min-height: var(--figma-button-regular-height);
    border-radius: var(--figma-radius-control);
    border-color: var(--figma-color-accent-gold);
    background: var(--figma-color-brand-primary);
    color: var(--figma-color-text-inverse);
  }

  .detail-profile-grid {
    grid-template-columns: var(--figma-avatar-width) 1fr;
    gap: var(--figma-space-md);
  }

  .detail-hero {
    width: var(--figma-avatar-width);
    height: var(--figma-avatar-height);
    border-radius: var(--figma-radius-image);
  }

  .detail-stat-grid .stat-box,
  .detail-combat-grid .combat-box,
  .detail-hp-card {
    min-height: var(--figma-stat-height);
    background: var(--figma-color-paper-control);
  }

  .item-art {
    width: var(--figma-item-art-sm);
    height: var(--figma-item-art-sm);
    flex-basis: var(--figma-item-art-sm);
    border-color: var(--figma-color-image-border);
    box-shadow: var(--figma-shadow-image-inset);
  }

  .item-description-drawer {
    background: var(--figma-color-overlay-soft);
  }

  .item-description-sheet {
    position: relative;
    width: min(var(--figma-screen-width), 100vw);
    min-height: min(var(--figma-description-modal-height), 100svh);
    max-height: 100svh;
    overflow-y: auto;
    padding: var(--figma-space-xl) var(--figma-space-md) var(--figma-space-2xl);
    border-radius: var(--figma-radius-drawer);
    background:
      linear-gradient(0deg, var(--figma-color-paper-drawer), var(--figma-color-paper-drawer)),
      var(--ns-page-bg) center bottom / cover no-repeat,
      var(--figma-color-paper-base);
    color: var(--figma-color-text-primary);
    box-shadow: var(--figma-shadow-drawer);
  }

  .item-description-page-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--figma-space-md);
    margin-bottom: var(--figma-space-xl);
  }

  .item-description-page-title h2 {
    color: var(--figma-color-border-brown);
    font-family: var(--figma-font-serif);
    font-size: var(--figma-font-size-display);
    font-weight: 400;
    line-height: 1;
  }

  .item-description-close {
    width: var(--figma-button-close-size);
    height: var(--figma-button-close-size);
    border: 0;
    border-radius: var(--figma-radius-card);
    background: var(--figma-color-brand-primary);
    color: var(--figma-color-text-inverse);
    cursor: pointer;
    font-family: var(--figma-font-primary);
    font-size: var(--figma-font-size-xl);
    font-weight: 700;
    line-height: 1;
  }

  .item-description-hero {
    display: grid;
    grid-template-columns: var(--figma-item-art-md) minmax(0, 1fr);
    gap: var(--figma-space-xs);
    align-items: center;
    margin-bottom: var(--figma-space-2xl);
  }

  .item-description-art .item-art {
    width: var(--figma-item-art-md);
    height: var(--figma-item-art-md);
    flex-basis: var(--figma-item-art-md);
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .item-description-summary {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--figma-space-xs);
  }

  .item-description-main-info {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--figma-space-xs);
  }

  .item-description-title-category {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
  }

  .item-description-title-category h3 {
    overflow: visible;
    color: var(--figma-color-brand-primary);
    font-family: var(--figma-font-serif);
    font-size: var(--figma-font-size-display);
    font-weight: 400;
    line-height: 1.1;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .item-description-title-category p {
    color: var(--figma-color-text-primary);
    font-family: var(--figma-font-serif);
    font-size: var(--figma-font-size-md);
    font-style: italic;
    line-height: 1.1;
  }

  .item-description-rule {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--figma-space-xs);
    align-items: start;
    overflow: visible;
    border-top: 0;
    padding-top: 0;
    color: var(--figma-color-brand-primary);
    font-size: var(--figma-font-size-sm);
    white-space: normal;
  }

  .item-description-rule strong {
    font-weight: 700;
  }

  .item-description-rule span {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .item-description-price {
    display: flex;
    min-width: 36px;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 4px;
    color: var(--figma-color-brand-primary);
    text-align: right;
  }

  .item-description-price small {
    color: var(--figma-color-text-primary);
    font-family: var(--figma-font-data);
    font-size: var(--figma-font-size-xxs);
    font-weight: 700;
  }

  .item-description-price strong {
    font-size: var(--figma-font-size-md);
  }

  .item-description-body {
    display: flex;
    flex-direction: column;
    gap: var(--figma-space-md);
  }

  .item-description-body h3 {
    border-bottom: 1px solid var(--figma-color-border-brown);
    color: var(--figma-color-border-brown);
    font-family: var(--figma-font-serif);
    font-size: var(--figma-font-size-xl);
    font-weight: 400;
    line-height: 1.15;
    padding-bottom: var(--figma-space-xxs);
  }

  .item-description-body p {
    color: var(--figma-color-text-primary);
    font-size: var(--figma-font-size-md);
    line-height: 1.22;
  }

  #detail-main-sheet .figma-red-divider.detail-section-divider {
    display: block;
    align-self: stretch;
    width: 100%;
    height: 5px;
    min-height: 5px;
    margin: 0;
    border: 0;
    outline: 0;
    outline-offset: 0;
    background:
      linear-gradient(
        90deg,
        #8b0000 0%,
        #8b0000 23%,
        rgba(139, 0, 0, .72) 56%,
        rgba(139, 0, 0, .18) 86%,
        rgba(139, 0, 0, 0) 100%
      );
    clip-path: polygon(0 0, 100% 42%, 100% 58%, 0 100%);
  }

  #detail-main-sheet .detail-combat-grid .combat-box,
  #detail-main-sheet .detail-stat-grid .stat-box,
  #detail-main-sheet .detail-hp-card {
    background: transparent;
    border-radius: 0;
  }

  #detail-main-sheet .detail-combat-grid .combat-box {
    min-height: 48px;
    padding: 4px;
  }

  #detail-main-sheet .detail-combat-grid .combat-box:not(:last-child),
  #detail-main-sheet .detail-magic-grid .combat-box:not(:last-child),
  #detail-main-sheet .detail-stat-grid .stat-box:not(:nth-child(3n)) {
    border-right: 1px solid var(--figma-color-line-brown);
  }

  #detail-main-sheet .detail-stat-grid .stat-box:nth-child(n+4) {
    border-top: 1px solid var(--figma-color-line-brown);
  }

  #detail-main-sheet .detail-xp-card .primary-btn-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    width: auto;
    min-width: 0;
    height: 24px;
    min-height: 24px;
    max-height: 24px;
    padding: 0 8px;
    border: 0;
    border-radius: 4px;
    background: #720000;
    color: #ffffff;
    cursor: pointer;
    font-family: "Source Serif Pro", "Source Serif 4", Georgia, serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
  }
}

@media (max-width: 760px) {
  body.character-detail-mode #content {
    padding:
      var(--figma-safe-top)
      var(--figma-space-md)
      calc(var(--figma-nav-height) + var(--figma-space-xl));
  }

  body.character-detail-mode .character-detail-header {
    position: relative;
    top: auto;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) 88px;
    align-items: center;
    width: min(var(--figma-card-width), 100%);
    min-height: 64px;
    margin: 0 auto 16px;
    padding: 0;
    background: transparent;
  }

  body.character-detail-mode .detail-back {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--figma-color-brand-primary);
    font-family: var(--figma-font-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
  }

  body.character-detail-mode .detail-back::first-letter {
    font-size: 34px;
    line-height: .7;
  }

  body.character-detail-mode .detail-title {
    justify-self: center;
    display: flex;
    max-width: 174px;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    overflow: hidden;
    color: var(--figma-color-brand-primary);
    font-family: var(--figma-font-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.05;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.character-detail-mode .detail-title::before {
    content: "Personaje";
    display: block;
    color: var(--figma-color-text-muted);
    font-family: var(--figma-font-serif);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
  }

  body.character-detail-mode #detail-header-action {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    height: var(--figma-button-mini-height);
    min-height: var(--figma-button-mini-height);
    max-height: var(--figma-button-mini-height);
    padding: 0 8px;
    border: 0;
    border-radius: var(--figma-radius-control);
    background: var(--figma-color-brand-primary);
    color: var(--figma-color-text-inverse);
    font-family: var(--figma-font-serif);
    font-size: 10px;
    font-weight: 400;
    line-height: 1;
  }

  body.character-detail-mode #detail-main-sheet,
  body.character-detail-mode .detail-bio {
    position: relative;
    width: min(var(--figma-card-width), 100%);
    margin-right: auto;
    margin-left: auto;
    border: 1px solid var(--figma-color-border-brown);
    border-radius: var(--figma-radius-card) var(--figma-radius-card) 0 0;
    background:
      linear-gradient(0deg, var(--figma-color-paper-card), var(--figma-color-paper-card)),
      var(--ns-card-bg) center / cover;
    box-shadow: var(--figma-shadow-card);
  }

  body.character-detail-mode .detail-bio::before,
  body.character-detail-mode .detail-bio::after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    height: var(--figma-card-strip-height);
    border: 1px solid var(--figma-color-border-brown);
    background:
      linear-gradient(0deg, var(--figma-color-card-strip), var(--figma-color-card-strip)),
      var(--ns-card-bg) center / cover;
    pointer-events: none;
  }

  body.character-detail-mode .detail-bio::before { top: -1px; }
  body.character-detail-mode .detail-bio::after { bottom: -1px; }

  body.character-detail-mode #detail-main-sheet {
    gap: 16px;
    margin-bottom: 16px;
    padding: 53px 16px 32px;
  }

  body.character-detail-mode .character-card-stats {
    gap: 16px;
    padding-top: 0;
  }

  body.character-detail-mode .detail-xp-card {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 16px;
  }

  body.character-detail-mode .detail-level-badge {
    width: 32px;
    height: 32px;
  }

  body.character-detail-mode .detail-level-badge span,
  body.character-detail-mode .detail-level-badge strong,
  body.character-detail-mode .xp-label,
  body.character-detail-mode .xp-row,
  body.character-detail-mode #detail-main-sheet .detail-xp-card .primary-btn-mini {
    font-family: var(--figma-font-serif);
    font-weight: 400;
  }

  body.character-detail-mode .detail-level-badge span { font-size: 7px; }
  body.character-detail-mode .detail-level-badge strong { font-size: 13.5px; }
  body.character-detail-mode .xp-label,
  body.character-detail-mode .xp-row { font-size: 12px; line-height: 1.05; }

  body.character-detail-mode .xp-track { height: 4px; }

  body.character-detail-mode #detail-main-sheet .detail-xp-card .primary-btn-mini {
    height: var(--figma-button-mini-height);
    min-height: var(--figma-button-mini-height);
    max-height: var(--figma-button-mini-height);
    padding: 0 8px;
    font-size: 10px;
  }

  body.character-detail-mode #detail-main-sheet .detail-combat-grid .combat-box {
    min-height: 56px;
    padding: 4px;
  }

  body.character-detail-mode #detail-main-sheet .detail-combat-grid .combat-box .lbl,
  body.character-detail-mode #detail-main-sheet .detail-stat-grid .stat-name,
  body.character-detail-mode #detail-main-sheet .detail-hp-label {
    color: var(--figma-color-text-primary);
    font-family: var(--figma-font-primary);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.15;
  }

  body.character-detail-mode #detail-main-sheet .detail-combat-grid .combat-box .val,
  body.character-detail-mode #detail-main-sheet .detail-stat-grid .stat-mod {
    color: var(--figma-color-brand-primary);
    font-family: var(--figma-font-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.15;
  }

  body.character-detail-mode #detail-main-sheet .detail-stat-grid .stat-score {
    color: var(--figma-color-text-muted);
    font-family: var(--figma-font-primary);
    font-size: 12px;
    font-weight: 400;
  }

  body.character-detail-mode .detail-stealth-penalty {
    justify-content: flex-start;
    gap: 8px;
    color: var(--figma-color-text-primary);
    font-family: var(--figma-font-primary);
    font-size: 12px;
    font-style: italic;
    line-height: 1.2;
    text-align: left;
  }

  body.character-detail-mode .detail-stealth-penalty::before {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
    background: #000000;
  }

  body.character-detail-mode #detail-main-sheet .figma-red-divider.detail-section-divider {
    height: 5px;
    min-height: 5px;
    background:
      linear-gradient(
        90deg,
        #8b0000 0%,
        #8b0000 24%,
        rgba(139, 0, 0, .74) 55%,
        rgba(139, 0, 0, .20) 86%,
        rgba(139, 0, 0, 0) 100%
      );
    clip-path: polygon(0 0, 100% 42%, 100% 58%, 0 100%);
  }

  body.character-detail-mode .detail-profile-grid {
    grid-template-columns: var(--figma-avatar-width) minmax(0, 1fr);
    gap: 16px;
    align-items: center;
  }

  body.character-detail-mode .detail-hero {
    width: var(--figma-avatar-width);
    height: var(--figma-avatar-height);
    border: 0;
    border-radius: var(--figma-radius-image);
    overflow: hidden;
  }

  body.character-detail-mode .detail-stat-grid .stat-box {
    min-height: 72px;
    padding: 8px 4px;
  }

  body.character-detail-mode .detail-magic-grid .combat-box {
    min-height: 48px;
  }

  body.character-detail-mode .detail-hp-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  body.character-detail-mode .detail-hp-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }

  body.character-detail-mode .detail-hp-card {
    min-height: 72px;
    padding: 0 4px;
  }

  body.character-detail-mode .detail-hp-section .detail-hp-value {
    color: var(--figma-color-brand-primary);
    font-family: var(--figma-font-serif);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.05;
  }

  body.character-detail-mode .detail-hp-section .detail-hp-sub {
    color: var(--figma-color-text-primary);
    font-family: var(--figma-font-primary);
    font-size: 12px;
    font-style: italic;
    line-height: 1.15;
  }

  body.character-detail-mode .detail-hp-section > .primary-btn {
    width: 100%;
    height: var(--figma-button-regular-height);
    min-height: var(--figma-button-regular-height);
    border: 0;
    border-radius: var(--figma-radius-control);
    background: var(--figma-color-brand-primary);
    color: var(--figma-color-text-inverse);
    font-family: var(--figma-font-serif);
    font-size: 16px;
    font-weight: 400;
  }

  body.character-detail-mode .detail-bio {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 184px;
    margin-bottom: 32px;
    padding: 32px 16px;
  }

  body.character-detail-mode .detail-bio[hidden] {
    display: none !important;
  }

  body.character-detail-mode .detail-bio .detail-section-title {
    display: block;
    color: var(--figma-color-brand-primary);
    font-family: var(--figma-font-serif);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.1;
  }

  body.character-detail-mode .detail-bio .detail-section-title span {
    display: none;
  }

  body.character-detail-mode #detail-bio-text,
  body.character-detail-mode #detail-bio-text p,
  body.character-detail-mode #detail-bio-text li {
    color: var(--figma-color-text-primary);
    font-family: var(--figma-font-serif);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.16;
  }

  body.character-detail-mode #detail-bio-text p {
    margin: 0;
  }

  body.character-detail-mode #detail-bio-text ul {
    margin: 0;
    padding-left: 16px;
  }

  body.character-detail-mode #detail-bio-text strong {
    color: var(--figma-color-brand-primary);
    font-weight: 700;
  }

  body.character-detail-mode .detail-tabs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    justify-content: stretch;
    padding-right: 16px;
    padding-left: 16px;
  }

  body.character-detail-mode .detail-tabs button {
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .item-description-drawer {
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, .30);
  }

  .item-description-sheet {
    width: min(var(--figma-screen-width), 100vw);
    min-height: min(760px, calc(100svh - 84px));
    max-height: calc(100svh - 84px);
    padding: 32px 16px 64px;
    border-radius: 10px 10px 0 0;
    background:
      linear-gradient(0deg, rgba(255,255,255,.70), rgba(255,255,255,.70)),
      var(--ns-page-bg) center bottom / cover no-repeat,
      var(--figma-color-paper-base);
    box-shadow: 0 -4px 12px rgba(0,0,0,.12);
  }

  .item-description-page-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 48px;
  }

  .item-description-page-title h2 {
    color: var(--figma-color-border-brown);
    font-family: var(--figma-font-serif);
    font-size: 32px;
    font-weight: 400;
    line-height: 1;
  }

  .item-description-close {
    display: grid;
    place-items: center;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: var(--figma-color-brand-primary);
    color: #ffffff;
    font-family: var(--figma-font-primary);
    font-size: 34px;
    font-weight: 400;
    line-height: .7;
  }

  .item-description-hero {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    margin-bottom: 60px;
  }

  .item-description-art .item-art {
    width: 86px;
    height: 104px;
    flex-basis: 86px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .item-description-art .item-art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .item-description-art .item-art span {
    display: none;
  }

  .item-description-summary {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
  }

  .item-description-main-info {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
  }

  .item-description-title-category {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
  }

  .item-description-title-category h3 {
    overflow: visible;
    color: var(--figma-color-brand-primary);
    font-family: var(--figma-font-serif);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.05;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .item-description-title-category p {
    color: var(--figma-color-text-primary);
    font-family: var(--figma-font-serif);
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.1;
  }

  .item-description-divider {
    width: 100%;
    height: 5px;
    margin: 4px 0 0;
    background:
      linear-gradient(
        90deg,
        #8b0000 0%,
        #8b0000 26%,
        rgba(139, 0, 0, .70) 58%,
        rgba(139, 0, 0, .18) 88%,
        rgba(139, 0, 0, 0) 100%
      );
    clip-path: polygon(0 0, 100% 42%, 100% 58%, 0 100%);
  }

  .item-description-rule {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    overflow: visible;
    border-top: 0;
    padding-top: 0;
    color: var(--figma-color-brand-primary);
    font-family: var(--figma-font-primary);
    font-size: 16px;
    line-height: 1.45;
    white-space: normal;
  }

  .item-description-rule strong {
    color: var(--figma-color-brand-primary);
    font-weight: 700;
    white-space: nowrap;
  }

  .item-description-rule span {
    display: block;
    overflow: visible;
    color: var(--figma-color-brand-primary);
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .item-description-price {
    display: flex;
    min-width: 36px;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 4px;
    color: var(--figma-color-brand-primary);
    text-align: right;
  }

  .item-description-price small {
    color: var(--figma-color-text-primary);
    font-family: var(--figma-font-data);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }

  .item-description-price strong {
    color: var(--figma-color-brand-primary);
    font-family: var(--figma-font-primary);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.05;
  }

  .item-description-body {
    position: relative;
    width: 100%;
    min-height: 118px;
    gap: 16px;
    padding: 32px 16px;
    border: 1px solid var(--figma-color-border-brown);
    border-radius: 0;
    background:
      linear-gradient(0deg, var(--figma-color-paper-card), var(--figma-color-paper-card)),
      var(--ns-card-bg) center / cover;
    box-shadow: var(--figma-shadow-card);
  }

  .item-description-body::before,
  .item-description-body::after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    height: var(--figma-card-strip-height);
    border: 1px solid var(--figma-color-border-brown);
    background:
      linear-gradient(0deg, var(--figma-color-card-strip), var(--figma-color-card-strip)),
      var(--ns-card-bg) center / cover;
    pointer-events: none;
  }

  .item-description-body::before { top: -1px; }
  .item-description-body::after { bottom: -1px; }

  .item-description-body h3 {
    border-bottom: 0;
    padding-bottom: 0;
    color: var(--figma-color-brand-primary);
    font-family: var(--figma-font-serif);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.1;
  }

  .item-description-body p {
    color: var(--figma-color-text-primary);
    font-family: var(--figma-font-serif);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.16;
  }
}

/* ── Reusable UI atoms — buttons, inputs and caret ───────────────────────── */
.primary-btn,
.secondary-btn,
.ghost-btn,
.primary-btn-mini,
.secondary-btn-mini,
.ghost-btn-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 0;
  border-radius: var(--figma-radius-control, 4px);
  cursor: pointer;
  font-family: var(--figma-font-serif, Georgia, serif);
  font-weight: 400;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.primary-btn:disabled,
.secondary-btn:disabled,
.ghost-btn:disabled,
.primary-btn-mini:disabled,
.secondary-btn-mini:disabled,
.ghost-btn-mini:disabled,
.primary-btn[aria-disabled="true"],
.secondary-btn[aria-disabled="true"],
.ghost-btn[aria-disabled="true"],
.primary-btn-mini[aria-disabled="true"],
.secondary-btn-mini[aria-disabled="true"],
.ghost-btn-mini[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .45;
}

.primary-btn,
.secondary-btn,
.ghost-btn {
  height: var(--figma-button-regular-height, 44px);
  min-height: var(--figma-button-regular-height, 44px);
  padding: 0 12px;
  font-size: 16px;
}

.auth-form > .primary-btn,
.inventory-equipment-chooser > .primary-btn {
  width: 100%;
}

.primary-btn-mini,
.secondary-btn-mini,
.ghost-btn-mini {
  height: var(--figma-button-mini-height, 24px);
  min-height: var(--figma-button-mini-height, 24px);
  max-height: var(--figma-button-mini-height, 24px);
  padding: 0 8px;
  font-size: 10px;
}

.primary-btn,
.primary-btn-mini {
  border: 0;
  background: var(--figma-color-brand-primary, #720000);
  color: #ffffff;
}

.secondary-btn,
.secondary-btn-mini {
  border: 1px solid var(--figma-color-text-primary, #090604);
  background: transparent;
  color: var(--figma-color-text-primary, #090604);
}

.ghost-btn,
.ghost-btn-mini {
  border: 0;
  background: transparent;
  color: var(--figma-color-brand-primary, #720000);
}

.input {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-width: 0;
  min-height: var(--figma-button-regular-height, 44px);
  border: 1px solid var(--figma-color-image-border, #bbbbbb);
  border-radius: var(--figma-radius-control, 4px);
  background: rgba(255,255,255,.82);
  color: var(--figma-color-text-muted, #6f5d4e);
}

.input-icon {
  gap: 4px;
  padding: 7px 12px;
}

.input-icon svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.input-control {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: var(--figma-button-regular-height, 44px);
  border: 1px solid var(--figma-color-image-border, #bbbbbb);
  border-radius: var(--figma-radius-control, 4px);
  outline: 0;
  background: rgba(255,255,255,.82);
  color: var(--figma-color-text-primary, #090604);
  font-family: var(--figma-font-serif, Georgia, serif);
  font-size: 16px;
  font-weight: 400;
  padding: 0 12px;
}

textarea.input-control {
  min-height: 96px;
  height: auto;
  padding: 12px;
  resize: vertical;
}

.input .input-control {
  height: auto;
  min-height: 0;
  border: 0;
  background: transparent;
  padding: 0;
}

.input-control::placeholder {
  color: var(--figma-color-text-muted, #6f5d4e);
  opacity: 1;
}

.auth-form input.input-control {
  min-height: 56px;
  margin-top: var(--figma-space-xs);
  border: 1px solid var(--figma-color-border-brown);
  border-radius: var(--figma-radius-card);
  background: var(--figma-color-input-dark);
  color: var(--figma-color-text-inverse);
  font-family: var(--figma-font-primary);
  font-size: var(--figma-font-size-md);
}

.auth-form input.input-control::placeholder {
  color: var(--figma-color-input-placeholder);
}

.caret-btn {
  display: grid;
  place-items: center;
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  max-height: 24px;
  flex: 0 0 24px;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--figma-color-brand-primary, #720000);
  cursor: pointer;
}

.caret-icon {
  display: block;
  width: 12px;
  height: 6px;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform-origin: center;
}

.caret-btn[aria-expanded="false"] .caret-icon {
  transform: rotate(180deg);
}

.item-description-close,
.item-use-close {
  width: var(--figma-button-close-size, 32px);
  min-width: var(--figma-button-close-size, 32px);
  height: var(--figma-button-close-size, 32px);
  min-height: var(--figma-button-close-size, 32px);
  max-height: var(--figma-button-close-size, 32px);
  border: 0;
  border-radius: var(--figma-radius-control, 4px);
  background: var(--figma-color-brand-primary, #720000);
  color: #ffffff;
  padding: 0;
}

body.character-detail-mode #detail-header-action.primary-btn-mini {
  justify-self: end;
  width: auto;
  min-width: 0;
}

body.character-detail-mode .inventory-backpack-search .primary-btn {
  height: var(--figma-button-regular-height, 44px);
  min-height: var(--figma-button-regular-height, 44px);
}

body.character-detail-mode .caret-btn.inventory-collapse-btn {
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  max-height: 24px;
  flex-basis: 24px;
  font-size: 0;
}

body.character-detail-mode .inventory-card-actions .primary-btn-mini,
body.character-detail-mode .inventory-card-actions .secondary-btn-mini,
body.character-detail-mode .inventory-card-actions .ghost-btn-mini {
  min-width: 64px;
}

#roster-add-btn.primary-btn,
.detail-hp-section > .primary-btn,
.inventory-equipment-chooser > .primary-btn {
  height: var(--figma-button-regular-height, 44px);
  min-height: var(--figma-button-regular-height, 44px);
  padding: 0 12px;
  border: 0;
  border-radius: var(--figma-radius-control, 4px);
  background: var(--figma-color-brand-primary, #720000);
  color: #ffffff;
  font-family: var(--figma-font-serif, Georgia, serif);
  font-size: 16px;
  font-weight: 400;
}

body.character-detail-mode .primary-btn-mini,
body.character-detail-mode .secondary-btn-mini,
body.character-detail-mode .ghost-btn-mini {
  height: var(--figma-button-mini-height, 24px);
  min-height: var(--figma-button-mini-height, 24px);
  max-height: var(--figma-button-mini-height, 24px);
  padding: 0 8px;
  font-family: var(--figma-font-serif, Georgia, serif);
  font-size: 10px;
  font-weight: 400;
}

body.character-detail-mode .primary-btn-mini {
  border: 0;
  background: var(--figma-color-brand-primary, #720000);
  color: #ffffff;
}

body.character-detail-mode .secondary-btn-mini {
  border: 1px solid var(--figma-color-text-primary, #090604);
  background: transparent;
  color: var(--figma-color-text-primary, #090604);
}

body.character-detail-mode .ghost-btn-mini {
  border: 0;
  background: transparent;
  color: var(--figma-color-brand-primary, #720000);
}

button.primary-btn,
button.primary-btn-mini {
  border-color: transparent;
  background: var(--figma-color-brand-primary, #720000);
  color: #ffffff;
}

button.secondary-btn,
button.secondary-btn-mini {
  border-color: var(--figma-color-text-primary, #090604);
  color: var(--figma-color-text-primary, #090604);
}

button.ghost-btn,
button.ghost-btn-mini {
  border-color: transparent;
  color: var(--figma-color-brand-primary, #720000);
}

button.primary-btn :where(svg, .add-icon, [class*="icon"]),
button.primary-btn-mini :where(svg, .add-icon, [class*="icon"]),
button.secondary-btn :where(svg, .add-icon, [class*="icon"]),
button.secondary-btn-mini :where(svg, .add-icon, [class*="icon"]),
button.ghost-btn :where(svg, .add-icon, [class*="icon"]),
button.ghost-btn-mini :where(svg, .add-icon, [class*="icon"]) {
  color: currentColor;
  fill: currentColor;
  stroke: currentColor;
}

#roster-add-btn.primary-btn .add-icon {
  color: currentColor;
  fill: currentColor;
  stroke: currentColor;
}

body.character-detail-mode #detail-header-action.primary-btn-mini,
body.character-detail-mode .detail-hp-section > button.primary-btn {
  color: #ffffff;
}

button.primary-btn[class*="btn-"],
button.secondary-btn[class*="btn-"],
button.ghost-btn[class*="btn-"] {
  height: var(--figma-button-regular-height, 44px);
  min-height: var(--figma-button-regular-height, 44px);
  padding: 0 12px;
  border-radius: var(--figma-radius-control, 4px);
  font-family: var(--figma-font-serif, Georgia, serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

button.primary-btn-mini[class*="btn-"],
button.secondary-btn-mini[class*="btn-"],
button.ghost-btn-mini[class*="btn-"] {
  height: var(--figma-button-mini-height, 24px);
  min-height: var(--figma-button-mini-height, 24px);
  max-height: var(--figma-button-mini-height, 24px);
  padding: 0 8px;
  border-radius: var(--figma-radius-control, 4px);
  font-family: var(--figma-font-serif, Georgia, serif);
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
}

button.primary-btn[class*="btn-"],
button.primary-btn-mini[class*="btn-"] {
  border: 0;
  background: var(--figma-color-brand-primary, #720000);
  color: #ffffff;
}

button.secondary-btn[class*="btn-"],
button.secondary-btn-mini[class*="btn-"] {
  border: 1px solid var(--figma-color-text-primary, #090604);
  background: transparent;
  color: var(--figma-color-text-primary, #090604);
}

button.ghost-btn[class*="btn-"],
button.ghost-btn-mini[class*="btn-"] {
  border: 0;
  background: transparent;
  color: var(--figma-color-brand-primary, #720000);
}

.form-group input.input-control,
.form-group select.input-control,
.form-group textarea.input-control {
  min-height: var(--figma-button-regular-height, 44px);
  border: 1px solid var(--figma-color-image-border, #bbbbbb);
  border-radius: var(--figma-radius-control, 4px);
  background: rgba(255,255,255,.82);
  color: var(--figma-color-text-primary, #090604);
  font-family: var(--figma-font-serif, Georgia, serif);
  font-size: 16px;
  font-weight: 400;
  padding: 0 12px;
}

.form-group textarea.input-control {
  min-height: 96px;
  padding: 12px;
}

/* Character creation wizard — Figma DnD Character Engine / Creación de personaje */
#wizard-overlay {
  --cc-red: #720000;
  --cc-red-soft: #a26f6f;
  --cc-progress-off: #c7c7c7;
  --cc-button-off: #c2c2c2;
  --cc-button-off-text: #838383;
  --cc-muted: #777777;
  --cc-text: #000000;
  --cc-input-text: #555555;
  --cc-border-brown: #76532e;
  --cc-strip: rgba(231, 154, 68, .7);
  --cc-shadow: 0 4px 2px rgba(0, 0, 0, .1);
  --cc-item-shadow: 3px 4px 2px rgba(0, 0, 0, .1);
  --cc-serif: "Source Serif Pro", Georgia, serif;
  --cc-sans: "Source Sans Pro", "Source Sans 3", Arial, sans-serif;
  --cc-brand: "Prata", Georgia, serif;
  --cc-control-radius: 4px;
  --cc-card-w: 358px;
}

#wizard-overlay.open {
  align-items: stretch;
  justify-content: center;
  background: rgba(0, 0, 0, .62);
  padding: 0;
}

#wizard-box {
  width: min(390px, 100vw);
  max-width: 390px;
  min-height: 100svh;
  max-height: none;
  margin: 0 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  padding: 64px 16px 32px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background:
    linear-gradient(rgba(255, 255, 255, .02), rgba(255, 255, 255, .02)),
    url("src/images/page bg.png") center / cover no-repeat;
  color: var(--cc-text);
}

#wizard-box .wiz-shell-head,
#wizard-box .wiz-body,
#wizard-box .equipment-flow,
#wizard-box .review-block,
#wizard-box .cc-attribute-section {
  width: 100%;
}

#wizard-box .wiz-shell-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

#wizard-box .wiz-title,
#wizard-box .wiz-nav {
  display: none !important;
}

#wizard-box .wiz-sub {
  width: 100%;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  align-items: end;
  padding: 16px;
  gap: 0;
}

#wizard-box .wiz-top-back {
  width: 64px;
  min-width: 64px;
  height: 24px;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--cc-red);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--cc-brand);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}

#wizard-box .wiz-back-icon {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  font-family: var(--cc-serif);
  font-size: 34px;
  line-height: 20px;
  transform: translateY(-1px);
}

#wizard-box .wiz-heading {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--cc-serif);
  line-height: normal;
  white-space: nowrap;
}

#wizard-box .wiz-heading span,
#wizard-box .wiz-heading strong {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
}

#wizard-box .wiz-heading span {
  color: var(--cc-muted);
  font-size: 12px;
}

#wizard-box .wiz-heading strong {
  color: var(--cc-red);
  font-size: 14px;
}

#wizard-box #wiz-btn-next.primary-btn-mini {
  justify-self: end;
  width: auto;
  min-width: 64px;
  height: 24px;
  min-height: 24px;
  max-height: 24px;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--cc-control-radius);
  background: var(--cc-red);
  color: #ffffff;
  font-family: var(--cc-serif);
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
}

#wizard-box #wiz-btn-next.primary-btn-mini:disabled,
#wizard-box #wiz-btn-next.primary-btn-mini[aria-disabled="true"] {
  background: var(--cc-button-off);
  color: var(--cc-button-off-text);
  opacity: 1;
  cursor: not-allowed;
}

#wizard-box .wiz-dots {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  align-items: start;
  gap: 8px;
}

#wizard-box .wiz-dots .wiz-line {
  width: 100%;
  height: 3px;
  min-height: 3px;
  border: 0;
  border-radius: 100px;
  background: var(--cc-progress-off);
}

#wizard-box .wiz-dots .wiz-line.done {
  background: var(--cc-red-soft);
}

#wizard-box .wiz-dots .wiz-line.active {
  background: var(--cc-red);
}

#wizard-box .wiz-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

#wizard-box .wiz-form-card,
#wizard-box .wiz-option-card,
#wizard-box .review-card,
#wizard-box .wiz-skill-card,
#wizard-box .wiz-spell-card,
#wizard-box .equipment-option,
#wizard-box .attr-suggestion-card,
#wizard-box #wpb-grid,
#wizard-box .hp-review-card {
  position: relative;
  width: 100%;
  max-width: var(--cc-card-w);
  overflow: hidden;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)),
    url("src/images/dnd_card_bg.png") center / cover no-repeat,
    #ffffff;
  box-shadow: var(--cc-shadow);
  color: var(--cc-text);
}

#wizard-box .wiz-form-card::before,
#wizard-box .wiz-option-card::before,
#wizard-box .review-card::before,
#wizard-box .wiz-skill-card::before,
#wizard-box .wiz-spell-card::before,
#wizard-box .equipment-option::before,
#wizard-box .attr-suggestion-card::before,
#wizard-box #wpb-grid::before,
#wizard-box .hp-review-card::before,
#wizard-box .wiz-form-card::after,
#wizard-box .wiz-option-card::after,
#wizard-box .review-card::after,
#wizard-box .wiz-skill-card::after,
#wizard-box .wiz-spell-card::after,
#wizard-box .equipment-option::after,
#wizard-box .attr-suggestion-card::after,
#wizard-box #wpb-grid::after,
#wizard-box .hp-review-card::after {
  content: "";
  position: absolute;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 5px;
  border: 1px solid var(--cc-border-brown);
  background:
    linear-gradient(var(--cc-strip), var(--cc-strip)),
    url("src/images/dnd_card_bg.png") center / cover no-repeat;
  pointer-events: none;
}

#wizard-box .wiz-form-card::before,
#wizard-box .wiz-option-card::before,
#wizard-box .review-card::before,
#wizard-box .wiz-skill-card::before,
#wizard-box .wiz-spell-card::before,
#wizard-box .equipment-option::before,
#wizard-box .attr-suggestion-card::before,
#wizard-box #wpb-grid::before,
#wizard-box .hp-review-card::before {
  top: 0;
}

#wizard-box .wiz-form-card::after,
#wizard-box .wiz-option-card::after,
#wizard-box .review-card::after,
#wizard-box .wiz-skill-card::after,
#wizard-box .wiz-spell-card::after,
#wizard-box .equipment-option::after,
#wizard-box .attr-suggestion-card::after,
#wizard-box #wpb-grid::after,
#wizard-box .hp-review-card::after {
  bottom: 0;
}

#wizard-box .wiz-form-card > *,
#wizard-box .wiz-option-card > *,
#wizard-box .review-card > *,
#wizard-box .wiz-skill-card > *,
#wizard-box .wiz-spell-card > *,
#wizard-box .equipment-option > *,
#wizard-box .attr-suggestion-card > *,
#wizard-box #wpb-grid > *,
#wizard-box .hp-review-card > * {
  position: relative;
  z-index: 1;
}

#wizard-box .wiz-form-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 16px;
}

#wizard-box .form-group {
  position: relative;
  width: 100%;
  margin: 0;
}

#wizard-box .form-group label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

#wizard-box .form-group input.input-control,
#wizard-box .form-group select.input-control,
#wizard-box .form-group textarea.input-control,
#wizard-box .form-group input,
#wizard-box .form-group select,
#wizard-box .form-group textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid #c2c2c2;
  border-radius: var(--cc-control-radius);
  background: #ffffff;
  color: var(--cc-input-text);
  font-family: var(--cc-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  padding: 7px 12px;
  box-shadow: none;
}

#wizard-box .form-group textarea.input-control,
#wizard-box .form-group textarea {
  min-height: 92px;
}

#wizard-box .form-group select {
  color: var(--cc-input-text);
}

#wizard-box .choice-copy {
  margin-top: 8px;
  color: var(--cc-text);
  font-family: var(--cc-sans);
  font-size: 10px;
  line-height: 1.25;
}

#wizard-box .wiz-option-grid,
#wizard-box .race-family-list,
#wizard-box .race-family-grid,
#wizard-box .equipment-card-list,
#wizard-box .wiz-check-grid,
#wizard-box #wiz-cantrip-grid,
#wizard-box #wiz-spell-grid {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#wizard-box .race-family-group,
#wizard-box .equipment-group,
#wizard-box .wiz-spell-level-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#wizard-box .race-family-group + .race-family-group,
#wizard-box .equipment-group + .equipment-group,
#wizard-box .wiz-spell-level-group + .wiz-spell-level-group {
  margin-top: 16px;
}

#wizard-box .race-family-title,
#wizard-box .pdf-section-title,
#wizard-box .card-title,
#wizard-box .cc-section-head h2,
#wizard-box .equipment-group-head span,
#wizard-box .wiz-spell-level-label {
  margin: 0;
  color: var(--cc-red);
  font-family: var(--cc-serif);
  font-size: 24px;
  font-weight: 400;
  line-height: normal;
}

#wizard-box .race-family-title::after,
#wizard-box .skill-title-row::after,
#wizard-box .equipment-group-head::after {
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  margin-top: 8px;
  background: linear-gradient(90deg, var(--cc-red) 0%, var(--cc-red) 31%, rgba(114, 0, 0, .45) 67%, rgba(114, 0, 0, 0) 100%);
}

#wizard-box .race-family-note,
#wizard-box .pdf-help,
#wizard-box .cc-helper {
  width: 100%;
  margin: 0;
  color: var(--cc-text);
  font-family: "Source Sans 3", var(--cc-sans);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.25;
}

#wizard-box .wiz-option-card,
#wizard-box .review-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
  cursor: pointer;
}

#wizard-box .review-card {
  cursor: default;
}

#wizard-box .wiz-option-card.selected,
#wizard-box .review-card.selected,
#wizard-box .equipment-option.selected,
#wizard-box .wiz-spell-card.selected,
#wizard-box .wiz-skill-card.selected {
  box-shadow: var(--cc-item-shadow);
}

#wizard-box .oc-name,
#wizard-box .review-card h2,
#wizard-box .equipment-option-title strong,
#wizard-box .wsp-name,
#wizard-box .wsk-name {
  position: relative;
  width: 100%;
  margin: 0;
  color: var(--cc-red);
  font-family: var(--cc-serif);
  font-size: 20px;
  font-weight: 400;
  line-height: normal;
}

#wizard-box .wiz-option-card .oc-name {
  padding-right: 32px;
}

#wizard-box .wiz-option-card .oc-name::after {
  content: "";
  position: absolute;
  right: 0;
  top: 9px;
  width: 12px;
  height: 6px;
  background: var(--cc-red);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

#wizard-box .oc-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  width: 100%;
  min-height: 12px;
}

#wizard-box .oc-badge,
#wizard-box .oc-badge.green,
#wizard-box .oc-badge.blue,
#wizard-box .oc-badge.purple,
#wizard-box .wsp-school,
#wizard-box .equipment-option-title small {
  border: 0 !important;
  background: transparent !important;
  color: #000000 !important;
  padding: 0 !important;
  font-family: var(--cc-serif);
  font-size: 10px;
  font-style: italic;
  font-weight: 400;
  line-height: normal;
  white-space: normal;
}

#wizard-box .oc-badge + .oc-badge::before,
#wizard-box .wsp-school::before {
  content: "•";
  display: inline-block;
  margin: 0 6px;
  color: #110000;
  font-style: normal;
}

#wizard-box .oc-desc,
#wizard-box .review-card p,
#wizard-box .wsp-desc,
#wizard-box .wsk-desc,
#wizard-box .equipment-option p,
#wizard-box .hp-review-card p {
  width: 100%;
  margin: 0;
  color: var(--cc-text);
  font-family: var(--cc-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
}

#wizard-box .oc-desc::before,
#wizard-box .review-card p::before {
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  margin: 8px 0;
  background: linear-gradient(90deg, var(--cc-red) 0%, var(--cc-red) 31%, rgba(114, 0, 0, .45) 67%, rgba(114, 0, 0, 0) 100%);
}

#wizard-box .equipment-flow {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

#wizard-box .class-summary-card {
  min-height: 78px;
  justify-content: center;
}

#wizard-box .equipment-group-head,
#wizard-box .skill-title-row,
#wizard-box .cc-section-head {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  color: var(--cc-red);
}

#wizard-box .equipment-group-head {
  flex-wrap: wrap;
}

#wizard-box .equipment-group-head em {
  display: none;
}

#wizard-box .equipment-group-head strong,
#wizard-box .skill-count,
#wizard-box .skill-count strong,
#wizard-box .cc-section-head span,
#wizard-box .cc-section-head strong {
  color: var(--cc-red);
  font-family: "Source Sans 3", var(--cc-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

#wizard-box .equipment-group-head::after {
  flex-basis: 100%;
}

#wizard-box .equipment-option,
#wizard-box .wiz-spell-card,
#wizard-box .wiz-skill-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 78px;
  padding: 16px;
  box-shadow: var(--cc-item-shadow);
  cursor: pointer;
}

#wizard-box .equipment-option-main,
#wizard-box .wsp-header,
#wizard-box .wsk-header {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 8px;
}

#wizard-box .equipment-option-main::after,
#wizard-box .wsp-header::after,
#wizard-box .wsk-header::after {
  content: "";
  width: 12px;
  height: 6px;
  margin-left: auto;
  background: var(--cc-red);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  flex: 0 0 auto;
}

#wizard-box .equipment-check,
#wizard-box .wsp-cb,
#wizard-box .wsk-cb {
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  margin: 0;
  border: 1px solid var(--cc-red);
  border-radius: var(--cc-control-radius);
  background: #ffffff;
  color: #ffffff;
  display: grid;
  place-items: center;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--cc-sans);
  font-size: 14px;
  line-height: 1;
}

#wizard-box .equipment-option.selected .equipment-check,
#wizard-box .wiz-spell-card.selected .wsp-cb,
#wizard-box .wiz-skill-card.selected .wsk-cb,
#wizard-box .wsp-cb:checked,
#wizard-box .wsk-cb:checked {
  background: var(--cc-red);
}

#wizard-box .equipment-option.selected .equipment-check::before,
#wizard-box .wiz-spell-card.selected .wsp-cb::before,
#wizard-box .wiz-skill-card.selected .wsk-cb::before,
#wizard-box .wsp-cb:checked::before,
#wizard-box .wsk-cb:checked::before {
  content: "✓";
  color: #ffffff;
  font-size: 14px;
  line-height: 1;
}

#wizard-box .equipment-option-title {
  min-width: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}

#wizard-box .equipment-option-title small {
  order: 2;
}

#wizard-box .equipment-option-title strong {
  order: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#wizard-box .equipment-option b {
  display: none;
}

#wizard-box .equipment-option:not(.selected) p,
#wizard-box .equipment-option:not(.selected) .equipment-chip-row,
#wizard-box .equipment-option:not(.selected) .equipment-pack-grid {
  display: none;
}

#wizard-box .equipment-option.selected {
  outline: 1px solid var(--cc-red);
  outline-offset: -1px;
}

#wizard-box .equipment-chip-row,
#wizard-box .equipment-pack-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#wizard-box .equipment-chip-row span,
#wizard-box .equipment-pack-grid span {
  color: var(--cc-red);
  font-family: var(--cc-serif);
  font-size: 10px;
  font-weight: 400;
}

#wizard-box .wiz-spell-card.disabled,
#wizard-box .wiz-skill-card.disabled,
#wizard-box .equipment-option.disabled {
  opacity: .5;
  pointer-events: none;
}

#wizard-box .wsp-header,
#wizard-box .wsk-header {
  align-items: center;
}

#wizard-box .wsp-name,
#wizard-box .wsk-name {
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#wizard-box .wsp-school {
  width: auto;
  flex: 0 1 auto;
}

#wizard-box .wsp-desc,
#wizard-box .wsk-desc {
  padding-left: 32px;
}

#wizard-box .attr-suggestion-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 16px;
}

#wizard-box .attr-suggestion-grid {
  display: contents;
}

#wizard-box .attr-suggestion-grid span {
  min-height: 53px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px;
  border-radius: 8px;
  color: var(--cc-red);
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  text-align: center;
}

#wizard-box .attr-suggestion-grid b {
  color: #000000;
  font-family: var(--cc-serif);
  font-size: 14px;
  font-weight: 400;
}

#wizard-box .attr-suggestion-card .primary-btn {
  grid-column: 1 / -1;
  width: 100%;
  height: 44px;
  min-height: 44px;
  border: 0;
  border-radius: var(--cc-control-radius);
  background: var(--cc-red);
  color: #ffffff;
  font-family: var(--cc-serif);
  font-size: 16px;
  font-weight: 400;
}

#wizard-box .cc-attribute-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#wizard-box #wpb-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 16px;
}

#wizard-box #wpb-grid .pb-stat {
  min-height: 53px;
  padding: 8px 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

#wizard-box .pb-name {
  color: #000000;
  font-family: var(--cc-serif);
  font-size: 14px;
  font-weight: 400;
  text-align: center;
}

#wizard-box .pb-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

#wizard-box .pb-val {
  color: var(--cc-red);
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  min-width: 18px;
  text-align: center;
}

#wizard-box .pb-btn {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--cc-red);
  color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 13px;
  line-height: 1;
}

#wizard-box .pb-btn:first-child {
  background: #bfc8c9;
}

#wizard-box .pb-cost {
  display: none;
}

#wizard-box .pb-formula {
  width: 100%;
  color: var(--cc-text);
  font-family: "Source Sans 3", var(--cc-sans);
  font-size: 8px;
  line-height: 1.15;
  text-align: center;
}

#wizard-box .pb-race {
  color: var(--cc-red);
  font-weight: 700;
}

#wizard-box .hp-review-card {
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

#wizard-box .hp-die-art {
  width: 96px;
  height: 96px;
  border: 2px solid var(--cc-red);
  border-radius: 16px;
  background: rgba(114, 0, 0, .08);
  color: var(--cc-red);
  font-family: var(--cc-serif);
  font-size: 38px;
}

#wizard-box .hp-roll-summary {
  color: var(--cc-text);
  font-family: var(--cc-sans);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}

@media (max-width: 430px) {
  #wizard-overlay.open {
    background: transparent;
  }

  #wizard-box {
    width: 100vw;
    max-width: 100vw;
  }
}