/* Bombarera V105 — Story mission picker redesign
   A dedicated branded layer for the chapter / mission dialog. */

html.story-picker-open,
html.story-picker-open body {
  overflow: hidden !important;
}

.story-picker-v4-overlay {
  padding: clamp(10px, 1.5vw, 24px) !important;
  background:
    radial-gradient(circle at 14% 16%, rgba(48, 214, 255, .15), transparent 30%),
    radial-gradient(circle at 86% 12%, rgba(151, 76, 255, .18), transparent 31%),
    radial-gradient(circle at 72% 88%, rgba(255, 54, 174, .11), transparent 28%),
    rgba(2, 6, 17, .86) !important;
  backdrop-filter: blur(18px) saturate(1.18) !important;
}

.story-picker-v5 {
  --sp5-cyan: #64eaff;
  --sp5-blue: #55a9ff;
  --sp5-violet: #9272ff;
  --sp5-pink: #f054bd;
  position: relative !important;
  isolation: isolate;
  width: min(1720px, calc(100vw - 32px)) !important;
  height: min(900px, calc(100dvh - 28px)) !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 30px !important;
  border: 1px solid rgba(111, 221, 255, .30) !important;
  background:
    radial-gradient(circle at 8% -8%, rgba(64, 219, 255, .16), transparent 29%),
    radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--sp4-accent) 17%, transparent), transparent 31%),
    linear-gradient(145deg, #071326 0%, #0a1025 48%, #120d2a 100%) !important;
  box-shadow:
    0 38px 110px rgba(0, 0, 0, .62),
    0 0 0 1px rgba(142, 102, 255, .10),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.story-picker-v5::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 7%, rgba(100, 234, 255, .035) 7% 7.08%, transparent 7.08% 100%),
    linear-gradient(0deg, transparent 0 14%, rgba(146, 114, 255, .025) 14% 14.08%, transparent 14.08% 100%);
  opacity: .85;
}

.story-picker-v5::after {
  content: "";
  position: absolute;
  z-index: 8;
  left: 4%;
  right: 4%;
  top: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--sp5-cyan), var(--sp5-violet), var(--sp5-pink), transparent);
  filter: drop-shadow(0 0 9px rgba(104, 225, 255, .5));
}

.story-picker-v5 .story-picker-v4__header {
  position: relative;
  min-width: 0;
  display: grid !important;
  grid-template-columns: 170px minmax(0, 1fr) 330px 50px !important;
  gap: 18px !important;
  align-items: center !important;
  padding: 18px 20px 17px !important;
  border-bottom: 1px solid rgba(104, 226, 255, .15);
  background:
    radial-gradient(circle at 82% 0%, color-mix(in srgb, var(--sp4-accent) 14%, transparent), transparent 42%),
    linear-gradient(90deg, rgba(11, 34, 60, .88), rgba(14, 18, 43, .92) 52%, rgba(31, 14, 51, .88));
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .025);
}

.story-picker-v5__brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.story-picker-v5__brand-mark {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(82, 225, 255, .17), rgba(136, 96, 255, .16));
  border: 1px solid rgba(104, 226, 255, .30);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .09);
}

.story-picker-v5__brand-mark img {
  width: 34px;
  height: 34px;
  display: block;
  filter: drop-shadow(0 0 10px rgba(94, 226, 255, .25));
}

.story-picker-v5__brand-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.story-picker-v5__brand-copy b {
  color: #fff;
  font: 900 .94rem/1 var(--font-title);
  letter-spacing: .035em;
}

.story-picker-v5__brand-copy small {
  color: #75e9ff;
  font: 900 .58rem/1 var(--font-title);
  letter-spacing: .14em;
}

.story-picker-v5 .story-picker-v4__heading {
  min-width: 0;
}

.story-picker-v5 .story-picker-v4__heading > span {
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(85, 220, 255, .13), rgba(145, 103, 255, .11)) !important;
  border: 1px solid rgba(101, 225, 255, .22) !important;
  color: #8eeeff !important;
  font: 900 .62rem/1 var(--font-title) !important;
  letter-spacing: .13em !important;
}

.story-picker-v5 .story-picker-v4__heading h4 {
  margin: 7px 0 0 !important;
  color: #fff !important;
  font: 900 clamp(1.45rem, 1.8vw, 1.95rem)/1 var(--font-title) !important;
  letter-spacing: -.025em;
}

.story-picker-v5 .story-picker-v4__heading h4 em {
  font-style: normal;
  color: transparent;
  background: linear-gradient(90deg, #63e9ff, #8c7cff 48%, #f061bd 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.story-picker-v5 .story-picker-v4__heading p {
  margin: 6px 0 0 !important;
  max-width: 72ch;
  color: rgba(225, 238, 255, .72) !important;
  font: 700 .84rem/1.35 var(--font-body) !important;
}

.story-picker-v5 .story-picker-v4__active {
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 10px 12px !important;
  border-radius: 17px !important;
  background:
    radial-gradient(circle at 0 50%, color-mix(in srgb, var(--chapter-color) 20%, transparent), transparent 45%),
    linear-gradient(135deg, rgba(15, 38, 63, .88), rgba(29, 20, 55, .86)) !important;
  border: 1px solid color-mix(in srgb, var(--chapter-color) 34%, rgba(117, 225, 255, .18)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055);
}

.story-picker-v5__active-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-size: 1.35rem;
  background: color-mix(in srgb, var(--chapter-color) 20%, rgba(8, 19, 38, .9));
  border: 1px solid color-mix(in srgb, var(--chapter-color) 40%, rgba(255, 255, 255, .08));
  box-shadow: 0 0 24px color-mix(in srgb, var(--chapter-color) 16%, transparent);
}

.story-picker-v5__active-copy { min-width: 0; }
.story-picker-v5 .story-picker-v4__active small {
  color: color-mix(in srgb, var(--chapter-color) 72%, #dff8ff) !important;
  font-size: .58rem !important;
  letter-spacing: .09em !important;
}
.story-picker-v5 .story-picker-v4__active strong {
  margin-top: 4px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap !important;
  font-size: .96rem !important;
}
.story-picker-v5__active-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  color: rgba(228, 239, 255, .72);
  font: 800 .58rem/1 var(--font-title);
}
.story-picker-v5__active-meta span,
.story-picker-v5__active-meta b {
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .07);
  white-space: nowrap;
}
.story-picker-v5__active-meta b {
  margin-left: auto;
  color: #fff;
  background: color-mix(in srgb, var(--chapter-color) 17%, rgba(255, 255, 255, .04));
  border-color: color-mix(in srgb, var(--chapter-color) 28%, rgba(255, 255, 255, .08));
}

.story-picker-v5 .story-picker-v4__close {
  width: 50px !important;
  height: 50px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .035)) !important;
  color: #eaf5ff !important;
  font: 500 1.55rem/1 var(--font-title) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease !important;
}
.story-picker-v5 .story-picker-v4__close:hover {
  transform: translateY(-1px) rotate(3deg) !important;
  border-color: rgba(255, 93, 184, .38) !important;
  background: rgba(255, 75, 165, .10) !important;
  color: #ff9ad3 !important;
}

.story-picker-v5 .story-picker-v4__layout {
  min-height: 0;
  display: grid !important;
  grid-template-columns: 330px minmax(0, 1fr) !important;
  gap: 14px !important;
  padding: 14px !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(2, 9, 24, .34), rgba(4, 8, 20, .48));
}

.story-picker-v5 .story-picker-v4__chapters,
.story-picker-v5 .story-picker-v4__missions {
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 22px !important;
  border: 1px solid rgba(111, 218, 255, .13) !important;
  background:
    radial-gradient(circle at 0 0, rgba(63, 211, 255, .07), transparent 32%),
    linear-gradient(180deg, rgba(10, 28, 48, .88), rgba(8, 17, 35, .92)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 14px 32px rgba(0, 0, 0, .13);
}

.story-picker-v5 .story-picker-v4__chapters {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
}

.story-picker-v5 .story-picker-v4__section-title {
  min-height: 64px;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 13px 14px !important;
  border-bottom: 1px solid rgba(101, 225, 255, .12) !important;
  background: linear-gradient(90deg, rgba(74, 216, 255, .07), rgba(143, 91, 255, .045));
}
.story-picker-v5 .story-picker-v4__section-title > div { min-width: 0; display: grid; gap: 4px; }
.story-picker-v5 .story-picker-v4__section-title small {
  color: #71e7ff;
  font: 900 .55rem/1 var(--font-title);
  letter-spacing: .14em;
}
.story-picker-v5 .story-picker-v4__section-title strong {
  color: #fff !important;
  font: 900 1rem/1 var(--font-title) !important;
}
.story-picker-v5 .story-picker-v4__section-title > span {
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .07);
  color: rgba(226, 239, 255, .66) !important;
  font: 800 .62rem/1 var(--font-title) !important;
  white-space: nowrap;
}

.story-picker-v5 .story-picker-v4__chapter-list {
  min-height: 0 !important;
  display: grid !important;
  align-content: start !important;
  gap: 9px !important;
  padding: 10px !important;
  overflow: auto !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(101, 225, 255, .34) transparent;
}

.story-picker-v5 .sp4-chapter {
  position: relative;
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: 48px minmax(0, 1fr) 54px !important;
  gap: 10px !important;
  padding: 11px !important;
  overflow: hidden;
  border-radius: 17px !important;
  border: 1px solid color-mix(in srgb, var(--chapter-color) 18%, rgba(255, 255, 255, .07)) !important;
  background:
    radial-gradient(circle at 0 50%, color-mix(in srgb, var(--chapter-color) 12%, transparent), transparent 42%),
    linear-gradient(135deg, rgba(255, 255, 255, .038), rgba(255, 255, 255, .018)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}
.story-picker-v5 .sp4-chapter::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  bottom: 11px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: var(--chapter-color);
  opacity: .34;
  box-shadow: 0 0 14px color-mix(in srgb, var(--chapter-color) 45%, transparent);
}
.story-picker-v5 .sp4-chapter:hover:not(:disabled) {
  transform: translateX(3px) !important;
  border-color: color-mix(in srgb, var(--chapter-color) 44%, rgba(255, 255, 255, .12)) !important;
  background:
    radial-gradient(circle at 0 50%, color-mix(in srgb, var(--chapter-color) 19%, transparent), transparent 45%),
    linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025)) !important;
}
.story-picker-v5 .sp4-chapter.is-active {
  border-color: color-mix(in srgb, var(--chapter-color) 72%, rgba(255, 255, 255, .18)) !important;
  background:
    radial-gradient(circle at 0 50%, color-mix(in srgb, var(--chapter-color) 25%, transparent), transparent 48%),
    linear-gradient(135deg, rgba(59, 204, 255, .08), rgba(135, 86, 255, .07)) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--chapter-color) 16%, transparent),
    0 8px 24px color-mix(in srgb, var(--chapter-color) 10%, transparent) !important;
}
.story-picker-v5 .sp4-chapter.is-active::before { opacity: 1; width: 4px; }
.story-picker-v5 .sp4-chapter__icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--chapter-color) 18%, rgba(7, 17, 35, .88)) !important;
  border-color: color-mix(in srgb, var(--chapter-color) 38%, rgba(255, 255, 255, .08)) !important;
  box-shadow: 0 0 18px color-mix(in srgb, var(--chapter-color) 10%, transparent);
}
.story-picker-v5 .sp4-chapter__copy small { font-size: .58rem !important; letter-spacing: .065em !important; }
.story-picker-v5 .sp4-chapter__copy strong { margin-top: 4px !important; font-size: .91rem !important; }
.story-picker-v5 .sp4-chapter__meta { gap: 4px !important; margin-top: 6px !important; }
.story-picker-v5 .sp4-chapter__meta span { padding: 4px 6px !important; font-size: .56rem !important; }
.story-picker-v5 .sp4-chapter__side b { font-size: .7rem !important; }
.story-picker-v5 .sp4-chapter__side i { height: 5px !important; }

.story-picker-v5 .story-picker-v4__missions {
  position: relative;
  padding: 14px !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(144, 105, 255, .42) transparent;
}

.story-picker-v5 .sp4-stage {
  display: grid !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.story-picker-v5 .sp4-stage__top {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 380px !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 14px !important;
  overflow: hidden;
  border-radius: 19px;
  border: 1px solid color-mix(in srgb, var(--chapter-color) 25%, rgba(100, 226, 255, .10));
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--chapter-color) 17%, transparent), transparent 36%),
    radial-gradient(circle at 100% 0, rgba(143, 90, 255, .10), transparent 35%),
    linear-gradient(135deg, rgba(15, 39, 63, .82), rgba(17, 19, 47, .82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.story-picker-v5 .sp4-stage__top::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--chapter-color), rgba(137, 105, 255, .55), transparent);
  opacity: .5;
}
.story-picker-v5 .sp4-stage__chapter { grid-template-columns: 60px minmax(0, 1fr) !important; gap: 12px !important; }
.story-picker-v5 .sp4-stage__icon {
  width: 60px !important;
  height: 60px !important;
  border-radius: 17px !important;
  background: color-mix(in srgb, var(--chapter-color) 21%, rgba(8, 18, 36, .86)) !important;
  border-color: color-mix(in srgb, var(--chapter-color) 42%, rgba(255, 255, 255, .08)) !important;
  box-shadow: 0 0 28px color-mix(in srgb, var(--chapter-color) 14%, transparent);
}
.story-picker-v5 .sp4-stage__chapter > div:last-child > span {
  padding: 5px 8px !important;
  background: color-mix(in srgb, var(--chapter-color) 13%, rgba(85, 226, 255, .06)) !important;
  border-color: color-mix(in srgb, var(--chapter-color) 26%, rgba(91, 226, 255, .14)) !important;
  color: color-mix(in srgb, var(--chapter-color) 74%, #dffaff) !important;
  font-size: .57rem !important;
}
.story-picker-v5 .sp4-stage__chapter h5 {
  margin: 7px 0 0 !important;
  font: 900 clamp(1.35rem, 1.7vw, 1.75rem)/1 var(--font-title) !important;
  letter-spacing: -.02em;
}
.story-picker-v5 .sp4-stage__chapter p {
  margin: 7px 0 0 !important;
  color: rgba(229, 239, 255, .72) !important;
  font: 700 .82rem/1.35 var(--font-body) !important;
}
.story-picker-v5 .sp4-stage__stats {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 7px !important;
}
.story-picker-v5 .sp4-stage__stats > div {
  min-height: 58px;
  display: grid;
  place-content: center;
  padding: 8px !important;
  border-radius: 14px !important;
  background: rgba(4, 13, 29, .46) !important;
  border: 1px solid rgba(125, 211, 255, .12) !important;
}
.story-picker-v5 .sp4-stage__stats strong { font-size: .96rem !important; }
.story-picker-v5 .sp4-stage__stats small { margin-top: 4px !important; font-size: .52rem !important; }
.story-picker-v5 .sp4-stage__play {
  min-height: 58px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #61eaff 0%, #5cb7ff 38%, #8e73ff 72%, #d65bc6 100%) !important;
  color: #071323 !important;
  font: 900 .67rem/1 var(--font-title) !important;
  box-shadow: 0 10px 24px rgba(93, 172, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .16s ease, filter .16s ease !important;
}
.story-picker-v5 .sp4-stage__play:hover { transform: translateY(-1px); filter: brightness(1.07); }
.story-picker-v5 .sp4-stage__chips { display: flex !important; flex-wrap: wrap !important; gap: 7px !important; }
.story-picker-v5 .sp4-stage__chip {
  min-height: 28px !important;
  padding: 0 9px !important;
  background: rgba(10, 27, 48, .76) !important;
  border-color: rgba(112, 220, 255, .12) !important;
  color: rgba(236, 246, 255, .86) !important;
  font-size: .61rem !important;
}
.story-picker-v5 .sp4-stage__chip--rule {
  background: color-mix(in srgb, var(--chapter-color) 14%, rgba(10, 27, 48, .76)) !important;
  border-color: color-mix(in srgb, var(--chapter-color) 32%, rgba(112, 220, 255, .12)) !important;
}

.story-picker-v5 .sp4-mission-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
  align-content: start !important;
  margin: 0 !important;
}

.story-picker-v5 .sp4-mission {
  position: relative !important;
  min-width: 0 !important;
  width: auto !important;
  min-height: 164px !important;
  display: grid !important;
  grid-template-rows: auto auto 1fr auto !important;
  gap: 9px !important;
  padding: 13px !important;
  overflow: hidden !important;
  border-radius: 17px !important;
  border: 1px solid rgba(108, 211, 255, .12) !important;
  background:
    radial-gradient(circle at 100% 0, rgba(104, 225, 255, .07), transparent 38%),
    linear-gradient(145deg, rgba(13, 32, 54, .90), rgba(10, 18, 38, .94)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 10px 24px rgba(0, 0, 0, .11) !important;
  opacity: 1;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, filter .16s ease !important;
}
.story-picker-v5 .sp4-mission::before {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  top: 0;
  height: 2px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, transparent, rgba(102, 232, 255, .8), rgba(143, 106, 255, .72), transparent);
  opacity: .48;
}
.story-picker-v5 .sp4-mission:hover:not(.is-locked) {
  transform: translateY(-3px) !important;
  border-color: color-mix(in srgb, var(--chapter-color) 34%, rgba(101, 226, 255, .20)) !important;
  box-shadow: 0 15px 30px rgba(0, 0, 0, .20), 0 0 22px color-mix(in srgb, var(--chapter-color) 8%, transparent) !important;
}
.story-picker-v5 .sp4-mission.is-available {
  border-color: rgba(93, 226, 255, .28) !important;
  background:
    radial-gradient(circle at 100% 0, rgba(86, 219, 255, .14), transparent 40%),
    linear-gradient(145deg, rgba(14, 46, 68, .92), rgba(18, 22, 53, .94)) !important;
}
.story-picker-v5 .sp4-mission.is-available::before { opacity: 1; }
.story-picker-v5 .sp4-mission.is-completed {
  border-color: rgba(101, 229, 171, .18) !important;
  background:
    radial-gradient(circle at 100% 0, rgba(93, 226, 179, .09), transparent 40%),
    linear-gradient(145deg, rgba(12, 39, 49, .90), rgba(10, 21, 40, .94)) !important;
}
.story-picker-v5 .sp4-mission.is-completed::before { background: linear-gradient(90deg, transparent, #6ee9b0, #62dff7, transparent); opacity: .55; }
.story-picker-v5 .sp4-mission.is-boss {
  border-color: rgba(255, 174, 87, .22) !important;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 87, 171, .11), transparent 36%),
    radial-gradient(circle at 0 100%, rgba(255, 177, 75, .10), transparent 40%),
    linear-gradient(145deg, rgba(48, 28, 43, .92), rgba(20, 18, 39, .95)) !important;
}
.story-picker-v5 .sp4-mission.is-boss::before { background: linear-gradient(90deg, transparent, #ffb452, #ff5fae, transparent); opacity: .9; }
.story-picker-v5 .sp4-mission.is-locked {
  opacity: .52 !important;
  filter: saturate(.45) !important;
  background: linear-gradient(145deg, rgba(22, 29, 43, .82), rgba(13, 18, 31, .88)) !important;
}
.story-picker-v5 .sp4-mission__head { gap: 10px !important; }
.story-picker-v5 .sp4-mission__head small {
  color: #79e9ff !important;
  font-size: .64rem !important;
  letter-spacing: .08em !important;
}
.story-picker-v5 .sp4-mission__name {
  margin-top: 6px !important;
  color: #fff !important;
  font: 900 .93rem/1.16 var(--font-title) !important;
}
.story-picker-v5 .sp4-mission__state {
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  background: rgba(5, 15, 32, .55) !important;
  border-color: rgba(127, 221, 255, .14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}
.story-picker-v5 .sp4-mission__tags { gap: 5px !important; }
.story-picker-v5 .sp4-mission__tag {
  min-height: 24px !important;
  padding: 0 7px !important;
  background: rgba(85, 220, 255, .09) !important;
  border-color: rgba(94, 226, 255, .15) !important;
  color: #dcf9ff !important;
  font-size: .55rem !important;
}
.story-picker-v5 .sp4-mission__tag--soft {
  background: rgba(145, 104, 255, .08) !important;
  border-color: rgba(145, 104, 255, .14) !important;
  color: #eee8ff !important;
}
.story-picker-v5 .sp4-mission__meta {
  color: rgba(224, 238, 255, .66) !important;
  font-size: .64rem !important;
}
.story-picker-v5 .sp4-mission__foot {
  grid-template-columns: auto minmax(112px, 1fr) !important;
  gap: 8px !important;
}
.story-picker-v5 .sp4-mission__foot b {
  min-height: 36px !important;
  padding: 0 10px !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg, rgba(84, 216, 255, .11), rgba(142, 101, 255, .10)) !important;
  border: 1px solid rgba(111, 217, 255, .15) !important;
  color: #f1f8ff !important;
  font-size: .59rem !important;
}
.story-picker-v5 .sp4-mission.is-available .sp4-mission__foot b {
  background: linear-gradient(135deg, #60e9ff, #5fb7ff 42%, #8c72ff 100%) !important;
  border-color: transparent !important;
  color: #061323 !important;
  box-shadow: 0 8px 18px rgba(87, 190, 255, .13);
}
.story-picker-v5 .sp4-mission.is-completed .sp4-mission__foot b {
  background: linear-gradient(135deg, #72e9b2, #5edcf4) !important;
  border-color: transparent !important;
  color: #071820 !important;
}
.story-picker-v5 .sp4-mission.is-boss .sp4-mission__foot b {
  background: linear-gradient(135deg, #ffd35f, #ff9953 54%, #ff68ae) !important;
  border-color: transparent !important;
  color: #231006 !important;
}
.story-picker-v5 .sp4-mission.is-locked .sp4-mission__foot b {
  background: rgba(255, 255, 255, .045) !important;
  border-color: rgba(255, 255, 255, .07) !important;
  color: rgba(232, 240, 255, .55) !important;
  box-shadow: none;
}
.story-picker-v5 .sp4-mission__stars span { font-size: .84rem !important; }

.story-picker-v5 .story-picker-v4__chapter-list::-webkit-scrollbar,
.story-picker-v5 .story-picker-v4__missions::-webkit-scrollbar { width: 7px; height: 7px; }
.story-picker-v5 .story-picker-v4__chapter-list::-webkit-scrollbar-thumb,
.story-picker-v5 .story-picker-v4__missions::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(94, 226, 255, .42), rgba(145, 103, 255, .42));
}
.story-picker-v5 .story-picker-v4__chapter-list::-webkit-scrollbar-track,
.story-picker-v5 .story-picker-v4__missions::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 1480px) {
  .story-picker-v5 { width: calc(100vw - 22px) !important; height: calc(100dvh - 20px) !important; }
  .story-picker-v5 .story-picker-v4__header { grid-template-columns: 150px minmax(0, 1fr) 300px 46px !important; gap: 12px !important; padding: 14px 16px !important; }
  .story-picker-v5__brand-mark { width: 44px; height: 44px; flex-basis: 44px; }
  .story-picker-v5__brand-mark img { width: 31px; height: 31px; }
  .story-picker-v5 .story-picker-v4__close { width: 46px !important; height: 46px !important; }
  .story-picker-v5 .story-picker-v4__layout { grid-template-columns: 300px minmax(0, 1fr) !important; gap: 10px !important; padding: 10px !important; }
  .story-picker-v5 .sp4-stage__top { grid-template-columns: minmax(0, 1fr) 350px !important; padding: 12px !important; }
  .story-picker-v5 .sp4-mission { min-height: 154px !important; padding: 11px !important; gap: 7px !important; }
}

@media (max-width: 1180px) {
  .story-picker-v5 .story-picker-v4__header { grid-template-columns: minmax(0, 1fr) 270px 46px !important; }
  .story-picker-v5__brand { display: none; }
  .story-picker-v5 .story-picker-v4__layout { grid-template-columns: 270px minmax(0, 1fr) !important; }
  .story-picker-v5 .sp4-stage__top { grid-template-columns: 1fr !important; }
  .story-picker-v5 .sp4-stage__stats { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .story-picker-v5 .sp4-mission-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 900px) {
  .story-picker-v4-overlay { padding: 5px !important; }
  .story-picker-v5 { width: 100% !important; height: 100dvh !important; border-radius: 0 !important; }
  .story-picker-v5 .story-picker-v4__header { grid-template-columns: minmax(0, 1fr) 44px !important; padding: 12px !important; }
  .story-picker-v5 .story-picker-v4__active { display: none !important; }
  .story-picker-v5 .story-picker-v4__close { width: 44px !important; height: 44px !important; }
  .story-picker-v5 .story-picker-v4__heading p { font-size: .76rem !important; }
  .story-picker-v5 .story-picker-v4__layout { grid-template-columns: 1fr !important; grid-template-rows: auto minmax(0, 1fr) !important; padding: 8px !important; }
  .story-picker-v5 .story-picker-v4__chapters { display: block !important; }
  .story-picker-v5 .story-picker-v4__section-title { min-height: 48px; padding: 9px 11px !important; }
  .story-picker-v5 .story-picker-v4__chapter-list { display: flex !important; gap: 7px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 7px !important; }
  .story-picker-v5 .sp4-chapter { flex: 0 0 245px !important; grid-template-columns: 42px minmax(0, 1fr) 44px !important; }
  .story-picker-v5 .sp4-chapter__icon { width: 42px !important; height: 42px !important; }
  .story-picker-v5 .sp4-chapter__meta { display: none !important; }
  .story-picker-v5 .story-picker-v4__missions { padding: 10px !important; }
}

@media (max-width: 620px) {
  .story-picker-v5 .story-picker-v4__heading > span { display: none; }
  .story-picker-v5 .story-picker-v4__heading h4 { margin-top: 0 !important; font-size: 1.22rem !important; }
  .story-picker-v5 .story-picker-v4__heading p { display: none; }
  .story-picker-v5 .sp4-stage__chapter { grid-template-columns: 48px minmax(0, 1fr) !important; }
  .story-picker-v5 .sp4-stage__icon { width: 48px !important; height: 48px !important; }
  .story-picker-v5 .sp4-stage__chapter p { display: none !important; }
  .story-picker-v5 .sp4-stage__stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .story-picker-v5 .sp4-mission-grid { grid-template-columns: 1fr !important; }
  .story-picker-v5 .sp4-mission { min-height: 150px !important; }
}

@media (max-height: 760px) and (min-width: 901px) {
  .story-picker-v5 { height: calc(100dvh - 10px) !important; }
  .story-picker-v5 .story-picker-v4__header { padding-top: 10px !important; padding-bottom: 10px !important; }
  .story-picker-v5 .story-picker-v4__heading p { display: none !important; }
  .story-picker-v5__brand-mark { width: 40px; height: 40px; flex-basis: 40px; }
  .story-picker-v5__brand-mark img { width: 28px; height: 28px; }
  .story-picker-v5 .story-picker-v4__active { padding: 7px 9px !important; }
  .story-picker-v5__active-icon { width: 40px; height: 40px; }
  .story-picker-v5 .story-picker-v4__layout { grid-template-columns: 280px minmax(0, 1fr) !important; padding: 8px !important; gap: 8px !important; }
  .story-picker-v5 .story-picker-v4__section-title { min-height: 48px; padding: 8px 10px !important; }
  .story-picker-v5 .story-picker-v4__chapter-list { gap: 6px !important; padding: 7px !important; }
  .story-picker-v5 .sp4-chapter { grid-template-columns: 40px minmax(0, 1fr) 44px !important; padding: 8px !important; }
  .story-picker-v5 .sp4-chapter__icon { width: 40px !important; height: 40px !important; }
  .story-picker-v5 .sp4-chapter__meta { display: none !important; }
  .story-picker-v5 .story-picker-v4__missions { padding: 9px !important; }
  .story-picker-v5 .sp4-stage__top { grid-template-columns: minmax(0, 1fr) 330px !important; padding: 9px !important; }
  .story-picker-v5 .sp4-stage__icon { width: 48px !important; height: 48px !important; }
  .story-picker-v5 .sp4-stage__chapter { grid-template-columns: 48px minmax(0, 1fr) !important; }
  .story-picker-v5 .sp4-stage__chapter p { display: none !important; }
  .story-picker-v5 .sp4-stage__chips { display: none !important; }
  .story-picker-v5 .sp4-stage__stats > div,
  .story-picker-v5 .sp4-stage__play { min-height: 48px !important; }
  .story-picker-v5 .sp4-mission-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 7px !important; }
  .story-picker-v5 .sp4-mission { min-height: 138px !important; padding: 9px !important; gap: 6px !important; }
  .story-picker-v5 .sp4-mission__foot b { min-height: 31px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .story-picker-v5 *,
  .story-picker-v5 *::before,
  .story-picker-v5 *::after { transition: none !important; animation: none !important; }
}