/* the story page at the start of each game (js/storyscreens.js) */
#modal-body.m-story { width: min(760px, 95vw); padding: 0; overflow-x: hidden; }
.sy-art { height: 170px; background: linear-gradient(0deg, #0e1620 0%, rgba(14, 22, 32, 0.25) 60%, rgba(14, 22, 32, 0.05) 100%), url("../assets/title-battle.webp") 62% 38% / cover; }
.sy-body { padding: 4px 34px 22px; margin-top: -54px; position: relative; }
.sy-eyebrow { font-family: var(--head); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gild); text-shadow: 0 1px 4px #000; }
#modal-body .sy-title { margin: 4px 0 12px; font-size: 30px; line-height: 1.15; color: #e4edf5; letter-spacing: 0.03em; text-shadow: 0 2px 10px #000; }
.sy-tale p { margin: 0 0 10px; font-size: 16.5px; line-height: 1.6; color: #d2dbe3; font-style: italic; }
.sy.drop .sy-tale p.sy-first:first-letter { float: left; margin: 5px 9px 0 0; font-family: var(--head); font-style: normal; font-size: 46px; line-height: 0.8; color: var(--gild-hi); }
.sy-aim { margin: 14px 0 6px; padding: 12px 18px 10px; border: 1px solid rgba(152, 184, 212, 0.35); border-left: 3px solid var(--gild); border-radius: 5px; background: linear-gradient(90deg, rgba(152, 184, 212, 0.1), rgba(152, 184, 212, 0.02)); }
.sy-aimhead { font-family: var(--head); font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gild-hi); margin-bottom: 4px; }
.sy-aim ul { margin: 0; padding-left: 20px; }
.sy-aim li { margin: 5px 0; font-size: 15px; line-height: 1.45; color: #dbe4ec; }
.sy-aim li::marker { color: var(--gild); }
.sy-note { margin: 10px 0 0; font-size: 13.5px; color: #93a2b1; }
.sy-foot { margin-top: 16px !important; justify-content: center; }
.sy-foot button.primary { min-width: 240px; padding: 12px 28px; font-family: var(--head); font-size: 17px; letter-spacing: 0.06em; }
@media (max-width: 760px) {
  .sy-art { height: 110px; }
  .sy-body { padding: 4px 18px 18px; margin-top: -36px; }
  #modal-body .sy-title { font-size: 24px; }
  .sy-tale p { font-size: 15px; }
  .sy-foot button.primary { width: 100%; min-width: 0; }
  /* a long tale scrolls; the button stays in reach */
  .sy-foot { position: sticky; bottom: -18px; margin: 12px -18px -18px !important; padding: 10px 18px 14px; background: linear-gradient(0deg, #0e1620 75%, rgba(14, 22, 32, 0)); }
}
@media (min-width: 761px) and (max-height: 860px) {
  .sy-art { height: 110px; }
  .sy-body { margin-top: -40px; padding-bottom: 16px; }
  #modal-body .sy-title { font-size: 26px; margin-bottom: 8px; }
  .sy-tale p { font-size: 15px; line-height: 1.5; margin-bottom: 8px; }
  .sy-aim { margin-top: 10px; padding: 9px 16px 8px; }
  .sy-aim li { font-size: 14px; margin: 3px 0; }
  .sy-foot { margin-top: 12px !important; }
  .sy-foot button.primary { padding: 10px 26px; }
}