// Home Screen styles

.home-screen
  display: flex
  flex-direction: column
  align-items: center
  justify-content: center
  min-height: 100%
  padding: 2rem
  position: relative
  
  // Pixel art floating items in background
  &:before, &:after
    content: ''
    position: absolute
    width: 12px
    height: 12px
    background-color: $pixel-blue
    animation: pixel-float 3s infinite alternate ease-in-out
    z-index: -1
    
  &:before
    top: 15%
    left: 20%
    box-shadow: 0 0 10px $pixel-blue
    animation-delay: 0s
    
  &:after
    bottom: 20%
    right: 15%
    background-color: $pixel-purple
    box-shadow: 0 0 10px $pixel-purple
    animation-delay: 1.5s
    
  .logo
    display: flex
    flex-direction: column
    align-items: center
    margin-bottom: 3rem
    
    .logo-image
      image-rendering: pixelated
      width: 180px
      height: auto
      margin-bottom: 1.5rem
      animation: pixel-float 3s infinite ease-in-out
      filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.5))
    
    h1
      font-size: 2.5rem
      margin: 0
      font-family: 'Press Start 2P', monospace
      color: $primary
      animation: pixel-flash 3s infinite
      letter-spacing: 2px
      text-transform: uppercase
  
  .card
    background-color: $card-bg
    padding: 2rem
    box-shadow: 8px 8px 0 #000
    border: 4px solid #000
    width: 100%
    max-width: 500px
    position: relative
    overflow: visible
    
    // Pixel art decorations
    &:before
      content: ''
      position: absolute
      top: -10px
      left: -10px
      width: 20px
      height: 20px
      background-color: $accent
      z-index: 1
      animation: pixel-rotate 8s linear infinite
      
    &:after
      content: ''
      position: absolute
      bottom: -10px
      right: -10px
      width: 20px
      height: 20px
      background-color: $primary
      z-index: 1
      animation: pixel-rotate 8s linear infinite reverse
      
  @keyframes pixel-rotate
    0%
      transform: rotate(0deg)
    100%
      transform: rotate(360deg)
      
.tabs
  display: flex
  margin-bottom: 1.5rem
  border-bottom: 4px solid #000
  
  button
    flex: 1
    background: none
    border: 4px solid #000
    border-bottom: none
    color: $text-muted
    font-family: 'Press Start 2P', monospace
    font-size: 0.7rem
    padding: 0.75rem 0.5rem
    position: relative
    text-transform: uppercase
    transition: all 0.2s ease
    cursor: pointer
    
    &:hover:not(.active)
      background-color: rgba($primary, 0.2)
      color: $text
    
    &.active
      background-color: $primary
      color: #000
      z-index: 1
      
      &:after
        content: ''
        position: absolute
        bottom: -4px
        left: 0
        width: 100%
        height: 4px
        background-color: $primary

.home-footer
  margin-top: 2rem
  text-align: center
  color: $text-muted
  font-style: italic

@keyframes pulse
  0%
    transform: scale(1)
    opacity: 1
  50%
    transform: scale(1.1)
    opacity: 0.8
  100%
    transform: scale(1)
    opacity: 1