/* =====================================================================
   Harbor set pieces: title, starter journal, impact moments, run summary,
   area banner, chapter card, Grandma's letter.
   Materials: paper, ink, brass, wax, carved stone, woodblock print.
   Built on theme.css tokens. JS: client/ui/setpieces.js · Docs: docs/design/ui.md §7
   ===================================================================== */
:root {
  --font-hand: 'Caveat', 'Klee One', 'Segoe Print', cursive;
  /* round 4: print headings move from IM Fell to the story serif; inks are brighter and cleaner */
  --font-print: 'EB Garamond', 'Shippori Mincho', Georgia, serif;
  --font-print-lc: 'EB Garamond', 'Shippori Mincho', Georgia, serif;
  --ink: #2a2733; --ink-soft: #5d5866; --ink-blue: #2f62b0; --ink-green: #23894f; --ink-red: #d2452f;
  --vermilion: #e0523a; --vermilion-d: #b23a24; --indigo-wb: #1d3a80; --indigo-wb-2: #2a52a8;
  --wax: #c8362c; --wax-green: #2f8a5c; --manila: #f6e2b0; --paper: #fdf7e8; --paper-2: #f5ead0; --paper-edge: #dcc48e;
  --desk: #1b2a52;
  /* static paper grain (rendered once) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .16 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fibers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='.012 .06' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .38 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}

/* ---------- shared materials */
.sp-paper { position: relative; color: var(--ink); background: var(--grain), var(--fibers), linear-gradient(180deg, var(--paper), var(--paper-2)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 0 0 1px rgba(31, 42, 74, 0.217), 0 18px 40px rgba(0, 0, 0, 0.45), 0 3px 8px rgba(0, 0, 0, 0.3); }
.sp-hand { font-family: var(--font-hand); font-weight: 600; line-height: 1.15; color: var(--ink-blue); }
.sp-print { font-family: var(--font-print); letter-spacing: 0.06em; }
.sp-kicker { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.sp-rule { height: 1px; background: linear-gradient(90deg, transparent, rgba(31, 42, 74, 0.341), transparent); margin: 0.5rem 0; }
.sp-tape { position: absolute; width: 4.2rem; height: 1.3rem; background: rgba(230, 214, 160, 0.72); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 50%); }
.sp-pin { position: absolute; width: 0.85rem; height: 0.85rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3c8, var(--gold) 45%, var(--gold-deep)); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45); z-index: 2; }
/* rubber/ink stamp: grainy impression */
.sp-stamp { display: inline-flex; align-items: center; justify-content: center; text-align: center; font-family: var(--font-print); letter-spacing: 0.12em; color: var(--vermilion); border: 3px solid currentColor; border-radius: 6px; padding: 0.25em 0.7em; line-height: 1; transform: rotate(-8deg); mix-blend-mode: multiply;
  -webkit-mask: var(--grain-mask, none); mask: var(--grain-mask, none); opacity: 0.9; }
.sp-stamp--round { border-radius: 50%; width: 6.2rem; height: 6.2rem; flex-direction: column; padding: 0; border-width: 2px; box-shadow: inset 0 0 0 4px transparent, inset 0 0 0 5px currentColor; font-size: 0.78rem; }
.sp-stamp--round b { font-size: 1.7rem; letter-spacing: 0.02em; margin: 0.1em 0; }
.sp-stamp--blue { color: var(--ink-blue); } .sp-stamp--green { color: var(--ink-green); }
:root { --grain-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"); }
/* wax seal */
.sp-seal { position: relative; display: grid; place-items: center; width: 4.4rem; height: 4.4rem; border-radius: 47% 53% 50% 48% / 52% 46% 54% 48%; color: #f6d9c4;
  background: radial-gradient(circle at 38% 32%, #c44a3a, var(--wax) 55%, #5e1a14); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.45), inset 0 -3px 6px rgba(0, 0, 0, 0.35), inset 0 2px 3px rgba(255, 200, 180, 0.35);
  font-family: var(--font-display); font-weight: 900; font-size: 1.9rem; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 210, 190, 0.35); }
.sp-seal::before { content: ''; position: absolute; inset: 0.45rem; border-radius: 50%; border: 1.5px solid rgba(255, 210, 190, 0.35); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
.sp-seal--green { background: radial-gradient(circle at 38% 32%, #6aa184, var(--wax-green) 55%, #1f3d2e); color: #d9f0e2; }
/* hanko (square red seal) */
.sp-hanko { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; background: var(--vermilion); color: #fbe9dc; font-family: 'Noto Serif JP', 'Shippori Mincho', serif; font-weight: 700; font-size: 1.5rem; line-height: 1; border-radius: var(--r-sm); box-shadow: inset 0 0 0 2px #fbe9dc, inset 0 0 0 3px var(--vermilion);
  -webkit-mask: var(--grain-mask); mask: var(--grain-mask); }

/* =====================================================================
   TITLE SCREEN
   ===================================================================== */
#title-scene { position: fixed; inset: 0; z-index: calc(var(--z-screen) - 1); overflow: hidden; background: #1c2a3a; }
body:has(#login.hidden):has(#starter.hidden) #title-scene { display: none; }
#title-scene .ly { position: absolute; inset: -3%; transform: translate3d(calc(var(--px, 0) * var(--d, 0) * -1px), calc(var(--py, 0) * var(--d, 0) * -1px), 0); transition: transform 1.2s var(--ease-out); will-change: transform; }
#title-scene svg { width: 100%; height: 100%; display: block; }
#title-scene .sky { --d: 2; background: radial-gradient(ellipse 60% 40% at 64% 63%, rgba(255, 226, 170, 0.75), rgba(255, 200, 150, 0) 70%), linear-gradient(180deg, #16263a 0%, #2f4a64 26%, #7d7b8c 46%, #d4977a 60%, #f0c78e 66%, #f6dcac 68%); }
#title-scene .sun { position: absolute; left: 64%; top: 61.5%; width: 7vmin; height: 7vmin; margin: -3.5vmin; border-radius: 50%; background: radial-gradient(circle, #fff8e4 0 45%, #ffe6b0 60%, rgba(255, 220, 160, 0) 72%); filter: blur(0.3px); animation: ts-sunrise 18s var(--ease-out) both; }
@keyframes ts-sunrise { from { transform: translateY(2.2vmin); opacity: 0.7; } }
#title-scene .rays { position: absolute; left: 64%; top: 62%; width: 160vmax; height: 160vmax; margin: -80vmax; background: repeating-conic-gradient(from 0deg, rgba(255, 236, 196, 0.07) 0 3deg, transparent 3deg 11deg); -webkit-mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, 0.6) 12%, transparent 45%); mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, 0.6) 12%, transparent 45%); animation: ts-rays 120s linear infinite; }
@keyframes ts-rays { to { transform: rotate(360deg); } }
#title-scene .far { --d: 5; } #title-scene .mid { --d: 10; } #title-scene .sea { --d: 12; } #title-scene .near { --d: 22; } #title-scene .fg { --d: 38; }
#title-scene .waves path { animation: ts-wave 9s ease-in-out infinite alternate; }
#title-scene .waves path:nth-child(2n) { animation-duration: 12s; animation-delay: -3s; }
#title-scene .waves path:nth-child(3n) { animation-duration: 7s; animation-delay: -5s; }
@keyframes ts-wave { to { transform: translateX(-38px); } }
#title-scene .glint rect { animation: ts-glint 2.6s ease-in-out infinite; }
#title-scene .glint rect:nth-child(2n) { animation-delay: -1.1s; } #title-scene .glint rect:nth-child(3n) { animation-delay: -1.9s; }
@keyframes ts-glint { 50% { opacity: 0.15; } }
#title-scene .lamp { animation: ts-flicker 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
#title-scene .lamp:nth-of-type(2n) { animation-delay: -1.3s; } #title-scene .lamp:nth-of-type(3n) { animation-delay: -2.1s; }
@keyframes ts-flicker { 0%, 100% { opacity: 1; } 40% { opacity: 0.78; } 45% { opacity: 0.95; } 70% { opacity: 0.85; } }
#title-scene .boat { animation: ts-bob 5s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes ts-bob { 50% { transform: translateY(3px) rotate(0.8deg); } }
#title-scene .gull { position: absolute; left: -6%; top: 30%; width: 3.2rem; animation: ts-gull 26s linear infinite; animation-delay: 3s; }
#title-scene .gull.g2 { top: 22%; width: 2.2rem; animation-duration: 34s; animation-delay: 14s; opacity: 0.8; }
#title-scene .gull svg { overflow: visible; } #title-scene .gull .w { animation: ts-flap 0.9s ease-in-out infinite; transform-origin: 50% 60%; transform-box: fill-box; }
@keyframes ts-gull { 0% { transform: translate(0, 0); } 50% { transform: translate(60vw, -6vh); } 100% { transform: translate(120vw, 4vh); } }
@keyframes ts-flap { 50% { transform: scaleY(0.35); } }
#title-scene .vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 85% 75% at 62% 55%, transparent 40%, rgba(8, 10, 14, 0.75) 100%), linear-gradient(90deg, rgba(10, 14, 20, 0.72), rgba(10, 14, 20, 0.15) 38%, transparent 55%); pointer-events: none; }
#title-scene .motes { z-index: 3; }

/* login screen = composition over the scene */
#login.screen { background: none; display: block; padding: 0; }
#login .backdrop { display: none; }
.ts-mark { position: absolute; left: clamp(1.2rem, 7vw, 8rem); top: 50%; transform: translateY(-58%); width: max-content; max-width: 52vw; z-index: 2; color: var(--text); animation: ui-rise 1.4s var(--ease-out) both; }
.ts-mark .k { display: flex; align-items: center; gap: 0.8rem; font-family: var(--font-display); font-weight: 900; font-size: clamp(0.75rem, 1.15vw, 1.05rem); letter-spacing: 0.02em; color: #f3e6c8; text-shadow: var(--text-shadow); }
.ts-mark .k::after { content: ''; flex: 1; max-width: 6rem; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }
.ts-word { position: relative; display: inline-block; white-space: nowrap; padding: 0 0.12em 0 0; margin: 0.15em 0 0.05em -0.05em; font-family: var(--font-display); font-weight: 900; font-size: clamp(3.4rem, 8.4vw, 8.6rem); line-height: 0.95; letter-spacing: 0.02em;
  background: linear-gradient(100deg, #b98c48 0%, #f6e0ac 18%, #fff8e6 24%, #d9b06a 34%, #8d6630 52%, #e9c98a 68%, #fff4d6 74%, #b78a46 86%) 0 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: ts-shimmer 7s ease-in-out infinite;
  filter: drop-shadow(0 1px 0 rgba(255, 240, 200, 0.5)) drop-shadow(0 -1px 0 rgba(40, 24, 8, 0.8)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55)); }
@keyframes ts-shimmer { 0%, 30% { background-position: 100% 0; } 70%, 100% { background-position: 0% 0; } }
.ts-sub { display: flex; align-items: center; gap: 1rem; margin-top: 0.6rem; }
.ts-sub .sp-hanko { transform: rotate(-3deg); box-shadow: inset 0 0 0 2px #fbe9dc, inset 0 0 0 3px var(--vermilion), 0 2px 6px rgba(0, 0, 0, 0.35); }
.ts-sub .tag { font-family: var(--font-prose); font-style: italic; font-size: clamp(1.05rem, 1.7vw, 1.5rem); color: #f7ecd4; text-shadow: var(--text-shadow); line-height: 1.25; }
.ts-sub .tag small { display: block; font-style: normal; font-family: var(--font-ui); font-size: var(--fs-2xs); letter-spacing: 0.24em; text-transform: uppercase; color: rgba(247, 236, 212, 0.66); margin-top: 0.35rem; }
/* the logbook (login form) */
.ts-log { position: absolute; right: clamp(1rem, 6vw, 7rem); top: 50%; width: min(24rem, 38vw); transform: translateY(-46%) rotate(1.2deg); z-index: 2; padding: 1.4rem 1.6rem 1.3rem 2.4rem; border-radius: var(--r-sm) 6px 5px 3px; animation: ts-log-in 1.2s 0.3s var(--ease-out) both; }
@keyframes ts-log-in { from { opacity: 0; transform: translateY(-40%) rotate(4deg); } }
.ts-log::before { content: ''; position: absolute; left: 1.55rem; top: 0; bottom: 0; width: 1px; background: rgba(168, 50, 31, 0.45); } /* margin line */
.ts-log::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, transparent 0 1.82rem, rgba(44, 74, 99, 0.16) 1.82rem calc(1.82rem + 1px)); background-position: 0 3.4rem; border-radius: inherit; }
.ts-log > * { position: relative; z-index: 1; }
.ts-log .sp-tape { top: -0.6rem; left: 42%; transform: rotate(-4deg); }
.ts-log h2 { margin: 0 0 0.2rem; font-family: var(--font-print); font-weight: 400; font-size: 1.35rem; letter-spacing: 0.12em; color: var(--ink); }
.ts-log .entry { font-family: var(--font-hand); font-size: 1.32rem; color: var(--ink-blue); line-height: 1.82rem; }
.ts-log .entry b { font-weight: 700; color: var(--ink); }
.ts-log label { display: block; margin-top: 0.4rem; font-family: var(--font-display); font-size: var(--fs-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.ts-log input#login-name { width: 100%; background: transparent; border: 0; border-bottom: 1.5px dashed rgba(31, 42, 74, 0.31); border-radius: 0; padding: 0.1rem 0.2rem; font-family: var(--font-hand); font-weight: 700; font-size: 2rem; color: var(--ink-blue); outline: none; box-shadow: none; }
.ts-log input#login-name::placeholder { color: rgba(44, 74, 99, 0.35); }
.ts-log input#login-name:focus { border-bottom-color: var(--ink-blue); background: rgba(44, 74, 99, 0.04); }
.ts-log .go { display: flex; align-items: center; gap: 0.9rem; margin-top: 1rem; }
.ts-log .go .sp-seal { width: 3.3rem; height: 3.3rem; font-size: 1.25rem; flex: none; cursor: pointer; transition: transform var(--t-med) var(--ease-back); }
.ts-log .go .sp-seal svg { width: 1.6rem; height: 1.6rem; }
.ts-log .go:hover .sp-seal { transform: rotate(-12deg) scale(1.06); }
.ts-log #login-go { flex: 1; }
.ts-log #login-err { color: var(--ink-red); font-family: var(--font-hand); font-size: 1.3rem; text-align: left; margin-top: 0.3rem; }
.ts-log .small { margin-top: 0.9rem; font-family: var(--font-prose); font-style: italic; font-size: 0.98rem; color: var(--ink-soft); line-height: 1.35; text-align: left; }
#login .credit { z-index: 3; color: rgba(247, 236, 212, 0.55); text-shadow: 0 1px 2px #000; }
.ts-hint { position: absolute; left: clamp(1.2rem, 7vw, 8rem); bottom: 3.6rem; z-index: 2; font-family: var(--font-hand); font-size: 1.25rem; color: rgba(247, 236, 212, 0.7); text-shadow: var(--text-shadow); animation: ui-fade 1s 1.6s both; }

/* =====================================================================
   STARTER: Grandma's field journal
   ===================================================================== */
#starter.screen { background: radial-gradient(ellipse at 50% 40%, rgba(20, 14, 10, 0.35), rgba(10, 8, 6, 0.82)); }
#starter .starter-box.sp-journal { all: unset; box-sizing: border-box; position: relative; display: grid; grid-template-columns: 1.15fr 1fr; width: min(72rem, 96vw); height: min(44rem, 92vh); animation: sp-book-open 0.9s var(--ease-out) both; }
@keyframes sp-book-open { from { opacity: 0; transform: perspective(1600px) rotateX(10deg) translateY(20px) scale(0.97); } }
.sp-journal .page { position: relative; padding: 1.6rem 1.8rem 1.4rem; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.sp-journal .page.l { border-radius: 6px 2px 2px 6px; background: var(--grain), var(--fibers), linear-gradient(90deg, var(--paper-2) 0%, var(--paper) 8%, var(--paper) 88%, #efe2c0 100%); }
.sp-journal .page.r { border-radius: var(--r-sm) 6px 6px 2px; background: var(--grain), var(--fibers), linear-gradient(90deg, #efe2c0 0%, var(--paper) 10%, var(--paper) 94%, var(--paper-2) 100%); }
.sp-journal::before { content: ''; position: absolute; left: -10px; right: -10px; top: -8px; bottom: -10px; z-index: -1; border-radius: var(--r-lg); background: linear-gradient(180deg, #2a4486, #1b2f62); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12) inset, 0 24px 60px rgba(10, 25, 70, 0.45); } /* leather cover */
.sp-journal::after { content: ''; position: absolute; left: calc(53.5% - 1px); top: 0; bottom: 0; width: 2.4rem; transform: translateX(-50%); pointer-events: none; background: linear-gradient(90deg, transparent, rgba(60, 40, 20, 0.28) 45%, rgba(60, 40, 20, 0.34) 50%, rgba(60, 40, 20, 0.2) 56%, transparent); } /* gutter */
.sp-journal .page > * { position: relative; }
.sp-journal h2 { margin: 0; font-family: var(--font-print); font-weight: 400; font-size: 1.6rem; color: var(--ink); letter-spacing: 0.06em; }
.sp-journal .lead { font-family: var(--font-hand); font-size: 1.35rem; color: var(--ink-blue); margin: 0.1rem 0 0.7rem; }
#starter .sp-journal #starter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr)); gap: 1rem 0.8rem; overflow-y: auto; padding: 0.6rem 0.4rem 1rem; flex: 1; min-height: 0; scrollbar-color: var(--paper-edge) transparent; }
#starter .sp-journal .starter-card { background: #fbf6ea; border: 0; border-radius: var(--r-sm); padding: 0.4rem 0.4rem 0.5rem; color: var(--ink); font-family: var(--font-hand); font-weight: 700; font-size: 1.2rem; letter-spacing: 0; box-shadow: 0 2px 4px rgba(15, 30, 70, 0.224), 0 0 0 1px rgba(31, 42, 74, 0.093); transform: rotate(var(--rot, -1.5deg)); transition: transform var(--t-med) var(--ease-back), box-shadow var(--t-med); }
#starter .sp-journal .starter-card:nth-child(3n) { --rot: 1.8deg; } #starter .sp-journal .starter-card:nth-child(4n+1) { --rot: -2.6deg; } #starter .sp-journal .starter-card:nth-child(5n+2) { --rot: 0.6deg; }
#starter .sp-journal .starter-card img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 0; box-shadow: none; filter: none; background: #e9dfc7; }
#starter .sp-journal .starter-card:hover { transform: rotate(0deg) translateY(-3px) scale(1.04); box-shadow: 0 8px 14px rgba(15, 30, 70, 0.24); border: 0; }
#starter .sp-journal .starter-card:hover img { transform: none; filter: none; }
#starter .sp-journal .starter-card.sel { background: #fffaf0; transform: rotate(0deg) scale(1.08); box-shadow: 0 10px 18px rgba(15, 30, 70, 0.28), 0 0 0 2px var(--ink-red); }
#starter .sp-journal .starter-card.sel::after { content: ''; position: absolute; inset: -6px; border: 2px solid var(--ink-red); border-radius: 48% 52% 46% 54%; transform: rotate(-4deg); background: none; animation: sp-circle 0.45s var(--ease-out) both; opacity: 0.75; }
@keyframes sp-circle { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
#starter .sp-journal .starter-card.sel img { filter: none; }
#starter .sp-journal .starter-card .types { display: none; }
.sp-journal .prev { flex: 1; min-height: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1.2rem; align-content: start; }
.sp-journal .prev .photo { position: relative; width: 9rem; padding: 0.5rem 0.5rem 1.6rem; background: #fbf6ea; box-shadow: 0 4px 10px rgba(15, 30, 70, 0.24); transform: rotate(-3deg); grid-row: span 3; }
.sp-journal .prev .photo img { width: 100%; aspect-ratio: 1; image-rendering: pixelated; display: block; background: #e9dfc7; }
.sp-journal .prev .photo .sp-tape { top: -0.55rem; left: 2.4rem; }
.sp-journal .prev .photo span { position: absolute; left: 0; right: 0; bottom: 0.2rem; text-align: center; font-family: var(--font-hand); font-size: 1.15rem; color: var(--ink); }
.sp-journal .prev .nm { font-family: var(--font-print); font-size: 2.4rem; line-height: 1; color: var(--ink); letter-spacing: 0.03em; }
.sp-journal .prev .stamps { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.sp-journal .prev .tstamp { font-family: var(--font-print); font-size: 0.82rem; letter-spacing: 0.14em; padding: 0.15rem 0.55rem; border: 2px solid var(--tc, var(--ink)); color: var(--tc, var(--ink)); border-radius: var(--r-sm); transform: rotate(-3deg); mix-blend-mode: multiply; -webkit-mask: var(--grain-mask); mask: var(--grain-mask); }
.sp-journal .prev .notes { grid-column: 1 / -1; margin-top: 0.6rem; font-family: var(--font-hand); font-size: 1.38rem; color: var(--ink-blue); line-height: 1.3; }
.sp-journal .prev .notes p { margin: 0 0 0.25rem; }
.sp-journal .prev .notes .arrow { color: var(--ink-red); }
.sp-journal .prev .sketch { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.2rem 1rem; margin-top: 0.4rem; font-family: var(--font-display); font-size: var(--fs-2xs); letter-spacing: 0.02em; color: var(--ink-soft); }
.sp-journal .prev .sketch i { display: block; height: 0.42rem; margin-top: 0.15rem; background: repeating-linear-gradient(-55deg, var(--ink-soft) 0 1px, transparent 1px 4px); border-bottom: 1.5px solid var(--ink); width: calc(var(--v) * 100%); max-width: 100%; }
.sp-journal .empty { flex: 1; display: grid; place-items: center; text-align: center; font-family: var(--font-hand); font-size: 1.6rem; color: rgba(44, 74, 99, 0.55); }
.sp-journal .sign { display: flex; align-items: flex-end; gap: 0.9rem; margin-top: auto; padding-top: 0.8rem; border-top: 1px dashed rgba(31, 42, 74, 0.217); }
.sp-journal .sign label { font-family: var(--font-display); font-size: var(--fs-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); flex: none; padding-bottom: 0.5rem; }
.sp-journal .sign input#starter-nick { flex: 1; min-width: 0; background: transparent; border: 0; border-bottom: 1.5px dashed rgba(31, 42, 74, 0.31); border-radius: 0; font-family: var(--font-hand); font-weight: 700; font-size: 1.7rem; color: var(--ink-blue); padding: 0 0.2rem; outline: none; box-shadow: none; }
.sp-journal .sign input#starter-nick::placeholder { color: rgba(44, 74, 99, 0.35); }
.sp-journal .from { position: absolute; right: 1.6rem; bottom: 4.9rem; font-family: var(--font-hand); font-size: 1.1rem; color: var(--ink-soft); transform: rotate(-2deg); }

/* =====================================================================
   MOMENTS (impact cards)
   ===================================================================== */
.sp-moment-host { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; pointer-events: auto; }
.sp-moment-host.passive { pointer-events: none; }
.sp-moment-host .scrim { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(8, 10, 12, 0.35), rgba(8, 10, 12, 0.72)); animation: ui-fade var(--t-med) both; }
.sp-moment-host.passive .scrim { display: none; }
.sp-moment-host.out { animation: sp-out var(--sp-out, 420ms) var(--ease-in) both; }
.sp-moment-host.out > .sp-moment { animation: sp-card-out var(--sp-out, 420ms) var(--ease-in) both; }
@keyframes sp-out { to { opacity: 0; } }
@keyframes sp-card-out { to { opacity: 0; transform: translateY(18px) scale(0.985); } }
/* the pop-up queue (present_queue.js): enter a touch slower, so one card settles before you read it */
.sp-moment-host:not(.passive) .scrim { animation-duration: 420ms; }
.sp-moment { position: relative; max-width: calc(100vw - 2rem); }
.sp-moment .skip { position: absolute; right: 0; bottom: -2.1rem; font-family: var(--font-ui); font-size: var(--fs-2xs); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(242, 234, 216, 0.6); display: flex; gap: 0.4rem; align-items: center; text-shadow: var(--text-shadow); }
.sp-moment .choices { display: flex; gap: 0.6rem; justify-content: center; margin-top: 1rem; flex-wrap: wrap; }
.sp-moment .por { image-rendering: pixelated; display: block; }
.sp-moment .chips { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; margin-top: 0.6rem; }
.sp-moment .chips span { font-family: var(--font-display); font-size: var(--fs-2xs); letter-spacing: 0.1em; text-transform: uppercase; padding: 0.2rem 0.55rem; border: 1px solid currentColor; border-radius: var(--r-sm); }

/* levelup: ledger page with wax-seal level */
.sp-m-levelup { width: min(30rem, 92vw); padding: 1.4rem 1.6rem 1.2rem; border-radius: var(--r-sm); transform: rotate(-1deg); animation: sp-slide-up 520ms var(--ease-back) both; }
@keyframes sp-slide-up { from { opacity: 0; transform: translateY(60px) rotate(2deg); } }
.sp-m-levelup .hd { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; }
.sp-m-levelup .por { width: 4.4rem; height: 4.4rem; background: #e9dfc7; box-shadow: 0 0 0 3px #fbf6ea, 0 2px 5px rgba(0, 0, 0, 0.3); transform: rotate(-3deg); }
.sp-m-levelup .t { font-family: var(--font-print); font-size: 1.7rem; line-height: 1.05; color: var(--ink); }
.sp-m-levelup .sub { font-family: var(--font-hand); font-size: 1.3rem; color: var(--ink-blue); }
.sp-m-levelup .sp-seal { animation: sp-seal-drop 600ms 250ms var(--ease-back) both; }
@keyframes sp-seal-drop { from { opacity: 0; transform: scale(2.2) rotate(-30deg); } }
.sp-m-levelup .ledger { margin-top: 0.9rem; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); }
.sp-m-levelup .ln { display: grid; grid-template-columns: 4.2rem 1fr auto 3rem; gap: 0.6rem; align-items: baseline; padding: 0.3rem 0.2rem; border-bottom: 1px solid rgba(44, 74, 99, 0.18); animation: ui-rise 360ms var(--ease-out) both; animation-delay: calc(400ms + var(--i) * 110ms); }
.sp-m-levelup .ln .k { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-xs); letter-spacing: 0.02em; color: var(--ink-soft); }
.sp-m-levelup .ln .dots { border-bottom: 1.5px dotted rgba(31, 42, 74, 0.217); transform: translateY(-0.3em); }
.sp-m-levelup .ln .v { font-family: var(--font-print-lc); font-size: 1.35rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.sp-m-levelup .ln .v s { color: rgba(31, 42, 74, 0.279); margin-right: 0.35rem; font-size: 0.85em; }
.sp-m-levelup .ln .d { font-family: var(--font-hand); font-weight: 700; font-size: 1.4rem; color: var(--ink-green); animation: ui-fade 300ms both; animation-delay: calc(800ms + var(--i) * 110ms); }
.sp-m-levelup .body { font-family: var(--font-prose); font-style: italic; color: var(--ink-soft); margin-top: 0.6rem; font-size: 1.05rem; }

/* move: technique scroll unfurling */
.sp-m-move { width: min(40rem, 94vw); display: grid; grid-template-columns: 1.2rem 1fr 1.2rem; align-items: stretch; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.5)); }
.sp-m-move .roll { border-radius: 0.6rem; background: linear-gradient(90deg, #3a2414, #8a5a34 40%, #5a3a20 70%, #2a180c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4); height: calc(100% + 1.2rem); margin-top: -0.6rem; position: relative; z-index: 2; }
.sp-m-move .roll::before, .sp-m-move .roll::after { content: ''; position: absolute; left: 50%; width: 0.7rem; height: 0.7rem; margin-left: -0.35rem; border-radius: 50%; background: var(--gold); box-shadow: 0 1px 2px #000; }
.sp-m-move .roll::before { top: -0.3rem; } .sp-m-move .roll::after { bottom: -0.3rem; }
.sp-m-move .sheet { padding: 1.3rem 1.8rem 1.2rem; text-align: center; overflow: hidden; animation: sp-unfurl 700ms 120ms var(--ease-out) both; box-shadow: none; }
@keyframes sp-unfurl { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
.sp-m-move .roll.l { animation: sp-roll-l 700ms 120ms var(--ease-out) both; } .sp-m-move .roll.r { animation: sp-roll-r 700ms 120ms var(--ease-out) both; }
@keyframes sp-roll-l { from { transform: translateX(calc(min(19rem, 45vw))); } } @keyframes sp-roll-r { from { transform: translateX(calc(-1 * min(19rem, 45vw))); } }
.sp-m-move .kk { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-2xs); letter-spacing: 0.02em; color: var(--ink-soft); }
.sp-m-move .t { font-family: var(--font-print); font-size: clamp(2rem, 5vw, 3rem); color: var(--ink); line-height: 1.05; margin: 0.25rem 0 0.15rem; animation: sp-ink-in 600ms 500ms both; }
@keyframes sp-ink-in { from { opacity: 0; filter: blur(3px); letter-spacing: 0.25em; } }
.sp-m-move .who { font-family: var(--font-hand); font-size: 1.35rem; color: var(--ink-blue); }
.sp-m-move .typest { position: absolute; right: 2.6rem; top: 0.9rem; transform: rotate(10deg); }
.sp-m-move .body { font-family: var(--font-prose); font-size: 1.1rem; color: var(--ink-soft); margin-top: 0.4rem; }
.sp-m-move .chips { color: var(--ink); }

/* recruit: polaroid pinned into the journal */
.sp-m-recruit { width: min(34rem, 92vw); padding: 1.6rem 1.8rem 1.4rem; display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: center; border-radius: var(--r-sm); animation: ui-rise 400ms var(--ease-out) both; }
.sp-m-recruit .pol { position: relative; width: 9.5rem; padding: 0.55rem 0.55rem 2rem; background: #fdfaf2; box-shadow: 0 6px 14px rgba(15, 30, 70, 0.28); animation: sp-drop 700ms 200ms var(--ease-back) both; transform: rotate(-4deg); }
@keyframes sp-drop { from { opacity: 0; transform: translateY(-90px) rotate(-22deg) scale(1.1); } }
.sp-m-recruit .pol img { width: 100%; aspect-ratio: 1; background: #e9dfc7; animation: sp-develop 1.6s 500ms ease-out both; }
@keyframes sp-develop { from { filter: sepia(1) brightness(1.6) contrast(0.6) blur(1px); } }
.sp-m-recruit .pol span { position: absolute; left: 0; right: 0; bottom: 0.25rem; text-align: center; font-family: var(--font-hand); font-weight: 700; font-size: 1.3rem; color: var(--ink); }
.sp-m-recruit .pol .sp-pin { left: 50%; top: -0.35rem; margin-left: -0.42rem; animation: sp-pin 300ms 820ms var(--ease-back) both; }
@keyframes sp-pin { from { transform: translateY(-14px) scale(1.6); opacity: 0; } }
.sp-m-recruit .t { font-family: var(--font-print); font-size: 1.9rem; color: var(--ink); line-height: 1.05; }
.sp-m-recruit .hand { font-family: var(--font-hand); font-size: 1.55rem; color: var(--ink-blue); margin-top: 0.3rem; animation: sp-write 900ms 900ms steps(24) both; }
@keyframes sp-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.sp-m-recruit .body { font-family: var(--font-prose); color: var(--ink-soft); font-size: 1.05rem; margin-top: 0.4rem; }
.sp-m-recruit .chips { justify-content: flex-start; color: var(--ink-soft); }

/* evolve: light from within */
.sp-m-evolve { width: min(30rem, 92vw); text-align: center; color: #fff8e8; }
.sp-m-evolve .stage { position: relative; width: 16rem; height: 16rem; margin: 0 auto; display: grid; place-items: center; }
.sp-m-evolve .stage::before { content: ''; position: absolute; inset: -40%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 240, 200, 0.28) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 15%, transparent 62%); mask: radial-gradient(circle, #000 15%, transparent 62%); animation: ts-rays 14s linear infinite, ui-fade 1s both; }
.sp-m-evolve .stage::after { content: ''; position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 252, 235, 0.95), rgba(255, 230, 160, 0.4) 45%, transparent 70%); animation: sp-flash 1.8s 0.6s var(--ease-out) both; }
@keyframes sp-flash { 0% { opacity: 0; transform: scale(0.4); } 45% { opacity: 1; transform: scale(1.25); } 100% { opacity: 0.35; transform: scale(1); } }
.sp-m-evolve .por { position: absolute; width: 8.5rem; height: 8.5rem; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 240, 200, 0.6), 0 0 40px rgba(255, 230, 160, 0.6); background: #2b2a26; }
.sp-m-evolve .por.a { animation: sp-ev-out 1.3s 0.2s ease-in both; }
.sp-m-evolve .por.b { animation: sp-ev-in 900ms 1.3s var(--ease-back) both; }
@keyframes sp-ev-out { 0% { filter: none; } 60% { filter: brightness(3) saturate(0); transform: scale(1.05); } 100% { filter: brightness(6) saturate(0); opacity: 0; transform: scale(0.9); } }
@keyframes sp-ev-in { from { opacity: 0; transform: scale(0.4); filter: brightness(5) saturate(0); } }
.sp-m-evolve .t { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.8rem, 4.4vw, 2.8rem); letter-spacing: 0.02em; margin-top: 0.4rem; text-shadow: 0 0 24px rgba(255, 220, 150, 0.6), var(--text-shadow); animation: ui-rise 600ms 1.6s var(--ease-out) both; }
.sp-m-evolve .sub { font-family: var(--font-prose); font-style: italic; font-size: 1.2rem; color: #f2e4c4; animation: ui-fade 600ms 1.9s both; }

/* elite: guild notice nailed to a post */
.sp-m-elite { width: min(24rem, 90vw); padding: 1.4rem 1.4rem 1.2rem; text-align: center; clip-path: polygon(0 2%, 8% 0, 22% 1.5%, 40% 0, 61% 1%, 79% 0, 93% 1.2%, 100% 0, 99% 30%, 100% 62%, 98.5% 100%, 80% 98.6%, 58% 100%, 37% 98.4%, 16% 100%, 0 98.8%, 1% 66%, 0 34%); animation: sp-notice 520ms var(--ease-back) both; transform: rotate(1.6deg); }
@keyframes sp-notice { 0% { opacity: 0; transform: translateY(-30px) rotate(-6deg); } 70% { transform: translateY(4px) rotate(2.4deg); } }
.sp-m-elite .nail { position: absolute; top: 0.55rem; left: 50%; width: 0.6rem; height: 0.6rem; margin-left: -0.3rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c9c4b8, #4a4640); box-shadow: 0 1px 2px #000; }
.sp-m-elite .hd { font-family: var(--font-print); font-size: 1.05rem; letter-spacing: 0.5em; color: var(--ink-red); margin-top: 0.4rem; }
.sp-m-elite .ring { position: relative; width: 7rem; height: 7rem; margin: 0.6rem auto 0.2rem; }
.sp-m-elite .ring img { width: 100%; height: 100%; filter: sepia(0.5) contrast(1.1); }
.sp-m-elite .ring::after { content: ''; position: absolute; inset: -0.5rem; border: 3px solid var(--ink-red); border-radius: 46% 54% 50% 50%; transform: rotate(-8deg); opacity: 0.85; animation: sp-circle 500ms 400ms var(--ease-out) both; }
.sp-m-elite .t { font-family: var(--font-print); font-size: 2rem; color: var(--ink); line-height: 1.05; }
.sp-m-elite .sub { font-family: var(--font-hand); font-size: 1.35rem; color: var(--ink-red); }
.sp-m-elite .body { font-family: var(--font-prose); color: var(--ink-soft); font-size: 1rem; margin-top: 0.3rem; }
.sp-m-elite .chips { color: var(--ink-red); }

/* boss: woodblock print title card */
.sp-m-boss { width: 100vw; max-width: 100vw; height: min(22rem, 44vh); position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: #f6ead0;
  background: radial-gradient(circle at 50% 50%, transparent 0 2px, transparent 2px) , linear-gradient(180deg, var(--indigo-wb), var(--indigo-wb-2)); animation: sp-fusuma 600ms var(--ease-out) both; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55); }
@keyframes sp-fusuma { from { clip-path: inset(48% 0 48% 0); } to { clip-path: inset(0 0 0 0); } }
.sp-m-boss::before { content: ''; position: absolute; inset: 0; opacity: 0.22; /* seigaiha waves */
  background: radial-gradient(circle at 50% 100%, transparent 38%, #f6ead0 39% 41%, transparent 42% 52%, #f6ead0 53% 55%, transparent 56% 66%, #f6ead0 67% 69%, transparent 70%) 0 0 / 3.2rem 1.6rem,
              radial-gradient(circle at 50% 100%, transparent 38%, #f6ead0 39% 41%, transparent 42% 52%, #f6ead0 53% 55%, transparent 56% 66%, #f6ead0 67% 69%, transparent 70%) 1.6rem 0.8rem / 3.2rem 1.6rem;
  -webkit-mask: linear-gradient(180deg, transparent, #000 70%); mask: linear-gradient(180deg, transparent, #000 70%); }
.sp-m-boss::after { content: ''; position: absolute; inset: 0; background: var(--grain); opacity: 0.6; pointer-events: none; mix-blend-mode: multiply; }
.sp-m-boss .sun { position: absolute; left: 50%; top: 50%; width: min(19rem, 38vh); height: min(19rem, 38vh); margin: calc(min(19rem, 38vh) / -2); border-radius: 50%; background: var(--vermilion); box-shadow: 0 0 0 0.5rem rgba(200, 68, 42, 0.25); animation: sp-sun 900ms 200ms var(--ease-out) both; }
@keyframes sp-sun { from { transform: scale(0.2); opacity: 0; } }
.sp-m-boss .por { position: relative; z-index: 2; width: min(14rem, 30vh); height: min(14rem, 30vh); grid-column: 2; border-radius: 50%; box-shadow: 0 0 0 4px #f6ead0, 0 0 0 7px var(--indigo-wb); filter: drop-shadow(0 0 0 #000) drop-shadow(4px 4px 0 rgba(10, 16, 30, 0.85)); animation: sp-boss-por 700ms 350ms var(--ease-back) both; }
@keyframes sp-boss-por { from { opacity: 0; transform: scale(1.4); filter: brightness(0); } }
.sp-m-boss .tl { grid-column: 1; justify-self: end; text-align: right; padding-right: 2rem; position: relative; z-index: 2; animation: sp-from-l 700ms 450ms var(--ease-out) both; }
.sp-m-boss .tr { grid-column: 3; justify-self: start; padding-left: 2rem; position: relative; z-index: 2; display: flex; gap: 1rem; align-items: center; animation: sp-from-r 700ms 450ms var(--ease-out) both; }
@keyframes sp-from-l { from { opacity: 0; transform: translateX(-40px); } } @keyframes sp-from-r { from { opacity: 0; transform: translateX(40px); } }
.sp-m-boss .kk { font-family: var(--font-display); font-size: var(--fs-2xs); letter-spacing: 0.02em; color: #e8c890; }
.sp-m-boss .t { font-family: var(--font-print); font-size: clamp(2.2rem, 5.6vw, 4.4rem); line-height: 0.95; letter-spacing: 0.04em; text-shadow: 3px 3px 0 rgba(8, 12, 24, 0.85); }
.sp-m-boss .sub { font-family: var(--font-prose); font-style: italic; font-size: 1.2rem; color: #e9dcbe; margin-top: 0.3rem; max-width: 18rem; }
.sp-m-boss .vseal { writing-mode: vertical-rl; background: var(--vermilion); color: #fbe9dc; font-family: 'Noto Serif JP', 'Shippori Mincho', serif; font-weight: 700; font-size: 2.4rem; padding: 0.5rem 0.3rem; letter-spacing: 0.15em; border-radius: var(--r-sm); box-shadow: inset 0 0 0 2px #fbe9dc, inset 0 0 0 3px var(--vermilion); -webkit-mask: var(--grain-mask); mask: var(--grain-mask); animation: sp-seal-drop 500ms 900ms var(--ease-back) both; }
.sp-m-boss .body { font-family: var(--font-ui); font-size: var(--fs-xs); letter-spacing: 0.08em; color: #d8cba8; margin-top: 0.5rem; }
.sp-moment-host.k-boss { place-items: center stretch; }
.sp-moment-host.k-boss .scrim { background: rgba(4, 6, 10, 0.55); }

/* rare: specimen tag on a string */
.sp-m-rare { position: relative; width: min(22rem, 88vw); padding: 1.3rem 1.4rem 1.2rem 2.6rem; background: var(--grain), linear-gradient(180deg, #efdcae, #e2c88f); color: var(--ink); border-radius: 4px 14px 14px 4px;
  clip-path: polygon(1.6rem 0, 100% 0, 100% 100%, 1.6rem 100%, 0 calc(100% - 1.6rem), 0 1.6rem); box-shadow: none; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.45)); transform-origin: 0 50%; animation: sp-swing 1.6s var(--ease-out) both; }
@keyframes sp-swing { 0% { transform: rotate(-24deg); opacity: 0; } 20% { opacity: 1; } 45% { transform: rotate(9deg); } 70% { transform: rotate(-4deg); } 100% { transform: rotate(1deg); } }
.sp-m-rare .hole { position: absolute; left: 0.9rem; top: 50%; width: 0.9rem; height: 0.9rem; margin-top: -0.45rem; border-radius: 50%; background: #3a2a18; box-shadow: 0 0 0 3px #c9ab6c; }
.sp-m-rare .string { position: absolute; left: -9rem; top: 50%; width: 10rem; height: 1px; background: #8a6a3a; transform: rotate(-8deg); transform-origin: right; }
.sp-m-rare .row { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: center; }
.sp-m-rare .ic { width: 4rem; height: 4rem; image-rendering: pixelated; padding: 0.4rem; background: rgba(255, 255, 255, 0.35); border: 1px dashed rgba(31, 42, 74, 0.279); }
.sp-m-rare .no { font-family: var(--font-hand); font-size: 1.15rem; color: var(--ink-red); }
.sp-m-rare .t { font-family: var(--font-print); font-size: 1.6rem; line-height: 1.05; }
.sp-m-rare .mis { margin-top: 0.7rem; padding-top: 0.5rem; border-top: 1px dashed rgba(31, 42, 74, 0.279); font-family: var(--font-hand); font-size: 1.4rem; color: var(--ink-blue); line-height: 1.15; }
.sp-m-rare .mis small { display: block; font-family: var(--font-display); font-size: var(--fs-2xs); letter-spacing: 0.02em; color: var(--ink-soft); margin-bottom: 0.15rem; }

/* objective: rubber stamp on a paper strip */
.sp-m-objective { position: relative; width: min(30rem, 90vw); padding: 1rem 1.4rem; display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; animation: sp-slide-up 380ms var(--ease-out) both; transform: rotate(-0.6deg); }
.sp-m-objective .kk { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-2xs); letter-spacing: 0.02em; color: var(--ink-soft); }
.sp-m-objective .t { font-family: var(--font-print); font-size: 1.5rem; color: var(--ink); line-height: 1.1; }
.sp-m-objective .sub { font-family: var(--font-hand); font-size: 1.25rem; color: var(--ink-blue); }
.sp-m-objective .sp-stamp { font-size: 1.5rem; padding: 0.35em 0.6em; animation: sp-stamp 420ms 260ms cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes sp-stamp { from { opacity: 0; transform: scale(2.4) rotate(-20deg); } }

/* floor: chapter heading (passive) */
.sp-m-floor { text-align: center; color: #f6ecd6; text-shadow: var(--text-shadow); padding: 1.2rem 4rem; animation: sp-floor 700ms var(--ease-out) both; }
.sp-moment-host.k-floor.out { animation-duration: 700ms; }
@keyframes sp-floor { 0% { opacity: 0; letter-spacing: 0.3em; } 100% { opacity: 1; } }
.sp-m-floor .kk { font-family: var(--font-prose); font-style: italic; font-size: 1.25rem; }
.sp-m-floor .t { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.6rem, 7vw, 4.6rem); letter-spacing: 0.02em; margin-right: -0.32em; line-height: 1.1; }
.sp-m-floor .rl { display: flex; align-items: center; gap: 0.8rem; justify-content: center; }
.sp-m-floor .rl::before, .sp-m-floor .rl::after { content: ''; height: 1px; width: 0; background: linear-gradient(90deg, transparent, #f0d9a8); animation: sp-rule 900ms 200ms var(--ease-out) forwards; }
.sp-m-floor .rl::after { background: linear-gradient(90deg, #f0d9a8, transparent); }
@keyframes sp-rule { to { width: min(11rem, 26vw); } }
.sp-m-floor .rl i { width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }
.sp-m-floor .sub { font-family: var(--font-display); font-size: var(--fs-2xs); letter-spacing: 0.02em; color: rgba(246, 236, 214, 0.75); margin-top: 0.3rem; }

/* =====================================================================
   AREA BANNER (OT2-style location reveal) and CHAPTER CARD
   ===================================================================== */
.sp-area { position: fixed; left: 50%; top: 17%; transform: translateX(-50%); z-index: var(--z-hud-hi); pointer-events: none; text-align: center; width: min(52rem, calc(100vw - 2rem)); color: #f6ecd6; }
.sp-area .bg { position: absolute; inset: -1.2rem -2rem; background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(8, 12, 15, 0.6), transparent 72%); animation: ui-fade 900ms both; }
.sp-area .kk { position: relative; font-family: var(--font-display); font-weight: 900; font-size: var(--fs-2xs); letter-spacing: 0.02em; color: #e8cf98; text-shadow: var(--text-shadow); animation: ui-fade 800ms 200ms both; }
.sp-area .t { position: relative; font-family: var(--font-display); font-weight: 900; font-size: clamp(2.2rem, 5.4vw, 3.8rem); letter-spacing: 0.02em; margin-right: -0.14em; line-height: 1.1; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 0 26px rgba(0, 0, 0, 0.6); animation: sp-area-t 1.4s var(--ease-out) both; }
@keyframes sp-area-t { from { opacity: 0; letter-spacing: 0.5em; filter: blur(4px); } }
.sp-area .ln { position: relative; display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin: 0.2rem 0; }
.sp-area .ln::before, .sp-area .ln::after { content: ''; height: 1px; width: 0; background: linear-gradient(90deg, transparent, #e8cf98); animation: sp-rule2 1.1s 300ms var(--ease-out) forwards; }
.sp-area .ln::after { background: linear-gradient(90deg, #e8cf98, transparent); }
@keyframes sp-rule2 { to { width: min(15rem, 32vw); } }
.sp-area .ln i { width: 6px; height: 6px; background: var(--gold-hi); transform: rotate(45deg); box-shadow: 0 0 8px var(--gold-glow); }
.sp-area .sub { position: relative; font-family: var(--font-prose); font-style: italic; font-size: clamp(1.05rem, 1.8vw, 1.3rem); text-shadow: var(--text-shadow); animation: ui-fade 900ms 600ms both; }
.sp-area .note { position: relative; font-family: var(--font-hand); font-size: 1.35rem; color: #e8cf98; text-shadow: var(--text-shadow); animation: ui-fade 900ms 900ms both; margin-top: 0.1rem; }
@media (max-width: 720px) and (orientation: portrait) { .sp-area { top: 26%; } } /* clear the minimap on a narrow window */
.sp-area.out { animation: sp-out 900ms var(--ease-in) both; }

.sp-chapter { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; background: radial-gradient(ellipse at 50% 50%, #1d1912 0%, #0a0806 75%); animation: ui-fade 700ms both; cursor: pointer; }
.sp-chapter::before { content: ''; position: absolute; inset: 0; background: var(--grain); opacity: 0.5; }
.sp-chapter .card { position: relative; text-align: center; color: #f1e3c2; padding: 3rem 4rem; }
.sp-chapter .card::before { content: ''; position: absolute; inset: 0; border: 1px solid rgba(232, 207, 152, 0.5); outline: 1px solid rgba(232, 207, 152, 0.2); outline-offset: 6px; animation: sp-frame 1.2s var(--ease-out) both; }
@keyframes sp-frame { from { clip-path: inset(50% 50% 50% 50%); } to { clip-path: inset(-10px -10px -10px -10px); } }
.sp-chapter .kk { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-xs); letter-spacing: 0.02em; color: #d8b878; animation: ui-fade 800ms 400ms both; }
.sp-chapter .t { font-family: var(--font-print); font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1; margin: 0.6rem 0; animation: sp-ink-in 1.2s 700ms both; }
.sp-chapter .sub { font-family: var(--font-prose); font-style: italic; font-size: 1.3rem; color: #d8cba8; animation: ui-fade 900ms 1.3s both; }
.sp-chapter .sp-hanko { margin-top: 1.4rem; animation: sp-seal-drop 500ms 1.6s var(--ease-back) both; }
.sp-chapter.out { animation: sp-out 500ms var(--ease-in) both; }

/* =====================================================================
   GRANDMA'S LETTER
   ===================================================================== */
.sp-letter { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; background: radial-gradient(ellipse 70% 70% at 50% 45%, rgba(60, 40, 18, 0.55), rgba(8, 6, 4, 0.88)); animation: ui-fade 600ms both; }
.sp-letter .env { position: relative; width: min(26rem, 86vw); aspect-ratio: 1.55; cursor: pointer; animation: sp-env-in 800ms var(--ease-back) both; perspective: 900px; }
@keyframes sp-env-in { from { opacity: 0; transform: translateY(40px) rotate(-6deg); } }
.sp-letter .env .back { position: absolute; inset: 0; border-radius: var(--r-sm); background: var(--grain), linear-gradient(180deg, #ecdcb4, #dcc594); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(110, 80, 40, 0.35); }
.sp-letter .env .flap { position: absolute; left: 0; right: 0; top: 0; height: 58%; background: var(--grain), linear-gradient(180deg, #e6d3a6, #d6bd88); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transition: transform 600ms var(--ease-out); z-index: 2; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2)); }
.sp-letter .env .mark { position: absolute; left: 0; right: 0; bottom: 14%; text-align: center; font-family: var(--font-hand); font-weight: 700; font-size: 1.7rem; color: var(--ink-blue); z-index: 1; }
.sp-letter .env .to { position: absolute; left: 8%; bottom: 8%; font-family: var(--font-display); font-size: var(--fs-2xs); letter-spacing: 0.02em; color: var(--ink-soft); }
.sp-letter .env .sp-seal { position: absolute; left: 50%; top: 58%; margin: -2.2rem; z-index: 3; transition: transform 500ms var(--ease-in), opacity 500ms; }
.sp-letter .env .sp-seal svg { width: 2.2rem; height: 2.2rem; }
.sp-letter .env .hint { position: absolute; left: 0; right: 0; bottom: -2.6rem; text-align: center; color: rgba(242, 234, 216, 0.75); font-family: var(--font-ui); font-size: var(--fs-xs); letter-spacing: 0.1em; text-shadow: var(--text-shadow); animation: ui-fade 600ms 1.2s both; }
.sp-letter.open .env .sp-seal { transform: translateY(-1.2rem) scale(1.25) rotate(25deg); opacity: 0; }
.sp-letter.open .env .flap { transform: rotateX(180deg); }
.sp-letter.open .env { animation: sp-env-away 700ms 600ms var(--ease-in) both; }
@keyframes sp-env-away { to { opacity: 0; transform: translateY(60px) scale(0.9); } }
.sp-letter .page { position: absolute; width: min(34rem, 92vw); max-height: 86vh; overflow-y: auto; padding: 2.2rem 2.4rem 1.6rem; border-radius: var(--r-sm); opacity: 0; pointer-events: none; transform: translateY(30px) scaleY(0.4); transform-origin: 50% 0;
  background: var(--grain), repeating-linear-gradient(180deg, transparent 0 33%, rgba(31, 42, 74, 0.074) 33% calc(33% + 1px), transparent calc(33% + 2px) 66%), var(--fibers), linear-gradient(180deg, #f6edd6, #eadcb8); }
.sp-letter.open .page { animation: sp-unfold 900ms 900ms var(--ease-out) forwards; pointer-events: auto; }
@keyframes sp-unfold { 0% { opacity: 0; transform: translateY(30px) scaleY(0.3); } 50% { opacity: 1; transform: translateY(0) scaleY(0.6); } 100% { opacity: 1; transform: none; } }
.sp-letter .page .mk { font-family: var(--font-hand); font-size: 1.3rem; color: var(--ink-soft); text-align: right; transform: rotate(-1.5deg); }
.sp-letter .page .txt { font-family: var(--font-prose); font-size: clamp(1.15rem, 1.6vw, 1.32rem); line-height: 1.6; color: var(--ink); margin-top: 0.8rem; white-space: pre-line; }
.sp-letter .page .txt::first-letter { font-family: var(--font-print); font-size: 3.1em; float: left; line-height: 0.85; padding: 0.06em 0.12em 0 0; color: var(--wax-green); }
.sp-letter .page .sig { display: flex; align-items: center; justify-content: flex-end; gap: 0.8rem; margin-top: 1.2rem; font-family: var(--font-hand); font-weight: 700; font-size: 2rem; color: var(--ink-blue); }
.sp-letter .page .sig svg { width: 3.4rem; height: 2.2rem; opacity: 0.75; }
.sp-letter .page .ps { font-family: var(--font-hand); font-size: 1.3rem; color: var(--ink-soft); margin-top: 0.6rem; }
.sp-letter .page .act { display: flex; justify-content: center; margin-top: 1.2rem; }
.sp-letter.out { animation: sp-out 500ms var(--ease-in) both; }

/* =====================================================================
   RUN SUMMARY: the expedition report in the team journal
   ===================================================================== */
.sp-report { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; overflow-y: auto; padding: 2rem 1rem;
  background: radial-gradient(ellipse 55% 50% at 30% 20%, rgba(255, 196, 120, 0.22), transparent 70%), radial-gradient(ellipse at 50% 50%, rgba(26, 18, 12, 0.82), rgba(8, 5, 3, 0.95)); animation: ui-fade 500ms both; }
.sp-report .book { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(74rem, 96vw); min-height: min(40rem, 84vh); margin: auto 0; animation: sp-book-open 800ms var(--ease-out) both; }
.sp-report .book::before { content: ''; position: absolute; inset: -10px -12px -12px; z-index: -1; border-radius: var(--r-lg); background: linear-gradient(180deg, #2a4486, #1b2f62); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12) inset, 0 24px 60px rgba(10, 25, 70, 0.45); }
.sp-report .book::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2.6rem; transform: translateX(-50%); pointer-events: none; background: linear-gradient(90deg, transparent, rgba(60, 40, 20, 0.3) 45%, rgba(60, 40, 20, 0.38) 50%, rgba(60, 40, 20, 0.22) 56%, transparent); }
.sp-report .pg { position: relative; padding: 1.8rem 2.2rem 1.6rem; display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.sp-report .pg.l { border-radius: 6px 2px 2px 6px; background: var(--grain), var(--fibers), linear-gradient(90deg, var(--paper-2) 0%, var(--paper) 7%, var(--paper) 90%, #efe2c0 100%); }
.sp-report .pg.r { border-radius: var(--r-sm) 6px 6px 2px; background: var(--grain), var(--fibers), linear-gradient(90deg, #efe2c0 0%, var(--paper) 10%, var(--paper) 93%, var(--paper-2) 100%); }
.sp-report .w { animation: sp-write-in 520ms var(--ease-out) both; animation-delay: calc(300ms + var(--i, 0) * 140ms); }
@keyframes sp-write-in { from { opacity: 0; transform: translateY(6px); filter: blur(1.5px); } }
.sp-report .date { display: flex; justify-content: space-between; font-family: var(--font-hand); font-size: 1.3rem; color: var(--ink-soft); }
.sp-report .ttl .kk { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-2xs); letter-spacing: 0.02em; color: var(--ink-soft); }
.sp-report .ttl h2 { margin: 0.1rem 0 0; font-family: var(--font-print); font-weight: 400; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1; color: var(--ink); }
.sp-report .ttl .sub { font-family: var(--font-prose); font-style: italic; color: var(--ink-soft); font-size: 1.05rem; margin-top: 0.2rem; }
.sp-report .trail { position: relative; height: 7.5rem; }
.sp-report .trail svg { width: 100%; height: 100%; overflow: visible; }
.sp-report .trail .path { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 5 4; stroke-linecap: round; }
.sp-report .trail .mask { fill: none; stroke: #000; stroke-width: 8; stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); animation: sp-draw 1.8s 600ms var(--ease-inout) forwards; }
@keyframes sp-draw { to { stroke-dashoffset: 0; } }
.sp-report .trail .node { opacity: 0; animation: sp-node 320ms var(--ease-back) forwards; animation-delay: calc(700ms + var(--t) * 1600ms); transform-box: fill-box; transform-origin: center; }
@keyframes sp-node { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: none; } }
.sp-report .trail .node circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; }
.sp-report .trail .node text { font-family: var(--font-hand); font-size: 15px; fill: var(--ink-soft); text-anchor: middle; }
.sp-report .trail .node .g { fill: var(--ink); font-family: var(--font-display); font-size: 12px; text-anchor: middle; dominant-baseline: central; }
.sp-report .trail .node.boss circle { stroke: var(--ink-red); stroke-width: 2; }
.sp-report .trail .node.boss .g { fill: var(--ink-red); }
.sp-report .trail .x { fill: none; stroke: var(--ink-red); stroke-width: 2.4; stroke-linecap: round; }
.sp-report .field { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
.sp-report .field div { border-bottom: 1.5px solid rgba(31, 42, 74, 0.31); padding-bottom: 0.15rem; }
.sp-report .field b { display: block; font-family: var(--font-hand); font-weight: 700; font-size: 2.1rem; line-height: 1; color: var(--ink-blue); font-variant-numeric: tabular-nums; }
.sp-report .field .lab { display: block; font-family: var(--font-display); font-size: var(--fs-2xs); letter-spacing: 0.1em; color: var(--ink-soft); text-transform: uppercase; }
.sp-report .lvl { display: grid; grid-template-columns: auto 1fr auto; gap: 0.8rem; align-items: center; font-family: var(--font-hand); font-size: 1.35rem; color: var(--ink); }
.sp-report .inkbar { height: 0.7rem; border: 1.5px solid var(--ink); border-radius: var(--r-sm); position: relative; overflow: hidden; }
.sp-report .inkbar i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--v)); background: repeating-linear-gradient(-55deg, var(--ink-blue) 0 2px, transparent 2px 5px); animation: sp-fill 1.2s 900ms var(--ease-out) both; }
@keyframes sp-fill { from { transform: scaleX(var(--v0, 0)); } }
.sp-report .up { color: var(--ink-green); font-weight: 700; }
.sp-report h4 { margin: 0.2rem 0 0; display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 900; font-size: var(--fs-2xs); letter-spacing: 0.1em; color: var(--ink-soft); text-transform: uppercase; }
.sp-report h4::after { content: ''; flex: 1; height: 1px; background: rgba(31, 42, 74, 0.217); }
.sp-report .charms { display: flex; flex-wrap: wrap; gap: 0.9rem 1.1rem; padding-top: 0.4rem; }
.sp-report .charm { position: relative; display: flex; flex-direction: column; align-items: center; width: 4.6rem; text-align: center; transform: rotate(var(--r, -3deg)); }
.sp-report .charm::before { content: ''; position: absolute; top: -0.9rem; left: 50%; width: 1px; height: 1rem; background: #9a2a1e; }
.sp-report .charm .disc { width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff6dc, #d8b878 60%, #8e6c34); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), inset 0 0 0 2px rgba(255, 255, 255, 0.35); }
.sp-report .charm .disc img, .sp-report .charm .disc svg { width: 1.9rem; height: 1.9rem; image-rendering: pixelated; }
.sp-report .charm span { font-family: var(--font-hand); font-size: 1.05rem; color: var(--ink); line-height: 1; margin-top: 0.25rem; }
.sp-report .slip { position: relative; display: inline-block; padding: 0.35rem 0.7rem; background: #fbf6e8; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); font-family: var(--font-hand); font-size: 1.15rem; color: var(--ink); transform: rotate(var(--r, 1deg)); margin: 0.3rem 0.4rem 0 0; }
.sp-report .slip b { font-family: var(--font-print-lc); font-weight: 400; }
.sp-report .slip .sp-tape { width: 2.4rem; height: 0.8rem; top: -0.45rem; left: 30%; }
.sp-report .tags { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.6rem; }
.sp-report .tag { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: center; padding: 0.45rem 0.6rem 0.45rem 1.4rem; background: var(--grain), linear-gradient(180deg, #efdcae, #e2c88f); clip-path: polygon(0.9rem 0, 100% 0, 100% 100%, 0.9rem 100%, 0 calc(100% - 0.9rem), 0 0.9rem); transform: rotate(var(--r, -1deg)); }
.sp-report .tag::before { content: ''; position: absolute; left: 0.5rem; top: 50%; width: 0.45rem; height: 0.45rem; margin-top: -0.22rem; border-radius: 50%; background: #3a2a18; }
.sp-report .tag img { width: 2rem; height: 2rem; image-rendering: pixelated; }
.sp-report .tag b { display: block; font-family: var(--font-print-lc); font-weight: 400; font-size: 1.05rem; color: var(--ink); }
.sp-report .tag i { display: block; font-family: var(--font-hand); font-style: normal; font-size: 1.05rem; color: var(--ink-blue); line-height: 1.05; }
.sp-report .pols { display: flex; flex-wrap: wrap; gap: 1rem; padding-top: 0.5rem; }
.sp-report .pol { position: relative; width: 5.8rem; padding: 0.35rem 0.35rem 1.4rem; background: #fdfaf2; box-shadow: 0 3px 8px rgba(15, 30, 70, 0.24); transform: rotate(var(--r, 3deg)); }
.sp-report .pol img { width: 100%; aspect-ratio: 1; image-rendering: pixelated; background: #e9dfc7; display: block; }
.sp-report .pol span { position: absolute; left: 0; right: 0; bottom: 0.1rem; text-align: center; font-family: var(--font-hand); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.sp-report .pol .sp-pin { left: 50%; top: -0.3rem; margin-left: -0.42rem; }
/* Agent R: Guild jobs on the run, pinned notes with a stamp */
.sp-report .pols.jobs .pol.job { width: auto; min-width: 12rem; max-width: 17rem; display: flex; gap: 0.5rem; align-items: center; padding: 0.4rem 0.6rem 0.4rem 0.4rem; background: #f3e8cc; }
.sp-report .pols.jobs .pol.job img { width: 2.6rem; flex: none; }
.sp-report .pols.jobs .pol.job > span:not(.sp-pin):not(.jstamp) { position: static; text-align: left; font-family: var(--font-prose); font-size: 0.95rem; line-height: 1.15; }
.sp-report .pols.jobs .pol.job small { font-size: 0.8rem; color: rgba(31, 42, 74, 0.434); }
.sp-report .pols.jobs .jstamp { position: absolute; right: -0.4rem; bottom: -0.55rem; left: auto; padding: 0 0.3rem; font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.02em; border: 2px solid currentColor; border-radius: var(--r-sm); transform: rotate(-8deg); background: rgba(253, 250, 242, 0.8); }
.sp-report .note { font-family: var(--font-hand); font-size: 1.32rem; color: var(--ink-blue); line-height: 1.25; }
.sp-report .note.pencil { color: #6d665c; }
.sp-report .stamps { position: relative; display: flex; align-items: center; gap: 1.4rem; margin-top: auto; padding-top: 0.6rem; min-height: 7rem; }
.sp-report .stamps .sp-stamp { animation: sp-stamp 420ms cubic-bezier(0.2, 1.6, 0.4, 1) both; animation-delay: calc(1.6s + var(--i, 0) * 260ms); }
.sp-report .stamps .big { font-size: 1.7rem; padding: 0.4em 0.7em; }
.sp-report .act { display: flex; align-items: center; gap: 0.8rem; justify-content: flex-end; margin-left: auto; }
.sp-report .flower { position: absolute; right: 1.6rem; bottom: 1.4rem; width: 4.8rem; opacity: 0.8; transform: rotate(18deg); }
.sp-report.fail .pg { filter: saturate(0.75) brightness(0.97); }
.sp-report.fail .ttl h2 { color: #3b3a46; }
.sp-report .empty { font-family: var(--font-hand); font-size: 1.2rem; color: rgba(60, 50, 40, 0.5); }
.sp-report.out { animation: sp-out 400ms var(--ease-in) both; }

/* =====================================================================
   QUEST JOURNAL & small flavour
   ===================================================================== */
.qlog .qd.ui-panel--parch { background: var(--grain), var(--fibers), linear-gradient(180deg, #f3e8cd, #e6d6b2); }
.qlog .qd.ui-panel--parch::before { border: 0; left: 1.1rem; right: auto; top: 0; bottom: 0; width: 1px; inset: auto; position: absolute; height: 100%; background: rgba(168, 50, 31, 0.35); }
.qlog .st.cur { font-family: var(--font-hand); font-size: 1.45rem; color: var(--ink-blue); font-weight: 700; }
.qlog .st.cur::after { content: '← now'; font-family: var(--font-hand); font-size: 1.1rem; color: var(--ink-red); margin-left: 0.4rem; transform: rotate(-3deg); display: inline-block; }
.qlog .qd .done-stamp { position: absolute; right: 1rem; top: 0.8rem; font-size: 1.15rem; }
.qlog .qd .margin { font-family: var(--font-hand); font-size: 1.2rem; color: var(--ink-soft); transform: rotate(-1.5deg); margin-top: 0.4rem; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 820px), (orientation: portrait) {
  .ts-mark { left: 50%; top: 4.5vh; transform: translateX(-50%); width: calc(100vw - 2rem); max-width: none; text-align: center; }
  .ts-sub .tag { text-align: left; }
  #login .credit { font-size: 0.55rem; bottom: 4px; }
  .ts-log { bottom: 4.4rem; }
  .sp-m-levelup .t { font-size: 1.35rem; }
  .sp-m-levelup .hd { grid-template-columns: auto 1fr auto; gap: 0.6rem; }
  .ts-mark .k { justify-content: center; } .ts-mark .k::after { display: none; }
  .ts-sub { justify-content: center; }
  .ts-log { right: 50%; top: auto; bottom: 3.2rem; transform: translateX(50%) rotate(0.8deg); width: min(24rem, calc(100vw - 2.2rem)); animation: none; }
  .ts-hint { display: none; }
  #starter .starter-box.sp-journal { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: 94vh; overflow-y: auto; }
  .sp-journal::after { display: none; }
  .sp-journal .page.l { border-radius: 6px 6px 0 0; max-height: 44vh; }
  .sp-journal .page.r { border-radius: 0 0 6px 6px; }
  .sp-journal .prev .photo { width: 6.5rem; }
  .sp-journal .prev .nm { font-size: 1.8rem; }
  .sp-journal .from { display: none; }
  .sp-report { place-items: start center; }
  .sp-report .book { grid-template-columns: 1fr; }
  .sp-report .book::after { display: none; }
  .sp-report .pg.l { border-radius: 6px 6px 0 0; } .sp-report .pg.r { border-radius: 0 0 6px 6px; }
  .sp-report .field { grid-template-columns: repeat(2, 1fr); }
  .sp-report .pg { padding: 1.3rem 1.3rem 1.2rem; }
  .sp-m-boss { grid-template-columns: 1fr; grid-template-rows: auto auto auto; height: auto; padding: 1.4rem 0; }
  .sp-m-boss .tl, .sp-m-boss .tr { grid-column: 1; justify-self: center; text-align: center; padding: 0; }
  .sp-m-boss .por { grid-column: 1; grid-row: 2; justify-self: center; }
  .sp-m-boss .tr { grid-row: 3; }
  .sp-m-recruit { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .sp-m-recruit .chips { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  #title-scene .ly, #title-scene .rays, #title-scene .gull, #title-scene .waves path { animation: none !important; transition: none; }
  .ts-word { animation: none; }
}
.sp-letter .page .txt.nocap::first-letter { font: inherit; float: none; padding: 0; color: inherit; }

/* ---------- PX-D: the report's Kept / Left behind columns, Pip's tip, Emblem unlock cards, Danger reward,
   the Next goals card and the ship plans (client/ui/setpieces.js nextGoalsCard / shipProgress) */
.sp-report .field .neg b { color: var(--ink-red); }
.sp-kl { display: grid; grid-template-columns: 1.25fr 1fr; gap: 0.4rem 1rem; padding: 0.45rem 0.6rem 0.5rem; border: 1.5px dashed rgba(31, 42, 74, 0.217); border-radius: 4px; background: rgba(255, 252, 240, 0.35); }
.sp-kl h5 { margin: 0 0 0.15rem; font-family: var(--font-display); font-weight: 900; font-size: var(--fs-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-green); }
.sp-kl .lc h5 { color: #6d665c; }
.sp-kl ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.05rem; }
.sp-kl li { font-family: var(--font-hand); font-size: 1.22rem; line-height: 1.08; color: var(--ink); display: flex; gap: 0.35rem; align-items: baseline; }
.sp-kl li i { font-style: normal; color: var(--ink-green); font-family: var(--font-display); font-size: 0.8rem; flex: none; }
.sp-kl .lc li { color: #6d665c; text-decoration: line-through; text-decoration-color: rgba(109, 102, 92, 0.45); }
.sp-kl .empty { margin: 0; font-family: var(--font-hand); font-size: 1.1rem; color: rgba(60, 50, 40, 0.55); }
.sp-tip { display: flex; gap: 0.7rem; align-items: center; padding: 0.4rem 0.7rem 0.45rem 0.4rem; background: #fdf6dc; box-shadow: 0 2px 6px rgba(15, 30, 70, 0.2); transform: rotate(-0.8deg); border-left: 4px solid var(--ink-blue); }
.sp-tip img { width: 3rem; height: 3rem; border-radius: 4px; image-rendering: pixelated; background: #e9dfc7; flex: none; }
.sp-tip .kk { display: block; font-family: var(--font-display); font-weight: 900; font-size: var(--fs-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.sp-tip .t { display: block; font-family: var(--font-hand); font-size: 1.32rem; line-height: 1.1; color: var(--ink-blue); }
.sp-report .tag.left { opacity: 0.8; }
.sp-report .tag .lb { position: absolute; right: 0.4rem; bottom: -0.35rem; font-family: var(--font-hand); font-style: normal; font-size: 0.95rem; color: var(--ink-red); transform: rotate(-4deg); background: rgba(253, 250, 242, 0.85); padding: 0 0.25rem; }
.sp-ucards { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.sp-ucard { display: flex; gap: 0.5rem; align-items: center; width: 15rem; padding: 0.35rem 0.55rem; background: #fbf6e8; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); transform: rotate(var(--r, 0deg)); }
.sp-ucard .disc { width: 2.4rem; height: 2.4rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff6dc, #d8b878 60%, #8e6c34); }
.sp-ucard .disc img, .sp-ucard .disc svg { width: 1.5rem; height: 1.5rem; image-rendering: pixelated; }
.sp-ucard b { display: block; font-family: var(--font-print-lc); font-weight: 400; font-size: 1.02rem; color: var(--ink); }
.sp-ucard span { display: block; font-family: var(--font-prose); font-size: 0.82rem; line-height: 1.15; color: var(--ink-soft); }
.sp-usub { font-family: var(--font-hand); font-size: 1.1rem; color: var(--ink-green); margin-top: -0.4rem; }
.sp-danger { display: flex; gap: 0.8rem; align-items: center; }
.sp-danger .sp-stamp { font-size: 0.95rem; flex: none; }
.sp-danger b { display: block; font-family: var(--font-print-lc); font-weight: 400; font-size: 1.1rem; color: var(--ink); }
.sp-danger span { display: block; font-family: var(--font-hand); font-size: 1.2rem; line-height: 1.1; color: var(--ink-green); }
.sp-danger small { display: block; font-family: var(--font-prose); font-size: 0.85rem; color: var(--ink-soft); }

.sp-goals, .sp-ship { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: 1rem; background: radial-gradient(ellipse at center, rgba(10, 8, 5, 0.35), rgba(10, 8, 5, 0.7)); animation: ui-fade 260ms both; }
.sp-goals.out { animation: sp-out 420ms var(--ease-in) both; }
.sp-ship.out { animation: sp-out 320ms var(--ease-in) both; }
.sp-goals .sheet, .sp-ship .sheet { width: min(40rem, 94vw); max-height: 88vh; overflow-y: auto; padding: 1.3rem 1.6rem 1rem; border-radius: 4px; transform: rotate(-0.4deg); animation: sp-book-open 500ms var(--ease-out) both; }
.sp-goals .hd h3, .sp-ship .hd h3 { margin: 0.1rem 0 0.6rem; font-family: var(--font-print); font-weight: 400; font-size: 1.9rem; color: var(--ink); }
.sp-goals .list { display: grid; gap: 0.85rem; }
.sp-goal { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 0.75rem; align-items: center; padding: 0.6rem 0.8rem 0.6rem 0.6rem; background: #fdfaf0; box-shadow: 0 3px 8px rgba(15, 30, 70, 0.224); transform: rotate(var(--r, 0deg)); animation: sp-write-in 420ms var(--ease-out) both; animation-delay: calc(250ms + var(--i) * 140ms); }
.sp-goal .sp-pin { left: 50%; top: -0.35rem; }
.sp-goal .gl { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--ink-blue); color: var(--ink-blue); font-size: 1.25rem; font-family: var(--font-display); }
.sp-goal.k-retry .gl { border-color: var(--ink-red); color: var(--ink-red); }
.sp-goal.k-danger .gl, .sp-goal.k-emblems .gl { border-color: var(--gold-deep); color: var(--gold-deep); }
.sp-goal .por { width: 2.8rem; height: 2.8rem; border-radius: 4px; image-rendering: pixelated; background: #e9dfc7; }
.sp-goal b { display: block; font-family: var(--font-print-lc); font-weight: 400; font-size: 1.15rem; color: var(--ink); line-height: 1.1; }
.sp-goal .dt { display: block; font-family: var(--font-hand); font-size: 1.25rem; line-height: 1.1; color: var(--ink-blue); margin-top: 0.1rem; }
.sp-goal small { display: block; font-family: var(--font-prose); font-size: 0.86rem; color: var(--ink-green); margin-top: 0.15rem; }
.sp-goal .inkbar, .sp-ship .inkbar { display: block; height: 0.55rem; margin-top: 0.3rem; border: 1.5px solid var(--ink); border-radius: var(--r-sm); position: relative; overflow: hidden; }
.sp-goal .inkbar i, .sp-ship .inkbar i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--v)); background: repeating-linear-gradient(-55deg, var(--ink-blue) 0 2px, transparent 2px 5px); }
.sp-goals .ft, .sp-ship .ft { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; }
.sp-goals .skip, .sp-ship .skip { font-family: var(--font-hand); font-size: 1.1rem; color: var(--ink-soft); }
.sp-ship .hd { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.sp-ship .hull { width: 9rem; color: var(--ink); } .sp-ship .hull svg { width: 100%; }
.sp-ship .stages { display: grid; gap: 0.35rem; }
.sp-ship .st { display: grid; grid-template-columns: 2rem 1fr; gap: 0.6rem; padding: 0.35rem 0.4rem; border-bottom: 1px dashed rgba(31, 42, 74, 0.186); }
.sp-ship .st .gl { width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid rgba(31, 42, 74, 0.279); font-family: var(--font-display); font-size: 0.85rem; color: var(--ink-soft); }
.sp-ship .st.done { opacity: 0.6; } .sp-ship .st.done .gl { background: var(--ink-green); border-color: var(--ink-green); color: #fff; }
.sp-ship .st.now { background: rgba(255, 250, 230, 0.6); box-shadow: 0 0 0 1.5px var(--ink-blue) inset; border-radius: var(--r-sm); }
.sp-ship .st.now .gl { border-color: var(--ink-blue); color: var(--ink-blue); }
.sp-ship .st b { font-family: var(--font-print-lc); font-weight: 400; font-size: 1.12rem; color: var(--ink); }
.sp-ship .st .gate { margin-left: 0.6rem; font-family: var(--font-hand); font-size: 1.05rem; color: var(--ink-red); }
.sp-ship .st p { margin: 0.15rem 0 0.3rem; font-family: var(--font-prose); font-size: 0.92rem; line-height: 1.3; color: var(--ink-soft); }
.sp-ship .needs { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem; }
.sp-ship .st.now .needs { display: grid; gap: 0.1rem; }
.sp-ship .needs li { font-family: var(--font-hand); font-size: 1.08rem; color: var(--ink); display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: baseline; }
.sp-ship .needs li.ok { color: var(--ink-green); }
.sp-ship .needs .ct { font-variant-numeric: tabular-nums; color: var(--ink-blue); }
.sp-ship .needs em { font-style: normal; font-size: 0.9rem; color: var(--ink-green); }
.sp-ship .needs .fr { font-family: var(--font-prose); font-size: 0.82rem; color: var(--ink-soft); }
.sp-ship .crew { display: block; margin-top: 0.2rem; font-family: var(--font-prose); font-size: 0.85rem; color: var(--ink-soft); }
.sp-ship .st.later .needs li { font-size: 0.98rem; color: rgba(31, 42, 74, 0.372); }
@media (max-width: 720px) { .sp-kl { grid-template-columns: 1fr; } .sp-goal { grid-template-columns: auto 1fr; } .sp-goal .ui-btn { grid-column: 1 / -1; justify-self: end; } }
.sp-insight { position: absolute; top: 4.6rem; left: 50%; z-index: var(--z-hud-hi, 40); display: flex; gap: 0.7rem; align-items: center; width: min(30rem, calc(100vw - 2rem)); padding: 0.45rem 0.8rem 0.5rem 0.45rem; background: var(--grain), #fdf6dc; border-left: 4px solid var(--ink-blue); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); transform: translateX(-50%) rotate(-0.6deg); pointer-events: none; animation: sp-insight-in 520ms var(--ease-out) both; }
.sp-insight img { width: 3rem; height: 3rem; border-radius: 4px; image-rendering: pixelated; background: #e9dfc7; flex: none; }
.sp-insight .kk { display: block; font-family: var(--font-display); font-weight: 900; font-size: var(--fs-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.sp-insight .t { display: block; font-family: var(--font-hand); font-size: 1.35rem; line-height: 1.1; color: var(--ink-blue); }
.sp-insight.out { animation: sp-out 600ms var(--ease-in) both; }
@keyframes sp-insight-in { from { opacity: 0; transform: translateX(-50%) translateY(-14px) rotate(-0.6deg); } }