/* Teal Cloud A main ranking page and rank-owned player profile: skin only.
 * Layout, sizing, scrolling, typography, portraits and runtime state stay with
 * the existing rank and async-duel styles. Battlefield rankings are excluded.
 */

html[data-ui-theme="teal-cloud-a"] #game-root [data-page="rank"].rank-page {
  color: var(--tc-ink, #eee3bd) !important;
  background:
    linear-gradient(rgb(11 53 56 / 18%), rgb(11 53 56 / 18%)),
    var(--tc-cloth, none) center / 480px auto repeat,
    #17494c !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root [data-page="rank"].rank-page .feature-page-heading {
  border-color: rgb(185 154 85 / 42%) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root [data-page="rank"].rank-page [data-role="rank-page-title"] {
  color: var(--tc-ink, #eee3bd) !important;
  text-shadow: 0 1px 1px #082d31;
}

html[data-ui-theme="teal-cloud-a"] #game-root [data-page="rank"].rank-page [data-action="leave-rank"] {
  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 [data-page="rank"].rank-page .rank-tab:not(.is-active) {
  border-color: #879e88 !important;
  background:
    linear-gradient(145deg, rgb(246 242 217 / 38%), transparent 58%),
    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 / 48%) !important;
  text-shadow: none;
}

html[data-ui-theme="teal-cloud-a"] #game-root [data-page="rank"].rank-page .rank-tab.is-active {
  border-color: var(--tc-gold, #d6ba78) !important;
  background:
    linear-gradient(145deg, rgb(52 116 111 / 62%), rgb(23 75 77 / 76%)),
    var(--tc-cloth, none) !important;
  color: #f4d995 !important;
  box-shadow:
    inset 0 0 0 1px rgb(234 210 145 / 24%),
    0 1px 2px rgb(3 32 34 / 28%) !important;
  text-shadow: 0 1px 0 #123b3b;
}

html[data-ui-theme="teal-cloud-a"] #game-root [data-page="rank"].rank-page .rank-tab:focus-visible,
html[data-ui-theme="teal-cloud-a"] #game-root [data-page="rank"].rank-page .rank-player-button:focus-visible {
  outline-color: #ead294;
}

html[data-ui-theme="teal-cloud-a"] #game-root [data-page="rank"].rank-page [data-role="rank-table"] {
  color: var(--tc-ink, #eee3bd) !important;
  background: transparent !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root [data-page="rank"].rank-page [data-role="rank-table-header"] {
  border-color: rgb(185 154 85 / 46%) !important;
  background: rgb(10 55 57 / 54%) !important;
  color: var(--tc-muted, #bbcbbf) !important;
  box-shadow: inset 0 0 0 1px rgb(219 191 119 / 7%) !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root [data-page="rank"].rank-page [data-role="rank-table-header"] > span {
  color: #d8d8b9 !important;
  text-shadow: 0 1px 0 rgb(3 35 37 / 62%);
}

html[data-ui-theme="teal-cloud-a"] #game-root [data-page="rank"].rank-page :is(
  [data-role="rank-list"],
  [data-role="rank-self"]
) .rank-table__row {
  border-color: rgb(185 154 85 / 44%) !important;
  background:
    linear-gradient(125deg, rgb(74 130 119 / 24%), rgb(13 63 64 / 50%)),
    var(--tc-cloth, none) !important;
  color: var(--tc-ink, #eee3bd) !important;
  box-shadow: inset 0 0 0 1px rgb(221 195 125 / 8%) !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root [data-page="rank"].rank-page :is(
  [data-role="rank-list"],
  [data-role="rank-self"]
) .rank-table__row.is-current-player {
  border-color: var(--tc-gold, #d6ba78) !important;
  background:
    linear-gradient(125deg, rgb(92 143 124 / 40%), rgb(28 78 73 / 66%)),
    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 / 20%) !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root [data-page="rank"].rank-page .rank-table__rank {
  color: #e2c476 !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root [data-page="rank"].rank-page .rank-table__row :is(
  .rank-table__name,
  .rank-table__age,
  .rank-table__value
) {
  color: var(--tc-ink, #eee3bd) !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root [data-page="rank"].rank-page .rank-player-button {
  color: var(--tc-ink, #eee3bd) !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration-color: rgb(226 196 118 / 62%) !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root [data-page="rank"].rank-page .rank-player-button:hover,
html[data-ui-theme="teal-cloud-a"] #game-root [data-page="rank"].rank-page .rank-player-button:focus-visible {
  color: #f3d78f !important;
  text-decoration-color: #e2c476 !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root [data-page="rank"].rank-page [data-role="rank-self"] {
  border-top-color: rgb(185 154 85 / 48%) !important;
  background: transparent !important;
  color: var(--tc-muted, #bbcbbf) !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root [data-page="rank"].rank-page [data-role="rank-self"] > strong {
  color: #ead294 !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root [data-page="rank"].rank-page :is(
  [data-role="rank-empty"],
  [data-role="rank-status"]
) {
  color: var(--tc-muted, #bbcbbf) !important;
  background: transparent !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root [data-page="rank"].rank-page [data-role="rank-status"][data-state="error"] {
  color: #ffc8ab !important;
}

/* Player information is themed only while the main rank page owns it. */
html[data-ui-theme="teal-cloud-a"] #game-root[data-active-page="rank"] dialog[data-role="async-duel-dialog"] {
  --tc-rank-dialog-ink: var(--tc-ink, #eee3bd);
  --tc-rank-dialog-muted: var(--tc-muted, #bbcbbf);
  border-color: var(--tc-gold, #d6ba78) !important;
  background-color: #103f42 !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-rank-dialog-ink) !important;
  box-shadow: 0 8px 20px rgb(3 25 28 / 38%) !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root[data-active-page="rank"] dialog[data-role="async-duel-dialog"]::backdrop {
  background: rgb(4 31 35 / 72%);
}

html[data-ui-theme="teal-cloud-a"] #game-root[data-active-page="rank"] dialog[data-role="async-duel-dialog"] > .attribute-modal__content {
  color: var(--tc-rank-dialog-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
  scrollbar-color: #9e8a59 #123f42;
}

html[data-ui-theme="teal-cloud-a"] #game-root[data-active-page="rank"] dialog[data-role="async-duel-dialog"] .attribute-modal__heading {
  border-bottom-color: rgb(217 191 122 / 52%) !important;
}

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

html[data-ui-theme="teal-cloud-a"] #game-root[data-active-page="rank"] dialog[data-role="async-duel-dialog"] .attribute-modal__close {
  border-color: rgb(217 191 122 / 66%) !important;
  background: rgb(18 71 70 / 90%) !important;
  color: #ead294 !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[data-active-page="rank"] dialog[data-role="async-duel-dialog"] .async-duel-status {
  color: var(--tc-rank-dialog-muted) !important;
  background: transparent !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root[data-active-page="rank"] dialog[data-role="async-duel-dialog"] .async-duel-avatar {
  border-color: rgb(185 154 85 / 58%) !important;
  background: rgb(216 223 198 / 92%) !important;
  color: #214a46 !important;
  box-shadow: inset 0 0 0 2px rgb(23 76 76 / 16%) !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root[data-active-page="rank"] dialog[data-role="async-duel-dialog"] .async-duel-identity dt,
html[data-ui-theme="teal-cloud-a"] #game-root[data-active-page="rank"] dialog[data-role="async-duel-dialog"] .async-duel-stats dt {
  color: var(--tc-rank-dialog-muted) !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root[data-active-page="rank"] dialog[data-role="async-duel-dialog"] .async-duel-identity dd,
html[data-ui-theme="teal-cloud-a"] #game-root[data-active-page="rank"] dialog[data-role="async-duel-dialog"] .async-duel-stats dd {
  color: var(--tc-rank-dialog-ink) !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root[data-active-page="rank"] dialog[data-role="async-duel-dialog"] .async-duel-section {
  border-color: rgb(185 154 85 / 42%) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root[data-active-page="rank"] dialog[data-role="async-duel-dialog"] .async-duel-stats > div {
  border-color: rgb(185 154 85 / 44%) !important;
  background:
    linear-gradient(125deg, rgb(74 130 119 / 24%), rgb(13 63 64 / 50%)),
    var(--tc-cloth, none) !important;
  color: var(--tc-rank-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[data-active-page="rank"] dialog[data-role="async-duel-dialog"] .async-duel-actions {
  background: transparent !important;
  box-shadow: none !important;
}

html[data-ui-theme="teal-cloud-a"] #game-root[data-active-page="rank"] dialog[data-role="async-duel-dialog"] .async-duel-challenge-button:not(:disabled) {
  border-color: var(--tc-gold, #d6ba78) !important;
  background: linear-gradient(145deg, #34746f, #174b4d) !important;
  color: #fff0c4 !important;
  box-shadow:
    inset 0 0 0 1px rgb(234 210 145 / 25%),
    0 1px 2px rgb(3 32 34 / 34%) !important;
  text-shadow: 0 1px 0 #123b3b;
}

html[data-ui-theme="teal-cloud-a"] #game-root[data-active-page="rank"] dialog[data-role="async-duel-dialog"] .async-duel-challenge-button:disabled {
  border-color: rgb(125 145 128 / 60%) !important;
  background: #55716a !important;
  color: #d4d8c2 !important;
  box-shadow: none !important;
}