:root {
    --touch-target-min: 44px;
    --page-padding-mobile: 16px;

    /* Light Theme Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --border-color: #e2e8f0;
    --card-bg: #ffffff;
}

.dark {
    /* Dark Theme Colors */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --border-color: #334155;
    --card-bg: #1e293b;
}

body {
    overflow-x: hidden;
    width: 100%;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.pb-safe {
    padding-bottom: env(safe-area-inset-bottom, 20px);
}

.perspective-1000 {
    perspective: 1000px;
}

.transform-style-3d {
    transform-style: preserve-3d;
}

.backface-hidden {
    backface-visibility: hidden;
}

.rotate-y-180 {
    transform: rotateY(180deg);
}

.card-small,
.card-medium,
.card-large {
    display: block;
}

/* Enforce top alignment for Kaos card row */
.card-row-top {
    align-items: flex-start !important;
}

.card-row-top > * {
    align-self: flex-start !important;
}

/* Mobile Utilities */
@media (max-width: 768px) {
    .card-small { width: 90px; height: 120px; }
    .card-medium { width: 135px; height: 180px; }
    .card-large { width: 180px; height: 240px; }

    .desktop-only {
        display: none !important;
    }
    
    /* Touch Targets */
    button, input, select, a.mobile-link {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Adjust inputs that are not flex containers */
    input, select {
        display: block;
    }
    
    /* Specific fix for mobile links alignment */
    a.mobile-link {
        justify-content: flex-start;
    }

    /* Hide Hub hamburger on mobile when in a game (nav-toggle will handle game menu) */
    body[data-context="palavrando"] #sidebar-toggle,
    body[data-context="fluindo"] #sidebar-toggle {
        display: none;
    }

    /* Hide game hamburger on mobile when not in a game */
    body[data-context="hub"] #nav-toggle {
        display: none;
    }

    /* Hide Gamebar title on mobile when in a game */
    body[data-context="palavrando"] > header h1,
    body[data-context="fluindo"] > header h1 {
        display: none;
    }
}

@media (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }
}

#gamebar-sidebar {
    transition: transform 0.25s ease;
}

#gamebar-sidebar {
    display: flex !important;
}

@media (max-width: 768px) {
    #gamebar-sidebar {
        display: none !important;
    }
    
    #gamebar-sidebar.show-mobile {
        display: flex !important;
    }
}

.sidebar-nav {
    padding-top: 1rem;
}

@media (min-width: 768px) {
    body.desktop-sidebar-collapsed #gamebar-sidebar {
        transform: translateX(-100%);
    }

    body.desktop-sidebar-collapsed #app-root {
        padding-left: 1.5rem !important;
    }
}

/* Hide header game navigation when not in a game context */
body[data-context="hub"] > header .desktop-menu,
body[data-context="hub"] > header #mobile-nav,
body[data-context="hub"] #game-title {
    display: none;
}

/* Adjust content padding based on context */
#appshell-content {
    max-width: 5xl;
    margin: 0 auto;
}

body[data-context="hub"] #appshell-content {
    padding: 0 2rem;
}

body[data-context="palavrando"] #appshell-content {
    padding: 0 0.5rem;
}

/* Fluindo game mobile layout fixes */
@media (max-width: 768px) {
  /* Ensure all fluindo game content fits properly on mobile */
  body[data-context="fluindo"] #fluindo-content,
  body[data-context="fluindo"] #fluindo-content > div {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }
  
  /* Fix grid layout for mobile */
  body[data-context="fluindo"] #fluindo-content .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* Adjust padding for fluindo game on mobile */
  body[data-context="fluindo"] #fluindo-content .px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Make sure all sections fit on mobile */
  body[data-context="fluindo"] #fluindo-content section,
  body[data-context="fluindo"] #fluindo-content .max-w-5xl,
  body[data-context="fluindo"] #fluindo-content .max-w-full {
    max-width: 100%;
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  
  /* Show Palavrando nav items when in Palavrando context */
  body[data-context="palavrando"] #palavrando-nav {
    display: flex;
  }
  
  body[data-context="palavrando"] #fluindo-nav {
    display: none;
  }
  
  /* Show Fluindo nav items when in Fluindo context */
  body[data-context="fluindo"] #palavrando-nav {
    display: none;
  }
  
  body[data-context="fluindo"] #fluindo-nav {
    display: flex;
  }
  
  /* Hide bottom nav in hub context */
  body[data-context="hub"] #bottom-nav {
    display: none;
  }
  
  /* Fix for Fluindo player suggestions on mobile */
  body[data-context="fluindo"] #fluindo-content .flex-wrap {
    flex-wrap: wrap !important;
    display: flex !important;
  }
  
  body[data-context="fluindo"] #fluindo-content .basis-full {
    flex-basis: 100% !important;
    width: 100% !important;
  }
  
  /* Fix rounded corners being cut off */
  body[data-context="fluindo"] #fluindo-content .rounded-2xl,
  body[data-context="fluindo"] #fluindo-content .rounded-3xl {
    border-radius: 1rem;
    overflow: hidden;
  }
  
  /* Ensure form elements don't overflow */
  body[data-context="fluindo"] #fluindo-content form,
  body[data-context="fluindo"] #fluindo-content .flex {
    max-width: 100%;
    overflow-x: hidden;
  }
  
  /* Fix player input fields */
  body[data-context="fluindo"] #fluindo-content .max-w-4xl {
    max-width: 100% !important;
  }
}

@keyframes diceRoll {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.dice-rolling {
    animation: diceRoll 0.1s ease-in-out infinite;
}

@keyframes numberShuffle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.number-shuffling {
    animation: numberShuffle 0.1s ease-in-out infinite;
}