@tailwind base;
@tailwind components;
@tailwind utilities;

.font-tiny {
  font-family: 'Tiny5', system-ui;
  font-size: 1.05rem;           
  line-height: 1.6;
  letter-spacing: 0.5px;        
}

h1, h2, h3 {
  font-family: 'Tiny5', system-ui;
  letter-spacing: 2px;
}

.text-5xl { font-size: 2.4rem; letter-spacing: 3px; }
.text-4xl { font-size: 2.0rem; letter-spacing: 2.5px; }
.text-3xl { font-size: 1.55rem; letter-spacing: 2px; }
.text-xl  { font-size: 1.15rem; }
.text-lg  { font-size: 1.05rem; }

.tab-button {
  font-size: 1.0rem;
  letter-spacing: 1.5px;
}

.inventory-item span {
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
.animate-float {
  animation: float 4s ease-in-out infinite;
}

.dark-sheet {
  background: #1f1f1f;
  box-shadow: 
    0 0 60px rgba(0, 0, 0, 0.9),
    inset 0 0 80px rgba(60, 60, 60, 0.4);
}

.tab-button {
  color: #d97706;
  transition: all 0.3s;
}
.tab-button.active {
  background-color: #2a2a2a;
  color: #eeeeee;
  box-shadow: inset 0 -4px 0 #d97706;
}

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 18px;
  justify-items: center;
  padding: 24px 16px;
  background: #181818;
  border: 3px solid #3a3a3a;
  border-radius: 8px;
}

.inventory-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 14px 10px;
  border: 2px solid #444444;
  border-radius: 6px;
  background: #222222;
  transition: all 0.3s ease;
}

.inventory-item:hover {
  border-color: #d97706;
  box-shadow: 0 0 18px rgba(217, 119, 6, 0.45);
  transform: translateY(-4px);
}

.inventory-item img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin-bottom: 10px;
}

.inventory-item span {
  font-size: 0.85rem;
  color: #bbbbbb;
}

.project-card {
  background: #222222;
  border: 3px solid #444444;
  transition: all 0.4s ease;
}
.project-card:hover {
  transform: scale(1.03) translateY(-5px);
  box-shadow: 0 0 25px rgba(217, 119, 6, 0.5);
  border-color: #d97706;
}