/* What the live store adds on top of design.css. Same tokens, same tile; nothing here restyles the design. */

.basket .count{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--mint);color:var(--on-mint);font:700 12px/20px var(--body);text-align:center}
button.basket{font:inherit;font-weight:600;font-size:15px;color:var(--ink);cursor:pointer}
.addr[data-copy]{cursor:copy}
.acct a{cursor:pointer}

/* Recent purchases, filled from recent.json */
.recent ul li{gap:12px}
.recent ul img{width:28px;height:28px;border-radius:8px;image-rendering:pixelated;flex:none}
.recent ul b{font:600 15px/1.2 var(--body)}
.recent ul span{height:auto;background:none;flex:1;font-size:13px;color:var(--muted)}

/* Header bar on category pages */
.bar{width:min(1200px,100% - 32px);margin:24px auto 0;display:flex;align-items:center;flex-wrap:wrap;gap:16px 28px;padding:14px 16px 14px 26px;border-radius:20px}
.logo{font:800 30px/1 var(--display);letter-spacing:-.03em;text-decoration:none}
.logo span,.head h1 span{color:var(--mint)}
.cats{display:flex;flex-wrap:wrap;gap:6px;margin-right:auto}
.cats a{padding:8px 14px;border-radius:999px;font-weight:600;font-size:15px;color:var(--muted);text-decoration:none;transition:background-color .2s,color .2s}
.cats a:hover{color:var(--ink);background:rgba(255,255,255,.08)}
.cats a[aria-current]{color:var(--on-mint);background:var(--mint)}
.user{display:flex;align-items:center;gap:12px}
.who-mini{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;color:var(--muted)}
.who-mini img{border-radius:8px;image-rendering:pixelated;border:1px solid var(--edge)}

/* Category grid: a header tile, then one frosted tile per package */
.mosaic.grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));grid-template-areas:none;margin:16px auto 16px}
.mosaic.grid .head{grid-column:1/-1;min-height:0}
.head h1{font-size:clamp(44px,5vw,72px)}
.item{display:flex;flex-direction:column;gap:12px;padding:20px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--tint) 12%,transparent),transparent 55%),var(--glass)}
.item .pic{display:block;border-radius:16px;background:rgba(255,255,255,.04);aspect-ratio:1;overflow:hidden}
.item .pic img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 22px rgba(0,0,0,.45));transition:transform .35s var(--ease)}
.item .pic:hover img{transform:scale(1.04)}
.item h2{font:700 22px/1.15 var(--display);letter-spacing:-.02em}
.item h2 a{text-decoration:none}
.item .buy,.pack .buy{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.item .price{font-size:24px}
.empty{grid-column:1/-1;color:var(--muted)}

/* Tokens page: the design's tokens.html grid */
.mosaic.grid.tokens{grid-template-columns:repeat(12,1fr);grid-template-areas:
    "head head head head head head head rules rules rules rules rules"
    "p550 p550 p550 p550 p1100 p1100 p1100 p1100 p2300 p2300 p2300 p2300"
    "p4800 p4800 p4800 p4800 p4800 p4800 p4800 p4800 p4800 p4800 p4800 p4800"
    "legal legal legal legal legal legal legal pay pay pay pay pay"}
.tokens .head{grid-area:head;grid-column:auto}.tokens .rules{grid-area:rules}.tokens .pay{grid-area:pay}
.tokens .p550{grid-area:p550}.tokens .p1100{grid-area:p1100}.tokens .p2300{grid-area:p2300}.tokens .p4800{grid-area:p4800}
.tokens .legal{grid-area:legal;flex-direction:column;align-items:flex-start;justify-content:center;width:auto;margin:0}
@media (max-width:760px){.mosaic.grid.tokens{grid-template-columns:1fr 1fr;grid-template-areas:"head head" "rules rules" "p550 p550" "p1100 p1100" "p2300 p2300" "p4800 p4800" "pay pay" "legal legal"}}

.page-legal{width:min(1200px,100% - 32px);margin:0 auto 24px}

/* Dialogs: package details, log in, basket drawer */
dialog{color:var(--ink);border:1px solid var(--edge);border-radius:24px;padding:28px;max-width:min(880px,100vw - 32px);width:100%;
  background:linear-gradient(150deg,rgba(255,255,255,.10),rgba(255,255,255,.025) 42%,rgba(255,255,255,0)),rgba(10,17,15,.9);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:inset 0 1px 0 var(--hi),0 28px 60px -28px rgba(0,0,0,.75)}
dialog::backdrop{background:rgba(2,4,3,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
dialog .x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:var(--ink);font-size:22px;line-height:1;cursor:pointer}
dialog .x:hover{background:rgba(255,255,255,.16)}
dialog h2{font:800 clamp(28px,3.4vw,40px)/1 var(--display);letter-spacing:-.03em;padding-right:44px}
dialog .hint{margin-top:8px;color:var(--muted);font-size:15px}
dialog .hint.small{font-size:13px;margin-top:12px}
.add{border:0;cursor:pointer;font:inherit;font-weight:600}
.add.wide{width:100%;justify-content:center}
.add[disabled],.busy .add{opacity:.6;pointer-events:none}

.pkg{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:28px;align-items:start}
.pkg .art{width:100%;aspect-ratio:1;object-fit:contain;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.pkg .price{margin:14px 0;font-size:34px}
.pkg .desc{margin-top:18px;color:var(--muted);font-size:15px;line-height:1.6;max-height:min(46vh,420px);overflow:auto;scrollbar-width:thin}
.pkg .desc>*+*{margin-top:10px}
.pkg .desc :is(h1,h2,h3,h4){font:700 18px/1.2 var(--display);color:var(--ink);padding:0}
.pkg .desc ul{padding-left:20px}
.pkg .desc strong{color:var(--ink)}
@media (max-width:760px){.pkg{grid-template-columns:1fr}.pkg .art{max-width:280px;margin:0 auto}}

.login{max-width:460px}
.login form{display:grid;gap:12px;margin-top:18px}
.login input{height:52px;padding:0 16px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:var(--ink);font:500 17px var(--body)}
.login input:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 3px rgba(145,243,206,.25)}
.login .err{color:var(--rose);font-size:14px}

.drawer{margin:0 0 0 auto;height:100dvh;max-height:none;max-width:440px;border-radius:24px 0 0 24px;display:flex;flex-direction:column}
.drawer:not([open]){display:none}
.drawer .lines{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px;overflow:auto}
.drawer .lines li{display:flex;align-items:center;gap:12px;padding:14px 12px 14px 16px;border-radius:14px;background:rgba(255,255,255,.05)}
.drawer .lines li span{flex:1;font-weight:600}
.drawer .lines li b{font:700 17px/1 var(--display);font-variant-numeric:tabular-nums}
.drawer .lines .empty{color:var(--muted);background:none;padding-left:0}
.drawer .rm{width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:var(--muted);font-size:18px;cursor:pointer}
.drawer .rm:hover{color:var(--ink);background:rgba(255,255,255,.16)}
.drawer .total{margin:auto 0 14px;padding-top:18px;display:flex;justify-content:space-between;align-items:baseline;font:700 18px/1 var(--display)}
.drawer .total b{font-size:30px;color:var(--mint)}

.toast{position:fixed;left:50%;bottom:24px;translate:-50% 0;z-index:50;max-width:min(520px,100% - 32px);padding:14px 20px;border-radius:14px;
  background:rgba(10,17,15,.94);border:1px solid var(--edge);box-shadow:0 18px 40px -18px #000;font-weight:500}
.nojs{width:min(1200px,100% - 32px);margin:0 auto 24px;color:var(--muted)}
.nojs a{color:var(--mint)}

@media (max-width:760px){
  .bar{margin-top:16px;padding:12px 14px 12px 18px;gap:10px}
  .logo{font-size:24px}
  .user{margin-left:auto}
  .cats{order:3;flex:1 0 100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -6px}
  .cats a{white-space:nowrap}
  .who-mini{font-size:0;gap:0}
  .drawer{max-width:100%;border-radius:24px 24px 0 0;height:auto;max-height:85dvh;margin:auto 0 0}
}

/* Performance: the background is blurred once in the file (assets/minime-bg-soft.jpg, the same
   blur/brightness/saturation as design.css) instead of live on every frame, and package tiles skip
   their own backdrop blur. With a dozen live-blurred tiles over a live-blurred page, Chrome stopped
   painting some images. */
body::before{filter:none;background:radial-gradient(ellipse 80% 70% at 50% 45%,rgba(4,8,7,0) 30%,rgba(4,8,7,.7) 100%),
  url(assets/minime-bg-soft.jpg) 44% 62%/cover no-repeat #040807}
.item,.pack{-webkit-backdrop-filter:none;backdrop-filter:none;background-color:rgba(10,17,15,.62)}
/* Dialogs: no live blur on the full-screen backdrop or the panel. Chrome stalled rendering with both. */
dialog{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(150deg,rgba(255,255,255,.08),rgba(255,255,255,.02) 42%,rgba(255,255,255,0)),#0b1411}
dialog::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(2,4,3,.72)}
dialog:not(.drawer){margin:auto}  /* design.css resets every margin to 0, which un-centres modals */
.rules .payback{color:var(--ink)}
.rules .payback b{color:var(--gold)}
/* Brand tile: logo and a compact basket share one centred row; the logo shrinks to leave room (it is ~5.3em wide). */
.mosaic.cols .brand.logotop .top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px}
.mosaic.cols .brand.logotop .top>div{display:contents}
.mosaic.cols .brand.logotop p{grid-column:1/-1}
.mosaic.cols .brand.logotop .basket{grid-area:1/2}
.mosaic.cols .brand.logotop h1{font-size:clamp(24px,calc((100cqi - 124px)/5.3),52px);white-space:nowrap}
.brand .basket{padding:6px 12px;gap:6px;font-size:14px}
.brand .basket svg{width:15px;height:15px}
/* Alpha card: the whole card opens the package (wire() catches clicks on [data-package]); tinted like the category cards. */
.alpha[data-package]{cursor:pointer;
  background:linear-gradient(150deg,rgba(255,212,120,.32),rgba(104,221,216,.12) 50%,rgba(198,165,255,.2)),var(--glass);
  border-color:rgba(255,212,120,.5);
  box-shadow:inset 0 1px 0 rgba(255,241,205,.55),0 28px 60px -28px rgba(0,0,0,.75);
  transition:transform .35s var(--ease),border-color .25s,box-shadow .35s var(--ease)}
.alpha[data-package]:hover{transform:translateY(-4px);border-color:rgba(255,212,120,.75)}
.alpha[data-package]:hover .ago{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.alpha[data-package]:hover,.alpha[data-package]:hover .ago{transform:none}}
/* Too narrow for the word: the basket keeps only its icon (and count), and the logo gets that room back. */
@container (max-width:250px){
  .mosaic.cols .brand.logotop .basket{font-size:0;gap:0;padding:8px}
  .mosaic.cols .brand.logotop h1{font-size:clamp(18px,calc((100cqi - 60px)/5.3),24px)}
}
.recent .none{margin-top:10px;font-size:14px;color:var(--muted)}
/* Alpha's name cycles these five colours in-game, so the title drifts through them slowly. Same first and last stop so the loop is seamless. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .alpha .alpha-grad{background-image:linear-gradient(90deg,#FFD478,#FFF1CD,#68DDD8,#82BFFF,#C6A5FF,#FFD478);background-size:200% 100%;animation:alpha-drift 8s linear infinite}
}
@keyframes alpha-drift{to{background-position:-200% 0}}
/* The card's own tint drifts too, slower and back and forth, so it never shows a seam. */
.alpha[data-package]{background-size:220% 220%,auto;animation:alpha-glow 14s ease-in-out infinite alternate}
@keyframes alpha-glow{from{background-position:0% 0%,0 0}to{background-position:100% 100%,0 0}}
@media (prefers-reduced-motion:reduce){.alpha .alpha-grad,.alpha[data-package]{animation:none}}
/* Server IP reads as a button: copy icon, hint, hover and focus states. */
.ip .iphead{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ip .hint{font-size:12px;color:var(--muted)}
.ip button.addr{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin:0;padding:8px 12px;border:1px dashed color-mix(in srgb,var(--mint) 45%,transparent);border-radius:12px;background:color-mix(in srgb,var(--mint) 7%,transparent);cursor:pointer;text-align:left;user-select:none;-webkit-user-select:none;transition:background-color .2s,border-color .2s}
.ip button.addr span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ip button.addr svg{flex:none;width:18px;height:18px;opacity:.75;transition:opacity .2s,transform .2s}
.ip button.addr:hover{background:color-mix(in srgb,var(--mint) 14%,transparent);border-color:color-mix(in srgb,var(--mint) 75%,transparent)}
.ip button.addr:hover svg{opacity:1;transform:scale(1.08)}
.ip button.addr:active{transform:translateY(1px)}
.ip button.addr:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
/* The address is 22 monospace characters (~13.4em): size it to the tile so it never truncates. */
.ip{container-type:inline-size}
.mosaic.cols .ip button.addr{font-size:clamp(12px,calc((100cqi - 58px)/13.4),22px)}
/* A little more air between tiles (design.css has 16px). */
:root{--gap:19px}
@media (max-width:760px){:root{--gap:14px}.mosaic{gap:14px}}
/* Alpha is time-limited: say so up top, not only in the small print. */
.alpha .limited{display:flex;align-items:center;gap:7px;width:fit-content;margin-bottom:9px;padding:4px 10px 4px 8px;border-radius:999px;
  font:700 11px/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:#FFD478;
  background:rgba(255,212,120,.12);border:1px solid rgba(255,212,120,.45)}
.alpha .limited i{width:7px;height:7px;border-radius:50%;background:#FFD478;box-shadow:0 0 0 0 rgba(255,212,120,.6);animation:limited-pulse 2s ease-out infinite}
@keyframes limited-pulse{to{box-shadow:0 0 0 7px rgba(255,212,120,0)}}
@media (prefers-reduced-motion:reduce){.alpha .limited i{animation:none}}