/* Minecraft-inspired styles and pixel UI */
:root{
  --bg:#0b1220;
  --card:#0f1724;
  --accent:#7c3aed;
  --accent-2:#16a34a;
  --pixel-border: 4px;
  --tile-gap: 12px;
}
    html {
        height: 100%;
    }

    body {
        min-height: 100%;
        margin: 0;
        background: linear-gradient(135deg, #1e293b, #0f172a);
        background-attachment: fixed;
        /* To gwarantuje, że tło jest "przyklejone" i zawsze pełne */
    }

body { background: linear-gradient(180deg,#071226 0%, #06111b 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;

}

/* Pixel-ish card */
.mc-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12));
  border: 3px solid rgba(0,0,0,0.6);
  box-shadow: 0 6px 0 #000, 0 12px 30px rgba(2,6,23,0.6);
  padding: 14px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

/* Pixel top border simulating blocky frame */
.mc-card::before {
  content: "";
  position: absolute;
  left: -6px; right: -6px; top: -6px; height: 18px;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 8px, rgba(0,0,0,0.08) 8px 16px);
  transform: rotate(-2deg);
  z-index: 0;
}

/* Tile grid */
.tile-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--tile-gap); }
@media (max-width:900px){ .tile-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:520px){ .tile-grid { grid-template-columns: 1fr; } }

.tile {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.08));
  border: 2px solid rgba(255,255,255,0.03);
  padding: 12px;
  border-radius: 8px;
  display:flex; gap:10px; align-items:center;
  transition: transform .18s ease, box-shadow .18s ease;
}
.tile:hover { transform: translateY(-6px); box-shadow: 0 14px 40px rgba(0,0,0,0.6); }

/* Pixel icon */
.pixel-icon {
  width:64px; height:64px;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px; background:linear-gradient(180deg,#e9d8fd,#c4b5fd);
  box-shadow: inset 0 -6px 10px rgba(0,0,0,0.12);
  font-weight:700; color:#0f1724;
}

/* Sidebar */
.sidebar { width:260px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.15)); border-right: 1px solid rgba(255,255,255,0.03); padding:16px; position:fixed; left:20px; top:20px; bottom:20px; border-radius:12px; }
.sidebar a { display:flex; gap:10px; align-items:center; padding:10px; border-radius:8px; color: #e6edf3; text-decoration:none; }
.sidebar a:hover { background: rgba(255,255,255,0.02); transform: translateX(4px); transition: .12s ease; }

/* Player head circle */
.player-head { width:84px; height:84px; border-radius:12px; overflow:hidden; border:3px solid rgba(0,0,0,0.6); background:#000; }

/* Island preview */
.island-preview { display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center; }

/* Fancy headline */
.h1-mc { font-family: 'Press Start 2P', cursive; font-size:18px; letter-spacing:1px; color:var(--accent); }

/* Small helpers */
.kv { font-size:13px; color:#cbd5e1; }
.kv .v { font-weight:700; color:#fff; }

/* Small pixel button */
.btn-px { background: linear-gradient(180deg,#10b981,#059669); padding:8px 12px; border-radius:6px; color:white; font-weight:600; text-decoration:none; display:inline-block; }

/* Footer */
.panel-wrap { margin-left:320px; padding:28px; }

/* Decorative cube */
.mc-block {
  width:48px; height:48px; background:linear-gradient(180deg,#fef3c7,#f59e0b); border-radius:6px; box-shadow: 0 6px 0 rgba(0,0,0,0.35);
  display:flex; align-items:center; justify-content:center; font-weight:700;
}
/* Animacja pojawiania się kafelków */
.tile {
  /* ...istniejące style... */
  transition: transform .2s ease, box-shadow .2s ease, opacity .4s ease, margin-top .4s ease;
  opacity: 0;
  margin-top: 20px;
}

.tile.visible {
  opacity: 1;
  margin-top: 0;
}