body { background: #1c242c; color: #ededed; }

    .game-card {
      position: relative;
      border-radius: 8px;
      overflow: hidden;
      margin: 10px;
      width: 230px;
      background: #222;
      flex: 0 0 auto;
    }

    .game-header {
      display: flex;
      justify-content: space-between;
      padding: 4px 8px;
      font-size: 12px;
      background: rgba(255, 255, 255, 0.1);
    }

    .teams {
      display: flex;
      height: 90px;
    }

    .team {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #fff;
      padding: 4px;
    }

    .team-logo { max-height: 30px; margin-bottom: 4px; }

    .team-name {
      font-size: 12px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .play-btn {
      position: absolute;
      top: 60%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 30px;
      color: #fff;
      opacity: 0.8;
    }

    .play-btn:hover { opacity: 1; }

    .game-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    .scrollable-row {
      display: -webkit-box;
      flex-wrap: nowrap;
      overflow-x: auto;
      padding-bottom: 10px;
    }

    .scrollable-row::-webkit-scrollbar { height: 8px; }
    .scrollable-row::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 4px;
    }

    .game-section { margin-bottom: 30px; }
    .game-section h5 { color: #fff; }
    a.text-primary { color: #1e90ff !important; }
    
    
    .modal.right .modal-dialog {
      position: fixed;
      right: 0;
      top: 0;
      margin: 0;
      height: 100%;
      transform: translateX(100%);
      transition: transform 0.3s ease-out;
      width: 360px;
      max-width: 90%;
    }
    
    .modal.right.show .modal-dialog {
      transform: translateX(0);
    }
    
    .modal-content {
      height: 100%;
      border-radius: 0;
    }