/* Nexus Minecraft home (Claude, 16 Oct 2026, Parky): Minecraft's own landing page inside NexusHub, in the Pokémon Nexus
   style. Dark, big type, real footage on real devices, motion that follows the scroll. Everything is scoped to .mc so the
   site header keeps its own look. */
.mc {
  --bg: #04070a;
  --ink: #f5f7f6;
  --muted: #a5aead;
  --dim: #6c7674;
  --line: rgba(255, 255, 255, .08);
  --g: #4ade80;
  --g2: #22c55e;
  --sky: #38bdf8;
  position: relative;
  overflow: hidden;
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.mc-home { background: var(--mc-bg, #04070a) !important; }
html:has(body.mc-home)::before { display: none; }
html:has(body.mc-home) { background: #04070a; }
.mc a { color: inherit; text-decoration: none; }
.mc svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mc h1, .mc h2, .mc h3 { margin: 0; color: #fff; }
.mc h2 { font: 800 clamp(34px, 5.4vw, 64px)/1.02 Outfit, Inter, sans-serif; letter-spacing: -.035em; text-wrap: balance; }
.mc-kicker { margin: 0 0 14px; color: var(--g); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.mc-lede { margin: 18px auto 0; max-width: 640px; color: var(--muted); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; text-wrap: pretty; }
.mc-head { max-width: 780px; margin: 0 auto; text-align: center; }

/* buttons */
.mc-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.mc-go { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 28px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, #5ee58f, #22c55e); color: #03140a !important; font: 800 16.5px Inter, sans-serif; letter-spacing: -.01em;
  box-shadow: 0 16px 34px -14px rgba(34, 197, 94, .9), inset 0 1px 0 rgba(255, 255, 255, .45); transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; }
.mc-go:hover { transform: translateY(-2px); box-shadow: 0 22px 40px -14px rgba(34, 197, 94, 1), inset 0 1px 0 rgba(255, 255, 255, .45); }
.mc-go:active { transform: translateY(0) scale(.98); }
.mc-go svg { transition: transform .25s; } .mc-go:hover svg { transform: translateX(3px); }
.mc-ghost { display: inline-flex; align-items: center; gap: 8px; height: 54px; padding: 0 24px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .04); color: #fff !important; font: 700 16px Inter, sans-serif; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .2s, border-color .2s; }
.mc-ghost:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .26); }
.mc-link { display: inline-flex; align-items: center; gap: 6px; color: var(--g) !important; font-weight: 700; font-size: 16px; }
.mc-link svg { width: 18px; height: 18px; transition: transform .25s; } .mc-link:hover svg { transform: translateX(3px); }

/* floating pixel cubes behind the page */
.mc-dust { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.mc-dust i { position: absolute; display: block; width: var(--s); height: var(--s); left: var(--x); top: var(--y); border-radius: 2px;
  background: rgb(var(--c) / .55); box-shadow: 0 0 18px rgb(var(--c) / .45); animation: mc-drift var(--d) ease-in-out infinite alternate; animation-delay: var(--t); }
@keyframes mc-drift { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(14px, -38px, 0) rotate(45deg); } }

/* ---------- hero ---------- */
.mc-hero { position: relative; z-index: 1; display: grid; justify-items: center; padding: clamp(110px, 14vh, 150px) 20px 40px; text-align: center; isolation: isolate; }
.mc-hero::before { content: ""; position: absolute; inset: 0 0 -20%; z-index: -1;
  background: radial-gradient(60% 45% at 50% 68%, rgba(34, 197, 94, .2), transparent 70%), radial-gradient(50% 40% at 50% 10%, rgba(56, 189, 248, .14), transparent 70%); }
.mc-live { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 14px 0 12px; border: 1px solid rgba(74, 222, 128, .25); border-radius: 999px;
  background: rgba(34, 197, 94, .08); color: #bbf7d0; font-size: 13.5px; font-weight: 600; animation: mc-in .9s cubic-bezier(.2, .8, .2, 1) both; }
.mc-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--g); box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); animation: mc-ping 2s ease-out infinite; }
@keyframes mc-ping { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); } 80%, 100% { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); } }
.mc-hero h1 { margin-top: 22px; font: 800 clamp(44px, 8.4vw, 104px)/.96 Outfit, Inter, sans-serif; letter-spacing: -.045em; text-wrap: balance;
  animation: mc-in 1s .06s cubic-bezier(.2, .8, .2, 1) both; }
.mc-hero h1 em { font-style: normal; background: linear-gradient(180deg, #86efac 10%, #22c55e 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mc-hero .mc-lede { animation: mc-in 1s .14s cubic-bezier(.2, .8, .2, 1) both; }
.mc-hero .mc-ctas { animation: mc-in 1s .22s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes mc-in { from { opacity: 0; transform: translateY(22px); } }
.mc-island { position: relative; width: min(980px, 104vw); margin: clamp(10px, 3vw, 30px) auto 0; animation: mc-rise 1.4s .2s cubic-bezier(.2, .8, .2, 1) both; }
.mc-island img { display: block; width: 100%; height: auto; filter: drop-shadow(0 50px 60px rgba(0, 0, 0, .6)); animation: mc-bob 7s ease-in-out infinite; }
.mc-island::after { content: ""; position: absolute; left: 22%; right: 18%; bottom: -2%; height: 12%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(34, 197, 94, .35), transparent); filter: blur(20px); }
@keyframes mc-rise { from { opacity: 0; transform: translateY(60px) scale(.96); } }
@keyframes mc-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* hero: words on the left, the island on the right (like the NexusHub home page); stacked on phones */
.mc-hero-copy { display: flex; flex-direction: column; align-items: center; }
@media (min-width: 961px) {
  .mc-hero { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: center; gap: clamp(10px, 3vw, 50px);
    width: min(1320px, 100%); min-height: calc(100svh - 70px); margin: 0 auto; padding: 90px clamp(24px, 4vw, 56px) 60px; text-align: left; }
  .mc-hero::before { background: radial-gradient(45% 55% at 74% 55%, rgba(34, 197, 94, .2), transparent 70%), radial-gradient(40% 40% at 20% 20%, rgba(56, 189, 248, .12), transparent 70%); }
  .mc-hero-copy { align-items: flex-start; }
  .mc-hero h1 { font-size: clamp(50px, 5.3vw, 84px); }
  .mc-hero .mc-lede { margin-left: 0; max-width: 520px; }
  .mc-hero .mc-ctas { justify-content: flex-start; }
  .mc-island { width: 122%; margin: 0 -14% 0 -8%; }
}
@media (max-width: 960px) { .mc-island { width: min(720px, 100%); } }

/* hero landscape (16 Oct 2026, Parky's idea): mountains, hills and a village slide past at different speeds, in a loop */
.mc-pano { position: absolute; top: 0; left: 0; right: 0; z-index: 0; height: min(100svh, 1000px); min-height: 640px; overflow: hidden; pointer-events: none; }
.mc-pano i { position: absolute; left: 0; right: 0; bottom: 0; background-repeat: repeat-x; background-position: 0 100%; will-change: background-position; }
.mc-pano .l1 { top: 0; background-image: url('/minecraft/home/pano-back.webp?v=20261016a'); background-size: auto 100%; }
.mc-pano .l2 { height: 40%; bottom: 17%; background-image: url('/minecraft/home/pano-mid.webp?v=20261016a'); background-size: auto 100%; }
.mc-pano .l3 { height: 30%; background-image: url('/minecraft/home/pano-front.webp?v=20261016a'); background-size: auto 100%; }
.mc-pano::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(4, 7, 10, .82) 0%, rgba(4, 7, 10, .5) 45%, rgba(4, 7, 10, .12) 75%, rgba(4, 7, 10, .05)), linear-gradient(180deg, rgba(4, 7, 10, .55), rgba(4, 7, 10, 0) 18%, rgba(4, 7, 10, 0) 70%, #04070a 99%); }
@media (max-width: 960px) {
  .mc-pano { height: 100%; max-height: 1250px; }
  .mc-pano .l2 { height: 24%; bottom: 10%; }
  .mc-pano .l3 { height: 17%; }
  .mc-pano::after { background: linear-gradient(180deg, rgba(4, 7, 10, .62), rgba(4, 7, 10, .5) 50%, rgba(4, 7, 10, .3) 75%, #04070a 99%); }
}

/* server address: two copy chips under the title */
.mc-join { width: 100%; max-width: 520px; margin-top: 28px; animation: mc-in 1s .2s cubic-bezier(.2, .8, .2, 1) both; }
.mc-join-t { margin: 0 0 10px; color: var(--dim); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; }
.mc-join-t span { margin: 0 4px; color: #3f4a48; }
.mc-join-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.mc-chip { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 14px;
  min-height: 66px; padding: 11px 12px 11px 18px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; cursor: pointer; text-align: left;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)), rgba(8, 12, 16, .55); color: #fff;
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 40px -24px rgba(0, 0, 0, .9); transition: border-color .25s, background .25s, transform .2s; }
.mc-chip:hover { border-color: rgba(74, 222, 128, .45); background: linear-gradient(180deg, rgba(74, 222, 128, .12), rgba(255, 255, 255, .02)), rgba(8, 12, 16, .6); }
.mc-chip:active { transform: scale(.985); }
.mc-chip small { grid-column: 1; color: #86efac; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.mc-chip b { grid-column: 1; margin-top: 3px; overflow: hidden; font: 700 17px/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mc-chip .ic { grid-column: 2; grid-row: 1 / 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .08); transition: background .25s, color .25s; }
.mc-chip:hover .ic { background: rgba(74, 222, 128, .2); color: #bbf7d0; }
.mc-chip .ic svg { width: 18px; height: 18px; grid-area: 1 / 1; transition: opacity .2s, transform .25s; }
.mc-chip .i-ok { opacity: 0; transform: scale(.5); }
.mc-chip.ok { border-color: rgba(74, 222, 128, .6); }
.mc-chip.ok .ic { background: #22c55e; color: #03140a; }
.mc-chip.ok .i-copy { opacity: 0; transform: scale(.5); } .mc-chip.ok .i-ok { opacity: 1; transform: none; }
.mc-hero-copy .mc-ctas { margin-top: 22px; }
@media (max-width: 600px) {
  .mc-join { max-width: 340px; margin-left: auto; margin-right: auto; text-align: center; }
  .mc-join-row { grid-template-columns: 1fr; }
  .mc-chip b { font-size: 16px; }
}

/* server address card */
.mc-addr { display: inline-flex; align-items: center; gap: 4px; margin-top: 18px; padding: 6px; border: 1px solid var(--line); border-radius: 18px;
  background: rgba(10, 14, 16, .7); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); text-align: left; animation: mc-in 1s .3s cubic-bezier(.2, .8, .2, 1) both; }
.mc-addr div { padding: 4px 14px; }
.mc-addr div + div { border-left: 1px solid var(--line); }
.mc-addr small { display: block; color: var(--dim); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.mc-addr b { display: block; margin-top: 2px; color: #fff; font: 700 15px/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.mc-copy { display: inline-flex; align-items: center; gap: 7px; height: 42px; margin-left: 4px; padding: 0 16px; border: 0; border-radius: 12px; cursor: pointer;
  background: rgba(255, 255, 255, .08); color: #fff; font: 700 14px Inter, sans-serif; transition: background .2s; }
.mc-copy:hover { background: rgba(255, 255, 255, .14); }
.mc-copy svg { width: 16px; height: 16px; }
.mc-copy.ok { background: rgba(34, 197, 94, .2); color: #bbf7d0; }

/* ---------- Skyblock features (bento) ---------- */
.mc-sky { position: relative; z-index: 1; width: min(1180px, calc(100% - 40px)); margin: clamp(90px, 12vw, 150px) auto 0; }
.mc-bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 250px; gap: 14px; margin-top: 54px; }
.mc-tile { position: relative; overflow: hidden; border-radius: 22px; background: #0b0f12; isolation: isolate;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 30px 60px -40px rgba(0, 0, 0, .9); grid-column: span 2; }
.mc-tile.w3 { grid-column: span 3; }
.mc-tile.w4 { grid-column: span 4; grid-row: span 2; }
.mc-tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.mc-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4, 7, 10, 0) 40%, rgba(4, 7, 10, .88)); }
.mc-tile:hover img { transform: scale(1.04); }
.mc-tile div { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 22px; }
.mc-tile b { display: block; color: #fff; font: 700 20px/1.2 Outfit, Inter, sans-serif; letter-spacing: -.01em; }
.mc-tile.w4 b { font-size: clamp(24px, 2.6vw, 32px); }
.mc-tile span { display: block; margin-top: 6px; color: #c8d0ce; font-size: 14.5px; line-height: 1.5; text-wrap: pretty; }
.mc-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 34px; }

/* ---------- Structure Viewer on devices ---------- */
.mc-sv { position: relative; z-index: 1; padding: clamp(110px, 14vw, 170px) 20px 0; }
.mc-stage { --k: 1; position: relative; width: min(1080px, 100%); margin: 64px auto 0; padding-right: 8%; }
.mc-stage::before { content: ""; position: absolute; inset: 0 4% 26%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(167, 139, 250, .22), rgba(34, 197, 94, .12) 55%, transparent); filter: blur(40px); opacity: calc(.3 + var(--k) * .7); }
.mc-mac { position: relative; }
.mc-mac > img, .mc-phone > img { position: relative; z-index: 2; display: block; width: 100%; height: auto; pointer-events: none; user-select: none; }
.mc-mac-screen { position: absolute; z-index: 1; left: 4.54%; top: 5.816%; width: 91.203%; height: 61.064%; overflow: hidden; background: #0b0d10; }
.mc-phone { position: absolute; z-index: 3; right: 0; bottom: 2%; width: 25%; filter: drop-shadow(0 34px 44px rgba(0, 0, 0, .65));
  transform: translateY(calc((1 - var(--k)) * 160px)) rotate(calc((1 - var(--k)) * 6deg)); will-change: transform; }
.mc-phone-screen { position: absolute; z-index: 1; left: 4.43%; top: 2.37%; width: 90.61%; height: 95.36%; overflow: hidden; border-radius: 10.2% / 4.97%; background: #0b0d10; }
.mc-mac-screen video, .mc-phone-screen video, .mc-mac-screen img, .mc-phone-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mc-points { display: grid; grid-template-columns: repeat(3, 1fr); width: min(1080px, 100%); margin: 70px auto 0; border-top: 1px solid var(--line); }
.mc-points div { padding: 28px 26px 6px; }
.mc-points div + div { border-left: 1px solid var(--line); }
.mc-points svg { width: 26px; height: 26px; color: #c4b5fd; }
.mc-points b { display: block; margin-top: 14px; font: 700 19px/1.25 Outfit, Inter, sans-serif; }
.mc-points span { display: block; margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.mc-sv .mc-ctas { margin-top: 44px; }

/* ---------- Add-ons ---------- */
.mc-add { position: relative; z-index: 1; padding-top: clamp(110px, 14vw, 170px); }
.mc-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 320px); gap: 16px; margin-top: 50px; padding: 4px max(20px, calc((100vw - 1180px) / 2)) 24px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(20px, calc((100vw - 1180px) / 2)); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mc-rail::-webkit-scrollbar { display: none; }
.mc-card { scroll-snap-align: start; display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: #0b0f12;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 30px 60px -40px rgba(0, 0, 0, .9); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.mc-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(74, 222, 128, .28), 0 36px 60px -36px rgba(0, 0, 0, .95); }
.mc-card figure { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: #111619; }
.mc-card figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mc-card div { padding: 16px 18px 20px; }
.mc-card small { color: var(--g); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mc-card b { display: block; margin-top: 6px; font: 700 18px/1.25 Outfit, Inter, sans-serif; }
.mc-card span { display: -webkit-box; margin-top: 6px; overflow: hidden; color: var(--muted); font-size: 14px; line-height: 1.55; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mc-railnav { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 4px; }
.mc-railnav button { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 50%;
  background: rgba(255, 255, 255, .04); color: #fff; cursor: pointer; transition: background .2s, opacity .2s; }
.mc-railnav button:hover { background: rgba(255, 255, 255, .1); }
.mc-railnav button:disabled { opacity: .35; cursor: default; }
.mc-railnav .mc-link { margin: 0 12px; }

/* ---------- Tools ---------- */
.mc-tools { position: relative; z-index: 1; width: min(1180px, calc(100% - 40px)); margin: clamp(110px, 14vw, 170px) auto 0; }
.mc-tgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 50px; }
.mc-tool { position: relative; display: flex; flex-direction: column; min-height: 210px; padding: 24px; border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); transition: background .3s, box-shadow .3s, transform .35s cubic-bezier(.2, .8, .2, 1); }
.mc-tool:hover { transform: translateY(-3px); background: linear-gradient(180deg, rgb(var(--c) / .1), rgba(255, 255, 255, .015)); box-shadow: inset 0 0 0 1px rgb(var(--c) / .3); }
.mc-tool { overflow: hidden; padding-top: 0; }
.mc-tool figure { margin: 0 -24px 0; aspect-ratio: 3 / 2; overflow: hidden; background: rgb(var(--c) / .08); }
.mc-tool figure img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.mc-tool:hover figure img { transform: scale(1.05); }
.mc-tool figure + .ic { margin-top: -24px; position: relative; box-shadow: 0 0 0 4px #0b0f12; background: #0b0f12; }
.mc-tool figure + .ic::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgb(var(--c) / .16); }
.mc-tool figure + .ic svg { position: relative; }
.mc-tool { padding-bottom: 24px; }
.mc-tool .go { top: auto; bottom: 24px; }
.mc-tool > span:not(.ic) { padding-right: 18px; }
.mc-tool .ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgb(var(--c) / .14); color: rgb(var(--c)); }
.mc-tool .ic svg { width: 24px; height: 24px; }
.mc-tool b { margin-top: 20px; font: 700 19px/1.25 Outfit, Inter, sans-serif; }
.mc-tool span { margin-top: 8px; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.mc-tool .go { position: absolute; top: 24px; right: 22px; color: var(--dim); transition: color .2s, transform .25s; }
.mc-tool:hover .go { color: #fff; transform: translateX(3px); }

/* ---------- final ---------- */
.mc-final { position: relative; z-index: 1; padding: clamp(130px, 16vw, 190px) 20px clamp(110px, 12vw, 150px); text-align: center; }
.mc-final h2 { max-width: 820px; margin: 0 auto; }
.mc-final img { display: block; width: 190px; height: auto; margin: 0 auto 26px; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .55)); }
.mc-hub { display: inline-flex; align-items: center; gap: 10px; margin-top: 46px; padding: 8px 16px 8px 8px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted) !important; font-size: 14.5px; transition: color .2s, border-color .2s; }
.mc-hub img { width: 30px !important; height: auto; margin: 0 !important; filter: none !important; }
.mc-hub:hover { color: #fff !important; border-color: rgba(255, 255, 255, .2); }

/* toast */
.mc-toast { position: fixed; left: 50%; bottom: 26px; z-index: 80; padding: 12px 18px; border-radius: 14px; background: rgba(16, 22, 20, .95); color: #fff; font-size: 14.5px; font-weight: 600;
  box-shadow: 0 0 0 1px rgba(74, 222, 128, .3), 0 20px 40px -10px rgba(0, 0, 0, .7); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.mc-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* scroll-in */
[data-rise] { opacity: 0; transform: translateY(34px); transition: opacity .9s cubic-bezier(.2, .8, .2, 1), transform .9s cubic-bezier(.2, .8, .2, 1); }
[data-rise].in { opacity: 1; transform: none; }
.mc-bento [data-rise]:nth-child(2), .mc-tgrid [data-rise]:nth-child(2) { transition-delay: .07s; }
.mc-bento [data-rise]:nth-child(3), .mc-tgrid [data-rise]:nth-child(3) { transition-delay: .14s; }
.mc-bento [data-rise]:nth-child(4), .mc-tgrid [data-rise]:nth-child(4) { transition-delay: .21s; }
.mc-bento [data-rise]:nth-child(5) { transition-delay: .07s; }
.mc-bento [data-rise]:nth-child(6) { transition-delay: .14s; }

@media (max-width: 960px) {
  .mc-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
  .mc-tile, .mc-tile.w3 { grid-column: span 1; }
  .mc-tile.w4 { grid-column: span 2; grid-row: span 1; }
  .mc-tgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .mc-stage { margin-top: 44px; padding-right: 10%; }
  .mc-phone { width: 30%; bottom: -2%; }
  .mc-points { grid-template-columns: 1fr; margin-top: 56px; }
  .mc-points div { padding: 24px 6px; text-align: center; }
  .mc-points div + div { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .mc-hero { padding-top: 100px; }
  .mc-ctas { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; margin-left: auto; margin-right: auto; }
  .mc-go, .mc-ghost { justify-content: center; }
  .mc-addr { display: grid; grid-template-columns: 1fr auto; width: 100%; max-width: 340px; }
  .mc-addr .mc-copy { grid-column: 1 / -1; justify-content: center; margin: 4px 0 0; }
  .mc-bento { grid-template-columns: 1fr; grid-auto-rows: 210px; gap: 12px; }
  .mc-tile, .mc-tile.w3, .mc-tile.w4 { grid-column: auto; }
  .mc-tile.w4 { grid-row: span 1; height: 260px; }
  .mc-tile div { text-align: left; }
  .mc-tgrid { grid-template-columns: 1fr; gap: 12px; }
  .mc-tool { min-height: 0; }
  .mc-rail { grid-auto-columns: 78%; }
  .mc-railnav button { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-dust i, .mc-island, .mc-island img, .mc-live i, .mc-hero h1, .mc-hero .mc-lede, .mc-hero .mc-ctas, .mc-addr, .mc-live { animation: none; }
  [data-rise] { opacity: 1; transform: none; transition: none; }
  .mc-phone { transform: none; }
}

/* ---- 16 Oct 2026, round 2 (Parky) ---- */
/* twinkling stars instead of the coloured cubes */
.mc-dust i { width: var(--s); height: var(--s); border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(200, 220, 255, .7); opacity: var(--o);
  animation: mc-twinkle var(--d) ease-in-out infinite; animation-delay: var(--t); }
@keyframes mc-twinkle { 0%, 100% { opacity: var(--o); transform: scale(1); } 50% { opacity: .08; transform: scale(.6); } }

/* add-ons: a grid that always fits the screen */
.mc-rail { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(1180px, calc(100% - 40px)); margin: 50px auto 0; padding: 0 0 8px; overflow: visible; scroll-snap-type: none; }
.mc-railnav { margin-top: 30px; }
.mc-railnav button { display: none; }
@media (max-width: 960px) { .mc-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .mc-rail { width: calc(100% - 32px); gap: 10px; grid-auto-columns: auto; }
  .mc-card { border-radius: 16px; }
  .mc-card div { padding: 11px 12px 13px; }
  .mc-card small { font-size: 10px; }
  .mc-card b { font-size: 15px; }
  .mc-card span { display: none; }
}

/* Skyblock night version of the hero background (default): nebula sky, the moon, far islands, near islands */
.mc-pano.night .l1 { background-image: url('/minecraft/home/pano-sky.webp?v=20261016b'); }
.mc-pano.night .l2 { height: 25%; bottom: 38%; background-image: url('/minecraft/home/pano-far.webp?v=20261016b'); opacity: .85; filter: saturate(.85); }
.mc-pano.night .l3 { height: 33%; bottom: 3%; background-image: url('/minecraft/home/pano-near.webp?v=20261016b'); }
.mc-pano .moon { position: absolute; top: 9%; right: 9%; width: clamp(80px, 9vw, 140px); aspect-ratio: 286 / 301; background: url('/minecraft/home/pano-moon.webp?v=20261016b') center / contain no-repeat;
  filter: drop-shadow(0 0 30px rgba(190, 210, 255, .35)); animation: mc-moon 30s ease-in-out infinite alternate; }
.mc-pano:not(.night) .moon { display: none; }
@keyframes mc-moon { to { transform: translate(-30px, 8px); } }
.mc-pano.night::after { background: linear-gradient(90deg, rgba(4, 7, 10, .78) 0%, rgba(4, 7, 10, .42) 42%, rgba(4, 7, 10, .05) 70%, rgba(4, 7, 10, 0)),
  linear-gradient(180deg, rgba(4, 7, 10, .45), rgba(4, 7, 10, 0) 16%, rgba(4, 7, 10, 0) 78%, #04070a 99%); }
@media (max-width: 960px) {
  .mc-pano.night .l2 { height: 15%; bottom: 40%; }
  .mc-pano.night .l3 { height: 19%; bottom: 6%; }
  .mc-pano .moon { top: 90px; right: 6%; width: 70px; }
  .mc-pano.night::after { background: linear-gradient(180deg, rgba(4, 7, 10, .5), rgba(4, 7, 10, .35) 45%, rgba(4, 7, 10, .2) 75%, #04070a 99%); }
}

/* phones: the whole top section fits one screen; the floating islands behind it replace the big island picture */
@media (max-width: 960px) {
  .mc-hero { min-height: calc(100svh - 64px); align-content: center; padding: 84px 20px 120px; }
  .mc-island { display: none; }
  .mc-pano { height: calc(100svh - 0px); min-height: 600px; max-height: none; }
}
@media (max-width: 600px) {
  .mc-hero h1 { font-size: clamp(40px, 12vw, 54px); }
  .mc-hero .mc-lede { font-size: 15.5px; margin-top: 14px; }
  .mc-join { margin-top: 22px; }
  .mc-hero-copy .mc-ctas { flex-direction: row; max-width: 340px; margin-top: 16px; }
  .mc-hero-copy .mc-ctas > * { flex: 1; height: 50px; padding: 0 12px; font-size: 15px; justify-content: center; }
  .mc-sky, .mc-tools { width: calc(100% - 32px); }
  .mc-bento { margin-top: 36px; }
}
@media (max-width: 600px) {
  .mc-pano .moon { top: 74px; right: 14px; width: 46px; }
  .mc-hero-copy .mc-ctas > * { white-space: nowrap; font-size: 14.5px; }
  .mc-hero-copy .mc-ctas svg { display: none; }
}
@media (max-width: 600px) {
  .mc-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 158px; gap: 10px; }
  .mc-tile, .mc-tile.w3 { grid-column: span 1; border-radius: 16px; }
  .mc-tile.w4 { grid-column: span 2; height: auto; grid-row: span 1; }
  .mc-tile div { padding: 12px 13px; }
  .mc-tile b { font-size: 15.5px; }
  .mc-tile span { display: none; }
  .mc-tile.w4 b { font-size: 21px; }
  .mc-tile.w4 span { display: block; font-size: 13px; }
  .mc-more { flex-direction: column; align-items: center; gap: 14px; margin-top: 26px; }
}
@media (min-width: 961px) { .mc-pano .moon { top: 11%; right: 44%; width: clamp(70px, 6vw, 100px); } }
/* no coloured glow behind the title (Parky) */
.mc-hero::before { display: none; }

/* ---- 16 Oct 2026, round 3 (Parky): everything centred, glossy black address chips, a builder Steve flying behind ---- */
@media (min-width: 961px) {
  .mc-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; padding-top: 110px; }
  .mc-hero-copy { align-items: center; }
  .mc-hero h1 { font-size: clamp(56px, 6.4vw, 96px); }
  .mc-hero .mc-lede { margin-left: auto; margin-right: auto; max-width: 560px; }
  .mc-hero .mc-ctas { justify-content: center; }
}
.mc-hero-copy { position: relative; z-index: 2; }
.mc-join { margin-left: auto; margin-right: auto; text-align: center; }
.mc-join-row { grid-template-columns: minmax(0, 1fr) auto; }
.mc-chip { border: 1.5px solid rgba(255, 255, 255, .92); border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .03) 48%, rgba(0, 0, 0, 0) 52%), linear-gradient(180deg, #17191c, #040506);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(255, 255, 255, .06), 0 18px 40px -18px rgba(0, 0, 0, .95); }
.mc-chip:hover { border-color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, .04) 48%, rgba(0, 0, 0, 0) 52%), linear-gradient(180deg, #1d2024, #06070a); }
.mc-chip small { color: rgba(255, 255, 255, .62); }
.mc-chip .ic { background: transparent; border: 1.5px solid rgba(255, 255, 255, .85); color: #fff; }
.mc-chip:hover .ic { background: #fff; color: #050607; }
.mc-chip.ok { border-color: #fff; }
.mc-chip.ok .ic { background: #fff; border-color: #fff; color: #050607; }
/* the flying builder */
.mc-flyer { position: absolute; z-index: 1; top: 16%; right: clamp(10px, 6vw, 110px); width: clamp(200px, 23vw, 360px); pointer-events: none;
  animation: mc-in 1.2s .25s cubic-bezier(.2, .8, .2, 1) both; }
.mc-flyer img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); animation: mc-fly 6s ease-in-out infinite; }
@keyframes mc-fly { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-34px) rotate(2deg); } }
@media (max-width: 960px) {
  .mc-flyer { top: auto; bottom: 7%; right: -6px; width: 150px; opacity: .95; }
}
@media (max-width: 600px) {
  .mc-flyer { bottom: 2%; width: 118px; }
  .mc-join-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .mc-flyer, .mc-flyer img { animation: none; } }
.mc-pano:not(.night)::after { background: radial-gradient(60% 52% at 50% 46%, rgba(4, 7, 10, .74), rgba(4, 7, 10, .42) 62%, rgba(4, 7, 10, .14) 100%),
  linear-gradient(180deg, rgba(4, 7, 10, .5), rgba(4, 7, 10, 0) 16%, rgba(4, 7, 10, 0) 72%, #04070a 99%); }
@media (min-width: 961px) { .mc-flyer { top: 13%; right: 4%; width: clamp(180px, 17vw, 290px); } }
@media (max-width: 960px) { .mc-flyer { top: 74px; bottom: auto; right: 7%; width: 140px; } }
@media (max-width: 600px) { .mc-flyer { top: 70px; right: 5%; width: 112px; } }

/* ---- round 4 (Parky): Steve tilted a little clockwise, wind rushing past him; demos come before Skyblock ---- */
@keyframes mc-fly { 0%, 100% { transform: translateY(0) rotate(10deg); } 50% { transform: translateY(-34px) rotate(14deg); } }
.mc-flyer { isolation: isolate; }
.mc-wind { position: absolute; inset: -10% -25% -10% -45%; z-index: -1; transform: rotate(-24deg); animation: mc-fly-wind 6s ease-in-out infinite; }
@keyframes mc-fly-wind { 0%, 100% { translate: 0 0; } 50% { translate: 0 -34px; } }
.mc-wind i { position: absolute; left: 0; height: 2px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75) 70%, rgba(255, 255, 255, 0));
  animation: mc-gust 1.6s linear infinite; }
.mc-wind i:nth-child(1) { top: 22%; width: 42%; animation-delay: 0s; }
.mc-wind i:nth-child(2) { top: 36%; width: 30%; animation-delay: -.5s; animation-duration: 1.3s; }
.mc-wind i:nth-child(3) { top: 48%; width: 50%; animation-delay: -1.1s; }
.mc-wind i:nth-child(4) { top: 60%; width: 26%; animation-delay: -.8s; animation-duration: 1.2s; }
.mc-wind i:nth-child(5) { top: 72%; width: 38%; animation-delay: -.2s; animation-duration: 1.8s; }
.mc-wind i:nth-child(6) { top: 30%; width: 20%; height: 1px; animation-delay: -1.3s; animation-duration: 1.1s; }
.mc-wind i:nth-child(7) { top: 82%; width: 24%; height: 1px; animation-delay: -.6s; animation-duration: 1.4s; }
@keyframes mc-gust { 0% { transform: translateX(110%); opacity: 0; } 15% { opacity: .9; } 70% { opacity: .5; } 100% { transform: translateX(-60%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mc-wind { display: none; } }
@media (min-width: 961px) { .mc-hero .mc-lede { max-width: 660px; } }
.mc-wind i { height: 2.5px; }
.mc-join-t { color: rgba(255, 255, 255, .7); }