/* vice.css: the VICE CITY palettes (vice.js sets html[data-theme]: kccnight by default, vice1|vice2|vice3 by ?theme=).
   Loaded after depth.css. Every rule is scoped to html[data-theme], so ?theme=classic (no data-theme) is untouched.
   Same set, same materials (kraft board, felt patches, brass, printed ink, the test paper): only the paint changes.
   What stays on purpose: the kraft/cardboard itself, the cream paper, Kick's own green (the wordmark, the
   Kick-login patch, live/online dots), and the meaning colours: a right answer is still solid Kick-ish green
   (--cb-right) and a wrong one still solid brick red (--cb-red). No choice board is ever green or red.
   Contrast: ink on every choice board, the CTA and the felt patches is >= 4.5:1 (WCAG AA), checked per theme. */

/* ============ shared: re-dye tokens once per theme, the pieces read them ============ */
/* (never on a revealed choice: .right / .wrong keep style.css's green / brick boards and their inks) */
html[data-theme] :is(.cb-cream,.cb-sky,.cb-lilac,.cb-brass):not(.right):not(.wrong){--cb-text:var(--vc-ink)}
html[data-theme] .cb-cream:not(.right):not(.wrong){--cb-face:var(--vc-cream)}
/* the felt patches (visitor tab, SOUND tab, board header, FULL BOARD, Wrapped): a satin rim in the theme's thread */
html[data-theme] :is(#vtTab,#sndBtn,.lb-head,.vt-full,.lb-full,.wr-side .wr-k){--sat:var(--vc-sat);--sat-dk:var(--vc-sat-dk);--sat-lt:var(--vc-sat-lt)}
html[data-theme] :is(#vtTab,#sndBtn,.lb-head,.wr-side .wr-k){--thread:var(--vc-thread)}
html[data-theme] :is(.vt-full,.lb-full){--thread:var(--cb-laurel)}
/* the CTA: TAKE THE TEST (was Kick green) and NEXT */
html[data-theme] .cta.cb-kick{--cb-face:var(--vc-cta);--cb-edge-c:var(--vc-cta-dk);--cb-text:var(--vc-cta-ink);--cb-score:color-mix(in srgb,var(--vc-cta-ink) 45%,transparent);
  text-shadow:-.6px .5px 0 rgba(255,255,255,.25)}
html[data-theme] .next.cb-orange{--cb-text:var(--vc-ink)}
/* the headline's cut-board letters: line 1 + line 2 (the rank too) */
html[data-theme] h1 .cb-l-face,html[data-theme] .rank{--cb-lface:var(--vc-letter1)}
html[data-theme] .cb-l-face .cb-alt{--cb-lface:var(--vc-letter2)}
/* the test paper: the blue rules and the red margin line, in the theme's two neons (faint, it's still loose-leaf) */
html[data-theme] #quiz{--ex-rule:var(--vc-rule);--ex-margin:var(--vc-margin)}
/* the float's apron */
html[data-theme] #bar{background-color:var(--vc-apron)}
html[data-theme] #bar::before{background:linear-gradient(rgba(255,226,170,.55) 0 1px,transparent 1px),linear-gradient(rgba(255,190,160,.2),rgba(40,16,30,.42)),
  repeating-linear-gradient(90deg,#5c3a18 0 1px,#c88e52 1px 3px,#9a6431 3px 4px)}
/* the old laurel strips' fluted edge (front badge, rank badge stay theirs) */
html[data-theme] .badge::before{background:linear-gradient(rgba(30,12,2,.35),rgba(30,12,2,.1)),repeating-linear-gradient(90deg,var(--cb-laurel-dk) 0 1px,var(--cb-laurel) 1px 3px,var(--cb-laurel-dk) 3px 4px)}

/* ============ 1. SUNSET STRIP: violet > magenta > hot pink > orange sky, teal felt, aqua + flamingo boards ============ */
html[data-theme="vice1"]{
  --cb-laurel:#0d5c66;--cb-laurel-dk:#06323a;
  --cb-sky:#7fe0e4;--cb-sky-dk:#1f7680;            /* aqua */
  --cb-lilac:#d2a6f6;--cb-lilac-dk:#5c2f8e;        /* violet */
  --cb-mustard:#ffa3cf;--cb-mustard-dk:#9a2f68;    /* flamingo (choice boards, score chip, RULES tag) */
  --cb-orange:#ff9a52;--cb-orange-dk:#963c10;      /* sunset (NEXT) */
  --vc-cream:#ffeede;--vc-ink:#21081c;
  --vc-sat:#ff5fae;--vc-sat-dk:#7e1048;--vc-sat-lt:#ffd2e8;--vc-thread:#ffe9f2;
  --vc-cta:#ff4fa3;--vc-cta-dk:#7a0d44;--vc-cta-ink:#2a0419;
  --vc-letter1:#0e9aa6;--vc-letter2:#f2338c;
  --vc-rule:rgba(20,160,185,.34);--vc-margin:rgba(240,50,140,.58);
  --vc-apron:#0c4650}
html[data-theme="vice1"] .face::after{background:linear-gradient(90deg,rgba(104,62,160,.42),rgba(150,110,175,.12) 30%,transparent 55%),
  linear-gradient(0deg,rgba(112,30,78,.42),transparent 26%),linear-gradient(180deg,rgba(150,60,110,.16),transparent 12%),#ffdcd8}
html[data-theme="vice1"] .face::before{background:linear-gradient(270deg,rgba(255,120,175,.78) 0,rgba(255,110,165,.3) 1.2%,rgba(255,110,150,.08) 6%,transparent 14%),
  radial-gradient(70% 80% at 108% 30%,rgba(255,118,150,.3),transparent 70%),linear-gradient(180deg,rgba(255,140,175,.1),transparent 40%)}
html[data-theme="vice1"] .face{box-shadow:2px 0 0 #ff9fc4,3px .5px 0 #a8503a,-1px 0 0 #4e1f36}

/* ============ 2. NEON NIGHT (KCC NIGHT starts from it, then overrides below): deep blue-purple night, the sign lit like a marquee, hot pink + aqua neon ============ */
html:is([data-theme="vice2"],[data-theme="kccnight"]){
  --cb-laurel:#24135a;--cb-laurel-dk:#0d0828;
  --cb-sky:#6fe6f2;--cb-sky-dk:#136a80;
  --cb-lilac:#bfa2ff;--cb-lilac-dk:#4a2ea0;
  --cb-mustard:#ff94d2;--cb-mustard-dk:#8e1660;
  --cb-orange:#ff8a5c;--cb-orange-dk:#8a2a18;
  --vc-cream:#f4ecff;--vc-ink:#120a26;
  --vc-sat:#ff3fae;--vc-sat-dk:#6a0a44;--vc-sat-lt:#ffc8ea;--vc-thread:#c8fbff;
  --vc-cta:#ff3f9e;--vc-cta-dk:#6e0838;--vc-cta-ink:#1e0214;
  --vc-letter1:#10c6d8;--vc-letter2:#ff3fa4;
  --vc-rule:rgba(30,190,220,.38);--vc-margin:rgba(255,50,160,.6);
  --vc-apron:#150d36}
/* the sign at night: a cool multiply with a warm-white spot on the middle (a marquee light), so the paper and ink stay
   readable; neon tubes catch its right (pink) and left (aqua) edges */
html:is([data-theme="vice2"],[data-theme="kccnight"]) .face::after{background:linear-gradient(90deg,rgba(40,40,130,.45),rgba(70,60,150,.14) 30%,transparent 55%),
  linear-gradient(0deg,rgba(30,12,70,.5),transparent 28%),radial-gradient(70% 62% at 50% 46%,#fbf6ff 0,#f0eaff 45%,#b8b0ea 100%)}
html:is([data-theme="vice2"],[data-theme="kccnight"]) .face::before{background:linear-gradient(270deg,rgba(255,63,174,.85) 0,rgba(255,63,174,.32) 1.3%,rgba(255,63,174,.07) 6%,transparent 13%),
  linear-gradient(90deg,rgba(40,226,240,.6) 0,rgba(40,226,240,.18) 1.2%,transparent 6%)}
html:is([data-theme="vice2"],[data-theme="kccnight"]) .face{box-shadow:2px 0 0 #ff7cc8,3px .5px 0 #7a2a6a,-1px 0 0 #1a0e3a,0 0 0 1.5px rgba(255,90,190,.65),0 0 14px 2px rgba(255,63,174,.45),0 0 34px 6px rgba(120,60,255,.22)}
/* neon, sparingly: the CTA and the SOUND / visitor tabs' rims glow */
html:is([data-theme="vice2"],[data-theme="kccnight"]) .cta.cb-kick{box-shadow:0 var(--e) 0 var(--cb-edge-c),-5px calc(var(--e) + 4px) 7px rgba(10,4,30,.45),inset -2px 0 0 rgba(255,200,230,.5),0 0 16px rgba(255,63,158,.55)}
html:is([data-theme="vice2"],[data-theme="kccnight"]) :is(#vtTab,#sndBtn){filter:drop-shadow(0 0 5px rgba(255,63,174,.55))}
html:is([data-theme="vice2"],[data-theme="kccnight"]) .kcc-cut{filter:sepia(.1) saturate(.85) brightness(.58) hue-rotate(-12deg)}
html:is([data-theme="vice2"],[data-theme="kccnight"]) .kcc-far{filter:sepia(.1) saturate(.8) brightness(.5) hue-rotate(-12deg)}
html:is([data-theme="vice2"],[data-theme="kccnight"]) .kcc-map{filter:saturate(.9) brightness(.62) hue-rotate(-10deg) drop-shadow(-4px 6px 5px rgba(4,2,20,.6))}
html:is([data-theme="vice2"],[data-theme="kccnight"]) #twine{filter:brightness(.6)}
html:is([data-theme="vice2"],[data-theme="kccnight"]) .ap-fine,html:is([data-theme="vice2"],[data-theme="kccnight"]) #bar{color:#efe6ff}

/* ============ 3. PASTEL OCEAN DRIVE: noon on the Deco strip; mint felt, flamingo thread, sky aqua, cream ============ */
html[data-theme="vice3"]{
  --cb-laurel:#1c6964;--cb-laurel-dk:#0c3a37;
  --cb-sky:#a6e6f2;--cb-sky-dk:#3a8496;
  --cb-lilac:#d7c4f6;--cb-lilac-dk:#6c58a0;
  --cb-mustard:#ffbcd6;--cb-mustard-dk:#b25c82;
  --cb-orange:#ffb98a;--cb-orange-dk:#a85a2c;
  --vc-cream:#fff6ea;--vc-ink:#1d1a2a;
  --vc-sat:#ff9ec6;--vc-sat-dk:#a8486f;--vc-sat-lt:#ffe4ef;--vc-thread:#fff3ea;
  --vc-cta:#ff86b4;--vc-cta-dk:#a83a68;--vc-cta-ink:#33061f;
  --vc-letter1:#1a9b93;--vc-letter2:#f2588f;
  --vc-rule:rgba(60,170,200,.32);--vc-margin:rgba(245,100,150,.5);
  --vc-apron:#1b5d5a}
html[data-theme="vice3"] .face::after{background:linear-gradient(90deg,rgba(100,140,200,.3),rgba(140,170,215,.08) 30%,transparent 55%),
  linear-gradient(0deg,rgba(80,100,150,.3),transparent 26%),#fff6f0}
html[data-theme="vice3"] .face::before{background:linear-gradient(270deg,rgba(255,205,225,.55) 0,rgba(255,205,225,.2) 1.2%,transparent 10%),
  linear-gradient(180deg,rgba(255,255,255,.12),transparent 40%)}
html[data-theme="vice3"] .face{box-shadow:2px 0 0 #ffd6e4,3px .5px 0 #b7867a,-1px 0 0 #5a4a52}
html[data-theme="vice3"] .kcc-cut{filter:saturate(.85) brightness(1.04)}
html[data-theme="vice3"] .kcc-far{filter:saturate(.8) brightness(1.02) contrast(.94)}
html[data-theme="vice3"] .kcc-map{filter:saturate(.85) brightness(1.02) drop-shadow(-4px 6px 5px rgba(40,60,90,.35))}

/* ============ the KCC crests on the banners: the banners' green turned with the painting (vice.js greenRot), so the
   crest's green felt turns the same way (hue-rotate moves its gold a little too: it reads as brass in that light) ============ */
html[data-theme="vice1"] :is(#kcc-crestL,#kcc-crestR){filter:sepia(.14) saturate(.94) brightness(.95) hue-rotate(58deg)}
html:is([data-theme="vice2"],[data-theme="kccnight"]) :is(#kcc-crestL,#kcc-crestR){filter:sepia(.1) saturate(.85) brightness(.58) hue-rotate(62deg)}
html[data-theme="vice3"] :is(#kcc-crestL,#kcc-crestR){filter:saturate(.85) brightness(1.04) hue-rotate(44deg)}

/* ============ KCC NIGHT (?theme=kccnight): James's pick, Neon Night + Kick Community College. Everything above for
   Neon Night applies; this adds KICK GREEN as the third neon beside hot pink and aqua: the school's felt is deep
   Kick-green felt with a Kick-green satin rim, the headline's first line is Kick green, the crests keep their GOLD
   laurel (no tint, a green halo instead), the KICK COMMUNITY COLLEGE ribbon glows over the marquee light.
   TAKE THE TEST stays hot pink with a Kick-green stitch + glow; ?cta=kick tries a Kick-green CTA with a pink glow. ============ */
html[data-theme="kccnight"]{
  --cb-laurel:#0d3a18;--cb-laurel-dk:#051c0a;
  --vc-sat:#53fc18;--vc-sat-dk:#1d5c10;--vc-sat-lt:#d8ffc8;--vc-thread:#eaffdf;
  --vc-letter1:#4be01c;--vc-letter2:#ff3fa4;
  --vc-apron:#0a2412}
/* the sign: the Neon Night marquee + tubes, and a wide Kick-green haze around it */
html[data-theme="kccnight"] .face{box-shadow:2px 0 0 #ff7cc8,3px .5px 0 #7a2a6a,-1px 0 0 #1a0e3a,0 0 0 1.5px rgba(255,90,190,.65),0 0 14px 2px rgba(255,63,174,.42),0 0 42px 8px rgba(83,252,24,.16)}
/* the marquee light reaches lower than Neon Night's: NEXT and the fact sit near the bottom, keep them AA */
html[data-theme="kccnight"] .face::after{background:linear-gradient(90deg,rgba(40,40,130,.45),rgba(70,60,150,.14) 30%,transparent 55%),
  linear-gradient(0deg,rgba(30,12,70,.26),transparent 16%),radial-gradient(70% 70% at 50% 50%,#fbf6ff 0,#f0eaff 50%,#c4bdf0 100%)}
/* the ribbon over the light layers (z 3/4 inside the face), lit like a neon sign */
html[data-theme="kccnight"] .kcc-ribbon-top{position:relative;z-index:5;
  filter:drop-shadow(0 0 1.2px rgba(120,255,80,.95)) drop-shadow(0 0 9px rgba(83,252,24,.55)) drop-shadow(-3px 5px 4px rgba(10,4,30,.5))}
/* CTA at rest: the hot pink board with Neon Night's pink halo; the Kick-green tube only switches on with hover / focus
   (the button rules at the end of this file) */
html[data-theme="kccnight"] .cta.cb-kick{
  box-shadow:0 var(--e) 0 var(--cb-edge-c),-5px calc(var(--e) + 4px) 7px rgba(10,4,30,.45),inset -2px 0 0 rgba(255,200,230,.5),0 0 14px rgba(255,63,158,.5)}
/* the other try (?cta=kick): Kick-green board, dark ink (AA 13:1), a hot-pink stitch and glow */
html[data-theme="kccnight"][data-cta="kick"] .cta.cb-kick.cb-btn{--cb-face:#53fc18;--cb-edge-c:#1d5c10;--cb-text:#0f220b;--cb-score:#ff3fa4;
  box-shadow:0 var(--e) 0 var(--cb-edge-c),-5px calc(var(--e) + 4px) 7px rgba(10,4,30,.45),inset -2px 0 0 rgba(230,255,200,.5),0 0 14px rgba(83,252,24,.55),0 0 26px 3px rgba(255,63,158,.3)}
/* the felt tabs glow green now (they're Kick-green felt) */
html[data-theme="kccnight"] :is(#vtTab,#sndBtn){filter:drop-shadow(0 0 5px rgba(83,252,24,.5))}
/* the KCC cutouts: night, but no hue shift (Kick green and the crest's gold stay true); crests and pennants get a halo */
html[data-theme="kccnight"] .kcc-cut{filter:saturate(.92) brightness(.64)}
html[data-theme="kccnight"] .kcc-far{filter:saturate(.88) brightness(.56)}
html[data-theme="kccnight"] .kcc-map{filter:saturate(.92) brightness(.66) drop-shadow(-4px 6px 5px rgba(4,2,20,.6))}
html[data-theme="kccnight"] :is(#kcc-crestL,#kcc-crestR){filter:brightness(.88) saturate(1.05) drop-shadow(0 0 1px rgba(150,255,110,.9)) drop-shadow(0 0 7px rgba(83,252,24,.6))}
html[data-theme="kccnight"] :is(#kcc-pennL,#kcc-pennR){filter:brightness(.8) drop-shadow(0 0 4px rgba(83,252,24,.5))}

/* ---- KCC NIGHT buttons (James, 11/3): every button is HOT PINK felt-board, embroidered in Kick-green thread that
   lights up on hover (below). The answer tags keep their A-D boards (and right/wrong) but get the same embroidery.
   Kick's own LOG IN WITH [Kick] patch keeps its black felt, the footer's tiny Re-enroll felt tag keeps its own look. Labels: dark ink on pink, AA in every state. ---- */
html[data-theme="kccnight"] .cb-btn:not(.cb-tag):not(.kick-login):not(.en-re){--cb-face:var(--vc-cta);--cb-edge-c:var(--vc-cta-dk);--cb-text:var(--vc-cta-ink);
  --cb-score:color-mix(in srgb,var(--vc-cta-ink) 45%,transparent);text-shadow:-.6px .5px 0 rgba(255,255,255,.25)}
/* the hover is EMBROIDERY (James: "make that look like an embroidery around it"): the patch language of depth.css on
   every button. A satin rim in Kick-green thread (angled satin stitches + a sheen, the border-box) and a running stitch
   just inside it (the dashed outline). --kn-g is the thread's light, 0 = unlit, 1 = lit: at rest the thread is dim
   pink-on-pink satin (or, with &rest=dim, dim green thread); hover / keyboard focus light
   it like glow-in-the-dark thread (brighter stitches + a soft green glow off them), with one quick flicker as it catches
   (none with reduced motion); press burns brighter. Only --kn-g animates, for .45s on hover-in: no per-frame work.
   :is(.cb-btn,#quiz .cb-btn) = one specificity for all, enough to beat exam.css's #quiz .choice.cb-tag. */
@property --kn-g{syntax:'<number>';inherits:true;initial-value:0}
html[data-theme="kccnight"] :is(.cb-btn,#quiz .cb-btn):not(.kick-login):not(.en-re){
  --kt-lit-lt:#f0ffe2;--kt-lit:#7dff45;--kt-lit-dk:#2fc414;--kt-glow:83,252,24;
  --kt-dim-lt:#ffa8d2;--kt-dim:#e83a90;--kt-dim-dk:#8c1150;
  --kt-lt:color-mix(in srgb,var(--kt-lit-lt) calc(var(--kn-g) * 100%),var(--kt-dim-lt));
  --kt:color-mix(in srgb,var(--kt-lit) calc(var(--kn-g) * 100%),var(--kt-dim));
  --kt-dk:color-mix(in srgb,var(--kt-lit-dk) calc(var(--kn-g) * 100%),var(--kt-dim-dk));
  --kt-rim:linear-gradient(100deg,rgba(0,0,0,.32),transparent 45%,rgba(255,255,255,calc(.22 + var(--kn-g) * .2))) border-box,
    repeating-linear-gradient(62deg,var(--kt-lt) 0 .9px,var(--kt) .9px 2.2px,var(--kt-dk) 2.2px 3.2px) border-box;
  --kt-face:var(--cb-fiber) padding-box,var(--cb-grain) padding-box,var(--cb-light) padding-box,linear-gradient(var(--cb-face),var(--cb-face)) padding-box;
  --kt-halo:0 0 0 transparent;
  border:4px solid transparent;background:var(--kt-face),var(--kt-rim);
  outline:2px dashed var(--kt);outline-offset:-8px;
  /* the satin rim stands proud of the felt: a hair of shadow where the thread meets it, a lit hair on the far side */
  /* one shadow list for every state; the thread's glow terms scale with --kn-g, so hover only turns --kn-g up */
  box-shadow:0 var(--e) 0 var(--cb-edge-c),-5px calc(var(--e) + 4px) 7px rgba(10,4,30,.42),inset 1px -1px 0 rgba(30,0,16,.38),inset -1px 1px 0 rgba(255,235,245,.22),
    inset 0 0 calc(var(--kn-g) * 9px) rgba(var(--kt-glow),calc(var(--kn-g) * .35)),
    0 0 calc(2px + var(--kn-g) * 6px) calc(var(--kn-g) * 1px) rgba(var(--kt-glow),calc(var(--kn-g) * .9)),
    0 0 calc(var(--kn-g) * 22px) calc(var(--kn-g) * 2px) rgba(var(--kt-glow),calc(var(--kn-g) * .5)),
    0 0 calc(var(--kn-g) * 44px) calc(var(--kn-g) * 4px) rgba(var(--kt-glow),calc(var(--kn-g) * .22)),var(--kt-halo);
  transition:transform .12s,--e .12s,--kn-g .2s ease-out,filter .15s}
/* the brass brads on NEXT stay */
html[data-theme="kccnight"] :is(.cb-btn,#quiz .cb-btn).next{
  background:radial-gradient(circle at .75em 50%,#fff2c0 0 .06em,#d9a441 .12em,#6b4a16 .24em,rgba(0,0,0,.35) .28em,transparent .34em) padding-box,
    radial-gradient(circle at calc(100% - .7em) 50%,#fff2c0 0 .06em,#d9a441 .12em,#6b4a16 .24em,rgba(0,0,0,.35) .28em,transparent .34em) padding-box,var(--kt-face),var(--kt-rim)}
/* the punched hole at the gate stays */
html[data-theme="kccnight"] :is(.cb-btn,#quiz .cb-btn).cta.punched{
  background:radial-gradient(circle at 92% 50%,#140b04 0 .3em,#3c240c .33em,rgba(60,36,12,.0) .42em) padding-box,var(--kt-face),var(--kt-rim)}
/* the cut edge sits under the border box now */
html[data-theme="kccnight"] :is(.cb-btn,#quiz .cb-btn):not(.kick-login):not(.en-re)::before{left:-4px;right:-4px;top:calc(100% + 4px)}
/* TAKE THE TEST keeps Neon Night's pink halo at rest */
html[data-theme="kccnight"] :is(.cb-btn,#quiz .cb-btn).cta{--kt-halo:0 0 14px rgba(255,63,158,.5)}
/* at rest the satin is tone-on-tone (the board's own colour): the green only exists once the thread lights (picked
   over the other try, &rest=dim, where the green thread shows dim at rest: cleaner at rest, a bigger moment on hover) */
html[data-theme="kccnight"] :is(.cb-btn,#quiz .cb-btn).cb-tag{--kt-dim-lt:color-mix(in srgb,var(--cb-face) 60%,#fff);--kt-dim:var(--cb-face);--kt-dim-dk:var(--cb-edge-c)}
html[data-theme="kccnight"][data-rest="dim"] :is(.cb-btn,#quiz .cb-btn):not(.kick-login):not(.en-re){--kt-dim-lt:#6f9e58;--kt-dim:#356f25;--kt-dim-dk:#173d0f}
/* lit: hover + keyboard focus (the lit thread is the focus indicator, plus the running stitch thickens) */
html[data-theme="kccnight"] :is(.cb-btn,#quiz .cb-btn):not(.kick-login):not(.en-re):not(:disabled):is(:hover,:focus-visible){--kn-g:1}
html[data-theme="kccnight"] :is(.cb-btn,#quiz .cb-btn):not(.kick-login):not(.en-re):focus-visible{outline:3px dashed var(--kt);outline-offset:-8px}
html[data-theme="kccnight"] :is(.cb-btn,#quiz .cb-btn):not(.kick-login):not(.en-re):not(:disabled):active{--kn-g:1.45}
/* the catch: one quick flicker of the thread's light on hover-in */
@keyframes kn-catch{0%{--kn-g:0}10%{--kn-g:1}18%{--kn-g:.2}30%{--kn-g:.95}42%{--kn-g:.5}58%{--kn-g:1}100%{--kn-g:1}}
@media (prefers-reduced-motion:no-preference){
  html[data-theme="kccnight"] :is(.cb-btn,#quiz .cb-btn):not(.kick-login):not(.en-re):not(:disabled):hover{animation:kn-catch .45s linear 1}
}
@media (prefers-reduced-motion:reduce){html[data-theme="kccnight"] :is(.cb-btn,#quiz .cb-btn){transition:none}}

/* ---- KCC NIGHT follow-spot (vice.js builds #kcSpot): a soft theatre spot that trails the pointer, a warm-white core
   with a faint Kick-green fringe, screen-blended; dimmed way down while the test is up so it never sits on a question ---- */
#kcSpot{position:fixed;left:0;top:0;width:380px;height:380px;margin:-190px 0 0 -190px;z-index:6;pointer-events:none;border-radius:50%;
  mix-blend-mode:screen;opacity:0;will-change:transform,opacity;transition:opacity .45s ease;
  background:radial-gradient(closest-side,rgba(255,249,232,.58),rgba(255,245,222,.38) 30%,rgba(222,255,196,.17) 56%,rgba(83,252,24,.09) 77%,rgba(83,252,24,0))}
#kcSpot.on{opacity:.78}
#kcSpot.on.sign{opacity:.36}
#kcSpot.on.quiz{opacity:.12}

/* ---- KCC NIGHT searchlights (vice.js builds #kcBeams): premiere beams sweeping the sky behind the parade. One layer the
   size of the painting, masked to its open sky (kcc/sky-mask.png, eroded so a tower's parallax never shows a beam on its
   edge), riding the sky's parallax; each beam's gradient is painted once and only its rotation animates (compositor).
   Under the sign (z 3) and #mid, screen-blended, low: the sign stays the hero. Gone while the test is up; held still by
   PAUSE SCENERY; static (no sweep) with reduced motion. ---- */
#kcBeams{position:fixed;left:0;top:0;z-index:2;pointer-events:none;mix-blend-mode:screen;opacity:.6;transition:opacity .8s ease;will-change:transform;
  -webkit-mask:url(kcc/sky-mask.png) 0 0/100% 100% no-repeat;mask:url(kcc/sky-mask.png) 0 0/100% 100% no-repeat}
#kcBeams.quiz{opacity:0}
/* a beam = a soft cone: a conic gradient from its base (angular falloff = soft sides), faded upward by a mask */
#kcBeams i{position:absolute;width:20%;height:95%;margin-left:-10%;transform-origin:50% 100%;rotate:var(--a0);
  background:conic-gradient(from -7.5deg at 50% 100%,transparent 0deg,color-mix(in srgb,var(--bc) 28%,transparent) 3.5deg,var(--bc) 6.6deg,var(--bc) 8.4deg,
    color-mix(in srgb,var(--bc) 28%,transparent) 11.5deg,transparent 15deg,transparent 360deg);
  -webkit-mask:linear-gradient(0deg,#000,rgba(0,0,0,.6) 30%,rgba(0,0,0,.22) 66%,transparent);mask:linear-gradient(0deg,#000,rgba(0,0,0,.6) 30%,rgba(0,0,0,.22) 66%,transparent)}
@keyframes kc-sweep{from{rotate:var(--a0)}to{rotate:var(--a1)}}
@media (prefers-reduced-motion:no-preference){
  #kcBeams i{animation:kc-sweep var(--t) ease-in-out var(--d) infinite alternate}
  #kcBeams.still i{animation-play-state:paused}
}
/* the ?cta=kick try: on a Kick-green board the thread is hot pink (dim at rest, lit on hover) */
html[data-theme="kccnight"][data-cta="kick"] :is(.cb-btn,#quiz .cb-btn).cta.cb-kick{--kt-lit-lt:#ffe6f3;--kt-lit:#ff4fb0;--kt-lit-dk:#b8146c;--kt-glow:255,63,164;
  --kt-dim-lt:#a05a80;--kt-dim:#78305a;--kt-dim-dk:#3e1230}