/* ---------- store (store.js) ---------- */
:root{--shard:#6fe3f0;--shard-ink:#8ef0fa;--shard-deep:#1f6f8a}
:root[data-theme="light"]{--shard:#22a6b8;--shard-ink:#0f7684;--shard-deep:#0d5563}

/* a Ley Shard: inline, sized by the text around it */
.shd{display:inline-block;width:.68em;height:.95em;margin-right:.28em;vertical-align:-.12em;flex:none;
  background:linear-gradient(160deg,#e6fdff 0%,var(--shard) 45%,var(--shard-deep));clip-path:polygon(50% 0,100% 36%,50% 100%,0 36%)}


/* the result screen's chips (profile.css lays them out) */
.pf-reward .pf-shard{background:color-mix(in srgb,var(--shard) 16%,transparent);color:var(--shard-ink);display:inline-flex;align-items:center}
.pf-reward .pf-cap{background:var(--well);color:var(--muted);font-weight:600}

/* ---------- the Store screen: the Night Market (store.js) ---------- */
/* The sky is the screen's own background, so it fills the whole window however tall the page is, and stays put while
   the page scrolls. The screen sets its own colours: night in the dark theme, and the Day Market's (.st-day, further
   down) in the light theme. */
#scr-store{--text:#F1ECFF;--muted:#B9AEDD;--line:rgba(237,230,255,.1);--line2:rgba(237,230,255,.22);--tint:255,255,255;--well:rgba(0,0,0,.3);
  --surf:#140C33;--surf2:#1E1450;--shard:#6fe3f0;--shard-ink:#8ef0fa;--shard-deep:#1f6f8a;--st-gold:#FFC45C;--st-deal:#FF86C4;--st-deal-on:#2a0b1e;color:var(--text);
  background:
    radial-gradient(circle at 23px 41px,rgba(237,230,255,.85) 0 1px,transparent 1.6px) 0 0/173px 157px,
    radial-gradient(circle at 97px 12px,rgba(237,230,255,.5) 0 .8px,transparent 1.4px) 0 0/211px 193px,
    radial-gradient(circle at 140px 120px,rgba(237,230,255,.9) 0 1.2px,transparent 2px) 0 0/263px 241px,
    radial-gradient(circle at 60px 170px,rgba(184,148,255,.75) 0 1px,transparent 1.6px) 0 0/307px 229px,
    radial-gradient(circle at 200px 60px,rgba(142,240,250,.6) 0 1px,transparent 1.6px) 0 0/337px 283px,
    radial-gradient(circle at 31px 88px,rgba(237,230,255,.6) 0 .9px,transparent 1.5px) 0 0/389px 347px,
    radial-gradient(circle at 250px 300px,rgba(255,196,92,.55) 0 1px,transparent 1.6px) 0 0/431px 409px,
    radial-gradient(circle at 120px 20px,rgba(237,230,255,.75) 0 1.1px,transparent 1.8px) 0 0/487px 457px,
    radial-gradient(70% 45% at 50% 118%,rgba(139,108,255,.34),transparent 70%),
    radial-gradient(45% 35% at 82% 0,rgba(94,230,176,.15),transparent 70%),
    radial-gradient(55% 40% at 12% 0,rgba(139,108,255,.3),transparent 70%),
    linear-gradient(180deg,#0c0a2a,#06051a 55%,#0b0824)}
#scr-store .iconbtn{color:var(--text)}
/* while the market is open (show() sets .night) the page's own colour is the sky's: an iPhone paints its bottom strip
   and the blur under the clock with it (base.css), so they match the sky instead of showing as a band. With the dial
   on, stSky (store.js) sets both as the sky changes */
:root.night,:root[data-theme].night{--bg0:#0b0824;--bar:#0c0a2a} /* --bar: the top of the sky, for the strip behind the clock */
:root[data-theme="light"].night{--bg0:#fff3cf;--bar:#7fc8f8}
.st-top,.st-wrap{max-width:1200px}
.st-wrap{flex:1 0 auto;gap:0}
.st-bal{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;font:700 16px/1 var(--display);font-variant-numeric:tabular-nums;
  color:var(--shard-ink);background:color-mix(in srgb,var(--shard) 12%,transparent);border:1px solid color-mix(in srgb,var(--shard) 35%,transparent)}
.st-note{margin:12px 0 0;color:var(--muted);font-size:12.5px}
.st-note b,.st-sub b{color:var(--text)}
.st-price{display:inline-flex;align-items:center;font:700 14px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--shard-ink);white-space:nowrap}
.st-price.short{color:var(--muted);opacity:.75}

/* tonight's sky: the countdown and the moon */
.st-hero{display:flex;align-items:center;flex-wrap:wrap;gap:20px 48px;padding:22px 4px 34px}
.st-hero>div{flex:1 1 320px;position:relative}
/* the phone's own date and time, shown in place of the countdown while the sheet is down (phones only) */
.st-now{position:absolute;left:0;top:0;opacity:0;pointer-events:none;white-space:nowrap}
.st-now .st-lab{color:#B9AEDD}
.st-now small{margin-left:.15em;font-size:.42em;letter-spacing:.02em}
.st-lab{font:700 12px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:#5EE6B0}
.st-count{margin-top:10px;font:800 64px/.95 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff 20%,#B894FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.st-hero p{margin:12px 0 0;max-width:470px;color:var(--muted);font-size:14.5px}
/* the moon is a button: it turns the dial on and off (further down). Its wrapper only matters to the dial */
.st-orbit{flex:none;display:flex}
.st-arc,.st-arcp,.st-orbit small,.st-moon.st-mm{display:none}
.st-moon{width:132px;height:132px;flex:none;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:radial-gradient(circle at 34% 52%,rgba(120,100,190,.25) 0 11px,transparent 12px),radial-gradient(circle at 62% 28%,rgba(120,100,190,.25) 0 7px,transparent 8px),
    radial-gradient(circle at 60% 66%,rgba(120,100,190,.22) 0 5px,transparent 6px),radial-gradient(circle at 38% 35%,#fbf7ff,#d9ccff 55%,#a796e0);
  box-shadow:0 0 60px rgba(217,204,255,.45),0 0 140px rgba(139,108,255,.35)}

/* the four stops, each under its own star; their panels stretch to one height so the row ends level */
.st-stops{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px;align-items:stretch;padding-bottom:12px}
@media (max-width:1099px){.st-stops{grid-template-columns:repeat(2,minmax(0,1fr))}}
.st-stop{display:flex;flex-direction:column;min-width:0}
.s-merchant{--sc:#B894FF}.s-forge{--sc:#FF86C4}.s-packs{--sc:#8ef0fa}.s-atelier{--sc:#5EE6B0}
.st-sh{display:flex;align-items:center;gap:12px;margin:0 0 10px;font:700 12px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--text)}
.st-sh svg{width:24px;height:24px;flex:none;fill:var(--sc);filter:drop-shadow(0 0 8px var(--sc))}
.st-sh i{flex:1;border-top:1px dashed rgba(237,230,255,.3)}
.st-sub{margin:0 0 14px;min-height:2.8em;color:var(--muted);font-size:12.5px}
.st-glass{flex:1;display:flex;flex-direction:column;border-radius:18px;padding:18px;border:1px solid rgba(237,230,255,.1);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.st-glass>.st-note:last-child{margin-top:auto;padding-top:12px}

/* I · the Merchant */
.st-cards{flex:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;gap:18px 10px}
.st-slot{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.st-slot .card{font-size:15px}
.st-slot.mine .card{box-shadow:0 0 0 2px #FF86C4,0 0 24px rgba(255,134,196,.55)}
.st-cn{font:600 12.5px/1.2 var(--body)}
.st-cn small{display:block;margin-top:2px;font-size:10.5px;color:#FFC45C}
.mine .st-cn small{color:#FF86C4;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.st-buy{min-height:38px;padding:0 14px;border-radius:999px;border:1px solid rgba(111,227,240,.35);background:rgba(111,227,240,.06);color:var(--shard-ink);
  font:inherit;cursor:pointer;display:inline-flex;align-items:center;transition:border-color .2s,transform .25s var(--spring)}
.st-buy:hover:not(:disabled){border-color:var(--shard);transform:translateY(-1px)}
.st-buy:disabled{cursor:default;color:var(--muted);border-color:var(--line);background:none;font:700 13px/1 var(--display)}
.st-slot.sold .card{filter:grayscale(.85) brightness(.7)}
.st-slot.sold::after{content:"SOLD";position:absolute;top:2.4em;left:50%;transform:translate(-50%,-50%) rotate(-12deg);font:800 14px/1 var(--display);letter-spacing:.14em;
  color:#FF86C4;border:2px solid currentColor;border-radius:5px;padding:3px 7px;background:#140C33;pointer-events:none}

/* II · the Forge (forge.js): five places round the anvil, then what they can become */
.s-forge .st-glass{border-color:color-mix(in srgb,var(--sc) 30%,transparent)}
/* the anvil takes the height the stop has left, between 150 and 230px, and its cards are sized to it */
.s-forge .st-glass{min-height:0}
.fg{flex:1;display:flex;flex-direction:column;gap:10px;min-height:0}
.fg-ring{position:relative;flex:1 1 230px;min-height:150px;max-height:230px;container-type:size}
.fg-anvil{position:absolute;left:50%;top:52%;width:64px;height:64px;transform:translate(-50%,-50%);fill:var(--sc);opacity:.5;transition:opacity .3s,filter .3s}
.fg-ring.ready .fg-anvil{opacity:1;filter:drop-shadow(0 0 12px var(--sc))}
.fg-slot{position:absolute;width:5em;height:6em;padding:0;border:0;border-radius:.6em;background:none;transform:translate(-50%,-50%);cursor:pointer;color:inherit;
  font-size:clamp(6px,calc(100cqh / 26),9px);
  transition:transform .25s var(--spring)}
.cq-poly .fg-slot{font-size:clamp(6px,calc(var(--cqh) / 26),9px)} /* older phones without container queries (cq.js) */
.fg-slot:hover{transform:translate(-50%,-50%) translateY(-2px)}
.fg-slot:not(.on){display:grid;place-items:center;border:1.5px dashed color-mix(in srgb,var(--sc) 55%,transparent);background:color-mix(in srgb,var(--sc) 7%,transparent)}
.fg-slot:not(.on):hover{background:color-mix(in srgb,var(--sc) 15%,transparent)}
.fg-plus{font:800 22px/1 var(--display);font-style:normal;color:var(--sc)}
.fg-clear,.fg-fill{position:absolute;right:0;top:0;min-height:30px;padding:0 6px;font-size:12.5px;color:var(--muted)}
.fg-fill{right:auto;left:0;color:var(--sc);font-weight:700}
.fg-say b{color:var(--text)}
.fg-say{margin:0;min-height:2.7em;text-align:center;color:var(--muted);font-size:12.5px;text-wrap:balance}
.fg-acts{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.fg-make{width:100%;border-radius:999px}
.fg-make .st-price{color:inherit}
.fg-make .st-price.short{opacity:.6}
.fg-melt{width:100%;justify-content:center}
/* the confirm and result boxes */
.fg-row{display:flex;justify-content:center;gap:6px;margin:6px 0 12px;font-size:10px}
.fg-new .card{font-size:24px}
.fg-got{text-align:center}

/* III · the Pack Counter */
.st-tiers{flex:1;display:flex;flex-direction:column;justify-content:center}
.st-pk{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:8px 2px;border:0;border-bottom:1px solid rgba(237,230,255,.08);background:none;
  color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:transform .25s var(--spring)}
.st-pk:last-child{border-bottom:0}
.st-pk:hover:not(:disabled){transform:translateX(3px)}
.st-pk:disabled{cursor:default;opacity:.6}
.st-pk .pk-mini{--w:30px}
.st-dt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.st-dt b{font:700 15px/1.15 var(--display)}
.st-dt small{color:var(--muted);font-size:11.5px}
/* the pack on offer today: its own row, marked, with the old price struck through. It sells once */
.st-pk.deal{width:calc(100% + 20px);margin:0 -10px;padding-left:10px;padding-right:10px;border-radius:12px;border-bottom-color:transparent;
  background:color-mix(in srgb,var(--st-deal) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--st-deal) 40%,transparent)}
.st-tag{align-self:flex-start;padding:3px 7px;border-radius:999px;font:700 10.5px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--st-deal-on);background:var(--st-deal)}
.st-was{display:flex;flex-direction:column;align-items:flex-end;gap:3px;font-size:11.5px}
.st-was s{color:var(--muted)}

/* III · the Pack counter's two tabs: the packs, and the shards you've earned (what the Shard well was) */
.st-seg{margin-bottom:12px;flex:none}
.st-seg button{min-height:34px;font:700 13px/1 var(--display)}
.st-pane{flex:1;display:flex;flex-direction:column}
.st-pane[data-pane="shards"]{justify-content:center}
.st-pane[hidden]{display:none}
.st-pane>.st-note:last-child{margin-top:auto;padding-top:12px}
/* IV · the Atelier: closed for now (it will sell cosmetics) */
.st-closed{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center}
.st-closed svg{width:72px;height:72px;fill:var(--sc);opacity:.55}
.st-closed b{font:800 22px/1 var(--display)}
.st-soon{padding:7px 14px;border-radius:999px;font:700 12px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--sc);
  border:1px solid color-mix(in srgb,var(--sc) 45%,transparent);background:color-mix(in srgb,var(--sc) 10%,transparent)}
.st-closed small{color:var(--muted);font-size:12.5px}
/* the cauldron's bubbles rise and pop, one after another (still with reduced motion) */
.st-brew{overflow:visible}
/* by night: the pot and bubbles in the sign's soft green (as it looked faded over the sky), under a deeper green rim */
#scr-store:not(.st-day) .st-closed .st-brew{opacity:1;fill:color-mix(in srgb,var(--sc) 58%,#0c0a2a)}
#scr-store:not(.st-day) .st-brew rect{fill:color-mix(in srgb,var(--sc) 32%,#0c0a2a)}
.st-brew .bub{transform-box:fill-box;transform-origin:center;animation:stBub 2.4s ease-out infinite}
.st-brew .bub:nth-of-type(2){animation-delay:.8s}.st-brew .bub:nth-of-type(3){animation-delay:1.6s}
@keyframes stBub{0%{transform:translateY(3px) scale(.6);opacity:0}25%{opacity:1}100%{transform:translateY(-5px) scale(1.05);opacity:0}}
.s-atelier .st-glass{border-style:dashed;border-color:color-mix(in srgb,var(--sc) 35%,transparent)}
/* the shards you've earned today (the Pack counter's second tab) */
.st-rings{display:flex;justify-content:space-around;gap:12px}
.st-ring-w{text-align:center}
.st-ring{width:96px;height:96px;margin:0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--rc) calc(var(--p)*1%),rgba(255,255,255,.08) 0)}
.st-ring span{width:80px;height:80px;border-radius:50%;background:#0d0a2b;display:flex;flex-direction:column;align-items:center;justify-content:center}
.st-ring b{font:800 20px/1 var(--display);font-variant-numeric:tabular-nums}
.st-ring small{font-size:10.5px;color:var(--muted)}
.st-rl{margin-top:8px;font-size:11.5px;color:var(--muted);max-width:110px}
.st-rates{display:grid;gap:6px;margin:16px 0 0}
.st-rates div{display:flex;justify-content:space-between;gap:4px 12px;flex-wrap:wrap;padding-bottom:6px;border-bottom:1px solid rgba(237,230,255,.08);font-size:12.5px}
.st-rates div:last-child{border-bottom:0;padding-bottom:0}
.st-rates dt{font-weight:600}
.st-rates dd{margin:0;color:var(--muted);font-variant-numeric:tabular-nums}

/* the carousel's wrappers do nothing on a wide screen; the map of the stars, the dots and the hint are phones only */
.st-swipe,.st-view{flex:1;display:flex;flex-direction:column}
.st-map,.st-dots,.st-hint{display:none}

/* a phone: the sky with a constellation of the four stops; tap a star for the market's carousel, swipe past either end
   to go back to the sky (store.js) */
@media (max-width:759px){
  #scr-store{padding-bottom:0}
  #scr-store.st-moving{overflow:hidden}
  .st-hero{gap:16px;padding:8px 2px 0;flex-wrap:nowrap}
  .st-hero>div{flex:1}
  .st-count{font-size:44px}
  .st-hero p{display:none}
  .st-moon{width:76px;height:76px}

  /* the constellation: a short strip over the market, the whole sky without it */
  .st-map{display:block;position:relative;height:100px;margin:4px -8px 0;flex:none}
  .st-down .st-map{flex:1;min-height:230px}
  .st-lines{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;fill:none;stroke:rgba(237,230,255,.35);stroke-dasharray:3 4}
  .st-star{position:absolute;transform:translate(-50%,-15px);min-width:72px;min-height:56px;padding:0;border:0;background:none;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text);font:600 12px/1.2 var(--body)}
  .st-star svg{width:30px;height:30px;fill:var(--sc);filter:drop-shadow(0 0 8px var(--sc));opacity:.55;transition:transform .35s var(--spring),opacity .3s}
  .st-star::before{content:"";position:absolute;top:-9px;left:50%;width:48px;height:48px;margin-left:-24px;border-radius:50%;border:1px solid var(--sc);
    box-shadow:0 0 22px var(--sc);opacity:0;transform:scale(.6);transition:opacity .3s,transform .35s var(--spring)}
  .st-star span{opacity:0;transition:opacity .3s}
  .st-star.on svg{transform:scale(1.2);opacity:1}
  .st-star.on::before{opacity:.65;transform:none}
  .st-star.on span{opacity:1;font-weight:700}
  .st-star.s-merchant{left:16%;top:40%}.st-star.s-forge{left:40%;top:72%}.st-star.s-packs{left:63%;top:30%}.st-star.s-atelier{left:85%;top:66%}
  /* in the sky every star shines alike, with no names and no ring */
  .st-down .st-star svg{opacity:1;transform:none}
  .st-down .st-star::before,.st-down .st-star span{opacity:0}

  /* the sky also swaps the countdown for the phone's own time and fades the top bar (a tap brings it back) */
  .st-top{transition:opacity .35s}
  .st-down .st-top{opacity:0;pointer-events:none}
  .st-down.st-bar .st-top{opacity:1;pointer-events:auto}
  .st-hero>div>.st-lab,.st-hero>div>.st-count,.st-now{transition:opacity .4s}
  .st-down .st-hero>div>.st-lab,.st-down .st-hero>div>.st-count{opacity:0}
  .st-down .st-now{opacity:1}

  /* the market: a carousel of the four stops, the ones either side peeking in */
  .st-swipe{flex:1;transition:opacity .35s,transform .5s var(--ease)}
  .st-swipe.out{opacity:0;transform:translate(var(--ox,0px),var(--oy,48px))}
  .st-down .st-swipe{display:none}
  /* on its way out the market is lifted out of the page, so the sky can open out under it at the same time */
  #stBody{position:relative}
  .st-swipe.leaving,.st-down .st-swipe.leaving{display:flex;position:absolute;left:0;right:0;pointer-events:none}
  .st-view{flex:1;margin:10px -16px 0;overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none}
  .st-stops{flex:1;display:flex;gap:12px;align-items:stretch;padding:6px 0 4px;transition:transform .45s var(--ease);will-change:transform}
  /* the stops take the height the sky leaves them (the page never scrolls), and the Merchant's cards shrink to fit it:
     ~268px inside each stop is headings, names and buy buttons, the rest is two rows of cards 6em tall. A phone too short
     for even 12px cards keeps 450px stops and scrolls a little, so nothing is cut off */
  .st-stop{flex:none;width:calc(100% - 56px);box-sizing:border-box;padding:18px;border-radius:24px;container-type:size;min-height:450px;
    background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));border:1px solid rgba(237,230,255,.12);
    opacity:.45;transform:scale(.94);transition:opacity .35s,transform .45s var(--ease)}
  .st-stop.on{opacity:1;transform:none}
  .st-stop.s-forge{border-color:color-mix(in srgb,var(--sc) 35%,transparent)}
  /* a subtitle keeps its lines; the stop's body takes what's left */
  .st-sub{flex:none}
  .st-ring{width:80px;height:80px}.st-ring span{width:66px;height:66px}
  .st-rates{margin-top:10px}
  .st-seg{margin-bottom:8px}
  .st-pane .st-note{font-size:11.5px;padding-top:8px}
  .st-sub{min-height:0}
  .st-glass,.s-forge .st-glass{padding:0;border:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .st-slot .card{font-size:max(12px,min(16px,4vw,calc((100cqh - 268px) / 12)))}
  .cq-poly .st-slot .card{font-size:max(12px,min(16px,4vw,calc((var(--cqh) - 268px) / 12)))} /* no container queries (cq.js) */
  .st-cards{row-gap:12px}
  .st-dots{display:flex;justify-content:center;gap:8px;margin-top:14px}
  .st-dots i{width:6px;height:6px;border-radius:99px;background:rgba(237,230,255,.3);transition:width .35s var(--ease),background .35s}
  .st-dots i.on{width:22px;background:var(--sc)}
  .st-hint{display:block;margin:10px 0 max(16px,env(safe-area-inset-bottom));text-align:center;font-size:12px;color:#8E82B8}
  .ios-short .st-hint{margin-bottom:24px} /* the home bar sits in iOS's own strip below the page (base.css) */
}

/* ---------- the dial (.st-dial): tap the moon and it crosses an arc as the game day runs out ---------- */
/* stSky (store.js) sets the sky's three colours (--s1 to --s3), how bright the stars are (--sa) and where on the arc
   the moon is (--mx, --my) */
#scr-store.st-dial{--s1:#05041a;--s2:#090724;--s3:#140d3a;--sa:.95;
  background:
    radial-gradient(circle at 23px 41px,rgba(237,230,255,calc(.85*var(--sa))) 0 1px,transparent 1.6px) 0 0/173px 157px,
    radial-gradient(circle at 97px 12px,rgba(237,230,255,calc(.5*var(--sa))) 0 .8px,transparent 1.4px) 0 0/211px 193px,
    radial-gradient(circle at 140px 120px,rgba(237,230,255,calc(.9*var(--sa))) 0 1.2px,transparent 2px) 0 0/263px 241px,
    radial-gradient(circle at 60px 170px,rgba(184,148,255,calc(.75*var(--sa))) 0 1px,transparent 1.6px) 0 0/307px 229px,
    radial-gradient(circle at 200px 60px,rgba(142,240,250,calc(.6*var(--sa))) 0 1px,transparent 1.6px) 0 0/337px 283px,
    radial-gradient(circle at 31px 88px,rgba(237,230,255,calc(.6*var(--sa))) 0 .9px,transparent 1.5px) 0 0/389px 347px,
    radial-gradient(circle at 250px 300px,rgba(255,196,92,calc(.55*var(--sa))) 0 1px,transparent 1.6px) 0 0/431px 409px,
    radial-gradient(circle at 120px 20px,rgba(237,230,255,calc(.75*var(--sa))) 0 1.1px,transparent 1.8px) 0 0/487px 457px,
    linear-gradient(180deg,var(--s1),var(--s2) 55%,var(--s3))}
/* a wide screen: the arc takes the moon's place beside the countdown */
.st-dial .st-orbit{flex:1 1 320px;display:block;position:relative;height:150px;min-width:0}
.st-dial .st-arc{display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:visible;fill:none;stroke:rgba(237,230,255,.4);stroke-width:2;stroke-linecap:round;stroke-dasharray:1 6}
.st-dial .st-orbit small{display:block;position:absolute;top:100%;margin-top:-14px;font:700 11px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.st-dial .st-orbit small:first-of-type{left:4%}
.st-dial .st-orbit small:nth-of-type(2){left:50%;transform:translateX(-50%)}
.st-dial .st-orbit small:last-of-type{right:4%}
.st-dial .st-moon{position:absolute;left:var(--mx,50%);top:var(--my,14%);width:56px;height:56px;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 34% 52%,rgba(120,100,190,.25) 0 9%,transparent 10%),radial-gradient(circle at 62% 28%,rgba(120,100,190,.25) 0 6%,transparent 7%),
    radial-gradient(circle at 38% 35%,#fbf7ff,#d9ccff 55%,#a796e0);
  box-shadow:0 0 26px rgba(217,204,255,.6),0 0 64px rgba(139,108,255,.5)}
/* a phone: the moon moves onto the map and passes behind the four stops. At night the map stays the constellation and
   the moon goes along its zigzag (--zx, --zy). The Day Market's map is the arc, dial on or off (a zigzag of clouds is
   no constellation), and its sun joins the arc once the dial is on */
@media (max-width:759px){
  .st-dial .st-orbit,.st-day .st-zig{display:none}
  .st-day .st-arcp{display:inline}
  .st-day .st-lines{stroke-width:2;stroke-linecap:round;stroke-dasharray:1 6}
  .st-dial .st-moon.st-mm{display:block;left:var(--zx,50%);top:var(--zy,50%);width:44px;height:44px}
  .st-day.st-dial .st-moon.st-mm{left:var(--mx,50%);top:var(--my,14%)}
  .st-dial .st-star{z-index:1}
  .st-day .st-star.s-merchant{left:15%;top:55.8%}.st-day .st-star.s-forge{left:38%;top:19.5%}.st-day .st-star.s-packs{left:62%;top:19.5%}.st-day .st-star.s-atelier{left:85%;top:55.8%}
}

/* ---------- the Day Market (.st-day): the light theme's sky, a sun for the moon ---------- */
#scr-store.st-day{--text:#2b1a3f;--muted:#5d4a6e;--line:rgba(43,26,63,.12);--line2:rgba(43,26,63,.22);--tint:0,0,0;--well:rgba(0,0,0,.05);--surf:#fff;--surf2:#f0ebff;
  --shard:#22a6b8;--shard-ink:#0f7684;--shard-deep:#0d5563;--st-gold:#f0a92e;--st-deal:#c2255c;--st-deal-on:#fff;--s1:#7fc8f8;--s2:#c4e6fb;--s3:#fff3cf;
  background:linear-gradient(180deg,var(--s1),var(--s2) 55%,var(--s3))}
.st-day .st-lab{color:#8a3b12}
.st-day .st-now .st-lab{color:var(--muted)}
.st-day .st-count{background-image:linear-gradient(180deg,#2b1a3f,#b5477a)}
.st-day .st-moon{background:radial-gradient(circle,#fffbd6,#ffd43b 58%,#ff9f43);box-shadow:0 0 0 12px rgba(255,236,160,.4),0 0 0 28px rgba(255,236,160,.18),0 0 70px rgba(255,160,60,.6)}
.st-day.st-dial .st-moon{box-shadow:0 0 0 6px rgba(255,236,160,.45),0 0 34px rgba(255,150,60,.8)}
.st-day .st-arc{stroke:rgba(43,26,63,.4)}
.st-day .s-merchant{--sc:#6a2bae}.st-day .s-forge{--sc:#c2255c}.st-day .s-packs{--sc:#0b7285}.st-day .s-atelier{--sc:#2b8a3e}
.st-day .st-closed svg{opacity:1;filter:drop-shadow(0 6px 8px rgba(23,72,40,.3))} /* full colour by day, with a shadow under the pot */
.st-day .st-sh svg{filter:none}.st-day .st-sh i{border-top-color:rgba(43,26,63,.3)}
.st-day .st-glass{border-color:rgba(43,26,63,.12);background:rgba(255,255,255,.55)}
.st-day .s-forge .st-glass{border-color:color-mix(in srgb,var(--sc) 35%,transparent)}
.st-day .st-slot.mine .card{box-shadow:0 0 0 2px #c2255c,0 0 24px rgba(194,37,92,.4)}
.st-day .st-cn small{color:#8a4b00}
.st-day .mine .st-cn small{color:#c2255c}
.st-day .st-buy{border-color:color-mix(in srgb,var(--shard) 45%,transparent);background:color-mix(in srgb,var(--shard) 9%,transparent)}
.st-day .st-buy:disabled{border-color:var(--line);background:none}
.st-day .st-slot.sold::after{color:#c2255c;background:#fff}
.st-day .st-pk,.st-day .st-rates div{border-bottom-color:rgba(43,26,63,.1)}
.st-day .st-ring{background:conic-gradient(var(--rc) calc(var(--p)*1%),rgba(43,26,63,.1) 0)}
.st-day .st-ring span{background:#fff6ee}
@media (max-width:759px){
  .st-day .st-moon{box-shadow:0 0 0 7px rgba(255,236,160,.4),0 0 0 16px rgba(255,236,160,.18),0 0 40px rgba(255,160,60,.6)}
  .st-day.st-dial .st-moon{box-shadow:0 0 0 5px rgba(255,236,160,.45),0 0 28px rgba(255,150,60,.8)}
  .st-day .st-lines{stroke:rgba(43,26,63,.4)}
  .st-day .st-star svg{filter:none}
  .st-day .st-star::before{box-shadow:none}
  .st-day .st-stop{background:rgba(255,255,255,.55);border-color:rgba(43,26,63,.12)}
  .st-day .st-stop.s-forge{border-color:color-mix(in srgb,var(--sc) 40%,transparent)}
  .st-day .st-glass,.st-day .s-forge .st-glass{border:0;background:none}
  .st-day .st-dots i{background:rgba(43,26,63,.25)}
  .st-day .st-dots i.on{background:var(--sc)}
  .st-day .st-hint{color:var(--muted)}
}

/* the confirm box */
.st-one{display:flex;justify-content:center;margin:6px 0 10px}
.st-one .card{font-size:22px}
.st-cost{display:flex;align-items:center;justify-content:center;gap:2px;color:var(--muted)}
.st-cost b{color:var(--shard-ink);font:700 18px/1 var(--display);margin-right:6px}

@media (prefers-reduced-motion:reduce){.st-brew .bub{animation:none}}
@media (prefers-reduced-motion:reduce){.st-buy,.st-pk,.st-star svg,.st-star::before,.st-star span,.st-stops,.st-stop,.st-swipe,.st-dots i,.st-top,.st-hero>div>.st-lab,.st-hero>div>.st-count,.st-now{transition:none}.st-stop.on{animation:none}}