/* The night a friend was sent: a manga spread on paper, their panel and yours. */
:root {
  --paper: #f2ede3;
  --ink: #0a0a0c;
  --soft-ink: rgba(27, 26, 23, 0.62);
  --vermillion: #c73a2e;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Apple SD Gothic Neo",
    "Noto Sans KR", "Thonburi", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Japanese breaks after 、 and 。, Korean between words, as the app sets them; a phrase too
   long for its line still wraps. */
:lang(ja) body, :lang(ko) body { word-break: keep-all; overflow-wrap: anywhere; }

.page {
  max-width: 520px;
  margin: 0 auto;
  padding: calc(20px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.lead {
  margin: 4px 2px 14px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
}

/* Two tall panels. Japanese reads a spread from the right, so theirs (read first) sits there. */
.spread {
  display: flex;
  gap: 10px;
}

:lang(ja) .spread { flex-direction: row-reverse; }

/* A plain link: no one's act came with it, so only the empty panel, waiting. */
.spread.plain { justify-content: center; }
.spread.plain .yours { flex: 0 1 62%; }

.panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  aspect-ratio: 9 / 16;
  border: 4px solid var(--ink);
  background: var(--paper);
}

.panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.narration {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  margin: 0;
  padding: 6px 8px;
  background: #fff;
  border: 2px solid var(--ink);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

/* A bubble may overhang the frame a little, as it does on a printed page. */
.bubble {
  position: absolute;
  left: -8px;
  right: -8px;
  bottom: 26px;
  margin: 0;
  padding: 9px 6px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 22px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  overflow-wrap: anywhere;
}

/* A Japanese phrase is never split: the longest one fits the narrowest phone. */
:lang(ja) .bubble, :lang(ja) .play { font-size: clamp(10.5px, 3vw, 13px); }
:lang(ja) .play { white-space: nowrap; }

/* Narrower than any phrase can fit: the ordinary breaking, which never starts a line with 。 */
@media (max-width: 359px) {
  :lang(ja) .bubble { word-break: normal; overflow-wrap: normal; }
  :lang(ja) .play { white-space: normal; }
}

/* The tail points down, at whoever did it: below their own panel. */
.bubble::after {
  content: "";
  position: absolute;
  left: 30%;
  bottom: -14px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg) skew(12deg, 12deg);
}

/* Yours is still empty: paper and a screentone, waiting. */
.yours {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 8px;
  background-color: var(--paper);
  background-image: radial-gradient(rgba(10, 10, 12, 0.16) 1.2px, transparent 1.4px);
  background-size: 7px 7px;
}

.kanji {
  font-size: 64px;
  line-height: 1;
  color: rgba(10, 10, 12, 0.3);
}

.play {
  appearance: none;
  max-width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 10px 8px;
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
}

.play:focus-visible { outline: 3px solid var(--vermillion); outline-offset: 3px; }

.provenance {
  margin: 16px 2px 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--soft-ink);
}

.hint {
  margin: 8px 2px 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--soft-ink);
}

.stores {
  margin-top: auto;
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.stores a {
  color: var(--ink);
  font-size: 14px;
  text-underline-offset: 3px;
}

.mark {
  margin-top: 22px;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--soft-ink);
}

.mark span { color: var(--vermillion); letter-spacing: 0; }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: no-preference) {
  .theirs { animation: land 0.7s ease-out both; }
  @keyframes land { from { opacity: 0; transform: translateY(8px); } }
}