/* style.css — Perpetūra */ /* Fonts are loaded from index.html (preconnect + ), NOT @import — an @import here serializes font discovery behind this file's download+parse. Keep the family list in index.html in sync if fonts ever change (house rule: Cinzel / Crimson Pro / Raleway only). */ /* ── RESET & BASE ────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --gold: #c9a96e; --gold-bright: #ddb87a; --gold-dim: rgba(201,169,110,0.5); --gold-faint: rgba(201,169,110,0.15); --bg: #0d0a09; --bg-mid: #111009; --text: #e2d4bc; --text-dim: #c8b898; --text-faint: #907860; --border: rgba(201,169,110,0.28); --border-hover:rgba(201,169,110,0.65); } html, body { height: 100%; background: #0d0a09; color: var(--text); font-family: 'Crimson Pro', serif; overflow-x: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } input, textarea, [contenteditable] { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } /* ── THEMED SCROLLBARS ─────────────────────────────────────────────────────── Replace the default OS scrollbar everywhere with a thin gold-on-dark bar so scroll containers (codex sections, about panel, etc.) match the theme. */ * { scrollbar-width: thin; scrollbar-color: rgba(201,169,110,0.35) transparent; } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(201,169,110,0.32); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(201,169,110,0.55); background-clip: content-box; } ::-webkit-scrollbar-corner { background: transparent; } /* ── SCENE BACKGROUNDS ───────────────────────────────────────────────────── */ /* Gradients are painted on body::before so they can cross-fade properly. Browsers can't tween radial-gradient values directly, but they can fade opacity — so we layer the gradient on a pseudo-element and animate that. */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s ease, background 0s 1.4s; /* fade out, then swap */ background: transparent; } /* Each scene fades the overlay in with its gradient */ body[data-scene="prologue"]::before { opacity: 1; transition: opacity 1.4s ease; background: radial-gradient(ellipse at 60% 100%, rgba(90,60,20,0.18) 0%, transparent 65%), radial-gradient(ellipse at 20% 0%, rgba(40,30,15,0.25) 0%, transparent 60%); } body[data-scene="hyunjae"]::before { opacity: 1; transition: opacity 1.4s ease; background: radial-gradient(ellipse at 15% 95%, rgba(120,80,20,0.22) 0%, transparent 55%), radial-gradient(ellipse at 85% 5%, rgba(30,40,65,0.38) 0%, transparent 60%), radial-gradient(ellipse at 50% 50%, rgba(20,15,10,0.4) 0%, transparent 80%); } body[data-scene="codex"]::before { opacity: 1; transition: opacity 1.4s ease; background: radial-gradient(ellipse at 50% 40%, rgba(100,75,25,0.15) 0%, transparent 60%), radial-gradient(ellipse at 80% 90%, rgba(60,40,10,0.12) 0%, transparent 50%); } body[data-scene="stories"]::before { opacity: 1; transition: opacity 1.4s ease; background: radial-gradient(ellipse at 50% 100%, rgba(40,35,25,0.2) 0%, transparent 60%); } /* title scene: overlay fades back to transparent (no gradient) */ body[data-scene="title"]::before { opacity: 0; transition: opacity 1.4s ease; } /* ── SCENE BACKGROUND IMAGES ──────────────────────────────────────────────── */ /* Photographic backgrounds behind all content. Each scene gets its own image shown at low opacity through a heavy dark overlay, adding atmospheric depth without hurting text readability. Driven by body[data-scene] — no JS needed. */ #scene-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-size: cover; background-position: center; background-repeat: no-repeat; } #scene-bg::before { content: ''; position: absolute; inset: 0; pointer-events: none; } /* Title — celestial nebula (Atlas build); light wash so the stars + bg read */ body[data-scene="title"] #scene-bg { background-image: url('images/backgrounds/title-bg.webp'); } body[data-scene="title"] #scene-bg::before { background: radial-gradient(ellipse 62% 62% at 50% 44%, rgba(5,6,14,.35), rgba(5,6,14,.05) 55%, rgba(5,6,14,.5)), linear-gradient(to top, rgba(5,6,14,.75), transparent 30%), linear-gradient(to bottom, rgba(5,6,14,.6), transparent 24%); } /* Prologue — same cosmic ground, heavier wash for reading */ body[data-scene="prologue"] #scene-bg { background-image: url('images/backgrounds/title-bg.webp'); } body[data-scene="prologue"] #scene-bg::before { background: linear-gradient(180deg, rgba(5,6,14,.86) 0%, rgba(5,6,14,.8) 50%, rgba(5,6,14,.88) 100%); } /* Stories */ body[data-scene="stories"] #scene-bg { background-image: url('images/backgrounds/stories-bg.webp'); } body[data-scene="stories"] #scene-bg::before { background: linear-gradient(180deg, rgba(5,6,14,.82) 0%, rgba(5,6,14,.6) 40%, rgba(5,6,14,.86) 100%); } /* Codex */ body[data-scene="codex"] #scene-bg { background-image: url('images/backgrounds/codex-bg.webp'); } body[data-scene="codex"] #scene-bg::before { background: linear-gradient(180deg, rgba(5,6,14,.85) 0%, rgba(5,6,14,.72) 40%, rgba(5,6,14,.88) 100%); } /* Atlas — celestial dome backdrop (the map chart itself lives inside the screen, on its own atlas-bg.webp; this is the screen behind that panel) */ body[data-scene="atlas"] #scene-bg { background-image: url('images/backgrounds/atlas-screen-bg.webp'); } body[data-scene="atlas"] #scene-bg::before { background: linear-gradient(180deg, rgba(5,6,14,.75) 0%, rgba(5,6,14,.55) 40%, rgba(5,6,14,.8) 100%); } /* About — the Atlas celestial dome, reusing the Atlas backdrop (no new asset, so no added zip weight) under the HEAVIEST wash in the shell. About is the most text-dense screen here (long-form body copy at 18px), so it needs more cover than Atlas's .75/.55/.8, which is tuned for a map panel. Before this it inherited the title scene's .35-at-centre wash by accident. */ body[data-scene="about"] #scene-bg { background-image: url('images/backgrounds/atlas-screen-bg.webp'); } body[data-scene="about"] #scene-bg::before { background: linear-gradient(180deg, rgba(5,6,14,.88) 0%, rgba(5,6,14,.78) 40%, rgba(5,6,14,.9) 100%); } /* Violet at the dome, gold at the foot — the Atlas build's own pairing, and the same violet the About panels already use (.about-section--violet). */ body[data-scene="about"]::before { opacity: 1; transition: opacity 1.4s ease; background: radial-gradient(ellipse at 50% 6%, rgba(140,130,200,0.10) 0%, transparent 55%), radial-gradient(ellipse at 50% 100%, rgba(100,75,25,0.12) 0%, transparent 60%); } /* Mobile background variants (single 640px breakpoint) */ @media (max-width: 640px) { body[data-scene="title"] #scene-bg, body[data-scene="prologue"] #scene-bg { background-image: url('images/backgrounds/title-bg-mobile.webp'); } body[data-scene="stories"] #scene-bg { background-image: url('images/backgrounds/stories-bg-mobile.webp'); } body[data-scene="codex"] #scene-bg { background-image: url('images/backgrounds/codex-bg-mobile.webp'); } body[data-scene="atlas"] #scene-bg, body[data-scene="about"] #scene-bg { background-image: url('images/backgrounds/atlas-screen-bg-mobile.webp'); } } /* Hyunjae — misty mountains / moonlit pine forest (Joseon 1742) */ body[data-scene="hyunjae"] #scene-bg { background-image: url('images/backgrounds/hyunjae-bg.webp'); } body[data-scene="hyunjae"] #scene-bg::before { background: linear-gradient( 180deg, rgba(13,10,9,0.90) 0%, rgba(13,10,9,0.86) 40%, rgba(13,10,9,0.92) 100% ); } /* Reine — candlelit studio / Parisian warmth (Belle Époque 1893) */ body[data-scene="reine"] #scene-bg { background-image: url('images/backgrounds/reine-bg.jpg'); } body[data-scene="reine"] #scene-bg::before { background: linear-gradient( 180deg, rgba(13,10,9,0.90) 0%, rgba(13,10,9,0.86) 40%, rgba(13,10,9,0.92) 100% ); } /* Liuyan — desert dunes at dusk / Silk Road (Tang Dynasty ~750 AD) */ body[data-scene="liuyan"] #scene-bg { background-image: url('images/backgrounds/liuyan-bg.jpg'); } body[data-scene="liuyan"] #scene-bg::before { background: linear-gradient( 180deg, rgba(13,10,9,0.90) 0%, rgba(13,10,9,0.86) 40%, rgba(13,10,9,0.92) 100% ); } /* Lia — rain-blurred city window at night (modern day) */ body[data-scene="lia"] #scene-bg { background-image: url('images/backgrounds/lia-bg.jpg'); } body[data-scene="lia"] #scene-bg::before { background: linear-gradient( 180deg, rgba(13,10,9,0.90) 0%, rgba(13,10,9,0.86) 40%, rgba(13,10,9,0.92) 100% ); } /* Ophelia — dim gilded Viennese interior (Vienna 1887) */ body[data-scene="ophelia"] #scene-bg { background-image: url('images/backgrounds/ophelia-bg.jpg'); } body[data-scene="ophelia"] #scene-bg::before { background: linear-gradient( 180deg, rgba(13,10,9,0.90) 0%, rgba(13,10,9,0.86) 40%, rgba(13,10,9,0.92) 100% ); } /* Portrait phones get bespoke vertical crops of each scene so the focal detail survives (a landscape image cover-cropped to a phone loses its edges). Only the image swaps — overlay and sizing are unchanged. */ /* (Menu screens — title/prologue/stories/codex — swap to their redesign -mobile.webp art in the 640px block above. The old .jpg overrides that lived here silently beat that block on phones and kept serving the pre-redesign art — the "mobile bgs never replaced" bug.) */ @media (max-width: 500px) { body[data-scene="hyunjae"] #scene-bg { background-image: url('images/backgrounds/hyunjae-bg-mobile.webp'); } body[data-scene="reine"] #scene-bg { background-image: url('images/backgrounds/reine-bg-mobile.jpg'); } body[data-scene="liuyan"] #scene-bg { background-image: url('images/backgrounds/liuyan-bg-mobile.jpg'); } body[data-scene="lia"] #scene-bg { background-image: url('images/backgrounds/lia-bg-mobile.jpg'); } body[data-scene="ophelia"] #scene-bg { background-image: url('images/backgrounds/ophelia-bg-mobile.jpg'); } } /* ── AMBIENT PARTICLES ───────────────────────────────────────────────────── */ #stars-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 0; contain: strict; } .petal { position: fixed; width: 4px; height: 6px; background: rgba(180,150,100,0.07); border-radius: 50% 50% 50% 0; pointer-events: none; animation: fall linear infinite; z-index: 0; } @keyframes fall { from { transform: translateY(-20px) rotate(0deg); opacity: 0.3; } to { transform: translateY(110vh) rotate(360deg); opacity: 0; } } /* ── ABOUT SCREEN ────────────────────────────────────────────────────────── */ .about-box { max-width: 560px; width: 100%; } .about-content { margin-top: 0.8rem; /* Fills the space between the dial and footer; the only scroller on the About screen, so the dial + footer stay pinned and the screen never scrolls as a whole. */ flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgba(201,169,110,0.2) transparent; } .about-tab { display: none; } .about-tab.on { display: block; } .about-tab:not(.on) { display: none !important; } .about-section { margin-bottom: 1.8rem; padding-bottom: 1.4rem; border-bottom: 0.5px solid rgba(201,169,110,0.06); } .about-section:last-child { border-bottom: none; margin-bottom: 0; } .about-heading { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: rgba(201,169,110,0.8); margin-bottom: 0.9rem; } .about-body { font-family: 'Crimson Pro', serif; font-size: 18px; line-height: 1.8; color: rgba(235,225,200,0.9); margin-bottom: 0.7rem; } .about-body:last-child { margin-bottom: 0; } .about-muted { color: rgba(235,225,200,0.5); font-style: italic; } .about-highlight { color: var(--gold); letter-spacing: 1px; } /* Install (Add to Home Screen) CTA in the About screen — gold outline on the dark ground, matching the codex/icon-button vocabulary. */ .install-btn { margin-top: 0.4rem; font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); background: radial-gradient(circle at 50% 34%, #221a0e, #0f0c09 80%); border: 1px solid rgba(201,169,110,.4); border-radius: 4px; padding: 11px 18px; min-height: 44px; cursor: pointer; transition: color .25s, border-color .25s, box-shadow .25s; box-shadow: 0 4px 12px rgba(0,0,0,.45), inset 0 1px 0 rgba(201,169,110,.15); } .install-btn:hover { color: var(--gold-bright); border-color: rgba(201,169,110,.7); box-shadow: 0 4px 14px rgba(0,0,0,.5), 0 0 12px rgba(201,169,110,.12), inset 0 1px 0 rgba(201,169,110,.2); } .install-ios-hint { margin-top: 0.4rem; } .about-author { margin: 0 0 1.1rem; text-align: center; } .about-author img { display: block; width: 240px; max-width: 70%; height: auto; margin: 0 auto 0.7rem; border-radius: 6px; border: 1px solid rgba(201,169,110,0.25); box-shadow: 0 8px 28px rgba(0,0,0,0.5); } .about-author figcaption { font-family: 'Crimson Pro', serif; font-size: 18px; line-height: 1.8; color: rgba(235,225,200,0.9); } .about-link { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(184,150,96,0.4); transition: border-color 0.2s ease, opacity 0.2s ease; } .about-link:hover { border-bottom-color: var(--gold); opacity: 0.85; } .about-list { display: flex; flex-direction: column; gap: 0.8rem; } .about-item { font-family: 'Crimson Pro', serif; font-size: 17.5px; line-height: 1.75; color: rgba(235,225,200,0.85); padding-left: 0.4rem; } .about-copyright { text-align: center; padding-top: 1rem; } .about-copyright .about-body { font-family: 'Raleway', sans-serif; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: rgba(201,169,110,0.3); } .about-social-block { margin-bottom: 1.8rem; padding-bottom: 1.4rem; border-bottom: 0.5px solid rgba(201,169,110,0.06); } .about-social { display: flex; justify-content: center; gap: 0.6rem; } .about-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0.5px solid rgba(201,169,110,0.2); border-radius: 50%; color: rgba(201,169,110,0.75); transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .about-social a:hover { color: var(--gold); border-color: rgba(201,169,110,0.5); background: rgba(201,169,110,0.05); } .about-social a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .about-social svg { width: 19px; height: 19px; display: block; } .about-social-note { text-align: center; margin: 1rem 0 0; } .about-social-note a { color: var(--gold); text-decoration: none; border-bottom: 0.5px solid rgba(201,169,110,0.4); } .about-social-note a:hover { border-bottom-color: var(--gold); } /* ── About: story-updates signup (MailerLite embed) ───────────────────────── */ .updates-form { margin: 1.6rem auto 0; max-width: 420px; text-align: center; } /* ── About: glyph feature-rows (The Game tab) ───────────────────────────── */ .about-frows { display: flex; flex-direction: column; } .about-frow { display: flex; align-items: flex-start; gap: 14px; padding: 11px 0; border-bottom: 0.5px solid rgba(201,169,110,0.06); } .about-frow:last-of-type { border-bottom: none; } .about-fi { flex: 0 0 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gold-faint); display: flex; align-items: center; justify-content: center; color: var(--gold-dim); } .about-fi svg { width: 18px; height: 18px; } .about-ft { flex: 1; } .about-ftt { font-family: 'Cinzel', serif; font-size: 14px; letter-spacing: 0.4px; color: var(--gold-bright); margin-bottom: 3px; } .about-ftd { font-family: 'Crimson Pro', serif; font-size: 15px; line-height: 1.55; color: var(--text-faint); } /* ── About: framed portrait (Credits tab) ───────────────────────────────── */ .about-author-framed { position: relative; padding: 11px; margin: 0 auto 1.1rem; width: min(360px, 88%); background: linear-gradient(150deg, #1b140c, #0e0b08 72%); border: 1px solid var(--gold-dim); box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 34px rgba(201,169,110,.08); } .about-author-framed::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--gold-faint); pointer-events: none; z-index: 3; } .about-author-framed img { display: block; width: 100%; height: auto; margin: 0 auto 0; border-radius: 0; border: none; box-shadow: none; } .about-author-framed figcaption { font-family: 'Crimson Pro', serif; font-size: 14px; line-height: 1.8; color: var(--text-dim); text-align: center; margin-top: 10px; } .about-caption-name { font-family: 'Cinzel', serif; font-size: 14px; color: var(--text-dim); font-weight: 500; letter-spacing: 0.5px; } /* Corner ornaments */ .about-corner { position: absolute; width: 30px; height: 30px; z-index: 4; display: block; } .about-corner svg { width: 100%; height: 100%; overflow: visible; } .about-corner.tl { top: -3px; left: -3px; } .about-corner.tr { top: -3px; right: -3px; transform: rotate(90deg); } .about-corner.br { bottom: -3px; right: -3px; transform: rotate(180deg); } .about-corner.bl { bottom: -3px; left: -3px; transform: rotate(270deg); } /* Lead paragraph in Credits: full text color, not muted */ .about-credits-lead { color: var(--text); } /* ── FLOWCHART NODE POPUP ─────────────────────────────────────────────────── */ .flow-popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 200; display: flex; align-items: center; justify-content: center; animation: fo 0.2s ease reverse; } .flow-popup { background: #14100c; border: 0.5px solid rgba(184,150,96,0.25); max-width: 420px; width: 90%; padding: 1.4rem 1.6rem; position: relative; } .flow-popup-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; } .flow-popup-title { font-family: 'Cinzel', serif; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); line-height: 1.4; } .flow-popup-close { background: none; border: none; color: rgba(201,169,110,0.5); font-size: 16px; cursor: pointer; padding: 0 0 0 12px; line-height: 1; flex-shrink: 0; } .flow-popup-close:hover { color: var(--gold); } .flow-popup-body { font-family: 'Crimson Pro', serif; font-size: 17px; line-height: 1.75; color: rgba(235,225,200,0.85); } .flow-popup-badge { font-family: 'Raleway', sans-serif; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: rgba(201,169,110,0.5); margin-bottom: 0.8rem; } /* ── PLATFORM OVERRIDES (itch.io / GameJolt) ─────────────────────────────── */ /* Hide feedback buttons and cloud sync UI when running inside third-party iframes */ .platform-itch .screen-footer, .platform-itch #reader-fb-btn, .platform-itch #auth-btn, .platform-gamejolt .screen-footer, .platform-gamejolt #reader-fb-btn, .platform-gamejolt #auth-btn { display: none !important; } #about-feedback { display: block; } /* default visible */ .platform-itch #about-feedback, .platform-gamejolt #about-feedback { display: none !important; } /* ── UPDATE BANNER ───────────────────────────────────────────────────────── */ .update-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 200; background: rgba(20,16,12,0.95); border-bottom: 0.5px solid rgba(201,169,110,0.35); display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 16px; animation: fadeUp 0.4s ease; } .update-msg { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: rgba(201,169,110,0.8); } .update-btn { background: transparent; border: 0.5px solid rgba(201,169,110,0.5); color: #e8d090; font-family: 'Raleway', sans-serif; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; padding: 5px 14px; cursor: pointer; transition: all 0.3s; } .update-btn:hover { border-color: var(--gold); color: #f0e0c0; background: rgba(201,169,110,0.08); } .update-dismiss { background: transparent; border: none; color: rgba(201,169,110,0.35); font-size: 14px; cursor: pointer; transition: color 0.3s; padding: 0 4px; line-height: 1; } .update-dismiss:hover { color: rgba(201,169,110,0.7); } /* ── GOOGLE AUTH BUTTON ──────────────────────────────────────────────────── */ .auth-btn { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 0.9rem; background: transparent; font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: all 0.3s; padding: 7px 14px; border-radius: 2px; } .auth-btn-out { border: 0.5px solid rgba(201,169,110,0.3); color: rgba(201,169,110,0.5); } .auth-btn-out:hover { border-color: rgba(201,169,110,0.6); color: rgba(201,169,110,0.85); background: rgba(201,169,110,0.04); } .auth-btn-in { border: 0.5px solid rgba(201,169,110,0.25); color: rgba(201,169,110,0.45); } .auth-btn-in:hover { border-color: rgba(201,169,110,0.5); color: rgba(201,169,110,0.75); } .auth-avatar { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; } .auth-google-ico { width: 14px; height: 14px; flex-shrink: 0; } /* ── SCREENS ─────────────────────────────────────────────────────────────── */ .scr { display: none; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 2.5rem 2rem; position: relative; z-index: 10; } .scr.on { display: flex; animation: fadeUp 0.5s ease both; } /* ── Codex + About ───────────────────────────────────────────────────────── (The old fit-the-viewport lock — height:100dvh + overflow:hidden with an internal scroller — is gone: the v2 markup lost the flex chain that gave .about-content a bounded height, so the lock just CLIPPED anything below the fold with no way to scroll. These screens now flow and scroll with the page like Stories/Atlas, and the themed scrollbar appears only when the content actually overflows.) */ #s-codex .codex-box, #s-about .about-box { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } /* Everything except the scrolling content keeps its natural size. */ #s-codex .soft-seam, #s-about .soft-seam, #s-codex .screen-footer, #s-about .screen-footer { flex-shrink: 0; } #s-codex .screen-footer, #s-about .screen-footer { margin-top: 0.7rem; padding-top: 0.8rem; } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ── TITLE SCREEN ────────────────────────────────────────────────────────── */ .orn { font-size: 11px; letter-spacing: 7px; color: var(--gold); text-transform: uppercase; font-family: 'Raleway', sans-serif; font-weight: 300; margin-bottom: 1.4rem; opacity: 0.8; } .ttl { font-family: 'Cinzel', serif; font-size: clamp(32px, 6vw, 58px); font-weight: 600; color: #f8f0e0; text-align: center; letter-spacing: 3px; text-shadow: 0 0 50px rgba(201,169,110,0.3); } .sub { font-family: 'Crimson Pro', serif; font-size: clamp(17px, 2vw, 21px); color: rgba(201,169,110,0.75); letter-spacing: 2px; text-align: center; margin-top: 0.8rem; font-style: italic; } .divd { display: flex; align-items: center; gap: 12px; margin: 1.8rem 0; width: 240px; } .dl { flex: 1; height: 0.5px; background: linear-gradient(to right, transparent, rgba(201,169,110,0.5), transparent); } .dg { width: 5px; height: 5px; background: rgba(201,169,110,0.65); transform: rotate(45deg); } /* Continue button — shown when a story is in progress */ .mbtn-continue { border-color: rgba(201,169,110,0.55) !important; color: #f0e0c0 !important; letter-spacing: 3px !important; } .mbtn-continue::before { content: '▶ '; font-size: 9px; opacity: 0.7; } .title-credit { font-family: 'Raleway', sans-serif; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: rgba(201,169,110,0.28); text-align: center; line-height: 1.8; } .reload-btn { margin-top: 0.5rem; background: transparent; border: none; font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: rgba(201,169,110,0.25); cursor: pointer; transition: color 0.3s; padding: 4px 8px; } .reload-btn:hover { color: rgba(201,169,110,0.6); } /* ── PROLOGUE (reader-coherent: same header chrome + reading column) ─────── */ #s-prologue.on { display: block; padding: 12px 0 0; animation: fadeUp 0.5s ease both; } .pro-area { max-width: 560px; } .ptxt { font-family: 'Crimson Pro', serif; font-size: 20px; line-height: 2.05; color: #ddd0b8; font-weight: 400; text-align: center; min-height: 80px; } .pchoices { display: flex; flex-direction: column; gap: 10px; margin-top: 2rem; } .pcbtn { display: flex; align-items: center; gap: 12px; background: rgba(13,16,34,0.55); border: 1px solid rgba(201,169,110,0.28); color: #d0c0a0; font-family: 'Crimson Pro', serif; font-size: 18px; padding: 10px 14px; cursor: pointer; transition: border-color 0.3s, background 0.3s; text-align: left; line-height: 1.4; } .pcbtn:hover { border-color: var(--border-hover); color: #eeddc0; background: rgba(201,169,110,0.07); } .pcbtn-thumb { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 3px; background-size: cover; background-position: center top; filter: saturate(0.85); transition: filter 0.3s; } .pcbtn:hover .pcbtn-thumb { filter: saturate(1.05) brightness(1.08); } .pcbtn.locked .pcbtn-thumb { filter: grayscale(1) brightness(0.5); } .pcbtn-label { flex: 1 1 auto; font-size: 15px; } .pro-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 2.2rem; } .pro-skip-btn { background: transparent; border: none; font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: 3px; color: rgba(201,169,110,0.38); text-transform: uppercase; cursor: pointer; transition: color 0.3s; padding: 0; } .pro-skip-btn:hover { color: rgba(201,169,110,0.75); } .screen-footer { display: flex; justify-content: flex-end; align-items: center; margin-top: 2.4rem; padding-top: 1.4rem; border-top: 0.5px solid rgba(201,169,110,0.08); } .screen-footer--icons { justify-content: flex-end; } .back { font-family: 'Raleway', sans-serif; font-size: 11px; letter-spacing: 3px; color: #7a6a55; text-transform: uppercase; cursor: pointer; border: none; background: transparent; transition: color 0.3s; display: block; } .back:hover { color: var(--gold); } /* ── Screen-footer icon buttons (back / feedback) ── */ .icon-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(201,169,110,.35); background: radial-gradient(circle at 50% 34%, #221a0e, #0f0c09 80%); display: flex; align-items: center; justify-content: center; color: rgba(201,169,110,.6); box-shadow: 0 4px 12px rgba(0,0,0,.45), 0 0 10px rgba(201,169,110,.08), inset 0 1px 0 rgba(201,169,110,.15); cursor: pointer; transition: transform .25s ease, border-color .25s, box-shadow .25s, color .25s; flex-shrink: 0; } .icon-btn:hover { transform: scale(1.1); border-color: var(--gold-bright); color: var(--gold-bright); box-shadow: 0 6px 18px rgba(0,0,0,.5), 0 0 20px rgba(201,169,110,.28), inset 0 1px 0 rgba(201,169,110,.25); } .icon-btn:focus-visible { outline: 1.5px solid rgba(201,169,110,.55); outline-offset: 3px; } /* ── DIALOGS (celestial HUD panel — every showConfirm popup shares this) ── */ .confirm-dialog { position: fixed; inset: 0; z-index: 95; background: rgba(5,6,13,0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 1.5rem; animation: fadeUp 0.2s ease; } .confirm-box { position: relative; max-width: 380px; width: 100%; border: 1px solid rgba(201,169,110,0.35); border-radius: 0; background: linear-gradient(150deg, rgba(20,23,46,0.97), rgba(11,13,28,0.97)); box-shadow: 0 18px 60px rgba(0,0,0,.6), 0 0 40px rgba(201,169,110,.06); padding: 2.4rem 2rem; text-align: center; } /* Corner ticks — the house framing device, pseudo-elements so showConfirm's markup stays untouched. */ .confirm-box::before { content: ''; position: absolute; top: -1px; left: -1px; width: 12px; height: 12px; border-top: 2px solid var(--gold-bright, #ddb87a); border-left: 2px solid var(--gold-bright, #ddb87a); } .confirm-box::after { content: ''; position: absolute; bottom: -1px; right: -1px; width: 12px; height: 12px; border-bottom: 2px solid var(--gold-bright, #ddb87a); border-right: 2px solid var(--gold-bright, #ddb87a); } .confirm-msg { font-family: 'Crimson Pro', serif; font-size: 18px; color: rgba(230,220,200,0.85); line-height: 1.85; margin-bottom: 2.2rem; } .confirm-msg strong { color: var(--gold-hi, #f0e6d0); font-weight: 500; } .confirm-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .confirm-yes { background: transparent; border: 1px solid rgba(201,169,110,0.5); color: var(--gold-bright, #ddb87a); font-family: 'Raleway', sans-serif; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; padding: 11px 24px; cursor: pointer; transition: all 0.3s; border-radius: 999px; } .confirm-yes:hover { border-color: var(--gold-bright, #ddb87a); color: var(--gold-hi, #f0e6d0); background: rgba(201,169,110,0.1); } .confirm-no { background: transparent; border: none; color: rgba(230,220,200,0.45); font-family: 'Raleway', sans-serif; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; padding: 11px 24px; cursor: pointer; transition: color 0.3s; } .confirm-no:hover { color: var(--gold-bright, #ddb87a); } .confirm-cancel { background: transparent; border: none; color: rgba(230,220,200,0.35); font-family: 'Raleway', sans-serif; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; padding: 11px 24px; cursor: pointer; transition: color 0.3s; width: 100%; margin-top: 4px; } .confirm-cancel:hover { color: rgba(230,220,200,0.7); } .resume-btns { display: flex; flex-direction: column; gap: 8px; align-items: center; } .resume-btns .confirm-yes, .resume-btns .confirm-no, .resume-btns .confirm-cancel { width: 200px; } /* ── STORIES SCREEN ──────────────────────────────────────────────────────── */ .stories-box { max-width: 640px; width: 100%; text-align: center; } .ccard { border: 0.5px solid var(--border); padding: 18px 14px; cursor: pointer; transition: all 0.35s; text-align: center; background: rgba(13,10,9,0.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .ccard:hover:not(.sealed) { border-color: var(--border-hover); background: rgba(13,10,9,0.72); transform: translateY(-2px); } .ccard.sealed { cursor: default; } /* ── Cast-photo story cards (single-column stack) ─────────────────────────── */ /* The cast photo fills the top of the card and fades into a solid text band below, so the title/era/progress never sit over a face — robust even for the busy five-person group shots. */ .ccard-cast { padding: 0; overflow: hidden; text-align: left; display: flex; flex-direction: column; background: #0d0a09; } /* Photo region matches the source art's ~5:4 ratio, so the group shots show (almost) uncropped instead of being sliced by a fixed landscape height. */ .cast-photo { position: relative; width: 100%; aspect-ratio: 5 / 4; overflow: hidden; } .cast-img { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center top; transition: transform 0.6s ease, filter 0.35s ease; } .cast-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(13,10,9,0) 0%, rgba(13,10,9,0.5) 60%, rgba(13,10,9,0.92) 88%, #0d0a09 100%); } .cast-body { width: 100%; padding: 16px 22px 20px; background: #0d0a09; } .ccard-cast:hover:not(.sealed) .cast-img { transform: scale(1.04); filter: brightness(1.08); } .ccard-cast .enm { font-size: 18px; letter-spacing: 2.5px; margin-bottom: 7px; } .ccard-cast .edsc { display: block; } .ccard-cast .story-desc { color: #8a7860; } .ccard-cast .story-action-row { margin-top: 8px; } /* Coming-soon: desaturated, dimmed, not clickable */ .ccard-cast.sealed { opacity: 1; } .ccard-cast.sealed .cast-img { filter: grayscale(1) brightness(0.42); } .ccard-cast.sealed .seal-lbl { margin-top: 9px; } .ccard.completed { border-color: rgba(201,169,110,0.32); } .ccard.completed:hover { border-color: rgba(201,169,110,0.65); } .eico { font-size: 22px; margin-bottom: 10px; } .story-icon-img { width: 48px; height: 48px; object-fit: contain; display: block; margin: 0 auto 10px; } .sealed-ico { opacity: 0.2; } .enm { font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 2px; color: #ddb87a; display: block; margin-bottom: 5px; } .sealed-nm { color: #3a3028; } .edsc { font-family: 'Crimson Pro', serif; font-size: 15px; color: #9a8868; line-height: 1.5; } .story-desc { font-family: 'Crimson Pro', serif; font-size: 14px; color: #786858; margin-top: 7px; line-height: 1.5; } .seal-lbl { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #5a4e3a; margin-top: 7px; display: block; } .pbar-wrap { margin-top: 10px; height: 1.5px; background: rgba(201,169,110,0.12); border-radius: 2px; overflow: hidden; } .pbar { height: 100%; background: rgba(201,169,110,0.65); border-radius: 2px; transition: width 0.7s ease; } .pct-lbl { font-family: 'Raleway', sans-serif; font-size: 10px; color: #6a5a48; margin-top: 3px; text-align: right; } .prog-hint { font-family: 'Raleway', sans-serif; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #5a4e3a; margin-top: 1.4rem; text-align: center; } .completed-badge { display: inline-block; font-family: 'Raleway', sans-serif; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: rgba(201,169,110,0.6); margin-top: 7px; } .story-action-row { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; } .story-action-lbl { font-family: 'Raleway', sans-serif; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: rgba(201,169,110,0.5); } /* ── CODEX SCREEN ────────────────────────────────────────────────────────── */ .codex-box { max-width: 560px; width: 100%; } .codex-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; } .codex-list { display: flex; flex-direction: column; gap: 9px; max-height: 55vh; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgba(201,169,110,0.2) transparent; } .centry { border: 0.5px solid var(--gold-faint); padding: 15px 18px; transition: all 0.3s; background: rgba(13,10,9,0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .centry.open:hover { border-color: rgba(201,169,110,0.4); background: rgba(13,10,9,0.68); } .centry.sealed-e { opacity: 0.45; } .entry-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .etitle { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 2px; color: #f0d898; flex: 1; line-height: 1.5; } .etitle.st { color: #5a4e3a; } .etag { font-family: 'Raleway', sans-serif; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: #7a7060; white-space: nowrap; } .etag.ul { color: rgba(201,169,110,0.75); } .ebody { margin-top: 11px; font-size: 17px; color: #cfc0a0; line-height: 1.8; } .ehint { margin-top: 7px; font-size: 15px; color: #7a6a52; line-height: 1.6; } /* ── Soundtrack tab: track rows (reuses .centry/.etitle/.etag as the shell) ── */ .st-row { display: flex; flex-direction: column; gap: 10px; } .st-controls { display: flex; gap: 8px; align-items: center; } .st-play-btn { min-width: 5.5rem; } .st-intimate-toggle { min-width: 5.5rem; opacity: 0.75; } .st-intimate-toggle:hover { opacity: 1; } /* ── Character entries (Characters tab): portrait on top, text below ─────── */ .char-entry { padding: 0; overflow: hidden; flex-shrink: 0; } .char-portrait { width: 100%; height: 440px; background-size: cover; background-position: center 15%; background-color: #0d0a09; position: relative; } /* Fade the bottom of the portrait into the text band for a clean seam. */ .char-portrait::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(to bottom, rgba(13,10,9,0) 0%, rgba(13,10,9,0.85) 100%); } .char-silhouette { display: flex; align-items: flex-end; justify-content: center; background: linear-gradient(160deg, #1c1612 0%, #0d0a09 70%); } .char-silhouette::after { display: none; } .char-silhouette svg { width: 40%; height: 78%; fill: rgba(201,169,110,0.14); } .char-body { padding: 14px 18px 16px; } .char-entry .ebody { font-size: 15px; } .veiled-block { text-align: center; padding: 2.5rem 1rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .veiled-ico { font-size: 24px; opacity: 0.2; } .veiled-msg { font-family: 'Crimson Pro', serif; font-size: 18px; color: #6a6050; line-height: 1.9; max-width: 340px; } .codex-divider { height: 0.5px; background: rgba(201,169,110,0.1); margin: 1.4rem 0; } /* ── FLOWCHART ────────────────────────────────────────────────────────────── */ /* Top-to-bottom layout. viewBox is 460×800. Rendered at full container width so nodes are always large enough to read. The codex-list has max-height:55vh with overflow-y:auto, so the tall flowchart scrolls naturally inside it. */ .flow-wrap { width: 100%; margin-top: 0.8rem; margin-bottom: 0.8rem; } .flow-wrap svg { display: block; width: 100%; /* fill the codex container — ~520px on desktop */ height: auto; /* proportional: at 520px wide → ~904px tall */ } /* Interactive story-map viewport: drag to pan, wheel/pinch to zoom. */ .flow-viewport { position: relative; width: 100%; height: 68vh; max-height: 780px; min-height: 340px; margin: 0.8rem 0; overflow: hidden; border: 0.5px solid rgba(201,169,110,0.18); border-radius: 6px; background: rgba(201,169,110,0.012); touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; } .flow-viewport.grabbing { cursor: grabbing; } .flow-pan { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; } .flow-pan svg { display: block; width: auto; height: auto; } .flow-zoom-ctrls { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; /* 10px, not 6: the buttons are 34px visual with a 44px ::before expander, so a gap under 10 makes adjacent expanders overlap and each control keeps only 34+gap of exclusive hit height (40px at gap 6). 10px makes them abut exactly -- full 44px each, WCAG 2.5.5. Grows the column 8px upward from bottom:10. */ gap: 10px; z-index: 3; } .flow-zoom-btn { width: 34px; height: 34px; padding: 0; line-height: 1; font-family: 'Cinzel', serif; font-size: 18px; color: var(--gold); background: rgba(18,16,13,0.82); border: 0.5px solid rgba(201,169,110,0.4); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; } .flow-zoom-btn:hover { background: rgba(42,35,24,0.92); border-color: var(--gold); } /* Info popover: how to read the map */ .flow-info-btn { position: absolute; top: 10px; right: 10px; z-index: 4; width: 34px; height: 34px; padding: 0; display: flex; align-items: center; justify-content: center; color: var(--gold); background: rgba(18,16,13,0.82); border: 0.5px solid rgba(201,169,110,0.4); border-radius: 50%; cursor: pointer; } .flow-info-btn:hover, .flow-info-btn.act { background: rgba(42,35,24,0.92); border-color: var(--gold); } .flow-info-btn svg { width: 18px; height: 18px; } .flow-info-btn svg circle, .flow-info-btn svg line { stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; } .flow-info-btn svg .dot { fill: currentColor; stroke: none; } /* The flowchart controls are 34px visual boxes. Give them the same invisible 44px hit area the reader header icons get, so the look is unchanged and a finger still lands. (Same idiom as .ch-header-icons .gear-btn-inline::before.) */ .flow-zoom-btn, .flow-info-btn { position: relative; } .flow-zoom-btn::before, .flow-info-btn::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; } .flow-legend { position: absolute; top: 52px; right: 10px; z-index: 5; width: 234px; max-width: calc(100% - 20px); background: rgba(14,12,10,0.97); border: 0.5px solid rgba(201,169,110,0.4); border-radius: 6px; padding: 0.85rem 0.95rem; box-shadow: 0 10px 28px rgba(0,0,0,0.55); } .flow-legend[hidden] { display: none; } .flow-legend-title { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem; } .flow-legend ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; } .flow-legend li { display: flex; gap: 0.7rem; align-items: baseline; } .flow-legend li .k { flex: 0 0 82px; color: var(--gold); font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; } .flow-legend li .k.sym { font-size: 12px; letter-spacing: 0; } .flow-legend li span:last-child { flex: 1; color: rgba(234,216,154,0.82); font-family: 'Crimson Pro', serif; font-size: 14px; line-height: 1.3; } .flow-node-visited rect { fill: rgba(201,169,110,0.13); stroke: rgba(201,169,110,0.7); stroke-width: 1; } .flow-node-visited text { fill: #ead89a; } .flow-node-sealed rect { fill: rgba(201,169,110,0.025); stroke: rgba(201,169,110,0.22); stroke-width: 0.5; } .flow-node-sealed text { fill: rgba(201,169,110,0.35); } .flow-node-unique rect { fill: rgba(201,169,110,0.08); stroke: rgba(201,169,110,0.6); stroke-width: 1; stroke-dasharray: 5 3; } .flow-node-unique.flow-node-sealed rect { fill: rgba(201,169,110,0.025); stroke: rgba(201,169,110,0.22); stroke-dasharray: 4 3; } .flow-node-unique text { fill: rgba(201,169,110,0.42); } .flow-node-unique.flow-node-visited text { fill: #ead89a; } .flow-gem { fill: rgba(201,169,110,0.65); stroke: rgba(201,169,110,0.95); stroke-width: 0.5; } .flow-edge { stroke: rgba(201,169,110,0.2); stroke-width: 1; fill: none; } .flow-edge-visited { stroke: rgba(201,169,110,0.58); stroke-width: 1.5; fill: none; } /* ── River style (Lia) — a map read as water, not a wiring diagram ──────── */ /* Streams: wider, round-capped strokes so channels read as current. */ .flow-stream { stroke: rgba(201,169,110,0.16); stroke-width: 2.5; fill: none; stroke-linecap: round; } .flow-stream-visited { stroke: rgba(221,184,122,0.6); stroke-width: 4; fill: none; stroke-linecap: round; } /* Pools (endings/epilogues — graph sinks): still water, pill-shaped. */ .flow-r-pool.flow-node-visited rect { fill: rgba(201,169,110,0.17); stroke: rgba(221,184,122,0.72); } .flow-r-pool.flow-node-sealed rect { fill: rgba(201,169,110,0.035); stroke: rgba(201,169,110,0.28); } /* Source (the wellhead — graph root): a touch brighter. */ .flow-r-source.flow-node-visited rect { stroke: rgba(221,184,122,0.9); } /* The golden mouths (the reset + the two golden endings): the map's warmth. */ .flow-r-mouth.flow-node-visited rect { fill: rgba(221,184,122,0.3); stroke: #ffe9bf; stroke-width: 1.4; } .flow-r-mouth.flow-node-visited text { fill: #ffe9bf; } .flow-sealed-msg { font-family: 'Crimson Pro', serif; font-size: 17px; color: rgba(201,169,110,0.4); padding: 1.2rem 0; text-align: center; } /* ── FOLD MAP (Lacunae / Echocasting / Perpetūra codex tab) ─────────────── */ .fold-wrap { display: flex; flex-direction: column; gap: 14px; align-items: center; } .fold-svg { width: 100%; max-width: 420px; display: block; } .fold-epigraph { font-family: 'Crimson Pro', serif; font-style: italic; font-size: 16px; color: #907860; text-align: center; letter-spacing: 0.5px; } .fold-node { cursor: pointer; } .fold-node circle.hit { fill: transparent; } .fold-node circle.dot { fill: #1c1610; stroke: var(--gold); stroke-width: 1.2; transition: stroke 0.3s; } .fold-node:hover circle.dot, .fold-node:focus circle.dot { stroke: var(--gold-bright); } .fold-node:focus { outline: none; } .fold-node text { font-family: 'Raleway', sans-serif; font-size: 11px; letter-spacing: 1.5px; fill: #c8b898; text-anchor: middle; pointer-events: none; } /* Unmarked points (tier 3): unrecovered clone-seedings. Faint, non-interactive. */ .fold-node.lost { cursor: default; } .fold-node.lost circle.dot { fill: #1c1610; stroke: var(--gold-faint); stroke-width: 1; opacity: 0.28; r: 6; } .fold-node.lost:hover circle.dot, .fold-node.lost:focus circle.dot { stroke: var(--gold-faint); } .fold-mote { fill: rgba(201,169,110,0.45); pointer-events: none; } .fold-thread { stroke: var(--gold-faint); stroke-width: 1; fill: none; } .fold-thread.resonance { stroke-dasharray: 3 5; } .fold-thread.convergence { stroke: var(--gold-dim); opacity: 0.5; } .fold-rings circle { fill: none; stroke: rgba(201,169,110,0.25); stroke-width: 1; stroke-dasharray: 2 6; } .fold-rings { transform-origin: 180px 245px; animation: foldSpin 90s linear infinite; } @keyframes foldSpin { to { transform: rotate(360deg); } } .fold-anim .fold-node, .fold-anim .fold-threads, .fold-anim .fold-rings { transition: transform 2s ease-in-out, opacity 2s ease-in-out; } .fold-overlay { position: fixed; inset: 0; z-index: 1000; background: transparent; pointer-events: none; display: none; align-items: center; justify-content: center; padding: 1.5rem; } .fold-overlay.on { display: flex; } /* Pinned (click) = full modal; unpinned = transient hover preview. */ .fold-overlay.pinned { background: rgba(5,4,3,0.72); pointer-events: auto; } .fold-overlay:not(.pinned) .fold-card-x { display: none; } .fold-card { position: relative; width: 100%; max-width: 380px; max-height: 78vh; overflow-y: auto; background: rgba(13,10,9,0.97); border: 0.5px solid var(--border); padding: 34px 20px 22px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: inherit; } .fold-card-x { position: absolute; top: 8px; right: 10px; background: transparent; border: none; color: var(--gold-dim); font-size: 17px; line-height: 1; cursor: pointer; padding: 4px; transition: color 0.2s; } .fold-card-x:hover { color: var(--gold-bright); } .fold-sealed { font-family: 'Crimson Pro', serif; font-size: 15px; font-style: italic; color: #6a6050; text-align: center; line-height: 1.8; max-width: 320px; } .fold-sealed-ico { display: block; font-style: normal; font-size: 18px; opacity: 0.3; margin-bottom: 0.5rem; } /* Discovery glint: gold pulse dot on the title Codex button + fold tab while an unseen tier waits. prefers-reduced-motion collapses the pulse to a static dot via the global reduce block. */ .glint::after { content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 7px; border-radius: 50%; background: var(--gold-bright); vertical-align: middle; animation: glintPulse 2.2s ease-in-out infinite; } @keyframes glintPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } .flow-sealed-ico { font-size: 20px; opacity: 0.18; display: block; margin-bottom: 0.6rem; } .flow-hint { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: rgba(201,169,110,0.4); margin-bottom: 0.6rem; } /* Playthrough story sub-tabs */ .flow-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; flex-shrink: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0; border-bottom: 0.5px solid rgba(184,150,96,0.15); margin-bottom: 1.2rem; } .flow-tabs::-webkit-scrollbar { display: none; } .flow-tab { background: transparent; border: none; font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(184,150,96,0.38); padding: 8px 14px; cursor: pointer; transition: all 0.3s; border-bottom: 1.5px solid transparent; margin-bottom: -0.5px; flex: 0 0 auto; white-space: nowrap; } .flow-tab.act { color: var(--gold); border-bottom-color: var(--gold); } .flow-tab:hover:not(.veiled) { color: rgba(184,150,96,0.68); } .flow-tab.veiled { color: rgba(184,150,96,0.18); cursor: default; } /* ── READER ───────────────────────────────────────────────────────────────── */ #reader-container { position: fixed; inset: 0; z-index: 20; display: none; overflow-y: auto; background: transparent; scrollbar-width: none; } #reader-container::-webkit-scrollbar { display: none; } #reader-container.open { display: block; } /* Floating hairline panel (design ref 02/03-reader): ring · titles · icons. */ .ch-header-fixed { position: sticky; top: 12px; z-index: 30; display: flex; align-items: center; gap: 13px; width: calc(100% - 24px); max-width: 680px; margin: 0 auto; background: rgba(10,12,26,.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(201,169,110,.35); padding: 11px 15px; } .rch-ring { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: conic-gradient(var(--gold-bright, #ddb87a) var(--ring-pct, 0%), rgba(201,169,110,.18) 0); } .rch-ring span { position: absolute; inset: 2.5px; border-radius: 50%; background: #0d1024; display: grid; place-items: center; font-family: 'Cinzel', serif; font-size: 10.5px; letter-spacing: .04em; color: var(--gold-bright, #ddb87a); } .rch-titles { flex: 1 1 auto; min-width: 0; } .rch-t { font-family: 'Raleway', sans-serif; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-bright, #ddb87a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rch-sub { font-family: 'Raleway', sans-serif; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; /* .55 not .5: at 9.5px this is body text for WCAG, and .5 measured 4.20:1 against the header's own ground — the only contrast failure in the shell. .55 clears at 4.87:1, the smallest step that passes. */ color: rgba(230,220,200,.55); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rch-aa { font-family: 'Raleway', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .02em; } .rch-aa[aria-pressed="true"] { color: var(--gold-bright, #ddb87a); } /* Fixed bottom progress strip: track + glowing dot + prologue/now/epilogue. */ .reader-bbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; pointer-events: none; background: linear-gradient(to top, rgba(5,6,13,.94) 55%, rgba(5,6,13,0)); padding: 12px clamp(16px,4vw,28px) calc(10px + env(safe-area-inset-bottom, 0px)); } .rbb-track { position: relative; height: 2px; background: rgba(201,169,110,.18); } .rbb-fill { position: absolute; left: 0; top: 0; bottom: 0; display: block; background: linear-gradient(to right, rgba(201,169,110,.25), rgba(221,184,122,.7)); } .rbb-dot { position: absolute; top: 50%; transform: translate(-50%,-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--gold-bright, #ddb87a); box-shadow: 0 0 10px rgba(221,184,122,.8); } .rbb-row { display: flex; justify-content: space-between; gap: 10px; margin-top: 7px; font-family: 'Raleway', sans-serif; font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: rgba(230,220,200,.53); } .rbb-now { color: var(--gold-bright, #ddb87a); } /* Inline gear button — lives inside the header, never overlaps */ .gear-btn-inline { flex-shrink: 0; width: 38px; height: 38px; background: transparent; border: none; color: rgba(221,184,122,0.7); cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 2px; transition: color 0.3s; padding: 0; } .gear-btn-inline:hover { color: rgba(184,150,96,0.8); } .gear-icon { width: 28px; height: 28px; display: block; } .pbar-wrap { flex: 1; min-width: 0; padding: 4px 0; } .pbar-track { position: relative; width: 100%; height: 2px; background: rgba(180,150,100,0.15); border-radius: 1px; } .pbar-fill { height: 100%; background: rgba(180,150,100,0.5); border-radius: 1px; transition: width 0.6s ease; } .pbar-marker { position: absolute; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px rgba(184,150,96,0.6); transform: translate(-50%, -50%); transition: left 0.6s ease; } .ch-ctr-r { flex-shrink: 0; font-family: 'Raleway', sans-serif; font-size: 12px; letter-spacing: 3px; color: rgba(201,169,110,0.85); text-transform: uppercase; white-space: nowrap; } .reading-area { max-width: 560px; margin: 0 auto; padding: 2.4rem 2rem 7rem; } /* bottom clears the fixed progress strip */ .unique-badge-r { display: block; font-family: 'Raleway', sans-serif; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: rgba(184,150,96,0.6); border: 0.5px solid rgba(184,150,96,0.25); padding: 4px 12px; margin: 0 auto 1.4rem; width: fit-content; } .ch-label-r { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 5px; color: rgba(201,169,110,0.9); text-transform: uppercase; margin-bottom: 2rem; line-height: 1.8; display: block; text-align: center; } .beat-block { margin-bottom: 1.6em; } .beat-block p { font-size: 19px; line-height: 2.0; color: #cfc0a8; font-weight: 400; letter-spacing: 0.01em; margin-bottom: 0.9em; } .beat-block p:last-child { margin-bottom: 0; } .beat-block em { color: #e0d0b8; font-style: italic; } .beat-sep { display: flex; align-items: center; gap: 10px; margin: 1.6em 0; opacity: 0; transition: opacity 0.5s; } .beat-sep.visible { opacity: 1; } .bsl { flex: 1; height: 0.5px; background: linear-gradient(to right, transparent, rgba(184,150,96,0.14), transparent); } .bsg { width: 3px; height: 3px; background: rgba(184,150,96,0.22); transform: rotate(45deg); flex-shrink: 0; } /* 78% column width, capped at 340px so it doesn't overgrow on wide viewports, centered with auto margins — breathing room either side instead of a full-bleed edge-to-edge image. */ .beat-image { width: 78%; max-width: 340px; display: block; margin: 1.4em auto; opacity: 0; transition: opacity 0.5s; } .beat-image.visible { opacity: 1; } /* aspect-ratio reserves the box BEFORE the lazy-loaded file arrives. Without it the figure was 0px tall until decode, then snapped to full height and shoved every following paragraph down — reported by a player as text jumping to make room for the image. All 110 scene images are 2:3 (1024x1536). */ .beat-image img { width: 100%; height: auto; display: block; aspect-ratio: 2 / 3; border-radius: 2px; } /* Typewriter overlay: the ghost is the finished paragraph, hidden but occupying its full final box, so the paragraph never re-wraps as characters arrive; the live layer types on top of it. Both render the same string in the same font, so every completed line breaks identically. See js/reader.js typeChapter(). */ .tw-p { position: relative; } .tw-p > .tw-ghost { visibility: hidden; } .tw-p > .tw-live { position: absolute; top: 0; left: 0; right: 0; } .cur { display: inline-block; width: 1.5px; height: 1em; background: var(--gold); vertical-align: text-bottom; animation: blink 0.9s step-end infinite; margin-left: 1px; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .choices-block { margin-top: 2.4rem; opacity: 0; transform: translateY(8px); transition: opacity 0.5s, transform 0.5s; } .choices-block.visible { opacity: 1; transform: none; } .choice-label-r { font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 4px; color: rgba(184,150,96,0.32); text-transform: uppercase; margin-bottom: 1.2rem; display: block; } .choices-r { display: flex; flex-direction: column; gap: 10px; } .choice-btn-r:disabled { pointer-events: none; opacity: 0; } /* Solid indigo panel per the redesign. All choices stay visually EQUAL — the design's primary/secondary split would bias route-blind choices. */ .choice-btn-r { background: rgba(13,16,34,0.55); border: 1px solid rgba(201,169,110,0.28); color: #c8bba3; font-family: 'Crimson Pro', serif; font-size: 18px; padding: 14px 20px; cursor: pointer; transition: all 0.3s; text-align: left; line-height: 1.65; letter-spacing: 0.01em; } /* The hover slide is a transform, never padding. Animating padding-left 20->28px re-laid-out the button and re-wrapped its label, so hovering a multi-line choice made its words jump; transform moves the whole button on the compositor and cannot reflow text. Same visible motion, no layout. */ .choice-btn-r:hover { border-color: rgba(184,150,96,0.5); color: #ddd0b8; background: rgba(184,150,96,0.03); transform: translateX(5px); } @media (prefers-reduced-motion: reduce) { .choice-btn-r:hover { transform: none; } } .choice-btn-r::before { content: '◆ '; font-size: 7px; vertical-align: 2px; color: var(--gold); opacity: 0; transition: opacity 0.3s; } .choice-btn-r:hover::before { opacity: 1; } .ending-section { margin-top: 2.4rem; text-align: center; } .ending-rule-r { height: 0.5px; background: linear-gradient(to right, transparent, rgba(184,150,96,0.25), transparent); margin: 1.4rem 0; } .ending-lbl-r { font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 4px; color: rgba(184,150,96,0.32); text-transform: uppercase; display: block; margin-bottom: 1rem; } .ending-quote-r { font-size: 19px; color: #a09880; line-height: 1.95; max-width: 420px; margin: 0 auto 1.8rem; } .ending-btn-r { background: transparent; border: 0.5px solid rgba(184,150,96,0.22); color: rgba(184,150,96,0.5); font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; padding: 11px 24px; cursor: pointer; transition: all 0.3s; } .ending-btn-r:hover { border-color: rgba(184,150,96,0.45); color: rgba(184,150,96,0.8); background: rgba(184,150,96,0.04); } .ending-replay-btn { display: block; margin: 1rem auto 0; background: transparent; border: none; font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: rgba(201,169,110,0.3); cursor: pointer; transition: color 0.3s; padding: 8px 0; } .ending-replay-btn:hover { color: rgba(201,169,110,0.62); } .ending-keepsake-btn { display: block; margin: 0.2rem auto 0; background: transparent; border: none; font-family: 'Raleway', sans-serif; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: rgba(201,169,110,0.18); cursor: pointer; transition: color 0.3s; padding: 8px 0; } .ending-keepsake-btn:hover { color: rgba(201,169,110,0.48); } /* ── Keepsake ending card (off-screen html2canvas capture target) ────────── */ .keepsake-card { position: fixed; left: -9999px; top: 0; z-index: -1; width: 1080px; height: 1350px; background: #0d0a09; overflow: hidden; } .keepsake-card .kc-bg { position: absolute; inset: 0; z-index: 0; } .keepsake-card .kc-bg.hyunjae { background: radial-gradient(ellipse at 15% 95%, rgba(120,80,20,.20) 0%, transparent 55%), radial-gradient(ellipse at 85% 5%, rgba(30,40,65,.32) 0%, transparent 60%), #0d0a09; } .keepsake-card .kc-bg.reine { background: radial-gradient(ellipse at 78% 22%, rgba(150,95,35,.22) 0%, transparent 58%), radial-gradient(ellipse at 20% 88%, rgba(90,45,20,.18) 0%, transparent 60%), #0d0a09; } .keepsake-card .kc-bg.liuyan { background: radial-gradient(ellipse at 50% 18%, rgba(150,105,45,.20) 0%, transparent 60%), radial-gradient(ellipse at 20% 100%, rgba(70,35,15,.20) 0%, transparent 62%), #0d0a09; } .keepsake-card .kc-vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at center, transparent 50%, rgba(8,6,5,.50) 100%); } .keepsake-card .kc-stars { position: absolute; inset: 0; z-index: 2; overflow: hidden; } .keepsake-card .kc-portrait-zone { position: absolute; top: 0; left: 0; right: 0; height: 70%; overflow: hidden; z-index: 3; } .keepsake-card .kc-portrait-zone img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .keepsake-card .kc-portrait-fade { position: absolute; bottom: 0; left: 0; right: 0; height: 22%; background: linear-gradient(to bottom, transparent 0%, rgba(13,10,9,.75) 55%, #0d0a09 100%); } .keepsake-card .kc-cog { position: absolute; z-index: 4; pointer-events: none; opacity: 0.11; } .keepsake-card .kc-cog-tr { top: -10px; right: -10px; transform: rotate(22deg); } .keepsake-card .kc-cog-bl { bottom: -10px; left: -10px; transform: rotate(-14deg); } .keepsake-card .kc-content { position: absolute; left: 0; right: 0; bottom: 0; height: 32%; z-index: 5; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 110px 30px; } .keepsake-card .kc-eyebrow { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 6px; text-transform: uppercase; color: rgba(201,169,110,.62); margin-bottom: 36px; display: block; } .keepsake-card .kc-ending-label { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: rgba(184,150,96,.40); margin-bottom: 22px; display: block; } .keepsake-card .kc-quote { font-family: 'Crimson Pro', serif; font-size: 35px; line-height: 1.68; color: #e4d6be; letter-spacing: .005em; } .keepsake-card .kc-divider { display: flex; align-items: center; gap: 20px; justify-content: center; margin: 36px 0 0; } .keepsake-card .kc-dl { height: 1px; width: 72px; background: rgba(201,169,110,.22); } .keepsake-card .kc-dg { width: 8px; height: 8px; background: rgba(201,169,110,.42); transform: rotate(45deg); flex: 0 0 auto; } .keepsake-card .kc-footer { position: absolute; left: 110px; right: 110px; bottom: 40px; display: flex; justify-content: space-between; align-items: flex-end; font-family: 'Raleway', sans-serif; font-weight: 300; font-size: 14px; letter-spacing: 3px; text-transform: uppercase; color: rgba(201,169,110,.48); z-index: 5; } .keepsake-card .kc-fr { text-align: right; color: rgba(201,169,110,.32); } /* ── SKIP BAR ─────────────────────────────────────────────────────────────── */ .skip-bar { position: fixed; bottom: 58px; left: 50%; transform: translateX(-50%); z-index: 40; display: none; } /* clears the reader progress strip */ /* Rest alpha is 0.8, not 0.4: at 0.4 the control measured 2.04:1 against the 4.5 AA bar, and its only remediation was the :hover below, which touch never gets — so the mobile majority only ever saw the failing state. 0.8 gives 4.87:1, the same figure .rch-sub was raised to. 0.75 lands at 4.40 and does not clear. */ .skip-btn { background: rgba(13,10,9,0.9); border: 0.5px solid rgba(184,150,96,0.22); border-radius: 20px; font-family: 'Raleway', sans-serif; font-size: 9px; letter-spacing: 3px; color: rgba(184,150,96,0.8); text-transform: uppercase; cursor: pointer; padding: 7px 18px; transition: all 0.3s; } .skip-btn:hover { color: rgba(184,150,96,1); border-color: rgba(184,150,96,0.45); } /* 44px hit height on a 26px pill, WITHOUT enlarging the pill. Anchored to grow DOWNWARD only (top:0, not a centred translate): 9px of upward growth would reach back over the scroll cue that 09a7453 just moved clear of this button. Downward is free — the strip below is #choices-r, which is empty while text is typing, and the skip bar is hidden by finishTyping before choices render, so the two never coexist. */ .skip-btn { position: relative; } .skip-btn::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 44px; } /* Floating gear button — kept in HTML but never shown; replaced by .gear-btn-inline in header */ .gear-btn { display: none !important; } /* ── PAUSE OVERLAY ────────────────────────────────────────────────────────── */ .pause-overlay { position: fixed; inset: 0; background: var(--bg); z-index: 80; display: none; flex-direction: column; align-items: center; justify-content: flex-start; padding: 2rem; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; } .pause-overlay::-webkit-scrollbar { display: none; } .pause-overlay.open { display: flex; animation: fadeUp 0.2s ease; } @media (prefers-reduced-motion: reduce) { .pause-overlay.open { animation: none; } } .xbtn { background: transparent; border: none; cursor: pointer; font-size: 18px; color: rgba(184,150,96,0.79); transition: color 0.3s; padding: 0; line-height: 1; } .xbtn:hover { color: rgba(184,150,96,0.85); } /* Navigation buttons — pill style, matching the feedback form */ .pmenu-btn { display: flex; align-items: center; gap: 10px; width: 100%; background: transparent; border: 0.5px solid rgba(184,150,96,0.22); border-radius: 999px; color: #c8b898; font-family: 'Crimson Pro', serif; font-size: 18px; padding: 11px 20px; margin-bottom: 8px; cursor: pointer; text-align: left; transition: color 0.22s, border-color 0.22s, background 0.22s; } .pmenu-btn:last-child { margin-bottom: 0; } .pmenu-btn svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--gold-dim); transition: color 0.22s; } .pmenu-btn:hover { color: #eeddc0; border-color: rgba(184,150,96,0.5); background: rgba(184,150,96,0.05); } .pmenu-btn:hover svg { color: var(--gold); } .pmenu-btn-danger { color: rgba(210,130,110,0.81) !important; border-color: rgba(210,130,110,0.22); } .pmenu-btn-danger svg { color: rgba(210,130,110,0.5) !important; } .pmenu-btn-danger:hover { color: rgba(235,160,140,0.95) !important; border-color: rgba(210,130,110,0.5); background: rgba(210,130,110,0.05); } .pmenu-btn-dev { color: rgba(130,190,140,0.7) !important; border-color: rgba(130,190,140,0.22); } .pmenu-btn-dev:hover { color: rgba(160,220,170,0.95) !important; border-color: rgba(130,190,140,0.5); background: rgba(130,190,140,0.05); } /* Resume reading button */ .presume { display: flex; align-items: center; justify-content: center; width: 100%; background: transparent; border: 0.5px solid rgba(184,150,96,0.28); border-radius: 999px; color: rgba(184,150,96,0.6); font-family: 'Raleway', sans-serif; font-size: 9px; letter-spacing: 4px; text-transform: uppercase; padding: 13px 0; cursor: pointer; transition: all 0.3s; text-align: center; } .presume:hover { border-color: rgba(184,150,96,0.55); color: rgba(184,150,96,0.9); background: rgba(184,150,96,0.04); } /* ── NOTIFICATIONS ───────────────────────────────────────────────────────── */ /* Celestial palette + lifted above the fixed bottom dock nav. */ .notif { position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%); background: rgba(13,16,34,0.95); border: 1px solid rgba(201,169,110,0.55); border-radius: 999px; font-family: 'Raleway', sans-serif; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-bright, var(--gold)); padding: 8px 18px; z-index: 100; white-space: normal; text-align: center; max-width: 85vw; animation: notifUp 0.4s ease, fo 0.5s ease 2.8s both; pointer-events: none; } @keyframes notifUp { from { transform: translate(-50%, 40px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } } @keyframes fo { to { opacity: 0; } } .flash { position: fixed; inset: 0; background: rgba(184,150,96,0.03); z-index: 5; animation: fla 1s ease both; pointer-events: none; } @keyframes fla { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } } /* Speed selector in Progress tab */ .speed-btns { display: flex; gap: 8px; margin-top: 0.4rem; flex-wrap: wrap; } .speed-btn { flex: 1 1 calc(50% - 4px); /* two per row on narrow screens */ min-width: 60px; background: transparent; border: 0.5px solid rgba(184,150,96,0.25); border-radius: 999px; color: #c8b898; font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; padding: 10px 4px; cursor: pointer; transition: all 0.25s; text-align: center; } .speed-btn:hover { border-color: rgba(184,150,96,0.55); color: #eeddc0; } .speed-btn.act { border-color: rgba(184,150,96,0.7); color: #eeddc0; background: rgba(184,150,96,0.08); } /* On wider screens, keep all four on one row */ @media (min-width: 400px) { .speed-btn { flex: 1 1 auto; } } /* ── MORE TEXT INDICATOR ─────────────────────────────────────────────────── */ /* Appears at the bottom of the screen when new text has typed in below the visible area. Tapping it scrolls down gently. Never forces movement. */ .reader-more-ind { position: fixed; /* Must CLEAR the skip bar, which occupies 58-84px from the bottom (bottom:58 + 26px tall). At the old 60px this sat ON the skip button: both are shown at once whenever a paragraph types in below the fold (reader.js:496 fires while the bar is up), and being z-45 over the bar's z-40 with pointer-events:auto, it swallowed every tap on the button's middle third — the part a finger aims for. 92px leaves an 8px gap. */ bottom: 92px; left: 50%; transform: translateX(-50%); z-index: 45; font-size: 22px; color: rgba(201,169,110,0.68); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; animation: indBob 1.6s ease-in-out infinite; user-select: none; -webkit-user-select: none; } .reader-more-ind.visible { opacity: 1; pointer-events: auto; } @keyframes indBob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(5px); } } .feedback-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(13,10,9,0.88); display: none; align-items: center; justify-content: center; padding: 1.5rem; } .feedback-overlay.open { display: flex; animation: fadeUp 0.25s ease; } @media (prefers-reduced-motion: reduce) { .feedback-overlay.open { animation: none; } } /* Celestial HUD panel: sharp corners + corner ticks (matches the pause card). */ .feedback-inner { position: relative; width: 100%; max-width: 480px; background: linear-gradient(150deg, rgba(20,23,46,0.97), rgba(11,13,28,0.97)); border: 1px solid rgba(201,169,110,0.35); box-shadow: 0 18px 60px rgba(0,0,0,.6), 0 0 40px rgba(201,169,110,.06); padding: 2rem 1.8rem; border-radius: 0; max-height: 94vh; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; } .feedback-inner::-webkit-scrollbar { display: none; } .feedback-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .feedback-title { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 5px; text-transform: uppercase; color: rgba(201,169,110,0.75); display: flex; align-items: center; gap: 8px; } .fb-field { margin-bottom: 1.4rem; } .fb-label { display: block; font-family: 'Raleway', sans-serif; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: rgba(201,169,110,0.69); margin-bottom: 0.6rem; } .fb-optional { color: rgba(201,169,110,0.69); letter-spacing: 1px; text-transform: none; } /* Type toggle buttons — always one row; scale to fit narrow screens */ .fb-types { display: flex; gap: 8px; flex-wrap: nowrap; } .fb-type { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; background: transparent; border: 0.5px solid rgba(201,169,110,0.22); color: rgba(201,169,110,0.69); font-family: 'Raleway', sans-serif; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; padding: 8px 14px; cursor: pointer; transition: all 0.25s; display: flex; align-items: center; gap: 7px; border-radius: 20px; } .fb-type svg { width: 13px; height: 13px; flex-shrink: 0; transition: color 0.25s; } /* On narrow phones, tighten spacing/type so "Bug report" never wraps or clips */ @media (max-width: 480px) { .fb-types { gap: 6px; } .fb-type { padding: 8px 6px; letter-spacing: 1px; gap: 5px; } .fb-type svg { width: 12px; height: 12px; } } .fb-type:hover { border-color: rgba(201,169,110,0.55); color: rgba(201,169,110,0.8); } .fb-type.act { border-color: rgba(201,169,110,0.7); color: #e8d090; background: rgba(201,169,110,0.07); } /* Textarea & input */ .fb-textarea, .fb-input { width: 100%; background: rgba(201,169,110,0.03); border: 0.5px solid rgba(201,169,110,0.2); color: #cfc0a0; font-family: 'Crimson Pro', serif; font-size: 17px; padding: 12px 14px; resize: vertical; transition: border-color 0.25s; outline: none; line-height: 1.6; border-radius: 6px; } .fb-textarea:focus, .fb-input:focus { border-color: rgba(201,169,110,0.5); } .fb-textarea::placeholder, .fb-input::placeholder { color: rgba(201,169,110,0.25); } .fb-input { resize: none; } .fb-char { font-family: 'Raleway', sans-serif; font-size: 9px; color: rgba(201,169,110,0.69); text-align: right; margin-top: 4px; } /* Actions */ .fb-actions { display: flex; gap: 10px; align-items: center; margin-top: 1.6rem; } .fb-submit { background: transparent; border: 0.5px solid rgba(201,169,110,0.45); color: #d8c898; font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; padding: 11px 28px; cursor: pointer; transition: all 0.3s; border-radius: 20px; } .fb-submit:hover:not(:disabled) { border-color: var(--gold); color: #f0e0c0; background: rgba(201,169,110,0.06); } .fb-submit:disabled { opacity: 0.5; cursor: default; } .fb-cancel { background: transparent; border: none; color: rgba(201,169,110,0.69); font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; cursor: pointer; transition: color 0.3s; padding: 11px 0; } .fb-cancel:hover { color: rgba(201,169,110,0.65); } /* Success / error */ .fb-success { margin-top: 1.2rem; font-family: 'Crimson Pro', serif; font-size: 17px; color: rgba(201,169,110,0.75); text-align: center; padding: 0.8rem 0; } .fb-error { margin-top: 1.2rem; font-family: 'Crimson Pro', serif; font-size: 16px; color: rgba(210,130,110,0.75); text-align: center; padding: 0.8rem 0; } /* ── AUTH UI ─────────────────────────────────────────────────────────────── */ .auth-btn-wrap { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 1.8rem; flex-wrap: wrap; } .auth-btn { background: transparent; border: 0.5px solid rgba(201,169,110,0.35); color: #d0c0a0; font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; padding: 10px 18px; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; gap: 8px; } .auth-btn:hover { border-color: rgba(201,169,110,0.65); color: #f0e0c0; background: rgba(201,169,110,0.05); } .auth-btn-out { border-color: rgba(201,169,110,0.2); color: rgba(201,169,110,0.45); font-size: 9px; padding: 7px 14px; } .auth-btn-out:hover { border-color: rgba(201,169,110,0.4); color: rgba(201,169,110,0.75); } .google-icon { width: 16px; height: 16px; } .auth-avatar { width: 26px; height: 26px; border-radius: 50%; border: 0.5px solid rgba(201,169,110,0.3); } .auth-name { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: 2px; color: rgba(201,169,110,0.65); } .auth-sync-dot { font-size: 10px; color: rgba(201,169,110,0.55); } @media (max-width: 500px) { /* (The old fit-screen-era #s-title mobile override lived here; the v2 title flows and scrolls at every width, so it needs no special casing.) */ .reading-area { padding: 1.8rem 1.2rem 6.4rem; } .fold-epigraph { font-size: 15px; } .fold-card { max-width: 100%; } /* Right-edge fade on scrollable tab bars: signals "swipe for more" on mobile */ .flow-tabs { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); } /* Background images: GPU-accelerate for smooth mobile scrolling */ #scene-bg { -webkit-transform: translateZ(0); transform: translateZ(0); will-change: background-image; } /* Slightly heavier overlays on mobile for better readability */ body[data-scene="stories"] #scene-bg::before, body[data-scene="codex"] #scene-bg::before, body[data-scene="about"] #scene-bg::before { background: rgba(13,10,9,0.95); } body[data-scene="hyunjae"] #scene-bg::before, body[data-scene="reine"] #scene-bg::before, body[data-scene="liuyan"] #scene-bg::before { background: rgba(13,10,9,0.93); } /* Cards: stronger backdrop on smaller screens */ .ccard { background: rgba(13,10,9,0.75); } .centry { background: rgba(13,10,9,0.72); } /* Prologue & reader choice buttons: dark backdrop on mobile */ .pcbtn { background: rgba(13,16,34,0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .choice-btn-r { background: rgba(13,16,34,0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } } /* ── MATURE CONTENT TOGGLE ──────────────────────────────────────────────── */ .mature-toggle-row { display: flex; align-items: center; gap: 0.75rem; } .mature-hint { font-family: 'Crimson Pro', serif; font-size: 0.85rem; color: var(--muted); } /* ── MUSIC CONTROLS ────────────────────────────────────────────────────── */ .music-controls { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .music-mute-btn { flex: 0 0 auto; min-width: 4.5rem; } .volume-row { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 0; min-width: 0; } .vol-label { font-family: 'Crimson Pro', serif; font-size: 0.85rem; color: var(--muted); } .vol-slider { flex: 1 1 0; min-width: 0; -webkit-appearance: none; appearance: none; height: 4px; background: var(--border); border-radius: 2px; outline: none; cursor: pointer; touch-action: none; /* prevents iOS Safari from hijacking the drag as page scroll (pause overlay is scrollable) */ } .vol-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); cursor: pointer; } .vol-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: none; cursor: pointer; } .vol-slider:disabled { opacity: 0.3; cursor: not-allowed; } /* ── FEEDBACK SCREENSHOT STATUS ────────────────────────────────────────── */ .fb-screenshot-status { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: 1px; color: rgba(184,150,96,0.5); text-align: center; margin-top: 0.6rem; } /* ── READER FEEDBACK BUTTON ────────────────────────────────────────────── */ .ch-header-icons { display: flex; align-items: center; gap: 2px; flex-shrink: 0; } .ch-header-icons .gear-btn-inline { width: 32px; height: 32px; } .ch-header-icons .gear-icon { width: 22px; height: 22px; } /* Version tag — small, unobtrusive, bottom-right of the title screen. Lives inside #s-title so it only shows there; position:fixed anchors it to the viewport corner. Click opens About → What's New. */ .version-tag { position: fixed; bottom: 14px; right: 18px; background: none; border: none; font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: 1.5px; color: var(--text-faint); cursor: pointer; padding: 4px 6px; transition: color 0.3s; z-index: 5; } .version-tag:hover { color: var(--gold); } /* ── ACCESSIBILITY: visible keyboard focus ───────────────────────────────── Keyboard / switch-device users get a clear gold focus ring. Mouse and touch users are unaffected — :focus-visible only matches keyboard-style focus. */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; } /* ── ACCESSIBILITY: respect "reduce motion" ──────────────────────────────── Honours the OS setting. Decorative looping motion (petals, bobbing indicator, blinking caret) is removed; entrance fades are kept but their movement is stripped and durations near-zeroed. The star canvas and petals are also handled in the ambient init script (JS), which CSS cannot reach. */ @media (prefers-reduced-motion: reduce) { .petal { display: none !important; } .reader-more-ind { animation: none !important; } .cur { animation: none !important; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── TOUCH TARGETS & TAP FEEDBACK ─────────────────────────────────────────── Bring small controls up to a ~44px tappable area and give touch users immediate press feedback (mobile has no :hover). */ /* Kill the 300ms tap delay; remove the grey tap-flash (replaced by :active). */ button, a, [role="button"], input, select, textarea, .choice-btn-r { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* Subtle press feedback so taps register without the default highlight box. */ .choice-btn-r:active, .gear-btn-inline:active, .xbtn:active, .auth-btn:active { opacity: 0.6; } /* Reader header icons: 32px visual boxes get a 44px invisible hit area, and a wider gap so the two zones don't overlap. Layout stays visually the same. 12px, not 8: at gap 8 the pitch is 32+8 = 40, so the 44px expanders still overlapped by 4px and each icon kept only 40px of exclusive hit width. This was measured at 40px by the 2026-08-14 shell sweep and recorded as needing a spacing change; 12px is that change, and makes the expanders abut exactly. */ .ch-header-icons { gap: 12px; } .ch-header-icons .gear-btn-inline { position: relative; } .ch-header-icons .gear-btn-inline::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; } /* Title secondary controls: expand the tappable area to 44px tall without enlarging the text (the type size and look are unchanged). */ .auth-btn { min-height: 44px; } .version-tag { min-height: 44px; } /* ── REDESIGN PRIMITIVES ───────────────────────────────────────────────────── Global CSS classes shared by all redesigned menu screens (title, stories, codex, about). The reader is explicitly out of scope — these classes are additive and unused by existing selectors, so old screens are unaffected. Token policy: all palette colours use existing :root variables only. Shadow/glow rgba() literals are alpha tints of the same gold hue (#c9a96e) which have no dedicated token — this follows the same pattern used in the brief's own .soft-seam example code. Source prototypes: title-fit-v3.html → .fit-screen (its .cw-btn / .cw-core / corepulse discs went with the orrery, deleted 2026-08-14) nav-refine.html → .soft-seam characters-v3.html → .badge ── */ /* ── Fit-to-viewport shell ── */ .fit-screen { position: fixed; inset: 0; /* svh (not dvh): iOS Safari doesn't shrink 100dvh for a visible toolbar on position:fixed elements, so centered content sits low and can push past the fold while the address bar is showing. svh is pinned to the worst-case (toolbar-visible) viewport, so it always fits — matches how this already renders correctly once installed to the home screen, where there's no toolbar to disagree with dvh in the first place. */ height: 100vh; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 2vh, 22px); padding: clamp(10px, 3vh, 28px); overflow: hidden; } /* A fit-screen is still a .scr — it must hide when not the active screen. Without this, .fit-screen's unconditional display:flex overrides .scr{display:none} and the screen overlaps every other screen. */ .scr.fit-screen:not(.on) { display: none; } /* ── SVG line-glyph helper ── */ .glyph { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } /* ── Gold pill badge (kicker label) ── */ .badge { font-family: 'Raleway', sans-serif; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold-faint); border-radius: 20px; padding: 3px 9px; } /* ── Soft gradient hairline (replaces hard 1px rules between sections) ── */ .soft-seam { height: 1px; background: linear-gradient(to right, transparent, rgba(201,169,110,.1), transparent); } /* ── Title head + ambient clockwork ─────────────────────────────────────── What survives of the orrery title screen, which was replaced by the astrolabe + .tdk deck (js/title.js) and deleted 2026-08-14. .orr-head is static markup in index.html; the .orr-cogs/.orr-cog/.orr-sp* layer is built by js/components/clockwork.js into #menu-clockwork. The .orr- prefix is kept so those class names still match their CSS. ── */ /* Title block above the astrolabe */ .orr-head { text-align: center; flex: 0 0 auto; /* Override the old .orn/.ttl/.sub margins so the head block is compact */ } .orr-head .orn { margin-bottom: clamp(4px, 1vh, 8px); } .orr-head .ttl { font-size: clamp(28px, 8vmin, 52px); letter-spacing: .12em; } .orr-head .sub { font-size: clamp(11px, 2.1vmin, 16px); margin-top: clamp(4px, 1vh, 8px); padding: 0 6vw; max-width: 46ch; } /* Corner clockwork wrapper */ .orr-cogs { position: fixed; inset: 0; pointer-events: none; z-index: 0; } .orr-cog { position: fixed; transform-origin: center; } .orr-cog svg { display: block; width: 100%; height: 100%; overflow: visible; } /* Spin animations for corner cogs */ @keyframes orrSpin { to { transform: rotate( 360deg); } } @keyframes orrSpinR { to { transform: rotate(-360deg); } } .orr-sp1 { animation: orrSpin 260s linear infinite; } .orr-sp2 { animation: orrSpinR 340s linear infinite; } .orr-sp3 { animation: orrSpin 300s linear infinite; } .orr-sp4 { animation: orrSpinR 200s linear infinite; } .orr-sp5 { animation: orrSpin 420s linear infinite; } /* Reduced motion: stop the cog spin */ @media (prefers-reduced-motion: reduce) { .orr-sp1, .orr-sp2, .orr-sp3, .orr-sp4, .orr-sp5 { animation: none !important; } } /* ── END REDESIGN PRIMITIVES ─────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════════════════ DESKTOP SCALE-UP (≥900px) Mobile (≤640px) is untouched — all these rules apply only on wide screens. Fit-to-viewport / overflow:hidden constraints are preserved throughout. ═══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 900px) { /* ── 1. Title: bigger title + tagline on one line ───────────────────────── */ .orr-head .ttl { font-size: clamp(42px, 6vw, 80px); } .orr-head .sub { font-size: clamp(15px, 1.5vw, 22px); max-width: 90ch; /* wide enough to stay on one line */ white-space: nowrap; padding: 0 2vw; } /* ── 8. About feature rows: bigger icons + text ─────────────────────────── */ .about-fi { flex: 0 0 46px; height: 46px; } .about-fi svg { width: 24px; height: 24px; } .about-frow { gap: 18px; padding: 14px 0; } .about-ftt { font-size: 17px; } .about-ftd { font-size: 17px; } } /* ══════════════════════════════════════════════════════════════════════════ == ATLAS BUILD v2 == "Celestial Atlas" redesign Deep indigo-violet ground + antique gold, astrolabe/orrery motifs, hairline HUD panels with corner ticks. Recreated from the design prototype (scratchpad/perpetura-design.html). Shared primitives live here; per-screen styles are grouped in their own labelled sub-sections below. ══════════════════════════════════════════════════════════════════════════ */ :root { --ink: #05060d; /* menu ground */ --ink-reader: #0a0c1a; /* reader ground */ --panel: rgba(13,16,34,0.85); --panel-hi: rgba(16,19,40,0.92); --gold-hi: #f0e6d0; /* bright title */ --gold-base: #b08d52; /* gradient base */ --violet: rgba(140,130,200,0.5); --violet-tx: rgba(180,170,220,0.85); --violet-dim: rgba(160,150,220,0.7); /* --violet-dim is the LOCKED/silhouette violet (4.11:1 — deliberately under the AA bar, and exempt as an inactive-state indicator). Live violet numbers must not borrow it; they use this instead, at 4.55:1. */ --violet-stat: rgba(160,150,220,0.78); --good: #8fd6a8; --danger-bc: rgba(160,90,90,0.4); --danger-tx: rgba(220,150,150,0.75); --body-tx: #e6dcc8; --line: rgba(201,169,110,0.35); --line-soft: rgba(201,169,110,0.18); } @keyframes ab-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes ab-fadeup { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes ab-screenin { from { opacity: 0; } to { opacity: 1; } } @keyframes ach-in { 0% { opacity: 0; transform: translate(-50%,-30px) scale(.94); } 55% { opacity: 1; transform: translate(-50%,6px) scale(1.01); } 100% { opacity: 1; transform: translate(-50%,0) scale(1); } } @keyframes ach-glow { 0%,100% { box-shadow: 0 0 22px rgba(221,184,122,.35); } 50% { box-shadow: 0 0 44px rgba(221,184,122,.7); } } @keyframes ach-sweep { from { transform: translateX(-160%) skewX(-18deg); } to { transform: translateX(320%) skewX(-18deg); } } /* ── HUD panel + corner ticks ───────────────────────────────────────────── .hud draws the signature top-left + bottom-right corner ticks via pseudo- elements. Add explicit .tick spans (.tl/.tr/.bl/.br) for 4-corner frames. */ .hud { position: relative; background: var(--panel); border: 1px solid rgba(201,169,110,0.4); } .hud::before, .hud::after { content: ''; position: absolute; width: 12px; height: 12px; pointer-events: none; z-index: 3; } .hud::before { left: -1px; top: -1px; border-top: 1.5px solid var(--gold-bright); border-left: 1.5px solid var(--gold-bright); } .hud::after { right: -1px; bottom: -1px; border-bottom: 1.5px solid var(--gold-bright); border-right: 1.5px solid var(--gold-bright); } .tick { position: absolute; width: 12px; height: 12px; pointer-events: none; z-index: 3; } .tick.tl { left: -1px; top: -1px; border-top: 1.5px solid var(--gold-bright); border-left: 1.5px solid var(--gold-bright); } .tick.tr { right: -1px; top: -1px; border-top: 1.5px solid var(--gold-bright); border-right: 1.5px solid var(--gold-bright); } .tick.bl { left: -1px; bottom: -1px; border-bottom: 1.5px solid var(--gold-bright); border-left: 1.5px solid var(--gold-bright); } .tick.br { right: -1px; bottom: -1px; border-bottom: 1.5px solid var(--gold-bright); border-right: 1.5px solid var(--gold-bright); } /* ── Buttons / chips / beads ──────────────────────────────────────────────── */ .btn-gold { padding: 12px 22px; background: linear-gradient(170deg,#ddb87a,#b08d52); font-family: 'Raleway', sans-serif; font-size: 11.5px; letter-spacing: .26em; color: #170f08; font-weight: 600; border: none; cursor: pointer; text-transform: uppercase; } .btn-gold:hover { filter: brightness(1.1); } .btn-ghost { padding: 12px 22px; background: rgba(8,10,22,0.5); border: 1px solid rgba(201,169,110,0.4); font-family: 'Raleway', sans-serif; font-size: 11px; letter-spacing: .26em; color: var(--gold-bright); cursor: pointer; text-transform: uppercase; } .btn-ghost:hover { border-color: var(--gold-bright); } .ab-chip { padding: 6px 13px; border: 1px solid rgba(201,169,110,0.5); border-radius: 999px; font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: .24em; color: var(--gold-bright); white-space: nowrap; text-transform: uppercase; } .ab-chip.violet { border-color: rgba(140,130,200,0.4); color: var(--violet-tx); } .bead { padding: 7px 15px; border: 1px solid var(--line-soft); border-radius: 999px; background: rgba(8,10,22,0.5); font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: .24em; color: rgba(230,220,200,0.55); cursor: pointer; white-space: nowrap; text-transform: uppercase; transition: border-color .18s ease, color .18s ease, background .18s ease; } .bead:hover { border-color: rgba(221,184,122,0.7); } .bead.on { border-color: rgba(201,169,110,0.6); background: rgba(201,169,110,0.14); color: var(--gold-bright); } .bead.locked { border-color: rgba(140,130,200,0.25); background: transparent; color: rgba(180,170,220,0.55); border-style: dashed; } /* Universal press feedback: a brightness flash on every button (safe — no transform, so it never disturbs transform-positioned buttons like the astrolabe nodes). Flat buttons opt into the extra press-scale via .ab-press. */ button:active { filter: brightness(1.12); } button.ab-press:active { transform: scale(.955); filter: brightness(1.15); } @media (prefers-reduced-motion: reduce) { button.ab-press:active { transform: none; } } /* Ambient clockwork cog layer — behind the menu content (.orr-cogs is fixed z-0 internally; toggled per-screen by updateMenuAmbient). */ #menu-clockwork { display: none; } #menu-clockwork.on { display: block; } /* ── Full-bleed screen background + gradient veil + header ─────────────────── */ .scr-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .scr-bg img { width: 100%; height: 100%; object-fit: cover; display: block; } .scr-grad { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .scr-inner { position: relative; z-index: 2; } .scr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; } .scr-head-t { font-family: 'Cinzel', serif; font-size: clamp(19px,2.6vw,24px); letter-spacing: .3em; color: var(--body-tx); } .scr-head-k { font-size: 10.5px; letter-spacing: .32em; color: rgba(201,169,110,0.75); margin-top: 6px; text-transform: uppercase; } .scr-x { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: rgba(230,220,200,0.65); font-size: 13.5px; background: rgba(8,10,22,0.5); cursor: pointer; flex: none; } .scr-x:hover { border-color: var(--gold-bright); color: var(--gold-bright); } /* ── Persistent bottom dock nav (stories/codex/atlas/about + menu) ─────────── */ #dock-nav { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; gap: clamp(22px,6vw,44px); padding: 13px 12px calc(14px + env(safe-area-inset-bottom,0px)); background: rgba(6,8,18,0.85); backdrop-filter: blur(12px); border-top: 1px solid var(--line-soft); z-index: 30; } #dock-nav.hidden { display: none; } /* The reader (z-index 20) opens outside goScreen, so hide the dock/FAB (z-30/31) whenever it is open, regardless of DOM order. */ body:has(#reader-container.open) #dock-nav, body:has(#reader-container.open) #fb-fab, body:has(#reader-container.open) #menu-clockwork { display: none !important; } /* The bottom nav persists at every width (design ref: every desktop meta-screen render shows it); the title screen alone hides it via updateDockNav. */ /* Screen-transition veil (replaces the clockwork iris): a full-bleed ink wash that fades in, swaps the screen at peak, and fades back out. */ #nav-veil { position: fixed; inset: 0; background: var(--ink); z-index: 45; opacity: 0; pointer-events: none; transition: opacity .28s ease; } #nav-veil.on { opacity: 1; } .dock-item { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; font-family: 'Raleway', sans-serif; color: rgba(230,220,200,0.55); padding: 2px 6px; } .dock-item .di-ic { font-size: 15.5px; line-height: 1; } .dock-item .di-lb { font-size: 10px; letter-spacing: .18em; white-space: nowrap; } .dock-item .di-mark { width: 14px; height: 2px; background: transparent; border-radius: 1px; } .dock-item.on { color: var(--gold-bright); } .dock-item.on .di-mark { background: var(--gold-bright); } #fb-fab { position: fixed; right: 18px; bottom: 86px; width: 44px; height: 44px; border-radius: 50%; background: rgba(13,16,34,0.9); border: 1px solid rgba(201,169,110,0.5); display: grid; place-items: center; color: var(--gold-bright); font-size: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.5); z-index: 31; cursor: pointer; } #fb-fab.hidden { display: none; } #fb-fab:hover { box-shadow: 0 0 24px rgba(201,169,110,0.35); } /* ── Achievement unlock banner ────────────────────────────────────────────── */ #ach-banner { position: fixed; left: 50%; top: 20px; z-index: 58; pointer-events: none; display: none; } #ach-banner.show { display: block; animation: ach-in .65s cubic-bezier(.2,.9,.3,1.15) both; } .ach-card { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 22px 14px 15px; background: linear-gradient(170deg,rgba(22,25,50,.97),rgba(12,14,30,.97)); border: 1px solid rgba(221,184,122,0.7); overflow: hidden; max-width: calc(100vw - 24px); } .ach-sweep { position: absolute; top: 0; bottom: 0; width: 56px; background: linear-gradient(to right,transparent,rgba(240,225,190,.14),transparent); animation: ach-sweep 1.6s .3s ease both; } .ach-ic { width: 42px; height: 42px; flex: none; border-radius: 50%; border: 1.5px solid var(--gold-bright); background: radial-gradient(circle at 50% 38%,#2a2448,#131024 75%); display: grid; place-items: center; font-size: 17px; color: var(--gold-bright); animation: ach-glow 1.6s ease infinite; } .ach-kick { font-size: 9.5px; letter-spacing: .4em; color: rgba(221,184,122,0.9); white-space: nowrap; } .ach-name { font-family: 'Cinzel', serif; font-size: 16px; letter-spacing: .08em; color: var(--gold-hi); margin-top: 4px; } .ach-sub { font-size: 10px; letter-spacing: .16em; color: rgba(230,220,200,0.55); margin-top: 3px; } /* ── TITLE (astrolabe) ────────────────────────────────────────────────────── */ #s-title { position: relative; min-height: 100vh; overflow-x: hidden; padding: 0; } /* Display gated to .on so the base `.scr { display:none }` still hides it. */ #s-title.on { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; } #s-title .scr-bg-title { position: absolute; inset: 0; z-index: 0; } #s-title .scr-bg-title img { width: 100%; height: 100%; object-fit: cover; display: block; } #s-title .title-grad { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 62% 62% at 50% 44%,rgba(5,6,14,.35),rgba(5,6,14,.05) 55%,rgba(5,6,14,.5)), linear-gradient(to top,rgba(5,6,14,.75),transparent 30%), linear-gradient(to bottom,rgba(5,6,14,.6),transparent 24%); } .title-topbar { position: relative; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: clamp(14px,2.5vw,24px) clamp(16px,3vw,30px); } .title-brand { display: flex; align-items: center; gap: 12px; } .title-brand .tb-mark { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(201,169,110,.55); display: grid; place-items: center; font-size: 12.5px; color: var(--gold-bright); } .title-brand .tb-word { font-family: 'Cinzel', serif; font-size: 14.5px; letter-spacing: .4em; color: var(--body-tx); } .title-topbar-r { display: flex; align-items: center; gap: 14px; font-size: 11px; letter-spacing: .22em; color: rgba(230,220,200,.6); margin-left: auto; /* keeps the group right-aligned even after the top bar wraps to two lines on phones */ } /* Phones: drop the brand lockup — the title itself is right below — and the save/music/sign-in group holds the single top-right row (design spec). */ @media (max-width: 640px) { .title-brand { display: none; } } .save-synced { display: flex; align-items: center; gap: 6px; white-space: nowrap; } .save-synced .ss-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--good); } .tb-music { width: 28px; height: 28px; border: 1px solid var(--gold-dim); border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; color: var(--gold-bright); background: rgba(5,6,14,.4); cursor: pointer; flex: none; } .tb-music.muted { color: rgba(230,220,200,.45); border-color: rgba(201,169,110,.3); } .tb-signin { padding: 6px 13px; border: 1px solid rgba(201,169,110,.4); border-radius: 2px; color: var(--gold-bright); background: rgba(5,6,14,.4); font-family: 'Raleway', sans-serif; font-size: 11px; letter-spacing: .22em; cursor: pointer; white-space: nowrap; flex: none; text-transform: uppercase; } .tb-music:hover, .tb-signin:hover { border-color: var(--gold-bright); } #s-title .orr-head { position: relative; z-index: 5; text-align: center; margin-top: clamp(6px,2vh,26px); display: flex; flex-direction: column; align-items: center; } #s-title .orn { font-family: 'Raleway', sans-serif; font-size: 11px; letter-spacing: .5em; color: rgba(221,184,122,.85); text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,.7); } #s-title .ttl { font-family: 'Cinzel', serif; font-size: clamp(28px,4.6vw,42px); letter-spacing: .22em; color: var(--gold-hi); margin-top: 10px; text-shadow: 0 0 34px rgba(201,169,110,.35),0 2px 12px rgba(0,0,0,.8); } #s-title .sub { font-family: 'Crimson Pro', serif; font-style: italic; font-size: clamp(13px,1.5vw,15px); color: rgba(235,225,205,.75); margin-top: 8px; text-shadow: 0 1px 8px rgba(0,0,0,.8); padding: 0 20px; } #title-astrolabe { position: relative; width: min(74vw,420px); aspect-ratio: 1/1; margin: clamp(60px,9vh,96px) auto clamp(66px,10vh,104px); z-index: 4; } .astro-ring { position: absolute; border-radius: 50%; } .astro-ring-glow { inset: 0; background: radial-gradient(circle,rgba(5,6,14,.3) 40%,transparent 72%); } .astro-ring-tick { inset: 0; border: 1px solid rgba(201,169,110,.32); animation: ab-spin 240s linear infinite; background: repeating-conic-gradient(rgba(201,169,110,.35) 0 .4deg,transparent .4deg 7deg); -webkit-mask: radial-gradient(circle,transparent 66%,#000 66.6%,#000 67.8%,transparent 68.4%); mask: radial-gradient(circle,transparent 66%,#000 66.6%,#000 67.8%,transparent 68.4%); } .astro-ring-solid { inset: 0; border: 1px solid rgba(201,169,110,.4); } .astro-ring-dash { inset: 12%; border: 1px dashed rgba(150,140,210,.32); } @media (prefers-reduced-motion: reduce) { .astro-ring-tick { animation: none; } } .astro-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 40%; aspect-ratio: 1/1; border-radius: 50%; background: radial-gradient(circle at 50% 42%,rgba(21,24,48,.92),rgba(8,10,24,.95) 70%); border: 1px solid rgba(201,169,110,.65); box-shadow: 0 0 50px rgba(201,169,110,.28),inset 0 0 26px rgba(90,70,170,.28); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; color: inherit; } .astro-core:hover { box-shadow: 0 0 70px rgba(201,169,110,.45),inset 0 0 26px rgba(90,70,170,.28); } .astro-core-big { font-family: 'Cinzel', serif; font-size: clamp(16px,2.2vw,21px); letter-spacing: .22em; color: var(--gold-bright); text-shadow: 0 0 20px rgba(221,184,122,.55); } .astro-core-sub { font-family: 'Raleway', sans-serif; font-size: 8.5px; letter-spacing: .12em; color: rgba(230,220,200,.6); white-space: normal; max-width: 84%; text-align: center; line-height: 1.3; text-transform: uppercase; } .astro-node { position: absolute; transform: translate(-50%,-50%); background: none; border: none; padding: 0; cursor: pointer; color: inherit; } .astro-dot { display: block; width: var(--node-size,50px); aspect-ratio: 1/1; border-radius: 50%; overflow: hidden; border: 1px solid rgba(201,169,110,.6); background: #0a0d1c; margin: 0 auto; } .astro-dot img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; display: block; filter: saturate(.85); } .astro-node.big .astro-dot { border-width: 1.5px; box-shadow: 0 0 24px rgba(201,169,110,.5); } .astro-node.active .astro-dot { border: 1.5px solid var(--gold); box-shadow: 0 0 24px rgba(201,169,110,.5); } .astro-node.active .astro-dot img { filter: none; } .astro-dot.glyph { display: grid; place-items: center; font-size: 14.5px; } .astro-node.locked .astro-dot { border: 1px dashed rgba(150,140,210,.6); color: rgba(190,180,230,.85); background: rgba(14,16,34,.72); } .astro-node.sealed .astro-dot { border: 1px solid rgba(201,169,110,.3); color: rgba(201,169,110,.55); background: rgba(10,12,26,.75); font-size: 13.5px; } .astro-label { position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%); font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: .24em; color: rgba(221,184,122,.85); max-width: 72px; line-height: 1.2; text-align: center; text-transform: uppercase; text-shadow: 0 1px 6px rgba(0,0,0,.9); } .astro-node.active .astro-label { color: var(--gold-bright); } .astro-node.locked .astro-label { color: rgba(160,150,220,.85); } .astro-node.sealed .astro-label { color: rgba(201,169,110,.55); } /* Desktop: the centre carries the screen — scale the astrolabe up into the empty space (author call, 2026-07-24 r3). vh term keeps it fitting shorter laptops; node sizes come inline from JS, so scale them with a multiplier. */ @media (min-width: 1100px) { #title-astrolabe { width: min(50vw, 52vh, 600px); margin: clamp(40px,6vh,70px) auto clamp(46px,7vh,84px); } /* Nodes sit between the two rings (dleft/dtop in js/title.js) and scale up in proportion with the BEGIN core (~1:2). */ .astro-dot { width: calc(var(--node-size, 50px) * 1.85); } .astro-label { font-size: 12px; max-width: 112px; top: calc(100% + 8px); } .astro-core-big { font-size: clamp(20px, 1.8vw, 26px); } .astro-core-sub { font-size: 10px; } #s-title .orn { font-size: 12.5px; } #s-title .ttl { font-size: clamp(34px, 3.4vw, 52px); } #s-title .sub { font-size: clamp(14px, 1.15vw, 17px); } } /* Four equal SQUARE buttons, icon above label (design ref 01-title): full-width row on mobile, centered ~540px on desktop. flex needs the explicit width:100% or margin:auto collapses the row to content width. */ .title-dock { position: relative; z-index: 5; display: flex; gap: 11px; width: 100%; max-width: 540px; margin: 0 auto; padding: 0 18px; box-sizing: border-box; } .tdk { flex: 1 1 0; aspect-ratio: 1 / 1; max-height: 128px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(8,10,22,.62); border: 1px solid rgba(201,169,110,.28); cursor: pointer; font-family: 'Raleway', sans-serif; padding: 0; } .tdk:hover { border-color: rgba(221,184,122,.7); background: rgba(12,15,32,.8); } .tdk .tdk-ic { color: rgba(221,184,122,.85); font-size: 19px; } .tdk .tdk-lb { font-size: 10.5px; letter-spacing: .22em; color: rgba(240,230,210,.85); white-space: nowrap; text-transform: uppercase; } .title-foot { position: relative; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 22px clamp(16px,3vw,30px); margin-top: auto; } .title-fb { display: flex; align-items: center; gap: 8px; font-family: 'Raleway', sans-serif; font-size: 10.5px; letter-spacing: .24em; color: rgba(221,184,122,.85); background: none; border: none; cursor: pointer; white-space: nowrap; text-transform: uppercase; } .title-fb .tfb-ic { width: 26px; height: 26px; border: 1px solid rgba(201,169,110,.4); border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; background: rgba(8,10,22,.6); } #s-title .version-tag { position: static; font-family: 'Raleway', sans-serif; font-size: 10.5px; letter-spacing: .24em; color: rgba(230,220,200,.53); white-space: nowrap; background: none; border: none; cursor: pointer; text-transform: uppercase; margin: 0; } /* ── Shared meta-screen shell (stories/codex/atlas/about) ─────────────────── */ /* clip (not hidden): hidden turns the screen into a scroll container, which silently kills position:sticky for anything inside (the Characters detail panel). clip clips without becoming a scroller; hidden stays as fallback. */ #s-stories, #s-atlas, #s-codex, #s-about { position: relative; min-height: 100vh; overflow-x: hidden; overflow-x: clip; padding: 0; } #s-stories.on, #s-atlas.on, #s-codex.on, #s-about.on { display: block; } #s-stories .scr-grad { background: linear-gradient(to bottom,rgba(5,6,14,.82),rgba(5,6,14,.6) 40%,rgba(5,6,14,.86)); } .meta-inner { position: relative; z-index: 2; max-width: 1160px; margin: 0 auto; padding: clamp(16px,3vw,28px) clamp(16px,3vw,28px) 110px; } /* ── Stories: hero + shelf ────────────────────────────────────────────────── */ .stories-row { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; align-items: flex-start; margin-top: 26px; } .hero-card { width: min(480px,100%); background: rgba(13,16,34,.88); border: 1px solid rgba(201,169,110,.5); } .hero-cast { position: relative; width: 100%; aspect-ratio: 900/720; } /* r7: every card frame carries its art's TRUE aspect-ratio inline (see CAST_ASPECT in js/stories.js), so a plain cover fill shows the whole image — no crop, no blur, no letterbox. */ .hero-cast-img { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; background-position: center; background-color: #0a0d1c; } .hero-era { position: absolute; left: 14px; top: 12px; padding: 5px 11px; background: rgba(7,10,22,.78); border: 1px solid rgba(201,169,110,.4); font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: .28em; color: var(--gold-bright); white-space: nowrap; text-transform: uppercase; } .hero-cast-fade { position: absolute; inset: 0; background: linear-gradient(to top,rgba(13,16,34,.92) 0%,transparent 28%); } .hero-namebar { position: absolute; left: 16px; bottom: 10px; right: 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .hero-name { font-family: 'Cinzel', serif; font-size: 27px; color: var(--gold-hi); text-shadow: 0 2px 20px rgba(0,0,0,.8); } .hero-castlabel { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: .22em; color: rgba(230,220,200,.6); white-space: nowrap; text-transform: uppercase; } .hero-body { padding: 14px 18px 16px; border-top: 1px solid rgba(201,169,110,.18); } .hero-tagline { font-family: 'Crimson Pro', serif; font-style: italic; font-size: 15.5px; color: rgba(230,220,200,.65); } .hero-status { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; margin-top: 13px; } .hero-btn { flex: none; } .hero-ring { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; } .hero-ring .hr-inner { width: 27px; height: 27px; border-radius: 50%; background: #0d1022; display: grid; place-items: center; font-family: 'Raleway', sans-serif; font-size: 10px; color: var(--gold-bright); } .hero-badge { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(201,169,110,.4); display: grid; place-items: center; flex: none; font-size: 15.5px; } .hero-meta { flex: 1; min-width: 120px; } .hero-chip { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: .22em; color: rgba(230,220,200,.53); white-space: nowrap; text-transform: uppercase; } .hero-bar { height: 2px; background: rgba(201,169,110,.18); margin-top: 6px; } .hero-bar > i { display: block; height: 100%; background: linear-gradient(to right,#8f7844,#ddb87a); } .hero-btn { padding: 11px 20px; background: linear-gradient(170deg,#ddb87a,#b08d52); font-family: 'Raleway', sans-serif; font-size: 11.5px; letter-spacing: .26em; color: #170f08; font-weight: 600; border: none; cursor: pointer; text-transform: uppercase; flex: none; } .hero-btn:hover { filter: brightness(1.1); } .stories-shelf { display: flex; flex-direction: column; gap: 16px; width: min(300px,100%); } .shelf-card { text-align: left; padding: 0; background: rgba(13,16,34,.78); border: 1px solid rgba(201,169,110,.24); cursor: pointer; color: inherit; width: 100%; } .shelf-card:hover { border-color: rgba(221,184,122,.6); } .shelf-cast { position: relative; width: 100%; aspect-ratio: 900/720; } .shelf-cast > i { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; background-position: center; background-color: #0a0d1c; filter: saturate(.9); } .shelf-body { padding: 11px 14px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(201,169,110,.14); gap: 10px; } .shelf-name { font-family: 'Cinzel', serif; font-size: 16px; color: var(--body-tx); } .shelf-era { font-family: 'Raleway', sans-serif; font-size: 9.5px; letter-spacing: .26em; color: rgba(201,169,110,.75); margin-top: 3px; white-space: nowrap; text-transform: uppercase; } .shelf-status { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: .16em; white-space: nowrap; text-transform: uppercase; } .shelf-card.sealed { cursor: default; } .fourth-locked { display: flex; align-items: center; gap: 13px; background: rgba(10,12,26,.65); border: 1px dashed rgba(140,130,200,.35); padding: 14px 16px; } .fourth-locked .fl-ic { color: rgba(180,170,220,.75); font-size: 15.5px; } .fourth-locked .fl-t { font-family: 'Cinzel', serif; font-size: 13.5px; letter-spacing: .12em; color: rgba(230,220,200,.55); } .fourth-locked .fl-s { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: .2em; color: rgba(140,130,200,.8); margin-top: 3px; text-transform: uppercase; } .fourth-locked .fl-dots { margin-left: auto; display: flex; gap: 4px; flex: none; } .fourth-locked .fl-dots i { width: 6px; height: 6px; border-radius: 50%; } .fourth-locked .fl-dots i.on { background: var(--gold); } .fourth-locked .fl-dots i.off { border: 1px solid rgba(201,169,110,.4); } /* Overflow shelf cards (4th+) — under the hero on desktop, after the shelf on phones (plain DOM order). Mirrors the shelf column styling. */ .stories-under { display: flex; flex-direction: column; gap: 16px; width: min(300px,100%); } .stories-under .shelf-card { width: 100%; } /* Desktop (author sketch r4, art-true frames r7): hero + overflow left, three cards right. Rows are auto so every frame keeps its art's exact aspect — the two columns land within ~2% of the same height. This block must sit AFTER the base hero/shelf rules (file order decides ties). */ @media (min-width: 1024px) { .stories-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 22px; align-items: start; /* Width driven by the viewport HEIGHT so the whole block fits above the fold (block height ≈ 1.16 × its width; ~200px of header/dock chrome). The 700px floor keeps cards readable — very short windows scroll. */ max-width: clamp(700px, calc((100vh - 230px) * 0.85), 1020px); margin-left: auto; margin-right: auto; } .hero-card { grid-column: 1; grid-row: 1; width: auto; } .stories-shelf { grid-column: 2; grid-row: 1 / span 2; width: auto; gap: 22px; } .stories-under { grid-column: 1; grid-row: 2; width: auto; gap: 22px; } } /* ── Codex (pill tabs + grids) ────────────────────────────────────────────── */ .codex-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .cx-tab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 17px; border: 1px solid rgba(201,169,110,.16); background: transparent; font-family: 'Raleway', sans-serif; font-size: 10.5px; letter-spacing: .24em; color: rgba(230,220,200,.55); cursor: pointer; white-space: nowrap; text-transform: uppercase; } .cx-tab:hover { border-color: rgba(221,184,122,.7); } .cx-tab.on { border-color: rgba(201,169,110,.6); background: rgba(201,169,110,.14); color: var(--gold-bright); } .cx-tab-ic { font-size: 12.5px; } .codex-content { margin-top: 6px; } .cx-beads { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .lore-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 12px; margin-top: 18px; } .lore-card { position: relative; text-align: left; padding: 15px; background: rgba(13,16,34,.8); border: 1px solid rgba(201,169,110,.28); cursor: pointer; color: inherit; } .lore-card:hover { border-color: rgba(221,184,122,.65); } .lore-card.active { background: rgba(16,19,40,.96); border: 1.5px solid var(--gold); box-shadow: 0 0 22px rgba(201,169,110,.22); } .lore-card.locked { border: 1px dashed rgba(140,130,200,.3); } .lore-card.locked.active { border: 1.5px solid rgba(140,130,200,.6); box-shadow: none; } .lc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .lc-glyph { width: 32px; height: 32px; flex: none; border-radius: 50%; border: 1px solid rgba(201,169,110,.35); display: grid; place-items: center; font-size: 15.5px; color: var(--gold-bright); } .lore-card.locked .lc-glyph { color: var(--violet-tx); } .lc-badge { font-family: 'Raleway', sans-serif; font-size: 9px; letter-spacing: .26em; color: rgba(201,169,110,.7); text-transform: uppercase; } .lc-title { font-family: 'Cinzel', serif; font-size: 14px; line-height: 1.35; color: rgba(230,220,200,.8); margin-top: 12px; } .lore-card.active .lc-title { color: var(--gold-hi); } .lc-sub { font-family: 'Raleway', sans-serif; font-size: 9px; letter-spacing: .22em; color: rgba(201,169,110,.7); margin-top: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; } .lore-card.locked .lc-sub { color: var(--violet-dim); } .cx-plate { margin-top: 20px; padding: clamp(20px,3vw,30px); } .cx-plate-kick { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: .34em; color: rgba(201,169,110,.75); text-transform: uppercase; } .cx-plate-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; } .cx-plate-title { font-family: 'Cinzel', serif; font-size: 20px; color: var(--gold-hi); } .cx-plate-body { font-family: 'Crimson Pro', serif; font-size: 17px; line-height: 1.85; color: rgba(230,220,200,.75); margin-top: 12px; } .cx-plate-lock { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 9px 16px; border: 1px dashed rgba(140,130,200,.45); border-radius: 999px; font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: .24em; color: var(--violet-tx); text-transform: uppercase; } .char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 14px; margin-top: 18px; } /* Flex column: grid rows stretch every card to the row's tallest (a wrapped name), and a stretched BUTTON centres its content — which painted a dark gap ABOVE the photo. Photo pins to the top; the name bar absorbs the slack, so all borders and photos in a row stay flush. */ .char-card { display: flex; flex-direction: column; text-align: left; padding: 0; background: rgba(13,16,34,.78); border: 1px solid rgba(201,169,110,.25); cursor: pointer; color: inherit; } .char-card:hover { border-color: rgba(221,184,122,.7); } .char-card.active { border-color: var(--gold); } .cc-photo { position: relative; width: 100%; aspect-ratio: 3/4; background: #0a0d1c; overflow: hidden; flex: none; } .cc-img { position: absolute; inset: 0; background-size: cover; background-position: center top; } .cc-sil { display: grid; place-items: center; } .cc-sil svg { width: 54%; fill: rgba(201,169,110,.25); } .cc-lock { font-size: 22px; color: var(--violet-dim); } .cc-body { padding: 9px 11px; flex: 1 1 auto; } .cc-name { font-family: 'Cinzel', serif; font-size: 12.5px; letter-spacing: .1em; color: var(--body-tx); } .cc-role { font-family: 'Raleway', sans-serif; font-size: 9px; letter-spacing: .22em; color: rgba(201,169,110,.75); margin-top: 3px; text-transform: uppercase; } /* Desktop (author sketch r10): cards left, detail docked right with a full-width portrait; phones use the in-grid accordion instead. */ @media (min-width: 1024px) { .char-layout { display: flex; gap: 22px; align-items: flex-start; } .char-layout .char-grid { flex: 1 1 auto; min-width: 0; } .char-detail { width: min(340px, 32vw); flex: none; position: sticky; top: 16px; } .char-detail .cd-portrait { width: 100%; } .char-detail .cd-info { width: 100%; } } /* flex-start: the framed portrait must hug its image — the default stretch let a long bio pull the gold frame past the 3/4 portrait (dark gap under Cui Heng et al.). */ .char-detail { margin-top: 22px; padding: clamp(18px,3vw,24px); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; } /* Mobile accordion expansion: spans the grid under the tapped card's row. Floated portrait (not flex): .cd-info's 260px min-width would overflow a phone-wide flex row, and a float lets the bio use the full panel width, flowing beside and then under the image. flow-root contains the float without touching .hud's ::after corner tick. */ .char-expand { grid-column: 1 / -1; position: relative; display: flow-root; padding: 16px; animation: fadeUp .25s ease both; } .char-expand .cd-portrait { float: left; width: 100px; margin: 0 14px 6px 0; } .char-expand .cd-info { min-width: 0; } .cd-portrait { width: 110px; flex: none; border: 1px solid rgba(201,169,110,.5); } .cd-img { width: 100%; aspect-ratio: 3/4; background-size: cover; background-position: center 12%; background-color: #0a0d1c; } .cd-sil { display: grid; place-items: center; font-size: 26px; color: var(--violet-dim); } .cd-info { flex: 1; min-width: min(100%,260px); } .cd-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .cd-name { font-family: 'Cinzel', serif; font-size: 22px; color: var(--gold-hi); } .cd-meta { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: .26em; color: rgba(201,169,110,.75); margin-top: 8px; text-transform: uppercase; } .cd-bio { font-family: 'Crimson Pro', serif; font-size: 17px; line-height: 1.8; color: #ddd2ba; margin-top: 14px; } .cd-stages { display: flex; gap: 8px; margin-top: 14px; } .cd-stage { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(201,169,110,.5); background: none; cursor: pointer; padding: 0; } .cd-stage.on { background: var(--gold-bright); border-color: var(--gold-bright); } .cx-wip { margin-top: 30px; padding: 40px 24px; text-align: center; } .cx-wip-t { font-family: 'Cinzel', serif; font-size: 19px; letter-spacing: .2em; color: rgba(230,220,200,.75); } .cx-wip-s { font-family: 'Crimson Pro', serif; font-style: italic; font-size: 15.5px; color: rgba(230,220,200,.5); margin-top: 10px; } /* Playthrough mount */ .cx-flow { margin-top: 20px; position: relative; } .cx-flow-msg { text-align: center; font-family: 'Crimson Pro', serif; font-style: italic; font-size: 16px; color: rgba(230,220,200,.55); padding: 46px 16px; } /* Soundtrack rows */ .st-list2 { max-width: 640px; margin: 20px auto 0; display: flex; flex-direction: column; gap: 10px; } .st-row2 { display: flex; align-items: center; gap: 13px; padding: 13px 16px; border: 1px solid rgba(201,169,110,.5); background: rgba(13,16,34,.8); } .st-row2.sealed { border-color: rgba(201,169,110,.18); } .st-ic { width: 34px; height: 34px; flex: none; border: 1px solid rgba(201,169,110,.5); border-radius: 50%; display: grid; place-items: center; font-size: 13.5px; color: var(--gold-bright); } .st-row2.sealed .st-ic { border-color: rgba(201,169,110,.18); color: rgba(230,220,200,.5); } .st-meta { flex: 1; min-width: 0; } .st-title { font-family: 'Cinzel', serif; font-size: 13.5px; letter-spacing: .1em; color: var(--gold-bright); } .st-row2.sealed .st-title { color: rgba(230,220,200,.5); } .st-sub { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: .18em; color: rgba(230,220,200,.53); margin-top: 3px; text-transform: uppercase; } .st-play { width: 38px; height: 38px; flex: none; border: 1px solid rgba(201,169,110,.5); border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; color: var(--gold-bright); background: none; cursor: pointer; } .st-play:hover { box-shadow: 0 0 16px rgba(201,169,110,.3); } .st-foot { text-align: center; font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: .26em; color: rgba(230,220,200,.53); margin-top: 10px; text-transform: uppercase; } /* Echocasting sealed teaser */ .echo-sealed { position: relative; max-width: 520px; margin: 26px auto 0; text-align: center; padding: 44px 28px 40px; border: 1px dashed rgba(140,130,200,.4); background: rgba(13,15,32,.72); } .echo-disc { position: relative; width: 86px; height: 86px; margin: 0 auto; } .echo-disc::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(rgba(140,130,200,.4) 0 2deg, transparent 2deg 16deg); -webkit-mask: radial-gradient(circle, transparent 86%, #000 86.5%); mask: radial-gradient(circle, transparent 86%, #000 86.5%); animation: ab-spin 120s linear infinite; } .echo-disc-in { position: absolute; inset: 10px; border-radius: 50%; border: 1px dashed rgba(140,130,200,.5); display: grid; place-items: center; font-size: 24px; color: var(--violet-tx); background: rgba(16,15,34,.8); } .echo-title { font-family: 'Cinzel', serif; font-size: 20px; letter-spacing: .24em; color: rgba(230,220,200,.75); margin-top: 20px; } .echo-sealed-lbl { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: .4em; color: var(--violet-tx); margin-top: 8px; text-transform: uppercase; } .echo-blurb { font-family: 'Crimson Pro', serif; font-style: italic; font-size: 16px; line-height: 1.75; color: rgba(230,220,200,.55); margin: 16px auto 0; max-width: 340px; } .echo-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 20px; } @media (prefers-reduced-motion: reduce) { .echo-disc::before { animation: none; } } /* Endings & Achievements */ .end-sec-t { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: .32em; color: rgba(201,169,110,.8); margin-top: 28px; text-transform: uppercase; } .end-sec-t2 { margin-top: 30px; } .ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 12px; margin-top: 14px; } .ach2 { padding: 14px 15px; border: 1px solid rgba(201,169,110,.2); background: rgba(13,16,34,.8); } .ach2.done { border-color: rgba(201,169,110,.55); } .ach2-head { display: flex; align-items: center; gap: 10px; } .ach2-ic { width: 30px; height: 30px; flex: none; border: 1px solid rgba(201,169,110,.2); border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; color: rgba(230,220,200,.65); } .ach2.done .ach2-ic { border-color: rgba(201,169,110,.55); color: var(--gold-bright); } .ach2-name { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: .06em; color: rgba(230,220,200,.65); } .ach2.done .ach2-name { color: var(--gold-bright); } .ach2-sub { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: .12em; color: rgba(230,220,200,.53); margin-top: 3px; line-height: 1.5; text-transform: uppercase; } .ach2-bar { height: 2px; background: rgba(201,169,110,.14); margin-top: 11px; } .ach2-bar > i { display: block; height: 100%; background: rgba(201,169,110,.55); } .ach2.done .ach2-bar > i { background: var(--gold); } .end-groups { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; } .end-group { flex: 1 1 240px; min-width: min(240px,100%); padding: 16px 17px; } .eg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .eg-name { font-family: 'Cinzel', serif; font-size: 16px; color: var(--body-tx); white-space: nowrap; } .eg-era { font-family: 'Raleway', sans-serif; font-size: 9.5px; letter-spacing: .24em; color: rgba(201,169,110,.7); white-space: nowrap; text-transform: uppercase; } .eg-status { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: .16em; color: rgba(230,220,200,.5); margin-top: 12px; padding: 8px 11px; border: 1px solid rgba(201,169,110,.2); background: rgba(8,10,22,.5); text-transform: uppercase; } .eg-status.done { color: var(--good); border-color: rgba(201,169,110,.4); } /* ── Atlas screen (merged map) ────────────────────────────────────────────── */ .atlas-inner { padding-bottom: 110px; } /* flex-start: the map keeps its own height instead of stretching to match a long detail panel (author call, r5). The chart art lives on .atlas-pan so it moves and scales WITH the nodes when exploring. */ .atlas-layout { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 24px; align-items: flex-start; } .atlas-map { position: relative; flex: 1 1 min(560px,100%); height: clamp(400px,56vh,540px); overflow: hidden; } .atlas-map > .tick { z-index: 6; pointer-events: none; } /* Bottom inset reserves a strip for the zoom controls. Node positions are percentages OF this box, so insetting it is what makes a label/control collision impossible rather than merely unlikely. */ .atlas-viewport { position: absolute; inset: 0 0 40px 0; overflow: hidden; touch-action: none; cursor: grab; } .atlas-viewport.grabbing { cursor: grabbing; } .atlas-pan { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; background-image: url('images/backgrounds/atlas-bg.webp'); background-size: cover; background-position: center; } @media (max-width: 640px) { .atlas-pan { background-image: url('images/backgrounds/atlas-bg-mobile.webp'); } } /* A row in the reserved strip, not a stack over the chart. */ .atlas-zoom-ctrls { z-index: 7; flex-direction: row; right: 10px; bottom: 6px; } .atlas-spokes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .atlas-hub { position: absolute; transform: translate(-50%,-50%); width: 74px; height: 74px; z-index: 2; cursor: pointer; border-radius: 50%; border: 1px solid rgba(201,169,110,.5); background: radial-gradient(circle at 50% 40%,rgba(23,27,51,.95),rgba(10,12,28,.95) 75%); box-shadow: 0 0 26px rgba(201,169,110,.22); display: grid; place-items: center; text-align: center; padding: 8px; } .atlas-hub:hover { box-shadow: 0 0 0 5px rgba(201,169,110,.08), 0 0 40px rgba(201,169,110,.3); } .atlas-hub.active { border-color: var(--gold-bright); box-shadow: 0 0 0 5px rgba(201,169,110,.12), 0 0 46px rgba(201,169,110,.4); z-index: 5; } .atlas-hub span { font-family: 'Cinzel', serif; font-size: 10px; line-height: 1.5; letter-spacing: .06em; color: rgba(230,220,200,.85); } /* display:flex+column+center is declared here explicitly: it used to be inherited from the old in-codex Connections atlas block, which was deleted 2026-08-14. */ .atlas-node { position: absolute; transform: translate(-50%,-50%); background: none; border: none; padding: 0; cursor: pointer; z-index: 3; color: inherit; display: flex; flex-direction: column; align-items: center; } .atlas-node.active { z-index: 6; } .atlas-dot { display: grid; place-items: center; margin: 0 auto; border-radius: 50%; overflow: hidden; border: 1px solid rgba(201,169,110,.6); background: rgba(16,19,40,.9); } .atlas-node.era .atlas-dot { width: 46px; height: 46px; border: 1.5px solid rgba(201,169,110,.6); box-shadow: 0 0 16px rgba(201,169,110,.4); } .atlas-node.echo .atlas-dot { width: 30px; height: 30px; } .atlas-node.active .atlas-dot { border-color: var(--gold-bright); box-shadow: 0 0 22px rgba(221,184,122,.55); } .atlas-node.locked .atlas-dot { border: 1px dashed rgba(140,130,200,.55); background: rgba(14,16,34,.85); } .atlas-dot-img { width: 100%; height: 100%; background-size: cover; background-position: center 12%; } .atlas-dot-glyph { font-size: 13.5px; color: var(--gold-bright); } .atlas-node.locked .atlas-dot-glyph { color: var(--violet-tx); } /* Sized against the CHART, not the viewport: .atlas-map is capped at 560px wide (flex-basis min(560px,100%)), so the label geometry is effectively fixed for every screen ≥ ~600px. The closest pair on the chart — ophelia (48%,12%) and lia-the-paper (34%,16%) — is 14% apart, i.e. 78px in a 560px box, so a label wider than that collides at ANY viewport. 104px did. These values keep the widest label under that bound. */ .atlas-node-lbl { display: block; font-family: 'Raleway', sans-serif; font-size: 9px; letter-spacing: .1em; color: rgba(230,220,200,.7); margin: 5px auto 0; max-width: 76px; line-height: 1.3; text-shadow: 0 1px 6px rgba(0,0,0,.9); text-transform: uppercase; } .atlas-node.era .atlas-node-lbl { font-size: 9.5px; color: rgba(221,184,122,.9); } .atlas-node.active .atlas-node-lbl { color: var(--gold-hi); } .atlas-node.locked .atlas-node-lbl { color: rgba(160,150,220,.85); } /* NARROW VIEWPORTS — the root cause of the label pile-up (fixed 2026-08-13). Node positions are percentages and scale with the map; labels are fixed px and do not. So as the chart narrows, the gaps between nodes shrink while the labels stay the same size, and ten labels up to 104px wide cannot fit a ~343px box. Nudging coordinates only moves the collision (tried, measured, reverted). The fix treats both terms: give the chart more vertical room, and let the labels shrink with it. Verified by measuring every label pair at 375/768/1280 in the fully-unlocked state, which is the worst case because real titles are wider than "Sealed". */ @media (max-width: 560px) { /* Only a modest bump. An earlier, larger one (74vh) turned the chart's top-heavy y-span into a visibly empty band at the bottom — the height was never the fix, filling the box was. */ .atlas-map { height: clamp(430px, 60vh, 560px); } .atlas-node-lbl { font-size: 8.5px; max-width: 72px; } .atlas-node.era .atlas-node-lbl { font-size: 9px; } } .atlas-detail { flex: 1 1 min(300px,100%); max-width: 420px; padding: 22px 24px; align-self: flex-start; } .atlas-kick { font-family: 'Raleway', sans-serif; font-size: 10.5px; letter-spacing: .36em; color: var(--gold-bright); border-bottom: 1px solid rgba(201,169,110,.25); padding-bottom: 10px; text-transform: uppercase; } .atlas-title { font-family: 'Cinzel', serif; font-size: 20px; color: var(--gold-hi); margin-top: 14px; } .atlas-body { font-family: 'Crimson Pro', serif; font-size: 17px; line-height: 1.8; color: rgba(230,220,200,.7); margin-top: 10px; } .atlas-bars { margin-top: 18px; } .atlas-bar-row { display: flex; justify-content: space-between; font-family: 'Raleway', sans-serif; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(230,220,200,.55); } .atlas-bar-row2 { margin-top: 12px; } .atlas-bar-n { color: var(--gold-bright); } .atlas-bar-n.violet { color: var(--violet-stat); } .atlas-bar { height: 2px; background: rgba(201,169,110,.15); margin-top: 7px; } .atlas-bar > i { display: block; height: 100%; background: var(--gold-bright); } .atlas-bar.violet { background: rgba(140,130,200,.18); } .atlas-bar.violet > i { background: rgba(160,150,220,.8); } .atlas-visit { width: 100%; margin-top: 20px; padding: 12px 0; text-align: center; border: 1px solid rgba(201,169,110,.45); font-family: 'Raleway', sans-serif; font-size: 11px; letter-spacing: .26em; color: var(--gold-bright); background: none; cursor: pointer; text-transform: uppercase; } .atlas-visit:hover { background: rgba(201,169,110,.1); } /* Echo list inside the era/hub detail panel — the reading surface for every connections entry (the map's five echo nodes are only the spatial subset). */ .atlas-echo-list { margin-top: 18px; border-top: 1px solid rgba(201,169,110,.18); padding-top: 12px; } .atlas-echo-list-t { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: rgba(230,220,200,.53); margin-bottom: 8px; } .atlas-echo-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid rgba(201,169,110,.1); padding: 8px 2px; cursor: pointer; transition: background .25s, border-color .25s; min-height: 44px; } /* was a 34px hit target; the row is wide but was too short to tap reliably */ .atlas-echo-row:hover { background: rgba(201,169,110,.06); } .atlas-echo-row .aer-glyph { flex: 0 0 auto; width: 18px; text-align: center; font-style: normal; font-size: 12px; color: var(--gold-bright); } .atlas-echo-row .aer-title { flex: 1 1 auto; font-family: 'Crimson Pro', serif; font-size: 15.5px; color: rgba(230,220,200,.85); } .atlas-echo-row .aer-state { flex: 0 0 auto; font-size: 10px; color: #8fd6a8; } .atlas-echo-row.locked .aer-glyph { color: rgba(140,130,200,.55); font-size: 10px; } .atlas-echo-row.locked .aer-title { color: rgba(180,170,220,.4); font-style: italic; } .atlas-back { display: inline-block; background: none; border: none; padding: 0 0 12px; cursor: pointer; font-family: 'Raleway', sans-serif; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(201,169,110,.65); transition: color .25s; } .atlas-back:hover { color: var(--gold-bright); } /* ── About (design card stack) ────────────────────────────────────────────── */ .about-inner { max-width: 720px; padding-bottom: 110px; } #s-about .about-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } #s-about .about-content { margin-top: 20px; } #s-about .about-tab { display: none; } #s-about .about-tab.on { display: block; animation: ab-fadeup .4s ease both; } #s-about .about-section { margin-bottom: 12px; } #s-about .about-frows { display: flex; flex-direction: column; gap: 12px; } #s-about .about-frow { display: flex; gap: clamp(11px,3.5vw,14px); padding: clamp(14px,4vw,17px); background: rgba(13,16,34,.75); border: 1px solid rgba(201,169,110,.22); } #s-about .about-fi { width: 34px; height: 34px; flex: none; border: 1px solid rgba(201,169,110,.4); border-radius: 50%; display: grid; place-items: center; color: var(--gold-bright); } #s-about .about-fi svg { width: 17px; height: 17px; } #s-about .about-fi-glyph { font-size: 15px; line-height: 1; font-style: normal; } /* Content & Maturity + What to Expect: the design's violet highlight box. */ #s-about .about-section--violet { border: 1px solid rgba(140,130,200,.3); background: rgba(20,22,44,.5); padding: clamp(14px,4vw,17px); } #s-about .about-section--violet .about-heading { margin-top: 0; } /* What's New: each release entry sits in its own card. */ #about-whatsnew .about-section { border: 1px solid rgba(201,169,110,.22); background: rgba(13,16,34,.6); padding: clamp(14px,4vw,18px); } #about-whatsnew .about-section .about-heading { margin-top: 0; } #s-about .about-ftt { font-family: 'Cinzel', serif; font-size: 17px; letter-spacing: .06em; color: var(--body-tx); } #s-about .about-ftd { font-family: 'Crimson Pro', serif; font-size: 17.5px; line-height: 1.7; color: rgba(230,220,200,.66); margin-top: 5px; } #s-about .about-heading { font-family: 'Raleway', sans-serif; font-size: 11.5px; letter-spacing: .32em; color: rgba(201,169,110,.8); text-transform: uppercase; margin-top: 22px; margin-bottom: 9px; } #s-about .about-body { font-family: 'Crimson Pro', serif; font-size: 18px; line-height: 1.8; color: rgba(230,220,200,.72); margin-top: 7px; } #s-about .about-body.about-muted { color: rgba(230,220,200,.55); } #s-about .about-highlight { color: var(--gold-bright); } #s-about #install-section { padding: 16px 18px; background: rgba(13,16,34,.75); border: 1px solid rgba(201,169,110,.35); margin-top: 16px; } #s-about .install-btn { margin-top: 10px; padding: 12px 24px; background: linear-gradient(170deg,#ddb87a,#b08d52); font-family: 'Raleway', sans-serif; font-size: 12px; letter-spacing: .26em; color: #170f08; font-weight: 600; border: none; cursor: pointer; text-transform: uppercase; } #s-about .about-list { display: flex; flex-direction: column; gap: 7px; margin-top: 9px; } #s-about .about-item { font-family: 'Crimson Pro', serif; font-size: 17.5px; line-height: 1.65; color: rgba(230,220,200,.66); } #s-about .about-heading-lg, #s-about .about-credits-lead { font-family: 'Crimson Pro', serif; font-size: 18px; line-height: 1.85; color: rgba(230,220,200,.72); } /* ── Save slots (pause overlay) ───────────────────────────────────────────── */ #save-slots { display: flex; flex-direction: column; gap: 7px; } .slot-row { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid rgba(201,169,110,.18); background: rgba(8,10,22,.4); } .slot-n { width: 22px; height: 22px; flex: none; border: 1px solid rgba(201,169,110,.4); border-radius: 50%; display: grid; place-items: center; font-family: 'Raleway', sans-serif; font-size: 10px; color: var(--gold-bright); } .slot-info { flex: 1; min-width: 0; font-family: 'Raleway', sans-serif; font-size: 11px; letter-spacing: .06em; color: rgba(230,220,200,.75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .slot-info.empty { color: rgba(230,220,200,.53); } .slot-btn { flex: none; padding: 6px 10px; border: 1px solid rgba(201,169,110,.4); background: none; font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: .1em; color: var(--gold-bright); cursor: pointer; text-transform: uppercase; } .slot-btn:hover { border-color: var(--gold-bright); } .slot-btn.dim { color: rgba(230,220,200,.3); border-color: rgba(201,169,110,.15); } .slot-btn.slot-clear { width: 24px; padding: 6px 0; text-align: center; border-color: rgba(160,90,90,.35); color: rgba(220,150,150,.75); } .slot-btn.slot-clear:hover { border-color: rgba(220,150,150,.8); } /* ── Modal cohesion (feedback) — shift to the celestial ground ───────────── */ /* This and the .act rule below used to also name .pause-inner, the old pause modal's shell. The Settings modal has been .pause-card since e489e6b (2026-07-24) and carries the same gradient, border and .act treatment in its own rules further down, so the .pause-inner halves matched nothing and were dropped 2026-08-14. No visual change: the two modals still agree. */ .feedback-inner { background: linear-gradient(170deg, rgba(15,18,38,.98), rgba(10,12,26,.98)); border: 1px solid rgba(201,169,110,.45); } .pause-overlay, .feedback-overlay { background: rgba(4,5,12,.62); backdrop-filter: blur(4px); } .feedback-inner .fb-type.act { border-color: rgba(201,169,110,.6); background: rgba(201,169,110,.14); color: var(--gold-bright); } /* ── Settings / Pause modal (Atlas build clean card) ─────────────────────── */ .pause-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(4,5,12,.62); backdrop-filter: blur(4px); display: none; padding: 16px; overflow: auto; } .pause-overlay.open { display: flex; flex-direction: column; align-items: center; justify-content: center; animation: none; } .pause-card { position: relative; width: min(480px,100%); box-sizing: border-box; max-height: 94vh; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; overflow-x: hidden; background: linear-gradient(170deg,rgba(15,18,38,.98),rgba(10,12,26,.98)); border: 1px solid rgba(201,169,110,.45); padding: 24px 24px 20px; animation: ab-fadeup .35s ease both; } .pcard-head { display: flex; justify-content: space-between; align-items: center; } .pcard-title { display: flex; align-items: center; gap: 10px; } .pcard-mark { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(201,169,110,.6); display: grid; place-items: center; font-size: 11px; color: var(--gold-bright); } .pcard-title > span:last-child { font-family: 'Cinzel', serif; font-size: 15.5px; letter-spacing: .28em; color: var(--body-tx); text-transform: uppercase; } .pcard-actions { display: flex; gap: 8px; } .pcard-x { width: 30px; height: 30px; border: 1px solid rgba(201,169,110,.3); border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; color: rgba(230,220,200,.7); background: none; cursor: pointer; } .pcard-x:hover { border-color: var(--gold-bright); color: var(--gold-bright); } .psec2 { margin-top: 20px; } .psec2-lbl { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: .32em; color: rgba(201,169,110,.8); border-bottom: 1px solid rgba(201,169,110,.18); padding-bottom: 9px; text-transform: uppercase; } .pause-card::-webkit-scrollbar { display: none; } .pause-card .speed-btns { display: flex; gap: 6px; margin-top: 12px; } .pause-card .speed-btn { flex: 1; text-align: center; padding: 10px 0; background: transparent; border: 1px solid rgba(201,169,110,.18); font-family: 'Raleway', sans-serif; font-size: 10.5px; letter-spacing: .16em; color: rgba(230,220,200,.55); cursor: pointer; text-transform: uppercase; margin: 0; border-radius: 0; } .pause-card .speed-btn:hover { border-color: rgba(221,184,122,.7); color: var(--gold-bright); } .pause-card .speed-btn.act { border-color: rgba(201,169,110,.6); background: rgba(201,169,110,.14); color: var(--gold-bright); } .pmusic-row { display: flex; align-items: center; gap: 14px; margin-top: 14px; } .pause-card .music-mute-btn { flex: none; border-radius: 999px; padding: 8px 14px; } .pmusic-row .vol-slider { flex: 1; accent-color: var(--gold); } .pnow { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: .2em; color: rgba(230,220,200,.53); margin-top: 8px; text-transform: uppercase; } .ptoggle-row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; } .ptoggle-lbl { font-family: 'Raleway', sans-serif; font-size: 11.5px; letter-spacing: .14em; color: rgba(230,220,200,.75); text-transform: uppercase; } .pause-card .ptoggle-btn { flex: none; border-radius: 999px; padding: 7px 16px; min-width: 64px; } .psec-manage { display: flex; flex-direction: column; gap: 8px; } .pause-card .pmenu-btn { width: 100%; text-align: center; padding: 11px 0; border: 1px solid rgba(201,169,110,.3); background: none; font-family: 'Raleway', sans-serif; font-size: 10.5px; letter-spacing: .2em; color: rgba(230,220,200,.7); cursor: pointer; text-transform: uppercase; margin-top: 8px; display: block; } .pause-card .pmenu-btn:hover { border-color: var(--gold-bright); color: var(--gold-bright); } .pause-card .pmenu-btn-danger { border-color: rgba(160,90,90,.4); color: rgba(220,150,150,.75); } .pause-card .pmenu-btn-danger:hover { border-color: rgba(220,150,150,.8); color: rgba(220,150,150,.95); } .pause-card .pmenu-btn-dev { border-style: dashed; border-color: rgba(140,130,200,.5); color: rgba(180,170,220,.85); } .pcard-foot { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; } .pfb-link { text-align: center; font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: .24em; color: rgba(201,169,110,.7); padding: 6px 0; background: none; border: none; cursor: pointer; text-transform: uppercase; } .pfb-link:hover { color: var(--gold-bright); } .presume2 { padding: 13px 0; text-align: center; background: linear-gradient(170deg,#ddb87a,#b08d52); font-family: 'Raleway', sans-serif; font-size: 12px; letter-spacing: .28em; color: #170f08; font-weight: 600; border: none; cursor: pointer; text-transform: uppercase; } .presume2:hover { filter: brightness(1.1); } #save-slots { margin-top: 11px; } /* Pill toggles (Music / UI SFX) + sliding switches (Large Text / Explicit) */ .pill-toggle { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 8px 15px; border-radius: 999px; border: 1px solid rgba(201,169,110,.3); background: none; font-family: 'Raleway', sans-serif; font-size: 9.5px; letter-spacing: .18em; color: rgba(230,220,200,.5); cursor: pointer; text-transform: uppercase; } .pill-toggle:hover { border-color: var(--gold-bright); } .pill-toggle.on { border-color: rgba(221,184,122,.75); color: var(--gold-bright); } .pvol-num { flex: none; width: 26px; text-align: right; font-family: 'Raleway', sans-serif; font-size: 10px; color: rgba(230,220,200,.6); } .pswitch { width: 44px; height: 24px; flex: none; border-radius: 999px; border: 1px solid rgba(201,169,110,.35); position: relative; background: transparent; cursor: pointer; padding: 0; } .pswitch.on { border-color: rgba(221,184,122,.75); background: rgba(201,169,110,.25); } .pswitch-knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: rgba(230,220,200,.4); transition: left .2s ease, background .2s ease; } .pswitch.on .pswitch-knob { left: 23px; background: var(--gold-bright); } /* Large Text — bumps the reader prose + choices */ #reader-container.big-text .beat-block p { font-size: 22px; line-height: 2.05; } #reader-container.big-text .choice-btn-r { font-size: 20px; }