/* The store page (store.html only), on top of styles.css: the same type, colours, chapters and plates as the home
   page. What it adds: the tier colours the game puts on a VIP star (VipTier: Silver #C9CCD1, Gold #E8B23A, Diamond
   #5EE6E6, which is also the game's gem colour), the game's own pixel art at whole multiples (the gem shop's menu icons
   in img/store/icons.webp, 64 px cells; the HUD's 7 px glyphs in img/store/glyphs.png; the damage fonts' digits), and
   the renders of every pet and skill skin. */

:root {
  --silver: #C9CCD1;
  --tgold: #E8B23A;
  --diamond: #5EE6E6;
  --gem: #5EE6E6;
  --good: #5ED37A;
}

/* ---------------------------------------------------------------- the game's pixel art */
/* a menu icon of the gem shop: --x/--y its cell in the atlas (12 x 10 cells of 64 px), --u the size it is drawn at
   (64: 1:1 with the atlas, 32 for the tab icons, whose 16 px art is 4x there, so 2x here) */
.ic { --u: 64px; flex: none; display: inline-block; width: var(--u); height: var(--u);
  background: url(img/store/icons.webp?v=56a79d39) calc(var(--x) * var(--u) * -1) calc(var(--y) * var(--u) * -1) / calc(var(--u) * 12) calc(var(--u) * 10) no-repeat;
  image-rendering: pixelated; }
.ic.sm { --u: 32px; }
/* a HUD glyph (7 x 7): 0 gem, 1 Silver star, 2 Gold star, 3 Diamond star, 4 coin, 5 boost, 6 bank */
.gl { --g: 14px; display: inline-block; flex: none; width: var(--g); height: var(--g); vertical-align: -1px;
  background: url(img/store/glyphs.png?v=83284d1b) calc(var(--i) * var(--g) * -1) 0 / calc(var(--g) * 7) var(--g) no-repeat; image-rendering: pixelated; }
.gl.x3 { --g: 21px; vertical-align: -3px; }
.gl.x4 { --g: 28px; vertical-align: -5px; }
.px { image-rendering: pixelated; }
.gems { position: relative; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--gem); }
.gems .gl { margin-right: 6px; }

.btn.off { opacity: .55; cursor: not-allowed; pointer-events: none; }
.s-silver { color: var(--silver); } .s-gold { color: var(--tgold); } .s-diamond { color: var(--diamond); }

/* ---------------------------------------------------------------- hero */
.shop-hero { position: relative; padding: clamp(112px, 12vw, 164px) 0 clamp(40px, 5vw, 72px); isolation: isolate; overflow: hidden; }
.shop-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 46% 60% at 76% 62%, rgba(94, 230, 230, .13), transparent 70%),
              radial-gradient(ellipse 40% 46% at 60% 80%, rgba(232, 178, 58, .08), transparent 70%); }
.sh-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.sh-text h1 { font-size: clamp(64px, 9vw, 128px); margin-bottom: 22px; }
.sh-text .lead { max-width: 30em; margin-bottom: 28px; }
.sh-text .ticket { margin-bottom: 28px; }
.sh-text .ticket > div:first-child b { color: var(--gold); }
/* a little less air in the ticket on wide screens, so "nothing can be bought" keeps to one line like the other two */
@media (min-width: 901px) { .sh-text .ticket > div { padding-left: 16px; padding-right: 16px; } }
/* the three VIP pets on one stage, each lit from behind in its tier's colour */
/* the three stand as a group sized to the column (--H, the Drakeling's height), the two outer ones a little behind */
.sh-art { container-type: inline-size; }
/* on screens wider than the page's column the group may stand out past it, into the margin on the right */
@media (min-width: 1400px) { .sh-art { margin-right: max(-260px, calc((1240px - 100vw) / 2 + 24px)); } }
.stage { --H: min(340px, 47cqw); list-style: none; margin: 0; padding: 0; position: relative; display: flex; justify-content: center; align-items: flex-end; }
.stage li.s { margin-right: calc(var(--H) * -.1); }
.stage li.g { margin-left: calc(var(--H) * -.1); }
.stage::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: 44px; height: 1px; z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(236, 231, 220, .28) 20%, rgba(236, 231, 220, .28) 80%, transparent); }
.stage li { position: relative; display: flex; flex-direction: column; align-items: center; isolation: isolate; }
.stage li::before { content: ""; position: absolute; left: -12%; right: -12%; bottom: 30px; height: 88%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side at 50% 62%, rgb(var(--k) / .36), rgb(var(--k) / .12) 55%, transparent); }
.stage img { height: calc(var(--h) * var(--H)); width: auto; max-width: none; margin-bottom: 6px;
  filter: drop-shadow(0 16px 14px rgba(0, 0, 0, .55)); }
.stage .short { display: none; }
.stage b { font-weight: 500; }
.stage span { display: flex; align-items: center; gap: 8px; min-height: 38px; white-space: nowrap; font: 500 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--k)); }
.stage .d img { position: relative; z-index: 1; }
@container (max-width: 600px) { .stage .long { display: none; } .stage .short { display: inline; } }
.sh-cap { font: 400 12px/1.5 var(--mono); color: var(--dim); margin: 14px 0 0; text-align: right; }
@media (max-width: 900px) {
  /* phones and tablets: the pets come up between the words and the ticket, so the first screen holds them */
  .sh-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .sh-text { display: contents; }
  .sh-text .kicker { order: 1; }
  .sh-text h1 { order: 2; margin-bottom: 16px; }
  .sh-text .lead { order: 3; margin-bottom: 8px; }
  .sh-art { order: 4; margin: 0 0 24px; }
  .sh-text .ticket { order: 5; }
  .sh-text .hero-cta { order: 6; }
  .stage { margin: 8px auto 0; width: 100%; }
  .sh-cap { text-align: center; }
}
@media (max-width: 600px) { .sh-cap { display: none; } .promise { padding: 24px 18px; } }

/* ---------------------------------------------------------------- the promise */
.promise { position: relative; margin-top: clamp(24px, 4vw, 48px); padding: clamp(28px, 4vw, 52px); background: var(--panel); border: 1px solid var(--line); }
.promise-bar { position: absolute; inset: -1px -1px auto; height: 3px; display: flex; }
.promise-bar span { flex: 1; }
.promise-bar .t { background: var(--tarus); }
.promise-bar .h { background: var(--humana); }
.promise-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.promise h2.display { font-size: clamp(48px, 6.4vw, 92px); margin-bottom: 20px; }
.struck { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.struck li { font: 500 clamp(14px, 1.3vw, 16px)/1 var(--mono); padding: 11px 14px; border: 1px solid var(--line-2); color: var(--ash);
  text-decoration: line-through; text-decoration-color: var(--tarus); text-decoration-thickness: 2px; background: rgba(11, 12, 15, .4); }
.whys { list-style: none; margin: 30px 0 0; padding: 26px 0 0; display: grid; gap: 22px; border-top: 1px solid var(--line); }
.whys li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: start; }
.whys .why-art { grid-row: span 2; width: 48px; height: 48px; display: grid; place-items: center; background: rgba(11, 12, 15, .5); border: 1px solid var(--line); }
.whys b { font-size: 16px; color: var(--bone); }
.whys p { font-size: 14.5px; line-height: 1.55; color: #C8C3B8; margin: 0; }
.case-mini { width: 32px; height: 32px; background: url(img/store/cases.png?v=bca25225) -96px 0 / 128px 32px no-repeat; image-rendering: pixelated; }
.helm-mini { font: 700 26px/1 var(--display); color: var(--gold); }
@media (max-width: 960px) { .promise-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- 01 gem packs */
.packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.pack { position: relative; display: flex; flex-direction: column; padding: 26px 26px 24px; background: linear-gradient(170deg, var(--panel), #0F1115); border: 1px solid var(--line-2); overflow: hidden; isolation: isolate; }
.pack::before { content: ""; position: absolute; right: -30%; top: -40%; width: 90%; height: 90%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(94, 230, 230, calc(.06 + var(--n) * .04)), transparent); }
.pack.best { border-color: rgba(242, 193, 78, .8); box-shadow: inset 0 2px 0 var(--gold); }
.pack-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 26px; }
.pack h3 { margin: 0; font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ash); white-space: nowrap; }
.tag { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #17130A; background: var(--gold); padding: 5px 8px; white-space: nowrap; }
.pack-gems { display: flex; align-items: flex-end; gap: 0; height: 56px; margin: 22px 0 6px; }
.pack-gems .gl { --g: 28px; margin-right: -6px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.pack-gems .gl:nth-child(2) { transform: translateY(-10px); }
.pack-gems .gl:nth-child(3) { transform: translateY(-2px); }
.pack .total { font: 700 clamp(52px, 5.2vw, 72px)/1 var(--display); color: var(--bone); margin: 6px 0 10px; font-variant-numeric: lining-nums; }
.pack .total small { font: 500 13px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gem); margin-left: 10px; vertical-align: 14px; }
.pack .break { font: 400 14px/1.5 var(--mono); color: var(--ash); font-variant-numeric: tabular-nums; }
.pack .break b { color: var(--gold); font-weight: 500; }
.pack .rate, .pack .after { font: 400 12.5px/1.5 var(--mono); color: var(--dim); font-variant-numeric: tabular-nums; }
.pack .after { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 12px; }
.pack-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 20px; }
.price { font: 700 34px/1 var(--display); color: var(--gold); white-space: nowrap; }
.how { list-style: none; margin: clamp(28px, 3vw, 40px) 0 0; padding: 0; counter-reset: h; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-2); }
.how li { counter-increment: h; position: relative; padding: 16px 20px 0 44px; font-size: 15px; line-height: 1.5; color: #C8C3B8; }
.how li::before { content: counter(h); position: absolute; left: 0; top: 12px; font: 700 30px/1 var(--display); color: var(--gem); }
.how b { color: var(--bone); }
.note { font: 400 13px/1.6 var(--mono); color: var(--ash); margin: 22px 0 0; max-width: 48em; }
@media (max-width: 1000px) { .pack { padding: 20px 18px 18px; } .pack .total { font-size: 46px; } .pack .break { font-size: 13px; } .how { grid-template-columns: minmax(0, 1fr); } .how li { padding-top: 14px; } }
/* three packs side by side on a tablet leave no room for a name and its tag on one line ("Launch · best value" was cut
   off from 720 to 960 px): there the tag goes under the name, in all three alike */
@media (min-width: 720px) and (max-width: 1000px) { .pack-top { flex-direction: column; align-items: flex-start; gap: 10px; } }
@media (max-width: 719px) {
  .packs { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .pack { padding: 20px 20px 18px; }
  .pack-gems { position: absolute; right: 20px; top: 58px; height: auto; margin: 0; }
  .pack .total { margin-top: 18px; }
  .pack .after { margin-top: 12px; padding-top: 10px; }
  .pack-foot { padding-top: 14px; }
}

/* ---------------------------------------------------------------- 02 VIP */
.tiers { list-style: none; margin: 0 0 clamp(28px, 3vw, 40px); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.tier { position: relative; display: flex; flex-direction: column; padding: 0 clamp(20px, 2vw, 28px) 24px; background: linear-gradient(180deg, #0F1115, var(--panel) 46%); border: 1px solid var(--line); border-top: 2px solid rgb(var(--k)); overflow: hidden; isolation: isolate; }
.tier-art { position: relative; height: clamp(200px, 18vw, 250px); display: flex; align-items: flex-end; justify-content: center; margin: 0 -8px 16px; }
.tier-art::before { content: ""; position: absolute; left: 6%; right: 6%; top: 10%; bottom: -10%; z-index: -1; background: radial-gradient(closest-side at 50% 64%, rgb(var(--k) / .34), rgb(var(--k) / .08) 60%, transparent); }
.tier-art::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -8px; height: 22px; z-index: -1; background: radial-gradient(closest-side, rgba(0, 0, 0, .75), transparent); }
.tier-art img { height: calc(100% - 22px); width: auto; max-width: none; filter: drop-shadow(0 12px 10px rgba(0, 0, 0, .5)); }
.tier h3 { display: flex; align-items: center; gap: 12px; font: 700 clamp(40px, 3.8vw, 54px)/1 var(--display); color: rgb(var(--k)); margin: 0 0 8px; }
.tier .cost { font: 400 13px/1.4 var(--mono); color: var(--ash); margin: 0 0 14px; }
.tier .cost b { font: 700 30px/1 var(--display); color: var(--bone); margin-right: 6px; }
.tier p.sum { font-size: 15px; line-height: 1.55; color: #C8C3B8; margin: 0 0 20px; }
.tier .btn { margin-top: auto; align-self: flex-start; }
.tier.top { border-color: rgba(94, 230, 230, .45); box-shadow: 0 0 0 1px rgba(94, 230, 230, .12), 0 24px 60px -30px rgba(94, 230, 230, .35); }
.pill { position: absolute; top: 14px; right: 14px; font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #06201F; background: var(--diamond); padding: 5px 7px; }
@media (max-width: 1000px) { .pill { display: none; } .tiers { grid-template-columns: minmax(0, 1fr); } .tier { display: grid; grid-template-columns: 140px minmax(0, 1fr); column-gap: 20px; padding-top: 20px; }
  .tier-art { grid-row: 1 / 6; height: 170px; margin: 0; align-self: center; } .tier h3, .tier .cost, .tier p.sum, .tier .btn { grid-column: 2; } .tier .btn { justify-self: start; } }
@media (max-width: 480px) { .tier { grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; } .tier-art { height: 124px; } .tier h3 { font-size: 36px; } }

/* a name tag with each tier's star, as the game draws it over a head: the star in the tier's colour, the name in the
   nation's, on the dark plate of a Minecraft name tag */
.tags { align-self: center; }
.tags ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; justify-items: start; }
.tags li { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 12px; background: rgba(0, 0, 0, .5); border: 1px solid var(--line);
  font: 500 clamp(17px, 1.7vw, 22px)/1.2 var(--mono); }
.tags li span { color: var(--bone); }
.tags li em { font: 500 11px/1 var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; margin-left: 10px; opacity: .85; }
.tags .cap { margin-top: 16px; max-width: 30em; }
/* the name tags keep to one line, so the column beside the words must hold one: below 1100 px they go under the words
   (at 1024 the Diamond tag's level broke onto a second line) */
@media (max-width: 1100px) { #vip .ch-body { grid-template-columns: minmax(0, 1fr); } }
/* the table: every perk against every tier */
.vip-wrap { border: 1px solid var(--line-2); background: var(--panel); }
.vip { width: 100%; border-collapse: collapse; font-size: 15px; }
.vip caption { text-align: left; padding: 18px 20px 4px; font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bone); }
.vip caption span { display: inline-block; color: var(--dim); letter-spacing: .06em; text-transform: none; }
.vip th, .vip td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: center; font-weight: 400; vertical-align: middle; }
.vip thead th { padding: 14px 16px; font: 700 26px/1 var(--display); border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.vip thead th .gl { margin-right: 8px; }
.vip thead th:first-child { text-align: left; font: 500 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.vip tbody th { text-align: left; color: var(--bone); font-weight: 400; }
.vip tbody th .perk { display: flex; align-items: center; gap: 14px; }
.vip tbody th small { display: block; font: 400 12px/1.45 var(--mono); color: var(--dim); margin-top: 3px; }
.vip .grp th { text-align: left; font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); background: var(--night-2); padding: 9px 16px; }
.vip .yes { color: var(--good); font-size: 19px; font-weight: 600; }
.vip .yes.s-silver { color: var(--silver); } .vip .yes.s-gold { color: var(--tgold); } .vip .yes.s-diamond { color: var(--diamond); }
.vip .no { color: #7C8089; }
.vip .n { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--bone); white-space: nowrap; }
.vip td:nth-child(4), .vip thead th:nth-child(4) { background: rgba(94, 230, 230, .045); }
.vip .thumb { flex: none; width: 56px; height: 48px; display: grid; place-items: end center; }
.vip .thumb img { max-height: 48px; width: auto; }
.vip .fontthumb img { width: calc(var(--w) * 2px); height: calc(var(--hh) * 2px); max-height: none; image-rendering: pixelated; }
@media (max-width: 720px) {
  .vip { font-size: 14px; table-layout: fixed; }
  .vip th, .vip td { padding: 10px 4px; }
  .vip tbody th { width: 46%; padding-left: 12px; }
  .vip thead th { font-size: 17px; padding: 12px 2px; }
  .vip thead th .gl { display: block; margin: 0 auto 6px; }
  .vip thead th:first-child { width: 46%; padding-left: 12px; font-size: 10px; }
  .vip .grp th { padding: 8px 12px; }
  .vip tbody th .perk { gap: 10px; }
  .vip .thumb { width: 40px; height: 36px; } .vip .thumb img { max-height: 36px; } .vip .fontthumb img { width: calc(var(--w) * 1px); height: calc(var(--hh) * 1px); }
  .vip .gems .gl { display: none; }
  .vip tbody th small { font-size: 11px; }
}
@media (max-width: 400px) { .vip .thumb { display: none; } }
.fine { font: 400 13px/1.7 var(--mono); color: var(--ash); border-left: 2px solid var(--gold); padding: 4px 0 4px 18px; margin: 22px 0 0; max-width: 53em; }

/* ---------------------------------------------------------------- 03 boosts */
.boost-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.blist { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line-2); background: var(--panel); }
.blist li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 20px; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.blist li:last-child { border-bottom: 0; }
.blist li.bundle { background: linear-gradient(90deg, rgba(242, 193, 78, .08), transparent 62%); }
.blist h3 { font: 700 26px/1.1 var(--display); margin: 0; }
.blist .dur { font: 400 11.5px/1 var(--mono); color: var(--dim); letter-spacing: .08em; text-transform: uppercase; margin-left: 10px; white-space: nowrap; }
.blist p { margin: 5px 0 0; font-size: 14.5px; line-height: 1.5; color: #C8C3B8; max-width: 34.4em; }
.blist .cost { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.blist .eur { display: block; font: 700 30px/1.05 var(--display); color: var(--gold); }
.blist .gems { display: block; font-size: 13px; margin-top: 4px; }
.blist .save { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--good); margin-top: 4px; }
.mult-card { background: var(--panel); border: 1px solid var(--line); padding: 22px clamp(18px, 2vw, 26px) 20px; }
.ladder { list-style: none; margin: 0; padding: 0; }
.ladder li { display: grid; grid-template-columns: 4.2em minmax(0, 1fr) 7.4em; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.ladder b { font: 700 26px/1 var(--display); color: var(--bone); }
.ladder li.loud b { color: #B99BF6; }
.ladder i { height: 8px; width: max(3px, calc(var(--v) * 100%)); background: linear-gradient(90deg, #B99BF6, var(--abyss)); border-radius: 1px; }
.ladder span { font: 400 12px/1.2 var(--mono); color: var(--ash); text-align: right; font-variant-numeric: tabular-nums; }
.mult-card .note { margin-top: 14px; font-size: 12px; color: var(--dim); }
@media (max-width: 960px) { .boost-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) {
  .blist li { grid-template-columns: auto minmax(0, 1fr); padding: 16px; gap: 6px 14px; }
  .blist li > .ic { --u: 48px; background-size: calc(var(--u) * 12) calc(var(--u) * 10); }
  .blist .cost { grid-column: 2; text-align: left; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
  .blist .eur, .blist .gems, .blist .save { display: inline; }
  .blist h3 { font-size: 23px; }
  .blist .dur { display: block; margin: 6px 0 0; }
}

/* ---------------------------------------------------------------- 04 the gem shop */
.gs-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 5vw, 72px); align-items: center; margin-bottom: clamp(40px, 5vw, 64px); }
.ingame { margin: 0; }
.ingame img { width: calc(352px * var(--z2, 2)); height: auto; max-width: 100%; image-rendering: pixelated; border: 1px solid var(--line-2); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.ingame .cap { margin-top: 10px; }
@media (max-width: 1180px) { .ingame img { --z2: 1.5; } }
@media (max-width: 960px) { .gs-intro { grid-template-columns: minmax(0, 1fr); } .ingame img { --z2: 2; } }
@media (max-width: 760px) { .ingame img { --z2: 1; } }

.cat-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 clamp(22px, 3vw, 34px); padding: 0 0 14px; border-bottom: 1px solid var(--line-2); }
.cat-tabs[hidden] { display: none; }
.cat-tabs button { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 7px 13px 7px 7px; background: rgba(20, 22, 27, .7); border: 1px solid var(--line); border-radius: 2px; cursor: pointer;
  font: 500 12.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ash); transition: border-color .15s, color .15s, background-color .15s, transform .15s var(--ease-out); }
.cat-tabs button:hover { color: var(--bone); border-color: var(--line-2); }
.cat-tabs button[aria-selected="true"] { color: var(--bone); border-color: rgba(242, 193, 78, .85); background: rgba(242, 193, 78, .08); box-shadow: inset 0 -2px 0 var(--gold); }
.cat-tabs button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cat-tabs button:active { transform: scale(.97); transition-duration: .06s; }
.cat-tabs .ic { --u: 32px; }
.cat-tabs .count { color: var(--dim); font-size: 11px; letter-spacing: 0; }
@media (max-width: 1180px) { .cat-tabs .count { display: none; } }
@media (max-width: 640px) {
  /* phones: the tabs as the game's own row of icons, four to a line, the name under each */
  .cat-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .cat-tabs button { flex-direction: column; justify-content: center; gap: 6px; padding: 10px 4px 9px; min-height: 72px; font-size: 11px; letter-spacing: .04em; }
  .cat-tabs .count { display: none; }
}
.cat { scroll-margin-top: 32px; }
.cat[hidden] { display: none; }
.cat + .cat { margin-top: 64px; }
.js .cat + .cat { margin-top: 0; }
.cat-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 28px; margin-bottom: 24px; }
.cat-head h3 { font: 700 clamp(40px, 4.4vw, 60px)/1 var(--display); margin: 0; }
.cat-head p { font-size: 16px; color: #C8C3B8; max-width: 35.5em; margin: 0; }

/* pets: renders on one floor, as the home page's lineups */
.petline { list-style: none; margin: 0; padding: 0 0 4px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  background: radial-gradient(ellipse 60% 40% at 50% 100%, rgb(var(--z) / .16), transparent 70%); border-bottom: 1px solid var(--line-2); }
.petline li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
/* a pet keeps its height and, when a longer line leaves it less room than its width, shrinks inside its box and stays on
   the floor, so the line holds up to eight pets without changing its look */
.petline img { height: calc(var(--h, 1) * clamp(150px, 15vw, 210px)); width: auto; max-width: 100%; object-fit: contain; object-position: 50% 100%; margin-bottom: 14px; filter: drop-shadow(0 14px 10px rgba(0, 0, 0, .55)); }
.petline b { font-size: 15px; font-weight: 600; line-height: 1.3; }
.petline .gems, .petline span { font-size: 12px; margin: 4px 0 16px; }
.petline span { font: 400 11.5px/1.4 var(--mono); color: var(--dim); }
@media (max-width: 900px) {
  .petline { justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--gut); gap: 20px; padding: 0 var(--gut) 4px; margin: 0 calc(var(--gut) * -1); scrollbar-width: thin; }
  .petline li { flex: 0 0 auto; scroll-snap-align: start; }
  .petline img { height: calc(var(--h, 1) * 160px); }
}

/* damage fonts: the game's digits at whole multiples (3x, 2x on phones) */
.fonts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.fonts li { display: grid; grid-template-rows: 104px auto; padding: 18px 20px 16px; background: var(--panel); border: 1px solid var(--line); }
.fonts .sample { display: flex; align-items: center; justify-content: flex-start; }
.fonts .sample img { width: calc(var(--w) * 3px); height: calc(var(--hh) * 3px); image-rendering: pixelated; }
.fonts .meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.fonts b { font-size: 16px; }
.fonts .meta span { font: 400 12px/1.3 var(--mono); color: var(--dim); }
.fonts li.lent { border-color: rgb(var(--k) / .45); background: linear-gradient(180deg, rgb(var(--k) / .07), var(--panel) 60%); }
.fonts li.lent .meta span { color: rgb(var(--k)); }
@media (max-width: 560px) { .fonts li { grid-template-rows: 76px auto; } .fonts .sample img { width: calc(var(--w) * 2px); height: calc(var(--hh) * 2px); } }

/* effect slots: one row per slot, the looks as the gem shop's own icons */
.slots { display: grid; gap: 0; border-top: 1px solid var(--line-2); }
.slot { display: grid; grid-template-columns: minmax(180px, 250px) minmax(0, 1fr); gap: 16px clamp(20px, 3vw, 44px); padding: 22px 0; border-bottom: 1px solid var(--line); }
.slot h4 { margin: 0; font: 600 18px/1.25 var(--body); color: var(--bone); }
.slot .slot-price { margin: 8px 0 6px; font-size: 14px; }
.slot .slot-what { font-size: 14px; line-height: 1.5; color: var(--ash); margin: 0; }
.looks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px 10px; align-content: start; }
.looks li { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 13.5px; line-height: 1.3; color: var(--bone); }
.looks .ic { --u: 80px; background-color: rgba(11, 12, 15, .55); outline: 1px solid var(--line); outline-offset: 5px; margin: 6px 0 4px; }
.profile-grid .looks .ic { --u: 64px; }
@media (max-width: 700px) { .slot { grid-template-columns: minmax(0, 1fr); } .looks { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); } }

/* skill skins: one ability per class, the kit's own colours and each set */
.skins { display: grid; gap: 0; border-top: 1px solid var(--line-2); }
.skin { display: grid; grid-template-columns: minmax(170px, 220px) minmax(0, 1fr); gap: 12px clamp(20px, 3vw, 40px); align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.skin h4 { margin: 0; font: 700 clamp(34px, 3.4vw, 44px)/1 var(--display); color: var(--bone); }
.skin .ab { font: 400 12.5px/1.5 var(--mono); color: var(--ash); margin: 8px 0 0; }
.sets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.sets li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; min-width: 0; padding: 10px 6px 8px; border-radius: 2px;
  background: radial-gradient(ellipse 70% 60% at 50% 60%, rgb(var(--c) / .16), transparent 72%); }
.sets .own { border: 1px dashed var(--line-2); background: none; }
.sets img { height: clamp(96px, 9.5vw, 132px); width: 100%; object-fit: contain; margin-bottom: 8px; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }
.sets b { font-size: 13.5px; font-weight: 600; color: rgb(var(--c)); }
.sets .own b { color: var(--ash); font-weight: 400; }
@media (max-width: 800px) {
  .skin { grid-template-columns: minmax(0, 1fr); }
  .sets { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; gap: 8px; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut) 6px; scrollbar-width: thin; }
  .sets li { flex: 0 0 116px; scroll-snap-align: start; }
  .sets img { height: 100px; }
}

/* world events: a window of sky each, tinted like the hour it holds */
.events { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.events li { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 20px; border: 1px solid var(--line); overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, var(--sky1), var(--sky2) 70%, var(--panel)); }
.events li::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 12, 15, 0) 30%, rgba(11, 12, 15, .82)); }
.events .ev-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.events h4 { margin: 4px 0 0; font: 700 28px/1 var(--display); color: var(--bone); text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
.events p { font-size: 14px; line-height: 1.5; color: #D5D0C5; margin: 0; }
.events .gems { font-size: 12.5px; }
@media (max-width: 1100px) { .events { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .events { grid-template-columns: minmax(0, 1fr); } }

/* toys and the profile: a list of wares with their icons */
.wares { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.wares li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; align-items: center; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); }
.wares .ic { grid-row: span 3; }
.wares b { font-size: 16px; }
.wares p { font-size: 14px; line-height: 1.5; color: #C8C3B8; margin: 0; }
.wares .gems { font-size: 12.5px; }
.profile-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.profile-grid figure img { width: calc(175px * 3); max-width: 100%; height: auto; image-rendering: pixelated; border: 1px solid var(--line-2); }
.profile-grid .slate { margin-top: 0; }
.profile-grid .wares + .slate { margin-top: 28px; }
@media (max-width: 1000px) { .profile-grid { grid-template-columns: minmax(0, 1fr); } .profile-grid figure img { width: calc(175px * 2); } }

/* ---------------------------------------------------------------- 05 earned, never sold */
.earned { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.earn { position: relative; padding: clamp(22px, 2.6vw, 34px); background: var(--panel); border: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.earn h3 { font: 700 clamp(34px, 3.4vw, 46px)/1 var(--display); margin: 0 0 14px; color: rgb(var(--z)); }
.earn p { font-size: 15.5px; line-height: 1.6; color: #C8C3B8; }
.earn .tagline { display: inline-block; margin-top: 4px; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 8px; color: var(--good); border: 1px solid rgba(94, 211, 122, .5); }
.earn-cases { grid-row: span 2; display: flex; flex-direction: column; }
.earn-cases .shot { margin: 20px 0 0; }
.earn-cases .shot img { width: 528px; max-width: 100%; height: auto; border: 1px solid var(--line-2); image-rendering: pixelated; }
@media (max-width: 1240px) { .earn-cases .shot img { width: 352px; } }
.case-row { display: flex; gap: 10px; margin: 6px 0 18px; }
.case-row i { width: 64px; height: 64px; background: url(img/store/cases.png?v=bca25225) calc(var(--c) * -64px) 0 / 256px 64px no-repeat; image-rendering: pixelated; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
/* every pet is drawn at one height and hangs from the top of its column, so they stand level however long a caption runs */
.bosspets { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 4px; align-items: flex-start; border-bottom: 1px solid var(--line-2);
  background: radial-gradient(ellipse 60% 50% at 50% 100%, rgba(255, 122, 47, .12), transparent 72%); }
.bosspets li { flex: 0 0 calc((100% - 8px) / 3); display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 76px; }
.bosspets img { height: clamp(80px, 8vw, 118px); width: auto; max-width: 100%; object-fit: contain; margin-bottom: 8px; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .5)); }
.bosspets b { font-size: 13px; font-weight: 600; }
.bosspets span { font: 400 11px/1.35 var(--mono); color: var(--dim); margin: 2px 0 12px; }
/* the Mimic, the cases' rarest prize, lit in gold; and the Pumpkin Imp, one line under the boss pets */
.rare { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: end; margin: 4px 0 18px; padding: 14px 18px 0 12px;
  border: 1px solid rgba(242, 193, 78, .3); border-bottom-color: rgba(242, 193, 78, .6);
  background: radial-gradient(ellipse 50% 90% at 14% 100%, rgba(242, 193, 78, .16), transparent 72%), rgba(11, 12, 15, .35); }
.rare img { height: 110px; width: auto; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .5)); }
.rare p { font-size: 14.5px; line-height: 1.55; margin: 0 0 16px; }
.rare b { display: block; font: 700 28px/1 var(--display); color: var(--gold); margin-bottom: 8px; }
.imp { display: flex; align-items: center; gap: 14px; margin: 16px 0 0; font-size: 14.5px; line-height: 1.5; }
.imp img { flex: none; height: 72px; width: auto; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .5)); }
.imp b { color: #F0913A; font-weight: 600; }
@media (max-width: 560px) { .rare img { height: 90px; } }
.founder figure { margin-top: 18px; }
.founder img { width: calc(175px * 2); max-width: 100%; height: auto; image-rendering: pixelated; border: 1px solid var(--line-2); }
.codes code { font: 500 14px/1 var(--mono); color: var(--gold); background: rgba(242, 193, 78, .08); border: 1px solid rgba(242, 193, 78, .3); padding: 3px 6px; }
@media (max-width: 900px) { .earned { grid-template-columns: minmax(0, 1fr); } .earn-cases { grid-row: auto; } }
@media (max-width: 480px) { .bosspets { justify-content: center; } .bosspets li { flex: 0 0 30%; } }

/* ---------------------------------------------------------------- questions and the way out */
.qa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(24px, 4vw, 56px); }
.qa details { border-top: 1px solid var(--line-2); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 2px; font: 600 17px/1.35 var(--body); color: var(--bone); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; flex: none; font: 500 22px/1 var(--mono); color: var(--gold); transition: transform .2s; }
.qa details[open] summary::after { transform: rotate(45deg); }
.qa summary:hover { color: var(--gold); }
.qa summary:active { color: var(--gold); }
/* an answer opens and closes smoothly where the browser can animate to a height of auto (interpolate-size and
   ::details-content); elsewhere it opens at once, as a plain details does. Never with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) and selector(::details-content) {
    .qa { interpolate-size: allow-keywords; }
    .qa details::details-content { block-size: 0; overflow-y: clip; opacity: 0;
      transition: block-size .34s var(--ease-out), opacity .24s, content-visibility .34s allow-discrete; }
    .qa details[open]::details-content { block-size: auto; opacity: 1; }
  }
}
.qa details p { font-size: 15.5px; line-height: 1.6; color: #C8C3B8; margin: 0; padding-bottom: 18px; max-width: 35.5em; }
@media (max-width: 860px) { .qa { grid-template-columns: minmax(0, 1fr); } }

.outro { position: relative; margin-top: clamp(80px, 10vw, 140px); padding: clamp(56px, 7vw, 96px) 0; border-top: 1px solid var(--line); isolation: isolate; overflow: hidden; }
.outro::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 50% 70% at 15% 100%, rgba(94, 230, 230, .10), transparent 70%), radial-gradient(ellipse 40% 60% at 90% 0%, rgba(242, 193, 78, .08), transparent 70%); }
.outro h2.display { font-size: clamp(48px, 7vw, 100px); max-width: 12em; margin-bottom: 22px; }
.outro .lead { max-width: 40em; margin-bottom: 28px; }
.outro .hero-cta { margin-top: 0; }
.outro .signoff { margin-top: 24px; color: var(--ash); }

/* the chapters on this page sit closer than the home page's */
.page-store .ch { --pad: clamp(88px, 10vw, 140px); }
.page-store .ch h2.display { font-size: clamp(56px, 8.4vw, 124px); }

/* ---------------------------------------------------------------- motion, as the home page moves */
@media (prefers-reduced-motion: no-preference) {
  /* a gem shop tab: its wares fade in */
  .js .cat:not([hidden]) { animation: cat-in .45s var(--ease-out, cubic-bezier(.2, .7, .2, 1)); }
}
@keyframes cat-in { from { opacity: 0; } }
/* the figures answer the pointer, as the home page's do: a pet hops, a tier's pet leans out of its card */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .stage img, .petline img, .bosspets img, .rare img, .tier-art img, .sets img, .looks .ic, .wares .ic, .events .ic { transition: transform .45s var(--ease-out, cubic-bezier(.2, .7, .2, 1)); }
  .stage li:hover img, .petline li:hover img, .bosspets li:hover img, .sets li:hover img, .rare:hover img { transform: translateY(-6px); }
  .tier:hover .tier-art img { transform: translateY(-6px) scale(1.03); }
  .looks li:hover .ic, .wares li:hover .ic, .events li:hover .ic { transform: translateY(-3px); }
  .tier, .pack, .events li, .wares li, .fonts li { transition: border-color .3s, box-shadow .3s; }
  .tier:hover { border-color: rgb(var(--k) / .5); }
  .pack:hover { border-color: rgba(94, 230, 230, .45); }
  .pack.best:hover { border-color: var(--gold); }
  .events li:hover, .wares li:hover, .fonts li:hover { border-color: var(--line-2); }
}