@font-face {
  font-family: "Minecraft";
  src: url("../fonts/Minecraft.woff2") format("woff2"), url("../fonts/Minecraft.woff") format("woff");
  font-display: swap;
}
@font-face {
  /* fallback for glyphs the Minecraft font lacks (€, arrows, ·) */
  font-family: "Monocraft";
  src: url("../fonts/Monocraft.ttf") format("truetype");
  font-display: swap;
}

:root {
  --hdr: 64px;
  --ground: 48px;
  --stage: 112px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-cine: cubic-bezier(.16, 1, .3, 1);
  --ink: #3f3f3f;
  --win: #c6c6c6;
  --glow: rgba(255, 196, 92, .75);
  --gui-btn: none; --gui-btn-hi: none; --gui-btn-red: none; --gui-btn-red-hi: none;
  --gui-panel: none; --gui-slot: none; --tex-nylium: none; --glowstone: none;
  --vine: none; --vine-tip: none;
  --xp-bg: none; --xp-fg: none; --boss-bg: none; --boss-fg: none; --toast-bg: none;
  color-scheme: dark;
  interpolate-size: allow-keywords;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 16px); overflow-x: hidden; overflow-x: clip; }
main, .foot { overflow-x: clip; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: #1c0306;
  color: #fff;
  font-family: "Minecraft", "Monocraft", ui-monospace, monospace;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 640px) { body { font-size: 14px; } }
a { color: inherit; }
img, .icon, canvas, .mc-btn, .window, .slot, .stack, .lvl, .vine, .glowstone { image-rendering: pixelated; }
::selection { background: #c62828; color: #fff; }
button { font: inherit; }

/* ---------- scene layers ---------- */
canvas#bg, canvas#anim, canvas#mid { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; }
#vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 85% 75% at 50% 45%, transparent 55%, rgba(8, 0, 2, .62) 100%),
              linear-gradient(transparent 70%, rgba(40, 0, 4, .35)); }
canvas#front { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 34; pointer-events: none; display: block; }
canvas#fg { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; z-index: 30; pointer-events: none; display: block; }
#steve { position: fixed; left: 0; top: 0; z-index: 31; cursor: pointer; opacity: 0; transition: opacity .6s; will-change: transform; }
#steve.ready { opacity: 1; }
#torch { position: fixed; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; z-index: 33; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 170, 80, .1), rgba(255, 120, 40, .04) 40%, transparent 70%);
  opacity: 0; transition: opacity .5s; will-change: transform; }
#torch.on { opacity: 1; }
@media (hover: none) { #torch { display: none; } }

/* cinematic intro: letterbox + fade from black */
.lb { position: fixed; left: 0; right: 0; height: 13vh; background: #000; z-index: 90; pointer-events: none; transition: transform 1.1s var(--ease-cine) .25s; }
.lb.top { top: 0; } .lb.bot { bottom: 0; }
#fade { position: fixed; inset: 0; background: #000; z-index: 89; pointer-events: none; transition: opacity .8s ease; }
.ready .lb.top { transform: translateY(-100%); }
.ready .lb.bot { transform: translateY(100%); }
.ready #fade { opacity: 0; }

/* ---------- Minecraft scrollbars ---------- */
.scroller-x { scrollbar-width: thin; scrollbar-color: #c6c6c6 #555; }
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: #1c0306; }
::-webkit-scrollbar-thumb { background: #c6c6c6; border: 2px solid #000; box-shadow: inset 2px 2px #fff, inset -2px -2px #555; }
.scroller-x::-webkit-scrollbar-track { background: #8b8b8b; box-shadow: inset 2px 2px #373737, inset -2px -2px #fff; }
html { scrollbar-color: #8b2a2a #1c0306; }

/* ---------- Buttons (vanilla widget/button.png, 9-slice) ---------- */
.mc-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 3px 14px;
  color: #fff;
  text-decoration: none;
  text-shadow: 2px 2px 0 #3f3f3f;
  white-space: nowrap;
  cursor: pointer;
  border: 6px solid transparent;
  border-image: var(--gui-btn) 3 fill / 6px stretch;
  background: #6f6f6f padding-box;
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition: transform .3s var(--ease), filter .35s var(--ease);
  user-select: none;
}
.mc-btn:hover, .mc-btn:focus-visible {
  border-image-source: var(--gui-btn-hi);
  color: #ffffa0;
  text-shadow: 2px 2px 0 #3f3f28;
  filter: drop-shadow(0 0 10px var(--glow)) brightness(1.08);
  transform: translate(var(--mx, 0px), calc(var(--my, 0px) - 2px));
}
.mc-btn:active { transform: translate(var(--mx, 0px), calc(var(--my, 0px) + 1px)) scale(.98); filter: brightness(.95); }

/* cursor follower: glides after the crosshair and wraps whatever you hover */
#follow {
  position: fixed; left: 0; top: 0; z-index: 28; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); pointer-events: none; width: 10px; height: 10px;
  border: 2px solid rgba(255, 255, 255, .55); opacity: 0; transition: opacity .3s, border-color .3s, background-color .3s, box-shadow .3s;
}
#follow.on { opacity: 1; }
#follow.hot { -webkit-backdrop-filter: none; backdrop-filter: none; border-color: rgba(255, 255, 255, .9); background-color: rgba(255, 255, 255, .05); box-shadow: 0 0 18px rgba(255, 200, 110, .45), inset 0 0 10px rgba(255, 200, 110, .2); }
.mc-btn:focus-visible { outline: none; }
.slot:focus-visible, .ip-box:focus-visible, .splash:focus-visible, summary:focus-visible { outline: 3px solid #ffff55; outline-offset: 2px; }
.mc-btn.red { border-image-source: var(--gui-btn-red); background-color: #a31f1f; }
/* glow pulse animates only opacity of a pseudo-element: composited, no per-frame repaint */
.mc-btn.red::after { content: ""; position: absolute; inset: -6px; pointer-events: none; box-shadow: 0 0 14px 2px rgba(255, 140, 60, .5); opacity: .35; animation: lit 3.2s ease-in-out infinite; }
.mc-btn.red:hover, .mc-btn.red:focus-visible { border-image-source: var(--gui-btn-red-hi); }
.mc-btn.big { min-height: 52px; font-size: 1.2em; width: 100%; }
.mc-btn[aria-current="page"], .tabs .mc-btn[aria-selected="true"] { border-image-source: var(--gui-btn-red-hi); background-color: #8f1d1d; color: #fff; }
@keyframes lit { 50% { opacity: .9; } }

/* ---------- glowstone + vines ---------- */
/* glowstone clusters grow up OUT of the window's top frame edge: attached, never over content */
.gs-cluster { --s: 20px; position: absolute; top: -8px; width: 0; height: 0; z-index: 6; pointer-events: none; }
.gs-cluster::before {
  content: ""; position: absolute; left: -110px; top: -150px; width: 220px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle at 50% 70%, rgba(255, 214, 120, .5), rgba(255, 170, 70, .2) 35%, rgba(255, 120, 40, .06) 55%, transparent 70%);
  animation: halo 3.6s ease-in-out infinite;
}
.gs {
  position: absolute; width: var(--s); height: var(--s);
  left: calc(var(--x) * var(--s) - var(--s) / 2); top: calc((var(--y) - 1) * var(--s));
  background: var(--glowstone) center / 100% 100%;
  box-shadow: 0 0 14px 3px rgba(255, 210, 110, .75);
  animation: flicker 2.8s ease-in-out infinite;
}
.gs-cluster.tl { left: 46px; } .gs-cluster.tr { right: 46px; }
.gs-cluster.tr::before { animation-delay: -1.8s; }
.modal .gs-cluster { display: none; }
@media (max-width: 640px) { .gs-cluster { --s: 14px; } .gs-cluster::before { transform: scale(.6); } }
.win-vines { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
@media (max-width: 1240px) { .win-vines { display: none; } }
@keyframes flicker { 0%, 100% { opacity: 1; } 47% { opacity: .9; } 50% { opacity: 1; } 53% { opacity: .93; } }
@keyframes halo { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.12); opacity: 1; } }
.vine {
  position: absolute; top: 0; width: 32px; z-index: 4; pointer-events: none;
  background: var(--vine-tip) bottom / 32px 32px no-repeat, var(--vine) top / 32px 32px repeat-y;
  transform-origin: 50% 0; animation: sway 5s ease-in-out infinite alternate;
  filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, .35));
}
.vine.thin { width: 24px; background-size: 24px 24px, 24px 24px; opacity: .9; }
@keyframes sway {
  0% { transform: rotate(-7deg) skewX(2deg); }
  50% { transform: rotate(1deg) skewX(-1deg); }
  100% { transform: rotate(7deg) skewX(-2deg); }
}

/* ---------- Header: logo | centred nav | cart + options; nav drops to its own centred row when tight ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "brand nav opts";
  align-items: center; column-gap: 16px; row-gap: 8px;
  padding: 10px max(20px, env(safe-area-inset-right)) 10px max(20px, env(safe-area-inset-left));
  background: linear-gradient(rgba(14, 2, 4, .92), rgba(22, 3, 6, .76));
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  border-bottom: 3px solid #000;
  box-shadow: 0 3px 0 rgba(255, 80, 80, .14), 0 10px 30px rgba(0, 0, 0, .45);
}
.topbar .vines { position: absolute; left: 0; right: 0; top: 100%; height: 0; pointer-events: none; }
.brand { grid-area: brand; justify-self: start; display: flex; align-items: center; text-decoration: none; }
.brand span { display: none; }
.brand-block { width: 56px; height: 38px; background: url("../img/logo.png") center / contain no-repeat; image-rendering: auto; filter: drop-shadow(0 0 8px rgba(255, 80, 60, .45)); transition: transform .5s var(--ease); }
.brand:hover .brand-block { transform: scale(1.1) rotate(-4deg); }
.nav { grid-area: nav; display: flex; gap: 6px; justify-content: safe center; overflow-x: auto; scrollbar-width: none; min-width: 0; max-width: 100%; padding: 4px 2px; }
.nav::-webkit-scrollbar { display: none; }
.nav .mc-btn { min-height: 38px; padding: 0 14px; flex: none; }
.hdr-opts { grid-area: opts; justify-self: end; display: flex; align-items: center; gap: 8px; }
.icon-btn { min-height: 38px; min-width: 42px; padding: 0 10px; gap: 6px; }
.cart-btn .lbl { margin-right: 2px; }
.opts-menu { position: relative; }
.opts-pop {
  position: absolute; right: -4px; top: calc(100% + 12px); z-index: 50; width: 210px; display: grid; gap: 8px; padding: 12px;
  color: var(--ink); border: 8px solid transparent; border-image: var(--gui-panel) 4 fill / 8px stretch; background: var(--win) padding-box;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .55);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.96); filter: blur(6px); transform-origin: 90% 0;
  transition: opacity .25s var(--ease), transform .35s var(--ease-cine), filter .25s, visibility 0s .3s;
}
.opts-menu.open .opts-pop { opacity: 1; visibility: visible; transform: none; filter: none; transition: opacity .25s var(--ease), transform .35s var(--ease-cine), filter .25s; }
.opts-menu.open #optsBtn { border-image-source: var(--gui-btn-hi); }
.pop-title { font-size: .9em; color: var(--ink); padding: 0 2px 4px; border-bottom: 2px solid #a8a8a8; }
.opts-pop .mc-btn { width: 100%; min-height: 38px; }
@media (max-width: 960px) {
  .topbar { grid-template-columns: 1fr auto; grid-template-areas: "brand opts" "nav nav"; padding-top: 8px; padding-bottom: 6px; }
  .nav { justify-self: stretch; padding: 2px 12px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); }
}
@media (max-width: 640px) {
  .topbar { padding-left: 12px; padding-right: 12px; column-gap: 10px; }
  .brand-block { width: 48px; height: 32px; }
  .nav .mc-btn { min-height: 34px; padding: 0 11px; }
  .icon-btn { min-height: 34px; }
  .cart-btn .lbl { display: none; }
}

/* ---------- Windows (vanilla demo_background panel) ---------- */
.window {
  position: relative;
  color: var(--ink);
  border: 8px solid transparent;
  border-image: var(--gui-panel) 4 fill / 8px stretch;
  background: var(--win) padding-box;
  padding: 10px 12px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, .5);
}
.window::after { /* warm light spilling from the glowstone clusters */
  content: ""; position: absolute; inset: -8px; pointer-events: none; z-index: 2;
  background: radial-gradient(circle at 20px 10px, rgba(255, 200, 110, .3), transparent 260px),
              radial-gradient(circle at calc(100% - 40px) 10px, rgba(255, 200, 110, .3), transparent 260px);
}
.win-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 12px; position: relative; z-index: 5; }
.win-title { margin: 0; display: flex; align-items: center; gap: 10px; font-size: clamp(18px, 2.2vw, 24px); font-weight: normal; color: var(--ink); }
.win-sub { color: #555; font-size: .85em; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.tabs .mc-btn { min-height: 36px; padding: 1px 10px; }
@media (max-width: 640px) { .tabs { margin-left: 0; width: 100%; } .tabs .mc-btn { flex: 1; padding: 0 6px; } }
.win-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding-top: 10px; border-top: 2px solid #8b8b8b; font-size: .8em; color: #2b2b2b; }
.win-foot span { padding: 3px 8px; background: #b3b3b3; border: 2px solid #8b8b8b; }
.win-foot b { font-weight: normal; color: #8f1d1d; }

.panel { background: #b3b3b3; border: 2px solid #8b8b8b; box-shadow: inset 2px 2px #d8d8d8; padding: 12px; color: var(--ink); min-width: 0; position: relative; }
.panel-h { margin: 0 0 10px; font-size: 1em; font-weight: normal; color: var(--ink); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.panel-h small { font-size: .8em; color: #555; }
.panel .panel-h:not(:first-child) { margin-top: 14px; }
.note { margin: 10px 0 0; font-size: .88em; color: #2b2b2b; }
.muted { color: #a8a8a8; }
.small { font-size: .8em; }
.right { text-align: right; }
code.cmd { background: #000; color: #ffff55; padding: 0 6px; font-family: inherit; font-size: .95em; white-space: nowrap; }

/* cards = vanilla tooltip (dark purple-black with purple gradient rim) */
.card {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; min-width: 0;
  background: rgba(16, 0, 16, .94); color: #fff;
  border: 2px solid transparent;
  border-image: linear-gradient(#5000ff, #28007f) 1;
  box-shadow: 0 0 0 2px rgba(16, 0, 16, .94);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.card:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-5px); box-shadow: 0 0 0 2px rgba(16, 0, 16, .94), 0 16px 30px rgba(0, 0, 0, .45), 0 0 28px rgba(255, 180, 80, .25); }
.card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 220, 160, .14), transparent 55%); }
.card:hover::before { opacity: 1; }
.card h3 { margin: 0; font-size: 1.15em; font-weight: normal; }
.card-head { display: flex; align-items: center; gap: 12px; }
.card .mc-btn { margin-top: auto; }
.btns { display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.btns .mc-btn { flex: 1; margin-top: 0; }
.price { font-size: 1.7em; line-height: 1.1; text-shadow: 2px 2px 0 #3f3f3f; }
.price small { font-size: .5em; color: #a8a8a8; margin-left: 6px; text-shadow: none; }
.strike { text-decoration: line-through; color: #8a8a8a; }
.badge { position: absolute; top: -13px; right: 10px; padding: 0 8px; background: #ffaa00; color: #2a1600; border: 2px solid #000; font-size: .78em; z-index: 2; }
.badge.green { background: #55ff55; color: #0a2a0a; }
.list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: .92em; color: #e0e0e0; }
.list.plus li::before { content: "+ "; color: #55ff55; }
.grid { display: grid; gap: 18px 14px; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); padding-top: 14px; }
.grid.gems { grid-template-columns: repeat(auto-fill, minmax(min(160px, 46%), 1fr)); }

/* slots (vanilla container/slot.png) */
.stack, .slot, .lvl { border: 2px solid transparent; border-image: var(--gui-slot) 1 fill / 2px stretch; background: #8b8b8b padding-box; }
.stack { position: relative; flex: none; width: 52px; height: 52px; display: grid; place-items: center; }
.stack b { position: absolute; right: 2px; bottom: -2px; font-weight: normal; color: #fff; text-shadow: 2px 2px #3f3f3f; font-size: .85em; }
.icon { display: inline-block; width: 32px; height: 32px; background: var(--ic) center / contain no-repeat; flex: none; }
.icon.sm { width: 20px; height: 20px; }

/* stat rows / motion graphs: vanilla boss bar (red) */
.row { display: grid; grid-template-columns: minmax(0, 9em) 1fr 3.6em; gap: 10px; align-items: center; font-size: .88em; }
.row b { font-weight: normal; text-align: right; }
.row .rate { display: block; font-size: .85em; color: #555; }
.card .row .rate { color: #a8a8a8; }
.bar { position: relative; height: 10px; background: #2b0505 var(--boss-bg) 0 0 / 100% 100%; }
.bar > span { position: absolute; inset: 0; background: #d32020 var(--boss-fg) 0 0 / 100% 100%; clip-path: inset(0 calc((1 - var(--v)) * 100%) 0 0); }
.chart { display: grid; gap: 10px; }

/* ---------- Title screen (home) ---------- */
.title-screen { display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 3vh, 32px); width: 100%; padding: clamp(6px, 3vh, 30px) 4px 10px; }
.logo-wrap { position: relative; text-align: center; padding: 0 4px; }
.logo { margin: 0; line-height: 0; }
.logo img {
  width: clamp(230px, 38vw, 470px); height: auto; display: block;
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .6)) drop-shadow(0 0 26px rgba(255, 60, 40, .35));
  animation: bob 5s ease-in-out infinite;
}
.ready .logo img { animation: logo-in 1.6s var(--ease-cine) both, bob 5s ease-in-out 1.6s infinite; }
@keyframes logo-in { from { opacity: 0; filter: blur(18px); transform: scale(1.3) translateY(14px); } }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-.6deg); } }
.splash {
  position: absolute; right: -10%; top: 62%;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: #ffff55; text-shadow: 2px 2px 0 #3f3f15; white-space: nowrap;
  font-size: clamp(13px, 1.7vw, 20px);
  transform: rotate(-16deg);
  animation: splash .45s ease-in-out infinite alternate;
  transition: opacity .25s, filter .25s;
}
.splash.swap { opacity: 0; filter: blur(6px); }
@keyframes splash { from { transform: rotate(-16deg) scale(1); } to { transform: rotate(-16deg) scale(1.08); } }
@media (max-width: 640px) { .splash { right: -2%; top: 78%; } }
.tagline { margin: .6em 0 0; color: #ffe0e0; text-shadow: 2px 2px 0 #000; font-size: clamp(14px, 1.6vw, 18px); }
.ts-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; width: min(1000px, 100%); align-items: start; }
@media (max-width: 760px) { .ts-grid { grid-template-columns: minmax(0, 1fr); } }
.ts-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; position: relative; }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.ip-box {
  position: relative; display: grid; gap: 2px; text-align: left; width: 100%; padding: 12px 14px; color: #fff; cursor: pointer;
  background: rgba(0, 0, 0, .7); border: 2px solid #a0a0a0; outline: 2px solid #000;
  transition: transform .4s var(--ease), border-color .3s, background .3s, box-shadow .4s var(--ease);
}
.ip-box:hover { border-color: #fff; transform: translateY(-3px); background: rgba(0, 0, 0, .8); box-shadow: 0 0 26px rgba(255, 190, 90, .3); }
.ip-box:active { transform: scale(.98); }
.ip-box.copied { border-color: #55ff55; box-shadow: 0 0 26px rgba(85, 255, 85, .25); }
.ip-label { color: #b8b8b8; font-size: .82em; }
.ip { font-size: 1.55em; text-shadow: 2px 2px 0 #3f3f3f; word-break: break-all; }
.ip-hint { display: inline-block; color: #ffff55; font-size: .8em; transition: opacity .22s var(--ease), transform .3s var(--ease), filter .22s, color .3s; }
.ip-box.copied .ip-hint { color: #55ff55; }
.ip-hint.out { opacity: 0; transform: translateY(-8px) scale(.9); filter: blur(4px); }
.ip-hint.in-from { opacity: 0; transform: translateY(8px) scale(.9); filter: blur(4px); transition: none; }
.ip-box.dark { background: rgba(16, 0, 16, .94); border-color: #5000ff; }
.ip-box.dark:hover { border-color: #b080ff; }
.ip-box.dark.copied { border-color: #55ff55; }
.ip-pair { display: grid; grid-template-columns: 1fr auto; gap: 12px; }

.trailer {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; text-decoration: none; cursor: pointer; width: 100%; text-align: left; color: #fff;
  background: linear-gradient(90deg, rgba(120, 40, 0, .9), rgba(40, 0, 6, .9));
  border: 2px solid #ffaa00; outline: 2px solid #000;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.trailer:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 0 34px rgba(255, 140, 0, .45); }
.trailer b { display: block; font-weight: normal; color: #ffaa00; text-shadow: 2px 2px 0 #3a1a00; }
.trailer small { color: #fff; font-size: .85em; }
.trailer .play { margin-left: auto; width: 36px; height: 36px; display: grid; place-items: center; background: #a31f1f; border: 2px solid #000; }

.server {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 12px; padding: 10px;
  background: rgba(0, 0, 0, .7); border: 2px solid #808080; outline: 2px solid #000;
}
.server img { width: 64px; height: 64px; grid-row: span 2; background: var(--tex-nylium) center / cover; }
.sv-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; min-width: 0; }
.sv-name { color: #fff; text-shadow: 2px 2px 0 #3f3f3f; }
.sv-right { display: flex; align-items: center; gap: 8px; color: #a8a8a8; font-size: .9em; white-space: nowrap; }
.sv-motd { color: #d8d8d8; font-size: .88em; min-height: 2.8em; white-space: pre-line; overflow-wrap: anywhere; }
.bars { display: flex; align-items: flex-end; gap: 1px; height: 14px; }
.bars i { width: 3px; background: #55ff55; box-shadow: 1px 1px 0 #003300; }
.bars i:nth-child(1) { height: 3px; } .bars i:nth-child(2) { height: 6px; } .bars i:nth-child(3) { height: 9px; } .bars i:nth-child(4) { height: 12px; } .bars i:nth-child(5) { height: 14px; }
.bars.pinging i { background: #3f3f3f; animation: ping 1.2s steps(1) infinite; }
.bars.pinging i:nth-child(2) { animation-delay: .2s; } .bars.pinging i:nth-child(3) { animation-delay: .4s; } .bars.pinging i:nth-child(4) { animation-delay: .6s; } .bars.pinging i:nth-child(5) { animation-delay: .8s; }
@keyframes ping { 0%, 40% { background: #55ff55; } 41%, 100% { background: #3f3f3f; } }
.bars.off i { background: #555; }
.bars.off i:nth-child(5) { background: #ff5555; }
.chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip { padding: 1px 8px; background: #2b2b2b; border: 2px solid #000; color: #fff; font-size: .8em; }
.chip.ok { color: #55ff55; } .chip.bad { color: #ff7777; }

.smp-text { margin: 0 0 12px; font-size: .92em; color: #2b2b2b; position: relative; z-index: 5; }
.slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 6px 10px; min-width: 0; overflow: hidden; white-space: nowrap; font-size: .8em !important; text-decoration: none; cursor: default;
  color: #fff; text-shadow: 2px 2px 0 #3f3f3f; font-size: .86em;
  transition: transform .35s var(--ease), background-color .3s;
}
a.slot { cursor: pointer; }
.slot:hover { background-color: #c5c5c5; transform: translateY(-3px) scale(1.05); }
.slot .icon { transition: transform .45s var(--ease), filter .3s; }
.slot:hover .icon { transform: scale(1.2) rotate(-8deg); filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .3)); }

/* ---------- Store ---------- */
.cos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 46%), 1fr)); gap: 6px; }
.cos {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; min-width: 0; text-decoration: none;
  background: rgba(0, 0, 0, .78); color: #fff; font-size: .88em;
  transition: transform .35s var(--ease), box-shadow .3s;
}
.cos:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px #fff; }
.cos .sw { width: 16px; height: 16px; flex: none; border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.cos .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cos .pr { margin-left: auto; color: #ffff55; white-space: nowrap; }
.cos .tg { color: #aaa; } .cos .tg b { font-weight: normal; color: #fff; }
.sub-h { margin: 14px 0 8px; font-size: 1em; font-weight: normal; color: var(--ink); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.count-pill { background: #8f1d1d; color: #fff; padding: 0 6px; border: 2px solid #000; font-size: .8em; }
.gem-card { align-items: center; text-align: center; gap: 8px; padding: 14px 10px; }
.gem-card .price { font-size: 1.35em; }
.gem-card .mc-btn { width: 100%; }

/* ---------- Battle Pass ---------- */
.pass-grid { display: grid; gap: 18px 14px; grid-template-columns: repeat(12, minmax(0, 1fr)); padding-top: 14px; }
.span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; } .span-7 { grid-column: span 7; } .span-12 { grid-column: 1 / -1; }
@media (max-width: 1000px) { .span-4 { grid-column: span 6; } .span-4.last { grid-column: 1 / -1; } }
@media (max-width: 820px) { .pass-grid > * { grid-column: 1 / -1 !important; } }
.poster {
  position: relative; display: block; width: 100%; aspect-ratio: 21 / 8; padding: 0; cursor: pointer; overflow: hidden; color: #fff; text-align: left;
  border: 2px solid #ffaa00; outline: 2px solid #000;
  background: #2a0a00 var(--poster) center / cover;
}
.poster::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 0, 2, .85), rgba(20, 0, 2, .2) 60%, rgba(20, 0, 2, .5)); transition: opacity .5s; }
.poster:hover::before { opacity: .6; }
.poster .p-txt { position: absolute; left: 20px; bottom: 16px; right: 120px; z-index: 1; }
.poster .p-txt b { display: block; font-weight: normal; font-size: clamp(18px, 2.4vw, 28px); color: #ffaa00; text-shadow: 2px 2px #3a1a00; }
.poster .p-txt small { color: #f0f0f0; text-shadow: 2px 2px #000; }
.poster .p-play { position: absolute; right: 22px; top: 50%; width: 72px; height: 72px; margin-top: -36px; z-index: 1; display: grid; place-items: center; font-size: 26px;
  background: #a31f1f; border: 3px solid #000; box-shadow: inset 3px 3px rgba(255, 255, 255, .3), 0 0 30px rgba(255, 120, 40, .6); transition: transform .45s var(--ease); }
.poster:hover .p-play { transform: scale(1.12); }
@media (max-width: 640px) {
  .poster { aspect-ratio: 4 / 3; }
  .poster .p-txt { right: 14px; left: 14px; bottom: 12px; }
  .poster .p-play { top: 38%; right: 50%; margin-right: -30px; width: 60px; height: 60px; }
}
.xp { display: grid; gap: 6px; }
.xplvl { text-align: center; color: #80ff20; font-size: 1.8em; line-height: 1; text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000; transition: transform .3s var(--ease); }
.xplvl.up { transform: scale(1.4); }
.xpbar { position: relative; width: 100%; aspect-ratio: 182 / 5; background: #1c1c1c var(--xp-bg) 0 0 / 100% 100%; }
.xpbar > span { position: absolute; inset: 0; background: #5cd02a var(--xp-fg) 0 0 / 100% 100%; clip-path: inset(0 100% 0 0); }
.xp-meta { display: flex; justify-content: space-between; font-size: .8em; color: #3a3a3a; }
.reset { display: flex; justify-content: space-between; align-items: end; gap: 10px; }
.reset .muted { color: #3a3a3a; }
.count { font-size: 1.5em; color: #8f1d1d; font-variant-numeric: tabular-nums; }
.week { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: 10px; }
.week span { padding: 4px 0; text-align: center; font-size: .76em; background: #373737; color: #e8e8e8; border: 2px solid #000; }
.week span.claim { background: #7a1a1a; color: #fff; }
.week .now { position: absolute; top: -6px; bottom: -6px; width: 4px; margin-left: -2px; left: var(--p, 0%); background: #ffff55; box-shadow: 0 0 0 2px #000, 0 0 12px #ffff55; transition: left .6s var(--ease); }
.track { overflow-x: auto; padding-bottom: 8px; }
.lane { display: flex; gap: 4px; align-items: center; margin-bottom: 6px; width: max-content; }
.lane-l { position: sticky; left: 0; z-index: 1; width: 8.2em; padding: 8px; background: #373737; color: #fff; border: 2px solid #000; font-size: .8em; }
.lane-l.prem { color: #ffaa00; }
.lvl { position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center; color: #fff; text-shadow: 2px 2px #3f3f3f; font-size: .8em; transition: transform .3s var(--ease); }
.lvl:hover { transform: scale(1.15); z-index: 2; }
.lane.free .lvl { border-image: var(--gui-slot) 1 / 2px stretch; background-color: #4f8f2a; }
.lane.prem .lvl { border-image: var(--gui-slot) 1 / 2px stretch; background-color: #9a5a12; }
.lvl.off { opacity: .32; background-color: #6a6a6a !important; }
.lvl.key { background-color: #b32020 !important; box-shadow: 0 0 14px rgba(255, 80, 60, .6); }
.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.step { display: flex; gap: 10px; align-items: flex-start; padding: 10px; background: rgba(16, 0, 16, .94); color: #fff; border: 2px solid transparent; border-image: linear-gradient(#5000ff, #28007f) 1; font-size: .9em; }
.step b { font-weight: normal; color: #ffaa00; }
.step .n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; background: #a31f1f; border: 2px solid #000; color: #fff; text-shadow: 2px 2px #3f0000; }

/* ---------- Join ---------- */
.join-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 860px) { .join-grid { grid-template-columns: minmax(0, 1fr); } }
.join-main { display: grid; gap: 12px; min-width: 0; }
.join-main .steps { grid-template-columns: minmax(0, 1fr); }
.bedrock-only { display: none; }
[data-edition="bedrock"] .bedrock-only { display: inline; }
.staff .roles { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.staff .roles span { padding: 1px 8px; background: #373737; color: #fff; border: 2px solid #000; font-size: .82em; }
.faq { min-width: 0; }
.faq details { background: rgba(16, 0, 16, .94); color: #fff; border: 2px solid transparent; border-image: linear-gradient(#5000ff, #28007f) 1; margin-bottom: 6px; }
.faq summary { cursor: pointer; padding: 10px 12px; list-style: none; display: flex; justify-content: space-between; gap: 10px; font-size: .92em; transition: color .3s; }
.faq summary:hover { color: #ffffa0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: #ffff55; transition: transform .4s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 12px 12px; color: #e0e0e0; font-size: .88em; }
.faq details a { color: #ff8a8a; }
.faq details::details-content { height: 0; overflow: clip; transition: height .45s var(--ease), content-visibility .45s allow-discrete; }
.faq details[open]::details-content { height: auto; }
.legal { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: .82em; }
.legal a { color: #2b2b2b; }

/* ---------- Cart, checkout, perks, legal ---------- */
button.cos { font: inherit; border: 0; text-align: left; cursor: pointer; width: 100%; }
.cart-btn b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; background: #3f3f3f; color: #fff; font-weight: normal; font-size: .85em; }
.cart-btn.has b { background: #c62828; }
.cart-btn.bump { animation: bump .55s var(--ease-cine); }
@keyframes bump { 30% { transform: scale(1.2) rotate(-5deg); } }
.fly-item { position: fixed; left: 0; top: 0; z-index: 95; width: 32px; height: 32px; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.fly-item .icon, .fly-item .sw { width: 32px; height: 32px; }
.sw.big { display: block; width: 28px; height: 28px; border: 2px solid #000; }
.cart-list, .cart-foot, .co-grid, .checkout-msg, .perks-body, .legal-body, .tv-wrap, .modal .note { position: relative; z-index: 5; }
.cart-list { display: grid; gap: 6px; max-height: 50vh; overflow: auto; }
.cart-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 6px; background: #b3b3b3; border: 2px solid #8b8b8b; animation: pop-in .45s var(--ease-cine) both; }
.cr-name { color: #1f1f1f; overflow-wrap: anywhere; } .cr-name small { display: block; color: #555; font-size: .78em; }
.cr-price { color: #8f1d1d; }
.qty { display: flex; gap: 4px; }
.mc-btn.sq { min-height: 32px; min-width: 34px; padding: 0 8px; }
.empty { text-align: center; color: #3a3a3a; padding: 22px 10px; }
.cart-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; }
.cart-foot b { color: #8f1d1d; font-weight: normal; font-size: 1.3em; }
.mc-btn:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(1); animation: none; }
.co-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; margin-bottom: 12px; }
.co-preview { position: relative; width: 120px; height: 170px; background: radial-gradient(ellipse at 50% 85%, rgba(0, 0, 0, .35), transparent 60%), #8b8b8b; border: 2px solid #000; box-shadow: inset 2px 2px #373737, inset -2px -2px #fff; }
.co-preview #coSteve { position: absolute; inset: 0; width: 120px !important; height: 170px !important; transition: opacity .2s; }
.co-preview #coFx { position: absolute; left: -25px; top: -30px; width: 170px; height: 200px; pointer-events: none; image-rendering: pixelated; }
.tabs.left { margin: 0 0 8px; }
.mc-field { display: grid; gap: 4px; color: var(--ink); font-size: .85em; }
.mc-field input { font: inherit; font-size: 1.15em; color: #fff; background: #000; border: 2px solid #a0a0a0; padding: 8px 10px; outline: none; width: 100%; border-radius: 0; }
.mc-field input:focus { border-color: #fff; box-shadow: 0 0 14px rgba(255, 200, 110, .4); }
.checkout-msg { min-height: 1.4em; margin: 10px 0 0; font-size: .9em; color: #2b2b2b; }
.checkout-msg.bad { color: #a00000; } .checkout-msg.ok { color: #1d6b1d; }
.modal .note a { color: #8f1d1d; }
.perk-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 12px; margin-top: 10px; }
.legal-body { max-height: min(66vh, 680px); overflow: auto; padding: 18px 22px; background: #f2e6c9; color: #2a1d0a; border: 2px solid #8a6a3a; box-shadow: inset 0 0 30px rgba(120, 80, 30, .25); font-size: .92em; }
.legal-body h2 { margin: 0 0 4px; font-weight: normal; color: #5a1010; }
.legal-body h3 { margin: 16px 0 4px; font-weight: normal; color: #5a1010; }
.legal-body p { margin: 0 0 8px; } .legal-body p.li { padding-left: 1em; }

/* ---------- Modals ---------- */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(6, 0, 2, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s .45s; }
.modal.open { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }
.modal .window { width: min(980px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; overflow-x: hidden; transform: scale(.92) translateY(20px); filter: blur(10px); transition: transform .6s var(--ease-cine), filter .5s var(--ease); }
.modal.open .window { transform: none; filter: none; }
.modal .window.wide { width: min(1320px, 100%); }
.modal .window.narrow { width: min(580px, 100%); }
.modal .win-head .tabs { margin-left: auto; }
/* the embedded trailer: cropped past its own site header so it reads as part of this window */
.tv-frame-wrap { position: relative; z-index: 5; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100dvh - 140px); overflow: hidden; background: #0c0204 url("../img/trailer-open.jpg") center / cover; border: 2px solid #000; outline: 2px solid #555; }
.tv-frame-wrap iframe { position: absolute; left: 0; top: calc(-1 * var(--crop, 64px)); width: 100%; height: calc(100% + var(--crop, 64px)); border: 0; opacity: 0; filter: blur(10px); transition: opacity .7s var(--ease), filter .7s var(--ease); }
.loaded .tv-frame-wrap iframe { opacity: 1; filter: none; }
.tv-loading { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; text-shadow: 2px 2px #000; background: rgba(10, 0, 2, .55); transition: opacity .5s; }
.loaded .tv-loading { opacity: 0; pointer-events: none; }

/* ---------- Feathered edges: content fades + blurs as it slides under the header or into the ground ---------- */
.feather { position: fixed; left: 0; right: 0; z-index: 29; pointer-events: none; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.feather.top { top: var(--hdr); height: 30px; background: linear-gradient(rgba(20, 2, 5, .55), transparent); -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
.feather.bottom { bottom: var(--ground); height: 46px; background: linear-gradient(transparent, rgba(20, 2, 5, .45)); -webkit-mask-image: linear-gradient(transparent, #000); mask-image: linear-gradient(transparent, #000); }
.modal-open .feather { opacity: 0; }
.cart-list, .legal-body { -webkit-mask-image: linear-gradient(transparent, #000 12px, #000 calc(100% - 12px), transparent); mask-image: linear-gradient(transparent, #000 12px, #000 calc(100% - 12px), transparent); }
.track { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }

/* ---------- Footer ---------- */
.foot { position: relative; z-index: 15; display: grid; justify-items: center; gap: 8px; padding: 22px 18px calc(var(--stage) + 22px); font-size: .8em; line-height: 1.4; color: #f0f0f0; text-shadow: 2px 2px 0 #000; text-align: center; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 18px; max-width: 1120px; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; }
.foot-row.sub { color: #cfcfcf; font-size: .92em; }
.hint-touch { display: none; }
@media (hover: none) { .hint-desk { display: none; } .hint-touch { display: inline; } }
.foot a { color: #ffd0d0; }
.foot .concept { color: #ffff55; }

/* ---------- Toasts (vanilla advancement toast) & tooltip ---------- */
/* toasts sit in the strip above the ground (Steve's lane), clear of buttons and text */
#toasts { position: fixed; bottom: calc(var(--ground) + 6px); right: 12px; z-index: 60; display: grid; gap: 6px; pointer-events: none; }
#toasts .toast:not(:last-child) { display: none; }
@media (max-width: 640px) { #toasts { right: 8px; } #toasts .toast { width: 250px; height: 50px; } }
.toast {
  display: grid; grid-template-columns: 32px 1fr; gap: 0 14px; align-items: center; align-content: center;
  width: 320px; max-width: calc(100vw - 24px); height: 64px; padding: 0 14px 0 16px;
  background: #212121 var(--toast-bg) 0 0 / 100% 100%; image-rendering: pixelated;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .5));
  animation: toast-in .7s var(--ease-cine) both;
}
.toast.out { animation: toast-out .5s ease-in both; }
.toast .icon { grid-row: span 2; }
.toast b { color: #ffff55; font-weight: normal; font-size: .95em; }
.toast span { color: #fff; font-size: .88em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes toast-in { from { transform: translateX(115%); filter: blur(6px); } }
@keyframes toast-out { to { transform: translateX(115%); opacity: 0; filter: blur(4px); } }
#tip {
  position: fixed; z-index: 70; left: 0; top: 0; pointer-events: none;
  max-width: min(320px, 80vw); padding: 6px 10px;
  background: rgba(16, 0, 16, .94); border: 2px solid transparent; border-image: linear-gradient(#5000ff, #28007f) 1;
  box-shadow: 0 0 0 2px rgba(16, 0, 16, .94);
  color: #a8a8a8; font-size: .86em; white-space: pre-line;
  opacity: 0; transform: translateY(6px) scale(.97); transition: opacity .16s, transform .2s var(--ease);
}
#tip.show { opacity: 1; transform: none; }
#tip .t { display: block; margin-bottom: 3px; color: #fff; }

/* =========================================================
   Shared page layout: the page scrolls; windows stretch down
   ========================================================= */
main { position: relative; z-index: 10; padding: calc(var(--hdr) + 26px) max(14px, 2.5vw) 0; display: flex; flex-direction: column; align-items: center; gap: 44px; }
.page { width: min(1120px, 100%); scroll-margin-top: calc(var(--hdr) + 16px); position: relative; }

/* LAYOUT 1: GUI — one window at a time, stretched to (and past) the bottom edge */
[data-mode="gui"] .page { display: none; }
[data-mode="gui"] .page.active { display: block; }
[data-mode="gui"] .page > .window { min-height: 0; }   /* window ends with its content: no dead space */
[data-mode="gui"] #home .title-screen { min-height: calc(100vh - var(--hdr) - var(--stage) - 40px); justify-content: center; }
[data-mode="gui"] .foot { margin-top: 4px; }

/* page / tab transitions: blur + scale morph */
.page.leaving { animation: blur-out .26s ease-in both; }
.page.entering { animation: win-in .7s var(--ease-cine) both; }
[data-mode="gui"] .page.active .reveal { animation: pop-in .8s var(--ease-cine) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.tab-panel.leaving { animation: blur-out .2s ease-in both; }
.tab-panel.entering { animation: win-in .55s var(--ease-cine) both; }
.tab-panel.active .reveal { animation: pop-in .7s var(--ease-cine) both; animation-delay: calc(var(--i, 0) * 60ms + 60ms); }
[data-mode="gui"] .page.active .bar > span { animation: grow 1.4s var(--ease-cine) both; animation-delay: calc(var(--i, 0) * 90ms + 350ms); }
main.morph-out { animation: morph-out .32s ease-in both; }
main.morph-in { animation: morph-in .8s var(--ease-cine) both; }

@keyframes blur-out { to { opacity: 0; transform: scale(.96) translateY(8px); filter: blur(12px); } }
@keyframes win-in { from { opacity: 0; transform: scale(1.05) translateY(-6px); filter: blur(14px); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(22px) scale(.94); filter: blur(8px); } }
@keyframes grow { from { clip-path: inset(0 100% 0 0); } }
@keyframes morph-out { to { opacity: 0; transform: scale(.9) translateY(14px); filter: blur(16px); } }
@keyframes morph-in { from { opacity: 0; transform: scale(1.07) translateY(-14px); filter: blur(16px); } }

/* LAYOUT 2: SCROLL — every section stacked, one-shot reveals (no flicker) */
[data-mode="scroll"] #home { min-height: calc(100svh - var(--hdr) - var(--stage) - 40px); display: flex; align-items: center; }
[data-mode="scroll"] .tab-panel.active .reveal:not(.in) { animation: none; }
[data-mode="scroll"] .reveal:not(.in) { opacity: 0; transform: translateY(36px) scale(.94); filter: blur(10px); }
[data-mode="scroll"] .reveal.in {
  transition: opacity .9s var(--ease-cine), transform .9s var(--ease-cine), filter .9s var(--ease-cine), box-shadow .45s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms), calc(var(--i, 0) * 80ms), calc(var(--i, 0) * 80ms), 0s;
}
[data-mode="scroll"] .reveal.in.settled { transition-delay: 0s; transition-duration: .3s, .45s, .3s, .45s; }
[data-mode="scroll"] .reveal .bar > span { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s var(--ease-cine) calc(var(--i, 0) * 90ms + 300ms); }
[data-mode="scroll"] .reveal.in .bar > span { clip-path: inset(0 calc((1 - var(--v)) * 100%) 0 0); }

/* ---------- TNT easter egg (press R) ---------- */
.tnt-wrap { position: fixed; z-index: 85; pointer-events: none; perspective: 600px; }
.tnt { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.tnt i { position: absolute; inset: 0; background: var(--tnt-side) center / 100% 100%; image-rendering: pixelated; backface-visibility: hidden; }
.tnt i::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; }
.tnt.primed i::after { animation: prime .4s steps(1) infinite; }
.tnt i.t { background-image: var(--tnt-top); } .tnt i.b { background-image: var(--tnt-bottom); }
@keyframes prime { 50% { opacity: .75; } }
.logo { transition: filter .5s var(--ease); }
.logo.morphing { filter: blur(3px) brightness(1.3); }
.boom-flash { position: fixed; inset: 0; z-index: 86; pointer-events: none; background: #fff; animation: flash .55s ease-out forwards; }
@keyframes flash { from { opacity: .85; } to { opacity: 0; } }
.boom-p { position: fixed; z-index: 87; pointer-events: none; background: center / 100% 100% no-repeat; image-rendering: pixelated; }
.shake { animation: shake .55s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes shake { 10%, 90% { translate: -3px 2px; } 20%, 80% { translate: 6px -4px; } 30%, 50%, 70% { translate: -10px 6px; } 40%, 60% { translate: 10px -6px; } }
.booming main { overflow: clip; }
/* keep the blast smooth: no blur strips over moving content, decorative loops paused */
.booming .feather, .booming #follow, .booming #torch { display: none; }
.booming main *, .booming main *::before, .booming main *::after { animation-play-state: paused !important; }

[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after { animation: none !important; transition: none !important; }
[data-motion="off"] .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
[data-motion="off"] .bar > span { clip-path: inset(0 calc((1 - var(--v)) * 100%) 0 0) !important; }
[data-motion="off"] .lb, [data-motion="off"] #fade { display: none; }

/* ---------- spacing + centring pass ---------- */
.pass-grid > *, .grid > *, .ts-grid > *, .join-grid > *, .ts-col > * { min-width: 0; }
.win-head { padding-bottom: 10px; border-bottom: 2px solid #a8a8a8; margin-bottom: 14px; }
.window { padding: 14px 18px 18px; }
.card { padding: 16px; }
.btn-row { gap: 10px; }
.ts-grid { gap: 22px; }
.title-screen { gap: clamp(18px, 3vh, 34px); }
.logo-wrap { margin-bottom: 4px; }
@media (max-width: 760px) {
  main { padding-left: 12px; padding-right: 12px; gap: 28px; }
  .page { width: 100%; margin-inline: auto; }
  .window { padding: 12px 12px 16px; }
  .win-head { gap: 10px; }
  .win-title { width: 100%; justify-content: flex-start; }
  .tabs { margin-left: 0; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs .mc-btn { flex: 1 0 auto; }
  .ts-grid { gap: 14px; }
  .title-screen { padding: 4px 0 10px; }
  .logo img { width: min(78vw, 340px); margin: 0 auto; }
  .splash { right: -1%; top: 74%; }
  .slots { gap: 6px; }
  .slot { padding: 10px 2px 8px; }
  .slot .icon { width: 26px; height: 26px; }
  .grid { gap: 18px 10px; }
  .card { padding: 14px 12px; }
  .row { grid-template-columns: minmax(0, 7.5em) 1fr 3em; }
  .win-foot { font-size: .74em; }
  .foot { font-size: .76em; gap: 10px; padding: 18px 14px calc(var(--stage) + 18px); }
  .foot-row { gap: 6px 14px; }
  .co-grid { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
}

/* currency switcher */
.cur-btn { font: inherit; color: inherit; background: none; border: 0; padding: 0 2px; cursor: pointer; border-bottom: 2px dotted #8f1d1d; transition: color .2s; }
.cur-btn b { font-weight: normal; color: #8f1d1d; }
.cur-btn:hover { color: #000; }
.cur-btn.mini { border: 0; font-size: .8em; margin-left: 6px; }
.money { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: bottom; transition: opacity .18s, filter .18s, transform .25s var(--ease), width .45s var(--ease-cine); }
.money.swap { opacity: 0; filter: blur(4px); transform: translateY(-4px); }

/* two-step confirm for links that leave the site */
.confirm-out { color: #ffffa0 !important; }
.confirm-out::before { content: ""; position: absolute; left: 0; bottom: -2px; height: 3px; background: #ffff55; animation: confirm-bar 3.5s linear forwards; }
@keyframes confirm-bar { from { width: 100%; } to { width: 0; } }

/* home logo is a tap target for the TNT easter egg (mobile has no R key) */
.logo img { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* card grids: only as many columns as there are cards, centred in the window (GUI + scroll) */
.grid { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 320px)); justify-content: center; }
.grid.gems { grid-template-columns: repeat(auto-fit, minmax(min(160px, 46%), 200px)); justify-content: center; }
.win-foot { justify-content: center; }
.tab-panel > .note { text-align: center; }

/* frosted glass: translucent boxes that sit over the moving scene blur what's behind them */
.server, .ip-box, .trailer, .chip, #tip, .tv-chapters button {
  -webkit-backdrop-filter: blur(9px) saturate(1.25);
  backdrop-filter: blur(9px) saturate(1.25);
}
.server, .ip-box { background-color: rgba(0, 0, 0, .58); }
.ip-box:hover { background-color: rgba(0, 0, 0, .68); }
.ip-box.dark { background-color: rgba(16, 0, 16, .82); }
.trailer { background: linear-gradient(90deg, rgba(120, 40, 0, .78), rgba(40, 0, 6, .78)); }

/* scroll reveals: start just before entering view, quick and continuous */
[data-mode="scroll"] .reveal:not(.in) { opacity: 0; transform: translateY(16px) scale(.98); filter: blur(3px); }
[data-mode="scroll"] .reveal.in {
  transition: opacity .45s var(--ease), transform .5s var(--ease-cine), filter .4s var(--ease), box-shadow .45s var(--ease);
  transition-delay: calc(var(--i, 0) * 35ms), calc(var(--i, 0) * 35ms), calc(var(--i, 0) * 35ms), 0s;
}
[data-mode="scroll"] .reveal .bar > span { transition-duration: .8s; transition-delay: calc(var(--i, 0) * 50ms + 120ms); }

/* dark stage behind the checkout preview so the white whirlwind reads clearly */
.co-preview { background: radial-gradient(ellipse at 50% 80%, rgba(120, 30, 20, .55), transparent 65%), linear-gradient(#2a0d10, #120406); box-shadow: inset 2px 2px #000, inset -2px -2px #5a1424; }

/* username + Enter button */
.name-row { display: flex; gap: 8px; align-items: stretch; margin-top: 4px; }
.name-row input { flex: 1; min-width: 0; font: inherit; font-size: 1.15em; color: #fff; background: #000; border: 2px solid #a0a0a0; padding: 8px 10px; outline: none; border-radius: 0; }
.name-row input:focus { border-color: #fff; box-shadow: 0 0 14px rgba(255, 200, 110, .4); }
.name-row .mc-btn { min-height: 0; padding: 0 16px; }

/* checkout preview: drag to rotate */
.co-preview #coSteve { cursor: grab; touch-action: none; }
.co-preview #coSteve:active { cursor: grabbing; }
.co-hint { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-size: .62em; color: rgba(255, 255, 255, .65); text-shadow: 1px 1px 0 #000; pointer-events: none; transition: opacity .4s; }
.co-preview:hover .co-hint, .co-preview:active .co-hint { opacity: 0; }

.co-preview #coBg { position: absolute; inset: 0; width: 120px; height: 170px; image-rendering: pixelated; pointer-events: none; }
.co-preview { overflow: visible; }