/* ===================================================
   MEEMCRAFT 3D - MODERN BLOCKY SANDBOX STYLESHEET
   =================================================== */

:root {
  --accent-cyan: #4ecdc4;
  --accent-gold: #ffe66d;
  --accent-rose: #ff6b6b;
  --accent-mint: #2ecc71;
  --dark-bg: #090d16;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--dark-bg);
  font-family: 'Cairo', system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}

/* LTR English override font */
[lang="en"] {
  font-family: 'Fredoka', 'Cairo', system-ui, sans-serif;
}

/* Custom scrollbars */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}

/* Canvas container */
#canvas-container {
  width: 100%;
  height: 100%;
  display: block;
}

/* Glassmorphism helpers */
.glass-panel {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Shop tab active states */
.shop-tab-btn.active {
  background: linear-gradient(135deg, #06b6d4, #3b82f6) !important;
  color: #020617 !important;
  font-weight: 900;
  box-shadow: 0 4px 14px rgba(6, 182, 212, 0.35);
}

/* Mobile D-Pad / Joystick */
#joystick-zone {
  touch-action: none;
}

/* Button pulse animations */
@keyframes coin-bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15) rotate(5deg); }
}
.coin-bounce-anim {
  animation: coin-bounce 0.35s ease-out;
}

/* Notification toast fade */
#game-toast.show {
  opacity: 1;
  transform: translateY(-8px);
}

/* Chat animations */
.chat-msg-entry {
  animation: chatFadeIn 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes chatFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Interactive prompt pulse */
#hud-interact-prompt {
  animation: promptPulse 1.5s infinite alternate ease-in-out;
}
@keyframes promptPulse {
  from { transform: scale(0.98); box-shadow: 0 0 15px rgba(245, 158, 11, 0.3); }
  to { transform: scale(1.02); box-shadow: 0 0 25px rgba(245, 158, 11, 0.6); }
}

/* Input focus glow */
input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.4);
}

/* Action button states */
button:active {
  transform: scale(0.96);
}