/* Sweet Shift Saga v4.2.0.8 — Paged illustrated level map */

#screen-map.saga-map-screen {
  overflow: hidden;
  background: #89d9ff;
}

#screen-map .saga-topbar {
  position: relative;
  z-index: 50;
  min-height: 74px;
  padding: 8px 18px;
  display: grid;
  grid-template-columns: 48px 124px minmax(220px, 1fr) auto;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg,#17619a 0%,#0e477d 100%);
  border-bottom: 3px solid rgba(255,255,255,.28);
  box-shadow: 0 8px 24px rgba(13,54,91,.28);
}

#screen-map .round-nav-button {
  width: 42px;
  height: 42px;
  border: 2px solid rgba(255,255,255,.7);
  border-radius: 50%;
  background: linear-gradient(180deg,#7654c6,#4a2e91);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  box-shadow: 0 4px 0 #34216f,0 8px 16px rgba(19,20,70,.3);
}

.map-mini-logo {
  width: 118px;
  transform: rotate(-2deg);
  display: grid;
  justify-items: center;
  line-height: .82;
  color: #fff;
  text-shadow: 0 2px 0 #9a2c78,0 4px 7px rgba(26,24,80,.34);
  user-select: none;
}
.map-mini-logo span { font-size: 1rem; font-weight: 1000; color: #ff81c0; }
.map-mini-logo strong { font-size: 1.75rem; font-weight: 1000; color: #ffd13b; -webkit-text-stroke: 1px #883487; }
.map-mini-logo small { margin-top: 2px; padding: 2px 10px; border-radius: 8px; background: #ef5d91; font-size: .58rem; font-weight: 1000; letter-spacing: .12em; }

#screen-map .player-chip {
  justify-self: start;
  min-width: 270px;
  max-width: 360px;
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: 42px auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 10px;
  padding: 5px 12px 5px 6px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 18px;
  background: rgba(6,40,80,.62);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
#screen-map .player-chip .player-avatar { grid-row: 1 / 3; width: 40px; height: 40px; }
#screen-map .player-chip > div:nth-child(2) { display:flex; gap:6px; align-items:baseline; }
#screen-map .player-chip > div:nth-child(2) span { font-size:.72rem; font-weight:900; }
#screen-map .player-chip > div:nth-child(2) strong { font-size:.92rem; }
#screen-map .account-xp-track { height: 11px; border:2px solid #dbeaff; border-radius:999px; background:#173a66; overflow:hidden; }
#screen-map .account-xp-fill { display:block; height:100%; background:linear-gradient(90deg,#ffe13a,#ff9b29); }

#screen-map .world-heading { display: none !important; }

#screen-map .map-currency-strip {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
#screen-map .currency-pill {
  min-width: 74px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 16px;
  background: rgba(4,38,77,.66);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13);
}
#screen-map .currency-pill span { font-size: 1.15rem; }
#screen-map .currency-pill strong { font-size: .95rem; }

#screen-map .map-tool-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 38px) !important;
  gap: 6px !important;
  margin-left: 4px;
}
#screen-map .map-tool-square {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border: 2px solid rgba(255,255,255,.56) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg,#8057d1,#5533a0) !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: 0 3px 0 #38247c !important;
}
#screen-map .map-tool-square strong,
#screen-map .map-tool-square small { display:none !important; }
#screen-map .map-tool-icon { font-size:1rem !important; }

#screen-map .saga-map-shell {
  position: relative;
  height: calc(100dvh - 74px);
  min-height: 560px;
  padding: 0 !important;
  overflow: hidden !important;
  max-width: none !important;
  width: 100% !important;
}
#screen-map #world-tabs,
#screen-map #world-summary { display:none !important; }

#level-grid.map4208-world-map {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  display: block !important;
  background: transparent !important;
}
.map4208-shell { width:100%; height:100%; }
.map4208-scene {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 17% 19%,rgba(255,255,255,.88) 0 4%,rgba(255,255,255,0) 14%),
    linear-gradient(180deg,#88d9ff 0 42%,#d9f5ff 43% 51%,#77cc6d 52% 69%,#329f56 100%);
}
.map4208-scene::before {
  content:"";
  position:absolute;
  left:-5%; right:-5%; bottom:-12%;
  height:48%;
  z-index:-4;
  border-radius:50% 50% 0 0 / 28% 28% 0 0;
  background:
    radial-gradient(circle at 14% 36%,#ff76bb 0 2%,transparent 2.4%),
    radial-gradient(circle at 22% 48%,#ffd649 0 1.5%,transparent 2%),
    radial-gradient(circle at 68% 24%,#ee6ead 0 1.8%,transparent 2.2%),
    radial-gradient(circle at 81% 45%,#ffd85a 0 1.4%,transparent 1.9%),
    linear-gradient(180deg,#7ed267,#3da95b 70%,#268648);
}
.map4208-sky-glow {
  position:absolute;
  left:8%; top:5%;
  width:260px; height:260px;
  border-radius:50%;
  background:rgba(255,248,199,.68);
  filter:blur(2px);
  z-index:-5;
}
.map4208-distant-hills {
  position:absolute;
  left:-8%; right:-8%; bottom:25%;
  height:42%;
  z-index:-5;
  background:
    radial-gradient(ellipse at 15% 100%,#8ed995 0 33%,transparent 34%),
    radial-gradient(ellipse at 37% 100%,#a1e39b 0 29%,transparent 30%),
    radial-gradient(ellipse at 62% 100%,#77c981 0 35%,transparent 36%),
    radial-gradient(ellipse at 88% 100%,#99dd8d 0 30%,transparent 31%);
  opacity:.95;
}

/* World palette variations. */
.map4208-shell.world-2 .map4208-scene { background:linear-gradient(180deg,#8c9cff 0 42%,#e4dcff 43% 51%,#77c8aa 52%,#2f8f78 100%); }
.map4208-shell.world-3 .map4208-scene { background:linear-gradient(180deg,#7fcdf4 0 38%,#f1dcff 39% 50%,#a08ee2 51%,#59479d 100%); }
.map4208-shell.world-4 .map4208-scene { background:linear-gradient(180deg,#91ddff 0 41%,#ffe6f3 42% 51%,#e285b8 52%,#a54881 100%); }
.map4208-shell.world-5 .map4208-scene { background:linear-gradient(180deg,#f3c993 0 39%,#ffe9c9 40% 50%,#b77c52 51%,#6b3e2d 100%); }
.map4208-shell.world-6 .map4208-scene { background:linear-gradient(180deg,#6474b7 0 37%,#c8c8ef 38% 48%,#7a588e 49%,#3c2b56 100%); }

.map4208-world-banner {
  position: absolute;
  z-index: 18;
  left: 50%;
  top: 28px;
  transform: translateX(-50%);
  width: min(420px,48vw);
  min-width: 330px;
  padding: 10px 44px 12px;
  border: 3px solid rgba(255,255,255,.42);
  border-radius: 18px 18px 24px 24px;
  background: linear-gradient(180deg,#3875c9,#214e9c);
  color:#fff;
  text-align:center;
  box-shadow:0 7px 0 #173e80,0 14px 28px rgba(31,52,111,.24),inset 0 2px 0 rgba(255,255,255,.24);
}
.map4208-world-banner::before,
.map4208-world-banner::after {
  content:"";
  position:absolute;
  top:19px;
  width:66px;
  height:44px;
  z-index:-1;
  background:linear-gradient(180deg,#2f69ba,#1f4b91);
  border-radius:12px;
  box-shadow:0 5px 0 #173e80;
}
.map4208-world-banner::before { left:-48px; transform:skewY(-8deg); }
.map4208-world-banner::after { right:-48px; transform:skewY(8deg); }
.map4208-world-banner small { display:block; font-size:.72rem; font-weight:1000; letter-spacing:.08em; text-transform:uppercase; opacity:.88; }
.map4208-world-banner strong { display:block; margin:2px 0 3px; font-size:1.65rem; line-height:1; font-weight:1000; text-shadow:0 2px 0 #183a79; }
.map4208-world-banner span { display:block; font-size:.72rem; font-weight:850; opacity:.9; }

.map4208-route {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:4;
  pointer-events:none;
}
.map4208-route-shadow {
  fill:none;
  stroke:rgba(101,80,54,.30);
  stroke-width:25;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.map4208-route-stones {
  fill:none;
  stroke:#fff4d9;
  stroke-width:18;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:6 20;
  filter:drop-shadow(0 3px 0 rgba(102,79,58,.28));
}

.map4208-node-layer { position:absolute; inset:0; z-index:10; }
.map4208-level-node {
  position:absolute;
  width:66px;
  height:84px;
  padding:0;
  border:0;
  background:transparent;
  transform:translate(-50%,-50%);
  overflow:visible;
  cursor:pointer;
  color:#fff;
  font:inherit;
}
.map4208-level-node:disabled { cursor:default; }
.map4208-node-disc {
  position:absolute;
  left:50%; top:0;
  transform:translateX(-50%);
  width:60px;
  height:52px;
  border-radius:50% 50% 44% 44%;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,#c56af0,#7b36c5);
  border:3px solid #f2d7ff;
  box-shadow:0 6px 0 #532893,0 10px 14px rgba(49,38,78,.24),inset 0 5px 7px rgba(255,255,255,.26);
  transition:transform .15s ease,filter .15s ease;
}
.map4208-node-disc::after {
  content:"";
  position:absolute;
  left:7px; right:7px; bottom:-8px;
  height:10px;
  border-radius:50%;
  background:#f8eddf;
  z-index:-1;
  box-shadow:0 3px 0 #cdb79c;
}
.map4208-node-disc strong { font-size:1.2rem; font-weight:1000; text-shadow:0 2px 0 rgba(70,27,115,.7); }
.map4208-level-node.passed .map4208-node-disc { background:linear-gradient(180deg,#f267b3,#c22c8d); border-color:#ffe3f5; box-shadow:0 6px 0 #8f216d,0 10px 14px rgba(70,30,68,.2),inset 0 5px 7px rgba(255,255,255,.28); }
.map4208-level-node.current .map4208-node-disc,
.map4208-level-node.finale .map4208-node-disc { background:linear-gradient(180deg,#ffd95a,#eda328); border-color:#fff4be; box-shadow:0 7px 0 #b87918,0 11px 16px rgba(102,64,18,.25),inset 0 5px 8px rgba(255,255,255,.34); }
.map4208-level-node.locked .map4208-node-disc { filter:grayscale(.65) saturate(.5); opacity:.68; background:linear-gradient(180deg,#aeb2c6,#737a95); box-shadow:0 6px 0 #555c74; }
.map4208-level-node.hard:not(.locked) .map4208-node-disc { outline:3px solid #ff9c36; outline-offset:1px; }
.map4208-level-node.very-hard:not(.locked) .map4208-node-disc,
.map4208-level-node.impossibly-hard:not(.locked) .map4208-node-disc { outline:3px solid #f04c7c; outline-offset:1px; }
.map4208-level-node:hover .map4208-node-disc,
.map4208-level-node:focus-visible .map4208-node-disc { transform:translateX(-50%) translateY(-4px) scale(1.06); filter:brightness(1.08); }
.map4208-level-node:focus-visible { outline:none; }
.map4208-node-stars {
  position:absolute;
  top:57px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:1px;
  white-space:nowrap;
  text-shadow:0 2px 0 #9c6414,0 0 4px #fff;
}
.map4208-node-stars span { font-size:15px; color:rgba(83,70,67,.32); }
.map4208-node-stars span.earned { color:#ffd525; }

.map4208-player-pin {
  position:absolute;
  z-index:30;
  left:50%;
  bottom:78px;
  transform:translateX(-50%);
  width:54px;
  height:54px;
  border-radius:50%;
  background:linear-gradient(180deg,#fff,#f2e7ff);
  border:4px solid #fff;
  box-shadow:0 0 0 4px #dd6eb5,0 7px 16px rgba(59,29,72,.28);
}
.map4208-player-pin::after {
  content:"";
  position:absolute;
  left:50%; bottom:-12px;
  transform:translateX(-50%) rotate(45deg);
  width:18px; height:18px;
  background:#dd6eb5;
  border-radius:2px;
  z-index:-1;
}
.map4208-player-photo,
.map4208-player-photo .player-avatar { width:100% !important; height:100% !important; border-radius:50%; display:grid; place-items:center; overflow:hidden; }
.map4208-player-photo img { width:100%; height:100%; object-fit:cover; }

.map4208-page-arrow {
  position:absolute;
  z-index:22;
  top:50%;
  transform:translateY(-50%);
  width:62px;
  height:78px;
  border:4px solid #fff;
  border-radius:30px;
  background:linear-gradient(180deg,#4fc3ff,#2677cc);
  color:#fff;
  font:1000 4rem/1 system-ui,sans-serif;
  display:grid;
  place-items:center;
  padding:0 0 8px;
  text-shadow:0 2px 0 #17599c;
  box-shadow:0 6px 0 #17599c,0 10px 24px rgba(15,63,109,.26);
  cursor:pointer;
}
.map4208-page-arrow.previous { left:26px; }
.map4208-page-arrow.next { right:26px; }
.map4208-page-arrow:disabled { opacity:.28; filter:grayscale(.7); cursor:default; }

.map4208-episode-card {
  position:absolute;
  left:5.5%;
  top:25%;
  z-index:7;
  width:190px;
  padding:12px 14px;
  border-radius:20px;
  background:rgba(20,75,71,.80);
  border:2px solid rgba(255,255,255,.35);
  color:#fff;
  box-shadow:0 8px 20px rgba(25,70,52,.22);
}
.map4208-episode-card small { display:block; text-transform:uppercase; letter-spacing:.1em; font-size:.62rem; font-weight:1000; opacity:.8; }
.map4208-episode-card strong { display:block; margin:2px 0; font-size:1.12rem; font-weight:1000; }
.map4208-episode-card span { display:block; font-size:.72rem; line-height:1.25; font-weight:800; opacity:.9; }

.map4208-world-progress {
  position:absolute;
  right:6%;
  top:22%;
  z-index:6;
  min-width:150px;
  padding:9px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.76);
  color:#315d55;
  text-align:center;
  box-shadow:0 7px 18px rgba(55,91,62,.15);
}
.map4208-world-progress strong { display:block; font-size:1.05rem; }
.map4208-world-progress span { font-size:.64rem; font-weight:900; }

.map4208-episode-dots {
  position:absolute;
  z-index:24;
  left:50%; bottom:14px;
  transform:translateX(-50%);
  min-height:34px;
  padding:7px 13px;
  display:flex;
  align-items:center;
  gap:12px;
  border-radius:999px;
  background:rgba(29,54,51,.62);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(5px);
}
.map4208-episode-dot {
  width:15px;
  height:15px;
  padding:0;
  border:2px solid #eff5ef;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  box-shadow:0 1px 0 rgba(0,0,0,.18);
}
.map4208-episode-dot.entered { background:#a884d5; }
.map4208-episode-dot.complete { background:#7bd596; }
.map4208-episode-dot.active { background:#f057ad; transform:scale(1.18); box-shadow:0 0 0 3px rgba(255,255,255,.20); }
.map4208-episode-dot.future { opacity:.62; }

/* Simple candy-land landmarks built from CSS so the map remains self-contained. */
.map4208-castle {
  position:absolute;
  z-index:1;
  left:12%;
  bottom:35%;
  width:145px;
  height:105px;
  border-radius:24px 24px 12px 12px;
  background:linear-gradient(90deg,#c57dea,#f28fb9,#bf75df);
  box-shadow:inset 0 -12px 0 rgba(91,48,131,.16),0 12px 20px rgba(58,89,67,.16);
  transform:scale(.95);
}
.map4208-castle::before,
.map4208-castle::after,
.map4208-castle i {
  content:"";
  position:absolute;
  bottom:66px;
  width:42px;
  height:75px;
  border-radius:18px 18px 5px 5px;
  background:linear-gradient(180deg,#ff9fc8,#a56fdf);
}
.map4208-castle::before { left:3px; }
.map4208-castle::after { right:3px; }
.map4208-castle i:nth-child(1) { left:52px; bottom:76px; }
.map4208-castle i:nth-child(2) { left:22px; width:20px; height:22px; bottom:8px; border-radius:50% 50% 0 0; background:#6c3e99; }
.map4208-castle i:nth-child(3) { right:22px; left:auto; width:20px; height:22px; bottom:8px; border-radius:50% 50% 0 0; background:#6c3e99; }
.map4208-fountain {
  position:absolute;
  z-index:2;
  left:51%;
  bottom:28%;
  width:100px;
  height:34px;
  border-radius:50%;
  background:#5ec5e8;
  border:7px solid #e7e8d6;
  box-shadow:0 7px 0 #7eb4af;
}
.map4208-fountain::before { content:""; position:absolute; left:42px; bottom:16px; width:18px; height:55px; border-radius:12px; background:#61c6e9; border:5px solid #dce8df; }
.map4208-fountain i { position:absolute; left:28px; bottom:48px; width:44px; height:28px; border-radius:50%; border-top:6px solid rgba(117,221,255,.9); }
.map4208-tree {
  position:absolute;
  z-index:1;
  width:68px;
  height:105px;
}
.map4208-tree::before { content:""; position:absolute; left:29px; bottom:0; width:14px; height:52px; border-radius:8px; background:#8c5b47; }
.map4208-tree::after { content:""; position:absolute; left:0; top:0; width:68px; height:68px; border-radius:50%; background:radial-gradient(circle at 34% 30%,#ffb4dd 0 8%,transparent 9%),radial-gradient(circle at 65% 36%,#ffd16e 0 8%,transparent 9%),linear-gradient(180deg,#f47cbd,#cd4d9c); box-shadow:inset -8px -10px 0 rgba(115,38,111,.12); }
.map4208-tree.tree-a { right:12%; bottom:39%; transform:scale(1.25); }
.map4208-tree.tree-b { right:23%; bottom:30%; transform:scale(.8); }
.map4208-tree.tree-c { left:27%; bottom:30%; transform:scale(.68); }
.map4208-character {
  position:absolute;
  z-index:2;
  right:7%;
  bottom:18%;
  width:105px;
  height:105px;
  object-fit:contain;
  filter:drop-shadow(0 8px 8px rgba(45,55,59,.25));
  opacity:.92;
}

@media (max-width: 1120px) {
  #screen-map .saga-topbar { grid-template-columns:44px 98px minmax(180px,1fr) auto; padding-inline:10px; gap:8px; }
  .map-mini-logo { width:92px; }
  .map-mini-logo strong { font-size:1.4rem; }
  #screen-map .player-chip { min-width:210px; }
  #screen-map .currency-pill.mastery-pill,
  #screen-map .currency-pill.streak-pill { display:none; }
  .map4208-level-node { transform:translate(-50%,-50%) scale(.9); }
  .map4208-episode-card { left:7%; top:22%; width:165px; }
  .map4208-world-progress { right:8%; }
}

@media (max-width: 820px) {
  #screen-map { overflow:auto; }
  #screen-map .saga-topbar { position:sticky; top:0; grid-template-columns:42px 1fr auto; min-width:720px; }
  .map-mini-logo { display:none; }
  #screen-map .player-chip { min-width:240px; }
  #screen-map .map-currency-strip { gap:5px; }
  #screen-map .currency-pill { min-width:58px; padding:0 8px; }
  #screen-map .map-tool-grid { grid-template-columns:repeat(3,36px)!important; }
  #screen-map .map-tool-grid .map-tool-square:nth-child(-n+2) { display:none!important; }
  #screen-map .saga-map-shell { min-width:720px; }
  .map4208-world-banner { top:20px; min-width:310px; }
  .map4208-world-banner strong { font-size:1.35rem; }
  .map4208-level-node { transform:translate(-50%,-50%) scale(.82); }
  .map4208-page-arrow { width:52px; height:66px; font-size:3.2rem; }
  .map4208-page-arrow.previous { left:14px; }
  .map4208-page-arrow.next { right:14px; }
}