← All mockups

The Arcade

Points for using the app, spent on effects, skins, and prizes — with Xbox-style achievements. Lives behind a pill on the Explore page.

Why this sells Pro

the gamification thesis · 5 moves

The move	Why it converts
The daily drop lives on Explore	Daily habit traffic lands on the page whose whole job is following collections. Achievement payouts claim here too — nothing pays until you come collect it. Follows fill the six free slots, Full House meets the follow limit, "Go unlimited."
The shelf shows what you're not earning	Five grayed PRO achievement rows (lists, recents, cloning), each opens the Pro modal on tap. The paywall trigger list, rebuilt as a trophy case.
Pro earns 2× tickets	The one perk that compounds daily and reads on every surface — the footer line, the doubled drop.
A Month of Pro costs 7,500	About four months of habit buys 30 days of the habit-forming features, and lapsing back to free is a downgrade you can feel. Cheaper than a discount, stickier than a trial.
Effects, skins, and streaks make it yours	Churn now costs your streak, your effects, and your chrome — leaving stops being free.

The guardrail · one line

• Tickets are play money — earned, never bought, no cash value, fully separate from the $5 beta feedback credit. The system sells Pro by making free use compound, never by charging for fun.

What everything is called

the Arcade set · rules under the fold

Currency	The place	Store tab	Achievements tab	Daily claim
Tickets	The Arcade	Prize Counter	Achievements	Daily Collect

Naming rules · why some words are off the table

• "Coins" and "credit" are taken — the $5 beta feedback credit uses coins.png and the word "credit" (Stripe-backed, dollar-denominated). Arcade currency must never look or read like money.
• "Unlock" is taken — the subscription system's own docs use it for Pro features ("features become unlocked"). Arcade copy says "earn" and "claim" instead.
• "Achievement unlocked" is out with it — the earn toast never says "Achievement" anything, and never leads with 🏆 (that formula is the Xbox toast). Milestone toasts lead with "Completed", the secret skin says "Secret found" (The earn moment), and the emoji is always the achievement's own medal.
• "Quest" is out — Side Quests is a live collection title; "level" greps terribly (device-level, account-level).
• "Packs" is not an app concept — themed emoji sets are collections. On the Counter the doodle skins are "Doodle <name>" under the Skins group.
• "Doodle Mode" is DEAD — there is no mode. Doodle is the ARTWORK the skins are drawn in, nothing more. The thing you equip is a skin (Doodle Classic, Doodle Seasonal, Doodle Gold); the settings row that holds them is "App skin". Never "mode", never "Doodle Mode", anywhere.
• No dollar amounts anywhere in the Arcade (checkout owns pricing), no "founding", no library-size selling.

The pill on Explore

1 surface · plotted on the evolved layout

A · Arcade pill — idle + the waiting badge

1,280

1,2803

✅ <PopTip> · ui/components/pop/PopTip.vue — hover tip on the pill

🟡 <ArcadePill> · new atom — spec below · catalog

🟡 useArcadeStore · ui/store/arcade.js — new Pinia store, source below

Vue · ArcadePill.vue — full component source

<script setup>
import { computed } from 'vue';
import { useArcadeStore } from '../store/arcade.js';
import PopTip from './pop/PopTip.vue';

const arcade = useArcadeStore();
const tip = computed(() =>
    arcade.waiting ? `${arcade.waiting} waiting in the Arcade` : 'Arcade'
);
</script>

<template>
    <PopTip :text="tip">
        <button
            class="arcade-pill"
            :aria-label="`Arcade — ${arcade.balanceLabel} tickets`"
            @click="arcade.open('achievements')"
        >
            <img class="arcade-pill__mark" :src="arcade.ticketPng" alt="" />
            <span class="arcade-pill__count">{{ arcade.balanceLabel }}</span>
            <!-- the waiting badge: unseen achievements + today's unclaimed
                 drop. :key remounts on every bump, so the pop-in + single
                 ring replay — no watcher, no loop. -->
            <span v-if="arcade.waiting" :key="arcade.waiting"
                  class="arcade-pill__news">{{ arcade.waiting }}</span>
        </button>
    </PopTip>
</template>

<style scoped>
.arcade-pill {
    position: relative;   /* the waiting badge anchors here */
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 9px;
    border: none;
    border-radius: 10rem;
    background: var(--c-button-gray-bg-2);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--c-text-secondary);
    line-height: 1;
    cursor: pointer;
    transition: background .15s, box-shadow .15s;
}
.arcade-pill:hover { background: var(--c-button-gray-hover-bg-2); }
.arcade-pill__mark { width: 1.9rem; height: 1.9rem; margin: -3px 0; } /* big enough to read as a ticket */
/* the waiting badge — unseen achievements + today's unclaimed drop.
   Pops in once, rings ONCE, then sits still — nothing on the pill
   ever loops. --arcade-grape (#7C3AED) is a NEW color: the app's
   destructive red reads as a billing error, and the badge is good
   news. Add to colors.css with the build (logged in DEV-NOTES.md). */
.arcade-pill__news {
    position: absolute;
    top: -6px;
    right: -6px;
    display: grid;
    place-items: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 10rem;
    background: var(--arcade-grape, #7C3AED);
    color: var(--white);
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 0 0 0 2px var(--c-surface-primary);
    box-sizing: border-box;
    animation: arcade-news-pop .3s cubic-bezier(0.175, 0.885, 0.32, 2) both,
               arcade-news-ring 1.2s ease-out .3s 1;
}
@keyframes arcade-news-pop {
    from { scale: .4; opacity: 0; }
    to   { scale: 1; opacity: 1; }
}
@keyframes arcade-news-ring {
    from { outline: 4px solid color-mix(in srgb, var(--arcade-grape, #7C3AED) 40%, transparent); outline-offset: 0; }
    to   { outline: 4px solid transparent; outline-offset: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .arcade-pill__news { animation: none; }
}
</style>

Vue · parent invocation — Explore.vue

<!-- Evolved Explore layout: right cluster of the sticky controls bar,
     between search and the view toggle. -->
<div class="explore-controls__right">
    <ArcadePill />
    <ViewToggle />
</div>

<!-- Current shipped Explore.vue (no sticky bar yet): wrap the search
     form and the pill in one flex row, pill right-aligned. -->
<div class="explore-page__search-row">
    <form class="explore-page__search">…existing ComboField…</form>
    <ArcadePill />
</div>

JS · ui/store/arcade.js — new Pinia store, shared by every Arcade surface

import { defineStore } from 'pinia';

// Tickets are play money: earned, never bought, never dollar-
// denominated, entirely separate from the $5 beta feedback credit.
export const useArcadeStore = defineStore('arcade', {
    state: () => ({
        balance: 0,            // hydrated from GET account/arcade
        earnedAllTime: 0,
        streak: 0,             // consecutive daily claims
        claimable: false,      // is today's drop unclaimed?
        todaysDrop: 20,        // 20 base + 5/streak day, capped at 40
        achievements: [],      // [{ slug, tier, earnedAt, claimedAt, tickets, progress, total }]
                               // tier: 'quiet' | 'milestone' | 'secret' (the volume ladder)
        prizes: [],            // [{ slug, ownedAt, equipped }]
        show: false,           // modal visibility
        tab: 'achievements',   // 'store' | 'achievements' — the shelf is the front door
    }),
    getters: {
        balanceLabel: (s) => s.balance.toLocaleString('en-US'),
        ticketPng: () =>
            'https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/64/1f3ab.png',
        earnedCount: (s) => s.achievements.filter(a => a.earnedAt).length,
        // quiet earns not yet seen on the shelf
        // earned but not yet claimed — tickets waiting at the counter
        unclaimedEarned: (s) => s.achievements.filter(a => a.earnedAt && !a.claimedAt).length,
        // everything the badge counts: unclaimed earns + today's unclaimed
        // drop. Each claim clears its own +1 — nothing clears on open.
        waiting() { return this.unclaimedEarned + (this.claimable ? 1 : 0); },
    },
    actions: {
        open(tab) {
            if (tab) this.tab = tab;
            this.show = true;
        },
        openShelf() {
            // the earn toast's View CTA lands here — the shelf lives on Explore
            if (router.currentRoute.value.name !== 'explore') router.push('/explore');
            this.open('achievements');
        },
        async claimAchievement(slug) {
            // POST account/arcade/claim-achievement { slug } → { balance }
            // Tickets land NOW, not at earn — the shelf is the payout counter.
            // Server stamps claimedAt; the row's Claim button settles into
            // the muted "Claimed +N" mark and the pill badge drops by one.
        },
        close() { this.show = false; },
        async hydrate() { /* GET account/arcade → state */ },
        async claimDaily() {
            // POST account/arcade/claim → { balance, streak, todaysDrop }
            // UI: burst + count-up live in ClaimBar.vue
        },
        async buyPrize(slug) { /* POST account/arcade/buy { slug } */ },
        async togglePrize(slug, on) {
            // mirrors a boolean settings slug (see card E) so the
            // effect state rides the existing settings sync
        },
    },
});

Behavior · implementation notes

• Signed-in only. Guests never see the pill (no balance to show); free + Pro both do.
• TWO states, that's all: idle (gray pill, ticket mark + balance) and idle-plus-badge. The old green "+N" claimable costume is RETIRED — the badge covers it, and the pill never changes color or loops.
• The waiting badge counts things to CLAIM: earned-but-unclaimed achievements + 1 when today's drop is unclaimed. Achievements don't pay automatically — you go to the shelf and claim each one, and every claim drops the badge by one. Nothing clears just by opening the modal; the badge is a to-do list, not a "new" dot. A busy first session can reach 5–6; a normal day sits at 1–2. Never dozens — the caps and the claim habit keep it small. The tab's "12 of 28" progress badge is untouched.
• On each bump the badge pops in and rings ONCE (≤1.2s), then sits still. Nothing on the pill ever loops. Reduced motion: it just appears.
• Badge color = "arcade grape" #7C3AED — a NEW color, deliberately invented: the app's destructive red (#AD1103) reads as a billing error, and this badge is good news. Add --arcade-grape to colors.css with the build; deviation logged in DEV-NOTES.md.
• The ticket mark renders at 1.9rem (was 1.5rem) — at the old size the emoji didn't read as a ticket.
• Click opens the Arcade on the ACHIEVEMENTS tab, always — the shelf is the front door, and whatever the badge was counting is exactly what you land on (the badge clears on arrival). The Counter is one tap away. The pill never auto-opens anything.
• The daily drop is claimable ONLY here on Explore — that is the retention hook of the whole system. No claim from My Emoji, toasts, or emails.
• Balance updates ride the existing SSE channel (add `arcade.updated` alongside `copy.emoji` etc. in ui/utils/services/events/handlers.js).
• Placement plotted on the evolved-Explore archive (handoff/cms-demo-pages/explore-evolved.html): right cluster of the sticky controls bar. The shipped Explore.vue has no controls bar yet — interim placement is a flex row beside the 400px search form (invocation pane).
• Telemetry: `arcade.pill.viewed`, `arcade.pill.clicked` (state: idle | badged, plus the badge count).

The Arcade modal

4 states · one surface

B0 · First visit — the intro

Welcome to the Arcade

Use the app to earn in the Arcade.

Complete Achievements. Tricky ones pay big.
Earn Tickets. Every copy, save, and follow counts.
Spend at the Prize Counter. Effects, skins, a month of Pro.
Collect Daily. Streaks grow the drop.
Find Secret Achievements. A few are hiding right now.

Browse prizes

See achievements

✅ <PopModal> — stacked over the Arcade modal, the same layering ProModal already rides

✅ <IconButton> icon="x" — the close

🟡 <ArcadeIntro> atom · catalog

🟡 useArcadeStore — showIntro state + dismissIntro(), wiring below

Vue · ArcadeIntro.vue — full atom source

<script setup>
import PopModal from '../components/pop/PopModal.vue';
import IconButton from '../buttons/IconButton.vue';
import { useArcadeStore } from '../store/arcade.js';

const arcade = useArcadeStore();
const go = (tab) => { arcade.tab = tab; arcade.dismissIntro(); };
</script>

<template>
    <PopModal :popped="arcade.showIntro" width="560px" background-class="arcade-glass"
              @unpop="arcade.dismissIntro()">
        <div class="arcade-intro">
            <IconButton class="arcade-intro__close" icon="x" size="sm" filled
                        @click="arcade.dismissIntro()" />
            <h3 v-if="!arcade.introHelp" class="arcade-intro__title">
                <img class="jp-img" :src="emojiPng('1f579')" alt="" />
                Welcome to the Arcade
            </h3>
            <p class="arcade-intro__sub" :class="{ 'is-lead': arcade.introHelp }">
                Use the app to earn in the Arcade.</p>
            <ul class="arcade-intro__list">
                <li><img class="jp-img" :src="emojiPng('1f3c6')" alt="" />
                    <span><b>Complete Achievements.</b> Tricky ones pay big.</span></li>
                <li><img class="jp-img" :src="emojiPng('1f3ab')" alt="" />
                    <span><b>Earn Tickets.</b> Every copy, save, and follow counts.</span></li>
                <li><img class="jp-img" :src="emojiPng('1f9f8')" alt="" />
                    <span><b>Spend at the Prize Counter.</b> Effects, skins, a month of Pro.</span></li>
                <li><img class="jp-img" :src="emojiPng('1f381')" alt="" />
                    <span><b>Collect Daily.</b> Streaks grow the drop.</span></li>
                <li><img class="jp-img" :src="emojiPng('1f95a')" alt="" />
                    <span><b>Find Secret Achievements.</b> A few are hiding right now.</span></li>
            </ul>
            <div class="arcade-intro__ctas">
                <button class="arcade-intro__go" @click="go('store')">
                    <img class="jp-img" :src="emojiPng('1f9f8')" alt="" />Browse prizes</button>
                <button class="arcade-intro__alt" @click="go('achievements')">
                    <img class="jp-img" :src="emojiPng('1f3c6')" alt="" />See achievements</button>
            </div>
        </div>
    </PopModal>
</template>

Wiring · store/arcade.js + the mount — everything else is card A's source

// store/arcade.js — four additions to the card-A source
state: () => ({
    // ...existing state...
    showIntro: false,      // first-visit card over the modal
    introHelp: false,      // true = reopened from the footer ? (no welcome title)
}),
actions: {
    open(tab) {            // every door funnels through here already:
        if (tab) this.tab = tab;                    // pill, deep links,
        this.show = true;                           // toast's View achievement
        if (!settings.get('arcade-intro-seen')) {   // ← new
            this.introHelp = false;
            this.showIntro = true;
        }
    },
    openIntroHelp() {      // ← new — the footer ?, works any time, never reads the seen flag
        this.introHelp = true;
        this.showIntro = true;
    },
    dismissIntro() {                                                     // ← new
        this.showIntro = false;
        settings.set('arcade-intro-seen', true);    // server-owned, like the equip slugs
    },
}

// ArcadeModal.vue — mount it after </ModalContent>:
//   import ArcadeIntro from './ArcadeIntro.vue';
//   ...
//   <ArcadeIntro />
// PopModal stacking puts it on top of the open modal.
//
// ArcadeModal.vue footer — the tiny reopen ?, pinned bottom-right:
//   <button class="arcade-footer__help" aria-label="How the Arcade works"
//           @click="arcade.openIntroHelp()">?</button>

CSS · scoped styles for ArcadeIntro (flat selectors)

/* PopModal provides scrim + centering; width is set at the call site (560px).
   The frosted shell is a container variant in PopModal.vue, beside &.upsell-black: */
.pop-modal-container {
    &.arcade-glass {
        background: color-mix(in srgb, var(--metal-950) 62%, transparent);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
    }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .pop-modal-container.arcade-glass { background: var(--metal-950); }
}

/* scoped to ArcadeIntro (flat selectors) */
.arcade-intro { position: relative; padding: 40px 34px 36px;
    animation: arcade-intro-pop .22s cubic-bezier(.2, .9, .3, 1.15); }
@keyframes arcade-intro-pop { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .arcade-intro { animation: none; } }

.arcade-intro__close { position: absolute; top: 14px; right: 14px; }

.arcade-intro__title { display: flex; align-items: center; gap: 12px; padding-right: 34px;
    font-weight: 900; font-size: 3rem; line-height: 1.1; letter-spacing: -.02em;
    color: var(--white); }
.arcade-intro__title .jp-img { font-size: 3.2rem; }

.arcade-intro__sub { margin: 10px 0 0; font-size: 1.45rem; line-height: 1.5;
    color: color-mix(in srgb, var(--white) 65%, transparent); }
/* help reopen (the footer ?) — no welcome title, the sub leads */
.arcade-intro__sub.is-lead { margin: 0; padding-right: 34px;
    font-size: 1.7rem; font-weight: 700; color: var(--white); }

.arcade-intro__list { list-style: none; margin: 28px 0 30px; padding: 0;
    display: grid; gap: 19px; }
.arcade-intro__list li { display: flex; gap: 11px; font-size: 1.3rem; line-height: 1.45;
    color: color-mix(in srgb, var(--white) 72%, transparent); }
.arcade-intro__list .jp-img { font-size: 1.6rem; flex: none; translate: 0 1px; }
.arcade-intro__list b { color: var(--white); }

.arcade-intro__ctas { display: flex; gap: 10px; }
.arcade-intro__go, .arcade-intro__alt { flex: 1; display: inline-flex; align-items: center;
    justify-content: center; gap: 8px; padding: 12px 14px; border: none;
    border-radius: 10rem; font-weight: 700; font-size: 1.4rem; cursor: pointer; }
.arcade-intro__ctas .jp-img { font-size: 1.6rem; }
.arcade-intro__go { background: var(--green-400); color: var(--green-950); }
.arcade-intro__alt { background: color-mix(in srgb, var(--metal-300) 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--metal-300) 14%, transparent);
    color: var(--white); }

/* the reopen ? — lives in ArcadeModal's footer (card B), pinned bottom-right */
.arcade-footer { position: relative; }
.arcade-footer__help { position: absolute; right: 12px; top: 50%; translate: 0 -50%;
    width: 22px; height: 22px; display: grid; place-items: center; border: none;
    border-radius: 50%;
    background: color-mix(in srgb, var(--metal-300) 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--metal-300) 16%, transparent);
    color: color-mix(in srgb, var(--white) 55%, transparent);
    font-weight: 700; font-size: 1.15rem; cursor: pointer; }
.arcade-footer__help:hover { color: var(--white); }

Behavior · when it shows, when it never does again

• Shows ONCE per account: the first time the Arcade opens, whatever the door — pill, deep link, the earn toast's View achievement. First open is first open.
• The flag is a server settings slug (arcade-intro-seen), written on dismiss — it rides the same sync as the equip switches, so it never re-pops on another device. Nothing client-only.
• Every way out marks it seen: ×, scrim click, Esc, either CTA. The CTAs also land the tab — Browse prizes → Prize Counter, See achievements → the shelf. No "don't show again" checkbox; the auto-pop happens once, ever.
• Still findable after dismissal: a tiny ? pinned bottom-right in the modal footer reopens the card any time as the HELP variant — same rows and CTAs, no Welcome title, the sub leads at heading weight (introHelp flag; reopening never touches the seen slug).
• The card is frosted glass: translucent metal-950 + 16px backdrop blur (background-class="arcade-glass", a container variant beside upsell-black in PopModal.vue), so the Arcade reads through it, softened. No backdrop-filter support → the @supports fallback goes solid metal-950.
• Copy rules: one plain sub under the title ("Use the app to earn in the Arcade."), then five verb-led rows (complete / earn / spend / collect / find) — bold lead, period, plain tail; never an em dash (banned in customer-facing copy). No ticket amounts, no %s, no $ anywhere on the card. The numbers live on the shelf and the counter; the intro just points at them.
• The 🥚 row ("a few are hiding right now") points at the shelf, where every secret now hangs as its own ??? row with the bounty showing. Each CTA wears its row's emoji — 🧸 prizes, 🏆 achievements — so the card and the buttons speak the same picture language.
• Pop-in is one .22s translate+scale, killed under prefers-reduced-motion. No confetti, no glow — the claim bar under it is the loud thing.
• Demo: in-context/explore.html pops it on the first open per browser (localStorage stands in for the slug); ?surface=intro forces the welcome variant; the footer ? reopens it in help mode.

B · Prize Counter

✅ <PopModal> + <ModalContent> + <ModalHeaderExplore> · ui/components/pop/

✅ <IconButton icon="x" filled> · <ToggleSwitch size="sm"> · <Text>

🟡 <ArcadeModal> surface · <PrizeCard> + <TicketMark> atoms · catalog

🟡 useArcadeStore · ui/store/arcade.js — source in card A's drawer applies verbatim

Vue · ArcadeModal.vue — full surface source (both tabs)

<script setup>
import PopModal from '../components/pop/PopModal.vue';
import ModalContent from '../components/pop/templates/ModalContent.vue';
import ModalHeaderExplore from '../components/pop/templates/ModalHeaderExplore.vue';
import IconButton from '../buttons/IconButton.vue';
import ClaimBar from '../components/Arcade/ClaimBar.vue';
import PrizeCard from '../components/Arcade/PrizeCard.vue';
import AchievementRow from '../components/Arcade/AchievementRow.vue';
import TicketMark from '../components/Arcade/TicketMark.vue';
import { useArcadeStore } from '../store/arcade.js';
import { useUpsellStore } from '../store/upsell.js';

const arcade = useArcadeStore();
const upsell = useUpsellStore();
const PRIZE_GROUPS = ['effects', 'skins', 'big-prizes'];
</script>

<template>
    <PopModal :popped="arcade.show" width="760px" background-class="upsell-black"
              @unpop="arcade.close()">
        <ModalContent>
            <template #header>
                <ModalHeaderExplore title="Arcade">
                    <template #controls>
                        <TicketMark :count="arcade.balance" size="lg" />
                        <IconButton icon="x" size="md" filled />
                    </template>
                </ModalHeaderExplore>
            </template>

            <ClaimBar />

            <nav class="arcade-tabs">
                <!-- Achievements first — the pill lands here, and it leads -->
                <button :class="{ 'is-active': arcade.tab === 'achievements' }"
                        @click="arcade.tab = 'achievements'">
                    <img class="jp-img" :src="emojiPng('1f3c6')" alt="" />
                    Achievements
                    <span class="arcade-tabs__badge">
                        {{ arcade.earnedCount }} of {{ arcade.achievements.length }}
                    </span>
                </button>
                <button :class="{ 'is-active': arcade.tab === 'store' }"
                        @click="arcade.tab = 'store'">
                    <img class="jp-img" :src="emojiPng('1f3ab')" alt="" />
                    Prize Counter
                </button>
            </nav>

            <section v-if="arcade.tab === 'store'" class="arcade-shop">
                <div v-for="group in PRIZE_GROUPS" :key="group" class="arcade-shop__group">
                    <h3 class="arcade-shop__group-title">{{ groupLabel(group) }}</h3>
                    <div class="arcade-shop__grid">
                        <PrizeCard v-for="p in arcade.prizesIn(group)" :key="p.slug" :prize="p" />
                    </div>
                </div>
            </section>

            <section v-else class="arcade-achievements">
                <div class="arcade-achievements__meter">…summary + meter, see card C…</div>
                <AchievementRow v-for="a in arcade.achievements" :key="a.slug" :achievement="a" />
            </section>

            <template #footer>
                <p class="arcade-footer">
                    Pro earns <b>2× tickets</b> on everything.
                    <button class="arcade-footer__link" @click="upsell.updateShowPro(true)">
                        See what's in Pro
                    </button>
                </p>
            </template>
        </ModalContent>
    </PopModal>
</template>

Vue · PrizeCard.vue — full atom source

<script setup>
import ToggleSwitch from '../../input/ToggleSwitch.vue';
import TicketMark from './TicketMark.vue';
import { useArcadeStore } from '../../store/arcade.js';
import { useAccountStore } from '../../store/account.js';
import { useUpsellStore } from '../../store/upsell.js';

const props = defineProps({ prize: { type: Object, required: true } });
const arcade = useArcadeStore();
const account = useAccountStore();
const upsell = useUpsellStore();

// prize: { slug, name, desc, emoji, cost, group, proOnly, ownedAt, equipped }
const affordable = () => arcade.balance >= props.prize.cost;
const buy = () => {
    if (props.prize.proOnly && !account.isPro) return upsell.updateShowPro(true);
    if (affordable()) arcade.buyPrize(props.prize.slug);
};
</script>

<template>
    <article class="prize-card" :class="{ 'is-owned': prize.ownedAt }">
        <div class="prize-card__art">
            <img class="jp-img" :src="emojiPng(prize.emoji)" alt="" />
        </div>
        <h4 class="prize-card__name">
            {{ prize.name }}
            <span v-if="prize.proOnly" class="prize-card__pro-chip">Pro</span>
        </h4>
        <p class="prize-card__desc">{{ prize.desc }}</p>
        <div class="prize-card__row">
            <template v-if="prize.ownedAt">
                <span class="prize-card__owned">Owned</span>
                <ToggleSwitch size="sm" :model-value="prize.equipped ? 1 : 0"
                    @change="arcade.togglePrize(prize.slug, $event)" />
            </template>
            <button v-else class="prize-card__price"
                    :class="{ 'is-far': !affordable() }" @click="buy">
                <TicketMark :count="prize.cost" />
            </button>
        </div>
    </article>
</template>

CSS · scoped styles for ArcadeModal + PrizeCard + TicketMark (flat selectors)

/* tabs */
.arcade-tabs { display: flex; gap: 6px; padding-bottom: 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--metal-300) 14%, transparent); }
.arcade-tabs button { display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 16px; border: none; border-radius: 10rem; background: transparent;
    color: color-mix(in srgb, var(--white) 60%, transparent);
    font-weight: 700; font-size: 1.3rem; cursor: pointer; }
.arcade-tabs button.is-active {
    background: color-mix(in srgb, var(--metal-300) 14%, transparent); color: var(--white); }
.arcade-tabs button .jp-img { font-size: 1.45rem; }
.arcade-tabs__badge { padding: 2px 7px; border-radius: 10rem;
    background: var(--green-400); color: var(--green-950); font-size: 1rem; }

/* shop */
.arcade-shop__group-title { font-weight: 700; font-size: 1.1rem; letter-spacing: .1em;
    text-transform: uppercase; color: color-mix(in srgb, var(--white) 45%, transparent);
    margin-bottom: 10px; }
.arcade-shop__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* prize card */
.prize-card { display: flex; flex-direction: column; gap: 8px; padding: 14px;
    border-radius: 12px; background: color-mix(in srgb, var(--metal-300) 8%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--metal-300) 12%, transparent); }
.prize-card.is-owned {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green-500) 35%, transparent); }
.prize-card__art { display: grid; place-items: center; height: 64px; border-radius: 8px;
    background: color-mix(in srgb, var(--metal-300) 10%, transparent); font-size: 3.2rem; }
.prize-card__name { font-weight: 700; font-size: 1.35rem; color: var(--white); }
.prize-card__desc { font-size: 1.15rem; line-height: 1.45;
    color: color-mix(in srgb, var(--white) 62%, transparent); flex: 1; }
.prize-card__row { display: flex; align-items: center; justify-content: space-between; }
.prize-card__price { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
    border: none; border-radius: 10rem; background: var(--c-button-green-bg);
    color: var(--metal-950); font-weight: 700; font-size: 1.2rem; cursor: pointer; }
.prize-card__price.is-far {
    background: color-mix(in srgb, var(--metal-300) 14%, transparent);
    color: color-mix(in srgb, var(--white) 55%, transparent); cursor: default; }
.prize-card__owned { font-weight: 700; font-size: 1.05rem; letter-spacing: .08em;
    text-transform: uppercase; color: var(--green-500); }
.prize-card__pro-chip { display: inline-flex; padding: 3px 9px; margin-left: 8px;
    border-radius: 10rem; background: var(--green-950); color: var(--green-500);
    box-shadow: inset 0 0 0 1px rgba(133,252,100,.25); font-weight: 700;
    font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; }

/* ticket mark (img + count, used everywhere a ticket amount shows) */
.ticket-mark { display: inline-flex; align-items: center; gap: 5px;
    font-weight: 700; }
.ticket-mark__img { width: 1.3em; height: 1.3em; }

Behavior · Prize Counter rules

• Shell: PopModal 760px, background-class "upsell-black" (fixed metal-950, both schemes — the Arcade is always dark, Xbox-dashboard energy). Watch the ExploreModal wrapper bug: pass background-class as the PROP, not :class (see DoodleModal.vue:23 for the correct call).
• Cards are picture-first: the art tile is the hero (72px) and the words stay short. SKIN cards render the ACTUAL doodle tile as their art — the real SVGs (doodle-classic-balanced / doodle-spooky / doodle-gold), white card, tiled small — never an emoji stand-in. You're buying artwork; the card shows the artwork.
• Three groups: Effects, Skins, Big prizes. Card states: price (green = affordable, muted = not yet), Owned + equip switch, Pro chip (buy attempt while free → upsell.updateShowPro(true)).
• The equip switch on the card IS the setting — it writes the matching boolean settings slug (card E). No separate inventory screen; nothing new to learn.
• Buying: instant, optimistic, toast via toast.pop({ emoji:'🎟', title:'It's yours!', message:'<name> added to your effects.' }). No confirm step under 2,000 tickets; Month of Pro gets one AlertModal confirm.
• A Month of Pro: grants a 30-day Pro period server-side (subscription.started SSE already handles the UI flip). Once a quarter per account. Not stackable with an active paid Pro month — the button disables with tip "You're already Pro".
• Prices never show a $ figure and tickets can never be bought — play money only, fully separate from the $5 beta feedback credit.
• Hover demos: Combo Rumble fists lunge, Fireworks sparks rise, Ticklish wiggles — pure CSS on the card art, all inside prefers-reduced-motion guards.
• The Doodle skins recolor the app chrome (Main.vue header + aside) with a tiled doodle underlay — same technique as PopModal's upsell-doodle (preloaded PNG, background-size 800px, low opacity so content wins). Classic uses the existing upsell-doodle.png; Seasonal needs new art from design each season. Card copy stays fun and skin-first ("Skin your EmojiCopy…") — the how-it-works lives here, never on the card.
• Telemetry: arcade.prize.viewed / bought / equipped / unequipped (slug), arcade.pro-shelf.blocked.

C · Achievements

✅ <PopModal> + <ModalContent> + <ModalHeaderExplore> — same shell as card B

✅ toast.pop() · ui/components/pop/util/toast.js — the earn moment rides its rail (options in The earn moment, below)

🟡 <AchievementRow> + <TicketMeter> atoms · catalog

🟡 useArcadeStore · ui/store/arcade.js — source in card A's drawer applies verbatim

Vue · AchievementRow.vue — full atom source

<script setup>
import TicketMark from './TicketMark.vue';
import TicketMeter from './TicketMeter.vue';
import { useAccountStore } from '../../store/account.js';
import { useUpsellStore } from '../../store/upsell.js';

// achievement: { slug, name, desc, emoji, tickets, earnedAt,
//               progress, total, proOnly, secret, rarity }
const props = defineProps({ achievement: { type: Object, required: true } });
const account = useAccountStore();
const upsell = useUpsellStore();

const locked = () => !props.achievement.earnedAt;
const claimable = () => props.achievement.earnedAt && !props.achievement.claimedAt;
const arcade = useArcadeStore();
const onClick = () => {
    // Pro-gated + not Pro: the row itself is the upsell hook
    if (props.achievement.proOnly && !account.isPro) upsell.updateShowPro(true);
};
</script>

<template>
    <article
        class="achievement-row"
        :class="{ 'is-earned': !locked(), 'is-locked': locked(), 'is-pro': achievement.proOnly,
                  'is-secret': achievement.tier === 'secret' && locked() }"
        @click="onClick"
    >
        <span class="achievement-row__medal">
            <template v-if="achievement.tier === 'secret' && locked()">?</template>
            <img v-else class="jp-img" :src="emojiPng(achievement.emoji)" alt="" />
            <span v-if="!locked()" class="achievement-row__check" aria-hidden="true">✓</span>
        </span>
        <span class="achievement-row__body">
            <span class="achievement-row__name">
                {{ achievement.tier === 'secret' && locked() ? '???' : achievement.name }}
                <span v-if="achievement.proOnly" class="achievement-row__pro-chip">Pro</span>
            </span>
            <span class="achievement-row__desc">{{ achievement.desc }}</span>
            <TicketMeter v-if="achievement.total && locked()"
                :value="achievement.progress" :total="achievement.total" />
        </span>
        <span class="achievement-row__right">
            <!-- the payout waits here: earned rows hold a Claim button
                 until tapped — tickets never land on their own -->
            <button v-if="claimable()" class="achievement-row__claim"
                    @click.stop="arcade.claimAchievement(achievement.slug)">
                Claim +{{ achievement.tickets }}
            </button>
            <!-- two facts, two marks: the medal's ✓ = earned, this = collected -->
            <span v-else-if="achievement.claimedAt" class="achievement-row__claimed">Claimed +{{ achievement.tickets }}</span>
            <TicketMark v-else :count="achievement.tickets" signed />
            <span v-if="achievement.rarity != null" class="achievement-row__rarity">
                {{ achievement.rarity }}% have this
            </span>
        </span>
    </article>
</template>

CSS · scoped styles for AchievementRow + TicketMeter (flat selectors)

.achievement-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px;
    border-radius: 12px; background: color-mix(in srgb, var(--metal-300) 8%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--metal-300) 12%, transparent); }

/* earned = the same green inner ring an Owned prize card wears, plus a
   check disc on the medallion — one language: green ring = yours */
.achievement-row.is-earned {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green-500) 35%, transparent); }
.achievement-row__check { position: absolute; right: -2px; bottom: -2px;
    width: 16px; height: 16px; display: grid; place-items: center;
    border-radius: 50%; background: var(--green-500); color: var(--metal-950);
    font-size: 1rem; font-weight: 700; line-height: 1;
    box-shadow: 0 0 0 2px var(--metal-950); }

.achievement-row__medal { position: relative; display: grid; place-items: center; width: 46px; height: 46px;
    border-radius: 50%; background: color-mix(in srgb, var(--green-500) 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green-500) 30%, transparent);
    font-size: 2.2rem; flex: none; }
.achievement-row__body { flex: 1; min-width: 0; }
.achievement-row__name { font-weight: 700; font-size: 1.35rem; color: var(--white); }
/* the payout button — earned-unclaimed rows only */
.achievement-row__claim { border: none; cursor: pointer; white-space: nowrap;
    padding: 6px 12px; border-radius: 10rem; font-weight: 700; font-size: 1.15rem;
    background: var(--green-500); color: var(--metal-950); }
.achievement-row__claim:hover { background: var(--green-400); }
/* collected — quiet, past-tense */
.achievement-row__claimed { font-weight: 700; font-size: 1.15rem; white-space: nowrap;
    color: color-mix(in srgb, var(--white) 55%, transparent); }
.achievement-row__desc { display: block; margin-top: 4px; font-size: 1.15rem;
    color: color-mix(in srgb, var(--white) 62%, transparent); }
.achievement-row__right { display: flex; flex-direction: column;
    align-items: flex-end; gap: 4px; flex: none; }
.achievement-row__rarity { font-size: 1rem;
    color: color-mix(in srgb, var(--white) 45%, transparent); }

/* locked = grayscale medallion + muted text (the Xbox treatment) */
.achievement-row.is-locked .achievement-row__medal {
    background: color-mix(in srgb, var(--metal-300) 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--metal-300) 16%, transparent);
    filter: grayscale(1); opacity: .6; }
.achievement-row.is-locked .achievement-row__name {
    color: color-mix(in srgb, var(--white) 55%, transparent); }
.achievement-row.is-locked .achievement-row__desc {
    color: color-mix(in srgb, var(--white) 40%, transparent); }

/* Pro-locked rows are clickable upsell hooks */
.achievement-row.is-pro { cursor: pointer; transition: box-shadow .15s; }
.achievement-row.is-pro:hover {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green-500) 40%, transparent); }

/* secret */
.achievement-row.is-secret .achievement-row__medal { background: transparent;
    box-shadow: none; filter: none; opacity: 1; font-size: 1.8rem;
    border: 1.5px dashed color-mix(in srgb, var(--metal-300) 40%, transparent);
    color: color-mix(in srgb, var(--white) 40%, transparent); }

/* meter */
.ticket-meter { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.ticket-meter__bar { flex: 1; max-width: 160px; height: 8px; border-radius: 10rem;
    background: color-mix(in srgb, var(--metal-300) 18%, transparent); overflow: hidden; }
.ticket-meter__fill { height: 100%; border-radius: 10rem; background: var(--green-600); }
.ticket-meter__num { font-size: 1.05rem;
    color: color-mix(in srgb, var(--white) 55%, transparent); }

Behavior · Achievements rules

• The shelf groups under four plain headers — The basics · Milestones · Pro · Secrets (the store's group-title atom). Within a group: unclaimed earns on top, then claimed, then in-progress, then locked; secrets biggest-bounty first so the +2,000 leads. The meter row totals earned count + all-time tickets.
• Four row states, readable at a glance: EARNED–UNCLAIMED = green inner ring + ✓ disc + a green "Claim +N" button — the payout waits until tapped. EARNED–CLAIMED = same ring, a muted "Claimed +N" — the word plus what it paid, NO check. The ✓ belongs to earned alone (the medal disc). One glyph per fact. IN PROGRESS = neutral tile, colored medallion, progress bar. LOCKED = muted tile, grayscale medallion, +N mark showing what it pays.
• Claiming: tap → balance counts up, the pill badge drops by one, the button settles into the muted "Claimed +N". Achievements NEVER pay automatically — even secrets wait for their tap (arcade.claimAchievement, store in card A).
• Earning fires server-side off events the app already sends — the copy ledger (POST account/copy), collection.followed, collection.created, settings.updated. No new client instrumentation to award most of them.
• The earn moment rides the volume ladder (The earn moment section below): MILESTONE earns pop the toast, QUIET earns only bump the pill's waiting badge (card A) and wait here on the shelf, SECRETS pop the gold-stamp skin (S1). Never the trophy + "Achievement unlocked/earned" formula, never the ticket amount. The pill count bumps alongside. No modal interruption, ever.
• Pro-locked rows render grayed with the PRO chip and are CLICKABLE — tap opens the Pro modal (upsell.updateShowPro(true), the one funnel every beta gate uses). This is the achievements-as-upsell play: the shelf shows free users exactly what they're not earning.
• "Full House" says six free slots because the shipped build caps free follows at 6 (Explore.vue:221). PLANS-PRICING.md still says 5 — resolve the drift before copy freezes; the achievement copy should read whatever ships.
• Rarity ("22% have this") needs a real stats endpoint — never fabricate numbers. Hide the line until the endpoint exists (rarity: null hides it in the atom).
• Secret achievements show ??? + dashed medallion until earned. Seven at launch, and EVERY one gets its own row with its full bounty showing — never a collapsed "N more secrets" row. The bounty IS the bait: a ??? worth +2,000 begs to be chased, and a +500 with a vague tease is built to leak — people hunt the answer on Reddit, which is the point. The tease never says more than a nudge.
• The teases, subtle on purpose: "Konami" (+500) "Secret. The old codes still work." · "Leap Day" (+200) "Secret. Some days are rarer than others." · "Superfan" (+100, copy the same emoji 50 times) "Secret. Keep copying." · "Racecar" (+100, palindrome combo) "Secret. Read it backwards." · "Speedrun" (+50) "Secret. Speed counts." · "Party Pooper" (+20) "Secret. When you gotta go, you gotta go."
• "Secret Emoji" (the 5-find hunt, +2,000 — full spec under the achievements table) starts as ??? with "Secret. It's right under your nose." and is the one secret that REVEALS early: after the first find it renders as a named row with a 5-step progress bar and the current hunt tease as its description.
• Secret wire-ups: Racecar = reverse-and-compare on the combo id (already an ordered underscore-joined sequence, min length 3). Konami = global key listener that ignores focused inputs. Speedrun = 10 copies in a rolling 10s window (client detects, server sanity-checks the copy-ledger timestamps). Leap Day = server grants on any activity dated Feb 29 in the user's timezone. Party Pooper = hooks the existing drag-out-of-Action-Bar path (the action-bar-emoji-shake "outside" drop that already animates) and grants ONLY when the dragged emoji is the poop (1f4a9) — any other emoji dropped nowhere stays a plain miss. Was "Butterfingers" (any emoji, an accidental-fumble trip); reworked to poop-only so it's a joke you find, not a fumble you're teased for.
• Extension achievement ("Everywhere") stays hidden until the extension ships at full launch — approved label "Coming soon" if shown early.
• Telemetry: arcade.achievement.earned (slug), arcade.achievement.pro-row.clicked (slug).

D · The claim moment

✅ <PrimaryButton variant="green"> · ui/buttons/PrimaryButton.vue

🟡 <ClaimBar> atom · catalog

🟡 useArcadeStore · ui/store/arcade.js — source in card A's drawer applies verbatim

Vue · ClaimBar.vue — full atom source

<script setup>
import { ref } from 'vue';
import { useArcadeStore } from '../../store/arcade.js';

const arcade = useArcadeStore();
const btn = ref(null);
const BURST = ['1f389', '2728', '1f3ab', '2728'];

async function claim() {
    if (!arcade.claimable) return;
    // burst first — the payoff must feel instant
    BURST.forEach((code, i) => {
        const s = document.createElement('span');
        s.className = 'claim-bar__burst';
        s.style.setProperty('--dx', `${(i % 2 ? 1 : -1) * (18 + i * 14)}px`);
        s.style.setProperty('--dy', `${-26 - i * 10}px`);
        s.innerHTML = `<img src="${emojiPng(code)}" alt="" />`;
        btn.value.appendChild(s);
        setTimeout(() => s.remove(), 950);
    });
    await arcade.claimDaily(); // server settles balance + streak
}
</script>

<template>
    <aside class="claim-bar" :class="{ 'is-claimed': !arcade.claimable }">
        <img class="jp-img" :src="emojiPng('1f381')" alt="" />
        <p v-if="arcade.claimable" class="claim-bar__text">
            <b>{{ arcade.streak }}-day streak</b>
        </p>
        <p v-else class="claim-bar__text">
            Back tomorrow for more · <b>{{ arcade.streak }}-day streak</b>
        </p>
        <button ref="btn" class="claim-bar__btn" :disabled="!arcade.claimable" @click="claim">
            {{ arcade.claimable ? 'Daily Collect' : 'Collected' }}
        </button>
    </aside>
</template>

<style scoped>
.claim-bar { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    border-radius: 12px; background: color-mix(in srgb, var(--green-500) 10%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green-500) 22%, transparent); }
.claim-bar.is-claimed { background: color-mix(in srgb, var(--metal-300) 8%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--metal-300) 12%, transparent); }
.claim-bar__text { flex: 1; font-size: 1.3rem; line-height: 1.4;
    color: color-mix(in srgb, var(--white) 85%, transparent); }
.claim-bar__text b { color: var(--white); }
.claim-bar__btn { position: relative; border: none; border-radius: 10rem;
    padding: 9px 18px; background: var(--c-button-green-bg); color: var(--metal-950);
    font-weight: 700; font-size: 1.3rem; cursor: pointer; }
.claim-bar__btn:disabled { background: color-mix(in srgb, var(--metal-300) 16%, transparent);
    color: color-mix(in srgb, var(--white) 60%, transparent); cursor: default; }
.claim-bar__burst { position: absolute; left: 50%; top: 50%; pointer-events: none;
    animation: claim-burst .9s ease-out forwards; }
.claim-bar__burst img { width: 1.6rem; height: 1.6rem; }
@keyframes claim-burst {
    from { transform: translate(-50%, -50%) scale(.4); opacity: 1; }
    to   { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
                     scale(1.15); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .claim-bar__burst { animation: none; opacity: 0; } }
</style>

Behavior · daily-drop rules

• Drop = 20 base + 5 per consecutive day, capped at 40 (a week keeps you at max). Missing a day resets to 20. Server computes; client renders whatever it's given.
• One claim per calendar day per account, settled server-side (POST account/arcade/claim). The button never trusts local time.
• The bar says two things only: your streak, and the button — "Daily Collect". NO amount anywhere on the bar; the payout shows in the balance count-up. Claimed state: "Back tomorrow for more · N-day streak", button reads "Collected".
• On claim: burst animation, balance count-up (pill + modal chip in sync via the store), bar flips to its claimed state with tomorrow-tease copy. Whole moment < 1s, no extra dialogs.
• The bar only renders inside the Arcade modal on Explore. Streak copy shows from day 2.
• Pro's 2× applies to the drop too (Pro sees +80 at cap) — the footer line is doing quiet sales work every single day.
• No countdown timer to the next drop — timers are banned energy; the tease line is enough.
• Telemetry: arcade.daily.claimed (streak, amount).

The earn moment

the volume ladder · the stamp + its secret skin

Tier	Which achievements	How you hear about it
Quiet · 11	The learning-the-app firsts: Hello World, Chain Reaction, Keeper, Fan Behavior, Night Shift, That's Me, Detective, Hotkeys, Full Send, List Maker, Time Traveler	No toast. The pill grows its grape count badge (card A) — pull, not push
Milestone · 10	Century Club, Thousandaire, Regular, Locked In, Window Shopper, Everywhere, Full House, Shelf Control, The Collector, Curator	The stamp toast (T4, below)
Secret · 7	All seven	The toast's secret skin — S1, below

The volume ladder · why session one stays silent

• Notification volume is a PROPERTY of each achievement — the server sends `tier` with every grant. Tiers are presentation only: everything still settles and pays server-side the moment it's earned; the tier only decides how loudly the app says so.
• The Milestone test: it cannot be completed in one ordinary session — calendar-gated (the streaks), volume-gated (100+ copies), or a deliberate act big enough to earn the noise. Two CAN fire on day one if a user really goes for it: "Everywhere" (installing the extension) and "Full House" (six follows in a sitting). Both are deliberate, both are the exact behavior the funnel wants, and both deserve the toast when they happen — the test is about ordinary use, not a ceiling.
• The payoff: an ordinary first session trips four or five quiet earns and no toasts at all. The badge climbs, curiosity opens the shelf, and the "there's a whole shelf of these" discovery happens THERE — pulled, not pushed. Left alone, the first toast lands around day 7 (Regular / Window Shopper).
• Secrets skip the quiet gate and always fire immediately, session one included — a tripped secret is the app catching you, and the punchline can't wait. They wear their own skin (S1) so the corner of your eye knows it's not a milestone.
• Naming: tier words surface only as the shelf's group headers (card C) — The basics · Milestones · Pro · Secrets. Never as chips or labels on rows.
• Earning and PAYING are two moments: every earned achievement, any tier, waits UNCLAIMED on the shelf until the user claims it — the toast announces, the shelf pays. The badge counts every unclaimed earn + the unclaimed drop. A milestone's View CTA lands you on the very row holding your Claim button.
• Multiple earns at once follow the loudest member: a milestone + two quiet = one toast, badge +3 until each is claimed.

Option	What it says	New UI
T4 · The stamp ← PICKED	COMPLETED · the seal slams on Century Club, ink dries darker	1 toast template
S1 · The gold stamp — the secret skin	SECRET FOUND · dark card, crown-gold ink	a `variant` prop on StampToast

The rules for this moment

• The toast fires ONLY on Milestone earns (ladder above). Quiet earns badge the pill and wait on the shelf; secrets pop the S1 skin. A toast you see about once a week is an event — six in session one is a car alarm.
• The toast never says "Achievement" anything, and never leads with 🏆. "Achievement unlocked" is banned outright — "unlock" belongs to subscription copy.
• The moment must READ as a completion: the milestone stamp leads with the word "Completed". The secret skin alone says "Secret found" — a different word for a different moment (you didn't finish a task, you caught something).
• The achievement's OWN medal emoji leads (never 🏆) and the name does the talking.
• The ticket amount NEVER shows on the toast — the payout waits on the shelf, where the row holds a green "Claim +N" button until tapped. That's the hook: View achievement is how you find out what you got, the claim tap is how you collect it, and the shelf shows what's left to earn.
• Same lifecycle as every toast in the app: pop on the top-center rail, hold 3s (toast.js default timeout), leave. Click dismisses. Escape dismisses. Simultaneous earns stack like any toasts.
• One CTA on every option: a small "View achievement" button — it dismisses the toast, routes to Explore if you're elsewhere, and opens the Arcade modal on the Achievements tab (arcade.openShelf(), store source in card A).
• Every demo below runs the real timing — hit Play.
• Build note: the in-context preview already wears the stamp (the hunt find rides the S1 skin). The StampToast atom still needs a catalog entry.

T4 · The stamp — punch-card energy

Completed Century Club View achievement

✅ toast.pop() rail + lifecycle · toast.js + PopToast.vue — 3s / click / Escape untouched

🟡 <StampToast> · new toast template — full source below · catalog entry lands with the pick

🟡 PopToast template switch — 3-line patch below, key 'arcade-stamp'

Vue · StampToast.vue — full component source

<script setup>
import { useArcadeStore } from '../../../store/arcade.js';

// achievement: { slug, name, emoji, tickets, tier }
const props = defineProps({ achievement: { type: Object, required: true } });
const emit = defineEmits(['remove']);
const arcade = useArcadeStore();
const view = () => { emit('remove'); arcade.openShelf(); };
</script>

<template>
    <div class="stamp-toast" @mousedown="emit('remove')">
        <span class="stamp-toast__seal" aria-hidden="true">
            <span class="stamp-toast__ring">
                <img class="jp-img" :src="emojiPng(achievement.emoji)" alt="" />
            </span>
        </span>
        <span class="stamp-toast__body">
            <span class="stamp-toast__word">Completed</span>
            <b>{{ achievement.name }}</b>
        </span>
        <button class="stamp-toast__view" @mousedown.stop @click="view">
            View achievement
        </button>
    </div>
</template>

<style scoped>
/* Entrance rides PopToast's stock item spring — only the seal
   choreographs: a fast slam, then the ink "dries" darker over a
   beat. Ink flips per scheme via --c-button-text-green. */
.stamp-toast { position: relative; display: flex; align-items: center; gap: 15px;
    padding: 12px 20px 12px 14px; border-radius: 1.6rem;
    background: var(--c-surface-primary);
    box-shadow: 0px 16px 72px 0px #171A571F,
        inset 0 0 0 1px var(--c-border-primary);
    cursor: pointer; }
.stamp-toast__seal { position: relative; width: 56px; height: 56px;
    display: grid; place-items: center; rotate: -10deg;
    animation: stamp-slam .25s cubic-bezier(.2, 1, .3, 1) .2s both,
               stamp-dry .9s ease-out .45s both; }
.stamp-toast__ring { position: relative; display: grid; place-items: center;
    width: 52px; height: 52px; border-radius: 50%;
    border: 2.5px solid var(--c-button-text-green); }
.stamp-toast__ring::after { content: ''; position: absolute; inset: 3px;
    border-radius: 50%;
    border: 1.5px dashed color-mix(in srgb, var(--c-button-text-green) 55%, transparent); }
.stamp-toast__ring .jp-img { width: 2.6rem; height: 2.6rem; }
.stamp-toast__body { display: flex; flex-direction: column; gap: 2px; }
.stamp-toast__word { font-weight: 800; font-size: .95rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--c-button-text-green); }
.stamp-toast__body b { font-weight: 700; font-size: 1.45rem;
    color: var(--c-text-primary); }
.stamp-toast__view { border: none; cursor: pointer; white-space: nowrap;
    padding: 5px 11px; border-radius: 10rem; font-weight: 700; font-size: 1.1rem;
    background: color-mix(in srgb, var(--green-500) 14%, transparent);
    color: var(--c-button-text-green); }
@keyframes stamp-slam { from { opacity: 0; scale: 2.4; rotate: -32deg; }
    to { opacity: .55; scale: 1; rotate: -10deg; } }
@keyframes stamp-dry { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .stamp-toast__seal { animation: none; }
}
</style>

JS · invocation

// PopToast.vue — one-line template switch (the only rail change).
// ToastMessage stays the default; the stamp registers here.
import ToastMessage from './templates/ToastMessage.vue';
import StampToast from './templates/StampToast.vue';

const TEMPLATES = { 'arcade-stamp': StampToast };

// template — replace the <ToastMessage v-for … /> line with:
<component
    :is="TEMPLATES[t.template] || ToastMessage"
    v-for="t in toast.toasts" :key="t.id"
    @remove="toast.unpop(t.id)" v-bind="t.props || t"
    class="pop-toast-item" />

// ui/utils/services/events/handlers.js — on arcade.achievement.earned
toast.pop({ template: 'arcade-stamp', achievement: a });
// timeout stays the default 3s; hideOn stays click + Escape

Behavior · T4 rules

• The idea: the punch card gets stamped. The seal slams in fast, 200ms after the card (scale 2.4 → 1 in .25s, settling at -10°), landing light — then the ink DRIES: opacity .55 → 1 over .9s, like a fresh stamp darkening. No ink flecks, no debris. Whole moment reads by ~1.4s, gone at 3s.
• The word is COMPLETED; the stamp is that word made physical — the completion mark slamming onto the card. The tab keeps "Achievements".
• Ink = the green mark family (--c-button-text-green flips it per scheme); the medal emoji inside the ring stays full-color JoyPixels — never tinted, never a glyph.
• View achievement = the one action: @mousedown.stop, then emit('remove') + arcade.openShelf() (routes to Explore if needed, opens the shelf tab — store source in card A).
• Card rides --c-surface-primary / --c-text-*. Click/Escape dismisses; 3s hold; stacks on the rail.
• prefers-reduced-motion: the seal renders placed at full ink — no slam, no dry ramp.

S1 · The gold stamp — the secret skin

Secret found Party Pooper View achievement

✅ toast.pop() rail + lifecycle · toast.js + PopToast.vue — untouched

🟡 variant prop on <StampToast> — the whole build is the diff below; no new template

Vue · StampToast.vue — the secret-skin diff

// props — one addition after `achievement`:
variant: { type: String, default: 'milestone' },   // 'milestone' | 'secret'

// template — root class + the word:
<div class="stamp-toast" :class="{ 'is-secret': variant === 'secret' }" …>
    <span class="stamp-toast__word">
        {{ variant === 'secret' ? 'Secret found' : 'Completed' }}
    </span>

// style — the costume change. Dark in BOTH schemes (that's the point);
// ink = crown-gold #FFDB59 (IconIndex.vue:110, Doodle Gold's anchor).
.stamp-toast.is-secret {
    background: var(--metal-950);
    box-shadow: 0px 16px 72px 0px #171A5747,
        inset 0 0 0 1px color-mix(in srgb, var(--metal-300) 18%, transparent);
}
.stamp-toast.is-secret .stamp-toast__ring { border-color: #FFDB59; }
.stamp-toast.is-secret .stamp-toast__ring::after {
    border-color: color-mix(in srgb, #FFDB59 55%, transparent); }
.stamp-toast.is-secret .stamp-toast__word { color: #FFDB59; }
.stamp-toast.is-secret .stamp-toast__body b { color: var(--white); }
.stamp-toast.is-secret .stamp-toast__view {
    background: color-mix(in srgb, #FFDB59 16%, transparent);
    color: #FFDB59; }

JS · the tier router — one handler serves the whole ladder

// ui/utils/services/events/handlers.js — on arcade.achievement.earned
function onAchievementEarned({ achievement: a }) {
    arcade.applyEarn(a);              // balance + shelf state — ALWAYS, every tier
    if (a.tier === 'quiet') return;   // no toast — the pill badge (card A) does the talking
    toast.pop({
        template: 'arcade-stamp',
        achievement: a,
        variant: a.tier,              // 'milestone' | 'secret'
    });
}

Behavior · S1 rules

• Same skeleton, same choreography — the T4 slam + ink-dry run unchanged; only the costume flips. Dark card in BOTH schemes, crown-gold ink. A secret always looks like this, so the corner of your eye learns the difference before you read a word.
• The word is SECRET FOUND — the one toast that doesn't say Completed. "Found" is the verb of a secret.
• The medal is the achievement's own emoji, revealed here for the first time — the shelf row flips from ??? + dashed medallion to the named row as the toast pops.
• Secrets skip the volume ladder's quiet gate and fire in session one. Lifecycle stock: 3s hold, click/Escape dismisses, stacks on the rail, View achievement opens the shelf.
• Party Pooper is the demo on purpose: it's the one secret whose medal IS the joke, so it shows the skin doing its job.
• Parked for later: a ???-to-name letter-flip entrance, and a bigger one-off "hatch" card reserved for finishing the 5-find hunt. V1 ships one skin for all seven secrets.

Effects in Settings

1 group · 4 categories + all-off · mirrors the Prize Counter groups

E · Settings — Effects group (one row per prize type)

Effects

All effects One switch for everything below.

Combo hover What your saved combos do when you point at them. Desk Toy▼

Emoji hover What a single emoji does when you point at it. Ticklish▼

Copy effect What happens the moment you copy. Copy Fireworks▼

App skin Art on your sidebar and header. Off▼

✅ <ToggleSwitch size="sm"> · ui/input/ToggleSwitch.vue — the master switch

✅ <Select size="sm"> — the category pickers, same atom the existing string settings use

✅ AllSettings group pattern · ui/components/AllSettings.vue — new group, zero new UI atoms

Vue · AllSettings.vue — the added group (existing row pattern verbatim)

<!-- New .settings-modal-group, after "Display". ONE row per prize
     TYPE, not per prize — the row is the slot, its options are the
     prizes you own in that slot. A category row hides until you own
     something in it, and the whole group hides for non-players, so
     Settings never grows for people who don't play.

     CATEGORIES mirror the Prize Counter's own groups, so what you
     bought and what you turn on read the same way. -->
<div v-if="arcade.ownedPrizes.length" class="settings-modal-group">
    <Text type="body/l-heavy" text="Effects" />
    <div class="settings-internal-group">

        <!-- the master. Off silences every category at once and
             REMEMBERS each pick, so flipping back restores them. -->
        <div class="setting-row">
            <div class="start">
                <Text type="body/m-heavy" text="All effects" />
                <Text type="body/m-reg" text="One switch for everything below." />
            </div>
            <div class="end">
                <ToggleSwitch size="sm" :model-value="settings.get('effects-enabled') ? 1 : 0"
                    @change="settings.set('effects-enabled', !!$event)" />
            </div>
        </div>

        <!-- the categories are a SUB-LIST under the master: smaller type,
             indented, bulleted. One row per category, each a Select
             over what you own in that slot. -->
        <div class="setting-subrows">
            <div v-for="cat in arcade.ownedCategories" :key="cat.slug"
                 class="setting-row setting-row--sub">
                <div class="start">
                    <Text type="body/s-heavy" :text="cat.name" />
                    <Text type="body/s-reg" :text="cat.desc" />
                </div>
                <div class="end">
                    <Select size="sm"
                        :disabled="!settings.get('effects-enabled')"
                        :model-value="settings.get(cat.slug)"
                        :options="cat.options"
                        @change="settings.set(cat.slug, $event)" />
                </div>
            </div>
        </div>
    </div>
</div>

<style scoped>
/* The master keeps the standard setting-row size. The categories
   read as its details — indented one step down like a bullet list,
   but with NO bullet marks; the inset alone says "sub". */
.setting-subrows { display: flex; flex-direction: column; gap: 11px;
    padding-top: 16px;
    border-top: 1px solid var(--c-border-primary); }
.setting-row--sub { padding-left: 17px; }
</style>

// ui/store/arcade.js — the categories, derived from what you own.
// Every category ALWAYS offers "Off"; the rest are your prizes.
const CATEGORIES = [
    { slug: 'effect-combo-hover', name: 'Combo hover',
      desc: 'What your saved combos do when you point at them.' },
    { slug: 'effect-emoji-hover', name: 'Emoji hover',
      desc: 'What a single emoji does when you point at it.' },
    { slug: 'effect-copy',        name: 'Copy effect',
      desc: 'What happens the moment you copy.' },
    { slug: 'theme-doodle',       name: 'App skin',
      desc: 'Art on your sidebar and header.' },
];

ownedCategories: (s) => CATEGORIES
    .map(c => ({
        ...c,
        options: [{ value: 'off', label: 'Off' }].concat(
            s.prizes.filter(p => p.ownedAt && p.category === c.slug)
                    .map(p => ({ value: p.option, label: p.name }))
        ),
    }))
    .filter(c => c.options.length > 1),   // own nothing here → no row

JSON · settings slugs — added to the server schema, synced via npm run sync:settings

// One slug per CATEGORY, not per prize. Adding a sixth combo hover
// later adds an option, never a slug and never a Settings row.
{ "slug": "effects-enabled", "name": "All effects",
  "type": "boolean", "default": true, "device_specific": false, "is_pro": 0 },
{ "slug": "effect-combo-hover", "name": "Combo hover",
  "type": "string", "default": "off", "device_specific": false, "is_pro": 0,
  "options": ["off", "rumble", "desk-toy", "domino", "wave", "squeeze"] },
{ "slug": "effect-emoji-hover", "name": "Emoji hover",
  "type": "string", "default": "off", "device_specific": false, "is_pro": 0,
  "options": ["off", "ticklish"] },
{ "slug": "effect-copy", "name": "Copy effect",
  "type": "string", "default": "off", "device_specific": false, "is_pro": 0,
  "options": ["off", "fireworks"] },
{ "slug": "theme-doodle", "name": "App skin",
  "type": "string", "default": "off", "device_specific": false, "is_pro": 0,
  "options": ["off", "classic", "seasonal", "gold"] }

Behavior · why this stays un-clunky

• ONE ROW PER PRIZE TYPE, not per prize. The categories are the Prize Counter's own groups, so what you bought and what you turn on read the same way: Combo hover · Emoji hover · Copy effect · App skin. Buy a sixth combo hover later and it becomes an OPTION in an existing row — Settings never grows a row per purchase, which is exactly what the old per-prize list would have done.
• Each category is a slot: one pick at a time, always with "Off". Two animations on the same target read as a bug, so the slot enforces it structurally instead of asking the user to keep switches straight.
• Categories work on shape, not vibe: combo hovers act on a row of emoji, Emoji hover acts on one emoji in the grid, Copy effect fires on the copy moment, App skin paints chrome. A new prize joins whichever target it acts on.
• "All effects" is the master: off silences every category at once and REMEMBERS each pick, so flipping it back restores your setup. Off returns the app to exactly its stock look — the one line that has to be true for anyone who finds this stuff annoying.
• The hierarchy is visual, not just logical: the master keeps the standard setting-row size, and the four categories sit under it as a smaller indented sub-list (Text drops from body/m to body/s). Bullet-style layout, NO bullet marks — the inset alone carries it. One decision on top, its details beneath — a flat list of five equal rows would hide which switch actually matters. With the master off the sub-rows disable in place rather than vanishing, so you can still see what you own.
• One source of truth: the equip control on a Prize Counter card and the Settings row write the SAME slug. Settings are server-owned and already sync — no new persistence, no new screens.
• A category row hides until you own something in it; the whole group hides for non-players. Settings never grows for people who don't play.
• Effects are cosmetic-only and client-side; every animation sits behind prefers-reduced-motion.
• Buying a prize equips it immediately (a prize you have to go turn on is a broken payoff) — it becomes its category's selected option on purchase. The controls exist for turning things OFF and for switching between ones you own.
• is_pro stays 0 on effect slugs — you buy access with tickets, not with the plan. Pro's edge is earning speed, never toggle access.
• The settings row is "App skin" (the category); Doodle Classic / Seasonal / Gold are its options. There is no "Doodle Mode" — doodle is the artwork the skins are drawn in, not a mode you switch on (naming rules, top of page).

The doodle skins — where they land

chrome only · header + sidebar

F · Doodle Classic, equipped

content — never doodled

✅ theme-doodle settings slug + equip switch · already spec'd in card E

✅ preload pattern · ui/components/pop/PopModal.vue:100 — Image() precache before the class flips

🟡 doodle-themes.css · new stylesheet, two hooks on the Main.vue chrome

CSS · doodle-themes.css — the whole theme (flat selectors)

/* The layout root carries .theme-doodle-<name> from the theme-doodle
   settings slug ('off' | 'classic' | 'seasonal' | 'gold'). Two hooks
   only: the header band and the sidebar. Content never gets doodled. */

.theme-doodle-classic { --doodle-url: url('assets/images/doodle-classic-balanced.svg'); }

/* ---- header hook -------------------------------------------- */
.theme-doodle-classic header.main-nav { position: relative; }

.theme-doodle-classic header.main-nav::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* one layer, always — doodle shapes must never overlap */
    background: var(--doodle-url) top left / 300px auto repeat;
    opacity: .15;
    border-radius: inherit;
    /* doodles thin out behind the center nav so the pills always win */
    mask-image: linear-gradient(to right, black, transparent 38%, transparent 62%, black);
    transition: opacity .3s;
}

.theme-doodle-classic header.main-nav > * {
    position: relative;
    z-index: 1;
}

/* ---- sidebar hook — RAILS + BLOOM, one layer, no overlap ----- */
/* One underlay; its mask is the UNION of two gradients (multiple
   mask layers add by default):
     RAILS — quiet doodle slivers down BOTH edges, always there no
             matter how many lists (55% of the wash, outer 8px,
             gone by 40px — never under row icons or text)
     BLOOM — full width below the last list row, fading in over
             110px from --content-end
   Lots of lists = rails only. Few lists = rails + bloom.
   The theme never disappears on heavy list users. */
.theme-doodle-classic aside.layout-sidebar { position: relative; }

.theme-doodle-classic aside.layout-sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--doodle-url) top left / 300px auto repeat;
    opacity: .15;
    transition: opacity .3s;
    mask-image:
        linear-gradient(to right, rgba(0,0,0,.55) 8px, transparent 40px,
            transparent calc(100% - 40px), rgba(0,0,0,.55) calc(100% - 8px)),
        linear-gradient(to bottom, transparent var(--content-end, 62%),
            black calc(var(--content-end, 62%) + 110px));
}

.theme-doodle-classic aside.layout-sidebar > * {
    position: relative;
    z-index: 1;
}

JS · Main.vue — class binding + preload (PopModal pattern)

const settings = useSettingsStore();
const doodleTheme = ref('off');

// preload before flipping the class so the chrome never flashes
watch(() => settings.get('theme-doodle'), (name) => {
    if (!name || name === 'off') { doodleTheme.value = 'off'; return; }
    const img = new Image();
    img.onload = () => { doodleTheme.value = name; };
    img.src = DOODLE_ASSETS[name];
}, { immediate: true });

// layout root:
// <div class="layout" :class="doodleTheme !== 'off' && `theme-doodle-${doodleTheme}`">

// Sidebar.vue — keep --content-end fresh so the bloom starts where
// the lists stop (the rails don't need it; they're always on):
const asideEl = ref(null);
const navEl = ref(null);   // wraps SearchSidebar + SubNavSidebar
onMounted(() => {
    const ro = new ResizeObserver(() => {
        asideEl.value.style.setProperty('--content-end',
            `${navEl.value.offsetTop + navEl.value.offsetHeight + 8}px`);
    });
    ro.observe(navEl.value);
    onUnmounted(() => ro.disconnect());
});

Where it lands · the overview

• Two hooks, nothing else: the HEADER BAND (opacity .15, doodles masked away behind the center nav) and the SIDEBAR (same .15 — matched lightness so the page reads as one wash). ONE layer, always — doodle shapes must never overlap.
• The sidebar is RAILS + BLOOM, content-aware: quiet doodle slivers hug both edges the full height (always on, 55% of the wash — the theme never vanishes for heavy list users, who are exactly who we want), and the full-width bloom fades in below the last list row (--content-end, kept fresh by a 3-line ResizeObserver). Everyone starts with 6+ follows and counts differ per account: 6 follows = rails + tall bloom, 12 = rails + sliver of bloom. One doodle layer — shapes never overlap. Crank the follows stepper in the in-context preview to feel it. The emoji grid and page content are never doodled; modals keep their own upsell-doodle usage; Explore keeps its featured art; the upsell strip stays flat (standing rule — sales surfaces get no doodle).
• Asset pair: assets/images/doodle-classic.svg is the design master (12KB, 634px tile, single-ink #1F2129 strokes), UNTOUCHED. The chrome tiles assets/images/doodle-classic-balanced.svg — the same file plus three of its own shapes duplicated into its quiet band (~y 180-280) so it tiles with no visible gap; the additions sit in measured-empty pockets and overlap nothing. If design rebalances the master, the balanced copy retires. NOTE: neither file is in the client build yet — its upsell-doodle.png is the old hearts/smileys art with a baked black background. Ship the SVG with this spec.
• Future packs land in these SAME two hooks, zero new layout — a pack is either a re-ink of the classic tile (Gold = metallic crown-gold gradient) or its own authored tile in the same marker language (Spooky = pumpkins/ghosts/bats). Card G has both.
• Dark scheme: #1F2129 ink disappears on metal-900 chrome — dark flips the ink to a light mix (one stroke-color swap in the SVG).
• Equip = the theme-doodle settings slug (card E). Buying equips immediately; the switch exists for turning it off. Off returns the chrome to exactly stock.
• Telemetry: arcade.doodle.equipped / unequipped (name).

G · Doodle Seasonal + Doodle Gold inks

Spooky — seasonal · 600 tickets · October rotation

Gold — Pro shelf · 2,000 tickets · crown-gold ink

✅ card F's two chrome hooks — packs add ZERO new layout

🟡 doodle-spooky.svg — authored Halloween tile · doodle-gold.svg — metallic-gradient ink + animated glint

CSS · doodle-themes.css — the pack blocks (everything else is card F)

/* Every pack = card F's hooks + one url + one wash number.
   The hooks read their opacity from var(--doodle-wash, .15) so a
   light ink can run a stronger wash. */

.theme-doodle-classic {
    --doodle-url: url('assets/images/doodle-classic-balanced.svg');
    --doodle-wash: .15;
}

.theme-doodle-spooky {
    --doodle-url: url('assets/images/doodle-spooky.svg');
    --doodle-wash: .3;    /* its own authored tile — pumpkins, ghosts,
                             bats, moons. Burnt-orange ink (#9A3412) is
                             far lighter than classic's near-black, so
                             the wash runs 2× or it disappears */
}

.theme-doodle-gold {
    --doodle-url: url('assets/images/doodle-gold.svg');
    --doodle-wash: .75;   /* metallic gradient ink runs BOLD — gold is
                             the flex pack, it should look proud */
}

/* GOLD ONLY — the twinkle. A soft warm glow blinks on a few gold
   shapes, briefly, three times per ~18s cycle, each blink at a
   different spot (the glow repositions while invisible). Masked to
   the doodle tile so only the shapes catch it; overshoot paints
   white-on-white, invisible on light chrome. Quiet and occasional —
   never a sweeping band. The two hooks run offset so they never
   twinkle in sync. */
.theme-doodle-gold header.main-nav::after,
.theme-doodle-gold aside.layout-sidebar::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(255,252,235,.9),
        rgba(255,252,235,0) 72%) no-repeat 18% 30% / 170px 170px;
    mask-image: var(--doodle-url);
    mask-size: 300px auto;
    mask-repeat: repeat;
    mask-position: top left;
    opacity: 0;
    animation: doodle-twinkle 18s linear infinite;
}

.theme-doodle-gold header.main-nav::after { border-radius: inherit; }

.theme-doodle-gold aside.layout-sidebar::after { animation-delay: -9s; }

@keyframes doodle-twinkle {
    0%    { background-position: 18% 30%; opacity: 0; }
    4%    { opacity: 0; }
    6.5%  { opacity: .55; }
    9%    { opacity: 0; }
    10%   { background-position: 74% 55%; }
    36%   { opacity: 0; }
    38.5% { opacity: .55; }
    41%   { opacity: 0; }
    42%   { background-position: 40% 78%; }
    68%   { opacity: 0; }
    70.5% { opacity: .5; }
    73%   { opacity: 0; }
    74%   { background-position: 18% 30%; }
    100%  { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .theme-doodle-gold header.main-nav::after,
    .theme-doodle-gold aside.layout-sidebar::after { animation: none; opacity: 0; }
}

Behavior · pack rules

• SPOOKY is its own AUTHORED tile (assets/images/doodle-spooky.svg, 13KB) — not a recolor. Halloween motifs in the classic marker language (round-cap strokes): jack-o-lanterns with faces, plain ribbed pumpkins, ghosts with wavy hems, bats, crescent moons, candy corn, sparkles — placed at the CLASSIC tile's own shape positions and sizes, so the scatter rhythm matches the doodle exactly (no grid feel), rect-collision checked so no two shapes ever touch. Ink #9A3412 burnt orange (pending design's October palette) at a 2× wash (.3) — orange ink is far lighter than classic's near-black and disappears at .15. Sold for 600 tickets during October only; owned forever, equippable any time of year (the Counter gates the SALE, never the equip).
• GOLD glimmers like it's proud, quietly: the balanced classic tile inked in a METALLIC GRADIENT (userSpaceOnUse ramp anchored on crown-gold #FFDB59, IconIndex.vue:110 — champagne → deep amber across the tile) at a BOLD .75 wash, plus TWINKLES: a soft warm glow blinks on a few shapes for ~half a second, three times per ~18s cycle, each at a different spot, hooks offset so header and sidebar never twinkle together. Masked to the doodle tile so only shapes catch it (overshoot = white-on-white = invisible; no mask compositing needed). Never a sweeping band. Twinkles die under prefers-reduced-motion (static metallic gold remains).
• Gold is Pro shelf: 2,000 tickets AND an active Pro plan; a free buyer's tap opens the Pro modal (same PrizeCard gate as everywhere).
• Dark scheme (implemented in the demo — flip the ◐ chip): Classic inverts its ink to a light neutral (filter: invert(1), wash .18); Spooky brightens to a jack-o-lantern glow (brightness(2.1) saturate(1.15), wash .35); Gold is the one native-dark ink — no filter, calmer .55 wash, and it looks its absolute best on dark. Twinkles are light-chrome-only (a white glint would ghost shapes onto dark where no gold sits beneath) — dark gold is the static metallic. For the real build these filters become proper dark ink values in the SVGs or CSS; the filters are the mockup shorthand.
• Equip flow identical to Classic: the theme-doodle settings slug gains 'spooky' and 'gold' options (card E schema already lists them).

Earning — how tickets happen

server-settled · caps stop farming

Action	Tickets	Daily cap	Wired to
Daily claim on Explore	+20 base, +5/streak day, max +40	1	new `account/arcade/claim`
Copy an emoji or combo	+1	first 20 count	existing copy ledger (`account/copy`)
Save a combo	+5	first 3	existing combo save
Follow a collection	+10	first 3	`collection.followed` SSE
Run a search	+1	first 5	existing `new.search` SSE
Earn an achievement	its bounty (10–2,000), paid when CLAIMED on the shelf	—	granted by server rules over the same events; paid via `account/arcade/claim-achievement`
Pro multiplier	2× on everything	—	`account.isPro`

Economy rules · the guardrails

• All earning settles server-side over events the app already emits — the client never self-awards.
• Steady free use ≈ 60–70 tickets/day ≈ a small effect every week, the Month of Pro in about four months (7,500 ÷ ~65/day ≈ 115 days). Pro halves all of it — the multiplier is a real, feelable perk.
• Tickets never expire, can never be bought, have no cash value, and are fully separate from the $5 beta feedback credit (that one is real money against a Pro purchase — never mix the two in UI or copy).
• No countdowns anywhere. Streaks tease ("Back tomorrow"), they never threaten.
• Secret bounties are the outliers on purpose — the hunt's 2,000 and Konami's 500 are one-time finds built to get talked about; they don't move the daily rate.
• Anti-farm: caps above + the copy ledger already de-dupes rapid-fire copies server-side.
• Tiers (Quiet / Milestone / Secret — the volume ladder in The earn moment) are presentation only: the tier just sets how loudly the app announces an earn.
• Earning and paying are separate: the GRANT lands server-side the instant it's earned, but the TICKETS land only when the user claims the row on the shelf. Nothing pays automatically — the claim tap is the ritual, and it happens on Explore.

Every achievement

28 at launch · 23 free · 5 Pro · 7 secret · 10 milestones

Name	How	Tickets	Tier	Gate
Hello, World	Copy your first emoji	10	Quiet	—
Century Club	Copy 100 emoji (progress bar)	50	Milestone	—
Thousandaire	Copy 1,000 emoji (progress bar)	150	Milestone	—
Chain Reaction	Build your first combo in the Action Bar	20	Quiet	—
Full Send	Build a max-size 8-emoji combo	30	Quiet	—
Keeper	Save a combo	20	Quiet	—
Fan Behavior	Follow your first collection	10	Quiet	—
Full House	Fill all six free collection slots	30	Milestone	—
Regular	Copy something 7 days in a row	50	Milestone	—
Locked In	30-day copy streak	150	Milestone	—
Window Shopper	Visit Explore 7 days in a row	40	Milestone	—
Night Shift	Switch on dark mode	10	Quiet	—
That's Me	Set your skin tone	10	Quiet	—
Detective	Run 25 searches	20	Quiet	—
Hotkeys	Use a keyboard shortcut ( [ ] · ; · − + )	20	Quiet	—
Everywhere	Install the Chrome extension	60	Milestone	hidden until launch
??? ("Superfan")	Copy the same emoji 50 times	100	Secret	Secret
??? ("Racecar")	Build a combo that reads the same forwards and backwards	100	Secret	Secret
??? ("Secret Emoji")	Find all 5 emoji hidden around the app — each find teases the next; finds keep forever (hunt spec below)	2,000	Secret	Secret
??? ("Konami")	Enter the code, anywhere: ↑ ↑ ↓ ↓ ← → ← → B A	500	Secret	Secret
??? ("Speedrun")	Copy 10 emoji in 10 seconds	50	Secret	Secret
??? ("Leap Day")	Use the app on February 29	200	Secret	Secret
??? ("Party Pooper")	Drag the poop emoji out of the Action Bar and drop it nowhere (was "Butterfingers", any emoji — reworked to poop-only)	20	Secret	Secret
List Maker	Create your first list	40	Quiet	Pro
Shelf Control	Keep three lists going	60	Milestone	Pro
Time Traveler	Turn on Recent Combos	40	Quiet	Pro
The Collector	Follow 10 collections	80	Milestone	Pro
Curator	Clone a collection and make it yours	60	Milestone	Pro

Secret Emoji · how the hunt works

• Five tiny emoji hide around the app — 🥚 on Explore, 🐣 on My Emoji, 🐤 visible in dark mode only, 🐥 in Settings, 🐔 in the Action Bar. Each is ~14px at 40% opacity, tucked where chrome meets content. The egg hatches as you find them.
• Clicking a find pops a one-line tease for the next: "1 of 5 · the next one hides where your emoji live." → "2 of 5 · the next one only comes out in the dark." → "3 of 5 · the next one is in your preferences." → "4 of 5 · the last one wants in on a combo." (· separators — em dashes are banned in customer-facing copy).
• Finds settle server-side (arcade store) and keep forever — come back months later and your 3 of 5 is still 3 of 5. Spots may rotate seasonally after launch, but a found spot never un-finds.
• In the Achievements tab it renders as ??? until the first find, then reveals as "Secret Emoji" with a 5-step progress bar and the current tease as its description.
• All five → +2,000 tickets and the gold stamp (S1). Each individual find pops the same gold-stamp skin with "Secret Emoji · N of 5" and the next tease as its line — live in the in-context preview. The hunt is the flagship bounty — big enough that the shelf row alone recruits hunters. No countdowns, no map, no hints beyond the teases.
• Try it: the first egg is hidden in the in-context preview's Explore page (in-context/explore.html).

Every prize

11 at launch · 5 combo hovers · alt names in the last column

Prize	Cost	What it does	Alt names
Ticklish	300	Hovered emoji wiggle and giggle (single emoji, on the grid)	Poke, Wiggle Room
Copy Fireworks	500	A tiny firework pops at the cursor on every copy (rides the existing CopyInlay moment)	Pop-Off, Big Send
Combo Rumble	800	Combo hover · saved combos bounce and scrap with each other	Mosh Pit, Combo Brawl
Desk Toy	600	Combo hover · a 5-emoji combo swings like a Newton's cradle. The end one knocks through, clack clack. Fewer than 5, it plain-swings	Click-Clack, The Cradle
Domino Run	400	Combo hover · tips the first emoji into the next; the row topples in sequence and springs back up	Topple, Tip Over
Stadium Wave	400	Combo hover · the emoji do the wave down the row, one hop each, left to right	Crowd Work, The Wave
Squeeze Box	400	Combo hover · the combo compresses like an accordion, then sproings back apart	Sproing, Accordion
Doodle Classic	1,000	Skin your EmojiCopy in classic doodles	Scribble Mode
Doodle Seasonal	600	A new skin every season. Spooky in October, Cottagecore in spring	—
Doodle Gold	2,000 + Pro	The gold skin. It actually glimmers (animated shine, Pro shelf only)	—
A Month of Pro	7,500	30 days of Pro. Once a quarter, non-stackable	The Golden Ticket, Pro On the House

Prize rules · combo hovers + phases

• The five combo hovers (Combo Rumble, Desk Toy, Domino Run, Stadium Wave, Squeeze Box) share one slot: equipping one un-equips the others — a radio, not toggles (two animations fighting over the same row reads as a bug). Card E groups every prize this way: Combo hover · Emoji hover · Copy effect · App skin, one pick per category plus a master all-off. Ticklish sits in Emoji hover, so it stacks with any combo hover.
• Five in one family is a collection play on purpose — the Counter can show "3 of 5" on the group and the completionists will finish it.
• Every combo hover honors prefers-reduced-motion: the row renders static.
• Why this sells Pro — the gamification thesis — moved to the top of the page.
• Phase 2 ideas (not in v1): rarity stats endpoint, weekly rotating challenges, seasonal secret achievements, a "year in emoji" recap card. Phase 1 ships pill + modal + 28 achievements + 11 prizes.