@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@400;700;900&display=swap");

@import "@fortawesome/fontawesome-free/css/all.css";

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

:root {
  --brand-primary: #ed1b2f;
  --brand-secondary: #ed0973;
  --brand-accent: #b624c0;
  --brand-light: #ff6b9d;
  --brand-dark: #c41e3a;
  --brand-purple-light: #d946ef;
  --brand-purple-dark: #9333ea;

  /* primary gradient colors used across the app */
  --primary-gradient-start: #F90527;
  --primary-gradient-end: #F50C52;

  /* action button green */
  --action-green: rgb(213 223 80 / 1);

  /* font families for easy global tweaks */
  --font-sans: "Lato", system-ui, sans-serif;
  --font-title: "Barlow Semi Condensed", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --vh: 1vh;
  --full-height: 100vh;
}

/* font helpers using the new variables */
.font-sans {
  font-family: var(--font-sans) !important;
}
.font-title {
  font-family: var(--font-title) !important;
}
.font-mono {
  font-family: var(--font-mono) !important;
} 

@supports (height: 100dvh) {
  :root {
    --full-height: 100dvh;
  }
}

.h-screen-safe {
  height: var(--full-height);
  min-height: var(--full-height);
}

.min-h-screen-safe {
  min-height: var(--full-height);
}

@media (max-width: 768px) {
  .mobile-viewport-fix {
    height: var(--full-height);
    max-height: var(--full-height);
    overflow: hidden;
  }
  .mobile-viewport-fix .flex-col {
    height: 100%;
  }
}

@layer components {
  .glass-panel {
    @apply bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl shadow-lg;
  }
  .game-gradient {
    @apply bg-gradient-to-br from-red-600 via-pink-600 to-purple-600;
  }
  /* Igual ao gradiente do Hero da homepage */
  .primary-gradient {
    background: linear-gradient(135deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%);
  }
  
  /* utility for a solid highlight border (bottom) */
  .border-highlight {
    border-bottom: 2px solid var(--action-green);
  }
  
  /* button using the action green shade */
  .btn-action-green {
    @apply bg-green-100 text-black font-medium py-2 px-4 rounded-lg transition-colors duration-200;
  }
  .btn-primary {
    @apply bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
  }
  .tab-active {
    @apply bg-gradient-to-r from-red-600 to-pink-600 text-white shadow-inner shadow-black/30;
  }
  .tab-inactive {
    @apply bg-white text-gray-800 hover:bg-gray-100 shadow-md hover:shadow-lg transition-all duration-200;
  }
  .header-logo {
    @apply flex items-center space-x-2 cursor-pointer hover:bg-white/10 px-3 py-2 rounded-lg transition-all duration-200;
  }
  .header-logo-icon {
    @apply text-2xl transition-transform duration-200;
  }
  .header-logo-text {
    @apply text-white font-bold text-lg hidden sm:block;
  }
  .game-title-badge {
    @apply flex items-center space-x-2 bg-white/10 px-4 py-2 rounded-lg;
  }
  .phase-indicator {
    @apply bg-white/20 px-3 py-1 rounded-full;
  }
  .phase-current {
    @apply text-yellow-300 font-bold;
  }
  .phase-separator {
    @apply text-white/60 mx-1;
  }
  .phase-total {
    @apply text-white/80;
  }
  .header-glass {
    @apply bg-white/10 backdrop-blur-sm border-b border-white/20 shadow-lg;
  }
  .fade-in {
    animation: fade-in 300ms ease both;
  }
  .slide-in-bottom {
    animation: slide-in-bottom 300ms ease both;
  }
  @keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes slide-in-bottom {
    from { opacity: 0; transform: translateY(1rem); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* shared cancel icon used in modals, selector, tour */
  .cancel-icon,
  .shepherd-cancel-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: #f3f4f6 !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #6b7280 !important;
  }
  .cancel-icon:hover,
  .shepherd-cancel-icon:hover {
    background: #e5e7eb !important;
    color: #374151 !important;
    transform: rotate(90deg) !important;
  }
}

@layer utilities {
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
}

/* ===== BLOCKLY CUSTOMIZATIONS ===== */
.blocklyScrollbarVertical,
.blocklyScrollbarHorizontal,
.blocklyToolboxDiv .blocklyScrollbarVertical,
.blocklyToolboxDiv .blocklyScrollbarHorizontal,
.blocklyFlyout .blocklyScrollbarVertical,
.blocklyFlyout .blocklyScrollbarHorizontal,
.blocklyWorkspace .blocklyScrollbarVertical,
.blocklyWorkspace .blocklyScrollbarHorizontal,
.blocklyDiv .blocklyScrollbarVertical,
.blocklyDiv .blocklyScrollbarHorizontal,
.blocklyDiv * .blocklyScrollbarVertical,
.blocklyDiv * .blocklyScrollbarHorizontal,
.blocklyScrollbarHandle,
.blocklyScrollbarKnob,
.blocklyScrollbarBackground,
div[class*="blockly"] .blocklyScrollbarVertical,
div[class*="blockly"] .blocklyScrollbarHorizontal,
svg[class*="blockly"] .blocklyScrollbarVertical,
svg[class*="blockly"] .blocklyScrollbarHorizontal {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

.blocklyWorkspace,
.blocklyWorkspace svg,
.blocklyToolboxDiv,
.blocklyToolboxDiv *,
.blocklyFlyout,
.blocklyFlyout *,
.blocklyDiv,
.blocklyDiv *,
.blocklyMainBackground,
.blocklyTreeRoot {
  overflow: hidden !important;
}

.blocklyDiv {
  background-color: #f8f9fa;
  min-height: 200px;
}

.blocklyDiv .blocklyWorkspace {
  background-color: #f8f9fa !important;
}

.blocklyDiv .blocklyFlyout,
.blocklyDiv .blocklyToolboxDiv {
  transition: opacity 0.2s ease-in-out;
}

.blocklyDiv:empty {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.5s ease-out;
}

.animate-fadeIn {
  animation: fadeIn 0.2s ease-out forwards;
}

#confetti {
  z-index: 99999 !important;
  pointer-events: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

#visualization {
  position: relative;
}

#capacityBubble {
  position: absolute;
  margin-top: -0.5em;
  left: 10px;
  bottom: 10px;
  z-index: 10;
}

#capacity {
  display: none;
  color: #fff;
  padding: 5px 1em;
  border-radius: 15px;
  background-color: rgba(64, 64, 64, 0.7);
  font-size: large;
}
.capacityNumber {
  font-weight: bold;
}
