/* StatRat surface depth. Artwork, layout, type and interaction state stay native. */
.elementor .sr-page,
.sr-mechanics,
.sr-talents,
.sr-spellbook {
  --sr-depth-panel: inset 0 1px 0 #f0d7a633, inset 0 0 0 1px #06090bb8,
    inset 0 -1px 0 #0008, 0 2px 0 #05070999, 0 14px 24px -14px #000b;
  --sr-depth-control: inset 0 1px 0 #ffe5b34d, inset 1px 0 0 #efd3a01a,
    inset -1px 0 0 #0005, inset 0 -2px 0 #0006, 0 2px 0 #080a0ccc,
    0 5px 8px -5px #000b;
  --sr-depth-pressed: inset 0 2px 5px #0009, inset 0 -1px 0 #f0d7a626,
    0 1px 0 #050709b3;
}

/* The page canvas has no painting; paintings remain on their existing sections. */
.elementor .sr-page {
  background-image: radial-gradient(ellipse at 50% 0, #b78b4e0a, transparent 58%),
    radial-gradient(ellipse at 50% 100%, #00000024, transparent 70%);
}

.elementor .sr-page .sr-header {
  box-shadow: inset 0 1px 0 #f0d7a64d, inset 0 -1px 0 #080b0d,
    inset 0 0 0 1px #05070973, 0 6px 14px -8px #000b;
}

.elementor .sr-page .sr-card,
body.home .elementor .sr-page main > section:first-child .sr-wrap > .sr-row > .sr-stack:first-child,
.sr-mechanics .article-grid .article-card,
.sr-mechanics .sr-mechanics-content .intro,
.sr-mechanics .sr-mechanics-content .filters,
.sr-mechanics .article-content .mana-calculator,
.sr-mechanics .article-content .article-toc,
.sr-mechanics .evidence-grid .evidence-panel,
.sr-talents .sr-talent-trees .sr-tree,
.sr-talents .sr-talent-toolbar {
  box-shadow: var(--sr-depth-panel);
}

/* A frame is added over the directory's existing class-coloured top rail. */
body.elementor-page-34 .elementor .sr-page main article {
  position: relative;
}
body.elementor-page-34 .elementor .sr-page main article::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: var(--sr-depth-panel);
}
body.elementor-page-34 .elementor .sr-page main article > a:first-child > img {
  box-shadow: inset 0 1px 0 #ffe7bc4d, 0 0 0 1px #090c0e,
    0 3px 5px #0009;
}

/* Reading surfaces are recessed lightly, rather than boxed around long prose. */
.sr-mechanics .sr-mechanics-content .table-scroll,
.sr-mechanics .sr-mechanics-content .source-info,
.sr-spellbook .sr-sb-scroll {
  box-shadow: inset 0 1px 0 #0009, inset 0 0 0 1px #080c0c66,
    0 1px 0 #e4c7921a, 0 8px 16px -14px #000a;
}

.elementor .sr-page :is(.sr-menu-tab, .sr-primary, .sr-secondary, .sr-editorial-tab),
.sr-mechanics .sr-mechanics-content .inspect-button,
.sr-talents .sr-talent-actions button,
.sr-talents .sr-level-controls button,
.sr-talents .sr-legacy-ranks button,
.sr-talents .sr-talent-tabs button,
.sr-talents .sr-detail-buttons button,
.sr-talents .sr-tree .sr-tree-title button,
.sr-talents .sr-class-navigation button.sr-class-icon,
.sr-spellbook .sr-sb-controls button {
  box-shadow: var(--sr-depth-control);
  transition: box-shadow 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

.elementor .sr-page :is(.sr-menu-tab, .sr-primary, .sr-secondary, .sr-editorial-tab):active,
.elementor .sr-page .sr-menu-tab[aria-current="page"],
.sr-mechanics .sr-mechanics-content .inspect-button:active,
.sr-talents .sr-talent-actions button:active,
.sr-talents .sr-level-controls button:active,
.sr-talents .sr-legacy-ranks button:active,
.sr-talents .sr-legacy-ranks button[aria-pressed="true"],
.sr-talents .sr-talent-tabs button:active,
.sr-talents .sr-talent-tabs button[aria-pressed="true"],
.sr-talents .sr-detail-buttons button:active,
.sr-talents .sr-tree .sr-tree-title button:active,
.sr-talents .sr-class-navigation button.sr-class-icon:active,
.sr-talents .sr-class-navigation button.sr-class-icon[aria-pressed="true"],
.sr-spellbook .sr-sb-controls button:active {
  box-shadow: var(--sr-depth-pressed);
}

.sr-talents .sr-tree .sr-tree-title {
  box-shadow: inset 0 1px 0 #f0d7a62e, inset 0 -1px 0 #080a0b99,
    0 1px 0 #0005;
}
.sr-talents .sr-tree .sr-tree-title img {
  box-shadow: 0 0 0 1px #080b0dcc, 0 2px 4px #0009;
}

/* Class colour lives in the ring; the selected button retains its native tint. */
.sr-talents .sr-class-navigation button.sr-class-icon img {
  border-radius: 50%;
  border-color: var(--sr-class-color, #d6b477);
  box-shadow: 0 0 0 1px #070a0d, 0 0 0 2px #9b82544d,
    0 3px 5px #000a;
  opacity: .95;
}
.sr-talents .sr-class-navigation button.sr-class-icon[aria-pressed="true"] img {
  box-shadow: 0 0 0 1px #070a0d, 0 0 0 2px var(--sr-class-color, #d6b477),
    0 3px 5px #000a;
  opacity: 1;
}

/* Only the icon frame changes: lock filters, search outlines and proc sprites stay. */
.sr-talents .sr-talent-trees .sr-tree .sr-talent-node img {
  box-shadow: inset 0 1px 0 #fff0c326, 0 0 0 1px #080b0e,
    0 0 0 2px #a58a5559, 0 3px 5px #000b;
  transform: none;
}
.sr-talents .sr-talent-trees .sr-tree .sr-talent-node[data-state="maxed"] img {
  border-color: #efd080;
  box-shadow: inset 0 1px 0 #fff2c44d, 0 0 0 1px #080b0e,
    0 0 0 2px #c7a44eaa, 0 3px 5px #000b;
}
.sr-talents .sr-talent-trees .sr-tree .sr-talent-node[data-state="maxed"] .sr-node-rank {
  color: #ffe5a0;
  border-color: #cfaf65;
}
.sr-talents .sr-talent-trees .sr-tree .sr-talent-node:active img {
  box-shadow: inset 0 2px 3px #0008, 0 0 0 1px #080b0e,
    0 0 0 2px #c9a76299, 0 1px 2px #000b;
}

@media (hover: hover) {
  .elementor .sr-page a.sr-card:hover,
  .sr-mechanics .article-grid .article-card:hover {
    box-shadow: inset 0 1px 0 #f0d7a64d, inset 0 0 0 1px #06090bb8,
      inset 0 -1px 0 #0008, 0 2px 0 #05070999, 0 16px 28px -15px #000c;
  }
  .elementor .sr-page :is(.sr-menu-tab, .sr-primary, .sr-secondary, .sr-editorial-tab):hover:not(:active):not([aria-current="page"]),
  .sr-mechanics .sr-mechanics-content .inspect-button:hover:not(:active),
  .sr-talents .sr-talent-actions button:hover:not(:disabled):not(:active),
  .sr-talents .sr-level-controls button:hover:not(:disabled):not(:active),
  .sr-talents .sr-detail-buttons button:hover:not(:disabled):not(:active),
  .sr-spellbook .sr-sb-controls button:hover:not(:disabled):not(:active) {
    box-shadow: inset 0 1px 0 #ffe8b766, inset 1px 0 0 #efd3a026,
      inset -1px 0 0 #0005, inset 0 -2px 0 #0006, 0 2px 0 #080a0ccc,
      0 6px 10px -5px #000b;
  }
  .sr-talents .sr-class-navigation button.sr-class-icon:hover:not(:disabled):not([aria-pressed="true"]) img {
    box-shadow: 0 0 0 1px #070a0d, 0 0 0 2px var(--sr-class-color, #d6b477),
      0 3px 5px #000a;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .elementor .sr-page :is(.sr-menu-tab, .sr-primary, .sr-secondary, .sr-editorial-tab),
  .sr-mechanics .sr-mechanics-content .inspect-button,
  .sr-talents .sr-talent-actions button,
  .sr-talents .sr-level-controls button,
  .sr-talents .sr-legacy-ranks button,
  .sr-talents .sr-talent-tabs button,
  .sr-talents .sr-detail-buttons button,
  .sr-talents .sr-tree .sr-tree-title button,
  .sr-talents .sr-class-navigation button.sr-class-icon,
  .sr-talents .sr-class-navigation button.sr-class-icon img,
  .sr-talents .sr-talent-trees .sr-tree .sr-talent-node img,
  .sr-spellbook .sr-sb-controls button {
    transition: none;
  }
}