/* ---- next.css: the Sticker Book, the Photo Booth, livelier goops and the goop page wipe */

/* ======================= Sticker Book */
.stk-book{ --stk:96px; }
.stk-cover{ display:grid; grid-template-columns:minmax(0, 1fr); gap:16px; background:
  radial-gradient(120% 140% at 0% 0%, rgba(157,255,46,.12), transparent 55%), radial-gradient(100% 120% at 100% 100%, rgba(164,107,255,.16), transparent 60%), var(--panel); }
.stk-cover-tx{ display:grid; gap:6px; }
.stk-big{ font:700 clamp(34px, 6vw, 48px)/1 var(--f-head); color:#fff; }
.stk-big span{ font-size:.5em; color:var(--mute); font-weight:600; }
.stk-meter{ display:block; height:10px; border-radius:99px; background:rgba(214,190,255,.12); overflow:hidden; max-width:520px; }
.stk-meter i{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--lime), #e2ff9a); box-shadow:0 0 12px rgba(157,255,46,.5); }
.stk-tabs{ display:flex; flex-wrap:wrap; gap:8px; }
.stk-tabs a{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; border-radius:99px; border:1.5px solid color-mix(in srgb, var(--a) 55%, transparent);
  color:#fff; text-decoration:none; font:600 15px/1 var(--f-head); background:color-mix(in srgb, var(--a) 12%, transparent); }
.stk-tabs a span{ font:600 12px/1 var(--f-body); color:var(--mute); }
.stk-tabs a:hover{ background:color-mix(in srgb, var(--a) 24%, transparent); }
.stk-tabs a:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
.stk-page{ position:relative; overflow:hidden; scroll-margin-top:80px; background:
  radial-gradient(circle at 1px 1px, rgba(214,190,255,.09) 1px, transparent 1.5px) 0 0 / 18px 18px, linear-gradient(180deg, color-mix(in srgb, var(--a) 9%, var(--panel)), var(--panel) 260px); }
.stk-page::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:linear-gradient(180deg, var(--a), var(--b)); }
.stk-page.off .stk{ opacity:.55; }
.stk-ph{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin-bottom:14px; }
.stk-ph h2{ font:700 clamp(22px, 3vw, 28px)/1.1 var(--f-head); color:#fff; }
.stk-ph h2:focus{ outline:none; }
.stk-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(124px, 1fr)); gap:18px 12px; }

.stk{ position:relative; display:flex; flex-direction:column; align-items:center; gap:7px; padding:10px 6px 8px; border:0; border-radius:18px; background:none; color:var(--ink); cursor:pointer; font:inherit; text-align:center; }
.stk:hover{ background:rgba(214,190,255,.06); }
.stk:focus-visible{ outline:3px solid var(--lime); outline-offset:2px; }
.stk-die{ position:relative; box-sizing:border-box; width:var(--stk); height:var(--stk); display:grid; place-items:center; border-radius:50%; transform:rotate(var(--r, 0deg)); transition:transform .25s cubic-bezier(.3,1.5,.5,1); }
.stk:hover .stk-die{ transform:rotate(0deg) scale(1.06); }
.stk-face{ position:relative; width:100%; height:100%; display:grid; place-items:center; border-radius:50%; overflow:hidden; }
.stk-face svg{ width:44%; height:44%; position:relative; z-index:1; }
.stk-q{ font:700 44px/1 var(--f-head); color:var(--dim); }
/* locked: a dashed outline with a ring that fills as you get closer */
.stk:not(.got) .stk-die{ padding:6px; }
.stk.stk-p:not(.got) .stk-die::before{ content:""; position:absolute; inset:0; border-radius:50%; background:conic-gradient(var(--a) var(--p, 0%), rgba(214,190,255,.13) 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px)); mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px)); }
.stk:not(.got) .stk-face{ background:var(--panel2); color:color-mix(in srgb, var(--a) 45%, #6d6284); box-shadow:inset 0 0 0 2px var(--panel2), inset 0 0 0 4px rgba(214,190,255,.12); }
.stk:not(.got):not(.stk-p) .stk-die{ background:none; border:2.5px dashed rgba(214,190,255,.28); padding:3px; }
/* earned: a white die-cut edge, a glossy face, a soft drop shadow */
.stk.got .stk-die{ background:#fff; padding:5px; box-shadow:0 6px 14px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.4) inset; }
.stk.got .stk-face{ background:radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--a) 70%, #fff), var(--a) 45%, var(--b)); color:#fff; }
.stk.got .stk-face svg{ filter:drop-shadow(0 2px 0 rgba(0,0,0,.25)); stroke-width:2.4; }
.stk.got .stk-face::after{ content:""; position:absolute; inset:0; border-radius:50%; background:linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,0) 62%, rgba(255,255,255,.18) 100%); pointer-events:none; }
/* holographic finish on the hard ones */
.stk.got .stk-die.foil{ background:conic-gradient(from 0deg, #fff, #ffe6fb, #e1f7ff, #fdffe0, #fff); }
.stk-holo{ position:absolute; inset:5px; border-radius:50%; z-index:2; pointer-events:none; mix-blend-mode:color-dodge; opacity:.55;
  background:linear-gradient(115deg, transparent 20%, rgba(255,0,200,.5) 35%, rgba(0,255,230,.5) 50%, rgba(255,240,0,.5) 65%, transparent 80%) 0 0 / 250% 250%; animation:stk-holo 4s ease-in-out infinite alternate; }
@keyframes stk-holo{ from{ background-position:100% 0; } to{ background-position:0 100%; } }
.stk-nm{ font:600 14px/1.2 var(--f-head); color:#fff; max-width:14ch; }
.stk:not(.got) .stk-nm{ color:var(--mute); }
.stk-bar{ display:block; width:76%; height:5px; border-radius:9px; background:rgba(214,190,255,.12); overflow:hidden; }
.stk-bar i{ display:block; height:100%; background:var(--a); border-radius:inherit; }
.stk-n{ font:600 12px/1 var(--f-body); color:var(--mute); font-variant-numeric:tabular-nums; }
.stk-newtag{ position:absolute; top:4px; right:8px; padding:4px 8px; border-radius:99px; background:var(--lime); color:var(--limeink); font:700 11px/1 var(--f-head); letter-spacing:.04em; text-transform:uppercase; box-shadow:0 3px 10px rgba(157,255,46,.45); }
/* a new sticker peels on the first time you see it */
.stk.new.peel .stk-die{ animation:stk-peel .7s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes stk-peel{ 0%{ transform:rotate(calc(var(--r) - 40deg)) scale(1.5); opacity:0; filter:drop-shadow(0 24px 18px rgba(0,0,0,.6)); } 60%{ opacity:1; } 100%{ transform:rotate(var(--r)) scale(1); } }
.stk-detail{ display:grid; justify-items:center; gap:10px; text-align:center; }
.stk-detail .stk{ cursor:default; --stk:150px; padding:6px; }
.stk-detail .stk:hover{ background:none; }
.stk-detail .stk-face svg{ width:46%; height:46%; }
.stk-detail h2{ font:700 26px/1.15 var(--f-head); }
.stk-detail p{ max-width:36ch; margin:0; }
.stk-mprog{ display:grid; gap:6px; width:min(280px, 100%); justify-items:center; }
.stk-mprog .stk-meter{ width:100%; }
.stk-mini{ display:inline-grid; place-items:center; width:30px; height:30px; flex:0 0 auto; border-radius:50%; vertical-align:middle; border:2.5px solid #fff;
  background:radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--a) 70%, #fff), var(--a) 50%, var(--b)); color:#fff; box-shadow:0 3px 8px rgba(0,0,0,.35); }
.stk-mini svg{ width:16px; height:16px; }
.toast.stk-toast .ic-sm{ background:none; }
.toast.stk-toast .ic-sm .stk-mini{ width:32px; height:32px; }
.toast.stk-toast .ic-sm .stk-mini svg{ width:15px !important; height:15px !important; }
@media (max-width:560px){ .stk-book{ --stk:78px; } .stk-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px 4px; } .stk-nm{ font-size:13px; } }
@media (max-width:360px){ .stk-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
html.calm .stk-holo, html.calm .stk.new.peel .stk-die{ animation:none; }
html.calm .stk-die, html.calm .stk:hover .stk-die{ transition:none; }
@media (prefers-reduced-motion:reduce){ .stk-holo, .stk.new.peel .stk-die{ animation:none; } }

/* ======================= Photo Booth */
.pb{ display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); gap:22px; align-items:start; }
.pb-stage{ position:sticky; top:84px; display:grid; gap:10px; }
.pb-stage canvas{ display:block; width:100%; height:auto; aspect-ratio:1; border-radius:18px; box-shadow:0 18px 50px rgba(0,0,0,.55), 0 0 0 1px var(--line2); touch-action:none; cursor:grab; background:var(--panel2); }
.pb-stage canvas.dragging{ cursor:grabbing; }
.pb-tip{ text-align:center; margin:0; }
.pb-save{ justify-content:center; }
.pb-opts{ border:0; margin:0; padding:0; min-width:0; }
.pb-opts legend{ font:600 15px/1.2 var(--f-head); color:#fff; margin-bottom:8px; padding:0; display:flex; gap:10px; align-items:baseline; }
.pb-row{ display:flex; flex-wrap:wrap; gap:8px; }
.pb-chip, .pb-goop, .pb-deco{ display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px; border-radius:99px; border:1.5px solid var(--line2); background:var(--panel2); color:var(--ink); font:600 14px/1 var(--f-head); cursor:pointer; }
.pb-chip:hover, .pb-goop:hover, .pb-deco:hover{ border-color:rgba(214,190,255,.5); }
.pb-chip.on, .pb-goop.on{ border-color:var(--lime); background:rgba(157,255,46,.14); color:#fff; }
.pb-chip.ghost{ background:none; }
.pb-chip:focus-visible, .pb-goop:focus-visible, .pb-deco:focus-visible, .pb-scene:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
.pb-goop{ padding:0 14px 0 4px; } .pb-goop img{ width:36px; height:36px; object-fit:contain; }
.pb-deco{ width:48px; height:48px; padding:0; justify-content:center; }
.pb-deco svg{ width:24px; height:24px; } .pb-deco b{ font:700 12px/1 var(--f-head); }
.pb-scenes{ display:grid; grid-template-columns:repeat(auto-fill, minmax(64px, 1fr)); gap:8px; }
.pb-scene{ aspect-ratio:1; min-height:44px; border-radius:14px; border:2px solid transparent; background-size:cover; background-position:center; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.pb-scene.on{ border-color:var(--lime); box-shadow:0 0 0 3px rgba(157,255,46,.35); }
@media (max-width:860px){ .pb{ grid-template-columns:minmax(0, 1fr); } .pb-stage{ position:static; } }

/* ======================= the goop wipe between pages (js/wipe.js; browsers with View Transitions, animations on) */
html.gwipe::view-transition-group(root){ animation-duration:.5s; }
html.gwipe::view-transition-old(root){ animation:gw-old .5s cubic-bezier(.5,0,.3,1) both; }
html.gwipe::view-transition-new(root){ animation:gw-new .5s cubic-bezier(.55,0,.25,1) both; mix-blend-mode:normal;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 222' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H100 V100 L99.85 100 Q98.25 100 98.25 102.50 L98.25 115.50 C98.25 116.60 97.69 117.50 97.00 117.50 C96.31 117.50 95.75 116.60 95.75 115.50 L95.75 102.50 Q95.75 100 94.15 100 L91.83 100 Q90.23 100 90.23 102.50 L90.23 105.50 C90.23 106.60 89.67 107.50 88.98 107.50 C88.29 107.50 87.73 106.60 87.73 105.50 L87.73 102.50 Q87.73 100 86.13 100 L84.20 100 Q82.60 100 82.60 101.50 L82.60 101.50 C82.60 102.74 81.97 103.75 81.20 103.75 C80.42 103.75 79.79 102.74 79.79 101.50 L79.79 101.50 Q79.79 100 78.19 100 L77.87 100 Q76.27 100 76.27 102.50 L76.27 105.25 C76.27 106.49 75.64 107.50 74.86 107.50 C74.09 107.50 73.46 106.49 73.46 105.25 L73.46 102.50 Q73.46 100 71.86 100 L69.07 100 Q67.47 100 67.47 100.75 L67.47 100.75 C67.47 101.58 67.05 102.25 66.53 102.25 C66.01 102.25 65.59 101.58 65.59 100.75 L65.59 100.75 Q65.59 100 63.99 100 L61.56 100 Q59.96 100 59.96 100.75 L59.96 100.75 C59.96 101.58 59.54 102.25 59.02 102.25 C58.51 102.25 58.08 101.58 58.08 100.75 L58.08 100.75 Q58.08 100 56.48 100 L54.42 100 Q52.82 100 52.82 102.50 L52.82 111.00 C52.82 112.51 52.04 113.75 51.10 113.75 C50.15 113.75 49.38 112.51 49.38 111.00 L49.38 102.50 Q49.38 100 47.78 100 L48.26 100 Q46.66 100 46.66 102.50 L46.66 105.50 C46.66 106.60 46.10 107.50 45.41 107.50 C44.72 107.50 44.16 106.60 44.16 105.50 L44.16 102.50 Q44.16 100 42.56 100 L39.97 100 Q38.37 100 38.37 102.50 L38.37 111.50 C38.37 112.74 37.74 113.75 36.97 113.75 C36.19 113.75 35.56 112.74 35.56 111.50 L35.56 102.50 Q35.56 100 33.96 100 L33.14 100 Q31.54 100 31.54 102.50 L31.54 116.25 C31.54 116.94 31.19 117.50 30.76 117.50 C30.33 117.50 29.98 116.94 29.98 116.25 L29.98 102.50 Q29.98 100 28.38 100 L25.26 100 Q23.66 100 23.66 101.00 L23.66 101.00 C23.66 101.69 23.31 102.25 22.88 102.25 C22.45 102.25 22.10 101.69 22.10 101.00 L22.10 101.00 Q22.10 100 20.50 100 L19.06 100 Q17.46 100 17.46 102.50 L17.46 108.50 C17.46 109.33 17.04 110.00 16.52 110.00 C16.01 110.00 15.59 109.33 15.59 108.50 L15.59 102.50 Q15.59 100 13.99 100 L13.74 100 Q12.14 100 12.14 102.50 L12.14 103.50 C12.14 104.60 11.58 105.50 10.89 105.50 C10.20 105.50 9.64 104.60 9.64 103.50 L9.64 102.50 Q9.64 100 8.04 100 L5.94 100 Q4.34 100 4.34 102.50 L4.34 108.50 C4.34 109.33 3.92 110.00 3.41 110.00 C2.89 110.00 2.47 109.33 2.47 108.50 L2.47 102.50 Q2.47 100 0.87 100 L0 100 Z' fill='white'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 222' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H100 V100 L99.85 100 Q98.25 100 98.25 102.50 L98.25 115.50 C98.25 116.60 97.69 117.50 97.00 117.50 C96.31 117.50 95.75 116.60 95.75 115.50 L95.75 102.50 Q95.75 100 94.15 100 L91.83 100 Q90.23 100 90.23 102.50 L90.23 105.50 C90.23 106.60 89.67 107.50 88.98 107.50 C88.29 107.50 87.73 106.60 87.73 105.50 L87.73 102.50 Q87.73 100 86.13 100 L84.20 100 Q82.60 100 82.60 101.50 L82.60 101.50 C82.60 102.74 81.97 103.75 81.20 103.75 C80.42 103.75 79.79 102.74 79.79 101.50 L79.79 101.50 Q79.79 100 78.19 100 L77.87 100 Q76.27 100 76.27 102.50 L76.27 105.25 C76.27 106.49 75.64 107.50 74.86 107.50 C74.09 107.50 73.46 106.49 73.46 105.25 L73.46 102.50 Q73.46 100 71.86 100 L69.07 100 Q67.47 100 67.47 100.75 L67.47 100.75 C67.47 101.58 67.05 102.25 66.53 102.25 C66.01 102.25 65.59 101.58 65.59 100.75 L65.59 100.75 Q65.59 100 63.99 100 L61.56 100 Q59.96 100 59.96 100.75 L59.96 100.75 C59.96 101.58 59.54 102.25 59.02 102.25 C58.51 102.25 58.08 101.58 58.08 100.75 L58.08 100.75 Q58.08 100 56.48 100 L54.42 100 Q52.82 100 52.82 102.50 L52.82 111.00 C52.82 112.51 52.04 113.75 51.10 113.75 C50.15 113.75 49.38 112.51 49.38 111.00 L49.38 102.50 Q49.38 100 47.78 100 L48.26 100 Q46.66 100 46.66 102.50 L46.66 105.50 C46.66 106.60 46.10 107.50 45.41 107.50 C44.72 107.50 44.16 106.60 44.16 105.50 L44.16 102.50 Q44.16 100 42.56 100 L39.97 100 Q38.37 100 38.37 102.50 L38.37 111.50 C38.37 112.74 37.74 113.75 36.97 113.75 C36.19 113.75 35.56 112.74 35.56 111.50 L35.56 102.50 Q35.56 100 33.96 100 L33.14 100 Q31.54 100 31.54 102.50 L31.54 116.25 C31.54 116.94 31.19 117.50 30.76 117.50 C30.33 117.50 29.98 116.94 29.98 116.25 L29.98 102.50 Q29.98 100 28.38 100 L25.26 100 Q23.66 100 23.66 101.00 L23.66 101.00 C23.66 101.69 23.31 102.25 22.88 102.25 C22.45 102.25 22.10 101.69 22.10 101.00 L22.10 101.00 Q22.10 100 20.50 100 L19.06 100 Q17.46 100 17.46 102.50 L17.46 108.50 C17.46 109.33 17.04 110.00 16.52 110.00 C16.01 110.00 15.59 109.33 15.59 108.50 L15.59 102.50 Q15.59 100 13.99 100 L13.74 100 Q12.14 100 12.14 102.50 L12.14 103.50 C12.14 104.60 11.58 105.50 10.89 105.50 C10.20 105.50 9.64 104.60 9.64 103.50 L9.64 102.50 Q9.64 100 8.04 100 L5.94 100 Q4.34 100 4.34 102.50 L4.34 108.50 C4.34 109.33 3.92 110.00 3.41 110.00 C2.89 110.00 2.47 109.33 2.47 108.50 L2.47 102.50 Q2.47 100 0.87 100 L0 100 Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 222vh; mask-size:100% 222vh; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
@media (max-width:640px){ html.gwipe::view-transition-new(root){ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 222' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H100 V100 L104.77 100 Q101.62 100 101.62 102.50 L101.62 103.10 C101.62 104.27 99.54 105.24 97.00 105.24 C94.46 105.24 92.38 104.27 92.38 103.10 L92.38 102.50 Q92.38 100 89.23 100 L83.35 100 Q80.20 100 80.20 100.00 L80.20 100.00 C80.20 101.18 78.12 102.14 75.58 102.14 C73.04 102.14 70.97 101.18 70.97 100.00 L70.97 100.00 Q70.97 100 67.82 100 L59.41 100 Q56.26 100 56.26 102.50 L56.26 111.67 C56.26 112.45 54.87 113.10 53.18 113.10 C51.49 113.10 50.10 112.45 50.10 111.67 L50.10 102.50 Q50.10 100 46.95 100 L44.89 100 Q41.74 100 41.74 100.71 L41.74 100.71 C41.74 101.50 40.35 102.14 38.66 102.14 C36.97 102.14 35.58 101.50 35.58 100.71 L35.58 100.71 Q35.58 100 32.43 100 L27.17 100 Q24.02 100 24.02 102.50 L24.02 105.71 C24.02 106.50 22.63 107.14 20.94 107.14 C19.25 107.14 17.87 106.50 17.87 105.71 L17.87 102.50 Q17.87 100 14.71 100 L0 100 Z' fill='white'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 222' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H100 V100 L104.77 100 Q101.62 100 101.62 102.50 L101.62 103.10 C101.62 104.27 99.54 105.24 97.00 105.24 C94.46 105.24 92.38 104.27 92.38 103.10 L92.38 102.50 Q92.38 100 89.23 100 L83.35 100 Q80.20 100 80.20 100.00 L80.20 100.00 C80.20 101.18 78.12 102.14 75.58 102.14 C73.04 102.14 70.97 101.18 70.97 100.00 L70.97 100.00 Q70.97 100 67.82 100 L59.41 100 Q56.26 100 56.26 102.50 L56.26 111.67 C56.26 112.45 54.87 113.10 53.18 113.10 C51.49 113.10 50.10 112.45 50.10 111.67 L50.10 102.50 Q50.10 100 46.95 100 L44.89 100 Q41.74 100 41.74 100.71 L41.74 100.71 C41.74 101.50 40.35 102.14 38.66 102.14 C36.97 102.14 35.58 101.50 35.58 100.71 L35.58 100.71 Q35.58 100 32.43 100 L27.17 100 Q24.02 100 24.02 102.50 L24.02 105.71 C24.02 106.50 22.63 107.14 20.94 107.14 C19.25 107.14 17.87 106.50 17.87 105.71 L17.87 102.50 Q17.87 100 14.71 100 L0 100 Z' fill='white'/%3E%3C/svg%3E"); } }
@keyframes gw-old{ from{ filter:none; transform:none; } to{ filter:brightness(.55) saturate(.8); transform:scale(.985) translateY(1.5vh); } }
@keyframes gw-new{ from{ -webkit-mask-position:0 -124vh; mask-position:0 -124vh; } to{ -webkit-mask-position:0 0; mask-position:0 0; } }

.gw-band{ position:fixed; left:0; top:0; width:100vw; height:27vh; pointer-events:none; z-index:2147483000; view-transition-name:gw-band; contain:strict; }
.gw-band svg{ display:block; width:100%; height:100%; filter:drop-shadow(0 5px 6px rgba(0,0,0,.4)); }
html.gwipe::view-transition-group(gw-band){ animation:none; }
html.gwipe::view-transition-new(gw-band){ animation:gw-band .5s cubic-bezier(.55,0,.25,1) both; }
@keyframes gw-band{ from{ transform:translateY(-29vh); } to{ transform:translateY(95vh); } }

/* ======================= livelier goops (js/alive.js) */
.goopfig.alive .body{ rotate:var(--gl-r, 0deg); translate:var(--gl-x, 0%) 0; transition:rotate .7s cubic-bezier(.2,.8,.2,1), translate .7s cubic-bezier(.2,.8,.2,1); }
.goopfig.alive .body > img, .goopfig.alive .sk-in{ transform-origin:50% 92%; }
.goopfig.alive[data-fg="hop"] .body > img, .goopfig.alive[data-fg="hop"] .sk-in{ animation:gl-hop .7s cubic-bezier(.3,1.4,.5,1); }
.goopfig.alive[data-fg="wiggle"] .body > img, .goopfig.alive[data-fg="wiggle"] .sk-in{ animation:gl-wiggle .8s ease-in-out; }
.goopfig.alive[data-fg="squish"] .body > img, .goopfig.alive[data-fg="squish"] .sk-in{ animation:gl-squish .65s cubic-bezier(.3,1.6,.5,1); }
.goopfig.alive[data-fg="look"] .body > img, .goopfig.alive[data-fg="look"] .sk-in{ animation:gl-look 1.6s ease-in-out; }
.goopfig.alive[data-fg="stretch"] .body > img, .goopfig.alive[data-fg="stretch"] .sk-in{ animation:gl-stretch 1.4s ease-in-out; }
.goopfig.alive[data-fg="hop"] .floor{ animation:gl-floor .7s cubic-bezier(.3,1.4,.5,1); }
@keyframes gl-hop{ 0%{ scale:1 1; translate:0 0; } 22%{ scale:1.1 .88; translate:0 2%; } 50%{ scale:.94 1.08; translate:0 -14%; } 78%{ scale:1.06 .94; translate:0 1%; } 100%{ scale:1 1; translate:0 0; } }
@keyframes gl-floor{ 0%, 100%{ scale:1; opacity:1; } 50%{ scale:.75; opacity:.6; } }
@keyframes gl-wiggle{ 0%, 100%{ rotate:0deg; } 20%{ rotate:-6deg; } 40%{ rotate:5deg; } 60%{ rotate:-4deg; } 80%{ rotate:2deg; } }
@keyframes gl-squish{ 0%{ scale:1 1; } 30%{ scale:1.16 .8; } 60%{ scale:.93 1.08; } 100%{ scale:1 1; } }
@keyframes gl-look{ 0%, 100%{ translate:0 0; rotate:0deg; } 25%, 40%{ translate:-3% 0; rotate:-4deg; } 60%, 75%{ translate:3% 0; rotate:4deg; } }
@keyframes gl-stretch{ 0%, 100%{ scale:1 1; } 35%, 55%{ scale:.94 1.1; } 75%{ scale:1.05 .96; } }
/* moods */
.goopfig.alive[data-mood="glum"] .body{ filter:saturate(.6) brightness(.9); }
.goopfig.alive[data-mood="glum"].idle .body, .goopfig.alive[data-mood="sleepy"].idle .body{ animation-duration:6s; }
.goopfig.alive[data-mood="glum"] .body > img, .goopfig.alive[data-mood="glum"] .sk-in{ scale:1.02 .94; }
.goopfig.alive[data-mood="glum"]::after{ content:""; position:absolute; left:50%; top:2%; width:26%; aspect-ratio:64/52; translate:-50% 0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 52'%3E%3Cpath d='M16 30 a10 10 0 0 1 2-19.8 a14 14 0 0 1 26.5 2.6 a9 9 0 0 1 3.5 17.2 Z' fill='%239aa6c4' stroke='%235c6788' stroke-width='2.5'/%3E%3Cpath d='M22 37 l-3 7 M33 37 l-3 9 M44 37 l-3 7' stroke='%237fb8ff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; pointer-events:none; z-index:3; opacity:.9; animation:gl-cloud 3.4s ease-in-out infinite; filter:drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
@keyframes gl-cloud{ 0%, 100%{ transform:translate(-6%, 0); } 50%{ transform:translate(6%, -6%); } }
.goopfig.alive[data-mood="sleepy"]::after{ content:"z"; position:absolute; right:20%; top:14%; font:700 clamp(12px, 12cqw, 26px)/1 var(--f-head); color:#cfe6ff; opacity:0; pointer-events:none; text-shadow:0 2px 6px rgba(0,0,0,.5); animation:gl-z 3.2s ease-in-out infinite; }
.goopfig.alive[data-mood="sleepy"]::before{ content:"z"; position:absolute; right:28%; top:22%; font:700 clamp(9px, 8cqw, 18px)/1 var(--f-head); color:#cfe6ff; opacity:0; pointer-events:none; z-index:3; animation:gl-z 3.2s ease-in-out 1.6s infinite; }
@keyframes gl-z{ 0%{ opacity:0; transform:translate(0, 0) scale(.6); } 20%{ opacity:.9; } 100%{ opacity:0; transform:translate(14px, -30px) scale(1.15); } }
.gl-spark{ position:absolute; z-index:4; width:clamp(12px, 14%, 26px); aspect-ratio:1; color:#ffe066; pointer-events:none; animation:gl-spark 1.2s ease-out both; filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.gl-spark svg{ width:100%; height:100%; }
.goopfig .gl-spark:nth-of-type(even){ color:#ff6ad5; }
@keyframes gl-spark{ 0%{ opacity:0; transform:translate(0, 6px) scale(.4); } 25%{ opacity:1; } 100%{ opacity:0; transform:translate(var(--dx, 0), -46px) scale(1.1) rotate(25deg); } }
html.calm .goopfig.alive .body{ rotate:none; translate:none; transition:none; }
html.calm .goopfig.alive .body > img, html.calm .goopfig.alive .sk-in, html.calm .goopfig.alive .floor{ animation:none !important; }
html.calm .goopfig.alive::after, html.calm .goopfig.alive::before, html.calm .gl-spark{ display:none; }
@media (prefers-reduced-motion:reduce){ .goopfig.alive .body > img, .goopfig.alive .sk-in, .gl-spark{ animation:none !important; } .goopfig.alive::after, .goopfig.alive::before{ display:none; } }

/* ======================= one card for messages that arrive together (premium.js) */
.toast.bundle .tx{ display:grid; gap:6px; }
.tb-h{ font:700 15px/1.2 var(--f-head); color:#fff; }
.tbundle{ list-style:none; margin:0; padding:0; display:grid; gap:5px; }
.tbundle li{ display:flex; align-items:center; gap:8px; font-size:14px; line-height:1.3; }
.tbundle .ic-xs{ display:inline-grid; place-items:center; width:20px; height:20px; flex:0 0 auto; }
.tbundle .ic-xs svg, .tbundle .ic-xs img{ width:20px !important; height:20px !important; }
.tbundle .ic-xs .stk-mini{ width:22px; height:22px; border-width:2px; }
.tbundle .ic-xs .stk-mini svg{ width:11px !important; height:11px !important; }
/* on computers, messages sit at the bottom right, clear of page titles */
@media (min-width:641px){ .toasts{ top:auto !important; bottom:calc(20px + env(safe-area-inset-bottom, 0px)) !important; } }
@media (min-width:641px) and (max-width:1060px){ .toasts{ bottom:calc(90px + env(safe-area-inset-bottom, 0px)) !important; } }

/* ======================= coming soon (js/soon.js) */
.soon{ max-width:640px; align-items:flex-start; }
.soon-face{ width:84px; height:84px; border-radius:22px; object-fit:cover; box-shadow:0 8px 24px rgba(0,0,0,.4); }
.soon h2{ font:700 clamp(22px, 3vw, 28px)/1.15 var(--f-head); }

/* ======================= moving a save with QR codes (backup.js) */
.bk-move{ display:grid; gap:6px; padding:12px 0 4px; border-top:1px solid var(--line); margin-top:6px; }
.bk-qrwrap{ display:grid; place-items:center; }
.bk-qrwrap canvas{ width:min(320px, 76vw); height:auto; aspect-ratio:1; border-radius:14px; background:#fff; }
.bk-cam{ position:relative; width:min(360px, 80vw); aspect-ratio:1; margin:0 auto; border-radius:16px; overflow:hidden; background:#000; }
.bk-cam video{ width:100%; height:100%; object-fit:cover; }
.bk-aim{ position:absolute; inset:14%; border:3px solid rgba(157,255,46,.85); border-radius:16px; box-shadow:0 0 0 999px rgba(0,0,0,.25); }
.bk-prog{ height:10px; border-radius:99px; background:rgba(214,190,255,.14); overflow:hidden; }
.bk-prog i{ display:block; height:100%; width:0; background:var(--lime); transition:width .25s; }
.center{ text-align:center; }

/* ======================= seasons on the town scenes (regions.js): a tint over the time-of-day tint, never instead of it */
.rstage .rtint::after{ content:""; position:absolute; inset:0; pointer-events:none; }
.rstage.s-winter .rtint::after{ background:linear-gradient(180deg, rgba(200,225,255,.16), rgba(130,170,235,.10)); }
.rstage.w-snow .rtint::after{ background:linear-gradient(180deg, rgba(230,240,255,.32), rgba(170,200,245,.2)); }
.rstage.s-autumn .rtint::after{ background:linear-gradient(180deg, rgba(255,150,60,.10), rgba(170,70,30,.12)); }
.rstage.s-spring .rtint::after{ background:linear-gradient(180deg, rgba(255,190,220,.12), rgba(255,255,255,0) 70%); }
.rstage.s-summer .rtint::after{ background:linear-gradient(180deg, rgba(255,230,140,.08), rgba(255,255,255,0) 70%); }