/* ============================================================ css/styles.css Pixl — self-contained stylesheet (no external fonts, no CDN). Two themes (pastel / retro) are driven by [data-theme] on ; all canvas pixel-art colors live in js/data/palettes.js and stay in sync with the tokens below by design intent. ============================================================ */ /* ---------- Reset --------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } /* Author rules below set explicit `display` on .screen/.overlay-panel/.toast (same specificity as the UA [hidden] rule), which would otherwise win over [hidden]'s display:none since author-origin rules beat UA-origin rules at equal specificity. Force it back, regardless of any other display rule. */ [hidden] { display: none !important; } body { margin: 0; overflow: hidden; -webkit-tap-highlight-color: transparent; text-rendering: optimizeLegibility; } button { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } button:disabled { cursor: default; opacity: 0.5; } ul { margin: 0; padding: 0; list-style: none; } h1, h2, h3, p { margin: 0; } img, svg, canvas { display: block; } /* ---------- Theme tokens --------------------------------------------- */ :root, html[data-theme="pastel"] { --bg: #fdf3f7; --panel: #ffffff; --panel-border: #f0d9e4; --text: #4a3f55; --text-muted: #8a7c94; --accent: #f6c3d8; --accent-dark: #e88aa6; --bar-track: #f0e3ea; --bar-hunger: #f2a65a; --bar-happiness: #ff8fb1; --bar-energy: #7ab8ff; --bar-hygiene: #7fd9c4; --bar-health: #8fd17a; --danger: #e2566b; --radius-lg: 22px; --radius-md: 14px; --radius-sm: 9px; --border-w: 2px; --font-display: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, sans-serif; --font-body: "Segoe UI", system-ui, -apple-system, sans-serif; --shadow-card: 0 10px 28px -12px rgba(122, 107, 134, 0.35); --step-shadow: none; } html[data-theme="retro"] { --bg: #1c1633; --panel: #2a2050; --panel-border: #4a3c7a; --text: #f5f0ff; --text-muted: #b3a8d9; --accent: #ff7a3c; --accent-dark: #d11e3a; --bar-track: #140f26; --bar-hunger: #ff8c1a; --bar-happiness: #ff3c7a; --bar-energy: #3cc8ff; --bar-hygiene: #3ddc8a; --bar-health: #7aff5a; --danger: #ff3c3c; --radius-lg: 0px; --radius-md: 0px; --radius-sm: 0px; --border-w: 3px; --font-display: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-body: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --shadow-card: 0 0 0 var(--border-w) #0a0716, 5px 5px 0 0 #0a0716; /* The pixel-stepped border: a signature retro-chrome trick, used on primary chrome only (buttons, cards) so it reads as a choice, not decoration sprayed everywhere. */ --step-shadow: 2px 0 0 0 var(--panel-border), -2px 0 0 0 var(--panel-border), 0 2px 0 0 var(--panel-border), 0 -2px 0 0 var(--panel-border); } body { background: var(--bg); color: var(--text); font-family: var(--font-body); } /* ---------- App shell / safe areas ------------------------------------ */ #app { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } #play-field { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: calc(env(safe-area-inset-top) + 8px) env(safe-area-inset-right) calc(env(safe-area-inset-bottom) + 8px) env(safe-area-inset-left); touch-action: none; } #game-canvas { image-rendering: pixelated; image-rendering: -moz-crisp-edges; border-radius: var(--radius-sm); } /* ---------- Screens / overlay fade transitions ------------------------- */ .screen, .overlay-panel, .toast { opacity: 0; transition: opacity 0.28s ease; } .screen.visible, .overlay-panel.visible, .toast.visible { opacity: 1; } html.reduced-motion .screen, html.reduced-motion .overlay-panel, html.reduced-motion .toast { transition: opacity 0.01s linear; } .screen { position: absolute; inset: 0; display: flex; flex-direction: column; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); pointer-events: none; } .screen.visible { pointer-events: auto; } /* ---------- Intro flow -------------------------------------------------- */ #screen-intro { justify-content: space-between; } .intro-track { flex: 1; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .intro-track::-webkit-scrollbar { display: none; } .intro-step { flex: 0 0 100%; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px 28px; text-align: center; } .intro-step:not(.intro-step--transparent) { background: var(--panel); margin: 12px; border-radius: var(--radius-lg); border: var(--border-w) solid var(--panel-border); box-shadow: var(--shadow-card); } .intro-step--transparent { background: transparent; pointer-events: none; justify-content: flex-start; padding-top: 8vh; } .intro-step--transparent > * { pointer-events: auto; } #step-egg.intro-step--transparent { justify-content: flex-end; padding-top: 0; padding-bottom: 14vh; } .intro-title { font-family: var(--font-display); font-size: clamp(2.6rem, 14vw, 3.6rem); letter-spacing: 0.02em; color: var(--accent-dark); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.08); } .intro-tagline { color: var(--text-muted); font-size: 0.95rem; } .intro-step h2 { font-family: var(--font-display); font-size: 1.3rem; } .intro-step p { color: var(--text-muted); line-height: 1.5; max-width: 30ch; } .needs-list { display: flex; flex-direction: column; gap: 8px; font-size: 1.05rem; } .needs-list li { display: flex; align-items: center; gap: 10px; } .need-icon { font-size: 1.2rem; } .egg-step-title { color: var(--accent-dark); } .egg-step-hint { color: var(--text-muted); font-size: 0.9rem; } .choice-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .choice-col { display: flex; flex-direction: column; gap: 10px; width: 100%; } .swatch { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 16px; border-radius: var(--radius-md); border: var(--border-w) solid var(--panel-border); font-size: 0.85rem; min-width: 44px; min-height: 44px; } .swatch.selected { border-color: var(--accent-dark); box-shadow: 0 0 0 2px var(--accent); } .swatch-preview { width: 38px; height: 38px; border-radius: var(--radius-sm); border: 2px solid rgba(0, 0, 0, 0.12); } .swatch--pastel .swatch-preview { background: linear-gradient(135deg, #ffd9a8, #f6c3d8); } .swatch--retro .swatch-preview { background: linear-gradient(135deg, #ff7a3c, #3cc8ff); } .difficulty-option { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 16px; border-radius: var(--radius-md); border: var(--border-w) solid var(--panel-border); text-align: left; min-height: 44px; } .difficulty-option strong { font-family: var(--font-display); font-size: 1rem; } .difficulty-option span { color: var(--text-muted); font-size: 0.82rem; } .difficulty-option.selected { border-color: var(--accent-dark); box-shadow: 0 0 0 2px var(--accent); } .intro-nav { display: flex; gap: 10px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); pointer-events: auto; } .nav-btn { flex: 1; min-height: 48px; border-radius: var(--radius-md); border: var(--border-w) solid var(--panel-border); background: var(--panel); font-family: var(--font-display); font-size: 0.95rem; } .nav-btn--primary { background: var(--accent); border-color: var(--accent-dark); color: var(--text); } .nav-btn--danger { background: var(--danger); border-color: var(--danger); color: #fff; } #intro-back { flex: 0 0 84px; } /* ---------- Game screen / HUD -------------------------------------- */ #screen-game { justify-content: space-between; } #hud-top, #hud-bottom { pointer-events: auto; transition: opacity 0.2s ease, transform 0.2s ease; } #hud-top.hidden-during-minigame, #hud-bottom.hidden-during-minigame { opacity: 0; transform: translateY(-6px); pointer-events: none; } #hud-bottom.hidden-during-minigame { transform: translateY(6px); } #hud-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px; } .stat-bars { flex: 1; display: flex; gap: 6px; } .stat-bar { flex: 1; display: flex; align-items: center; gap: 4px; background: var(--panel); border: var(--border-w) solid var(--panel-border); border-radius: var(--radius-sm); padding: 4px 6px; min-width: 0; } .stat-icon { font-size: 0.85rem; flex: 0 0 auto; } .bar-track { flex: 1; height: 8px; background: var(--bar-track); border-radius: 5px; overflow: hidden; min-width: 0; } .bar-fill { height: 100%; width: 80%; border-radius: 5px; transition: width 0.35s ease; } html.reduced-motion .bar-fill { transition: width 0.05s linear; } .bar-fill--hunger { background: var(--bar-hunger); } .bar-fill--happiness { background: var(--bar-happiness); } .bar-fill--energy { background: var(--bar-energy); } .bar-fill--hygiene { background: var(--bar-hygiene); } .bar-fill--health { background: var(--bar-health); } .stat-bar.low .bar-fill { animation: barPulse 1.3s ease-in-out infinite; } html.reduced-motion .stat-bar.low .bar-fill { animation: none; } @keyframes barPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } } .icon-btn { flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--panel); border: var(--border-w) solid var(--panel-border); font-size: 1.1rem; } #hud-bottom { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); } .action-btn { min-height: 56px; min-width: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--panel); border: var(--border-w) solid var(--panel-border); border-radius: var(--radius-md); } .action-icon { font-size: 1.25rem; } .action-label { font-size: 0.62rem; color: var(--text-muted); } .action-btn:active:not(:disabled) { transform: translateY(1px); } /* ---------- Overlay panels (settings / chooser / death) ----------------- */ .overlay-panel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px env(safe-area-inset-right) calc(20px + env(safe-area-inset-bottom)) env(safe-area-inset-left); background: rgba(20, 15, 30, 0.45); pointer-events: none; } .overlay-panel.visible { pointer-events: auto; } .overlay-card { width: 100%; max-width: 320px; max-height: 90%; overflow-y: auto; background: var(--panel); border: var(--border-w) solid var(--panel-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 20px; display: flex; flex-direction: column; gap: 16px; text-align: center; } #minigame-chooser .overlay-card, #settings-panel .overlay-card { text-align: left; } .overlay-card-header { display: flex; align-items: center; justify-content: space-between; } .overlay-card-header h2 { font-family: var(--font-display); font-size: 1.15rem; } .settings-section { display: flex; flex-direction: column; gap: 8px; } .settings-section h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .chip { padding: 10px 14px; border-radius: var(--radius-md); border: var(--border-w) solid var(--panel-border); background: var(--bg); font-size: 0.85rem; min-height: 44px; } .chip.selected { border-color: var(--accent-dark); background: var(--accent); } .chip--big { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; } .chip--big strong { font-family: var(--font-display); } .chip--big span { color: var(--text-muted); font-size: 0.78rem; } .checkbox-row { display: flex; align-items: center; gap: 10px; min-height: 44px; } .checkbox-row input { width: 20px; height: 20px; } .hint-text { font-size: 0.78rem; color: var(--text-muted); line-height: 1.4; } .hint-text--muted { opacity: 0.7; text-align: center; } /* ---------- Toast --------------------------------------------------- */ .toast { position: absolute; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--panel); border: var(--border-w) solid var(--panel-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 10px 18px; font-size: 0.85rem; max-width: 80vw; text-align: center; pointer-events: none; z-index: 5; } /* ---------- Focus visibility (a11y) ----------------------------------- */ button:focus-visible, input:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; } /* ---------- Small-phone tightening (e.g. iPhone SE, ~375px) ----------- */ @media (max-width: 380px) { .intro-step { padding: 18px 18px; gap: 10px; } .intro-title { font-size: 2.4rem; } .action-label { font-size: 0.56rem; } .stat-icon { display: none; } } @media (max-height: 620px) { .intro-step--transparent { padding-top: 4vh; } #step-egg.intro-step--transparent { padding-bottom: 8vh; } }