/* Reading Buddy Picks
   Two unread-first story choices and one actionable Coin Shop reward target. */

.sn-right-column > .sn-practice-card-v3.sn-buddy-picks-panel {
  min-width: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 13px !important;
  overflow: visible !important;
  border: 1px solid rgba(70, 129, 100, .2) !important;
  border-radius: 22px !important;
  background: linear-gradient(155deg, rgba(255, 253, 242, .98), rgba(238, 250, 232, .97)) !important;
  box-shadow: 0 12px 30px rgba(38, 89, 67, .12) !important;
}

.sn-buddy-picks-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sn-buddy-picks-heading-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px 11px 16px 12px;
  background: linear-gradient(145deg, #fff1b9, #dff3d6);
  box-shadow: inset 0 0 0 1px rgba(56, 126, 86, .14), 0 4px 10px rgba(47, 101, 75, .1);
  font-size: 1.45rem;
  transform: rotate(-2deg);
}

.sn-buddy-picks-heading > span:last-child,
.sn-buddy-picks-next-heading,
.sn-celebration-buddy-picks-heading {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.sn-buddy-picks-heading small {
  color: #678071;
  font: 900 .66rem/1.1 "Nunito", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sn-buddy-picks-heading h2 {
  margin: 0;
  color: #245440;
  font: 900 clamp(1rem, 1.9vw, 1.2rem)/1.15 "Nunito", sans-serif;
  letter-spacing: -.02em;
}

#storyQuestCard.sn-story-quest-card.sn-buddy-picks-card {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  grid-template-areas: none !important;
  align-content: start !important;
  align-items: start !important;
  gap: 10px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#storyQuestCard.sn-buddy-picks-card > * {
  min-width: 0 !important;
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
}

.sn-buddy-picks-next {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.sn-buddy-picks-next-heading strong,
.sn-celebration-buddy-picks-heading strong {
  color: #285945;
  font: 900 .83rem/1.2 "Nunito", sans-serif;
}

.sn-buddy-picks-next-heading small,
.sn-celebration-buddy-picks-heading small {
  color: #718077;
  font: 700 .65rem/1.25 "Nunito", sans-serif;
}

.sn-buddy-picks-choices {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sn-buddy-pick {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  min-height: 92px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 8px;
  border: 1px solid rgba(67, 134, 95, .19);
  border-radius: 16px 10px 17px 12px;
  background: rgba(255, 255, 255, .88);
  color: #265642;
  box-shadow: 0 5px 12px rgba(43, 92, 70, .09);
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.sn-buddy-pick:hover:not(:disabled),
.sn-buddy-pick:focus-visible:not(:disabled),
.sn-buddy-reward-target:hover,
.sn-buddy-reward-target:focus-visible {
  border-color: rgba(49, 137, 91, .42);
  box-shadow: 0 8px 17px rgba(37, 91, 64, .15);
  outline: 3px solid rgba(64, 151, 98, .13);
  outline-offset: 1px;
  transform: translateY(-2px);
}

.sn-buddy-pick:disabled {
  opacity: .68;
  cursor: default;
  box-shadow: none;
}

.sn-buddy-pick-scene {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 14px 10px 15px 11px;
  background: linear-gradient(145deg, #e3f4d9, #fff0bc);
  box-shadow: inset 0 0 0 1px rgba(58, 124, 86, .11);
  font-size: 1.5rem;
}

.sn-buddy-pick-copy,
.sn-buddy-reward-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.sn-buddy-pick-copy small,
.sn-buddy-reward-copy small {
  color: #43805f;
  font: 900 .57rem/1.1 "Nunito", sans-serif;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.sn-buddy-pick-copy strong,
.sn-buddy-reward-copy strong {
  overflow: hidden;
  color: inherit;
  font: 900 .77rem/1.15 "Nunito", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sn-buddy-pick-copy span,
.sn-buddy-reward-copy > span {
  display: -webkit-box;
  overflow: hidden;
  color: #738077;
  font: 700 .59rem/1.22 "Nunito", sans-serif;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.sn-buddy-pick-arrow,
.sn-buddy-reward-cue {
  color: #5a8d6e;
  font: 900 1.2rem/1 "Nunito", sans-serif;
}

.sn-buddy-picks-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
  color: #65766c;
  font: 800 .72rem/1.35 "Nunito", sans-serif;
  text-align: center;
}

.sn-buddy-reward-target {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 0;
  min-height: 202px;
  display: grid;
  grid-template:
    "scene scene" minmax(118px, 1fr)
    "copy cue" auto
    "meter meter" auto
    / minmax(0, 1fr) auto;
  align-content: stretch;
  align-items: center;
  gap: 7px 10px;
  margin: 0;
  padding: 9px;
  overflow: hidden;
  border: 1px solid rgba(209, 158, 38, .25);
  border-radius: 17px 12px 18px 13px;
  background: linear-gradient(145deg, rgba(255, 249, 218, .95), rgba(243, 252, 237, .95));
  color: #345a45;
  box-shadow: 0 5px 12px rgba(90, 77, 30, .08);
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.sn-buddy-wishlist-scene {
  position: relative;
  isolation: isolate;
  grid-area: scene;
  align-self: stretch;
  min-height: 118px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 14px 10px 15px 11px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(47, 84, 42, .1)),
    url("./assets/story-nest/ui/reading-buddy-wishlist-garden-v1.png") center 52% / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(55, 112, 79, .13), 0 3px 8px rgba(57, 97, 67, .1);
}

.sn-buddy-wishlist-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at center, rgba(255, 253, 207, .18), transparent 46%);
}

.sn-buddy-wishlist-item {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  place-items: center;
  gap: 3px;
}

.sn-buddy-wishlist-reward {
  width: clamp(84px, 24vw, 112px);
  height: clamp(78px, 21vw, 104px);
  display: grid;
  place-items: center;
  overflow: visible;
  font-size: 3.5rem;
  filter: drop-shadow(0 7px 7px rgba(30, 66, 43, .3));
}

.sn-buddy-wishlist-reward .sn-wardrobe-item-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sn-buddy-wishlist-label {
  position: static;
  z-index: 1;
  min-width: 68px;
  padding: 4px 9px;
  border: 1px solid rgba(190, 24, 93, .32);
  border-radius: 999px;
  background: rgba(255, 242, 248, .95);
  color: #9d174d;
  box-shadow: 0 4px 10px rgba(110, 42, 72, .18);
  font: 900 .58rem/1 "Nunito", sans-serif;
  letter-spacing: .035em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.sn-buddy-reward-copy { grid-area: copy; }

.sn-buddy-reward-cue {
  grid-area: cue;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #7c6727;
  font-size: .68rem;
  white-space: nowrap;
}

.sn-buddy-reward-cue span { font-size: 1.1rem; }

.sn-buddy-reward-meter {
  grid-area: meter;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.sn-buddy-reward-meter-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(65, 115, 78, .14);
  box-shadow: inset 0 1px 2px rgba(44, 75, 53, .12);
}

#storyBuddyRewardMeterFill {
  width: 0;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #f5bb37, #f6db58);
  box-shadow: 0 0 6px rgba(226, 172, 36, .28);
  transition: width .3s ease;
}

.sn-buddy-reward-meter small {
  color: #6f6a42;
  font: 900 .52rem/1 "Nunito", sans-serif;
  white-space: nowrap;
}

@media (min-width: 1101px) and (orientation: landscape) {
  .sn-right-column > .sn-practice-card-v3.sn-buddy-picks-panel {
    min-height: 460px !important;
  }

  #storyQuestCard.sn-story-quest-card.sn-buddy-picks-card {
    grid-template-rows: auto minmax(226px, 1fr) !important;
  }

  .sn-buddy-reward-target {
    height: 100%;
    min-height: 226px;
    grid-template:
      "scene scene" minmax(132px, 1fr)
      "copy cue" auto
      "meter meter" auto
      / minmax(0, 1fr) auto;
  }

  .sn-buddy-wishlist-scene {
    min-height: 132px;
  }

  .sn-buddy-wishlist-reward {
    width: 112px;
    height: 102px;
  }
}

.sn-celebration-buddy-picks {
  width: 100%;
  display: grid;
  gap: 8px;
  margin-top: 3px;
  padding: 10px;
  border: 1px solid rgba(65, 137, 95, .18);
  border-radius: 18px 12px 19px 13px;
  background: linear-gradient(145deg, rgba(244, 252, 237, .92), rgba(255, 250, 229, .9));
}

.sn-buddy-picks-choices-celebration .sn-buddy-pick { min-height: 86px; }

.sn-celebration-buddy-picks-actions {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.sn-celebration-buddy-picks-actions .sn-celebration-next {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin: 0 !important;
  border-radius: 15px 11px 16px 12px !important;
  font: 900 .82rem/1.15 "Nunito", sans-serif !important;
}

html[data-sn-theme="dark"] .sn-right-column > .sn-practice-card-v3.sn-buddy-picks-panel {
  border-color: rgba(139, 202, 162, .18) !important;
  background: linear-gradient(155deg, rgba(24, 43, 39, .98), rgba(28, 51, 47, .97)) !important;
}

html[data-sn-theme="dark"] .sn-buddy-picks-heading h2,
html[data-sn-theme="dark"] .sn-buddy-picks-next-heading strong,
html[data-sn-theme="dark"] .sn-celebration-buddy-picks-heading strong { color: #dff5e6; }

html[data-sn-theme="dark"] .sn-buddy-picks-heading small,
html[data-sn-theme="dark"] .sn-buddy-picks-next-heading small,
html[data-sn-theme="dark"] .sn-celebration-buddy-picks-heading small { color: #a8bdb0; }

html[data-sn-theme="dark"] .sn-buddy-pick,
html[data-sn-theme="dark"] .sn-buddy-reward-target {
  border-color: rgba(143, 207, 166, .16);
  background: rgba(255, 255, 255, .055);
  color: #ddf3e4;
  box-shadow: 0 5px 13px rgba(0, 0, 0, .18);
}

html[data-sn-theme="dark"] .sn-buddy-pick-copy small,
html[data-sn-theme="dark"] .sn-buddy-reward-copy small { color: #93cfaa; }

html[data-sn-theme="dark"] .sn-buddy-pick-copy span,
html[data-sn-theme="dark"] .sn-buddy-reward-copy > span { color: #afc0b6; }

html[data-sn-theme="dark"] .sn-celebration-buddy-picks {
  border-color: rgba(143, 207, 166, .16);
  background: rgba(26, 50, 43, .78);
}

@media (orientation: portrait) and (max-width: 1100px) {
  .sn-right-column > .sn-practice-card-v3.sn-buddy-picks-panel {
    width: 100% !important;
    display: flex !important;
    margin-top: clamp(20px, 3vw, 30px) !important;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .sn-buddy-pick-copy span { display: none; }
  .sn-buddy-pick { min-height: 78px; }
}

@media (max-width: 699px) {
  .sn-right-column > .sn-practice-card-v3.sn-buddy-picks-panel {
    gap: 9px !important;
    padding: 11px !important;
    border-radius: 19px !important;
  }

  .sn-buddy-picks-heading-icon {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
    font-size: 1.25rem;
  }

  .sn-buddy-pick {
    min-height: 84px;
    grid-template-columns: 38px minmax(0, 1fr) 13px;
    gap: 6px;
    padding: 7px;
  }

  .sn-buddy-pick-scene {
    width: 38px;
    height: 38px;
    font-size: 1.35rem;
  }

  .sn-buddy-pick-copy span { display: none; }
  .sn-buddy-pick-copy strong { font-size: .73rem; white-space: normal; }
  .sn-buddy-picks-choices-celebration { grid-template-columns: 1fr; }
}

@media (max-width: 370px) {
  .sn-buddy-picks-choices { grid-template-columns: 1fr; }
  .sn-buddy-pick { min-height: 70px; }
  .sn-buddy-reward-target {
    grid-template:
      "scene" 110px
      "copy" auto
      "meter" auto
      / minmax(0, 1fr);
  }
  .sn-buddy-wishlist-scene { min-height: 110px; }
  .sn-buddy-reward-copy { text-align: center; }
  .sn-buddy-reward-cue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sn-buddy-pick,
  .sn-buddy-reward-target { transition: none !important; }
}