/* Scatterhaus pre-lander kit: one focal game, one stated offer, one step after the reveal.
   Skins are token sets ([data-skin] on <html>); every mechanic draws with the tokens, so any campaign can wear any skin.
   Mobile first. No decoration over content: celebrations sit behind the card they celebrate. */

:root {
  /* defaults = Velvet Ace's own skin; [data-skin] blocks below override them */
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", sans-serif; --dw: 800; --dstyle: normal; --dcase: none; --dtrack: -.01em;
  --bg: #0e0a14; --bg-hi: #3b1233; --surface: #1d1629; --surface-2: #271e37; --ink: #f7f3fb; --muted: #d3cae0; --line: rgba(255,255,255,.12);
  --acc: #ffd23f; --acc-2: #e8285a; --acc-ink: #1c1303; --cta: #ffd23f; --cta-ink: #1c1303; --box: #e8285a;
  --seg-1: #e8285a; --seg-2: #2a1d3d; --seg-3: #b51a47; --seg-4: #1d1629; --seg-ink: #fff;
  --foil-1: #bdb6c8; --foil-2: #f1eef6; --foil-3: #8c8499; --foil-ink: rgba(20,12,30,.6);
  --bar-bg: rgba(9,6,16,.95);
  --r: 14px; --r-btn: 14px;
  --sh: 0 18px 40px -18px rgba(0,0,0,.75);
}

/* ---------- skins ---------- */
[data-skin=velvet] {
  --box: #e8285a;
  --display: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", sans-serif; --dw: 800; --dstyle: italic; --dcase: uppercase; --dtrack: .01em;
  --bg: #0e0a14; --bg-hi: #3b1233; --surface: #1d1629; --surface-2: #271e37; --ink: #f7f3fb; --muted: #d3cae0; --line: rgba(255,255,255,.12);
  --acc: #ffd23f; --acc-2: #e8285a; --acc-ink: #1c1303; --cta: #ffd23f; --cta-ink: #1c1303;
  --seg-1: #e8285a; --seg-2: #2a1d3d; --seg-3: #b51a47; --seg-4: #1d1629; --seg-ink: #fff; --rim: #2a1d3d;
  --foil-1: #bdb6c8; --foil-2: #f1eef6; --foil-3: #8c8499; --foil-ink: rgba(20,12,30,.6); --bar-bg: rgba(9,6,16,.95);
  --r: 12px; --r-btn: 8px;
}
[data-skin=rose] {
  --box: #e2287f;
  --display: "Baloo 2", "Arial Rounded MT Bold", system-ui, sans-serif; --dw: 800; --dcase: uppercase; --dtrack: 0em;
  --bg: #2a0619; --bg-hi: #a3165a; --surface: #3e0a27; --surface-2: #521036; --ink: #fff3f8; --muted: #f6c4dc; --line: rgba(255,168,208,.3);
  --acc: #ff8fc6; --acc-2: #ffd36b; --acc-ink: #3a0620; --cta: #34eda0; --cta-ink: #04291a;
  --seg-1: #d81b74; --seg-2: #9c0f55; --seg-3: #e0307f; --seg-4: #74093f; --seg-ink: #fff;
  --foil-1: #e9c6d6; --foil-2: #fff3f8; --foil-3: #c597ad; --foil-ink: rgba(90,10,50,.55); --bar-bg: rgba(30,4,18,.95);
  --r: 18px; --r-btn: 999px;
}
[data-skin=cobalt] {
  --box: #1440d8;
  --display: Bungee, Impact, system-ui, sans-serif; --dw: 400; --dcase: uppercase; --dtrack: .01em;
  --bg: #050a2a; --bg-hi: #1638b8; --surface: #0b1550; --surface-2: #122070; --ink: #f2f5ff; --muted: #aebbea; --line: rgba(70,163,255,.32);
  --acc: #ffd34d; --acc-2: #46a3ff; --acc-ink: #1a1200; --cta: #e0124a; --cta-ink: #fff;
  --seg-1: #1440d8; --seg-2: #0a1a66; --seg-3: #c8103f; --seg-4: #0e2a9a; --seg-ink: #fff;
  --foil-1: #b9c3d9; --foil-2: #eef2fb; --foil-3: #8792ad; --foil-ink: rgba(10,20,60,.55); --bar-bg: rgba(3,6,28,.95);
  --r: 12px; --r-btn: 12px; --segk: .8;
}
[data-skin=jade] {
  --box: #0f6b52;
  --display: Cinzel, "Trajan Pro", Georgia, serif; --dw: 800; --dcase: none; --dtrack: .02em;
  --bg: #03140f; --bg-hi: #0f5e48; --surface: #0a3b30; --surface-2: #0e4a3c; --ink: #f6eedb; --muted: #b5cfc1; --line: rgba(216,178,106,.32);
  --acc: #d8b26a; --acc-2: #f6eedb; --acc-ink: #1d1404; --cta: #d8b26a; --cta-ink: #1d1404;
  --seg-1: #0f6b52; --seg-2: #073226; --seg-3: #1b7d61; --seg-4: #0a4537; --seg-ink: #f6eedb;
  --foil-1: #cbb68a; --foil-2: #f6eedb; --foil-3: #9c8550; --foil-ink: rgba(40,30,5,.55); --bar-bg: rgba(2,14,10,.95);
  --r: 10px; --r-btn: 8px;
}
[data-skin=fizz] {
  --box: #6c3cf0;
  color-scheme: light;
  --display: Fredoka, "Arial Rounded MT Bold", system-ui, sans-serif; --dw: 600; --dtrack: -.01em;
  --bg: #fff6ea; --bg-hi: #ffe2c4; --surface: #ffffff; --surface-2: #f6f0ff; --ink: #2a1846; --muted: #5f5079; --line: rgba(42,24,70,.14);
  --acc: #6c3cf0; --acc-2: #ff5fa2; --acc-ink: #fff; --cta: #ff8a3d; --cta-ink: #2a1846;
  --seg-1: #6c3cf0; --seg-2: #e2541b; --seg-3: #128a68; --seg-4: #d6337f; --seg-ink: #fff;
  --foil-1: #d9cff5; --foil-2: #f7f3ff; --foil-3: #ad9fd9; --foil-ink: rgba(42,24,70,.55); --bar-bg: rgba(255,250,243,.96);
  --sh: 0 18px 40px -20px rgba(42,24,70,.45); --r: 18px; --r-btn: 999px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; color: var(--ink); font: 400 15px/1.45 var(--body); overflow-x: hidden; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-hi) 38%, var(--bg)), var(--bg) 78%) fixed, var(--bg); }
::selection { background: var(--acc); color: var(--acc-ink); }
:focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; }
button { font: inherit; color: inherit; }
img, svg { display: block; }
a { color: inherit; text-underline-offset: 3px; }
.pl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pl-ico { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.pl-page { position: relative; min-height: 100svh; display: flex; flex-direction: column; transform-origin: 50% 0; overflow-x: clip; }
.pl-ribbon { margin: 0; padding: 5px 12px; background: #000; color: #f4f4f4; font: 600 11px/1.35 var(--body); text-align: center; }
.pl-ribbon a { color: #fff; }

.pl-top { width: min(1080px, 100%); margin: 0 auto; padding: 10px 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pl-brand { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font: italic 800 24px/1 "Barlow Condensed", "Roboto Condensed", "Arial Narrow", sans-serif; letter-spacing: .015em; text-transform: uppercase; white-space: nowrap; }
.pl-brand svg { width: 26px; height: 30px; flex: none; }
.pl-brand b { color: #e8285a; font-weight: 800; margin-left: .18em; }
.pl-tags { display: flex; align-items: center; gap: 6px; flex: none; }
.pl-tag { padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; font: 700 11px/1 var(--body); color: var(--muted); letter-spacing: .02em; }
.pl-snd { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.pl-snd:hover { color: var(--ink); }
.pl-snd .on { display: none; } .pl-snd[aria-pressed=true] .on { display: block; } .pl-snd[aria-pressed=true] .off { display: none; }
.pl-snd[aria-pressed=true] { color: var(--acc); border-color: var(--acc); }

.pl-main { flex: 1; width: min(640px, 100%); margin: 0 auto; padding: 10px 16px 18px; display: grid; align-content: center; justify-items: center; gap: 12px; text-align: center; transition: opacity .22s, transform .22s; }
.pl-main.pl-out { opacity: 0; transform: translateY(8px); }
.pl-h1 { margin: 0; font: var(--dstyle) var(--dw) clamp(28px, 8.2vw, 52px)/1.04 var(--display); letter-spacing: var(--dtrack); text-transform: var(--dcase); text-wrap: balance; max-width: 18ch; }
.pl-h1 b { color: var(--acc); font-weight: inherit; }
.pl-swap { display: grid; align-content: center; transition: opacity .16s; }
.pl-sub { margin: -2px 0 0; max-width: 40ch; color: var(--muted); font-size: 15px; text-wrap: pretty; }
.pl-sub b { color: var(--ink); }
.pl-fine { margin: 0; max-width: 46ch; color: var(--muted); font-size: 12.5px; line-height: 1.45; text-wrap: pretty; }
.pl-fine b { color: var(--ink); font-weight: 700; }
.pl-link { padding: 2px; border: 0; background: none; color: var(--ink); font: 600 12.5px/1.4 var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* odds line under a pick or spin mechanic: the prize table, always on the page */
.pl-odds { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; max-width: 46ch; font-size: 12.5px; color: var(--muted); }
.pl-odds span { padding: 3px 8px; border-radius: 6px; background: color-mix(in srgb, var(--surface) 80%, transparent); border: 1px solid var(--line); white-space: nowrap; }
.pl-odds b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- buttons ---------- */
.pl-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 28px; border: 0; border-radius: var(--r-btn); cursor: pointer; text-decoration: none;
  background: var(--cta); color: var(--cta-ink); font: 800 17px/1.1 var(--body); letter-spacing: .005em;
  box-shadow: 0 10px 22px -12px rgba(0,0,0,.7), inset 0 -3px 0 rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .12s, filter .15s, opacity .2s; }
.pl-btn:hover { filter: brightness(1.07); }
.pl-btn:active { transform: translateY(1px) scale(.98); }
.pl-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.pl-btn[disabled] { cursor: default; opacity: .55; filter: saturate(.7); }
.pl-btn .pl-ico { width: 20px; height: 20px; }
.pl-btn.is-ready { animation: pl-ready 2.2s cubic-bezier(.3,0,.3,1) infinite; }
@keyframes pl-ready { 0%, 70%, 100% { transform: none; } 80% { transform: scale(1.045); } 90% { transform: scale(.99); } }
.pl-btn-2 { min-height: 48px; padding: 0 22px; border: 1.5px solid var(--line); border-radius: var(--r-btn); background: transparent; color: var(--ink); font: 700 15px/1 var(--body); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pl-btn-2:hover { border-color: var(--acc); }

/* ---------- the stated offer, in place ---------- */
.pl-num { font: var(--dstyle) var(--dw) clamp(64px, 19vw, 96px)/.9 var(--display); letter-spacing: -.02em; color: var(--acc); font-variant-numeric: lining-nums; }
.pl-unit { font: var(--dstyle) var(--dw) clamp(19px, 5.4vw, 26px)/1.05 var(--display); letter-spacing: var(--dtrack); text-transform: var(--dcase); }
.pl-on { font-size: 14px; font-weight: 600; color: var(--muted); }
.pl-pre { font: 800 12.5px/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pl-qual { display: inline-block; padding: 5px 10px; border-radius: 6px; background: var(--acc); color: var(--acc-ink); font: 800 12px/1.2 var(--body); letter-spacing: .04em; text-transform: uppercase; }

/* ---------- celebration: shards behind the card, 1.2 s, never over the button ---------- */
.pl-cele { position: absolute; z-index: 0; width: 0; height: 0; pointer-events: none; }
.pl-cele i { position: absolute; left: 0; top: 0; width: var(--w, 10px); height: var(--h, 5px); margin: calc(var(--h, 5px) / -2) 0 0 calc(var(--w, 10px) / -2); border-radius: 2px; background: var(--c);
  transform: rotate(var(--a)) translateX(0) scale(.4); opacity: 0; animation: pl-shard 1.15s cubic-bezier(.16,1,.3,1) var(--t, 0s) forwards; }
@keyframes pl-shard { 10% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(1); } }
@keyframes pl-blink { 0%, 100% { box-shadow: 0 0 0 3px var(--acc), var(--sh); } 25%, 75% { box-shadow: 0 0 0 6px var(--acc), var(--sh); } 50% { box-shadow: 0 0 0 3px var(--ink), var(--sh); } }
.pl-cele b { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%; border: 2px solid var(--acc); opacity: 0; animation: pl-ring 1.1s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes pl-ring { 0% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.35); } }

/* ---------- sticky terms bar ---------- */
.pl-bar { position: sticky; bottom: 0; z-index: 20; padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); background: var(--bar-bg); border-top: 1px solid var(--line);
  font: 11.5px/1.42 var(--body); color: var(--muted); text-align: center; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pl-bar p { margin: 0 auto; max-width: 860px; }
.pl-bar b { color: var(--ink); }
.pl-bar a, .pl-bar button { color: var(--ink); }
.pl-bar button { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* ---------- the step after the reveal ---------- */
.pl-main.is-step { align-content: start; padding-top: 18px; }
.pl-step { width: min(440px, 100%); display: grid; gap: 14px; text-align: left; animation: pl-rise .45s cubic-bezier(.16,1,.3,1) both; }
@keyframes pl-rise { from { opacity: 0; transform: translateY(16px); } }
.pl-recap { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.pl-recap .pl-ico { width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: var(--acc); color: var(--acc-ink); stroke-width: 3; }
.pl-recap b { display: block; font: var(--dstyle) var(--dw) 18px/1.15 var(--display); letter-spacing: var(--dtrack); text-transform: var(--dcase); }
.pl-recap small { display: block; color: var(--muted); font-size: 12.5px; }
.pl-step h2 { margin: 4px 0 0; font: var(--dstyle) var(--dw) clamp(22px, 6vw, 28px)/1.12 var(--display); letter-spacing: var(--dtrack); text-transform: var(--dcase); text-wrap: balance; }
.pl-step > p { margin: -6px 0 0; color: var(--muted); }
.pl-prog { display: flex; gap: 6px; } .pl-prog i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); } .pl-prog i.on { background: var(--acc); }

.pl-opts { display: grid; gap: 10px; }
.pl-opt { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; width: 100%; min-height: 60px; padding: 12px 16px; border-radius: var(--r); border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .15s, background .15s, transform .12s; }
.pl-opt b { font-size: 16px; font-weight: 700; }
.pl-opt small { grid-column: 1; color: var(--muted); font-size: 13px; }
.pl-opt i { grid-row: 1 / span 2; grid-column: 2; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); }
.pl-opt:hover { border-color: var(--acc); }
.pl-opt:active { transform: scale(.99); }
.pl-opt.is-on { border-color: var(--acc); background: var(--surface-2); }
.pl-opt.is-on i { border: 7px solid var(--acc); }

.pl-form { display: grid; gap: 12px; }
.pl-field { display: grid; gap: 6px; font-size: 13px; font-weight: 700; }
.pl-field small { font-weight: 400; color: var(--muted); }
.pl-field input { width: 100%; min-height: 50px; padding: 0 14px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: 400 16px var(--body); }
.pl-field input:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 30%, transparent); }
.pl-field input::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.pl-check { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 13px; line-height: 1.45; color: var(--muted); cursor: pointer; }
.pl-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--acc); }
.pl-check a, .pl-check button { color: var(--ink); }
.pl-err { margin: 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, #ff4d4d 18%, var(--surface)); color: var(--ink); font-size: 13px; }
.pl-form .pl-btn, .pl-step > .pl-btn { width: 100%; }
.pl-skip { justify-self: center; padding: 6px; border: 0; background: none; color: var(--muted); font: 600 13px var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pl-demo { margin: 0; font-size: 12px; color: var(--muted); text-align: center; }

.pl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pl-list li { display: grid; grid-template-columns: 40px 1fr; gap: 4px 12px; align-items: center; padding: 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.pl-list li.is-yours { border: 2px solid var(--acc); }
.pl-list svg { width: 36px; height: 40px; grid-row: span 2; }
.pl-list .who { font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.pl-list .who em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--acc); }
.pl-list .what { font: var(--dstyle) var(--dw) 19px/1.15 var(--display); letter-spacing: var(--dtrack); text-transform: var(--dcase); }
.pl-list .terms { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.pl-list .pl-btn, .pl-list .pl-btn-2 { grid-column: 1 / -1; width: 100%; min-height: 48px; font-size: 15px; }
.pl-disc { margin: 0; font-size: 12px; color: var(--muted); }

/* ---------- T&Cs + prize-table sheet ---------- */
.pl-sheet { width: min(560px, calc(100% - 24px)); max-height: min(86svh, 760px); padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); }
.pl-sheet::backdrop { background: rgba(0,0,0,.6); }
.pl-sheet[open] { animation: pl-rise .3s cubic-bezier(.16,1,.3,1); }
.pl-sheet-in { padding: 20px 20px 22px; display: grid; gap: 14px; font-size: 14px; }
.pl-sheet header { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.pl-sheet h2 { margin: 0; font: var(--dstyle) var(--dw) 22px/1.15 var(--display); letter-spacing: var(--dtrack); text-transform: var(--dcase); }
.pl-sheet h3 { margin: 4px 0 -4px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.pl-sheet p, .pl-sheet ul { margin: 0; }
.pl-sheet ul { padding-left: 18px; display: grid; gap: 6px; }
.pl-x { width: 36px; height: 36px; flex: none; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.pl-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pl-table th, .pl-table td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.pl-table th { font-size: 12px; color: var(--muted); font-weight: 700; }
.pl-sheet details { border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; }
.pl-sheet summary { padding: 11px 0; font-weight: 700; cursor: pointer; }
.pl-sheet details[open] { padding-bottom: 12px; } .pl-sheet details > * + * { margin-top: 8px; }
.pl-table td:last-child, .pl-table th:last-child { text-align: right; }

/* ---------- toast (the demo click-out) ---------- */
.pl-toast { position: fixed; z-index: 40; left: 50%; bottom: 96px; width: min(440px, calc(100% - 24px)); padding: 14px 16px; border-radius: 14px; background: #111; color: #f2f2f2; border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 24px 50px -16px rgba(0,0,0,.7); font-size: 14px; line-height: 1.45; text-align: left; transform: translate(-50%, 24px); opacity: 0; pointer-events: none; transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .25s; }
.pl-toast.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.pl-toast a { color: #fff; font-weight: 700; }

/* ---------- desktop ---------- */
@media (min-width: 761px) {
  .pl-top { padding-top: 16px; }
  .pl-brand { font-size: 27px; }
  .pl-main { gap: 14px; padding-top: 12px; }
  .pl-sub { font-size: 16px; }
}

/* ---------- ?thumb=1 previews: no ribbon, no sound, no clicks ---------- */
.pl-thumb, .pl-thumb body { overflow: hidden; }
.pl-thumb .pl-ribbon, .pl-thumb .pl-snd { display: none; }
.pl-thumb .pl-page { min-height: 100vh; }
.pl-thumb body { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}