/* Sweet Shift Saga — v5.0.1.0 PRE
   Result modal redesign + runtime performance pass. */

:root {
  --ss-future-cyan: #63e8ff;
  --ss-future-blue: #53a8ff;
  --ss-future-violet: #8164ff;
  --ss-future-pink: #ff5bb0;
  --ss-future-deep: #171c45;
  --ss-future-ink: #30406b;
  --ss-future-panel: rgba(12, 18, 45, 0.88);
  --ss-future-text: #edf4ff;
  --ss-future-muted: rgba(231, 243, 255, 0.72);
}

/* -------------------------------------------------------------
   LEVEL COMPLETE / FAILURE — semi-futuristic result screen
   ------------------------------------------------------------- */
.saga-result-modal {
  padding: 20px !important;
  background:
    radial-gradient(circle at 50% 10%, rgba(97, 232, 255, 0.16), transparent 30%),
    radial-gradient(circle at 10% 100%, rgba(129, 100, 255, 0.20), transparent 36%),
    radial-gradient(circle at 100% 0%, rgba(255, 91, 176, 0.14), transparent 30%),
    rgba(7, 10, 25, 0.70) !important;
}
.saga-result-modal .saga-result-card {
  position: relative !important;
  overflow: hidden !important;
  width: min(640px, 94vw) !important;
  max-width: 640px !important;
  padding: 26px 26px 22px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(133, 213, 255, 0.28) !important;
  color: var(--ss-future-text) !important;
  background:
    linear-gradient(180deg, rgba(18, 26, 64, 0.98), rgba(14, 21, 56, 0.97) 52%, rgba(10, 16, 44, 0.98) 100%) !important;
  box-shadow:
    0 26px 70px rgba(5, 10, 28, 0.48),
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 0 0 1px rgba(255,255,255,0.03) !important;
  backdrop-filter: blur(16px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
}
.saga-result-modal .saga-result-card::before,
.saga-result-modal .saga-result-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.saga-result-modal .saga-result-card::before {
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, var(--ss-future-cyan), var(--ss-future-violet), var(--ss-future-pink));
}
.saga-result-modal .saga-result-card::after {
  top: 14px;
  right: 18px;
  width: 126px;
  height: 126px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,232,255,0.22) 0%, rgba(99,232,255,0.06) 42%, transparent 72%);
  filter: blur(10px);
  opacity: .85;
}
.saga-result-card #modal-kicker {
  margin: 0 !important;
  font-size: .74rem !important;
  letter-spacing: .26em !important;
  text-transform: uppercase !important;
  color: rgba(191, 230, 255, 0.84) !important;
}
.saga-result-card #modal-title {
  margin: 8px 0 0 !important;
  color: #f7fbff !important;
  font-size: clamp(1.9rem, 4.4vw, 2.45rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -.03em !important;
}
.saga-result-card .modal-stars {
  margin: 18px auto 0 !important;
  color: #ffd864 !important;
  font-size: clamp(2.2rem, 6vw, 3.05rem) !important;
  letter-spacing: .16em !important;
  text-shadow:
    0 0 18px rgba(255, 216, 100, 0.28),
    0 8px 18px rgba(0,0,0,0.32) !important;
}
.saga-result-card #modal-copy {
  margin: 12px auto 0 !important;
  max-width: 520px;
  color: var(--ss-future-muted) !important;
  font-size: .96rem !important;
  line-height: 1.56 !important;
}

.ss-result-shell {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}
.ss-result-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ss-result-state-badge,
.ss-result-level-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(164, 216, 255, 0.18);
  background: rgba(255,255,255,0.06);
  color: #f3f7ff;
  font-size: .73rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ss-result-state-badge::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ss-future-cyan);
  box-shadow: 0 0 12px rgba(99,232,255,.7);
}
.saga-result-modal[data-result-state="loss"] .ss-result-state-badge::before {
  background: #ff699e;
  box-shadow: 0 0 12px rgba(255,105,158,.7);
}
.saga-result-modal[data-result-state="loss"] .saga-result-card {
  background: linear-gradient(180deg, rgba(63, 16, 43, 0.98), rgba(46, 14, 40, 0.98) 48%, rgba(36, 12, 33, 0.98) 100%) !important;
  border-color: rgba(255, 138, 185, 0.24) !important;
}
.saga-result-modal[data-result-state="loss"] .saga-result-card::before {
  background: linear-gradient(90deg, #ff84bc, #ff5a7c, #ffa16d);
}
.saga-result-modal[data-result-state="loss"] #modal-title {
  color: #fff3f7 !important;
}

.ss-result-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.ss-result-stat {
  position: relative;
  padding: 14px 14px 13px;
  border-radius: 18px;
  text-align: left;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04)),
    rgba(6, 12, 31, 0.5);
  border: 1px solid rgba(151, 204, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.ss-result-stat small {
  display: block;
  margin-bottom: 7px;
  color: rgba(216, 235, 255, 0.72);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.ss-result-stat strong {
  display: block;
  color: #fff;
  font-size: clamp(1rem, 2.7vw, 1.18rem);
  line-height: 1.05;
  letter-spacing: -.02em;
}
.ss-result-reward-band {
  display: grid;
  gap: 8px;
  padding: 15px 16px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(99,232,255,0.12), rgba(129,100,255,0.10));
  border: 1px solid rgba(125, 212, 255, 0.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.ss-result-reward-band .reward-heading {
  color: rgba(224, 242, 255, 0.74);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ss-result-summary-copy {
  color: #f2f7ff;
  font-weight: 800;
  font-size: .97rem;
}
.saga-result-card .modal-xp {
  margin-top: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.saga-result-card .modal-xp .xp-earned,
.saga-result-card .modal-xp .level-up {
  color: #edf5ff !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 14px !important;
}
.saga-result-card .modal-actions {
  margin-top: 18px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.saga-result-card #modal-next-btn:not([hidden]),
.saga-result-card #modal-bonus-moves-btn:not([hidden]) {
  grid-column: 1 / -1 !important;
}
.saga-result-card .ss-modal-action {
  min-height: 52px !important;
  border-radius: 16px !important;
  font-size: .75rem !important;
  letter-spacing: .09em !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
.saga-result-card .ss-modal-primary {
  color: #082747 !important;
  border-color: rgba(177, 238, 255, 0.6) !important;
  background: linear-gradient(180deg, #8bf4ff, #5bb2ff) !important;
  box-shadow: 0 7px 0 #287bcf, 0 14px 26px rgba(34, 130, 211, 0.23) !important;
}
.saga-result-card .ss-modal-secondary {
  color: #ebf4ff !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06)) !important;
  box-shadow: 0 7px 0 rgba(255,255,255,0.08), 0 12px 24px rgba(0,0,0,0.18) !important;
}
.saga-result-card .ss-modal-purchase {
  color: #5e4108 !important;
  border-color: rgba(255, 226, 164, 0.7) !important;
  background: linear-gradient(180deg, #ffe58d, #ffb64e) !important;
  box-shadow: 0 7px 0 #d28d2e, 0 14px 24px rgba(197, 136, 29, 0.22) !important;
}
.saga-result-card .ss-modal-action:hover:not(:disabled) {
  filter: brightness(1.03) !important;
  transform: translateY(-1px) !important;
}
.saga-result-card .ss-modal-action:active:not(:disabled) {
  transform: translateY(3px) !important;
}
.saga-result-modal[data-result-state="loss"] .ss-result-reward-band {
  background: linear-gradient(180deg, rgba(255,105,158,.12), rgba(255,161,109,.10));
  border-color: rgba(255, 171, 197, 0.22);
}

/* -------------------------------------------------------------
   PERFORMANCE BOOST LAYER
   ------------------------------------------------------------- */
html[data-performance-tier="boost"] .saga-game-screen,
body.ss-performance-boost .saga-game-screen {
  --ss-ui-blur: 0px;
}
html[data-performance-tier="boost"] .saga-game-screen .glass-console,
html[data-performance-tier="boost"] .saga-game-screen .future-booster-tray,
html[data-performance-tier="boost"] .saga-game-screen .game-mobile-header,
html[data-performance-tier="boost"] .saga-game-screen .account-mini,
html[data-performance-tier="boost"] .modal,
body.ss-performance-boost .saga-game-screen .glass-console,
body.ss-performance-boost .saga-game-screen .future-booster-tray,
body.ss-performance-boost .saga-game-screen .game-mobile-header,
body.ss-performance-boost .saga-game-screen .account-mini,
body.ss-performance-boost .modal {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-performance-tier="boost"] #board.saga-board .piece .candy,
body.ss-performance-boost #board.saga-board .piece .candy {
  box-shadow: inset 0 4px 6px rgba(255,255,255,.45), inset 0 -6px 8px rgba(44,16,51,.18) !important;
}
html[data-performance-tier="boost"] #board.saga-board .piece .candy::after,
body.ss-performance-boost #board.saga-board .piece .candy::after,
html[data-performance-tier="boost"] #board.saga-board .piece.selected::after,
body.ss-performance-boost #board.saga-board .piece.selected::after,
html[data-performance-tier="boost"] #board.saga-board .blocker,
body.ss-performance-boost #board.saga-board .blocker {
  filter: none !important;
}
html[data-performance-tier="boost"] #board.saga-board .board-slot,
body.ss-performance-boost #board.saga-board .board-slot {
  box-shadow: inset 0 1px 0 rgba(162,224,255,.12) !important;
}
html[data-performance-tier="boost"] *,
body.ss-performance-boost * {
  scroll-behavior: auto !important;
}
html[data-performance-tier="boost"] #board.saga-board.big-move-fast .piece,
body.ss-performance-boost #board.saga-board.big-move-fast .piece {
  transition-duration: .06s !important;
  animation-duration: .12s !important;
}

@media (max-width: 700px) {
  .saga-result-modal {
    padding: 10px !important;
  }
  .saga-result-modal .saga-result-card {
    padding: 20px 16px 16px !important;
    border-radius: 22px !important;
  }
  .ss-result-topbar {
    gap: 8px;
  }
  .ss-result-stat-grid {
    grid-template-columns: 1fr;
  }
  .saga-result-card .modal-actions {
    grid-template-columns: 1fr !important;
  }
  .saga-result-card #modal-map-btn,
  .saga-result-card #modal-retry-btn,
  .saga-result-card #modal-next-btn,
  .saga-result-card #modal-bonus-moves-btn {
    grid-column: auto !important;
  }
}

/* =============================================================
   v5.0.1.1 PRE — result popup refinement
   Smaller footprint, original palette, safer action visibility.
   ============================================================= */
.saga-result-modal {
  background: rgba(15,4,22,.42) !important;
  backdrop-filter: blur(9px) !important;
  -webkit-backdrop-filter: blur(9px) !important;
}

.saga-result-modal .saga-result-card {
  width: min(520px, 92vw) !important;
  max-width: 520px !important;
  max-height: min(88vh, 700px) !important;
  overflow-y: auto !important;
  padding: 18px 18px 14px !important;
  border-radius: 24px !important;
  border: 3px solid rgba(255,255,255,.92) !important;
  color: #4b2f62 !important;
  background: linear-gradient(180deg,#fffefc 0%, #fff4fb 56%, #ffe8cf 100%) !important;
  box-shadow:
    0 20px 48px rgba(27, 10, 38, 0.28),
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(232,184,214,.32) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.saga-result-modal .saga-result-card::before {
  height: 4px !important;
  background: linear-gradient(90deg,#78e7ff,#8f75ff,#ff7ab5) !important;
}
.saga-result-modal .saga-result-card::after {
  top: 10px !important;
  right: 12px !important;
  width: 84px !important;
  height: 84px !important;
  background: radial-gradient(circle, rgba(135,215,255,0.22) 0%, rgba(135,215,255,0.08) 48%, transparent 74%) !important;
  filter: blur(7px) !important;
}

.saga-result-card #modal-kicker {
  font-size: .64rem !important;
  letter-spacing: .18em !important;
  color: #8c6693 !important;
}
.saga-result-card #modal-title {
  margin-top: 6px !important;
  font-size: clamp(1.55rem, 4vw, 2rem) !important;
  color: #5a2f77 !important;
}
.saga-result-card .modal-stars {
  margin-top: 10px !important;
  font-size: clamp(1.9rem, 5vw, 2.45rem) !important;
  letter-spacing: .12em !important;
  color: #ffd957 !important;
  text-shadow: 0 5px 10px rgba(0,0,0,.17) !important;
}
.saga-result-card #modal-copy {
  margin-top: 8px !important;
  color: #7f6a87 !important;
  font-size: .9rem !important;
  line-height: 1.42 !important;
}

.ss-result-shell {
  gap: 10px !important;
  margin-top: 10px !important;
}
.ss-result-topbar {
  gap: 8px !important;
}
.ss-result-state-badge,
.ss-result-level-badge {
  min-height: 30px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(118,90,138,.14) !important;
  background: linear-gradient(180deg,#fff,#f6edf8) !important;
  color: #7b5582 !important;
  font-size: .62rem !important;
  letter-spacing: .11em !important;
}
.ss-result-state-badge::before {
  width: 8px !important;
  height: 8px !important;
  background: #58cfff !important;
  box-shadow: 0 0 8px rgba(88,207,255,.45) !important;
}
.saga-result-modal[data-result-state="loss"] .ss-result-state-badge::before {
  background: #ff719d !important;
  box-shadow: 0 0 8px rgba(255,113,157,.45) !important;
}
.saga-result-modal[data-result-state="loss"] .saga-result-card {
  background: linear-gradient(180deg,#fffefd 0%, #fff1f6 52%, #ffe3d5 100%) !important;
  border-color: rgba(255,255,255,.92) !important;
}
.saga-result-modal[data-result-state="loss"] #modal-title {
  color: #b33d70 !important;
}

.ss-result-stat-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
.ss-result-stat {
  padding: 10px 10px 9px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.68) !important;
  border: 1px solid rgba(124,92,141,.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 4px 10px rgba(73,43,90,.04) !important;
}
.ss-result-stat small {
  margin-bottom: 5px !important;
  color: #977ea1 !important;
  font-size: .58rem !important;
  letter-spacing: .12em !important;
}
.ss-result-stat strong {
  color: #4f3265 !important;
  font-size: clamp(.94rem, 2.3vw, 1.04rem) !important;
}
.ss-result-reward-band {
  gap: 6px !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(116,218,255,.12), rgba(255,255,255,.72) 26%, rgba(252,231,248,.88) 100%) !important;
  border: 1px solid rgba(115,176,224,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85) !important;
}
.ss-result-reward-band .reward-heading {
  color: #8d7096 !important;
  font-size: .62rem !important;
  letter-spacing: .14em !important;
}
.ss-result-summary-copy {
  color: #5a3d6d !important;
  font-size: .88rem !important;
  font-weight: 900 !important;
  line-height: 1.34 !important;
}
.saga-result-card .modal-xp {
  gap: 6px !important;
}
.saga-result-card .modal-xp .xp-earned {
  padding: 9px 11px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(120,90,139,.08) !important;
}
.saga-result-card .modal-xp .xp-earned span { color: #866d8d !important; }
.saga-result-card .modal-xp .xp-earned strong { color: #755022 !important; font-size: 1rem !important; }
.saga-result-card .modal-xp .level-up {
  padding: 8px 11px !important;
  border-radius: 12px !important;
  font-size: .68rem !important;
  letter-spacing: .06em !important;
  animation-duration: .95s !important;
}

.saga-result-card .modal-actions {
  position: sticky !important;
  bottom: -1px !important;
  margin-top: 12px !important;
  padding-top: 10px !important;
  padding-bottom: 2px !important;
  background: linear-gradient(180deg, rgba(255,248,252,0), rgba(255,248,252,.88) 20%, rgba(255,248,252,.98) 52%, #fff7fb 100%) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
.saga-result-card .ss-modal-action {
  min-height: 44px !important;
  min-width: 0 !important;
  padding: 8px 12px !important;
  border-radius: 14px !important;
  font-size: .69rem !important;
  letter-spacing: .02em !important;
}
.saga-result-card .ss-modal-primary,
.saga-result-card .ss-modal-purchase,
.saga-result-card .ss-modal-secondary {
  box-shadow: 0 4px 0 rgba(0,0,0,.12), 0 8px 14px rgba(53,31,66,.09) !important;
}
.saga-result-card .ss-modal-primary {
  color: #17344c !important;
  background: linear-gradient(180deg,#75e8ff,#45a9d9) !important;
  border-color: rgba(90,185,225,.24) !important;
  box-shadow: 0 4px 0 #2b83ad, 0 8px 15px rgba(43,131,173,.18) !important;
}
.saga-result-card .ss-modal-secondary {
  color: #704b7b !important;
  background: linear-gradient(180deg,#fff,#f1e9f5) !important;
  border-color: rgba(116,77,136,.15) !important;
  box-shadow: 0 4px 0 #c7b0cc, 0 8px 13px rgba(65,35,76,.08) !important;
}
.saga-result-card .ss-modal-purchase {
  color: #684517 !important;
  background: linear-gradient(180deg,#fff29a,#ffc342) !important;
  border-color: rgba(215,155,31,.18) !important;
  box-shadow: 0 4px 0 #cb8d24, 0 8px 14px rgba(190,123,24,.15) !important;
}

@media (max-height: 760px) {
  .saga-result-modal .saga-result-card {
    max-height: 92vh !important;
  }
  .ss-result-stat-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 560px) {
  .saga-result-modal .saga-result-card {
    width: min(96vw, 520px) !important;
    padding: 16px 14px 12px !important;
  }
  .saga-result-card .modal-actions {
    grid-template-columns: 1fr !important;
  }
  .saga-result-card #modal-next-btn:not([hidden]),
  .saga-result-card #modal-bonus-moves-btn:not([hidden]),
  .saga-result-card #modal-map-btn:not([hidden]),
  .saga-result-card #modal-retry-btn:not([hidden]) {
    grid-column: auto !important;
  }
}