/* "Minecraft" font by Pwnage_Block, CC BY-SA 3.0 (credited in the footer) */
@font-face { font-family: "Minecraft"; src: url(fonts/minecraft.woff2) format("woff2"); font-display: swap; }

/* ============ Tokens ============ */
:root {
  --text: #F4EEFA;
  --muted: #A99FB8;
  --card: #1C1825;
  --card-2: #262033;
  --hover: #302940;
  --track: #120F18;
  --input: #110E17;
  --input-line: #3A3249;
  --line: #000;
  --pink: #FF6FA0;
  --pink-dark: #C9407A;
  --hero-text: #D6CDE6;
  --nav-text: #FFFFFF;
  --nav-pill: rgba(255, 255, 255, .14);
  --cloud: #3A3D6B;
  --cloud-o: .5;
  --tex-dim: .55;
  --radius: 3px;
  --header-h: 76px;
  --pixel: "Minecraft", "Pixelify Sans", Nunito, sans-serif;
  --sky-night: linear-gradient(#0B0E26, #1E1840);
  --sky-day: linear-gradient(#4FAEEB, #BDE5FA);
  --dirt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect width='8' height='8' fill='%2386562F'/%3E%3Cg fill='%236B4224'%3E%3Crect x='1' y='1' width='1' height='1'/%3E%3Crect x='5' y='0' width='1' height='1'/%3E%3Crect x='2' y='4' width='2' height='1'/%3E%3Crect x='6' y='5' width='1' height='1'/%3E%3Crect x='0' y='6' width='1' height='1'/%3E%3Crect x='4' y='7' width='1' height='1'/%3E%3C/g%3E%3Cg fill='%239E6A3D'%3E%3Crect x='3' y='2' width='1' height='1'/%3E%3Crect x='7' y='3' width='1' height='1'/%3E%3Crect x='1' y='5' width='1' height='1'/%3E%3Crect x='5' y='6' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E");
  --stone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect width='8' height='8' fill='%23808089'/%3E%3Cg fill='%236C6C75'%3E%3Crect x='0' y='1' width='2' height='1'/%3E%3Crect x='4' y='3' width='2' height='1'/%3E%3Crect x='2' y='6' width='1' height='1'/%3E%3Crect x='6' y='6' width='1' height='1'/%3E%3Crect x='7' y='0' width='1' height='1'/%3E%3C/g%3E%3Cg fill='%2396969F'%3E%3Crect x='3' y='0' width='1' height='1'/%3E%3Crect x='6' y='2' width='1' height='1'/%3E%3Crect x='1' y='4' width='1' height='1'/%3E%3Crect x='4' y='6' width='1' height='1'/%3E%3Crect x='7' y='5' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E");
  --drips: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 2' shape-rendering='crispEdges'%3E%3Cg fill='%235DB536'%3E%3Crect x='0' y='0' width='2' height='1'/%3E%3Crect x='3' y='0' width='1' height='2'/%3E%3Crect x='5' y='0' width='2' height='1'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: dark;
}
:root[data-theme="light"] {
  --text: #1E1A24;
  --muted: #625A6E;
  --card: #FFFFFF;
  --card-2: #F4EFF7;
  --hover: #EDE4F2;
  --track: #E4DCEA;
  --input: #FFFFFF;
  --input-line: #CFC5D8;
  --line: #1E1A24;
  --hero-text: #1E2A3A;
  --nav-text: #10233A;
  --nav-pill: rgba(255, 255, 255, .6);
  --cloud: #FFFFFF;
  --cloud-o: .92;
  --tex-dim: 1;
  color-scheme: light;
}

/* ============ Base ============ */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* No accidental text selection; inputs, the server IP and order commands stay selectable. */
body { user-select: none; -webkit-user-select: none; }
input, code, .commands { user-select: text; -webkit-user-select: text; }
html { scroll-behavior: smooth; background: #0B0E26; scroll-padding-top: calc(var(--header-h) + 12px); }
body { margin: 0; min-height: calc(100vh / var(--fit, 1)); display: flex; flex-direction: column; color: var(--text); font: 500 17px/1.6 Nunito, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: Fredoka, Nunito, sans-serif; font-weight: 700; line-height: 1.05; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.wrap { width: 100%; max-width: 1800px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 56px); }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 40; background: #fff; color: #000; padding: 8px 14px; border-radius: 2px; font-weight: 800; }
.skip:focus { top: 12px; }

/* White letters with a black outline, like the logo */
.stroke { color: #fff; -webkit-text-stroke: 7px #000; paint-order: stroke fill; text-shadow: 0 5px 0 #000; }
.on-texture { color: #fff; font-weight: 800; font-size: 18px; text-shadow: 0 2px 0 #000; }

.card { background: var(--card); border: 3px solid var(--line); border-radius: var(--radius); box-shadow: 0 6px 0 var(--line), 0 18px 40px rgba(0, 0, 0, .25); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 17px/1 Fredoka, sans-serif; color: #1A0A12; text-decoration: none; white-space: nowrap;
  background: var(--pink); border: 3px solid var(--line); border-radius: 2px;
  padding: 13px 22px; box-shadow: 0 4px 0 var(--line);
  transition: transform .08s, box-shadow .08s, filter .15s;
}
.btn img { width: 16px; height: 16px; image-rendering: pixelated; }
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.btn:disabled { filter: grayscale(.7); opacity: .7; cursor: default; transform: none; box-shadow: 0 4px 0 var(--line); }
.btn.ghost { background: var(--card-2); color: var(--text); }
.btn.wide { width: 100%; }
.link { background: none; border: 0; padding: 0; color: var(--muted); font-weight: 700; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--text); }

/* Segmented control: radios or tab buttons */
.seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 3px solid var(--line); border-radius: var(--radius); padding: 3px; margin: 0; background: var(--card); min-width: 0; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label, .seg button { position: relative; z-index: 1; padding: 9px 18px; font: 600 16px Fredoka, sans-serif; text-align: center; cursor: pointer; color: var(--muted); transition: color .2s; white-space: nowrap; background: none; border: 0; }
.seg input:checked + label, .seg [aria-selected="true"] { color: #1A0A12; }
.seg input:focus-visible + label { outline: 3px solid var(--pink); outline-offset: 2px; }
.seg .thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 2); border-radius: 2px; background: var(--pink); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); transform: translateX(calc(var(--idx, 0) * 100%)); transition: transform .35s cubic-bezier(.3, 1.3, .5, 1); }
.seg.three .thumb { width: calc((100% - 6px) / 3); }
.seg.four .thumb { width: calc((100% - 6px) / 4); }
.seg input:nth-of-type(2):checked ~ .thumb { transform: translateX(100%); }
.seg input:nth-of-type(3):checked ~ .thumb { transform: translateX(200%); }

/* ============ Header ============ */
.site-header { position: sticky; top: 0; z-index: 30; height: var(--header-h); margin-bottom: calc(-1 * var(--header-h)); border-bottom: 3px solid transparent; view-transition-name: site-header; transition: background-color .3s, border-color .3s, box-shadow .3s; }
.site-header > .wrap { height: 100%; display: flex; align-items: center; gap: 10px; }
.site-header.scrolled { background: color-mix(in srgb, var(--card) 86%, transparent); backdrop-filter: blur(12px); border-bottom-color: #000; box-shadow: 0 4px 0 rgba(0, 0, 0, .2); --nav-text: var(--text); --nav-pill: var(--card-2); }
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; font: 700 22px Fredoka, sans-serif; color: #fff; text-decoration: none; -webkit-text-stroke: 5px #000; paint-order: stroke fill; }
.brand img { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.brand:hover img { transform: rotate(-8deg) scale(1.08); }
.site-nav { position: relative; display: flex; gap: 2px; margin-right: 6px; }
.site-nav a { position: relative; z-index: 1; color: var(--nav-text); text-decoration: none; font-weight: 800; padding: 8px 14px; opacity: .75; transition: opacity .2s, color .3s; }
.site-nav a:hover, .site-nav a[aria-current="page"] { opacity: 1; }
.nav-pill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 2px; background: var(--nav-pill); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12); opacity: 0; pointer-events: none; transition: translate .35s cubic-bezier(.3, 1.3, .5, 1), width .35s cubic-bezier(.3, 1.3, .5, 1), opacity .2s, background-color .3s; }
.nav-pill.instant { transition: none; }

.icon-btn { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 3px solid #000; border-radius: 2px; background: #1C1825; color: #fff; box-shadow: 0 3px 0 #000; transition: transform .08s, box-shadow .08s, background-color .3s, color .3s; }
.icon-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #000; }
[data-theme="light"] .icon-btn { background: #fff; color: #1E1A24; }
.theme-toggle { color: #FFE15A; overflow: hidden; }
[data-theme="light"] .theme-toggle { color: #3C3570; }
.theme-toggle svg { grid-area: 1 / 1; width: 20px; height: 20px; transition: transform .6s cubic-bezier(.3, 1.4, .5, 1), opacity .3s; }
.theme-toggle .i-moon { transform: translateY(26px) rotate(90deg); opacity: 0; }
[data-theme="light"] .theme-toggle .i-sun { transform: translateY(-26px) rotate(-90deg); opacity: 0; }
[data-theme="light"] .theme-toggle .i-moon { transform: none; opacity: 1; }
.menu-btn { display: none; align-content: center; gap: 4px; }
.menu-btn span { display: block; width: 20px; height: 3px; background: currentColor; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), opacity .2s; }
.open .menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.open .menu-btn span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.open .menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Discord: header icon button and footer call-to-action, in Discord's blurple */
.discord-btn { background: #5865F2 !important; color: #fff !important; }
.discord-btn svg { width: 22px; height: 22px; }
.discord-btn:hover { background: #4752C4 !important; }
footer .wrap { align-items: center; }

/* Username / profile */
.profile-btn { flex: none; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 6px; border: 3px solid #000; border-radius: 2px; background: var(--pink); color: #1A0A12; font: 600 16px Fredoka, sans-serif; box-shadow: 0 3px 0 #000; transition: transform .08s, box-shadow .08s, background-color .3s; }
.profile-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #000; }
.profile-btn .head { width: 32px; height: 32px; background: none; image-rendering: pixelated; }
.profile-btn.signed-in { background: #1C1825; color: #fff; }
[data-theme="light"] .profile-btn.signed-in { background: #fff; color: #1E1A24; }
.profile-dialog { width: min(480px, calc(100vw - 32px)); }
.profile-dialog h2 { margin-bottom: 10px; }
.pf-note { margin-bottom: 18px; }
.pf-note.center { margin: 14px 0 0; }
.pf-top { display: flex; gap: 22px; align-items: center; }
.pf-model { flex: none; display: grid; place-items: center; width: 160px; min-height: 240px; }
#pf-3d, #pf-confirm-3d { width: 160px; height: 240px; cursor: grab; touch-action: none; }
#pf-3d:active, #pf-confirm-3d:active { cursor: grabbing; }
.pf-uuid { margin-top: 6px; font: 600 12px/1.4 ui-monospace, Consolas, monospace; color: var(--muted); word-break: break-all; user-select: text; -webkit-user-select: text; }
#pf-skin { width: 90px; height: auto; image-rendering: pixelated; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .3)); }
.pf-confirm-name { font: 700 28px Fredoka, sans-serif; }
#pf-confirm-uuid { margin: 2px 0 10px; }
#pf-confirm .pf-top { margin: 18px 0 24px; }
#pf-confirm-skin { width: 90px; height: auto; image-rendering: pixelated; }
.pf-in #pf-confirm-skin, .pf-in #pf-skin { animation: drop .6s cubic-bezier(.3, 1.4, .5, 1); }
.pf-in .pf-stats div { animation: fade-up .35s both; }
.pf-in .pf-stats div:nth-child(2) { animation-delay: .05s; } .pf-in .pf-stats div:nth-child(3) { animation-delay: .1s; } .pf-in .pf-stats div:nth-child(4) { animation-delay: .15s; }
.pf-ban { margin-top: 10px; color: #FF8A98; font-weight: 800; }
.pf-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 24px 0; }
.pf-stats div { background: var(--card-2); padding: 10px 14px; border-radius: 2px; }
.pf-stats dt { font-size: 14px; color: var(--muted); font-weight: 700; }
.pf-stats dd { margin: 0; font: 700 22px Fredoka, sans-serif; }
#pf-nostats { margin: -10px 0 22px; }
.pf-actions { display: flex; gap: 10px; }
.pf-actions .btn { flex: 1; }

/* ============ Sky ============ */
.sky { position: relative; padding-top: var(--header-h); background: var(--sky-night); }
.sky-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sky-scene::before { content: ""; position: absolute; inset: 0; background: var(--sky-day); opacity: 0; transition: opacity 1.4s ease; }
[data-theme="light"] .sky-scene::before { opacity: 1; }

.stars, .fireflies { position: absolute; inset: 0; transition: opacity 1.2s; }
[data-theme="light"] .stars, [data-theme="light"] .fireflies { opacity: 0; }
.star { position: absolute; width: 3px; height: 3px; background: #fff; animation: twinkle var(--d) ease-in-out var(--delay) infinite; }
.star.big { box-shadow: 0 -3px #fff, 0 3px #fff, -3px 0 #fff, 3px 0 #fff; animation-name: sparkle; }
.shooting { position: absolute; width: 110px; height: 2px; background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); rotate: -24deg; transform-origin: left center; animation: shoot 1s cubic-bezier(.3, 0, .7, 1) forwards; }
.firefly { position: absolute; width: 4px; height: 4px; background: #E8FF8A; box-shadow: 0 0 8px 2px rgba(232, 255, 138, .6); animation: wander var(--t) ease-in-out var(--d) infinite alternate, blink 2.6s ease-in-out var(--d) infinite; }

.orbit { position: absolute; top: calc(var(--header-h) + 10px); right: 10%; width: 72px; height: 72px; }
.orbit > div { width: 100%; height: 100%; }
.sun-orbit::before { content: ""; position: absolute; inset: -26px; z-index: -1; background: rgba(255, 225, 90, .22); rotate: 45deg; animation: spin 40s linear infinite; opacity: calc((var(--day, 0) - .75) * 4); }
.sun { background: #FFE15A; box-shadow: inset 0 0 0 10px #FFC93A, 0 0 80px rgba(255, 210, 60, .55); opacity: 0; }
.moon { position: relative; background: #F2EED8; box-shadow: inset -12px -12px 0 #D9D3B6, 0 0 60px rgba(242, 238, 216, .3); }
.moon::before, .moon::after { content: ""; position: absolute; background: #D9D3B6; }
.moon::before { width: 14px; height: 14px; left: 14px; top: 16px; }
.moon::after { width: 10px; height: 10px; left: 40px; top: 40px; }

.cloud { position: absolute; left: 0; height: 26px; background: var(--cloud); opacity: var(--cloud-o); animation: drift var(--t) linear var(--d) infinite; transition: background-color 1.4s, opacity 1.4s; }
.cloud::before { content: ""; position: absolute; background: inherit; height: 22px; left: 22%; width: 46%; bottom: 100%; }
.cloud.a { width: 180px; top: 150px; --t: 95s; --d: -20s; }
.cloud.b { width: 240px; top: 90px; --t: 130s; --d: -90s; }
.cloud.c { width: 130px; top: 260px; --t: 80s; --d: -55s; height: 20px; }
.cloud.d { width: 300px; top: 40px; --t: 160s; --d: -10s; height: 30px; }
.cloud.e { width: 110px; top: 330px; --t: 70s; --d: -40s; height: 18px; }

/* ============ Store hero ============ */
.hero { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(240px, 400px) 1fr; gap: 24px 64px; align-items: center; padding-top: 12px; }
.logo { filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .3)); animation: drop .8s cubic-bezier(.3, 1.3, .5, 1) both; cursor: pointer; }
.logo.boing { animation: boing .6s cubic-bezier(.3, 1.6, .5, 1); }
.hero h1 { font-size: clamp(48px, 7vw, 88px); text-shadow: 0 6px 0 var(--pink-dark); animation: rise .6s .2s both; }
.hero p { font-size: 19px; color: var(--hero-text); font-weight: 700; max-width: 36ch; margin: 22px 0 28px; animation: rise .6s .3s both; transition: color 1s; }
/* Server card, styled like an entry in Minecraft's multiplayer list */
.ip { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px 16px; width: min(100%, 460px); padding: 14px; text-align: left; animation: rise .6s .4s both; }
.ip-icon { width: 56px; height: 56px; }
.ip-text strong { display: block; font: 700 19px/1.2 Fredoka, sans-serif; }
.ip-text code { font: 700 17px/1.4 Nunito, sans-serif; color: var(--muted); }
.ip-status { display: grid; justify-items: end; gap: 6px; font-weight: 800; font-size: 14px; color: var(--muted); white-space: nowrap; }
.bars { display: flex; align-items: flex-end; gap: 2px; height: 16px; }
.bars i { width: 4px; background: #555; }
.bars i:nth-child(1) { height: 4px; } .bars i:nth-child(2) { height: 7px; } .bars i:nth-child(3) { height: 10px; } .bars i:nth-child(4) { height: 13px; } .bars i:nth-child(5) { height: 16px; }
.ip.on .bars i { background: #5FD053; animation: bar-in .4s cubic-bezier(.3, 1.6, .5, 1) both; }
.ip.on .bars i:nth-child(2) { animation-delay: .06s; } .ip.on .bars i:nth-child(3) { animation-delay: .12s; } .ip.on .bars i:nth-child(4) { animation-delay: .18s; } .ip.on .bars i:nth-child(5) { animation-delay: .24s; }
.ip.on #players { color: #5FD053; }
[data-theme="light"] .ip.on #players { color: #2E8A24; }
.ip.off .bars i { background: #6B2A33; }
.ip.off .bars i:nth-child(5) { background: #FF5A6E; }
.ip .btn { grid-column: 1 / -1; width: 100%; }
@keyframes bar-in { from { transform: scaleY(0); transform-origin: bottom; } }

/* ============ Shulker shelf ============ */
.shelf { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(6px, 2vw, 40px); max-width: 1800px; margin: 56px auto -8px; padding: 0 clamp(16px, 4vw, 72px); }
/* The row itself lets clicks through (so the bunny and plants under it stay clickable); only the boxes catch them */
.shelf { pointer-events: none; }
.crate { pointer-events: auto; }
.crate { position: relative; isolation: isolate; background: none; border: 0; padding: 0; display: flex; flex-direction: column; align-items: center; animation: rise .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.45s + var(--i) * 60ms); }
/* Width is a whole multiple of the sprite's 16 pixels, so edges never land between screen pixels */
.crate svg { display: block; width: round(down, min(100%, 160px), 16px); height: auto; overflow: visible; transform-origin: 50% 100%; transition: scale .12s; }
.crate:active svg { scale: 1.04 .94; }
/* Lid lifts with a springy ease and drops back down when another box is picked */
/* Ease-out with no overshoot: the lid never rises past the open spot, so no gap shows under it */
/* Glow behind the open box: a plain gradient that fades in (a blur filter would be recomputed every frame) */
.crate::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 40%; width: 180%; aspect-ratio: 1; translate: -50% -50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c3) 55%, transparent), transparent); opacity: 0; transition: opacity .4s; pointer-events: none; }
.crate[aria-pressed="true"]::before { opacity: 1; }
.crate[aria-pressed="true"] .name { animation: name-pop .45s cubic-bezier(.3, 1.8, .5, 1); }
/* The open box's opening, packed with a random pile of rewards. --u is one sprite pixel (set from JS);
   the pile is clipped to sprite columns 2 to 14 (inside the inner walls) and rows 8 to 13 from the top of the drawing. */
.crate .pile { position: absolute; z-index: 1; left: 50%; top: calc(var(--svg-top, 0px) + var(--u, 9px) * 8); width: calc(var(--u, 9px) * 12); height: calc(var(--u, 9px) * 5); margin-left: calc(var(--u, 9px) * -6); overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .12s, scale .12s; transform-origin: 50% calc(var(--u, 9px) * 13); }
.crate[aria-pressed="true"] .pile { opacity: 1; transition-delay: .2s, 0s; }
.crate:active .pile { scale: 1.04 .94; } /* squash with the box (same origin: the box's bottom edge, 13 sprite pixels down) */
.crate .pile img { position: absolute; left: var(--x); top: var(--y); width: calc(var(--u, 9px) * 3.4); height: auto; rotate: var(--r); scale: var(--f, 1) 1; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); translate: 0 -120%; opacity: 0; transition: translate .35s cubic-bezier(.4, 1.5, .6, 1), opacity .1s; transition-delay: calc(.2s + var(--d)); }
.crate[aria-pressed="true"] .pile img { translate: 0 0; opacity: 1; } /* items drop in from above and settle */
.crate .rays {
  position: absolute; z-index: -1; left: 50%; top: -30%; width: 160%; max-width: 200px; aspect-ratio: 1; translate: -50% 0;
  background: repeating-conic-gradient(color-mix(in srgb, var(--c3) 70%, transparent) 0 8deg, transparent 8deg 30deg);
  mask-image: radial-gradient(closest-side, #000 20%, transparent 100%); border-radius: 50%;
  opacity: 0; scale: .3; transition: opacity .4s, scale .6s cubic-bezier(.3, 1.4, .5, 1); animation: spin 16s linear infinite; pointer-events: none; will-change: rotate, opacity;
}
.crate[aria-pressed="true"] .rays { opacity: 1; scale: 1; }
.crate .name { position: absolute; top: calc(100% + 18px); white-space: nowrap; font: 600 clamp(12px, 1.8vw, 17px)/1 Fredoka, sans-serif; background: var(--card); color: var(--text); border: 3px solid #000; border-radius: 2px; padding: 7px 12px; box-shadow: 0 3px 0 #000; transition: background-color .2s, color .2s; }
.crate[aria-pressed="true"] .name { background: var(--c1); color: #000; }
.crate .key-price { position: absolute; top: calc(100% + 58px); font-weight: 800; font-size: 14px; color: #fff; text-shadow: 0 2px 0 #000; }

/* "Most popular" badge, driven by real order counts */
.badge { display: inline-block; font: 600 13px/1 Fredoka, sans-serif; color: #1A0A12; background: #FFD33D; border: 2px solid #000; border-radius: 2px; padding: 4px 8px; box-shadow: 0 2px 0 #000; white-space: nowrap; animation: badge-bob 2.4s ease-in-out infinite; }
.crate .badge { position: absolute; top: -12px; left: -8px; z-index: 3; rotate: -10deg; }
.rank .top .badge { align-self: flex-start; }
@keyframes badge-bob { 50% { translate: 0 -3px; } }

/* ============ Ground ============ */
/* One continuous dirt background behind every section, using the real Minecraft textures */
.ground { position: relative; isolation: isolate; flex: 1; }
.ground::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url(blocks/dirt.png) 0 0 / 48px 48px; image-rendering: pixelated; filter: brightness(var(--tex-dim)); transition: filter 1.4s; }
.grass-top { position: relative; }
.grass-top::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 48px; z-index: 0;
  background: url(blocks/grass_block_side.png) 0 0 / 48px 48px repeat-x;
  image-rendering: pixelated; filter: brightness(var(--tex-dim)); transition: filter 1.4s;
}

/* Plants growing on the grass: they sway, and rustle when touched */
.plants { position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 1; }
.plant { position: absolute; bottom: -3px; width: 32px; height: 32px; image-rendering: pixelated; transform-origin: 50% 100%; filter: brightness(var(--tex-dim)); transition: filter 1.4s; animation: sway var(--d) ease-in-out var(--delay) infinite alternate; }
.plant.rustle { animation: rustle .6s cubic-bezier(.3, 1.4, .5, 1), sway var(--d) ease-in-out var(--delay) infinite alternate; }
@keyframes sway { from { rotate: -2.5deg; } to { rotate: 2.5deg; } }
@keyframes rustle { 20% { transform: rotate(-16deg) scaleY(.9); } 50% { transform: rotate(12deg); } 75% { transform: rotate(-6deg); } }

/* Bunny that hops along the grass */
.bunny-lane { position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 2; }
.bunny { position: absolute; left: 0; bottom: -10px; width: 62px; height: 66px; padding: 0; border: 0; background: none; translate: var(--x, 40px) 0; transition: translate var(--hop, .36s) linear; filter: brightness(calc(.6 + var(--tex-dim) * .4)); }
.bunny .sprite { position: absolute; inset: 0; transform-origin: 50% 100%; }
.bunny.left .sprite { scale: -1 1; }
.bunny img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.bunny .f-hop { opacity: 0; }
.bunny.hopping .f-sit { opacity: 0; }
.bunny.hopping .f-hop { opacity: 1; }
.bunny.hopping .sprite { animation: bunny-hop var(--hop, .36s) ease-out; }
.bunny.boing .sprite { animation: bunny-boing .7s cubic-bezier(.3, 1.4, .5, 1); }
.bunny:not(.hopping):not(.boing) .sprite { animation: breathe 2.4s ease-in-out infinite; }
.heart { position: fixed; z-index: 50; width: 14px; height: 12px; pointer-events: none; margin: -6px 0 0 -7px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h2v1h1V0h2v1h1v2H6v1H5v1H4v1H3V5H2V4H1V3H0V1h1z' fill='%23FF6FA0'/%3E%3C/svg%3E") center / contain no-repeat; image-rendering: pixelated; animation: float-up .9s ease-out forwards; }

/* ============ Crate details ============ */
#crate-detail { padding: 116px 0 40px; }
.crate-card { display: grid; grid-template-columns: 1fr auto; gap: 40px; padding: 36px; align-items: start; }
.crate-card.swap .crate-info, .crate-card.swap .gui-wrap { animation: swap-x .4s cubic-bezier(.2, .8, .2, 1) both; }
.crate-card.swap .gui-wrap { animation-delay: .05s; }
.crate-card h2 { font-size: clamp(36px, 4.5vw, 52px); color: var(--c1); -webkit-text-stroke: 6px #000; paint-order: stroke fill; }
.crate-info .blurb { margin: 14px 0 12px; max-width: 36ch; color: var(--muted); }
.pick { font-weight: 800; margin-bottom: 22px; line-height: 2; }
.pick b { background: var(--c1); color: #000; padding: 1px 8px; border-radius: 2px; border: 2px solid #000; white-space: nowrap; }
.price-line { font-size: 15px; margin-bottom: 20px; }
.price-line strong { font: 700 30px Fredoka, sans-serif; margin-left: 6px; }
.how { margin-top: 18px; max-width: 40ch; }
.swipe-hint { display: none; }

/* Minecraft chest GUI */
.gui-wrap { position: relative; }
.mc-gui { --slot: 40px; position: relative; width: fit-content; background: #C6C6C6; padding: 8px 10px 10px; border-radius: 2px; box-shadow: 0 0 0 3px #000, inset 3px 3px 0 #fff, inset -3px -3px 0 #555, 0 8px 0 3px rgba(0, 0, 0, .35); }
.mc-title { font: 500 18px/1.4 var(--pixel); color: #3F3F3F; margin: 0 0 4px 2px; }
.mc-grid { display: grid; grid-template-columns: repeat(var(--cols, 9), var(--slot)); }
.slot { position: relative; width: var(--slot); height: var(--slot); padding: 0; border: 0; background: #8B8B8B; box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #fff; display: grid; place-items: center; }
/* Icons only at whole multiples of 16px so the pixel art stays even */
.slot img { width: round(down, calc(var(--slot) * .8), 16px); height: round(down, calc(var(--slot) * .8), 16px); image-rendering: pixelated; pointer-events: none; }
.slot[role=button] { cursor: pointer; }
.slot[role=button]:focus-visible { outline: 3px solid var(--pink); outline-offset: -3px; z-index: 2; }
.slot[role=button]:hover::after, .slot.active::after { content: ""; position: absolute; inset: 2px; background: rgba(255, 255, 255, .45); }
.slot .egg { position: absolute; right: 1px; bottom: 1px; width: 50%; height: 50%; }
/* Stack size: small, tucked into the very bottom-right corner over the item, like the game */
.slot .stack { position: absolute; right: calc(var(--slot) * .05); bottom: calc(var(--slot) * .02); z-index: 2; font: 400 calc(var(--slot) * .3)/1 var(--pixel); color: #fff; text-align: right; text-shadow: calc(var(--slot) * .035) calc(var(--slot) * .035) 0 #3F3F3F; pointer-events: none; }
/* Enchantment glint, masked to the item's shape */
.slot.glint::before {
  /* Minecraft's own glint texture, scrolled and blended additively, clipped to the item's shape */
  --icon-size: round(down, calc(var(--slot) * .8), 16px);
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  left: 50%; top: 50%; width: var(--icon-size); height: var(--icon-size); translate: -50% -50%;
  background: url(blocks/glint.png) 0 0 / 64px 64px repeat;
  mix-blend-mode: screen; opacity: .45;
  -webkit-mask: var(--icon) center / 100% 100% no-repeat; mask: var(--icon) center / 100% 100% no-repeat;
  animation: glint 5s linear infinite;
}
.slot.pop img { animation: slot-pop .35s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i) * 30ms); }

/* Minecraft tooltip */
.mc-tip { position: fixed; z-index: 60; left: 0; top: 0; min-width: 160px; max-width: 320px; padding: 5px 9px 7px; pointer-events: none; background: rgba(16, 0, 16, .95); border: 2px solid; border-image: linear-gradient(#5000FFAA, #28007FAA) 1; outline: 2px solid #100010; font: 400 16px/1.4 var(--pixel); color: #fff; text-shadow: 2px 2px 0 rgba(0, 0, 0, .5); opacity: 0; translate: 0 4px; transition: opacity .12s, translate .12s; }
.mc-tip.show { opacity: 1; translate: 0 0; }
.mc-tip p { margin: 0; white-space: nowrap; }
.mc-tip .t-name { margin-bottom: 2px; }
.c-white { color: #fff; } .c-aqua { color: #55FFFF; } .c-gold { color: #FFAA00; } .c-light_purple { color: #FF55FF; }
.c-gray { color: #AAAAAA; } .c-lore { color: #AA00AA; font-style: italic; }
.gui-hint { margin-top: 14px; font-size: 14px; color: var(--muted); }

/* ============ Ranks ============ */
#ranks { padding: 56px 0 96px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 44px; }
.section-head h2 { font-size: clamp(44px, 6vw, 64px); }
.section-head p { margin-top: 14px; }

.ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: end; }
.rank { display: flex; flex-direction: column; overflow: hidden; min-height: calc(340px + var(--lvl) * 30px); --i: var(--lvl); transition: translate .25s cubic-bezier(.3, 1.4, .5, 1), box-shadow .25s; }
.rank:hover { translate: 0 -6px; box-shadow: 0 12px 0 var(--line), 0 28px 50px rgba(0, 0, 0, .3); }
.rank .top { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 20px 22px 16px; background: var(--rc); border-bottom: 3px solid var(--line); }
.rank h3 { font-size: 34px; }
.rank .body { padding: 20px 22px 22px; }
.cost { margin-bottom: 16px; }
.cost .amount { font: 700 34px/1 Fredoka, sans-serif; font-variant-numeric: tabular-nums; }
.cost .per { color: var(--muted); font-weight: 700; font-size: 15px; }
.perks { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 12px; }
.perks li { display: flex; align-items: center; gap: 10px; font-weight: 700; flex-wrap: wrap; }
.perks img { width: 32px; height: 32px; flex: none; image-rendering: pixelated; }
.perks .kit-btn { margin-left: auto; }
.tag { font: 600 14px Fredoka, sans-serif; background: #1A1622; color: var(--rc); border-radius: 2px; padding: 2px 8px; margin-right: 2px; }

.rank.limited { margin-top: 28px; min-height: 0; display: grid; grid-template-columns: minmax(260px, 340px) 1fr; }
.rank.limited .top { border-bottom: 0; border-right: 3px solid var(--line); background: linear-gradient(160deg, #F7A04A, #D9620F); }
.rank.limited .body { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px 32px; padding: 24px 28px; }
.rank.limited .cost, .rank.limited .perks { margin: 0; }
.rank.limited .perks { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 12px 32px; }
.rank.limited .buy { width: auto; grid-column: 2; grid-row: 1; }
.countdown { font: 600 16px Fredoka, sans-serif; color: #2A1100; background: rgba(255, 255, 255, .6); border-radius: 2px; padding: 4px 10px; align-self: flex-start; font-variant-numeric: tabular-nums; }

/* ============ Sub-page hero ============ */
.page-hero { position: relative; z-index: 2; padding: 40px 20px 96px; }
.page-hero h1 { font-size: clamp(48px, 7vw, 80px); text-shadow: 0 6px 0 var(--pink-dark); animation: rise .6s both; }
.page-hero p { color: var(--hero-text); font-weight: 700; font-size: 19px; margin-top: 18px; max-width: 46ch; animation: rise .6s .1s both; transition: color 1s; }
.ground.grass-top { padding: 72px 0 96px; }

/* ============ Leaderboards ============ */
.lb-tabs { display: none; }
.boards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.board { padding: 24px; }
.board-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.board-head img { width: 32px; height: 32px; image-rendering: pixelated; }
.board h2 { font-size: 28px; }
.board ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.board li { display: grid; grid-template-columns: 34px 32px 1fr auto; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 2px; background: var(--card-2); font-weight: 700; transition: translate .2s, background-color .2s; }
.board li:hover { translate: 4px 0; background: var(--hover); }
.board .pos { font: 600 17px Fredoka, sans-serif; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.board li:nth-child(-n+3) .pos { color: #000; border-radius: 2px; padding: 1px 0; border: 2px solid #000; }
.board li:nth-child(1) .pos { background: #FFD33D; }
.board li:nth-child(2) .pos { background: #D5DBE3; }
.board li:nth-child(3) .pos { background: #E09A5C; }
.board li:nth-child(1) { background: color-mix(in srgb, #FFD33D 14%, var(--card-2)); }
.board .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .value { font: 600 18px Fredoka, sans-serif; font-variant-numeric: tabular-nums; }
.head { width: 32px; height: 32px; border-radius: 2px; image-rendering: pixelated; background: var(--track); }
.head.missing { visibility: hidden; }

/* ============ Bans ============ */
.toolbar { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 14px; margin-bottom: 18px; }
.search { position: relative; flex: 1 1 280px; }
.search svg { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--muted); }
.search input { width: 100%; background: var(--input); border: 3px solid var(--input-line); border-radius: 2px; padding: 11px 14px 11px 44px; font-weight: 700; transition: border-color .2s; }
.search input:focus { border-color: var(--pink); outline: none; }
.count { margin-bottom: 14px; }

.ban-table { width: 100%; border-collapse: collapse; }
.ban-table th { text-align: left; font: 600 15px Fredoka, sans-serif; color: var(--muted); padding: 14px 18px; border-bottom: 3px solid var(--line); }
.ban-table td { padding: 14px 18px; border-top: 2px solid var(--card-2); vertical-align: middle; }
.ban-table tr.ban:first-child td { border-top: 0; }
.ban-table tr.ban { animation: fade-up .35s both; animation-delay: calc(var(--i) * 30ms); }
.ban-table .player { display: flex; align-items: center; gap: 12px; font-weight: 800; }
.ban-table .sub { display: block; font-size: 14px; color: var(--muted); font-weight: 600; }
.pill { display: inline-block; font: 600 14px Fredoka, sans-serif; padding: 3px 10px; border-radius: 2px; border: 2px solid #000; white-space: nowrap; }
.pill.active { background: #FF5A6E; color: #000; }
.pill.perm { background: #9B1C31; color: #fff; }
.pill.expired { background: var(--card-2); color: var(--muted); border-color: var(--input-line); }
.history-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 2px 8px; font: 600 13px Fredoka, sans-serif; background: var(--card-2); color: var(--text); border: 2px solid var(--input-line); border-radius: 2px; transition: background-color .2s, border-color .2s; }
.history-btn:hover { border-color: var(--pink); }
.history-btn svg { width: 10px; height: 10px; transition: rotate .3s cubic-bezier(.3, 1.4, .5, 1); }
.history-btn[aria-expanded="true"] { background: var(--pink); color: #1A0A12; border-color: #000; }
.history-btn[aria-expanded="true"] svg { rotate: 180deg; }
.ban-table tr.history td { padding: 0; border-top: 0; }
.history .collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.2, .8, .2, 1); }
.history.open .collapse { grid-template-rows: 1fr; }
.history .collapse > div { overflow: hidden; }
.timeline { list-style: none; margin: 0 18px 18px 34px; padding: 6px 0 0 22px; border-left: 3px solid var(--input-line); display: grid; gap: 12px; }
.timeline li { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: center; }
.timeline li::before { content: ""; position: absolute; left: -31px; top: 6px; width: 13px; height: 13px; background: var(--muted); border: 2px solid #000; }
.timeline li.is-active::before { background: #FF5A6E; }
.history.open .timeline li { animation: slide-in .35s both; animation-delay: calc(var(--i) * 50ms + .05s); }
.empty { padding: 48px 24px; text-align: center; }
.empty h2 { font-size: 26px; margin-bottom: 8px; }
.more { display: flex; justify-content: center; margin-top: 22px; }

footer { background: #0D0C11; color: #A99FB8; font-size: 14px; padding: 28px 0; border-top: 4px solid #000; }
footer .wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
footer a, .page-hero a { color: #8EA1FF; font-weight: 800; }
footer a:hover, .page-hero a:hover { color: #B7C3FF; }
.load-error { background: #5A1522; color: #fff; text-align: center; padding: 14px; font-weight: 800; }

/* ============ Dialogs ============ */
dialog { width: min(440px, calc(100vw - 32px)); padding: 32px; color: var(--text); }
/* Popups: a quick fade and small rise, no bounce */
dialog[open] { animation: dialog-in .18s ease-out; }
@keyframes dialog-in { from { opacity: 0; translate: 0 10px; } }
dialog .slot.pop img { animation: none; } /* kit items are just there, no one-by-one pop */
dialog::backdrop { background: rgba(5, 4, 12, .65); backdrop-filter: blur(4px); animation: fade .25s; }
dialog h2 { font-size: 30px; margin: 4px 0 22px; padding-right: 32px; }
.close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 2px; border: 0; background: var(--card-2); font-size: 22px; line-height: 1; transition: background-color .2s, rotate .3s; }
.close:hover { background: var(--hover); rotate: 90deg; }
dialog label { display: block; font-weight: 800; font-size: 14px; margin: 0 0 6px; }
dialog input { width: 100%; background: var(--input); border: 3px solid var(--input-line); border-radius: 2px; padding: 11px 14px; margin-bottom: 18px; font-weight: 700; }
dialog input:focus { border-color: var(--pink); outline: none; }
dialog input:user-invalid { border-color: #FF5A6E; }
.co-account { display: flex; align-items: center; gap: 14px; margin: 6px 0 18px; padding: 10px 14px 10px 4px; background: var(--card-2); border-radius: 2px; }
.co-account .co-name { font: 700 22px Fredoka, sans-serif; margin: 0 0 2px; word-break: break-all; }
.co-account .muted { margin: 0; }
.co-account .btn { margin-top: 10px; padding: 6px 10px; font-size: 13px; background: var(--hover); }
#co-3d { width: 110px !important; height: 165px !important; flex: none; cursor: grab; touch-action: none; }
#co-skin { width: 70px; height: auto; flex: none; image-rendering: pixelated; margin-left: 10px; }
.co-link { margin: 6px 0 18px; }
.co-link p { margin: 0 0 12px; }
.total { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px solid var(--card-2); padding-top: 16px; margin-bottom: 8px; }
.total strong { font: 700 28px Fredoka, sans-serif; }
.error { color: #E8405A; font-weight: 800; min-height: 1.6em; margin-bottom: 10px; }
#co-form .small { margin-top: 12px; }
#co-done p { margin-bottom: 14px; }
.commands { list-style: none; padding: 12px 14px; margin: 0 0 22px; background: #0E0B13; border-radius: 2px; font: 600 14px/1.6 ui-monospace, Consolas, monospace; color: #B4F6C0; overflow-x: auto; }
#kit { width: fit-content; max-width: calc(100vw - 24px); max-height: 90vh; padding: 58px 24px 28px; } /* top: room for the close button, the GUI carries the title */
#kit .gui-wrap { margin: 0 auto 8px; width: fit-content; max-width: 100%; }
#kit .back { margin-top: 18px; }
#kit #kit-guis > .gui-wrap { animation: fade .18s; }

.spark { position: fixed; z-index: 50; width: 8px; height: 8px; pointer-events: none; margin: -4px 0 0 -4px; animation: spark .7s cubic-bezier(.2, .7, .3, 1) forwards; }

/* ============ Motion ============ */
@keyframes drop { 0% { transform: translateY(-40px); opacity: 0; } 70% { transform: translateY(4px); opacity: 1; } 100% { transform: none; } }
@keyframes boing { 30% { transform: scale(1.06, .94); } 60% { transform: scale(.97, 1.04) translateY(-8px); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } }
@keyframes slide-in { from { opacity: 0; transform: translateX(14px); } }
@keyframes swap-x { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 32px)); } }
@keyframes pop { from { opacity: 0; transform: scale(.95); } }
@keyframes slot-pop { from { opacity: 0; transform: scale(.4); } }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(95, 208, 83, .25); } }
@keyframes twinkle { 50% { opacity: .15; } }
@keyframes sparkle { 0%, 100% { opacity: .9; scale: 1; } 50% { opacity: .2; scale: .5; } }
@keyframes shoot { from { translate: 0 0; opacity: 0; } 10% { opacity: 1; } to { translate: -340px 150px; opacity: 0; } }
@keyframes wander { to { translate: var(--fx) var(--fy); } }
@keyframes blink { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes drift { from { translate: -320px 0; } to { translate: calc(100vw + 40px) 0; } }
@keyframes spin { to { rotate: 405deg; } }

@keyframes glint { to { background-position: 64px -64px; } }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
@keyframes float-up { to { transform: translate(var(--dx), -60px) scale(1.3); opacity: 0; } }
@keyframes name-pop { 40% { transform: scale(1.15) rotate(-3deg); } }
@keyframes bunny-hop { 50% { transform: translateY(-16px); } }
@keyframes bunny-boing { 40% { transform: translateY(-48px) rotate(-10deg); } 75% { transform: translateY(0) scale(1.1, .9); } }
@keyframes breathe { 50% { transform: scale(1.03, .97); } }

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }

/* Theme colors fade smoothly, and a second click mid-fade simply reverses (low specificity so components keep their own transitions) */
:where(body, .card, .seg, .muted, .tag, .pill, .kit-items li, .pf-stats div, .search input, dialog) { transition: background-color .8s, color .8s, border-color .8s; }



/* ============ Big screens: scale everything up so the page fills the width ============ */
@media (min-width: 1400px) {
  body { font-size: 18px; }
  .hero { grid-template-columns: minmax(300px, 520px) 1fr; }
  .hero h1 { font-size: 104px; }
  .hero p { font-size: 22px; }
  .crate-card { padding: 48px 56px; gap: 64px; }
  .crate-card h2 { font-size: 64px; }
  .crate-info .blurb { font-size: 20px; }
  .mc-gui { --slot: 56px; padding: 10px 14px 14px; }
  .mc-title { font-size: 22px; }
  .mc-tip { font-size: 19px; max-width: 380px; }
  .section-head h2 { font-size: 80px; }
  .ladder { gap: 28px; }
  .rank { min-height: calc(400px + var(--lvl) * 36px); }
  .rank h3 { font-size: 42px; }
  .rank .top { padding: 24px 26px 18px; }
  .rank .body { padding: 24px 26px 26px; }
  .cost .amount { font-size: 42px; }
  .perks li { font-size: 19px; }
  .btn { font-size: 19px; padding: 15px 26px; }
  .boards { gap: 32px; }
  .board { padding: 32px; }
  .board h2 { font-size: 34px; }
  .board li { padding: 11px 16px; grid-template-columns: 40px 38px 1fr auto; font-size: 19px; }
  .head { width: 38px; height: 38px; }
  .board .value { font-size: 21px; }
  .page-hero h1 { font-size: 96px; }
}

/* ============ Smaller screens ============ */
@media (max-width: 1000px) {
  .ladder { grid-template-columns: 1fr 1fr; }
  .rank { min-height: 0; }
  .rank.limited { grid-template-columns: 1fr; }
  .rank.limited .top { border-right: 0; border-bottom: 3px solid var(--line); }
  .boards { grid-template-columns: 1fr; }
  .crate-card { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --header-h: 68px; }

  /* Hamburger menu */
  .menu-btn { display: grid; }
  .profile-btn { padding: 0 6px; }
  .profile-btn span { display: none; }

  .nav-pill { display: none; }
  .site-nav {
    position: absolute; top: calc(100% + 8px); left: 16px; right: 16px; margin: 0; flex-direction: column; gap: 2px; padding: 8px;
    background: var(--card); border: 3px solid #000; border-radius: var(--radius); box-shadow: 0 6px 0 #000, 0 24px 48px rgba(0, 0, 0, .4);
    --nav-text: var(--text); visibility: hidden; opacity: 0; transform: translateY(-10px) scale(.97); transform-origin: top right;
    transition: opacity .2s, transform .3s cubic-bezier(.3, 1.3, .5, 1), visibility 0s .3s;
  }
  .site-header.open .site-nav { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .site-nav a { opacity: 1; display: flex; justify-content: space-between; align-items: center; padding: 14px; font-size: 18px; border-radius: 2px; }
  .site-nav a::after { content: ""; width: 8px; height: 8px; border: solid var(--muted); border-width: 3px 3px 0 0; rotate: 45deg; }
  .site-nav a[aria-current="page"] { background: var(--card-2); }
  .site-nav a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; background: var(--pink); }
  .site-nav a:active { background: var(--hover); }
  .site-header.open .site-nav a { animation: slide-in .35s cubic-bezier(.2, .8, .2, 1) both; }
  .site-header.open .site-nav a:nth-of-type(2) { animation-delay: .05s; }
  .site-header.open .site-nav a:nth-of-type(3) { animation-delay: .1s; }
  .site-header.open .site-nav a:nth-of-type(4) { animation-delay: .15s; }
  .site-header.open { background: var(--card); border-bottom-color: #000; --nav-text: var(--text); }

  .hero { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .logo { max-width: 220px; }
  .hero p { margin-inline: auto; }
  .orbit { width: 48px; height: 48px; right: 6%; }
  .cloud.d { display: none; }

  /* Shulkers: one swipeable row on the grass */
  .shelf {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding: 48px 20px 0; margin-top: 16px;
    scrollbar-width: none; mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
  }
  .shelf::-webkit-scrollbar { display: none; }
  .shelf { pointer-events: auto; } /* phones: the row must catch swipes to scroll */
  .shelf { margin-bottom: -86px; }
  .crate { flex: 0 0 96px; scroll-snap-align: center; gap: 10px; }
  .crate .name, .crate .key-price { position: static; }
  .crate-card { padding: 22px 16px; gap: 28px; }
  .mc-gui { --slot: min(40px, calc((100vw - 100px) / 9)); padding: 6px 7px 8px; }
  .wrap { padding: 0 16px; }
  .ip { margin-inline: auto; }
  .gui-wrap { justify-self: center; max-width: 100%; }
  .mc-tip { position: static; translate: none; max-width: none; margin-top: 14px; min-height: 58px; }
  .mc-tip p { white-space: normal; }
  .swipe-hint { display: block; }

  .lb-tabs { display: grid; position: sticky; top: calc(var(--header-h) + 10px); z-index: 5; margin-bottom: 18px; box-shadow: 0 4px 0 var(--line); }
  .lb-tabs button { padding: 9px 4px; font-size: 15px; }
  .board:not(.active) { display: none; }
  .board.slide { animation: swap-x .35s cubic-bezier(.2, .8, .2, 1) both; }

  .toolbar .seg { flex: 1 1 100%; }
  .ban-table thead { display: none; }
  .ban-table, .ban-table tbody, .ban-table tr, .ban-table td { display: block; }
  .ban-table tr.ban { padding: 14px 16px; border-top: 2px solid var(--card-2); }
  .ban-table tr.ban:first-child { border-top: 0; }
  .ban-table td, .ban-table tr.ban:first-child td { border: 0; padding: 4px 0; }
  .ban-table td[data-label]::before { content: attr(data-label); display: block; font-size: 13px; color: var(--muted); font-weight: 700; }
  .timeline { margin: 0 16px 16px 24px; }
  .timeline li { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .brand span { display: none; } /* room for Discord, theme, profile and menu */
}
@media (max-width: 560px) {
  .ladder { grid-template-columns: 1fr; }
  .brand { font-size: 19px; }
  .rank.limited .body { grid-template-columns: 1fr; }
  .rank.limited .buy { width: 100%; grid-column: auto; grid-row: auto; }
  .rank.limited .perks { grid-row: auto; }
  .board li { grid-template-columns: 28px 28px 1fr auto; gap: 8px; }
}

/* Kit popups keep one slot size so the inventory always fits the dialog */
#kit .mc-gui { --slot: min(48px, calc((100vw - 110px) / 9)); }

/* Home: one screen, no scrolling. The sky fills the space above a strip of grass. */
body.home { height: calc(100dvh / var(--fit, 1)); min-height: 0; overflow: hidden; }
body.home .sky { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: 24px; }
body.home .hero { padding-top: 0; }
.home-ground { flex: 0 0 clamp(72px, 12vh, 120px); }
@media (max-width: 760px) {
  body.home .logo { max-width: min(220px, 24vh); }
  body.home .hero p { margin: 12px auto 20px; }
}