/* Teal Cloud A character-sheet dialogs: skin only.
 * The base sheets retain all dimensions, spacing, typography and layout.
 */

html[data-ui-theme="teal-cloud-a"] #game-root :is(
  dialog[data-role="advanced-attribute-dialog"],
  dialog[data-role="slot-selection-dialog"]
) {
  --tc-character-dialog-deep: #103f42;
  --tc-character-dialog-gold: #d6ba78;
  --tc-character-dialog-gold-light: #ead294;
  --tc-character-dialog-ink: var(--tc-ink, #eee3bd);
  --tc-character-dialog-muted: var(--tc-muted, #bbcbbf);
  background-color: var(--tc-character-dialog-deep) !important;
  background-image:
    linear-gradient(145deg, rgb(38 105 100 / 18%), rgb(8 48 52 / 30%)),
    var(--tc-cloth, linear-gradient(145deg, #1d5b58, #0d3f43)) !important;
  background-position: center !important;
  background-repeat: no-repeat, repeat !important;
  background-size: 100% 100%, 480px auto !important;
  color: var(--tc-character-dialog-ink) !important;
  box-shadow: 0 8px 20px rgb(3 25 28 / 38%) !important;
}

/* Decorative overlay only: it does not participate in dialog layout. */
html[data-ui-theme="teal-cloud-a"] #game-root :is(
  dialog[data-role="advanced-attribute-dialog"],
  dialog[data-role="slot-selection-dialog"]
)::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  box-sizing: border-box;
  pointer-events: none;
  border: 18px solid transparent;
  border-image-source: var(--tc-frame-art, none);
  border-image-slice: 80 38;
  border-image-width: 18px;
  border-image-repeat: stretch;
}

html[data-ui-theme="teal-cloud-a"] #game-root :is(
  dialog[data-role="advanced-attribute-dialog"],
  dialog[data-role="slot-selection-dialog"]
)::after {
  content: none;
}

html[data-ui-theme="teal-cloud-a"] #game-root :is(
  dialog[data-role="advanced-attribute-dialog"],
  dialog[data-role="slot-selection-dialog"]
)::backdrop {
  background: rgb(4 31 35 / 72%);
}

html[data-ui-theme="teal-cloud-a"] #game-root :is(
  dialog[data-role="advanced-attribute-dialog"],
  dialog[data-role="slot-selection-dialog"]
) > .attribute-modal__content {
  color: var(--tc-character-dialog-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
  scrollbar-color: #9e8a59 #123f42;
}

html[data-ui-theme="teal-cloud-a"] #game-root :is(
  dialog[data-role="advanced-attribute-dialog"],
  dialog[data-role="slot-selection-dialog"]
) .attribute-modal__heading {
  border-bottom-color: rgb(217 191 122 / 52%);
}

html[data-ui-theme="teal-cloud-a"] #game-root :is(
  dialog[data-role="advanced-attribute-dialog"],
  dialog[data-role="slot-selection-dialog"]
) .attribute-modal__heading h2 {
  color: var(--tc-character-dialog-ink) !important;
  text-shadow: 0 1px 0 rgb(3 35 37 / 72%);
}

html[data-ui-theme="teal-cloud-a"] #game-root :is(
  dialog[data-role="advanced-attribute-dialog"],
  dialog[data-role="slot-selection-dialog"]
) .attribute-modal__close {
  border-color: rgb(217 191 122 / 66%) !important;
  background: rgb(18 71 70 / 90%) !important;
  color: var(--tc-character-dialog-gold-light) !important;
  box-shadow: inset 0 0 0 1px rgb(241 234 213 / 10%) !important;
  text-shadow: none;
}

html[data-ui-theme="teal-cloud-a"] #game-root :is(
  dialog[data-role="advanced-attribute-dialog"],
  dialog[data-role="slot-selection-dialog"]
) button:focus-visible {
  outline-color: var(--tc-character-dialog-gold-light);
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="advanced-attribute-dialog"] .advanced-attribute-rule {
  border-color: rgb(185 154 85 / 48%) !important;
  background: rgb(12 61 62 / 50%) !important;
  color: var(--tc-character-dialog-muted) !important;
  box-shadow: inset 0 0 0 1px rgb(219 191 119 / 8%) !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="advanced-attribute-dialog"] .advanced-attribute-board {
  border-color: rgb(185 154 85 / 48%) !important;
  background: rgb(11 57 59 / 38%) !important;
  box-shadow: inset 0 0 0 1px rgb(219 191 119 / 8%) !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="advanced-attribute-dialog"] .advanced-attribute-board .attribute-list__row {
  border-color: rgb(185 154 85 / 28%) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="advanced-attribute-dialog"] .advanced-attribute-board .attribute-list__row span {
  color: var(--tc-character-dialog-muted) !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="advanced-attribute-dialog"] .advanced-attribute-board .attribute-list__row strong {
  color: var(--tc-character-dialog-gold-light) !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="advanced-attribute-dialog"] .advanced-attribute-empty {
  border-color: rgb(185 154 85 / 48%) !important;
  background: rgb(11 57 59 / 32%) !important;
  color: var(--tc-character-dialog-muted) !important;
}

/* [data-slot-type][open] beats the legacy pale material skin without adding
   geometry to the live selection dialog. */
html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="slot-selection-dialog"][data-slot-type][open] .slot-selection-context {
  border-color: rgb(185 154 85 / 48%) !important;
  background: rgb(12 61 62 / 50%) !important;
  color: var(--tc-character-dialog-muted) !important;
  box-shadow: inset 0 0 0 1px rgb(219 191 119 / 8%) !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="slot-selection-dialog"] .slot-selection-context span {
  color: var(--tc-character-dialog-muted) !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="slot-selection-dialog"] .slot-selection-context strong {
  color: var(--tc-character-dialog-gold-light) !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="slot-selection-dialog"][data-slot-type][open] .slot-selection-board {
  border-color: rgb(185 154 85 / 48%) !important;
  background: rgb(9 51 54 / 48%) !important;
  color: var(--tc-character-dialog-muted) !important;
  box-shadow: inset 0 0 0 1px rgb(219 191 119 / 8%) !important;
  scrollbar-color: #9e8a59 #123f42;
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="slot-selection-dialog"] .equipment-choice {
  border-color: rgb(185 154 85 / 44%) !important;
  background:
    linear-gradient(125deg, rgb(74 130 119 / 26%), rgb(13 63 64 / 48%)),
    var(--tc-cloth, none) !important;
  color: var(--tc-character-dialog-ink) !important;
  box-shadow: inset 0 0 0 1px rgb(221 195 125 / 8%) !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="slot-selection-dialog"] .equipment-choice:hover:not(:disabled),
html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="slot-selection-dialog"] .equipment-choice:focus-visible {
  border-color: rgb(234 203 126 / 82%) !important;
  background:
    linear-gradient(125deg, rgb(84 145 132 / 42%), rgb(20 76 75 / 62%)),
    var(--tc-cloth, none) !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="slot-selection-dialog"] :is(
  .equipment-choice--current,
  .equipment-choice[data-equipped="true"]
) {
  border-color: var(--tc-character-dialog-gold) !important;
  background:
    linear-gradient(125deg, rgb(92 143 124 / 42%), rgb(28 78 73 / 64%)),
    var(--tc-cloth, none) !important;
  box-shadow:
    inset 0 0 0 1px rgb(237 211 143 / 22%),
    0 0 0 1px rgb(104 83 39 / 24%) !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="slot-selection-dialog"] .equipment-choice > span {
  color: var(--tc-character-dialog-ink) !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="slot-selection-dialog"] .equipment-choice small {
  color: var(--tc-character-dialog-muted) !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="slot-selection-dialog"] :is(
  .equipment-choice-with-art > .reserved-slot-card__icon,
  .kungfu-item-art
) {
  border-color: rgb(185 154 85 / 60%) !important;
  background: #d9dfc6 !important;
  color: #214a46 !important;
  box-shadow: inset 0 0 0 2px rgb(23 76 76 / 14%) !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="slot-selection-dialog"][data-slot-type="kungfu"] .kungfu-choice strong {
  color: var(--tc-character-dialog-ink) !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="slot-selection-dialog"][data-slot-type="kungfu"] .kungfu-choice[data-equipped="true"] strong {
  color: var(--tc-character-dialog-gold-light) !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="slot-selection-dialog"] .equipment-unequip-button {
  border-color: #879e88 !important;
  background:
    linear-gradient(145deg, rgb(246 242 217 / 44%), transparent 55%),
    var(--tc-button-art, linear-gradient(180deg, #d8dfca, #b5c7b5)) !important;
  background-size: 100% 100%, 100% 100% !important;
  color: #173f3c !important;
  box-shadow: inset 0 0 0 1px rgb(255 252 230 / 56%) !important;
  text-shadow: none;
}

html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="slot-selection-dialog"][data-slot-type][open] .slot-selection-empty,
html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="slot-selection-dialog"][data-slot-type][open] .slot-selection-board > p,
html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="slot-selection-dialog"][data-slot-type][open] .slot-selection-board > small {
  color: var(--tc-character-dialog-muted) !important;
}

/* Readable dark-surface equivalents of the runtime tier colors. */
html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="slot-selection-dialog"] .equipment-choice strong:is([style*="#d8d8d8"], [style*="rgb(216, 216, 216)"]) { color: #e2e3dc !important; }
html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="slot-selection-dialog"] .equipment-choice strong:is([style*="#72b879"], [style*="rgb(114, 184, 121)"]) { color: #8bd793 !important; }
html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="slot-selection-dialog"] .equipment-choice strong:is([style*="#6f9fd8"], [style*="rgb(111, 159, 216)"]) { color: #8ebbea !important; }
html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="slot-selection-dialog"] .equipment-choice strong:is([style*="#a780cf"], [style*="rgb(167, 128, 207)"]) { color: #c9a3ed !important; }
html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="slot-selection-dialog"] .equipment-choice strong:is([style*="#d98b42"], [style*="rgb(217, 139, 66)"]) { color: #f0ae6d !important; }
html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="slot-selection-dialog"] .equipment-choice strong:is([style*="#c95353"], [style*="rgb(201, 83, 83)"]) { color: #ed8983 !important; }
html[data-ui-theme="teal-cloud-a"] #game-root dialog[data-role="slot-selection-dialog"] .equipment-choice strong:is(
  [style*="#e0bb55"], [style*="rgb(224, 187, 85)"],
  [style*="#d5ae55"], [style*="rgb(213, 174, 85)"]
) { color: #f0d27d !important; }