/* myuki.app, second edition. The app's night theme on the web:
   black ground, white type, two colours with two jobs (sakura is you and
   everything you can press, aqua is things happening), hard edges, no
   gradients, no glow, no shadows. Round only for people: avatars and the
   chat bubbles. Archivo for the interface, IBM Plex Mono for labels,
   Literata for the fiction. */

/* ── faces ─────────────────────────────────────────────────────────────── */
@font-face { font-family: 'Archivo'; src: url('../fonts/archivo-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('../fonts/archivo-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('../fonts/archivo-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('../fonts/archivo-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('../fonts/archivo-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('../fonts/archivo-900.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/plexmono-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Literata'; src: url('../fonts/literata-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Literata'; src: url('../fonts/literata-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

/* ── tokens (the app's night palette, src/theme) ───────────────────────── */
:root {
  --ink: #0b090a;
  --ink-deep: #060506;
  --surface: #151013;
  --surface-2: #1b1518;
  --surface-3: #221a1e;
  --border: #2b2226;
  --border-2: #3a2e34;
  --text: #faf7f8;
  --text-2: #c6bcc1;
  --muted: #8a7f85;
  --faint: #5e5257;
  --pink: #f6a9c9;
  --pink-hover: #f9bdd6;
  --pink-press: #e493b5;
  --on-pink: #2b0a1f;
  --aqua: #5fd9e6;
  --danger: #ff6b6b;

  /* Latin in Archivo; CJK falls through to each reader's system face */
  --cjk: 'PingFang SC', 'Hiragino Sans', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif;
  --ui: 'Archivo', var(--cjk), system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, var(--cjk), monospace;
  --fic: 'Literata', Georgia, 'Times New Roman', var(--cjk), serif;

  --hs: 1;            /* headline scale: CJK sets it lower, the glyphs are wider */
  --track: -0.04em;   /* headline tracking: tight for Latin, none for CJK */
  /* Headline sizes, as min / viewport / max. A Latin word cannot break, and
     "multiplayer" or "characters" has to fit its column whole, so Latin runs
     smaller than CJK, whose lines break between any two characters and read
     best big. Measured per language against each column (2026-09-28). */
  --h1-min: 58px; --h1-vw: 7.4vw; --h1-max: 108px;
  --h2-min: 40px; --h2-vw: 5.8vw; --h2-max: 84px;
  --h2s-vw: 4.2vw; --h2s-max: 60px;   /* an h2 that shares its row with a mock */
  --h3-vw: 4.4vw; --h3-max: 64px;
  --gutter: 20px;
  --maxw: 1240px;
  --top-h: 64px;
  color-scheme: dark;
}
:lang(ja) { --cjk: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', Meiryo, 'Noto Sans JP', sans-serif; --hs: 0.8; --track: 0em; }
:lang(zh) { --cjk: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif; --hs: 0.8; --track: 0em; }
:lang(zh-Hant) { --cjk: 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', sans-serif; }
:lang(ja), :lang(zh) {
  --h1-vw: 10.4vw; --h1-max: 156px;
  --h2-min: 44px; --h2-vw: 7vw; --h2-max: 104px;
  --h2s-vw: 7vw; --h2s-max: 100px;
  --h3-vw: 5.4vw; --h3-max: 76px;
}
/* Korean breaks at spaces (keep-all), so beside a mock it takes the Latin size */
:lang(ko) {
  --cjk: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif; --hs: 0.84; --track: -0.01em;
  --h1-vw: 8.2vw; --h1-max: 116px;
  --h2-min: 44px; --h2-vw: 7vw; --h2-max: 104px;
  --h3-vw: 5.4vw; --h3-max: 76px;
}
:lang(es) { --h1-min: 50px; --h1-vw: 6.6vw; --h1-max: 96px; } /* multijugador */
:lang(ja) { --h1-vw: 7.8vw; --h1-max: 110px; } /* みんなで遊べる stays one line */
@media (min-width: 720px) { :root { --gutter: 32px; } }
@media (min-width: 1100px) { :root { --gutter: 48px; } }
/* the narrowest phones (320 wide): a Latin h2's unbreakable phrase ("main
   character") is wider than the column at 40px. CJK and Korean set their own. */
@media (max-width: 359px) { :root { --h2-min: 34px; } }

/* ── base ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--top-h); }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
html.i18n-wait body { visibility: hidden; }
:lang(ko) body { word-break: keep-all; }
:lang(ja) body, :lang(zh) body { line-break: strict; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
p { text-wrap: pretty; }
::selection { background: var(--pink); color: var(--on-pink); }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 60;
  background: var(--pink); color: var(--on-pink); padding: 12px 16px;
  font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ── type ──────────────────────────────────────────────────────────────── */
.kicker {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
  text-wrap: balance;
}
:lang(ja) .kicker, :lang(ko) .kicker, :lang(zh) .kicker { letter-spacing: 0.1em; }
.h1, .h2, .h3 {
  font-weight: 900;
  letter-spacing: var(--track);
  line-height: 1.05;
  text-wrap: balance;
}
.h1 { font-size: calc(clamp(var(--h1-min), var(--h1-vw), var(--h1-max)) * var(--hs)); }
.h2 { font-size: calc(clamp(var(--h2-min), var(--h2-vw), var(--h2-max)) * var(--hs)); }
.split .h2 { font-size: calc(clamp(var(--h2-min), var(--h2s-vw), var(--h2s-max)) * var(--hs)); }
.h3 { font-size: calc(clamp(36px, var(--h3-vw), var(--h3-max)) * var(--hs)); }
:lang(ja) .h1, :lang(ja) .h2, :lang(ja) .h3,
:lang(zh) .h1, :lang(zh) .h2, :lang(zh) .h3,
:lang(ko) .h1, :lang(ko) .h2, :lang(ko) .h3 { line-height: 1.18; }
/* Japanese breaks at phrases where the browser can tell (Chrome); the
   strings also carry their own breaks, for the ones that cannot */
:lang(ja) .h1, :lang(ja) .h2, :lang(ja) .h3 { word-break: auto-phrase; }
.sub {
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.55;
  color: var(--text-2);
  max-width: 34em;
  margin-top: 24px;
}
.pk { color: var(--pink); }
.aq { color: var(--aqua); }
.blk {
  background: var(--pink);
  color: var(--on-pink);
  padding: 0 0.1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ── icons (Ionicons, the app's own set; see icons.css) ───────────────── */
.ico { font-family: 'Ionicons'; font-style: normal; font-weight: normal; line-height: 1; display: inline-block; flex: none; speak: never; -webkit-font-smoothing: antialiased; }

/* ── buttons: square; the primary cuts its top-right corner ───────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; padding: 0 26px;
  font-weight: 700; font-size: 16px; line-height: 1; letter-spacing: -0.005em;
  text-decoration: none; border: 0; border-radius: 0;
  white-space: nowrap; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn .ico { font-size: 18px; }
.btn-primary {
  background: var(--pink); color: var(--on-pink);
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
}
.btn-primary:hover { background: var(--pink-hover); }
.btn-primary:active { background: var(--pink-press); }
/* the clip-path cuts an outline away with the corner, so focus draws inside */
.btn-primary:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--on-pink); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border-2); border-radius: 3px; }
.btn-ghost:hover { border-color: var(--text-2); }
.btn-ghost:active { background: var(--surface); }
.btn-sm { height: 40px; padding: 0 16px; font-size: 14px; }
.btn-primary.btn-sm { clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); }
.btn-sq { width: 44px; height: 44px; padding: 0; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; line-height: 1; padding: 6px 8px;
  border: 1px solid var(--border-2); border-radius: 3px; color: var(--text-2);
  white-space: nowrap;
}
.badge {
  font-family: var(--mono); font-size: 10px; line-height: 1; letter-spacing: 0.04em;
  padding: 3px 5px; border: 1px solid var(--border-2); border-radius: 3px; color: var(--text-2);
}

/* ── header ────────────────────────────────────────────────────────────── */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  border-bottom: 1px solid transparent;
  transition: background-color 0.2s, border-color 0.2s;
}
.top.is-scrolled { background: var(--ink); border-bottom-color: var(--border); }
.top .wrap { height: var(--top-h); display: flex; align-items: center; gap: 10px; }
.mark { display: inline-flex; text-decoration: none; }
.mark img { height: 24px; width: auto; }
.top .spacer { flex: 1; }
.top .cta-long { display: none; }
@media (min-width: 640px) { .top .cta-long { display: inline; } .top .cta-short { display: none; } }

.lang { position: relative; display: inline-flex; align-items: center; }
.lang .ico { position: absolute; left: 11px; font-size: 16px; color: var(--muted); pointer-events: none; }
.lang select {
  appearance: none; -webkit-appearance: none;
  height: 40px; padding: 0 30px 0 34px;
  font-size: 14px; color: var(--text-2);
  background: var(--ink); border: 1px solid var(--border-2); border-radius: 3px;
  cursor: pointer; max-width: 150px; text-overflow: ellipsis;
}
.lang::after {
  content: ''; position: absolute; right: 13px; top: 50%;
  width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.lang select:hover { color: var(--text); border-color: var(--muted); }
/* at 320 wide the header's three pieces do not fit beside each other: the
   globe goes, the language name stays */
@media (max-width: 359px) { .lang .ico { display: none; } .lang select { padding-left: 12px; } }
.lang select option { background: var(--surface); color: var(--text); }

/* ── hero ──────────────────────────────────────────────────────────────── */
.hero { position: relative; padding: calc(var(--top-h) + 40px) 0 56px; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: center; }
@media (min-width: 980px) {
  .hero { min-height: 100svh; display: flex; align-items: center; padding-bottom: 72px; }
  .hero .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; }
}
.strikes { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.strike {
  position: relative; width: fit-content;
  font-weight: 900; letter-spacing: var(--track); line-height: 1.12;
  font-size: calc(clamp(26px, 3.4vw, 46px) * var(--hs));
  color: var(--faint);
}
.strike::after {
  content: ''; position: absolute; left: -0.06em; right: -0.06em; top: 52%;
  height: 0.11em; background: var(--pink); transform-origin: left center;
}
html.js .strike::after { transform: scaleX(0); animation: strike 0.42s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
html.js .strike:nth-child(1)::after { animation-delay: 0.3s; }
html.js .strike:nth-child(2)::after { animation-delay: 0.62s; }
@keyframes strike { to { transform: scaleX(1); } }
.hero .sub { color: var(--text); font-weight: 500; margin-top: 22px; }
.hero-note {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; color: var(--muted);
}
.hero-note::before { content: ''; width: 8px; height: 8px; background: var(--pink); }

/* the wall of worlds: three columns drifting past each other */
.wall-box { position: relative; }
.wall {
  position: relative;
  height: min(76svh, 760px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  overflow: hidden;
}
.wall .col { display: flex; flex-direction: column; gap: 12px; will-change: transform; }
.wall .col:nth-child(2) { margin-top: -140px; }
html.js .wall .col { animation: wall-up 64s linear infinite; }
html.js .wall .col:nth-child(2) { animation-name: wall-down; animation-duration: 76s; }
html.js .wall .col:nth-child(3) { animation-duration: 58s; }
.wall.is-paused .col { animation-play-state: paused !important; }
.wall img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; background: var(--surface); }
@keyframes wall-up { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } }
@keyframes wall-down { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes wall-left { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes wall-right { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
.wall-pause {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--ink); border: 1px solid var(--border-2); border-radius: 3px; color: var(--text-2);
}
.wall-pause:hover { color: var(--text); border-color: var(--muted); }
.wall-pause .ico { font-size: 16px; }
@media (max-width: 979px) {
  .wall-box { margin: 0 calc(var(--gutter) * -1); }
  .wall { height: auto; display: flex; flex-direction: column; gap: 10px; }
  .wall .col { flex-direction: row; gap: 10px; width: max-content; }
  .wall .col:nth-child(2) { margin-top: 0; margin-left: -60px; }
  .wall .col:nth-child(3) { display: none; }
  html.js .wall .col { animation-name: wall-left; animation-duration: 70s; }
  html.js .wall .col:nth-child(2) { animation-name: wall-right; animation-duration: 82s; }
  .wall img { width: 128px; }
  .wall-pause { right: var(--gutter); bottom: 8px; }
}

/* the genre tape */
.tape { border-block: 1px solid var(--border); overflow: hidden; white-space: nowrap; }
.tape .track { display: inline-flex; align-items: center; will-change: transform; }
html.js .tape .track { animation: wall-left 46s linear infinite; }
.tape span {
  display: inline-flex; align-items: center; gap: 28px;
  padding: 16px 0 16px 28px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2);
}
.tape span::after { content: ''; width: 7px; height: 7px; background: var(--pink); }

/* ── sections ──────────────────────────────────────────────────────────── */
.sec { padding: clamp(104px, 13vw, 176px) 0 0; }
.sec:last-of-type { padding-bottom: clamp(104px, 13vw, 176px); }
.lead { max-width: 900px; }

/* reveal on scroll (only when JS runs; content is always there without it) */
html.js .rv { opacity: 0; transform: translateY(18px); transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
html.js .rv.in { opacity: 1; transform: none; }

/* ── 01 worlds ─────────────────────────────────────────────────────────── */
.rail-box { position: relative; margin-top: 48px; }
.rail {
  list-style: none; margin: 0;
  display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-left: var(--rail-pad);
  --rail-pad: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  padding: 0 var(--rail-pad) 16px;
  scrollbar-width: thin; scrollbar-color: var(--border-2) transparent;
}
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--border-2); }
.world { flex: 0 0 auto; width: clamp(196px, 58vw, 240px); scroll-snap-align: start; }
.world img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; background: var(--surface); }
.world .lng { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--muted); margin-top: 14px; }
.world h3 {
  font-size: 18px; line-height: 1.25; font-weight: 800; margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.world p {
  font-size: 14px; line-height: 1.45; color: var(--text-2); margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.world .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.rail-nav { display: none; }
@media (min-width: 980px) {
  .rail-nav { display: flex; gap: 8px; position: absolute; right: var(--rail-pad, var(--gutter)); top: -100px; }
  .rail-nav { right: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); }
}
.rail-nav .ico { font-size: 18px; }
.note {
  margin-top: 28px; display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--muted);
}
.note .ico { font-size: 16px; color: var(--muted); }

/* ── 02 server ─────────────────────────────────────────────────────────── */
.server-grid { display: grid; gap: 28px; margin-top: 56px; grid-template-areas: 'tabs' 'phone' 'line'; }
@media (min-width: 980px) {
  .server-grid { grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: 'tabs phone'; gap: 72px; align-items: center; }
}
.channels { grid-area: tabs; display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.channel {
  position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 16px; row-gap: 6px;
  text-align: left; padding: 22px 0 22px 18px; background: none; border: 0; border-bottom: 1px solid var(--border);
  -webkit-tap-highlight-color: transparent;
}
.channel .ico { grid-row: span 2; font-size: 22px; color: var(--muted); margin-top: 2px; }
.channel .nm { font-weight: 800; font-size: 22px; line-height: 1.2; color: var(--text-2); letter-spacing: -0.01em; }
.channel .vb { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-left: 10px; }
.channel .ln { grid-column: 2; font-size: 15px; line-height: 1.45; color: var(--muted); }
.channel:hover .nm { color: var(--text); }
.channel[aria-pressed='true']::before { content: ''; position: absolute; left: 0; top: 22px; bottom: 22px; width: 3px; background: var(--pink); }
.channel[aria-pressed='true'] .ico { color: var(--pink); }
.channel[aria-pressed='true'] .nm { color: var(--text); }
.channel[aria-pressed='true'] .ln { color: var(--text-2); }
.phone {
  grid-area: phone; position: relative; width: min(100%, 330px); margin: 0 auto;
  aspect-ratio: 585 / 1035; border-radius: 5.6% / 3.2%; background: var(--ink-deep);
  box-shadow: 0 0 0 1px var(--border-2); overflow: hidden;
}
.phone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.35s; }
.phone img.on { opacity: 1; }
.channel-line { grid-area: line; text-align: center; color: var(--text-2); font-size: 15px; max-width: 30em; margin: 0 auto; min-height: 3em; }
@media (min-width: 980px) { .channel-line { display: none; } }
@media (max-width: 979px) {
  .channels { flex-direction: row; gap: 8px; border: 0; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
  .channels::-webkit-scrollbar { display: none; }
  .channel { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--border-2); border-radius: 3px; }
  .channel .ico { font-size: 17px; margin: 0; }
  .channel .nm { font-size: 15px; }
  .channel .vb, .channel .ln { display: none; }
  .channel[aria-pressed='true'] { background: var(--pink); border-color: var(--pink); }
  .channel[aria-pressed='true']::before { display: none; }
  .channel[aria-pressed='true'] .ico, .channel[aria-pressed='true'] .nm { color: var(--on-pink); }
}

/* ── 03 story pieces ───────────────────────────────────────────────────── */
.pieces-add { margin-top: clamp(64px, 8vw, 104px); }
.pieces { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 36px; }
@media (min-width: 560px) { .pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .pieces { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.piece { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
/* the still, and the piece's loop over it: the loop shows only while it
   plays (under the pointer on a desk, in view on a phone), and its first
   frame is the still, so it never jumps in */
.piece .shot { position: relative; aspect-ratio: 1.9 / 1; background: var(--ink); border-bottom: 1px solid var(--border); overflow: hidden; }
.piece .shot img, .piece .shot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.piece .shot video { opacity: 0; transition: opacity 0.18s ease; pointer-events: none; }
.piece.is-playing .shot video { opacity: 1; }
.piece .shot video::-webkit-media-controls { display: none !important; }
.piece .shot video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.piece .body { padding: 14px 16px 16px; }
.piece .nm { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 18px; line-height: 1.2; }
.piece .nm .ico { color: var(--pink); font-size: 20px; }

.more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
.more .lbl { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pink); margin-right: 6px; }
.more .chip { font-size: 14px; padding: 8px 12px; }

.moments { margin-top: clamp(64px, 8vw, 104px); }
.moments .row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.moments img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; background: var(--surface); }
@media (max-width: 859px) {
  .moments .row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin: 16px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter) 8px; scrollbar-width: none; }
  .moments .row::-webkit-scrollbar { display: none; }
  .moments img { flex: 0 0 auto; width: 78vw; max-width: 360px; scroll-snap-align: start; }
}
.payoff { margin-top: clamp(80px, 10vw, 136px); }

/* ── split sections (text beside a mock) ───────────────────────────────── */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
@media (min-width: 980px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 72px; }
  /* flipped: the words move right and keep the wide track */
  .split.flip { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); }
  .split.flip > :first-child { order: 2; }
}

/* ── 04 rooms: the chat, drawn the app's way ──────────────────────────── */
.chat { background: var(--ink-deep); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--ink); }
.chat-head .t { font-weight: 800; font-size: 15px; line-height: 1.3; }
.chat-head .s { font-size: 12px; color: var(--muted); margin-top: 2px; }
.chat-head .spacer { flex: 1; }
.live {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--aqua);
}
.live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--aqua); }
.msgs { padding: 18px 16px 20px; display: flex; flex-direction: column; gap: 16px; }
.msg { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; align-items: start; }
.av {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: top center;
  background: var(--surface-3); border: 1px solid var(--border);
  display: grid; place-items: center; font-weight: 800; font-size: 13px; color: var(--text-2);
}
.who { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.2; font-weight: 700; color: var(--text-2); margin-bottom: 5px; }
.bubble {
  position: relative; display: inline-block; max-width: 100%;
  background: var(--surface-2); color: var(--text);
  padding: 10px 14px; border-radius: 4px 16px 16px 16px;
  font-size: 15px; line-height: 1.45; overflow-wrap: anywhere;
}
.bubble .act { display: block; font-style: italic; color: var(--text-2); margin-bottom: 2px; }
:lang(ja) .bubble .act, :lang(ko) .bubble .act, :lang(zh) .bubble .act { font-style: normal; }
.at { color: var(--pink); font-weight: 600; }
.msg.me { grid-template-columns: minmax(0, 1fr); justify-items: end; }
.msg.me .bubble { background: var(--pink); color: var(--on-pink); border-radius: 16px 4px 16px 16px; }
.msg.me .at { color: var(--on-pink); text-decoration: underline; }
.beat {
  display: flex; align-items: center; gap: 7px; margin-top: 7px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--aqua);
}
.beat::before { content: ''; width: 14px; height: 1px; background: var(--aqua); }
.dots { position: absolute; left: 0; top: 0; display: none; gap: 4px; padding: 14px 16px; background: var(--surface-2); border-radius: 4px 16px 16px 16px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--aqua); animation: blink 1s infinite; }
.dots i:nth-child(2) { animation-delay: 0.15s; }
.dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes blink { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }
.say { min-width: 0; }
.bwrap { position: relative; }
/* the script: a row is laid out from the start (so nothing jumps), shown as
   dots while its character types, then as the line */
html.js .chat.play .msg { opacity: 0; }
html.js .chat.play .msg.typing, html.js .chat.play .msg.in { opacity: 1; }
html.js .chat.play .msg.typing .bubble, html.js .chat.play .msg.typing .beat, html.js .chat.play .msg.typing .who .badge { visibility: hidden; }
html.js .chat.play .msg.typing .dots { display: inline-flex; }
html.js .chat.play .msg.in { animation: pop 0.24s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes pop { from { transform: translateY(6px); } to { transform: none; } }

/* ── 05 forum ──────────────────────────────────────────────────────────── */
.posts { display: grid; gap: 14px; }
.post { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 18px 18px 16px; }
.post .meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.post .meta .av { width: 22px; height: 22px; font-size: 10px; }
.post h3 { font-size: 18px; line-height: 1.3; font-weight: 800; margin-top: 12px; }
.post > p { font-size: 15px; line-height: 1.5; color: var(--text-2); margin-top: 8px; }
.post .foot-row { display: flex; gap: 16px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.post .foot-row span { display: inline-flex; align-items: center; gap: 5px; }
.post .foot-row .ico { font-size: 15px; }
.replies { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.reply { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; }
.reply .av { width: 26px; height: 26px; font-size: 11px; }
.reply.d1 { margin-left: 22px; }
.reply.d2 { margin-left: 44px; }
.reply .txt { font-size: 14px; line-height: 1.5; color: var(--text); }
.reply .txt .act { display: block; font-style: italic; color: var(--text-2); }
:lang(ja) .reply .txt .act, :lang(ko) .reply .txt .act, :lang(zh) .reply .txt .act { font-style: normal; }
.opts { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.opt {
  position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 11px 12px; border: 1px solid var(--border-2); border-radius: 3px; font-size: 14px; font-weight: 600;
}
.opt .bar { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--surface-3); }
html.js .opts .bar { width: 0; transition: width 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
html.js .opts.in .bar { width: var(--w); }
.opt > span { position: relative; }
.opt .pct { font-family: var(--mono); font-weight: 500; font-size: 12px; color: var(--text-2); }
.opt.mine { border-color: var(--pink); }
.opt.mine .nm { color: var(--pink); }
.poll-meta { margin-top: 10px; font-size: 12px; color: var(--muted); }
.voted { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 5px; }

/* ── 06 characters ─────────────────────────────────────────────────────── */
.portraits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pc img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top center; border-radius: 6px; background: var(--surface); }
.pc .nm { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 700; font-size: 15px; line-height: 1.25; }
.pc .nm span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc .w { font-size: 12px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 559px) {
  .portraits { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 8px; scrollbar-width: none; }
  .portraits::-webkit-scrollbar { display: none; }
  .pc { flex: 0 0 auto; width: 40vw; scroll-snap-align: start; }
}
.notebook { position: relative; margin-top: 40px; max-width: 620px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 30px 28px 32px; }
.notebook::after {
  content: ''; position: absolute; top: -1px; right: 28px; width: 16px; height: 30px; background: var(--pink);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
}
.notebook .hd { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); padding-right: 40px; }
.notebook p { font-family: var(--fic); font-size: clamp(18px, 1.7vw, 21px); line-height: 1.7; color: var(--text-2); margin-top: 16px; }
:lang(ja) .notebook p, :lang(ko) .notebook p, :lang(zh) .notebook p { font-family: var(--ui); }

/* ── 07 create ─────────────────────────────────────────────────────────── */
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 56px 0 0; }
/* short muted loops: a still until they play, never controls or a play
   button (iOS draws one when low power mode refuses autoplay) */
.step .clip { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: var(--ink); pointer-events: none; }
.step .clip::-webkit-media-controls { display: none !important; }
.step .clip::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.step .lb { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pink); margin-top: 16px; }
.step .ln { font-size: 15px; line-height: 1.45; color: var(--text-2); margin-top: 6px; }
@media (max-width: 979px) {
  .steps { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin: 48px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter) 8px; scrollbar-width: none; }
  .steps::-webkit-scrollbar { display: none; }
  .step { flex: 0 0 auto; width: 76vw; max-width: 320px; scroll-snap-align: start; }
}
.tail { margin-top: clamp(80px, 10vw, 136px); }

/* ── 08 join ───────────────────────────────────────────────────────────── */
/* the line across the page, then the form beside the room it opens onto */
.join .h2 { max-width: 14em; }
.join-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.join-copy > .sub:first-child { margin-top: 0; }

/* the crowd: characters and fans, and one seat in sakura that is yours.
   A phone gets a stack of eight, a desk gets the room. */
.crowd { display: flex; }
.crowd > * {
  flex: none; width: 48px; height: 48px; margin-left: -10px;
  border-radius: 50%; border: 3px solid var(--ink);
  object-fit: cover; object-position: top center; background: var(--surface-3);
}
.crowd > :first-child { margin-left: 0; }
.crowd .h { display: grid; place-items: center; font-weight: 800; font-size: 15px; line-height: 1; color: var(--text-2); }
.crowd .you { background: var(--pink); color: var(--on-pink); font-size: 12px; }
@media (max-width: 979px) {
  .crowd .you { order: 1; }
  .crowd > :nth-child(n+9) { display: none; }
}
/* 320 wide holds seven, and yours is the seventh */
@media (max-width: 359px) { .crowd > :nth-child(n+8) { display: none; } }
@media (min-width: 980px) {
  .join-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    grid-template-areas: 'head head' 'copy crowd';
    column-gap: 72px; row-gap: 48px; align-items: center;
  }
  .join-head { grid-area: head; }
  .join-copy { grid-area: copy; }
  .crowd { grid-area: crowd; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .crowd > * { width: 100%; height: auto; aspect-ratio: 1; margin: 0; border: 0; }
  .crowd .h { font-size: clamp(22px, 2vw, 30px); }
  .crowd .you { font-size: clamp(15px, 1.4vw, 19px); }
}
.form { position: relative; margin-top: 44px; max-width: 580px; }
.form label { display: block; font-size: 14px; color: var(--text-2); margin-bottom: 8px; }
.form .row { display: flex; gap: 10px; }
.field {
  flex: 1 1 auto; min-width: 0; height: 54px; padding: 0 16px;
  font-size: 16px; /* 16 is the floor: smaller makes iOS Safari zoom on focus */
  background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 3px;
  color: var(--text); caret-color: var(--pink);
}
.field::placeholder { color: var(--faint); }
.field:hover { border-color: var(--muted); }
.field:focus { outline: none; border-color: var(--pink); }
.field.is-error { border-color: var(--danger); }
.form .btn-primary { position: relative; transition: opacity 0.18s; }
.form:not(.is-ready) .btn-primary { opacity: 0.55; }
.form .btn-primary[data-busy='true'] { cursor: progress; }
.form .btn-primary[data-busy='true'] .lbl { opacity: 0; }
.spinner {
  position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 2px solid rgba(43, 10, 31, 0.25); border-top-color: var(--on-pink); border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form .msg-note { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--text-2); min-height: 21px; }
.form .msg-note.is-error { color: var(--danger); }
.form .legal { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.form .legal a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.form .legal a:hover { color: var(--pink); }
.form.is-done .legal { display: none; }
.done { display: none; align-items: center; gap: 12px; min-height: 84px; font-size: 16px; line-height: 1.5; }
.done .ico { color: var(--pink); font-size: 22px; }
.form.is-done label, .form.is-done .row { display: none; }
.form.is-done .done { display: flex; }
.form .done:focus { outline: none; } /* focused by script, so a reader hears the answer */
@media (max-width: 559px) {
  .form .row { flex-direction: column; }
  .form .btn { width: 100%; }
  .done { min-height: 144px; }
}
/* the first screen's form: the same form as the one at the end, set tighter.
   Its button stays full strength (it is the page's first call), its note
   only speaks when something is wrong, and the answer takes the row's place */
.form-hero { margin-top: 32px; max-width: 520px; }
.form-hero:not(.is-ready) .btn-primary { opacity: 1; }
.form-hero .msg-note { min-height: 0; margin-top: 10px; }
.form-hero .msg-note:empty { margin-top: 0; } /* empty, it takes no room but stays a live region */
.form-hero .legal { margin-top: 10px; }
.form-hero .done { min-height: 54px; }
.store {
  display: flex; align-items: center; gap: 10px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); max-width: 580px;
  font-size: 14px; color: var(--text-2);
}
.store .ico { font-size: 18px; color: var(--muted); }

/* ── footer ────────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--border); padding: 40px 0 calc(40px + env(safe-area-inset-bottom)); }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.foot .mark img { height: 20px; }
.foot .tagline { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; }
.foot nav a { color: var(--text-2); text-decoration: none; }
.foot nav a:hover { color: var(--pink); }
.foot .spacer { flex: 1; }
@media (max-width: 719px) { .foot .spacer { display: none; } }

/* ── motion, when a reader asks for less of it ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .rv { opacity: 1; transform: none; transition: none; }
  html.js .wall .col, html.js .tape .track { animation: none; }
  html.js .strike::after { animation: none; transform: scaleX(1); }
  html.js .opts .bar { transition: none; }
  html.js .chat.play .msg.in { animation: none; }
  .dots i { animation: none; opacity: 0.7; }
  .phone img { transition: none; }
}