/* =========================================================
   CRAVE FX — HALLOWEEN 2026 — CRINGE ALTER-EGO QUIZ
   Pop-surreal / toxic-neon / retro cartoon social post
   ========================================================= */

:root{
  /* --- core palette --- */
  --bg:            #0F131C;
  --bg-2:          #151A26;
  --card:          #5F4892;   /* rich muted purple frame */
  --card-lo:       #4A3675;
  --card-hi:       #7A5FB4;
  --canvas:        #0A0F18;   /* dark slate window */

  --lime:          #7BD960;
  --toxic:         #B638E8;
  --pink:          #F24BB6;
  --yellow:        #F5E663;
  --slime-purple:  #C838F2;
  --slime-green:   #8EE33F;

  --ink:           #F4F1FF;
  --ink-dim:       #A79BC8;

  --r-lg: 28px;
  --r-md: 18px;
  --r-pill: 999px;

  --font: "Faculty Glyphic", Georgia, serif;

  --ease: cubic-bezier(.22,.9,.28,1);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

/* The app fills the box it is given — a browser tab, or an embed whose host
   has already taken a slice off the top. Never assume the full viewport. */
html,body{ height:100%; }

body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:
    radial-gradient(120% 80% at 50% -10%, #1D1533 0%, transparent 60%),
    radial-gradient(90% 60% at 110% 110%, #17301E 0%, transparent 55%),
    var(--bg);
  overflow:hidden;              /* only .screen scrolls, never the document */
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
}

/* ---- ambience ---- */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:60; opacity:.05;
  background-image:repeating-conic-gradient(#fff 0% 25%, #000 0% 50%);
  background-size:3px 3px;
  mix-blend-mode:overlay;
}
.glow-blobs{ position:fixed; inset:0; pointer-events:none; z-index:0; filter:blur(70px); opacity:.30; }
.glow-blobs i{ position:absolute; display:block; border-radius:50%; }
.glow-blobs i:nth-child(1){ width:44vmax; height:44vmax; left:-14vmax; top:-12vmax; background:var(--toxic);
  animation:drift 22s var(--ease) infinite alternate; }
.glow-blobs i:nth-child(2){ width:34vmax; height:34vmax; right:-12vmax; top:28vh; background:var(--lime);
  animation:drift 27s var(--ease) infinite alternate-reverse; }
.glow-blobs i:nth-child(3){ width:30vmax; height:30vmax; left:22vw; bottom:-14vmax; background:var(--pink);
  animation:drift 31s var(--ease) infinite alternate; }
@keyframes drift{ from{ transform:translate3d(0,0,0) scale(1);} to{ transform:translate3d(6vw,-5vh,0) scale(1.18);} }

/* ---- app shell / screens ---- */
#app{ position:relative; z-index:1; height:100%; }

.screen{
  position:absolute; inset:0;
  display:none;
  padding:max(16px, env(safe-area-inset-top)) 18px calc(20px + env(safe-area-inset-bottom));
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.screen.is-active{ display:block; animation:screen-in .45s var(--ease) both; }
@keyframes screen-in{ from{ opacity:0; transform:translateY(18px) scale(.985);} to{ opacity:1; transform:none;} }

/* =========================================================
   SHARED BITS
   ========================================================= */
.kicker{
  margin:0 0 10px; font-size:12px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--yellow);   /* yellow, so the lime costume name below stands out */
}
.btn{
  appearance:none; border:0; cursor:pointer; font-family:inherit;
  font-size:17px; font-weight:800; letter-spacing:.01em;
  padding:16px 24px; border-radius:var(--r-pill); color:#120A1E;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
}
.btn-primary{
  background:linear-gradient(135deg, var(--lime) 0%, var(--yellow) 55%, var(--pink) 130%);
  box-shadow:0 10px 0 #2E6B23, 0 18px 34px rgba(123,217,96,.28);
}
.btn-primary:active{ transform:translateY(6px); box-shadow:0 4px 0 #2E6B23, 0 8px 18px rgba(123,217,96,.25); }
.btn-ghost{
  background:transparent; color:var(--ink);
  box-shadow:inset 0 0 0 2px rgba(198,175,255,.45);
}
.btn-ghost:active{ transform:translateY(2px); background:rgba(182,56,232,.14); }
.btn:disabled{ filter:grayscale(.7) brightness(.7); cursor:progress; }

.link-btn{
  display:block; margin:16px auto 0; background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:700; color:var(--ink-dim);
  text-decoration:underline; text-underline-offset:4px;
}
.link-btn:active{ color:var(--pink); }

.icon-btn{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%; cursor:pointer;
  border:0; background:rgba(255,255,255,.07); color:var(--ink);
  font-size:19px; line-height:1; font-family:inherit;
}
.icon-btn:disabled{ opacity:.28; cursor:default; }

/* =========================================================
   SCREEN 1 — COVER
   ========================================================= */
/* Fixed copy sits at its natural size; the card art absorbs whatever
   height is left, so the whole cover fits without scrolling. */
.cover{
  max-width:520px; height:100%; margin:0 auto; text-align:center;
  display:flex; flex-direction:column; align-items:center;
  justify-content:center;
  justify-content:safe center;     /* never clip the top when it overflows */
  gap:clamp(10px, 2.2vh, 18px);
}
.cover-title{
  margin:0; font-size:clamp(28px, 8.6vw, 46px); line-height:1.04;
  font-weight:900; letter-spacing:-.02em; text-wrap:balance;
}
.cover-title em{
  font-style:normal; color:var(--lime);
  text-shadow:0 0 26px rgba(123,217,96,.55);
}
.cover-sub{ margin:0; max-width:38ch; font-size:clamp(13.5px, 3.9vw, 15.5px); line-height:1.45; color:var(--ink-dim); }
.cover-art{
  flex:1 1 auto; min-height:118px; width:100%;
  display:flex; align-items:center; justify-content:center;
  animation:bob 5s var(--ease) infinite alternate;
  filter:drop-shadow(0 22px 40px rgba(0,0,0,.55));
}
.cover-art svg{ height:100%; width:auto; max-width:min(224px, 52vw); display:block; }
@keyframes bob{ from{ transform:translateY(-6px) rotate(-1.2deg);} to{ transform:translateY(8px) rotate(1.4deg);} }
.cover .btn-primary{ flex:0 0 auto; }
.cover-foot{ margin:0; font-size:12.5px; color:#6B5F8C; }

/* =========================================================
   SCREEN 2 — QUIZ
   ========================================================= */
.quiz-head{ display:flex; align-items:center; gap:12px; max-width:560px; margin:6px auto 0; }
.progress{ flex:1 1 auto; height:10px; border-radius:var(--r-pill); background:rgba(255,255,255,.09); overflow:hidden; }
.progress-fill{
  height:100%; width:20%; border-radius:var(--r-pill);
  background:linear-gradient(90deg, var(--lime), var(--yellow) 55%, var(--pink));
  box-shadow:0 0 18px rgba(242,75,182,.55);
  transition:width .55s var(--ease);
}
.progress-label{ flex:0 0 auto; font-size:13px; font-weight:800; color:var(--ink-dim); width:34px; text-align:right; }

#screen-quiz.is-active{ display:flex; flex-direction:column; }
.quiz-body{
  flex:1 1 auto; width:100%; max-width:560px; margin:0 auto;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(16px, 3.4vh, 34px) 0 clamp(12px, 2vh, 30px);
}
.q-index{ margin:0 0 8px; font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--toxic); }
.q-text{
  margin:0 0 clamp(14px, 2.6vh, 26px); font-size:clamp(21px, 6.2vw, 31px);
  line-height:1.18; font-weight:900; letter-spacing:-.015em; text-wrap:balance;
}
.q-text.is-forced{ color:var(--yellow); text-shadow:0 0 28px rgba(245,230,99,.35); }

.options{ display:grid; gap:clamp(8px, 1.4vh, 12px); }
.opt{
  position:relative; text-align:left; cursor:pointer; font-family:inherit;
  padding:clamp(13px, 1.9vh, 18px) 54px clamp(13px, 1.9vh, 18px) 20px; border-radius:22px;
  font-size:clamp(15px, 4.2vw, 16.5px); font-weight:700; line-height:1.32; color:var(--ink);
  background:linear-gradient(160deg, rgba(95,72,146,.55), rgba(30,22,52,.75));
  border:2px solid rgba(182,56,232,.34);
  transition:transform .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
  animation:opt-in .42s var(--ease) both;
}
.opt:nth-child(1){ animation-delay:.03s } .opt:nth-child(2){ animation-delay:.09s }
.opt:nth-child(3){ animation-delay:.15s } .opt:nth-child(4){ animation-delay:.21s }
@keyframes opt-in{ from{ opacity:0; transform:translateX(-14px);} to{ opacity:1; transform:none;} }
.opt::after{
  content:"\203A"; position:absolute; right:20px; top:50%; transform:translateY(-52%);
  font-size:26px; font-weight:900; color:var(--lime); opacity:.55;
}
.opt:active{ transform:scale(.985); }
.opt.is-picked{
  border-color:var(--lime); background:linear-gradient(160deg, rgba(123,217,96,.30), rgba(30,22,52,.85));
  box-shadow:0 0 0 4px rgba(123,217,96,.16), 0 0 34px rgba(123,217,96,.30);
}
.options.is-forced .opt{ border-color:rgba(245,230,99,.4); padding-block:22px; }
.options.is-forced .opt::after{ color:var(--yellow); }

/* =========================================================
   SCREEN 3 — RESULT + CUSTOMIZER
   ========================================================= */
.result-wrap{ max-width:560px; margin:0 auto; padding:6px 0 34px; text-align:center; }

/* The costume image and taglines scroll naturally with the result. */
.card-stage{
  position:relative;
  display:flex; justify-content:center; align-items:center; gap:18px;
  padding:6px 0 14px; margin:0 0 16px;
  background:rgba(15,19,28,.86);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-radius:0 0 var(--r-lg) var(--r-lg);
}
.card-mount{
  aspect-ratio:1080 / 1670;
  height:min(58vh, 620px);
  height:min(58svh, 620px);
  width:auto; max-width:65%; flex:0 1 auto;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:0 26px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05);
  animation:card-pop .6s var(--ease) both;
}
@keyframes card-pop{
  0%{ opacity:0; transform:translateY(26px) scale(.9) rotate(-2.5deg); }
  60%{ transform:translateY(0) scale(1.02) rotate(.8deg); }
  100%{ opacity:1; transform:none; }
}
.card-mount svg{ display:block; width:100%; height:100%; }

/* the verdict — name and blurb, the part you actually read */
.verdict{ text-align:left; margin:0 0 20px; }
.result-name{
  margin:0 0 10px; font-size:clamp(23px, 6.4vw, 30px); line-height:1.1;
  font-weight:900; letter-spacing:-.02em; color:var(--lime); text-wrap:balance;
}
.result-blurb{
  margin:0; font-size:15px; line-height:1.58; color:#CFC5E8;
  max-width:46ch;
}
.kicker.is-rare{
  color:var(--yellow);
  text-shadow:0 0 22px rgba(245,230,99,.55);
  animation:rare-pulse 2.4s var(--ease) infinite alternate;
}
@keyframes rare-pulse{ from{ opacity:.72; } to{ opacity:1; } }

/* customizer */
.customizer{
  text-align:left; background:rgba(255,255,255,.035);
  border:1px solid rgba(198,175,255,.14);
  border-radius:var(--r-lg); padding:16px 16px 18px; margin-bottom:20px;
}
.cust-row + .cust-row{ margin-top:14px; padding-top:14px; border-top:1px dashed rgba(198,175,255,.14); }
.cust-label{
  display:block; margin-bottom:9px; font-size:11.5px; font-weight:800;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-dim);
}
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  cursor:pointer; font-family:inherit; font-size:13.5px; font-weight:700;
  padding:9px 14px; border-radius:var(--r-pill); color:var(--ink);
  background:rgba(182,56,232,.12); border:1.5px solid rgba(182,56,232,.35);
  transition:transform .14s var(--ease), background .14s var(--ease), border-color .14s var(--ease);
}
.chip:active{ transform:scale(.94); }
.chip.is-on{
  background:var(--lime); border-color:var(--lime); color:#10240B;
  box-shadow:0 0 20px rgba(123,217,96,.4);
}
.chips-swatch .chip{ width:38px; height:38px; padding:0; border-radius:50%; border-width:2px; }
.chips-swatch .chip.is-on{ box-shadow:0 0 0 3px var(--bg), 0 0 0 5px var(--ink); }

.text-input{
  width:100%; font-family:inherit; font-size:15px; font-weight:700; color:var(--ink);
  padding:13px 15px; border-radius:16px;
  background:rgba(10,15,24,.7); border:1.5px solid rgba(198,175,255,.22);
}
.text-input::placeholder{ color:#6B5F8C; font-weight:600; }
.text-input:focus{ outline:none; border-color:var(--lime); box-shadow:0 0 0 3px rgba(123,217,96,.18); }

.result-actions{ display:grid; grid-template-columns:1fr 1.35fr; gap:10px; }

/* =========================================================
   SCREEN 4 — SHARE
   ========================================================= */
.share-wrap{
  max-width:520px; height:100%; margin:0 auto; text-align:center;
  display:flex; flex-direction:column; align-items:center;
  justify-content:center;
  justify-content:safe center;
  gap:clamp(10px, 2vh, 16px);
}
.share-title{ margin:0; font-size:clamp(22px,6.4vw,32px); font-weight:900; letter-spacing:-.02em; text-wrap:balance; }
.share-preview{
  flex:0 0 auto; width:100%;
  display:flex; align-items:center; justify-content:center;
  animation:card-pop .55s var(--ease) both;
}
.share-preview img{
  width:min(78%, 320px); height:auto; aspect-ratio:9 / 16; object-fit:contain; display:block; flex:none;
  border-radius:22px; background:var(--canvas);
  box-shadow:0 24px 54px rgba(0,0,0,.6);
}
.share-actions{ flex:0 0 auto; width:100%; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.share-hint{ margin:0; max-width:34ch; font-size:13px; line-height:1.45; color:var(--ink-dim); }
.share-wrap .link-btn{ margin:0; }
.share-foot{ margin:0; font-size:12.5px; color:#6B5F8C; letter-spacing:.04em; }

/* =========================================================
   TOAST
   ========================================================= */
.toast{
  position:fixed; left:50%; bottom:calc(26px + env(safe-area-inset-bottom));
  transform:translate(-50%, 26px); z-index:80;
  padding:13px 20px; border-radius:var(--r-pill);
  background:#1B1230; border:1.5px solid var(--lime); color:var(--ink);
  font-size:14px; font-weight:700; opacity:0; pointer-events:none;
  transition:opacity .26s var(--ease), transform .26s var(--ease);
  max-width:86vw;
}
.toast.is-on{ opacity:1; transform:translate(-50%,0); }

/* =========================================================
   LARGER SCREENS
   ========================================================= */
@media (min-width:900px) and (min-height:640px){
  .result-wrap{ max-width:620px; }
  .card-mount{ max-width:65%; }
}

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

/* Fixed editorial taglines, not caption controls. */
.tagline-pills{display:flex;flex-direction:column;align-items:flex-start;gap:12px;flex:1;min-width:0;max-width:210px;text-align:left;}
.tagline-pill{display:block;padding:11px 15px;border-radius:24px;background:var(--yellow);color:#160F2C;font-size:14px;line-height:1.35;overflow-wrap:anywhere;transform:rotate(2deg);}
.tagline-pill:nth-child(even){background:var(--lime);transform:rotate(-2deg);}
@media(max-width:420px){.card-stage{gap:10px}.tagline-pill{font-size:12px;padding:9px 11px}.tagline-pills{gap:10px}.card-mount{height:auto;width:61%;}}
/* Compact costume result: supplied artwork and fixed personality pills. */
.result-wrap{max-width:590px;padding:0;margin:auto;display:flex;flex-direction:column;gap:10px;}
.result-wrap>.kicker{font-size:10px;margin:0;}
.result-name{font-size:clamp(20px,5.4vw,28px);margin:0;text-align:center;line-height:1.16;}
.card-stage{position:relative;margin:0;padding:0;gap:14px;background:none;backdrop-filter:none;border-radius:0;align-items:center;}
.card-mount{aspect-ratio:3/4;height:clamp(190px,36svh,370px);width:auto;max-width:65%;border-radius:16px;flex:0 0 auto;animation:none;}
.tagline-pills{gap:9px;max-width:195px;}
.tagline-pill{font-size:clamp(11px,3vw,14px);padding:9px 12px;line-height:1.35;}
.verdict{margin:0;text-align:left;}
.result-blurb{font-size:14px;line-height:1.45;max-width:none;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}
.result-blurb.expanded{display:block;overflow:visible;}
.blurb-toggle{padding:3px 0;background:none;border:0;color:var(--lime);font:inherit;font-size:12px;text-decoration:underline;cursor:pointer;}
.background-control{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--ink-dim);font-size:13px;text-align:left;}
.background-control select{min-height:42px;flex:1;max-width:240px;font:inherit;color:var(--ink);background:#21192e;border:1px solid #6b5785;border-radius:12px;padding:8px 12px;}
.result-actions{display:block;}
.result-actions .btn{width:100%;padding:12px 20px;font-size:15px;box-shadow:0 4px 0 #2e6b23;}
.result-wrap>.link-btn{margin:3px 0 0;font-size:12px;min-height:30px;}
@media(max-height:700px){.result-wrap{gap:7px}.card-mount{height:32svh;min-height:165px}.tagline-pill{font-size:11px;padding:7px 10px}.result-blurb{font-size:13px}.result-name{font-size:21px}}
@media(max-width:360px){.card-stage{gap:9px}.tagline-pill{padding:7px 9px}.card-mount{max-width:59%}}
/* No depress, bounce or scale effect on pill buttons. */
.btn:active,.btn-primary:active,.btn-ghost:active,.chip:active,.opt:active{transform:none;}
.btn-primary,.btn-primary:active{box-shadow:0 4px 18px rgba(123,217,96,.18);}
.result-actions .btn,.result-actions .btn:active{box-shadow:none;}
.swipe-card{touch-action:none;user-select:none;cursor:grab;border:1px solid rgba(198,175,255,.32);border-radius:28px;padding:28px 22px;background:linear-gradient(140deg,#493369,#211b32);min-height:220px;display:flex;flex-direction:column;justify-content:center;text-align:center;will-change:transform;}
.swipe-card:active{cursor:grabbing}.swipe-card:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.swipe-card .q-text{margin:0;font-size:clamp(22px,5.5vw,29px);line-height:1.3;}
.swipe-cue{color:var(--lime);font-size:34px;margin-top:14px}.four-way .swipe-cue{font-size:0}.four-way .swipe-cue:after{content:'↑  →  ↓  ←';font-size:24px}
.swipe-hint{color:var(--ink-dim);font-size:12px;text-align:center;margin:14px 0;}
.options{grid-template-columns:1fr 1fr;gap:10px;}
.opt,.options.is-forced .opt{padding:14px 10px;text-align:center;border-radius:16px;font-size:14px;animation:none;min-height:52px;}
.opt:after{content:none}.options.is-forced{grid-template-columns:1fr 1fr 1fr;gap:7px;}
.options.is-forced .opt[data-direction=up]{grid-column:2;grid-row:1;}
.options.is-forced .opt[data-direction=left]{grid-column:1;grid-row:2;}
.options.is-forced .opt[data-direction=right]{grid-column:3;grid-row:2;}
.options.is-forced .opt[data-direction=down]{grid-column:2;grid-row:3;}
@media(max-height:740px){.swipe-card{min-height:165px;padding:18px}.quiz-body{padding:12px 0;justify-content:center}.swipe-card .q-text{font-size:21px}.options.is-forced .opt{font-size:12px;min-height:45px;padding:9px 5px}.swipe-hint{margin:10px 0}}
/* Tight, shadow-free layouts. Use matching intrinsic dimensions to avoid SVG letterboxing. */
.cover-art{filter:none;animation:none;}
.cover-art svg{height:auto;width:min(100%,220px);max-height:100%;aspect-ratio:3/4;}
.card-mount,.share-preview img{box-shadow:none;filter:none;}
.result-wrap{gap:9px;max-width:500px;}
.result-wrap .tagline-pills{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-width:none;width:100%;flex:none;text-align:center;}
.result-wrap .tagline-pill{transform:none;font-size:12px;padding:7px 9px;line-height:1.3;}
.card-stage{display:flex;justify-content:center;align-items:center;gap:14px;margin:0;padding:0;}
.card-mount{height:clamp(170px,30svh,300px);width:auto;max-width:none;min-height:0;flex:none;aspect-ratio:3/4;border-radius:12px;overflow:hidden;}
.card-mount svg{width:auto;height:100%;aspect-ratio:3/4;display:block;}
.background-picker{display:flex;flex-direction:column;gap:10px;flex:none;}
.background-icon{width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:2px solid #9c8db4;border-radius:50%;overflow:hidden;background:#fff;cursor:pointer;}
.background-icon img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(2);}
.background-icon[aria-pressed=true]{border:3px solid var(--lime);outline:2px solid var(--lime);outline-offset:2px;}
.background-icon:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;}
.result-blurb{display:block;overflow:visible;-webkit-line-clamp:unset;font-size:14px;line-height:1.45;margin:0;}
.verdict{margin:0;}
.share-title{font-size:clamp(18px,5vw,26px);line-height:1.2;max-width:24ch;}
.quiz-head{width:100%;}.progress{min-height:9px;}
/* Press feedback without any movement or changing dimensions. */
button:active:not(:disabled){filter:brightness(.78);}
.btn:active,.btn-primary:active,.btn-ghost:active,.chip:active,.opt:active{transform:none;}
.opt:active:not(:disabled){background:#655077;border-color:var(--lime);}
.link-btn:active{color:var(--lime);text-decoration-thickness:2px;}
button:focus-visible{outline:2px solid var(--yellow);outline-offset:3px;}
/* Let the result breathe; short phones can scroll naturally. */
.cover-title{font-size:clamp(30px,8vw,44px);overflow-wrap:normal;}
.share-title{overflow-wrap:normal;}
.result-wrap{max-width:620px;gap:16px;padding:8px 0 24px;}
.result-name{font-size:clamp(22px,5.7vw,30px);}
.card-stage{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:16px;align-items:start;}
.card-stage .card-mount{width:100%;height:auto;min-height:0;max-width:none;aspect-ratio:3/4;}
.card-stage .card-mount svg{display:block;width:100%;height:auto;}
.card-sidebar{display:flex;flex-direction:column;gap:20px;min-width:0;}
.card-sidebar .tagline-pills{display:flex;flex-direction:column;align-items:flex-start;gap:9px;text-align:left;}
.result-wrap .card-sidebar .tagline-pill{font-size:13px;padding:9px 11px;line-height:1.35;}
.card-sidebar .background-picker{display:grid;grid-template-columns:44px 44px;gap:12px;padding:3px;}
.card-sidebar .background-icon{width:44px;height:44px;min-width:44px;min-height:44px;}
.result-blurb{font-size:15px;line-height:1.5;}
@media(max-width:370px){.card-stage{gap:12px;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}.result-wrap .card-sidebar .tagline-pill{font-size:12px;padding:8px 10px}.card-sidebar{gap:16px}}
.cover-art{position:relative;min-height:260px;isolation:isolate;}
.cover-fan-card{position:absolute;width:min(38vw,180px);transform-origin:50% 85%;animation:fan-in 1.25s ease both;}
.cover-art .cover-fan-card svg{width:100%;height:auto;max-width:none;}
.fan-0{z-index:3;--fan-x:0px;--fan-r:0deg;}
.fan-1{z-index:1;--fan-x:-48px;--fan-r:-15deg;}
.fan-2{z-index:2;--fan-x:48px;--fan-r:15deg;}
@keyframes fan-in{0%{opacity:0;transform:translateY(18px) scale(.92);}25%,45%{opacity:1;transform:translateY(0) rotate(0);}100%{opacity:1;transform:translateX(var(--fan-x)) rotate(var(--fan-r));}}
.compatibility{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px 0;border-top:1px solid rgba(244,241,255,.15);}
.compatibility h3{font-size:12px;font-weight:400;color:var(--lime);margin:0 0 12px;}
.compatibility-group:last-child h3{color:#F2A9CE;}
.compatibility ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.compatibility li{display:flex;align-items:center;gap:9px;font-size:12px;line-height:1.35;min-height:48px;}
.profile-avatar{width:46px;height:46px;flex:none;border-radius:50%;background:#3B304A;padding:4px;overflow:hidden;}
@media(prefers-reduced-motion:reduce){.cover-fan-card{animation:none;transform:translateX(var(--fan-x)) rotate(var(--fan-r));}}

/* =========================================================
   CLEARER SWIPE UI — familiar card stack, choice stamps and actions
   ========================================================= */
.swipe-card{
  position:relative; isolation:isolate; overflow:visible;
  box-shadow:0 24px 55px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.04);
  transition:transform .28s var(--ease),box-shadow .2s ease;
}
.swipe-card::before,.swipe-card::after{
  content:"";position:absolute;inset:0;border-radius:28px;z-index:-2;
  background:#302642;border:1px solid rgba(198,175,255,.17);
}
.swipe-card::before{transform:translateY(11px) scale(.965);}
.swipe-card::after{transform:translateY(21px) scale(.925);z-index:-3;opacity:.65;}
.swipe-card.is-dragging{transition:none;box-shadow:0 32px 70px rgba(0,0,0,.5);}
.swipe-card.swiped-left{animation:swipe-left .34s ease-in both;}
.swipe-card.swiped-right{animation:swipe-right .34s ease-in both;}
.swipe-card.swiped-up{animation:swipe-up .34s ease-in both;}
.swipe-card.swiped-down{animation:swipe-down .34s ease-in both;}
@keyframes swipe-left{to{opacity:0;transform:translateX(-125%) rotate(-16deg)}}
@keyframes swipe-right{to{opacity:0;transform:translateX(125%) rotate(16deg)}}
@keyframes swipe-up{to{opacity:0;transform:translateY(-100%) rotate(5deg)}}
@keyframes swipe-down{to{opacity:0;transform:translateY(100%) rotate(-5deg)}}
.swipe-card .q-index,.swipe-card .q-text,.swipe-card .swipe-cue{position:relative;z-index:1;}
.swipe-cue{font-size:11px;text-transform:uppercase;letter-spacing:.14em;margin-top:20px;}
.four-way .swipe-cue{font-size:11px;}
.four-way .swipe-cue::after{content:none;}
.swipe-badge{
  position:absolute;z-index:4;max-width:72%;padding:8px 12px;border:3px solid currentColor;
  border-radius:10px;font-size:13px;font-weight:900;line-height:1.2;text-transform:uppercase;
  background:rgba(15,19,28,.92);opacity:0;pointer-events:none;box-shadow:0 8px 20px rgba(0,0,0,.25);
}
/* left/right labels sit inwards from the corners so they stay on screen while the
   card slides off to that side (still on their own side, not dead centre) */
.swipe-badge-left{left:14%;top:20%;color:var(--pink);transform:rotate(-8deg);}
.swipe-badge-right{right:14%;top:20%;color:var(--lime);transform:rotate(8deg);}
.swipe-badge-up{left:50%;top:9%;color:var(--yellow);transform:translateX(-50%);}
.swipe-badge-down{left:50%;bottom:9%;color:#C6AFFF;transform:translateX(-50%);}
/* while dragging, the answer button the card is leaning towards lights up */
.opt.is-armed{background:#655077;border-color:var(--lime);}
.swipe-actions{margin-top:5px;}
.swipe-actions .opt{
  min-height:78px;padding:10px 12px;display:flex;align-items:center;justify-content:center;gap:9px;
  background:rgba(22,18,33,.92);border-color:rgba(198,175,255,.25);font-size:13px;
}
.opt-symbol{
  display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:50%;
  border:2px solid currentColor;font-size:22px;line-height:1;
}
.opt[data-direction=left]{color:#FF86C8}.opt[data-direction=right]{color:#91E878}
.opt[data-direction=up]{color:#F5E663}.opt[data-direction=down]{color:#C6AFFF}
.opt span:last-child{color:var(--ink);}
.swipe-actions.is-forced .opt{min-height:64px;flex-direction:column;gap:4px;padding:7px 5px;}
.swipe-actions.is-forced .opt-symbol{width:30px;height:30px;flex-basis:30px;font-size:18px;}

/* =========================================================
   REWARD REVEAL — card back, punchline, flip and landing
   ========================================================= */
.reveal-stage{display:none;position:fixed;inset:0;z-index:40;align-items:center;justify-content:center;flex-direction:column;gap:22px;padding:24px;background:radial-gradient(circle at 50% 45%,#3D275B 0,#181324 48%,#0F131C 78%);perspective:1200px;}
#screen-result.is-revealing{overflow:hidden;}
#screen-result.is-revealing .reveal-stage{display:flex;animation:reveal-stage-out 2.35s ease both;}
#screen-result.is-revealing .result-wrap{opacity:0;pointer-events:none;}
.result-wrap{transition:opacity .38s ease;}
.reveal-loading{margin:0;color:var(--yellow);font-size:clamp(13px,3.8vw,17px);font-weight:800;text-align:center;letter-spacing:.02em;animation:loading-wobble .42s ease-in-out infinite alternate;}
.reveal-card{position:relative;width:min(62vw,285px);aspect-ratio:3/4;transform-style:preserve-3d;animation:juicy-reveal 2.25s cubic-bezier(.2,.8,.2,1) both;}
.reveal-card-face{position:absolute;inset:0;overflow:hidden;border-radius:22px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 30px 65px rgba(0,0,0,.58);}
.reveal-card-back{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:25px;text-align:center;background:repeating-radial-gradient(circle at 50% 50%,#6B50A0 0 17px,#2D2148 18px 34px);border:5px solid #B79FE2;color:var(--paper);}
.reveal-card-back::before{content:"";position:absolute;inset:13px;border:2px solid rgba(245,230,99,.8);border-radius:12px;}
.reveal-card-back span{font-size:16px;letter-spacing:.08em;}.reveal-card-back strong{font-size:27px;line-height:1.05;color:var(--lime);}.reveal-card-back i{margin-top:22px;font-size:34px;color:var(--yellow);font-style:normal;}
.reveal-card-front{transform:rotateY(180deg);background:#21192E;}
.reveal-card-front svg{display:block;width:100%;height:100%;}
@keyframes loading-wobble{from{transform:rotate(-1deg) scale(.99)}to{transform:rotate(1deg) scale(1.02)}}
@keyframes juicy-reveal{
  0%{opacity:0;transform:translateY(-35vh) rotateZ(-9deg) rotateY(0) scale(.78)}
  18%{opacity:1;transform:translateY(16px) rotateZ(4deg) rotateY(0) scale(1.04)}
  31%{transform:translateY(-9px) rotateZ(-2deg) rotateY(0) scale(.98)}
  44%{transform:translateY(0) rotateZ(0) rotateY(0) scale(1)}
  68%{transform:translateY(-18px) rotateZ(1deg) rotateY(180deg) scale(1.09)}
  83%{transform:translateY(12px) rotateZ(-1deg) rotateY(180deg) scale(.98)}
  100%{transform:translateY(0) rotateZ(0) rotateY(180deg) scale(1)}
}
@keyframes reveal-stage-out{0%,88%{opacity:1}100%{opacity:0}}

/* =========================================================
   COSTUME KIT + ONE-PER-CATEGORY PLUS-ONE SUGGESTIONS
   ========================================================= */
.costume-kit{padding:20px 0;border-top:1px solid rgba(244,241,255,.15);text-align:left;}
.section-heading{margin-bottom:13px;}.section-eyebrow{margin:0 0 4px;color:var(--yellow);font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;}
.section-heading h3{margin:0;font-size:18px;color:var(--ink);}
.costume-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.costume-item{min-width:0;padding:11px 9px 12px;border:1px solid rgba(198,175,255,.22);border-radius:16px;background:rgba(95,72,146,.18);text-align:center;}
.item-picture{display:grid;place-items:center;width:100%;aspect-ratio:1.25/1;margin-bottom:8px;border-radius:12px;background:linear-gradient(145deg,#F5E663,#7BD960);overflow:hidden;}
.costume-item:nth-child(2) .item-picture{background:linear-gradient(145deg,#F24BB6,#B638E8)}
.costume-item:nth-child(3) .item-picture{background:linear-gradient(145deg,#C6AFFF,#7A5FB4)}
.item-picture svg{width:70%;height:70%;fill:none;stroke:#21192E;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;}
.item-picture .spark{stroke-width:4}.costume-item span{display:block;font-size:12px;font-weight:800;line-height:1.3;overflow-wrap:anywhere;}
.compatibility-group{text-align:left;padding:14px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid rgba(198,175,255,.14);}
.compatibility h3{margin-bottom:4px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;}
.compatibility-group>p{margin:0 0 10px;color:var(--ink-dim);font-size:11px;}
.plus-one{display:flex;align-items:center;gap:10px;min-height:50px;font-size:12px;font-weight:800;line-height:1.3;}

@media(max-width:390px){
  .costume-items{gap:7px}.costume-item{padding:8px 6px}.costume-item span{font-size:10px}
  .compatibility{gap:9px}.compatibility-group{padding:10px}.plus-one{align-items:flex-start;flex-direction:column}.profile-avatar{width:42px;height:42px}
}
@media(prefers-reduced-motion:reduce){
  .reveal-card{animation:none;transform:rotateY(180deg)}.reveal-loading{animation:none}
  #screen-result.is-revealing .reveal-stage{animation:none}
}
/* Portrait questions, explicit direction labels, and a single companion group. */
.swipe-card{width:min(100%,300px);aspect-ratio:3/4;min-height:0;flex-shrink:0;align-self:center;margin-inline:auto;padding:28px 24px;}
.swipe-card::before,.swipe-card::after{display:none;}
.swipe-actions,.swipe-actions.is-forced{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;}
.swipe-actions .opt,.swipe-actions.is-forced .opt{flex-direction:row;justify-content:flex-start;text-align:left;min-height:74px;padding:10px;gap:9px;}
.opt small{display:block;font-size:10px;color:var(--ink-dim);margin-bottom:5px;}
.item-picture img{width:100%;height:100%;object-fit:contain;padding:8px;}
.compatibility{display:block;text-align:left;}
.compatibility h3{font-size:17px;text-transform:none;letter-spacing:0;margin:0 0 16px;color:var(--lime);}
.plus-one-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.plus-one-list .plus-one{flex-direction:column;align-items:center;text-align:center;}
.plus-one-list .profile-avatar{width:64px;height:64px;}
.reveal-card{animation:none;transform-origin:center center;transition:transform .4s ease;}
.reveal-card-face{backface-visibility:visible;-webkit-backface-visibility:visible;box-shadow:none;}
.reveal-card-front{transform:none;}
#screen-result.is-revealing .reveal-stage{animation:none;background:rgba(15,19,28,.98);transition:background .65s ease;}
#screen-result.is-landing .reveal-stage{background:transparent;pointer-events:none;}
#screen-result.is-landing .result-wrap{opacity:1;}
#screen-result.is-revealing .card-mount{visibility:hidden;}
.reveal-loading{animation:none;transition:opacity .25s;}
@media(max-height:740px){.swipe-card{width:min(100%,240px);padding:22px}.quiz-body{justify-content:flex-start}.swipe-card .q-text{font-size:22px;}}
@media(max-width:600px){
  .result-wrap .card-sidebar .tagline-pill{font-size:11px;white-space:nowrap;overflow-wrap:normal;padding:7px 8px;line-height:1.2;max-width:100%;}
  .card-sidebar .tagline-pills{gap:7px;}
}

/* =========================================================
   COVER v3 — the card fan scales with the space it's given,
   so it reads as the hero on desktop and still fits on phones.
   ========================================================= */
.cover{max-width:660px;gap:clamp(12px,2.2vh,22px);}
.cover-title{font-size:clamp(30px,8vw,52px);}
.cover-sub{font-size:clamp(13.5px,3.9vw,16.5px);}
.cover-art{
  flex:1 1 auto;width:100%;
  min-height:220px;max-height:min(580px,60vh);max-height:min(580px,60svh);
  margin:clamp(2px,1.2vh,12px) 0;
  container-type:size;
}
/* fallback first, then container units where supported */
.cover-fan-card{width:min(44vw,210px);width:min(48cqw,62cqh,340px);}
.fan-1{--fan-x:-34%;--fan-r:-13deg;}
.fan-2{--fan-x:34%;--fan-r:13deg;}
.cover-art{animation:cover-float 5.5s ease-in-out 1.4s infinite alternate;}
@keyframes cover-float{from{transform:translateY(0)}to{transform:translateY(-10px)}}
.cover .btn-primary{padding:17px 34px;font-size:18px;}
@media(prefers-reduced-motion:reduce){.cover-art{animation:none;}}

/* =========================================================
   REVEAL v3 — shuffle-spin, burst, confetti, then land
   ========================================================= */
.reveal-card{transition:none;will-change:transform;}
.reveal-card-face{backface-visibility:visible;-webkit-backface-visibility:visible;box-shadow:0 30px 70px rgba(0,0,0,.55);}
.reveal-card-front{transform:rotateY(180deg);}
.reveal-card-front > .reveal-slide{position:absolute;inset:0;visibility:hidden;}
.reveal-card-front > .reveal-slide.is-on{visibility:visible;}
.reveal-card-front > .reveal-slide svg{display:block;width:100%;height:100%;}
/* JS tracks which side faces the viewer (backface culling is unreliable with nested SVG) */
.reveal-card.show-front .reveal-card-back{opacity:0;}
.reveal-card:not(.show-front) .reveal-card-front{opacity:0;}

.reveal-rays,.reveal-flash{position:absolute;left:50%;top:50%;pointer-events:none;opacity:0;}
.reveal-rays{
  width:170vmax;height:170vmax;margin:-85vmax 0 0 -85vmax;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(245,230,99,.16) 0deg 7deg,transparent 7deg 22deg);
  -webkit-mask:radial-gradient(circle,#000 0 18%,transparent 52%);mask:radial-gradient(circle,#000 0 18%,transparent 52%);
}
.reveal-flash{width:120vmax;height:120vmax;margin:-60vmax 0 0 -60vmax;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.85) 0,rgba(245,230,99,.35) 14%,rgba(182,56,232,.18) 30%,transparent 55%);}
.reveal-stage.is-burst .reveal-rays{animation:rays-in .5s ease-out forwards,rays-spin 14s linear infinite;}
.reveal-stage.is-burst .reveal-flash{animation:flash .9s ease-out forwards;}
@keyframes rays-in{from{opacity:0}to{opacity:1}}
@keyframes rays-spin{to{transform:rotate(360deg)}}
@keyframes flash{0%{opacity:0;transform:scale(.3)}18%{opacity:1}100%{opacity:0;transform:scale(1.2)}}
#screen-result.is-landing .reveal-rays{opacity:0!important;transition:opacity .4s;animation:none;}
.reveal-stage .reveal-card,.reveal-stage .reveal-loading{position:relative;z-index:1;}
.reveal-loading{min-height:1.4em;}
.reveal-loading.is-swap{animation:line-swap .32s ease both;}
@keyframes line-swap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.reveal-loading.is-name{
  color:var(--lime);font-size:clamp(22px,6vw,34px);font-weight:900;letter-spacing:-.01em;
  text-shadow:0 0 26px rgba(123,217,96,.6);animation:name-pop .6s cubic-bezier(.2,1.6,.4,1) both;
}
@keyframes name-pop{0%{opacity:0;transform:scale(.4) rotate(-6deg)}100%{opacity:1;transform:none}}
.reveal-skip{position:absolute;bottom:calc(22px + env(safe-area-inset-bottom));left:0;right:0;margin:0;text-align:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,255,.38);}
#screen-result.is-landing .reveal-skip{opacity:0;}
.confetti-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:55;}
/* don't let the fan box grow taller than width-limited cards need (tall phones) */
.cover-art{max-height:min(580px,60svh,calc(min(100vw - 36px,660px) * .86));}

/* =========================================================
   COVER FAN — drag to swap
   ========================================================= */
.cover-fan-card{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;transition:filter .2s ease;}
.cover-fan-card.is-settled{animation:none;transform:translateX(var(--fan-x)) rotate(var(--fan-r));}
.cover-fan-card.is-dragging{cursor:grabbing;z-index:6!important;filter:drop-shadow(0 24px 30px rgba(0,0,0,.55));}
.cover-fan-card.is-target{filter:brightness(.72) drop-shadow(0 0 0 transparent);}
.cover-fan-card svg{pointer-events:none;}
.cover-fan-card > svg{border-radius:14px;}

/* =========================================================
   QUESTIONS v3 — bright cards, dark type, deck feel,
   phone vs desktop answer layouts
   ========================================================= */
.quiz-body{padding:clamp(10px,2.4vh,26px) 0 0;justify-content:flex-start;min-height:0;}
.quiz-stage{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:clamp(10px,2vh,18px);}
.swipe-zone{
  position:relative;flex:1 1 auto;min-height:190px;
  display:grid;place-items:center;container-type:size;
}
.swipe-zone>*{grid-area:1/1;}
.swipe-card,.swipe-ghost{
  width:min(100cqw,72cqh,330px);aspect-ratio:3/4;height:auto;min-height:0;
  border-radius:26px;
}
.swipe-ghost{background:#2A2140;transform:translateY(12px) rotate(3.5deg) scale(.95);opacity:.55;box-shadow:0 18px 40px rgba(0,0,0,.35);transition:background .3s ease;}
.swipe-ghost.is-empty{opacity:.28;}
.swipe-card{
  margin:0;padding:clamp(20px,7cqw,34px) clamp(18px,6cqw,28px);
  border:0;color:#160F2C;
  box-shadow:0 26px 60px rgba(0,0,0,.5),inset 0 0 0 2px rgba(255,255,255,.35);
  transition:transform .28s var(--ease),box-shadow .2s ease;
}
.swipe-card .q-index{color:rgba(22,15,44,.62);letter-spacing:.14em;font-size:11px;margin-bottom:12px;}
.swipe-card .q-text,.swipe-card .q-text.is-forced{color:#160F2C;text-shadow:none;font-size:clamp(20px,9cqw,30px);line-height:1.2;}
.swipe-card .swipe-cue{color:rgba(22,15,44,.55);font-size:10.5px;letter-spacing:.14em;margin-top:18px;}
.swipe-card.is-entering{animation:card-enter .4s cubic-bezier(.2,.9,.3,1.15) both;}
@keyframes card-enter{from{opacity:.4;transform:translateY(12px) rotate(3.5deg) scale(.95)}to{opacity:1;transform:none}}
.swipe-card.swiped-left{animation:swipe-left .38s cubic-bezier(.5,0,.75,.4) both;}
.swipe-card.swiped-right{animation:swipe-right .38s cubic-bezier(.5,0,.75,.4) both;}
.swipe-card.swiped-up{animation:swipe-up .38s cubic-bezier(.5,0,.75,.4) both;}
.swipe-card.swiped-down{animation:swipe-down .38s cubic-bezier(.5,0,.75,.4) both;}
@keyframes swipe-left{to{opacity:0;transform:translateX(-140%) rotate(-20deg)}}
@keyframes swipe-right{to{opacity:0;transform:translateX(140%) rotate(20deg)}}
@keyframes swipe-up{to{opacity:0;transform:translateY(-120%) rotate(6deg)}}
@keyframes swipe-down{to{opacity:0;transform:translateY(120%) rotate(-6deg)}}
/* stamps read as dark labels on the bright card */
.swipe-badge{background:#160F2C;border-width:3px;font-size:12px;}

/* little arrows on the card edges show which ways it goes */
.edge-arrow{position:absolute;z-index:1;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:rgba(22,15,44,.12);color:rgba(22,15,44,.7);font-size:15px;line-height:1;pointer-events:none;}
.edge-up{top:10px;left:50%;margin-left:-13px;}.edge-down{bottom:10px;left:50%;margin-left:-13px;}
.edge-left{left:10px;top:50%;margin-top:-13px;}.edge-right{right:10px;top:50%;margin-top:-13px;}
.swipe-card:not(.four-way) .edge-up,.swipe-card:not(.four-way) .edge-down{display:none;}

/* ---------- answers: PHONE (default) ---------- */
.swipe-actions,.swipe-actions.is-forced{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin:0;flex:none;}
.swipe-actions.is-forced{grid-template-columns:1fr;gap:7px;}
.swipe-actions .opt,.swipe-actions.is-forced .opt{
  grid-column:auto;grid-row:auto;
  display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;
  min-height:54px;padding:8px 14px 8px 8px;border-radius:999px;text-align:left;
  background:rgba(22,18,33,.9);border:1.5px solid rgba(198,175,255,.22);font-size:14px;line-height:1.25;
}
.swipe-actions.is-forced .opt{min-height:46px;padding-block:5px;font-size:13.5px;}
.swipe-actions .opt-symbol,.swipe-actions.is-forced .opt-symbol{flex:0 0 34px;width:34px;height:34px;font-size:18px;border-width:2px;}
.swipe-actions.is-forced .opt-symbol{flex-basis:30px;width:30px;height:30px;font-size:16px;}
.opt .opt-text{color:var(--ink);min-width:0;}
.opt.is-picked{border-color:currentColor;box-shadow:0 0 0 3px rgba(123,217,96,.18);}
.swipe-hint{margin:10px 0 0;font-size:11.5px;}
#screen-quiz .quiz-body{padding-bottom:4px;}

/* ---------- answers: DESKTOP — placed around the card by direction ---------- */
.quiz-stage.is-desktop{
  display:grid;align-items:center;justify-items:center;
  grid-template-columns:1fr auto 1fr;grid-template-rows:auto;
  grid-template-areas:"left card right";column-gap:26px;row-gap:14px;
  max-width:880px;width:100%;margin:0 auto;flex:1 1 auto;
}
.quiz-stage.is-desktop.is-forced{grid-template-rows:auto auto auto;grid-template-areas:". up ." "left card right" ". down .";}
.quiz-stage.is-desktop .swipe-zone{grid-area:card;container-type:normal;min-height:0;}
.quiz-stage.is-desktop .swipe-card,.quiz-stage.is-desktop .swipe-ghost{width:min(320px,40vh);}
.quiz-stage.is-desktop.is-forced .swipe-card,.quiz-stage.is-desktop.is-forced .swipe-ghost{width:min(300px,33vh);}
.quiz-stage.is-desktop .swipe-card{padding:30px 26px;}
.quiz-stage.is-desktop .swipe-card .q-text{font-size:clamp(20px,3.2vh,28px);}
.quiz-stage.is-desktop .options{display:contents;}
.quiz-stage.is-desktop .opt{width:min(230px,100%);min-height:52px;font-size:14px;}
.quiz-stage.is-desktop .opt[data-direction=left]{grid-area:left;justify-self:end;flex-direction:row-reverse;text-align:right;padding:8px 8px 8px 16px;}
.quiz-stage.is-desktop .opt[data-direction=right]{grid-area:right;justify-self:start;}
.quiz-stage.is-desktop .opt[data-direction=up]{grid-area:up;}
.quiz-stage.is-desktop .opt[data-direction=down]{grid-area:down;}
.quiz-stage.is-desktop .opt-symbol{border-radius:9px;box-shadow:0 3px 0 currentColor;margin-bottom:3px;}
.quiz-stage.is-desktop .opt:hover{background:rgba(52,40,78,.95);border-color:currentColor;}
.quiz-stage.is-desktop ~ .swipe-hint{margin-top:18px;}

@media(max-height:640px){
  .swipe-actions.is-forced .opt{min-height:40px;font-size:12.5px;}
  .swipe-actions.is-forced .opt-symbol{width:26px;height:26px;flex-basis:26px;font-size:14px;}
  .swipe-card .q-index{margin-bottom:6px;}
}
@media(prefers-reduced-motion:reduce){.swipe-ghost{display:none;}}
/* v3 fixes */
.quiz-stage:not(.is-desktop) #options.swipe-actions.is-forced .opt{grid-column:auto;grid-row:auto;}
.swipe-card .q-text,.swipe-card .q-text.is-forced{font-size:min(8.4cqw,6cqh,28px);}
.swipe-card.four-way{padding-inline:38px;}
.swipe-card:not(.four-way){padding-inline:40px;}
.edge-arrow{width:22px;height:22px;font-size:13px;font-family:system-ui,"Segoe UI Symbol",sans-serif;}
.edge-up,.edge-down{margin-left:-11px;}.edge-left,.edge-right{margin-top:-11px;}
.opt-symbol{font-family:system-ui,"Segoe UI Symbol",sans-serif;}
@media (min-width:760px) and (hover:hover) and (pointer:fine){
  #screen-quiz .quiz-body{max-width:920px;}
  .quiz-stage.is-desktop{align-content:center;}
  .quiz-stage.is-desktop .swipe-card .q-text{font-size:clamp(20px,3.2vh,28px);}
  .quiz-stage.is-desktop .opt{width:230px;}
}
@media (min-width:760px) and (hover:hover) and (pointer:fine){
  .quiz-stage.is-desktop .opt{width:auto;min-width:130px;max-width:240px;}
}
@media (min-width:760px) and (hover:hover) and (pointer:fine){
  .quiz-stage.is-desktop{flex:0 0 auto;}
  #screen-quiz .quiz-body{justify-content:center;}
}

/* Costume kit — accessory artwork sits on a warm off-white tile */
.item-picture.has-art,
.costume-item:nth-child(n) .item-picture.has-art{background:#F6F1EA;box-shadow:inset 0 0 0 1px rgba(33,25,46,.08);}
.item-picture.has-art img{padding:6px;}
/* Kit art: pin the image inside its tile so the whole object always shows */
.item-picture{position:relative;}
.item-picture.has-art img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;padding:8%;box-sizing:border-box;}

/* =========================================================
   GRAIN — random film-style noise on the background only
   (sits under the app, so cards, art and buttons stay crisp).
   To remove it, delete this block and the .grain div in index.html.
   ========================================================= */
.grain{
  z-index:1;                     /* above the glow blobs, below #app */
  opacity:.12;
  mix-blend-mode:normal;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.1 -.35'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;
}

/* Costume kit — accessories sit in a dark purple circle */
.costume-item .item-picture,
.costume-item:nth-child(n) .item-picture.has-art{
  width:84%;aspect-ratio:1/1;margin:0 auto 8px;border-radius:50%;
  background:var(--kit-circle,#3B2A5E);box-shadow:inset 0 0 0 2px rgba(198,175,255,.28);
}
.item-picture.has-art img{padding:13%;}

/* Costume kit — no card around each item; tighter section so Save stays in view on phones */
.costume-kit{padding:12px 0 6px;}
.costume-kit .section-heading{margin-bottom:8px;}
.costume-items{gap:6px;}
.costume-item,.costume-item:nth-child(n){padding:0;border:0;background:none;border-radius:0;}
.costume-item .item-picture,
.costume-item:nth-child(n) .item-picture.has-art{width:min(74%,112px);margin:0 auto 5px;}
.costume-item span{font-size:12px;line-height:1.25;}
@media (max-height:700px){
  .costume-item .item-picture,.costume-item:nth-child(n) .item-picture.has-art{width:min(62%,92px);}
  .costume-kit{padding-top:10px;}
}

/* =========================================================
   NOT FEELING IT? — two underlined text links under Save
   ========================================================= */
.reroll{display:flex;flex-direction:column;gap:2px;margin-top:2px;}
.reroll-prompt{margin:0;font-size:13px;color:var(--ink-dim);}
.reroll-actions{display:flex;justify-content:center;align-items:center;gap:22px;}
.reroll-actions .link-btn{margin:0;font-size:14px;min-height:36px;padding:0 4px;}
/* Spin again OR Create your own: two pills of exactly equal width on a grid,
   mirrored around "or" so the row is balanced. Both are the quiz's lime green:
   Create your own is solid (the one we want people to press), Spin again is a
   faded, see-through version of the same green so it sits back. Create still
   wiggles twice after the result lands (nudgeCreate in app.js). */
.reroll-actions{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;}
.reroll-actions .choice-btn{
  width:100%;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:9px 8px;font-size:clamp(11.5px,3.5vw,13px);font-weight:700;line-height:1.1;white-space:nowrap;   /* scales down a touch on narrow phones so "Create your own 🎃" always fits */
  border-radius:var(--r-pill);
}
.reroll-actions #btn-retake{color:var(--lime);background:#2E6B23;box-shadow:none;}   /* solid deep forest green with bright lime text: clearly pressable, but darker than Create your own */
.reroll-actions #btn-create{color:#160F2C;background:var(--lime);box-shadow:0 3px 16px rgba(123,217,96,.3);}
.reroll-or{font-size:12px;color:var(--ink-dim);}
#btn-create .create-emoji{display:inline-block;font-size:15px;line-height:1;}
.reroll-actions #btn-create.is-nudge{animation:create-nudge .9s ease-in-out;}
#btn-create.is-nudge .create-emoji{animation:pumpkin-bob .9s ease-in-out;}
@keyframes pumpkin-bob{0%,100%{transform:none}30%{transform:translateY(-3px) rotate(-12deg) scale(1.2)}60%{transform:translateY(-1px) rotate(10deg) scale(1.1)}}
@keyframes create-nudge{
  0%,100%{transform:none}
  15%{transform:scale(1.12) rotate(-4deg)}
  30%{transform:scale(1.12) rotate(4deg)}
  45%{transform:scale(1.1) rotate(-3deg)}
  60%{transform:scale(1.06) rotate(2deg)}
  75%{transform:scale(1.02) rotate(0)}
}
@media(prefers-reduced-motion:reduce){.reroll-actions #btn-create.is-nudge{animation:none;}}

/* =========================================================
   CREATE YOUR OWN — meeple card, category tabs, 5 items each
   ========================================================= */
/* name your costume: 16px so phones don't zoom in when it's tapped */
.name-field{width:100%;box-sizing:border-box;font:inherit;font-size:16px;color:var(--ink);text-align:center;
  padding:10px 16px;border-radius:var(--r-pill);border:1px solid #6b5785;background:#21192e;}
.name-field::placeholder{color:var(--ink-dim);opacity:.8;}
.name-field:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 2px rgba(123,217,96,.25);}
.create-hint{margin:-4px 0 0;font-size:12px;line-height:1.4;color:var(--ink-dim);text-align:center;max-height:3em;overflow:hidden;transition:opacity .35s ease,max-height .35s ease .2s,margin .35s ease .2s;}
.create-hint.is-gone{opacity:0;max-height:0;margin:-8px 0 0;}
.wear-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:4px;border-radius:var(--r-pill);background:rgba(95,72,146,.22);box-shadow:inset 0 0 0 1px rgba(198,175,255,.2);}
.wear-tab{position:relative;appearance:none;border:0;cursor:pointer;font:inherit;font-size:14px;font-weight:700;color:var(--ink-dim);padding:9px 6px;border-radius:var(--r-pill);background:none;}
.wear-tab[aria-selected=true]{background:var(--lime);color:#120A1E;}
.wear-tab.is-worn::after{content:"";position:absolute;top:7px;right:12px;width:6px;height:6px;border-radius:50%;background:var(--yellow);}
.wear-tab[aria-selected=true].is-worn::after{background:#120A1E;}
/* columns are set in app.js to fit each tab's item count on one row */
.wear-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;}
.wear-item{appearance:none;border:0;background:none;cursor:pointer;font:inherit;color:var(--ink);padding:0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;}
/* light tiles so the black-outlined dress-up art reads clearly */
.wear-pic{display:block;width:100%;max-width:76px;aspect-ratio:1/1;border-radius:50%;background:#EDE6FA;box-shadow:inset 0 0 0 2px rgba(198,175,255,.5);overflow:hidden;}
.wear-pic svg{display:block;width:100%;height:100%;padding:8%;box-sizing:border-box;}
.wear-item[aria-pressed=true] .wear-pic{box-shadow:inset 0 0 0 3px var(--lime);background:#E3F6DA;}
.wear-name{font-size:10.5px;line-height:1.2;color:var(--ink-dim);white-space:nowrap;}
.wear-item[aria-pressed=true] .wear-name{color:var(--lime);}
.create-wrap .card-sidebar{justify-content:flex-start;gap:16px;}
.picker-group{display:flex;flex-direction:column;gap:6px;}
.picker-label{margin:0;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);text-align:left;}
/* Surprise me + Reset: a matching pair of small outlined buttons under the items */
.create-tools{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.create-tools .tool-btn{width:100%;padding:10px 12px;font-size:14px;}
.create-tools .tool-btn:disabled{opacity:.4;filter:none;cursor:default;}
.link-btn:disabled{opacity:.4;cursor:default;}
.share-links{display:flex;justify-content:center;align-items:center;gap:22px;margin-top:16px;}
.share-links .link-btn{margin:0;}
.skin-picker{display:grid;grid-template-columns:repeat(5,24px);gap:5px;padding:3px;}
.skin-swatch{appearance:none;width:24px;height:24px;padding:0;border-radius:50%;border:2px solid rgba(244,241,255,.35);cursor:pointer;}
.skin-swatch[aria-pressed=true]{border:2px solid #120A1E;outline:2px solid var(--lime);outline-offset:1px;}
@media(max-width:370px){.skin-picker{grid-template-columns:repeat(5,20px);gap:4px;}.skin-swatch{width:20px;height:20px;}}

/* =========================================================
   SPOOKS — see the SPOOKS section in app.js to switch any off.
   Gentle fades only: no strobing, and nothing runs with reduced motion.
   ========================================================= */

/* 4. annoyed spirits — the room dims twice (slowly, not a strobe), then a message */
.spook-annoyed{position:fixed;inset:0;z-index:70;display:none;place-items:center;padding:24px;pointer-events:none;background:rgba(6,3,12,.9);}
.spook-annoyed.is-on{display:grid;animation:annoyed-dim 2.3s ease both;}
.spook-annoyed p{margin:0;max-width:16ch;font-size:clamp(24px,7vw,34px);line-height:1.2;text-align:center;color:var(--slime-green);text-shadow:0 0 20px rgba(142,227,63,.45);animation:annoyed-text 2.3s ease both;}
@keyframes annoyed-dim{0%{opacity:0}12%{opacity:1}22%{opacity:.55}34%{opacity:1}44%{opacity:.7}54%,85%{opacity:1}100%{opacity:0}}
@keyframes annoyed-text{0%,40%{opacity:0;transform:scale(.92)}52%{opacity:1;transform:none}60%{transform:translateX(-4px)}64%{transform:translateX(4px)}68%,85%{transform:none;opacity:1}100%{opacity:0}}

@media(prefers-reduced-motion:reduce){.spook-annoyed{display:none!important;}}
/* =========================================================
   SURPRISE ME — magic poof over the card (built in magicPoof, app.js)
   ========================================================= */
.poof{position:fixed;z-index:50;pointer-events:none;overflow:visible;}
/* flat, outline-free cartoon clouds to match the accessory art: one solid fill
   plus a solid darker underside for shading, no gradients */
.poof-cloud{position:absolute;opacity:0;}
.poof-cloud svg{display:block;width:100%;height:100%;}
.poof-cloud .c-main{fill:#C6AFFF;}
.poof-cloud .c-shade{fill:#9F86DA;}
.poof-cloud.is-light .c-main{fill:#E4DAFF;}
.poof-cloud.is-light .c-shade{fill:#C6AFFF;}
.poof-spark{position:absolute;width:16px;height:16px;opacity:0;background:var(--yellow);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);}
.poof-spark.is-lime{background:var(--lime);}/* the 🎲 on Surprise me tumbles while the slot machine spins */
#btn-create-surprise span{display:inline-block;}
#btn-create-surprise.is-rolling span{animation:dice-roll .35s linear infinite;}
@keyframes dice-roll{from{transform:rotate(0)}to{transform:rotate(360deg)}}/* reels: the tab, tile, backdrop and skin swatch pop as each part locks in */
.wear-tab.is-locking{animation:lock-pop .45s cubic-bezier(.3,1.6,.5,1);}
.wear-item.is-locking .wear-pic{animation:lock-pop .45s cubic-bezier(.3,1.6,.5,1),lock-glow .6s ease-out;}
#create-scene .is-locking,.skin-swatch.is-locking{animation:lock-pop .45s cubic-bezier(.3,1.6,.5,1);}
@keyframes lock-pop{0%{transform:scale(.85)}55%{transform:scale(1.18)}100%{transform:none}}
@keyframes lock-glow{0%{box-shadow:inset 0 0 0 3px var(--lime),0 0 0 0 rgba(123,217,96,.7)}100%{box-shadow:inset 0 0 0 3px var(--lime),0 0 0 14px rgba(123,217,96,0)}}
/* =========================================================
   RESULT FITS THE SCREEN — no sticky bar. fitResult() in app.js sizes the card
   so the whole result, including Save and "Not feeling it?", fits on the
   phone's screen without scrolling. .result-dock just groups those controls.
   ========================================================= */
/* "Not feeling it?" sits at the bottom of the screen: the result fills the
   screen height, the dock takes up the leftover space, and the reroll links are
   pushed to its bottom. The gap under Save stretches on tall phones and never
   drops below 20px on short ones. */
#screen-result .result-wrap{padding-bottom:4px;min-height:100%;box-sizing:border-box;}
.result-dock{display:flex;flex-direction:column;gap:20px;flex:1 0 auto;}
.result-dock .reroll{margin-top:auto;}
/* "snug": used first when the result is a little too tall for the screen */
#screen-result.is-snug .result-wrap{gap:9px;}
#screen-result.is-snug .result-blurb{font-size:13px;line-height:1.4;}
#screen-result.is-snug .costume-kit{padding:6px 0 0;}
#screen-result.is-snug .costume-kit .section-heading{margin-bottom:4px;}
#screen-result.is-snug .costume-kit .section-heading h3{font-size:16px;}
#screen-result.is-snug .costume-item .item-picture,
#screen-result.is-snug .costume-item:nth-child(n) .item-picture.has-art{width:min(58%,80px);}
/* "Not feeling it?": 14px, with a little more room between it and the buttons */
.result-dock .reroll-prompt{font-size:14px;}
.result-dock .reroll{gap:9px;}
/* phone pills that are too long for one line wrap onto two balanced lines
   (set by fitMobilePills in app.js) instead of shrinking to a tiny size */
.result-wrap .card-sidebar .tagline-pill.is-wrapped{white-space:normal;text-wrap:balance;line-height:1.15;padding-top:5px;padding-bottom:5px;}/* phones: a little less space between the pills and the backdrop circles, so
   two wrapped pills still keep the column within the card's height */
@media(max-width:600px){.result-wrap .card-sidebar{gap:12px;}}/* short phones: the card is drawn smaller, so the backdrop circles shrink a touch
   (38px, still easy to tap) to keep pills + circles within the card's height */
@media(max-width:600px) and (max-height:700px){
  .result-wrap .card-sidebar{gap:9px;}
  .card-sidebar .background-picker{grid-template-columns:38px 38px;gap:8px;}
  .card-sidebar .background-icon{width:38px;height:38px;min-width:38px;min-height:38px;}
}/* short phones: a little less space around "Not feeling it?" so the result
   card doesn't have to shrink to make room for it */
@media(max-height:700px){
  .result-dock{gap:12px;}
  .reroll-actions .choice-btn{padding:7px 6px;}
  .result-dock .reroll{gap:7px;}
}