/* ============================================================================ PJSK Viewer — UI styled after Project Sekai: Colorful Stage ---------------------------------------------------------------------------- Design DNA (derived from the official app + colorfulstage.com + pjsekai.sega.jp): · Bright, light background — soft sky/cream gradients with confetti motifs · Pop-flat surfaces: white cards with very soft shadows + rounded corners · Pill-shaped buttons, white with a colored leading icon · Triangle (▲) confetti background pattern in pink/cyan/mint · Rounded gothic typography (M PLUS Rounded 1c / Zen Maru Gothic) · Pink accent (#ff5fb1-ish) used sparingly for emphasis · Unit identity via colored "seal" chips on the side of each card ============================================================================ */ /* Google Fonts are loaded non-blocking from index.html via the rel="preload" + media="print" onload swap pattern. Do NOT add an @import here — it would re-introduce render blocking. */ :root { /* base palette — light, like the official app */ --bg-1: #eaf5ff; /* sky top */ --bg-2: #fbeaf5; /* pink bottom */ --surface: #ffffff; --surface-2: #f7f9ff; --ink: #1a2240; --ink-soft: #58608a; --muted: #8b94bb; --line: #e2e8f5; --line-strong: #cfd6ef; /* Glass surface (sticky top bar, sticky bottom nav). Light theme: white-ish translucent. Dark theme overrides this in the [data-theme="dark"] block below. */ --glass-bg: rgba(255, 255, 255, 0.78); /* Hero card gradient (used by .hero on home + a few other route headers). Theme-aware via dark override below. */ --hero-grad: linear-gradient(135deg, #ffffff 0%, #f4f8ff 100%); /* Inline-code surface (used by ). Theme-aware. */ --code-bg: #eef2fb; --code-fg: #36406b; /* Legacy aliases: a handful of late-added components (episode picker, * event-picker hero info) reference --text / --text-soft instead of * --ink / --ink-soft. Aliasing here means those rules pick up the * dark palette automatically without each call-site needing to be * touched. (C17 follow-up: these were silently falling back to their * hard-coded hex defaults, which collided with the dark surface.) */ --text: var(--ink); --text-soft: var(--ink-soft); --accent: #ff5fb1; /* PJSK pink */ --accent-2: #33d1e6; /* miku cyan */ --accent-3: #88dd44; /* fresh green */ --accent-4: #ffd166; /* highlight yellow */ --accent-violet: #884cc2; /* official-leaning unit colors */ --u-light_sound: #4455dd; /* Leo/need cobalt */ --u-idol: #88dd44; /* MMJ leaf green */ --u-street: #ee1166; /* VBS hot red */ --u-theme_park: #ff9900; /* WxS goldenrod */ --u-school_refusal: #884cc2; /* 25-ji violet */ --u-piapro: #33d1e6; /* VS Miku cyan */ --u-none: #8b94bb; /* shadows */ --shadow-sm: 0 1px 3px rgba(34, 44, 90, 0.08), 0 1px 2px rgba(34, 44, 90, 0.04); --shadow-md: 0 6px 18px rgba(34, 44, 90, 0.10), 0 2px 5px rgba(34, 44, 90, 0.06); --shadow-lg: 0 18px 38px rgba(34, 44, 90, 0.14), 0 6px 12px rgba(34, 44, 90, 0.08); --shadow-pop: 0 8px 0 rgba(34, 44, 90, 0.10); /* slight chunky-shadow for pill buttons */ --radius: 14px; --radius-lg: 22px; --radius-pill: 999px; --font-ui: "M PLUS Rounded 1c", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-display: "Zen Maru Gothic", "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif; } /* ---------------------------------------------------------------------------- Dark theme — applied via (default in index.html). Overrides variables; component CSS that uses var(--surface), var(--ink), etc. automatically picks up dark values. A handful of legacy hardcoded gradients (body background overlays, .hero) are re-declared below for the dark theme. --------------------------------------------------------------------------- */ [data-theme="dark"] { /* base palette — deep blue-violet near-black, warm enough to keep the PJSK personality without being clinical OLED-black */ --bg-1: #11132a; /* deeper top */ --bg-2: #1e1633; /* warm violet bottom */ --surface: #1c2040; /* card body */ --surface-2: #232a52; /* slightly lifted (hovered rows, headers) */ --ink: #eef1ff; /* primary text */ --ink-soft: #b6bee5; /* secondary text */ --muted: #8088b4; /* tertiary / meta */ --line: #2a3060; /* hairline borders */ --line-strong: #3a4280; /* prominent borders */ --glass-bg: rgba(20, 22, 50, 0.78); --hero-grad: linear-gradient(135deg, #232a52 0%, #1c2040 100%); --code-bg: #232a52; --code-fg: #d8def5; /* shadows — dark theme uses darker, slightly more diffuse drop shadows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.22); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.40), 0 2px 5px rgba(0, 0, 0, 0.28); --shadow-lg: 0 18px 38px rgba(0, 0, 0, 0.50), 0 6px 12px rgba(0, 0, 0, 0.34); --shadow-pop: 0 8px 0 rgba(0, 0, 0, 0.40); } /* Dark-theme background overlay: replace the bright sky-pink radial wash with a subtle violet/cyan glow over the deep base gradient. */ [data-theme="dark"] body { background: radial-gradient(1100px 700px at 80% -10%, #1b264d 0%, transparent 60%), radial-gradient(900px 700px at -10% 110%, #2b1840 0%, transparent 55%), linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%); background-attachment: fixed; } /* Reduce confetti opacity in dark mode so it reads as faint ambience, not bright noise. */ [data-theme="dark"] body::before, [data-theme="dark"] body::after { opacity: 0.55; } /* ---------- reset & globals ---------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; color: var(--ink); font-family: var(--font-ui); font-weight: 500; font-size: 15px; line-height: 1.55; letter-spacing: 0.01em; min-height: 100vh; background: radial-gradient(1100px 700px at 80% -10%, #d8efff 0%, transparent 60%), radial-gradient(900px 700px at -10% 110%, #ffe0f0 0%, transparent 55%), linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%); background-attachment: fixed; } /* Triangle confetti motif drawn with CSS — multiple layered SVG data URIs */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: /* pink triangle small */ url("data:image/svg+xml;utf8,"), /* cyan triangle medium */ url("data:image/svg+xml;utf8,"), /* mint triangle large */ url("data:image/svg+xml;utf8,"); background-position: 6% 12%, 84% 28%, 22% 78%; background-repeat: no-repeat; background-size: 28px, 44px, 60px; } /* second sprinkle layer for richness */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); background-position: 92% 8%, 14% 42%, 68% 88%; background-repeat: no-repeat; background-size: 20px, 36px, 14px; } a { color: var(--accent); text-decoration: none; font-weight: 600; } a:hover { color: #e23f96; } img { display: block; max-width: 100%; } code { font-family: ui-monospace, "SF Mono", "JetBrains Mono", monospace; background: var(--code-bg); color: var(--code-fg); padding: 1px 6px; border-radius: 6px; font-size: 0.88em; font-weight: 500; } /* ---------- layout ---------- * * C11: the page is laid out as three stacked rows — a slim top app-bar that * carries the search input, the main content area, and a bottom in-game-style * navigation strip that replaces the old left sidebar. The bottom strip is * sticky so it stays visible while the user scrolls through long lists. * * ┌─────────────────────────────────────────────────────────────┐ * │ #appbar (search · region chip) │ ← sticky top * ├─────────────────────────────────────────────────────────────┤ * │ │ * │ #app (main content — full width) │ * │ │ * ├─────────────────────────────────────────────────────────────┤ * │ #nav (brand · Home · Stories · Characters · ...) │ ← sticky bottom * └─────────────────────────────────────────────────────────────┘ */ body { display: flex; flex-direction: column; min-height: 100vh; position: relative; } /* ---------- top header pills (rank/coins style) ---------- */ .top-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; } .header-pill { background: var(--surface); border-radius: var(--radius-pill); padding: 6px 16px 6px 8px; box-shadow: var(--shadow-sm); display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); font-size: 13px; } .header-pill .ico { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: white; font-size: 14px; } .header-pill .label { color: var(--muted); font-size: 11px; font-weight: 600; margin-right: 4px; text-transform: uppercase; letter-spacing: 0.08em; } .header-pill .val { color: var(--ink); font-weight: 800; } /* ---------- top app-bar (C11) ---------- * Slim sticky banner that carries the search input + region pill. Sits above * #app and scrolls with it; the bottom nav is the persistent chrome. * * C21 briefly promoted this to position: fixed; C23 reverts that — the bar * lives back in the body flex column. Picker pages instead claim more * vertical room by subtracting a larger constant in their viewport-fit * height formula (see .event-picker height: calc(100vh - 350px)). */ #appbar { position: sticky; top: 0; z-index: 11; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px 24px; background: var(--glass-bg); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(34, 44, 90, 0.02); } #appbar .topbar-search { /* Override the legacy sidebar margin; in the appbar we want a fixed width * pill that hugs the right edge of the bar. */ margin: 0; width: clamp(220px, 32vw, 380px); } /* C5d: the unified cluster (q + speaker) needs more pill width to keep both * facets legible at common viewport sizes. Override the single-pill clamp * with a wider one. On viewports below 720px the speaker facet hides via * the media query above, so the q-field reclaims the full width and the * lower bound (260px) is enough for it alone. */ #appbar .topbar-search.topbar-search-cluster { width: clamp(260px, 46vw, 560px); } /* C19: region pill now lives in #appbar (right side) immediately to the left * of the search input. The shared .region styles below already give it a * surface-2 pill look; this just nudges the inner select up a touch and * keeps the pill from shrinking when the search box claims its 380px. */ #appbar .region { flex-shrink: 0; align-self: center; /* C5: a touch of left padding so the new global mute button sitting to * the left of the region pill has breathing room before the pill's * surface-2 background starts. The bar's own `gap: 12px` already keeps * a 12px gap; this is purely visual breathing room inside the pill. */ padding-left: 2px; } @media (max-width: 560px) { /* On very narrow viewports the label inside the region pill ("REGION") is * noisy next to a small select — hide it so the dropdown still fits * alongside the search input. */ #appbar .region label { display: none; } } /* ---------- C5: global mute button ---------- * Lives in #appbar to the left of the region pill. Persists across all * routes (the appbar is outside #view). Backed by GlobalAudio — see * public/js/global-audio.js + docs/GLOBAL_AUDIO.md. * * Two visual states driven by [aria-pressed]: * false → currently UN-muted: render the speaker-with-waves icon * true → currently muted: render the speaker-with-slash icon * The icon SVG is injected as a CSS mask so we can flip it via aria-pressed * without touching the DOM each time the state changes. */ .global-mute-btn { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); cursor: pointer; flex-shrink: 0; transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease; } .global-mute-btn:hover { background: var(--surface-3, var(--surface-2)); border-color: var(--accent, var(--line)); } .global-mute-btn:active { transform: scale(0.96); } .global-mute-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .global-mute-icon { display: block; width: 18px; height: 18px; background-color: currentColor; /* Speaker + waves — unmuted state. Inline SVG path via mask so the icon * inherits text color and works under both light and dark themes. */ -webkit-mask: var(--icon-speaker-on) center / contain no-repeat; mask: var(--icon-speaker-on) center / contain no-repeat; } .global-mute-btn[aria-pressed="true"] .global-mute-icon { -webkit-mask: var(--icon-speaker-off) center / contain no-repeat; mask: var(--icon-speaker-off) center / contain no-repeat; } .global-mute-btn[aria-pressed="true"] { /* Subtle visual cue that audio is muted — dimmed surface + muted text. */ background: var(--surface-1, var(--surface-2)); color: var(--muted); } /* BACKLOG L291 — audio-state overlays. The chrome mute pill carries a * data-audio-state attribute reflecting GlobalAudio.snapshot().loading / * .pendingPlay. We render a ::after layer for each state so the existing * speaker glyph stays visible underneath — the user can still see what the * button does (mute/unmute) and the overlay just communicates the * transient engine state. CSS-only; the JS only flips the attribute. * * - loading: a thin spinning ring around the pill while audio is fetching. * - pending: a slow pulsing accent ring while autoplay is blocked, paired * with the native `title` tooltip set in app.js ("Tap to start audio"). * * Both rings sit inside the pill's circular border so they don't shift * adjacent appbar layout. */ .global-mute-btn[data-audio-state="loading"]::after, .global-mute-btn[data-audio-state="pending"]::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; pointer-events: none; } .global-mute-btn { /* Anchor for the ::after overlays — the button was previously a plain * inline-flex with no positioning context, so the absolutely-positioned * ring would escape to the nearest ancestor (the appbar). */ position: relative; } .global-mute-btn[data-audio-state="loading"]::after { border: 2px solid transparent; border-top-color: var(--accent, currentColor); border-right-color: var(--accent, currentColor); animation: pjsk-mute-spin 0.85s linear infinite; } .global-mute-btn[data-audio-state="pending"]::after { border: 2px solid var(--accent, currentColor); animation: pjsk-mute-pulse 1.4s ease-in-out infinite; } @keyframes pjsk-mute-spin { to { transform: rotate(360deg); } } @keyframes pjsk-mute-pulse { 0%, 100% { opacity: 0.25; transform: scale(1.00); } 50% { opacity: 0.85; transform: scale(1.06); } } @media (prefers-reduced-motion: reduce) { /* Honor the user's motion preference — keep the visual indicator but * stop the animation. The static ring still differentiates the state. */ .global-mute-btn[data-audio-state="loading"]::after, .global-mute-btn[data-audio-state="pending"]::after { animation: none; } } /* Speaker icon assets. Inline SVG data URLs so they're zero-network. * Paths are the canonical Material Symbols Outlined volume_up / volume_off * glyphs (note the Material Symbols viewBox "0 -960 960 960") — verbatim * from fonts.gstatic.com so they match the visual weight of the nav-strip * icons (also Material Symbols Outlined) exactly. */ :root { --icon-speaker-on: url("data:image/svg+xml;utf8,"); --icon-speaker-off: url("data:image/svg+xml;utf8,"); } /* ---------- bottom nav strip (C11) ---------- * In-game-style: brand chip on the left, route pills in the middle, region * select + small attribution on the right. On narrow viewports the strip * stays horizontal but the labels shrink and the attribution hides. * * The flex `order` properties reorder the children visually without moving * them in the DOM (so screen readers / tests still see the legacy order: * appbar → nav → main). #appbar stays first, #app comes second, #nav last * — yielding the top · main · bottom-nav stack we want. */ #appbar { order: 0; } #app { order: 1; } #nav { order: 2; } #nav { background: var(--surface); border-top: 1px solid var(--line); padding: 10px 24px calc(10px + env(safe-area-inset-bottom, 0px)); position: sticky; bottom: 0; display: flex; align-items: center; gap: 14px; box-shadow: 0 -2px 18px rgba(34, 44, 90, 0.05); z-index: 10; overflow-x: auto; scrollbar-width: thin; } /* C18: the nav-brand chip (.brand .brand-mark + .brand-text + .brand-sub) * was removed from the markup so the bottom nav strip is just route pills, * region, and the attribution footer. The build-version badge now lives * inside #nav footer (see #build-version rules in the footer block below). */ /* #build-version is the deploy-time SHA + UTC stamp. It lives inside *