.title-screen {
  background: radial-gradient(ellipse at 74% 44%, #46566f, #25384d 42%, #0b1827 76%);
  padding-block: clamp(18px, 3.5dvh, 52px);
}

.title-screen::before {
  background: linear-gradient(92deg, #08131df5, #0b1828be 39%, transparent 80%);
}

.title-deck::before {
  background: repeating-linear-gradient(112deg, transparent 0 9%, #a3c6e013 9% 9.2%, transparent 9.2% 18%);
}

.title-deck::after {
  inset: 63% -12% -19%;
  background: repeating-linear-gradient(90deg, transparent 0 10.8%, #a3c6e036 10.8% 11%),
    linear-gradient(180deg, #52677c, #1b293b 14%, #09141f);
  border-color: #70859e;
  opacity: .32;
}

.title-ark {
  position: absolute;
  z-index: -1;
  top: 47%;
  right: 2.5%;
  width: min(63vw, 1060px);
  height: auto;
  transform: translateY(-50%) rotate(-6deg);
  filter: drop-shadow(0 16px 24px #081321b3) drop-shadow(0 0 21px #8fb5cc47);
}

.title-intro { max-width: min(27vw, 370px); margin-bottom: 22px; text-wrap: pretty; }
.title-mark { margin-top: 22px; }
.title-rule { margin-block: 16px; }

.story-entry {
  display: flex;
  align-items: start;
  gap: clamp(9px, 2vw, 16px);
  padding: clamp(10px, 2.5vw, 16px);
  border: 1px solid #54617a;
  border-left: 3px solid #db9fc5;
  border-radius: 10px;
  background: linear-gradient(145deg, #233143, #172536 75%);
}

.story-copy { min-width: 0; }
.story-copy h3 { margin: .26em 0 .43em; color: var(--bright); font-size: clamp(16px, 3.8vw, 19px); }
.story-copy p { margin: 0 0 .45em; color: #e2eaf0; line-height: 1.68; overflow-wrap: anywhere; }
.story-copy p:last-child { margin-bottom: 0; }

.story-portrait {
  flex: 0 0 clamp(62px, 22vw, 118px);
  aspect-ratio: 248 / 437;
  display: grid;
  align-items: end;
  overflow: hidden;
  border: 1px solid #aa809d;
  border-radius: 8px;
  background: radial-gradient(ellipse at 50% 35%, #74647d, #342f48 80%);
}

.story-portrait img { width: 100%; height: auto; display: block; }
.story-portrait[data-speaker="ALVIS"] { aspect-ratio: 304 / 471; background: #eeedf6; border-color: #79a9b5; }
.story-portrait[data-speaker="ALBUS"] img {
  clip-path: polygon(9% 21%, 16% 13%, 29% 5%, 43% 1%, 54% 0%, 64% 2%, 76% 7%,
    83% 6%, 88% 11%, 96% 15%, 94% 21%, 87% 26%, 90% 33%, 87% 38%, 95% 46%,
    100% 55%, 100% 63%, 96% 67%, 90% 70%, 86% 70%, 86% 76%, 81% 77%, 77% 72%,
    75% 72%, 72% 69%, 70% 79%, 70% 86%, 72% 91%, 73% 98%, 69% 100%, 59% 100%,
    54% 97%, 56% 91%, 53% 85%, 52% 77%, 50% 73%, 48% 78%, 48% 84%, 46% 90%,
    46% 95%, 43% 100%, 37% 100%, 35% 98%, 35% 94%, 37% 88%, 38% 80%, 37% 71%,
    33% 71%, 30% 76%, 26% 76%, 25% 72%, 21% 74%, 18% 72%, 20% 65%, 15% 68%,
    8% 68%, 4% 65%, 1% 61%, 1% 54%, 5% 48%, 10% 44%, 13% 35%, 11% 31%, 8% 27%);
}

@media (max-width: 760px) {
  .title-screen {
    align-content: center;
    gap: clamp(5px, 1.8dvh, 18px);
    padding: clamp(12px, 3.2vw, 27px) clamp(15px, 6vw, 40px);
  }
  .title-ark {
    position: relative;
    top: auto;
    right: auto;
    justify-self: center;
    width: min(100%, 475px);
    transform: none;
  }
  .title-content { width: min(100%, 475px); justify-self: center; }
  .title-mark { display: none; }
  .title-content h1 { margin-top: 12px; }
  .title-albus { margin: 10px 0 11px; }
  .title-rule { margin: 12px 0; }
  .title-intro { max-width: none; margin-bottom: 16px; }
  .title-buttons { width: 100%; gap: 6px; }
  .title-buttons > button, .title-buttons > a.button, .title-buttons > div .button,
  #story-dialog .dialog-head .button { min-height: 44px; }
  .title-save-status:empty { display: none; }
  .title-system { margin-top: 12px; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .title-screen {
    grid-template-columns: minmax(220px, .9fr) minmax(0, 1fr);
    gap: 14px;
    padding: 12px clamp(15px, 4vw, 47px);
  }
  .title-ark { position: relative; grid-area: 1 / 2; top: auto; right: auto; width: 100%; transform: none; }
  .title-content { grid-area: 1 / 1; min-width: 0; }
  .title-content h1 { font-size: clamp(38px, 6.2vw, 66px); }
  .title-mark, .title-coordinate, .title-system, .title-rule, .title-intro { display: none; }
  .title-albus { margin: 7px 0; }
  .title-buttons > button, .title-buttons > a.button, .title-buttons > div .button,
  #story-dialog .dialog-head .button { min-height: 44px; }
}

@media (max-height: 570px) and (orientation: portrait) {
  .title-system { display: none; }
}