:root{
  --ink-0:#0E0824;
  --ink-1:#17103A;
  --ink-2:#251A4F;
  --line:#3A2C6E;
  --haze:#A99DD4;
  --paper:#F1ECFF;
  --uv:#58E0F0;
  --uv-deep:#6B5CF0;
  --sun:#FFA23D;
  /* The chosen sunscreen colour. JS rewrites these on swatch change,
     so the meter, swatches and pressed buttons follow the cream. */
  --c0:92,222,240;
  --c1:87,112,245;
  --c2:168,79,240;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:
    radial-gradient(120% 70% at 50% -10%, #2A1B5E 0%, rgba(42,27,94,0) 60%),
    var(--ink-0);
  color:var(--paper);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column;
  min-height:100dvh;
  padding-bottom:env(safe-area-inset-bottom);
}
button{font:inherit}

/* ── Header ─────────────────────────────────────────────── */
.top{
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(12px + env(safe-area-inset-top)) 16px 10px;
}
.top h1{margin:0; font-size:19px; font-weight:700; letter-spacing:-0.02em; display:flex; align-items:center; gap:9px}
.mark{
  width:20px; height:20px; border-radius:50%;
  background:radial-gradient(circle at 38% 35%, #FFF3B0, #FFC24A 55%, #FF8A2B);
  box-shadow:0 0 14px rgba(255,162,61,.55);
}
.top-actions{display:flex; gap:8px}
.icon{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:var(--ink-1); border:1px solid var(--line); color:var(--paper); cursor:pointer; padding:0;
}
.icon svg{width:20px; height:20px; fill:currentColor}
.icon:focus-visible{outline:2px solid var(--uv); outline-offset:2px}
.icon .ic-off{display:none}
.icon[aria-pressed="true"] .ic-on{display:none}
.icon[aria-pressed="true"] .ic-off{display:block}
.icon[aria-pressed="true"]{color:var(--haze)}

main{flex:1; display:flex; flex-direction:column; padding:0 12px 12px; gap:12px; align-items:center}

/* ── Stage ──────────────────────────────────────────────── */
.stage{
  position:relative; overflow:hidden;
  border-radius:20px; background:#0A0620; border:1px solid var(--line);
  width:100%; max-width:560px; aspect-ratio:3/4;
  overscroll-behavior:contain; touch-action:none;
}
.stage canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
#gl{z-index:1; touch-action:none}
#fx{z-index:2; pointer-events:none}
.hidden-video{position:absolute; width:2px; height:2px; opacity:.01; left:0; top:0; pointer-events:none; z-index:0}

.ring{
  position:absolute; z-index:15; pointer-events:none;
  transform:translate(-50%,-50%);
  border:2px solid rgb(var(--c0)); border-radius:50%;
  opacity:0; transition:opacity .12s ease, border-color .12s ease;
  box-shadow:0 0 14px rgba(var(--c0),.55);
}
.ring.miss{border-color:var(--sun); box-shadow:0 0 12px rgba(255,162,61,.5)}

.veil{
  position:absolute; inset:0; z-index:20;
  display:grid; place-content:center; text-align:center; gap:14px; padding:28px;
  background:radial-gradient(80% 60% at 50% 40%, rgba(43,30,85,.92), rgba(10,6,32,.96));
}
.veil h2{margin:0; font-size:18px; font-weight:600}
.veil p{margin:0; color:var(--haze); font-size:14px; line-height:1.5; max-width:32ch}
.veil.hide{display:none}

/* ── Sun popup ──────────────────────────────────────────── */
.sunpop{
  position:absolute; z-index:18; right:12px; top:12px;
  display:flex; flex-direction:row-reverse; align-items:flex-start; gap:8px;
  pointer-events:none;
}
.sunpop[hidden]{display:none}
.sunface{
  pointer-events:auto; flex:none;
  width:76px; height:76px; padding:0; border:0; background:none; cursor:pointer;
  transform:scale(0) rotate(-120deg);
  opacity:.9;   /* mostly opaque: a hint of the scene shows through the disc */
  filter:drop-shadow(0 0 16px rgba(255,214,130,.95)) drop-shadow(0 0 4px rgba(255,250,225,.9));
}
.sunface svg{width:100%; height:100%; overflow:visible}
.s-rays{transform-origin:0 0; animation:spin 9s linear infinite}
.sunpop.in .sunface{animation:sunIn .7s cubic-bezier(.34,1.56,.64,1) forwards, glow 3.2s ease-in-out .7s infinite}
.bubble{
  pointer-events:auto; position:relative;
  background:#FFF8E6; color:#3A1A08; border-radius:16px 4px 16px 16px;
  margin-top:14px; padding:10px 34px 11px 13px; max-width:236px;
  display:flex; flex-direction:column; gap:3px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  transform-origin:100% 0; transform:scale(0); opacity:0;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1) .15s, opacity .2s ease .15s;
}
.sunpop.in .bubble{transform:scale(1); opacity:1}
.sunpop.collapsed .bubble{transform:scale(0); opacity:0; transition-delay:0s; pointer-events:none}
.bubble b{font-size:15px; font-weight:700}
.bubble span{font-size:12.5px; line-height:1.4; color:#6A4220}
.bubble a{
  margin-top:6px; align-self:flex-start;
  font-size:13px; font-weight:600; text-decoration:none;
  background:linear-gradient(180deg,#FFB547,#FF8A2B); color:#3A1A08;
  padding:7px 12px; border-radius:999px; white-space:nowrap;
}
.bubble a[aria-disabled="true"]{background:#F1E3C8; color:#8C6A44; pointer-events:none}
.sunx{
  position:absolute; top:6px; right:6px;
  width:24px; height:24px; border-radius:50%; border:0; cursor:pointer; padding:0;
  background:rgba(58,26,8,.1); color:#6A4220; font-size:16px; line-height:1;
}

@keyframes sunIn{to{transform:scale(1) rotate(0)}}
@keyframes glow{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Meter ──────────────────────────────────────────────── */
.hud{width:100%; max-width:560px; display:flex; flex-direction:column; gap:6px}
.meter{position:relative; height:12px; border-radius:999px; background:var(--ink-1); border:1px solid var(--line); overflow:hidden}
.fill{
  position:absolute; inset:0 auto 0 0; width:0%;
  background:linear-gradient(90deg, rgb(var(--c0)), rgb(var(--c1)), rgb(var(--c2)));
  border-radius:999px; transition:width .45s cubic-bezier(.22,1,.36,1);
}
.tick{position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--sun); left:85%; box-shadow:0 0 6px var(--sun)}
.hud.won .meter{border-color:var(--sun); box-shadow:0 0 16px rgba(255,162,61,.45)}
.hud-row{display:flex; justify-content:space-between; font-size:13px; color:var(--haze); padding:0 2px}
.hud-row b{color:var(--paper); font-family:var(--mono); font-weight:500}
.hud.won .hud-row b#pct{color:var(--sun)}

/* ── Debug (Settings → Show debug info) ─────────────────── */
.debug-only{display:none}
html.debug .debug-only{display:block}
.perf{width:100%; max-width:560px; font-family:var(--mono); font-size:11.5px; color:var(--haze); padding:0 2px}
.perf span{color:var(--paper)}
.log{
  width:100%; max-width:560px; max-height:150px; overflow-y:auto;
  font-family:var(--mono); font-size:11px; line-height:1.6;
  background:var(--ink-1); border:1px solid var(--line); border-radius:12px; padding:9px 11px;
  -webkit-overflow-scrolling:touch;
}
.log:empty{display:none}
.log-line{color:var(--haze); word-break:break-word}
.log-good{color:var(--uv)}
.log-bad{color:#FF7B7B}
.log-hint{color:var(--sun); padding-left:10px; border-left:2px solid var(--sun); margin:4px 0}

/* ── Tray ───────────────────────────────────────────────── */
.tray{width:100%; max-width:560px; display:flex; flex-direction:column; gap:12px}
.row{display:flex; gap:8px; flex-wrap:wrap}
.row button, .veil button, .wide{
  font-size:14.5px; font-weight:500; color:var(--paper);
  background:var(--ink-2); border:1px solid var(--line);
  padding:11px 16px; border-radius:12px; cursor:pointer;
  transition:background .12s ease, transform .08s ease;
}
.row button:active, .wide:active{transform:scale(.96)}
.row button:hover{background:#30225F}
button:focus-visible{outline:2px solid var(--uv); outline-offset:2px}
button.primary{background:linear-gradient(180deg,var(--uv-deep),#5445D6); border-color:#7A6CFF}
button[aria-pressed="true"]{background:rgb(var(--c0)); border-color:rgb(var(--c0)); color:#0E0824}
button:disabled{opacity:.55}
.chip{
  background:linear-gradient(180deg,#FFB547,#FF8A2B) !important; border-color:#FFB547 !important;
  color:#3A1A08 !important; font-weight:600 !important;
  animation:chipIn .5s cubic-bezier(.34,1.56,.64,1);
}
.chip[hidden]{display:none}
@keyframes chipIn{from{transform:scale(0)}to{transform:scale(1)}}

.swatch-row{display:flex; align-items:center; gap:12px}
.lbl{font-size:13px; color:var(--haze)}
.swatch-row{align-items:flex-start}
.swatch-row .lbl{padding-top:7px}
.swatches{display:flex; gap:9px; flex-wrap:wrap}
.swatch{
  width:32px; height:32px; border-radius:50%; padding:0; cursor:pointer;
  border:2px solid var(--ink-0); box-shadow:0 0 0 1px var(--line);
  transition:transform .12s ease, box-shadow .12s ease;
}
.swatch[aria-checked="true"]{box-shadow:0 0 0 2px var(--paper); transform:scale(1.08)}
.swatch:active{transform:scale(.92)}

.note{color:var(--haze); font-size:12.5px; line-height:1.5; text-align:center; padding:4px 20px 22px; margin:0}

/* ── Settings sheet ─────────────────────────────────────── */
dialog.sheet{
  border:none; padding:0 18px 22px; color:var(--paper);
  background:var(--ink-1); width:min(520px,100%); max-width:100%;
  max-height:86dvh; overflow-y:auto; overscroll-behavior:contain;
  margin:auto auto 0; border-radius:22px 22px 0 0;
  border-top:1px solid var(--line);
  padding-bottom:calc(22px + env(safe-area-inset-bottom));
}
dialog.sheet[open]{animation:sheetUp .3s cubic-bezier(.22,1,.36,1)}
dialog.sheet::backdrop{background:rgba(6,3,18,.62); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px)}
@keyframes sheetUp{from{transform:translateY(40px); opacity:0}to{transform:none; opacity:1}}
@media (min-width:700px){ dialog.sheet{margin:auto; border-radius:22px; border:1px solid var(--line)} }

.sheet-head{
  position:sticky; top:0; z-index:1;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0 10px; background:var(--ink-1);
}
.sheet-head h2{margin:0; font-size:18px; font-weight:700}
.done{
  background:var(--uv); color:#08203A; border:0; border-radius:999px;
  padding:8px 16px; font-weight:600; cursor:pointer;
}
.sheet section{padding:12px 0 6px; border-top:1px solid var(--line)}
.sheet h3{margin:0 0 6px; font-size:13px; font-weight:600; color:var(--haze)}

.sw{display:flex; align-items:center; gap:12px; padding:9px 0; cursor:pointer; font-size:15px; position:relative}
.sw input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.sw i{width:44px; height:26px; border-radius:13px; background:var(--line); position:relative; flex:none; transition:background .15s ease}
.sw i::after{
  content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:#fff; transition:transform .18s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 1px 3px rgba(0,0,0,.35);
}
.sw input:checked + i{background:var(--uv)}
.sw input:checked + i::after{transform:translateX(18px)}
.sw input:focus-visible + i{outline:2px solid var(--uv); outline-offset:2px}

.sl{display:flex; flex-direction:column; gap:7px; padding:8px 0; font-size:14px}
.sl > div{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.sl b{font-family:var(--mono); font-weight:500; font-size:12.5px}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:4px; background:var(--line); border-radius:2px; outline:none; margin:6px 0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--uv); border:3px solid var(--ink-1); cursor:pointer}
input[type=range]::-moz-range-thumb{width:16px; height:16px; border-radius:50%; background:var(--uv); border:3px solid var(--ink-1); cursor:pointer}

.wide{width:100%; margin:6px 0 4px}

.coffee{
  margin-top:14px; display:flex; align-items:center; gap:12px; text-decoration:none;
  background:linear-gradient(135deg, #2A1F14, #3A2A12); color:var(--paper);
  border:1px solid #6B5320; border-radius:16px; padding:13px 15px;
}
.coffee svg{width:34px; height:34px; flex:none}
.coffee span{display:flex; flex-direction:column; gap:1px}
.coffee b{font-size:15px; color:#FFDD00}
.coffee small{font-size:12.5px; color:#D8C79A}

/* ── Intro ──────────────────────────────────────────────── */
.intro{
  position:fixed; inset:0; z-index:100; overflow:hidden;
  background:#140B2E; display:flex; flex-direction:column; justify-content:flex-end;
}
.intro[hidden]{display:none}
.intro.out{animation:introOut .45s ease forwards}
@keyframes introOut{to{opacity:0; transform:scale(1.06)}}
.scene{position:absolute; inset:0; width:100%; height:100%}

.skip{
  position:absolute; z-index:2; right:16px; top:calc(14px + env(safe-area-inset-top));
  background:rgba(14,8,36,.55); color:var(--paper); border:1px solid rgba(241,236,255,.25);
  border-radius:999px; padding:8px 16px; font-size:14px; font-weight:500; cursor:pointer;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}

.intro-copy{
  position:relative; z-index:1; text-align:center;
  padding:24px 22px calc(30px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(14,8,36,0), rgba(14,8,36,.82) 30%, rgba(14,8,36,.95));
}
.i-title{margin:0; font-size:44px; font-weight:700; letter-spacing:-0.035em; line-height:1}
.i-tag{margin:10px 0 18px; font-size:16px; color:#FFD9A0}
.i-steps{list-style:none; margin:0 auto 22px; padding:0; display:flex; flex-direction:column; gap:9px; max-width:320px; text-align:left}
.i-steps li{display:flex; align-items:center; gap:12px; font-size:15px; color:var(--paper)}
.i-steps span{
  width:26px; height:26px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:rgba(255,162,61,.18); border:1px solid rgba(255,162,61,.6); color:#FFC24A;
  font-size:13px; font-weight:700;
}
.go{
  width:100%; max-width:320px; border:0; cursor:pointer;
  background:linear-gradient(180deg,#FFC24A,#FF8A2B); color:#2A1206;
  font-size:18px; font-weight:700; padding:16px; border-radius:16px;
  box-shadow:0 10px 30px rgba(255,138,43,.45);
}

/* Choreography: sun rises, waves roll, sun puts on shades, copy lands. */
.i-sun{transform:translateY(-90px)}
.i-rays{transform-box:view-box; transform-origin:200px 400px}
.i-wave{transform-box:view-box}
.play .i-sun{animation:rise 1.8s cubic-bezier(.22,1,.36,1) both}
.play .i-rays{animation:spin 26s linear infinite}
.play .i-glasses{animation:shadesDrop .8s cubic-bezier(.34,1.56,.64,1) 2.1s both}
.play .w1{animation:roll 7s linear infinite}
.play .w2{animation:roll 5s linear infinite reverse}
.play .w3{animation:roll 3.6s linear infinite}
.play .i-glints rect{animation:glint 2.4s ease-in-out infinite}
.play .i-glints rect:nth-child(2){animation-delay:.8s}
.play .i-glints rect:nth-child(3){animation-delay:1.6s}
.play .i-title{animation:pop .7s cubic-bezier(.34,1.56,.64,1) .9s both}
.play .i-tag{animation:fadeUp .5s ease 1.3s both}
.play .i-steps li{animation:fadeUp .45s ease both}
.play .i-steps li:nth-child(1){animation-delay:1.6s}
.play .i-steps li:nth-child(2){animation-delay:1.85s}
.play .i-steps li:nth-child(3){animation-delay:2.1s}
.play .go{animation:pop .55s cubic-bezier(.34,1.56,.64,1) 2.7s both, pulse 2s ease-in-out 3.4s infinite}

@keyframes rise{from{transform:translateY(240px)}to{transform:translateY(-90px)}}
@keyframes shadesDrop{from{transform:translateY(-300px); opacity:0}30%{opacity:1}to{transform:none; opacity:1}}
@keyframes roll{from{transform:translateX(0)}to{transform:translateX(-200px)}}
@keyframes glint{0%,100%{opacity:.15}50%{opacity:.9}}
@keyframes pop{from{transform:scale(.4); opacity:0}to{transform:scale(1); opacity:1}}
@keyframes fadeUp{from{transform:translateY(12px); opacity:0}to{transform:none; opacity:1}}
@keyframes pulse{0%,100%{box-shadow:0 10px 30px rgba(255,138,43,.45)}50%{box-shadow:0 10px 44px rgba(255,138,43,.85)}}

@media (min-width:900px){
  .top{max-width:600px; width:100%; margin:0 auto}
  main{padding:0 20px 20px}
}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{animation-duration:.001s !important; animation-iteration-count:1 !important; transition:none !important}
  .play .i-glasses{animation:none; opacity:1}
}


/* ── Stage controls ─────────────────────────────────────── */
.stage-clear{
  position:absolute; z-index:17; left:10px; bottom:10px;
  width:40px; height:40px; border-radius:50%; padding:0; cursor:pointer;
  display:grid; place-items:center;
  background:rgba(14,8,36,.62); color:var(--paper);
  border:1px solid rgba(241,236,255,.22);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:transform .1s ease, background .12s ease;
}
.stage-clear[hidden]{display:none}
.stage-clear svg{width:20px; height:20px}
.stage-clear:active{transform:scale(.9); background:rgba(14,8,36,.85)}

.toast{
  position:absolute; z-index:19; left:58px; bottom:14px;
  display:flex; align-items:center; gap:10px;
  background:rgba(14,8,36,.88); color:var(--paper);
  border:1px solid var(--line); border-radius:999px;
  padding:5px 6px 5px 14px; font-size:13px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  animation:fadeUp .25s ease;
}
.toast[hidden]{display:none}
.toast button{
  background:var(--uv); color:#08203A; border:0; border-radius:999px;
  padding:6px 12px; font-size:13px; font-weight:600; cursor:pointer;
}

/* The shutter: white ring, palette-coloured core, a pulse to say "now". */
.shutter{
  position:absolute; z-index:17; left:50%; bottom:12px;
  width:66px; height:66px; margin-left:-33px; padding:0; cursor:pointer;
  border-radius:50%; border:4px solid #fff; background:rgba(255,255,255,.18);
  display:grid; place-items:center;
  box-shadow:0 4px 18px rgba(0,0,0,.35);
  animation:pop .5s cubic-bezier(.34,1.56,.64,1) both, ring 2s ease-in-out .6s infinite;
}
.shutter[hidden]{display:none}
.shutter span{
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg, rgb(var(--c0)), rgb(var(--c1)) 55%, rgb(var(--c2)));
  transition:transform .1s ease;
}
.shutter:active span{transform:scale(.86)}
.shutter:disabled{animation:none; opacity:.5}
@keyframes ring{0%,100%{box-shadow:0 4px 18px rgba(0,0,0,.35), 0 0 0 0 rgba(255,255,255,.5)}50%{box-shadow:0 4px 18px rgba(0,0,0,.35), 0 0 0 10px rgba(255,255,255,0)}}

.countdown{
  position:absolute; inset:0; z-index:19; pointer-events:none;
  display:grid; place-items:center;
  font-size:120px; font-weight:700; color:#fff; letter-spacing:-0.04em;
  text-shadow:0 6px 30px rgba(0,0,0,.5);
}
.countdown.tick{animation:count .9s ease both}
@keyframes count{0%{transform:scale(1.6); opacity:0}20%{transform:scale(1); opacity:1}80%{opacity:1}100%{transform:scale(.8); opacity:0}}
.flash{position:absolute; inset:0; z-index:21; background:#fff; opacity:0; pointer-events:none}
.flash.go{animation:flash .45s ease-out}
@keyframes flash{0%{opacity:.95}100%{opacity:0}}

/* ── Photo sheet ────────────────────────────────────────── */
dialog.photo img{
  display:block; width:100%; max-height:56dvh; object-fit:contain;
  border-radius:14px; background:#0A0620; margin:2px 0 14px;
  -webkit-touch-callout:default;
}
.photo-actions{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.act{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  font-size:14px; font-weight:600; color:var(--paper);
  background:var(--ink-2); border:1px solid var(--line);
  padding:12px 6px; border-radius:14px; cursor:pointer;
}
.act svg{width:22px; height:22px}
.act.primary{background:linear-gradient(180deg,var(--uv-deep),#5445D6); border-color:#7A6CFF}
.act:active{transform:scale(.96)}
.act:disabled{opacity:.5}
.photo-hint{margin:12px 0 0; font-size:12.5px; line-height:1.5; color:var(--haze); text-align:center}
.photo-hint:empty{display:none}


/* ── Lens flare ─────────────────────────────────────────────
   The whole layer is screen-blended onto the camera view, so it
   only ever adds light. Ghosts sit on the line from the sun through
   the frame centre (--sx/--sy and --dx/--dy, set in JS), which is
   where a real lens throws its internal reflections. */
.flare{
  position:absolute; inset:0; z-index:16; pointer-events:none; overflow:hidden;
  mix-blend-mode:screen; opacity:0;
  transition:opacity 1s ease;
}
.flare.on{opacity:1}
.flare.dim{opacity:.6}
.flare i{position:absolute; display:block; transform:translate(-50%,-50%)}

.f-bloom{
  left:var(--sx); top:var(--sy); width:440px; height:440px; border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,253,240,1) 0%, rgba(255,246,214,.9) 10%, rgba(255,226,160,.62) 17%,
    rgba(255,198,112,.34) 28%, rgba(255,160,80,.14) 44%, rgba(255,130,60,0) 66%);
}
.flare.on .f-bloom{animation:bloom 3.2s ease-in-out infinite, bloomIn 1.1s cubic-bezier(.22,1,.36,1)}

.f-rays{
  left:var(--sx); top:var(--sy); width:250px; height:250px; border-radius:50%;
  background:repeating-conic-gradient(from 7deg, rgba(255,246,222,.42) 0deg .7deg, rgba(255,246,222,0) .9deg 30deg);
  -webkit-mask-image:radial-gradient(circle, #000 14%, rgba(0,0,0,.35) 30%, transparent 52%);
          mask-image:radial-gradient(circle, #000 14%, rgba(0,0,0,.35) 30%, transparent 52%);
}
.flare.on .f-rays{animation:spinC 40s linear infinite}

.f-streak{
  left:var(--sx); top:var(--sy); width:170%; height:3px; border-radius:2px;
  background:linear-gradient(90deg, rgba(255,214,150,0), rgba(255,236,196,.75) 45%, rgba(255,255,240,.95) 50%, rgba(255,236,196,.75) 55%, rgba(255,214,150,0));
  box-shadow:0 0 10px 2px rgba(255,200,120,.35);
}

.f-ghost{
  left:calc(var(--sx) + var(--dx) * var(--t));
  top:calc(var(--sy) + var(--dy) * var(--t));
  width:var(--s); height:var(--s); border-radius:50%;
  background:var(--g);
}
.f-ghost.hex{border-radius:0; clip-path:polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%)}
.f-ghost.halo{
  background:radial-gradient(circle, rgba(0,0,0,0) 56%,
    rgba(255,120,120,.10) 60%, rgba(255,220,120,.12) 63%, rgba(140,255,170,.10) 66%,
    rgba(120,200,255,.12) 69%, rgba(190,140,255,.10) 72%, rgba(0,0,0,0) 76%);
}
.flare.on .f-ghost{animation:shimmer 4.5s ease-in-out infinite}
.flare.on .f-ghost:nth-of-type(2n){animation-delay:-2.2s}

@keyframes bloom{0%,100%{transform:translate(-50%,-50%) scale(1); opacity:1}50%{transform:translate(-50%,-50%) scale(1.08); opacity:.88}}
@keyframes bloomIn{from{transform:translate(-50%,-50%) scale(.3); opacity:0}}
@keyframes spinC{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes shimmer{0%,100%{opacity:1}50%{opacity:.6}}

@media (prefers-reduced-motion:reduce){
  .flare.on .f-bloom,.flare.on .f-rays,.flare.on .f-ghost{animation:none}
}