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

@layer base {
  :root {
    color-scheme: dark;
    --color-accent: #2563eb;
  }

  /* Premium Global Scrollbars — thumb color driven by CSS variable */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color, rgba(255, 255, 255, 0.1));
    border-radius: 20px;
    border: 1px solid transparent;
    background-clip: content-box;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-color, rgba(255, 255, 255, 0.2));
    background-clip: content-box;
  }

  /* Firefox Support */
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-color, rgba(255, 255, 255, 0.1)) transparent;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: #10131f;
  overflow: hidden;
}

@layer utilities {
  .no-scrollbar::-webkit-scrollbar { display: none; }
  .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

  /* Setting the CSS variable on the scrollable container causes the pseudo-element
     to inherit it, which is the correct way to drive scrollbar color via state.
     .scrollbar-active   = gamepad / zone focus
     .scrollbar-hoverable = mouse hover (same mechanism, same color) */
  .scrollbar-active,
  .scrollbar-hoverable:hover {
    --scrollbar-thumb-color: var(--color-accent);
  }

  /* Auto-scroll animation for long game titles when focused */
  @keyframes scroll-title {
    0%, 15%   { transform: translateX(0%); }
    85%, 100% { transform: translateX(-60%); }
  }

  .marquee-active {
    display: inline-block;
    animation: scroll-title 4s ease-in-out infinite alternate;
    animation-delay: 0.4s;
  }
  
  body.gamepad-active {
    cursor: none !important;
  }
  
  body.gamepad-active * {
    cursor: none !important;
  }
  
  .geist-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
  
  .material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  }
}
