/* ============================================================
   MINERCRAFT.SE — "THE DESCENT"
   The page is the game: scrolling digs from the surface (Y 64)
   down to bedrock (Y −64). HUD, hotbar, XP bar, advancements,
   chat — all rendered as Minecraft UI. CSP-strict: no inline.
   ============================================================ */

:root {
  --font-pixel: 'Press Start 2P', monospace;
  --font-body: 'Bricolage Grotesque', system-ui, sans-serif;
  --xp-green: #7EFC20;
  --mc-yellow: #FFFF55;
  --mc-red: #FF5555;
  --sky-1: #79c6ff;
  --sky-2: #cfeeff;
  --ink: #14290e;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: #0B0B0D;
  color: #e8e8ec;
  overflow-x: hidden;
  cursor: url(/assets/icons/cursor_pick.svg) 4 4, crosshair;
  -webkit-font-smoothing: antialiased;
}
a, button { cursor: pointer; }

::selection { background: var(--xp-green); color: #06140a; }
:focus-visible { outline: 3px solid #FFE34F; outline-offset: 2px; }

img { image-rendering: pixelated; }

.skip {
  position: fixed; top: -60px; left: 16px; z-index: 1000;
  font-family: var(--font-pixel); font-size: 10px;
  background: #000; color: #fff; padding: 12px 16px;
  text-decoration: none; transition: top .2s;
}
.skip:focus-visible { top: 12px; }

/* ============ loading screen ============ */
#loader { display: none; }
html.js #loader {
  position: fixed; inset: 0; z-index: 999;
  background: #3a2a18 url(/assets/textures/dirt.svg) 0 0 / 64px 64px;
  image-rendering: pixelated;
  display: grid; place-items: center;
  transition: opacity .45s;
}
#loader::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.load-box { position: relative; text-align: center; color: #fff; font-family: var(--font-pixel); font-size: 12px; }
.load-bar { width: 280px; height: 10px; border: 2px solid #fff; margin-top: 20px; }
.load-bar i { display: block; height: 100%; width: 0; background: var(--xp-green); animation: loadfill .8s ease-out forwards; }
@keyframes loadfill { to { width: 100%; } }
#loader.done { opacity: 0; pointer-events: none; }

/* ============ cave-darkness vignette (depth-driven) ============ */
.vignette {
  position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 110% 85% at 50% 42%, transparent 38%, rgba(0,0,0,.92) 100%);
}

/* ============ F3 debug HUD ============ */
.debug {
  position: fixed; top: 10px; left: 10px; z-index: 100; pointer-events: none;
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  font-family: var(--font-pixel); font-size: 8px; line-height: 1.7;
}
.debug span { background: rgba(16,16,16,.6); color: #e0e0e0; padding: 4px 7px; }
.debug b { color: var(--xp-green); font-weight: 400; }
@media (max-width: 720px) { .debug span:nth-child(n+2) { display: none; } }

/* ============ depth rail (right edge) ============ */
.depth-rail {
  position: fixed; right: 22px; top: 50%; transform: translateY(-50%);
  height: 58vh; width: 4px; background: rgba(255,255,255,.16);
  z-index: 100; pointer-events: none;
}
.depth-rail .mark {
  position: absolute; right: 14px; transform: translateY(-50%);
  font-family: var(--font-pixel); font-size: 8px;
  color: rgba(255,255,255,.6); white-space: nowrap;
  text-shadow: 1px 1px 0 #000;
}
.m1 { top: 0; } .m2 { top: 50%; } .m3 { top: 100%; }
#depth-dot {
  position: absolute; left: 50%; top: 0; width: 12px; height: 12px;
  background: var(--xp-green); border: 2px solid #000;
  transform: translate(-50%,-50%);
}
@media (max-width: 980px) { .depth-rail { display: none; } }

/* ============ XP bar (scroll progress) ============ */
.xp {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 86px;
  width: min(540px, 72vw); z-index: 100; pointer-events: none; text-align: center;
}
.xp b {
  font-family: var(--font-pixel); font-size: 12px; color: var(--xp-green);
  text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000;
  display: block; margin-bottom: 4px; font-weight: 400;
}
.xp-track { height: 10px; background: #161616; border: 2px solid #000; box-shadow: inset 0 0 0 1px #3a3a3a; }
#xp-fill { display: block; height: 100%; width: 0; background: linear-gradient(180deg, #a4ff5a, #56cf17); }

/* ============ hotbar nav ============ */
.hotbar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 100;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 3px;
  max-width: calc(100vw - 16px);
  background: rgba(8,8,8,.74); padding: 4px;
  border: 3px solid #000; box-shadow: inset 0 0 0 2px #3c3c3c;
}
.slot {
  width: 50px; height: 50px; display: grid; place-items: center; position: relative;
  border: 2px solid; border-color: #272727 #6b6b6b #6b6b6b #272727;
  background: rgba(90,90,90,.22);
}
a.slot { transition: background .15s; }
a.slot:hover, a.slot:focus-visible { background: rgba(255,255,255,.16); }
.slot.active { box-shadow: 0 0 0 3px #fff; border-color: #fff; }
.slot .tip {
  position: absolute; bottom: calc(100% + 16px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; pointer-events: none;
  background: rgba(16,0,16,.94); border: 2px solid #4a1a8c;
  color: #fff; font-family: var(--font-pixel); font-size: 9px;
  padding: 9px 11px; opacity: 0; transition: opacity .12s;
}
.slot:hover .tip, .slot:focus-visible .tip { opacity: 1; }
@media (max-width: 600px) {
  /* keep 40px+ tap targets; the hotbar wraps to two rows instead of shrinking */
  .slot { width: 42px; height: 42px; }
  .slot img { width: 26px; height: 26px; }
  .xp { bottom: 70px; }
}
@media (max-width: 430px) {
  /* nine 40px slots no longer fit one row; lift the XP bar above the wrapped hotbar */
  .xp { bottom: 116px; }
}
@media (max-width: 380px) {
  .slot { width: 40px; height: 40px; }
  .slot img { width: 24px; height: 24px; }
}

/* ============ game chat (toasts) ============ */
.chat { position: fixed; left: 14px; bottom: 130px; z-index: 100; pointer-events: none; }
.chat-line {
  background: rgba(0,0,0,.6); color: #fff;
  font-family: var(--font-pixel); font-size: 9px; line-height: 1.8;
  padding: 8px 11px; margin-top: 4px; max-width: 360px;
  opacity: 1; transition: opacity .6s;
}
.chat-line b { color: var(--mc-yellow); font-weight: 400; }
.chat-line.fade { opacity: 0; }

/* ============ shared section bits ============ */
main { position: relative; }
section, footer { position: relative; }
.sect-inner { position: relative; z-index: 2; max-width: 1060px; margin: 0 auto; padding: 130px 84px; }
@media (max-width: 980px) { .sect-inner { padding: 100px 24px; } }

h2 {
  font-family: var(--font-pixel); font-size: clamp(18px, 4vw, 34px);
  color: #fff; text-shadow: 3px 3px 0 rgba(0,0,0,.5);
  letter-spacing: 2px; line-height: 1.5; margin-bottom: 18px;
}
.lead { color: #c9c9d2; font-size: clamp(15px, 2vw, 17.5px); line-height: 1.7; max-width: 580px; margin-bottom: 48px; }

.chatline {
  display: inline-block; font-family: var(--font-pixel); font-size: 9px; line-height: 1.8;
  color: #fff; background: rgba(0,0,0,.5); padding: 9px 12px; margin-bottom: 26px;
}
.chatline b { color: var(--mc-yellow); font-weight: 400; }

/* stratum cross-section strips */
.strata { height: 48px; background-size: 48px 48px; background-repeat: repeat; image-rendering: pixelated; position: relative; z-index: 2; }
.grass-line { background-image: url(/assets/textures/grass_side.svg); }
.bedrock-line { background-image: url(/assets/textures/bedrock.svg); }

/* textured side walls (the mineshaft you dig through) */
.wall {
  position: absolute; top: 0; bottom: 0; width: 56px; z-index: 1;
  background-size: 56px 56px; background-repeat: repeat; image-rendering: pixelated;
}
.wl { left: 0; box-shadow: inset -26px 0 32px rgba(0,0,0,.55); }
.wr { right: 0; box-shadow: inset 26px 0 32px rgba(0,0,0,.55); }
#mineshaft .wall, #factory .wall { background-image: url(/assets/textures/stone.svg); }
#community .wall { background-image: url(/assets/textures/deepslate.svg); }
@media (max-width: 980px) { .wall, .torch { display: none; } }

/* wall torches */
.torch {
  position: absolute; z-index: 2; width: 30px; height: 30px;
  background: url(/assets/icons/torch.svg) center / contain no-repeat;
  image-rendering: pixelated;
}
.torch::after {
  content: ''; position: absolute; inset: -42px;
  background: radial-gradient(circle, rgba(255,176,56,.42), transparent 64%);
  animation: flicker 2.3s ease-in-out infinite;
}
@keyframes flicker {
  0%, 100% { opacity: .85; transform: scale(1); }
  45%      { opacity: 1;   transform: scale(1.12); }
  70%      { opacity: .7;  transform: scale(.94); }
}
.t1 { left: 66px; top: 140px; }
.t2 { right: 66px; top: 420px; animation-delay: -1s; }

/* ============ SURFACE (hero) ============ */
#surface {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(180deg, var(--sky-1) 0%, #a8dcff 55%, var(--sky-2) 100%);
  overflow: hidden;
}
.sun {
  position: absolute; top: 9%; right: 13%; width: 88px; height: 88px;
  background: #FDF6B8; box-shadow: 0 0 90px 24px rgba(253,246,184,.6);
}
.cloud {
  position: absolute; left: -240px; height: 26px; width: 170px;
  background: #fff; opacity: .92;
  animation: cloudDrift var(--cd, 90s) linear infinite;
}
.cloud::after { content: ''; position: absolute; left: 28px; top: -18px; width: 64%; height: 18px; background: #fff; }
.c1 { top: 13%; --cd: 85s; }
.c2 { top: 27%; --cd: 120s; animation-delay: -50s; transform: scale(.7); }
.c3 { top: 19%; --cd: 100s; animation-delay: -78s; transform: scale(1.25); }
@keyframes cloudDrift { to { translate: calc(100vw + 480px) 0; } }

.hero-inner {
  position: relative; z-index: 3; text-align: center;
  max-width: 980px; margin: 0 auto; padding: 140px 24px 90px;
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.version {
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: 3px;
  color: #2c4d1b; margin-bottom: 30px;
}

/* the title: pixel glyphs filled with actual grass-block texture */
h1 {
  font-family: var(--font-pixel);
  /* 10 glyphs at 1em each + spacing must fit: ~7vw × 10 < 100vw - padding */
  font-size: clamp(24px, 7vw, 82px);
  letter-spacing: 4px; line-height: 1.2;
  white-space: nowrap;
  color: var(--ink);
}
h1 .ch { display: inline-block; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  h1 .ch {
    background: url(/assets/textures/grass_side.svg) 0 0 / 40px 40px;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    filter: drop-shadow(3px 3px 0 rgba(18,32,8,.9)) drop-shadow(0 6px 0 rgba(0,0,0,.28));
  }
}
html.js h1 .ch { animation: blockdrop .7s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes blockdrop { from { transform: translateY(-110vh); } to { transform: translateY(0); } }

.splash {
  font-family: var(--font-pixel); font-size: clamp(8px, 1.6vw, 12px);
  color: var(--mc-yellow); text-shadow: 2px 2px 0 #3f3f00;
  transform: rotate(-9deg); transform-origin: center;
  margin: 8px 0 0 22vw;
  animation: splashPulse 1.5s ease-in-out infinite;
}
@keyframes splashPulse {
  0%, 100% { transform: rotate(-9deg) scale(1); }
  50%      { transform: rotate(-9deg) scale(1.07); }
}

.tagline {
  color: #1d3a12; font-size: clamp(16px, 2.2vw, 19px); font-weight: 500;
  line-height: 1.7; max-width: 560px; margin: 36px auto 44px;
}

/* chat-command IP pill */
.cmd {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-pixel); font-size: clamp(9px, 2.2vw, 14px);
  color: #fff; background: rgba(0,0,0,.66);
  border: 2px solid rgba(255,255,255,.28);
  padding: 18px 24px;
}
.cmd:hover { background: rgba(0,0,0,.78); }
.cmd .prompt { color: var(--xp-green); margin-right: 8px; }
.cmd .caret { width: .6em; height: 1.1em; background: #fff; margin-left: 8px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.cmd-hint { font-family: var(--font-pixel); font-size: 9px; line-height: 1.7; color: #2c4d1b; margin-top: 14px; }

.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 40px; }

/* Minecraft GUI buttons */
.mcbtn {
  display: inline-block; font-family: var(--font-pixel); font-size: 11px;
  color: #fff; text-shadow: 2px 2px 0 rgba(0,0,0,.55); text-decoration: none;
  background: #6e6e6e;
  border: 3px solid; border-color: #a3a3a3 #2f2f2f #262626 #a3a3a3;
  padding: 16px 24px; line-height: 1; text-align: center;
}
.mcbtn:hover { background: #7d8fd4; border-color: #b6c2f0 #2e3a6e #283260 #b6c2f0; }
.mcbtn:active { transform: translateY(2px); }
.mcbtn.primary { background: #3FAE1E; border-color: #74e84e #1c5a0c #174a0a #74e84e; }
.mcbtn.primary:hover { background: #4cc92a; }

/* ============ MINESHAFT (advancements) ============ */
#mineshaft {
  background: linear-gradient(180deg, #4A3622 0px, #4A3622 200px, #3A3A3E 420px, #313136 100%);
}
#mineshaft::before, #factory::before, #community::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-size: 64px 64px; background-repeat: repeat; image-rendering: pixelated;
  opacity: .14;
}
#mineshaft::before, #factory::before { background-image: url(/assets/textures/stone.svg); }

.advs { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 18px; }
.adv {
  display: flex; gap: 16px; align-items: flex-start;
  background: rgba(28,28,32,.94);
  border: 3px solid; border-color: #5a5a5a #1f1f1f #1f1f1f #5a5a5a;
  padding: 16px;
}
.adv-ico {
  width: 52px; height: 52px; flex-shrink: 0; padding: 6px;
  background: #313131;
  border: 2px solid; border-color: #1f1f1f #565656 #565656 #1f1f1f;
}
.adv-kicker { font-family: var(--font-pixel); font-size: 9px; line-height: 1.6; color: var(--mc-yellow); margin-bottom: 8px; }
.adv h3 { font-size: 19px; font-weight: 800; color: #fff; margin-bottom: 7px; }
.adv p { color: #b9b9c2; font-size: 14.5px; line-height: 1.6; }
html.js .adv { opacity: 0; transform: translateX(-46px); }
html.js .adv.in { opacity: 1; transform: none; transition: opacity .5s, transform .5s cubic-bezier(.2,.9,.3,1.15); transition-delay: calc(var(--i) * 90ms); }

/* ============ WORLDS (framed paintings) ============ */
#worlds { background: #232328; }
#worlds::before { background-image: url(/assets/textures/deepslate.svg); }

.frames { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.frame {
  background: url(/assets/textures/planks.svg) 0 0 / 32px 32px;
  image-rendering: pixelated;
  padding: 12px; margin: 0;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.22), inset -2px -2px 0 rgba(0,0,0,.4), 0 10px 24px -8px rgba(0,0,0,.7);
  transition: transform .25s cubic-bezier(.3,1.4,.4,1);
}
.frame:hover { transform: rotate(-.8deg) scale(1.025); }
.frame .scene { aspect-ratio: 4 / 3; box-shadow: inset 0 0 0 2px rgba(0,0,0,.35); }
.frame figcaption {
  font-family: var(--font-pixel); font-size: 8px; color: #ffe9b8;
  text-align: center; margin-top: 12px; text-shadow: 1px 1px 0 #000; line-height: 1.7;
}
html.js .frame { opacity: 0; transform: scale(.88); }
html.js .frame.in { opacity: 1; transform: none; transition: opacity .45s, transform .45s cubic-bezier(.3,1.4,.4,1); transition-delay: calc(var(--i) * 100ms); }

.scene.overworld {
  background:
    radial-gradient(circle 26px at 78% 22%, #fff7c4 0 40%, rgba(255,247,196,.35) 41% 60%, transparent 61%),
    linear-gradient(180deg, #7fc7ff 0 58%, #62c94e 58% 70%, #79522f 70%);
}
.scene.nether {
  background:
    radial-gradient(circle 60px at 25% 80%, rgba(255,120,40,.7), transparent 70%),
    radial-gradient(circle 40px at 75% 65%, rgba(255,80,30,.5), transparent 70%),
    linear-gradient(180deg, #2a0e10 0 60%, #6e1f1a 60% 72%, #4a1411 72%);
}
.scene.end {
  background:
    radial-gradient(circle 2px at 20% 25%, #fff 50%, transparent 51%),
    radial-gradient(circle 1.5px at 60% 15%, #fff 50%, transparent 51%),
    radial-gradient(circle 2px at 85% 40%, #d8c5ff 50%, transparent 51%),
    radial-gradient(circle 1.5px at 40% 50%, #fff 50%, transparent 51%),
    linear-gradient(180deg, #0c0518 0 62%, #e8e29c 62% 70%, #cfc77f 70%);
}
.scene.ocean {
  background:
    radial-gradient(ellipse 50px 14px at 30% 45%, rgba(159,233,255,.35), transparent 70%),
    radial-gradient(ellipse 70px 16px at 70% 65%, rgba(159,233,255,.25), transparent 70%),
    linear-gradient(180deg, #103a66 0 70%, #c9b873 70%);
}

/* ============ COMMUNITY (deepest point, lava glow) ============ */
#community { background: linear-gradient(180deg, #1B1B21, #141416); }
#community::before { background-image: url(/assets/textures/deepslate.svg); opacity: .1; }
.lava-glow {
  position: absolute; left: 0; right: 0; bottom: 0; height: 220px; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(255,106,0,.34), rgba(255,140,30,.1) 55%, transparent);
  animation: lavaPulse 4.5s ease-in-out infinite;
}
@keyframes lavaPulse { 50% { opacity: .55; } }

/* 500 + 36 + 300 = 836 ≤ 892: text and scoreboard sit side by side instead of wrapping */
.cta-grid { display: flex; gap: 36px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cta-copy { max-width: 500px; }
.cta-copy .lead { margin-bottom: 36px; }
.cta-copy .hero-btns { justify-content: flex-start; margin-top: 0; }

.admins { margin-top: 22px; font-size: 14px; color: #8e8e96; }
.admins b { color: var(--xp-green); font-weight: 700; }

/* sidebar scoreboard */
.scoreboard {
  min-width: 300px;
  background: rgba(0,0,0,.5);
  border: 2px solid rgba(255,255,255,.14);
  padding-bottom: 8px;
}
.sb-title {
  font-family: var(--font-pixel); font-size: 11px; color: #fff;
  text-align: center; background: rgba(0,0,0,.45); padding: 12px; margin-bottom: 8px;
}
.sb-row {
  display: flex; justify-content: space-between; gap: 36px;
  padding: 7px 14px;
  font-family: var(--font-pixel); font-size: 9px; line-height: 1.6; color: #ececec;
}
.sb-row b { color: var(--mc-red); font-weight: 400; }

/* ============ BEDROCK (footer) ============ */
#bedrock { background: #0B0B0D; }
.foot-inner { position: relative; z-index: 2; max-width: 1060px; margin: 0 auto; padding: 64px 24px 170px; text-align: center; }
.bedrock-msg { font-family: var(--font-pixel); font-size: clamp(8px, 1.8vw, 11px); color: #8e8e96; line-height: 2.1; margin-bottom: 28px; }
.foot-links { margin-bottom: 22px; }
.foot-links a { color: #c9c9d2; text-decoration: none; font-weight: 600; font-size: 14px; }
.foot-links a:hover { color: var(--xp-green); }
.foot-note { font-size: 12px; color: #55555e; line-height: 1.8; max-width: 640px; margin: 0 auto; }

/* ============ mining particles & cracks (JS-spawned) ============ */
.mpart { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; }
.crack {
  position: fixed; z-index: 90; pointer-events: none;
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border: 3px solid rgba(255,255,255,.75);
  animation: crackPop .32s ease-out forwards;
}
@keyframes crackPop {
  from { transform: scale(.3); opacity: 1; }
  to   { transform: scale(1.25); opacity: 0; }
}

/* ============================================================
   PART II — THE SANDBOX UPDATE
   build mode · TNT · day/night · creeper · xp orbs · ambience
   ============================================================ */

body { position: relative; }
body.shake { animation: bodyShake .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes bodyShake {
  10% { transform: translate(-7px, 4px); }
  25% { transform: translate(6px, -5px); }
  40% { transform: translate(-5px, 3px); }
  55% { transform: translate(4px, -2px); }
  70% { transform: translate(-3px, 2px); }
  85% { transform: translate(2px, -1px); }
}

/* ---- the build layer (your blocks live here, saved locally) ---- */
#world { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.block {
  position: absolute; width: 32px; height: 32px;
  background-size: 32px 32px; image-rendering: pixelated;
  pointer-events: auto;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.14), inset -2px -2px 0 rgba(0,0,0,.3);
}
.block.pop { animation: placePop .16s cubic-bezier(.3,1.6,.5,1); }
@keyframes placePop { from { transform: scale(.55); } }
.block.fuse { animation: fuseBlink .22s steps(1) infinite; }
@keyframes fuseBlink { 50% { filter: brightness(4) saturate(0); } }
#ghost {
  position: absolute; width: 32px; height: 32px; display: none;
  background-size: 32px 32px; image-rendering: pixelated;
  opacity: .55; outline: 2px dashed rgba(255,255,255,.65);
  pointer-events: none;
}

/* item-name popup above the hotbar */
#itemname {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 152px; z-index: 100;
  font-family: var(--font-pixel); font-size: 11px; color: #fff;
  text-shadow: 2px 2px 0 #000; pointer-events: none; white-space: nowrap;
  opacity: 0; transition: opacity .4s;
}
#itemname.show { opacity: 1; }

/* block slots in the hotbar */
.bslot { padding: 0; }
.bslot.sel { box-shadow: 0 0 0 3px #fff; border-color: #fff; background: rgba(255,255,255,.18); }
.slot img { transition: transform .12s; }
a.slot:hover img, .bslot:hover img { transform: scale(1.18); }

/* xp orbs fly to the bar when you mine */
.xporb {
  position: fixed; left: 0; top: 0; width: 9px; height: 9px; z-index: 95; pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e7ff8a, #5fd61f);
  box-shadow: 0 0 9px var(--xp-green);
}
.xp-track.pulse { animation: xpPulse .3s; }
@keyframes xpPulse { 50% { transform: scale(1.06); box-shadow: 0 0 16px rgba(126,252,32,.8); } }

/* ---- day / night cycle (hero) ---- */
.veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, #0a1030 0%, #18305c 70%, #27406b 100%);
  transition: opacity 3s;
}
.stars {
  position: absolute; inset: 0 0 30% 0; z-index: 2; pointer-events: none; opacity: 0;
  transition: opacity 3s;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 32% 48%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 51% 15%, #d8e4ff 50%, transparent 51%),
    radial-gradient(1px 1px at 67% 38%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 83% 24%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 21% 64%, #d8e4ff 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 55%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 72%, #fff 50%, transparent 51%);
  background-size: 380px 260px;
}
.moon {
  position: absolute; top: 11%; left: 12%; width: 64px; height: 64px; z-index: 2;
  background: #E9E9DA; box-shadow: 0 0 56px 12px rgba(233,233,218,.35);
  opacity: 0; pointer-events: none; transition: opacity 3s;
}
.sun, .cloud { transition: opacity 3s; }
.grass-line { transition: filter 3s; }
.version, .cmd-hint, .tagline { transition: color 3s; }
#surface.night .veil { opacity: .85; }
#surface.night .stars { opacity: .95; animation: twinkle 3.4s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .6; } }
#surface.night .moon { opacity: 1; }
#surface.night .sun { opacity: .05; }
#surface.night .cloud { opacity: .18; }
#surface.night .grass-line { filter: brightness(.45); }
#surface.night .tagline { color: #cde7c2; }
#surface.night .version, #surface.night .cmd-hint { color: #a4cf94; }

/* ---- the creeper ---- */
.creeper {
  position: absolute; bottom: 44px; left: -70px; z-index: 3;
  width: 44px; height: 66px; cursor: pointer;
  image-rendering: pixelated;
  animation: creeperWalk 34s linear forwards, creeperBob .4s ease-in-out infinite alternate;
}
@keyframes creeperWalk { to { translate: calc(100vw + 160px) 0; } }
@keyframes creeperBob { from { transform: translateY(0); } to { transform: translateY(-3px); } }
.creeper.boom { animation: creeperFlash .14s steps(1) infinite; }
@keyframes creeperFlash { 50% { filter: brightness(5); } }
.scorch {
  position: absolute; bottom: 38px; height: 26px; width: 104px; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse, rgba(10,10,10,.6), transparent 70%);
  transition: opacity 4s;
}
.scorch.fade { opacity: 0; }

/* ---- ambient cave dust + lava embers ---- */
.mote {
  position: absolute; width: 4px; height: 4px; z-index: 1; pointer-events: none;
  background: rgba(255,255,255,.35);
  animation: moteDrift var(--md, 14s) ease-in-out var(--mdel, 0s) infinite alternate;
}
@keyframes moteDrift {
  from { transform: translate(0, 0); opacity: .12; }
  50%  { opacity: .4; }
  to   { transform: translate(46px, -64px); opacity: .12; }
}
.mo1 { left: 18%; top: 30%; --md: 13s; }
.mo2 { left: 70%; top: 55%; --md: 17s; --mdel: -6s; }
.mo3 { left: 40%; top: 75%; --md: 15s; --mdel: -11s; }
.mo4 { left: 85%; top: 25%; --md: 19s; --mdel: -3s; }

.ember {
  position: absolute; bottom: 8px; width: 5px; height: 5px; z-index: 1; pointer-events: none;
  background: #FF9A2E; box-shadow: 0 0 6px #FF7A00; opacity: 0;
  animation: emberRise var(--ed, 6s) linear var(--edel, 0s) infinite;
}
@keyframes emberRise {
  0%   { transform: translate(0, 0); opacity: 0; }
  12%  { opacity: .9; }
  100% { transform: translate(26px, -340px); opacity: 0; }
}
.em1 { left: 12%; --ed: 6s; }
.em2 { left: 28%; --ed: 8s;   --edel: -3s; }
.em3 { left: 46%; --ed: 5.5s; --edel: -1.5s; }
.em4 { left: 62%; --ed: 7s;   --edel: -4s; }
.em5 { left: 78%; --ed: 6.5s; --edel: -2s; }
.em6 { left: 90%; --ed: 9s;   --edel: -5s; }

/* ---- living paintings ---- */
.frame .scene { position: relative; overflow: hidden; }
.scene::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.scene.overworld::after {
  background: radial-gradient(circle 26px at 78% 22%, rgba(255,247,196,.5), transparent 60%);
  animation: sunGlow 4s ease-in-out infinite;
}
@keyframes sunGlow { 50% { opacity: .35; } }
.scene.nether::after {
  background: radial-gradient(circle 70px at 50% 80%, rgba(255,120,30,.5), transparent 70%);
  animation: netherPulse 3s ease-in-out infinite;
}
@keyframes netherPulse { 50% { opacity: .3; } }
.scene.end::after {
  background:
    radial-gradient(circle 1.5px at 30% 30%, #fff 50%, transparent 51%),
    radial-gradient(circle 1.5px at 70% 20%, #fff 50%, transparent 51%),
    radial-gradient(circle 1px at 50% 45%, #d8c5ff 50%, transparent 51%);
  animation: endTwinkle 2.6s steps(2) infinite;
}
@keyframes endTwinkle { 50% { opacity: .25; } }
.scene.ocean::after {
  background: linear-gradient(100deg, transparent 30%, rgba(159,233,255,.22) 50%, transparent 70%);
  animation: oceanShimmer 5s ease-in-out infinite alternate;
}
@keyframes oceanShimmer { from { transform: translateX(-55%); } to { transform: translateX(55%); } }

.adv { transition: transform .2s, border-color .2s; }
.adv:hover { transform: translateY(-3px); border-color: #7a7a7a #2a2a2a #2a2a2a #7a7a7a; }

.linklike { background: none; border: none; padding: 0; color: #c9c9d2; font: inherit; font-weight: 600; }
.linklike:hover { color: var(--xp-green); }

/* ============================================================
   PART III — THE REAL SERVER UPDATE
   download, EN/SV install guide, real worlds
   ============================================================ */

/* language selector: html.en / html.sv gates [data-lang] content */
html.en [data-lang="sv"] { display: none !important; }
html.sv [data-lang="en"] { display: none !important; }

.lang-switch { display: flex; gap: 8px; }
.lang-btn { font-size: 9px; padding: 12px 16px; }
.mcbtn.on { background: #3FAE1E; border-color: #74e84e #1c5a0c #174a0a #74e84e; }

/* ---- THE WORKSHOP (#play) ---- */
#play { background: linear-gradient(180deg, #4A3622, #3F2E1D); }
#play::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url(/assets/textures/dirt.svg) 0 0 / 64px 64px repeat;
  image-rendering: pixelated; opacity: .15;
}
#play .wall { background-image: url(/assets/textures/dirt.svg); }
.play-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }

.dl-card {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: rgba(20,20,24,.92);
  border: 3px solid; border-color: #5a5a5a #1f1f1f #1f1f1f #5a5a5a;
  padding: 20px 22px; margin-bottom: 34px;
}
.dl-card > img { width: 52px; height: 52px; flex-shrink: 0; }
.dl-meta { flex: 1; min-width: 240px; }
.dl-name { font-family: var(--font-pixel); font-size: clamp(8px, 1.8vw, 11px); color: #fff; line-height: 1.8; word-break: break-all; }
.dl-sub { color: #b9b9c2; font-size: 13.5px; margin-top: 6px; }

.steps {
  list-style: none; counter-reset: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px; margin-bottom: 34px;
}
.step {
  background: rgba(28,28,32,.94);
  border: 3px solid; border-color: #5a5a5a #1f1f1f #1f1f1f #5a5a5a;
  padding: 22px;
}
.step .num {
  font-family: var(--font-pixel); font-size: 22px; color: var(--xp-green);
  text-shadow: 2px 2px 0 #000; display: block; margin-bottom: 14px;
}
.step h3 { font-size: 17px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.step p { color: #b9b9c2; font-size: 14px; line-height: 1.65; }
.step a { color: var(--xp-green); font-weight: 700; }
.step a:hover { color: #b4ff7a; }

.tipbox {
  background: rgba(0,0,0,.5); border-left: 4px solid var(--xp-green);
  padding: 16px 18px; margin-bottom: 52px;
}
.tipbox p { color: #cfcfd6; font-size: 14px; line-height: 1.9; margin: 5px 0; }
.tip-ico { width: 18px; height: 18px; vertical-align: -3px; image-rendering: pixelated; }
.tipbox code, .adv code {
  font-family: var(--font-pixel); font-size: 9px; color: var(--mc-yellow);
  background: rgba(0,0,0,.55); padding: 3px 7px; white-space: nowrap;
}

/* the two REAL worlds: split the content column evenly, no off-center cap */
.frames-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.scene.create {
  background:
    radial-gradient(circle 17px at 68% 26%, transparent 0 7px, #8a5a2b 7px 11px, transparent 11px),
    linear-gradient(90deg, transparent 0 66.5%, #6e4a26 66.5% 69.5%, transparent 69.5%),
    linear-gradient(180deg, #f0c97e 0 18%, #a8d4ef 18% 58%, #62c94e 58% 70%, #6e5436 70%);
}
.scene.create::after {
  background: radial-gradient(circle 24px at 68% 26%, rgba(255,210,120,.4), transparent 70%);
  animation: sunGlow 3.2s ease-in-out infinite;
}

/* ============================================================
   PART IV — THE FACTORY (mod showcase, real screenshots)
   ============================================================ */

#factory { background: linear-gradient(180deg, #3A3A3E, #313136); }

/* real photographic screenshots — undo the global pixelated hint */
.shot-img {
  display: block; width: 100%; height: auto;
  image-rendering: auto;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.35);
}

.shots {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 24px; margin-bottom: 14px;
}
.shots .frame:first-child { grid-column: 1 / -1; }
.credit { font-size: 12px; color: #8e8e96; margin-bottom: 56px; line-height: 1.7; }
.credit a { color: #a8a8b2; }

.sub-h2 {
  font-family: var(--font-pixel); font-size: clamp(13px, 2.4vw, 20px);
  color: #fff; text-shadow: 3px 3px 0 rgba(0,0,0,.5);
  letter-spacing: 1px; line-height: 1.5; margin: 14px 0 24px;
}

.packs { margin-bottom: 36px; }
.ver {
  display: inline-block; font-family: var(--font-pixel); font-size: 11px;
  color: var(--xp-green); text-shadow: 2px 2px 0 #000; margin-bottom: 14px;
}
.soon {
  display: inline-block; font-family: var(--font-pixel); font-size: 8px;
  font-weight: 400; line-height: 1.6; color: #04120a;
  background: var(--mc-yellow); padding: 4px 8px; margin-top: 6px;
}

/* ---- THE ARCADE (#games) ---- */
#games { background: linear-gradient(180deg, #26262C, #1F1F25); }
#games::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url(/assets/textures/deepslate.svg) 0 0 / 64px 64px repeat;
  image-rendering: pixelated; opacity: .12;
}
#games .wall { background-image: url(/assets/textures/deepslate.svg); }
#games .cmd-hint { color: #8da788; margin-bottom: 48px; }
/* game cards: 2×2 of playable games + a full-width "unlocking" banner */
.advs-games { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.adv.wide { grid-column: 1 / -1; }

/* ---- THE SERVER LIST (#servers): styled like the in-game multiplayer screen ---- */
#servers { background: linear-gradient(180deg, #4A3622, #443120); }
#servers::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url(/assets/textures/dirt.svg) 0 0 / 64px 64px repeat;
  image-rendering: pixelated; opacity: .15;
}
#servers .wall { background-image: url(/assets/textures/dirt.svg); }

.servers-list { display: flex; flex-direction: column; gap: 10px; }
.srow {
  display: flex; align-items: center; gap: 16px; width: 100%;
  background: rgba(0,0,0,.6);
  border: 2px solid #2a2a2a;
  padding: 12px 16px; cursor: pointer; text-align: left;
  transition: border-color .12s, background .12s;
}
.srow:hover, .srow:focus-visible { border-color: #fff; background: rgba(0,0,0,.75); }
.srow:active { transform: translateY(1px); }
.sicon { flex-shrink: 0; }
.sinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.sname {
  font-family: var(--font-pixel); font-size: 11px; color: #fff; line-height: 1.6;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.smotd { font-family: var(--font-pixel); font-size: 9px; color: #9a9a9a; line-height: 1.8; }
.saddr { font-family: var(--font-pixel); font-size: 9px; color: var(--gold, #ffce4f); line-height: 1.6; word-break: break-all; }
.stag {
  font-family: var(--font-pixel); font-size: 7px; font-style: normal;
  padding: 4px 7px; line-height: 1; color: #04120a; background: #3FAE1E;
}
.stag.mods { background: #E08A4A; }   /* copper, matches the server icon */
.stag.vanilla { background: #7fc7ff; }
.stag.nomods { background: var(--mc-yellow); }
.sping { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex-shrink: 0; }
.bars { display: flex; align-items: flex-end; gap: 2px; height: 16px; }
.bars i { width: 3px; background: #55FF55; box-shadow: 1px 1px 0 rgba(0,0,0,.6); }
.bars i:nth-child(1) { height: 5px; }
.bars i:nth-child(2) { height: 8px; }
.bars i:nth-child(3) { height: 11px; }
.bars i:nth-child(4) { height: 13px; }
.bars i:nth-child(5) { height: 16px; }
.sok { font-family: var(--font-pixel); font-size: 7px; color: #55FF55; }
.sok.off { color: #FF5555; }
.splayers { font-family: var(--font-pixel); font-size: 8px; color: #9a9a9a; min-height: 8px; }
.bars.off i { background: #555; box-shadow: none; }
.servers-hint { color: #8da788; margin-top: 18px; }
@media (max-width: 560px) {
  .sping { display: none; }
  .srow { gap: 12px; }
  .sicon { width: 42px; height: 42px; }
}

/* the GAMES painting: floating game orbs over a checkered floor */
.scene.arcade {
  background:
    radial-gradient(circle 5px at 22% 30%, #FF5555 0 5px, transparent 6px),
    radial-gradient(circle 5px at 70% 22%, #FFFF55 0 5px, transparent 6px),
    radial-gradient(circle 5px at 45% 52%, #55FFFF 0 5px, transparent 6px),
    radial-gradient(circle 5px at 85% 58%, #FF55FF 0 5px, transparent 6px),
    radial-gradient(circle 4px at 12% 62%, #55FF55 0 4px, transparent 5px),
    linear-gradient(180deg, #14102b 0 100%);
}
.scene.arcade::after {
  inset: auto 0 0 0; height: 16%;
  background: repeating-linear-gradient(90deg, #e8e8e8 0 14px, #15151c 14px 28px);
  animation: none;
}

/* ---- THE HOST (#host): Mc_Corrupt tells his story in game chat ---- */
#host { background: linear-gradient(180deg, #443120, #4A3622); }
#host::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url(/assets/textures/dirt.svg) 0 0 / 64px 64px repeat;
  image-rendering: pixelated; opacity: .15;
}
#host .wall { background-image: url(/assets/textures/dirt.svg); }

/* "Mc_Corrupt joined the game", yellow like the real join message */
.joinline { color: var(--mc-yellow); }
.joinline span { color: var(--mc-yellow); }

.host-grid { display: flex; gap: 48px; align-items: center; flex-wrap: wrap-reverse; justify-content: center; }
.hostchat {
  flex: 1; min-width: 300px; max-width: 620px;
  background: rgba(0,0,0,.55); padding: 24px 26px;
}
.hline {
  font-family: var(--font-pixel); font-size: 10px; line-height: 2.3;
  color: #fff; margin: 8px 0;
}
.hline b { color: #55FF55; font-weight: 400; }

/* his rules, on an oak sign: plank frame, flat readable face (like real signs) */
.sign {
  border: 10px solid transparent;
  background:
    linear-gradient(180deg, #E8C68F, #D9B377) padding-box,
    url(/assets/textures/planks.svg) 0 0 / 32px 32px border-box;
  image-rendering: pixelated;
  box-shadow: inset 0 0 0 2px rgba(90,58,26,.45), 4px 6px 0 rgba(0,0,0,.25);
  padding: 18px 22px; margin: 18px 0;
}
.sign-title {
  font-family: var(--font-pixel); font-size: 12px; color: #1F1206;
  margin-bottom: 14px; letter-spacing: 1px;
}
.sign ol { list-style: none; counter-reset: rule; }
.sign li {
  counter-increment: rule;
  font-family: var(--font-pixel); font-size: 10px; line-height: 2;
  color: #2A1A0C; margin: 8px 0;
}
.sign li::before { content: counter(rule) ". "; color: #7A4E22; }

/* his character, nameplate and all */
.host-figure { display: flex; flex-direction: column; align-items: center; gap: 0; }
.nameplate {
  font-family: var(--font-pixel); font-size: 10px; color: #fff;
  background: rgba(0,0,0,.45); padding: 7px 12px; margin-bottom: 14px;
}
.host-figure img { image-rendering: pixelated; }

/* his character as a real 3D model, built from his skin texture */
.player3d {
  position: relative; width: 160px; height: 330px;
  perspective: 900px; cursor: grab; touch-action: pan-y;
  animation: hostBob 3.2s ease-in-out infinite;
}
.player3d:active { cursor: grabbing; }
@keyframes hostBob { 50% { translate: 0 -6px; } }
.p3d-rig { position: absolute; inset: 0; transform-style: preserve-3d; }
.p3d-box { position: absolute; transform-style: preserve-3d; }
.p3d-box.swing { transform-origin: top center; animation: limbSwing 1.7s ease-in-out infinite alternate; }
.p3d-box.swing.opp { animation-delay: -1.7s; }
@keyframes limbSwing { from { transform: rotateX(8deg); } to { transform: rotateX(-8deg); } }
.p3d-face {
  position: absolute;
  backface-visibility: visible;   /* hidden + animated preserve-3d mis-culls limbs in Chrome */
  image-rendering: pixelated; background-repeat: no-repeat;
}
.spin-hint {
  font-family: var(--font-pixel); font-size: 8px; color: #a5825e;
  margin-top: 12px; letter-spacing: 1px;
}
.pedestal {
  width: 144px; height: 48px; margin-top: 4px;
  background: url(/assets/textures/grass_side.svg) 0 0 / 48px 48px;
  image-rendering: pixelated;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.25);
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  html.js .adv, html.js .frame, html.js h1 .ch { opacity: 1; transform: none; }
  html.js #loader { display: none; }
  .cloud { left: 10%; }
  .c2 { left: 55%; } .c3 { left: 75%; }
}