/* =============================================================================
   The Suicide Shop — the second Codex book, built on The Blind Owl's sheet.

   Everything structural comes from fun-blindowl.css; this sheet only re-dyes
   it. The Tuvaches' shop is a grey place in a grey city, so the page is cold
   slate and wet concrete, with one warm colour — Alan's, the marigold of the
   light the reader carries — where the narrator's room had gold. Titles are
   set like a painted shop sign, in the site's own Vazirmatn at its heaviest;
   long reading text stays in Naskh.

   Prefix `ss-`, on top of the shared `bo-` classes.
   ========================================================================== */

.ss-page {
  --bo-lacquer: #121417;
  --bo-lacquer-2: #191c21;
  --bo-wall: #15181c;
  --bo-wall-lit: #262b31;
  --bo-gold: #e8a93c;
  --bo-gold-pale: #f6d58e;
  --bo-bone: #ecebe6;
  --bo-ash: #aab0b6;
  --bo-dim: #7f868e;
  --bo-indigo: #7fb3c8;
  --bo-blood: #e0675a;
  --bo-glow: #f2b45a;
  --bo-ink: #0b0c0e;
  --bo-ink-2: #0d0f12;
  --bo-panel: #1e2227;
  --bo-deep: #0e1013;
  --bo-deep-2: #121519;
  --bo-on-gold: #17130b;
  --bo-gold-dark: #9a6a1e;
  --bo-indigo-deep: #3f6d80;
  --bo-blood-deep: #9a3a30;
  --ss-sign: #1f2a27;
  --ss-sign-2: #151d1b;

  --bo-display: var(--font-sans);
  --bo-names: var(--font-sans);

  background:
    radial-gradient(70rem 40rem at 82% 0%, color-mix(in srgb, var(--bo-indigo) 7%, transparent), transparent 60%),
    radial-gradient(50rem 30rem at 10% 30%, color-mix(in srgb, var(--bo-glow) 5%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bo-wall) 0%, var(--bo-deep-2) 60%, var(--bo-deep) 100%);
}

/* --- The title, painted like the sign over the shelves ----------------------- */
.ss-page .bo-title {
  display: inline-block;
  padding: 0.12em 0.5em 0.2em;
  border: 2px solid var(--bo-gold);
  border-radius: 0.18em;
  background: linear-gradient(180deg, var(--ss-sign), var(--ss-sign-2));
  box-shadow:
    inset 0 0 0 0.12em var(--ss-sign-2),
    inset 0 0 0 calc(0.12em + 1px) color-mix(in srgb, var(--bo-gold) 45%, transparent),
    0 18px 40px -18px rgb(0 0 0 / 85%);
  color: var(--bo-bone);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 0 rgb(0 0 0 / 45%);
}

.ss-page .bo-game__start .bo-title {
  font-size: min(clamp(2.6rem, 1.4rem + 4.8vw, 6rem), 11vh);
  line-height: 1.3;
}

.ss-page .bo-byline {
  margin-block-start: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 500;
}

.ss-page .bo-game__start .bo-byline {
  margin-block-start: min(var(--space-3), 1.4vh);
}

/* The slogan, printed on a paper bag rather than inscribed. */
.ss-page .bo-quote {
  border-inline-start-style: dashed;
}

.ss-page .bo-quote blockquote p {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.005em;
}

.ss-page .bo-game__start .bo-quote blockquote p {
  font-size: min(calc(var(--bo-read-size) * 1.05), 2.5vh);
  line-height: 1.7;
}

/* Figure names on the map and in the cards: the sign's face, not calligraphy. */
.ss-page .bo-node__name,
.ss-page .bo-card__name,
.ss-page .bo-detail__name {
  font-weight: 800;
}

/* --- The still shop front, before the room is lit or where WebGL is missing -- */
.ss-still {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 3%;
  inline-size: min(56vw, 62rem);
  block-size: auto;
  max-block-size: 82%;
  object-fit: contain;
  object-position: bottom;
  opacity: 0.85;
  filter: saturate(0.55) drop-shadow(0 30px 60px rgb(0 0 0 / 60%));
  animation: ss-rise 1.6s var(--ease-out) 0.2s both;
}

@keyframes ss-rise {
  from { opacity: 0; transform: translateY(1.5rem); }
  to { opacity: 0.85; transform: none; }
}

/* --- The ending card's art: the shop door, its card turned ------------------- */
.ss-card__door {
  position: relative;
  display: block;
  inline-size: 3.4rem;
  block-size: 4.8rem;
  border: 3px solid var(--bo-gold);
  border-radius: 0.3rem 0.3rem 0 0;
  background:
    linear-gradient(180deg, #6f787e 0 42%, transparent 42%),
    linear-gradient(180deg, #4a3527, #2c2018);
  box-shadow: 0 0 22px color-mix(in srgb, var(--bo-glow) 25%, transparent);
}

.ss-card__door::after {
  position: absolute;
  inset-block-start: 0.9rem;
  inset-inline: 0.7rem;
  block-size: 0.6rem;
  border-radius: 1px;
  background: var(--bo-bone);
  content: '';
}

@media (prefers-reduced-motion: reduce) {
  .ss-still {
    animation: none;
  }
}

/* A small phone: the start screen still fits one screen. */
@media (max-width: 400px) and (max-height: 780px) {
  .ss-page .bo-game__start .bo-lede,
  .ss-page .bo-game__start .bo-quote blockquote p {
    line-height: 1.6;
  }

  .ss-page .bo-game__start .bo-quote {
    margin-block-start: 1.4vh;
  }

  .ss-page .bo-game__note,
  .ss-page .bo-game__start .bo-care-note {
    margin-block-start: 1vh;
  }
}