/* Minecraft scene above the footer, v2.
 *
 * A small night-time diorama: a stepped pixel sky with stars and a square
 * moon, drifting blocky clouds, mountains and tree-covered hills, then a strip
 * of real grass blocks with flowers and torches. Players are 3D models built
 * from their skins; Steve mines ore blocks that crack, burst and drop loot.
 *
 * Everything is measured in "texels": one Minecraft pixel, --s screen pixels
 * wide, so the art stays crisp at any size. The scenery is painted once onto
 * canvases by mc.js; CSS only places the layers and runs the ambient motion.
 */

/* ── the stage and its layers ───────────────────────────────────────────── */
.mcs-stage {
  --s: 4; --g: 24;                               /* texel size; ground height in texels */
  --px: 0;                                        /* mouse, -1 left .. 1 right, for parallax */
  position: relative; height: calc(var(--s) * 96px); margin-top: 48px;
  overflow: hidden; user-select: none; isolation: isolate;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.mcs-layer { position: absolute; left: 0; pointer-events: none; image-rendering: pixelated; }
.mcs-sky        { top: 0; z-index: 0; }
.mcs-twinkle    { top: 0; z-index: 1; animation: mcs-twinkle 2.6s ease-in-out infinite alternate; }
.mcs-twinkle.b  { animation-duration: 3.4s; animation-delay: -1.7s; }
@keyframes mcs-twinkle { from { opacity: .1; } to { opacity: 1; } }
.mcs-clouds     { top: calc(var(--s) * 9px); z-index: 3; animation: mcs-clouds 300s linear infinite; }
@keyframes mcs-clouds { to { translate: -50% 0; } }
.mcs-far        { bottom: calc(var(--s) * (var(--g) - 2) * 1px); z-index: 4; translate: calc(var(--px) * -8px) 0; transition: translate 1.4s cubic-bezier(.2, .7, .2, 1); }
.mcs-hills      { bottom: calc(var(--s) * (var(--g) - 2) * 1px); z-index: 5; translate: calc(var(--px) * -16px) 0; transition: translate 1.4s cubic-bezier(.2, .7, .2, 1); }
.mcs-ground     { bottom: 0; z-index: 6; }
.mcs-flora      { bottom: calc(var(--s) * (var(--g) + 1) * 1px); z-index: 7; }
.mcs-flora.front { z-index: 10; bottom: calc(var(--s) * (var(--g) - 1) * 1px); }
.mcs-particles  { top: 0; z-index: 11; }

.mcs-moon {
  position: absolute; z-index: 2; top: calc(var(--s) * 8px); right: 13%;
  width: calc(var(--s) * 16px); height: calc(var(--s) * 16px);
  background-size: 100% 100%; image-rendering: pixelated;
  box-shadow: 0 0 calc(var(--s) * 12px) calc(var(--s) * 4px) rgba(215, 222, 255, .16), 0 0 calc(var(--s) * 40px) calc(var(--s) * 10px) rgba(160, 180, 255, .07);
  translate: calc(var(--px) * -4px) 0; transition: translate 1.4s cubic-bezier(.2, .7, .2, 1);
}

/* torches on the ground, with flickering light */
.mcs-torch {
  position: absolute; z-index: 8; bottom: calc(var(--s) * (var(--g) + 1) * 1px);
  width: calc(var(--s) * 16px); height: calc(var(--s) * 16px);
  background-size: 100% 100%; image-rendering: pixelated; pointer-events: none;
}
.mcs-torch::before {
  content: ''; position: absolute; left: 50%; top: 30%; z-index: -1;
  width: calc(var(--s) * 70px); height: calc(var(--s) * 70px); translate: -50% -50%;
  background: radial-gradient(circle, rgba(255, 176, 64, .30), rgba(255, 140, 40, .10) 38%, transparent 68%);
  mix-blend-mode: screen; animation: mcs-flicker 1.9s steps(7) infinite;
}
@keyframes mcs-flicker {
  0% { opacity: .82; scale: 1; } 15% { opacity: 1; scale: 1.05; } 30% { opacity: .78; scale: .97; }
  45% { opacity: .95; scale: 1.02; } 60% { opacity: .74; scale: .98; } 80% { opacity: .92; scale: 1.03; } 100% { opacity: .85; scale: 1; }
}

.mcs-paused, .mcs-paused * { animation-play-state: paused !important; }

/* ── a player ───────────────────────────────────────────────────────────── */
.mcp {
  position: absolute; z-index: 9; bottom: calc(var(--s) * (var(--g) + 1.5) * 1px);
  width: calc(var(--s) * 16px); height: calc(var(--s) * 32px);
  perspective: 900px; perspective-origin: 50% 25%; cursor: pointer;
  --yaw: 0deg;
}
.mcp-rig { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(var(--yaw)); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.mcp-flip .mcp-rig { transform: rotateY(var(--yaw)) rotateZ(180deg); }
.mcp-part, .mcp-layer, .mcp-look { position: absolute; transform-style: preserve-3d; }
.mcp-layer { inset: 0; transform: scale3d(var(--k), var(--k), var(--k)); }
.mcp-look { transform-origin: 50% 100%; }                 /* the neck: heads turn here to follow the cursor */
.mcp-face {
  position: absolute; background-image: var(--skin);
  background-size: calc(var(--s) * 64px) calc(var(--s) * 64px);
  background-repeat: no-repeat; image-rendering: pixelated; backface-visibility: hidden;
}
/* simple directional light, so the boxes read as solid rather than flat */
.mcp-face.f-top    { filter: brightness(1.12); }
.mcp-face.f-left   { filter: brightness(.86); }
.mcp-face.f-right  { filter: brightness(.74); }
.mcp-face.f-back   { filter: brightness(.66); }
.mcp-face.f-bottom { filter: brightness(.52); }
.mcp-shadow {
  position: absolute; left: 6%; right: 6%; bottom: calc(var(--s) * -1.5px); height: calc(var(--s) * 3px);
  border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent);
  transition: transform .3s ease, opacity .3s ease;
}

.mcp-tag {
  position: absolute; left: 50%; bottom: calc(100% + var(--s) * 3px); translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px; pointer-events: none;
}
.mcp-name {
  font: 600 12px/1 'Inter', system-ui, sans-serif; letter-spacing: .02em; white-space: nowrap;
  color: #fff; background: rgba(0, 0, 0, .45); padding: 3px 6px 4px; border-radius: 2px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .6);
}
.mcp-name.is-you { color: #f5c518; }
/* Steve's experience bar, drawn like the game's */
.mcp-xp { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.mcp-lvl { font: 800 11px/1 'Inter', system-ui, sans-serif; color: #80ff20; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.mcp-bar { width: 44px; height: 5px; background: #1b1b1b; border: 1px solid #000; }
.mcp-bar i { display: block; height: 100%; width: 0%; background: linear-gradient(#b8f94d, #62c81d); transition: width .35s ease; }
.mcp-lvl.up { animation: mcp-lvlup .7s ease; }
@keyframes mcp-lvlup { 30% { scale: 1.6; color: #f5ff6b; } }

.mcp-say {
  position: absolute; left: 50%; bottom: calc(100% + var(--s) * 3px + 44px);
  translate: -50% 0; scale: 0; transform-origin: 50% 100%;
  font: 700 13px/1 'Inter', system-ui, sans-serif; color: #111; white-space: nowrap;
  background: #fff; padding: 6px 9px; border-radius: 8px; pointer-events: none;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .6); transition: scale .25s cubic-bezier(.3, 1.6, .5, 1);
}
.mcp-say::after { content: ''; position: absolute; left: 50%; top: 100%; translate: -50% 0; border: 6px solid transparent; border-top-color: #fff; }
.mcp-say.is-on { scale: 1; }

/* ── poses ──────────────────────────────────────────────────────────────── */
.mcp .mcp-arm, .mcp .mcp-leg, .mcp .mcp-head, .mcp .mcp-look, .mcp-rig { will-change: transform; }

.mcp.idle .mcp-arm.r { animation: mcp-breathe-r 3.4s ease-in-out infinite; }
.mcp.idle .mcp-arm.l { animation: mcp-breathe-l 3.4s ease-in-out infinite; }
.mcp.idle .mcp-part.mcp-body { animation: mcp-breathe-body 3.4s ease-in-out infinite; }
@keyframes mcp-breathe-r { 50% { transform: rotateZ(5deg) rotateX(-3deg); } }
@keyframes mcp-breathe-l { 50% { transform: rotateZ(-5deg) rotateX(3deg); } }
@keyframes mcp-breathe-body { 50% { transform: scaleY(1.015); } }

.mcp.walk .mcp-leg.r { animation: mcp-leg .72s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
.mcp.walk .mcp-leg.l { animation: mcp-leg .72s cubic-bezier(.45, 0, .55, 1) infinite alternate-reverse; }
.mcp.walk .mcp-arm.r { animation: mcp-arm .72s cubic-bezier(.45, 0, .55, 1) infinite alternate-reverse; }
.mcp.walk .mcp-arm.l { animation: mcp-arm .72s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
.mcp.walk .mcp-rig   { animation: mcp-bob .36s ease-in-out infinite alternate; }
@keyframes mcp-leg { from { transform: rotateX(36deg); } to { transform: rotateX(-36deg); } }
@keyframes mcp-arm { from { transform: rotateX(32deg); } to { transform: rotateX(-32deg); } }
@keyframes mcp-bob { from { translate: 0 0; } to { translate: 0 calc(var(--s) * -1px); } }

.mcp.wave .mcp-arm.r { animation: mcp-wave .5s ease-in-out infinite alternate; }
@keyframes mcp-wave { from { transform: rotateZ(152deg); } to { transform: rotateZ(118deg); } }

/* someone holding a tool keeps it out in front, ready, rather than letting it hang into the ground */
.mcp.has-tool.idle .mcp-arm.r { animation: none; transform: rotateX(38deg); transition: transform .3s ease; }

/* mining: a wind-up, a fast strike, a small recoil */
.mcp.mine .mcp-arm.r { animation: mcp-chop .5s cubic-bezier(.55, 0, .75, .4) infinite; }
.mcp.mine .mcp-arm.l { transform: rotateX(18deg); }
.mcp.mine .mcp-head  { transform: rotateX(20deg) rotateY(-8deg); }
.mcp.mine .mcp-part.mcp-body { transform: rotateX(4deg); }
@keyframes mcp-chop {
  0%   { transform: rotateX(165deg); }
  55%  { transform: rotateX(50deg); }
  62%  { transform: rotateX(58deg); }
  100% { transform: rotateX(165deg); }
}

.mcp.dance .mcp-rig   { animation: mcp-bounce .42s ease-in-out infinite alternate; }
.mcp.dance .mcp-arm.r { animation: mcp-dance-r .84s ease-in-out infinite; }
.mcp.dance .mcp-arm.l { animation: mcp-dance-l .84s ease-in-out infinite; }
.mcp.dance .mcp-leg.r { animation: mcp-kick .84s ease-in-out infinite; }
.mcp.dance .mcp-head  { animation: mcp-bop .42s ease-in-out infinite alternate; }
@keyframes mcp-bounce { from { translate: 0 0; } to { translate: 0 calc(var(--s) * -3px); } }
@keyframes mcp-dance-r { 0%, 100% { transform: rotateZ(160deg); } 50% { transform: rotateZ(20deg); } }
@keyframes mcp-dance-l { 0%, 100% { transform: rotateZ(-20deg); } 50% { transform: rotateZ(-160deg); } }
@keyframes mcp-kick { 0%, 100% { transform: rotateX(0); } 50% { transform: rotateX(-40deg); } }
@keyframes mcp-bop { from { transform: rotateZ(-9deg); } to { transform: rotateZ(9deg); } }

.mcp.sneak .mcp-rig  { animation: mcp-sneak .5s ease-in-out infinite alternate; }
@keyframes mcp-sneak { from { translate: 0 0; } to { translate: 0 calc(var(--s) * 3px); } }
.mcp.sneak .mcp-part.mcp-body { transform-origin: 50% 100%; animation: mcp-sneak-body .5s ease-in-out infinite alternate; }
@keyframes mcp-sneak-body { to { transform: rotateX(28deg); } }

.mcp.jump .mcp-rig { animation: mcp-jump .55s cubic-bezier(.3, .8, .4, 1); }
.mcp.jump .mcp-shadow { transform: scale(.5); opacity: .45; transition-duration: .25s; }
@keyframes mcp-jump { 0% { translate: 0 0; } 45% { translate: 0 calc(var(--s) * -12px); } 100% { translate: 0 0; } }

/* a held item: a flat sprite with a darker copy behind it for thickness */
.mcp-item {
  position: absolute; width: calc(var(--s) * 14px); height: calc(var(--s) * 14px);
  transform-style: preserve-3d; pointer-events: none;
}
.mcp-item i {
  position: absolute; inset: 0; background-image: var(--item); background-size: 100% 100%; image-rendering: pixelated;
}
.mcp-item i:nth-child(1) { transform: translateZ(calc(var(--s) * -.5px)); filter: brightness(.55); }
.mcp-item i:nth-child(2) { transform: translateZ(calc(var(--s) * .5px)); }

/* ── the block being mined ──────────────────────────────────────────────── */
.mcb {
  position: absolute; z-index: 9; bottom: calc(var(--s) * (var(--g) + 1.5) * 1px);
  width: calc(var(--s) * 16px); height: calc(var(--s) * 16px);
  perspective: 800px; perspective-origin: 30% -40%;
}
.mcb-shadow {
  position: absolute; left: -12%; right: -12%; bottom: calc(var(--s) * -2px); height: calc(var(--s) * 4px);
  border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent);
}
.mcb-cube { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(-24deg); transition: scale .2s ease; }
.mcb.hit .mcb-cube { animation: mcb-hit .14s ease; }
@keyframes mcb-hit { 40% { scale: .95; translate: calc(var(--s) * .5px) 0; } }
.mcb.gone .mcb-cube { scale: 0; transition: scale .12s ease-in; }
.mcb.place .mcb-cube { animation: mcb-place .35s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes mcb-place { from { scale: .2; translate: 0 calc(var(--s) * -4px); } to { scale: 1; translate: 0 0; } }
.mcb-face {
  position: absolute; inset: 0; background-size: 100% 100%; image-rendering: pixelated;
}
.mcb-face::after {
  content: ''; position: absolute; inset: 0; background-image: var(--crack, none);
  background-size: 100% 100%; image-rendering: pixelated;
}
.mcb-face.f-front  { transform: translateZ(calc(var(--s) * 8px)); }
.mcb-face.f-back   { transform: rotateY(180deg) translateZ(calc(var(--s) * 8px)); }
.mcb-face.f-right  { transform: rotateY(90deg) translateZ(calc(var(--s) * 8px)); filter: brightness(.7); }
.mcb-face.f-left   { transform: rotateY(-90deg) translateZ(calc(var(--s) * 8px)); filter: brightness(.86); }
.mcb-face.f-top    { transform: rotateX(90deg) translateZ(calc(var(--s) * 8px)); filter: brightness(1.14); }
.mcb-face.f-bottom { transform: rotateX(-90deg) translateZ(calc(var(--s) * 8px)); filter: brightness(.5); }
/* redstone ore glows when struck, as it does in the game */
.mcb.glow .mcb-face { box-shadow: 0 0 calc(var(--s) * 6px) rgba(255, 40, 40, .55); animation: mcb-glow .5s ease-in-out infinite alternate; }
@keyframes mcb-glow { to { filter: brightness(1.35); } }

/* the dropped item: a tiny spinning block that bobs, then flies to Steve */
.mcb-drop {
  position: absolute; z-index: 9; width: calc(var(--s) * 6px); height: calc(var(--s) * 6px);
  perspective: 400px; pointer-events: none;
}
.mcb-drop .mcb-cube { transform: none; animation: mcb-spin 1.6s linear infinite; }
.mcb-drop .mcb-face { box-shadow: none; }
.mcb-drop .mcb-face.f-front  { transform: translateZ(calc(var(--s) * 3px)); }
.mcb-drop .mcb-face.f-back   { transform: rotateY(180deg) translateZ(calc(var(--s) * 3px)); }
.mcb-drop .mcb-face.f-right  { transform: rotateY(90deg) translateZ(calc(var(--s) * 3px)); }
.mcb-drop .mcb-face.f-left   { transform: rotateY(-90deg) translateZ(calc(var(--s) * 3px)); }
.mcb-drop .mcb-face.f-top    { transform: rotateX(90deg) translateZ(calc(var(--s) * 3px)); }
.mcb-drop .mcb-face.f-bottom { transform: rotateX(-90deg) translateZ(calc(var(--s) * 3px)); }
@keyframes mcb-spin { from { transform: rotateX(-18deg) rotateY(0); } to { transform: rotateX(-18deg) rotateY(360deg); } }

@media (max-width: 640px) { .mcs-stage { --s: 3; } }
@media (prefers-reduced-motion: reduce) { .mcs-stage { display: none; } }

/* ── the promoted-server sign: an oak sign on a post, like the game's ───── */
.mcs-sign {
  /* above the players (9) so the walker passes behind it: the sign stays readable and clickable */
  position: absolute; z-index: 10; bottom: calc(var(--s) * (var(--g) + 1) * 1px);
  width: calc(var(--s) * 36px); height: calc(var(--s) * 24px);
  cursor: pointer; transform-origin: 50% 100%; outline: none;
  transition: rotate .35s cubic-bezier(.3, 1.6, .5, 1), filter .2s ease;
  filter: brightness(1.06) saturate(1.05) drop-shadow(0 calc(var(--s) * 2px) calc(var(--s) * 2px) rgba(0, 0, 0, .45));
}
.mcs-sign:hover, .mcs-sign:focus-visible { rotate: -3deg; filter: brightness(1.16) drop-shadow(0 calc(var(--s) * 2px) calc(var(--s) * 3px) rgba(0, 0, 0, .5)); }
.mcs-sign:focus-visible .mcs-sign-board { outline: 2px solid #f5c518; outline-offset: 2px; }
.mcs-sign-board {
  position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--s) * 16px);
  background-size: calc(var(--s) * 16px) calc(var(--s) * 16px); image-rendering: pixelated;
  box-shadow: inset 0 0 0 calc(var(--s) * 1px) rgba(55, 36, 12, .85);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--s) * .4px);
  padding: 0 calc(var(--s) * 1.5px); text-align: center; overflow: hidden;
}
.mcs-sign-board > * { text-shadow: 0 1px 0 rgba(255, 228, 170, .45); }
.mcs-sign-post {
  position: absolute; left: 50%; translate: -50% 0; top: calc(var(--s) * 16px);
  width: calc(var(--s) * 2px); height: calc(var(--s) * 8px);
  background-size: calc(var(--s) * 16px) calc(var(--s) * 16px); image-rendering: pixelated;
}
.mcs-sign-tag  { font: 800 max(9px, calc(var(--s) * 2.3px))/1 'Inter', system-ui, sans-serif; letter-spacing: .08em; color: #5a1d00; }
.mcs-sign-name {
  font: 800 max(13px, calc(var(--s) * 3.9px))/1.1 'Inter', system-ui, sans-serif; color: #1f1204;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* the sign's text never drops below a readable size, whatever the scene's scale */
.mcs-sign-sub  { font: 700 max(10px, calc(var(--s) * 2.7px))/1.1 'Inter', system-ui, sans-serif; color: #1f1204; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.mcs-sign-pop {
  position: absolute; left: 50%; bottom: calc(100% + 8px); translate: -50% 0; scale: 0; transform-origin: 50% 100%;
  font: 700 12.5px/1 'Inter', system-ui, sans-serif; color: #111; white-space: nowrap;
  background: #fff; padding: 6px 9px; border-radius: 8px; pointer-events: none;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .6); transition: scale .25s cubic-bezier(.3, 1.6, .5, 1);
}
.mcs-sign-pop::after { content: ''; position: absolute; left: 50%; top: 100%; translate: -50% 0; border: 6px solid transparent; border-top-color: #fff; }
.mcs-sign-pop.is-on { scale: 1; }