/* ==========================================================================================
   THEME: Toy Bank (the default, v3). The owner's pick from launch/brand/styles/toy-bank.
   A deep candy world (electric violet into hot pink), glossy toy-plastic parts with a lighter top,
   a gloss stripe and a solid darker base, bubble lettering with a thick grape outline, giant letters
   behind the cards, and the cards as chunky 3D plastic slabs with a rim, holo sheen, glow and a burst.
   A theme = this file: tokens first, then the look of each component, scoped to html[data-theme="toy"].
   No canvas, no render loops: one always-on animation (the hero card's foil sheen), everything else plays once.
   ========================================================================================== */

:root[data-theme="toy"] {
  color-scheme: only light;   /* one look in light and dark mode: never let the browser repaint it darker */
  --grape: #3a0f8f; --grape-2: #2a0a6b; --grape-3: #22085a;
  --text: #ffffff; --text-soft: rgba(255, 255, 255, .86);
  --card-ink: #1d2b5c;
  --up: #12c873;
  --focus: #ffffff;
  --band-mask: url(../assets/frames/band_mask.webp);
  --holo: repeating-linear-gradient(90deg, transparent 0px, rgba(255, 43, 214, .9) 34px, rgba(255, 201, 60, .9) 50px, rgba(0, 255, 140, .85) 66px, rgba(53, 208, 255, .9) 82px, rgba(138, 43, 255, .8) 98px, transparent 130px, transparent 200px);
  --plastic-gloss: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0));


  --i-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6 21.6 13.2H15.8v8.2H8.2v-8.2H2.4Z' fill='%2329e88b' stroke='%23053a20' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M17 9v16M9 17h16' stroke='%23ffffff' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5 10.2 16.5 18 8' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C11 7 13 9 20 10 13 11 11 13 10 20 9 13 7 11 0 10 7 9 9 7 10 0Z' fill='%23ffffff'/%3E%3C/svg%3E");
  --i-star-y: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C11 7 13 9 20 10 13 11 11 13 10 20 9 13 7 11 0 10 7 9 9 7 10 0Z' fill='%23fff59a'/%3E%3C/svg%3E");
  --i-star-p: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C11 7 13 9 20 10 13 11 11 13 10 20 9 13 7 11 0 10 7 9 9 7 10 0Z' fill='%23ffd1f0'/%3E%3C/svg%3E");
  --i-star-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C11 7 13 9 20 10 13 11 11 13 10 20 9 13 7 11 0 10 7 9 9 7 10 0Z' fill='%23b8fff0'/%3E%3C/svg%3E");
  --i-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 32'%3E%3Cpath d='M4 3v23.5l6.3-5.9 4.1 9 4.3-2-4.1-8.8 8.6-.5Z' fill='%23ffffff' stroke='%233a1398' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* rarity materials: the frame, the colour of the plastic slab, the glow */
:where(:root[data-theme="toy"]) .r-common    { --ra: #2ee6a6; --rm: #16c49c; --rb: #14c4c4; --rink: #0d6b58; --slab-a: #7ff5d2; --slab-b: #0a6650; --frame: url(../assets/frames/card_common.webp);    --pil: linear-gradient(90deg, #0b8f6e, #2ee6a6 38%, #9dffe0 56%, #17b48d); }
:where(:root[data-theme="toy"]) .r-rare      { --ra: #4f8dff; --rm: #2f6bff; --rb: #35d0ff; --rink: #1f3b8f; --slab-a: #8cb6ff; --slab-b: #172a86; --frame: url(../assets/frames/card_rare.webp);      --pil: linear-gradient(90deg, #1b3fc4, #3f7bff 38%, #a7c9ff 56%, #2a58e0); }
:where(:root[data-theme="toy"]) .r-epic      { --ra: #c46bff; --rm: #a03cff; --rb: #ff5ad8; --rink: #52306a; --slab-a: #d9a4ff; --slab-b: #44137f; --frame: url(../assets/frames/card_epic.webp);      --pil: linear-gradient(90deg, #6a1fc4, #b04bff 38%, #e6b8ff 56%, #8a34e0); }
:where(:root[data-theme="toy"]) .r-legendary { --ra: #ffc93c; --rm: #ffb21e; --rb: #ff8a1f; --rink: #a3552c; --slab-a: #ffd34f; --slab-b: #a34c00; --frame: url(../assets/frames/card_legendary.webp); --pil: linear-gradient(90deg, #c96a00, #ffae00 38%, #ffe27a 56%, #e08a00); }

/* ------------------------------------------------------------------ the candy world */
:where(:root[data-theme="toy"]), :where(:root[data-theme="toy"]) body { background-color: #8b7dff; }
/* the Toy Bank candy gradient (sky blue, violet, pink), and again down the page */
:where(:root[data-theme="toy"]) body {
  color: var(--text); font-weight: 600;
  background-image: linear-gradient(180deg, #33c4ff 0%, #8b7dff 11%, #ff6acb 23%, #c47ef6 42%, #8b7dff 58%, #4fbcff 72%, #8b7dff 84%, #ff6acb 100%);
}
:where(:root[data-theme="toy"]) ::selection { background: #ffe45c; color: var(--grape-3); }
:where(:root[data-theme="toy"]) .skip { background: #fff; color: var(--grape); border-radius: 999px; }

/* ------------------------------------------------------------------ toy plastic */
:where(:root[data-theme="toy"]) .toy { font-weight: 900; letter-spacing: .02em; transition: translate .14s ease, box-shadow .14s ease; }
:where(:root[data-theme="toy"]) .toy::before { background: var(--plastic-gloss); }
:where(:root[data-theme="toy"]) .toy-white { color: var(--grape); background: linear-gradient(180deg, #ffffff 0%, #f6f0ff 60%, #e9ddff 100%);
  box-shadow: 0 7px 0 #b9a3ff, 0 16px 26px rgba(36, 10, 120, .36), inset 0 -4px 0 rgba(160, 130, 230, .3); }
:where(:root[data-theme="toy"]) .toy-gold { color: #4a1d00; background: linear-gradient(180deg, #fff6b0 0%, #ffd24a 52%, #ffa51f 100%);
  box-shadow: 0 8px 0 #c46a00, 0 18px 30px rgba(110, 40, 0, .42), inset 0 -5px 0 rgba(0, 0, 0, .06), 0 0 38px rgba(255, 196, 60, .55); text-shadow: 0 2px 0 rgba(255, 255, 255, .5); }
:where(:root[data-theme="toy"]) .toy-green { color: #063a22; background: linear-gradient(180deg, #b8ffdc 0%, #45ffab 32%, #00f084 60%, #00cf70 100%);
  box-shadow: 0 8px 0 #00994f, 0 18px 30px rgba(0, 70, 35, .42), inset 0 -6px 0 rgba(0, 100, 50, .2), 0 0 44px rgba(0, 255, 140, .5); text-shadow: 0 2px 0 rgba(255, 255, 255, .45); }
:where(:root[data-theme="toy"]) .toy-pink { color: #fff; background: linear-gradient(180deg, #ffb6e8 0%, #ff4fb5 58%, #ef2f99 100%);
  box-shadow: 0 5px 0 #b81d78, 0 10px 16px rgba(120, 20, 90, .35), inset 0 -3px 0 rgba(0, 0, 0, .08);
  text-shadow: 0 2px 0 #b81d78, 1.5px 0 0 #b81d78, -1.5px 0 0 #b81d78, 0 -1.5px 0 #b81d78; }
:where(:root[data-theme="toy"]) button.toy:hover, :where(:root[data-theme="toy"]) a.toy:hover { translate: 0 -2px; }
:where(:root[data-theme="toy"]) button.toy:active, :where(:root[data-theme="toy"]) .toy.pressed { translate: 0 6px; }
:where(:root[data-theme="toy"]) .toy-gold:active, :where(:root[data-theme="toy"]) .toy-gold.pressed { box-shadow: 0 2px 0 #c46a00, 0 6px 12px rgba(110, 40, 0, .4), 0 0 30px rgba(255, 196, 60, .5); }
:where(:root[data-theme="toy"]) .toy-green:active, :where(:root[data-theme="toy"]) .toy-green.pressed { box-shadow: 0 2px 0 #00994f, 0 6px 12px rgba(0, 70, 35, .4), 0 0 60px rgba(0, 255, 140, .8); }
:where(:root[data-theme="toy"]) .toy:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }

/* ------------------------------------------------------------------ bubble lettering */
:where(:root[data-theme="toy"]) .bubble { font-weight: 900; letter-spacing: -.01em; }
:where(:root[data-theme="toy"]) .bubble .b-ol { color: var(--grape); -webkit-text-stroke: .17em var(--grape);
  text-shadow: 0 .03em 0 var(--grape-2), 0 .06em 0 var(--grape-2), 0 .09em 0 var(--grape-2), 0 .12em 0 var(--grape-2), 0 .2em .22em rgba(40, 0, 90, .4); }
:where(:root[data-theme="toy"]) .bubble .b-fl { color: #fff; }
:where(:root[data-theme="toy"]) .bubble .b-gl { color: transparent; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  :where(:root[data-theme="toy"]) .bubble .b-fl .ln {
    background: linear-gradient(180deg, #ffffff 0%, #fff3fb 40%, #ffb5e6 100%); -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  :where(:root[data-theme="toy"]) .bubble .b-gl .ln {
    background: linear-gradient(180deg, transparent 23%, rgba(255, 255, 255, .95) 25%, rgba(255, 255, 255, .5) 38%, transparent 41%); -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
}
:where(:root[data-theme="toy"]) .bubble-sm .b-ol, :where(:root[data-theme="toy"]) .bubble-md .b-ol { -webkit-text-stroke: .2em var(--grape); }
:where(:root[data-theme="toy"]) .giant .b-ol { -webkit-text-stroke: .13em var(--grape); }
/* small outlined words (step names, column names) */
:where(:root[data-theme="toy"]) .step h3, :where(:root[data-theme="toy"]) .lane-name {
  font-weight: 900; color: #fff; -webkit-text-stroke: .26em var(--grape); paint-order: stroke fill; text-shadow: 0 .14em 0 var(--grape-3), 0 .3em .4em rgba(30, 8, 100, .35); }

/* ------------------------------------------------------------------ nav */
:where(:root[data-theme="toy"]) .brand-mark { background: url(../assets/icon.svg) center / contain no-repeat; filter: drop-shadow(0 4px 0 rgba(42, 12, 120, .55)); }
:where(:root[data-theme="toy"]) .brand-name { font-size: 22px; font-weight: 900; color: #fff; text-shadow: 0 3px 0 var(--grape-2), 0 6px 16px rgba(30, 8, 100, .4); }
@media (min-width: 900px) { :where(:root[data-theme="toy"]) .brand-name { font-size: 26px; } }

/* ------------------------------------------------------------------ hero copy + form */
:where(:root[data-theme="toy"]) .lede { color: #fff; font-weight: 700; text-shadow: 0 2px 0 rgba(42, 12, 120, .5), 0 8px 24px rgba(30, 8, 100, .35); }
:where(:root[data-theme="toy"]) .field.toy { color: var(--grape); }
:where(:root[data-theme="toy"]) .field:focus-within { box-shadow: 0 7px 0 #b9a3ff, 0 16px 26px rgba(36, 10, 120, .36), 0 0 0 4px rgba(255, 255, 255, .7), 0 0 30px rgba(255, 255, 255, .5); }
:where(:root[data-theme="toy"]) .join-input { color: var(--grape); font-weight: 800; }
:where(:root[data-theme="toy"]) .join-input::placeholder { color: #a08ad8; }
:where(:root[data-theme="toy"]) .join-input[aria-invalid="true"] { color: #c0337a; }
:where(:root[data-theme="toy"]) .join-note { color: #fff; font-weight: 700; text-shadow: 0 2px 0 rgba(42, 12, 120, .5); }
:where(:root[data-theme="toy"]) .join-note.warn { color: #fff6b0; }
:where(:root[data-theme="toy"]) .join.nudge .join-row { animation: nudge .4s ease; }
@keyframes nudge { 25% { translate: -6px 0; } 50% { translate: 5px 0; } 75% { translate: -2px 0; } }
:where(:root[data-theme="toy"]) .btn[disabled] { cursor: progress; opacity: .85; }
:where(:root[data-theme="toy"]) .join-done { color: var(--grape); background: linear-gradient(180deg, #ffffff 0%, #f6f0ff 60%, #e9ddff 100%);
  box-shadow: 0 7px 0 #b9a3ff, 0 16px 26px rgba(36, 10, 120, .36); }
:where(:root[data-theme="toy"]) .join-done b { font-weight: 900; }
:where(:root[data-theme="toy"]) .join-done span span { color: #6a52b8; font-weight: 700; }
:where(:root[data-theme="toy"]) .done-check { background: var(--i-check) center / 22px no-repeat, linear-gradient(180deg, #8affc9, #00cf70); box-shadow: 0 3px 0 #00994f; }

/* ------------------------------------------------------------------ the arena */
:where(:root[data-theme="toy"]) .giant-word { font-weight: 900; }
:where(:root[data-theme="toy"]) .burst { background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .36) 0deg 6deg, rgba(255, 255, 255, 0) 6deg 15deg);
  -webkit-mask: radial-gradient(closest-side, #000 16%, rgba(0, 0, 0, .55) 46%, transparent 76%); mask: radial-gradient(closest-side, #000 16%, rgba(0, 0, 0, .55) 46%, transparent 76%);
  }
:where(:root[data-theme="toy"]) .burst::after { content: ""; position: absolute; inset: 20%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 246, 176, .9), rgba(255, 176, 232, .5) 45%, rgba(255, 176, 232, 0) 75%); }
:where(:root[data-theme="toy"]) .floor { background: radial-gradient(closest-side, rgba(30, 8, 100, .45), rgba(30, 8, 100, .18) 55%, transparent); }
:where(:root[data-theme="toy"]) .ribbon path, :where(:root[data-theme="toy"]) .mini-ribbon path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
:where(:root[data-theme="toy"]) .rb-shadow { stroke: rgba(30, 8, 100, .2); stroke-width: 46; transform: translateY(20px); }
:where(:root[data-theme="toy"]) .rb-base { stroke: #139c5c; stroke-width: 36; transform: translateY(9px); }
:where(:root[data-theme="toy"]) .rb-tube { stroke: url(#g-tube); stroke-width: 36; }
:where(:root[data-theme="toy"]) .rb-shine { stroke: #fff; stroke-width: 7; opacity: .8; transform: translateY(-9px); }
:where(:root[data-theme="toy"]) .mini-ribbon .rb-base, :where(:root[data-theme="toy"]) .mini-ribbon .rb-tube { stroke-width: 18; }
:where(:root[data-theme="toy"]) .mini-ribbon .rb-base { transform: translateY(5px); }
:where(:root[data-theme="toy"]) .mini-ribbon .rb-shine { stroke-width: 4; transform: translateY(-4px); }
:where(:root[data-theme="toy"]) .kb-base { fill: #139c5c; }
:where(:root[data-theme="toy"]) .kb-top { fill: url(#g-knob); }
:where(:root[data-theme="toy"]) .kb-shine { fill: #fff; opacity: .9; }
:where(:root[data-theme="toy"]) .ribbon path:not(.rb-shadow) { stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--reveal, 60)); transition: stroke-dashoffset .8s cubic-bezier(.3, .9, .3, 1); }
:where(:root[data-theme="toy"]) .ribbon .rb-shadow { stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--reveal, 60)); transition: stroke-dashoffset .8s cubic-bezier(.3, .9, .3, 1); }
:where(:root[data-theme="toy"]) .rb-knob { transition: transform .8s cubic-bezier(.3, .9, .3, 1); }
:where(:root[data-theme="toy"]) .ribbon.no-glide path { transition: none; }
:where(:root[data-theme="toy"]) .pick { color: var(--grape); font-weight: 900; background: linear-gradient(180deg, #ffffff 0%, #f6f0ff 60%, #e9ddff 100%);
  box-shadow: 0 5px 0 #b9a3ff, 0 10px 18px rgba(36, 10, 120, .3); transition: translate .14s ease, box-shadow .14s ease; }
:where(:root[data-theme="toy"]) .pick img { box-shadow: 0 0 0 3px var(--ra), 0 0 0 5px #fff; }
:where(:root[data-theme="toy"]) .pick:hover { translate: 0 -2px; }
:where(:root[data-theme="toy"]) .pick[aria-checked="true"] { color: #fff; background: linear-gradient(180deg, #ffb6e8 0%, #ff4fb5 58%, #ef2f99 100%); box-shadow: 0 5px 0 #b81d78, 0 10px 18px rgba(120, 20, 90, .35); text-shadow: 0 2px 0 #b81d78; }
:where(:root[data-theme="toy"]) .invest-hint { color: var(--grape); font-weight: 800; background: linear-gradient(180deg, #ffffff, #efe6ff); box-shadow: 0 5px 0 #b9a3ff, 0 12px 22px rgba(36, 10, 120, .35); }

/* ------------------------------------------------------------------ the card: a chunky glossy plastic slab */
:where(:root[data-theme="toy"]) .card-art { background: #f4ecd6; }
:where(:root[data-theme="toy"]) .card-rimx { background: var(--rb); background: linear-gradient(155deg, #fff6c0 0%, var(--ra) 22%, var(--rm) 55%, var(--rb) 100%);
  box-shadow: 0 0 0 1.1cqw rgba(255, 255, 255, .95), 0 0 7cqw 1.8cqw rgba(255, 255, 255, .5),
    inset 0 2cqw 0 rgba(255, 255, 255, .85), inset 0 -2.4cqw 0 rgba(120, 40, 0, .35), inset 1.6cqw 0 0 rgba(255, 255, 255, .35), inset -1.6cqw 0 0 rgba(120, 40, 0, .2); }
:where(:root[data-theme="toy"]) .card-rimx::before { background: rgba(255, 255, 255, .9); }
:where(:root[data-theme="toy"]) .card-rimx::after { mix-blend-mode: color-dodge; background-size: 260% 100%; background-position: 30% 0;
  background-image: linear-gradient(118deg, transparent 8%, rgba(255, 70, 200, .75) 18%, rgba(255, 230, 80, .75) 27%, rgba(70, 255, 200, .7) 36%, rgba(80, 150, 255, .75) 45%, rgba(190, 80, 255, .7) 54%, transparent 64%); }
:where(:root[data-theme="toy"]) .card-shadow { box-shadow: 3.6cqw 7.5cqw 10cqw rgba(40, 8, 100, .5); }
:where(:root[data-theme="toy"]) .hug i { background: var(--i-star) center / contain no-repeat; }
:where(:root[data-theme="toy"]) .hug i.y { background-image: var(--i-star-y); } :where(:root[data-theme="toy"]) .hug i.p { background-image: var(--i-star-p); } :where(:root[data-theme="toy"]) .hug i.m { background-image: var(--i-star-m); }
:where(:root[data-theme="toy"]) .card-frame { background: var(--frame) center / 100% 100% no-repeat; border-radius: 7.5% / 5.36%; }
:where(:root[data-theme="toy"]) .hero-card.r-common { --frame: url(../assets/frames/card_common@2x.webp); } :where(:root[data-theme="toy"]) .hero-card.r-rare { --frame: url(../assets/frames/card_rare@2x.webp); }
:where(:root[data-theme="toy"]) .hero-card.r-epic { --frame: url(../assets/frames/card_epic@2x.webp); } :where(:root[data-theme="toy"]) .hero-card.r-legendary { --frame: url(../assets/frames/card_legendary@2x.webp); }
:where(:root[data-theme="toy"]) .slab { background: var(--slab-b); background: color-mix(in srgb, var(--slab-b) calc(var(--i) * 7%), var(--slab-a)); }
/* cards without a 3D slab get a stacked edge under the rim so they still read as thick plastic */
:where(:root[data-theme="toy"]) .card:not([data-slab]) .card-rimx { overflow: visible;
  box-shadow: 0 0 0 1.1cqw rgba(255, 255, 255, .95), 0 2.4cqw 0 1.1cqw var(--slab-a), 0 3.8cqw 0 1.1cqw var(--slab-b), 0 0 7cqw 1.8cqw rgba(255, 255, 255, .45),
    inset 0 2cqw 0 rgba(255, 255, 255, .85), inset 0 -2.4cqw 0 rgba(120, 40, 0, .35), inset 1.6cqw 0 0 rgba(255, 255, 255, .35), inset -1.6cqw 0 0 rgba(120, 40, 0, .2); }
:where(:root[data-theme="toy"]) .card-rim { border-radius: 7.5% / 5.36%;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .75), inset 3px 0 0 rgba(255, 255, 255, .38), inset 0 -4px 0 rgba(90, 30, 0, .3), inset -3px 0 0 rgba(90, 30, 0, .2); }
:where(:root[data-theme="toy"]) .card-rim::before { content: ""; position: absolute; left: 11%; right: 11%; top: .9%; height: 2.2%; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .1)); }
:where(:root[data-theme="toy"]) .card-holo { overflow: hidden; -webkit-mask: var(--band-mask) center / 100% 100% no-repeat; mask: var(--band-mask) center / 100% 100% no-repeat; mix-blend-mode: color-dodge; opacity: .8; }
:where(:root[data-theme="toy"]) .card-holo::before { content: ""; position: absolute; inset: -70%; background: var(--holo); transform: rotate(25deg) translateX(-60px); }
:where(:root[data-theme="toy"]) .hero-card .card-holo::before { animation: holo 12s linear infinite; will-change: transform; }
@keyframes holo { from { transform: rotate(25deg) translateX(0); } to { transform: rotate(25deg) translateX(-200px); } }
:where(:root[data-theme="toy"]) .card-glare { border-radius: 7.5% / 5.36%; }
:where(:root[data-theme="toy"]) .card-glare::before { background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, 0)); rotate: 14deg; }
:where(:root[data-theme="toy"]) .card-name { color: var(--card-ink); font-weight: 800; }
:where(:root[data-theme="toy"]) .card-rar { color: var(--rink); font-weight: 700; }
:where(:root[data-theme="toy"]) .card-glow { background: radial-gradient(closest-side, rgba(255, 246, 176, .9), rgba(255, 176, 232, .55) 66%, transparent); }

/* chips: toy plastic */
:where(:root[data-theme="toy"]) .chip { font-weight: 900; border-radius: 999px; }
:where(:root[data-theme="toy"]) .chip-ticker { color: #fff; background: linear-gradient(180deg, #ffb6e8 0%, #ff4fb5 58%, #ef2f99 100%);
  box-shadow: 0 .22em 0 #b81d78, 0 .5em .8em rgba(120, 20, 90, .35); text-shadow: 0 .1em 0 #b81d78, .07em 0 0 #b81d78, -.07em 0 0 #b81d78, 0 -.07em 0 #b81d78; }
:where(:root[data-theme="toy"]) .chip-chart { background: linear-gradient(180deg, #ffffff 0%, #f3ecff 100%); box-shadow: 0 .22em 0 #b9a3ff, 0 .5em .8em rgba(36, 10, 120, .3); }
:where(:root[data-theme="toy"]) .chip-joined { color: #063a22; background: linear-gradient(180deg, #b8ffdc 0%, #45ffab 40%, #00e07a 100%); box-shadow: 0 .22em 0 #00994f, 0 .5em .8em rgba(0, 70, 35, .35); }
:where(:root[data-theme="toy"]) .arrow-up { background: var(--i-up) center / contain no-repeat; }
:where(:root[data-theme="toy"]) .stop-up { stop-color: #29e88b; }
:where(:root[data-theme="toy"]) .c-line { fill: none; stroke: #12c873; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw 2s cubic-bezier(.3, .7, .2, 1) var(--cd, .4s) forwards; }
:where(:root[data-theme="toy"]) .c-area { fill: url(#g-up-fill); opacity: 0; animation: fadein 1.2s ease calc(var(--cd, .4s) + .6s) forwards; }
:where(:root[data-theme="toy"]) .c-tip { fill: #12c873; opacity: 0; animation: fadein .3s ease calc(var(--cd, .4s) + 1.6s) forwards; }
:where(:root[data-theme="toy"]) .card.bump .chip-chart { animation: bump .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes bump { 40% { scale: 1.18; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadein { to { opacity: 1; } }

/* ------------------------------------------------------------------ ticker tape: a white plastic strip */
:where(:root[data-theme="toy"]) .tape { background: linear-gradient(180deg, #ffffff 0%, #f6f0ff 60%, #ebe0ff 100%); box-shadow: 0 7px 0 #b9a3ff, 0 18px 30px rgba(36, 10, 120, .32); }
:where(:root[data-theme="toy"]) .tape-viewport { -webkit-mask: linear-gradient(90deg, transparent, #000 50px, #000 calc(100% - 50px), transparent); mask: linear-gradient(90deg, transparent, #000 50px, #000 calc(100% - 50px), transparent); }
:where(:root[data-theme="toy"]) .tick { color: var(--grape); font-weight: 900; }
:where(:root[data-theme="toy"]) .tick::after { content: ""; width: 8px; height: 8px; margin-left: 15px; border-radius: 50%; background: linear-gradient(180deg, #ffb6e8, #ff4fb5); box-shadow: 0 2px 0 #b81d78; }

/* ------------------------------------------------------------------ how it works: toy tablets */
:where(:root[data-theme="toy"]) .tablet { border-radius: 40px; background: linear-gradient(180deg, #ffffff, #f1e9ff);
  box-shadow: 0 12px 0 #b39dff, 0 24px 36px rgba(36, 10, 120, .38), inset 0 -5px 0 rgba(150, 120, 230, .35); }
:where(:root[data-theme="toy"]) .tablet::before { background: radial-gradient(80% 60% at 70% 10%, rgba(255, 255, 255, .8), transparent 70%), linear-gradient(180deg, #eafcff, #bfe9ff);
  box-shadow: inset 0 5px 12px rgba(40, 80, 160, .28), inset 0 0 0 3px rgba(120, 170, 255, .25); }
:where(:root[data-theme="toy"]) .tap-ring { border: 3px solid #fff; box-shadow: 0 0 0 2px var(--grape), 0 0 18px rgba(255, 255, 255, .9); }
:where(:root[data-theme="toy"]) .cursor { background: var(--i-cursor) center / contain no-repeat; }
:where(:root[data-theme="toy"]) .up-pop { background: var(--i-up) center / contain no-repeat; }
:where(:root[data-theme="toy"]) .v-find .cursor { animation: f-cursor 2.6s ease-in-out .2s both; }
:where(:root[data-theme="toy"]) .v-find .f-c { animation: f-lift 2.6s ease-in-out .2s both; }
:where(:root[data-theme="toy"]) .v-find .tap-ring { animation: f-ring 2.6s ease-in-out .2s both; border-radius: 16px; }
:where(:root[data-theme="toy"]) .v-invest .cursor { animation: s-cursor 2.6s ease-in-out .35s both; }
:where(:root[data-theme="toy"]) .v-invest .invest-mini { animation: s-press 2.6s ease .35s both; }
:where(:root[data-theme="toy"]) .v-invest .tap-ring { animation: s-ring 2.6s ease-out .35s both; }
:where(:root[data-theme="toy"]) .v-invest .i-card .card-face { animation: s-lift 2.6s ease-in-out .35s both; }
:where(:root[data-theme="toy"]) .v-invest .up-pop { animation: up-pop 2.6s ease-out .35s both; }
:where(:root[data-theme="toy"]) .mini-ribbon path { stroke-dasharray: 100; animation: m-draw 2.2s cubic-bezier(.3, .7, .2, 1) .5s both; }
:where(:root[data-theme="toy"]) .mini-ribbon .kb-in { animation: m-knob 2.2s ease .5s both; }
/* each ends on its result; the calm modes jump straight there */
@keyframes f-cursor { 0% { opacity: 0; translate: 80px 60px; } 20% { opacity: 1; } 55% { translate: 0 0; scale: 1; } 63% { scale: .84; } 72%, 100% { scale: 1; opacity: 1; translate: 0 0; } }
@keyframes f-lift { 0%, 62% { translate: -50% -50%; scale: 1; } 82%, 100% { translate: -50% -55%; scale: 1.06; } }
@keyframes f-ring { 0%, 64% { opacity: 0; scale: .98; translate: 0 0; } 84%, 100% { opacity: 1; scale: 1.06; translate: 0 -9px; } }
@keyframes s-cursor { 0% { opacity: 0; translate: 90px 70px; } 20% { opacity: 1; } 50% { translate: 0 0; scale: 1; } 57% { scale: .84; } 66%, 100% { scale: 1; opacity: 1; translate: 0 0; } }
@keyframes s-press { 0%, 50% { translate: 0 0; } 57% { translate: 0 6px; } 66%, 100% { translate: 0 0; } }
@keyframes s-ring { 0%, 55% { opacity: 0; scale: .4; } 60% { opacity: 1; scale: .6; } 85%, 100% { opacity: 0; scale: 1.7; } }
@keyframes s-lift { 0%, 58% { translate: 0 0; } 80%, 100% { translate: 0 -8px; } }
@keyframes up-pop { 0%, 58% { opacity: 0; translate: 0 20px; } 72% { opacity: 1; } 100% { opacity: 1; translate: 0 -20px; } }
@keyframes m-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes m-knob { 0%, 70% { opacity: 0; scale: .4; } 100% { opacity: 1; scale: 1; } }

/* ------------------------------------------------------------------ the board: rarity plastic columns */
:where(:root[data-theme="toy"]) .pillar { background: var(--pil); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .14), 0 10px 0 var(--slab-b), 0 22px 34px rgba(30, 8, 100, .4); }
:where(:root[data-theme="toy"]) .pillar::before { content: ""; position: absolute; left: 14%; top: 8px; width: 16%; bottom: 14px; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .05)); }
@media (max-width: 899px) { :where(:root[data-theme="toy"]) .pillar { background: linear-gradient(180deg, var(--slab-a), var(--ra) 55%, var(--slab-b)); }
  :where(:root[data-theme="toy"]) .pillar::before { left: 10px; right: 10px; top: 6px; width: auto; height: 34%; bottom: auto; } }
:where(:root[data-theme="toy"]) .board .c-line { animation-play-state: paused; }
:where(:root[data-theme="toy"]) .board.in .c-line { animation-play-state: running; }
:where(:root[data-theme="toy"]) .board .c-area, :where(:root[data-theme="toy"]) .board .c-tip { animation-play-state: paused; }
:where(:root[data-theme="toy"]) .board.in .c-area, :where(:root[data-theme="toy"]) .board.in .c-tip { animation-play-state: running; }

/* ------------------------------------------------------------------ faq: white plastic */
:where(:root[data-theme="toy"]) .qa { color: var(--grape); background: linear-gradient(180deg, #ffffff 0%, #f6f0ff 70%, #eee4ff 100%);
  box-shadow: 0 7px 0 #b9a3ff, 0 16px 26px rgba(36, 10, 120, .32), inset 0 -4px 0 rgba(160, 130, 230, .25); }
:where(:root[data-theme="toy"]) .qa summary { font-weight: 900; }
:where(:root[data-theme="toy"]) .qa summary::after { background: var(--i-plus) center / 22px no-repeat, linear-gradient(180deg, #ffb6e8 0%, #ff4fb5 58%, #ef2f99 100%); box-shadow: 0 3px 0 #b81d78; }
:where(:root[data-theme="toy"]) .qa-a { color: #5b45ad; font-weight: 700; }

/* ------------------------------------------------------------------ closer */
:where(:root[data-theme="toy"]) .flip-back { border-radius: 7.5% / 5.36%; background: url(../assets/icon.svg) center / 34% no-repeat, url(../assets/frames/back_common.webp) center / 100% 100% no-repeat;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .95), 0 8px 0 4px #2a9e80, 0 13px 0 4px #0a6650, 0 0 34px 8px rgba(255, 255, 255, .45), 0 34px 44px -8px rgba(30, 8, 100, .55);
  }
:where(:root[data-theme="toy"]) .flip-shine { border-radius: 7.5% / 5.36%; mix-blend-mode: color-dodge; opacity: .45; }
:where(:root[data-theme="toy"]) .flip-shine::before { content: ""; position: absolute; inset: -70%; background: var(--holo); transform: rotate(25deg) translateX(-40px); }
:where(:root[data-theme="toy"]) .flip .burst { --ra: #2ee6a6; }

/* footer */
:where(:root[data-theme="toy"]) .foot { color: var(--text-soft); }
:where(:root[data-theme="toy"]) .foot .brand-name { font-size: 18px; }

/* sparkles that pop once on Invest and on joining */
:where(:root[data-theme="toy"]) .pop i { background: var(--i-star) center / contain no-repeat; }
:where(:root[data-theme="toy"]) .pop i:nth-child(3n) { background-image: var(--i-star-y); } :where(:root[data-theme="toy"]) .pop i:nth-child(3n+1) { background-image: var(--i-star-p); }