/* StreamPals — My Pal page. Same world as the streamer dashboard: warm cream, sage/butter/pink pastels, Nunito + Fredoka One, big soft radii. Motion personality: friendly — springy ease-out enters with a hair of overshoot, smooth ease-in exits, staggered grids, quiet high-frequency controls. Self-contained (this page is the only consumer of its styles; the old dark amber theme was retired Jul 11 2026). */ :root { --cream: #FDF6EC; --cream-dark: #F5EAD8; --card: #FFFAF4; --sage: #7DB899; --sage-light: #A8D4BC; --sage-dark: #5A9978; --butter: #F5C842; --butter-light: #FDE98A; --sky: #A8D4E6; --sky-light: #D4EDF7; --pink: #F4A7B9; --pink-light: #FDD5DF; --brown: #5C3D2E; --brown-mid: #8B6355; --brown-light: #C4A882; --text: #3D2B1F; --text-soft: #7A5C4A; --text-muted: #B09080; --shadow: 0 4px 20px rgba(92, 61, 46, 0.08); --shadow-hover: 0 8px 32px rgba(92, 61, 46, 0.14); --radius: 20px; /* motion tokens (friendly): spring in, smooth out */ --mp-spring: cubic-bezier(.34, 1.45, .5, 1); --mp-spring-soft: cubic-bezier(.34, 1.2, .6, 1); --mp-out: cubic-bezier(.2, 0, 0, 1); --mp-in: cubic-bezier(.4, 0, 1, 1); /* surfaces that aren't part of the dashboard token set */ --cell: #fff; --line: var(--cream-dark); } /* dark mode — the dashboard's palette (body.dark-mode there); the class lands on here because it's applied pre-paint from */ html.dark-mode { --cream: #1a1a2e; --cream-dark: #16213e; --card: #1e1e35; --sage: #5a9978; --sage-light: #3d7a60; --sage-dark: #7db899; --brown: #d4b8a8; --brown-mid: #b09080; --brown-light: #7a5c4a; --text: #e8ddd5; --text-soft: #b09080; --text-muted: #7a6055; --shadow: 0 4px 20px rgba(0, 0, 0, 0.35); --shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.5); --cell: #26263f; --line: #32324f; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Nunito', sans-serif; color: var(--text); background: var(--cream); background-image: radial-gradient(circle at 15% 20%, rgba(168, 212, 188, 0.18) 0%, transparent 50%), radial-gradient(circle at 85% 80%, rgba(245, 200, 66, 0.12) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(168, 212, 230, 0.08) 0%, transparent 60%); min-height: 100vh; padding: 18px clamp(14px, 4vw, 40px) 60px; } html.dark-mode body { background-image: radial-gradient(circle at 15% 20%, rgba(125, 184, 153, 0.10) 0%, transparent 50%), radial-gradient(circle at 85% 80%, rgba(245, 200, 66, 0.06) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(168, 212, 230, 0.05) 0%, transparent 60%); } /* ── topbar ──────────────────────────────────────────────────────────────── */ .topbar { display: flex; align-items: center; justify-content: space-between; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 22px; margin-bottom: 26px; animation: mpDrop .55s var(--mp-spring) both; } .brand { font-family: 'Fredoka One', cursive; font-size: 24px; color: var(--brown); display: flex; align-items: center; gap: 8px; } .brand .paw { font-size: 22px; display: inline-block; animation: mpPawWave 5s var(--mp-spring) 1.2s; } .brand em { font-style: normal; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 12px; color: var(--sage-dark); background: rgba(125, 184, 153, 0.16); padding: 4px 12px; border-radius: 999px; letter-spacing: 0.6px; text-transform: uppercase; } .user { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--text-soft); } .user img { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--butter); display: none; } .user img[src]:not([src=""]) { display: block; } /* ── buttons ─────────────────────────────────────────────────────────────── */ .btn { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 15px; color: #fff; background: var(--sage); border: none; border-radius: 999px; padding: 11px 28px; cursor: pointer; box-shadow: var(--shadow); transition: background .15s var(--mp-out), box-shadow .18s var(--mp-out), transform .16s var(--mp-spring); } .btn:hover { background: var(--sage-dark); box-shadow: var(--shadow-hover); transform: translateY(-2px); } .btn:active { transform: scale(.96); transition: transform .1s var(--mp-out); } .btn.big { font-size: 17px; padding: 14px 36px; } .btn.ghost { background: transparent; color: var(--text-soft); box-shadow: none; border: 2px solid var(--line); } .btn.ghost:hover { border-color: var(--brown-light); color: var(--brown); background: transparent; transform: translateY(-1px); } .btn.small { font-size: 12px; padding: 6px 16px; } .dark-toggle { width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 16px; background: transparent; border: 2px solid var(--line); line-height: 1; transition: transform .18s var(--mp-spring), border-color .15s var(--mp-out), background .15s var(--mp-out); } .dark-toggle:hover { transform: translateY(-1px) scale(1.06); border-color: var(--brown-light); background: var(--cream); } .dark-toggle:active { transform: scale(.92); transition: transform .1s var(--mp-out); } /* ── signed-out hero ─────────────────────────────────────────────────────── */ .hero-center { max-width: 640px; margin: 8vh auto 0; text-align: center; } .hero-pets { display: flex; justify-content: center; gap: 6px; margin-bottom: 18px; } .hero-pets img { width: 120px; height: 120px; object-fit: contain; animation: mpPop .6s var(--mp-spring) both, mpFloat 3.4s ease-in-out infinite alternate; } .hero-pets img:nth-child(2) { animation-delay: .09s, .5s; } .hero-pets img:nth-child(3) { animation-delay: .18s, 1s; } .hero-center h1 { font-family: 'Fredoka One', cursive; font-size: clamp(28px, 5vw, 40px); color: var(--brown); margin-bottom: 14px; animation: mpRise .5s var(--mp-spring) .12s both; } .hero-center h1 em { font-style: normal; color: var(--sage-dark); } .hero-center p { font-size: 16px; font-weight: 600; color: var(--text-soft); line-height: 1.65; margin-bottom: 26px; animation: mpRise .5s var(--mp-spring) .2s both; } .hero-center .btn { animation: mpPop .5s var(--mp-spring) .32s both; } /* ── editor layout ───────────────────────────────────────────────────────── */ .mypal-grid { display: grid; grid-template-columns: 330px 1fr; gap: 22px; max-width: 1180px; margin: 0 auto; align-items: start; } @media (max-width: 860px) { .mypal-grid { grid-template-columns: 1fr; } .preview-card { position: static; } } .card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; } .preview-card { position: sticky; top: 18px; text-align: center; animation: mpRise .5s var(--mp-spring) .05s both; } .sections-card { animation: mpRise .5s var(--mp-spring) .14s both; } .sections-card section + section { margin-top: 26px; padding-top: 24px; border-top: 2px dashed var(--line); } .card-title { display: flex; align-items: center; gap: 10px; font-family: 'Fredoka One', cursive; font-size: 18px; color: var(--brown); margin-bottom: 10px; justify-content: flex-start; text-align: left; } .card-title-icon { width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 17px; } .icon-sage { background: rgba(125, 184, 153, 0.2); } .icon-butter { background: rgba(245, 200, 66, 0.22); } .icon-pink { background: rgba(244, 167, 185, 0.22); } .icon-sky { background: rgba(168, 212, 230, 0.26); } .hint { font-size: 12.5px; font-weight: 700; color: var(--text-muted); line-height: 1.55; margin-bottom: 12px; text-align: left; } .hint.center { text-align: center; margin: 12px 0 14px; color: var(--text-soft); font-size: 14px; } .saved-note { color: var(--sage-dark) !important; margin-top: 12px !important; } /* ── preview pal ─────────────────────────────────────────────────────────── */ .pal-stage { background: linear-gradient(180deg, var(--sky-light), var(--cream-dark)); border-radius: 18px; padding: 18px 12px 14px; margin-bottom: 6px; } html.dark-mode .pal-stage { background: linear-gradient(180deg, #232345, var(--cream-dark)); } .pv-pal { position: relative; width: 200px; height: 200px; margin: 0 auto; animation: mpBreathe 3.2s ease-in-out infinite; transform-origin: 50% 100%; } .pv-pal.pop { animation: mpPop .45s var(--mp-spring), mpBreathe 3.2s ease-in-out .45s infinite; } .pv-sprite { width: 100%; height: 100%; object-fit: contain; } .pv-sprite.mystery { filter: brightness(0) opacity(0.3); } html.dark-mode .pv-sprite.mystery { filter: brightness(0) invert(1) opacity(0.35); } /* accessory positioning — the overlay's screenshot-verified numbers (pals-web/overlay/overlay.css); keep the two files in sync */ .pv-pal .pv-acc { position: absolute; pointer-events: none; } .pv-pal .pv-acc.acc-canvas { inset: 0; width: 100%; height: 100%; } .pv-pal.char-corgi .pv-acc.acc-canvas { transform: translateY(13.7%); } .pv-pal.char-dragon .pv-acc.acc-canvas { transform: scale(0.9) translateY(6%); } .pv-pal .pv-acc.acc-bowtie { top: 53%; left: 54.3%; width: 22.7%; height: auto; transform: translateX(-50%); } .pv-pal.char-corgi .pv-acc.acc-bowtie { top: 66.7%; } .pv-pal.char-dragon .pv-acc.acc-bowtie { top: 61%; left: 51.5%; width: 21%; } .pv-pal .pv-acc.acc-necktie { top: 62%; left: 55%; width: 19.3%; height: auto; transform: translateX(-50%); } .pv-pal.char-corgi .pv-acc.acc-necktie { top: 75.7%; } .pv-pal.char-dragon .pv-acc.acc-necktie { top: 70.5%; left: 56.3%; width: 17.4%; } .pv-pal .pv-acc.acc-bow { top: 14%; left: 60%; width: 27.3%; height: auto; transform: translateX(-50%); } .pv-pal.char-cat .pv-acc.acc-bow { top: 17%; } .pv-pal.char-corgi .pv-acc.acc-bow { top: 27.7%; } .pv-pal.char-dragon .pv-acc.acc-bow { top: 21.8%; left: 59.2%; width: 24.6%; } .pv-tag { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 900; color: var(--pv-color, var(--sage-dark)); background: var(--cell); border: 2px solid currentColor; border-radius: 999px; padding: 4px 16px; } /* ── pick grids ──────────────────────────────────────────────────────────── */ .pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; } .pick-grid.small { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; } .variant-cell, .acc-cell { background: var(--cell); border: 2.5px solid var(--line); border-radius: 16px; text-align: center; cursor: pointer; overflow: hidden; transition: transform .2s var(--mp-spring), border-color .15s var(--mp-out), box-shadow .2s var(--mp-out); animation: mpPop .4s var(--mp-spring) both; } .pick-grid > *:nth-child(1) { animation-delay: 0ms; } .pick-grid > *:nth-child(2) { animation-delay: 40ms; } .pick-grid > *:nth-child(3) { animation-delay: 80ms; } .pick-grid > *:nth-child(4) { animation-delay: 120ms; } .pick-grid > *:nth-child(5) { animation-delay: 160ms; } .pick-grid > *:nth-child(6) { animation-delay: 200ms; } .pick-grid > *:nth-child(7) { animation-delay: 240ms; } .pick-grid > *:nth-child(8) { animation-delay: 280ms; } .variant-cell { padding: 10px 6px 8px; } .variant-cell:hover, .acc-cell:hover { transform: translateY(-3px) scale(1.04); box-shadow: var(--shadow-hover); border-color: var(--brown-light); } .variant-cell:active, .acc-cell:active { transform: scale(.95); transition: transform .1s var(--mp-out); } .variant-cell.selected, .acc-cell.selected { border-color: var(--sage); box-shadow: 0 0 0 3px rgba(125, 184, 153, 0.25), var(--shadow); } .variant-cell img { width: 100%; height: 74px; object-fit: contain; } .variant-cell small { display: block; color: var(--text-soft); font-weight: 800; font-size: 11px; margin-top: 5px; } .variant-cell.premium small::after { content: ' ✦'; color: var(--butter); } .variant-cell.surprise .dice { font-size: 42px; height: 74px; display: flex; align-items: center; justify-content: center; } .variant-cell.surprise { background: linear-gradient(160deg, var(--cell), var(--butter-light)); } html.dark-mode .variant-cell.surprise { background: linear-gradient(160deg, var(--cell), rgba(245, 200, 66, 0.22)); } /* locked looks: shown in full color (they're the ad) with a price tag */ .variant-cell { position: relative; } .variant-cell.locked img { opacity: 0.82; } .variant-cell.locked small::after { content: ' 🔒'; } .price-chip { position: absolute; top: 6px; right: 6px; font-size: 10.5px; font-weight: 900; color: var(--brown); background: var(--butter-light); border: 1.5px solid var(--butter); border-radius: 999px; padding: 2px 8px; pointer-events: none; } /* the chip keeps its light butter background in dark mode, so its text stays dark */ html.dark-mode .price-chip { color: #5C3D2E; } .packs-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .pack-pill { font-family: 'Nunito', sans-serif; font-size: 12.5px; font-weight: 800; color: var(--brown); background: linear-gradient(160deg, var(--cell), var(--butter-light)); border: 2px solid var(--butter); border-radius: 999px; padding: 8px 18px; cursor: pointer; transition: transform .18s var(--mp-spring), box-shadow .15s var(--mp-out); } .pack-pill b { color: var(--sage-dark); margin-left: 4px; } html.dark-mode .pack-pill { background: linear-gradient(160deg, var(--cell), rgba(245, 200, 66, 0.22)); } .pack-pill:hover { transform: translateY(-2px) scale(1.03); box-shadow: var(--shadow-hover); } .pack-pill:active { transform: scale(.95); } .acc-cell { padding: 7px; } .acc-cell img { width: 100%; height: 44px; object-fit: contain; } .acc-cell.none { display: flex; align-items: center; justify-content: center; min-height: 58px; font-weight: 900; font-size: 11px; color: var(--text-muted); } .acc-cell.disabled { opacity: 0.38; } .pick-grid.locked .acc-cell { opacity: 0.38; } /* ── name tag colors ─────────────────────────────────────────────────────── */ #color-grid { display: flex; flex-wrap: wrap; gap: 10px; } .color-dot { width: 34px; height: 34px; border-radius: 50%; cursor: pointer; border: 3px solid var(--cell); box-shadow: 0 0 0 2px var(--line), var(--shadow); transition: transform .18s var(--mp-spring), box-shadow .15s var(--mp-out); } .color-dot:hover { transform: scale(1.15); } .color-dot:active { transform: scale(.92); } .color-dot.selected { box-shadow: 0 0 0 3px var(--sage), var(--shadow-hover); } /* ── toast ───────────────────────────────────────────────────────────────── */ #toast { position: fixed; left: 50%; bottom: 28px; z-index: 50; background: var(--brown); color: #FDF6EC; font-weight: 800; font-size: 14px; padding: 12px 26px; border-radius: 999px; box-shadow: var(--shadow-hover); opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(18px) scale(.94); transition: transform .2s var(--mp-in), opacity .18s var(--mp-in); } #toast.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); transition: transform .38s var(--mp-spring), opacity .15s var(--mp-out); } #toast.err { background: #C0564A; } /* dark mode: --brown flips light, so the toast slab goes deep navy instead */ html.dark-mode #toast { background: #101024; color: var(--text); } html.dark-mode #toast.err { background: #C0564A; color: #fff; } .hidden { display: none !important; } /* ── keyframes ───────────────────────────────────────────────────────────── */ @keyframes mpDrop { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } } @keyframes mpRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes mpPop { 0% { opacity: 0; transform: scale(.85); } 70% { opacity: 1; transform: scale(1.03); } 100% { opacity: 1; transform: scale(1); } } @keyframes mpFloat { from { transform: translateY(0); } to { transform: translateY(-9px); } } @keyframes mpBreathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.022) scaleX(1.006); } } @keyframes mpPawWave { 0%, 88%, 100% { transform: rotate(0); } 90% { transform: rotate(-16deg); } 94% { transform: rotate(12deg); } 97% { transform: rotate(-6deg); } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }