/* 6.29 – the start page: the vault opens, the logo rises out of it, Madrux420 and Kraspone take out the loot.
   Built from screenshots of the server and renders of the original Minecraft textures (assets/img/home).
   The background picture and the life in the village share one box with the picture's aspect ratio, so the
   golems, villagers and lanterns stay on their spot of the picture on every screen size.
   One timeline (6.29.1): every intro animation is called vh-i-* and overlaps the next one; until the pictures are
   loaded the hero waits (.wait), and a click on the vault plays it again. Only transform, opacity and
   background-position move, so the browser never has to lay the page out again while it plays. */
.vh { position: relative; height: 1020px; overflow: hidden; background: #16202c; isolation: isolate; }
/* 6.39: the scene fits the window on computers – index.js sets --vh-k (0.7 … 1): the hero, the picture and the stage
   shrink together, the shortcuts a little less (they stay readable) */
@media (min-width: 901px) {
  .vh { height: calc(1020px * var(--vh-k, 1)); }
  /* 7.3.0: until the loader has run (browsers without blocking="render") the hero already has the fitted height */
  .vh:not([style*="--vh-k"]) { height: clamp(714px, calc(100vh - var(--header-h)), 1020px); }
  .vh-scene { width: max(100%, calc(1963px * var(--vh-k, 1))); }
  .vh-c { scale: var(--vh-k, 1); transform-origin: 0 0; }
  .vh-b { scale: calc((1 + var(--vh-k, 1)) / (2 * var(--vh-k, 1))); }
}
.vh::after { content: ""; position: absolute; inset: auto 0 0; height: 56px; background: linear-gradient(180deg, transparent, var(--bg)); z-index: 9; pointer-events: none; }
.vh.wait * { animation-play-state: paused !important; }
.vh-scene { container-type: inline-size; position: absolute; left: 50%; top: 55%; width: max(100%, 1963px); aspect-ratio: 2048 / 1064; transform: translate(-50%, -55%); background: url(/brand/home-day) center / 100% 100% no-repeat; z-index: 0; }
.vh.night .vh-scene { background-image: url(/brand/home-night); }
.vh-mob { position: absolute; image-rendering: pixelated; animation: vh-wander var(--d) ease-in-out infinite alternate; }
/* 6.34: villagers and chickens walk, turn around at the end of their way (--f: 1 = the picture already looks the way
   they walk first, -1 = mirrored) and walk back; a soft step bob instead of hopping */
.vh-mob.v1, .vh-mob.v2, .vh-mob.v3 { animation: vh-walk calc(var(--d) * 2) ease-in-out infinite, vh-step .7s ease-in-out infinite; }
.vh-mob.c1, .vh-mob.c2, .vh-mob.c3, .vh-mob.c4 { transform-origin: 50% 100%; animation: vh-walk calc(var(--d) * 2) ease-in-out infinite, vh-peck 2.6s ease-in-out infinite; }
.vh.night .vh-mob { filter: brightness(.5); }
.vh-scene.custom .vh-mob { display: none; }
.vh-mob.g1 { left: 15.9%; top: 66.5%; width: 2.04%; --m: 2.04cqw; --d: 16s; }
.vh-mob.g2 { left: 80.5%; top: 67.5%; width: 1.73%; --m: -1.53cqw; --d: 19s; }
.vh-mob.v1 { left: 21.5%; top: 70.2%; width: 1.32%; --m: 5.6cqw; --d: 10s; --f: -1; }
.vh-mob.v2 { left: 73.5%; top: 70.6%; width: 1.17%; --m: -4.08cqw; --d: 12s; --f: -1; }
.vh-mob.v3 { left: 77.6%; top: 71.4%; width: 1.32%; --m: -4.58cqw; --d: 11s; --f: -1; }
.vh-mob.c1 { left: 17.5%; top: 70.4%; width: 0.87%; --m: -3.06cqw; --d: 14s; --f: 1; }
.vh-mob.c2 { left: 23.6%; top: 71.0%; width: 0.87%; --m: -2.04cqw; --d: 11s; --f: -1; }
.vh-mob.c3 { left: 28.8%; top: 70.6%; width: 0.87%; --m: -3.57cqw; --d: 17s; --f: 1; }
.vh-mob.c4 { left: 14.2%; top: 70.9%; width: 0.87%; --m: -1.53cqw; --d: 9s; --f: -1; }
@keyframes vh-wander { from { transform: translateX(0); } to { transform: translateX(var(--m)); } }
@keyframes vh-walk {
  0% { transform: translateX(0) scaleX(var(--f, 1)); } 46% { transform: translateX(var(--m)) scaleX(var(--f, 1)); }
  50% { transform: translateX(var(--m)) scaleX(calc(var(--f, 1) * -1)); } 96% { transform: translateX(0) scaleX(calc(var(--f, 1) * -1)); }
  100% { transform: translateX(0) scaleX(var(--f, 1)); } }
@keyframes vh-step { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2px; } }
@keyframes vh-peck { 0%, 70%, 100% { rotate: 0deg; } 78% { rotate: -14deg; } 86% { rotate: 0deg; } 92% { rotate: -10deg; } }

/* parrots flying across */
.vh-bird { position: absolute; left: 0; width: 52px; height: 41px; background: url(/assets/~0788f8031f/img/home/mob-parrot-a.png) 0 0 / 104px 41px no-repeat; image-rendering: pixelated; z-index: 1;
  animation: vh-flap .34s steps(1) infinite, vh-fly var(--d) linear infinite; animation-delay: 0s, var(--dl); }
.vh-bird.g { background-image: url(/assets/~0788f8031f/img/home/mob-parrot-g.png); }
.vh-bird.rev { animation-name: vh-flap, vh-flyrev; scale: -1 1; }
.vh-bird.b1 { top: 90px; --d: 26s; --dl: -6s; }
.vh-bird.b2 { top: 150px; --d: 31s; --dl: -14s; width: 40px; height: 32px; background-size: 80px 32px; }
.vh-bird.b3 { top: 230px; --d: 28s; --dl: -9s; width: 36px; height: 28px; background-size: 72px 28px; }
.vh-bird.b4 { top: 62px; --d: 35s; --dl: -25s; width: 30px; height: 24px; background-size: 60px 24px; }
@keyframes vh-flap { 50% { background-position-x: 100%; } }
@keyframes vh-fly { from { transform: translateX(-60px); } to { transform: translateX(calc(100vw + 60px)); } }
@keyframes vh-flyrev { from { transform: translateX(calc(100vw + 60px)); } to { transform: translateX(-60px); } }
.vh.night .vh-bird { filter: brightness(.55); }

/* address bar */
.vh-top { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); z-index: 8; display: flex; gap: 10px; align-items: center; max-width: calc(100% - 24px); }
.vh .server-card { display: flex; align-items: center; gap: 12px; padding: 8px 14px; margin: 0; min-width: 0; background: rgb(10 12 18 / .82); color: #f1f4f8; border: 1px solid #2a303b; border-radius: 12px; box-shadow: 0 10px 24px rgb(0 0 0 / .3); }
.vh .server-card .server-icon { width: 34px; height: 34px; }
.vh .server-card .server-title, .vh .server-card .server-motd { display: none; }
.vh .server-address { color: #ffb020; background: none; -webkit-background-clip: border-box; background-clip: border-box; font-weight: 800; font-size: 1.05rem; }
.vh .server-status { color: #f1f4f8; display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; padding: 0; background: none; box-shadow: none; }
.vh .server-status .players { font-size: .95rem; }
.vh .server-status .state { font-size: .8rem; }
.vh .server-card .server-info { display: flex; align-items: center; }
.vh .server-address { display: flex; align-items: center; gap: 10px; }
.vh .server-address .btn { padding: 4px 10px; min-height: 0; font-size: .8rem; }
.vh .server-status .players { white-space: nowrap; }

/* the stage around the centre line */
.vh-c { position: absolute; left: 50%; top: 0; width: 0; height: 100%; }
.vh-rays { position: absolute; left: -260px; top: 80px; width: 520px; height: 520px; border-radius: 50%; z-index: 1; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: repeating-conic-gradient(rgb(255 236 170 / .42) 0deg 7deg, transparent 7deg 22deg); -webkit-mask: radial-gradient(closest-side, #000 25%, transparent); mask: radial-gradient(closest-side, #000 25%, transparent);
  animation: vh-i-fade .9s 1.05s ease-out forwards, vh-spin 24s linear infinite; }
.vh-beam { position: absolute; left: -150px; top: -40px; width: 300px; height: 780px; z-index: 1; pointer-events: none; opacity: 0; mix-blend-mode: screen; filter: blur(12px); overflow: hidden;
  /* 6.33: from the vault up to the top of the picture – the logo floats in its middle */
  background: linear-gradient(0deg, rgb(255 214 110 / .8), rgb(255 222 130 / .5) 45%, rgb(255 230 150 / .32) 75%, transparent); animation: vh-i-fade .7s .6s ease-out forwards, vh-pulse 3s 1.4s ease-in-out infinite; }
.vh-flash { position: absolute; left: -260px; top: 560px; width: 520px; height: 320px; z-index: 3; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgb(255 245 200 / .95), rgb(255 210 90 / .45) 45%, transparent); animation: vh-i-flash 1s .5s ease-out forwards; }
/* 6.34: soft bands of light that rise through the beam */
.vh-beam::before { content: ""; position: absolute; inset: 0 0 -100%; background: repeating-linear-gradient(0deg, transparent 0 70px, rgb(255 244 200 / .3) 110px, transparent 150px 230px);
  animation: vh-rise-light 6s linear infinite; }
@keyframes vh-rise-light { to { transform: translateY(-50%); } }
@keyframes vh-i-flash { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; transform: scale(1.15); } 100% { opacity: .55; transform: scale(1); } }
@keyframes vh-i-fade { to { opacity: 1; } }
@keyframes vh-pulse { 50% { opacity: .75; } }
@keyframes vh-spin { to { rotate: 360deg; } }
.vh-spark { position: absolute; left: 0; top: 740px; width: 8px; height: 8px; background: #ffe9a8; box-shadow: 0 0 10px 3px rgb(255 214 110 / .85); z-index: 3; opacity: 0; animation: vh-rise 2.8s linear infinite; }
.vh-spark.s1 { --x: -40px; animation-delay: .6s; } .vh-spark.s2 { --x: 30px; animation-delay: 1.15s; } .vh-spark.s3 { --x: -12px; animation-delay: 1.7s; }
.vh-spark.s4 { --x: 56px; animation-delay: 2.25s; } .vh-spark.s5 { --x: -70px; animation-delay: 2.8s; }
.vh-spark.s6 { --x: 14px; animation-delay: .9s; width: 5px; height: 5px; animation-duration: 3.4s; } .vh-spark.s7 { --x: -56px; animation-delay: 1.45s; width: 6px; height: 6px; animation-duration: 3.1s; }
.vh-spark.s8 { --x: 76px; animation-delay: 2s; width: 5px; height: 5px; animation-duration: 3.6s; } .vh-spark.s9 { --x: -28px; animation-delay: 2.55s; width: 6px; height: 6px; }
.vh-spark.s10 { --x: 42px; animation-delay: 3.1s; width: 4px; height: 4px; animation-duration: 3.8s; }
@keyframes vh-rise { 0% { transform: translate(var(--x), 0) rotate(0deg); opacity: 0; } 12% { opacity: 1; } 60% { opacity: .9; } 100% { transform: translate(calc(var(--x) * 1.8), -420px) rotate(180deg); opacity: 0; } }
/* tiny motes of dust that float in the light */
.vh-mote { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%; background: #fff6d6; box-shadow: 0 0 6px 1px rgb(255 226 140 / .8); z-index: 3; pointer-events: none; opacity: 0;
  animation: vh-i-fade 1s 1.4s forwards, vh-drift var(--t) ease-in-out infinite alternate, vh-twinkle 2.3s ease-in-out infinite; animation-delay: 1.4s, var(--dl), var(--dl); }
.vh-mote.m1 { --x: -90px; --y: 180px; --t: 7s; --dl: -1s; } .vh-mote.m2 { --x: 70px; --y: 240px; --t: 9s; --dl: -3s; } .vh-mote.m3 { --x: -40px; --y: 330px; --t: 8s; --dl: -5s; }
.vh-mote.m4 { --x: 104px; --y: 400px; --t: 10s; --dl: -2s; } .vh-mote.m5 { --x: -112px; --y: 470px; --t: 7.5s; --dl: -6s; } .vh-mote.m6 { --x: 30px; --y: 520px; --t: 8.5s; --dl: -4s; }
.vh-mote.m7 { --x: -10px; --y: 120px; --t: 11s; --dl: -7s; } .vh-mote.m8 { --x: 120px; --y: 140px; --t: 9.5s; --dl: -8s; } .vh-mote.m9 { --x: -70px; --y: 590px; --t: 6.5s; --dl: -2.5s; }
.vh-mote.m10 { --x: 80px; --y: 600px; --t: 10.5s; --dl: -9s; }
@keyframes vh-drift { from { transform: translate(0, 0); } to { transform: translate(18px, -46px); } }
@keyframes vh-twinkle { 0%, 100% { scale: 1; } 50% { scale: .4; } }

.vh-logo { position: absolute; left: -140px; top: 210px; width: 280px; height: 280px; object-fit: contain; z-index: 4; opacity: 0;
  filter: drop-shadow(0 12px 0 rgb(0 0 0 / .3)) drop-shadow(0 0 30px rgb(255 220 130 / .65));
  will-change: transform, opacity; cursor: pointer;
  animation: vh-i-emerge 1.1s .55s cubic-bezier(.22, .8, .3, 1.08) forwards, vh-float 4s 1.65s ease-in-out infinite; }
@keyframes vh-i-emerge { 0% { opacity: 0; transform: translateY(420px) scale(.1); } 12% { opacity: 1; } 35% { transform: translateY(300px) scale(.32); } 100% { opacity: 1; transform: none; } }
@keyframes vh-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

.vh-vault { position: absolute; left: -159px; top: 640px; width: 318px; height: 310px; padding: 0; border: 0; background: none; cursor: pointer; z-index: 2; animation: vh-i-wobble .45s ease-in-out; }
.vh-vault:focus-visible { outline: 3px solid #ffd27a; outline-offset: 6px; border-radius: 12px; }
.vh-vault i { position: absolute; inset: 0; image-rendering: pixelated; }
.vh-vault .back { background: url(/assets/~0788f8031f/img/home/vault-back.png) 0 0 / 1200% 100% no-repeat; z-index: 2; animation: vh-i-open .55s .32s steps(11) forwards; }
.vh-vault .front { background: url(/assets/~0788f8031f/img/home/vault-front.png) 0 0 / 100% 100% no-repeat; z-index: 5; }
.vh-vault::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -14px; height: 34px; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / .5), transparent); z-index: 1; }
@keyframes vh-i-open { to { background-position: 100% 0; } }
@keyframes vh-i-wobble { 0%, 100% { rotate: 0deg; } 20% { rotate: -2.5deg; } 40% { rotate: 2.5deg; } 60% { rotate: -1.5deg; } 80% { rotate: 1deg; } }

.vh-pl { position: absolute; top: 470px; width: 394px; height: 475px; z-index: 3; }
.vh-pl i { position: absolute; inset: 0; background: 0 0 / 1600% 100% no-repeat; image-rendering: pixelated; filter: drop-shadow(0 16px 14px rgb(0 0 0 / .35)); transform-origin: 50% 96%;
  animation: vh-i-lift 1.15s .58s steps(15) forwards, vh-breathe 3.6s 1.9s ease-in-out infinite; }
.vh-pl.r i { animation-delay: .64s, 2.3s; }
/* 6.34: after the lift they stand and breathe (one picture of 16, the arm with the item stays up) */
@keyframes vh-breathe { 0%, 100% { scale: 1 1; translate: 0 0; } 50% { scale: 1.006 1.014; translate: 0 -2px; } }
.vh-pl.l i { background-image: url(/assets/~0788f8031f/img/home/madrux-motion.png); } .vh-pl.r i { background-image: url(/assets/~0788f8031f/img/home/kraspone-motion.png); }
@keyframes vh-i-lift { to { background-position: 100% 0; } }
.vh-pl.l { left: -470px; } .vh-pl.r { left: 76px; }
.vh-pl::after { content: ""; position: absolute; left: 28%; right: 28%; bottom: -8px; height: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / .45), transparent); z-index: -1; }
.vh-tag { position: absolute; top: 27%; left: 30%; transform: translateX(-50%); z-index: 2; padding: 4px 11px; background: rgb(0 0 0 / .55); color: #ffcc33; font: 700 16px/1.2 var(--font, system-ui); white-space: nowrap; border-radius: 4px; }
.vh-pl.r .vh-tag { left: 70%; }
.vh.night .vh-pl i { filter: brightness(.8) drop-shadow(0 16px 14px rgb(0 0 0 / .35)); }

.vh-loot { position: absolute; left: -24px; top: 700px; width: 48px; height: 48px; z-index: 6; image-rendering: pixelated; opacity: 0;
  will-change: transform; animation: vh-i-toss .85s cubic-bezier(.3, .7, .4, 1) forwards, vh-bob 2.2s ease-in-out infinite; animation-delay: var(--t), calc(var(--t) + .85s); }
.vh-loot.i1 { --t: .72s; --x: -215px; --y: 205px; } .vh-loot.i2 { --t: .8s; --x: 205px; --y: 214px; } .vh-loot.i3 { --t: .88s; --x: -150px; --y: 238px; }
.vh-loot.i4 { --t: .96s; --x: 150px; --y: 240px; } .vh-loot.i5 { --t: 1.04s; --x: -280px; --y: 222px; } .vh-loot.i6 { --t: 1.12s; --x: 275px; --y: 230px; }
@keyframes vh-i-toss { 0% { opacity: 1; transform: translate(0, 0) scale(.4); } 45% { transform: translate(calc(var(--x) * .55), -190px) scale(1); } 100% { opacity: 1; transform: translate(var(--x), var(--y)) scale(1); } }
@keyframes vh-bob { 0%, 100% { translate: 0 0; filter: drop-shadow(0 0 8px rgb(255 230 140 / .7)); } 50% { translate: 0 -10px; filter: drop-shadow(0 0 14px rgb(255 230 140 / .95)); } }

.vh-farm { position: absolute; z-index: 2; image-rendering: pixelated; filter: drop-shadow(0 8px 6px rgb(0 0 0 / .35)); transform-origin: 50% 100%; animation: vh-hop2 2.6s ease-in-out infinite, vh-wander 7s ease-in-out infinite alternate; }
.vh-farm.pig { left: -640px; top: 737px; width: 260px; --m: 20px; }
.vh-farm.sheep { left: 380px; top: 660px; width: 296px; --m: -16px; animation-duration: 3.2s, 8s; }
@keyframes vh-hop2 { 0%, 100% { translate: 0 0; rotate: 0deg; } 30% { translate: 0 -3px; rotate: -.6deg; } 60% { translate: 0 0; rotate: .4deg; } }
.vh.night .vh-farm { filter: brightness(.6) drop-shadow(0 8px 6px rgb(0 0 0 / .35)); }

/* the six shortcuts around the logo */
/* 6.39: they pop out of the logo one after the other (left, right, left …) – spring in with a little overshoot, a glow
   ring when they land, the icon bounces and a shine runs over the card */
.vh-b { position: absolute; width: 224px; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; color: #f1f4f8; text-decoration: none; z-index: 7; overflow: hidden;
  background: linear-gradient(135deg, rgb(34 40 52 / .95), rgb(16 19 26 / .95)); border: 2px solid color-mix(in srgb, var(--c, #2c323d) 42%, #2c323d);
  box-shadow: 0 6px 0 #0a0c10, 0 12px 24px rgb(0 0 0 / .3), inset 0 1px 0 rgb(255 255 255 / .08); opacity: 0;
  animation: vh-i-pop .62s cubic-bezier(.2, 1.35, .45, 1) forwards, vh-i-ring .7s ease-out forwards; animation-delay: var(--t), calc(var(--t) + .32s);
  transition: translate var(--mv-dur-fast) var(--mv-ease-out), border-color var(--mv-dur-fast) var(--mv-ease-out); }
.vh-b:hover, .vh-b:focus-visible { translate: 0 -3px; text-decoration: none; color: #fff; border-color: var(--c, #3a4250); }
.vh-b::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%);
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .28) 48%, rgb(255 255 255 / .06) 56%, transparent 70%);
  animation: vh-i-shine .8s ease-out forwards; animation-delay: calc(var(--t) + .4s); }
@keyframes vh-i-pop {
  0% { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(.15) rotate(var(--rot, -6deg)); }
  25% { opacity: 1; }
  65% { transform: translate(0, 0) scale(1.07) rotate(0deg); }
  82% { transform: scale(.97); }
  100% { opacity: 1; transform: none; } }
@keyframes vh-i-ring { 0% { box-shadow: 0 6px 0 #0a0c10, 0 12px 24px rgb(0 0 0 / .3), inset 0 1px 0 rgb(255 255 255 / .08), 0 0 0 0 color-mix(in srgb, var(--c, #fff) 70%, transparent); }
  100% { box-shadow: 0 6px 0 #0a0c10, 0 12px 24px rgb(0 0 0 / .3), inset 0 1px 0 rgb(255 255 255 / .08), 0 0 0 16px transparent; } }
@keyframes vh-i-shine { to { transform: translateX(130%); } }
@keyframes vh-i-icon { 0% { transform: scale(.3) rotate(-25deg); } 55% { transform: scale(1.22) rotate(8deg); } 80% { transform: scale(.94) rotate(-3deg); } 100% { transform: none; } }
.vh-b.l1 { left: -450px; top: 96px; --fx: 320px; --fy: 90px; --t: 1.25s; } .vh-b.l2 { left: -500px; top: 190px; --fx: 370px; --fy: 0px; --t: 1.57s; } .vh-b.l3 { left: -450px; top: 284px; --fx: 320px; --fy: -90px; --t: 1.89s; }
.vh-b.r1 { left: 226px; top: 96px; --fx: -320px; --fy: 90px; --t: 1.41s; --rot: 6deg; } .vh-b.r2 { left: 276px; top: 190px; --fx: -370px; --fy: 0px; --t: 1.73s; --rot: 6deg; } .vh-b.r3 { left: 226px; top: 284px; --fx: -320px; --fy: -90px; --t: 2.05s; --rot: 6deg; }
.vh-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; color: #fff; box-shadow: inset 0 -4px 0 rgb(0 0 0 / .25), inset 0 2px 0 rgb(255 255 255 / .2), 0 4px 14px -4px var(--c, transparent);
  background: var(--c); animation: vh-i-icon .55s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--t) + .28s); }
.vh-ic .icon { width: 21px; height: 21px; }
.vh-b b { font-family: var(--display, system-ui); font-size: 13.5px; text-transform: uppercase; letter-spacing: .02em; }
.vh-b.news, .vh-tip.news { --c: #e0911a; } .vh-b.forum, .vh-tip.forum { --c: #0d7a4a; } .vh-b.ann, .vh-tip.ann { --c: #d2453a; }
.vh-b.team, .vh-tip.team { --c: #2a8fd0; } .vh-b.portal, .vh-tip.portal { --c: #7b4fd0; } .vh-b.shop, .vh-tip.shop { --c: #c9a21a; }
/* 6.52: what is behind a shortcut – a small glass card right below it while the pointer is on it (or it has the keyboard
   focus); it takes no clicks, so the shortcut below stays usable */
.vh-tip { position: absolute; z-index: 8; width: 224px; padding: 9px 12px 10px; border-radius: 10px; pointer-events: none;
  font: 600 12.5px/1.35 var(--font, system-ui); color: #e9edf4; background: rgb(12 15 22 / .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--c, #3a4250) 55%, transparent); box-shadow: 0 14px 30px -12px rgb(0 0 0 / .7), inset 3px 0 0 var(--c, #3a4250);
  opacity: 0; translate: 0 -6px; visibility: hidden;
  transition: opacity var(--mv-dur-fast) var(--mv-ease-in), translate var(--mv-dur-fast) var(--mv-ease-in), visibility 0s var(--mv-dur-fast); }
.vh-tip::before { content: ""; position: absolute; left: 22px; top: -6px; width: 10px; height: 10px; rotate: 45deg; background: inherit; border-left: inherit; border-top: inherit; }
.vh-b:is(:hover, :focus-visible) + .vh-tip { opacity: 1; translate: 0 0; visibility: visible;
  transition: opacity var(--mv-dur-base) var(--mv-ease-out) .12s, translate var(--mv-dur-base) var(--mv-ease-out) .12s, visibility 0s; }
.vh-tip.l1 { left: -450px; top: 160px; } .vh-tip.l2 { left: -500px; top: 254px; } .vh-tip.l3 { left: -450px; top: 348px; }
.vh-tip.r1 { left: 226px; top: 160px; } .vh-tip.r2 { left: 276px; top: 254px; } .vh-tip.r3 { left: 226px; top: 348px; }
@media (hover: none), (max-width: 900px) { .vh-tip { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .vh *, .vh *::after { animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .vh-spark, .vh-bird, .vh-mote { display: none; }
  .vh-beam::before { animation: none; }
}
@media (max-width: 900px) {
  .vh { height: 950px; }
  .vh-top { top: 14px; }
  .vh .server-card .server-icon, .vh .server-status .state, .vh .server-status .ping { display: none; }
  .vh .server-card { gap: 10px; padding: 7px 12px; }
  .vh .server-address { font-size: .95rem; gap: 8px; flex-wrap: nowrap; white-space: nowrap; flex-direction: row; }
  .vh-logo { left: -100px; top: 92px; width: 196px; height: 196px; }
  @keyframes vh-i-emerge { 0% { opacity: 0; transform: translateY(680px) scale(.1); } 12% { opacity: 1; } 35% { transform: translateY(560px) scale(.25); } 100% { opacity: 1; transform: none; } }
  .vh-b { width: 168px; flex-direction: column; text-align: center; gap: 6px; padding: 10px 6px; }
  .vh-b b { font-size: 12px; }
  .vh-b.l1 { left: -176px; top: 304px; } .vh-b.r1 { left: 8px; top: 304px; } .vh-b.l2 { left: -176px; top: 402px; }
  .vh-b.r2 { left: 8px; top: 402px; } .vh-b.l3 { left: -176px; top: 500px; } .vh-b.r3 { left: 8px; top: 500px; }
  .vh-vault { left: -80px; top: 760px; width: 160px; height: 156px; }
  .vh-pl { top: 672px; width: 196px; height: 236px; } .vh-pl.l { left: -196px; } .vh-pl.r { left: 0; }
  .vh-tag { font-size: 11px; padding: 2px 7px; }
  .vh-flash { left: -140px; top: 720px; width: 280px; height: 180px; }
  .vh-beam { left: -70px; top: 0; width: 140px; height: 790px; }
  .vh-rays { left: -180px; top: 4px; width: 360px; height: 360px; }
  .vh-spark { top: 790px; }
  .vh-mote { translate: 0 -40px; } .vh-mote.m4, .vh-mote.m5, .vh-mote.m8 { display: none; }
  .vh-loot, .vh-mob, .vh-bird { display: none !important; }
  .vh-farm.pig { left: -190px; top: 846px; width: 76px; } .vh-farm.sheep { left: 118px; top: 820px; width: 84px; }
}

/* 7.8.0: the sky of the scene takes the colours of the design (Nether, The End, Ocean, Cherry grove – theme-shared.js
   sets --mv-scene-tint); the stage in front of it keeps its own colours. Pictures and the 3D scene alike. */
.vh-tint { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--mv-scene-tint, none); mix-blend-mode: color; opacity: .78; }
.vh.night .vh-tint { opacity: .55; }
/* 7.8.0: phones – the intro bar now sits above the scene, so the stage is shorter: the six shortcuts in two rows of
   three, the vault and the players move up (the 3D scene reads these boxes, so it follows) */
@media (max-width: 900px) {
  .vh { height: 770px; }
  @keyframes vh-i-emerge { 0% { opacity: 0; transform: translateY(500px) scale(.1); } 12% { opacity: 1; } 35% { transform: translateY(380px) scale(.25); } 100% { opacity: 1; transform: none; } }
  .vh-b { width: 112px; padding: 9px 4px; gap: 5px; }
  .vh-b b { font-size: 11px; }
  .vh-ic { width: 34px; height: 34px; }
  .vh-b.l1 { left: -172px; top: 304px; } .vh-b.r1 { left: -56px; top: 304px; } .vh-b.l2 { left: 60px; top: 304px; }
  .vh-b.r2 { left: -172px; top: 392px; } .vh-b.l3 { left: -56px; top: 392px; } .vh-b.r3 { left: 60px; top: 392px; }
  .vh-vault { top: 580px; }
  .vh-pl { top: 492px; }
  .vh-flash { top: 540px; }
  .vh-beam { height: 610px; }
  .vh-spark { top: 610px; }
  .vh-farm.pig { top: 666px; } .vh-farm.sheep { top: 640px; }
}
@media (max-width: 360px) {
  .vh-b { width: 100px; } .vh-b b { font-size: 10px; }
  .vh-b.l1, .vh-b.r2 { left: -156px; } .vh-b.r1, .vh-b.l3 { left: -50px; } .vh-b.l2, .vh-b.r3 { left: 56px; }
}