@layer theme {
  :is(.choice-row, .class-choices, .personality-choices) button[aria-checked=true] small { color: inherit; }
  .onboarding-copy { text-shadow: none; }
  .onboarding-copy p, .onboarding-intro, .onboarding-card .create-form label { color: var(--text); }
  body {
    background: var(--page-bg);
    color: var(--text);
    font-size: 1rem;
  }
  .site-shell {
    max-width: 1440px;
    margin: 14px auto;
    border: 3px double var(--chrome-line);
    box-shadow: 0 14px 60px var(--shadow);
    background: var(--surface);
  }
  main {
    background: var(--surface);
    padding: 16px;
  }
  .top-status {
    background: var(--chrome-bg);
    color: var(--chrome-muted);
    border-bottom: 1px solid var(--chrome-line);
    letter-spacing: .08em;
  }
  .header-inner {
    padding: 14px 24px;
    background: var(--header-bg);
    border-bottom: 3px double var(--chrome-line);
    gap: 20px;
    min-height: 92px;
  }
  .brand-group .wordmark {
    color: var(--brand-gold);
    text-shadow: 1px 2px var(--chrome-bg);
    font-size: 2.6875rem;
    letter-spacing: .06em;
  }
  .wordmark small {
    font-size: 0.75rem;
    color: var(--chrome-muted);
    letter-spacing: .45em;
  }
  .brand-seal {
    background: var(--seal-bg);
    border: 1px solid var(--seal-border);
    color: var(--seal-text);
    box-shadow: inset 0 0 0 2px var(--seal-bg), inset 0 0 0 3px var(--seal-border);
  }
  .moon-badge {
    color: var(--chrome-text);
  }
  .moon-badge small {
    color: var(--chrome-muted);
  }
  .header-controls button {
    background: var(--chrome-bg);
    color: var(--chrome-text);
    border: 1px solid var(--chrome-line);
    box-shadow: none;
    min-height: 38px;
  }
  #game-world {
    display: grid;
    grid-template-columns: 218px minmax(0, 1fr);
    gap: 18px;
  }
  :is(.panel, .widget) {
    border: 1px solid var(--line);
    box-shadow: 0 3px 10px var(--shadow-soft);
    background: var(--surface);
  }
  :is(.panel-heading, .widget-heading) {
    background: var(--heading-bg);
    border-bottom: 3px double var(--chrome-line);
    color: var(--heading-text);
    padding: 10px 14px;
  }
  .panel-heading h2 {
    color: var(--heading-text);
    letter-spacing: .06em;
    font: 700 1rem var(--serif);
  }
  .panel-heading h2 small {
    color: var(--heading-muted);
  }
  .widget-heading {
    font-size: 0.875rem;
    letter-spacing: .1em;
  }
  .character-crest {
    padding: 3px 0 16px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 14px;
  }
  .crest-symbol {
    background: var(--chrome-bg);
    border: 3px double var(--chrome-line);
    color: var(--brand-gold);
    font-size: 1.875rem;
    padding: 8px 14px;
  }
  .character-crest strong {
    font: 700 1.25rem var(--display);
  }
  .character-crest small {
    color: var(--muted);
  }
  .life-card,
  .class-passive {
    background: transparent;
    border-color: var(--line);
    color: var(--muted);
  }
  .stat-pair strong {
    font-size: 1.125rem;
    color: var(--text);
  }
  .meter {
    height: 8px;
    border: 1px solid var(--line);
    background: var(--surface-sunken);
  }
  .meter:not(.qi-meter, .exp-meter) > span {
    background: var(--meter-health);
  }
  .qi-meter > span {
    background: var(--meter-qi);
  }
  .exp-meter > span {
    background: var(--meter-exp);
  }
  .personality-note,
  .quest-progress {
    background: var(--button-bg);
    border-color: var(--line);
    color: var(--text);
  }
  #adventure > .panel-body {
    padding: 0;
  }
  #adventure > .panel-body > .world-options {
    margin: 0;
    padding: 8px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--button-bg);
  }
  #adventure > .panel-body > .world-options small {
    font-size: 0.75rem;
    color: var(--muted);
  }
  #adventure > .panel-body > .action-grid {
    margin: 0;
    gap: 0;
    padding: 10px;
    background: var(--heading-bg);
    border-bottom: 3px double var(--chrome-line);
    grid-template-columns: minmax(0, 1fr);
  }
  #adventure .action-grid .action-tile {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--chrome-line);
    box-shadow: none;
    padding: 6px 14px;
    gap: 4px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 44px;
    align-content: start;
  }
  #adventure .action-grid .action-tile:last-child {
    border-bottom: 0;
  }
  #adventure .action-tile h3 {
    font: 700 0.875rem var(--serif);
    color: var(--chrome-text);
  }
  #adventure .action-tile .cost-chip {
    color: var(--chrome-muted);
    background: transparent;
    grid-column: 1;
    grid-row: 2;
    font-size: 0.75rem;
    line-height: 1.5;
    justify-self: start;
  }
  #adventure .action-tile > button[data-action] {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    min-height: 44px;
    margin: 0;
    border: 1px solid var(--chrome-line);
    background: var(--primary-bg);
    color: var(--primary-text);
    font-size: 0.875rem;
    box-shadow: inset 0 0 0 2px var(--primary-bg);
  }
  @media (hover: hover) {
    #adventure .action-tile > button:hover:not(:disabled) {
      background: var(--primary-hover);
    }
  }
  #adventure .action-tile > button:disabled {
    background: var(--chrome-bg);
    color: var(--chrome-muted);
    border-color: var(--chrome-line);
    box-shadow: none;
  }
  #adventure > .panel-body > .action-settings {
    margin: 0;
    padding: 12px 16px;
    gap: 10px;
  }
  #game-world .main-story-card {
    margin: 0 16px 12px;
    padding: 12px 16px;
    background: var(--button-bg);
    border-left: 3px solid var(--accent);
  }
  #adventure > .panel-body > .mastery-fold {
    margin: 0 16px 16px;
  }
  .fold,
  .rest-tools > button {
    background: var(--surface);
    border-color: var(--line);
    color: var(--text);
  }
  .fold summary::after {
    color: var(--muted);
  }
  .main-button,
  .recipe-action,
  #story-open {
    background: var(--primary-bg);
    color: var(--primary-text);
    border-color: var(--line);
  }
  .save-controls button,
  #log-toggle {
    min-height: 44px;
    background: var(--button-bg);
    color: var(--button-text);
    border: 1px solid var(--line);
  }
  #game-world .right-rail .event-log li {
    color: var(--text);
    border-color: var(--line);
    font-weight: 500;
  }
  .site-footer {
    background: var(--chrome-bg);
    color: var(--chrome-muted);
    border-top: 3px double var(--chrome-line);
  }
  .onboarding-layout {
    background: var(--intro-bg);
    border-color: var(--line);
  }
  .onboarding-card {
    background: var(--surface);
    border-color: var(--line);
    box-shadow: 0 12px 35px var(--shadow);
  }
  .onboarding-copy #onboarding-title {
    color: var(--heading);
  }
  .onboarding-copy em {
    color: var(--accent);
  }
  @media (max-width: 1100px) {
    #game-world {
      grid-template-columns: 185px minmax(0, 1fr);
      gap: 12px;
    }
    #adventure .action-grid .action-tile {
      padding: 6px 8px;
    }
    #adventure .action-tile > button[data-action] {
      font-size: 0.75rem;
    }
  }
  @media (max-width: 780px) {
    .site-shell {
      margin: 0;
      border-width: 0;
    }
    main {
      padding: 10px;
    }
    #game-world {
      grid-template-columns: minmax(0, 1fr);
    }
    .header-inner {
      padding: 10px 14px;
      gap: 12px;
      min-height: 0;
    }
    .brand-group .wordmark {
      font-size: 1.875rem;
    }
    .brand-seal {
      display: none;
    }
    #adventure .action-grid .action-tile {
      padding: 4px 6px;
    }
    #adventure .action-tile h3 {
      font-size: 0.75rem;
    }
    #adventure .action-tile > button[data-action] {
      font-size: 0.75rem;
      min-height: 44px;
      width: 100%;
      white-space: normal;
    }
    #adventure > .panel-body > .action-settings {
      padding: 10px;
    }
    #game-world .main-story-card {
      margin: 0 10px 10px;
    }
    #adventure > .panel-body > .mastery-fold {
      margin: 0 10px 10px;
    }
  }
  :is(.manual, .craft-recipe, .inventory-items span, .quest-card, .collection-entry, .life-card, .class-passive, .personality-note, .profession-strip, .endgame-section, .dungeon-entry) {
    background: var(--surface);
    border-color: var(--line);
    color: var(--text);
  }
  :is(.manual strong, .recipe-heading strong, .records-section h3, .record-heading strong, .leisure-block > h3, .manual .bonus) {
    color: var(--heading);
  }
  :is(.manual small, .recipe-story, .recipe-progress, .record-note, .class-passive, .widget-tip) {
    color: var(--muted);
  }
  :is(.choice-row, .class-choices, .personality-choices) button {
    background: var(--button-bg);
    color: var(--button-text);
    border-color: var(--line);
  }
  :is(.choice-row, .class-choices, .personality-choices) button[aria-checked=true] {
    background: var(--primary-bg);
    color: var(--primary-text);
    border-color: var(--line);
  }
  .rail-cost {
    background: var(--button-bg);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 0;
  }
  #game-world .action-settings > .batch-bar {
    background: transparent;
    border: 0;
  }
  #training .action-tile .cost-chip {
    background: transparent;
    color: var(--muted);
    border: 0;
    border-radius: 0;
  }
  .panel-heading > span {
    color: var(--heading-muted);
  }
}