:root { --bg: #fbf6ef; --card: #ffffff; --ink: #2b2320; --muted: #7a6c64; --line: #eadfd3; --ember: #c8552a; --ember-2: #e98a3c; --ember-soft: #fbe6d8; --ok: #3f7d58; --danger: #b3261e; --shadow: 0 1px 2px rgba(60, 35, 20, .06), 0 4px 16px rgba(60, 35, 20, .06); --radius: 16px; --tabbar-h: 64px; color-scheme: light; } /* Themes: data-mode on = light | mid | dark | system (default follows the phone). */ :root[data-mode="dark"] { --bg: #1c1715; --card: #26201d; --ink: #f3ebe4; --muted: #b3a59b; --line: #3a312c; --ember: #ee7a45; --ember-2: #f3a14f; --ember-soft: #3d2a20; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25); color-scheme: dark; } :root[data-mode="mid"] { --bg: #3b3f4a; --card: #474c59; --ink: #f1f2f6; --muted: #c3c7d2; --line: #585e6c; --ember: #f28a55; --ember-2: #f5ab62; --ember-soft: #56463f; --shadow: 0 1px 2px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.16); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-mode]), :root[data-mode="system"] { --bg: #1c1715; --card: #26201d; --ink: #f3ebe4; --muted: #b3a59b; --line: #3a312c; --ember: #ee7a45; --ember-2: #f3a14f; --ember-soft: #3d2a20; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25); color-scheme: dark; } } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { margin: 0; } body { background: var(--bg); color: var(--ink); font: var(--fs, 16px)/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); } a { color: var(--ember); } button, input, textarea, select { font: inherit; color: inherit; } img { max-width: 100%; display: block; } .topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 1.2rem; letter-spacing: .2px; } .iconbtn { position: relative; border: 0; background: var(--card); border-radius: 999px; width: 40px; height: 40px; font-size: 20px; box-shadow: var(--shadow); cursor: pointer; } .badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ember); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; } main { max-width: 640px; margin: 0 auto; padding: 16px; outline: none; } .loading, .empty { text-align: center; color: var(--muted); padding: 40px 16px; } .tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; display: grid; grid-template-columns: repeat(5, 1fr); height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--card); border-top: 1px solid var(--line); } .tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none; color: var(--muted); font-size: 12px; } .tabbar a span { font-size: 22px; filter: grayscale(.6); } .tabbar a.active { color: var(--ember); font-weight: 600; } .tabbar a.active span { filter: none; } .card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 14px; } h1 { font-size: 1.5rem; margin: 4px 0 12px; } h2 { font-size: 1.1rem; margin: 0 0 10px; } h3 { font-size: .95rem; margin: 18px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .muted { color: var(--muted); } .small { font-size: .85rem; } .row { display: flex; align-items: center; gap: 10px; } .row.between { justify-content: space-between; } .wrap { flex-wrap: wrap; } .grow { flex: 1; min-width: 0; } .btn { border: 0; border-radius: 12px; padding: 10px 16px; background: var(--ember); color: #fff; font-weight: 600; cursor: pointer; min-height: 44px; } .btn:disabled { opacity: .5; cursor: default; } .btn.ghost { background: var(--ember-soft); color: var(--ember); } .btn.plain { background: transparent; color: var(--muted); padding: 8px 10px; min-height: 36px; } .btn.danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); } .btn.block { width: 100%; } .chip { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: .95rem; min-height: 36px; } .chip.on { border-color: var(--ember); background: var(--ember-soft); color: var(--ember); font-weight: 600; } label { display: block; font-weight: 600; font-size: .9rem; margin: 12px 0 6px; } input[type=text], input[type=date], textarea, select { width: 100%; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); font-size: 16px; /* prevents iOS zoom */ } textarea { resize: vertical; min-height: 84px; } input:focus, textarea:focus, select:focus { outline: 2px solid var(--ember); outline-offset: 1px; } .avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; object-fit: cover; background: var(--ember-soft); color: var(--ember); display: grid; place-items: center; font-weight: 700; } .avatar.lg { width: 72px; height: 72px; font-size: 1.6rem; } .avatar.sm { width: 30px; height: 30px; font-size: .8rem; } /* hearth */ .hearth { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; background: linear-gradient(135deg, var(--ember-soft), var(--card)); } .fire { width: 96px; height: 96px; } .fire .f { transform-origin: 50% 100%; animation: flick 1.6s ease-in-out infinite alternate; } .fire .f2 { animation-duration: 1.2s; animation-delay: .2s; } .fire .f3 { animation-duration: 0.9s; animation-delay: .4s; } @keyframes flick { from { transform: scale(1, 1) } to { transform: scale(.94, 1.06) skewX(2deg) } } @media (prefers-reduced-motion: reduce) { .fire .f { animation: none; } } .hearth .lvl { font-weight: 800; font-size: 1.2rem; } .meter { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; margin: 8px 0 4px; } .meter > i { display: block; height: 100%; background: linear-gradient(90deg, var(--ember-2), var(--ember)); border-radius: 4px; } .moods { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; } .moods .chip { font-size: 1.1rem; padding: 4px 10px; } /* composer + posts */ .composer textarea { border: 0; background: transparent; padding: 4px 0; min-height: 56px; } .composer textarea:focus { outline: none; } .thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; } .thumbs .t { position: relative; } .thumbs img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; } .thumbs button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--ink); color: var(--bg); font-size: 12px; cursor: pointer; } .post .body { white-space: pre-wrap; word-wrap: break-word; margin: 10px 0; } .photos { display: grid; gap: 4px; border-radius: 12px; overflow: hidden; margin: 10px -4px; } .photos.n1 { grid-template-columns: 1fr; } .photos.n2, .photos.n4 { grid-template-columns: 1fr 1fr; } .photos.n3, .photos.many { grid-template-columns: 1fr 1fr 1fr; } .photos img { width: 100%; aspect-ratio: 1; object-fit: cover; cursor: zoom-in; background: var(--line); } .photos.n1 img { aspect-ratio: auto; max-height: 520px; object-fit: contain; } .reacts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; } .reacts .chip { padding: 4px 10px; } .comments { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 8px; } .comment { display: flex; gap: 8px; margin: 8px 0; } .comment .bubble { background: var(--bg); border-radius: 12px; padding: 8px 10px; flex: 1; min-width: 0; white-space: pre-wrap; word-wrap: break-word; } .comment .who { font-weight: 600; font-size: .85rem; } .addcomment { display: flex; gap: 8px; margin-top: 8px; } .addcomment input { flex: 1; padding: 10px; } /* family */ .people { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; } .person { text-align: center; cursor: pointer; border: 0; width: 100%; } .person .avatar { margin: 0 auto 8px; } .person .nm { font-weight: 600; } .vibe-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } /* calendar */ .day { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); } .day:last-child { border-bottom: 0; } .datebox { text-align: center; border-radius: 12px; background: var(--ember-soft); color: var(--ember); padding: 6px 0; line-height: 1.1; } .datebox b { display: block; font-size: 1.3rem; } .datebox small { text-transform: uppercase; font-size: .7rem; font-weight: 700; } /* sheet + toast + lightbox */ .sheet { position: fixed; inset: 0; z-index: 30; background: rgba(20, 12, 8, .45); display: flex; align-items: flex-end; justify-content: center; } .sheet-card { background: var(--card); width: 100%; max-width: 640px; max-height: 88vh; overflow: auto; border-radius: 20px 20px 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); } @media (min-width: 700px) { .sheet { align-items: center; } .sheet-card { border-radius: 20px; } } .lightbox { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.92); display: grid; place-items: center; } .lightbox img { max-width: 100vw; max-height: 100vh; object-fit: contain; } .toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom)); z-index: 50; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 12px; max-width: calc(100% - 32px); box-shadow: var(--shadow); } .linkbox { font-family: ui-monospace, Menlo, monospace; font-size: .8rem; word-break: break-all; background: var(--bg); padding: 10px; border-radius: 10px; border: 1px dashed var(--line); } .welcome { text-align: center; padding-top: 24px; } .welcome img { margin: 0 auto 12px; } .pill { display: inline-block; font-size: .75rem; padding: 2px 8px; border-radius: 999px; background: var(--ember-soft); color: var(--ember); font-weight: 600; } hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; } /* video messages */ .tabbadge { top: 6px; right: calc(50% - 22px); } .threads .thread { display: flex; gap: 12px; align-items: center; padding: 12px; margin-bottom: 10px; cursor: pointer; border: 0; width: 100%; text-align: left; } .stack { display: flex; flex: none; } .stack .avatar { border: 2px solid var(--card); } .stack .avatar + .avatar { margin-left: -14px; } .ring { outline: 3px solid var(--ember); outline-offset: 2px; border-radius: 50%; } .unread-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ember); flex: none; } .clips { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; } .clip { position: relative; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: #2b2320; border: 0; padding: 0; cursor: pointer; color: #fff; } .clip img, .clip .noposter { width: 100%; height: 100%; object-fit: cover; } .clip .noposter { display: grid; place-items: center; font-size: 2rem; } .clip .meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 6px 6px; background: linear-gradient(transparent, rgba(0,0,0,.75)); font-size: .72rem; text-align: left; line-height: 1.25; } .clip .meta b { display: block; font-size: .8rem; } .clip.new { outline: 3px solid var(--ember); outline-offset: -3px; } .clip .newtag { position: absolute; top: 6px; left: 6px; background: var(--ember); color: #fff; font-size: .65rem; font-weight: 700; padding: 2px 6px; border-radius: 6px; } .recfab { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom)); z-index: 11; width: 72px; height: 72px; border-radius: 50%; border: 5px solid #fff; background: #e0342b; box-shadow: 0 4px 18px rgba(0,0,0,.3); cursor: pointer; font-size: 26px; color: #fff; } .stage { position: fixed; inset: 0; z-index: 60; background: #000; color: #fff; display: flex; flex-direction: column; } .stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; } .stage video.contain { object-fit: contain; } .stage video.mirror { transform: scaleX(-1); } .stage .top, .stage .bottom { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; } .stage .top { padding-top: calc(12px + env(safe-area-inset-top)); background: linear-gradient(rgba(0,0,0,.55), transparent); } .stage .bottom { margin-top: auto; padding-bottom: calc(24px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0,0,0,.6)); justify-content: center; } .stage .round { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); color: #fff; font-size: 20px; cursor: pointer; } .stage .timer { font-variant-numeric: tabular-nums; font-weight: 700; background: rgba(0,0,0,.35); padding: 4px 10px; border-radius: 999px; } .stage .timer.live { background: #e0342b; } .shutter { width: 78px; height: 78px; border-radius: 50%; border: 5px solid #fff; background: #e0342b; cursor: pointer; transition: border-radius .15s; } .shutter.stop { border-radius: 18px; transform: scale(.8); } .stage .who { font-weight: 700; } .stage .when { font-size: .8rem; opacity: .8; } .stage .bar { position: absolute; top: env(safe-area-inset-top); left: 8px; right: 8px; z-index: 3; display: flex; gap: 3px; padding-top: 6px; } .stage .bar i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.35); overflow: hidden; } .stage .bar i b { display: block; height: 100%; width: 0; background: #fff; } .stage .center { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; pointer-events: none; font-size: 1.1rem; text-align: center; padding: 24px; } .progress { width: 100%; max-width: 260px; height: 8px; background: rgba(255,255,255,.25); border-radius: 4px; overflow: hidden; } .progress i { display: block; height: 100%; background: #fff; width: 0; } .checklist label { display: flex; align-items: center; gap: 10px; font-weight: 500; padding: 8px 0; margin: 0; border-bottom: 1px solid var(--line); } .checklist input { width: 22px; height: 22px; accent-color: var(--ember); } .banner { display: flex; gap: 10px; align-items: center; background: var(--ember-soft); border-radius: var(--radius); padding: 12px; margin-bottom: 14px; } .tabbar a .badge { font-size: 11px; filter: none; } /* header me button */ .mebtn { display: grid; place-items: center; overflow: hidden; padding: 0; text-decoration: none; } .mebtn .avatar { width: 40px; height: 40px; } .mebtn.active { outline: 2px solid var(--ember); outline-offset: 2px; } /* pets */ .petsvg { width: 100%; height: auto; display: block; } .petsvg.animate .bob { animation: bob 3.2s ease-in-out infinite; transform-origin: 100px 186px; } .petsvg.animate .blink { animation: blink 5s infinite; transform-origin: 100px 84px; } .petsvg.animate .flick { animation: flick 1.4s ease-in-out infinite alternate; transform-origin: 100px 54px; } .petsvg.animate .twinkle { animation: twinkle 2.2s ease-in-out infinite; } .petsvg.animate .zzz { animation: zzz 3s ease-in-out infinite; } @keyframes bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-4px) } } @keyframes blink { 0%, 92%, 100% { transform: scaleY(1) } 95% { transform: scaleY(.1) } } @keyframes twinkle { 0%, 100% { opacity: .3 } 50% { opacity: 1 } } @keyframes zzz { 0% { opacity: 0; transform: translateY(6px) } 50% { opacity: .7 } 100% { opacity: 0; transform: translateY(-6px) } } @keyframes hop { 0%, 100% { transform: translateY(0) } 30% { transform: translateY(-18px) } 60% { transform: translateY(0) } 75% { transform: translateY(-6px) } } .hop .bob { animation: hop .7s ease-out 2 !important; } @media (prefers-reduced-motion: reduce) { .petsvg.animate * { animation: none !important; } } .petstage { padding: 0; overflow: hidden; } .petstage .petsvg { border-radius: var(--radius) var(--radius) 0 0; cursor: pointer; } .petstage .info { padding: 12px 16px 16px; } .sparks { display: inline-flex; align-items: center; gap: 4px; background: #fff4d6; color: #8a6200; font-weight: 800; border-radius: 999px; padding: 4px 10px; font-size: .95rem; } :root[data-mode="dark"] .sparks, :root[data-mode="mid"] .sparks { background: #3a3020; color: #f2c94c; } @media (prefers-color-scheme: dark) { :root:not([data-mode]) .sparks, :root[data-mode="system"] .sparks { background: #3a3020; color: #f2c94c; } } .goal { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); } .goal:last-child { border-bottom: 0; } .goal .tick { width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid var(--line); background: transparent; cursor: pointer; flex: none; font-size: 16px; color: #fff; display: grid; place-items: center; } .goal.done .tick { background: var(--ok); border-color: var(--ok); } .goal.done .gt { text-decoration: line-through; color: var(--muted); } .goal .ge { font-size: 1.3rem; width: 28px; text-align: center; } .story { background: linear-gradient(135deg, #fff4d6, var(--card)); border-left: 4px solid #f2c94c; } :root[data-mode="dark"] .story, :root[data-mode="mid"] .story { background: linear-gradient(135deg, #3a3020, var(--card)); } @media (prefers-color-scheme: dark) { :root:not([data-mode]) .story, :root[data-mode="system"] .story { background: linear-gradient(135deg, #3a3020, var(--card)); } } .species { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .species button { border: 2px solid var(--line); background: var(--card); border-radius: 16px; padding: 6px 6px 10px; cursor: pointer; } .species button.on { border-color: var(--ember); background: var(--ember-soft); } .species b { display: block; font-size: .85rem; } .swatches { display: flex; gap: 10px; flex-wrap: wrap; } .swatches button { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--card); box-shadow: 0 0 0 2px var(--line); cursor: pointer; position: relative; } .swatches button.on { box-shadow: 0 0 0 3px var(--ember); } .swatches button .lock { position: absolute; right: -6px; bottom: -6px; font-size: 12px; } .tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; scrollbar-width: none; } .tabs .chip { white-space: nowrap; } .items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .item { border: 2px solid var(--line); background: var(--card); border-radius: 14px; padding: 8px; cursor: pointer; text-align: center; font-size: .8rem; } .item.on { border-color: var(--ember); background: var(--ember-soft); } .item .itemsvg { width: 100%; height: 64px; } .item .price { font-weight: 700; color: #8a6200; } .tryon { max-width: 220px; margin: 0 auto 10px; border-radius: 16px; overflow: hidden; } .minipet { width: 56px; height: 56px; border-radius: 14px; overflow: hidden; flex: none; background: var(--bg); } .person .minipet { margin: -8px auto 4px; width: 64px; height: 64px; } .lvlbar { height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; margin: 6px 0 4px; } .lvlbar i { display: block; height: 100%; background: linear-gradient(90deg, #f2c94c, var(--ember-2)); } .earnlist div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .9rem; } .confetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; } .confetti i { position: absolute; top: -10px; width: 8px; height: 12px; border-radius: 2px; animation: fall 1.8s ease-in forwards; } @keyframes fall { to { transform: translateY(105vh) rotate(540deg); opacity: .8; } } .wiggle { display: inline-block; animation: wiggle 1.6s ease-in-out infinite; } @keyframes wiggle { 0%, 100% { transform: rotate(0) } 10% { transform: rotate(-12deg) } 20% { transform: rotate(10deg) } 30% { transform: rotate(-6deg) } 40% { transform: rotate(0) } } .minipet svg { width: 100%; height: 100%; } .checklist .minipet { width: 36px; height: 36px; border-radius: 10px; } /* help */ #helpBtn { font-size: 18px; } .tiplist { list-style: none; padding: 0; margin: 10px 0 0; } .tiplist li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); } .tiplist li:last-child { border-bottom: 0; } .tiplist .te { font-size: 1.35rem; text-align: center; line-height: 1.2; } .tiplist b { display: block; margin-bottom: 2px; } .tiplist p { margin: 0; color: var(--ink); font-size: .95rem; } .guide details { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 10px; padding: 0 16px; } .guide summary { cursor: pointer; padding: 14px 0; font-weight: 700; font-size: 1.05rem; list-style: none; display: flex; align-items: center; gap: 10px; } .guide summary::-webkit-details-marker { display: none; } .guide summary::after { content: '▸'; margin-left: auto; color: var(--muted); transition: transform .15s; } .guide details[open] summary::after { transform: rotate(90deg); } .guide .intro { color: var(--muted); margin: 0 0 4px; } .guide .more { margin: 6px 0 14px; } .guide .more h4 { margin: 10px 0 2px; font-size: .95rem; } .guide .more p { margin: 0; font-size: .92rem; } .guide details { scroll-margin-top: 76px; } /* ---------- check-in scenes (scenes.js) ---------- */ .hearth { position: relative; overflow: hidden; min-height: 176px; } .sc-l { position: absolute; pointer-events: none; } .scene { inset: 0; pointer-events: auto; cursor: pointer; z-index: 5; border-radius: inherit; overflow: hidden; background: linear-gradient(180deg, var(--ember-soft), var(--card) 85%); } .sc-sky { inset: 0; opacity: 0; } .sc-fire { width: 118px; height: 118px; left: calc(50% - 59px); bottom: 6px; } .sc-fire svg, .sc-cloud svg, .sc-sun svg, .sc-bolt svg, .sc-pet svg { width: 100%; height: 100%; display: block; } .sc-flames { transform-box: fill-box; transform-origin: 50% 100%; } .sc-fire .f { transform-box: fill-box; transform-origin: 50% 100%; animation: flick 1.6s ease-in-out infinite alternate; } .sc-fire .f2 { animation-duration: 1.2s; animation-delay: .2s; } .sc-fire .f3 { animation-duration: .9s; animation-delay: .4s; } .sc-cloud { width: 150px; height: 75px; top: 26px; left: calc(50% - 85px); opacity: 0; transform: translateX(-140%); } .sc-sun { width: 58px; height: 58px; top: 30px; left: calc(50% - 10px); opacity: 0; } .sc-rain { width: 124px; height: 84px; top: 86px; left: calc(50% - 72px); opacity: 0; overflow: hidden; } .sc-rain i { position: absolute; top: -12px; width: 2px; height: 11px; border-radius: 2px; background: #7fb4e6; animation: sc-drop .6s linear infinite; } @keyframes sc-drop { to { transform: translateY(110px); } } .sc-bolt { width: 24px; height: 48px; top: 64px; left: calc(50% + 8px); opacity: 0; } .sc-sparks { left: 50%; bottom: 70px; width: 0; height: 0; } .sc-sparks i { position: absolute; width: 6px; height: 6px; border-radius: 50%; } .sc-pet { width: 92px; height: 92px; bottom: 4px; left: calc(50% + 46px); opacity: 0; transform-origin: 50% 100%; } .sc-puff { left: calc(50% + 34px); bottom: 50px; width: 28px; height: 22px; opacity: 0; } .sc-puff i { display: block; height: 3px; margin: 3px 0; border-radius: 3px; background: rgba(255,255,255,.95); box-shadow: 0 0 4px rgba(0,0,0,.15); } .sc-puff i:nth-child(2) { width: 80%; margin-left: 4px; } .sc-heart { left: calc(50% + 80px); bottom: 86px; font-size: 1.3rem; opacity: 0; } .sc-cap { left: 12px; right: 12px; top: 6px; text-align: center; font-weight: 700; font-size: .95rem; opacity: 0; text-shadow: 0 1px 0 var(--card), 0 0 8px var(--card); } .sc-skip { left: 12px; bottom: 6px; font-size: .7rem; color: var(--muted); } .fire.replay { cursor: pointer; } /* ---------- feed v2 ---------- */ .filterbar { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; margin: 0 0 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .filterbar::-webkit-scrollbar { display: none; } .filterbar .chip { white-space: nowrap; flex: none; font-size: .88rem; min-height: 32px; padding: 4px 11px; } .composer-opts { margin: 8px 0; gap: 6px; } .composer-opts .chip { font-size: .85rem; min-height: 32px; padding: 4px 11px; } .btn.ghost.on { border-color: var(--ember); color: var(--ember); background: var(--ember-soft); } .mentionmenu { border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: var(--shadow); margin: 4px 0; overflow: hidden; } .mentionopt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .mentionopt + .mentionopt { border-top: 1px solid var(--line); } .mentionopt:hover, .mentionopt:focus { background: var(--ember-soft); } a.mention { color: var(--ember); font-weight: 600; text-decoration: none; } a.tag, a.catlink { color: var(--ember); text-decoration: none; } .audbadge { border: 0; background: none; padding: 0; font: inherit; color: var(--muted); cursor: pointer; text-decoration: underline dotted; } .optrow { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; margin: 6px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: inherit; font: inherit; cursor: pointer; } .optrow.on { border-color: var(--ember); background: var(--ember-soft); } .optcard { width: 100%; border: 0; font: inherit; color: inherit; cursor: pointer; gap: 12px; } .planbuilder { border: 1px dashed var(--ember-2); border-radius: 12px; padding: 10px; margin: 8px 0; background: var(--ember-soft); } .planbuilder input { margin-bottom: 6px; } .planopt { display: grid; grid-template-columns: 1fr 96px 36px; gap: 6px; align-items: center; } .planopt input { margin: 0 0 6px; } .plan { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin: 10px 0; background: linear-gradient(135deg, var(--ember-soft), var(--card)); } .plan-t { font-weight: 800; font-size: 1.05rem; } .planrow { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); } .planrow.best .grow > div:first-child { color: var(--ember); } .planrow .counts { padding: 0; min-height: 0; color: var(--muted); } .chip.vote { min-height: 34px; padding: 2px 9px; font-size: 1rem; } .plan-set { padding: 8px 0; } .plan details { margin-top: 4px; } /* ---------- kid accounts ---------- */ .kidbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 14px; background: #fef3c7; color: #78350f; font-size: .85rem; font-weight: 600; } :root[data-mode="dark"] .kidbar, :root[data-mode="mid"] .kidbar { background: #3a3020; color: #fcd34d; } @media (prefers-color-scheme: dark) { :root:not([data-mode]) .kidbar, :root[data-mode="system"] .kidbar { background: #3a3020; color: #fcd34d; } } .btn.small { min-height: 32px; padding: 4px 12px; font-size: .85rem; } .presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .preset { border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); color: inherit; font: inherit; padding: 10px 6px; text-align: center; cursor: pointer; } .preset.on { border-color: var(--ember); background: var(--ember-soft); } .preset b { display: block; font-size: .9rem; } .toggles { margin-top: 10px; } .toggle { display: flex; align-items: center; gap: 10px; padding: 10px 0; margin: 0; border-top: 1px solid var(--line); cursor: pointer; font-weight: 400; position: relative; } .toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; } .toggle .switch { flex: none; width: 46px; height: 28px; border-radius: 14px; background: var(--line); position: relative; transition: background .15s; } .toggle .switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; } .toggle input:checked + .switch { background: var(--ok); } .toggle input:checked + .switch::after { transform: translateX(18px); } .toggle input:focus-visible + .switch { outline: 2px solid var(--ember); outline-offset: 2px; } /* ---------- look & feel (custom) ---------- */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: var(--user-bg, none); background-size: var(--user-bg-size, cover); background-position: center; pointer-events: none; } body::after { content: ''; position: fixed; inset: 0; z-index: -1; background: #000; opacity: var(--user-bg-dim, 0); pointer-events: none; } :root[data-cards="frosted"] .card, :root[data-cards="frosted"] .tabbar, :root[data-cards="frosted"] .topbar { background: color-mix(in srgb, var(--card) 74%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); } .look-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .look-opt { border: 2px solid var(--line); border-radius: 14px; padding: 0; background: var(--card); color: inherit; font: inherit; cursor: pointer; overflow: hidden; min-height: 64px; display: flex; flex-direction: column; align-items: stretch; } .look-opt.on { border-color: var(--ember); box-shadow: 0 0 0 2px var(--ember-soft); } .look-opt .sw { flex: 1; min-height: 44px; background-size: cover; background-position: center; } .look-opt .lb { font-size: .72rem; font-weight: 600; padding: 3px 2px; text-align: center; } .accent-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .accent-dot { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--card); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; } .accent-dot.on { box-shadow: 0 0 0 3px var(--ink); } .seg { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; } .seg button { flex: 1; border: 0; background: var(--card); color: inherit; font: inherit; padding: 8px 6px; cursor: pointer; } .seg button.on { background: var(--ember-soft); color: var(--ember); font-weight: 700; } /* ---------- daily challenge ---------- */ .daily { border: 2px solid var(--ember-2); background: linear-gradient(135deg, var(--ember-soft), var(--card) 70%); position: relative; } .daily-h { display: flex; align-items: center; gap: 10px; cursor: pointer; background: none; border: 0; padding: 0; width: 100%; text-align: left; color: inherit; font: inherit; } .daily-h .ico { font-size: 1.7rem; animation: wiggle 2.4s ease-in-out infinite; } .daily-prompt { font-size: 1.08rem; font-weight: 700; margin: 10px 0 6px; } .daily-ans { display: flex; gap: 8px; margin-top: 8px; } .daily-ans input { margin: 0; } .daily .winners { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .daily .winners .pill { font-weight: 600; } .daily.won { border-color: var(--ok); } .shake { animation: shake .4s; } @keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } } .daily-pop { text-align: center; } .daily-pop .big { font-size: 3rem; margin: 6px 0; animation: hop 1.2s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .daily-h .ico, .daily-pop .big { animation: none; } } /* ---------- groups ---------- */ .gcard { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; } .gemoji { width: 48px; height: 48px; border-radius: 14px; background: var(--ember-soft); display: grid; place-items: center; font-size: 1.6rem; flex: none; } .emoji-row { display: flex; flex-wrap: wrap; gap: 6px; } .emoji-row button { font-size: 1.4rem; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); cursor: pointer; } .emoji-row button.on { border-color: var(--ember); background: var(--ember-soft); } .post .ptitle { font-weight: 800; font-size: 1.08rem; margin: 8px 0 2px; } a.grouplink { color: var(--ember); text-decoration: none; font-weight: 600; }