/* Custom Fonts */
@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/proxima-nova-regular-latin.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/proxima-nova-bold-latin.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Torus';
    src: url('../fonts/torus-bold-latin.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  * {
    box-sizing: border-box;
  }
  /* Soft glow around tiles */
  .tile-glow {
    box-shadow: 0px 7px 10px 4px #5d6b844d;
    transition: all 0.3s ease;
  }
  
  .tile-glow:hover {
    transform: scale(1.04) translateY(-4px);
  }
  
  .tile-img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(#0000 25%, #0000004d);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    border-radius: 16px;
    z-index: 5;
  }
  
  .tile-glow:hover .tile-img::after {
    opacity: 1;
  }
  
  /* Rounded image like cards in screenshot */
  .tile-img {
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    aspect-ratio: 1;
    position: relative;
  }
  
  .tile-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: white;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 0 0 16px 16px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    text-align: center;
    z-index: 10;
  }
  
  .tile-glow:hover .tile-title {
    transform: translateY(0);
  }
  
  .game-grid {
    display: grid;
    gap: 16px;
    grid-auto-rows: 94px;
    justify-content: center;
    grid-auto-flow: dense;
  }
  
  
  /* Ensure items fill their assigned grid areas */
  .game-grid > .igc, .game-grid > a { width: 100%; height: 100%; }
  .game-grid .tile-img { aspect-ratio: auto; width: 100%; height: 100%; }
  /* Reserve the first two blank cells in row 1 */
  .game-grid .blank-1 { grid-row: 1; grid-column: 1; }
  .game-grid .blank-2 { grid-row: 1; grid-column: 2; }
  
  
  /* Game screen grid */
  .main-container {
    margin: 0 auto;
  }
  @media (min-width: 1871px) {
    .categories-grid {
      grid-template-columns: repeat(17, 94px);
    }
    
    #logo {
      width: 204px;
      flex-direction: row;
    }
    .main-container {
      width: 1854px;
    }
  }
  @media (max-width: 1870px) {
    #logo {
      width: 94px;
      flex-direction: column;
    }
    #logo #logo-icon {
      width: 60px;
      margin: 0 auto;
    }
    #logo #buttons {
      flex-direction: row;
      height: 40px;
      width: 100%;
      border: 0;
      border-top: 1px solid #f0f5fc;
    }
    #logo #buttons > :nth-child(1) {
      border-right: 1px solid #f0f5fc;
    }
    .game-grid .blank-2 {
      display: none;
    }
    
  }
  @media (min-width: 1541px) and (max-width: 1870.9px) {
    .categories-grid {
      grid-template-columns: repeat(14, 94px);
    }
    .main-container {
      width: 1524px;
    }
  }
  
  @media (min-width: 1321px) and (max-width: 1540.9px) {
    .categories-grid {
      grid-template-columns: repeat(12, 94px);
    }
    .main-container {
      width: 1304px;
    }
  }
  
  @media (min-width: 1211px) and (max-width: 1320.9px) {
    .categories-grid {
      grid-template-columns: repeat(11, 94px);
    }
    .main-container {
      width: 1194px;
    }
  }
  
  
  @media (min-width: 991px) and (max-width: 1210.9px) {
    .categories-grid {
      grid-template-columns: repeat(9, 94px);
    }
    .main-container {
      width: 980px;
    }
  }
  
  @media (min-width: 881px) and (max-width: 990.9px) {
    .categories-grid {
      grid-template-columns: repeat(8, 94px);
    }
    .main-container {
      width: 760px;
    }
  }
  @media (min-width: 661px) and (max-width: 880.9px) {
    .categories-grid {
      grid-template-columns: repeat(6, 94px);
    }
    .main-container {
      width: 644px;
    }
  }
  
  @media (min-width: 551px) and (max-width: 660.9px) {
    .categories-grid {
      grid-template-columns: repeat(5, 94px);
    }
    .main-container {
      width: 534px;
    }
  }
  
  @media (min-width: 111px) and (max-width: 550.9px) {
    .categories-grid {
      grid-template-columns: repeat(3, 94px);
    }
    .main-container {
      width: 314px;
    }
  }