/* Arte de reinos generado en PNG v0.69.0. */

/* Fondos luminosos, sin capa blanca general. */
#sgl-desktop-app .sgl-main:has(> .sgl-view[data-view="home"].is-active),
#sgl-desktop-app .sgl-main:has(> .sgl-view[data-view="lead"].is-active),
#sgl-desktop-app .sgl-main:has(> .sgl-view[data-view="progress"].is-active) {
  background-color: #bde6ff !important;
  background-image: url("images/kingdom-art-v069/background-blue-light.png") !important;
  background-position: center top !important;
  background-size: cover !important;
}

#sgl-desktop-app .sgl-main:has(> .sgl-view[data-view="contacts"].is-active),
#sgl-desktop-app .sgl-main:has(> .sgl-view[data-view="touches"].is-active),
#sgl-desktop-app .sgl-main:has(> .sgl-view[data-view="settings"].is-active),
#sgl-desktop-app .sgl-main:has(> .sgl-view[data-view="supervision"].is-active) {
  background-color: #c9f3e8 !important;
  background-image: url("images/kingdom-art-v069/background-emerald-light.png") !important;
  background-position: center top !important;
  background-size: cover !important;
}

#sgl-desktop-app .sgl-main:has(> .sgl-view[data-view="challenges"].is-active),
#sgl-desktop-app .sgl-main:has(> .sgl-view[data-view="rewards"].is-active),
#sgl-desktop-app .sgl-main:has(> .sgl-view[data-view="messages"].is-active) {
  background-color: #e4d9ff !important;
  background-image: url("images/kingdom-art-v069/background-violet-light.png") !important;
  background-position: center top !important;
  background-size: cover !important;
}

/* Cada reino usa un escudo ilustrado distinto. */
#sgl-desktop-app .sgl-level-node:nth-of-type(1),#sgl-desktop-app .sgl-level-node[data-realm="1"],.sgl-realm-portal.sgl-realm-1{--sgl-realm-shield:url("images/kingdom-art-v069/shield-memory.png")}
#sgl-desktop-app .sgl-level-node:nth-of-type(2),#sgl-desktop-app .sgl-level-node[data-realm="2"],.sgl-realm-portal.sgl-realm-2{--sgl-realm-shield:url("images/kingdom-art-v069/shield-reunion.png")}
#sgl-desktop-app .sgl-level-node:nth-of-type(3),#sgl-desktop-app .sgl-level-node[data-realm="3"],.sgl-realm-portal.sgl-realm-3{--sgl-realm-shield:url("images/kingdom-art-v069/shield-decision.png")}
#sgl-desktop-app .sgl-level-node:nth-of-type(4),#sgl-desktop-app .sgl-level-node[data-realm="4"],.sgl-realm-portal.sgl-realm-4{--sgl-realm-shield:url("images/kingdom-art-v069/shield-growth.png")}
#sgl-desktop-app .sgl-level-node:nth-of-type(5),#sgl-desktop-app .sgl-level-node[data-realm="5"],.sgl-realm-portal.sgl-realm-5{--sgl-realm-shield:url("images/kingdom-art-v069/shield-present.png")}
#sgl-desktop-app .sgl-level-node:nth-of-type(6),#sgl-desktop-app .sgl-level-node[data-realm="6"],.sgl-realm-portal.sgl-realm-6{--sgl-realm-shield:url("images/kingdom-art-v069/shield-uchat.png")}

#sgl-desktop-app .sgl-level-node > i {
  width: 126px !important;
  height: 142px !important;
  clip-path: none !important;
  border: 0 !important;
  background-color: transparent !important;
  background-image: var(--sgl-realm-shield) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 8px 0 #031631) drop-shadow(0 0 15px rgba(61,207,255,.54)) !important;
}

#sgl-desktop-app .sgl-level-node > i::before,
#sgl-desktop-app .sgl-level-node > i::after {display:none !important}

#sgl-desktop-app .sgl-level-node.is-locked > i {
  background-image: var(--sgl-realm-shield) !important;
  background-color: transparent !important;
  display: block !important;
  visibility: visible !important;
  filter: grayscale(1) saturate(.25) brightness(.7) contrast(1.12) drop-shadow(0 8px 0 #020b18) !important;
  opacity: .82 !important;
}

/* Reserva directa por etapa para que ningún estado bloqueado quede vacío. */
#sgl-desktop-app .sgl-level-node:nth-of-type(1) > i,#sgl-desktop-app .sgl-level-node[data-realm="1"] > i{background-image:url("images/kingdom-art-v069/shield-memory.png")!important}
#sgl-desktop-app .sgl-level-node:nth-of-type(2) > i,#sgl-desktop-app .sgl-level-node[data-realm="2"] > i{background-image:url("images/kingdom-art-v069/shield-reunion.png")!important}
#sgl-desktop-app .sgl-level-node:nth-of-type(3) > i,#sgl-desktop-app .sgl-level-node[data-realm="3"] > i{background-image:url("images/kingdom-art-v069/shield-decision.png")!important}
#sgl-desktop-app .sgl-level-node:nth-of-type(4) > i,#sgl-desktop-app .sgl-level-node[data-realm="4"] > i{background-image:url("images/kingdom-art-v069/shield-growth.png")!important}
#sgl-desktop-app .sgl-level-node:nth-of-type(5) > i,#sgl-desktop-app .sgl-level-node[data-realm="5"] > i{background-image:url("images/kingdom-art-v069/shield-present.png")!important}
#sgl-desktop-app .sgl-level-node:nth-of-type(6) > i,#sgl-desktop-app .sgl-level-node[data-realm="6"] > i{background-image:url("images/kingdom-art-v069/shield-uchat.png")!important}

#sgl-desktop-app .sgl-level-node.is-current > i {
  filter: drop-shadow(0 8px 0 #4b2a00) drop-shadow(0 0 23px #ffe16b) !important;
}

/* El mismo escudo aparece en la vista del reino. */
.sgl-realm-crest {
  top: 26px !important;
  right: 246px !important;
  width: 118px !important;
  height: 142px !important;
  clip-path: none !important;
  background: var(--sgl-realm-shield) center/contain no-repeat !important;
  color: transparent !important;
  filter: drop-shadow(0 9px 0 rgba(19,30,60,.48)) drop-shadow(0 0 18px rgba(255,230,117,.46)) !important;
}
.sgl-realm-crest > i {display:none !important}
.sgl-realm-crest > b {
  left: 50%;
  bottom: -3px;
  top: auto;
  transform: translateX(-50%);
  min-width: 35px;
  padding: 6px 9px;
  border: 2px solid #fff2a4;
  border-radius: 999px;
  color: #4a2900 !important;
  background: linear-gradient(#ffe96f,#f4aa08);
  box-shadow: 0 4px 0 #8c4e00;
  text-align: center;
}

/* Escenarios claros en el portal: la imagen permanece visible completa. */
.sgl-realm-scene {
  isolation: isolate;
  background-image: url("images/kingdom-art-v069/background-blue-light.png") !important;
}
.sgl-realm-portal.is-green .sgl-realm-scene {background-image:url("images/kingdom-art-v069/background-emerald-light.png") !important}
.sgl-realm-portal.is-purple .sgl-realm-scene {background-image:url("images/kingdom-art-v069/background-violet-light.png") !important}
.sgl-realm-scene::after {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0 32% 0 0;
  background:linear-gradient(90deg,rgba(238,248,255,.96),rgba(232,246,255,.79) 62%,transparent);
  pointer-events:none;
}
.sgl-realm-scene > p {color:#0877c8 !important;text-shadow:none !important}
.sgl-realm-scene h2 {color:#08224a !important;text-shadow:0 2px #fff,0 0 20px #fff !important}
.sgl-realm-scene blockquote {color:#173b63 !important;text-shadow:0 1px #fff}
.sgl-realm-castle {opacity:.74}

@media(max-width:900px){
  #sgl-desktop-app .sgl-main{background-position:center top!important;background-size:auto 100vh!important}
  .sgl-realm-crest{right:22px!important;width:92px!important;height:112px!important}
  .sgl-realm-scene::after{inset:0;background:linear-gradient(180deg,rgba(241,249,255,.94),rgba(235,247,255,.7) 66%,transparent)}
}

/* Fondos desenfocados v0.71.0. La capa artística se separa del contenido. */
#sgl-desktop-app .sgl-main {
  position: relative !important;
  isolation: isolate !important;
}
#sgl-desktop-app .sgl-main:has(> .sgl-view[data-view="home"].is-active),
#sgl-desktop-app .sgl-main:has(> .sgl-view[data-view="lead"].is-active),
#sgl-desktop-app .sgl-main:has(> .sgl-view[data-view="progress"].is-active) {
  --sgl-soft-realm-bg: url("images/kingdom-art-v069/background-blue-light.png");
  background-image: none !important;
}
#sgl-desktop-app .sgl-main:has(> .sgl-view[data-view="contacts"].is-active),
#sgl-desktop-app .sgl-main:has(> .sgl-view[data-view="touches"].is-active),
#sgl-desktop-app .sgl-main:has(> .sgl-view[data-view="settings"].is-active),
#sgl-desktop-app .sgl-main:has(> .sgl-view[data-view="supervision"].is-active) {
  --sgl-soft-realm-bg: url("images/kingdom-art-v069/background-emerald-light.png");
  background-image: none !important;
}
#sgl-desktop-app .sgl-main:has(> .sgl-view[data-view="challenges"].is-active),
#sgl-desktop-app .sgl-main:has(> .sgl-view[data-view="rewards"].is-active),
#sgl-desktop-app .sgl-main:has(> .sgl-view[data-view="messages"].is-active) {
  --sgl-soft-realm-bg: url("images/kingdom-art-v069/background-violet-light.png");
  background-image: none !important;
}
#sgl-desktop-app .sgl-main::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -18px;
  background-color: inherit;
  background-image: var(--sgl-soft-realm-bg);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(10px) saturate(.76) contrast(.86) brightness(1.08);
  opacity: .62;
  transform: scale(1.025);
  pointer-events: none;
}
#sgl-desktop-app .sgl-main > .sgl-view {
  position: relative;
  z-index: 1;
}

/* El detalle de cada reino también conserva nítidos escudo, textos y tarjetas. */
.sgl-realm-scene {
  --sgl-soft-portal-bg: url("images/kingdom-art-v069/background-blue-light.png");
  position: relative;
  background-image: none !important;
  overflow: hidden;
}
.sgl-realm-portal.is-green .sgl-realm-scene {--sgl-soft-portal-bg:url("images/kingdom-art-v069/background-emerald-light.png");background-image:none!important}
.sgl-realm-portal.is-purple .sgl-realm-scene {--sgl-soft-portal-bg:url("images/kingdom-art-v069/background-violet-light.png");background-image:none!important}
.sgl-realm-scene::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -16px;
  background: var(--sgl-soft-portal-bg) center/cover no-repeat;
  filter: blur(9px) saturate(.75) contrast(.86) brightness(1.08);
  opacity: .68;
  transform: scale(1.035);
  pointer-events: none;
}
.sgl-realm-scene::after {z-index:1!important}
.sgl-realm-scene > * {position:relative;z-index:2}
/* Scrollbars contenidos v0.72.0. */
#sgl-desktop-app .sgl-main {
  overflow-x: clip !important;
}
#sgl-desktop-app .sgl-main::before {
  inset: 0 !important;
  transform: none !important;
}

/* Riel de videojuego común para la página y todos los paneles desplazables. */
body:has(#sgl-desktop-app),
#sgl-desktop-app,
#sgl-desktop-app * {
  scrollbar-width: thin;
  scrollbar-color: #22bdf5 #082b52;
}
body:has(#sgl-desktop-app)::-webkit-scrollbar,
#sgl-desktop-app::-webkit-scrollbar,
#sgl-desktop-app *::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
body:has(#sgl-desktop-app)::-webkit-scrollbar-track,
#sgl-desktop-app::-webkit-scrollbar-track,
#sgl-desktop-app *::-webkit-scrollbar-track {
  margin: 7px 0;
  border: 2px solid #1d5f91;
  border-radius: 999px;
  background: #061f40;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.55),0 0 0 1px rgba(83,205,255,.18);
}
body:has(#sgl-desktop-app)::-webkit-scrollbar-thumb,
#sgl-desktop-app::-webkit-scrollbar-thumb,
#sgl-desktop-app *::-webkit-scrollbar-thumb {
  min-height: 42px;
  border: 2px solid #061f40;
  border-radius: 999px;
  background: linear-gradient(180deg,#83efff 0,#20b9f5 42%,#0875dc 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.72),0 0 8px rgba(37,194,255,.65);
}
body:has(#sgl-desktop-app)::-webkit-scrollbar-thumb:hover,
#sgl-desktop-app::-webkit-scrollbar-thumb:hover,
#sgl-desktop-app *::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,#d5fbff 0,#47d8ff 42%,#1189ed 100%);
}
body:has(#sgl-desktop-app)::-webkit-scrollbar-button,
#sgl-desktop-app::-webkit-scrollbar-button,
#sgl-desktop-app *::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
body:has(#sgl-desktop-app)::-webkit-scrollbar-corner,
#sgl-desktop-app::-webkit-scrollbar-corner,
#sgl-desktop-app *::-webkit-scrollbar-corner {
  background: #061f40;
}

#sgl-desktop-app .sgl-tip-scroll,
#sgl-desktop-app .sgl-level-track,
#sgl-desktop-app .sgl-rank-dialog,
#sgl-desktop-app .sgl-product-catalog [data-product-body] {
  max-width: 100%;
  box-sizing: border-box;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
/* Escudos como imagen real v0.73.0: independientes de fondos y clases. */
#sgl-desktop-app .sgl-level-node > i > .sgl-realm-shield-img {
  position: absolute !important;
  z-index: 2 !important;
  inset: 0 !important;
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  pointer-events: none !important;
}
#sgl-desktop-app .sgl-level-node.is-locked > i > .sgl-realm-shield-img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* v0.74.0 - Mi progreso sin marco exterior duplicado. */
#sgl-desktop-app .sgl-view[data-view="progress"] {
  border: 0 !important;
  outline: 0 !important;
}

#sgl-desktop-app .sgl-view[data-view="progress"]::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
}
/* v0.75.0 - Escenas urbanas exclusivas y nítidas para el detalle de cada reino. */
.sgl-realm-portal.sgl-realm-1 {--sgl-realm-street:url("images/realm-streets-v075/street-memory.png")}
.sgl-realm-portal.sgl-realm-2 {--sgl-realm-street:url("images/realm-streets-v075/street-reunion.png")}
.sgl-realm-portal.sgl-realm-3 {--sgl-realm-street:url("images/realm-streets-v075/street-decision.png")}
.sgl-realm-portal.sgl-realm-4 {--sgl-realm-street:url("images/realm-streets-v075/street-growth.png")}
.sgl-realm-portal.sgl-realm-5 {--sgl-realm-street:url("images/realm-streets-v075/street-present.png")}
.sgl-realm-portal.sgl-realm-6 {--sgl-realm-street:url("images/realm-streets-v075/street-uchat.png")}

.sgl-realm-portal .sgl-realm-scene,
.sgl-realm-portal.is-green .sgl-realm-scene,
.sgl-realm-portal.is-purple .sgl-realm-scene {
  background-image: var(--sgl-realm-street) !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
.sgl-realm-portal .sgl-realm-scene::before {
  content: none !important;
  display: none !important;
  filter: none !important;
  opacity: 0 !important;
  transform: none !important;
}
.sgl-realm-portal .sgl-realm-scene::after {
  z-index: 1 !important;
  inset: 0 !important;
  background: linear-gradient(90deg,rgba(240,249,255,.94) 0%,rgba(237,248,255,.82) 38%,rgba(237,248,255,.32) 61%,rgba(237,248,255,.05) 100%) !important;
}
@media(max-width:900px){
  .sgl-realm-portal .sgl-realm-scene::after {
    background:linear-gradient(180deg,rgba(240,249,255,.90) 0%,rgba(237,248,255,.66) 56%,rgba(237,248,255,.10) 100%) !important;
  }
}