/* ========================================================================== Starloom Studio — Global Styles A moodier, more sophisticated cosmic theme built for a tween, not a toddler: near-black indigo space, electric violet/magenta/teal accents, sleeker rectangular-ish UI instead of bubbly pill shapes, and subtle (not bouncy) motion. Dyslexia-friendly typography is preserved throughout. ========================================================================== */ /* Fonts are bundled locally in fonts/ (no Google Fonts / jsDelivr CDN calls — keeps the "nothing leaves the device" privacy promise literally true and works offline/file://). Lexend is the default body font; OpenDyslexic is an opt-in toggle (My Artist Profile). Both faces declare their own bold weight so text isn't browser-synthesized ("faux bold"). */ @font-face { font-family: 'Lexend'; src: url('../fonts/Lexend-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Lexend'; src: url('../fonts/Lexend-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Lexend'; src: url('../fonts/Lexend-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Lexend'; src: url('../fonts/Lexend-ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'OpenDyslexic'; src: url('../fonts/OpenDyslexic-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { /* OpenDyslexic only ships regular + bold — map the whole 600-800 range used across the UI to the real bold face instead of letting the browser fake-bold the regular face. */ font-family: 'OpenDyslexic'; src: url('../fonts/OpenDyslexic-Bold.woff') format('woff'); font-weight: 600 800; font-style: normal; font-display: swap; } :root { /* Deep, moody space background — closer to black than purple. */ --space-black: #07060f; --space-deep: #0e0a23; --space-mid: #1a1338; --space-card: #181230; /* Electric, jewel-toned cosmic accents (no pastel/bubblegum tones). */ --accent-violet: #8b5cf6; --accent-magenta: #d6336c; --accent-teal: #2dd4bf; --accent-cyan: #22d3ee; --accent-gold: #f2b94d; --star-white: #f5f3ff; --success: #2dd4a8; --retry: #f59e6c; --muted: #6b6490; --text-main: #ece9ff; --text-dim: #a59fc9; --glow: 0 0 16px rgba(139, 92, 246, 0.45); --glow-tight: 0 0 10px rgba(139, 92, 246, 0.35); --radius-lg: 16px; --radius-md: 10px; --radius-sm: 8px; /* Lexend is the default (modern, well-supported, already the fallback); OpenDyslexic is a parent-toggleable option — see .font-opendyslexic below. */ --font-main: 'Lexend', -apple-system, 'Segoe UI', Roboto, sans-serif; --header-height: 66px; --header-height-mobile: 108px; /* taller on narrow screens where the nav row wraps */ /* Size of hero-mode Nova. Drives BOTH her box (.companion-hero) and the space the hero screens reserve for her below the header (see the #app-root push rule near the companion layer) — keeping them in one variable is what stops her body from ever landing on the heading. */ --nova-hero-size: clamp(120px, 22vw, 180px); /* Nova companion "star freckle" glow slots. --nova-glow-1..4 are left UNDEFINED here on purpose — a later task sets them inline (per-student, from progress.js's unlocked colors). --nova-unlit is the fallback dim color every glow slot's var() resolves to until it's lit. */ --nova-unlit: rgba(165, 159, 201, 0.35); /* dim version of --text-dim */ } /* Applied to by app.js on boot when the student has opted into OpenDyslexic in My Artist Profile. Overriding the custom property means every rule using var(--font-main) picks it up with no per-rule changes. */ html.font-opendyslexic { --font-main: 'OpenDyslexic', 'Lexend', -apple-system, 'Segoe UI', Roboto, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; background: radial-gradient(ellipse 900px 500px at 15% 0%, rgba(139, 92, 246, 0.16), transparent 60%), radial-gradient(ellipse 700px 500px at 90% 20%, rgba(45, 212, 191, 0.10), transparent 55%), linear-gradient(180deg, var(--space-deep) 0%, var(--space-black) 70%); color: var(--text-main); font-family: var(--font-main); font-size: 18px; line-height: 1.65; letter-spacing: 0.015em; overflow-x: hidden; } /* The header is position:fixed (see #app-header below) so it's removed from normal document flow — this padding reserves its space at the top of every screen so content never renders underneath it. */ body { padding-top: var(--header-height); } /* Starfield background — finer, dimmer points than a "kid app" sparkle field */ #stars-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 65% 15%, #fff, transparent), radial-gradient(1px 1px at 80% 60%, #fff, transparent), radial-gradient(1px 1px at 35% 75%, #fff, transparent), radial-gradient(1.5px 1.5px at 90% 85%, #fff, transparent), radial-gradient(1px 1px at 10% 90%, #fff, transparent), radial-gradient(1px 1px at 50% 50%, #fff, transparent); background-repeat: repeat; background-size: 600px 600px; opacity: 0.4; animation: drift 140s linear infinite; } @keyframes drift { from { background-position: 0 0; } to { background-position: -1200px 800px; } } /* ---------------- Header ---------------- */ #app-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; min-height: var(--header-height); display: flex; align-items: center; padding: 12px 22px; background: rgba(7, 6, 15, 0.78); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(139, 92, 246, 0.22); } .header-inner { width: 100%; max-width: 1000px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; } .brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 1.2rem; color: var(--star-white); letter-spacing: 0.03em; } .brand-icon { font-size: 1.4rem; filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.6)); } /* The header brand glyph is now the paint-star app mark (SVG) instead of an emoji — size it to match the old 1.4rem cap height; the glow above still applies. */ .brand-icon svg { display: block; width: 1.4rem; height: 1.4rem; } .header-nav { display: flex; gap: 8px; flex: 1; } .nav-btn { font-family: var(--font-main); display: flex; align-items: center; gap: 6px; background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(139, 92, 246, 0.35); color: var(--text-main); border-radius: var(--radius-sm); padding: 8px 14px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .nav-btn:hover { background: rgba(139, 92, 246, 0.22); border-color: var(--accent-violet); transform: translateY(-1px); } .nav-btn.hidden { display: none; } .nav-btn-icon { font-size: 1rem; } /* ---- UI icon set (P2-IDENTITY; sprite lives in index.html) ---- Base for every (body.calm-mode), so the gate is body:not(.calm-mode). Seizure-safety stays intact — no looping flashes, no fast strobes. */ /* Run progress trail: one dot per round, sits above the arena. */ .run-trail { display: flex; gap: 8px; justify-content: center; align-items: center; margin: 8px 0 4px; } .run-trail-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); transition: background 0.2s ease, box-shadow 0.2s ease; } .run-trail-dot.run-dot-done { background: var(--accent-gold); } .run-trail-dot.run-dot-current { background: #fff; box-shadow: 0 0 0 3px rgba(242, 185, 77, 0.35); } /* Between-round + finish juice — one-shot, motion- and Calm-Mode-gated. */ @media (prefers-reduced-motion: no-preference) { body:not(.calm-mode) #minigame-surface.run-beat { animation: run-beat-pulse 500ms ease-out 1; } body:not(.calm-mode) #minigame-surface.run-finish { animation: run-finish-pop 900ms ease-out 1; } } @keyframes run-beat-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } } @keyframes run-finish-pop { 0% { transform: scale(1); } 30% { transform: scale(1.04); } 100% { transform: scale(1); } } /* Pop-the-sounds: floating sound bubbles tapped in word order. Colour comes from the shared .ss-tile-vowel / .ss-tile-consonant classes (gold / cyan) — this base rule deliberately does NOT set background / border-color / color. */ .sound-pop-arena { flex-direction: column; align-items: center; gap: 18px; padding: 12px 4px; } .sound-pop-field { display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; padding: 8px 4px; } .sound-pop-bubble { min-width: 84px; min-height: 84px; padding: 10px 16px; border-radius: 50%; border-width: 3px; border-style: solid; font-family: var(--font-main); font-size: 1.7rem; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 0.12s ease, opacity 0.2s ease, box-shadow 0.2s ease; } .sound-pop-bubble:hover:not(:disabled) { transform: scale(1.07); } .sound-pop-bubble.wobble { animation: minigame-wobble 0.5s ease; } /* Popped bubble: fades + shrinks so the remaining sounds stand out. */ .sound-pop-popped { opacity: 0.25; transform: scale(0.9); cursor: default; } /* Gentle idle bob so the bubbles feel alive. Gated by motion + Calm Mode, and skipped for popped bubbles so their shrink shows cleanly. --bob-delay staggers each bubble so they don't bob in sync. */ @media (prefers-reduced-motion: no-preference) { body:not(.calm-mode) .sound-pop-bubble:not(.sound-pop-popped) { animation: sound-pop-bob 2.8s ease-in-out infinite; animation-delay: var(--bob-delay, 0s); } } @keyframes sound-pop-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* ---------------- Per-planet mini-game theming (Phase 3, Wave 4a) ---------- A LIGHT reskin so each planet's games feel like that planet: the four games pick up the CURRENT WORLD's accent colors. js/screens/minigame.js sets two custom properties + a `game-theme-` class on the stable `.lesson-card` wrapper of the mini-game screen; the rules below read those variables to tint the backdrop and glow the game targets. SCOPE = colors/backdrop only (owner decision — deeper mechanics are Phase 3.5). NO new animation is added here (seizure-safety stays exactly as-is); we only recolor existing static/one-shot styles. SAFE FALLBACKS: every var() has a fallback equal to the game's ORIGINAL color, so if minigame.js can't resolve a world (StarloomWorld absent on the file:// edge, tests, a partial load) the games look completely unchanged. CONTRAST (dyslexia-friendly rule): backdrop tints are kept very light (a low-opacity wash via a ::before overlay, never a saturated fill) so word/ number text and tap targets stay high-contrast. Touch targets are unchanged. ------------------------------------------------------------------------- */ /* Backdrop wash: a soft per-world tint behind the play area. Applied as a low-opacity overlay UNDER the game content (::before, z-index below the arena's children) so it never washes out the high-contrast targets/text. The arena is positioned so the absolutely-placed overlay is contained. */ /* NOTE: matched by attribute ([class*="game-theme-"]) instead of naming each world id — the old per-world lists silently skipped Zephyra and Lunara when those worlds shipped (untheme games at L13+). minigame.js is the only emitter of game-theme- classes, so the blanket match is safe and every future world is themed for free. */ [class*="game-theme-"] .minigame-arena { position: relative; border-radius: var(--radius-lg); } [class*="game-theme-"] .minigame-arena::before { content: ''; position: absolute; inset: -6px; /* Negative z-index so the wash sits BEHIND every game target/label without us having to touch each child's positioning. (An earlier draft lifted the children with `position: relative`, which clobbered Star Path's absolutely- positioned stars/line — this keeps their layout untouched.) */ z-index: -1; border-radius: var(--radius-lg); pointer-events: none; /* never intercept taps meant for targets */ /* A gentle radial wash in the world's soft accent. Low opacity keeps it a TINT, not a fill — text/targets above stay high-contrast. */ background: radial-gradient( ellipse at 50% 40%, var(--game-accent-soft, transparent), transparent 72% ); opacity: 0.12; } /* Star Catch / Rhyme Time / Which Word? — the tappable word-stars glow in the world's accent instead of the fixed gold. The white word text + dark halo are untouched, so readability is identical. */ [class*="game-theme-"] .minigame-star-glyph { filter: drop-shadow(0 0 10px var(--game-accent, rgba(242, 185, 77, 0.55))); } [class*="game-theme-"] .minigame-star.caught .minigame-star-glyph { filter: drop-shadow(0 0 18px var(--game-accent, rgba(242, 185, 77, 0.95))); } /* Star Path — the traced constellation line, the revealed figure + lit stars take the world accent (falling back to the original gold). The figure rides the SAME override as the line so the two can never mismatch. */ [class*="game-theme-"] .star-path-line, [class*="game-theme-"] .star-figure { stroke: var(--game-accent, var(--accent-gold)); } [class*="game-theme-"] .minigame-pathstar.lit::before { box-shadow: 0 0 12px var(--game-accent, rgba(255, 255, 255, 0.95)); } /* Constellation Canvas (paint-pop) — the canvas frame + completion glow take the world accent. The rich fixed 12-color painting palette is UNCHANGED (it is the point of that game); only the frame/glow are reskinned. */ [class*="game-theme-"] .cc-canvas { border-color: var(--game-accent-soft, rgba(139, 92, 246, 0.22)); } [class*="game-theme-"] .cc-canvas.cc-canvas-revealed { box-shadow: 0 0 36px 10px var(--game-accent, rgba(139, 92, 246, 0.5)), inset 0 0 28px var(--game-accent-soft, rgba(139, 92, 246, 0.2)); } /* ---------------- Game Tester (Parent Zone tool) ---------------- A list of every mini-game with a Play button for QA-ing each game individually. Only reachable behind the Parent PIN. Dyslexia-friendly spacing, high contrast — same design language as other parent tools. */ /* The container for the whole game list. Stacks rows vertically with generous spacing so the Play buttons are easy to tap on any device. */ .game-tester-list { display: flex; flex-direction: column; gap: 12px; margin: 18px 0; } /* One row per game: name on the left, type badge in the middle, Play button on the right. Wraps gracefully on very narrow screens. */ .game-tester-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(139, 92, 246, 0.18); border-radius: var(--radius-md); padding: 14px 16px; } /* Game name — large, white, dyslexia-friendly. Takes up available space so the type badge and button stay right-aligned. */ .game-tester-name { flex: 1; font-size: 1.1rem; font-weight: 700; color: var(--star-white); min-width: 120px; } /* Small pill badge showing the game type (reading / reward). Helps the parent know whether the game involves words or is a pure brain-break. */ .game-tester-type { font-size: 0.78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; } /* "reading" games: violet tint — they use the student's current level words. */ .game-tester-type-reading { background: rgba(139, 92, 246, 0.22); color: var(--accent-violet); border: 1px solid rgba(139, 92, 246, 0.45); } /* "reward" games: gold tint — they are pure brain-break games, no words. */ .game-tester-type-reward { background: rgba(255, 200, 87, 0.18); color: var(--accent-gold); border: 1px solid rgba(255, 200, 87, 0.45); } /* ========================================================================== My Gallery screen — saved Constellation Canvas artwork ========================================================================== */ /* Responsive card grid. auto-fill means as many columns as fit at 150 px each; on a phone this typically gives 2 columns, on a tablet 3–4. */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; padding: 12px 0 24px; width: 100%; } /* Each card is a quiet dark panel with a subtle violet border — cosmic, calm. */ .gallery-card { background: var(--space-card); border: 1px solid rgba(139, 92, 246, 0.3); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 10px 10px 12px; gap: 8px; /* No hover transform here — this is a static display, not a button. */ } /* The SVG thumbnail fills the card width and has a fixed square aspect ratio so every piece of art sits in the same-sized frame regardless of how many dots it contains. 120 px is large enough to see the shape at a glance. */ .gallery-thumb-svg { width: 100%; aspect-ratio: 1; border-radius: var(--radius-sm); display: block; max-width: 120px; } /* Shape name caption below the thumbnail — small, soft, readable. */ .gallery-card-caption { font-size: 0.85rem; color: var(--star-white); text-align: center; margin: 0; font-family: var(--font-main); letter-spacing: 0.03em; } /* Empty-state message — centered, calm, not a sad "nothing here" wall of text. */ .gallery-empty-msg { grid-column: 1 / -1; /* span all columns so it centres in the grid */ text-align: center; color: rgba(255, 255, 255, 0.6); font-size: 1.05rem; font-family: var(--font-main); padding: 32px 16px; line-height: 1.6; } /* Honour the user's reduced-motion preference — no new animations were added for the gallery, so nothing to disable here. The grid itself is static. */ /* ============================================================ Cosmic Arcade hub (js/screens/arcade.js) The child-facing free-play front door: a grid of game cards she can tap to replay any mini-game and earn stardust. ACCESSIBILITY / SEIZURE SAFETY: - NO new looping or flashing animations are added here. - The only motion is the same gentle hover lift used on every .big-tile (transform: translateY, covered by the existing prefers-reduced-motion block above which sets animation- duration:0.001ms and collapses transitions to near-instant). - All tap targets are large (min 160px wide, generous padding). - High contrast: white text on dark cosmic card backgrounds. ============================================================ */ /* The "Cosmic Arcade" home tile gets the electric teal accent to set it apart from the lesson/reading tiles (which use violet). Reuses .big-tile base styles — only the accent colour differs. */ .tile-arcade { border-color: rgba(45, 212, 191, 0.35); /* teal border hint */ } .tile-arcade:hover { border-color: rgba(45, 212, 191, 0.7); box-shadow: 0 12px 32px rgba(45, 212, 191, 0.2); } /* Responsive grid for the arcade hub cards. auto-fill lets it flow from 1 column on small phones to 2–3 on tablet, naturally, without any JS breakpoint logic. */ .arcade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; margin-top: 24px; width: 100%; padding-bottom: 32px; /* breathing room above the bottom of the viewport */ } /* Each game card is a large tap target styled as a compact dark panel. It mirrors the .big-tile aesthetic (same dark gradient, same rounded corners, same gentle hover lift) but at a tighter size so 6 cards fit comfortably on screen without scrolling on most tablets. */ .arcade-card { font-family: var(--font-main); background: linear-gradient(165deg, rgba(26, 19, 56, 0.88), rgba(14, 10, 35, 0.95)); border: 1px solid rgba(45, 212, 191, 0.22); /* teal border matches the tile */ border-radius: var(--radius-lg); padding: 22px 14px 18px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 7px; /* Touch-friendly min size — at least 48×48 px tap area per a11y guidelines, but in practice the card is much larger. */ min-height: 140px; /* Same gentle lift transition as .big-tile — covered by reduced-motion. */ transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .arcade-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(45, 212, 191, 0.18); border-color: rgba(45, 212, 191, 0.55); } .arcade-card:focus-visible { outline: 2px solid var(--accent-teal); outline-offset: 3px; } /* Large sprite icon — decorative, aria-hidden in the DOM. */ .arcade-card-icon { font-size: 2rem; line-height: 1; } /* Batch-4 icon accents: each arcade card keeps its own colour, matching the home grid's treatment (Star Catch's gold star and Paint Pop's palette dots come from the sprite itself). */ .arcade-card-icon .ui-icon { display: block; } .arcade-icon-rhyme-time { color: #ff5ea8; } /* pink — music */ .arcade-icon-word-listen { color: var(--accent-cyan); } /* cyan — ear */ .arcade-icon-sound-studio { color: var(--accent-violet); } /* violet — tiles */ .arcade-icon-star-path { color: var(--accent-teal); } /* teal — constellation */ /* Game name — medium weight, dyslexia-friendly font, high contrast white. */ .arcade-card-name { font-weight: 700; font-size: 0.98rem; color: var(--star-white); text-align: center; letter-spacing: 0.01em; line-height: 1.3; } /* Sub-label — smaller, dimmed. "Earns stardust ✨" vs "Just for fun". Uses text-dim (soft lavender) so it reads as secondary info, not a score. */ .arcade-card-sub { font-size: 0.80rem; color: var(--text-dim); text-align: center; line-height: 1.4; } /* --- read-along highlighting --- When the child taps "Hear it" in Sentence Quest or Story Time, each word of the text is wrapped in a and the one currently being spoken gets .read-along-active added to it so she can follow along karaoke-style. Design decisions: - Warm gold background + slightly darker text — high contrast without red. - Gentle transition so the highlight slides from word to word (reduced- motion collapses it to nearly instant via the block at line ~294 above). - Inline display so it wraps naturally inside the existing paragraph. - No border-radius, no animation loop — avoids any strobe risk. - Never red, never a score, never a failure state. ---------------------------------------------------------------------- */ .read-along-word { display: inline; /* Small breathing room around each word so the highlight doesn't crowd. */ padding: 0 2px; border-radius: 3px; /* Smooth the highlight appearing/disappearing (no flash). */ transition: background-color 0.12s ease, color 0.12s ease; } /* The currently-spoken word: a soft, TRANSLUCENT teal glow against the dark cosmic theme — visible enough to follow along, but gentler than the old solid gold (owner felt gold was too contrasty). The bright text is KEPT (no dark-on- light flip), so the word stays easy to read; a teal underline doubles the cue for anyone who finds colour alone hard to track. Never red / failure-coloured. */ .read-along-word.read-along-active { background-color: rgba(45, 212, 191, 0.32); /* --accent-teal at low opacity */ color: var(--star-white, #f5f3ff); border-radius: 4px; text-decoration: underline; text-decoration-color: rgba(45, 212, 191, 0.85); text-underline-offset: 3px; } /* --- end read-along highlighting --- */ /* ============================================================ Nova companion layer (#companion-layer / #companion-nova) ============================================================ Nova is a silent, decorative cosmic-critter guide — the tutor/Star Log carry her spoken lines, she never gets her own TTS. This is v1 placeholder art (a simple flat-fill critter); the SVG's structural contract (data-pose groups, 4 nova-glow-N slots, no external/script content) is designed so later art is a drop-in replacement. A later screen-glue task (Task 5) will, on #companion-layer: - remove the `hidden` attribute to show it - toggle `.companion-hero` / `.companion-small` for size+placement - add `.companion-animate` to fire the reveal once, and remove it again on `animationend` ============================================================ */ /* Base: fixed so Nova floats independent of page scroll/layout, and inert to touch/mouse (purely decorative, aria-hidden). Position/size come from the .companion-hero / .companion-small modifiers below so an unpositioned layer never blocks anything. IMPORTANT: `display` is only ever set inside a `:not([hidden])` rule below — never directly on `#companion-layer` — so the native `hidden` attribute's UA-stylesheet `display:none` always wins when present. An ID-selector `display` rule on `#companion-layer` itself would out-specificity that and defeat `hidden`. */ #companion-layer { position: fixed; z-index: 45; /* above page content, below the profile menu (60) */ pointer-events: none; } #companion-layer:not([hidden]) { display: flex; align-items: center; justify-content: center; } #companion-nova { width: 100%; height: 100%; display: block; } /* .companion-hero — a large top-center "hero" perch for the celebration beats (welcome, unlock, Star Log). Pinned just under the fixed header (NOT a % of viewport height) so her band is a fixed size regardless of screen height, and the hero screen's content is pushed clear of that band by the rule below. Earlier this used top:16% + up to 240px and her opaque body landed right on top of the vertically-centered heading on wider screens. */ #companion-layer.companion-hero { top: calc(var(--header-height) + 10px); left: 50%; transform: translateX(-50%); width: var(--nova-hero-size); height: var(--nova-hero-size); } /* Reserve Nova's hero band so nothing centers up underneath her. #companion-layer sits immediately before #app-root in the DOM, so this sibling selector can top-align the hero screen's content and pad it down past her. Scoped to .companion-hero, so every non-hero screen keeps its normal centered layout. */ #companion-layer.companion-hero ~ #app-root { align-items: flex-start; padding-top: calc(var(--header-height) + var(--nova-hero-size) + 24px); } /* At ≤380px the header wraps to two rows (--header-height-mobile), so pin Nova and reserve her band against that taller header instead. This block MUST stay after the two rules above: a media query adds no specificity, so between equal selectors the later source position is what makes these win when it matches. */ @media (max-width: 380px) { #companion-layer.companion-hero { top: calc(var(--header-height-mobile) + 10px); } #companion-layer.companion-hero ~ #app-root { padding-top: calc(var(--header-height-mobile) + var(--nova-hero-size) + 24px); } } /* .companion-small — a small corner "studio perch" presence used on band screens (home, canvas, arcade, etc.) and reserved-level reads. */ #companion-layer.companion-small { bottom: 16px; right: 16px; width: 72px; height: 72px; } /* ---- Pose visibility ---- Hide every pose group by default, then show only the one whose data-pose matches the root