:root {
  --saga-pink: #e65f9d;
  --saga-pink-dark: #a8276a;
  --saga-cream: #fff8dc;
  --saga-blue: #76d7f6;
  --saga-purple: #6d3da4;
  --saga-gold: #ffc93d;
  --saga-ink: #5c2558;
  --saga-shadow: 0 10px 22px rgba(78, 38, 94, .22);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
  min-height: 100%;
  margin: 0;
  color: var(--saga-ink);
  background: #b4ebff;
  overflow-x: hidden;
}
body.playing-level { overflow: hidden; }
button { font: inherit; }

.saga-app { min-height: 100vh; padding: 0; }
.screen { display: none !important; }
.screen.active { display: block !important; }
.saga-title-screen.active { display: grid !important; }
.saga-game-screen.active { display: grid !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Title */
.saga-title-screen {
  min-height: 100vh;
  place-items: center;
  align-content: center;
  gap: 18px;
  padding: 40px 20px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.8) 0 5%, transparent 5.5%),
    radial-gradient(circle at 78% 22%, rgba(255,255,255,.65) 0 4%, transparent 4.5%),
    linear-gradient(180deg, #95e6ff 0%, #d3f7ff 45%, #ffd1e5 100%);
}
.saga-title-screen::before,
.saga-title-screen::after {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  height: 33%;
  bottom: -13%;
  border-radius: 50% 50% 0 0;
  background: radial-gradient(ellipse at 50% 0, #fff7d6 0 38%, #ffb6d8 39% 63%, #dd85c2 64% 100%);
  box-shadow: 0 -12px 30px rgba(255,255,255,.55);
}
.saga-title-screen::after {
  bottom: -23%;
  left: 34%;
  right: -16%;
  background: radial-gradient(ellipse at 50% 0, #dbb5ff 0 45%, #9573db 46% 100%);
  opacity: .75;
}
.title-clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 10% 38%, rgba(255,255,255,.8) 0 7%, transparent 7.5%),
    radial-gradient(ellipse at 18% 34%, rgba(255,255,255,.75) 0 9%, transparent 9.5%),
    radial-gradient(ellipse at 88% 34%, rgba(255,255,255,.8) 0 8%, transparent 8.5%),
    radial-gradient(ellipse at 78% 39%, rgba(255,255,255,.7) 0 10%, transparent 10.5%);
}
.saga-logo {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  color: white;
  text-align: center;
  text-shadow:
    0 4px 0 #a12a6c,
    0 7px 0 #7e245c,
    0 12px 24px rgba(84,28,91,.35);
  transform: rotate(-2deg);
}
.saga-logo .logo-small {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 900;
  line-height: .7;
  color: #fff7b5;
  transform: rotate(-8deg) translateX(-42px);
}
.saga-logo strong {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(5rem, 15vw, 10rem);
  line-height: .76;
  letter-spacing: -.08em;
}
.logo-ribbon {
  margin-top: 13px;
  padding: 6px 30px;
  border-radius: 999px;
  color: #8a235f;
  background: linear-gradient(#fff6b0,#ffc941);
  border: 4px solid white;
  font-weight: 1000;
  letter-spacing: .28em;
  text-shadow: none;
  box-shadow: 0 7px 0 #c76d2d, var(--saga-shadow);
}
.launch-copy {
  position: relative;
  z-index: 2;
  margin: 16px 0 0;
  color: #7e3971;
  font-weight: 900;
  text-align: center;
}
.saga-play-button,
.preview-play-button {
  position: relative;
  z-index: 2;
  min-width: 210px;
  padding: 16px 34px;
  border: 4px solid white;
  border-radius: 999px;
  color: white;
  background: linear-gradient(#8fea5e, #49b836 62%, #2e8e2a);
  box-shadow: 0 8px 0 #257623, 0 13px 22px rgba(50,72,50,.24), inset 0 3px 0 rgba(255,255,255,.42);
  font-size: 1.45rem;
  font-weight: 1000;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}
.saga-play-button:hover,
.preview-play-button:hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.04); }
.saga-play-button:active,
.preview-play-button:active { transform: translateY(5px); box-shadow: 0 3px 0 #257623; }
.title-link-button {
  position: relative;
  z-index: 2;
  border: 0;
  color: #7b3470;
  background: transparent;
  font-weight: 900;
  text-decoration: underline;
  cursor: pointer;
}
.title-link-button.subtle { opacity: .68; }

/* Map */
.saga-map-screen {
  min-height: 100vh;
  background: linear-gradient(180deg, #8edffb 0 7%, #c9f3ff 20%, #f9d7ec 100%);
}
.saga-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 90px;
  display: grid;
  grid-template-columns: auto minmax(190px, 270px) 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 12px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,226,240,.94));
  border-bottom: 4px solid rgba(222,91,155,.46);
  box-shadow: 0 6px 18px rgba(76,48,93,.18);
}
.round-nav-button {
  width: 52px;
  height: 52px;
  border: 4px solid white;
  border-radius: 50%;
  color: white;
  background: linear-gradient(#ef8abc,#c94488);
  box-shadow: 0 5px 0 #9e2d6b, 0 8px 14px rgba(77,33,77,.18);
  font-size: 2.3rem;
  line-height: .8;
  font-weight: 900;
  cursor: pointer;
}
.player-chip {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.player-avatar {
  grid-row: 1 / 3;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: linear-gradient(#a66be2,#6b3ca8);
  border: 4px solid white;
  box-shadow: 0 4px 0 #57308b;
  font-size: 1.4rem;
  font-weight: 1000;
}
.player-chip span { font-size: .75rem; font-weight: 900; color: #a35a8f; }
.player-chip strong { font-size: 1.25rem; color: #6a2e72; }
.player-chip .account-xp-track {
  grid-column: 2;
  height: 8px;
  background: #d9b3d0;
  border: 2px solid white;
  border-radius: 999px;
  overflow: hidden;
}
.player-chip .account-xp-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg,#4fd8f8,#f16bb2);
}
.world-heading { text-align: center; line-height: 1.05; }
.world-heading small { color: #b44b85; font-weight: 1000; text-transform: uppercase; letter-spacing: .16em; }
.world-heading h1 { margin: 2px 0 4px; color: #7c2b71; font-size: clamp(1.3rem,3vw,2.15rem); letter-spacing: -.04em; text-shadow: none; }
.world-heading span { color: #a56796; font-size: .78rem; font-weight: 900; }
.map-currency-strip { display: flex; gap: 10px; }
.currency-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 76px;
  padding: 9px 13px;
  border: 3px solid white;
  border-radius: 999px;
  background: linear-gradient(#ff91bc,#e54883);
  color: white;
  box-shadow: 0 4px 0 #aa2f64;
  font-size: 1.15rem;
}
.currency-pill.gold { background: linear-gradient(#ffe978,#eab52b); color: #7e4b14; box-shadow: 0 4px 0 #bc7e21; }

.saga-map-shell {
  position: relative;
  width: min(760px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: 28px 18px 160px;
  overflow: visible;
}
.saga-map-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 12% 8%, rgba(255,255,255,.85) 0 7%, transparent 7.5%),
    radial-gradient(ellipse at 88% 13%, rgba(255,255,255,.8) 0 8%, transparent 8.5%),
    radial-gradient(ellipse at 50% 100%, rgba(255,255,255,.4), transparent 45%);
  pointer-events: none;
}
.saga-world-summary {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 0 auto 24px;
  padding: 13px 18px;
  color: #72386c;
  background: rgba(255,255,255,.78);
  border: 3px solid white;
  border-radius: 22px;
  box-shadow: var(--saga-shadow);
  font-size: .83rem;
}
.saga-world-summary span { white-space: nowrap; font-weight: 900; }
.saga-level-road { display: block; position: relative; z-index: 2; }
.episode-zone {
  position: relative;
  margin: 0 0 34px;
  border: 5px solid rgba(255,255,255,.86);
  border-radius: 42px;
  overflow: hidden;
  box-shadow: 0 18px 35px rgba(73,52,93,.2);
  isolation: isolate;
}
.episode-zone::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, #bcecff, #e4f8ff 38%, #ffd3e7);
}
.episode-meadow::before { background: linear-gradient(180deg,#baf1ff,#dff9ff 36%,#bce89e 37%,#74c56d 100%); }
.episode-lake::before { background: linear-gradient(180deg,#8ee2ff,#c8f5ff 32%,#71d7e9 33%,#4bb5db 70%,#f4c7de 100%); }
.episode-toffee::before { background: linear-gradient(180deg,#ffd5c4,#ffe9c0 28%,#d9a56f 29%,#a86e45 100%); }
.episode-carnival::before { background: linear-gradient(180deg,#a2e7ff,#e7f8ff 28%,#ffd46d 29%,#f18bad 100%); }
.episode-forest::before { background: linear-gradient(180deg,#b4eaff,#edfaff 25%,#b9d5f2 26%,#8d88cf 100%); }
.episode-scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.episode-scene span { position: absolute; border-radius: 50%; opacity: .8; }
.episode-scene span:nth-child(1) { width: 180px; height: 95px; left: -35px; top: 16%; background: rgba(255,255,255,.46); }
.episode-scene span:nth-child(2) { width: 230px; height: 120px; right: -80px; top: 39%; background: rgba(255,255,255,.35); }
.episode-scene span:nth-child(3) { width: 170px; height: 170px; left: -70px; bottom: 12%; background: rgba(255,203,232,.42); }
.episode-scene span:nth-child(4) { width: 130px; height: 130px; right: -30px; bottom: 4%; background: rgba(255,247,174,.35); }
.episode-map-banner {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin: 18px;
  padding: 13px 18px;
  border: 3px solid white;
  border-radius: 25px;
  color: #7b2c70;
  background: linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,225,239,.9));
  box-shadow: 0 8px 18px rgba(71,38,74,.15);
}
.episode-map-banner > span {
  min-width: 78px;
  padding: 8px 10px;
  border-radius: 999px;
  color: white;
  background: linear-gradient(#e985b3,#c84082);
  text-align: center;
  font-size: .78rem;
  font-weight: 1000;
}
.episode-map-banner h2 { margin: 0; font-size: 1.35rem; }
.episode-map-banner p { margin: 2px 0 0; color: #a86491; font-size: .78rem; font-weight: 900; }
.episode-map-banner > strong { color: #b96b1b; font-size: .9rem; white-space: nowrap; }
.episode-track { position: relative; width: 100%; }
.road-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.road-line polyline {
  fill: none;
  stroke: rgba(255,255,255,.88);
  stroke-width: 22;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 7px 0 rgba(120,79,115,.22));
}
.road-line polyline::after { content:""; }
.saga-level-node {
  position: absolute;
  z-index: 5;
  width: 78px;
  height: 78px;
  transform: translate(-50%,-50%);
  border: 5px solid white;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  color: white;
  background: linear-gradient(#ef8fbd,#d8488c 62%,#b53578);
  box-shadow: 0 7px 0 #9c2f69, 0 12px 20px rgba(69,42,72,.25), inset 0 4px 0 rgba(255,255,255,.34);
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}
.saga-level-node:hover:not(:disabled) { transform: translate(-50%,-55%) scale(1.08); filter: brightness(1.05); }
.saga-level-node:active:not(:disabled) { transform: translate(-50%,-43%) scale(.98); box-shadow: 0 3px 0 #9c2f69; }
.saga-level-node strong { font-size: 1.45rem; text-shadow: 0 2px 2px rgba(78,22,67,.35); }
.saga-level-node .node-crown {
  position: absolute;
  top: -12px;
  left: -7px;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 3px solid white;
  border-radius: 50%;
  color: #81541b;
  background: linear-gradient(#fff399,#f8be37);
  box-shadow: 0 3px 0 #c48021;
  font-size: .78rem;
}
.node-stars {
  position: absolute;
  bottom: -24px;
  display: flex;
  gap: 1px;
  white-space: nowrap;
}
.node-stars i { font-style: normal; color: rgba(255,255,255,.55); font-size: 1.15rem; text-shadow: 0 2px 2px rgba(75,42,83,.28); }
.node-stars i.earned { color: #ffe35c; }
.saga-level-node.completed { background: linear-gradient(#88ddff,#3f9fe2 62%,#2775bd); box-shadow: 0 7px 0 #2265a2,0 12px 20px rgba(69,42,72,.25),inset 0 4px 0 rgba(255,255,255,.36); }
.saga-level-node.current {
  width: 88px;
  height: 88px;
  background: linear-gradient(#9cf16e,#4eb83d 62%,#328c2d);
  box-shadow: 0 8px 0 #287425,0 0 0 8px rgba(255,255,255,.38),0 15px 23px rgba(64,77,66,.28),inset 0 4px 0 rgba(255,255,255,.4);
  animation: currentNodePulse 1.4s ease-in-out infinite alternate;
}
.saga-level-node.locked {
  color: #988d9d;
  background: linear-gradient(#dfdce2,#aaa1ac);
  box-shadow: 0 7px 0 #7f7581,0 12px 20px rgba(69,42,72,.18);
  cursor: not-allowed;
}
.node-lock { position: absolute; right: -5px; bottom: -2px; font-size: 1.05rem; }
.saga-level-node.very-hard::after,
.saga-level-node.impossibly-hard::after {
  content: "HARD";
  position: absolute;
  right: -18px;
  top: 7px;
  padding: 3px 6px;
  border-radius: 999px;
  color: white;
  background: #8f2b80;
  border: 2px solid white;
  font-size: .52rem;
  font-weight: 1000;
  transform: rotate(14deg);
}
.episode-finish {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 18px 18px;
  padding: 14px 18px;
  border: 3px solid white;
  border-radius: 25px;
  background: rgba(255,255,255,.82);
  box-shadow: var(--saga-shadow);
}
.episode-finish > span { font-size: 2rem; color: #ffc83e; }
.episode-finish small { display:block; color:#ba568c; font-weight:1000; }
.episode-finish strong { display:block; color:#71346b; font-size:.82rem; }
.future-episodes-card {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 36px 0 0;
  padding: 22px 26px;
  border: 4px solid white;
  border-radius: 32px;
  color: #6f3b70;
  background: linear-gradient(180deg,#efdcff,#c4a6e7);
  box-shadow: var(--saga-shadow);
}
.future-lock { font-size: 2.5rem; }
.future-episodes-card small { color:#9156a0; font-weight:1000; text-transform:uppercase; }
.future-episodes-card h2 { margin:2px 0 4px; }
.future-episodes-card p { margin:0; font-weight:800; color:#7a5a7d; }
.saga-episode-details {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 80;
  width: min(310px, calc(100vw - 36px));
  padding: 16px 18px;
  border: 3px solid white;
  border-radius: 24px;
  color: #6c3267;
  background: rgba(255,247,252,.96);
  box-shadow: 0 10px 25px rgba(54,33,67,.22);
}
.saga-episode-details h3 { margin: 0 0 4px; }
.saga-episode-details p { margin: 0; font-size: .78rem; line-height: 1.35; }
.saga-episode-details .episode-meta { display:flex; gap:5px; flex-wrap:wrap; margin-top:9px; }
.saga-episode-details .meta-chip { padding:4px 7px; border-radius:999px; background:#f3d5e6; font-size:.62rem; font-weight:900; }
.saga-episode-details .episode-progress { margin-top:10px; padding-top:9px; }

/* Level start modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(73,43,83,.58);
}
.modal.hidden { display: none !important; }
.level-preview-card,
.saga-result-card {
  position: relative;
  width: min(440px, 94vw);
  padding: 40px 28px 28px;
  border: 6px solid white;
  border-radius: 38px;
  color: #713368;
  background: linear-gradient(180deg,#fffaf0,#ffe2ef 74%,#ffc4df);
  box-shadow: 0 18px 0 rgba(137,54,103,.55),0 28px 50px rgba(53,26,62,.38),inset 0 2px 0 rgba(255,255,255,.9);
  text-align: center;
}
.preview-close {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 38px;
  height: 38px;
  border: 3px solid white;
  border-radius: 50%;
  color: white;
  background: linear-gradient(#ef8bb9,#c94383);
  box-shadow: 0 4px 0 #9e316b;
  font-size: 1.4rem;
  font-weight: 900;
  cursor: pointer;
}
.preview-crown {
  position: absolute;
  left: 50%;
  top: -42px;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  transform: translateX(-50%);
  border: 6px solid white;
  border-radius: 50%;
  color: #9d5c17;
  background: linear-gradient(#fff28b,#f1b52d);
  box-shadow: 0 8px 0 #b7751e;
  font-size: 2.6rem;
}
.preview-episode { margin: 4px 0; color: #bb5e91; font-weight: 1000; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }
.level-preview-card h2 { margin: 0; font-size: 2.4rem; }
#preview-level-name { margin: 4px 0 18px; color:#9d6992; font-weight:900; }
.preview-goals { display:grid; gap:8px; }
.preview-goal-row {
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border:3px solid white;
  border-radius:18px;
  background:rgba(255,255,255,.62);
  text-align:left;
}
.preview-goal-row > span { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; background:#f3c3dd; }
.preview-goal-row small { display:block; color:#ac6d9d; font-weight:900; }
.preview-goal-row strong { display:block; font-size:1.15rem; }
.preview-boosters { display:flex; justify-content:center; gap:12px; margin:18px 0; }
.preview-boosters button,
.booster-button {
  width:78px;
  aspect-ratio:1;
  border:4px solid white;
  border-radius:50%;
  color:#76406f;
  background:linear-gradient(#e7f8ff,#86d5f0);
  box-shadow:0 5px 0 #4da5c4;
  opacity:.74;
}
.preview-boosters span,.booster-button span { display:block; font-size:1.6rem; }
.preview-boosters small,.booster-button small { display:block; font-size:.58rem; font-weight:900; }

/* Gameplay */
.saga-game-screen {
  height: 100vh;
  min-height: 100vh;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 8%,rgba(255,255,255,.55) 0 4%,transparent 4.5%),
    radial-gradient(circle at 91% 13%,rgba(255,255,255,.5) 0 5%,transparent 5.5%),
    linear-gradient(180deg,#8bdff9,#c8f3ff 48%,#f4c7df 100%);
}
.game-mobile-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  color:#702e69;
  background: linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,222,239,.94));
  border-bottom:4px solid rgba(212,75,140,.42);
  box-shadow:0 5px 15px rgba(71,37,78,.15);
}
.game-mobile-header > div:nth-child(2) { display:grid; justify-items:center; }
.game-mobile-header small { color:#bc5b8d; font-weight:1000; text-transform:uppercase; }
.game-mobile-header strong { font-size:1.35rem; }
.game-mobile-header #level-intro { color:#a26e98; font-size:.72rem; font-weight:800; }
.account-mini { padding:8px 12px; border:3px solid white; border-radius:999px; background:#eac6df; font-weight:900; }
.saga-game-layout {
  min-height:0;
  display:grid;
  grid-template-columns: minmax(180px,250px) minmax(460px,1fr);
  gap:18px;
  align-items:center;
  width:min(1180px,100%);
  margin:0 auto;
  padding:16px 18px 18px;
}
.saga-level-hud {
  align-self:center;
  display:grid;
  gap:11px;
  padding:18px;
  border:5px solid white;
  border-radius:34px;
  color:#703267;
  background:linear-gradient(180deg,#fff8e8,#ffdce9);
  box-shadow:0 12px 0 rgba(151,66,112,.45),0 20px 35px rgba(61,35,70,.22);
}
.level-hud-title { text-align:center; }
.level-hud-title small { display:block;color:#bd6392;font-weight:1000;text-transform:uppercase;letter-spacing:.12em; }
.level-hud-title strong { display:block;font-size:2.9rem;line-height:.9; }
.hud-score-stack { display:grid;gap:5px; }
.hud-score-stack > div { display:flex;justify-content:space-between;gap:10px;padding:7px 11px;border-radius:13px;background:rgba(255,255,255,.64);font-size:.8rem;font-weight:900; }
.hud-score-stack strong { color:#a73674; }
.saga-star-meter { position:relative;height:26px;margin:0;border:3px solid white;border-radius:999px;background:#d5b4cd;overflow:visible;display:flex;align-items:center;justify-content:space-around; }
.saga-star-meter .star-meter { position:absolute;inset:0 auto 0 0;border-radius:999px;background:linear-gradient(90deg,#69d7f8,#ef69aa);opacity:.9; }
.saga-star-meter span { position:relative;z-index:2;color:white;font-size:1.45rem;text-shadow:0 2px 2px rgba(92,50,91,.25); }
.saga-star-meter span.lit { color:#ffe95a; }
.saga-moves-counter {
  width:116px;
  height:116px;
  margin:2px auto;
  background:radial-gradient(circle at 35% 28%,#fffad6 0 34%,#ffcc55 35% 69%,#f58a37 70% 100%);
  color:#77295e;
  border:5px solid white;
  box-shadow:0 7px 0 #ca692f,0 10px 18px rgba(65,38,69,.2),inset 0 4px 0 rgba(255,255,255,.5);
}
.saga-moves-counter span { font-size:2.8rem; }
.goal-heading { text-align:center;text-transform:uppercase;letter-spacing:.12em;color:#ba5c8c;font-size:.72rem;font-weight:1000; }
.saga-goals { display:grid;gap:7px; }
.saga-goals .goal-row { min-height:48px;padding:8px 10px;border:3px solid white;border-radius:16px;color:#6f3468;background:rgba(255,255,255,.7); }
.saga-goals .goal-icon { background:#f0c3dc; }
.saga-goals .goal-row.done { background:#c9f3d4;opacity:.8; }
.hud-action-stack { display:grid;grid-template-columns:1fr 1fr;gap:7px; }
.saga-small-button {
  padding:9px 12px;
  border:3px solid white;
  border-radius:999px;
  color:white;
  background:linear-gradient(#ed89b8,#c94383);
  box-shadow:0 4px 0 #993067;
  font-weight:1000;
  cursor:pointer;
}
.saga-small-button:active { transform:translateY(3px);box-shadow:0 1px 0 #993067; }
.saga-small-button.test-button { grid-column:1/-1;background:linear-gradient(#a68de7,#6d4eb7);box-shadow:0 4px 0 #503692;font-size:.72rem; }
.saga-board-wrap { min-height:0;display:grid;place-items:center;align-content:center;gap:10px;position:relative; }
.saga-board-stage { padding:14px;border-radius:34px;background:rgba(255,255,255,.22);border:3px solid rgba(255,255,255,.54);box-shadow:0 18px 35px rgba(48,47,92,.18); }
.saga-board {
  --tile:min(8vh,68px);
  width:calc(var(--tile)*9);
  height:calc(var(--tile)*9);
  border:0;
  border-radius:24px;
  overflow:visible;
  background:transparent;
  box-shadow:none;
}
.saga-board .board-cell { padding:3px; }
.saga-board .board-slot { border-radius:15px;background:linear-gradient(180deg,rgba(245,244,255,.72),rgba(134,184,229,.42));border:2px solid rgba(255,255,255,.72);box-shadow:inset 0 -6px 10px rgba(55,80,143,.15); }
.saga-board .piece { padding:4px;transition:transform .16s cubic-bezier(.22,.84,.22,1),opacity .16s ease,filter .16s ease; }
.saga-board .piece .candy { border:2px solid rgba(255,255,255,.26);box-shadow:inset 0 6px 0 rgba(255,255,255,.42),inset 0 -9px 12px rgba(0,0,0,.15),0 5px 7px rgba(38,22,65,.2); }
.booster-tray { display:flex;gap:12px;justify-content:center; }
.booster-button { width:62px; }
.message-banner { top:8px;z-index:90;color:#7a2b67;background:#fff5bd;border:3px solid white;box-shadow:0 5px 0 #d39531; }
.combo-banner { top:18%;z-index:95;background:linear-gradient(#f38cbc,#cf4386);border:4px solid white;box-shadow:0 7px 0 #9c2e68; }

.saga-result-card .modal-stars { color:#ffc92f;font-size:3rem;letter-spacing:.08em;text-shadow:0 4px 0 #cc8125; }
.saga-result-card .modal-actions { display:flex;gap:10px;justify-content:center;flex-wrap:wrap; }
.saga-result-card .preview-play-button { min-width:150px;padding:11px 22px;font-size:1rem; }

@keyframes currentNodePulse { from { filter:brightness(1); } to { filter:brightness(1.08); transform:translate(-50%,-50%) scale(1.04); } }

@media (max-width: 920px) {
  .saga-topbar { grid-template-columns:auto 1fr auto; }
  .player-chip { display:none; }
  .world-heading { grid-column:2; }
  .saga-episode-details { display:none; }
  .saga-game-layout { grid-template-columns:1fr;align-content:center;padding:10px;gap:8px; }
  .saga-level-hud { order:2;width:min(640px,100%);grid-template-columns:repeat(4,1fr);align-items:center;padding:9px 12px;border-radius:24px;gap:8px; }
  .level-hud-title { display:none; }
  .hud-score-stack { grid-column:1; }
  .saga-star-meter { grid-column:2; }
  .saga-moves-counter { grid-column:3;width:82px;height:82px; }
  .saga-moves-counter span { font-size:2rem; }
  .goal-heading { display:none; }
  .saga-goals { grid-column:4; }
  .saga-goals .goal-row { min-height:40px;padding:5px;font-size:.7rem; }
  .hud-action-stack { grid-column:1/-1;grid-template-columns:repeat(3,1fr); }
  .saga-small-button.test-button { grid-column:auto; }
  .saga-board { --tile:min(7.2vh,10.2vw,60px); }
  .booster-tray { display:none; }
}

@media (max-width: 620px) {
  .saga-topbar { min-height:74px;padding:8px 10px;gap:8px; }
  .round-nav-button { width:44px;height:44px;font-size:1.9rem; }
  .world-heading h1 { font-size:1.15rem; }
  .world-heading span { display:none; }
  .currency-pill { min-width:56px;padding:7px 9px; }
  .currency-pill:first-child { display:none; }
  .saga-map-shell { padding:16px 8px 100px; }
  .saga-world-summary { display:grid;gap:5px;font-size:.7rem; }
  .saga-world-summary span { white-space:normal; }
  .episode-zone { border-width:3px;border-radius:28px; }
  .episode-map-banner { grid-template-columns:1fr auto;margin:10px;padding:10px 12px; }
  .episode-map-banner > span { display:none; }
  .episode-map-banner h2 { font-size:1.05rem; }
  .episode-map-banner > strong { font-size:.72rem; }
  .saga-level-node { width:66px;height:66px; }
  .saga-level-node.current { width:74px;height:74px; }
  .saga-level-node strong { font-size:1.15rem; }
  .node-stars { bottom:-21px; }
  .episode-finish { margin:0 10px 10px;padding:10px; }
  .game-mobile-header { padding:7px 10px; }
  .game-mobile-header #level-intro { display:none; }
  .saga-game-layout { padding:6px; }
  .saga-level-hud { grid-template-columns:1fr 82px 1fr; }
  .hud-score-stack { display:none; }
  .saga-star-meter { grid-column:1; }
  .saga-moves-counter { grid-column:2; }
  .saga-goals { grid-column:3; }
  .hud-action-stack { grid-column:1/-1; }
  .saga-board-stage { padding:7px;border-radius:22px; }
  .saga-board { --tile:min(7.25vh,10.2vw,54px); }
}

/* Contrast corrections over legacy component styles. */
.saga-world-summary,
.saga-world-summary strong,
.saga-world-summary span { color: #71366a !important; }
.saga-episode-details,
.saga-episode-details .eyebrow,
.saga-episode-details h3,
.saga-episode-details p,
.saga-episode-details span,
.saga-episode-details strong { color: #6c3267 !important; }
.saga-episode-details .eyebrow { color: #c04f87 !important; }
.saga-episode-details .episode-progress-track { background: #d8b7cf !important; }
.saga-episode-details #episode-progress-fill { background: linear-gradient(90deg,#62d9f8,#ef70ac) !important; }