/* Faerillian r26: visual layer only. Existing layouts, controls and state stay in their original modules. */
@media screen {
  :root {
    --ink: #302d24;
    --muted: #686454;
    --green: #173e34;
    --leaf: #526144;
    --gold: #b68d4c;
    --paper: #eee6d5;
    --card: #fffaf0;
    --line: #d4c5a8;
    --red: #963f35;
    --shadow: 0 5px 18px #513e2310, 0 1px 2px #513e2310;
    --radius: 12px;
    --theme-parchment: url('./theme/parchment-r26.webp');
    --theme-landscape: url('./theme/adventure-landscape-r26.webp');
    --theme-ornament: url('./theme/ornament-r26.svg');
    background: var(--paper);
  }
  body {
    background-color: var(--paper);
    background-image: linear-gradient(#e7dbc55c, #e7dbc55c), var(--theme-parchment);
    background-size: auto, 512px 512px;
  }
  h1, h2, h3, h4 {color: #343326; letter-spacing: -.015em;}
  h1 {font-weight: 500;}
  .eyebrow {color: #766036;}
  .page-head {background: var(--theme-ornament) left bottom / 180px 16px no-repeat; padding-bottom: 20px;}
  .character-page .page-head, .wizard-page .page-head {padding-bottom: 0; background: none;}
  .page-head h1 {text-wrap: balance;}
  .page-head p {color: #655f4f;}
  .topbar {
    background: linear-gradient(#fffaf4d9, #f5ecdcf5);
    border-color: #c5ad82;
    box-shadow: 0 1px 0 #fff8ec inset, 0 2px 8px #3b302308;
  }
  .topbar .group-title {color: #645539; letter-spacing: .035em;}
  .status {color: #5d6453;}
  .status.online::before {background: #4b7354; box-shadow: 0 0 0 3px #4b735414;}
  .sidebar {
    background-color: #102d28;
    background-image: linear-gradient(#102d28f5 35%, #102d28cf), var(--theme-landscape);
    background-size: cover;
    background-position: center, 70% bottom;
    border-right: 1px solid #ac854860;
    box-shadow: inset -4px 0 0 #ffffff04;
    color: #f1e4c6;
  }
  .brand strong {color: #f3e4bf; text-shadow: 0 2px 5px #0005;}
  .brand small {color: #c9bd9d; letter-spacing: .13em;}
  .sigil {
    flex-shrink: 0;
    color: #e4c079;
    border-color: #c2a263;
    background: radial-gradient(circle, #a88a3f15, transparent 70%);
    box-shadow: 0 0 0 3px #142e28, 0 0 0 4px #b38d4559, inset 0 0 0 3px #b38d4525;
    text-shadow: 0 1px 4px #0005;
  }
  .sidebar label {color: #d2c7ab;}
  .sidebar select {background: #173c33; border-color: #8e805855; color: #f3ead6;}
  .nav a {color: #dbd5bf;}
  .nav a .icon {color: #c6ad76;}
  .nav a.active {
    color: #fff5dd;
    background: linear-gradient(90deg, #b58e413b, #b58e4109);
    box-shadow: inset 3px 0 #d2ac60, inset 0 1px #d0ad5c25, inset 0 -1px #d0ad5c25;
  }
  .nav a.active .icon {color: #efd291;}
  .nav a:hover {background-color: #c6ac6a16; color: #fff5dd;}
  .sidebar .account {color: #d1c7aa; border-top: 1px solid #b3975733;}
  .card, .resource, .attribute-card, .choice {
    background-color: var(--card);
    background-image: linear-gradient(#fffaf0c9, #fffaf0c9), var(--theme-parchment);
    background-size: auto, 512px 512px;
    border-color: var(--line);
    box-shadow: var(--shadow);
  }
  .card>header h2, .card>header h3 {color: #3e422e;}
  .card>header {border-bottom: 1px solid #c8b18266; padding-bottom: 12px;}
  .card.flush>header {padding-bottom: 0; border-bottom: 0;}
  .list-row {border-color: #dbcdb3;}
  .card .list-row:last-child {border-bottom: 0;}
  .hero.card {
    background: linear-gradient(90deg, #102b24eb 0%, #102b24d6 40%, #102b2430 100%), var(--theme-landscape) center / cover;
    border: 1px solid #9b8555;
    box-shadow: inset 0 0 0 5px #efcf9210, 0 8px 24px #24352d20;
    padding: 34px;
    min-height: 250px;
    color: #fff3d6;
  }
  .hero::after {content: none;}
  .hero .eyebrow {color: #e0c18a;}
  .hero h2 {color: #fff4d9; max-width: 620px; font-size: 2.3rem; text-shadow: 0 2px 10px #0006;}
  .hero p {color: #eee5d1; max-width: 54ch; text-shadow: 0 1px 5px #0008;}
  .hero .btn {background: #f5e5c6; color: #253b2e; border-color: #ccb078; box-shadow: 0 2px 8px #0003;}
  .hero .btn:hover {background: #fff1d5;}
  .btn {background: linear-gradient(#fffaf0, #f3ead7); border-color: #cbb995; color: #384334; box-shadow: inset 0 1px #fffaf9;}
  .btn:hover {background: #ede1c7; border-color: #927743; color: #243a2d;}
  .btn.primary {background: linear-gradient(#275545, #153b30); border-color: #416048; color: #fff4d9; box-shadow: inset 0 1px #beac7355, 0 2px 4px #14392b20;}
  .btn.primary:hover {background: linear-gradient(#31624e, #204a3c); color: #fff8e6;}
  .btn.danger {color: #923d32; border-color: #ca9b89; background: #fff4e9;}
  .btn.subtle-icon {background: transparent; border-color: transparent; box-shadow: none;}
  .btn.link {background: none; box-shadow: none; border-color: transparent;}
  .close {color: #665537; background: #f7edda; border-color: #cbb995;}
  input, select, textarea {background-color: #fffdf6; border-color: #bfaf90; color: #302d24; box-shadow: inset 0 1px 3px #5140220a;}
  input::placeholder, textarea::placeholder {color: #776f5e; opacity: 1;}
  input:focus, select:focus, textarea:focus {border-color: #8c733f;}
  :focus-visible {outline-color: #856216;}
  .tabs {border-color: #c8b692;}
  .tabs button {color: #69614e;}
  .tabs button.active {color: #234636; border-color: #92723b;}
  .choice:hover {border-color: #987942; background-color: #fbf1db;}
  .choice.selected {background: #eee9d4; border-color: #345843;}
  .avatar {background: radial-gradient(circle at 30% 20%, #52674b, #1a3b30); color: #ebd19a; border-color: #a78b50; box-shadow: inset 0 0 0 3px #d5b56e30;}
  .catalog-art {border-color: #a88b5266; box-shadow: 0 2px 5px #392b2720;}
  .art-card {border-color: #ad8b54; box-shadow: 0 0 0 3px #eadfc8, 0 4px 12px #38261720;}
  .resource {box-shadow: inset 0 2px #b49a6266, var(--shadow);}
  .resource:has([data-resource=hp]) {box-shadow: inset 0 3px #98534799, var(--shadow);}
  .resource:has([data-resource=energy]) {box-shadow: inset 0 3px #4b717399, var(--shadow);}
  .bar {background: #ded6c1;}
  .bar span {background: #718157;}
  .bar.energy span {background: #567f80;}
  .stat-number, .attribute-card .sum {color: #36523b;}
  .pill {background: #eeeedd; color: #4b6041; border-color: #c7ceb1;}
  .pill.gold {background: #f3e5c5; color: #705522; border-color: #ccb278;}
  .pill.red {background: #f9e9dd; color: #913e34; border-color: #dcb6a6;}
  .temporary-bonus {color: #86600c;}
  .form-tabs button, .writing-tools button, .multi-picker button {background: #eee4cf; color: #47513b;}
  .form-tabs button.active, .multi-selected button {background: #274d3b; color: #fff5da;}
  .point-budget, .combat-facts>div {background: #e9e5cf;}
  th {color: #4d5940; background: #e8e5d1;}
  .book-index button.active {background: #e4d9be; color: #2d4a34; box-shadow: inset 3px 0 #a38246;}
  .book-index button:hover {background: #ebe1c9;}
  pre {background: #e8e1ce;}
  .empty {background: #f9f1df70; border-color: #bfae8c;}
  .notice {background: #ebedd9; border-color: #c8d0aa;}
  .notice.warn {background: #f7eacb; border-color: #d3b67a; color: #695022;}
  .notice.error {background: #f7e8dd; border-color: #cfa092; color: #8f392e;}
  dialog {background: var(--card); border: 1px solid #bca06b; box-shadow: 0 16px 60px #122b2855, 0 0 0 4px #d6bc8240;}
  dialog::backdrop {background: #1027209c; backdrop-filter: blur(3px);}
  .modal-head, .modal-foot {background: linear-gradient(#fbf3e2, #f0e5cf); border-color: #d3be96;}
  .modal-head h2 {color: #38432e;}
  .modal-body {background: var(--card);}
  .tree-toolbar, .tree-legend {background: #eee5d2; border-color: #c6b48f;}
  .tree-canvas {background-color: #eee8d6;}
  .tree-selection {background: #f8edcf;}
  .wizard-foot {background: linear-gradient(#eee6d500, var(--paper) 22%);}
  .login-art {
    background: linear-gradient(0deg, #102821ed, #10282133 72%, #10282180), var(--theme-landscape) 68% center / cover;
    border-right: 1px solid #a58a54;
  }
  .login-art::after {content: none;}
  .login-art h1 {color: #fff2d2; text-shadow: 0 3px 15px #0008;}
  .login-art p {color: #f0e6cd;}
  .login-art .brand {align-self: flex-start;}
  .login-panel {background: linear-gradient(#fff9ed60, #fff9ed60), var(--theme-parchment); background-size: auto, 512px 512px;}
  .login-panel form {border-top: 1px solid #b49a65; padding-top: 24px;}
  .login-panel h2 {color: #37442d;}
  .login-panel .eyebrow {color: #806537;}
  .loading {background: var(--paper);}
  .loading .sigil {color: #6d552b; border-color: #a1854d; box-shadow: 0 0 0 4px #b38d4525; text-shadow: none;}
  /* Map artwork, tokens and hit areas are intentionally owned by map.css. */
  .map-page .map-menu>summary, .map-page .map-menu>div,
  .map-full .map-editbar, .gm-panel-heading {background-color: #fff6e4; border-color: #bea77b;}
  .map-page .map-menu>summary.active {background: var(--green); color: white;}
  @media (max-width: 800px) {
    .sidebar {background: linear-gradient(#1c3d31, #102b24); border-top: 1px solid #a98b4f; border-right: 0; box-shadow: 0 -2px 12px #162c2820;}
    .nav a {color: #d9d0b6;}
    .nav a.active {background: linear-gradient(#d3ae6030, transparent); color: #fff0c5; box-shadow: inset 0 3px #d6b36f;}
    .nav a .icon {color: inherit;}
    .mobile-brand button {color: #304d36;}
    .hero.card {min-height: 220px; padding: 24px; background-position: center, 62% center;}
    .hero h2 {font-size: 1.9rem;}
    .hero p {max-width: 42ch;}
    .page-head {background-size: 135px 12px; padding-bottom: 16px;}
    .character-page .page-head, .wizard-page .page-head {padding-bottom: 0;}
    .character-page>.tabs>button {background: #fbf2df; border-color: #c8b48b; color: #43533b; box-shadow: inset 0 1px #fffaf0;}
    .character-page>.tabs>button.active {background: linear-gradient(#315842, #1b3d30); color: #f4d899; border-color: #486047; box-shadow: inset 0 2px #c9ad6470;}
    .login-art {background-position: center, 70% 47%; border-right: 0; border-bottom: 1px solid #9d8150;}
    .login-art h1 {font-size: 1.6rem;}
    .login-panel form {padding-top: 18px;}
  }
  @media (prefers-contrast: more) {
    :root {--muted: #48463b; --line: #99886b;}
    .card, .resource, .choice, .attribute-card, .login-panel {background-image: none;}
    .hero.card {background-image: linear-gradient(90deg, #102b24f5, #102b24df), var(--theme-landscape);}
    .btn, input, select, textarea {border-color: #77684a;}
  }
  @media (forced-colors: active) {
    body, .sidebar, .hero.card, .login-art, .login-panel, .card, .resource, .choice, .attribute-card {background-image: none;}
    .hero h2, .hero p, .hero .eyebrow, .login-art h1, .brand strong, .brand small, .nav a, .nav a.active, .sigil {color: CanvasText; text-shadow: none;}
    .nav a.active, .tabs button.active {outline: 2px solid Highlight; outline-offset: -2px;}
  }
}