/* Frosted Mosaic: the design CSS, copied from storefront/landing-variants/d-frosted-mosaic/index-columns-signedin-logotop.html.
   Keep it a copy: store.css holds everything the live store adds on top. */
:root{
  --ink:#f4f9f6; --muted:#c6d3cd; --faint:#a9b8b1;
  --mint:#91f3ce; --mint-hi:#b8f9e0; --on-mint:#04241a;
  --lilac:#cdb9ff; --rose:#ffadc8; --gold:#ffd27a;
  --glass:rgba(10,17,15,.5); --edge:rgba(255,255,255,.15); --hi:rgba(255,255,255,.26);
  --r:24px; --gap:16px;
  --display:"Bricolage Grotesque","Trebuchet MS",sans-serif;
  --body:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0}
html{background:#040807;color-scheme:dark;scrollbar-color:rgba(145,243,206,.35) #040807}
body{min-height:100vh;color:var(--ink);font:400 17px/1.55 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--mint);color:var(--on-mint)}
a{color:inherit}
:focus-visible{outline:3px solid var(--mint);outline-offset:4px;border-radius:12px}

/* The Mini Me night render, fixed behind everything, softened and darkened */
body::before{content:"";position:fixed;inset:-40px;z-index:-1;pointer-events: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.jpg) 44% 62%/cover no-repeat #040807;
  filter:blur(5px) brightness(.72) saturate(1.15)}

/* Scroll vignette: top fade appears once there is page above, bottom fade leaves at the end.
   Pure CSS (scroll-driven animations); browsers without scroll timelines get a calm static vignette. */
.vig{position:fixed;inset-inline:0;height:min(22vh,190px);pointer-events:none;z-index:20}
.vig-top{top:0;background:linear-gradient(to bottom,rgba(3,6,5,.94),rgba(3,6,5,.55) 45%,rgba(3,6,5,0));opacity:.35}
.vig-bot{bottom:0;background:linear-gradient(to top,rgba(3,6,5,.96),rgba(3,6,5,.55) 45%,rgba(3,6,5,0));opacity:.6}
@supports (animation-timeline:scroll()){
  .vig{opacity:0}
  .vig-top{animation:vig-in linear both;animation-timeline:scroll(root);animation-range:0 160px}
  .vig-bot{animation:vig-out linear both;animation-timeline:scroll(root);animation-range:calc(100% - 160px) 100%}
}
@keyframes vig-in{from{opacity:0}to{opacity:1}}
@keyframes vig-out{from{opacity:1}to{opacity:0}}

.mosaic{width:min(1200px,100% - 32px);margin:40px auto 72px;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}

/* Frosted tile */
.tile{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r);padding:28px;
  background:linear-gradient(150deg,rgba(255,255,255,.10),rgba(255,255,255,.025) 42%,rgba(255,255,255,0)),var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid var(--edge);
  box-shadow:inset 0 1px 0 var(--hi),0 1px 0 rgba(0,0,0,.4),0 28px 60px -28px rgba(0,0,0,.75)}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(90% 55% at 8% 0%,rgba(255,255,255,.10),transparent 60%)}
.label{display:block;font:600 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.mono{font-family:var(--mono);font-weight:500}

/* Brand */
.brand{display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:32px 36px;
  background:radial-gradient(70% 90% at 100% 100%,rgba(145,243,206,.16),transparent 70%),
             linear-gradient(150deg,rgba(255,255,255,.12),rgba(255,255,255,.02) 45%),var(--glass)}
.brand .top{display:flex;justify-content:space-between;align-items:center}
.mark{display:flex;align-items:center;gap:10px;font:600 15px/1 var(--body);color:var(--muted)}
.mark svg{width:28px;height:28px}
.basket{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid var(--edge);background:rgba(255,255,255,.06);font-weight:600;font-size:15px;text-decoration:none;transition:background-color .2s}
.basket:hover{background:rgba(255,255,255,.14)}
.basket svg{width:17px;height:17px}
.brand h1{font:800 clamp(56px,7.4vw,104px)/.92 var(--display);letter-spacing:-.03em;font-variation-settings:"opsz" 96}
.brand h1 span{color:var(--mint)}
.brand p{font-size:19px;color:var(--muted);max-width:44ch}

/* IP + how-to */
.ip{display:flex;flex-direction:column;justify-content:center;gap:12px}
.ip .addr{font:500 clamp(22px,2.3vw,29px)/1.15 var(--mono);color:var(--mint);user-select:all;-webkit-user-select:all;word-break:break-all;letter-spacing:-.01em}
.how{display:flex;flex-direction:column;justify-content:center;gap:12px}
.how p{font-size:17px;line-height:1.5;text-wrap:pretty}
kbd{font:500 .9em/1 var(--mono);padding:3px 8px;border-radius:7px;background:rgba(145,243,206,.14);border:1px solid rgba(145,243,206,.35);color:var(--mint)}

/* Category tiles: tinted glass, whole tile is the link */
.cat{--tint:var(--mint);display:flex;flex-direction:column;justify-content:space-between;gap:20px;text-decoration:none;min-height:160px;
  background:linear-gradient(150deg,color-mix(in srgb,var(--tint) 24%,transparent),color-mix(in srgb,var(--tint) 5%,transparent) 62%),var(--glass);
  border-color:color-mix(in srgb,var(--tint) 42%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--tint) 60%,white),0 28px 60px -28px rgba(0,0,0,.75);
  transition:transform .35s var(--ease),border-color .25s,box-shadow .35s var(--ease)}
.cat:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--tint) 75%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--tint) 60%,white),0 0 0 1px color-mix(in srgb,var(--tint) 30%,transparent),0 34px 70px -26px rgba(0,0,0,.8)}
.cat .icon{width:56px;height:auto;image-rendering:pixelated;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
.cat h2{font:700 clamp(24px,2.3vw,32px)/1.05 var(--display);letter-spacing:-.03em;text-wrap:balance}
.cat .foot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.cat .from{margin-top:8px;font-size:16px;color:color-mix(in srgb,var(--tint) 30%,#dfe8e4)}
.cat .from b{font:700 22px/1 var(--display);color:var(--tint);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.cat .go{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--tint);color:#071410;transition:transform .35s var(--ease)}
.cat .go svg{width:22px;height:22px}
.cat:hover .go{transform:translateX(4px)}
.cat.big h2{font-size:clamp(30px,3.4vw,46px)}
.cat.big .icon{width:84px}
.cat.big{-webkit-backdrop-filter:blur(7px) saturate(1.4);backdrop-filter:blur(7px) saturate(1.4)}
.cat .note{font-size:15px;color:var(--muted);max-width:30ch}
.c-ranks{--tint:var(--mint)} .c-titles{--tint:var(--lilac)} .c-pets{--tint:var(--rose)} .c-tokens{--tint:var(--gold)}

/* Alpha Supporter */
.alpha{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;padding:20px 28px 20px 20px}
.alpha img{width:232px;height:232px;border-radius:16px;display:block;border:1px solid var(--edge)}
.alpha h2{font:700 30px/1.05 var(--display);letter-spacing:-.03em}
.alpha h2 b{margin-left:10px;font-weight:700;color:var(--mint);font-variant-numeric:tabular-nums}
.alpha p{margin-top:10px;font-size:16px;color:var(--muted);text-wrap:pretty}
.alpha p.sale{color:var(--ink)}
.more{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-weight:600;color:var(--mint);text-decoration:none;border-bottom:1px solid rgba(145,243,206,.4);padding-bottom:2px}
.more:hover{border-bottom-color:var(--mint)}
.more svg{width:16px;height:16px}

/* Footer tiles */
.pay h2,.rules h2{font:700 20px/1.2 var(--display);letter-spacing:-.02em}
.pay ul{list-style:none;padding:0;margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.pay li{padding:6px 12px;border-radius:999px;border:1px solid var(--edge);background:rgba(255,255,255,.05);font-size:14px;font-weight:500}
.pay p{margin-top:16px;font-size:14px;color:var(--muted)}
.legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;padding:20px 28px;font-size:14px;color:var(--muted)}
.legal p{max-width:88ch}
.legal .mojang{font-size:13px;margin-top:4px}
.legal nav{display:flex;gap:22px}
.legal nav a{text-decoration:none;font-weight:500;color:var(--ink)}
.legal nav a:hover{color:var(--mint)}

/* Tokens page */
.head{display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:32px 36px}
.back{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-weight:500;text-decoration:none;align-self:flex-start}
.back:hover{color:var(--ink)}
.back svg{width:18px;height:18px}
.head h1{font:800 clamp(48px,6vw,84px)/.92 var(--display);letter-spacing:-.035em}
.head p{margin-top:14px;font-size:18px;color:var(--muted);max-width:44ch;text-wrap:pretty}
.rules ul{margin-top:14px;padding:0;list-style:none;display:grid;gap:8px}
.rules li{display:flex;justify-content:space-between;gap:16px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.09);font-size:16px}
.rules li span:last-child{font-weight:600;color:var(--gold);white-space:nowrap;font-variant-numeric:tabular-nums}
.rules p{margin-top:14px;font-size:15px;color:var(--muted)}
.pack{--tint:var(--gold);display:flex;flex-direction:column;gap:14px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--tint) 14%,transparent),transparent 55%),var(--glass)}
.pack .art{display:block;width:100%;height:auto;aspect-ratio:1.44;object-fit:contain;object-view-box:inset(30% 10% 17% 12%);filter:drop-shadow(0 14px 22px rgba(0,0,0,.5))}
.pack .art.wide{object-view-box:inset(22% 5% 17% 7%)}
.pack h2{font:800 46px/1 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.pack h2 small{margin-left:8px;font:500 17px/1 var(--body);letter-spacing:0;color:var(--muted)}
.split{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:15px;color:var(--muted)}
.bonus{padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--gold) 18%,transparent);border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);color:var(--gold);font-weight:600;font-size:13px}
.pack .buys{font-size:16px;text-wrap:pretty}
.pack .buy{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:6px}
.price{font:700 28px/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.add{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 20px;border-radius:14px;background:var(--mint);color:var(--on-mint);font-weight:600;text-decoration:none;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 24px -10px rgba(145,243,206,.6);transition:background-color .2s,transform .2s var(--ease)}
.add:hover{background:var(--mint-hi)}
.add:active{transform:translateY(2px)}
.add svg{width:18px;height:18px}
.pack.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;align-content:center}
.pack.row .art{grid-row:1/span 5;align-self:center}
.pack.row>:not(.art){grid-column:2}
.pack.row .buy{margin-top:8px;justify-content:flex-start;gap:28px}

@media (max-width:760px){
  body{font-size:16px}
  .mosaic{grid-template-columns:1fr 1fr;gap:12px;margin:16px auto 56px}
  .tile{padding:22px;border-radius:20px}
  .brand,.head{padding:24px}
  .brand p{font-size:17px}
  .cat{min-height:0}
  .cat .icon{width:44px}
  .cat.big .icon{width:60px}
  .cat h2{font-size:22px}
  .cat.big h2{font-size:30px}
  .cat .go{position:absolute;top:18px;right:18px;width:40px;height:40px}
  .alpha{grid-template-columns:120px 1fr;gap:18px;padding:16px;align-items:start}
  .alpha img{width:120px;height:120px;border-radius:12px}
  .alpha h2{font-size:24px}
  .alpha h2 b{display:block;margin:6px 0 0}
  .alpha .txt{display:contents}
  .alpha .txt>:not(h2){grid-column:1/-1}
  .alpha h2{align-self:center}
  .legal{padding:20px 22px}
  .pack.row{display:flex}
  .pack h2{font-size:40px}
  .pack .art{width:72%;margin-inline:auto}
  .head h1{font-size:56px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  .cat:hover,.cat:hover .go{transform:none}
}
.mosaic{grid-template-areas:
    "brand brand brand brand brand brand brand ip ip ip ip ip"
    "brand brand brand brand brand brand brand how how how how how"
    "ranks ranks ranks ranks ranks ranks titles titles titles titles titles titles"
    "ranks ranks ranks ranks ranks ranks pets pets pets tokens tokens tokens"
    "alpha alpha alpha alpha alpha alpha alpha pay pay pay pay pay"
    "legal legal legal legal legal legal legal legal legal legal legal legal"}
.brand{grid-area:brand;min-height:340px}.ip{grid-area:ip}.how{grid-area:how}.alpha{grid-area:alpha}.pay{grid-area:pay}.legal{grid-area:legal}
.c-ranks{grid-area:ranks}.c-titles{grid-area:titles}.c-pets{grid-area:pets}.c-tokens{grid-area:tokens}
@media (max-width:760px){.mosaic{grid-template-areas:"brand brand" "ip ip" "how how" "ranks ranks" "titles pets" "tokens tokens" "alpha alpha" "pay pay" "legal legal"}.brand{min-height:0}}

/* Alpha Supporter and Mini Me always wear the in-game Alpha spectrum (SupporterPalette.ALPHA). */
.alpha-grad{color:#FFD478}
@supports ((-webkit-background-clip:text) or (background-clip:text)){.alpha-grad{background:linear-gradient(90deg,#FFD478,#FFF1CD,#68DDD8,#82BFFF,#C6A5FF);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}}

/* Columns layout (SimplyACarrot): grouped by purpose. Columns start and end level;
   tiles in each column grow to share its height, so the sizes still vary but nothing hangs. */
.mosaic.cols{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,4fr);grid-template-areas:none;align-items:stretch;margin:24px auto 40px}
.mosaic.cols .tile{grid-area:auto}
.mosaic.cols>.col{display:flex;flex-direction:column;gap:var(--gap);min-width:0}
.mosaic.cols>.col>*{flex:1 1 auto}
.mosaic.cols .ip,.mosaic.cols .how{flex:0 0 auto}
.mosaic.cols .recent,.mosaic.cols .pay{padding:22px 26px}
.mosaic.cols>.legal{grid-column:1/-1}
.mosaic.cols>.col{min-height:826px} /* the height the page had before the Alpha card was trimmed */
@media (max-width:760px){.mosaic.cols>.col{min-height:0}}
.mosaic.cols .brand{min-height:0;container-type:inline-size;padding:26px 30px}
.mosaic.cols .brand h1{font-size:min(68px,16.5cqi)}
.mosaic.cols .ip .addr{font-size:clamp(17px,1.6vw,22px);word-break:normal;white-space:nowrap}
.mosaic.cols .cat{min-height:0}
.mosaic.cols .cat.big{min-height:200px}
.mosaic.cols .duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.mosaic.cols .alpha{grid-template-columns:112px 1fr;gap:12px 16px;padding:18px;align-items:center;align-content:start}
.mosaic.cols .alpha img{width:112px;height:112px;border-radius:12px}
.mosaic.cols .alpha .txt{display:contents}
.mosaic.cols .alpha .txt>:not(h2){grid-column:1/-1}
.mosaic.cols .alpha h2{font-size:24px}
.mosaic.cols .alpha h2 b{display:block;margin:6px 0 0}
.mosaic.cols .alpha p{margin-top:0;font-size:15px}
.mosaic.cols .more{margin-top:0;justify-self:start}
.mosaic.cols .pay p{margin-top:12px}
.recent h2{font:700 20px/1.2 var(--display);letter-spacing:-.02em}
.recent ul{list-style:none;padding:0;margin-top:14px;display:grid;gap:10px}
.recent li{display:flex;align-items:center;gap:12px}
.recent li i{flex:none;width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.08)}
.recent li span{height:9px;border-radius:5px;background:rgba(255,255,255,.08);flex:1}
.recent li span+span{flex:.5}
.recent p{margin-top:12px;font-size:13px;color:var(--muted)}
@media (max-width:760px){
  .mosaic.cols{grid-template-columns:1fr}
}
.acct{display:flex;flex-direction:column;justify-content:center;gap:12px;flex:0 0 auto!important}
.acct .who{display:flex;align-items:center;gap:14px}
.acct .who img{width:48px;height:48px;border-radius:10px;image-rendering:pixelated;border:1px solid var(--edge)}
.acct .who b{font:700 26px/1 var(--display);letter-spacing:-.02em}
.acct p{font-size:15px;color:var(--muted)}
.acct a{white-space:nowrap;color:var(--mint);text-decoration:none;border-bottom:1px solid rgba(145,243,206,.4)}
.acct a:hover{border-bottom-color:var(--mint)}
.mosaic.cols .brand.window{background:linear-gradient(180deg,rgba(8,12,11,.55),rgba(8,12,11,.08) 38%,rgba(8,12,11,0)),rgba(255,255,255,.02);-webkit-backdrop-filter:blur(2.5px) saturate(1.3);backdrop-filter:blur(2.5px) saturate(1.3)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mosaic.cols .brand.logotop{justify-content:flex-start}
.mosaic.cols .brand.logotop .top{align-items:flex-start}
.mosaic.cols .brand.logotop h1{font-size:min(52px,11.5cqi)}
.mosaic.cols .brand.logotop .top{gap:16px}
.mosaic.cols .brand.logotop .top>div{min-width:0}
.mosaic.cols .brand.logotop .basket{flex:none}
.mosaic.cols .brand.logotop p{margin-top:12px;font-size:17px}
/* Alpha card: same bottom row as the category tiles, text left and a round arrow right. */
.afoot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:10px}
.afoot p{margin-top:0!important}
.ago{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;color:#071410;text-decoration:none;
  background:linear-gradient(135deg,#FFD478,#FFF1CD 30%,#68DDD8 55%,#82BFFF 78%,#C6A5FF);transition:transform .35s var(--ease)}
.ago svg{width:22px;height:22px}
.ago:hover{transform:translateX(4px)}
.mosaic.cols .alpha{grid-template-rows:auto 1fr;align-content:stretch}
.mosaic.cols .alpha .afoot{align-self:end}
@media (prefers-reduced-motion:reduce){.ago:hover{transform:none}}
/* One screen, no scrollbar. When the window is tall enough the mosaic is sized to exactly fill it,
   so there is nothing to scroll. Shorter windows can still scroll (or content would be cut off),
   but the scrollbar itself stays hidden. */
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none}
@media (min-width:761px) and (min-height:860px){
  .mosaic.cols{height:calc(100dvh - 48px);margin:24px auto;grid-template-rows:minmax(0,1fr) auto}
  .mosaic.cols>.col{min-height:0}
}