/* =============================================================
   Retro SkyBlock web style  ·  v1.3
   Brand colors sampled from the RS logo art.
   Chat colors and prefix follow the RS Style Guide.
   The dashboard (web/admin) reuses the tokens and components in this file.
   ============================================================= */

/* The in game font. It is the "Minecraft" font by Idrees Hassan, free to use under the
   SIL Open Font License 1.1: the licence and the credit are in /assets/fonts/. */
@font-face{font-family:"Retro Pixel";src:url("../fonts/Minecraft.otf") format("opentype");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"Retro Pixel";src:url("../fonts/Minecraft-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:block}

:root{
  color-scheme:dark;
  --gutter:clamp(16px,4vw,40px);
  --nav-h:76px;

  /* Brand, from the logo */
  --gold:#FFD21A; --gold-hi:#FFEB70; --gold-mid:#FFB320; --gold-deep:#F99E15; --gold-edge:#A5570A; --on-gold:#031535;
  --aqua:#54D7E9; --aqua-hi:#BDF8FF; --aqua-top:#6FE3F5; --aqua-mid:#3CC6EE; --aqua-deep:#25A9DE; --aqua-edge:#0E5A86; --on-aqua:#031535;
  --grad-gold:linear-gradient(180deg,var(--gold-hi) 0%,var(--gold) 48%,var(--gold-mid) 52%,var(--gold-deep) 100%);
  --grad-aqua:linear-gradient(180deg,var(--aqua-hi) 0%,var(--aqua-top) 48%,var(--aqua-mid) 52%,var(--aqua-deep) 100%);
  --leaf:#93CF32; --navy:#031535;

  /* In game colors, from the RS Style Guide */
  --mc-e:#FFFF55; --mc-b:#55FFFF; --mc-7:#AAAAAA; --mc-8:#555555;
  --mc-a:#55FF55; --mc-c:#FF5555; --mc-f:#FFFFFF; --mc-6:#FFAA00;

  /* Status */
  --ok:#5EF08A; --bad:#FF6B6B;

  /* Charcoal base (default) */
  --bg:#0B0B0E; --bg-2:#111116;
  --face:#15161B; --face-2:#1C1D24; --edge:#08080A;
  --rim:rgba(255,255,255,.08); --rim-2:color-mix(in srgb,var(--gold) 34%,transparent);
  --ink:#F5F7FB; --text:#BEC0CC; --muted:#9496A5; --dim:#646677;
  --well:rgba(0,0,0,.45);
  --glass:rgba(14,14,18,.62); --glass-edge:rgba(4,4,6,.78); --glass-rim:rgba(255,255,255,.18);
  --sky-top:rgba(11,11,14,.50); --sky-mid:rgba(11,11,14,.30);
  --stars:0;

  /* Shape: corners cut at an angle like the logo letters */
  --cut-lg:14px; --cut-md:10px; --cut-sm:7px;
  --shape-lg:polygon(var(--cut-lg) 0,100% 0,100% calc(100% - var(--cut-lg)),calc(100% - var(--cut-lg)) 100%,0 100%,0 var(--cut-lg));
  --shape-md:polygon(var(--cut-md) 0,100% 0,100% calc(100% - var(--cut-md)),calc(100% - var(--cut-md)) 100%,0 100%,0 var(--cut-md));
  --shape-sm:polygon(var(--cut-sm) 0,100% 0,100% calc(100% - var(--cut-sm)),calc(100% - var(--cut-sm)) 100%,0 100%,0 var(--cut-sm));
  --r-lg:0px; --r-md:0px; --r-sm:0px;
  /* For boxes that rise when they are pointed at (see "Boxes that react" at the end): how
     far they rise, the shape they have at rest, and the same shape reaching down under
     them by that much. It reaches half a pixel further than the box rises, so a pointer
     resting exactly on the cut edge stays on the box. */
  --up:5px; --up-md:4px;
  --shape-lg-rest:var(--shape-lg); --shape-md-rest:var(--shape-md);
  --shape-lg-up:polygon(var(--cut-lg) 0,100% 0,100% calc(100% + var(--up) + .5px - var(--cut-lg)),calc(100% - var(--cut-lg)) calc(100% + var(--up) + .5px),0 calc(100% + var(--up) + .5px),0 var(--cut-lg));
  --shape-md-up:polygon(var(--cut-md) 0,100% 0,100% calc(100% + var(--up-md) + .5px - var(--cut-md)),calc(100% - var(--cut-md)) calc(100% + var(--up-md) + .5px),0 calc(100% + var(--up-md) + .5px),0 var(--cut-md));
  /* A pressed button, together with the strip right above it that it has just left (see "Buttons") */
  --shape-sm-press:polygon(var(--cut-sm) 0,var(--cut-sm) -5px,100% -5px,100% calc(100% - var(--cut-sm)),calc(100% - var(--cut-sm)) 100%,0 100%,0 var(--cut-sm));
  --spring:cubic-bezier(.34,1.56,.64,1);

  /* Type */
  --f-display:"Russo One","Arial Black",Impact,system-ui,sans-serif;
  --f-body:"Rubik",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-pixel:"Retro Pixel","Courier New",ui-monospace,monospace;
  /* The pixel font is drawn on a grid: a line of text is 9 game pixels tall, so at 18px
     one game pixel is 2 screen pixels and every dot is sharp. Use 18px for it, or 36px
     for something large: in between (27px, say) a game pixel is not a whole number of
     screen pixels and the letters go soft.
     --px is one game pixel. The two spacings make each letter exactly as wide as it is
     in game (the font file leaves half a pixel more between letters). */
  --px:calc(1em / 9); --px-ls:calc(-1em / 18); --px-ws:calc(1em / 18);
  /* The shadow of pixel text, as the game draws it: one game pixel down and to the right
     (--sh-k says how many), in a quarter of the text's own color (--sh-mix says how much
     of the color is kept). theme.js sets both from Settings > Look. */
  --sh-mix:25%; --sh-k:1; --sh-d:calc(var(--px) * var(--sh-k));
}

:root[data-corners="round"]{
  --shape-lg:none; --shape-md:none; --shape-sm:none; --shape-sm-press:none;
  --shape-lg-rest:inset(0 round var(--r-lg)); --shape-md-rest:inset(0 round var(--r-md));
  --shape-lg-up:inset(0 0 calc(-1 * (var(--up) + .5px)) round var(--r-lg));
  --shape-md-up:inset(0 0 calc(-1 * (var(--up-md) + .5px)) round var(--r-md));
  --r-lg:18px; --r-md:14px; --r-sm:10px;
}

:root[data-tone="navy"]{
  --bg:#030A1C; --bg-2:#06122E;
  --face:#0A1C40; --face-2:#0E2551; --edge:#040F26;
  --rim:rgba(120,210,255,.14); --rim-2:rgba(120,210,255,.30);
  --ink:#F3F8FF; --text:#B4C3DE; --muted:#8C9DBE; --dim:#5D6F94;
  --well:rgba(1,6,18,.55);
  --glass:rgba(3,14,38,.56); --glass-edge:rgba(1,6,18,.72);
  --sky-top:rgba(3,10,28,.50); --sky-mid:rgba(3,21,53,.26);
  --stars:1;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{
  margin:0;min-height:100vh;background:var(--bg);color:var(--text);
  font:400 16px/1.65 var(--f-body);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;transition:background-color .3s ease;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-10;pointer-events:none;opacity:var(--stars);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Crect x='165' y='77' width='2' height='2' fill='%23fff' fill-opacity='0.25'/%3E%3Crect x='37' y='274' width='1' height='1' fill='%23fff' fill-opacity='0.5'/%3E%3Crect x='298' y='29' width='2' height='2' fill='%23fff' fill-opacity='0.35'/%3E%3Crect x='19' y='44' width='2' height='2' fill='%23fff' fill-opacity='0.7'/%3E%3Crect x='35' y='123' width='1' height='1' fill='%23fff' fill-opacity='0.7'/%3E%3Crect x='30' y='289' width='1' height='1' fill='%23fff' fill-opacity='0.35'/%3E%3Crect x='298' y='31' width='2' height='2' fill='%23fff' fill-opacity='0.7'/%3E%3Crect x='25' y='113' width='1' height='1' fill='%23fff' fill-opacity='0.35'/%3E%3Crect x='148' y='214' width='1' height='1' fill='%23fff' fill-opacity='0.25'/%3E%3Crect x='292' y='157' width='2' height='2' fill='%23fff' fill-opacity='0.35'/%3E%3Crect x='52' y='297' width='2' height='2' fill='%23fff' fill-opacity='0.35'/%3E%3Crect x='190' y='49' width='2' height='2' fill='%23fff' fill-opacity='0.25'/%3E%3Crect x='288' y='30' width='2' height='2' fill='%23fff' fill-opacity='0.35'/%3E%3Crect x='254' y='272' width='2' height='2' fill='%23fff' fill-opacity='0.5'/%3E%3Crect x='238' y='299' width='2' height='2' fill='%23fff' fill-opacity='0.5'/%3E%3Crect x='153' y='127' width='1' height='1' fill='%23fff' fill-opacity='0.35'/%3E%3Crect x='41' y='294' width='2' height='2' fill='%23fff' fill-opacity='0.7'/%3E%3Crect x='175' y='229' width='2' height='2' fill='%23fff' fill-opacity='0.25'/%3E%3Crect x='60' y='262' width='2' height='2' fill='%23fff' fill-opacity='0.35'/%3E%3Crect x='175' y='77' width='2' height='2' fill='%23fff' fill-opacity='0.7'/%3E%3Crect x='20' y='39' width='2' height='2' fill='%23fff' fill-opacity='0.5'/%3E%3Crect x='174' y='179' width='2' height='2' fill='%23fff' fill-opacity='0.7'/%3E%3Crect x='296' y='233' width='1' height='1' fill='%23fff' fill-opacity='0.25'/%3E%3Crect x='138' y='242' width='3' height='3' fill='%23fff' fill-opacity='0.25'/%3E%3Crect x='31' y='158' width='3' height='3' fill='%23fff' fill-opacity='0.7'/%3E%3Crect x='145' y='197' width='3' height='3' fill='%23fff' fill-opacity='0.5'/%3E%3C/svg%3E") 0 0/320px 320px;
  -webkit-mask:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 70%,transparent 100%);
          mask:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 70%,transparent 100%);
  transition:opacity .3s ease;
}
/* A word too long for its place (an address typed into a rule, say) breaks instead of
   sticking out of its box or being cut off at the edge of the screen. Tables keep their
   words whole: a wide table scrolls inside its own frame. Only on the site's own pages:
   the dashboard reuses this file and lays its own text out. */
html[data-page] body{overflow-wrap:anywhere}
html[data-page] table{overflow-wrap:normal}
img,svg{max-width:100%}
img{display:block;height:auto}
[hidden]{display:none!important}
/* Lines for one way of paying only (Settings > Store): rs.js writes data-payments on <html>
   before the page is drawn, so the other way's lines never show, not even for a moment. */
html[data-payments="leaderos"] [data-only="tebex"],html[data-payments="tebex"] [data-only="leaderos"]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--aqua);outline-offset:3px}
::selection{background:var(--gold);color:var(--on-gold)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.i--fill{fill:currentColor;stroke:none}

.wrap{width:min(1200px,100% - 2 * var(--gutter));margin-inline:auto}
.section{position:relative;padding-block:clamp(48px,6.5vw,84px)}

/* ---------- Type ---------- */
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:400;color:var(--ink);line-height:1.08;letter-spacing:.005em;text-wrap:balance}
.h1{font-size:clamp(38px,6vw,68px)}
.h2{font-size:clamp(30px,4.2vw,48px)}
.h3{font-size:clamp(20px,2vw,24px)}
.h4{font-size:18px}
.lede{font-size:clamp(16px,1.35vw,18px);line-height:1.65;color:var(--text);max-width:62ch}
.small{font-size:14px;color:var(--muted)}
.hl-e{color:var(--gold);font-style:normal}
.hl-b{color:var(--aqua);font-style:normal}
/* Everything set in the pixel font, so the spacing above reaches all of it.
   The filter changes nothing you can see by itself. It is there for screens that sharpen
   letters with colored edges (most Windows screens do): a pixel font whose dots land
   between two screen pixels would get red and blue fringes there. Text under a filter
   is smoothed in gray instead, so the letters stay one color. */
.pixel,.prefix,.nav__ip,.season-chip b,.hero-card__value,.mc,.tagline-mc,.chat-line,.input--pixel input,.ip-pill__value,.ver,.rule__num,.season__dates,.step-card__num,.toc a b,.rule-group__title b,.cmd,.chatshot,.bundle__amount,.bundle__was{font-family:var(--f-pixel);font-weight:400;letter-spacing:var(--px-ls);word-spacing:var(--px-ws);filter:opacity(.999)}
/* ---------- The shadow of pixel text ----------
   The game draws its text twice: once in a darker shade, one game pixel down and to the
   right, then the text itself on top. Here the darker shade is mixed from the color of the
   text, so it follows any color. A browser too old to mix colors uses --s: rs.js and the
   dashboard's mc.js give every piece of chat text its own, and the server tag has its three.
   Settings > Look decides where the shadow shows (data-shadow on <html>, set by theme.js):
     all    chat text, and every other light pixel text on the site's pages
     chat   chat text only
     off    nowhere
   Dark pixel text on a bright face (the address on the gold button, a step number, a
   version chip) gets none: the game does not shade dark text either. */
.mcs,.prefix b,.prefix i{text-shadow:var(--sh-d) var(--sh-d) 0 var(--s,#151515)}
html[data-page][data-shadow="all"] :is(.pixel,.season-chip b,.hero-card__value,.ip-pill__value,.rule__num,.season__dates,.toc a b,.rule-group__title b,.cmd,.input--pixel input,.bundle__amount){text-shadow:var(--sh-d) var(--sh-d) 0 rgba(0,0,0,.62)}
@supports (color:color-mix(in srgb,red,blue)){
  .mcs,.prefix b,.prefix i{text-shadow:var(--sh-d) var(--sh-d) 0 color-mix(in srgb,currentColor var(--sh-mix),#000)}
  html[data-page][data-shadow="all"] :is(.pixel,.season-chip b,.hero-card__value,.ip-pill__value,.rule__num,.season__dates,.toc a b,.rule-group__title b,.cmd,.input--pixel input,.bundle__amount){text-shadow:var(--sh-d) var(--sh-d) 0 color-mix(in srgb,currentColor var(--sh-mix),#000)}
}
html[data-shadow="off"] :is(.mcs,.prefix b,.prefix i){text-shadow:none}
.mcs--b{font-weight:700}
.mcs--i{font-style:italic}
.mcs--u{text-decoration:underline;text-decoration-thickness:var(--px);text-underline-offset:var(--px)}
.mcs--s{text-decoration:line-through;text-decoration-thickness:var(--px)}
.mcs--u.mcs--s{text-decoration:underline line-through;text-decoration-thickness:var(--px)}
.label{font:600 12px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* Chat prefix "RS »" used as the section eyebrow */
.eyebrow{display:inline-flex;align-items:baseline;gap:12px;font:700 13px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.prefix{display:inline-flex;align-items:baseline;font:400 18px/1 var(--f-pixel);text-transform:none}
.prefix b{font-weight:700}
.prefix b:nth-child(1){color:var(--mc-e);--s:#3F3F15}
.prefix b:nth-child(2){color:var(--mc-b);--s:#153F3F}
.prefix i{font-style:normal;color:var(--mc-8);margin-left:calc(4 * var(--px));--s:#151515}
.sec-head{display:grid;gap:16px;margin-bottom:clamp(32px,4vw,48px)}
.sec-head--center{justify-items:center;text-align:center}
.sec-head--center .lede{margin-inline:auto}

/* ---------- Blocks: a face, a 1px rim, and a darker bottom edge like the logo letters ----------
   The face (::before) is --b-face, with two more layers on top that are empty unless a
   setting fills them: --b-deco (the snow or the cobweb of a season) and --b-gild (the gold
   line along its top). Each one is a whole background layer, size and place included.
   The bottom edge is the side of the block, seen from just above. Where the corner is cut,
   that side has to turn the corner with it: --b-corner paints the strip between the cut
   of the face and the cut of the block. Without it that strip shows the rim instead, a
   pale wedge next to a dark one. Blocks with a colored rim (rank cards, the Discord box)
   keep that wedge on purpose, as a facet in their own color: they set --b-corner to nothing.
   The side reaches one pixel up behind the face. A box rarely sits on whole screen pixels,
   and without that pixel a hair of the rim shows between the face and the side: a bright
   line on a sharp screen. The corner piece starts above that pixel, so the two never lie
   on top of each other (on the glass cards, where the side is see-through, that would show). */
.block{
  --depth:6px; --pad:clamp(20px,2.2vw,28px);
  --b-face:linear-gradient(180deg,var(--face-2),var(--face) 70%);
  --b-rim:var(--rim); --b-edge:var(--edge); --b-corner:var(--b-edge);
  position:relative;isolation:isolate;
  padding:var(--pad) var(--pad) calc(var(--pad) + var(--depth));
  background:
    linear-gradient(135deg,transparent 50%,var(--b-corner) 0) right 0 bottom calc(var(--depth) + 1px)/calc(var(--cut-lg) + 2px) calc(var(--cut-lg) + 2px) no-repeat,
    linear-gradient(to top,var(--b-edge) 0 calc(var(--depth) + 1px),var(--b-rim) calc(var(--depth) + 1px));
  clip-path:var(--shape-lg);border-radius:var(--r-lg);
}
/* Round corners: the same thing in the round. Between each round bottom corner of the face
   and the base under it sits a sliver that would show the rim: --b-corner fills it. */
:root[data-corners="round"] :is(.block,.hero-card){
  background:
    radial-gradient(circle at 100% 0,transparent calc(var(--r-lg) - 1.5px),var(--b-corner) calc(var(--r-lg) - 1px)) left 1px bottom var(--depth)/calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) no-repeat,
    radial-gradient(circle at 0 0,transparent calc(var(--r-lg) - 1.5px),var(--b-corner) calc(var(--r-lg) - 1px)) right 1px bottom var(--depth)/calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) no-repeat,
    linear-gradient(to top,var(--b-edge) 0 calc(var(--depth) + 1px),var(--b-rim) calc(var(--depth) + 1px));
}
.block::before{
  content:"";position:absolute;inset:1px 1px var(--depth);z-index:-1;
  background:var(--b-deco,none),var(--b-gild,none),var(--b-face);
  clip-path:var(--shape-lg);border-radius:max(0px,calc(var(--r-lg) - 1px));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.block--flat{--depth:1px}
.block--well{--b-face:var(--well);--depth:1px}

/* ---------- Buttons ---------- */
.btn{
  --h:48px; --edge-w:4px;
  --b-face:var(--grad-gold);
  --b-edge:var(--gold-edge); --b-ink:var(--on-gold);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--h);padding:0 22px var(--edge-w);
  font:700 14px/1 var(--f-body);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  color:var(--b-ink);background:var(--b-face);
  box-shadow:inset 0 calc(-1 * var(--edge-w)) 0 var(--b-edge),inset 0 1px 0 rgba(255,255,255,.55);
  clip-path:var(--shape-sm);border-radius:var(--r-sm);
  transition:transform .12s ease,box-shadow .12s ease,filter .15s ease;
}
.btn:hover{filter:brightness(1.07) saturate(1.05);transform:translateY(-1px)}
.btn:active{transform:translateY(3px);box-shadow:inset 0 -1px 0 var(--b-edge),inset 0 1px 0 rgba(255,255,255,.4);clip-path:var(--shape-sm-press)}
/* A pressed button moves down, away from a pointer that sits on its top edge. The strip it
   has just left still counts as the button (an invisible ::after, and a shape that lets it
   through), so that press is a click like any other. */
.btn:active::after,.icon-btn:active::after{content:"";position:absolute;left:0;right:0;bottom:100%;height:5px}
.btn:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ink),inset 0 calc(-1 * var(--edge-w)) 0 var(--b-edge)}
.btn--aqua{--b-face:var(--grad-aqua);--b-edge:var(--aqua-edge);--b-ink:var(--on-aqua)}
.btn--ghost{--b-face:linear-gradient(180deg,var(--face-2),var(--face));--b-edge:var(--edge);--b-ink:var(--ink);box-shadow:inset 0 0 0 1px var(--rim-2),inset 0 calc(-1 * var(--edge-w)) 0 var(--b-edge)}
.btn--ghost:active{box-shadow:inset 0 0 0 1px var(--rim-2),inset 0 -1px 0 var(--b-edge)}
.btn--sm{--h:40px;--edge-w:3px;padding-inline:16px;font-size:12.5px}
.btn--lg{--h:56px;padding-inline:28px;font-size:15px}
.btn--block{width:100%}
.btn--sq{padding-inline:0;width:var(--h)}
.btn .i{width:18px;height:18px}

/* ---------- Nav ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;height:var(--nav-h);border-bottom:1px solid transparent;transition:background-color .25s ease,border-color .25s ease}
.nav.is-scrolled,.nav-open .nav{
  background:color-mix(in srgb,var(--bg) 80%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  border-bottom-color:var(--rim);
}
.nav__row{height:100%;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand img{width:38px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
.brand__word{display:grid;gap:3px;font:400 16px/1 var(--f-display);letter-spacing:.05em;text-shadow:0 2px 8px rgba(2,10,30,.5)}
.brand__word b{font-weight:400}
.brand__word b:first-child{color:var(--gold)}
.brand__word b:last-child{color:var(--aqua);font-size:11px;letter-spacing:.2em}
.nav__links{display:flex;align-items:center;gap:2px;margin-inline:auto}
.nav__links a{position:relative;padding:12px 14px;font:600 13px/1 var(--f-body);letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;color:#DCE7FB;text-shadow:0 1px 8px rgba(2,10,30,.45);transition:color .15s ease}
.nav__links a:hover{color:var(--aqua)}
.nav__links a[aria-current="page"]{color:var(--gold)}
.nav__links a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:1px;width:6px;height:6px;background:var(--gold);transform:translateX(-50%) rotate(45deg)}
.nav__cta{display:flex;align-items:center;gap:10px;flex:none}
.nav__ip{font:400 18px/1 var(--f-pixel);text-transform:none}
.icon-btn{
  --b-face:var(--grad-aqua);
  position:relative;display:grid;place-items:center;width:40px;height:40px;padding-bottom:3px;color:var(--on-aqua);
  background:var(--b-face);box-shadow:inset 0 -3px 0 var(--aqua-edge),inset 0 1px 0 rgba(255,255,255,.55);
  clip-path:var(--shape-sm);border-radius:var(--r-sm);transition:transform .12s ease,filter .15s ease;
}
.icon-btn:hover{transform:translateY(-1px);filter:brightness(1.07)}
.icon-btn:active{transform:translateY(2px);clip-path:var(--shape-sm-press)}
.icon-btn:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ink)}
.icon-btn .i{width:20px;height:20px}
.nav__burger{display:none;color:var(--ink);--b-face:linear-gradient(180deg,var(--face-2),var(--face));box-shadow:inset 0 0 0 1px var(--rim-2),inset 0 -3px 0 var(--edge)}

@media (max-width:1020px){
  .nav__burger{display:grid}
  .nav__links{
    display:none;position:absolute;top:100%;left:0;right:0;margin:0;
    flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gutter) 16px;
    background:color-mix(in srgb,var(--bg) 94%,transparent);border-bottom:1px solid var(--rim);
  }
  .nav-open .nav__links{display:flex}
  .nav__links a{padding:14px 4px;border-bottom:1px solid var(--rim);white-space:normal}
  .nav__links a[aria-current="page"]::after{left:auto;right:8px;bottom:50%;transform:translateY(50%) rotate(45deg)}
  .nav__cta{margin-left:auto}
}
@media (max-width:560px){
  .nav__ip-text{display:none}
  .brand__word{display:none}
}
/* On wider screens the menu, the Discord button and the address button share one row.
   How wide they are depends on the menu and the address set in the dashboard, so rs.js
   measures the row and, when it does not fit, steps down until it does:
   1 a tighter menu, 2 the address button without its text, 3 the folded menu.
   Step 3 repeats the small screen rules above: change both together.
   nav-fit-ip is for a row that is too wide even with the menu folded. */
.nav-fit-1 .nav__links a,.nav-fit-2 .nav__links a{padding-inline:8px;letter-spacing:.09em}
.nav-fit-2 .nav__ip-text,.nav-fit-ip .nav__ip-text{display:none}
.nav-fit-3 .nav__burger{display:grid}
.nav-fit-3 .nav__links{
  display:none;position:absolute;top:100%;left:0;right:0;margin:0;
  flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gutter) 16px;
  background:color-mix(in srgb,var(--bg) 94%,transparent);border-bottom:1px solid var(--rim);
}
.nav-fit-3.nav-open .nav__links{display:flex}
.nav-fit-3 .nav__links a{padding:14px 4px;border-bottom:1px solid var(--rim);white-space:normal}
.nav-fit-3 .nav__links a[aria-current="page"]::after{left:auto;right:8px;bottom:50%;transform:translateY(50%) rotate(45deg)}
.nav-fit-3 .nav__cta{margin-left:auto}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;margin-top:calc(-1 * var(--nav-h));padding-block:calc(var(--nav-h) + clamp(24px,4.5vw,56px)) clamp(56px,7vw,96px)}
.hero__sky{position:absolute;inset:0;z-index:-3;background:#7fd0e8 url("../img/sky.jpg") 50% 30%/cover no-repeat}
.hero__sky::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 26%,var(--sky-mid) 56%,color-mix(in srgb,var(--bg) 72%,transparent) 84%,var(--bg) 100%);
  transition:background .3s ease;
}
.hero__clouds{position:absolute;inset:0;z-index:-2;pointer-events:none}
.cloud{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.55),rgba(255,255,255,0));filter:blur(8px);animation:drift var(--t,80s) linear infinite}
.cloud:nth-child(1){top:12%;left:-10%;width:38vw;height:9vw;--t:95s}
.cloud:nth-child(2){top:44%;left:60%;width:30vw;height:7vw;--t:120s;animation-delay:-40s;opacity:.7}
.cloud:nth-child(3){top:70%;left:20%;width:46vw;height:10vw;--t:140s;animation-delay:-80s;opacity:.45}
.motes{position:absolute;inset:0;z-index:-1;pointer-events:none}
.mote{position:absolute;width:var(--s,3px);height:var(--s,3px);background:#fff;opacity:.0;animation:twinkle var(--t,5s) ease-in-out infinite;animation-delay:var(--d,0s)}
.mote--aqua{background:var(--aqua-hi)}
.mote--gold{background:var(--gold-hi)}

.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px) minmax(0,1fr);align-items:center;gap:clamp(16px,2.6vw,36px)}
.hero__logo{justify-self:center;width:min(100%,520px);position:relative}
.hero__logo img{width:100%;animation:bob 6.5s ease-in-out infinite;filter:drop-shadow(0 26px 34px rgba(2,10,30,.40))}
.hero__sub{display:grid;justify-items:center;gap:14px;text-align:center;margin-top:clamp(12px,2vw,24px)}
.hero__tagline{font-size:clamp(16px,1.45vw,19px);line-height:1.6;color:#E8F1FF;max-width:54ch;text-shadow:0 2px 14px rgba(2,10,30,.65)}
.season-chip{
  display:inline-flex;align-items:center;gap:10px;padding:8px 14px 9px;
  font:700 12px/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
  background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px var(--glass-rim);clip-path:var(--shape-sm);border-radius:var(--r-sm);
}
.season-chip b{font:400 18px/1 var(--f-pixel);color:var(--gold);text-transform:none}

/* Glass cards on the hero (Play and Discord) */
.hero-card{
  --depth:6px; --b-face:var(--glass); --b-rim:var(--glass-rim); --b-edge:var(--glass-edge); --b-corner:var(--b-edge);
  position:relative;isolation:isolate;display:flex;align-items:center;gap:16px;
  width:min(100%,350px);padding:16px 18px calc(16px + var(--depth));text-align:left;
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  background:
    linear-gradient(135deg,transparent 50%,var(--b-corner) 0) right 0 bottom calc(var(--depth) + 1px)/calc(var(--cut-lg) + 2px) calc(var(--cut-lg) + 2px) no-repeat,
    linear-gradient(to top,var(--b-edge) 0 calc(var(--depth) + 1px),var(--b-rim) calc(var(--depth) + 1px));
  clip-path:var(--shape-lg);border-radius:var(--r-lg);
}
.hero-card::before{content:"";position:absolute;inset:1px 1px var(--depth);z-index:-1;background:var(--b-face);clip-path:var(--shape-lg);border-radius:max(0px,calc(var(--r-lg) - 1px))}
.hero-card:focus-visible{outline:none}
.hero-card:focus-visible::before{box-shadow:inset 0 0 0 2px var(--aqua)}
.hero-card--play{justify-self:end}
.hero-card--discord{justify-self:start}
.hero-card__icon{
  display:grid;place-items:center;flex:none;width:56px;height:56px;padding-bottom:4px;color:var(--on-gold);
  background:var(--grad-gold);
  box-shadow:inset 0 -4px 0 var(--gold-edge),inset 0 1px 0 rgba(255,255,255,.55);
  clip-path:var(--shape-sm);border-radius:var(--r-sm);
}
.hero-card--discord .hero-card__icon{color:var(--on-aqua);background:var(--grad-aqua);box-shadow:inset 0 -4px 0 var(--aqua-edge),inset 0 1px 0 rgba(255,255,255,.55)}
.hero-card__icon .i{width:26px;height:26px}
.hero-card__body{display:grid;gap:5px;min-width:0}
.hero-card__title{font:400 19px/1 var(--f-display);color:#fff;letter-spacing:.03em;text-transform:uppercase}
.hero-card__value{display:block;font:400 18px/20px var(--f-pixel);color:#E4EEFF;overflow-wrap:anywhere}
.hero-card__meta{display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.2;color:#C3D2EC}
.hero-card__meta b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.hero-card__chip{position:absolute;top:10px;right:12px;display:grid;place-items:center;width:28px;height:28px;color:#C3D2EC;background:rgba(255,255,255,.08);clip-path:var(--shape-sm);border-radius:var(--r-sm);transition:color .15s ease,background .15s ease}
.hero-card__chip .i{width:16px;height:16px}
.hero-card:hover .hero-card__chip{color:#fff;background:rgba(255,255,255,.16)}
.hero-card__chip .when-done{display:none;color:var(--mc-a)}
.is-copied .hero-card__chip .when-idle{display:none}
.is-copied .hero-card__chip .when-done{display:block}
.caret{display:inline-block;margin-left:var(--px);animation:blink 1.1s steps(1) infinite}
.caret::before{content:"_"}
.live-dot{position:relative;width:8px;height:8px;flex:none;background:var(--ok);box-shadow:0 0 0 0 rgba(94,240,138,.6);animation:pulse 2s ease-out infinite}

/* Beside the logo the two cards only have room on wide screens. Below that the logo
   goes on top and the cards sit under it, side by side. */
@media (max-width:1320px){
  .hero__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero__logo{grid-column:1/-1;order:-1;width:min(100%,500px)}
}
@media (max-width:1040px){
  .hero-card{width:100%}
  .hero-card--play,.hero-card--discord{justify-self:stretch}
}
@media (max-width:640px){
  .hero__grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:380px){
  .hero-card{gap:12px;padding-inline:14px}
  .hero-card__icon{width:48px;height:48px}
}

/* ---------- In game chat lines ---------- */
.mc{font:400 18px/1.5 var(--f-pixel)}

/* A piece of in game chat, shown as a small screenshot: the sky behind it and a dark strip
   for every message, sitting at the bottom the way chat does. A line of chat is exactly one
   font size tall (9 game pixels), so the strips of a long message that wraps stay joined.
   The strip is darker than the game's own (which is half see-through), so that gray chat
   text can be read on the brightest cloud. */
.chatshot{
  --shot-sky:22px;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:calc(2em + var(--shot-sky) + 8px);padding-block:var(--shot-sky) 8px;
  font-size:18px;line-height:1;color:#fff;
  background:linear-gradient(rgba(3,21,53,.10),rgba(3,21,53,.10)),#5FB7E6 url("../img/sky.jpg") 50% 36%/cover no-repeat;
  clip-path:var(--shape-sm);border-radius:var(--r-sm);overflow:hidden;
}
.chatshot__line{display:block;padding-inline:calc(4 * var(--px));background:rgba(0,0,0,.72);white-space:pre-wrap;overflow-wrap:anywhere}
/* Each rank card shows another piece of the same sky. */
.rank:nth-child(3n+2) .chatshot{background-position:18% 62%}
.rank:nth-child(3n) .chatshot{background-position:82% 12%}
.tagline-mc{display:inline-block;font:400 18px/1 var(--f-pixel)}

.chat-toasts{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:90;display:grid;gap:4px;max-width:min(560px,100% - 32px);pointer-events:none}
.chat-line{padding:7px 12px 7px;background:rgba(0,0,0,.62);font:400 18px/1.34 var(--f-pixel);animation:chatIn .22s ease-out both}
.chat-line.is-leaving{animation:chatOut .35s ease-in both}

/* ---------- Tags and labels ---------- */
.tag{display:inline-flex;align-items:center;height:24px;padding:0 9px 1px;font:700 11px/1 var(--f-body);letter-spacing:.13em;text-transform:uppercase;color:var(--t,var(--ink));background:color-mix(in srgb,var(--t,var(--ink)) 13%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t,var(--ink)) 38%,transparent);clip-path:var(--shape-sm);border-radius:var(--r-sm);flex:none}
.tag--new{--t:var(--mc-a)}
.tag--changed{--t:var(--gold)}
.tag--fixed{--t:var(--aqua)}
.tag--removed{--t:var(--mc-c)}
.status{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--text)}
.status--off .live-dot{background:var(--bad);animation:none}

/* ---------- Fields ---------- */
.field{display:grid;gap:8px}
.field__label{font:600 12px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.input{
  display:flex;align-items:center;gap:10px;height:50px;padding:0 14px;
  background:var(--well);box-shadow:inset 0 0 0 1px var(--rim);clip-path:var(--shape-sm);border-radius:var(--r-sm);
  transition:box-shadow .15s ease;color:var(--muted);
}
.input:focus-within{box-shadow:inset 0 0 0 1px var(--aqua),inset 0 0 0 4px color-mix(in srgb,var(--aqua) 18%,transparent)}
.input input{flex:1;min-width:0;height:100%;background:none;border:0;outline:0;color:var(--ink);font:500 16px var(--f-body)}
.input input::placeholder{color:var(--dim)}
.input--pixel input{font-family:var(--f-pixel);font-size:18px}
.seg{display:inline-flex;padding:4px;gap:4px;background:var(--well);box-shadow:inset 0 0 0 1px var(--rim);clip-path:var(--shape-sm);border-radius:var(--r-sm);flex-wrap:wrap}
.seg button{padding:8px 14px;font:600 12.5px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);clip-path:var(--shape-sm);border-radius:calc(var(--r-sm) - 3px);transition:color .15s ease,background .15s ease}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{color:var(--on-gold);background:var(--gold)}
.seg button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--aqua)}

/* ---------- Copy pill (server address) ---------- */
.ip-pill{
  display:flex;align-items:center;gap:12px;width:100%;padding:6px 6px 6px 16px;text-align:left;
  background:var(--well);box-shadow:inset 0 0 0 1px var(--rim-2);clip-path:var(--shape-md);border-radius:var(--r-md);
  transition:box-shadow .15s ease;
}
.ip-pill:hover{box-shadow:inset 0 0 0 1px var(--gold)}
.ip-pill:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--aqua)}
.ip-pill__label{display:grid;gap:4px;min-width:0;flex:1}
.ip-pill__label small{font:600 11px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ip-pill__value{font:400 18px/1.1 var(--f-pixel);color:var(--ink);overflow-wrap:anywhere}
.ip-pill .btn{pointer-events:none}
.ip-pill .when-done{display:none}
.ip-pill.is-copied .when-idle{display:none}
.ip-pill.is-copied .when-done{display:inline-flex;align-items:center;gap:8px}
.ip-pill.is-copied .btn{--b-face:linear-gradient(180deg,#B7FFC9 0%,#7BF59E 48%,#4FE07C 52%,#34C765 100%);--b-edge:#1D7A3C}
.ip-pill--aqua:hover{box-shadow:inset 0 0 0 1px var(--aqua)}

/* ---------- Rank cards (store) ---------- */
.ranks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.rank{
  --b-face:
    radial-gradient(120% 60% at 50% 0%,color-mix(in srgb,var(--rc) 22%,transparent),transparent 62%),
    linear-gradient(180deg,var(--face-2),var(--face) 70%);
  --b-rim:color-mix(in srgb,var(--rc) 32%,transparent);
  --b-edge:color-mix(in srgb,var(--rc) 50%,#020816);
  --b-corner:transparent;
  --depth:7px;
  display:flex;flex-direction:column;gap:18px;
}
.rank--featured{--b-rim:color-mix(in srgb,var(--rc) 70%,transparent)}
.rank__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.rank__icon{width:60px;height:60px;color:var(--rc);filter:drop-shadow(0 6px 14px color-mix(in srgb,var(--rc) 40%,transparent))}
.rank__icon svg{width:100%;height:100%;display:block}
.rank__meta{display:grid;justify-items:end;gap:8px}
.rank__tier{font:700 11px/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.rank__badge{display:inline-flex;align-items:center;height:24px;padding:0 10px 1px;font:700 10.5px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--navy);background:var(--rc);clip-path:var(--shape-sm);border-radius:var(--r-sm)}
.rank__name{font-size:clamp(28px,2.6vw,34px);color:var(--rc);text-shadow:3px 3px 0 color-mix(in srgb,var(--rc) 25%,#000)}
.rank__price{display:flex;align-items:baseline;gap:4px;flex-wrap:wrap}
.rank__amount{font:400 40px/1 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums}
.rank__amount sup{font-size:.45em;vertical-align:.95em;margin-left:1px}
.rank__cur{font:400 22px/1 var(--f-display);color:var(--ink);align-self:flex-start;margin-top:4px}
.rank__note{margin-left:8px;font-size:13px;color:var(--muted)}
.rank__perks{display:grid;gap:10px;font-size:15px;line-height:1.4;color:var(--text)}
.rank__perks li{display:grid;grid-template-columns:10px 1fr;gap:12px;align-items:baseline}
.rank__perks li::before{content:"";width:8px;height:8px;background:var(--rc);transform:translateY(-1px) rotate(45deg)}
.rank__perks li.is-inherit{color:var(--muted)}
.rank__perks li.is-inherit::before{background:transparent;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--rc) 60%,transparent)}
.rank__actions{display:flex;gap:10px;margin-top:auto;padding-top:6px}
.rank__actions .btn:first-child{flex:1}
@media (max-width:1020px){.ranks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ranks{grid-template-columns:minmax(0,1fr)}}

/* ---------- Updates (patch notes) ---------- */
.update{display:grid;gap:16px}
.update__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ver{display:inline-flex;align-items:center;height:28px;padding:0 9px;font:400 18px/1 var(--f-pixel);color:var(--on-aqua);background:var(--aqua);clip-path:var(--shape-sm);border-radius:var(--r-sm)}
.update__date{font-size:14px;color:var(--muted)}
.changes{display:grid;gap:12px}
.changes li{display:grid;grid-template-columns:92px 1fr;gap:12px;align-items:start;font-size:15px;line-height:1.5}
.changes .tag{justify-self:start;margin-top:-1px}
@media (max-width:480px){.changes li{grid-template-columns:1fr;gap:6px}}

/* ---------- Rules ---------- */
.rules{display:grid;gap:10px}
.rule{background:var(--well);box-shadow:inset 0 0 0 1px var(--rim);clip-path:var(--shape-md);border-radius:var(--r-md)}
.rule summary{display:flex;align-items:center;gap:14px;padding:15px 16px;cursor:pointer;list-style:none;color:var(--ink);font-weight:600}
.rule summary::-webkit-details-marker{display:none}
.rule summary:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--aqua)}
.rule__num{flex:none;min-width:42px;font:400 18px/1 var(--f-pixel);color:var(--gold)}
.rule__chev{margin-left:auto;color:var(--muted);transition:transform .2s ease}
.rule[open] .rule__chev{transform:rotate(180deg);color:var(--aqua)}
.rule[open]{box-shadow:inset 0 0 0 1px var(--rim-2)}
.rule__body{padding:0 16px 16px 72px;font-size:15px;line-height:1.6;color:var(--text)}
.rule__body--flush{padding-left:16px}
@media (max-width:480px){.rule__body{padding-left:16px}}

/* ---------- Staff ---------- */
.staff{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.member{display:flex;align-items:center;gap:14px;padding:14px;background:var(--well);box-shadow:inset 0 0 0 1px var(--rim);clip-path:var(--shape-md);border-radius:var(--r-md);min-width:0}
.member__head{flex:none;width:56px;height:56px;padding:4px;background:color-mix(in srgb,var(--role) 22%,transparent);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--role) 70%,transparent);clip-path:var(--shape-sm);border-radius:var(--r-sm)}
.member__head canvas,.member__head img{width:100%;height:100%;display:block;image-rendering:pixelated}
.member__name{font:400 18px/1.1 var(--f-display);color:var(--ink);overflow-wrap:anywhere}
.member__name--long{font-size:15.5px}
.member__body{display:grid;gap:6px;min-width:0}

/* ---------- Footer ---------- */
.footer{position:relative;padding-block:56px 40px;border-top:1px solid var(--rim);background:linear-gradient(180deg,var(--bg-2),var(--bg))}
.footer__grid{display:grid;grid-template-columns:1.3fr 1fr 1.2fr;gap:40px}
.footer__brand{display:grid;gap:14px;align-content:start}
.footer__brand img{width:170px}
.footer h4{font:700 12px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:16px}
.footer__links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px;font-size:15px}
.footer__links a{color:var(--text);transition:color .15s ease}
.footer__links a:hover{color:var(--aqua)}
.footer__join{display:grid;gap:10px;align-content:start}
.footer__base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:20px;border-top:1px solid var(--rim);font-size:13px;color:var(--dim)}
@media (max-width:860px){.footer__grid{grid-template-columns:1fr}}
/* The "coming soon" page: no menu, a footer without the Explore list */
.nav--bare .nav__burger{display:none}
.footer__grid--bare{grid-template-columns:1.3fr 1.2fr}
@media (max-width:860px){.footer__grid--bare{grid-template-columns:1fr}}
.footer__base a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.footer__base a:hover{color:var(--ink)}
.hero--soon{display:grid;align-items:center;min-height:min(86vh,900px)}
.soon__title{color:#fff;text-shadow:0 3px 18px rgba(2,10,30,.6);text-wrap:balance}
/* A note for signed in staff while the site is not public yet */
.staffbar{position:relative;z-index:70;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 16px;padding:9px 16px;font-size:13.5px;line-height:1.4;color:var(--on-gold);background:var(--gold);text-align:center}
.staffbar a{font-weight:700;color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ---------- Motion ---------- */
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(70vw)}}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.6)}45%,55%{opacity:.9;transform:scale(1)}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(94,240,138,.55)}80%,100%{box-shadow:0 0 0 8px rgba(94,240,138,0)}}
@keyframes chatIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes chatOut{to{opacity:0;transform:translateX(-12px)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .mote{opacity:.6}
}


/* =============================================================
   Site pages
   ============================================================= */

/* ---------- Layout helpers ---------- */
.grid{display:grid;gap:clamp(16px,2vw,24px)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:960px){.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid--2,.grid--3{grid-template-columns:minmax(0,1fr)}}
.stack{display:grid;gap:14px;align-content:start}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.section--tint{background:linear-gradient(180deg,transparent,var(--bg-2) 18%,var(--bg-2) 82%,transparent)}
.section--tight{padding-top:0}
.sec-head--split{grid-template-columns:minmax(0,1fr) auto;align-items:end}
.sec-head--split > :not(.btn){grid-column:1}
.sec-head--split > .btn{grid-column:2;grid-row:1 / span 3;align-self:end}
@media (max-width:640px){.sec-head--split{grid-template-columns:minmax(0,1fr)}.sec-head--split > .btn{grid-column:1;grid-row:auto;justify-self:start}}

/* ---------- Sub page header ---------- */
.page-hero{position:relative;isolation:isolate;overflow:hidden;margin-top:calc(-1 * var(--nav-h));padding-block:calc(var(--nav-h) + clamp(36px,6vw,72px)) clamp(36px,5vw,64px)}
.page-hero .hero__sky::after{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 42%,transparent) 0%,color-mix(in srgb,var(--bg) 66%,transparent) 55%,var(--bg) 100%)}
.page-hero__inner{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:780px}
.page-hero .lede{color:#E3EAF7;text-shadow:0 2px 12px rgba(2,6,16,.6)}
.page-hero .h1{text-shadow:0 4px 0 rgba(2,6,16,.35)}

/* ---------- Season chip and meter ---------- */
.season-chip i{font-style:normal;color:var(--muted);letter-spacing:.1em}
.season{display:grid;gap:16px}
.season__dates{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font:400 18px/1.2 var(--f-pixel);color:var(--ink)}
.season__dates small{display:block;margin-bottom:4px;font:600 11px/1 var(--f-body);letter-spacing:.14em;word-spacing:normal;text-transform:uppercase;color:var(--muted);text-shadow:none}
.season__dates > :last-child{margin-left:auto;text-align:right}
.meter{height:14px;padding:3px;background:var(--well);box-shadow:inset 0 0 0 1px var(--rim);clip-path:var(--shape-sm);border-radius:var(--r-sm)}
.meter span{display:block;height:100%;min-width:6px;background:var(--grad-gold)}
.season__left{font-size:15px;color:var(--text)}
.season__left b{color:var(--gold);font-family:var(--f-display);font-size:18px;font-weight:400}

/* ---------- Features ---------- */
.feature{display:grid;gap:12px;align-content:start}
.feature__icon{display:grid;place-items:center;width:56px;height:56px;color:var(--fc,var(--gold));background:var(--well);box-shadow:inset 0 0 0 1px var(--rim);clip-path:var(--shape-sm);border-radius:var(--r-sm)}
.feature__icon svg{width:36px;height:36px;display:block}
.feature p{font-size:15px;line-height:1.6}

/* ---------- Join steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.step-card{display:grid;gap:12px;align-content:start}
.step-card__num{display:grid;place-items:center;width:40px;height:40px;padding-bottom:3px;font:700 18px/1 var(--f-pixel);color:var(--on-gold);background:var(--grad-gold);box-shadow:inset 0 -3px 0 var(--gold-edge);clip-path:var(--shape-sm);border-radius:var(--r-sm)}
.step-card p{font-size:15px}
.step-card .ip-pill{margin-top:4px}
@media (max-width:860px){.steps{grid-template-columns:minmax(0,1fr)}}

/* ---------- Rank strip (home) ---------- */
.rank-strip{display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr));gap:12px}
.rank-chip{display:grid;justify-items:center;gap:10px;padding:20px 8px 18px;text-align:center;background:var(--well);box-shadow:inset 0 0 0 1px var(--rim);clip-path:var(--shape-md);border-radius:var(--r-md);transition:box-shadow .15s ease;min-width:0}
.rank-chip:hover{box-shadow:inset 0 0 0 1px var(--rc)}
.rank-chip:focus-visible{box-shadow:inset 0 0 0 2px var(--aqua);outline:none}
.rank-chip__icon{width:48px;height:48px;color:var(--rc);filter:drop-shadow(0 5px 12px color-mix(in srgb,var(--rc) 35%,transparent))}
.rank-chip__icon svg{width:100%;height:100%;display:block}
.rank-chip__name{font:400 17px/1 var(--f-display);color:var(--rc);overflow-wrap:anywhere}
.rank-chip__tier{font:600 11px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media (max-width:860px){.rank-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:420px){.rank-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Call to action band ---------- */
.cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;--b-rim:var(--rim-2);--b-corner:transparent}
.cta__text{display:grid;gap:8px;max-width:56ch}
.cta .row{flex:0 1 auto}

/* ---------- Notice ---------- */
.notice{display:flex;gap:12px;align-items:flex-start;padding:13px 16px;margin-bottom:24px;font-size:14.5px;line-height:1.5;color:var(--text);background:color-mix(in srgb,var(--gold) 8%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 32%,transparent);clip-path:var(--shape-md);border-radius:var(--r-md)}
.notice .i{color:var(--gold);margin-top:1px;width:18px;height:18px}
.notice b{color:var(--ink);font-weight:600}
.notice--bad{background:color-mix(in srgb,var(--bad) 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bad) 36%,transparent)}
.notice--bad .i{color:var(--bad)}

/* ---------- Store ---------- */
.rank{scroll-margin-top:calc(var(--nav-h) + 20px)}
.rank__price s{font:400 18px/1 var(--f-display);color:var(--dim);margin-right:8px;align-self:center}
.rank__sample{display:inline-flex;align-items:center;height:24px;padding:0 9px 1px;font:700 10.5px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);box-shadow:inset 0 0 0 1px var(--rim);clip-path:var(--shape-sm);border-radius:var(--r-sm)}
.rank .btn[disabled]{filter:grayscale(.9) brightness(.6);cursor:not-allowed;transform:none}
.table-wrap{position:relative;overflow-x:auto;background:var(--well);box-shadow:inset 0 0 0 1px var(--rim);clip-path:var(--shape-md);border-radius:var(--r-md)}
.compare{width:100%;min-width:720px;border-collapse:collapse;font-size:15px}
.compare th,.compare td{padding:13px 14px;text-align:center;border-bottom:1px solid var(--rim);font-variant-numeric:tabular-nums}
.compare tr:last-child td{border-bottom:0}
.compare th:first-child,.compare td:first-child{text-align:left;color:var(--ink);font-weight:500}
.compare thead th{font:400 16px/1.1 var(--f-display);color:var(--rc,var(--muted));background:rgba(0,0,0,.25)}
.compare thead th:first-child{font:600 12px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.compare td{color:var(--text)}
.compare tbody th{font:500 15px/1.4 var(--f-body);color:var(--ink);text-align:left}
.compare th:first-child{position:sticky;left:0;z-index:1;background:var(--bg-2);box-shadow:1px 0 0 var(--rim)}
.compare thead th:first-child{background:color-mix(in srgb,var(--bg-2) 80%,#000)}
.compare .yes{color:var(--ok)}
.compare .no{color:var(--dim)}
.compare .i{width:18px;height:18px;vertical-align:middle}

/* ---------- Checkout dialog ---------- */
.modal{width:min(470px,calc(100% - 32px));max-width:none;padding:0;border:0;background:none;color:inherit;overflow:visible}
.modal::backdrop{background:rgba(2,3,6,.74);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.modal__box{display:grid;gap:18px;--b-rim:var(--rim-2);--b-corner:transparent}
.modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.modal__close{display:grid;place-items:center;width:36px;height:36px;color:var(--muted);background:var(--well);clip-path:var(--shape-sm);border-radius:var(--r-sm)}
.modal__close:hover{color:var(--ink)}
.modal__close:focus-visible{outline:none;color:var(--ink);box-shadow:inset 0 0 0 2px var(--aqua)}
.modal__item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:var(--well);clip-path:var(--shape-sm);border-radius:var(--r-sm)}
.modal__item b{font:400 18px/1.1 var(--f-display);color:var(--rc,var(--ink));overflow-wrap:anywhere}
.modal__item span{font:400 20px/1 var(--f-display);color:var(--ink);flex:none}
.modal__err{font-size:14px;color:var(--bad)}
.modal__err:empty{display:none}
.modal__fine{font-size:13px;color:var(--muted)}
/* With LeaderOS: what happens after Continue, and the button that is a link to the store. */
.modal__next{font-size:15px;color:var(--text)}
.btn.is-off{pointer-events:none;filter:saturate(.3) brightness(.7)}
.btn.is-busy{pointer-events:none;filter:saturate(.6) brightness(.85)}

/* ---------- Rules ---------- */
.rules-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(20px,3.5vw,48px);align-items:start}
.toc{position:sticky;top:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 16px);display:grid;gap:4px}
.toc__label{margin-bottom:8px}
.toc a{display:flex;align-items:baseline;gap:12px;padding:10px 12px;font-size:15px;line-height:1.3;color:var(--text);clip-path:var(--shape-sm);border-radius:var(--r-sm);transition:background .15s ease,color .15s ease}
.toc a:hover{background:var(--well);color:var(--ink)}
.toc a b{flex:none;font:400 18px/1 var(--f-pixel);color:var(--gold)}
.rules-main{display:grid;gap:36px;min-width:0}
.rule-group{display:grid;gap:12px;scroll-margin-top:calc(var(--nav-h) + 20px)}
.rule-group__title{display:flex;align-items:baseline;gap:12px;margin-bottom:4px}
.rule-group__title b{font:400 18px/1 var(--f-pixel);color:var(--gold)}
.rules-empty{padding:28px;text-align:center;color:var(--muted);background:var(--well);clip-path:var(--shape-md);border-radius:var(--r-md)}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.toolbar .field{flex:1;min-width:min(100%,260px);max-width:420px}
@media (max-width:860px){
  .rules-layout{grid-template-columns:minmax(0,1fr)}
  .toc{position:static;display:flex;flex-wrap:wrap;gap:8px}
  .toc__label{width:100%;margin-bottom:0}
  .toc a{background:var(--well);box-shadow:inset 0 0 0 1px var(--rim);padding:9px 12px}
}

/* ---------- Updates ---------- */
.updates{display:grid;gap:20px}
.update__title{font-size:clamp(22px,2.2vw,28px)}
.update__sum{color:var(--text);max-width:68ch}

/* ---------- Staff ---------- */
.staff-groups{display:grid;gap:32px}
.staff-group{display:grid;gap:14px}
.staff-group__title{display:flex;align-items:center;gap:12px}
.staff-group__title::after{content:"";flex:1;height:1px;background:var(--rim)}

/* ---------- Small form helpers ---------- */
.color-field{display:flex;gap:10px;align-items:stretch}
.color-field input[type=color]{flex:none;width:50px;height:50px;padding:0;border:0;background:none;cursor:pointer}
.color-field .input{flex:1}
.code-out{width:100%;min-height:220px;padding:14px;resize:vertical;background:var(--well);border:0;outline:0;box-shadow:inset 0 0 0 1px var(--rim);color:var(--text);font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;clip-path:var(--shape-sm);border-radius:var(--r-sm)}
.code-out:focus{box-shadow:inset 0 0 0 1px var(--aqua)}
.check{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--text);cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--gold)}
.help{font-size:13.5px;line-height:1.5;color:var(--muted)}


/* =============================================================
   Hub driven pages (v1.1)
   ============================================================= */

/* ---------- Access ---------- */
.skip{position:absolute;left:12px;top:-80px;z-index:100;padding:12px 16px;font-weight:700;color:var(--on-gold);background:var(--gold);transition:top .15s ease}
.skip:focus{top:12px}
.noscript{margin:40px auto;max-width:60ch;padding:0 var(--gutter);text-align:center;color:var(--ink)}
.link{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--aqua);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--aqua) 45%,transparent)}
.link:hover{text-decoration-color:currentColor}
.link .i{width:16px;height:16px}
.fineprint{display:grid;gap:10px;margin-top:24px;max-width:84ch;font-size:14.5px;line-height:1.6;color:var(--muted)}

/* The dashboard preview marks the text that is being edited */
.is-editing{outline:2px dashed var(--aqua);outline-offset:5px}

/* ---------- Sections placed by the dashboard ---------- */
.page-hero + [data-sections] > .section:first-child{padding-top:0}

/* ---------- Gradient names (rank colors from the server) ---------- */
.grad{background:var(--g,linear-gradient(90deg,var(--rc,var(--ink)),var(--rc,var(--ink))));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.rank__name.grad{width:fit-content;max-width:100%;text-shadow:none;filter:drop-shadow(3px 3px 0 rgba(0,0,0,.45))}
.rank-chip__name.grad{filter:drop-shadow(2px 2px 0 rgba(0,0,0,.4))}

/* ---------- Rank card extras ---------- */
.rank__notes{display:grid;gap:8px;font-size:14px;line-height:1.4;color:var(--text)}
.rank__notes li{display:flex;gap:10px;align-items:flex-start}
.rank__notes .i{width:16px;height:16px;margin-top:2px;color:var(--rc)}
.rank__notes b{color:var(--ink);font-weight:600}
.rank__cmds{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.cmds{display:flex;flex-wrap:wrap;gap:6px}
.cmd{display:inline-block;padding:4px 7px 3px;font:400 18px/1.1 var(--f-pixel);color:var(--ink);background:rgba(0,0,0,.36);box-shadow:inset 0 0 0 1px var(--rim);border-radius:max(2px,calc(var(--r-sm) - 4px));overflow-wrap:anywhere}
.rank__actions{flex-wrap:wrap}

/* ---------- Store packages: everything Tebex sells that is not a rank ----------
   A card wears one color, --pc: its frame, the slot behind its picture, its glow and its
   badge are all mixed from it, the way a rank card is mixed from --rc. store.js writes
   the color of a card on the card itself. Without one it is the site's second color.
   --pc is told to the browser as a color, so the Rainbow effect can run through colors
   and take the whole card with it.

   The picture sits in a slot, like an item in an inventory: a dark square whose top and
   left edges are in shadow and whose bottom and right edges catch the light. Around the
   picture are three wrappers, one for each thing that can move it, so that they never
   fight over the same transform: __hop (the hop when the card is pointed at, see "Boxes
   that react"), __bob (Float) and __art (Spin). The glint lies on top of __art and turns
   with it. A card can also have no slot (product--free) or a picture that fills the slot
   (product--fill).

   Sizes: an icon is 56 pixels (4 screen pixels for each of its 14), a picture 64 (4 for
   each pixel of a 16 pixel item, 2 for a 32 pixel one). On a wide card twice that. Pixel
   art shown at a whole multiple of its size keeps every pixel the same size.

   The effects are classes on the card (fx-float, fx-spin, fx-glint, fx-glow, fx-sparkle,
   fx-shine, fx-rainbow), chosen in the dashboard under Store > Packages. Each one comes to
   rest in the plain look of the card, which is what a visitor who asked for less motion sees. */
@property --pc{syntax:"<color>";inherits:true;initial-value:#54D7E9}
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(16px,2vw,24px)}
.product{
  --pc:var(--aqua);
  --b-face:
    radial-gradient(130% 72% at 0% 0%,color-mix(in srgb,var(--pc) 15%,transparent),transparent 60%),
    linear-gradient(180deg,var(--face-2),var(--face) 70%);
  --b-rim:color-mix(in srgb,var(--pc) 30%,transparent);
  --b-edge:color-mix(in srgb,var(--pc) 44%,#020816);
  --b-corner:transparent;
  display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr auto;
  grid-template-areas:"slot badge" "body body" "foot foot";gap:14px 12px;
  scroll-margin-top:calc(var(--nav-h) + 20px);
}
/* No picture and no icon: the badge has the first row to itself. Neither: there is no first row. */
.product--bare{grid-template-areas:"badge badge" "body body" "foot foot"}
.product--plain{grid-template-rows:1fr auto;grid-template-areas:"body body" "foot foot"}
.product__slot{
  grid-area:slot;position:relative;display:grid;place-items:center;width:80px;height:80px;
  background:rgba(0,0,0,.44);box-shadow:inset 2px 2px 0 rgba(0,0,0,.5),inset -2px -2px 0 rgba(255,255,255,.08);
  background:color-mix(in srgb,var(--pc) 9%,rgba(0,0,0,.46));
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.5),inset -2px -2px 0 color-mix(in srgb,var(--pc) 30%,rgba(255,255,255,.06));
  border-radius:max(0px,calc(var(--r-sm) - 6px));
}
.product__hop,.product__bob{position:relative;display:grid;place-items:center}
.product__art{position:relative;display:grid;place-items:center;width:56px;height:56px;color:var(--pc)}
.product__art--pic{width:64px;height:64px}
.product__art > svg,.product__img{display:block;width:100%;height:100%}
.product__art > svg{filter:drop-shadow(0 4px 9px color-mix(in srgb,var(--pc) 34%,transparent))}
.product__img{object-fit:contain}
.product__img.is-pixel{image-rendering:pixelated}
/* No slot: only the picture, lined up with the text under it. */
.product--free .product__slot{width:auto;height:auto;background:none;box-shadow:none}
/* The picture fills the slot, cut to a square, with a thin frame in the card's color on its edge. */
.product--fill .product__hop,.product--fill .product__bob,.product--fill .product__art{width:100%;height:100%}
.product--fill .product__art{overflow:hidden;border-radius:max(0px,calc(var(--r-sm) - 6px))}
.product--fill .product__img{object-fit:cover}
.product--fill .product__glint{-webkit-mask-size:cover;mask-size:cover}
.product--fill .product__art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.2);
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--pc) 60%,transparent),inset 2px 2px 0 2px rgba(0,0,0,.28);
}
.product__badge{
  grid-area:badge;justify-self:end;align-self:start;display:inline-flex;align-items:center;min-height:24px;max-width:100%;padding:4px 10px 5px;
  font:700 10.5px/1.25 var(--f-body);letter-spacing:.14em;text-transform:uppercase;text-align:center;color:var(--navy);background:var(--pc);
  clip-path:var(--shape-sm);border-radius:var(--r-sm);
}
.product--bare .product__badge{justify-self:start}
.product__body{grid-area:body;display:grid;gap:8px;align-content:start;min-width:0}
.product__name{font:400 20px/1.15 var(--f-display);color:var(--ink);overflow-wrap:anywhere}
.product__name.grad{width:fit-content;max-width:100%;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.4))}
.product__desc{font-size:14.5px;line-height:1.5;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* A description written in the dashboard is as long as its writer made it. */
.product__desc--own{display:block;overflow:visible;color:var(--text)}
.product__foot{grid-area:foot;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:2px}
.product__foot .rank__sample{margin-left:auto}
.product__price{font:400 26px/1 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums}
.product__price s{font-size:16px;color:var(--dim);margin-right:8px}

/* A wide card takes the room of two: the slot on the left, larger, and the rest beside it.
   Where the cards stand in one column there is no second one to take. */
@media (min-width:601px){
  /* The picture and its badge on the left like an item in a showcase, the words beside them, the price and the button along the bottom. */
  .product--wide{grid-column:span 2;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr auto;grid-template-areas:"slot body" "badge body" "foot foot";column-gap:24px}
  .product--wide .product__slot{width:144px;height:144px;align-self:start}
  .product--wide .product__badge{justify-self:center}
  .product--wide .product__art{width:112px;height:112px}
  .product--wide .product__art--pic{width:128px;height:128px}
  .product--wide.product--free .product__slot{width:auto;height:auto}
  .product--wide.product--fill .product__art{width:100%;height:100%}
  .product--wide.product--bare{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;grid-template-areas:"body badge" "body ." "foot foot"}
  .product--wide.product--plain{grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;grid-template-areas:"body" "foot"}
  .product--wide.product--bare .product__badge{justify-self:end}
  .product--wide .product__name{font-size:24px}
  .product--wide{--bob:3px}
}

/* Float: the picture bobs like an item lying on the ground. It moves in whole steps,
   so a pixel icon stays sharp while it moves. */
.fx-float .product__bob{animation:pk-bob 1.8s steps(1,end) infinite}
@keyframes pk-bob{0%{transform:translateY(var(--bob,2px))}25%{transform:translateY(0)}50%{transform:translateY(calc(-1 * var(--bob,2px)))}75%{transform:translateY(0)}}
/* Spin: it turns the way a dropped item does, at an even pace and with a little depth, showing its back half of the time. */
.fx-spin .product__art{animation:pk-spin 5s linear infinite}
@keyframes pk-spin{from{transform:perspective(320px) rotateY(0)}to{transform:perspective(320px) rotateY(360deg)}}
/* Glint: the shimmer of an enchanted item. A band of light crosses the picture and
   keeps to its shape (store.js hands it the shape as a mask), then waits a while. */
.product__glint{position:absolute;inset:0;overflow:hidden;pointer-events:none;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}
.product__glint::before{
  content:"";position:absolute;top:-25%;bottom:-25%;left:-100%;width:48%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--pc) 30%,rgba(255,255,255,.95)),transparent);
  transform:skewX(-20deg);animation:pk-glint 3.4s ease-in-out infinite;
}
@keyframes pk-glint{0%,52%{transform:skewX(-20deg) translateX(0)}100%{transform:skewX(-20deg) translateX(520%)}}
/* Glow: a light in the color of the card, breathing behind the picture. */
.product__halo{
  position:absolute;inset:-12px;pointer-events:none;opacity:.8;
  background:radial-gradient(closest-side,rgba(255,255,255,.28),transparent);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--pc) 58%,transparent),transparent);
  animation:pk-glow 2.8s ease-in-out infinite;
}
@keyframes pk-glow{0%,100%{opacity:.5;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
/* Sparkles: seven around the picture, each on its own beat (the same twinkle as the home page).
   Every other one is a small star: four pixels around the one in the middle. */
.product__motes{position:absolute;inset:-9px;pointer-events:none}
.product__motes .mote{--s:2px;--c:#fff;background:var(--c)}
.product__motes .mote:nth-child(odd){box-shadow:var(--s) 0 0 0 var(--c),calc(-1 * var(--s)) 0 0 0 var(--c),0 var(--s) 0 0 var(--c),0 calc(-1 * var(--s)) 0 0 var(--c)}
@supports (color:color-mix(in srgb,red,blue)){.product__motes .mote{--c:color-mix(in srgb,var(--pc) 40%,#fff)}}
.product__motes .mote:nth-child(1){left:3%;top:14%;--t:2.9s;--d:-.3s}
.product__motes .mote:nth-child(2){left:86%;top:6%;--t:3.7s;--d:-1.9s;--s:3px}
.product__motes .mote:nth-child(3){left:94%;top:58%;--t:3.1s;--d:-1.1s}
.product__motes .mote:nth-child(4){left:70%;top:92%;--t:4.3s;--d:-2.6s}
.product__motes .mote:nth-child(5){left:18%;top:88%;--t:3.4s;--d:-.8s;--s:3px}
.product__motes .mote:nth-child(6){left:-2%;top:54%;--t:4.1s;--d:-3.3s}
.product__motes .mote:nth-child(7){left:44%;top:-3%;--t:3.3s;--d:-2.2s}
/* Shine: now and then a band of light crosses the whole card, like a foil trading card. It
   lies on the face of the card, under everything written on it. */
.product__shine{position:absolute;inset:1px 1px var(--depth);z-index:-1;overflow:hidden;pointer-events:none;clip-path:var(--shape-lg);border-radius:max(0px,calc(var(--r-lg) - 1px))}
/* The band is drawn at a slant inside a strip three cards wide that waits to the left of the
   card, so that however tall a card is, nothing of the band shows while it waits. */
.product__shine::before{
  content:"";position:absolute;top:0;bottom:0;left:-300%;width:300%;
  background:linear-gradient(106deg,transparent 42%,rgba(255,255,255,.08) 46%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.08) 54%,transparent 58%);
  background:linear-gradient(106deg,transparent 42%,color-mix(in srgb,var(--pc) 22%,rgba(255,255,255,.07)) 46%,color-mix(in srgb,var(--pc) 28%,rgba(255,255,255,.14)) 50%,color-mix(in srgb,var(--pc) 22%,rgba(255,255,255,.07)) 54%,transparent 58%);
  animation:pk-shine 6s ease-in-out infinite;
}
@keyframes pk-shine{0%,60%{transform:translateX(0)}100%{transform:translateX(100%)}}
/* Rainbow: the color of the card runs through the game's bright colors, and everything mixed from it follows. */
.fx-rainbow{animation:pk-rainbow 9s linear infinite}
@keyframes pk-rainbow{0%,100%{--pc:#FF5555}17%{--pc:#FFAA00}33%{--pc:#FFFF55}50%{--pc:#55FF55}67%{--pc:#55FFFF}83%{--pc:#FF55FF}}

/* The card that is being edited in the dashboard's preview: its frame in its own color, at full strength.
   (An outline would be cut off by the shape of the card.) */
.product.is-editing{--b-rim:var(--pc);--b-edge:color-mix(in srgb,var(--pc) 70%,#020816)}

/* The heading of a Tebex category: its name, a line under it, and a pixel icon when one was chosen. */
.product-group{--pc:var(--aqua);display:grid;gap:18px}
.product-group + .product-group{margin-top:40px}
.product-group__head{display:flex;align-items:center;gap:14px}
.product-group__icon{flex:none;width:42px;height:42px;color:var(--pc)}
.product-group__icon svg{display:block;width:100%;height:100%}
.product-group__text{display:grid;gap:4px;min-width:0}
.product-group__title{font:400 22px/1.15 var(--f-display);color:var(--ink);overflow-wrap:anywhere}
.product-group__note{font-size:14.5px;line-height:1.5;color:var(--muted)}

/* ---------- Plain tables ---------- */
.table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.table th,.table td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rim)}
.table thead th{font:600 12px/1.2 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:rgba(0,0,0,.25);white-space:nowrap}
.table thead th.hl-b{color:var(--aqua)}
.table tbody tr:last-child > *{border-bottom:0}
.table tbody th{font-weight:500;color:var(--ink)}
.table td{color:var(--text)}
.table .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.table .num b{color:var(--ink);font-weight:600}
.table .tag{margin-left:8px;vertical-align:1px}
.table__rank{white-space:nowrap;font-size:18px}
.cmd-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,20px);align-items:start}
.cmd-group{padding:18px 20px;background:var(--well);box-shadow:inset 0 0 0 1px var(--rim);clip-path:var(--shape-md);border-radius:var(--r-md)}
.cmd-group__title{margin-bottom:14px;font-size:18px;line-height:1.2}
.cmd-list{display:grid;gap:10px;margin:0}
.cmd-list > div{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:14px;align-items:start}
.cmd-list dt,.cmd-list dd{margin:0}
.cmd-list dd{padding-top:2px;font-size:14.5px;line-height:1.5;color:var(--text)}
@media (max-width:900px){.cmd-groups{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.cmd-list > div{grid-template-columns:minmax(0,1fr);gap:5px}}
.table--pass{min-width:620px}
.table--pass tbody th{width:22%;white-space:nowrap}
.table--tiers{min-width:520px}
.tier-num{display:inline-block;min-width:34px;font:400 15px/1 var(--f-display);color:var(--gold);text-align:right}
.odds{display:inline-flex;align-items:center;gap:12px}
.odds__bar{width:clamp(48px,14vw,150px);height:8px;background:rgba(0,0,0,.4);box-shadow:inset 0 0 0 1px var(--rim)}
.odds__bar span{display:block;height:100%;background:var(--grad-gold)}
.odds b{min-width:58px}
/* The odds of a random crate, shown wherever its keys are sold */
.odds-table{width:100%;border-collapse:collapse;font-size:13.5px;line-height:1.4}
.odds-table td{padding:6px 0;border-bottom:1px solid var(--rim);color:var(--text);text-align:left}
.odds-table tr:last-child td{border-bottom:0}
.odds-table .num{padding-left:14px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
.odds-scroll{max-height:184px;overflow-y:auto;padding:4px 12px;background:var(--well);box-shadow:inset 0 0 0 1px var(--rim)}
.odds-scroll:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
.odds-fold summary{cursor:pointer;list-style:none}
.odds-fold summary::-webkit-details-marker{display:none}
.odds-fold summary .i{transition:transform .15s}
.odds-fold[open] summary .i{transform:rotate(180deg)}
.odds-fold[open] summary{margin-bottom:10px}
.buy-odds{display:grid;gap:8px}

/* ---------- Crates ---------- */
.crates{display:grid;gap:20px}
.crate{display:grid;gap:18px;scroll-margin-top:calc(var(--nav-h) + 20px)}
.crate__head{display:grid;gap:6px}
.facts{display:flex;flex-wrap:wrap;gap:14px 36px;margin:0}
.facts dt{margin-bottom:6px;font:600 11px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:0;font-size:15px;color:var(--ink)}

/* ---------- Vote ---------- */
.vote-how{margin-bottom:24px}
.vote-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:clamp(14px,2vw,20px)}
.vote-card{display:flex;align-items:center;gap:14px}
.vote-card:focus-visible{outline:none}
.vote-card:focus-visible::before{box-shadow:inset 0 0 0 2px var(--aqua)}
.vote-card__body{display:grid;gap:4px;flex:1;min-width:0}
.vote-card__name{font:400 18px/1.15 var(--f-display);color:var(--ink);overflow-wrap:anywhere}
.vote-card__body .small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vote-card .btn{pointer-events:none}

/* ---------- RetroPass ---------- */
.pass-quests{margin-top:20px}
.pass-quests .block{font-size:15px}

/* ---------- Staff roles and guide cards ---------- */
.roles{display:grid;gap:10px}
.role{display:grid;grid-template-columns:minmax(130px,190px) minmax(0,1fr);gap:16px;align-items:baseline;padding:14px 16px;background:var(--well);box-shadow:inset 0 0 0 1px var(--rim);clip-path:var(--shape-md);border-radius:var(--r-md)}
.role__tag{font-size:18px}
.role__text{font-size:15px;line-height:1.55;color:var(--text)}
@media (max-width:560px){.role{grid-template-columns:minmax(0,1fr);gap:6px}}
.guide{display:grid;gap:10px;align-content:start}
.guide:focus-visible{outline:none}
.guide:focus-visible::before{box-shadow:inset 0 0 0 2px var(--aqua)}
.guide p{font-size:15px;line-height:1.6}
.rules--narrow{max-width:860px}
.rule-group__note{margin:-4px 0 4px;max-width:80ch}


/* =============================================================
   Formatted text
   What a text typed in the dashboard can look like. The codes are read by
   /assets/js/text.js, which gives each piece of text these classes.
   ============================================================= */
.tx-b{font-weight:700}
.tx-i{font-style:italic}
.tx-u{text-decoration:underline;text-underline-offset:.16em;text-decoration-thickness:max(1px,.07em)}
.tx-s{text-decoration:line-through;text-decoration-thickness:max(1px,.07em)}
.tx-u.tx-s{text-decoration:underline line-through;text-decoration-thickness:max(1px,.07em)}
.tx-small{font-size:.82em}
.tx-big{font-size:1.25em}
.tx-huge{font-size:1.6em;line-height:1.15}
.tx-a{color:var(--aqua);text-decoration:underline;text-underline-offset:.18em;text-decoration-color:color-mix(in srgb,var(--aqua) 45%,transparent)}
.tx-a:hover{text-decoration-color:currentColor}
/* Lines of a longer text. They are spans, so they may sit inside a paragraph. */
.tx-blk,.tx-list{display:block}
.tx-gap{display:block;height:.7em}
.tx-h1,.tx-h2{font-family:var(--f-display);font-weight:400;color:var(--ink);line-height:1.15;letter-spacing:.005em}
.tx-h1{font-size:1.7em;margin:.55em 0 .3em}
.tx-h2{font-size:1.35em;margin:.5em 0 .25em}
.tx-h3{font-size:1.1em;font-weight:700;color:var(--ink);margin:.45em 0 .15em}
.tx-blk:first-child{margin-top:0}
.tx-blk:last-child{margin-bottom:0}
.tx-list .tx-blk + .tx-blk{margin-top:.2em}
.tx-sub{font-size:.85em;color:var(--muted)}
.tx-li,.tx-oli{position:relative;padding-left:1.35em}
.tx-li::before{content:"";position:absolute;left:.3em;top:.62em;width:.42em;height:.42em;background:var(--gold);transform:rotate(45deg)}
.tx-oli{padding-left:1.95em}
.tx-num{position:absolute;left:0;width:1.55em;text-align:right;color:var(--gold);font-weight:600;font-variant-numeric:tabular-nums}
.tx-in1{margin-left:1.5em}.tx-in2{margin-left:3em}.tx-in3{margin-left:4.5em}.tx-in4{margin-left:6em}


/* =============================================================
   Boxes that react when you point at them
   The dashboard chooses how (Settings > Look, "When you point at a box"):
     pop     the box rises on a thicker base, a light runs across it and its icon hops
     gentle  the box rises a little, and that is all
     off     boxes stay still
   theme.js writes the choice on <html> as data-hover. Only the site's own pages take
   part (they carry data-page): the dashboard reuses this file and stays still.
   A screen without a pointer never hovers. Someone who asked their device for less
   motion gets the changes of color without the movement. A browser too old to mix
   colors keeps its boxes as they are.

   How a box rises without moving anything around it. Under every such box sits an
   extra piece of base (a hard box-shadow, --up tall), out of sight because the shape
   of the box cuts it off. Pointing at the box slides it up by --up (transform) and
   lets its shape reach down by as much (clip-path, the -rest and -up shapes at the top
   of this file), so the base comes into view exactly as fast as the box leaves its
   place. While the box is up, an invisible strip (::after) covers its bottom corners
   and the room under it, so the pointer that made it rise is still on it. A press does
   not move a box: one that slides away under the pointer can lose the click.
   ============================================================= */
html[data-page] :is(.rank-chip,.member){position:relative}
html[data-page][data-hover="gentle"]{--up:3px;--up-md:3px}

/* The two colors of a box's frame are told to the browser as colors, so that it can
   fade from one to the next. A browser that does not know @property simply switches. */
@property --b-rim{syntax:"<color>";inherits:true;initial-value:transparent}
@property --b-edge{syntax:"<color>";inherits:true;initial-value:transparent}

@supports (color:color-mix(in srgb,red,blue)){
/* ---------- Color: the frame of a box lights up. No movement, so this part is for everyone with a pointer. ---------- */
@media (hover:hover){
  html[data-page]:is([data-hover="pop"],[data-hover="gentle"]) :is(.block:not(.modal__box,.crate),.hero-card){transition:--b-rim .2s ease,--b-edge .2s ease,--au-x .8s ease}
  /* Plain blocks take the main color, the way a rank card wears its own. */
  html[data-page]:is([data-hover="pop"],[data-hover="gentle"]) .block:not(.modal__box,.crate,.rank,.product,.bundle):is(:hover,:focus-visible){
    --b-rim:color-mix(in srgb,var(--gold) 46%,transparent);--b-edge:color-mix(in srgb,var(--gold-edge) 62%,var(--edge));
  }
  html[data-page]:is([data-hover="pop"],[data-hover="gentle"]) .rank:is(:hover,:focus-within){--b-rim:color-mix(in srgb,var(--rc) 66%,transparent)}
  html[data-page]:is([data-hover="pop"],[data-hover="gentle"]) .product:is(:hover,:focus-within){--b-rim:color-mix(in srgb,var(--pc) 64%,transparent)}
  /* The two cards beside the logo take the colors of their icons: gold to play, aqua for
     Discord. Their face is glass and the frame color shows through it, so the frame is
     kept light: any stronger and the whole card turns gold. The base is solid. */
  html[data-page]:is([data-hover="pop"],[data-hover="gentle"]) .hero-card:is(:hover,:focus-visible){
    --b-rim:color-mix(in srgb,var(--gold-hi) 30%,transparent);--b-edge:color-mix(in srgb,var(--gold-edge) 88%,#04060C);
  }
  html[data-page]:is([data-hover="pop"],[data-hover="gentle"]) .hero-card--discord:is(:hover,:focus-visible){
    --b-rim:color-mix(in srgb,var(--aqua-hi) 30%,transparent);--b-edge:color-mix(in srgb,var(--aqua-edge) 88%,#04060C);
  }
  html[data-page]:is([data-hover="pop"],[data-hover="gentle"]) .block.fx-rainbow{transition-property:none}
  html[data-page]:is([data-hover="pop"],[data-hover="gentle"]) .member:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--role) 70%,transparent)}
  html[data-page]:is([data-hover="pop"],[data-hover="gentle"]) .role:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--role) 55%,transparent)}
  html[data-page]:is([data-hover="pop"],[data-hover="gentle"]) .rule:hover{box-shadow:inset 0 0 0 1px var(--rim-2)}
  /* Pressing a box you can click dims it for a moment. */
  html[data-page]:is([data-hover="pop"],[data-hover="gentle"]) :is(a,button):is(.block:not(.modal__box,.crate),.hero-card):active{filter:brightness(.9)}
}

@media (hover:hover) and (prefers-reduced-motion:no-preference){
  /* ---------- The rise: 5px with a bounce (pop), 3px without one (gentle) ---------- */
  html[data-page]:is([data-hover="pop"],[data-hover="gentle"]) :is(.block:not(.modal__box,.crate),.hero-card){
    clip-path:var(--shape-lg-rest);box-shadow:0 var(--up) 0 0 var(--b-edge);
    transition:transform .2s ease,clip-path .2s ease,--b-rim .2s ease,--b-edge .2s ease,--au-x .8s ease;
  }
  html[data-page][data-hover="pop"] :is(.block:not(.modal__box,.crate),.hero-card){
    transition:transform .26s var(--spring),clip-path .26s var(--spring),--b-rim .2s ease,--b-edge .2s ease,--au-x .8s ease;
  }
  html[data-page]:is([data-hover="pop"],[data-hover="gentle"]) :is(.block:not(.modal__box,.crate),.hero-card):is(:hover,:focus-visible){
    transform:translateY(calc(-1 * var(--up)));clip-path:var(--shape-lg-up);
  }
  /* A card whose color keeps changing (Rainbow) rises like the others, and follows its color at once: a fade towards a color that has already moved on only lags behind it. */
  html[data-page]:is([data-hover="pop"],[data-hover="gentle"]) .block.fx-rainbow{transition-property:transform,clip-path}

  /* ---------- Flat boxes (rank chips, staff members) rise on a base in their own color ---------- */
  html[data-page]:is([data-hover="pop"],[data-hover="gentle"]) :is(.rank-chip,.member){
    clip-path:var(--shape-md-rest);box-shadow:inset 0 0 0 1px var(--rim),0 var(--up-md) 0 0 var(--base);
    transition:transform .2s ease,clip-path .2s ease,box-shadow .15s ease;
  }
  html[data-page][data-hover="pop"] :is(.rank-chip,.member){transition:transform .24s var(--spring),clip-path .24s var(--spring),box-shadow .15s ease}
  html[data-page]:is([data-hover="pop"],[data-hover="gentle"]) .rank-chip{--base:color-mix(in srgb,var(--rc) 46%,#020816)}
  html[data-page]:is([data-hover="pop"],[data-hover="gentle"]) .member{--base:color-mix(in srgb,var(--role) 40%,#020816)}
  html[data-page]:is([data-hover="pop"],[data-hover="gentle"]) :is(.rank-chip:is(:hover,:focus-visible),.member:hover){
    transform:translateY(calc(-1 * var(--up-md)));clip-path:var(--shape-md-up);
  }
  html[data-page]:is([data-hover="pop"],[data-hover="gentle"]) .rank-chip:hover{box-shadow:inset 0 0 0 1px var(--rc),0 var(--up-md) 0 0 var(--base)}
  html[data-page]:is([data-hover="pop"],[data-hover="gentle"]) .rank-chip:focus-visible{box-shadow:inset 0 0 0 2px var(--aqua),0 var(--up-md) 0 0 var(--base)}
  html[data-page]:is([data-hover="pop"],[data-hover="gentle"]) .member:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--role) 70%,transparent),0 var(--up-md) 0 0 var(--base)}

  /* ---------- Pop: a light runs across the face once, each time the pointer arrives ----------
     It waits out of sight on the left and leaves on the right. Going back takes no time,
     so it is never seen running the wrong way. */
  html[data-page][data-hover="pop"] :is(.block:not(.modal__box,.crate),.hero-card)::before{
    background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.085) 50%,transparent 70%) var(--shine-x,-150%) 0/60% 100% no-repeat,var(--b-deco,none),var(--b-gild,none),var(--b-face);
    transition:background-position 0s;
  }
  html[data-page][data-hover="pop"] :is(.block:not(.modal__box,.crate),.hero-card):is(:hover,:focus-visible){--shine-x:250%}
  html[data-page][data-hover="pop"] :is(.block:not(.modal__box,.crate),.hero-card):is(:hover,:focus-visible)::before{transition:background-position .75s cubic-bezier(.3,.1,.3,1)}

  /* ---------- Pop: the icon of a box hops ---------- */
  html[data-page][data-hover="pop"] :is(.feature__icon,.step-card__num,.hero-card__icon,.rank__icon,.rank-chip__icon,.member__head,.product__hop){transition:transform .3s var(--spring)}
  html[data-page][data-hover="pop"] :is(.block,.hero-card,.rank-chip,.member):is(:hover,:focus-visible) :is(.feature__icon,.step-card__num,.hero-card__icon,.rank__icon,.rank-chip__icon,.member__head,.product__hop){transform:translateY(-3px) rotate(-5deg) scale(1.07)}
  html[data-page][data-hover="pop"] .rule__num{transition:transform .2s var(--spring)}
  html[data-page][data-hover="pop"] .rule:hover .rule__num{transform:translateX(4px)}
  html[data-page][data-hover="pop"] .ip-pill .btn{transition:transform .2s var(--spring),filter .15s ease}
  html[data-page][data-hover="pop"] .ip-pill:hover .btn{transform:translateY(-2px);filter:brightness(1.07)}

  /* ---------- The strip that keeps the pointer on a box while it is up ----------
     It is there only while the box is up. With round corners it also covers the two
     bottom corners, which the box has lifted away from under the pointer. */
  html[data-page]:is([data-hover="pop"],[data-hover="gentle"]) :is(.block:not(.modal__box,.crate),.hero-card):is(:hover,:focus-visible)::after{
    content:"";position:absolute;left:0;right:0;top:calc(100% - var(--r-lg));height:calc(var(--r-lg) + var(--up) + 2px);
  }
  html[data-page]:is([data-hover="pop"],[data-hover="gentle"]) :is(.rank-chip:is(:hover,:focus-visible),.member:hover)::after{
    content:"";position:absolute;left:0;right:0;top:calc(100% - var(--r-md));height:calc(var(--r-md) + var(--up-md) + 2px);
  }
}
}


/* =============================================================
   Store: tokens, upgrades on the rank cards, environments, token bundles
   ============================================================= */

/* ---------- An amount of tokens (rs.js, tokenAmount) ----------
   The symbol is the owner's (Settings > Tokens). It is drawn in a font that has such signs,
   in the token color (--tok, set by rs.js) or else the main color. */
.tok{display:inline-flex;align-items:baseline;gap:.24em;white-space:nowrap}
.tok__sym{color:var(--tok,var(--gold));font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols 2","Noto Sans Symbols","DejaVu Sans",var(--f-body);font-weight:400;font-style:normal;line-height:1;letter-spacing:0;word-spacing:0}
.tok__name{margin-left:.3em}
.btn .tok__sym{color:inherit;font-size:1.3em;margin-right:-2px}

/* The row of buttons under a page heading: the store's "Get tokens". Its words come from
   Settings, so the button may break into two lines on a phone rather than push the page wide. */
.page-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.page-hero__actions .btn,.env-view__foot .btn{max-width:100%;padding-block:8px calc(8px + var(--edge-w));line-height:1.25;white-space:normal;overflow-wrap:anywhere;text-align:center}

/* ---------- The upgrade, as part of a rank card ----------
   One strip above the Buy button: who it is for, what it costs, and the money that comes
   with it. While Tebex sells the upgrade the whole strip is a button, with an arrow. */
.rank__actions{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.rank__actions > .btn{width:100%}
.rank__up{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;
  width:100%;padding:11px 10px 11px 12px;font-size:14px;line-height:1.35;color:var(--text);text-align:left;
  background:color-mix(in srgb,var(--rc) 8%,rgba(0,0,0,.3));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rc) 30%,transparent);
  clip-path:var(--shape-sm);border-radius:var(--r-sm);
}
.rank__up > .i{width:18px;height:18px;color:var(--rc)}
.rank__up-text{display:grid;gap:2px;min-width:0}
.rank__up-text b{color:var(--ink);font-weight:600}
.rank__up-text small{font-size:12.5px;color:var(--muted)}
.rank__up-go{display:grid;place-items:center;width:30px;height:30px;color:var(--ink);background:color-mix(in srgb,var(--rc) 20%,transparent);clip-path:var(--shape-sm);border-radius:var(--r-sm);transition:background-color .15s ease,color .15s ease}
.rank__up-go .i{width:16px;height:16px;transform:rotate(-90deg)}
button.rank__up{transition:background-color .15s ease,box-shadow .15s ease}
button.rank__up:hover{background:color-mix(in srgb,var(--rc) 15%,rgba(0,0,0,.3));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rc) 62%,transparent)}
button.rank__up:hover .rank__up-go{color:var(--navy);background:var(--rc)}
button.rank__up:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--rc)}

/* ---------- Environments ----------
   A screenshot in a frame of its own, the name, a line about it, the price. A click on the
   picture opens the larger view (#env-dialog), which steps through all of them. */
.envs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(16px,2vw,24px)}
.env{--pad:14px;display:grid;grid-template-rows:auto 1fr auto;gap:12px;scroll-margin-top:calc(var(--nav-h) + 20px)}
.env__shot{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--well);clip-path:var(--shape-md);border-radius:var(--r-md);cursor:zoom-in}
.env__img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.env__shot::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 -40px 40px -30px rgba(0,0,0,.35);border-radius:var(--r-md)}
.env__shot:focus-visible{outline:none}
.env__shot:focus-visible::after{box-shadow:inset 0 0 0 2px var(--aqua)}
.env__none{display:grid;place-items:center;width:100%;height:100%;color:var(--aqua)}
.env__none svg{width:64px;height:64px}
.env__badge{
  position:absolute;left:10px;top:10px;display:inline-flex;align-items:center;min-height:24px;padding:4px 10px 5px;
  font:700 10.5px/1.25 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--on-gold);background:var(--gold);
  clip-path:var(--shape-sm);border-radius:var(--r-sm);
}
.env__zoom{position:absolute;right:10px;bottom:10px;display:grid;place-items:center;width:34px;height:34px;color:#fff;background:rgba(0,0,0,.5);clip-path:var(--shape-sm);border-radius:var(--r-sm);opacity:0;transition:opacity .2s ease}
.env__zoom .i{width:18px;height:18px}
.env__shot:hover .env__zoom,.env__shot:focus-visible .env__zoom{opacity:1}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.env__shot:hover .env__img{transform:scale(1.045)}}
.env__body{display:grid;gap:4px;align-content:start;padding-inline:4px;min-width:0}
.env__name{font:400 20px/1.15 var(--f-display);color:var(--ink);overflow-wrap:anywhere}
.env__text{font-size:14.5px;line-height:1.5;color:var(--muted)}
.env__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-inline:4px}
.env__sample{position:absolute;right:10px;top:10px;color:#fff;background:rgba(0,0,0,.55)}
/* On a phone, two to a row: eighteen pictures one under the other are a very long way down.
   The line about each one waits in the larger view. */
@media (max-width:560px){
  .envs{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .env{--pad:10px;gap:8px}
  .env__text{display:none}
  .env__name{font-size:16px}
  .env__body,.env__foot{padding-inline:2px}
  .env__foot{gap:6px}
  .env__foot .product__price{font-size:20px}
  .env__sample{right:6px;top:auto;bottom:6px;height:20px;padding:0 7px 1px;font-size:9.5px}
  .env__badge{left:6px;top:6px;min-height:20px;padding:3px 7px 4px;font-size:9.5px}
}

/* The larger view. Its width follows the height of the screen too, so the picture, the price
   and the Buy button always fit on it: a dialog cannot be scrolled. */
.modal--env{width:min(1100px,calc(100% - 32px),max(300px,calc((100vh - 250px) * 16 / 9 + 56px)))}
@supports (height:100dvh){.modal--env{width:min(1100px,calc(100% - 32px),max(300px,calc((100dvh - 250px) * 16 / 9 + 56px)))}}
.env-view{grid-template-columns:minmax(0,1fr);gap:14px}
.env-view__head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;min-width:0}
.env-view__shot{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--well);clip-path:var(--shape-md);border-radius:var(--r-md)}
.env-view__img{width:100%;height:100%;object-fit:cover}
.env-view__nav{position:absolute;top:50%;display:grid;place-items:center;width:44px;height:44px;margin-top:-22px;color:#fff;background:rgba(0,0,0,.5);clip-path:var(--shape-sm);border-radius:var(--r-sm);transition:background .15s ease}
.env-view__nav:hover{background:rgba(0,0,0,.72)}
.env-view__nav:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--aqua)}
.env-view__nav--prev{left:10px}
.env-view__nav--next{right:10px}
.env-view__nav--prev .i{transform:rotate(90deg)}
.env-view__nav--next .i{transform:rotate(-90deg)}
.env-view__text{color:var(--text)}
.env-view__foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.env-view__foot .product__price{margin-right:auto;font-size:30px}

/* ---------- Token bundles ----------
   Each one wears the token color (--bc), the way a rank card wears its own. A pile of
   pixel coins grows with the bundle (store.js decides how many: 1 to 5). */
.bundles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:clamp(16px,2vw,24px)}
.bundle{
  --bc:var(--tok,var(--gold));
  --b-face:radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,var(--bc) 15%,transparent),transparent 62%),linear-gradient(180deg,var(--face-2),var(--face) 70%);
  --b-rim:color-mix(in srgb,var(--bc) 26%,transparent);
  --b-edge:color-mix(in srgb,var(--bc) 40%,#020816);
  --b-corner:transparent;
  display:grid;justify-items:center;align-content:start;gap:4px;text-align:center;
}
.bundle--featured{
  --b-face:radial-gradient(120% 75% at 50% 0%,color-mix(in srgb,var(--bc) 26%,transparent),transparent 64%),linear-gradient(180deg,var(--face-2),var(--face) 70%);
  --b-rim:color-mix(in srgb,var(--bc) 72%,transparent);
}
.bundle__badge{
  position:absolute;right:12px;top:12px;display:inline-flex;align-items:center;min-height:24px;padding:4px 10px 5px;
  font:700 10.5px/1.25 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--on-tok,var(--on-gold));background:var(--bc);
  clip-path:var(--shape-sm);border-radius:var(--r-sm);
}
.bundle__coins{display:flex;justify-content:center;align-items:flex-end;height:66px;margin:14px 0 6px;color:var(--bc)}
.bundle__coin{width:40px;height:40px;margin-left:-15px;filter:drop-shadow(0 5px 10px color-mix(in srgb,var(--bc) 36%,transparent))}
.bundle__coin:first-child{margin-left:0}
.bundle__coin:nth-child(even){transform:translateY(-14px)}
.bundle__coin svg{display:block;width:100%;height:100%}
/* The amount without the bonus, crossed out in red above the full amount (Settings > Tokens). */
/* No shadow here: a shadow would draw a second, dark line under the red one. */
.bundle__was{min-height:24px;font:400 18px/24px var(--f-pixel);color:var(--text)}
.bundle__was s{text-decoration:line-through;text-decoration-color:var(--mc-c,#FF5555);text-decoration-thickness:var(--px);text-decoration-skip-ink:none}
.bundle__amount{font:400 36px/1.1 var(--f-pixel);color:var(--ink)}
.bundle__amount .tok__sym{font-size:30px}
.bundle__name{font:600 12px/1.3 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bundle__bonus{min-height:21px;font-size:14px;font-weight:600;color:var(--mc-a)}
.bundle__bonus .tok__sym{color:inherit}
.bundle__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;width:100%;margin-top:10px}
.bundle__foot .rank__sample{margin-left:auto}
@media (hover:hover){html[data-page]:is([data-hover="pop"],[data-hover="gentle"]) .bundle:is(:hover,:focus-within){--b-rim:color-mix(in srgb,var(--bc) 70%,transparent)}}
html[data-page][data-hover="pop"] .bundle__coins{transition:transform .3s var(--spring)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){html[data-page][data-hover="pop"] .bundle:is(:hover,:focus-within) .bundle__coins{transform:translateY(-4px) scale(1.06)}}


/* =============================================================
   Seasons (Settings > Look, "Seasonal theme")
   theme.js writes the season that is on today on <html> as data-season, and data-still
   when the bats and the snow should stand still. Only the site's own pages take part. A
   season brings its own two colors (theme.js) and its own surfaces (here), a sky at dusk
   or at night, and its decorations:
     halloween  bats over the top of the page, a cobweb in the corner of every box
     christmas  snow falling over the top of the page, snow on top of every box
   The decorations of a box are one more layer on its face (--b-deco, see "Blocks").
   ============================================================= */
html[data-page][data-season="halloween"]{
  --bg:#0D0912; --bg-2:#130D19;
  --face:#181120; --face-2:#20172A; --edge:#07040A;
  --rim:rgba(255,160,80,.12); --rim-2:rgba(255,160,80,.34);
  --ink:#FFF5EC; --text:#D3C7DB; --muted:#A596B0; --dim:#6F6379;
  --well:rgba(5,2,9,.52);
  --glass:rgba(24,10,32,.58); --glass-edge:rgba(8,3,12,.78); --glass-rim:rgba(255,190,120,.22);
  --sky-top:rgba(22,6,32,.5); --sky-mid:rgba(30,8,28,.3);
  --stars:1;
}
html[data-page][data-season="christmas"]{
  --bg:#07101A; --bg-2:#0B1622;
  --face:#0F1B27; --face-2:#142333; --edge:#040A10;
  --rim:rgba(190,225,255,.12); --rim-2:rgba(190,225,255,.3);
  --ink:#F4FAFF; --text:#C0D0DE; --muted:#8FA4B6; --dim:#5D7184;
  --well:rgba(2,7,12,.5);
  --glass:rgba(8,20,32,.56); --glass-edge:rgba(3,8,14,.75); --glass-rim:rgba(220,240,255,.24);
  --sky-top:rgba(4,12,28,.48); --sky-mid:rgba(4,14,32,.28);
  --stars:1;
}
/* The sky of the page heading, tinted: purple dusk with an orange horizon, or a clear night. */
html[data-page][data-season="halloween"] .hero__sky{background-color:#3A1352;background-blend-mode:luminosity}
html[data-page][data-season="halloween"] .hero__sky::after{background:linear-gradient(180deg,rgba(18,4,28,.55) 0%,rgba(40,10,50,.2) 34%,rgba(255,110,30,.16) 62%,color-mix(in srgb,var(--bg) 74%,transparent) 84%,var(--bg) 100%)}
html[data-page][data-season="christmas"] .hero__sky{background-color:#123A6E;background-blend-mode:luminosity}
html[data-page][data-season="christmas"] .hero__sky::after{background:linear-gradient(180deg,rgba(2,8,22,.62) 0%,rgba(4,14,36,.36) 40%,rgba(8,24,50,.34) 66%,color-mix(in srgb,var(--bg) 74%,transparent) 84%,var(--bg) 100%)}
html[data-page][data-season] .page-hero .hero__sky::after{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 50%,transparent) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 55%,var(--bg) 100%)}
html[data-page][data-season] .cloud{opacity:.35}

/* Bats and snow fly in a layer over the sky, under the words. */
html[data-page][data-season] .hero__sky::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
html[data-page][data-season="christmas"] .hero__sky::before{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' shape-rendering='crispEdges'%3E%3Cg fill='%23FFFFFF'%3E%3Crect x='77' y='202' width='3' height='3' fill-opacity='0.74'/%3E%3Crect x='48' y='187' width='2' height='2' fill-opacity='0.71'/%3E%3Crect x='19' y='44' width='2' height='2' fill-opacity='0.65'/%3E%3Crect x='123' y='46' width='2' height='2' fill-opacity='0.7'/%3E%3Crect x='63' y='114' width='2' height='2' fill-opacity='0.73'/%3E%3Crect x='203' y='25' width='2' height='2' fill-opacity='0.89'/%3E%3Crect x='68' y='148' width='2' height='2' fill-opacity='0.64'/%3E%3Crect x='157' y='92' width='2' height='2' fill-opacity='0.5'/%3E%3Crect x='190' y='49' width='2' height='2' fill-opacity='0.7'/%3E%3Crect x='30' y='105' width='2' height='2' fill-opacity='0.67'/%3E%3Crect x='160' y='238' width='3' height='3' fill-opacity='0.71'/%3E%3Crect x='185' y='153' width='3' height='3' fill-opacity='0.56'/%3E%3Crect x='124' y='41' width='2' height='2' fill-opacity='0.71'/%3E%3Crect x='175' y='229' width='3' height='3' fill-opacity='0.58'/%3E%3Crect x='60' y='214' width='2' height='2' fill-opacity='0.52'/%3E%3Crect x='77' y='250' width='3' height='3' fill-opacity='0.64'/%3E%3Crect x='160' y='174' width='2' height='2' fill-opacity='0.76'/%3E%3Crect x='233' y='35' width='3' height='3' fill-opacity='0.83'/%3E%3Crect x='242' y='33' width='3' height='3' fill-opacity='0.48'/%3E%3Crect x='228' y='145' width='3' height='3' fill-opacity='0.77'/%3E%3Crect x='11' y='236' width='3' height='3' fill-opacity='0.61'/%3E%3Crect x='252' y='30' width='2' height='2' fill-opacity='0.55'/%3E%3C/g%3E%3C/svg%3E") 0 0/260px 260px repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='380' shape-rendering='crispEdges'%3E%3Cg fill='%23FFFFFF'%3E%3Crect x='286' y='238' width='4' height='4' fill-opacity='0.55'/%3E%3Crect x='97' y='94' width='5' height='5' fill-opacity='0.71'/%3E%3Crect x='322' y='314' width='4' height='4' fill-opacity='0.71'/%3E%3Crect x='228' y='155' width='3' height='3' fill-opacity='0.41'/%3E%3Crect x='355' y='324' width='5' height='5' fill-opacity='0.37'/%3E%3Crect x='231' y='334' width='4' height='4' fill-opacity='0.68'/%3E%3Crect x='80' y='319' width='5' height='5' fill-opacity='0.36'/%3E%3Crect x='32' y='30' width='5' height='5' fill-opacity='0.37'/%3E%3Crect x='307' y='15' width='3' height='3' fill-opacity='0.7'/%3E%3Crect x='225' y='302' width='4' height='4' fill-opacity='0.73'/%3E%3Crect x='119' y='327' width='5' height='5' fill-opacity='0.48'/%3E%3Crect x='339' y='43' width='3' height='3' fill-opacity='0.56'/%3E%3Crect x='208' y='282' width='4' height='4' fill-opacity='0.8'/%3E%3Crect x='362' y='130' width='3' height='3' fill-opacity='0.49'/%3E%3C/g%3E%3C/svg%3E") 0 0/380px 380px repeat;
  opacity:.75;animation:rs-snow 18s linear infinite;
}
@keyframes rs-snow{from{background-position:0 0,0 0}to{background-position:260px 260px,-380px 760px}}
html[data-page][data-season="halloween"] .hero__sky::before{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 16 8' shape-rendering='crispEdges'%3E%3Cg fill='%23120818' fill-opacity='0.85'%3E%3Crect x='3' y='0' width='1' height='1'/%3E%3Crect x='12' y='0' width='1' height='1'/%3E%3Crect x='2' y='1' width='3' height='1'/%3E%3Crect x='7' y='1' width='2' height='1'/%3E%3Crect x='11' y='1' width='3' height='1'/%3E%3Crect x='1' y='2' width='5' height='1'/%3E%3Crect x='7' y='2' width='2' height='1'/%3E%3Crect x='10' y='2' width='5' height='1'/%3E%3Crect x='0' y='3' width='4' height='1'/%3E%3Crect x='6' y='3' width='4' height='1'/%3E%3Crect x='12' y='3' width='4' height='1'/%3E%3Crect x='0' y='4' width='3' height='1'/%3E%3Crect x='7' y='4' width='2' height='1'/%3E%3Crect x='13' y='4' width='3' height='1'/%3E%3Crect x='0' y='5' width='2' height='1'/%3E%3Crect x='14' y='5' width='2' height='1'/%3E%3Crect x='0' y='6' width='1' height='1'/%3E%3Crect x='15' y='6' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E") 62% 24%/48px 24px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 16 8' shape-rendering='crispEdges'%3E%3Cg fill='%23120818' fill-opacity='0.85'%3E%3Crect x='3' y='0' width='1' height='1'/%3E%3Crect x='12' y='0' width='1' height='1'/%3E%3Crect x='2' y='1' width='3' height='1'/%3E%3Crect x='7' y='1' width='2' height='1'/%3E%3Crect x='11' y='1' width='3' height='1'/%3E%3Crect x='1' y='2' width='5' height='1'/%3E%3Crect x='7' y='2' width='2' height='1'/%3E%3Crect x='10' y='2' width='5' height='1'/%3E%3Crect x='0' y='3' width='4' height='1'/%3E%3Crect x='6' y='3' width='4' height='1'/%3E%3Crect x='12' y='3' width='4' height='1'/%3E%3Crect x='0' y='4' width='3' height='1'/%3E%3Crect x='7' y='4' width='2' height='1'/%3E%3Crect x='13' y='4' width='3' height='1'/%3E%3Crect x='0' y='5' width='2' height='1'/%3E%3Crect x='14' y='5' width='2' height='1'/%3E%3Crect x='0' y='6' width='1' height='1'/%3E%3Crect x='15' y='6' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E") 30% 16%/36px 18px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 16 8' shape-rendering='crispEdges'%3E%3Cg fill='%23120818' fill-opacity='0.85'%3E%3Crect x='3' y='0' width='1' height='1'/%3E%3Crect x='12' y='0' width='1' height='1'/%3E%3Crect x='2' y='1' width='3' height='1'/%3E%3Crect x='7' y='1' width='2' height='1'/%3E%3Crect x='11' y='1' width='3' height='1'/%3E%3Crect x='1' y='2' width='5' height='1'/%3E%3Crect x='7' y='2' width='2' height='1'/%3E%3Crect x='10' y='2' width='5' height='1'/%3E%3Crect x='0' y='3' width='4' height='1'/%3E%3Crect x='6' y='3' width='4' height='1'/%3E%3Crect x='12' y='3' width='4' height='1'/%3E%3Crect x='0' y='4' width='3' height='1'/%3E%3Crect x='7' y='4' width='2' height='1'/%3E%3Crect x='13' y='4' width='3' height='1'/%3E%3Crect x='0' y='5' width='2' height='1'/%3E%3Crect x='14' y='5' width='2' height='1'/%3E%3Crect x='0' y='6' width='1' height='1'/%3E%3Crect x='15' y='6' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E") 82% 40%/28px 14px no-repeat;
  opacity:.9;animation:rs-bats 26s linear infinite;
}
@keyframes rs-bats{
  0%{background-position:-60px 30%,-140px 18%,-220px 46%}
  25%{background-position:24vw 22%,14vw 26%,4vw 38%}
  50%{background-position:52vw 32%,40vw 16%,30vw 44%}
  75%{background-position:78vw 20%,66vw 28%,58vw 36%}
  100%{background-position:106vw 30%,96vw 18%,88vw 46%}
}
/* Standing still (the setting, or a visitor who asked for less motion, see "Motion"), the bats
   are where the rule above puts them: spread over the sky, never in a heap in its corner. */
html[data-page][data-still] .hero__sky::before{animation:none}

/* On every box: snow on its top edge, or a cobweb in its top right corner. */
html[data-page][data-season="christmas"] .block{--b-deco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='8' viewBox='0 0 16 4' shape-rendering='crispEdges'%3E%3Cg fill='%23F4FAFF' fill-opacity='0.92'%3E%3Crect x='0' y='0' width='16' height='1'/%3E%3Crect x='0' y='1' width='16' height='1'/%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='2' y='2' width='3' height='1'/%3E%3Crect x='7' y='2' width='4' height='1'/%3E%3Crect x='12' y='2' width='2' height='1'/%3E%3Crect x='15' y='2' width='1' height='1'/%3E%3Crect x='2' y='3' width='1' height='1'/%3E%3Crect x='8' y='3' width='1' height='1'/%3E%3Crect x='13' y='3' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E") 0 0/32px 8px repeat-x}
html[data-page][data-season="halloween"] .block{--b-deco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cg fill='%23FFFFFF' fill-opacity='0.13'%3E%3Crect x='4' y='0' width='1' height='1'/%3E%3Crect x='7' y='0' width='1' height='1'/%3E%3Crect x='11' y='0' width='1' height='1'/%3E%3Crect x='4' y='1' width='1' height='1'/%3E%3Crect x='7' y='1' width='1' height='1'/%3E%3Crect x='10' y='1' width='2' height='1'/%3E%3Crect x='5' y='2' width='1' height='1'/%3E%3Crect x='7' y='2' width='1' height='1'/%3E%3Crect x='9' y='2' width='1' height='1'/%3E%3Crect x='11' y='2' width='1' height='1'/%3E%3Crect x='0' y='3' width='6' height='1'/%3E%3Crect x='7' y='3' width='2' height='1'/%3E%3Crect x='11' y='3' width='1' height='1'/%3E%3Crect x='6' y='4' width='4' height='1'/%3E%3Crect x='11' y='4' width='1' height='1'/%3E%3Crect x='5' y='5' width='1' height='1'/%3E%3Crect x='7' y='5' width='4' height='1'/%3E%3Crect x='4' y='6' width='1' height='1'/%3E%3Crect x='7' y='6' width='1' height='1'/%3E%3Crect x='9' y='6' width='3' height='1'/%3E%3Crect x='3' y='7' width='1' height='1'/%3E%3Crect x='6' y='7' width='1' height='1'/%3E%3Crect x='9' y='7' width='1' height='1'/%3E%3Crect x='11' y='7' width='1' height='1'/%3E%3Crect x='2' y='8' width='1' height='1'/%3E%3Crect x='5' y='8' width='1' height='1'/%3E%3Crect x='9' y='8' width='1' height='1'/%3E%3Crect x='11' y='8' width='1' height='1'/%3E%3Crect x='1' y='9' width='1' height='1'/%3E%3Crect x='4' y='9' width='1' height='1'/%3E%3Crect x='9' y='9' width='1' height='1'/%3E%3Crect x='11' y='9' width='1' height='1'/%3E%3Crect x='0' y='10' width='1' height='1'/%3E%3Crect x='3' y='10' width='1' height='1'/%3E%3Crect x='9' y='10' width='1' height='1'/%3E%3Crect x='11' y='10' width='1' height='1'/%3E%3Crect x='3' y='11' width='1' height='1'/%3E%3Crect x='9' y='11' width='1' height='1'/%3E%3Crect x='11' y='11' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E") right 0 top 0/36px 36px no-repeat}


/* =============================================================
   Gold (Settings > Look, "Gold trim")
   theme.js writes the choice on <html> as data-gold: off, trim or rich. Only the site's
   own pages take part.
     trim  the boxes get a brushed gold frame (a gradient where the plain rim was), with a
           light that runs along it when you point at them, a gold line along the top of
           their face, and every thin line of the site (panels, tables, the menu) turns gold
     rich  the same, also on rank cards and token bundles (their own color stays in their
           glow, name and icon), and the main color becomes gold (theme.js): the main
           buttons get a metal sheen, and the words a heading highlights (&e) are gold leaf
   With trim, rank cards and token bundles keep the frames in their own colors. Store
   packages always keep the look chosen for them (Store > Packages). A seasonal theme keeps
   its own main color: with it, rich only adds the gold frames of rank cards and bundles.
   ============================================================= */
:root{
  --au-hi:#FFF4C9; --au-1:#F7DD8E; --au-2:#E8BE5C; --au-3:#CF9F43; --au-4:#A8792C; --au-5:#76521A; --au-edge:#4E3510;
  --grad-au:linear-gradient(118deg,#8A6220 0%,#E8BE5C 14%,#FFF1BF 22%,#DDB050 34%,#A8792C 50%,#E3B95A 66%,#FCE6A3 76%,#C7953E 88%,#93681F 100%);
}
/* Where the light on the frame is: it moves when you point at a box ("Boxes that react"). */
@property --au-x{syntax:"<percentage>";inherits:false;initial-value:0%}
html[data-page]:is([data-gold="trim"],[data-gold="rich"]){
  --rim:color-mix(in srgb,var(--au-2) 22%,transparent);
  --rim-2:color-mix(in srgb,var(--au-2) 50%,transparent);
}
html[data-page]:is([data-gold="trim"],[data-gold="rich"]) .block:not(.rank,.product,.bundle),
html[data-page][data-gold="rich"] .block:is(.rank,.bundle){
  --b-edge:var(--au-edge); --b-corner:var(--b-edge);
  --b-gild:linear-gradient(90deg,transparent 4%,rgba(255,226,150,.30) 30%,rgba(255,243,200,.46) 50%,rgba(255,226,150,.30) 70%,transparent 96%) 0 0/100% 1px no-repeat;
  background:
    linear-gradient(135deg,transparent 50%,var(--b-corner) 0) right 0 bottom calc(var(--depth) + 1px)/calc(var(--cut-lg) + 2px) calc(var(--cut-lg) + 2px) no-repeat,
    linear-gradient(to top,var(--b-edge) 0 calc(var(--depth) + 1px),transparent calc(var(--depth) + 1px)),
    var(--grad-au) var(--au-x) 0/240% 100%;
}
html[data-page][data-corners="round"]:is([data-gold="trim"],[data-gold="rich"]) .block:not(.rank,.product,.bundle),
html[data-page][data-corners="round"][data-gold="rich"] .block:is(.rank,.bundle){
  background:
    radial-gradient(circle at 100% 0,transparent calc(var(--r-lg) - 1.5px),var(--b-corner) calc(var(--r-lg) - 1px)) left 1px bottom var(--depth)/calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) no-repeat,
    radial-gradient(circle at 0 0,transparent calc(var(--r-lg) - 1.5px),var(--b-corner) calc(var(--r-lg) - 1px)) right 1px bottom var(--depth)/calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) no-repeat,
    linear-gradient(to top,var(--b-edge) 0 calc(var(--depth) + 1px),transparent calc(var(--depth) + 1px)),
    var(--grad-au) var(--au-x) 0/240% 100%;
}
@media (hover:hover){
  html[data-page]:is([data-gold="trim"],[data-gold="rich"]):not([data-hover="off"]) .block:not(.rank,.product,.bundle):is(:hover,:focus-visible,:focus-within),
  html[data-page][data-gold="rich"]:not([data-hover="off"]) .block:is(.rank,.bundle):is(:hover,:focus-visible,:focus-within){--au-x:100%}
}
/* The glass cards on the home page and the frames of panels, in gold. */
html[data-page]:is([data-gold="trim"],[data-gold="rich"]) .hero-card{--b-rim:color-mix(in srgb,var(--au-1) 40%,transparent);--b-edge:color-mix(in srgb,var(--au-edge) 82%,#04060C);--b-corner:var(--b-edge)}
html[data-page]:is([data-gold="trim"],[data-gold="rich"]) .nav.is-scrolled{border-bottom-color:color-mix(in srgb,var(--au-2) 32%,transparent)}
html[data-page]:is([data-gold="trim"],[data-gold="rich"]) .footer{border-top-color:color-mix(in srgb,var(--au-2) 34%,transparent)}

/* Rich: the main buttons in brushed gold with a sheen, the highlighted words of headings in gold leaf. */
:where(html[data-page][data-gold="rich"]:not([data-season])) .btn:not(.btn--aqua,.btn--ghost){
  --b-face:linear-gradient(180deg,#FFF4CB 0%,#F5D684 20%,#E5BB58 48%,#C9973C 52%,#B9872F 80%,#A87A2A 100%);
  --b-edge:#5E4013; --b-ink:#2A1A04;
}
:where(html[data-page][data-gold="rich"]:not([data-season])) :is(.h1,.h2,.h3,h1,h2,h3) .hl-e{
  background:linear-gradient(180deg,#FFF5CF 8%,#F4D27C 40%,#D9A845 62%,#B98A33 76%,#EBC76B 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  text-shadow:none;filter:drop-shadow(0 2px 0 rgba(60,36,6,.55));
}
:where(html[data-page][data-gold="rich"]) .sec-head .h2::after{content:"";display:block;width:64px;height:2px;margin-top:16px;background:var(--grad-au)}
:where(html[data-page][data-gold="rich"]) .sec-head--center .h2::after{margin-inline:auto}