/* v7.0 — STORIES MODULE
   Story cards/covers live here. Story reader legacy base styles remain in game.css for now.
   This file is intentionally loaded after game.css so story UI can be edited independently. */
/* v6.19 — unified story cover system */
.stories .story-library{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:20px!important;
  align-items:stretch!important;
}
.stories .story-book{
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  height:100%!important;
  padding:10px!important;
  border-radius:24px!important;
  overflow:hidden!important;
  background:rgba(255,248,225,.90)!important;
  border:1px solid rgba(255,255,255,.28)!important;
  box-shadow:0 12px 30px rgba(8,28,24,.28)!important;
  transition:transform .18s ease,box-shadow .18s ease!important;
}
.stories .story-book:not(.locked-story):hover{
  transform:translateY(-4px)!important;
  box-shadow:0 18px 38px rgba(8,28,24,.34)!important;
}
.stories .story-cover{
  width:100%!important;
  min-height:0!important;
  aspect-ratio:16/10!important;
  box-sizing:border-box!important;
  padding:20px 18px 18px!important;
  border-radius:18px!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  justify-content:flex-end!important;
  align-items:flex-start!important;
  isolation:isolate!important;
}
.stories .story-cover:before{
  background:linear-gradient(to bottom,rgba(2,10,12,0) 38%,rgba(2,10,12,.10) 55%,rgba(2,10,12,.82) 100%)!important;
}
.stories .story-cover b{
  font-size:clamp(22px,2vw,29px)!important;
  line-height:1.04!important;
  max-width:94%!important;
  text-shadow:0 2px 10px rgba(0,0,0,.92)!important;
}
.stories .story-cover small{
  margin-top:8px!important;
  font-size:13px!important;
  font-weight:900!important;
  letter-spacing:.15px!important;
}
.stories .story-book p{
  flex:1!important;
  margin:10px 7px 5px!important;
  padding:0!important;
  font-size:14px!important;
  line-height:1.35!important;
}
#wonderStoryBtn .story-cover{background-image:url('../../assets/stories/wonderland/cover.webp')!important}
#moonStoryBtn .story-cover{background-image:url('../../assets/stories/moon-forest/cover.webp')!important}
#marsStoryBtn .story-cover{background-image:url('../../assets/stories/mars/cover.webp')!important}
#islandStoryBtn .story-cover{background-image:url('../../assets/stories/lost-logs-island/cover.webp')!important}
#dinoStoryBtn .story-cover{background-image:url('../../assets/stories/dinosaur-valley/cover.webp')!important}
#sunkenStoryBtn .story-cover{background-image:url('../../assets/stories/sunken-city/cover.webp')!important}

/* announcements stay illustrative placeholders, not chapter art */
.stories .announcement .story-cover{
  aspect-ratio:16/10!important;
  background:linear-gradient(145deg,#234f58,#192c43 58%,#3d2e55)!important;
  align-items:center!important;
  text-align:center!important;
}

@media(max-width:900px) and (min-width:601px){
  .stories .story-library{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:600px){
  .stories .story-library{grid-template-columns:1fr!important;gap:14px!important;padding-bottom:28px!important}
  .stories .story-book{padding:8px!important;border-radius:20px!important}
  .stories .story-cover{aspect-ratio:16/9!important;min-height:0!important;border-radius:16px!important;padding:16px 15px!important}
  .stories .story-cover b{font-size:24px!important;max-width:92%!important}
  .stories .story-cover small{font-size:12px!important}
  .stories .story-book p{font-size:13px!important;margin:8px 6px 3px!important}
}