@import url("./ui/tokens.css");
@import url("./ui/base.css");
@import url("./ui/components.css");
@import url("./ui/season-preview.css");

/* Screen composition and responsive exceptions only. Shared UI lives in ui/. */
.site-shell {
  position: relative;
  width: min(100%, 560px);
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 8%, rgb(255 255 255 / 55%), transparent 24%),
    repeating-linear-gradient(93deg, rgb(80 65 40 / 1.5%) 0 1px, transparent 1px 5px),
    var(--paper);
  box-shadow: 0 0 48px rgb(42 35 28 / 12%);
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
  hyphens: none;
}

.screen {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 85% 10%, rgb(255 255 255 / 48%), transparent 30%),
    linear-gradient(rgb(255 255 255 / 9%), rgb(255 255 255 / 9%)),
    var(--paper);
}

.screen--cover {
  display: grid;
  grid-template-rows: auto minmax(440px, 1fr) auto;
  height: var(--app-height, 100dvh);
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.screen[hidden] {
  display: none;
}

.masthead,
.compact-header,
.chat-header {
  position: relative;
  z-index: 20;
}

.masthead {
  padding: calc(20px + env(safe-area-inset-top)) 22px 0;
}

.masthead__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.masthead__brand {
  font-family: var(--display);
  font-size: clamp(34px, 9vw, 50px);
  line-height: .84;
  letter-spacing: -.065em;
  white-space: nowrap;
}

.masthead__issue {
  padding-bottom: 2px;
  font-size: 7px;
  font-weight: 650;
  letter-spacing: .025em;
  white-space: nowrap;
}

.masthead__rule {
  display: block;
  height: 6px;
  margin-top: 15px;
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.cover {
  position: relative;
  min-height: 440px;
  height: auto;
  margin: 0 22px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.cover::before {
  content: "";
  position: absolute;
  inset: 32px auto 22px 0;
  width: 1px;
  background: var(--line);
}

.cover__eyebrow {
  position: absolute;
  top: 32px;
  right: 2px;
  z-index: 3;
  color: var(--red);
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .1em;
  writing-mode: vertical-rl;
}

.cover__eyebrow-compact {
  display: none;
}

.cover__headline {
  position: absolute;
  top: 42px;
  left: 20px;
  z-index: 4;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(47px, 13.8vw, 74px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.1em;
}

.cover__headline span {
  color: var(--red);
}

.cover__side-note {
  position: absolute;
  top: 184px;
  right: -12px;
  z-index: 4;
  color: var(--red);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .12em;
  transform: rotate(90deg);
}

.cover__art {
  position: absolute;
  z-index: 2;
  right: -34px;
  bottom: -2px;
  width: 104%;
  height: 72%;
  margin: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  text-align: initial;
}

.cover__art img {
  position: absolute;
  right: -3%;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
  filter: saturate(.84) contrast(.98);
}

.paper-scrap {
  position: absolute;
  display: block;
  opacity: .78;
  box-shadow: 0 7px 16px rgb(60 45 25 / 9%);
}

.paper-scrap--blue {
  top: -18px;
  right: 58px;
  width: 105px;
  height: 142px;
  transform: rotate(2deg);
  background: #e6dfd2;
  border: 1px solid #d5ccbe;
}

.paper-scrap--blue::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 20px;
  width: 38px;
  height: 64px;
  background: var(--blue);
}

.paper-scrap--note {
  top: 55px;
  right: -4px;
  width: 70px;
  height: 92px;
  transform: rotate(5deg);
  background: #d7ddcd;
}

.paper-scrap--dot {
  top: 95px;
  right: 88px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #d85c3e;
  box-shadow: none;
}

.profile-card {
  position: absolute;
  z-index: 8;
  bottom: 0;
  left: 0;
  width: min(52%, 246px);
  min-height: 230px;
  padding: 20px 18px 22px 22px;
  background: rgb(248 245 238 / 96%);
  border-top: 2px solid var(--ink);
  border-right: 1px solid var(--line);
}

.profile-card__name {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 800;
}

.profile-card__job {
  margin: 0;
  font-size: 12px;
  letter-spacing: -.02em;
}

.profile-card blockquote {
  position: relative;
  margin: 35px 0 0;
  font-family: var(--serif);
  font-size: clamp(13px, 3.55vw, 17px);
  font-weight: 650;
  line-height: 1.75;
  letter-spacing: -.055em;
}

.profile-card blockquote::before {
  content: "“";
  position: absolute;
  top: -27px;
  left: -2px;
  color: var(--red);
  font-family: Georgia, serif;
  font-size: 36px;
  line-height: 1;
}

.cover-actions {
  padding: 14px 22px calc(18px + env(safe-area-inset-bottom));
}

.challenge-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 56px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
}

.challenge-rule {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 13px 14px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -.02em;
}

.challenge-rule strong {
  color: var(--blue);
  font-weight: 700;
}

.deadline {
  min-width: 78px;
  margin: 0;
  padding: 8px 11px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  border-left: 1px solid var(--line);
  line-height: 1.2;
  white-space: nowrap;
}

.deadline small {
  color: var(--blue);
  font-family: var(--display);
  font-size: 9px;
  letter-spacing: .08em;
}

.deadline strong {
  margin-top: 3px;
  font-family: var(--sans);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  letter-spacing: -.02em;
}

.cover-secondary-actions {
  display: flex;
  min-height: 29px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--muted);
}

.cover-secondary-actions .button--text {
  width: auto;
  margin: 0;
  padding: 6px 0 4px;
  color: var(--ink);
  font-size: 12px;
}

.cover-secondary-actions button[hidden] + span {
  display: none;
}

.compact-header {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 7px;
  min-height: 77px;
  padding: calc(10px + env(safe-area-inset-top)) 18px 8px;
  border-bottom: 4px double var(--ink);
}

.compact-header__brand {
  justify-self: center;
  font-family: var(--display);
  font-size: 29px;
  line-height: 1;
  letter-spacing: -.05em;
}

.compact-header__issue {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}

.screen--story,
.screen--chat,
.screen--result,
.screen--archive {
  display: flex;
  min-height: 100dvh;
  flex-direction: column;
}

.screen--chat {
  width: 100%;
  height: var(--app-height, 100dvh);
  min-height: var(--app-height, 100dvh);
  max-height: var(--app-height, 100dvh);
  overflow: hidden;
}

.screen--story {
  height: var(--app-height, 100dvh);
  min-height: 0;
  overflow: hidden;
}

body.is-story-screen { overflow: hidden; }
.is-story-screen .site-shell { min-height: 0; }

.screen--story .compact-header {
  flex: 0 0 auto;
}

.screen--story .compact-header__brand {
  font-size: clamp(22px, 6.8vw, 34px);
  white-space: nowrap;
}

.story-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}

.story-progress span {
  flex: 1;
  height: 3px;
  background: var(--line);
}

.story-progress span.is-complete,
.story-progress span.is-current {
  background: var(--red);
}

.story {
  /* Only the story scrolls; navigation has its own non-shrinking row. */
  display: block;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 24px 20px;
}

.eyebrow {
  margin: 0;
  color: var(--blue);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .14em;
}

.story__image-wrap {
  height: clamp(144px, 26dvh, 260px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.story__image-wrap img {
  width: 100%;
  height: 120%;
  object-fit: contain;
  object-position: center top;
  filter: saturate(.84);
}

/* Keep the face and the story's hand/tea gesture together in each illustration. */
.story__image-wrap.story__image-wrap--scene {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin-inline: auto;
  border: 1px solid var(--line);
}

.story__image-wrap--scene img {
  display: block;
  height: 100%;
  object-fit: contain;
  filter: none;
}

.story__copy {
  padding-top: 16px;
}

.story .eyebrow {
  margin: 0 0 10px;
}

.story__heading {
  margin: 0;
  font: 400 clamp(25px, 7vw, 34px)/1.4 var(--serif);
  letter-spacing: -.04em;
}

.story__profile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 8px 0 14px;
  font: 14px/1.5 var(--sans);
}

#story-job {
  color: var(--muted);
  font-size: 12px;
}

.story__title {
  margin: 0 0 10px;
  font: 400 21px/1.4 var(--serif);
}

.story__body {
  margin: 0;
  font: 15px/1.85 var(--sans);
}

.story-actions {
  flex: 0 0 auto;
  padding: 12px 24px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.story-actions__buttons { display: flex; align-items: center; gap: 16px; }
.story-actions__buttons > .button--primary { flex: 1; min-width: 0; min-height: 48px; }
.story__copy > .story-opening-hint { margin: 18px 0 0; }

.story-actions__goal {
  margin: 0 0 8px;
  font: 12px/1.6 var(--sans);
}

.story-actions__back {
  display: block;
  width: fit-content;
  min-height: 44px;
  margin: 0;
  flex: 0 0 auto;
  font-size: 13px;
}

.result-actions {
  padding: 6px 22px 0;
}

.screen--result .compact-header {
  grid-template-columns: 30px minmax(0, 1fr) auto;
}

.screen--result .compact-header__brand {
  font-size: clamp(22px, 6.4vw, 29px);
  white-space: nowrap;
}

.screen--result .compact-header__issue { font-size: 9px; }

.chat-header {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  min-height: 78px;
  padding: calc(7px + env(safe-area-inset-top)) 16px 7px;
  border-bottom: 1px solid var(--line);
  background: rgb(244 240 232 / 94%);
  backdrop-filter: blur(8px);
  flex: 0 0 auto;
}

.chat-header__brand {
  display: block;
  margin-bottom: 5px;
  font-family: var(--display);
  font-size: 23px;
  line-height: 1;
  letter-spacing: -.05em;
}

.chat-header h1 {
  margin: 0;
  font-size: 11px;
  font-weight: 550;
  letter-spacing: -.02em;
}

.turn-counter {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-family: var(--display);
}

.turn-counter strong {
  color: var(--red);
  font-size: 28px;
  font-weight: 600;
}

.turn-counter span {
  font-size: 16px;
}

.turn-track {
  position: relative;
  z-index: 5;
  height: 3px;
  background: #d6d0c7;
  flex: 0 0 auto;
}

.turn-track span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--red);
  transition: width 350ms ease;
}

.chat-log {
  min-height: 0;
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 24px 19px 34px;
  scroll-padding-bottom: 24px;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.chat-date {
  width: max-content;
  margin: 0 auto 28px;
  padding: 5px 11px;
  color: var(--muted);
  border: 1px solid var(--line);
  font-size: 10px;
  letter-spacing: .06em;
}

.message {
  margin: 0 0 28px;
}

.message__label {
  margin: 0 0 8px;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.message__character-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
}

.message__content {
  min-width: 0;
}

.message__avatar {
  position: relative;
  display: block;
  width: 48px;
  height: 62px;
  padding: 0;
  appearance: none;
  overflow: hidden;
  background: #e9e1d4;
  border: 1px solid #a69e92;
  box-shadow: 2px 3px 0 rgb(23 23 20 / 8%);
  transform: rotate(-1.4deg);
}

.message__avatar:not(:disabled) {
  cursor: zoom-in;
}

.message__avatar::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--red);
}

.message__avatar::after {
  content: attr(data-issue-number);
  position: absolute;
  z-index: 2;
  right: 3px;
  bottom: 2px;
  padding: 1px 2px 0;
  color: var(--ink);
  background: rgb(244 240 232 / 86%);
  font-family: var(--serif);
  font-size: 7px;
  line-height: 1;
}

.message__avatar img {
  position: absolute;
  top: -3px;
  left: 50%;
  width: 178%;
  max-width: none;
  height: auto;
  transform: translateX(-50%);
}

.message__narration {
  margin: 0 auto 13px;
  padding: 0 16px;
  color: #767066;
  font-family: var(--sans);
  font-size: 13px;
  font-style: normal;
  line-height: 1.7;
  text-align: center;
  letter-spacing: -.01em;
}

.message__bubble {
  width: fit-content;
  max-width: 86%;
  margin: 5px 0 0;
  padding: 12px 15px;
  background: var(--white);
  border: 1px solid #cfc7bb;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -.015em;
  box-shadow: 2px 3px 0 rgb(23 23 20 / 5%);
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

.message--assistant .message__bubble {
  max-width: 100%;
  border-left: 3px solid var(--ink);
}

.message--user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.message--user .message__label {
  color: var(--blue);
}

.message--user .message__bubble {
  color: var(--white);
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: none;
}

.message--action {
  align-items: stretch;
}

.message--action .message__narration {
  margin: 0;
  padding-block: 8px;
}

.message--typing {
  margin-bottom: 8px;
}

.message__bubble--typing {
  display: inline-flex;
  min-width: 162px;
  align-items: center;
  gap: 10px;
  color: #58534c;
  font-size: 14px;
}

.typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.typing-dots i {
  width: 4px;
  height: 4px;
  background: var(--red);
  border-radius: 50%;
  animation: typing-dot 1.2s ease-in-out infinite;
}

.typing-dots i:nth-child(2) {
  animation-delay: 160ms;
}

.typing-dots i:nth-child(3) {
  animation-delay: 320ms;
}

.hint-card {
  position: relative;
  z-index: 8;
  margin: 0 15px 10px;
  background: #ebe4d8;
  border: 1px solid #c8bfb2;
  flex: 0 0 auto;
}

.hint-card button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 10px 13px;
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}

.hint-card small {
  margin-right: 7px;
  color: var(--red);
  font-family: var(--sans);
  font-size: 8px;
  letter-spacing: .08em;
}

.hint-card p {
  margin: 0;
  padding: 0 13px 12px;
  color: #4b4842;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.65;
}

.composer {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr 44px;
  gap: 8px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: rgb(244 240 232 / 97%);
  border-top: 1px solid var(--ink);
  box-shadow: 0 -8px 22px rgb(44 37 29 / 6%);
  flex: 0 0 auto;
}

.composer textarea {
  max-height: 116px;
  resize: none;
  padding: 12px 55px 11px 13px;
  overflow-y: auto;
}

.composer__count {
  position: absolute;
  right: 73px;
  bottom: calc(23px + env(safe-area-inset-bottom));
  color: #969087;
  font-size: 9px;
  pointer-events: none;
}

.composer__send {
  align-self: end;
  width: 44px;
  height: 46px;
  padding: 0;
  color: var(--white);
  background: var(--red);
  border: 0;
  font-size: 24px;
}

.composer__send:disabled {
  background: #aaa399;
}

.composer__status {
  grid-column: 1 / -1;
  min-height: 0;
  margin: -2px 2px 0;
  color: var(--muted);
  font-size: 10px;
}

.composer__status:empty {
  display: none;
}

.composer__status.is-error {
  color: var(--red-dark);
}

.chat-complete {
  flex: 0 0 auto;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--ink);
  background: var(--paper);
}

.chat-complete p {
  margin: 0 0 7px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12px;
  text-align: center;
}

.chat-complete .button--primary {
  min-height: 44px;
  margin: 0;
  padding-block: 9px;
  font-size: 16px;
}

.result {
  position: relative;
  min-height: 0;
  flex: 0 0 auto;
  padding: 30px 22px 12px;
  overflow: hidden;
}

.result__heading {
  display: grid;
  grid-template-columns: 102px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

.result__outcome {
  margin: 0;
  color: var(--blue);
  font: 600 13px/1.5 var(--sans);
}

.result.is-success .result__outcome { color: var(--red-dark); }

.result h1 {
  position: relative;
  z-index: 4;
  margin: 14px 0 0;
  font-family: var(--serif);
  font-size: clamp(24px, 6.5vw, 34px);
  line-height: 1.18;
  letter-spacing: -.095em;
  white-space: pre-line;
}

/* A reading target for screen readers, not a keyboard-operable control. */
.result h1:focus { outline: none; }

.result__stamp {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 132px;
  margin-top: 0;
  z-index: 7;
  padding: 0;
  color: var(--red-dark);
  border: 0;
}

.result__stamp strong { font: 400 126px/.85 var(--display); }
.result__stamp span { margin-top: 12px; font: 400 18px/1.3 var(--serif); }
.result__score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 14px 0 0; font-family: var(--sans); }
.result__score strong { font-size: 40px; font-weight: 650; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.result__score span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.result__score-rule { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font: 12px/1.5 var(--sans); }

.result__scene {
  position: relative;
  z-index: 3;
  margin: 12px 0 0;
  color: var(--muted);
  font: 14px/1.5 var(--sans);
}

.result__art {
  position: relative;
  height: min(47dvh, 440px);
  margin: -5px -44px -18px;
  overflow: hidden;
}

.result__art::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 35%;
  background: linear-gradient(transparent, var(--paper));
}

.result__art img {
  width: 100%;
  height: 115%;
  object-fit: contain;
  object-position: center 25%;
  filter: saturate(.8);
}
.result__art--scene { height: auto; aspect-ratio: 3 / 2; margin: 20px 0 0; border: 1px solid var(--line); }
.result__art--scene::after { display: none; }
.result__art--scene img { display: block; height: 100%; object-fit: cover; object-position: center; filter: none; }

.story-opening-hint { margin: 0 0 12px; font: 13px/1.6 var(--sans); text-align: left; }
.story-opening-hint small, .chat-opening-hint small { display: block; margin-bottom: 5px; font-size: 11px; color: var(--blue); }
.chat-opening-hint { margin: 0 0 22px; padding: 12px 14px; border: 1px solid var(--line); font: 13px/1.6 var(--sans); background: rgb(255 253 248 / 70%); }
.message__feedback { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 7px; margin: 10px 0 5px; color: var(--blue); font: 12px/1.5 var(--sans); }
.message__feedback.is-strong { color: var(--red-dark); }
.message__feedback.is-quiet { color: var(--muted); }
.reaction-tag { display: inline-block; flex-shrink: 0; padding: 2px 6px; border: 1px solid currentColor; border-radius: 3px; font: 500 10px/1.5 var(--sans); }
.reaction-points { white-space: nowrap; font: 650 16px/1 var(--sans); font-variant-numeric: tabular-nums; }
.story-arrival .reaction-points { animation: points-arrival 450ms ease-out both; }
@keyframes points-arrival { from { opacity: 0; transform: translateY(5px) scale(.92); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .story-arrival .reaction-points { animation: none; } }
.result-turns { margin: 24px 22px 0; padding-top: 23px; border-top: 3px double var(--ink); }
.result-turns h2 { margin: 0; font: 400 26px/1.4 var(--serif); }
.result-turns__list { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; list-style: none; margin: 16px 0 0; padding: 0; }
.result-turn { min-width: 0; min-height: 82px; padding: 7px 2px; border: 1px solid var(--line); background: #e9e5dd; color: var(--ink); text-align: center; }
.result-turn.is-strong { background: #e7c7bc; }
.result-turn.is-warm { background: #dce1d9; }
.result-turn > span, .result-turn > strong { display: block; }
.result-turn__number { font: 11px/1.4 var(--sans); color: #59544d; }
.result-turn > strong { margin-top: 4px; font: 600 15px/1.2 var(--sans); white-space: nowrap; font-variant-numeric: tabular-nums; }
.result-turn__tag { margin-top: 5px; font: 10px/1.25 var(--sans); min-height: 2.5em; word-break: keep-all; overflow-wrap: anywhere; }
@media (max-width: 350px) {
  .result__heading { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
  .result__stamp strong { font-size: 100px; }
  .result__score strong { font-size: 34px; }
  .result-turns__list { gap: 4px; }
  .result-turn > strong { font-size: 13px; }
}

.result blockquote {
  position: relative;
  z-index: 3;
  margin: 0;
  padding: 17px 16px 17px 20px;
  background: rgb(255 253 248 / 91%);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 650;
  line-height: 1.65;
  letter-spacing: -.015em;
  white-space: pre-line;
}

.result__note {
  margin: 13px 3px 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.result-actions__primary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.result-actions__primary .button { min-width: 0; min-height: 52px; padding: 12px; gap: 6px; font-size: 15px; }
.result-actions__primary .triangle-icon { width: 12px; height: 12px; margin-left: 0; }
.result-record { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 24px 22px 0; padding: 18px 0 calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.result-record p { margin: 0; font: 400 12px/1.6 var(--sans); }
.result-record small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.result-record .button { flex-shrink: 0; min-height: 44px; font-size: 12px; }

.result.is-almost .result__stamp,
.result.is-fail .result__stamp {
  color: var(--blue);
  border-color: var(--blue);
}

.screen--archive {
  height: var(--app-height, 100dvh);
  min-height: 0;
  overflow: hidden;
}

.screen--archive .compact-header {
  flex-shrink: 0;
  grid-template-columns: 36px 1fr auto;
  min-height: 65px;
  padding: 14px 14px 12px;
  border-bottom: 4px double var(--ink);
}

.screen--archive .compact-header__brand { font-size: clamp(26px, 7.1vw, 40px); }
.screen--archive .compact-header__issue { font-size: 8px; }

.archive {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 22px calc(20px + env(safe-area-inset-bottom));
  overscroll-behavior: contain;
}

.archive > h1 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: clamp(27px, 7.8vw, 40px);
  line-height: 1.25;
  letter-spacing: -.06em;
}

.archive__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0 0 17px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--ink);
  font-size: 12px;
  line-height: 1.6;
}
.archive__available { color: var(--red-dark); font-weight: 500; }
.archive__collection { color: var(--blue); }
.season-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.season-card { min-width: 0; padding: 6px; border: 1px solid #d6cfc5; background: rgb(255 253 248 / 30%); }
.season-card.is-current { border-color: var(--red); }
.season-empty { padding: 56px 24px; min-height: 48vh; }
.season-empty h1 { white-space: pre-line; font-size: clamp(30px, 7vw, 52px); line-height: 1.4; }
.season-empty p { line-height: 1.8; }
.cover__headline { white-space: pre-line; }
.season-debug { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; max-width: 720px; margin: 12px auto 0; padding: 10px 16px max(10px, env(safe-area-inset-bottom)); border-top: 1px dashed var(--muted); background: var(--paper); font-family: var(--sans); }
.season-debug strong { display: block; font-size: 11px; }
.season-debug small { display: block; max-width: 220px; margin-top: 3px; font-size: 10px; color: var(--muted); }
.season-debug__actions { display: flex; flex-wrap: wrap; gap: 6px; flex-shrink: 0; max-width: 100%; }
.season-debug button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); font: 12px var(--sans); }
.season-debug button:disabled { opacity: .4; }
.season-debug .triangle-icon { width: 9px; height: 9px; }
.is-chat-screen .season-debug { display: none; }
.season-card.is-collected { border-color: var(--blue); }
.season-card__masthead { display: flex; align-items: baseline; justify-content: space-between; gap: 3px; padding: 0 0 4px; border-bottom: 3px double var(--muted); }
.season-card__brand { font-family: var(--display); font-size: clamp(12px, 3.5vw, 20px); letter-spacing: -.06em; white-space: nowrap; }
.season-card__masthead small { font-family: var(--sans); font-size: clamp(6px, 1.8vw, 9px); white-space: nowrap; }
.season-card__portrait { display: block; position: relative; width: 100%; aspect-ratio: 1 / 1.07; margin: 3px 0 0; padding: 0; overflow: hidden; border: 0; background: #e9e2d8; }
.season-card__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; filter: saturate(.78); transform: scale(1.26); transform-origin: center 22%; }
.season-card.is-uncollected .season-card__portrait img { filter: grayscale(1); opacity: .68; }
.season-card.is-upcoming .season-card__portrait img { filter: brightness(0); opacity: .2; user-select: none; pointer-events: none; }
.season-card__stamp { position: absolute; right: 8px; bottom: 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 61px; height: 61px; padding: 2px; border-width: 4px; border-radius: 50%; background: rgb(249 245 237 / 94%); transform: rotate(-12deg); pointer-events: none; }
.season-card__stamp strong { font-family: var(--display); font-size: 32px; font-weight: 400; line-height: 1; }
.season-card__stamp > span { margin-top: 2px; font-family: var(--sans); font-size: 9px; font-weight: 600; line-height: 1.25; letter-spacing: 0; }
.season-card__details { padding: 9px 0 0; }
.season-card h2 { margin: 0 0 4px; font-size: 16px; line-height: 1.2; }
.season-card__job { margin: 0; font-size: 10px; line-height: 1.45; color: #47433d; }
.season-card__status { margin: 5px 0 6px; font-size: 10px; color: var(--red-dark); }
.season-card.is-upcoming .season-card__status { color: #716b64; }
.season-card__status.is-collected { color: var(--blue); padding-bottom: 5px; border-bottom: 1px solid var(--blue); }
.season-card__action { min-height: 36px; padding: 7px; gap: 3px; font-size: 11px; }
.season-card__action .triangle-icon { width: 11px; height: 11px; }
.season-card__preview { display: block; padding: 4px 0; font-size: 9px; line-height: 1.4; color: #716b64; }
.archive__closing { margin: 26px 0 0; padding-bottom: 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; text-align: center; }
.archive__home { min-height: 44px; }

@media (max-width: 350px) {
  .archive { padding-inline: 15px; }
  .season-grid { gap: 9px; }
}

@media (max-height: 650px) {
  .story__image-wrap { height: 180px; }
}

.issue-card {
  position: relative;
  display: grid;
  grid-template-columns: 43% 1fr;
  min-height: 270px;
  overflow: hidden;
  background: #e7dfd3;
  border: 1px solid var(--ink);
}

.issue-card img {
  align-self: end;
  width: 155%;
  height: 100%;
  margin-left: -40%;
  object-fit: contain;
  object-position: bottom;
  filter: saturate(.75);
}

.issue-card > div {
  position: relative;
  z-index: 2;
  padding: 30px 17px 20px;
  background: linear-gradient(90deg, transparent, rgb(244 240 232 / 80%) 17%);
}

.issue-card small {
  color: var(--red);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .08em;
}

.issue-card h2 {
  margin: 17px 0 4px;
  font-family: var(--serif);
  font-size: 27px;
  letter-spacing: -.06em;
}

.issue-card p {
  margin: 0 0 32px;
  font-size: 12px;
}

.archive-empty {
  margin-top: 18px;
  padding: 28px 20px;
  color: var(--muted);
  border: 1px dashed #aaa298;
  text-align: center;
}

.archive-empty span {
  font-family: var(--display);
  font-size: 18px;
}

.archive-empty p {
  margin: 8px 0 0;
  font-family: var(--sans);
  font-size: 14px;
}

.profile-image-dialog {
  width: min(calc(100vw - 24px), 480px);
  max-width: none;
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  overflow: visible;
}

.profile-image-dialog::backdrop {
  background: rgb(20 19 17 / 72%);
  backdrop-filter: blur(5px);
}

.profile-image-dialog__sheet {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: calc(100dvh - 24px);
  padding: 15px 15px 13px;
  background:
    repeating-linear-gradient(93deg, rgb(80 65 40 / 1.5%) 0 1px, transparent 1px 5px),
    var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 10px 12px 0 rgb(0 0 0 / 28%);
  overflow: hidden;
}

.profile-image-dialog__issue {
  margin: 0 42px 9px 0;
  font-family: var(--hand);
  font-size: 9px;
  letter-spacing: .05em;
}

.profile-image-dialog__portrait {
  position: relative;
  width: min(100%, calc((100dvh - 130px) * .774));
  aspect-ratio: 48 / 62;
  margin: 0 auto;
  min-height: 0;
  overflow: hidden;
  background: #eee8de;
  border-block: 1px solid var(--line);
}

.profile-image-dialog__portrait img {
  position: absolute;
  top: -4.84%;
  left: 50%;
  width: 178%;
  max-width: none;
  height: auto;
  transform: translateX(-50%);
}

.profile-image-dialog__caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-top: 10px;
}

.profile-image-dialog__caption strong {
  font-family: var(--serif);
  font-size: 20px;
}

.profile-image-dialog__caption span {
  color: var(--muted);
  font-size: 10px;
}

.profile-image-dialog__close {
  position: absolute;
  z-index: 2;
  top: 7px;
  right: 9px;
  width: 34px;
  height: 34px;
  padding: 0 0 3px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  font-family: var(--serif);
  font-size: 27px;
  line-height: 1;
}

/* Collection details reuse the portrait dialog without changing chat zoom. */
.profile-image-dialog.is-collection {
  max-height: min(calc(100dvh - 24px), calc(var(--app-height, 100dvh) - 24px));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  border: 1px solid var(--ink);
}

.is-collection .profile-image-dialog__sheet {
  display: block;
  max-height: none;
  border: 0;
  overflow: visible;
}

.is-collection .profile-image-dialog__close {
  position: sticky;
  top: 0;
  float: right;
  margin: -8px -6px -26px 0;
}

.is-collection .profile-image-dialog__issue { min-height: 22px; }
.is-collection .profile-image-dialog__portrait {
  width: 100%;
  height: clamp(190px, 38dvh, 320px);
  aspect-ratio: auto;
}
.is-collection .profile-image-dialog__portrait img { width: 140%; }
.is-collection.is-reserving .profile-image-dialog__portrait { height: clamp(90px, 19dvh, 160px); }
.is-collection.is-reserving .profile-image-dialog__portrait img { top: -18%; width: 110%; }
.is-collection.is-unreleased .profile-image-dialog__portrait img { filter: brightness(0); opacity: .18; pointer-events: none; user-select: none; }
.is-collection.is-uncollected .profile-image-dialog__portrait img { filter: grayscale(1); }
.is-collection .profile-image-dialog__caption { flex-wrap: wrap; gap: 6px 14px; }
.is-collection .profile-image-dialog__caption span { font-size: 12px; }
.collection-detail {
  display: grid;
  gap: 13px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.65;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.collection-detail[hidden] { display: none; }
.collection-detail > .meta-chip { justify-self: start; }
.collection-detail h2 { margin: 0; font-family: var(--serif); font-size: 23px; font-weight: 400; line-height: 1.4; }
.collection-detail p { margin: 0; }
.collection-detail .button { min-height: 44px; }
.collection-detail .button--primary { width: 100%; min-height: 50px; font-size: 16px; }
.collection-reminder-form { display: grid; gap: 12px; }
.collection-reminder-form > label:first-child { font-weight: 600; }
.collection-reminder-form .field-control { width: 100%; min-height: 50px; font-size: 16px; }
.collection-reminder-form .field-control[aria-invalid="true"] { border-color: var(--red); outline: 2px solid var(--red); outline-offset: 2px; }
.collection-reminder-form .choice-field { align-items: flex-start; font-size: 13px; }
.collection-detail .collection-detail__notice { font-size: 13px; }
.collection-detail__fine { display: block; color: var(--muted); font-size: 12px; line-height: 1.6; }
.collection-detail__error { color: var(--red); font-size: 13px; }
.collection-detail__error:empty { display: none; }
.season-card__link { margin-top: 9px; font-size: 12px; }

@keyframes typing-dot {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.masthead__issue,
.cover__eyebrow,
.cover__side-note,
.deadline small,
.compact-header__issue,
.eyebrow,
.chat-date,
.hint-card small,
.issue-card small,
.archive-empty span {
  font-family: var(--hand);
  font-weight: 400;
  letter-spacing: .035em;
}

@media (max-width: 370px) {
  .masthead {
    padding-right: 16px;
    padding-left: 16px;
  }

  .masthead__brand {
    font-size: 32px;
  }

  .masthead__issue {
    font-size: 6.5px;
  }

  .cover {
    margin: 0 16px;
  }

  .cover__headline {
    left: 16px;
    font-size: 47px;
  }

  .cover__art {
    right: -27px;
  }

  .profile-card {
    width: 52%;
    min-height: 218px;
    padding-left: 15px;
  }

  .cover-actions {
    padding-right: 16px;
    padding-left: 16px;
  }
}

@media (max-height: 860px) {
  .screen--cover {
    grid-template-rows: auto minmax(360px, 1fr) auto;
  }

  .masthead--cover {
    padding-top: calc(12px + env(safe-area-inset-top));
  }

  .masthead--cover .masthead__brand {
    font-size: clamp(32px, 8vw, 44px);
  }

  .masthead--cover .masthead__rule {
    height: 5px;
    margin-top: 8px;
    border-top-width: 2px;
  }

  .screen--cover .cover {
    min-height: 360px;
  }

  .screen--cover .cover::before {
    inset-block: 20px 16px;
  }

  .screen--cover .cover__eyebrow {
    top: 18px;
  }

  .screen--cover .cover__headline {
    top: 18px;
    font-size: clamp(40px, min(12.5vw, 7dvh), 58px);
    line-height: 1.08;
  }

  .screen--cover .cover__side-note {
    top: 145px;
  }

  .screen--cover .cover__art {
    height: 74%;
  }

  .screen--cover .profile-card {
    min-height: clamp(160px, 26dvh, 205px);
    padding: 14px 14px 16px 18px;
  }

  .screen--cover .profile-card__name {
    font-size: 20px;
  }

  .screen--cover .profile-card blockquote {
    margin-top: 26px;
    font-size: clamp(12px, 3.2vw, 15px);
    line-height: 1.45;
  }

  .cover-actions {
    padding-top: 9px;
    padding-bottom: calc(11px + env(safe-area-inset-bottom));
  }

  .challenge-rule {
    padding: 9px 11px;
    font-size: 13px;
  }

  .deadline {
    margin: 7px 4px;
    font-size: 11px;
  }

  .cover-actions .button--primary {
    min-height: 48px;
    padding-block: 9px;
    font-size: 16px;
  }

  .cover-actions .button--text {
    margin-top: 3px;
    padding-block: 5px;
    font-size: 12px;
  }
}

@media (max-height: 700px) {
  .screen--cover {
    grid-template-rows: auto minmax(320px, 1fr) auto;
  }

  .masthead--cover {
    padding-top: calc(7px + env(safe-area-inset-top));
  }

  .masthead--cover .masthead__brand {
    font-size: 31px;
  }

  .masthead--cover .masthead__issue {
    font-size: 7px;
  }

  .masthead--cover .masthead__rule {
    height: 4px;
    margin-top: 6px;
  }

  .screen--cover .cover {
    min-height: 320px;
  }

  .screen--cover .cover__headline {
    top: 13px;
    font-size: clamp(36px, min(11.5vw, 7.2dvh), 48px);
  }

  .screen--cover .cover__eyebrow {
    top: 13px;
    font-size: 10px;
  }

  .screen--cover .cover__side-note,
  .screen--cover .paper-scrap--dot {
    display: none;
  }

  .screen--cover .cover__art {
    height: 72%;
  }

  .screen--cover .profile-card {
    min-height: 145px;
    padding: 10px 11px 11px 15px;
  }

  .screen--cover .profile-card__name {
    font-size: 18px;
  }

  .screen--cover .profile-card__job {
    font-size: 10px;
  }

  .screen--cover .profile-card blockquote {
    margin-top: 21px;
    font-size: 12px;
    line-height: 1.38;
  }

  .screen--cover .profile-card blockquote::before {
    top: -20px;
    font-size: 29px;
  }

  .cover-actions {
    padding-top: 6px;
    padding-bottom: calc(7px + env(safe-area-inset-bottom));
  }

  .challenge-rule {
    padding-block: 7px;
    font-size: 12px;
  }

  .deadline {
    margin-block: 4px;
    font-size: 10px;
  }

  .cover-actions .button--primary {
    min-height: 44px;
    padding-block: 7px;
    font-size: 15px;
  }

  .cover-actions .button--text {
    margin-top: 1px;
    padding-block: 3px;
    font-size: 11px;
  }
}

@media (max-height: 560px) {
  .screen--cover {
    grid-template-rows: auto minmax(280px, 1fr) auto;
  }

  .masthead--cover {
    padding-top: calc(5px + env(safe-area-inset-top));
  }

  .masthead--cover .masthead__brand {
    font-size: 28px;
  }

  .screen--cover .cover {
    min-height: 280px;
  }

  .screen--cover .cover__headline {
    top: 8px;
    font-size: clamp(31px, min(10.5vw, 7.6dvh), 39px);
  }

  .screen--cover .cover__eyebrow {
    top: 9px;
    font-size: 9px;
  }

  .screen--cover .cover__art {
    height: 70%;
  }

  .screen--cover .profile-card {
    min-height: 132px;
    padding: 8px 9px 9px 13px;
  }

  .screen--cover .profile-card__name {
    margin-bottom: 2px;
    font-size: 16px;
  }

  .screen--cover .profile-card__job {
    font-size: 9px;
  }

  .screen--cover .profile-card blockquote {
    margin-top: 18px;
    font-size: 10.5px;
    line-height: 1.28;
  }

  .screen--cover .profile-card blockquote::before {
    top: -17px;
    font-size: 25px;
  }

  .challenge-rule {
    font-size: 12px;
  }

  .cover-actions .button--primary {
    min-height: 42px;
  }
}

@media (max-width: 560px) {
  body.is-chat-screen {
    height: 100%;
    overflow: hidden;
  }

  body.is-chat-screen .site-shell {
    height: var(--app-height, 100dvh);
    min-height: 0;
  }

  .screen--chat {
    position: fixed;
    z-index: 50;
    top: var(--app-top, 0px);
    right: 0;
    left: 0;
    width: min(100%, 560px);
    margin: 0 auto;
  }

  body.is-chat-composing .screen--chat .chat-header {
    min-height: 64px;
    padding: calc(4px + env(safe-area-inset-top)) 14px 4px;
  }

  body.is-chat-composing .screen--chat .chat-header__brand {
    margin-bottom: 2px;
    font-size: 20px;
  }

  body.is-chat-composing .screen--chat .turn-counter strong {
    font-size: 24px;
  }

  body.is-chat-composing .screen--chat .chat-log {
    padding: 8px 15px 12px;
    scroll-padding-bottom: 12px;
  }

  body.is-chat-composing .screen--chat .hint-card {
    display: none;
  }

  body.is-chat-composing .screen--chat .composer {
    grid-template-columns: 1fr 42px;
    gap: 7px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  }

  body.is-chat-composing .screen--chat .composer textarea {
    min-height: 42px;
    max-height: 84px;
    padding-block: 9px;
    font-size: 14px;
  }

  body.is-chat-composing .screen--chat .composer__send {
    width: 42px;
    height: 42px;
  }

  body.is-chat-composing .screen--chat .composer__count {
    right: 67px;
    bottom: calc(18px + env(safe-area-inset-bottom));
  }

  .screen--cover .cover__eyebrow-wide {
    display: none;
  }

  .screen--cover .cover__eyebrow-compact {
    display: inline;
  }

  .screen--cover .cover__side-note {
    display: none;
  }

  .screen--cover .cover__eyebrow {
    right: 4px;
  }

  .screen--cover .cover__art {
    right: -18px;
    width: 100%;
  }

  .screen--cover .cover__art img {
    right: -2%;
    width: 102%;
  }

  .screen--cover .profile-card {
    right: auto;
    width: min(100%, 344px);
    min-height: 64px;
    padding: 5px 10px 5px 14px;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-content: center;
    background: rgb(248 245 238 / 93%);
    border-right: 0;
  }

  .screen--cover .profile-card__name {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    margin-bottom: 1px;
    font-size: 15.5px;
  }

  .screen--cover .profile-card__job {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    font-size: 8.5px;
  }

  .screen--cover .profile-card blockquote {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    margin: 0;
    padding-left: 13px;
    border-left: 1px solid var(--line);
    font-size: clamp(10.5px, 2.8vw, 12.5px);
    line-height: 1.22;
  }

  .screen--cover .profile-card blockquote::before {
    top: -5px;
    left: 5px;
    font-size: 20px;
  }

  .cover-actions {
    padding-top: 5px;
    padding-bottom: calc(5px + env(safe-area-inset-bottom));
  }

  .challenge-meta {
    min-height: 34px;
  }

  .challenge-rule {
    padding: 3px 8px;
    font-size: clamp(12px, 3.2vw, 13px);
  }

  .deadline {
    min-width: 66px;
    margin: 0;
    padding: 2px 6px;
    font-size: inherit;
  }

  .deadline small {
    font-size: 7px;
  }

  .deadline strong {
    margin-top: 0;
    font-size: 11px;
  }

  .cover-actions .button--primary {
    min-height: 48px;
    padding-block: 8px;
    font-size: 16px;
  }

  .cover-secondary-actions {
    min-height: 25px;
    gap: 11px;
  }

  .cover-secondary-actions .button--text {
    margin: 0;
    padding: 4px 0 2px;
    font-size: 11px;
  }
}

@media (min-width: 561px) {
  .site-shell {
    margin-top: 24px;
    margin-bottom: 24px;
    border: 1px solid #c7c0b5;
  }

  .screen--cover {
    height: min(900px, calc(var(--app-height, 100dvh) - 48px));
  }

  .screen--chat,
  .screen--archive {
    min-height: min(900px, calc(100dvh - 48px));
    max-height: min(900px, calc(100dvh - 48px));
  }

  .screen--story {
    height: min(900px, calc(var(--app-height, 100dvh) - 48px));
    min-height: 0;
  }

  .screen--chat {
    height: min(900px, calc(var(--app-height, 100dvh) - 48px));
    min-height: min(900px, calc(var(--app-height, 100dvh) - 48px));
    max-height: min(900px, calc(var(--app-height, 100dvh) - 48px));
  }
}