/* --- minecraft.css --- */

/* Floating Minecraft-style blocks — absolute, pixelated, floating */
.mcblock{
  position:absolute;
  width:44px;
  height:44px;
  border:3px solid rgba(0,0,0,.45);
  image-rendering:pixelated;
  animation:float 6s ease-in-out infinite;
  opacity:.9;
  z-index:0;
  pointer-events:none;
}

/* Grass block — green top, brown bottom, pixel stripes */
.mcblock--grass{
  background:linear-gradient(#62b345 0 30%,#8b5a2b 30% 100%);
}

.mcblock--grass::before{
  content:'';
  position:absolute;
  inset:0 0 auto 0;
  height:30%;
  background:repeating-linear-gradient(90deg,#62b345 0 6px,#4e9a36 6px 12px);
}

/* Diamond block — angled blue pattern */
.mcblock--diamond{
  background:repeating-linear-gradient(45deg,#5df2f2 0 8px,#38d6e0 8px 16px);
  animation-delay:.8s;
}

/* TNT block — red body with white label */
.mcblock--tnt{
  background:repeating-linear-gradient(0deg,#d9482b 0 8px,#b83218 8px 16px);
  animation-delay:1.6s;
}

.mcblock--tnt::before{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:32%;
  bottom:32%;
  background:#f4f1e8;
}

.mcblock--tnt::after{
  content:'TNT';
  position:absolute;
  left:0;
  right:0;
  top:32%;
  bottom:32%;
  display:grid;
  place-items:center;
  font-family:var(--font-mono);
  font-weight:bold;
  font-size:.62rem;
  color:#2b2b2b;
}

/* Hotbar — centred flex row of slots */
.hotbar{
  display:flex;
  gap:4px;
  justify-content:center;
  flex-wrap:wrap;
}

/* Slot — 3D bevel border, emoji item, tooltip on hover */
.slot{
  width:58px;
  height:58px;
  background:#8b8b8b;
  border:3px solid;
  border-color:#373737 #ffffff #ffffff #373737;
  display:grid;
  place-items:center;
  font-size:1.6rem;
  position:relative;
  cursor:help;
  transition:transform .15s ease;
}

.slot:hover{
  transform:translateY(-4px);
}

.slot--selected{
  outline:3px solid #ffffff;
  outline-offset:-1px;
}

/* Tooltip — styled like Minecraft item tooltips */
.slot__tip{
  position:absolute;
  bottom:calc(100% + 12px);
  left:50%;
  translate:-50% 0;
  background:rgba(16,0,32,.95);
  border:2px solid;
  border-color:#2b0656 #5c2d91 #5c2d91 #2b0656;
  color:#fff;
  font-family:var(--font-mono);
  font-size:.72rem;
  line-height:1.5;
  padding:.45rem .8rem;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
  z-index:5;
}

.slot__tip b{
  color:#ffdf70;
  display:block;
}

.slot__tip i{
  color:#a8a8ff;
  font-style:normal;
}

.slot:hover .slot__tip{
  opacity:1;
}

/* XP bar — green progress, animated fill on scroll */
.xp{
  margin-top:2rem;
}

.xp__head{
  display:flex;
  justify-content:space-between;
  font-family:var(--font-mono);
  font-size:.75rem;
  color:#ffdf70;
  text-shadow:2px 2px 0 #3f3f00;
  margin-bottom:.45rem;
}

.xp__track{
  height:14px;
  background:#2a2a2a;
  border:2px solid #000;
  overflow:hidden;
}

.xp__fill{
  height:100%;
  width:0;
  background:repeating-linear-gradient(90deg,#7ee83c 0 10px,#5cc426 10px 14px);
  transition:width 1.8s cubic-bezier(.22,1,.36,1) .3s;
}

.is-visible .xp__fill{
  width:var(--w);
}

/* Achievement toast — slides in from right, 3D border */
.achievement{
  position:fixed;
  right:1.5rem;
  bottom:1.5rem;
  z-index:200;
  display:flex;
  align-items:center;
  gap:.9rem;
  background:#313131;
  border:3px solid;
  border-color:#c6c6c6 #2b2b2b #2b2b2b #c6c6c6;
  padding:.7rem 1.1rem;
  transform:translateX(130%);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
  font-family:var(--font-mono);
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}

.achievement.is-shown{
  transform:none;
}

.achievement__icon{
  width:42px;
  height:42px;
  flex:none;
  background:#8b8b8b;
  border:2px solid;
  border-color:#373737 #fff #fff #373737;
  display:grid;
  place-items:center;
  font-size:1.35rem;
}

.achievement__title{
  color:#ffdf70;
  font-size:.65rem;
  text-shadow:2px 2px 0 #3f3f00;
}

.achievement__desc{
  color:#fff;
  font-size:.82rem;
}

/* Hide blocks, adjust achievement position on mobile */
@media (max-width:640px){
  .mcblock{
    display:none;
  }

  .achievement{
    right:1rem;
    left:1rem;
    bottom:1rem;
  }
}