@layer base {
  :root {
    --character-jade-paper: #f4f7ed;
    --character-paper: #faf7e9;
    --character-warm-paper: #fbf7e8;
    --character-soft-paper: #f0f2e8;
    --character-white: #fffdf3;
    --character-button-paper: #faf7e9;
    --character-button-line: #c8cba9;
    --character-button-ink: #6d795c;
    --character-selection-paper: #f5e8c6;
    --character-selection-ink: #70532e;
    --character-memorial-paper: #f4eee7;
    --character-memorial-shadow: #e9e6e0;
    --character-line-jade: #cddfc6;
    --character-line-warm: #c0b28c;
    --character-jade: #436f57;
    --character-jade-soft: #64765b;
    --character-ink: #67564d;
    --character-ink-soft: #786c5b;
    --character-muted: #788975;
    --character-heading: #7b5a36;
    --character-amber: #8b6b3b;
    --character-story-ink: #96713b;
    --character-title-current: #90764c;
    --character-copper: #8d5a42;
    --character-copper-light: #d0a071;
    --character-copper-deep: #936047;
    --character-disabled-paper: #d8d6c9;
    --character-disabled-line: #bfbfb5;
    --character-disabled-ink: #7d806f;
    --character-selection-line: #aa8b55;
    --character-selection-rim: #dfc28f;
    --character-focus: #bf9957;
    --character-track: #d8e1d1;
    --character-progress: #78997d;
    --character-progress-end: #b2a36a;
    --character-selection-shadow: inset 0 0 0 2px var(--character-selection-rim);
    --character-memorial-ink: var(--character-ink);
  }
  html[data-theme] {
    --character-jade-paper: var(--surface);
    --character-paper: var(--surface);
    --character-warm-paper: var(--surface);
    --character-soft-paper: var(--surface);
    --character-white: var(--surface);
    --character-button-paper: var(--button-bg);
    --character-button-line: var(--line);
    --character-button-ink: var(--button-text);
    --character-selection-paper: var(--primary-bg);
    --character-selection-ink: var(--primary-text);
    --character-memorial-paper: var(--danger-bg);
    --character-memorial-shadow: var(--danger-bg);
    --character-line-jade: var(--line);
    --character-line-warm: var(--line);
    --character-jade: var(--heading);
    --character-jade-soft: var(--muted);
    --character-ink: var(--text);
    --character-ink-soft: var(--muted);
    --character-muted: var(--muted);
    --character-heading: var(--heading);
    --character-amber: var(--heading);
    --character-story-ink: var(--text);
    --character-title-current: var(--text);
    --character-copper: var(--line);
    --character-copper-light: var(--button-bg);
    --character-copper-deep: var(--button-bg);
    --character-disabled-paper: var(--surface);
    --character-disabled-line: var(--line);
    --character-disabled-ink: var(--muted);
    --character-selection-line: var(--line);
    --character-selection-rim: var(--line);
    --character-focus: var(--accent);
    --character-track: var(--surface);
    --character-progress: var(--accent);
    --character-progress-end: var(--accent);
    --character-selection-shadow: none;
    --character-memorial-ink: var(--danger-text);
  }
  .region-choices {
    grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  }
  .combat-style-block {
    margin: 0 0 13px;
    padding: 12px;
    border: 1px solid var(--character-line-jade);
    background: var(--character-jade-paper);
  }
  .combat-style-block .choice-label {
    display: block;
    margin: 0 0 8px;
    font: 800 0.75rem var(--serif);
    color: var(--character-jade);
  }
  .combat-style-block .choice-label small {
    display: inline;
    font: 500 0.75rem var(--sans);
    color: var(--character-muted);
  }
  .combat-style-choices {
    grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  }
  .combat-style-choices button {
    min-height: 64px;
    font-family: var(--serif);
  }
  .combat-style-block p {
    margin: 8px 0 0;
  }
  .endgame-section {
    margin-top: 16px;
    padding: 13px 12px;
    border: 1px solid var(--character-line-warm);
    background:
      linear-gradient(
        165deg,
        var(--character-warm-paper),
        var(--character-soft-paper));
  }
  .endgame-section .record-heading h3 {
    color: var(--character-amber);
  }
  .raid-choices {
    grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
    margin: 8px 0;
  }
  .raid-choices button {
    background: var(--character-button-paper);
    color: var(--character-button-ink);
    border-color: var(--character-button-line);
  }
  .raid-choices button[aria-checked=true] {
    background: var(--character-selection-paper);
    color: var(--character-selection-ink);
    border-color: var(--character-selection-line);
  }
  .raid-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding: 12px;
    background: var(--character-white);
    border: 1px solid var(--character-line-warm);
  }
  .raid-entry > div {
    min-width: 0;
    flex: 1;
  }
  .raid-entry strong {
    display: block;
    font: 800 1rem var(--serif);
    color: var(--character-heading);
  }
  .raid-entry p {
    margin: 5px 0 8px;
    font: 500 0.75rem/1.7 var(--serif);
    color: var(--character-ink-soft);
    word-break: keep-all;
  }
  .raid-entry .cost-chip {
    display: inline-block;
    margin: 2px 4px 2px 0;
  }
  .raid-entry button {
    flex: none;
    padding: 12px 14px;
    border: 1px solid var(--character-copper);
    background: linear-gradient(var(--character-copper-light), var(--character-copper-deep));
    color: var(--button-text);
    font: 800 0.75rem var(--serif);
    cursor: pointer;
    min-height: 44px;
  }
  .raid-entry button:disabled {
    background: var(--character-disabled-paper);
    color: var(--character-disabled-ink);
    border-color: var(--character-disabled-line);
    cursor: not-allowed;
  }
  .endgame-record {
    border-color: var(--character-line-warm);
    background:
      linear-gradient(
        150deg,
        var(--character-warm-paper),
        var(--character-soft-paper));
  }
  .endgame-record .ending-story {
    margin-top: 9px;
    padding: 8px;
    border-left: 3px solid var(--character-selection-line);
    background: var(--character-warm-paper);
    color: var(--character-story-ink);
    font-size: 0.75rem;
    line-height: 1.8;
  }
  #starforge-recipe {
    border-color: var(--character-line-warm);
    background:
      linear-gradient(
        155deg,
        var(--character-warm-paper),
        var(--character-soft-paper));
  }
  #starforge-recipe .recipe-heading strong {
    color: var(--character-amber);
  }
  @media (max-width: 780px) {
    .raid-choices button {
      min-height: 58px;
      padding: 8px 3px;
      font-size: 0.75rem;
    }
    .raid-entry {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 9px;
      padding: 10px;
    }
    .raid-entry button {
      white-space: normal;
      min-width: 0;
      max-width: 100%;
    }
    .endgame-section {
      padding: 10px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .combat-style-block .choice-row button,
    .raid-choices button {
      transition: none;
    }
  }
  .onboarding-card .class-choices {
    margin: 4px 0 14px;
  }
  .onboarding-card .class-choices button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-height: 52px;
    padding: 10px 5px;
    text-align: center;
  }
  .personality-choices,
  .personality-edit-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
    gap: 7px;
    min-width: 0;
  }
  .personality-choices {
    margin: 3px 0 14px;
  }
  .personality-choices button,
  .personality-edit-choices button {
    min-width: 0;
    min-height: 46px;
    padding: 10px 5px;
    border-radius: 5px;
    border: 1px solid var(--character-button-line);
    background: var(--character-button-paper);
    color: var(--character-button-ink);
    font: 800 0.75rem/1.4 var(--serif);
    cursor: pointer;
    transition:
      background .2s,
      border-color .2s,
      box-shadow .2s;
  }
  .personality-choices button[aria-checked=true],
  .personality-edit-choices button[aria-checked=true] {
    border-color: var(--character-selection-line);
    background: var(--character-selection-paper);
    color: var(--character-selection-ink);
    box-shadow: var(--character-selection-shadow);
  }
  .personality-choices button:focus-visible,
  .personality-edit-choices button:focus-visible {
    outline: 3px solid var(--character-focus);
    outline-offset: 2px;
  }
  .personality-choices button:disabled,
  .personality-edit-choices button:disabled {
    opacity: .55;
    cursor: default;
  }
  .personality-badge {
    display: inline-block;
    margin: 0 0 9px;
    padding: 4px 9px;
    border: 1px solid var(--character-line-warm);
    background: var(--character-warm-paper);
    color: var(--character-amber);
    font: 800 0.75rem/1.4 var(--serif);
  }
  .personality-record {
    padding: 12px 13px;
    border: 1px solid var(--character-line-jade);
    background:
      linear-gradient(
        130deg,
        var(--character-jade-paper),
        var(--character-warm-paper));
  }
  .personality-record .record-heading {
    margin-bottom: 10px;
  }
  .personality-record .record-heading h3 {
    font-size: 0.9375rem;
  }
  .personality-summary {
    margin: 9px 0 3px;
    color: var(--character-jade-soft);
    font: 700 0.75rem/1.7 var(--serif);
  }
  .personality-note {
    display: block;
    color: var(--muted);
    font-size: 0.75rem;
    line-height: 1.7;
  }
  @media (max-width: 480px) {
    .onboarding-card .class-choices button strong {
      font-size: 0.8125rem;
    }
    .personality-choices button,
    .personality-edit-choices button {
      padding: 10px 3px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .personality-choices button,
    .personality-edit-choices button {
      transition: none;
    }
  }
  .life-card {
    display: grid;
    gap: 6px;
    margin: 0 0 12px;
    padding: 10px 11px;
    background:
      linear-gradient(
        130deg,
        var(--character-paper),
        var(--character-soft-paper));
    border: 1px solid var(--character-line-jade);
  }
  .life-line {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--character-muted);
    font-size: 0.75rem;
  }
  .life-line strong {
    margin-left: auto;
    color: var(--character-jade);
    font: 800 0.75rem var(--serif);
  }
  .life-line span:last-child:not(:first-child) {
    font-size: 0.75rem;
  }
  .life-time-track {
    height: 5px;
    background: var(--character-track);
    overflow: hidden;
    border: 1px solid var(--character-line-jade);
  }
  .life-time-track > div {
    height: 100%;
    width: 0;
    background:
      linear-gradient(
        90deg,
        var(--character-progress),
        var(--character-progress-end));
    transition: width .3s ease;
  }
  .life-card small {
    color: var(--character-muted);
    font: 500 0.75rem/1.6 var(--sans);
  }
  .life-card button {
    border: 1px solid var(--character-button-line);
    background: var(--character-button-paper);
    color: var(--character-button-ink);
    padding: 8px;
    font: 800 0.75rem var(--serif);
    cursor: pointer;
  }
  .life-card button:disabled {
    opacity: .58;
    cursor: not-allowed;
  }
  .life-card button[hidden] {
    display: none;
  }
  .death-memorial {
    padding: 12px 10px;
    margin: 0 0 12px;
    border: 1px solid var(--character-line-jade);
    background:
      linear-gradient(
        135deg,
        var(--character-memorial-paper),
        var(--character-memorial-shadow));
    color: var(--character-memorial-ink);
    text-align: center;
  }
  .death-memorial[hidden] {
    display: none;
  }
  .death-memorial strong {
    display: block;
    font: 800 1rem/1.6 var(--serif);
  }
  .death-memorial p {
    font: 600 0.75rem/1.8 var(--serif);
    margin: 7px 0;
  }
  .death-memorial small {
    font-size: 0.75rem;
    line-height: 1.6;
  }
  .titles-section {
    border-color: var(--character-line-warm);
    background: var(--character-paper);
  }
  .title-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 5px 0;
  }
  .earned-title {
    padding: 9px 12px;
    background: var(--character-button-paper);
    color: var(--character-button-ink);
    border: 1px solid var(--character-button-line);
    font: 800 0.75rem var(--serif);
    cursor: pointer;
    min-height: 40px;
  }
  .earned-title[aria-pressed=true] {
    border-color: var(--character-selection-line);
    background: var(--character-selection-paper);
    color: var(--character-selection-ink);
    box-shadow: var(--character-selection-shadow);
  }
  .earned-title:disabled {
    opacity: .7;
    cursor: default;
  }
  .earned-title:focus-visible {
    outline: 2px solid var(--character-focus);
    outline-offset: 2px;
  }
  .titles-current {
    margin: 8px 0 0;
    color: var(--character-title-current);
    font: 700 0.75rem/1.5 var(--serif);
  }
  body.has-character .death-memorial ~ .class-passive {
    opacity: .75;
  }
  @media (prefers-reduced-motion: reduce) {
    .life-time-track > div {
      transition: none;
    }
  }
}