/* Reinos comerciales y escudos v0.68.0. */
#sgl-desktop-app .sgl-level-track {
  --sgl-route-width: 0%;
  gap: 14px !important;
  padding: 48px 30px 32px !important;
  grid-template-columns: repeat(6, minmax(158px, 1fr)) !important;
}

#sgl-desktop-app .sgl-level-track::before {
  top: 99px !important;
  left: 8% !important;
  right: 8% !important;
  height: 14px !important;
  border: 2px solid #294963 !important;
  border-radius: 20px !important;
  background: repeating-linear-gradient(90deg,#485d72 0 12px,#263e57 12px 23px,#152b42 23px 34px) !important;
  box-shadow: inset 0 2px 5px #0009 !important;
  animation: none !important;
}

#sgl-desktop-app .sgl-level-track::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 99px;
  left: 8%;
  width: var(--sgl-route-width, 0%);
  height: 14px;
  box-sizing: border-box;
  border: 2px solid #65e8ff;
  border-radius: 20px;
  background: repeating-linear-gradient(90deg,#65efff 0 12px,#1683ed 12px 23px,#0e57b5 23px 34px);
  box-shadow: inset 0 2px 4px #fff6,0 0 18px #2dcfffaa;
  pointer-events: none;
  transition: width .65s cubic-bezier(.2,.8,.2,1);
}

#sgl-desktop-app .sgl-level-node {
  --realm-light: #35d8ff;
  --realm-main: #087bf2;
  --realm-dark: #113d92;
  min-width: 158px !important;
  cursor: pointer;
  border-radius: 20px;
  outline: none;
  isolation: isolate;
}

#sgl-desktop-app .sgl-level-node:nth-child(2){--realm-light:#5ae5d3;--realm-main:#0cae9f;--realm-dark:#075c69}
#sgl-desktop-app .sgl-level-node:nth-child(3){--realm-light:#ffd66c;--realm-main:#d68b10;--realm-dark:#74400a}
#sgl-desktop-app .sgl-level-node:nth-child(4){--realm-light:#70ec9e;--realm-main:#1dbb63;--realm-dark:#09643d}
#sgl-desktop-app .sgl-level-node:nth-child(5){--realm-light:#ffb463;--realm-main:#eb6728;--realm-dark:#8e2b17}
#sgl-desktop-app .sgl-level-node:nth-child(6){--realm-light:#d698ff;--realm-main:#824be2;--realm-dark:#3a217c}

#sgl-desktop-app .sgl-level-node > i {
  position: relative !important;
  width: 106px !important;
  height: 122px !important;
  margin: 0 auto 13px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: polygon(50% 0,91% 14%,96% 54%,79% 84%,50% 100%,21% 84%,4% 54%,9% 14%) !important;
  background: radial-gradient(circle at 38% 25%,#ffffff99,transparent 22%),linear-gradient(145deg,var(--realm-light),var(--realm-main) 48%,var(--realm-dark)) !important;
  color: #fff !important;
  font-size: 34px !important;
  text-shadow: 0 3px 0 #05244f;
  box-shadow: none !important;
  filter: drop-shadow(0 7px 0 #031631) drop-shadow(0 0 13px color-mix(in srgb,var(--realm-light) 65%,transparent)) !important;
  transition: transform .22s ease,filter .22s ease;
}

#sgl-desktop-app .sgl-level-node > i::after {
  content: "" !important;
  position: absolute !important;
  inset: 8px !important;
  clip-path: inherit !important;
  border: 3px solid #fff9bd !important;
  background: linear-gradient(145deg,#ffffff28,transparent 48%) !important;
  pointer-events: none !important;
}

#sgl-desktop-app .sgl-level-node:hover > i,
#sgl-desktop-app .sgl-level-node:focus-visible > i {transform:translateY(-7px) scale(1.05)}
#sgl-desktop-app .sgl-level-node:focus-visible {box-shadow:0 0 0 4px #051b38,0 0 0 7px #58dbff}
#sgl-desktop-app .sgl-level-node > b {top:-18px !important;z-index:4 !important}
#sgl-desktop-app .sgl-level-node > strong {display:block;min-height:40px;margin:8px auto 0!important;max-width:160px;color:#fff!important;font-size:15px!important;line-height:1.18;text-shadow:0 2px #020d22}
#sgl-desktop-app .sgl-level-node > .sgl-realm-type {display:block;margin-top:5px;color:#79dcff;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
#sgl-desktop-app .sgl-level-node > span {margin-top:9px!important}
#sgl-desktop-app .sgl-level-node.is-locked > i {background:linear-gradient(145deg,#60748a,#334960 58%,#192c43)!important;color:#aebdce!important;filter:drop-shadow(0 7px 0 #020b18)!important}
#sgl-desktop-app .sgl-level-node.is-locked > i::after {border-color:#8fa0b1!important}
#sgl-desktop-app .sgl-level-node.is-locked > .sgl-realm-type {color:#8294a9}

.sgl-realm-portal[hidden]{display:none!important}
.sgl-realm-portal{position:fixed;inset:0;z-index:1000000;display:grid;place-items:center;padding:22px;opacity:0;transition:opacity .22s ease}
.sgl-realm-portal.is-open{opacity:1}
.sgl-realm-backdrop{position:absolute;inset:0;background:rgba(2,10,28,.88);backdrop-filter:blur(9px)}
.sgl-realm-window{--realm-accent:#37cfff;position:relative;width:min(1080px,96vw);max-height:92vh;overflow:auto;border:3px solid var(--realm-accent);border-bottom:10px solid #03142e;border-radius:30px;background:#eaf5ff;box-shadow:0 0 0 5px #071f45,0 30px 90px #000b;transform:translateY(25px) scale(.96);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.sgl-realm-portal.is-open .sgl-realm-window{transform:none}
.sgl-realm-portal.is-green .sgl-realm-window{--realm-accent:#4ee6a1}
.sgl-realm-portal.is-purple .sgl-realm-window{--realm-accent:#c68cff}
.sgl-realm-close{position:absolute;z-index:5;top:17px;right:17px;width:46px;height:46px;border:3px solid #ffc0c6;border-radius:15px;background:linear-gradient(#ff6674,#c9223c);box-shadow:0 5px 0 #731125;color:#fff;font-size:22px;cursor:pointer}
.sgl-realm-scene{position:relative;min-height:310px;padding:48px 300px 38px 48px;overflow:hidden;color:#fff;background-position:center;background-size:cover;background-image:linear-gradient(90deg,rgba(2,18,47,.96) 0%,rgba(3,28,68,.79) 48%,rgba(3,20,51,.16)),url("images/area-backgrounds-v063/kingdom-blue.png")}
.sgl-realm-portal.is-green .sgl-realm-scene{background-image:linear-gradient(90deg,rgba(2,38,45,.96),rgba(4,67,67,.74) 53%,rgba(3,36,47,.12)),url("images/area-backgrounds-v063/operations-emerald.png")}
.sgl-realm-portal.is-purple .sgl-realm-scene{background-image:linear-gradient(90deg,rgba(25,13,67,.96),rgba(54,27,103,.74) 53%,rgba(28,12,65,.14)),url("images/area-backgrounds-v063/rewards-purple.png")}
.sgl-realm-scene>p{margin:0 0 8px;color:var(--realm-accent);font-size:11px;font-weight:1000;letter-spacing:.18em}
.sgl-realm-scene h2{margin:0;color:#fff;font:900 clamp(34px,5vw,58px)/.98 Georgia,serif;text-shadow:0 4px 0 #020b1c,0 0 25px #20bfff66}
.sgl-realm-scene blockquote{max-width:590px;margin:18px 0 0;color:#d9edff;font-size:18px;font-weight:700;line-height:1.5}
.sgl-realm-castle{position:absolute;right:46px;bottom:22px;display:flex;align-items:end;gap:4px;color:#c9ebff;filter:drop-shadow(0 12px 12px #0008)}
.sgl-realm-castle i{display:grid;place-items:center;width:70px;height:150px;border:4px solid #fff6;border-radius:18px 18px 5px 5px;background:linear-gradient(#42bfff99,#083c83dd);font-size:35px}
.sgl-realm-castle i:nth-child(2){height:205px;width:95px;color:#ffe16b;font-size:45px}.sgl-realm-castle i:nth-child(3){height:120px}
.sgl-realm-crest{position:absolute;top:24px;right:255px;width:72px;height:86px;display:grid;place-items:center;clip-path:polygon(50% 0,94% 18%,86% 75%,50% 100%,14% 75%,6% 18%);background:linear-gradient(145deg,#ffe779,#d99000);color:#082b62;font-size:36px;filter:drop-shadow(0 7px 0 #5c3000)}
.sgl-realm-crest b{position:absolute;color:#fff;font:900 17px/1 system-ui;text-shadow:0 2px #07162f}
.sgl-realm-content{padding:25px 30px 30px;background:linear-gradient(180deg,#f4faff,#e1f0ff)}
.sgl-realm-status{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px}
.sgl-realm-status>span,.sgl-realm-status>strong{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:#0a315e;color:#fff;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.07em}
.sgl-realm-status>span.is-current{background:#0c9d62}.sgl-realm-status>span.is-locked{background:#637184}.sgl-realm-status>strong{color:#543000;background:#ffe389}
.sgl-realm-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.sgl-realm-grid section{display:grid;grid-template-columns:54px 1fr;gap:14px;align-items:start;padding:18px;border:2px solid #c1dcf4;border-radius:18px;background:#fff;box-shadow:0 5px 0 #b4cce2}
.sgl-realm-grid section>i{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:linear-gradient(#35cfff,#0872ed);box-shadow:0 4px 0 #064694;color:#fff;font-size:22px}
.sgl-realm-grid small{color:#1475d8;font-size:9px;font-weight:1000;letter-spacing:.13em}.sgl-realm-grid h3{margin:4px 0 6px;color:#071a38;font-size:16px}.sgl-realm-grid p{margin:0;color:#42536c;font-size:13px;line-height:1.5}
.sgl-realm-content aside{display:flex;gap:14px;align-items:center;margin-top:20px;padding:15px 18px;border:2px solid #e4b33a;border-radius:17px;background:linear-gradient(#fff9d9,#ffe9a7);color:#56380a}.sgl-realm-content aside>i{font-size:27px}.sgl-realm-content aside p{margin:0;line-height:1.45}
.sgl-realm-confirm{display:block;margin:20px auto 0;min-width:210px;padding:13px 20px;border:2px solid #8aeaff;border-radius:15px;background:linear-gradient(#31c9ff,#0874ee);box-shadow:0 5px 0 #06438e;color:#fff;font-weight:900;cursor:pointer}

@media(max-width:900px){#sgl-desktop-app .sgl-level-track{grid-template-columns:repeat(6,165px)!important}.sgl-realm-scene{padding:42px 28px 180px}.sgl-realm-castle{right:24px;transform:scale(.72);transform-origin:right bottom}.sgl-realm-crest{right:28px}.sgl-realm-grid{grid-template-columns:1fr}.sgl-realm-status{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){.sgl-realm-portal,.sgl-realm-window,#sgl-desktop-app .sgl-level-node>i{transition:none!important}}
