/* Realms of Arkovia — Story Journal Command Center
   Landing-page presentation only. Story state, unlock order, required keys,
   sessions, rewards, combat, archives, and RoA Bot authority remain unchanged. */

body.roa-story-journal-page {
  min-height: 100dvh;
  overflow: hidden;
  color: #d9d0c2;
  background:
    linear-gradient(rgba(3, 2, 6, 0.68), rgba(3, 2, 6, 0.94)),
    radial-gradient(circle at 50% 13%, rgba(128, 47, 158, 0.24), transparent 37rem),
    url('/roa-ui/backgrounds/violet-catacombs.webp') center / cover fixed,
    #050307;
}

body.roa-story-journal-page::before {
  opacity: 0.25;
  background:
    linear-gradient(rgba(216, 184, 107, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 184, 107, 0.035) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
}

body.roa-story-journal-page .roa-story-journal-shell {
  display: grid;
  align-content: start;
  gap: 11px;
  width: 100%;
  max-width: none;
  height: 100dvh;
  margin: 0;
  padding:
    calc(var(--roa-header-h) + 11px)
    14px
    calc(var(--roa-dock-h) + 17px);
  overflow-x: hidden;
  overflow-y: auto;
}

body.roa-story-journal-page .roa-story-journal-shell > * {
  min-width: 0;
}

body.roa-story-journal-page .roa-story-journal-header,
body.roa-story-journal-page .roa-story-journal-resume-card,
body.roa-story-journal-page .roa-story-journal-epilogue-card,
body.roa-story-journal-page .roa-story-journal-summary > article,
body.roa-story-journal-page .roa-story-journal-campaign,
body.roa-story-journal-page .roa-story-journal-archive,
body.roa-story-journal-page .storybook-unavailable {
  margin: 0;
  border: 14px solid transparent;
  border-image: var(--roa-frame-panel) 55 fill / 14px / 0 stretch;
  border-radius: 0;
  background: rgba(5, 4, 7, 0.93);
  box-shadow:
    0 11px 30px rgba(0, 0, 0, 0.56),
    inset 0 0 34px rgba(86, 31, 103, 0.07);
  box-sizing: border-box;
}

body.roa-story-journal-page .roa-story-journal-header {
  position: relative;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  min-height: 108px;
  padding: 11px 17px;
  overflow: hidden;
}

body.roa-story-journal-page .roa-story-journal-header::before {
  content: "";
  width: 68px;
  height: 68px;
  align-self: center;
  background:
    radial-gradient(circle, rgba(164, 70, 190, 0.18), transparent 69%),
    url('/roa-ui/icons/book.png') center / contain no-repeat;
  filter:
    saturate(0.82)
    brightness(1.05)
    drop-shadow(0 0 10px rgba(161, 61, 195, 0.39));
}

body.roa-story-journal-page .roa-story-journal-header::after {
  content: "";
  position: absolute;
  inset: 14px;
  pointer-events: none;
  border-bottom: 1px solid rgba(216, 184, 107, 0.13);
  background:
    linear-gradient(
      90deg,
      rgba(93, 31, 115, 0.1),
      transparent 31%,
      transparent 69%,
      rgba(93, 31, 115, 0.08)
    );
}

body.roa-story-journal-page .roa-story-journal-header > * {
  position: relative;
  z-index: 1;
  grid-column: 2;
}

body.roa-story-journal-page .eyebrow {
  margin: 0 0 3px;
  color: #c77bd6;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.15em;
}


/* UI-STORY-002A: Keep the main Story Dungeons label prominent. */
body.roa-story-journal-page .roa-story-journal-header > .eyebrow {
  margin-bottom: 4px;
  font-size: clamp(1.2rem, 1.55vw, 1.6rem);
  line-height: 1;
  letter-spacing: 0.18em;
}

body.roa-story-journal-page .roa-story-journal-header h1 {
  margin: 0;
  color: var(--roa-gold-bright);
  font-family: var(--roa-title-font);
  font-size: clamp(1.7rem, 2.35vw, 2.55rem);
  font-weight: 600;
  line-height: 1;
  text-shadow:
    0 2px 3px #000,
    0 0 17px rgba(216, 184, 107, 0.15);
}

body.roa-story-journal-page .roa-story-journal-header > p:last-child {
  max-width: 1080px;
  margin: 6px 0 0;
  color: #aaa094;
  font-size: 0.78rem;
  line-height: 1.4;
}

body.roa-story-journal-page .roa-story-journal-spotlight-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr);
  gap: 11px;
  min-width: 0;
}

body.roa-story-journal-page .roa-story-journal-resume-card,
body.roa-story-journal-page .roa-story-journal-epilogue-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 116px;
  padding: 10px 14px;
}

body.roa-story-journal-page .roa-story-journal-resume-card.dormant {
  grid-template-columns: minmax(0, 1fr);
  opacity: 0.83;
}

body.roa-story-journal-page .roa-story-journal-resume-card h2,
body.roa-story-journal-page .roa-story-journal-epilogue-card h2 {
  margin: 0 0 4px;
  color: #dfcfa6;
  font-family: var(--roa-title-font);
  font-size: 1.08rem;
  font-weight: 600;
}

body.roa-story-journal-page .roa-story-journal-resume-card p,
body.roa-story-journal-page .roa-story-journal-epilogue-card p {
  margin: 0;
  color: #a99f92;
  font-size: 0.72rem;
  line-height: 1.4;
}

body.roa-story-journal-page .storybook-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

body.roa-story-journal-page .storybook-meta-row > span {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  color: #c9bda8;
  font-size: 0.6rem;
  border: 1px solid rgba(216, 184, 107, 0.16);
  background: rgba(216, 184, 107, 0.055);
}

body.roa-story-journal-page .storybook-action-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(112px, 1fr));
  gap: 6px;
  min-width: 360px;
}

body.roa-story-journal-page .button,
body.roa-story-journal-page button {
  appearance: none !important;
  display: inline-grid !important;
  place-items: center;
  min-width: 126px;
  min-height: 39px !important;
  padding: 6px 13px !important;
  color: #decda0 !important;
  font-family: var(--roa-title-font);
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  line-height: 1.12 !important;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  border: 0 !important;
  border-image: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url('/roa-ui/frames/button-plain.png') !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
  filter:
    saturate(0.76)
    brightness(0.9)
    drop-shadow(0 4px 6px rgba(0, 0, 0, 0.56));
  transform: none !important;
}

body.roa-story-journal-page .storybook-primary-action {
  color: #f0dda8 !important;
  background-image: url('/roa-ui/frames/button-active.png') !important;
  filter:
    saturate(0.92)
    brightness(0.99)
    drop-shadow(0 0 7px rgba(155, 57, 202, 0.28));
}

body.roa-story-journal-page .button:hover,
body.roa-story-journal-page .button:focus-visible,
body.roa-story-journal-page button:hover,
body.roa-story-journal-page button:focus-visible {
  color: #fff0c4 !important;
  background-image: url('/roa-ui/frames/button-active.png') !important;
  outline: 1px solid rgba(209, 132, 237, 0.44);
  outline-offset: -3px;
  filter:
    saturate(1)
    brightness(1.04)
    drop-shadow(0 0 8px rgba(157, 57, 205, 0.35));
}

body.roa-story-journal-page .roa-story-journal-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
}

body.roa-story-journal-page .roa-story-journal-summary > article {
  display: grid;
  align-content: center;
  gap: 2px;
  min-height: 80px;
  padding: 8px 13px;
}

body.roa-story-journal-page .roa-story-journal-summary span {
  color: #8f877b;
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

body.roa-story-journal-page .roa-story-journal-summary strong {
  overflow: hidden;
  color: #e0d0a8;
  font-family: var(--roa-title-font);
  font-size: 1.04rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.roa-story-journal-page .roa-story-journal-summary small {
  color: #827a70;
  font-size: 0.61rem;
}

body.roa-story-journal-page .roa-story-journal-campaign,
body.roa-story-journal-page .roa-story-journal-archive {
  padding: 12px 14px 14px;
}

body.roa-story-journal-page .section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  margin: 0 0 9px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(216, 184, 107, 0.15);
}

body.roa-story-journal-page .section-heading h2 {
  margin: 0;
  color: #dfcfa5;
  font-family: var(--roa-title-font);
  font-size: 1.16rem;
  font-weight: 600;
}

body.roa-story-journal-page .roa-story-journal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

body.roa-story-journal-page .roa-story-journal-entry {
  position: relative;
  display: block;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 11px solid transparent;
  border-image: var(--roa-frame-panel) 55 fill / 11px / 0 stretch;
  border-radius: 0;
  background: rgba(7, 5, 9, 0.95);
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.5),
    inset 0 0 22px rgba(82, 29, 98, 0.06);
  transition:
    filter 0.16s ease,
    transform 0.16s ease,
    box-shadow 0.16s ease;
}

body.roa-story-journal-page .roa-story-journal-entry:hover,
body.roa-story-journal-page .roa-story-journal-entry:focus-within {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(203, 122, 232, 0.22),
    0 10px 27px rgba(0, 0, 0, 0.58),
    0 0 18px rgba(121, 45, 146, 0.12);
}

body.roa-story-journal-page .roa-story-journal-entry-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  height: 100%;
  padding: 0;
  color: inherit;
  text-decoration: none;
}

body.roa-story-journal-page .roa-story-journal-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7.8;
  min-height: 108px;
  margin: 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(216, 184, 107, 0.18);
  background:
    radial-gradient(circle at center, rgba(110, 39, 133, 0.24), transparent 64%),
    rgba(3, 2, 5, 0.96);
}

body.roa-story-journal-page .roa-story-journal-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, transparent 46%, rgba(4, 3, 6, 0.82)),
    linear-gradient(90deg, rgba(4, 3, 6, 0.23), transparent, rgba(4, 3, 6, 0.23));
}

body.roa-story-journal-page .roa-story-journal-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter:
    saturate(0.78)
    brightness(0.82)
    contrast(1.05);
  transition:
    filter 0.18s ease,
    transform 0.22s ease;
}

body.roa-story-journal-page .roa-story-journal-entry:hover .roa-story-journal-cover img {
  filter:
    saturate(0.95)
    brightness(0.94)
    contrast(1.04);
  transform: scale(1.025);
}

body.roa-story-journal-page .roa-story-journal-order {
  position: absolute;
  left: 8px;
  bottom: 7px;
  z-index: 2;
  padding: 3px 7px;
  color: #e2d2aa;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(216, 184, 107, 0.26);
  background: rgba(5, 4, 7, 0.82);
}

body.roa-story-journal-page .roa-story-journal-cover .saga-status-icon {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  padding: 0;
  font-size: 0.88rem;
  border: 1px solid rgba(216, 184, 107, 0.3);
  border-radius: 50%;
  background: rgba(5, 4, 7, 0.84);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.55);
}

body.roa-story-journal-page .roa-story-journal-entry-copy {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 10px 10px 12px;
}

body.roa-story-journal-page .roa-story-journal-entry-copy h3 {
  margin: 0;
  color: #dfcfa6;
  font-family: var(--roa-title-font);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.15;
}

body.roa-story-journal-page .roa-story-journal-entry-copy > p:not(.storybook-meta-row) {
  margin: 0;
  color: #a49b8f;
  font-size: 0.66rem;
  line-height: 1.3;
}

body.roa-story-journal-page .roa-story-journal-entry-copy > small {
  margin-top: 2px;
  color: #898176;
  font-size: 0.63rem;
  line-height: 1.38;
}

body.roa-story-journal-page .roa-story-journal-entry-copy > em {
  margin-top: 2px;
  color: #ad94b6;
  font-size: 0.61rem;
  font-style: normal;
  line-height: 1.35;
}

body.roa-story-journal-page .roa-story-journal-entry .saga-status-label {
  position: absolute;
  right: 17px;
  bottom: 14px;
  z-index: 3;
  padding: 3px 7px;
  color: #c8bda7;
  font-size: 0.57rem;
  font-weight: 700;
  border: 1px solid rgba(216, 184, 107, 0.18);
  background: rgba(5, 4, 7, 0.88);
}

body.roa-story-journal-page .roa-story-journal-entry.completed {
  box-shadow:
    0 0 0 1px rgba(216, 184, 107, 0.16),
    0 8px 23px rgba(0, 0, 0, 0.52);
}

body.roa-story-journal-page .roa-story-journal-entry.active {
  box-shadow:
    0 0 0 1px rgba(201, 119, 230, 0.32),
    0 0 20px rgba(130, 47, 158, 0.16),
    0 8px 23px rgba(0, 0, 0, 0.52);
}

body.roa-story-journal-page .roa-story-journal-entry.unlocked {
  box-shadow:
    0 0 0 1px rgba(104, 146, 169, 0.19),
    0 8px 23px rgba(0, 0, 0, 0.52);
}

body.roa-story-journal-page .roa-story-journal-entry.locked {
  opacity: 0.62;
  filter: grayscale(0.38) brightness(0.78);
}

body.roa-story-journal-page .roa-story-journal-entry.locked:hover {
  transform: none;
}

body.roa-story-journal-page .roa-story-journal-archive .storybook-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

body.roa-story-journal-page .roa-story-journal-archive-card {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(216, 184, 107, 0.16);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(19, 14, 22, 0.9), rgba(7, 5, 9, 0.95));
}

body.roa-story-journal-page .roa-story-journal-archive-card h3 {
  margin: 0;
  color: #dccca4;
  font-family: var(--roa-title-font);
  font-size: 0.82rem;
}

body.roa-story-journal-page .roa-story-journal-archive-card p,
body.roa-story-journal-page .storybook-empty-copy {
  margin: 0;
  color: #8f877b;
  font-size: 0.66rem;
  line-height: 1.4;
}

body.roa-story-journal-page .storybook-cover-symbol {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  color: #decda2;
  font-size: 1rem;
  border: 1px solid rgba(216, 184, 107, 0.2);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(216, 184, 107, 0.12), transparent 72%);
}

body.roa-story-journal-page .storybook-unavailable {
  display: grid;
  grid-template-columns: 55px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 12px 15px;
}

body.roa-story-journal-page .storybook-unavailable > span {
  display: grid;
  place-items: center;
  width: 51px;
  height: 51px;
  font-size: 1.4rem;
  background:
    radial-gradient(circle, rgba(116, 42, 133, 0.2), transparent 70%);
}

body.roa-story-journal-page .storybook-unavailable h2 {
  margin: 0 0 4px;
  color: #dccca5;
  font-family: var(--roa-title-font);
  font-size: 1rem;
}

body.roa-story-journal-page .storybook-unavailable p {
  margin: 0;
  color: #948b80;
  font-size: 0.7rem;
}

@media (max-width: 1450px), (max-height: 820px) {
  body.roa-story-journal-page .roa-story-journal-shell {
    gap: 8px;
    padding-top: calc(var(--roa-header-h) + 9px);
    padding-bottom: calc(var(--roa-dock-h) + 12px);
  }

  body.roa-story-journal-page .roa-story-journal-header,
  body.roa-story-journal-page .roa-story-journal-resume-card,
  body.roa-story-journal-page .roa-story-journal-epilogue-card,
  body.roa-story-journal-page .roa-story-journal-summary > article,
  body.roa-story-journal-page .roa-story-journal-campaign,
  body.roa-story-journal-page .roa-story-journal-archive,
  body.roa-story-journal-page .storybook-unavailable {
    border-width: 12px;
    border-image-width: 12px;
  }

  body.roa-story-journal-page .roa-story-journal-header {
    grid-template-columns: 58px minmax(0, 1fr);
    min-height: 91px;
    padding: 8px 12px;
  }

  body.roa-story-journal-page .roa-story-journal-header::before {
    width: 54px;
    height: 54px;
  }

  body.roa-story-journal-page .roa-story-journal-header h1 {
    font-size: 1.5rem;
  }

  body.roa-story-journal-page .roa-story-journal-header > p:last-child {
    overflow: hidden;
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.roa-story-journal-page .roa-story-journal-spotlight-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.roa-story-journal-page .roa-story-journal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.roa-story-journal-page .roa-story-journal-archive .storybook-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body.roa-story-journal-page .roa-story-journal-shell {
    padding-left: 9px;
    padding-right: 9px;
  }

  body.roa-story-journal-page .roa-story-journal-resume-card,
  body.roa-story-journal-page .roa-story-journal-epilogue-card,
  body.roa-story-journal-page .roa-story-journal-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  body.roa-story-journal-page .storybook-action-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }
}

@media (max-width: 620px) {
  body.roa-story-journal-page .roa-story-journal-header {
    grid-template-columns: 43px minmax(0, 1fr);
    min-height: 85px;
  }

  body.roa-story-journal-page .roa-story-journal-header::before {
    width: 41px;
    height: 41px;
  }

  body.roa-story-journal-page .roa-story-journal-header h1 {
    font-size: 1.22rem;
  }

  body.roa-story-journal-page .roa-story-journal-grid,
  body.roa-story-journal-page .roa-story-journal-archive .storybook-card-grid,
  body.roa-story-journal-page .storybook-action-row {
    grid-template-columns: minmax(0, 1fr);
  }

  body.roa-story-journal-page .button,
  body.roa-story-journal-page button {
    width: 100%;
  }

  body.roa-story-journal-page .storybook-unavailable {
    grid-template-columns: minmax(0, 1fr);
  }

  body.roa-story-journal-page .storybook-unavailable > span {
    display: none;
  }
}