* { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* Respect OS-level reduced motion preferences: skip animations, instant transitions, no smooth scroll. Keeps state/toast/tooltip feedback usable for motion-sensitive users. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } body { font-family: 'Nunito', sans-serif; background: var(--bg); color: var(--ink); line-height: 1.5; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); -webkit-text-size-adjust: 100%; background-image: /* Polka-dot sticker-paper texture — low-contrast so it reads as ambient pattern, not decoration. Echoes Tomodachi Life: Living the Dream's patterned backgrounds. */ radial-gradient(circle, rgba(43, 30, 15, 0.055) 1.1px, transparent 1.5px), radial-gradient(circle at 10% 20%, rgba(254, 157, 190, 0.1) 0%, transparent 40%), radial-gradient(circle at 90% 80%, rgba(120, 222, 244, 0.12) 0%, transparent 45%); background-size: 22px 22px, auto, auto; } ::selection { background: var(--sun); color: var(--ink); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Small round "?" affordance. The tooltip text itself is handled by the floating tooltip system (src/ui/tooltip.js) so nothing can clip it. */ .help { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--cream); border: 1.5px solid var(--ink); font-family: 'Fredoka', sans-serif; font-size: 9px; font-weight: 700; color: var(--ink); cursor: help; line-height: 1; padding: 0; flex-shrink: 0; } .help:hover { background: var(--sun); } /* Expand the tap target to 44×44 without growing the visible glyph — the 14px dot stays a subtle affordance, but phones and trackpads aren't fighting a pinhead-sized hit zone. */ .help::before { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } /* Single floating tooltip appended to . Positioned by JS so it can never be clipped by an overflow-hidden ancestor (the sidebar). */ .tip-floater { position: fixed; top: 0; left: 0; z-index: 1000; pointer-events: none; background: var(--ink); color: var(--cream); padding: 0.5rem 0.75rem; border-radius: 8px; font-family: 'Fredoka', sans-serif; font-size: 0.74rem; font-weight: 500; line-height: 1.4; max-width: min(260px, calc(100vw - 24px)); text-align: center; box-shadow: 2px 2px 0 rgba(43, 30, 15, 0.3); /* Opacity-only hide so offsetWidth/offsetHeight stay readable while the JS measures and positions the box before showing it. */ opacity: 0; transform: translateY(2px); transition: opacity 0.12s ease, transform 0.12s ease; } .tip-floater.show { opacity: 1; transform: translateY(0); } .tip-arrow { position: absolute; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; /* JS sets `left` per host; the 6px offset below keeps the tip centered on the calculated x. */ margin-left: -6px; } .tip-floater[data-placement="top"] .tip-arrow { bottom: -6px; border-top: 6px solid var(--ink); } .tip-floater[data-placement="bottom"] .tip-arrow { top: -6px; border-bottom: 6px solid var(--ink); }