/* ============================================================ ToyBox — styles Single-file CSS, dark on bright play colors, iPad-first. ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; } html, body { /* dvh = dynamic viewport height — handles iOS Safari URL bar resize. */ height: 100dvh; overflow: hidden; overscroll-behavior: none; } body { font-family: 'Nunito', -apple-system, system-ui, sans-serif; background: var(--bg, #FFF8F0); touch-action: manipulation; /* Honor iPad notch / home indicator. */ padding-top: env(safe-area-inset-top); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); } /* ─── Theme tokens. Themes flip these via [data-theme] on . ─── */ :root, :root[data-theme="meadow"] { --bg: #FFF8F0; --bg-1: #A8E6CF; --bg-2: #FFE0B2; --sun: #FFB800; --water: #2E86AB; --leaf: #33C44B; --berry: #E84393; --cloud: #F7F7F7; --bark: #5D4037; --ink: #2A2A2A; --shadow: rgba(0, 0, 0, 0.10); } :root[data-theme="ocean"] { --bg: #E3F2FD; --bg-1: #81D4FA; --bg-2: #B2EBF2; --sun: #FFD54F; --water: #0277BD; --leaf: #00ACC1; --berry: #EC407A; --cloud: #FFFFFF; --bark: #1A237E; --ink: #102A43; --shadow: rgba(2, 119, 189, 0.18); } :root[data-theme="space"] { --bg: #1A1A2E; --bg-1: #16213E; --bg-2: #0F3460; --sun: #FFD23F; --water: #4D9DE0; --leaf: #7FE7CB; --berry: #E15DF0; --cloud: #E5E5F7; --bark: #533D63; --ink: #F1F1F6; --shadow: rgba(255, 210, 63, 0.20); } :root[data-theme="forest"] { --bg: #F4F1DE; --bg-1: #C7E9B0; --bg-2: #FFD4A3; --sun: #F4A261; --water: #2A9D8F; --leaf: #588157; --berry: #BC4749; --cloud: #FFFCF2; --bark: #3F2B1F; --ink: #1B2A1B; --shadow: rgba(63, 43, 31, 0.15); } :root[data-theme="circus"] { --bg: #FFFBE7; --bg-1: #FFD3DA; --bg-2: #BDE0FE; --sun: #FFC93C; --water: #5390D9; --leaf: #80B918; --berry: #E63946; --cloud: #FFFFFF; --bark: #6A4C93; --ink: #1D3557; --shadow: rgba(230, 57, 70, 0.18); } /* ─── Top bar (parent controls) ─── */ #topbar { position: fixed; top: calc(env(safe-area-inset-top) + 0.5rem); right: calc(env(safe-area-inset-right) + 0.5rem); z-index: 999; display: flex; gap: 0.5rem; } .topbar-btn { width: 3rem; height: 3rem; border: 2px solid rgba(0, 0, 0, 0.08); border-radius: 0.875rem; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 1.2rem; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 6px var(--shadow); transition: transform 0.12s ease; } .topbar-btn:active { transform: scale(0.92); } /* ─── Play arena ─── */ #arena { position: fixed; inset: 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0.8rem; padding: 4rem 1rem 1rem; padding-top: calc(env(safe-area-inset-top) + 4rem); padding-bottom: calc(env(safe-area-inset-bottom) + 1rem); overflow-y: auto; background: radial-gradient(circle at 20% 80%, var(--bg-1) 0%, transparent 45%), radial-gradient(circle at 80% 20%, var(--bg-2) 0%, transparent 45%), var(--bg); -webkit-overflow-scrolling: touch; } /* ─── Toy tile ─── */ .toy { touch-action: none; cursor: grab; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; position: relative; border-radius: 1rem; overflow: hidden; will-change: transform, left, top; transition: transform 0.12s ease, box-shadow 0.12s ease; box-shadow: 0 2px 6px var(--shadow); -webkit-tap-highlight-color: transparent; background: var(--cloud); } .toy:active { cursor: grabbing; transform: scale(1.1); box-shadow: 0 8px 22px var(--shadow); } .toy.custom { outline: 3px dashed rgba(255, 255, 255, 0.55); outline-offset: -6px; } /* Photo toys — image fills the tile */ .toy--photo { background: var(--cloud); padding: 0; } .toy--photo > img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; } /* Letter tiles — big bold character on a solid colored background. */ .toy--letter { font-family: 'Bangers', cursive; letter-spacing: 0; } .toy--letter > .glyph { font-size: 3.6rem; font-weight: 900; line-height: 1; color: inherit; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.12); } .toy--letter.toy--sm > .glyph { font-size: 2.4rem; } .toy--letter.toy--md > .glyph { font-size: 3.6rem; } .toy--letter.toy--lg > .glyph { font-size: 5.2rem; } .toy--letter.toy--xl > .glyph { font-size: 6.8rem; } /* Number tiles — big numeral with a dot row beneath. */ .toy--number { font-family: 'Bangers', cursive; flex-direction: column; gap: 0.1rem; } .toy--number > .glyph { font-size: 4.6rem; font-weight: 900; line-height: 1; color: inherit; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.15); } .toy--number.toy--sm > .glyph { font-size: 3rem; } .toy--number.toy--md > .glyph { font-size: 3.8rem; } .toy--number.toy--lg > .glyph { font-size: 4.6rem; } .toy--number.toy--xl > .glyph { font-size: 6rem; } .toy--number > .dots { font-size: 0.7rem; line-height: 0.6; letter-spacing: 0.1em; color: inherit; opacity: 0.85; white-space: nowrap; max-width: 90%; overflow: hidden; text-align: center; } /* Shape variants */ .toy--circle { border-radius: 50%; } .toy--pill { border-radius: 2rem; } .toy--squircle { border-radius: 24%; } /* Color variants reference theme tokens, so themes Just Work. */ .toy--sun { background: var(--sun); color: #5A3D00; } .toy--water { background: var(--water); color: #FFFFFF; } .toy--leaf { background: var(--leaf); color: #FFFFFF; } .toy--berry { background: var(--berry); color: #FFFFFF; } .toy--cloud { background: var(--cloud); color: var(--water); border: 3px solid var(--water); } .toy--bark { background: var(--bark); color: var(--cloud); } /* Sizes */ .toy--sm { width: 4.5rem; height: 4.5rem; font-size: 1.8rem; } .toy--md { width: 6.5rem; height: 6.5rem; font-size: 2.6rem; } .toy--lg { width: 9rem; height: 9rem; font-size: 3.6rem; } .toy--xl { width: 12rem; height: 12rem; font-size: 4.6rem; } @keyframes jiggle { 0%, 100% { transform: rotate(0deg) scale(1); } 25% { transform: rotate(-8deg) scale(1.08); } 50% { transform: rotate(5deg) scale(1.1); } 75% { transform: rotate(-3deg) scale(1.06); } } .toy.jiggle { animation: jiggle 0.4s ease; } @keyframes glow { 0%, 100% { box-shadow: 0 0 0 rgba(255, 184, 0, 0.0); } 50% { box-shadow: 0 0 26px rgba(255, 184, 0, 0.65); } } .toy.glow { animation: glow 0.5s ease; } /* ─── Confetti particles ─── */ .particle { position: fixed; width: 0.7rem; height: 0.7rem; border-radius: 50%; pointer-events: none; z-index: 998; opacity: 0; animation: pop 0.9s cubic-bezier(0.25, 1, 0.5, 1) forwards; } @keyframes pop { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.4); } } /* ─── Drawing canvas overlay ─── */ #draw-canvas { position: fixed; inset: 0; z-index: 950; background: rgba(255, 248, 240, 0.92); touch-action: none; } .floating-btn { position: fixed; z-index: 960; width: 3.5rem; height: 3.5rem; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.95); font-size: 1.5rem; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 14px var(--shadow); transition: transform 0.12s ease; } .floating-btn:active { transform: scale(0.92); } #draw-clear-btn { bottom: calc(env(safe-area-inset-bottom) + 1rem); right: 1rem; } #draw-exit-btn { top: calc(env(safe-area-inset-top) + 1rem); left: 1rem; } /* ─── Lock overlay ─── */ #lock-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: var(--bark); color: var(--cloud); font-weight: 700; text-align: center; padding: 2rem; } .lock-icon { font-size: 5rem; animation: lock-bounce 0.6s ease infinite alternate; } @keyframes lock-bounce { from { transform: translateY(0); } to { transform: translateY(-10px); } } .lock-text { font-size: 1.6rem; } .lock-sub { font-size: 1.0rem; opacity: 0.7; } .lock-foot { margin-top: 2rem; font-size: 0.85rem; font-weight: 400; opacity: 0.6; max-width: 26ch; } /* Slide-to-unlock track */ #slider-track { position: relative; width: min(85vw, 22rem); height: 4.5rem; margin-top: 1.2rem; border-radius: 2.5rem; background: rgba(255, 255, 255, 0.10); border: 2px solid rgba(255, 255, 255, 0.18); display: flex; align-items: center; padding: 4px; overflow: hidden; touch-action: none; } #slider-handle { position: relative; z-index: 2; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--berry); color: white; font-size: 2rem; font-weight: 900; display: flex; align-items: center; justify-content: center; cursor: grab; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); touch-action: none; user-select: none; } #slider-handle:active { cursor: grabbing; } #slider-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; font-weight: 700; color: rgba(255, 255, 255, 0.7); pointer-events: none; letter-spacing: 0.04em; transition: opacity 0.15s ease; } /* ─── Parent overlay + menu card ─── */ #parent-overlay { position: fixed; inset: 0; z-index: 1100; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; padding: calc(env(safe-area-inset-top) + 0.5rem) 0.75rem calc(env(safe-area-inset-bottom) + 0.5rem); } .parent-card { background: var(--cloud); color: var(--ink); border-radius: 1.2rem; max-width: 30rem; width: 100%; /* Cap so the card never extends past the visible viewport (Safari nav, notch). */ max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 1rem); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35); } /* Sticky header inside the card — close button always reachable. */ .parent-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid rgba(0, 0, 0, 0.08); background: var(--cloud); flex-shrink: 0; } .parent-close { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 2px solid rgba(0, 0, 0, 0.12); background: white; font-size: 1rem; font-weight: 900; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink); } .parent-close:active { transform: scale(0.92); } /* Steps scroll inside the card; safe-area bottom respected. */ .parent-card > [data-step] { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); flex: 1 1 auto; } .parent-title { font-family: 'Bangers', cursive; font-size: 1.7rem; letter-spacing: 0.05em; } .parent-sub { font-size: 0.95rem; opacity: 0.7; margin-bottom: 1rem; } .parent-actions { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 1.2rem; } .btn-primary, .btn-ghost { font-family: inherit; font-weight: 700; font-size: 1rem; padding: 0.7rem 1.2rem; border-radius: 0.75rem; cursor: pointer; border: 2px solid transparent; transition: transform 0.1s ease; } .btn-primary { background: var(--berry); color: white; } .btn-ghost { background: transparent; color: var(--ink); border-color: rgba(0, 0, 0, 0.15); } .btn-primary:active, .btn-ghost:active { transform: scale(0.97); } .menu-section { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid rgba(0, 0, 0, 0.08); } .menu-section:first-of-type { margin-top: 0; padding-top: 0; border-top: none; } .menu-label { font-weight: 900; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; margin-bottom: 0.6rem; } .menu-hint { font-size: 0.85rem; opacity: 0.65; margin-top: 0.4rem; line-height: 1.5; } .menu-hint a { color: var(--berry); } .gate-question { display: flex; align-items: center; gap: 0.5rem; font-family: 'Bangers', cursive; font-size: 2rem; margin: 1rem 0; } #gate-input { font-family: 'Bangers', cursive; font-size: 2rem; width: 5rem; padding: 0.4rem; border: 2px solid rgba(0, 0, 0, 0.15); border-radius: 0.5rem; text-align: center; } .gate-error { color: var(--berry); font-weight: 700; } /* Theme grid */ .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); gap: 0.6rem; } .theme-swatch { border: 3px solid transparent; border-radius: 0.75rem; padding: 0.5rem; cursor: pointer; text-align: center; font-size: 0.75rem; font-weight: 700; background: var(--cloud); transition: transform 0.1s ease; } .theme-swatch:active { transform: scale(0.95); } .theme-swatch.active { border-color: var(--berry); } .theme-swatch .swatch-strip { display: flex; height: 1.5rem; border-radius: 0.4rem; overflow: hidden; margin-bottom: 0.3rem; } .theme-swatch .swatch-strip span { flex: 1; } /* ─── Sound mode picker ─── */ .mode-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; } .mode-btn { font-family: inherit; background: white; border: 2px solid rgba(0, 0, 0, 0.12); border-radius: 0.75rem; padding: 0.7rem 0.5rem; cursor: pointer; text-align: center; transition: transform 0.1s ease, border-color 0.15s ease; color: var(--ink); } .mode-btn:active { transform: scale(0.96); } .mode-btn.active { border-color: var(--berry); background: var(--cloud); } .mode-btn .mode-emoji { font-size: 1.6rem; } .mode-btn .mode-label { font-weight: 800; font-size: 0.85rem; margin-top: 0.2rem; } .mode-btn .mode-sub { font-size: 0.7rem; opacity: 0.65; margin-top: 0.1rem; } /* World picker — same shape as the sound picker. */ .world-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; } .world-btn { font-family: inherit; background: white; border: 2px solid rgba(0, 0, 0, 0.12); border-radius: 0.75rem; padding: 0.7rem 0.5rem; cursor: pointer; text-align: center; transition: transform 0.1s ease, border-color 0.15s ease; color: var(--ink); } .world-btn:active { transform: scale(0.96); } .world-btn.active { border-color: var(--berry); background: var(--cloud); } .world-btn .world-emoji { font-size: 1.6rem; } .world-btn .world-label { font-weight: 800; font-size: 0.85rem; margin-top: 0.2rem; } .world-btn .world-sub { font-size: 0.7rem; opacity: 0.65; margin-top: 0.1rem; } /* Custom toy + generate rows */ .custom-toy-row { display: flex; gap: 0.5rem; } .custom-toy-row input { flex: 1; font-family: inherit; font-size: 1.2rem; padding: 0.6rem 0.8rem; border: 2px solid rgba(0, 0, 0, 0.15); border-radius: 0.6rem; background: white; color: var(--ink); } .custom-toy-row input:focus { outline: none; border-color: var(--berry); } .custom-toy-row .btn-primary { padding: 0.6rem 1rem; } .mode-row { display: flex; flex-wrap: wrap; gap: 0.5rem; } .badge-soon { display: inline-block; font-size: 0.65rem; background: var(--sun); color: #5A3D00; padding: 0.15rem 0.5rem; border-radius: 0.4rem; margin-left: 0.3rem; vertical-align: middle; letter-spacing: 0.04em; } /* iOS install hint banner — only injected when running in Safari, not standalone */ #install-hint { position: fixed; inset: 0; z-index: 1200; background: rgba(0, 0, 0, 0.55); display: flex; align-items: flex-end; justify-content: center; padding: 1rem; } .install-card { background: var(--cloud); color: var(--ink); border-radius: 1.2rem; padding: 1.4rem 1.5rem; max-width: 24rem; width: 100%; text-align: center; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.3); } .install-emoji { font-size: 3rem; margin-bottom: 0.4rem; } .install-title { font-family: 'Bangers', cursive; font-size: 1.7rem; letter-spacing: 0.04em; } .install-body { font-size: 0.95rem; line-height: 1.5; margin: 0.6rem 0 1rem; } .install-body .ios-share { font-size: 1rem; } .install-card .btn-ghost { width: 100%; margin-top: 0.4rem; } /* Topbar picker buttons — wider than a plain icon button to fit the emoji nicely. */ .picker-btn { font-size: 1.4rem; } .picker-btn .picker-emoji { display: inline-block; line-height: 1; } /* Hard-refresh spinner state */ @keyframes tb-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .topbar-btn.spinning { animation: tb-spin 0.9s linear infinite; pointer-events: none; } /* Words world tile — photo on top, big word below. */ .toy--word { flex-direction: column; padding: 0; overflow: hidden; background: var(--cloud); } .toy--word > img { width: 100%; height: 60%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; flex-shrink: 0; } .toy--word > .word-label { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; font-family: 'Bangers', cursive; font-size: 1rem; line-height: 1; text-align: center; color: var(--ink); letter-spacing: 0.02em; background: rgba(255, 255, 255, 0.95); text-transform: uppercase; padding: 0.2rem; } .toy--word.toy--sm > .word-label { font-size: 0.8rem; } .toy--word.toy--md > .word-label { font-size: 1.0rem; } .toy--word.toy--lg > .word-label { font-size: 1.3rem; } .toy--word.toy--xl > .word-label { font-size: 1.6rem; } /* Letters world — dual-case stack (Aa). */ .toy--letter { flex-direction: column; gap: 0; } .toy--letter > .glyph.upper { line-height: 0.95; } .toy--letter > .glyph.lower { line-height: 0.85; opacity: 0.75; } .toy--letter.toy--sm > .glyph.upper { font-size: 1.6rem; } .toy--letter.toy--md > .glyph.upper { font-size: 2.4rem; } .toy--letter.toy--lg > .glyph.upper { font-size: 3.4rem; } .toy--letter.toy--xl > .glyph.upper { font-size: 4.4rem; } .toy--letter.toy--sm > .glyph.lower { font-size: 1.1rem; } .toy--letter.toy--md > .glyph.lower { font-size: 1.6rem; } .toy--letter.toy--lg > .glyph.lower { font-size: 2.3rem; } .toy--letter.toy--xl > .glyph.lower { font-size: 3rem; } /* `hidden` attribute must always win over our display: flex/grid rules. */ [hidden] { display: none !important; } /* Reduced motion respect */ @media (prefers-reduced-motion: reduce) { .toy.jiggle, .toy.glow, .lock-icon, .particle { animation: none !important; } } /* Big tap targets on small phones (just in case) */ @media (max-width: 380px) { .toy--sm { width: 4rem; height: 4rem; font-size: 1.6rem; } .toy--md { width: 5.5rem; height: 5.5rem; font-size: 2.2rem; } .toy--lg { width: 7.5rem; height: 7.5rem; font-size: 3rem; } .toy--xl { width: 9.5rem; height: 9.5rem; font-size: 3.6rem; } }