/* =====================================================================
   FIELD JOURNAL kit (round 3, Agent P) — the archaeologist-explorer's notebook.
   Dark oiled-canvas COVERS (stitched in brass thread, brass corner caps) hold aged, TATTERED PAGES:
   foxing, tide-mark water stains, burnt edges, torn/deckled edges, tape, pins, pressed ginkgo leaves,
   smudged ink and faded rubber stamps. Everything is CSS gradients + a few tiny static SVG data URIs
   (rendered once, never animated), so it stays cheap.
   Tokens build on theme.css + setpieces.css. Docs: docs/design/ui.md §8.
   ===================================================================== */
:root {
  /* foxing: sparse brown age spots */
  --fj-foxing: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .31 0 0 0 0 .12 3.4 0 0 0 -2.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  /* blotchy mottling (uneven ageing of the sheet) */
  --fj-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .38 0 0 0 0 .16 0 0 .75 0 -.36'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  /* torn / deckled edge: a 9-patch (slice 16) used as -webkit-mask-box-image */
  --fj-torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='t' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.11' numOctaves='3' seed='5'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='9' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='6' y='6' width='108' height='108' fill='%23000' filter='url(%23t)'/%3E%3C/svg%3E");
  /* coarser rip for torn-out strips and tags */
  --fj-rip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='t' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='.07' numOctaves='2' seed='9'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='12' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='8' y='8' width='104' height='104' fill='%23000' filter='url(%23t)'/%3E%3C/svg%3E");
  /* oiled-canvas weave for covers */
  --fj-weave: repeating-linear-gradient(45deg, rgba(255, 244, 220, 0.022) 0 1px, transparent 1px 3px), repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.09) 0 1px, transparent 1px 3px);
  /* pressed ginkgo leaf (Kamakura's tree) and a fern frond */
  --fj-ginkgo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110'%3E%3Cg fill='%23b8973e' fill-opacity='.55' stroke='%236e5a26' stroke-opacity='.55' stroke-width='.8'%3E%3Cpath d='M50 64C30 62 9 45 6 24 19 13 37 9 48 19l2 9 2-9c11-10 29-6 42 5-3 21-24 38-44 40z'/%3E%3C/g%3E%3Cg fill='none' stroke='%236e5a26' stroke-opacity='.45' stroke-width='.6'%3E%3Cpath d='M50 64 14 27M50 64 24 18M50 64 37 14M50 64l-4-44M50 64l4-44M50 64l13-50M50 64l26-46M50 64l36-37'/%3E%3C/g%3E%3Cpath d='M50 64c-1 14 1 28-4 44' fill='none' stroke='%236e5a26' stroke-opacity='.6' stroke-width='1.4'/%3E%3C/svg%3E");
  --fj-fern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 160'%3E%3Cg fill='%236f8a4a' fill-opacity='.42' stroke='%23435a2c' stroke-opacity='.45' stroke-width='.6'%3E%3Cpath d='M30 158C31 110 29 60 31 4' fill='none' stroke-width='1.2'/%3E%3Cpath d='M30 140c-12-2-20-8-24-14 9 0 18 5 24 14zM31 130c11-3 19-9 23-15-9 0-17 6-23 15zM30 118c-11-2-18-8-22-14 9 0 16 5 22 14zM31 108c10-3 17-9 21-15-8 0-16 6-21 15zM30 96c-10-2-16-7-20-13 8 0 15 5 20 13zM31 86c9-3 15-8 19-14-8 0-14 6-19 14zM30 74c-9-2-14-7-17-12 7 0 13 5 17 12zM31 64c8-2 13-7 16-12-7 0-12 5-16 12zM30 53c-7-2-12-6-14-10 6 0 11 4 14 10zM31 44c7-2 11-6 13-10-6 0-10 4-13 10zM30 34c-6-1-9-5-11-8 5 0 9 3 11 8zM31 26c5-2 8-5 10-8-5 0-8 3-10 8zM30 17c-4-1-6-3-7-6 4 0 6 3 7 6z'/%3E%3C/g%3E%3C/svg%3E");
  --fj-ink-smudge: none;
  --fj-paper: #fdf7e8; --fj-paper-2: #f5ead0; --fj-paper-dark: #dcc48e;
}

/* ===================================================================== PAGE (round 4: clean, bright notebook paper)
   The paper lives on ::before, so children are never clipped. Round 4 keeps the journal's paper grain, a faint
   tide mark and the occasional cup ring, but the sheet is brighter and rounded; a torn edge is now an accent
   (.fj-page--rip / --torn) rather than the default. */
.fj-page { position: relative; isolation: isolate; color: var(--ink); background: none; filter: drop-shadow(0 0.4rem 0.8rem rgba(15, 30, 70, 0.22)) drop-shadow(0 1px 1px rgba(15, 30, 70, 0.14)); }
.fj-page::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 7rem 5.5rem at 91% 9%, transparent 60%, rgba(128, 86, 34, 0.07) 63.5%, rgba(128, 86, 34, 0.02) 67%, transparent 71%),  /* cup ring */
    radial-gradient(ellipse 60% 40% at 0% 100%, rgba(120, 82, 30, 0.07), transparent 70%),                                                       /* tide mark */
    var(--grain), var(--fibers),
    linear-gradient(176deg, var(--fj-paper) 0%, #fbf3df 55%, var(--fj-paper-2) 100%);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9), inset 0 0 1.6rem rgba(160, 120, 60, 0.12); }
.fj-page--clean::before { -webkit-mask-box-image: none; border-radius: var(--r-md); }
.fj-page--torn::before { -webkit-mask-box-image: var(--fj-torn) 16 round; border-radius: 0; }
.fj-page--rip::before { -webkit-mask-box-image: var(--fj-rip) 18 round; border-radius: 0; }
.fj-page--ruled::after { content: ''; position: absolute; inset: 2.6rem 1.2rem 1.4rem 1.2rem; z-index: -1; pointer-events: none; background: repeating-linear-gradient(180deg, transparent 0 1.75rem, rgba(44, 74, 99, 0.13) 1.75rem calc(1.75rem + 1px)); }
.fj-page h2, .fj-page h3 { color: var(--ink); text-shadow: var(--fj-ink-smudge); }
.fj-hand { font-family: var(--font-hand); font-weight: 600; color: var(--ink-blue); line-height: 1.15; }
.fj-print { font-family: var(--font-print); letter-spacing: 0.04em; }
.fj-ink { color: var(--ink); text-shadow: var(--fj-ink-smudge); }
.fj-faded { opacity: 0.55; filter: saturate(0.6); }
/* bits that can be dropped onto any page */
.fj-leaf { position: absolute; width: 4.6rem; height: 5rem; background: var(--fj-ginkgo) center / contain no-repeat; pointer-events: none; transform: rotate(var(--r, -18deg)); mix-blend-mode: multiply; z-index: 0; }
.fj-leaf--fern { width: 2.4rem; height: 6.4rem; background-image: var(--fj-fern); }
.fj-tape { position: absolute; width: 4.4rem; height: 1.25rem; background: linear-gradient(180deg, rgba(236, 222, 176, 0.78), rgba(222, 204, 150, 0.72)); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); clip-path: polygon(2% 8%, 8% 0, 92% 4%, 99% 0, 97% 50%, 100% 94%, 90% 100%, 6% 96%, 0 100%, 3% 50%); transform: rotate(var(--r, -4deg)); z-index: 3; pointer-events: none; }
.fj-pin { position: absolute; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe6c0, #c8442a 45%, #6e1a10); box-shadow: 0 3px 4px rgba(0, 0, 0, 0.45); z-index: 3; pointer-events: none; }
.fj-stamp { display: inline-block; font-family: var(--font-print); letter-spacing: 0.12em; line-height: 1; padding: 0.22em 0.6em; border: 2px solid currentColor; border-radius: 4px; color: var(--vermilion); transform: rotate(var(--r, -6deg)); mix-blend-mode: multiply; opacity: 0.78; -webkit-mask: var(--grain-mask); mask: var(--grain-mask); }
.fj-stamp--blue { color: var(--ink-blue); } .fj-stamp--green { color: var(--ink-green); } .fj-stamp--faded { opacity: 0.4; }
.fj-rule { height: 0; border-top: 2px solid rgba(31, 42, 74, 0.12); margin: 0.5rem 0; }
.fj-rule--dash { border-top-style: dashed; }
.fj-note { font-family: var(--font-hand); font-size: 1.15rem; color: var(--ink-red); transform: rotate(-2deg); display: inline-block; }
.fj-label { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }

/* ===================================================================== COVER (round 4: a navy explorer's satchel, rounded, with a yellow running stitch) */
.fj-cover.ui-panel, .fj-cover { background: var(--fj-weave), linear-gradient(180deg, #22376e 0%, #172a58 60%, #12224a 100%); -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 2px solid rgba(255, 255, 255, 0.14); border-radius: var(--r-lg); box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -3px 0 rgba(0, 0, 0, 0.18); }
.fj-cover.ui-panel::before, .fj-cover::before { content: ''; position: absolute; inset: 7px; pointer-events: none; border: 2px dashed rgba(255, 203, 5, 0.32); border-radius: calc(var(--r-lg) - 6px); }
.fj-cover.ui-panel::after, .fj-cover::after { content: none; }
/* a paper sheet laid into a cover */
.fj-sheet { position: relative; padding: var(--sp-3) var(--sp-4); }

/* ===================================================================== aged parchment for the shared system
   (quest log detail pane, tooltips, lore pages, parch panels): same structure, older paper */
.ui-panel--parch { background: var(--grain), linear-gradient(176deg, #fffaf0 0%, #f6edd8 100%);
  box-shadow: var(--shadow-2), inset 0 0 0 2px rgba(255, 255, 255, 0.9); border-color: rgba(31, 42, 74, 0.14); }

/* ===================================================================== BRAND: compass-lantern mark + wordmark */
.hb-mark { display: inline-block; width: 1em; height: 1em; overflow: visible; color: var(--mark-ink, var(--ink)); }
.hb-mark .mk-bezel { stroke: currentColor; }
.hb-mark .mk-lt { fill: var(--mark-lt, #f3e7c9); stroke: currentColor; stroke-width: 0.7; stroke-linejoin: round; }
.hb-mark .mk-dk { fill: currentColor; stroke: currentColor; stroke-width: 0.7; stroke-linejoin: round; }
.hb-mark .mk-hub { fill: var(--mark-lt, #f3e7c9); stroke: currentColor; stroke-width: 1.1; }
.hb-mark .mk-ink { fill: currentColor; stroke: currentColor; }
.hb-mark .mk-glass { fill: var(--mark-glass, #f6d48a); stroke: currentColor; stroke-width: 0.9; }
.hb-mark .mk-flame { fill: var(--mark-flame, #c8442a); }
.hb-mark .mk-n { font-family: var(--font-print); font-size: 7.4px; fill: currentColor; }
.hb-mark--brass { --mark-ink: #4a3516; --mark-lt: #f2d991; --mark-glass: #fff1c4; --mark-flame: #e0682f; filter: drop-shadow(0 1px 0 rgba(255, 240, 200, 0.5)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45)); }
.hb-mark--light { --mark-ink: #f2e6c8; --mark-lt: transparent; --mark-glass: #ffd98a; --mark-flame: #ff9a4a; }
.hb-wordmark { text-align: center; color: var(--ink); }
.hb-kicker { display: flex; align-items: center; justify-content: center; gap: 0.75em; font-family: var(--font-display); font-weight: 900; font-size: clamp(0.7rem, 1.05vw, 0.95rem); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.hb-kicker i { width: 0.42em; height: 0.42em; background: var(--vermilion); transform: rotate(45deg); flex: none; margin-right: -0.2em; }
.hb-word { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 900; font-size: clamp(3rem, 6.4vw, 6.2rem); line-height: 1; letter-spacing: 0.02em; color: var(--ink); margin: 0.12em 0 0.06em; text-shadow: 0 0 0.02em rgba(31, 42, 74, 0.372), 0 0.03em 0 rgba(255, 248, 230, 0.6);
  -webkit-mask: var(--grain-mask) 0 0 / 160px 160px, linear-gradient(#000, #000); -webkit-mask-composite: source-over; }
.hb-word span { display: inline-block; }
.hb-word .hb-o { width: 0.9em; height: 0.9em; margin: 0 0.04em 0 0.02em; --mark-ink: var(--vermilion-d); --mark-lt: #f6ead0; --mark-flame: #d4502c; transform: rotate(-8deg); animation: hb-spin-in 2.2s var(--ease-out) both; }
@keyframes hb-spin-in { from { transform: rotate(-200deg); opacity: 0; } 60% { opacity: 1; } }
.hb-sub { display: flex; align-items: center; justify-content: center; gap: 0.8em; font-family: var(--font-hand); font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.6rem); color: var(--vermilion-d); }
.hb-sub i { flex: 0 1 3.4rem; height: 1px; background: currentColor; opacity: 0.5; }
.hb-tag { margin-top: 0.4rem; font-family: var(--font-prose); font-style: italic; font-size: clamp(0.95rem, 1.25vw, 1.15rem); color: var(--ink-soft); }

/* ===================================================================== TITLE (round 4): the Pokémon logo over a bright harbor morning
   Left: the lockup (brand.js logoLockupHtml). Right: the Harbor Log, a rounded paper card that keeps the
   journal's ruled lines, margin rule, hand-written entries and stamp; the save-slot pages render inside it. */
/* the scene: one 640×427 woodblock-print key art in two pixel layers (assets/ui/title/), scaled to cover with crisp
   pixels. The frame is a box with the art's aspect ratio, so the accents sit in the art's own percent coordinates.
   It overscans by 6% and anchors low-left of centre, so Grandma's ship stays in view from 1920 wide down to phones. */
#title-scene.hb4 { background: linear-gradient(180deg, #3f86c4 0%, #9cc6d9 30%, #f3e2b0 55%, #6d93a6 75%, #7a6a52 100%); }
#title-scene.hb4 .h4-scene { position: absolute; inset: 0; }
#title-scene.hb4 .h5-art { --w: max(106vw, 158.9vh); --h: calc(var(--w) * 0.6672); position: absolute; width: var(--w); height: var(--h); left: calc((100vw - var(--w)) * 0.42); top: calc((100vh - var(--h)) * 0.72); }
#title-scene.hb4 .h5-ly { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; pointer-events: none; transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
#title-scene.hb4 .h5-back, #title-scene.hb4 .h5-glints { transform: translate3d(calc(var(--px, 0) * -5px), calc(var(--py, 0) * -3px), 0); }
#title-scene.hb4 .h5-front, #title-scene.hb4 .h5-fx { transform: translate3d(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -5px), 0); }
/* sun glints on the bay: short cream strokes that wink in turn */
#title-scene.hb4 .h5-glints i { position: absolute; width: 1.1%; height: 0.35%; margin-left: -0.55%; background: #fff6d8; opacity: 0; animation: h5-glint 4.2s steps(4, end) infinite; }
#title-scene.hb4 .h5-glints i:nth-child(2n) { width: 0.7%; animation-duration: 5.4s; }
@keyframes h5-glint { 0%, 55%, 100% { opacity: 0; } 70% { opacity: 0.9; } 85% { opacity: 0.35; } }
/* paper lanterns: a warm glow that breathes; chimney smoke: two puffs rising and fading */
#title-scene.hb4 .h5-fx i { position: absolute; width: 2.4%; aspect-ratio: 1; margin: -1.2% 0 0 -1.2%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 140, 0.55), rgba(255, 190, 110, 0) 70%); animation: ts-flicker 3.4s ease-in-out infinite; }
#title-scene.hb4 .h5-smoke { position: absolute; width: 1.3%; aspect-ratio: 1; margin-left: -0.65%; border-radius: 50%; background: rgba(236, 228, 212, 0.55); opacity: 0; animation: h5-smoke 7s linear infinite; }
#title-scene.hb4 .h5-smoke.s2 { animation-delay: -3.5s; }
@keyframes h5-smoke { 0% { transform: translate(0, 0) scale(0.6); opacity: 0; } 15% { opacity: 0.7; } 100% { transform: translate(140%, -420%) scale(2.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #title-scene.hb4 * { animation: none !important; transition: none !important; } #title-scene.hb4 .h5-glints, #title-scene.hb4 .h5-smoke { display: none; } }

#login.screen.tb-on { display: grid; place-items: center; background: none; padding: 2rem 1.2rem 2.6rem; overflow: hidden; }
.tb-book { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1rem, 3vw, 4rem); align-items: center; width: min(80rem, 96vw); height: min(44rem, calc(100vh - 4.6rem)); z-index: 2; }
.tb-book::before, .tb-book::after { content: none; }
.tb-page { position: relative; min-height: 0; display: flex; flex-direction: column; }
/* the brand side is not a page any more: the lockup floats over the sky */
.tb-page.tb-l { align-items: center; justify-content: center; padding: 0; height: 100%; animation: h4-rise 0.9s var(--ease-pop) both; }
.tb-page.tb-l::before { content: none; }
/* the Harbor Log card */
.tb-page.tb-r { height: 100%; padding: 1.6rem 1.9rem 1.3rem; filter: drop-shadow(0 0.9rem 1.6rem rgba(20, 50, 110, 0.32)) drop-shadow(0 2px 2px rgba(20, 40, 90, 0.18)); animation: h4-card 0.8s 0.15s var(--ease-pop) both; }
.tb-page.tb-r::before { -webkit-mask-box-image: none; border-radius: var(--r-xl); background: var(--grain), linear-gradient(180deg, #fffdf6, #f8f0dc); box-shadow: inset 0 0 0 3px #fff, inset 0 0.55rem 0 var(--poke-blue), inset 0 0 0 5px rgba(59, 114, 217, 0.18); }
.tb-page.tb-r::after { content: none; }
.tb-r .ts-log h2, #login.tb-on .ts-slots h2 { font-family: var(--font-display); font-weight: 900; letter-spacing: 0.01em; font-size: 1.4rem; color: var(--on-surface); }
@keyframes h4-rise { from { opacity: 0; transform: translateY(1.2rem) scale(0.96); } }
@keyframes h4-card { from { opacity: 0; transform: translateX(1.6rem); } }
.tb-r .ts-log { position: relative; inset: auto; right: auto; top: auto; width: auto; transform: none; padding: 0.6rem 0.6rem 0 1.6rem; animation: none; background: none; box-shadow: none; flex: 1; display: flex; flex-direction: column; }
.tb-r .ts-log::after { background-position: 0 3.1rem; }
.tb-r .ts-log .entry { min-height: 5.5rem; }
.tb-r .ts-log .small { margin-top: auto; padding-top: 0.6rem; }
#login.tb-on .ts-slots.ts-log { position: absolute; inset: 1.6rem 1.7rem 1.1rem 2.6rem; width: auto; max-height: none; transform: none; padding: 0 0 0 0.3rem; background: none; box-shadow: none; animation: tb-page-in 0.6s var(--ease-out) both; }
@keyframes tb-page-in { from { opacity: 0; transform: translateX(0.6rem); } }
#login.tb-on.is-slots .tb-r > .ts-log:not(.ts-slots) { display: none; }
#login.tb-on .ts-slots .sp-tape { display: none; }
/* index tabs sticking out of the card's right edge: Settings (yellow) / Credits (blue) */
.tb-tabs { position: absolute; right: -2.7rem; top: 3.4rem; display: flex; flex-direction: column; gap: 0.5rem; z-index: -1; }
.tb-tabs .tb-tab { all: unset; cursor: pointer; width: 2.9rem; padding: 0.95rem 0 0.95rem 0.6rem; writing-mode: vertical-rl; font-family: var(--font-display); font-weight: 900; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: #1f2a4a; border-radius: 0 0.9rem 0.9rem 0; background: linear-gradient(90deg, #f0b800, var(--poke-yellow) 30%, #ffe066); box-shadow: 3px 3px 0 rgba(20, 40, 90, 0.18); transition: transform var(--t-fast) var(--ease-pop); }
.tb-tabs .tb-tab:nth-child(2) { color: #fff; background: linear-gradient(90deg, #2a52a8, var(--poke-blue) 30%, #5a8ff0); }
.tb-tabs .tb-tab:hover, .tb-tabs .tb-tab:focus-visible { transform: translateX(0.4rem); outline: none; }
.tb-tabs .tb-tab:focus-visible { box-shadow: 3px 3px 0 rgba(20, 40, 90, 0.18), 0 0 0 3px #fff; }
#login.tb-on .credit { position: absolute; left: 0; right: 0; bottom: 0.55rem; z-index: 3; font-size: 0.7rem; font-weight: 700; color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 2px rgba(10, 40, 80, 0.7); text-align: center; padding: 0 1rem; }
.tb-credits { position: absolute; inset: 1.6rem 1.7rem 1.2rem 2.6rem; z-index: 5; font-family: var(--font-prose); font-size: 1.02rem; line-height: 1.45; color: var(--ink); display: none; overflow: auto; }
#login.show-credits .tb-credits { display: block; animation: tb-page-in 0.5s var(--ease-out) both; }
#login.show-credits .tb-r > :not(.tb-credits) { visibility: hidden; }
#login.show-credits .tb-r > .tb-tabs { visibility: visible; }
.tb-credits h3 { font-family: var(--font-display); font-weight: 900; font-size: 1.35rem; margin: 0 0 0.4rem; letter-spacing: 0.01em; }
.tb-credits p { margin: 0 0 0.55rem; }

/* ---------- the lockup */
.hb4-logo { --lw: clamp(17rem, 34vw, 40rem); position: relative; display: flex; flex-direction: column; align-items: center; width: var(--lw); text-align: center; }
.hb4-poke { display: block; width: 100%; height: auto; filter: drop-shadow(0 0.35rem 0 rgba(20, 50, 120, 0.25)) drop-shadow(0 0.8rem 1.4rem rgba(20, 50, 120, 0.25)); animation: h4-logo 0.9s var(--ease-pop) both; user-select: none; }
@keyframes h4-logo { from { opacity: 0; transform: translateY(-1rem) scale(0.9); } }
.hb4-md { position: relative; isolation: isolate; margin-top: calc(var(--lw) * -0.02); font-family: var(--font-logo); font-weight: 400; font-size: calc(var(--lw) * 0.112); line-height: 1.05; letter-spacing: 0.015em; color: transparent; white-space: nowrap; animation: h4-rise 0.8s 0.25s var(--ease-pop) both; }
.hb4-md::before, .hb4-md::after, .hb4-word::before, .hb4-word::after { content: attr(data-t); position: absolute; inset: 0; pointer-events: none; }
.hb4-md::before { z-index: 0; color: #1d3a80; -webkit-text-stroke: 0.2em #1d3a80; text-shadow: 0 0.09em 0 #10245a, 0 0.2em 0.25em rgba(10, 30, 80, 0.35); }
.hb4-md::after { z-index: 1; background: linear-gradient(180deg, #fffbe2 8%, #ffe04a 45%, #ffb21e 78%, #ff8f1a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hb4-sub { position: relative; display: flex; align-items: center; justify-content: center; margin-top: calc(var(--lw) * 0.028); animation: h4-rise 0.8s 0.45s var(--ease-pop) both; }
.hb4-ribbon { position: relative; display: inline-block; padding: 0.12em 1.1em 0.18em 1.9em; margin-left: -1.3em; font-size: calc(var(--lw) * 0.082); line-height: 1; border-radius: 0.3em; background: linear-gradient(180deg, #5a8ff0, var(--poke-blue) 55%, #2a58b8); box-shadow: inset 0 0 0 0.06em #ffe36e, inset 0 0 0 0.1em #2a52a8, 0 0.08em 0 #1d3a80, 0 0.2em 0.4em rgba(10, 30, 80, 0.3); }
.hb4-ribbon::before, .hb4-ribbon::after { content: ''; position: absolute; top: 0.32em; width: 0.7em; height: 100%; background: #2a52a8; z-index: -1; }
.hb4-ribbon::before { left: -0.42em; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0.3em 50%); }
.hb4-ribbon::after { right: -0.42em; clip-path: polygon(0 0, 100% 0, calc(100% - 0.3em) 50%, 100% 100%, 0 100%); }
.hb4-word { position: relative; isolation: isolate; display: inline-block; font-family: var(--font-logo); color: transparent; letter-spacing: 0.04em; }
.hb4-word::before { z-index: 0; color: #10245a; -webkit-text-stroke: 0.14em #10245a; }
.hb4-word::after { z-index: 1; color: #fff; }
.hb4-medal { position: relative; z-index: 2; display: grid; place-items: center; width: calc(var(--lw) * 0.15); height: calc(var(--lw) * 0.15); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff9e0, #ffe48a 55%, #f0b800); box-shadow: 0 0 0 0.22rem #fff, 0 0 0 0.42rem var(--poke-blue), 0 0.3rem 0.6rem rgba(10, 30, 80, 0.35); }
.hb4-medal .hb-mark { width: 84%; height: 84%; animation: hb-spin-in 2.2s var(--ease-out) both; }
.hb4-fan { margin-top: calc(var(--lw) * 0.02); font-family: var(--font-hand); font-weight: 700; font-size: calc(var(--lw) * 0.05); color: #1d3a80; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); transform: rotate(-2deg); animation: h4-rise 0.8s 0.6s var(--ease-pop) both; }
.hb4-tag { margin-top: 0.3rem; padding: 0.3em 1.1em; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.82); font-family: var(--font-prose); font-style: italic; font-weight: 500; font-size: calc(var(--lw) * 0.036); color: #1f2a4a; box-shadow: var(--shadow-1); animation: h4-rise 0.8s 0.7s var(--ease-pop) both; }
@keyframes hb-spin-in { from { transform: rotate(-200deg); opacity: 0; } 60% { opacity: 1; } }

/* narrow / portrait: the lockup shrinks to a header over the card */
@media (max-width: 860px), (orientation: portrait) {
  #login.screen.tb-on { padding: 0.8rem 0.7rem 2.6rem; place-items: stretch; }
  .tb-book { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 0.6rem; width: 100%; height: calc(100vh - 3.4rem); }
  .tb-page.tb-l { height: auto; }
  .hb4-logo { --lw: min(19rem, 78vw); }
  .hb4-tag { display: none; }
  .tb-page.tb-r { padding: 1rem 1.1rem; }
  .tb-tabs { right: auto; left: 1rem; top: auto; bottom: -2.4rem; flex-direction: row; z-index: 3; }
  .tb-tabs .tb-tab { writing-mode: horizontal-tb; padding: 0.4rem 0.9rem 0.5rem; width: auto; border-radius: 0 0 0.8rem 0.8rem; }
  #login.tb-on .ts-slots.ts-log { inset: 1rem 0.7rem 0.6rem 1.7rem; }
  #login.tb-on .credit { display: none; }
}
@media (max-height: 560px) and (orientation: landscape) { .hb4-tag, .hb4-fan { display: none; } }
/* the starter journal shares the book: aged pages, same cover */
#starter.screen { background: transparent; }
#starter .sp-journal .page.l, #starter .sp-journal .page.r { background: var(--grain), var(--fibers), linear-gradient(90deg, #efe2c0 0%, var(--fj-paper) 7%, #fbf3df 92%, #efe2c0 100%); box-shadow: inset 0 0 1.6rem rgba(160, 120, 60, 0.12); }
#starter .sp-journal::before { background: var(--cover-bg); border-radius: var(--r-lg); box-shadow: var(--cover-shadow); }
#starter .sp-journal .page.l { border-radius: var(--r-md) 4px 4px var(--r-md); } #starter .sp-journal .page.r { border-radius: 4px var(--r-md) var(--r-md) 4px; }
/* chapter card: the compass-lantern mark replaces the 港 seal */
.sp-chapter .sp-chapter-mark { display: inline-block; width: 3.4rem; height: 3.4rem; margin-top: 1.4rem; animation: sp-seal-drop 500ms 1.6s var(--ease-back) both; }
.sp-chapter .sp-chapter-mark .hb-mark { width: 100%; height: 100%; }
.c-title .c-mark { display: inline-block; width: 2.9rem; height: 2.9rem; flex: none; }
.c-title .c-mark .hb-mark { width: 100%; height: 100%; }
.tb-r .tb-stamp { position: absolute; right: 2.2rem; top: 15.5rem; font-size: 1.05rem; text-align: center; --r: -9deg; opacity: 0.42; line-height: 1.15; padding: 0.4em 0.8em; }
.tb-r .tb-stamp small { font-size: 0.62em; letter-spacing: 0.2em; }
.tb-r .tb-fern { left: 3.4rem; top: 15rem; --r: 58deg; width: 2.6rem; height: 7rem; opacity: 0.7; }
@media (max-width: 860px), (orientation: portrait) { .tb-r .tb-stamp, .tb-r .tb-fern { display: none; } }