/* Style A is a visual skin only. Original CSS owns all content geometry and typography. */
html[data-ui-theme="teal-cloud-a"] #game-root {
  --tc-world: url('../assets/images/themes/teal-cloud-a/world.webp');
  --tc-cloth: url('../assets/images/themes/teal-cloud-a/cloth.webp');
  --tc-panel-art: url('../assets/images/themes/teal-cloud-a/panel.webp');
  --tc-frame-art: var(--tc-panel-art);
  --tc-button-art: url('../assets/images/themes/teal-cloud-a/button.webp');
  --tc-active-button-art: var(--tc-panel-art);
  --tc-slot-empty-art: url('../assets/images/themes/teal-cloud-a/empty-slot.webp');
  --tc-slot-filled-art: var(--tc-button-art);
  --tc-ink: #eee3bd;
  --tc-muted: #bbcbbf;
  --tc-gold: #d6ba78;
}

html[data-ui-theme="teal-cloud-a"] #game-root:is([data-active-page="bag"], [data-active-page="attribute"], [data-active-page="dungeon"], [data-active-page="rank"]) {
  background: var(--tc-world) center / 100% 100% no-repeat, #103c40;
}
html[data-ui-theme="teal-cloud-a"] #game-root:is([data-active-page="bag"], [data-active-page="attribute"], [data-active-page="dungeon"], [data-active-page="rank"])::after {
  border-color: #b8a576;
}
html[data-ui-theme="teal-cloud-a"] #game-root:is([data-active-page="bag"], [data-active-page="attribute"], [data-active-page="dungeon"], [data-active-page="rank"]) #app {
  background: transparent;
}
html[data-ui-theme="teal-cloud-a"] #game-root:is([data-active-page="bag"], [data-active-page="attribute"], [data-active-page="dungeon"], [data-active-page="rank"]) .game-header {
  background: transparent !important;
  box-shadow: none;
}
html[data-ui-theme="teal-cloud-a"] #game-root:is([data-active-page="bag"], [data-active-page="attribute"], [data-active-page="dungeon"], [data-active-page="rank"]) .game-header h1 {
  color: #efdab0;
  text-shadow: 0 1px 1px #102f31;
}
html[data-ui-theme="teal-cloud-a"] #game-root:is([data-active-page="bag"], [data-active-page="attribute"], [data-active-page="dungeon"], [data-active-page="rank"]) .game-header__subtitle {
  color: #f0e9c6;
}
html[data-ui-theme="teal-cloud-a"] #game-root:is([data-active-page="bag"], [data-active-page="attribute"], [data-active-page="dungeon"], [data-active-page="rank"]) .game-content {
  background: transparent;
}
/* Keep ornamental layers behind the original controls without moving them. */
html[data-ui-theme="teal-cloud-a"] #game-root .page-panel.bag-panel {
  isolation: isolate;
}
html[data-ui-theme="teal-cloud-a"] #game-root:is([data-active-page="bag"], [data-active-page="attribute"], [data-active-page="dungeon"], [data-active-page="rank"]) .page-panel.bag-panel::before {
  content: "" !important;
  position: absolute;
  inset: 0 5px 5px;
  border: 22px solid transparent;
  border-image: var(--tc-frame-art) 72 / 22px / 0 stretch;
  background: none;
  box-shadow: none;
  border-radius: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 1;
}
html[data-ui-theme="teal-cloud-a"] #game-root:is([data-active-page="bag"], [data-active-page="attribute"], [data-active-page="dungeon"], [data-active-page="rank"]) .page-panel.bag-panel::after {
  content: "" !important;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: 150px;
  background: var(--tc-world) center bottom / 480px 920px no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 32%, transparent 79%, #000), linear-gradient(transparent, #000 65%);
  mask-image: linear-gradient(90deg, #000, transparent 32%, transparent 79%, #000), linear-gradient(transparent, #000 65%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  border: 0;
  box-shadow: none;
  pointer-events: none;
  z-index: -1;
  opacity: .9;
}
html[data-ui-theme="teal-cloud-a"] #game-root:is([data-active-page="bag"], [data-active-page="attribute"], [data-active-page="dungeon"], [data-active-page="rank"]) .bottom-nav {
  background: transparent !important;
  box-shadow: none;
}
html[data-ui-theme="teal-cloud-a"] #game-root:is([data-active-page="bag"], [data-active-page="attribute"], [data-active-page="dungeon"], [data-active-page="rank"]) .bottom-nav button {
  border-color: #b6a36c;
  background: linear-gradient(#092e36aa, #153d4166), var(--tc-slot-empty-art) center / 100% 100% no-repeat, #133d41 !important;
  color: #f1e7c3;
  text-shadow: 0 1px 1px #082f33;
  box-shadow: none;
}
html[data-ui-theme="teal-cloud-a"] #game-root:is([data-active-page="bag"], [data-active-page="attribute"], [data-active-page="dungeon"], [data-active-page="rank"]) .bottom-nav button::after {
  background: none;
  border-color: #d0b36f55;
  opacity: 1;
  box-shadow: none;
}
html[data-ui-theme="teal-cloud-a"] #game-root:is([data-active-page="bag"], [data-active-page="attribute"], [data-active-page="dungeon"], [data-active-page="rank"]) .bottom-nav button.is-active {
  color: #f6d68a;
  border-color: #ecd08a;
  background: linear-gradient(#1e5e6177, #27746c22), var(--tc-slot-empty-art) center / 100% 100% no-repeat !important;
  box-shadow: inset 0 0 0 1px #d4b364, 0 0 5px #e2bf7577;
}
/* Existing navigation icon masks and item images stay unchanged. */

/* The battlefield uses weathered jade and bronze within the same frame. */
html[data-ui-theme="teal-cloud-a"] #game-root:has(.dungeon-panel.is-realm-battlefield:not([hidden])) {
  background: linear-gradient(180deg, #40675cc7, #577b6577 50px, transparent 300px),
    var(--tw-wallpaper) center / 100% 100% no-repeat, #879c90;
}
html[data-ui-theme="teal-cloud-a"] #game-root:has(.dungeon-panel.is-realm-battlefield:not([hidden]))::after {
  border-color: #a88a52;
}
html[data-ui-theme="teal-cloud-a"] #game-root:has(.dungeon-panel.is-realm-battlefield:not([hidden])) .bottom-nav button {
  background: var(--tw-button-corners), linear-gradient(130deg, #5b7b70, #3f665b) !important;
  border-color: #88774e;
  color: #f4ebd1;
  box-shadow: inset 0 1px 0 #e7cb8c18;
}
html[data-ui-theme="teal-cloud-a"] #game-root:has(.dungeon-panel.is-realm-battlefield:not([hidden])) .bottom-nav button.is-active {
  background: var(--tw-button-corners), linear-gradient(130deg, #8a704b, #596b52) !important;
  color: #f0ce8d;
  border-color: #c4a568;
  box-shadow: inset 0 0 0 1px #be9b5e44;
}

/* New list pilots reuse the approved ornamental frame behind the old content.
   Isolation changes painting order only; the original page box stays intact. */
html[data-ui-theme="teal-cloud-a"] #game-root :is(.rank-page[data-page="rank"], .dungeon-panel[data-page="dungeon"]:not(.is-realm-battlefield)) {
  isolation: isolate;
}
html[data-ui-theme="teal-cloud-a"] #game-root :is(.rank-page[data-page="rank"], .dungeon-panel[data-page="dungeon"]:not(.is-realm-battlefield))::before {
  content: "" !important;
  position: absolute;
  inset: 0 5px 5px;
  border: 22px solid transparent;
  border-image: var(--tc-frame-art) 72 / 22px / 0 stretch;
  background: none;
  box-shadow: none;
  border-radius: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 1;
}