/* SPRAY keys: the card moments an episode shows (the key, keep your cards, the code, give). Every class starts with
   mk- so nothing here touches the episode's own cards, words or end card. The club's voice: small, quiet, black. */
.mk { --mk-hot: #ff2e93; --mk-pink: #ff5fa8; --mk-gold: #ffd34d; --mk-green: #8dffc1;
  --mk-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --mk-serif: "Instrument Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mk-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  color: #fff; font-family: var(--mk-serif); -webkit-font-smoothing: antialiased; }
.mk * { box-sizing: border-box; }
.mk-mono { font: 500 10px/1.5 var(--mk-mono); letter-spacing: .32em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.mk-lead { margin: 0; font: italic 400 21px/1.25 var(--mk-serif); color: #fff; }
.mk-sub { margin: 0; font: 400 13.5px/1.45 var(--mk-serif); color: rgba(255,255,255,.68); }
.mk-tiny { margin: 0; font: 400 10px/1.6 var(--mk-mono); letter-spacing: .12em; color: rgba(255,255,255,.48); }
.mk-err { margin: 0; min-height: 1.4em; font: 400 12px/1.4 var(--mk-mono); letter-spacing: .06em; color: #ff8fbf; }

/* the key: the black back of every card */
.mk-kb { --kw: 300px; container-type: inline-size; width: var(--kw); aspect-ratio: 63 / 88; position: relative; flex: none; border-radius: calc(var(--kw) * .046); overflow: hidden;
  background: radial-gradient(120% 80% at 30% 15%, #26232d 0%, #0c0b10 58%, #050407 100%);
  box-shadow: inset 0 0 0 calc(var(--kw) * .008) rgba(255,46,147,.95), inset 0 0 0 calc(var(--kw) * .015) rgba(0,0,0,.6), 0 calc(var(--kw) * .03) calc(var(--kw) * .08) rgba(0,0,0,.55); }
.mk-kb::before { content: ""; position: absolute; inset: 0; background: var(--mk-noise); opacity: .9; mix-blend-mode: screen; }
.mk-kb > * { position: absolute; z-index: 1; }
.mk-kb .mk-kb-top { left: 9.5cqw; right: 9.5cqw; top: 8.5cqw; display: flex; justify-content: space-between; font: 700 2.9cqw/1 var(--mk-mono); letter-spacing: .4em; color: rgba(255,255,255,.62); }
.mk-kb svg { left: 50%; top: 22cqw; width: 44cqw; transform: translateX(-50%); filter: drop-shadow(0 0 4cqw rgba(255,211,77,.25)); }
.mk-kb .mk-kb-say { left: 6cqw; right: 6cqw; top: 76cqw; text-align: center; display: grid; gap: 1.6cqw; }
.mk-kb .mk-kb-say i { font: italic 400 6.8cqw/1.1 var(--mk-serif); color: rgba(255,255,255,.92); }
.mk-kb .mk-kb-say i + i { color: rgba(255,255,255,.55); }
.mk-kb .mk-kb-rows { left: 9.5cqw; right: 9.5cqw; bottom: 9cqw; display: grid; gap: 2.8cqw; padding-top: 3.6cqw; border-top: .45cqw solid rgba(255,211,77,.6); }
.mk-kb .mk-kb-rows div { display: flex; justify-content: space-between; align-items: baseline; font: 700 2.9cqw/1 var(--mk-mono); letter-spacing: .3em; color: rgba(255,255,255,.5); }
.mk-kb .mk-kb-rows b { font: 700 3.5cqw/1 var(--mk-mono); letter-spacing: .14em; color: #fff; }
.mk-kb .mk-kb-rows b.g { color: var(--mk-gold); }

/* the key moment: the cards turn over */
.mk-moment { position: absolute; inset: 0; z-index: 30; display: grid; align-content: center; justify-items: center; gap: 0; background: radial-gradient(60% 40% at 50% 42%, rgba(255,46,147,.2), rgba(6,3,10,.82) 70%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .45s; cursor: pointer; }
.mk-moment.on { opacity: 1; }
.mk-moment .mk-fan { display: flex; justify-content: center; margin: 26px 0 44px; }
.mk-moment .mk-fan .mk-kb { --kw: min(34vw, 140px); margin: 0 calc(min(34vw, 140px) * -.1); filter: drop-shadow(0 18px 24px rgba(0,0,0,.6)); transform: rotateY(180deg) scale(.9); opacity: 0; transition: transform .7s cubic-bezier(.2,1.3,.4,1), opacity .4s; }
.mk-moment.on .mk-fan .mk-kb { opacity: 1; }
.mk-moment.on .mk-fan .mk-kb:nth-child(1) { transform: rotate(-10deg) translateY(16px); transition-delay: .1s; }
.mk-moment.on .mk-fan .mk-kb:nth-child(2) { transform: none; z-index: 2; transition-delay: .25s; }
.mk-moment.on .mk-fan .mk-kb:nth-child(3) { transform: rotate(10deg) translateY(16px); transition-delay: .4s; }
.mk-moment .mk-words { display: grid; gap: 10px; text-align: center; padding: 0 30px; opacity: 0; transform: translateY(8px); transition: opacity .5s .9s, transform .5s .9s; }
.mk-moment.on .mk-words { opacity: 1; transform: none; }
.mk-moment .mk-words .mk-lead { font-size: 27px; }
.mk-moment .mk-tap { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 9%); text-align: center; font: 700 12px/1 var(--mk-mono); letter-spacing: .16em; opacity: 0; transition: opacity .4s 1.6s; }
.mk-moment.on .mk-tap { opacity: .9; }

/* keep your cards: the block on the end card */
.mk-keep { width: 100%; display: grid; gap: 9px; padding: 16px 18px 14px; border-radius: 16px; background: rgba(5,3,8,.84); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); text-align: center; }
.mk-field { display: flex; align-items: center; gap: 12px; height: 46px; border-bottom: 1px solid rgba(255,255,255,.55); text-align: left; }
.mk-field input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: 0; color: #fff; font: 400 16px/1 var(--mk-serif); padding: 0; border-radius: 0; -webkit-appearance: none; appearance: none; }
.mk-field input::placeholder { color: rgba(255,255,255,.42); }
.mk-pill { flex: none; border: 0; cursor: pointer; background: var(--mk-hot); color: #fff; border-radius: 999px; padding: 12px 16px 11px; font: 700 11px/1 var(--mk-mono); letter-spacing: .22em; box-shadow: 0 0 22px rgba(255,46,147,.45); }
.mk-pill[disabled] { opacity: .5; }
.mk-link { background: none; border: 0; cursor: pointer; color: #fff; font: 500 10px/1 var(--mk-mono); letter-spacing: .3em; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: rgba(255,255,255,.4); padding: 8px; }
.mk-digits { display: flex; gap: 8px; justify-content: center; margin: 6px 0 2px; }
.mk-digits input { width: 42px; height: 54px; border-radius: 10px; border: 0; text-align: center; font: 500 24px/1 var(--mk-mono); color: #fff; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); outline: 0; padding: 0; caret-color: var(--mk-pink); }
.mk-digits input:focus { box-shadow: inset 0 0 0 1.5px var(--mk-pink), 0 0 14px rgba(255,46,147,.4); }
.mk-mine { display: flex; gap: 12px; justify-content: center; margin-top: 4px; flex-wrap: wrap; }
.mk-mine > div { display: grid; gap: 8px; justify-items: center; width: 84px; }
.mk-mine > div > .mk-art { width: 84px; }
.mk-give { background: none; border: 0; cursor: pointer; color: rgba(255,255,255,.88); font: 500 9.5px/1 var(--mk-mono); letter-spacing: .24em; display: inline-flex; gap: 5px; align-items: center; padding: 6px 4px; }
.mk-give svg { width: 11px; height: 11px; }
.mk-give.away { color: var(--mk-gold); }
.mk-ok { color: var(--mk-green); }

/* a bare card when the host draws none */
.mk-tile { width: 100%; aspect-ratio: 63 / 88; border-radius: 7px; display: grid; place-items: center; text-align: center; padding: 6px; background: linear-gradient(160deg, #2a2236, #120c1a); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); font: 700 9px/1.3 var(--mk-mono); letter-spacing: .1em; }

/* give: the sheet and the link */
.mk-sheetbg { position: fixed; inset: 0; z-index: 60; background: rgba(4,2,8,.72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s; }
.mk-sheetbg.on { opacity: 1; }
.mk-sheet { position: fixed; z-index: 61; left: 0; right: 0; bottom: 0; max-width: 520px; margin: 0 auto; border-radius: 22px 22px 0 0; background: linear-gradient(180deg, #1c1129, #0c0712); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 -20px 60px rgba(0,0,0,.6); padding: 130px 28px calc(env(safe-area-inset-bottom, 0px) + 26px); display: grid; gap: 10px; text-align: center; transform: translateY(105%); transition: transform .45s cubic-bezier(.2,1,.3,1); }
.mk-sheet.on { transform: none; }
.mk-sheet .mk-grab { position: absolute; left: 50%; top: 10px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: rgba(255,255,255,.25); }
.mk-sheet .mk-up { position: absolute; left: 50%; top: -96px; width: 150px; transform: translateX(-50%) rotate(-5deg); filter: drop-shadow(0 18px 24px rgba(0,0,0,.6)); }
.mk-sheet .mk-up.mk-gone { opacity: .25; filter: grayscale(1); }
.mk-sheet .mk-lead { font-size: 23px; }
.mk-sheet .mk-btns { display: flex; gap: 12px; justify-content: center; align-items: center; margin-top: 12px; }
.mk-sheet .mk-ghost { background: none; border: 0; cursor: pointer; color: rgba(255,255,255,.75); font: 500 11px/1 var(--mk-mono); letter-spacing: .24em; padding: 14px 16px; }
.mk-sheet .mk-name { margin: 2px auto 0; width: 100%; max-width: 280px; }
.mk-linkbox { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 48px; padding: 0 6px 0 16px; border-radius: 12px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); margin-top: 6px; }
.mk-linkbox b { font: 500 12.5px/1 var(--mk-mono); letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-linkbox button { flex: none; border: 0; cursor: pointer; color: #fff; font: 500 10px/1 var(--mk-mono); letter-spacing: .24em; padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,.1); }
.mk-sheet .mk-pill.wide { width: 100%; padding: 15px; display: inline-flex; justify-content: center; gap: 9px; }
.mk-sheet .mk-pill svg { width: 14px; height: 14px; }

/* the opening notice (Stan's pick, 2026-10-24: design 1, the paper tag with the sealed pack) */
.mk-notice { position: absolute; z-index: 20; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 48px); width: min(300px, 80vw); margin-left: max(-138px, -37vw); transform: rotate(-2deg); pointer-events: none; transition: opacity .5s, transform .5s; }
.mk-notice.out { opacity: 0; transform: rotate(-2deg) translateY(-12px); }
.mk-notice .mk-paper { position: relative; padding: 13px 16px 13px 84px; background: #fbf3e1; color: #1b1410; box-shadow: 0 12px 26px rgba(0,0,0,.5);
  -webkit-mask: radial-gradient(circle 4px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 4px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 4px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 4px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; }
.mk-notice .mk-paper::before { content: ""; position: absolute; inset: 5px; border: 1px dashed rgba(27,20,16,.25); pointer-events: none; }
.mk-notice .mk-paper b { display: block; font: 700 10px/1 "Courier Prime", ui-monospace, monospace; letter-spacing: .34em; color: #d81b3c; margin-bottom: 6px; }
.mk-notice .mk-paper p { margin: 0; font: 700 13px/1.32 "Courier Prime", ui-monospace, monospace; }
.mk-notice .mk-paper small { display: block; margin-top: 7px; font: 700 9px/1.3 "Courier Prime", ui-monospace, monospace; letter-spacing: .16em; color: #b01a6a; }
.mk-notice .mk-pk { position: absolute; z-index: 2; left: -30px; top: -22px; width: 92px; transform: rotate(-11deg); filter: drop-shadow(0 10px 14px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(255,46,147,.55)); }
.mk-notice .mk-pk .ow-cards .pack { --pw: 92px; }
.mk-notice .mk-sealed { position: absolute; z-index: 9; left: 50%; bottom: 10px; transform: translateX(-50%) rotate(8deg); padding: 3px 6px 2px; background: #ffd400; color: #150c1f; font: 700 8px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .16em; box-shadow: 2px 2px 0 #150c1f; white-space: nowrap; }

/* the share step after KEEP (2026-10-27): one card, one big button; WhatsApp and copy when the browser has no share sheet */
.mk-share1 { display: grid; justify-items: center; margin: 6px 0 2px; }
.mk-share1 .mk-art { width: 120px; transform: rotate(-3deg); filter: drop-shadow(0 10px 24px rgba(255,46,147,.35)); }
.mk-pill.mk-big { width: 100%; padding: 16px 18px; font-size: 13px; letter-spacing: .18em; display: inline-flex; justify-content: center; align-items: center; gap: 10px; }
.mk-pill.mk-big svg, .mk-again svg { width: 16px; height: 16px; flex: none; }
.mk-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mk-ways[hidden] { display: none; }
.mk-ways .mk-wa { display: flex; align-items: center; justify-content: center; background: #25d366; box-shadow: 0 0 18px rgba(37,211,102,.35); text-align: center; text-decoration: none; padding: 14px 10px; font-size: 11px; }
.mk-ways .mk-ghost, .mk-again { border: 1px solid rgba(255,255,255,.28); background: none; color: #fff; border-radius: 999px; padding: 13px 10px; font: 700 10.5px/1 var(--mk-mono); letter-spacing: .18em; cursor: pointer; }
.mk-again { display: inline-flex; gap: 8px; align-items: center; justify-content: center; width: 100%; }
.mk-took { color: var(--mk-gold); }

/* the friend loop (28 Oct): the friend's first screen (the card in hand), the per-app share buttons, the "send another" sheet */
.mk-hi { position: fixed; inset: 0; z-index: 90; display: grid; align-content: center; justify-items: center; gap: 14px; padding: calc(env(safe-area-inset-top, 0px) + 28px) 24px calc(env(safe-area-inset-bottom, 0px) + 28px); text-align: center;
  background: radial-gradient(70% 45% at 50% 40%, rgba(255,46,147,.26), rgba(6,3,10,.9) 72%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .45s; cursor: pointer; touch-action: manipulation; }
.mk-hi.on { opacity: 1; }
.mk-hi .mk-hi-card { width: min(50vw, 220px, 30vh); transform: rotate(-3deg) translateY(10px) scale(.94); opacity: 0; transition: transform .7s cubic-bezier(.2,1.3,.4,1) .1s, opacity .4s .1s; filter: drop-shadow(0 18px 34px rgba(255,46,147,.4)); }
.mk-hi.on .mk-hi-card { transform: rotate(-3deg); opacity: 1; }
.mk-hi .mk-hi-words { display: grid; gap: 8px; max-width: 320px; }
.mk-hi .mk-hi-words .mk-lead { font-size: 25px; }
.mk-hi > .mk-pill.mk-big { width: min(300px, 100%); margin-top: 6px; }
.mk-ways .mk-ms { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #00b2ff, #8d3cff 60%, #ff4d8d); box-shadow: 0 0 18px rgba(0,132,255,.35); text-decoration: none; padding: 14px 10px; font-size: 11px; }
.mk-ways .mk-cp { grid-column: 1 / -1; padding: 14px 10px; font-size: 11px; }
.mk-again-sheet { cursor: default; align-content: center; }
.mk-again-sheet .mk-again-box { width: min(380px, 100%); }
.mk-again-sheet > .mk-ghost { background: none; border: 0; color: rgba(255,255,255,.75); font: 500 11px/1 var(--mk-mono); letter-spacing: .24em; padding: 14px 16px; cursor: pointer; }

/* the challenge (28 Oct): one big line over the film when a friend's race ends, who won; it never stops the episode */
.mk-shout { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 14%); z-index: 95; transform: translate(-50%, -10px) scale(.96); opacity: 0;
  width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 13px 18px 12px; border-radius: 14px; text-align: center; pointer-events: none;
  font: 900 17px/1.2 -apple-system, system-ui, "Segoe UI", sans-serif; letter-spacing: .08em; color: #0b0b10; background: #c8ff3d; box-shadow: 0 0 30px rgba(200, 255, 61, .45);
  transition: opacity .35s ease, transform .35s ease; }
.mk-shout.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.mk-shout.mk-shout-no { color: #fff; background: #ff2d8f; box-shadow: 0 0 30px rgba(255, 45, 143, .45); }

/* the dare test (28 Oct): at the race’s finish for the visitors from the dare ads, their place and DARE A FRIEND; the friend’s
   first screen when they come by that link (the place where a card would stand). The film shows dimmed behind. */
.mk-dare { position: fixed; inset: 0; z-index: 90; display: grid; align-content: center; justify-items: center; gap: 12px; padding: calc(env(safe-area-inset-top, 0px) + 28px) 24px calc(env(safe-area-inset-bottom, 0px) + 22px); text-align: center;
  background: radial-gradient(70% 45% at 50% 38%, rgba(255,46,147,.24), rgba(6,3,10,.86) 72%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .35s; touch-action: manipulation; }
.mk-dare.on { opacity: 1; }
.mk-dare-place { margin: -4px 0 0; font: 900 clamp(84px, 30vw, 132px)/.9 var(--show, "Arial Narrow", system-ui, sans-serif); font-stretch: 112%; letter-spacing: -.01em; color: #fff;
  text-shadow: 0 .04em 0 var(--mk-hot), 0 0 .35em rgba(255,46,147,.55); transform: scale(.82); opacity: 0; transition: transform .5s cubic-bezier(.2,1.5,.4,1) .08s, opacity .25s .08s; }
.mk-dare.on .mk-dare-place, .mk-hi.on .mk-dare-place { transform: none; opacity: 1; }
.mk-dare > .mk-lead { font-size: 23px; max-width: 320px; }
.mk-dare > .mk-pill.mk-big { width: min(300px, 100%); margin-top: 8px; }
.mk-dare > .mk-pill.mk-big[hidden] { display: none; }
.mk-dare > .mk-ways { width: min(300px, 100%); margin-top: 8px; }
.mk-dare > .mk-err:empty { min-height: 0; }
.mk-dare > .mk-dare-on { margin-top: 2px; color: rgba(255,255,255,.82); }
.mk-dare-hi .mk-dare-place { font-size: clamp(76px, 26vw, 120px); }