/* play.css -- extracted verbatim from index.html's game CSS + play-menu CSS blocks.
Source ranges (index.html, commit 6567adc): 310-320, 321-402, 406-409, 414-424,
425-429, 574-591, 920-935, 974-1027, 1051-1061, 1062-1283, 1349-1399, 1457-2312,
plus the four live shared control selectors rewritten from 1284-1456. */
/* ---- FIX ROUND 2 (Task 2): SHARED with index.html, not moved -- index.html keeps every
rule below untouched, the home page still needs them for its own head. Placed first, ahead
of every component rule above and below, so the cascade order matches index.html's: design
tokens and base rules before components. Without these, play.html's 91 font-family:var(--sans)
declarations resolved to nothing (serif fallback -- the "random different fonts" Jayden saw)
and the companion eye rig had no CSS at all (no .eye/.iris/.pupil/.glint geometry -- the
"eyes don't work"). Verified against actual play-engine.js usage, not just the cited source
range: index.html:138-153 (the range given for the eye rig) also contains .face, .introwake
and .glasses, three classes grep confirms play-engine.js's spawnCompanion never sets -- those
style the BIG head's own overlays on index.html and are correctly left out here. Only the
classes spawnCompanion actually creates (.eye, .iris, .pupil, .glint) are copied, from
index.html:140-144 and 153-156. Design tokens + media override: index.html:46,48. Body base
rule: index.html:58 (overflow-x:clip kept -- harmless alongside play.html's own
html,body{overflow:hidden}, which already wins the cascade for both axes regardless). ---- */
/* ---- THE WEBFONTS. This file carried 91 font-family:var(--sans) declarations and three
font-family:'Archivo' declarations, and NOT ONE @font-face to load either family -- neither
here nor in play.html. --sans is "Instrument Sans",-apple-system,system-ui,sans-serif, so
the named family never arrived and every word on the page silently fell through to
-apple-system: SF Pro on a Mac, close enough to Instrument Sans to have been reported as
fixed twice when it was not. .bcNum (the split-flap scoreboard numerals) was rendering in
SF Pro too, and the Archivo/Instrument register split -- display face on numerals and
moments only, everything else Instrument 400/600 -- is a settled part of the broadcast
identity, not decoration.
Copied verbatim from index.html:608-609. Instrument Sans Var is deliberately NOT copied:
it exists on index.html for the two-line wordmark's font-stretch trick, and play.html has
no wordmark. Preloads for the two Instrument faces live in play.html's own , where a
preload has to be; Archivo is not preloaded, matching index.html, because it is 90 KB and
nothing shows a numeral until a match has started. ---- */
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/instrument-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:'Archivo';src:url('fonts/archivo-variable.woff2') format('woff2');
font-weight:100 900;font-stretch:62% 125%;font-display:swap}
/* ---- THE TOKEN BLOCK IS GONE FROM THIS FILE. It lived here as a hand-copied subset of
index.html's :root, and a second flagged "top-up" block sat at the foot of the file for
the tokens the site header needed. play.html now links tokens.css AHEAD of this file
(play.html:13), so the shared file is the single source and this file only declares the
handful of values this page legitimately binds DIFFERENTLY. Everything below was verified
to leave every computed :root value unchanged at 1280px and 390px -- see
.superpowers/sdd/2026-08-02-play-page/play-tokens-report.md §1.
--accent: tokens.css binds --accent to the site's INTERACTIVE signal (a blue; it is the
link/back-link hover colour on the case studies). This page has always bound it to the
live-match green instead, and two rules consume it that way -- .tM.tLive's border and
.tResRow.tResLive's inset bar, both of which mean "this match is live". Letting the
shared value through would turn the live-match marker blue. header.css never touches
--accent (it carries its own --nav-accent) precisely so this override is safe.
--accent-live, --fs-hero, --fs-heroline: not in tokens.css at all; kept verbatim so the
computed-value diff stays empty. --lh-prose: this page carries 1.6, tokens.css 1.5. ---- */
/* ---- CORRECTION, 2026-08-03: --accent is NOT rebound here any more.
It meant the interactive blue on seven pages and the live-match green on this
one and the Lab, which is the most dangerous shape a token bug takes: every
page looks right in isolation and the system is silently incoherent. Both of
this file's two var(--accent) uses were the LIVE marker -- .tM.tLive's border
and .tResRow.tResLive's inset bar -- so both now name --accent-live, which is
what they always meant and which this file already defines and uses three
times. Nothing here wants the blue rebound; --accent now resolves to
tokens.css's blue on this page as on every other. ---- */
:root{--accent-live:#17A45A;
--fs-hero:clamp(38px,4.7vw,60px);--fs-heroline:var(--fs-pagehead-sm);--lh-prose:1.5;}
/* ---- THE PAGE GUTTER. Jayden: "nothing is really in the correct margins ... for that
whole screen". The Play bar was the case in point: it was pinned with a hard-coded
right:16px/top:16px in play.html's markup, while the site header sits on
.jbStick's padding of var(--sp-8) var(--sp-16-24) var(--sp-12) -- a 24px gutter at
1280px. So the page's only two pieces of chrome hung off two different margins,
8px apart, for no reason. --play-gutter IS the header's gutter, tracked at every
width, so the Play control and the bar share one edge.
--play-top is the other half, and it fixes a real bug rather than a misalignment.
MEASURED at 390px before this change: .jbNav ran 22->368 and the Play button ran
289->374, so they overlapped by 79px, and since header.css sits at z-index 100 and
.moodbar at 60, the bar painted straight over it -- the word "Play" was invisible
and most of its 44px target was unclickable. On the page whose entire purpose is
starting a game, on a phone. The collision is geometric, not a 640px-phone
special case: the bar is centred and ~481px wide, the button is ~85px plus its
gutter, so they meet as soon as the viewport drops under ~699px. Below 760px --
an existing site breakpoint, with room to spare over that 699 -- Play stops trying
to share the header's row and takes its own, right-aligned to the same gutter and
clearing --nav-h plus a step. Above it, nothing moves vertically: top:var(--sp-16)
is the 16px the bar already had, which bottom-aligns the 44px button with the 52px
nav (8+52 = 16+44 = 60). That alignment was right and is kept. ---- */
:root{--play-gutter:var(--sp-16-24);--play-top:var(--sp-16)}
@media(max-width:760px){:root{--play-top:calc(var(--nav-h) + var(--sp-20))}}
/* 24, not 12. THE PHONE HALF OF THE MARGIN FIX (the other half is .pCards' max-width in
play.html). Above ~1280 the mode row's inset is set by centring and this value never bites;
below it the gutter IS the margin, and at 390 this was putting the four doors 12px from the
glass while index.html's nav sits at 16 and gradientlab.html's main -- the page that settled
the site standard -- sits at 24. 12 was the odd one out on the one width where the margin is
most visible, because there is nothing else on the row to compare it against.
This also moves .pTeam, which takes the same token and was 12 for the same wrong reason. */
@media(max-width:640px){:root{--play-gutter:var(--sp-24)}}
body{background:var(--c50);color:var(--c950);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
.eye{position:absolute;border-radius:var(--r-full);overflow:hidden;z-index:3;pointer-events:none;transition:transform .08s steps(2);filter:url(#inkEye)}
.eye.eclosed{transform:scaleY(0.08);visibility:hidden}
.eye.eclosed .iris,.eye.eclosed .glint{opacity:0}
/* belt and braces: a closed eye has no iris, whatever the lid is doing that frame */
.eye[style*="display: none"] .iris,.eye[style*="display:none"] .iris{opacity:0} /* hidden, not squashed: a bare scaleY leaves the iris as a hard dark slit across the face, which is the one thing a blink must never look like. visibility (not display) so nothing reflows. */
.iris{position:absolute;border-radius:46%;background:repeating-conic-gradient(from 4deg,rgba(255,255,255,.045) 0deg 2deg,rgba(0,0,0,.24) 2deg 4.3deg),radial-gradient(circle at 50% 50%,#050505 0%,#080808 25%,#191919 39%,#121212 57%,#181818 72%,#0a0a0a 88%,#030303 100%),radial-gradient(circle at 38% 32%,#1e1e1e 0%,#0d0d0d 52%,#050505 100%);background-blend-mode:multiply,normal,normal}.iris::before{content:"";position:absolute;inset:0;border-radius:46%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:20px 20px;-webkit-mask:radial-gradient(circle,#000 58%,transparent 90%);mask:radial-gradient(circle,#000 58%,transparent 90%);mix-blend-mode:soft-light;opacity:.45;pointer-events:none}.iris::after{content:"";position:absolute;inset:0;border-radius:46%;background:radial-gradient(circle at 68% 74%,rgba(244,244,244,.38) 0%,rgba(244,244,244,0) 14%);filter:blur(.4px);pointer-events:none}
.pupil{position:absolute;left:50%;top:50%;width:55%;height:55%;border-radius:var(--r-full);background:radial-gradient(circle at 50% 50%,#000 0%,#000 58%,#060606 80%,rgba(6,6,6,0) 100%);transform:translate(-50%,-50%) scale(1);transform-origin:50% 50%;pointer-events:none;will-change:transform}
.glint{position:absolute;left:32%;top:26%;width:20%;height:20%;border-radius:var(--r-full);z-index:4;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.98) 0%,rgba(252,252,252,.72) 24%,rgba(250,250,250,0) 60%)}
.glint::after{content:"";position:absolute;left:128%;top:165%;width:46%;height:46%;border-radius:var(--r-full);background:radial-gradient(circle,rgba(250,250,250,.55) 0%,rgba(250,250,250,0) 68%)}
/* ---- THE BIG HEAD'S OWN CHROME. SHARED with index.html, copied verbatim, index.html keeps
every rule below untouched. The comment at the top of this file recorded that .face, .glasses
and .introwake were "correctly left out" because spawnCompanion never sets them -- true then,
wrong now. play.html loads hero-engine.js and carries a real (hidden) #stage, and mini-Jayden
renders by CLONING that stage's whole subtree, so every class INSIDE #stage has to be styled
here or the clone renders wrong: an unstyled .face is a natural-size image instead of an
inset:0 object-fit:contain one, and an unstyled .tongue/.glasses/.mouth loses its opacity:0
and paints a tongue and 3D glasses across his face.
The completeness rule that produced this block: style (a) everything the engine appends to
#stage, because that is exactly what gets cloned, and (b) everything it appends to
#stageMorph, because those default to in-flow and would otherwise stretch the host box.
(a) at boot = .eye/.iris/.pupil/.glint (above), .face, .mouth + markup's .tongue/.glasses.
(b) at boot = .speech, .dlogo, .dshadow, plus markup's .queueDots and .floorshadow.
DELIBERATELY OMITTED, with the reason: .introwake (the wake-up cinematic is index.html's page
intro and is gated off by HEADONLY), and .crumb/.crumbshadow/.stachecrumb/.popbucket/.kernel/
.popcrumb/.blush/.heartEye (created only by the eat / party / love / rain / movie easter eggs,
which on play.html are unreachable -- they fire from dragging a headline word there is no
headline for, or from the Play menu block that HEADONLY turns off).
Sources, index.html: 134, 137, 138, 139, 145-147, 162, 163, 164, 166, 168, 308. ---- */
#stageMorph{position:relative;width:100%;transform-origin:center center}
/* ══ THE HEAD LEANS IN WHEN IT WILL TAKE WHAT YOU ARE HOLDING ═══════════════════
Jayden: "when you drag it to the face, the face comes forward a little bit to show
that you can drag on it."
IT IS A DROP TARGET, SO IT IS BUILT LIKE ONE. .catchReady is the site's existing
"a valid payload is over me" signal -- hero-engine.js's faceTrackTo() raises it for a
dragged cookie and play-games.js's word rig raises it for a dragged mood word -- and
index.html already rewards it at line 149 with exactly this scale. Copying the value
rather than picking a new one means the head answers a drag identically on both pages;
a drop target that leans by a different amount depending on which page you are on is
two affordances pretending to be one.
#stageMorph, NOT #stage, AND THAT IS THE WHOLE REASON IT COMPOSES. hero-engine.js
writes #stage's transform on every frame of the idle float -- translate, rotate and
squash -- so anything this stylesheet put there would be overwritten within 16ms.
#stageMorph is its parent and nothing writes it, so the lean multiplies into the float
instead of racing it: the head keeps breathing and drifting exactly as it did, and the
whole portrait -- head, floor shadow, speech bubble and the drifting logo marks, which
are #stageMorph's other children -- comes forward together as one object. The crowd of
companions is NOT in this subtree, so they stay put; it is the portrait that leans,
not the scene.
IT ONLY EVER FIRES DURING A DRAG. Both owners of .catchReady set it inside a pointer
gesture and clear it on release, so a bare cursor crossing the head does nothing. On
this page there is no competing gesture to confuse it with: hero-head-transform.js --
the selection frame that makes the portrait draggable, scalable and rotatable -- is
loaded by index.html only, so on Play the head is never itself picked up.
THE RETURN IS SLOWER THAN THE ARRIVAL, and asymmetric on purpose. Arming is a response
and should feel instant (--dur-state); disarming is the state letting go and gets the
rung built for that (--dur-state-out), which is the same 160/240 pair tokens.css §6
defines for hover in and hover out. index.html transitions both directions at 160 and
therefore snaps back; the patch to bring it in line is in the audit doc.
AND A DROP THAT WAS TAKEN RELAXES DIFFERENTLY FROM ONE THAT WAS ABANDONED. On a
successful drop the mood performance is about to start, so the lean hands over on the
settle spring instead of retracting -- the head is not returning to rest, it is going
somewhere. .pMoodTaken is set for exactly that release and dropped again by the rig. */
#stageMorph{transition:transform var(--dur-state-out) var(--ease-out)}
body.catchReady #stageMorph{transform:scale(1.055);transition-duration:var(--dur-state)}
body.pMoodTaken #stageMorph{transition:transform var(--sp-settle-dur) var(--sp-settle)}
/* REDUCED MOTION KEEPS THE DROP TARGET, AND DRAWS IT INSTEAD OF PERFORMING IT.
The lean is the only thing telling you the head accepts the word, so switching it off
and stopping there would leave the affordance with no signal at all -- which is the
failure Apple's reduced-motion criteria name directly (don't remove it, substitute
something that does not move). The substitute is the drop zone itself, drawn: a hairline
outline of the shape play-games.js's onHead() actually tests, cross-faded in while the
head is armed. It is more informative than the lean, not less -- the lean says "I will
take this", the ring says "I will take this, from anywhere inside here" -- and it is
built from opacity alone, which is the substitution Apple asks for.
THE SHAPE IS THE REAL ONE AND THESE NUMBERS ARE NOT DECORATIVE. onHead() tests an ellipse
inscribed in #face's data-head-bounds ("0.1933 0.0616 0.8484 0.9234") with a 1.06 pad, so:
centre x (.1933+.8484)/2 = 52.09% y (.0616+.9234)/2 = 49.25%
size w (.8484-.1933)*1.06 = 69.44% h (.9234-.0616)*1.06 = 91.35%
offset left 52.09-69.44/2 = 17.37% top 49.25-91.35/2 = 3.58%
It is hung on .stage rather than on #stageMorph because .stage is the box onHead()
measures -- #stageMorph also contains the floor shadow and is therefore taller, which
would have drawn a ring that lied by the height of the shadow.
IF THE HIT TEST MOVES, THIS MUST MOVE WITH IT. There is no way to derive one from the
other in CSS, so the coupling is this comment. */
@media(prefers-reduced-motion:reduce){
#stageMorph,body.pMoodTaken #stageMorph{transition:none}
body.catchReady #stageMorph{transform:none}
.stage::after{content:"";position:absolute;left:17.37%;top:3.58%;width:69.44%;height:91.35%;
border-radius:var(--r-full);border:1px solid var(--c400);
opacity:0;transition:opacity var(--dur-state) linear;pointer-events:none;z-index:6}
body.catchReady .stage::after{opacity:1}
}
.stage{position:relative;width:100%;aspect-ratio:1;will-change:transform;z-index:5}
.face{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;-webkit-user-select:none;user-select:none;cursor:pointer}
.stage img,.face{-webkit-user-drag:none;-khtml-user-drag:none;user-select:none}
.mouth{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;z-index:2;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.tongue{position:absolute;left:41%;top:56%;width:12%;height:auto;transform-origin:50% 100%;transform:scaleY(0);opacity:0;z-index:4;pointer-events:none;filter:url(#inkSm) drop-shadow(0 1px 1px rgba(0,0,0,.3));will-change:transform,opacity}
.glasses{position:absolute;inset:0;width:100%;height:100%;z-index:7;pointer-events:none;opacity:0;will-change:transform,opacity;filter:url(#inkSm) drop-shadow(0 3px 3px rgba(0,0,0,.45))}
.gl-red{fill:rgba(200,45,45,.5)}.gl-cyan{fill:rgba(35,150,165,.46)}.gl-plast{opacity:.5;pointer-events:none}
.floorshadow{position:absolute;left:50%;bottom:3%;width:60%;height:12%;transform:translateX(-50%);background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(8,8,8,.42),rgba(8,8,8,.28) 30%,rgba(8,8,8,.10) 58%,transparent 78%);filter:blur(7px);z-index:-1;pointer-events:none;opacity:.5}
.speech{position:absolute;inset:0;z-index:9;pointer-events:none;font-family:var(--sans);font-weight:600}
.dlogo{border-radius:var(--r-2xs);position:absolute;width:21%;height:21%;opacity:0;backface-visibility:hidden;will-change:transform,left,top,opacity;filter:drop-shadow(0 3px 8px rgba(0,0,0,.22))}
.dshadow{position:absolute;border-radius:var(--r-full);background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(8,8,8,.5),rgba(8,8,8,.3) 40%,rgba(8,8,8,.12) 62%,transparent 76%);transform:translate(-50%,-50%);z-index:-1;pointer-events:none;opacity:0;will-change:transform,left,top,width,height,opacity}
.queueDots{position:absolute;left:50%;top:-7%;transform:translateX(-50%);display:flex;gap:.42rem;z-index:8;opacity:0;pointer-events:none;transition:opacity var(--ease-out-dur) var(--ease-out)}
/* The Home mood performances are shared JavaScript, so Play carries the same presentation
classes for every node that hero-engine.js and party.js create. This is not a second
animation implementation: the engine remains the sole state/timing owner. */
.cookieDot{display:inline-block;width:.62em;height:.62em;vertical-align:baseline;position:relative;overflow:visible;color:transparent}
.cookieDot::before{content:"";position:absolute;inset:0;background:center/contain no-repeat;background-image:url(images/cookie.webp);filter:url(#inkSm);animation:cookieBite 1.8s steps(1,end) infinite}
@keyframes cookieBite{0%{background-image:url(images/cookie.webp)}25%{background-image:url(images/cookie_b1.webp)}50%{background-image:url(images/cookie_b2.webp)}75%{background-image:url(images/cookie_b3.webp)}100%{background-image:url(images/cookie.webp)}}
.discoDot{display:inline-block;width:.62em;height:.62em;vertical-align:baseline;position:relative;overflow:visible;color:transparent;filter:drop-shadow(0 0 .05em rgba(150,180,255,.55))}
.discoDot::before{content:"";position:absolute;inset:0;background:url(images/discoball.webp) center/contain no-repeat;filter:url(#inkSm)}
.discoDot::after{content:"";position:absolute;left:3%;top:10%;width:94%;height:88%;border-radius:50%;background:url(images/discoglints.webp) 0 50%/130% auto repeat;opacity:.85;animation:discoSweep 1.6s steps(13,end) infinite}
@keyframes discoSweep{from{background-position:0 50%}to{background-position:-200% 50%}}
.heartDot{display:inline-block;width:.62em;height:.62em;vertical-align:baseline;position:relative;overflow:visible;color:transparent}
.heartDot::before{content:"";position:absolute;inset:0;background:url(images/heart.webp) center/contain no-repeat;filter:url(#inkSm) drop-shadow(0 1px 1px rgba(0,0,0,.28));transform-origin:50% 50%;animation:heartDotBeat 1s steps(1,end) infinite}
@keyframes heartDotBeat{0%{transform:scale(1)}12.5%{transform:scale(1.14)}25%{transform:scale(1.07)}37.5%{transform:scale(1)}100%{transform:scale(1)}}
.camDot{display:inline-block;width:.92em;height:.66em;vertical-align:baseline;position:relative;color:transparent}
.camDot::before{content:"";position:absolute;inset:0;background:center/contain no-repeat;background-image:url(images/cam.webp);filter:url(#inkSm);animation:camSnap 2.8s steps(1,end) infinite;transform-origin:50% 70%}
@keyframes camSnap{0%,88%{transform:scale(1)}91%{transform:scale(1.12)}94%{transform:scale(.95)}97%,100%{transform:scale(1)}}
.glasses.on{opacity:1;animation:glassesOn .62s steps(5,end) forwards}
.glasses.off{opacity:0;animation:glassesOff .46s steps(4,end) forwards}
@keyframes glassesOn{0%{transform:translateY(40%) scale(1.1) rotate(-3.5deg);opacity:0}18%{opacity:1}46%{transform:translateY(11%) scale(1.04) rotate(2deg);opacity:1}70%{transform:translateY(-3.5%) scale(.995) rotate(-1deg);opacity:1}86%{transform:translateY(1.4%) scale(1.004) rotate(.4deg);opacity:1}100%{transform:translateY(0) scale(1) rotate(0);opacity:1}}
@keyframes glassesOff{0%{transform:translateY(0) scale(1) rotate(0);opacity:1}22%{transform:translateY(-3%) scale(1.01) rotate(1.2deg);opacity:1}100%{transform:translateY(34%) scale(1.12) rotate(-4deg);opacity:0}}
.popcrumb{position:absolute;width:2.2%;height:2.2%;background:#e7ddc7;z-index:5;opacity:0;pointer-events:none;will-change:transform,opacity}
.popbucket{position:absolute;left:50%;bottom:-24%;width:44%;height:auto;transform:translateX(-50%);transform-origin:50% 78%;z-index:8;opacity:0;pointer-events:none;will-change:transform,opacity;filter:url(#inkSm) drop-shadow(0 2px 2px rgba(0,0,0,.32))}
.kernel{position:absolute;width:9%;height:auto;z-index:8;opacity:0;pointer-events:none;will-change:transform,opacity;filter:url(#inkSm)}
.crumb{position:absolute;background-image:url(images/crumbtex.webp);background-size:150px 150px;pointer-events:none;z-index:6;will-change:transform,left,top,opacity}
.crumbshadow{position:absolute;border-radius:50%;background:radial-gradient(ellipse,rgba(12,9,6,.55),transparent 72%);pointer-events:none;z-index:6;will-change:transform,left,top,opacity;filter:blur(1px)}
.hungerdrag{position:fixed;pointer-events:none;font-family:var(--sans);font-weight:600;letter-spacing:-.02em;text-transform:none;font-size:var(--fs-h1);transform:translate(-50%,-50%);transform-origin:50% 18%;z-index:70;will-change:transform,left,top;color:var(--theme-ink);display:inline-flex;align-items:baseline;gap:.04em;white-space:nowrap}
.hungerdrag .bitn{animation:hglBite .16s steps(3,end) forwards;transform-origin:50% 38%}
@keyframes hglBite{0%{transform:scale(1.16);opacity:1}55%{transform:scale(.5) translateY(.12em);opacity:.6}100%{transform:scale(0) translateY(.3em);opacity:0}}
.stachecrumb{animation:stachePop .5s steps(4,end) forwards}
@keyframes stachePop{0%{transform:rotate(var(--r)) scale(0);opacity:0}55%{transform:rotate(var(--r)) scale(1.22);opacity:1}80%{transform:rotate(var(--r)) scale(.93);opacity:1}100%{transform:rotate(var(--r)) scale(1);opacity:1}}
.queueDots.on{opacity:.92}
.queueDots i{width:.5rem;height:.5rem;border-radius:50%;background:var(--theme-ink);filter:url(#inkSm);animation:qbounce .92s steps(7,end) infinite;animation-play-state:paused}
.queueDots.on i{animation-play-state:running}.queueDots i:nth-of-type(2){animation-delay:.12s}.queueDots i:nth-of-type(3){animation-delay:.24s}
@keyframes qbounce{0%{transform:translateY(0)}30%{transform:translateY(-95%)}60%{transform:translateY(0)}100%{transform:translateY(0)}}
.qsr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(prefers-reduced-motion:reduce){.cookieDot::before,.discoDot::after,.heartDot::before,.camDot::before,.queueDots i,.stachecrumb,.glasses.on,.glasses.off{animation:none}.glasses.on{opacity:1}.glasses.off{opacity:0}}
#party{position:absolute;top:0;left:0;right:0;height:112vh;-webkit-mask-image:linear-gradient(#000 90%,transparent 100%);mask-image:linear-gradient(#000 90%,transparent 100%);z-index:63;pointer-events:none;opacity:0;transition:opacity 1.15s cubic-bezier(.33,0,.2,1)}
#party:not(.on){transition:opacity .42s var(--ease-exit)}#party.on{opacity:1}
.partyDark{position:absolute;inset:0;background:radial-gradient(circle var(--hr,180px) at var(--hx,50%) var(--hy,38%),rgba(6,5,16,0) 0%,rgba(6,5,16,.55) 44%,rgba(2,1,8,.96) 100%)}
.partyHaze{position:absolute;left:var(--bx,50%);top:var(--by,30%);width:120vmax;height:120vmax;margin:-60vmax 0 0 -60vmax;background:radial-gradient(circle,rgba(120,150,255,.16),rgba(180,90,220,.06) 40%,transparent 66%);mix-blend-mode:screen;animation:hazePulse 1.5s steps(12,end) infinite,hueShift 5.6s steps(7,end) infinite}
.beamWrap{position:absolute;left:var(--bx,50%);top:var(--by,30%);width:0;height:0}
.beamSpin{position:absolute;left:0;top:0;width:300vmax;height:300vmax;margin:-150vmax 0 0 -150vmax;transform-origin:center;mix-blend-mode:screen;opacity:.5;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.10) 0deg 3deg,transparent 3deg 11deg,rgba(180,210,255,.09) 11deg 13deg,transparent 13deg 26deg);animation:spinB 8s steps(64,end) infinite,hueShift 5.6s steps(7,end) infinite}
.partyLights{position:absolute;left:var(--bx,50%);top:var(--by,30%);width:0;height:0;transform-origin:0 0;mix-blend-mode:screen;animation:spinL 6s steps(48,end) infinite,hueShift 5.6s steps(7,end) infinite}
.pspot{position:absolute;left:0;top:0;border-radius:1px;transform-origin:0 0;opacity:0;animation-name:twinkle;animation-iteration-count:infinite;animation-timing-function:steps(8,end)}
.partyFlash{position:absolute;inset:0;background:radial-gradient(circle at var(--bx,50%) var(--by,30%),rgba(190,200,255,.10),transparent 60%);mix-blend-mode:screen;opacity:0;animation:beat 1s steps(8,end) infinite}
.partyGrain{position:absolute;inset:-40px;background:url(images/overlay.webp);background-size:150px 150px;mix-blend-mode:overlay;opacity:.4}
@keyframes spinL{to{transform:rotate(360deg)}}@keyframes spinB{to{transform:rotate(360deg)}}
@keyframes twinkle{0%,100%{opacity:0}14%{opacity:.1}50%{opacity:1}}@keyframes hazePulse{0%,100%{opacity:.55}50%{opacity:1}}@keyframes beat{0%,62%,100%{opacity:0}70%{opacity:.5}82%{opacity:.12}}@keyframes hueShift{to{filter:hue-rotate(360deg)}}
#discoWrap{position:absolute;z-index:64;pointer-events:none;opacity:0;transform:translate(-50%,-140%) scale(.82);transition:opacity .7s var(--ease-out),transform .95s cubic-bezier(.22,1.15,.32,1)}
#discoWrap:not(.on){transition:opacity .38s var(--ease-exit),transform .5s var(--ease-exit)}#discoWrap.on{transform:translate(-50%,-50%) scale(1);opacity:1}
.dbGlow{position:absolute;left:50%;top:50%;width:300%;height:300%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(190,210,255,.45),rgba(150,120,220,.12) 30%,transparent 60%);mix-blend-mode:screen;animation:hazePulse 1.25s steps(10,end) infinite}
#discoBall{position:relative;width:clamp(104px,12.5vw,156px);height:clamp(104px,12.5vw,156px);border-radius:50%;overflow:hidden;clip-path:circle(50%);filter:drop-shadow(0 7px 18px rgba(0,0,0,.55))}
#discoBall .dbPhoto{position:absolute;inset:0;background:url(images/discoball.webp) center/cover no-repeat}
#discoBall .dbGlints{position:absolute;inset:-12%;background:url(images/discoglints.webp) repeat-x;background-size:150px 150px;mix-blend-mode:screen;animation:dbScroll 1.5s steps(12,end) infinite}
#discoBall .dbSweep{position:absolute;inset:0;background:linear-gradient(102deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);mix-blend-mode:screen;animation:dbSweep 2s steps(16,end) infinite}
#discoBall .dbShade{position:absolute;inset:0;background:radial-gradient(circle at 33% 28%,rgba(255,255,255,.5),rgba(255,255,255,0) 44%),radial-gradient(circle at 50% 50%,transparent 62%,rgba(2,2,12,.6) 100%)}
@keyframes dbScroll{to{background-position-x:-150px}}@keyframes dbSweep{0%{transform:translateX(-65%)}100%{transform:translateX(65%)}}
body.partyLock{overflow:hidden}
#loveScene{position:absolute;top:0;left:0;right:0;height:100vh;z-index:64;pointer-events:none;opacity:0;transition:opacity .45s var(--ease-out)}#loveScene.on{opacity:1}
.heartLayer{position:absolute;inset:0}.heartEye{position:absolute;width:17%;transform:translate(-50%,-50%);transform-origin:50% 50%;z-index:5;pointer-events:none;will-change:transform,opacity;filter:url(#inkSm) drop-shadow(0 1px 2px rgba(0,0,0,.32))}
.loveHeart{position:fixed;transform:translate(-50%,-50%);will-change:transform,opacity;opacity:0;filter:url(#inkSm) drop-shadow(0 2px 4px rgba(0,0,0,.3))}
@keyframes heartFloat{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(0)}16%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),calc(-50% - 132px)) scale(1) rotate(var(--rot,0deg))}}
.blush{position:absolute;inset:0;pointer-events:none;z-index:4}.blush i{position:absolute;top:54%;width:22%;height:14.5%;border-radius:50%;background:radial-gradient(ellipse,rgba(194,72,90,.5),rgba(194,72,90,.27) 42%,transparent 73%);filter:blur(4px);mix-blend-mode:multiply}.blush i:first-child{left:28%;transform:rotate(-13deg)}.blush i:last-child{left:51%;transform:rotate(13deg)}
#photorain{position:absolute;top:0;left:0;right:0;height:100vh;-webkit-mask-image:linear-gradient(#000 86%,transparent 100%);mask-image:linear-gradient(#000 86%,transparent 100%);z-index:95;pointer-events:none;overflow:hidden}
body.heroEmpathy .jbStick .jbNav{--nav-mat:var(--ctl-ground);--nav-rim:var(--ctl-container-rim);transition:none}
#camflash{position:absolute;top:0;left:0;right:0;height:100vh;z-index:98;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 42%,#fff 0%,#fff 56%,rgba(255,255,255,.8) 100%)}
#photorain .pgrain{position:absolute;inset:0;background:url(images/overlay.webp) repeat;opacity:.18;mix-blend-mode:multiply;animation:rainGrain 1s steps(8,end) infinite}
@keyframes rainGrain{0%{background-position:0 0}12.5%{background-position:-13px 7px}25%{background-position:9px -11px}37.5%{background-position:-7px -6px}50%{background-position:12px 8px}62.5%{background-position:-11px 10px}75%{background-position:6px -9px}87.5%{background-position:-9px 4px}100%{background-position:0 0}}
.rainphoto{position:absolute;display:block;background:#f7f6f1 url(images/paper.webp) center/cover;padding:8px 8px 16px;border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.16),0 11px 26px rgba(0,0,0,.17);transform:translate(-50%,-50%);will-change:transform,opacity}.rainphoto img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.03)}.rainphoto::after{content:"";position:absolute;left:6px;right:6px;top:6px;bottom:16px;background:url(images/paper.webp) center/cover;opacity:.5;mix-blend-mode:multiply;pointer-events:none}
@media(prefers-reduced-motion:reduce){.partyLights,.beamSpin,.partyHaze,.partyFlash,.dbGlints,.dbSweep,.dbGlow,.loveHeart{display:none}#photorain .pgrain{animation:none}}
/* .moodHeads now comes from header.css so both pages share one geometry -- this
wrapping flex row was the other half of the split. Only this selector was touched
in this file. */
.mhItem{position:relative}.mhItem img{width:34px;height:40px;object-fit:contain;background:var(--ctl-ground-hover);border-radius:var(--r-2xs);display:block}
.mhPick{padding:0;border:0;background:none;cursor:pointer;display:block;border-radius:var(--r-2xs);transition:box-shadow var(--dur-state) var(--ease-out)}
.mhPick:hover,.mhPick:focus-visible{box-shadow:0 0 0 1.5px var(--ctl-ink)}
.mhX{position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:var(--r-full);border:1px solid var(--theme-rim);background:var(--ctl-ground);color:var(--ctl-ink);font-size:var(--fs-micro);line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.mhX::before{content:"";position:absolute;inset:-4px;border-radius:var(--r-full)}.mhX:hover{color:var(--ctl-ink-strong);border-color:var(--theme-rim-strong)}
.moodMenu .moodItem[hidden]{display:none}
.gIco{width:18px;height:18px;flex:0 0 18px;display:block;color:var(--ctl-ink);transition:color var(--dur-state) var(--ease-out)}
.moodItem:hover .gIco{color:var(--ctl-ink-strong)}
#endGame{color:#b3402e}#endGame .gIco{color:#b3402e}#endGame:hover{color:#8f3323}#endGame:hover .gIco{color:#8f3323}
/* The maker links (Create head, Gradient maker) are , not