/* =====================================================================================
   THE GROWN-UP CHRISTMAS CRACKER PARTY DESIGN (theme xmas-cracker, envelope_style "cracker"), loaded only for it
   (views/guest.ejs). Lane XMAS 15/10, on the girls' party design's frame (kids-party.css): the film at the top
   (views/partials/cracker-stage.ejs, public/js/cracker-stage.js), the page's own card rising out of the pulled cracker
   with this invitation's details, the top block (the cracker, the names, the details), then the ordinary scroll sections
   in a light look like the card itself (Gary 16/10, option C): warm ivory paper, claret writing, gold lines (theme.tone
   "light"). The film stage keeps its own dark candlelit colours. On Android the app's light-tone Samsung layer paints the
   page as a picture and fills the sections' writing with ink pictures (scroll.css); this design's own writing is done the
   same way at the bottom of this file.
   ===================================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Great+Vibes&family=Inter:wght@400;500;600;700&display=swap');

.crk-page { --k-bg: #f7f0e3; --k-panel: rgba(255,255,255,.78); --k-claret: #7a1f2b; --k-gold: #a8822f; --k-gold-l: #7a1f2b; --k-ivory: #3b1418;
  --k-muted: #6b4a3a; --k-line: rgba(168,130,47,.42); --k-ink: #2a1206;
  --k-head: "Playfair Display", Georgia, "Times New Roman", serif; --k-script: "Great Vibes", "Playfair Display", Georgia, serif;
  --k-body: Inter, "Segoe UI", system-ui, -apple-system, sans-serif; }
.crk-page [hidden] { display: none !important; }

/* ---- locking: until the film has played the page is just the stage (cracker-stage.js .crk-sealed) ---- */
.crk-page.gf-locked { position: static; height: auto; overflow: visible; }
.crk-page.gf-locked .stage-scroll { pointer-events: auto; }
body.crk-sealed { overflow: hidden; overscroll-behavior: none; }
.crk-sealed .sc-flow, .crk-sealed .sc-music, .crk-sealed .crk-top, .crk-sealed .crk-glowbg { display: none !important; }
/* the card and the top block carry the names, date and place */
.crk-page .sc-hero { display: none; }
html:has(body.crk-page), body.crk-page { overflow-x: hidden; background: var(--k-bg); }
.crk-page #card-stage.stage-scroll { background: var(--k-bg); }
.crk-page .sc-flow { position: relative; overflow-x: clip; }
body.crk-page::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 50% at 50% 0%, rgba(122,31,43,.07), transparent 65%), radial-gradient(90% 50% at 50% 100%, rgba(168,130,47,.08), transparent 70%); }

/* ---- the stage ---- */
.crk-scene { --k-ivory: #f6ecdc; --k-gold: #d9b064; --k-gold-l: #f1d79a; --k-muted: #c9b49a; --k-panel: rgba(46,16,22,.62); --k-line: rgba(217,176,100,.32);
  position: relative; z-index: 1; display: block; width: 100%; height: 100vh; height: 100svh; margin: 0 auto; overflow: hidden;
  background: #0b0405; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none; font-family: var(--k-body); color: var(--k-ivory); }
.crk-scene video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #0b0405; z-index: 1; }
.crk-sprinkle { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .35s ease; }
.crk-sprinkle.on { opacity: 1; }

.crk-open { position: absolute; z-index: 20; inset: 0; display: grid; place-items: end center; padding: 0 16px calc(64px + env(safe-area-inset-bottom));
  background: #0b0405 center / cover no-repeat; cursor: pointer; border: 0; color: var(--k-ivory); font: inherit; margin: 0; width: 100%; }
.crk-open::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,4,5,.15) 35%, rgba(11,4,5,.88)); }
.crk-card { position: relative; text-align: center; max-width: 420px; display: block; }
.crk-kicker { display: block; color: var(--k-gold-l); letter-spacing: .22em; font: 600 16px var(--k-body); text-transform: uppercase; margin: 0 0 12px; }
.crk-go { display: inline-block; padding: 16px 30px; border-radius: 999px; background: linear-gradient(135deg, #f1d79a, #d9b064 50%, #b88f3e); color: var(--k-ink);
  font: 700 21px var(--k-body); letter-spacing: .03em; }
.crk-open.ready .crk-go { animation: crk-pulse 1.8s infinite; }
.crk-hint { display: block; margin: 12px 0 0; font-size: 14px; opacity: .85; }
@keyframes crk-pulse { 0% { box-shadow: 0 0 0 0 rgba(241,215,154,.55); } 70% { box-shadow: 0 0 0 18px rgba(241,215,154,0); } 100% { box-shadow: 0 0 0 0 rgba(241,215,154,0); } }

.crk-bar { position: absolute; z-index: 15; top: calc(12px + env(safe-area-inset-top)); right: 12px; display: flex; gap: 8px; }
body:not(.crk-sealed) .crk-bar { left: 12px; right: auto; }
.crk-chip { border: 1px solid rgba(246,236,220,.4); background: rgba(11,4,5,.55); color: var(--k-ivory); border-radius: 999px;
  padding: 8px 14px; font: 600 14px var(--k-body); cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.crk-chip.crk-icon { width: 40px; height: 40px; padding: 0; font-size: 18px; line-height: 1; }
.edit-mode .crk-bar, .edit-mode .crk-open, .edit-mode .crk-pull, .edit-mode .crk-scroll { display: none !important; }

/* the pause on the cracker: the whole stage is the button, the ring shows where */
.crk-pull { position: absolute; inset: 0; z-index: 3; border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; width: 100%; }
.crk-ring { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(241,215,154,.9), 0 0 26px 6px rgba(217,176,100,.45), inset 0 0 22px rgba(241,215,154,.3);
  animation: crk-ring 1.6s ease-in-out infinite; }
@keyframes crk-ring { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.96); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } }
.crk-pull-label { position: absolute; transform: translateX(-50%); pointer-events: none; white-space: nowrap; padding: 11px 22px;
  border-radius: 999px; background: linear-gradient(135deg, #f1d79a, #d9b064 50%, #b88f3e); color: var(--k-ink); font: 700 18px var(--k-body); letter-spacing: .05em;
  text-transform: uppercase; box-shadow: 0 6px 24px rgba(0,0,0,.5); animation: crk-bob 1.6s ease-in-out infinite; }
@keyframes crk-bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -6px; } }
.crk-spark { position: absolute; width: 11px; height: 11px; pointer-events: none; transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff 0 20%, rgba(255,220,150,.9) 35%, rgba(217,176,100,0) 70%); animation: crk-twinkle 1.4s ease-in-out infinite; }
@keyframes crk-twinkle { 0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } }

/* the reveal: the film only pulls the cracker; the page's OWN card rises out of it with the details already on it */
.crk-rv { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.crk-rv-dim { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 80% 60% at 50% 45%, rgba(11,4,5,.2), rgba(11,4,5,.8)); }
.crk-rv-clip { position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; }
.crk-rv-card { position: absolute; left: 0; top: 0; background: #f6eee0; border-radius: 1.4%; transform-origin: 50% 50%;
  box-shadow: 0 0 34px 8px rgba(255,214,150,.45), 0 16px 34px rgba(0,0,0,.45); will-change: transform; }
.crk-card-img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; display: block; }
.crk-card-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
  text-align: center; color: #3b1418; padding: 15% 11% 14%; }
.crk-card-text p { margin: 0; }
.crk-card-text .ct-kicker { font: 600 calc(var(--u) * 4) var(--k-body); letter-spacing: .24em; text-transform: uppercase; color: #8e6a2c; }
.crk-card-text .ct-title { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.6); }
.crk-card-text .ct-name { font: 400 calc(var(--u) * 15 * var(--nk, 1)) / 1.05 var(--k-script); color: #7a1f2b; white-space: nowrap; }   /* a long name shrinks (--nk) */
.crk-card-text .ct-what { font: 600 calc(var(--u) * 7.2) / 1.1 var(--k-head); color: #3b1418; }
.crk-card-text .ct-line { width: 40%; height: 2px; background: linear-gradient(90deg, transparent, #c99a45, transparent); }
.crk-card-text .ct-when { font: 600 calc(var(--u) * 5) / 1.6 var(--k-body); color: #3b1418; }
.crk-card-text .ct-where { font: 500 calc(var(--u) * 4.8) / 1.4 var(--k-body); color: #6b4a3a; }

.crk-scroll { position: absolute; z-index: 5; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--k-ivory); text-decoration: none; text-align: center;
  font: 600 16px var(--k-body); letter-spacing: .06em; text-shadow: 0 2px 10px rgba(0,0,0,.9); white-space: nowrap; animation: crk-fadein 1s ease both; }
.crk-arrow { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--k-gold); display: grid; place-items: center; animation: crk-nudge 1.4s ease-in-out infinite;
  background: rgba(11,4,5,.45); }
.crk-arrow::before { content: ""; width: 10px; height: 10px; border: solid var(--k-gold); border-width: 0 3px 3px 0; transform: translateY(-2px) rotate(45deg); }
@keyframes crk-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes crk-fadein { from { opacity: 0; } to { opacity: 1; } }

/* ---- the top block: the cracker, the names, the details ---- */
.crk-top { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding: 56px 20px 30px; text-align: center; font-family: var(--k-body); color: var(--k-ivory); }
.crk-eyebrow { margin: 0 0 6px; color: var(--k-gold); font: 600 15px var(--k-body); letter-spacing: .24em; text-transform: uppercase; }
.crk-name { margin: 4px 0 4px; font: 400 calc(76px * var(--nk, 1))/1.05 var(--k-script); color: var(--k-claret); overflow-wrap: anywhere; }
.crk-title { margin: 0 0 16px; color: var(--k-ivory); font: 600 40px/1.1 var(--k-head); letter-spacing: .01em; }
.crk-details { display: grid; gap: 14px; margin: 22px 0 26px; }
.crk-details div { padding: 14px 12px; border: 1px solid var(--k-line); border-radius: 16px; background: var(--k-panel); }
.crk-details dt { color: var(--k-gold); font: 600 13px var(--k-body); letter-spacing: .22em; text-transform: uppercase; }
.crk-details dd { margin: 4px 0 0; font-weight: 600; font-size: 18px; line-height: 1.45; }
.crk-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 8px 0 6px; }
.crk-btn { box-shadow: 0 8px 20px rgba(122,31,43,.18); display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; border-radius: 999px;
  border: 2px solid var(--k-gold); background: linear-gradient(135deg, #f1d79a, #d9b064 50%, #b88f3e); color: var(--k-ink); font: 700 17px var(--k-body); letter-spacing: .03em;
  text-decoration: none; cursor: pointer; }
.crk-btn.crk-ghost { background: rgba(255,255,255,.5); color: var(--k-claret); box-shadow: none; }
.crk-tap-hint { margin: 18px 0 0; color: var(--k-muted); font-style: italic; font-size: 14px; }

/* the cracker on its plate: shot on the film's table, faded at the edges, it lights up as it arrives; tap = a bang + a joke */
.crk-relic-wrap { position: relative; width: min(74vw, 320px); aspect-ratio: 1; margin: 0 auto 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.crk-relic { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
  opacity: .3; filter: saturate(.4); transform: scale(.93); transition: opacity 1.4s ease, filter 1.6s ease, transform 1.6s cubic-bezier(.2,.8,.2,1); }
.lit > .crk-relic { opacity: 1; filter: none; transform: none; }
.crk-relic-wrap .crk-glow { position: absolute; left: 50%; top: 52%; width: 46%; height: 22%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,214,150,.55), rgba(255,170,90,0)); mix-blend-mode: screen; opacity: 0; }
.crk-relic-wrap.lit .crk-glow { animation: crk-breathe 3.2s ease-in-out 1.2s infinite; }
@keyframes crk-breathe { 0%, 100% { opacity: .12; } 50% { opacity: .7; } }
.crk-wobble { animation: crk-wobble .6s ease-in-out; }
@keyframes crk-wobble { 0%, 100% { transform: rotate(0) scale(1); } 15% { transform: rotate(-4deg) scale(1.04); } 35% { transform: rotate(4deg) scale(1.02); } 60% { transform: rotate(-2deg); } 80% { transform: rotate(1deg); } }
.crk-joke { max-width: 420px; margin: 6px auto 14px; padding: 14px 16px; border: 1px dashed var(--k-line); border-radius: 14px; background: var(--k-panel); }
.crk-joke p { margin: 0; }
.crk-joke-q { font: 600 17px/1.4 var(--k-body); color: var(--k-ivory); }
.crk-joke-a { margin-top: 8px !important; font: italic 600 19px/1.3 var(--k-head); color: var(--k-gold-l); opacity: 0; }
.crk-joke.show .crk-joke-a { animation: crk-fadein .6s ease 1.4s both; }
#crk-confetti { position: fixed; inset: 0; z-index: 30; width: 100%; height: 100%; pointer-events: none; }

/* ---- the page below, in the film's look ---- */
.crk-page .sc-section { position: relative; max-width: 560px; padding: 44px 20px 34px; border-bottom: 0; text-align: center; font-family: var(--k-body); color: var(--k-ivory); }
.crk-page .sc-flow > .sc-section, .crk-page .sc-flow > .sc-footer { position: relative; z-index: 1; }
.crk-page .sc-h2 { margin: 0 0 16px; color: var(--k-ivory); font: 600 38px/1.1 var(--k-head); letter-spacing: .01em; text-transform: none; }
.crk-page .sc-script { margin: 0 0 16px; color: var(--k-claret); font: 400 54px/1.1 var(--k-script); text-transform: none; }
.crk-page .sc-rule, .crk-page .sc-rule-sm { width: 80px; height: 2px; margin: 0 auto 20px; border: 0; background: linear-gradient(90deg, transparent, var(--k-gold), transparent); }
.crk-page .sc-lead { font-size: 17px; line-height: 1.65; color: var(--k-ivory); }
.crk-page .sc-signature { font: italic 500 22px/1.4 var(--k-head); color: var(--k-gold-l); margin-top: 12px; }
.crk-page .sc-detail { display: block; padding: 14px 12px; margin: 0 0 14px; border: 1px solid var(--k-line); border-radius: 16px; background: var(--k-panel); }
.crk-page .sc-label { display: block; margin: 0 0 4px; color: var(--k-gold); font: 600 13px var(--k-body); letter-spacing: .22em; text-transform: uppercase; }
.crk-page .sc-value { font-weight: 600; font-size: 18px; line-height: 1.45; color: var(--k-ivory); }
.crk-page .countdown-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 12px; padding: 0; background: none; border: 0; }
.crk-page .countdown-item { padding: 12px 0 8px; border: 1px solid var(--k-line); border-radius: 16px; background: var(--k-panel); }
.crk-page .countdown-val { display: block; font: 600 38px/1 var(--k-head); color: var(--k-gold-l); font-variant-numeric: tabular-nums; }
.crk-page .countdown-lbl { color: var(--k-muted); font: 600 11px var(--k-body); letter-spacing: .16em; text-transform: uppercase; }
.crk-page .sc-timeline { list-style: none; margin: 16px 0 12px; padding: 0; text-align: left; }
.crk-page .sc-timeline li { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 12px 4px; border-bottom: 1px dashed var(--k-line); }
.crk-page .sc-timeline .sc-dot, .crk-page .sc-timeline .sc-ico { display: none; }
.crk-page .sc-time { color: var(--k-gold); font: 600 17px var(--k-head); }
.crk-page .sc-what { font-size: 17px; line-height: 1.45; color: var(--k-ivory); }
.crk-page .sc-map { margin: 18px 0 10px; padding: 6px; border: 0; border-radius: 18px; background: linear-gradient(145deg, #f1d79a, #a8822f 55%, #f1d79a);
  box-shadow: 0 10px 26px rgba(122,31,43,.18); }
.crk-page .sc-map iframe { display: block; width: 100%; height: 300px; border: 0; border-radius: 13px; background: #efe6d6; }
.crk-page .sc-btn { border-radius: 999px; min-height: 48px; padding: 12px 22px; font: 700 16px var(--k-body); letter-spacing: .03em; }
html:not([data-ss]) .crk-page .sc-btn-solid, html:not([data-ss]) .crk-page .sc-btn.js-maps { background: linear-gradient(135deg, #f1d79a, #d9b064 50%, #b88f3e); border: 2px solid var(--k-gold); color: var(--k-ink); }
.crk-page .sc-btn-ghost { background: rgba(255,255,255,.5); border: 2px solid var(--k-gold); color: var(--k-claret); }
.crk-page .sc-alt-links, .crk-page .sc-alt-links a { color: var(--k-muted); }
.crk-page .sc-form { text-align: left; }
.crk-page .sc-form label, .crk-page .sc-legend { display: block; margin: 16px 0 6px; color: var(--k-gold); font: 600 13px var(--k-body); letter-spacing: .16em; text-transform: uppercase; }
.crk-page .sc-form input[type="text"], .crk-page .sc-form input[type="tel"], .crk-page .sc-form input[type="email"], .crk-page .sc-form select, .crk-page .sc-form textarea {
  width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid rgba(168,130,47,.45); background: #fff; color: var(--k-ivory); font: 500 17px var(--k-body); }
.crk-page .sc-choice span { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 10px; border-radius: 14px; text-align: center;
  border: 2px solid rgba(168,130,47,.55); color: var(--k-ivory); font: 600 17px var(--k-body); letter-spacing: 0; text-transform: none; box-shadow: none; }
html:not([data-ss]) .crk-page .sc-choice span { background: rgba(255,255,255,.7); }
html:not([data-ss]) .crk-page .sc-choice input:checked + span { background: linear-gradient(135deg, #f1d79a, #d9b064 50%, #b88f3e); border-color: #b88f3e; color: var(--k-ink); }
[data-ss] .crk-page .sc-choice input:checked + span { border-color: var(--k-gold); }
.crk-page .sc-thanks { border: 2px solid var(--k-gold); border-radius: 16px; background: var(--k-panel); padding: 16px; text-align: left; }
.crk-page .sc-footer { position: relative; padding: 50px 24px 70px; text-align: center; }
.crk-page .sc-footer .sc-script { font: 400 50px/1.1 var(--k-script); color: var(--k-claret); }
.crk-page .crk-again { margin-top: 18px; }
.crk-page .rsvp-alert { padding: 14px 16px; border-radius: 16px; font: 600 17px/1.45 var(--k-body); text-align: center; }
.crk-page .rsvp-alert.success { background: var(--k-panel); border: 2px solid var(--k-gold); color: var(--k-ivory); }
.crk-page .rsvp-alert.error { background: #fff; border: 2px solid #b3261e; color: #b3261e; }

@media (min-width: 700px) { .crk-page .sc-h2, .crk-title { font-size: 46px; } .crk-top, .crk-page .sc-section { padding-top: 64px; } }
@media (prefers-reduced-motion: reduce) {
  .crk-open.ready .crk-go, .crk-ring, .crk-pull-label, .crk-spark, .crk-arrow, .crk-relic-wrap.lit .crk-glow { animation: none !important; }
}

/* ---- Samsung Internet (html[data-ss], Android): its dark mode flips colours a page draws and dims pictures, but leaves
   canvases and videos alone. The page is the app's light-tone picture (ss-page.jpg); the gold buttons take their
   gold from a picture inside them and their dark words from an ink picture (themes/xmas-cracker/assets/ss-button.jpg +
   ss-ink-button.jpg, scripts/make-samsung-safe.js). The drawn colours left are dark enough that its dark mode leaves them be. ---- */
/* the page itself: the app paints ss-page.jpg behind everything on Android light designs (views/guest.ejs) */
html[data-ss]:has(body.crk-page), [data-ss] body.crk-page { background: transparent; }
[data-ss] body.crk-page::before { display: none; }
/* this design's own writing below the film, filled with ink pictures (a drawn colour would be flipped pale) */
[data-ss] :is(.crk-title, .crk-details dd, .crk-joke-q),
[data-ss] :is(.crk-name, .crk-btn.crk-ghost, .crk-joke-a),
[data-ss] :is(.crk-eyebrow, .crk-details dt),
[data-ss] .crk-tap-hint {
  background: url('/themes/xmas-cracker/assets/cracker/ss/ink-dark.jpg') 0 0 / 100% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; }
[data-ss] :is(.crk-name, .crk-btn.crk-ghost, .crk-joke-a) { background-image: url('/themes/xmas-cracker/assets/cracker/ss/ink-claret.jpg'); }
[data-ss] :is(.crk-eyebrow, .crk-details dt) { background-image: url('/themes/xmas-cracker/assets/cracker/ss/ink-gold.jpg'); }
[data-ss] .crk-tap-hint { background-image: url('/themes/xmas-cracker/assets/cracker/ss/ink-muted.jpg'); }
/* boxes: a gold picture ring (a mask is never recoloured) instead of a drawn border and fill */
[data-ss] :is(.crk-details div, .crk-btn.crk-ghost, .crk-joke) { position: relative; background-color: transparent; border-color: transparent; box-shadow: none; }
[data-ss] :is(.crk-details div, .crk-btn.crk-ghost, .crk-joke)::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 2px; pointer-events: none;
  background: url('/themes/xmas-cracker/assets/cracker/ss/ink-goldline.jpg') 0 0 / 100% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
[data-ss] .crk-btn.crk-ghost { background: url('/themes/xmas-cracker/assets/cracker/ss/ink-claret.jpg') 0 0 / 100% 100%; -webkit-background-clip: text; background-clip: text; }
.crk-btn, .crk-go, .crk-pull-label { isolation: isolate; }
.crk-btn, .crk-go { position: relative; }
[data-ss] .crk-btn:not(.crk-ghost), [data-ss] .crk-go, [data-ss] .crk-pull-label, [data-ss] .crk-page .sc-btn.js-maps { background: transparent; border-color: transparent; }
[data-ss] .crk-page .sc-btn.js-maps { position: relative; isolation: isolate; overflow: hidden; }
[data-ss] :is(.crk-btn, .crk-go, .crk-pull-label, .sc-btn.js-maps) > .ss-fill { position: absolute; left: -1px; top: -1px; width: calc(100% + 2px); height: calc(100% + 2px);
  border-radius: inherit; object-fit: cover; z-index: -1; pointer-events: none; }
[data-ss] .crk-ss-ink { background: url('/themes/xmas-cracker/assets/ss-ink-button.jpg') center / cover; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; }
[data-ss] .ss-emoji { margin-left: .25em; }
[data-ss] .crk-page .sc-map { background: url('/themes/xmas-cracker/assets/ss-button.jpg') center / cover; box-shadow: none; }
[data-ss] .crk-page .sc-map iframe { filter: brightness(.88) saturate(.8); }
/* the ivory card is a picture (kept), but its dark writing would be flipped pale: fill the letters with ink pictures */
[data-ss] .crk-card-text :is(.ct-kicker, .ct-name, .ct-what, .ct-when, .ct-where) { -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; background: url('/themes/xmas-cracker/assets/cracker/ss/ink-dark.jpg') 0 0 / 100% 100%;
  -webkit-background-clip: text; background-clip: text; }
[data-ss] .crk-card-text .ct-name { background-image: url('/themes/xmas-cracker/assets/cracker/ss/ink-claret.jpg'); }
[data-ss] .crk-card-text .ct-kicker { background-image: url('/themes/xmas-cracker/assets/cracker/ss/ink-gold.jpg'); }
[data-ss] .crk-card-text .ct-where { background-image: url('/themes/xmas-cracker/assets/cracker/ss/ink-muted.jpg'); }
[data-ss] .crk-card-text .ct-line { background: url('/themes/xmas-cracker/assets/cracker/ss/ink-goldline.jpg') 0 0 / 100% 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); }
/* the Tap-to-open cover's picture is a real picture (a canvas once ss-canvas.js swaps it) instead of a CSS background */
.crk-open > .crk-open-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.crk-open::before { z-index: 1; }
.crk-open .crk-card { z-index: 2; }
/* (light, 16/10) the countdown tiles and the detail boxes: no drawn fill on Samsung (it turned them dark), a gold picture ring instead */
[data-ss] .crk-page :is(.countdown-item, .sc-detail) { position: relative; background: transparent !important; border-color: transparent !important; }
[data-ss] .crk-page :is(.countdown-item, .sc-detail)::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: url('/themes/xmas-cracker/assets/cracker/ss/ink-goldline.jpg') 0 0 / 100% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }