/* ONE WISH ep. 1 player. One screen, four layouts (DESIGN.md §1): FILM (the film whole), FEED (the live feed as a band
   at the top, the game below), GAME (the film a 6% strip with the heart line), CARD (a reward over the film, dimmed).
   Three voices of text and one show: spoken lines (heavy rounded, dark stroke, the speaker's tag), her inner voice (small
   pink typewriter, top left), the broadcast's lettering (chrome, stretched, candy outline), and the LUCKY TV bug. Outside
   the story (the pack's invitation, the end card's title) the phone's own heavy face instead: see the end of this file. */
:root {
  --bg: #07060a;
  --ink: #150c1f;
  --red: #ff2e3b;
  --hot: #ff2e93;
  --pink: #ff5fa8;
  --cobalt: #2c5cff;
  --lime: #b8f23a;
  --yellow: #ffd400;
  --say: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Arial Rounded MT Bold", system-ui, sans-serif;
  --show: "Anybody", "Arial Narrow", system-ui, sans-serif;
  --logo: "Unbounded", "Arial Black", system-ui, sans-serif;
  --type: "Courier Prime", "Courier New", ui-monospace, monospace;
  --chrome: linear-gradient(180deg, #ffffff 0%, #f3f5fa 22%, #c9d0dd 40%, #6c7488 49%, #2f3443 52%, #8f98ab 58%, #eef1f7 72%, #ffffff 82%, #b7bfcd 100%);
  --fh: 100%;            /* the film's height: the layout */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; overscroll-behavior: none; }
body { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; touch-action: manipulation; }
button { font: inherit; color: inherit; }

#app { position: fixed; inset: 0; overflow: hidden; background: var(--bg); }
#app.l-film { --fh: 100%; }
#app.l-feed { --fh: 38%; }
#app.l-game { --fh: 6%; }
#app.l-card { --fh: 100%; }

/* ---------------------------------------------------------------- the game, below */
#gamebox { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; z-index: 1; background: #ffb3d6; transform: translateY(102%); transition: transform .55s cubic-bezier(.65,0,.2,1), height 0s, visibility 0s linear .55s; visibility: hidden; }
#gamebox .gwrap, #gamebox iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
#app.l-feed #gamebox, #app.l-game #gamebox, #app.g-peek #gamebox { transform: none; visibility: visible; transition: transform .55s cubic-bezier(.65,0,.2,1), height 0s, visibility 0s; }
#app.l-game #gamebox { height: 94%; }
#gamebox.rest::after { content: ""; position: absolute; inset: 0; background: rgba(20, 8, 30, .38); pointer-events: none; transition: opacity .4s; }
#app.l-film #gamebox, #app.l-card #gamebox { pointer-events: none; }
#gamebox.instant { transition: none; }

/* ---------------------------------------------------------------- the film */
#film { position: absolute; left: 0; right: 0; top: 0; height: var(--fh); z-index: 2; overflow: hidden; background: #000;
  transition: height .55s cubic-bezier(.65,0,.2,1), filter .4s, transform .4s; }
#film.whip { transition: height .15s cubic-bezier(.5,0,.5,1); }
#film.whip .vids { filter: blur(7px) brightness(1.15); }
#film.instant { transition: none; }
#app.l-card #film { filter: blur(9px) brightness(.36) saturate(.75); transform: scale(1.04); }
.vids { position: absolute; inset: 0; transition: filter .15s; }
.vids > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; display: block; }
.vids > .on { opacity: 1; }
#still.push { animation: push var(--dur, 6s) linear forwards; }
@keyframes push { from { transform: scale(1.02); } to { transform: scale(1.14); } }
.vids video.tail { animation: tailpush 6s ease-out forwards; }
@keyframes tailpush { from { transform: scale(1); } to { transform: scale(1.07); } }
#film.split .vids { filter: url(#split) saturate(1.25); }
.grain { position: absolute; inset: -50%; background: url(media/grain.png) repeat; background-size: 180px; opacity: .07; mix-blend-mode: overlay; pointer-events: none; animation: grain .5s steps(5) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-7%, 4%); } 40% { transform: translate(5%, -9%); } 60% { transform: translate(-3%, 8%); } 80% { transform: translate(9%, 2%); } 100% { transform: translate(0, 0); } }
#app.l-feed .grain, #app.l-game .grain { display: none; }
.vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(130% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.42) 100%); }

/* ---------------------------------------------------------------- the LUCKY TV bug: the episode's clock */
#bug { position: absolute; top: calc(var(--safe-t) + 12px); right: 12px; z-index: 6; display: grid; justify-items: end; gap: 4px; opacity: 0; transform: translateX(14px); transition: opacity .35s, transform .45s cubic-bezier(.2,1.4,.4,1); pointer-events: none; font-family: var(--show); }
#bug.on { opacity: 1; transform: none; }
#bug .b1 { display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border-radius: 6px; background: rgba(12, 8, 18, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
#bug .live { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px 2px; border-radius: 4px; background: var(--red); color: #fff; font: 900 10px/1 var(--show); font-stretch: 85%; letter-spacing: .1em; }
#bug .live i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: rec 1.1s steps(2) infinite; }
@keyframes rec { 50% { opacity: .15; } }
#bug .ch { font: 900 11px/1 var(--show); font-stretch: 120%; letter-spacing: .04em; background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
#bug .tc { font: 800 11px/1 var(--show); font-stretch: 75%; color: rgba(255,255,255,.82); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
#bug .b2 { display: flex; align-items: center; gap: 6px; padding: 3px 4px 3px 8px; border-radius: 6px; background: rgba(255, 46, 147, .92); color: #fff; font: 900 10px/1 var(--show); font-stretch: 90%; letter-spacing: .12em; box-shadow: 0 2px 0 rgba(0,0,0,.25); }
#bug .n { display: inline-flex; gap: 2px; }
#bug .n b { display: inline-grid; place-items: center; min-width: 15px; height: 19px; border-radius: 3px; background: #fff; color: var(--ink); font: 900 15px/1 var(--show); font-stretch: 70%; font-variant-numeric: tabular-nums; }
#bug .n b.flip { animation: flip .5s cubic-bezier(.3,1.6,.5,1); background: var(--yellow); }
@keyframes flip { 0% { transform: rotateX(90deg); } 100% { transform: none; } }
#app.l-game #bug { opacity: 0; }

/* ---------------------------------------------------------------- the character card (NIKKE-style: number behind the face) */
.ccard { position: absolute; inset: 0; z-index: 3; pointer-events: none; visibility: hidden; --c: #ff2e3b; --k: #fff; }
.ccard.on { visibility: visible; }
.ccard > * { position: absolute; }
.cc-bg, .cc-cut { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cc-wash { inset: 0; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 70%, transparent), rgba(10, 6, 20, .55) 70%); mix-blend-mode: multiply; opacity: 0; }
.ccard.on .cc-wash { animation: washin .14s ease-out forwards; }
.ccard.leave .cc-wash, .ccard.leave .cc-cut, .ccard.leave .cc-bg { opacity: 0 !important; transition: opacity .16s; }
@keyframes washin { to { opacity: 1; } }
.cc-num { left: -6%; right: -6%; top: 9%; height: 52%; display: grid; place-items: center; transform-origin: 50% 50%; }
.cc-num > span { grid-area: 1 / 1; position: relative; font-family: var(--show); font-weight: 900; font-style: italic; line-height: .8; letter-spacing: -.03em; white-space: nowrap; transform: scaleY(var(--sy, 1.5)) skewX(-8deg); }
.cc-num .o { color: transparent; -webkit-text-stroke: .09em var(--c); filter: drop-shadow(0 .05em 0 rgba(0,0,0,.45)); }
.cc-num .c { background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ccard.on .cc-num { animation: slamnum .16s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes slamnum { from { transform: scale(1.7) translateX(-10%); opacity: 0; } to { transform: none; opacity: 1; } }
.cc-slash { left: -10%; right: -10%; bottom: 16%; height: 74px; background: var(--c); transform: rotate(-7deg) translateX(-110%); box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 10px 24px rgba(0,0,0,.35); }
.ccard.on .cc-slash { animation: slash .22s cubic-bezier(.2,.9,.3,1) .05s forwards; }
.ccard.out .cc-slash { animation: slashout .25s cubic-bezier(.6,0,.8,.2) forwards; }
@keyframes slash { to { transform: rotate(-7deg) translateX(0); } }
@keyframes slashout { from { transform: rotate(-7deg) translateX(0); } to { transform: rotate(-7deg) translateX(110%); } }
.cc-id { left: 18px; right: 18px; bottom: calc(16% + 12px); display: grid; justify-items: start; gap: 6px; transform: rotate(-7deg); transform-origin: left bottom; }
.cc-name { position: relative; display: grid; font-family: var(--show); font-weight: 900; font-style: italic; font-size: 54px; line-height: .82; letter-spacing: -.01em; }
.cc-name > span { grid-area: 1 / 1; position: relative; transform: scaleY(1.25); transform-origin: left bottom; white-space: nowrap; }
.cc-name .o { color: transparent; -webkit-text-stroke: 9px var(--ink); }
.cc-name .c { color: #fff; }
.cc-tag { font: 900 13px/1 var(--say); letter-spacing: .14em; padding: 6px 10px 5px; border-radius: 4px; background: var(--ink); color: #fff; box-shadow: 3px 3px 0 var(--c); }
.ccard.on .cc-id { animation: idin .25s cubic-bezier(.2,1.3,.4,1) .08s both; }
.ccard.out .cc-id { animation: idout .22s cubic-bezier(.6,0,.8,.2) forwards; }
@keyframes idin { from { opacity: 0; transform: rotate(-7deg) translateX(-60px); } to { opacity: 1; transform: rotate(-7deg); } }
@keyframes idout { to { opacity: 0; transform: rotate(-7deg) translateX(80px); } }

/* ---------------------------------------------------------------- the heart line: the seam between film and game */
#seam { position: absolute; left: 0; width: 100%; height: 26px; top: calc(var(--fh) - 13px); z-index: 4; pointer-events: none; opacity: 0; transition: top .55s cubic-bezier(.65,0,.2,1), opacity .3s, height .4s; }
#app.l-feed #seam { opacity: 1; }
#app.l-game #seam { opacity: 1; top: 0; height: calc(6% + 8px); }
#app.whipping #seam { transition: top .15s cubic-bezier(.5,0,.5,1), opacity .15s; opacity: 0; }

/* ---------------------------------------------------------------- effects: confetti, the dive's pixel blocks */
#fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
/* the plushies falling on RULE #1 (plush.js): over the film, under the lettering and the lines */
#plushfx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; display: none; }
#plushfx.on { display: block; }
.plushhint { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 33%); z-index: 9; transform: translateX(-50%) rotate(-3deg) scale(.8); opacity: 0; transition: opacity .25s, transform .25s cubic-bezier(.2,1.4,.4,1); pointer-events: none; white-space: nowrap; font: 900 12px/1 var(--show); letter-spacing: .2em; color: #fff; background: var(--hot); padding: 7px 11px 6px; border-radius: 4px; box-shadow: 3px 3px 0 var(--ink); }
.plushhint.on { opacity: 1; transform: translateX(-50%) rotate(-3deg) scale(1); }

/* ---------------------------------------------------------------- voice 1: spoken lines */
#say { position: absolute; left: 14px; right: 14px; bottom: calc(var(--safe-b) + 12.5%); z-index: 8; text-align: center; pointer-events: none; display: grid; justify-items: center; gap: 2px; --c: #ff2e3b; --k: #fff; }
#say.high { bottom: auto; top: calc(var(--safe-t) + 15%); }
#say .who { font: 900 12px/1 var(--say); letter-spacing: .1em; padding: 5px 9px 4px; border-radius: 5px; background: var(--c); color: var(--k); transform: rotate(-3deg); box-shadow: 0 2px 0 rgba(0,0,0,.4); margin-bottom: 6px; }
#say .who.off::after { content: " (OFF)"; display: none; }
#say .ln { position: relative; display: grid; font: 900 27px/1.16 var(--say); letter-spacing: .005em; text-wrap: balance; max-width: 100%; }
#say .ln > span { grid-area: 1 / 1; position: relative; }
#say .ln .st { color: var(--ink); -webkit-text-stroke: 8px var(--ink); filter: drop-shadow(0 3px 0 var(--c)); }
#say .ln .fi { color: #fff; }
#say .ln.pop { animation: linepop .22s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes linepop { from { opacity: 0; transform: translateY(10px) scale(.92); } to { opacity: 1; transform: none; } }
#say.out { opacity: 0; transition: opacity .18s; }

/* ---------------------------------------------------------------- voice 2: her inner voice */
#think { position: absolute; top: calc(var(--safe-t) + 66px); left: 16px; max-width: min(74%, 300px); z-index: 8; pointer-events: none; display: grid; gap: 5px; justify-items: start; }
#think .tl { font: 700 15px/1.3 var(--type); color: #ffd1e6; background: rgba(21, 8, 26, .66); padding: 4px 8px 3px; border-left: 3px solid var(--hot); letter-spacing: .01em; text-shadow: 0 0 10px rgba(255,46,147,.55); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
#think .tl i { display: inline-block; width: .55em; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: var(--hot); animation: caret .8s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }
#think.out { opacity: 0; transition: opacity .2s; }

/* ---------------------------------------------------------------- a small in-world tag */
#label { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 16%); z-index: 7; transform: translateX(-50%) rotate(-3deg); pointer-events: none; opacity: 0; transition: opacity .3s; }
#label.on { opacity: 1; }
#label span { display: inline-block; font: 700 13px/1 var(--type); letter-spacing: .16em; color: #2a1a10; background: #fff4dc; padding: 7px 12px 6px; border-radius: 3px; box-shadow: 0 0 0 1.5px #c41f33, 0 6px 14px rgba(0,0,0,.35); }

/* ---------------------------------------------------------------- the show's lettering: chrome, stretched, candy outline */
#show { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
#show .g { position: absolute; left: 14px; right: 14px; display: grid; justify-items: center; gap: 2px; }
#show .g.top { top: calc(var(--safe-t) + 12%); }
#show .g.mid { top: 34%; }
#show .g.low { bottom: calc(var(--safe-b) + 14%); }
#show .ln { position: relative; display: grid; width: 100%; justify-items: center; line-height: .84; white-space: nowrap; margin-bottom: .1em; }
#show .ln > span { grid-area: 1 / 1; position: relative; font-family: var(--show); font-weight: 900; text-transform: uppercase; transform: scaleY(var(--sy, 1.3)); transform-origin: 50% 60%; }
#show .ln .o { color: var(--ink); -webkit-text-stroke: .16em var(--ink); filter: drop-shadow(0 .06em 0 var(--cobalt)); }
#show .ln .m { color: transparent; -webkit-text-stroke: .075em var(--hot); }
#show .ln .c { background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
#show .g.host .ln .m { -webkit-text-stroke-color: var(--yellow); }
#show .g.host .ln .o { filter: drop-shadow(0 .06em 0 var(--hot)); }
#show .ln i.eq { font-style: normal; display: inline-block; transform: scaleX(1.9); margin: 0 .2em; }
#show .sub { margin-top: 10px; font: 900 12px/1 var(--show); font-stretch: 100%; letter-spacing: .2em; color: #fff; background: var(--hot); padding: 6px 10px 5px; border-radius: 3px; transform: rotate(-2deg); box-shadow: 3px 3px 0 var(--ink); }
#show .who.tag { background: var(--hot); color: #fff; font: 900 13px/1 var(--show); letter-spacing: .22em; padding: 6px 10px 5px; box-shadow: 3px 3px 0 var(--ink); }
#show .who { margin-bottom: 8px; font: 900 12px/1 var(--say); letter-spacing: .1em; padding: 5px 9px 4px; border-radius: 5px; background: var(--yellow); color: var(--ink); transform: rotate(-3deg); }
/* the game coming in (a slow line, before the race): a thin bar under GAME 1 · STARTS IN 5 */
#show .ow-wait { display: block; width: 58%; height: 5px; margin-top: 12px; border-radius: 3px; background: rgba(255, 255, 255, .22); box-shadow: 2px 2px 0 var(--ink); overflow: hidden; }
#show .ow-wait > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--hot), #fff); transition: width .25s linear; }
#show .g.slam { animation: slam .13s cubic-bezier(.2,.8,.3,1) both, shake .22s linear .13s; }
#show .g.leave { animation: leave .22s cubic-bezier(.6,0,.8,.3) forwards; }
@keyframes slam { from { transform: scale(1.4); opacity: 0; } 40% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
@keyframes shake { 0%, 100% { translate: 0 0; } 20% { translate: -5px 3px; } 40% { translate: 4px -3px; } 60% { translate: -3px -2px; } 80% { translate: 2px 2px; } }
@keyframes leave { to { transform: scale(.94) translateY(-8px); opacity: 0; filter: blur(3px); } }

/* ---------------------------------------------------------------- shake, shots fired, the plush line */
#app.shake #film { animation: fshake .3s linear; }
@keyframes fshake { 0%, 100% { translate: 0 0; } 15% { translate: -9px 5px; } 30% { translate: 8px -6px; } 45% { translate: -6px -3px; } 60% { translate: 5px 4px; } 80% { translate: -2px 1px; } }
#border { position: absolute; inset: 0; z-index: 11; pointer-events: none; opacity: 0; box-shadow: inset 0 0 0 4px var(--hot), inset 0 0 38px 8px rgba(255, 46, 147, .75); }
#border.edge { animation: edge .42s ease-out; }
@keyframes edge { 0% { opacity: 1; } 100% { opacity: 0; } }
#border.beat { animation: beat var(--hb, .78s) ease-out infinite; }
@keyframes beat { 0% { opacity: .2; } 10% { opacity: 1; } 22% { opacity: .35; } 32% { opacity: .9; } 60%, 100% { opacity: .12; } }

/* ---------------------------------------------------------------- the vault */
#vault { position: absolute; top: calc(var(--safe-t) + 12px); left: 12px; z-index: 12; display: flex; align-items: center; gap: 6px; padding: 5px 9px 5px 5px; border: 0; border-radius: 999px; background: rgba(12, 8, 18, .66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); opacity: 0; transform: translateX(-20px); transition: opacity .35s, transform .45s cubic-bezier(.2,1.4,.4,1); pointer-events: none; }
#vault.on { opacity: 1; transform: none; }
#vault .ic { position: relative; width: 26px; height: 26px; border-radius: 50%; background: conic-gradient(from 200deg, #00e5ff, #6a3cff, #ff2bd6, #ffcf3a, #3cffb5, #00e5ff); box-shadow: inset 0 0 0 2px rgba(255,255,255,.85); display: grid; place-items: center; }
#vault .ic i { width: 12px; height: 15px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 1.5px var(--ink); transform: rotate(-8deg); }
#vault b { font: 900 15px/1 var(--show); font-stretch: 80%; color: #fff; min-width: 9px; }
#vault.bump .ic { animation: vbump .5s cubic-bezier(.3,1.8,.5,1); }
@keyframes vbump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }

/* ---------------------------------------------------------------- the title */
#title { position: absolute; inset: 0; z-index: 30; background: #050307; display: grid; place-content: center; justify-items: center; gap: 0; opacity: 0; visibility: hidden; transition: opacity .12s; overflow: hidden; }
#title.on { opacity: 1; visibility: visible; }
#title .t-glow { position: absolute; inset: -20%; background: radial-gradient(40% 32% at 50% 48%, rgba(255, 46, 147, .5), transparent 70%); opacity: 0; }
#title.beat .t-glow { animation: tglow .5s ease-out; }
@keyframes tglow { 0% { opacity: 1; transform: scale(1.06); } 100% { opacity: .25; transform: none; } }
#title .t-word { position: relative; display: grid; font: 900 30vw/.8 var(--logo); letter-spacing: -.045em; opacity: 0; margin: .12em 0; }
#title .t-word > span { grid-area: 1 / 1; position: relative; transform: scaleY(1.38); white-space: nowrap; }
#title .t-word .o { color: transparent; -webkit-text-stroke: .05em var(--hot); filter: drop-shadow(0 .03em 0 var(--cobalt)); }
#title .t-word .c { background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
#title .t-word.in { animation: tslam .14s cubic-bezier(.2,.8,.3,1.1) forwards, shake .24s linear .14s; }
@keyframes tslam { from { transform: scale(1.5); opacity: 0; } to { transform: none; opacity: 1; } }
#title .t-ep { margin-top: 5vw; font: 900 13px/1 var(--show); font-stretch: 110%; letter-spacing: .32em; color: #fff; opacity: 0; transition: opacity .4s; }
#title .t-ep.in { opacity: .9; }

/* ---------------------------------------------------------------- Tap! Tap! */
#tap { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 3.2%); z-index: 50; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; pointer-events: none; opacity: 0; transition: opacity .3s; font: 900 16px/1 var(--say); color: #fff; letter-spacing: .02em; }
#tap.on { opacity: 1; }
#tap span { display: inline-block; padding: 6px 11px 5px; border-radius: 999px; background: var(--hot); box-shadow: 0 3px 0 var(--ink); animation: tapb 1s ease-in-out infinite; }
#tap span + span { background: var(--cobalt); animation-delay: .5s; }
#tap .snd { width: 22px; height: 22px; display: none; }
#tap.mute .snd { display: block; }
@keyframes tapb { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(4deg); } }

/* ---------------------------------------------------------------- the end card */
#end { position: absolute; inset: 0; z-index: 40; display: none; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; background: radial-gradient(90% 60% at 50% 18%, #2b1240 0%, #12081d 55%, #07060a 100%); padding: calc(var(--safe-t) + 34px) 16px calc(var(--safe-b) + 28px); }
#end.on { display: block; animation: endin .6s ease-out; }
@keyframes endin { from { opacity: 0; } to { opacity: 1; } }
#end .e-wrap { max-width: 420px; margin: 0 auto; display: grid; gap: 20px; justify-items: center; text-align: center; }
#end .e-logo { font: 900 13px/1 var(--logo); letter-spacing: .3em; background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
#end .e-big { display: grid; width: 100%; justify-items: center; }
/* EPISODE 2 / DARUMA FALLS: the show's readable lettering (26 Oct), both lines at one size (player.js endCard) */
#end .e-big .ln { position: relative; display: grid; width: 100%; justify-items: center; text-align: center; line-height: .94; white-space: nowrap; text-wrap-style: balance; margin-bottom: .04em; }
#end .e-big .ln > span { grid-area: 1 / 1; position: relative; font-family: var(--show); font-weight: 900; font-stretch: 100%; letter-spacing: .02em; }
#end .e-big .o { color: var(--ink); -webkit-text-stroke: .15em var(--ink); filter: drop-shadow(0 .075em 0 var(--hot)); }
#end .e-big .m { display: none; }
#end .e-big .c { color: #fff; }
#end .e-kick { font: 700 12px/1 var(--type); letter-spacing: .3em; color: #ffd1e6; margin-bottom: -10px; }
/* the vault as a hand of cards, fanned */
#end .e-vault { position: relative; width: 100%; height: min(78vw, 330px); }
#end .e-vault .e-slot { position: absolute; top: 6%; width: 36%; left: 32%; transform-origin: 50% 120%; transition: transform .7s cubic-bezier(.2,1.2,.4,1); }
#end .e-vault .e-slot:nth-child(1) { transform: translateX(-54%) rotate(-12deg); z-index: 1; }
#end .e-vault .e-slot:nth-child(2) { transform: translateX(-21%) rotate(-5deg); z-index: 2; }
#end .e-vault .e-slot:nth-child(3) { transform: translateX(21%) rotate(5deg); z-index: 3; }
#end .e-vault .e-slot:nth-child(4) { transform: translateX(54%) rotate(11deg); z-index: 4; }
#end.on .e-vault .e-slot { animation: dealin .7s cubic-bezier(.2,1.2,.4,1) both; }
#end.on .e-vault .e-slot:nth-child(2) { animation-delay: .08s; } #end.on .e-vault .e-slot:nth-child(3) { animation-delay: .16s; } #end.on .e-vault .e-slot:nth-child(4) { animation-delay: .24s; }
@keyframes dealin { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
#end .e-vault .e-case .e-tag { position: absolute; left: -2%; right: -2%; top: 52%; z-index: 7; display: grid; justify-items: center; gap: 3px; padding: 6px 4px 5px; border-radius: 4px; background: var(--ink); color: #fff; font: 900 10.5px/1 var(--show); font-stretch: 85%; letter-spacing: .08em; transform: rotate(-6deg); box-shadow: 3px 3px 0 var(--hot), 0 6px 14px rgba(0,0,0,.4); text-align: center; }
#end .e-vault .e-case .e-tag i { font-style: normal; font-size: 9px; letter-spacing: .2em; color: var(--yellow); }
#end .e-vault .card { --w: 100%; }
#end .e-vault .slab { --sw: 100%; }
#end .e-slot { display: grid; gap: 6px; justify-items: center; }
#end .e-slot .cap { font: 700 10px/1.3 var(--type); letter-spacing: .08em; color: #c9bdd6; }
#end .e-secret { width: 100%; aspect-ratio: 63 / 88; border-radius: 9px; background: var(--chrome); display: grid; place-items: center; box-shadow: 0 8px 20px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.7); position: relative; overflow: hidden; }
#end .e-secret::before { content: ""; position: absolute; inset: 14% 22% 10%; background: #1b1d22; opacity: .85; -webkit-mask: radial-gradient(circle at 50% 22%, #000 22%, transparent 23%), radial-gradient(ellipse 50% 46% at 50% 90%, #000 99%, transparent 100%); mask: radial-gradient(circle at 50% 22%, #000 22%, transparent 23%), radial-gradient(ellipse 50% 46% at 50% 90%, #000 99%, transparent 100%); }
#end .e-secret::after { content: ""; position: absolute; top: 4%; left: 38%; width: 10%; height: 18%; background: #1b1d22; opacity: .85; border-radius: 50%; box-shadow: 13px 0 0 #1b1d22; transform: rotate(-6deg); }
#end .e-secret b { position: relative; z-index: 1; font: 900 15px/1 var(--show); font-stretch: 90%; letter-spacing: .06em; color: #fff; background: var(--ink); padding: 5px 8px 4px; border-radius: 3px; transform: rotate(-6deg); }
#end .e-empty { width: 100%; aspect-ratio: 63 / 88; border-radius: 9px; border: 2px dashed rgba(255,255,255,.22); }
/* (the keys copy: Day 1's email form and its #end input/button rules are gone; they styled the keep block's own form) */

@media (prefers-reduced-motion: reduce) {
  .grain, #title.beat .t-glow, #border.beat { animation: none; }
}

/* ================================================================ Day 1, rebuilt: the dome's counter (day, players, her coins) */
#bug .b3 { display: none; align-items: center; gap: 5px; padding: 3px 7px 3px 4px; border-radius: 6px; background: rgba(12, 8, 18, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(184, 242, 58, .55); color: #fff; font: 900 10px/1 var(--show); font-stretch: 90%; letter-spacing: .12em; }
#bug .b3.on { display: flex; }
#bug .b3 b { font: 900 17px/1 var(--show); font-stretch: 72%; color: var(--lime); letter-spacing: 0; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
#bug .b3 small { font: 800 10px/1 var(--show); font-stretch: 80%; color: rgba(255,255,255,.6); letter-spacing: 0; margin-left: -3px; }
#bug .b3 .cap { position: relative; width: 13px; height: 16px; border-radius: 50% 50% 46% 46%; background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,255,255,.25) 45%, rgba(255,95,168,.5)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8); }
#bug .b3 .cap i { position: absolute; left: 3px; right: 3px; top: 6px; height: 5px; border-radius: 1px; background: var(--hot); box-shadow: 0 0 6px var(--hot); }
#bug .b3.up { animation: coinup .7s cubic-bezier(.3,1.8,.5,1); }
#bug .b3.down { animation: coindown .5s ease-out; }
@keyframes coinup { 0% { transform: scale(1); } 30% { transform: scale(1.28); box-shadow: inset 0 0 0 2px var(--lime), 0 0 18px rgba(184,242,58,.7); } 100% { transform: scale(1); } }
@keyframes coindown { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
#bug .b1 .tc { color: #fff; font-weight: 900; letter-spacing: .14em; }

/* ---- the cards on screen: the rules, the game card, the count (over the film, dimmed) */
#sheet { position: absolute; inset: 0; z-index: 25; display: none; flex-direction: column; justify-content: center; gap: 18px; padding: calc(var(--safe-t) + 56px) 24px calc(var(--safe-b) + 64px); pointer-events: none; }
#sheet.on { display: flex; animation: shin .32s cubic-bezier(.2,1.2,.4,1); }
#sheet.out { animation: shout .26s ease-in forwards; }
@keyframes shin { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes shout { to { opacity: 0; transform: scale(.97); } }
#sheet > * { width: 100%; max-width: 420px; margin: 0 auto; }
#sheet .sh-head { display: grid; justify-items: start; }
#sheet .sh-head .ln { position: relative; display: grid; line-height: .86; white-space: nowrap; margin-bottom: .1em; }
#sheet .sh-head .ln > span { grid-area: 1 / 1; font-family: var(--show); font-weight: 900; transform: scaleY(1.3); transform-origin: 0 100%; }
#sheet .sh-head .o { color: transparent; -webkit-text-stroke: .1em var(--hot); filter: drop-shadow(0 .05em 0 var(--cobalt)); }
#sheet .sh-head .c { background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
#sheet .sh-head .sub { margin-top: 12px; font: 700 11px/1 var(--type); letter-spacing: .3em; color: #ffd1e6; }
#sheet .sh-list { display: grid; gap: 10px; }
#sheet .row { display: grid; grid-template-columns: 38px 1fr; align-items: start; gap: 12px; padding: 12px 14px 12px 12px; border-radius: 14px; background: rgba(12, 8, 18, .62); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .45s cubic-bezier(.2,1.4,.4,1); }
#sheet .row.in { opacity: 1; transform: none; }
#sheet .row b { display: grid; place-items: center; height: 30px; border-radius: 8px; background: var(--red); color: #fff; font: 900 18px/1 var(--show); font-stretch: 80%; box-shadow: 0 2px 0 rgba(0,0,0,.35); }
#sheet .row span { font: 900 19px/1.22 var(--say); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.4); padding-top: 3px; }
#sheet .keyed .row { grid-template-columns: 64px 1fr; }
#sheet .keyed .row b { font-size: 12px; letter-spacing: .1em; font-stretch: 100%; background: var(--yellow); color: var(--ink); }
#sheet .keyed .row:nth-child(2) b { background: var(--lime); }
#sheet .keyed .row:nth-child(3) b { background: var(--pink); color: #fff; }
#sheet .keyed .row:nth-child(4) b { background: var(--cobalt); color: #fff; }
#sheet .keyed .row:nth-child(5) b { background: #fff; }
#sheet.game .row:nth-child(3) b { background: var(--red); color: #fff; }
#sheet .row .cn { font-style: normal; color: var(--lime); font-size: 1.3em; font-variant-numeric: tabular-nums; }
#sheet .sh-small { font: 700 12px/1.35 var(--type); letter-spacing: .04em; color: #ffd1e6; opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s; padding-left: 6px; }
#sheet .sh-small.in { opacity: .92; transform: none; }
#sheet.count .sh-head .o { -webkit-text-stroke-color: var(--lime); }
/* the plush's tag sits above the spoken line (they share a shot: e02, r05) */
#label { bottom: calc(var(--safe-b) + 31%); }

/* the character card over the moving picture (2026-10-24, "it should just be videos"): no frozen frame, no cut-out */
.ccard.live .cc-bg, .ccard.live .cc-cut { display: none; }
.ccard.live .cc-wash { mix-blend-mode: multiply; }
.ccard.live.on .cc-wash { animation: washlive .2s ease-out forwards; }
@keyframes washlive { to { opacity: .35; } }
.ccard.live .cc-num { display: none; } /* the big number needs the frozen cut-out to sit behind the face; over a moving picture only the name strip */
.vids video.tail { animation: none; }

/* the 3D tear-open pack's frame (projects/one-wish-pack), full screen over the card layer; the page's card takes over */
#cardlayer .packframe { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; z-index: 5; background: transparent; pointer-events: auto; transition: opacity .4s ease; touch-action: none; }
#cardlayer .packframe.gone { opacity: 0; pointer-events: none; }
#cardlayer .card.handed { transition: none; }

/* the card inventory (projects/one-wish-inventory) over everything, opened from #vault */
.invframe { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; z-index: 60; background: #07060a; touch-action: none; }

/* ================================================================ Stan's board notes (2026-10-24) */
/* Mimi's clock under the dome counter, and on her tag */
#bug .b4 { display: none; padding: 3px 7px; border-radius: 6px; background: rgba(12, 8, 18, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #ffd1e6; font: 800 9px/1 var(--show); letter-spacing: .12em; }
/* #bug.on .b4 (MIMI SHIPS IN on the counter): off since 24 Oct evening, Stan asked to get rid of it */
#bug .b4 b { font: 900 11px/1 var(--show); font-stretch: 80%; color: #fff; letter-spacing: .02em; font-variant-numeric: tabular-nums; margin-left: 4px; }
#label .clk { font: inherit; color: #c41f33; font-variant-numeric: tabular-nums; }
/* coins you can feel: +10 / −3 beside the counter */
#bug .b3 { position: relative; }
#bug .cpop { position: absolute; right: calc(100% + 6px); top: 50%; font: 900 16px/1 var(--show); font-stretch: 80%; pointer-events: none; animation: cpop 1.2s cubic-bezier(.2,1,.3,1) forwards; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
#bug .cpop.up { color: var(--lime); }
#bug .cpop.down { color: #ff6b6b; }
@keyframes cpop { 0% { opacity: 0; transform: translate(6px, -50%) scale(.6); } 15% { opacity: 1; transform: translate(0, -50%) scale(1.25); } 70% { opacity: 1; transform: translate(-4px, -90%) scale(1); } 100% { opacity: 0; transform: translate(-6px, -140%) scale(.95); } }
/* the big screen still lists Mimi, for a blink */
.glitchtag { position: absolute; left: 6%; right: 6%; top: calc(var(--safe-t) + 9%); z-index: 9; text-align: center; font: 900 22px/1.1 var(--show); font-stretch: 85%; letter-spacing: .06em; color: #fff; text-shadow: 3px 0 #ff2e3b, -3px 0 #2c5cff; background: rgba(255, 95, 168, .35); padding: 8px 6px; pointer-events: none; }
/* the rules in one tap */
#sheet .sh-big { display: grid; gap: 8px; }
#sheet .sh-big .sbl { font: 900 30px/1 var(--show); font-stretch: 95%; letter-spacing: .01em; color: #fff; padding: 12px 14px; border-radius: 12px; background: rgba(12, 8, 18, .7); box-shadow: inset 0 0 0 1.5px rgba(255, 46, 59, .8); }
#sheet .sh-big .sbl:nth-child(2) { box-shadow: inset 0 0 0 1.5px rgba(184, 242, 58, .8); }
#sheet .sh-two { font: 800 15px/1.35 var(--say); color: rgba(255,255,255,.85); padding-left: 4px; }
/* TAP TAP TAP to save Momo */
.tapsave { position: absolute; left: 50%; top: 42%; z-index: 26; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; pointer-events: none; }
.tapsave b { font: 900 46px/1 var(--show); font-stretch: 90%; color: #fff; -webkit-text-stroke: 2px var(--hot); text-shadow: 0 4px 0 var(--ink); animation: tappulse .35s ease-in-out infinite alternate; white-space: nowrap; }
.tapsave span { font: 900 14px/1 var(--show); letter-spacing: .2em; color: var(--yellow); text-shadow: 0 2px 0 var(--ink); }
.tapsave i { width: 220px; height: 14px; border-radius: 999px; background: rgba(12, 8, 18, .7); box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); overflow: hidden; }
.tapsave em { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--hot), var(--yellow)); transition: width .08s; }
.tapsave.full em { background: var(--lime); }
.tapsave.done b { animation: none; font-size: 40px; }
@keyframes tappulse { from { transform: scale(1); } to { transform: scale(1.08); } }
/* what the band above the race shows */
/* the lap test (player.js lapHold): the game's lap bar held over the film's mid beat, the race paused at its middle */
.owlap { position: absolute; left: 0; right: 0; top: 0; z-index: 25; height: calc(var(--safe-t) + 92px); pointer-events: none; opacity: 0; transform: translateY(-14px); transition: opacity .3s, transform .3s; background: linear-gradient(180deg, rgba(12, 8, 18, .62), rgba(12, 8, 18, .38) 62%, rgba(12, 8, 18, 0)); font: 900 11px/1 var(--show); letter-spacing: .16em; color: #fff; text-shadow: 0 1px 0 var(--ink), 0 0 4px var(--ink); }
.owlap.on { opacity: 1; transform: none; }
.owlap-w { position: absolute; left: 18px; top: calc(var(--safe-t) + 14px); color: var(--yellow); }
.owlap-n { position: absolute; left: 50%; top: calc(var(--safe-t) + 9px); transform: translateX(-50%); font-size: 21px; letter-spacing: .02em; }
.owlap-l { position: absolute; right: 16px; top: calc(var(--safe-t) + 14px); }
.owlap-t { position: absolute; left: 18px; right: 40px; top: calc(var(--safe-t) + 46px); height: 13px; border-radius: 7px; background: linear-gradient(180deg, #fff, #c9d3ff 50%, #8794d8); box-shadow: 0 0 0 2.5px var(--ink), 0 3px 8px rgba(0, 0, 0, .35); }
.owlap-t i { position: absolute; left: 2px; top: 2px; bottom: 2px; width: calc((100% - 4px) * var(--p, .5)); border-radius: 5px; background: linear-gradient(90deg, #ff4fa3, #ffd21a); box-shadow: 0 0 8px rgba(255, 79, 163, .8); }
.owlap-t s { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2.5px; margin-left: -1px; border-radius: 2px; background: var(--ink); opacity: .55; }
.owlap-t em { position: absolute; top: 50%; left: calc(var(--p, .5) * 100%); width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2.5px var(--ink), 0 0 12px rgba(255, 79, 163, .9); font: 900 9.5px/30px var(--logo); letter-spacing: 0; text-align: center; color: #e8174f; text-shadow: none; font-style: normal; animation: owlapbeat .9s ease-in-out infinite; }
@keyframes owlapbeat { 50% { box-shadow: 0 0 0 2.5px var(--ink), 0 0 20px #ff4fa3, 0 0 34px rgba(255, 210, 26, .6); } }
.owlap-f { position: absolute; right: 16px; top: calc(var(--safe-t) + 31px); width: 26px; height: 36px; }
.owlap-f::before { content: ""; position: absolute; left: 1px; top: 0; bottom: 0; width: 3.5px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 1.5px var(--ink); }
.owlap-f::after { content: ""; position: absolute; left: 4px; top: 1px; width: 22px; height: 16px; border-radius: 1px 3px 3px 1px; background: conic-gradient(#14101a 25%, #fff 0 50%, #14101a 0 75%, #fff 0) 0 0 / 7.4px 8px; box-shadow: 0 0 0 1.5px var(--ink), 0 0 10px rgba(255, 255, 255, .7); transform-origin: left center; animation: owlapwave 1.1s ease-in-out infinite alternate; }
@keyframes owlapwave { from { transform: skewY(-5deg) scaleX(.94); } to { transform: skewY(4deg) scaleX(1); } }
.bandtag { position: absolute; left: 12px; top: calc(var(--safe-t) + 12px); z-index: 7; font: 900 11px/1 var(--show); letter-spacing: .12em; color: #fff; background: rgba(12, 8, 18, .72); padding: 6px 9px; border-radius: 6px; pointer-events: none; }
/* the end card: episode 2's countdown, the ten episodes, Mimi's clock */
#end .e-next { margin-top: 0; font: 700 12px/1 var(--type); letter-spacing: .2em; color: #ffd1e6; text-transform: uppercase; }
#end .e-next b { color: #fff; font-variant-numeric: tabular-nums; }
/* episode 2 is out (28 Oct): the line under the title, and the button a member gets under the email box */
#end .e-now { font: 800 12px/1 var(--type); letter-spacing: .24em; color: #fff; text-transform: uppercase; padding: 6px 10px 5px; border-radius: 6px; background: var(--hot); }
#end .e-ep2 { display: grid; gap: 7px; justify-items: center; width: 100%; max-width: 360px; box-sizing: border-box; padding: 16px 16px 14px; border-radius: 14px; background: var(--hot); color: #fff; text-decoration: none; box-shadow: 0 0 28px rgba(255, 45, 143, .45); -webkit-tap-highlight-color: transparent; }
#end .e-ep2 b { font: 800 15px/1 var(--type); letter-spacing: .2em; }
#end .e-ep2 span { font: 700 10px/1 var(--type); letter-spacing: .2em; color: #ffe3f0; }
#end .e-ep2:active { filter: brightness(.9); }
#end .e-days { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 360px; }
#end .e-days span { font: 900 10px/1 var(--show); letter-spacing: .08em; padding: 5px 7px; border-radius: 5px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.45); }
#end .e-days span.done { background: var(--lime); color: var(--ink); }
#end .e-days span.next { background: var(--hot); color: #fff; }
#end .e-clock { font: 800 11px/1 var(--show); letter-spacing: .16em; color: #ffd1e6; }
#end .e-clock b { color: #fff; font-variant-numeric: tabular-nums; margin-left: 4px; }
/* the character card's way out: the number leaves the way it came in, backwards (slamnum played in reverse, its
   curve mirrored). Stan: "they should disappear the same way they appear in the opposite direction" (the zoom and
   blur before was "not cool") */
.ccard.leave .cc-num { animation: numback .16s cubic-bezier(.7,-.2,.8,.1) forwards; }
@keyframes numback { from { transform: none; opacity: 1; } to { transform: scale(1.7) translateX(-10%); opacity: 0; } }
.ccard.leave .cc-cut, .ccard.leave .cc-bg { transition: opacity .35s ease-in !important; }
.ccard.leave .cc-wash { transition: opacity .4s ease-in !important; }

/* ================================================================ the keys copy (projects/one-wish-1/keys) */
/* the three cards of the pack, fanned, before they fly into the vault one after the other */
#cardlayer .kfan { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 4; pointer-events: none; }
#cardlayer .kfan .card { --w: min(30vw, 128px); margin: 0 calc(min(30vw, 128px) * -.12); opacity: 0; transform: translateY(30px) scale(.9); transition: opacity .4s, transform .6s cubic-bezier(.2,1.3,.4,1); filter: drop-shadow(0 16px 22px rgba(0,0,0,.55)); }
#cardlayer .kfan.on .card { opacity: 1; }
#cardlayer .kfan.on .card:nth-child(1) { transform: rotate(-9deg) translateY(12px); }
#cardlayer .kfan.on .card:nth-child(2) { transform: none; z-index: 2; transition-delay: .1s; }
#cardlayer .kfan.on .card:nth-child(3) { transform: rotate(9deg) translateY(12px); z-index: 3; transition-delay: .2s; }
#vault .vnote.kvnote { left: 0; top: 43px; transition: opacity .35s; } /* under the dial: beside it, it ran over the dome counter */
#vault .kvnote.out { opacity: 0; }
/* "keep your cards" in place of the end card's form */
#end .e-keep { width: 100%; }
#end .e-keep .ow-cards .card { --w: 100%; }

/* ================================================================ the end card: the email on the first screen (Stan:
   "i want the email to be in the same page or we will loose conversion, also the email textbox should be very visible") */
#end .e-wrap { gap: 14px; }
#end .e-vault { height: min(48vw, 196px); }
#end .e-vault .e-slot { top: 4%; width: 25%; left: 37.5%; }
#end .e-vault .e-slot:nth-child(1) { transform: translateX(-104%) rotate(-10deg); }
#end .e-vault .e-slot:nth-child(2) { transform: translateX(-36%) rotate(-4deg); }
#end .e-vault .e-slot:nth-child(3) { transform: translateX(36%) rotate(4deg); }
#end .e-vault .e-slot:nth-child(4) { transform: translateX(104%) rotate(10deg); }
#end .e-secret b { font-size: 11px; padding: 4px 6px 3px; }
#end .mk-keep { padding: 14px 16px 13px; gap: 8px; box-shadow: inset 0 0 0 1px rgba(255,95,168,.55), 0 0 34px rgba(255,46,147,.2); }
#end .mk-keep .mk-lead { font-size: 23px; }
#end .mk-keep .mk-field { height: 58px; margin-top: 4px; border: 0; border-radius: 14px; background: #fff; padding: 0 6px 0 16px; box-shadow: 0 0 0 3px var(--hot), 0 10px 28px rgba(255,46,147,.45); animation: keepglow 2.4s ease-in-out infinite; }
#end .mk-keep .mk-field input { color: #15101c; font: 600 17px/1 system-ui, -apple-system, sans-serif; }
#end .mk-keep .mk-field input::placeholder { color: #8b8296; }
#end .mk-keep .mk-field:focus-within { animation: none; box-shadow: 0 0 0 3px var(--hot), 0 0 0 7px rgba(255,46,147,.3); }
#end .mk-keep .mk-pill { height: 46px; padding: 0 20px; border-radius: 11px; font-size: 13px; letter-spacing: .18em; box-shadow: none; }
#end .mk-keep .mk-digits input { background: #fff; color: #15101c; box-shadow: 0 0 0 2px var(--hot); }
@keyframes keepglow { 0%, 100% { box-shadow: 0 0 0 3px var(--hot), 0 10px 28px rgba(255,46,147,.45); } 50% { box-shadow: 0 0 0 3px var(--hot), 0 0 0 9px rgba(255,46,147,.22), 0 10px 34px rgba(255,46,147,.6); } }


/* the fast start (enterspray.com/one-wish-fast/): under the email box, the rest of the story for whoever wants it */
#end .e-more { display: grid; gap: 6px; justify-items: center; width: 100%; max-width: 360px; margin-top: -4px; padding: 13px 16px 12px; border: 1.5px solid rgba(255, 255, 255, .55); border-radius: 12px; background: rgba(255, 255, 255, .04); color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#end .e-more b { font: 700 13px/1 var(--type); letter-spacing: .24em; }
#end .e-more span { font: 700 10px/1 var(--type); letter-spacing: .2em; color: #ffd1e6; }
#end .e-more:active { background: rgba(255, 255, 255, .12); }

/* ================================================================ the pack at once (26 Oct, "it should be instant with a congrats you can open
   your secret pack with rarity system"): its frame is made early and hidden, over the card layer once it shows; CONGRATS!
   and the six rarities over it, the show's lettering, never in the way of a finger */
#app > .packframe { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; z-index: 21; background: transparent; visibility: hidden; opacity: 0; pointer-events: none; touch-action: none; transition: opacity .12s ease-out; }
#app > .packframe.on { visibility: visible; opacity: 1; pointer-events: auto; }
#app > .packframe.gone { opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.pkhello { position: absolute; inset: 0; z-index: 22; pointer-events: none; }
/* (touch-action too: without it Chrome took a touch under the lettering as a pan, and the pack below could not cancel it) */
.pkhello, .pkhello * { touch-action: none; }
/* (26 Oct, Stan: "the congrats seems a bit too high, open your secret pack is unreadable fix it with a clear typo"): the
   show's readable lettering; CONGRATS! sits just above the pack (player.js hello() sets its top), not against the screen's top */
.pkhello .ph-top { position: absolute; left: 0; right: 0; top: calc(var(--safe-t) + 64px); display: grid; justify-items: center; }
.pkhello .ph-low { position: absolute; left: 0; right: 0; bottom: calc(var(--safe-b) + 11.5%); display: grid; justify-items: center; gap: 12px; }
.pkhello .ln { position: relative; display: grid; justify-items: center; max-width: calc(100% - 32px); text-align: center; line-height: .94; white-space: nowrap; text-wrap-style: balance; }
.pkhello .ln > span { grid-area: 1 / 1; position: relative; font-family: var(--show); font-weight: 900; font-stretch: 100%; letter-spacing: .02em; }
.pkhello .ln .o { color: var(--ink); -webkit-text-stroke: .15em var(--ink); filter: drop-shadow(0 .075em 0 var(--hot)) drop-shadow(0 .1em .18em rgba(0,0,0,.35)); }
.pkhello .ln .m { display: none; }
.pkhello .ln .c { color: #fff; }
.pkhello .ph-low .ln .o { -webkit-text-stroke-width: .17em; filter: drop-shadow(0 .09em 0 var(--yellow)) drop-shadow(0 .1em .18em rgba(0,0,0,.35)); } /* the host's invitation, as his lines (a touch more rim at its smaller size) */
.pkhello.on .ph-top { animation: slam .13s cubic-bezier(.2,.8,.3,1) both, shake .22s linear .13s; }
.pkhello.on .ph-low { animation: phin .32s cubic-bezier(.2,1.4,.4,1) .4s both; } /* as the pack lands */
@keyframes phin { from { opacity: 0; transform: translateY(14px) scale(.92); } to { opacity: 1; transform: none; } }
/* the odds: one small line of six, rarest last */
.pkhello .ph-odds { display: flex; gap: 4px; justify-content: center; width: min(100% - 24px, 380px); }
.pkhello .ph-odds span { flex: 1 1 0; min-width: 0; display: grid; justify-items: center; gap: 4px; padding: 6px 2px 5px; border-radius: 7px; background: rgba(12, 8, 18, .74); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); animation: phchip .3s cubic-bezier(.2,1.5,.4,1) both; animation-delay: calc(.55s + var(--i) * 55ms); }
.pkhello .ph-odds b { font: 900 14px/1 var(--show); font-stretch: 78%; letter-spacing: .03em; color: #fff; }
.pkhello .ph-odds i { font: 700 10px/1 var(--type); font-style: normal; letter-spacing: .02em; color: rgba(255,255,255,.86); white-space: nowrap; }
.pkhello .ph-N b { color: #e9e3d6; } .pkhello .ph-R b { color: #7fa6ff; } .pkhello .ph-SR b { color: #c49bff; }
.pkhello .ph-SSR b { color: #ffd34d; } .pkhello .ph-UR b { color: #ff5a6e; }
.pkhello .ph-SECRET b { background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pkhello .ph-SSR { box-shadow: inset 0 0 0 1px rgba(255,211,77,.7), 0 0 12px rgba(255,211,77,.3); }
.pkhello .ph-UR { box-shadow: inset 0 0 0 1px rgba(255,90,110,.7), 0 0 12px rgba(255,90,110,.3); }
.pkhello .ph-SECRET { box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), 0 0 14px rgba(255,255,255,.3); }
@keyframes phchip { from { opacity: 0; transform: translateY(8px) scale(.8); } to { opacity: 1; transform: none; } }
.pkhello.leave .ph-top { animation: leave .22s cubic-bezier(.6,0,.8,.3) forwards; }
.pkhello.leave .ph-low { animation: leave .3s cubic-bezier(.6,0,.8,.3) forwards; }

/* ---------------------------------------------------------------- outside the story: the phone's own face
   (27 Oct, Stan: "the rule lettering without chrome in the series is ugly, it was just for the outside the series that i
   didn't wanted chrome … for the series inside you can keep it … a nicer typo more system like"). The pack's CONGRATS! and
   its invitation, the end card's EPISODE 2 / title: San Francisco on an iPhone, Roboto on Android; white, no outline, no
   stretch; the big words tight, the small ones spaced like a label. The show's own lettering above keeps its chrome. */
.pkhello .ln > span, #end .e-big .ln > span { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: 800; font-stretch: 100%; transform: none; }
.pkhello .ln .o, .pkhello .ln .m, #end .e-big .o, #end .e-big .m { display: none; }
.pkhello .ln .c, #end .e-big .c { color: #fff; -webkit-text-fill-color: #fff; background: none; }
.pkhello .ph-top .ln > span { letter-spacing: -.025em; }
.pkhello .ph-top .ln .c { text-shadow: 0 2px 26px rgba(255,46,147,.6), 0 1px 3px rgba(0,0,0,.45); }
.pkhello .ph-low .ln > span { font-weight: 700; letter-spacing: .08em; }
.pkhello .ph-low .ln .c { color: rgba(255,255,255,.94); -webkit-text-fill-color: rgba(255,255,255,.94); text-shadow: 0 1px 12px rgba(0,0,0,.65); }
#end .e-big .ln { line-height: 1.02; }
#end .e-big .ln > span { letter-spacing: -.025em; }
#end .e-big .ln:first-child { margin-bottom: 6px; }
#end .e-big .ln:first-child > span { font-weight: 700; letter-spacing: .24em; }
#end .e-big .ln:first-child .c { color: #ff5fae; -webkit-text-fill-color: #ff5fae; }
#end .e-big .ln + .ln .c { text-shadow: 0 2px 30px rgba(255,46,147,.4); }

/* "Be in episode 3" (31 Oct test): Zoé's selfie → her player card, the line, STAR IN IT, the price; a link to /create/one-wish/.
   Quieter than the pink buttons (the email and episode 2 stay first), the phone's own type like the question below it. */
#end .e-be3 { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 5px; align-items: center; width: 100%; max-width: 420px; box-sizing: border-box; padding: 14px 14px 13px; border-radius: 14px; border: 1.5px solid var(--hot); background: linear-gradient(135deg, rgba(255,46,147,.2), rgba(255,46,147,.05)); color: #fff; text-decoration: none; text-align: left; -webkit-tap-highlight-color: transparent; }
#end .e-be3 .pics { grid-row: 1 / span 4; display: flex; align-items: center; gap: 3px; }
#end .e-be3 .pics img { display: block; width: 46px; height: 61px; object-fit: cover; border-radius: 7px; background: #2b1240; }
#end .e-be3 .pics img + i + img { box-shadow: 0 0 0 1.5px #ffd76a, 0 4px 14px rgba(255,46,147,.45); }
#end .e-be3 .pics i { font-style: normal; font: 700 12px/1 var(--type); color: #ffd1e6; }
#end .e-be3 b { font: 800 15px/1.1 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; letter-spacing: .14em; color: #fff; }
#end .e-be3 .say { font: 500 13px/1.32 system-ui, -apple-system, "Segoe UI", sans-serif; color: #ffe3f0; }
#end .e-be3 em { justify-self: start; margin-top: 3px; padding: 8px 13px 7px; border-radius: 999px; background: var(--hot); font: 700 11px/1 var(--type); font-style: normal; letter-spacing: .2em; color: #fff; }
#end .e-be3 small { font: 600 10px/1.2 var(--type); letter-spacing: .06em; color: rgba(255,255,255,.55); }
#end .e-be3:active { filter: brightness(.92); }